@sanity/workflow-studio-plugin 0.23.0 → 0.24.0

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), workflowDiagram = require("@sanity/workflow-diagram"), sanity = require("sanity"), workflowEngine = require("@sanity/workflow-engine"), InfoOutline = require("@sanity/icons/InfoOutline"), pluralize = require("pluralize-esm"), workflowStudio = require("@sanity/workflow-studio"), ArrowLeft = require("@sanity/icons/ArrowLeft"), Clock = require("@sanity/icons/Clock"), Cog = require("@sanity/icons/Cog"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), Filter = require("@sanity/icons/Filter"), workflowComponents = require("@sanity/workflow-components"), endOfDay = require("date-fns/endOfDay"), reactDom = require("react-dom"), Calendar = require("@sanity/icons/Calendar");
+var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), Search = require("@sanity/icons/Search"), workflowEngine = require("@sanity/workflow-engine"), ChevronDown = require("@sanity/icons/ChevronDown"), Inline = require("@sanity/icons/Inline"), StackCompact = require("@sanity/icons/StackCompact"), reactDom = require("react-dom"), types = require("@sanity/types"), sanity = require("sanity"), workflowStudio = require("@sanity/workflow-studio"), WarningOutline = require("@sanity/icons/WarningOutline"), workflowDiagram = require("@sanity/workflow-diagram"), ArrowLeft = require("@sanity/icons/ArrowLeft"), InfoOutline = require("@sanity/icons/InfoOutline"), Transfer = require("@sanity/icons/Transfer"), pluralize = require("pluralize-esm"), Clock = require("@sanity/icons/Clock"), Cog = require("@sanity/icons/Cog"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), Filter = require("@sanity/icons/Filter"), workflowComponents = require("@sanity/workflow-components"), endOfDay = require("date-fns/endOfDay"), Calendar = require("@sanity/icons/Calendar");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -22,25 +22,1235 @@ function MutedNote({text: text}) {
     });
 }
 
+function TabStatusRow({children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        paddingLeft: 2,
+        paddingY: 3,
+        children: children
+    });
+}
+
+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 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: {}
+    });
+    let held = initial.entries ?? {}, toggles = togglesOf(held);
+    const subscribers = index.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 = react.useMemo(() => createBandStateStore({
+        storageKey: bandStateStorageKey(scope)
+    }), [ scope ]);
+    return react.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: react.useSyncExternalStore(store.subscribe, react.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} = index.useWorkflowContext(), [definitions, setDefinitions] = react.useState(() => lastRead.get(engine)?.rows), [error, setError] = react.useState(void 0);
+    return react.useEffect(() => {
+        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 index.readDeployedDefinitions(engine), latest = workflowEngine.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(index.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 = index.useDelayedFlag(!loading && !ready, REVEAL_MAX_WAIT_MS), [revealed, setRevealed] = react.useState(!1);
+    return react.useEffect(() => {
+        !revealed && (settled || expired) && setRevealed(!0);
+    }, [ expired, revealed, settled ]), revealed || settled || expired;
+}
+
+function documentRefsOf(instance) {
+    const seen = /* @__PURE__ */ new Map;
+    for (const ref of workflowEngine.entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
+    return [ ...seen.values() ];
+}
+
+function 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: index.instanceTitle(instance, index.definitionSnapshotOf(instance))
+    };
+}
+
+function boardRuns(instances) {
+    return instances.filter(instance => workflowEngine.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: index.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
+        })
+    };
+}
+
+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__ */ jsxRuntime.jsx(InstanceFace, {
+        size: size,
+        title: card.face.title
+    }) : /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
+        gdr: card.face.document,
+        layout: "row",
+        source: "board-card"
+    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+        border: !0,
+        radius: 3,
+        children: card.face.kind === "instance" ? /* @__PURE__ */ jsxRuntime.jsx(InstanceFace, {
+            size: size,
+            title: card.face.title
+        }) : /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
+            gdr: card.face.document,
+            layout: "bare",
+            source: "board-card"
+        })
+    });
+}
+
+function InstanceFace({size: size, title: title}) {
+    const fill = size === "slim";
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        padding: fill ? index.chipPadding(!0) : index.NOTICE_PADDING,
+        style: fill ? {
+            width: "100%"
+        } : {},
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            textOverflow: "ellipsis",
+            weight: "medium",
+            children: title
+        })
+    });
+}
+
+function StageGroupHeading({group: group}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(index.CountedLabel, {
+            count: group.cards.length,
+            label: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                weight: "medium",
+                children: group.title
+            })
+        }), group.retired ? 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.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 jsxRuntime.jsxs(ui.Box, {
+        flex: "none",
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+            width: COLUMN_WIDTH
+        },
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+            "aria-hidden": !0,
+            radius: 3,
+            style: {
+                inset: 0,
+                maskImage: PANEL_FADE,
+                position: "absolute",
+                WebkitMaskImage: PANEL_FADE
+            },
+            tone: "transparent"
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: "none",
+            paddingX: 3,
+            paddingY: 4,
+            style: {
+                position: "relative"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(StageGroupHeading, {
+                group: group
+            })
+        }), group.cards.length === 0 ? 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            flex: 1,
+            justify: "center",
+            padding: 2,
+            style: {
+                position: "relative"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: BOARD_EMPTY_STAGE_NOTE
+            })
+        }) : 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: 1,
+            overflow: "auto",
+            paddingBottom: 2,
+            paddingX: 2,
+            style: {
+                minHeight: 0,
+                position: "relative"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+                gap: 1,
+                children: group.cards.map(card => /* @__PURE__ */ jsxRuntime.jsx(BoardCard, {
+                    card: card,
+                    size: "block"
+                }, card.instanceId))
+            })
+        }) ]
+    });
+}
+
+function StageGroups({board: board}) {
+    const topGap = index.useSpaceToken(TOOL_PANEL_PADDING);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        flex: 1,
+        style: {
+            minHeight: 0,
+            position: "relative"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            style: {
+                bottom: 0,
+                left: 0,
+                overflowX: "auto",
+                overflowY: "hidden",
+                position: "absolute",
+                right: 0,
+                top: topGap
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                align: "stretch",
+                gap: 2,
+                paddingX: TOOL_PANEL_PADDING,
+                style: {
+                    boxSizing: "border-box",
+                    height: "100%",
+                    width: "max-content"
+                },
+                children: board.groups.map(group => /* @__PURE__ */ jsxRuntime.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 = index.useRadiusToken(PICKER_RADIUS) - 1;
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Card, {
+        border: !0,
+        radius: PICKER_RADIUS,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                paddingLeft: 2,
+                paddingRight: 2,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    children: "Workflow"
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+                button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    fontSize: 1,
+                    gap: 2,
+                    iconRight: ChevronDown.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__ */ jsxRuntime.jsx(ui.Menu, {
+                    children: options.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.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: Inline.InlineIcon,
+        label: "Show as boards"
+    },
+    stack: {
+        icon: StackCompact.StackCompactIcon,
+        label: "Show as list"
+    }
+};
+
+function LayoutToggle({layout: layout, onChange: onChange}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Flex, {
+        align: "center",
+        gap: 1,
+        children: BOARD_LAYOUTS.map(value => {
+            const {icon: icon, label: label} = LAYOUT_LABELS[value];
+            /* @__PURE__ */
+            return jsxRuntime.jsx(index.HoverHint, {
+                text: label,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.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} = router.useRouter();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.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 ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(WorkflowPicker, {
+            face: face,
+            onSelect: onSelectWorkflow,
+            options: options
+        }), definitionName === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(DefinitionLink, {
+            name: definitionName,
+            onOpen: onOpenDefinition
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: 1
+        }), 
+        /* @__PURE__ */ jsxRuntime.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,
+        ...index.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 jsxRuntime.jsx(index.CollapsibleBand, {
+        background: !0,
+        onToggle: toggle,
+        open: open,
+        sticky: !0,
+        title: group.title,
+        header: /* @__PURE__ */ jsxRuntime.jsx(StageGroupHeading, {
+            group: group
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+            gap: 1,
+            paddingLeft: 5,
+            children: group.cards.length === 0 ? 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                padding: 3,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    children: BOARD_EMPTY_STAGE_NOTE
+                })
+            }) : group.cards.map(card => /* @__PURE__ */ jsxRuntime.jsx(BoardCard, {
+                card: card,
+                size: "slim"
+            }, card.instanceId))
+        })
+    });
+}
+
+function BoardStack({bands: bands, board: board}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Stack, {
+        gap: 1,
+        paddingBottom: 4,
+        paddingTop: 3,
+        paddingX: TOOL_PANEL_PADDING,
+        children: board.groups.map(group => /* @__PURE__ */ jsxRuntime.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 (types.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 [index2, segment] of segments.entries()) {
+        const step = stepOf({
+            parent: parent,
+            segment: segment,
+            terminal: index2 === 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(types2) {
+    const seedable = /* @__PURE__ */ new Map, arms = [];
+    for (const type of types2) {
+        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 ])), types2 = 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: types2,
+        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 = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), {perspectiveStack: perspectiveStack} = sanity.usePerspective(), {actualTypes: actualTypes, binding: binding} = index.useWorkflowContext(), [state, setState] = react.useState(NO_TITLES), key = documents.map(doc => doc.id).join("|");
+    return react.useEffect(() => {
+        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, previews = /* @__PURE__ */ new Map, publish = () => setState({
+            titles: new Map(titles),
+            resolved: new Set(resolved)
+        }), localDocs = documents.flatMap(doc => {
+            const {parsed: parsed, local: local} = index.gdrLocality(doc.id, binding.contentResource);
+            return !parsed || !local ? (resolved.add(doc.id), []) : [ {
+                doc: doc,
+                bareId: parsed.documentId
+            } ];
+        }), untracks = localDocs.map(({bareId: bareId}) => actualTypes.track(bareId)), dropPreview = docId => {
+            previews.get(docId)?.unsubscribe(), previews.delete(docId), titles.delete(docId);
+        }, observe = ({docId: docId, bareId: bareId, typeName: typeName}) => {
+            const schemaType = index.openableSchemaType(schema, typeName);
+            if (!schemaType) return !1;
+            if (previews.get(docId)?.typeName === typeName) return !0;
+            dropPreview(docId), resolved.delete(docId);
+            const subscription = previewStore.observeForPreview({
+                _id: bareId,
+                _type: schemaType.name
+            }, schemaType, {
+                perspective: perspectiveStack
+            }).subscribe({
+                next: event => {
+                    resolved.add(docId);
+                    const title = event.snapshot?.title;
+                    typeof title == "string" ? titles.set(docId, title) : titles.delete(docId), publish();
+                },
+                error: err => {
+                    console.error(`[workflow-studio-plugin] preview for "${docId}" failed:`, err), resolved.add(docId), 
+                    publish();
+                }
+            });
+            return previews.set(docId, {
+                typeName: typeName,
+                unsubscribe: () => subscription.unsubscribe()
+            }), !0;
+        }, evaluate = () => {
+            for (const {doc: doc, bareId: bareId} of localDocs) {
+                const probe = actualTypes.read(bareId);
+                if (probe === null) {
+                    dropPreview(doc.id), resolved.add(doc.id);
+                    continue;
+                }
+                !observe({
+                    docId: doc.id,
+                    bareId: bareId,
+                    typeName: probe ?? doc.type
+                }) && typeof probe == "string" && (dropPreview(doc.id), resolved.add(doc.id));
+            }
+            publish();
+        }, unsubscribeProbes = actualTypes.subscribe(evaluate);
+        return evaluate(), () => {
+            unsubscribeProbes(), untracks.forEach(untrack => untrack()), previews.forEach(preview => preview.unsubscribe());
+        };
+    }, [ key, previewStore, schema, actualTypes, binding.contentResource.id, perspectiveStack.join("|") ]), 
+    state;
+}
+
+function usePreviewSeed(documents) {
+    const client = sanity.useClient({
+        apiVersion: index.WORKFLOW_API_VERSION
+    }), schema = sanity.useSchema(), {perspectiveStack: perspectiveStack} = sanity.usePerspective(), {actualTypes: actualTypes, binding: binding} = index.useWorkflowContext(), [seed, setSeed] = react.useState(NO_TITLES), docs = react.useMemo(() => documents.flatMap(doc => {
+        const {parsed: parsed, local: local} = index.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 react.useEffect(() => {
+        if (setSeed(NO_TITLES), key === "") return;
+        const plan = planTitleSeed(schema.getTypeNames().flatMap(name => index.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 = workflowReact.useWorkflowTelemetry(), warned = react.useRef(/* @__PURE__ */ new Set);
+    return react.useEffect(() => {
+        const fresh = titleDrift(seed, live).filter(drift => !warned.current.has(drift.gdrId));
+        if (fresh.length !== 0) {
+            warned.current.size === 0 && telemetry.log(index.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 ]), react.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 = react.useMemo(() => groups.withDocuments.map(group => group.document), [ groups ]), warm = react.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 = react.useMemo(() => definition ? deriveBoard({
+        instances: instances,
+        definition: definition
+    }) : void 0, [ definition, instances ]), documents = react.useMemo(() => derived ? boardDocuments(derived) : NO_DOCUMENTS, [ derived ]), {titles: titles, ready: ready} = useSeededTitles({
+        ordering: documents,
+        warm: documents
+    }), board = react.useMemo(() => derived ? orderBoardByPreviewTitle(derived, titles) : void 0, [ derived, titles ]);
+    return react.useMemo(() => ({
+        board: board,
+        ready: ready
+    }), [ board, ready ]);
+}
+
+const INSTANCE_CAP = 200;
+
+function useCappedInstances(filter) {
+    const {engine: engine} = index.useWorkflowContext(), capped = react.useMemo(() => ({
+        ...filter,
+        limit: INSTANCE_CAP
+    }), [ filter ]), {instances: instances, loading: loading, unreadable: unreadable} = workflowStudio.useWorkflowInstances({
+        engine: engine,
+        filter: capped
+    });
+    return react.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 = react.useMemo(() => definitionName === void 0 ? NOTHING : {
+        definition: definitionName,
+        includeCompleted: !0
+    }, [ definitionName ]);
+    return useCappedInstances(filter);
+}
+
+function useBoardLayout(scope) {
+    const store = react.useMemo(() => createBoardLayoutStore({
+        storageKey: boardLayoutStorageKey(scope)
+    }), [ scope ]), [held, setHeld] = react.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} = index.useWorkflowContext(), telemetry = workflowReact.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);
+    react.useEffect(() => {
+        landing !== void 0 && onSelectWorkflow(landing, {
+            replace: !0
+        });
+    }, [ landing, onSelectWorkflow ]);
+    const selectedPayload = boardSelectedPayload(selection);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        flex: 1,
+        style: {
+            minHeight: 0
+        },
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(BoardControlsPortal, {
+            definitionName: selected?.name,
+            layout: layout,
+            onOpenDefinition: onOpenDefinition,
+            onChangeLayout: next => {
+                next !== layout && (telemetry.log(index.WorkflowBoardLayoutChanged, {
+                    layout: next
+                }), setLayout(next));
+            },
+            onSelectWorkflow: onSelectWorkflow,
+            options: boardWorkflowOptions(definitions ?? []),
+            face: boardPickerFace({
+                selection: selection,
+                routeName: routeDefinition
+            }),
+            slot: filterSlot
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            direction: "column",
+            flex: 1,
+            gap: 2,
+            style: {
+                minHeight: 0
+            },
+            children: [ instances.unreadable.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                paddingX: TOOL_PANEL_PADDING,
+                children: /* @__PURE__ */ jsxRuntime.jsx(index.UnreadableDocsNote, {
+                    unreadable: instances.unreadable
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(BoardBody, {
+                bands: bands,
+                board: board,
+                error: error,
+                layout: layout,
+                loading: !revealed,
+                selection: selection
+            }), instances.truncated ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                paddingX: TOOL_PANEL_PADDING,
+                children: /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+                    text: BOARD_CAP_NOTE
+                })
+            }) : null ]
+        }), selectedPayload === void 0 ? null : 
+        /* @__PURE__ */ jsxRuntime.jsx(index.LogEventOnMount, {
+            data: selectedPayload,
+            event: index.WorkflowBoardWorkflowSelected
+        }, selected?.name) ]
+    });
+}
+
+function BoardBody({bands: bands, board: board, error: error, layout: layout, loading: loading, selection: selection}) {
+    return error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(StatusBox, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+            text: `Could not load the deployed workflows: ${error}`
+        })
+    }) : selection.kind === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBox, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+                label: "Loading workflows…"
+            })
+        })
+    }) : selection.kind === "empty" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBox, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.EmptyState, {
+            description: "Deploy a workflow to see its documents here",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {}),
+            title: "No workflows deployed"
+        })
+    }) : selection.kind === "unknown" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBox, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.EmptyState, {
+            description: `No deployed workflow is named “${selection.name}” — pick one above`,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {}),
+            title: "Workflow not found"
+        })
+    }) : loading || board === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(StatusBox, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+                label: "Loading documents…"
+            })
+        })
+    }) : layout === "stack" ? /* @__PURE__ */ jsxRuntime.jsx(BoardStack, {
+        bands: bands,
+        board: board
+    }) : /* @__PURE__ */ jsxRuntime.jsx(StageGroups, {
+        board: board
+    });
+}
+
+function StatusBox({children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.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)) ]
-    })).sort((a, b) => a.title.localeCompare(b.title) || a.name.localeCompare(b.name));
+        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: index.mappingIssueDetail(issue)
+        })).sort((a, b) => a.docType.localeCompare(b.docType))
+    })).sort(byTitleThenName);
+}
+
+function undeployedWorkflowNotices(args) {
+    return [ ...args.issues.values() ].filter(index.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((a, b) => a.title.localeCompare(b.title) || a.name.localeCompare(b.name));
+    })).sort(byTitleThenName);
 }
 
 function startPhrase(definition) {
-    if (definition.lifecycle === "child") return "Spawned by a parent workflow";
+    if (definition.lifecycle === "child") return "Started by a parent workflow";
     if (workflowEngine.startKindOf(definition) === "autonomous") return "Starts automatically";
     const subject = (definition.fields ?? []).find(workflowEngine.isSubjectEntry);
     return subject !== void 0 && workflowEngine.isInputSourced(subject) ? "Started manually, from a document" : "Started manually";
@@ -50,6 +1260,37 @@ 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 = index.formatTimeAgo(deployedAt);
+    return ago === "" ? index.formatShortDateTime(deployedAt) : `${index.formatShortDateTime(deployedAt)} (${ago})`;
+}
+
+function DetailNotFound({back: back, message: message}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 4,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: message
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                fontSize: 1,
+                gap: 2,
+                icon: ArrowLeft.ArrowLeftIcon,
+                mode: "ghost",
+                onClick: back.go,
+                padding: 2,
+                text: back.label
+            })
+        }) ]
+    });
+}
+
 function DetailTitle({busy: busy = !1, documentGdr: documentGdr, title: title}) {
     const chipPullback = -index.useSpaceToken(1);
     /* @__PURE__ */
@@ -84,7 +1325,8 @@ function DetailTitle({busy: busy = !1, documentGdr: documentGdr, title: title})
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
                     gdr: documentGdr,
-                    layout: "inline"
+                    layout: "inline",
+                    source: "detail-title"
                 })
             }) ]
         }), 
@@ -94,46 +1336,59 @@ function DetailTitle({busy: busy = !1, documentGdr: documentGdr, title: title})
     });
 }
 
-const lastRead = /* @__PURE__ */ new WeakMap, issuedReads = /* @__PURE__ */ new WeakMap;
+const INSTANCE_CAP_COUNT_NOTE = `Counts from the latest ${INSTANCE_CAP} workflows — older ones aren’t counted.`, NEWEST_INSTANCES = {
+    includeCompleted: !0
+};
 
-function useDeployedDefinitions() {
-    const {engine: engine} = index.useWorkflowContext(), [definitions, setDefinitions] = react.useState(() => lastRead.get(engine)?.rows), [error, setError] = react.useState(void 0);
-    return react.useEffect(() => {
-        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 index.readDeployedDefinitions(engine), latest = workflowEngine.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(index.describeError(err));
-        }), () => {
-            cancelled = !0;
-        };
-    }, [ engine ]), {
-        definitions: definitions,
-        error: error
-    };
+function useToolInstances() {
+    const {rows: rows, truncated: truncated, loading: loading, unreadable: unreadable} = useCappedInstances(NEWEST_INSTANCES);
+    return react.useMemo(() => ({
+        inFlight: rows.filter(instance => workflowEngine.terminalState(instance) === "in-flight"),
+        settled: rows.filter(instance => workflowEngine.terminalState(instance) !== "in-flight"),
+        truncated: truncated,
+        loading: loading,
+        unreadable: unreadable
+    }), [ rows, truncated, loading, unreadable ]);
 }
 
-function DefinitionDetail({definitionName: definitionName}) {
-    const {definitions: definitions, error: error} = useDeployedDefinitions(), snapshotWidth = index.useContainerToken(2), definition = definitions?.find(row => row.name === definitionName);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
+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__ */ jsxRuntime.jsx(index.LogEventOnMount, {
+        data: {
+            found: definition !== void 0,
+            ...index.definitionFingerprint(definition)
+        },
+        event: index.WorkflowDefinitionDetailViewed
+    });
+    return !loading && error === void 0 && definition === void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
+        paddingX: 3,
+        children: [ viewed, 
+        /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(DetailNotFound, {
+                back: backToList,
+                message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [ "Unable to find a definition with name “", 
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", {
+                        children: definitionName
+                    }), "”." ]
+                })
+            })
+        }) ]
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         direction: "column",
         height: "fill",
         overflow: "hidden",
-        children: [ 
+        children: [ viewed, 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             flex: "none",
             paddingBottom: 2,
             paddingTop: 3,
             paddingX: 3,
-            children: /* @__PURE__ */ jsxRuntime.jsx(DetailTitle, {
-                busy: definitions === void 0 && error === void 0,
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                paddingLeft: 2,
+                children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+                    label: "Loading definition…"
+                })
+            }) : /* @__PURE__ */ jsxRuntime.jsx(DetailTitle, {
                 title: definition?.title ?? definitionName
             })
         }), 
@@ -141,125 +1396,176 @@ function DefinitionDetail({definitionName: definitionName}) {
             flex: 1,
             overflow: "auto",
             paddingX: 3,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                direction: "column",
                 paddingBottom: 5,
                 paddingLeft: 2,
-                paddingTop: 2,
+                paddingTop: 4,
                 style: {
-                    maxWidth: snapshotWidth
+                    boxSizing: "border-box",
+                    minHeight: "100%"
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(DefinitionBody, {
                     definition: definition,
-                    error: error,
-                    loaded: definitions !== void 0
+                    error: error
                 })
             })
         }) ]
     });
 }
 
-function DefinitionBody({definition: definition, error: error, loaded: loaded}) {
+function DefinitionBody({definition: definition, error: error}) {
     return error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
         text: `Could not load the deployed workflows: ${error}`
-    }) : loaded ? definition === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-        text: "No deployed workflow definition with this name — it may have been retracted."
-    }) : /* @__PURE__ */ jsxRuntime.jsx(DefinitionFacts, {
+    }) : definition === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(DefinitionFacts, {
         definition: definition
-    }) : /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
-        label: "Loading definition…"
+    });
+}
+
+function SetupIssues({bindings: bindings}) {
+    const schema = sanity.useSchema();
+    return bindings.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+        padding: 3,
+        radius: 3,
+        tone: "caution",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "flex-start",
+            gap: 3,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                children: /* @__PURE__ */ jsxRuntime.jsx(WarningOutline.WarningOutlineIcon, {})
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                flex: 1,
+                gap: 3,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    size: 1,
+                    weight: "semibold",
+                    children: "Setup issue"
+                }), bindings.map(binding => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    size: 1,
+                    children: `${schema.get(binding.docType)?.title ?? binding.docType}: ${binding.detail}.`
+                }, binding.docType)), 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.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 {binding: binding, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), deployedAt = deployedAtOf(definition), [row] = definitionCatalog({
+    const {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), snapshotWidth = index.useContainerToken(2), [row] = definitionCatalog({
         definitions: [ definition ],
         mappings: mappings,
-        inFlight: []
+        inFlight: instances.inFlight,
+        issues: mappingIssues
     }), runsOn = docTypeLabels(row?.docTypes ?? [], name => schema.get(name)?.title).map(docType => docType.title);
     /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Stack, {
+    return jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        flex: 1,
         gap: 4,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
-            label: "Deployed",
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                size: 1,
-                children: [ deployedAt === void 0 ? `v${definition.version}` : index.formatDate(deployedAt), " ·", " ", binding.tag ]
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
-            label: "Trigger",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                children: startPhrase(definition)
+        children: [ row === void 0 || row.brokenBindings.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: "none",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SetupIssues, {
+                bindings: row.brokenBindings
             })
         }), 
-        /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
-            label: "Document types",
-            children: runsOn.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: "No document types in this Studio"
-            }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                children: runsOn.join(", ")
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: "none",
+            style: {
+                maxWidth: snapshotWidth
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                gap: 4,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
+                    label: "Deployed",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        size: 1,
+                        children: deployedPhrase(definition)
+                    })
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
+                    label: "Active instances",
+                    children: instances.loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        muted: !0,
+                        size: 1,
+                        children: "—"
+                    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                        gap: 2,
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            size: 1,
+                            children: row?.activeCount ?? 0
+                        }), instances.truncated ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            muted: !0,
+                            size: 1,
+                            children: INSTANCE_CAP_COUNT_NOTE
+                        }) : null ]
+                    })
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
+                    label: "Trigger",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        size: 1,
+                        children: startPhrase(definition)
+                    })
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
+                    label: "Document types",
+                    children: runsOn.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        muted: !0,
+                        size: 1,
+                        children: "No document types in this Studio"
+                    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        size: 1,
+                        children: runsOn.join(", ")
+                    })
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
+                    label: "Description",
+                    children: definition.description === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        muted: !0,
+                        size: 1,
+                        children: /* @__PURE__ */ jsxRuntime.jsx("em", {
+                            children: "No description"
+                        })
+                    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        size: 1,
+                        style: {
+                            whiteSpace: "pre-wrap"
+                        },
+                        children: definition.description
+                    })
+                }) ]
             })
         }), 
-        /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
-            label: "Description",
-            children: definition.description === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: /* @__PURE__ */ jsxRuntime.jsx("em", {
-                    children: "No description"
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            direction: "column",
+            flex: 1,
+            style: {
+                minHeight: 340
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
+                fillHeight: !0,
+                label: "Stages",
+                children: /* @__PURE__ */ jsxRuntime.jsx(workflowDiagram.WorkflowDiagram, {
+                    definition: definition,
+                    explain: !0,
+                    fill: !0,
+                    height: "100%"
                 })
-            }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                style: {
-                    whiteSpace: "pre-wrap"
-                },
-                children: definition.description
             })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(workflowDiagram.WorkflowDiagram, {
-            definition: definition,
-            explain: !0,
-            height: 340
         }) ]
     });
 }
 
-function TabStatusRow({children: children}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Box, {
-        paddingLeft: 2,
-        paddingY: 3,
-        children: children
-    });
-}
-
-const INSTANCE_CAP = 200, NEWEST_INSTANCES = {
-    includeCompleted: !0,
-    limit: INSTANCE_CAP
-};
-
-function useToolInstances() {
-    const {engine: engine} = index.useWorkflowContext(), {instances: instances, loading: loading, unreadable: unreadable} = workflowStudio.useWorkflowInstances({
-        engine: engine,
-        filter: NEWEST_INSTANCES
-    });
-    return react.useMemo(() => {
-        const rows = instances ?? [];
-        return {
-            inFlight: rows.filter(instance => workflowEngine.terminalState(instance) === "in-flight"),
-            settled: rows.filter(instance => workflowEngine.terminalState(instance) !== "in-flight"),
-            truncated: rows.length + unreadable.length === INSTANCE_CAP,
-            loading: loading,
-            unreadable: unreadable
-        };
-    }, [ instances, loading, unreadable ]);
-}
-
 const MAX_VISIBLE_DOC_TYPES = 4, COLUMNS = {
     definition: 6,
     instances: 2,
@@ -276,7 +1582,12 @@ function Col({flex: flex, children: children}) {
 }
 
 function DefinitionsTab({onOpenDefinition: onOpenDefinition}) {
-    const {definitions: definitions, error: error} = useDeployedDefinitions(), {mappings: mappings} = index.useWorkflowContext(), instances = useToolInstances();
+    const {definitions: definitions, error: error} = useDeployedDefinitions(), {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), undeployed = /* @__PURE__ */ jsxRuntime.jsx(UndeployedWorkflows, {
+        notices: undeployedWorkflowNotices({
+            issues: mappingIssues,
+            titleOf: name => schema.get(name)?.title
+        })
+    });
     if (error !== void 0) /* @__PURE__ */
     return jsxRuntime.jsx(TabStatusRow, {
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
@@ -292,25 +1603,32 @@ function DefinitionsTab({onOpenDefinition: onOpenDefinition}) {
         })
     });
     if (definitions.length === 0) /* @__PURE__ */
-    return jsxRuntime.jsx(TabStatusRow, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: "No workflow definitions are deployed"
-        })
+    return jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        flex: 1,
+        gap: 3,
+        paddingBottom: 4,
+        paddingTop: 3,
+        children: [ undeployed, 
+        /* @__PURE__ */ jsxRuntime.jsx(index.EmptyState, {
+            description: "Workflow definitions deployed to this project will appear here",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Transfer.TransferIcon, {}),
+            title: "No definitions deployed"
+        }) ]
     });
     const rows = definitionCatalog({
         definitions: definitions,
         mappings: mappings,
-        inFlight: instances.inFlight
+        inFlight: instances.inFlight,
+        issues: mappingIssues
     }), active = rows.reduce((sum, row) => sum + row.activeCount, 0);
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Stack, {
         gap: 3,
         paddingBottom: 4,
-        children: [ 
+        paddingTop: 3,
+        children: [ undeployed, 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            paddingTop: 3,
             paddingX: 2,
             children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
                 align: "center",
@@ -397,7 +1715,7 @@ function DefinitionsTab({onOpenDefinition: onOpenDefinition}) {
                 }, row.name))
             }) ]
         }), instances.truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-            text: `Counts from the latest ${INSTANCE_CAP} workflows — older ones aren't counted.`
+            text: INSTANCE_CAP_COUNT_NOTE
         }) : null ]
     });
 }
@@ -406,88 +1724,277 @@ function activeSummary(active) {
     return `${pluralize__default.default("active instance", active, !0)}`;
 }
 
+const ROW_ISSUES_HINT = "This definition has issues";
+
+function UndeployedWorkflows({notices: notices}) {
+    return notices.length === 0 ? null : 
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+        gap: 2,
+        paddingBottom: 1,
+        children: notices.map(notice => /* @__PURE__ */ jsxRuntime.jsx(index.CautionNote, {
+            label: notice
+        }, notice))
+    });
+}
+
 function DefinitionRow({countPending: countPending, onOpen: onOpen, row: row}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
+    const flagged = row.brokenBindings.length > 0, card = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
         as: "button",
         onClick: onOpen,
         paddingX: 2,
         paddingY: 3,
         radius: 2,
         style: {
-            textAlign: "left"
+            textAlign: "left",
+            width: "100%"
         },
+        ...flagged ? {
+            tone: "caution"
+        } : {},
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "flex-start",
             gap: 4,
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(Col, {
                 flex: COLUMNS.definition,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                    align: "flex-start",
+                    gap: 3,
+                    paddingLeft: flagged ? 1 : 0,
+                    children: [ flagged ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        size: 1,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(WarningOutline.WarningOutlineIcon, {})
+                    }) : null, 
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                        flex: 1,
+                        gap: 3,
+                        style: {
+                            minWidth: 0
+                        },
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            size: 1,
+                            weight: "semibold",
+                            children: row.title
+                        }), row.description === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            muted: !0,
+                            size: 1,
+                            children: /* @__PURE__ */ jsxRuntime.jsx("em", {
+                                children: "No description"
+                            })
+                        }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            muted: !0,
+                            size: 1,
+                            children: row.description
+                        }) ]
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(Col, {
+                flex: COLUMNS.instances,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    children: countPending ? "—" : `${row.activeCount} active`
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(Col, {
+                flex: COLUMNS.docTypes,
+                children: /* @__PURE__ */ jsxRuntime.jsx(DocTypeChips, {
+                    docTypes: row.docTypes
+                })
+            }) ]
+        })
+    });
+    return flagged ? /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+        fill: !0,
+        text: ROW_ISSUES_HINT,
+        children: card
+    }) : card;
+}
+
+function DocTypeChips({docTypes: docTypes}) {
+    const schema = sanity.useSchema(), badgeTrim = index.useBadgeCapTrim();
+    if (docTypes.length === 0) /* @__PURE__ */
+    return jsxRuntime.jsx(ui.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 jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        style: badgeTrim,
+        wrap: "wrap",
+        children: [ shown.map(docType => 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, {
+            fontSize: 1,
+            style: {
+                minWidth: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                style: {
+                    display: "block",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                },
+                children: docType.title
+            })
+        }, docType.name)), overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.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: index.TOAST_ID.abort,
+        status: "info",
+        title: `Aborted “${title}”`
+    };
+}
+
+function abortAlreadySettledToast(title) {
+    return {
+        id: index.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: index.TOAST_ID.abort,
+        status: "warning",
+        title: `Couldn’t confirm “${args.title}” was aborted`,
+        description: `${index.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} = index.useWorkflowContext(), definition = index.useDefinition(entry), toast = index.useWorkflowToast(), [typedReason, setTypedReason] = react.useState(""), [pending, setPending] = react.useState(!1), {instance: instance} = entry, title = index.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 jsxRuntime.jsx(ui.Dialog, {
+        footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                gap: 2,
+                justify: "flex-end",
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    disabled: pending,
+                    fontSize: 1,
+                    mode: "bleed",
+                    onClick: onClose,
+                    padding: 2,
+                    text: "Cancel"
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                gap: 5,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                    size: 1,
+                    children: [ "Abort the ", 
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", {
+                        children: title
+                    }), " workflow? This cannot be undone." ]
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
                     gap: 3,
-                    style: {
-                        minWidth: 0
-                    },
                     children: [ 
                     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        as: "label",
+                        htmlFor: reasonInputId,
                         size: 1,
-                        weight: "semibold",
-                        children: row.title
-                    }), row.description === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                        muted: !0,
-                        size: 1,
-                        children: /* @__PURE__ */ jsxRuntime.jsx("em", {
-                            children: "No description"
-                        })
-                    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                        muted: !0,
-                        size: 1,
-                        children: row.description
+                        weight: "medium",
+                        children: "Reason"
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
+                        autoFocus: !0,
+                        fontSize: 1,
+                        id: reasonInputId,
+                        onChange: event => setTypedReason(event.currentTarget.value),
+                        placeholder: "Why is this workflow being stopped?",
+                        value: typedReason
                     }) ]
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(Col, {
-                flex: COLUMNS.instances,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    muted: !0,
-                    size: 1,
-                    children: countPending ? "—" : `${row.activeCount} active`
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(Col, {
-                flex: COLUMNS.docTypes,
-                children: /* @__PURE__ */ jsxRuntime.jsx(DocTypeChips, {
-                    docTypes: row.docTypes
-                })
-            }) ]
+                }) ]
+            })
         })
     });
 }
 
-function DocTypeChips({docTypes: docTypes}) {
-    const schema = sanity.useSchema(), badgeTrim = index.useBadgeCapTrim();
-    if (docTypes.length === 0) /* @__PURE__ */
-    return jsxRuntime.jsx(ui.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 jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        style: badgeTrim,
-        wrap: "wrap",
-        children: [ shown.map(docType => /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, {
-            fontSize: 1,
-            children: docType.title
-        }, docType.name)), overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-            muted: !0,
+function AbortWorkflowSection({entry: entry}) {
+    const [aborting, setAborting] = react.useState(!1);
+    return index.isLiveEntry(entry) ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        gap: 4,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
             size: 1,
-            children: [ "+", overflow, " more" ]
+            weight: "semibold",
+            children: "Manage workflow"
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                fontSize: 1,
+                mode: "ghost",
+                onClick: () => setAborting(!0),
+                padding: 2,
+                text: "Abort workflow…",
+                tone: "critical"
+            })
+        }), aborting ? /* @__PURE__ */ jsxRuntime.jsx(AbortWorkflowDialog, {
+            entry: entry,
+            onClose: () => setAborting(!1)
         }) : null ]
-    });
+    }) : null;
 }
 
 function makeTitleResolver(definition) {
@@ -562,19 +2069,21 @@ function historyLine(h, titles) {
 }
 
 function PendingEffectRows({instance: instance, now: now}) {
-    const {drainEffectsFor: drainEffectsFor, completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = index.useWorkflowContext(), toast = index.useClosableToast(), [busy, setBusy] = react.useState(!1), pending = instance.pendingEffects ?? [];
+    const {drainEffectsFor: drainEffectsFor, completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = index.useWorkflowContext(), toast = index.useWorkflowToast(), [busy, setBusy] = react.useState(!1), pending = instance.pendingEffects ?? [];
     if (pending.length === 0) return null;
     const runRegistered = async () => {
         setBusy(!0);
         try {
             await drainEffectsFor(instance._id), toast.push({
-                status: "success",
-                title: "Ran registered effect handlers"
+                id: index.TOAST_ID.effectsDrain,
+                status: "info",
+                title: "Ran the registered handlers"
             });
         } catch (err) {
             toast.push({
+                id: index.TOAST_ID.effectsDrain,
                 status: "error",
-                title: "Drain failed",
+                title: "Failed to run pending effects",
                 description: index.describeError(err)
             });
         } finally {
@@ -588,13 +2097,15 @@ function PendingEffectRows({instance: instance, now: now}) {
                 status: status,
                 detail: "Resolved in Studio"
             }), toast.push({
-                status: "success",
-                title: `Effect marked ${status}`
+                id: index.TOAST_ID.effectResolve,
+                status: "info",
+                title: `Effect marked as ${status}`
             });
         } catch (err) {
             toast.push({
+                id: index.TOAST_ID.effectResolve,
                 status: "error",
-                title: "Couldn’t resolve effect",
+                title: "Failed to resolve the effect",
                 description: index.describeError(err)
             });
         } finally {
@@ -824,13 +2335,7 @@ function FeedGlyph({hint: hint, icon: icon}) {
     });
 }
 
-function documentRefsOf(instance) {
-    const seen = /* @__PURE__ */ new Map;
-    for (const ref of workflowEngine.entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
-    return [ ...seen.values() ];
-}
-
-function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
+function WorkflowInstanceDetail({instanceId: instanceId, backToList: backToList}) {
     const entry = index.useWorkflowInstanceEntry(instanceId);
     index.useLogEventOnMount(index.WorkflowInstanceDetailViewed, {
         instanceId: instanceId
@@ -849,9 +2354,14 @@ function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
     }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
         paddingX: 3,
         children: /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
-            children: graceOver ? /* @__PURE__ */ jsxRuntime.jsx(NotFound, {
-                id: instanceId,
-                onBack: onBack
+            children: graceOver ? /* @__PURE__ */ jsxRuntime.jsx(DetailNotFound, {
+                back: backToList,
+                message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [ "Unable to find workflow with id “", 
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", {
+                        children: instanceId
+                    }), "”." ]
+                })
             }) : /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
                 label: "Loading workflow…"
             })
@@ -859,29 +2369,6 @@ function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
     });
 }
 
-function NotFound({id: id, onBack: onBack}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Stack, {
-        gap: 4,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: [ "No workflow with id “", id, "” — it may have been deleted." ]
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                fontSize: 1,
-                icon: ArrowLeft.ArrowLeftIcon,
-                mode: "ghost",
-                onClick: onBack,
-                padding: 2,
-                text: "Back to workflows"
-            })
-        }) ]
-    });
-}
-
 function InstanceDetailPanel({entry: entry}) {
     const definition = index.useDefinition(entry), snapshotWidth = index.useContainerToken(2), [openActivity, setOpenActivity] = react.useState(null), {instance: instance, ready: ready} = entry;
     return react.useEffect(() => {
@@ -924,7 +2411,11 @@ function InstanceDetailPanel({entry: entry}) {
                         onOpenActivity: name => setOpenActivity({
                             stage: instance.currentStage,
                             activityName: name
-                        })
+                        }),
+                        surface: "tool-instance-detail"
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(AbortWorkflowSection, {
+                        entry: entry
                     }), 
                     /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
                         gap: 4,
@@ -1028,217 +2519,76 @@ function DefinitionPickerPanel({onPick: onPick}) {
                     overflowY: "auto"
                 },
                 children: visible.map(definition => /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-                    as: "button",
-                    onClick: () => onPick(definition),
-                    padding: 3,
-                    radius: 2,
-                    style: {
-                        cursor: "pointer",
-                        textAlign: "left"
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                        gap: 2,
-                        children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                            size: 1,
-                            weight: "medium",
-                            children: definition.title
-                        }), definition.description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                            muted: !0,
-                            size: 1,
-                            textOverflow: "ellipsis",
-                            children: definition.description
-                        }) : null ]
-                    })
-                }, definition.name))
-            }) ]
-        })
-    });
-}
-
-function ToolActivityDialog({target: target, onClose: onClose}) {
-    const entry = index.useWorkflowInstanceEntry(target.instanceId), definition = index.useDefinition(entry), resolvedOnce = react.useRef(!1);
-    return entry && (resolvedOnce.current = !0), react.useEffect(() => {
-        resolvedOnce.current && index.openActivityGone({
-            entry: entry,
-            target: target
-        }) && onClose();
-    }, [ entry, target, onClose ]), entry?.invalid ? /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, {
-        header: "Workflow unavailable",
-        id: "workflow-activity-detail",
-        onClose: onClose,
-        width: 1,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsxRuntime.jsx(index.InvalidDocNotice, {
-                invalid: entry.invalid
-            })
-        })
-    }) : entry?.evaluation ? /* @__PURE__ */ jsxRuntime.jsx(index.ActivityDetailDialog, {
-        activityName: target.activityName,
-        breadcrumb: index.instanceBreadcrumb(entry.instance, definition),
-        definition: definition,
-        document: documentRefsOf(entry.instance)[0],
-        entry: entry,
-        onClose: onClose,
-        source: "tool-task-list"
-    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, {
-        header: "Loading activity…",
-        id: "workflow-activity-detail",
-        onClose: onClose,
-        width: 1,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsxRuntime.jsx(index.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;
-    }
+                    as: "button",
+                    onClick: () => onPick(definition),
+                    padding: 3,
+                    radius: 2,
+                    style: {
+                        cursor: "pointer",
+                        textAlign: "left"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                        gap: 2,
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            size: 1,
+                            weight: "medium",
+                            children: definition.title
+                        }), definition.description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            muted: !0,
+                            size: 1,
+                            textOverflow: "ellipsis",
+                            children: definition.description
+                        }) : 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 = index.useWorkflowInstanceEntry(target.instanceId), definition = index.useDefinition(entry), resolvedOnce = react.useRef(!1);
+    return entry && (resolvedOnce.current = !0), react.useEffect(() => {
+        resolvedOnce.current && index.openActivityGone({
+            entry: entry,
+            target: target
+        }) && onClose();
+    }, [ entry, target, onClose ]), entry?.invalid ? /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, {
+        header: "Workflow unavailable",
+        id: "workflow-activity-detail",
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.InvalidDocNotice, {
+                invalid: entry.invalid
+            })
+        })
+    }) : entry?.evaluation ? /* @__PURE__ */ jsxRuntime.jsx(index.ActivityDetailDialog, {
+        activityName: target.activityName,
+        breadcrumb: index.instanceBreadcrumb(entry.instance, definition),
+        definition: definition,
+        document: documentRefsOf(entry.instance)[0],
+        entry: entry,
+        onClose: onClose,
+        source: "tool-task-list"
+    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, {
+        header: "Loading activity…",
+        id: "workflow-activity-detail",
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.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 => index.isDateFieldKind(entry._type)).map(entry => entry.value).filter(value => typeof value == "string" && value !== "");
 }
 
 function spawnOrigins(instances) {
@@ -1339,10 +2689,7 @@ function deriveTaskGroups(args) {
 }
 
 function orderGroupsByPreviewTitle(groups, titles) {
-    const withDocuments = [ ...groups.withDocuments ].sort((a, b) => {
-        const aTitle = titles.get(a.document.id), bTitle = titles.get(b.document.id);
-        return aTitle !== void 0 && bTitle !== void 0 ? aTitle.localeCompare(bTitle) || a.key.localeCompare(b.key) : aTitle !== void 0 ? -1 : bTitle !== void 0 ? 1 : a.key.localeCompare(b.key);
-    });
+    const withDocuments = [ ...groups.withDocuments ].sort(byResolvedTitle(group => titles.get(group.document.id), group => group.key));
     return {
         ...groups,
         withDocuments: withDocuments
@@ -1494,11 +2841,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: index.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: index.TOAST_ID.orphanSettle,
         status: "warning",
         title: `Cleaned up ${outcome.settled} of ${total} workflows`,
         description: lines.join(`\n`)
@@ -1507,9 +2856,10 @@ function settleToast(outcome) {
 
 function recheckFailedToast(err) {
     return {
+        id: index.TOAST_ID.orphanSettle,
         status: "error",
-        title: "Nothing was cleaned up — the documents could not be re-checked",
-        description: index.describeError(err)
+        title: "Nothing was cleaned up",
+        description: `The documents could not be re-checked: ${index.describeError(err)}`
     };
 }
 
@@ -1539,7 +2889,7 @@ function OrphanedWorkflowsNote({orphans: orphans}) {
 function SettleOrphansDialog({workflows: workflows, onClose: onClose}) {
     const {engine: engine} = index.useWorkflowContext(), client = sanity.useClient({
         apiVersion: index.WORKFLOW_API_VERSION
-    }), toast = index.useClosableToast(), [pending, setPending] = react.useState(!1), confirm = async () => {
+    }), toast = index.useWorkflowToast(), [pending, setPending] = react.useState(!1), confirm = async () => {
         setPending(!0);
         try {
             const outcome = await settleOrphans({
@@ -1784,72 +3134,6 @@ function applyTaskFilters(args) {
     });
 }
 
-const NOTHING = {
-    titles: /* @__PURE__ */ new Map,
-    resolved: /* @__PURE__ */ new Set
-};
-
-function useDocPreviewTitles(documents) {
-    const previewStore = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), {perspectiveStack: perspectiveStack} = sanity.usePerspective(), {actualTypes: actualTypes, binding: binding} = index.useWorkflowContext(), [state, setState] = react.useState(NOTHING), key = documents.map(doc => doc.id).join("|");
-    return react.useEffect(() => {
-        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, previews = /* @__PURE__ */ new Map, publish = () => setState({
-            titles: new Map(titles),
-            resolved: new Set(resolved)
-        }), localDocs = documents.flatMap(doc => {
-            const {parsed: parsed, local: local} = index.gdrLocality(doc.id, binding.contentResource);
-            return !parsed || !local ? (resolved.add(doc.id), []) : [ {
-                doc: doc,
-                bareId: parsed.documentId
-            } ];
-        }), untracks = localDocs.map(({bareId: bareId}) => actualTypes.track(bareId)), dropPreview = docId => {
-            previews.get(docId)?.unsubscribe(), previews.delete(docId), titles.delete(docId);
-        }, observe = ({docId: docId, bareId: bareId, typeName: typeName}) => {
-            const schemaType = index.openableSchemaType(schema, typeName);
-            if (!schemaType) return !1;
-            if (previews.get(docId)?.typeName === typeName) return !0;
-            dropPreview(docId), resolved.delete(docId);
-            const subscription = previewStore.observeForPreview({
-                _id: bareId,
-                _type: schemaType.name
-            }, schemaType, {
-                perspective: perspectiveStack
-            }).subscribe({
-                next: event => {
-                    resolved.add(docId);
-                    const title = event.snapshot?.title;
-                    typeof title == "string" ? titles.set(docId, title) : titles.delete(docId), publish();
-                },
-                error: err => {
-                    console.error(`[workflow-studio-plugin] preview for "${docId}" failed:`, err), resolved.add(docId), 
-                    publish();
-                }
-            });
-            return previews.set(docId, {
-                typeName: typeName,
-                unsubscribe: () => subscription.unsubscribe()
-            }), !0;
-        }, evaluate = () => {
-            for (const {doc: doc, bareId: bareId} of localDocs) {
-                const probe = actualTypes.read(bareId);
-                if (probe === null) {
-                    dropPreview(doc.id), resolved.add(doc.id);
-                    continue;
-                }
-                !observe({
-                    docId: doc.id,
-                    bareId: bareId,
-                    typeName: probe ?? doc.type
-                }) && typeof probe == "string" && (dropPreview(doc.id), resolved.add(doc.id));
-            }
-            publish();
-        }, unsubscribeProbes = actualTypes.subscribe(evaluate);
-        return evaluate(), () => {
-            unsubscribeProbes(), untracks.forEach(untrack => untrack()), previews.forEach(preview => preview.unsubscribe());
-        };
-    }, [ key, previewStore, schema, actualTypes, binding.contentResource.id, perspectiveStack.join("|") ]), 
-    state;
-}
-
 const HITS_CAP = 6;
 
 function TaskFilterMenu({filters: filters, options: options, onChange: onChange}) {
@@ -2348,8 +3632,10 @@ function FilterRowPortal({filters: filters, onChange: onChange, options: options
     }), slot) : null;
 }
 
-function ActivityDateControl({instanceId: instanceId, state: state, dates: dates}) {
-    const {editFieldFor: editFieldFor} = index.useWorkflowContext(), {save: save} = index.useSaveField(), [open, setOpen] = react.useState(!1), raw = index.dateControlValue({
+function ActivityDateControl({instanceId: instanceId, state: state, surface: surface, dates: dates}) {
+    const editField = index.useEditField(surface), {save: save} = index.useSaveField({
+        instanceId: instanceId
+    }), [open, setOpen] = react.useState(!1), raw = index.dateControlValue({
         state: state,
         dates: dates
     }), display = raw === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
@@ -2372,15 +3658,16 @@ function ActivityDateControl({instanceId: instanceId, state: state, dates: dates
         })
     });
     const kind = index.dateControlKind(state), commit = (mode, value) => {
-        state.kind === "editable" && save(() => editFieldFor(instanceId, {
-            target: workflowReact.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);
     };
@@ -2397,9 +3684,9 @@ function ActivityDateControl({instanceId: instanceId, state: state, dates: dates
                     setOpen(!1), commit("unset");
                 },
                 onPick: next => {
-                    kind === "date" && setOpen(!1), commit("set", index.serializeDateFieldValue(next, kind));
+                    index.hasTimeOfDay(kind) || setOpen(!1), commit("set", index.serializeDateFieldValue(next, kind));
                 },
-                selectTime: kind === "datetime",
+                selectTime: index.hasTimeOfDay(kind),
                 value: index.parseDateFieldValue(state.field.value, kind)
             })
         }),
@@ -2463,7 +3750,8 @@ function RefChips({refs: refs, max: max = 2}) {
         wrap: "wrap",
         children: [ shown.map(ref => /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
             gdr: ref,
-            layout: "inline"
+            layout: "inline",
+            source: "doc-ref-chip"
         }, ref.id)), overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
             muted: !0,
             size: 1,
@@ -2474,54 +3762,16 @@ function RefChips({refs: refs, max: max = 2}) {
 
 const UNGROUPED_TITLE = "Workflows without Studio documents";
 
-function TaskGroupList({bands: bands, groups: groups, instanceDefaultOpen: instanceDefaultOpen, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+function TaskGroupList({groups: groups, ...wiring}) {
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Stack, {
         gap: 1,
-        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsxRuntime.jsx(index.CollapsibleBand, {
-            background: !0,
-            onToggle: () => bands.toggle(group.key, GROUP_DEFAULT_OPEN),
-            open: bands.isOpen(group.key, GROUP_DEFAULT_OPEN),
-            sticky: !0,
-            title: workflowEngine.toBareId(group.document.id),
-            header: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                align: "center",
-                flex: "none",
-                style: {
-                    maxWidth: "60%"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(RefChips, {
-                    max: 2,
-                    refs: group.documents
-                })
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(InstanceBands, {
-                bands: bands,
-                instanceDefaultOpen: instanceDefaultOpen,
-                instances: group.instances,
-                onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow,
-                showTerminalActions: showTerminalActions
-            })
-        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.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__ */ jsxRuntime.jsx(ui.Text, {
-                size: 1,
-                weight: "semibold",
-                children: UNGROUPED_TITLE
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(InstanceBands, {
-                bands: bands,
-                instanceDefaultOpen: instanceDefaultOpen,
-                instances: groups.withoutDocuments,
-                onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow,
-                showTerminalActions: showTerminalActions
-            })
+        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsxRuntime.jsx(DocumentBand, {
+            group: group,
+            ...wiring
+        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(UngroupedBand, {
+            instances: groups.withoutDocuments,
+            ...wiring
         }) : null ]
     });
 }
@@ -2534,38 +3784,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 jsxRuntime.jsx(index.CollapsibleBand, {
+        background: !0,
+        onToggle: toggle,
+        open: open,
+        sticky: !0,
+        title: workflowEngine.toBareId(group.document.id),
+        header: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            flex: "none",
+            style: {
+                maxWidth: "60%"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(RefChips, {
+                max: 2,
+                refs: group.documents
+            })
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(InstanceBands, {
+            instances: group.instances,
+            ...wiring
+        })
+    });
+}
+
+function UngroupedBand({instances: instances, ...wiring}) {
+    const {open: open, toggle: toggle} = useBandOpen(wiring.bands, UNGROUPED_BAND_KEY);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(index.CollapsibleBand, {
+        background: !0,
+        onToggle: toggle,
+        open: open,
+        sticky: !0,
+        title: UNGROUPED_TITLE,
+        header: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            weight: "semibold",
+            children: UNGROUPED_TITLE
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(InstanceBands, {
+            instances: instances,
+            ...wiring
+        })
+    });
+}
+
+function InstanceBands({instances: instances, ...wiring}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Stack, {
         gap: 1,
-        children: instances.map(band => /* @__PURE__ */ jsxRuntime.jsx(InstanceBand, {
-            band: band,
-            bands: bands,
-            instanceDefaultOpen: instanceDefaultOpen,
-            onOpenTask: onOpenTask,
-            onOpenWorkflow: onOpenWorkflow,
-            showTerminalActions: showTerminalActions
-        }, band.instanceId))
+        children: instances.map(instance => /* @__PURE__ */ jsxRuntime.jsx(InstanceBand, {
+            instance: instance,
+            ...wiring
+        }, instance.instanceId))
     });
 }
 
-function InstanceBand({band: band, bands: bands, instanceDefaultOpen: instanceDefaultOpen, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
-    const {resolvePathFromState: resolvePathFromState} = router.useRouter();
+function InstanceBand({bands: bands, instance: instance, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+    const {open: open, toggle: toggle} = useBandOpen(bands, instance.instanceId), {resolvePathFromState: resolvePathFromState} = router.useRouter();
     /* @__PURE__ */
     return jsxRuntime.jsx(index.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(index.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__ */ jsxRuntime.jsxs(ui.Flex, {
                     align: "center",
@@ -2581,12 +3874,12 @@ function InstanceBand({band: band, bands: bands, instanceDefaultOpen: instanceDe
                         },
                         textOverflow: "ellipsis",
                         weight: "medium",
-                        children: band.title
-                    }), band.breadcrumb === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.BreadcrumbTail, {
-                        segments: [ band.breadcrumb ]
+                        children: instance.title
+                    }), instance.breadcrumb === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.BreadcrumbTail, {
+                        segments: [ instance.breadcrumb ]
                     }), 
                     /* @__PURE__ */ jsxRuntime.jsx(index.StageFace, {
-                        title: band.stageTitle
+                        title: instance.stageTitle
                     }) ]
                 })
             }), 
@@ -2596,7 +3889,7 @@ function InstanceBand({band: band, bands: bands, instanceDefaultOpen: instanceDe
             paddingLeft: 5,
             children: /* @__PURE__ */ jsxRuntime.jsx(TaskRows, {
                 onOpenTask: onOpenTask,
-                rows: band.rows,
+                rows: instance.rows,
                 showTerminalActions: showTerminalActions
             })
         })
@@ -2630,40 +3923,19 @@ function TaskActivityRow({row: row, onOpen: onOpen, showTerminalActions: showTer
                 dateControl: /* @__PURE__ */ jsxRuntime.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 = react.useMemo(() => createBandStateStore({
-        storageKey: bandStateStorageKey(scope)
-    }), [ scope ]), [held, setHeld] = react.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) {
@@ -2703,15 +3975,18 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
     }), [filters, setFilters] = react.useState({}), groups = react.useMemo(() => deriveTaskGroups({
         instances: instances,
         identity: identity
-    }), [ instances, identity ]), orphans = useOrphanedWorkflows(groups), listed = react.useMemo(() => hideOrphanedGroups(groups, orphans.groupKeys), [ groups, orphans.groupKeys ]), options = react.useMemo(() => taskFilterOptions(listed), [ listed ]), leadDocuments = react.useMemo(() => listed.withDocuments.map(group => group.document), [ listed ]), previewTitles = useDocPreviewTitles(leadDocuments), visible = react.useMemo(() => {
+    }), [ instances, identity ]), orphans = useOrphanedWorkflows(groups), listed = react.useMemo(() => hideOrphanedGroups(groups, orphans.groupKeys), [ groups, orphans.groupKeys ]), options = react.useMemo(() => taskFilterOptions(listed), [ listed ]), titles = useGroupTitles(listed), revealed = useRevealGate({
+        loading: loading,
+        ready: titles.ready
+    }), visible = react.useMemo(() => {
         const filtered = applyTaskFilters({
             groups: listed,
             filters: filters,
             now: /* @__PURE__ */ new Date
         }), cut = mineOnly ? onlyMyTasks(filtered) : filtered;
-        return orderGroupsByPreviewTitle(cut, previewTitles.titles);
-    }, [ listed, filters, mineOnly, previewTitles ]);
-    if (loading) /* @__PURE__ */
+        return orderGroupsByPreviewTitle(cut, titles.titles);
+    }, [ listed, filters, mineOnly, titles ]);
+    if (loading || !revealed) /* @__PURE__ */
     return jsxRuntime.jsx(TabStatusRow, {
         children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
             label: "Loading tasks…"
@@ -2719,16 +3994,13 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
     });
     const empty = visible.withDocuments.length === 0 && visible.withoutDocuments.length === 0;
     let body;
-    return empty ? mineOnly ? body = /* @__PURE__ */ jsxRuntime.jsx(index.ForMeEmptyState, {}) : body = /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: "No tasks match — adjust the filters, or start a workflow"
-        })
+    return empty ? mineOnly ? body = /* @__PURE__ */ jsxRuntime.jsx(index.ForMeEmptyState, {}) : body = /* @__PURE__ */ jsxRuntime.jsx(index.EmptyState, {
+        description: "Adjust the filters, or start a workflow",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {}),
+        title: "No tasks match"
     }) : body = /* @__PURE__ */ jsxRuntime.jsx(TaskGroupList, {
         bands: bands,
         groups: visible,
-        instanceDefaultOpen: instanceBandDefaultOpen(segment),
         onOpenTask: onOpenTask,
         onOpenWorkflow: onOpenWorkflow,
         showTerminalActions: mineOnly
@@ -2754,52 +4026,106 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
             /* @__PURE__ */ jsxRuntime.jsx(OrphanedWorkflowsNote, {
                 orphans: orphans
             }), body, truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren't listed.`
+                text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren’t listed.`
             }) : null ]
         }) ]
     });
 }
 
-const TOOL_TABS = [ {
-    value: "overview",
-    label: "Overview"
-}, {
-    value: "definitions",
-    label: "Definitions"
-}, {
-    value: "for-me",
-    label: "For me"
-} ], TOOL_TAB_VALUES = TOOL_TABS.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 boardState(definitionName) {
+    return {
+        boardDefinition: definitionName
+    };
+}
+
+function tabSelectionNavigates(route, tab) {
+    return !(route.kind === "home" && tab === route.tab);
+}
+
+function backToAllLabel(tab) {
+    return `Back to all ${TOOL_TAB_LABELS[tab].toLowerCase()}`;
+}
+
+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 = index.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$1 = router.useRouter(), {seedInstance: seedInstance} = index.useWorkflowContext(), telemetry = workflowReact.useWorkflowTelemetry(), [filterSlot, setFilterSlot] = react.useState(null), goHome = () => router$1.navigate({}), instanceId = typeof router$1.state.instanceId == "string" ? router$1.state.instanceId : void 0, definitionName = typeof router$1.state.definitionName == "string" ? router$1.state.definitionName : void 0, isHome = instanceId === void 0 && definitionName === void 0, [instanceStreamLatched, setInstanceStreamLatched] = react.useState(isHome);
+    const router$1 = router.useRouter(), {seedInstance: seedInstance} = index.useWorkflowContext(), telemetry = workflowReact.useWorkflowTelemetry(), [filterSlot, setFilterSlot] = react.useState(null), route = toolRoute(router$1.state), isHome = route.kind === "home" || route.kind === "not-found", [instanceStreamLatched, setInstanceStreamLatched] = react.useState(isHome);
     react.useEffect(() => {
         isHome && setInstanceStreamLatched(!0);
     }, [ isHome ]);
-    let tab;
-    instanceId !== void 0 ? tab = "overview" : definitionName !== void 0 ? tab = "definitions" : tab = index.pathSegmentTab({
-        segment: router$1.state.workflowsTab,
-        tabs: TOOL_TAB_VALUES,
-        fallback: "overview"
-    });
-    const setTab = next => router$1.navigate(next === "overview" ? {} : {
-        workflowsTab: next
-    });
-    index.useLogEventOnMount(index.WorkflowToolOpened, {
-        tab: tab,
+    const setTab = next => router$1.navigate(toolTabState(next)), selectBoardWorkflow = react.useCallback((name, opts) => router$1.navigate(boardState(name), opts?.replace === !0 ? {
+        replace: !0
+    } : {}), [ router$1 ]), backToList = tab => ({
+        label: backToAllLabel(tab),
+        go: () => setTab(tab)
+    }), badSegment = route.kind === "not-found";
+    react.useEffect(() => {
+        badSegment && router$1.navigate({}, {
+            replace: !0
+        });
+    }, [ badSegment, router$1 ]), index.useLogEventOnMount(index.WorkflowToolOpened, {
+        tab: route.tab ?? "not-found",
         via: "open"
     });
     let panel;
-    return instanceId !== void 0 ? panel = /* @__PURE__ */ jsxRuntime.jsx(WorkflowInstanceDetail, {
-        instanceId: instanceId,
-        onBack: goHome
-    }, instanceId) : definitionName !== void 0 ? panel = /* @__PURE__ */ jsxRuntime.jsx(DefinitionDetail, {
-        definitionName: definitionName
-    }, definitionName) : panel = /* @__PURE__ */ jsxRuntime.jsx(WorkflowsHome, {
+    return route.kind === "instance" ? panel = /* @__PURE__ */ jsxRuntime.jsx(WorkflowInstanceDetail, {
+        instanceId: route.instanceId,
+        backToList: backToList(route.tab)
+    }, route.instanceId) : route.kind === "definition" ? panel = /* @__PURE__ */ jsxRuntime.jsx(DefinitionDetail, {
+        definitionName: route.definitionName,
+        backToList: backToList(route.tab)
+    }, route.definitionName) : route.kind === "not-found" ? panel = null : panel = /* @__PURE__ */ jsxRuntime.jsx(WorkflowsHome, {
+        boardDefinition: route.boardDefinition,
         filterSlot: filterSlot,
         onOpenDefinition: name => router$1.navigate({
             definitionName: name
@@ -2809,7 +4135,8 @@ function WorkflowsToolRoot() {
                 instanceId: typeof instance == "string" ? instance : instance._id
             });
         },
-        tab: tab
+        onSelectWorkflow: selectBoardWorkflow,
+        tab: route.tab
     }), 
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, {
         height: "fill",
@@ -2844,13 +4171,13 @@ function WorkflowsToolRoot() {
                         ariaControls: "workflows-tool-panel",
                         idPrefix: "workflows-tool-tab",
                         onSelect: next => {
-                            next !== tab && telemetry.log(index.WorkflowToolOpened, {
+                            tabSelectionNavigates(route, next) && (next !== route.tab && telemetry.log(index.WorkflowToolOpened, {
                                 tab: next,
                                 via: "tab-switch"
-                            }), setTab(next);
+                            }), setTab(next));
                         },
                         options: TOOL_TABS,
-                        selected: tab
+                        selected: route.tab
                     }), 
                     /* @__PURE__ */ jsxRuntime.jsx("div", {
                         ref: setFilterSlot
@@ -2866,17 +4193,20 @@ function WorkflowsToolRoot() {
     });
 }
 
-function WorkflowsHome({filterSlot: filterSlot, onOpenDefinition: onOpenDefinition, onOpenInstance: onOpenInstance, tab: tab}) {
+function WorkflowsHome({boardDefinition: boardDefinition, filterSlot: filterSlot, onOpenDefinition: onOpenDefinition, onOpenInstance: onOpenInstance, onSelectWorkflow: onSelectWorkflow, tab: tab}) {
     const instances = useToolInstances(), identity = index.useAssignmentIdentity(), [openTask, setOpenTask] = react.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 = react.useRef(null);
-    return react.useEffect(() => {
+    react.useEffect(() => {
         scrollerRef.current?.scrollTo({
             top: 0
         });
-    }, [ tab ]), /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+    }, [ tab ]);
+    const bleeds = tab === "documents";
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
         direction: "column",
         height: "fill",
         overflow: "hidden",
@@ -2885,9 +4215,9 @@ function WorkflowsHome({filterSlot: filterSlot, onOpenDefinition: onOpenDefiniti
             ref: scrollerRef,
             flex: 1,
             overflow: "auto",
-            paddingX: 3,
+            paddingX: bleeds ? 0 : TOOL_PANEL_PADDING,
             style: {
-                scrollbarGutter: "stable"
+                scrollbarGutter: bleeds ? "auto" : "stable"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, {
                 "aria-labelledby": `workflows-tool-tab-${tab}`,
@@ -2900,18 +4230,19 @@ function WorkflowsHome({filterSlot: filterSlot, onOpenDefinition: onOpenDefiniti
                 children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
                     direction: "column",
                     flex: 1,
-                    children: tab === "definitions" ? /* @__PURE__ */ jsxRuntime.jsx(DefinitionsTab, {
-                        onOpenDefinition: onOpenDefinition
-                    }) : /* @__PURE__ */ jsxRuntime.jsx(TasksTab, {
+                    style: {
+                        minHeight: 0
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(HomePanel, {
+                        boardDefinition: boardDefinition,
                         filterSlot: filterSlot,
                         identity: identity,
-                        instances: [ ...instances.inFlight, ...instances.settled ],
-                        loading: instances.loading,
+                        instances: instances,
+                        onOpenDefinition: onOpenDefinition,
                         onOpenTask: setOpenTask,
                         onOpenWorkflow: openInstance,
-                        segment: tab,
-                        truncated: instances.truncated,
-                        unreadable: instances.unreadable
+                        onSelectWorkflow: onSelectWorkflow,
+                        tab: tab
                     })
                 })
             })
@@ -2922,4 +4253,25 @@ function WorkflowsHome({filterSlot: filterSlot, onOpenDefinition: onOpenDefiniti
     });
 }
 
+function HomePanel({boardDefinition: boardDefinition, filterSlot: filterSlot, identity: identity, instances: instances, onOpenDefinition: onOpenDefinition, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, onSelectWorkflow: onSelectWorkflow, tab: tab}) {
+    return tab === "definitions" ? /* @__PURE__ */ jsxRuntime.jsx(DefinitionsTab, {
+        onOpenDefinition: onOpenDefinition
+    }) : tab === "documents" ? /* @__PURE__ */ jsxRuntime.jsx(DocumentsTab, {
+        filterSlot: filterSlot,
+        onOpenDefinition: onOpenDefinition,
+        onSelectWorkflow: onSelectWorkflow,
+        routeDefinition: boardDefinition
+    }) : /* @__PURE__ */ jsxRuntime.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
+    });
+}
+
 exports.default = WorkflowsToolRoot;