@sanity/workflow-studio-plugin 0.4.0 → 0.5.0

package/dist/_chunks-es/index.js

@@ -4,9 +4,9 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
 import { TimelineIcon } from "@sanity/icons/Timeline";
 
-import { Tooltip, Box, Stack, Text, useClickOutsideEvent, Popover, Flex, TextInput, Button, Select, Checkbox, TextSkeleton, Autocomplete, Card, TextArea, useToast, Dialog, MenuButton, Menu, MenuItem, useTheme_v2, Switch, Code, Badge, TabList, Tab, Spinner, TabPanel, MenuDivider } from "@sanity/ui";
+import { Tooltip, Box, Stack, Text, useClickOutsideEvent, Popover, Flex, TextInput, Button, Select, Checkbox, Autocomplete, Card, TextArea, useToast, Dialog, Switch, TextSkeleton, Code, Spinner, useTheme_v2, Badge, MenuButton, Menu, MenuItem, useElementSize, TabList, Tab, TabPanel, MenuDivider } from "@sanity/ui";
 
-import { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback, useId, Fragment as Fragment$1, Component, lazy, Suspense } from "react";
+import { createContext, useContext, useEffect, useSyncExternalStore, useCallback, useMemo, useRef, useState, Fragment as Fragment$1, createElement, isValidElement, useId, useLayoutEffect, Component, lazy, Suspense } from "react";
 
 import { usePaneRouter } from "sanity/structure";
 
@@ -16,11 +16,11 @@ import { getPublishedId } from "@sanity/client/csm";
 
 import { useStudioProjectUsers, useStudioObserver, useWorkflowEngine, useWorkflowInstances, useWorkflowSession } from "@sanity/workflow-studio";
 
-import { useCurrentUser, useValuePreview, SanityDefaultPreview, Preview, useClient, useSchema, useWorkspace, TextWithTone, usePerspective, useIsReleaseActive, useActiveReleases, useTemplates, useInitialValueResolverContext, resolveInitialValue, definePlugin, isObjectInputProps } from "sanity";
+import { useCurrentUser, SanityDefaultPreview, Preview, useValuePreview, useClient, useSchema, useWorkspace, TextWithTone, usePerspective, useIsReleaseActive, useActiveReleases, useTemplates, useInitialValueResolverContext, resolveInitialValue, definePlugin, isObjectInputProps } from "sanity";
 
 import { CalendarIcon } from "@sanity/icons/Calendar";
 
-import { ClearableDatePicker, MemberPicker as MemberPicker$1, AssigneePicker as AssigneePicker$1, MemberAvatar, AssigneeBadges as AssigneeBadges$1, AssigneeBadge as AssigneeBadge$1, MemberAvatarGroup, DatePicker, roleListLabel } from "@sanity/workflow-components";
+import { ClearableDatePicker, MemberPicker as MemberPicker$1, AssigneePicker as AssigneePicker$1, MemberAvatar, AssigneeBadges as AssigneeBadges$1, AssigneeBadge as AssigneeBadge$1, ProgressBar, MemberAvatarGroup, clampProgress, progressCaption, DatePicker, roleListLabel } from "@sanity/workflow-components";
 
 import { UserIcon } from "@sanity/icons/User";
 
@@ -28,8 +28,6 @@ import { CloseIcon } from "@sanity/icons/Close";
 
 import { SearchIcon } from "@sanity/icons/Search";
 
-import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
-
 import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
 
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
@@ -40,6 +38,8 @@ import { randomKey } from "@sanity/util/content";
 
 import { InfoOutlineIcon } from "@sanity/icons/InfoOutline";
 
+import { DocumentIcon } from "@sanity/icons/Document";
+
 import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 
 import { IntentLink, useRouter, route } from "sanity/router";
@@ -58,9 +58,9 @@ import { AddIcon } from "@sanity/icons/Add";
 
 import { BoltIcon } from "@sanity/icons/Bolt";
 
-import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
+import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 
-import { DocumentIcon } from "@sanity/icons/Document";
+import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
 
 import { UlistIcon } from "@sanity/icons/Ulist";
 
@@ -234,7 +234,49 @@ function mappingIssues(args) {
     return issues;
 }
 
-const WORKFLOWS_VIEW_ID = "workflows", WORKFLOWS_TAB_PARAM = "workflowsTab", WORKFLOW_INTENT = "workflow";
+const WORKFLOWS_VIEW_ID = "workflows", WORKFLOWS_TAB_PARAM = "workflowsTab";
+
+function withoutWorkflowsTab(params) {
+    const {[WORKFLOWS_TAB_PARAM]: _previous, ...rest} = params ?? {};
+    return rest;
+}
+
+function workflowsTabCodec(tabs) {
+    const [defaultTab] = tabs;
+    return {
+        read: params => tabs.find(tab => tab === params?.[WORKFLOWS_TAB_PARAM]) ?? defaultTab,
+        write: (params, tab) => {
+            const rest = withoutWorkflowsTab(params);
+            return tab === defaultTab ? rest : {
+                ...rest,
+                [WORKFLOWS_TAB_PARAM]: tab
+            };
+        }
+    };
+}
+
+const WORKFLOWS_FOCUS_PARAM = "workflowsFocus";
+
+function focusedViewParams(params, focusId) {
+    return {
+        ...withoutWorkflowsTab(params),
+        view: WORKFLOWS_VIEW_ID,
+        [WORKFLOWS_FOCUS_PARAM]: focusId
+    };
+}
+
+function focusedLanding(focus, instanceIds) {
+    if (!(focus === void 0 || !instanceIds.includes(focus))) return {
+        focusedId: focus,
+        instanceIds: instanceIds
+    };
+}
+
+function landingDefaultOpen(landing, instanceId) {
+    if (!(landing === void 0 || !landing.instanceIds.includes(instanceId))) return instanceId === landing.focusedId;
+}
+
+const WORKFLOW_INTENT = "workflow";
 
 function handlesWorkflowIntent(intent, params) {
     return workflowIntentState(intent, params) !== null;
@@ -307,6 +349,16 @@ function formatTimeAgo(value) {
     });
 }
 
+function stampFace(verb, at) {
+    const ago = formatTimeAgo(at);
+    return ago === "" ? {
+        lead: `${verb} ${formatShortDateTime(at)}`
+    } : {
+        lead: `${verb} ${ago}`,
+        detail: formatShortDateTime(at)
+    };
+}
+
 function formatDate(value) {
     if (!value) return "—";
     const d = parseDateFieldValue(value, "date") ?? new Date(value);
@@ -356,6 +408,10 @@ function hrefIfHttp(value) {
     }
 }
 
+function unreadableDocsReport(docs) {
+    return docs.map(doc => `Unreadable workflow document\nID: ${doc.documentId}\nReason: ${doc.reason}\nDetail: ${doc.message}`).join(`\n\n`);
+}
+
 function isButton(actionEval) {
     return actionRendering(actionEval) === "button";
 }
@@ -412,20 +468,27 @@ function useWorkflowContext() {
 }
 
 function useWorkflowsForDocument(rawId) {
-    const {register: register, unregister: unregister, byDocument: byDocument} = useWorkflowContext(), docId = rawId ? getPublishedId(rawId) : void 0;
-    return useEffect(() => {
+    const {register: register, unregister: unregister, entries: entries} = useWorkflowContext(), docId = rawId ? getPublishedId(rawId) : void 0;
+    useEffect(() => {
         if (docId) return register(docId), () => unregister(docId);
-    }, [ docId, register, unregister ]), {
+    }, [ docId, register, unregister ]);
+    const list = useSyncExternalStore(entries.subscribe, useCallback(() => docId ? entries.getDocument(docId) : EMPTY_ENTRIES, [ entries, docId ]));
+    return {
         docId: docId,
-        entries: docId ? byDocument.get(docId) ?? EMPTY_ENTRIES : EMPTY_ENTRIES
+        entries: list
     };
 }
 
+function useHeldWorkflowEntry(instanceId) {
+    const {entries: entries} = useWorkflowContext();
+    return useSyncExternalStore(entries.subscribe, useCallback(() => instanceId ? entries.getInstance(instanceId) : void 0, [ entries, instanceId ]));
+}
+
 function useWorkflowInstanceEntry(instanceId) {
-    const {byInstance: byInstance, requestInstance: requestInstance, releaseInstance: releaseInstance} = useWorkflowContext();
-    if (useEffect(() => {
+    const {requestInstance: requestInstance, releaseInstance: releaseInstance} = useWorkflowContext();
+    return useEffect(() => {
         if (instanceId) return requestInstance(instanceId), () => releaseInstance(instanceId);
-    }, [ instanceId, requestInstance, releaseInstance ]), !!instanceId) return byInstance.get(instanceId);
+    }, [ instanceId, requestInstance, releaseInstance ]), useHeldWorkflowEntry(instanceId);
 }
 
 const isTodoDone = item => item.status === "done", toggledTodoStatus = item => isTodoDone(item) ? "open" : "done";
@@ -694,14 +757,17 @@ function changesOwnStatus(action, activityName) {
     return ownStatusOps(action, activityName).length > 0;
 }
 
+function concludesHere(actionEval, activityName) {
+    return changesOwnStatus(actionEval.action, activityName) || actionEval.firing?.exitsStage === !0;
+}
+
 function actionButtonTone(args) {
-    const status = actionAdvanceStatus(args.action, args.activityName);
-    return status === void 0 ? {
+    return concludesHere(args.actionEval, args.activityName) ? {
+        mode: "default",
+        tone: actionAdvanceStatus(args.actionEval.action, args.activityName) === "failed" ? "critical" : "default"
+    } : {
         mode: "ghost",
         tone: "default"
-    } : {
-        mode: "default",
-        tone: status === "failed" ? "critical" : "default"
     };
 }
 
@@ -763,6 +829,11 @@ function actionRowKind(actionEval) {
     };
 }
 
+function actionTriggerLabel(actionEval) {
+    const label = actionLabel(actionEval.action);
+    return actionRowKind(actionEval).kind === "params-form" ? `${label}…` : label;
+}
+
 function tickActionNames(args) {
     const arrayFieldNames = new Set(args.state.flatMap(f => f._type === "array" ? [ f.name ] : [])), names = /* @__PURE__ */ new Set;
     for (const a of args.actions) for (const o of tickOpsOf(a.action)) arrayFieldNames.has(o.target.field) && tickedItemKey(o.where) !== void 0 && names.add(a.action.name);
@@ -792,8 +863,8 @@ function deriveActivityPresentation(args) {
         settled: settled,
         triggeredActions: settled ? [] : args.activityEval.actions.filter(a => a.triggered === !0),
         manualTarget: kind === "manual" ? manualLink(activity) : void 0,
-        actions: buttonActions.filter(a => !changesOwnStatus(a.action, activityName)),
-        terminalActions: buttonActions.filter(a => changesOwnStatus(a.action, activityName))
+        actions: buttonActions.filter(a => !concludesHere(a, activityName)),
+        terminalActions: buttonActions.filter(a => concludesHere(a, activityName))
     };
 }
 
@@ -806,15 +877,78 @@ function rowTerminalActions(args) {
     }).terminalActions;
 }
 
-function rowAssignField(args) {
-    return (groupEditableByActivity(args.editableFields ?? []).get(args.activityName) ?? []).find(f => f.type === "assignees" && f.editable);
+function isDeclaredEditable(field) {
+    return field.editable !== void 0;
+}
+
+function rowControlState(args) {
+    const {kinds: kinds, activity: activity, status: status, editableFields: editableFields} = args;
+    if (!(activity.fields ?? []).some(field => kinds.includes(field.type) && isDeclaredEditable(field))) return {
+        kind: "none"
+    };
+    if (editableFields !== void 0) {
+        const field = (groupEditableByActivity(editableFields).get(activity.name) ?? []).find(f => kinds.includes(f.type));
+        return field?.editable ? {
+            kind: "editable",
+            field: field
+        } : field?.disabledReason ? {
+            kind: "closed",
+            reason: describeEditDisabledReason(field.disabledReason)
+        } : {
+            kind: "closed",
+            reason: describeEditDisabledReason({
+                kind: "not-editable"
+            })
+        };
+    }
+    return isTerminalActivityStatus(status) ? {
+        kind: "closed",
+        reason: describeEditDisabledReason({
+            kind: "edit-window-closed",
+            detail: "activity settled"
+        })
+    } : {
+        kind: "loading"
+    };
+}
+
+function rowAssignControlState(args) {
+    return rowControlState({
+        kinds: [ "assignees" ],
+        ...args
+    });
+}
+
+function rowDateControlState(args) {
+    return rowControlState({
+        kinds: [ "date", "datetime" ],
+        ...args
+    });
+}
+
+function committedRowFace(row) {
+    return {
+        activityName: row.activityName,
+        title: row.title,
+        status: row.status,
+        automated: !1,
+        blocked: !1
+    };
 }
 
 function activityRowProps(args) {
-    const {activityEval: activityEval, activityState: activityState, editableFields: editableFields} = args, activityName = activityEval.activity.name, state = activityState.get(activityName) ?? [];
+    const {activityEval: activityEval, activityState: activityState, editableFields: editableFields} = args, state = activityState.get(activityEval.activity.name) ?? [];
     return {
-        assignField: rowAssignField({
-            activityName: activityName,
+        face: {
+            activityName: activityEval.activity.name,
+            title: activityLabel(activityEval.activity),
+            status: activityEval.status,
+            automated: showsAutomatedPill(activityEval),
+            blocked: showsBlockedTag(activityEval)
+        },
+        assignState: rowAssignControlState({
+            activity: activityEval.activity,
+            status: activityEval.status,
             editableFields: editableFields
         }),
         assigneeIds: assigneeUserIdsOf(state),
@@ -826,6 +960,15 @@ function activityRowProps(args) {
     };
 }
 
+function dateControlKind(state) {
+    if (state.kind === "editable" && (state.field.type === "date" || state.field.type === "datetime")) return state.field.type;
+}
+
+function dateControlValue(args) {
+    const {state: state, dates: dates} = args;
+    return state.kind === "editable" ? typeof state.field.value == "string" && state.field.value !== "" ? state.field.value : void 0 : dates.find(value => parseStoredDateValue(value) !== void 0);
+}
+
 function activityStateOf(instance, activityName) {
     return findCurrentActivityEntry(instance, activityName)?.fields ?? [];
 }
@@ -852,10 +995,17 @@ function isEmptyValue(value) {
     return value == null || value === "" || Array.isArray(value) && value.length === 0;
 }
 
+function effectiveValidation(kind, validation) {
+    return kind !== "progress" ? validation : {
+        min: validation?.min ?? 0,
+        max: validation?.max ?? 100
+    };
+}
+
 function scalarValidationIssue(args) {
     const issues = scalarValidationIssues({
         entryType: args.kind,
-        validation: args.validation,
+        validation: effectiveValidation(args.kind, args.validation),
         value: args.value
     });
     return issues === void 0 ? void 0 : `${args.label}: ${issues.join("; ")}`;
@@ -1063,8 +1213,19 @@ function HintBody(props) {
     });
 }
 
+function textInputFacet(kind) {
+    return kind === "number" || kind === "progress" ? {
+        type: "number"
+    } : kind === "url" ? {
+        type: "url"
+    } : {};
+}
+
 function scalarInputConstraints(kind, validation) {
-    return validation === void 0 ? {} : kind === "number" ? {
+    return kind === "progress" ? {
+        min: validation?.min ?? 0,
+        max: validation?.max ?? 100
+    } : validation === void 0 ? {} : kind === "number" ? {
         min: validation.min,
         max: validation.max
     } : kind === "string" || kind === "text" ? {
@@ -1177,7 +1338,7 @@ function ChoiceSelect({options: options, value: value, onChange: onChange, readO
     });
 }
 
-const SCALAR_INPUT_KINDS = [ "string", "text", "url", "number", "date", "dateTime", "datetime", "boolean" ], SCALAR_INPUT_KIND_SET = new Set(SCALAR_INPUT_KINDS);
+const SCALAR_INPUT_KINDS = [ "string", "text", "url", "number", "progress", "date", "dateTime", "datetime", "boolean" ], SCALAR_INPUT_KIND_SET = new Set(SCALAR_INPUT_KINDS);
 
 function isScalarInputKind(kind) {
     return SCALAR_INPUT_KIND_SET.has(kind);
@@ -1188,29 +1349,19 @@ function textValueOf(value) {
 }
 
 function ScalarInput({kind: kind, value: value, onChange: onChange, options: options, validation: validation}) {
-    if (options !== void 0) /* @__PURE__ */
-    return jsx(ChoiceSelect, {
+    return options !== void 0 ? /* @__PURE__ */ jsx(ChoiceSelect, {
         onChange: onChange,
         options: options,
         value: value
-    });
-    if (kind === "boolean") /* @__PURE__ */
-    return jsx(Checkbox, {
+    }) : kind === "boolean" ? /* @__PURE__ */ jsx(Checkbox, {
         checked: value === !0,
         onChange: e => onChange(e.currentTarget.checked)
-    });
-    if (kind === "date" || kind === "dateTime" || kind === "datetime") /* @__PURE__ */
-    return jsx(DateFieldInput, {
+    }) : kind === "date" || kind === "dateTime" || kind === "datetime" ? /* @__PURE__ */ jsx(DateFieldInput, {
         kind: kind === "date" ? "date" : "datetime",
         onChange: next => onChange(next ?? ""),
         value: value
-    });
-    const inputType = kind === "url" || kind === "number" ? kind : void 0;
-    /* @__PURE__ */
-    return jsx(TextInput, {
-        ...inputType ? {
-            type: inputType
-        } : {},
+    }) : /* @__PURE__ */ jsx(TextInput, {
+        ...textInputFacet(kind),
         ...scalarInputConstraints(kind, validation),
         fontSize: 1,
         onChange: e => onChange(e.currentTarget.value),
@@ -1298,25 +1449,26 @@ function MemberPickerButton({label: label = "Select member…", onChange: onChan
     });
 }
 
-function StubPreview({id: id, layout: layout, schemaType: schemaType}) {
+function useStubValuePreview(id, schemaType) {
     const value = useMemo(() => ({
         _id: id,
         _type: schemaType.name
-    }), [ id, schemaType.name ]);
-    return useValuePreview({
+    }), [ id, schemaType.name ]), preview = useValuePreview({
         schemaType: schemaType,
         value: value
-    })?.isLoading ? layout === "inline" ? /* @__PURE__ */ jsx(TextSkeleton, {
-        animated: !0,
-        radius: 1,
-        size: 1,
-        style: {
-            width: 96
-        }
-    }) : /* @__PURE__ */ jsx(SanityDefaultPreview, {
+    });
+    return {
+        value: value,
+        preview: preview
+    };
+}
+
+function StubPreview({id: id, schemaType: schemaType}) {
+    const {value: value, preview: preview} = useStubValuePreview(id, schemaType);
+    return preview.isLoading ? /* @__PURE__ */ jsx(SanityDefaultPreview, {
         isPlaceholder: !0
     }) : /* @__PURE__ */ jsx(Preview, {
-        layout: layout,
+        layout: "default",
         schemaType: schemaType,
         skipVisibilityCheck: !0,
         value: value
@@ -1426,7 +1578,6 @@ function PreviewOrId({id: id, type: type, fallbackTitle: fallbackTitle}) {
     const schemaType = useSchema().get(type);
     return schemaType ? /* @__PURE__ */ jsx(StubPreview, {
         id: id,
-        layout: "default",
         schemaType: schemaType
     }) : /* @__PURE__ */ jsxs(Flex, {
         align: "center",
@@ -1560,12 +1711,30 @@ function useClosableToast() {
     }), [ toast ]);
 }
 
+const ActionClusterContext = createContext(void 0), ActionClusterProvider = ActionClusterContext.Provider;
+
+function useActionClusterState() {
+    const [pending, setPending] = useState(!1);
+    return useMemo(() => ({
+        pending: pending,
+        onFireChange: setPending
+    }), [ pending ]);
+}
+
+function useActionClusterLock() {
+    return useContext(ActionClusterContext);
+}
+
+function useActionClusterPending() {
+    return useActionClusterLock()?.pending === !0;
+}
+
 function useFireAction(args) {
-    const {instanceId: instanceId, activity: activity, action: action, label: label} = args, {fireActionFor: fireActionFor} = useWorkflowContext(), toast = useClosableToast(), [pending, setPending] = useState(!1);
+    const {instanceId: instanceId, activity: activity, action: action, label: label} = args, {fireActionFor: fireActionFor} = useWorkflowContext(), toast = useClosableToast(), cluster = useActionClusterLock(), [localPending, setLocalPending] = useState(!1), pending = localPending || cluster?.pending === !0;
     return {
         fire: useCallback(async params => {
             if (pending) return !1;
-            setPending(!0);
+            setLocalPending(!0), cluster?.onFireChange(!0);
             try {
                 return await fireActionFor(instanceId, {
                     activity: activity,
@@ -1585,9 +1754,9 @@ function useFireAction(args) {
                     description: describeError(err)
                 }), !1;
             } finally {
-                setPending(!1);
+                setLocalPending(!1), cluster?.onFireChange(!1);
             }
-        }, [ fireActionFor, instanceId, activity, action, label, pending, toast ]),
+        }, [ fireActionFor, instanceId, activity, action, label, pending, toast, cluster ]),
         pending: pending
     };
 }
@@ -1596,6 +1765,10 @@ function stopRowMouseDown(e) {
     e.preventDefault(), e.stopPropagation();
 }
 
+function stopRowClick(e) {
+    e.stopPropagation();
+}
+
 function spanTriggerProps(chrome) {
     return chrome?.inButtonCard === !0 ? {
         as: "span",
@@ -1631,7 +1804,6 @@ function FireButton({instanceId: instanceId, activity: activity, action: action,
         mode: chrome?.mode ?? mode,
         onClick: handleClick,
         padding: 2,
-        style: chrome?.style,
         text: label,
         tone: tone,
         ...spanTriggerProps(chrome),
@@ -1660,12 +1832,11 @@ function ActivityActionRow({actionEval: actionEval, instanceId: instanceId, acti
 }
 
 function DisabledActionButton({actionEval: actionEval, chrome: chrome}) {
-    const label = actionLabel(actionEval.action), button = /* @__PURE__ */ jsx(Button, {
+    const label = actionTriggerLabel(actionEval), button = /* @__PURE__ */ jsx(Button, {
         fontSize: 1,
         mode: chrome?.mode ?? "ghost",
         onClick: e => e.stopPropagation(),
         padding: 2,
-        style: chrome?.style,
         text: label,
         ...spanTriggerProps(chrome),
         disabled: !0
@@ -1678,7 +1849,7 @@ function DisabledActionButton({actionEval: actionEval, chrome: chrome}) {
 
 function PlainActionButton({actionEval: actionEval, instanceId: instanceId, activity: activity, chrome: chrome}) {
     const {action: action} = actionEval, label = actionLabel(action), btn = actionButtonTone({
-        action: action,
+        actionEval: actionEval,
         activityName: activity
     }), button = /* @__PURE__ */ jsx(FireButton, {
         action: action.name,
@@ -1756,8 +1927,8 @@ function ParamsActionDialog({actionEval: actionEval, instanceId: instanceId, act
 }
 
 function ParamsActionButton({actionEval: actionEval, instanceId: instanceId, activity: activity, chrome: chrome}) {
-    const {action: action} = actionEval, label = actionLabel(action), [open, setOpen] = useState(!1), btn = actionButtonTone({
-        action: action,
+    const [open, setOpen] = useState(!1), btn = actionButtonTone({
+        actionEval: actionEval,
         activityName: activity
     });
     /* @__PURE__ */
@@ -1770,11 +1941,8 @@ function ParamsActionButton({actionEval: actionEval, instanceId: instanceId, act
                 chrome?.inButtonCard === !0 && e.stopPropagation(), setOpen(!0);
             },
             padding: 2,
-            text: `${label}…`,
+            text: actionTriggerLabel(actionEval),
             tone: btn.tone,
-            ...chrome?.style ? {
-                style: chrome.style
-            } : {},
             ...spanTriggerProps(chrome)
         }), open ? /* @__PURE__ */ jsx(RowClickShield, {
             active: chrome?.inButtonCard === !0,
@@ -1788,178 +1956,6 @@ function ParamsActionButton({actionEval: actionEval, instanceId: instanceId, act
     });
 }
 
-function HintedMenuButton({hint: hint, wrapMenuButton: wrapMenuButton, ...menuButtonProps}) {
-    const [open, setOpen] = useState(!1), wrap = wrapMenuButton ?? (node => node);
-    return hint === void 0 ? wrap(/* @__PURE__ */ jsx(MenuButton, {
-        ...menuButtonProps
-    })) : /* @__PURE__ */ jsx(HoverHint, {
-        disabled: open,
-        text: hint,
-        children: wrap(
-        /* @__PURE__ */ jsx(MenuButton, {
-            ...menuButtonProps,
-            onClose: () => setOpen(!1),
-            onOpen: () => setOpen(!0)
-        }))
-    });
-}
-
-function OverflowMenuItem({actionEval: actionEval, instanceId: instanceId, activity: activity, onCollectParams: onCollectParams}) {
-    const rowKind = actionRowKind(actionEval), label = actionLabel(actionEval.action), {fire: fire, pending: pending} = useFireAction({
-        instanceId: instanceId,
-        activity: activity,
-        action: actionEval.action.name,
-        label: label
-    });
-    return rowKind.kind === "disabled" ? /* @__PURE__ */ jsx(MenuItem, {
-        disabled: !0,
-        text: label
-    }) : rowKind.kind === "plain" ? /* @__PURE__ */ jsx(MenuItem, {
-        disabled: pending,
-        onClick: () => {
-            fire();
-        },
-        text: label
-    }) : /* @__PURE__ */ jsx(MenuItem, {
-        onClick: onCollectParams,
-        text: `${label}…`
-    });
-}
-
-function rowShield(menuButton) {
-    /* @__PURE__ */
-    return jsx("span", {
-        onClick: e => e.stopPropagation(),
-        onMouseDown: stopRowMouseDown,
-        style: {
-            display: "contents"
-        },
-        children: menuButton
-    });
-}
-
-function ActionOverflowMenu({actions: actions, instanceId: instanceId, activity: activity, tone: tone, chrome: chrome}) {
-    const [paramsAction, setParamsAction] = useState(void 0), menuId = useId(), inButtonCard = chrome?.inButtonCard === !0;
-    /* @__PURE__ */
-    return jsxs(Fragment, {
-        children: [ 
-        /* @__PURE__ */ jsx(HintedMenuButton, {
-            button: /* @__PURE__ */ jsx(Button, {
-                "aria-label": "More options",
-                fontSize: 1,
-                icon: ChevronDownIcon,
-                padding: 2,
-                tone: tone,
-                ...chrome?.mode ? {
-                    mode: chrome.mode
-                } : {},
-                ...chrome?.style ? {
-                    style: chrome.style
-                } : {},
-                ...inButtonCard ? {
-                    as: "span"
-                } : {}
-            }),
-            hint: "More options",
-            id: `workflow-action-overflow-${menuId}`,
-            menu: /* @__PURE__ */ jsx(Menu, {
-                children: actions.map(a => /* @__PURE__ */ jsx(OverflowMenuItem, {
-                    actionEval: a,
-                    activity: activity,
-                    instanceId: instanceId,
-                    onCollectParams: () => setParamsAction(a)
-                }, a.action.name))
-            }),
-            popover: {
-                placement: "top-end",
-                portal: !0
-            },
-            ...inButtonCard ? {
-                wrapMenuButton: rowShield
-            } : {}
-        }), paramsAction ? /* @__PURE__ */ jsx(RowClickShield, {
-            active: inButtonCard,
-            children: /* @__PURE__ */ jsx(ParamsActionDialog, {
-                actionEval: paramsAction,
-                activity: activity,
-                instanceId: instanceId,
-                onClose: () => setParamsAction(void 0)
-            })
-        }) : null ]
-    });
-}
-
-const PRIMARY_SEGMENT = {
-    borderBottomRightRadius: 0,
-    borderTopRightRadius: 0
-}, MENU_SEGMENT = {
-    borderBottomLeftRadius: 0,
-    borderTopLeftRadius: 0
-};
-
-function TerminalActions({actions: actions, activity: activity, instanceId: instanceId, mode: mode = "default", inButtonCard: inButtonCard = !1}) {
-    const {button: button, color: color} = useTheme_v2(), [primary, ...overflow] = actions;
-    if (!primary) return null;
-    const ghost = mode === "ghost", embed = inButtonCard ? {
-        inButtonCard: !0
-    } : {};
-    if (overflow.length === 0) {
-        const chrome = {
-            ...ghost ? {
-                mode: "ghost"
-            } : {},
-            ...embed
-        };
-        /* @__PURE__ */
-        return jsx(ActivityActionRow, {
-            actionEval: primary,
-            activity: activity,
-            chrome: chrome,
-            instanceId: instanceId
-        });
-    }
-    const {tone: tone} = actionButtonTone({
-        action: primary.action,
-        activityName: activity
-    }), segment = ghost ? {
-        mode: "ghost"
-    } : {};
-    /* @__PURE__ */
-    return jsxs(Flex, {
-        children: [ 
-        /* @__PURE__ */ jsx(ActivityActionRow, {
-            actionEval: primary,
-            activity: activity,
-            chrome: {
-                ...segment,
-                style: PRIMARY_SEGMENT,
-                ...embed
-            },
-            instanceId: instanceId
-        }), ghost ? null : /* @__PURE__ */ jsx(Box, {
-            flex: "none",
-            style: {
-                background: color.bg,
-                width: 1
-            }
-        }), 
-        /* @__PURE__ */ jsx(ActionOverflowMenu, {
-            actions: overflow,
-            activity: activity,
-            chrome: {
-                ...segment,
-                style: ghost ? {
-                    ...MENU_SEGMENT,
-                    marginLeft: -button.border.width
-                } : MENU_SEGMENT,
-                ...embed
-            },
-            instanceId: instanceId,
-            tone: tone
-        }) ]
-    });
-}
-
 const DIM = {
     opacity: .6
 };
@@ -1997,8 +1993,12 @@ function stageTitle(definition, stageName) {
     return definition?.stages.find(stage => stage.name === stageName)?.title ?? stageName;
 }
 
+function findActivityNode(args) {
+    return args.definition?.stages.find(s => s.name === args.stageName)?.activities?.find(a => a.name === args.activityName);
+}
+
 function findActivity(args) {
-    const activity = args.definition?.stages.find(s => s.name === args.stageName)?.activities?.find(a => a.name === args.activityName);
+    const activity = findActivityNode(args);
     return {
         title: activity?.title ?? args.activityName,
         description: activity?.description
@@ -2132,14 +2132,15 @@ function FieldInput$1({kind: kind, value: value, onChange: onChange, onEnter: on
         });
 
       case "number":
+      case "progress":
         /* @__PURE__ */
         return jsx(TextInput, {
+            ...textInputFacet(kind),
+            ...scalarInputConstraints(kind, validation),
             fontSize: 1,
             onChange: e => onChange(e.currentTarget.value === "" ? null : Number(e.currentTarget.value)),
             onKeyDown: e => e.key === "Enter" && onEnter(),
             readOnly: readOnly,
-            ...scalarInputConstraints(kind, validation),
-            type: "number",
             value: textValueOf(value)
         });
 
@@ -2167,6 +2168,30 @@ function FieldInput$1({kind: kind, value: value, onChange: onChange, onEnter: on
     }
 }
 
+function LinkChip({hint: hint, children: children, as: as = "a", ...anchorProps}) {
+    /* @__PURE__ */
+    return jsx(HoverHint, {
+        text: hint,
+        children: /* @__PURE__ */ jsx(Card, {
+            __unstable_focusRing: !0,
+            as: as,
+            "data-as": "a",
+            padding: 2,
+            radius: 3,
+            style: {
+                alignItems: "center",
+                color: "inherit",
+                display: "flex",
+                minWidth: 0,
+                textDecoration: "none"
+            },
+            tone: "inherit",
+            ...anchorProps,
+            children: children
+        })
+    });
+}
+
 function docLinkState(input) {
     const {bareId: bareId, resource: resource} = input;
     if (bareId === void 0 || resource === void 0) return {
@@ -2276,7 +2301,6 @@ function DocRefFace({gdr: gdr}) {
     const {parsed: parsed2, local: local, schemaType: schemaType} = useLocalDocRef(gdr);
     return parsed2 && local && schemaType ? /* @__PURE__ */ jsx(StubPreview, {
         id: parsed2.documentId,
-        layout: "default",
         schemaType: schemaType
     }) : /* @__PURE__ */ jsxs(Flex, {
         align: "center",
@@ -2306,15 +2330,23 @@ function ForeignRefNotice({bareId: bareId, resource: resource}) {
 }
 
 function MissingDocNotice({bareId: bareId, layout: layout}) {
-    return layout === "inline" ? /* @__PURE__ */ jsx(Text, {
-        muted: !0,
-        size: 1,
+    return layout === "inline" ? 
+    /* @__PURE__ */ jsx(Box, {
+        padding: 2,
         children: /* @__PURE__ */ jsxs(Flex, {
             align: "center",
-            as: "span",
-            gap: 1,
+            gap: 2,
             children: [ 
-            /* @__PURE__ */ jsx(WarningOutlineIcon, {}), " Document unavailable" ]
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+            }), 
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: "Document unavailable"
+            }) ]
         })
     }) : /* @__PURE__ */ jsx(Card, {
         border: !0,
@@ -2347,44 +2379,73 @@ function UnopenableTypeNotice({actualType: actualType, bareId: bareId}) {
     });
 }
 
-function LinkedDocPreview({bareId: bareId, layout: layout, schemaType: schemaType}) {
-    return layout === "inline" ? /* @__PURE__ */ jsx(IntentLink, {
-        intent: "edit",
-        onClick: e => e.stopPropagation(),
-        params: {
-            id: bareId
-        },
-        style: {
-            color: "inherit",
-            textDecoration: "none",
-            display: "flex",
-            alignItems: "center"
-        },
-        children: /* @__PURE__ */ jsx(StubPreview, {
-            id: bareId,
-            layout: "inline",
+function renderTypeIcon(icon) {
+    return typeof icon == "function" ? createElement(icon) : isValidElement(icon) ? icon : /* @__PURE__ */ jsx(DocumentIcon, {});
+}
+
+function InlineChipFace({bareId: bareId, schemaType: schemaType}) {
+    const {preview: preview} = useStubValuePreview(bareId, schemaType);
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            children: renderTypeIcon(schemaType.icon)
+        }), preview.isLoading ? /* @__PURE__ */ jsx(TextSkeleton, {
+            animated: !0,
+            radius: 1,
+            size: 1,
+            style: {
+                width: 96
+            }
+        }) : /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            textOverflow: "ellipsis",
+            weight: "medium",
+            children: preview.value?.title ?? /* @__PURE__ */ jsx("em", {
+                children: "Untitled"
+            })
+        }) ]
+    });
+}
+
+function LinkedDocPreview({bareId: bareId, layout: layout, schemaType: schemaType}) {
+    const EditIntentLink = useMemo(() => function(linkProps) {
+        /* @__PURE__ */
+        return jsx(IntentLink, {
+            ...linkProps,
+            intent: "edit",
+            params: {
+                id: bareId
+            }
+        });
+    }, [ bareId ]);
+    return layout === "inline" ? /* @__PURE__ */ jsx(LinkChip, {
+        as: EditIntentLink,
+        hint: "Open document",
+        onClick: e => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx(InlineChipFace, {
+            bareId: bareId,
             schemaType: schemaType
         })
-    }) : /* @__PURE__ */ jsx(IntentLink, {
-        intent: "edit",
+    }) : /* @__PURE__ */ jsx(Card, {
+        __unstable_focusRing: !0,
+        as: EditIntentLink,
+        border: !0,
+        "data-as": "a",
         onClick: e => e.stopPropagation(),
-        params: {
-            id: bareId
-        },
+        padding: 1,
+        radius: 3,
         style: {
             color: "inherit",
             textDecoration: "none",
             display: "block"
         },
-        children: /* @__PURE__ */ jsx(Card, {
-            border: !0,
-            padding: 1,
-            radius: 3,
-            children: /* @__PURE__ */ jsx(StubPreview, {
-                id: bareId,
-                layout: "default",
-                schemaType: schemaType
-            })
+        children: /* @__PURE__ */ jsx(StubPreview, {
+            id: bareId,
+            schemaType: schemaType
         })
     });
 }
@@ -2528,6 +2589,10 @@ const fieldValueRenderer = {
         }, ref.id))
     }) : /* @__PURE__ */ jsx(Empty, {}),
     number: renderTextValue,
+    progress: field => /* @__PURE__ */ jsx(ProgressBar, {
+        label: field.title ?? field.name,
+        value: field.value
+    }),
     object: field => field.value === null ? /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsx(Code, {
         size: 1,
         style: {
@@ -2779,7 +2844,7 @@ function useFieldDraft(args) {
 }
 
 function EditableFieldControl({instanceId: instanceId, field: field}) {
-    const {editFieldFor: editFieldFor, previewFieldFor: previewFieldFor, discardFieldPreviewFor: discardFieldPreviewFor, byInstance: byInstance} = useWorkflowContext(), me = useCurrentUser(), held = byInstance.get(instanceId), entry = held ? resolveFieldEntry(held.instance, field) : void 0, evaluation = held?.evaluation, target = editTargetOf(field), consequence = fieldConsequence(evaluation, field.name), advanceTo = advanceTargetTitle(evaluation, field.name);
+    const {editFieldFor: editFieldFor, previewFieldFor: previewFieldFor, discardFieldPreviewFor: discardFieldPreviewFor} = useWorkflowContext(), me = useCurrentUser(), held = useHeldWorkflowEntry(instanceId), entry = held ? resolveFieldEntry(held.instance, field) : void 0, evaluation = held?.evaluation, target = editTargetOf(field), consequence = fieldConsequence(evaluation, field.name), advanceTo = advanceTargetTitle(evaluation, field.name);
     /* @__PURE__ */
     return jsx(EditableField, {
         field: field,
@@ -3321,6 +3386,27 @@ function ActivityStatusIcon({status: status}) {
     });
 }
 
+function LoadingRow({label: label, padding: padding}) {
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        ...padding === void 0 ? {} : {
+            padding: padding
+        },
+        children: [ 
+        /* @__PURE__ */ jsx(Spinner, {
+            muted: !0,
+            size: 1
+        }), 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: label
+        }) ]
+    });
+}
+
 function useSpaceToken(index) {
     const value = useTheme_v2().space[index];
     if (value === void 0) throw new Error(`theme is missing space token ${index}`);
@@ -3351,6 +3437,27 @@ function useBadgeCapTrim() {
     };
 }
 
+function AvatarDisplay({avatar: avatar, "aria-label": ariaLabel}) {
+    const trim = useAvatarCapTrim();
+    /* @__PURE__ */
+    return jsx(Box, {
+        "aria-label": ariaLabel,
+        as: "span",
+        padding: 2,
+        style: {
+            display: "inline-flex"
+        },
+        children: /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            justify: "center",
+            style: {
+                margin: trim
+            },
+            children: avatar
+        })
+    });
+}
+
 function AvatarButton({avatar: avatar, onClick: onClick, onMouseDown: onMouseDown, as: as, "aria-label": ariaLabel, ref: ref}) {
     const trim = useAvatarCapTrim();
     /* @__PURE__ */
@@ -3393,10 +3500,13 @@ function UserAvatar({id: id}) {
     });
 }
 
-function UserAvatarGroup({ids: ids}) {
+function UserAvatarGroup({ids: ids, hint: hint}) {
     const displays = useUserDisplays(ids);
     return displays.length === 0 ? null : /* @__PURE__ */ jsx(HoverHint, {
         text: displays.map(d => d.name).join(", "),
+        ...hint === void 0 ? {} : {
+            description: hint
+        },
         children: /* @__PURE__ */ jsx(MemberAvatarGroup, {
             members: displays.map(display => ({
                 id: display.id,
@@ -3407,9 +3517,26 @@ function UserAvatarGroup({ids: ids}) {
     });
 }
 
-function AssignActivityControl({instanceId: instanceId, field: field, assigneeIds: assigneeIds = []}) {
-    const {editFieldFor: editFieldFor} = useWorkflowContext(), toast = useClosableToast(), [open, setOpen] = useState(!1), [busy, setBusy] = useState(!1), members = field.value ?? [], selectedIds = new Set(members.flatMap(m => m.type === "user" ? [ m.id ] : [])), toggle = async memberId => {
-        if (!busy) {
+function AssignActivityControl({instanceId: instanceId, state: state, assigneeIds: assigneeIds = []}) {
+    const {editFieldFor: editFieldFor} = useWorkflowContext(), toast = useClosableToast(), [open, setOpen] = useState(!1), [busy, setBusy] = useState(!1);
+    if (state.kind === "none") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsx(AvatarDisplay, {
+        "aria-label": "Assignees",
+        avatar: /* @__PURE__ */ jsx(UserAvatarGroup, {
+            ids: assigneeIds
+        })
+    });
+    if (state.kind === "closed") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsx(AvatarButton, {
+        "aria-label": "Assignees",
+        as: "span",
+        avatar: /* @__PURE__ */ jsx(UserAvatarGroup, {
+            hint: state.reason,
+            ids: assigneeIds
+        }),
+        onClick: stopRowClick,
+        onMouseDown: stopRowMouseDown
+    });
+    const field = state.kind === "editable" ? state.field : void 0, members = field?.value ?? [], selectedIds = new Set(members.flatMap(m => m.type === "user" ? [ m.id ] : [])), toggle = async memberId => {
+        if (!(busy || field === void 0)) {
             setBusy(!0);
             try {
                 selectedIds.has(memberId) ? await editFieldFor(instanceId, {
@@ -3462,8 +3589,11 @@ function AssignActivityControl({instanceId: instanceId, field: field, assigneeId
     /* @__PURE__ */
     return jsx(DismissablePopover, {
         content: /* @__PURE__ */ jsx(Box, {
-            onClick: e => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx(MemberPicker, {
+            onClick: stopRowClick,
+            children: state.kind === "loading" ? /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Loading…",
+                padding: 3
+            }) : /* @__PURE__ */ jsx(MemberPicker, {
                 onSelect: member => member && void toggle(member.id),
                 selectedIds: selectedIds
             })
@@ -3751,9 +3881,9 @@ function BreadcrumbTail({segments: segments, style: style}) {
 }
 
 function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
-    const frame = /* @__PURE__ */ jsxs(Flex, {
+    const frame = 
+    /* @__PURE__ */ jsxs(Flex, {
         align: "center",
-        gap: 1,
         children: [ 
         /* @__PURE__ */ jsx(Flex, {
             align: "center",
@@ -3767,6 +3897,7 @@ function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
             align: "center",
             flex: 1,
             gap: 2,
+            paddingLeft: 2,
             style: {
                 minWidth: 0
             },
@@ -3774,6 +3905,7 @@ function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
         }), end === void 0 ? null : /* @__PURE__ */ jsx(Flex, {
             align: "center",
             gap: 2,
+            paddingLeft: 2,
             style: {
                 flexShrink: 0
             },
@@ -3782,14 +3914,14 @@ function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
     });
     return onOpen === void 0 ? /* @__PURE__ */ jsx(Card, {
         padding: 1,
-        radius: 2,
+        radius: 3,
         children: frame
     }) : 
     /* @__PURE__ */ jsx(Card, {
         as: "button",
         onClick: onOpen,
         padding: 1,
-        radius: 2,
+        radius: 3,
         style: {
             textAlign: "left"
         },
@@ -3976,6 +4108,202 @@ function AutomationActionRow({actionEval: actionEval, definition: definition}) {
     });
 }
 
+function inlineActionCount(args) {
+    const {available: available, actionWidths: actionWidths, menuWidth: menuWidth, gap: gap} = args, max = Math.min(3, actionWidths.length);
+    for (let count = max; count > 0; count--) {
+        const buttons = actionWidths.slice(0, count).reduce((sum, w) => sum + w, 0) + gap * (count - 1), menu = count === actionWidths.length ? 0 : menuWidth + gap;
+        if (buttons + menu <= available) return count;
+    }
+    return 0;
+}
+
+const ACTIONS_MENU_TRIGGER = {
+    fontSize: 1,
+    gap: 1,
+    iconRight: ChevronDownIcon,
+    padding: 2
+};
+
+function ActionMenuItem({actionEval: actionEval, instanceId: instanceId, activity: activity, onCollectParams: onCollectParams}) {
+    const rowKind = actionRowKind(actionEval), label = actionTriggerLabel(actionEval), {fire: fire, pending: pending} = useFireAction({
+        instanceId: instanceId,
+        activity: activity,
+        action: actionEval.action.name,
+        label: label
+    });
+    return rowKind.kind === "disabled" ? /* @__PURE__ */ jsx(MenuItem, {
+        disabled: !0,
+        text: label
+    }) : rowKind.kind === "plain" ? /* @__PURE__ */ jsx(MenuItem, {
+        disabled: pending,
+        onClick: () => {
+            fire();
+        },
+        text: label
+    }) : /* @__PURE__ */ jsx(MenuItem, {
+        disabled: pending,
+        onClick: onCollectParams,
+        text: label
+    });
+}
+
+function rowShield(menuButton) {
+    /* @__PURE__ */
+    return jsx("span", {
+        onClick: e => e.stopPropagation(),
+        onMouseDown: stopRowMouseDown,
+        style: {
+            display: "contents"
+        },
+        children: menuButton
+    });
+}
+
+function ActionsMenuButton({actions: actions, instanceId: instanceId, activity: activity, label: label, mode: mode = "ghost", inButtonCard: inButtonCard = !1}) {
+    const [paramsAction, setParamsAction] = useState(void 0), clusterPending = useActionClusterPending(), menuId = useId(), menuButton = /* @__PURE__ */ jsx(MenuButton, {
+        button: /* @__PURE__ */ jsx(Button, {
+            ...ACTIONS_MENU_TRIGGER,
+            mode: mode,
+            text: label,
+            ...inButtonCard ? {
+                as: "span"
+            } : {},
+            ...clusterPending ? {
+                disabled: !0
+            } : {}
+        }),
+        id: `workflow-actions-menu-${menuId}`,
+        menu: /* @__PURE__ */ jsx(Menu, {
+            children: actions.map(a => /* @__PURE__ */ jsx(ActionMenuItem, {
+                actionEval: a,
+                activity: activity,
+                instanceId: instanceId,
+                onCollectParams: () => setParamsAction(a)
+            }, a.action.name))
+        }),
+        popover: {
+            placement: "top-end",
+            portal: !0
+        }
+    });
+    /* @__PURE__ */
+    return jsxs(Fragment, {
+        children: [ inButtonCard ? rowShield(menuButton) : menuButton, paramsAction ? /* @__PURE__ */ jsx(RowClickShield, {
+            active: inButtonCard,
+            children: /* @__PURE__ */ jsx(ParamsActionDialog, {
+                actionEval: paramsAction,
+                activity: activity,
+                instanceId: instanceId,
+                onClose: () => setParamsAction(void 0)
+            })
+        }) : null ]
+    });
+}
+
+const FOOTER_GAP_PX = 8, MORE_ACTIONS_LABEL = "More actions";
+
+function TerminalFooter({actions: actions, activity: activity, instanceId: instanceId}) {
+    const lock = useActionClusterState(), [only, ...rest] = actions;
+    return only ? /* @__PURE__ */ jsx(ActionClusterProvider, {
+        value: lock,
+        children: rest.length === 0 ? /* @__PURE__ */ jsx(FooterRow, {
+            children: /* @__PURE__ */ jsx(ActivityActionRow, {
+                actionEval: only,
+                activity: activity,
+                instanceId: instanceId
+            })
+        }) : /* @__PURE__ */ jsx(FittedActions, {
+            actions: actions,
+            activity: activity,
+            instanceId: instanceId
+        })
+    }) : null;
+}
+
+function FooterRow({children: children, onElement: onElement}) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        padding: 3,
+        children: /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            justify: "flex-end",
+            ...onElement ? {
+                ref: onElement
+            } : {},
+            style: {
+                gap: FOOTER_GAP_PX
+            },
+            children: children
+        })
+    });
+}
+
+function FittedActions({actions: actions, activity: activity, instanceId: instanceId}) {
+    const [footerEl, setFooterEl] = useState(null), [measureEl, setMeasureEl] = useState(null), footerSize = useElementSize(footerEl), measureSize = useElementSize(measureEl), [inline, setInline] = useState(void 0);
+    useLayoutEffect(() => {
+        if (measureEl === null || footerSize === null || measureSize === null) return;
+        const widths = Array.from(measureEl.children, clone => clone.getBoundingClientRect().width);
+        setInline(inlineActionCount({
+            available: footerSize.border.width,
+            actionWidths: widths.slice(0, -1),
+            menuWidth: widths.at(-1) ?? 0,
+            gap: FOOTER_GAP_PX
+        }));
+    }, [ actions, footerSize, measureEl, measureSize ]);
+    const overflow = inline === void 0 ? [] : actions.slice(inline);
+    /* @__PURE__ */
+    return jsxs(Fragment, {
+        children: [ 
+        /* @__PURE__ */ jsx(MeasureRow, {
+            actions: actions,
+            onElement: setMeasureEl
+        }), 
+        /* @__PURE__ */ jsxs(FooterRow, {
+            onElement: setFooterEl,
+            children: [ inline === void 0 ? null : actions.slice(0, inline).map(a => /* @__PURE__ */ jsx(ActivityActionRow, {
+                actionEval: a,
+                activity: activity,
+                instanceId: instanceId
+            }, a.action.name)), overflow.length > 0 ? /* @__PURE__ */ jsx(ActionsMenuButton, {
+                actions: overflow,
+                activity: activity,
+                instanceId: instanceId,
+                label: MORE_ACTIONS_LABEL,
+                mode: "default"
+            }) : null ]
+        }) ]
+    });
+}
+
+function MeasureRow({actions: actions, onElement: onElement}) {
+    /* @__PURE__ */
+    return jsx("div", {
+        "aria-hidden": !0,
+        style: {
+            height: 0,
+            overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs("div", {
+            ref: onElement,
+            style: {
+                display: "inline-flex",
+                whiteSpace: "nowrap"
+            },
+            children: [ actions.map(a => /* @__PURE__ */ jsx(Button, {
+                as: "span",
+                fontSize: 1,
+                padding: 2,
+                text: actionTriggerLabel(a)
+            }, a.action.name)), 
+            /* @__PURE__ */ jsx(Button, {
+                ...ACTIONS_MENU_TRIGGER,
+                as: "span",
+                text: MORE_ACTIONS_LABEL
+            }) ]
+        })
+    });
+}
+
 function ActivityDetailDialog({entry: entry, activityName: activityName, breadcrumb: breadcrumb, definition: definition, document: document, onClose: onClose}) {
     const detail = deriveActivityDetail({
         entry: entry,
@@ -3985,12 +4313,11 @@ function ActivityDetailDialog({entry: entry, activityName: activityName, breadcr
     const instanceId = entry.instance._id, notice = blockedNotice(detail), hasBody = detail.state.length > 0 || notice !== void 0;
     /* @__PURE__ */
     return jsxs(Dialog, {
-        footer: /* @__PURE__ */ jsx(TerminalFooter, {
-            activityName: activityName,
-            detail: detail,
-            instanceId: instanceId,
-            onClose: onClose
-        }),
+        footer: detail.presentation.terminalActions.length > 0 ? /* @__PURE__ */ jsx(TerminalFooter, {
+            actions: detail.presentation.terminalActions,
+            activity: activityName,
+            instanceId: instanceId
+        }) : void 0,
         header: /* @__PURE__ */ jsx(Breadcrumb, {
             emphasizeCurrent: !0,
             segments: [ ...breadcrumb, detail.title ]
@@ -4159,8 +4486,11 @@ function FieldRow({field: field, detail: detail, entry: entry, activityName: act
                 /* @__PURE__ */ jsx(FieldValue, {
                     field: field
                 }), assignField ? /* @__PURE__ */ jsx(AssignActivityControl, {
-                    field: assignField,
-                    instanceId: instanceId
+                    instanceId: instanceId,
+                    state: {
+                        kind: "editable",
+                        field: assignField
+                    }
                 }) : null ]
             }) ]
         });
@@ -4193,31 +4523,6 @@ function blockedNotice(detail) {
     });
 }
 
-function TerminalFooter({detail: detail, instanceId: instanceId, activityName: activityName, onClose: onClose}) {
-    /* @__PURE__ */
-    return jsx(Box, {
-        padding: 3,
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 2,
-            justify: "flex-end",
-            children: [ 
-            /* @__PURE__ */ jsx(Button, {
-                fontSize: 1,
-                mode: "bleed",
-                onClick: onClose,
-                padding: 2,
-                text: "Cancel"
-            }), 
-            /* @__PURE__ */ jsx(TerminalActions, {
-                actions: detail.presentation.terminalActions,
-                activity: activityName,
-                instanceId: instanceId
-            }) ]
-        })
-    });
-}
-
 function EmptyState({action: action, description: description, icon: icon, title: title}) {
     /* @__PURE__ */
     return jsx(Card, {
@@ -4295,13 +4600,69 @@ function GroupHeading({count: count, title: title, end: end}) {
     });
 }
 
+function CopyDetailsButton({unreadable: unreadable}) {
+    const toast = useClosableToast();
+    /* @__PURE__ */
+    return jsx(Button, {
+        fontSize: 1,
+        mode: "ghost",
+        onClick: () => {
+            navigator.clipboard.writeText(unreadableDocsReport(unreadable)).then(() => toast.push({
+                status: "success",
+                title: "Details copied"
+            }), () => toast.push({
+                status: "error",
+                title: "Could not copy the details"
+            }));
+        },
+        padding: 2,
+        text: "Copy details"
+    });
+}
+
+function UnreadableDocsNote({unreadable: unreadable}) {
+    if (unreadable.length === 0) return null;
+    const label = unreadable.length === 1 ? "1 workflow document isn’t listed — this Studio can’t read it. Share the details with your Studio maintainers." : `${unreadable.length} workflow documents aren’t listed — this Studio can’t read them. Share the details with your Studio maintainers.`;
+    /* @__PURE__ */
+    return jsxs(Card, {
+        padding: 2,
+        paddingLeft: 3,
+        radius: 3,
+        style: {
+            alignItems: "center",
+            display: "flex"
+        },
+        tone: "caution",
+        children: [ 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            flex: 1,
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+            }), 
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: label
+            }) ]
+        }), 
+        /* @__PURE__ */ jsx(CopyDetailsButton, {
+            unreadable: unreadable
+        }) ]
+    });
+}
+
 const HEADLINES = {
     "model-ahead": "Workflow needs a newer engine",
     "shape-violation": "Unreadable workflow document"
 };
 
 function remediation(invalid) {
-    return invalid.reason === "model-ahead" ? `"${invalid.documentId}" was written by a newer engine data model. Upgrade @sanity/workflow-engine (and this plugin) to work with it.` : `"${invalid.documentId}" has a corrupt stored shape and cannot be read. Inspect the document, or reset the workflow dataset.`;
+    return invalid.reason === "model-ahead" ? `"${invalid.documentId}" was created by a newer version of the workflow engine than this Studio can read. It needs a plugin update that supports the newer data model — share the details with your Studio maintainers.` : `This version of the Studio can't read "${invalid.documentId}" — it was likely created by a newer or different version of the workflow tooling. Share the details with your Studio maintainers.`;
 }
 
 function InvalidDocNotice({invalid: invalid}) {
@@ -4312,20 +4673,22 @@ function InvalidDocNotice({invalid: invalid}) {
         radius: 2,
         tone: "caution",
         children: /* @__PURE__ */ jsxs(Stack, {
-            space: 2,
+            space: 3,
             children: [ 
-            /* @__PURE__ */ jsx(HoverHint, {
-                text: invalid.message,
-                children: /* @__PURE__ */ jsx(Text, {
-                    size: 1,
-                    weight: "medium",
-                    children: HEADLINES[invalid.reason]
-                })
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "medium",
+                children: HEADLINES[invalid.reason]
             }), 
             /* @__PURE__ */ jsx(Text, {
                 muted: !0,
                 size: 1,
                 children: remediation(invalid)
+            }), 
+            /* @__PURE__ */ jsx(Flex, {
+                children: /* @__PURE__ */ jsx(CopyDetailsButton, {
+                    unreadable: [ invalid ]
+                })
             }) ]
         })
     });
@@ -4365,6 +4728,30 @@ function openActivityGone(args) {
     return evaluation !== void 0 && !evaluation.currentStage.activities.some(a => a.activity.name === target.activityName);
 }
 
+function HintedMenuButton({hint: hint, ...menuButtonProps}) {
+    const [open, setOpen] = useState(!1), popover = {
+        tone: "default",
+        ...menuButtonProps.popover?.placement === void 0 ? {
+            placement: "bottom-end",
+            fallbackPlacements: [ "top-end" ]
+        } : {},
+        ...menuButtonProps.popover
+    };
+    return hint === void 0 ? /* @__PURE__ */ jsx(MenuButton, {
+        ...menuButtonProps,
+        popover: popover
+    }) : /* @__PURE__ */ jsx(HoverHint, {
+        disabled: open,
+        text: hint,
+        children: /* @__PURE__ */ jsx(MenuButton, {
+            ...menuButtonProps,
+            onClose: () => setOpen(!1),
+            onOpen: () => setOpen(!0),
+            popover: popover
+        })
+    });
+}
+
 function subjectGdr(ctx) {
     return !ctx.subjectDocId || !ctx.mapping ? null : subjectGdrRef({
         mapping: ctx.mapping,
@@ -4412,6 +4799,10 @@ function missingInitFields(initFields, values) {
     return initFields.filter(entry => gatesStart(entry) && !isFieldFilled(entry, values[entry.name] ?? null));
 }
 
+function numericFilled(value) {
+    return value !== null && value !== "" && Number.isFinite(Number(value));
+}
+
 const filledByKind = {
     actor: value => value !== null,
     array: value => Array.isArray(value) && value.length > 0,
@@ -4419,7 +4810,8 @@ const filledByKind = {
     boolean: () => !0,
     "doc.ref": value => value !== null,
     "doc.refs": value => Array.isArray(value) && value.length > 0,
-    number: value => value !== null && value !== "" && Number.isFinite(Number(value)),
+    number: numericFilled,
+    progress: numericFilled,
     "release.ref": value => value !== null,
     subject: value => value !== null
 };
@@ -4437,7 +4829,14 @@ const asInitial = candidate => candidate, scalarInitialValue = (entry, value) =>
     type: entry.type,
     name: entry.name,
     value: value
-}), initialValueByKind = {
+}), numericInitialValue = (entry, value) => {
+    const n = Number(value);
+    return Number.isFinite(n) ? asInitial({
+        type: entry.type,
+        name: entry.name,
+        value: n
+    }) : null;
+}, initialValueByKind = {
     actor: (entry, value) => asInitial({
         type: entry.type,
         name: entry.name,
@@ -4462,14 +4861,8 @@ const asInitial = candidate => candidate, scalarInitialValue = (entry, value) =>
         value: value
     }),
     subject: singleRefInitialValue,
-    number: (entry, value) => {
-        const n = Number(value);
-        return Number.isFinite(n) ? asInitial({
-            type: entry.type,
-            name: entry.name,
-            value: n
-        }) : null;
-    },
+    number: numericInitialValue,
+    progress: numericInitialValue,
     "release.ref": (entry, value) => asInitial({
         type: entry.type,
         name: entry.name,
@@ -4942,10 +5335,62 @@ function StartWorkflowMenuItem({mapping: mapping, docId: docId, initialValue: in
         },
         text: `Start ${mapping.label}`
     });
-    return tooltip ? /* @__PURE__ */ jsx(HoverHint, {
-        text: tooltip,
-        children: item
-    }) : item;
+    return tooltip ? /* @__PURE__ */ jsx(HoverHint, {
+        text: tooltip,
+        children: item
+    }) : item;
+}
+
+function settledDim(settled) {
+    return settled ? {
+        opacity: .66
+    } : void 0;
+}
+
+function ActivityStatusLead({status: status}) {
+    /* @__PURE__ */
+    return jsx(HoverHint, {
+        text: ACTIVITY_STATUS_LABEL[status],
+        children: /* @__PURE__ */ jsx(ActivityStatusIcon, {
+            status: status
+        })
+    });
+}
+
+function ActivityRowTitle({dimmed: dimmed, children: children}) {
+    /* @__PURE__ */
+    return jsx(Text, {
+        size: 1,
+        style: {
+            ...dimmed,
+            minWidth: 0
+        },
+        textOverflow: "ellipsis",
+        weight: "medium",
+        children: children
+    });
+}
+
+function RowTerminalActions({actions: actions, activity: activity, instanceId: instanceId}) {
+    const lock = useActionClusterState(), [only, ...rest] = actions;
+    return only ? /* @__PURE__ */ jsx(ActionClusterProvider, {
+        value: lock,
+        children: rest.length === 0 ? /* @__PURE__ */ jsx(ActivityActionRow, {
+            actionEval: only,
+            activity: activity,
+            chrome: {
+                mode: "ghost",
+                inButtonCard: !0
+            },
+            instanceId: instanceId
+        }) : /* @__PURE__ */ jsx(ActionsMenuButton, {
+            actions: actions,
+            activity: activity,
+            inButtonCard: !0,
+            instanceId: instanceId,
+            label: "Select action"
+        })
+    }) : null;
 }
 
 function TitleTag({hint: hint, tone: tone, children: children}) {
@@ -4964,54 +5409,34 @@ function TitleTag({hint: hint, tone: tone, children: children}) {
     });
 }
 
-function ActivityRow({activityEval: activityEval, breadcrumb: breadcrumb, assigneeIds: assigneeIds, assignField: assignField, instanceId: instanceId, onOpen: onOpen, terminalActions: terminalActions = []}) {
-    const {activity: activity, status: status} = activityEval, settled = isTerminalActivityStatus(status), dimmed = settled ? {
-        opacity: .66
-    } : void 0;
-    let assignmentControl = null;
-    return assignField ? assignmentControl = /* @__PURE__ */ jsx(AssignActivityControl, {
-        assigneeIds: assigneeIds,
-        field: assignField,
-        instanceId: instanceId
-    }) : assigneeIds.length > 0 && (assignmentControl = /* @__PURE__ */ jsx(AvatarButton, {
-        "aria-label": "Assignees",
-        as: "span",
-        avatar: /* @__PURE__ */ jsx(UserAvatarGroup, {
-            ids: assigneeIds
-        })
-    })), 
-    /* @__PURE__ */ jsxs(WorkRow, {
+function ActivityRow({face: face, breadcrumb: breadcrumb, assigneeIds: assigneeIds, assignState: assignState, dateControl: dateControl, instanceId: instanceId, onOpen: onOpen, terminalActions: terminalActions = []}) {
+    const settled = isTerminalActivityStatus(face.status), dimmed = settledDim(settled);
+    /* @__PURE__ */
+    return jsxs(WorkRow, {
         end: /* @__PURE__ */ jsxs(Fragment, {
-            children: [ settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsx(TerminalActions, {
+            children: [ settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsx(RowTerminalActions, {
                 actions: terminalActions,
-                activity: activity.name,
-                inButtonCard: !0,
+                activity: face.activityName,
+                instanceId: instanceId
+            }), dateControl, 
+            /* @__PURE__ */ jsx(AssignActivityControl, {
+                assigneeIds: assigneeIds,
                 instanceId: instanceId,
-                mode: "ghost"
-            }), assignmentControl ]
+                state: assignState
+            }) ]
         }),
-        lead: 
-        /* @__PURE__ */ jsx(HoverHint, {
-            text: ACTIVITY_STATUS_LABEL[status],
-            children: /* @__PURE__ */ jsx(ActivityStatusIcon, {
-                status: status
-            })
+        lead: /* @__PURE__ */ jsx(ActivityStatusLead, {
+            status: face.status
         }),
         onOpen: onOpen,
         children: [ 
-        /* @__PURE__ */ jsx(Text, {
-            size: 1,
-            style: {
-                ...dimmed,
-                minWidth: 0
-            },
-            textOverflow: "ellipsis",
-            weight: "medium",
-            children: activityLabel(activity)
-        }), showsAutomatedPill(activityEval) ? /* @__PURE__ */ jsx(TitleTag, {
+        /* @__PURE__ */ jsx(ActivityRowTitle, {
+            dimmed: dimmed,
+            children: face.title
+        }), face.automated ? /* @__PURE__ */ jsx(TitleTag, {
             hint: "Completes on its own — no user action is needed",
             children: "Automated"
-        }) : null, showsBlockedTag(activityEval) ? /* @__PURE__ */ jsx(TitleTag, {
+        }) : null, face.blocked ? /* @__PURE__ */ jsx(TitleTag, {
             hint: "Nothing can be done on this activity right now — open it to see why",
             tone: "caution",
             children: "Blocked"
@@ -5052,7 +5477,6 @@ function ForMeList({entry: entry, work: work, identity: identity, onOpenActivity
                     activityState: activityState,
                     editableFields: entry.evaluation?.editableFields
                 }),
-                activityEval: activityEval,
                 breadcrumb: breadcrumb,
                 instanceId: instance._id,
                 onOpen: () => onOpenActivity(activityEval.activity.name)
@@ -5096,33 +5520,12 @@ function ActivitiesList({entry: entry, onOpenActivity: onOpenActivity}) {
                 activityState: activityState,
                 editableFields: entry.evaluation?.editableFields
             }),
-            activityEval: t,
             instanceId: entry.instance._id,
             onOpen: () => onOpenActivity(t.activity.name)
         }, t.activity.name))
     });
 }
 
-function LoadingRow({label: label, padding: padding}) {
-    /* @__PURE__ */
-    return jsxs(Flex, {
-        align: "center",
-        gap: 2,
-        ...padding === void 0 ? {} : {
-            padding: padding
-        },
-        children: [ 
-        /* @__PURE__ */ jsx(Spinner, {
-            muted: !0
-        }), 
-        /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: label
-        }) ]
-    });
-}
-
 function instanceNotice(entry) {
     const {instance: instance, committed: committed, evaluation: evaluation} = entry, state = terminalState(instance);
     if (state !== "in-flight") 
@@ -5162,6 +5565,7 @@ const EDITOR_BY_KIND = {
     date: "scalar",
     datetime: "scalar",
     number: "scalar",
+    progress: "scalar",
     string: "scalar",
     text: "scalar",
     url: "scalar"
@@ -5224,9 +5628,16 @@ function faceOf(args) {
     } : isSingleDocRefEntry(entry) && entry.value !== null ? {
         kind: "docRef",
         gdr: entry.value
+    } : entry._type === "progress" && entry.value !== null ? {
+        kind: "progress",
+        value: entry.value
     } : todoShaped && entry._type === "array" ? textFace(todoTextOf(entry)) : textFace(textOf(entry));
 }
 
+function progressFillPercent(face) {
+    if (face.kind === "progress") return clampProgress(face.value);
+}
+
 function deriveFieldPills(args) {
     const {scope: scope, definition: definition, instance: instance, committed: committed, evaluation: evaluation} = args, declared = scope === "workflow" ? definition?.fields ?? [] : definition?.stages.find(s => s.name === instance.currentStage)?.fields ?? [], entries = scope === "workflow" ? instance.fields : findOpenStageEntry(instance)?.fields ?? [], entriesByName = new Map(entries.map(entry => [ entry.name, entry ])), editables = isEvaluationCurrent({
         committed: committed,
@@ -5367,6 +5778,15 @@ function SetFace({face: face}) {
         })
     }) : face.kind === "assignees" ? /* @__PURE__ */ jsx(AssigneesFace, {
         assignees: face.assignees
+    }) : face.kind === "progress" ? 
+    /* @__PURE__ */ jsx(Text, {
+        size: 1,
+        style: {
+            fontVariantNumeric: "tabular-nums",
+            minWidth: "4ch",
+            textAlign: "right"
+        },
+        children: progressCaption(face.value)
     }) : /* @__PURE__ */ jsx(FaceText, {
         children: face.kind === "text" ? face.text : ""
     });
@@ -5420,15 +5840,21 @@ function AssigneesFace({assignees: assignees}) {
     });
 }
 
-function usePillChrome() {
-    const {color: color} = useTheme_v2();
+function usePillChrome(face) {
+    const {color: color} = useTheme_v2(), fillPercent = face === void 0 ? void 0 : progressFillPercent(face), fill = `color-mix(in srgb, ${color.focusRing} 24%, transparent)`, progressFill = fillPercent === void 0 ? {} : {
+        backgroundImage: `linear-gradient(${fill}, ${fill})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `${fillPercent}% 100%`,
+        transition: "background-size 300ms ease"
+    };
     return {
         mode: "bleed",
         padding: 2,
         radius: 6,
         style: {
             boxShadow: `inset 0 0 0 1px ${color.button.ghost.default.enabled.border}`,
-            maxWidth: "100%"
+            maxWidth: "100%",
+            ...progressFill
         }
     };
 }
@@ -5459,7 +5885,7 @@ function PillFaceContent({children: children}) {
 }
 
 function PillButton({children: children, pill: pill, hintDisabled: hintDisabled = !1, onClick: onClick}) {
-    const chrome = usePillChrome();
+    const chrome = usePillChrome(pill.face);
     /* @__PURE__ */
     return jsx(PillHint, {
         disabled: hintDisabled,
@@ -5492,7 +5918,23 @@ function useFieldCommit({entry: entry, editability: editability}) {
 function PillPopover({pill: pill, content: content, open: open, onToggle: onToggle, onDismiss: onDismiss}) {
     /* @__PURE__ */
     return jsx(DismissablePopover, {
-        content: content,
+        content: /* @__PURE__ */ jsxs(Stack, {
+            gap: 1,
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                padding: 3,
+                paddingBottom: 0,
+                style: {
+                    maxWidth: 360
+                },
+                children: /* @__PURE__ */ jsx(FieldHead, {
+                    label: pill.title,
+                    ...pill.description === void 0 ? {} : {
+                        description: pill.description
+                    }
+                })
+            }), content ]
+        }),
         fallbackPlacements: [ "top-start" ],
         onDismiss: onDismiss,
         open: open,
@@ -5792,6 +6234,66 @@ function FieldPill({entry: entry, pill: pill, scope: scope}) {
     });
 }
 
+function Hairline({weight: weight, style: style}) {
+    const {color: color} = useTheme_v2();
+    /* @__PURE__ */
+    return jsx("div", {
+        style: {
+            borderTop: `${weight}px solid ${color.border}`,
+            ...style
+        }
+    });
+}
+
+function CollapsibleBand({header: header, children: children, background: background = !1, defaultOpen: defaultOpen = !0, sticky: sticky = !1, title: title}) {
+    const [open, setOpen] = useState(defaultOpen), verb = open ? "Collapse" : "Expand";
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 1,
+        children: [ 
+        /* @__PURE__ */ jsx(Card, {
+            onDoubleClick: event => {
+                event.target instanceof Element && event.target.closest("a, button") || setOpen(v => !v);
+            },
+            padding: 1,
+            radius: 3,
+            style: {
+                userSelect: "none",
+                ...sticky ? {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1
+                } : {}
+            },
+            tone: background ? "transparent" : "inherit",
+            children: /* @__PURE__ */ jsxs(Flex, {
+                align: "center",
+                children: [ 
+                /* @__PURE__ */ jsx(Button, {
+                    "aria-label": `${verb} ${title}`,
+                    fontSize: 1,
+                    icon: open ? ChevronDownIcon : ChevronRightIcon,
+                    mode: "bleed",
+                    onClick: () => setOpen(v => !v),
+                    padding: 2
+                }), header ]
+            })
+        }), open ? children : null ]
+    });
+}
+
+function TrailingHairline() {
+    /* @__PURE__ */
+    return jsx(Box, {
+        flex: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        children: /* @__PURE__ */ jsx(Hairline, {
+            weight: .5
+        })
+    });
+}
+
 const HISTORY_KIND_GROUPS = {
     Stages: [ "stageEntered", "stageExited", "transitionFired", "aborted" ],
     Activities: [ "activityStatusChanged" ],
@@ -6114,8 +6616,8 @@ function InstanceDebugMenu({entry: entry}) {
     });
 }
 
-function InstanceAccordion({entry: entry, children: children}) {
-    const definition = useDefinition(entry), {instance: instance, ready: ready} = entry, settled = !isLiveEntry(entry), [open, setOpen] = useState(!settled), title = instanceTitle(instance, definition), badgeTrim = useBadgeCapTrim(), status = /* @__PURE__ */ jsxs(Flex, {
+function InstanceAccordion({entry: entry, children: children, defaultOpen: defaultOpen}) {
+    const definition = useDefinition(entry), {instance: instance, ready: ready} = entry, settled = !isLiveEntry(entry), title = instanceTitle(instance, definition), badgeTrim = useBadgeCapTrim(), status = /* @__PURE__ */ jsxs(Flex, {
         align: "center",
         gap: 2,
         style: badgeTrim,
@@ -6125,60 +6627,46 @@ function InstanceAccordion({entry: entry, children: children}) {
         }), settled ? null : /* @__PURE__ */ jsx(OlderDefinitionBadge, {
             instance: instance
         }), !ready && entry.invalid === void 0 ? /* @__PURE__ */ jsx(Spinner, {
-            muted: !0
+            muted: !0,
+            size: 1
         }) : null ]
     });
     /* @__PURE__ */
-    return jsxs(Stack, {
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsx(Card, {
-            style: {
-                position: "sticky",
-                top: 0,
-                zIndex: 1
-            },
-            children: /* @__PURE__ */ jsxs(Flex, {
+    return jsx(CollapsibleBand, {
+        defaultOpen: defaultOpen ?? !settled,
+        title: title,
+        header: /* @__PURE__ */ jsxs(Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsxs(Flex, {
                 align: "center",
-                gap: 1,
+                gap: 2,
+                paddingLeft: 2,
+                style: {
+                    minWidth: 0
+                },
                 children: [ 
-                /* @__PURE__ */ jsx(Box, {
-                    flex: 1,
-                    children: /* @__PURE__ */ jsx(Button, {
-                        "aria-label": open ? `Collapse ${title}` : `Expand ${title}`,
-                        mode: "bleed",
-                        onClick: () => setOpen(v => !v),
-                        paddingX: 2,
-                        paddingY: 3,
-                        radius: 3,
-                        width: "fill",
-                        children: /* @__PURE__ */ jsxs(Flex, {
-                            align: "center",
-                            gap: 2,
-                            children: [ 
-                            /* @__PURE__ */ jsx(Text, {
-                                size: 1,
-                                children: open ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})
-                            }), 
-                            /* @__PURE__ */ jsx(Text, {
-                                size: 1,
-                                weight: "medium",
-                                children: title
-                            }), status ]
-                        })
-                    })
-                }), 
-                /* @__PURE__ */ jsx(InstanceDebugMenu, {
-                    entry: entry
-                }) ]
-            })
-        }), open ? 
-        /* @__PURE__ */ jsx(Stack, {
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    style: {
+                        minWidth: 0
+                    },
+                    textOverflow: "ellipsis",
+                    weight: "medium",
+                    children: title
+                }), status ]
+            }), 
+            /* @__PURE__ */ jsx(TrailingHairline, {}), 
+            /* @__PURE__ */ jsx(InstanceDebugMenu, {
+                entry: entry
+            }) ]
+        }),
+        sticky: !0,
+        children: /* @__PURE__ */ jsx(Stack, {
             gap: 3,
             paddingBottom: 2,
             paddingLeft: 5,
             children: children
-        }) : null ]
+        })
     });
 }
 
@@ -6434,18 +6922,6 @@ const NODE_ICON = {
     done: CheckmarkCircleIcon
 };
 
-function Hairline({style: style}) {
-    const {color: color} = useTheme_v2();
-    /* @__PURE__ */
-    return jsx(Card, {
-        style: {
-            height: "1px",
-            background: color.border,
-            ...style
-        }
-    });
-}
-
 function WorkflowSpine({definition: definition, evaluation: evaluation, instance: instance}) {
     const nodes = deriveSpine({
         definition: definition,
@@ -6464,7 +6940,8 @@ function WorkflowSpine({definition: definition, evaluation: evaluation, instance
                 style: {
                     transform: "translateY(-0.5px)",
                     width: connectorWidth
-                }
+                },
+                weight: 1
             }) : null, 
             /* @__PURE__ */ jsx(SpineNodeView, {
                 definition: definition,
@@ -6569,7 +7046,9 @@ function StageOverviewCard({overview: overview}) {
             })
         }), hasLiveZone ? /* @__PURE__ */ jsxs(Fragment, {
             children: [ 
-            /* @__PURE__ */ jsx(Hairline, {}), 
+            /* @__PURE__ */ jsx(Hairline, {
+                weight: 1
+            }), 
             /* @__PURE__ */ jsx(Box, {
                 padding: 2,
                 children: /* @__PURE__ */ jsxs(Stack, {
@@ -6622,31 +7101,32 @@ function AdvanceCard({advance: advance}) {
 }
 
 function StampLines({stamp: stamp}) {
-    const verb = stamp.kind === "entered" ? "Entered" : "Completed", ago = formatTimeAgo(stamp.at), absolute = formatShortDateTime(stamp.at);
-    return ago === "" ? /* @__PURE__ */ jsxs(Text, {
+    const face = stampFace(stamp.kind === "entered" ? "Entered" : "Completed", stamp.at);
+    return face.detail === void 0 ? /* @__PURE__ */ jsx(Text, {
         muted: !0,
         size: 1,
-        children: [ verb, " ", absolute ]
+        children: face.lead
     }) : /* @__PURE__ */ jsxs(Stack, {
         gap: 3,
         children: [ 
-        /* @__PURE__ */ jsxs(Text, {
+        /* @__PURE__ */ jsx(Text, {
             muted: !0,
             size: 1,
-            children: [ verb, " ", ago ]
+            children: face.lead
         }), 
         /* @__PURE__ */ jsx(Text, {
             muted: !0,
             size: 1,
-            children: absolute
+            children: face.detail
         }) ]
     });
 }
 
-function WorkflowInstanceSection({entry: entry, onOpenActivity: onOpenActivity}) {
+function WorkflowInstanceSection({defaultOpen: defaultOpen, entry: entry, onOpenActivity: onOpenActivity}) {
     const definition = useDefinition(entry), {instance: instance} = entry;
     /* @__PURE__ */
     return jsxs(InstanceAccordion, {
+        defaultOpen: defaultOpen,
         entry: entry,
         children: [ instance.ancestors.length > 0 ? /* @__PURE__ */ jsx(PartOfBand, {
             instance: instance
@@ -6706,7 +7186,7 @@ function StageSection({entry: entry, onOpenActivity: onOpenActivity}) {
     });
 }
 
-const WorkflowsView = props => {
+const VIEW_TAB_CODEC = workflowsTabCodec([ "overview", "for-me" ]), WorkflowsView = props => {
     const {documentId: documentId, schemaType: schemaType} = props, {isDocResolved: isDocResolved, mappings: mappings, discoveryInvalid: discoveryInvalid} = useWorkflowContext(), {entries: entries} = useWorkflowsForDocument(documentId), resolved = isDocResolved(documentId), docTypeMappings = mappingsForDocType(mappings, schemaType.name);
     if (entries.length === 0) return discoveryInvalid !== void 0 ? /* @__PURE__ */ jsx(Box, {
         padding: 4,
@@ -6767,14 +7247,8 @@ const GROUP_GAP = 1;
 function useWorkflowsTab() {
     const {params: params, setParams: setParams} = usePaneRouter();
     return {
-        view: params?.[WORKFLOWS_TAB_PARAM] === "for-me" ? "for-me" : "overview",
-        setView: next => {
-            const {[WORKFLOWS_TAB_PARAM]: _tab, ...rest} = params ?? {};
-            setParams(next === "overview" ? rest : {
-                ...rest,
-                [WORKFLOWS_TAB_PARAM]: next
-            });
-        }
+        view: VIEW_TAB_CODEC.read(params),
+        setView: next => setParams(VIEW_TAB_CODEC.write(params, next))
     };
 }
 
@@ -6793,7 +7267,8 @@ function useOpenActivity(entries) {
 }
 
 function WorkflowsPanel({entries: entries, documentId: documentId, docTypeMappings: docTypeMappings, initialValue: initialValue}) {
-    const identity = useAssignmentIdentity(), panelId = useId(), {view: view, setView: setView} = useWorkflowsTab(), {openActivity: openActivity, setOpenActivity: setOpenActivity, dialogEntry: dialogEntry} = useOpenActivity(entries), active = entries.filter(isLiveEntry), finished = entries.filter(e => !isLiveEntry(e)), forMe = forMeWorkOf(active, identity), assignedWorkUnknown = active.some(e => e.invalid !== void 0), sectionFor = e => /* @__PURE__ */ jsx(WorkflowInstanceSection, {
+    const identity = useAssignmentIdentity(), panelId = useId(), {params: params} = usePaneRouter(), {view: view, setView: setView} = useWorkflowsTab(), {openActivity: openActivity, setOpenActivity: setOpenActivity, dialogEntry: dialogEntry} = useOpenActivity(entries), active = entries.filter(isLiveEntry), finished = entries.filter(e => !isLiveEntry(e)), forMe = forMeWorkOf(active, identity), [landing] = useState(() => focusedLanding(params?.[WORKFLOWS_FOCUS_PARAM], entries.map(e => e.instance._id))), assignedWorkUnknown = active.some(e => e.invalid !== void 0), sectionFor = e => /* @__PURE__ */ jsx(WorkflowInstanceSection, {
+        defaultOpen: landingDefaultOpen(landing, e.instance._id),
         entry: e,
         onOpenActivity: activityName => setOpenActivity({
             instanceId: e.instance._id,
@@ -7110,20 +7585,51 @@ function indexDiscoveredInstances(args) {
     };
 }
 
-function mergeEntries(args) {
-    const map = /* @__PURE__ */ new Map, merged = new Map([ ...args.seeded, ...args.discovered ]);
-    for (const [instanceId, inst] of merged) {
-        const report = args.reports.get(instanceId);
-        map.set(instanceId, {
-            instance: report?.evaluation?.instance ?? inst,
-            committed: inst,
-            evaluation: report?.evaluation,
-            ready: report?.ready ?? !1,
-            invalid: report?.invalid,
-            guards: report?.guards
-        });
+function sameInstance(a, b) {
+    return a === b || a._id === b._id && a._rev === b._rev;
+}
+
+function sameEntry(a, b) {
+    return sameInstance(a.instance, b.instance) && sameInstance(a.committed, b.committed) && a.evaluation === b.evaluation && a.ready === b.ready && a.invalid === b.invalid && a.guards === b.guards;
+}
+
+function reconciled(args) {
+    const {entries: entries, previous: previous, same: same} = args, map = /* @__PURE__ */ new Map;
+    let allReused = !0;
+    for (const [key, next] of entries) {
+        const prev = previous?.get(key), reusable = prev !== void 0 && same(prev, next);
+        reusable || (allReused = !1), map.set(key, reusable ? prev : next);
     }
-    return map;
+    return previous !== void 0 && allReused && previous.size === map.size ? previous : map;
+}
+
+function entryOf(inst, report) {
+    return {
+        instance: report?.evaluation?.instance ?? inst,
+        committed: inst,
+        evaluation: report?.evaluation,
+        ready: report?.ready ?? !1,
+        invalid: report?.invalid,
+        guards: report?.guards
+    };
+}
+
+function mergeEntries(args) {
+    const {seeded: seeded, discovered: discovered, reports: reports, previous: previous} = args, merged = new Map([ ...seeded, ...discovered ]);
+    return reconciled({
+        entries: [ ...merged ].map(([instanceId, inst]) => [ instanceId, entryOf(inst, reports.get(instanceId)) ]),
+        previous: previous,
+        same: sameEntry
+    });
+}
+
+function deriveByDocument(args) {
+    const {docIndex: docIndex, byInstance: byInstance, previous: previous} = args;
+    return reconciled({
+        entries: [ ...docIndex ].map(([docId, instanceIds]) => [ docId, instanceIds.map(id => byInstance.get(id)).filter(entry => entry !== void 0) ]),
+        previous: previous,
+        same: (a, b) => a.length === b.length && b.every((entry, i) => entry === a[i])
+    });
 }
 
 const REPORT_KEYS = [ "evaluation", "ready", "invalid", "guards", "fireAction", "editField", "previewField", "discardFieldPreview" ];
@@ -7144,6 +7650,57 @@ function nextReports(prev, update) {
     return next.set(instanceId, report), next;
 }
 
+const REPORT_FLUSH_MS = 50, EMPTY_COMMITTED = {
+    seeded: /* @__PURE__ */ new Map,
+    discovered: /* @__PURE__ */ new Map,
+    docIndex: /* @__PURE__ */ new Map
+};
+
+function createEntriesStore() {
+    let committed = EMPTY_COMMITTED, reports = /* @__PURE__ */ new Map, byInstance = /* @__PURE__ */ new Map, byDocument = /* @__PURE__ */ new Map;
+    const listeners = /* @__PURE__ */ new Set;
+    let flushTimer;
+    const recompute = () => {
+        flushTimer !== void 0 && (clearTimeout(flushTimer), flushTimer = void 0);
+        const nextByInstance = mergeEntries({
+            ...committed,
+            reports: reports,
+            previous: byInstance
+        }), nextByDocument = deriveByDocument({
+            docIndex: committed.docIndex,
+            byInstance: nextByInstance,
+            previous: byDocument
+        });
+        if (!(nextByInstance === byInstance && nextByDocument === byDocument)) {
+            byInstance = nextByInstance, byDocument = nextByDocument;
+            for (const listener of [ ...listeners ]) listener();
+        }
+    };
+    return {
+        setCommitted(inputs) {
+            committed = inputs, recompute();
+        },
+        report(instanceId, report) {
+            const next = nextReports(reports, {
+                instanceId: instanceId,
+                report: report
+            });
+            next !== reports && (reports = next, flushTimer ??= setTimeout(recompute, REPORT_FLUSH_MS));
+        },
+        getReport: instanceId => reports.get(instanceId),
+        getInstance: instanceId => byInstance.get(instanceId),
+        getDocument: docId => byDocument.get(docId) ?? EMPTY_ENTRIES,
+        subscribe(listener) {
+            return listeners.add(listener), () => {
+                listeners.delete(listener);
+            };
+        },
+        dispose() {
+            flushTimer !== void 0 && clearTimeout(flushTimer), flushTimer = void 0, listeners.clear();
+        }
+    };
+}
+
 const notReady = (..._args) => Promise.reject(new Error("workflow session not ready yet"));
 
 function workspaceParts(config) {
@@ -7193,10 +7750,10 @@ function InstanceEvaluator(props) {
 }
 
 function DiscoverySubscription(props) {
-    const {engine: engine, registered: registered, filter: filter, onSnapshot: onSnapshot} = props, {instances: instances, invalid: invalid} = useWorkflowInstances({
+    const {engine: engine, registered: registered, filter: filter, onSnapshot: onSnapshot} = props, {instances: instances, unreadable: unreadable} = useWorkflowInstances({
         engine: engine,
         filter: filter
-    });
+    }), invalid = unreadable[0];
     return useEffect(() => {
         onSnapshot({
             instances: instances,
@@ -7240,14 +7797,11 @@ function WorkflowProvider(props) {
         id: `${projectId}.${workflowDataset}`
     }), {ids: registered, acquire: register, release: unregister} = useRefcountedIds(), {ids: requested, acquire: requestInstance, release: releaseInstance} = useRefcountedIds(), [seeded, setSeeded] = useState(/* @__PURE__ */ new Map), seedInstance = useCallback(instance => {
         setSeeded(prev => new Map(prev).set(instance._id, instance));
-    }, []), [startRequest2, setStartRequest] = useState(void 0), openStartDialog = useCallback(r => setStartRequest(r), []), closeStartDialog = useCallback(() => setStartRequest(void 0), []), [reports, setReports] = useState(/* @__PURE__ */ new Map), onReport = useCallback((instanceId, report) => {
-        setReports(prev => nextReports(prev, {
-            instanceId: instanceId,
-            report: report
-        }));
-    }, []), reportsRef = useRef(reports);
-    reportsRef.current = reports;
-    const drainRef = useRef(void 0), drainCommitted = useCallback(async instanceId => {
+    }, []), [startRequest2, setStartRequest] = useState(void 0), openStartDialog = useCallback(r => setStartRequest(r), []), closeStartDialog = useCallback(() => setStartRequest(void 0), []), [entriesStore] = useState(createEntriesStore);
+    useEffect(() => () => entriesStore.dispose(), [ entriesStore ]);
+    const onReport = useCallback((instanceId, report) => {
+        entriesStore.report(instanceId, report);
+    }, [ entriesStore ]), drainRef = useRef(void 0), drainCommitted = useCallback(async instanceId => {
         try {
             await (drainRef.current?.(instanceId));
         } catch (err) {
@@ -7256,7 +7810,7 @@ function WorkflowProvider(props) {
             });
         }
     }, []), fireActionFor = useCallback((instanceId, args) => {
-        const report = reportsRef.current.get(instanceId);
+        const report = entriesStore.getReport(instanceId);
         return report ? report.fireAction({
             activity: args.activity,
             action: args.action,
@@ -7264,15 +7818,15 @@ function WorkflowProvider(props) {
                 params: args.params
             } : {}
         }).then(async res => (await drainCommitted(instanceId), res)) : notReady(args);
-    }, [ drainCommitted ]), editFieldFor = useCallback((instanceId, args) => {
-        const report = reportsRef.current.get(instanceId);
+    }, [ entriesStore, drainCommitted ]), editFieldFor = useCallback((instanceId, args) => {
+        const report = entriesStore.getReport(instanceId);
         return report ? report.editField(args).then(async res => (await drainCommitted(instanceId), 
         res)) : notReady(args);
-    }, [ drainCommitted ]), previewFieldFor = useCallback((instanceId, args) => {
-        reportsRef.current.get(instanceId)?.previewField(args);
-    }, []), discardFieldPreviewFor = useCallback((instanceId, target) => {
-        reportsRef.current.get(instanceId)?.discardFieldPreview(target);
-    }, []), drainEffectsFor = useCallback(async instanceId => {
+    }, [ entriesStore, drainCommitted ]), previewFieldFor = useCallback((instanceId, args) => {
+        entriesStore.getReport(instanceId)?.previewField(args);
+    }, [ entriesStore ]), discardFieldPreviewFor = useCallback((instanceId, target) => {
+        entriesStore.getReport(instanceId)?.discardFieldPreview(target);
+    }, [ entriesStore ]), drainEffectsFor = useCallback(async instanceId => {
         await engine.drainEffects({
             instanceId: instanceId
         });
@@ -7306,23 +7860,14 @@ function WorkflowProvider(props) {
             const kept = [ ...prev ].filter(([id]) => !discovered.has(id));
             return kept.length === prev.size ? prev : new Map(kept);
         });
-    }, [ discovered ]);
-    const byInstance = useMemo(() => mergeEntries({
-        seeded: seeded,
-        discovered: discovered,
-        reports: reports
-    }), [ discovered, seeded, reports ]), byDocument = useMemo(() => {
-        const map = /* @__PURE__ */ new Map;
-        for (const [bareDocId, instanceIds] of docIndex) {
-            const entries = [];
-            for (const instanceId of instanceIds) {
-                const entry = byInstance.get(instanceId);
-                entry && entries.push(entry);
-            }
-            map.set(bareDocId, entries);
-        }
-        return map;
-    }, [ byInstance, docIndex ]), isDocResolved = useCallback(docId => resolvedDocs.has(docId), [ resolvedDocs ]), schemaContentTypes = useMemo(() => new Set(contentDocumentTypes(schema)), [ schema ]), {issues: issues, starts: starts, fields: fields, latestVersions: latestVersions, autoStartByType: autoStartByType, autoStartDefinitions: autoStartDefinitions} = useDeployedDefinitions({
+    }, [ discovered ]), useLayoutEffect(() => {
+        entriesStore.setCommitted({
+            seeded: seeded,
+            discovered: discovered,
+            docIndex: docIndex
+        });
+    }, [ entriesStore, seeded, discovered, docIndex ]);
+    const isDocResolved = useCallback(docId => resolvedDocs.has(docId), [ resolvedDocs ]), schemaContentTypes = useMemo(() => new Set(contentDocumentTypes(schema)), [ schema ]), {issues: issues, starts: starts, fields: fields, latestVersions: latestVersions, autoStartByType: autoStartByType, autoStartDefinitions: autoStartDefinitions} = useDeployedDefinitions({
         engine: engine,
         mappings: config.mappings,
         contentResource: binding.contentResource,
@@ -7335,8 +7880,7 @@ function WorkflowProvider(props) {
         register: register,
         unregister: unregister,
         isDocResolved: isDocResolved,
-        byDocument: byDocument,
-        byInstance: byInstance,
+        entries: entriesStore,
         requestInstance: requestInstance,
         releaseInstance: releaseInstance,
         seedInstance: seedInstance,
@@ -7361,7 +7905,7 @@ function WorkflowProvider(props) {
         effectHandlers: engine.effectHandlers,
         autoStartByType: autoStartByType,
         autoStartDefinitions: autoStartDefinitions
-    }), [ register, unregister, isDocResolved, byDocument, byInstance, requestInstance, releaseInstance, seedInstance, openStartDialog, closeStartDialog, startRequest2, loading, discoveryInvalid, fireActionFor, editFieldFor, previewFieldFor, discardFieldPreviewFor, drainEffectsFor, completeEffectFor, engine, binding, config.mappings, issues, starts, latestVersions, autoStartByType, autoStartDefinitions ]);
+    }), [ register, unregister, isDocResolved, entriesStore, requestInstance, releaseInstance, seedInstance, openStartDialog, closeStartDialog, startRequest2, loading, discoveryInvalid, fireActionFor, editFieldFor, previewFieldFor, discardFieldPreviewFor, drainEffectsFor, completeEffectFor, engine, binding, config.mappings, issues, starts, latestVersions, autoStartByType, autoStartDefinitions ]);
     /* @__PURE__ */
     return jsxs(WorkflowContext.Provider, {
         value: value,
@@ -8564,19 +9108,32 @@ function TodoGlance({row: row}) {
     });
 }
 
+function finishedLinesOf(entries) {
+    const activeTypes = new Set(entries.filter(isLiveEntry).map(entry => entry.instance.definition)), settled = entries.flatMap(entry => {
+        const stamp = entry.instance.completedAt;
+        return stamp === void 0 || activeTypes.has(entry.instance.definition) ? [] : [ {
+            entry: entry,
+            at: Date.parse(stamp)
+        } ];
+    }), latestByType = /* @__PURE__ */ new Map;
+    for (const candidate of settled) {
+        const best = latestByType.get(candidate.entry.instance.definition);
+        (best === void 0 || candidate.at > best.at) && latestByType.set(candidate.entry.instance.definition, candidate);
+    }
+    return [ ...latestByType.values() ].sort((a, b) => b.at - a.at).map(({entry: entry}) => entry);
+}
+
 function WorkflowFormStrip(props) {
-    const {mappings: mappings} = props, {isDocResolved: isDocResolved, discoveryInvalid: discoveryInvalid} = useWorkflowContext(), {docId: docId, entries: entries} = useWorkflowsForDocument(props.value?._id ?? null), {params: params, setParams: setParams} = usePaneRouter(), openWorkflowsView = () => setParams({
-        ...params,
-        view: WORKFLOWS_VIEW_ID
-    }), active = entries.filter(isLiveEntry), invalid = surfacedInvalid(discoveryInvalid, entries), resolved = docId !== void 0 && isDocResolved(docId);
+    const {mappings: mappings} = props, {isDocResolved: isDocResolved, discoveryInvalid: discoveryInvalid} = useWorkflowContext(), {docId: docId, entries: entries} = useWorkflowsForDocument(props.value?._id ?? null), {params: params, setParams: setParams} = usePaneRouter(), openWorkflowsView = focusId => setParams(focusedViewParams(params, focusId)), active = entries.filter(isLiveEntry), finished = finishedLinesOf(entries), invalid = surfacedInvalid(discoveryInvalid, entries), resolved = docId !== void 0 && isDocResolved(docId);
     /* @__PURE__ */
     return jsxs(Stack, {
         gap: 4,
         children: [ invalid !== void 0 ? /* @__PURE__ */ jsx(InvalidDocNotice, {
             invalid: invalid
-        }) : null, active.length > 0 || resolved ? /* @__PURE__ */ jsx(StripLines, {
+        }) : null, active.length > 0 || finished.length > 0 || resolved ? /* @__PURE__ */ jsx(StripLines, {
             active: active,
             docId: docId,
+            finished: finished,
             initialValue: props.value ?? null,
             mappings: mappings,
             onOpen: openWorkflowsView,
@@ -8585,32 +9142,17 @@ function WorkflowFormStrip(props) {
     });
 }
 
-function StripLines({active: active, docId: docId, initialValue: initialValue, mappings: mappings, onOpen: onOpen, resolved: resolved}) {
-    const identity = useAssignmentIdentity(), single = active.length === 1 ? active[0] : void 0;
+function StripLines({active: active, docId: docId, finished: finished, initialValue: initialValue, mappings: mappings, onOpen: onOpen, resolved: resolved}) {
     /* @__PURE__ */
     return jsxs(Stack, {
         gap: 1,
-        children: [ single !== void 0 ? /* @__PURE__ */ jsx(InstanceLine, {
-            entry: single,
-            onOpen: onOpen
-        }) : null, active.length > 1 ? /* @__PURE__ */ jsxs(StripLine, {
-            aside: /* @__PURE__ */ jsx(TaskCountSpinner, {
-                entries: active
-            }),
-            hint: lineHint(identity, forMeWorkOf(active, identity)),
-            onOpen: onOpen,
-            children: [ 
-            /* @__PURE__ */ jsx(Flex, {
-                children: /* @__PURE__ */ jsxs(Text, {
-                    size: 1,
-                    weight: "medium",
-                    children: [ active.length, " active workflows" ]
-                })
-            }), 
-            /* @__PURE__ */ jsx(TaskCountText, {
-                entries: active
-            }) ]
-        }) : null, resolved ? /* @__PURE__ */ jsx(Flex, {
+        children: [ active.map(entry => /* @__PURE__ */ jsx(InstanceLine, {
+            entry: entry,
+            onOpen: () => onOpen(entry.instance._id)
+        }, entry.instance._id)), finished.map(entry => /* @__PURE__ */ jsx(FinishedLine, {
+            entry: entry,
+            onOpen: () => onOpen(entry.instance._id)
+        }, entry.instance._id)), resolved ? /* @__PURE__ */ jsx(Flex, {
             children: /* @__PURE__ */ jsx(StartWorkflowControl, {
                 docId: docId,
                 initialValue: initialValue,
@@ -8664,7 +9206,7 @@ function InstanceLine({entry: entry, onOpen: onOpen}) {
     /* @__PURE__ */
     return jsxs(StripLine, {
         aside: unprimed ? void 0 : /* @__PURE__ */ jsx(TaskCountSpinner, {
-            entries: [ entry ]
+            entry: entry
         }),
         hint: lineHint(identity, forMeWorkOf([ entry ], identity)),
         onOpen: onOpen,
@@ -8683,34 +9225,69 @@ function InstanceLine({entry: entry, onOpen: onOpen}) {
                 title: stageTitle(definition, entry.instance.currentStage)
             }), 
             /* @__PURE__ */ jsx(TaskCountText, {
-                entries: [ entry ]
+                entry: entry
             }) ]
         }) ]
     });
 }
 
-function useTaskCountState(entries) {
-    const identity = useAssignmentIdentity(), freshness = entries.filter(e => e.invalid === void 0).map(e => evaluationFreshness({
-        committed: e.committed,
-        evaluation: e.evaluation
-    }));
-    return !identity || freshness.includes("pending") ? {
+function FinishedLine({entry: entry, onOpen: onOpen}) {
+    const definition = useDefinition(entry), badgeTrim = useBadgeCapTrim(), {instance: instance} = entry;
+    /* @__PURE__ */
+    return jsxs(StripLine, {
+        hint: finishedHint(instance),
+        onOpen: onOpen,
+        children: [ 
+        /* @__PURE__ */ jsx(Flex, {
+            children: /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "medium",
+                children: instanceTitle(instance, definition)
+            })
+        }), terminalState(instance) === "aborted" ? /* @__PURE__ */ jsx(Flex, {
+            style: badgeTrim,
+            children: /* @__PURE__ */ jsx(AbortedBadge, {
+                instance: instance
+            })
+        }) : /* @__PURE__ */ jsx(StageFace, {
+            completed: !0,
+            title: stageTitle(definition, instance.currentStage)
+        }) ]
+    });
+}
+
+function finishedHint(instance) {
+    const verb = terminalState(instance) === "aborted" ? "Aborted" : "Completed", face = stampFace(verb, instance.completedAt ?? "");
+    return {
+        text: face.lead,
+        ...face.detail === void 0 ? {} : {
+            description: face.detail
+        }
+    };
+}
+
+function useTaskCountState(entry) {
+    const identity = useAssignmentIdentity(), freshness = entry.invalid === void 0 ? evaluationFreshness({
+        committed: entry.committed,
+        evaluation: entry.evaluation
+    }) : void 0;
+    return !identity || freshness === "pending" ? {
         kind: "pending"
-    } : freshness.includes("stale") ? {
+    } : freshness === "stale" ? {
         kind: "stale"
     } : {
         kind: "ready",
-        tasks: entries.reduce((n, e) => n + assignedTaskCount({
-            instance: e.instance,
-            committed: e.committed,
-            evaluation: e.evaluation,
+        tasks: assignedTaskCount({
+            instance: entry.instance,
+            committed: entry.committed,
+            evaluation: entry.evaluation,
             who: identity
-        }), 0)
+        })
     };
 }
 
-function TaskCountText({entries: entries}) {
-    const state = useTaskCountState(entries);
+function TaskCountText({entry: entry}) {
+    const state = useTaskCountState(entry);
     return state.kind === "pending" || state.kind === "ready" && state.tasks === 0 ? null : /* @__PURE__ */ jsx(Text, {
         muted: !0,
         size: 1,
@@ -8718,8 +9295,8 @@ function TaskCountText({entries: entries}) {
     });
 }
 
-function TaskCountSpinner({entries: entries}) {
-    return useTaskCountState(entries).kind !== "pending" ? null : /* @__PURE__ */ jsx(Flex, {
+function TaskCountSpinner({entry: entry}) {
+    return useTaskCountState(entry).kind !== "pending" ? null : /* @__PURE__ */ jsx(Flex, {
         paddingLeft: 1,
         children: /* @__PURE__ */ jsx(Spinner, {
             muted: !0,
@@ -8892,4 +9469,4 @@ function pillTone(args) {
     return args.state === "aborted" ? "critical" : args.isTerminal ? "positive" : args.stageKnown ? "primary" : "default";
 }
 
-export { AbortedBadge, ActivitiesList, ActivityDetailDialog, ActivityStatusIcon, DismissablePopover, DocPreviewLink, DocRefFace, GroupHeading, HintedMenuButton, HoverHint, InvalidDocNotice, LoadingRow, StageChip, StageGlyph, StaleLock, TodoItemsList, UserAvatarGroup, WorkflowStagePreview, assigneeUserIdsOf, definitionSnapshotOf, describeError, findActivity, formatDate, gdrLocality, instanceBreadcrumb, instanceNotice, instanceTitle, isActivityAssignedTo, isEvaluationStale, isOpenActivityStatus, mappingForDocType, openActivityGone, parseStoredDateValue, readDeployedDefinitions, stageTitle, stateByActivity, useAssignmentIdentity, useDefinition, useDocLink, useProjectMembers, useUserDisplays, useWorkflowContext, useWorkflowInstanceEntry, workflowDefaultDocumentNode, workflowDocTypes, workflowStudioPlugin, workflowsView };
+export { AbortedBadge, ActivitiesList, ActivityDetailDialog, ActivityRow, BreadcrumbTail, CollapsibleBand, DismissablePopover, DocPreviewLink, DocRefFace, GroupHeading, HoverHint, InvalidDocNotice, LinkChip, LoadingRow, StageChip, StageFace, StaleLock, TabSwitch, TodoItemsList, TrailingHairline, UnreadableDocsNote, WorkflowStagePreview, activityRowProps, assigneeUserIdsOf, committedRowFace, dateControlKind, dateControlValue, definitionSnapshotOf, describeError, editTargetOf, findActivity, findActivityNode, formatDate, gdrLocality, instanceBreadcrumb, instanceNotice, instanceTitle, isActivityAssignedTo, isEvaluationStale, isOpenActivityStatus, mappingForDocType, openActivityGone, parseDateFieldValue, parseStoredDateValue, readDeployedDefinitions, rowAssignControlState, rowDateControlState, serializeDateFieldValue, stageTitle, stateByActivity, stopRowClick, stopRowMouseDown, useAssignmentIdentity, useDefinition, useProjectMembers, useSaveField, useUserDisplays, useWorkflowContext, useWorkflowInstanceEntry, workflowDefaultDocumentNode, workflowDocTypes, workflowStudioPlugin, workflowsTabCodec, workflowsView };