@burdenoff/fluidgrids-fe-sdk 2026.710.1 → 2026.713.1

package/dist/{WorkflowBuilder-YT72BTMW.js → WorkflowBuilder-DSPJ5UOG.js}

@@ -1,4 +1,4 @@
-export { WorkflowBuilder } from './chunk-V67QXGBK.js';
+export { WorkflowBuilder } from './chunk-LA7ELWEY.js';
 import './chunk-7VEOUEIN.js';
 import './chunk-BQXHJIER.js';
 import './chunk-UYPB5TWQ.js';
@@ -9,5 +9,5 @@ import './chunk-5BDQNSP3.js';
 import './chunk-WWU2O2SR.js';
 import './chunk-XQP33UJR.js';
 import './chunk-Z54K22LP.js';
-//# sourceMappingURL=WorkflowBuilder-YT72BTMW.js.map
-//# sourceMappingURL=WorkflowBuilder-YT72BTMW.js.map
+//# sourceMappingURL=WorkflowBuilder-DSPJ5UOG.js.map
+//# sourceMappingURL=WorkflowBuilder-DSPJ5UOG.js.map

package/dist/{WorkflowBuilder-YT72BTMW.js.map → WorkflowBuilder-DSPJ5UOG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"WorkflowBuilder-YT72BTMW.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"WorkflowBuilder-DSPJ5UOG.js"}

package/dist/{chunk-V67QXGBK.js → chunk-LA7ELWEY.js}

@@ -1,4 +1,4 @@
-import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, DialogFooter, Input as Input$1 } from './chunk-7VEOUEIN.js';
+import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, Input as Input$1, DialogFooter } from './chunk-7VEOUEIN.js';
 import { getGlobalStoreClient, createGlobalStoreClient, setGlobalStoreClient, resetGlobalStoreClient } from './chunk-BQXHJIER.js';
 import { GetMyNodeInstallationsDocument, BrowseWorkflowTemplatesDocument, InstallWorkflowNodeDocument, InstallPurchasedNodeDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument } from './chunk-UYPB5TWQ.js';
 import { useFlowStore } from './chunk-KU64CCSV.js';
@@ -8,8 +8,6 @@ import { waitForFluidGridsClient, getFluidGridsClient, createFluidGridsClient, s
 import { config, getFluidGridsConfig, validateTrustedOrigin, setFluidGridsConfig, resetFluidGridsConfig } from './chunk-WWU2O2SR.js';
 import { deepClone, applyTemplateInputs } from './chunk-XQP33UJR.js';
 import { cn as cn$1, Badge as Badge$1, Button as Button$1 } from './chunk-Z54K22LP.js';
-import { ThemeProvider as ThemeProvider$1 } from '@burdenoff/fe-libs/shared/providers/shell';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useShallow, shallow } from 'zustand/shallow';
 import * as React from 'react';
@@ -19,6 +17,7 @@ import { produce } from 'immer';
 import { nanoid } from 'nanoid/non-secure';
 import { Icon } from '@iconify/react';
 import { cn } from '@burdenoff/fe-libs/utils';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Textarea, Input, Button, Card, Badge, CardContent as CardContent$1, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Popover, PopoverTrigger, PopoverContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@burdenoff/fe-libs/ui';
 import * as AdaptiveCards from 'adaptivecards';
 import { formatDistanceToNow } from 'date-fns';
@@ -33,14 +32,12 @@ import { gql as gql$1 } from '@apollo/client/core';
 import { Sparkles, Star, Download, Eye, History, Loader2, RotateCcw, Maximize2, LayoutGrid, Plus, Trash2, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, PlusCircle, ChevronDown, Type, Code, Hash, List, Braces, Workflow, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
 import { animate, easeOut } from 'popmotion';
 import { createPortal } from 'react-dom';
+import { ThemeProvider as ThemeProvider$1 } from '@burdenoff/fe-libs/shared/providers/shell';
 import '@xyflow/react/dist/style.css';
 import { buildSchema, GraphQLObjectType, GraphQLInputObjectType, GraphQLEnumType, GraphQLInterfaceType, GraphQLUnionType, GraphQLNonNull, GraphQLList } from 'graphql';
 import { create } from 'zustand';
 import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 
-function ThemeProvider({ children }) {
-  return /* @__PURE__ */ jsx(ThemeProvider$1, { children });
-}
 function useDeleteNode() {
   const { getNode, getEdges, deleteElements } = useReactFlow();
   const [deleteNode, deleteEdge] = useFlowStore(
@@ -9119,50 +9116,46 @@ function SubNodeComponent({
     useShallow((s) => [s.execution.nodeStatuses])
   );
   const nodeStatus = nodeStatuses[id] || "idle";
-  const statusRing = nodeStatus === "success" ? "ring-2 ring-green-500" : nodeStatus === "error" ? "ring-2 ring-red-500" : nodeStatus === "running" ? "ring-2 ring-blue-500 animate-pulse" : "";
+  const statusRing = nodeStatus === "success" ? "ring-2 ring-[var(--color-status-success-border)]" : nodeStatus === "error" ? "ring-2 ring-[var(--color-status-error-border)]" : nodeStatus === "running" ? "ring-2 ring-[var(--color-status-info-border)] animate-pulse" : "";
   const handleShowNodeProperties = useCallback(() => {
     showNodePropertiesOf({ id, type: nodeType });
   }, [id, nodeType, showNodePropertiesOf]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "target",
-        position: Position.Top,
-        id: "target",
-        isConnectable,
-        className: "size-2.5 bg-accent border-2 border-accent/60"
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "w-0.5 h-4 border-l-2 border-dashed border-accent/40" }),
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-accent/70 font-medium mb-1", children: meta.title.includes("Model") ? "Model" : meta.title.includes("Memory") ? "Memory" : meta.title.includes("Tool") ? "Tool" : meta.title.includes("Parser") ? "Parser" : "Adapter" }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `w-14 h-14 rounded-full bg-card border-2 border-accent/40 flex items-center justify-center shadow-lg cursor-pointer transition-all hover:border-accent/80 hover:shadow-xl ${statusRing}`,
-        onDoubleClick: handleShowNodeProperties,
-        "data-selected": selected,
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: `https://api.iconify.design/${meta.icon.replace(":", "/")}.svg`,
-            alt: meta.title,
-            className: "w-7 h-7 opacity-80"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: "mt-1.5 text-xs text-accent font-medium text-center max-w-24 leading-tight", children: meta.title }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => deleteNode(id),
-        className: "absolute -top-1 -right-1 w-4 h-4 rounded-full bg-destructive/80 text-destructive-foreground text-[10px] flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-destructive transition-opacity",
-        children: "\xD7"
-      }
-    ),
-    /* @__PURE__ */ jsx(AdapterConnectors, { nodeId: id, adapters: data?.nodeData?.nodeAdapters })
-  ] });
+  return (
+    // `relative` anchors the absolute delete button; `group` enables its hover reveal.
+    /* @__PURE__ */ jsxs("div", { className: "relative group flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx(
+        Handle,
+        {
+          type: "target",
+          position: Position.Top,
+          id: "target",
+          isConnectable,
+          className: "size-2.5 bg-accent border-2 border-accent/60"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "w-0.5 h-4 border-l-2 border-dashed border-accent/40" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-accent/70 font-medium mb-1", children: meta.title.includes("Model") ? "Model" : meta.title.includes("Memory") ? "Memory" : meta.title.includes("Tool") ? "Tool" : meta.title.includes("Parser") ? "Parser" : "Adapter" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `w-14 h-14 rounded-full bg-card border-2 border-accent/40 flex items-center justify-center shadow-lg cursor-pointer transition-all hover:border-accent/80 hover:shadow-xl ${statusRing}`,
+          onDoubleClick: handleShowNodeProperties,
+          "data-selected": selected,
+          children: /* @__PURE__ */ jsx(Icon, { icon: meta.icon, className: "w-7 h-7 text-accent opacity-80" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "mt-1.5 text-xs text-accent font-medium text-center max-w-24 leading-tight", children: meta.title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => deleteNode(id),
+          className: "absolute -top-1 -right-1 w-4 h-4 rounded-full bg-destructive/80 text-destructive-foreground text-[10px] flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-destructive transition-opacity",
+          children: "\xD7"
+        }
+      ),
+      /* @__PURE__ */ jsx(AdapterConnectors, { nodeId: id, adapters: data?.nodeData?.nodeAdapters })
+    ] })
+  );
 }
 var getNodeMetadata = (value) => {
   function NodeComponent(props) {
@@ -9761,7 +9754,10 @@ function SidebarPanelWrapper({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex flex-col w-80 h-full  bg-background/60", className),
+      className: cn(
+        "flex flex-col w-80 h-full bg-background/40 backdrop-blur-sm",
+        className
+      ),
       ...props,
       children
     }
@@ -10933,43 +10929,50 @@ var STORE_CATEGORIES = [
     key: "ai",
     label: "AI & Automation",
     description: "AI models, agents, and intelligent automation",
-    icon: "mynaui:brain"
+    icon: "mynaui:sparkles",
+    color: "--color-chart-1"
   },
   {
     key: "integration",
     label: "Action in an App",
     description: "Connect with apps like Slack, Notion, Google Sheets",
-    icon: "mynaui:puzzle"
+    icon: "mynaui:puzzle",
+    color: "--color-chart-2"
   },
   {
     key: "data",
     label: "Data & Transform",
     description: "Manipulate, filter, or convert data",
-    icon: "mynaui:database"
+    icon: "mynaui:database",
+    color: "--color-chart-3"
   },
   {
     key: "flow",
     label: "Flow & Logic",
     description: "Branch, merge, or loop the flow",
-    icon: "mynaui:git-branch"
+    icon: "mynaui:git-branch",
+    color: "--color-chart-4"
   },
   {
     key: "core",
     label: "Core",
     description: "HTTP requests, code, webhooks, and more",
-    icon: "mynaui:cog"
+    icon: "mynaui:cog",
+    color: "--color-chart-5"
   },
   {
     key: "communication",
     label: "Communication",
     description: "Email, messaging, and notifications",
-    icon: "mynaui:message-dots"
+    icon: "mynaui:message-dots",
+    color: "--color-chart-6"
   },
   {
     key: "trigger",
     label: "Triggers",
     description: "Start your workflow automatically",
-    icon: "mynaui:bolt"
+    icon: "mynaui:zap",
+    color: "--color-chart-7"
   }
 ];
 function useStoreNodes(options = {}) {
@@ -12151,9 +12154,23 @@ function StoreCategoryList({
         "button",
         {
           onClick: () => onSelectCategory(cat),
-          className: "w-full flex items-center gap-3 px-2 py-3 rounded-md hover:bg-muted/60 transition-colors text-left group",
+          className: "w-full flex items-center gap-3 px-2 py-3 rounded-lg border border-transparent hover:border-default hover:bg-muted/60 transition-colors text-left group",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "size-9 shrink-0 rounded-lg bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { icon: cat.icon, className: "size-5 text-primary" }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "size-9 shrink-0 rounded-lg flex items-center justify-center",
+                style: { backgroundColor: `color-mix(in oklab, var(${cat.color}) 16%, transparent)` },
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: cat.icon,
+                    className: "size-5",
+                    style: { color: `var(${cat.color})` }
+                  }
+                )
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: cat.label }),
               /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5", children: cat.description })
@@ -12162,7 +12179,7 @@ function StoreCategoryList({
               Icon,
               {
                 icon: "mynaui:chevron-right",
-                className: "size-4 shrink-0 text-foreground/40"
+                className: "size-4 shrink-0 text-foreground/40 group-hover:translate-x-0.5 transition-transform"
               }
             )
           ]
@@ -12427,7 +12444,7 @@ function StoreNodeOperations({ nodeType }) {
             /* @__PURE__ */ jsx("div", { className: "size-7 shrink-0 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(
               Icon,
               {
-                icon: isTrigger ? "solar:play-bold" : "mynaui:bolt",
+                icon: isTrigger ? "solar:play-bold" : "mynaui:zap",
                 className: "size-3.5 text-primary"
               }
             ) }),
@@ -13577,7 +13594,7 @@ function DesktopSidebarFragment({
     },
     [configTemplate, configContent, configNodeCheck, performImport]
   );
-  return /* @__PURE__ */ jsxs("div", { className: "relative  max-w-sm w-fit flex shrink-0 divide-x divide-card-foreground/10", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative max-w-sm w-fit flex shrink-0 divide-x divide-card-foreground/10 rounded-xl overflow-hidden border border-card-foreground/10", children: [
     activePanel !== "none" && /* @__PURE__ */ jsx("div", { className: "min-w-xs grow bg-card", children: /* @__PURE__ */ jsx(SwitchSidebarPanel, { active: activePanel }) }),
     /* @__PURE__ */ jsx("div", { className: "shrink-0 bg-card p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx(
@@ -13855,7 +13872,7 @@ function useNodeAutoAdjust() {
     [getNodes, updateNode]
   );
 }
-function ThemeProvider2({
+function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "vite-ui-theme"
@@ -17635,7 +17652,7 @@ function App({
   };
   const currentSourceSchema = propSourceSchema || getSchemaForNode(selectedSourceNode, true);
   const currentTargetSchema = propTargetSchema || getSchemaForNode(selectedTargetNode, false);
-  return /* @__PURE__ */ jsx(DataConfigProvider, { config: dataConfig, children: /* @__PURE__ */ jsxs(ThemeProvider2, { defaultTheme: "light", storageKey: "vite-ui-theme", children: [
+  return /* @__PURE__ */ jsx(DataConfigProvider, { config: dataConfig, children: /* @__PURE__ */ jsxs(ThemeProvider, { defaultTheme: "light", storageKey: "vite-ui-theme", children: [
     /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background", children: /* @__PURE__ */ jsxs("main", { className: "container py-6", children: [
       currentSourceSchema && currentTargetSchema && selectedSourceNode && selectedSourceOperation && selectedTargetNode && selectedTargetOperation && /* @__PURE__ */ jsxs("div", { className: "mt-8 p-4 border rounded-lg", children: [
         /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium mb-4", children: "Data Mapping" }),
@@ -20415,7 +20432,7 @@ function useFlowValidator(onValidate) {
   }, [getNodes, getEdges, onValidate]);
   return [isValidating, validate];
 }
-var SaveFlowButton = () => {
+var SaveFlowButton = ({ className }) => {
   const { saveToBackend, isSaving } = useSaveWorkflow();
   const [isValidating, validateFlow] = useFlowValidator(async (isValid) => {
     if (isValid) {
@@ -20433,10 +20450,10 @@ var SaveFlowButton = () => {
       disabled: isValidating || isSaving,
       variant: "outline",
       size: "sm",
-      className: "flex gap-4",
+      className: cn("flex gap-4", className),
       children: [
         /* @__PURE__ */ jsx(Icon, { icon: "fluent:save-28-filled" }),
-        isSaving ? "Saving..." : "Save Flow"
+        isSaving ? "Saving..." : "Save"
       ]
     }
   ) });
@@ -20570,7 +20587,9 @@ function TriggerDataDialog({
     ] })
   ] }) });
 }
-var ExecuteWorkflowButton = () => {
+var ExecuteWorkflowButton = ({
+  className
+}) => {
   const { executeFullWorkflow } = useNodeExecution();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [isExecuting] = useFlowStore(
@@ -20615,10 +20634,13 @@ var ExecuteWorkflowButton = () => {
         disabled: isValidating || isExecuting,
         variant: "default",
         size: "sm",
-        className: "flex gap-2 bg-[var(--color-status-success-bg)] hover:bg-[var(--color-status-success-bg)]/90 text-[var(--color-text-on-status)]",
+        className: cn(
+          "flex items-center justify-center gap-2 h-8 rounded-l-lg rounded-r-none px-3 bg-[var(--color-status-success-bg)] hover:bg-[var(--color-status-success-bg)]/90 text-[var(--color-text-on-status)] font-medium",
+          className
+        ),
         children: [
           /* @__PURE__ */ jsx(Icon, { icon: "mdi:play", className: "size-4" }),
-          isExecuting ? "Running..." : isValidating ? "Validating..." : "Execute"
+          isExecuting ? "Running..." : isValidating ? "Validating..." : "Run"
         ]
       }
     ),
@@ -22516,7 +22538,7 @@ var STATUS_STYLES = {
   ARCHIVED: { label: "Archived", variant: "outline" },
   DEPRECATED: { label: "Deprecated", variant: "destructive" }
 };
-function VersionHistoryPanel() {
+function VersionHistoryPanel({ className }) {
   const params = useParams();
   const navigate = useNavigate();
   const workflowKey = params?.id ?? "";
@@ -22556,7 +22578,7 @@ function VersionHistoryPanel() {
       {
         variant: "outline",
         size: "sm",
-        className: "flex gap-1",
+        className: cn("flex gap-1", className),
         onClick: () => refetch(),
         children: [
           /* @__PURE__ */ jsx(History, { className: "size-4" }),
@@ -22644,7 +22666,9 @@ function VersionHistoryPanel() {
     ] })
   ] });
 }
-var ActivateWorkflowButton = () => {
+var ActivateWorkflowButton = ({
+  className
+}) => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [dbId, status, setWorkflow] = useFlowStore(
     useShallow((s) => [
@@ -22698,7 +22722,11 @@ var ActivateWorkflowButton = () => {
       disabled: isProcessing || !dbId,
       variant: isDraft ? "default" : "outline",
       size: "sm",
-      className: `flex gap-1 ${isDraft ? "bg-green-600 hover:bg-green-700 text-white" : ""}`,
+      className: cn(
+        "flex gap-1",
+        isDraft && "bg-green-600 hover:bg-green-700 text-white",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx(
           Icon,
@@ -22712,6 +22740,34 @@ var ActivateWorkflowButton = () => {
     }
   );
 };
+function RunWithViewRuns({
+  onViewRuns,
+  canViewRuns,
+  className,
+  runButtonClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsx(ExecuteWorkflowButton, { className: runButtonClassName }),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "default",
+          size: "icon",
+          className: "flex items-center justify-center h-8 w-6 rounded-r-lg rounded-l-none border-l border-white/20 bg-[var(--color-status-success-bg)] hover:bg-[var(--color-status-success-bg)]/90",
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "mynaui:chevron-down",
+              className: "size-3.5 text-[var(--color-text-on-status)]"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onViewRuns, disabled: !canViewRuns, children: "View Runs" }) })
+    ] })
+  ] });
+}
 var edgeTypes2 = {
   deletable: CustomDeletableEdge
 };
@@ -22772,6 +22828,7 @@ var FlowBuilder = ({ readOnly = false }) => {
   }, [nodeTypesVersion, nodes]);
   const [workflowName, setWorkflowName] = useState(name);
   const [workflowAlias, setWorkflowAlias] = useState(alias || "");
+  const [isEditingName, setIsEditingName] = useState(false);
   useEffect(() => {
     setWorkflowName(name);
   }, [name]);
@@ -22822,6 +22879,10 @@ var FlowBuilder = ({ readOnly = false }) => {
   useEffect(() => {
     handleAutoAdjustNodeAfterNodeMeasuredRef.current = handleAutoAdjustNodeAfterNodeMeasured;
   }, [handleAutoAdjustNodeAfterNodeMeasured]);
+  const handleViewRuns = useCallback(() => {
+    if (!id) return;
+    navigate(`../runs?workflowKey=${encodeURIComponent(id)}`);
+  }, [id, navigate]);
   const handleNodesChange = useCallback(
     (changes) => {
       changes.forEach((change) => {
@@ -22845,7 +22906,7 @@ var FlowBuilder = ({ readOnly = false }) => {
     ]
   );
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full overflow-hidden", children: [
-    !isReadOnly && /* @__PURE__ */ jsxs(Card, { className: "h-14 shrink-0 border-0 from-primary/40 p-2 to-transparent rounded-none bg-gradient-to-r w-full items-center flex justify-between border-b border-card-foreground/10", children: [
+    !isReadOnly && /* @__PURE__ */ jsxs(Card, { className: "h-14 shrink-0 border-0 from-primary/40 p-2 to-transparent rounded-t-xl rounded-b-none bg-gradient-to-l backdrop-blur-sm mt-2 mx-4 items-center flex justify-between border border-card-foreground/10 border-b-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -22865,16 +22926,46 @@ var FlowBuilder = ({ readOnly = false }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        isEditingName ? /* @__PURE__ */ jsx(
           Input,
           {
-            className: "text-card-foreground font-bold",
+            autoFocus: true,
+            className: "text-card-foreground font-bold w-48",
             type: "email",
             placeholder: "Workflow Name",
             value: workflowName || name,
-            onChange: handleNameChange
+            onChange: handleNameChange,
+            onBlur: () => setIsEditingName(false),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") setIsEditingName(false);
+            }
           }
-        ),
+        ) : /* @__PURE__ */ jsxs("div", { className: "group flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              title: workflowName || name || "Untitled Workflow",
+              className: "w-48 overflow-x-auto whitespace-nowrap text-card-foreground font-bold [scrollbar-width:thin]",
+              children: workflowName || name || "Untitled Workflow"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "size-6 shrink-0 opacity-60 group-hover:opacity-100",
+              onClick: () => setIsEditingName(true),
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "mynaui:pencil",
+                  className: "size-3.5 text-card-foreground"
+                }
+              )
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -22886,25 +22977,45 @@ var FlowBuilder = ({ readOnly = false }) => {
           }
         )
       ] }),
-      name !== "" && /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(VersionHistoryPanel, {}),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: () => {
-              if (!id) return;
-              navigate(`../runs?workflowKey=${encodeURIComponent(id)}`);
-            },
-            disabled: !id,
-            variant: "outline",
-            size: "sm",
-            className: "flex gap-4",
-            children: "View Runs"
-          }
-        ),
-        /* @__PURE__ */ jsx(SaveFlowButton, {}),
-        /* @__PURE__ */ jsx(ActivateWorkflowButton, {}),
-        /* @__PURE__ */ jsx(ExecuteWorkflowButton, {})
+      name !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "hidden lg:inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(VersionHistoryPanel, {}),
+          /* @__PURE__ */ jsx(SaveFlowButton, {}),
+          /* @__PURE__ */ jsx(ActivateWorkflowButton, {}),
+          /* @__PURE__ */ jsx(RunWithViewRuns, { onViewRuns: handleViewRuns, canViewRuns: !!id })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "text-card-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:dots-vertical", className: "size-5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuContent,
+            {
+              align: "end",
+              className: "flex flex-col gap-1.5 p-2 w-56",
+              children: [
+                /* @__PURE__ */ jsx(VersionHistoryPanel, { className: "w-full justify-start" }),
+                /* @__PURE__ */ jsx(SaveFlowButton, { className: "w-full justify-start" }),
+                /* @__PURE__ */ jsx(ActivateWorkflowButton, { className: "w-full justify-start" }),
+                /* @__PURE__ */ jsx(
+                  RunWithViewRuns,
+                  {
+                    onViewRuns: handleViewRuns,
+                    canViewRuns: !!id,
+                    className: "w-full",
+                    runButtonClassName: "flex-1 justify-start rounded-l-lg"
+                  }
+                )
+              ]
+            }
+          )
+        ] }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -22922,7 +23033,7 @@ var FlowBuilder = ({ readOnly = false }) => {
           el._ro?.disconnect();
           el._ro = ro;
         },
-        className: "relative w-full flex-1",
+        className: "relative w-full flex-1 rounded-b-xl border border-card-foreground/10 border-t-0 overflow-hidden ml-4 mb-1",
         children: [
           /* @__PURE__ */ jsx(CanvasControls, {}),
           /* @__PURE__ */ jsx(
@@ -23223,11 +23334,11 @@ function WorkflowBuilder() {
           )
         ] })
       ] }) }),
-      children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(WorkflowItem, {}) })
+      children: /* @__PURE__ */ jsx(WorkflowItem, {})
     }
   );
 }
 
-export { Card2 as Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ConfigSchemaForm, ConnectionFormDialog, ConnectionSelector, FlowBuilderPage, FluidGridsProvider, ProviderPicker, TemplateCard, ThemeProvider, WorkflowBuilder, getProviderForm, listCustomBlocks, refetchStoreNodes, registerCustomBlock, resolveUiSpec, stripSubmitActions, useConnection, useConnectionDialog, useConnections, useConnectionsByProvider, useCreateConnection, useFluidGridsContext, useImportWorkflowTemplate, useInitiateOAuth, useNodeExecution, useProviderByKey, useProviderCatalog, useProviders, useWorkflowTemplates };
-//# sourceMappingURL=chunk-V67QXGBK.js.map
-//# sourceMappingURL=chunk-V67QXGBK.js.map
+export { Card2 as Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ConfigSchemaForm, ConnectionFormDialog, ConnectionSelector, FlowBuilderPage, FluidGridsProvider, ProviderPicker, TemplateCard, WorkflowBuilder, getProviderForm, listCustomBlocks, refetchStoreNodes, registerCustomBlock, resolveUiSpec, stripSubmitActions, useConnection, useConnectionDialog, useConnections, useConnectionsByProvider, useCreateConnection, useFluidGridsContext, useImportWorkflowTemplate, useInitiateOAuth, useNodeExecution, useProviderByKey, useProviderCatalog, useProviders, useWorkflowTemplates };
+//# sourceMappingURL=chunk-LA7ELWEY.js.map
+//# sourceMappingURL=chunk-LA7ELWEY.js.map