@arbidocs/blocks 0.4.77 → 0.4.78

package/dist/{chunk-34UW6XUQ.js → chunk-WXRCMIAE.js}

@@ -1,12 +1,12 @@
 "use client";
-import { UploadDropzone } from './chunk-EVUEIBNU.js';
 import { FoldSection } from './chunk-XD2M6LIG.js';
+import { UploadDropzone } from './chunk-EVUEIBNU.js';
 import { useElementSize } from './chunk-HOXKR26S.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
-import { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
-import { cn, Button, Textarea, Card, Label, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch } from '@arbidocs/react/ui';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { cn, Popover, PopoverTrigger, PopoverContent, Button, Textarea, Card, Label, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { UserRound, CornerUpLeft, ShieldCheck, MessageSquare, Check, Hourglass, Clock, PenLine, X, ExternalLink, Mail, Table2, CheckCircle2, ArrowLeft, Loader2, ArrowRight, RotateCw, GitBranch, FileText, AlertTriangle, MinusCircle } from 'lucide-react';
+import { Check, Loader2, Hourglass, AlertTriangle, MinusCircle, UserRound, CornerUpLeft, ShieldCheck, MessageSquare, Clock, PenLine, X, ExternalLink, Mail, Table2, CheckCircle2, ArrowLeft, ArrowRight, RotateCw, GitBranch, ChevronLeft, ChevronRight, FileText } from 'lucide-react';
 
 // src/agents/workflows/types.ts
 var EMPTY_WORKFLOW_SCOPE = { folders: [], labels: [] };
@@ -1269,6 +1269,431 @@ function useWorkflowView(options) {
     }
   };
 }
+
+// src/agents/workflows/stepWindow.ts
+var ATTENTION = ["waiting", "failed", "ready"];
+function activeStepId(levels, phaseOf) {
+  const all = levels.flat();
+  for (const phase of ["running", ...ATTENTION]) {
+    const hit = all.find((s) => phaseOf(s.id) === phase);
+    if (hit) return hit.id;
+  }
+  return all[all.length - 1]?.id;
+}
+function primaryOf(steps, phaseOf, current) {
+  return steps.find((s) => phaseOf(s.id) === "running") ?? steps.find((s) => s.id === current) ?? ATTENTION.map((p) => steps.find((s) => phaseOf(s.id) === p)).find(Boolean) ?? steps[0];
+}
+function stepWindow({
+  levels: raw,
+  phaseOf,
+  current,
+  start: requested,
+  span = 3
+}) {
+  const levelsIn = raw.filter((l) => l.length > 0);
+  const known = current && levelsIn.some((l) => l.some((s) => s.id === current));
+  const at = known ? current : activeStepId(levelsIn, phaseOf);
+  const currentLevel = Math.max(
+    0,
+    levelsIn.findIndex((l) => l.some((s) => s.id === at))
+  );
+  const n = levelsIn.length;
+  const size = Math.max(1, Math.min(span, n));
+  const maxStart = Math.max(0, n - size);
+  const auto = currentLevel - (size >= 3 ? 1 : 0);
+  const start = Math.min(maxStart, Math.max(0, requested ?? auto));
+  const end = start + size;
+  const levels = levelsIn.map((steps, index) => {
+    const primary = primaryOf(steps, phaseOf, at);
+    return {
+      index,
+      steps,
+      primary,
+      others: steps.filter((s) => s !== primary),
+      role: index === currentLevel ? "current" : index === currentLevel - 1 ? "previous" : index === currentLevel + 1 ? "next" : "other"
+    };
+  });
+  const visible = levels.slice(start, end);
+  const count = (ls) => ls.reduce((sum, l) => sum + l.steps.length, 0);
+  const shown = new Set(visible.map((l) => l.primary.id));
+  const all = levelsIn.flat();
+  return {
+    levels,
+    visible,
+    start,
+    end,
+    currentLevel,
+    hiddenBefore: count(levels.slice(0, start)),
+    hiddenAfter: count(levels.slice(end)),
+    canBack: start > 0,
+    canForward: end < n,
+    runningHidden: all.filter((s) => phaseOf(s.id) === "running" && !shown.has(s.id)),
+    position: Math.max(1, all.findIndex((s) => s.id === at) + 1),
+    total: all.length
+  };
+}
+function PhaseMark({ phase, icon }) {
+  if (phase === "done") return /* @__PURE__ */ jsx(Check, { className: "size-3.5 shrink-0" });
+  if (phase === "running") return /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin" });
+  if (phase === "waiting") return /* @__PURE__ */ jsx(Hourglass, { className: "size-3.5 shrink-0" });
+  if (phase === "failed") return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3.5 shrink-0" });
+  if (phase === "skipped") return /* @__PURE__ */ jsx(MinusCircle, { className: "size-3.5 shrink-0" });
+  return icon ? /* @__PURE__ */ jsx("span", { className: "flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5", children: icon }) : /* @__PURE__ */ jsx("span", { className: "mx-1 size-1.5 shrink-0 rounded-full bg-current opacity-60" });
+}
+var DEFAULT_STEP_BAR_LABELS = {
+  nav: "Workflow steps",
+  back: "Earlier steps",
+  forward: "Later steps",
+  hiddenBefore: "{count} earlier steps: show all steps",
+  hiddenAfter: "{count} later steps: show all steps",
+  position: "Step {position} of {total}",
+  parallel: "{count} more in parallel",
+  inParallel: "In parallel",
+  working: "Working: {title}",
+  moreWorking: "+{count} working",
+  waitingFor: "Waiting for {name}",
+  phases: {
+    blocked: "Not started",
+    ready: "To do",
+    running: "Working",
+    waiting: "Waiting",
+    done: "Done",
+    skipped: "Skipped",
+    failed: "Failed"
+  }
+};
+function stepPillTone(phase, current) {
+  if (current) return "border-primary bg-primary/10 text-primary font-semibold shadow-sm";
+  switch (phase) {
+    case "done":
+      return "border-emerald-600/30 text-emerald-700 dark:border-emerald-400/30 dark:text-emerald-400";
+    case "running":
+      return "border-primary/40 bg-primary/5 text-primary";
+    case "waiting":
+      return "border-amber-500/40 text-amber-700 dark:text-amber-300";
+    case "failed":
+      return "border-destructive/40 text-destructive";
+    case "skipped":
+      return "border-border text-muted-foreground line-through decoration-1";
+    case "ready":
+      return "border-border text-foreground";
+    default:
+      return "border-dashed border-border text-muted-foreground";
+  }
+}
+var PHASE_TEXT = {
+  done: "text-emerald-700 dark:text-emerald-400",
+  running: "text-primary",
+  waiting: "text-amber-700 dark:text-amber-300",
+  failed: "text-destructive",
+  skipped: "text-muted-foreground",
+  ready: "text-foreground",
+  blocked: "text-muted-foreground"
+};
+var STEP_PILL = "flex min-w-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-medium transition-colors";
+var STEP_LABEL = "min-w-[2.5rem] truncate";
+var STEP_EXTRA = "min-w-0 shrink-[6] truncate font-normal opacity-80";
+var fill = (template, values) => Object.entries(values).reduce((s, [k, v]) => s.replace(`{${k}}`, String(v)), template);
+var NARROW_PX = 560;
+var FULL_LEVEL_PX = 190;
+function StepBarFrame({
+  levels,
+  phaseOf,
+  current,
+  onSelect,
+  renderStep,
+  noteOf,
+  renderAfter,
+  leading,
+  trailing,
+  isSelectable = () => true,
+  icon,
+  disabled,
+  labels,
+  tid,
+  className
+}) {
+  const l = { ...DEFAULT_STEP_BAR_LABELS, ...labels };
+  const box = useRef(null);
+  const { width } = useElementSize(box);
+  const narrow = width > 0 && width < NARROW_PX;
+  const [start, setStart] = useState(null);
+  useEffect(() => setStart(null), [current]);
+  const span = narrow ? 2 : width >= levels.length * FULL_LEVEL_PX ? levels.length : 3;
+  const win = stepWindow({ levels, phaseOf, current, start, span });
+  const [listOpen, setListOpen] = useState(null);
+  const move = (to) => setStart(Math.max(0, Math.min(win.levels.length - 1, to)));
+  const select = (id) => {
+    setListOpen(null);
+    setStart(null);
+    onSelect(id);
+  };
+  const onKeyDown = (e) => {
+    if (!box.current?.contains(e.target)) return;
+    const to = e.key === "ArrowLeft" ? win.start - 1 : e.key === "ArrowRight" ? win.start + 1 : e.key === "Home" ? 0 : e.key === "End" ? win.levels.length : null;
+    if (to === null) return;
+    e.preventDefault();
+    move(to);
+  };
+  const row = (s, isCurrent) => {
+    const phase = phaseOf(s.id);
+    const selectable = isSelectable(s.id);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: !selectable || disabled,
+        onClick: () => select(s.id),
+        "aria-current": isCurrent ? "step" : void 0,
+        className: cn(
+          "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1 text-left text-xs hover:bg-accent disabled:cursor-default disabled:hover:bg-transparent",
+          isCurrent && "bg-primary/10 font-semibold text-primary"
+        ),
+        "data-phase": phase,
+        "data-testid": tid(`list-step-${s.id}`),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0", !isCurrent && PHASE_TEXT[phase]), children: /* @__PURE__ */ jsx(PhaseMark, { phase, icon: icon?.(s) }) }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", title: s.title, children: s.title }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] font-normal text-muted-foreground", children: l.phases[phase] })
+        ]
+      },
+      s.id
+    );
+  };
+  const at = win.levels[win.currentLevel];
+  const atId = at && (at.steps.find((s) => s.id === current) ?? at.primary).id;
+  const focusCurrent = (e) => {
+    const el = e.currentTarget?.querySelector(
+      '[aria-current="step"]'
+    );
+    if (!el) return;
+    e.preventDefault();
+    el.focus();
+    el.scrollIntoView?.({ block: "nearest" });
+  };
+  const allSteps = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-[11px] font-medium text-muted-foreground", children: fill(l.position, { position: win.position, total: win.total }) }),
+    /* @__PURE__ */ jsx("ol", { children: win.levels.map((level) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn(level.steps.length > 1 && "my-0.5 border-l-2 border-primary/30 pl-1"),
+        children: [
+          level.steps.length > 1 && /* @__PURE__ */ jsx("p", { className: "px-2 text-[10px] uppercase tracking-wide text-muted-foreground", children: l.inParallel }),
+          level.steps.map((s) => row(s, s.id === atId))
+        ]
+      },
+      level.index
+    )) })
+  ] });
+  const overflow = (side, count) => narrow && side === "before" ? null : narrow && side === "after" ? win.hiddenBefore + win.hiddenAfter > 0 ? /* @__PURE__ */ jsxs(Popover, { open: listOpen === side, onOpenChange: (o) => setListOpen(o ? side : null), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex shrink-0 items-center rounded-full px-1.5 py-1 text-[11px] tabular-nums text-muted-foreground hover:bg-accent hover:text-foreground",
+        "aria-label": fill(l.position, { position: win.position, total: win.total }),
+        title: fill(l.position, { position: win.position, total: win.total }),
+        "data-testid": tid("steps-count"),
+        children: [
+          win.position,
+          "/",
+          win.total
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "end",
+        className: "max-h-[min(24rem,70vh)] w-72 overflow-y-auto p-1",
+        onOpenAutoFocus: focusCurrent,
+        "data-testid": tid("all-steps"),
+        children: allSteps
+      }
+    )
+  ] }) : null : count > 0 ? /* @__PURE__ */ jsxs(Popover, { open: listOpen === side, onOpenChange: (o) => setListOpen(o ? side : null), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
+        "aria-label": fill(side === "before" ? l.hiddenBefore : l.hiddenAfter, { count }),
+        title: fill(side === "before" ? l.hiddenBefore : l.hiddenAfter, { count }),
+        "data-testid": tid(`hidden-${side}`),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2026" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: count })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: side === "before" ? "start" : "end",
+        className: "max-h-[min(24rem,70vh)] w-80 overflow-y-auto p-1",
+        onOpenAutoFocus: focusCurrent,
+        "data-testid": tid("all-steps"),
+        children: allSteps
+      }
+    )
+  ] }) : null;
+  const arrow = (dir) => {
+    const can = dir === "back" ? win.canBack : win.canForward;
+    const Icon = dir === "back" ? ChevronLeft : ChevronRight;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => move(win.start + (dir === "back" ? -1 : 1)),
+        disabled: !can,
+        "aria-label": dir === "back" ? l.back : l.forward,
+        title: dir === "back" ? l.back : l.forward,
+        className: "flex size-6 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
+        "data-testid": tid(`steps-${dir}`),
+        children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+      }
+    );
+  };
+  const running = win.runningHidden;
+  const workingPill = (s) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => select(s.id),
+      className: "flex min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full border border-primary/40 bg-primary/5 px-2 py-1 text-xs text-primary hover:bg-primary/10",
+      title: fill(l.working, { title: s.title }),
+      "data-testid": tid(`working-${s.id}`),
+      children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: fill(l.working, { title: s.title }) })
+      ]
+    },
+    s.id
+  );
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: box,
+      "aria-label": l.nav,
+      onKeyDown,
+      className: cn("flex min-w-0 items-center gap-1", narrow && "flex-wrap", className),
+      "data-testid": tid("steps"),
+      "data-narrow": narrow || void 0,
+      children: [
+        arrow("back"),
+        win.start === 0 && leading,
+        overflow("before", win.hiddenBefore),
+        /* @__PURE__ */ jsx("ol", { className: "flex min-w-0 flex-1 items-center gap-1", children: win.visible.map((level, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "flex min-w-[5.5rem] items-center gap-1",
+              i === win.visible.length - 1 ? "flex-[0_1_auto]" : "flex-[1_1_auto]"
+            ),
+            "data-role": level.role,
+            children: [
+              renderStep(level.primary, level, win, narrow),
+              level.others.length > 0 && /* @__PURE__ */ jsx(
+                GroupChip,
+                {
+                  level,
+                  label: fill(l.parallel, { count: level.others.length }),
+                  heading: l.inParallel,
+                  row: (s) => row(s, s.id === atId),
+                  tid
+                }
+              ),
+              renderAfter?.(level),
+              i < win.visible.length - 1 && !narrow && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "h-px min-w-3 flex-1",
+                    level.steps.every((s) => ["done", "skipped"].includes(phaseOf(s.id))) ? "bg-emerald-600/40" : "bg-border"
+                  )
+                }
+              )
+            ]
+          },
+          level.steps.map((s) => s.id).join("+")
+        )) }),
+        overflow("after", win.hiddenAfter),
+        !win.canForward && trailing,
+        arrow("forward"),
+        narrow && atId && noteOf?.(atId) && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "min-w-0 basis-full truncate px-1 text-[11px] text-muted-foreground",
+            "data-testid": tid("note"),
+            children: noteOf(atId)
+          }
+        ),
+        running.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex min-w-0 shrink items-center gap-1", narrow && "basis-full"),
+            "data-testid": tid("working"),
+            children: [
+              (running.length > 2 ? running.slice(0, 1) : running).map(workingPill),
+              running.length > 2 && /* @__PURE__ */ jsxs(Popover, { children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex shrink-0 items-center gap-1 rounded-full border border-primary/40 bg-primary/5 px-2 py-1 text-xs text-primary hover:bg-primary/10",
+                    "data-testid": tid("working-more"),
+                    children: [
+                      /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }),
+                      fill(l.moreWorking, { count: running.length - 1 })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-72 p-1", children: running.slice(1).map((s) => row(s, false)) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function GroupChip({
+  level,
+  label,
+  heading,
+  row,
+  tid
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 rounded-full border border-border bg-muted px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-muted-foreground hover:border-primary/40 hover:text-primary",
+        "aria-label": label,
+        title: label,
+        "data-testid": tid(`group-${level.steps[0].id}`),
+        children: [
+          "+",
+          level.others.length
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-72 p-1",
+        "data-testid": tid(`group-${level.steps[0].id}-list`),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-[11px] font-medium text-muted-foreground", children: heading }),
+          level.steps.map(row)
+        ]
+      }
+    )
+  ] });
+}
 var DEFAULT_WORKFLOW_STEP_PARTS_LABELS = {
   waitingFor: "Waiting for {name}",
   sendBack: "Send back",
@@ -1748,152 +2173,102 @@ function ActionStepBody({
     phase === "failed" && !state?.declinedBy && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", "data-testid": `${testId}-failed`, children: state?.error || "" })
   ] });
 }
-function PhaseMark({ phase, icon }) {
-  if (phase === "done") return /* @__PURE__ */ jsx(Check, { className: "size-3.5 shrink-0" });
-  if (phase === "running") return /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin" });
-  if (phase === "waiting") return /* @__PURE__ */ jsx(Hourglass, { className: "size-3.5 shrink-0" });
-  if (phase === "failed") return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3.5 shrink-0" });
-  if (phase === "skipped") return /* @__PURE__ */ jsx(MinusCircle, { className: "size-3.5 shrink-0" });
-  return icon ? /* @__PURE__ */ jsx("span", { className: "flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5", children: icon }) : null;
-}
-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";
+var DONE = "__done";
 function WorkflowStepBar({
   run,
   levels,
   doneTitle,
   doneIcon,
   icon,
-  tid
+  tid,
+  labels
 }) {
-  const box = useRef(null);
-  const measure = useRef(null);
-  const row = useRef(null);
-  const { width } = useElementSize(box);
-  const [compact3, setCompact] = useState(false);
-  const titles = levels.map((l) => l.map((s) => s.title).join("\0")).join("
") + doneTitle;
-  useLayoutEffect(() => {
-    const needed = measure.current?.scrollWidth ?? 0;
-    setCompact(width > 0 && needed > width);
-  }, [width, titles]);
-  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;
+  const l = { ...DEFAULT_STEP_BAR_LABELS, ...labels };
+  const done = { id: DONE, title: doneTitle };
+  const phaseOf = (id) => id === DONE ? run.isComplete ? "done" : "blocked" : run.phaseOf(id);
+  const current = run.isComplete ? DONE : run.current;
+  const waitingOf = (id) => {
+    if (id === DONE || !["ready", "waiting"].includes(phaseOf(id))) return void 0;
+    const assignee = run.assigneeOf(id);
+    return assignee ? l.waitingFor.replace("{name}", assignee) : void 0;
+  };
+  const pill = (s, narrow = false) => {
+    const phase = phaseOf(s.id);
+    const isCurrent = s.id === current;
     const assignee = ["ready", "waiting"].includes(phase) ? run.assigneeOf(s.id) : void 0;
-    const title = assignee ? `${s.title} \xB7 ${assignee}` : s.title;
+    const waiting = assignee ? l.waitingFor.replace("{name}", assignee) : void 0;
+    const title = waiting ? `${s.title} \xB7 ${waiting}` : s.title;
+    const name = `${title} (${l.phases[phase]})`;
+    if (s.id === DONE)
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(STEP_PILL, stepPillTone(phase, isCurrent)),
+          "aria-current": isCurrent ? "step" : void 0,
+          "aria-label": name,
+          title: doneTitle,
+          "data-phase": phase,
+          "data-testid": tid("step-done"),
+          children: [
+            /* @__PURE__ */ jsx(PhaseMark, { phase: run.isComplete ? "done" : "ready", icon: doneIcon }),
+            /* @__PURE__ */ jsx("span", { className: cn(STEP_LABEL, "max-w-[12rem]"), children: doneTitle })
+          ]
+        }
+      );
     return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => run.goTo(s.id),
         disabled: run.busy,
-        className: cn(
-          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" || phase === "waiting" ? "border-primary/30 bg-primary/5 text-primary" : "border-border text-muted-foreground"
-        ),
-        "aria-current": current ? "step" : void 0,
-        "aria-label": title,
+        className: cn(STEP_PILL, stepPillTone(phase, isCurrent), "disabled:cursor-default"),
+        "aria-current": isCurrent ? "step" : void 0,
+        "aria-label": name,
         title,
         "data-phase": phase,
         "data-testid": tid(`step-${s.id}`),
         children: [
           /* @__PURE__ */ jsx(PhaseMark, { phase, icon: icon(s.icon) }),
-          (current || !compact3) && /* @__PURE__ */ jsx("span", { className: LABEL, "data-testid": tid(`step-${s.id}-label`), children: s.title }),
-          assignee && !compact3 && /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "span",
             {
-              className: "min-w-0 max-w-[8rem] truncate font-normal opacity-75",
+              className: cn(STEP_LABEL, isCurrent ? "max-w-[18rem]" : "max-w-[12rem]"),
+              "data-testid": tid(`step-${s.id}-label`),
+              children: s.title
+            }
+          ),
+          assignee && isCurrent && !narrow && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(STEP_EXTRA, "max-w-[12rem]"),
               "data-testid": tid(`step-${s.id}-assignee`),
               children: [
                 "\xB7 ",
-                assignee
+                waiting
               ]
             }
           )
         ]
-      },
-      s.id
+      }
     );
   };
-  const done = run.isComplete;
-  return /* @__PURE__ */ jsxs("div", { ref: box, className: "relative min-w-0", children: [
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-1", children: level.map((s) => /* @__PURE__ */ jsxs("div", { className: PILL, children: [
-            /* @__PURE__ */ jsx("span", { className: "size-3.5 shrink-0" }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(LABEL, "before:content-[attr(data-label)]"),
-                "data-label": s.title
-              }
-            )
-          ] }, s.id)) }),
-          i < levels.length && /* @__PURE__ */ jsx("div", { className: "w-2" })
-        ] }, i))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "ol",
-      {
-        ref: row,
-        className: 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__ */ jsxs(
-          "li",
-          {
-            className: cn(
-              "flex min-w-0 items-center gap-1.5",
-              i < levels.length && !compact3 && "flex-1",
-              compact3 && "flex-none"
-            ),
-            children: [
-              level ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col items-start gap-1", children: level.map(pill) }) : /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    PILL,
-                    done ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground"
-                  ),
-                  "aria-current": done ? "step" : void 0,
-                  "aria-label": doneTitle,
-                  title: doneTitle,
-                  "data-testid": tid("step-done"),
-                  children: [
-                    /* @__PURE__ */ jsx(PhaseMark, { phase: "ready", icon: doneIcon }),
-                    (done || !compact3) && /* @__PURE__ */ jsx("span", { className: LABEL, children: doneTitle })
-                  ]
-                }
-              ),
-              i < levels.length && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "h-px",
-                    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"
-                  )
-                }
-              )
-            ]
-          },
-          level ? level.map((s) => s.id).join("+") : "done"
-        ))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    StepBarFrame,
+    {
+      levels: [...levels, [done]],
+      phaseOf,
+      current,
+      onSelect: (id) => id !== DONE && run.goTo(id),
+      isSelectable: (id) => id !== DONE,
+      renderStep: (s, _level, _win, narrow) => pill(s, narrow),
+      noteOf: waitingOf,
+      icon: (s) => s.id === DONE ? doneIcon : icon(s.icon),
+      disabled: run.busy,
+      labels,
+      tid,
+      className: "w-full"
+    }
+  );
 }
 var DEFAULT_WORKFLOW_RUNNER_LABELS = {
   back: "Back",
@@ -1940,6 +2315,8 @@ function WorkflowRunner({
   people,
   actions,
   nameOfDoc,
+  hideStepBar,
+  compact: compact3,
   labels,
   partsLabels,
   testIdPrefix = "workflow-run",
@@ -1947,6 +2324,7 @@ function WorkflowRunner({
 }) {
   const l = { ...DEFAULT_WORKFLOW_RUNNER_LABELS, ...labels };
   const pl = { ...DEFAULT_WORKFLOW_STEP_PARTS_LABELS, ...partsLabels };
+  const box = compact3 ? "p-4" : "max-w-2xl p-6";
   const { steps, step, isComplete, action } = run;
   const completion = workflow.run.kind === "steps" ? workflow.run.completion : void 0;
   const tid = (suffix) => `${testIdPrefix}-${suffix}`;
@@ -1956,8 +2334,8 @@ function WorkflowRunner({
   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 === "complete" && step?.kind === "action" ? l.markSent : action === "wait" && (run.isRunning || run.busy) ? l.working : (step && !run.isLocked(step.id) ? step.nextLabel : void 0) ?? l.next;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: cn(compact3 ? "space-y-3" : "space-y-6", className), "data-testid": testIdPrefix, children: [
+    !hideStepBar && /* @__PURE__ */ jsx(
       WorkflowStepBar,
       {
         run,
@@ -1982,10 +2360,10 @@ function WorkflowRunner({
           children: l.restart
         }
       )
-    ] }) : step ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: run.phaseOf(step.id) === "blocked" ? /* @__PURE__ */ jsx(Card, { className: "max-w-2xl p-6", "data-testid": tid(step.id), children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": tid(`${step.id}-blocked`), children: l.blocked.replace(
+    ] }) : step ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: run.phaseOf(step.id) === "blocked" ? /* @__PURE__ */ jsx(Card, { className: cn(box, "p-6"), "data-testid": tid(step.id), children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": tid(`${step.id}-blocked`), children: l.blocked.replace(
       "{steps}",
       stepDependencies(steps, step.id).map((d) => steps.find((s) => s.id === d)?.title ?? d).join(", ")
-    ) }) }) : step.kind === "form" ? /* @__PURE__ */ jsxs(Card, { className: "max-w-2xl space-y-4 p-6", "data-testid": tid(step.id), children: [
+    ) }) }) : step.kind === "form" ? /* @__PURE__ */ jsxs(Card, { className: cn(box, "space-y-4"), "data-testid": tid(step.id), children: [
       /* @__PURE__ */ jsx(StepHeading, { step, icon: icon(step.icon), testId: tid(`${step.id}-title`) }),
       /* @__PURE__ */ jsx(SentBackNote, { state: run.stateOf(step.id), l: pl, testId: tid(step.id) }),
       /* @__PURE__ */ jsx(AssigneeLine, { run, stepId: step.id, l: pl, testId: tid(step.id) }),
@@ -2006,7 +2384,7 @@ function WorkflowRunner({
       ) }),
       run.actionError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", "data-testid": tid("action-error"), children: run.actionError }),
       renderStepNote?.(step, run)
-    ] }) : step.kind === "upload" ? /* @__PURE__ */ jsxs(Card, { className: "max-w-2xl space-y-4 p-6", "data-testid": tid(step.id), children: [
+    ] }) : step.kind === "upload" ? /* @__PURE__ */ jsxs(Card, { className: cn(box, "space-y-4"), "data-testid": tid(step.id), children: [
       /* @__PURE__ */ jsx(SentBackNote, { state: run.stateOf(step.id), l: pl, testId: tid(step.id) }),
       /* @__PURE__ */ jsx(AssigneeLine, { run, stepId: step.id, l: pl, testId: tid(step.id) }),
       renderUpload?.(step) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2035,7 +2413,7 @@ function WorkflowRunner({
       ] }),
       run.actionError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: run.actionError }),
       renderStepNote?.(step, run)
-    ] }) : step.kind === "review" ? /* @__PURE__ */ jsxs(Card, { className: "max-w-2xl space-y-4 p-6", "data-testid": tid(step.id), children: [
+    ] }) : step.kind === "review" ? /* @__PURE__ */ jsxs(Card, { className: cn(box, "space-y-4"), "data-testid": tid(step.id), children: [
       /* @__PURE__ */ jsx(StepHeading, { step, icon: icon(step.icon) }),
       /* @__PURE__ */ jsx(SentBackNote, { state: run.stateOf(step.id), l: pl, testId: tid(step.id) }),
       /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-sm text-muted-foreground", children: reviewInstructions(step, run.inputs) }),
@@ -2070,7 +2448,7 @@ function WorkflowRunner({
       /* @__PURE__ */ jsx(SendBackControl, { run, step, l: pl, testId: tid(step.id) }),
       run.actionError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: run.actionError }),
       renderStepNote?.(step, run)
-    ] }) : step.kind === "action" ? /* @__PURE__ */ jsxs(Card, { className: "max-w-2xl space-y-4 p-6", "data-testid": tid(step.id), children: [
+    ] }) : step.kind === "action" ? /* @__PURE__ */ jsxs(Card, { className: cn(box, "space-y-4"), "data-testid": tid(step.id), children: [
       /* @__PURE__ */ jsx(
         ActionStepBody,
         {
@@ -2093,6 +2471,7 @@ function WorkflowRunner({
         renderAgentOutput,
         icon: icon(step.icon),
         renderStepNote,
+        compact: compact3,
         extra: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(SentBackNote, { state: run.stateOf(step.id), l: pl, testId: tid(step.id) }),
           /* @__PURE__ */ jsx(
@@ -2110,47 +2489,62 @@ function WorkflowRunner({
         tid
       }
     ) }, step.id) : null,
-    !isComplete && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border pt-4", children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "ghost",
-          onClick: run.back,
-          disabled: !run.canBack,
-          "data-testid": tid("back"),
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
-            " ",
-            l.back
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        step && action !== "skip" && // A step that commits (creates the matter, starts the thread) is what the run stands on.
-        !step.commit && ["ready", "blocked", "failed"].includes(run.phaseOf(step.id)) && /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            onClick: () => void run.skip(step.id),
-            disabled: run.busy,
-            "data-testid": tid("skip-step"),
-            children: l.skipStep
-          }
+    !isComplete && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between border-t border-border pt-4",
+          compact3 && "flex-wrap gap-2 pt-3"
         ),
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            onClick: () => void run.next(),
-            disabled: action === "wait" || reading,
-            "data-testid": tid("next"),
-            children: [
-              nextLabel,
-              reading || action === "wait" && (run.isRunning || run.busy) ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
-            ]
-          }
-        )
-      ] })
-    ] })
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              onClick: run.back,
+              disabled: !run.canBack,
+              "data-testid": tid("back"),
+              children: [
+                /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+                " ",
+                l.back
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex items-center gap-2", compact3 && "ml-auto flex-wrap justify-end"),
+              children: [
+                step && action !== "skip" && // A step that commits (creates the matter, starts the thread) is what the run stands on.
+                !step.commit && ["ready", "blocked", "failed"].includes(run.phaseOf(step.id)) && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    onClick: () => void run.skip(step.id),
+                    disabled: run.busy,
+                    "data-testid": tid("skip-step"),
+                    children: l.skipStep
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    onClick: () => void run.next(),
+                    disabled: action === "wait" || reading,
+                    "data-testid": tid("next"),
+                    children: [
+                      nextLabel,
+                      reading || action === "wait" && (run.isRunning || run.busy) ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 function UploadFiles({
@@ -2237,6 +2631,7 @@ function AgentStepBody({
   icon,
   renderStepNote,
   extra,
+  compact: compact3,
   l,
   tid
 }) {
@@ -2282,7 +2677,7 @@ function AgentStepBody({
     phase === "skipped" && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: l.skipped }),
     extra
   ] });
-  if (step.output === "artifact") {
+  if (step.output === "artifact" && !compact3) {
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2299,7 +2694,7 @@ function AgentStepBody({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(Card, { className: "space-y-3 p-6", "data-testid": tid(step.id), children: [
+  return /* @__PURE__ */ jsxs(Card, { className: cn("space-y-3", compact3 ? "p-4" : "p-6"), "data-testid": tid(step.id), children: [
     header,
     status,
     renderAgentOutput(step, state),
@@ -2307,6 +2702,6 @@ function AgentStepBody({
   ] });
 }
 
-export { ActionStepBody, ApprovalEvidence, AssigneeLine, DEFAULT_ASSIGNEE_WORDING, DEFAULT_SCHEMA_FORM_LABELS, DEFAULT_WORKFLOW_RUNNER_LABELS, DEFAULT_WORKFLOW_STEP_PARTS_LABELS, EMPTY_WORKFLOW_SCOPE, SKILL_PROMPT_FALLBACK_PLACEHOLDER, SKILL_PROMPT_LABEL, SchemaForm, SendBackControl, WorkflowRunner, assigneeName, buildLaunch, canAssign, composeStepPrompt, composeWorkflowPrompt, defaultInputs, dependsOn, fieldToFrontmatter, fillRunText, fillStepInputs, fromPlanAssignee, fromPlanDocumentRef, fromPlanSteps, initialRunInputs, inputsFromContext, isEmptyWorkflowScope, isIncompleteSignal, isPersonAction, isPersonStep, isRunFinished, isSteppedWorkflow, isWorkflowScope, layoutFromPlanSteps, nextAction, orderSteps, promptFieldName, reviewInstructions, runFields, runFieldsOf, runThreadTitle, sendBackTargets, skillToWorkflow, splitDocRef, stepConfigProblems, stepDependencies, stepFields, stepLevels, stepPhase, stepStatesFromActivity, toPlanAssignee, toPlanDocumentRef, toPlanSteps, upstreamSteps, useWorkflowView, validateInputs, validateStep, validateWorkflowGraph, workflowAccepts, workflowFromFrontmatter, workflowSteps, workflowsAccepting, workflowsForHost };
-//# sourceMappingURL=chunk-34UW6XUQ.js.map
-//# sourceMappingURL=chunk-34UW6XUQ.js.map
+export { ActionStepBody, ApprovalEvidence, AssigneeLine, DEFAULT_ASSIGNEE_WORDING, DEFAULT_SCHEMA_FORM_LABELS, DEFAULT_STEP_BAR_LABELS, DEFAULT_WORKFLOW_RUNNER_LABELS, DEFAULT_WORKFLOW_STEP_PARTS_LABELS, EMPTY_WORKFLOW_SCOPE, PhaseMark, SKILL_PROMPT_FALLBACK_PLACEHOLDER, SKILL_PROMPT_LABEL, STEP_EXTRA, STEP_LABEL, STEP_PILL, SchemaForm, SendBackControl, StepBarFrame, WorkflowRunner, WorkflowStepBar, activeStepId, assigneeName, buildLaunch, canAssign, composeStepPrompt, composeWorkflowPrompt, defaultInputs, dependsOn, fieldToFrontmatter, fillRunText, fillStepInputs, fromPlanAssignee, fromPlanDocumentRef, fromPlanSteps, initialRunInputs, inputsFromContext, isEmptyWorkflowScope, isIncompleteSignal, isPersonAction, isPersonStep, isRunFinished, isSteppedWorkflow, isWorkflowScope, layoutFromPlanSteps, nextAction, orderSteps, promptFieldName, reviewInstructions, runFields, runFieldsOf, runThreadTitle, sendBackTargets, skillToWorkflow, splitDocRef, stepConfigProblems, stepDependencies, stepFields, stepLevels, stepPhase, stepPillTone, stepStatesFromActivity, stepWindow, toPlanAssignee, toPlanDocumentRef, toPlanSteps, upstreamSteps, useWorkflowView, validateInputs, validateStep, validateWorkflowGraph, workflowAccepts, workflowFromFrontmatter, workflowSteps, workflowsAccepting, workflowsForHost };
+//# sourceMappingURL=chunk-WXRCMIAE.js.map
+//# sourceMappingURL=chunk-WXRCMIAE.js.map