@octo-cyber/ai 0.5.4 → 0.5.6

package/web/pages/WorkspacesPage.tsx

@@ -3,134 +3,20 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useTranslations } from 'next-intl'
 import { toast } from 'sonner'
-import {
-  RefreshCw,
-  Trash2,
-  Plus,
-  FolderOpen,
-  Github,
-  Loader2,
-  GitPullRequest,
-} from 'lucide-react'
+import { RefreshCw, Plus, Loader2 } from 'lucide-react'
 
 import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
 import { ConfirmDialog } from '@octo-cyber/ui/components/shared/confirm-dialog'
 import { Button } from '@octo-cyber/ui/components/ui/button'
-import { Badge } from '@octo-cyber/ui/components/ui/badge'
-import { Input } from '@octo-cyber/ui/components/ui/input'
-import { Label } from '@octo-cyber/ui/components/ui/label'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@octo-cyber/ui/components/ui/card'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '@octo-cyber/ui/components/ui/dialog'
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-} from '@octo-cyber/ui/components/ui/tabs'
 import { aiCliService } from '../services/ai-cli-service'
 import type { WorkspaceInfo } from '../services/ai-cli-service'
+import { skillService } from '../services/skill-service'
+import { WorkspaceCard } from '../components/WorkspaceCard'
+import { CreateWorkspaceDialog } from '../components/CreateWorkspaceDialog'
 
-function formatDate(dateStr: string): string {
-  try {
-    return new Date(dateStr).toLocaleString()
-  } catch {
-    return dateStr
-  }
-}
-
-function WorkspaceCard({
-  ws,
-  onDelete,
-  onPull,
-  isPulling,
-}: {
-  ws: WorkspaceInfo
-  onDelete: (ws: WorkspaceInfo) => void
-  onPull: (id: string) => void
-  isPulling: boolean
-}) {
-  const t = useTranslations('aiCli.workspaces')
-  const tc = useTranslations('common')
-
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            {ws.type === 'github' ? (
-              <Github className="h-4 w-4 text-muted-foreground" />
-            ) : (
-              <FolderOpen className="h-4 w-4 text-muted-foreground" />
-            )}
-            <CardTitle className="text-sm">
-              {ws.name || ws.id.slice(0, 8)}
-            </CardTitle>
-          </div>
-          <Badge variant={ws.type === 'github' ? 'default' : 'secondary'}>
-            {t(`type.${ws.type}`)}
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-2">
-        <p className="text-xs text-muted-foreground truncate" title={ws.path}>
-          {ws.path}
-        </p>
-        {ws.type === 'github' && ws.repoUrl && (
-          <p className="text-xs text-muted-foreground truncate" title={ws.repoUrl}>
-            {ws.repoUrl}
-          </p>
-        )}
-        {ws.type === 'github' && ws.branch && (
-          <p className="text-xs text-muted-foreground">
-            {t('branch', { branch: ws.branch })}
-          </p>
-        )}
-        <div className="flex items-center justify-between text-xs text-muted-foreground">
-          <span>{formatDate(ws.createdAt)}</span>
-        </div>
-        <div className="flex justify-end gap-2 pt-1">
-          {ws.type === 'github' && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onPull(ws.id)}
-              disabled={isPulling}
-            >
-              {isPulling ? (
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-              ) : (
-                <GitPullRequest className="mr-1 h-3 w-3" />
-              )}
-              {isPulling ? t('pulling') : t('actions.pull')}
-            </Button>
-          )}
-          <Button
-            variant="ghost"
-            size="sm"
-            className="text-destructive hover:text-destructive"
-            onClick={() => onDelete(ws)}
-          >
-            <Trash2 className="mr-1 h-3 w-3" />
-            {tc('delete')}
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
+type InstalledSkillsMap = Record<string, Array<{ name: string; skillDir: string }>>
 
-type WorkspaceType = 'local' | 'github'
+const EMPTY_SKILLS_MAP: InstalledSkillsMap = {}
 
 export default function WorkspacesPage() {
   const t = useTranslations('aiCli.workspaces')
@@ -138,23 +24,27 @@ export default function WorkspacesPage() {
 
   const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>([])
   const [loading, setLoading] = useState(true)
+  const [wsSkillsMap, setWsSkillsMap] = useState<Record<string, InstalledSkillsMap>>({})
   const [createDialogOpen, setCreateDialogOpen] = useState(false)
-  const [isCreating, setIsCreating] = useState(false)
   const [deleteTarget, setDeleteTarget] = useState<WorkspaceInfo | null>(null)
   const [pullingId, setPullingId] = useState<string | null>(null)
 
-  // Create form state
-  const [createType, setCreateType] = useState<WorkspaceType>('local')
-  const [createName, setCreateName] = useState('')
-  const [createLocalPath, setCreateLocalPath] = useState('')
-  const [createRepoUrl, setCreateRepoUrl] = useState('')
-  const [createBranch, setCreateBranch] = useState('')
-
   const loadWorkspaces = useCallback(async () => {
     setLoading(true)
     try {
       const data = await aiCliService.getWorkspaces()
       setWorkspaces(data)
+      const skillsEntries = await Promise.all(
+        data.map(async (ws) => {
+          try {
+            const skills = await skillService.listWorkspaceInstalled(ws.path)
+            return [ws.id, skills] as const
+          } catch {
+            return [ws.id, {} as InstalledSkillsMap] as const
+          }
+        }),
+      )
+      setWsSkillsMap(Object.fromEntries(skillsEntries))
     } catch {
       toast.error(t('toast.loadFailed'))
     } finally {
@@ -166,45 +56,6 @@ export default function WorkspacesPage() {
     loadWorkspaces()
   }, [loadWorkspaces])
 
-  const resetCreateForm = () => {
-    setCreateType('local')
-    setCreateName('')
-    setCreateLocalPath('')
-    setCreateRepoUrl('')
-    setCreateBranch('')
-  }
-
-  const handleCreate = async () => {
-    if (!createName.trim()) return
-    setIsCreating(true)
-    try {
-      if (createType === 'local') {
-        if (!createLocalPath.trim()) return
-        await aiCliService.createWorkspace({
-          type: 'local',
-          name: createName.trim(),
-          localPath: createLocalPath.trim(),
-        })
-      } else {
-        if (!createRepoUrl.trim() || !createBranch.trim()) return
-        await aiCliService.createWorkspace({
-          type: 'github',
-          name: createName.trim(),
-          repoUrl: createRepoUrl.trim(),
-          branch: createBranch.trim(),
-        })
-      }
-      setCreateDialogOpen(false)
-      resetCreateForm()
-      await loadWorkspaces()
-      toast.success(t('toast.created'))
-    } catch {
-      toast.error(t('toast.createFailed'))
-    } finally {
-      setIsCreating(false)
-    }
-  }
-
   const handleDelete = async () => {
     if (!deleteTarget) return
     try {
@@ -229,11 +80,10 @@ export default function WorkspacesPage() {
     }
   }
 
-  const isCreateValid =
-    createName.trim() !== '' &&
-    (createType === 'local'
-      ? createLocalPath.trim() !== ''
-      : createRepoUrl.trim() !== '' && createBranch.trim() !== '')
+  const handleCreated = async () => {
+    await loadWorkspaces()
+    toast.success(t('toast.created'))
+  }
 
   const localCount = workspaces.filter((w) => w.type === 'local').length
   const githubCount = workspaces.filter((w) => w.type === 'github').length
@@ -253,10 +103,7 @@ export default function WorkspacesPage() {
           <Button
             variant="outline"
             size="sm"
-            onClick={() => {
-              resetCreateForm()
-              setCreateDialogOpen(true)
-            }}
+            onClick={() => setCreateDialogOpen(true)}
           >
             <Plus className="mr-1 h-4 w-4" />
             {t('actions.create')}
@@ -297,6 +144,7 @@ export default function WorkspacesPage() {
                   onDelete={setDeleteTarget}
                   onPull={handlePull}
                   isPulling={pullingId === ws.id}
+                  wsSkills={wsSkillsMap[ws.id] || EMPTY_SKILLS_MAP}
                 />
               ))}
             </div>
@@ -304,85 +152,12 @@ export default function WorkspacesPage() {
         </>
       )}
 
-      {/* Create Dialog */}
-      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('createDialog.title')}</DialogTitle>
-            <DialogDescription>{t('createDialog.description')}</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <Tabs
-              value={createType}
-              onValueChange={(v) => setCreateType(v as WorkspaceType)}
-            >
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="local">
-                  <FolderOpen className="mr-1 h-3 w-3" />
-                  {t('createDialog.typeLocal')}
-                </TabsTrigger>
-                <TabsTrigger value="github">
-                  <Github className="mr-1 h-3 w-3" />
-                  {t('createDialog.typeGithub')}
-                </TabsTrigger>
-              </TabsList>
-            </Tabs>
-
-            <div className="space-y-2">
-              <Label>{t('createDialog.nameLabel')}</Label>
-              <Input
-                placeholder={t('createDialog.namePlaceholder')}
-                value={createName}
-                onChange={(e) => setCreateName(e.target.value)}
-              />
-            </div>
-
-            {createType === 'local' ? (
-              <div className="space-y-2">
-                <Label>{t('createDialog.localPathLabel')}</Label>
-                <Input
-                  placeholder={t('createDialog.localPathPlaceholder')}
-                  value={createLocalPath}
-                  onChange={(e) => setCreateLocalPath(e.target.value)}
-                />
-              </div>
-            ) : (
-              <>
-                <div className="space-y-2">
-                  <Label>{t('createDialog.repoUrlLabel')}</Label>
-                  <Input
-                    placeholder={t('createDialog.repoUrlPlaceholder')}
-                    value={createRepoUrl}
-                    onChange={(e) => setCreateRepoUrl(e.target.value)}
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label>{t('createDialog.branchLabel')}</Label>
-                  <Input
-                    placeholder={t('createDialog.branchPlaceholder')}
-                    value={createBranch}
-                    onChange={(e) => setCreateBranch(e.target.value)}
-                  />
-                </div>
-              </>
-            )}
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>
-              {tc('cancel')}
-            </Button>
-            <Button
-              onClick={handleCreate}
-              disabled={isCreating || !isCreateValid}
-            >
-              {isCreating && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
-              {tc('create')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <CreateWorkspaceDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        onCreated={handleCreated}
+      />
 
-      {/* Delete Confirm */}
       <ConfirmDialog
         open={!!deleteTarget}
         onOpenChange={(open) => { if (!open) setDeleteTarget(null) }}

package/web/services/agent-approval.service.ts

@@ -0,0 +1,35 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export type ApprovalStatus = 'pending' | 'approved' | 'rejected'
+
+export interface AgentApproval {
+  id: string
+  runId: string
+  question: string
+  context: string | null
+  status: ApprovalStatus
+  response: string | null
+  respondedAt: string | null
+  createdAt: string
+}
+
+export const agentApprovalService = {
+  async listPending(): Promise<AgentApproval[]> {
+    const res = await api.get<ApiResponse<AgentApproval[]>>('/api/v1/ai/agent/approval/pending')
+    return res.data
+  },
+
+  async getApproval(id: string): Promise<AgentApproval> {
+    const res = await api.get<ApiResponse<AgentApproval>>(`/api/v1/ai/agent/approval/${id}`)
+    return res.data
+  },
+
+  async approve(id: string, response?: string): Promise<void> {
+    await api.post<ApiResponse<null>>(`/api/v1/ai/agent/approval/${id}/approve`, { response })
+  },
+
+  async reject(id: string, response?: string): Promise<void> {
+    await api.post<ApiResponse<null>>(`/api/v1/ai/agent/approval/${id}/reject`, { response })
+  },
+}

package/web/services/agent-gateway.service.ts

@@ -0,0 +1,41 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export interface AgentCapability {
+  type: string
+  name: string
+  description: string
+  isAvailable: boolean
+  metadata?: Record<string, unknown>
+}
+
+export interface ExecuteResult {
+  runId?: string
+  output?: string
+  status: string
+}
+
+interface ExecuteAgentOpts {
+  agentType: string
+  prompt: string
+  async?: boolean
+  maxRounds?: number
+  timeoutMs?: number
+}
+
+export const agentGatewayService = {
+  async listAgents(): Promise<AgentCapability[]> {
+    const res = await api.get<ApiResponse<AgentCapability[]>>('/api/v1/agents')
+    return res.data
+  },
+
+  async getAgent(type: string): Promise<AgentCapability> {
+    const res = await api.get<ApiResponse<AgentCapability>>(`/api/v1/agents/${type}`)
+    return res.data
+  },
+
+  async executeAgent(opts: ExecuteAgentOpts): Promise<ExecuteResult> {
+    const res = await api.post<ApiResponse<ExecuteResult>>('/api/v1/agents/execute', opts)
+    return res.data
+  },
+}

package/web/services/agent-run.service.ts

@@ -0,0 +1,48 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export type AgentRunStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
+
+export interface AgentRunRecord {
+  id: string
+  agentType: string
+  prompt: string
+  status: AgentRunStatus
+  output?: string
+  error?: string
+  rounds?: number
+  startedAt?: string
+  endedAt?: string
+  durationMs?: number
+  createdAt: string
+}
+
+export interface AgentRunEvent {
+  type: 'status' | 'output' | 'error' | 'done'
+  data: string
+}
+
+export const agentRunService = {
+  async listRuns(): Promise<AgentRunRecord[]> {
+    const res = await api.get<ApiResponse<AgentRunRecord[]>>('/api/v1/ai/agent/run')
+    return res.data
+  },
+
+  async getRun(id: string): Promise<AgentRunRecord> {
+    const res = await api.get<ApiResponse<AgentRunRecord>>(`/api/v1/ai/agent/run/${id}`)
+    return res.data
+  },
+
+  async cancelRun(id: string): Promise<void> {
+    await api.post<ApiResponse<null>>(`/api/v1/ai/agent/run/${id}/cancel`)
+  },
+
+  getEventsUrl(id: string): string {
+    const base = typeof window !== 'undefined' &&
+      (window.location.origin === 'http://tauri.localhost' ||
+        window.location.origin === 'tauri://localhost')
+      ? 'http://127.0.0.1:9988'
+      : ''
+    return `${base}/api/v1/ai/agent/run/${id}/events`
+  },
+}

package/web/services/agent-session.service.ts

@@ -0,0 +1,30 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export type SessionStatus = 'active' | 'closed'
+
+export interface AgentSession {
+  id: string
+  name: string | null
+  context: Record<string, unknown>
+  runIds: string[]
+  status: SessionStatus
+  createdAt: string
+  updatedAt: string
+}
+
+export const agentSessionService = {
+  async listSessions(): Promise<AgentSession[]> {
+    const res = await api.get<ApiResponse<AgentSession[]>>('/api/v1/ai/agent/session')
+    return res.data
+  },
+
+  async createSession(name?: string): Promise<AgentSession> {
+    const res = await api.post<ApiResponse<AgentSession>>('/api/v1/ai/agent/session', { name })
+    return res.data
+  },
+
+  async closeSession(id: string): Promise<void> {
+    await api.post<ApiResponse<null>>(`/api/v1/ai/agent/session/${id}/close`)
+  },
+}

package/web/services/ai-cli-service.ts

@@ -5,6 +5,8 @@ export interface CliToolInfo {
   name: string
   displayName: string
   available: boolean
+  /** cli = spawns a local process; api = calls an HTTP API */
+  toolType: 'cli' | 'api'
   version?: string
   path?: string
   models?: string[]
@@ -24,6 +26,7 @@ function mapToolInfo(raw: Record<string, unknown>): CliToolInfo {
     name: raw.name as string,
     displayName: raw.displayName as string,
     available: (raw.isAvailable ?? raw.available) as boolean,
+    toolType: (raw.toolType as 'cli' | 'api') ?? 'cli',
     version: raw.version as string | undefined,
     path: (raw.executablePath ?? raw.path) as string | undefined,
     models: raw.models as string[] | undefined,
@@ -51,6 +54,7 @@ export interface WorkspaceInfo {
   id: string
   type: 'local' | 'github'
   name: string
+  description?: string
   path: string
   createdAt: string
   localPath?: string
@@ -61,11 +65,24 @@ export interface WorkspaceInfo {
 export interface CreateWorkspaceRequest {
   type: 'local' | 'github'
   name: string
+  description?: string
   localPath?: string
   repoUrl?: string
   branch?: string
 }
 
+export interface DetectedGitInfo {
+  isGitRepo: boolean
+  remoteUrl?: string
+  branch?: string
+}
+
+export interface DirEntry {
+  name: string
+  path: string
+  isDirectory: boolean
+}
+
 export const aiCliService = {
   async getTools(): Promise<CliToolInfo[]> {
     const res = await api.get<ApiResponse<Record<string, unknown>[]>>('/api/v1/ai-cli/tools')
@@ -126,4 +143,20 @@ export const aiCliService = {
       `/api/v1/ai-cli/workspaces/${id}/delete`,
     )
   },
+
+  async browseDir(dirPath: string): Promise<DirEntry[]> {
+    const res = await api.get<ApiResponse<DirEntry[]>>(
+      '/api/v1/ai-cli/browse-dir',
+      { params: { path: dirPath } },
+    )
+    return res.data
+  },
+
+  async detectGit(dirPath: string): Promise<DetectedGitInfo> {
+    const res = await api.post<ApiResponse<DetectedGitInfo>>(
+      '/api/v1/ai-cli/detect-git',
+      { path: dirPath },
+    )
+    return res.data
+  },
 }

package/web/services/external-agent.service.ts

@@ -0,0 +1,38 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export interface ExternalAgent {
+  id: string
+  agentId: string
+  name: string
+  description: string | null
+  endpoint: string
+  status: 'online' | 'offline'
+  lastHeartbeatAt: string | null
+  capabilities: string[] | null
+  createdAt: string
+}
+
+export interface RegisterAgentDto {
+  agentId: string
+  name: string
+  description?: string
+  endpoint: string
+  capabilities?: string[]
+}
+
+export const externalAgentService = {
+  async listAgents(): Promise<ExternalAgent[]> {
+    const res = await api.get<ApiResponse<ExternalAgent[]>>('/api/v1/agents/external')
+    return res.data
+  },
+
+  async registerAgent(dto: RegisterAgentDto): Promise<ExternalAgent> {
+    const res = await api.post<ApiResponse<ExternalAgent>>('/api/v1/agents/external/register', dto)
+    return res.data
+  },
+
+  async unregisterAgent(agentId: string): Promise<void> {
+    await api.post<ApiResponse<null>>('/api/v1/agents/external/unregister', { agentId })
+  },
+}

package/web/services/orchestrator.service.ts

@@ -0,0 +1,52 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export type OrchestratorStepStatus = 'pending' | 'running' | 'completed' | 'failed'
+export type OrchestratorPlanStatus = 'draft' | 'running' | 'completed' | 'failed'
+
+export interface OrchestratorStep {
+  stepId: string
+  agentType: string
+  prompt: string
+  dependsOn?: string[]
+  status: OrchestratorStepStatus
+  runId?: string
+  output?: string
+}
+
+export interface OrchestratorPlan {
+  id: string
+  goal: string
+  plan: OrchestratorStep[]
+  status: OrchestratorPlanStatus
+  result: string | null
+  stepsTotal: number
+  stepsDone: number
+  createdAt: string
+}
+
+export const orchestratorService = {
+  async createPlan(goal: string): Promise<OrchestratorPlan> {
+    const res = await api.post<ApiResponse<OrchestratorPlan>>('/api/v1/ai/orchestrator/plan', { goal })
+    return res.data
+  },
+
+  async executePlan(id: string): Promise<OrchestratorPlan> {
+    const res = await api.post<ApiResponse<OrchestratorPlan>>(`/api/v1/ai/orchestrator/plan/${id}/run`, {})
+    return res.data
+  },
+
+  async listPlans(): Promise<OrchestratorPlan[]> {
+    const res = await api.get<ApiResponse<OrchestratorPlan[]>>('/api/v1/ai/orchestrator/plan')
+    return res.data
+  },
+
+  async getPlan(id: string): Promise<OrchestratorPlan> {
+    const res = await api.get<ApiResponse<OrchestratorPlan>>(`/api/v1/ai/orchestrator/plan/${id}`)
+    return res.data
+  },
+
+  async submitFeedback(id: string, rating: number, comment?: string): Promise<void> {
+    await api.post<ApiResponse<null>>(`/api/v1/ai/orchestrator/plan/${id}/feedback`, { rating, comment })
+  },
+}