@sanity/workflow-studio-plugin 0.30.0 → 0.31.0

package/dist/_chunks-cjs/workflows-tool-root.cjs

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Launch = require("@sanity/icons/Launch"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), sanity = require("sanity"), workflowEngine = require("@sanity/workflow-engine"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), reactVirtual = require("@tanstack/react-virtual"), ErrorOutline = require("@sanity/icons/ErrorOutline"), types = require("@sanity/types"), reactDom = require("react-dom"), Close = require("@sanity/icons/Close"), User = require("@sanity/icons/User"), workflowComponents = require("@sanity/workflow-components"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), styledComponents = require("styled-components"), Search = require("@sanity/icons/Search"), react$1 = require("motion/react"), ChevronLeft = require("@sanity/icons/ChevronLeft"), Expand = require("@sanity/icons/Expand"), workflowDiagram = require("@sanity/workflow-diagram");
+var jsxRuntime = require("react/jsx-runtime"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Launch = require("@sanity/icons/Launch"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), sanity = require("sanity"), workflowEngine = require("@sanity/workflow-engine"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), reactVirtual = require("@tanstack/react-virtual"), User = require("@sanity/icons/User"), workflowComponents = require("@sanity/workflow-components"), Calendar = require("@sanity/icons/Calendar"), ErrorOutline = require("@sanity/icons/ErrorOutline"), types = require("@sanity/types"), reactDom = require("react-dom"), styledComponents = require("styled-components"), Close = require("@sanity/icons/Close"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), Search = require("@sanity/icons/Search"), react$1 = require("motion/react"), ChevronLeft = require("@sanity/icons/ChevronLeft"), Expand = require("@sanity/icons/Expand"), workflowDiagram = require("@sanity/workflow-diagram");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -41,14 +41,17 @@ function overdueTasks(instance, now) {
     return openActivitiesOf(instance).filter(activity => index.dueDatesOf(activity.fields ?? []).some(due => index.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 = index.dueDatesOf(activity.fields ?? []).filter(due => index.isDueDatePast(due, now));
+function earliestPastDueAcross(activities, now) {
+    return earliestOf(activities.flatMap(activity => index.dueDatesOf(activity.fields ?? []).filter(due => index.isDueDatePast(due, now))));
+}
+
+function earliestOf(values) {
     let earliest;
-    for (const value of past) {
+    for (const value of values) {
         const time = index.parseStoredDateValue(value)?.getTime();
         time !== void 0 && (earliest === void 0 || time < earliest.time) && (earliest = {
             time: time,
@@ -58,6 +61,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 = workflowEngine.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 index.isHandsOff({
+        classification: workflowEngine.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: index.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: index.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: index.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 = workflowEngine.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";
 }
@@ -75,7 +207,7 @@ function runCountsByWorkflow(rows) {
 }
 
 function runCountsByAssignee(rows) {
-    return index.countBy(rows, row => new Set(row.assignees.flatMap(assignee => assignee.type === "user" ? [ assignee.id ] : [])));
+    return index.countBy(rows, row => new Set(index.userIdsOf(row.assignees)));
 }
 
 function runCountsByRole(rows) {
@@ -144,12 +276,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) {
@@ -160,6 +297,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];
@@ -167,19 +305,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) {
@@ -195,13 +343,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)
     };
 }
 
@@ -222,10 +369,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;
@@ -397,7 +540,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 => index.userIdsOf(row.assignees));
     return [ ...new Set(ids) ];
 }
 
@@ -1222,20 +1365,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: workflowEngine.terminalState(preview) !== "in-flight"
-    } ]));
+    return new Map(args.previews.map(preview => {
+        const settled = workflowEngine.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) {
@@ -1244,7 +1393,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,
@@ -1310,6 +1459,237 @@ function boardDocuments(board) {
     return board.groups.flatMap(group => group.cards.flatMap(card => card.face.kind === "document" ? [ card.face.document ] : []));
 }
 
+const LATE_FACE = {
+    Icon: Calendar.CalendarIcon,
+    tone: "caution"
+};
+
+function LateSpan({now: now, since: since}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(index.MetricLockup, {
+        Icon: LATE_FACE.Icon,
+        tone: LATE_FACE.tone,
+        value: index.shortSpanOf(index.parseStoredDateValue(since), now)
+    });
+}
+
+const HOLDER_OVERLAP = 7, HOLDER_RING = 1.5, GROUP_GAP_TOKEN = 3;
+
+function useDisplayById(ids) {
+    const displays = index.useUserDisplays(index.uniqueIds(ids)), labels = index.disambiguatedNames(displays);
+    return new Map(displays.map((display, index2) => [ display.id, {
+        ...display,
+        label: labels[index2] ?? display.name
+    } ]));
+}
+
+function holderKey(assignee, index2) {
+    return assignee.type === "user" ? assignee.id : `${assignee.role}-${index2}`;
+}
+
+function stageTasksFace(args) {
+    return {
+        content: /* @__PURE__ */ jsxRuntime.jsx(StageTasksCard, {
+            now: args.now,
+            tasks: args.tasks
+        }),
+        flush: !0,
+        wide: !0
+    };
+}
+
+function StageTaskGroups({now: now, room: room, tasks: tasks}) {
+    const gap = index.useSpaceToken(GROUP_GAP_TOKEN), face = index.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__ */ jsxRuntime.jsx(index.HoverHint, {
+        ...stageTasksFace({
+            now: now,
+            tasks: tasks
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            "aria-label": "Tasks",
+            style: {
+                columnGap: gap
+            },
+            children: [ visible.map(task => /* @__PURE__ */ jsxRuntime.jsx(TaskGroupFace, {
+                assignees: task.assignees
+            }, task.name)), overflow === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: [ "+", overflow ]
+            }) ]
+        })
+    });
+}
+
+function TaskGroupFace({assignees: assignees}) {
+    return assignees.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(UnassignedMark, {}) : /* @__PURE__ */ jsxRuntime.jsx(OverlappedHolders, {
+        assignees: assignees
+    });
+}
+
+function HolderFace({assignee: assignee, displayById: displayById}) {
+    const vocabulary = index.useProjectMembers();
+    if (assignee.type === "role") /* @__PURE__ */
+    return jsxRuntime.jsx(workflowComponents.RoleAvatar, {
+        role: workflowComponents.memberRoleFor(vocabulary, assignee.role),
+        size: 0
+    });
+    const display = displayById.get(assignee.id);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(workflowComponents.MemberAvatar, {
+        imageUrl: display?.imageUrl,
+        name: display?.name ?? assignee.id,
+        size: 0
+    });
+}
+
+function OverlappedHolders({assignees: assignees}) {
+    const {color: color} = ui.useTheme_v2(), stacked = stackedAssigneesOf(assignees), displayById = useDisplayById(index.userIdsOf(stacked)), ring = `0 0 0 ${HOLDER_RING}px ${color.bg}`;
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Flex, {
+        align: "center",
+        style: {
+            flexShrink: 0,
+            isolation: "isolate"
+        },
+        children: stacked.map((assignee, index2) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            style: {
+                borderRadius: assignee.type === "role" ? void 0 : "50%",
+                boxShadow: ring,
+                flexShrink: 0,
+                marginLeft: index2 === 0 ? 0 : -HOLDER_OVERLAP,
+                position: "relative",
+                zIndex: index2
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(HolderFace, {
+                assignee: assignee,
+                displayById: displayById
+            })
+        }, holderKey(assignee, index2)))
+    });
+}
+
+function UnassignedMark() {
+    const size = index.useAvatarSize(), {color: color} = ui.useTheme_v2();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Flex, {
+        align: "center",
+        justify: "center",
+        style: {
+            border: `1px dashed ${color.border}`,
+            borderRadius: "50%",
+            boxSizing: "border-box",
+            flexShrink: 0,
+            height: size,
+            width: size
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(User.UserIcon, {
+                style: {
+                    color: color.input.default.enabled.placeholder
+                }
+            })
+        })
+    });
+}
+
+function StageTasksCard({now: now, tasks: tasks}) {
+    const displayById = useDisplayById(tasks.flatMap(task => index.userIdsOf(task.assignees)));
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 4,
+        padding: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 0,
+            style: {
+                letterSpacing: "0.06em",
+                textTransform: "uppercase"
+            },
+            weight: "semibold",
+            children: "Tasks in this stage"
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+            gap: 4,
+            children: tasks.map(task => /* @__PURE__ */ jsxRuntime.jsx(TaskCardRow, {
+                displayById: displayById,
+                now: now,
+                task: task
+            }, task.name))
+        }) ]
+    });
+}
+
+function TaskCardRow({displayById: displayById, now: now, task: task}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                children: task.title
+            }), task.overdueSince === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(LateSpan, {
+                now: now,
+                since: task.overdueSince
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+            gap: 2,
+            children: taskHoldersOf(task.assignees).map((holder, index2) => /* @__PURE__ */ jsxRuntime.jsx(HolderLine, {
+                displayById: displayById,
+                holder: holder
+            }, holder.kind === "held" ? holderKey(holder.assignee, index2) : "unassigned"))
+        }) ]
+    });
+}
+
+function HolderLine({displayById: displayById, holder: holder}) {
+    const vocabulary = index.useProjectMembers();
+    if (holder.kind === "unassigned") /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(UnassignedMark, {}), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: "Unassigned"
+        }) ]
+    });
+    const {assignee: assignee} = holder, label = assignee.type === "user" ? displayById.get(assignee.id)?.label ?? assignee.id : workflowComponents.roleLabel(workflowComponents.memberRoleFor(vocabulary, assignee.role));
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(HolderFace, {
+            assignee: assignee,
+            displayById: displayById
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            children: label
+        }) ]
+    });
+}
+
 function overdueAttentionHint(documents) {
     const task = documents === 1 ? "an overdue task" : "overdue tasks";
     return `${pluralize__default.default("document", documents, !0)} ${documents === 1 ? "has" : "have"} ${task}`;
@@ -1319,32 +1699,69 @@ function blockedAttentionHint(documents) {
     return `${pluralize__default.default("document", documents, !0)} ${documents === 1 ? "is" : "are"} blocked`;
 }
 
+function overdueMark(detail, now) {
+    const span = overdueSpan(detail.due, now), tasks = pluralize__default.default("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 = index.parseStoredDateValue(due);
+    if (from !== void 0) return index.shortSpanOf(from, now);
+}
+
+function overdueMarkOpensPanel(tasks) {
+    return tasks.some(task => task.overdueSince !== void 0);
+}
+
+function blockedMarkHint(detail) {
+    return detail.kind === "blocked-many" ? `${pluralize__default.default("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: ErrorOutline.ErrorOutlineIcon,
         tone: "critical"
     },
-    overdue: {
-        Icon: WarningOutline.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 jsxRuntime.jsx(index.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 jsxRuntime.jsx(index.AlertGlyph, {
-        Icon: face.Icon,
-        hint: words,
-        label: words,
-        tone: face.tone
+    return jsxRuntime.jsx(index.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} = ui.useTheme_v2(), faceInset = index.useSpaceToken(2), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId);
+    const {facts: facts, now: now, onSelect: onSelect, selectedInstanceId: selectedInstanceId} = wiring, {color: color} = ui.useTheme_v2(), faceInset = index.useSpaceToken(2), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId);
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Card, {
         "aria-pressed": selected,
@@ -1380,22 +1797,24 @@ function BoardCard({card: card, wiring: wiring}) {
                     })
                 })
             }), held === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(CardMetrics, {
-                facts: held
+                facts: held,
+                now: now
             }) ]
         })
     });
 }
 
-function CardMetrics({facts: facts}) {
-    const markOverhang = -index.useCapTrimFor(index.useTextIconSize()), bare = facts.assignees.length === 0 && facts.overdueDetail === void 0 && facts.blocked === void 0;
+function CardMetrics({facts: facts, now: now}) {
+    const markOverhang = -index.useCapTrimFor(index.useTextIconSize()), bare = facts.tasks.length === 0 && facts.overdueDetail === void 0 && facts.blocked === void 0;
     return facts.settled || bare ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
         padding: 1,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "center",
             gap: 3,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(index.RowAssignees, {
-                assignees: facts.assignees
+            /* @__PURE__ */ jsxRuntime.jsx(StageTaskGroups, {
+                now: now,
+                tasks: facts.tasks
             }), 
             /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
                 align: "center",
@@ -1405,10 +1824,14 @@ function CardMetrics({facts: facts}) {
                 style: {
                     paddingRight: markOverhang
                 },
-                children: [ facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AttentionGlyph, {
-                    detail: facts.overdueDetail
-                }), facts.blocked === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AttentionGlyph, {
-                    detail: facts.blocked
+                children: [ facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
+                    detail: facts.overdueDetail,
+                    now: now,
+                    tasks: facts.tasks
+                }), facts.blocked === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
+                    detail: facts.blocked,
+                    now: now,
+                    tasks: facts.tasks
                 }) ]
             }) ]
         })
@@ -1909,6 +2332,7 @@ function RunsBoard({onSelect: onSelect, panelOpen: panelOpen, selectedInstanceId
                 now: now,
                 previews: shown
             }),
+            now: now,
             onSelect: onSelect,
             selectedInstanceId: selectedInstanceId
         }
@@ -2841,6 +3265,12 @@ function SegmentDivider() {
     });
 }
 
+const SurfaceButton = styledComponents.styled(ui.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 : reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
@@ -2850,9 +3280,7 @@ function RunsFilterRow({boardMode: boardMode, definition: definition, definition
         children: [ 
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "center",
-            flex: 1,
             gap: 2,
-            wrap: "wrap",
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(WorkflowSelect, {
                 counts: workflowCounts,
@@ -2863,7 +3291,15 @@ function RunsFilterRow({boardMode: boardMode, definition: definition, definition
             }), boardMode ? null : /* @__PURE__ */ jsxRuntime.jsx(ScopeSelect, {
                 onView: onView,
                 view: view
-            }), 
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            flex: 1,
+            gap: 2,
+            justify: "flex-end",
+            wrap: "wrap",
+            children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(RunsFilterChips, {
                 definition: definition,
                 onView: onView,
@@ -2978,13 +3414,14 @@ function PickerLineGhost() {
 }
 
 function ScopeSelect({onView: onView, view: view}) {
-    const pick = scope => onView({
+    const {color: color} = ui.useTheme_v2(), pick = scope => onView({
         scope: scope,
         filters: view.filters
     });
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.MenuButton, {
-        button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+        button: /* @__PURE__ */ jsxRuntime.jsx(SurfaceButton, {
+            $surface: color.bg,
             fontSize: 1,
             iconRight: ChevronDown.ChevronDownIcon,
             mode: "ghost",
@@ -4026,7 +4463,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] = react.useState(null);
@@ -4072,7 +4519,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);
@@ -4080,7 +4527,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] = react.useState(null), rect = ui.useElementRect(element), window2 = useRowWindow({
+    const columns = (scope === "closed" ? CLOSED_COLUMNS : OPEN_COLUMNS).filter(column => !(scopedToWorkflow && column.key === "workflow")), styles = useTableStyles(), cellInset = index.useSpaceToken(2), [element, setElement] = react.useState(null), rect = ui.useElementRect(element), window2 = useRowWindow({
         element: element,
         keyAt: index2 => rows[index2]?.id ?? index2,
         rowCount: rows.length
@@ -4129,14 +4576,14 @@ function RunsTable({now: now, onSelectRun: onSelectRun, onSort: onSort, rows: ro
                         /* @__PURE__ */ jsxRuntime.jsx("th", {
                             style: {
                                 ...styles.head,
-                                width: ASSIGNEES_WIDTH
+                                width: tasksWidthOf(rect?.width)
                             },
                             children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                                 padding: 2,
                                 children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                                     muted: !0,
                                     size: 1,
-                                    children: "Assignees"
+                                    children: "Tasks"
                                 })
                             })
                         }), 
@@ -4164,7 +4611,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__ */ jsxRuntime.jsx(SpacerRow, {
@@ -4175,7 +4626,7 @@ function RunsTable({now: now, onSelectRun: onSelectRun, onSort: onSort, rows: ro
     });
 }
 
-const RunTableRow = react.memo(function({dataIndex: dataIndex, measureRow: measureRow, now: now, onSelectRun: onSelectRun, row: row, scope: scope, scopedToWorkflow: scopedToWorkflow, selected: selected}) {
+const RunTableRow = react.memo(function({dataIndex: dataIndex, measureRow: measureRow, now: now, onSelectRun: onSelectRun, row: row, scope: scope, scopedToWorkflow: scopedToWorkflow, selected: selected, taskRoom: taskRoom}) {
     const styles = useTableStyles(), documentInset = index.useSpaceToken(1);
     /* @__PURE__ */
     return jsxRuntime.jsxs(TableRowCard, {
@@ -4205,7 +4656,8 @@ const RunTableRow = react.memo(function({dataIndex: dataIndex, measureRow: measu
             row: row
         }) : /* @__PURE__ */ jsxRuntime.jsx(OpenCells, {
             now: now,
-            row: row
+            row: row,
+            taskRoom: taskRoom
         }) ]
     });
 });
@@ -4231,7 +4683,7 @@ function DocumentCell({row: row}) {
     });
 }
 
-function OpenCells({now: now, row: row}) {
+function OpenCells({now: now, row: row, taskRoom: taskRoom}) {
     const styles = useTableStyles();
     /* @__PURE__ */
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -4252,17 +4704,23 @@ function OpenCells({now: now, row: row}) {
             })
         }), 
         /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
+            style: {
+                ...styles.cell,
+                overflow: "hidden"
+            },
             children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
                 align: "center",
-                children: /* @__PURE__ */ jsxRuntime.jsx(index.RowAssignees, {
-                    assignees: row.assignees
+                children: /* @__PURE__ */ jsxRuntime.jsx(StageTaskGroups, {
+                    now: now,
+                    room: taskRoom,
+                    tasks: row.tasks
                 })
             })
         }), 
         /* @__PURE__ */ jsxRuntime.jsx("td", {
             style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(AttentionCell, {
+                now: now,
                 row: row
             })
         }) ]
@@ -4299,12 +4757,14 @@ function ClosedCells({now: now, row: row}) {
     });
 }
 
-function AttentionMark({row: row}) {
+function AttentionCell({now: now, row: row}) {
     return row.attentionDetail === void 0 ? null : 
     /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
         align: "center",
-        children: /* @__PURE__ */ jsxRuntime.jsx(AttentionGlyph, {
-            detail: row.attentionDetail
+        children: /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
+            detail: row.attentionDetail,
+            now: now,
+            tasks: row.tasks
         })
     });
 }
@@ -5095,7 +5555,7 @@ function StatusBox({children: children}) {
     });
 }
 
-const EDITORIAL_WORKFLOWS_DOCS_URL = "https://www.sanity.io/docs/editorial-workflows", WORK_TABS = index.TOOL_TABS.filter(tab => tab.value !== "definitions");
+const WORKFLOWS_DOCS_URL = "https://www.sanity.io/docs/workflows", WORK_TABS = index.TOOL_TABS.filter(tab => tab.value !== "definitions");
 
 function WorkflowsToolRoot() {
     const router$1 = router.useRouter(), telemetry = workflowReact.useWorkflowTelemetry(), {color: color} = ui.useTheme_v2(), [filterSlot, setFilterSlot] = react.useState(null), route = index.toolRoute(router$1.state), previews = useToolPreviews(), setTab = next => router$1.navigate(index.toolTabState(next)), selectTab = next => {
@@ -5210,7 +5670,7 @@ function ToolOverflowMenu({onOpenDefinitions: onOpenDefinitions}) {
             /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
                 as: "a",
                 fontSize: 1,
-                href: EDITORIAL_WORKFLOWS_DOCS_URL,
+                href: WORKFLOWS_DOCS_URL,
                 iconRight: Launch.LaunchIcon,
                 rel: "noopener noreferrer",
                 target: "_blank",