@octo-cyber/ai 0.5.0

package/web/pages/WorkspaceSection.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+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 { 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 { aiCliService } from '../services/ai-cli-service'
+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')
+
+  const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [createDialogOpen, setCreateDialogOpen] = useState(false)
+  const [newWorkspaceName, setNewWorkspaceName] = useState('')
+  const [isCreating, setIsCreating] = useState(false)
+  const [isCleaning, setIsCleaning] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<WorkspaceInfo | null>(null)
+
+  const loadWorkspaces = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await aiCliService.getWorkspaces()
+      setWorkspaces(data)
+    } catch {
+      toast.error(t('toast.loadFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    loadWorkspaces()
+  }, [loadWorkspaces])
+
+  const handleCreatePersistent = async () => {
+    if (!newWorkspaceName.trim()) return
+    setIsCreating(true)
+    try {
+      await aiCliService.createWorkspace('persistent', newWorkspaceName.trim())
+      setCreateDialogOpen(false)
+      setNewWorkspaceName('')
+      await loadWorkspaces()
+      toast.success(t('toast.created'))
+    } catch {
+      toast.error(t('toast.createFailed'))
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    try {
+      await aiCliService.deleteWorkspace(deleteTarget.id)
+      setDeleteTarget(null)
+      await loadWorkspaces()
+      toast.success(t('toast.deleted'))
+    } catch {
+      toast.error(t('toast.deleteFailed'))
+    }
+  }
+
+  const handleCleanup = async () => {
+    setIsCleaning(true)
+    try {
+      const result = await aiCliService.cleanupWorkspaces()
+      toast.success(t('toast.cleaned', { count: result.cleaned }))
+      await loadWorkspaces()
+    } catch {
+      toast.error(t('toast.cleanFailed'))
+    } finally {
+      setIsCleaning(false)
+    }
+  }
+
+  const tempCount = workspaces.filter((w) => w.type === 'temp').length
+  const persistentCount = workspaces.filter((w) => w.type === 'persistent').length
+
+  return (
+    <div className="space-y-4">
+      <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>
+        </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" />
+            )}
+            {t('actions.cleanup')}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setNewWorkspaceName('')
+              setCreateDialogOpen(true)
+            }}
+          >
+            <Plus className="mr-1 h-3 w-3" />
+            {t('actions.create')}
+          </Button>
+          <Button variant="ghost" size="sm" onClick={loadWorkspaces} disabled={loading}>
+            <RefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
+          </Button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">{tc('loading')}</p>
+        </div>
+      ) : workspaces.length === 0 ? (
+        <div className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">{t('empty')}</p>
+        </div>
+      ) : (
+        <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>
+          ))}
+        </div>
+      )}
+
+      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('createDialog.title')}</DialogTitle>
+            <DialogDescription>{t('createDialog.description')}</DialogDescription>
+          </DialogHeader>
+          <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)}
+              />
+            </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}
+              {tc('create')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => { if (!open) setDeleteTarget(null) }}
+        title={tc('confirmDelete')}
+        description={t('deleteConfirm', { name: deleteTarget?.name || deleteTarget?.id || '' })}
+        onConfirm={handleDelete}
+        confirmText={tc('delete')}
+        variant="destructive"
+      />
+    </div>
+  )
+}

package/web/pages/WorkspacesPage.tsx

@@ -0,0 +1,397 @@
+'use client'
+
+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 { 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'
+
+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 WorkspaceType = 'local' | 'github'
+
+export default function WorkspacesPage() {
+  const t = useTranslations('aiCli.workspaces')
+  const tc = useTranslations('common')
+
+  const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  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)
+    } catch {
+      toast.error(t('toast.loadFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    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 {
+      await aiCliService.deleteWorkspace(deleteTarget.id)
+      setDeleteTarget(null)
+      await loadWorkspaces()
+      toast.success(t('toast.deleted'))
+    } catch {
+      toast.error(t('toast.deleteFailed'))
+    }
+  }
+
+  const handlePull = async (id: string) => {
+    setPullingId(id)
+    try {
+      await aiCliService.pullWorkspace(id)
+      toast.success(t('toast.pulled'))
+    } catch {
+      toast.error(t('toast.pullFailed'))
+    } finally {
+      setPullingId(null)
+    }
+  }
+
+  const isCreateValid =
+    createName.trim() !== '' &&
+    (createType === 'local'
+      ? createLocalPath.trim() !== ''
+      : createRepoUrl.trim() !== '' && createBranch.trim() !== '')
+
+  const localCount = workspaces.filter((w) => w.type === 'local').length
+  const githubCount = workspaces.filter((w) => w.type === 'github').length
+
+  const deleteDescription = deleteTarget
+    ? `${t('deleteConfirm', { name: deleteTarget.name || deleteTarget.id })} ${
+        deleteTarget.type === 'local'
+          ? t('deleteConfirmLocal')
+          : t('deleteConfirmGithub')
+      }`
+    : ''
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              resetCreateForm()
+              setCreateDialogOpen(true)
+            }}
+          >
+            <Plus className="mr-1 h-4 w-4" />
+            {t('actions.create')}
+          </Button>
+          <Button variant="outline" onClick={loadWorkspaces} disabled={loading}>
+            {loading ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="mr-2 h-4 w-4" />
+            )}
+            {tc('refresh')}
+          </Button>
+        </div>
+      </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', { local: localCount, github: githubCount })}
+            </span>
+          </div>
+
+          {workspaces.length === 0 ? (
+            <div className="flex items-center justify-center h-32">
+              <p className="text-muted-foreground">{t('empty')}</p>
+            </div>
+          ) : (
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {workspaces.map((ws) => (
+                <WorkspaceCard
+                  key={ws.id}
+                  ws={ws}
+                  onDelete={setDeleteTarget}
+                  onPull={handlePull}
+                  isPulling={pullingId === ws.id}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* 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>
+
+      {/* Delete Confirm */}
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => { if (!open) setDeleteTarget(null) }}
+        title={tc('confirmDelete')}
+        description={deleteDescription}
+        onConfirm={handleDelete}
+        confirmText={tc('delete')}
+        variant="destructive"
+      />
+    </div>
+  )
+}