@sanity/workflow-studio-plugin 0.22.0 → 0.24.0

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

@@ -1,26 +1,52 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import { Stack, Box, Flex, Text, Button, Card, TextInput, Dialog, Badge, useTheme_v2, Container, TabPanel } from "@sanity/ui";
+import { Box, Text, Card, Flex, Stack, MenuButton, Menu, MenuItem, Button, Badge, Dialog, TextInput, useTheme_v2, TabPanel } from "@sanity/ui";
 
-import { useWorkflowTelemetry, editFieldTarget } from "@sanity/workflow-react";
+import { useWorkflowTelemetry } from "@sanity/workflow-react";
 
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useMemo, useSyncExternalStore, useCallback, useState, useEffect, useRef } from "react";
 
 import { useRouter } from "sanity/router";
 
-import { instanceNotice, StaleLock, ActivitiesList, TodoItemsList, isEvaluationStale, useWorkflowInstanceEntry, useLogEventOnMount, WorkflowInstanceDetailViewed, InvalidDocNotice, LoadingRow, useDefinition, openActivityGone, GroupHeading, ActivityDetailDialog, instanceBreadcrumb, HoverHint, instanceTitle, formatDate, StageChip, stageTitle, AbortedBadge, SpinnerSlot, DocPreviewLink, useWorkflowContext, readDeployedDefinitions, describeError, DismissablePopover, definitionSnapshotOf, findActivity, stateByActivity, findActivityNode, rowDateControlState, rowAssignControlState, isActivityAssignedTo, assigneeUserIdsOf, isOpenActivityStatus, committedRowFace, activityRowProps, gdrLocality, CautionNote, WORKFLOW_API_VERSION, useClosableToast, parseStoredDateValue, useUserDisplays, useProjectMembers, WorkflowTaskFiltersApplied, DocRefFace, useSaveField, dateControlValue, stopRowMouseDown, stopRowClick, parseDateFieldValue, serializeDateFieldValue, dateControlKind, CollapsibleBand, LinkChip, BreadcrumbTail, StageFace, TrailingHairline, ActivityRow, UnreadableDocsNote, useAssignmentIdentity, TabSwitch, WorkflowToolOpened, workflowsTabCodec } from "./index.js";
+import { createSubscribers, useWorkflowContext, readDeployedDefinitions, describeError, useDelayedFlag, instanceTitle, definitionSnapshotOf, stageTitle, DocPreviewLink, NOTICE_PADDING, chipPadding, CountedLabel, useSpaceToken, useRadiusToken, HoverHint, definitionFingerprint, CollapsibleBand, gdrLocality, openableSchemaType, WORKFLOW_API_VERSION, WorkflowTitleSeedDrifted, WorkflowBoardLayoutChanged, UnreadableDocsNote, LogEventOnMount, WorkflowBoardWorkflowSelected, LoadingRow, EmptyState, mappingIssueDetail, formatTimeAgo, formatShortDateTime, namesNoDeployedDefinition, SpinnerSlot, WorkflowDefinitionDetailViewed, useContainerToken, MetaRow, CautionNote, useBadgeCapTrim, TOAST_ID, useDefinition, useWorkflowToast, isLiveEntry, UserAvatar, formatShortAgo, formatDateTime, useAvatarSize, HintedMenuButton, useUserDisplay, useWorkflowInstanceEntry, useLogEventOnMount, WorkflowInstanceDetailViewed, InvalidDocNotice, openActivityGone, isEvaluationStale, InstanceSnapshotBody, ActivityDetailDialog, instanceBreadcrumb, DismissablePopover, findActivity, stateByActivity, findActivityNode, rowDateControlState, rowAssignControlState, isActivityAssignedTo, assigneeUserIdsOf, isOpenActivityStatus, isDateFieldKind, committedRowFace, activityRowProps, formatDate, parseStoredDateValue, useUserDisplays, useProjectMembers, WorkflowTaskFiltersApplied, DocRefFace, useEditField, useSaveField, dateControlValue, stopRowMouseDown, stopRowClick, dateControlKind, parseDateFieldValue, hasTimeOfDay, serializeDateFieldValue, LinkChip, BreadcrumbTail, StageFace, TrailingHairline, StaleLock, ActivityRow, ForMeEmptyState, pathSegmentTab, TabSwitch, WorkflowToolOpened, useAssignmentIdentity } from "./index.js";
 
-import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
+import { SearchIcon } from "@sanity/icons/Search";
+
+import { latestDeployedDefinitions, entryDocRefs, terminalState, startKindOf, isSubjectEntry, isInputSourced, isStartableDefinition, toBareId, findOpenStageEntry } from "@sanity/workflow-engine";
+
+import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
+
+import { InlineIcon } from "@sanity/icons/Inline";
+
+import { StackCompactIcon } from "@sanity/icons/StackCompact";
+
+import { createPortal } from "react-dom";
+
+import { isReferenceSchemaType } from "@sanity/types";
+
+import { useDocumentPreviewStore, useSchema, usePerspective, useClient } from "sanity";
+
+import { useWorkflowInstances } from "@sanity/workflow-studio";
+
+import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 
 import { WorkflowDiagram } from "@sanity/workflow-diagram";
 
-import { entryDocRefs, terminalState, latestDeployedDefinitions, isStartableDefinition, toBareId, findOpenStageEntry } from "@sanity/workflow-engine";
+import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 
-import { AddIcon } from "@sanity/icons/Add";
+import { InfoOutlineIcon } from "@sanity/icons/InfoOutline";
 
-import { SearchIcon } from "@sanity/icons/Search";
+import { TransferIcon } from "@sanity/icons/Transfer";
 
-import { useClient, useDocumentPreviewStore, useSchema } from "sanity";
+import pluralize from "pluralize-esm";
+
+import { ClockIcon } from "@sanity/icons/Clock";
+
+import { CogIcon } from "@sanity/icons/Cog";
+
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
+
+import { AddIcon } from "@sanity/icons/Add";
 
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 
@@ -32,88 +58,2369 @@ import { MemberAvatar, DatePicker, ClearableDatePicker } from "@sanity/workflow-
 
 import { endOfDay } from "date-fns/endOfDay";
 
-import { createPortal } from "react-dom";
-
 import { CalendarIcon } from "@sanity/icons/Calendar";
 
-import { useWorkflowInstances } from "@sanity/workflow-studio";
+function MutedNote({text: text}) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        paddingY: 3,
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: text
+        })
+    });
+}
 
-function documentRefsOf(instance) {
-    const seen = /* @__PURE__ */ new Map;
-    for (const ref of entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
-    return [ ...seen.values() ];
+function TabStatusRow({children: children}) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        paddingLeft: 2,
+        paddingY: 3,
+        children: children
+    });
 }
 
-function InstanceTaskLists({entry: entry, onOpenActivity: onOpenActivity}) {
-    return instanceNotice(entry) || /* @__PURE__ */ jsx(StaleLock, {
-        stale: isEvaluationStale(entry),
-        children: /* @__PURE__ */ jsxs(Stack, {
-            children: [ 
-            /* @__PURE__ */ jsx(ActivitiesList, {
-                entry: entry,
-                onOpenActivity: onOpenActivity
-            }), 
-            /* @__PURE__ */ jsx(TodoItemsList, {
-                entry: entry,
-                surface: "tool-instance-detail"
-            }) ]
+const TOOL_PANEL_PADDING = 3, UNREADABLE = {
+    readable: !1,
+    raw: void 0
+};
+
+function defaultStorage() {
+    try {
+        return globalThis.localStorage;
+    } catch {
+        return;
+    }
+}
+
+function readItem(storage, key) {
+    if (!storage) return UNREADABLE;
+    try {
+        const raw = storage.getItem(key);
+        return {
+            readable: !0,
+            raw: raw === null ? void 0 : raw
+        };
+    } catch {
+        return UNREADABLE;
+    }
+}
+
+function writeItem(args) {
+    if (!args.storage) return !1;
+    try {
+        return args.storage.setItem(args.key, args.value), !0;
+    } catch {
+        return !1;
+    }
+}
+
+const BAND_DEFAULT_OPEN = !0, UNGROUPED_BAND_KEY = "section:no-document", PAYLOAD_VERSION = 2, MAX_ENTRIES = 200;
+
+function bandStateStorageKey(scope) {
+    return `sanity.workflows.tool.bands:${scope}`;
+}
+
+function isRecord(value) {
+    return typeof value == "object" && value !== null && !Array.isArray(value);
+}
+
+function bandEntryOf(value) {
+    if (!isRecord(value)) return;
+    const {open: open, touched: touched} = value;
+    if (!(typeof open != "boolean" || typeof touched != "number") && Number.isFinite(touched)) return {
+        open: open,
+        touched: touched
+    };
+}
+
+function parsePayload(raw) {
+    try {
+        const parsed = JSON.parse(raw);
+        if (!isRecord(parsed) || parsed.version !== PAYLOAD_VERSION || !isRecord(parsed.bands)) return;
+        const entries = [];
+        for (const [key, value] of Object.entries(parsed.bands)) {
+            const entry = bandEntryOf(value);
+            if (entry === void 0) return;
+            entries.push([ key, entry ]);
+        }
+        return Object.fromEntries(entries);
+    } catch {
+        return;
+    }
+}
+
+function readStored(storage, storageKey) {
+    const {readable: readable, raw: raw} = readItem(storage, storageKey);
+    if (!readable) return {
+        entries: void 0,
+        corrupt: !1
+    };
+    if (raw === void 0) return {
+        entries: {},
+        corrupt: !1
+    };
+    const entries = parsePayload(raw);
+    return {
+        entries: entries,
+        corrupt: entries === void 0
+    };
+}
+
+function writeStored(args) {
+    return writeItem({
+        storage: args.storage,
+        key: args.storageKey,
+        value: JSON.stringify({
+            version: PAYLOAD_VERSION,
+            bands: args.entries
         })
     });
 }
 
-function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
-    const entry = useWorkflowInstanceEntry(instanceId);
-    useLogEventOnMount(WorkflowInstanceDetailViewed, {
-        instanceId: instanceId
+function baseEntries(args) {
+    return args.stored === void 0 ? args.held : args.unpersisted ? mergeByTouched(args.stored, args.held) : args.stored;
+}
+
+function mergeByTouched(stored, held) {
+    const merged = {
+        ...stored
+    };
+    for (const [key, entry] of Object.entries(held)) {
+        const persisted = merged[key];
+        (persisted === void 0 || entry.touched >= persisted.touched) && (merged[key] = entry);
+    }
+    return merged;
+}
+
+function prune(entries) {
+    const held = Object.entries(entries);
+    return held.length <= MAX_ENTRIES ? entries : Object.fromEntries(held.sort(([, a], [, b]) => b.touched - a.touched).slice(0, MAX_ENTRIES));
+}
+
+function togglesOf(entries) {
+    return new Map(Object.entries(entries).map(([key, entry]) => [ key, entry.open ]));
+}
+
+function createBandStateStore(args) {
+    const storage = args.storage ?? defaultStorage(), initial = readStored(storage, args.storageKey);
+    initial.corrupt && writeStored({
+        storage: storage,
+        storageKey: args.storageKey,
+        entries: {}
     });
-    const [graceOver, setGraceOver] = useState(!1);
+    let held = initial.entries ?? {}, toggles = togglesOf(held);
+    const subscribers = createSubscribers();
+    let unpersisted = !1;
+    return {
+        subscribe: subscribers.subscribe,
+        read: () => toggles,
+        setOpen(key, open) {
+            const stored = readStored(storage, args.storageKey).entries, base = baseEntries({
+                stored: stored,
+                held: held,
+                unpersisted: unpersisted
+            });
+            held = prune({
+                ...base,
+                [key]: {
+                    open: open,
+                    touched: Date.now()
+                }
+            }), toggles = togglesOf(held), unpersisted = !writeStored({
+                storage: storage,
+                storageKey: args.storageKey,
+                entries: held
+            }), subscribers.notify();
+        }
+    };
+}
+
+function useBandOpenState(args) {
+    const {segment: segment, scope: scope} = args, store = useMemo(() => createBandStateStore({
+        storageKey: bandStateStorageKey(scope)
+    }), [ scope ]);
+    return useMemo(() => ({
+        segment: segment,
+        store: store
+    }), [ segment, store ]);
+}
+
+function openOf(store, qualified) {
+    return store.read().get(qualified) ?? BAND_DEFAULT_OPEN;
+}
+
+function useBandOpen(bands, key) {
+    const {segment: segment, store: store} = bands, qualified = `${segment}/${key}`;
+    return {
+        open: useSyncExternalStore(store.subscribe, useCallback(() => openOf(store, qualified), [ store, qualified ])),
+        toggle: () => store.setOpen(qualified, !openOf(store, qualified))
+    };
+}
+
+const lastRead = /* @__PURE__ */ new WeakMap, issuedReads = /* @__PURE__ */ new WeakMap;
+
+function useDeployedDefinitions() {
+    const {engine: engine} = useWorkflowContext(), [definitions, setDefinitions] = useState(() => lastRead.get(engine)?.rows), [error, setError] = useState(void 0);
     return useEffect(() => {
-        const timer = setTimeout(() => setGraceOver(!0), 2500);
-        return () => clearTimeout(timer);
-    }, [ instanceId ]), entry?.invalid ? /* @__PURE__ */ jsx(Box, {
-        padding: 4,
-        children: /* @__PURE__ */ jsx(InvalidDocNotice, {
-            invalid: entry.invalid
+        let cancelled = !1;
+        setDefinitions(lastRead.get(engine)?.rows), setError(void 0);
+        const seq = (issuedReads.get(engine) ?? 0) + 1;
+        return issuedReads.set(engine, seq), (async () => {
+            const rows = await readDeployedDefinitions(engine), latest = latestDeployedDefinitions(rows), held = lastRead.get(engine);
+            (held === void 0 || seq > held.seq) && lastRead.set(engine, {
+                seq: seq,
+                rows: latest
+            }), cancelled || (setDefinitions(latest), setError(void 0));
+        })().catch(err => {
+            cancelled || setError(describeError(err));
+        }), () => {
+            cancelled = !0;
+        };
+    }, [ engine ]), {
+        definitions: definitions,
+        error: error
+    };
+}
+
+const REVEAL_MAX_WAIT_MS = 2e3;
+
+function useRevealGate(args) {
+    const {loading: loading, ready: ready} = args, settled = !loading && ready, expired = useDelayedFlag(!loading && !ready, REVEAL_MAX_WAIT_MS), [revealed, setRevealed] = useState(!1);
+    return useEffect(() => {
+        !revealed && (settled || expired) && setRevealed(!0);
+    }, [ expired, revealed, settled ]), revealed || settled || expired;
+}
+
+function documentRefsOf(instance) {
+    const seen = /* @__PURE__ */ new Map;
+    for (const ref of entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
+    return [ ...seen.values() ];
+}
+
+function byTitleThenName(a, b) {
+    return a.title.localeCompare(b.title) || a.name.localeCompare(b.name);
+}
+
+function byResolvedTitle(titleOf, keyOf) {
+    return (a, b) => {
+        const aTitle = titleOf(a), bTitle = titleOf(b);
+        return aTitle !== void 0 && bTitle !== void 0 ? aTitle.localeCompare(bTitle) || keyOf(a).localeCompare(keyOf(b)) : aTitle !== void 0 ? -1 : bTitle !== void 0 ? 1 : keyOf(a).localeCompare(keyOf(b));
+    };
+}
+
+const BOARD_EMPTY_STAGE_NOTE = "No items";
+
+function faceOf(instance) {
+    const document = documentRefsOf(instance)[0];
+    return document ? {
+        kind: "document",
+        document: document
+    } : {
+        kind: "instance",
+        title: instanceTitle(instance, definitionSnapshotOf(instance))
+    };
+}
+
+function boardRuns(instances) {
+    return instances.filter(instance => terminalState(instance) !== "aborted");
+}
+
+function groupsOf(args) {
+    const declared = args.definition.stages.map(stage => stage.name), retired = [ ...args.byStage.keys() ].filter(stage => !declared.includes(stage)).sort();
+    return [ ...declared, ...retired ].map(stage => ({
+        stage: stage,
+        title: stageTitle(args.definition, stage),
+        cards: args.byStage.get(stage) ?? [],
+        retired: !declared.includes(stage)
+    }));
+}
+
+function deriveBoard(args) {
+    const byStage = /* @__PURE__ */ new Map;
+    for (const instance of boardRuns(args.instances)) {
+        const card = {
+            instanceId: instance._id,
+            face: faceOf(instance)
+        }, held = byStage.get(instance.currentStage);
+        held ? held.push(card) : byStage.set(instance.currentStage, [ card ]);
+    }
+    return {
+        groups: groupsOf({
+            definition: args.definition,
+            byStage: byStage
         })
-    }) : entry ? /* @__PURE__ */ jsx(InstanceDetailPanel, {
-        entry: entry,
-        onBack: onBack
-    }) : /* @__PURE__ */ jsx(Box, {
-        padding: 4,
-        children: graceOver ? /* @__PURE__ */ jsx(NotFound, {
-            id: instanceId,
-            onBack: onBack
-        }) : /* @__PURE__ */ jsx(LoadingRow, {
-            label: "Loading workflow…"
+    };
+}
+
+function orderBoardByPreviewTitle(board, titles) {
+    const compare = byResolvedTitle(card => card.face.kind === "instance" ? card.face.title : titles.get(card.face.document.id), card => card.instanceId);
+    return {
+        groups: board.groups.map(group => ({
+            ...group,
+            cards: [ ...group.cards ].sort(compare)
+        }))
+    };
+}
+
+function boardDocuments(board) {
+    return board.groups.flatMap(group => group.cards.flatMap(card => card.face.kind === "document" ? [ card.face.document ] : []));
+}
+
+function BoardCard({card: card, size: size}) {
+    return size === "slim" ? card.face.kind === "instance" ? /* @__PURE__ */ jsx(InstanceFace, {
+        size: size,
+        title: card.face.title
+    }) : /* @__PURE__ */ jsx(DocPreviewLink, {
+        gdr: card.face.document,
+        layout: "row",
+        source: "board-card"
+    }) : /* @__PURE__ */ jsx(Card, {
+        border: !0,
+        radius: 3,
+        children: card.face.kind === "instance" ? /* @__PURE__ */ jsx(InstanceFace, {
+            size: size,
+            title: card.face.title
+        }) : /* @__PURE__ */ jsx(DocPreviewLink, {
+            gdr: card.face.document,
+            layout: "bare",
+            source: "board-card"
         })
     });
 }
 
-function NotFound({id: id, onBack: onBack}) {
+function InstanceFace({size: size, title: title}) {
+    const fill = size === "slim";
     /* @__PURE__ */
-    return jsxs(Stack, {
-        gap: 4,
-        children: [ 
-        /* @__PURE__ */ jsxs(Text, {
-            muted: !0,
+    return jsx(Box, {
+        padding: fill ? chipPadding(!0) : NOTICE_PADDING,
+        style: fill ? {
+            width: "100%"
+        } : {},
+        children: /* @__PURE__ */ jsx(Text, {
             size: 1,
-            children: [ "No workflow with id “", id, "” — it may have been deleted." ]
+            textOverflow: "ellipsis",
+            weight: "medium",
+            children: title
+        })
+    });
+}
+
+function StageGroupHeading({group: group}) {
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(CountedLabel, {
+            count: group.cards.length,
+            label: /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "medium",
+                children: group.title
+            })
+        }), group.retired ? 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "No longer in this workflow"
+        }) : null ]
+    });
+}
+
+const COLUMN_WIDTH = 320, PANEL_FADE = "linear-gradient(to bottom, rgb(0 0 0) 50%, rgb(0 0 0 / 0) 75%)";
+
+function StageColumn({group: group}) {
+    /* @__PURE__ */
+    return jsxs(Box, {
+        flex: "none",
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+            width: COLUMN_WIDTH
+        },
+        children: [ 
+        /* @__PURE__ */ jsx(Card, {
+            "aria-hidden": !0,
+            radius: 3,
+            style: {
+                inset: 0,
+                maskImage: PANEL_FADE,
+                position: "absolute",
+                WebkitMaskImage: PANEL_FADE
+            },
+            tone: "transparent"
+        }), 
+        /* @__PURE__ */ jsx(Box, {
+            flex: "none",
+            paddingX: 3,
+            paddingY: 4,
+            style: {
+                position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(StageGroupHeading, {
+                group: group
+            })
+        }), group.cards.length === 0 ? 
+        /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            flex: 1,
+            justify: "center",
+            padding: 2,
+            style: {
+                position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: BOARD_EMPTY_STAGE_NOTE
+            })
+        }) : 
+        /* @__PURE__ */ jsx(Box, {
+            flex: 1,
+            overflow: "auto",
+            paddingBottom: 2,
+            paddingX: 2,
+            style: {
+                minHeight: 0,
+                position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(Stack, {
+                gap: 1,
+                children: group.cards.map(card => /* @__PURE__ */ jsx(BoardCard, {
+                    card: card,
+                    size: "block"
+                }, card.instanceId))
+            })
+        }) ]
+    });
+}
+
+function StageGroups({board: board}) {
+    const topGap = useSpaceToken(TOOL_PANEL_PADDING);
+    /* @__PURE__ */
+    return jsx(Box, {
+        flex: 1,
+        style: {
+            minHeight: 0,
+            position: "relative"
+        },
+        children: /* @__PURE__ */ jsx(Box, {
+            style: {
+                bottom: 0,
+                left: 0,
+                overflowX: "auto",
+                overflowY: "hidden",
+                position: "absolute",
+                right: 0,
+                top: topGap
+            },
+            children: /* @__PURE__ */ jsx(Flex, {
+                align: "stretch",
+                gap: 2,
+                paddingX: TOOL_PANEL_PADDING,
+                style: {
+                    boxSizing: "border-box",
+                    height: "100%",
+                    width: "max-content"
+                },
+                children: board.groups.map(group => /* @__PURE__ */ jsx(StageColumn, {
+                    group: group
+                }, group.stage))
+            })
+        })
+    });
+}
+
+function isPlainClick(event) {
+    return !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+}
+
+const BOARD_LAYOUTS = [ "columns", "stack" ], BOARD_DEFAULT_LAYOUT = "columns";
+
+function boardLayoutStorageKey(scope) {
+    return `sanity.workflows.tool.board-layout:${scope}`;
+}
+
+function layoutOf(raw) {
+    return BOARD_LAYOUTS.find(layout => layout === raw) ?? BOARD_DEFAULT_LAYOUT;
+}
+
+function createBoardLayoutStore(args) {
+    const storage = args.storage ?? defaultStorage();
+    return {
+        read: () => layoutOf(readItem(storage, args.storageKey).raw),
+        set(layout) {
+            return writeItem({
+                storage: storage,
+                key: args.storageKey,
+                value: layout
+            }), layout;
+        }
+    };
+}
+
+const PICKER_RADIUS = 3;
+
+function pickerLabel(face) {
+    return face.kind === "named" ? face.title : face.kind === "loading" ? "Loading" : "Select a workflow";
+}
+
+function WorkflowPicker({face: face, onSelect: onSelect, options: options}) {
+    const empty = options.length === 0, innerRadius = useRadiusToken(PICKER_RADIUS) - 1;
+    /* @__PURE__ */
+    return jsx(Card, {
+        border: !0,
+        radius: PICKER_RADIUS,
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                paddingLeft: 2,
+                paddingRight: 2,
+                children: /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: "Workflow"
+                })
+            }), 
+            /* @__PURE__ */ jsx(MenuButton, {
+                button: /* @__PURE__ */ jsx(Button, {
+                    fontSize: 1,
+                    gap: 2,
+                    iconRight: ChevronDownIcon,
+                    mode: "bleed",
+                    disabled: empty,
+                    padding: 2,
+                    radius: 0,
+                    style: {
+                        borderRadius: `0 ${innerRadius}px ${innerRadius}px 0`
+                    },
+                    text: pickerLabel(face)
+                }),
+                id: "workflows-board-picker",
+                menu: /* @__PURE__ */ jsx(Menu, {
+                    children: options.map(option => /* @__PURE__ */ jsx(MenuItem, {
+                        fontSize: 1,
+                        onClick: () => onSelect(option.name),
+                        pressed: face.kind === "named" && option.name === face.name,
+                        text: option.title
+                    }, option.name))
+                }),
+                popover: {
+                    constrainSize: !0,
+                    fallbackPlacements: [ "top-start" ],
+                    placement: "bottom-start",
+                    portal: !0
+                }
+            }) ]
+        })
+    });
+}
+
+const LAYOUT_LABELS = {
+    columns: {
+        icon: InlineIcon,
+        label: "Show as boards"
+    },
+    stack: {
+        icon: StackCompactIcon,
+        label: "Show as list"
+    }
+};
+
+function LayoutToggle({layout: layout, onChange: onChange}) {
+    /* @__PURE__ */
+    return jsx(Flex, {
+        align: "center",
+        gap: 1,
+        children: BOARD_LAYOUTS.map(value => {
+            const {icon: icon, label: label} = LAYOUT_LABELS[value];
+            /* @__PURE__ */
+            return jsx(HoverHint, {
+                text: label,
+                children: /* @__PURE__ */ jsx(Button, {
+                    "aria-label": label,
+                    "aria-pressed": value === layout,
+                    fontSize: 1,
+                    icon: icon,
+                    mode: "bleed",
+                    onClick: () => onChange(value),
+                    padding: 2,
+                    selected: value === layout
+                })
+            }, value);
+        })
+    });
+}
+
+function DefinitionLink({name: name, onOpen: onOpen}) {
+    const {resolvePathFromState: resolvePathFromState} = useRouter();
+    /* @__PURE__ */
+    return jsx(Button, {
+        as: "a",
+        fontSize: 1,
+        href: resolvePathFromState({
+            definitionName: name
+        }),
+        mode: "bleed",
+        onClick: event => {
+            isPlainClick(event) && (event.preventDefault(), onOpen(name));
+        },
+        padding: 2,
+        text: "View definition"
+    });
+}
+
+function BoardControlsPortal({definitionName: definitionName, layout: layout, onChangeLayout: onChangeLayout, face: face, onOpenDefinition: onOpenDefinition, onSelectWorkflow: onSelectWorkflow, options: options, slot: slot}) {
+    return slot ? createPortal(
+    /* @__PURE__ */ jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(WorkflowPicker, {
+            face: face,
+            onSelect: onSelectWorkflow,
+            options: options
+        }), definitionName === void 0 ? null : /* @__PURE__ */ jsx(DefinitionLink, {
+            name: definitionName,
+            onOpen: onOpenDefinition
+        }), 
+        /* @__PURE__ */ jsx(Box, {
+            flex: 1
+        }), 
+        /* @__PURE__ */ jsx(LayoutToggle, {
+            layout: layout,
+            onChange: onChangeLayout
+        }) ]
+    }), slot) : null;
+}
+
+function boardWorkflowOptions(definitions) {
+    return definitions.map(definition => ({
+        name: definition.name,
+        title: definition.title
+    })).sort(byTitleThenName);
+}
+
+function boardLandingName(selection) {
+    if (!(selection.kind !== "resolved" || selection.via !== "default")) return selection.definition.name;
+}
+
+function boardPickerFace(args) {
+    const {selection: selection, routeName: routeName} = args;
+    if (selection.kind === "resolved") {
+        const {name: name, title: title} = selection.definition;
+        return {
+            kind: "named",
+            name: name,
+            title: title
+        };
+    }
+    return selection.kind === "loading" && routeName !== void 0 ? {
+        kind: "loading"
+    } : {
+        kind: "none"
+    };
+}
+
+function boardSelectedPayload(selection) {
+    if (selection.kind === "resolved") return {
+        via: selection.via,
+        ...definitionFingerprint(selection.definition)
+    };
+}
+
+function resolveBoardSelection(args) {
+    const {definitions: definitions, routeName: routeName} = args;
+    if (definitions === void 0) return {
+        kind: "loading"
+    };
+    if (routeName !== void 0) {
+        const named = definitions.find(definition => definition.name === routeName);
+        return named ? {
+            kind: "resolved",
+            definition: named,
+            via: "address"
+        } : {
+            kind: "unknown",
+            name: routeName
+        };
+    }
+    const [landing] = [ ...definitions ].sort(byTitleThenName);
+    return landing ? {
+        kind: "resolved",
+        definition: landing,
+        via: "default"
+    } : {
+        kind: "empty"
+    };
+}
+
+function StageBand({bands: bands, group: group}) {
+    const {open: open, toggle: toggle} = useBandOpen(bands, group.stage);
+    /* @__PURE__ */
+    return jsx(CollapsibleBand, {
+        background: !0,
+        onToggle: toggle,
+        open: open,
+        sticky: !0,
+        title: group.title,
+        header: /* @__PURE__ */ jsx(StageGroupHeading, {
+            group: group
+        }),
+        children: /* @__PURE__ */ jsx(Stack, {
+            gap: 1,
+            paddingLeft: 5,
+            children: group.cards.length === 0 ? 
+            /* @__PURE__ */ jsx(Box, {
+                padding: 3,
+                children: /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: BOARD_EMPTY_STAGE_NOTE
+                })
+            }) : group.cards.map(card => /* @__PURE__ */ jsx(BoardCard, {
+                card: card,
+                size: "slim"
+            }, card.instanceId))
+        })
+    });
+}
+
+function BoardStack({bands: bands, board: board}) {
+    /* @__PURE__ */
+    return jsx(Stack, {
+        gap: 1,
+        paddingBottom: 4,
+        paddingTop: 3,
+        paddingX: TOOL_PANEL_PADDING,
+        children: board.groups.map(group => /* @__PURE__ */ jsx(StageBand, {
+            bands: bands,
+            group: group
+        }, group.stage))
+    });
+}
+
+const ALIAS_PREFIX = "__seed_", MAX_PATH_DEPTH = 3, IDENTIFIER = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+function previewSelectOf(schemaType) {
+    const select = schemaType.preview?.select;
+    if (!(select === void 0 || Object.keys(select).length === 0)) return select;
+}
+
+function fieldTypeOf(parent, name) {
+    if (!(!("fields" in parent) || !Array.isArray(parent.fields))) return parent.fields.find(field => field.name === name)?.type;
+}
+
+function stepOf(args) {
+    const {parent: parent, segment: segment, terminal: terminal} = args, fieldType = fieldTypeOf(parent, segment);
+    if (fieldType !== void 0) {
+        if (terminal) return {
+            part: segment,
+            next: fieldType
+        };
+        if (isReferenceSchemaType(fieldType)) {
+            const target = fieldType.to.length === 1 ? fieldType.to[0] : void 0;
+            return target === void 0 ? void 0 : {
+                part: `${segment}->`,
+                next: target
+            };
+        }
+        return {
+            part: `${segment}.`,
+            next: fieldType
+        };
+    }
+}
+
+function compilePath(root, path) {
+    const segments = path.split(".");
+    if (segments.length > MAX_PATH_DEPTH || segments.some(s => !IDENTIFIER.test(s))) return;
+    let parent = root;
+    const parts = [];
+    for (const [index, segment] of segments.entries()) {
+        const step = stepOf({
+            parent: parent,
+            segment: segment,
+            terminal: index === segments.length - 1
+        });
+        if (step === void 0) return;
+        parts.push(step.part), parent = step.next;
+    }
+    return parts.join("");
+}
+
+function selectArmOf(schemaType) {
+    const select = previewSelectOf(schemaType);
+    if (select === void 0) return;
+    const entries = [];
+    for (const [key, path] of Object.entries(select)) {
+        const compiled = compilePath(schemaType, path);
+        if (compiled === void 0) return;
+        entries.push(`${JSON.stringify(ALIAS_PREFIX + key)}: ${compiled}`);
+    }
+    return `_type == ${JSON.stringify(schemaType.name)} => {${entries.join(", ")}}`;
+}
+
+function planTitleSeed(types) {
+    const seedable = /* @__PURE__ */ new Map, arms = [];
+    for (const type of types) {
+        const arm = selectArmOf(type);
+        arm !== void 0 && (seedable.set(type.name, type), arms.push(arm));
+    }
+    return {
+        query: `*[_id in $ids]{_id, _type${arms.length > 0 ? `, ...select(${arms.join(", ")})` : ""}}`,
+        seedable: seedable
+    };
+}
+
+function isSeedRow(value) {
+    if (typeof value != "object" || value === null) return !1;
+    const row = value;
+    return typeof row._id == "string" && typeof row._type == "string";
+}
+
+function seededTitleOf(row, schemaType) {
+    const select = previewSelectOf(schemaType);
+    if (select === void 0) return;
+    const selected = {};
+    for (const key of Object.keys(select)) selected[key] = row[ALIAS_PREFIX + key];
+    const prepare = schemaType.preview?.prepare;
+    let title;
+    if (prepare === void 0) title = selected.title; else try {
+        title = prepare(selected).title;
+    } catch (err) {
+        console.error(`[workflow-studio-plugin] preview prepare for "${schemaType.name}" failed on seed:`, err);
+        return;
+    }
+    return typeof title == "string" ? title : void 0;
+}
+
+function seedFromRows(args) {
+    const rows = args.rows.filter(isSeedRow), byBareId = new Map(rows.map(row => [ row._id, row ])), types = new Map(rows.map(row => [ row._id, row._type ])), titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set;
+    for (const {gdrId: gdrId, bareId: bareId} of args.docs) {
+        const row = byBareId.get(bareId);
+        if (row === void 0) continue;
+        const schemaType = args.seedable.get(row._type);
+        if (schemaType === void 0) continue;
+        resolved.add(gdrId);
+        const title = seededTitleOf(row, schemaType);
+        title !== void 0 && titles.set(gdrId, title);
+    }
+    return {
+        types: types,
+        titles: {
+            titles: titles,
+            resolved: resolved
+        }
+    };
+}
+
+function titleDrift(seed, live) {
+    const drifted = [];
+    for (const gdrId of seed.resolved) {
+        if (!live.resolved.has(gdrId)) continue;
+        const seeded = seed.titles.get(gdrId), observed = live.titles.get(gdrId);
+        seeded !== observed && drifted.push({
+            gdrId: gdrId,
+            seeded: seeded,
+            observed: observed
+        });
+    }
+    return drifted;
+}
+
+function mergeSeededTitles(live, seed) {
+    if (seed.resolved.size === 0) return live;
+    const titles = new Map(live.titles), resolved = new Set(live.resolved);
+    for (const gdrId of seed.resolved) {
+        if (live.resolved.has(gdrId)) continue;
+        resolved.add(gdrId);
+        const title = seed.titles.get(gdrId);
+        title !== void 0 && titles.set(gdrId, title);
+    }
+    return {
+        titles: titles,
+        resolved: resolved
+    };
+}
+
+const NO_TITLES = {
+    titles: /* @__PURE__ */ new Map,
+    resolved: /* @__PURE__ */ new Set
+};
+
+function useDocPreviewTitles(documents) {
+    const previewStore = useDocumentPreviewStore(), schema = useSchema(), {perspectiveStack: perspectiveStack} = usePerspective(), {actualTypes: actualTypes, binding: binding} = useWorkflowContext(), [state, setState] = useState(NO_TITLES), key = documents.map(doc => doc.id).join("|");
+    return 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} = 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 = 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 usePreviewSeed(documents) {
+    const client = useClient({
+        apiVersion: WORKFLOW_API_VERSION
+    }), schema = useSchema(), {perspectiveStack: perspectiveStack} = usePerspective(), {actualTypes: actualTypes, binding: binding} = useWorkflowContext(), [seed, setSeed] = useState(NO_TITLES), docs = useMemo(() => documents.flatMap(doc => {
+        const {parsed: parsed, local: local} = gdrLocality(doc.id, binding.contentResource);
+        return parsed === void 0 || !local ? [] : [ {
+            gdrId: doc.id,
+            bareId: parsed.documentId
+        } ];
+    }), [ documents, binding.contentResource ]), key = docs.map(doc => doc.gdrId).join("|");
+    return useEffect(() => {
+        if (setSeed(NO_TITLES), key === "") return;
+        const plan = planTitleSeed(schema.getTypeNames().flatMap(name => openableSchemaType(schema, name) ?? []));
+        let cancelled = !1;
+        return client.fetch(plan.query, {
+            ids: docs.map(doc => doc.bareId)
+        }, {
+            tag: "workflows.preview-seed",
+            ...perspectiveStack.length > 0 ? {
+                perspective: [ ...perspectiveStack ]
+            } : {}
+        }).then(rows => {
+            if (cancelled) return;
+            const result = seedFromRows({
+                rows: rows,
+                docs: docs,
+                seedable: plan.seedable
+            });
+            actualTypes.seed(result.types), setSeed(result.titles);
+        }).catch(err => {
+            cancelled || console.error("[workflow-studio-plugin] preview seed failed:", err);
+        }), () => {
+            cancelled = !0;
+        };
+    }, [ key, client, schema, actualTypes, binding.contentResource.id, perspectiveStack.join("|") ]), 
+    seed;
+}
+
+function useSeededTitles(args) {
+    const {ordering: ordering, warm: warm} = args, seed = usePreviewSeed(warm), live = useDocPreviewTitles(ordering), telemetry = useWorkflowTelemetry(), warned = useRef(/* @__PURE__ */ new Set);
+    return useEffect(() => {
+        const fresh = titleDrift(seed, live).filter(drift => !warned.current.has(drift.gdrId));
+        if (fresh.length !== 0) {
+            warned.current.size === 0 && telemetry.log(WorkflowTitleSeedDrifted, {
+                driftCount: fresh.length
+            });
+            for (const drift of fresh) warned.current.add(drift.gdrId), console.warn(`[workflow-studio-plugin] seeded preview title for "${drift.gdrId}" diverged from the live pipeline — the seed projection or prepare mirroring is drifting from Studio preview resolution`);
+        }
+    }, [ seed, live, telemetry ]), useMemo(() => {
+        const merged = mergeSeededTitles(live, seed);
+        return {
+            ...merged,
+            ready: ordering.every(doc => merged.resolved.has(doc.id))
+        };
+    }, [ ordering, live, seed ]);
+}
+
+function useGroupTitles(groups) {
+    const ordering = useMemo(() => groups.withDocuments.map(group => group.document), [ groups ]), warm = useMemo(() => groups.withDocuments.flatMap(group => group.documents), [ groups ]);
+    return useSeededTitles({
+        ordering: ordering,
+        warm: warm
+    });
+}
+
+const NO_DOCUMENTS = [];
+
+function useBoard(args) {
+    const {definition: definition, instances: instances} = args, derived = useMemo(() => definition ? deriveBoard({
+        instances: instances,
+        definition: definition
+    }) : void 0, [ definition, instances ]), documents = useMemo(() => derived ? boardDocuments(derived) : NO_DOCUMENTS, [ derived ]), {titles: titles, ready: ready} = useSeededTitles({
+        ordering: documents,
+        warm: documents
+    }), board = useMemo(() => derived ? orderBoardByPreviewTitle(derived, titles) : void 0, [ derived, titles ]);
+    return useMemo(() => ({
+        board: board,
+        ready: ready
+    }), [ board, ready ]);
+}
+
+const INSTANCE_CAP = 200;
+
+function useCappedInstances(filter) {
+    const {engine: engine} = useWorkflowContext(), capped = useMemo(() => ({
+        ...filter,
+        limit: INSTANCE_CAP
+    }), [ filter ]), {instances: instances, loading: loading, unreadable: unreadable} = useWorkflowInstances({
+        engine: engine,
+        filter: capped
+    });
+    return useMemo(() => {
+        const rows = instances ?? [];
+        return {
+            rows: rows,
+            truncated: rows.length + unreadable.length === INSTANCE_CAP,
+            loading: loading,
+            unreadable: unreadable
+        };
+    }, [ instances, loading, unreadable ]);
+}
+
+const BOARD_CAP_NOTE = `Showing the latest ${INSTANCE_CAP} workflows — older ones aren’t on the board.`, NOTHING = {
+    ids: []
+};
+
+function useBoardInstances(definitionName) {
+    const filter = useMemo(() => definitionName === void 0 ? NOTHING : {
+        definition: definitionName,
+        includeCompleted: !0
+    }, [ definitionName ]);
+    return useCappedInstances(filter);
+}
+
+function useBoardLayout(scope) {
+    const store = useMemo(() => createBoardLayoutStore({
+        storageKey: boardLayoutStorageKey(scope)
+    }), [ scope ]), [held, setHeld] = useState(() => ({
+        store: store,
+        layout: store.read()
+    }));
+    return held.store !== store && setHeld({
+        store: store,
+        layout: store.read()
+    }), {
+        layout: held.layout,
+        setLayout: layout => setHeld({
+            store: store,
+            layout: store.set(layout)
+        })
+    };
+}
+
+function DocumentsTab({filterSlot: filterSlot, onOpenDefinition: onOpenDefinition, onSelectWorkflow: onSelectWorkflow, routeDefinition: routeDefinition}) {
+    const {binding: binding} = useWorkflowContext(), telemetry = useWorkflowTelemetry(), {definitions: definitions, error: error} = useDeployedDefinitions(), {layout: layout, setLayout: setLayout} = useBoardLayout(binding.engineResource.id), bands = useBandOpenState({
+        segment: "documents",
+        scope: binding.engineResource.id
+    }), selection = resolveBoardSelection({
+        definitions: definitions,
+        routeName: routeDefinition
+    }), selected = selection.kind === "resolved" ? selection.definition : void 0, instances = useBoardInstances(selected?.name), {board: board, ready: ready} = useBoard({
+        definition: selected,
+        instances: instances.rows
+    }), revealed = useRevealGate({
+        loading: instances.loading,
+        ready: ready
+    }), landing = boardLandingName(selection);
+    useEffect(() => {
+        landing !== void 0 && onSelectWorkflow(landing, {
+            replace: !0
+        });
+    }, [ landing, onSelectWorkflow ]);
+    const selectedPayload = boardSelectedPayload(selection);
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        direction: "column",
+        flex: 1,
+        style: {
+            minHeight: 0
+        },
+        children: [ 
+        /* @__PURE__ */ jsx(BoardControlsPortal, {
+            definitionName: selected?.name,
+            layout: layout,
+            onOpenDefinition: onOpenDefinition,
+            onChangeLayout: next => {
+                next !== layout && (telemetry.log(WorkflowBoardLayoutChanged, {
+                    layout: next
+                }), setLayout(next));
+            },
+            onSelectWorkflow: onSelectWorkflow,
+            options: boardWorkflowOptions(definitions ?? []),
+            face: boardPickerFace({
+                selection: selection,
+                routeName: routeDefinition
+            }),
+            slot: filterSlot
+        }), 
+        /* @__PURE__ */ jsxs(Flex, {
+            direction: "column",
+            flex: 1,
+            gap: 2,
+            style: {
+                minHeight: 0
+            },
+            children: [ instances.unreadable.length === 0 ? null : /* @__PURE__ */ jsx(Box, {
+                paddingX: TOOL_PANEL_PADDING,
+                children: /* @__PURE__ */ jsx(UnreadableDocsNote, {
+                    unreadable: instances.unreadable
+                })
+            }), 
+            /* @__PURE__ */ jsx(BoardBody, {
+                bands: bands,
+                board: board,
+                error: error,
+                layout: layout,
+                loading: !revealed,
+                selection: selection
+            }), instances.truncated ? /* @__PURE__ */ jsx(Box, {
+                paddingX: TOOL_PANEL_PADDING,
+                children: /* @__PURE__ */ jsx(MutedNote, {
+                    text: BOARD_CAP_NOTE
+                })
+            }) : null ]
+        }), selectedPayload === void 0 ? null : 
+        /* @__PURE__ */ jsx(LogEventOnMount, {
+            data: selectedPayload,
+            event: WorkflowBoardWorkflowSelected
+        }, selected?.name) ]
+    });
+}
+
+function BoardBody({bands: bands, board: board, error: error, layout: layout, loading: loading, selection: selection}) {
+    return error !== void 0 ? /* @__PURE__ */ jsx(StatusBox, {
+        children: /* @__PURE__ */ jsx(MutedNote, {
+            text: `Could not load the deployed workflows: ${error}`
+        })
+    }) : selection.kind === "loading" ? /* @__PURE__ */ jsx(StatusBox, {
+        children: /* @__PURE__ */ jsx(TabStatusRow, {
+            children: /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Loading workflows…"
+            })
+        })
+    }) : selection.kind === "empty" ? /* @__PURE__ */ jsx(StatusBox, {
+        children: /* @__PURE__ */ jsx(EmptyState, {
+            description: "Deploy a workflow to see its documents here",
+            icon: /* @__PURE__ */ jsx(SearchIcon, {}),
+            title: "No workflows deployed"
+        })
+    }) : selection.kind === "unknown" ? /* @__PURE__ */ jsx(StatusBox, {
+        children: /* @__PURE__ */ jsx(EmptyState, {
+            description: `No deployed workflow is named “${selection.name}” — pick one above`,
+            icon: /* @__PURE__ */ jsx(SearchIcon, {}),
+            title: "Workflow not found"
+        })
+    }) : loading || board === void 0 ? /* @__PURE__ */ jsx(StatusBox, {
+        children: /* @__PURE__ */ jsx(TabStatusRow, {
+            children: /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Loading documents…"
+            })
+        })
+    }) : layout === "stack" ? /* @__PURE__ */ jsx(BoardStack, {
+        bands: bands,
+        board: board
+    }) : /* @__PURE__ */ jsx(StageGroups, {
+        board: board
+    });
+}
+
+function StatusBox({children: children}) {
+    /* @__PURE__ */
+    return jsx(Flex, {
+        direction: "column",
+        flex: 1,
+        paddingX: TOOL_PANEL_PADDING,
+        children: children
+    });
+}
+
+function definitionCatalog(args) {
+    const rejected = [ ...args.issues.values() ];
+    return args.definitions.map(definition => ({
+        name: definition.name,
+        title: definition.title ?? definition.name,
+        description: definition.description,
+        activeCount: args.inFlight.filter(instance => instance.definition === definition.name).length,
+        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,
+            detail: mappingIssueDetail(issue)
+        })).sort((a, b) => a.docType.localeCompare(b.docType))
+    })).sort(byTitleThenName);
+}
+
+function undeployedWorkflowNotices(args) {
+    return [ ...args.issues.values() ].filter(namesNoDeployedDefinition).sort((a, b) => a.definition.localeCompare(b.definition) || a.docType.localeCompare(b.docType)).map(issue => `“${issue.definition}” is set up to run on ${args.titleOf(issue.docType) ?? issue.docType} documents, but no deployed workflow has that name`);
+}
+
+function docTypeLabels(docTypes, titleOf) {
+    return docTypes.map(name => ({
+        name: name,
+        title: titleOf(name) ?? name
+    })).sort(byTitleThenName);
+}
+
+function startPhrase(definition) {
+    if (definition.lifecycle === "child") return "Started by a parent workflow";
+    if (startKindOf(definition) === "autonomous") return "Starts automatically";
+    const subject = (definition.fields ?? []).find(isSubjectEntry);
+    return subject !== void 0 && isInputSourced(subject) ? "Started manually, from a document" : "Started manually";
+}
+
+function deployedAtOf(definition) {
+    return typeof definition._updatedAt == "string" ? definition._updatedAt : void 0;
+}
+
+function deployedPhrase(definition) {
+    const deployedAt = deployedAtOf(definition);
+    if (deployedAt === void 0) return `v${definition.version}`;
+    const ago = formatTimeAgo(deployedAt);
+    return ago === "" ? formatShortDateTime(deployedAt) : `${formatShortDateTime(deployedAt)} (${ago})`;
+}
+
+function DetailNotFound({back: back, message: message}) {
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 4,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: message
+        }), 
+        /* @__PURE__ */ jsx(Flex, {
+            children: /* @__PURE__ */ jsx(Button, {
+                fontSize: 1,
+                gap: 2,
+                icon: ArrowLeftIcon,
+                mode: "ghost",
+                onClick: back.go,
+                padding: 2,
+                text: back.label
+            })
+        }) ]
+    });
+}
+
+function DetailTitle({busy: busy = !1, documentGdr: documentGdr, title: title}) {
+    const chipPullback = -useSpaceToken(1);
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        paddingLeft: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(Box, {
+            style: {
+                minWidth: 0
+            },
+            children: /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                textOverflow: "ellipsis",
+                weight: "semibold",
+                children: title
+            })
+        }), documentGdr === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: "in"
+            }), 
+            /* @__PURE__ */ jsx(Flex, {
+                align: "center",
+                flex: "none",
+                style: {
+                    height: 0,
+                    marginLeft: chipPullback
+                },
+                children: /* @__PURE__ */ jsx(DocPreviewLink, {
+                    gdr: documentGdr,
+                    layout: "inline",
+                    source: "detail-title"
+                })
+            }) ]
+        }), 
+        /* @__PURE__ */ jsx(SpinnerSlot, {
+            busy: busy
+        }) ]
+    });
+}
+
+const INSTANCE_CAP_COUNT_NOTE = `Counts from the latest ${INSTANCE_CAP} workflows — older ones aren’t counted.`, NEWEST_INSTANCES = {
+    includeCompleted: !0
+};
+
+function useToolInstances() {
+    const {rows: rows, truncated: truncated, loading: loading, unreadable: unreadable} = useCappedInstances(NEWEST_INSTANCES);
+    return useMemo(() => ({
+        inFlight: rows.filter(instance => terminalState(instance) === "in-flight"),
+        settled: rows.filter(instance => terminalState(instance) !== "in-flight"),
+        truncated: truncated,
+        loading: loading,
+        unreadable: unreadable
+    }), [ rows, truncated, loading, unreadable ]);
+}
+
+function DefinitionDetail({definitionName: definitionName, backToList: backToList}) {
+    const {definitions: definitions, error: error} = useDeployedDefinitions(), definition = definitions?.find(row => row.name === definitionName), loading = definitions === void 0 && error === void 0, viewed = loading || error !== void 0 ? null : /* @__PURE__ */ jsx(LogEventOnMount, {
+        data: {
+            found: definition !== void 0,
+            ...definitionFingerprint(definition)
+        },
+        event: WorkflowDefinitionDetailViewed
+    });
+    return !loading && error === void 0 && definition === void 0 ? /* @__PURE__ */ jsxs(Box, {
+        paddingX: 3,
+        children: [ viewed, 
+        /* @__PURE__ */ jsx(TabStatusRow, {
+            children: /* @__PURE__ */ jsx(DetailNotFound, {
+                back: backToList,
+                message: /* @__PURE__ */ jsxs(Fragment, {
+                    children: [ "Unable to find a definition with name “", 
+                    /* @__PURE__ */ jsx("strong", {
+                        children: definitionName
+                    }), "”." ]
+                })
+            })
+        }) ]
+    }) : /* @__PURE__ */ jsxs(Flex, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        children: [ viewed, 
+        /* @__PURE__ */ jsx(Box, {
+            flex: "none",
+            paddingBottom: 2,
+            paddingTop: 3,
+            paddingX: 3,
+            children: loading ? /* @__PURE__ */ jsx(Box, {
+                paddingLeft: 2,
+                children: /* @__PURE__ */ jsx(LoadingRow, {
+                    label: "Loading definition…"
+                })
+            }) : /* @__PURE__ */ jsx(DetailTitle, {
+                title: definition?.title ?? definitionName
+            })
+        }), 
+        /* @__PURE__ */ jsx(Box, {
+            flex: 1,
+            overflow: "auto",
+            paddingX: 3,
+            children: /* @__PURE__ */ jsx(Flex, {
+                direction: "column",
+                paddingBottom: 5,
+                paddingLeft: 2,
+                paddingTop: 4,
+                style: {
+                    boxSizing: "border-box",
+                    minHeight: "100%"
+                },
+                children: /* @__PURE__ */ jsx(DefinitionBody, {
+                    definition: definition,
+                    error: error
+                })
+            })
+        }) ]
+    });
+}
+
+function DefinitionBody({definition: definition, error: error}) {
+    return error !== void 0 ? /* @__PURE__ */ jsx(MutedNote, {
+        text: `Could not load the deployed workflows: ${error}`
+    }) : definition === void 0 ? null : /* @__PURE__ */ jsx(DefinitionFacts, {
+        definition: definition
+    });
+}
+
+function SetupIssues({bindings: bindings}) {
+    const schema = useSchema();
+    return bindings.length === 0 ? null : /* @__PURE__ */ jsx(Card, {
+        padding: 3,
+        radius: 3,
+        tone: "caution",
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "flex-start",
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+            }), 
+            /* @__PURE__ */ jsxs(Stack, {
+                flex: 1,
+                gap: 3,
+                children: [ 
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    weight: "semibold",
+                    children: "Setup issue"
+                }), bindings.map(binding => /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    children: `${schema.get(binding.docType)?.title ?? binding.docType}: ${binding.detail}.`
+                }, binding.docType)), 
+                /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: "Editors see this workflow disabled on these document types until a developer fixes it."
+                }) ]
+            }) ]
+        })
+    });
+}
+
+function DefinitionFacts({definition: definition}) {
+    const {mappingIssues: mappingIssues, mappings: mappings} = useWorkflowContext(), schema = useSchema(), instances = useToolInstances(), snapshotWidth = useContainerToken(2), [row] = definitionCatalog({
+        definitions: [ definition ],
+        mappings: mappings,
+        inFlight: instances.inFlight,
+        issues: mappingIssues
+    }), runsOn = docTypeLabels(row?.docTypes ?? [], name => schema.get(name)?.title).map(docType => docType.title);
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        direction: "column",
+        flex: 1,
+        gap: 4,
+        children: [ row === void 0 || row.brokenBindings.length === 0 ? null : /* @__PURE__ */ jsx(Box, {
+            flex: "none",
+            children: /* @__PURE__ */ jsx(SetupIssues, {
+                bindings: row.brokenBindings
+            })
+        }), 
+        /* @__PURE__ */ jsx(Box, {
+            flex: "none",
+            style: {
+                maxWidth: snapshotWidth
+            },
+            children: /* @__PURE__ */ jsxs(Stack, {
+                gap: 4,
+                children: [ 
+                /* @__PURE__ */ jsx(MetaRow, {
+                    label: "Deployed",
+                    children: /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        children: deployedPhrase(definition)
+                    })
+                }), 
+                /* @__PURE__ */ jsx(MetaRow, {
+                    label: "Active instances",
+                    children: instances.loading ? /* @__PURE__ */ jsx(Text, {
+                        muted: !0,
+                        size: 1,
+                        children: "—"
+                    }) : /* @__PURE__ */ jsxs(Stack, {
+                        gap: 2,
+                        children: [ 
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 1,
+                            children: row?.activeCount ?? 0
+                        }), instances.truncated ? /* @__PURE__ */ jsx(Text, {
+                            muted: !0,
+                            size: 1,
+                            children: INSTANCE_CAP_COUNT_NOTE
+                        }) : null ]
+                    })
+                }), 
+                /* @__PURE__ */ jsx(MetaRow, {
+                    label: "Trigger",
+                    children: /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        children: startPhrase(definition)
+                    })
+                }), 
+                /* @__PURE__ */ jsx(MetaRow, {
+                    label: "Document types",
+                    children: runsOn.length === 0 ? /* @__PURE__ */ jsx(Text, {
+                        muted: !0,
+                        size: 1,
+                        children: "No document types in this Studio"
+                    }) : /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        children: runsOn.join(", ")
+                    })
+                }), 
+                /* @__PURE__ */ jsx(MetaRow, {
+                    label: "Description",
+                    children: definition.description === void 0 ? /* @__PURE__ */ jsx(Text, {
+                        muted: !0,
+                        size: 1,
+                        children: /* @__PURE__ */ jsx("em", {
+                            children: "No description"
+                        })
+                    }) : /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        style: {
+                            whiteSpace: "pre-wrap"
+                        },
+                        children: definition.description
+                    })
+                }) ]
+            })
+        }), 
+        /* @__PURE__ */ jsx(Flex, {
+            direction: "column",
+            flex: 1,
+            style: {
+                minHeight: 340
+            },
+            children: /* @__PURE__ */ jsx(MetaRow, {
+                fillHeight: !0,
+                label: "Stages",
+                children: /* @__PURE__ */ jsx(WorkflowDiagram, {
+                    definition: definition,
+                    explain: !0,
+                    fill: !0,
+                    height: "100%"
+                })
+            })
+        }) ]
+    });
+}
+
+const MAX_VISIBLE_DOC_TYPES = 4, COLUMNS = {
+    definition: 6,
+    instances: 2,
+    docTypes: 2
+};
+
+function Col({flex: flex, children: children}) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        flex: flex,
+        paddingRight: 3,
+        children: children
+    });
+}
+
+function DefinitionsTab({onOpenDefinition: onOpenDefinition}) {
+    const {definitions: definitions, error: error} = useDeployedDefinitions(), {mappingIssues: mappingIssues, mappings: mappings} = useWorkflowContext(), schema = useSchema(), instances = useToolInstances(), undeployed = /* @__PURE__ */ jsx(UndeployedWorkflows, {
+        notices: undeployedWorkflowNotices({
+            issues: mappingIssues,
+            titleOf: name => schema.get(name)?.title
+        })
+    });
+    if (error !== void 0) /* @__PURE__ */
+    return jsx(TabStatusRow, {
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: `Could not load the deployed workflows: ${error}`
+        })
+    });
+    if (definitions === void 0) /* @__PURE__ */
+    return jsx(TabStatusRow, {
+        children: /* @__PURE__ */ jsx(LoadingRow, {
+            label: "Loading definitions…"
+        })
+    });
+    if (definitions.length === 0) /* @__PURE__ */
+    return jsxs(Flex, {
+        direction: "column",
+        flex: 1,
+        gap: 3,
+        paddingBottom: 4,
+        paddingTop: 3,
+        children: [ undeployed, 
+        /* @__PURE__ */ jsx(EmptyState, {
+            description: "Workflow definitions deployed to this project will appear here",
+            icon: /* @__PURE__ */ jsx(TransferIcon, {}),
+            title: "No definitions deployed"
+        }) ]
+    });
+    const rows = definitionCatalog({
+        definitions: definitions,
+        mappings: mappings,
+        inFlight: instances.inFlight,
+        issues: mappingIssues
+    }), active = rows.reduce((sum, row) => sum + row.activeCount, 0);
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 3,
+        paddingBottom: 4,
+        paddingTop: 3,
+        children: [ undeployed, 
+        /* @__PURE__ */ jsx(Box, {
+            paddingX: 2,
+            children: /* @__PURE__ */ jsxs(Flex, {
+                align: "center",
+                gap: 2,
+                children: [ 
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    weight: "semibold",
+                    children: pluralize("definition", rows.length, !0)
+                }), 
+                /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: instances.loading ? "counting active instances…" : activeSummary(active)
+                }) ]
+            })
+        }), 
+        /* @__PURE__ */ jsxs(Stack, {
+            gap: 2,
+            children: [ 
+            /* @__PURE__ */ jsx(Card, {
+                paddingX: 2,
+                paddingY: 2,
+                style: {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1
+                },
+                children: /* @__PURE__ */ jsxs(Flex, {
+                    align: "center",
+                    gap: 4,
+                    children: [ 
+                    /* @__PURE__ */ jsx(Col, {
+                        flex: COLUMNS.definition,
+                        children: /* @__PURE__ */ jsx(Text, {
+                            muted: !0,
+                            size: 1,
+                            weight: "medium",
+                            children: "Definition"
+                        })
+                    }), 
+                    /* @__PURE__ */ jsx(Col, {
+                        flex: COLUMNS.instances,
+                        children: /* @__PURE__ */ jsxs(Flex, {
+                            align: "center",
+                            gap: 2,
+                            children: [ 
+                            /* @__PURE__ */ jsx(Text, {
+                                muted: !0,
+                                size: 1,
+                                weight: "medium",
+                                children: "Active instances"
+                            }), 
+                            /* @__PURE__ */ jsx(HoverHint, {
+                                text: "Counts only active instances — completed and aborted workflows are not included",
+                                children: /* @__PURE__ */ jsx(Text, {
+                                    muted: !0,
+                                    size: 1,
+                                    style: {
+                                        opacity: .7
+                                    },
+                                    children: /* @__PURE__ */ jsx(InfoOutlineIcon, {})
+                                })
+                            }) ]
+                        })
+                    }), 
+                    /* @__PURE__ */ jsx(Col, {
+                        flex: COLUMNS.docTypes,
+                        children: /* @__PURE__ */ jsx(Text, {
+                            muted: !0,
+                            size: 1,
+                            weight: "medium",
+                            children: "Document types"
+                        })
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(Stack, {
+                gap: 1,
+                children: rows.map(row => /* @__PURE__ */ jsx(DefinitionRow, {
+                    countPending: instances.loading,
+                    onOpen: () => onOpenDefinition(row.name),
+                    row: row
+                }, row.name))
+            }) ]
+        }), instances.truncated ? /* @__PURE__ */ jsx(MutedNote, {
+            text: INSTANCE_CAP_COUNT_NOTE
+        }) : null ]
+    });
+}
+
+function activeSummary(active) {
+    return `${pluralize("active instance", active, !0)}`;
+}
+
+const ROW_ISSUES_HINT = "This definition has issues";
+
+function UndeployedWorkflows({notices: notices}) {
+    return notices.length === 0 ? null : 
+    /* @__PURE__ */ jsx(Stack, {
+        gap: 2,
+        paddingBottom: 1,
+        children: notices.map(notice => /* @__PURE__ */ jsx(CautionNote, {
+            label: notice
+        }, notice))
+    });
+}
+
+function DefinitionRow({countPending: countPending, onOpen: onOpen, row: row}) {
+    const flagged = row.brokenBindings.length > 0, card = /* @__PURE__ */ jsx(Card, {
+        as: "button",
+        onClick: onOpen,
+        paddingX: 2,
+        paddingY: 3,
+        radius: 2,
+        style: {
+            textAlign: "left",
+            width: "100%"
+        },
+        ...flagged ? {
+            tone: "caution"
+        } : {},
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "flex-start",
+            gap: 4,
+            children: [ 
+            /* @__PURE__ */ jsx(Col, {
+                flex: COLUMNS.definition,
+                children: /* @__PURE__ */ jsxs(Flex, {
+                    align: "flex-start",
+                    gap: 3,
+                    paddingLeft: flagged ? 1 : 0,
+                    children: [ flagged ? /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+                    }) : null, 
+                    /* @__PURE__ */ jsxs(Stack, {
+                        flex: 1,
+                        gap: 3,
+                        style: {
+                            minWidth: 0
+                        },
+                        children: [ 
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 1,
+                            weight: "semibold",
+                            children: row.title
+                        }), row.description === void 0 ? /* @__PURE__ */ jsx(Text, {
+                            muted: !0,
+                            size: 1,
+                            children: /* @__PURE__ */ jsx("em", {
+                                children: "No description"
+                            })
+                        }) : /* @__PURE__ */ jsx(Text, {
+                            muted: !0,
+                            size: 1,
+                            children: row.description
+                        }) ]
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(Col, {
+                flex: COLUMNS.instances,
+                children: /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: countPending ? "—" : `${row.activeCount} active`
+                })
+            }), 
+            /* @__PURE__ */ jsx(Col, {
+                flex: COLUMNS.docTypes,
+                children: /* @__PURE__ */ jsx(DocTypeChips, {
+                    docTypes: row.docTypes
+                })
+            }) ]
+        })
+    });
+    return flagged ? /* @__PURE__ */ jsx(HoverHint, {
+        fill: !0,
+        text: ROW_ISSUES_HINT,
+        children: card
+    }) : card;
+}
+
+function DocTypeChips({docTypes: docTypes}) {
+    const schema = useSchema(), badgeTrim = useBadgeCapTrim();
+    if (docTypes.length === 0) /* @__PURE__ */
+    return jsx(Text, {
+        muted: !0,
+        size: 1,
+        children: "—"
+    });
+    const labels = docTypeLabels(docTypes, name => schema.get(name)?.title), shown = labels.slice(0, MAX_VISIBLE_DOC_TYPES), overflow = labels.length - shown.length;
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        style: badgeTrim,
+        wrap: "wrap",
+        children: [ shown.map(docType => 
+        /* @__PURE__ */ jsx(Badge, {
+            fontSize: 1,
+            style: {
+                minWidth: 0
+            },
+            children: /* @__PURE__ */ jsx("span", {
+                style: {
+                    display: "block",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                },
+                children: docType.title
+            })
+        }, docType.name)), overflow > 0 ? /* @__PURE__ */ jsxs(Text, {
+            muted: !0,
+            size: 1,
+            children: [ "+", overflow, " more" ]
+        }) : null ]
+    });
+}
+
+function normalizeAbortReason(raw) {
+    const trimmed = raw.trim();
+    return trimmed === "" ? void 0 : trimmed;
+}
+
+function abortedToast(title) {
+    return {
+        id: TOAST_ID.abort,
+        status: "info",
+        title: `Aborted “${title}”`
+    };
+}
+
+function abortAlreadySettledToast(title) {
+    return {
+        id: TOAST_ID.abort,
+        status: "info",
+        title: `“${title}” had already finished`,
+        description: "Nothing was aborted — the workflow reached a terminal state first."
+    };
+}
+
+function abortUnconfirmedToast(args) {
+    return {
+        id: TOAST_ID.abort,
+        status: "warning",
+        title: `Couldn’t confirm “${args.title}” was aborted`,
+        description: `${describeError(args.err)} — the abort may still have committed, so check the workflow’s state before trying again.`
+    };
+}
+
+function AbortWorkflowDialog({entry: entry, onClose: onClose}) {
+    const {engine: engine} = useWorkflowContext(), definition = useDefinition(entry), toast = useWorkflowToast(), [typedReason, setTypedReason] = useState(""), [pending, setPending] = useState(!1), {instance: instance} = entry, title = instanceTitle(instance, definition), reason = normalizeAbortReason(typedReason), reasonInputId = `abort-workflow-reason-${instance._id}`, confirm = async () => {
+        if (reason !== void 0) {
+            setPending(!0);
+            try {
+                const {changed: changed} = await engine.abortInstance({
+                    instanceId: instance._id,
+                    reason: reason
+                });
+                toast.push(changed ? abortedToast(title) : abortAlreadySettledToast(title)), onClose();
+            } catch (err) {
+                toast.push(abortUnconfirmedToast({
+                    title: title,
+                    err: err
+                })), setPending(!1);
+            }
+        }
+    };
+    /* @__PURE__ */
+    return jsx(Dialog, {
+        footer: /* @__PURE__ */ jsx(Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsxs(Flex, {
+                gap: 2,
+                justify: "flex-end",
+                children: [ 
+                /* @__PURE__ */ jsx(Button, {
+                    disabled: pending,
+                    fontSize: 1,
+                    mode: "bleed",
+                    onClick: onClose,
+                    padding: 2,
+                    text: "Cancel"
+                }), 
+                /* @__PURE__ */ jsx(Button, {
+                    disabled: reason === void 0,
+                    fontSize: 1,
+                    loading: pending,
+                    onClick: () => {
+                        confirm();
+                    },
+                    padding: 2,
+                    text: "Abort workflow",
+                    tone: "critical"
+                }) ]
+            })
+        }),
+        header: "Abort workflow",
+        id: `abort-workflow-${instance._id}`,
+        onClose: () => {
+            pending || onClose();
+        },
+        width: 0,
+        children: /* @__PURE__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxs(Stack, {
+                gap: 5,
+                children: [ 
+                /* @__PURE__ */ jsxs(Text, {
+                    size: 1,
+                    children: [ "Abort the ", 
+                    /* @__PURE__ */ jsx("strong", {
+                        children: title
+                    }), " workflow? This cannot be undone." ]
+                }), 
+                /* @__PURE__ */ jsxs(Stack, {
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsx(Text, {
+                        as: "label",
+                        htmlFor: reasonInputId,
+                        size: 1,
+                        weight: "medium",
+                        children: "Reason"
+                    }), 
+                    /* @__PURE__ */ jsx(TextInput, {
+                        autoFocus: !0,
+                        fontSize: 1,
+                        id: reasonInputId,
+                        onChange: event => setTypedReason(event.currentTarget.value),
+                        placeholder: "Why is this workflow being stopped?",
+                        value: typedReason
+                    }) ]
+                }) ]
+            })
+        })
+    });
+}
+
+function AbortWorkflowSection({entry: entry}) {
+    const [aborting, setAborting] = useState(!1);
+    return isLiveEntry(entry) ? /* @__PURE__ */ jsxs(Stack, {
+        gap: 4,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            weight: "semibold",
+            children: "Manage workflow"
         }), 
         /* @__PURE__ */ jsx(Flex, {
             children: /* @__PURE__ */ jsx(Button, {
                 fontSize: 1,
-                icon: ArrowLeftIcon,
                 mode: "ghost",
-                onClick: onBack,
+                onClick: () => setAborting(!0),
                 padding: 2,
-                text: "Back to workflows"
+                text: "Abort workflow…",
+                tone: "critical"
+            })
+        }), aborting ? /* @__PURE__ */ jsx(AbortWorkflowDialog, {
+            entry: entry,
+            onClose: () => setAborting(!1)
+        }) : null ]
+    }) : null;
+}
+
+function makeTitleResolver(definition) {
+    const activities = (definition?.stages ?? []).flatMap(s => s.activities ?? []);
+    return {
+        action: (activityName, actionName) => activities.find(t => t.name === activityName)?.actions?.find(a => a.name === actionName)?.title ?? actionName,
+        activity: name => activities.find(t => t.name === name)?.title ?? name,
+        stage: name => stageTitle(definition, name)
+    };
+}
+
+function attributed(actor, ...parts) {
+    if (actor) return {
+        actorId: actor.id,
+        parts: parts
+    };
+    const [first, ...rest] = parts;
+    return typeof first != "string" ? {
+        actorId: void 0,
+        parts: parts
+    } : {
+        actorId: void 0,
+        parts: [ first.charAt(0).toUpperCase() + first.slice(1), ...rest ]
+    };
+}
+
+function standalone(...parts) {
+    return {
+        actorId: void 0,
+        parts: parts
+    };
+}
+
+const historyLiner = {
+    stageEntered: (h, titles) => attributed(h.actor, `entered ${titles.stage(h.stage)}${h.fromStage ? ` from ${titles.stage(h.fromStage)}` : ""}`),
+    stageExited: (h, titles) => attributed(h.actor, `left ${titles.stage(h.stage)} for ${titles.stage(h.toStage)}`),
+    activityStatusChanged: (h, titles) => attributed(h.actor, `changed ${titles.activity(h.activity)}: ${h.from} → ${h.to}`),
+    actionFired: (h, titles) => {
+        const phrase = `fired ${titles.action(h.activity, h.action)} on ${titles.activity(h.activity)}`;
+        return h.triggered ? standalone(`The workflow ${phrase}`) : attributed(h.actor, phrase);
+    },
+    transitionFired: (h, titles) => attributed(h.actor, `moved ${titles.stage(h.fromStage)} → ${titles.stage(h.toStage)}`),
+    effectQueued: h => standalone("Effect ", {
+        code: h.effect
+    }, " queued"),
+    effectCompleted: h => {
+        const detail = h.detail ? ` — ${h.detail}` : "";
+        return h.actor ? attributed(h.actor, "resolved effect ", {
+            code: h.effect
+        }, ` — ${h.status}${detail}`) : standalone("Effect ", {
+            code: h.effect
+        }, ` ${h.status}${detail}`);
+    },
+    effectClaimReleased: h => attributed(h.actor, "released a stale claim on effect ", {
+        code: h.effect
+    }, ` ${h.via === "sweep" ? "via the sweeper" : "via a drain takeover"}`),
+    spawned: (h, titles) => attributed(h.actor, `spawned a child workflow from ${titles.activity(h.activity)}`),
+    subworkflowAdopted: (h, titles) => standalone(`Re-adopted child workflow into ${titles.activity(h.activity)} on re-entering ${titles.stage(h.stage)}`),
+    subworkflowResolved: (h, titles) => standalone(`Child workflow of ${titles.activity(h.activity)} ${h.status === "done" ? "completed" : "was aborted"}`),
+    subworkflowOrphaned: h => standalone(`Orphaned child workflow reached terminal — ${h.detail}`),
+    aborted: (h, titles) => attributed(h.actor, `aborted the workflow at ${titles.stage(h.stage)}${h.reason ? ` — ${h.reason}` : ""}`),
+    opApplied: (h, titles) => h.action ? attributed(h.actor, `changed state via action ${titles.action(h.activity ?? "", h.action)}`) : h.activity ? attributed(h.actor, `changed state via activity ${titles.activity(h.activity)}`) : attributed(h.actor, "changed state via ", {
+        code: h.opType
+    }),
+    fieldQueryDiscarded: h => standalone({
+        code: JSON.stringify(h)
+    })
+};
+
+function historyLine(h, titles) {
+    return historyLiner[h._type](h, titles);
+}
+
+function PendingEffectRows({instance: instance, now: now}) {
+    const {drainEffectsFor: drainEffectsFor, completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = useWorkflowContext(), toast = useWorkflowToast(), [busy, setBusy] = useState(!1), pending = instance.pendingEffects ?? [];
+    if (pending.length === 0) return null;
+    const runRegistered = async () => {
+        setBusy(!0);
+        try {
+            await drainEffectsFor(instance._id), toast.push({
+                id: TOAST_ID.effectsDrain,
+                status: "info",
+                title: "Ran the registered handlers"
+            });
+        } catch (err) {
+            toast.push({
+                id: TOAST_ID.effectsDrain,
+                status: "error",
+                title: "Failed to run pending effects",
+                description: describeError(err)
+            });
+        } finally {
+            setBusy(!1);
+        }
+    }, resolve = async (effectKey, status) => {
+        setBusy(!0);
+        try {
+            await completeEffectFor(instance._id, {
+                effectKey: effectKey,
+                status: status,
+                detail: "Resolved in Studio"
+            }), toast.push({
+                id: TOAST_ID.effectResolve,
+                status: "info",
+                title: `Effect marked as ${status}`
+            });
+        } catch (err) {
+            toast.push({
+                id: TOAST_ID.effectResolve,
+                status: "error",
+                title: "Failed to resolve the effect",
+                description: describeError(err)
+            });
+        } finally {
+            setBusy(!1);
+        }
+    };
+    /* @__PURE__ */
+    return jsx(Fragment, {
+        children: pending.map(fx => /* @__PURE__ */ jsx(PendingEffectRow, {
+            busy: busy,
+            effect: fx,
+            instanceId: instance._id,
+            now: now,
+            onResolve: status => resolve(fx._key, status),
+            onRunHandlers: runRegistered,
+            registered: fx.name in effectHandlers
+        }, fx._key))
+    });
+}
+
+function PendingEffectRow({busy: busy, effect: effect, instanceId: instanceId, now: now, onResolve: onResolve, onRunHandlers: onRunHandlers, registered: registered}) {
+    const label = effect.title ?? effect.name, avatarSize = useAvatarSize();
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(FeedGlyph, {
+            hint: "Waiting to run",
+            icon: /* @__PURE__ */ jsx(ClockIcon, {})
+        }), 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxs(Text, {
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ effect.title ?? /* @__PURE__ */ jsx(CodeChip, {
+                        value: effect.name
+                    }), registered ? " — ready to run in Studio" : " — waiting for the runtime" ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: "·"
+            }), 
+            /* @__PURE__ */ jsx(HoverHint, {
+                text: formatDateTime(effect.queuedAt),
+                children: /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    style: {
+                        whiteSpace: "nowrap"
+                    },
+                    children: formatShortAgo(effect.queuedAt, now)
+                })
+            }) ]
+        }), 
+        /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            flex: "none",
+            style: {
+                height: avatarSize
+            },
+            children: /* @__PURE__ */ jsx(HintedMenuButton, {
+                button: /* @__PURE__ */ jsx(Button, {
+                    "aria-label": `Resolve ${label}`,
+                    disabled: busy,
+                    fontSize: 1,
+                    icon: EllipsisHorizontalIcon,
+                    mode: "bleed",
+                    padding: 2
+                }),
+                hint: "Resolve",
+                id: `pending-effect-menu-${instanceId}-${effect._key}`,
+                menu: /* @__PURE__ */ jsxs(Menu, {
+                    children: [ registered ? /* @__PURE__ */ jsx(MenuItem, {
+                        onClick: onRunHandlers,
+                        text: "Run registered handlers"
+                    }) : null, 
+                    /* @__PURE__ */ jsx(MenuItem, {
+                        onClick: () => onResolve("done"),
+                        text: "Mark done"
+                    }), 
+                    /* @__PURE__ */ jsx(MenuItem, {
+                        onClick: () => onResolve("failed"),
+                        text: "Mark failed",
+                        tone: "critical"
+                    }) ]
+                }),
+                popover: {
+                    placement: "bottom-end",
+                    portal: !0
+                }
+            })
+        }) ]
+    });
+}
+
+function ActivityLog({instance: instance, definition: definition}) {
+    const titles = useMemo(() => makeTitleResolver(definition), [ definition ]), entries = useMemo(() => instance.history.toReversed(), [ instance.history ]), [now, setNow] = useState(() => /* @__PURE__ */ new Date);
+    return useEffect(() => {
+        const timer = setInterval(() => setNow(/* @__PURE__ */ new Date), 6e4);
+        return () => clearInterval(timer);
+    }, []), entries.length === 0 && (instance.pendingEffects ?? []).length === 0 ? /* @__PURE__ */ jsx(Text, {
+        muted: !0,
+        size: 1,
+        children: "No activity yet"
+    }) : /* @__PURE__ */ jsxs(Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(PendingEffectRows, {
+            instance: instance,
+            now: now
+        }), entries.map(h => /* @__PURE__ */ jsx(HistoryRow, {
+            entry: h,
+            now: now,
+            titles: titles
+        }, h._key)) ]
+    });
+}
+
+function HistoryRow({entry: entry, now: now, titles: titles}) {
+    const line = historyLine(entry, titles);
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [ line.actorId === void 0 ? /* @__PURE__ */ jsx(FeedGlyph, {
+            hint: "The workflow",
+            icon: /* @__PURE__ */ jsx(CogIcon, {})
+        }) : /* @__PURE__ */ jsx(UserAvatar, {
+            id: line.actorId
+        }), 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxs(Text, {
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ line.actorId === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, {
+                        children: [ 
+                        /* @__PURE__ */ jsx(ActorNameSpan, {
+                            id: line.actorId
+                        }), " " ]
+                    }), line.parts.map((part, index) => typeof part == "string" ? part : /* @__PURE__ */ jsx(CodeChip, {
+                        value: part.code
+                    }, index)) ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: "·"
+            }), 
+            /* @__PURE__ */ jsx(HoverHint, {
+                text: formatDateTime(entry.at),
+                children: /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    style: {
+                        whiteSpace: "nowrap"
+                    },
+                    children: formatShortAgo(entry.at, now)
+                })
+            }) ]
+        }) ]
+    });
+}
+
+function ActorNameSpan({id: id}) {
+    const {name: name} = useUserDisplay(id), {font: font} = useTheme_v2();
+    /* @__PURE__ */
+    return jsx("span", {
+        style: {
+            fontWeight: font.text.weights.medium
+        },
+        children: name
+    });
+}
+
+function CodeChip({value: value}) {
+    /* @__PURE__ */
+    return jsx("code", {
+        children: value
+    });
+}
+
+function FeedGlyph({hint: hint, icon: icon}) {
+    const size = useAvatarSize();
+    /* @__PURE__ */
+    return jsx(HoverHint, {
+        text: hint,
+        children: /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            flex: "none",
+            justify: "center",
+            style: {
+                height: size,
+                width: size
+            },
+            children: /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: icon
+            })
+        })
+    });
+}
+
+function WorkflowInstanceDetail({instanceId: instanceId, backToList: backToList}) {
+    const entry = useWorkflowInstanceEntry(instanceId);
+    useLogEventOnMount(WorkflowInstanceDetailViewed, {
+        instanceId: instanceId
+    });
+    const [graceOver, setGraceOver] = useState(!1);
+    return useEffect(() => {
+        const timer = setTimeout(() => setGraceOver(!0), 2500);
+        return () => clearTimeout(timer);
+    }, [ instanceId ]), entry?.invalid ? /* @__PURE__ */ jsx(Box, {
+        padding: 4,
+        children: /* @__PURE__ */ jsx(InvalidDocNotice, {
+            invalid: entry.invalid
+        })
+    }) : entry ? /* @__PURE__ */ jsx(InstanceDetailPanel, {
+        entry: entry
+    }) : /* @__PURE__ */ jsx(Box, {
+        paddingX: 3,
+        children: /* @__PURE__ */ jsx(TabStatusRow, {
+            children: graceOver ? /* @__PURE__ */ jsx(DetailNotFound, {
+                back: backToList,
+                message: /* @__PURE__ */ jsxs(Fragment, {
+                    children: [ "Unable to find workflow with id “", 
+                    /* @__PURE__ */ jsx("strong", {
+                        children: instanceId
+                    }), "”." ]
+                })
+            }) : /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Loading workflow…"
             })
-        }) ]
+        })
     });
 }
 
-function InstanceDetailPanel({entry: entry, onBack: onBack}) {
-    const definition = useDefinition(entry), [openActivity, setOpenActivity] = useState(null), {instance: instance} = entry;
+function InstanceDetailPanel({entry: entry}) {
+    const definition = useDefinition(entry), snapshotWidth = useContainerToken(2), [openActivity, setOpenActivity] = useState(null), {instance: instance, ready: ready} = entry;
     return useEffect(() => {
         openActivity && openActivityGone({
             entry: entry,
@@ -124,36 +2431,56 @@ function InstanceDetailPanel({entry: entry, onBack: onBack}) {
         height: "fill",
         overflow: "hidden",
         children: [ 
-        /* @__PURE__ */ jsx(DetailHeader, {
-            definition: definition,
-            entry: entry,
-            onBack: onBack
+        /* @__PURE__ */ jsx(Box, {
+            flex: "none",
+            paddingBottom: 2,
+            paddingTop: 3,
+            paddingX: 3,
+            children: /* @__PURE__ */ jsx(DetailTitle, {
+                busy: !ready || isEvaluationStale(entry),
+                documentGdr: documentRefsOf(instance)[0],
+                title: instanceTitle(instance, definition)
+            })
         }), 
         /* @__PURE__ */ jsx(Box, {
             flex: 1,
             overflow: "auto",
-            paddingX: 4,
-            children: /* @__PURE__ */ jsxs(Stack, {
-                gap: 4,
+            paddingX: 3,
+            children: /* @__PURE__ */ jsx(Box, {
                 paddingBottom: 5,
-                children: [ 
-                /* @__PURE__ */ jsx(StudioDocumentsSection, {
-                    instance: instance
-                }), 
-                /* @__PURE__ */ jsx(StageDiagramSection, {
-                    definition: definition,
-                    entry: entry
-                }), 
-                /* @__PURE__ */ jsx(GroupHeading, {
-                    title: "All tasks"
-                }), 
-                /* @__PURE__ */ jsx(InstanceTaskLists, {
-                    entry: entry,
-                    onOpenActivity: name => setOpenActivity({
-                        stage: instance.currentStage,
-                        activityName: name
-                    })
-                }) ]
+                paddingLeft: 2,
+                paddingTop: 2,
+                style: {
+                    maxWidth: snapshotWidth
+                },
+                children: /* @__PURE__ */ jsxs(Stack, {
+                    gap: 6,
+                    children: [ 
+                    /* @__PURE__ */ jsx(InstanceSnapshotBody, {
+                        entry: entry,
+                        onOpenActivity: name => setOpenActivity({
+                            stage: instance.currentStage,
+                            activityName: name
+                        }),
+                        surface: "tool-instance-detail"
+                    }), 
+                    /* @__PURE__ */ jsx(AbortWorkflowSection, {
+                        entry: entry
+                    }), 
+                    /* @__PURE__ */ jsxs(Stack, {
+                        gap: 4,
+                        children: [ 
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 1,
+                            weight: "semibold",
+                            children: "History"
+                        }), 
+                        /* @__PURE__ */ jsx(ActivityLog, {
+                            definition: definition,
+                            instance: instance
+                        }) ]
+                    }) ]
+                })
             })
         }), openActivity ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
             activityName: openActivity.activityName,
@@ -166,130 +2493,14 @@ function InstanceDetailPanel({entry: entry, onBack: onBack}) {
     });
 }
 
-function DetailHeader({entry: entry, definition: definition, onBack: onBack}) {
-    const {instance: instance, ready: ready} = entry;
-    /* @__PURE__ */
-    return jsx(Card, {
-        flex: "none",
-        paddingX: 4,
-        paddingY: 3,
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 3,
-            wrap: "wrap",
-            children: [ 
-            /* @__PURE__ */ jsx(HoverHint, {
-                text: "Back to workflows",
-                children: /* @__PURE__ */ jsx(Button, {
-                    "aria-label": "Back to workflows",
-                    fontSize: 1,
-                    icon: ArrowLeftIcon,
-                    mode: "bleed",
-                    onClick: onBack,
-                    padding: 2
-                })
-            }), 
-            /* @__PURE__ */ jsxs(Stack, {
-                gap: 2,
-                children: [ 
-                /* @__PURE__ */ jsx(Text, {
-                    size: 1,
-                    weight: "semibold",
-                    children: instanceTitle(instance, definition)
-                }), 
-                /* @__PURE__ */ jsxs(Text, {
-                    muted: !0,
-                    size: 1,
-                    children: [ "Started ", formatDate(instance.startedAt) ]
-                }) ]
-            }), terminalState(instance) === "in-flight" ? /* @__PURE__ */ jsx(StageChip, {
-                title: stageTitle(definition, instance.currentStage)
-            }) : /* @__PURE__ */ jsx(AbortedBadge, {
-                instance: instance
-            }), 
-            /* @__PURE__ */ jsx(SpinnerSlot, {
-                busy: !ready || isEvaluationStale(entry)
-            }) ]
-        })
-    });
-}
-
-function StudioDocumentsSection({instance: instance}) {
-    const refs = documentRefsOf(instance);
-    return refs.length === 0 ? null : /* @__PURE__ */ jsxs(Stack, {
-        gap: 3,
-        marginTop: 3,
-        children: [ 
-        /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            weight: "medium",
-            children: refs.length === 1 ? "Studio document" : "Studio documents"
-        }), 
-        /* @__PURE__ */ jsx(Stack, {
-            gap: 2,
-            children: refs.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
-                gdr: ref
-            }, ref.id))
-        }) ]
-    });
-}
-
-function StageDiagramSection({entry: entry, definition: definition}) {
-    const {instance: instance} = entry;
-    return definition ? 
-    /* @__PURE__ */ jsx(WorkflowDiagram, {
-        currentStage: terminalState(instance) === "in-flight" ? instance.currentStage : void 0,
-        definition: definition,
-        evaluation: entry.evaluation,
-        explain: !0,
-        guardCount: entry.guards?.length,
-        height: 340,
-        history: instance.history
-    }, instance._id) : /* @__PURE__ */ jsx(Card, {
-        border: !0,
-        marginTop: 3,
-        padding: 3,
-        radius: 2,
-        tone: "caution",
-        children: /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: "Couldn’t load this workflow’s full details — the stage diagram is unavailable, and technical names show instead of titles."
-        })
-    });
-}
-
-function MutedNote({text: text}) {
-    /* @__PURE__ */
-    return jsx(Box, {
-        paddingY: 3,
-        children: /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: text
-        })
-    });
-}
-
 function useStartableDefinitions() {
-    const {engine: engine} = useWorkflowContext(), [definitions, setDefinitions] = useState(void 0), [error, setError] = useState(void 0);
-    return useEffect(() => {
-        let cancelled = !1;
-        return (async () => {
-            const rows = await readDeployedDefinitions(engine), startable = latestDeployedDefinitions(rows).filter(row => isStartableDefinition(row)).map(row => ({
-                name: row.name,
-                title: row.title ?? row.name,
-                description: row.description
-            }));
-            cancelled || (setDefinitions(startable), setError(void 0));
-        })().catch(err => {
-            cancelled || setError(describeError(err));
-        }), () => {
-            cancelled = !0;
-        };
-    }, [ engine ]), {
-        definitions: definitions,
+    const {definitions: definitions, error: error} = useDeployedDefinitions();
+    return {
+        definitions: useMemo(() => definitions?.filter(row => isStartableDefinition(row)).map(row => ({
+            name: row.name,
+            title: row.title ?? row.name,
+            description: row.description
+        })), [ definitions ]),
         error: error
     };
 }
@@ -378,197 +2589,56 @@ function DefinitionPickerPanel({onPick: onPick}) {
                             size: 1,
                             textOverflow: "ellipsis",
                             children: definition.description
-                        }) : null ]
-                    })
-                }, definition.name))
-            }) ]
-        })
-    });
-}
-
-function ToolActivityDialog({target: target, onClose: onClose}) {
-    const entry = useWorkflowInstanceEntry(target.instanceId), definition = useDefinition(entry), resolvedOnce = useRef(!1);
-    return entry && (resolvedOnce.current = !0), useEffect(() => {
-        resolvedOnce.current && openActivityGone({
-            entry: entry,
-            target: target
-        }) && onClose();
-    }, [ entry, target, onClose ]), entry?.invalid ? /* @__PURE__ */ jsx(Dialog, {
-        header: "Workflow unavailable",
-        id: "workflow-activity-detail",
-        onClose: onClose,
-        width: 1,
-        children: /* @__PURE__ */ jsx(Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsx(InvalidDocNotice, {
-                invalid: entry.invalid
-            })
-        })
-    }) : entry?.evaluation ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
-        activityName: target.activityName,
-        breadcrumb: instanceBreadcrumb(entry.instance, definition),
-        definition: definition,
-        document: documentRefsOf(entry.instance)[0],
-        entry: entry,
-        onClose: onClose,
-        source: "tool-task-list"
-    }) : /* @__PURE__ */ jsx(Dialog, {
-        header: "Loading activity…",
-        id: "workflow-activity-detail",
-        onClose: onClose,
-        width: 1,
-        children: /* @__PURE__ */ jsx(Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsx(LoadingRow, {
-                label: "Fetching the live workflow state…"
-            })
-        })
-    });
-}
-
-const GROUP_DEFAULT_OPEN = !0;
-
-function instanceBandDefaultOpen(segment) {
-    return segment === "for-me";
-}
-
-const UNGROUPED_BAND_KEY = "section:no-document", PAYLOAD_VERSION = 1, MAX_ENTRIES = 200;
-
-function bandStateStorageKey(scope) {
-    return `sanity.workflows.tool.bands:${scope}`;
-}
-
-function isRecord(value) {
-    return typeof value == "object" && value !== null && !Array.isArray(value);
-}
-
-function bandEntryOf(value) {
-    if (!isRecord(value)) return;
-    const {open: open, touched: touched} = value;
-    if (!(typeof open != "boolean" || typeof touched != "number") && Number.isFinite(touched)) return {
-        open: open,
-        touched: touched
-    };
-}
-
-function parsePayload(raw) {
-    try {
-        const parsed = JSON.parse(raw);
-        if (!isRecord(parsed) || parsed.version !== PAYLOAD_VERSION || !isRecord(parsed.bands)) return;
-        const entries = [];
-        for (const [key, value] of Object.entries(parsed.bands)) {
-            const entry = bandEntryOf(value);
-            if (entry === void 0) return;
-            entries.push([ key, entry ]);
-        }
-        return Object.fromEntries(entries);
-    } catch {
-        return;
-    }
-}
-
-function readStored(storage, storageKey) {
-    if (!storage) return {
-        entries: void 0,
-        corrupt: !1
-    };
-    let raw;
-    try {
-        raw = storage.getItem(storageKey);
-    } catch {
-        return {
-            entries: void 0,
-            corrupt: !1
-        };
-    }
-    if (raw === null) return {
-        entries: {},
-        corrupt: !1
-    };
-    const entries = parsePayload(raw);
-    return {
-        entries: entries,
-        corrupt: entries === void 0
-    };
-}
-
-function writeStored(args) {
-    if (!args.storage) return !1;
-    try {
-        return args.storage.setItem(args.storageKey, JSON.stringify({
-            version: PAYLOAD_VERSION,
-            bands: args.entries
-        })), !0;
-    } catch {
-        return !1;
-    }
-}
-
-function baseEntries(args) {
-    return args.stored === void 0 ? args.held : args.unpersisted ? mergeByTouched(args.stored, args.held) : args.stored;
-}
-
-function mergeByTouched(stored, held) {
-    const merged = {
-        ...stored
-    };
-    for (const [key, entry] of Object.entries(held)) {
-        const persisted = merged[key];
-        (persisted === void 0 || entry.touched >= persisted.touched) && (merged[key] = entry);
-    }
-    return merged;
-}
-
-function prune(entries) {
-    const held = Object.entries(entries);
-    return held.length <= MAX_ENTRIES ? entries : Object.fromEntries(held.sort(([, a], [, b]) => b.touched - a.touched).slice(0, MAX_ENTRIES));
-}
-
-function togglesOf(entries) {
-    return new Map(Object.entries(entries).map(([key, entry]) => [ key, entry.open ]));
-}
-
-function defaultStorage() {
-    try {
-        return globalThis.localStorage;
-    } catch {
-        return;
-    }
+                        }) : null ]
+                    })
+                }, definition.name))
+            }) ]
+        })
+    });
 }
 
-function createBandStateStore(args) {
-    const storage = args.storage ?? defaultStorage(), initial = readStored(storage, args.storageKey);
-    initial.corrupt && writeStored({
-        storage: storage,
-        storageKey: args.storageKey,
-        entries: {}
+function ToolActivityDialog({target: target, onClose: onClose}) {
+    const entry = useWorkflowInstanceEntry(target.instanceId), definition = useDefinition(entry), resolvedOnce = useRef(!1);
+    return entry && (resolvedOnce.current = !0), useEffect(() => {
+        resolvedOnce.current && openActivityGone({
+            entry: entry,
+            target: target
+        }) && onClose();
+    }, [ entry, target, onClose ]), entry?.invalid ? /* @__PURE__ */ jsx(Dialog, {
+        header: "Workflow unavailable",
+        id: "workflow-activity-detail",
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsx(InvalidDocNotice, {
+                invalid: entry.invalid
+            })
+        })
+    }) : entry?.evaluation ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
+        activityName: target.activityName,
+        breadcrumb: instanceBreadcrumb(entry.instance, definition),
+        definition: definition,
+        document: documentRefsOf(entry.instance)[0],
+        entry: entry,
+        onClose: onClose,
+        source: "tool-task-list"
+    }) : /* @__PURE__ */ jsx(Dialog, {
+        header: "Loading activity…",
+        id: "workflow-activity-detail",
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Fetching the live workflow state…"
+            })
+        })
     });
-    let held = initial.entries ?? {}, unpersisted = !1;
-    return {
-        read: () => togglesOf(held),
-        setOpen(key, open) {
-            const stored = readStored(storage, args.storageKey).entries, base = baseEntries({
-                stored: stored,
-                held: held,
-                unpersisted: unpersisted
-            });
-            return held = prune({
-                ...base,
-                [key]: {
-                    open: open,
-                    touched: Date.now()
-                }
-            }), unpersisted = !writeStored({
-                storage: storage,
-                storageKey: args.storageKey,
-                entries: held
-            }), togglesOf(held);
-        }
-    };
 }
 
 function datesOf(state) {
-    return state.filter(entry => entry._type === "date" || entry._type === "datetime").map(entry => entry.value).filter(value => typeof value == "string" && value !== "");
+    return state.filter(entry => isDateFieldKind(entry._type)).map(entry => entry.value).filter(value => typeof value == "string" && value !== "");
 }
 
 function spawnOrigins(instances) {
@@ -668,6 +2738,14 @@ function deriveTaskGroups(args) {
     };
 }
 
+function orderGroupsByPreviewTitle(groups, titles) {
+    const withDocuments = [ ...groups.withDocuments ].sort(byResolvedTitle(group => titles.get(group.document.id), group => group.key));
+    return {
+        ...groups,
+        withDocuments: withDocuments
+    };
+}
+
 function cutTaskGroups(groups, cut) {
     const cutBands = bands => bands.filter(band => cut.keepBand?.(band) ?? !0).map(band => ({
         ...band,
@@ -813,11 +2891,13 @@ function workflowTally(workflows) {
 function settleToast(outcome) {
     const total = outcome.settled + outcome.skipped.length + outcome.failures.length;
     if (outcome.skipped.length === 0 && outcome.failures.length === 0) return {
-        status: "success",
+        id: TOAST_ID.orphanSettle,
+        status: "info",
         title: outcome.settled === 1 ? "Cleaned up 1 workflow" : `Cleaned up ${outcome.settled} workflows`
     };
     const lines = [ ...outcome.skipped.map(workflow => `${workflow.title}: its document exists again — left running`), ...outcome.failures.map(failure => `${failure.workflow.title}: ${failure.message}`) ];
     return {
+        id: TOAST_ID.orphanSettle,
         status: "warning",
         title: `Cleaned up ${outcome.settled} of ${total} workflows`,
         description: lines.join(`\n`)
@@ -826,9 +2906,10 @@ function settleToast(outcome) {
 
 function recheckFailedToast(err) {
     return {
+        id: TOAST_ID.orphanSettle,
         status: "error",
-        title: "Nothing was cleaned up — the documents could not be re-checked",
-        description: describeError(err)
+        title: "Nothing was cleaned up",
+        description: `The documents could not be re-checked: ${describeError(err)}`
     };
 }
 
@@ -858,7 +2939,7 @@ function OrphanedWorkflowsNote({orphans: orphans}) {
 function SettleOrphansDialog({workflows: workflows, onClose: onClose}) {
     const {engine: engine} = useWorkflowContext(), client = useClient({
         apiVersion: WORKFLOW_API_VERSION
-    }), toast = useClosableToast(), [pending, setPending] = useState(!1), confirm = async () => {
+    }), toast = useWorkflowToast(), [pending, setPending] = useState(!1), confirm = async () => {
         setPending(!0);
         try {
             const outcome = await settleOrphans({
@@ -1103,38 +3184,6 @@ function applyTaskFilters(args) {
     });
 }
 
-const NOTHING = {
-    titles: /* @__PURE__ */ new Map,
-    resolved: /* @__PURE__ */ new Set
-};
-
-function useDocPreviewTitles(documents) {
-    const previewStore = useDocumentPreviewStore(), schema = useSchema(), {binding: binding} = useWorkflowContext(), [state, setState] = useState(NOTHING), key = documents.map(doc => doc.id).join("|");
-    return useEffect(() => {
-        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, publish = () => setState({
-            titles: new Map(titles),
-            resolved: new Set(resolved)
-        }), subscriptions = documents.flatMap(doc => {
-            const {parsed: parsedRef, local: local} = gdrLocality(doc.id, binding.contentResource), schemaType = schema.get(doc.type);
-            return !parsedRef || !local || !schemaType ? (resolved.add(doc.id), []) : [ previewStore.observeForPreview({
-                _type: "reference",
-                _ref: parsedRef.documentId
-            }, schemaType).subscribe({
-                next: event => {
-                    resolved.add(doc.id);
-                    const title = event.snapshot?.title;
-                    typeof title == "string" && titles.set(doc.id, title), publish();
-                },
-                error: err => {
-                    console.error(`[workflow-studio-plugin] preview for "${doc.id}" failed:`, err), 
-                    resolved.add(doc.id), publish();
-                }
-            }) ];
-        });
-        return publish(), () => subscriptions.forEach(sub => sub.unsubscribe());
-    }, [ key, previewStore, schema, binding.contentResource.id ]), state;
-}
-
 const HITS_CAP = 6;
 
 function TaskFilterMenu({filters: filters, options: options, onChange: onChange}) {
@@ -1633,8 +3682,10 @@ function FilterRowPortal({filters: filters, onChange: onChange, options: options
     }), slot) : null;
 }
 
-function ActivityDateControl({instanceId: instanceId, state: state, dates: dates}) {
-    const {editFieldFor: editFieldFor} = useWorkflowContext(), {save: save} = useSaveField(), [open, setOpen] = useState(!1), raw = dateControlValue({
+function ActivityDateControl({instanceId: instanceId, state: state, surface: surface, dates: dates}) {
+    const editField = useEditField(surface), {save: save} = useSaveField({
+        instanceId: instanceId
+    }), [open, setOpen] = useState(!1), raw = dateControlValue({
         state: state,
         dates: dates
     }), display = raw === void 0 ? null : /* @__PURE__ */ jsx(Text, {
@@ -1657,15 +3708,16 @@ function ActivityDateControl({instanceId: instanceId, state: state, dates: dates
         })
     });
     const kind = dateControlKind(state), commit = (mode, value) => {
-        state.kind === "editable" && save(() => editFieldFor(instanceId, {
-            target: editFieldTarget(state.field),
+        state.kind === "editable" && save(() => editField({
+            instanceId: instanceId,
+            field: state.field,
             ...mode === "set" ? {
                 mode: mode,
                 value: value
             } : {
                 mode: mode
             }
-        }).then(() => {}));
+        }));
     }, handleClick = e => {
         e.stopPropagation(), setOpen(v => !v);
     };
@@ -1682,9 +3734,9 @@ function ActivityDateControl({instanceId: instanceId, state: state, dates: dates
                     setOpen(!1), commit("unset");
                 },
                 onPick: next => {
-                    kind === "date" && setOpen(!1), commit("set", serializeDateFieldValue(next, kind));
+                    hasTimeOfDay(kind) || setOpen(!1), commit("set", serializeDateFieldValue(next, kind));
                 },
-                selectTime: kind === "datetime",
+                selectTime: hasTimeOfDay(kind),
                 value: parseDateFieldValue(state.field.value, kind)
             })
         }),
@@ -1748,7 +3800,8 @@ function RefChips({refs: refs, max: max = 2}) {
         wrap: "wrap",
         children: [ shown.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
             gdr: ref,
-            layout: "inline"
+            layout: "inline",
+            source: "doc-ref-chip"
         }, ref.id)), overflow > 0 ? /* @__PURE__ */ jsxs(Text, {
             muted: !0,
             size: 1,
@@ -1757,57 +3810,18 @@ function RefChips({refs: refs, max: max = 2}) {
     });
 }
 
-const EMPTY_NOTE = "No tasks match — adjust the filters, or start a workflow", UNGROUPED_TITLE = "Workflows without Studio documents";
+const UNGROUPED_TITLE = "Workflows without Studio documents";
 
-function TaskGroupList({bands: bands, groups: groups, instanceDefaultOpen: instanceDefaultOpen, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
-    return groups.withDocuments.length === 0 && groups.withoutDocuments.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
-        text: EMPTY_NOTE
-    }) : /* @__PURE__ */ jsxs(Stack, {
-        gap: 2,
-        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsx(CollapsibleBand, {
-            background: !0,
-            onToggle: () => bands.toggle(group.key, GROUP_DEFAULT_OPEN),
-            open: bands.isOpen(group.key, GROUP_DEFAULT_OPEN),
-            sticky: !0,
-            title: toBareId(group.document.id),
-            header: /* @__PURE__ */ jsx(Flex, {
-                align: "center",
-                flex: "none",
-                style: {
-                    maxWidth: "60%"
-                },
-                children: /* @__PURE__ */ jsx(RefChips, {
-                    max: 2,
-                    refs: group.documents
-                })
-            }),
-            children: /* @__PURE__ */ jsx(InstanceBands, {
-                bands: bands,
-                instanceDefaultOpen: instanceDefaultOpen,
-                instances: group.instances,
-                onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow,
-                showTerminalActions: showTerminalActions
-            })
-        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsx(CollapsibleBand, {
-            background: !0,
-            onToggle: () => bands.toggle(UNGROUPED_BAND_KEY, GROUP_DEFAULT_OPEN),
-            open: bands.isOpen(UNGROUPED_BAND_KEY, GROUP_DEFAULT_OPEN),
-            sticky: !0,
-            title: UNGROUPED_TITLE,
-            header: /* @__PURE__ */ jsx(Text, {
-                size: 1,
-                weight: "semibold",
-                children: UNGROUPED_TITLE
-            }),
-            children: /* @__PURE__ */ jsx(InstanceBands, {
-                bands: bands,
-                instanceDefaultOpen: instanceDefaultOpen,
-                instances: groups.withoutDocuments,
-                onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow,
-                showTerminalActions: showTerminalActions
-            })
+function TaskGroupList({groups: groups, ...wiring}) {
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 1,
+        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsx(DocumentBand, {
+            group: group,
+            ...wiring
+        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsx(UngroupedBand, {
+            instances: groups.withoutDocuments,
+            ...wiring
         }) : null ]
     });
 }
@@ -1820,38 +3834,81 @@ function targetOf(row) {
     };
 }
 
-function InstanceBands({bands: bands, instanceDefaultOpen: instanceDefaultOpen, instances: instances, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+function DocumentBand({group: group, ...wiring}) {
+    const {open: open, toggle: toggle} = useBandOpen(wiring.bands, group.key);
+    /* @__PURE__ */
+    return jsx(CollapsibleBand, {
+        background: !0,
+        onToggle: toggle,
+        open: open,
+        sticky: !0,
+        title: toBareId(group.document.id),
+        header: /* @__PURE__ */ jsx(Flex, {
+            align: "center",
+            flex: "none",
+            style: {
+                maxWidth: "60%"
+            },
+            children: /* @__PURE__ */ jsx(RefChips, {
+                max: 2,
+                refs: group.documents
+            })
+        }),
+        children: /* @__PURE__ */ jsx(InstanceBands, {
+            instances: group.instances,
+            ...wiring
+        })
+    });
+}
+
+function UngroupedBand({instances: instances, ...wiring}) {
+    const {open: open, toggle: toggle} = useBandOpen(wiring.bands, UNGROUPED_BAND_KEY);
+    /* @__PURE__ */
+    return jsx(CollapsibleBand, {
+        background: !0,
+        onToggle: toggle,
+        open: open,
+        sticky: !0,
+        title: UNGROUPED_TITLE,
+        header: /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            weight: "semibold",
+            children: UNGROUPED_TITLE
+        }),
+        children: /* @__PURE__ */ jsx(InstanceBands, {
+            instances: instances,
+            ...wiring
+        })
+    });
+}
+
+function InstanceBands({instances: instances, ...wiring}) {
     /* @__PURE__ */
     return jsx(Stack, {
         gap: 1,
-        children: instances.map(band => /* @__PURE__ */ jsx(InstanceBand, {
-            band: band,
-            bands: bands,
-            instanceDefaultOpen: instanceDefaultOpen,
-            onOpenTask: onOpenTask,
-            onOpenWorkflow: onOpenWorkflow,
-            showTerminalActions: showTerminalActions
-        }, band.instanceId))
+        children: instances.map(instance => /* @__PURE__ */ jsx(InstanceBand, {
+            instance: instance,
+            ...wiring
+        }, instance.instanceId))
     });
 }
 
-function InstanceBand({band: band, bands: bands, instanceDefaultOpen: instanceDefaultOpen, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
-    const {resolvePathFromState: resolvePathFromState} = useRouter();
+function InstanceBand({bands: bands, instance: instance, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+    const {open: open, toggle: toggle} = useBandOpen(bands, instance.instanceId), {resolvePathFromState: resolvePathFromState} = useRouter();
     /* @__PURE__ */
     return jsx(CollapsibleBand, {
-        onToggle: () => bands.toggle(band.instanceId, instanceDefaultOpen),
-        open: bands.isOpen(band.instanceId, instanceDefaultOpen),
-        title: band.title,
+        onToggle: toggle,
+        open: open,
+        title: instance.title,
         header: /* @__PURE__ */ jsxs(Fragment, {
             children: [ 
             /* @__PURE__ */ jsx(LinkChip, {
                 hint: "View workflow",
                 href: resolvePathFromState({
-                    instanceId: band.instanceId
+                    instanceId: instance.instanceId
                 }),
                 onClick: event => {
-                    event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || (event.preventDefault(), 
-                    onOpenWorkflow(band.instanceId));
+                    isPlainClick(event) && (event.preventDefault(), onOpenWorkflow(instance.instanceId));
                 },
                 children: /* @__PURE__ */ jsxs(Flex, {
                     align: "center",
@@ -1867,12 +3924,12 @@ function InstanceBand({band: band, bands: bands, instanceDefaultOpen: instanceDe
                         },
                         textOverflow: "ellipsis",
                         weight: "medium",
-                        children: band.title
-                    }), band.breadcrumb === void 0 ? null : /* @__PURE__ */ jsx(BreadcrumbTail, {
-                        segments: [ band.breadcrumb ]
+                        children: instance.title
+                    }), instance.breadcrumb === void 0 ? null : /* @__PURE__ */ jsx(BreadcrumbTail, {
+                        segments: [ instance.breadcrumb ]
                     }), 
                     /* @__PURE__ */ jsx(StageFace, {
-                        title: band.stageTitle
+                        title: instance.stageTitle
                     }) ]
                 })
             }), 
@@ -1882,7 +3939,7 @@ function InstanceBand({band: band, bands: bands, instanceDefaultOpen: instanceDe
             paddingLeft: 5,
             children: /* @__PURE__ */ jsx(TaskRows, {
                 onOpenTask: onOpenTask,
-                rows: band.rows,
+                rows: instance.rows,
                 showTerminalActions: showTerminalActions
             })
         })
@@ -1916,40 +3973,19 @@ function TaskActivityRow({row: row, onOpen: onOpen, showTerminalActions: showTer
                 dateControl: /* @__PURE__ */ jsx(ActivityDateControl, {
                     dates: render.dates,
                     instanceId: row.instanceId,
-                    state: render.dateState
+                    state: render.dateState,
+                    surface: "tool-task-list"
                 }),
                 face: render.face,
                 instanceId: row.instanceId,
                 onOpen: onOpen,
+                surface: "tool-task-list",
                 terminalActions: showTerminalActions ? render.terminalActions : []
             })
         })
     });
 }
 
-function useBandOpenState(args) {
-    const {segment: segment, scope: scope} = args, store = useMemo(() => createBandStateStore({
-        storageKey: bandStateStorageKey(scope)
-    }), [ scope ]), [held, setHeld] = useState(() => ({
-        store: store,
-        toggles: store.read()
-    }));
-    held.store !== store && setHeld({
-        store: store,
-        toggles: store.read()
-    });
-    const qualify = key => `${segment}/${key}`, isOpen = (key, defaultOpen) => held.toggles.get(qualify(key)) ?? defaultOpen;
-    return {
-        isOpen: isOpen,
-        toggle: (key, defaultOpen) => {
-            setHeld({
-                store: store,
-                toggles: store.setOpen(qualify(key), !isOpen(key, defaultOpen))
-            });
-        }
-    };
-}
-
 const NO_MISSING = /* @__PURE__ */ new Set;
 
 function sameIdSet(a, b) {
@@ -1982,28 +4018,6 @@ function useOrphanedWorkflows(groups) {
     }), [ groups, contentResource, missing ]);
 }
 
-const INSTANCE_CAP = 200, NEWEST_INSTANCES = {
-    includeCompleted: !0,
-    limit: INSTANCE_CAP
-};
-
-function useToolInstances() {
-    const {engine: engine} = useWorkflowContext(), {instances: instances, loading: loading, unreadable: unreadable} = useWorkflowInstances({
-        engine: engine,
-        filter: NEWEST_INSTANCES
-    });
-    return useMemo(() => {
-        const rows = instances ?? [];
-        return {
-            inFlight: rows.filter(instance => terminalState(instance) === "in-flight"),
-            settled: rows.filter(instance => terminalState(instance) !== "in-flight"),
-            truncated: rows.length + unreadable.length === INSTANCE_CAP,
-            loading: loading,
-            unreadable: unreadable
-        };
-    }, [ instances, loading, unreadable ]);
-}
-
 function TasksTab({filterSlot: filterSlot, instances: instances, loading: loading, identity: identity, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, segment: segment, truncated: truncated, unreadable: unreadable}) {
     const mineOnly = segment === "for-me", {binding: binding} = useWorkflowContext(), bands = useBandOpenState({
         segment: segment,
@@ -2011,21 +4025,38 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
     }), [filters, setFilters] = useState({}), groups = useMemo(() => deriveTaskGroups({
         instances: instances,
         identity: identity
-    }), [ instances, identity ]), orphans = useOrphanedWorkflows(groups), listed = useMemo(() => hideOrphanedGroups(groups, orphans.groupKeys), [ groups, orphans.groupKeys ]), options = useMemo(() => taskFilterOptions(listed), [ listed ]), visible = useMemo(() => {
+    }), [ instances, identity ]), orphans = useOrphanedWorkflows(groups), listed = useMemo(() => hideOrphanedGroups(groups, orphans.groupKeys), [ groups, orphans.groupKeys ]), options = useMemo(() => taskFilterOptions(listed), [ listed ]), titles = useGroupTitles(listed), revealed = useRevealGate({
+        loading: loading,
+        ready: titles.ready
+    }), visible = useMemo(() => {
         const filtered = applyTaskFilters({
             groups: listed,
             filters: filters,
             now: /* @__PURE__ */ new Date
-        });
-        return mineOnly ? onlyMyTasks(filtered) : filtered;
-    }, [ listed, filters, mineOnly ]);
-    return loading ? 
-    /* @__PURE__ */ jsx(Box, {
-        paddingLeft: 2,
+        }), cut = mineOnly ? onlyMyTasks(filtered) : filtered;
+        return orderGroupsByPreviewTitle(cut, titles.titles);
+    }, [ listed, filters, mineOnly, titles ]);
+    if (loading || !revealed) /* @__PURE__ */
+    return jsx(TabStatusRow, {
         children: /* @__PURE__ */ jsx(LoadingRow, {
             label: "Loading tasks…"
         })
-    }) : /* @__PURE__ */ jsxs(Box, {
+    });
+    const empty = visible.withDocuments.length === 0 && visible.withoutDocuments.length === 0;
+    let body;
+    return empty ? mineOnly ? body = /* @__PURE__ */ jsx(ForMeEmptyState, {}) : body = /* @__PURE__ */ jsx(EmptyState, {
+        description: "Adjust the filters, or start a workflow",
+        icon: /* @__PURE__ */ jsx(SearchIcon, {}),
+        title: "No tasks match"
+    }) : body = /* @__PURE__ */ jsx(TaskGroupList, {
+        bands: bands,
+        groups: visible,
+        onOpenTask: onOpenTask,
+        onOpenWorkflow: onOpenWorkflow,
+        showTerminalActions: mineOnly
+    }), /* @__PURE__ */ jsxs(Flex, {
+        direction: "column",
+        flex: 1,
         children: [ 
         /* @__PURE__ */ jsx(FilterRowPortal, {
             filters: filters,
@@ -2033,91 +4064,133 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
             options: options,
             slot: filterSlot
         }), 
-        /* @__PURE__ */ jsxs(Stack, {
+        /* @__PURE__ */ jsxs(Flex, {
+            direction: "column",
+            flex: 1,
             gap: 2,
+            paddingBottom: 4,
             children: [ 
             /* @__PURE__ */ jsx(UnreadableDocsNote, {
                 unreadable: unreadable
             }), 
             /* @__PURE__ */ jsx(OrphanedWorkflowsNote, {
                 orphans: orphans
-            }), 
-            /* @__PURE__ */ jsx(TaskGroupList, {
-                bands: bands,
-                groups: visible,
-                instanceDefaultOpen: instanceBandDefaultOpen(segment),
-                onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow,
-                showTerminalActions: mineOnly
-            }) ]
-        }), truncated ? /* @__PURE__ */ jsx(MutedNote, {
-            text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren't listed.`
-        }) : null ]
+            }), body, truncated ? /* @__PURE__ */ jsx(MutedNote, {
+                text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren’t listed.`
+            }) : null ]
+        }) ]
     });
 }
 
-const TOOL_TABS = [ {
-    value: "overview",
-    label: "Overview"
-}, {
-    value: "for-me",
-    label: "For me"
-} ], [firstToolTab, ...restToolTabs] = TOOL_TABS, TOOL_TAB_CODEC = workflowsTabCodec([ firstToolTab.value, ...restToolTabs.map(tab => tab.value) ]);
+const TOOL_TAB_LABELS = {
+    definitions: "Definitions",
+    documents: "Documents",
+    tasks: "Tasks",
+    "for-me": "For me"
+}, TOOL_TAB_VALUES = Object.keys(TOOL_TAB_LABELS), TOOL_TABS = TOOL_TAB_VALUES.map(value => ({
+    value: value,
+    label: TOOL_TAB_LABELS[value]
+})), DEFAULT_TOOL_TAB = "definitions";
+
+function toolTabState(tab) {
+    return tab === DEFAULT_TOOL_TAB ? {} : {
+        workflowsTab: tab
+    };
+}
 
-function useToolTab() {
-    const router = useRouter(), params = Object.fromEntries(router.state._searchParams ?? []);
+function boardState(definitionName) {
     return {
-        tab: TOOL_TAB_CODEC.read(params),
-        setTab: next => router.navigate({
-            _searchParams: definedEntries(TOOL_TAB_CODEC.write(params, next))
-        })
+        boardDefinition: definitionName
     };
 }
 
-function definedEntries(params) {
-    return Object.entries(params).filter(entry => entry[1] !== void 0);
+function tabSelectionNavigates(route, tab) {
+    return !(route.kind === "home" && tab === route.tab);
+}
+
+function backToAllLabel(tab) {
+    return `Back to all ${TOOL_TAB_LABELS[tab].toLowerCase()}`;
 }
 
-function carryingSearchParams(state, searchParams) {
-    return searchParams === void 0 ? state : {
-        ...state,
-        _searchParams: searchParams
+function toolRoute(state) {
+    const {instanceId: instanceId, definitionName: definitionName, boardDefinition: boardDefinition} = state;
+    if (typeof instanceId == "string") return {
+        kind: "instance",
+        instanceId: instanceId,
+        tab: "tasks"
+    };
+    if (typeof definitionName == "string") return {
+        kind: "definition",
+        definitionName: definitionName,
+        tab: "definitions"
+    };
+    if (typeof boardDefinition == "string") return {
+        kind: "home",
+        tab: "documents",
+        boardDefinition: boardDefinition
+    };
+    const tab = pathSegmentTab({
+        segment: state.workflowsTab,
+        tabs: TOOL_TAB_VALUES,
+        fallback: DEFAULT_TOOL_TAB
+    });
+    return tab === void 0 ? {
+        kind: "not-found",
+        tab: void 0
+    } : {
+        kind: "home",
+        tab: tab,
+        boardDefinition: void 0
     };
 }
 
+function InstanceStreamKeepAlive() {
+    return useToolInstances(), null;
+}
+
 function WorkflowsToolRoot() {
-    const router = useRouter(), {seedInstance: seedInstance} = useWorkflowContext(), {tab: tab} = useToolTab();
-    useLogEventOnMount(WorkflowToolOpened, {
-        tab: tab,
+    const router = useRouter(), {seedInstance: seedInstance} = useWorkflowContext(), telemetry = useWorkflowTelemetry(), [filterSlot, setFilterSlot] = useState(null), route = toolRoute(router.state), isHome = route.kind === "home" || route.kind === "not-found", [instanceStreamLatched, setInstanceStreamLatched] = useState(isHome);
+    useEffect(() => {
+        isHome && setInstanceStreamLatched(!0);
+    }, [ isHome ]);
+    const setTab = next => router.navigate(toolTabState(next)), selectBoardWorkflow = useCallback((name, opts) => router.navigate(boardState(name), opts?.replace === !0 ? {
+        replace: !0
+    } : {}), [ router ]), backToList = tab => ({
+        label: backToAllLabel(tab),
+        go: () => setTab(tab)
+    }), badSegment = route.kind === "not-found";
+    useEffect(() => {
+        badSegment && router.navigate({}, {
+            replace: !0
+        });
+    }, [ badSegment, router ]), useLogEventOnMount(WorkflowToolOpened, {
+        tab: route.tab ?? "not-found",
         via: "open"
     });
-    const instanceId = typeof router.state.instanceId == "string" ? router.state.instanceId : void 0;
-    return instanceId ? /* @__PURE__ */ jsx(WorkflowInstanceDetail, {
-        instanceId: instanceId,
-        onBack: () => router.navigate(carryingSearchParams({}, router.state._searchParams))
-    }, instanceId) : /* @__PURE__ */ jsx(WorkflowsHome, {
+    let panel;
+    return route.kind === "instance" ? panel = /* @__PURE__ */ jsx(WorkflowInstanceDetail, {
+        instanceId: route.instanceId,
+        backToList: backToList(route.tab)
+    }, route.instanceId) : route.kind === "definition" ? panel = /* @__PURE__ */ jsx(DefinitionDetail, {
+        definitionName: route.definitionName,
+        backToList: backToList(route.tab)
+    }, route.definitionName) : route.kind === "not-found" ? panel = null : panel = /* @__PURE__ */ jsx(WorkflowsHome, {
+        boardDefinition: route.boardDefinition,
+        filterSlot: filterSlot,
+        onOpenDefinition: name => router.navigate({
+            definitionName: name
+        }),
         onOpenInstance: instance => {
-            typeof instance != "string" && seedInstance(instance), router.navigate(carryingSearchParams({
+            typeof instance != "string" && seedInstance(instance), router.navigate({
                 instanceId: typeof instance == "string" ? instance : instance._id
-            }, router.state._searchParams));
-        }
-    });
-}
-
-function WorkflowsHome({onOpenInstance: onOpenInstance}) {
-    const {tab: tab, setTab: setTab} = useToolTab(), telemetry = useWorkflowTelemetry(), instances = useToolInstances(), identity = useAssignmentIdentity(), [openTask, setOpenTask] = useState(null), openInstance = target => {
-        if (typeof target != "string") return onOpenInstance(target);
-        const held = [ ...instances.inFlight, ...instances.settled ].find(i => i._id === target);
-        onOpenInstance(held ?? target);
-    }, [filterSlot, setFilterSlot] = useState(null), scrollerRef = useRef(null);
-    return useEffect(() => {
-        scrollerRef.current?.scrollTo({
-            top: 0
-        });
-    }, [ tab ]), 
+            });
+        },
+        onSelectWorkflow: selectBoardWorkflow,
+        tab: route.tab
+    }), 
     /* @__PURE__ */ jsxs(Card, {
         height: "fill",
-        children: [ 
+        children: [ instanceStreamLatched ? /* @__PURE__ */ jsx(InstanceStreamKeepAlive, {}) : null, 
         /* @__PURE__ */ jsxs(Flex, {
             direction: "column",
             height: "fill",
@@ -2126,75 +4199,103 @@ function WorkflowsHome({onOpenInstance: onOpenInstance}) {
             /* @__PURE__ */ jsx(Box, {
                 flex: "none",
                 padding: 3,
-                children: /* @__PURE__ */ jsx(Container, {
-                    width: 2,
-                    children: /* @__PURE__ */ jsxs(Stack, {
+                children: /* @__PURE__ */ jsxs(Stack, {
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsxs(Flex, {
+                        align: "center",
                         gap: 3,
+                        paddingLeft: 2,
                         children: [ 
-                        /* @__PURE__ */ jsxs(Flex, {
-                            align: "center",
-                            gap: 3,
-                            paddingLeft: 2,
-                            children: [ 
-                            /* @__PURE__ */ jsx(Text, {
-                                size: 2,
-                                weight: "semibold",
-                                children: "Workflows"
-                            }), 
-                            /* @__PURE__ */ jsx(Box, {
-                                flex: 1
-                            }), 
-                            /* @__PURE__ */ jsx(NewWorkflowButton, {}) ]
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 1,
+                            weight: "semibold",
+                            children: "Workflows"
                         }), 
-                        /* @__PURE__ */ jsx(TabSwitch, {
-                            ariaControls: "workflows-tool-panel",
-                            idPrefix: "workflows-tool-tab",
-                            onSelect: next => {
-                                next !== tab && telemetry.log(WorkflowToolOpened, {
-                                    tab: next,
-                                    via: "tab-switch"
-                                }), setTab(next);
-                            },
-                            options: TOOL_TABS,
-                            selected: tab
+                        /* @__PURE__ */ jsx(Box, {
+                            flex: 1
                         }), 
-                        /* @__PURE__ */ jsx("div", {
-                            ref: setFilterSlot
-                        }) ]
-                    })
+                        /* @__PURE__ */ jsx(NewWorkflowButton, {}) ]
+                    }), 
+                    /* @__PURE__ */ jsx(TabSwitch, {
+                        ariaControls: "workflows-tool-panel",
+                        idPrefix: "workflows-tool-tab",
+                        onSelect: next => {
+                            tabSelectionNavigates(route, next) && (next !== route.tab && telemetry.log(WorkflowToolOpened, {
+                                tab: next,
+                                via: "tab-switch"
+                            }), setTab(next));
+                        },
+                        options: TOOL_TABS,
+                        selected: route.tab
+                    }), 
+                    /* @__PURE__ */ jsx("div", {
+                        ref: setFilterSlot
+                    }) ]
                 })
             }), 
             /* @__PURE__ */ jsx(Box, {
-                ref: scrollerRef,
                 flex: 1,
-                overflow: "auto",
-                paddingX: 3,
+                overflow: "hidden",
+                children: panel
+            }) ]
+        }) ]
+    });
+}
+
+function WorkflowsHome({boardDefinition: boardDefinition, filterSlot: filterSlot, onOpenDefinition: onOpenDefinition, onOpenInstance: onOpenInstance, onSelectWorkflow: onSelectWorkflow, tab: tab}) {
+    const instances = useToolInstances(), identity = useAssignmentIdentity(), [openTask, setOpenTask] = useState(null), openInstance = target => {
+        if (typeof target != "string") return onOpenInstance(target);
+        const held = [ ...instances.inFlight, ...instances.settled ].find(i => i._id === target);
+        onOpenInstance(held ?? target);
+    }, scrollerRef = useRef(null);
+    useEffect(() => {
+        scrollerRef.current?.scrollTo({
+            top: 0
+        });
+    }, [ tab ]);
+    const bleeds = tab === "documents";
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        children: [ 
+        /* @__PURE__ */ jsx(Box, {
+            ref: scrollerRef,
+            flex: 1,
+            overflow: "auto",
+            paddingX: bleeds ? 0 : TOOL_PANEL_PADDING,
+            style: {
+                scrollbarGutter: bleeds ? "auto" : "stable"
+            },
+            children: /* @__PURE__ */ jsx(TabPanel, {
+                "aria-labelledby": `workflows-tool-tab-${tab}`,
+                id: "workflows-tool-panel",
                 style: {
-                    scrollbarGutter: "stable"
+                    display: "flex",
+                    flexDirection: "column",
+                    minHeight: "100%"
                 },
-                children: /* @__PURE__ */ jsx(Container, {
-                    width: 2,
-                    children: /* @__PURE__ */ jsx(TabPanel, {
-                        "aria-labelledby": `workflows-tool-tab-${tab}`,
-                        id: "workflows-tool-panel",
-                        children: /* @__PURE__ */ jsx(Box, {
-                            paddingBottom: 4,
-                            paddingTop: 1,
-                            children: /* @__PURE__ */ jsx(TasksTab, {
-                                filterSlot: filterSlot,
-                                identity: identity,
-                                instances: [ ...instances.inFlight, ...instances.settled ],
-                                loading: instances.loading,
-                                onOpenTask: setOpenTask,
-                                onOpenWorkflow: openInstance,
-                                segment: tab,
-                                truncated: instances.truncated,
-                                unreadable: instances.unreadable
-                            })
-                        })
+                children: /* @__PURE__ */ jsx(Flex, {
+                    direction: "column",
+                    flex: 1,
+                    style: {
+                        minHeight: 0
+                    },
+                    children: /* @__PURE__ */ jsx(HomePanel, {
+                        boardDefinition: boardDefinition,
+                        filterSlot: filterSlot,
+                        identity: identity,
+                        instances: instances,
+                        onOpenDefinition: onOpenDefinition,
+                        onOpenTask: setOpenTask,
+                        onOpenWorkflow: openInstance,
+                        onSelectWorkflow: onSelectWorkflow,
+                        tab: tab
                     })
                 })
-            }) ]
+            })
         }), openTask ? /* @__PURE__ */ jsx(ToolActivityDialog, {
             onClose: () => setOpenTask(null),
             target: openTask
@@ -2202,4 +4303,25 @@ function WorkflowsHome({onOpenInstance: onOpenInstance}) {
     });
 }
 
+function HomePanel({boardDefinition: boardDefinition, filterSlot: filterSlot, identity: identity, instances: instances, onOpenDefinition: onOpenDefinition, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, onSelectWorkflow: onSelectWorkflow, tab: tab}) {
+    return tab === "definitions" ? /* @__PURE__ */ jsx(DefinitionsTab, {
+        onOpenDefinition: onOpenDefinition
+    }) : tab === "documents" ? /* @__PURE__ */ jsx(DocumentsTab, {
+        filterSlot: filterSlot,
+        onOpenDefinition: onOpenDefinition,
+        onSelectWorkflow: onSelectWorkflow,
+        routeDefinition: boardDefinition
+    }) : /* @__PURE__ */ jsx(TasksTab, {
+        filterSlot: filterSlot,
+        identity: identity,
+        instances: [ ...instances.inFlight, ...instances.settled ],
+        loading: instances.loading,
+        onOpenTask: onOpenTask,
+        onOpenWorkflow: onOpenWorkflow,
+        segment: tab,
+        truncated: instances.truncated,
+        unreadable: instances.unreadable
+    });
+}
+
 export { WorkflowsToolRoot as default };