bingocode 1.0.2 → 1.0.3

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

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

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

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