@octo-cyber/workflow 0.5.0

package/web/components/WorkflowDiff.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTranslations } from 'next-intl'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+
+interface WorkflowDiffProps {
+  originalJson: string
+  modifiedJson: string
+  className?: string
+}
+
+interface DiffResult {
+  nodesAdded: string[]
+  nodesRemoved: string[]
+  nodesModified: string[]
+  connectionsChanged: boolean
+}
+
+function computeDiff(originalJson: string, modifiedJson: string): DiffResult {
+  const result: DiffResult = {
+    nodesAdded: [],
+    nodesRemoved: [],
+    nodesModified: [],
+    connectionsChanged: false,
+  }
+
+  try {
+    const original = JSON.parse(originalJson) as Record<string, unknown>
+    const modified = JSON.parse(modifiedJson) as Record<string, unknown>
+
+    const origNodes = (original.nodes as Array<{ name: string }>) ?? []
+    const modNodes = (modified.nodes as Array<{ name: string }>) ?? []
+
+    const origNodeNames = new Set(origNodes.map((n) => n.name))
+    const modNodeNames = new Set(modNodes.map((n) => n.name))
+
+    for (const name of modNodeNames) {
+      if (!origNodeNames.has(name)) {
+        result.nodesAdded.push(name)
+      }
+    }
+
+    for (const name of origNodeNames) {
+      if (!modNodeNames.has(name)) {
+        result.nodesRemoved.push(name)
+      }
+    }
+
+    // Check for modified nodes (same name, different params)
+    for (const modNode of modNodes) {
+      const origNode = origNodes.find((n) => n.name === modNode.name)
+      if (origNode && JSON.stringify(origNode) !== JSON.stringify(modNode)) {
+        result.nodesModified.push(modNode.name)
+      }
+    }
+
+    // Compare connections
+    const origConn = JSON.stringify(original.connections ?? {})
+    const modConn = JSON.stringify(modified.connections ?? {})
+    result.connectionsChanged = origConn !== modConn
+  } catch {
+    // invalid JSON
+  }
+
+  return result
+}
+
+export function WorkflowDiff({
+  originalJson,
+  modifiedJson,
+  className,
+}: WorkflowDiffProps) {
+  const t = useTranslations('workflows.aiDesign')
+  const diff = useMemo(
+    () => computeDiff(originalJson, modifiedJson),
+    [originalJson, modifiedJson],
+  )
+
+  const hasChanges =
+    diff.nodesAdded.length > 0 ||
+    diff.nodesRemoved.length > 0 ||
+    diff.nodesModified.length > 0 ||
+    diff.connectionsChanged
+
+  if (!hasChanges) {
+    return (
+      <div className={`p-4 text-center text-sm text-muted-foreground ${className ?? ''}`}>
+        {t('noChanges')}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`space-y-3 ${className ?? ''}`}>
+      {diff.nodesAdded.length > 0 && (
+        <DiffSection
+          label={t('nodesAdded')}
+          items={diff.nodesAdded}
+          color="green"
+        />
+      )}
+      {diff.nodesRemoved.length > 0 && (
+        <DiffSection
+          label={t('nodesRemoved')}
+          items={diff.nodesRemoved}
+          color="red"
+        />
+      )}
+      {diff.nodesModified.length > 0 && (
+        <DiffSection
+          label={t('nodesModified')}
+          items={diff.nodesModified}
+          color="yellow"
+        />
+      )}
+      {diff.connectionsChanged && (
+        <div className="rounded-md border border-border p-2">
+          <Badge variant="outline" className="text-xs">
+            {t('connectionsChanged')}
+          </Badge>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function DiffSection({
+  label,
+  items,
+  color,
+}: {
+  label: string
+  items: string[]
+  color: 'green' | 'red' | 'yellow'
+}) {
+  const colorMap = {
+    green: 'border-green-500/30 bg-green-500/5',
+    red: 'border-red-500/30 bg-red-500/5',
+    yellow: 'border-yellow-500/30 bg-yellow-500/5',
+  }
+
+  const badgeMap = {
+    green: 'bg-green-500/10 text-green-600 dark:text-green-400',
+    red: 'bg-red-500/10 text-red-600 dark:text-red-400',
+    yellow: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
+  }
+
+  return (
+    <div className={`rounded-md border p-2 ${colorMap[color]}`}>
+      <p className="mb-1 text-xs font-medium text-muted-foreground">{label}</p>
+      <div className="flex flex-wrap gap-1">
+        {items.map((item) => (
+          <span key={item} className={`rounded px-1.5 py-0.5 text-xs ${badgeMap[color]}`}>
+            {item}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

package/web/components/WorkflowGraph.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  type Node,
+  type Edge,
+  Position,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+
+interface N8nNode {
+  name: string
+  type: string
+  position: [number, number]
+  parameters?: Record<string, unknown>
+}
+
+interface N8nConnection {
+  node: string
+  type: string
+  index: number
+}
+
+interface N8nWorkflowJson {
+  name?: string
+  nodes?: N8nNode[]
+  connections?: Record<string, { main?: N8nConnection[][] }>
+}
+
+interface WorkflowGraphProps {
+  workflowJson: string
+  className?: string
+  diffStatus?: Record<string, 'added' | 'removed' | 'modified'>
+}
+
+function getNodeColor(type: string): string {
+  if (type.includes('trigger') || type.includes('Trigger')) return '#e2e8f0'
+  if (type.includes('if') || type.includes('switch')) return '#fef3c7'
+  if (type.includes('http') || type.includes('Http')) return '#dbeafe'
+  if (type.includes('code') || type.includes('Code')) return '#e0e7ff'
+  if (type.includes('agent') || type.includes('Agent')) return '#ede9fe'
+  return '#f1f5f9'
+}
+
+function getDiffBorderColor(
+  status: 'added' | 'removed' | 'modified' | undefined,
+): string {
+  if (status === 'added') return '#22c55e'
+  if (status === 'removed') return '#ef4444'
+  if (status === 'modified') return '#eab308'
+  return '#94a3b8'
+}
+
+function parseWorkflowToFlow(
+  json: string,
+  diffStatus?: Record<string, 'added' | 'removed' | 'modified'>,
+): { nodes: Node[]; edges: Edge[] } {
+  let parsed: N8nWorkflowJson
+  try {
+    parsed = JSON.parse(json) as N8nWorkflowJson
+  } catch {
+    return { nodes: [], edges: [] }
+  }
+
+  const n8nNodes = parsed.nodes ?? []
+  const n8nConnections = parsed.connections ?? {}
+
+  const nodes: Node[] = n8nNodes.map((n) => {
+    const status = diffStatus?.[n.name]
+    const shortType = n.type.split('.').pop() ?? n.type
+
+    return {
+      id: n.name,
+      position: { x: n.position[0], y: n.position[1] },
+      data: { label: n.name, type: shortType },
+      style: {
+        background: getNodeColor(n.type),
+        border: `2px solid ${getDiffBorderColor(status)}`,
+        borderRadius: '8px',
+        padding: '8px 12px',
+        fontSize: '12px',
+        minWidth: '140px',
+      },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    }
+  })
+
+  const edges: Edge[] = []
+  for (const [sourceName, conn] of Object.entries(n8nConnections)) {
+    const mainOutputs = conn.main ?? []
+    for (let outputIdx = 0; outputIdx < mainOutputs.length; outputIdx++) {
+      const targets = mainOutputs[outputIdx] ?? []
+      for (const target of targets) {
+        const edgeId = `${sourceName}-${outputIdx}-${target.node}-${target.index}`
+        const sourceStatus = diffStatus?.[sourceName]
+        const targetStatus = diffStatus?.[target.node]
+        const isNew = sourceStatus === 'added' || targetStatus === 'added'
+        const isRemoved = sourceStatus === 'removed' || targetStatus === 'removed'
+
+        edges.push({
+          id: edgeId,
+          source: sourceName,
+          target: target.node,
+          type: 'smoothstep',
+          style: {
+            stroke: isNew ? '#22c55e' : isRemoved ? '#ef4444' : '#94a3b8',
+            strokeDasharray: isRemoved ? '5,5' : undefined,
+          },
+        })
+      }
+    }
+  }
+
+  return { nodes, edges }
+}
+
+export function WorkflowGraph({
+  workflowJson,
+  className,
+  diffStatus,
+}: WorkflowGraphProps) {
+  const { nodes, edges } = useMemo(
+    () => parseWorkflowToFlow(workflowJson, diffStatus),
+    [workflowJson, diffStatus],
+  )
+
+  if (nodes.length === 0) {
+    return (
+      <div className={`flex items-center justify-center text-sm text-muted-foreground ${className ?? ''}`}>
+        No workflow nodes to display
+      </div>
+    )
+  }
+
+  return (
+    <div className={className} style={{ minHeight: 300 }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        fitView
+        attributionPosition="bottom-left"
+        proOptions={{ hideAttribution: true }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+        panOnDrag
+        zoomOnScroll
+      >
+        <Background />
+        <Controls showInteractive={false} />
+      </ReactFlow>
+    </div>
+  )
+}

package/web/components/WorkflowPreviewPanel.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTranslations } from 'next-intl'
+import { GitCompare, Eye } from 'lucide-react'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@octo-cyber/ui/components/ui/tabs'
+import { WorkflowGraph } from './WorkflowGraph'
+import { WorkflowDiff } from './WorkflowDiff'
+
+interface WorkflowPreviewPanelProps {
+  /** The latest AI-generated workflow JSON */
+  generatedJson: string | null
+  /** The original/base workflow JSON (from session's initial state) */
+  originalJson: string | null
+  className?: string
+}
+
+/**
+ * Compute diff status map for WorkflowGraph overlay:
+ * compares original and modified node sets to determine added/removed/modified.
+ */
+function computeDiffStatus(
+  originalJson: string,
+  modifiedJson: string,
+): Record<string, 'added' | 'removed' | 'modified'> {
+  const status: Record<string, 'added' | 'removed' | 'modified'> = {}
+  try {
+    const original = JSON.parse(originalJson) as { nodes?: Array<{ name: string }> }
+    const modified = JSON.parse(modifiedJson) as { nodes?: Array<{ name: string }> }
+    const origNodes = original.nodes ?? []
+    const modNodes = modified.nodes ?? []
+    const origNames = new Set(origNodes.map((n) => n.name))
+    const modNames = new Set(modNodes.map((n) => n.name))
+
+    for (const name of modNames) {
+      if (!origNames.has(name)) {
+        status[name] = 'added'
+      }
+    }
+    for (const name of origNames) {
+      if (!modNames.has(name)) {
+        status[name] = 'removed'
+      }
+    }
+    // Check modified nodes
+    for (const modNode of modNodes) {
+      const origNode = origNodes.find((n) => n.name === modNode.name)
+      if (origNode && JSON.stringify(origNode) !== JSON.stringify(modNode)) {
+        status[modNode.name] = 'modified'
+      }
+    }
+  } catch {
+    // invalid JSON
+  }
+  return status
+}
+
+export function WorkflowPreviewPanel({
+  generatedJson,
+  originalJson,
+  className,
+}: WorkflowPreviewPanelProps) {
+  const t = useTranslations('workflows.aiDesign')
+
+  const hasOriginal = Boolean(originalJson)
+  const hasGenerated = Boolean(generatedJson)
+
+  const diffStatus = useMemo(() => {
+    if (!originalJson || !generatedJson) return undefined
+    return computeDiffStatus(originalJson, generatedJson)
+  }, [originalJson, generatedJson])
+
+  if (!hasGenerated) {
+    return (
+      <div className={`flex items-center justify-center border-t border-border bg-muted/20 text-sm text-muted-foreground ${className ?? ''}`}>
+        {t('noWorkflowPreview')}
+      </div>
+    )
+  }
+
+  // If no original (creating from scratch), just show the generated workflow
+  if (!hasOriginal) {
+    return (
+      <div className={`flex flex-col border-t border-border ${className ?? ''}`}>
+        <div className="flex items-center gap-2 border-b border-border px-3 py-1.5">
+          <Eye className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="text-xs font-medium">{t('workflowPreview')}</span>
+        </div>
+        <div className="flex-1">
+          <WorkflowGraph
+            workflowJson={generatedJson!}
+            className="h-full w-full"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Has both original and generated: show comparison tabs
+  return (
+    <div className={`flex flex-col border-t border-border ${className ?? ''}`}>
+      <Tabs defaultValue="comparison" className="flex flex-1 flex-col">
+        <div className="flex items-center border-b border-border px-3">
+          <TabsList className="h-8 bg-transparent">
+            <TabsTrigger value="comparison" className="h-7 text-xs">
+              <GitCompare className="mr-1 h-3.5 w-3.5" />
+              {t('comparison')}
+            </TabsTrigger>
+            <TabsTrigger value="original" className="h-7 text-xs">
+              {t('original')}
+            </TabsTrigger>
+            <TabsTrigger value="modified" className="h-7 text-xs">
+              {t('modified')}
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Diff summary badges */}
+          {diffStatus && (
+            <div className="ml-auto flex gap-1">
+              {Object.values(diffStatus).filter((s) => s === 'added').length > 0 && (
+                <Badge variant="outline" className="h-5 border-green-500/30 bg-green-500/5 text-[10px] text-green-600 dark:text-green-400">
+                  +{Object.values(diffStatus).filter((s) => s === 'added').length}
+                </Badge>
+              )}
+              {Object.values(diffStatus).filter((s) => s === 'removed').length > 0 && (
+                <Badge variant="outline" className="h-5 border-red-500/30 bg-red-500/5 text-[10px] text-red-600 dark:text-red-400">
+                  -{Object.values(diffStatus).filter((s) => s === 'removed').length}
+                </Badge>
+              )}
+              {Object.values(diffStatus).filter((s) => s === 'modified').length > 0 && (
+                <Badge variant="outline" className="h-5 border-yellow-500/30 bg-yellow-500/5 text-[10px] text-yellow-600 dark:text-yellow-400">
+                  ~{Object.values(diffStatus).filter((s) => s === 'modified').length}
+                </Badge>
+              )}
+            </div>
+          )}
+        </div>
+
+        <TabsContent value="comparison" className="flex-1 m-0">
+          <div className="grid h-full grid-cols-2 divide-x divide-border">
+            <div className="relative">
+              <span className="absolute left-2 top-1 z-10 text-[10px] font-medium text-muted-foreground">
+                {t('original')}
+              </span>
+              <WorkflowGraph
+                workflowJson={originalJson!}
+                className="h-full w-full"
+              />
+            </div>
+            <div className="relative">
+              <span className="absolute left-2 top-1 z-10 text-[10px] font-medium text-muted-foreground">
+                {t('modified')}
+              </span>
+              <WorkflowGraph
+                workflowJson={generatedJson!}
+                diffStatus={diffStatus}
+                className="h-full w-full"
+              />
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="original" className="flex-1 m-0">
+          <WorkflowGraph
+            workflowJson={originalJson!}
+            className="h-full w-full"
+          />
+        </TabsContent>
+
+        <TabsContent value="modified" className="flex-1 m-0">
+          <WorkflowGraph
+            workflowJson={generatedJson!}
+            diffStatus={diffStatus}
+            className="h-full w-full"
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/web/hooks/use-n8n-session.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+export type N8nErrorType = 'auth' | 'unavailable' | 'network' | 'unknown'
+
+interface N8nSessionError {
+  type: N8nErrorType
+  messageKey: string
+  messageParams?: Record<string, string>
+}
+
+function classifyError(status: number): N8nSessionError {
+  if (status === 401 || status === 403) {
+    return { type: 'auth', messageKey: 'n8nSession.authRequired' }
+  }
+  if (status === 502 || status === 503 || status === 504) {
+    return { type: 'unavailable', messageKey: 'n8nSession.unavailable' }
+  }
+  return { type: 'unknown', messageKey: 'n8nSession.sessionFailed', messageParams: { status: String(status) } }
+}
+
+export function useN8nSession() {
+  const [isReady, setIsReady] = useState(false)
+  const [error, setError] = useState<N8nSessionError | null>(null)
+
+  const ensureSession = useCallback(async () => {
+    try {
+      setError(null)
+      const res = await fetch('/api/n8n/session', {
+        method: 'POST',
+        credentials: 'include',
+      })
+
+      if (res.ok) {
+        setIsReady(true)
+      } else {
+        setError(classifyError(res.status))
+      }
+    } catch {
+      setError({ type: 'network', messageKey: 'n8nSession.networkError' })
+    }
+  }, [])
+
+  return { ensureSession, isReady, error }
+}

package/web/index.ts

@@ -0,0 +1,29 @@
+/**
+ * @octo-cyber/workflow — Frontend entry point.
+ *
+ * Re-exports page components and the frontend manifest.
+ */
+
+// Manifest
+export { workflowFrontendManifest } from './manifest';
+
+// i18n Messages
+export { default as workflowMessagesZhCN } from './messages/zh-CN.json';
+export { default as workflowMessagesEnUS } from './messages/en-US.json';
+
+// Pages
+export { default as WorkflowsPage } from './pages/WorkflowsPage';
+export { default as CredentialsPage } from './pages/CredentialsPage';
+export { default as ExecutionsPage } from './pages/ExecutionsPage';
+export { default as AiDesignPage } from './pages/AiDesignPage';
+
+// Components
+export { N8nIframe } from './components/N8nIframe';
+export { WorkflowDiff } from './components/WorkflowDiff';
+export { SessionPanel } from './components/SessionPanel';
+export { ChatPanel } from './components/ChatPanel';
+export { ToolPanel } from './components/ToolPanel';
+
+// Hooks
+export { useN8nSession } from './hooks/use-n8n-session';
+export type { N8nErrorType } from './hooks/use-n8n-session';

package/web/manifest.ts

@@ -0,0 +1,16 @@
+import type { IFrontendManifest } from '@octo-cyber/core';
+
+export const workflowFrontendManifest: IFrontendManifest = {
+  moduleId: 'workflow',
+  icon: 'Workflow',
+  color: 'indigo',
+  position: 'main',
+  titleKey: 'workflows.title',
+  descriptionKey: 'workflows.description',
+  pages: [
+    { path: '/workflows', titleKey: 'workflows.pages.list', icon: 'Workflow' },
+    { path: '/workflows/credentials', titleKey: 'workflows.pages.credentials', icon: 'Key' },
+    { path: '/workflows/executions', titleKey: 'workflows.pages.executions', icon: 'Play' },
+    { path: '/workflows/ai-design', titleKey: 'workflows.pages.aiDesign', icon: 'Sparkles' },
+  ],
+};

package/web/messages/en-US.json

@@ -0,0 +1,94 @@
+{
+  "workflows": {
+    "loading": "Loading workflow editor...",
+    "errors": {
+      "auth": {
+        "title": "Login Required"
+      },
+      "unavailable": {
+        "title": "n8n Service Unavailable",
+        "troubleshootTitle": "Troubleshooting steps:",
+        "step1": "Confirm the backend service is running (port 9988)",
+        "step2": "Confirm the n8n subprocess is running (port 5678)",
+        "step3": "Check the backend logs for n8n startup errors"
+      },
+      "network": {
+        "title": "Network Connection Failed"
+      },
+      "unknown": {
+        "title": "Connection Failed"
+      }
+    },
+    "aiDesign": {
+      "title": "AI Workflow Design",
+      "description": "Describe your automation needs and let AI generate workflow configurations",
+      "placeholder": "Describe the workflow you want to create, e.g. \"Send a Slack notification when a new GitHub issue is created\"",
+      "inputPlaceholder": "Describe your workflow requirements...",
+      "thinking": "AI is designing your workflow...",
+      "jsonPreview": "Workflow JSON",
+      "copied": "Copied to clipboard",
+      "requestFailed": "Failed to generate workflow, please try again",
+      "unknownError": "An unknown error occurred",
+      "generatedIn": "Generated in",
+      "sessions": "Sessions",
+      "noSessions": "No sessions yet. Click + to create one.",
+      "newSession": "New Design Session",
+      "sessionName": "Session Name",
+      "sessionNamePlaceholder": "e.g. Email notification workflow",
+      "baseWorkflow": "Base Workflow (optional)",
+      "selectWorkflow": "Select an existing n8n workflow",
+      "newFromScratch": "Create from scratch",
+      "create": "Create",
+      "cancel": "Cancel",
+      "sessionDeleted": "Session deleted",
+      "loadSessionsFailed": "Failed to load sessions",
+      "deleteSessionFailed": "Failed to delete session",
+      "createSessionFailed": "Failed to create session",
+      "tools": "Tools",
+      "versions": "Versions",
+      "apiDocs": "API Docs",
+      "aiTool": "AI Tool",
+      "model": "Model",
+      "defaultModel": "Default",
+      "unavailable": "N/A",
+      "selectSessionFirst": "Select a session to view version history",
+      "rollback": "Rollback",
+      "rollbackSuccess": "Rolled back successfully",
+      "rollbackFailed": "Rollback failed",
+      "apiDocsDesc": "Select API docs to include as context for the AI",
+      "estimatedTokens": "Estimated tokens",
+      "apply": "Apply",
+      "applyConfirmTitle": "Apply Workflow to n8n?",
+      "applyConfirmDesc": "This will deactivate the workflow, update it with the new JSON, and you can manually reactivate it afterwards.",
+      "applyConfirmNoWorkflow": "This session has no linked n8n workflow. Please create a session from an existing workflow to use the apply feature.",
+      "applyConfirm": "Apply",
+      "applySuccess": "Workflow applied to n8n successfully",
+      "applyFailed": "Failed to apply workflow to n8n",
+      "noLinkedWorkflow": "No linked n8n workflow. JSON has been saved.",
+      "noChanges": "No changes detected",
+      "nodesAdded": "Nodes added",
+      "nodesRemoved": "Nodes removed",
+      "nodesModified": "Nodes modified",
+      "connectionsChanged": "Connections changed",
+      "n8nWorkflows": "n8n Workflows",
+      "noN8nWorkflows": "No n8n workflows found",
+      "loadN8nWorkflowsFailed": "Failed to load n8n workflows",
+      "systemPrompt": "System Prompt",
+      "systemPromptDesc": "The system prompt used by the AI workflow designer. Updated on server startup.",
+      "loadPromptFailed": "Failed to load system prompt",
+      "close": "Close",
+      "workflowPreview": "Workflow Preview",
+      "comparison": "Comparison",
+      "original": "Original",
+      "modified": "Modified",
+      "noWorkflowPreview": "Generate a workflow to see the preview",
+      "viewPrompt": "View Prompt"
+    },
+    "n8nSession": {
+      "authRequired": "Please log in before using the workflow editor",
+      "unavailable": "n8n service is not running. Please check if the backend service is running properly",
+      "sessionFailed": "n8n session creation failed ({status})",
+      "networkError": "Unable to connect to the backend service. Please check your network connection"
+    }
+  }
+}