@sanity/workflow-studio-plugin 0.28.0 → 0.29.0

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), workflowEngine = require("@sanity/workflow-engine"), ArrowLeft = require("@sanity/icons/ArrowLeft"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), pluralize = require("pluralize-esm"), sanity = require("sanity"), workflowStudio = require("@sanity/workflow-studio"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), Filter = require("@sanity/icons/Filter"), workflowComponents = require("@sanity/workflow-components"), endOfDay = require("date-fns/endOfDay"), reactDom = require("react-dom"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), types = require("@sanity/types"), workflowDiagram = require("@sanity/workflow-diagram"), react$1 = require("motion/react");
+var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), workflowEngine = require("@sanity/workflow-engine"), ArrowLeft = require("@sanity/icons/ArrowLeft"), Calendar = require("@sanity/icons/Calendar"), Clock = require("@sanity/icons/Clock"), Document = require("@sanity/icons/Document"), ErrorOutline = require("@sanity/icons/ErrorOutline"), Transfer = require("@sanity/icons/Transfer"), sanity = require("sanity"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), Filter = require("@sanity/icons/Filter"), workflowComponents = require("@sanity/workflow-components"), endOfDay = require("date-fns/endOfDay"), reactDom = require("react-dom"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), types = require("@sanity/types"), Empty = require("@sanity/icons/Empty"), WarningOutline = require("@sanity/icons/WarningOutline"), workflowDiagram = require("@sanity/workflow-diagram"), react$1 = require("motion/react");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -49,11 +49,22 @@ function documentRefsOf(instance) {
     return [ ...seen.values() ];
 }
 
+function rootInstanceOf(instance, byId) {
+    const rootRef = instance.ancestors[0];
+    return rootRef ? byId.get(workflowEngine.toBareId(rootRef.id)) ?? instance : instance;
+}
+
+const TOOL_PANEL_PADDING = 3, TOOL_HEADING_PADDING = 2, PANEL_STEP = 3;
+
 function TabStatusRow({children: children}) {
+    const firstLineOffset = index.useSpaceToken(PANEL_STEP) + index.useSpaceToken(TOOL_HEADING_PADDING);
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Box, {
-        paddingLeft: 2,
-        paddingY: 3,
+        paddingBottom: PANEL_STEP,
+        paddingLeft: TOOL_HEADING_PADDING,
+        style: {
+            paddingTop: firstLineOffset
+        },
         children: children
     });
 }
@@ -304,14 +315,24 @@ function InstanceDetailBody({entry: entry, framed: framed, subject: subject}) {
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
                     gap: 5,
-                    children: [ subject === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(SubjectPreview, {
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(index.InstanceFaultNote, {
+                        entry: entry,
+                        scope: {
+                            kind: "run",
+                            onOpenActivity: activityName => setOpenActivity({
+                                stage: instance.currentStage,
+                                activityName: activityName
+                            })
+                        }
+                    }), subject === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(SubjectPreview, {
                         instance: instance
                     }) : null, 
                     /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
                         gap: 4,
                         children: [ 
                         /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, {
-                            children: "Stages / Tasks"
+                            children: "Stages"
                         }), 
                         /* @__PURE__ */ jsxRuntime.jsx(index.InstanceSnapshotBody, {
                             entry: entry,
@@ -393,12 +414,140 @@ function byResolvedTitle(titleOf, keyOf) {
     };
 }
 
+function openActivitiesOf(instance) {
+    return (workflowEngine.findOpenStageEntry(instance)?.activities ?? []).filter(activity => index.isOpenActivityStatus(activity.status));
+}
+
+function overdueTaskCount(instance, now) {
+    return openActivitiesOf(instance).filter(activity => index.dueDatesOf(activity.fields ?? []).some(due => index.isDueDatePast(due, now))).length;
+}
+
+const NO_SIGNALS = {
+    activeCount: 0,
+    assignedToMe: 0,
+    documentCount: 0,
+    documentlessCount: 0,
+    initialStageDocumentCount: 0,
+    lastTransition: void 0,
+    overdueDocumentCount: 0,
+    overdueDocumentlessCount: 0,
+    stuckCount: 0
+};
+
+function noDefinitionSignals() {
+    return NO_SIGNALS;
+}
+
+function holdsWorkFor(instance, who) {
+    return openActivitiesOf(instance).some(activity => index.isActivityAssignedTo({
+        state: activity.fields ?? [],
+        who: who
+    }));
+}
+
+function arrivalOf(instance, byId) {
+    const stage = workflowEngine.findOpenStageEntry(instance);
+    if (stage !== void 0) return {
+        at: stage.enteredAt,
+        document: documentRefOf(instance, byId),
+        stage: index.stageTitle(index.definitionSnapshotOf(instance), stage.name)
+    };
+}
+
+function laterArrival(held, next) {
+    return next === void 0 ? held : held === void 0 || next.at > held.at ? next : held;
+}
+
+function documentRefOf(instance, byId) {
+    return documentRefsOf(rootInstanceOf(instance, byId))[0];
+}
+
+const NO_DRAFT = {
+    ...NO_SIGNALS,
+    documents: /* @__PURE__ */ new Set,
+    initialStageDocuments: /* @__PURE__ */ new Set,
+    overdueDocuments: /* @__PURE__ */ new Set
+};
+
+function withDocument(held, document2) {
+    return document2 === void 0 ? held : new Set(held).add(document2);
+}
+
+function atInitialStage(instance) {
+    const snapshot = index.definitionSnapshotOf(instance);
+    return snapshot !== void 0 && instance.currentStage === snapshot.initialStage;
+}
+
+function fold(args) {
+    const {byId: byId, held: held, instance: instance, now: now, who: who} = args, stuck = workflowEngine.documentStuckCause({
+        instance: instance,
+        definition: index.definitionSnapshotOf(instance)
+    }), document2 = documentRefOf(instance, byId)?.id, overdue = overdueTaskCount(instance, now) > 0;
+    return {
+        activeCount: held.activeCount + 1,
+        assignedToMe: held.assignedToMe + (who !== void 0 && holdsWorkFor(instance, who) ? 1 : 0),
+        documentlessCount: held.documentlessCount + (document2 === void 0 ? 1 : 0),
+        documents: withDocument(held.documents, document2),
+        initialStageDocuments: atInitialStage(instance) ? withDocument(held.initialStageDocuments, document2) : held.initialStageDocuments,
+        lastTransition: laterArrival(held.lastTransition, arrivalOf(instance, byId)),
+        overdueDocumentlessCount: held.overdueDocumentlessCount + (overdue && document2 === void 0 ? 1 : 0),
+        overdueDocuments: overdue ? withDocument(held.overdueDocuments, document2) : held.overdueDocuments,
+        stuckCount: held.stuckCount + (stuck === void 0 ? 0 : 1)
+    };
+}
+
+function settle(draft) {
+    const {documents: documents, initialStageDocuments: initialStageDocuments, overdueDocuments: overdueDocuments, ...rest} = draft;
+    return {
+        ...rest,
+        documentCount: documents.size,
+        initialStageDocumentCount: initialStageDocuments.size,
+        overdueDocumentCount: overdueDocuments.size
+    };
+}
+
+function definitionSignals(args) {
+    const byId = new Map(args.instances.map(instance => [ instance._id, instance ])), drafts = /* @__PURE__ */ new Map;
+    for (const instance of args.instances) {
+        if (workflowEngine.terminalState(instance) !== "in-flight") continue;
+        const held = drafts.get(instance.definition) ?? NO_DRAFT;
+        drafts.set(instance.definition, fold({
+            byId: byId,
+            held: held,
+            instance: instance,
+            now: args.now,
+            who: args.identity
+        }));
+    }
+    return new Map([ ...drafts ].map(([name, draft]) => [ name, settle(draft) ]));
+}
+
+function catalogBands(rows) {
+    const assigned = rows.filter(row => row.signals.assignedToMe > 0);
+    if (assigned.length === 0) return [ {
+        rows: rows,
+        title: void 0
+    } ];
+    const rest = rows.filter(row => row.signals.assignedToMe === 0);
+    return [ {
+        rows: assigned,
+        title: "Assigned to you"
+    }, {
+        rows: rest,
+        title: "Other workflows"
+    } ].filter(band => band.rows.length > 0);
+}
+
 function definitionCatalog(args) {
-    const rejected = [ ...args.issues.values() ];
+    const rejected = [ ...args.issues.values() ], signals = definitionSignals({
+        identity: args.identity,
+        instances: args.instances,
+        now: args.now
+    });
     return args.definitions.map(definition => ({
         name: definition.name,
         title: definition.title ?? definition.name,
-        activeCount: args.inFlight.filter(instance => instance.definition === definition.name).length,
+        signals: signals.get(definition.name) ?? noDefinitionSignals(),
         docTypes: [ ...new Set(args.mappings.filter(mapping => mapping.definition === definition.name).map(mapping => mapping.docType)) ],
         brokenBindings: rejected.filter(issue => issue.definition === definition.name && issue.version === definition.version).map(issue => ({
             docType: issue.docType,
@@ -436,7 +585,7 @@ function deployedPhrase(definition) {
     return ago === "" ? index.formatShortDateTime(deployedAt) : `${index.formatShortDateTime(deployedAt)} (${ago})`;
 }
 
-const TOOL_PANEL_PADDING = 3, TOOL_HEADING_PADDING = 2, logged = /* @__PURE__ */ new WeakSet;
+const logged = /* @__PURE__ */ new WeakSet;
 
 function logReadFailure(what, error) {
     if (typeof error == "object" && error !== null) {
@@ -474,17 +623,17 @@ function useCappedInstances(filter) {
     }, [ instances, loading, unreadable, error ]);
 }
 
-const CATALOG_READ_FAILED = "Couldn’t load the deployed workflows. Try again later.", lastRead = /* @__PURE__ */ new WeakMap, issuedReads = /* @__PURE__ */ new WeakMap;
+const CATALOG_READ_FAILED = "Couldn’t load the deployed workflows. Try again later.", lastRead$1 = /* @__PURE__ */ new WeakMap, issuedReads = /* @__PURE__ */ new WeakMap;
 
 function useDeployedDefinitions() {
-    const {engine: engine} = index.useWorkflowContext(), [definitions, setDefinitions] = react.useState(() => lastRead.get(engine)?.rows), [error, setError] = react.useState(void 0);
+    const {engine: engine} = index.useWorkflowContext(), [definitions, setDefinitions] = react.useState(() => lastRead$1.get(engine)?.rows), [error, setError] = react.useState(void 0);
     return react.useEffect(() => {
         let cancelled = !1;
-        setDefinitions(lastRead.get(engine)?.rows), setError(void 0);
+        setDefinitions(lastRead$1.get(engine)?.rows), setError(void 0);
         const seq = (issuedReads.get(engine) ?? 0) + 1;
         return issuedReads.set(engine, seq), (async () => {
-            const rows = await index.readDeployedDefinitions(engine), latest = workflowEngine.latestDeployedDefinitions(rows), held = lastRead.get(engine);
-            (held === void 0 || seq > held.seq) && lastRead.set(engine, {
+            const rows = await index.readDeployedDefinitions(engine), latest = workflowEngine.latestDeployedDefinitions(rows), held = lastRead$1.get(engine);
+            (held === void 0 || seq > held.seq) && lastRead$1.set(engine, {
                 seq: seq,
                 rows: latest
             }), cancelled || (setDefinitions(latest), setError(void 0));
@@ -499,13 +648,78 @@ function useDeployedDefinitions() {
     };
 }
 
+const NO_TITLES = {
+    titles: /* @__PURE__ */ new Map,
+    resolved: /* @__PURE__ */ new Set
+};
+
+function useDocPreviewTitles(documents) {
+    const previewStore = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), {perspectiveStack: perspectiveStack} = sanity.usePerspective(), {actualTypes: actualTypes, binding: binding} = index.useWorkflowContext(), [state, setState] = react.useState(NO_TITLES), key = documents.map(doc => doc.id).join("|");
+    return react.useEffect(() => {
+        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, previews = /* @__PURE__ */ new Map, publish = () => setState({
+            titles: new Map(titles),
+            resolved: new Set(resolved)
+        }), localDocs = documents.flatMap(doc => {
+            const {parsed: parsed, local: local} = index.gdrLocality(doc.id, binding.contentResource);
+            return !parsed || !local ? (resolved.add(doc.id), []) : [ {
+                doc: doc,
+                bareId: parsed.documentId
+            } ];
+        }), untracks = localDocs.map(({bareId: bareId}) => actualTypes.track(bareId)), dropPreview = docId => {
+            previews.get(docId)?.unsubscribe(), previews.delete(docId), titles.delete(docId);
+        }, observe = ({docId: docId, bareId: bareId, typeName: typeName}) => {
+            const schemaType = index.openableSchemaType(schema, typeName);
+            if (!schemaType) return !1;
+            if (previews.get(docId)?.typeName === typeName) return !0;
+            dropPreview(docId), resolved.delete(docId);
+            const subscription = previewStore.observeForPreview({
+                _id: bareId,
+                _type: schemaType.name
+            }, schemaType, {
+                perspective: perspectiveStack
+            }).subscribe({
+                next: event => {
+                    resolved.add(docId);
+                    const title = event.snapshot?.title;
+                    typeof title == "string" ? titles.set(docId, title) : titles.delete(docId), publish();
+                },
+                error: err => {
+                    console.error(`[workflow-studio-plugin] preview for "${docId}" failed:`, err), resolved.add(docId), 
+                    publish();
+                }
+            });
+            return previews.set(docId, {
+                typeName: typeName,
+                unsubscribe: () => subscription.unsubscribe()
+            }), !0;
+        }, evaluate = () => {
+            for (const {doc: doc, bareId: bareId} of localDocs) {
+                const probe = actualTypes.read(bareId);
+                if (probe === null) {
+                    dropPreview(doc.id), resolved.add(doc.id);
+                    continue;
+                }
+                !observe({
+                    docId: doc.id,
+                    bareId: bareId,
+                    typeName: probe ?? doc.type
+                }) && typeof probe == "string" && (dropPreview(doc.id), resolved.add(doc.id));
+            }
+            publish();
+        }, unsubscribeProbes = actualTypes.subscribe(evaluate);
+        return evaluate(), () => {
+            unsubscribeProbes(), untracks.forEach(untrack => untrack()), previews.forEach(preview => preview.unsubscribe());
+        };
+    }, [ key, previewStore, schema, actualTypes, binding.contentResource.id, perspectiveStack.join("|") ]), 
+    state;
+}
+
 const INSTANCE_CAP_COUNT_NOTE = `Counts from the latest ${INSTANCE_CAP} workflows — older ones aren’t counted.`, NEWEST_INSTANCES = {
     includeCompleted: !0
-};
+}, lastRead = /* @__PURE__ */ new WeakMap;
 
 function useToolInstances() {
-    const {rows: rows, truncated: truncated, loading: loading, unreadable: unreadable, error: error} = useCappedInstances(NEWEST_INSTANCES);
-    return react.useMemo(() => ({
+    const {engine: engine} = index.useWorkflowContext(), {rows: rows, truncated: truncated, loading: loading, unreadable: unreadable, error: error} = useCappedInstances(NEWEST_INSTANCES), fresh = react.useMemo(() => ({
         inFlight: rows.filter(instance => workflowEngine.terminalState(instance) === "in-flight"),
         settled: rows.filter(instance => workflowEngine.terminalState(instance) !== "in-flight"),
         truncated: truncated,
@@ -513,41 +727,118 @@ function useToolInstances() {
         unreadable: unreadable,
         error: error
     }), [ rows, truncated, loading, unreadable, error ]);
+    return react.useEffect(() => {
+        !fresh.loading && fresh.error === void 0 && lastRead.set(engine, fresh);
+    }, [ engine, fresh ]), loading ? lastRead.get(engine) ?? fresh : fresh;
+}
+
+function documentPhrase(count) {
+    return count === 0 ? "No documents" : pluralize__default.default("document", count, !0);
+}
+
+function documentlessTail(count) {
+    return count === 0 ? "" : ` (${pluralize__default.default("instance", count, !0)})`;
+}
+
+function documentlessNote(work) {
+    return work.documentCount > 0 ? "" : documentlessTail(work.documentlessCount);
+}
+
+function documentFace(work, atStart) {
+    const lead = `${documentPhrase(work.documentCount)} with an active workflow${documentlessNote(work)}`;
+    return atStart === 0 ? {
+        lead: lead,
+        startLine: void 0
+    } : atStart === work.documentCount ? {
+        lead: `${lead}, yet to leave the starting stage`,
+        startLine: void 0
+    } : {
+        lead: lead,
+        startLine: `${atStart} still at the starting stage`
+    };
+}
+
+function overdueHint(work) {
+    return `${documentPhrase(work.documentCount)} with overdue tasks${documentlessTail(work.documentlessCount)}`;
+}
+
+const UNTITLED_DOCUMENT = "Untitled", TRANSITION_HINT_PENDING = "Loading…";
+
+function transitionHeading(at) {
+    return `Last stage change at ${index.formatShortDateTime(at)}`;
 }
 
-function activeSummary(active) {
-    return active === 0 ? "No active instances" : pluralize__default.default("active instance", active, !0);
+function transitionFace(args) {
+    return args.documentPending ? {
+        state: "pending"
+    } : {
+        state: "ready",
+        document: args.documentTitle,
+        heading: transitionHeading(args.at),
+        lead: args.documentTitle === void 0 ? "Changed to" : "changed to",
+        stage: args.stage
+    };
+}
+
+function catalogView(args) {
+    if (args.error !== void 0) return {
+        kind: "unreadable"
+    };
+    if (args.definitions === void 0 || args.instances.loading || args.identity.kind === "pending") return {
+        kind: "loading"
+    };
+    if (args.definitions.length === 0) return {
+        kind: "empty"
+    };
+    const rows = definitionCatalog({
+        definitions: args.definitions,
+        identity: index.identityOf(args.identity),
+        instances: [ ...args.instances.inFlight, ...args.instances.settled ],
+        issues: args.issues,
+        mappings: args.mappings,
+        now: args.now
+    });
+    return {
+        kind: "bands",
+        bands: catalogBands(rows)
+    };
 }
 
-function activeHeadline(args) {
-    if (args.error === void 0) return args.loading ? "counting active instances…" : activeSummary(args.active);
+function definitionAlert(row) {
+    if (row.signals.stuckCount !== 0) return {
+        hint: `${pluralize__default.default("run", row.signals.stuckCount, !0)} here can’t continue without help`
+    };
 }
 
-const CARD_MIN_WIDTH = 280, CARD_RADIUS$1 = 3, CARD_PADDING = 4, CARD_MIN_HEIGHT = 180;
+const CARD_MIN_WIDTH = 280, CARD_RADIUS$1 = 3, CARD_PADDING = 4, HINT_DOCUMENT_MAX_WIDTH = 200, BAND_GAP = 6, CARD_MIN_HEIGHT = 120;
 
-function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
-    const {definitions: definitions, error: error} = useDeployedDefinitions(), {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), undeployed = /* @__PURE__ */ jsxRuntime.jsx(UndeployedWorkflows, {
+function OverviewTab({identity: identity, onOpenWorkflow: onOpenWorkflow}) {
+    const {definitions: definitions, error: error} = useDeployedDefinitions(), {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), now = index.useMinuteClock(), view = catalogView({
+        definitions: definitions,
+        error: error,
+        identity: identity,
+        instances: instances,
+        issues: mappingIssues,
+        mappings: mappings,
+        now: now
+    }), undeployed = /* @__PURE__ */ jsxRuntime.jsx(UndeployedWorkflows, {
         notices: undeployedWorkflowNotices({
             issues: mappingIssues,
             titleOf: name => schema.get(name)?.title
         })
     });
-    if (error !== void 0) /* @__PURE__ */ return jsxRuntime.jsx(index.NoteBanner, {
+    return view.kind === "unreadable" ? /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
         label: CATALOG_READ_FAILED,
         tone: "critical"
-    });
-    if (definitions === void 0) /* @__PURE__ */
-    return jsxRuntime.jsx(TabStatusRow, {
+    }) : view.kind === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
         children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
             label: "Loading workflows…"
         })
-    });
-    if (definitions.length === 0) /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
+    }) : view.kind === "empty" ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         direction: "column",
         flex: 1,
         gap: 3,
-        paddingBottom: 4,
+        paddingBottom: 3,
         paddingTop: 3,
         children: [ undeployed, 
         /* @__PURE__ */ jsxRuntime.jsx(index.EmptyState, {
@@ -555,19 +846,7 @@ function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
             icon: /* @__PURE__ */ jsxRuntime.jsx(Transfer.TransferIcon, {}),
             title: "No workflows deployed"
         }) ]
-    });
-    const rows = definitionCatalog({
-        definitions: definitions,
-        mappings: mappings,
-        inFlight: instances.inFlight,
-        issues: mappingIssues
-    }), active = rows.reduce((sum, row) => sum + row.activeCount, 0), activity = activeHeadline({
-        active: active,
-        error: instances.error,
-        loading: instances.loading
-    });
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Stack, {
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
         gap: 3,
         paddingBottom: 4,
         paddingTop: 3,
@@ -575,39 +854,48 @@ function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
             label: INSTANCES_READ_FAILED,
             tone: "critical"
         }), 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            gap: 2,
-            padding: TOOL_HEADING_PADDING,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                weight: "semibold",
-                children: pluralize__default.default("workflow", rows.length, !0)
-            }), activity === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: activity
-            }) ]
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, {
-            gap: 3,
-            style: {
-                gridAutoRows: `minmax(${CARD_MIN_HEIGHT}px, auto)`,
-                gridTemplateColumns: `repeat(auto-fill, minmax(${CARD_MIN_WIDTH}px, 1fr))`
-            },
-            children: rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(WorkflowCard, {
-                countKnown: instances.error === void 0 && !instances.loading,
-                onOpen: () => onOpenWorkflow(row.name),
-                row: row
-            }, row.name))
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+            gap: BAND_GAP,
+            children: view.bands.map(band => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                gap: 3,
+                children: [ band.title === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                    padding: TOOL_HEADING_PADDING,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(index.CountedHeading, {
+                        count: band.rows.length,
+                        title: band.title
+                    })
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(CardGrid, {
+                    countKnown: instances.error === void 0,
+                    now: now,
+                    onOpenWorkflow: onOpenWorkflow,
+                    rows: band.rows
+                }) ]
+            }, band.title ?? UNBANDED_KEY))
         }), instances.truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
             text: INSTANCE_CAP_COUNT_NOTE
         }) : null ]
     });
 }
 
-const CARD_ISSUES_HINT = "This workflow has issues";
+const UNBANDED_KEY = "all";
+
+function CardGrid({countKnown: countKnown, now: now, onOpenWorkflow: onOpenWorkflow, rows: rows}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Grid, {
+        gap: 3,
+        style: {
+            gridAutoRows: `minmax(${CARD_MIN_HEIGHT}px, auto)`,
+            gridTemplateColumns: `repeat(auto-fill, minmax(${CARD_MIN_WIDTH}px, 1fr))`
+        },
+        children: rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(WorkflowCard, {
+            countKnown: countKnown,
+            now: now,
+            onOpen: () => onOpenWorkflow(row.name),
+            row: row
+        }, row.name))
+    });
+}
 
 function UndeployedWorkflows({notices: notices}) {
     return notices.length === 0 ? null : 
@@ -620,8 +908,104 @@ function UndeployedWorkflows({notices: notices}) {
     });
 }
 
-function WorkflowCard({countKnown: countKnown, onOpen: onOpen, row: row}) {
-    const flagged = row.brokenBindings.length > 0, card = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+function LastTransitionHint({transition: transition}) {
+    const documents = react.useMemo(() => transition.document === void 0 ? [] : [ transition.document ], [ transition.document ]), {resolved: resolved, titles: titles} = useDocPreviewTitles(documents), id = transition.document?.id, face = transitionFace({
+        at: transition.at,
+        documentPending: id !== void 0 && !resolved.has(id),
+        documentTitle: id === void 0 ? void 0 : titles.get(id) ?? UNTITLED_DOCUMENT,
+        stage: transition.stage
+    });
+    return face.state === "pending" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+        muted: !0,
+        size: 1,
+        children: TRANSITION_HINT_PENDING
+    }) : 
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: face.heading
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+            size: 1,
+            textOverflow: "ellipsis",
+            children: [ face.document === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(HintDocument, {
+                children: face.document
+            }), face.document === void 0 ? "" : " ", face.lead, " ", 
+            /* @__PURE__ */ jsxRuntime.jsx(index.InlineEmphasis, {
+                children: face.stage
+            }) ]
+        }) ]
+    });
+}
+
+function HintDocument({children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx("span", {
+        style: {
+            display: "inline-block",
+            maxWidth: HINT_DOCUMENT_MAX_WIDTH,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            verticalAlign: "bottom",
+            whiteSpace: "nowrap"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.InlineEmphasis, {
+            children: children
+        })
+    });
+}
+
+function overdueWork(signals) {
+    return {
+        documentCount: signals.overdueDocumentCount,
+        documentlessCount: signals.overdueDocumentlessCount
+    };
+}
+
+function CardMetrics$1({now: now, signals: signals}) {
+    const overdue = overdueWork(signals), overdueTotal = overdue.documentCount + overdue.documentlessCount, documents = documentFace(signals, signals.initialStageDocumentCount);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+            Icon: Document.DocumentIcon,
+            empty: signals.documentCount === 0 && signals.documentlessCount === 0,
+            face: {
+                text: documents.lead,
+                ...documents.startLine === void 0 ? {} : {
+                    description: documents.startLine
+                }
+            },
+            value: String(signals.documentCount)
+        }), signals.lastTransition === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+            Icon: Clock.ClockIcon,
+            face: {
+                content: /* @__PURE__ */ jsxRuntime.jsx(LastTransitionHint, {
+                    transition: signals.lastTransition
+                }),
+                wide: !0
+            },
+            value: index.formatShortAgo(signals.lastTransition.at, now)
+        }), overdueTotal === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+            Icon: Calendar.CalendarIcon,
+            face: {
+                text: overdueHint(overdue)
+            },
+            tone: "caution",
+            value: String(overdueTotal)
+        }) ]
+    });
+}
+
+function WorkflowCard({countKnown: countKnown, now: now, onOpen: onOpen, row: row}) {
+    const alert = definitionAlert(row);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Card, {
         as: "button",
         onClick: onOpen,
         padding: CARD_PADDING,
@@ -634,50 +1018,44 @@ function WorkflowCard({countKnown: countKnown, onOpen: onOpen, row: row}) {
             textAlign: "left",
             width: "100%"
         },
-        ...flagged ? {
-            tone: "caution"
-        } : {},
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "flex-start",
-            gap: 3,
-            children: [ flagged ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                children: /* @__PURE__ */ jsxRuntime.jsx(WarningOutline.WarningOutlineIcon, {})
-            }) : null, 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 2,
+            style: {
                 flex: 1,
-                gap: 3,
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
                 style: {
+                    flex: 1,
                     minWidth: 0
                 },
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    size: 1,
-                    weight: "semibold",
-                    children: row.title
-                }), countKnown ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    muted: !0,
-                    size: 1,
-                    children: activeSummary(row.activeCount)
-                }) : null ]
+                weight: "medium",
+                children: row.title
+            }), alert === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.AlertGlyph, {
+                Icon: ErrorOutline.ErrorOutlineIcon,
+                hint: alert.hint,
+                tone: "critical"
             }) ]
-        })
+        }), countKnown ? /* @__PURE__ */ jsxRuntime.jsx(CardMetrics$1, {
+            now: now,
+            signals: row.signals
+        }) : null ]
     });
-    return flagged ? /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
-        fill: !0,
-        text: CARD_ISSUES_HINT,
-        children: card
-    }) : card;
 }
 
 function useStartableDefinitions() {
-    const {definitions: definitions, error: error} = useDeployedDefinitions();
+    const {definitions: definitions, error: error} = useDeployedDefinitions(), startable = react.useMemo(() => definitions?.filter(row => workflowEngine.isStartableDefinition(row)).map(row => ({
+        name: row.name,
+        title: row.title ?? row.name,
+        description: row.description
+    })), [ definitions ]);
     return {
-        definitions: react.useMemo(() => definitions?.filter(row => workflowEngine.isStartableDefinition(row)).map(row => ({
-            name: row.name,
-            title: row.title ?? row.name,
-            description: row.description
-        })), [ definitions ]),
+        catalogEmpty: definitions?.length === 0,
+        definitions: startable,
         error: error
     };
 }
@@ -709,16 +1087,45 @@ function NewWorkflowButton() {
     });
 }
 
+const PANEL_WIDTH = 340;
+
+function NothingToStart({catalogEmpty: catalogEmpty}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        padding: 4,
+        style: {
+            width: PANEL_WIDTH
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                align: "center",
+                size: 1,
+                weight: "medium",
+                children: catalogEmpty ? "No workflows deployed" : "Nothing to start by hand"
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                align: "center",
+                muted: !0,
+                size: 1,
+                children: catalogEmpty ? "Deploy a workflow to this project to start one from here" : "Every deployed workflow here is started by a parent workflow, never by hand"
+            }) ]
+        })
+    });
+}
+
 function DefinitionPickerPanel({onPick: onPick}) {
-    const {definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = react.useState(""), visible = react.useMemo(() => {
+    const {catalogEmpty: catalogEmpty, definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = react.useState(""), visible = react.useMemo(() => {
         const q = query.trim().toLowerCase();
         return definitions ? q ? definitions.filter(d => `${d.title} ${d.name}`.toLowerCase().includes(q)) : definitions : [];
     }, [ definitions, query ]), settled = error === void 0 ? definitions : void 0;
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Box, {
+    return settled?.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(NothingToStart, {
+        catalogEmpty: catalogEmpty
+    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
         padding: 2,
         style: {
-            width: 340
+            width: PANEL_WIDTH
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
             gap: 2,
@@ -735,8 +1142,6 @@ function DefinitionPickerPanel({onPick: onPick}) {
                 tone: "critical"
             }) : null, !definitions && !error ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
                 label: "Loading workflows…"
-            }) : null, settled?.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: "No startable workflows are deployed"
             }) : null, settled !== void 0 && settled.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
                 text: "No workflows match"
             }) : null, 
@@ -1015,13 +1420,20 @@ function useBandOpen(bands, key) {
     };
 }
 
-const REVEAL_MAX_WAIT_MS = 2e3;
+const REVEAL_STALL_MS = 2e3, REVEAL_COLD_MS = 15e3;
 
 function useRevealGate(args) {
-    const {loading: loading, ready: ready} = args, settled = !loading && ready, expired = index.useDelayedFlag(!loading && !ready, REVEAL_MAX_WAIT_MS), [revealed, setRevealed] = react.useState(!1);
+    const {loading: loading, progress: progress, ready: ready} = args, settled = !loading && ready, [stalled, setStalled] = react.useState(!1);
+    react.useEffect(() => {
+        if (loading || ready) return;
+        setStalled(!1);
+        const budget = progress > 0 ? REVEAL_STALL_MS : REVEAL_COLD_MS, timer = setTimeout(() => setStalled(!0), budget);
+        return () => clearTimeout(timer);
+    }, [ loading, progress, ready ]);
+    const [revealed, setRevealed] = react.useState(!1);
     return react.useEffect(() => {
-        !revealed && (settled || expired) && setRevealed(!0);
-    }, [ expired, revealed, settled ]), revealed || settled || expired;
+        !revealed && (settled || stalled) && setRevealed(!0);
+    }, [ revealed, settled, stalled ]), revealed || settled || stalled;
 }
 
 function spawnOrigins(instances) {
@@ -1034,16 +1446,11 @@ function spawnOrigins(instances) {
     return origins;
 }
 
-function rootOf(instance, byId) {
-    const rootRef = instance.ancestors[0];
-    return rootRef ? byId.get(workflowEngine.toBareId(rootRef.id)) ?? instance : instance;
-}
-
 function taskRowsOf(args) {
     const {instance: instance, identity: identity} = args, open = workflowEngine.findOpenStageEntry(instance);
     if (!open) return [];
     const definition = index.definitionSnapshotOf(instance), state = index.stateByActivity(instance), rows = (open.activities ?? []).map(activity => {
-        const fields = state.get(activity.name) ?? [], declared = index.findActivityNode({
+        const fields = state.get(activity.name) ?? [], declared = workflowEngine.findActivityNode({
             definition: definition,
             stageName: open.name,
             activityName: activity.name
@@ -1098,7 +1505,7 @@ function deriveTaskGroups(args) {
                 activityName: origin.activityName
             }).title : void 0,
             rows: rows
-        }, root = rootOf(instance, byId), documents = documentRefsOf(root), document2 = documents[0];
+        }, root = rootInstanceOf(instance, byId), documents = documentRefsOf(root), document2 = documents[0];
         if (!document2) {
             withoutDocuments.push(entry);
             continue;
@@ -1404,72 +1811,6 @@ function SettleOrphansDialog({workflows: workflows, onClose: onClose}) {
     });
 }
 
-const NO_TITLES = {
-    titles: /* @__PURE__ */ new Map,
-    resolved: /* @__PURE__ */ new Set
-};
-
-function useDocPreviewTitles(documents) {
-    const previewStore = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), {perspectiveStack: perspectiveStack} = sanity.usePerspective(), {actualTypes: actualTypes, binding: binding} = index.useWorkflowContext(), [state, setState] = react.useState(NO_TITLES), key = documents.map(doc => doc.id).join("|");
-    return react.useEffect(() => {
-        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, previews = /* @__PURE__ */ new Map, publish = () => setState({
-            titles: new Map(titles),
-            resolved: new Set(resolved)
-        }), localDocs = documents.flatMap(doc => {
-            const {parsed: parsed, local: local} = index.gdrLocality(doc.id, binding.contentResource);
-            return !parsed || !local ? (resolved.add(doc.id), []) : [ {
-                doc: doc,
-                bareId: parsed.documentId
-            } ];
-        }), untracks = localDocs.map(({bareId: bareId}) => actualTypes.track(bareId)), dropPreview = docId => {
-            previews.get(docId)?.unsubscribe(), previews.delete(docId), titles.delete(docId);
-        }, observe = ({docId: docId, bareId: bareId, typeName: typeName}) => {
-            const schemaType = index.openableSchemaType(schema, typeName);
-            if (!schemaType) return !1;
-            if (previews.get(docId)?.typeName === typeName) return !0;
-            dropPreview(docId), resolved.delete(docId);
-            const subscription = previewStore.observeForPreview({
-                _id: bareId,
-                _type: schemaType.name
-            }, schemaType, {
-                perspective: perspectiveStack
-            }).subscribe({
-                next: event => {
-                    resolved.add(docId);
-                    const title = event.snapshot?.title;
-                    typeof title == "string" ? titles.set(docId, title) : titles.delete(docId), publish();
-                },
-                error: err => {
-                    console.error(`[workflow-studio-plugin] preview for "${docId}" failed:`, err), resolved.add(docId), 
-                    publish();
-                }
-            });
-            return previews.set(docId, {
-                typeName: typeName,
-                unsubscribe: () => subscription.unsubscribe()
-            }), !0;
-        }, evaluate = () => {
-            for (const {doc: doc, bareId: bareId} of localDocs) {
-                const probe = actualTypes.read(bareId);
-                if (probe === null) {
-                    dropPreview(doc.id), resolved.add(doc.id);
-                    continue;
-                }
-                !observe({
-                    docId: doc.id,
-                    bareId: bareId,
-                    typeName: probe ?? doc.type
-                }) && typeof probe == "string" && (dropPreview(doc.id), resolved.add(doc.id));
-            }
-            publish();
-        }, unsubscribeProbes = actualTypes.subscribe(evaluate);
-        return evaluate(), () => {
-            unsubscribeProbes(), untracks.forEach(untrack => untrack()), previews.forEach(preview => preview.unsubscribe());
-        };
-    }, [ key, previewStore, schema, actualTypes, binding.contentResource.id, perspectiveStack.join("|") ]), 
-    state;
-}
-
 function taskFilterOptions(groups) {
     const workflows = /* @__PURE__ */ new Map, documents = /* @__PURE__ */ new Map;
     for (const group of groups.withDocuments) {
@@ -2647,6 +2988,7 @@ function TasksTab({error: error, filterSlot: filterSlot, instances: instances, l
         identity: identity
     }), [ instances, identity ]), orphans = useOrphanedWorkflows(groups), listed = react.useMemo(() => hideOrphanedGroups(groups, orphans.groupKeys), [ groups, orphans.groupKeys ]), options = react.useMemo(() => taskFilterOptions(listed), [ listed ]), titles = useGroupTitles(listed), revealed = useRevealGate({
         loading: loading,
+        progress: titles.resolved.size,
         ready: titles.ready
     }), visible = react.useMemo(() => {
         const filtered = applyTaskFilters({
@@ -2706,6 +3048,30 @@ function TasksTab({error: error, filterSlot: filterSlot, instances: instances, l
     });
 }
 
+function cardFacts(args) {
+    return new Map(args.instances.map(instance => [ instance._id, {
+        pending: openActivitiesOf(instance).length,
+        overdue: overdueTaskCount(instance, args.now),
+        stuck: workflowEngine.documentStuckCause({
+            instance: instance,
+            definition: index.definitionSnapshotOf(instance)
+        }) !== void 0,
+        settled: workflowEngine.terminalState(instance) !== "in-flight"
+    } ]));
+}
+
+function laneTotals(cards, facts) {
+    let overdue = 0, stuck = 0;
+    for (const card of cards) {
+        const held = facts.get(card.instanceId);
+        held !== void 0 && (held.overdue > 0 && (overdue += 1), held.stuck && (stuck += 1));
+    }
+    return {
+        overdue: overdue,
+        stuck: stuck
+    };
+}
+
 const BOARD_EMPTY_STAGE_NOTE = "No items";
 
 function faceOf(instance) {
@@ -2764,6 +3130,24 @@ function boardDocuments(board) {
     return board.groups.flatMap(group => group.cards.flatMap(card => card.face.kind === "document" ? [ card.face.document ] : []));
 }
 
+function pendingHint(pending) {
+    return pending === 0 ? "All tasks done" : `${pluralize__default.default("task", pending, !0)} still open`;
+}
+
+function overdueTasksHint(overdue) {
+    return `${pluralize__default.default("task", overdue, !0)} past ${overdue === 1 ? "its" : "their"} due date`;
+}
+
+const STUCK_RUN_HINT = "This run can’t continue without help";
+
+function laneOverdueHint(overdue) {
+    return `${overdue} of these ${overdue === 1 ? "has" : "have"} overdue tasks`;
+}
+
+function laneStuckHint(stuck) {
+    return `${stuck} of these can’t continue without help`;
+}
+
 function CardTitleFace({title: title}) {
     return title.kind === "title" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: title.title
@@ -2790,23 +3174,10 @@ function cardTitle(args) {
     };
 }
 
-function ownOpenTasks(instance) {
-    const open = workflowEngine.findOpenStageEntry(instance);
-    return open ? (open.activities ?? []).filter(activity => index.isOpenActivityStatus(activity.status)).length : 0;
-}
-
-function pendingTaskCounts(instances) {
-    return new Map(instances.map(instance => [ instance._id, ownOpenTasks(instance) ]));
-}
-
-function pendingTasksPhrase(pending) {
-    if (pending !== void 0) return pending === 0 ? "All tasks done" : pluralize__default.default("pending task", pending, !0);
-}
-
 const CARD_RADIUS = 3;
 
 function BoardCard({card: card, wiring: wiring}) {
-    const {onSelect: onSelect, pending: pending, selectedInstanceId: selectedInstanceId, titles: titles} = wiring, {color: color} = ui.useTheme_v2(), selected = card.instanceId === selectedInstanceId;
+    const {facts: facts, onSelect: onSelect, selectedInstanceId: selectedInstanceId, titles: titles} = wiring, {color: color} = ui.useTheme_v2(), selected = card.instanceId === selectedInstanceId, held = facts.get(card.instanceId);
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Card, {
         "aria-pressed": selected,
@@ -2824,54 +3195,93 @@ function BoardCard({card: card, wiring: wiring}) {
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
             gap: 3,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                weight: "medium",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CardTitleFace, {
-                    title: cardTitle({
-                        face: card.face,
-                        titles: titles
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "flex-start",
+                gap: 2,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    size: 1,
+                    style: {
+                        flex: 1,
+                        minWidth: 0
+                    },
+                    weight: "medium",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CardTitleFace, {
+                        title: cardTitle({
+                            face: card.face,
+                            titles: titles
+                        })
                     })
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(PendingTasks, {
-                pending: pending.get(card.instanceId)
+                }), held?.stuck === !0 ? /* @__PURE__ */ jsxRuntime.jsx(index.AlertGlyph, {
+                    Icon: ErrorOutline.ErrorOutlineIcon,
+                    hint: STUCK_RUN_HINT,
+                    tone: "critical"
+                }) : null ]
+            }), held === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(CardMetrics, {
+                facts: held
             }) ]
         })
     });
 }
 
-function PendingTasks({pending: pending}) {
-    const badgeTrim = index.useBadgeCapTrim(), phrase = pendingTasksPhrase(pending);
-    return phrase === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+function CardMetrics({facts: facts}) {
+    return facts.settled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         align: "center",
-        style: badgeTrim,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-            padding: 2,
-            radius: 2,
-            tone: "transparent",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: pending === 0,
-                size: 1,
-                children: phrase
-            })
-        })
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+            Icon: Empty.EmptyIcon,
+            empty: facts.pending === 0,
+            face: {
+                text: pendingHint(facts.pending)
+            },
+            value: String(facts.pending)
+        }), facts.overdue === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+            Icon: Calendar.CalendarIcon,
+            face: {
+                text: overdueTasksHint(facts.overdue)
+            },
+            tone: "caution",
+            value: String(facts.overdue)
+        }) ]
     });
 }
 
-function StageGroupHeading({group: group}) {
+function StageGroupHeading({facts: facts, group: group}) {
+    const totals = laneTotals(group.cards, facts);
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Flex, {
         align: "center",
         gap: 2,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(index.CountedLabel, {
+        /* @__PURE__ */ jsxRuntime.jsx(index.CountedHeading, {
             count: group.cards.length,
-            label: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                weight: "semibold",
-                children: group.title
-            })
+            title: group.title
+        }), totals.overdue === 0 && totals.stuck === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                flex: 1
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "center",
+                flex: "none",
+                gap: 3,
+                children: [ totals.overdue === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+                    Icon: Calendar.CalendarIcon,
+                    face: {
+                        text: laneOverdueHint(totals.overdue)
+                    },
+                    tone: "caution",
+                    value: String(totals.overdue)
+                }), totals.stuck === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.MetricPair, {
+                    Icon: ErrorOutline.ErrorOutlineIcon,
+                    face: {
+                        text: laneStuckHint(totals.stuck)
+                    },
+                    tone: "critical",
+                    value: String(totals.stuck)
+                }) ]
+            }) ]
         }), group.retired ? 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
             muted: !0,
@@ -2920,6 +3330,7 @@ function StageColumn({group: group, leadingRule: leadingRule, trailingRule: trai
             paddingTop: 4,
             paddingX: LANE_PADDING,
             children: /* @__PURE__ */ jsxRuntime.jsx(StageGroupHeading, {
+                facts: wiring.facts,
                 group: group
             })
         }), group.cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
@@ -3060,7 +3471,7 @@ function useBoard(args) {
     }), {titles: titles, ready: ready} = seeded, board = react.useMemo(() => derived ? orderBoardByPreviewTitle(derived, titles) : void 0, [ derived, titles ]);
     return react.useMemo(() => ({
         board: board,
-        ready: ready,
+        ready: board !== void 0 && ready,
         titles: seeded
     }), [ board, ready, seeded ]);
 }
@@ -3167,11 +3578,13 @@ function ActiveCount({face: face}) {
 }
 
 function DefinitionFacts({definition: definition}) {
-    const {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), snapshotWidth = index.useContainerToken(2), [row] = definitionCatalog({
+    const {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), now = index.useMinuteClock(), snapshotWidth = index.useContainerToken(2), [row] = definitionCatalog({
         definitions: [ definition ],
+        identity: void 0,
         mappings: mappings,
-        inFlight: instances.inFlight,
-        issues: mappingIssues
+        instances: [ ...instances.inFlight, ...instances.settled ],
+        issues: mappingIssues,
+        now: now
     }), runsOn = docTypeLabels(row?.docTypes ?? [], name => schema.get(name)?.title).map(docType => docType.title);
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Flex, {
@@ -3209,7 +3622,7 @@ function DefinitionFacts({definition: definition}) {
                     label: "Active instances",
                     children: /* @__PURE__ */ jsxRuntime.jsx(ActiveCount, {
                         face: activeCountFace({
-                            count: row?.activeCount ?? 0,
+                            count: row?.signals.activeCount ?? 0,
                             error: instances.error,
                             loading: instances.loading,
                             truncated: instances.truncated
@@ -3277,7 +3690,7 @@ function pickerLabel(face) {
 }
 
 function WorkflowPicker({face: face, onSelect: onSelect, options: options}) {
-    const empty = options.length === 0;
+    const empty = options.length === 0, reclaimed = -index.useSpaceToken(TOOL_HEADING_PADDING);
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
@@ -3287,6 +3700,9 @@ function WorkflowPicker({face: face, onSelect: onSelect, options: options}) {
             iconRight: ChevronDown.ChevronDownIcon,
             mode: "bleed",
             padding: TOOL_HEADING_PADDING,
+            style: {
+                margin: reclaimed
+            },
             text: pickerLabel(face),
             textWeight: "semibold"
         }),
@@ -3317,6 +3733,7 @@ function WorkflowPageHeader({face: face, onSelectPage: onSelectPage, onSelectWor
         children: [ 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
             align: "center",
+            padding: TOOL_HEADING_PADDING,
             children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowPicker, {
                 face: face,
                 onSelect: onSelectWorkflow,
@@ -3760,20 +4177,28 @@ function WorkflowPage({onOpenWorkflow: onOpenWorkflow, onSelectPage: onSelectPag
     }), instances = useBoardInstances(view.streamName), {board: board, ready: ready, titles: titles} = useBoard({
         definition: selected,
         instances: instances.rows
-    }), {select: select, selectedInstanceId: selectedInstanceId} = usePageSelection(page), panel = usePanelPresence(panelSubject({
+    }), {select: select, selectedInstanceId: selectedInstanceId} = usePageSelection(page), now = index.useMinuteClock(), panel = usePanelPresence(panelSubject({
         board: board,
         selectedInstanceId: selectedInstanceId
     })), revealed = useRevealGate({
         loading: instances.loading,
+        progress: titles.resolved.size,
         ready: ready
-    }), waiting = index.useDelayedFlag(selection.kind === "loading" && catalogError === void 0, WAIT_CUE_DELAY_MS);
+    });
     if (selection.kind === "loading") /* @__PURE__ */ return jsxRuntime.jsx(UnresolvedPage, {
-        error: catalogError,
-        waiting: waiting
+        error: catalogError
+    });
+    const catalogEmpty = (definitions ?? []).length === 0;
+    if (selection.kind === "unknown" && catalogEmpty) /* @__PURE__ */
+    return jsxRuntime.jsx(EmptyCatalogPage, {
+        name: selection.name
     });
     const wiring = {
         onSelect: select,
-        pending: pendingTaskCounts(instances.rows),
+        facts: cardFacts({
+            instances: instances.rows,
+            now: now
+        }),
         selectedInstanceId: selectedInstanceId,
         titles: titles
     };
@@ -3826,7 +4251,7 @@ function WorkflowPage({onOpenWorkflow: onOpenWorkflow, onSelectPage: onSelectPag
                 }), 
                 /* @__PURE__ */ jsxRuntime.jsx(PageBody, {
                     board: board,
-                    catalogEmpty: (definitions ?? []).length === 0,
+                    catalogEmpty: catalogEmpty,
                     catalogError: catalogError,
                     instancesError: instances.error,
                     loading: !revealed,
@@ -3856,30 +4281,45 @@ function WorkflowPage({onOpenWorkflow: onOpenWorkflow, onSelectPage: onSelectPag
     });
 }
 
-const WAIT_CUE_DELAY_MS = 300;
-
-function UnresolvedPage({error: error, waiting: waiting}) {
+function UnresolvedPage({error: error}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Flex, {
         direction: "column",
         height: "fill",
         overflow: "hidden",
-        children: error === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(WaitingFace, {
-            waiting: waiting
-        }) : /* @__PURE__ */ jsxRuntime.jsx(ReadErrorFace, {
+        children: error === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(WaitingFace, {}) : /* @__PURE__ */ jsxRuntime.jsx(ReadErrorFace, {
             text: CATALOG_READ_FAILED
         })
     });
 }
 
-function WaitingFace({waiting: waiting}) {
+function WaitingFace() {
     /* @__PURE__ */
     return jsxRuntime.jsx(StatusBox, {
-        children: waiting ? /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
             children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
                 label: "Loading workflow…"
             })
-        }) : null
+        })
+    });
+}
+
+function EmptyCatalogPage({name: name}) {
+    const face = unknownWorkflowFace({
+        catalogEmpty: !0,
+        name: name
+    });
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Flex, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        padding: LANE_PADDING,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.EmptyState, {
+            description: face.description,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {}),
+            title: face.title
+        })
     });
 }
 
@@ -4084,11 +4524,12 @@ function WorkflowsHome({filterSlot: filterSlot, onOpenInstance: onOpenInstance,
 
 function HomePanel({filterSlot: filterSlot, identity: identity, instances: instances, onOpenInstance: onOpenInstance, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, tab: tab}) {
     return tab === "overview" ? /* @__PURE__ */ jsxRuntime.jsx(OverviewTab, {
+        identity: identity,
         onOpenWorkflow: onOpenWorkflow
     }) : /* @__PURE__ */ jsxRuntime.jsx(TasksTab, {
         error: instances.error,
         filterSlot: filterSlot,
-        identity: identity,
+        identity: index.identityOf(identity),
         instances: [ ...instances.inFlight, ...instances.settled ],
         loading: instances.loading,
         onOpenInstance: onOpenInstance,