@sanity/workflow-studio-plugin 0.26.0 → 0.27.0

package/dist/_chunks-es/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
 import { TimelineIcon } from "@sanity/icons/Timeline";
 
-import { Popover, Tooltip, Box, Stack, Text, useClickOutsideEvent, Flex, TextInput, Button, Select, Checkbox, Autocomplete, Card, TextArea, useToast, Dialog, Switch, TextSkeleton, Code, useTheme_v2, Spinner, Badge, MenuButton, Menu, MenuItem, useElementSize, TabList, Tab, TabPanel } from "@sanity/ui";
+import { Popover, Tooltip, Box, Stack, Text, useClickOutsideEvent, Flex, TextInput, Button, Select, Checkbox, Autocomplete, Card, TextArea, useToast, Dialog, Switch, TextSkeleton, Code, useTheme_v2, Spinner, Badge, MenuButton, Menu, MenuItem, useElementSize, MenuDivider, TabList, Tab, TabPanel } from "@sanity/ui";
 
 import { editFieldTarget, useWorkflowTelemetry, useRefcountedIds } from "@sanity/workflow-react";
 
@@ -10,7 +10,7 @@ import { createContext, useContext, useEffect, useSyncExternalStore, useCallback
 
 import { usePaneRouter } from "sanity/structure";
 
-import { WORKFLOW_INSTANCE_TYPE, WORKFLOW_DEFINITION_TYPE, GUARD_DOC_TYPE, tryParseGdr, resourceFromParsed, latestDeployedDefinitions, isStartableDefinition, isSubjectEntry, isInputSourced, acceptsDocumentType, initialFieldIssues, gdrRef, releaseRef, refKindAcceptsTypes, rejectedRefTypes, ActionDisabledError, MutationGuardDeniedError, EditFieldDeniedError, errorMessage, terminalState, findOpenStageEntry, actionRendering, isTodoListEntry, isTodoListItem, isTerminalActivityStatus, describeCondition, sentenceCase, checklistLines, findCurrentActivityEntry, ENGINE_API_VERSION, scalarValidationIssues, classifyPrincipalId, toBareId, isSingleDocRefEntry, isGdr, resolveFieldEntry, isSingleDocRefKind, isNotesEntry, parseDefinitionSnapshot, isUnprimed, isTerminalStage, DEFAULT_TRANSITION_WHEN, instancesQuery, assertReadableModel, projectStartSliceRow, StartNotSettledError, StartNotAllowedError, humanize, unboundRequirementReads, explainStartRequirement, singleSubjectRequirementRefused, evaluateStartFilter, startKindOf, hasSingleSubjectRequirement, readsRootDocument, latestDefinitionsGroq, gdrFromResource, subscriptionDocumentsForInstance, aclPathForResource, definitionLookupGroq, instanceDocId, missingRequiredInputs, documentActionDenials } from "@sanity/workflow-engine";
+import { WORKFLOW_INSTANCE_TYPE, WORKFLOW_DEFINITION_TYPE, GUARD_DOC_TYPE, tryParseGdr, resourceFromParsed, latestDeployedDefinitions, isStartableDefinition, isSubjectEntry, isInputSourced, acceptsDocumentType, initialFieldIssues, gdrRef, releaseRef, refKindAcceptsTypes, rejectedRefTypes, ActionDisabledError, MutationGuardDeniedError, EditFieldDeniedError, errorMessage, terminalState, findOpenStageEntry, actionRendering, isTodoListEntry, isTodoListItem, isTerminalActivityStatus, describeCondition, sentenceCase, checklistLines, findCurrentActivityEntry, ENGINE_API_VERSION, scalarValidationIssues, classifyPrincipalId, userLoginProvider, toBareId, isSingleDocRefEntry, isGdr, resolveFieldEntry, isSingleDocRefKind, isNotesEntry, parseDefinitionSnapshot, isUnprimed, isTerminalStage, DEFAULT_TRANSITION_WHEN, instancesQuery, assertReadableModel, projectStartSliceRow, StartNotSettledError, StartNotAllowedError, humanize, unboundRequirementReads, explainStartRequirement, singleSubjectRequirementRefused, evaluateStartFilter, startKindOf, hasSingleSubjectRequirement, readsRootDocument, latestDefinitionsGroq, gdrFromResource, subscriptionDocumentsForInstance, aclPathForResource, definitionLookupGroq, instanceDocId, missingRequiredInputs, documentActionDenials } from "@sanity/workflow-engine";
 
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 
@@ -18,7 +18,7 @@ import { CloseIcon } from "@sanity/icons/Close";
 
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 
-import { sameAssignee, projectMemberRow, ClearableDatePicker, MemberPicker as MemberPicker$1, AssigneePicker as AssigneePicker$1, MemberAvatar, AssigneeBadges as AssigneeBadges$1, AssigneeBadge as AssigneeBadge$1, ProgressBar, MemberAvatarGroup, clampProgress, progressCaption, DatePicker, roleListLabel } from "@sanity/workflow-components";
+import { sameAssignee, projectMemberRow, ClearableDatePicker, AssigneePicker as AssigneePicker$1, MemberPicker as MemberPicker$1, MemberAvatar, AssigneeBadges as AssigneeBadges$1, AssigneeBadge as AssigneeBadge$1, ProgressBar, memberRoleFor, AssigneeStack, roleLabel, clampProgress, MemberAvatarGroup, progressCaption, DatePicker, roleLabelFor, roleListLabel } from "@sanity/workflow-components";
 
 import { getPublishedId, getDraftId } from "@sanity/client/csm";
 
@@ -60,15 +60,21 @@ import { RemoveCircleIcon } from "@sanity/icons/RemoveCircle";
 
 import { AddIcon } from "@sanity/icons/Add";
 
+import { UlistIcon } from "@sanity/icons/Ulist";
+
+import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
+
 import { BoltIcon } from "@sanity/icons/Bolt";
 
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 
-import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
+import pluralize from "pluralize-esm";
 
-import { UlistIcon } from "@sanity/icons/Ulist";
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
 
-import pluralize from "pluralize-esm";
+import { ClockIcon } from "@sanity/icons/Clock";
+
+import { CogIcon } from "@sanity/icons/Cog";
 
 import { ArrowUpIcon } from "@sanity/icons/ArrowUp";
 
@@ -359,13 +365,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);
@@ -438,6 +438,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);
@@ -756,6 +760,11 @@ function changedAssignee(current, next) {
     return next.find(item => !current.some(existing => sameAssignee(item, existing))) ?? current.find(item => !next.some(existing => sameAssignee(item, existing)));
 }
 
+function singleAssigneePick(current, next) {
+    const changed = changedAssignee(current ? [ current ] : [], next);
+    if (changed !== void 0) return current && sameAssignee(changed, current) ? null : changed;
+}
+
 function isAssigneeShape(value) {
     if (typeof value != "object" || value === null) return !1;
     const {type: type, id: id, role: role} = value;
@@ -768,9 +777,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 => sameAssignee(item, changed)) ? {
+        mode: "append",
+        value: changed
+    } : {
+        mode: "set",
+        value: next
+    };
 }
 
 function isItemAssignedTo(item, who) {
@@ -1100,7 +1119,7 @@ function activityRowProps(args) {
             blocked: showsBlockedTag(activityEval)
         },
         assignState: rowAssignControlState(controlArgs),
-        assigneeIds: assigneeUserIdsOf(state),
+        assignees: assigneesOf(state),
         dateState: rowDateControlState(controlArgs),
         dueDates: dueDatesOf(state),
         terminalActions: rowTerminalActions({
@@ -1408,7 +1427,9 @@ function projectMembersFrom(users) {
         sanityUserId: profile?.sanityUserId,
         displayName: profile?.displayName,
         email: profile?.email,
-        imageUrl: profile?.imageUrl ?? void 0
+        imageUrl: profile?.imageUrl ?? void 0,
+        loginProvider: userLoginProvider(profile),
+        isCurrentUser: membership.isCurrentUser
     }));
     return projectMembersByUsers.set(users, members), members;
 }
@@ -1790,6 +1811,17 @@ function AssigneePicker({value: value, onChange: onChange}) {
     });
 }
 
+function SingleAssigneePicker({current: current, onPick: onPick}) {
+    /* @__PURE__ */
+    return 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] = useState(!1), {imageUrl: imageUrl} = useUserDisplay(value?.id ?? ""), selected = selectedIds ?? (value ? /* @__PURE__ */ new Set([ value.id ]) : /* @__PURE__ */ new Set), toggle = () => setOpen(v => !v);
     /* @__PURE__ */
@@ -1799,7 +1831,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,
@@ -2487,7 +2519,7 @@ function Separator() {
             alignItems: "center",
             display: "inline-flex",
             height: "0.7em",
-            margin: "0 0.25em",
+            margin: "0 0.5em",
             overflow: "hidden"
         },
         children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
@@ -3606,18 +3638,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 && sameAssignee(assignee, current)) {
+                if (picked === null) {
                     onUnset !== void 0 && save(onUnset);
                     return;
                 }
-                save(() => onSave(assignee));
+                save(() => onSave(picked));
             }
         }
     };
@@ -3625,22 +3657,18 @@ function useAssigneePick(args) {
 
 function AssigneeField({field: field, instanceId: instanceId, onSave: onSave, onUnset: onUnset}) {
     const [open, setOpen] = 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__ */ jsx(Flex, {
         align: "center",
         children: /* @__PURE__ */ jsx(DismissablePopover, {
-            content: /* @__PURE__ */ jsx(AssigneePicker, {
-                onChange: next => {
-                    const changed = changedAssignee(cur ? [ cur ] : [], next);
-                    changed && pickAndClose(changed);
-                },
-                value: cur ? [ cur ] : []
+            content: /* @__PURE__ */ jsx(SingleAssigneePicker, {
+                current: cur,
+                onPick: picked => {
+                    setOpen(!1), pick(picked);
+                }
             }),
             onDismiss: () => setOpen(!1),
             open: open,
@@ -4189,70 +4217,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" ? [ 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 jsx(HoverHint, {
-        text: name,
-        children: /* @__PURE__ */ jsx(MemberAvatar, {
-            imageUrl: imageUrl,
-            name: name
-        })
-    });
-}
-
-function UserAvatarGroup({ids: ids, hint: hint}) {
-    const displays = useUserDisplays(ids);
-    return displays.length === 0 ? null : /* @__PURE__ */ jsx(HoverHint, {
-        text: displays.map(d => d.name).join(", "),
-        ...hint === void 0 ? {} : {
-            description: hint
-        },
-        children: /* @__PURE__ */ jsx(MemberAvatarGroup, {
+        content: 
+        /* @__PURE__ */ jsxs(Stack, {
+            gap: 3,
+            children: [ roles.length > 0 ? /* @__PURE__ */ jsx(HintSection, {
+                names: roles.map(roleLabel),
+                ...bothKinds ? {
+                    label: "Roles"
+                } : {}
+            }) : null, displays.length > 0 ? /* @__PURE__ */ jsx(HintSection, {
+                names: displays.map(display => display.name),
+                ...bothKinds ? {
+                    label: "Members"
+                } : {}
+            }) : null, hint === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: hint
+            }) ]
+        }),
+        children: /* @__PURE__ */ jsx(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 jsxs(Stack, {
+        gap: 2,
+        children: [ label === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            weight: "medium",
+            children: label
+        }), 
+        /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            children: names.join(", ")
+        }) ]
+    });
+}
+
+function AssignActivityControl({instanceId: instanceId, state: state, surface: surface, assignees: assignees = []}) {
     const editField = useEditField(surface), report = useRejectionReport(), [open, setOpen] = useState(!1), [busy, setBusy] = useState(!1);
-    if (state.kind === "none") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsx(AvatarDisplay, {
+    if (state.kind === "none") return assignees.length === 0 ? null : /* @__PURE__ */ jsx(AvatarDisplay, {
         "aria-label": "Assignees",
-        avatar: /* @__PURE__ */ jsx(UserAvatarGroup, {
-            ids: assigneeIds
+        avatar: /* @__PURE__ */ jsx(RowAssignees, {
+            assignees: assignees
         })
     });
-    if (state.kind === "closed") return assigneeIds.length === 0 ? null : /* @__PURE__ */ jsx(AvatarButton, {
+    if (state.kind === "closed") return assignees.length === 0 ? null : /* @__PURE__ */ jsx(AvatarButton, {
         "aria-label": "Assignees",
         as: "span",
-        avatar: /* @__PURE__ */ jsx(UserAvatarGroup, {
-            hint: state.reason,
-            ids: assigneeIds
+        avatar: /* @__PURE__ */ 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({
+                await editField({
                     instanceId: instanceId,
                     field: field,
-                    mode: "set",
-                    value: members.filter(m => !(m.type === "user" && m.id === memberId))
-                }) : await editField({
-                    instanceId: instanceId,
-                    field: field,
-                    mode: "append",
-                    value: {
-                        type: "user",
-                        id: memberId
-                    }
+                    ...edit
                 }), report.dismiss(instanceToastId("assign", instanceId));
             } catch (err) {
                 report.rejected({
@@ -4268,12 +4311,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__ */ jsx(AvatarButton, {
         "aria-label": "Assignees",
         as: "span",
-        avatar: /* @__PURE__ */ jsx(UserAvatarGroup, {
-            ids: assigneeIds
+        avatar: /* @__PURE__ */ jsx(RowAssignees, {
+            assignees: assignees
         }),
         onClick: handleClick,
         onMouseDown: stopRowMouseDown
@@ -4298,9 +4341,11 @@ function AssignActivityControl({instanceId: instanceId, state: state, surface: s
             children: state.kind === "loading" ? /* @__PURE__ */ jsx(LoadingRow, {
                 label: "Loading…",
                 padding: 3
-            }) : /* @__PURE__ */ jsx(MemberPicker, {
-                onSelect: member => member && void toggle(member.id),
-                selectedIds: selectedIds
+            }) : /* @__PURE__ */ jsx(AssigneePicker, {
+                onChange: next => {
+                    change(next);
+                },
+                value: current
             })
         }),
         onDismiss: () => setOpen(!1),
@@ -4332,6 +4377,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 jsx(Card, {
+        border: !0,
+        flex: 1,
+        padding: 4,
+        radius: 3,
+        style: {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            gap: 4,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                align: "center",
+                size: 4,
+                children: icon
+            }), 
+            /* @__PURE__ */ jsxs(Stack, {
+                gap: 3,
+                children: [ 
+                /* @__PURE__ */ jsx(Text, {
+                    align: "center",
+                    size: 1,
+                    weight: "medium",
+                    children: title
+                }), 
+                /* @__PURE__ */ jsx(Text, {
+                    align: "center",
+                    muted: !0,
+                    size: 1,
+                    children: description
+                }) ]
+            }), action ? /* @__PURE__ */ jsx(Flex, {
+                justify: "center",
+                children: action
+            }) : null ]
+        })
+    });
+}
+
+function ForMeEmptyState() {
+    /* @__PURE__ */
+    return jsx(EmptyState, {
+        description: "No activities or to-dos are assigned to you",
+        icon: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {}),
+        title: "Nothing to do!"
+    });
+}
+
 function looksLikeDefinition(value) {
     return typeof value == "object" && value !== null && Array.isArray(value.stages);
 }
@@ -4489,22 +4586,18 @@ function DueDateControl({item: item, editable: editable, onPatch: onPatch}) {
 }
 
 function AssigneeControl({item: item, editable: editable, onPatch: onPatch}) {
-    const [open, setOpen] = useState(!1), assignedId = item.assignee?.type === "user" ? item.assignee.id : void 0, chip = assignedId ? /* @__PURE__ */ jsx(UserAvatar, {
-        id: assignedId
+    const [open, setOpen] = useState(!1), current = item.assignee ?? null, chip = current ? /* @__PURE__ */ jsx(RowAssignees, {
+        assignees: [ current ]
     }) : null;
     return editable ? /* @__PURE__ */ jsx(DismissablePopover, {
         content: 
-        /* @__PURE__ */ jsx(MemberPicker, {
-            onSelect: member => {
+        /* @__PURE__ */ 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,
@@ -4700,7 +4793,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(), telemetry = useWorkflowTelemetry(), report = useRejectionReport(), [busy, setBusy] = 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);
@@ -4796,8 +4889,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__ */ jsx(AddItemControl, {
+        busy: busy,
+        button: /* @__PURE__ */ jsx(Button, {
+            fontSize: 1,
+            icon: AddIcon,
+            mode: "ghost",
+            padding: 2,
+            text: "Add item"
+        }),
+        onAdd: addItem
+    }) : null;
+    if (empty) /* @__PURE__ */
+    return jsx(EmptyState, {
+        ...addControl === null ? {} : {
+            action: addControl
+        },
+        description: "Nothing has been added to this list",
+        icon: /* @__PURE__ */ jsx(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({
@@ -4831,19 +4944,9 @@ function TodoItemsList({breadcrumb: breadcrumb, entry: entry, filter: filter, su
                 },
                 row: row
             }, rowKey(row)))
-        }), appendTarget ? /* @__PURE__ */ jsx(Flex, {
-            children: /* @__PURE__ */ jsx(AddItemControl, {
-                busy: busy,
-                button: /* @__PURE__ */ jsx(Button, {
-                    fontSize: 1,
-                    icon: AddIcon,
-                    mode: "ghost",
-                    padding: 2,
-                    text: "Add item"
-                }),
-                onAdd: addItem
-            })
-        }) : null ]
+        }), addControl === null ? null : /* @__PURE__ */ jsx(Flex, {
+            children: addControl
+        }) ]
     });
 }
 
@@ -5282,6 +5385,7 @@ function FieldRow({field: field, detail: detail, entry: entry, activityName: act
                 field: field.name,
                 activity: activityName
             },
+            showEmpty: !0,
             surface: "activity-dialog"
         }) ]
     });
@@ -5338,58 +5442,6 @@ function blockedNotice(detail) {
     });
 }
 
-function EmptyState({action: action, description: description, icon: icon, title: title}) {
-    /* @__PURE__ */
-    return jsx(Card, {
-        border: !0,
-        flex: 1,
-        padding: 4,
-        radius: 3,
-        style: {
-            alignItems: "center",
-            display: "flex",
-            justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsxs(Stack, {
-            gap: 4,
-            children: [ 
-            /* @__PURE__ */ jsx(Text, {
-                align: "center",
-                size: 4,
-                children: icon
-            }), 
-            /* @__PURE__ */ jsxs(Stack, {
-                gap: 3,
-                children: [ 
-                /* @__PURE__ */ jsx(Text, {
-                    align: "center",
-                    size: 1,
-                    weight: "medium",
-                    children: title
-                }), 
-                /* @__PURE__ */ jsx(Text, {
-                    align: "center",
-                    muted: !0,
-                    size: 1,
-                    children: description
-                }) ]
-            }), action ? /* @__PURE__ */ jsx(Flex, {
-                justify: "center",
-                children: action
-            }) : null ]
-        })
-    });
-}
-
-function ForMeEmptyState() {
-    /* @__PURE__ */
-    return jsx(EmptyState, {
-        description: "No activities or to-dos are assigned to you",
-        icon: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {}),
-        title: "Nothing to do!"
-    });
-}
-
 function CountedLabel({count: count, label: label}) {
     return count === void 0 || count === 0 ? /* @__PURE__ */ jsx(Fragment, {
         children: label
@@ -5590,17 +5642,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 = isTerminalActivityStatus(face.status), dimmed = settledDim(settled);
     /* @__PURE__ */
     return jsxs(WorkRow, {
-        end: /* @__PURE__ */ jsxs(Fragment, {
-            children: [ settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsx(RowTerminalActions, {
-                actions: terminalActions,
-                activity: face.activityName,
-                instanceId: instanceId,
-                surface: surface
-            }), 
+        end: 
+        /* @__PURE__ */ jsxs(Fragment, {
+            children: [ 
             /* @__PURE__ */ jsx(ActivityDateControl, {
                 dueDates: dueDates,
                 instanceId: instanceId,
@@ -5608,10 +5656,15 @@ function ActivityRow({face: face, breadcrumb: breadcrumb, assigneeIds: assigneeI
                 surface: surface
             }), 
             /* @__PURE__ */ jsx(AssignActivityControl, {
-                assigneeIds: assigneeIds,
+                assignees: assignees,
                 instanceId: instanceId,
                 state: assignState,
                 surface: surface
+            }), settled || terminalActions.length === 0 ? null : /* @__PURE__ */ jsx(RowTerminalActions, {
+                actions: terminalActions,
+                activity: face.activityName,
+                instanceId: instanceId,
+                surface: surface
             }) ]
         }),
         lead: /* @__PURE__ */ jsx(ActivityStatusLead, {
@@ -5835,6 +5888,35 @@ function deriveFieldPills(args) {
     });
 }
 
+function UserAvatar({id: id}) {
+    const {name: name, imageUrl: imageUrl} = useUserDisplay(id);
+    /* @__PURE__ */
+    return jsx(HoverHint, {
+        text: name,
+        children: /* @__PURE__ */ jsx(MemberAvatar, {
+            imageUrl: imageUrl,
+            name: name
+        })
+    });
+}
+
+function UserAvatarGroup({ids: ids, hint: hint}) {
+    const displays = useUserDisplays(ids);
+    return displays.length === 0 ? null : /* @__PURE__ */ jsx(HoverHint, {
+        text: displays.map(d => d.name).join(", "),
+        ...hint === void 0 ? {} : {
+            description: hint
+        },
+        children: /* @__PURE__ */ jsx(MemberAvatarGroup, {
+            members: displays.map(display => ({
+                id: display.id,
+                displayName: display.name,
+                imageUrl: display.imageUrl
+            }))
+        })
+    });
+}
+
 function TodoFieldDialog({entry: entry, scope: scope, field: field, title: title, onClose: onClose}) {
     /* @__PURE__ */
     return jsx(Dialog, {
@@ -5851,6 +5933,7 @@ function TodoFieldDialog({entry: entry, scope: scope, field: field, title: title
                     scope: scope,
                     field: field
                 },
+                showEmpty: !0,
                 surface: "todo-field-dialog"
             })
         })
@@ -5968,20 +6051,32 @@ function PillContent({pill: pill}) {
         children: [ lead, 
         /* @__PURE__ */ jsx(FaceText, {
             muted: !0,
-            children: pill.editability?.editable === !0 ? `Set ${pill.title}` : pill.title
+            children: pill.title
         }) ]
     }) : /* @__PURE__ */ jsxs(Fragment, {
         children: [ lead, 
-        /* @__PURE__ */ jsx(SetFace, {
-            face: face
-        }) ]
-    });
-}
-
-function AvatarCapAligned({children: children}) {
-    const trim = useAvatarCapTrim();
-    /* @__PURE__ */
-    return jsx(Flex, {
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(FaceText, {
+                muted: !0,
+                children: `${pill.title}:`
+            }), 
+            /* @__PURE__ */ jsx(SetFace, {
+                face: face
+            }) ]
+        }) ]
+    });
+}
+
+function AvatarCapAligned({children: children}) {
+    const trim = useAvatarCapTrim();
+    /* @__PURE__ */
+    return jsx(Flex, {
         align: "center",
         style: {
             marginBottom: trim,
@@ -5993,7 +6088,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" ? [ roleLabelFor(members, a.role) ] : []);
     /* @__PURE__ */
     return jsxs(Fragment, {
         children: [ userIds.length > 0 ? /* @__PURE__ */ jsx(AvatarCapAligned, {
@@ -6026,14 +6121,11 @@ function usePillChrome(face) {
 }
 
 function PillHint({pill: pill, disabled: disabled = !1, children: children}) {
+    const {description: description} = pill;
     /* @__PURE__ */
     return 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
     });
 }
@@ -6119,7 +6211,7 @@ function PillPopover({pill: pill, content: content, open: open, onToggle: onTogg
 }
 
 function ReadOnlyPill({pill: pill}) {
-    const [open, setOpen] = useState(!1), reason = pill.editability?.disabledReason;
+    const [open, setOpen] = useState(!1), verdict = pill.editability?.disabledReason, reason = verdict !== void 0 && reasonRestatesInstanceState(verdict) ? void 0 : verdict;
     /* @__PURE__ */
     return jsx(PillPopover, {
         content: /* @__PURE__ */ jsx(Box, {
@@ -6302,19 +6394,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 jsx(PillPopover, {
-        content: /* @__PURE__ */ jsx(AssigneePicker, {
-            onChange: next => {
-                const changed = changedAssignee(current ? [ current ] : [], next);
-                changed && (setOpen(!1), pick(changed));
-            },
-            value: current ? [ current ] : []
+        content: /* @__PURE__ */ jsx(SingleAssigneePicker, {
+            current: current,
+            onPick: picked => {
+                setOpen(!1), pick(picked);
+            }
         }),
         onDismiss: () => setOpen(!1),
         onToggle: () => setOpen(v => !v),
@@ -6443,165 +6533,6 @@ function instanceBreadcrumb(instance, definition) {
     return [ instanceTitle(instance, definition), stageTitle(definition, instance.currentStage) ];
 }
 
-function Hairline({weight: weight, style: style}) {
-    const {color: color} = useTheme_v2();
-    /* @__PURE__ */
-    return jsx("div", {
-        style: {
-            borderTop: `${weight}px solid ${color.border}`,
-            ...style
-        }
-    });
-}
-
-function CollapsibleBand({header: header, children: children, background: background = !1, defaultOpen: defaultOpen = !0, onToggle: onToggle, open: controlledOpen, sticky: sticky = !1, title: title}) {
-    const [heldOpen, setHeldOpen] = useState(defaultOpen), open = controlledOpen ?? heldOpen, toggle = onToggle ?? (() => setHeldOpen(value => !value)), verb = open ? "Collapse" : "Expand";
-    /* @__PURE__ */
-    return jsxs(Stack, {
-        gap: 1,
-        children: [ 
-        /* @__PURE__ */ jsx(Card, {
-            onDoubleClick: event => {
-                event.target instanceof Element && event.target.closest("a, button") || toggle();
-            },
-            padding: 1,
-            radius: 3,
-            style: {
-                userSelect: "none",
-                ...sticky ? {
-                    position: "sticky",
-                    top: 0,
-                    zIndex: 1
-                } : {}
-            },
-            tone: background ? "transparent" : "inherit",
-            children: /* @__PURE__ */ jsxs(Flex, {
-                align: "center",
-                children: [ 
-                /* @__PURE__ */ jsx(Button, {
-                    "aria-label": `${verb} ${title}`,
-                    fontSize: 1,
-                    icon: open ? ChevronDownIcon : ChevronRightIcon,
-                    mode: "bleed",
-                    onClick: toggle,
-                    padding: 2
-                }), header ]
-            })
-        }), open ? children : null ]
-    });
-}
-
-function TrailingHairline() {
-    /* @__PURE__ */
-    return jsx(Box, {
-        flex: 1,
-        paddingLeft: 1,
-        paddingRight: 1,
-        children: /* @__PURE__ */ 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 jsx(CollapsibleBand, {
-        defaultOpen: defaultOpen ?? !settled,
-        title: title,
-        header: /* @__PURE__ */ jsxs(Fragment, {
-            children: [ 
-            /* @__PURE__ */ jsxs(Flex, {
-                align: "center",
-                gap: 2,
-                paddingLeft: 2,
-                style: {
-                    minWidth: 0
-                },
-                children: [ 
-                /* @__PURE__ */ jsx(Text, {
-                    size: 1,
-                    style: {
-                        minWidth: 0
-                    },
-                    textOverflow: "ellipsis",
-                    weight: "medium",
-                    children: title
-                }), 
-                /* @__PURE__ */ jsxs(Flex, {
-                    align: "center",
-                    gap: 2,
-                    style: badgeTrim,
-                    children: [ 
-                    /* @__PURE__ */ jsx(AbortedBadge, {
-                        instance: instance
-                    }), settled ? null : /* @__PURE__ */ jsx(OlderDefinitionBadge, {
-                        instance: instance
-                    }) ]
-                }) ]
-            }), 
-            /* @__PURE__ */ jsx(TrailingHairline, {}) ]
-        }),
-        sticky: !0,
-        children: /* @__PURE__ */ jsx(Box, {
-            paddingBottom: 2,
-            paddingLeft: 5,
-            children: children
-        })
-    });
-}
-
-function InstanceToolLink({entry: entry}) {
-    const {tools: tools} = useWorkspace(), instanceId = entry.instance._id, WorkflowIntentLink = useMemo(() => function(linkProps) {
-        /* @__PURE__ */
-        return jsx(IntentLink, {
-            ...linkProps,
-            intent: WORKFLOW_INTENT,
-            params: {
-                instanceId: instanceId
-            }
-        });
-    }, [ instanceId ]);
-    return workflowsToolAvailable(tools) ? /* @__PURE__ */ jsx(Flex, {
-        children: /* @__PURE__ */ jsx(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 ? toBareId(parentRef.id) : null, parentEntry = useWorkflowInstanceEntry(parentId), parentDefinition = useDefinition(parentEntry);
-    if (!parentId) return null;
-    const title = parentEntry ? instanceTitle(parentEntry.instance, parentDefinition) : parentId;
-    /* @__PURE__ */
-    return jsx(Card, {
-        border: !0,
-        padding: 3,
-        radius: 3,
-        tone: "primary",
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsx(Text, {
-                size: 1,
-                children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
-            }), 
-            /* @__PURE__ */ jsxs(Text, {
-                size: 1,
-                children: [ "Part of ", 
-                /* @__PURE__ */ jsx("strong", {
-                    children: title
-                }) ]
-            }) ]
-        })
-    });
-}
-
 const UNCONDITIONAL_WHENS = /* @__PURE__ */ new Set([ "true", DEFAULT_TRANSITION_WHEN ]);
 
 function stageRounds(instance) {
@@ -6661,6 +6592,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 (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: 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,
@@ -6727,97 +6683,878 @@ function advanceHint(args) {
     };
 }
 
-function conditionLines(description) {
-    return description.checklist.kind === "group" && description.checklist.op === "all" ? description.checklist.items.flatMap(item => checklistLines({
-        ...description,
-        checklist: item
-    }, {
-        marks: !1
-    })) : checklistLines(description, {
-        marks: !1
+function conditionLines(description) {
+    return description.checklist.kind === "group" && description.checklist.op === "all" ? description.checklist.items.flatMap(item => checklistLines({
+        ...description,
+        checklist: item
+    }, {
+        marks: !1
+    })) : checklistLines(description, {
+        marks: !1
+    });
+}
+
+function Hairline({weight: weight, style: style}) {
+    const {color: color} = useTheme_v2();
+    /* @__PURE__ */
+    return jsx("div", {
+        style: {
+            borderTop: `${weight}px solid ${color.border}`,
+            ...style
+        }
+    });
+}
+
+function StageGlyph(props) {
+    /* @__PURE__ */
+    return 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__ */ 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__ */ 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__ */ 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 jsxs(Flex, {
+        align: "center",
+        as: "span",
+        gap: 2,
+        children: [ glyph ? /* @__PURE__ */ jsx(TextWithTone, {
+            size: 1,
+            tone: tone,
+            children: completed ? /* @__PURE__ */ jsx(CheckmarkCircleFilledIcon, {
+                style: {
+                    color: "inherit"
+                }
+            }) : /* @__PURE__ */ jsx(StageGlyph, {
+                style: {
+                    color: "inherit"
+                }
+            })
+        }) : null, 
+        /* @__PURE__ */ jsx(TextWithTone, {
+            size: 1,
+            tone: tone,
+            weight: "medium",
+            children: title
+        }), detail === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: detail
+        }) ]
+    });
+}
+
+function StageChip({completed: completed = !1, detail: detail, interactive: interactive = !1, title: title}) {
+    const {color: color} = useTheme_v2();
+    /* @__PURE__ */
+    return jsx(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__ */ jsx(StageFace, {
+            completed: completed,
+            title: title,
+            ...detail === void 0 ? {} : {
+                detail: detail
+            }
+        })
+    });
+}
+
+function StartIncompleteBadge({style: style}) {
+    /* @__PURE__ */
+    return jsx(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(), telemetry = useWorkflowTelemetry(), [typedReason, setTypedReason] = useState(""), [pending, setPending] = 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 => telemetry.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 jsx(Dialog, {
+        footer: /* @__PURE__ */ jsx(Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsxs(Flex, {
+                gap: 2,
+                justify: "flex-end",
+                children: [ 
+                /* @__PURE__ */ jsx(Button, {
+                    disabled: pending,
+                    fontSize: 1,
+                    mode: "bleed",
+                    onClick: onClose,
+                    padding: 2,
+                    text: "Cancel"
+                }), 
+                /* @__PURE__ */ jsx(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__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxs(Stack, {
+                gap: 5,
+                children: [ 
+                /* @__PURE__ */ jsxs(Text, {
+                    size: 1,
+                    children: [ "Abort the ", 
+                    /* @__PURE__ */ jsx("strong", {
+                        children: title
+                    }), " workflow? This cannot be undone." ]
+                }), 
+                /* @__PURE__ */ jsxs(Stack, {
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsx(Text, {
+                        as: "label",
+                        htmlFor: reasonInputId,
+                        size: 1,
+                        weight: "medium",
+                        children: "Reason"
+                    }), 
+                    /* @__PURE__ */ jsx(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 jsx("code", {
+        style: {
+            overflowWrap: "anywhere"
+        },
+        children: value
+    });
+}
+
+function HintedMenuButton({hint: hint, ...menuButtonProps}) {
+    const [open, setOpen] = useState(!1), popover = {
+        tone: "default",
+        ...menuButtonProps.popover?.placement === void 0 ? {
+            placement: "bottom-end",
+            fallbackPlacements: [ "top-end" ]
+        } : {},
+        ...menuButtonProps.popover
+    };
+    return hint === void 0 ? /* @__PURE__ */ jsx(MenuButton, {
+        ...menuButtonProps,
+        popover: popover
+    }) : /* @__PURE__ */ jsx(HoverHint, {
+        disabled: open,
+        text: hint,
+        children: /* @__PURE__ */ jsx(MenuButton, {
+            ...menuButtonProps,
+            onClose: () => setOpen(!1),
+            onOpen: () => setOpen(!0),
+            popover: popover
+        })
+    });
+}
+
+function 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] = 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 jsx(Fragment, {
+        children: pending.map(fx => /* @__PURE__ */ 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 jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(FeedGlyph, {
+            hint: "Waiting to run",
+            icon: /* @__PURE__ */ jsx(ClockIcon, {})
+        }), 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxs(Text, {
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ effect.title ?? /* @__PURE__ */ jsx(CodeChip, {
+                        value: effect.name
+                    }), registered ? " — ready to run in Studio" : " — waiting for the runtime" ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(FeedStamp, {
+                at: effect.queuedAt,
+                now: now
+            }) ]
+        }), 
+        /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            flex: "none",
+            style: {
+                height: avatarSize
+            },
+            children: /* @__PURE__ */ jsx(HintedMenuButton, {
+                button: /* @__PURE__ */ jsx(Button, {
+                    "aria-label": `Resolve ${label}`,
+                    disabled: busy,
+                    fontSize: 1,
+                    icon: EllipsisHorizontalIcon,
+                    mode: "bleed",
+                    padding: 2
+                }),
+                hint: "Resolve",
+                id: `pending-effect-menu-${instanceId}-${effect._key}`,
+                menu: /* @__PURE__ */ jsxs(Menu, {
+                    children: [ registered ? /* @__PURE__ */ jsx(MenuItem, {
+                        onClick: onRunHandlers,
+                        text: "Run registered handlers"
+                    }) : null, 
+                    /* @__PURE__ */ jsx(MenuItem, {
+                        onClick: () => onResolve("done"),
+                        text: "Mark done"
+                    }), 
+                    /* @__PURE__ */ jsx(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 = useMemo(() => makeTitleResolver(definition), [ definition ]), entries = useMemo(() => instance.history.toReversed(), [ instance.history ]), [now, setNow] = useState(() => /* @__PURE__ */ new Date), [expanded, setExpanded] = useState(!1);
+    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__ */ jsx(Text, {
+        muted: !0,
+        size: 1,
+        children: "No activity yet"
+    }) : /* @__PURE__ */ jsxs(Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(PendingEffectRows, {
+            instance: instance,
+            now: now
+        }), history.shown.map(h => /* @__PURE__ */ jsx(HistoryRow, {
+            entry: h,
+            now: now,
+            titles: titles
+        }, h._key)), windowed && history.overflows ? /* @__PURE__ */ jsx(Flex, {
+            children: /* @__PURE__ */ jsx(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 jsxs(Flex, {
+        align: "center",
+        flex: "none",
+        gap: 1,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "·"
+        }), 
+        /* @__PURE__ */ jsx(HoverHint, {
+            text: formatDateTime(at),
+            children: /* @__PURE__ */ jsx(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 jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ line.actorId === void 0 ? /* @__PURE__ */ jsx(FeedGlyph, {
+            hint: "The workflow",
+            icon: /* @__PURE__ */ jsx(CogIcon, {})
+        }) : /* @__PURE__ */ jsx(UserAvatar, {
+            id: line.actorId
+        }), 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxs(Text, {
+                    muted: !0,
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ line.actorId === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, {
+                        children: [ 
+                        /* @__PURE__ */ jsx(ActorNameSpan, {
+                            id: line.actorId
+                        }), " " ]
+                    }), line.parts.map((part, index) => typeof part == "string" ? part : /* @__PURE__ */ jsx(CodeChip, {
+                        value: part.code
+                    }, index)) ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(FeedStamp, {
+                at: entry.at,
+                now: now
+            }) ]
+        }) ]
+    });
+}
+
+function ActorNameSpan({id: id}) {
+    const {name: name} = useUserDisplay(id), {font: font} = useTheme_v2();
+    /* @__PURE__ */
+    return jsx("span", {
+        style: {
+            fontWeight: font.text.weights.medium
+        },
+        children: name
+    });
+}
+
+function FeedGlyph({hint: hint, icon: icon}) {
+    const size = useAvatarSize();
+    /* @__PURE__ */
+    return jsx(HoverHint, {
+        text: hint,
+        children: /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            flex: "none",
+            justify: "center",
+            style: {
+                height: size,
+                width: size
+            },
+            children: /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: icon
+            })
+        })
+    });
+}
+
+function InstanceHistoryDialog({entry: entry, onClose: onClose}) {
+    const definition = useDefinition(entry), {instance: instance} = entry;
+    /* @__PURE__ */
+    return jsx(Dialog, {
+        header: /* @__PURE__ */ jsx(Breadcrumb, {
+            emphasizeCurrent: !0,
+            segments: [ instanceTitle(instance, definition), "History" ]
+        }),
+        id: `workflow-instance-history-${instance._id}`,
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsx(ActivityLog, {
+                definition: definition,
+                instance: instance,
+                windowed: !1
+            })
+        })
+    });
+}
+
+function InstanceCardMenu({entry: entry, title: title}) {
+    const [dialog, setDialog] = useState(void 0), menuId = useId(), close = () => setDialog(void 0);
+    /* @__PURE__ */
+    return jsxs(Fragment, {
+        children: [ 
+        /* @__PURE__ */ jsx(MenuButton, {
+            button: 
+            /* @__PURE__ */ jsx(Button, {
+                "aria-label": `More options for ${title}`,
+                fontSize: 1,
+                icon: EllipsisHorizontalIcon,
+                mode: "bleed",
+                padding: 2
+            }),
+            id: `workflow-instance-menu-${menuId}`,
+            menu: /* @__PURE__ */ jsxs(Menu, {
+                children: [ 
+                /* @__PURE__ */ jsx(MenuItem, {
+                    onClick: () => setDialog("history"),
+                    text: "Workflow history"
+                }), isLiveEntry(entry) ? /* @__PURE__ */ jsxs(Fragment, {
+                    children: [ 
+                    /* @__PURE__ */ jsx(MenuDivider, {}), 
+                    /* @__PURE__ */ jsx(MenuItem, {
+                        onClick: () => setDialog("abort"),
+                        text: "Abort workflow…",
+                        tone: "critical"
+                    }) ]
+                }) : null ]
+            }),
+            popover: {
+                placement: "bottom-end",
+                portal: !0
+            }
+        }), dialog === "history" ? /* @__PURE__ */ jsx(InstanceHistoryDialog, {
+            entry: entry,
+            onClose: close
+        }) : null, dialog === "abort" ? /* @__PURE__ */ jsx(AbortWorkflowDialog, {
+            entry: entry,
+            onClose: close
+        }) : null ]
     });
 }
 
-function StageGlyph(props) {
+function InstanceCard({entry: entry, children: children, defaultOpen: defaultOpen}) {
+    const definition = useDefinition(entry), {instance: instance} = entry, settled = !isLiveEntry(entry), [open, setOpen] = useState(defaultOpen ?? !settled), title = instanceTitle(instance, definition), menuSlot = useSpaceToken(2) * 2 + useTextIconSize();
     /* @__PURE__ */
-    return 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,
+    return jsxs(Card, {
+        border: !0,
+        overflow: "hidden",
+        radius: 4,
         children: [ 
-        /* @__PURE__ */ 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__ */ 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__ */ 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"
-        }) ]
+        /* @__PURE__ */ jsxs(Box, {
+            style: {
+                position: "relative"
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(Card, {
+                "aria-expanded": open,
+                as: "button",
+                onClick: () => setOpen(value => !value),
+                padding: 3,
+                style: {
+                    display: "block",
+                    textAlign: "left",
+                    width: "100%"
+                },
+                ...open ? {
+                    tone: "transparent"
+                } : {},
+                children: /* @__PURE__ */ jsxs(Flex, {
+                    align: "center",
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsx(Text, {
+                        muted: !0,
+                        size: 1,
+                        children: open ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})
+                    }), 
+                    /* @__PURE__ */ jsxs(Stack, {
+                        flex: 1,
+                        gap: 2,
+                        style: {
+                            minWidth: 0
+                        },
+                        children: [ 
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 1,
+                            textOverflow: "ellipsis",
+                            weight: "medium",
+                            children: title
+                        }), 
+                        /* @__PURE__ */ jsx(HeaderStage, {
+                            entry: entry
+                        }) ]
+                    }), 
+                    /* @__PURE__ */ jsxs(Flex, {
+                        align: "center",
+                        flex: "none",
+                        children: [ 
+                        /* @__PURE__ */ jsx(HeaderBadges, {
+                            instance: instance,
+                            settled: settled
+                        }), 
+                        /* @__PURE__ */ jsx(Box, {
+                            flex: "none",
+                            style: {
+                                width: menuSlot
+                            }
+                        }) ]
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(Flex, {
+                align: "center",
+                style: {
+                    bottom: 0,
+                    position: "absolute",
+                    right: 0,
+                    top: 0
+                },
+                children: /* @__PURE__ */ jsx(Box, {
+                    paddingRight: 3,
+                    children: /* @__PURE__ */ jsx(InstanceCardMenu, {
+                        entry: entry,
+                        title: title
+                    })
+                })
+            }) ]
+        }), open ? /* @__PURE__ */ jsxs(Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsx(Hairline, {
+                weight: 1
+            }), 
+            /* @__PURE__ */ jsx(Box, {
+                padding: 3,
+                children: children
+            }) ]
+        }) : null ]
     });
 }
 
-function StageFace({completed: completed = !1, detail: detail, title: title}) {
-    const tone = completed ? "default" : "primary";
+function HeaderStage({entry: entry}) {
+    const definition = useDefinition(entry), badgeTrim = useBadgeCapTrim(), face = instanceStageFace({
+        definition: definition,
+        instance: entry.instance
+    });
+    /* @__PURE__ */
+    return jsx(Flex, {
+        align: "center",
+        children: face === void 0 ? /* @__PURE__ */ jsx(StartIncompleteBadge, {
+            style: badgeTrim
+        }) : /* @__PURE__ */ jsx(StageFace, {
+            ...face.detail === void 0 ? {} : {
+                detail: face.detail
+            },
+            completed: face.completed,
+            glyph: !1,
+            title: face.title
+        })
+    });
+}
+
+function HeaderBadges({instance: instance, settled: settled}) {
+    const badgeTrim = useBadgeCapTrim();
     /* @__PURE__ */
     return jsxs(Flex, {
         align: "center",
-        as: "span",
+        flex: "none",
         gap: 2,
+        style: badgeTrim,
         children: [ 
-        /* @__PURE__ */ jsx(TextWithTone, {
-            size: 1,
-            tone: tone,
-            children: completed ? /* @__PURE__ */ jsx(CheckmarkCircleFilledIcon, {
-                style: {
-                    color: "inherit"
-                }
-            }) : /* @__PURE__ */ jsx(StageGlyph, {
-                style: {
-                    color: "inherit"
-                }
-            })
-        }), 
-        /* @__PURE__ */ jsx(TextWithTone, {
-            size: 1,
-            tone: tone,
-            weight: "medium",
-            children: title
-        }), detail === void 0 ? null : /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: detail
+        /* @__PURE__ */ jsx(AbortedBadge, {
+            instance: instance
+        }), settled ? null : /* @__PURE__ */ jsx(OlderDefinitionBadge, {
+            instance: instance
         }) ]
     });
 }
 
-function StageChip({completed: completed = !1, detail: detail, interactive: interactive = !1, title: title}) {
-    const {color: color} = useTheme_v2();
+function PartOfBand({instance: instance}) {
+    const parentRef = instance.ancestors.at(-1), parentId = parentRef ? toBareId(parentRef.id) : null, parentEntry = useWorkflowInstanceEntry(parentId), parentDefinition = useDefinition(parentEntry);
+    if (!parentId) return null;
+    const title = parentEntry ? instanceTitle(parentEntry.instance, parentDefinition) : parentId;
     /* @__PURE__ */
     return jsx(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__ */ jsx(StageFace, {
-            completed: completed,
-            title: title,
-            ...detail === void 0 ? {} : {
-                detail: detail
-            }
+        radius: 3,
+        tone: "primary",
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 2,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+            }), 
+            /* @__PURE__ */ jsxs(Text, {
+                size: 1,
+                children: [ "Part of ", 
+                /* @__PURE__ */ jsx("strong", {
+                    children: title
+                }) ]
+            }) ]
         })
     });
 }
@@ -6864,20 +7601,23 @@ function SpineNodeView({definition: definition, node: node, transitions: transit
             transitions: transitions
         })
     });
-    if (node.state === "current") /* @__PURE__ */
-    return jsx(HoverHint, {
-        content: card,
-        "data-testid": `spine-node-${node.name}`,
-        flush: !0,
-        children: /* @__PURE__ */ 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 jsx(HoverHint, {
+            content: card,
+            "data-testid": `spine-node-${node.name}`,
+            flush: !0,
+            children: /* @__PURE__ */ 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 jsx(HoverHint, {
@@ -7028,20 +7768,13 @@ function StampLines({stamp: stamp}) {
 
 function WorkflowInstanceSection({defaultOpen: defaultOpen, entry: entry, onOpenActivity: onOpenActivity}) {
     /* @__PURE__ */
-    return jsx(InstanceAccordion, {
+    return jsx(InstanceCard, {
         defaultOpen: defaultOpen,
         entry: entry,
-        children: /* @__PURE__ */ jsxs(Stack, {
-            gap: 3,
-            children: [ 
-            /* @__PURE__ */ jsx(InstanceSnapshotBody, {
-                entry: entry,
-                onOpenActivity: onOpenActivity,
-                surface: "document-view"
-            }), 
-            /* @__PURE__ */ jsx(InstanceToolLink, {
-                entry: entry
-            }) ]
+        children: /* @__PURE__ */ jsx(InstanceSnapshotBody, {
+            entry: entry,
+            onOpenActivity: onOpenActivity,
+            surface: "document-view"
         })
     });
 }
@@ -7068,7 +7801,9 @@ function InstanceSnapshotBody({entry: entry, onOpenActivity: onOpenActivity, sur
             /* @__PURE__ */ jsx(Card, {
                 borderBottom: !0,
                 padding: 2,
-                tone: definition ? "neutral" : "caution",
+                ...definition ? {} : {
+                    tone: "caution"
+                },
                 children: definition ? /* @__PURE__ */ jsx(WorkflowSpine, {
                     definition: definition,
                     evaluation: entry.evaluation,
@@ -7243,30 +7978,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] = useState(!1), popover = {
-        tone: "default",
-        ...menuButtonProps.popover?.placement === void 0 ? {
-            placement: "bottom-end",
-            fallbackPlacements: [ "top-end" ]
-        } : {},
-        ...menuButtonProps.popover
-    };
-    return hint === void 0 ? /* @__PURE__ */ jsx(MenuButton, {
-        ...menuButtonProps,
-        popover: popover
-    }) : /* @__PURE__ */ jsx(HoverHint, {
-        disabled: open,
-        text: hint,
-        children: /* @__PURE__ */ jsx(MenuButton, {
-            ...menuButtonProps,
-            onClose: () => setOpen(!1),
-            onOpen: () => setOpen(!0),
-            popover: popover
-        })
-    });
-}
-
 function subjectGdr(ctx) {
     return !ctx.subjectDocId || !ctx.mapping ? null : subjectGdrRef({
         mapping: ctx.mapping,
@@ -8086,7 +8797,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} = usePaneRouter();
@@ -8966,27 +9677,19 @@ function logOnce(messages, logged) {
 }
 
 function AssigneesInput({value: value, onChange: onChange}) {
-    const {members: members} = useProjectMembers(), [membersOpen, setMembersOpen] = useState(!1), roles = useMemo(() => [ ...new Set(members.flatMap(m => m.roles)) ].toSorted(), [ members ]), userIds = useMemo(() => new Set(value.flatMap(a => a.type === "user" ? [ a.id ] : [])), [ value ]), add = a => {
-        value.some(x => 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 => !sameAssignee(a, user))) : add(user);
-    };
+    const [open, setOpen] = useState(!1), remove = index => onChange(value.filter((_, i) => i !== index));
     /* @__PURE__ */
     return jsxs(Stack, {
         gap: 2,
         children: [ value.length > 0 ? /* @__PURE__ */ jsx(Flex, {
             gap: 2,
             wrap: "wrap",
-            children: value.map((a, i) => /* @__PURE__ */ jsxs(Flex, {
+            children: value.map((assignee, index) => /* @__PURE__ */ jsxs(Flex, {
                 align: "center",
                 gap: 1,
                 children: [ 
                 /* @__PURE__ */ jsx(AssigneeBadge, {
-                    assignee: a
+                    assignee: assignee
                 }), 
                 /* @__PURE__ */ jsx(HoverHint, {
                     text: "Remove",
@@ -8995,60 +9698,33 @@ function AssigneesInput({value: value, onChange: onChange}) {
                         fontSize: 1,
                         icon: 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__ */ jsxs(Flex, {
+        /* @__PURE__ */ jsx(Flex, {
             align: "center",
             gap: 2,
             wrap: "wrap",
-            children: [ 
-            /* @__PURE__ */ jsx(DismissablePopover, {
-                content: /* @__PURE__ */ jsx(MemberPicker, {
-                    onSelect: member => member && toggleUser(member.id),
-                    selectedIds: userIds
+            children: /* @__PURE__ */ jsx(DismissablePopover, {
+                content: /* @__PURE__ */ jsx(AssigneePicker, {
+                    onChange: next => onChange([ ...next ]),
+                    value: value
                 }),
-                onDismiss: () => setMembersOpen(!1),
-                open: membersOpen,
+                onDismiss: () => setOpen(!1),
+                open: open,
                 placement: "bottom-start",
                 children: /* @__PURE__ */ jsx(Button, {
                     fontSize: 1,
                     icon: UserIcon,
                     mode: "ghost",
-                    onClick: () => setMembersOpen(v => !v),
+                    onClick: () => setOpen(v => !v),
                     padding: 2,
-                    text: "Add member"
-                })
-            }), roles.length > 0 ? /* @__PURE__ */ jsx(MenuButton, {
-                button: /* @__PURE__ */ jsx(Button, {
-                    fontSize: 1,
-                    icon: AddIcon,
-                    mode: "ghost",
-                    padding: 2,
-                    text: "Add role"
-                }),
-                id: "assignees-add-role",
-                menu: /* @__PURE__ */ jsx(Menu, {
-                    style: {
-                        maxHeight: 280,
-                        overflowY: "auto"
-                    },
-                    children: roles.map(r => /* @__PURE__ */ jsx(MenuItem, {
-                        onClick: () => add({
-                            type: "role",
-                            role: r
-                        }),
-                        text: `Role: ${r}`
-                    }, r))
+                    text: "Assign"
                 })
-            }) : /* @__PURE__ */ jsx(Text, {
-                muted: !0,
-                size: 1,
-                children: "No project roles found"
-            }) ]
+            })
         }) ]
     });
 }
@@ -9978,17 +10654,6 @@ function makePerspectiveBadge(documentId) {
     return WorkflowPerspectiveBadge;
 }
 
-function StartIncompleteBadge({style: style}) {
-    /* @__PURE__ */
-    return jsx(Badge, {
-        fontSize: 1,
-        mode: "outline",
-        style: style,
-        tone: "caution",
-        children: "Start incomplete"
-    });
-}
-
 const GLANCE_CAP = 3;
 
 function AssignedTasksHint({work: work}) {
@@ -10498,4 +11163,4 @@ function WorkflowRootInput(props) {
     });
 }
 
-export { ActivityDetailDialog, ActivityRow, BreadcrumbTail, CautionNote, CollapsibleBand, CountedLabel, DismissablePopover, DocPreviewLink, DocRefFace, EmptyState, ForMeEmptyState, Hairline, HintedMenuButton, HoverHint, InstanceSnapshotBody, InvalidDocNotice, LinkChip, LoadingRow, LogEventOnMount, MetaRow, SpinnerSlot, StageFace, StaleLock, TOAST_ID, TOOL_TABS, TabSwitch, TrailingHairline, UnreadableDocsNote, UserAvatar, WORKFLOW_API_VERSION, WORKFLOW_PAGE_TABS, WorkflowAbortDialogOpened, WorkflowAbortDialogSubmitted, WorkflowBoardWorkflowSelected, WorkflowDefinitionDetailViewed, WorkflowInstanceDetailViewed, WorkflowTaskFiltersApplied, WorkflowTitleSeedDrifted, WorkflowToolOpened, activityRowProps, assigneeUserIdsOf, backToTabLabel, committedRowFace, createSubscribers, datesOf, definitionFingerprint, definitionSnapshotOf, describeError, dueDatesOf, findActivity, findActivityNode, formatDate, formatDateTime, formatShortAgo, formatShortDateTime, formatTimeAgo, gdrLocality, instanceBreadcrumb, instanceState, instanceTitle, isActivityAssignedTo, isEvaluationStale, isLiveEntry, isOpenActivityStatus, landingState, mappingIssueDetail, namesNoDeployedDefinition, openActivityGone, openableSchemaType, parseStoredDateValue, readDeployedDefinitions, rowAssignControlState, rowDateControlState, stageTitle, stateByActivity, tabSelectionNavigates, toolRoute, toolTabState, useAssignmentIdentity, useAvatarSize, useBadgeCapTrim, useContainerToken, useDefinition, useDelayedFlag, useLogEventOnMount, useProjectMembers, useSpaceToken, useUserDisplay, useUserDisplays, useWorkflowContext, useWorkflowInstanceEntry, useWorkflowToast, workflowDefaultDocumentNode, workflowPageState, workflowState, workflowStudioPlugin, workflowsView };
+export { AbortWorkflowDialog, ActivityDetailDialog, ActivityLog, ActivityRow, BreadcrumbTail, CautionNote, CodeChip, CountedLabel, DismissablePopover, DocPreviewLink, DocRefFace, EmptyState, ForMeEmptyState, Hairline, HoverHint, InstanceSnapshotBody, InvalidDocNotice, LinkChip, LoadingRow, LogEventOnMount, MetaRow, SpinnerSlot, StageFace, StaleLock, TOAST_ID, TOOL_TABS, TabSwitch, UnreadableDocsNote, WORKFLOW_API_VERSION, WORKFLOW_PAGE_TABS, WorkflowBoardWorkflowSelected, WorkflowDefinitionDetailViewed, WorkflowInstanceDetailViewed, WorkflowTaskFiltersApplied, WorkflowTitleSeedDrifted, WorkflowToolOpened, activityRowProps, assigneesOf, backToTabLabel, committedRowFace, createSubscribers, datesOf, definitionFingerprint, definitionSnapshotOf, describeError, dueDatesOf, findActivity, findActivityNode, formatDate, formatShortDateTime, formatTimeAgo, gdrLocality, instanceBreadcrumb, instanceState, instanceTitle, isActivityAssignedTo, isEvaluationStale, isLiveEntry, isOpenActivityStatus, landingState, mappingIssueDetail, namesNoDeployedDefinition, openActivityGone, openableSchemaType, parseStoredDateValue, readDeployedDefinitions, rowAssignControlState, rowDateControlState, stageTitle, stateByActivity, tabSelectionNavigates, toolRoute, toolTabState, useAssignmentIdentity, useBadgeCapTrim, useContainerToken, useDefinition, useDelayedFlag, useLogEventOnMount, useProjectMembers, useSpaceToken, useUserDisplays, useWorkflowContext, useWorkflowInstanceEntry, useWorkflowToast, workflowDefaultDocumentNode, workflowPageState, workflowState, workflowStudioPlugin, workflowsView };