@genfeedai/workflow-ui 0.2.2 → 0.2.4

package/dist/{chunk-JT4Y5H3U.mjs → chunk-ZSITTZ4S.mjs}

@@ -1,59 +1,382 @@
-import { calculateWorkflowCost, formatCost } from './chunk-2JQSKIWR.mjs';
-import { useSettingsStore, useExecutionStore, useUIStore } from './chunk-LT3ZJJL6.mjs';
-import { useWorkflowStore } from './chunk-R727OFBR.mjs';
-import { X, CloudOff, Loader2, Cloud, Check, ChevronDown, SaveAll, Save, FolderOpen, Bug, LayoutGrid, Undo2, Redo2, Settings, AlertCircle, Minus, Plus, Square, Play, ChevronUp, PlayCircle, RotateCcw, DollarSign, MoreVertical } from 'lucide-react';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { calculateWorkflowCost, formatCost } from './chunk-MGLAKMDP.mjs';
+import { useExecutionStore, useUIStore, useSettingsStore } from './chunk-OJWVEEMM.mjs';
+import { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
+import { Minus, Plus, Square, Play, ChevronUp, PlayCircle, RotateCcw, DollarSign, MoreVertical, X, CloudOff, Loader2, Cloud, Check, ChevronDown, SaveAll, Save, FolderOpen, Bug, LayoutGrid, Undo2, Redo2, HelpCircle, Settings, AlertCircle } from 'lucide-react';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function SaveAsDialog({ isOpen, currentName, onSave, onClose }) {
-  const [name, setName] = useState("");
-  const inputRef = useRef(null);
-  useEffect(() => {
-    if (isOpen) {
-      setName(`${currentName} (copy)`);
-      setTimeout(() => inputRef.current?.select(), 0);
-    }
-  }, [isOpen, currentName]);
-  const handleSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-      const trimmed = name.trim();
-      if (trimmed) {
-        onSave(trimmed);
+var MIN_BATCH = 1;
+var MAX_BATCH = 10;
+function BottomBar() {
+  const [batchCount, setBatchCount] = useState(1);
+  const [currentBatchRun, setCurrentBatchRun] = useState(0);
+  const [isBatchRunning, setIsBatchRunning] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const batchCancelledRef = useRef(false);
+  const dropdownRef = useRef(null);
+  const isRunning = useExecutionStore((s) => s.isRunning);
+  const executeWorkflow = useExecutionStore((s) => s.executeWorkflow);
+  const executeSelectedNodes = useExecutionStore((s) => s.executeSelectedNodes);
+  const resumeFromFailed = useExecutionStore((s) => s.resumeFromFailed);
+  const canResumeFromFailed = useExecutionStore((s) => s.canResumeFromFailed);
+  const stopExecution = useExecutionStore((s) => s.stopExecution);
+  useExecutionStore((s) => s.lastFailedNodeId);
+  const selectedNodeIds = useWorkflowStore((s) => s.selectedNodeIds);
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const validateWorkflow = useWorkflowStore((s) => s.validateWorkflow);
+  const canRunWorkflow = useMemo(() => {
+    if (nodes.length === 0) return false;
+    const validation = validateWorkflow();
+    return validation.isValid;
+  }, [nodes, validateWorkflow]);
+  const hasSelection = selectedNodeIds.length > 0;
+  const showResume = canResumeFromFailed();
+  const decrementBatch = useCallback(() => {
+    setBatchCount((prev) => Math.max(MIN_BATCH, prev - 1));
+  }, []);
+  const incrementBatch = useCallback(() => {
+    setBatchCount((prev) => Math.min(MAX_BATCH, prev + 1));
+  }, []);
+  const waitForExecutionEnd = useCallback(() => {
+    return new Promise((resolve) => {
+      if (!useExecutionStore.getState().isRunning) {
+        resolve();
+        return;
       }
-    },
-    [name, onSave]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        onClose();
+      const unsubscribe = useExecutionStore.subscribe((state) => {
+        if (!state.isRunning) {
+          unsubscribe();
+          resolve();
+        }
+      });
+    });
+  }, []);
+  const runBatch = useCallback(async () => {
+    batchCancelledRef.current = false;
+    setIsBatchRunning(true);
+    const accumulatedImages = /* @__PURE__ */ new Map();
+    for (let i = 0; i < batchCount; i++) {
+      if (batchCancelledRef.current) break;
+      setCurrentBatchRun(i + 1);
+      executeWorkflow();
+      await new Promise((r) => setTimeout(r, 50));
+      if (!useExecutionStore.getState().isRunning) break;
+      await waitForExecutionEnd();
+      if (useExecutionStore.getState().lastFailedNodeId) break;
+      const { nodes: currentNodes, updateNodeData } = useWorkflowStore.getState();
+      for (const node of currentNodes) {
+        if (node.type !== "imageGen") continue;
+        const nodeData = node.data;
+        const newImages = nodeData.outputImages;
+        if (!newImages?.length) continue;
+        const existing = accumulatedImages.get(node.id) || [];
+        const merged = [...existing, ...newImages];
+        accumulatedImages.set(node.id, merged);
+        updateNodeData(node.id, { outputImages: merged });
       }
-    },
-    [onClose]
-  );
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative z-10 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl",
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Save As" }),
+    }
+    setIsBatchRunning(false);
+    setCurrentBatchRun(0);
+  }, [batchCount, executeWorkflow, waitForExecutionEnd]);
+  const handlePrimaryClick = useCallback(() => {
+    if (isRunning || isBatchRunning) {
+      batchCancelledRef.current = true;
+      stopExecution();
+      return;
+    }
+    if (batchCount > 1) {
+      runBatch();
+    } else {
+      executeWorkflow();
+    }
+  }, [
+    isRunning,
+    isBatchRunning,
+    batchCount,
+    runBatch,
+    executeWorkflow,
+    stopExecution
+  ]);
+  const handleRunSelected = useCallback(() => {
+    if (!isRunning && hasSelection) {
+      executeSelectedNodes();
+      setDropdownOpen(false);
+    }
+  }, [isRunning, hasSelection, executeSelectedNodes]);
+  const handleResume = useCallback(() => {
+    if (canResumeFromFailed()) {
+      resumeFromFailed();
+      setDropdownOpen(false);
+    }
+  }, [canResumeFromFailed, resumeFromFailed]);
+  const isActive = isRunning || isBatchRunning;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed bottom-5 left-1/2 z-50 -translate-x-1/2",
+      onMouseDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md border border-neutral-700/80 bg-neutral-800/95 px-2 py-1 shadow-lg backdrop-blur-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "mr-0.5 text-[11px] text-neutral-400", children: "Batch" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: decrementBatch,
+              disabled: batchCount <= MIN_BATCH || isActive,
+              className: "flex h-5 w-5 items-center justify-center rounded text-neutral-400 transition hover:bg-neutral-700 hover:text-white disabled:opacity-40 disabled:hover:bg-transparent",
+              children: /* @__PURE__ */ jsx(Minus, { className: "h-2.5 w-2.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "w-4 text-center text-xs font-medium tabular-nums text-white", children: batchCount }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: incrementBatch,
+              disabled: batchCount >= MAX_BATCH || isActive,
+              className: "flex h-5 w-5 items-center justify-center rounded text-neutral-400 transition hover:bg-neutral-700 hover:text-white disabled:opacity-40 disabled:hover:bg-transparent",
+              children: /* @__PURE__ */ jsx(Plus, { className: "h-2.5 w-2.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-neutral-600" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handlePrimaryClick();
+              },
+              disabled: !isActive && !canRunWorkflow,
+              className: `flex h-7 items-center gap-1.5 rounded-l px-3 text-xs font-medium transition ${isActive ? "bg-red-500/90 text-white hover:bg-red-500" : canRunWorkflow ? "bg-white text-black hover:bg-neutral-200" : "bg-neutral-600 text-neutral-400"} disabled:cursor-not-allowed`,
+              children: isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5" }),
+                "Stop"
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5 fill-current" }),
+                "Run"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                setDropdownOpen((prev) => !prev);
+              },
+              disabled: isActive,
+              className: `flex h-7 items-center rounded-r border-l px-1.5 transition ${isActive ? "border-red-400/30 bg-red-500/90 text-white" : canRunWorkflow ? "border-neutral-300 bg-white text-black hover:bg-neutral-200" : "border-neutral-500 bg-neutral-600 text-neutral-400"} disabled:cursor-not-allowed`,
+              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          dropdownOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              "button",
+              "div",
               {
-                onClick: onClose,
-                className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
-                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                className: "fixed inset-0 z-40",
+                onClick: () => setDropdownOpen(false)
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: dropdownRef,
+                onClick: (e) => e.stopPropagation(),
+                onPointerDown: (e) => e.stopPropagation(),
+                className: "absolute bottom-full left-0 z-50 mb-1.5 min-w-[180px] rounded-md border border-neutral-700 bg-neutral-800 py-0.5 shadow-xl",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => {
+                        executeWorkflow();
+                        setDropdownOpen(false);
+                      },
+                      disabled: !canRunWorkflow,
+                      className: "flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-xs text-neutral-200 transition hover:bg-neutral-700 disabled:text-neutral-500 disabled:hover:bg-transparent",
+                      children: [
+                        /* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }),
+                        "Run Workflow"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: handleRunSelected,
+                      disabled: !hasSelection || isRunning,
+                      className: "flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-xs text-neutral-200 transition hover:bg-neutral-700 disabled:text-neutral-500 disabled:hover:bg-transparent",
+                      children: [
+                        /* @__PURE__ */ jsx(PlayCircle, { className: "h-3 w-3" }),
+                        "Run Selected (",
+                        selectedNodeIds.length,
+                        ")"
+                      ]
+                    }
+                  ),
+                  showResume && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { className: "mx-2 my-0.5 h-px bg-neutral-700" }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: handleResume,
+                        className: "flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-xs text-neutral-200 transition hover:bg-neutral-700",
+                        children: [
+                          /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
+                          "Resume from Failed"
+                        ]
+                      }
+                    )
+                  ] })
+                ]
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
-            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          ] })
+        ] }),
+        isBatchRunning && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-neutral-600" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] tabular-nums text-neutral-400", children: [
+            currentBatchRun,
+            "/",
+            batchCount
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function CostIndicator() {
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const isRunning = useExecutionStore((state) => state.isRunning);
+  const actualCost = useExecutionStore((state) => state.actualCost);
+  const { openModal } = useUIStore();
+  const breakdown = useMemo(() => calculateWorkflowCost(nodes), [nodes]);
+  const displayCost = isRunning && actualCost > 0 ? actualCost : breakdown.total;
+  if (breakdown.items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => openModal("cost"),
+      title: "View cost breakdown",
+      className: "flex items-center gap-1.5 rounded-md border border-[var(--border)] px-2 py-1 text-sm text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+      children: [
+        /* @__PURE__ */ jsx(DollarSign, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: formatCost(displayCost) }),
+        isRunning && actualCost > 0 && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" })
+      ]
+    }
+  );
+}
+function OverflowMenu({ items }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        title: "More options",
+        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
+        children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-1 min-w-[180px] rounded-lg border border-border bg-card py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          item.onClick?.();
+          setIsOpen(false);
+        },
+        className: "flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground transition hover:bg-secondary",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0", children: item.icon }),
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          item.external && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2197" })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+function SaveAsDialog({
+  isOpen,
+  currentName,
+  onSave,
+  onClose
+}) {
+  const [name, setName] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      setName(`${currentName} (copy)`);
+      setTimeout(() => inputRef.current?.select(), 0);
+    }
+  }, [isOpen, currentName]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const trimmed = name.trim();
+      if (trimmed) {
+        onSave(trimmed);
+      }
+    },
+    [name, onSave]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative z-10 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl",
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Save As" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsx(
                 "label",
                 {
@@ -102,18 +425,25 @@ function SaveAsDialog({ isOpen, currentName, onSave, onClose }) {
     )
   ] });
 }
-function SaveIndicator() {
-  const isDirty = useWorkflowStore((state) => state.isDirty);
-  const isSaving = useWorkflowStore((state) => state.isSaving);
+function SaveIndicator({
+  isDirty: isDirtyProp,
+  isSaving: isSavingProp,
+  variant = "default"
+}) {
+  const storeIsDirty = useWorkflowStore((state) => state.isDirty);
+  const storeIsSaving = useWorkflowStore((state) => state.isSaving);
   const autoSaveEnabled = useSettingsStore((state) => state.autoSaveEnabled);
   const toggleAutoSave = useSettingsStore((state) => state.toggleAutoSave);
+  const isDirty = isDirtyProp ?? storeIsDirty;
+  const isSaving = isSavingProp ?? storeIsSaving;
+  const isPill = variant === "pill";
   if (!autoSaveEnabled) {
     return /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: toggleAutoSave,
         title: "Click to enable auto-save",
-        className: "flex items-center gap-1.5 text-muted-foreground text-xs hover:text-foreground transition-colors",
+        className: "flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground",
         children: [
           /* @__PURE__ */ jsx(CloudOff, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx("span", { children: "Auto-save off" })
@@ -122,23 +452,35 @@ function SaveIndicator() {
     );
   }
   if (isSaving) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-blue-500 text-xs", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-      /* @__PURE__ */ jsx("span", { children: "Saving..." })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: isPill ? "flex items-center gap-1.5 rounded-full border border-blue-500/20 bg-blue-500/10 px-2.5 py-1 text-xs text-blue-400" : "flex items-center gap-1.5 text-xs text-blue-500",
+        children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+          /* @__PURE__ */ jsx("span", { children: "Saving..." })
+        ]
+      }
+    );
   }
   if (isDirty) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [
-      /* @__PURE__ */ jsx(Cloud, { className: "h-3.5 w-3.5" }),
-      /* @__PURE__ */ jsx("span", { children: "Unsaved" })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: isPill ? "flex items-center gap-1.5 rounded-full border border-border bg-secondary/40 px-2.5 py-1 text-xs text-muted-foreground" : "flex items-center gap-1.5 text-xs text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(Cloud, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { children: "Unsaved" })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: toggleAutoSave,
       title: "Click to disable auto-save",
-      className: "flex items-center gap-1.5 text-green-500 text-xs hover:text-green-400 transition-colors",
+      className: isPill ? "flex items-center gap-1.5 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-1 text-xs text-emerald-400 transition-colors hover:text-emerald-300" : "flex items-center gap-1.5 text-xs text-green-500 transition-colors hover:text-green-400",
       children: [
         /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }),
         /* @__PURE__ */ jsx("span", { children: "Saved" })
@@ -234,526 +576,245 @@ function Toolbar({
   fileMenuItemsPrepend,
   fileMenuItemsAppend,
   additionalMenus,
-  logoHref = "/",
-  logoSrc = "https://cdn.genfeed.ai/assets/branding/logo-white.png",
-  showSettings = true,
-  rightContent
-}) {
-  const { exportWorkflow, workflowName } = useWorkflowStore();
-  const { undo, redo } = useWorkflowStore.temporal.getState();
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-  const [showSaveAsDialog, setShowSaveAsDialog] = useState(false);
-  const validationErrors = useExecutionStore((state) => state.validationErrors);
-  const clearValidationErrors = useExecutionStore((state) => state.clearValidationErrors);
-  const { openModal } = useUIStore();
-  const debugMode = useSettingsStore((s) => s.debugMode);
-  const uniqueErrorMessages = useMemo(() => {
-    if (!validationErrors?.errors.length) return [];
-    return [...new Set(validationErrors.errors.map((e) => e.message))];
-  }, [validationErrors]);
-  useEffect(() => {
-    const unsubscribe = useWorkflowStore.temporal.subscribe((state) => {
-      setCanUndo(state.pastStates.length > 0);
-      setCanRedo(state.futureStates.length > 0);
-    });
-    const temporal = useWorkflowStore.temporal.getState();
-    setCanUndo(temporal.pastStates.length > 0);
-    setCanRedo(temporal.futureStates.length > 0);
-    return unsubscribe;
-  }, []);
-  const handleExport = useCallback(() => {
-    const workflow = exportWorkflow();
-    const blob = new Blob([JSON.stringify(workflow, null, 2)], {
-      type: "application/json"
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${workflow.name.toLowerCase().replace(/\s+/g, "-")}.json`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }, [exportWorkflow]);
-  const handleImport = useCallback(() => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".json";
-    input.onchange = (e) => {
-      const file = e.target.files?.[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        try {
-          const data = JSON.parse(event.target?.result);
-          if (!isValidWorkflow(data)) {
-            console.warn("[Toolbar] Invalid workflow file structure");
-            return;
-          }
-          useWorkflowStore.getState().loadWorkflow(data);
-        } catch {
-          console.warn("[Toolbar] Failed to parse workflow file");
-        }
-      };
-      reader.readAsText(file);
-    };
-    input.click();
-  }, []);
-  const handleSaveAs = useCallback(
-    (newName) => {
-      if (onSaveAs) {
-        onSaveAs(newName);
-      }
-      setShowSaveAsDialog(false);
-    },
-    [onSaveAs]
-  );
-  const fileMenuItems = useMemo(() => {
-    const items = [];
-    if (fileMenuItemsPrepend?.length) {
-      items.push(...fileMenuItemsPrepend);
-      items.push({ id: "separator-prepend", separator: true });
-    }
-    if (onSaveAs) {
-      items.push({
-        id: "saveAs",
-        label: "Save As...",
-        icon: /* @__PURE__ */ jsx(SaveAll, { className: "h-4 w-4" }),
-        onClick: () => setShowSaveAsDialog(true)
-      });
-      items.push({ id: "separator-saveas", separator: true });
-    }
-    items.push(
-      {
-        id: "export",
-        label: "Export Workflow",
-        icon: /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
-        onClick: handleExport
-      },
-      {
-        id: "import",
-        label: "Import Workflow",
-        icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }),
-        onClick: handleImport
-      }
-    );
-    if (fileMenuItemsAppend?.length) {
-      items.push({ id: "separator-append", separator: true });
-      items.push(...fileMenuItemsAppend);
-    }
-    return items;
-  }, [handleExport, handleImport, onSaveAs, fileMenuItemsPrepend, fileMenuItemsAppend]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-3 border-b border-border bg-card px-4", children: [
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: logoHref,
-        title: "Go to Dashboard",
-        className: "flex h-6 w-6 items-center justify-center hover:opacity-90 transition",
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: logoSrc,
-            alt: "Genfeed",
-            className: "h-6 w-6 object-contain"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-border" }),
-    /* @__PURE__ */ jsx(ToolbarDropdown, { label: "File", items: fileMenuItems }),
-    additionalMenus?.map((menu) => /* @__PURE__ */ jsx(ToolbarDropdown, { label: menu.label, items: menu.items }, menu.label)),
-    /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-border" }),
-    debugMode && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => openModal("settings"),
-        title: "Debug mode active - API calls are mocked",
-        className: "flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-sm text-amber-500 transition hover:bg-amber-500/20",
-        children: [
-          /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Debug" })
-        ]
-      }
-    ),
-    onAutoLayout && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => onAutoLayout("LR"),
-        title: "Auto-layout nodes",
-        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
-        children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => undo(),
-        disabled: !canUndo,
-        title: "Undo (Ctrl+Z)",
-        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-        children: /* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => redo(),
-        disabled: !canRedo,
-        title: "Redo (Ctrl+Shift+Z)",
-        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-        children: /* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(SaveIndicator, {}),
-    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-    rightContent,
-    showSettings && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => openModal("settings"),
-        title: "Settings",
-        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
-        children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
-      }
-    ),
-    uniqueErrorMessages.length > 0 && /* @__PURE__ */ jsx("div", { className: "fixed right-4 top-20 z-50 max-w-sm rounded-lg border border-destructive/30 bg-destructive/10 p-4 shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 shrink-0 text-destructive" }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium text-destructive", children: "Cannot run workflow" }),
-        /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
-          uniqueErrorMessages.slice(0, 5).map((message) => /* @__PURE__ */ jsx("li", { className: "text-xs text-destructive/80", children: message }, message)),
-          uniqueErrorMessages.length > 5 && /* @__PURE__ */ jsxs("li", { className: "text-xs text-destructive/60", children: [
-            "+",
-            uniqueErrorMessages.length - 5,
-            " more errors"
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: clearValidationErrors,
-          className: "flex h-7 w-7 items-center justify-center rounded-md text-destructive transition hover:bg-destructive/20",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      SaveAsDialog,
-      {
-        isOpen: showSaveAsDialog,
-        currentName: workflowName,
-        onSave: handleSaveAs,
-        onClose: () => setShowSaveAsDialog(false)
-      }
-    )
-  ] });
-}
-var MIN_BATCH = 1;
-var MAX_BATCH = 10;
-function BottomBar() {
-  const [batchCount, setBatchCount] = useState(1);
-  const [currentBatchRun, setCurrentBatchRun] = useState(0);
-  const [isBatchRunning, setIsBatchRunning] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const batchCancelledRef = useRef(false);
-  const dropdownRef = useRef(null);
-  const isRunning = useExecutionStore((s) => s.isRunning);
-  const executeWorkflow = useExecutionStore((s) => s.executeWorkflow);
-  const executeSelectedNodes = useExecutionStore((s) => s.executeSelectedNodes);
-  const resumeFromFailed = useExecutionStore((s) => s.resumeFromFailed);
-  const canResumeFromFailed = useExecutionStore((s) => s.canResumeFromFailed);
-  const stopExecution = useExecutionStore((s) => s.stopExecution);
-  useExecutionStore((s) => s.lastFailedNodeId);
-  const selectedNodeIds = useWorkflowStore((s) => s.selectedNodeIds);
-  const nodes = useWorkflowStore((s) => s.nodes);
-  const validateWorkflow = useWorkflowStore((s) => s.validateWorkflow);
-  const canRunWorkflow = useMemo(() => {
-    if (nodes.length === 0) return false;
-    const validation = validateWorkflow();
-    return validation.isValid;
-  }, [nodes, validateWorkflow]);
-  const hasSelection = selectedNodeIds.length > 0;
-  const showResume = canResumeFromFailed();
-  const decrementBatch = useCallback(() => {
-    setBatchCount((prev) => Math.max(MIN_BATCH, prev - 1));
-  }, []);
-  const incrementBatch = useCallback(() => {
-    setBatchCount((prev) => Math.min(MAX_BATCH, prev + 1));
-  }, []);
-  const waitForExecutionEnd = useCallback(() => {
-    return new Promise((resolve) => {
-      if (!useExecutionStore.getState().isRunning) {
-        resolve();
-        return;
-      }
-      const unsubscribe = useExecutionStore.subscribe((state) => {
-        if (!state.isRunning) {
-          unsubscribe();
-          resolve();
-        }
-      });
-    });
-  }, []);
-  const runBatch = useCallback(async () => {
-    batchCancelledRef.current = false;
-    setIsBatchRunning(true);
-    const accumulatedImages = /* @__PURE__ */ new Map();
-    for (let i = 0; i < batchCount; i++) {
-      if (batchCancelledRef.current) break;
-      setCurrentBatchRun(i + 1);
-      executeWorkflow();
-      await new Promise((r) => setTimeout(r, 50));
-      if (!useExecutionStore.getState().isRunning) break;
-      await waitForExecutionEnd();
-      if (useExecutionStore.getState().lastFailedNodeId) break;
-      const { nodes: currentNodes, updateNodeData } = useWorkflowStore.getState();
-      for (const node of currentNodes) {
-        if (node.type !== "imageGen") continue;
-        const nodeData = node.data;
-        const newImages = nodeData.outputImages;
-        if (!newImages?.length) continue;
-        const existing = accumulatedImages.get(node.id) || [];
-        const merged = [...existing, ...newImages];
-        accumulatedImages.set(node.id, merged);
-        updateNodeData(node.id, { outputImages: merged });
-      }
-    }
-    setIsBatchRunning(false);
-    setCurrentBatchRun(0);
-  }, [batchCount, executeWorkflow, waitForExecutionEnd]);
-  const handlePrimaryClick = useCallback(() => {
-    if (isRunning || isBatchRunning) {
-      batchCancelledRef.current = true;
-      stopExecution();
-      return;
-    }
-    if (batchCount > 1) {
-      runBatch();
-    } else {
-      executeWorkflow();
-    }
-  }, [isRunning, isBatchRunning, batchCount, runBatch, executeWorkflow, stopExecution]);
-  const handleRunSelected = useCallback(() => {
-    if (!isRunning && hasSelection) {
-      executeSelectedNodes();
-      setDropdownOpen(false);
-    }
-  }, [isRunning, hasSelection, executeSelectedNodes]);
-  const handleResume = useCallback(() => {
-    if (canResumeFromFailed()) {
-      resumeFromFailed();
-      setDropdownOpen(false);
-    }
-  }, [canResumeFromFailed, resumeFromFailed]);
-  const isActive = isRunning || isBatchRunning;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "fixed bottom-5 left-1/2 z-50 -translate-x-1/2",
-      onMouseDown: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md border border-neutral-700/80 bg-neutral-800/95 px-2 py-1 shadow-lg backdrop-blur-sm", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "mr-0.5 text-[11px] text-neutral-400", children: "Batch" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: decrementBatch,
-              disabled: batchCount <= MIN_BATCH || isActive,
-              className: "flex h-5 w-5 items-center justify-center rounded text-neutral-400 transition hover:bg-neutral-700 hover:text-white disabled:opacity-40 disabled:hover:bg-transparent",
-              children: /* @__PURE__ */ jsx(Minus, { className: "h-2.5 w-2.5" })
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "w-4 text-center text-xs font-medium tabular-nums text-white", children: batchCount }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: incrementBatch,
-              disabled: batchCount >= MAX_BATCH || isActive,
-              className: "flex h-5 w-5 items-center justify-center rounded text-neutral-400 transition hover:bg-neutral-700 hover:text-white disabled:opacity-40 disabled:hover:bg-transparent",
-              children: /* @__PURE__ */ jsx(Plus, { className: "h-2.5 w-2.5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-neutral-600" }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handlePrimaryClick();
-              },
-              disabled: !isActive && !canRunWorkflow,
-              className: `flex h-7 items-center gap-1.5 rounded-l px-3 text-xs font-medium transition ${isActive ? "bg-red-500/90 text-white hover:bg-red-500" : canRunWorkflow ? "bg-white text-black hover:bg-neutral-200" : "bg-neutral-600 text-neutral-400"} disabled:cursor-not-allowed`,
-              children: isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5" }),
-                "Stop"
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5 fill-current" }),
-                "Run"
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onPointerDown: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-              },
-              onClick: (e) => {
-                e.stopPropagation();
-                setDropdownOpen((prev) => !prev);
-              },
-              disabled: isActive,
-              className: `flex h-7 items-center rounded-r border-l px-1.5 transition ${isActive ? "border-red-400/30 bg-red-500/90 text-white" : canRunWorkflow ? "border-neutral-300 bg-white text-black hover:bg-neutral-200" : "border-neutral-500 bg-neutral-600 text-neutral-400"} disabled:cursor-not-allowed`,
-              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" })
-            }
-          ),
-          dropdownOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setDropdownOpen(false) }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                ref: dropdownRef,
-                onClick: (e) => e.stopPropagation(),
-                onPointerDown: (e) => e.stopPropagation(),
-                className: "absolute bottom-full left-0 z-50 mb-1.5 min-w-[180px] rounded-md border border-neutral-700 bg-neutral-800 py-0.5 shadow-xl",
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => {
-                        executeWorkflow();
-                        setDropdownOpen(false);
-                      },
-                      disabled: !canRunWorkflow,
-                      className: "flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-xs text-neutral-200 transition hover:bg-neutral-700 disabled:text-neutral-500 disabled:hover:bg-transparent",
-                      children: [
-                        /* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }),
-                        "Run Workflow"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: handleRunSelected,
-                      disabled: !hasSelection || isRunning,
-                      className: "flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-xs text-neutral-200 transition hover:bg-neutral-700 disabled:text-neutral-500 disabled:hover:bg-transparent",
-                      children: [
-                        /* @__PURE__ */ jsx(PlayCircle, { className: "h-3 w-3" }),
-                        "Run Selected (",
-                        selectedNodeIds.length,
-                        ")"
-                      ]
-                    }
-                  ),
-                  showResume && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("div", { className: "mx-2 my-0.5 h-px bg-neutral-700" }),
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        onClick: handleResume,
-                        className: "flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-xs text-neutral-200 transition hover:bg-neutral-700",
-                        children: [
-                          /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
-                          "Resume from Failed"
-                        ]
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          ] })
-        ] }),
-        isBatchRunning && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-neutral-600" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[11px] tabular-nums text-neutral-400", children: [
-            currentBatchRun,
-            "/",
-            batchCount
-          ] })
-        ] })
-      ] })
-    }
+  branding,
+  leftContent,
+  middleContent,
+  saveIndicator,
+  logoHref = "/",
+  logoSrc = "https://cdn.genfeed.ai/assets/branding/logo-white.png",
+  showSettings = true,
+  showShortcutHelp = false,
+  rightContent
+}) {
+  const { exportWorkflow, workflowName } = useWorkflowStore();
+  const { undo, redo } = useWorkflowStore.temporal.getState();
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [showSaveAsDialog, setShowSaveAsDialog] = useState(false);
+  const validationErrors = useExecutionStore((state) => state.validationErrors);
+  const clearValidationErrors = useExecutionStore(
+    (state) => state.clearValidationErrors
   );
-}
-function CostIndicator() {
-  const nodes = useWorkflowStore((state) => state.nodes);
-  const isRunning = useExecutionStore((state) => state.isRunning);
-  const actualCost = useExecutionStore((state) => state.actualCost);
   const { openModal } = useUIStore();
-  const breakdown = useMemo(() => calculateWorkflowCost(nodes), [nodes]);
-  const displayCost = isRunning && actualCost > 0 ? actualCost : breakdown.total;
-  if (breakdown.items.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: () => openModal("cost"),
-      title: "View cost breakdown",
-      className: "flex items-center gap-1.5 rounded-md border border-[var(--border)] px-2 py-1 text-sm text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
-      children: [
-        /* @__PURE__ */ jsx(DollarSign, { className: "h-3.5 w-3.5" }),
-        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: formatCost(displayCost) }),
-        isRunning && actualCost > 0 && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" })
-      ]
-    }
-  );
-}
-function OverflowMenu({ items }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const menuRef = useRef(null);
+  const debugMode = useSettingsStore((s) => s.debugMode);
+  const uniqueErrorMessages = useMemo(() => {
+    if (!validationErrors?.errors.length) return [];
+    return [...new Set(validationErrors.errors.map((e) => e.message))];
+  }, [validationErrors]);
   useEffect(() => {
-    if (!isOpen) return;
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
+    const unsubscribe = useWorkflowStore.temporal.subscribe((state) => {
+      setCanUndo(state.pastStates.length > 0);
+      setCanRedo(state.futureStates.length > 0);
+    });
+    const temporal = useWorkflowStore.temporal.getState();
+    setCanUndo(temporal.pastStates.length > 0);
+    setCanRedo(temporal.futureStates.length > 0);
+    return unsubscribe;
+  }, []);
+  const handleExport = useCallback(() => {
+    const workflow = exportWorkflow();
+    const blob = new Blob([JSON.stringify(workflow, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${workflow.name.toLowerCase().replace(/\s+/g, "-")}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [exportWorkflow]);
+  const handleImport = useCallback(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        try {
+          const data = JSON.parse(event.target?.result);
+          if (!isValidWorkflow(data)) {
+            console.warn("[Toolbar] Invalid workflow file structure");
+            return;
+          }
+          useWorkflowStore.getState().loadWorkflow(data);
+        } catch {
+          console.warn("[Toolbar] Failed to parse workflow file");
+        }
+      };
+      reader.readAsText(file);
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        setIsOpen(false);
+    input.click();
+  }, []);
+  const handleSaveAs = useCallback(
+    (newName) => {
+      if (onSaveAs) {
+        onSaveAs(newName);
       }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
-  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "relative", children: [
+      setShowSaveAsDialog(false);
+    },
+    [onSaveAs]
+  );
+  const fileMenuItems = useMemo(() => {
+    const items = [];
+    if (fileMenuItemsPrepend?.length) {
+      items.push(...fileMenuItemsPrepend);
+      items.push({ id: "separator-prepend", separator: true });
+    }
+    if (onSaveAs) {
+      items.push({
+        icon: /* @__PURE__ */ jsx(SaveAll, { className: "h-4 w-4" }),
+        id: "saveAs",
+        label: "Save As...",
+        onClick: () => setShowSaveAsDialog(true)
+      });
+      items.push({ id: "separator-saveas", separator: true });
+    }
+    items.push(
+      {
+        icon: /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
+        id: "export",
+        label: "Export Workflow",
+        onClick: handleExport
+      },
+      {
+        icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }),
+        id: "import",
+        label: "Import Workflow",
+        onClick: handleImport
+      }
+    );
+    if (fileMenuItemsAppend?.length) {
+      items.push({ id: "separator-append", separator: true });
+      items.push(...fileMenuItemsAppend);
+    }
+    return items;
+  }, [
+    handleExport,
+    handleImport,
+    onSaveAs,
+    fileMenuItemsPrepend,
+    fileMenuItemsAppend
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-3 border-b border-border bg-card px-4", children: [
+    branding ?? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: logoHref,
+        title: "Go to Dashboard",
+        className: "flex h-6 w-6 items-center justify-center transition hover:opacity-90",
+        children: /* @__PURE__ */ jsx("img", { src: logoSrc, alt: "Genfeed", className: "h-6 w-6 object-contain" })
+      }
+    ),
+    leftContent,
+    /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-border" }),
+    /* @__PURE__ */ jsx(ToolbarDropdown, { label: "File", items: fileMenuItems }),
+    additionalMenus?.map((menu) => /* @__PURE__ */ jsx(
+      ToolbarDropdown,
+      {
+        label: menu.label,
+        items: menu.items
+      },
+      menu.label
+    )),
+    /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-border" }),
+    debugMode && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => openModal("settings"),
+        title: "Debug mode active - API calls are mocked",
+        className: "flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-sm text-amber-500 transition hover:bg-amber-500/20",
+        children: [
+          /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Debug" })
+        ]
+      }
+    ),
+    onAutoLayout && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onAutoLayout("LR"),
+        title: "Auto-layout nodes",
+        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
+        children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => setIsOpen(!isOpen),
-        title: "More options",
+        onClick: () => undo(),
+        disabled: !canUndo,
+        title: "Undo (Ctrl+Z)",
+        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+        children: /* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => redo(),
+        disabled: !canRedo,
+        title: "Redo (Ctrl+Shift+Z)",
+        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+        children: /* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4" })
+      }
+    ),
+    saveIndicator ?? /* @__PURE__ */ jsx(SaveIndicator, {}),
+    middleContent,
+    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+    rightContent,
+    showShortcutHelp && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => openModal("shortcutHelp"),
+        title: "Keyboard shortcuts",
         className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
-        children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-1 min-w-[180px] rounded-lg border border-border bg-card py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsxs(
+    showSettings && /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => {
-          item.onClick?.();
-          setIsOpen(false);
-        },
-        className: "flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground transition hover:bg-secondary",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0", children: item.icon }),
-          /* @__PURE__ */ jsx("span", { children: item.label }),
-          item.external && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2197" })
-        ]
-      },
-      item.id
-    )) })
+        onClick: () => openModal("settings"),
+        title: "Settings",
+        className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground",
+        children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
+      }
+    ),
+    uniqueErrorMessages.length > 0 && /* @__PURE__ */ jsx("div", { className: "fixed right-4 top-20 z-50 max-w-sm rounded-lg border border-destructive/30 bg-destructive/10 p-4 shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium text-destructive", children: "Cannot run workflow" }),
+        /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+          uniqueErrorMessages.slice(0, 5).map((message) => /* @__PURE__ */ jsx("li", { className: "text-xs text-destructive/80", children: message }, message)),
+          uniqueErrorMessages.length > 5 && /* @__PURE__ */ jsxs("li", { className: "text-xs text-destructive/60", children: [
+            "+",
+            uniqueErrorMessages.length - 5,
+            " more errors"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: clearValidationErrors,
+          className: "flex h-7 w-7 items-center justify-center rounded-md text-destructive transition hover:bg-destructive/20",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      SaveAsDialog,
+      {
+        isOpen: showSaveAsDialog,
+        currentName: workflowName,
+        onSave: handleSaveAs,
+        onClose: () => setShowSaveAsDialog(false)
+      }
+    )
   ] });
 }