@arbidocs/blocks 0.4.73 → 0.4.74

package/dist/workflow-canvas/index.cjs

@@ -2,10 +2,10 @@
 'use strict';
 
 var chunkMUMH3Z6K_cjs = require('../chunk-MUMH3Z6K.cjs');
-var chunkIUR565UW_cjs = require('../chunk-IUR565UW.cjs');
+var chunk5LP54CWR_cjs = require('../chunk-5LP54CWR.cjs');
 require('../chunk-YJQVLVBJ.cjs');
 require('../chunk-ZW6FPIFC.cjs');
-var chunkGTNUQBXI_cjs = require('../chunk-GTNUQBXI.cjs');
+var chunkP2RBE3FD_cjs = require('../chunk-P2RBE3FD.cjs');
 require('../chunk-7RGLTF76.cjs');
 require('../chunk-3AFWGEDJ.cjs');
 require('../chunk-VFUWWH52.cjs');
@@ -15,7 +15,7 @@ require('../chunk-2EI7NCUA.cjs');
 require('../chunk-Z5VUZ6YD.cjs');
 require('../chunk-7D737FLE.cjs');
 require('../chunk-OB5F4577.cjs');
-require('../chunk-V3L5DONY.cjs');
+require('../chunk-B4SRYJLM.cjs');
 require('../chunk-7UTB4PHM.cjs');
 require('../chunk-FX3K6LNZ.cjs');
 require('../chunk-PPCATBOY.cjs');
@@ -47,11 +47,11 @@ function withSteps(workflow, steps, layout) {
   const run = workflow.run.kind === "steps" ? workflow.run : { kind: "steps", steps: [] };
   return {
     ...workflow,
-    run: { ...run, steps: chunkGTNUQBXI_cjs.orderSteps(steps), layout: layout ?? run.layout }
+    run: { ...run, steps: chunkP2RBE3FD_cjs.orderSteps(steps), layout: layout ?? run.layout }
   };
 }
 var layoutOf = (workflow) => workflow.run.kind === "steps" && workflow.run.layout || {};
-var explicit = (steps) => steps.map((s) => ({ ...s, after: chunkGTNUQBXI_cjs.stepDependencies(steps, s.id) }));
+var explicit = (steps) => steps.map((s) => ({ ...s, after: chunkP2RBE3FD_cjs.stepDependencies(steps, s.id) }));
 function stepIdFor(steps, title) {
   const base = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^[^a-z]+/, "") || "step";
   const taken = new Set(steps.map((s) => s.id));
@@ -73,13 +73,13 @@ function blankStep(kind, id, title) {
     case "upload":
       return { id, kind, title };
     case "agent":
-      return { id, kind, title, run: { kind: "prompt", promptTemplate: "" } };
+      return { id, kind, title };
     case "review":
       return { id, kind, title, instructions: "" };
   }
 }
 function addStep(workflow, kind, options = {}) {
-  const steps = explicit(chunkGTNUQBXI_cjs.workflowSteps(workflow));
+  const steps = explicit(chunkP2RBE3FD_cjs.workflowSteps(workflow));
   const title = options.title ?? DEFAULT_TITLES[kind];
   const id = stepIdFor(steps, title);
   const step = { ...blankStep(kind, id, title), after: options.after ? [options.after] : [] };
@@ -88,7 +88,7 @@ function addStep(workflow, kind, options = {}) {
   return { workflow: withSteps(workflow, [...steps, step], layout), id };
 }
 function removeStep(workflow, id) {
-  const steps = explicit(chunkGTNUQBXI_cjs.workflowSteps(workflow));
+  const steps = explicit(chunkP2RBE3FD_cjs.workflowSteps(workflow));
   const removed = steps.find((s) => s.id === id);
   if (!removed) return workflow;
   const bridged = steps.filter((s) => s.id !== id).map(
@@ -101,8 +101,8 @@ function removeStep(workflow, id) {
   return withSteps(workflow, bridged, layout);
 }
 function connectSteps(workflow, from, to) {
-  const steps = explicit(chunkGTNUQBXI_cjs.workflowSteps(workflow));
-  if (from === to || !steps.some((s) => s.id === from) || chunkGTNUQBXI_cjs.dependsOn(steps, from, to)) {
+  const steps = explicit(chunkP2RBE3FD_cjs.workflowSteps(workflow));
+  if (from === to || !steps.some((s) => s.id === from) || chunkP2RBE3FD_cjs.dependsOn(steps, from, to)) {
     return workflow;
   }
   return withSteps(
@@ -112,16 +112,16 @@ function connectSteps(workflow, from, to) {
     )
   );
 }
-var wouldCycle = (workflow, from, to) => from === to || chunkGTNUQBXI_cjs.dependsOn(chunkGTNUQBXI_cjs.workflowSteps(workflow), from, to);
+var wouldCycle = (workflow, from, to) => from === to || chunkP2RBE3FD_cjs.dependsOn(chunkP2RBE3FD_cjs.workflowSteps(workflow), from, to);
 function disconnectSteps(workflow, from, to) {
-  const steps = explicit(chunkGTNUQBXI_cjs.workflowSteps(workflow));
+  const steps = explicit(chunkP2RBE3FD_cjs.workflowSteps(workflow));
   return withSteps(
     workflow,
     steps.map((s) => s.id === to ? { ...s, after: (s.after ?? []).filter((d) => d !== from) } : s)
   );
 }
 function updateStep(workflow, id, patch) {
-  const steps = explicit(chunkGTNUQBXI_cjs.workflowSteps(workflow));
+  const steps = explicit(chunkP2RBE3FD_cjs.workflowSteps(workflow));
   return withSteps(
     workflow,
     steps.map(
@@ -135,7 +135,7 @@ var renameIn = (text, from, to) => text.replace(
 );
 function renameInput(workflow, from, to) {
   if (from === to) return workflow;
-  const steps = chunkGTNUQBXI_cjs.workflowSteps(workflow).map((s) => {
+  const steps = chunkP2RBE3FD_cjs.workflowSteps(workflow).map((s) => {
     if (s.kind === "agent")
       return {
         ...s,
@@ -149,13 +149,13 @@ function renameInput(workflow, from, to) {
   return withSteps(workflow, steps);
 }
 function moveStep(workflow, id, position) {
-  return withSteps(workflow, chunkGTNUQBXI_cjs.workflowSteps(workflow), { ...layoutOf(workflow), [id]: position });
+  return withSteps(workflow, chunkP2RBE3FD_cjs.workflowSteps(workflow), { ...layoutOf(workflow), [id]: position });
 }
 var COLUMN = 300;
 var ROW = 140;
 function autoLayout(steps) {
   const layout = {};
-  chunkGTNUQBXI_cjs.stepLevels(steps).forEach(
+  chunkP2RBE3FD_cjs.stepLevels(steps).forEach(
     (level, x) => level.forEach((s, y) => {
       layout[s.id] = { x: x * COLUMN, y: (y - (level.length - 1) / 2) * ROW };
     })
@@ -163,7 +163,7 @@ function autoLayout(steps) {
   return layout;
 }
 function layoutWithDefaults(workflow) {
-  const auto = autoLayout(chunkGTNUQBXI_cjs.workflowSteps(workflow));
+  const auto = autoLayout(chunkP2RBE3FD_cjs.workflowSteps(workflow));
   return { ...auto, ...layoutOf(workflow) };
 }
 var DEFAULT_STEP_INSPECTOR_LABELS = {
@@ -178,10 +178,13 @@ var DEFAULT_STEP_INSPECTOR_LABELS = {
   fieldType: "Type",
   required: "Required",
   runs: "Runs",
+  chooseRun: "Choose a skill or write an instruction\u2026",
   ownPrompt: "Its own instruction",
   prompt: "Instruction",
   promptHint: "Use {{field}} for an input and {{steps.<id>}} for an earlier step\u2019s answer.",
   inputFor: "Input",
+  inputHint: "Type a value, or use a field: {fields}",
+  inputHintNoFields: "Type a value, or add a form field to fill it from.",
   thread: "Where it runs",
   threadMain: "In the run\u2019s thread (sees the conversation so far)",
   threadBranch: "On a branch (delivers only its result to the thread)",
@@ -220,7 +223,7 @@ function StepInspector({
   testId = "step-inspector"
 }) {
   const l = { ...DEFAULT_STEP_INSPECTOR_LABELS, ...labels };
-  const steps = chunkGTNUQBXI_cjs.workflowSteps(workflow);
+  const steps = chunkP2RBE3FD_cjs.workflowSteps(workflow);
   const step = steps.find((s) => s.id === stepId);
   const run = workflow.run.kind === "steps" ? workflow.run : void 0;
   if (!step || !run) {
@@ -245,7 +248,7 @@ function StepInspector({
     ] });
   }
   const patch = (p) => onChange(updateStep(workflow, step.id, p));
-  const deps = chunkGTNUQBXI_cjs.stepDependencies(steps, step.id);
+  const deps = chunkP2RBE3FD_cjs.stepDependencies(steps, step.id);
   const titleOf = (id) => steps.find((s) => s.id === id)?.title ?? id;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", "data-testid": `${testId}-step`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
@@ -329,7 +332,17 @@ function StepInspector({
         }
       ) })
     ] }),
-    step.kind === "agent" && /* @__PURE__ */ jsxRuntime.jsx(AgentSettings, { step, workflows, patch, l, testId }),
+    step.kind === "agent" && /* @__PURE__ */ jsxRuntime.jsx(
+      AgentSettings,
+      {
+        step,
+        workflows,
+        fields: chunkP2RBE3FD_cjs.runFields(workflow).map((f) => f.name),
+        patch,
+        l,
+        testId
+      }
+    ),
     step.kind === "review" && /* @__PURE__ */ jsxRuntime.jsx(Field, { label: l.instructions, hint: l.instructionsHint, children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Textarea,
       {
@@ -442,42 +455,77 @@ function FormFields({
     )
   ] }) });
 }
+var OWN_PROMPT = "__prompt";
+function prefillSkillInputs(target, fields, current = {}) {
+  const out = {};
+  for (const f of target?.inputs ?? []) {
+    const typed = current[f.name];
+    if (typed) out[f.name] = typed;
+    else if (fields.includes(f.name)) out[f.name] = `{{${f.name}}}`;
+  }
+  return out;
+}
 function AgentSettings({
   step,
   workflows,
+  fields,
   patch,
   l,
   testId
 }) {
   const target = step.workflow ? workflows.find((w) => w.id === step.workflow) : void 0;
+  const value = step.workflow ?? (step.run ? OWN_PROMPT : "");
+  const codes = fields.map((f) => `{{${f}}}`).join(", ");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Field, { label: l.runs, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
         className: selectClass,
-        value: step.workflow ?? "",
-        onChange: (e) => e.target.value ? patch({ workflow: e.target.value, run: void 0, with: step.with ?? {} }) : patch({
-          workflow: void 0,
-          with: void 0,
-          run: { kind: "prompt", promptTemplate: "" }
-        }),
+        value,
+        onChange: (e) => {
+          const id = e.target.value;
+          if (id === OWN_PROMPT)
+            patch({
+              workflow: void 0,
+              with: void 0,
+              run: { kind: "prompt", promptTemplate: "" }
+            });
+          else if (id)
+            patch({
+              workflow: id,
+              run: void 0,
+              with: prefillSkillInputs(
+                workflows.find((w) => w.id === id),
+                fields,
+                step.with
+              )
+            });
+        },
         "data-testid": `${testId}-runs`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: l.ownPrompt }),
+          !value && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: l.chooseRun }),
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: OWN_PROMPT, children: l.ownPrompt }),
           workflows.map((w) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: w.id, children: w.title }, w.id)),
           step.workflow && !target && /* @__PURE__ */ jsxRuntime.jsx("option", { value: step.workflow, children: step.workflow })
         ]
       }
     ) }),
-    step.workflow ? (target?.inputs ?? []).map((f) => /* @__PURE__ */ jsxRuntime.jsx(Field, { label: `${l.inputFor}: ${f.label}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Input,
+    step.workflow ? (target?.inputs ?? []).map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+      Field,
       {
-        value: step.with?.[f.name] ?? "",
-        placeholder: `{{${f.name}}}`,
-        onChange: (e) => patch({ with: { ...step.with, [f.name]: e.target.value } }),
-        "data-testid": `${testId}-with-${f.name}`
-      }
-    ) }, f.name)) : step.run?.kind === "prompt" ? /* @__PURE__ */ jsxRuntime.jsx(Field, { label: l.prompt, hint: l.promptHint, children: /* @__PURE__ */ jsxRuntime.jsx(
+        label: `${l.inputFor}: ${f.label}`,
+        hint: step.with?.[f.name] ? void 0 : codes ? l.inputHint.replace("{fields}", codes) : l.inputHintNoFields,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            value: step.with?.[f.name] ?? "",
+            onChange: (e) => patch({ with: { ...step.with, [f.name]: e.target.value } }),
+            "data-testid": `${testId}-with-${f.name}`
+          }
+        )
+      },
+      f.name
+    )) : step.run?.kind === "prompt" ? /* @__PURE__ */ jsxRuntime.jsx(Field, { label: l.prompt, hint: l.promptHint, children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Textarea,
       {
         value: step.run.promptTemplate,
@@ -539,7 +587,7 @@ function triggerSummary(trigger, options = {}) {
     case "once":
       return trigger.runAt ? new Date(trigger.runAt).toLocaleString() : l.starts.once;
     case "repeat":
-      return trigger.rrule ? chunkIUR565UW_cjs.describeRRule(trigger.rrule) : l.starts.repeat;
+      return trigger.rrule ? chunk5LP54CWR_cjs.describeRRule(trigger.rrule) : l.starts.repeat;
     case "event":
       return trigger.eventKind && options.eventLabel?.(trigger.eventKind) || trigger.eventKind || l.starts.event;
     case "task":
@@ -594,7 +642,7 @@ function TriggerInspector({
         }
       )
     ] }),
-    trigger.start === "repeat" && /* @__PURE__ */ jsxRuntime.jsx(chunkIUR565UW_cjs.RecurrenceBuilder, { rrule: trigger.rrule, onChange: (rrule) => set({ rrule }) }),
+    trigger.start === "repeat" && /* @__PURE__ */ jsxRuntime.jsx(chunk5LP54CWR_cjs.RecurrenceBuilder, { rrule: trigger.rrule, onChange: (rrule) => set({ rrule }) }),
     trigger.start === "event" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { className: "text-xs", children: l.event }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -630,7 +678,7 @@ function TriggerInspector({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { className: "text-xs", children: l.agent }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkIUR565UW_cjs.AgentSelect,
+        chunk5LP54CWR_cjs.AgentSelect,
         {
           agents,
           value: trigger.agentId,
@@ -658,6 +706,45 @@ function TriggerInspector({
     ] })
   ] });
 }
+
+// src/workflow-canvas/viewport.ts
+var READABLE_ZOOM = 0.7;
+var DEFAULT_W = 256;
+var DEFAULT_H = 80;
+var MARGIN = 48;
+var sizeOf = (n) => ({
+  w: n.measured?.width ?? DEFAULT_W,
+  h: n.measured?.height ?? DEFAULT_H
+});
+function readableViewport(nodes, fittedZoom, frame, {
+  anchor,
+  centre = false,
+  reserveRight = 0
+} = {}) {
+  if (fittedZoom >= READABLE_ZOOM || !frame.height || nodes.length === 0) return null;
+  const z = READABLE_ZOOM;
+  const at = nodes.find((n) => n.id === anchor) ?? nodes.reduce((a, b) => b.position.x < a.position.x ? b : a);
+  const { w, h } = sizeOf(at);
+  const y = frame.height / 2 - (at.position.y + h / 2) * z;
+  if (centre && at.id === anchor) {
+    const visible = Math.max(0, frame.width - reserveRight);
+    return { x: visible / 2 - (at.position.x + w / 2) * z, y, zoom: z };
+  }
+  return { x: MARGIN - at.position.x * z, y, zoom: z };
+}
+function revealCenter(node, view, frame, reserveRight = 0) {
+  const { w, h } = sizeOf(node);
+  const { x, y, zoom } = view;
+  const left = node.position.x * zoom + x;
+  const top = node.position.y * zoom + y;
+  const right = frame.width - reserveRight;
+  if (left >= 16 && top >= 16 && left + w * zoom <= right - 16 && top + h * zoom <= frame.height - 16)
+    return null;
+  return {
+    x: node.position.x + w / 2 + reserveRight / 2 / zoom,
+    y: node.position.y + h / 2
+  };
+}
 var DEFAULT_WORKFLOW_CANVAS_LABELS = {
   form: "Form",
   upload: "Upload",
@@ -672,12 +759,13 @@ var DEFAULT_WORKFLOW_CANVAS_LABELS = {
   },
   addNext: "Add the next step",
   runs: "Runs \u201C{name}\u201D",
-  instruction: "No instruction yet",
+  chooseRun: "Choose a skill or write an instruction",
   fields: "{count} fields",
   noFields: "No fields yet",
   approvedBy: "A person approves",
   emptyTitle: "Start your workflow",
-  emptyHint: "Add the first step: what should happen when it starts?"
+  emptyHint: "Add the first step: what should happen when it starts?",
+  fitView: "Fit view"
 };
 var TRIGGER_NODE = "__trigger";
 var STEP_KIND_ICONS = {
@@ -802,7 +890,6 @@ function TriggerNode({ data }) {
   );
 }
 var NODE_TYPES = { step: StepNode, trigger: TriggerNode };
-var READABLE_ZOOM = 0.7;
 var firstWords = (text, n = 14) => {
   const words = text.trim().split(/\s+/);
   return words.length > n ? `${words.slice(0, n).join(" ")}\u2026` : text.trim();
@@ -813,7 +900,8 @@ function summaryOf(step, l, workflowTitle) {
     case "agent":
       if (step.workflow)
         return l.runs.replace("{name}", workflowTitle?.(step.workflow) ?? step.workflow);
-      return step.run?.kind === "prompt" && step.run.promptTemplate.trim() ? firstWords(step.run.promptTemplate) : l.instruction;
+      if (step.run?.kind === "operation") return void 0;
+      return step.run?.kind === "prompt" && step.run.promptTemplate.trim() ? firstWords(step.run.promptTemplate) : l.chooseRun;
     case "form":
       return step.inputs.length ? step.inputs.length === 1 ? step.inputs[0].label : l.fields.replace("{count}", String(step.inputs.length)) : l.noFields;
     case "upload":
@@ -827,6 +915,7 @@ function WorkflowCanvas({
   onChange,
   selected = null,
   onSelect,
+  focus,
   onAddAfter,
   phases,
   workflowTitle,
@@ -838,12 +927,12 @@ function WorkflowCanvas({
   testId = "workflow-canvas"
 }) {
   const l = react.useMemo(() => ({ ...DEFAULT_WORKFLOW_CANVAS_LABELS, ...labels }), [labels]);
-  const steps = chunkGTNUQBXI_cjs.workflowSteps(workflow);
+  const steps = chunkP2RBE3FD_cjs.workflowSteps(workflow);
   const editable = !!onChange;
   const built = react.useMemo(() => {
     const layout = layoutWithDefaults(workflow);
-    const all = chunkGTNUQBXI_cjs.workflowSteps(workflow);
-    const roots = all.filter((s) => chunkGTNUQBXI_cjs.stepDependencies(all, s.id).length === 0);
+    const all = chunkP2RBE3FD_cjs.workflowSteps(workflow);
+    const roots = all.filter((s) => chunkP2RBE3FD_cjs.stepDependencies(all, s.id).length === 0);
     const triggerNode = trigger ? [
       {
         id: TRIGGER_NODE,
@@ -880,7 +969,7 @@ function WorkflowCanvas({
   react.useEffect(() => setNodes(built), [built]);
   const edges = react.useMemo(
     () => steps.flatMap((s) => {
-      const deps = chunkGTNUQBXI_cjs.stepDependencies(steps, s.id);
+      const deps = chunkP2RBE3FD_cjs.stepDependencies(steps, s.id);
       const from = deps.length ? deps : trigger ? [TRIGGER_NODE] : [];
       return from.map((d) => ({
         id: `${d}->${s.id}`,
@@ -918,46 +1007,57 @@ function WorkflowCanvas({
   );
   const frame = react.useRef(null);
   const flowRef = react.useRef(null);
-  const onInit = react.useCallback(
-    async (flow) => {
-      flowRef.current = flow;
+  const hasTrigger = !!trigger;
+  const selectedRef = react.useRef(selected);
+  selectedRef.current = selected;
+  const fit = react.useCallback(
+    async (flow, anchorOnSelection) => {
       await flow.fitView({
         padding: { top: "48px", bottom: "48px", left: "48px", right: `${reserveRight + 48}px` },
         maxZoom: 1
       });
-      const height = frame.current?.clientHeight;
-      const shown = flow.getNodes();
-      if (flow.getZoom() >= READABLE_ZOOM || !height || !shown.length) return;
-      const left = Math.min(...shown.map((n) => n.position.x));
-      const ys = shown.map((n) => n.position.y + (n.measured?.height ?? 0) / 2);
-      const middle = (Math.min(...ys) + Math.max(...ys)) / 2;
-      flow.setViewport({
-        x: 48 - left * READABLE_ZOOM,
-        y: height / 2 - middle * READABLE_ZOOM,
-        zoom: READABLE_ZOOM
-      });
+      const box = frame.current;
+      const picked = anchorOnSelection ? selectedRef.current : null;
+      const view = readableViewport(
+        flow.getNodes(),
+        flow.getZoom(),
+        { width: box?.clientWidth ?? 0, height: box?.clientHeight ?? 0 },
+        {
+          anchor: picked ?? (hasTrigger ? TRIGGER_NODE : null),
+          centre: !!picked,
+          reserveRight
+        }
+      );
+      if (view) await flow.setViewport(view);
+    },
+    [reserveRight, hasTrigger]
+  );
+  const onInit = react.useCallback(
+    async (flow) => {
+      flowRef.current = flow;
+      await fit(flow, false);
     },
-    [reserveRight]
+    [fit]
   );
+  const target = focus ?? selected;
+  const revealed = react.useRef(null);
   react.useEffect(() => {
     const flow = flowRef.current;
     const box = frame.current;
-    const node = selected ? flow?.getNode(selected) : void 0;
-    if (!flow || !box || !node) return;
-    const { x, y, zoom } = flow.getViewport();
-    const w = (node.measured?.width ?? 256) * zoom;
-    const h = (node.measured?.height ?? 80) * zoom;
-    const left = node.position.x * zoom + x;
-    const top = node.position.y * zoom + y;
-    const right = box.clientWidth - reserveRight;
-    if (left >= 16 && top >= 16 && left + w <= right - 16 && top + h <= box.clientHeight - 16)
-      return;
-    void flow.setCenter(
-      node.position.x + (node.measured?.width ?? 256) / 2 + reserveRight / 2 / zoom,
-      node.position.y + (node.measured?.height ?? 80) / 2,
-      { zoom, duration: 250 }
+    const node = target ? flow?.getNode(target) : void 0;
+    const key = `${target}:${reserveRight}`;
+    if (!target) revealed.current = null;
+    if (!flow || !box || !node || revealed.current === key) return;
+    revealed.current = key;
+    const view = flow.getViewport();
+    const centre = revealCenter(
+      node,
+      view,
+      { width: box.clientWidth, height: box.clientHeight },
+      reserveRight
     );
-  }, [selected, nodes, reserveRight]);
+    if (centre) void flow.setCenter(centre.x, centre.y, { zoom: view.zoom, duration: 250 });
+  }, [target, nodes, reserveRight]);
   const onDelete = react.useCallback(
     ({ nodes: gone, edges: cut }) => {
       if (!onChange) return;
@@ -999,12 +1099,21 @@ function WorkflowCanvas({
             elementsSelectable: true,
             deleteKeyCode: editable ? ["Backspace", "Delete"] : null,
             onInit,
-            fitViewOptions: { padding: 0.2, maxZoom: 1 },
             minZoom: 0.3,
             proOptions: { hideAttribution: true },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { variant: react$1.BackgroundVariant.Dots, gap: 18, size: 1.5 }),
-              /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false, position: "bottom-left" }),
+              /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false, showFitView: false, position: "bottom-left", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.ControlButton,
+                {
+                  className: "react-flow__controls-fitview",
+                  onClick: () => flowRef.current && void fit(flowRef.current, true),
+                  title: l.fitView,
+                  "aria-label": l.fitView,
+                  "data-testid": `${testId}-fit`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, {})
+                }
+              ) }),
               steps.length > 3 && /* @__PURE__ */ jsxRuntime.jsx(
                 react$1.MiniMap,
                 {
@@ -1100,8 +1209,8 @@ function WorkflowBuilder({
   const [mode, setMode] = react.useState("design");
   const [adding, setAdding] = react.useState(false);
   const { workflow, trigger } = value;
-  const steps = chunkGTNUQBXI_cjs.workflowSteps(workflow);
-  const problems = chunkGTNUQBXI_cjs.validateWorkflowGraph(steps);
+  const steps = chunkP2RBE3FD_cjs.workflowSteps(workflow);
+  const problems = chunkP2RBE3FD_cjs.validateWorkflowGraph(steps);
   const titles = react.useMemo(() => new Map(workflows.map((w) => [w.id, w.title])), [workflows]);
   const setWorkflow = (next) => onChange({ ...value, workflow: next });
   const addAfter = (from, kind) => {
@@ -1226,6 +1335,7 @@ function WorkflowBuilder({
           onChange: setWorkflow,
           selected,
           onSelect: setSelected,
+          focus: selected ?? (panelOpen ? TRIGGER_NODE : null),
           onAddAfter: addAfter,
           trigger: { title: l.start, summary },
           workflowTitle: (id) => titles.get(id),
@@ -1315,13 +1425,13 @@ function WorkflowPreview({
   renderIcon,
   testId
 }) {
-  const run = chunkIUR565UW_cjs.useWorkflowPreview(workflow, {
+  const run = chunk5LP54CWR_cjs.useWorkflowPreview(workflow, {
     resolveWorkflow: (id) => workflows.find((w) => w.id === id),
     compose,
     answer
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkGTNUQBXI_cjs.WorkflowRunner,
+    chunkP2RBE3FD_cjs.WorkflowRunner,
     {
       workflow,
       run,
@@ -1362,7 +1472,7 @@ function triggerFields(trigger, clearOthers) {
   return {
     timezone: trigger.timezone,
     rrule: trigger.start === "repeat" ? trigger.rrule.trim() : none,
-    run_at: trigger.start === "once" ? chunkIUR565UW_cjs.localInputToIso(trigger.runAt) : none,
+    run_at: trigger.start === "once" ? chunk5LP54CWR_cjs.localInputToIso(trigger.runAt) : none,
     event_kind: trigger.start === "event" ? trigger.eventKind.trim() : none,
     after_conversation_ext_id: trigger.start === "task" ? trigger.afterTaskId : none,
     on_demand: trigger.start === "manual"
@@ -1376,7 +1486,7 @@ function plan(value, options) {
     criteria: [],
     max_passes: 3,
     documents: [],
-    steps: chunkGTNUQBXI_cjs.toPlanSteps(value.workflow, options)
+    steps: chunkP2RBE3FD_cjs.toPlanSteps(value.workflow, options)
   };
 }
 function builderToWorkflowRequest(value, workspaceId, options = {}) {
@@ -1411,7 +1521,7 @@ function builderToWorkflowUpdate(value, options = {}) {
 }
 function workflowRecordToBuilder(record) {
   const planned = record.plan?.steps ?? [];
-  const steps = planned.length ? chunkGTNUQBXI_cjs.fromPlanSteps(planned) : record.prompt || record.skill_ref ? [
+  const steps = planned.length ? chunkP2RBE3FD_cjs.fromPlanSteps(planned) : record.prompt || record.skill_ref ? [
     {
       id: "work",
       kind: "agent",
@@ -1419,7 +1529,7 @@ function workflowRecordToBuilder(record) {
       ...record.skill_ref ? { workflow: record.skill_ref } : { run: { kind: "prompt", promptTemplate: record.prompt } }
     }
   ] : [];
-  const when = chunkIUR565UW_cjs.workflowWhen(record);
+  const when = chunk5LP54CWR_cjs.workflowWhen(record);
   return {
     workflow: {
       id: record.external_id,
@@ -1428,12 +1538,12 @@ function workflowRecordToBuilder(record) {
       inputs: [],
       landing: "chat",
       schedulable: false,
-      run: { kind: "steps", steps, layout: chunkGTNUQBXI_cjs.layoutFromPlanSteps(planned ?? []) }
+      run: { kind: "steps", steps, layout: chunkP2RBE3FD_cjs.layoutFromPlanSteps(planned ?? []) }
     },
     trigger: {
       ...DEFAULT_WORKFLOW_TRIGGER,
       start: when === "now" ? "manual" : when,
-      runAt: chunkIUR565UW_cjs.isoToLocalInput(record.run_at),
+      runAt: chunk5LP54CWR_cjs.isoToLocalInput(record.run_at),
       rrule: record.rrule ?? "",
       timezone: record.timezone || DEFAULT_WORKFLOW_TRIGGER.timezone,
       eventKind: record.event_kind ?? "",
@@ -1494,7 +1604,7 @@ function ConnectedWorkflowBuilder({
     () => [
       ...hostWorkflows,
       ...(skills.data ?? []).map(
-        (s) => chunkGTNUQBXI_cjs.skillToWorkflow({
+        (s) => chunkP2RBE3FD_cjs.skillToWorkflow({
           name: s.name,
           slug: s.slug,
           description: s.description,
@@ -1510,7 +1620,7 @@ function ConnectedWorkflowBuilder({
   }));
   const tasks = (conversations.data ?? []).filter((c) => c.status && c.status !== "done").map((c) => ({ value: c.external_id, label: c.title || c.external_id }));
   const options = { resolveWorkflow: (wid) => workflows.find((w) => w.id === wid), compose };
-  const problem = triggerProblem(value.trigger) ?? (chunkGTNUQBXI_cjs.validateWorkflowGraph(chunkGTNUQBXI_cjs.workflowSteps(value.workflow)).length ? "graph" : null);
+  const problem = triggerProblem(value.trigger) ?? (chunkP2RBE3FD_cjs.validateWorkflowGraph(chunkP2RBE3FD_cjs.workflowSteps(value.workflow)).length ? "graph" : null);
   const busy = create.isPending || update.isPending || run.isPending;
   const save = async () => {
     if (!workspaceId) return void 0;