@arbidocs/blocks 0.4.73 → 0.4.74

package/dist/workflow-canvas/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { useConnection } from '../chunk-OYMWV45N.js';
-import { describeRRule, RecurrenceBuilder, AgentSelect, useWorkflowPreview, workflowWhen, isoToLocalInput, localInputToIso } from '../chunk-QDNXEB3T.js';
+import { describeRRule, RecurrenceBuilder, AgentSelect, useWorkflowPreview, workflowWhen, isoToLocalInput, localInputToIso } from '../chunk-KOSGX3UK.js';
 import '../chunk-CKB64Z4R.js';
 import '../chunk-P6GHJSLR.js';
-import { workflowSteps, dependsOn, stepLevels, stepDependencies, validateWorkflowGraph, WorkflowRunner, fromPlanSteps, layoutFromPlanSteps, skillToWorkflow, orderSteps, toPlanSteps } from '../chunk-2P3T23C7.js';
+import { workflowSteps, dependsOn, stepLevels, stepDependencies, runFields, validateWorkflowGraph, WorkflowRunner, fromPlanSteps, layoutFromPlanSteps, skillToWorkflow, orderSteps, toPlanSteps } from '../chunk-YWYVIQ7T.js';
 import '../chunk-4WWM3GQ5.js';
 import '../chunk-RFXJYIDV.js';
 import '../chunk-DPLRHEJZ.js';
@@ -13,7 +13,7 @@ import '../chunk-YU2KUMGE.js';
 import '../chunk-DDF5GPIJ.js';
 import '../chunk-XD2M6LIG.js';
 import '../chunk-S7PSMMRG.js';
-import '../chunk-3VQYJBOI.js';
+import '../chunk-HOXKR26S.js';
 import '../chunk-AA3PT6KR.js';
 import '../chunk-SLSBJRWW.js';
 import '../chunk-NPLYHR2E.js';
@@ -25,9 +25,9 @@ import '../chunk-VUNV25KB.js';
 import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import { useWorkflows, useSkills, useAgents, useConversations, useCreateWorkflow, useUpdateWorkflow, useRunWorkflow } from '@arbidocs/react';
 import { Input, Textarea, Checkbox, Button, cn, Label, Popover, PopoverTrigger, PopoverContent } from '@arbidocs/react/ui';
-import { X, Trash2, Plus, ClipboardCheck, Bot, Upload, FileInput, PencilRuler, Eye, LayoutGrid, Settings2, Play, Loader2, Save, Zap, GitBranch, Check, AlertTriangle, MinusCircle } from 'lucide-react';
+import { X, Trash2, Plus, Maximize, ClipboardCheck, Bot, Upload, FileInput, PencilRuler, Eye, LayoutGrid, Settings2, Play, Loader2, Save, Zap, GitBranch, Check, AlertTriangle, MinusCircle } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { MarkerType, applyNodeChanges, ReactFlow, Background, BackgroundVariant, Controls, MiniMap, Handle, Position } from '@xyflow/react';
+import { MarkerType, applyNodeChanges, ReactFlow, Background, BackgroundVariant, Controls, ControlButton, MiniMap, Handle, Position } from '@xyflow/react';
 
 // src/workflow-canvas/edit.ts
 function newSteppedWorkflow(id, title) {
@@ -71,7 +71,7 @@ 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: "" };
   }
@@ -176,10 +176,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)",
@@ -327,7 +330,17 @@ function StepInspector({
         }
       ) })
     ] }),
-    step.kind === "agent" && /* @__PURE__ */ jsx(AgentSettings, { step, workflows, patch, l, testId }),
+    step.kind === "agent" && /* @__PURE__ */ jsx(
+      AgentSettings,
+      {
+        step,
+        workflows,
+        fields: runFields(workflow).map((f) => f.name),
+        patch,
+        l,
+        testId
+      }
+    ),
     step.kind === "review" && /* @__PURE__ */ jsx(Field, { label: l.instructions, hint: l.instructionsHint, children: /* @__PURE__ */ jsx(
       Textarea,
       {
@@ -440,42 +453,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Field, { label: l.runs, children: /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: l.ownPrompt }),
+          !value && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: l.chooseRun }),
+          /* @__PURE__ */ jsx("option", { value: OWN_PROMPT, children: l.ownPrompt }),
           workflows.map((w) => /* @__PURE__ */ jsx("option", { value: w.id, children: w.title }, w.id)),
           step.workflow && !target && /* @__PURE__ */ jsx("option", { value: step.workflow, children: step.workflow })
         ]
       }
     ) }),
-    step.workflow ? (target?.inputs ?? []).map((f) => /* @__PURE__ */ jsx(Field, { label: `${l.inputFor}: ${f.label}`, children: /* @__PURE__ */ jsx(
-      Input,
+    step.workflow ? (target?.inputs ?? []).map((f) => /* @__PURE__ */ 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__ */ jsx(Field, { label: l.prompt, hint: l.promptHint, children: /* @__PURE__ */ jsx(
+        label: `${l.inputFor}: ${f.label}`,
+        hint: step.with?.[f.name] ? void 0 : codes ? l.inputHint.replace("{fields}", codes) : l.inputHintNoFields,
+        children: /* @__PURE__ */ jsx(
+          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__ */ jsx(Field, { label: l.prompt, hint: l.promptHint, children: /* @__PURE__ */ jsx(
       Textarea,
       {
         value: step.run.promptTemplate,
@@ -656,6 +704,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",
@@ -670,12 +757,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 = {
@@ -800,7 +888,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();
@@ -811,7 +898,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":
@@ -825,6 +913,7 @@ function WorkflowCanvas({
   onChange,
   selected = null,
   onSelect,
+  focus,
   onAddAfter,
   phases,
   workflowTitle,
@@ -916,46 +1005,57 @@ function WorkflowCanvas({
   );
   const frame = useRef(null);
   const flowRef = useRef(null);
-  const onInit = useCallback(
-    async (flow) => {
-      flowRef.current = flow;
+  const hasTrigger = !!trigger;
+  const selectedRef = useRef(selected);
+  selectedRef.current = selected;
+  const fit = 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 = useCallback(
+    async (flow) => {
+      flowRef.current = flow;
+      await fit(flow, false);
     },
-    [reserveRight]
+    [fit]
   );
+  const target = focus ?? selected;
+  const revealed = useRef(null);
   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 = useCallback(
     ({ nodes: gone, edges: cut }) => {
       if (!onChange) return;
@@ -997,12 +1097,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__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 18, size: 1.5 }),
-              /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-left" }),
+              /* @__PURE__ */ jsx(Controls, { showInteractive: false, showFitView: false, position: "bottom-left", children: /* @__PURE__ */ jsx(
+                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__ */ jsx(Maximize, {})
+                }
+              ) }),
               steps.length > 3 && /* @__PURE__ */ jsx(
                 MiniMap,
                 {
@@ -1224,6 +1333,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),