@arbidocs/blocks 0.4.73 → 0.4.75

package/dist/{chunk-GTNUQBXI.cjs → chunk-P2RBE3FD.cjs}

@@ -3,6 +3,7 @@
 
 var chunkDETZZBG2_cjs = require('./chunk-DETZZBG2.cjs');
 var chunk7D737FLE_cjs = require('./chunk-7D737FLE.cjs');
+var chunkB4SRYJLM_cjs = require('./chunk-B4SRYJLM.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var ui = require('@arbidocs/react/ui');
@@ -599,7 +600,13 @@ function stepStatesFromActivity(events) {
     if (!status || typeof step !== "string") continue;
     const responseId = typeof e.detail?.response_id === "string" ? e.detail.response_id : void 0;
     const error = typeof e.detail?.error === "string" ? e.detail.error : null;
-    states[step] = { status, responseId: responseId ?? states[step]?.responseId ?? null, error };
+    const startedAt = status === "running" ? e.created_at : states[step]?.startedAt;
+    states[step] = {
+      status,
+      responseId: responseId ?? states[step]?.responseId ?? null,
+      error,
+      ...startedAt ? { startedAt } : {}
+    };
   }
   return states;
 }
@@ -805,6 +812,15 @@ function useWorkflowView(options) {
     },
     [steps]
   );
+  const onward = react.useCallback(
+    (id) => {
+      const { steps: s, states: st } = optionsRef.current;
+      const i = s.findIndex((x) => x.id === id);
+      const open = s.slice(i + 1).find((x) => !["done", "skipped"].includes(st[x.id]?.status ?? "pending"));
+      return open?.id ?? following(id);
+    },
+    [following]
+  );
   const action = busy ? "wait" : nextAction(steps, states, current);
   const next = react.useCallback(async () => {
     const { steps: s, states: st, inputs: values } = optionsRef.current;
@@ -826,13 +842,13 @@ function useWorkflowView(options) {
         await optionsRef.current.complete(at);
       }
       setShowErrors(false);
-      setCurrent(following(current) ?? current);
+      setCurrent(onward(at.id) ?? current);
     } catch (e) {
       setActionError(errorMessage(e));
     } finally {
       setBusy(false);
     }
-  }, [current, busy, following]);
+  }, [current, busy, following, onward]);
   const goTo = react.useCallback((stepId) => {
     setShowErrors(false);
     setActionError(null);
@@ -858,9 +874,16 @@ function useWorkflowView(options) {
     }),
     []
   );
+  const currentRef = react.useRef(current);
+  currentRef.current = current;
   const skip = react.useMemo(
-    () => act((id) => optionsRef.current.skip(id)),
-    [act]
+    () => act(async (id) => {
+      await optionsRef.current.skip(id);
+      if (currentRef.current !== id) return;
+      setShowErrors(false);
+      setCurrent(onward(id) ?? id);
+    }),
+    [act, onward]
   );
   const retry = react.useMemo(
     () => options.retry ? act((id) => optionsRef.current.retry?.(id) ?? Promise.resolve()) : void 0,
@@ -900,59 +923,38 @@ function useWorkflowView(options) {
     }
   };
 }
-var DEFAULT_WORKFLOW_RUNNER_LABELS = {
-  back: "Back",
-  next: "Continue",
-  skip: "Skip",
-  skipStep: "Skip this step",
-  finish: "Finish",
-  approve: "Approve",
-  working: "Working\u2026",
-  starting: "Starting\u2026",
-  retry: "Retry",
-  failed: "This step did not finish.",
-  blocked: "Starts after {steps}.",
-  awaitingReview: "Waiting for approval.",
-  approved: "Approved.",
-  skipped: "Skipped.",
-  branch: "Runs alongside; its result joins the thread",
-  complete: "Done",
-  restart: "Start again",
-  filesHeading: "Files ({count})",
-  noFiles: "No files yet."
-};
 function PhaseMark({ phase, icon }) {
-  if (phase === "done") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5" });
-  if (phase === "running") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3.5 animate-spin" });
-  if (phase === "failed") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "size-3.5" });
-  if (phase === "skipped") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusCircle, { className: "size-3.5" });
-  return icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-3.5 items-center justify-center [&_svg]:size-3.5", children: icon }) : null;
+  if (phase === "done") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5 shrink-0" });
+  if (phase === "running") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3.5 shrink-0 animate-spin" });
+  if (phase === "failed") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "size-3.5 shrink-0" });
+  if (phase === "skipped") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusCircle, { className: "size-3.5 shrink-0" });
+  return icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5", children: icon }) : null;
 }
-function WorkflowRunner({
-  workflow,
+var PILL = "flex min-w-0 max-w-full shrink-0 items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1.5 text-xs font-medium";
+var LABEL = "min-w-0 max-w-[12rem] truncate";
+function WorkflowStepBar({
   run,
-  renderAgentOutput,
-  renderReview,
-  onUpload,
-  uploading = false,
-  files,
-  renderUpload,
-  renderStepNote,
-  renderComplete,
-  renderScope,
-  renderDocuments,
-  renderIcon,
-  labels,
-  testIdPrefix = "workflow-run",
-  className
+  levels,
+  doneTitle,
+  doneIcon,
+  icon,
+  tid
 }) {
-  const l = { ...DEFAULT_WORKFLOW_RUNNER_LABELS, ...labels };
-  const { steps, step, isComplete, action } = run;
-  const completion = workflow.run.kind === "steps" ? workflow.run.completion : void 0;
-  const tid = (suffix) => `${testIdPrefix}-${suffix}`;
-  const levels = stepLevels(steps);
-  const crowded = levels.length > 6;
-  const icon = (key) => key && renderIcon ? renderIcon(key) : void 0;
+  const box = react.useRef(null);
+  const measure = react.useRef(null);
+  const row = react.useRef(null);
+  const { width } = chunkB4SRYJLM_cjs.useElementSize(box);
+  const [compact3, setCompact] = react.useState(false);
+  const titles = levels.map((l) => l.map((s) => s.title).join("\0")).join("
") + doneTitle;
+  react.useLayoutEffect(() => {
+    const needed = measure.current?.scrollWidth ?? 0;
+    setCompact(width > 0 && needed > width);
+  }, [width, titles]);
+  react.useLayoutEffect(() => {
+    if (!compact3) return;
+    const el = row.current?.querySelector('[aria-current="step"]');
+    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [compact3, run.current]);
   const pill = (s) => {
     const phase = run.phaseOf(s.id);
     const current = s.id === run.current;
@@ -963,7 +965,8 @@ function WorkflowRunner({
         onClick: () => run.goTo(s.id),
         disabled: run.busy,
         className: ui.cn(
-          "flex shrink-0 items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1.5 text-xs font-medium transition-colors disabled:cursor-default",
+          PILL,
+          "transition-colors disabled:cursor-default",
           current ? "border-primary bg-primary/10 text-primary" : phase === "failed" ? "border-destructive/40 text-destructive" : phase === "done" || phase === "skipped" || phase === "running" ? "border-primary/30 bg-primary/5 text-primary" : "border-border text-muted-foreground"
         ),
         "aria-current": current ? "step" : void 0,
@@ -973,47 +976,65 @@ function WorkflowRunner({
         "data-testid": tid(`step-${s.id}`),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(PhaseMark, { phase, icon: icon(s.icon) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn(current ? "inline" : crowded ? "hidden" : "hidden @4xl:inline"), children: s.title })
+          (current || !compact3) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL, "data-testid": tid(`step-${s.id}-label`), children: s.title })
         ]
       },
       s.id
     );
   };
-  const nextLabel = action === "skip" ? l.skip : action === "finish" ? l.finish : action === "complete" && step?.kind === "review" ? l.approve : action === "wait" && (run.isRunning || run.busy) ? l.working : (step && !run.isLocked(step.id) ? step.nextLabel : void 0) ?? l.next;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("space-y-6", className), "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "@container", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const done = run.isComplete;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: box, className: "relative min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: measure,
+        "aria-hidden": true,
+        className: "pointer-events-none invisible absolute left-0 top-0 flex w-max items-center gap-1.5",
+        children: [...levels, [{ id: "__done", title: doneTitle }]].map((level, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start gap-1", children: level.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PILL, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: ui.cn(LABEL, "before:content-[attr(data-label)]"),
+                "data-label": s.title
+              }
+            )
+          ] }, s.id)) }),
+          i < levels.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2" })
+        ] }, i))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
       "ol",
       {
-        className: ui.cn("flex w-full items-center gap-1.5", crowded && "overflow-x-auto pb-1"),
+        ref: row,
+        className: ui.cn("flex w-full items-center gap-1.5", compact3 && "overflow-x-auto pb-1"),
+        "data-compact": compact3 || void 0,
         "data-testid": tid("steps"),
         children: [...levels, null].map((level, i) => /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
             className: ui.cn(
-              "flex items-center gap-1.5",
-              i < levels.length && (crowded ? "flex-none" : "min-w-0 flex-1 @4xl:flex-none")
+              "flex min-w-0 items-center gap-1.5",
+              i < levels.length && !compact3 && "flex-1",
+              compact3 && "flex-none"
             ),
             children: [
-              level ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start gap-1", children: level.map(pill) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+              level ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-col items-start gap-1", children: level.map(pill) }) : /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   className: ui.cn(
-                    "flex shrink-0 items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1.5 text-xs font-medium",
-                    isComplete ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground"
+                    PILL,
+                    done ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground"
                   ),
-                  "aria-current": isComplete ? "step" : void 0,
+                  "aria-current": done ? "step" : void 0,
+                  "aria-label": doneTitle,
+                  title: doneTitle,
                   "data-testid": tid("step-done"),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(PhaseMark, { phase: "ready", icon: icon(completion?.icon) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: ui.cn(
-                          isComplete ? "inline" : crowded ? "hidden" : "hidden @4xl:inline"
-                        ),
-                        children: completion?.title ?? l.complete
-                      }
-                    )
+                    /* @__PURE__ */ jsxRuntime.jsx(PhaseMark, { phase: "ready", icon: doneIcon }),
+                    (done || !compact3) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL, children: doneTitle })
                   ]
                 }
               ),
@@ -1022,7 +1043,7 @@ function WorkflowRunner({
                 {
                   className: ui.cn(
                     "h-px",
-                    crowded ? "w-3 flex-none" : "min-w-2 flex-1 @4xl:w-4 @4xl:flex-none",
+                    compact3 ? "w-3 flex-none" : "min-w-2 flex-1",
                     level?.every((s) => ["done", "skipped"].includes(run.phaseOf(s.id))) ? "bg-primary/40" : "bg-border"
                   )
                 }
@@ -1032,7 +1053,76 @@ function WorkflowRunner({
           level ? level.map((s) => s.id).join("+") : "done"
         ))
       }
-    ) }),
+    )
+  ] });
+}
+var DEFAULT_WORKFLOW_RUNNER_LABELS = {
+  back: "Back",
+  next: "Continue",
+  skip: "Skip",
+  skipStep: "Skip this step",
+  finish: "Finish",
+  approve: "Approve",
+  working: "Working\u2026",
+  stepWorking: "{step}\u2026 {elapsed}",
+  starting: "Starting\u2026",
+  retry: "Retry",
+  failed: "This step did not finish.",
+  blocked: "Starts after {steps}.",
+  awaitingReview: "Waiting for approval.",
+  approved: "Approved.",
+  skipped: "Skipped.",
+  branch: "Runs alongside; its result joins the thread",
+  complete: "Done",
+  restart: "Start again",
+  filesHeading: "Already in the workspace ({count})",
+  addedHeading: "Added for this step ({count})",
+  noFiles: "No files yet.",
+  fileReading: "Reading\u2026",
+  fileReady: "Ready",
+  fileFailed: "Could not be read",
+  readingFiles: "Reading {current} of {count} files\u2026"
+};
+function WorkflowRunner({
+  workflow,
+  run,
+  renderAgentOutput,
+  renderReview,
+  onUpload,
+  uploading = false,
+  files,
+  renderUpload,
+  renderStepNote,
+  renderComplete,
+  renderScope,
+  renderDocuments,
+  renderIcon,
+  labels,
+  testIdPrefix = "workflow-run",
+  className
+}) {
+  const l = { ...DEFAULT_WORKFLOW_RUNNER_LABELS, ...labels };
+  const { steps, step, isComplete, action } = run;
+  const completion = workflow.run.kind === "steps" ? workflow.run.completion : void 0;
+  const tid = (suffix) => `${testIdPrefix}-${suffix}`;
+  const levels = stepLevels(steps);
+  const icon = (key) => key && renderIcon ? renderIcon(key) : void 0;
+  const added = step?.kind === "upload" ? (files ?? []).filter((f) => f.addedFor === step.id) : [];
+  const unread = added.filter((f) => f.status === "processing").length;
+  const reading = action === "complete" && unread > 0;
+  const nextLabel = reading ? l.readingFiles.replace("{current}", String(Math.min(added.length - unread + 1, added.length))).replace("{count}", String(added.length)) : action === "skip" ? l.skip : action === "finish" ? l.finish : action === "complete" && step?.kind === "review" ? l.approve : action === "wait" && (run.isRunning || run.busy) ? l.working : (step && !run.isLocked(step.id) ? step.nextLabel : void 0) ?? l.next;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("space-y-6", className), "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowStepBar,
+      {
+        run,
+        levels,
+        doneTitle: completion?.title ?? l.complete,
+        doneIcon: icon(completion?.icon),
+        icon,
+        tid
+      }
+    ),
     isComplete ? renderComplete?.(run) ?? /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { className: "mx-auto max-w-lg p-8 text-center", "data-testid": tid("done"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "mx-auto size-12 text-primary" }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mt-4 text-xl font-semibold", children: completion?.title ?? l.complete }),
@@ -1051,7 +1141,7 @@ function WorkflowRunner({
       "{steps}",
       stepDependencies(steps, step.id).map((d) => steps.find((s) => s.id === d)?.title ?? d).join(", ")
     ) }) }) : step.kind === "form" ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { className: "max-w-2xl space-y-4 p-6", "data-testid": tid(step.id), children: [
-      step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: step.description }),
+      /* @__PURE__ */ jsxRuntime.jsx(StepHeading, { step, icon: icon(step.icon), testId: tid(`${step.id}-title`) }),
       /* @__PURE__ */ jsxRuntime.jsx("fieldset", { disabled: run.isLocked(step.id), className: "contents", children: /* @__PURE__ */ jsxRuntime.jsx(
         SchemaForm,
         {
@@ -1073,7 +1163,7 @@ function WorkflowRunner({
         /* @__PURE__ */ jsxRuntime.jsx(
           chunkDETZZBG2_cjs.UploadDropzone,
           {
-            onFiles: (picked) => void onUpload?.(picked),
+            onFiles: (picked) => void onUpload?.(picked, step),
             uploading,
             disabled: !onUpload,
             accept: step.accept,
@@ -1083,21 +1173,15 @@ function WorkflowRunner({
             testId: tid(`${step.id}-drop`)
           }
         ),
-        files && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", "data-testid": tid(`${step.id}-files`), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: l.filesHeading.replace("{count}", String(files.length)) }),
-          files.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: l.noFiles }),
-          files.slice(0, 6).map((f) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "flex items-center gap-2 text-sm text-muted-foreground",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-3.5 text-primary" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: f.name })
-              ]
-            },
-            f.id
-          ))
-        ] })
+        files && /* @__PURE__ */ jsxRuntime.jsx(
+          UploadFiles,
+          {
+            added,
+            others: files.filter((f) => f.addedFor !== step.id),
+            l,
+            testId: tid(`${step.id}-files`)
+          }
+        )
       ] }),
       run.actionError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: run.actionError }),
       renderStepNote?.(step, run)
@@ -1151,11 +1235,11 @@ function WorkflowRunner({
           ui.Button,
           {
             onClick: () => void run.next(),
-            disabled: action === "wait",
+            disabled: action === "wait" || reading,
             "data-testid": tid("next"),
             children: [
               nextLabel,
-              action === "wait" && (run.isRunning || run.busy) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-4" })
+              reading || action === "wait" && (run.isRunning || run.busy) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-4" })
             ]
           }
         )
@@ -1163,15 +1247,83 @@ function WorkflowRunner({
     ] })
   ] });
 }
-function StepHeading({ step, icon }) {
+function UploadFiles({
+  added,
+  others,
+  l,
+  testId
+}) {
+  const heading = "text-xs font-semibold uppercase tracking-wide text-muted-foreground";
+  const row = (f) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex items-center gap-2 text-sm text-muted-foreground",
+      "data-status": f.status,
+      "data-testid": `${testId}-file-${f.id}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-3.5 shrink-0 text-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", title: f.name, children: f.name }),
+        f.status === "processing" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-1 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3 animate-spin" }),
+          " ",
+          l.fileReading
+        ] }),
+        f.status === "ready" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-1 text-xs text-primary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3" }),
+          " ",
+          l.fileReady
+        ] }),
+        f.status === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "size-3" }),
+          " ",
+          l.fileFailed
+        ] })
+      ]
+    },
+    f.id
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", "data-testid": testId, children: [
+    added.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", "data-testid": `${testId}-added`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: heading, children: l.addedHeading.replace("{count}", String(added.length)) }),
+      added.map(row)
+    ] }),
+    added.length === 0 && others.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: l.noFiles }),
+    others.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "space-y-1", "data-testid": `${testId}-others`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("summary", { className: ui.cn(heading, "cursor-pointer select-none"), children: l.filesHeading.replace("{count}", String(others.length)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 max-h-48 space-y-1 overflow-y-auto", children: others.map(row) })
+    ] })
+  ] });
+}
+function StepHeading({
+  step,
+  icon,
+  testId
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", "data-testid": testId, children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 items-center justify-center text-primary [&_svg]:size-4", children: icon }),
       step.title
     ] }),
     step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: step.description })
   ] });
 }
+function formatElapsed(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const sec = String(total % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+function StepWorking({ title, since, label }) {
+  const seen = react.useRef(Date.now());
+  const start = since && Date.parse(since) || seen.current;
+  const [now, setNow] = react.useState(() => Date.now());
+  react.useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(t);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: label.replace("{step}", title).replace("{elapsed}", formatElapsed(now - start)) });
+}
 function AgentStepBody({
   step,
   run,
@@ -1215,7 +1367,7 @@ function AgentStepBody({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }),
           " ",
-          phase === "ready" ? l.starting : l.working
+          phase === "ready" ? l.starting : /* @__PURE__ */ jsxRuntime.jsx(StepWorking, { title: step.title, since: state?.startedAt, label: l.stepWorking })
         ]
       }
     ),
@@ -1292,5 +1444,5 @@ exports.workflowFromFrontmatter = workflowFromFrontmatter;
 exports.workflowSteps = workflowSteps;
 exports.workflowsAccepting = workflowsAccepting;
 exports.workflowsForHost = workflowsForHost;
-//# sourceMappingURL=chunk-GTNUQBXI.cjs.map
-//# sourceMappingURL=chunk-GTNUQBXI.cjs.map
+//# sourceMappingURL=chunk-P2RBE3FD.cjs.map
+//# sourceMappingURL=chunk-P2RBE3FD.cjs.map