@octo-cyber/workflow 0.5.0

package/web/messages/zh-CN.json

@@ -0,0 +1,94 @@
+{
+  "workflows": {
+    "loading": "加载工作流编辑器...",
+    "errors": {
+      "auth": {
+        "title": "需要登录"
+      },
+      "unavailable": {
+        "title": "n8n 服务不可用",
+        "troubleshootTitle": "排查步骤：",
+        "step1": "确认后端服务已启动（端口 9988）",
+        "step2": "确认 n8n 子进程正常运行（端口 5678）",
+        "step3": "检查后端日志中是否有 n8n 启动错误"
+      },
+      "network": {
+        "title": "网络连接失败"
+      },
+      "unknown": {
+        "title": "连接失败"
+      }
+    },
+    "aiDesign": {
+      "title": "AI 工作流设计",
+      "description": "描述你的自动化需求，让 AI 生成工作流配置",
+      "placeholder": "描述你想创建的工作流，例如「当 GitHub 创建新 Issue 时发送 Slack 通知」",
+      "inputPlaceholder": "描述你的工作流需求...",
+      "thinking": "AI 正在设计你的工作流...",
+      "jsonPreview": "工作流 JSON",
+      "copied": "已复制到剪贴板",
+      "requestFailed": "生成工作流失败，请重试",
+      "unknownError": "发生未知错误",
+      "generatedIn": "生成耗时",
+      "sessions": "设计会话",
+      "noSessions": "暂无会话，点击 + 创建新会话",
+      "newSession": "新建设计会话",
+      "sessionName": "会话名称",
+      "sessionNamePlaceholder": "例如：邮件通知工作流",
+      "baseWorkflow": "基础工作流（可选）",
+      "selectWorkflow": "选择已有的 n8n 工作流",
+      "newFromScratch": "从零创建",
+      "create": "创建",
+      "cancel": "取消",
+      "sessionDeleted": "会话已删除",
+      "loadSessionsFailed": "加载会话列表失败",
+      "deleteSessionFailed": "删除会话失败",
+      "createSessionFailed": "创建会话失败",
+      "tools": "工具",
+      "versions": "版本",
+      "apiDocs": "API 文档",
+      "aiTool": "AI 工具",
+      "model": "模型",
+      "defaultModel": "默认",
+      "unavailable": "不可用",
+      "selectSessionFirst": "选择会话后查看版本历史",
+      "rollback": "回退",
+      "rollbackSuccess": "回退成功",
+      "rollbackFailed": "回退失败",
+      "apiDocsDesc": "选择 API 文档作为 AI 的上下文参考",
+      "estimatedTokens": "预估 tokens",
+      "apply": "应用",
+      "applyConfirmTitle": "应用工作流到 n8n？",
+      "applyConfirmDesc": "此操作将停用工作流并更新 JSON，之后你可以手动重新激活。",
+      "applyConfirmNoWorkflow": "此会话没有关联的 n8n 工作流。请从已有工作流创建会话以使用应用功能。",
+      "applyConfirm": "确认应用",
+      "applySuccess": "工作流已成功应用到 n8n",
+      "applyFailed": "应用工作流到 n8n 失败",
+      "noLinkedWorkflow": "没有关联的 n8n 工作流，JSON 已保存",
+      "noChanges": "未检测到变更",
+      "nodesAdded": "新增节点",
+      "nodesRemoved": "删除节点",
+      "nodesModified": "修改节点",
+      "connectionsChanged": "连线变更",
+      "n8nWorkflows": "n8n 工作流",
+      "noN8nWorkflows": "未找到 n8n 工作流",
+      "loadN8nWorkflowsFailed": "加载 n8n 工作流列表失败",
+      "systemPrompt": "系统提示词",
+      "systemPromptDesc": "AI 工作流设计器使用的系统提示词，每次服务启动时自动更新。",
+      "loadPromptFailed": "加载系统提示词失败",
+      "close": "关闭",
+      "workflowPreview": "工作流预览",
+      "comparison": "变更对比",
+      "original": "原始版本",
+      "modified": "修改版本",
+      "noWorkflowPreview": "生成工作流后可查看预览",
+      "viewPrompt": "查看提示词"
+    },
+    "n8nSession": {
+      "authRequired": "请先登录后再使用工作流编辑器",
+      "unavailable": "n8n 服务未启动，请检查后端服务是否正常运行",
+      "sessionFailed": "n8n 会话创建失败 ({status})",
+      "networkError": "无法连接到后端服务，请检查网络连接"
+    }
+  }
+}

package/web/pages/AiDesignPage.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import {
+  PanelRightClose,
+  PanelRightOpen,
+  PanelBottomClose,
+  PanelBottomOpen,
+} from 'lucide-react'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@octo-cyber/ui/components/ui/alert-dialog'
+import { SessionPanel } from '../components/SessionPanel'
+import { ChatPanel } from '../components/ChatPanel'
+import { ToolPanel } from '../components/ToolPanel'
+import { WorkflowPreviewPanel } from '../components/WorkflowPreviewPanel'
+import {
+  workflowAiService,
+  type AiWorkflowSession,
+  type AiWorkflowVersion,
+} from '../services/workflow-ai-service'
+
+export default function AiDesignPage() {
+  const t = useTranslations('workflows.aiDesign')
+
+  // Session state
+  const [activeSession, setActiveSession] = useState<AiWorkflowSession | null>(null)
+
+  // Tool settings
+  const [selectedTool, setSelectedTool] = useState('claude')
+  const [selectedModel, setSelectedModel] = useState('')
+  const [selectedDocs, setSelectedDocs] = useState<string[]>([])
+
+  // Panel visibility
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(true)
+  const [isPreviewOpen, setIsPreviewOpen] = useState(true)
+
+  // Version refresh trigger
+  const [versionRefreshKey, setVersionRefreshKey] = useState(0)
+
+  // Workflow preview state: latest generated JSON from chat
+  const [lastGeneratedJson, setLastGeneratedJson] = useState<string | null>(null)
+
+  // Apply confirmation
+  const [applyJson, setApplyJson] = useState<string | null>(null)
+  const [isApplying, setIsApplying] = useState(false)
+
+  const handleWorkflowGenerated = useCallback((workflowJson?: string) => {
+    setVersionRefreshKey((k) => k + 1)
+    if (workflowJson) {
+      setLastGeneratedJson(workflowJson)
+      // Auto-open preview when workflow is generated
+      setIsPreviewOpen(true)
+    }
+  }, [])
+
+  function handleSelectSession(session: AiWorkflowSession) {
+    setActiveSession(session)
+    setLastGeneratedJson(null)
+  }
+
+  async function handleRollback(versionNumber: number) {
+    if (!activeSession) return
+    try {
+      const updated = await workflowAiService.rollback(activeSession.id, versionNumber)
+      setActiveSession(updated)
+      setVersionRefreshKey((k) => k + 1)
+      toast.success(t('rollbackSuccess'))
+    } catch {
+      toast.error(t('rollbackFailed'))
+    }
+  }
+
+  function handleVersionSelect(version: AiWorkflowVersion) {
+    setLastGeneratedJson(version.workflowJson)
+    setIsPreviewOpen(true)
+  }
+
+  async function handleApplyConfirm() {
+    if (!activeSession || !applyJson) return
+    setIsApplying(true)
+    try {
+      if (activeSession.n8nWorkflowId) {
+        // Refresh session to get latest state, then apply
+        const freshSession = await workflowAiService.getSession(activeSession.id)
+        setActiveSession(freshSession)
+        await workflowAiService.applyToN8n(activeSession.id)
+        toast.success(t('applySuccess'))
+      } else {
+        toast.info(t('noLinkedWorkflow'))
+      }
+    } catch {
+      toast.error(t('applyFailed'))
+    } finally {
+      setIsApplying(false)
+      setApplyJson(null)
+    }
+  }
+
+  return (
+    <div className="flex h-[calc(100svh-2rem)] flex-col">
+      <PageHeader title={t('title')} description={t('description')}>
+        <div className="flex gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsPreviewOpen(!isPreviewOpen)}
+            title={t('workflowPreview')}
+          >
+            {isPreviewOpen ? (
+              <PanelBottomClose className="h-4 w-4" />
+            ) : (
+              <PanelBottomOpen className="h-4 w-4" />
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsRightPanelOpen(!isRightPanelOpen)}
+          >
+            {isRightPanelOpen ? (
+              <PanelRightClose className="h-4 w-4" />
+            ) : (
+              <PanelRightOpen className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </PageHeader>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left panel: Sessions + n8n Workflows */}
+        <SessionPanel
+          activeSessionId={activeSession?.id ?? null}
+          onSelectSession={handleSelectSession}
+          className="w-64 shrink-0"
+        />
+
+        {/* Center area: Chat + Preview */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {/* Chat panel */}
+          <ChatPanel
+            sessionId={activeSession?.id ?? null}
+            currentWorkflowJson={activeSession?.currentJson ?? null}
+            selectedTool={selectedTool}
+            selectedModel={selectedModel}
+            contextDocs={selectedDocs}
+            onWorkflowGenerated={handleWorkflowGenerated}
+            onApply={setApplyJson}
+            className={isPreviewOpen ? 'flex-1' : 'flex-1'}
+          />
+
+          {/* Workflow preview/comparison panel */}
+          {isPreviewOpen && (
+            <WorkflowPreviewPanel
+              generatedJson={lastGeneratedJson ?? activeSession?.currentJson ?? null}
+              originalJson={activeSession?.currentJson !== lastGeneratedJson ? activeSession?.currentJson ?? null : null}
+              className="h-[280px] shrink-0"
+            />
+          )}
+        </div>
+
+        {/* Right panel: Tools */}
+        {isRightPanelOpen && (
+          <ToolPanel
+            sessionId={activeSession?.id ?? null}
+            selectedTool={selectedTool}
+            selectedModel={selectedModel}
+            onToolChange={setSelectedTool}
+            onModelChange={setSelectedModel}
+            selectedDocs={selectedDocs}
+            onDocsChange={setSelectedDocs}
+            onRollback={handleRollback}
+            onVersionSelect={handleVersionSelect}
+            refreshKey={versionRefreshKey}
+            className="w-80 shrink-0"
+          />
+        )}
+      </div>
+
+      {/* Apply confirmation dialog */}
+      <AlertDialog open={applyJson !== null} onOpenChange={() => setApplyJson(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('applyConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {activeSession?.n8nWorkflowId
+                ? t('applyConfirmDesc')
+                : t('applyConfirmNoWorkflow')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleApplyConfirm}
+              disabled={isApplying || !activeSession?.n8nWorkflowId}
+            >
+              {t('applyConfirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/web/pages/CredentialsPage.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { N8nIframe } from '../components/N8nIframe'
+
+export default function CredentialsPage() {
+  return <N8nIframe subPath="credentials" />
+}

package/web/pages/ExecutionsPage.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { N8nIframe } from '../components/N8nIframe'
+
+export default function ExecutionsPage() {
+  return <N8nIframe subPath="executions" />
+}

package/web/pages/WorkflowsPage.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { N8nIframe } from '../components/N8nIframe'
+
+export default function WorkflowsPage() {
+  return <N8nIframe />
+}

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

@@ -0,0 +1,173 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+
+// ─── Request/Response Types ──────────────────────────────────
+
+export interface WorkflowDesignRequest {
+  prompt: string
+  currentWorkflowJson?: string
+  context?: string
+  tool?: string
+  model?: string
+  conversationHistory?: ConversationMessage[]
+  sessionId?: number
+}
+
+export interface ConversationMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+export interface WorkflowDesignResponse {
+  success: boolean
+  data?: {
+    explanation: string
+    workflowJson?: string
+    suggestions?: string[]
+    durationMs?: number
+  }
+  error?: string
+}
+
+export interface AiWorkflowSession {
+  id: number
+  n8nWorkflowId: string | null
+  workflowName: string
+  currentJson: string | null
+  currentVersion: number
+  status: 'DRAFT' | 'APPLIED'
+  createdAt: string
+  updatedAt: string
+}
+
+export interface AiWorkflowVersion {
+  id: number
+  sessionId: number
+  versionNumber: number
+  workflowJson: string
+  changeDescription: string | null
+  aiTool: string | null
+  aiModel: string | null
+  createdAt: string
+}
+
+export interface AiToolInfo {
+  name: string
+  displayName: string
+  isAvailable: boolean
+  models: string[]
+}
+
+export interface ApiDocModule {
+  moduleId: string
+  moduleName: string
+  docPath: string
+  contentLength: number
+}
+
+export interface N8nWorkflowSummary {
+  id: string
+  name: string
+  active: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+interface ApiOk<T> { success: boolean; data: T; error?: string }
+
+// ─── API Service ─────────────────────────────────────────────
+
+export const workflowAiService = {
+  // Design
+  async design(request: WorkflowDesignRequest): Promise<WorkflowDesignResponse> {
+    return api.post<WorkflowDesignResponse>('/api/v1/workflow-ai/design', request)
+  },
+
+  // Sessions
+  async listSessions(): Promise<AiWorkflowSession[]> {
+    const res = await api.get<ApiOk<AiWorkflowSession[]>>('/api/v1/workflow-ai/sessions')
+    return res.data
+  },
+
+  async createSession(params: {
+    workflowName: string
+    n8nWorkflowId?: string
+    initialJson?: string
+  }): Promise<AiWorkflowSession> {
+    const res = await api.post<ApiOk<AiWorkflowSession>>(
+      '/api/v1/workflow-ai/sessions',
+      params,
+    )
+    return res.data
+  },
+
+  async getSession(id: number): Promise<AiWorkflowSession> {
+    const res = await api.get<ApiOk<AiWorkflowSession>>(
+      `/api/v1/workflow-ai/sessions/${id}`,
+    )
+    return res.data
+  },
+
+  async deleteSession(id: number): Promise<void> {
+    await api.delete(`/api/v1/workflow-ai/sessions/${id}`)
+  },
+
+  // Versions
+  async listVersions(sessionId: number): Promise<AiWorkflowVersion[]> {
+    const res = await api.get<ApiOk<AiWorkflowVersion[]>>(
+      `/api/v1/workflow-ai/sessions/${sessionId}/versions`,
+    )
+    return res.data
+  },
+
+  async rollback(sessionId: number, versionNumber: number): Promise<AiWorkflowSession> {
+    const res = await api.post<ApiOk<AiWorkflowSession>>(
+      `/api/v1/workflow-ai/sessions/${sessionId}/rollback`,
+      { versionNumber },
+    )
+    return res.data
+  },
+
+  async applyToN8n(sessionId: number): Promise<void> {
+    await api.post(`/api/v1/workflow-ai/sessions/${sessionId}/apply`, {})
+  },
+
+  // Context
+  async listAiTools(): Promise<AiToolInfo[]> {
+    const res = await api.get<ApiOk<AiToolInfo[]>>('/api/v1/workflow-ai/context/ai-tools')
+    return res.data
+  },
+
+  async listApiDocs(): Promise<ApiDocModule[]> {
+    const res = await api.get<ApiOk<ApiDocModule[]>>('/api/v1/workflow-ai/context/api-docs')
+    return res.data
+  },
+
+  async getApiDocContent(moduleId: string): Promise<string> {
+    const res = await api.get<ApiOk<{ content: string }>>(
+      `/api/v1/workflow-ai/context/api-docs/${moduleId}`,
+    )
+    return res.data.content
+  },
+
+  async listN8nWorkflows(): Promise<N8nWorkflowSummary[]> {
+    const res = await api.get<ApiOk<N8nWorkflowSummary[]>>(
+      '/api/v1/workflow-ai/context/n8n-workflows',
+    )
+    return res.data
+  },
+
+  async getN8nWorkflow(id: string): Promise<Record<string, unknown>> {
+    const res = await api.get<ApiOk<Record<string, unknown>>>(
+      `/api/v1/workflow-ai/context/n8n-workflows/${id}`,
+    )
+    return res.data
+  },
+
+  // System Prompt
+  async getSystemPrompt(): Promise<string> {
+    const res = await api.get<ApiOk<{ prompt: string }>>(
+      '/api/v1/workflow-ai/system-prompt',
+    )
+    return res.data.prompt
+  },
+}