@octo-cyber/ai 0.5.4 → 0.5.6

package/web/pages/AgentRunsPage.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { RefreshCw, Loader2 } 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@octo-cyber/ui/components/ui/table'
+
+import { agentRunService } from '../services/agent-run.service'
+import type { AgentRunRecord, AgentRunStatus } from '../services/agent-run.service'
+
+type BadgeVariant = 'secondary' | 'default' | 'destructive' | 'outline'
+
+const STATUS_VARIANT: Record<AgentRunStatus, BadgeVariant> = {
+  pending: 'secondary',
+  running: 'default',
+  completed: 'default',
+  failed: 'destructive',
+  cancelled: 'outline',
+}
+
+const STATUS_CLASS: Record<AgentRunStatus, string> = {
+  pending: '',
+  running: 'bg-blue-500 hover:bg-blue-500/80 text-white border-transparent',
+  completed: 'bg-green-500 hover:bg-green-500/80 text-white border-transparent',
+  failed: '',
+  cancelled: 'text-muted-foreground',
+}
+
+function StatusBadge({ status, label }: { status: AgentRunStatus; label: string }) {
+  return (
+    <Badge
+      variant={STATUS_VARIANT[status]}
+      className={STATUS_CLASS[status]}
+    >
+      {label}
+    </Badge>
+  )
+}
+
+function formatDuration(ms?: number): string {
+  if (ms === undefined || ms === null) return '—'
+  if (ms < 1000) return `${ms}ms`
+  const seconds = (ms / 1000).toFixed(1)
+  return `${seconds}s`
+}
+
+function formatDate(dateStr?: string): string {
+  if (!dateStr) return '—'
+  return new Date(dateStr).toLocaleString()
+}
+
+function truncatePrompt(prompt: string, maxLen = 80): string {
+  if (prompt.length <= maxLen) return prompt
+  return `${prompt.slice(0, maxLen)}...`
+}
+
+export default function AgentRunsPage() {
+  const t = useTranslations('agentRuns')
+  const tc = useTranslations('common')
+  const router = useRouter()
+
+  const [runs, setRuns] = useState<AgentRunRecord[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const loadRuns = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await agentRunService.listRuns()
+      setRuns(data)
+    } catch {
+      toast.error(t('toast.loadFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    loadRuns()
+  }, [loadRuns])
+
+  const handleRowClick = (id: string) => {
+    router.push(`/ai-tools/agent-runs/${id}`)
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Button variant="outline" onClick={loadRuns} 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>
+
+      <div className="rounded-lg border dark:border-zinc-800">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('columns.status')}</TableHead>
+              <TableHead>{t('columns.agentType')}</TableHead>
+              <TableHead className="w-[40%]">{t('columns.prompt')}</TableHead>
+              <TableHead>{t('columns.createdAt')}</TableHead>
+              <TableHead>{t('columns.duration')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                  {tc('loading')}
+                </TableCell>
+              </TableRow>
+            ) : runs.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                  {tc('noData')}
+                </TableCell>
+              </TableRow>
+            ) : (
+              runs.map((run) => (
+                <TableRow
+                  key={run.id}
+                  className="cursor-pointer hover:bg-muted/50 dark:hover:bg-zinc-800/50"
+                  onClick={() => handleRowClick(run.id)}
+                >
+                  <TableCell>
+                    <StatusBadge
+                      status={run.status}
+                      label={t(`status.${run.status}`)}
+                    />
+                  </TableCell>
+                  <TableCell className="font-mono text-sm">{run.agentType}</TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {truncatePrompt(run.prompt)}
+                  </TableCell>
+                  <TableCell className="text-sm">{formatDate(run.createdAt)}</TableCell>
+                  <TableCell className="text-sm">{formatDuration(run.durationMs)}</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

package/web/pages/AgentsPage.tsx

@@ -0,0 +1,239 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { RefreshCw, Loader2, Play } 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,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@octo-cyber/ui/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@octo-cyber/ui/components/ui/dialog'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+
+import { agentGatewayService } from '../services/agent-gateway.service'
+import type { AgentCapability } from '../services/agent-gateway.service'
+
+function AgentCard({
+  agent,
+  onTest,
+  tAvailable,
+  tUnavailable,
+  tTestAgent,
+}: {
+  agent: AgentCapability
+  onTest: (agent: AgentCapability) => void
+  tAvailable: string
+  tUnavailable: string
+  tTestAgent: string
+}) {
+  return (
+    <Card className="flex flex-col bg-card dark:bg-zinc-900 border dark:border-zinc-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-base leading-tight">{agent.name}</CardTitle>
+          <Badge
+            variant="outline"
+            className="shrink-0 font-mono text-xs"
+          >
+            {agent.type}
+          </Badge>
+        </div>
+        <div className="mt-1">
+          <Badge
+            variant={agent.isAvailable ? 'default' : 'secondary'}
+            className={
+              agent.isAvailable
+                ? 'bg-green-500 hover:bg-green-500/80 text-white border-transparent text-xs'
+                : 'text-muted-foreground text-xs'
+            }
+          >
+            {agent.isAvailable ? tAvailable : tUnavailable}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 pb-2">
+        <CardDescription className="text-sm leading-relaxed line-clamp-3">
+          {agent.description}
+        </CardDescription>
+      </CardContent>
+      <CardFooter className="pt-2">
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={!agent.isAvailable}
+          onClick={() => onTest(agent)}
+          className="w-full"
+        >
+          <Play className="mr-2 h-3.5 w-3.5" />
+          {tTestAgent}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+interface TestDialogState {
+  open: boolean
+  agent: AgentCapability | null
+  prompt: string
+  running: boolean
+}
+
+export default function AgentsPage() {
+  const t = useTranslations('aiTools.agentGateway')
+  const tc = useTranslations('common')
+  const router = useRouter()
+
+  const [agents, setAgents] = useState<AgentCapability[]>([])
+  const [loading, setLoading] = useState(true)
+  const [dialog, setDialog] = useState<TestDialogState>({
+    open: false,
+    agent: null,
+    prompt: '',
+    running: false,
+  })
+
+  const loadAgents = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await agentGatewayService.listAgents()
+      setAgents(data)
+    } catch {
+      toast.error(t('loadError'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    loadAgents()
+  }, [loadAgents])
+
+  const openTestDialog = (agent: AgentCapability) => {
+    setDialog({ open: true, agent, prompt: '', running: false })
+  }
+
+  const closeDialog = () => {
+    if (dialog.running) return
+    setDialog((prev) => ({ ...prev, open: false, agent: null, prompt: '' }))
+  }
+
+  const handleRun = async () => {
+    if (!dialog.agent || !dialog.prompt.trim()) return
+    setDialog((prev) => ({ ...prev, running: true }))
+    try {
+      const result = await agentGatewayService.executeAgent({
+        agentType: dialog.agent.type,
+        prompt: dialog.prompt.trim(),
+        async: true,
+      })
+      setDialog((prev) => ({ ...prev, running: false, open: false }))
+      if (result.runId) {
+        toast.success(`${t('runId')}: ${result.runId}`, {
+          action: {
+            label: t('viewRun'),
+            onClick: () => router.push(`/ai-tools/agent-runs/${result.runId}`),
+          },
+          duration: 8000,
+        })
+      }
+    } catch {
+      setDialog((prev) => ({ ...prev, running: false }))
+      toast.error(tc('operationFailed'))
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Button variant="outline" onClick={loadAgents} 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 && agents.length === 0 ? (
+        <div className="flex h-48 items-center justify-center rounded-lg border border-dashed dark:border-zinc-700 text-muted-foreground">
+          {t('noAgents')}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {agents.map((agent) => (
+            <AgentCard
+              key={agent.type}
+              agent={agent}
+              onTest={openTestDialog}
+              tAvailable={t('available')}
+              tUnavailable={t('unavailable')}
+              tTestAgent={t('testAgent')}
+            />
+          ))}
+        </div>
+      )}
+
+      <Dialog open={dialog.open} onOpenChange={(open) => { if (!open) closeDialog() }}>
+        <DialogContent className="sm:max-w-lg dark:bg-zinc-900 dark:border-zinc-700">
+          <DialogHeader>
+            <DialogTitle>{dialog.agent?.name}</DialogTitle>
+            <DialogDescription>{t('testAgent')}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2 py-2">
+            <Label htmlFor="agent-prompt">{t('prompt')}</Label>
+            <Textarea
+              id="agent-prompt"
+              placeholder={t('promptPlaceholder')}
+              value={dialog.prompt}
+              onChange={(e) => setDialog((prev) => ({ ...prev, prompt: e.target.value }))}
+              rows={5}
+              disabled={dialog.running}
+              className="resize-none dark:bg-zinc-800 dark:border-zinc-700"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={closeDialog} disabled={dialog.running}>
+              {tc('cancel')}
+            </Button>
+            <Button
+              onClick={handleRun}
+              disabled={dialog.running || !dialog.prompt.trim()}
+            >
+              {dialog.running ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  {t('running')}
+                </>
+              ) : (
+                <>
+                  <Play className="mr-2 h-4 w-4" />
+                  {t('run')}
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/web/pages/AiCliToolsPage.tsx

@@ -3,111 +3,17 @@
 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 { RefreshCw, Loader2 } 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 { skillService } from '../services/skill-service'
 import CliTestDialog from '../components/CliTestDialog'
+import { ToolCard } from '../components/ToolCard'
 
-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>
-  )
-}
+type InstalledSkillsMap = Record<string, Array<{ name: string; skillDir: string }>>
 
 export default function AiCliToolsPage() {
   const t = useTranslations('aiCli')
@@ -118,12 +24,17 @@ export default function AiCliToolsPage() {
   const [checkingTool, setCheckingTool] = useState<string | null>(null)
   const [testDialogOpen, setTestDialogOpen] = useState(false)
   const [testToolInfo, setTestToolInfo] = useState<CliToolInfo | null>(null)
+  const [installedSkills, setInstalledSkills] = useState<InstalledSkillsMap>({})
 
   const loadTools = useCallback(async () => {
     setLoading(true)
     try {
-      const data = await aiCliService.getTools()
+      const [data, installed] = await Promise.all([
+        aiCliService.getTools(),
+        skillService.listInstalled().catch(() => ({} as InstalledSkillsMap)),
+      ])
       setTools(data)
+      setInstalledSkills(installed)
     } catch {
       toast.error(t('toast.loadFailed'))
     } finally {
@@ -131,9 +42,7 @@ export default function AiCliToolsPage() {
     }
   }, [t])
 
-  useEffect(() => {
-    loadTools()
-  }, [loadTools])
+  useEffect(() => { loadTools() }, [loadTools])
 
   const handleHealthCheck = async (toolName: string) => {
     setCheckingTool(toolName)
@@ -147,9 +56,7 @@ export default function AiCliToolsPage() {
         ),
       )
       toast.success(
-        info.available
-          ? t('toast.healthOk', { name: toolName })
-          : t('toast.healthUnavailable', { name: toolName }),
+        info.available ? t('toast.healthOk', { name: toolName }) : t('toast.healthUnavailable', { name: toolName }),
       )
     } catch {
       toast.error(t('toast.healthFailed', { name: toolName }))
@@ -158,22 +65,14 @@ export default function AiCliToolsPage() {
     }
   }
 
-  const openTestDialog = (tool: CliToolInfo) => {
-    setTestToolInfo(tool)
-    setTestDialogOpen(true)
-  }
-
+  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" />
-          )}
+          {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
           {tc('refresh')}
         </Button>
       </PageHeader>
@@ -185,14 +84,8 @@ export default function AiCliToolsPage() {
       ) : (
         <>
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span>
-              {t('summary', {
-                available: availableCount,
-                total: tools.length,
-              })}
-            </span>
+            <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
@@ -201,10 +94,10 @@ export default function AiCliToolsPage() {
                 onTest={openTestDialog}
                 onHealthCheck={handleHealthCheck}
                 isChecking={checkingTool === tool.name}
+                installedSkills={installedSkills[tool.name] || []}
               />
             ))}
           </div>
-
           {tools.length === 0 && (
             <div className="flex items-center justify-center h-32">
               <p className="text-muted-foreground">{t('noTools')}</p>
@@ -213,11 +106,7 @@ export default function AiCliToolsPage() {
         </>
       )}
 
-      <CliTestDialog
-        open={testDialogOpen}
-        onOpenChange={setTestDialogOpen}
-        tool={testToolInfo}
-      />
+      <CliTestDialog open={testDialogOpen} onOpenChange={setTestDialogOpen} tool={testToolInfo} />
     </div>
   )
 }