From 646c64396272fe85c08ac6bd11fe715222371394 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Mar 2026 04:18:54 +0000
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=95=AB?=
 =?UTF-8?q?=E5=B8=83=E5=84=B2=E5=AD=98=E3=80=81=E7=AF=84=E4=BE=8B=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E3=80=81=E9=87=8D=E8=A8=AD=E8=88=87=E6=B8=85=E7=A9=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 自動將畫布狀態儲存至 localStorage，重新載入後保留
- 新增初始範例流程（開始→知識庫/模板→LLM→條件判斷→結束/HTTP）
- 首次開啟時自動載入範例流程
- 工具列新增「範例」按鈕，可重設畫布到範例流程
- 工具列新增「清空」按鈕，清除所有節點只保留開始節點

https://claude.ai/code/session_0175xLAEKifqXsG4KxS1wXP4
---
 src/App.css                       |  20 ++++
 src/components/panels/Toolbar.tsx |  29 ++++-
 src/store/workflowStore.ts        | 181 +++++++++++++++++++++++++++++-
 3 files changed, 224 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7de163d..cd67fef 100644
--- a/src/App.css
+++ b/src/App.css
@@ -589,6 +589,26 @@
   background: #fef2f2 !important;
 }
 
+.reset-example-btn {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.reset-example-btn:hover {
+  color: #6366f1 !important;
+  background: #f5f3ff !important;
+}
+
+.clear-canvas-btn {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.clear-canvas-btn:hover {
+  color: #ef4444 !important;
+  background: #fef2f2 !important;
+}
+
 /* ====== React Flow Overrides ====== */
 .react-flow__panel {
   margin: 0 !important;
diff --git a/src/components/panels/Toolbar.tsx b/src/components/panels/Toolbar.tsx
index 8c548f6..01fba67 100644
--- a/src/components/panels/Toolbar.tsx
+++ b/src/components/panels/Toolbar.tsx
@@ -1,13 +1,27 @@
 import { useReactFlow } from '@xyflow/react';
-import { ZoomIn, ZoomOut, Maximize, Undo2, Redo2, PlayCircle, Loader2, RotateCcw } from 'lucide-react';
+import { ZoomIn, ZoomOut, Maximize, Undo2, Redo2, PlayCircle, Loader2, RotateCcw, BookOpen, Trash2 } from 'lucide-react';
 import { useWorkflowStore } from '../../store/workflowStore';
 
 export default function Toolbar() {
   const { zoomIn, zoomOut, fitView } = useReactFlow();
-  const { startExecution, clearExecution, execution, undo, redo, canUndo, canRedo } = useWorkflowStore();
+  const { startExecution, clearExecution, execution, undo, redo, canUndo, canRedo, resetToExample, clearCanvas } = useWorkflowStore();
   const isRunning = execution?.isRunning ?? false;
   const hasResults = execution !== null && !execution.isRunning;
 
+  const handleReset = () => {
+    if (confirm('確定要重設為範例流程嗎？目前的畫布內容將會被覆蓋。')) {
+      resetToExample();
+      setTimeout(() => fitView({ padding: 0.2 }), 50);
+    }
+  };
+
+  const handleClear = () => {
+    if (confirm('確定要清空畫布嗎？將只保留開始節點。')) {
+      clearCanvas();
+      setTimeout(() => fitView({ padding: 0.2 }), 50);
+    }
+  };
+
   return (
     <div className="toolbar">
       <div className="toolbar-group">
@@ -31,6 +45,17 @@ export default function Toolbar() {
         </button>
       </div>
       <div className="toolbar-divider" />
+      <div className="toolbar-group">
+        <button className="toolbar-btn reset-example-btn" title="重設為範例流程" onClick={handleReset}>
+          <BookOpen size={16} />
+          <span>範例</span>
+        </button>
+        <button className="toolbar-btn clear-canvas-btn" title="清空畫布" onClick={handleClear}>
+          <Trash2 size={16} />
+          <span>清空</span>
+        </button>
+      </div>
+      <div className="toolbar-divider" />
       <button
         className={`toolbar-btn run-btn ${isRunning ? 'running' : ''}`}
         title="執行工作流程"
diff --git a/src/store/workflowStore.ts b/src/store/workflowStore.ts
index 758fd8b..3d12ad1 100644
--- a/src/store/workflowStore.ts
+++ b/src/store/workflowStore.ts
@@ -47,9 +47,20 @@ interface WorkflowState {
   redo: () => void;
   canUndo: () => boolean;
   canRedo: () => boolean;
+  resetToExample: () => void;
+  clearCanvas: () => void;
 }
 
-const initialNodes: Node[] = [
+const STORAGE_KEY = 'workflow-canvas';
+
+const defaultEdgeStyle = {
+  type: 'smoothstep' as const,
+  animated: true,
+  markerEnd: { type: MarkerType.ArrowClosed, color: '#94a3b8' },
+  style: { stroke: '#94a3b8', strokeWidth: 2 },
+};
+
+const startOnlyNodes: Node[] = [
   {
     id: 'start-1',
     type: 'startNode',
@@ -64,7 +75,138 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges: Edge[] = [];
+const exampleNodes: Node[] = [
+  {
+    id: 'start-1',
+    type: 'startNode',
+    position: { x: 300, y: 50 },
+    data: {
+      label: '開始',
+      type: 'start',
+      icon: 'Play',
+      color: '#2563eb',
+      config: { input_variables: ['user_query'] },
+    },
+  },
+  {
+    id: 'knowledge-1',
+    type: 'knowledgeNode',
+    position: { x: 80, y: 200 },
+    data: {
+      label: '知識庫',
+      type: 'knowledge',
+      icon: 'Database',
+      color: '#0891b2',
+      description: '從知識庫中檢索資料',
+      config: { knowledge_base: '產品文件庫', top_k: 3, score_threshold: 0.5 },
+    },
+  },
+  {
+    id: 'template-1',
+    type: 'templateNode',
+    position: { x: 480, y: 200 },
+    data: {
+      label: '模板轉換',
+      type: 'template',
+      icon: 'FileText',
+      color: '#ca8a04',
+      description: '使用模板轉換資料',
+      config: { template: '根據以下資料回答使用者問題：\n\n{{context}}\n\n使用者問題：{{user_query}}' },
+    },
+  },
+  {
+    id: 'llm-1',
+    type: 'llmNode',
+    position: { x: 280, y: 380 },
+    data: {
+      label: 'LLM',
+      type: 'llm',
+      icon: 'MessageSquare',
+      color: '#7c3aed',
+      description: '呼叫大型語言模型',
+      config: { model: 'gpt-4', temperature: 0.7, system_prompt: '你是一個專業的客服助手', max_tokens: 2048 },
+    },
+  },
+  {
+    id: 'ifelse-1',
+    type: 'ifElseNode',
+    position: { x: 280, y: 550 },
+    data: {
+      label: '條件判斷',
+      type: 'ifElse',
+      icon: 'GitBranch',
+      color: '#16a34a',
+      description: 'IF/ELSE 條件分支',
+      config: { conditions: [{ variable: 'confidence', operator: 'gte', value: '0.8' }] },
+    },
+  },
+  {
+    id: 'end-1',
+    type: 'endNode',
+    position: { x: 120, y: 720 },
+    data: {
+      label: '結束（直接回覆）',
+      type: 'end',
+      icon: 'Square',
+      color: '#dc2626',
+      description: '工作流程的結束節點',
+      config: { output_type: 'text' },
+    },
+  },
+  {
+    id: 'http-1',
+    type: 'httpNode',
+    position: { x: 440, y: 720 },
+    data: {
+      label: 'HTTP 請求',
+      type: 'http',
+      icon: 'Globe',
+      color: '#0d9488',
+      description: '發送 HTTP 請求到外部 API',
+      config: { method: 'POST', url: 'https://api.example.com/escalate', headers: {}, body: '' },
+    },
+  },
+];
+
+const exampleEdges: Edge[] = [
+  { id: 'e-start-knowledge', source: 'start-1', target: 'knowledge-1', ...defaultEdgeStyle },
+  { id: 'e-start-template', source: 'start-1', target: 'template-1', ...defaultEdgeStyle },
+  { id: 'e-knowledge-llm', source: 'knowledge-1', target: 'llm-1', ...defaultEdgeStyle },
+  { id: 'e-template-llm', source: 'template-1', target: 'llm-1', ...defaultEdgeStyle },
+  { id: 'e-llm-ifelse', source: 'llm-1', target: 'ifelse-1', ...defaultEdgeStyle },
+  { id: 'e-ifelse-end', source: 'ifelse-1', target: 'end-1', sourceHandle: 'true', ...defaultEdgeStyle },
+  { id: 'e-ifelse-http', source: 'ifelse-1', target: 'http-1', sourceHandle: 'false', ...defaultEdgeStyle },
+];
+
+function saveToStorage(nodes: Node[], edges: Edge[]) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ nodes, edges }));
+  } catch {
+    // ignore quota errors
+  }
+}
+
+function loadFromStorage(): { nodes: Node[]; edges: Edge[] } | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const data = JSON.parse(raw);
+    if (Array.isArray(data.nodes) && Array.isArray(data.edges)) {
+      return data;
+    }
+  } catch {
+    // ignore parse errors
+  }
+  return null;
+}
+
+function getInitialState(): { nodes: Node[]; edges: Edge[] } {
+  const saved = loadFromStorage();
+  if (saved) return saved;
+  return { nodes: exampleNodes, edges: exampleEdges };
+}
+
+const initialState = getInitialState();
 
 export const useWorkflowStore = create<WorkflowState>((set, get) => {
   const pushHistory = () => {
@@ -75,8 +217,8 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => {
   };
 
   return {
-  nodes: initialNodes,
-  edges: initialEdges,
+  nodes: initialState.nodes,
+  edges: initialState.edges,
   selectedNodeId: null,
   execution: null,
   mobileSidebarOpen: false,
@@ -337,5 +479,36 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => {
   },
 
   setMobileSidebarOpen: (open) => set({ mobileSidebarOpen: open }),
+
+  resetToExample: () => {
+    set({
+      nodes: exampleNodes,
+      edges: exampleEdges,
+      selectedNodeId: null,
+      execution: null,
+      past: [],
+      future: [],
+    });
+    saveToStorage(exampleNodes, exampleEdges);
+  },
+
+  clearCanvas: () => {
+    set({
+      nodes: startOnlyNodes,
+      edges: [],
+      selectedNodeId: null,
+      execution: null,
+      past: [],
+      future: [],
+    });
+    saveToStorage(startOnlyNodes, []);
+  },
 };
 });
+
+// Auto-save to localStorage on nodes/edges changes
+useWorkflowStore.subscribe((state, prevState) => {
+  if (state.nodes !== prevState.nodes || state.edges !== prevState.edges) {
+    saveToStorage(state.nodes, state.edges);
+  }
+});

From 2ab6fa6dc30dae4cfc6a355858320dc2ee242308 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Mar 2026 05:21:57 +0000
Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=E5=B0=87=E7=AF=84=E4=BE=8B?=
 =?UTF-8?q?=E8=88=87=E6=B8=85=E7=A9=BA=E6=8C=89=E9=88=95=E5=BE=9E=20Toolba?=
 =?UTF-8?q?r=20=E7=A7=BB=E8=87=B3=20Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://claude.ai/code/session_0175xLAEKifqXsG4KxS1wXP4
---
 src/App.css                       | 25 +++++++++++++++----------
 src/App.tsx                       | 24 ++++++++++++++++++++++++
 src/components/panels/Toolbar.tsx | 29 ++---------------------------
 3 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/App.css b/src/App.css
index cd67fef..21249bf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -45,10 +45,14 @@
 
 .app-header-right {
   display: flex;
+  align-items: center;
   gap: 8px;
 }
 
 .header-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 13px;
@@ -56,6 +60,17 @@
   transition: all 0.15s ease;
 }
 
+.header-btn.ghost {
+  background: transparent;
+  color: #64748b;
+  padding: 6px 12px;
+}
+
+.header-btn.ghost:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
 .header-btn.secondary {
   background: #f1f5f9;
   color: #475569;
@@ -589,21 +604,11 @@
   background: #fef2f2 !important;
 }
 
-.reset-example-btn {
-  font-size: 12px;
-  font-weight: 500;
-}
-
 .reset-example-btn:hover {
   color: #6366f1 !important;
   background: #f5f3ff !important;
 }
 
-.clear-canvas-btn {
-  font-size: 12px;
-  font-weight: 500;
-}
-
 .clear-canvas-btn:hover {
   color: #ef4444 !important;
   background: #fef2f2 !important;
diff --git a/src/App.tsx b/src/App.tsx
index 7e682df..00c333a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,24 @@
 import { ReactFlowProvider } from '@xyflow/react';
+import { BookOpen, Trash2 } from 'lucide-react';
 import WorkflowCanvas from './components/WorkflowCanvas';
+import { useWorkflowStore } from './store/workflowStore';
 import './App.css';
 
 function App() {
+  const { resetToExample, clearCanvas } = useWorkflowStore();
+
+  const handleReset = () => {
+    if (confirm('確定要重設為範例流程嗎？目前的畫布內容將會被覆蓋。')) {
+      resetToExample();
+    }
+  };
+
+  const handleClear = () => {
+    if (confirm('確定要清空畫布嗎？將只保留開始節點。')) {
+      clearCanvas();
+    }
+  };
+
   return (
     <div className="app">
       <header className="app-header">
@@ -11,6 +27,14 @@ function App() {
           <h1 className="app-title">Workflow Builder</h1>
         </div>
         <div className="app-header-right">
+          <button className="header-btn ghost reset-example-btn" onClick={handleReset} title="重設為範例流程">
+            <BookOpen size={15} />
+            <span>範例</span>
+          </button>
+          <button className="header-btn ghost clear-canvas-btn" onClick={handleClear} title="清空畫布">
+            <Trash2 size={15} />
+            <span>清空</span>
+          </button>
           <button className="header-btn secondary">儲存草稿</button>
           <button className="header-btn primary">發布</button>
         </div>
diff --git a/src/components/panels/Toolbar.tsx b/src/components/panels/Toolbar.tsx
index 01fba67..8c548f6 100644
--- a/src/components/panels/Toolbar.tsx
+++ b/src/components/panels/Toolbar.tsx
@@ -1,27 +1,13 @@
 import { useReactFlow } from '@xyflow/react';
-import { ZoomIn, ZoomOut, Maximize, Undo2, Redo2, PlayCircle, Loader2, RotateCcw, BookOpen, Trash2 } from 'lucide-react';
+import { ZoomIn, ZoomOut, Maximize, Undo2, Redo2, PlayCircle, Loader2, RotateCcw } from 'lucide-react';
 import { useWorkflowStore } from '../../store/workflowStore';
 
 export default function Toolbar() {
   const { zoomIn, zoomOut, fitView } = useReactFlow();
-  const { startExecution, clearExecution, execution, undo, redo, canUndo, canRedo, resetToExample, clearCanvas } = useWorkflowStore();
+  const { startExecution, clearExecution, execution, undo, redo, canUndo, canRedo } = useWorkflowStore();
   const isRunning = execution?.isRunning ?? false;
   const hasResults = execution !== null && !execution.isRunning;
 
-  const handleReset = () => {
-    if (confirm('確定要重設為範例流程嗎？目前的畫布內容將會被覆蓋。')) {
-      resetToExample();
-      setTimeout(() => fitView({ padding: 0.2 }), 50);
-    }
-  };
-
-  const handleClear = () => {
-    if (confirm('確定要清空畫布嗎？將只保留開始節點。')) {
-      clearCanvas();
-      setTimeout(() => fitView({ padding: 0.2 }), 50);
-    }
-  };
-
   return (
     <div className="toolbar">
       <div className="toolbar-group">
@@ -45,17 +31,6 @@ export default function Toolbar() {
         </button>
       </div>
       <div className="toolbar-divider" />
-      <div className="toolbar-group">
-        <button className="toolbar-btn reset-example-btn" title="重設為範例流程" onClick={handleReset}>
-          <BookOpen size={16} />
-          <span>範例</span>
-        </button>
-        <button className="toolbar-btn clear-canvas-btn" title="清空畫布" onClick={handleClear}>
-          <Trash2 size={16} />
-          <span>清空</span>
-        </button>
-      </div>
-      <div className="toolbar-divider" />
       <button
         className={`toolbar-btn run-btn ${isRunning ? 'running' : ''}`}
         title="執行工作流程"

From cdad20520e6fac99e8371fc3b02d44761c552946 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Mar 2026 05:26:17 +0000
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E7=AF=84=E4=BE=8B=E8=88=87?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA=E6=8C=89=E9=88=95=E6=94=B9=E7=94=A8=20second?=
 =?UTF-8?q?ary=20=E6=A8=A3=E5=BC=8F=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=84=B2?=
 =?UTF-8?q?=E5=AD=98=E8=8D=89=E7=A8=BF=E6=8C=89=E9=88=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://claude.ai/code/session_0175xLAEKifqXsG4KxS1wXP4
---
 src/App.css | 21 ---------------------
 src/App.tsx |  5 ++---
 2 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/App.css b/src/App.css
index 21249bf..f5e2d49 100644
--- a/src/App.css
+++ b/src/App.css
@@ -60,17 +60,6 @@
   transition: all 0.15s ease;
 }
 
-.header-btn.ghost {
-  background: transparent;
-  color: #64748b;
-  padding: 6px 12px;
-}
-
-.header-btn.ghost:hover {
-  background: #f1f5f9;
-  color: #334155;
-}
-
 .header-btn.secondary {
   background: #f1f5f9;
   color: #475569;
@@ -604,16 +593,6 @@
   background: #fef2f2 !important;
 }
 
-.reset-example-btn:hover {
-  color: #6366f1 !important;
-  background: #f5f3ff !important;
-}
-
-.clear-canvas-btn:hover {
-  color: #ef4444 !important;
-  background: #fef2f2 !important;
-}
-
 /* ====== React Flow Overrides ====== */
 .react-flow__panel {
   margin: 0 !important;
diff --git a/src/App.tsx b/src/App.tsx
index 00c333a..759f4e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,15 +27,14 @@ function App() {
           <h1 className="app-title">Workflow Builder</h1>
         </div>
         <div className="app-header-right">
-          <button className="header-btn ghost reset-example-btn" onClick={handleReset} title="重設為範例流程">
+          <button className="header-btn secondary" onClick={handleReset} title="重設為範例流程">
             <BookOpen size={15} />
             <span>範例</span>
           </button>
-          <button className="header-btn ghost clear-canvas-btn" onClick={handleClear} title="清空畫布">
+          <button className="header-btn secondary" onClick={handleClear} title="清空畫布">
             <Trash2 size={15} />
             <span>清空</span>
           </button>
-          <button className="header-btn secondary">儲存草稿</button>
           <button className="header-btn primary">發布</button>
         </div>
       </header>

From 2b9d2cfdf6f04f8e6273838442f443fd2820e82d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Mar 2026 05:57:25 +0000
Subject: [PATCH 4/4] =?UTF-8?q?style:=20=E7=A7=BB=E9=99=A4=E7=AF=84?=
 =?UTF-8?q?=E4=BE=8B=E8=88=87=E6=B8=85=E7=A9=BA=E6=8C=89=E9=88=95=E7=9A=84?=
 =?UTF-8?q?=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://claude.ai/code/session_0175xLAEKifqXsG4KxS1wXP4
---
 src/App.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 759f4e0..c8a5d18 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { ReactFlowProvider } from '@xyflow/react';
-import { BookOpen, Trash2 } from 'lucide-react';
 import WorkflowCanvas from './components/WorkflowCanvas';
 import { useWorkflowStore } from './store/workflowStore';
 import './App.css';
@@ -27,14 +26,8 @@ function App() {
           <h1 className="app-title">Workflow Builder</h1>
         </div>
         <div className="app-header-right">
-          <button className="header-btn secondary" onClick={handleReset} title="重設為範例流程">
-            <BookOpen size={15} />
-            <span>範例</span>
-          </button>
-          <button className="header-btn secondary" onClick={handleClear} title="清空畫布">
-            <Trash2 size={15} />
-            <span>清空</span>
-          </button>
+          <button className="header-btn secondary" onClick={handleReset} title="重設為範例流程">範例</button>
+          <button className="header-btn secondary" onClick={handleClear} title="清空畫布">清空</button>
           <button className="header-btn primary">發布</button>
         </div>
       </header>