bingocode 1.0.1 → 1.0.3

package/desktop/src/components/chat/PermissionDialog.tsx

@@ -0,0 +1,262 @@
+import { useState } from 'react'
+import { useChatStore } from '../../stores/chatStore'
+import { useTabStore } from '../../stores/tabStore'
+import { useTranslation } from '../../i18n'
+import type { TranslationKey } from '../../i18n'
+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<string, { icon: string; label: string; color: string }> = {
+  Bash: { icon: 'terminal', label: 'Bash', color: 'var(--color-warning)' },
+  Edit: { icon: 'edit_note', label: 'Edit File', color: 'var(--color-brand)' },
+  Write: { icon: 'edit_document', label: 'Write File', color: 'var(--color-success)' },
+  Read: { icon: 'description', label: 'Read File', color: 'var(--color-secondary)' },
+  Glob: { icon: 'search', label: 'Glob Search', color: 'var(--color-secondary)' },
+  Grep: { icon: 'find_in_page', label: 'Grep Search', color: 'var(--color-secondary)' },
+  Agent: { icon: 'smart_toy', label: 'Agent', color: 'var(--color-tertiary)' },
+  WebSearch: { icon: 'travel_explore', label: 'Web Search', color: 'var(--color-secondary)' },
+  WebFetch: { icon: 'cloud_download', label: 'Web Fetch', color: 'var(--color-secondary)' },
+  NotebookEdit: { icon: 'note', label: 'Notebook Edit', color: 'var(--color-brand)' },
+  Skill: { icon: 'auto_awesome', label: 'Skill', color: 'var(--color-tertiary)' },
+}
+
+/**
+ * Extract human-readable detail lines from tool input.
+ */
+function extractToolDetails(toolName: string, input: unknown, t: (key: TranslationKey, params?: Record<string, string | number>) => string): { primary: string; secondary?: string } {
+  const obj = (input && typeof input === 'object') ? input as Record<string, unknown> : {}
+
+  switch (toolName) {
+    case 'Bash': {
+      const cmd = typeof obj.command === 'string' ? obj.command : ''
+      const desc = typeof obj.description === 'string' ? obj.description : undefined
+      return { primary: cmd, secondary: desc }
+    }
+    case 'Edit': {
+      const filePath = typeof obj.file_path === 'string' ? obj.file_path : ''
+      return { primary: filePath, secondary: obj.old_string ? t('permission.replacingContent') : undefined }
+    }
+    case 'Write': {
+      const filePath = typeof obj.file_path === 'string' ? obj.file_path : ''
+      return { primary: filePath }
+    }
+    case 'Read': {
+      const filePath = typeof obj.file_path === 'string' ? obj.file_path : ''
+      return { primary: filePath }
+    }
+    case 'Glob':
+      return { primary: typeof obj.pattern === 'string' ? obj.pattern : '' }
+    case 'Grep':
+      return { primary: typeof obj.pattern === 'string' ? obj.pattern : '' }
+    case 'Agent':
+      return { primary: typeof obj.description === 'string' ? obj.description : '' }
+    case 'WebSearch':
+      return { primary: typeof obj.query === 'string' ? obj.query : '' }
+    case 'WebFetch':
+      return { primary: typeof obj.url === 'string' ? obj.url : '' }
+    default:
+      return { primary: typeof input === 'string' ? input : JSON.stringify(input, null, 2) }
+  }
+}
+
+function getPermissionTitle(toolName: string, input: unknown, t: (key: TranslationKey, params?: Record<string, string | number>) => string) {
+  const obj = (input && typeof input === 'object') ? input as Record<string, unknown> : {}
+  const filePath = typeof obj.file_path === 'string' ? obj.file_path : ''
+  const fileName = filePath ? filePath.split('/').pop() || filePath : ''
+
+  switch (toolName) {
+    case 'Edit':
+    case 'Write':
+      return fileName ? t('permission.allowEditFile', { toolName, fileName }) : t('permission.allowEditFileGeneric', { toolName: toolName.toLowerCase() })
+    case 'Bash':
+      return t('permission.allowBash')
+    default:
+      return t('permission.allowTool', { toolName })
+  }
+}
+
+function renderPermissionPreview(toolName: string, input: unknown) {
+  const obj = (input && typeof input === 'object') ? input as Record<string, unknown> : {}
+  const filePath = typeof obj.file_path === 'string' ? obj.file_path : 'file'
+
+  if (toolName === 'Edit' && typeof obj.old_string === 'string' && typeof obj.new_string === 'string') {
+    return <DiffViewer filePath={filePath} oldString={obj.old_string} newString={obj.new_string} />
+  }
+
+  if (toolName === 'Write' && typeof obj.content === 'string') {
+    return <DiffViewer filePath={filePath} oldString="" newString={obj.content} />
+  }
+
+  if (toolName === 'Bash' && typeof obj.command === 'string') {
+    return (
+      <div className="overflow-x-auto rounded-[var(--radius-md)] bg-[var(--color-terminal-bg)] px-3 py-2.5">
+        <pre className="font-[var(--font-mono)] text-[11px] leading-[1.3] text-[var(--color-terminal-fg)] whitespace-pre-wrap break-words">
+          <span className="text-[var(--color-terminal-accent)] select-none">$ </span>{obj.command}
+        </pre>
+      </div>
+    )
+  }
+
+  return null
+}
+
+export function PermissionDialog({ requestId, toolName, input, description }: Props) {
+  const { respondToPermission } = useChatStore()
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const pendingPermission = useChatStore((s) => activeTabId ? s.sessions[activeTabId]?.pendingPermission : undefined)
+  const t = useTranslation()
+  const isPending = pendingPermission?.requestId === requestId
+  const [showRaw, setShowRaw] = useState(false)
+
+  const meta = TOOL_META[toolName] || { icon: 'shield', label: toolName, color: 'var(--color-text-tertiary)' }
+  const details = extractToolDetails(toolName, input, t)
+  const rawInput = typeof input === 'string' ? input : JSON.stringify(input, null, 2)
+  const preview = renderPermissionPreview(toolName, input)
+  const title = getPermissionTitle(toolName, input, t)
+  const allowRawToggle = !preview
+
+  return (
+    <div className={`mb-4 ml-10 overflow-hidden rounded-[var(--radius-lg)] border ${
+      isPending
+        ? 'border-[var(--color-warning)] bg-[var(--color-surface-container-lowest)]'
+        : 'border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-low)] opacity-70'
+    }`}>
+      {/* Header */}
+      <div className={`flex items-center gap-3 px-4 py-3 ${
+        isPending
+          ? 'bg-[var(--color-surface-container)]'
+          : 'bg-[var(--color-surface-container-low)]'
+      }`}>
+        <div
+          className="flex items-center justify-center w-8 h-8 rounded-[var(--radius-md)]"
+          style={{ backgroundColor: `${meta.color}18` }}
+        >
+          <span
+            className="material-symbols-outlined text-[18px]"
+            style={{ color: meta.color }}
+          >
+            {meta.icon}
+          </span>
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-[var(--color-text-primary)]">
+              {title}
+            </span>
+            {isPending && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-[var(--color-warning)]/15 text-[var(--color-warning)]">
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-warning)] animate-pulse-dot" />
+                {t('permission.awaitingApproval')}
+              </span>
+            )}
+            {!isPending && (
+              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]">
+                {t('permission.responded')}
+              </span>
+            )}
+          </div>
+          {description && (
+            <p className="mt-0.5 text-xs text-[var(--color-text-secondary)] truncate">{description}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Tool details */}
+      <div className="border-t border-[var(--color-outline-variant)]/20 px-4 py-3">
+        {preview ? (
+          <div className="space-y-2">
+            {details.primary && toolName !== 'Bash' ? (
+              <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs font-[var(--font-mono)] text-[var(--color-text-secondary)]">
+                <span className="material-symbols-outlined text-[14px] text-[var(--color-outline)] flex-shrink-0">
+                  folder_open
+                </span>
+                <span className="truncate">{details.primary}</span>
+              </div>
+            ) : null}
+            {preview}
+          </div>
+        ) : details.primary ? (
+          <div className="mb-2">
+            <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs font-[var(--font-mono)] text-[var(--color-text-secondary)]">
+              <span className="material-symbols-outlined text-[14px] text-[var(--color-outline)] flex-shrink-0">
+                {toolName === 'Glob' || toolName === 'Grep' ? 'search' : 'folder_open'}
+              </span>
+              <span className="truncate">{details.primary}</span>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Secondary detail */}
+        {details.secondary && (
+          <p className="mt-2 text-xs text-[var(--color-text-tertiary)]">{details.secondary}</p>
+        )}
+
+        {allowRawToggle && (
+          <button
+            onClick={() => setShowRaw(!showRaw)}
+            className="mt-2 flex cursor-pointer items-center gap-1 text-[11px] text-[var(--color-text-accent)] hover:underline"
+          >
+            <span className="material-symbols-outlined text-[14px]">
+              {showRaw ? 'expand_less' : 'expand_more'}
+            </span>
+            {showRaw ? t('permission.hideDetails') : t('permission.showFullInput')}
+          </button>
+        )}
+
+        {allowRawToggle && showRaw && (
+          <pre className="mt-2 max-h-[220px] overflow-y-auto overflow-x-auto rounded-[var(--radius-md)] bg-[var(--color-terminal-bg)] px-3 py-2.5 font-[var(--font-mono)] text-[11px] leading-[1.3] text-[var(--color-terminal-fg)] whitespace-pre-wrap break-words">
+            {rawInput}
+          </pre>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      {isPending && (
+        <div className="flex items-center gap-2 border-t border-[var(--color-outline-variant)]/20 bg-[var(--color-surface-container-low)] px-4 py-3">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => activeTabId && respondToPermission(activeTabId, requestId, true)}
+            icon={
+              <span className="material-symbols-outlined text-[14px]">check</span>
+            }
+          >
+            {t('permission.allow')}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => activeTabId && respondToPermission(activeTabId, requestId, true, 'always')}
+            icon={
+              <span className="material-symbols-outlined text-[14px]">verified</span>
+            }
+          >
+            {t('permission.allowForSession')}
+          </Button>
+          <div className="flex-1" />
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => activeTabId && respondToPermission(activeTabId, requestId, false)}
+            icon={
+              <span className="material-symbols-outlined text-[14px]">close</span>
+            }
+          >
+            {t('permission.deny')}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/desktop/src/components/chat/SessionTaskBar.test.tsx

@@ -0,0 +1,99 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { SessionTaskBar } from './SessionTaskBar'
+import { useCLITaskStore } from '../../stores/cliTaskStore'
+
+vi.mock('../../i18n', () => ({
+  useTranslation: () => (key: string) => {
+    const translations: Record<string, string> = {
+      'tasks.title': 'Tasks',
+      'tasks.dismissCompleted': 'Hide completed tasks',
+    }
+
+    return translations[key] ?? key
+  },
+}))
+
+describe('SessionTaskBar', () => {
+  beforeEach(() => {
+    useCLITaskStore.setState({
+      sessionId: 'session-1',
+      tasks: [],
+      expanded: false,
+      completedAndDismissed: false,
+      dismissedCompletionKey: null,
+    })
+  })
+
+  afterEach(() => {
+    useCLITaskStore.getState().clearTasks()
+  })
+
+  it('only shows the dismiss button once every task is completed', () => {
+    act(() => {
+      useCLITaskStore.getState().setTasksFromTodos([
+        { content: 'first', status: 'completed' },
+        { content: 'second', status: 'in_progress', activeForm: 'working' },
+      ])
+    })
+
+    act(() => {
+      render(<SessionTaskBar />)
+    })
+
+    expect(screen.getByText('Tasks')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Hide completed tasks' })).toBeNull()
+  })
+
+  it('hides the bar after dismissing a completed task set', () => {
+    act(() => {
+      useCLITaskStore.getState().setTasksFromTodos([
+        { content: 'first', status: 'completed' },
+        { content: 'second', status: 'completed' },
+      ])
+    })
+
+    act(() => {
+      render(<SessionTaskBar />)
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide completed tasks' }))
+
+    expect(screen.queryByText('Tasks')).toBeNull()
+    expect(useCLITaskStore.getState().completedAndDismissed).toBe(true)
+  })
+
+  it('shows the bar again for a new task cycle after a previous completed set was dismissed', () => {
+    act(() => {
+      useCLITaskStore.getState().setTasksFromTodos([
+        { content: 'first', status: 'completed' },
+      ])
+    })
+
+    act(() => {
+      render(<SessionTaskBar />)
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide completed tasks' }))
+    expect(screen.queryByText('Tasks')).toBeNull()
+
+    act(() => {
+      useCLITaskStore.getState().setTasksFromTodos([
+        { content: 'next task', status: 'in_progress', activeForm: 'running next task' },
+      ])
+    })
+
+    expect(screen.getByText('Tasks')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Hide completed tasks' })).toBeNull()
+
+    act(() => {
+      useCLITaskStore.getState().setTasksFromTodos([
+        { content: 'next task', status: 'completed' },
+      ])
+    })
+
+    expect(screen.getByText('Tasks')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Hide completed tasks' })).toBeInTheDocument()
+  })
+})

package/desktop/src/components/chat/SessionTaskBar.tsx

@@ -0,0 +1,159 @@
+import { useCLITaskStore } from '../../stores/cliTaskStore'
+import { useTranslation } from '../../i18n'
+import type { CLITask } from '../../types/cliTask'
+
+const statusConfig = {
+  pending: {
+    icon: 'radio_button_unchecked',
+    color: 'var(--color-text-tertiary)',
+    label: 'pending',
+  },
+  in_progress: {
+    icon: 'pending',
+    color: 'var(--color-warning)',
+    label: 'active',
+  },
+  completed: {
+    icon: 'check_circle',
+    color: 'var(--color-success)',
+    label: 'done',
+  },
+} as const
+
+export function SessionTaskBar() {
+  const {
+    tasks,
+    expanded,
+    toggleExpanded,
+    completedAndDismissed,
+    markCompletedAndDismissed,
+  } = useCLITaskStore()
+  const t = useTranslation()
+
+  if (tasks.length === 0) return null
+
+  // Don't show sticky bar if tasks were completed and the user already continued chatting
+  const allCompleted = tasks.every((tk) => tk.status === 'completed')
+  if (allCompleted && completedAndDismissed) return null
+
+  const completedCount = tasks.filter((tk) => tk.status === 'completed').length
+  const totalCount = tasks.length
+  const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0
+
+  return (
+    <div className="shrink-0 px-8">
+      <div className="mx-auto max-w-[860px] rounded-[var(--radius-lg)] border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] overflow-hidden mb-2">
+        {/* Header — always visible, clickable to toggle */}
+        <div className="flex items-center gap-2 bg-[var(--color-surface-container)] px-2 py-1.5">
+          <button
+            type="button"
+            onClick={toggleExpanded}
+            className="flex min-w-0 flex-1 items-center gap-3 rounded-[var(--radius-md)] px-2 py-1 hover:bg-[var(--color-surface-container-low)] transition-colors"
+          >
+            <div className="flex items-center justify-center w-6 h-6 rounded-[var(--radius-md)] bg-[var(--color-secondary)]/10">
+              <span
+                className="material-symbols-outlined text-[14px] text-[var(--color-secondary)]"
+              >
+                checklist
+              </span>
+            </div>
+
+            <span className="text-xs font-semibold text-[var(--color-text-primary)]">
+              {t('tasks.title')}
+            </span>
+
+            {/* Progress bar */}
+            <div className="flex-1 h-1.5 rounded-full bg-[var(--color-border)] overflow-hidden max-w-[200px]">
+              <div
+                className="h-full rounded-full transition-all duration-300"
+                style={{
+                  width: `${progressPercent}%`,
+                  backgroundColor: completedCount === totalCount
+                    ? 'var(--color-success)'
+                    : 'var(--color-brand)',
+                }}
+              />
+            </div>
+
+            <span className="text-[10px] text-[var(--color-text-tertiary)] tabular-nums">
+              {completedCount}/{totalCount}
+            </span>
+
+            <span
+              className="material-symbols-outlined text-[14px] text-[var(--color-text-tertiary)] transition-transform duration-200"
+              style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
+            >
+              expand_less
+            </span>
+          </button>
+
+          {allCompleted && (
+            <button
+              type="button"
+              aria-label={t('tasks.dismissCompleted')}
+              onClick={markCompletedAndDismissed}
+              className="flex shrink-0 items-center justify-center rounded-[var(--radius-md)] p-1.5 text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface-container-low)] hover:text-[var(--color-text-primary)] transition-colors"
+            >
+              <span className="material-symbols-outlined text-[16px]">close</span>
+            </button>
+          )}
+        </div>
+
+        {/* Expanded task list */}
+        {expanded && (
+          <div className="px-4 pb-2 pt-1 flex flex-col gap-0.5 max-h-[240px] overflow-y-auto border-t border-[var(--color-outline-variant)]/20">
+            {tasks.map((task) => (
+              <TaskItem key={task.id} task={task} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function TaskItem({ task }: { task: CLITask }) {
+  const config = statusConfig[task.status]
+
+  return (
+    <div className="flex items-start gap-2 py-1.5 px-1 rounded-md">
+      <span
+        className="material-symbols-outlined text-[16px] mt-px shrink-0"
+        style={{ color: config.color, fontVariationSettings: "'FILL' 1" }}
+      >
+        {config.icon}
+      </span>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] font-mono text-[var(--color-text-tertiary)]">
+            #{task.id}
+          </span>
+          <span className={`text-xs ${
+            task.status === 'completed'
+              ? 'text-[var(--color-text-tertiary)] line-through'
+              : 'text-[var(--color-text-primary)]'
+          }`}>
+            {task.subject}
+          </span>
+        </div>
+
+        {task.status === 'in_progress' && task.activeForm && (
+          <div className="flex items-center gap-1 mt-0.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-warning)] animate-pulse" />
+            <span className="text-[10px] text-[var(--color-warning)]">
+              {task.activeForm}
+            </span>
+          </div>
+        )}
+
+        {task.owner && (
+          <span className="text-[10px] text-[var(--color-text-tertiary)] mt-0.5 inline-flex items-center gap-0.5">
+            <span className="material-symbols-outlined text-[10px]">person</span>
+            {task.owner}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/desktop/src/components/chat/StreamingIndicator.tsx

@@ -0,0 +1,41 @@
+import { useChatStore } from '../../stores/chatStore'
+import { useTabStore } from '../../stores/tabStore'
+
+function formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${m}m ${s}s`
+}
+
+export function StreamingIndicator() {
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const sessionState = useChatStore((s) => activeTabId ? s.sessions[activeTabId] : undefined)
+  const chatState = sessionState?.chatState ?? 'idle'
+  const statusVerb = sessionState?.statusVerb ?? ''
+  const elapsedSeconds = sessionState?.elapsedSeconds ?? 0
+  const tokenUsage = sessionState?.tokenUsage ?? { input_tokens: 0, output_tokens: 0 }
+  let verb: string
+  if (statusVerb) {
+    verb = statusVerb
+  } else {
+    verb = chatState === 'thinking' ? 'Thinking' : chatState === 'tool_executing' ? 'Running' : 'Working'
+  }
+
+  return (
+    <div className="mb-2 ml-10 flex w-fit items-center gap-2 rounded-full border border-[var(--color-border)]/40 bg-[var(--color-surface-container-low)] px-3 py-1">
+      <span className="text-[var(--color-brand)] animate-shimmer text-xs">✦</span>
+      <span className="text-xs font-medium text-[var(--color-text-secondary)]">{verb}...</span>
+      {elapsedSeconds > 0 && (
+        <span className="text-[10px] text-[var(--color-text-tertiary)]">
+          {formatElapsed(elapsedSeconds)}
+        </span>
+      )}
+      {tokenUsage.output_tokens > 0 && (
+        <span className="text-[10px] text-[var(--color-text-tertiary)]">
+          · ↓ {tokenUsage.output_tokens}
+        </span>
+      )}
+    </div>
+  )
+}

package/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 (
+    <div className={`overflow-hidden rounded-2xl border border-[var(--color-outline-variant)]/20 bg-[var(--color-surface-dim)] ${className}`}>
+      {/* Title bar with traffic lights */}
+      <div className="flex items-center gap-2 border-b border-[var(--color-terminal-border)] bg-[var(--color-terminal-header)] px-3 py-2">
+        <div className="flex gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-[var(--color-terminal-danger)]" />
+          <div className="w-2.5 h-2.5 rounded-full bg-[var(--color-terminal-warning)]" />
+          <div className="w-2.5 h-2.5 rounded-full bg-[var(--color-terminal-accent)]" />
+        </div>
+        {title && (
+          <span className="ml-2 truncate font-[var(--font-mono)] text-[10px] text-[var(--color-terminal-muted)]">
+            {title}
+          </span>
+        )}
+      </div>
+      {/* Content */}
+      <div className="bg-[var(--color-terminal-bg)] text-[var(--color-terminal-fg)]">
+        {children}
+      </div>
+    </div>
+  )
+}

package/desktop/src/components/chat/ThinkingBlock.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect, useRef } from 'react'
+import { useTranslation } from '../../i18n'
+
+export function ThinkingBlock({ content, isActive = false }: { content: string; isActive?: boolean }) {
+  const t = useTranslation()
+  const [expanded, setExpanded] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (expanded && isActive && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight
+    }
+  }, [content, expanded, isActive])
+
+  // Preview: take first meaningful line, not first 140 chars
+  const lines = content.split('\n').filter((l) => l.trim())
+  const firstLine = lines[0]?.replace(/\s+/g, ' ').trim() || ''
+  const preview = firstLine.length > 80 ? firstLine.slice(0, 80) + '...' : firstLine
+
+  return (
+    <div className="mb-1 ml-10">
+      <style>{thinkingStyles}</style>
+      <button
+        onClick={() => setExpanded((v) => !v)}
+        className="flex w-full items-center gap-1.5 rounded-md px-1 py-0.5 text-left text-[12px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-secondary)]"
+      >
+        <span className="text-[10px] text-[var(--color-outline)]">
+          {expanded ? '\u25BE' : '\u25B8'}
+        </span>
+        <span className="shrink-0 font-medium italic">
+          {t('thinking.label')}
+          {isActive && <span className="thinking-dots" />}
+        </span>
+        {!expanded && preview && (
+          <span className="min-w-0 flex-1 truncate font-[var(--font-mono)] text-[11px] text-[var(--color-text-tertiary)]">
+            {preview}
+            {isActive && <span className="thinking-inline-cursor" />}
+          </span>
+        )}
+      </button>
+      {expanded && (
+        <div
+          ref={contentRef}
+          className="mt-1 max-h-[300px] overflow-y-auto rounded-lg border border-[var(--color-border)]/40 bg-[var(--color-surface-container-lowest)] p-2.5 font-[var(--font-mono)] text-[11px] leading-[1.35] text-[var(--color-text-secondary)] whitespace-pre-wrap break-words"
+        >
+          {content}
+          {isActive && expanded && <span className="thinking-cursor" />}
+        </div>
+      )}
+    </div>
+  )
+}
+
+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;
+}
+`