@sanity/workflow-studio-plugin 0.25.0 → 0.27.0

package/dist/_chunks-cjs/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), Timeline = require("@sanity/icons/Timeline"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), structure = require("sanity/structure"), workflowEngine = require("@sanity/workflow-engine"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), formatDistanceToNow = require("date-fns/formatDistanceToNow"), workflowComponents = require("@sanity/workflow-components"), csm = require("@sanity/client/csm"), telemetry = require("@sanity/telemetry"), workflowStudio = require("@sanity/workflow-studio"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), User = require("@sanity/icons/User"), Search = require("@sanity/icons/Search"), ChevronRight = require("@sanity/icons/ChevronRight"), 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"), ArrowUp = require("@sanity/icons/ArrowUp"), rxjs = require("rxjs"), operators = require("rxjs/operators"), Transfer = require("@sanity/icons/Transfer");
+var jsxRuntime = require("react/jsx-runtime"), Timeline = require("@sanity/icons/Timeline"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), structure = require("sanity/structure"), workflowEngine = require("@sanity/workflow-engine"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), formatDistanceToNow = require("date-fns/formatDistanceToNow"), workflowComponents = require("@sanity/workflow-components"), csm = require("@sanity/client/csm"), telemetry = require("@sanity/telemetry"), workflowStudio = require("@sanity/workflow-studio"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), User = require("@sanity/icons/User"), Search = require("@sanity/icons/Search"), ChevronRight = require("@sanity/icons/ChevronRight"), 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"), Ulist = require("@sanity/icons/Ulist"), CheckmarkCircle = require("@sanity/icons/CheckmarkCircle"), Bolt = require("@sanity/icons/Bolt"), ChevronDown = require("@sanity/icons/ChevronDown"), pluralize = require("pluralize-esm"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Clock = require("@sanity/icons/Clock"), Cog = require("@sanity/icons/Cog"), ArrowUp = require("@sanity/icons/ArrowUp"), rxjs = require("rxjs"), operators = require("rxjs/operators"), Transfer = require("@sanity/icons/Transfer");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -291,13 +291,7 @@ function landingDefaultOpen(landing, instanceId) {
     if (!(landing === void 0 || !landing.instanceIds.includes(instanceId))) return instanceId === landing.focusedId;
 }
 
-const WORKFLOWS_TOOL_NAME = "workflows";
-
-function workflowsToolAvailable(tools) {
-    return tools.some(tool => tool.name === WORKFLOWS_TOOL_NAME);
-}
-
-const WORKFLOW_INTENT = "workflow";
+const WORKFLOWS_TOOL_NAME = "workflows", WORKFLOW_INTENT = "workflow";
 
 function pathSegmentName(args) {
     return args.names.find(name => name === args.segment);
@@ -370,6 +364,10 @@ function describeEditDisabledReason(reason) {
     return editDisabledSentence[reason.kind](reason);
 }
 
+function reasonRestatesInstanceState(reason) {
+    return reason.kind === "instance-aborted" || reason.kind === "instance-completed";
+}
+
 function formatDateTime(value) {
     if (!value) return "—";
     const d = new Date(value);
@@ -688,6 +686,11 @@ function changedAssignee(current, next) {
     return next.find(item => !current.some(existing => workflowComponents.sameAssignee(item, existing))) ?? current.find(item => !next.some(existing => workflowComponents.sameAssignee(item, existing)));
 }
 
+function singleAssigneePick(current, next) {
+    const changed = changedAssignee(current ? [ current ] : [], next);
+    if (changed !== void 0) return current && workflowComponents.sameAssignee(changed, current) ? null : changed;
+}
+
 function isAssigneeShape(value) {
     if (typeof value != "object" || value === null) return !1;
     const {type: type, id: id, role: role} = value;
@@ -700,9 +703,19 @@ function isActorShape(value) {
     return typeof id != "string" ? !1 : roles === void 0 || Array.isArray(roles) && roles.every(r => typeof r == "string");
 }
 
-function assigneeUserIdsOf(entries) {
-    const ids = entries.flatMap(entry => entry._type === "assignees" ? entry.value.flatMap(a => a.type === "user" ? [ a.id ] : []) : entry._type === "assignee" ? entry.value?.type === "user" ? [ entry.value.id ] : [] : []);
-    return [ ...new Set(ids) ];
+function assigneesOf(entries) {
+    return entries.flatMap(entry => entry._type === "assignees" ? entry.value : []);
+}
+
+function assigneeEdit(current, next) {
+    const changed = changedAssignee(current, next);
+    if (changed !== void 0) return next.some(item => workflowComponents.sameAssignee(item, changed)) ? {
+        mode: "append",
+        value: changed
+    } : {
+        mode: "set",
+        value: next
+    };
 }
 
 function isItemAssignedTo(item, who) {
@@ -1032,7 +1045,7 @@ function activityRowProps(args) {
             blocked: showsBlockedTag(activityEval)
         },
         assignState: rowAssignControlState(controlArgs),
-        assigneeIds: assigneeUserIdsOf(state),
+        assignees: assigneesOf(state),
         dateState: rowDateControlState(controlArgs),
         dueDates: dueDatesOf(state),
         terminalActions: rowTerminalActions({
@@ -1340,7 +1353,9 @@ function projectMembersFrom(users) {
         sanityUserId: profile?.sanityUserId,
         displayName: profile?.displayName,
         email: profile?.email,
-        imageUrl: profile?.imageUrl ?? void 0
+        imageUrl: profile?.imageUrl ?? void 0,
+        loginProvider: workflowEngine.userLoginProvider(profile),
+        isCurrentUser: membership.isCurrentUser
     }));
     return projectMembersByUsers.set(users, members), members;
 }
@@ -1722,6 +1737,17 @@ function AssigneePicker({value: value, onChange: onChange}) {
     });
 }
 
+function SingleAssigneePicker({current: current, onPick: onPick}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(AssigneePicker, {
+        onChange: next => {
+            const picked = singleAssigneePick(current, next);
+            picked !== void 0 && onPick(picked);
+        },
+        value: current ? [ current ] : []
+    });
+}
+
 function MemberPickerButton({label: label = "Select member…", onChange: onChange, selectedIds: selectedIds, unassignRow: unassignRow = !1, value: value}) {
     const [open, setOpen] = react.useState(!1), {imageUrl: imageUrl} = useUserDisplay(value?.id ?? ""), selected = selectedIds ?? (value ? /* @__PURE__ */ new Set([ value.id ]) : /* @__PURE__ */ new Set), toggle = () => setOpen(v => !v);
     /* @__PURE__ */
@@ -1731,7 +1757,7 @@ function MemberPickerButton({label: label = "Select member…", onChange: onChan
                 setOpen(!1), onChange(member && !selected.has(member.id) ? {
                     id: member.id,
                     displayName: member.displayName,
-                    roles: member.roles
+                    roles: member.roles.map(role => role.name)
                 } : null);
             },
             selectedIds: selected,
@@ -2419,7 +2445,7 @@ function Separator() {
             alignItems: "center",
             display: "inline-flex",
             height: "0.7em",
-            margin: "0 0.25em",
+            margin: "0 0.5em",
             overflow: "hidden"
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
@@ -3538,18 +3564,18 @@ function ActorField({field: field, instanceId: instanceId, onSave: onSave, onUns
 }
 
 function useAssigneePick(args) {
-    const {current: current, onSave: onSave, onUnset: onUnset} = args, {saving: saving, save: save} = useSaveField({
+    const {onSave: onSave, onUnset: onUnset} = args, {saving: saving, save: save} = useSaveField({
         instanceId: args.instanceId
     });
     return {
         saving: saving,
-        pick: assignee => {
+        pick: picked => {
             if (!saving) {
-                if (current && workflowComponents.sameAssignee(assignee, current)) {
+                if (picked === null) {
                     onUnset !== void 0 && save(onUnset);
                     return;
                 }
-                save(() => onSave(assignee));
+                save(() => onSave(picked));
             }
         }
     };
@@ -3557,22 +3583,18 @@ function useAssigneePick(args) {
 
 function AssigneeField({field: field, instanceId: instanceId, onSave: onSave, onUnset: onUnset}) {
     const [open, setOpen] = react.useState(!1), cur = isAssigneeShape(field.value) ? field.value : null, {pick: pick} = useAssigneePick({
-        current: cur,
         instanceId: instanceId,
         onSave: onSave,
         onUnset: onUnset
-    }), pickAndClose = assignee => {
-        setOpen(!1), pick(assignee);
-    };
+    });
     return field.editable ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
         align: "center",
         children: /* @__PURE__ */ jsxRuntime.jsx(DismissablePopover, {
-            content: /* @__PURE__ */ jsxRuntime.jsx(AssigneePicker, {
-                onChange: next => {
-                    const changed = changedAssignee(cur ? [ cur ] : [], next);
-                    changed && pickAndClose(changed);
-                },
-                value: cur ? [ cur ] : []
+            content: /* @__PURE__ */ jsxRuntime.jsx(SingleAssigneePicker, {
+                current: cur,
+                onPick: picked => {
+                    setOpen(!1), pick(picked);
+                }
             }),
             onDismiss: () => setOpen(!1),
             open: open,
@@ -4121,70 +4143,85 @@ function AvatarButton({avatar: avatar, onClick: onClick, onMouseDown: onMouseDow
     });
 }
 
-function UserAvatar({id: id}) {
-    const {name: name, imageUrl: imageUrl} = useUserDisplay(id);
+function RowAssignees({assignees: assignees, hint: hint}) {
+    const ids = assignees.flatMap(item => item.type === "user" ? [ item.id ] : []), {members: members} = useProjectMembers(), roles = assignees.flatMap(item => item.type === "role" ? [ workflowComponents.memberRoleFor(members, item.role) ] : []), displays = useUserDisplays(ids);
+    if (ids.length === 0 && roles.length === 0) return null;
+    const bothKinds = roles.length > 0 && displays.length > 0;
     /* @__PURE__ */
     return jsxRuntime.jsx(HoverHint, {
-        text: name,
-        children: /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.MemberAvatar, {
-            imageUrl: imageUrl,
-            name: name
-        })
-    });
-}
-
-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, {
+        content: 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 3,
+            children: [ roles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(HintSection, {
+                names: roles.map(workflowComponents.roleLabel),
+                ...bothKinds ? {
+                    label: "Roles"
+                } : {}
+            }) : null, displays.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(HintSection, {
+                names: displays.map(display => display.name),
+                ...bothKinds ? {
+                    label: "Members"
+                } : {}
+            }) : null, hint === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: hint
+            }) ]
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.AssigneeStack, {
             members: displays.map(display => ({
                 id: display.id,
                 displayName: display.name,
                 imageUrl: display.imageUrl
-            }))
+            })),
+            roles: roles
         })
     });
 }
 
-function AssignActivityControl({instanceId: instanceId, state: state, surface: surface, assigneeIds: assigneeIds = []}) {
+function HintSection({label: label, names: names}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 2,
+        children: [ label === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            weight: "medium",
+            children: label
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            children: names.join(", ")
+        }) ]
+    });
+}
+
+function AssignActivityControl({instanceId: instanceId, state: state, surface: surface, assignees: assignees = []}) {
     const editField = useEditField(surface), report = useRejectionReport(), [open, setOpen] = react.useState(!1), [busy, setBusy] = react.useState(!1);
-    if (state.kind === "none") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AvatarDisplay, {
+    if (state.kind === "none") return assignees.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AvatarDisplay, {
         "aria-label": "Assignees",
-        avatar: /* @__PURE__ */ jsxRuntime.jsx(UserAvatarGroup, {
-            ids: assigneeIds
+        avatar: /* @__PURE__ */ jsxRuntime.jsx(RowAssignees, {
+            assignees: assignees
         })
     });
-    if (state.kind === "closed") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AvatarButton, {
+    if (state.kind === "closed") return assignees.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AvatarButton, {
         "aria-label": "Assignees",
         as: "span",
-        avatar: /* @__PURE__ */ jsxRuntime.jsx(UserAvatarGroup, {
-            hint: state.reason,
-            ids: assigneeIds
+        avatar: /* @__PURE__ */ jsxRuntime.jsx(RowAssignees, {
+            assignees: assignees,
+            hint: state.reason
         }),
         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)) {
+    const field = state.kind === "editable" ? state.field : void 0, current = field?.value ?? [], change = async next => {
+        const edit = assigneeEdit(current, next);
+        if (!(busy || field === void 0 || edit === void 0)) {
             setBusy(!0);
             try {
-                selectedIds.has(memberId) ? await editField({
-                    instanceId: instanceId,
-                    field: field,
-                    mode: "set",
-                    value: members.filter(m => !(m.type === "user" && m.id === memberId))
-                }) : await editField({
+                await editField({
                     instanceId: instanceId,
                     field: field,
-                    mode: "append",
-                    value: {
-                        type: "user",
-                        id: memberId
-                    }
+                    ...edit
                 }), report.dismiss(instanceToastId("assign", instanceId));
             } catch (err) {
                 report.rejected({
@@ -4200,12 +4237,12 @@ function AssignActivityControl({instanceId: instanceId, state: state, surface: s
         }
     }, handleClick = e => {
         e.stopPropagation(), setOpen(v => !v);
-    }, button = assigneeIds.length > 0 ? 
+    }, button = assignees.length > 0 ? 
     /* @__PURE__ */ jsxRuntime.jsx(AvatarButton, {
         "aria-label": "Assignees",
         as: "span",
-        avatar: /* @__PURE__ */ jsxRuntime.jsx(UserAvatarGroup, {
-            ids: assigneeIds
+        avatar: /* @__PURE__ */ jsxRuntime.jsx(RowAssignees, {
+            assignees: assignees
         }),
         onClick: handleClick,
         onMouseDown: stopRowMouseDown
@@ -4230,9 +4267,11 @@ function AssignActivityControl({instanceId: instanceId, state: state, surface: s
             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
+            }) : /* @__PURE__ */ jsxRuntime.jsx(AssigneePicker, {
+                onChange: next => {
+                    change(next);
+                },
+                value: current
             })
         }),
         onDismiss: () => setOpen(!1),
@@ -4264,6 +4303,58 @@ function canRemoveRow(args) {
     return editTarget === void 0 || appendTarget === void 0 ? !1 : editTarget.scope === appendTarget.scope && editTarget.field === appendTarget.field && editTarget.activity === appendTarget.activity;
 }
 
+function EmptyState({action: action, description: description, icon: icon, title: title}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Card, {
+        border: !0,
+        flex: 1,
+        padding: 4,
+        radius: 3,
+        style: {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 4,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                align: "center",
+                size: 4,
+                children: icon
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                gap: 3,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    align: "center",
+                    size: 1,
+                    weight: "medium",
+                    children: title
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    align: "center",
+                    muted: !0,
+                    size: 1,
+                    children: description
+                }) ]
+            }), action ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                justify: "center",
+                children: action
+            }) : null ]
+        })
+    });
+}
+
+function ForMeEmptyState() {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(EmptyState, {
+        description: "No activities or to-dos are assigned to you",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(CheckmarkCircle.CheckmarkCircleIcon, {}),
+        title: "Nothing to do!"
+    });
+}
+
 function looksLikeDefinition(value) {
     return typeof value == "object" && value !== null && Array.isArray(value.stages);
 }
@@ -4421,22 +4512,18 @@ function DueDateControl({item: item, editable: editable, onPatch: onPatch}) {
 }
 
 function AssigneeControl({item: item, editable: editable, onPatch: onPatch}) {
-    const [open, setOpen] = react.useState(!1), assignedId = item.assignee?.type === "user" ? item.assignee.id : void 0, chip = assignedId ? /* @__PURE__ */ jsxRuntime.jsx(UserAvatar, {
-        id: assignedId
+    const [open, setOpen] = react.useState(!1), current = item.assignee ?? null, chip = current ? /* @__PURE__ */ jsxRuntime.jsx(RowAssignees, {
+        assignees: [ current ]
     }) : null;
     return editable ? /* @__PURE__ */ jsxRuntime.jsx(DismissablePopover, {
         content: 
-        /* @__PURE__ */ jsxRuntime.jsx(MemberPicker, {
-            onSelect: member => {
+        /* @__PURE__ */ jsxRuntime.jsx(SingleAssigneePicker, {
+            current: current,
+            onPick: picked => {
                 setOpen(!1), onPatch({
-                    assignee: member && member.id !== assignedId ? {
-                        type: "user",
-                        id: member.id
-                    } : null
+                    assignee: picked
                 });
-            },
-            selectedIds: assignedId ? /* @__PURE__ */ new Set([ assignedId ]) : /* @__PURE__ */ new Set,
-            unassignRow: !0
+            }
         }),
         onDismiss: () => setOpen(!1),
         open: open,
@@ -4632,7 +4719,7 @@ function TodoItemRowView({breadcrumb: breadcrumb, row: row, onToggle: onToggle,
     });
 }
 
-function TodoItemsList({breadcrumb: breadcrumb, entry: entry, filter: filter, surface: surface}) {
+function TodoItemsList({breadcrumb: breadcrumb, entry: entry, filter: filter, showEmpty: showEmpty = !1, surface: surface}) {
     const {instance: instance} = entry, definition = useDefinition(entry), {editFieldFor: editFieldFor, fireActionFor: fireActionFor} = useWorkflowContext(), telemetry2 = workflowReact.useWorkflowTelemetry(), report = useRejectionReport(), [busy, setBusy] = react.useState(!1), derivation = deriveTodoItems(entry), rows = derivation.rows.filter(row => rowMatches(row, filter)), appendTarget = appendTargetFor(derivation.appendTargets, filter), run = async op => {
         if (busy) return !1;
         setBusy(!0);
@@ -4728,8 +4815,28 @@ function TodoItemsList({breadcrumb: breadcrumb, entry: entry, filter: filter, su
             kind: "remove",
             success: success
         });
-    };
-    if (rows.length === 0 && !appendTarget) return null;
+    }, empty = rows.length === 0;
+    if (empty && !showEmpty) return null;
+    const addControl = appendTarget ? /* @__PURE__ */ jsxRuntime.jsx(AddItemControl, {
+        busy: busy,
+        button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+            fontSize: 1,
+            icon: Add.AddIcon,
+            mode: "ghost",
+            padding: 2,
+            text: "Add item"
+        }),
+        onAdd: addItem
+    }) : null;
+    if (empty) /* @__PURE__ */
+    return jsxRuntime.jsx(EmptyState, {
+        ...addControl === null ? {} : {
+            action: addControl
+        },
+        description: "Nothing has been added to this list",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Ulist.UlistIcon, {}),
+        title: "No to-dos"
+    });
     const rowKey = row => `${row.scope}:${row.activityName ?? ""}:${row.fieldName}:${row.item._key}`, rowBreadcrumb = row => {
         if (breadcrumb === void 0 || row.activityName === void 0) return breadcrumb;
         const {title: title} = findActivity({
@@ -4763,19 +4870,9 @@ function TodoItemsList({breadcrumb: breadcrumb, entry: entry, filter: filter, su
                 },
                 row: row
             }, rowKey(row)))
-        }), appendTarget ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            children: /* @__PURE__ */ jsxRuntime.jsx(AddItemControl, {
-                busy: busy,
-                button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    fontSize: 1,
-                    icon: Add.AddIcon,
-                    mode: "ghost",
-                    padding: 2,
-                    text: "Add item"
-                }),
-                onAdd: addItem
-            })
-        }) : null ]
+        }), addControl === null ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            children: addControl
+        }) ]
     });
 }
 
@@ -5214,6 +5311,7 @@ function FieldRow({field: field, detail: detail, entry: entry, activityName: act
                 field: field.name,
                 activity: activityName
             },
+            showEmpty: !0,
             surface: "activity-dialog"
         }) ]
     });
@@ -5270,58 +5368,6 @@ function blockedNotice(detail) {
     });
 }
 
-function EmptyState({action: action, description: description, icon: icon, title: title}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
-        border: !0,
-        flex: 1,
-        padding: 4,
-        radius: 3,
-        style: {
-            alignItems: "center",
-            display: "flex",
-            justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            gap: 4,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                align: "center",
-                size: 4,
-                children: icon
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                gap: 3,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    align: "center",
-                    size: 1,
-                    weight: "medium",
-                    children: title
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    align: "center",
-                    muted: !0,
-                    size: 1,
-                    children: description
-                }) ]
-            }), action ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                justify: "center",
-                children: action
-            }) : null ]
-        })
-    });
-}
-
-function ForMeEmptyState() {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(EmptyState, {
-        description: "No activities or to-dos are assigned to you",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(CheckmarkCircle.CheckmarkCircleIcon, {}),
-        title: "Nothing to do!"
-    });
-}
-
 function CountedLabel({count: count, label: label}) {
     return count === void 0 || count === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: label
@@ -5522,17 +5568,13 @@ function TitleTag({hint: hint, tone: tone, children: children}) {
     });
 }
 
-function ActivityRow({face: face, breadcrumb: breadcrumb, assigneeIds: assigneeIds, assignState: assignState, dateState: dateState, dueDates: dueDates, instanceId: instanceId, onOpen: onOpen, surface: surface, terminalActions: terminalActions = []}) {
+function ActivityRow({face: face, breadcrumb: breadcrumb, assignees: assignees, assignState: assignState, dateState: dateState, dueDates: dueDates, instanceId: instanceId, onOpen: onOpen, surface: surface, 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(RowTerminalActions, {
-                actions: terminalActions,
-                activity: face.activityName,
-                instanceId: instanceId,
-                surface: surface
-            }), 
+        end: 
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(ActivityDateControl, {
                 dueDates: dueDates,
                 instanceId: instanceId,
@@ -5540,10 +5582,15 @@ function ActivityRow({face: face, breadcrumb: breadcrumb, assigneeIds: assigneeI
                 surface: surface
             }), 
             /* @__PURE__ */ jsxRuntime.jsx(AssignActivityControl, {
-                assigneeIds: assigneeIds,
+                assignees: assignees,
                 instanceId: instanceId,
                 state: assignState,
                 surface: surface
+            }), settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(RowTerminalActions, {
+                actions: terminalActions,
+                activity: face.activityName,
+                instanceId: instanceId,
+                surface: surface
             }) ]
         }),
         lead: /* @__PURE__ */ jsxRuntime.jsx(ActivityStatusLead, {
@@ -5767,6 +5814,35 @@ function deriveFieldPills(args) {
     });
 }
 
+function UserAvatar({id: id}) {
+    const {name: name, imageUrl: imageUrl} = useUserDisplay(id);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(HoverHint, {
+        text: name,
+        children: /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.MemberAvatar, {
+            imageUrl: imageUrl,
+            name: name
+        })
+    });
+}
+
+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,
+                displayName: display.name,
+                imageUrl: display.imageUrl
+            }))
+        })
+    });
+}
+
 function TodoFieldDialog({entry: entry, scope: scope, field: field, title: title, onClose: onClose}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Dialog, {
@@ -5783,6 +5859,7 @@ function TodoFieldDialog({entry: entry, scope: scope, field: field, title: title
                     scope: scope,
                     field: field
                 },
+                showEmpty: !0,
                 surface: "todo-field-dialog"
             })
         })
@@ -5900,12 +5977,24 @@ function PillContent({pill: pill}) {
         children: [ lead, 
         /* @__PURE__ */ jsxRuntime.jsx(FaceText, {
             muted: !0,
-            children: pill.editability?.editable === !0 ? `Set ${pill.title}` : pill.title
+            children: pill.title
         }) ]
     }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ lead, 
-        /* @__PURE__ */ jsxRuntime.jsx(SetFace, {
-            face: face
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(FaceText, {
+                muted: !0,
+                children: `${pill.title}:`
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(SetFace, {
+                face: face
+            }) ]
         }) ]
     });
 }
@@ -5925,7 +6014,7 @@ function AvatarCapAligned({children: children}) {
 }
 
 function AssigneesFace({assignees: assignees}) {
-    const userIds = assignees.flatMap(a => a.type === "user" ? [ a.id ] : []), roles = assignees.flatMap(a => a.type === "role" ? [ a.role ] : []);
+    const {members: members} = useProjectMembers(), userIds = assignees.flatMap(a => a.type === "user" ? [ a.id ] : []), roles = assignees.flatMap(a => a.type === "role" ? [ workflowComponents.roleLabelFor(members, a.role) ] : []);
     /* @__PURE__ */
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(AvatarCapAligned, {
@@ -5958,14 +6047,11 @@ function usePillChrome(face) {
 }
 
 function PillHint({pill: pill, disabled: disabled = !1, children: children}) {
+    const {description: description} = pill;
     /* @__PURE__ */
     return jsxRuntime.jsx(HoverHint, {
-        disabled: disabled,
-        text: pill.title,
-        textWeight: "medium",
-        ...pill.description === void 0 ? {} : {
-            description: pill.description
-        },
+        disabled: disabled || description === void 0,
+        text: description ?? "",
         children: children
     });
 }
@@ -6051,7 +6137,7 @@ function PillPopover({pill: pill, content: content2, open: open, onToggle: onTog
 }
 
 function ReadOnlyPill({pill: pill}) {
-    const [open, setOpen] = react.useState(!1), reason = pill.editability?.disabledReason;
+    const [open, setOpen] = react.useState(!1), verdict = pill.editability?.disabledReason, reason = verdict !== void 0 && reasonRestatesInstanceState(verdict) ? void 0 : verdict;
     /* @__PURE__ */
     return jsxRuntime.jsx(PillPopover, {
         content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
@@ -6234,19 +6320,17 @@ function AssigneePill({entry: entry, pill: pill, editability: editability, surfa
         editability: editability,
         surface: surface
     }), current = pill.entry?._type === "assignee" ? pill.entry.value : null, {pick: pick} = useAssigneePick({
-        current: current,
         instanceId: entry.instance._id,
         onSave: set,
         onUnset: unset
     });
     /* @__PURE__ */
     return jsxRuntime.jsx(PillPopover, {
-        content: /* @__PURE__ */ jsxRuntime.jsx(AssigneePicker, {
-            onChange: next => {
-                const changed = changedAssignee(current ? [ current ] : [], next);
-                changed && (setOpen(!1), pick(changed));
-            },
-            value: current ? [ current ] : []
+        content: /* @__PURE__ */ jsxRuntime.jsx(SingleAssigneePicker, {
+            current: current,
+            onPick: picked => {
+                setOpen(!1), pick(picked);
+            }
         }),
         onDismiss: () => setOpen(!1),
         onToggle: () => setOpen(v => !v),
@@ -6375,165 +6459,6 @@ function instanceBreadcrumb(instance, definition) {
     return [ instanceTitle(instance, definition), stageTitle(definition, instance.currentStage) ];
 }
 
-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, onToggle: onToggle, open: controlledOpen, sticky: sticky = !1, title: title}) {
-    const [heldOpen, setHeldOpen] = react.useState(defaultOpen), open = controlledOpen ?? heldOpen, toggle = onToggle ?? (() => setHeldOpen(value => !value)), 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") || toggle();
-            },
-            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: toggle,
-                    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
-        })
-    });
-}
-
-function InstanceAccordion({entry: entry, children: children, defaultOpen: defaultOpen}) {
-    const definition = useDefinition(entry), {instance: instance} = entry, settled = !isLiveEntry(entry), title = instanceTitle(instance, definition), badgeTrim = useBadgeCapTrim();
-    /* @__PURE__ */
-    return jsxRuntime.jsx(CollapsibleBand, {
-        defaultOpen: defaultOpen ?? !settled,
-        title: title,
-        header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                align: "center",
-                gap: 2,
-                paddingLeft: 2,
-                style: {
-                    minWidth: 0
-                },
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    size: 1,
-                    style: {
-                        minWidth: 0
-                    },
-                    textOverflow: "ellipsis",
-                    weight: "medium",
-                    children: title
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                    align: "center",
-                    gap: 2,
-                    style: badgeTrim,
-                    children: [ 
-                    /* @__PURE__ */ jsxRuntime.jsx(AbortedBadge, {
-                        instance: instance
-                    }), settled ? null : /* @__PURE__ */ jsxRuntime.jsx(OlderDefinitionBadge, {
-                        instance: instance
-                    }) ]
-                }) ]
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(TrailingHairline, {}) ]
-        }),
-        sticky: !0,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            paddingBottom: 2,
-            paddingLeft: 5,
-            children: children
-        })
-    });
-}
-
-function InstanceToolLink({entry: entry}) {
-    const {tools: tools} = sanity.useWorkspace(), instanceId = entry.instance._id, WorkflowIntentLink = react.useMemo(() => function(linkProps) {
-        /* @__PURE__ */
-        return jsxRuntime.jsx(router.IntentLink, {
-            ...linkProps,
-            intent: WORKFLOW_INTENT,
-            params: {
-                instanceId: instanceId
-            }
-        });
-    }, [ instanceId ]);
-    return workflowsToolAvailable(tools) ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-            as: WorkflowIntentLink,
-            fontSize: 1,
-            mode: "bleed",
-            padding: 2,
-            text: "View workflow details"
-        })
-    }) : null;
-}
-
-function PartOfBand({instance: instance}) {
-    const parentRef = instance.ancestors.at(-1), parentId = parentRef ? workflowEngine.toBareId(parentRef.id) : null, parentEntry = useWorkflowInstanceEntry(parentId), parentDefinition = useDefinition(parentEntry);
-    if (!parentId) return null;
-    const title = parentEntry ? instanceTitle(parentEntry.instance, parentDefinition) : parentId;
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
-        border: !0,
-        padding: 3,
-        radius: 3,
-        tone: "primary",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp.ArrowUpIcon, {})
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                size: 1,
-                children: [ "Part of ", 
-                /* @__PURE__ */ jsxRuntime.jsx("strong", {
-                    children: title
-                }) ]
-            }) ]
-        })
-    });
-}
-
 const UNCONDITIONAL_WHENS = /* @__PURE__ */ new Set([ "true", workflowEngine.DEFAULT_TRANSITION_WHEN ]);
 
 function stageRounds(instance) {
@@ -6593,6 +6518,31 @@ function nodeState(args) {
     return args.name === args.instance.currentStage ? "current" : args.visits === 0 ? "upcoming" : args.currentIndex >= 0 && args.index > args.currentIndex ? "revisit" : "done";
 }
 
+function roundDetail(round) {
+    return round === void 0 ? void 0 : `Round ${round}`;
+}
+
+function instanceStageFace(args) {
+    const {definition: definition, instance: instance} = args;
+    if (workflowEngine.isUnprimed(instance)) return;
+    const current = definition === void 0 ? void 0 : deriveSpine({
+        definition: definition,
+        instance: instance
+    }).find(node => node.state === "current");
+    if (current === void 0) return {
+        title: stageTitle(definition, instance.currentStage),
+        completed: workflowEngine.terminalState(instance) === "completed"
+    };
+    const detail = roundDetail(current.round);
+    return {
+        title: current.title,
+        completed: current.completedAt !== void 0,
+        ...detail === void 0 ? {} : {
+            detail: detail
+        }
+    };
+}
+
 function stageOverview(args) {
     const {definition: definition, node: node, transitions: transitions} = args, stage = definition.stages.find(s => s.name === node.name), advance = node.state === "current" ? advanceHint({
         definition: definition,
@@ -6659,97 +6609,878 @@ function advanceHint(args) {
     };
 }
 
-function conditionLines(description) {
-    return description.checklist.kind === "group" && description.checklist.op === "all" ? description.checklist.items.flatMap(item => workflowEngine.checklistLines({
-        ...description,
-        checklist: item
-    }, {
-        marks: !1
-    })) : workflowEngine.checklistLines(description, {
-        marks: !1
+function conditionLines(description) {
+    return description.checklist.kind === "group" && description.checklist.op === "all" ? description.checklist.items.flatMap(item => workflowEngine.checklistLines({
+        ...description,
+        checklist: item
+    }, {
+        marks: !1
+    })) : workflowEngine.checklistLines(description, {
+        marks: !1
+    });
+}
+
+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 StageGlyph(props) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs("svg", {
+        "data-sanity-icon": "stage",
+        fill: "none",
+        height: "1em",
+        viewBox: "0 0 25 25",
+        width: "1em",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx("path", {
+            d: "M14.7998 12.5C14.7998 11.2295 13.7705 10.2002 12.5 10.2002C11.2295 10.2002 10.2002 11.2295 10.2002 12.5C10.2002 13.7705 11.2295 14.7998 12.5 14.7998V16C10.5668 16 9 14.4332 9 12.5C9 10.5668 10.5668 9 12.5 9C14.4332 9 16 10.5668 16 12.5C16 14.4332 14.4332 16 12.5 16V14.7998C13.7705 14.7998 14.7998 13.7705 14.7998 12.5Z",
+            fill: "currentColor"
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx("path", {
+            d: "M4.5 12.5C4.5 12.1687 4.76863 11.9 5.1 11.9H9.5V13.1H5.1C4.76863 13.1 4.5 12.8314 4.5 12.5V12.5Z",
+            fill: "currentColor"
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx("path", {
+            d: "M15.5 11.9H19.9C20.2314 11.9 20.5 12.1687 20.5 12.5V12.5C20.5 12.8314 20.2314 13.1 19.9 13.1H15.5V11.9Z",
+            fill: "currentColor"
+        }) ]
+    });
+}
+
+function StageFace({completed: completed = !1, detail: detail, glyph: glyph = !0, title: title}) {
+    const tone = completed ? "default" : "primary";
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        as: "span",
+        gap: 2,
+        children: [ glyph ? /* @__PURE__ */ jsxRuntime.jsx(sanity.TextWithTone, {
+            size: 1,
+            tone: tone,
+            children: completed ? /* @__PURE__ */ jsxRuntime.jsx(CheckmarkCircleFilledIcon, {
+                style: {
+                    color: "inherit"
+                }
+            }) : /* @__PURE__ */ jsxRuntime.jsx(StageGlyph, {
+                style: {
+                    color: "inherit"
+                }
+            })
+        }) : null, 
+        /* @__PURE__ */ jsxRuntime.jsx(sanity.TextWithTone, {
+            size: 1,
+            tone: tone,
+            weight: "medium",
+            children: title
+        }), detail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: detail
+        }) ]
+    });
+}
+
+function StageChip({completed: completed = !1, detail: detail, interactive: interactive = !1, title: title}) {
+    const {color: color} = ui.useTheme_v2();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Card, {
+        padding: 3,
+        radius: 4,
+        style: {
+            boxShadow: `inset 0 0 0 1px ${completed ? color.badge.default.fg : color.focusRing}`,
+            cursor: interactive ? "help" : "default"
+        },
+        tone: completed ? "default" : "primary",
+        ...interactive ? {
+            tabIndex: 0
+        } : {},
+        children: /* @__PURE__ */ jsxRuntime.jsx(StageFace, {
+            completed: completed,
+            title: title,
+            ...detail === void 0 ? {} : {
+                detail: detail
+            }
+        })
+    });
+}
+
+function StartIncompleteBadge({style: style}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Badge, {
+        fontSize: 1,
+        mode: "outline",
+        style: style,
+        tone: "caution",
+        children: "Start incomplete"
+    });
+}
+
+function normalizeAbortReason(raw) {
+    const trimmed = raw.trim();
+    return trimmed === "" ? void 0 : trimmed;
+}
+
+function abortCommitReport(args) {
+    return args.changed ? {
+        outcome: "aborted",
+        toast: abortedToast(args.title)
+    } : {
+        outcome: "already-settled",
+        toast: abortAlreadySettledToast(args.title)
+    };
+}
+
+function abortedToast(title) {
+    return {
+        id: TOAST_ID.abort,
+        status: "info",
+        title: `Aborted “${title}”`
+    };
+}
+
+function abortAlreadySettledToast(title) {
+    return {
+        id: TOAST_ID.abort,
+        status: "info",
+        title: `“${title}” had already finished`,
+        description: "Nothing was aborted — the workflow reached a terminal state first."
+    };
+}
+
+function abortUnconfirmedToast(args) {
+    return {
+        id: TOAST_ID.abort,
+        status: "warning",
+        title: `Couldn’t confirm “${args.title}” was aborted`,
+        description: `${describeError(args.err)} — the abort may still have committed, so check the workflow’s state before trying again.`
+    };
+}
+
+function AbortWorkflowDialog({entry: entry, onClose: onClose}) {
+    const {engine: engine} = useWorkflowContext(), definition = useDefinition(entry), toast = useWorkflowToast(), telemetry2 = workflowReact.useWorkflowTelemetry(), [typedReason, setTypedReason] = react.useState(""), [pending, setPending] = react.useState(!1), {instance: instance} = entry, title = instanceTitle(instance, definition), reason = normalizeAbortReason(typedReason), reasonInputId = `abort-workflow-reason-${instance._id}`;
+    useLogEventOnMount(WorkflowAbortDialogOpened, {
+        instanceId: instance._id
+    });
+    const confirm = async () => {
+        if (reason === void 0) return;
+        const log = outcome => telemetry2.log(WorkflowAbortDialogSubmitted, {
+            instanceId: instance._id,
+            outcome: outcome
+        });
+        setPending(!0);
+        try {
+            const {changed: changed} = await engine.abortInstance({
+                instanceId: instance._id,
+                reason: reason
+            }), report = abortCommitReport({
+                title: title,
+                changed: changed
+            });
+            toast.push(report.toast), log(report.outcome), onClose();
+        } catch (err) {
+            toast.push(abortUnconfirmedToast({
+                title: title,
+                err: err
+            })), log("unconfirmed"), setPending(!1);
+        }
+    };
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Dialog, {
+        footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                gap: 2,
+                justify: "flex-end",
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    disabled: pending,
+                    fontSize: 1,
+                    mode: "bleed",
+                    onClick: onClose,
+                    padding: 2,
+                    text: "Cancel"
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    disabled: reason === void 0,
+                    fontSize: 1,
+                    loading: pending,
+                    onClick: () => {
+                        confirm();
+                    },
+                    padding: 2,
+                    text: "Abort workflow",
+                    tone: "critical"
+                }) ]
+            })
+        }),
+        header: "Abort workflow",
+        id: `abort-workflow-${instance._id}`,
+        onClose: () => {
+            pending || onClose();
+        },
+        width: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                gap: 5,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                    size: 1,
+                    children: [ "Abort the ", 
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", {
+                        children: title
+                    }), " workflow? This cannot be undone." ]
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        as: "label",
+                        htmlFor: reasonInputId,
+                        size: 1,
+                        weight: "medium",
+                        children: "Reason"
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
+                        autoFocus: !0,
+                        fontSize: 1,
+                        id: reasonInputId,
+                        onChange: event => setTypedReason(event.currentTarget.value),
+                        placeholder: "Why is this workflow being stopped?",
+                        value: typedReason
+                    }) ]
+                }) ]
+            })
+        })
+    });
+}
+
+function makeTitleResolver(definition) {
+    const activities = (definition?.stages ?? []).flatMap(s => s.activities ?? []);
+    return {
+        action: (activityName, actionName) => activities.find(t => t.name === activityName)?.actions?.find(a => a.name === actionName)?.title ?? actionName,
+        activity: name => activities.find(t => t.name === name)?.title ?? name,
+        stage: name => stageTitle(definition, name)
+    };
+}
+
+function attributed(actor, ...parts) {
+    if (actor) return {
+        actorId: actor.id,
+        parts: parts
+    };
+    const [first, ...rest] = parts;
+    return typeof first != "string" ? {
+        actorId: void 0,
+        parts: parts
+    } : {
+        actorId: void 0,
+        parts: [ first.charAt(0).toUpperCase() + first.slice(1), ...rest ]
+    };
+}
+
+function standalone(...parts) {
+    return {
+        actorId: void 0,
+        parts: parts
+    };
+}
+
+const historyLiner = {
+    stageEntered: (h, titles) => attributed(h.actor, `entered ${titles.stage(h.stage)}${h.fromStage ? ` from ${titles.stage(h.fromStage)}` : ""}`),
+    stageExited: (h, titles) => attributed(h.actor, `left ${titles.stage(h.stage)} for ${titles.stage(h.toStage)}`),
+    activityStatusChanged: (h, titles) => attributed(h.actor, `changed ${titles.activity(h.activity)}: ${h.from} → ${h.to}`),
+    actionFired: (h, titles) => {
+        const phrase = `fired ${titles.action(h.activity, h.action)} on ${titles.activity(h.activity)}`;
+        return h.triggered ? standalone(`The workflow ${phrase}`) : attributed(h.actor, phrase);
+    },
+    transitionFired: (h, titles) => attributed(h.actor, `moved ${titles.stage(h.fromStage)} → ${titles.stage(h.toStage)}`),
+    effectQueued: h => standalone("Effect ", {
+        code: h.effect
+    }, " queued"),
+    effectCompleted: h => {
+        const detail = h.detail ? ` — ${h.detail}` : "";
+        return h.actor ? attributed(h.actor, "resolved effect ", {
+            code: h.effect
+        }, ` — ${h.status}${detail}`) : standalone("Effect ", {
+            code: h.effect
+        }, ` ${h.status}${detail}`);
+    },
+    effectClaimReleased: h => attributed(h.actor, "released a stale claim on effect ", {
+        code: h.effect
+    }, ` ${h.via === "sweep" ? "via the sweeper" : "via a drain takeover"}`),
+    spawned: (h, titles) => attributed(h.actor, `spawned a child workflow from ${titles.activity(h.activity)}`),
+    subworkflowAdopted: (h, titles) => standalone(`Re-adopted child workflow into ${titles.activity(h.activity)} on re-entering ${titles.stage(h.stage)}`),
+    subworkflowResolved: (h, titles) => standalone(`Child workflow of ${titles.activity(h.activity)} ${h.status === "done" ? "completed" : "was aborted"}`),
+    subworkflowOrphaned: h => standalone(`Orphaned child workflow reached terminal — ${h.detail}`),
+    aborted: (h, titles) => attributed(h.actor, `aborted the workflow at ${titles.stage(h.stage)}${h.reason ? ` — ${h.reason}` : ""}`),
+    opApplied: (h, titles) => h.action ? attributed(h.actor, `changed state via action ${titles.action(h.activity ?? "", h.action)}`) : h.activity ? attributed(h.actor, `changed state via activity ${titles.activity(h.activity)}`) : attributed(h.actor, "changed state via ", {
+        code: h.opType
+    }),
+    fieldQueryDiscarded: h => standalone({
+        code: JSON.stringify(h)
+    })
+};
+
+function historyLine(h, titles) {
+    return historyLiner[h._type](h, titles);
+}
+
+function CodeChip({value: value}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx("code", {
+        style: {
+            overflowWrap: "anywhere"
+        },
+        children: value
+    });
+}
+
+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 historyWindow(args) {
+    const {entries: entries, expanded: expanded} = args;
+    return {
+        overflows: entries.length > 6,
+        shown: expanded ? entries : entries.slice(0, 6)
+    };
+}
+
+function PendingEffectRows({instance: instance, now: now}) {
+    const {drainEffectsFor: drainEffectsFor, completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = useWorkflowContext(), toast = useWorkflowToast(), [busy, setBusy] = react.useState(!1), pending = instance.pendingEffects ?? [];
+    if (pending.length === 0) return null;
+    const runRegistered = async () => {
+        setBusy(!0);
+        try {
+            await drainEffectsFor(instance._id), toast.push({
+                id: TOAST_ID.effectsDrain,
+                status: "info",
+                title: "Ran the registered handlers"
+            });
+        } catch (err) {
+            toast.push({
+                id: TOAST_ID.effectsDrain,
+                status: "error",
+                title: "Failed to run pending effects",
+                description: describeError(err)
+            });
+        } finally {
+            setBusy(!1);
+        }
+    }, resolve = async (effectKey, status) => {
+        setBusy(!0);
+        try {
+            await completeEffectFor(instance._id, {
+                effectKey: effectKey,
+                status: status,
+                detail: "Resolved in Studio"
+            }), toast.push({
+                id: TOAST_ID.effectResolve,
+                status: "info",
+                title: `Effect marked as ${status}`
+            });
+        } catch (err) {
+            toast.push({
+                id: TOAST_ID.effectResolve,
+                status: "error",
+                title: "Failed to resolve the effect",
+                description: describeError(err)
+            });
+        } finally {
+            setBusy(!1);
+        }
+    };
+    /* @__PURE__ */
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: pending.map(fx => /* @__PURE__ */ jsxRuntime.jsx(PendingEffectRow, {
+            busy: busy,
+            effect: fx,
+            instanceId: instance._id,
+            now: now,
+            onResolve: status => resolve(fx._key, status),
+            onRunHandlers: runRegistered,
+            registered: fx.name in effectHandlers
+        }, fx._key))
+    });
+}
+
+function PendingEffectRow({busy: busy, effect: effect, instanceId: instanceId, now: now, onResolve: onResolve, onRunHandlers: onRunHandlers, registered: registered}) {
+    const label = effect.title ?? effect.name, avatarSize = useAvatarSize();
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(FeedGlyph, {
+            hint: "Waiting to run",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Clock.ClockIcon, {})
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ effect.title ?? /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
+                        value: effect.name
+                    }), registered ? " — ready to run in Studio" : " — waiting for the runtime" ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(FeedStamp, {
+                at: effect.queuedAt,
+                now: now
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            flex: "none",
+            style: {
+                height: avatarSize
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(HintedMenuButton, {
+                button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    "aria-label": `Resolve ${label}`,
+                    disabled: busy,
+                    fontSize: 1,
+                    icon: EllipsisHorizontal.EllipsisHorizontalIcon,
+                    mode: "bleed",
+                    padding: 2
+                }),
+                hint: "Resolve",
+                id: `pending-effect-menu-${instanceId}-${effect._key}`,
+                menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+                    children: [ registered ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: onRunHandlers,
+                        text: "Run registered handlers"
+                    }) : null, 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: () => onResolve("done"),
+                        text: "Mark done"
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: () => onResolve("failed"),
+                        text: "Mark failed",
+                        tone: "critical"
+                    }) ]
+                }),
+                popover: {
+                    placement: "bottom-end",
+                    portal: !0
+                }
+            })
+        }) ]
+    });
+}
+
+function ActivityLog({instance: instance, definition: definition, windowed: windowed = !0}) {
+    const titles = react.useMemo(() => makeTitleResolver(definition), [ definition ]), entries = react.useMemo(() => instance.history.toReversed(), [ instance.history ]), [now, setNow] = react.useState(() => /* @__PURE__ */ new Date), [expanded, setExpanded] = react.useState(!1);
+    react.useEffect(() => {
+        const timer = setInterval(() => setNow(/* @__PURE__ */ new Date), 6e4);
+        return () => clearInterval(timer);
+    }, []);
+    const history = historyWindow({
+        entries: entries,
+        expanded: expanded || !windowed
+    });
+    return entries.length === 0 && (instance.pendingEffects ?? []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+        muted: !0,
+        size: 1,
+        children: "No activity yet"
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(PendingEffectRows, {
+            instance: instance,
+            now: now
+        }), history.shown.map(h => /* @__PURE__ */ jsxRuntime.jsx(HistoryRow, {
+            entry: h,
+            now: now,
+            titles: titles
+        }, h._key)), windowed && history.overflows ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                fontSize: 1,
+                mode: "bleed",
+                onClick: () => setExpanded(!expanded),
+                padding: 2,
+                text: expanded ? "Show less history" : "Show all history"
+            })
+        }) : null ]
+    });
+}
+
+function FeedStamp({at: at, now: now}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        flex: "none",
+        gap: 1,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: "·"
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(HoverHint, {
+            text: formatDateTime(at),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                style: {
+                    whiteSpace: "nowrap"
+                },
+                children: formatShortAgo(at, now)
+            })
+        }) ]
+    });
+}
+
+function HistoryRow({entry: entry, now: now, titles: titles}) {
+    const line = historyLine(entry, titles);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ line.actorId === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedGlyph, {
+            hint: "The workflow",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Cog.CogIcon, {})
+        }) : /* @__PURE__ */ jsxRuntime.jsx(UserAvatar, {
+            id: line.actorId
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ line.actorId === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ActorNameSpan, {
+                            id: line.actorId
+                        }), " " ]
+                    }), line.parts.map((part, index) => typeof part == "string" ? part : /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
+                        value: part.code
+                    }, index)) ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(FeedStamp, {
+                at: entry.at,
+                now: now
+            }) ]
+        }) ]
+    });
+}
+
+function ActorNameSpan({id: id}) {
+    const {name: name} = useUserDisplay(id), {font: font} = ui.useTheme_v2();
+    /* @__PURE__ */
+    return jsxRuntime.jsx("span", {
+        style: {
+            fontWeight: font.text.weights.medium
+        },
+        children: name
+    });
+}
+
+function FeedGlyph({hint: hint, icon: icon}) {
+    const size = useAvatarSize();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(HoverHint, {
+        text: hint,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            flex: "none",
+            justify: "center",
+            style: {
+                height: size,
+                width: size
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: icon
+            })
+        })
+    });
+}
+
+function InstanceHistoryDialog({entry: entry, onClose: onClose}) {
+    const definition = useDefinition(entry), {instance: instance} = entry;
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Dialog, {
+        header: /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, {
+            emphasizeCurrent: !0,
+            segments: [ instanceTitle(instance, definition), "History" ]
+        }),
+        id: `workflow-instance-history-${instance._id}`,
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ActivityLog, {
+                definition: definition,
+                instance: instance,
+                windowed: !1
+            })
+        })
+    });
+}
+
+function InstanceCardMenu({entry: entry, title: title}) {
+    const [dialog, setDialog] = react.useState(void 0), menuId = react.useId(), close = () => setDialog(void 0);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+            button: 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                "aria-label": `More options for ${title}`,
+                fontSize: 1,
+                icon: EllipsisHorizontal.EllipsisHorizontalIcon,
+                mode: "bleed",
+                padding: 2
+            }),
+            id: `workflow-instance-menu-${menuId}`,
+            menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                    onClick: () => setDialog("history"),
+                    text: "Workflow history"
+                }), isLiveEntry(entry) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: () => setDialog("abort"),
+                        text: "Abort workflow…",
+                        tone: "critical"
+                    }) ]
+                }) : null ]
+            }),
+            popover: {
+                placement: "bottom-end",
+                portal: !0
+            }
+        }), dialog === "history" ? /* @__PURE__ */ jsxRuntime.jsx(InstanceHistoryDialog, {
+            entry: entry,
+            onClose: close
+        }) : null, dialog === "abort" ? /* @__PURE__ */ jsxRuntime.jsx(AbortWorkflowDialog, {
+            entry: entry,
+            onClose: close
+        }) : null ]
+    });
+}
+
+function InstanceCard({entry: entry, children: children, defaultOpen: defaultOpen}) {
+    const definition = useDefinition(entry), {instance: instance} = entry, settled = !isLiveEntry(entry), [open, setOpen] = react.useState(defaultOpen ?? !settled), title = instanceTitle(instance, definition), menuSlot = useSpaceToken(2) * 2 + useTextIconSize();
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Card, {
+        border: !0,
+        overflow: "hidden",
+        radius: 4,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
+            style: {
+                position: "relative"
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+                "aria-expanded": open,
+                as: "button",
+                onClick: () => setOpen(value => !value),
+                padding: 3,
+                style: {
+                    display: "block",
+                    textAlign: "left",
+                    width: "100%"
+                },
+                ...open ? {
+                    tone: "transparent"
+                } : {},
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                    align: "center",
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        muted: !0,
+                        size: 1,
+                        children: open ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown.ChevronDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                        flex: 1,
+                        gap: 2,
+                        style: {
+                            minWidth: 0
+                        },
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            size: 1,
+                            textOverflow: "ellipsis",
+                            weight: "medium",
+                            children: title
+                        }), 
+                        /* @__PURE__ */ jsxRuntime.jsx(HeaderStage, {
+                            entry: entry
+                        }) ]
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                        align: "center",
+                        flex: "none",
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(HeaderBadges, {
+                            instance: instance,
+                            settled: settled
+                        }), 
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                            flex: "none",
+                            style: {
+                                width: menuSlot
+                            }
+                        }) ]
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                align: "center",
+                style: {
+                    bottom: 0,
+                    position: "absolute",
+                    right: 0,
+                    top: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                    paddingRight: 3,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(InstanceCardMenu, {
+                        entry: entry,
+                        title: title
+                    })
+                })
+            }) ]
+        }), open ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(Hairline, {
+                weight: 1
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                padding: 3,
+                children: children
+            }) ]
+        }) : null ]
     });
 }
 
-function StageGlyph(props) {
+function HeaderStage({entry: entry}) {
+    const definition = useDefinition(entry), badgeTrim = useBadgeCapTrim(), face = instanceStageFace({
+        definition: definition,
+        instance: entry.instance
+    });
     /* @__PURE__ */
-    return jsxRuntime.jsxs("svg", {
-        "data-sanity-icon": "stage",
-        fill: "none",
-        height: "1em",
-        viewBox: "0 0 25 25",
-        width: "1em",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx("path", {
-            d: "M14.7998 12.5C14.7998 11.2295 13.7705 10.2002 12.5 10.2002C11.2295 10.2002 10.2002 11.2295 10.2002 12.5C10.2002 13.7705 11.2295 14.7998 12.5 14.7998V16C10.5668 16 9 14.4332 9 12.5C9 10.5668 10.5668 9 12.5 9C14.4332 9 16 10.5668 16 12.5C16 14.4332 14.4332 16 12.5 16V14.7998C13.7705 14.7998 14.7998 13.7705 14.7998 12.5Z",
-            fill: "currentColor"
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("path", {
-            d: "M4.5 12.5C4.5 12.1687 4.76863 11.9 5.1 11.9H9.5V13.1H5.1C4.76863 13.1 4.5 12.8314 4.5 12.5V12.5Z",
-            fill: "currentColor"
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("path", {
-            d: "M15.5 11.9H19.9C20.2314 11.9 20.5 12.1687 20.5 12.5V12.5C20.5 12.8314 20.2314 13.1 19.9 13.1H15.5V11.9Z",
-            fill: "currentColor"
-        }) ]
+    return jsxRuntime.jsx(ui.Flex, {
+        align: "center",
+        children: face === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(StartIncompleteBadge, {
+            style: badgeTrim
+        }) : /* @__PURE__ */ jsxRuntime.jsx(StageFace, {
+            ...face.detail === void 0 ? {} : {
+                detail: face.detail
+            },
+            completed: face.completed,
+            glyph: !1,
+            title: face.title
+        })
     });
 }
 
-function StageFace({completed: completed = !1, detail: detail, title: title}) {
-    const tone = completed ? "default" : "primary";
+function HeaderBadges({instance: instance, settled: settled}) {
+    const badgeTrim = useBadgeCapTrim();
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Flex, {
         align: "center",
-        as: "span",
+        flex: "none",
         gap: 2,
+        style: badgeTrim,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(sanity.TextWithTone, {
-            size: 1,
-            tone: tone,
-            children: completed ? /* @__PURE__ */ jsxRuntime.jsx(CheckmarkCircleFilledIcon, {
-                style: {
-                    color: "inherit"
-                }
-            }) : /* @__PURE__ */ jsxRuntime.jsx(StageGlyph, {
-                style: {
-                    color: "inherit"
-                }
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(sanity.TextWithTone, {
-            size: 1,
-            tone: tone,
-            weight: "medium",
-            children: title
-        }), detail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: detail
+        /* @__PURE__ */ jsxRuntime.jsx(AbortedBadge, {
+            instance: instance
+        }), settled ? null : /* @__PURE__ */ jsxRuntime.jsx(OlderDefinitionBadge, {
+            instance: instance
         }) ]
     });
 }
 
-function StageChip({completed: completed = !1, detail: detail, interactive: interactive = !1, title: title}) {
-    const {color: color} = ui.useTheme_v2();
+function PartOfBand({instance: instance}) {
+    const parentRef = instance.ancestors.at(-1), parentId = parentRef ? workflowEngine.toBareId(parentRef.id) : null, parentEntry = useWorkflowInstanceEntry(parentId), parentDefinition = useDefinition(parentEntry);
+    if (!parentId) return null;
+    const title = parentEntry ? instanceTitle(parentEntry.instance, parentDefinition) : parentId;
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Card, {
+        border: !0,
         padding: 3,
-        radius: 4,
-        style: {
-            boxShadow: `inset 0 0 0 1px ${completed ? color.badge.default.fg : color.focusRing}`,
-            cursor: interactive ? "help" : "default"
-        },
-        tone: completed ? "default" : "primary",
-        ...interactive ? {
-            tabIndex: 0
-        } : {},
-        children: /* @__PURE__ */ jsxRuntime.jsx(StageFace, {
-            completed: completed,
-            title: title,
-            ...detail === void 0 ? {} : {
-                detail: detail
-            }
+        radius: 3,
+        tone: "primary",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            gap: 2,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp.ArrowUpIcon, {})
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                size: 1,
+                children: [ "Part of ", 
+                /* @__PURE__ */ jsxRuntime.jsx("strong", {
+                    children: title
+                }) ]
+            }) ]
         })
     });
 }
@@ -6796,20 +7527,23 @@ function SpineNodeView({definition: definition, node: node, transitions: transit
             transitions: transitions
         })
     });
-    if (node.state === "current") /* @__PURE__ */
-    return jsxRuntime.jsx(HoverHint, {
-        content: card,
-        "data-testid": `spine-node-${node.name}`,
-        flush: !0,
-        children: /* @__PURE__ */ jsxRuntime.jsx(StageChip, {
-            ...node.round === void 0 ? {} : {
-                detail: `Round ${node.round}`
-            },
-            completed: node.completedAt !== void 0,
-            interactive: !0,
-            title: node.title
-        })
-    });
+    if (node.state === "current") {
+        const detail = roundDetail(node.round);
+        /* @__PURE__ */
+        return jsxRuntime.jsx(HoverHint, {
+            content: card,
+            "data-testid": `spine-node-${node.name}`,
+            flush: !0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(StageChip, {
+                ...detail === void 0 ? {} : {
+                    detail: detail
+                },
+                completed: node.completedAt !== void 0,
+                interactive: !0,
+                title: node.title
+            })
+        });
+    }
     const Icon = NODE_ICON[node.state];
     /* @__PURE__ */
     return jsxRuntime.jsx(HoverHint, {
@@ -6960,20 +7694,13 @@ function StampLines({stamp: stamp}) {
 
 function WorkflowInstanceSection({defaultOpen: defaultOpen, entry: entry, onOpenActivity: onOpenActivity}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(InstanceAccordion, {
+    return jsxRuntime.jsx(InstanceCard, {
         defaultOpen: defaultOpen,
         entry: entry,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            gap: 3,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(InstanceSnapshotBody, {
-                entry: entry,
-                onOpenActivity: onOpenActivity,
-                surface: "document-view"
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(InstanceToolLink, {
-                entry: entry
-            }) ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(InstanceSnapshotBody, {
+            entry: entry,
+            onOpenActivity: onOpenActivity,
+            surface: "document-view"
         })
     });
 }
@@ -7000,7 +7727,9 @@ function InstanceSnapshotBody({entry: entry, onOpenActivity: onOpenActivity, sur
             /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
                 borderBottom: !0,
                 padding: 2,
-                tone: definition ? "neutral" : "caution",
+                ...definition ? {} : {
+                    tone: "caution"
+                },
                 children: definition ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowSpine, {
                     definition: definition,
                     evaluation: entry.evaluation,
@@ -7175,30 +7904,6 @@ 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,
@@ -8018,7 +8723,7 @@ function DiscoverySpinner() {
     });
 }
 
-const BOOT_CUE_DELAY_MS = 400, GROUP_GAP = 1;
+const BOOT_CUE_DELAY_MS = 400, GROUP_GAP = 2;
 
 function useWorkflowsTab() {
     const {params: params, setParams: setParams} = structure.usePaneRouter();
@@ -8899,27 +9604,19 @@ function logOnce(messages, logged) {
 }
 
 function AssigneesInput({value: value, onChange: onChange}) {
-    const {members: members} = useProjectMembers(), [membersOpen, setMembersOpen] = react.useState(!1), roles = react.useMemo(() => [ ...new Set(members.flatMap(m => m.roles)) ].toSorted(), [ members ]), userIds = react.useMemo(() => new Set(value.flatMap(a => a.type === "user" ? [ a.id ] : [])), [ value ]), add = a => {
-        value.some(x => workflowComponents.sameAssignee(x, a)) || onChange([ ...value, a ]);
-    }, remove = i => onChange(value.filter((_, idx) => idx !== i)), toggleUser = id => {
-        const user = {
-            type: "user",
-            id: id
-        };
-        userIds.has(id) ? onChange(value.filter(a => !workflowComponents.sameAssignee(a, user))) : add(user);
-    };
+    const [open, setOpen] = react.useState(!1), remove = index => onChange(value.filter((_, i) => i !== index));
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Stack, {
         gap: 2,
         children: [ value.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
             gap: 2,
             wrap: "wrap",
-            children: value.map((a, i) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            children: value.map((assignee, index) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
                 align: "center",
                 gap: 1,
                 children: [ 
                 /* @__PURE__ */ jsxRuntime.jsx(AssigneeBadge, {
-                    assignee: a
+                    assignee: assignee
                 }), 
                 /* @__PURE__ */ jsxRuntime.jsx(HoverHint, {
                     text: "Remove",
@@ -8928,60 +9625,33 @@ function AssigneesInput({value: value, onChange: onChange}) {
                         fontSize: 1,
                         icon: Close.CloseIcon,
                         mode: "bleed",
-                        onClick: () => remove(i),
+                        onClick: () => remove(index),
                         padding: 2
                     })
                 }) ]
-            }, a.type === "user" ? `user:${a.id}` : `role:${a.role}`))
+            }, assignee.type === "user" ? `user:${assignee.id}` : `role:${assignee.role}`))
         }) : null, 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
             align: "center",
             gap: 2,
             wrap: "wrap",
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(DismissablePopover, {
-                content: /* @__PURE__ */ jsxRuntime.jsx(MemberPicker, {
-                    onSelect: member => member && toggleUser(member.id),
-                    selectedIds: userIds
+            children: /* @__PURE__ */ jsxRuntime.jsx(DismissablePopover, {
+                content: /* @__PURE__ */ jsxRuntime.jsx(AssigneePicker, {
+                    onChange: next => onChange([ ...next ]),
+                    value: value
                 }),
-                onDismiss: () => setMembersOpen(!1),
-                open: membersOpen,
+                onDismiss: () => setOpen(!1),
+                open: open,
                 placement: "bottom-start",
                 children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
                     fontSize: 1,
                     icon: User.UserIcon,
                     mode: "ghost",
-                    onClick: () => setMembersOpen(v => !v),
-                    padding: 2,
-                    text: "Add member"
-                })
-            }), roles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
-                button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    fontSize: 1,
-                    icon: Add.AddIcon,
-                    mode: "ghost",
+                    onClick: () => setOpen(v => !v),
                     padding: 2,
-                    text: "Add role"
-                }),
-                id: "assignees-add-role",
-                menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
-                    style: {
-                        maxHeight: 280,
-                        overflowY: "auto"
-                    },
-                    children: roles.map(r => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-                        onClick: () => add({
-                            type: "role",
-                            role: r
-                        }),
-                        text: `Role: ${r}`
-                    }, r))
+                    text: "Assign"
                 })
-            }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: "No project roles found"
-            }) ]
+            })
         }) ]
     });
 }
@@ -9911,17 +10581,6 @@ function makePerspectiveBadge(documentId) {
     return WorkflowPerspectiveBadge;
 }
 
-function StartIncompleteBadge({style: style}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Badge, {
-        fontSize: 1,
-        mode: "outline",
-        style: style,
-        tone: "caution",
-        children: "Start incomplete"
-    });
-}
-
 const GLANCE_CAP = 3;
 
 function AssignedTasksHint({work: work}) {
@@ -10433,15 +11092,19 @@ function WorkflowRootInput(props) {
     });
 }
 
+exports.AbortWorkflowDialog = AbortWorkflowDialog;
+
 exports.ActivityDetailDialog = ActivityDetailDialog;
 
+exports.ActivityLog = ActivityLog;
+
 exports.ActivityRow = ActivityRow;
 
 exports.BreadcrumbTail = BreadcrumbTail;
 
 exports.CautionNote = CautionNote;
 
-exports.CollapsibleBand = CollapsibleBand;
+exports.CodeChip = CodeChip;
 
 exports.CountedLabel = CountedLabel;
 
@@ -10457,8 +11120,6 @@ exports.ForMeEmptyState = ForMeEmptyState;
 
 exports.Hairline = Hairline;
 
-exports.HintedMenuButton = HintedMenuButton;
-
 exports.HoverHint = HoverHint;
 
 exports.InstanceSnapshotBody = InstanceSnapshotBody;
@@ -10485,20 +11146,12 @@ exports.TOOL_TABS = TOOL_TABS;
 
 exports.TabSwitch = TabSwitch;
 
-exports.TrailingHairline = TrailingHairline;
-
 exports.UnreadableDocsNote = UnreadableDocsNote;
 
-exports.UserAvatar = UserAvatar;
-
 exports.WORKFLOW_API_VERSION = WORKFLOW_API_VERSION;
 
 exports.WORKFLOW_PAGE_TABS = WORKFLOW_PAGE_TABS;
 
-exports.WorkflowAbortDialogOpened = WorkflowAbortDialogOpened;
-
-exports.WorkflowAbortDialogSubmitted = WorkflowAbortDialogSubmitted;
-
 exports.WorkflowBoardWorkflowSelected = WorkflowBoardWorkflowSelected;
 
 exports.WorkflowDefinitionDetailViewed = WorkflowDefinitionDetailViewed;
@@ -10513,7 +11166,7 @@ exports.WorkflowToolOpened = WorkflowToolOpened;
 
 exports.activityRowProps = activityRowProps;
 
-exports.assigneeUserIdsOf = assigneeUserIdsOf;
+exports.assigneesOf = assigneesOf;
 
 exports.backToTabLabel = backToTabLabel;
 
@@ -10537,10 +11190,6 @@ exports.findActivityNode = findActivityNode;
 
 exports.formatDate = formatDate;
 
-exports.formatDateTime = formatDateTime;
-
-exports.formatShortAgo = formatShortAgo;
-
 exports.formatShortDateTime = formatShortDateTime;
 
 exports.formatTimeAgo = formatTimeAgo;
@@ -10591,8 +11240,6 @@ exports.toolTabState = toolTabState;
 
 exports.useAssignmentIdentity = useAssignmentIdentity;
 
-exports.useAvatarSize = useAvatarSize;
-
 exports.useBadgeCapTrim = useBadgeCapTrim;
 
 exports.useContainerToken = useContainerToken;
@@ -10607,8 +11254,6 @@ exports.useProjectMembers = useProjectMembers;
 
 exports.useSpaceToken = useSpaceToken;
 
-exports.useUserDisplay = useUserDisplay;
-
 exports.useUserDisplays = useUserDisplays;
 
 exports.useWorkflowContext = useWorkflowContext;