bingocode 1.0.2 → 1.0.3

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

@@ -0,0 +1,107 @@
+import { CodeViewer } from './CodeViewer'
+import { useState } from 'react'
+import { useTranslation } from '../../i18n'
+import { InlineImageGallery } from './InlineImageGallery'
+
+type Props = {
+  content: unknown
+  isError: boolean
+  toolName?: string
+  standalone?: boolean
+}
+
+/**
+ * Standalone tool result block — only shown when not already rendered
+ * inline within ToolCallBlock (i.e., when the tool_use and tool_result
+ * are NOT grouped together by MessageList).
+ */
+export function ToolResultBlock({ content, isError, toolName, standalone = true }: Props) {
+  const [expanded, setExpanded] = useState(false)
+  const t = useTranslation()
+
+  // Don't render standalone if this result is already rendered inline
+  if (!standalone) return null
+
+  const text = extractText(content)
+  const preview = text.slice(0, 200)
+  const hasMore = text.length > 200
+
+  return (
+    <div className={`mb-2 ml-10 overflow-hidden rounded-xl border ${
+      isError
+        ? 'border-[var(--color-error)]/20'
+        : 'border-[var(--color-outline-variant)]/20'
+    }`}>
+      {/* Status header */}
+      <button
+        type="button"
+        onClick={() => setExpanded((value) => !value)}
+        className={`flex w-full items-center justify-between px-3 py-2 text-left text-[10px] font-bold uppercase tracking-wider ${
+        isError
+          ? 'bg-[var(--color-error-container)] text-[var(--color-error)]'
+          : 'bg-[var(--color-surface-container-high)] text-[var(--color-outline)]'
+      }`}
+      >
+        <span className="flex items-center gap-1.5">
+          <span className="material-symbols-outlined text-[12px]">
+            {isError ? 'error' : 'check_circle'}
+          </span>
+          {toolName ? t('tool.result', { toolName }) : t('tool.resultGeneric')}
+        </span>
+        <span className={`px-2 py-0.5 rounded-full text-[9px] ${
+          isError
+            ? 'bg-[var(--color-error)]/10'
+            : 'bg-[var(--color-diff-added-bg)] text-[var(--color-diff-added-text)]'
+        }`}>
+          {isError ? t('tool.error') : t('tool.success')}
+        </span>
+      </button>
+
+      {/* Inline image gallery from detected paths */}
+      <InlineImageGallery text={text} />
+
+      {/* Content */}
+      {expanded ? (
+        isError ? (
+          <div className="bg-[var(--color-error-container)]/50 px-3 py-2.5 font-[var(--font-mono)] text-[11px] leading-[1.5] whitespace-pre-wrap break-words text-[var(--color-error)]">
+            {text}
+          </div>
+        ) : (
+          <CodeViewer
+            code={text}
+            language="plaintext"
+            maxLines={12}
+          />
+        )
+      ) : (
+        <div className="bg-[var(--color-surface-container-lowest)] px-3 py-2 font-[var(--font-mono)] text-[10px] leading-[1.35] text-[var(--color-text-tertiary)]">
+          {preview}
+          {hasMore ? '…' : ''}
+        </div>
+      )}
+
+      {hasMore && (
+        <button
+          onClick={() => setExpanded((value) => !value)}
+          className="w-full py-1 text-[10px] font-medium text-[var(--color-text-accent)] hover:underline bg-[var(--color-surface-container-low)] border-t border-[var(--color-outline-variant)]/10"
+        >
+          {expanded ? t('tool.showLess') : t('tool.showMore', { count: text.length - 200 })}
+        </button>
+      )}
+    </div>
+  )
+}
+
+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 ?? '')
+}

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

@@ -0,0 +1,38 @@
+import type { UIAttachment } from '../../types/chat'
+import { AttachmentGallery } from './AttachmentGallery'
+import { MessageActionBar } from './MessageActionBar'
+
+type Props = {
+  content: string
+  attachments?: UIAttachment[]
+}
+
+export function UserMessage({ content, attachments }: Props) {
+  const hasText = content.trim().length > 0
+
+  return (
+    <div className="group mb-5 flex items-end justify-end gap-1.5">
+      <div className="min-w-0 max-w-[82%] space-y-2">
+        {attachments && attachments.length > 0 && (
+          <AttachmentGallery attachments={attachments} variant="message" />
+        )}
+
+        {hasText && (
+          <div
+            className="bg-[var(--color-surface-user-msg)] px-4 py-3 text-sm leading-relaxed text-[var(--color-text-primary)] whitespace-pre-wrap break-words"
+            style={{ borderRadius: '18px 4px 18px 18px' }}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+
+      {hasText && (
+        <MessageActionBar
+          copyText={content}
+          copyLabel="Copy prompt"
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,136 @@
+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'
+import { useTabStore } from '../../stores/tabStore'
+
+describe('chat blocks', () => {
+  beforeEach(() => {
+    useTabStore.setState({ activeTabId: 'active-tab', tabs: [{ sessionId: 'active-tab', title: 'Test', type: 'session' as const, status: 'idle' }] })
+    useChatStore.setState({ sessions: {} })
+  })
+
+  it('keeps thinking collapsed by default', () => {
+    const { container } = render(<ThinkingBlock content="this is a long internal reasoning trace" isActive />)
+
+    expect(screen.getByText(/Thinking/)).toBeTruthy()
+    expect(container.textContent).toContain('this is a long internal reasoning trace')
+    expect(container.querySelector('.thinking-cursor')).toBeNull()
+  })
+
+  it('does not animate inactive historical thinking blocks', () => {
+    const { container } = render(<ThinkingBlock content="old reasoning" isActive={false} />)
+
+    expect(container.querySelector('.thinking-inline-cursor')).toBeNull()
+  })
+
+  it('shows tool previews only after expanding the tool block', () => {
+    const { container } = render(
+      <ToolCallBlock
+        toolName="Read"
+        input={{ file_path: '/tmp/example.ts', limit: 20 }}
+        result={{ content: 'const answer = 42\nconsole.log(answer)', isError: false }}
+      />,
+    )
+
+    expect(container.textContent).toContain('Read')
+    expect(container.textContent).not.toContain('const answer = 42')
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(container.textContent).toContain('Tool Input')
+    expect(container.textContent).not.toContain('const answer = 42')
+  })
+
+  it('does not surface bash stdout in the transcript preview', () => {
+    const { container } = render(
+      <ToolCallBlock
+        toolName="Bash"
+        input={{ command: 'ls -la', description: 'List files' }}
+        result={{ content: 'file-a\nfile-b\nfile-c', isError: false }}
+      />,
+    )
+
+    expect(container.textContent).toContain('Bash')
+    expect(container.textContent).not.toContain('file-a')
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(container.textContent).toContain('ls -la')
+    expect(container.textContent).not.toContain('file-a')
+  })
+
+  it('expands tool errors so full Computer Use gate messages are readable', () => {
+    const { container } = render(
+      <ToolCallBlock
+        toolName="mcp__computer-use__left_click"
+        input={{ coordinate: [120, 220] }}
+        result={{
+          content: '"Claude Code Haha" is not in the allowed applications and is currently in front. Take a new screenshot — it may have appeared since your last one.',
+          isError: true,
+        }}
+      />,
+    )
+
+    expect(container.textContent).toContain('mcp__computer-use__left_click')
+    expect(container.textContent).not.toContain('Take a new screenshot')
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(container.textContent).toContain('Take a new screenshot')
+    expect(container.textContent).toContain('allowed applications')
+  })
+
+  it('shows a diff preview for edit permission requests', () => {
+    useChatStore.setState({
+      sessions: {
+        'active-tab': {
+          messages: [],
+          chatState: 'idle',
+          connectionState: 'connected',
+          streamingText: '',
+          streamingToolInput: '',
+          activeToolUseId: null,
+          activeToolName: null,
+          activeThinkingId: null,
+          pendingPermission: {
+            requestId: 'perm-1',
+            toolName: 'Edit',
+            input: {
+              file_path: '/tmp/example.ts',
+              old_string: 'const count = 1',
+              new_string: 'const count = 2',
+            },
+          },
+          pendingComputerUsePermission: null,
+          tokenUsage: { input_tokens: 0, output_tokens: 0 },
+          elapsedSeconds: 0,
+          statusVerb: '',
+          slashCommands: [],
+          agentTaskNotifications: {},
+          elapsedTimer: null,
+        },
+      },
+    })
+
+    const { container } = render(
+      <PermissionDialog
+        requestId="perm-1"
+        toolName="Edit"
+        input={{
+          file_path: '/tmp/example.ts',
+          old_string: 'const count = 1',
+          new_string: 'const count = 2',
+        }}
+      />,
+    )
+
+    expect(container.textContent).toContain('/tmp/example.ts')
+    expect(container.textContent).toContain('Allow')
+    // react-diff-viewer-continued uses styled-components tables that don't
+    // fully render in jsdom, so we verify the DiffViewer wrapper is mounted
+    expect(container.querySelector('[class*="rounded-[var(--radius-lg)]"]')).toBeTruthy()
+  })
+})

package/desktop/src/components/chat/clipboard.ts

@@ -0,0 +1,25 @@
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch {
+    // Fall through to legacy copy path.
+  }
+
+  try {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('readonly', 'true')
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    const copied = document.execCommand('copy')
+    document.body.removeChild(textarea)
+    return copied
+  } catch {
+    return false
+  }
+}

package/desktop/src/components/chat/composerUtils.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import {
+  findSlashToken,
+  insertSlashTrigger,
+  mergeSlashCommands,
+  replaceSlashCommand,
+} from './composerUtils'
+
+describe('composerUtils', () => {
+  it('finds slash token without trailing space', () => {
+    expect(findSlashToken('/rev', 4)).toEqual({ start: 0, filter: 'rev' })
+    expect(findSlashToken('hello /rev', 10)).toEqual({ start: 6, filter: 'rev' })
+  })
+
+  it('does not treat slash followed by a space as an active token', () => {
+    expect(findSlashToken('/ review', 8)).toBeNull()
+  })
+
+  it('inserts a slash trigger without appending a trailing space', () => {
+    expect(insertSlashTrigger('', 0)).toEqual({ value: '/', cursorPos: 1 })
+    expect(insertSlashTrigger('hello', 5)).toEqual({ value: 'hello /', cursorPos: 7 })
+  })
+
+  it('replaces the current slash token with a command and one trailing separator', () => {
+    expect(replaceSlashCommand('/rev', 4, 'review')).toEqual({
+      value: '/review ',
+      cursorPos: 8,
+    })
+  })
+
+  it('merges fallback commands so built-in entries like /clear remain visible', () => {
+    expect(
+      mergeSlashCommands([
+        { name: 'help', description: '' },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        { name: 'help', description: 'Show available commands' },
+        { name: 'clear', description: 'Clear conversation history' },
+      ]),
+    )
+  })
+
+  it('keeps server-provided descriptions when they exist', () => {
+    expect(
+      mergeSlashCommands([
+        { name: 'clear', description: 'Server description' },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        { name: 'clear', description: 'Server description' },
+      ]),
+    )
+  })
+})

package/desktop/src/components/chat/composerUtils.ts

@@ -0,0 +1,149 @@
+export const FALLBACK_SLASH_COMMANDS = [
+  { name: 'compact', description: 'Compact conversation context' },
+  { name: 'clear', description: 'Clear conversation history' },
+  { name: 'help', description: 'Show available commands' },
+  { name: 'review', description: 'Review code changes' },
+  { name: 'commit', description: 'Create a git commit' },
+  { name: 'pr', description: 'Create a pull request' },
+  { name: 'init', description: 'Initialize project CLAUDE.md' },
+  { name: 'bug', description: 'Report a bug' },
+  { name: 'config', description: 'Open configuration' },
+  { name: 'cost', description: 'Show token usage and costs' },
+  { name: 'doctor', description: 'Diagnose installation issues' },
+  { name: 'login', description: 'Switch Anthropic accounts' },
+  { name: 'logout', description: 'Sign out of current account' },
+  { name: 'memory', description: 'Edit CLAUDE.md memory files' },
+  { name: 'model', description: 'Switch AI model' },
+  { name: 'permissions', description: 'View or manage tool permissions' },
+  { name: 'status', description: 'Show project and session status' },
+  { name: 'terminal-setup', description: 'Set up terminal integration' },
+  { name: 'vim', description: 'Toggle vim editing mode' },
+]
+
+export type SlashCommandOption = {
+  name: string
+  description: string
+}
+
+export function mergeSlashCommands(
+  preferred: ReadonlyArray<SlashCommandOption>,
+  fallback: ReadonlyArray<SlashCommandOption> = FALLBACK_SLASH_COMMANDS,
+): SlashCommandOption[] {
+  const merged = new Map<string, SlashCommandOption>()
+
+  for (const command of preferred) {
+    if (!command?.name) continue
+    merged.set(command.name, {
+      name: command.name,
+      description: command.description?.trim() || '',
+    })
+  }
+
+  for (const command of fallback) {
+    if (!command?.name) continue
+    const existing = merged.get(command.name)
+    if (existing) {
+      if (!existing.description && command.description) {
+        merged.set(command.name, {
+          ...existing,
+          description: command.description,
+        })
+      }
+      continue
+    }
+    merged.set(command.name, command)
+  }
+
+  return [...merged.values()]
+}
+
+export type SlashTrigger = {
+  slashPos: number
+  filter: string
+}
+
+export function findSlashTrigger(value: string, cursorPos: number): SlashTrigger | null {
+  const textBeforeCursor = value.slice(0, cursorPos)
+  let slashPos = -1
+
+  for (let i = textBeforeCursor.length - 1; i >= 0; i--) {
+    const ch = textBeforeCursor[i]!
+    if (ch === '/') {
+      if (i === 0 || /\s/.test(textBeforeCursor[i - 1]!)) {
+        slashPos = i
+        break
+      }
+      break
+    }
+    if (/\s/.test(ch)) {
+      break
+    }
+  }
+
+  if (slashPos < 0) return null
+
+  const filter = textBeforeCursor.slice(slashPos + 1)
+  if (/\s/.test(filter)) return null
+
+  return { slashPos, filter }
+}
+
+export function replaceSlashToken(
+  input: string,
+  cursorPos: number,
+  command: string,
+  options?: { trailingSpace?: boolean },
+): { value: string; cursorPos: number } {
+  const trigger = findSlashTrigger(input, cursorPos)
+  if (!trigger) {
+    const prefix = input && !/\s$/.test(input) ? `${input} ` : input
+    const token = `/${command}`
+    const suffix = options?.trailingSpace !== false ? ' ' : ''
+    const value = `${prefix}${token}${suffix}`
+    return { value, cursorPos: value.length }
+  }
+
+  const before = input.slice(0, trigger.slashPos)
+  const after = input.slice(cursorPos)
+  const token = `/${command}`
+  const suffix = options?.trailingSpace !== false ? ' ' : ''
+  const value = `${before}${token}${suffix}${after}`
+  const nextCursorPos = before.length + token.length + suffix.length
+  return { value, cursorPos: nextCursorPos }
+}
+
+export type SlashToken = {
+  start: number
+  filter: string
+}
+
+export function findSlashToken(value: string, cursorPos: number): SlashToken | null {
+  const trigger = findSlashTrigger(value, cursorPos)
+  if (!trigger) return null
+  return { start: trigger.slashPos, filter: trigger.filter }
+}
+
+export function replaceSlashCommand(
+  value: string,
+  cursorPos: number,
+  command: string,
+): { value: string; cursorPos: number } | null {
+  const trigger = findSlashTrigger(value, cursorPos)
+  if (!trigger) return null
+
+  return replaceSlashToken(value, cursorPos, command, { trailingSpace: true })
+}
+
+export function insertSlashTrigger(
+  value: string,
+  cursorPos: number,
+): { value: string; cursorPos: number } {
+  const before = value.slice(0, cursorPos)
+  const after = value.slice(cursorPos)
+  const needsLeadingSpace = before.length > 0 && !/\s$/.test(before)
+  const token = `${needsLeadingSpace ? ' ' : ''}/`
+  return {
+    value: `${before}${token}${after}`,
+    cursorPos: before.length + token.length,
+  }
+}

package/desktop/src/components/controls/ModelSelector.tsx

@@ -0,0 +1,156 @@
+import { useState, useRef, useEffect } from 'react'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { useTranslation } from '../../i18n'
+import type { EffortLevel } from '../../types/settings'
+
+const MODEL_ICONS = {
+  opus: 'diamond',
+  sonnet: 'auto_awesome',
+  haiku: 'bolt',
+} as const
+
+type Props = {
+  /** Controlled mode: model ID override */
+  value?: string
+  /** Controlled mode: called on change instead of updating global store */
+  onChange?: (modelId: string) => void
+}
+
+export function ModelSelector({ value, onChange }: Props = {}) {
+  const t = useTranslation()
+  const { currentModel: storeModel, availableModels, effortLevel, setModel, setEffort } = useSettingsStore()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const EFFORT_OPTIONS: { value: EffortLevel; label: string }[] = [
+    { value: 'low', label: t('settings.general.effort.low') },
+    { value: 'medium', label: t('settings.general.effort.medium') },
+    { value: 'high', label: t('settings.general.effort.high') },
+    { value: 'max', label: t('settings.general.effort.max') },
+  ]
+
+  const isControlled = value !== undefined
+  const selectedModel = isControlled ? availableModels.find((m) => m.id === value) || null : storeModel
+
+  useEffect(() => {
+    if (!open) return
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', handleClick)
+    document.addEventListener('keydown', handleEsc)
+    return () => {
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleEsc)
+    }
+  }, [open])
+
+  const getModelIcon = (id: string): string => {
+    const lower = id.toLowerCase()
+    if (lower.includes('opus')) return MODEL_ICONS.opus
+    if (lower.includes('sonnet')) return MODEL_ICONS.sonnet
+    if (lower.includes('haiku')) return MODEL_ICONS.haiku
+    return 'smart_toy'
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 px-2.5 py-1.5 bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)] rounded-full text-xs font-medium text-[var(--color-text-secondary)] transition-colors"
+      >
+        <span className="material-symbols-outlined text-[14px] text-[var(--color-brand)]">auto_awesome</span>
+        <span>{selectedModel?.name ?? t('model.selectModel')}</span>
+        <span className="material-symbols-outlined text-[12px]">expand_more</span>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 bottom-full mb-2 w-[340px] rounded-xl bg-[var(--color-surface-container-lowest)] border border-[var(--color-border)] shadow-[var(--shadow-dropdown)] z-50">
+          {/* Models */}
+          <div className="p-3">
+            <div className="text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)] mb-2 px-1">
+              {t('model.configuration')}
+            </div>
+            <div className="space-y-1">
+              {availableModels.map((model) => {
+                const isSelected = model.id === selectedModel?.id
+                return (
+                  <button
+                    key={model.id}
+                    onClick={() => {
+                      if (isControlled) {
+                        onChange?.(model.id)
+                      } else {
+                        setModel(model.id)
+                      }
+                      setOpen(false)
+                    }}
+                    className={`
+                      w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors
+                      ${isSelected
+                        ? 'bg-[var(--color-primary-fixed)] border border-[var(--color-brand)]/20'
+                        : 'hover:bg-[var(--color-surface-hover)]'
+                      }
+                    `}
+                  >
+                    {/* Radio button */}
+                    <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
+                      isSelected
+                        ? 'border-[var(--color-brand)]'
+                        : 'border-[var(--color-outline)]'
+                    }`}>
+                      {isSelected && (
+                        <div className="w-2 h-2 rounded-full bg-[var(--color-brand)]" />
+                      )}
+                    </div>
+
+                    <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">
+                      {getModelIcon(model.id)}
+                    </span>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-semibold text-[var(--color-text-primary)]">{model.name}</div>
+                      {model.description && (
+                        <div className="text-[10px] text-[var(--color-text-tertiary)] mt-0.5 truncate">{model.description}</div>
+                      )}
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Effort — hidden in controlled mode (not relevant for task creation) */}
+          {!isControlled && <div className="border-t border-[var(--color-border)] p-3">
+            <div className="text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)] mb-2 px-1">
+              {t('model.effort')}
+            </div>
+            <div className="grid grid-cols-4 gap-1.5">
+              {EFFORT_OPTIONS.map((opt) => {
+                const isSelected = opt.value === effortLevel
+                return (
+                  <button
+                    key={opt.value}
+                    onClick={() => { setEffort(opt.value); setOpen(false) }}
+                    className={`
+                      py-2 rounded-lg text-xs font-semibold transition-colors text-center
+                      ${isSelected
+                        ? 'bg-[var(--color-brand)] text-white'
+                        : 'bg-[var(--color-surface-container-high)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+                      }
+                    `}
+                  >
+                    {opt.label}
+                  </button>
+                )
+              })}
+            </div>
+          </div>}
+        </div>
+      )}
+    </div>
+  )
+}