@sanity/workflow-studio-plugin 0.30.0 → 0.31.0

package/dist/_chunks-es/workflows-tool-root.js

@@ -16,7 +16,7 @@ import { useMemo, useState, useEffect, useRef, Fragment as Fragment$1, useLayout
 
 import { StateLink, useRouter } from "sanity/router";
 
-import { isOpenActivityStatus, dueDatesOf, isDueDatePast, parseStoredDateValue, countBy, stageTitle, assigneesOf, findActivity, RUN_SEARCH_PARAM, toolTabState, namesNoDeployedDefinition, mappingIssueDetail, formatTimeAgo, formatShortDateTime, useSpaceToken, useWorkflowContext, readDeployedDefinitions, describeError, useMinuteClock, NoteBanner, LoadingRow, EmptyState, AgoStamp, AlertGlyph, gdrLocality, openableSchemaType, instanceTitle, DocRefFace, useCapTrimFor, useTextIconSize, RowAssignees, CountedHeading, MetricPair, useRadiusToken, WORKFLOW_API_VERSION, WorkflowTitleSeedDrifted, useCurrentUserId, LogEventOnMount, WorkflowBoardWorkflowSelected, definitionFingerprint, HoverHint, useReleaseTitles, useProjectMembers, useUserDisplays, useAvatarSize, RoleAssignedNotice, isLiveEntry, AbortWorkflowDialog, isEvaluationStale, SpinnerSlot, useWorkflowInstanceEntry, useLogEventOnMount, WorkflowInstanceDetailViewed, InvalidDocNotice, useDefinition, useContainerToken, openActivityGone, InstanceFaultNote, InstanceSnapshotBody, ActivityLog, ActivityDetailDialog, instanceBreadcrumb, CodeChip, DocPreviewLink, UnreadableDocsNote, identityOf, DismissablePopover, MetaRow, WorkflowDefinitionDetailViewed, toolRoute, landingState, TabSwitch, tabSelectionNavigates, WorkflowToolOpened, workflowState, definitionsRouteOf, TOOL_TABS, useAssignmentIdentity } from "./index.js";
+import { isOpenActivityStatus, dueDatesOf, isDueDatePast, parseStoredDateValue, findActivity, isHandsOff, assigneesOf, activityLabel, countBy, stageTitle, userIdsOf, RUN_SEARCH_PARAM, toolTabState, namesNoDeployedDefinition, mappingIssueDetail, formatTimeAgo, formatShortDateTime, useSpaceToken, useWorkflowContext, readDeployedDefinitions, describeError, useMinuteClock, NoteBanner, LoadingRow, EmptyState, AgoStamp, AlertGlyph, gdrLocality, openableSchemaType, instanceTitle, MetricLockup, shortSpanOf, useAvatarSize, HoverHint, useUserDisplays, uniqueIds, disambiguatedNames, useProjectMembers, MetricPair, AlertChip, DocRefFace, useCapTrimFor, useTextIconSize, CountedHeading, useRadiusToken, WORKFLOW_API_VERSION, WorkflowTitleSeedDrifted, useCurrentUserId, LogEventOnMount, WorkflowBoardWorkflowSelected, definitionFingerprint, useReleaseTitles, RoleAssignedNotice, isLiveEntry, AbortWorkflowDialog, isEvaluationStale, SpinnerSlot, useWorkflowInstanceEntry, useLogEventOnMount, WorkflowInstanceDetailViewed, InvalidDocNotice, useDefinition, useContainerToken, openActivityGone, InstanceFaultNote, InstanceSnapshotBody, ActivityLog, ActivityDetailDialog, instanceBreadcrumb, CodeChip, DocPreviewLink, UnreadableDocsNote, identityOf, DismissablePopover, MetaRow, WorkflowDefinitionDetailViewed, toolRoute, landingState, TabSwitch, tabSelectionNavigates, WorkflowToolOpened, workflowState, definitionsRouteOf, TOOL_TABS, useAssignmentIdentity } from "./index.js";
 
 import { TransferIcon } from "@sanity/icons/Transfer";
 
@@ -24,7 +24,7 @@ import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 
 import { useSchema, useDocumentPreviewStore, usePerspective, useClient } from "sanity";
 
-import { entryDocRefs, toBareId, findOpenStageEntry, terminalState, findStageNode, startKindOf, isSubjectEntry, isInputSourced, latestDeployedDefinitions, isStartableDefinition } from "@sanity/workflow-engine";
+import { entryDocRefs, toBareId, findOpenStageEntry, findStageNode, deriveWorkflowAutonomy, deriveExecutorClassification, terminalState, startKindOf, isSubjectEntry, isInputSourced, latestDeployedDefinitions, isStartableDefinition } from "@sanity/workflow-engine";
 
 import { useWorkflowInstancePreviews } from "@sanity/workflow-studio";
 
@@ -32,24 +32,26 @@ import pluralize from "pluralize-esm";
 
 import { useVirtualizer } from "@tanstack/react-virtual";
 
+import { UserIcon } from "@sanity/icons/User";
+
+import { RoleAvatar, memberRoleFor, MemberAvatar, roleLabel, roleLabelFor, AssigneeStack } from "@sanity/workflow-components";
+
+import { CalendarIcon } from "@sanity/icons/Calendar";
+
 import { ErrorOutlineIcon } from "@sanity/icons/ErrorOutline";
 
 import { isReferenceSchemaType } from "@sanity/types";
 
 import { createPortal } from "react-dom";
 
-import { CloseIcon } from "@sanity/icons/Close";
-
-import { UserIcon } from "@sanity/icons/User";
+import { styled } from "styled-components";
 
-import { RoleAvatar, MemberAvatar, roleLabelFor, AssigneeStack } from "@sanity/workflow-components";
+import { CloseIcon } from "@sanity/icons/Close";
 
 import { AddIcon } from "@sanity/icons/Add";
 
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 
-import { styled } from "styled-components";
-
 import { SearchIcon } from "@sanity/icons/Search";
 
 import { useReducedMotion, motion, useSpring, useMotionValueEvent } from "motion/react";
@@ -91,14 +93,17 @@ function overdueTasks(instance, now) {
     return openActivitiesOf(instance).filter(activity => dueDatesOf(activity.fields ?? []).some(due => isDueDatePast(due, now)));
 }
 
-function overdueTaskCount(instance, now) {
-    return overdueTasks(instance, now).length;
+function earliestPastDue(activity, now) {
+    return earliestPastDueAcross([ activity ], now);
 }
 
-function earliestPastDue(activity, now) {
-    const past = dueDatesOf(activity.fields ?? []).filter(due => isDueDatePast(due, now));
+function earliestPastDueAcross(activities, now) {
+    return earliestOf(activities.flatMap(activity => dueDatesOf(activity.fields ?? []).filter(due => isDueDatePast(due, now))));
+}
+
+function earliestOf(values) {
     let earliest;
-    for (const value of past) {
+    for (const value of values) {
         const time = parseStoredDateValue(value)?.getTime();
         time !== void 0 && (earliest === void 0 || time < earliest.time) && (earliest = {
             time: time,
@@ -108,6 +113,135 @@ function earliestPastDue(activity, now) {
     return earliest?.value;
 }
 
+const AUTONOMY_BY_DEFINITION = /* @__PURE__ */ new WeakMap;
+
+function cachedAutonomy(definition) {
+    const hit = AUTONOMY_BY_DEFINITION.get(definition);
+    if (hit !== void 0) return hit;
+    const derived = deriveWorkflowAutonomy(definition);
+    return AUTONOMY_BY_DEFINITION.set(definition, derived), derived;
+}
+
+function isAutomatedActivity(args) {
+    const stage = args.autonomy?.stages.find(entry => entry.stage === args.stageName);
+    return isHandsOff({
+        classification: deriveExecutorClassification(args.activity),
+        completesWithoutCaller: stage?.activities[args.activity.name]?.completesWithoutCaller
+    });
+}
+
+function taskOf(args) {
+    const {entry: entry, now: now, title: title} = args;
+    return {
+        name: entry.name,
+        title: title,
+        assignees: assigneesOf(entry.fields ?? []),
+        overdueSince: earliestPastDue(entry, now)
+    };
+}
+
+function humanTask(args) {
+    const {activity: activity, autonomy: autonomy, entry: entry, now: now, stageName: stageName} = args;
+    return entry === void 0 ? [] : isAutomatedActivity({
+        activity: activity,
+        autonomy: autonomy,
+        stageName: stageName
+    }) ? [] : [ taskOf({
+        entry: entry,
+        now: now,
+        title: activityLabel(activity)
+    }) ];
+}
+
+function undeclaredTasks(args) {
+    const {definition: definition, now: now, open: open, seen: seen, stageName: stageName} = args;
+    return open.filter(entry => !seen.has(entry.name)).map(entry => taskOf({
+        entry: entry,
+        now: now,
+        title: findActivity({
+            activityName: entry.name,
+            definition: definition,
+            stageName: stageName
+        }).title
+    }));
+}
+
+function autonomyForPinned(definition, pinnedVersion) {
+    if (!(definition === void 0 || definition.version !== pinnedVersion)) return cachedAutonomy(definition);
+}
+
+function stageTasksOf(args) {
+    const {definition: definition, instance: instance, now: now} = args, open = openActivitiesOf(instance);
+    if (open.length === 0) return [];
+    const autonomy = autonomyForPinned(definition, instance.pinnedVersion), stageName = instance.currentStage, openByName = new Map(open.map(entry => [ entry.name, entry ])), declared = findStageNode({
+        definition: definition,
+        stageName: stageName
+    })?.activities ?? [];
+    return [ ...declared.flatMap(activity => humanTask({
+        activity: activity,
+        autonomy: autonomy,
+        entry: openByName.get(activity.name),
+        now: now,
+        stageName: stageName
+    })), ...undeclaredTasks({
+        definition: definition,
+        now: now,
+        open: open,
+        seen: new Set(declared.map(activity => activity.name)),
+        stageName: stageName
+    }) ];
+}
+
+function groupWidthOf(task, metrics) {
+    const stacked = Math.max(1, task.assignees.length);
+    return metrics.face + (stacked - 1) * (metrics.face - metrics.overlap);
+}
+
+function rowWidthOf(tasks, metrics) {
+    return tasks.reduce((total, task) => total + groupWidthOf(task, metrics), 0) + Math.max(0, tasks.length - 1) * metrics.gap;
+}
+
+function countWithin(args) {
+    const {budget: budget, metrics: metrics, tasks: tasks} = args;
+    let used = 0, count = 0;
+    for (const task of tasks) {
+        const next = used + (count === 0 ? 0 : metrics.gap) + groupWidthOf(task, metrics);
+        if (next > budget) break;
+        used = next, count += 1;
+    }
+    return Math.max(1, count);
+}
+
+function visibleStageTasks(args) {
+    const {metrics: metrics, room: room, tasks: tasks} = args;
+    if (rowWidthOf(tasks, metrics) <= room) return {
+        overflow: 0,
+        visible: tasks
+    };
+    const shown = countWithin({
+        budget: room - metrics.gap - metrics.counter,
+        metrics: metrics,
+        tasks: tasks
+    });
+    return {
+        overflow: tasks.length - shown,
+        visible: tasks.slice(0, shown)
+    };
+}
+
+function stackedAssigneesOf(assignees) {
+    return [ ...assignees.filter(assignee => assignee.type === "role"), ...assignees.filter(assignee => assignee.type === "user") ];
+}
+
+function taskHoldersOf(assignees) {
+    return assignees.length === 0 ? [ {
+        kind: "unassigned"
+    } ] : stackedAssigneesOf(assignees).map(assignee => ({
+        kind: "held",
+        assignee: assignee
+    }));
+}
+
 function runsScopeOf(row) {
     return row.endedAt === void 0 ? "open" : "closed";
 }
@@ -125,7 +259,7 @@ function runCountsByWorkflow(rows) {
 }
 
 function runCountsByAssignee(rows) {
-    return countBy(rows, row => new Set(row.assignees.flatMap(assignee => assignee.type === "user" ? [ assignee.id ] : [])));
+    return countBy(rows, row => new Set(userIdsOf(row.assignees)));
 }
 
 function runCountsByRole(rows) {
@@ -194,12 +328,17 @@ function runRowOf(args) {
         attention: attentionKindOf(attentionDetail),
         attentionDetail: attentionDetail,
         assignees: held.assignees,
-        unassignedOpenCount: held.unassignedCount
+        unassignedOpenCount: held.unassignedCount,
+        tasks: settled ? [] : stageTasksOf({
+            definition: definition,
+            instance: preview,
+            now: now
+        })
     };
 }
 
 function attentionKindOf(detail) {
-    if (detail !== void 0) return detail.kind === "overdue" || detail.kind === "overdue-many" ? "overdue" : "blocked";
+    if (detail !== void 0) return detail.kind === "overdue" ? "overdue" : "blocked";
 }
 
 function outcomeOf(preview, definition) {
@@ -210,6 +349,7 @@ function outcomeOf(preview, definition) {
 function blockedRunDetail(args) {
     const {definition: definition, preview: preview} = args, {stage: stage, titleOf: titleOf} = activityTitleResolver(preview, definition), failed = (stage?.activities ?? []).filter(activity => activity.status === "failed");
     if (failed.length > 1) return {
+        count: failed.length,
         kind: "blocked-many"
     };
     const only = failed[0];
@@ -217,19 +357,29 @@ function blockedRunDetail(args) {
         kind: "blocked",
         task: titleOf(only.name)
     };
-    const effect = stuckEffectOf({
+    const stuck = stuckEffectOf({
         definition: definition,
         preview: preview,
         stage: stage
     });
-    return effect === void 0 ? void 0 : {
-        effect: effect.title ?? effect.name,
+    return stuck === void 0 ? void 0 : {
+        effect: stuck.effect.title ?? stuck.effect.name,
+        failed: stuck.failed,
         kind: "blocked-effect"
     };
 }
 
 function stuckEffectOf(args) {
-    return failedDeclaredEffect(args) ?? args.preview.claimedEffects[0];
+    const reported = failedDeclaredEffect(args);
+    if (reported !== void 0) return {
+        effect: reported,
+        failed: !0
+    };
+    const claimed = args.preview.claimedEffects[0];
+    return claimed === void 0 ? void 0 : {
+        effect: claimed,
+        failed: !1
+    };
 }
 
 function failedDeclaredEffect(args) {
@@ -245,13 +395,12 @@ function failedDeclaredEffect(args) {
 function overdueRunDetail(args) {
     const {definition: definition, now: now, preview: preview} = args, late = overdueTasks(preview, now);
     if (late.length === 0) return;
-    const {titleOf: titleOf} = activityTitleResolver(preview, definition), only = late.length === 1 ? late[0] : void 0, due = only === void 0 ? void 0 : earliestPastDue(only, now);
-    return only === void 0 || due === void 0 ? {
-        kind: "overdue-many"
-    } : {
-        due: due,
+    const {titleOf: titleOf} = activityTitleResolver(preview, definition), only = late.length === 1 ? late[0] : void 0;
+    return {
+        count: late.length,
+        due: earliestPastDueAcross(late, now),
         kind: "overdue",
-        task: titleOf(only.name)
+        task: only === void 0 ? void 0 : titleOf(only.name)
     };
 }
 
@@ -272,10 +421,6 @@ const NO_ASSIGNEES = {
     unassignedCount: 0
 };
 
-function openRunAssignees(preview) {
-    return openAssignees(preview).assignees;
-}
-
 function openAssignees(instance) {
     const users = /* @__PURE__ */ new Map, roles = /* @__PURE__ */ new Map;
     let unassignedCount = 0;
@@ -447,7 +592,7 @@ function isRunAttention(value) {
 }
 
 function assigneeIdsOf(rows) {
-    const ids = rows.flatMap(row => row.assignees.flatMap(assignee => assignee.type === "user" ? [ assignee.id ] : []));
+    const ids = rows.flatMap(row => userIdsOf(row.assignees));
     return [ ...new Set(ids) ];
 }
 
@@ -1272,20 +1417,26 @@ function tiebreak(a, b) {
 }
 
 function cardFacts(args) {
-    return new Map(args.previews.map(preview => [ preview._id, {
-        assignees: openRunAssignees(preview),
-        overdue: overdueTaskCount(preview, args.now),
-        overdueDetail: overdueRunDetail({
-            definition: args.definition,
-            now: args.now,
-            preview: preview
-        }),
-        blocked: blockedRunDetail({
-            definition: args.definition,
-            preview: preview
-        }),
-        settled: terminalState(preview) !== "in-flight"
-    } ]));
+    return new Map(args.previews.map(preview => {
+        const settled = terminalState(preview) !== "in-flight";
+        return [ preview._id, {
+            tasks: settled ? [] : stageTasksOf({
+                definition: args.definition,
+                instance: preview,
+                now: args.now
+            }),
+            overdueDetail: overdueRunDetail({
+                definition: args.definition,
+                now: args.now,
+                preview: preview
+            }),
+            blocked: blockedRunDetail({
+                definition: args.definition,
+                preview: preview
+            }),
+            settled: settled
+        } ];
+    }));
 }
 
 function laneTotals(cards, facts) {
@@ -1294,7 +1445,7 @@ function laneTotals(cards, facts) {
         const held = facts.get(card.instanceId);
         if (held === void 0) continue;
         const key = card.face.kind === "document" ? card.face.document.id : `run:${card.instanceId}`;
-        held.overdue > 0 && overdue.add(key), held.blocked !== void 0 && stuck.add(key);
+        held.overdueDetail !== void 0 && overdue.add(key), held.blocked !== void 0 && stuck.add(key);
     }
     return {
         overdue: overdue.size,
@@ -1360,6 +1511,237 @@ function boardDocuments(board) {
     return board.groups.flatMap(group => group.cards.flatMap(card => card.face.kind === "document" ? [ card.face.document ] : []));
 }
 
+const LATE_FACE = {
+    Icon: CalendarIcon,
+    tone: "caution"
+};
+
+function LateSpan({now: now, since: since}) {
+    /* @__PURE__ */
+    return jsx(MetricLockup, {
+        Icon: LATE_FACE.Icon,
+        tone: LATE_FACE.tone,
+        value: shortSpanOf(parseStoredDateValue(since), now)
+    });
+}
+
+const HOLDER_OVERLAP = 7, HOLDER_RING = 1.5, GROUP_GAP_TOKEN = 3;
+
+function useDisplayById(ids) {
+    const displays = useUserDisplays(uniqueIds(ids)), labels = disambiguatedNames(displays);
+    return new Map(displays.map((display, index) => [ display.id, {
+        ...display,
+        label: labels[index] ?? display.name
+    } ]));
+}
+
+function holderKey(assignee, index) {
+    return assignee.type === "user" ? assignee.id : `${assignee.role}-${index}`;
+}
+
+function stageTasksFace(args) {
+    return {
+        content: /* @__PURE__ */ jsx(StageTasksCard, {
+            now: args.now,
+            tasks: args.tasks
+        }),
+        flush: !0,
+        wide: !0
+    };
+}
+
+function StageTaskGroups({now: now, room: room, tasks: tasks}) {
+    const gap = useSpaceToken(GROUP_GAP_TOKEN), face = useAvatarSize(), {overflow: overflow, visible: visible} = visibleStageTasks({
+        metrics: {
+            counter: face,
+            face: face,
+            gap: gap,
+            overlap: HOLDER_OVERLAP
+        },
+        room: room ?? face * 3 + gap * 2,
+        tasks: tasks
+    });
+    return tasks.length === 0 ? null : /* @__PURE__ */ jsx(HoverHint, {
+        ...stageTasksFace({
+            now: now,
+            tasks: tasks
+        }),
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            "aria-label": "Tasks",
+            style: {
+                columnGap: gap
+            },
+            children: [ visible.map(task => /* @__PURE__ */ jsx(TaskGroupFace, {
+                assignees: task.assignees
+            }, task.name)), overflow === 0 ? null : /* @__PURE__ */ jsxs(Text, {
+                muted: !0,
+                size: 1,
+                children: [ "+", overflow ]
+            }) ]
+        })
+    });
+}
+
+function TaskGroupFace({assignees: assignees}) {
+    return assignees.length === 0 ? /* @__PURE__ */ jsx(UnassignedMark, {}) : /* @__PURE__ */ jsx(OverlappedHolders, {
+        assignees: assignees
+    });
+}
+
+function HolderFace({assignee: assignee, displayById: displayById}) {
+    const vocabulary = useProjectMembers();
+    if (assignee.type === "role") /* @__PURE__ */
+    return jsx(RoleAvatar, {
+        role: memberRoleFor(vocabulary, assignee.role),
+        size: 0
+    });
+    const display = displayById.get(assignee.id);
+    /* @__PURE__ */
+    return jsx(MemberAvatar, {
+        imageUrl: display?.imageUrl,
+        name: display?.name ?? assignee.id,
+        size: 0
+    });
+}
+
+function OverlappedHolders({assignees: assignees}) {
+    const {color: color} = useTheme_v2(), stacked = stackedAssigneesOf(assignees), displayById = useDisplayById(userIdsOf(stacked)), ring = `0 0 0 ${HOLDER_RING}px ${color.bg}`;
+    /* @__PURE__ */
+    return jsx(Flex, {
+        align: "center",
+        style: {
+            flexShrink: 0,
+            isolation: "isolate"
+        },
+        children: stacked.map((assignee, index) => /* @__PURE__ */ jsx(Box, {
+            style: {
+                borderRadius: assignee.type === "role" ? void 0 : "50%",
+                boxShadow: ring,
+                flexShrink: 0,
+                marginLeft: index === 0 ? 0 : -HOLDER_OVERLAP,
+                position: "relative",
+                zIndex: index
+            },
+            children: /* @__PURE__ */ jsx(HolderFace, {
+                assignee: assignee,
+                displayById: displayById
+            })
+        }, holderKey(assignee, index)))
+    });
+}
+
+function UnassignedMark() {
+    const size = useAvatarSize(), {color: color} = useTheme_v2();
+    /* @__PURE__ */
+    return jsx(Flex, {
+        align: "center",
+        justify: "center",
+        style: {
+            border: `1px dashed ${color.border}`,
+            borderRadius: "50%",
+            boxSizing: "border-box",
+            flexShrink: 0,
+            height: size,
+            width: size
+        },
+        children: /* @__PURE__ */ jsx(Text, {
+            size: 0,
+            children: /* @__PURE__ */ jsx(UserIcon, {
+                style: {
+                    color: color.input.default.enabled.placeholder
+                }
+            })
+        })
+    });
+}
+
+function StageTasksCard({now: now, tasks: tasks}) {
+    const displayById = useDisplayById(tasks.flatMap(task => userIdsOf(task.assignees)));
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 4,
+        padding: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 0,
+            style: {
+                letterSpacing: "0.06em",
+                textTransform: "uppercase"
+            },
+            weight: "semibold",
+            children: "Tasks in this stage"
+        }), 
+        /* @__PURE__ */ jsx(Stack, {
+            gap: 4,
+            children: tasks.map(task => /* @__PURE__ */ jsx(TaskCardRow, {
+                displayById: displayById,
+                now: now,
+                task: task
+            }, task.name))
+        }) ]
+    });
+}
+
+function TaskCardRow({displayById: displayById, now: now, task: task}) {
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                children: task.title
+            }), task.overdueSince === void 0 ? null : /* @__PURE__ */ jsx(LateSpan, {
+                now: now,
+                since: task.overdueSince
+            }) ]
+        }), 
+        /* @__PURE__ */ jsx(Stack, {
+            gap: 2,
+            children: taskHoldersOf(task.assignees).map((holder, index) => /* @__PURE__ */ jsx(HolderLine, {
+                displayById: displayById,
+                holder: holder
+            }, holder.kind === "held" ? holderKey(holder.assignee, index) : "unassigned"))
+        }) ]
+    });
+}
+
+function HolderLine({displayById: displayById, holder: holder}) {
+    const vocabulary = useProjectMembers();
+    if (holder.kind === "unassigned") /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(UnassignedMark, {}), 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "Unassigned"
+        }) ]
+    });
+    const {assignee: assignee} = holder, label = assignee.type === "user" ? displayById.get(assignee.id)?.label ?? assignee.id : roleLabel(memberRoleFor(vocabulary, assignee.role));
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(HolderFace, {
+            assignee: assignee,
+            displayById: displayById
+        }), 
+        /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            children: label
+        }) ]
+    });
+}
+
 function overdueAttentionHint(documents) {
     const task = documents === 1 ? "an overdue task" : "overdue tasks";
     return `${pluralize("document", documents, !0)} ${documents === 1 ? "has" : "have"} ${task}`;
@@ -1369,32 +1751,69 @@ function blockedAttentionHint(documents) {
     return `${pluralize("document", documents, !0)} ${documents === 1 ? "is" : "are"} blocked`;
 }
 
+function overdueMark(detail, now) {
+    const span = overdueSpan(detail.due, now), tasks = pluralize("task", detail.count, !0);
+    return detail.count === 1 && detail.task !== void 0 ? {
+        hint: `“${detail.task}” — ${span === void 0 ? "overdue" : `${span} overdue`}`,
+        value: span ?? tasks
+    } : {
+        hint: span === void 0 ? `${tasks} overdue` : `${tasks} overdue — the longest by ${span}`,
+        value: tasks
+    };
+}
+
+function overdueSpan(due, now) {
+    const from = parseStoredDateValue(due);
+    if (from !== void 0) return shortSpanOf(from, now);
+}
+
+function overdueMarkOpensPanel(tasks) {
+    return tasks.some(task => task.overdueSince !== void 0);
+}
+
+function blockedMarkHint(detail) {
+    return detail.kind === "blocked-many" ? `${pluralize("task", detail.count, !0)} were sent back` : detail.kind === "blocked-effect" ? `Automation “${detail.effect}” ${detail.failed ? "failed" : "didn’t finish"}` : detail.task === void 0 ? "A task was sent back" : `“${detail.task}” was sent back`;
+}
+
 const ATTENTION_FACES = {
     blocked: {
         Icon: ErrorOutlineIcon,
         tone: "critical"
     },
-    overdue: {
-        Icon: WarningOutlineIcon,
-        tone: "caution"
-    }
+    overdue: LATE_FACE
 };
 
-function AttentionGlyph({detail: detail}) {
-    const overdue = detail.kind === "overdue" || detail.kind === "overdue-many", face = ATTENTION_FACES[overdue ? "overdue" : "blocked"], words = overdue ? overdueAttentionHint(1) : blockedAttentionHint(1);
+function AttentionMark({detail: detail, now: now, tasks: tasks}) {
+    if (detail.kind === "overdue") {
+        const {hint: hint2, value: value} = overdueMark(detail, now);
+        /* @__PURE__ */
+        return jsx(MetricPair, {
+            Icon: ATTENTION_FACES.overdue.Icon,
+            face: overdueMarkOpensPanel(tasks) ? stageTasksFace({
+                now: now,
+                tasks: tasks
+            }) : {
+                text: hint2
+            },
+            label: hint2,
+            tone: ATTENTION_FACES.overdue.tone,
+            value: value
+        });
+    }
+    const hint = blockedMarkHint(detail);
     /* @__PURE__ */
-    return jsx(AlertGlyph, {
-        Icon: face.Icon,
-        hint: words,
-        label: words,
-        tone: face.tone
+    return jsx(AlertChip, {
+        Icon: ATTENTION_FACES.blocked.Icon,
+        hint: hint,
+        label: hint,
+        tone: ATTENTION_FACES.blocked.tone
     });
 }
 
 const CARD_RADIUS = 3;
 
 function BoardCard({card: card, wiring: wiring}) {
-    const {facts: facts, onSelect: onSelect, selectedInstanceId: selectedInstanceId} = wiring, {color: color} = useTheme_v2(), faceInset = useSpaceToken(2), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId);
+    const {facts: facts, now: now, onSelect: onSelect, selectedInstanceId: selectedInstanceId} = wiring, {color: color} = useTheme_v2(), faceInset = useSpaceToken(2), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId);
     /* @__PURE__ */
     return jsx(Card, {
         "aria-pressed": selected,
@@ -1430,22 +1849,24 @@ function BoardCard({card: card, wiring: wiring}) {
                     })
                 })
             }), held === void 0 ? null : /* @__PURE__ */ jsx(CardMetrics, {
-                facts: held
+                facts: held,
+                now: now
             }) ]
         })
     });
 }
 
-function CardMetrics({facts: facts}) {
-    const markOverhang = -useCapTrimFor(useTextIconSize()), bare = facts.assignees.length === 0 && facts.overdueDetail === void 0 && facts.blocked === void 0;
+function CardMetrics({facts: facts, now: now}) {
+    const markOverhang = -useCapTrimFor(useTextIconSize()), bare = facts.tasks.length === 0 && facts.overdueDetail === void 0 && facts.blocked === void 0;
     return facts.settled || bare ? null : /* @__PURE__ */ jsx(Box, {
         padding: 1,
         children: /* @__PURE__ */ jsxs(Flex, {
             align: "center",
             gap: 3,
             children: [ 
-            /* @__PURE__ */ jsx(RowAssignees, {
-                assignees: facts.assignees
+            /* @__PURE__ */ jsx(StageTaskGroups, {
+                now: now,
+                tasks: facts.tasks
             }), 
             /* @__PURE__ */ jsxs(Flex, {
                 align: "center",
@@ -1455,10 +1876,14 @@ function CardMetrics({facts: facts}) {
                 style: {
                     paddingRight: markOverhang
                 },
-                children: [ facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsx(AttentionGlyph, {
-                    detail: facts.overdueDetail
-                }), facts.blocked === void 0 ? null : /* @__PURE__ */ jsx(AttentionGlyph, {
-                    detail: facts.blocked
+                children: [ facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsx(AttentionMark, {
+                    detail: facts.overdueDetail,
+                    now: now,
+                    tasks: facts.tasks
+                }), facts.blocked === void 0 ? null : /* @__PURE__ */ jsx(AttentionMark, {
+                    detail: facts.blocked,
+                    now: now,
+                    tasks: facts.tasks
                 }) ]
             }) ]
         })
@@ -1959,6 +2384,7 @@ function RunsBoard({onSelect: onSelect, panelOpen: panelOpen, selectedInstanceId
                 now: now,
                 previews: shown
             }),
+            now: now,
             onSelect: onSelect,
             selectedInstanceId: selectedInstanceId
         }
@@ -2891,6 +3317,12 @@ function SegmentDivider() {
     });
 }
 
+const SurfaceButton = styled(Button)`
+  &:not(:hover):not(:active):not([data-selected]) {
+    --card-bg-color: ${({$surface: $surface}) => $surface};
+  }
+`;
+
 function RunsFilterRow({boardMode: boardMode, definition: definition, definitions: definitions, displayToggle: displayToggle, onView: onView, ready: ready, scoped: scoped, slot: slot, view: view, workflowCounts: workflowCounts, workflowScoped: workflowScoped}) {
     return ready ? slot === null ? null : createPortal(
     /* @__PURE__ */ jsxs(Flex, {
@@ -2900,9 +3332,7 @@ function RunsFilterRow({boardMode: boardMode, definition: definition, definition
         children: [ 
         /* @__PURE__ */ jsxs(Flex, {
             align: "center",
-            flex: 1,
             gap: 2,
-            wrap: "wrap",
             children: [ 
             /* @__PURE__ */ jsx(WorkflowSelect, {
                 counts: workflowCounts,
@@ -2913,7 +3343,15 @@ function RunsFilterRow({boardMode: boardMode, definition: definition, definition
             }), boardMode ? null : /* @__PURE__ */ jsx(ScopeSelect, {
                 onView: onView,
                 view: view
-            }), 
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            flex: 1,
+            gap: 2,
+            justify: "flex-end",
+            wrap: "wrap",
+            children: [ 
             /* @__PURE__ */ jsx(RunsFilterChips, {
                 definition: definition,
                 onView: onView,
@@ -3028,13 +3466,14 @@ function PickerLineGhost() {
 }
 
 function ScopeSelect({onView: onView, view: view}) {
-    const pick = scope => onView({
+    const {color: color} = useTheme_v2(), pick = scope => onView({
         scope: scope,
         filters: view.filters
     });
     /* @__PURE__ */
     return jsx(MenuButton, {
-        button: /* @__PURE__ */ jsx(Button, {
+        button: /* @__PURE__ */ jsx(SurfaceButton, {
+            $surface: color.bg,
             fontSize: 1,
             iconRight: ChevronDownIcon,
             mode: "ghost",
@@ -4076,7 +4515,17 @@ const TIME_WIDTH = 112, WORKFLOW_WIDTH = {
     key: "ended",
     label: "Closed",
     width: TIME_WIDTH
-} ], ASSIGNEES_WIDTH = 90, ATTENTION_WIDTH = 48;
+} ], TASKS_WIDTH = 120, TASKS_WIDTH_ROOMY = 168, ROOMY_TABLE_WIDTH = 1040;
+
+function tasksWidthOf(tableWidth) {
+    return tableWidth === void 0 ? TASKS_WIDTH : tableWidth >= ROOMY_TABLE_WIDTH ? TASKS_WIDTH_ROOMY : TASKS_WIDTH;
+}
+
+function taskRoomOf(args) {
+    return tasksWidthOf(args.tableWidth) - args.inset * 2;
+}
+
+const ATTENTION_WIDTH = 96;
 
 function useRowWindow(args) {
     const {element: element, keyAt: keyAt, rowCount: rowCount} = args, [scroller, setScroller] = useState(null);
@@ -4122,7 +4571,7 @@ function SpacerRow({height: height}) {
 function documentWidthOf(args) {
     const {columns: columns, scope: scope, tableWidth: tableWidth} = args;
     if (tableWidth === void 0) return;
-    const trailing = scope === "open" ? ASSIGNEES_WIDTH + ATTENTION_WIDTH : 0, fixed = columns.reduce((sum, column) => {
+    const trailing = scope === "open" ? tasksWidthOf(tableWidth) + ATTENTION_WIDTH : 0, fixed = columns.reduce((sum, column) => {
         const width = resolveWidth(column.width, tableWidth);
         return typeof width == "number" ? sum + width : sum;
     }, trailing);
@@ -4130,7 +4579,7 @@ function documentWidthOf(args) {
 }
 
 function RunsTable({now: now, onSelectRun: onSelectRun, onSort: onSort, rows: rows, scope: scope, scopedToWorkflow: scopedToWorkflow, selectedId: selectedId, sort: sort}) {
-    const columns = (scope === "closed" ? CLOSED_COLUMNS : OPEN_COLUMNS).filter(column => !(scopedToWorkflow && column.key === "workflow")), styles = useTableStyles(), [element, setElement] = useState(null), rect = useElementRect(element), window2 = useRowWindow({
+    const columns = (scope === "closed" ? CLOSED_COLUMNS : OPEN_COLUMNS).filter(column => !(scopedToWorkflow && column.key === "workflow")), styles = useTableStyles(), cellInset = useSpaceToken(2), [element, setElement] = useState(null), rect = useElementRect(element), window2 = useRowWindow({
         element: element,
         keyAt: index => rows[index]?.id ?? index,
         rowCount: rows.length
@@ -4179,14 +4628,14 @@ function RunsTable({now: now, onSelectRun: onSelectRun, onSort: onSort, rows: ro
                         /* @__PURE__ */ jsx("th", {
                             style: {
                                 ...styles.head,
-                                width: ASSIGNEES_WIDTH
+                                width: tasksWidthOf(rect?.width)
                             },
                             children: /* @__PURE__ */ jsx(Box, {
                                 padding: 2,
                                 children: /* @__PURE__ */ jsx(Text, {
                                     muted: !0,
                                     size: 1,
-                                    children: "Assignees"
+                                    children: "Tasks"
                                 })
                             })
                         }), 
@@ -4214,7 +4663,11 @@ function RunsTable({now: now, onSelectRun: onSelectRun, onSort: onSort, rows: ro
                         row: row,
                         scope: scope,
                         scopedToWorkflow: scopedToWorkflow,
-                        selected: row.id === selectedId
+                        selected: row.id === selectedId,
+                        taskRoom: taskRoomOf({
+                            inset: cellInset,
+                            tableWidth: rect?.width
+                        })
                     }, item.key);
                 }), 
                 /* @__PURE__ */ jsx(SpacerRow, {
@@ -4225,7 +4678,7 @@ function RunsTable({now: now, onSelectRun: onSelectRun, onSort: onSort, rows: ro
     });
 }
 
-const RunTableRow = memo(function({dataIndex: dataIndex, measureRow: measureRow, now: now, onSelectRun: onSelectRun, row: row, scope: scope, scopedToWorkflow: scopedToWorkflow, selected: selected}) {
+const RunTableRow = memo(function({dataIndex: dataIndex, measureRow: measureRow, now: now, onSelectRun: onSelectRun, row: row, scope: scope, scopedToWorkflow: scopedToWorkflow, selected: selected, taskRoom: taskRoom}) {
     const styles = useTableStyles(), documentInset = useSpaceToken(1);
     /* @__PURE__ */
     return jsxs(TableRowCard, {
@@ -4255,7 +4708,8 @@ const RunTableRow = memo(function({dataIndex: dataIndex, measureRow: measureRow,
             row: row
         }) : /* @__PURE__ */ jsx(OpenCells, {
             now: now,
-            row: row
+            row: row,
+            taskRoom: taskRoom
         }) ]
     });
 });
@@ -4281,7 +4735,7 @@ function DocumentCell({row: row}) {
     });
 }
 
-function OpenCells({now: now, row: row}) {
+function OpenCells({now: now, row: row, taskRoom: taskRoom}) {
     const styles = useTableStyles();
     /* @__PURE__ */
     return jsxs(Fragment, {
@@ -4302,17 +4756,23 @@ function OpenCells({now: now, row: row}) {
             })
         }), 
         /* @__PURE__ */ jsx("td", {
-            style: styles.cell,
+            style: {
+                ...styles.cell,
+                overflow: "hidden"
+            },
             children: /* @__PURE__ */ jsx(Flex, {
                 align: "center",
-                children: /* @__PURE__ */ jsx(RowAssignees, {
-                    assignees: row.assignees
+                children: /* @__PURE__ */ jsx(StageTaskGroups, {
+                    now: now,
+                    room: taskRoom,
+                    tasks: row.tasks
                 })
             })
         }), 
         /* @__PURE__ */ jsx("td", {
             style: styles.cell,
-            children: /* @__PURE__ */ jsx(AttentionMark, {
+            children: /* @__PURE__ */ jsx(AttentionCell, {
+                now: now,
                 row: row
             })
         }) ]
@@ -4349,12 +4809,14 @@ function ClosedCells({now: now, row: row}) {
     });
 }
 
-function AttentionMark({row: row}) {
+function AttentionCell({now: now, row: row}) {
     return row.attentionDetail === void 0 ? null : 
     /* @__PURE__ */ jsx(Flex, {
         align: "center",
-        children: /* @__PURE__ */ jsx(AttentionGlyph, {
-            detail: row.attentionDetail
+        children: /* @__PURE__ */ jsx(AttentionMark, {
+            detail: row.attentionDetail,
+            now: now,
+            tasks: row.tasks
         })
     });
 }
@@ -5145,7 +5607,7 @@ function StatusBox({children: children}) {
     });
 }
 
-const EDITORIAL_WORKFLOWS_DOCS_URL = "https://www.sanity.io/docs/editorial-workflows", WORK_TABS = TOOL_TABS.filter(tab => tab.value !== "definitions");
+const WORKFLOWS_DOCS_URL = "https://www.sanity.io/docs/workflows", WORK_TABS = TOOL_TABS.filter(tab => tab.value !== "definitions");
 
 function WorkflowsToolRoot() {
     const router = useRouter(), telemetry = useWorkflowTelemetry(), {color: color} = useTheme_v2(), [filterSlot, setFilterSlot] = useState(null), route = toolRoute(router.state), previews = useToolPreviews(), setTab = next => router.navigate(toolTabState(next)), selectTab = next => {
@@ -5260,7 +5722,7 @@ function ToolOverflowMenu({onOpenDefinitions: onOpenDefinitions}) {
             /* @__PURE__ */ jsx(MenuItem, {
                 as: "a",
                 fontSize: 1,
-                href: EDITORIAL_WORKFLOWS_DOCS_URL,
+                href: WORKFLOWS_DOCS_URL,
                 iconRight: LaunchIcon,
                 rel: "noopener noreferrer",
                 target: "_blank",