bingocode 1.0.1 → 1.0.3

package/desktop/src/pages/ComputerUseSettings.tsx

@@ -0,0 +1,420 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { computerUseApi, type ComputerUseStatus, type SetupResult, type InstalledApp, type AuthorizedApp } from '../api/computerUse'
+import { useTranslation } from '../i18n'
+
+type CheckState = 'loading' | 'ready' | 'error'
+
+function StatusIcon({ ok }: { ok: boolean | null }) {
+  if (ok === null) {
+    return <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">help</span>
+  }
+  return ok ? (
+    <span className="material-symbols-outlined text-[18px] text-green-500" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+  ) : (
+    <span className="material-symbols-outlined text-[18px] text-red-400" style={{ fontVariationSettings: "'FILL' 1" }}>cancel</span>
+  )
+}
+
+function StatusRow({ label, ok, detail }: { label: string; ok: boolean | null; detail: string }) {
+  return (
+    <div className="flex items-center gap-3 py-2.5 px-4 rounded-lg bg-[var(--color-surface-container-low)]">
+      <StatusIcon ok={ok} />
+      <div className="flex-1 min-w-0">
+        <span className="text-sm font-medium text-[var(--color-text-primary)]">{label}</span>
+        <span className="ml-2 text-xs text-[var(--color-text-tertiary)]">{detail}</span>
+      </div>
+    </div>
+  )
+}
+
+async function openSystemSettings(pane: 'Privacy_ScreenCapture' | 'Privacy_Accessibility') {
+  await computerUseApi.openSettings(pane)
+}
+
+export function ComputerUseSettings() {
+  const t = useTranslation()
+  const [status, setStatus] = useState<ComputerUseStatus | null>(null)
+  const [checkState, setCheckState] = useState<CheckState>('loading')
+  const [setupRunning, setSetupRunning] = useState(false)
+  const [setupResult, setSetupResult] = useState<SetupResult | null>(null)
+
+  // App authorization state
+  const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])
+  const [authorizedBundleIds, setAuthorizedBundleIds] = useState<Set<string>>(new Set())
+  const [authorizedApps, setAuthorizedApps] = useState<AuthorizedApp[]>([])
+  const [appsLoading, setAppsLoading] = useState(false)
+  const [appsSaved, setAppsSaved] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [clipboardAccess, setClipboardAccess] = useState(true)
+  const [systemKeys, setSystemKeys] = useState(true)
+
+  const fetchStatus = useCallback(async () => {
+    setCheckState('loading')
+    try {
+      const s = await computerUseApi.getStatus()
+      setStatus(s)
+      setCheckState('ready')
+    } catch {
+      setCheckState('error')
+    }
+  }, [])
+
+  const fetchApps = useCallback(async () => {
+    setAppsLoading(true)
+    try {
+      const [appsResult, configResult] = await Promise.all([
+        computerUseApi.getInstalledApps(),
+        computerUseApi.getAuthorizedApps(),
+      ])
+      setInstalledApps(appsResult.apps)
+      setAuthorizedApps(configResult.authorizedApps)
+      setAuthorizedBundleIds(new Set(configResult.authorizedApps.map(a => a.bundleId)))
+      setClipboardAccess(configResult.grantFlags.clipboardRead)
+      setSystemKeys(configResult.grantFlags.systemKeyCombos)
+    } catch {
+      // API not ready
+    } finally {
+      setAppsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchStatus()
+  }, [fetchStatus])
+
+  // Load apps when environment is ready
+  const envReady = status?.venv.created && status?.dependencies.installed
+  useEffect(() => {
+    if (envReady) fetchApps()
+  }, [envReady, fetchApps])
+
+  const handleSetup = async () => {
+    setSetupRunning(true)
+    setSetupResult(null)
+    try {
+      const result = await computerUseApi.runSetup()
+      setSetupResult(result)
+      await fetchStatus()
+      if (result.success) await fetchApps()
+    } catch {
+      setSetupResult({ success: false, steps: [{ name: 'error', ok: false, message: 'Request failed' }] })
+    } finally {
+      setSetupRunning(false)
+    }
+  }
+
+  const toggleApp = (app: InstalledApp) => {
+    const newSet = new Set(authorizedBundleIds)
+    let newAuthorized = [...authorizedApps]
+    if (newSet.has(app.bundleId)) {
+      newSet.delete(app.bundleId)
+      newAuthorized = newAuthorized.filter(a => a.bundleId !== app.bundleId)
+    } else {
+      newSet.add(app.bundleId)
+      newAuthorized.push({
+        bundleId: app.bundleId,
+        displayName: app.displayName,
+        authorizedAt: new Date().toISOString(),
+      })
+    }
+    setAuthorizedBundleIds(newSet)
+    setAuthorizedApps(newAuthorized)
+
+    // Auto-save
+    computerUseApi.setAuthorizedApps({
+      authorizedApps: newAuthorized,
+      grantFlags: { clipboardRead: clipboardAccess, clipboardWrite: clipboardAccess, systemKeyCombos: systemKeys },
+    }).then(() => {
+      setAppsSaved(true)
+      setTimeout(() => setAppsSaved(false), 1500)
+    })
+  }
+
+  const toggleFlag = (flag: 'clipboard' | 'systemKeys', value: boolean) => {
+    if (flag === 'clipboard') setClipboardAccess(value)
+    else setSystemKeys(value)
+
+    computerUseApi.setAuthorizedApps({
+      authorizedApps,
+      grantFlags: {
+        clipboardRead: flag === 'clipboard' ? value : clipboardAccess,
+        clipboardWrite: flag === 'clipboard' ? value : clipboardAccess,
+        systemKeyCombos: flag === 'systemKeys' ? value : systemKeys,
+      },
+    })
+  }
+
+  const allReady =
+    status?.supported &&
+    status.python.installed &&
+    status.venv.created &&
+    status.dependencies.installed
+
+  const accessibilityNeedsAttention = status?.permissions.accessibility === false
+  const screenRecordingNeedsAttention = status?.permissions.screenRecording === false
+  const screenRecordingReady = status ? status.permissions.screenRecording !== false : null
+
+  // Filter apps by search query
+  const filteredApps = useMemo(() => {
+    if (!searchQuery) return installedApps
+    const q = searchQuery.toLowerCase()
+    return installedApps.filter(
+      a => a.displayName.toLowerCase().includes(q) || a.bundleId.toLowerCase().includes(q)
+    )
+  }, [installedApps, searchQuery])
+
+  // Sort: authorized apps first, then alphabetical
+  const sortedApps = useMemo(() => {
+    return [...filteredApps].sort((a, b) => {
+      const aAuth = authorizedBundleIds.has(a.bundleId) ? 0 : 1
+      const bAuth = authorizedBundleIds.has(b.bundleId) ? 0 : 1
+      if (aAuth !== bAuth) return aAuth - bAuth
+      return a.displayName.localeCompare(b.displayName)
+    })
+  }, [filteredApps, authorizedBundleIds])
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Title */}
+      <div>
+        <h2 className="text-lg font-semibold text-[var(--color-text-primary)]">
+          {t('settings.computerUse.title')}
+        </h2>
+        <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
+          {t('settings.computerUse.description')}
+        </p>
+      </div>
+
+      {checkState === 'loading' ? (
+        <div className="py-8 text-center text-sm text-[var(--color-text-tertiary)]">
+          {t('common.loading')}
+        </div>
+      ) : checkState === 'error' ? (
+        <div className="py-8 text-center text-sm text-red-400">
+          Failed to check status.
+          <button onClick={fetchStatus} className="ml-2 underline">{t('common.retry')}</button>
+        </div>
+      ) : status ? (
+        <>
+          {!status.supported && (
+            <div className="px-4 py-3 rounded-lg bg-yellow-500/10 border border-yellow-500/30 text-sm text-yellow-600">
+              {t('settings.computerUse.notSupported')}
+            </div>
+          )}
+
+          {/* Status checks */}
+          <div className="space-y-2">
+            <StatusRow
+              label={t('settings.computerUse.python')}
+              ok={status.python.installed}
+              detail={
+                status.python.installed
+                  ? `${t('settings.computerUse.pythonFound')} — ${status.python.version} (${status.python.path})`
+                  : t('settings.computerUse.pythonNotFound')
+              }
+            />
+            <StatusRow
+              label={t('settings.computerUse.venv')}
+              ok={status.venv.created}
+              detail={status.venv.created ? `${t('settings.computerUse.venvReady')} — ${status.venv.path}` : t('settings.computerUse.venvNotReady')}
+            />
+            <StatusRow
+              label={t('settings.computerUse.deps')}
+              ok={status.dependencies.installed}
+              detail={status.dependencies.installed ? t('settings.computerUse.depsReady') : t('settings.computerUse.depsNotReady')}
+            />
+          </div>
+
+          {/* macOS Permissions — only shown on macOS (darwin) */}
+          {envReady && status.platform === 'darwin' && (
+            <>
+              <StatusRow
+                label={t('settings.computerUse.accessibility')}
+                ok={status.permissions.accessibility}
+                detail={
+                  status.permissions.accessibility === null ? t('settings.computerUse.permUnknown')
+                    : status.permissions.accessibility ? t('settings.computerUse.permGranted')
+                      : t('settings.computerUse.permDenied')
+                }
+              />
+              <StatusRow
+                label={t('settings.computerUse.screenRecording')}
+                ok={screenRecordingReady}
+                detail={
+                  status.permissions.screenRecording === true ? t('settings.computerUse.permGranted')
+                    : status.permissions.screenRecording === false ? t('settings.computerUse.permDenied')
+                      : t('settings.computerUse.permScreenRecordingUnknownSoft')
+                }
+              />
+              {(accessibilityNeedsAttention || screenRecordingNeedsAttention) && (
+                <div className="flex flex-col gap-2 px-4 py-3 rounded-lg bg-yellow-500/5 border border-yellow-500/20">
+                  <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.computerUse.permRestartHint')}</p>
+                  <div className="flex gap-2">
+                    {accessibilityNeedsAttention && (
+                      <button
+                        onClick={() => openSystemSettings('Privacy_Accessibility')}
+                        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-[var(--color-text-accent)] border border-[var(--color-border)] rounded-lg hover:bg-[var(--color-surface-hover)]"
+                      >
+                        <span className="material-symbols-outlined text-[14px]">open_in_new</span>
+                        {t('settings.computerUse.openAccessibility')}
+                      </button>
+                    )}
+                    {screenRecordingNeedsAttention && (
+                      <button
+                        onClick={() => openSystemSettings('Privacy_ScreenCapture')}
+                        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-[var(--color-text-accent)] border border-[var(--color-border)] rounded-lg hover:bg-[var(--color-surface-hover)]"
+                      >
+                        <span className="material-symbols-outlined text-[14px]">open_in_new</span>
+                        {t('settings.computerUse.openScreenRecording')}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
+          {allReady && (status.platform !== 'darwin' || (status.permissions.accessibility && screenRecordingReady)) && (
+            <div className="px-4 py-3 rounded-lg bg-green-500/10 border border-green-500/30 text-sm text-green-600 flex items-center gap-2">
+              <span className="material-symbols-outlined text-[18px]" style={{ fontVariationSettings: "'FILL' 1" }}>verified</span>
+              {t('settings.computerUse.allReady')}
+            </div>
+          )}
+
+          {setupResult && (
+            <div className={`rounded-lg border p-4 space-y-2 ${setupResult.success ? 'bg-green-500/5 border-green-500/30' : 'bg-red-500/5 border-red-500/30'}`}>
+              <div className={`text-sm font-medium ${setupResult.success ? 'text-green-600' : 'text-red-400'}`}>
+                {setupResult.success ? t('settings.computerUse.setupSuccess') : t('settings.computerUse.setupFail')}
+              </div>
+              {setupResult.steps.map((step, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs text-[var(--color-text-secondary)]">
+                  <StatusIcon ok={step.ok} />
+                  <span>{step.message}</span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Action buttons */}
+          <div className="flex gap-3">
+            {!envReady && status.python.installed && (
+              <button
+                onClick={handleSetup}
+                disabled={setupRunning}
+                className="flex items-center gap-2 px-5 py-2.5 bg-[var(--color-brand)] text-white text-sm font-semibold rounded-lg hover:opacity-90 disabled:opacity-50 transition-opacity"
+              >
+                <span className="material-symbols-outlined text-[18px]">{setupRunning ? 'hourglass_empty' : 'download'}</span>
+                {setupRunning ? t('settings.computerUse.setupRunning') : t('settings.computerUse.setupBtn')}
+              </button>
+            )}
+            <button
+              onClick={fetchStatus}
+              className="flex items-center gap-2 px-4 py-2.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] border border-[var(--color-border)] rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors"
+            >
+              <span className="material-symbols-outlined text-[18px]">refresh</span>
+              {t('settings.computerUse.recheckBtn')}
+            </button>
+          </div>
+
+          {/* ─── App Authorization Section ─── */}
+          {envReady && (
+            <div className="space-y-4 pt-4 border-t border-[var(--color-border)]">
+              <div>
+                <h3 className="text-base font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
+                  {t('settings.computerUse.appsTitle')}
+                  {appsSaved && (
+                    <span className="text-xs font-normal text-green-500 flex items-center gap-1">
+                      <span className="material-symbols-outlined text-[14px]" style={{ fontVariationSettings: "'FILL' 1" }}>check</span>
+                      {t('settings.computerUse.appsSaved')}
+                    </span>
+                  )}
+                </h3>
+                <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
+                  {t('settings.computerUse.appsDescription')}
+                </p>
+              </div>
+
+              {/* Grant flags */}
+              <div className="flex gap-4">
+                <label className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={clipboardAccess}
+                    onChange={e => toggleFlag('clipboard', e.target.checked)}
+                    className="rounded border-[var(--color-border)] accent-[var(--color-brand)]"
+                  />
+                  {t('settings.computerUse.flagClipboard')}
+                </label>
+                <label className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={systemKeys}
+                    onChange={e => toggleFlag('systemKeys', e.target.checked)}
+                    className="rounded border-[var(--color-border)] accent-[var(--color-brand)]"
+                  />
+                  {t('settings.computerUse.flagSystemKeys')}
+                </label>
+              </div>
+
+              {/* Search */}
+              <div className="relative">
+                <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] absolute left-3 top-1/2 -translate-y-1/2">search</span>
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={e => setSearchQuery(e.target.value)}
+                  placeholder={t('settings.computerUse.appsSearch')}
+                  className="w-full pl-9 pr-4 py-2 text-sm bg-[var(--color-surface-container-low)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:border-[var(--color-brand)]"
+                />
+              </div>
+
+              {/* App list */}
+              {appsLoading ? (
+                <div className="py-6 text-center text-sm text-[var(--color-text-tertiary)]">
+                  {t('settings.computerUse.appsLoading')}
+                </div>
+              ) : installedApps.length === 0 ? (
+                <div className="py-6 text-center text-sm text-[var(--color-text-tertiary)]">
+                  {t('settings.computerUse.appsEmpty')}
+                </div>
+              ) : (
+                <div className="max-h-[400px] overflow-y-auto rounded-lg border border-[var(--color-border)]">
+                  {sortedApps.map(app => {
+                    const isAuthorized = authorizedBundleIds.has(app.bundleId)
+                    return (
+                      <button
+                        key={app.bundleId}
+                        onClick={() => toggleApp(app)}
+                        className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] border-b border-[var(--color-border)] last:border-b-0 ${
+                          isAuthorized ? 'bg-[var(--color-brand)]/5' : ''
+                        }`}
+                      >
+                        <div className={`w-5 h-5 rounded flex items-center justify-center flex-shrink-0 border ${
+                          isAuthorized
+                            ? 'bg-[var(--color-brand)] border-[var(--color-brand)]'
+                            : 'border-[var(--color-border)]'
+                        }`}>
+                          {isAuthorized && (
+                            <span className="material-symbols-outlined text-[14px] text-white" style={{ fontVariationSettings: "'FILL' 1" }}>check</span>
+                          )}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="text-sm font-medium text-[var(--color-text-primary)] truncate">
+                            {app.displayName}
+                          </div>
+                          <div className="text-[11px] text-[var(--color-text-tertiary)] truncate font-mono">
+                            {app.bundleId}
+                          </div>
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      ) : null}
+    </div>
+  )
+}