+ {/* Header */}
+
+ )
+}
diff --git a/desktop/src/components/chat/AssistantMessage.tsx b/desktop/src/components/chat/AssistantMessage.tsx
new file mode 100644
index 00000000..36359f4f
--- /dev/null
+++ b/desktop/src/components/chat/AssistantMessage.tsx
@@ -0,0 +1,51 @@
+import { MarkdownRenderer } from '../markdown/MarkdownRenderer'
+import { useState } from 'react'
+
+type Props = {
+ content: string
+ isStreaming?: boolean
+}
+
+export function AssistantMessage({ content, isStreaming }: Props) {
+ const [copied, setCopied] = useState(false)
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(content)
+ setCopied(true)
+ window.setTimeout(() => setCopied(false), 1500)
+ } catch {
+ setCopied(false)
+ }
+ }
+
+ return (
+
+
+
+ {/* Questions */}
+
+
+ help
+
+
+
+
+ Claude needs your input
+
+ {submitted && (
+
+ Answered
+
+ )}
+
+
+ {questions.map((q, qIndex) => (
+
+
+ {/* Submit button */}
+ {!submitted && (
+
+
+ ))}
+
+ {/* Free text "Other" input */}
+ {!submitted && (
+ + {q.question} +
+ + {/* Option cards */} + {q.options && q.options.length > 0 && ( +
+ {q.options.map((opt, optIndex) => {
+ const isSelected = selections[qIndex] === opt.label
+ return (
+
+ )
+ })}
+
+ )}
+
+
+
+ )}
+
+ {/* Submitted answer display */}
+ {submitted && (
+
+ {
+ setFreeText(e.target.value)
+ // Clear radio selections when typing
+ if (e.target.value.trim()) {
+ setSelections({})
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && hasSelection) {
+ handleSubmit()
+ }
+ }}
+ placeholder="Type your answer..."
+ className="flex-1 px-3 py-2 text-sm bg-[var(--color-surface)] border border-[var(--color-outline-variant)]/40 rounded-[var(--radius-md)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:border-[var(--color-secondary)] focus:ring-1 focus:ring-[var(--color-secondary)]/30"
+ />
+
+
+ check_circle
+
+ Answered: {freeText.trim() || Object.values(selections).join(', ')}
+
+
+ )}
+
+
+
+ )}
+
+ {/* Avatar */}
+
+ )
+}
diff --git a/desktop/src/components/chat/AttachmentGallery.tsx b/desktop/src/components/chat/AttachmentGallery.tsx
new file mode 100644
index 00000000..484dfda4
--- /dev/null
+++ b/desktop/src/components/chat/AttachmentGallery.tsx
@@ -0,0 +1,113 @@
+import { useMemo, useState } from 'react'
+import { ImageGalleryModal } from './ImageGalleryModal'
+
+export type AttachmentPreview = {
+ id?: string
+ type: 'image' | 'file'
+ name: string
+ data?: string
+ previewUrl?: string
+}
+
+type Props = {
+ attachments: AttachmentPreview[]
+ variant?: 'composer' | 'message'
+ onRemove?: (id: string) => void
+}
+
+export function AttachmentGallery({ attachments, variant = 'message', onRemove }: Props) {
+ const [activeImageIndex, setActiveImageIndex] = useState
+
+
+ {/* Content */}
+
+ {!isStreaming && content.trim() && (
+
+
+
+
+ )}
+
+ {attachments.map((attachment, index) => {
+ if (attachment.type === 'image' && (attachment.previewUrl || attachment.data)) {
+ const src = attachment.previewUrl || attachment.data || ''
+ return (
+
+
+ {activeImageIndex !== null && activeImageIndex >= 0 && (
+
+
+ {onRemove && attachment.id && (
+
+ )}
+
+ )
+ }
+
+ return (
+
+ attach_file
+ {attachment.name}
+ {onRemove && attachment.id && (
+
+ )}
+
+ )
+ })}
+
+
+ )
+}
diff --git a/desktop/src/components/chat/CodeViewer.tsx b/desktop/src/components/chat/CodeViewer.tsx
new file mode 100644
index 00000000..f8ce60ec
--- /dev/null
+++ b/desktop/src/components/chat/CodeViewer.tsx
@@ -0,0 +1,99 @@
+import { useMemo, useState } from 'react'
+import hljs from 'highlight.js'
+import { CopyButton } from '../shared/CopyButton'
+
+type Props = {
+ code: string
+ language?: string
+ maxLines?: number
+ showLineNumbers?: boolean
+}
+
+export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = true }: Props) {
+ const [expanded, setExpanded] = useState(false)
+
+ const lines = code.split('\n')
+ const isTruncated = !expanded && lines.length > maxLines
+ const visibleCode = isTruncated ? lines.slice(0, maxLines).join('\n') : code
+
+ const highlightedLines = useMemo(() => {
+ return visibleCode.split('\n').map((line) => {
+ try {
+ if (language && hljs.getLanguage(language)) {
+ return hljs.highlight(line || ' ', { language, ignoreIllegals: true }).value
+ }
+ return hljs.highlightAuto(line || ' ').value
+ } catch {
+ return escapeHtml(line)
+ }
+ })
+ }, [language, visibleCode])
+
+ const startLine = 1
+
+ const languageLabel = language || 'code'
+
+ const visibleLines = visibleCode.split('\n')
+
+ const lineCountLabel = `${lines.length} ${lines.length === 1 ? 'line' : 'lines'}`
+
+ const showExpandToggle = lines.length > maxLines
+ const displayLines = visibleLines.length
+
+ return (
+
+
+ event.preventDefault()}
+ onDrop={handleDrop}
+ >
+ {slashMenuOpen && filteredCommands.length > 0 && (
+
+
+
+
+
+
+ )}
+
+ {attachments.length > 0 && (
+
+ {filteredCommands.map((command, index) => (
+
+ ))}
+
+
+ Up/Down
+ navigate
+ Enter
+ select
+ Esc
+ dismiss
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {plusMenuOpen && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+function escapeHtml(str: string): string {
+ return str
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+}
diff --git a/desktop/src/components/chat/DiffViewer.tsx b/desktop/src/components/chat/DiffViewer.tsx
new file mode 100644
index 00000000..ec1e5ffb
--- /dev/null
+++ b/desktop/src/components/chat/DiffViewer.tsx
@@ -0,0 +1,134 @@
+import { useMemo } from 'react'
+import { createPatch } from 'diff'
+import { CopyButton } from '../shared/CopyButton'
+
+type Props = {
+ filePath: string
+ oldString: string
+ newString: string
+}
+
+type DiffLine = {
+ oldLineNo: number | null
+ newLineNo: number | null
+ type: 'added' | 'removed' | 'context'
+ content: string
+}
+
+export function DiffViewer({ filePath, oldString, newString }: Props) {
+ const patch = useMemo(
+ () => createPatch(filePath, oldString, newString, 'before', 'after', { context: 3 }),
+ [filePath, newString, oldString],
+ )
+ const lines = useMemo(() => parsePatchLines(patch), [patch])
+ const additions = lines.filter((line) => line.type === 'added').length
+ const deletions = lines.filter((line) => line.type === 'removed').length
+
+ return (
+
+
+
+
+ {languageLabel}
+ {lineCountLabel}
+
+
+
+
+ {showExpandToggle && (
+
+ )}
+
+ {visibleLines.map((line, index) => (
+
+
+ {showLineNumbers ? (
+
+ {startLine + index}
+
+ ) : (
+
+ )}
+
+
+ ))}
+
+
+ )
+}
+
+function parsePatchLines(patch: string): DiffLine[] {
+ const output: DiffLine[] = []
+ const patchLines = patch.split('\n')
+ let oldLineNo = 0
+ let newLineNo = 0
+
+ for (const line of patchLines) {
+ if (
+ line.startsWith('Index:') ||
+ line.startsWith('===') ||
+ line.startsWith('---') ||
+ line.startsWith('+++')
+ ) {
+ continue
+ }
+
+ if (line.startsWith('@@')) {
+ const match = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)/)
+ if (match?.[1]) oldLineNo = parseInt(match[1], 10) - 1
+ if (match?.[2]) newLineNo = parseInt(match[2], 10) - 1
+ continue
+ }
+
+ if (line.startsWith('\\ No newline')) continue
+
+ if (line.startsWith('+')) {
+ newLineNo += 1
+ output.push({ oldLineNo: null, newLineNo, type: 'added', content: line.slice(1) })
+ continue
+ }
+
+ if (line.startsWith('-')) {
+ oldLineNo += 1
+ output.push({ oldLineNo, newLineNo: null, type: 'removed', content: line.slice(1) })
+ continue
+ }
+
+ oldLineNo += 1
+ newLineNo += 1
+ output.push({
+ oldLineNo,
+ newLineNo,
+ type: 'context',
+ content: line.startsWith(' ') ? line.slice(1) : line,
+ })
+ }
+
+ return output
+}
diff --git a/desktop/src/components/chat/ImageGalleryModal.tsx b/desktop/src/components/chat/ImageGalleryModal.tsx
new file mode 100644
index 00000000..670ead73
--- /dev/null
+++ b/desktop/src/components/chat/ImageGalleryModal.tsx
@@ -0,0 +1,91 @@
+import { useEffect } from 'react'
+import { Modal } from '../shared/Modal'
+
+type GalleryImage = {
+ src: string
+ name: string
+}
+
+type Props = {
+ open: boolean
+ images: GalleryImage[]
+ activeIndex: number
+ onClose: () => void
+ onSelect: (index: number) => void
+}
+
+export function ImageGalleryModal({ open, images, activeIndex, onClose, onSelect }: Props) {
+ const activeImage = images[activeIndex]
+
+ useEffect(() => {
+ if (!open || images.length <= 1) return
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'ArrowLeft') {
+ event.preventDefault()
+ onSelect((activeIndex - 1 + images.length) % images.length)
+ } else if (event.key === 'ArrowRight') {
+ event.preventDefault()
+ onSelect((activeIndex + 1) % images.length)
+ }
+ }
+ document.addEventListener('keydown', handleKeyDown)
+ return () => document.removeEventListener('keydown', handleKeyDown)
+ }, [activeIndex, images.length, onSelect, open])
+
+ if (!activeImage) return null
+
+ return (
+
+
+
+
+
+
+
+ {filePath}
+
+
+ +{additions}
+ -{deletions}
+
+
+
+
+ {lines.map((line, index) => {
+ const rowClass =
+ line.type === 'added'
+ ? 'bg-[#f0fff4]'
+ : line.type === 'removed'
+ ? 'bg-[#fff8f8]'
+ : 'bg-white'
+ const prefix = line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '
+ const prefixColor =
+ line.type === 'added'
+ ? 'text-[#1a7f37]'
+ : line.type === 'removed'
+ ? 'text-[#cf222e]'
+ : 'text-[#57606a]'
+
+ return (
+
+
+
+ {line.oldLineNo ?? ''}
+
+
+ {line.newLineNo ?? ''}
+
+ {prefix}
+ {line.content}
+
+ )
+ })}
+
+
+
+
+
+
+
+ {images.length > 1 && (
+ {activeImage.name}
+
+ {activeIndex + 1} / {images.length}
+
+
+
+
+
+ )}
+
+ 
+
+
+ {images.length > 1 && (
+
+ {images.map((image, index) => (
+
+ ))}
+
+ )}
+
+
+ )
+}
+
+function MessageBlock({
+ message,
+ activeThinkingId,
+ toolResult,
+}: {
+ message: UIMessage
+ activeThinkingId: string | null
+ toolResult?: { content: unknown; isError: boolean } | null
+}) {
+ switch (message.type) {
+ case 'user_text':
+ return
+ {messages.map((msg) => {
+ // Skip tool_results that are rendered inline within their ToolCallBlock
+ if (msg.type === 'tool_result' && toolUseMap.has(msg.toolUseId)) {
+ return null
+ }
+
+ return (
+
+
+ Error: {message.message}
+
+ )
+ case 'system':
+ return (
+
+ {message.content}
+
+ )
+ }
+}
diff --git a/desktop/src/components/chat/PermissionDialog.tsx b/desktop/src/components/chat/PermissionDialog.tsx
new file mode 100644
index 00000000..7446dfd3
--- /dev/null
+++ b/desktop/src/components/chat/PermissionDialog.tsx
@@ -0,0 +1,256 @@
+import { useState } from 'react'
+import { useChatStore } from '../../stores/chatStore'
+import { Button } from '../shared/Button'
+import { DiffViewer } from './DiffViewer'
+
+type Props = {
+ requestId: string
+ toolName: string
+ input: unknown
+ description?: string
+}
+
+/**
+ * Icons for known tool types.
+ * Uses Material Symbols Outlined names.
+ */
+const TOOL_META: Record
+
+ )
+ }
+
+ return null
+}
+
+export function PermissionDialog({ requestId, toolName, input, description }: Props) {
+ const { respondToPermission, pendingPermission } = useChatStore()
+ const isPending = pendingPermission?.requestId === requestId
+ const [showRaw, setShowRaw] = useState(false)
+
+ const meta = TOOL_META[toolName] || { icon: 'shield', label: toolName, color: '#87736D' }
+ const details = extractToolDetails(toolName, input)
+ const rawInput = typeof input === 'string' ? input : JSON.stringify(input, null, 2)
+ const preview = renderPermissionPreview(toolName, input)
+ const title = getPermissionTitle(toolName, input)
+ const allowRawToggle = !preview
+
+ return (
+
+ $ {obj.command}
+
+
+ {/* Header */}
+
+ )
+}
diff --git a/desktop/src/components/chat/StreamingIndicator.tsx b/desktop/src/components/chat/StreamingIndicator.tsx
new file mode 100644
index 00000000..c1826d1f
--- /dev/null
+++ b/desktop/src/components/chat/StreamingIndicator.tsx
@@ -0,0 +1,26 @@
+import { useChatStore } from '../../stores/chatStore'
+
+export function StreamingIndicator() {
+ const { chatState, elapsedSeconds, tokenUsage } = useChatStore()
+
+ const verb = chatState === 'thinking'
+ ? 'Thinking'
+ : chatState === 'tool_executing'
+ ? 'Executing'
+ : 'Crafting'
+
+ return (
+
+
+
+ {/* Tool details */}
+
+
+ {meta.icon}
+
+
+
+
+
+
+ {title}
+
+ {isPending && (
+
+
+ Awaiting approval
+
+ )}
+ {!isPending && (
+
+ Responded
+
+ )}
+
+ {description && (
+ {description}
+ )} +
+ {preview ? (
+
+
+ {/* Action buttons */}
+ {isPending && (
+
+ {details.primary && toolName !== 'Bash' ? (
+
+ ) : details.primary ? (
+
+
+ folder_open
+
+ {details.primary}
+
+ ) : null}
+ {preview}
+
+
+ ) : null}
+
+ {/* Secondary detail */}
+ {details.secondary && (
+
+
+ {toolName === 'Glob' || toolName === 'Grep' ? 'search' : 'folder_open'}
+
+ {details.primary}
+
+ {details.secondary}
+ )} + + {allowRawToggle && ( + + )} + + {allowRawToggle && showRaw && ( +
+ {rawInput}
+
+ )}
+
+
+
+
+
+
+ )}
+
+ ✦
+ {verb}...
+
+ {elapsedSeconds}s
+
+ {tokenUsage.output_tokens > 0 && (
+
+ · ↓ {tokenUsage.output_tokens} tokens
+
+ )}
+
+ )
+}
diff --git a/desktop/src/components/chat/TerminalChrome.tsx b/desktop/src/components/chat/TerminalChrome.tsx
new file mode 100644
index 00000000..26d94636
--- /dev/null
+++ b/desktop/src/components/chat/TerminalChrome.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+type Props = {
+ title?: string
+ children: ReactNode
+ className?: string
+}
+
+/**
+ * macOS-style terminal window decoration with traffic light buttons.
+ * Reusable wrapper for Bash commands, tool results, and code viewers.
+ */
+export function TerminalChrome({ title, children, className = '' }: Props) {
+ return (
+
+ {/* Title bar with traffic lights */}
+
+ )
+}
diff --git a/desktop/src/components/chat/ThinkingBlock.tsx b/desktop/src/components/chat/ThinkingBlock.tsx
new file mode 100644
index 00000000..191cc82e
--- /dev/null
+++ b/desktop/src/components/chat/ThinkingBlock.tsx
@@ -0,0 +1,90 @@
+import { useState, useEffect, useRef } from 'react'
+
+export function ThinkingBlock({ content, isActive = false }: { content: string; isActive?: boolean }) {
+ const [expanded, setExpanded] = useState(false)
+
+ // Auto-scroll to bottom of content area when expanded and content is still growing
+ const contentRef = useRef
+
+ {/* Content */}
+
+
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+
+ {children}
+
+
+
+
+ {expanded && (
+
+ )
+}
+
+/** Shared keyframe styles injected once per ThinkingBlock mount */
+const thinkingStyles = `
+@keyframes thinking-cursor-blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
+}
+@keyframes thinking-dots {
+ 0%, 20% { content: ''; }
+ 40% { content: '.'; }
+ 60% { content: '..'; }
+ 80%, 100% { content: '...'; }
+}
+.thinking-cursor {
+ display: inline-block;
+ width: 2px;
+ height: 1em;
+ background: var(--color-text-tertiary);
+ vertical-align: middle;
+ margin-left: 1px;
+ animation: thinking-cursor-blink 1s step-end infinite;
+}
+.thinking-inline-cursor {
+ display: inline-block;
+ width: 1px;
+ height: 0.95em;
+ margin-left: 3px;
+ vertical-align: text-bottom;
+ background: var(--color-text-tertiary);
+ animation: thinking-cursor-blink 1s step-end infinite;
+}
+.thinking-dots::after {
+ content: '';
+ animation: thinking-dots 1.4s steps(1, end) infinite;
+}
+`
diff --git a/desktop/src/components/chat/ToolCallBlock.tsx b/desktop/src/components/chat/ToolCallBlock.tsx
new file mode 100644
index 00000000..034d341c
--- /dev/null
+++ b/desktop/src/components/chat/ToolCallBlock.tsx
@@ -0,0 +1,267 @@
+import { useMemo, useState } from 'react'
+import { CodeViewer } from './CodeViewer'
+import { DiffViewer } from './DiffViewer'
+import { TerminalChrome } from './TerminalChrome'
+import { CopyButton } from '../shared/CopyButton'
+
+type Props = {
+ toolName: string
+ input: unknown
+ result?: { content: unknown; isError: boolean } | null
+}
+
+const TOOL_ICONS: Record
+
+ )}
+
+ {content}
+ {showCursor && }
+
+
+
+
+ {expandable && expanded && (
+
+ )
+}
+
+function renderPreview(
+ toolName: string,
+ obj: Record
+ {preview}
+ {details}
+
+ )}
+
+ $ {obj.command}
+
+
+
+ )
+ }
+ }
+
+ return null
+}
+
+function renderDetails(toolName: string, obj: Record
+ {result.isError ? 'Error Output' : 'Tool Output'}
+
+
+
+ )
+}
+
+function getToolResultSummary(toolName: string, content: unknown): string {
+ if (toolName === 'Bash') return ''
+
+ const text = extractTextContent(content)
+ if (!text) return ''
+
+ const lineCount = text.split('\n').length
+ if (lineCount > 1) {
+ return `${lineCount} lines output`
+ }
+
+ const compact = text.replace(/\s+/g, ' ').trim()
+ if (!compact) return ''
+ if (compact.length <= 36) return compact
+ return `${compact.slice(0, 36)}…`
+}
+
+function getInlineErrorSummary(result?: { content: unknown; isError: boolean } | null) {
+ if (!result?.isError) return ''
+
+ const text = extractTextContent(result.content)?.replace(/\s+/g, ' ').trim() || ''
+ if (!text) return 'Tool failed'
+ if (text.length <= 120) return text
+ return `${text.slice(0, 120)}…`
+}
+
+function getToolSummary(toolName: string, obj: Record
+ Tool Input
+
+
+ {/* Status header */}
+
+
+ {/* Content */}
+ {expanded ? (
+ isError ? (
+
+ )
+}
+
+function extractText(content: unknown): string {
+ if (typeof content === 'string') return content
+ if (Array.isArray(content)) {
+ return content
+ .map((c: any) => (typeof c === 'string' ? c : c?.text || ''))
+ .filter(Boolean)
+ .join('\n')
+ }
+ if (content && typeof content === 'object') {
+ return JSON.stringify(content, null, 2)
+ }
+ return String(content ?? '')
+}
diff --git a/desktop/src/components/chat/UserMessage.tsx b/desktop/src/components/chat/UserMessage.tsx
new file mode 100644
index 00000000..adf182df
--- /dev/null
+++ b/desktop/src/components/chat/UserMessage.tsx
@@ -0,0 +1,30 @@
+import type { UIAttachment } from '../../types/chat'
+import { AttachmentGallery } from './AttachmentGallery'
+
+type Props = {
+ content: string
+ attachments?: UIAttachment[]
+}
+
+export function UserMessage({ content, attachments }: Props) {
+ const hasText = content.trim().length > 0
+
+ return (
+
+ {text}
+
+ ) : (
+
+ {preview}
+ {hasMore ? '…' : ''}
+
+ )}
+
+ {hasMore && (
+
+ )}
+
+
+ )
+}
diff --git a/desktop/src/components/chat/chatBlocks.test.tsx b/desktop/src/components/chat/chatBlocks.test.tsx
new file mode 100644
index 00000000..505d4707
--- /dev/null
+++ b/desktop/src/components/chat/chatBlocks.test.tsx
@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ThinkingBlock } from './ThinkingBlock'
+import { ToolCallBlock } from './ToolCallBlock'
+import { PermissionDialog } from './PermissionDialog'
+import { useChatStore } from '../../stores/chatStore'
+
+describe('chat blocks', () => {
+ beforeEach(() => {
+ useChatStore.setState({
+ chatState: 'idle',
+ messages: [],
+ streamingText: '',
+ streamingToolInput: '',
+ activeToolUseId: null,
+ activeToolName: null,
+ activeThinkingId: null,
+ pendingPermission: null,
+ elapsedSeconds: 0,
+ })
+ })
+
+ it('keeps thinking collapsed by default', () => {
+ const { container } = render(
+ {attachments && attachments.length > 0 && (
+
+
+ {content}
+
+ )}
+
+
+
+ {open && (
+
+ )
+}
diff --git a/desktop/src/components/controls/PermissionModeSelector.tsx b/desktop/src/components/controls/PermissionModeSelector.tsx
new file mode 100644
index 00000000..3a9a2240
--- /dev/null
+++ b/desktop/src/components/controls/PermissionModeSelector.tsx
@@ -0,0 +1,127 @@
+import { useState, useRef, useEffect } from 'react'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { useChatStore } from '../../stores/chatStore'
+import type { PermissionMode } from '../../types/settings'
+
+const PERMISSION_ITEMS: Array<{
+ value: PermissionMode
+ label: string
+ description: string
+ icon: string
+ color?: string
+}> = [
+ {
+ value: 'default',
+ label: 'Ask permissions',
+ description: 'Confirm file edits and higher-risk commands when CLI asks',
+ icon: 'verified_user',
+ },
+ {
+ value: 'acceptEdits',
+ label: 'Auto accept edits',
+ description: 'Claude writes to disk without asking',
+ icon: 'bolt',
+ },
+ {
+ value: 'plan',
+ label: 'Plan mode',
+ description: 'Architecture & reasoning only, no files',
+ icon: 'architecture',
+ color: 'text-[var(--color-text-tertiary)]',
+ },
+ {
+ value: 'bypassPermissions',
+ label: 'Bypass permissions',
+ description: 'Full tool access for shell and file system',
+ icon: 'gavel',
+ color: 'text-[var(--color-error)]',
+ },
+]
+
+const MODE_ICONS: Record
+ {/* Models */}
+
+ )}
+
+
+
+ {/* Effort */}
+
+ Model Configuration
+
+
+ {availableModels.map((model) => {
+ const isSelected = model.id === currentModel?.id
+ return (
+
+ )
+ })}
+
+
+
+
+ Effort
+
+
+ {EFFORT_OPTIONS.map((opt) => {
+ const isSelected = opt.value === effortLevel
+ return (
+
+ )
+ })}
+
+
+
+
+ {open && (
+
+ )
+}
diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
new file mode 100644
index 00000000..b47baf27
--- /dev/null
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { Sidebar } from './Sidebar'
+import { ContentRouter } from './ContentRouter'
+import { ToastContainer } from '../shared/Toast'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts'
+
+export function AppShell() {
+ const fetchSettings = useSettingsStore((s) => s.fetchAll)
+
+ useEffect(() => {
+ fetchSettings()
+ }, [fetchSettings])
+
+ useKeyboardShortcuts()
+
+ return (
+
+
+ )}
+
+ Execution Permissions
+
+ {PERMISSION_ITEMS.map((item) => (
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/desktop/src/components/layout/ContentRouter.tsx b/desktop/src/components/layout/ContentRouter.tsx
new file mode 100644
index 00000000..3282d476
--- /dev/null
+++ b/desktop/src/components/layout/ContentRouter.tsx
@@ -0,0 +1,69 @@
+import { useUIStore } from '../../stores/uiStore'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useTeamStore } from '../../stores/teamStore'
+import { EmptySession } from '../../pages/EmptySession'
+import { ActiveSession } from '../../pages/ActiveSession'
+import { ScheduledTasks } from '../../pages/ScheduledTasks'
+import { Settings } from '../../pages/Settings'
+import { AgentTranscript } from '../../pages/AgentTranscript'
+
+export function ContentRouter() {
+ const activeView = useUIStore((s) => s.activeView)
+ const activeSessionId = useSessionStore((s) => s.activeSessionId)
+ const viewingAgentId = useTeamStore((s) => s.viewingAgentId)
+
+ if (activeView === 'settings') {
+ return
+ terminal
+
+ )
+}
+
+function HistoryPlaceholder() {
+ return (
+ Terminal
++ Integrated terminal coming soon. Use the Code tab to interact with Claude. +
+
+ history
+
+ )
+}
diff --git a/desktop/src/components/layout/Sidebar.tsx b/desktop/src/components/layout/Sidebar.tsx
new file mode 100644
index 00000000..9b89b77b
--- /dev/null
+++ b/desktop/src/components/layout/Sidebar.tsx
@@ -0,0 +1,275 @@
+import { useEffect, useState, useCallback, useMemo } from 'react'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useUIStore } from '../../stores/uiStore'
+import type { SessionListItem } from '../../types/session'
+
+export function Sidebar() {
+ const { sessions, activeSessionId, setActiveSession, fetchSessions, deleteSession, renameSession } = useSessionStore()
+ const { activeView, setActiveView } = useUIStore()
+ const [searchQuery, setSearchQuery] = useState('')
+ const [contextMenu, setContextMenu] = useState<{ id: string; x: number; y: number } | null>(null)
+ const [renamingId, setRenamingId] = useStateHistory
++ View session history and agent transcripts. Select a session from the sidebar to view its history. +
+
+ {/* Left: User info + plan */}
+
+ )
+}
diff --git a/desktop/src/components/layout/TitleBar.tsx b/desktop/src/components/layout/TitleBar.tsx
new file mode 100644
index 00000000..eb1a63b7
--- /dev/null
+++ b/desktop/src/components/layout/TitleBar.tsx
@@ -0,0 +1,94 @@
+import { useUIStore } from '../../stores/uiStore'
+
+export function TitleBar() {
+ const { activeView, setActiveView } = useUIStore()
+
+ return (
+
+
+
+
+
+ {statusText}
+
+
+ {projectName && (
+ <>
+ ·
+ {projectName}
+
+ )}
+
+ {currentModel && (
+
+ {currentModel.name}
+
+ )}
+
+
+ {/* macOS traffic light spacer */}
+
+
+ {/* Logo */}
+
+ )
+}
+
+function TabButton({
+ active,
+ onClick,
+ icon,
+ children,
+}: {
+ active: boolean
+ onClick: () => void
+ icon: string
+ children: React.ReactNode
+}) {
+ return (
+
+ )
+}
diff --git a/desktop/src/components/markdown/MarkdownRenderer.tsx b/desktop/src/components/markdown/MarkdownRenderer.tsx
new file mode 100644
index 00000000..a52b56c4
--- /dev/null
+++ b/desktop/src/components/markdown/MarkdownRenderer.tsx
@@ -0,0 +1,96 @@
+import { useMemo } from 'react'
+import { marked, type Tokens } from 'marked'
+import { escapeHtml, highlightCodeLines } from '../chat/highlightCode'
+
+type Props = {
+ content: string
+}
+
+const renderer = new marked.Renderer()
+
+renderer.code = function ({ text, lang }: Tokens.Code) {
+ const languageLabel = escapeHtml(lang || 'code')
+ const lines = text.split('\n')
+ const highlightedLines = highlightCodeLines(text, lang)
+
+ const body = highlightedLines
+ .map((line, index) => `
+
+ Claude Code Companion
+
+
+ {/* Navigation arrows */}
+
+
+
+
+
+ {/* Center tabs */}
+
+ setActiveView('code')}
+ icon="code"
+ >
+ Code
+
+ setActiveView('terminal')}
+ icon="terminal"
+ >
+ Terminal
+
+ setActiveView('history')}
+ icon="history"
+ >
+ History
+
+
+
+ {/* Right: Settings */}
+
+
+
+
+ ${index + 1}
+ ${line || ' '}
+
+ `)
+ .join('')
+
+ return `
+
+
+ `
+}
+
+marked.setOptions({
+ breaks: true,
+ gfm: true,
+})
+marked.use({ renderer })
+
+export function MarkdownRenderer({ content }: Props) {
+ const html = useMemo(() => {
+ try {
+ return marked.parse(content) as string
+ } catch {
+ return content
+ }
+ }, [content])
+
+ const handleClick = async (event: React.MouseEvent
+
+
+ ${languageLabel}
+ ${lines.length} ${lines.length === 1 ? 'line' : 'lines'}
+
+
+
+
+ ${body}
+
+ {/* Trigger — shows selected project chip or placeholder */}
+ {value ? (
+
+ ) : (
+
+ )}
+
+ {/* Dropdown */}
+ {open && (
+
+ )
+}
diff --git a/desktop/src/components/shared/Dropdown.tsx b/desktop/src/components/shared/Dropdown.tsx
new file mode 100644
index 00000000..fbbaf212
--- /dev/null
+++ b/desktop/src/components/shared/Dropdown.tsx
@@ -0,0 +1,91 @@
+import { useState, useRef, useEffect, type ReactNode } from 'react'
+
+type DropdownItem
+ {mode === 'recent' ? (
+ /* Recent projects mode */
+ <>
+
+ )}
+
+ Recent
+
+
+ {loading ? (
+
+
+ {/* Divider + Choose different folder */}
+ Loading...
+ ) : projects.length === 0 ? (
+ No recent projects
+ ) : (
+ projects.map((project) => {
+ const isSelected = project.realPath === value
+ return (
+
+ )
+ })
+ )}
+
+
+
+
+ ) : (
+ /* File browser mode */
+ <>
+
+
+
+ {browsePath.split('/').filter(Boolean).map((seg, i, arr) => (
+
+ /
+
+
+ ))}
+
+
+
+ {loading ? (
+
+
+ {/* Use current folder */}
+ Loading...
+ ) : (
+ <>
+ {browseParent && browseParent !== browsePath && (
+
+ )}
+ {browseEntries.length === 0 ? (
+ No subdirectories
+ ) : browseEntries.map((entry) => (
+
+ ))}
+
+ )}
+
+ {browsePath}
+
+
+
+ )}
+
+
+ )
+}
diff --git a/desktop/src/components/shared/Input.tsx b/desktop/src/components/shared/Input.tsx
new file mode 100644
index 00000000..cae1f1b5
--- /dev/null
+++ b/desktop/src/components/shared/Input.tsx
@@ -0,0 +1,38 @@
+import type { InputHTMLAttributes } from 'react'
+
+type InputProps = InputHTMLAttributes setOpen(!open)} className="cursor-pointer">
+ {trigger}
+
+
+ {open && (
+
+ {items.map((item, i) => (
+
+ ))}
+
+ )}
+
+ {label && (
+
+ )}
+
+ {error &&
+ )
+}
diff --git a/desktop/src/components/shared/Modal.tsx b/desktop/src/components/shared/Modal.tsx
new file mode 100644
index 00000000..ad368308
--- /dev/null
+++ b/desktop/src/components/shared/Modal.tsx
@@ -0,0 +1,55 @@
+import { useEffect, type ReactNode } from 'react'
+
+type ModalProps = {
+ open: boolean
+ onClose: () => void
+ title?: string
+ children: ReactNode
+ width?: number
+ footer?: ReactNode
+}
+
+export function Modal({ open, onClose, title, children, width = 560, footer }: ModalProps) {
+ useEffect(() => {
+ if (!open) return
+ const handleEsc = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose()
+ }
+ document.addEventListener('keydown', handleEsc)
+ return () => document.removeEventListener('keydown', handleEsc)
+ }, [open, onClose])
+
+ if (!open) return null
+
+ return (
+ {error}
} +
+ {/* Backdrop */}
+
+
+ {/* Modal content */}
+
+ )
+}
diff --git a/desktop/src/components/shared/ProjectContextChip.tsx b/desktop/src/components/shared/ProjectContextChip.tsx
new file mode 100644
index 00000000..5092b968
--- /dev/null
+++ b/desktop/src/components/shared/ProjectContextChip.tsx
@@ -0,0 +1,30 @@
+type Props = {
+ workDir?: string | null
+ repoName?: string | null
+ branch?: string | null
+}
+
+export function ProjectContextChip({ workDir, repoName, branch }: Props) {
+ const label = branch ? (repoName || workDir?.split('/').pop() || '') : (workDir?.split('/').pop() || repoName || '')
+
+ if (!label) return null
+
+ return (
+
+ {title && (
+
+
+
+ )}
+
+ {title}
+
+ {children}
+
+
+ {footer && (
+
+ {footer}
+
+ )}
+
+ {branch ? (
+
+ ) : (
+ folder
+ )}
+ {label}
+ {branch ? (
+ <>
+ |
+ {branch}
+
+ ) : null}
+
+ )
+}
diff --git a/desktop/src/components/shared/Spinner.tsx b/desktop/src/components/shared/Spinner.tsx
new file mode 100644
index 00000000..ef4f74fa
--- /dev/null
+++ b/desktop/src/components/shared/Spinner.tsx
@@ -0,0 +1,30 @@
+type SpinnerProps = {
+ size?: number
+ className?: string
+}
+
+export function Spinner({ size = 20, className = '' }: SpinnerProps) {
+ return (
+
+ )
+}
diff --git a/desktop/src/components/shared/Textarea.tsx b/desktop/src/components/shared/Textarea.tsx
new file mode 100644
index 00000000..96515cc6
--- /dev/null
+++ b/desktop/src/components/shared/Textarea.tsx
@@ -0,0 +1,38 @@
+import type { TextareaHTMLAttributes } from 'react'
+
+type TextareaProps = TextareaHTMLAttributes
+ {label && (
+
+ )}
+
+ {error &&
+ )
+}
diff --git a/desktop/src/components/shared/Toast.tsx b/desktop/src/components/shared/Toast.tsx
new file mode 100644
index 00000000..a48b1735
--- /dev/null
+++ b/desktop/src/components/shared/Toast.tsx
@@ -0,0 +1,47 @@
+import { useUIStore, type Toast as ToastType } from '../../stores/uiStore'
+
+const typeStyles: Record{error}
} +
+
+ )
+}
+
+export function ToastContainer() {
+ const toasts = useUIStore((s) => s.toasts)
+
+ if (toasts.length === 0) return null
+
+ return (
+
+ {toast.message}
+
+
+
+ {toasts.map((toast) => (
+
+ )
+}
diff --git a/desktop/src/components/tasks/NewTaskModal.tsx b/desktop/src/components/tasks/NewTaskModal.tsx
new file mode 100644
index 00000000..a0fb58c9
--- /dev/null
+++ b/desktop/src/components/tasks/NewTaskModal.tsx
@@ -0,0 +1,119 @@
+import { useState } from 'react'
+import { useTaskStore } from '../../stores/taskStore'
+import { Modal } from '../shared/Modal'
+import { Input } from '../shared/Input'
+import { Textarea } from '../shared/Textarea'
+import { Button } from '../shared/Button'
+
+type Props = {
+ open: boolean
+ onClose: () => void
+}
+
+const FREQUENCY_OPTIONS = [
+ { value: '0 * * * *', label: 'Hourly' },
+ { value: '0 9 * * *', label: 'Daily' },
+ { value: '0 9 * * 1', label: 'Weekly' },
+ { value: '0 9 1 * *', label: 'Monthly' },
+]
+
+export function NewTaskModal({ open, onClose }: Props) {
+ const { createTask } = useTaskStore()
+ const [name, setName] = useState('')
+ const [description, setDescription] = useState('')
+ const [prompt, setPrompt] = useState('')
+ const [cron, setCron] = useState('0 9 * * *')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ const canSubmit = name.trim() && prompt.trim()
+
+ const handleSubmit = async () => {
+ if (!canSubmit) return
+ setIsSubmitting(true)
+ try {
+ await createTask({
+ name: name.trim(),
+ description: description.trim() || undefined,
+ cron,
+ prompt: prompt.trim(),
+ enabled: true,
+ recurring: true,
+ })
+ // Reset form
+ setName('')
+ setDescription('')
+ setPrompt('')
+ setCron('0 9 * * *')
+ onClose()
+ } catch (err) {
+ console.error('Failed to create task:', err)
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ return (
+
+ ℹ
+
+ Local tasks only run while your computer is awake.
+
+
+
+
+ setName(e.target.value)}
+ placeholder="daily-code-review"
+ />
+
+ setDescription(e.target.value)}
+ placeholder="Review yesterday's commits..."
+ />
+
+