@arbidocs/blocks 0.4.122 → 0.4.124

package/dist/{chunk-ZP4IFW2E.js → chunk-EJSJ27HV.js}

@@ -1,28 +1,28 @@
 "use client";
-import { QuickActionDialogHeader, AddFilesFirst, ScopePicker, StartTiles } from './chunk-P5ST47VY.js';
 import { DocumentPicker, MultiSelect } from './chunk-4XJZ6AAY.js';
 import { EmptyState } from './chunk-P6GHJSLR.js';
-import { defaultInputs, validateInputs, SchemaForm, isWorkflowScope, fieldToFrontmatter, workflowFromFrontmatter, workflowSteps, initialRunInputs, stepPhase, composeStepPrompt, useWorkflowView, composeWorkflowPrompt, DEFAULT_TASK_ACTIVITY_LABELS, TaskActivityTimeline, isRunFinished, StepBarFrame, stepLevels, eventWaitingDocuments, waitingForDocumentsText, buildLaunch, waitingDocuments, PhaseMark, STEP_LABEL_CURRENT, STEP_LABEL, STEP_LABEL_MAX, STEP_EXTRA, STEP_PILL, stepPillTone } from './chunk-AY32GGKU.js';
-import { FoldSection } from './chunk-XD2M6LIG.js';
+import { SchemaForm, useWorkflowView, DEFAULT_TASK_ACTIVITY_LABELS, TaskActivityTimeline, activeStepId, DEFAULT_STEP_BAR_LABELS, StepBarFrame, STEP_LABEL_CURRENT, STEP_LABEL, STEP_LABEL_MAX } from './chunk-ERNMU6RV.js';
 import { TriStateFilterMenu } from './chunk-6S5FLMWG.js';
 import { CellHoverIcon } from './chunk-RFXJYIDV.js';
 import { ToneBadge } from './chunk-5LXQPP2K.js';
-import { ActionLink } from './chunk-S7PSMMRG.js';
 import { SelectionBar, SelectionBarAction } from './chunk-NUNKSZKU.js';
 import { FilterInput } from './chunk-YU2KUMGE.js';
 import { GridView } from './chunk-N5YEF3LC.js';
-import { useMentionAutocomplete } from './chunk-HOXKR26S.js';
-import { toMessageMentions, extractMentions, MentionMenu } from './chunk-AA3PT6KR.js';
-import { useIsPhone } from './chunk-SLSBJRWW.js';
+import { QuickActionDialogHeader, AddFilesFirst, ScopePicker, StartTiles } from './chunk-P5ST47VY.js';
+import { FoldSection } from './chunk-XD2M6LIG.js';
+import { ActionLink } from './chunk-S7PSMMRG.js';
 import { TabHeader } from './chunk-4WWM3GQ5.js';
 import { ModalHeader } from './chunk-TX2ZICS7.js';
+import { DEFAULT_STEP_RECORD_LABELS, DEFAULT_STEP_DOCUMENT_LABELS, DEFAULT_STEP_KIND_LABELS, defaultInputs, validateInputs, isWorkflowScope, fieldToFrontmatter, workflowFromFrontmatter, workflowSteps, initialRunInputs, stepPhase, composeStepPrompt, useMentionAutocomplete, composeWorkflowPrompt, StepChip, StepDocumentButton, stepLevels, isRunFinished, stepKindOf, stepDocuments, eventWaitingDocuments, waitingForDocumentsText, buildLaunch, STEP_KIND_ICONS, StepDocumentCards, StepRecord, splitDocRef, waitingDocuments } from './chunk-7HAM7Y5U.js';
+import { toMessageMentions, extractMentions, MentionMenu } from './chunk-AA3PT6KR.js';
+import { useIsPhone } from './chunk-SLSBJRWW.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
 import { useBlocksEnvironment } from './chunk-76JDDMSP.js';
 import { formatCount, initials } from './chunk-OXF2IFXG.js';
 import { memo, forwardRef, useState, useMemo, useId, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { cn, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea, Input, Switch, Button, Collapsible, CollapsibleTrigger, CollapsibleContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Tooltip, TooltipTrigger, TooltipContent, Badge, Slider, UserEntity, getEntityColorStyles, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, VisibilityToggle, EntityPill, ThreadVisibilityIcon, DialogClose, Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandItem, DropdownMenuSeparator, badgeVariants, Checkbox } from '@arbidocs/react/ui';
+import { cn, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea, Input, Switch, Button, Collapsible, CollapsibleTrigger, CollapsibleContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Tooltip, TooltipTrigger, TooltipContent, Badge, Slider, UserEntity, getEntityColorStyles, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, VisibilityToggle, EntityPill, ThreadVisibilityIcon, DialogClose, Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandItem, DropdownMenuSeparator, badgeVariants, Checkbox, PopoverClose } from '@arbidocs/react/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, ChevronRight, Plus, Trash2, Loader2, Play, MessageSquare, Eye, ClipboardList, Pencil, Copy, Bot, Sparkles, Wand2, X, Globe, Download, Lock, ListChecks, AlertTriangle, FileX, SkipForward, Check, FileText, CornerDownRight, AlertCircle, KeyRound, Workflow, ChevronsUpDown, ChevronsDownUp, ListTodo, CheckCheck, MoreHorizontal, CalendarClock, History, ChevronUp, Pause, Activity, Hourglass, MoreVertical, TriangleAlert, CheckSquare, Square, CheckCircle2, SquareArrowOutUpRight, ArrowLeft, LayoutGrid, List, CornerLeftUp, CornerUpLeft, UserRound, CircleDashed, RotateCcw, ListPlus, Link2, Clock, Bell, MousePointerClick, Flag, ArrowUpRight, Zap } from 'lucide-react';
+import { ChevronDown, ChevronRight, Plus, Trash2, Loader2, Play, MessageSquare, Eye, ClipboardList, Pencil, Copy, Bot, Sparkles, Wand2, X, Globe, Download, Lock, ListChecks, AlertTriangle, FileX, SkipForward, Check, FileText, CornerDownRight, AlertCircle, KeyRound, Workflow, ChevronsUpDown, ChevronsDownUp, ListTodo, CheckCheck, MoreHorizontal, CalendarClock, History, ArrowUpRight, SendHorizontal, Zap, MessagesSquare, ChevronUp, Pause, Activity, Hourglass, MoreVertical, TriangleAlert, CheckSquare, Square, CheckCircle2, SquareArrowOutUpRight, ArrowLeft, LayoutGrid, List, CornerLeftUp, CornerUpLeft, CircleDashed, RotateCcw, ListPlus, Clock, CircleCheck, Hand, Link2, Bell, MousePointerClick, Flag } from 'lucide-react';
 
 function useControllableState(value, defaultValue, onChange) {
   const [inner, setInner] = useState(defaultValue);
@@ -4364,6 +4364,62 @@ function TaskInbox(p) {
     )
   ] });
 }
+var DEFAULT_THREAD_STATE_LABELS = {
+  generating: "Generating",
+  needs: "Needs {name}",
+  next: "Up next",
+  ready: "Ready",
+  todo: "To do",
+  done: "Done",
+  failed: "Failed",
+  queued: "Queued",
+  access: "Needs access"
+};
+var LOOK = {
+  generating: {
+    icon: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
+    className: "text-amber-700 dark:text-amber-300"
+  },
+  needs: { icon: /* @__PURE__ */ jsx(Hand, {}), className: "text-orange-700 dark:text-orange-300" },
+  next: { icon: /* @__PURE__ */ jsx(Clock, {}), className: "text-muted-foreground" },
+  ready: { icon: /* @__PURE__ */ jsx(CircleCheck, {}), className: "text-emerald-700 dark:text-emerald-400" },
+  todo: { icon: /* @__PURE__ */ jsx(CircleDashed, {}), className: "text-muted-foreground" },
+  done: { icon: /* @__PURE__ */ jsx(CheckCheck, {}), className: "text-muted-foreground" },
+  failed: { icon: /* @__PURE__ */ jsx(AlertCircle, {}), className: "text-red-text" },
+  queued: { icon: /* @__PURE__ */ jsx(Clock, {}), className: "text-amber-700 dark:text-amber-300" },
+  access: { icon: /* @__PURE__ */ jsx(KeyRound, {}), className: "text-red-text" }
+};
+function ThreadStatusLine({
+  state,
+  name = "you",
+  detail,
+  extra,
+  labels,
+  className,
+  testId
+}) {
+  const l = { ...DEFAULT_THREAD_STATE_LABELS, ...labels };
+  const { icon, className: tone } = LOOK[state];
+  const word = l[state].replace("{name}", name);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("flex min-w-0 items-center gap-1.5 text-xs leading-tight", className),
+      title: detail ? `${word} \xB7 ${detail}` : word,
+      "data-state": state,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 [&_svg]:size-3.5", tone), "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: cn("shrink-0 font-medium", tone), children: word }),
+        extra,
+        detail && /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-foreground", children: [
+          "\xB7 ",
+          detail
+        ] })
+      ]
+    }
+  );
+}
 function EntityChip({
   variant = "pill",
   icon,
@@ -4447,13 +4503,14 @@ function ConversationListView(p) {
     [p.conversations, q, p.labelText, p.doneFilter, p.visibilityFilters, p.meetingFilter]
   );
   const selectedRows = p.conversations.filter((c) => selected.has(c.external_id));
+  const hasLabels = p.conversations.some((c) => !!p.labelText?.(c));
   const columns = useMemo(
     () => [
       {
         colId: "name",
         headerName: "Thread",
-        flex: 1,
-        minWidth: 180,
+        flex: 2,
+        minWidth: 200,
         valueGetter: ({ data }) => data?.title?.trim() || "Untitled thread",
         cellRenderer: ({ data }) => data && /* @__PURE__ */ jsxs("div", { className: "group flex h-full min-w-0 items-center gap-2", children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0", children: liveProps.current.renderThread ? liveProps.current.renderThread(data) : /* @__PURE__ */ jsx(
@@ -4467,6 +4524,18 @@ function ConversationListView(p) {
               testId: `thread-open-${data.external_id}`
             }
           ) }),
+          (data.message_count ?? 0) > 0 && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex h-5 shrink-0 items-center gap-0.5 self-center rounded-full bg-muted px-1.5 text-[10px] font-medium leading-none tabular-nums text-muted-foreground",
+              title: `${data.message_count} ${data.message_count === 1 ? "message" : "messages"}`,
+              "data-testid": `thread-messages-${data.external_id}`,
+              children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "size-3", "aria-hidden": true }),
+                data.message_count
+              ]
+            }
+          ),
           (data.is_owner !== false || liveProps.current.canEditShared) && /* @__PURE__ */ jsx(
             "button",
             {
@@ -4480,72 +4549,51 @@ function ConversationListView(p) {
           )
         ] })
       },
-      ...liveProps.current.renderLabels ? [
+      // Labels only when a thread has some (an empty column only takes the names' room), and never
+      // on a phone, where the status is what a row must say.
+      ...liveProps.current.renderLabels && hasLabels && !isPhone ? [
         {
           colId: "labels",
           headerName: "Labels",
-          ...isPhone ? { width: 200 } : { flex: 0.5, minWidth: 160 },
+          flex: 0.5,
+          minWidth: 100,
           valueGetter: ({ data }) => data ? liveProps.current.labelText?.(data) ?? "" : "",
           cellRenderer: ({ data }) => data && liveProps.current.renderLabels?.(data)
         }
       ] : [],
-      ...liveProps.current.renderBy || liveProps.current.renderOwner ? [
-        {
-          colId: liveProps.current.renderBy ? "by" : "owner",
-          headerName: liveProps.current.renderBy ? "Last message by" : "Owner",
-          width: 160,
-          hide: isPhone,
-          cellRenderer: ({ data }) => data && (liveProps.current.renderBy || liveProps.current.renderOwner)?.(data)
-        }
-      ] : [],
       {
         colId: "status",
         headerName: "Status",
-        width: 150,
-        hide: isPhone,
+        width: isPhone ? 170 : 240,
         valueGetter: ({ data }) => data?.status,
-        cellRenderer: ({ data }) => data && (liveProps.current.renderStatus ? liveProps.current.renderStatus(data) : /* @__PURE__ */ jsx(TaskStatusPill, { id: data.external_id, status: data.status }))
-      },
-      {
-        valueGetter: ({ data }) => data?.message_count,
-        colId: "messages",
-        headerName: "Messages",
-        width: 110,
-        hide: isPhone,
-        valueFormatter: ({ value }) => value == null ? "\u2014" : String(value),
-        cellClass: "text-muted-foreground"
+        cellRenderer: ({ data }) => data && (liveProps.current.renderStatus ? liveProps.current.renderStatus(data) : /* @__PURE__ */ jsx(
+          ThreadStatusLine,
+          {
+            state: data.status === "done" ? "done" : data.status === "todo" ? "todo" : "ready"
+          }
+        ))
       },
-      ...liveProps.current.onToggleShared ? [
+      // Who spoke last (their face) and when: the two read together, at the row's end.
+      ...liveProps.current.renderBy || liveProps.current.renderOwner ? [
         {
-          colId: "visibility",
-          headerName: "Visibility",
-          width: 170,
+          colId: liveProps.current.renderBy ? "by" : "owner",
+          headerName: liveProps.current.renderBy ? "By" : "Owner",
+          width: 64,
           hide: isPhone,
-          cellClass: "cell-hcenter",
           sortable: false,
           resizable: false,
-          cellRenderer: ({ data }) => data && /* @__PURE__ */ jsx(
-            VisibilityToggle,
-            {
-              items: [data],
-              showLabel: true,
-              label: data.is_shared ? "Workspace" : "Only Me",
-              disabled: data.is_owner === false,
-              onToggle: () => liveProps.current.onToggleShared?.(data, !data.is_shared),
-              "data-testid": `thread-shared-${data.external_id}`
-            }
-          )
+          cellRenderer: ({ data }) => data && (liveProps.current.renderBy || liveProps.current.renderOwner)?.(data)
         }
       ] : [],
       {
         colId: "activity",
         initialSort: "desc",
-        headerName: "Activity",
-        width: 160,
+        headerName: "Updated",
+        width: 128,
         hide: isPhone,
         valueGetter: ({ data }) => data?.last_message_updated_at || data?.updated_at || data?.created_at || "",
         valueFormatter: ({ value }) => value ? liveProps.current.formatDate(value) : "\u2014",
-        cellClass: "text-muted-foreground"
+        cellClass: "flex items-center text-xs text-muted-foreground/80"
       }
     ],
     [
@@ -4554,10 +4602,14 @@ function ConversationListView(p) {
       Boolean(p.renderOwner),
       Boolean(p.renderBy),
       Boolean(p.renderStatus),
-      Boolean(p.onToggleShared),
-      isPhone
+      isPhone,
+      hasLabels
     ]
   );
+  const centred = useMemo(
+    () => columns.map((c) => ({ cellClass: "flex items-center", ...c })),
+    [columns]
+  );
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "conversation-list-view", children: [
     p.showHeader !== false && /* @__PURE__ */ jsx(
       TabHeader,
@@ -4602,7 +4654,7 @@ function ConversationListView(p) {
       {
         testId: "threads-grid",
         items: rows,
-        columnDefs: columns,
+        columnDefs: centred,
         getItemId: (row) => row.external_id,
         getRowTestId: (row) => `thread-row-${row.external_id}`,
         onRowClick: p.onOpen,
@@ -4611,7 +4663,7 @@ function ConversationListView(p) {
         loadingMessage: "Loading threads\u2026",
         emptyState: {
           title: q ? "No threads match" : "No conversations yet",
-          message: "Use New Task to ask ARBI, bring in people, or both."
+          message: p.footer ? "Type below to ask ARBI, bring in people, or both." : "Use New Task to ask ARBI, bring in people, or both."
         },
         selection: p.selectionActions ? {
           mode: "multiple",
@@ -4628,6 +4680,7 @@ function ConversationListView(p) {
         }
       }
     ) }),
+    p.footer,
     p.selectionActions && /* @__PURE__ */ jsx(SelectionBar, { count: selectedRows.length, onClear: () => setSelected(/* @__PURE__ */ new Set()), children: (compact) => p.selectionActions?.(selectedRows, compact, () => setSelected(/* @__PURE__ */ new Set())) })
   ] });
 }
@@ -6251,24 +6304,28 @@ function TaskFlow({
         const el = e.currentTarget;
         following.current = el.scrollWidth - el.scrollLeft - el.clientWidth < 24;
       },
-      children: /* @__PURE__ */ jsx("ol", { className: "flex w-max min-w-full items-center gap-1", children: items.map((item, i) => {
-        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.avatar }),
-          /* @__PURE__ */ jsxs("span", { className: "min-w-0 text-left", children: [
-            /* @__PURE__ */ jsx("span", { className: "block max-w-32 truncate text-[11px] leading-tight font-medium", children: item.label }),
-            /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("ol", { className: "flex w-max min-w-full items-center gap-1 py-0.5", children: items.map((item, i) => {
+        const chip = (props) => /* @__PURE__ */ jsx(
+          StepChip,
+          {
+            kind: "adhoc",
+            phase: "ready",
+            icon: item.avatar,
+            label: item.label,
+            current: item.current,
+            labelClassName: "max-w-32 truncate",
+            title: item.description ?? item.label,
+            className: "shrink-0 [&_.wf-badge]:bg-transparent",
+            ...props,
+            children: /* @__PURE__ */ jsx(
               "span",
               {
-                className: "block text-[10px] leading-tight text-muted-foreground",
+                className: "shrink-0 text-[10px] font-normal text-muted-foreground",
                 title: item.exactTime,
                 children: item.time
               }
             )
-          ] })
-        ] });
-        const cls = cn(
-          "flex shrink-0 items-center gap-1.5 rounded-md px-1 py-0.5",
-          item.current && "bg-accent text-accent-foreground"
+          }
         );
         return /* @__PURE__ */ jsxs(
           "li",
@@ -6276,26 +6333,11 @@ function TaskFlow({
             className: "flex shrink-0 items-center gap-1",
             "data-testid": `thread-flow-${item.id}`,
             children: [
-              i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
-              item.onSelect ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  className: cn(cls, "hover:bg-muted"),
-                  onClick: item.onSelect,
-                  title: item.description ?? item.label,
-                  children: content
-                }
-              ) : item.detail ? /* @__PURE__ */ jsxs(Popover, { children: [
-                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    className: cn(cls, "hover:bg-muted"),
-                    title: item.description ?? item.label,
-                    children: content
-                  }
-                ) }),
+              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "wf-link wf-kind-adhoc w-3 flex-none", "data-done": true }),
+              item.onSelect ? chip({ onClick: item.onSelect }) : item.detail ? /* @__PURE__ */ jsxs(Popover, { children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: chip({}) }),
                 /* @__PURE__ */ jsx(PopoverContent, { className: "max-h-72 overflow-y-auto text-sm whitespace-pre-wrap", children: item.detail })
-              ] }) : /* @__PURE__ */ jsx("div", { className: cls, title: item.description ?? item.label, children: content })
+              ] }) : chip({ inert: true })
             ]
           },
           item.id
@@ -6305,6 +6347,54 @@ function TaskFlow({
   );
 }
 function ThreadActivity({ item, children }) {
+  if (item.stepChip) {
+    const { kind, phase, icon, document } = item.stepChip;
+    const done = phase === "done" || phase === "skipped";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(`wf-kind-${kind}`, "flex flex-col items-center gap-1 px-3 py-2"),
+        "data-testid": `thread-activity-${item.id}`,
+        title: item.description,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "wf-link", "data-done": done || void 0 }),
+            /* @__PURE__ */ jsx(
+              StepChip,
+              {
+                inert: true,
+                kind,
+                phase,
+                icon,
+                label: item.label,
+                className: cn("shrink-0", document && "rounded-r-none"),
+                children: /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    className: "shrink-0 text-[10px] font-normal text-muted-foreground",
+                    title: item.exactTime,
+                    children: item.time
+                  }
+                )
+              }
+            ),
+            document && /* @__PURE__ */ jsx(
+              StepDocumentButton,
+              {
+                kind,
+                name: document.name,
+                onOpen: document.onOpen,
+                showName: true,
+                testId: `thread-activity-${item.id}-open-document`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "wf-link", "data-done": done || void 0 })
+          ] }),
+          children
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx("div", { className: "flex justify-center px-3 py-2", "data-testid": `thread-activity-${item.id}`, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6322,6 +6412,298 @@ function ThreadActivity({ item, children }) {
     }
   ) });
 }
+var DEFAULT_THREAD_LAUNCHER_LABELS = {
+  placeholder: "Start a new thread: ask ARBI, or @mention people\u2026",
+  todoPlaceholder: "What needs doing?",
+  withArbi: "With ARBI",
+  todo: "To-do",
+  source: "Who does the work",
+  start: "Start",
+  schedule: "Schedule",
+  started: "Started \u201C{title}\u201D",
+  open: "Open",
+  dismiss: "Dismiss",
+  shared: "Workspace",
+  private: "Only Me"
+};
+var NO_PEOPLE2 = [];
+function ThreadLauncher({
+  workflows,
+  people = NO_PEOPLE2,
+  isPending,
+  error,
+  startLabel,
+  onStart,
+  onLater,
+  onOpen,
+  autoFocus,
+  labels,
+  className
+}) {
+  const l = { ...DEFAULT_THREAD_LAUNCHER_LABELS, ...labels };
+  const [prompt, setPrompt] = useState("");
+  const [choice, setChoice] = useState("prompt");
+  const [shared, setShared] = useState(false);
+  const [started, setStarted] = useState(null);
+  const textareaRef = useRef(null);
+  const mention = useMentionAutocomplete({
+    value: prompt,
+    onValueChange: setPrompt,
+    candidates: people,
+    textareaRef
+  });
+  const todo = choice === "todo";
+  const workflowId = choice === "prompt" || todo ? null : choice;
+  const workflow = workflows.find((w) => w.external_id === workflowId);
+  const valid = workflowId ? Boolean(workflow) : Boolean(prompt.trim());
+  const values = {
+    prompt: prompt.trim(),
+    workflowId,
+    todo,
+    shared,
+    mentions: toMessageMentions(extractMentions(prompt, people))
+  };
+  const start = async () => {
+    if (!valid || isPending) return;
+    try {
+      const made = await onStart(values);
+      setStarted(made ?? null);
+      setPrompt("");
+      setChoice("prompt");
+      textareaRef.current?.focus();
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("shrink-0 border-t border-border bg-background px-3 pb-3 pt-2", className),
+      "data-testid": "thread-launcher",
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [
+        started && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mb-2 flex min-w-0 items-center gap-2 text-xs",
+            role: "status",
+            "data-testid": "thread-launcher-started",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white dark:bg-emerald-500", children: /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 3 }) }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: l.started.replace("{title}", started.title) }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "link",
+                  size: "sm",
+                  className: "h-auto shrink-0 gap-0.5 p-0 text-xs",
+                  onClick: () => onOpen(started.id),
+                  "data-testid": "thread-launcher-open",
+                  children: [
+                    l.open,
+                    /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ml-auto shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+                  "aria-label": l.dismiss,
+                  onClick: () => setStarted(null),
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card shadow-sm focus-within:border-ring", children: [
+          workflow ? /* @__PURE__ */ jsx("p", { className: "px-3 pt-2.5 text-sm font-medium", "data-testid": "thread-launcher-workflow", children: workflow.name }) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ref: textareaRef,
+                value: prompt,
+                rows: 1,
+                autoFocus,
+                onChange: (event) => mention.onValueChange(event.target.value),
+                onKeyDown: (event) => {
+                  mention.nav.handleKeyDown(event);
+                  if (event.defaultPrevented || mention.isOpen) return;
+                  if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                    event.preventDefault();
+                    void start();
+                  }
+                },
+                ...mention.isOpen ? mention.nav.comboboxProps : {},
+                ...mention.textareaProps,
+                disabled: isPending,
+                placeholder: todo ? l.todoPlaceholder : l.placeholder,
+                "aria-label": todo ? l.todoPlaceholder : l.placeholder,
+                className: "field-sizing-content max-h-40 min-h-10 resize-none border-0 bg-transparent px-3 pt-2.5 shadow-none focus-visible:ring-0",
+                "data-testid": "thread-launcher-input"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MentionMenu,
+              {
+                open: mention.isOpen,
+                placement: "above",
+                items: mention.items,
+                selectedIndex: mention.nav.selectedIndex,
+                setSelectedIndex: mention.nav.setSelectedIndex,
+                listboxId: mention.nav.listboxId,
+                onSelect: mention.pick
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-1.5", children: [
+            /* @__PURE__ */ jsxs(Select, { value: choice, onValueChange: setChoice, disabled: isPending, children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  "aria-label": l.source,
+                  className: "h-7 w-auto max-w-[45%] border-0 bg-transparent px-1.5 text-xs font-normal text-muted-foreground shadow-none hover:bg-muted",
+                  "data-testid": "thread-launcher-source",
+                  children: /* @__PURE__ */ jsx(SelectValue, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "prompt", children: l.withArbi }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "todo", children: l.todo }),
+                workflows.map((w) => /* @__PURE__ */ jsx(SelectItem, { value: w.external_id, children: w.name }, w.external_id))
+              ] })
+            ] }),
+            error && /* @__PURE__ */ jsx("p", { role: "alert", className: "min-w-0 truncate text-xs text-destructive", title: error, children: error }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                VisibilityToggle,
+                {
+                  items: { shared },
+                  onToggle: setShared,
+                  label: shared ? l.shared : l.private,
+                  disabled: isPending,
+                  "data-testid": "thread-launcher-visibility"
+                }
+              ),
+              onLater && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-8 text-muted-foreground",
+                  disabled: !valid || isPending,
+                  onClick: () => onLater(values),
+                  "aria-label": l.schedule,
+                  title: l.schedule,
+                  "data-testid": "thread-launcher-later",
+                  children: /* @__PURE__ */ jsx(CalendarClock, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "icon",
+                  className: "size-8",
+                  disabled: !valid || isPending,
+                  onClick: () => void start(),
+                  "aria-label": startLabel ?? l.start,
+                  title: startLabel ?? l.start,
+                  "data-testid": "thread-launcher-start",
+                  children: isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+var DEFAULT_WORKFLOW_RUN_STATUS_LABELS = {
+  allDone: "all {count} steps done"
+};
+var SEGMENT = {
+  done: "bg-[hsl(var(--wf-accent))]",
+  running: "bg-[hsl(var(--wf-accent))] animate-pulse",
+  waiting: "bg-[hsl(var(--wf-accent)/0.3)] ring-1 ring-inset ring-[hsl(var(--wf-accent))]",
+  failed: "bg-destructive",
+  skipped: "ring-1 ring-inset ring-muted-foreground/40",
+  ready: "ring-1 ring-inset ring-[hsl(var(--wf-accent)/0.7)]",
+  blocked: "ring-1 ring-inset ring-[hsl(var(--wf-accent)/0.7)]"
+};
+function WorkflowRunStatus({
+  steps,
+  states,
+  assigneeOf,
+  labels,
+  isLoading,
+  workStatus,
+  maxSegments = 7,
+  className,
+  testId = "workflow-run-status"
+}) {
+  const l = { ...DEFAULT_WORKFLOW_RUN_STATUS_LABELS, ...labels };
+  const ordered = stepLevels(steps).flat();
+  const phaseOf = (id) => isLoading ? "blocked" : stepPhase(steps, states, id);
+  const finished = !isLoading && isRunFinished(steps, states);
+  const atId = finished || isLoading ? void 0 : activeStepId(stepLevels(steps), phaseOf);
+  const at = ordered.find((s) => s.id === atId);
+  const phase = at ? phaseOf(at.id) : "done";
+  const assignee = at && ["ready", "waiting"].includes(phase) ? assigneeOf?.(at) : void 0;
+  const state = finished ? workStatus === "done" ? "done" : "ready" : phase === "running" ? "generating" : phase === "failed" ? "failed" : assignee ? "needs" : "next";
+  const detail = at ? at.title : finished ? (l.allDone ?? "").replace("{count}", String(ordered.length)) : void 0;
+  const n = ordered.length;
+  const size = Math.min(maxSegments, n);
+  const centre = at ? ordered.indexOf(at) : n - 1;
+  const start = Math.max(0, Math.min(n - size, centre - Math.floor(size / 2)));
+  const shown = ordered.slice(start, start + size);
+  const ellipsis = (side) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "px-0.5 text-[10px] leading-none text-muted-foreground",
+      "data-testid": `${testId}-more-${side}`,
+      children: "\u2026"
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex min-w-0 flex-col justify-center gap-1", className),
+      "data-testid": testId,
+      "data-phase": phase,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", "aria-hidden": true, children: [
+          start > 0 && ellipsis("before"),
+          shown.map((s) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                `wf-kind-${stepKindOf(s)}`,
+                "h-1.5 w-3 shrink-0 rounded-full",
+                SEGMENT[phaseOf(s.id)],
+                s.id === atId && "w-5"
+              ),
+              title: s.title,
+              "data-phase": phaseOf(s.id)
+            },
+            s.id
+          )),
+          start + size < n && ellipsis("after")
+        ] }),
+        isLoading ? /* @__PURE__ */ jsx("span", { className: "text-xs leading-tight", children: "\xA0" }) : /* @__PURE__ */ jsx(
+          ThreadStatusLine,
+          {
+            state,
+            name: assignee,
+            detail,
+            labels,
+            testId: `${testId}-line`
+          }
+        )
+      ]
+    }
+  );
+}
 var STEP_KINDS = /* @__PURE__ */ new Set([
   "step_started",
   "step_waiting",
@@ -6353,13 +6735,21 @@ function groupThreadActivity(steps, items) {
 }
 var DEFAULT_WORKFLOW_THREAD_STRIP_LABELS = {
   happened: "{count} in this step",
+  updates: "{count} updates in this step",
   nothingYet: "Nothing here yet.",
   skip: "Skip this step",
   startedBy: "Started by {step} in {thread}",
   signalled: "This step signalled \u201C{signal}\u201D",
   linkedRun: "Started on \u201C{signal}\u201D: open its thread",
   waitingFor: "Waiting for {name}",
-  sentBack: "Sent back to be done again"
+  sentBack: "Sent back to be done again",
+  started: "Started",
+  after: "After",
+  beforeSteps: "Before the first step",
+  afterSteps: "After the last step",
+  kinds: DEFAULT_STEP_KIND_LABELS,
+  documents: DEFAULT_STEP_DOCUMENT_LABELS,
+  record: DEFAULT_STEP_RECORD_LABELS
 };
 function WorkflowThreadStartedBy({
   origin,
@@ -6429,7 +6819,7 @@ function Entry({ item }) {
       )
     ] })
   ] });
-  return item.onSelect ? /* @__PURE__ */ jsx(
+  return item.onSelect ? /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -6438,7 +6828,77 @@ function Entry({ item }) {
       "data-testid": `thread-flow-${item.id}`,
       children: content
     }
-  ) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1.5 px-1 py-0.5", "data-testid": `thread-flow-${item.id}`, children: content });
+  ) }) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1.5 px-1 py-0.5", "data-testid": `thread-flow-${item.id}`, children: content });
+}
+var BEADS_PX = 32;
+var DOC_BUTTON_PX = 34;
+function Beads({ items, label }) {
+  if (!items.length) return null;
+  const faces = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = item.actor ?? item.id;
+    faces.delete(key);
+    faces.set(key, item.avatar);
+  }
+  const shown = [...faces.entries()].slice(-3);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "flex shrink-0 items-center gap-1",
+      title: label.replace("{count}", String(items.length)),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "wf-beads [&_svg]:size-4", "aria-hidden": true, children: shown.map(([key, avatar]) => /* @__PURE__ */ jsx("span", { children: avatar }, key)) }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal tabular-nums text-muted-foreground", "aria-hidden": true, children: items.length }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label.replace("{count}", String(items.length)) })
+      ]
+    }
+  );
+}
+function PopoverHeading({
+  kind,
+  icon,
+  overline,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(`wf-kind-${kind}`, "flex items-center gap-2 px-1 pb-1"), children: [
+    /* @__PURE__ */ jsx("span", { className: "wf-badge flex size-7 shrink-0 items-center justify-center rounded-md [&_svg]:size-4", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "wf-kind-text block truncate text-[10px] font-semibold uppercase tracking-wider", children: overline }),
+      /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold leading-snug", children: title })
+    ] })
+  ] });
+}
+function EntriesChip({
+  kind,
+  icon,
+  label,
+  items,
+  extra,
+  heading,
+  testId
+}) {
+  const latest = items.at(-1);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      StepChip,
+      {
+        kind,
+        phase: "ready",
+        icon,
+        label,
+        labelClassName: "max-w-40 truncate",
+        title: latest ? `${label} \xB7 ${latest.label} \xB7 ${latest.time}` : label,
+        className: "shrink-0",
+        "data-testid": testId,
+        children: /* @__PURE__ */ jsx(Beads, { items, label: heading })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-72 space-y-1 p-2", "data-testid": `${testId}-menu`, children: [
+      /* @__PURE__ */ jsx(PopoverHeading, { kind, icon, overline: heading, title: label }),
+      extra,
+      items.map((item) => /* @__PURE__ */ jsx(Entry, { item }, item.id))
+    ] })
+  ] });
 }
 function WorkflowThreadStrip({
   steps,
@@ -6450,18 +6910,27 @@ function WorkflowThreadStrip({
   signals = [],
   startedBy,
   assigneeOf,
+  nameOfDoc,
+  onOpenDocument,
+  inputs = {},
+  nameOf,
   labels,
   barLabels,
   className
 }) {
   const l = { ...DEFAULT_WORKFLOW_THREAD_STRIP_LABELS, ...labels };
+  const barL = { ...DEFAULT_STEP_BAR_LABELS, ...barLabels };
   const grouped = groupThreadActivity(steps, items);
   const strays = signals.filter((s) => !steps.some((step) => step.id === s.step));
-  const chevron = /* @__PURE__ */ jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground" });
+  const link = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "wf-link wf-kind-start max-w-6", "data-done": true });
   const [selected, setSelected] = useState(null);
   const [open, setOpen] = useState(null);
   const phaseOf = (id) => stepPhase(steps, states, id);
   const iconOf = (step) => step.icon && renderIcon ? renderIcon(step.icon) : void 0;
+  const glyphOf = (step) => {
+    const KindIcon = STEP_KIND_ICONS[stepKindOf(step)];
+    return iconOf(step) ?? /* @__PURE__ */ jsx(KindIcon, {});
+  };
   const waitingOf = (id) => {
     const step = steps.find((s) => s.id === id);
     const phase = phaseOf(id);
@@ -6470,94 +6939,167 @@ function WorkflowThreadStrip({
     const name = step && (phase === "ready" || phase === "waiting") ? assigneeOf?.(step) : void 0;
     return name ? l.waitingFor.replace("{name}", name) : void 0;
   };
-  const pill = (step, isCurrent, narrow = false) => {
+  const pill = (step, isCurrent) => {
     const phase = phaseOf(step.id);
     const happened = grouped.byStep[step.id] ?? [];
     const assignee = phase === "ready" || phase === "waiting" ? assigneeOf?.(step) : void 0;
     const waiting = waitingOf(step.id);
     const sentBack = states[step.id]?.sentBack;
-    return /* @__PURE__ */ jsxs(Popover, { open: open === step.id, onOpenChange: (o) => setOpen(o ? step.id : null), children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
+    const kind = stepKindOf(step);
+    const documents = stepDocuments(steps, states, step.id);
+    const latestDoc = onOpenDocument ? documents.at(-1) : void 0;
+    const finished = ["done", "skipped", "failed"].includes(phase);
+    const chip = /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: open === step.id,
+        onOpenChange: (o) => {
+          setOpen(o ? step.id : null);
+          if (o) setSelected(step.id);
+        },
+        children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            StepChip,
+            {
+              kind,
+              phase,
+              icon: glyphOf(step),
+              label: step.title,
+              current: isCurrent,
+              heading: /* @__PURE__ */ jsxs(Fragment, { children: [
+                l.kinds[kind],
+                assignee && /* @__PURE__ */ jsxs("span", { "data-testid": `workflow-thread-step-${step.id}-assignee`, children: [
+                  " \xB7 ",
+                  waiting
+                ] })
+              ] }),
+              labelClassName: isCurrent ? STEP_LABEL_CURRENT : cn(STEP_LABEL, STEP_LABEL_MAX),
+              className: cn(latestDoc && "rounded-r-none"),
+              title: waiting ? `${step.title} \xB7 ${waiting}` : step.title,
+              "data-testid": `workflow-thread-step-${step.id}`,
+              children: [
+                sentBack && /* @__PURE__ */ jsx(
+                  CornerUpLeft,
+                  {
+                    className: "size-3 shrink-0 text-amber-600 dark:text-amber-400",
+                    "aria-label": l.sentBack,
+                    "data-testid": `workflow-thread-step-${step.id}-sent-back`
+                  }
+                ),
+                /* @__PURE__ */ jsx(Beads, { items: happened, label: l.updates })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              align: "start",
+              className: "w-80 space-y-1.5 p-2",
+              "data-testid": `workflow-thread-step-${step.id}-menu`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  PopoverHeading,
+                  {
+                    kind,
+                    icon: glyphOf(step),
+                    overline: `${l.kinds[kind]} \xB7 ${waiting ?? barL.phases[phase]}`,
+                    title: step.title
+                  }
+                ),
+                sentBack && /* @__PURE__ */ jsx("p", { className: "px-1 text-xs text-amber-700 dark:text-amber-300", children: l.sentBack }),
+                /* @__PURE__ */ jsx(
+                  StepDocumentCards,
+                  {
+                    refs: documents,
+                    heading: step.kind === "review" ? phase === "done" ? l.documents.approved : l.documents.toApprove : l.documents.produced,
+                    nameOfDoc,
+                    onOpen: onOpenDocument,
+                    labels: l.documents,
+                    testId: `workflow-thread-step-${step.id}-docs`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StepRecord,
+                  {
+                    step,
+                    state: states[step.id],
+                    inputs,
+                    nameOf,
+                    labels: l.record,
+                    testId: `workflow-thread-step-${step.id}-record`
+                  }
+                ),
+                (happened.length > 0 || !finished) && /* @__PURE__ */ jsx("p", { className: "px-1 text-xs font-medium text-muted-foreground", children: happened.length ? l.happened.replace("{count}", String(happened.length)) : l.nothingYet }),
+                happened.map((item) => /* @__PURE__ */ jsx(Entry, { item }, item.id)),
+                renderStepAction?.(step, phase),
+                onSkip && ["ready", "blocked", "failed", "waiting"].includes(phase) && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onSkip(step.id),
+                    className: "w-full rounded-md px-1 py-1 text-left text-xs text-muted-foreground hover:bg-accent",
+                    "data-testid": `workflow-thread-step-${step.id}-skip`,
+                    children: l.skip
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+    return latestDoc ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center", children: [
+      chip,
+      /* @__PURE__ */ jsx(
+        StepDocumentButton,
         {
-          type: "button",
-          className: cn(STEP_PILL, "py-0.5", stepPillTone(phase, isCurrent)),
-          "aria-current": isCurrent ? "step" : void 0,
-          title: waiting ? `${step.title} \xB7 ${waiting}` : step.title,
-          "data-phase": phase,
-          "data-testid": `workflow-thread-step-${step.id}`,
-          children: [
-            /* @__PURE__ */ jsx(PhaseMark, { phase, icon: iconOf(step) }),
-            /* @__PURE__ */ jsx("span", { className: isCurrent ? STEP_LABEL_CURRENT : cn(STEP_LABEL, STEP_LABEL_MAX), children: step.title }),
-            sentBack && /* @__PURE__ */ jsx(
-              CornerUpLeft,
-              {
-                className: "size-3 shrink-0 text-amber-600 dark:text-amber-400",
-                "aria-label": l.sentBack,
-                "data-testid": `workflow-thread-step-${step.id}-sent-back`
-              }
-            ),
-            assignee && isCurrent && !narrow && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: cn(STEP_EXTRA, "flex max-w-[12rem] items-center gap-0.5"),
-                title: waiting,
-                "data-testid": `workflow-thread-step-${step.id}-assignee`,
-                children: [
-                  /* @__PURE__ */ jsx(UserRound, { className: "size-3 shrink-0" }),
-                  /* @__PURE__ */ jsx("span", { className: "truncate", children: waiting })
-                ]
-              }
-            ),
-            happened.length > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-muted px-1.5 text-[10px] font-normal text-muted-foreground", children: happened.length })
-          ]
+          kind,
+          name: nameOfDoc?.(splitDocRef(latestDoc).id) ?? latestDoc,
+          onOpen: () => onOpenDocument?.(latestDoc),
+          testId: `workflow-thread-step-${step.id}-open-document`
         }
-      ) }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
+      )
+    ] }) : chip;
+  };
+  const leading = startedBy || grouped.before.length ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+    grouped.before.length ? /* @__PURE__ */ jsx(
+      EntriesChip,
+      {
+        kind: "start",
+        icon: /* @__PURE__ */ jsx(Zap, {}),
+        label: l.started,
+        items: grouped.before,
+        heading: l.beforeSteps,
+        extra: startedBy && /* @__PURE__ */ jsx(WorkflowThreadStartedBy, { origin: startedBy, labels }),
+        testId: "workflow-thread-start"
+      }
+    ) : startedBy && /* @__PURE__ */ jsx(WorkflowThreadStartedBy, { origin: startedBy, labels }),
+    link
+  ] }) : null;
+  const trailing = grouped.after.length || strays.length ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+    grouped.after.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "wf-link max-w-6" }),
+      /* @__PURE__ */ jsx(
+        EntriesChip,
         {
-          align: "start",
-          className: "w-72 space-y-1 p-2",
-          "data-testid": `workflow-thread-step-${step.id}-menu`,
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "px-1 text-xs font-semibold", children: step.title }),
-            waiting && /* @__PURE__ */ jsx("p", { className: "px-1 text-xs", "data-testid": `workflow-thread-step-${step.id}-waiting-for`, children: waiting }),
-            sentBack && /* @__PURE__ */ jsx("p", { className: "px-1 text-xs text-amber-700 dark:text-amber-300", children: l.sentBack }),
-            /* @__PURE__ */ jsx("p", { className: "px-1 text-xs font-medium text-muted-foreground", children: happened.length ? l.happened.replace("{count}", String(happened.length)) : l.nothingYet }),
-            happened.map((item) => /* @__PURE__ */ jsx(Entry, { item }, item.id)),
-            renderStepAction?.(step, phase),
-            onSkip && ["ready", "blocked", "failed", "waiting"].includes(phase) && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onSkip(step.id),
-                className: "w-full rounded-md px-1 py-1 text-left text-xs text-muted-foreground hover:bg-accent",
-                "data-testid": `workflow-thread-step-${step.id}-skip`,
-                children: l.skip
-              }
-            )
-          ]
+          kind: "adhoc",
+          icon: /* @__PURE__ */ jsx(MessagesSquare, {}),
+          label: l.after,
+          items: grouped.after,
+          heading: l.afterSteps,
+          testId: "workflow-thread-after"
         }
       )
-    ] });
-  };
-  const leading = startedBy || grouped.before.length ? /* @__PURE__ */ jsxs("ol", { className: "flex shrink-0 items-center gap-1", children: [
-    startedBy && /* @__PURE__ */ jsxs("li", { className: "flex shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsx(WorkflowThreadStartedBy, { origin: startedBy, labels }),
-      chevron
     ] }),
-    grouped.before.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsx(Entry, { item }),
-      chevron
-    ] }, item.id))
-  ] }) : null;
-  const trailing = grouped.after.length || strays.length ? /* @__PURE__ */ jsxs("ol", { className: "flex shrink-0 items-center gap-1", children: [
-    grouped.after.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex shrink-0 items-center gap-1", children: [
-      chevron,
-      /* @__PURE__ */ jsx(Entry, { item })
-    ] }, item.id)),
-    strays.map((s) => /* @__PURE__ */ jsx("li", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ jsx(SignalPill, { signal: s, l }) }, `${s.step}-${s.signal}`))
+    strays.map((s) => /* @__PURE__ */ jsx(SignalPill, { signal: s, l }, `${s.step}-${s.signal}`))
   ] }) : null;
+  const at = steps.find((s) => s.id === (selected ?? activeStepId(stepLevels(steps), phaseOf)));
+  const headingPx = (step) => `${l.kinds[stepKindOf(step)]} \xB7 ${waitingOf(step.id) ?? ""}`.length * 5.6 - step.title.length * 6.5;
+  const reserve = {
+    always: (at ? Math.max(0, headingPx(at)) : 0) + steps.filter((s) => grouped.byStep[s.id]?.length).length * BEADS_PX + (onOpenDocument ? steps.filter((s) => stepDocuments(steps, states, s.id).length).length * DOC_BUTTON_PX : 0),
+    leading: leading ? 150 : 0,
+    trailing: trailing ? 120 : 0
+  };
   return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 flex-1", className), "data-testid": "workflow-thread-strip", children: /* @__PURE__ */ jsx(
     StepBarFrame,
     {
@@ -6568,16 +7110,13 @@ function WorkflowThreadStrip({
         setSelected(id);
         setOpen(id);
       },
-      renderStep: (step, _level, win, narrow) => pill(
-        step,
-        step.id === win.levels[win.currentLevel]?.primary.id || step.id === selected,
-        narrow
-      ),
-      noteOf: waitingOf,
+      renderStep: (step, _level, win) => pill(step, step.id === win.levels[win.currentLevel]?.primary.id || step.id === selected),
       renderAfter: (level) => signals.filter((s) => level.steps.some((step) => step.id === s.step)).map((s) => /* @__PURE__ */ jsx(SignalPill, { signal: s, l }, `${s.step}-${s.signal}`)),
       leading,
       trailing,
-      icon: iconOf,
+      reservePx: reserve,
+      icon: glyphOf,
+      kindOf: stepKindOf,
       labels: { waitingFor: l.waitingFor, ...barLabels },
       tid: (suffix) => `workflow-thread-${suffix}`
     }
@@ -6624,7 +7163,14 @@ var STEP_LABELS = {
   step_progress: "Signed",
   step_sent_back: "Sent back"
 };
-function compactThreadActivity(events) {
+var STEP_VERBS = {
+  step_started: "started",
+  step_done: "done",
+  step_skipped: "skipped",
+  step_failed: "failed",
+  step_sent_back: "sent back"
+};
+function compactThreadActivity(events, stepTitleOf) {
   const result = [];
   const batches = /* @__PURE__ */ new Map();
   for (const event of events) {
@@ -6647,9 +7193,10 @@ function compactThreadActivity(events) {
       entry.label = `Notified ${count} ${count === 1 ? "user" : "users"}`;
     } else if (STEP_LABELS[event.kind]) {
       const documents = eventWaitingDocuments(event.detail);
+      const title = typeof event.detail?.step === "string" ? stepTitleOf?.(event.detail.step) : void 0;
       result.push({
         event,
-        label: documents ? waitingForDocumentsText(documents.length) : STEP_LABELS[event.kind],
+        label: documents ? waitingForDocumentsText(documents.length) : title && STEP_VERBS[event.kind] ? `${title} ${STEP_VERBS[event.kind]}` : STEP_LABELS[event.kind],
         recipients: []
       });
     } else if (["artifact_created", "artifact_edited", "document_added", "document_removed"].includes(
@@ -6678,13 +7225,13 @@ function compactThreadActivity(events) {
       "done"
     ].includes(event.kind)) {
       const labels = {
-        created: "Started Task",
+        created: "Started thread",
         participant_joined: "Followed Up",
         assistant_responded: "Answered",
         // A stopped turn logs its own crumb, so the header no longer reads the previous
         // answer's "Answered" as the outcome of the turn that was stopped.
         assistant_stopped: "Stopped",
-        done: "Marked Done"
+        done: "Marked done"
       };
       result.push({
         event,
@@ -8229,7 +8776,8 @@ function ConversationTurnSpeaker({
   currentUserId,
   colorClass,
   platformName = "ARBI",
-  platformLogoSrc = "/favicon.svg"
+  platformLogoSrc = "/favicon.svg",
+  variant = "pill"
 }) {
   if (!role) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
   if (role === "assistant" && !actor)
@@ -8237,7 +8785,7 @@ function ConversationTurnSpeaker({
       UserEntity,
       {
         size: "sm",
-        variant: "pill",
+        variant,
         interactive: false,
         picture: platformLogoSrc,
         avatarImageClassName: "object-contain p-0.5",
@@ -8252,7 +8800,7 @@ function ConversationTurnSpeaker({
     UserEntity,
     {
       size: "sm",
-      variant: "pill",
+      variant,
       interactive: false,
       isMe,
       isAgent: actor.external_id.startsWith("agt-"),
@@ -9923,6 +10471,6 @@ function AgentCreateView({
   ] });
 }
 
-export { AgentAvatarField, AgentBar, AgentBarIconButton, AgentBarMenu, AgentBarNotes, AgentBarProbeAnswer, AgentBarQueuedNote, AgentBarStatus, AgentCard, AgentCreateView, AgentCreatedView, AgentCreator, AgentEditView, AgentGallery, AgentMainView, AgentSelect, AgentTypeSelector, CapabilityGrid, CapabilityTile, ConfigField, ConfigForm, ConsentActions, ConsentBulletList, ConsentCard, ConsentFootnote, ConsentHeader, ConsentMessage, ConsentNotice, ConsentPage, ConsentPermissionList, ConsentSection, ConsentStrong, ConsentText, ConversationListView, ConversationTurnSpeaker, CopyableUrl, DEFAULT_AGENT_AVATAR_FIELD_LABELS, DEFAULT_AGENT_BAR_LABELS, DEFAULT_AGENT_CARD_LABELS, DEFAULT_AGENT_CREATOR_LABELS, DEFAULT_AGENT_GALLERY_LABELS, DEFAULT_AGENT_SELECT_LABELS, DEFAULT_AGENT_STEPS_LABELS, DEFAULT_AGENT_TYPE_SELECTOR_LABELS, DEFAULT_AUTHORIZE_AGENT_LABELS, DEFAULT_CONFIG_FIELD_LABELS, DEFAULT_CONFIG_FORM_LABELS, DEFAULT_CONSENT_ACTIONS_LABELS, DEFAULT_COPYABLE_URL_LABELS, DEFAULT_NEW_THREAD_DIALOG_LABELS, DEFAULT_PILL_SELECT_LABELS, DEFAULT_RECURRENCE, DEFAULT_RECURRENCE_BUILDER_LABELS, DEFAULT_SKILL_CARD_LABELS, DEFAULT_SKILL_EDIT_FORM_LABELS, DEFAULT_SKILL_GENERATE_FORM_LABELS, DEFAULT_SKILL_GLOBAL_BADGE_LABELS, DEFAULT_SKILL_ROW_LABELS, DEFAULT_SKILL_VIEW_TOGGLE_LABELS, DEFAULT_SUBAGENT_ROSTER_LABELS, DEFAULT_TASKS_CHROME_LABELS, DEFAULT_TASK_COMPOSER_LABELS, DEFAULT_TASK_LIST_LABELS, DEFAULT_TASK_OUTPUTS_CELL_LABELS, DEFAULT_TASK_PLAN_LABELS, DEFAULT_TASK_RUNS_DIALOG_LABELS, DEFAULT_TASK_STATUS_PILL_LABELS, DEFAULT_TASK_THREAD_CHIP_LABELS, DEFAULT_TASK_TRIGGER_CHIP_LABELS, DEFAULT_TUPLE_ARRAY_FIELD_LABELS, DEFAULT_UPLOAD_TASK_ITEM_LABELS, DEFAULT_UPLOAD_TASK_LIST_LABELS, DEFAULT_WORKFLOWS_CHROME_LABELS, DEFAULT_WORKFLOW_CONFIG_DIALOG_LABELS, DEFAULT_WORKFLOW_LIST_LABELS, DEFAULT_WORKFLOW_THREAD_STRIP_LABELS, DERIVED_NAME_WORDS, EMPTY_NEW_THREAD, EntityChip, GoalCriteria, MAX_TASK_DEPTH, NewThreadDialog, PersonPill, PillSelect, RecurrenceBuilder, STATUS_LABELS, STATUS_ORDER, STATUS_TONE, SkillActionButton, SkillCard, SkillDetail, SkillDetailSection, SkillEditForm, SkillFilterChips, SkillGenerateForm, SkillGlobalBadge, SkillRow, SkillTile, SkillTypeBadge, SkillViewToggle, StepDetail, StepNarration, StepOutcome, StepParams, StepRow, StepSummary, StepTrace, StepTraceSummary, SubAgentLane, SubStepGroup, SubagentRoster, TASK_COLUMN_ORDER, TRIGGER_LABELS, TaskActivityDialog, TaskComposer, TaskFlow, TaskInbox, TaskMoveDialog, TaskOutputsCell, TaskPlan, TaskRunsDialog, TaskStartDialog, TaskStatusPill, TaskTable, TaskThreadChip, TaskTriggerChip, TasksToolbar, ThreadActivity, ThreadNotifyDialog, TupleArrayField, UploadTaskItem, UploadTaskList, WEEKDAYS, WORKFLOW_COLUMN_ORDER, WorkflowConfigDialog, WorkflowDocumentsField, WorkflowLauncher, WorkflowThreadStartedBy, WorkflowThreadStrip, WorkflowsTable, WorkflowsToolbar, agentConfigSectionToValues, agentCreatorToConfigSection, asTaskStatus, authModeFor, buildRRule, buildTaskRows, buildWorkflowScopeSource, compactThreadActivity, composePersona, composerToTaskQuery, composerToWorkRequest, composerToWorkflowRequest, composerToWorkflowUpdate, createTaskColumns, createWorkflowColumns, createsWork, defaultScopeRenderer, defaultTaskComposerValues, deriveAgentName, deriveWorkflowName, descendantIds, describeRRule, filterConversationRows, firstWords, formatElapsed, goalProgress, groupThreadActivity, hasTaskFields, hasTrigger, humanizeSection, indexTasks, inferType, inputDocumentIds, isAgenticWorkflow, isOutOfBounds, isPlainTodo, isSkillRow, isValidAgentName, isoToLocalInput, linkedRunsFromActivity, localInputToIso, matchWorkflowScope, moveTargets, newThreadToRequest, nextCriterionId, ownerExtId, parseRRule, prettifyKey, resolveScopeInputs, skillSlug, stripPersonaPreamble, summarizeAgent, summarizeCapabilities, taskComposerToCreateRequest, taskComposerToUpdateRequest, taskNeedsAccess, taskToComposerValues, useWorkflowPreview, workflowFromSkillMarkdown, workflowStatus, workflowTaskFields, workflowToComposerValues, workflowToSkillMarkdown, workflowTriggerType, workflowWhen };
-//# sourceMappingURL=chunk-ZP4IFW2E.js.map
-//# sourceMappingURL=chunk-ZP4IFW2E.js.map
+export { AgentAvatarField, AgentBar, AgentBarIconButton, AgentBarMenu, AgentBarNotes, AgentBarProbeAnswer, AgentBarQueuedNote, AgentBarStatus, AgentCard, AgentCreateView, AgentCreatedView, AgentCreator, AgentEditView, AgentGallery, AgentMainView, AgentSelect, AgentTypeSelector, CapabilityGrid, CapabilityTile, ConfigField, ConfigForm, ConsentActions, ConsentBulletList, ConsentCard, ConsentFootnote, ConsentHeader, ConsentMessage, ConsentNotice, ConsentPage, ConsentPermissionList, ConsentSection, ConsentStrong, ConsentText, ConversationListView, ConversationTurnSpeaker, CopyableUrl, DEFAULT_AGENT_AVATAR_FIELD_LABELS, DEFAULT_AGENT_BAR_LABELS, DEFAULT_AGENT_CARD_LABELS, DEFAULT_AGENT_CREATOR_LABELS, DEFAULT_AGENT_GALLERY_LABELS, DEFAULT_AGENT_SELECT_LABELS, DEFAULT_AGENT_STEPS_LABELS, DEFAULT_AGENT_TYPE_SELECTOR_LABELS, DEFAULT_AUTHORIZE_AGENT_LABELS, DEFAULT_CONFIG_FIELD_LABELS, DEFAULT_CONFIG_FORM_LABELS, DEFAULT_CONSENT_ACTIONS_LABELS, DEFAULT_COPYABLE_URL_LABELS, DEFAULT_NEW_THREAD_DIALOG_LABELS, DEFAULT_PILL_SELECT_LABELS, DEFAULT_RECURRENCE, DEFAULT_RECURRENCE_BUILDER_LABELS, DEFAULT_SKILL_CARD_LABELS, DEFAULT_SKILL_EDIT_FORM_LABELS, DEFAULT_SKILL_GENERATE_FORM_LABELS, DEFAULT_SKILL_GLOBAL_BADGE_LABELS, DEFAULT_SKILL_ROW_LABELS, DEFAULT_SKILL_VIEW_TOGGLE_LABELS, DEFAULT_SUBAGENT_ROSTER_LABELS, DEFAULT_TASKS_CHROME_LABELS, DEFAULT_TASK_COMPOSER_LABELS, DEFAULT_TASK_LIST_LABELS, DEFAULT_TASK_OUTPUTS_CELL_LABELS, DEFAULT_TASK_PLAN_LABELS, DEFAULT_TASK_RUNS_DIALOG_LABELS, DEFAULT_TASK_STATUS_PILL_LABELS, DEFAULT_TASK_THREAD_CHIP_LABELS, DEFAULT_TASK_TRIGGER_CHIP_LABELS, DEFAULT_THREAD_LAUNCHER_LABELS, DEFAULT_THREAD_STATE_LABELS, DEFAULT_TUPLE_ARRAY_FIELD_LABELS, DEFAULT_UPLOAD_TASK_ITEM_LABELS, DEFAULT_UPLOAD_TASK_LIST_LABELS, DEFAULT_WORKFLOWS_CHROME_LABELS, DEFAULT_WORKFLOW_CONFIG_DIALOG_LABELS, DEFAULT_WORKFLOW_LIST_LABELS, DEFAULT_WORKFLOW_RUN_STATUS_LABELS, DEFAULT_WORKFLOW_THREAD_STRIP_LABELS, DERIVED_NAME_WORDS, EMPTY_NEW_THREAD, EntityChip, GoalCriteria, MAX_TASK_DEPTH, NewThreadDialog, PersonPill, PillSelect, RecurrenceBuilder, STATUS_LABELS, STATUS_ORDER, STATUS_TONE, SkillActionButton, SkillCard, SkillDetail, SkillDetailSection, SkillEditForm, SkillFilterChips, SkillGenerateForm, SkillGlobalBadge, SkillRow, SkillTile, SkillTypeBadge, SkillViewToggle, StepDetail, StepNarration, StepOutcome, StepParams, StepRow, StepSummary, StepTrace, StepTraceSummary, SubAgentLane, SubStepGroup, SubagentRoster, TASK_COLUMN_ORDER, TRIGGER_LABELS, TaskActivityDialog, TaskComposer, TaskFlow, TaskInbox, TaskMoveDialog, TaskOutputsCell, TaskPlan, TaskRunsDialog, TaskStartDialog, TaskStatusPill, TaskTable, TaskThreadChip, TaskTriggerChip, TasksToolbar, ThreadActivity, ThreadLauncher, ThreadNotifyDialog, ThreadStatusLine, TupleArrayField, UploadTaskItem, UploadTaskList, WEEKDAYS, WORKFLOW_COLUMN_ORDER, WorkflowConfigDialog, WorkflowDocumentsField, WorkflowLauncher, WorkflowRunStatus, WorkflowThreadStartedBy, WorkflowThreadStrip, WorkflowsTable, WorkflowsToolbar, agentConfigSectionToValues, agentCreatorToConfigSection, asTaskStatus, authModeFor, buildRRule, buildTaskRows, buildWorkflowScopeSource, compactThreadActivity, composePersona, composerToTaskQuery, composerToWorkRequest, composerToWorkflowRequest, composerToWorkflowUpdate, createTaskColumns, createWorkflowColumns, createsWork, defaultScopeRenderer, defaultTaskComposerValues, deriveAgentName, deriveWorkflowName, descendantIds, describeRRule, filterConversationRows, firstWords, formatElapsed, goalProgress, groupThreadActivity, hasTaskFields, hasTrigger, humanizeSection, indexTasks, inferType, inputDocumentIds, isAgenticWorkflow, isOutOfBounds, isPlainTodo, isSkillRow, isValidAgentName, isoToLocalInput, linkedRunsFromActivity, localInputToIso, matchWorkflowScope, moveTargets, newThreadToRequest, nextCriterionId, ownerExtId, parseRRule, prettifyKey, resolveScopeInputs, skillSlug, stripPersonaPreamble, summarizeAgent, summarizeCapabilities, taskComposerToCreateRequest, taskComposerToUpdateRequest, taskNeedsAccess, taskToComposerValues, useWorkflowPreview, workflowFromSkillMarkdown, workflowStatus, workflowTaskFields, workflowToComposerValues, workflowToSkillMarkdown, workflowTriggerType, workflowWhen };
+//# sourceMappingURL=chunk-EJSJ27HV.js.map
+//# sourceMappingURL=chunk-EJSJ27HV.js.map