@sanity/workflow-studio-plugin 0.22.0 → 0.23.0

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

@@ -1,30 +1,835 @@
 "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"), ArrowLeft = require("@sanity/icons/ArrowLeft"), workflowDiagram = require("@sanity/workflow-diagram"), workflowEngine = require("@sanity/workflow-engine"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), sanity = require("sanity"), 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"), workflowStudio = require("@sanity/workflow-studio");
+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");
 
-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 _interopDefaultCompat(e) {
+    return e && typeof e == "object" && "default" in e ? e : {
+        default: e
+    };
 }
 
-function InstanceTaskLists({entry: entry, onOpenActivity: onOpenActivity}) {
-    return index.instanceNotice(entry) || /* @__PURE__ */ jsxRuntime.jsx(index.StaleLock, {
-        stale: index.isEvaluationStale(entry),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+var pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize);
+
+function MutedNote({text: text}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        paddingY: 3,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: text
+        })
+    });
+}
+
+function definitionCatalog(args) {
+    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));
+}
+
+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));
+}
+
+function startPhrase(definition) {
+    if (definition.lifecycle === "child") return "Spawned 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";
+}
+
+function deployedAtOf(definition) {
+    return typeof definition._updatedAt == "string" ? definition._updatedAt : void 0;
+}
+
+function DetailTitle({busy: busy = !1, documentGdr: documentGdr, title: title}) {
+    const chipPullback = -index.useSpaceToken(1);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        paddingLeft: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            style: {
+                minWidth: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                textOverflow: "ellipsis",
+                weight: "semibold",
+                children: title
+            })
+        }), documentGdr === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: "in"
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                align: "center",
+                flex: "none",
+                style: {
+                    height: 0,
+                    marginLeft: chipPullback
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
+                    gdr: documentGdr,
+                    layout: "inline"
+                })
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(index.SpinnerSlot, {
+            busy: busy
+        }) ]
+    });
+}
+
+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
+    };
+}
+
+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, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        children: [ 
+        /* @__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,
+                title: definition?.title ?? definitionName
+            })
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: 1,
+            overflow: "auto",
+            paddingX: 3,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                paddingBottom: 5,
+                paddingLeft: 2,
+                paddingTop: 2,
+                style: {
+                    maxWidth: snapshotWidth
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(DefinitionBody, {
+                    definition: definition,
+                    error: error,
+                    loaded: definitions !== void 0
+                })
+            })
+        }) ]
+    });
+}
+
+function DefinitionBody({definition: definition, error: error, loaded: loaded}) {
+    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: definition
+    }) : /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+        label: "Loading definition…"
+    });
+}
+
+function DefinitionFacts({definition: definition}) {
+    const {binding: binding, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), deployedAt = deployedAtOf(definition), [row] = definitionCatalog({
+        definitions: [ definition ],
+        mappings: mappings,
+        inFlight: []
+    }), runsOn = docTypeLabels(row?.docTypes ?? [], name => schema.get(name)?.title).map(docType => docType.title);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        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)
+            })
+        }), 
+        /* @__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(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,
+    docTypes: 2
+};
+
+function Col({flex: flex, children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        flex: flex,
+        paddingRight: 3,
+        children: children
+    });
+}
+
+function DefinitionsTab({onOpenDefinition: onOpenDefinition}) {
+    const {definitions: definitions, error: error} = useDeployedDefinitions(), {mappings: mappings} = index.useWorkflowContext(), instances = useToolInstances();
+    if (error !== void 0) /* @__PURE__ */
+    return jsxRuntime.jsx(TabStatusRow, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: `Could not load the deployed workflows: ${error}`
+        })
+    });
+    if (definitions === void 0) /* @__PURE__ */
+    return jsxRuntime.jsx(TabStatusRow, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+            label: "Loading definitions…"
+        })
+    });
+    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"
+        })
+    });
+    const rows = definitionCatalog({
+        definitions: definitions,
+        mappings: mappings,
+        inFlight: instances.inFlight
+    }), active = rows.reduce((sum, row) => sum + row.activeCount, 0);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 3,
+        paddingBottom: 4,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            paddingTop: 3,
+            paddingX: 2,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "center",
+                gap: 2,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    size: 1,
+                    weight: "semibold",
+                    children: pluralize__default.default("definition", rows.length, !0)
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    children: instances.loading ? "counting active instances…" : activeSummary(active)
+                }) ]
+            })
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 2,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(index.ActivitiesList, {
-                entry: entry,
-                onOpenActivity: onOpenActivity
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+                paddingX: 2,
+                paddingY: 2,
+                style: {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                    align: "center",
+                    gap: 4,
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(Col, {
+                        flex: COLUMNS.definition,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            muted: !0,
+                            size: 1,
+                            weight: "medium",
+                            children: "Definition"
+                        })
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(Col, {
+                        flex: COLUMNS.instances,
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                            align: "center",
+                            gap: 2,
+                            children: [ 
+                            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                                muted: !0,
+                                size: 1,
+                                weight: "medium",
+                                children: "Active instances"
+                            }), 
+                            /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+                                text: "Counts only active instances — completed and aborted workflows are not included",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                                    muted: !0,
+                                    size: 1,
+                                    style: {
+                                        opacity: .7
+                                    },
+                                    children: /* @__PURE__ */ jsxRuntime.jsx(InfoOutline.InfoOutlineIcon, {})
+                                })
+                            }) ]
+                        })
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(Col, {
+                        flex: COLUMNS.docTypes,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            muted: !0,
+                            size: 1,
+                            weight: "medium",
+                            children: "Document types"
+                        })
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+                gap: 1,
+                children: rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(DefinitionRow, {
+                    countPending: instances.loading,
+                    onOpen: () => onOpenDefinition(row.name),
+                    row: row
+                }, row.name))
+            }) ]
+        }), instances.truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+            text: `Counts from the latest ${INSTANCE_CAP} workflows — older ones aren't counted.`
+        }) : null ]
+    });
+}
+
+function activeSummary(active) {
+    return `${pluralize__default.default("active instance", active, !0)}`;
+}
+
+function DefinitionRow({countPending: countPending, onOpen: onOpen, row: row}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Card, {
+        as: "button",
+        onClick: onOpen,
+        paddingX: 2,
+        paddingY: 3,
+        radius: 2,
+        style: {
+            textAlign: "left"
+        },
+        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, {
+                    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
+                })
+            }) ]
+        })
+    });
+}
+
+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,
+            size: 1,
+            children: [ "+", overflow, " more" ]
+        }) : null ]
+    });
+}
+
+function makeTitleResolver(definition) {
+    const activities = (definition?.stages ?? []).flatMap(s => s.activities ?? []);
+    return {
+        action: (activityName, actionName) => activities.find(t => t.name === activityName)?.actions?.find(a => a.name === actionName)?.title ?? actionName,
+        activity: name => activities.find(t => t.name === name)?.title ?? name,
+        stage: name => index.stageTitle(definition, name)
+    };
+}
+
+function attributed(actor, ...parts) {
+    if (actor) return {
+        actorId: actor.id,
+        parts: parts
+    };
+    const [first, ...rest] = parts;
+    return typeof first != "string" ? {
+        actorId: void 0,
+        parts: parts
+    } : {
+        actorId: void 0,
+        parts: [ first.charAt(0).toUpperCase() + first.slice(1), ...rest ]
+    };
+}
+
+function standalone(...parts) {
+    return {
+        actorId: void 0,
+        parts: parts
+    };
+}
+
+const historyLiner = {
+    stageEntered: (h, titles) => attributed(h.actor, `entered ${titles.stage(h.stage)}${h.fromStage ? ` from ${titles.stage(h.fromStage)}` : ""}`),
+    stageExited: (h, titles) => attributed(h.actor, `left ${titles.stage(h.stage)} for ${titles.stage(h.toStage)}`),
+    activityStatusChanged: (h, titles) => attributed(h.actor, `changed ${titles.activity(h.activity)}: ${h.from} → ${h.to}`),
+    actionFired: (h, titles) => {
+        const phrase = `fired ${titles.action(h.activity, h.action)} on ${titles.activity(h.activity)}`;
+        return h.triggered ? standalone(`The workflow ${phrase}`) : attributed(h.actor, phrase);
+    },
+    transitionFired: (h, titles) => attributed(h.actor, `moved ${titles.stage(h.fromStage)} → ${titles.stage(h.toStage)}`),
+    effectQueued: h => standalone("Effect ", {
+        code: h.effect
+    }, " queued"),
+    effectCompleted: h => {
+        const detail = h.detail ? ` — ${h.detail}` : "";
+        return h.actor ? attributed(h.actor, "resolved effect ", {
+            code: h.effect
+        }, ` — ${h.status}${detail}`) : standalone("Effect ", {
+            code: h.effect
+        }, ` ${h.status}${detail}`);
+    },
+    effectClaimReleased: h => attributed(h.actor, "released a stale claim on effect ", {
+        code: h.effect
+    }, ` ${h.via === "sweep" ? "via the sweeper" : "via a drain takeover"}`),
+    spawned: (h, titles) => attributed(h.actor, `spawned a child workflow from ${titles.activity(h.activity)}`),
+    subworkflowAdopted: (h, titles) => standalone(`Re-adopted child workflow into ${titles.activity(h.activity)} on re-entering ${titles.stage(h.stage)}`),
+    subworkflowResolved: (h, titles) => standalone(`Child workflow of ${titles.activity(h.activity)} ${h.status === "done" ? "completed" : "was aborted"}`),
+    subworkflowOrphaned: h => standalone(`Orphaned child workflow reached terminal — ${h.detail}`),
+    aborted: (h, titles) => attributed(h.actor, `aborted the workflow at ${titles.stage(h.stage)}${h.reason ? ` — ${h.reason}` : ""}`),
+    opApplied: (h, titles) => h.action ? attributed(h.actor, `changed state via action ${titles.action(h.activity ?? "", h.action)}`) : h.activity ? attributed(h.actor, `changed state via activity ${titles.activity(h.activity)}`) : attributed(h.actor, "changed state via ", {
+        code: h.opType
+    }),
+    fieldQueryDiscarded: h => standalone({
+        code: JSON.stringify(h)
+    })
+};
+
+function historyLine(h, titles) {
+    return historyLiner[h._type](h, titles);
+}
+
+function PendingEffectRows({instance: instance, now: now}) {
+    const {drainEffectsFor: drainEffectsFor, completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = index.useWorkflowContext(), toast = index.useClosableToast(), [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"
+            });
+        } catch (err) {
+            toast.push({
+                status: "error",
+                title: "Drain failed",
+                description: index.describeError(err)
+            });
+        } finally {
+            setBusy(!1);
+        }
+    }, resolve = async (effectKey, status) => {
+        setBusy(!0);
+        try {
+            await completeEffectFor(instance._id, {
+                effectKey: effectKey,
+                status: status,
+                detail: "Resolved in Studio"
+            }), toast.push({
+                status: "success",
+                title: `Effect marked ${status}`
+            });
+        } catch (err) {
+            toast.push({
+                status: "error",
+                title: "Couldn’t resolve effect",
+                description: index.describeError(err)
+            });
+        } finally {
+            setBusy(!1);
+        }
+    };
+    /* @__PURE__ */
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: pending.map(fx => /* @__PURE__ */ jsxRuntime.jsx(PendingEffectRow, {
+            busy: busy,
+            effect: fx,
+            instanceId: instance._id,
+            now: now,
+            onResolve: status => resolve(fx._key, status),
+            onRunHandlers: runRegistered,
+            registered: fx.name in effectHandlers
+        }, fx._key))
+    });
+}
+
+function PendingEffectRow({busy: busy, effect: effect, instanceId: instanceId, now: now, onResolve: onResolve, onRunHandlers: onRunHandlers, registered: registered}) {
+    const label = effect.title ?? effect.name, avatarSize = index.useAvatarSize();
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(FeedGlyph, {
+            hint: "Waiting to run",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Clock.ClockIcon, {})
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ effect.title ?? /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
+                        value: effect.name
+                    }), registered ? " — ready to run in Studio" : " — waiting for the runtime" ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: "·"
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+                text: index.formatDateTime(effect.queuedAt),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    style: {
+                        whiteSpace: "nowrap"
+                    },
+                    children: index.formatShortAgo(effect.queuedAt, now)
+                })
+            }) ]
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            flex: "none",
+            style: {
+                height: avatarSize
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.HintedMenuButton, {
+                button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    "aria-label": `Resolve ${label}`,
+                    disabled: busy,
+                    fontSize: 1,
+                    icon: EllipsisHorizontal.EllipsisHorizontalIcon,
+                    mode: "bleed",
+                    padding: 2
+                }),
+                hint: "Resolve",
+                id: `pending-effect-menu-${instanceId}-${effect._key}`,
+                menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+                    children: [ registered ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: onRunHandlers,
+                        text: "Run registered handlers"
+                    }) : null, 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: () => onResolve("done"),
+                        text: "Mark done"
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                        onClick: () => onResolve("failed"),
+                        text: "Mark failed",
+                        tone: "critical"
+                    }) ]
+                }),
+                popover: {
+                    placement: "bottom-end",
+                    portal: !0
+                }
+            })
+        }) ]
+    });
+}
+
+function ActivityLog({instance: instance, definition: definition}) {
+    const titles = react.useMemo(() => makeTitleResolver(definition), [ definition ]), entries = react.useMemo(() => instance.history.toReversed(), [ instance.history ]), [now, setNow] = react.useState(() => /* @__PURE__ */ new Date);
+    return react.useEffect(() => {
+        const timer = setInterval(() => setNow(/* @__PURE__ */ new Date), 6e4);
+        return () => clearInterval(timer);
+    }, []), entries.length === 0 && (instance.pendingEffects ?? []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+        muted: !0,
+        size: 1,
+        children: "No activity yet"
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        gap: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(PendingEffectRows, {
+            instance: instance,
+            now: now
+        }), entries.map(h => /* @__PURE__ */ jsxRuntime.jsx(HistoryRow, {
+            entry: h,
+            now: now,
+            titles: titles
+        }, h._key)) ]
+    });
+}
+
+function HistoryRow({entry: entry, now: now, titles: titles}) {
+    const line = historyLine(entry, titles);
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        children: [ line.actorId === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedGlyph, {
+            hint: "The workflow",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Cog.CogIcon, {})
+        }) : /* @__PURE__ */ jsxRuntime.jsx(index.UserAvatar, {
+            id: line.actorId
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            flex: 1,
+            gap: 1,
+            style: {
+                minWidth: 0
+            },
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                style: {
+                    minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                    size: 1,
+                    textOverflow: "ellipsis",
+                    children: [ line.actorId === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ActorNameSpan, {
+                            id: line.actorId
+                        }), " " ]
+                    }), line.parts.map((part, index2) => typeof part == "string" ? part : /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
+                        value: part.code
+                    }, index2)) ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: "·"
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(index.TodoItemsList, {
-                entry: entry,
-                surface: "tool-instance-detail"
+            /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+                text: index.formatDateTime(entry.at),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                    muted: !0,
+                    size: 1,
+                    style: {
+                        whiteSpace: "nowrap"
+                    },
+                    children: index.formatShortAgo(entry.at, now)
+                })
             }) ]
+        }) ]
+    });
+}
+
+function ActorNameSpan({id: id}) {
+    const {name: name} = index.useUserDisplay(id), {font: font} = ui.useTheme_v2();
+    /* @__PURE__ */
+    return jsxRuntime.jsx("span", {
+        style: {
+            fontWeight: font.text.weights.medium
+        },
+        children: name
+    });
+}
+
+function CodeChip({value: value}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx("code", {
+        children: value
+    });
+}
+
+function FeedGlyph({hint: hint, icon: icon}) {
+    const size = index.useAvatarSize();
+    /* @__PURE__ */
+    return jsxRuntime.jsx(index.HoverHint, {
+        text: hint,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            flex: "none",
+            justify: "center",
+            style: {
+                height: size,
+                width: size
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: 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}) {
     const entry = index.useWorkflowInstanceEntry(instanceId);
     index.useLogEventOnMount(index.WorkflowInstanceDetailViewed, {
@@ -40,15 +845,16 @@ function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
             invalid: entry.invalid
         })
     }) : entry ? /* @__PURE__ */ jsxRuntime.jsx(InstanceDetailPanel, {
-        entry: entry,
-        onBack: onBack
+        entry: entry
     }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-        padding: 4,
-        children: graceOver ? /* @__PURE__ */ jsxRuntime.jsx(NotFound, {
-            id: instanceId,
-            onBack: onBack
-        }) : /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
-            label: "Loading workflow…"
+        paddingX: 3,
+        children: /* @__PURE__ */ jsxRuntime.jsx(TabStatusRow, {
+            children: graceOver ? /* @__PURE__ */ jsxRuntime.jsx(NotFound, {
+                id: instanceId,
+                onBack: onBack
+            }) : /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+                label: "Loading workflow…"
+            })
         })
     });
 }
@@ -76,8 +882,8 @@ function NotFound({id: id, onBack: onBack}) {
     });
 }
 
-function InstanceDetailPanel({entry: entry, onBack: onBack}) {
-    const definition = index.useDefinition(entry), [openActivity, setOpenActivity] = react.useState(null), {instance: instance} = entry;
+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(() => {
         openActivity && index.openActivityGone({
             entry: entry,
@@ -88,36 +894,52 @@ function InstanceDetailPanel({entry: entry, onBack: onBack}) {
         height: "fill",
         overflow: "hidden",
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(DetailHeader, {
-            definition: definition,
-            entry: entry,
-            onBack: onBack
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: "none",
+            paddingBottom: 2,
+            paddingTop: 3,
+            paddingX: 3,
+            children: /* @__PURE__ */ jsxRuntime.jsx(DetailTitle, {
+                busy: !ready || index.isEvaluationStale(entry),
+                documentGdr: documentRefsOf(instance)[0],
+                title: index.instanceTitle(instance, definition)
+            })
         }), 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             flex: 1,
             overflow: "auto",
-            paddingX: 4,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                gap: 4,
+            paddingX: 3,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                 paddingBottom: 5,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(StudioDocumentsSection, {
-                    instance: instance
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(StageDiagramSection, {
-                    definition: definition,
-                    entry: entry
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(index.GroupHeading, {
-                    title: "All tasks"
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(InstanceTaskLists, {
-                    entry: entry,
-                    onOpenActivity: name => setOpenActivity({
-                        stage: instance.currentStage,
-                        activityName: name
-                    })
-                }) ]
+                paddingLeft: 2,
+                paddingTop: 2,
+                style: {
+                    maxWidth: snapshotWidth
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                    gap: 6,
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(index.InstanceSnapshotBody, {
+                        entry: entry,
+                        onOpenActivity: name => setOpenActivity({
+                            stage: instance.currentStage,
+                            activityName: name
+                        })
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                        gap: 4,
+                        children: [ 
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            size: 1,
+                            weight: "semibold",
+                            children: "History"
+                        }), 
+                        /* @__PURE__ */ jsxRuntime.jsx(ActivityLog, {
+                            definition: definition,
+                            instance: instance
+                        }) ]
+                    }) ]
+                })
             })
         }), openActivity ? /* @__PURE__ */ jsxRuntime.jsx(index.ActivityDetailDialog, {
             activityName: openActivity.activityName,
@@ -130,130 +952,14 @@ function InstanceDetailPanel({entry: entry, onBack: onBack}) {
     });
 }
 
-function DetailHeader({entry: entry, definition: definition, onBack: onBack}) {
-    const {instance: instance, ready: ready} = entry;
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
-        flex: "none",
-        paddingX: 4,
-        paddingY: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            gap: 3,
-            wrap: "wrap",
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
-                text: "Back to workflows",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    "aria-label": "Back to workflows",
-                    fontSize: 1,
-                    icon: ArrowLeft.ArrowLeftIcon,
-                    mode: "bleed",
-                    onClick: onBack,
-                    padding: 2
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                gap: 2,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    size: 1,
-                    weight: "semibold",
-                    children: index.instanceTitle(instance, definition)
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                    muted: !0,
-                    size: 1,
-                    children: [ "Started ", index.formatDate(instance.startedAt) ]
-                }) ]
-            }), workflowEngine.terminalState(instance) === "in-flight" ? /* @__PURE__ */ jsxRuntime.jsx(index.StageChip, {
-                title: index.stageTitle(definition, instance.currentStage)
-            }) : /* @__PURE__ */ jsxRuntime.jsx(index.AbortedBadge, {
-                instance: instance
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(index.SpinnerSlot, {
-                busy: !ready || index.isEvaluationStale(entry)
-            }) ]
-        })
-    });
-}
-
-function StudioDocumentsSection({instance: instance}) {
-    const refs = documentRefsOf(instance);
-    return refs.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 3,
-        marginTop: 3,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            weight: "medium",
-            children: refs.length === 1 ? "Studio document" : "Studio documents"
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
-            gap: 2,
-            children: refs.map(ref => /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
-                gdr: ref
-            }, ref.id))
-        }) ]
-    });
-}
-
-function StageDiagramSection({entry: entry, definition: definition}) {
-    const {instance: instance} = entry;
-    return definition ? 
-    /* @__PURE__ */ jsxRuntime.jsx(workflowDiagram.WorkflowDiagram, {
-        currentStage: workflowEngine.terminalState(instance) === "in-flight" ? instance.currentStage : void 0,
-        definition: definition,
-        evaluation: entry.evaluation,
-        explain: !0,
-        guardCount: entry.guards?.length,
-        height: 340,
-        history: instance.history
-    }, instance._id) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-        border: !0,
-        marginTop: 3,
-        padding: 3,
-        radius: 2,
-        tone: "caution",
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: "Couldn’t load this workflow’s full details — the stage diagram is unavailable, and technical names show instead of titles."
-        })
-    });
-}
-
-function MutedNote({text: text}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Box, {
-        paddingY: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: text
-        })
-    });
-}
-
 function useStartableDefinitions() {
-    const {engine: engine} = index.useWorkflowContext(), [definitions, setDefinitions] = react.useState(void 0), [error, setError] = react.useState(void 0);
-    return react.useEffect(() => {
-        let cancelled = !1;
-        return (async () => {
-            const rows = await index.readDeployedDefinitions(engine), startable = workflowEngine.latestDeployedDefinitions(rows).filter(row => workflowEngine.isStartableDefinition(row)).map(row => ({
-                name: row.name,
-                title: row.title ?? row.name,
-                description: row.description
-            }));
-            cancelled || (setDefinitions(startable), setError(void 0));
-        })().catch(err => {
-            cancelled || setError(index.describeError(err));
-        }), () => {
-            cancelled = !0;
-        };
-    }, [ engine ]), {
-        definitions: definitions,
+    const {definitions: definitions, error: error} = useDeployedDefinitions();
+    return {
+        definitions: react.useMemo(() => definitions?.filter(row => workflowEngine.isStartableDefinition(row)).map(row => ({
+            name: row.name,
+            title: row.title ?? row.name,
+            description: row.description
+        })), [ definitions ]),
         error: error
     };
 }
@@ -632,6 +1338,17 @@ 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);
+    });
+    return {
+        ...groups,
+        withDocuments: withDocuments
+    };
+}
+
 function cutTaskGroups(groups, cut) {
     const cutBands = bands => bands.filter(band => cut.keepBand?.(band) ?? !0).map(band => ({
         ...band,
@@ -1073,30 +1790,64 @@ const NOTHING = {
 };
 
 function useDocPreviewTitles(documents) {
-    const previewStore = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), {binding: binding} = index.useWorkflowContext(), [state, setState] = react.useState(NOTHING), key = documents.map(doc => doc.id).join("|");
+    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, publish = () => setState({
+        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, previews = /* @__PURE__ */ new Map, publish = () => setState({
             titles: new Map(titles),
             resolved: new Set(resolved)
-        }), subscriptions = documents.flatMap(doc => {
-            const {parsed: parsedRef, local: local} = index.gdrLocality(doc.id, binding.contentResource), schemaType = schema.get(doc.type);
-            return !parsedRef || !local || !schemaType ? (resolved.add(doc.id), []) : [ previewStore.observeForPreview({
-                _type: "reference",
-                _ref: parsedRef.documentId
-            }, schemaType).subscribe({
+        }), 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(doc.id);
+                    resolved.add(docId);
                     const title = event.snapshot?.title;
-                    typeof title == "string" && titles.set(doc.id, title), publish();
+                    typeof title == "string" ? titles.set(docId, title) : titles.delete(docId), publish();
                 },
                 error: err => {
-                    console.error(`[workflow-studio-plugin] preview for "${doc.id}" failed:`, err), 
-                    resolved.add(doc.id), publish();
+                    console.error(`[workflow-studio-plugin] preview for "${docId}" failed:`, err), resolved.add(docId), 
+                    publish();
                 }
-            }) ];
-        });
-        return publish(), () => subscriptions.forEach(sub => sub.unsubscribe());
-    }, [ key, previewStore, schema, binding.contentResource.id ]), state;
+            });
+            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;
@@ -1721,13 +2472,12 @@ function RefChips({refs: refs, max: max = 2}) {
     });
 }
 
-const EMPTY_NOTE = "No tasks match — adjust the filters, or start a workflow", UNGROUPED_TITLE = "Workflows without Studio documents";
+const UNGROUPED_TITLE = "Workflows without Studio documents";
 
 function TaskGroupList({bands: bands, groups: groups, instanceDefaultOpen: instanceDefaultOpen, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
-    return groups.withDocuments.length === 0 && groups.withoutDocuments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-        text: EMPTY_NOTE
-    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 2,
+    /* @__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),
@@ -1946,28 +2696,6 @@ function useOrphanedWorkflows(groups) {
     }), [ groups, contentResource, missing ]);
 }
 
-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 ]);
-}
-
 function TasksTab({filterSlot: filterSlot, instances: instances, loading: loading, identity: identity, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, segment: segment, truncated: truncated, unreadable: unreadable}) {
     const mineOnly = segment === "for-me", {binding: binding} = index.useWorkflowContext(), bands = useBandOpenState({
         segment: segment,
@@ -1975,21 +2703,38 @@ 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 ]), visible = react.useMemo(() => {
+    }), [ 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(() => {
         const filtered = applyTaskFilters({
             groups: listed,
             filters: filters,
             now: /* @__PURE__ */ new Date
-        });
-        return mineOnly ? onlyMyTasks(filtered) : filtered;
-    }, [ listed, filters, mineOnly ]);
-    return loading ? 
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-        paddingLeft: 2,
+        }), cut = mineOnly ? onlyMyTasks(filtered) : filtered;
+        return orderGroupsByPreviewTitle(cut, previewTitles.titles);
+    }, [ listed, filters, mineOnly, previewTitles ]);
+    if (loading) /* @__PURE__ */
+    return jsxRuntime.jsx(TabStatusRow, {
         children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
             label: "Loading tasks…"
         })
-    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
+    });
+    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"
+        })
+    }) : body = /* @__PURE__ */ jsxRuntime.jsx(TaskGroupList, {
+        bands: bands,
+        groups: visible,
+        instanceDefaultOpen: instanceBandDefaultOpen(segment),
+        onOpenTask: onOpenTask,
+        onOpenWorkflow: onOpenWorkflow,
+        showTerminalActions: mineOnly
+    }), /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        flex: 1,
         children: [ 
         /* @__PURE__ */ jsxRuntime.jsx(FilterRowPortal, {
             filters: filters,
@@ -1997,91 +2742,78 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
             options: options,
             slot: filterSlot
         }), 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            direction: "column",
+            flex: 1,
             gap: 2,
+            paddingBottom: 4,
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(index.UnreadableDocsNote, {
                 unreadable: unreadable
             }), 
             /* @__PURE__ */ jsxRuntime.jsx(OrphanedWorkflowsNote, {
                 orphans: orphans
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(TaskGroupList, {
-                bands: bands,
-                groups: visible,
-                instanceDefaultOpen: instanceBandDefaultOpen(segment),
-                onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow,
-                showTerminalActions: mineOnly
-            }) ]
-        }), truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-            text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren't listed.`
-        }) : null ]
+            }), body, truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+                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"
-} ], [firstToolTab, ...restToolTabs] = TOOL_TABS, TOOL_TAB_CODEC = index.workflowsTabCodec([ firstToolTab.value, ...restToolTabs.map(tab => tab.value) ]);
+} ], TOOL_TAB_VALUES = TOOL_TABS.map(tab => tab.value);
 
-function useToolTab() {
-    const router$1 = router.useRouter(), params = Object.fromEntries(router$1.state._searchParams ?? []);
-    return {
-        tab: TOOL_TAB_CODEC.read(params),
-        setTab: next => router$1.navigate({
-            _searchParams: definedEntries(TOOL_TAB_CODEC.write(params, next))
-        })
-    };
-}
-
-function definedEntries(params) {
-    return Object.entries(params).filter(entry => entry[1] !== void 0);
-}
-
-function carryingSearchParams(state, searchParams) {
-    return searchParams === void 0 ? state : {
-        ...state,
-        _searchParams: searchParams
-    };
+function InstanceStreamKeepAlive() {
+    return useToolInstances(), null;
 }
 
 function WorkflowsToolRoot() {
-    const router$1 = router.useRouter(), {seedInstance: seedInstance} = index.useWorkflowContext(), {tab: tab} = useToolTab();
+    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);
+    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,
         via: "open"
     });
-    const instanceId = typeof router$1.state.instanceId == "string" ? router$1.state.instanceId : void 0;
-    return instanceId ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowInstanceDetail, {
+    let panel;
+    return instanceId !== void 0 ? panel = /* @__PURE__ */ jsxRuntime.jsx(WorkflowInstanceDetail, {
         instanceId: instanceId,
-        onBack: () => router$1.navigate(carryingSearchParams({}, router$1.state._searchParams))
-    }, instanceId) : /* @__PURE__ */ jsxRuntime.jsx(WorkflowsHome, {
+        onBack: goHome
+    }, instanceId) : definitionName !== void 0 ? panel = /* @__PURE__ */ jsxRuntime.jsx(DefinitionDetail, {
+        definitionName: definitionName
+    }, definitionName) : panel = /* @__PURE__ */ jsxRuntime.jsx(WorkflowsHome, {
+        filterSlot: filterSlot,
+        onOpenDefinition: name => router$1.navigate({
+            definitionName: name
+        }),
         onOpenInstance: instance => {
-            typeof instance != "string" && seedInstance(instance), router$1.navigate(carryingSearchParams({
+            typeof instance != "string" && seedInstance(instance), router$1.navigate({
                 instanceId: typeof instance == "string" ? instance : instance._id
-            }, router$1.state._searchParams));
-        }
-    });
-}
-
-function WorkflowsHome({onOpenInstance: onOpenInstance}) {
-    const {tab: tab, setTab: setTab} = useToolTab(), telemetry = workflowReact.useWorkflowTelemetry(), 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);
-    }, [filterSlot, setFilterSlot] = react.useState(null), scrollerRef = react.useRef(null);
-    return react.useEffect(() => {
-        scrollerRef.current?.scrollTo({
-            top: 0
-        });
-    }, [ tab ]), 
+            });
+        },
+        tab: tab
+    }), 
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, {
         height: "fill",
-        children: [ 
+        children: [ instanceStreamLatched ? /* @__PURE__ */ jsxRuntime.jsx(InstanceStreamKeepAlive, {}) : null, 
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             direction: "column",
             height: "fill",
@@ -2090,75 +2822,99 @@ function WorkflowsHome({onOpenInstance: onOpenInstance}) {
             /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                 flex: "none",
                 padding: 3,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, {
-                    width: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                    gap: 3,
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                        align: "center",
                         gap: 3,
+                        paddingLeft: 2,
                         children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                            align: "center",
-                            gap: 3,
-                            paddingLeft: 2,
-                            children: [ 
-                            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                                size: 2,
-                                weight: "semibold",
-                                children: "Workflows"
-                            }), 
-                            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                                flex: 1
-                            }), 
-                            /* @__PURE__ */ jsxRuntime.jsx(NewWorkflowButton, {}) ]
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                            size: 1,
+                            weight: "semibold",
+                            children: "Workflows"
                         }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(index.TabSwitch, {
-                            ariaControls: "workflows-tool-panel",
-                            idPrefix: "workflows-tool-tab",
-                            onSelect: next => {
-                                next !== tab && telemetry.log(index.WorkflowToolOpened, {
-                                    tab: next,
-                                    via: "tab-switch"
-                                }), setTab(next);
-                            },
-                            options: TOOL_TABS,
-                            selected: tab
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                            flex: 1
                         }), 
-                        /* @__PURE__ */ jsxRuntime.jsx("div", {
-                            ref: setFilterSlot
-                        }) ]
-                    })
+                        /* @__PURE__ */ jsxRuntime.jsx(NewWorkflowButton, {}) ]
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(index.TabSwitch, {
+                        ariaControls: "workflows-tool-panel",
+                        idPrefix: "workflows-tool-tab",
+                        onSelect: next => {
+                            next !== tab && telemetry.log(index.WorkflowToolOpened, {
+                                tab: next,
+                                via: "tab-switch"
+                            }), setTab(next);
+                        },
+                        options: TOOL_TABS,
+                        selected: tab
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        ref: setFilterSlot
+                    }) ]
                 })
             }), 
             /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                ref: scrollerRef,
                 flex: 1,
-                overflow: "auto",
-                paddingX: 3,
+                overflow: "hidden",
+                children: panel
+            }) ]
+        }) ]
+    });
+}
+
+function WorkflowsHome({filterSlot: filterSlot, onOpenDefinition: onOpenDefinition, onOpenInstance: onOpenInstance, 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(() => {
+        scrollerRef.current?.scrollTo({
+            top: 0
+        });
+    }, [ tab ]), /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            ref: scrollerRef,
+            flex: 1,
+            overflow: "auto",
+            paddingX: 3,
+            style: {
+                scrollbarGutter: "stable"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, {
+                "aria-labelledby": `workflows-tool-tab-${tab}`,
+                id: "workflows-tool-panel",
                 style: {
-                    scrollbarGutter: "stable"
+                    display: "flex",
+                    flexDirection: "column",
+                    minHeight: "100%"
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, {
-                    width: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, {
-                        "aria-labelledby": `workflows-tool-tab-${tab}`,
-                        id: "workflows-tool-panel",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                            paddingBottom: 4,
-                            paddingTop: 1,
-                            children: /* @__PURE__ */ jsxRuntime.jsx(TasksTab, {
-                                filterSlot: filterSlot,
-                                identity: identity,
-                                instances: [ ...instances.inFlight, ...instances.settled ],
-                                loading: instances.loading,
-                                onOpenTask: setOpenTask,
-                                onOpenWorkflow: openInstance,
-                                segment: tab,
-                                truncated: instances.truncated,
-                                unreadable: instances.unreadable
-                            })
-                        })
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
+                    direction: "column",
+                    flex: 1,
+                    children: tab === "definitions" ? /* @__PURE__ */ jsxRuntime.jsx(DefinitionsTab, {
+                        onOpenDefinition: onOpenDefinition
+                    }) : /* @__PURE__ */ jsxRuntime.jsx(TasksTab, {
+                        filterSlot: filterSlot,
+                        identity: identity,
+                        instances: [ ...instances.inFlight, ...instances.settled ],
+                        loading: instances.loading,
+                        onOpenTask: setOpenTask,
+                        onOpenWorkflow: openInstance,
+                        segment: tab,
+                        truncated: instances.truncated,
+                        unreadable: instances.unreadable
                     })
                 })
-            }) ]
+            })
         }), openTask ? /* @__PURE__ */ jsxRuntime.jsx(ToolActivityDialog, {
             onClose: () => setOpenTask(null),
             target: openTask