@remoraflow/ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -445,16 +445,17 @@ function SelectContent({
 function SelectItem({
   className,
   children,
+  description,
   ...props
 }) {
   return /* @__PURE__ */ jsxs4(SelectPrimitive.Item, {
     "data-slot": "select-item",
-    className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+    className: cn("relative flex w-full cursor-default flex-col items-stretch gap-0.5 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx8("span", {
         "data-slot": "select-item-indicator",
-        className: "absolute right-2 flex size-3.5 items-center justify-center",
+        className: "absolute right-2 top-1.5 flex size-3.5 items-center justify-center",
         children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, {
           children: /* @__PURE__ */ jsx8(CheckIcon2, {
             className: "size-4"
@@ -463,6 +464,10 @@ function SelectItem({
       }),
       /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, {
         children
+      }),
+      description && /* @__PURE__ */ jsx8("span", {
+        className: "text-[11px] text-muted-foreground leading-snug whitespace-normal",
+        children: description
       })
     ]
   });
@@ -793,6 +798,17 @@ function JsonCodeEditor({
 
 // src/editors/expression-editor.tsx
 import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function formatDefault(value) {
+  if (value === undefined)
+    return;
+  if (typeof value === "string")
+    return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
 function inferLiteralType(value) {
   if (typeof value === "string")
     return "string";
@@ -844,6 +860,8 @@ function ExpressionEditor({
   const hintedLiteralType = schemaTypeToLiteralType(schemaHint?.type);
   const hasEnum = schemaHint?.enum && schemaHint.enum.length > 0;
   const allowTemplate = !schemaHint?.type || schemaHint.type === "string";
+  const defaultHint = formatDefault(schemaHint?.default);
+  const defaultJsonHint = schemaHint?.default !== undefined ? typeof schemaHint.default === "string" ? schemaHint.default : JSON.stringify(schemaHint.default, null, 2) : undefined;
   const [literalType, setLiteralType] = useState2(hintedLiteralType ?? (value.type === "literal" ? inferLiteralType(value.value) : "string"));
   const prevExprType = useRef2(value.type);
   useEffect2(() => {
@@ -965,7 +983,7 @@ function ExpressionEditor({
                   /* @__PURE__ */ jsx13(SelectTrigger, {
                     className: "h-8 text-xs font-mono w-full",
                     children: /* @__PURE__ */ jsx13(SelectValue, {
-                      placeholder: "-- select --"
+                      placeholder: defaultHint !== undefined ? `default: ${defaultHint}` : "-- select --"
                     })
                   }),
                   /* @__PURE__ */ jsx13(SelectContent, {
@@ -979,7 +997,9 @@ function ExpressionEditor({
                 type: hintedLiteralType,
                 value: litVal,
                 onChange: (raw) => handleLiteralChange(raw, hintedLiteralType),
-                onValueChange: onChange
+                onValueChange: onChange,
+                defaultHint,
+                defaultJsonHint
               }) : /* @__PURE__ */ jsxs5(Tabs, {
                 value: literalType,
                 onValueChange: handleLiteralTypeChange,
@@ -1011,7 +1031,7 @@ function ExpressionEditor({
                       value: String(litVal ?? ""),
                       onChange: (e) => handleLiteralChange(e.target.value, "string"),
                       className: "h-8 text-xs font-mono",
-                      placeholder: "Enter value..."
+                      placeholder: defaultHint ?? "Enter value..."
                     })
                   }),
                   /* @__PURE__ */ jsx13(TabsContent, {
@@ -1021,7 +1041,7 @@ function ExpressionEditor({
                       value: String(litVal ?? ""),
                       onChange: (e) => handleLiteralChange(e.target.value, "number"),
                       className: "h-8 text-xs font-mono",
-                      placeholder: "0"
+                      placeholder: defaultHint ?? "0"
                     })
                   }),
                   /* @__PURE__ */ jsx13(TabsContent, {
@@ -1057,7 +1077,7 @@ function ExpressionEditor({
                     children: /* @__PURE__ */ jsx13(JsonCodeEditor, {
                       value: typeof litVal === "string" ? litVal : JSON.stringify(litVal, null, 2),
                       onChange: (val) => handleLiteralChange(val, "json"),
-                      placeholderText: '{"key": "value"}'
+                      placeholderText: defaultJsonHint ?? '{"key": "value"}'
                     })
                   })
                 ]
@@ -1098,7 +1118,9 @@ function LiteralWidget({
   type,
   value,
   onChange,
-  onValueChange
+  onValueChange,
+  defaultHint,
+  defaultJsonHint
 }) {
   switch (type) {
     case "string":
@@ -1107,7 +1129,7 @@ function LiteralWidget({
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
         className: "h-8 text-xs font-mono",
-        placeholder: "Enter value..."
+        placeholder: defaultHint ?? "Enter value..."
       });
     case "number":
       return /* @__PURE__ */ jsx13(Input, {
@@ -1115,7 +1137,7 @@ function LiteralWidget({
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
         className: "h-8 text-xs font-mono",
-        placeholder: "0"
+        placeholder: defaultHint ?? "0"
       });
     case "boolean":
       return /* @__PURE__ */ jsxs5(Select, {
@@ -1147,7 +1169,7 @@ function LiteralWidget({
       return /* @__PURE__ */ jsx13(JsonCodeEditor, {
         value: typeof value === "string" ? value : JSON.stringify(value, null, 2),
         onChange,
-        placeholderText: '{"key": "value"}'
+        placeholderText: defaultJsonHint ?? '{"key": "value"}'
       });
   }
 }
@@ -2286,6 +2308,17 @@ function useWorkflowExecution(workflow, options) {
     goLive
   };
 }
+// src/tool-schemas-context.tsx
+import { createContext, useContext } from "react";
+var ToolSchemasContext = createContext(undefined);
+function useToolSchemas() {
+  return useContext(ToolSchemasContext);
+}
+function useToolDisplayName(toolName) {
+  const schemas = useToolSchemas();
+  return schemas?.[toolName]?.displayName ?? toolName;
+}
+
 // src/panels/shared.tsx
 import {
   Bot as Bot2,
@@ -2433,6 +2466,8 @@ function StepParams({
   resolvedInputs
 }) {
   const resolved = resolvedInputs;
+  const toolSchemas = useToolSchemas();
+  const toolCallDisplayName = useToolDisplayName(step.type === "tool-call" ? step.params.toolName : "");
   switch (step.type) {
     case "tool-call":
       return /* @__PURE__ */ jsxs7("div", {
@@ -2445,7 +2480,7 @@ function StepParams({
               }),
               /* @__PURE__ */ jsx16("div", {
                 className: "text-xs font-mono font-medium text-foreground bg-muted/40 rounded px-2 py-1 inline-block",
-                children: step.params.toolName
+                children: toolCallDisplayName
               })
             ]
           }),
@@ -2733,7 +2768,7 @@ function StepParams({
                 children: "Tools"
               }),
               /* @__PURE__ */ jsx16(Code, {
-                children: step.params.tools.join(", ")
+                children: step.params.tools.map((name) => toolSchemas?.[name]?.displayName ?? name).join(", ")
               })
             ]
           }),
@@ -3237,7 +3272,8 @@ import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function AgentLoopParams({
   step,
   onChange,
-  availableToolNames
+  availableToolNames,
+  toolSchemas
 }) {
   return /* @__PURE__ */ jsxs9("div", {
     className: "space-y-3",
@@ -3268,23 +3304,37 @@ function AgentLoopParams({
           }),
           availableToolNames.length > 0 ? /* @__PURE__ */ jsx18("div", {
             className: "space-y-1",
-            children: availableToolNames.map((name) => /* @__PURE__ */ jsxs9("label", {
-              className: "flex items-center gap-2.5 text-xs text-foreground cursor-pointer select-none",
-              children: [
-                /* @__PURE__ */ jsx18("input", {
-                  type: "checkbox",
-                  className: "rounded border-border accent-foreground",
-                  checked: step.params.tools.includes(name),
-                  onChange: (e) => {
-                    const tools = e.target.checked ? [...step.params.tools, name] : step.params.tools.filter((t) => t !== name);
-                    onChange({
-                      params: { ...step.params, tools }
-                    });
-                  }
-                }),
-                name
-              ]
-            }, name))
+            children: availableToolNames.map((name) => {
+              const toolSchema = toolSchemas?.[name];
+              return /* @__PURE__ */ jsxs9("label", {
+                className: "flex items-start gap-2.5 text-xs text-foreground cursor-pointer select-none",
+                children: [
+                  /* @__PURE__ */ jsx18("input", {
+                    type: "checkbox",
+                    className: "mt-0.5 rounded border-border accent-foreground",
+                    checked: step.params.tools.includes(name),
+                    onChange: (e) => {
+                      const tools = e.target.checked ? [...step.params.tools, name] : step.params.tools.filter((t) => t !== name);
+                      onChange({
+                        params: { ...step.params, tools }
+                      });
+                    }
+                  }),
+                  /* @__PURE__ */ jsxs9("span", {
+                    className: "flex flex-col gap-0.5 min-w-0",
+                    children: [
+                      /* @__PURE__ */ jsx18("span", {
+                        children: toolSchema?.displayName ?? name
+                      }),
+                      toolSchema?.description && /* @__PURE__ */ jsx18("span", {
+                        className: "text-[11px] text-muted-foreground leading-snug",
+                        children: toolSchema.description
+                      })
+                    ]
+                  })
+                ]
+              }, name);
+            })
           }) : /* @__PURE__ */ jsx18(Input, {
             value: step.params.tools.join(", "),
             onChange: (e) => onChange({
@@ -3677,8 +3727,18 @@ function SwitchCaseParams({
 }
 
 // src/editors/params/tool-call-params.tsx
+import { Plus, X } from "lucide-react";
 import { useEffect as useEffect6, useRef as useRef5 } from "react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+function formatDefaultSummary(value) {
+  if (typeof value === "string")
+    return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
 function ToolCallParams({
   step,
   onChange,
@@ -3696,12 +3756,16 @@ function ToolCallParams({
     const newSchema = toolSchemas?.[step.params.toolName];
     if (!newSchema?.inputSchema.properties)
       return;
+    const newRequired = new Set(newSchema.inputSchema.required ?? []);
+    const newProps = newSchema.inputSchema.properties;
     const newInput = {};
-    for (const key of Object.keys(newSchema.inputSchema.properties)) {
-      newInput[key] = step.params.toolInput[key] ?? {
-        type: "literal",
-        value: ""
-      };
+    for (const key of Object.keys(newProps)) {
+      const existing = step.params.toolInput[key];
+      if (existing) {
+        newInput[key] = existing;
+      } else if (newRequired.has(key)) {
+        newInput[key] = { type: "literal", value: "" };
+      }
     }
     onChange({ params: { ...step.params, toolInput: newInput } });
   }, [
@@ -3711,7 +3775,30 @@ function ToolCallParams({
     onChange,
     step.params
   ]);
-  const displayKeys = schemaKeys ?? Object.keys(step.params.toolInput);
+  const toolInput = step.params.toolInput;
+  const presentKeys = schemaKeys ? [
+    ...schemaKeys.filter((k) => requiredKeys.has(k) || (k in toolInput)),
+    ...Object.keys(toolInput).filter((k) => !schemaKeys.includes(k) && !requiredKeys.has(k))
+  ] : Object.keys(toolInput);
+  const absentOptionalKeys = schemaKeys?.filter((k) => !requiredKeys.has(k) && !(k in toolInput)) ?? [];
+  function setInput(key, val) {
+    onChange({
+      params: {
+        ...step.params,
+        toolInput: { ...toolInput, [key]: val }
+      }
+    });
+  }
+  function removeInput(key) {
+    const next = { ...toolInput };
+    delete next[key];
+    onChange({ params: { ...step.params, toolInput: next } });
+  }
+  function addOptional(key) {
+    const propSchema = schema?.inputSchema.properties?.[key];
+    const seed = propSchema?.default !== undefined ? propSchema.default : "";
+    setInput(key, { type: "literal", value: seed });
+  }
   return /* @__PURE__ */ jsxs16("div", {
     className: "space-y-3",
     children: [
@@ -3733,10 +3820,14 @@ function ToolCallParams({
                 })
               }),
               /* @__PURE__ */ jsx26(SelectContent, {
-                children: availableToolNames.map((name) => /* @__PURE__ */ jsx26(SelectItem, {
-                  value: name,
-                  children: name
-                }, name))
+                children: availableToolNames.map((name) => {
+                  const toolSchema = toolSchemas?.[name];
+                  return /* @__PURE__ */ jsx26(SelectItem, {
+                    value: name,
+                    description: toolSchema?.description,
+                    children: toolSchema?.displayName ?? name
+                  }, name);
+                })
               })
             ]
           }) : /* @__PURE__ */ jsx26(Input, {
@@ -3753,15 +3844,15 @@ function ToolCallParams({
         className: "text-[11px] text-muted-foreground leading-snug",
         children: schema.description
       }),
-      displayKeys.length > 0 && /* @__PURE__ */ jsxs16("div", {
+      presentKeys.length > 0 && /* @__PURE__ */ jsxs16("div", {
         children: [
           /* @__PURE__ */ jsx26(Label2, {
             children: "Tool Inputs"
           }),
           /* @__PURE__ */ jsx26("div", {
             className: "space-y-2",
-            children: displayKeys.map((key) => {
-              const expr = step.params.toolInput[key];
+            children: presentKeys.map((key) => {
+              const expr = toolInput[key];
               const isRequired = requiredKeys.has(key);
               const propSchema = schema?.inputSchema.properties?.[key];
               return /* @__PURE__ */ jsxs16("div", {
@@ -3777,6 +3868,24 @@ function ToolCallParams({
                       isRequired && /* @__PURE__ */ jsx26("span", {
                         className: "text-[10px] font-semibold text-red-500 bg-red-50 dark:bg-red-950/30 px-1.5 py-0.5 rounded",
                         children: "required"
+                      }),
+                      !isRequired && propSchema?.default !== undefined && /* @__PURE__ */ jsxs16("span", {
+                        className: "text-[10px] font-mono text-muted-foreground",
+                        title: "Value used when this input is omitted",
+                        children: [
+                          "default: ",
+                          formatDefaultSummary(propSchema.default)
+                        ]
+                      }),
+                      !isRequired && /* @__PURE__ */ jsx26("button", {
+                        type: "button",
+                        onClick: () => removeInput(key),
+                        className: "ml-auto text-muted-foreground hover:text-foreground rounded p-0.5 hover:bg-muted/60",
+                        title: "Remove optional input",
+                        "aria-label": `Remove ${key}`,
+                        children: /* @__PURE__ */ jsx26(X, {
+                          className: "w-3 h-3"
+                        })
                       })
                     ]
                   }),
@@ -3786,15 +3895,7 @@ function ToolCallParams({
                   }),
                   /* @__PURE__ */ jsx26(ExpressionEditor, {
                     value: expr ?? { type: "literal", value: "" },
-                    onChange: (val) => onChange({
-                      params: {
-                        ...step.params,
-                        toolInput: {
-                          ...step.params.toolInput,
-                          [key]: val
-                        }
-                      }
-                    }),
+                    onChange: (val) => setInput(key, val),
                     schemaHint: propSchema
                   })
                 ]
@@ -3802,6 +3903,44 @@ function ToolCallParams({
             })
           })
         ]
+      }),
+      absentOptionalKeys.length > 0 && /* @__PURE__ */ jsxs16("div", {
+        children: [
+          /* @__PURE__ */ jsx26(Label2, {
+            children: "Optional Inputs"
+          }),
+          /* @__PURE__ */ jsx26("div", {
+            className: "flex flex-wrap gap-1.5",
+            children: absentOptionalKeys.map((key) => {
+              const propSchema = schema?.inputSchema.properties?.[key];
+              const hasDefault = propSchema?.default !== undefined;
+              const titleParts = [propSchema?.description];
+              if (hasDefault) {
+                titleParts.push(`Default: ${formatDefaultSummary(propSchema?.default)}`);
+              }
+              const title = titleParts.filter(Boolean).join(" — ");
+              return /* @__PURE__ */ jsxs16("button", {
+                type: "button",
+                onClick: () => addOptional(key),
+                title: title || undefined,
+                className: "inline-flex items-center gap-1 text-[11px] font-mono text-muted-foreground hover:text-foreground border border-dashed border-border hover:border-ring rounded-md px-2 py-1 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx26(Plus, {
+                    className: "w-3 h-3"
+                  }),
+                  key,
+                  hasDefault && /* @__PURE__ */ jsxs16("span", {
+                    className: "text-muted-foreground/70",
+                    children: [
+                      "= ",
+                      formatDefaultSummary(propSchema?.default)
+                    ]
+                  })
+                ]
+              }, key);
+            })
+          })
+        ]
       })
     ]
   });
@@ -3909,7 +4048,8 @@ function StepParamsEditor({
       return /* @__PURE__ */ jsx28(AgentLoopParams, {
         step,
         onChange,
-        availableToolNames
+        availableToolNames,
+        toolSchemas
       });
     case "end":
       return /* @__PURE__ */ jsx28(EndParams, {
@@ -4313,7 +4453,7 @@ function CanvasContextMenu({
 }
 
 // src/components/workflow-json-dialog.tsx
-import { Copy, X } from "lucide-react";
+import { Copy, X as X2 } from "lucide-react";
 import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef7, useState as useState6 } from "react";
 import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function WorkflowJsonDialog({
@@ -4398,7 +4538,7 @@ function WorkflowJsonDialog({
                   type: "button",
                   onClick: onClose,
                   className: "text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted/50 transition-colors",
-                  children: /* @__PURE__ */ jsx30(X, {
+                  children: /* @__PURE__ */ jsx30(X2, {
                     className: "w-4 h-4"
                   })
                 })
@@ -4453,8 +4593,8 @@ import {
 } from "@xyflow/react";
 
 // src/edit-context.tsx
-import { createContext, useContext } from "react";
-var EditContext = createContext({
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var EditContext = createContext2({
   isEditing: false,
   onDeleteStep: () => {},
   onDisconnectStep: () => {},
@@ -4463,7 +4603,7 @@ var EditContext = createContext({
   allStepIds: []
 });
 function useEditContext() {
-  return useContext(EditContext);
+  return useContext2(EditContext);
 }
 
 // src/edges/workflow-edge.tsx
@@ -5091,8 +5231,10 @@ function AgentLoopNode({ data, selected }) {
     paused,
     layoutDirection
   } = data;
+  const toolSchemas = useToolSchemas();
   if (step.type !== "agent-loop")
     return null;
+  const toolLabels = step.params.tools.map((name) => toolSchemas?.[name]?.displayName ?? name);
   return /* @__PURE__ */ jsxs23(BaseNode, {
     id: step.id,
     name: step.name,
@@ -5114,7 +5256,7 @@ function AgentLoopNode({ data, selected }) {
         className: "text-[11px] text-muted-foreground italic line-clamp-2 bg-muted rounded p-1.5 font-mono",
         children: step.params.instructions
       }),
-      step.params.tools.length > 0 && /* @__PURE__ */ jsxs23("div", {
+      toolLabels.length > 0 && /* @__PURE__ */ jsxs23("div", {
         className: "mt-1.5 flex gap-1.5 text-[11px]",
         children: [
           /* @__PURE__ */ jsx33("span", {
@@ -5123,7 +5265,7 @@ function AgentLoopNode({ data, selected }) {
           }),
           /* @__PURE__ */ jsx33("span", {
             className: "font-mono text-muted-foreground truncate",
-            children: step.params.tools.join(", ")
+            children: toolLabels.join(", ")
           })
         ]
       })
@@ -5941,6 +6083,8 @@ function ToolCallNode({ data, selected }) {
     paused,
     layoutDirection
   } = data;
+  const toolName = step.type === "tool-call" ? step.params.toolName : "";
+  const displayName = useToolDisplayName(toolName);
   if (step.type !== "tool-call")
     return null;
   const entries = Object.entries(step.params.toolInput);
@@ -5964,7 +6108,7 @@ function ToolCallNode({ data, selected }) {
     children: [
       /* @__PURE__ */ jsx43("div", {
         className: "text-xs font-mono font-medium text-foreground",
-        children: step.params.toolName
+        children: displayName
       }),
       entries.length > 0 && /* @__PURE__ */ jsx43("div", {
         className: "mt-1.5 space-y-0.5",
@@ -6577,172 +6721,177 @@ function WorkflowViewer({
     availableToolNames,
     allStepIds
   ]);
-  return /* @__PURE__ */ jsxs35(EditContext.Provider, {
-    value: editContextValue,
-    children: [
-      /* @__PURE__ */ jsxs35("div", {
-        role: "application",
-        className: "flex h-full w-full min-h-0",
-        onKeyDown,
-        tabIndex: -1,
-        children: [
-          /* @__PURE__ */ jsxs35("div", {
-            ref: containerRef,
-            className: "flex-1 relative",
-            style: layoutReady ? undefined : { visibility: "hidden" },
-            children: [
-              /* @__PURE__ */ jsxs35(ReactFlow, {
-                nodes,
-                edges,
-                onNodesChange,
-                onEdgesChange,
-                onNodeClick,
-                onPaneClick,
-                onConnect: isEditing ? onConnect : undefined,
-                onNodeDrag: isEditing ? onNodeDrag : undefined,
-                onNodeDragStop: isEditing ? onNodeDragStop : undefined,
-                onPaneContextMenu: isEditing ? onPaneContextMenu : undefined,
-                onNodeContextMenu: isEditing ? onNodeContextMenu : undefined,
-                onDragOver: isEditing ? onDragOver : undefined,
-                onDrop: isEditing ? onDrop : undefined,
-                nodeTypes,
-                edgeTypes,
-                fitView: true,
-                fitViewOptions: FIT_VIEW_OPTIONS,
-                minZoom: 0.1,
-                nodesDraggable: isEditing,
-                nodesConnectable: isEditing,
-                defaultEdgeOptions: {
-                  type: "workflow"
-                },
-                proOptions: { hideAttribution: true },
-                children: [
-                  /* @__PURE__ */ jsx45(HandlePositionUpdater, {
-                    direction
-                  }),
-                  /* @__PURE__ */ jsx45(Background, {
-                    size: 3
-                  }),
-                  /* @__PURE__ */ jsx45(Controls, {
-                    showInteractive: false
-                  }),
-                  showMinimap && /* @__PURE__ */ jsx45(MiniMap, {
-                    nodeStrokeWidth: 2,
-                    pannable: true,
-                    zoomable: true,
-                    style: {
-                      width: effectiveMinimapWidth,
-                      height: effectiveMinimapHeight
-                    },
-                    nodeColor: "rgba(0, 0, 0, 0.1)"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs35("div", {
-                className: "absolute top-3 left-3 z-10 flex flex-col gap-2",
-                children: [
-                  /* @__PURE__ */ jsxs35("div", {
-                    className: "flex rounded-lg border border-border shadow-md overflow-hidden bg-card divide-x divide-border",
-                    children: [
-                      isEditing && /* @__PURE__ */ jsxs35("button", {
-                        type: "button",
-                        onClick: handleAutoLayout,
-                        title: "Auto-layout",
-                        className: "px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted/50 transition-colors flex items-center gap-1.5",
-                        children: [
-                          /* @__PURE__ */ jsx45(LayoutGrid, {
-                            className: "w-3.5 h-3.5"
-                          }),
-                          /* @__PURE__ */ jsx45("span", {
-                            children: "Auto-layout"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs35("button", {
-                        type: "button",
-                        onClick: () => setShowJsonDialog(true),
-                        title: "View JSON",
-                        className: "px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted/50 transition-colors flex items-center gap-1.5",
-                        children: [
-                          /* @__PURE__ */ jsx45(Braces, {
-                            className: "w-3.5 h-3.5"
-                          }),
-                          /* @__PURE__ */ jsx45("span", {
-                            children: "JSON"
-                          })
-                        ]
-                      })
-                    ]
-                  }),
-                  isEditing && /* @__PURE__ */ jsx45(StepPalette, {
-                    onAddStep: (type) => handleAddStep(type)
+  return /* @__PURE__ */ jsx45(ToolSchemasContext.Provider, {
+    value: toolSchemas,
+    children: /* @__PURE__ */ jsxs35(EditContext.Provider, {
+      value: editContextValue,
+      children: [
+        /* @__PURE__ */ jsxs35("div", {
+          role: "application",
+          className: "flex h-full w-full min-h-0",
+          onKeyDown,
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs35("div", {
+              ref: containerRef,
+              className: "flex-1 relative",
+              style: layoutReady ? undefined : { visibility: "hidden" },
+              children: [
+                /* @__PURE__ */ jsxs35(ReactFlow, {
+                  nodes,
+                  edges,
+                  onNodesChange,
+                  onEdgesChange,
+                  onNodeClick,
+                  onPaneClick,
+                  onConnect: isEditing ? onConnect : undefined,
+                  onNodeDrag: isEditing ? onNodeDrag : undefined,
+                  onNodeDragStop: isEditing ? onNodeDragStop : undefined,
+                  onPaneContextMenu: isEditing ? onPaneContextMenu : undefined,
+                  onNodeContextMenu: isEditing ? onNodeContextMenu : undefined,
+                  onDragOver: isEditing ? onDragOver : undefined,
+                  onDrop: isEditing ? onDrop : undefined,
+                  nodeTypes,
+                  edgeTypes,
+                  fitView: true,
+                  fitViewOptions: FIT_VIEW_OPTIONS,
+                  minZoom: 0.1,
+                  nodesDraggable: isEditing,
+                  nodesConnectable: isEditing,
+                  defaultEdgeOptions: {
+                    type: "workflow"
+                  },
+                  proOptions: { hideAttribution: true },
+                  children: [
+                    /* @__PURE__ */ jsx45(HandlePositionUpdater, {
+                      direction
+                    }),
+                    /* @__PURE__ */ jsx45(Background, {
+                      size: 3
+                    }),
+                    /* @__PURE__ */ jsx45(Controls, {
+                      showInteractive: false
+                    }),
+                    showMinimap && /* @__PURE__ */ jsx45(MiniMap, {
+                      nodeStrokeWidth: 2,
+                      pannable: true,
+                      zoomable: true,
+                      style: {
+                        width: effectiveMinimapWidth,
+                        height: effectiveMinimapHeight
+                      },
+                      nodeColor: "rgba(0, 0, 0, 0.1)"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs35("div", {
+                  className: "absolute top-3 left-3 z-10 flex flex-col gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxs35("div", {
+                      className: "flex rounded-lg border border-border shadow-md overflow-hidden bg-card divide-x divide-border",
+                      children: [
+                        isEditing && /* @__PURE__ */ jsxs35("button", {
+                          type: "button",
+                          onClick: handleAutoLayout,
+                          title: "Auto-layout",
+                          className: "px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted/50 transition-colors flex items-center gap-1.5",
+                          children: [
+                            /* @__PURE__ */ jsx45(LayoutGrid, {
+                              className: "w-3.5 h-3.5"
+                            }),
+                            /* @__PURE__ */ jsx45("span", {
+                              children: "Auto-layout"
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsxs35("button", {
+                          type: "button",
+                          onClick: () => setShowJsonDialog(true),
+                          title: "View JSON",
+                          className: "px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted/50 transition-colors flex items-center gap-1.5",
+                          children: [
+                            /* @__PURE__ */ jsx45(Braces, {
+                              className: "w-3.5 h-3.5"
+                            }),
+                            /* @__PURE__ */ jsx45("span", {
+                              children: "JSON"
+                            })
+                          ]
+                        })
+                      ]
+                    }),
+                    isEditing && /* @__PURE__ */ jsx45(StepPalette, {
+                      onAddStep: (type) => handleAddStep(type)
+                    })
+                  ]
+                }),
+                contextMenu && /* @__PURE__ */ jsx45(CanvasContextMenu, {
+                  position: {
+                    x: contextMenu.screenX,
+                    y: contextMenu.screenY
+                  },
+                  canvasPosition: {
+                    x: contextMenu.flowX,
+                    y: contextMenu.flowY
+                  },
+                  onAddStep: (type, pos) => {
+                    handleAddStep(type, pos);
+                    closeContextMenu();
+                  },
+                  onClose: closeContextMenu,
+                  targetNodeId: contextMenu.nodeId,
+                  onDeleteNode: contextMenu.nodeId ? (id) => {
+                    handleDeleteStep(id);
+                    closeContextMenu();
+                  } : undefined,
+                  onEditNode: contextMenu.nodeId ? (id) => {
+                    selectStepForEditing(id);
+                    closeContextMenu();
+                  } : undefined
+                }),
+                isEditing && !activeWorkflow?.steps.length && /* @__PURE__ */ jsx45("div", {
+                  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+                  children: /* @__PURE__ */ jsx45("div", {
+                    className: "text-muted-foreground text-sm bg-card/80 rounded-lg px-6 py-4 border border-border",
+                    children: "Add a step from the palette or right-click to get started"
                   })
-                ]
-              }),
-              contextMenu && /* @__PURE__ */ jsx45(CanvasContextMenu, {
-                position: {
-                  x: contextMenu.screenX,
-                  y: contextMenu.screenY
-                },
-                canvasPosition: {
-                  x: contextMenu.flowX,
-                  y: contextMenu.flowY
-                },
-                onAddStep: (type, pos) => {
-                  handleAddStep(type, pos);
-                  closeContextMenu();
-                },
-                onClose: closeContextMenu,
-                targetNodeId: contextMenu.nodeId,
-                onDeleteNode: contextMenu.nodeId ? (id) => {
-                  handleDeleteStep(id);
-                  closeContextMenu();
-                } : undefined,
-                onEditNode: contextMenu.nodeId ? (id) => {
-                  selectStepForEditing(id);
-                  closeContextMenu();
-                } : undefined
-              }),
-              isEditing && !activeWorkflow?.steps.length && /* @__PURE__ */ jsx45("div", {
-                className: "absolute inset-0 flex items-center justify-center pointer-events-none",
-                children: /* @__PURE__ */ jsx45("div", {
-                  className: "text-muted-foreground text-sm bg-card/80 rounded-lg px-6 py-4 border border-border",
-                  children: "Add a step from the palette or right-click to get started"
                 })
-              })
-            ]
-          }),
-          !hideDetailPanel && selectedStep && (isEditing ? /* @__PURE__ */ jsx45(StepEditorPanel, {
-            step: selectedStep,
-            availableToolNames,
-            allStepIds,
-            toolSchemas,
-            diagnostics: editDiagnostics.filter((d) => d.location.stepId === selectedStep.id),
-            workflowInputSchema: activeWorkflow?.inputSchema,
-            workflowOutputSchema: activeWorkflow?.outputSchema,
-            onChange: (updates) => updateStep(selectedStep.id, updates),
-            onWorkflowMetaChange: updateWorkflowMeta,
-            onClose: clearSelection
-          }) : /* @__PURE__ */ jsx45(StepDetailPanel, {
-            step: selectedStep,
-            diagnostics: selectedDiagnostics,
-            executionSummary: selectedExecutionSummary,
-            executionRecords: selectedExecutionRecords,
-            onClose: clearSelection
-          }))
-        ]
-      }),
-      showJsonDialog && /* @__PURE__ */ jsx45(WorkflowJsonDialog, {
-        workflow: activeWorkflow,
-        isEditing,
-        onApply: (wf) => onWorkflowChange?.(wf),
-        onClose: () => setShowJsonDialog(false)
-      })
-    ]
+              ]
+            }),
+            !hideDetailPanel && selectedStep && (isEditing ? /* @__PURE__ */ jsx45(StepEditorPanel, {
+              step: selectedStep,
+              availableToolNames,
+              allStepIds,
+              toolSchemas,
+              diagnostics: editDiagnostics.filter((d) => d.location.stepId === selectedStep.id),
+              workflowInputSchema: activeWorkflow?.inputSchema,
+              workflowOutputSchema: activeWorkflow?.outputSchema,
+              onChange: (updates) => updateStep(selectedStep.id, updates),
+              onWorkflowMetaChange: updateWorkflowMeta,
+              onClose: clearSelection
+            }) : /* @__PURE__ */ jsx45(StepDetailPanel, {
+              step: selectedStep,
+              diagnostics: selectedDiagnostics,
+              executionSummary: selectedExecutionSummary,
+              executionRecords: selectedExecutionRecords,
+              onClose: clearSelection
+            }))
+          ]
+        }),
+        showJsonDialog && /* @__PURE__ */ jsx45(WorkflowJsonDialog, {
+          workflow: activeWorkflow,
+          isEditing,
+          onApply: (wf) => onWorkflowChange?.(wf),
+          onClose: () => setShowJsonDialog(false)
+        })
+      ]
+    })
   });
 }
 export {
   useWorkflowExecution,
+  useToolSchemas,
+  useToolDisplayName,
   useDarkMode,
   resetStepCounter,
   deriveStepSummaries,
@@ -6750,6 +6899,7 @@ export {
   buildLayout,
   buildEditableLayout,
   WorkflowViewer,
+  ToolSchemasContext,
   Textarea,
   Switch,
   StepPalette,
@@ -6778,4 +6928,4 @@ export {
   Button
 };
 
-//# debugId=7F913F2566A96F9364756E2164756E21
+//# debugId=07137E025746F6F564756E2164756E21