@sanity/workflow-studio-plugin 0.4.0 → 0.5.0

package/dist/_chunks-cjs/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 
-var workflowEngine = require("@sanity/workflow-engine"), jsxRuntime = require("react/jsx-runtime"), Timeline = require("@sanity/icons/Timeline"), ui = require("@sanity/ui"), react = require("react"), structure = require("sanity/structure"), formatDistanceToNow = require("date-fns/formatDistanceToNow"), csm = require("@sanity/client/csm"), workflowStudio = require("@sanity/workflow-studio"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), workflowComponents = require("@sanity/workflow-components"), User = require("@sanity/icons/User"), Close = require("@sanity/icons/Close"), Search = require("@sanity/icons/Search"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), Checkmark = require("@sanity/icons/Checkmark"), Edit = require("@sanity/icons/Edit"), content = require("@sanity/util/content"), InfoOutline = require("@sanity/icons/InfoOutline"), WarningOutline = require("@sanity/icons/WarningOutline"), router = require("sanity/router"), types = require("@sanity/types"), Launch = require("@sanity/icons/Launch"), Empty$1 = require("@sanity/icons/Empty"), ErrorFilled = require("@sanity/icons/ErrorFilled"), RemoveCircle = require("@sanity/icons/RemoveCircle"), Add = require("@sanity/icons/Add"), Bolt = require("@sanity/icons/Bolt"), CheckmarkCircle = require("@sanity/icons/CheckmarkCircle"), Document = require("@sanity/icons/Document"), Ulist = require("@sanity/icons/Ulist"), pluralize = require("pluralize-esm"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), ArrowUp = require("@sanity/icons/ArrowUp"), workflowReact = require("@sanity/workflow-react"), Transfer = require("@sanity/icons/Transfer");
+var workflowEngine = require("@sanity/workflow-engine"), jsxRuntime = require("react/jsx-runtime"), Timeline = require("@sanity/icons/Timeline"), ui = require("@sanity/ui"), react = require("react"), structure = require("sanity/structure"), formatDistanceToNow = require("date-fns/formatDistanceToNow"), csm = require("@sanity/client/csm"), workflowStudio = require("@sanity/workflow-studio"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), workflowComponents = require("@sanity/workflow-components"), User = require("@sanity/icons/User"), Close = require("@sanity/icons/Close"), Search = require("@sanity/icons/Search"), ChevronRight = require("@sanity/icons/ChevronRight"), Checkmark = require("@sanity/icons/Checkmark"), Edit = require("@sanity/icons/Edit"), content = require("@sanity/util/content"), InfoOutline = require("@sanity/icons/InfoOutline"), Document = require("@sanity/icons/Document"), WarningOutline = require("@sanity/icons/WarningOutline"), router = require("sanity/router"), types = require("@sanity/types"), Launch = require("@sanity/icons/Launch"), Empty$1 = require("@sanity/icons/Empty"), ErrorFilled = require("@sanity/icons/ErrorFilled"), RemoveCircle = require("@sanity/icons/RemoveCircle"), Add = require("@sanity/icons/Add"), Bolt = require("@sanity/icons/Bolt"), ChevronDown = require("@sanity/icons/ChevronDown"), CheckmarkCircle = require("@sanity/icons/CheckmarkCircle"), Ulist = require("@sanity/icons/Ulist"), pluralize = require("pluralize-esm"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), ArrowUp = require("@sanity/icons/ArrowUp"), workflowReact = require("@sanity/workflow-react"), Transfer = require("@sanity/icons/Transfer");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -170,7 +170,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;
@@ -243,6 +285,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);
@@ -292,6 +344,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 workflowEngine.actionRendering(actionEval) === "button";
 }
@@ -348,20 +404,27 @@ function useWorkflowContext() {
 }
 
 function useWorkflowsForDocument(rawId) {
-    const {register: register, unregister: unregister, byDocument: byDocument} = useWorkflowContext(), docId = rawId ? csm.getPublishedId(rawId) : void 0;
-    return react.useEffect(() => {
+    const {register: register, unregister: unregister, entries: entries} = useWorkflowContext(), docId = rawId ? csm.getPublishedId(rawId) : void 0;
+    react.useEffect(() => {
         if (docId) return register(docId), () => unregister(docId);
-    }, [ docId, register, unregister ]), {
+    }, [ docId, register, unregister ]);
+    const list = react.useSyncExternalStore(entries.subscribe, react.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 react.useSyncExternalStore(entries.subscribe, react.useCallback(() => instanceId ? entries.getInstance(instanceId) : void 0, [ entries, instanceId ]));
+}
+
 function useWorkflowInstanceEntry(instanceId) {
-    const {byInstance: byInstance, requestInstance: requestInstance, releaseInstance: releaseInstance} = useWorkflowContext();
-    if (react.useEffect(() => {
+    const {requestInstance: requestInstance, releaseInstance: releaseInstance} = useWorkflowContext();
+    return react.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";
@@ -630,14 +693,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"
     };
 }
 
@@ -699,6 +765,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);
@@ -728,8 +799,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))
     };
 }
 
@@ -742,15 +813,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 workflowEngine.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),
@@ -762,6 +896,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 workflowEngine.findCurrentActivityEntry(instance, activityName)?.fields ?? [];
 }
@@ -788,10 +931,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 = workflowEngine.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("; ")}`;
@@ -999,8 +1149,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" ? {
@@ -1113,7 +1274,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);
@@ -1124,29 +1285,19 @@ function textValueOf(value) {
 }
 
 function ScalarInput({kind: kind, value: value, onChange: onChange, options: options, validation: validation}) {
-    if (options !== void 0) /* @__PURE__ */
-    return jsxRuntime.jsx(ChoiceSelect, {
+    return options !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ChoiceSelect, {
         onChange: onChange,
         options: options,
         value: value
-    });
-    if (kind === "boolean") /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Checkbox, {
+    }) : kind === "boolean" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, {
         checked: value === !0,
         onChange: e => onChange(e.currentTarget.checked)
-    });
-    if (kind === "date" || kind === "dateTime" || kind === "datetime") /* @__PURE__ */
-    return jsxRuntime.jsx(DateFieldInput, {
+    }) : kind === "date" || kind === "dateTime" || kind === "datetime" ? /* @__PURE__ */ jsxRuntime.jsx(DateFieldInput, {
         kind: kind === "date" ? "date" : "datetime",
         onChange: next => onChange(next ?? ""),
         value: value
-    });
-    const inputType = kind === "url" || kind === "number" ? kind : void 0;
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.TextInput, {
-        ...inputType ? {
-            type: inputType
-        } : {},
+    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
+        ...textInputFacet(kind),
         ...scalarInputConstraints(kind, validation),
         fontSize: 1,
         onChange: e => onChange(e.currentTarget.value),
@@ -1234,25 +1385,26 @@ function MemberPickerButton({label: label = "Select member…", onChange: onChan
     });
 }
 
-function StubPreview({id: id, layout: layout, schemaType: schemaType}) {
+function useStubValuePreview(id, schemaType) {
     const value = react.useMemo(() => ({
         _id: id,
         _type: schemaType.name
-    }), [ id, schemaType.name ]);
-    return sanity.useValuePreview({
+    }), [ id, schemaType.name ]), preview = sanity.useValuePreview({
         schemaType: schemaType,
         value: value
-    })?.isLoading ? layout === "inline" ? /* @__PURE__ */ jsxRuntime.jsx(ui.TextSkeleton, {
-        animated: !0,
-        radius: 1,
-        size: 1,
-        style: {
-            width: 96
-        }
-    }) : /* @__PURE__ */ jsxRuntime.jsx(sanity.SanityDefaultPreview, {
+    });
+    return {
+        value: value,
+        preview: preview
+    };
+}
+
+function StubPreview({id: id, schemaType: schemaType}) {
+    const {value: value, preview: preview} = useStubValuePreview(id, schemaType);
+    return preview.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(sanity.SanityDefaultPreview, {
         isPlaceholder: !0
     }) : /* @__PURE__ */ jsxRuntime.jsx(sanity.Preview, {
-        layout: layout,
+        layout: "default",
         schemaType: schemaType,
         skipVisibilityCheck: !0,
         value: value
@@ -1362,7 +1514,6 @@ function PreviewOrId({id: id, type: type, fallbackTitle: fallbackTitle}) {
     const schemaType = sanity.useSchema().get(type);
     return schemaType ? /* @__PURE__ */ jsxRuntime.jsx(StubPreview, {
         id: id,
-        layout: "default",
         schemaType: schemaType
     }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         align: "center",
@@ -1496,12 +1647,30 @@ function useClosableToast() {
     }), [ toast ]);
 }
 
+const ActionClusterContext = react.createContext(void 0), ActionClusterProvider = ActionClusterContext.Provider;
+
+function useActionClusterState() {
+    const [pending, setPending] = react.useState(!1);
+    return react.useMemo(() => ({
+        pending: pending,
+        onFireChange: setPending
+    }), [ pending ]);
+}
+
+function useActionClusterLock() {
+    return react.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] = react.useState(!1);
+    const {instanceId: instanceId, activity: activity, action: action, label: label} = args, {fireActionFor: fireActionFor} = useWorkflowContext(), toast = useClosableToast(), cluster = useActionClusterLock(), [localPending, setLocalPending] = react.useState(!1), pending = localPending || cluster?.pending === !0;
     return {
         fire: react.useCallback(async params => {
             if (pending) return !1;
-            setPending(!0);
+            setLocalPending(!0), cluster?.onFireChange(!0);
             try {
                 return await fireActionFor(instanceId, {
                     activity: activity,
@@ -1521,9 +1690,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
     };
 }
@@ -1532,6 +1701,10 @@ function stopRowMouseDown(e) {
     e.preventDefault(), e.stopPropagation();
 }
 
+function stopRowClick(e) {
+    e.stopPropagation();
+}
+
 function spanTriggerProps(chrome) {
     return chrome?.inButtonCard === !0 ? {
         as: "span",
@@ -1567,7 +1740,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),
@@ -1596,12 +1768,11 @@ function ActivityActionRow({actionEval: actionEval, instanceId: instanceId, acti
 }
 
 function DisabledActionButton({actionEval: actionEval, chrome: chrome}) {
-    const label = actionLabel(actionEval.action), button = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+    const label = actionTriggerLabel(actionEval), button = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
         fontSize: 1,
         mode: chrome?.mode ?? "ghost",
         onClick: e => e.stopPropagation(),
         padding: 2,
-        style: chrome?.style,
         text: label,
         ...spanTriggerProps(chrome),
         disabled: !0
@@ -1614,7 +1785,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__ */ jsxRuntime.jsx(FireButton, {
         action: action.name,
@@ -1692,8 +1863,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] = react.useState(!1), btn = actionButtonTone({
-        action: action,
+    const [open, setOpen] = react.useState(!1), btn = actionButtonTone({
+        actionEval: actionEval,
         activityName: activity
     });
     /* @__PURE__ */
@@ -1706,11 +1877,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__ */ jsxRuntime.jsx(RowClickShield, {
             active: chrome?.inButtonCard === !0,
@@ -1724,178 +1892,6 @@ function ParamsActionButton({actionEval: actionEval, instanceId: instanceId, act
     });
 }
 
-function HintedMenuButton({hint: hint, wrapMenuButton: wrapMenuButton, ...menuButtonProps}) {
-    const [open, setOpen] = react.useState(!1), wrap = wrapMenuButton ?? (node => node);
-    return hint === void 0 ? wrap(/* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
-        ...menuButtonProps
-    })) : /* @__PURE__ */ jsxRuntime.jsx(HoverHint, {
-        disabled: open,
-        text: hint,
-        children: wrap(
-        /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.MenuItem, {
-        disabled: !0,
-        text: label
-    }) : rowKind.kind === "plain" ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-        disabled: pending,
-        onClick: () => {
-            fire();
-        },
-        text: label
-    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-        onClick: onCollectParams,
-        text: `${label}…`
-    });
-}
-
-function rowShield(menuButton) {
-    /* @__PURE__ */
-    return jsxRuntime.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] = react.useState(void 0), menuId = react.useId(), inButtonCard = chrome?.inButtonCard === !0;
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(HintedMenuButton, {
-            button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                "aria-label": "More options",
-                fontSize: 1,
-                icon: ChevronDown.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__ */ jsxRuntime.jsx(ui.Menu, {
-                children: actions.map(a => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(RowClickShield, {
-            active: inButtonCard,
-            children: /* @__PURE__ */ jsxRuntime.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} = ui.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 jsxRuntime.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 jsxRuntime.jsxs(ui.Flex, {
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ActivityActionRow, {
-            actionEval: primary,
-            activity: activity,
-            chrome: {
-                ...segment,
-                style: PRIMARY_SEGMENT,
-                ...embed
-            },
-            instanceId: instanceId
-        }), ghost ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            flex: "none",
-            style: {
-                background: color.bg,
-                width: 1
-            }
-        }), 
-        /* @__PURE__ */ jsxRuntime.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
 };
@@ -1933,8 +1929,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
@@ -2068,14 +2068,15 @@ function FieldInput$1({kind: kind, value: value, onChange: onChange, onEnter: on
         });
 
       case "number":
+      case "progress":
         /* @__PURE__ */
         return jsxRuntime.jsx(ui.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)
         });
 
@@ -2103,6 +2104,30 @@ function FieldInput$1({kind: kind, value: value, onChange: onChange, onEnter: on
     }
 }
 
+function LinkChip({hint: hint, children: children, as: as = "a", ...anchorProps}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(HoverHint, {
+        text: hint,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.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 {
@@ -2212,7 +2237,6 @@ function DocRefFace({gdr: gdr}) {
     const {parsed: parsed2, local: local, schemaType: schemaType} = useLocalDocRef(gdr);
     return parsed2 && local && schemaType ? /* @__PURE__ */ jsxRuntime.jsx(StubPreview, {
         id: parsed2.documentId,
-        layout: "default",
         schemaType: schemaType
     }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         align: "center",
@@ -2242,15 +2266,23 @@ function ForeignRefNotice({bareId: bareId, resource: resource}) {
 }
 
 function MissingDocNotice({bareId: bareId, layout: layout}) {
-    return layout === "inline" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-        muted: !0,
-        size: 1,
+    return layout === "inline" ? 
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+        padding: 2,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "center",
-            as: "span",
-            gap: 1,
+            gap: 2,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(WarningOutline.WarningOutlineIcon, {}), " Document unavailable" ]
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: /* @__PURE__ */ jsxRuntime.jsx(WarningOutline.WarningOutlineIcon, {})
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: "Document unavailable"
+            }) ]
         })
     }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
         border: !0,
@@ -2283,44 +2315,73 @@ function UnopenableTypeNotice({actualType: actualType, bareId: bareId}) {
     });
 }
 
-function LinkedDocPreview({bareId: bareId, layout: layout, schemaType: schemaType}) {
-    return layout === "inline" ? /* @__PURE__ */ jsxRuntime.jsx(router.IntentLink, {
-        intent: "edit",
-        onClick: e => e.stopPropagation(),
-        params: {
-            id: bareId
-        },
-        style: {
-            color: "inherit",
-            textDecoration: "none",
-            display: "flex",
-            alignItems: "center"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(StubPreview, {
-            id: bareId,
-            layout: "inline",
-            schemaType: schemaType
-        })
-    }) : /* @__PURE__ */ jsxRuntime.jsx(router.IntentLink, {
-        intent: "edit",
-        onClick: e => e.stopPropagation(),
-        params: {
-            id: bareId
-        },
-        style: {
-            color: "inherit",
-            textDecoration: "none",
+function renderTypeIcon(icon) {
+    return typeof icon == "function" ? react.createElement(icon) : react.isValidElement(icon) ? icon : /* @__PURE__ */ jsxRuntime.jsx(Document.DocumentIcon, {});
+}
+
+function InlineChipFace({bareId: bareId, schemaType: schemaType}) {
+    const {preview: preview} = useStubValuePreview(bareId, schemaType);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            children: renderTypeIcon(schemaType.icon)
+        }), preview.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ui.TextSkeleton, {
+            animated: !0,
+            radius: 1,
+            size: 1,
+            style: {
+                width: 96
+            }
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            textOverflow: "ellipsis",
+            weight: "medium",
+            children: preview.value?.title ?? /* @__PURE__ */ jsxRuntime.jsx("em", {
+                children: "Untitled"
+            })
+        }) ]
+    });
+}
+
+function LinkedDocPreview({bareId: bareId, layout: layout, schemaType: schemaType}) {
+    const EditIntentLink = react.useMemo(() => function(linkProps) {
+        /* @__PURE__ */
+        return jsxRuntime.jsx(router.IntentLink, {
+            ...linkProps,
+            intent: "edit",
+            params: {
+                id: bareId
+            }
+        });
+    }, [ bareId ]);
+    return layout === "inline" ? /* @__PURE__ */ jsxRuntime.jsx(LinkChip, {
+        as: EditIntentLink,
+        hint: "Open document",
+        onClick: e => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(InlineChipFace, {
+            bareId: bareId,
+            schemaType: schemaType
+        })
+    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+        __unstable_focusRing: !0,
+        as: EditIntentLink,
+        border: !0,
+        "data-as": "a",
+        onClick: e => e.stopPropagation(),
+        padding: 1,
+        radius: 3,
+        style: {
+            color: "inherit",
+            textDecoration: "none",
             display: "block"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-            border: !0,
-            padding: 1,
-            radius: 3,
-            children: /* @__PURE__ */ jsxRuntime.jsx(StubPreview, {
-                id: bareId,
-                layout: "default",
-                schemaType: schemaType
-            })
+        children: /* @__PURE__ */ jsxRuntime.jsx(StubPreview, {
+            id: bareId,
+            schemaType: schemaType
         })
     });
 }
@@ -2464,6 +2525,10 @@ const fieldValueRenderer = {
         }, ref.id))
     }) : /* @__PURE__ */ jsxRuntime.jsx(Empty, {}),
     number: renderTextValue,
+    progress: field => /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.ProgressBar, {
+        label: field.title ?? field.name,
+        value: field.value
+    }),
     object: field => field.value === null ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.Code, {
         size: 1,
         style: {
@@ -2715,7 +2780,7 @@ function useFieldDraft(args) {
 }
 
 function EditableFieldControl({instanceId: instanceId, field: field}) {
-    const {editFieldFor: editFieldFor, previewFieldFor: previewFieldFor, discardFieldPreviewFor: discardFieldPreviewFor, byInstance: byInstance} = useWorkflowContext(), me = sanity.useCurrentUser(), held = byInstance.get(instanceId), entry = held ? workflowEngine.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 = sanity.useCurrentUser(), held = useHeldWorkflowEntry(instanceId), entry = held ? workflowEngine.resolveFieldEntry(held.instance, field) : void 0, evaluation = held?.evaluation, target = editTargetOf(field), consequence = fieldConsequence(evaluation, field.name), advanceTo = advanceTargetTitle(evaluation, field.name);
     /* @__PURE__ */
     return jsxRuntime.jsx(EditableField, {
         field: field,
@@ -3257,6 +3322,27 @@ function ActivityStatusIcon({status: status}) {
     });
 }
 
+function LoadingRow({label: label, padding: padding}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        ...padding === void 0 ? {} : {
+            padding: padding
+        },
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
+            muted: !0,
+            size: 1
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: label
+        }) ]
+    });
+}
+
 function useSpaceToken(index) {
     const value = ui.useTheme_v2().space[index];
     if (value === void 0) throw new Error(`theme is missing space token ${index}`);
@@ -3287,6 +3373,27 @@ function useBadgeCapTrim() {
     };
 }
 
+function AvatarDisplay({avatar: avatar, "aria-label": ariaLabel}) {
+    const trim = useAvatarCapTrim();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        "aria-label": ariaLabel,
+        as: "span",
+        padding: 2,
+        style: {
+            display: "inline-flex"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */
@@ -3329,10 +3436,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__ */ jsxRuntime.jsx(HoverHint, {
         text: displays.map(d => d.name).join(", "),
+        ...hint === void 0 ? {} : {
+            description: hint
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.MemberAvatarGroup, {
             members: displays.map(display => ({
                 id: display.id,
@@ -3343,9 +3453,26 @@ function UserAvatarGroup({ids: ids}) {
     });
 }
 
-function AssignActivityControl({instanceId: instanceId, field: field, assigneeIds: assigneeIds = []}) {
-    const {editFieldFor: editFieldFor} = useWorkflowContext(), toast = useClosableToast(), [open, setOpen] = react.useState(!1), [busy, setBusy] = react.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] = react.useState(!1), [busy, setBusy] = react.useState(!1);
+    if (state.kind === "none") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AvatarDisplay, {
+        "aria-label": "Assignees",
+        avatar: /* @__PURE__ */ jsxRuntime.jsx(UserAvatarGroup, {
+            ids: assigneeIds
+        })
+    });
+    if (state.kind === "closed") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AvatarButton, {
+        "aria-label": "Assignees",
+        as: "span",
+        avatar: /* @__PURE__ */ jsxRuntime.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, {
@@ -3398,8 +3525,11 @@ function AssignActivityControl({instanceId: instanceId, field: field, assigneeId
     /* @__PURE__ */
     return jsxRuntime.jsx(DismissablePopover, {
         content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            onClick: e => e.stopPropagation(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(MemberPicker, {
+            onClick: stopRowClick,
+            children: state.kind === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(LoadingRow, {
+                label: "Loading…",
+                padding: 3
+            }) : /* @__PURE__ */ jsxRuntime.jsx(MemberPicker, {
                 onSelect: member => member && void toggle(member.id),
                 selectedIds: selectedIds
             })
@@ -3687,9 +3817,9 @@ function BreadcrumbTail({segments: segments, style: style}) {
 }
 
 function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
-    const frame = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+    const frame = 
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         align: "center",
-        gap: 1,
         children: [ 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
             align: "center",
@@ -3703,6 +3833,7 @@ function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
             align: "center",
             flex: 1,
             gap: 2,
+            paddingLeft: 2,
             style: {
                 minWidth: 0
             },
@@ -3710,6 +3841,7 @@ function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
         }), end === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
             align: "center",
             gap: 2,
+            paddingLeft: 2,
             style: {
                 flexShrink: 0
             },
@@ -3718,14 +3850,14 @@ function WorkRow({lead: lead, children: children, end: end, onOpen: onOpen}) {
     });
     return onOpen === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
         padding: 1,
-        radius: 2,
+        radius: 3,
         children: frame
     }) : 
     /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
         as: "button",
         onClick: onOpen,
         padding: 1,
-        radius: 2,
+        radius: 3,
         style: {
             textAlign: "left"
         },
@@ -3912,6 +4044,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: ChevronDown.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__ */ jsxRuntime.jsx(ui.MenuItem, {
+        disabled: !0,
+        text: label
+    }) : rowKind.kind === "plain" ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        disabled: pending,
+        onClick: () => {
+            fire();
+        },
+        text: label
+    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        disabled: pending,
+        onClick: onCollectParams,
+        text: label
+    });
+}
+
+function rowShield(menuButton) {
+    /* @__PURE__ */
+    return jsxRuntime.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] = react.useState(void 0), clusterPending = useActionClusterPending(), menuId = react.useId(), menuButton = /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+        button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+            ...ACTIONS_MENU_TRIGGER,
+            mode: mode,
+            text: label,
+            ...inButtonCard ? {
+                as: "span"
+            } : {},
+            ...clusterPending ? {
+                disabled: !0
+            } : {}
+        }),
+        id: `workflow-actions-menu-${menuId}`,
+        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
+            children: actions.map(a => /* @__PURE__ */ jsxRuntime.jsx(ActionMenuItem, {
+                actionEval: a,
+                activity: activity,
+                instanceId: instanceId,
+                onCollectParams: () => setParamsAction(a)
+            }, a.action.name))
+        }),
+        popover: {
+            placement: "top-end",
+            portal: !0
+        }
+    });
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ inButtonCard ? rowShield(menuButton) : menuButton, paramsAction ? /* @__PURE__ */ jsxRuntime.jsx(RowClickShield, {
+            active: inButtonCard,
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ActionClusterProvider, {
+        value: lock,
+        children: rest.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(FooterRow, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ActivityActionRow, {
+                actionEval: only,
+                activity: activity,
+                instanceId: instanceId
+            })
+        }) : /* @__PURE__ */ jsxRuntime.jsx(FittedActions, {
+            actions: actions,
+            activity: activity,
+            instanceId: instanceId
+        })
+    }) : null;
+}
+
+function FooterRow({children: children, onElement: onElement}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        padding: 3,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.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] = react.useState(null), [measureEl, setMeasureEl] = react.useState(null), footerSize = ui.useElementSize(footerEl), measureSize = ui.useElementSize(measureEl), [inline, setInline] = react.useState(void 0);
+    react.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(MeasureRow, {
+            actions: actions,
+            onElement: setMeasureEl
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(FooterRow, {
+            onElement: setFooterEl,
+            children: [ inline === void 0 ? null : actions.slice(0, inline).map(a => /* @__PURE__ */ jsxRuntime.jsx(ActivityActionRow, {
+                actionEval: a,
+                activity: activity,
+                instanceId: instanceId
+            }, a.action.name)), overflow.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ActionsMenuButton, {
+                actions: overflow,
+                activity: activity,
+                instanceId: instanceId,
+                label: MORE_ACTIONS_LABEL,
+                mode: "default"
+            }) : null ]
+        }) ]
+    });
+}
+
+function MeasureRow({actions: actions, onElement: onElement}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx("div", {
+        "aria-hidden": !0,
+        style: {
+            height: 0,
+            overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            ref: onElement,
+            style: {
+                display: "inline-flex",
+                whiteSpace: "nowrap"
+            },
+            children: [ actions.map(a => /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                as: "span",
+                fontSize: 1,
+                padding: 2,
+                text: actionTriggerLabel(a)
+            }, a.action.name)), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.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,
@@ -3921,12 +4249,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 jsxRuntime.jsxs(ui.Dialog, {
-        footer: /* @__PURE__ */ jsxRuntime.jsx(TerminalFooter, {
-            activityName: activityName,
-            detail: detail,
-            instanceId: instanceId,
-            onClose: onClose
-        }),
+        footer: detail.presentation.terminalActions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(TerminalFooter, {
+            actions: detail.presentation.terminalActions,
+            activity: activityName,
+            instanceId: instanceId
+        }) : void 0,
         header: /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, {
             emphasizeCurrent: !0,
             segments: [ ...breadcrumb, detail.title ]
@@ -4095,8 +4422,11 @@ function FieldRow({field: field, detail: detail, entry: entry, activityName: act
                 /* @__PURE__ */ jsxRuntime.jsx(FieldValue, {
                     field: field
                 }), assignField ? /* @__PURE__ */ jsxRuntime.jsx(AssignActivityControl, {
-                    field: assignField,
-                    instanceId: instanceId
+                    instanceId: instanceId,
+                    state: {
+                        kind: "editable",
+                        field: assignField
+                    }
                 }) : null ]
             }) ]
         });
@@ -4129,31 +4459,6 @@ function blockedNotice(detail) {
     });
 }
 
-function TerminalFooter({detail: detail, instanceId: instanceId, activityName: activityName, onClose: onClose}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Box, {
-        padding: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            gap: 2,
-            justify: "flex-end",
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                fontSize: 1,
-                mode: "bleed",
-                onClick: onClose,
-                padding: 2,
-                text: "Cancel"
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(TerminalActions, {
-                actions: detail.presentation.terminalActions,
-                activity: activityName,
-                instanceId: instanceId
-            }) ]
-        })
-    });
-}
-
 function EmptyState({action: action, description: description, icon: icon, title: title}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Card, {
@@ -4231,13 +4536,69 @@ function GroupHeading({count: count, title: title, end: end}) {
     });
 }
 
+function CopyDetailsButton({unreadable: unreadable}) {
+    const toast = useClosableToast();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.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 jsxRuntime.jsxs(ui.Card, {
+        padding: 2,
+        paddingLeft: 3,
+        radius: 3,
+        style: {
+            alignItems: "center",
+            display: "flex"
+        },
+        tone: "caution",
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            flex: 1,
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: /* @__PURE__ */ jsxRuntime.jsx(WarningOutline.WarningOutlineIcon, {})
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: label
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxRuntime.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}) {
@@ -4248,20 +4609,22 @@ function InvalidDocNotice({invalid: invalid}) {
         radius: 2,
         tone: "caution",
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            space: 2,
+            space: 3,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(HoverHint, {
-                text: invalid.message,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    size: 1,
-                    weight: "medium",
-                    children: HEADLINES[invalid.reason]
-                })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                weight: "medium",
+                children: HEADLINES[invalid.reason]
             }), 
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                 muted: !0,
                 size: 1,
                 children: remediation(invalid)
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(CopyDetailsButton, {
+                    unreadable: [ invalid ]
+                })
             }) ]
         })
     });
@@ -4301,6 +4664,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] = react.useState(!1), popover = {
+        tone: "default",
+        ...menuButtonProps.popover?.placement === void 0 ? {
+            placement: "bottom-end",
+            fallbackPlacements: [ "top-end" ]
+        } : {},
+        ...menuButtonProps.popover
+    };
+    return hint === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+        ...menuButtonProps,
+        popover: popover
+    }) : /* @__PURE__ */ jsxRuntime.jsx(HoverHint, {
+        disabled: open,
+        text: hint,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+            ...menuButtonProps,
+            onClose: () => setOpen(!1),
+            onOpen: () => setOpen(!0),
+            popover: popover
+        })
+    });
+}
+
 function subjectGdr(ctx) {
     return !ctx.subjectDocId || !ctx.mapping ? null : subjectGdrRef({
         mapping: ctx.mapping,
@@ -4348,6 +4735,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,
@@ -4355,7 +4746,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
 };
@@ -4373,7 +4765,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,
@@ -4398,14 +4797,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,
@@ -4884,6 +5277,58 @@ function StartWorkflowMenuItem({mapping: mapping, docId: docId, initialValue: in
     }) : item;
 }
 
+function settledDim(settled) {
+    return settled ? {
+        opacity: .66
+    } : void 0;
+}
+
+function ActivityStatusLead({status: status}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(HoverHint, {
+        text: ACTIVITY_STATUS_LABEL[status],
+        children: /* @__PURE__ */ jsxRuntime.jsx(ActivityStatusIcon, {
+            status: status
+        })
+    });
+}
+
+function ActivityRowTitle({dimmed: dimmed, children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ActionClusterProvider, {
+        value: lock,
+        children: rest.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ActivityActionRow, {
+            actionEval: only,
+            activity: activity,
+            chrome: {
+                mode: "ghost",
+                inButtonCard: !0
+            },
+            instanceId: instanceId
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ActionsMenuButton, {
+            actions: actions,
+            activity: activity,
+            inButtonCard: !0,
+            instanceId: instanceId,
+            label: "Select action"
+        })
+    }) : null;
+}
+
 function TitleTag({hint: hint, tone: tone, children: children}) {
     const badgeTrim = useBadgeCapTrim();
     /* @__PURE__ */
@@ -4897,57 +5342,37 @@ function TitleTag({hint: hint, tone: tone, children: children}) {
             },
             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 = workflowEngine.isTerminalActivityStatus(status), dimmed = settled ? {
-        opacity: .66
-    } : void 0;
-    let assignmentControl = null;
-    return assignField ? assignmentControl = /* @__PURE__ */ jsxRuntime.jsx(AssignActivityControl, {
-        assigneeIds: assigneeIds,
-        field: assignField,
-        instanceId: instanceId
-    }) : assigneeIds.length > 0 && (assignmentControl = /* @__PURE__ */ jsxRuntime.jsx(AvatarButton, {
-        "aria-label": "Assignees",
-        as: "span",
-        avatar: /* @__PURE__ */ jsxRuntime.jsx(UserAvatarGroup, {
-            ids: assigneeIds
-        })
-    })), 
-    /* @__PURE__ */ jsxRuntime.jsxs(WorkRow, {
+    });
+}
+
+function ActivityRow({face: face, breadcrumb: breadcrumb, assigneeIds: assigneeIds, assignState: assignState, dateControl: dateControl, instanceId: instanceId, onOpen: onOpen, terminalActions: terminalActions = []}) {
+    const settled = workflowEngine.isTerminalActivityStatus(face.status), dimmed = settledDim(settled);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(WorkRow, {
         end: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [ settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(TerminalActions, {
+            children: [ settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(RowTerminalActions, {
                 actions: terminalActions,
-                activity: activity.name,
-                inButtonCard: !0,
+                activity: face.activityName,
+                instanceId: instanceId
+            }), dateControl, 
+            /* @__PURE__ */ jsxRuntime.jsx(AssignActivityControl, {
+                assigneeIds: assigneeIds,
                 instanceId: instanceId,
-                mode: "ghost"
-            }), assignmentControl ]
+                state: assignState
+            }) ]
         }),
-        lead: 
-        /* @__PURE__ */ jsxRuntime.jsx(HoverHint, {
-            text: ACTIVITY_STATUS_LABEL[status],
-            children: /* @__PURE__ */ jsxRuntime.jsx(ActivityStatusIcon, {
-                status: status
-            })
+        lead: /* @__PURE__ */ jsxRuntime.jsx(ActivityStatusLead, {
+            status: face.status
         }),
         onOpen: onOpen,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            size: 1,
-            style: {
-                ...dimmed,
-                minWidth: 0
-            },
-            textOverflow: "ellipsis",
-            weight: "medium",
-            children: activityLabel(activity)
-        }), showsAutomatedPill(activityEval) ? /* @__PURE__ */ jsxRuntime.jsx(TitleTag, {
+        /* @__PURE__ */ jsxRuntime.jsx(ActivityRowTitle, {
+            dimmed: dimmed,
+            children: face.title
+        }), face.automated ? /* @__PURE__ */ jsxRuntime.jsx(TitleTag, {
             hint: "Completes on its own — no user action is needed",
             children: "Automated"
-        }) : null, showsBlockedTag(activityEval) ? /* @__PURE__ */ jsxRuntime.jsx(TitleTag, {
+        }) : null, face.blocked ? /* @__PURE__ */ jsxRuntime.jsx(TitleTag, {
             hint: "Nothing can be done on this activity right now — open it to see why",
             tone: "caution",
             children: "Blocked"
@@ -4988,7 +5413,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)
@@ -5032,33 +5456,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 jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        ...padding === void 0 ? {} : {
-            padding: padding
-        },
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
-            muted: !0
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: label
-        }) ]
-    });
-}
-
 function instanceNotice(entry) {
     const {instance: instance, committed: committed, evaluation: evaluation} = entry, state = workflowEngine.terminalState(instance);
     if (state !== "in-flight") 
@@ -5098,6 +5501,7 @@ const EDITOR_BY_KIND = {
     date: "scalar",
     datetime: "scalar",
     number: "scalar",
+    progress: "scalar",
     string: "scalar",
     text: "scalar",
     url: "scalar"
@@ -5160,9 +5564,16 @@ function faceOf(args) {
     } : workflowEngine.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 workflowComponents.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 : workflowEngine.findOpenStageEntry(instance)?.fields ?? [], entriesByName = new Map(entries.map(entry => [ entry.name, entry ])), editables = isEvaluationCurrent({
         committed: committed,
@@ -5303,6 +5714,15 @@ function SetFace({face: face}) {
         })
     }) : face.kind === "assignees" ? /* @__PURE__ */ jsxRuntime.jsx(AssigneesFace, {
         assignees: face.assignees
+    }) : face.kind === "progress" ? 
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+        size: 1,
+        style: {
+            fontVariantNumeric: "tabular-nums",
+            minWidth: "4ch",
+            textAlign: "right"
+        },
+        children: workflowComponents.progressCaption(face.value)
     }) : /* @__PURE__ */ jsxRuntime.jsx(FaceText, {
         children: face.kind === "text" ? face.text : ""
     });
@@ -5356,15 +5776,21 @@ function AssigneesFace({assignees: assignees}) {
     });
 }
 
-function usePillChrome() {
-    const {color: color} = ui.useTheme_v2();
+function usePillChrome(face) {
+    const {color: color} = ui.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
         }
     };
 }
@@ -5395,7 +5821,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 jsxRuntime.jsx(PillHint, {
         disabled: hintDisabled,
@@ -5428,7 +5854,23 @@ function useFieldCommit({entry: entry, editability: editability}) {
 function PillPopover({pill: pill, content: content2, open: open, onToggle: onToggle, onDismiss: onDismiss}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(DismissablePopover, {
-        content: content2,
+        content: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 1,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                padding: 3,
+                paddingBottom: 0,
+                style: {
+                    maxWidth: 360
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(FieldHead, {
+                    label: pill.title,
+                    ...pill.description === void 0 ? {} : {
+                        description: pill.description
+                    }
+                })
+            }), content2 ]
+        }),
         fallbackPlacements: [ "top-start" ],
         onDismiss: onDismiss,
         open: open,
@@ -5728,6 +6170,66 @@ function FieldPill({entry: entry, pill: pill, scope: scope}) {
     });
 }
 
+function Hairline({weight: weight, style: style}) {
+    const {color: color} = ui.useTheme_v2();
+    /* @__PURE__ */
+    return jsxRuntime.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] = react.useState(defaultOpen), verb = open ? "Collapse" : "Expand";
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 1,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "center",
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    "aria-label": `${verb} ${title}`,
+                    fontSize: 1,
+                    icon: open ? ChevronDown.ChevronDownIcon : ChevronRight.ChevronRightIcon,
+                    mode: "bleed",
+                    onClick: () => setOpen(v => !v),
+                    padding: 2
+                }), header ]
+            })
+        }), open ? children : null ]
+    });
+}
+
+function TrailingHairline() {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        flex: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Hairline, {
+            weight: .5
+        })
+    });
+}
+
 const HISTORY_KIND_GROUPS = {
     Stages: [ "stageEntered", "stageExited", "transitionFired", "aborted" ],
     Activities: [ "activityStatusChanged" ],
@@ -6050,8 +6552,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] = react.useState(!settled), title = instanceTitle(instance, definition), badgeTrim = useBadgeCapTrim(), status = /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsxs(ui.Flex, {
         align: "center",
         gap: 2,
         style: badgeTrim,
@@ -6061,60 +6563,46 @@ function InstanceAccordion({entry: entry, children: children}) {
         }), settled ? null : /* @__PURE__ */ jsxRuntime.jsx(OlderDefinitionBadge, {
             instance: instance
         }), !ready && entry.invalid === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
-            muted: !0
+            muted: !0,
+            size: 1
         }) : null ]
     });
     /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Stack, {
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-            style: {
-                position: "sticky",
-                top: 0,
-                zIndex: 1
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+    return jsxRuntime.jsx(CollapsibleBand, {
+        defaultOpen: defaultOpen ?? !settled,
+        title: title,
+        header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
                 align: "center",
-                gap: 1,
+                gap: 2,
+                paddingLeft: 2,
+                style: {
+                    minWidth: 0
+                },
                 children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                    flex: 1,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                        "aria-label": open ? `Collapse ${title}` : `Expand ${title}`,
-                        mode: "bleed",
-                        onClick: () => setOpen(v => !v),
-                        paddingX: 2,
-                        paddingY: 3,
-                        radius: 3,
-                        width: "fill",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                            align: "center",
-                            gap: 2,
-                            children: [ 
-                            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                                size: 1,
-                                children: open ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown.ChevronDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
-                            }), 
-                            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                                size: 1,
-                                weight: "medium",
-                                children: title
-                            }), status ]
-                        })
-                    })
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(InstanceDebugMenu, {
-                    entry: entry
-                }) ]
-            })
-        }), open ? 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    size: 1,
+                    style: {
+                        minWidth: 0
+                    },
+                    textOverflow: "ellipsis",
+                    weight: "medium",
+                    children: title
+                }), status ]
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(TrailingHairline, {}), 
+            /* @__PURE__ */ jsxRuntime.jsx(InstanceDebugMenu, {
+                entry: entry
+            }) ]
+        }),
+        sticky: !0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
             gap: 3,
             paddingBottom: 2,
             paddingLeft: 5,
             children: children
-        }) : null ]
+        })
     });
 }
 
@@ -6370,18 +6858,6 @@ const NODE_ICON = {
     done: CheckmarkCircle.CheckmarkCircleIcon
 };
 
-function Hairline({style: style}) {
-    const {color: color} = ui.useTheme_v2();
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
-        style: {
-            height: "1px",
-            background: color.border,
-            ...style
-        }
-    });
-}
-
 function WorkflowSpine({definition: definition, evaluation: evaluation, instance: instance}) {
     const nodes = deriveSpine({
         definition: definition,
@@ -6400,7 +6876,8 @@ function WorkflowSpine({definition: definition, evaluation: evaluation, instance
                 style: {
                     transform: "translateY(-0.5px)",
                     width: connectorWidth
-                }
+                },
+                weight: 1
             }) : null, 
             /* @__PURE__ */ jsxRuntime.jsx(SpineNodeView, {
                 definition: definition,
@@ -6505,7 +6982,9 @@ function StageOverviewCard({overview: overview}) {
             })
         }), hasLiveZone ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(Hairline, {}), 
+            /* @__PURE__ */ jsxRuntime.jsx(Hairline, {
+                weight: 1
+            }), 
             /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                 padding: 2,
                 children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
@@ -6558,31 +7037,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__ */ jsxRuntime.jsxs(ui.Text, {
+    const face = stampFace(stamp.kind === "entered" ? "Entered" : "Completed", stamp.at);
+    return face.detail === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
         muted: !0,
         size: 1,
-        children: [ verb, " ", absolute ]
+        children: face.lead
     }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
         gap: 3,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
             muted: !0,
             size: 1,
-            children: [ verb, " ", ago ]
+            children: face.lead
         }), 
         /* @__PURE__ */ jsxRuntime.jsx(ui.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 jsxRuntime.jsxs(InstanceAccordion, {
+        defaultOpen: defaultOpen,
         entry: entry,
         children: [ instance.ancestors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(PartOfBand, {
             instance: instance
@@ -6642,7 +7122,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__ */ jsxRuntime.jsx(ui.Box, {
         padding: 4,
@@ -6703,14 +7183,8 @@ const GROUP_GAP = 1;
 function useWorkflowsTab() {
     const {params: params, setParams: setParams} = structure.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))
     };
 }
 
@@ -6729,7 +7203,8 @@ function useOpenActivity(entries) {
 }
 
 function WorkflowsPanel({entries: entries, documentId: documentId, docTypeMappings: docTypeMappings, initialValue: initialValue}) {
-    const identity = useAssignmentIdentity(), panelId = react.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__ */ jsxRuntime.jsx(WorkflowInstanceSection, {
+    const identity = useAssignmentIdentity(), panelId = react.useId(), {params: params} = structure.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] = react.useState(() => focusedLanding(params?.[WORKFLOWS_FOCUS_PARAM], entries.map(e => e.instance._id))), assignedWorkUnknown = active.some(e => e.invalid !== void 0), sectionFor = e => /* @__PURE__ */ jsxRuntime.jsx(WorkflowInstanceSection, {
+        defaultOpen: landingDefaultOpen(landing, e.instance._id),
         entry: e,
         onOpenActivity: activityName => setOpenActivity({
             instanceId: e.instance._id,
@@ -7046,20 +7521,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" ];
@@ -7080,6 +7586,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) {
@@ -7130,10 +7687,10 @@ function InstanceEvaluator(props) {
 }
 
 function DiscoverySubscription(props) {
-    const {engine: engine, registered: registered, filter: filter, onSnapshot: onSnapshot} = props, {instances: instances, invalid: invalid} = workflowStudio.useWorkflowInstances({
+    const {engine: engine, registered: registered, filter: filter, onSnapshot: onSnapshot} = props, {instances: instances, unreadable: unreadable} = workflowStudio.useWorkflowInstances({
         engine: engine,
         filter: filter
-    });
+    }), invalid = unreadable[0];
     return react.useEffect(() => {
         onSnapshot({
             instances: instances,
@@ -7177,14 +7734,11 @@ function WorkflowProvider(props) {
         id: `${projectId}.${workflowDataset}`
     }), {ids: registered, acquire: register, release: unregister} = workflowReact.useRefcountedIds(), {ids: requested, acquire: requestInstance, release: releaseInstance} = workflowReact.useRefcountedIds(), [seeded, setSeeded] = react.useState(/* @__PURE__ */ new Map), seedInstance = react.useCallback(instance => {
         setSeeded(prev => new Map(prev).set(instance._id, instance));
-    }, []), [startRequest2, setStartRequest] = react.useState(void 0), openStartDialog = react.useCallback(r => setStartRequest(r), []), closeStartDialog = react.useCallback(() => setStartRequest(void 0), []), [reports, setReports] = react.useState(/* @__PURE__ */ new Map), onReport = react.useCallback((instanceId, report) => {
-        setReports(prev => nextReports(prev, {
-            instanceId: instanceId,
-            report: report
-        }));
-    }, []), reportsRef = react.useRef(reports);
-    reportsRef.current = reports;
-    const drainRef = react.useRef(void 0), drainCommitted = react.useCallback(async instanceId => {
+    }, []), [startRequest2, setStartRequest] = react.useState(void 0), openStartDialog = react.useCallback(r => setStartRequest(r), []), closeStartDialog = react.useCallback(() => setStartRequest(void 0), []), [entriesStore] = react.useState(createEntriesStore);
+    react.useEffect(() => () => entriesStore.dispose(), [ entriesStore ]);
+    const onReport = react.useCallback((instanceId, report) => {
+        entriesStore.report(instanceId, report);
+    }, [ entriesStore ]), drainRef = react.useRef(void 0), drainCommitted = react.useCallback(async instanceId => {
         try {
             await (drainRef.current?.(instanceId));
         } catch (err) {
@@ -7193,7 +7747,7 @@ function WorkflowProvider(props) {
             });
         }
     }, []), fireActionFor = react.useCallback((instanceId, args) => {
-        const report = reportsRef.current.get(instanceId);
+        const report = entriesStore.getReport(instanceId);
         return report ? report.fireAction({
             activity: args.activity,
             action: args.action,
@@ -7201,15 +7755,15 @@ function WorkflowProvider(props) {
                 params: args.params
             } : {}
         }).then(async res => (await drainCommitted(instanceId), res)) : notReady(args);
-    }, [ drainCommitted ]), editFieldFor = react.useCallback((instanceId, args) => {
-        const report = reportsRef.current.get(instanceId);
+    }, [ entriesStore, drainCommitted ]), editFieldFor = react.useCallback((instanceId, args) => {
+        const report = entriesStore.getReport(instanceId);
         return report ? report.editField(args).then(async res => (await drainCommitted(instanceId), 
         res)) : notReady(args);
-    }, [ drainCommitted ]), previewFieldFor = react.useCallback((instanceId, args) => {
-        reportsRef.current.get(instanceId)?.previewField(args);
-    }, []), discardFieldPreviewFor = react.useCallback((instanceId, target) => {
-        reportsRef.current.get(instanceId)?.discardFieldPreview(target);
-    }, []), drainEffectsFor = react.useCallback(async instanceId => {
+    }, [ entriesStore, drainCommitted ]), previewFieldFor = react.useCallback((instanceId, args) => {
+        entriesStore.getReport(instanceId)?.previewField(args);
+    }, [ entriesStore ]), discardFieldPreviewFor = react.useCallback((instanceId, target) => {
+        entriesStore.getReport(instanceId)?.discardFieldPreview(target);
+    }, [ entriesStore ]), drainEffectsFor = react.useCallback(async instanceId => {
         await engine.drainEffects({
             instanceId: instanceId
         });
@@ -7243,23 +7797,14 @@ function WorkflowProvider(props) {
             const kept = [ ...prev ].filter(([id]) => !discovered.has(id));
             return kept.length === prev.size ? prev : new Map(kept);
         });
-    }, [ discovered ]);
-    const byInstance = react.useMemo(() => mergeEntries({
-        seeded: seeded,
-        discovered: discovered,
-        reports: reports
-    }), [ discovered, seeded, reports ]), byDocument = react.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 = react.useCallback(docId => resolvedDocs.has(docId), [ resolvedDocs ]), schemaContentTypes = react.useMemo(() => new Set(contentDocumentTypes(schema)), [ schema ]), {issues: issues, starts: starts, fields: fields, latestVersions: latestVersions, autoStartByType: autoStartByType, autoStartDefinitions: autoStartDefinitions} = useDeployedDefinitions({
+    }, [ discovered ]), react.useLayoutEffect(() => {
+        entriesStore.setCommitted({
+            seeded: seeded,
+            discovered: discovered,
+            docIndex: docIndex
+        });
+    }, [ entriesStore, seeded, discovered, docIndex ]);
+    const isDocResolved = react.useCallback(docId => resolvedDocs.has(docId), [ resolvedDocs ]), schemaContentTypes = react.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,
@@ -7272,8 +7817,7 @@ function WorkflowProvider(props) {
         register: register,
         unregister: unregister,
         isDocResolved: isDocResolved,
-        byDocument: byDocument,
-        byInstance: byInstance,
+        entries: entriesStore,
         requestInstance: requestInstance,
         releaseInstance: releaseInstance,
         seedInstance: seedInstance,
@@ -7298,7 +7842,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 jsxRuntime.jsxs(WorkflowContext.Provider, {
         value: value,
@@ -8501,19 +9045,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} = structure.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} = structure.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 jsxRuntime.jsxs(ui.Stack, {
         gap: 4,
         children: [ invalid !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(InvalidDocNotice, {
             invalid: invalid
-        }) : null, active.length > 0 || resolved ? /* @__PURE__ */ jsxRuntime.jsx(StripLines, {
+        }) : null, active.length > 0 || finished.length > 0 || resolved ? /* @__PURE__ */ jsxRuntime.jsx(StripLines, {
             active: active,
             docId: docId,
+            finished: finished,
             initialValue: props.value ?? null,
             mappings: mappings,
             onOpen: openWorkflowsView,
@@ -8522,32 +9079,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 jsxRuntime.jsxs(ui.Stack, {
         gap: 1,
-        children: [ single !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(InstanceLine, {
-            entry: single,
-            onOpen: onOpen
-        }) : null, active.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(StripLine, {
-            aside: /* @__PURE__ */ jsxRuntime.jsx(TaskCountSpinner, {
-                entries: active
-            }),
-            hint: lineHint(identity, forMeWorkOf(active, identity)),
-            onOpen: onOpen,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                    size: 1,
-                    weight: "medium",
-                    children: [ active.length, " active workflows" ]
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(TaskCountText, {
-                entries: active
-            }) ]
-        }) : null, resolved ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+        children: [ active.map(entry => /* @__PURE__ */ jsxRuntime.jsx(InstanceLine, {
+            entry: entry,
+            onOpen: () => onOpen(entry.instance._id)
+        }, entry.instance._id)), finished.map(entry => /* @__PURE__ */ jsxRuntime.jsx(FinishedLine, {
+            entry: entry,
+            onOpen: () => onOpen(entry.instance._id)
+        }, entry.instance._id)), resolved ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
             children: /* @__PURE__ */ jsxRuntime.jsx(StartWorkflowControl, {
                 docId: docId,
                 initialValue: initialValue,
@@ -8601,7 +9143,7 @@ function InstanceLine({entry: entry, onOpen: onOpen}) {
     /* @__PURE__ */
     return jsxRuntime.jsxs(StripLine, {
         aside: unprimed ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(TaskCountSpinner, {
-            entries: [ entry ]
+            entry: entry
         }),
         hint: lineHint(identity, forMeWorkOf([ entry ], identity)),
         onOpen: onOpen,
@@ -8620,34 +9162,69 @@ function InstanceLine({entry: entry, onOpen: onOpen}) {
                 title: stageTitle(definition, entry.instance.currentStage)
             }), 
             /* @__PURE__ */ jsxRuntime.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 jsxRuntime.jsxs(StripLine, {
+        hint: finishedHint(instance),
+        onOpen: onOpen,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                weight: "medium",
+                children: instanceTitle(instance, definition)
+            })
+        }), workflowEngine.terminalState(instance) === "aborted" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            style: badgeTrim,
+            children: /* @__PURE__ */ jsxRuntime.jsx(AbortedBadge, {
+                instance: instance
+            })
+        }) : /* @__PURE__ */ jsxRuntime.jsx(StageFace, {
+            completed: !0,
+            title: stageTitle(definition, instance.currentStage)
+        }) ]
+    });
+}
+
+function finishedHint(instance) {
+    const verb = workflowEngine.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__ */ jsxRuntime.jsx(ui.Text, {
         muted: !0,
         size: 1,
@@ -8655,8 +9232,8 @@ function TaskCountText({entries: entries}) {
     });
 }
 
-function TaskCountSpinner({entries: entries}) {
-    return useTaskCountState(entries).kind !== "pending" ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+function TaskCountSpinner({entry: entry}) {
+    return useTaskCountState(entry).kind !== "pending" ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
         paddingLeft: 1,
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
             muted: !0,
@@ -8837,7 +9414,11 @@ exports.ActivitiesList = ActivitiesList;
 
 exports.ActivityDetailDialog = ActivityDetailDialog;
 
-exports.ActivityStatusIcon = ActivityStatusIcon;
+exports.ActivityRow = ActivityRow;
+
+exports.BreadcrumbTail = BreadcrumbTail;
+
+exports.CollapsibleBand = CollapsibleBand;
 
 exports.DismissablePopover = DismissablePopover;
 
@@ -8847,34 +9428,50 @@ exports.DocRefFace = DocRefFace;
 
 exports.GroupHeading = GroupHeading;
 
-exports.HintedMenuButton = HintedMenuButton;
-
 exports.HoverHint = HoverHint;
 
 exports.InvalidDocNotice = InvalidDocNotice;
 
+exports.LinkChip = LinkChip;
+
 exports.LoadingRow = LoadingRow;
 
 exports.StageChip = StageChip;
 
-exports.StageGlyph = StageGlyph;
+exports.StageFace = StageFace;
 
 exports.StaleLock = StaleLock;
 
+exports.TabSwitch = TabSwitch;
+
 exports.TodoItemsList = TodoItemsList;
 
-exports.UserAvatarGroup = UserAvatarGroup;
+exports.TrailingHairline = TrailingHairline;
+
+exports.UnreadableDocsNote = UnreadableDocsNote;
 
 exports.WorkflowStagePreview = WorkflowStagePreview;
 
+exports.activityRowProps = activityRowProps;
+
 exports.assigneeUserIdsOf = assigneeUserIdsOf;
 
+exports.committedRowFace = committedRowFace;
+
+exports.dateControlKind = dateControlKind;
+
+exports.dateControlValue = dateControlValue;
+
 exports.definitionSnapshotOf = definitionSnapshotOf;
 
 exports.describeError = describeError;
 
+exports.editTargetOf = editTargetOf;
+
 exports.findActivity = findActivity;
 
+exports.findActivityNode = findActivityNode;
+
 exports.formatDate = formatDate;
 
 exports.gdrLocality = gdrLocality;
@@ -8895,22 +9492,34 @@ exports.mappingForDocType = mappingForDocType;
 
 exports.openActivityGone = openActivityGone;
 
+exports.parseDateFieldValue = parseDateFieldValue;
+
 exports.parseStoredDateValue = parseStoredDateValue;
 
 exports.readDeployedDefinitions = readDeployedDefinitions;
 
+exports.rowAssignControlState = rowAssignControlState;
+
+exports.rowDateControlState = rowDateControlState;
+
+exports.serializeDateFieldValue = serializeDateFieldValue;
+
 exports.stageTitle = stageTitle;
 
 exports.stateByActivity = stateByActivity;
 
+exports.stopRowClick = stopRowClick;
+
+exports.stopRowMouseDown = stopRowMouseDown;
+
 exports.useAssignmentIdentity = useAssignmentIdentity;
 
 exports.useDefinition = useDefinition;
 
-exports.useDocLink = useDocLink;
-
 exports.useProjectMembers = useProjectMembers;
 
+exports.useSaveField = useSaveField;
+
 exports.useUserDisplays = useUserDisplays;
 
 exports.useWorkflowContext = useWorkflowContext;
@@ -8923,4 +9532,6 @@ exports.workflowDocTypes = workflowDocTypes;
 
 exports.workflowStudioPlugin = workflowStudioPlugin;
 
+exports.workflowsTabCodec = workflowsTabCodec;
+
 exports.workflowsView = workflowsView;