@octo-cyber/ai 0.5.0

package/web/components/CliTestDialog.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Play, Loader2 } from 'lucide-react'
+
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+import { aiCliService } from '../services/ai-cli-service'
+import type { CliToolInfo } from '../services/ai-cli-service'
+
+interface CliTestDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  tool: CliToolInfo | null
+}
+
+export default function CliTestDialog({
+  open,
+  onOpenChange,
+  tool,
+}: CliTestDialogProps) {
+  const t = useTranslations('aiCli')
+  const tc = useTranslations('common')
+
+  const [selectedModel, setSelectedModel] = useState<string>('')
+  const [testPrompt, setTestPrompt] = useState('')
+  const [testResult, setTestResult] = useState('')
+  const [isExecuting, setIsExecuting] = useState(false)
+  const [models, setModels] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!open || !tool) return
+    setTestPrompt('')
+    setTestResult('')
+    setSelectedModel(tool.defaultModel ?? '')
+    setModels(tool.models ?? [])
+
+    // Fetch fresh models list if tool is available
+    if (tool.available) {
+      aiCliService.getModels(tool.name).then(setModels).catch(() => {
+        // Fall back to models from tool info
+      })
+    }
+  }, [open, tool])
+
+  const handleExecute = async () => {
+    if (!testPrompt.trim() || !tool) return
+    setIsExecuting(true)
+    setTestResult('')
+    try {
+      const result = await aiCliService.execute({
+        tool: tool.name,
+        prompt: testPrompt,
+        model: selectedModel || undefined,
+        timeoutMs: 60000,
+      })
+      if (result.output) {
+        setTestResult(result.output)
+      } else if (result.error) {
+        setTestResult(`Error: ${result.error}`)
+      } else {
+        setTestResult(t('testDialog.noOutput'))
+      }
+    } catch {
+      toast.error(t('toast.executeFailed'))
+    } finally {
+      setIsExecuting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>
+            {t('testDialog.title', { tool: tool?.displayName ?? '' })}
+          </DialogTitle>
+          <DialogDescription>{t('testDialog.description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          {models.length > 0 && (
+            <div className="space-y-2">
+              <Label>{t('testDialog.modelLabel')}</Label>
+              <Select value={selectedModel} onValueChange={setSelectedModel}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('testDialog.modelPlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {models.map((model) => (
+                    <SelectItem key={model} value={model}>
+                      {model}
+                      {model === tool?.defaultModel && (
+                        <span className="ml-2 text-muted-foreground text-xs">
+                          ({t('testDialog.modelDefault')})
+                        </span>
+                      )}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label>{t('testDialog.promptLabel')}</Label>
+            <Textarea
+              placeholder={t('testDialog.promptPlaceholder')}
+              value={testPrompt}
+              onChange={(e) => setTestPrompt(e.target.value)}
+              rows={3}
+            />
+          </div>
+          {testResult && (
+            <div className="space-y-2">
+              <Label>{t('testDialog.resultLabel')}</Label>
+              <pre className="rounded-md bg-muted p-3 text-sm overflow-auto max-h-64 whitespace-pre-wrap">
+                {testResult}
+              </pre>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {tc('close')}
+          </Button>
+          <Button
+            onClick={handleExecute}
+            disabled={isExecuting || !testPrompt.trim()}
+          >
+            {isExecuting ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Play className="mr-2 h-4 w-4" />
+            )}
+            {isExecuting ? t('testDialog.executing') : t('testDialog.execute')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/web/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @octo-cyber/ai — Frontend entry point.
+ *
+ * Re-exports page components, services, and the frontend manifest.
+ */
+
+// Manifest
+export { aiFrontendManifest } from './manifest';
+
+// i18n Messages
+export { default as aiMessagesZhCN } from './messages/zh-CN.json';
+export { default as aiMessagesEnUS } from './messages/en-US.json';
+
+// Pages
+export { default as AiCliToolsPage } from './pages/AiCliToolsPage';
+export { default as WorkspacesPage } from './pages/WorkspacesPage';
+
+// Services
+export { aiCliService } from './services/ai-cli-service';

package/web/manifest.ts

@@ -0,0 +1,14 @@
+import type { IFrontendManifest } from '@octo-cyber/core';
+
+export const aiFrontendManifest: IFrontendManifest = {
+  moduleId: 'ai',
+  icon: 'Terminal',
+  color: 'cyan',
+  position: 'main',
+  titleKey: 'aiCli.title',
+  descriptionKey: 'aiCli.description',
+  pages: [
+    { path: '/ai-tools', titleKey: 'aiCli.pages.tools', icon: 'Terminal' },
+    { path: '/ai-tools/workspaces', titleKey: 'aiCli.pages.workspaces', icon: 'Terminal' },
+  ],
+};

package/web/messages/en-US.json

@@ -0,0 +1,81 @@
+{
+  "aiCli": {
+    "title": "AI CLI Tools",
+    "description": "Manage local AI tools (Claude, Gemini, Codex, Antigravity) status and testing",
+    "summary": "{available}/{total} tools available",
+    "noTools": "No CLI tools detected",
+    "status": {
+      "available": "Available",
+      "unavailable": "Unavailable"
+    },
+    "actions": {
+      "healthCheck": "Check",
+      "testRun": "Test"
+    },
+    "testDialog": {
+      "title": "Test {tool}",
+      "description": "Enter a prompt to test if the tool works correctly",
+      "modelLabel": "Model",
+      "modelPlaceholder": "Select model",
+      "modelDefault": "Default",
+      "promptLabel": "Prompt",
+      "promptPlaceholder": "Enter a test prompt, e.g.: Hello, please introduce yourself briefly",
+      "resultLabel": "Result",
+      "execute": "Execute",
+      "executing": "Executing...",
+      "noOutput": "No output"
+    },
+    "modelCount": "{count} models",
+    "toast": {
+      "loadFailed": "Failed to load tools",
+      "healthOk": "{name} check passed",
+      "healthUnavailable": "{name} is unavailable",
+      "healthFailed": "{name} check failed",
+      "executeFailed": "Execution failed"
+    },
+    "workspaces": {
+      "title": "Workspaces",
+      "description": "Manage local directory and GitHub repository workspaces",
+      "summary": "{local} local, {github} GitHub workspaces",
+      "empty": "No workspaces",
+      "type": {
+        "local": "Local",
+        "github": "GitHub"
+      },
+      "actions": {
+        "create": "Create",
+        "pull": "Pull"
+      },
+      "branch": "Branch: {branch}",
+      "pulling": "Pulling...",
+      "createDialog": {
+        "title": "Create Workspace",
+        "description": "Select workspace type and fill in the details",
+        "typeLocal": "Local Directory",
+        "typeLocalDesc": "Use an existing local directory as workspace",
+        "typeGithub": "GitHub Repository",
+        "typeGithubDesc": "Clone a GitHub repository as workspace",
+        "nameLabel": "Name",
+        "namePlaceholder": "e.g., my-project",
+        "localPathLabel": "Local Directory Path",
+        "localPathPlaceholder": "e.g., /Users/user/projects/my-project",
+        "repoUrlLabel": "Repository URL",
+        "repoUrlPlaceholder": "e.g., https://github.com/user/repo.git",
+        "branchLabel": "Branch",
+        "branchPlaceholder": "e.g., main"
+      },
+      "deleteConfirm": "Are you sure you want to delete workspace \"{name}\"?",
+      "deleteConfirmLocal": "Only the workspace record will be removed. The original directory will not be deleted.",
+      "deleteConfirmGithub": "The cloned repository directory will be deleted.",
+      "toast": {
+        "loadFailed": "Failed to load workspaces",
+        "created": "Workspace created",
+        "createFailed": "Failed to create workspace",
+        "deleted": "Workspace deleted",
+        "deleteFailed": "Failed to delete workspace",
+        "pulled": "Successfully pulled latest code",
+        "pullFailed": "Pull failed"
+      }
+    }
+  }
+}

package/web/messages/zh-CN.json

@@ -0,0 +1,81 @@
+{
+  "aiCli": {
+    "title": "AI CLI 工具",
+    "description": "管理本地 AI 工具（Claude、Gemini、Codex、Antigravity）的状态和测试",
+    "summary": "{available}/{total} 个工具可用",
+    "noTools": "未检测到任何 CLI 工具",
+    "status": {
+      "available": "可用",
+      "unavailable": "不可用"
+    },
+    "actions": {
+      "healthCheck": "检测",
+      "testRun": "测试"
+    },
+    "testDialog": {
+      "title": "测试 {tool}",
+      "description": "输入提示词，测试工具是否正常工作",
+      "modelLabel": "模型",
+      "modelPlaceholder": "选择模型",
+      "modelDefault": "默认",
+      "promptLabel": "提示词",
+      "promptPlaceholder": "输入测试提示词，例如：你好，请做个简单的自我介绍",
+      "resultLabel": "执行结果",
+      "execute": "执行",
+      "executing": "执行中...",
+      "noOutput": "无输出"
+    },
+    "modelCount": "{count} 个模型",
+    "toast": {
+      "loadFailed": "加载工具列表失败",
+      "healthOk": "{name} 检测通过",
+      "healthUnavailable": "{name} 不可用",
+      "healthFailed": "{name} 检测失败",
+      "executeFailed": "执行失败"
+    },
+    "workspaces": {
+      "title": "工作空间",
+      "description": "管理本地目录和 GitHub 仓库工作空间",
+      "summary": "{local} 个本地、{github} 个 GitHub 工作空间",
+      "empty": "暂无工作空间",
+      "type": {
+        "local": "本地",
+        "github": "GitHub"
+      },
+      "actions": {
+        "create": "新建",
+        "pull": "拉取"
+      },
+      "branch": "分支：{branch}",
+      "pulling": "拉取中...",
+      "createDialog": {
+        "title": "新建工作空间",
+        "description": "选择工作空间类型并填写相关信息",
+        "typeLocal": "本地目录",
+        "typeLocalDesc": "选择本地已有的目录作为工作空间",
+        "typeGithub": "GitHub 仓库",
+        "typeGithubDesc": "从 GitHub 仓库克隆代码作为工作空间",
+        "nameLabel": "名称",
+        "namePlaceholder": "例如：my-project",
+        "localPathLabel": "本地目录路径",
+        "localPathPlaceholder": "例如：/Users/user/projects/my-project",
+        "repoUrlLabel": "仓库地址",
+        "repoUrlPlaceholder": "例如：https://github.com/user/repo.git",
+        "branchLabel": "分支",
+        "branchPlaceholder": "例如：main"
+      },
+      "deleteConfirm": "确定要删除工作空间「{name}」吗？",
+      "deleteConfirmLocal": "仅移除工作空间记录，不会删除原目录。",
+      "deleteConfirmGithub": "将删除克隆的仓库目录。",
+      "toast": {
+        "loadFailed": "加载工作空间失败",
+        "created": "工作空间已创建",
+        "createFailed": "创建失败",
+        "deleted": "工作空间已删除",
+        "deleteFailed": "删除失败",
+        "pulled": "已拉取最新代码",
+        "pullFailed": "拉取失败"
+      }
+    }
+  }
+}

package/web/pages/AiCliToolsPage.tsx

@@ -0,0 +1,223 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import {
+  RefreshCw,
+  Play,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Terminal,
+} from 'lucide-react'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@octo-cyber/ui/components/ui/card'
+import { aiCliService } from '../services/ai-cli-service'
+import type { CliToolInfo } from '../services/ai-cli-service'
+import CliTestDialog from '../components/CliTestDialog'
+
+function ToolStatusIcon({ isAvailable }: { isAvailable: boolean }) {
+  if (isAvailable) {
+    return <CheckCircle2 className="h-5 w-5 text-green-500" />
+  }
+  return <XCircle className="h-5 w-5 text-muted-foreground" />
+}
+
+function ToolCard({
+  tool,
+  onTest,
+  onHealthCheck,
+  isChecking,
+}: {
+  tool: CliToolInfo
+  onTest: (tool: CliToolInfo) => void
+  onHealthCheck: (toolName: string) => void
+  isChecking: boolean
+}) {
+  const t = useTranslations('aiCli')
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="flex items-center gap-3">
+          <Terminal className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <CardTitle className="text-base">{tool.displayName}</CardTitle>
+            <CardDescription className="text-xs">{tool.name}</CardDescription>
+          </div>
+        </div>
+        <ToolStatusIcon isAvailable={tool.available} />
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm">
+            <Badge variant={tool.available ? 'default' : 'secondary'}>
+              {tool.available ? t('status.available') : t('status.unavailable')}
+            </Badge>
+            {tool.version && (
+              <span className="text-muted-foreground">v{tool.version}</span>
+            )}
+            {tool.models && tool.models.length > 0 && (
+              <span className="text-muted-foreground text-xs">
+                {t('modelCount', { count: tool.models.length })}
+              </span>
+            )}
+          </div>
+          {tool.path && (
+            <p className="text-xs text-muted-foreground truncate" title={tool.path}>
+              {tool.path}
+            </p>
+          )}
+          <div className="flex gap-2 pt-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onHealthCheck(tool.name)}
+              disabled={isChecking}
+            >
+              {isChecking ? (
+                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+              ) : (
+                <RefreshCw className="mr-1 h-3 w-3" />
+              )}
+              {t('actions.healthCheck')}
+            </Button>
+            {tool.available && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onTest(tool)}
+              >
+                <Play className="mr-1 h-3 w-3" />
+                {t('actions.testRun')}
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function AiCliToolsPage() {
+  const t = useTranslations('aiCli')
+  const tc = useTranslations('common')
+
+  const [tools, setTools] = useState<CliToolInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [checkingTool, setCheckingTool] = useState<string | null>(null)
+  const [testDialogOpen, setTestDialogOpen] = useState(false)
+  const [testToolInfo, setTestToolInfo] = useState<CliToolInfo | null>(null)
+
+  const loadTools = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await aiCliService.getTools()
+      setTools(data)
+    } catch {
+      toast.error(t('toast.loadFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    loadTools()
+  }, [loadTools])
+
+  const handleHealthCheck = async (toolName: string) => {
+    setCheckingTool(toolName)
+    try {
+      const info = await aiCliService.healthCheck(toolName)
+      setTools((prev) =>
+        prev.map((tool) =>
+          tool.name === toolName
+            ? { ...tool, available: info.available, version: info.version, path: info.path }
+            : tool,
+        ),
+      )
+      toast.success(
+        info.available
+          ? t('toast.healthOk', { name: toolName })
+          : t('toast.healthUnavailable', { name: toolName }),
+      )
+    } catch {
+      toast.error(t('toast.healthFailed', { name: toolName }))
+    } finally {
+      setCheckingTool(null)
+    }
+  }
+
+  const openTestDialog = (tool: CliToolInfo) => {
+    setTestToolInfo(tool)
+    setTestDialogOpen(true)
+  }
+
+  const availableCount = tools.filter((t) => t.available).length
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Button variant="outline" onClick={loadTools} disabled={loading}>
+          {loading ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="mr-2 h-4 w-4" />
+          )}
+          {tc('refresh')}
+        </Button>
+      </PageHeader>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-64">
+          <p className="text-muted-foreground">{tc('loading')}</p>
+        </div>
+      ) : (
+        <>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>
+              {t('summary', {
+                available: availableCount,
+                total: tools.length,
+              })}
+            </span>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {tools.map((tool) => (
+              <ToolCard
+                key={tool.name}
+                tool={tool}
+                onTest={openTestDialog}
+                onHealthCheck={handleHealthCheck}
+                isChecking={checkingTool === tool.name}
+              />
+            ))}
+          </div>
+
+          {tools.length === 0 && (
+            <div className="flex items-center justify-center h-32">
+              <p className="text-muted-foreground">{t('noTools')}</p>
+            </div>
+          )}
+        </>
+      )}
+
+      <CliTestDialog
+        open={testDialogOpen}
+        onOpenChange={setTestDialogOpen}
+        tool={testToolInfo}
+      />
+    </div>
+  )
+}