@sanity/workflow-studio-plugin 0.32.0 → 0.34.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"), workflowComponents = require("@sanity/workflow-components"), workflowEngine = require("@sanity/workflow-engine"), reactVirtual = require("@tanstack/react-virtual"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), ChevronLeft = require("@sanity/icons/ChevronLeft"), Close = require("@sanity/icons/Close"), Expand = require("@sanity/icons/Expand"), react$1 = require("motion/react"), Calendar = require("@sanity/icons/Calendar"), ErrorOutline = require("@sanity/icons/ErrorOutline"), User = require("@sanity/icons/User"), Users = require("@sanity/icons/Users"), reactDom = require("react-dom"), styledComponents = require("styled-components"), types = require("@sanity/types"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), Search = require("@sanity/icons/Search"), 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"), menu = require("@sanity/ui/menu"), 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"), workflowComponents = require("@sanity/workflow-components"), sanity = require("sanity"), workflowEngine = require("@sanity/workflow-engine"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), ChevronLeft = require("@sanity/icons/ChevronLeft"), Close = require("@sanity/icons/Close"), Expand = require("@sanity/icons/Expand"), react$1 = require("motion/react"), reactVirtual = require("@tanstack/react-virtual"), reactDom = require("react-dom"), styledComponents = require("styled-components"), types = require("@sanity/types"), User = require("@sanity/icons/User"), popover = require("@sanity/ui/popover"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), Search = require("@sanity/icons/Search"), workflowDiagram = require("@sanity/workflow-diagram");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -22,401 +22,6 @@ function MutedNote({text: text}) {
     });
 }
 
-function documentRefsOf(instance) {
-    const seen = /* @__PURE__ */ new Map;
-    for (const ref of workflowEngine.entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
-    return [ ...seen.values() ];
-}
-
-function rootInstanceOf(instance, byId) {
-    const rootRef = instance.ancestors[0];
-    return rootRef ? byId.get(workflowEngine.toBareId(rootRef.id)) ?? instance : instance;
-}
-
-function openActivitiesOf(instance) {
-    return (workflowEngine.findOpenStageEntry(instance)?.activities ?? []).filter(activity => index.isOpenActivityStatus(activity.status));
-}
-
-function overdueTasks(instance, now) {
-    return openActivitiesOf(instance).filter(activity => index.dueDatesOf(activity.fields ?? []).some(due => index.isDueDatePast(due, now)));
-}
-
-function earliestDue(activity) {
-    return earliestOf(index.dueDatesOf(activity.fields ?? []));
-}
-
-function earliestPastDue(activity, now) {
-    return earliestPastDueAcross([ activity ], 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 values) {
-        const time = index.parseStoredDateValue(value)?.getTime();
-        time !== void 0 && (earliest === void 0 || time < earliest.time) && (earliest = {
-            time: time,
-            value: value
-        });
-    }
-    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, openedAt: openedAt, roleAliases: roleAliases, title: title} = args;
-    return {
-        name: entry.name,
-        title: title,
-        assignees: index.assigneesOf(entry.fields ?? []),
-        roleAliases: roleAliases,
-        openedAt: openedAt,
-        due: earliestDue(entry),
-        overdueSince: earliestPastDue(entry, now),
-        status: entry.status
-    };
-}
-
-function humanTask(args) {
-    const {activity: activity, autonomy: autonomy, entry: entry, now: now, openedAt: openedAt, roleAliases: roleAliases, stageName: stageName} = args;
-    return entry === void 0 ? [] : isAutomatedActivity({
-        activity: activity,
-        autonomy: autonomy,
-        stageName: stageName
-    }) ? [] : [ taskOf({
-        entry: entry,
-        now: now,
-        openedAt: openedAt,
-        roleAliases: roleAliases,
-        title: index.activityLabel(activity)
-    }) ];
-}
-
-function undeclaredTasks(args) {
-    const {definition: definition, now: now, open: open, openedAt: openedAt, roleAliases: roleAliases, seen: seen, stageName: stageName} = args;
-    return open.filter(entry => !seen.has(entry.name)).map(entry => taskOf({
-        entry: entry,
-        now: now,
-        openedAt: openedAt,
-        roleAliases: roleAliases,
-        title: index.findActivity({
-            activityName: entry.name,
-            definition: definition,
-            stageName: stageName
-        }).title
-    }));
-}
-
-function definitionForPinned(definition, pinnedVersion) {
-    if (!(definition === void 0 || definition.version !== pinnedVersion)) return definition;
-}
-
-function stageTasksOf(args) {
-    const {definition: definition, instance: instance, now: now} = args, stageEntry = workflowEngine.findOpenStageEntry(instance);
-    if (stageEntry === void 0) return [];
-    const listed = listedStageActivities(stageEntry);
-    if (listed.length === 0) return [];
-    const openedAt = stageEntry.enteredAt, pinnedDefinition = definitionForPinned(definition, instance.pinnedVersion), autonomy = pinnedDefinition === void 0 ? void 0 : cachedAutonomy(pinnedDefinition), roleAliases = pinnedDefinition?.roleAliases, stageName = instance.currentStage, openByName = new Map(listed.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,
-        openedAt: openedAt,
-        roleAliases: roleAliases,
-        stageName: stageName
-    })), ...undeclaredTasks({
-        definition: definition,
-        now: now,
-        open: listed,
-        openedAt: openedAt,
-        roleAliases: roleAliases,
-        seen: new Set(declared.map(activity => activity.name)),
-        stageName: stageName
-    }) ];
-}
-
-function listedStageActivities(stage) {
-    return stage.activities.filter(entry => index.isOpenActivityStatus(entry.status) || entry.status === "failed");
-}
-
-function groupWidthOf(task, metrics) {
-    const mark = taskAssignmentMarkOf(task.assignees), faces = mark.kind === "held" ? mark.members.length : 1;
-    return metrics.face + (faces - 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 taskAssignmentMarkOf(assignees) {
-    const members = assignees.filter(assignee => assignee.type === "user");
-    if (members.length > 0) return {
-        kind: "held",
-        members: members
-    };
-    const roles = assignees.flatMap(assignee => assignee.type === "role" ? [ assignee.role ] : []);
-    return roles.length > 0 ? {
-        kind: "routed",
-        roles: roles
-    } : {
-        kind: "unassigned"
-    };
-}
-
-function runsScopeOf(row) {
-    return row.endedAt === void 0 ? "open" : "closed";
-}
-
-function rowHasTaskHeldBy(row, who) {
-    return row.tasks.some(task => workflowComponents.assignmentMatch(task.assignees, who) !== void 0);
-}
-
-function runCountsByWorkflow(rows) {
-    return index.countBy(rows, row => [ row.workflowName ]);
-}
-
-function runCountsByAssignee(rows) {
-    return index.countBy(rows, row => new Set(index.userIdsOf(row.assignees)));
-}
-
-function runCountsByRole(rows) {
-    return index.countBy(rows, row => new Set(row.assignees.flatMap(assignee => assignee.type === "role" ? [ assignee.role ] : [])));
-}
-
-function runAttentionCounts(rows) {
-    let blocked = 0, overdue = 0;
-    for (const row of rows) row.attention === "blocked" && (blocked += 1), row.attention === "overdue" && (overdue += 1);
-    return {
-        blocked: blocked,
-        overdue: overdue
-    };
-}
-
-function unassignedRunCount(rows) {
-    return rows.filter(row => row.assignmentStateCounts.unrouted > 0).length;
-}
-
-function runCountsByStage(rows) {
-    return index.countBy(rows, row => [ row.stage ]);
-}
-
-function runCountsByRelease(rows) {
-    return index.countBy(rows, row => new Set(row.releases));
-}
-
-function noReleaseRunCount(rows) {
-    return rows.filter(row => row.releases.length === 0).length;
-}
-
-function releasesOfPerspective(perspective) {
-    return Array.isArray(perspective) ? perspective.filter(name => name !== "drafts") : [];
-}
-
-function runRowsOf(args) {
-    const byId = new Map(args.previews.map(preview => [ preview._id, preview ]));
-    return args.previews.map(preview => runRowOf({
-        byId: byId,
-        definitions: args.definitions,
-        now: args.now,
-        preview: preview
-    }));
-}
-
-function runRowOf(args) {
-    const {byId: byId, definitions: definitions, now: now, preview: preview} = args, definition = definitions.get(preview.definition), settled = workflowEngine.terminalState(preview) !== "in-flight", held = settled ? NO_ASSIGNEES : openAssignees(preview), attentionDetail = settled ? void 0 : blockedRunDetail({
-        definition: definition,
-        preview: preview
-    }) ?? overdueRunDetail({
-        definition: definition,
-        now: now,
-        preview: preview
-    });
-    return {
-        id: preview._id,
-        document: documentRefsOf(rootInstanceOf(preview, byId))[0],
-        workflowName: preview.definition,
-        workflowTitle: definition?.title ?? preview.definition,
-        stage: preview.currentStage,
-        stageTitle: index.stageTitle(definition, preview.currentStage),
-        releases: releasesOfPerspective(preview.perspective),
-        startedAt: preview.startedAt,
-        endedAt: settled ? preview.completedAt ?? preview.abortedAt : void 0,
-        outcome: outcomeOf(preview, definition),
-        attention: attentionKindOf(attentionDetail),
-        attentionDetail: attentionDetail,
-        assignees: held.assignees,
-        assignments: held.assignments,
-        assignmentStateCounts: held.counts,
-        tasks: settled ? [] : stageTasksOf({
-            definition: definition,
-            instance: preview,
-            now: now
-        })
-    };
-}
-
-function attentionKindOf(detail) {
-    if (detail !== void 0) return detail.kind === "overdue" ? "overdue" : "blocked";
-}
-
-function outcomeOf(preview, definition) {
-    const state = workflowEngine.terminalState(preview);
-    if (state !== "in-flight") return state === "aborted" ? "Aborted" : index.stageTitle(definition, preview.currentStage);
-}
-
-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];
-    if (only !== void 0) return {
-        kind: "blocked",
-        task: titleOf(only.name)
-    };
-    const stuck = stuckEffectOf({
-        definition: definition,
-        preview: preview,
-        stage: stage
-    });
-    return stuck === void 0 ? void 0 : {
-        effect: stuck.effect.title ?? stuck.effect.name,
-        failed: stuck.failed,
-        kind: "blocked-effect"
-    };
-}
-
-function stuckEffectOf(args) {
-    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) {
-    const {definition: definition, preview: preview, stage: stage} = args;
-    if (definition === void 0 || definition.version !== preview.pinnedVersion || stage === void 0) return;
-    const stageNode = workflowEngine.findStageNode({
-        definition: definition,
-        stageName: stage.name
-    }), unresolved = new Set(stage.activities.filter(activity => activity.status !== "done" && activity.status !== "skipped").map(activity => activity.name)), declared = new Set((stageNode?.activities ?? []).filter(activity => unresolved.has(activity.name)).flatMap(activity => (activity.actions ?? []).flatMap(action => (action.effects ?? []).map(e => e.name))));
-    return [ ...preview.failedEffects ].reverse().find(effect => declared.has(effect.name));
-}
-
-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;
-    return {
-        count: late.length,
-        due: earliestPastDueAcross(late, now),
-        kind: "overdue",
-        task: only === void 0 ? void 0 : titleOf(only.name)
-    };
-}
-
-function activityTitleResolver(preview, definition) {
-    const stage = workflowEngine.findOpenStageEntry(preview);
-    return {
-        stage: stage,
-        titleOf: activityName => index.findActivity({
-            activityName: activityName,
-            definition: definition,
-            stageName: stage?.name ?? ""
-        }).title
-    };
-}
-
-const NO_ASSIGNEES = {
-    assignees: [],
-    assignments: [],
-    counts: {
-        unrouted: 0,
-        routed: 0,
-        held: 0
-    }
-};
-
-function openAssignees(instance) {
-    const users = /* @__PURE__ */ new Map, roles = /* @__PURE__ */ new Map, assignments = workflowEngine.openActivityAssignments(instance), counts = {
-        unrouted: 0,
-        routed: 0,
-        held: 0
-    };
-    for (const members of assignments) counts[workflowEngine.assignmentState(members)] += 1, 
-    recordAssignees(workflowEngine.activeAssignmentMembers(members), {
-        users: users,
-        roles: roles
-    });
-    return {
-        assignees: [ ...users.values(), ...roles.values() ],
-        assignments: assignments,
-        counts: counts
-    };
-}
-
-function recordAssignees(assignees, maps) {
-    for (const assignee of assignees) (assignee.type === "user" ? maps.users : maps.roles).set(assignee.type === "user" ? assignee.id : assignee.role, assignee);
-}
-
 function clausePolarity(operator) {
     return operator === "isNot" || operator === "isNoneOf" ? "isNot" : "is";
 }
@@ -437,7 +42,7 @@ function applyRunFilters(rows, args) {
 
 function previewsMatchingRunFilters(args) {
     if (args.filters.clauses === void 0) return args.previews;
-    const rows = runRowsOf({
+    const rows = index.runRowsOf({
         definitions: args.definitions,
         now: args.now,
         previews: args.previews
@@ -790,7 +395,7 @@ function deployedPhrase(definition) {
     const deployedAt = deployedAtOf(definition);
     if (deployedAt === void 0) return `v${definition.version}`;
     const ago = index.formatTimeAgo(deployedAt);
-    return ago === "" ? index.formatShortDateTime(deployedAt) : `${index.formatShortDateTime(deployedAt)} (${ago})`;
+    return ago === "" ? workflowComponents._formatShortDateTime(deployedAt) : `${workflowComponents._formatShortDateTime(deployedAt)} (${ago})`;
 }
 
 const INSTANCES_READ_FAILED = "Couldn’t load workflow data. Try again later.", TOOL_PANEL_PADDING = 3, TOOL_HEADING_PADDING = 2, PANEL_STEP = 3;
@@ -808,207 +413,6 @@ function TabStatusRow({children: children}) {
     });
 }
 
-function useTableStyles() {
-    const {color: color} = ui.useTheme_v2(), headTop = index.useSpaceToken(3), cellX = index.useSpaceToken(2);
-    return react.useMemo(() => ({
-        cell: {
-            borderBottom: `1px solid ${color.border}`,
-            boxSizing: "border-box",
-            padding: `0 ${cellX}px`,
-            verticalAlign: "middle",
-            whiteSpace: "nowrap"
-        },
-        head: {
-            background: color.bg,
-            borderBottom: `1px solid ${color.border}`,
-            boxSizing: "border-box",
-            padding: `${headTop}px 0 6px`,
-            position: "sticky",
-            textAlign: "left",
-            top: 0,
-            zIndex: 1
-        }
-    }), [ cellX, color, headTop ]);
-}
-
-function scrollParentOf(el) {
-    for (let node = el.parentElement; node !== null; node = node.parentElement) {
-        const overflowY = getComputedStyle(node).overflowY;
-        if (overflowY === "auto" || overflowY === "scroll") return node;
-    }
-}
-
-function useRowWindow(args) {
-    const {element: element, keyAt: keyAt, rowCount: rowCount} = args, [scroller, setScroller] = react.useState(null);
-    react.useLayoutEffect(() => {
-        setScroller(element === null ? null : scrollParentOf(element) ?? null);
-    }, [ element ]);
-    const [margin, setMargin] = react.useState(0);
-    react.useLayoutEffect(() => {
-        element === null || scroller === null || setMargin(element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop);
-    }, [ element, rowCount, scroller ]);
-    const virtualizer = reactVirtual.useVirtualizer({
-        count: rowCount,
-        estimateSize: () => 44,
-        getItemKey: keyAt,
-        getScrollElement: () => scroller,
-        overscan: 10,
-        scrollMargin: margin
-    }), items = virtualizer.getVirtualItems(), first = items[0], last = items[items.length - 1];
-    return {
-        items: items,
-        measureRow: virtualizer.measureElement,
-        padBottom: last === void 0 ? 0 : virtualizer.getTotalSize() - (last.end - margin),
-        padTop: first === void 0 ? 0 : first.start - margin
-    };
-}
-
-function SpacerRow({height: height}) {
-    return height <= 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("tr", {
-        "aria-hidden": !0,
-        style: {
-            height: height
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx("td", {
-            colSpan: 99,
-            style: {
-                border: 0,
-                padding: 0
-            }
-        })
-    });
-}
-
-const TABLE_TIME_WIDTH = 112, TABLE_WORKFLOW_WIDTH = {
-    cap: 260,
-    fraction: .18
-}, TABLE_STAGE_WIDTH = {
-    cap: 260,
-    fraction: .16
-};
-
-function SortableHeaderCells({children: children, columns: columns, onSort: onSort, sort: sort, styles: styles, tableWidth: tableWidth, widthOf: widthOf}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [ columns.map(column => {
-            const width = widthOf(column, tableWidth);
-            /* @__PURE__ */
-            return jsxRuntime.jsx("th", {
-                style: {
-                    ...styles.head,
-                    ...width === void 0 ? {} : {
-                        width: width
-                    }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(SortHeaderButton, {
-                    active: sort.key === column.key,
-                    dir: sort.dir,
-                    label: column.label,
-                    onSort: () => onSort(column.key)
-                })
-            }, column.key);
-        }), children ]
-    });
-}
-
-function VirtualTable({keyAt: keyAt, renderHeader: renderHeader, renderRow: renderRow, rowCount: rowCount}) {
-    const styles = useTableStyles(), [element, setElement] = react.useState(null), tableWidth = useTableWidth(element), window2 = useRowWindow({
-        element: element,
-        keyAt: keyAt,
-        rowCount: rowCount
-    });
-    /* @__PURE__ */
-    return jsxRuntime.jsx("div", {
-        ref: setElement,
-        style: {
-            overflowX: "clip",
-            ...tableWidth === void 0 ? {
-                visibility: "hidden"
-            } : {}
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
-            style: {
-                borderCollapse: "separate",
-                borderSpacing: 0,
-                tableLayout: "fixed",
-                width: "100%"
-            },
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx("thead", {
-                children: /* @__PURE__ */ jsxRuntime.jsx("tr", {
-                    children: renderHeader({
-                        styles: styles,
-                        tableWidth: tableWidth
-                    })
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsxs("tbody", {
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(SpacerRow, {
-                    height: window2.padTop
-                }), window2.items.map(item => renderRow({
-                    index: item.index,
-                    key: item.key,
-                    measureRow: window2.measureRow,
-                    tableWidth: tableWidth
-                })), 
-                /* @__PURE__ */ jsxRuntime.jsx(SpacerRow, {
-                    height: window2.padBottom
-                }) ]
-            }) ]
-        })
-    });
-}
-
-function useTableWidth(element) {
-    const observed = ui.useElementRect(element), [mounted, setMounted] = react.useState(void 0);
-    return react.useLayoutEffect(() => {
-        setMounted(element === null ? void 0 : element.getBoundingClientRect().width);
-    }, [ element ]), observed?.width ?? mounted;
-}
-
-function SortHeaderButton({active: active, dir: dir, label: label, onSort: onSort}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Button, {
-        fontSize: 1,
-        mode: "bleed",
-        onClick: onSort,
-        padding: 2,
-        text: `${label}${active ? dir === "asc" ? " ↑" : " ↓" : ""}`
-    });
-}
-
-function TableRowCard({children: children, dataIndex: dataIndex, onClick: onClick, onKeyDown: onKeyDown, rowRef: rowRef, selected: selected, selectedRef: selectedRef}) {
-    const setRow = react.useCallback(element => {
-        rowRef?.(element), selected === !0 && selectedRef?.(element);
-    }, [ rowRef, selected, selectedRef ]);
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
-        as: "tr",
-        "data-as": "a",
-        onClick: event => {
-            event.currentTarget.focus(), onClick();
-        },
-        onKeyDown: selected === !0 ? onKeyDown : void 0,
-        style: {
-            cursor: "pointer",
-            display: "table-row"
-        },
-        ...dataIndex === void 0 ? {} : {
-            "data-index": dataIndex
-        },
-        ...rowRef === void 0 && selectedRef === void 0 ? {} : {
-            ref: setRow
-        },
-        ...selected === void 0 ? {} : {
-            "aria-selected": selected,
-            pressed: selected,
-            tabIndex: selected ? 0 : -1
-        },
-        children: children
-    });
-}
-
 const logged = /* @__PURE__ */ new WeakSet;
 
 function logReadFailure(what, error) {
@@ -1206,7 +610,7 @@ function UndeployedWorkflows({notices: notices}) {
     });
 }
 
-const COLUMNS$1 = [ {
+const COLUMNS = [ {
     key: "workflow",
     label: "Workflow"
 }, {
@@ -1225,14 +629,14 @@ const COLUMNS$1 = [ {
 
 function DefinitionsTable({countKnown: countKnown, now: now, onOpenWorkflow: onOpenWorkflow, rows: rows}) {
     const head = {
-        ...useTableStyles().head,
+        ...index.useTableStyles().head,
         padding: "14px 0 6px"
     }, [sort, setSort] = react.useState(DEFAULT_DEFINITION_SORT), sorted = react.useMemo(() => sortDefinitionRows({
         rows: rows,
         sort: sort
     }), [ rows, sort ]), [element, setElement] = react.useState(null);
     return react.useEffect(() => {
-        element !== null && scrollParentOf(element)?.scrollTo({
+        element !== null && index.scrollParentOf(element)?.scrollTo({
             top: 0
         });
     }, [ element, sort ]), /* @__PURE__ */ jsxRuntime.jsxs("table", {
@@ -1246,14 +650,14 @@ function DefinitionsTable({countKnown: countKnown, now: now, onOpenWorkflow: onO
         children: [ 
         /* @__PURE__ */ jsxRuntime.jsx("thead", {
             children: /* @__PURE__ */ jsxRuntime.jsxs("tr", {
-                children: [ COLUMNS$1.map(column => /* @__PURE__ */ jsxRuntime.jsx("th", {
+                children: [ COLUMNS.map(column => /* @__PURE__ */ jsxRuntime.jsx("th", {
                     style: {
                         ...head,
                         ...column.width === void 0 ? {} : {
                             width: column.width
                         }
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(SortHeaderButton, {
+                    children: /* @__PURE__ */ jsxRuntime.jsx(index.SortHeaderButton, {
                         active: sort.key === column.key,
                         dir: sort.dir,
                         label: column.label,
@@ -1289,13 +693,13 @@ function DefinitionsTable({countKnown: countKnown, now: now, onOpenWorkflow: onO
 
 function DefinitionRow({countKnown: countKnown, now: now, onOpen: onOpen, row: row}) {
     const cell = {
-        ...useTableStyles().cell,
+        ...index.useTableStyles().cell,
         padding: "16px 8px",
         verticalAlign: "top",
         whiteSpace: "normal"
     }, titleGap = index.useSpaceToken(5), alert = definitionAlert(row);
     /* @__PURE__ */
-    return jsxRuntime.jsxs(TableRowCard, {
+    return jsxRuntime.jsxs(index.TableRowCard, {
         onClick: onOpen,
         children: [ 
         /* @__PURE__ */ jsxRuntime.jsx("td", {
@@ -1304,7 +708,7 @@ function DefinitionRow({countKnown: countKnown, now: now, onOpen: onOpen, row: r
                 paddingRight: titleGap
             },
             children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                space: 3,
+                gap: 3,
                 children: [ 
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                     size: 1,
@@ -1319,7 +723,7 @@ function DefinitionRow({countKnown: countKnown, now: now, onOpen: onOpen, row: r
         }), 
         /* @__PURE__ */ jsxRuntime.jsx("td", {
             style: cell,
-            children: row.deployedAt === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.AgoStamp, {
+            children: row.deployedAt === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.AgoStamp, {
                 at: row.deployedAt,
                 now: now
             })
@@ -1423,7 +827,7 @@ function useDocPreviewTitles(documents) {
         }, evaluate = () => {
             for (const {doc: doc, bareId: bareId} of localDocs) {
                 const probe = actualTypes.read(bareId);
-                if (probe === null) {
+                if (probe === null || probe === index.UNREADABLE_DOCUMENT) {
                     dropPreview(doc.id), resolved.add(doc.id);
                     continue;
                 }
@@ -1501,80 +905,12 @@ function outsiderIds(args) {
     return [ ...new Set(candidates.filter(id => !memberIds.has(id))) ];
 }
 
-function forMeRowId(instanceId, activityName) {
-    return `${instanceId}\t${activityName}`;
-}
-
-function forMeTaskRowsOf(args) {
-    const {now: now, rows: rows, who: who} = args;
-    return rows.flatMap(row => row.tasks.flatMap(task => {
-        const assignment = index.assignmentHolding(task.assignees, who);
-        if (assignment === "other") return [];
-        const attentionDetail = taskAttentionDetail({
-            now: now,
-            row: row,
-            task: task
-        });
-        return [ {
-            id: forMeRowId(row.id, task.name),
-            instanceId: row.id,
-            activityName: task.name,
-            title: task.title,
-            document: row.document,
-            workflowTitle: row.workflowTitle,
-            releases: row.releases,
-            openedAt: task.openedAt,
-            due: task.due,
-            attention: attentionKindOf(attentionDetail),
-            attentionDetail: attentionDetail,
-            assignees: task.assignees,
-            assignment: assignment
-        } ];
-    }));
-}
-
-function forMeSummaryOf(rows) {
-    const documents = new Set(rows.flatMap(row => row.document === void 0 ? [] : [ row.document.id ])), releases = new Set(rows.flatMap(row => row.releases));
-    return {
-        lead: rows.length === 0 ? "No tasks" : pluralize__default.default("task", rows.length, !0),
-        subjects: `on ${pluralize__default.default("document", documents.size, !0)}, and ${pluralize__default.default("release", releases.size, !0)}`
-    };
-}
-
-function forMeSectionsOf(rows) {
-    return {
-        assignedToUser: rows.filter(row => row.assignment === "you"),
-        assignedToRoles: rows.filter(row => row.assignment === "role")
-    };
-}
-
-function resolveForMeAddress(args) {
-    const {rows: rows, run: run, task: task} = args;
-    if (run === void 0) return;
-    if (task !== void 0) return rows.some(row => row.instanceId === run && row.activityName === task) ? {
-        run: run,
-        task: task
-    } : void 0;
-    const first = rows.find(row => row.instanceId === run);
-    return first === void 0 ? void 0 : {
-        run: first.instanceId,
-        task: first.activityName
-    };
+function documentTitleKey(row, titles) {
+    return row.document === void 0 ? "" : titles.get(row.document.id) ?? "";
 }
 
-function taskAttentionDetail(args) {
-    const {now: now, row: row, task: task} = args;
-    if (task.status === "failed") return {
-        kind: "blocked",
-        task: task.title
-    };
-    if (row.attention === "blocked") return row.attentionDetail;
-    if (task.due !== void 0 && index.isDueDatePast(task.due, now)) return {
-        count: 1,
-        due: task.due,
-        kind: "overdue",
-        task: task.title
-    };
+function namedRowComparator(key, titles) {
+    return key === "document" ? (a, b) => documentTitleKey(a, titles).localeCompare(documentTitleKey(b, titles)) : (a, b) => a.workflowTitle.localeCompare(b.workflowTitle);
 }
 
 function defaultForMeSort() {
@@ -1611,17 +947,11 @@ function forMeCompare(args) {
     return (a, b) => dir * named(a, b);
 }
 
-function documentTitleKey$1(row, titles) {
-    return row.document === void 0 ? "" : titles.get(row.document.id) ?? "";
-}
-
 function namedCompare(key, titles) {
     switch (key) {
       case "document":
-        return (a, b) => documentTitleKey$1(a, titles).localeCompare(documentTitleKey$1(b, titles));
-
       case "workflow":
-        return (a, b) => a.workflowTitle.localeCompare(b.workflowTitle);
+        return namedRowComparator(key, titles);
 
       default:
         return (a, b) => a.title.localeCompare(b.title);
@@ -1869,7 +1199,7 @@ function PanelResizeHandle({enabled: enabled, onClose: onClose, onCommit: onComm
                 top: 0
             }
         }), 
-        /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+        /* @__PURE__ */ jsxRuntime.jsx(workflowComponents._HoverHint, {
             anchor: anchor,
             disabled: !enabled || dragging,
             open: pointed,
@@ -2351,7 +1681,7 @@ function ResolvedTaskBody({activityName: activityName, entry: entry}) {
     }) : /* @__PURE__ */ jsxRuntime.jsx(index.ActivityDetailBody, {
         activityName: activityName,
         definition: definition,
-        document: documentRefsOf(entry.instance)[0],
+        document: index.documentRefsOf(entry.instance)[0],
         entry: entry,
         layout: "panel",
         source: "tool-for-me",
@@ -2379,567 +1709,96 @@ function ForMeDetailPanel({activityName: activityName, instanceId: instanceId, o
     });
 }
 
-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)
-    });
-}
-
-function DueStamp({due: due, now: now}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Flex, {
-        align: "center",
-        children: /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
-            text: index.dueMomentSentence(due, now),
-            children: index.isDueDatePast(due, now) ? /* @__PURE__ */ jsxRuntime.jsx(LateSpan, {
-                now: now,
-                since: due
-            }) : 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                style: {
-                    whiteSpace: "nowrap"
-                },
-                children: index.formatDate(due)
-            })
-        })
-    });
-}
-
-function resolveColumnWidth(width, tableWidth) {
-    return typeof width != "object" ? width : tableWidth === void 0 ? `${width.fraction * 100}%` : Math.min(width.cap, Math.round(tableWidth * width.fraction));
-}
-
-function fillColumnWidth(args) {
-    const {columns: columns, tableWidth: tableWidth, trailingWidth: trailingWidth} = args;
-    if (tableWidth === void 0) return;
-    const fixed = columns.reduce((sum, column) => {
-        const width = resolveColumnWidth(column.width, tableWidth);
-        return typeof width == "number" ? sum + width : sum;
-    }, trailingWidth);
-    return Math.max(160, Math.floor(tableWidth - fixed));
-}
-
-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.id}-${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}) {
-    const mark = taskAssignmentMarkOf(assignees);
-    return mark.kind === "unassigned" ? /* @__PURE__ */ jsxRuntime.jsx(PersonToken, {}) : mark.kind === "routed" ? /* @__PURE__ */ jsxRuntime.jsx(PersonToken, {
-        routed: !0
-    }) : /* @__PURE__ */ jsxRuntime.jsx(OverlappedHolders, {
-        assignees: mark.members
-    });
-}
-
-function HolderFace({assignee: assignee, displayById: displayById}) {
-    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(), displayById = useDisplayById(index.userIdsOf(assignees)), ring = `0 0 0 ${HOLDER_RING}px ${color.bg}`;
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Flex, {
-        align: "center",
-        style: {
-            flexShrink: 0,
-            isolation: "isolate"
-        },
-        children: assignees.map((assignee, index2) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            style: {
-                borderRadius: "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 PersonToken({routed: routed = !1}) {
-    const size = index.useAvatarSize(), {color: color} = ui.useTheme_v2();
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Box, {
-        "aria-label": routed ? "Routed, no person assigned" : "Unassigned",
-        role: "img",
-        style: {
-            flexShrink: 0,
-            height: size,
-            position: "relative",
-            width: size
-        },
+function ForMeTables({loading: loading, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, onSort: onSort, selectedId: selectedId, selectedRef: selectedRef, sort: sort, sections: sections}) {
+    return loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            align: "center",
-            justify: "center",
-            style: {
-                border: `1px dashed ${color.border}`,
-                borderRadius: "50%",
-                boxSizing: "border-box",
-                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
-                    }
-                })
-            })
-        }), routed ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-            radius: 1,
-            tone: "primary",
-            style: {
-                bottom: -3,
-                position: "absolute",
-                right: -3
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                align: "center",
-                justify: "center",
-                style: {
-                    height: 13,
-                    width: 13
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    size: 0,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Users.UsersIcon, {})
-                })
+        /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+            label: "Loading…",
+            padding: 2
+        }), selectedId === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(LoadingTablePlaceholder, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.ForMeTable, {
+                now: now,
+                onNavigateKey: onNavigateKey,
+                onSelect: onSelect,
+                onSort: onSort,
+                rows: [],
+                selectedId: void 0,
+                selectedRef: selectedRef,
+                sort: sort
             })
-        }) : null ]
-    });
-}
-
-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,
+        }) ]
+    }) : sections.assignedToUser.length === 0 && sections.assignedToRoles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.ForMeEmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        gap: 6,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(index.OverlineHeading, {
-            children: "Tasks in this stage"
+        /* @__PURE__ */ jsxRuntime.jsx(ForMeSection, {
+            description: /* @__PURE__ */ jsxRuntime.jsx(ForMeSectionCount, {
+                rows: sections.assignedToUser
+            }),
+            now: now,
+            onNavigateKey: onNavigateKey,
+            onSelect: onSelect,
+            onSort: onSort,
+            rows: sections.assignedToUser,
+            selectedId: selectedId,
+            selectedRef: selectedRef,
+            sort: sort,
+            title: index.FOR_ME_SECTION_COPY.assignedTitle
         }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
-            gap: 4,
-            children: tasks.map(task => /* @__PURE__ */ jsxRuntime.jsx(TaskCardRow, {
-                displayById: displayById,
-                now: now,
-                task: task
-            }, task.name))
+        /* @__PURE__ */ jsxRuntime.jsx(ForMeSection, {
+            description: index.FOR_ME_SECTION_COPY.roleDescription,
+            now: now,
+            onNavigateKey: onNavigateKey,
+            onSelect: onSelect,
+            onSort: onSort,
+            rows: sections.assignedToRoles,
+            selectedId: selectedId,
+            selectedRef: selectedRef,
+            sort: sort,
+            title: index.FOR_ME_SECTION_COPY.roleTitle
         }) ]
     });
 }
 
-function TaskCardRow({displayById: displayById, now: now, task: task}) {
-    const mark = taskAssignmentMarkOf(task.assignees);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Stack, {
+function ForMeSection({description: description, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, onSort: onSort, rows: rows, selectedId: selectedId, selectedRef: selectedRef, sort: sort, title: title}) {
+    return rows.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
         gap: 3,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            gap: 2,
-            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
-                }) ]
-            }), task.due === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: index.dueMomentSentence(task.due, now)
-            }) ]
+        /* @__PURE__ */ jsxRuntime.jsx(index.ForMeSectionHeading, {
+            description: description,
+            title: title
         }), 
-        /* @__PURE__ */ jsxRuntime.jsx(AssignmentLine, {
-            displayById: displayById,
-            mark: mark,
+        /* @__PURE__ */ jsxRuntime.jsx(index.ForMeTable, {
             now: now,
-            openedAt: task.openedAt,
-            roleAliases: task.roleAliases
-        }) ]
-    });
-}
-
-function AssignmentLine({displayById: displayById, mark: mark, now: now, openedAt: openedAt, roleAliases: roleAliases}) {
-    return mark.kind === "unassigned" ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(PersonToken, {}), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: "Unassigned"
+            onNavigateKey: onNavigateKey,
+            onSelect: onSelect,
+            onSort: onSort,
+            rows: rows,
+            selectedId: selectedId,
+            selectedRef: selectedRef,
+            sort: sort
         }) ]
-    }) : mark.kind === "routed" ? /* @__PURE__ */ jsxRuntime.jsx(RoutedAssignmentLine, {
-        mark: mark,
-        now: now,
-        openedAt: openedAt,
-        roleAliases: roleAliases
-    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
-        gap: 2,
-        children: mark.members.map((assignee, index2) => /* @__PURE__ */ 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: displayById.get(assignee.id)?.label ?? assignee.id
-            }) ]
-        }, holderKey(assignee, index2)))
     });
 }
 
-function RoutedAssignmentLine({mark: mark, now: now, openedAt: openedAt, roleAliases: roleAliases}) {
-    const vocabulary = index.useProjectMembers(), count = workflowComponents.roleMemberCount({
-        members: vocabulary.members,
-        requiredRoles: mark.roles,
-        roleAliases: roleAliases
-    }), names = mark.roles.map(role => workflowComponents.roleLabel(workflowComponents.memberRoleFor(vocabulary, role)));
+function ForMeSectionCount({rows: rows}) {
+    const summary = index.forMeSummaryOf(rows);
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Flex, {
         align: "center",
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(PersonToken, {
-            routed: !0
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            gap: 1,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                children: names.join(", ")
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: [ workflowComponents.memberCountLabel(count), " · Open ", index.formatShortAgo(openedAt, now) ]
-            }) ]
-        }) ]
-    });
-}
-
-function overdueAttentionHint(documents) {
-    const task = documents === 1 ? "an overdue task" : "overdue tasks";
-    return `${pluralize__default.default("document", documents, !0)} ${documents === 1 ? "has" : "have"} ${task}`;
-}
-
-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: LATE_FACE
-};
-
-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.AlertChip, {
-        Icon: ATTENTION_FACES.blocked.Icon,
-        hint: hint,
-        label: hint,
-        tone: ATTENTION_FACES.blocked.tone
-    });
-}
-
-const TASK_WIDTH = {
-    cap: 280,
-    fraction: .22
-}, ATTENTION_WIDTH$1 = 48, ASSIGNEE_WIDTH = 96, COLUMNS = [ {
-    key: "document",
-    label: "Workflow subject"
-}, {
-    key: "task",
-    label: "Task",
-    width: TASK_WIDTH
-}, {
-    key: "opened",
-    label: "Opened",
-    width: TABLE_TIME_WIDTH
-}, {
-    key: "workflow",
-    label: "Workflow",
-    width: TABLE_WORKFLOW_WIDTH
-}, {
-    key: "due",
-    label: "Due",
-    width: TABLE_TIME_WIDTH
-} ];
-
-function documentWidthOf$1(tableWidth) {
-    return fillColumnWidth({
-        columns: COLUMNS,
-        tableWidth: tableWidth,
-        trailingWidth: ASSIGNEE_WIDTH + ATTENTION_WIDTH$1
-    });
-}
-
-function ForMeTable({now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, onSort: onSort, rows: rows, selectedId: selectedId, selectedRef: selectedRef, sort: sort}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(VirtualTable, {
-        renderHeader: args => /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCells, {
-            columns: COLUMNS,
-            onSort: onSort,
-            sort: sort,
-            styles: args.styles,
-            tableWidth: args.tableWidth,
-            widthOf: (column, tableWidth) => column.key === "document" ? documentWidthOf$1(tableWidth) : resolveColumnWidth(column.width, tableWidth),
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx("th", {
-                style: {
-                    ...args.styles.head,
-                    width: ASSIGNEE_WIDTH
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                    padding: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                        muted: !0,
-                        size: 1,
-                        children: "Assignee"
-                    })
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx("th", {
-                "aria-label": "Attention",
-                style: {
-                    ...args.styles.head,
-                    width: ATTENTION_WIDTH$1
-                }
-            }) ]
-        }),
-        keyAt: index2 => rows[index2]?.id ?? String(index2),
-        renderRow: ({index: index2, key: key, measureRow: measureRow}) => {
-            const row = rows[index2];
-            return row === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ForMeTableRow, {
-                dataIndex: index2,
-                measureRow: measureRow,
-                now: now,
-                onNavigateKey: onNavigateKey,
-                onSelect: onSelect,
-                row: row,
-                selected: row.id === selectedId,
-                selectedRef: selectedRef
-            }, key);
-        },
-        rowCount: rows.length
-    });
-}
-
-const ForMeTableRow = react.memo(function({dataIndex: dataIndex, measureRow: measureRow, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, row: row, selected: selected, selectedRef: selectedRef}) {
-    const styles = useTableStyles(), documentInset = index.useSpaceToken(1);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(TableRowCard, {
-        dataIndex: dataIndex,
-        onClick: () => onSelect(row),
-        onKeyDown: onNavigateKey,
-        rowRef: measureRow,
-        selected: selected,
-        selectedRef: selectedRef,
+        gap: 1,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: {
-                ...styles.cell,
-                paddingLeft: documentInset
-            },
-            children: row.document === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                textOverflow: "ellipsis",
-                children: "No document"
-            }) : /* @__PURE__ */ jsxRuntime.jsx(index.DocRefFace, {
-                gdr: row.document
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                textOverflow: "ellipsis",
-                children: row.title
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(index.AgoStamp, {
-                at: row.openedAt,
-                now: now
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                textOverflow: "ellipsis",
-                children: row.workflowTitle
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: row.due === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(DueStamp, {
-                due: row.due,
-                now: now
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: {
-                ...styles.cell,
-                overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                align: "center",
-                children: /* @__PURE__ */ jsxRuntime.jsx(index.RowAssignees, {
-                    assignees: row.assignees
-                })
-            })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            weight: "semibold",
+            children: summary.lead
         }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: row.attentionDetail === void 0 || row.attentionDetail.kind === "overdue" ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                align: "center",
-                children: /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
-                    detail: row.attentionDetail,
-                    now: now,
-                    tasks: []
-                })
-            })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: summary.subjects
         }) ]
     });
-});
+}
 
 function AbortWorkflowSection({entry: entry}) {
     const [aborting, setAborting] = react.useState(!1);
@@ -3104,7 +1963,7 @@ function InstanceDetailBody({entry: entry}) {
 }
 
 function SubjectPreview({instance: instance}) {
-    const document2 = documentRefsOf(instance)[0];
+    const document2 = index.documentRefsOf(instance)[0];
     return document2 === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
         gap: 4,
         children: [ 
@@ -3130,7 +1989,7 @@ function useViewportBoundHeight() {
     const [el, setEl] = react.useState(null);
     return react.useLayoutEffect(() => {
         if (el === null) return;
-        const scroller = scrollParentOf(el);
+        const scroller = index.scrollParentOf(el);
         if (scroller === void 0) return;
         const apply = () => {
             const offset = el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop, room = Math.floor(scroller.clientHeight - offset) - PANEL_BOTTOM_MARGIN;
@@ -3217,7 +2076,7 @@ function ForMeWorkArea({previews: previews, loading: loading, model: model, now:
                 loading: loading,
                 previews: previews,
                 resetKey: `${sort.dir}:${sort.key}`,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ForMeBody, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(ForMeTables, {
                     loading: loading,
                     now: now,
                     onNavigateKey: keyboardNavigation.onKeyDown,
@@ -3242,97 +2101,6 @@ function ForMeWorkArea({previews: previews, loading: loading, model: model, now:
     });
 }
 
-function ForMeBody({loading: loading, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, onSort: onSort, selectedId: selectedId, selectedRef: selectedRef, sort: sort, sections: sections}) {
-    return loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
-            label: "Loading…",
-            padding: 2
-        }), selectedId === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(LoadingTablePlaceholder, {
-            children: /* @__PURE__ */ jsxRuntime.jsx(ForMeTable, {
-                now: now,
-                onNavigateKey: onNavigateKey,
-                onSelect: onSelect,
-                onSort: onSort,
-                rows: [],
-                selectedId: void 0,
-                selectedRef: selectedRef,
-                sort: sort
-            })
-        }) ]
-    }) : sections.assignedToUser.length === 0 && sections.assignedToRoles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.ForMeEmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 6,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ForMeSection, {
-            description: /* @__PURE__ */ jsxRuntime.jsx(ForMeSectionCount, {
-                rows: sections.assignedToUser
-            }),
-            now: now,
-            onNavigateKey: onNavigateKey,
-            onSelect: onSelect,
-            onSort: onSort,
-            rows: sections.assignedToUser,
-            selectedId: selectedId,
-            selectedRef: selectedRef,
-            sort: sort,
-            title: index.FOR_ME_SECTION_COPY.assignedTitle
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ForMeSection, {
-            description: index.FOR_ME_SECTION_COPY.roleDescription,
-            now: now,
-            onNavigateKey: onNavigateKey,
-            onSelect: onSelect,
-            onSort: onSort,
-            rows: sections.assignedToRoles,
-            selectedId: selectedId,
-            selectedRef: selectedRef,
-            sort: sort,
-            title: index.FOR_ME_SECTION_COPY.roleTitle
-        }) ]
-    });
-}
-
-function ForMeSection({description: description, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, onSort: onSort, rows: rows, selectedId: selectedId, selectedRef: selectedRef, sort: sort, title: title}) {
-    return rows.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 3,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(index.ForMeSectionHeading, {
-            description: description,
-            title: title
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ForMeTable, {
-            now: now,
-            onNavigateKey: onNavigateKey,
-            onSelect: onSelect,
-            onSort: onSort,
-            rows: rows,
-            selectedId: selectedId,
-            selectedRef: selectedRef,
-            sort: sort
-        }) ]
-    });
-}
-
-function ForMeSectionCount({rows: rows}) {
-    const summary = forMeSummaryOf(rows);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 1,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            size: 1,
-            weight: "semibold",
-            children: summary.lead
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: summary.subjects
-        }) ]
-    });
-}
-
 function defaultRunSort(scope) {
     return scope === "closed" ? {
         key: "ended",
@@ -3358,17 +2126,11 @@ function sortRunRows(args) {
     return [ ...rows ].sort((a, b) => dir * primary(a, b) || tiebreak(a, b));
 }
 
-function documentTitleKey(row, titles) {
-    return row.document === void 0 ? "" : titles.get(row.document.id) ?? "";
-}
-
 function comparatorFor(key, titles) {
     switch (key) {
       case "document":
-        return (a, b) => documentTitleKey(a, titles).localeCompare(documentTitleKey(b, titles));
-
       case "workflow":
-        return (a, b) => a.workflowTitle.localeCompare(b.workflowTitle);
+        return namedRowComparator(key, titles);
 
       case "stage":
         return (a, b) => a.stageTitle.localeCompare(b.stageTitle);
@@ -3392,17 +2154,17 @@ function cardFacts(args) {
     return new Map(args.previews.map(preview => {
         const settled = workflowEngine.terminalState(preview) !== "in-flight";
         return [ preview._id, {
-            tasks: settled ? [] : stageTasksOf({
+            tasks: settled ? [] : index.stageTasksOf({
                 definition: args.definition,
                 instance: preview,
                 now: args.now
             }),
-            overdueDetail: overdueRunDetail({
+            overdueDetail: index.overdueRunDetail({
                 definition: args.definition,
                 now: args.now,
                 preview: preview
             }),
-            blocked: blockedRunDetail({
+            blocked: settled ? void 0 : index.blockedRunDetail({
                 definition: args.definition,
                 preview: preview
             }),
@@ -3699,7 +2461,7 @@ function BoardNavigator({items: items, onActivate: onActivate, navigatorWindow:
 const BOARD_EMPTY_STAGE_NOTE = "No items";
 
 function faceOf(preview, definition) {
-    const document2 = documentRefsOf(preview)[0];
+    const document2 = index.documentRefsOf(preview)[0];
     return document2 ? {
         kind: "document",
         document: document2
@@ -3761,9 +2523,9 @@ function boardDocuments(board) {
 const CARD_RADIUS = 3;
 
 function BoardCard({card: card, wiring: wiring}) {
-    const {facts: facts, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, selectedInstanceId: selectedInstanceId, selectedRef: selectedRef} = wiring, {color: color} = ui.useTheme_v2(), faceInset = index.useSpaceToken(2), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId);
+    const {facts: facts, now: now, onNavigateKey: onNavigateKey, onSelect: onSelect, selectedInstanceId: selectedInstanceId, selectedRef: selectedRef} = wiring, {color: color} = ui.useTheme_v2(), faceInset = index.useSpaceToken(2), markClearance = index.useAlertChipSize() + index.useSpaceToken(3), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId), blocked = held?.blocked;
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
+    return jsxRuntime.jsxs(ui.Card, {
         "aria-pressed": selected,
         as: "button",
         onClick: event => {
@@ -3777,18 +2539,32 @@ function BoardCard({card: card, wiring: wiring}) {
             border: `1px solid ${color.border}`,
             display: "flex",
             flexDirection: "column",
+            position: "relative",
             textAlign: "left",
             width: "100%"
         },
         ...selected ? {
             ref: selectedRef
         } : {},
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        children: [ held === void 0 || blocked === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            style: {
+                position: "absolute",
+                right: faceInset,
+                top: faceInset
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.AttentionMark, {
+                detail: blocked,
+                now: now,
+                tasks: held.tasks
+            })
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
             gap: 2,
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                 style: {
                     minWidth: 0,
+                    paddingRight: blocked === void 0 ? void 0 : markClearance,
                     ...card.face.kind === "document" ? {
                         margin: `${-faceInset}px 0 ${-faceInset}px ${-faceInset}px`
                     } : {}
@@ -3806,23 +2582,22 @@ function BoardCard({card: card, wiring: wiring}) {
                 facts: held,
                 now: now
             }) ]
-        })
+        }) ]
     });
 }
 
 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, {
+    const markOverhang = -index.useCapTrimFor(index.useTextIconSize());
+    return facts.settled || facts.tasks.length === 0 && facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
         padding: 1,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "center",
             gap: 3,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(StageTaskGroups, {
+            /* @__PURE__ */ jsxRuntime.jsx(index.StageTaskGroups, {
                 now: now,
                 tasks: facts.tasks
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            }), facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
                 align: "center",
                 flex: 1,
                 gap: 3,
@@ -3830,15 +2605,11 @@ function CardMetrics({facts: facts, now: now}) {
                 style: {
                     paddingRight: markOverhang
                 },
-                children: [ facts.overdueDetail === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(index.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
-                }) ]
+                })
             }) ]
         })
     });
@@ -3876,18 +2647,18 @@ function StageGroupHeading({facts: facts, group: group}) {
                 flex: "none",
                 gap: 3,
                 children: [ totals.overdue === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
-                    Icon: ATTENTION_FACES.overdue.Icon,
+                    Icon: index.ATTENTION_FACES.overdue.Icon,
                     face: {
-                        text: overdueAttentionHint(totals.overdue)
+                        text: index.overdueAttentionHint(totals.overdue)
                     },
-                    tone: ATTENTION_FACES.overdue.tone,
+                    tone: index.ATTENTION_FACES.overdue.tone,
                     value: String(totals.overdue)
                 }), totals.stuck === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
-                    Icon: ATTENTION_FACES.blocked.Icon,
+                    Icon: index.ATTENTION_FACES.blocked.Icon,
                     face: {
-                        text: blockedAttentionHint(totals.stuck)
+                        text: index.blockedAttentionHint(totals.stuck)
                     },
-                    tone: ATTENTION_FACES.blocked.tone,
+                    tone: index.ATTENTION_FACES.blocked.tone,
                     value: String(totals.stuck)
                 }) ]
             }) ]
@@ -4561,7 +3332,7 @@ function Segment({active: active, joined: joined, mode: mode, onPick: onPick, op
             tone: tone
         }
     });
-    return option.tooltip === void 0 ? button : /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+    return option.tooltip === void 0 ? button : /* @__PURE__ */ jsxRuntime.jsx(workflowComponents._HoverHint, {
         text: option.tooltip,
         children: button
     });
@@ -4829,7 +3600,7 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
         value: value
     })), applied = facet => appliedFacetValues(view.filters, facet), myId = index.useCurrentUserId();
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             fontSize: 1,
             gap: 2,
@@ -4839,9 +3610,9 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
             text: "Add filter"
         }),
         id: "runs-filter-menu",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Assignee",
@@ -4856,14 +3627,14 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                         myId: myId,
                         pick: value => add("assignee", value),
                         toggle: value => add("assignee", value),
-                        unassignedCount: unassignedRunCount(scoped)
+                        unassignedCount: index.unassignedRunCount(scoped)
                     })
                 })
-            }), definition === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            }), definition === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Stage",
-                children: options.stage.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                children: options.stage.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     fontSize: 1,
                     onClick: () => add("stage", option.key),
                     children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -4874,11 +3645,11 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                     })
                 }, option.key))
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Needs attention",
-                children: options.attention.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                children: options.attention.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     fontSize: 1,
                     onClick: () => add("attention", option.key),
                     children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -4889,8 +3660,8 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                     })
                 }, option.key))
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Release",
@@ -4900,7 +3671,7 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                     sections: [ withActiveValues(options.release, applied("release")) ],
                     specials: [ {
                         active: applied("release").includes(NO_RELEASE_VALUE),
-                        count: noReleaseRunCount(scoped),
+                        count: index.noReleaseRunCount(scoped),
                         label: "No release",
                         onPick: () => add("release", NO_RELEASE_VALUE),
                         onToggle: () => add("release", NO_RELEASE_VALUE)
@@ -4917,7 +3688,7 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
 }
 
 function useAssigneeDirectory({filters: filters, scoped: scoped}) {
-    const {members: members, roles: roles} = index.useProjectMembers(), userCounts = react.useMemo(() => runCountsByAssignee(scoped), [ scoped ]), roleCounts = react.useMemo(() => runCountsByRole(scoped), [ scoped ]), allRoles = react.useMemo(() => directoryRoles({
+    const {members: members, roles: roles} = index.useProjectMembers(), userCounts = react.useMemo(() => index.runCountsByAssignee(scoped), [ scoped ]), roleCounts = react.useMemo(() => index.runCountsByRole(scoped), [ scoped ]), allRoles = react.useMemo(() => directoryRoles({
         held: roleCounts,
         members: members,
         roles: roles
@@ -4948,19 +3719,19 @@ function useValueOptions({definition: definition, filters: filters, scoped: scop
         filters: filters,
         scoped: scoped
     }), attention = react.useMemo(() => {
-        const counts = runAttentionCounts(scoped);
+        const counts = index.runAttentionCounts(scoped);
         return ATTENTION_VALUES.map(value => ({
             count: value.key === "blocked" ? counts.blocked : counts.overdue,
             key: value.key,
             label: value.label
         }));
-    }, [ scoped ]), releaseTitles = index.useReleaseTitles(), release = react.useMemo(() => [ ...runCountsByRelease(scoped) ].map(([name, count]) => ({
+    }, [ scoped ]), releaseTitles = index.useReleaseTitles(), release = react.useMemo(() => [ ...index.runCountsByRelease(scoped) ].map(([name, count]) => ({
         count: count,
         key: name,
         label: releaseTitles.get(name) ?? name
     })).sort(byResolvedTitle(option => option.label, option => option.key)), [ releaseTitles, scoped ]), stage = react.useMemo(() => {
         if (definition === void 0) return [];
-        const counts = runCountsByStage(scoped);
+        const counts = index.runCountsByStage(scoped);
         return definition.stages.map(held => ({
             count: counts.get(held.name) ?? 0,
             key: held.name,
@@ -5000,7 +3771,7 @@ function QueryableValues({mediaOf: mediaOf, onPick: onPick, onToggle: onToggle,
                 children: [ shownSpecials.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ shownSpecials.map(row => /* @__PURE__ */ jsxRuntime.jsx(SpecialValueItem, {
                         special: row
-                    }, row.label)), trimmed === "" && hitSections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}) : null ]
+                    }, row.label)), trimmed === "" && hitSections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}) : null ]
                 }), hitSections.length === 0 && shownSpecials.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                     padding: 3,
                     children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
@@ -5010,7 +3781,7 @@ function QueryableValues({mediaOf: mediaOf, onPick: onPick, onToggle: onToggle,
                     })
                 }) : null, grouped.map((rows, index2) => 
                 /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, {
-                    children: [ index2 > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}) : null, rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(ValueItem, {
+                    children: [ index2 > 0 ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}) : null, rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(ValueItem, {
                         media: mediaOf?.(row),
                         onPick: () => onPick(row),
                         onToggle: onToggle === void 0 ? void 0 : () => onToggle(row),
@@ -5033,7 +3804,7 @@ function mannerProps(args) {
 
 function SpecialValueItem({special: special}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuItem, {
+    return jsxRuntime.jsx(menu.MenuItem, {
         fontSize: 1,
         onClick: special.onPick,
         children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -5052,7 +3823,7 @@ function SpecialValueItem({special: special}) {
 
 function ValueItem({media: media, onPick: onPick, onToggle: onToggle, row: row}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuItem, {
+    return jsxRuntime.jsx(menu.MenuItem, {
         fontSize: 1,
         onClick: onPick,
         children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -5127,7 +3898,7 @@ function RunsFilterChips({definition: definition, onView: onView, scoped: scoped
 
 function OperatorButton({facet: facet, index: index2, label: label, onPick: onPick, picked: picked}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             fontSize: 1,
             mode: "bleed",
@@ -5136,8 +3907,8 @@ function OperatorButton({facet: facet, index: index2, label: label, onPick: onPi
             text: label
         }),
         id: `runs-chip-operator-${index2}`,
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
-            children: polarityOptionsOf(facet).map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
+            children: polarityOptionsOf(facet).map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => onPick(option.key),
                 pressed: picked === option.key,
@@ -5198,7 +3969,7 @@ function ValuesButton({apply: apply, chip: chip, displayById: displayById, optio
                     myId: myId,
                     pick: value => pick(value, close),
                     toggle: toggle,
-                    unassignedCount: unassignedRunCount(scoped)
+                    unassignedCount: index.unassignedRunCount(scoped)
                 })
             })
         });
@@ -5212,7 +3983,7 @@ function ValuesButton({apply: apply, chip: chip, displayById: displayById, optio
             sections: [ withActiveValues(options.release, chip.clause.values) ],
             specials: [ {
                 active: chip.clause.values.includes(NO_RELEASE_VALUE),
-                count: noReleaseRunCount(scoped),
+                count: index.noReleaseRunCount(scoped),
                 label: "No release",
                 onPick: () => pick(NO_RELEASE_VALUE, close),
                 onToggle: () => toggle(NO_RELEASE_VALUE)
@@ -5223,7 +3994,7 @@ function ValuesButton({apply: apply, chip: chip, displayById: displayById, optio
     /* @__PURE__ */
     return jsxRuntime.jsx(ValuePopoverButton, {
         label: label,
-        children: close => listed.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        children: close => listed.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
             fontSize: 1,
             onClick: () => pick(option.key, close),
             children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -5239,8 +4010,8 @@ function ValuesButton({apply: apply, chip: chip, displayById: displayById, optio
 function ValuePopoverButton({children: children, faces: faces, label: label}) {
     const [open, setOpen] = react.useState(!1), buttonRef = react.useRef(null), close = () => setOpen(!1);
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Popover, {
-        content: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
+    return jsxRuntime.jsx(popover.Popover, {
+        content: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
             onClickOutside: event => {
                 event.target instanceof Node && buttonRef.current?.contains(event.target) || close();
             },
@@ -5505,7 +4276,7 @@ function ScopeSelect({onView: onView, view: view}) {
         filters: view.filters
     });
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(SurfaceButton, {
             $surface: color.bg,
             fontSize: 1,
@@ -5515,15 +4286,15 @@ function ScopeSelect({onView: onView, view: view}) {
             text: view.scope === "closed" ? "Closed runs" : "Open runs"
         }),
         id: "runs-scope-filter",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => pick("open"),
                 pressed: view.scope === "open",
                 text: "Open runs"
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => pick("closed"),
                 pressed: view.scope === "closed",
@@ -5542,7 +4313,7 @@ function ScopeSelect({onView: onView, view: view}) {
 function WorkflowSelect({counts: counts, definitions: definitions, onView: onView, totalCount: totalCount, view: view}) {
     const options = [ ...definitions ].sort(byTitleThenName), selected = options.find(definition => definition.name === view.filters.workflow), pick = name => onView(workflowScopedView(view, name));
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             disabled: options.length === 0,
@@ -5566,7 +4337,7 @@ function WorkflowSelect({counts: counts, definitions: definitions, onView: onVie
             })
         }),
         id: "runs-workflow-filter",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(QueryableValues, {
                 onPick: row => pick(row.key),
@@ -5584,7 +4355,7 @@ function WorkflowSelect({counts: counts, definitions: definitions, onView: onVie
                 } ]
             }), options.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
+                /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                     padding: 2,
                     children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
@@ -5713,16 +4484,16 @@ function useScopeForRun(args) {
     return react.useMemo(() => {
         if (forMe || !ready || view.run === void 0) return view;
         const held = rows.find(row => row.id === view.run);
-        return held === void 0 || runsScopeOf(held) === view.scope ? view : {
+        return held === void 0 || index.runsScopeOf(held) === view.scope ? view : {
             ...view,
-            scope: runsScopeOf(held)
+            scope: index.runsScopeOf(held)
         };
     }, [ forMe, ready, rows, view ]);
 }
 
 function useCutRows(args) {
     const {currentUserId: currentUserId, currentUserRoles: currentUserRoles, forMe: forMe, identity: identity, scoped: scoped, view: view} = args;
-    return react.useMemo(() => forMe ? identity === void 0 ? [] : scoped.filter(row => rowHasTaskHeldBy(row, identity)) : applyRunFilters(scoped, {
+    return react.useMemo(() => forMe ? identity === void 0 ? [] : scoped.filter(row => index.rowHasTaskHeldBy(row, identity)) : applyRunFilters(scoped, {
         currentUserId: currentUserId,
         currentUserRoles: currentUserRoles,
         filters: view.filters
@@ -5769,273 +4540,7 @@ function useRunPanelModel(args) {
 }
 
 function walkIdOf(view) {
-    if (view.run !== void 0) return view.task === void 0 ? view.run : forMeRowId(view.run, view.task);
-}
-
-const OPEN_COLUMNS = [ {
-    key: "document",
-    label: "Workflow subject"
-}, {
-    key: "workflow",
-    label: "Workflow",
-    width: TABLE_WORKFLOW_WIDTH
-}, {
-    key: "stage",
-    label: "Stage",
-    width: TABLE_STAGE_WIDTH
-}, {
-    key: "started",
-    label: "Started",
-    width: TABLE_TIME_WIDTH
-} ], CLOSED_COLUMNS = [ {
-    key: "document",
-    label: "Workflow subject"
-}, {
-    key: "workflow",
-    label: "Workflow",
-    width: TABLE_WORKFLOW_WIDTH
-}, {
-    key: "outcome",
-    label: "Outcome",
-    width: TABLE_STAGE_WIDTH
-}, {
-    key: "started",
-    label: "Started",
-    width: TABLE_TIME_WIDTH
-}, {
-    key: "ended",
-    label: "Closed",
-    width: TABLE_TIME_WIDTH
-} ], 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 documentWidthOf(args) {
-    const {columns: columns, scope: scope, tableWidth: tableWidth} = args, trailing = scope === "open" ? tasksWidthOf(tableWidth) + ATTENTION_WIDTH : 0;
-    return fillColumnWidth({
-        columns: columns,
-        tableWidth: tableWidth,
-        trailingWidth: trailing
-    });
-}
-
-function RunsTable({now: now, onNavigateKey: onNavigateKey, onSelectRun: onSelectRun, onSort: onSort, rows: rows, scope: scope, scopedToWorkflow: scopedToWorkflow, selectedId: selectedId, selectedRef: selectedRef, sort: sort}) {
-    const columns = (scope === "closed" ? CLOSED_COLUMNS : OPEN_COLUMNS).filter(column => !(scopedToWorkflow && column.key === "workflow")), cellInset = index.useSpaceToken(2);
-    /* @__PURE__ */
-    return jsxRuntime.jsx(VirtualTable, {
-        renderHeader: args => /* @__PURE__ */ jsxRuntime.jsx(RunsHeader, {
-            columns: columns,
-            onSort: onSort,
-            scope: scope,
-            sort: sort,
-            styles: args.styles,
-            tableWidth: args.tableWidth
-        }),
-        keyAt: index2 => rows[index2]?.id ?? String(index2),
-        renderRow: ({index: index2, key: key, measureRow: measureRow, tableWidth: tableWidth}) => {
-            const row = rows[index2];
-            return row === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(RunTableRow, {
-                dataIndex: index2,
-                measureRow: measureRow,
-                now: now,
-                onNavigateKey: onNavigateKey,
-                onSelectRun: onSelectRun,
-                row: row,
-                scope: scope,
-                scopedToWorkflow: scopedToWorkflow,
-                selected: row.id === selectedId,
-                selectedRef: selectedRef,
-                taskRoom: taskRoomOf({
-                    inset: cellInset,
-                    tableWidth: tableWidth
-                })
-            }, key);
-        },
-        rowCount: rows.length
-    });
-}
-
-function RunsHeader({columns: columns, onSort: onSort, scope: scope, sort: sort, styles: styles, tableWidth: tableWidth}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(SortableHeaderCells, {
-        columns: columns,
-        onSort: onSort,
-        sort: sort,
-        styles: styles,
-        tableWidth: tableWidth,
-        widthOf: (column, width) => column.key === "document" ? documentWidthOf({
-            columns: columns,
-            scope: scope,
-            tableWidth: width
-        }) : resolveColumnWidth(column.width, width),
-        children: scope === "open" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx("th", {
-                style: {
-                    ...styles.head,
-                    width: tasksWidthOf(tableWidth)
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                    padding: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                        muted: !0,
-                        size: 1,
-                        children: "Tasks"
-                    })
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx("th", {
-                "aria-label": "Attention",
-                style: {
-                    ...styles.head,
-                    width: ATTENTION_WIDTH
-                }
-            }) ]
-        }) : null
-    });
-}
-
-const RunTableRow = react.memo(function({dataIndex: dataIndex, measureRow: measureRow, now: now, onNavigateKey: onNavigateKey, onSelectRun: onSelectRun, row: row, scope: scope, scopedToWorkflow: scopedToWorkflow, selected: selected, selectedRef: selectedRef, taskRoom: taskRoom}) {
-    const styles = useTableStyles(), documentInset = index.useSpaceToken(1);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(TableRowCard, {
-        dataIndex: dataIndex,
-        onClick: () => onSelectRun(row),
-        onKeyDown: onNavigateKey,
-        rowRef: measureRow,
-        selected: selected,
-        selectedRef: selectedRef,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: {
-                ...styles.cell,
-                paddingLeft: documentInset
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(DocumentCell, {
-                row: row
-            })
-        }), scopedToWorkflow ? null : /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                textOverflow: "ellipsis",
-                children: row.workflowTitle
-            })
-        }), scope === "closed" ? /* @__PURE__ */ jsxRuntime.jsx(ClosedCells, {
-            now: now,
-            row: row
-        }) : /* @__PURE__ */ jsxRuntime.jsx(OpenCells, {
-            now: now,
-            row: row,
-            taskRoom: taskRoom
-        }) ]
-    });
-});
-
-function DocumentCell({row: row}) {
-    return row.document === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-        muted: !0,
-        size: 1,
-        textOverflow: "ellipsis",
-        children: "No document"
-    }) : /* @__PURE__ */ jsxRuntime.jsx(index.DocRefFace, {
-        gdr: row.document
-    });
-}
-
-function OpenCells({now: now, row: row, taskRoom: taskRoom}) {
-    const styles = useTableStyles();
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                textOverflow: "ellipsis",
-                children: row.stageTitle
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(index.AgoStamp, {
-                at: row.startedAt,
-                now: now
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: {
-                ...styles.cell,
-                overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                align: "center",
-                children: /* @__PURE__ */ jsxRuntime.jsx(StageTaskGroups, {
-                    now: now,
-                    room: taskRoom,
-                    tasks: row.tasks
-                })
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(AttentionCell, {
-                now: now,
-                row: row
-            })
-        }) ]
-    });
-}
-
-function ClosedCells({now: now, row: row}) {
-    const styles = useTableStyles();
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                textOverflow: "ellipsis",
-                children: row.outcome
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: /* @__PURE__ */ jsxRuntime.jsx(index.AgoStamp, {
-                at: row.startedAt,
-                now: now
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx("td", {
-            style: styles.cell,
-            children: row.endedAt === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.AgoStamp, {
-                at: row.endedAt,
-                now: now
-            })
-        }) ]
-    });
-}
-
-function AttentionCell({now: now, row: row}) {
-    return row.attentionDetail === void 0 ? null : 
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-        align: "center",
-        children: /* @__PURE__ */ jsxRuntime.jsx(AttentionMark, {
-            detail: row.attentionDetail,
-            now: now,
-            tasks: row.tasks
-        })
-    });
+    if (view.run !== void 0) return view.task === void 0 ? view.run : index.forMeRowId(view.run, view.task);
 }
 
 function RunsWorkArea({boardMode: boardMode, boardState: boardState, previews: previews, loading: loading, model: model, navigatorSlot: navigatorSlot, now: now, onSort: onSort, scopedCount: scopedCount, sort: sort, sorted: sorted, view: view}) {
@@ -6112,7 +4617,7 @@ function useWorkColumnStyle(args) {
 
 function RunsBody({loading: loading, now: now, onNavigateKey: onNavigateKey, onSelectRun: onSelectRun, onSort: onSort, scopedCount: scopedCount, selectedId: selectedId, selectedRef: selectedRef, sort: sort, sorted: sorted, view: view}) {
     return loading ? selectedId === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(LoadingTablePlaceholder, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(RunsTable, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.RunsTable, {
             now: now,
             onNavigateKey: onNavigateKey,
             onSelectRun: onSelectRun,
@@ -6132,7 +4637,7 @@ function RunsBody({loading: loading, now: now, onNavigateKey: onNavigateKey, onS
         description: "Adjust the filters",
         icon: /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {}),
         title: "No runs match"
-    }) : /* @__PURE__ */ jsxRuntime.jsx(RunsTable, {
+    }) : /* @__PURE__ */ jsxRuntime.jsx(index.RunsTable, {
         now: now,
         onNavigateKey: onNavigateKey,
         onSelectRun: onSelectRun,
@@ -6203,7 +4708,7 @@ const RunsTab = react.memo(function({addressed: addressed, filterSlot: filterSlo
             next: next,
             picked: picked
         }) && setPicked(void 0), onNavigate(next);
-    }, now = index.useMinuteClock(), definitions = resources.definitions, definitionsByName = react.useMemo(() => new Map((definitions ?? []).map(definition => [ definition.name, definition ])), [ definitions ]), rows = react.useMemo(() => runRowsOf({
+    }, now = index.useMinuteClock(), definitions = resources.definitions, definitionsByName = react.useMemo(() => new Map((definitions ?? []).map(definition => [ definition.name, definition ])), [ definitions ]), rows = react.useMemo(() => index.runRowsOf({
         previews: previews.previews,
         definitions: definitionsByName,
         now: now
@@ -6242,7 +4747,7 @@ const RunsTab = react.memo(function({addressed: addressed, filterSlot: filterSlo
         loading: previews.loading,
         now: now,
         previews: previews.previews
-    }), scoped = react.useMemo(() => rows.filter(row => runsScopeOf(row) === view.scope), [ rows, view.scope ]), workflowCounts = react.useMemo(() => runCountsByWorkflow(scoped), [ scoped ]), workflowScoped = react.useMemo(() => applyRunFilters(scoped, {
+    }), scoped = react.useMemo(() => rows.filter(row => index.runsScopeOf(row) === view.scope), [ rows, view.scope ]), workflowCounts = react.useMemo(() => index.runCountsByWorkflow(scoped), [ scoped ]), workflowScoped = react.useMemo(() => applyRunFilters(scoped, {
         filters: withWorkflow(NO_RUN_FILTERS, view.filters.workflow)
     }), [ scoped, view.filters.workflow ]), currentUserId = currentUserIdentity?.userId, currentUserRoles = currentUserIdentity?.roles, filtered = useCutRows({
         currentUserId: currentUserId,
@@ -6251,15 +4756,14 @@ const RunsTab = react.memo(function({addressed: addressed, filterSlot: filterSlo
         identity: forMeIdentity,
         scoped: scoped,
         view: view
-    }), taskRows = react.useMemo(() => forMeIdentity === void 0 ? [] : forMeTaskRowsOf({
-        now: now,
+    }), taskRows = react.useMemo(() => forMeIdentity === void 0 ? [] : index.forMeTaskRowsOf({
         rows: filtered,
         who: forMeIdentity
-    }), [ filtered, forMeIdentity, now ]), shownAttention = react.useMemo(() => runAttentionCounts(filtered), [ filtered ]), documents = react.useMemo(() => filtered.flatMap(row => row.document === void 0 ? [] : [ row.document ]), [ filtered ]), titles = useDocPreviewTitles(documents), sortedTasks = react.useMemo(() => sortForMeRows({
+    }), [ filtered, forMeIdentity ]), shownAttention = react.useMemo(() => index.runAttentionCounts(filtered), [ filtered ]), documents = react.useMemo(() => filtered.flatMap(row => row.document === void 0 ? [] : [ row.document ]), [ filtered ]), titles = useDocPreviewTitles(documents), sortedTasks = react.useMemo(() => sortForMeRows({
         rows: taskRows,
         sort: forMeSort,
         titles: titles.titles
-    }), [ forMeSort, taskRows, titles ]), taskSections = react.useMemo(() => forMeSectionsOf(sortedTasks), [ sortedTasks ]), orderedTasks = react.useMemo(() => [ ...taskSections.assignedToUser, ...taskSections.assignedToRoles ], [ taskSections ]), sorted = react.useMemo(() => sortRunRows({
+    }), [ forMeSort, taskRows, titles ]), taskSections = react.useMemo(() => index.forMeSectionsOf(sortedTasks), [ sortedTasks ]), orderedTasks = react.useMemo(() => [ ...taskSections.assignedToUser, ...taskSections.assignedToRoles ], [ taskSections ]), sorted = react.useMemo(() => sortRunRows({
         rows: filtered,
         sort: sort,
         titles: titles.titles
@@ -6269,7 +4773,7 @@ const RunsTab = react.memo(function({addressed: addressed, filterSlot: filterSlo
         ready: titlesReady
     }), panelView = react.useMemo(() => {
         if (!isForMe) return view;
-        const resolved = resolveForMeAddress({
+        const resolved = index.resolveForMeAddress({
             rows: orderedTasks,
             run: view.run,
             task: view.task
@@ -7057,7 +5561,7 @@ function WorkflowsToolRoot() {
 
 function ToolOverflowMenu({onOpenDefinitions: onOpenDefinitions}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             "aria-label": "More",
             fontSize: 1,
@@ -7066,15 +5570,15 @@ function ToolOverflowMenu({onOpenDefinitions: onOpenDefinitions}) {
             padding: 2
         }),
         id: "workflows-tool-overflow",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: onOpenDefinitions,
                 text: "Definitions"
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 as: "a",
                 fontSize: 1,
                 href: WORKFLOWS_DOCS_URL,
@@ -7140,7 +5644,7 @@ function DefinitionsCrumbs({onOpenDefinitions: onOpenDefinitions, onOpenWorkflow
 function WorkflowCrumbPicker({name: name, onOpenWorkflow: onOpenWorkflow}) {
     const {definitions: definitions} = useDeployedDefinitions(), options = workflowOptions(definitions ?? []), title = options.find(option => option.name === name)?.title ?? name;
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             disabled: options.length === 0,
@@ -7164,8 +5668,8 @@ function WorkflowCrumbPicker({name: name, onOpenWorkflow: onOpenWorkflow}) {
             })
         }),
         id: "workflows-crumb-picker",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
-            children: options.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
+            children: options.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => onOpenWorkflow(option.name),
                 pressed: option.name === name,