@bytespell/shella 0.2.4 → 0.2.5

package/bundled-plugins/agent/src/App.tsx

@@ -0,0 +1,755 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import { Switch } from "@/components/ui/switch"
+import { Streamdown } from 'streamdown'
+import { code } from '@streamdown/code'
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
+
+import type { ContentBlock, Session } from './types'
+import {
+  buildRenderItems,
+  buildToolCallMap,
+  getCompletedToolCallIds,
+} from './utils'
+import { useAgentStore } from './store'
+
+const THINKING_LEVELS = ['off', 'minimal', 'low', 'medium', 'high', 'xhigh'] as const
+
+// Format timestamp to relative or absolute time
+function formatTime(timestamp: number | null | undefined): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+// =============================================================================
+// Scroll to Bottom Button
+// =============================================================================
+
+function ScrollToBottomButton() {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext()
+
+  if (isAtBottom) return null
+
+  return (
+    <button
+      className="absolute left-1/2 -translate-x-1/2 bottom-4 bg-muted hover:bg-muted/80 text-muted-foreground px-3 py-1 rounded-full text-xs shadow-lg z-10"
+      onClick={() => scrollToBottom()}
+    >
+      Scroll to bottom
+    </button>
+  )
+}
+
+// =============================================================================
+// Diff View - simple colorized diff display
+// =============================================================================
+
+function DiffView({ patch }: { patch: string }) {
+  return (
+    <pre className="p-3 text-xs bg-background font-mono whitespace-pre-wrap break-words">
+      {patch.split('\n').map((line, idx) => {
+        let className = 'text-muted-foreground'
+        if (line.startsWith('+') && !line.startsWith('+++')) {
+          className = 'text-green-600 dark:text-green-400 bg-green-500/10'
+        } else if (line.startsWith('-') && !line.startsWith('---')) {
+          className = 'text-red-600 dark:text-red-400 bg-red-500/10'
+        } else if (line.startsWith('@@')) {
+          className = 'text-blue-600 dark:text-blue-400'
+        }
+        return (
+          <div key={idx} className={className}>
+            {line || ' '}
+          </div>
+        )
+      })}
+    </pre>
+  )
+}
+
+// =============================================================================
+// Session Picker
+// =============================================================================
+
+interface SessionPickerProps {
+  sessions: Session[]
+  onSelect: (sessionPath: string) => void
+  onNewSession: () => void
+  onClose: () => void
+}
+
+function SessionPicker({ sessions, onSelect, onNewSession, onClose }: SessionPickerProps) {
+  // Close on escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div className="bg-popover border rounded-lg shadow-lg w-full max-w-md mx-4 max-h-[80vh] flex flex-col">
+        <div className="px-4 py-3 border-b flex items-center justify-between flex-shrink-0">
+          <span className="text-base font-medium">Sessions</span>
+          <div className="flex items-center gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-7 px-3 text-xs"
+              onClick={() => {
+                onNewSession()
+                onClose()
+              }}
+            >
+              + New
+            </Button>
+            <button
+              onClick={onClose}
+              className="text-muted-foreground hover:text-foreground p-1"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {sessions.length === 0 ? (
+            <div className="px-4 py-12 text-center text-sm text-muted-foreground">
+              No sessions yet
+            </div>
+          ) : (
+            sessions.map((session) => (
+              <button
+                key={session.id}
+                onClick={() => {
+                  if (!session.isCurrent && session.file) {
+                    onSelect(session.file)
+                    onClose()
+                  }
+                }}
+                className={`w-full px-4 py-3 text-left hover:bg-muted transition-colors border-b last:border-b-0 ${
+                  session.isCurrent ? 'bg-muted/50' : ''
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex-1 min-w-0">
+                    <div className={`text-sm ${session.isCurrent ? 'font-medium' : ''}`}>
+                      {session.name || 'Untitled session'}
+                    </div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className="text-xs text-muted-foreground">
+                        {session.messageCount || 0} messages
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {formatTime(session.lastModified)}
+                      </span>
+                    </div>
+                  </div>
+                  {session.isCurrent && (
+                    <span className="text-[10px] text-primary bg-primary/10 px-1.5 py-0.5 rounded flex-shrink-0">
+                      current
+                    </span>
+                  )}
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export function App() {
+  // Store state
+  const status = useAgentStore(s => s.status)
+  const error = useAgentStore(s => s.error)
+  const currentCwd = useAgentStore(s => s.currentCwd)
+  const sessionState = useAgentStore(s => s.sessionState)
+  const availableModels = useAgentStore(s => s.availableModels)
+  const messages = useAgentStore(s => s.messages)
+  const streamingMessageIndex = useAgentStore(s => s.streamingMessageIndex)
+  const activeToolCalls = useAgentStore(s => s.activeToolCalls)
+
+  const sessions = useAgentStore(s => s.sessions)
+
+  // Store actions
+  const connect = useAgentStore(s => s.connect)
+  const sendPrompt = useAgentStore(s => s.sendPrompt)
+  const abort = useAgentStore(s => s.abort)
+  const changeCwd = useAgentStore(s => s.changeCwd)
+  const setError = useAgentStore(s => s.setError)
+  const getAvailableModels = useAgentStore(s => s.getAvailableModels)
+  const getSessions = useAgentStore(s => s.getSessions)
+  const setModel = useAgentStore(s => s.setModel)
+  const setThinkingLevel = useAgentStore(s => s.setThinkingLevel)
+  const setAutoCompaction = useAgentStore(s => s.setAutoCompaction)
+  const compact = useAgentStore(s => s.compact)
+  const newSession = useAgentStore(s => s.newSession)
+  const switchSession = useAgentStore(s => s.switchSession)
+
+  // Auth state (local - not part of WebSocket)
+  const [authStatus, setAuthStatus] = useState<{ authenticated: boolean; providers: string[] } | null>(null)
+
+  // UI state (local)
+  const [input, setInput] = useState('')
+  const [showDirPicker, setShowDirPicker] = useState(false)
+  const [showSessionPicker, setShowSessionPicker] = useState(false)
+  const [pickerPath, setPickerPath] = useState<string | null>(null)
+  const [pickerDirs, setPickerDirs] = useState<string[]>([])
+  const [pickerParent, setPickerParent] = useState<string | null>(null)
+  const [pickerIsRoot, setPickerIsRoot] = useState(false)
+  const [pickerLoading, setPickerLoading] = useState(false)
+
+  // Refs
+  const pickerRef = useRef<HTMLDivElement | null>(null)
+
+  // ==========================================================================
+  // Connect on mount
+  // ==========================================================================
+
+  useEffect(() => {
+    connect()
+  }, [connect])
+
+  // ==========================================================================
+  // Auth check
+  // ==========================================================================
+
+  useEffect(() => {
+    fetch('/api/auth/status')
+      .then(r => r.json())
+      .then(setAuthStatus)
+      .catch(() => setAuthStatus({ authenticated: false, providers: [] }))
+  }, [])
+
+  // ==========================================================================
+  // Directory Picker
+  // ==========================================================================
+
+  useEffect(() => {
+    if (!showDirPicker) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        setShowDirPicker(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [showDirPicker])
+
+  const fetchDirectories = useCallback(async (dirPath: string) => {
+    setPickerLoading(true)
+    try {
+      const res = await fetch(`/api/directories?path=${encodeURIComponent(dirPath)}`)
+      if (res.ok) {
+        const data = await res.json()
+        setPickerPath(data.path)
+        setPickerDirs(data.directories)
+        setPickerParent(data.parent)
+        setPickerIsRoot(data.isRoot)
+      }
+    } catch (e) {
+      console.error('Failed to fetch directories:', e)
+    } finally {
+      setPickerLoading(false)
+    }
+  }, [])
+
+  const openDirPicker = useCallback(() => {
+    setShowDirPicker(true)
+    fetchDirectories(currentCwd || '')
+  }, [currentCwd, fetchDirectories])
+
+  const selectDirectory = useCallback((dirPath: string) => {
+    changeCwd(dirPath)
+    setShowDirPicker(false)
+  }, [changeCwd])
+
+  // ==========================================================================
+  // User Actions
+  // ==========================================================================
+
+  const handleSend = useCallback(() => {
+    if (!input.trim()) return
+    sendPrompt(input.trim())
+    setInput('')
+  }, [input, sendPrompt])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }, [handleSend])
+
+  const refreshAuth = useCallback(async () => {
+    const res = await fetch('/api/auth/status')
+    setAuthStatus(await res.json())
+  }, [])
+
+  // ==========================================================================
+  // Build Render Items from Messages
+  // ==========================================================================
+
+  const toolCallMap = useMemo(() => buildToolCallMap(messages), [messages])
+  const completedToolCallIds = useMemo(() => getCompletedToolCallIds(messages), [messages])
+  const renderItems = useMemo(
+    () => buildRenderItems(messages, streamingMessageIndex, toolCallMap, completedToolCallIds),
+    [messages, streamingMessageIndex, toolCallMap, completedToolCallIds]
+  )
+
+  // ==========================================================================
+  // Render Helpers
+  // ==========================================================================
+
+  const supportsReasoning = sessionState?.model?.reasoning === true
+
+  const renderTextBlocks = (blocks: ContentBlock[], isStreamingContent: boolean, isUser: boolean) => {
+    const elements: React.ReactNode[] = []
+
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i]!
+
+      if (block.type === 'text' && block.text.trim()) {
+        if (isUser) {
+          elements.push(
+            <div key={i} className="whitespace-pre-wrap break-words overflow-hidden">
+              {block.text}
+            </div>
+          )
+        } else {
+          elements.push(
+            <div key={i} className="prose prose-sm dark:prose-invert max-w-none break-words overflow-hidden">
+              <Streamdown mode={isStreamingContent ? undefined : "static"} plugins={{ code }}>
+                {block.text}
+              </Streamdown>
+            </div>
+          )
+        }
+      }
+      else if (block.type === 'thinking') {
+        const thinking = (block as { type: 'thinking'; thinking: string }).thinking
+        if (thinking.trim()) {
+          elements.push(
+            <details key={i} className="text-muted-foreground text-sm">
+              <summary className="cursor-pointer">Thinking...</summary>
+              <div className="mt-2 pl-3 border-l-2 border-muted break-words overflow-hidden">{thinking}</div>
+            </details>
+          )
+        }
+      }
+    }
+
+    return elements
+  }
+
+  // ==========================================================================
+  // Auth Screen
+  // ==========================================================================
+
+  if (authStatus && !authStatus.authenticated && status === 'connected') {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background p-4">
+        <Card className="max-w-sm w-full p-6 text-center space-y-4">
+          <p className="text-muted-foreground text-sm">
+            Run <code className="bg-muted px-1.5 py-0.5 rounded">pi</code> in your terminal to log in.
+          </p>
+          <div className="text-left text-sm text-muted-foreground">
+            <p className="mb-2">Supported providers:</p>
+            <ul className="list-disc list-inside space-y-1">
+              <li>Anthropic (Claude Pro/Max)</li>
+              <li>GitHub Copilot</li>
+              <li>Google Gemini CLI</li>
+              <li>OpenAI Codex</li>
+            </ul>
+          </div>
+          <Button variant="secondary" onClick={refreshAuth}>Refresh</Button>
+        </Card>
+      </div>
+    )
+  }
+
+  // ==========================================================================
+  // Main Render
+  // ==========================================================================
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b sticky top-0 z-10 bg-background">
+        <div className="flex items-center gap-2">
+          {/* Directory picker */}
+          <div className="relative" ref={pickerRef}>
+            <button
+              onClick={openDirPicker}
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors truncate max-w-[200px] flex items-center gap-1"
+              title={currentCwd || 'Click to set working directory'}
+            >
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+              </svg>
+              {currentCwd ? currentCwd.split('/').pop() || '/' : 'Set cwd...'}
+            </button>
+
+            {showDirPicker && (
+              <div className="absolute top-full left-0 mt-1 w-72 bg-popover border rounded-lg shadow-lg z-50">
+                <div className="px-3 py-2 border-b text-xs text-muted-foreground truncate" title={pickerPath || ''}>
+                  {pickerPath || 'Loading...'}
+                </div>
+                {!pickerIsRoot && pickerParent && (
+                  <button
+                    onClick={() => fetchDirectories(pickerParent)}
+                    className="w-full px-3 py-1.5 text-left text-sm hover:bg-muted flex items-center gap-2 border-b"
+                  >
+                    <svg className="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 17l-5-5m0 0l5-5m-5 5h12" />
+                    </svg>
+                    <span className="text-muted-foreground">..</span>
+                  </button>
+                )}
+                <div className="max-h-64 overflow-y-auto">
+                  {pickerLoading ? (
+                    <div className="px-3 py-4 text-center text-sm text-muted-foreground">Loading...</div>
+                  ) : pickerDirs.length === 0 ? (
+                    <div className="px-3 py-4 text-center text-sm text-muted-foreground">No subdirectories</div>
+                  ) : (
+                    pickerDirs.map((dir) => (
+                      <button
+                        key={dir}
+                        onClick={() => fetchDirectories(`${pickerPath}/${dir}`)}
+                        className="w-full px-3 py-1.5 text-left text-sm hover:bg-muted flex items-center gap-2"
+                      >
+                        <svg className="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                        </svg>
+                        {dir}
+                      </button>
+                    ))
+                  )}
+                </div>
+                <div className="px-3 py-2 border-t flex gap-2">
+                  <Button
+                    size="sm"
+                    className="flex-1 h-7 text-xs"
+                    onClick={() => pickerPath && selectDirectory(pickerPath)}
+                    disabled={!pickerPath}
+                  >
+                    Select
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-7 text-xs"
+                    onClick={() => setShowDirPicker(false)}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 px-3 text-xs"
+            disabled={sessionState?.isStreaming}
+            onClick={() => {
+              getSessions()
+              setShowSessionPicker(true)
+            }}
+          >
+            Sessions
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-7 px-2 text-xs">Settings</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <div className="flex items-center justify-between px-2 py-1.5 gap-4">
+                <span className="text-xs">Auto-compact</span>
+                <Switch
+                  checked={sessionState?.autoCompactionEnabled ?? true}
+                  onCheckedChange={setAutoCompaction}
+                  className="scale-75"
+                />
+              </div>
+              <DropdownMenuItem
+                onClick={compact}
+                disabled={sessionState?.isCompacting || sessionState?.isStreaming}
+                className="text-xs"
+              >
+                {sessionState?.isCompacting ? 'Compacting...' : 'Compact now'}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+            status === 'connected' ? 'bg-green-500' :
+            status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
+          }`} />
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="px-4 py-2 bg-destructive/10 text-destructive text-sm flex justify-between flex-shrink-0">
+          <span>{error}</span>
+          <button onClick={() => setError(null)} className="text-xs hover:underline">Dismiss</button>
+        </div>
+      )}
+
+      {/* Messages */}
+      <StickToBottom className="flex-1 relative overflow-x-hidden" resize="smooth" initial="smooth">
+        <StickToBottom.Content className="flex flex-col gap-4 p-4">
+          {renderItems.length === 0 && activeToolCalls.size === 0 && !sessionState?.isStreaming && (
+            <div className="h-full flex items-center justify-center text-muted-foreground min-h-[200px]">
+              Start a conversation
+            </div>
+          )}
+
+          {renderItems.map((item, i) => {
+            if (item.type === 'user-message') {
+              return (
+                <div key={i} className="flex justify-end">
+                  <div className="max-w-[80%] rounded-lg px-4 py-2 overflow-hidden bg-primary text-primary-foreground">
+                    {renderTextBlocks(item.content, false, true)}
+                  </div>
+                </div>
+              )
+            }
+
+            if (item.type === 'text-chunk') {
+              return (
+                <div key={i} className="flex justify-start">
+                  <div className="max-w-[80%] rounded-lg px-4 py-2 overflow-hidden bg-muted">
+                    {renderTextBlocks(item.blocks, item.isStreaming, false)}
+                    {item.isStreaming && (
+                      <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-1" />
+                    )}
+                  </div>
+                </div>
+              )
+            }
+
+            if (item.type === 'tool-call') {
+              // Tool call without result yet - show as pending
+              // Check if it's in activeToolCalls for status
+              const activeTool = activeToolCalls.get(item.id)
+              const toolStatus = activeTool?.status || 'running'
+              const partialOutput = activeTool?.partialOutput
+
+              const isBash = item.name === 'bash' || item.name === 'Bash'
+              const command = isBash ? (item.args as { command?: string }).command : undefined
+
+              return (
+                <Card key={i} className="max-w-[90%] overflow-hidden font-mono">
+                  <div className="px-3 py-2 text-xs flex items-center gap-2 bg-muted/50">
+                    <span className={`w-2 h-2 rounded-full ${
+                      toolStatus === 'running' ? 'bg-yellow-500 animate-pulse' :
+                      toolStatus === 'done' ? 'bg-green-500' : 'bg-red-500'
+                    }`} />
+                    {command ? (
+                      <code className="text-foreground">$ {command}</code>
+                    ) : (
+                      <code className="text-muted-foreground">{item.name}</code>
+                    )}
+                    {toolStatus === 'running' && (
+                      <span className="ml-auto text-xs text-muted-foreground">Running</span>
+                    )}
+                  </div>
+                  {partialOutput && (
+                    <pre className="p-3 text-xs overflow-auto max-h-48 bg-background whitespace-pre-wrap break-all text-muted-foreground">
+                      {partialOutput}
+                    </pre>
+                  )}
+                </Card>
+              )
+            }
+
+            if (item.type === 'tool-result') {
+              // Diff view for Edit/Write tools
+              if (item.diff) {
+                return (
+                  <Card key={i} className="max-w-[90%] overflow-hidden">
+                    <div className={`px-3 py-2 text-xs flex items-center gap-2 ${item.isError ? 'bg-destructive/20' : 'bg-muted/50'}`}>
+                      <span className={`w-2 h-2 rounded-full ${item.isError ? 'bg-red-500' : 'bg-green-500'}`} />
+                      <code className="text-foreground font-mono">{item.toolName}: {item.filePath || 'file'}</code>
+                    </div>
+                    <div className="max-h-64 overflow-auto text-xs">
+                      <DiffView patch={item.diff} />
+                    </div>
+                  </Card>
+                )
+              }
+
+              // Standard tool result (bash, etc.)
+              return (
+                <Card key={i} className="max-w-[90%] overflow-hidden font-mono">
+                  <div className={`px-3 py-2 text-xs flex items-center gap-2 ${item.isError ? 'bg-destructive/20' : 'bg-muted/50'}`}>
+                    <span className={`w-2 h-2 rounded-full ${item.isError ? 'bg-red-500' : 'bg-green-500'}`} />
+                    {item.command ? (
+                      <code className="text-foreground">$ {item.command}</code>
+                    ) : (
+                      <code className="text-muted-foreground">{item.toolName}</code>
+                    )}
+                  </div>
+                  {item.output && (
+                    <pre className={`p-3 text-xs overflow-auto max-h-48 bg-background whitespace-pre-wrap break-all ${item.isError ? 'text-destructive' : 'text-muted-foreground'}`}>
+                      {item.output}
+                    </pre>
+                  )}
+                </Card>
+              )
+            }
+
+            return null
+          })}
+
+          {/* Active tool calls not yet in messages (shouldn't normally happen with proper flow) */}
+          {Array.from(activeToolCalls.values())
+            .filter(tool => !completedToolCallIds.has(tool.toolCallId))
+            .filter(tool => !renderItems.some(item => item.type === 'tool-call' && item.id === tool.toolCallId))
+            .map(tool => (
+              <Card key={tool.toolCallId} className="max-w-[90%] overflow-hidden font-mono">
+                <div className={`px-3 py-2 text-xs flex items-center gap-2 bg-muted/50`}>
+                  <span className={`w-2 h-2 rounded-full ${
+                    tool.status === 'running' ? 'bg-yellow-500 animate-pulse' :
+                    tool.status === 'done' ? 'bg-green-500' : 'bg-red-500'
+                  }`} />
+                  {(tool.toolName === 'bash' || tool.toolName === 'Bash') ? (
+                    <code className="text-foreground">$ {(tool.args as { command?: string }).command}</code>
+                  ) : (
+                    <code className="text-muted-foreground">{tool.toolName}</code>
+                  )}
+                  {tool.status === 'running' && (
+                    <span className="ml-auto text-xs text-muted-foreground">Running</span>
+                  )}
+                </div>
+                {tool.partialOutput && (
+                  <pre className="p-3 text-xs overflow-auto max-h-48 bg-background whitespace-pre-wrap break-all text-muted-foreground">
+                    {tool.partialOutput}
+                  </pre>
+                )}
+              </Card>
+            ))}
+        </StickToBottom.Content>
+
+        <ScrollToBottomButton />
+      </StickToBottom>
+
+      {/* Input area */}
+      <div className="border-t p-4 sticky bottom-0 z-10 bg-background">
+        <div className="flex items-center gap-2 mb-3">
+          <DropdownMenu onOpenChange={(open) => {
+            if (open) getAvailableModels()
+          }}>
+            <DropdownMenuTrigger asChild>
+              <Badge variant="secondary" className="text-xs cursor-pointer">
+                {sessionState?.model?.name || sessionState?.model?.id || 'Select model'}
+              </Badge>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="max-h-80 overflow-y-auto min-w-[200px]">
+              {availableModels.length === 0 ? (
+                <div className="px-2 py-1 text-xs text-muted-foreground">Loading models...</div>
+              ) : (
+                availableModels.map((model) => (
+                  <DropdownMenuItem
+                    key={`${model.provider}/${model.id}`}
+                    onClick={() => setModel(model.provider, model.id)}
+                  >
+                    <span className="text-xs">{model.name || model.id}</span>
+                    <span className="text-xs text-muted-foreground ml-2">{model.provider}</span>
+                    {model.reasoning && <span className="text-xs text-muted-foreground ml-1">(reasoning)</span>}
+                  </DropdownMenuItem>
+                ))
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {supportsReasoning && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Badge variant="outline" className="text-xs cursor-pointer">
+                  thinking: {sessionState?.thinkingLevel || 'medium'}
+                </Badge>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                {THINKING_LEVELS.map((level) => (
+                  <DropdownMenuItem
+                    key={level}
+                    onClick={() => setThinkingLevel(level)}
+                  >
+                    <span className={`text-xs ${sessionState?.thinkingLevel === level ? 'font-bold' : ''}`}>
+                      {level}
+                    </span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+
+        <div className="flex gap-2 items-end">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={sessionState?.isStreaming ? 'Agent is responding...' : 'Type a message...'}
+            disabled={status !== 'connected'}
+            className="min-h-[44px] max-h-[200px] resize-none flex-1"
+            rows={1}
+          />
+          {sessionState?.isStreaming ? (
+            <Button variant="destructive" onClick={abort} className="h-[44px]">Stop</Button>
+          ) : (
+            <Button onClick={handleSend} disabled={!input.trim() || status !== 'connected'} className="h-[44px]">
+              Send
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Session Picker Modal */}
+      {showSessionPicker && (
+        <SessionPicker
+          sessions={sessions}
+          onSelect={switchSession}
+          onNewSession={newSession}
+          onClose={() => setShowSessionPicker(false)}
+        />
+      )}
+    </div>
+  )
+}
+
+export default App