bingocode 1.0.3 → 1.0.4

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

@@ -1,161 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { ShikiHighlighter } from 'react-shiki'
-import 'react-shiki/css'
-import { CopyButton } from '../shared/CopyButton'
-
-type Props = {
-  code: string
-  language?: string
-  maxLines?: number
-  showLineNumbers?: boolean
-}
-
-/**
- * Custom warm-toned TextMate theme — uses VS Code-quality tokenization
- * while harmonizing with the app's cream/terra-cotta design system.
- */
-const warmCodeTheme = {
-  name: 'warm-code',
-  type: 'dark' as const,
-  fg: 'var(--color-code-fg)',
-  bg: 'transparent',
-  tokenColors: [
-    { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: 'var(--color-code-comment)', fontStyle: 'italic' } },
-    { scope: ['string', 'string.quoted', 'string.template', 'string.other.link'], settings: { foreground: 'var(--color-code-string)' } },
-    { scope: ['string.regexp'], settings: { foreground: 'var(--color-primary-container)' } },
-    { scope: ['keyword', 'keyword.control', 'storage', 'storage.type', 'storage.modifier'], settings: { foreground: 'var(--color-code-keyword)' } },
-    { scope: ['keyword.operator'], settings: { foreground: 'var(--color-code-keyword)' } },
-    { scope: ['entity.name.function', 'support.function'], settings: { foreground: 'var(--color-code-function)' } },
-    { scope: ['entity.name.type', 'support.type', 'support.class', 'entity.name.class', 'entity.other.inherited-class'], settings: { foreground: 'var(--color-code-type)' } },
-    { scope: ['entity.name.type.parameter'], settings: { foreground: 'var(--color-code-number)' } },
-    { scope: ['variable', 'variable.other', 'variable.other.readwrite'], settings: { foreground: 'var(--color-code-fg)' } },
-    { scope: ['variable.parameter'], settings: { foreground: 'var(--color-code-parameter)' } },
-    { scope: ['variable.other.property', 'support.type.property-name', 'meta.object-literal.key'], settings: { foreground: 'var(--color-code-property)' } },
-    { scope: ['variable.other.constant', 'variable.other.enummember'], settings: { foreground: 'var(--color-code-type)' } },
-    { scope: ['constant.numeric', 'constant.language'], settings: { foreground: 'var(--color-code-number)' } },
-    { scope: ['punctuation', 'meta.brace', 'meta.bracket'], settings: { foreground: 'var(--color-code-punctuation)' } },
-    { scope: ['entity.name.tag', 'punctuation.definition.tag'], settings: { foreground: 'var(--color-code-keyword)' } },
-    { scope: ['entity.other.attribute-name'], settings: { foreground: 'var(--color-code-property)' } },
-    { scope: ['meta.decorator', 'punctuation.decorator'], settings: { foreground: 'var(--color-code-type)' } },
-    { scope: ['markup.inserted', 'punctuation.definition.inserted'], settings: { foreground: 'var(--color-code-inserted)' } },
-    { scope: ['markup.deleted', 'punctuation.definition.deleted'], settings: { foreground: 'var(--color-code-deleted)' } },
-    { scope: ['markup.heading', 'entity.name.section'], settings: { foreground: 'var(--color-code-function)', fontStyle: 'bold' } },
-    { scope: ['markup.bold'], settings: { fontStyle: 'bold' } },
-    { scope: ['markup.italic'], settings: { fontStyle: 'italic' } },
-  ],
-}
-
-/**
- * Wraps ShikiHighlighter with a plain-text fallback so the code area
- * is never empty while the async WASM / language-grammar load is in-flight,
- * or if highlighting fails entirely.
- */
-function CodeArea({ code, language, showLineNumbers }: { code: string; language?: string; showLineNumbers: boolean }) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [loaded, setLoaded] = useState(false)
-
-  useEffect(() => {
-    // ShikiHighlighter renders `null` until the async highlight completes.
-    // Watch for real content appearing via MutationObserver so we can hide
-    // the plain-text fallback as soon as highlighted output is in the DOM.
-    const el = containerRef.current
-    if (!el) return
-    const check = () => {
-      const shikiContainer = el.querySelector('[data-testid="shiki-container"]')
-      // shiki renders a <code> element inside its container once highlighting is done
-      if (shikiContainer?.querySelector('code')) {
-        setLoaded(true)
-      }
-    }
-    check()
-    const observer = new MutationObserver(check)
-    observer.observe(el, { childList: true, subtree: true })
-    return () => observer.disconnect()
-  }, [code, language])
-
-  return (
-    <div ref={containerRef} className="code-viewer-area max-h-[420px] overflow-auto bg-[var(--color-code-bg)]">
-      {/* Plain-text fallback shown until Shiki finishes highlighting */}
-      {!loaded && (
-        <pre
-          style={{
-            margin: 0,
-            padding: '0.5rem 12px',
-            fontFamily: 'var(--font-mono)',
-            fontSize: '12px',
-            lineHeight: '1.45',
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
-            color: 'var(--color-code-fg)',
-          }}
-        >
-          {code}
-        </pre>
-      )}
-      <div style={loaded ? undefined : { position: 'absolute', opacity: 0, pointerEvents: 'none' }}>
-        <ShikiHighlighter
-          language={language || 'text'}
-          theme={warmCodeTheme}
-          showLineNumbers={showLineNumbers}
-          showLanguage={false}
-          addDefaultStyles={false}
-          style={{
-            margin: 0,
-            padding: '0.5rem 0',
-            fontFamily: 'var(--font-mono)',
-            fontSize: '12px',
-            lineHeight: '1.45',
-          }}
-        >
-          {code}
-        </ShikiHighlighter>
-      </div>
-    </div>
-  )
-}
-
-export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = true }: Props) {
-  const [expanded, setExpanded] = useState(false)
-
-  const allLines = code.split('\n')
-  const isTruncated = !expanded && allLines.length > maxLines
-  const visibleCode = isTruncated ? allLines.slice(0, maxLines).join('\n') : code
-
-  const effectiveShowLineNumbers = showLineNumbers && !!language && language !== 'text'
-  const languageLabel = language || 'code'
-  const lineCountLabel = `${allLines.length} ${allLines.length === 1 ? 'line' : 'lines'}`
-  const showExpandToggle = allLines.length > maxLines
-
-  return (
-    <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-outline-variant)]/50 bg-[var(--color-surface-container-low)]">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
-        <div className="flex items-center gap-3">
-          <span className="font-semibold uppercase tracking-[0.14em]">{languageLabel}</span>
-          <span>{lineCountLabel}</span>
-        </div>
-        <CopyButton
-          text={code}
-          className="rounded-md border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] px-2 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]"
-        />
-      </div>
-
-      {/* Code area */}
-      <CodeArea
-        code={visibleCode}
-        language={language}
-        showLineNumbers={effectiveShowLineNumbers}
-      />
-
-      {/* Expand/collapse toggle */}
-      {showExpandToggle && (
-        <button
-          onClick={() => setExpanded((value) => !value)}
-          className="w-full border-t border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container)] py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]"
-        >
-          {expanded ? 'Collapse' : `Show ${allLines.length - maxLines} more lines`}
-        </button>
-      )}
-    </div>
-  )
-}

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

@@ -1,174 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, fireEvent, render, screen } from '@testing-library/react'
-
-const { sendMock, openSettingsMock } = vi.hoisted(() => ({
-  sendMock: vi.fn(),
-  openSettingsMock: vi.fn(async () => ({ ok: true })),
-}))
-
-vi.mock('../../api/websocket', () => ({
-  wsManager: {
-    connect: vi.fn(),
-    disconnect: vi.fn(),
-    onMessage: vi.fn(() => () => {}),
-    clearHandlers: vi.fn(),
-    send: sendMock,
-  },
-}))
-
-vi.mock('../../api/sessions', () => ({
-  sessionsApi: {
-    getMessages: vi.fn(async () => ({ messages: [] })),
-    getSlashCommands: vi.fn(async () => ({ commands: [] })),
-  },
-}))
-
-vi.mock('../../stores/teamStore', () => ({
-  useTeamStore: {
-    getState: () => ({
-      getMemberBySessionId: vi.fn(() => null),
-      sendMessageToMember: vi.fn(async () => {}),
-      handleTeamCreated: vi.fn(),
-      handleTeamUpdate: vi.fn(),
-      handleTeamDeleted: vi.fn(),
-    }),
-  },
-}))
-
-vi.mock('../../stores/tabStore', () => ({
-  useTabStore: {
-    getState: () => ({
-      updateTabStatus: vi.fn(),
-      updateTabTitle: vi.fn(),
-    }),
-  },
-}))
-
-vi.mock('../../stores/sessionStore', () => ({
-  useSessionStore: {
-    getState: () => ({
-      updateSessionTitle: vi.fn(),
-    }),
-  },
-}))
-
-vi.mock('../../stores/cliTaskStore', () => ({
-  useCLITaskStore: {
-    getState: () => ({
-      fetchSessionTasks: vi.fn(),
-      tasks: [],
-      clearTasks: vi.fn(),
-      setTasksFromTodos: vi.fn(),
-      markCompletedAndDismissed: vi.fn(),
-      refreshTasks: vi.fn(),
-    }),
-  },
-}))
-
-vi.mock('../../api/computerUse', () => ({
-  computerUseApi: {
-    openSettings: openSettingsMock,
-  },
-}))
-
-import { useChatStore } from '../../stores/chatStore'
-import { ComputerUsePermissionModal } from './ComputerUsePermissionModal'
-
-describe('ComputerUsePermissionModal', () => {
-  beforeEach(() => {
-    sendMock.mockReset()
-    openSettingsMock.mockReset()
-    useChatStore.setState({ sessions: {} })
-  })
-
-  it('returns a full approval payload for resolved apps and requested flags', () => {
-    render(
-      <ComputerUsePermissionModal
-        sessionId="session-1"
-        request={{
-          requestId: 'cu-1',
-          reason: 'Open Finder and inspect a file',
-          apps: [
-            {
-              requestedName: 'Finder',
-              resolved: {
-                bundleId: 'com.apple.finder',
-                displayName: 'Finder',
-              },
-              isSentinel: false,
-              alreadyGranted: false,
-              proposedTier: 'full',
-            },
-            {
-              requestedName: 'Missing App',
-              isSentinel: false,
-              alreadyGranted: false,
-              proposedTier: 'full',
-            },
-          ],
-          requestedFlags: {
-            clipboardRead: true,
-            systemKeyCombos: true,
-          },
-          screenshotFiltering: 'native',
-          willHide: [{ bundleId: 'com.apple.TextEdit', displayName: 'TextEdit' }],
-          autoUnhideEnabled: true,
-        }}
-      />,
-    )
-
-    fireEvent.click(screen.getByRole('button', { name: 'Allow for session' }))
-
-    expect(sendMock).toHaveBeenCalledTimes(1)
-    expect(sendMock).toHaveBeenCalledWith('session-1', {
-      type: 'computer_use_permission_response',
-      requestId: 'cu-1',
-      response: {
-        granted: [
-          expect.objectContaining({
-            bundleId: 'com.apple.finder',
-            displayName: 'Finder',
-            tier: 'full',
-          }),
-        ],
-        denied: [
-          {
-            bundleId: 'Missing App',
-            reason: 'not_installed',
-          },
-        ],
-        flags: {
-          clipboardRead: true,
-          clipboardWrite: false,
-          systemKeyCombos: true,
-        },
-        userConsented: true,
-      },
-    })
-  })
-
-  it('opens System Settings from the macOS permission panel', async () => {
-    render(
-      <ComputerUsePermissionModal
-        sessionId="session-1"
-        request={{
-          requestId: 'cu-1',
-          reason: '',
-          apps: [],
-          requestedFlags: {},
-          screenshotFiltering: 'native',
-          tccState: {
-            accessibility: false,
-            screenRecording: true,
-          },
-        }}
-      />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'Open Accessibility' }))
-    })
-
-    expect(openSettingsMock).toHaveBeenCalledWith('Privacy_Accessibility')
-  })
-})

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

@@ -1,311 +0,0 @@
-import { useMemo, useState } from 'react'
-import { useTranslation } from '../../i18n'
-import { computerUseApi } from '../../api/computerUse'
-import { useChatStore } from '../../stores/chatStore'
-import type {
-  ComputerUsePermissionRequest,
-  ComputerUsePermissionResponse,
-} from '../../types/chat'
-import { Button } from '../shared/Button'
-import { Modal } from '../shared/Modal'
-
-type Props = {
-  sessionId: string
-  request: ComputerUsePermissionRequest | null
-}
-
-const DEFAULT_GRANT_FLAGS = {
-  clipboardRead: false,
-  clipboardWrite: false,
-  systemKeyCombos: false,
-} as const
-
-function denyAllResponse(): ComputerUsePermissionResponse {
-  return {
-    granted: [],
-    denied: [],
-    flags: { ...DEFAULT_GRANT_FLAGS },
-    userConsented: false,
-  }
-}
-
-function buildAllowResponse(
-  request: ComputerUsePermissionRequest,
-): ComputerUsePermissionResponse {
-  const now = Date.now()
-  const granted = request.apps.flatMap((app) => {
-    if (!app.resolved || app.alreadyGranted) return []
-    return [{
-      bundleId: app.resolved.bundleId,
-      displayName: app.resolved.displayName,
-      grantedAt: now,
-      tier: app.proposedTier,
-    }]
-  })
-
-  const denied = request.apps.flatMap((app) => {
-    if (app.resolved) return []
-    return [{
-      bundleId: app.requestedName,
-      reason: 'not_installed' as const,
-    }]
-  })
-
-  const flags = {
-    ...DEFAULT_GRANT_FLAGS,
-    ...Object.fromEntries(
-      Object.entries(request.requestedFlags).filter(([, value]) => value === true),
-    ),
-  }
-
-  return {
-    granted,
-    denied,
-    flags,
-    userConsented: true,
-  }
-}
-
-export function ComputerUsePermissionModal({ sessionId, request }: Props) {
-  const t = useTranslation()
-  const respondToComputerUsePermission = useChatStore(
-    (s) => s.respondToComputerUsePermission,
-  )
-  const [openingPane, setOpeningPane] = useState<
-    'Privacy_Accessibility' | 'Privacy_ScreenCapture' | null
-  >(null)
-
-  const requestedFlags = useMemo(
-    () =>
-      request
-        ? Object.entries(request.requestedFlags)
-            .filter(([, enabled]) => enabled)
-            .map(([flag]) => flag)
-        : [],
-    [request],
-  )
-
-  if (!request) return null
-
-  const handleDeny = () => {
-    respondToComputerUsePermission(
-      sessionId,
-      request.requestId,
-      denyAllResponse(),
-    )
-  }
-
-  const handleAllow = () => {
-    respondToComputerUsePermission(
-      sessionId,
-      request.requestId,
-      buildAllowResponse(request),
-    )
-  }
-
-  const openSettings = async (
-    pane: 'Privacy_Accessibility' | 'Privacy_ScreenCapture',
-  ) => {
-    setOpeningPane(pane)
-    try {
-      await computerUseApi.openSettings(pane)
-    } finally {
-      setOpeningPane(null)
-    }
-  }
-
-  const tccState = request.tccState
-
-  return (
-    <Modal
-      open
-      onClose={handleDeny}
-      title={
-        tccState
-          ? t('computerUseApproval.titleTcc')
-          : t('computerUseApproval.titleApps')
-      }
-      width={640}
-      footer={
-        tccState ? (
-          <Button variant="ghost" onClick={handleDeny}>
-            {t('computerUseApproval.deny')}
-          </Button>
-        ) : (
-          <>
-            <Button variant="ghost" onClick={handleDeny}>
-              {t('computerUseApproval.deny')}
-            </Button>
-            <Button variant="primary" onClick={handleAllow}>
-              {t('computerUseApproval.allow')}
-            </Button>
-          </>
-        )
-      }
-    >
-      {tccState ? (
-        <div className="space-y-4">
-          <p className="text-sm text-[var(--color-text-secondary)]">
-            {t('computerUseApproval.tccHint')}
-          </p>
-
-          <div className="space-y-3">
-            <PermissionRow
-              label={t('computerUseApproval.accessibility')}
-              granted={tccState.accessibility}
-              actionLabel={t('computerUseApproval.openAccessibility')}
-              actionLoading={openingPane === 'Privacy_Accessibility'}
-              onAction={() => openSettings('Privacy_Accessibility')}
-            />
-            <PermissionRow
-              label={t('computerUseApproval.screenRecording')}
-              granted={tccState.screenRecording}
-              actionLabel={t('computerUseApproval.openScreenRecording')}
-              actionLoading={openingPane === 'Privacy_ScreenCapture'}
-              onAction={() => openSettings('Privacy_ScreenCapture')}
-            />
-          </div>
-
-          <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3 text-xs text-[var(--color-text-tertiary)]">
-            {t('computerUseApproval.tryAgainHint')}
-          </div>
-
-          <div className="flex justify-end">
-            <Button variant="secondary" onClick={handleDeny}>
-              {t('computerUseApproval.tryAgain')}
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {request.reason ? (
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3">
-              <div className="text-xs font-semibold uppercase tracking-wide text-[var(--color-text-tertiary)]">
-                {t('computerUseApproval.reason')}
-              </div>
-              <div className="mt-1 text-sm text-[var(--color-text-primary)]">
-                {request.reason}
-              </div>
-            </div>
-          ) : null}
-
-          <div className="space-y-2">
-            {request.apps.map((app) => {
-              const resolved = app.resolved
-              return (
-                <div
-                  key={resolved?.bundleId ?? app.requestedName}
-                  className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div>
-                      <div className="text-sm font-semibold text-[var(--color-text-primary)]">
-                        {resolved?.displayName ?? app.requestedName}
-                      </div>
-                      <div className="mt-1 text-xs text-[var(--color-text-tertiary)]">
-                        {resolved?.bundleId ?? t('computerUseApproval.notInstalled')}
-                      </div>
-                    </div>
-                    <span className="rounded-full bg-[var(--color-surface-container)] px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]">
-                      {app.proposedTier}
-                    </span>
-                  </div>
-
-                  {!resolved ? (
-                    <p className="mt-2 text-xs text-[var(--color-error)]">
-                      {t('computerUseApproval.notInstalled')}
-                    </p>
-                  ) : null}
-
-                  {app.alreadyGranted ? (
-                    <p className="mt-2 text-xs text-[var(--color-success)]">
-                      {t('computerUseApproval.alreadyGranted')}
-                    </p>
-                  ) : null}
-
-                  {app.isSentinel ? (
-                    <p className="mt-2 text-xs text-[var(--color-warning)]">
-                      {t('computerUseApproval.sensitiveApp')}
-                    </p>
-                  ) : null}
-                </div>
-              )
-            })}
-          </div>
-
-          {requestedFlags.length > 0 ? (
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3">
-              <div className="text-xs font-semibold uppercase tracking-wide text-[var(--color-text-tertiary)]">
-                {t('computerUseApproval.alsoRequested')}
-              </div>
-              <div className="mt-2 flex flex-wrap gap-2">
-                {requestedFlags.map((flag) => (
-                  <span
-                    key={flag}
-                    className="rounded-full bg-[var(--color-surface-container)] px-2 py-1 text-[11px] text-[var(--color-text-secondary)]"
-                  >
-                    {flag}
-                  </span>
-                ))}
-              </div>
-            </div>
-          ) : null}
-
-          {request.willHide && request.willHide.length > 0 ? (
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3 text-sm text-[var(--color-text-secondary)]">
-              {request.autoUnhideEnabled
-                ? t('computerUseApproval.hideWhileWorkingRestore', {
-                    count: request.willHide.length,
-                  })
-                : t('computerUseApproval.hideWhileWorking', {
-                    count: request.willHide.length,
-                  })}
-            </div>
-          ) : null}
-        </div>
-      )}
-    </Modal>
-  )
-}
-
-function PermissionRow({
-  label,
-  granted,
-  actionLabel,
-  actionLoading,
-  onAction,
-}: {
-  label: string
-  granted: boolean
-  actionLabel: string
-  actionLoading: boolean
-  onAction: () => void
-}) {
-  const t = useTranslation()
-
-  return (
-    <div className="flex items-center justify-between gap-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3">
-      <div>
-        <div className="text-sm font-semibold text-[var(--color-text-primary)]">
-          {label}
-        </div>
-        <div className="mt-1 text-xs text-[var(--color-text-tertiary)]">
-          {granted
-            ? t('computerUseApproval.granted')
-            : t('computerUseApproval.notGranted')}
-        </div>
-      </div>
-
-      {!granted ? (
-        <Button
-          variant="secondary"
-          size="sm"
-          loading={actionLoading}
-          onClick={onAction}
-        >
-          {actionLabel}
-        </Button>
-      ) : null}
-    </div>
-  )
-}