@octo-cyber/ai 0.5.5 → 0.5.6

package/web/pages/SessionsPage.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { RefreshCw, Loader2, Plus, X } 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 { Input } from '@octo-cyber/ui/components/ui/input'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@octo-cyber/ui/components/ui/table'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@octo-cyber/ui/components/ui/dialog'
+
+import { agentSessionService } from '../services/agent-session.service'
+import type { AgentSession, SessionStatus } from '../services/agent-session.service'
+
+function StatusBadge({ status }: { status: SessionStatus }) {
+  const t = useTranslations('aiTools.sessions')
+  return (
+    <Badge
+      variant="outline"
+      className={
+        status === 'active'
+          ? 'bg-green-500 hover:bg-green-500/80 text-white border-transparent'
+          : 'text-muted-foreground'
+      }
+    >
+      {t(status)}
+    </Badge>
+  )
+}
+
+function ContextPanel({ context }: { context: Record<string, unknown> }) {
+  const t = useTranslations('aiTools.sessions')
+  return (
+    <div className="rounded-lg border dark:border-zinc-700 bg-muted/30 dark:bg-zinc-800/30 p-4">
+      <p className="text-sm font-medium text-muted-foreground mb-2">{t('context')}</p>
+      <pre className="text-xs bg-muted dark:bg-zinc-900 rounded p-3 overflow-auto max-h-60 whitespace-pre-wrap">
+        {JSON.stringify(context, null, 2)}
+      </pre>
+    </div>
+  )
+}
+
+export default function SessionsPage() {
+  const t = useTranslations('aiTools.sessions')
+  const tc = useTranslations('common')
+
+  const [sessions, setSessions] = useState<AgentSession[]>([])
+  const [loading, setLoading] = useState(true)
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [closingId, setClosingId] = useState<string | null>(null)
+
+  const loadSessions = useCallback(async () => {
+    try {
+      const data = await agentSessionService.listSessions()
+      setSessions(data)
+    } catch {
+      toast.error(tc('loadDataFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [tc])
+
+  useEffect(() => {
+    loadSessions()
+  }, [loadSessions])
+
+  const handleCreate = async () => {
+    setCreating(true)
+    try {
+      await agentSessionService.createSession(newName.trim() || undefined)
+      toast.success(t('createSuccess'))
+      setDialogOpen(false)
+      setNewName('')
+      await loadSessions()
+    } catch {
+      toast.error(tc('operationFailed'))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleClose = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    setClosingId(id)
+    try {
+      await agentSessionService.closeSession(id)
+      toast.success(t('closeSuccess'))
+      await loadSessions()
+    } catch {
+      toast.error(tc('operationFailed'))
+    } finally {
+      setClosingId(null)
+    }
+  }
+
+  const toggleExpand = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={loadSessions} disabled={loading}>
+            {loading ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="mr-2 h-4 w-4" />
+            )}
+            {tc('refresh')}
+          </Button>
+          <Button onClick={() => setDialogOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t('newSession')}
+          </Button>
+        </div>
+      </PageHeader>
+
+      <div className="rounded-lg border dark:border-zinc-800">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[30%]">{t('name')}</TableHead>
+              <TableHead>{t('status')}</TableHead>
+              <TableHead>{t('runs')}</TableHead>
+              <TableHead>{t('createdAt')}</TableHead>
+              <TableHead className="text-right">{tc('actions')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                  {tc('loading')}
+                </TableCell>
+              </TableRow>
+            ) : sessions.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                  {t('noSessions')}
+                </TableCell>
+              </TableRow>
+            ) : (
+              sessions.map((session) => (
+                <>
+                  <TableRow
+                    key={session.id}
+                    className="cursor-pointer hover:bg-muted/50 dark:hover:bg-zinc-800/50"
+                    onClick={() => toggleExpand(session.id)}
+                  >
+                    <TableCell className="font-medium text-sm">
+                      {session.name ?? <span className="text-muted-foreground italic">{t('unnamed')}</span>}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge status={session.status} />
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {session.runIds.length}
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {new Date(session.createdAt).toLocaleString()}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {session.status === 'active' && (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={(e) => handleClose(session.id, e)}
+                          disabled={closingId === session.id}
+                          className="h-7 px-2 text-xs"
+                        >
+                          {closingId === session.id ? (
+                            <Loader2 className="h-3 w-3 animate-spin" />
+                          ) : (
+                            <X className="h-3 w-3" />
+                          )}
+                          <span className="ml-1">{t('close')}</span>
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                  {expandedId === session.id && (
+                    <TableRow key={`${session.id}-context`}>
+                      <TableCell colSpan={5} className="bg-muted/20 dark:bg-zinc-900/40 p-4">
+                        <ContextPanel context={session.context} />
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={(open) => { if (!creating) setDialogOpen(open) }}>
+        <DialogContent className="sm:max-w-md dark:bg-zinc-900 dark:border-zinc-700">
+          <DialogHeader>
+            <DialogTitle>{t('newSession')}</DialogTitle>
+            <DialogDescription>{t('sessionName')}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2 py-2">
+            <Label htmlFor="session-name">{t('name')}</Label>
+            <Input
+              id="session-name"
+              placeholder={t('namePlaceholder')}
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              disabled={creating}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleCreate() }}
+              className="dark:bg-zinc-800 dark:border-zinc-700"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={creating}>
+              {tc('cancel')}
+            </Button>
+            <Button onClick={handleCreate} disabled={creating}>
+              {creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {tc('create')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/web/pages/SkillMarketPage.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { Store } from 'lucide-react'
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Card, CardContent } from '@octo-cyber/ui/components/ui/card'
+
+export default function SkillMarketPage() {
+  const t = useTranslations('aiSkills')
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t('market.title')}
+        description={t('market.description')}
+      />
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-16 gap-4 text-muted-foreground">
+          <Store className="h-12 w-12 opacity-40" />
+          <p className="text-sm">{t('market.comingSoon')}</p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/web/pages/WorkspaceSection.tsx

@@ -3,46 +3,19 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useTranslations } from 'next-intl'
 import { toast } from 'sonner'
-import {
-  RefreshCw,
-  Trash2,
-  Plus,
-  FolderOpen,
-  Clock,
-  HardDrive,
-  Loader2,
-} from 'lucide-react'
+import { RefreshCw, Plus, Clock, Loader2 } from 'lucide-react'
 
 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,
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
 } from '@octo-cyber/ui/components/ui/dialog'
 import { aiCliService } from '../services/ai-cli-service'
+import { WorkspaceItem } from '../components/WorkspaceItem'
 import type { WorkspaceInfo } from '../services/ai-cli-service'
 
-function formatDate(dateStr: string): string {
-  try {
-    return new Date(dateStr).toLocaleString()
-  } catch {
-    return dateStr
-  }
-}
-
 export default function WorkspaceSection() {
   const t = useTranslations('aiCli.workspaces')
   const tc = useTranslations('common')
@@ -67,9 +40,7 @@ export default function WorkspaceSection() {
     }
   }, [t])
 
-  useEffect(() => {
-    loadWorkspaces()
-  }, [loadWorkspaces])
+  useEffect(() => { loadWorkspaces() }, [loadWorkspaces])
 
   const handleCreatePersistent = async () => {
     if (!newWorkspaceName.trim()) return
@@ -120,32 +91,14 @@ export default function WorkspaceSection() {
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-lg font-semibold">{t('title')}</h3>
-          <p className="text-sm text-muted-foreground">
-            {t('summary', { temp: tempCount, persistent: persistentCount })}
-          </p>
+          <p className="text-sm text-muted-foreground">{t('summary', { temp: tempCount, persistent: persistentCount })}</p>
         </div>
         <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleCleanup}
-            disabled={isCleaning}
-          >
-            {isCleaning ? (
-              <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-            ) : (
-              <Clock className="mr-1 h-3 w-3" />
-            )}
+          <Button variant="outline" size="sm" onClick={handleCleanup} disabled={isCleaning}>
+            {isCleaning ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <Clock className="mr-1 h-3 w-3" />}
             {t('actions.cleanup')}
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              setNewWorkspaceName('')
-              setCreateDialogOpen(true)
-            }}
-          >
+          <Button variant="outline" size="sm" onClick={() => { setNewWorkspaceName(''); setCreateDialogOpen(true) }}>
             <Plus className="mr-1 h-3 w-3" />
             {t('actions.create')}
           </Button>
@@ -166,49 +119,7 @@ export default function WorkspaceSection() {
       ) : (
         <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
           {workspaces.map((ws) => (
-            <Card key={ws.id}>
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    {ws.type === 'persistent' ? (
-                      <HardDrive 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 === 'persistent' ? 'default' : 'secondary'}>
-                    {ws.type === 'persistent' ? t('type.persistent') : t('type.temp')}
-                  </Badge>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-2">
-                <p className="text-xs text-muted-foreground truncate" title={ws.path}>
-                  {ws.path}
-                </p>
-                <div className="flex items-center justify-between text-xs text-muted-foreground">
-                  <span>{formatDate(ws.createdAt)}</span>
-                  {ws.expiresAt && (
-                    <span className="text-orange-500">
-                      {t('expiresAt', { time: formatDate(ws.expiresAt) })}
-                    </span>
-                  )}
-                </div>
-                <div className="flex justify-end pt-1">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-destructive hover:text-destructive"
-                    onClick={() => setDeleteTarget(ws)}
-                  >
-                    <Trash2 className="mr-1 h-3 w-3" />
-                    {tc('delete')}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
+            <WorkspaceItem key={ws.id} ws={ws} onDelete={setDeleteTarget} />
           ))}
         </div>
       )}
@@ -222,24 +133,13 @@ export default function WorkspaceSection() {
           <div className="space-y-4">
             <div className="space-y-2">
               <Label>{t('createDialog.nameLabel')}</Label>
-              <Input
-                placeholder={t('createDialog.namePlaceholder')}
-                value={newWorkspaceName}
-                onChange={(e) => setNewWorkspaceName(e.target.value)}
-              />
+              <Input placeholder={t('createDialog.namePlaceholder')} value={newWorkspaceName} onChange={(e) => setNewWorkspaceName(e.target.value)} />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>
-              {tc('cancel')}
-            </Button>
-            <Button
-              onClick={handleCreatePersistent}
-              disabled={isCreating || !newWorkspaceName.trim()}
-            >
-              {isCreating ? (
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-              ) : null}
+            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>{tc('cancel')}</Button>
+            <Button onClick={handleCreatePersistent} disabled={isCreating || !newWorkspaceName.trim()}>
+              {isCreating ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : null}
               {tc('create')}
             </Button>
           </DialogFooter>