@openspecui/web 0.9.0

package/src/routes/settings.tsx

@@ -0,0 +1,816 @@
+import { CliTerminal } from '@/components/cli-terminal'
+import { CopyablePath } from '@/components/copyable-path'
+import { Dialog } from '@/components/dialog'
+import { getApiBaseUrl } from '@/lib/api-config'
+import { isStaticMode } from '@/lib/static-mode'
+import { trpc, trpcClient } from '@/lib/trpc'
+import { useCliRunner } from '@/lib/use-cli-runner'
+import { useServerStatus } from '@/lib/use-server-status'
+import { useConfigSubscription, useConfiguredToolsSubscription } from '@/lib/use-subscription'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import {
+  ArrowUp,
+  Check,
+  CheckCircle,
+  Download,
+  FolderOpen,
+  FolderPlus,
+  Loader2,
+  Monitor,
+  Moon,
+  Settings as SettingsIcon,
+  Sun,
+  Terminal,
+  Wifi,
+  WifiOff,
+  XCircle,
+} from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+type Theme = 'light' | 'dark' | 'system'
+
+function getStoredTheme(): Theme {
+  const stored = localStorage.getItem('theme')
+  if (stored === 'light' || stored === 'dark' || stored === 'system') {
+    return stored
+  }
+  return 'system'
+}
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement
+  if (theme === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    root.classList.toggle('dark', prefersDark)
+  } else {
+    root.classList.toggle('dark', theme === 'dark')
+  }
+}
+
+export function Settings() {
+  const [theme, setTheme] = useState<Theme>(getStoredTheme)
+  const [apiUrl, setApiUrl] = useState(getApiBaseUrl() || '')
+  const [cliCommand, setCliCommand] = useState('')
+  const [selectedTools, setSelectedTools] = useState<string[]>([])
+  const [showInitModal, setShowInitModal] = useState(false)
+  const [showInstallModal, setShowInstallModal] = useState(false)
+  const [initTools, setInitTools] = useState<string[] | 'all' | 'none'>('none')
+
+  const initRunner = useCliRunner()
+  const installRunner = useCliRunner()
+
+  const {
+    lines: initLines,
+    status: initStatus,
+    commands: initCommands,
+    cancel: cancelInit,
+    reset: resetInit,
+  } = initRunner
+
+  const initBorderVariant =
+    initStatus === 'error' ? 'error' : initStatus === 'success' ? 'success' : 'default'
+
+  const {
+    lines: installLines,
+    status: installStatus,
+    commands: installCommands,
+    cancel: cancelInstall,
+    reset: resetInstall,
+  } = installRunner
+
+  const installBorderVariant =
+    installStatus === 'error' ? 'error' : installStatus === 'success' ? 'success' : 'default'
+
+  // 服务器状态（包含项目路径）
+  const serverStatus = useServerStatus()
+
+  // In static mode, only show appearance settings
+  const inStaticMode = isStaticMode()
+
+  // 订阅配置
+  const { data: config } = useConfigSubscription()
+
+  // 嗅探全局 CLI（每次进入 settings 页面都会重新嗅探）
+  // Skip in static mode
+  const {
+    data: cliSniffResult,
+    isLoading: isSniffingCli,
+    refetch: resniffCli,
+  } = useQuery({
+    ...trpc.cli.sniffGlobalCli.queryOptions(),
+    // 每次进入页面都重新嗅探
+    staleTime: 0,
+    gcTime: 0,
+    enabled: !inStaticMode,
+  })
+
+  // CLI 可用性检查（基于配置或嗅探结果）
+  // Skip in static mode
+  const {
+    data: cliAvailability,
+    isLoading: isCheckingCli,
+    refetch: recheckCli,
+  } = useQuery({
+    ...trpc.cli.checkAvailability.queryOptions(),
+    enabled: !inStaticMode,
+  })
+
+  // 获取所有工具列表（包括 available: false 的）
+  // Skip in static mode
+  const { data: allTools } = useQuery({
+    ...trpc.cli.getAllTools.queryOptions(),
+    enabled: !inStaticMode,
+  })
+
+  // 分组：available: true 的工具和 available: false 的工具
+  const nativeTools = useMemo(() => allTools?.filter((t) => t.available) ?? [], [allTools])
+  const otherTools = useMemo(() => allTools?.filter((t) => !t.available) ?? [], [allTools])
+  const cliSupportedToolIds = useMemo(() => nativeTools.map((t) => t.value), [nativeTools])
+  const cliSupportedTools = useMemo(() => new Set(cliSupportedToolIds), [cliSupportedToolIds])
+  const selectableToolIds = cliSupportedToolIds
+  const cliSupportedToolsKey = useMemo(() => cliSupportedToolIds.join('|'), [cliSupportedToolIds])
+  const lastSyncedToolsKeyRef = useRef<string>('')
+
+  // 订阅已配置的工具列表（响应式）
+  const { data: configuredTools } = useConfiguredToolsSubscription()
+
+  // 同步配置到本地状态（只有用户配置了才显示）
+  useEffect(() => {
+    // 只有当配置中有值时才同步到 input
+    if (config?.cli?.command) {
+      setCliCommand(config.cli.command)
+    } else {
+      // 用户没有配置时，清空 input
+      setCliCommand('')
+    }
+  }, [config?.cli?.command])
+
+  // 安装完成后重新嗅探
+  const handleInstallSuccess = useCallback(() => {
+    // 重新嗅探全局 CLI
+    resniffCli()
+    // 重新检查 CLI 可用性
+    recheckCli()
+    // 关闭安装模态框
+    setShowInstallModal(false)
+  }, [resniffCli, recheckCli])
+
+  // 计算显示的 placeholder
+  const cliPlaceholder = cliSniffResult?.hasGlobal
+    ? `openspec (v${cliSniffResult.version || 'detected'})`
+    : 'npx @fission-ai/openspec'
+
+  // 同步已配置的工具到选中状态
+  useEffect(() => {
+    if (!configuredTools || configuredTools.length === 0) return
+    const next = [...configuredTools.filter((t) => cliSupportedTools.has(t))].sort()
+    const signature = `${cliSupportedToolsKey}|${next.join(',')}`
+    if (signature === lastSyncedToolsKeyRef.current) return
+    lastSyncedToolsKeyRef.current = signature
+    setSelectedTools(next)
+  }, [configuredTools, cliSupportedToolsKey])
+
+  // 打开 init modal
+  const startInit = (tools: string[] | 'all' | 'none') => {
+    setInitTools(tools)
+    setShowInitModal(true)
+  }
+
+  // Modal lifecycle: auto start streams when打开
+  // Keep state clean when关闭
+  useEffect(() => {
+    if (!showInitModal) {
+      cancelInit()
+      resetInit()
+    }
+  }, [showInitModal, cancelInit, resetInit])
+
+  useEffect(() => {
+    if (!showInitModal) return
+    const tools = initTools
+    const toolsArg = Array.isArray(tools) ? tools.join(',') : tools
+    initCommands.replaceAll([{ command: 'openspec', args: ['init', '--tools', toolsArg] }])
+  }, [initCommands, initTools, showInitModal])
+
+  useEffect(() => {
+    if (showInstallModal) {
+      installCommands.replaceAll([
+        { command: 'npm', args: ['install', '-g', '@fission-ai/openspec'] },
+      ])
+      installCommands.runAll()
+    } else {
+      cancelInstall()
+      resetInstall()
+    }
+  }, [showInstallModal, installCommands, cancelInstall, resetInstall])
+
+  // 判断工具是否已配置（不可取消）
+  const isToolConfigured = (tool: string) => configuredTools?.includes(tool) ?? false
+
+  // 切换工具选择（已配置的工具不能取消）
+  const toggleTool = (tool: string) => {
+    if (!cliSupportedTools.has(tool)) return
+    if (isToolConfigured(tool)) return // 已配置的工具不能取消
+    setSelectedTools((prev) =>
+      prev.includes(tool) ? prev.filter((t) => t !== tool) : [...prev, tool]
+    )
+  }
+
+  // 全选/取消全选（保留已配置的工具）
+  const toggleAllTools = () => {
+    if (!allTools) return
+    const selectableToolIds = allTools.filter((t) => t.available).map((t) => t.value)
+    const unconfiguredTools = selectableToolIds.filter((t) => !isToolConfigured(t))
+    const allUnconfiguredSelected = unconfiguredTools.every((t) => selectedTools.includes(t))
+
+    if (allUnconfiguredSelected) {
+      // 取消所有未配置的工具，保留已配置的
+      setSelectedTools(configuredTools ?? [])
+    } else {
+      // 全选所有可用工具
+      setSelectedTools([...selectableToolIds])
+    }
+  }
+
+  // 计算新工具数量（未配置但已选中的）
+  const newToolsCount = selectedTools.filter(
+    (t) => cliSupportedTools.has(t) && !isToolConfigured(t)
+  ).length
+
+  const handleCloseInit = () => {
+    setShowInitModal(false)
+    cancelInit()
+    resetInit()
+  }
+
+  const handleCloseInstall = () => {
+    setShowInstallModal(false)
+    cancelInstall()
+    resetInstall()
+  }
+
+  // 保存 CLI 命令配置
+  const saveCliCommandMutation = useMutation({
+    mutationFn: (command: string) => trpcClient.config.setCliCommand.mutate({ command }),
+    onSuccess: () => {
+      recheckCli()
+    },
+  })
+
+  useEffect(() => {
+    applyTheme(theme)
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== 'system') return
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = () => applyTheme('system')
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [theme])
+
+  const handleApiUrlChange = () => {
+    const currentUrl = new URL(window.location.href)
+    if (apiUrl) {
+      currentUrl.searchParams.set('api', apiUrl)
+    } else {
+      currentUrl.searchParams.delete('api')
+    }
+    window.location.href = currentUrl.toString()
+  }
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    setLoading(false)
+  }, [])
+  if (loading) {
+    return <div className="route-loading animate-pulse">Loading settings...</div>
+  }
+
+  return (
+    <div className="max-w-2xl space-y-8">
+      <h1 className="font-nav flex items-center gap-2 text-2xl font-bold">
+        <SettingsIcon className="h-6 w-6 shrink-0" />
+        Settings
+      </h1>
+
+      {/* Theme */}
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">Appearance</h2>
+        <div className="border-border rounded-lg border p-4">
+          <label className="mb-3 block text-sm font-medium">Theme</label>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setTheme('light')}
+              className={`flex items-center gap-2 rounded-md border px-4 py-2 transition-colors ${
+                theme === 'light'
+                  ? 'border-primary bg-primary text-primary-foreground'
+                  : 'border-border hover:bg-muted'
+              }`}
+            >
+              <Sun className="h-4 w-4" />
+              Light
+            </button>
+            <button
+              onClick={() => setTheme('dark')}
+              className={`flex items-center gap-2 rounded-md border px-4 py-2 transition-colors ${
+                theme === 'dark'
+                  ? 'border-primary bg-primary text-primary-foreground'
+                  : 'border-border hover:bg-muted'
+              }`}
+            >
+              <Moon className="h-4 w-4" />
+              Dark
+            </button>
+            <button
+              onClick={() => setTheme('system')}
+              className={`flex items-center gap-2 rounded-md border px-4 py-2 transition-colors ${
+                theme === 'system'
+                  ? 'border-primary bg-primary text-primary-foreground'
+                  : 'border-border hover:bg-muted'
+              }`}
+            >
+              <Monitor className="h-4 w-4" />
+              System
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Only show other sections in dynamic mode */}
+      {!inStaticMode && (
+        <>
+          {/* Project Directory */}
+          <section className="space-y-4">
+            <h2 className="text-lg font-semibold">Project Directory</h2>
+            <div className="border-border rounded-lg border p-4">
+              <div className="flex items-start gap-2">
+                <FolderOpen className="text-muted-foreground mt-1 h-4 w-4 shrink-0" />
+                {serverStatus.projectDir ? (
+                  <CopyablePath path={serverStatus.projectDir} className="flex-1" />
+                ) : (
+                  <span className="text-muted-foreground text-sm">Loading...</span>
+                )}
+              </div>
+            </div>
+          </section>
+
+          {/* CLI Configuration */}
+          <section className="space-y-4">
+            <h2 className="text-lg font-semibold">CLI Configuration</h2>
+            <div className="border-border space-y-4 rounded-lg border p-4">
+              {/* Global CLI Detection */}
+              <div>
+                <label className="mb-2 block text-sm font-medium">Global CLI Detection</label>
+                <div className="mb-2 flex items-center gap-2">
+                  {isSniffingCli ? (
+                    <span className="text-muted-foreground flex items-center gap-2 text-sm">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Detecting global openspec command...
+                    </span>
+                  ) : cliSniffResult?.hasGlobal ? (
+                    <div className="flex flex-col gap-1">
+                      <span className="flex items-center gap-2 text-sm text-green-600">
+                        <CheckCircle className="h-4 w-4" />
+                        Global CLI installed:{' '}
+                        <code className="bg-muted rounded px-1">
+                          openspec {cliSniffResult.version}
+                        </code>
+                      </span>
+                      {cliSniffResult.hasUpdate && cliSniffResult.latestVersion && (
+                        <span className="flex items-center gap-2 text-sm text-amber-600">
+                          <ArrowUp className="h-4 w-4" />
+                          Update available:{' '}
+                          <code className="bg-muted rounded px-1">
+                            v{cliSniffResult.latestVersion}
+                          </code>
+                        </span>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="flex flex-col gap-1">
+                      <span className="flex items-center gap-2 text-sm text-yellow-600">
+                        <XCircle className="h-4 w-4" />
+                        Global CLI not found
+                      </span>
+                      {cliSniffResult?.latestVersion && (
+                        <span className="text-muted-foreground text-xs">
+                          Latest version:{' '}
+                          <code className="bg-muted rounded px-1">
+                            v{cliSniffResult.latestVersion}
+                          </code>
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+                {/* 显示安装/更新按钮：当没有全局 CLI 或有更新可用时 */}
+                {!isSniffingCli && (!cliSniffResult?.hasGlobal || cliSniffResult?.hasUpdate) && (
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => setShowInstallModal(true)}
+                      className="bg-primary text-primary-foreground flex items-center gap-2 rounded-md px-3 py-1.5 text-sm hover:opacity-90"
+                    >
+                      {cliSniffResult?.hasUpdate ? (
+                        <>
+                          <ArrowUp className="h-4 w-4" />
+                          Update to v{cliSniffResult.latestVersion}
+                        </>
+                      ) : (
+                        <>
+                          <Download className="h-4 w-4" />
+                          Install Globally
+                        </>
+                      )}
+                    </button>
+                    <span className="text-muted-foreground text-xs">
+                      Run:{' '}
+                      <code className="bg-muted rounded px-1">
+                        npm install -g @fission-ai/openspec
+                      </code>
+                    </span>
+                  </div>
+                )}
+                {cliSniffResult?.error && (
+                  <p className="mt-1 text-sm text-red-500">
+                    Detection error: {cliSniffResult.error}
+                  </p>
+                )}
+              </div>
+
+              {/* CLI Command Override */}
+              <div className="border-border border-t pt-3">
+                <label className="mb-2 block text-sm font-medium">
+                  Custom CLI Command (Optional)
+                </label>
+                <p className="text-muted-foreground mb-3 text-sm">
+                  Override the auto-detected CLI command. Leave empty to use the detected default.
+                </p>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={cliCommand}
+                    onChange={(e) => setCliCommand(e.target.value)}
+                    placeholder={cliPlaceholder}
+                    className="border-border bg-background text-foreground flex-1 rounded-md border px-3 py-2 font-mono text-sm"
+                  />
+                  <button
+                    onClick={() => saveCliCommandMutation.mutate(cliCommand)}
+                    disabled={
+                      saveCliCommandMutation.isPending ||
+                      cliCommand === (config?.cli?.command ?? '')
+                    }
+                    className="bg-primary text-primary-foreground rounded-md px-4 py-2 hover:opacity-90 disabled:opacity-50"
+                  >
+                    {saveCliCommandMutation.isPending ? 'Saving...' : 'Save'}
+                  </button>
+                </div>
+                {config?.cli?.command && (
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Currently using custom command:{' '}
+                    <code className="bg-muted rounded px-1">{config.cli.command}</code>
+                  </p>
+                )}
+              </div>
+
+              {/* CLI Status */}
+              <div className="border-border border-t pt-3">
+                <div className="flex items-center gap-2">
+                  <Terminal className="text-muted-foreground h-4 w-4" />
+                  <span className="text-sm font-medium">CLI Status:</span>
+                  {isCheckingCli ? (
+                    <span className="text-muted-foreground flex items-center gap-1 text-sm">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Checking...
+                    </span>
+                  ) : cliAvailability?.available ? (
+                    <span className="flex items-center gap-1 text-sm text-green-600">
+                      <CheckCircle className="h-4 w-4" />
+                      Available {cliAvailability.version && `(${cliAvailability.version})`}
+                    </span>
+                  ) : (
+                    <span className="flex items-center gap-1 text-sm text-red-600">
+                      <XCircle className="h-4 w-4" />
+                      Not available
+                    </span>
+                  )}
+                </div>
+                {cliAvailability && !cliAvailability.available && cliAvailability.error && (
+                  <p className="text-muted-foreground ml-6 mt-1 text-sm">{cliAvailability.error}</p>
+                )}
+              </div>
+            </div>
+          </section>
+
+          {/* API Configuration */}
+          <section className="space-y-4">
+            <h2 className="text-lg font-semibold">API Configuration</h2>
+            <div className="border-border space-y-4 rounded-lg border p-4">
+              <div>
+                <label className="mb-2 block text-sm font-medium">API Server URL</label>
+                <p className="text-muted-foreground mb-3 text-sm">
+                  Leave empty for same-origin requests. Set a custom URL to connect to a different
+                  server.
+                </p>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={apiUrl}
+                    onChange={(e) => setApiUrl(e.target.value)}
+                    placeholder={window.location.origin}
+                    className="border-border bg-background text-foreground flex-1 rounded-md border px-3 py-2"
+                  />
+                  <button
+                    onClick={handleApiUrlChange}
+                    className="bg-primary text-primary-foreground rounded-md px-4 py-2 hover:opacity-90"
+                  >
+                    Apply
+                  </button>
+                </div>
+                {getApiBaseUrl() && (
+                  <p className="text-muted-foreground mt-2 text-sm">
+                    Current: <code className="bg-muted rounded px-1">{getApiBaseUrl()}</code>
+                  </p>
+                )}
+              </div>
+            </div>
+          </section>
+
+          {/* File Watcher Info */}
+          <section className="space-y-4">
+            <h2 className="text-lg font-semibold">File Watcher</h2>
+            <div className="border-border rounded-lg border p-4">
+              <p className="text-muted-foreground mb-3 text-sm">
+                File watcher is configured on the server side. Check the status bar at the bottom of
+                the page to see if file watching is enabled.
+              </p>
+              <div className="flex items-center gap-2 text-sm">
+                <Wifi className="h-4 w-4 text-green-500" />
+                <span>Enabled: Real-time updates when files change</span>
+              </div>
+              <div className="mt-2 flex items-center gap-2 text-sm">
+                <WifiOff className="h-4 w-4 text-yellow-500" />
+                <span>Disabled: Manual refresh required</span>
+              </div>
+              <p className="text-muted-foreground mt-3 text-sm">
+                To disable file watching, restart the server with{' '}
+                <code className="bg-muted rounded px-1">--no-watch</code> flag.
+              </p>
+            </div>
+          </section>
+
+          {/* Initialize OpenSpec */}
+          <section className="space-y-4">
+            <h2 className="text-lg font-semibold">Initialize OpenSpec</h2>
+            <div className="border-border space-y-4 rounded-lg border p-4">
+              <p className="text-muted-foreground text-sm">
+                Create the OpenSpec directory structure in the current project. This will create{' '}
+                <code className="bg-muted rounded px-1">openspec/</code> with specs, changes, and
+                archive directories.
+              </p>
+
+              {/* Tool Selection */}
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-medium">AI Tools Configuration</label>
+                  <button onClick={toggleAllTools} className="text-primary text-xs hover:underline">
+                    {selectedTools.filter((t) => selectableToolIds.includes(t)).length ===
+                    selectableToolIds.length
+                      ? 'Deselect All'
+                      : 'Select All'}
+                  </button>
+                </div>
+                <p className="text-muted-foreground text-sm">
+                  Select which AI tools to configure. Already configured tools cannot be deselected.
+                </p>
+
+                {/* Natively supported providers */}
+                <div>
+                  <p className="text-muted-foreground mb-2 text-xs font-medium">
+                    Natively supported providers (✔ OpenSpec custom slash commands available)
+                  </p>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
+                    {nativeTools.map((tool) => {
+                      const configured = isToolConfigured(tool.value)
+                      const selected = selectedTools.includes(tool.value)
+                      return (
+                        <button
+                          key={tool.value}
+                          onClick={() => toggleTool(tool.value)}
+                          disabled={configured}
+                          title={configured ? 'Already configured' : tool.name}
+                          className={`flex items-center gap-1.5 rounded border px-2.5 py-1.5 text-left text-xs transition-colors ${
+                            configured
+                              ? 'cursor-not-allowed border-green-500/50 bg-green-500/10 text-green-600'
+                              : selected
+                                ? 'border-primary bg-primary/10 text-primary'
+                                : 'border-border hover:bg-muted'
+                          }`}
+                        >
+                          {(configured || selected) && (
+                            <Check
+                              className={`h-3 w-3 shrink-0 ${configured ? 'text-green-600' : ''}`}
+                            />
+                          )}
+                          <span className="truncate">{tool.name}</span>
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+
+                {/* Other tools (Universal AGENTS.md) */}
+                {otherTools.length > 0 && (
+                  <div>
+                    <p className="text-muted-foreground mb-2 text-xs font-medium">
+                      Other tools (use Universal AGENTS.md for Amp, VS Code, GitHub Copilot, …)
+                    </p>
+                    <div className="flex flex-wrap gap-2">
+                      {otherTools.map((tool) => {
+                        const configured = isToolConfigured(tool.value)
+                        const selected = selectedTools.includes(tool.value)
+                        // 对于 Universal AGENTS.md，显示为 "Universal AGENTS.md (always available)"
+                        const displayName =
+                          tool.value === 'agents' ? 'Universal AGENTS.md' : tool.name
+                        const annotation = tool.value === 'agents' ? 'always available' : undefined
+                        return (
+                          <button
+                            key={tool.value}
+                            onClick={() => toggleTool(tool.value)}
+                            disabled={configured || !tool.available}
+                            title={
+                              configured
+                                ? 'Already configured'
+                                : !tool.available
+                                  ? 'This helper is auto-detected via AGENTS.md (no init needed)'
+                                  : tool.name
+                            }
+                            className={`flex items-center gap-1.5 rounded border px-2.5 py-1.5 text-xs transition-colors ${
+                              configured
+                                ? 'cursor-not-allowed border-green-500/50 bg-green-500/10 text-green-600'
+                                : !tool.available
+                                  ? 'border-border text-muted-foreground cursor-not-allowed border-dashed'
+                                  : selected
+                                    ? 'border-primary bg-primary/10 text-primary'
+                                    : 'border-border hover:bg-muted'
+                            }`}
+                          >
+                            {(configured || selected) && (
+                              <Check
+                                className={`h-3 w-3 shrink-0 ${configured ? 'text-green-600' : ''}`}
+                              />
+                            )}
+                            <span>{displayName}</span>
+                            {annotation && (
+                              <span className="text-muted-foreground">({annotation})</span>
+                            )}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {configuredTools && configuredTools.length > 0 && (
+                  <p className="text-muted-foreground text-xs">
+                    <span className="inline-flex items-center gap-1">
+                      <span className="h-2 w-2 rounded-full bg-green-500/50" />
+                      {configuredTools.length} tool{configuredTools.length > 1 ? 's' : ''} already
+                      configured
+                    </span>
+                  </p>
+                )}
+              </div>
+
+              {/* Init Buttons */}
+              <div className="border-border flex flex-wrap gap-2 border-t pt-2">
+                <button
+                  onClick={() => {
+                    const tools = selectedTools.filter((t) => cliSupportedTools.has(t))
+                    startInit(tools.length > 0 ? tools : 'none')
+                  }}
+                  className="bg-primary text-primary-foreground flex items-center gap-2 rounded-md px-4 py-2 hover:opacity-90"
+                >
+                  <FolderPlus className="h-4 w-4" />
+                  {newToolsCount > 0
+                    ? `Add ${newToolsCount} new tool${newToolsCount > 1 ? 's' : ''}`
+                    : selectedTools.length > 0
+                      ? 'Refresh configuration'
+                      : 'Initialize (no tools)'}
+                </button>
+                <button
+                  onClick={() => startInit('all')}
+                  className="border-border hover:bg-muted rounded-md border px-4 py-2"
+                >
+                  Initialize with All Tools
+                </button>
+              </div>
+            </div>
+          </section>
+        </>
+      )}
+
+      {/* Init Terminal Dialog - only in dynamic mode */}
+      {!inStaticMode && (
+        <>
+          <Dialog
+            open={showInitModal}
+            onClose={handleCloseInit}
+            bodyClassName="max-h-[70vh]"
+            borderVariant={initBorderVariant}
+            title={
+              <div className="flex items-center gap-2">
+                <Terminal className="h-4 w-4" />
+                <span className="font-semibold">Initialize OpenSpec</span>
+              </div>
+            }
+            footer={
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleCloseInit}
+                  className="bg-muted hover:bg-muted/80 rounded-md px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled={initStatus === 'running'}
+                >
+                  Close
+                </button>
+                {initStatus !== 'success' && (
+                  <button
+                    onClick={() => initCommands.runAll()}
+                    className="bg-primary text-primary-foreground rounded-md px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    disabled={initStatus === 'running'}
+                  >
+                    {initStatus === 'running' ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      'Run init'
+                    )}
+                  </button>
+                )}
+              </div>
+            }
+          >
+            <CliTerminal lines={initLines} />
+          </Dialog>
+
+          {/* Install / Update CLI Dialog */}
+          <Dialog
+            open={showInstallModal}
+            onClose={handleCloseInstall}
+            bodyClassName="max-h-[70vh]"
+            borderVariant={installBorderVariant}
+            title={
+              <div className="flex items-center gap-2">
+                <Download className="h-4 w-4" />
+                <span className="font-semibold">
+                  {cliSniffResult?.hasUpdate
+                    ? 'Update OpenSpec CLI'
+                    : 'Install OpenSpec CLI Globally'}
+                </span>
+              </div>
+            }
+            footer={
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleCloseInstall}
+                  className="bg-muted hover:bg-muted/80 rounded-md px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled={installStatus === 'running'}
+                >
+                  Close
+                </button>
+                <button
+                  onClick={() => {
+                    handleCloseInstall()
+                    handleInstallSuccess()
+                  }}
+                  className="bg-primary text-primary-foreground rounded-md px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled={installStatus !== 'success'}
+                >
+                  Re-detect CLI
+                </button>
+              </div>
+            }
+          >
+            <CliTerminal lines={installLines} />
+
+            {installStatus === 'success' && (
+              <div className="border-border bg-muted/40 mt-3 rounded border px-3 py-2 text-sm">
+                <div className="flex items-center gap-2 text-green-600">
+                  <CheckCircle className="h-4 w-4" />
+                  {cliSniffResult?.hasUpdate
+                    ? `OpenSpec CLI updated to v${cliSniffResult?.latestVersion ?? ''}`
+                    : 'OpenSpec CLI installed globally'}
+                </div>
+                <p className="text-muted-foreground text-xs">
+                  You can now run the "openspec" command directly. Click "Re-detect CLI" to refresh
+                  status.
+                </p>
+              </div>
+            )}
+          </Dialog>
+        </>
+      )}
+    </div>
+  )
+}