bingocode 1.0.3 → 1.0.4

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

@@ -1,262 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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;
-}
-`