bingocode 1.0.3 → 1.0.5

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

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

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

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

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

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

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

@@ -1,156 +0,0 @@
-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>
-  )
-}