From fbbc63f8651b8580bd7abd1315bd5a65129ec9a1 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 17 Mar 2026 18:04:30 +0800
Subject: [PATCH] fix: chain workflow with agent presets

---
 app/canvas/[id]/page.tsx                 | 66 +++++++++++++++++-------
 components/agents/AgentPresetPanel.tsx   | 10 +++-
 components/agents/AgentWorkflowPanel.tsx |  9 +++-
 lib/db/schema.ts                         |  1 +
 types/agent.ts                           |  1 +
 5 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index d9765aed9..847764d06 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -61,6 +61,7 @@ import {
   AgentWorkflowPanel,
   type AgentWorkflowInputs,
 } from "@/components/agents/AgentWorkflowPanel";
+import { AgentPresetPanel } from "@/components/agents/AgentPresetPanel";
 import { CanvasWorkspace } from "@/components/canvas";
 import { CanvasChatPanel } from "@/components/canvas/CanvasChatPanel";
 import { CanvasFileListPanel } from "@/components/canvas/CanvasFileListPanel";
@@ -159,6 +160,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
   const [workflowSelections, setWorkflowSelections] = useState<
     Partial<Record<AgentWorkflowStepKey, string>>
   >({});
+  const [selectedAgentPresetId, setSelectedAgentPresetId] = useState<string | null>(null);
   const [workflowHydrationSource, setWorkflowHydrationSource] = useState<
     "pending" | "project" | "local" | "empty"
   >("pending");
@@ -261,6 +263,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
         store: "",
       });
       setWorkflowSelections({});
+      setSelectedAgentPresetId(null);
       
       // 🆕 先清空当前画布状态，确保切换时不会显示旧数据
       useCanvasStore.getState().clearCanvas();
@@ -280,6 +283,9 @@ export default function CanvasEditorPage({ params }: PageProps) {
               store: String(persistedWorkflow.inputs?.store || "").trim(),
             });
             setWorkflowSelections(persistedWorkflow.selections || {});
+            setSelectedAgentPresetId(
+              String(persistedWorkflow.selectedAgentPresetId || "").trim() || null
+            );
             setWorkflowHydrationSource("project");
           } else {
             setWorkflowHydrationSource("empty");
@@ -329,13 +335,14 @@ export default function CanvasEditorPage({ params }: PageProps) {
         store: workflowInputs.store.trim(),
       },
       selections: workflowSelections,
+      selectedAgentPresetId: selectedAgentPresetId || null,
     };
 
     return {
       ...getCanvasState(),
       workflowState,
     };
-  }, [getCanvasState, workflowInputs, workflowSelections]);
+  }, [getCanvasState, workflowInputs, workflowSelections, selectedAgentPresetId]);
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -356,6 +363,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
         store: String(parsed.inputs?.store || "").trim(),
       });
       setWorkflowSelections(parsed.selections || {});
+      setSelectedAgentPresetId(String(parsed.selectedAgentPresetId || "").trim() || null);
     } catch (error) {
       console.warn("[Canvas] Failed to hydrate workflow state from localStorage:", error);
     } finally {
@@ -372,12 +380,19 @@ export default function CanvasEditorPage({ params }: PageProps) {
         JSON.stringify({
           inputs: workflowInputs,
           selections: workflowSelections,
+          selectedAgentPresetId,
         })
       );
     } catch (error) {
       console.warn("[Canvas] Failed to persist workflow state:", error);
     }
-  }, [workflowHydrationSource, workflowInputs, workflowSelections, workflowStorageKey]);
+  }, [
+    workflowHydrationSource,
+    workflowInputs,
+    workflowSelections,
+    workflowStorageKey,
+    selectedAgentPresetId,
+  ]);
 
   const persistCanvasState = useCallback(
     async (reason: "autosave" | "delete" | "beforeunload") => {
@@ -868,22 +883,35 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
           <div className="absolute inset-0 flex pt-[72px]">
             <div className="min-w-0 flex-1 border-r bg-white dark:bg-zinc-950">
-              <AgentWorkflowPanel
-                config={resolvedWorkflowUiConfig}
-                inputs={workflowInputs}
-                onInputsChange={setWorkflowInputs}
-                selections={workflowSelections}
-                onSelectionsChange={setWorkflowSelections}
-                onReset={() => {
-                  setWorkflowInputs({
-                    primarySku: "",
-                    secondarySku: "",
-                    brand: "",
-                    store: "",
-                  });
-                  setWorkflowSelections({});
-                }}
-              />
+              <div className="grid h-full grid-rows-[minmax(0,1fr)_minmax(0,1fr)]">
+                <div className="min-h-0 border-b">
+                  <AgentWorkflowPanel
+                    embedded
+                    config={resolvedWorkflowUiConfig}
+                    inputs={workflowInputs}
+                    onInputsChange={setWorkflowInputs}
+                    selections={workflowSelections}
+                    onSelectionsChange={setWorkflowSelections}
+                    onReset={() => {
+                      setWorkflowInputs({
+                        primarySku: "",
+                        secondarySku: "",
+                        brand: "",
+                        store: "",
+                      });
+                      setWorkflowSelections({});
+                      setSelectedAgentPresetId(null);
+                    }}
+                  />
+                </div>
+                <div className="min-h-0">
+                  <AgentPresetPanel
+                    embedded
+                    selectedPresetId={selectedAgentPresetId}
+                    onSelectPreset={setSelectedAgentPresetId}
+                  />
+                </div>
+              </div>
             </div>
 
             <div
@@ -894,7 +922,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                 <CanvasChatPanel
                   chatId={`canvas-${id}`}
                   onClose={() => {}}
-                  selectedAgentPresetId={null}
+                  selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
                   chatScope="agent"
                   workflowContext={workflowContext}
                 />
diff --git a/components/agents/AgentPresetPanel.tsx b/components/agents/AgentPresetPanel.tsx
index f233e76e8..3ccbd5694 100644
--- a/components/agents/AgentPresetPanel.tsx
+++ b/components/agents/AgentPresetPanel.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 import { Loader2, Plus, Sparkles } from "lucide-react";
 import { toast } from "sonner";
 import { fetcher } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -23,11 +24,13 @@ import { AgentPresetDialog } from "@/components/agents/AgentPresetDialog";
 interface AgentPresetPanelProps {
   selectedPresetId?: string | null;
   onSelectPreset: (presetId: string | null) => void;
+  embedded?: boolean;
 }
 
 export function AgentPresetPanel({
   selectedPresetId,
   onSelectPreset,
+  embedded = false,
 }: AgentPresetPanelProps) {
   const [keyword, setKeyword] = useState("");
   const [categoryFilters, setCategoryFilters] = useState({
@@ -149,7 +152,12 @@ export function AgentPresetPanel({
 
   return (
     <>
-      <div className="flex h-full flex-col border-r bg-white dark:bg-zinc-950">
+      <div
+        className={cn(
+          "flex h-full flex-col bg-white dark:bg-zinc-950",
+          embedded ? "" : "border-r"
+        )}
+      >
         <div className="border-b p-4">
           <div className="mb-3 flex items-center justify-between">
             <div>
diff --git a/components/agents/AgentWorkflowPanel.tsx b/components/agents/AgentWorkflowPanel.tsx
index 8d0692e7b..8fdaf14f7 100644
--- a/components/agents/AgentWorkflowPanel.tsx
+++ b/components/agents/AgentWorkflowPanel.tsx
@@ -33,6 +33,7 @@ interface AgentWorkflowPanelProps {
   selections: Partial<Record<AgentWorkflowStepKey, string>>;
   onSelectionsChange: (next: Partial<Record<AgentWorkflowStepKey, string>>) => void;
   onReset?: () => void;
+  embedded?: boolean;
 }
 
 function buildSelectionSummary(params: {
@@ -67,6 +68,7 @@ export function AgentWorkflowPanel({
   selections,
   onSelectionsChange,
   onReset,
+  embedded = false,
 }: AgentWorkflowPanelProps) {
   const resolvedConfig = useMemo(() => {
     const source = config?.steps?.length ? config : defaultAgentWorkflowUiConfig;
@@ -116,7 +118,12 @@ export function AgentWorkflowPanel({
   };
 
   return (
-    <div className="flex h-full flex-col border-r bg-white dark:bg-zinc-950">
+    <div
+      className={cn(
+        "flex h-full flex-col bg-white dark:bg-zinc-950",
+        embedded ? "" : "border-r"
+      )}
+    >
       <div className="border-b p-4">
         <div className="flex items-start justify-between gap-3">
           <div>
diff --git a/lib/db/schema.ts b/lib/db/schema.ts
index 1ee99a091..8d21aaf1f 100644
--- a/lib/db/schema.ts
+++ b/lib/db/schema.ts
@@ -609,6 +609,7 @@ export const canvasProject = pgTable("CanvasProject", {
         store?: string;
       };
       selections?: Record<string, string>;
+      selectedAgentPresetId?: string | null;
     };
   }>(),
   createdAt: timestamp("createdAt").notNull().defaultNow(),
diff --git a/types/agent.ts b/types/agent.ts
index 9f5578e44..fa9fcc089 100644
--- a/types/agent.ts
+++ b/types/agent.ts
@@ -69,6 +69,7 @@ export interface AgentWorkflowPersistedState {
     store: string;
   };
   selections: Partial<Record<AgentWorkflowStepKey, string>>;
+  selectedAgentPresetId?: string | null;
 }
 
 export interface AgentCategoryTreeConfig {