@octo-cyber/workflow 0.5.0

package/web/components/SessionPanel.tsx

@@ -0,0 +1,301 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Workflow,
+  FileText,
+  ChevronDown,
+  ChevronRight,
+} from 'lucide-react'
+import { cn } from '@octo-cyber/ui/lib/utils'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Input } from '@octo-cyber/ui/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import {
+  workflowAiService,
+  type AiWorkflowSession,
+  type N8nWorkflowSummary,
+} from '../services/workflow-ai-service'
+
+interface SessionPanelProps {
+  activeSessionId: number | null
+  onSelectSession: (session: AiWorkflowSession) => void
+  className?: string
+}
+
+export function SessionPanel({
+  activeSessionId,
+  onSelectSession,
+  className,
+}: SessionPanelProps) {
+  const t = useTranslations('workflows.aiDesign')
+  const [sessions, setSessions] = useState<AiWorkflowSession[]>([])
+  const [n8nWorkflows, setN8nWorkflows] = useState<N8nWorkflowSummary[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [isN8nExpanded, setIsN8nExpanded] = useState(true)
+  const [isSessionsExpanded, setIsSessionsExpanded] = useState(true)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  async function loadData() {
+    try {
+      const [sessionsData, workflowsData] = await Promise.all([
+        workflowAiService.listSessions(),
+        workflowAiService.listN8nWorkflows().catch(() => []),
+      ])
+      setSessions(sessionsData)
+      setN8nWorkflows(workflowsData)
+    } catch {
+      toast.error(t('loadSessionsFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  async function handleDeleteSession(id: number, e: React.MouseEvent) {
+    e.stopPropagation()
+    try {
+      await workflowAiService.deleteSession(id)
+      setSessions((prev) => prev.filter((s) => s.id !== id))
+      toast.success(t('sessionDeleted'))
+    } catch {
+      toast.error(t('deleteSessionFailed'))
+    }
+  }
+
+  function handleSessionCreated(session: AiWorkflowSession) {
+    setSessions((prev) => [session, ...prev])
+    onSelectSession(session)
+    setIsDialogOpen(false)
+  }
+
+  async function handleN8nWorkflowClick(wf: N8nWorkflowSummary) {
+    // Check if a session already exists for this n8n workflow
+    const existing = sessions.find((s) => s.n8nWorkflowId === wf.id)
+    if (existing) {
+      onSelectSession(existing)
+      return
+    }
+    // Create a new session from this n8n workflow
+    try {
+      const fullWf = await workflowAiService.getN8nWorkflow(wf.id)
+      const session = await workflowAiService.createSession({
+        workflowName: wf.name,
+        n8nWorkflowId: wf.id,
+        initialJson: JSON.stringify(fullWf),
+      })
+      handleSessionCreated(session)
+    } catch {
+      toast.error(t('createSessionFailed'))
+    }
+  }
+
+  return (
+    <div className={cn('flex flex-col border-r border-border', className)}>
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-sm font-medium">{t('sessions')}</span>
+        <Button variant="ghost" size="sm" onClick={() => setIsDialogOpen(true)}>
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <>
+            {/* n8n Workflows Section */}
+            <SectionHeader
+              label={t('n8nWorkflows')}
+              count={n8nWorkflows.length}
+              isExpanded={isN8nExpanded}
+              onToggle={() => setIsN8nExpanded(!isN8nExpanded)}
+            />
+            {isN8nExpanded && (
+              n8nWorkflows.length === 0 ? (
+                <div className="px-3 py-3 text-center text-xs text-muted-foreground">
+                  {t('noN8nWorkflows')}
+                </div>
+              ) : (
+                n8nWorkflows.map((wf) => (
+                  <button
+                    key={`n8n-${wf.id}`}
+                    onClick={() => handleN8nWorkflowClick(wf)}
+                    className={cn(
+                      'group flex w-full items-start gap-2 border-b border-border/50 px-3 py-2 text-left transition-colors hover:bg-accent',
+                      sessions.some((s) => s.n8nWorkflowId === wf.id && activeSessionId === s.id) && 'bg-accent',
+                    )}
+                  >
+                    <Workflow className="mt-0.5 h-4 w-4 shrink-0 text-blue-500" />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm">{wf.name}</p>
+                      <p className="text-[10px] text-muted-foreground">
+                        {wf.active ? '● Active' : '○ Inactive'}
+                      </p>
+                    </div>
+                  </button>
+                ))
+              )
+            )}
+
+            {/* Design Sessions Section */}
+            <SectionHeader
+              label={t('sessions')}
+              count={sessions.length}
+              isExpanded={isSessionsExpanded}
+              onToggle={() => setIsSessionsExpanded(!isSessionsExpanded)}
+            />
+            {isSessionsExpanded && (
+              sessions.length === 0 ? (
+                <div className="px-3 py-3 text-center text-xs text-muted-foreground">
+                  {t('noSessions')}
+                </div>
+              ) : (
+                sessions.map((session) => (
+                  <button
+                    key={session.id}
+                    onClick={() => onSelectSession(session)}
+                    className={cn(
+                      'group flex w-full items-start gap-2 border-b border-border/50 px-3 py-2.5 text-left transition-colors hover:bg-accent',
+                      activeSessionId === session.id && 'bg-accent',
+                    )}
+                  >
+                    <FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-medium">{session.workflowName}</p>
+                      <p className="text-xs text-muted-foreground">
+                        v{session.currentVersion} · {session.status}
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100"
+                      onClick={(e) => handleDeleteSession(session.id, e)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </button>
+                ))
+              )
+            )}
+          </>
+        )}
+      </div>
+
+      <NewSessionDialog
+        isOpen={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        onCreated={handleSessionCreated}
+      />
+    </div>
+  )
+}
+
+// ─── Section Header ──────────────────────────────────────────
+
+function SectionHeader({
+  label,
+  count,
+  isExpanded,
+  onToggle,
+}: {
+  label: string
+  count: number
+  isExpanded: boolean
+  onToggle: () => void
+}) {
+  return (
+    <button
+      onClick={onToggle}
+      className="flex w-full items-center gap-1 bg-muted/30 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted/50"
+    >
+      {isExpanded ? (
+        <ChevronDown className="h-3 w-3" />
+      ) : (
+        <ChevronRight className="h-3 w-3" />
+      )}
+      {label}
+      <span className="ml-auto text-[10px]">({count})</span>
+    </button>
+  )
+}
+
+// ─── New Session Dialog ──────────────────────────────────────
+
+function NewSessionDialog({
+  isOpen,
+  onClose,
+  onCreated,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCreated: (session: AiWorkflowSession) => void
+}) {
+  const t = useTranslations('workflows.aiDesign')
+  const [name, setName] = useState('')
+  const [isCreating, setIsCreating] = useState(false)
+
+  async function handleCreate() {
+    if (!name.trim()) return
+    setIsCreating(true)
+    try {
+      const session = await workflowAiService.createSession({
+        workflowName: name.trim(),
+      })
+      onCreated(session)
+      setName('')
+    } catch {
+      toast.error(t('createSessionFailed'))
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('newSession')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div>
+            <label className="text-sm font-medium">{t('sessionName')}</label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t('sessionNamePlaceholder')}
+              className="mt-1"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleCreate()
+              }}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('cancel')}</Button>
+          <Button onClick={handleCreate} disabled={!name.trim() || isCreating}>
+            {isCreating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {t('create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/web/components/ToolPanel.tsx

@@ -0,0 +1,404 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import {
+  History,
+  FileText,
+  Cpu,
+  RotateCcw,
+  Loader2,
+  Eye,
+  ScrollText,
+} from 'lucide-react'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Checkbox } from '@octo-cyber/ui/components/ui/checkbox'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@octo-cyber/ui/components/ui/tabs'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import {
+  workflowAiService,
+  type AiWorkflowVersion,
+  type AiToolInfo,
+  type ApiDocModule,
+} from '../services/workflow-ai-service'
+
+interface ToolPanelProps {
+  sessionId: number | null
+  selectedTool: string
+  selectedModel: string
+  onToolChange: (tool: string) => void
+  onModelChange: (model: string) => void
+  selectedDocs: string[]
+  onDocsChange: (docs: string[]) => void
+  onRollback: (versionNumber: number) => void
+  onVersionSelect?: (version: AiWorkflowVersion) => void
+  refreshKey: number
+  className?: string
+}
+
+export function ToolPanel({
+  sessionId,
+  selectedTool,
+  selectedModel,
+  onToolChange,
+  onModelChange,
+  selectedDocs,
+  onDocsChange,
+  onRollback,
+  onVersionSelect,
+  refreshKey,
+  className,
+}: ToolPanelProps) {
+  const t = useTranslations('workflows.aiDesign')
+
+  return (
+    <div className={`flex flex-col border-l border-border ${className ?? ''}`}>
+      <Tabs defaultValue="tools" className="flex flex-1 flex-col">
+        <TabsList className="mx-2 mt-2 grid grid-cols-3">
+          <TabsTrigger value="tools" className="text-xs">
+            <Cpu className="mr-1 h-3.5 w-3.5" />
+            {t('tools')}
+          </TabsTrigger>
+          <TabsTrigger value="versions" className="text-xs">
+            <History className="mr-1 h-3.5 w-3.5" />
+            {t('versions')}
+          </TabsTrigger>
+          <TabsTrigger value="docs" className="text-xs">
+            <FileText className="mr-1 h-3.5 w-3.5" />
+            {t('apiDocs')}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="tools" className="flex-1 overflow-y-auto px-3 py-2">
+          <AiToolSelector
+            selectedTool={selectedTool}
+            selectedModel={selectedModel}
+            onToolChange={onToolChange}
+            onModelChange={onModelChange}
+          />
+        </TabsContent>
+
+        <TabsContent value="versions" className="flex-1 overflow-y-auto px-3 py-2">
+          <VersionHistory
+            sessionId={sessionId}
+            onRollback={onRollback}
+            onVersionSelect={onVersionSelect}
+            refreshKey={refreshKey}
+          />
+        </TabsContent>
+
+        <TabsContent value="docs" className="flex-1 overflow-y-auto px-3 py-2">
+          <ApiDocSelector
+            selectedDocs={selectedDocs}
+            onDocsChange={onDocsChange}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// ─── AI Tool Selector ────────────────────────────────────────
+
+function AiToolSelector({
+  selectedTool,
+  selectedModel,
+  onToolChange,
+  onModelChange,
+}: {
+  selectedTool: string
+  selectedModel: string
+  onToolChange: (tool: string) => void
+  onModelChange: (model: string) => void
+}) {
+  const t = useTranslations('workflows.aiDesign')
+  const [tools, setTools] = useState<AiToolInfo[]>([])
+  const [isPromptDialogOpen, setIsPromptDialogOpen] = useState(false)
+
+  useEffect(() => {
+    workflowAiService.listAiTools().then(setTools).catch(() => {})
+  }, [])
+
+  const activeTool = tools.find((tool) => tool.name === selectedTool)
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="text-xs font-medium text-muted-foreground">
+          {t('aiTool')}
+        </label>
+        <Select value={selectedTool} onValueChange={onToolChange}>
+          <SelectTrigger className="mt-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {tools.map((tool) => (
+              <SelectItem key={tool.name} value={tool.name} disabled={!tool.isAvailable}>
+                <div className="flex items-center gap-2">
+                  {tool.displayName}
+                  {!tool.isAvailable && (
+                    <Badge variant="secondary" className="text-[10px]">
+                      {t('unavailable')}
+                    </Badge>
+                  )}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {activeTool && activeTool.models.length > 0 && (
+        <div>
+          <label className="text-xs font-medium text-muted-foreground">
+            {t('model')}
+          </label>
+          <Select value={selectedModel} onValueChange={onModelChange}>
+            <SelectTrigger className="mt-1">
+              <SelectValue placeholder={t('defaultModel')} />
+            </SelectTrigger>
+            <SelectContent>
+              {activeTool.models.map((model) => (
+                <SelectItem key={model} value={model}>
+                  {model}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* System Prompt Viewer */}
+      <div className="border-t border-border pt-3">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full gap-2 text-xs"
+          onClick={() => setIsPromptDialogOpen(true)}
+        >
+          <ScrollText className="h-3.5 w-3.5" />
+          {t('viewPrompt')}
+        </Button>
+      </div>
+
+      <SystemPromptDialog
+        isOpen={isPromptDialogOpen}
+        onClose={() => setIsPromptDialogOpen(false)}
+      />
+    </div>
+  )
+}
+
+// ─── System Prompt Dialog ────────────────────────────────────
+
+function SystemPromptDialog({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) {
+  const t = useTranslations('workflows.aiDesign')
+  const [prompt, setPrompt] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!isOpen) return
+    setIsLoading(true)
+    workflowAiService
+      .getSystemPrompt()
+      .then(setPrompt)
+      .catch(() => toast.error(t('loadPromptFailed')))
+      .finally(() => setIsLoading(false))
+  }, [isOpen, t])
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>{t('systemPrompt')}</DialogTitle>
+        </DialogHeader>
+        <p className="text-xs text-muted-foreground">{t('systemPromptDesc')}</p>
+        <div className="max-h-[50vh] overflow-y-auto rounded-md border border-border bg-muted/30 p-3">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <pre className="whitespace-pre-wrap text-xs leading-relaxed">
+              {prompt}
+            </pre>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('close')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Version History ─────────────────────────────────────────
+
+function VersionHistory({
+  sessionId,
+  onRollback,
+  onVersionSelect,
+  refreshKey,
+}: {
+  sessionId: number | null
+  onRollback: (versionNumber: number) => void
+  onVersionSelect?: (version: AiWorkflowVersion) => void
+  refreshKey: number
+}) {
+  const t = useTranslations('workflows.aiDesign')
+  const [versions, setVersions] = useState<AiWorkflowVersion[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!sessionId) {
+      setVersions([])
+      return
+    }
+    setIsLoading(true)
+    workflowAiService
+      .listVersions(sessionId)
+      .then(setVersions)
+      .catch(() => {})
+      .finally(() => setIsLoading(false))
+  }, [sessionId, refreshKey])
+
+  if (!sessionId) {
+    return <p className="py-4 text-center text-sm text-muted-foreground">{t('selectSessionFirst')}</p>
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {versions.map((v) => (
+        <div
+          key={v.id}
+          className="rounded-md border border-border p-2.5 text-sm"
+        >
+          <div className="flex items-center justify-between">
+            <Badge variant="outline" className="text-xs">
+              v{v.versionNumber}
+            </Badge>
+            <div className="flex gap-1">
+              {onVersionSelect && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  onClick={() => onVersionSelect(v)}
+                >
+                  <Eye className="mr-1 h-3 w-3" />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() => onRollback(v.versionNumber)}
+              >
+                <RotateCcw className="mr-1 h-3 w-3" />
+                {t('rollback')}
+              </Button>
+            </div>
+          </div>
+          {v.changeDescription && (
+            <p className="mt-1 truncate text-xs text-muted-foreground">
+              {v.changeDescription}
+            </p>
+          )}
+          <div className="mt-1 flex items-center gap-2 text-[10px] text-muted-foreground">
+            {v.aiTool && <span>{v.aiTool}</span>}
+            <span>{new Date(v.createdAt).toLocaleString()}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ─── API Doc Selector ────────────────────────────────────────
+
+function ApiDocSelector({
+  selectedDocs,
+  onDocsChange,
+}: {
+  selectedDocs: string[]
+  onDocsChange: (docs: string[]) => void
+}) {
+  const t = useTranslations('workflows.aiDesign')
+  const [docs, setDocs] = useState<ApiDocModule[]>([])
+
+  useEffect(() => {
+    workflowAiService.listApiDocs().then(setDocs).catch(() => {})
+  }, [])
+
+  function toggleDoc(moduleId: string) {
+    if (selectedDocs.includes(moduleId)) {
+      onDocsChange(selectedDocs.filter((d) => d !== moduleId))
+    } else {
+      onDocsChange([...selectedDocs, moduleId])
+    }
+  }
+
+  const totalSize = docs
+    .filter((d) => selectedDocs.includes(d.moduleId))
+    .reduce((sum, d) => sum + d.contentLength, 0)
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">{t('apiDocsDesc')}</p>
+      {docs.map((doc) => (
+        <label
+          key={doc.moduleId}
+          className="flex cursor-pointer items-center gap-2 rounded-md p-1.5 hover:bg-accent"
+        >
+          <Checkbox
+            checked={selectedDocs.includes(doc.moduleId)}
+            onCheckedChange={() => toggleDoc(doc.moduleId)}
+          />
+          <span className="text-sm">{doc.moduleName}</span>
+          <span className="ml-auto text-xs text-muted-foreground">
+            {(doc.contentLength / 1024).toFixed(1)}KB
+          </span>
+        </label>
+      ))}
+      {selectedDocs.length > 0 && (
+        <p className="text-xs text-muted-foreground">
+          {t('estimatedTokens')}: ~{Math.round(totalSize / 4)}
+        </p>
+      )}
+    </div>
+  )
+}