@sanity/workflow-studio-plugin 0.4.0 → 0.5.0

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

@@ -1,16 +1,20 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), workflowEngine = require("@sanity/workflow-engine"), 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"), sanity = require("sanity"), workflowStudio = require("@sanity/workflow-studio"), ArrowLeft = require("@sanity/icons/ArrowLeft"), workflowDiagram = require("@sanity/workflow-diagram"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal");
+var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), 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"), 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"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), workflowStudio = require("@sanity/workflow-studio");
 
-function MutedNote({text: text}) {
+function SpinnerSlot({busy: busy}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Box, {
-        paddingY: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: text
-        })
+    return jsxRuntime.jsx(ui.Flex, {
+        align: "center",
+        flex: "none",
+        justify: "center",
+        style: {
+            width: 19,
+            height: 19
+        },
+        children: busy ? /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
+            muted: !0
+        }) : null
     });
 }
 
@@ -20,70 +24,419 @@ function documentRefsOf(instance) {
     return [ ...seen.values() ];
 }
 
-function RefChips({refs: refs, max: max = 2}) {
-    if (refs.length === 0) return null;
-    const shown = refs.slice(0, max), overflow = refs.length - shown.length;
+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, {
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(index.ActivitiesList, {
+                entry: entry,
+                onOpenActivity: onOpenActivity
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(index.TodoItemsList, {
+                entry: entry
+            }) ]
+        })
+    });
+}
+
+function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
+    const entry = index.useWorkflowInstanceEntry(instanceId), [graceOver, setGraceOver] = react.useState(!1);
+    return react.useEffect(() => {
+        const timer = setTimeout(() => setGraceOver(!0), 2500);
+        return () => clearTimeout(timer);
+    }, [ instanceId ]), entry?.invalid ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+        padding: 4,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.InvalidDocNotice, {
+            invalid: entry.invalid
+        })
+    }) : entry ? /* @__PURE__ */ jsxRuntime.jsx(InstanceDetailPanel, {
+        entry: entry,
+        onBack: onBack
+    }) : /* @__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…"
+        })
+    });
+}
+
+function NotFound({id: id, onBack: onBack}) {
     /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 3,
-        wrap: "wrap",
-        children: [ shown.map(ref => /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
-            gdr: ref,
-            layout: "inline"
-        }, ref.id)), overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 4,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
             muted: !0,
             size: 1,
-            children: [ "+", overflow, " more" ]
+            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, onBack: onBack}) {
+    const definition = index.useDefinition(entry), [openActivity, setOpenActivity] = react.useState(null), {instance: instance} = entry;
+    return react.useEffect(() => {
+        openActivity && index.openActivityGone({
+            entry: entry,
+            target: openActivity
+        }) && setOpenActivity(null);
+    }, [ entry, openActivity ]), /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(DetailHeader, {
+            definition: definition,
+            entry: entry,
+            onBack: onBack
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: 1,
+            overflow: "auto",
+            paddingX: 4,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+                gap: 4,
+                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
+                    })
+                }) ]
+            })
+        }), openActivity ? /* @__PURE__ */ jsxRuntime.jsx(index.ActivityDetailDialog, {
+            activityName: openActivity.activityName,
+            breadcrumb: index.instanceBreadcrumb(instance, definition),
+            definition: definition,
+            entry: entry,
+            onClose: () => setOpenActivity(null)
         }) : null ]
     });
 }
 
-function DocRefChips({instance: instance, max: max = 2}) {
-    const refs = react.useMemo(() => documentRefsOf(instance), [ instance ]);
+function DetailHeader({entry: entry, definition: definition, onBack: onBack}) {
+    const {instance: instance, ready: ready} = entry;
     /* @__PURE__ */
-    return jsxRuntime.jsx(RefChips, {
-        max: max,
-        refs: refs
+    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(SpinnerSlot, {
+                busy: !ready || index.isEvaluationStale(entry)
+            }) ]
+        })
     });
 }
 
-function datesOf(state) {
-    return state.filter(entry => entry._type === "date" || entry._type === "datetime").map(entry => entry.value).filter(value => typeof value == "string" && value !== "");
+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 spawnOrigins(instances) {
-    const origins = /* @__PURE__ */ new Map;
-    for (const parent of instances) for (const row of parent.subworkflows ?? []) origins.set(workflowEngine.extractDocumentId(row.ref.id), {
-        parent: parent,
-        activityName: row.activity,
-        cohortStage: row.cohortStage
+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."
+        })
     });
-    return origins;
 }
 
-function rootOf(instance, byId) {
-    const rootRef = instance.ancestors[0];
-    return rootRef ? byId.get(workflowEngine.extractDocumentId(rootRef.id)) ?? instance : instance;
+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 taskRowsOf(args) {
-    const {instance: instance, breadcrumb: breadcrumb, identity: identity} = args, open = workflowEngine.findOpenStageEntry(instance);
-    if (!open) return [];
-    const definition = index.definitionSnapshotOf(instance), state = index.stateByActivity(instance), rows = (open.activities ?? []).map(activity => {
-        const fields = state.get(activity.name) ?? [], declared = index.findActivity({
-            definition: definition,
-            stageName: open.name,
-            activityName: activity.name
-        });
-        return {
+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,
+        error: error
+    };
+}
+
+function NewWorkflowButton() {
+    const {openStartDialog: openStartDialog} = index.useWorkflowContext(), [open, setOpen] = react.useState(!1);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(index.DismissablePopover, {
+        content: open ? /* @__PURE__ */ jsxRuntime.jsx(DefinitionPickerPanel, {
+            onPick: definition => {
+                setOpen(!1), openStartDialog({
+                    definition: definition.name,
+                    label: definition.title
+                });
+            }
+        }) : null,
+        onDismiss: () => setOpen(!1),
+        open: open,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+            fontSize: 1,
+            gap: 2,
+            icon: Add.AddIcon,
+            onClick: () => setOpen(v => !v),
+            padding: 2,
+            selected: open,
+            text: "New workflow"
+        })
+    });
+}
+
+function DefinitionPickerPanel({onPick: onPick}) {
+    const {definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = react.useState(""), visible = react.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        return definitions ? q ? definitions.filter(d => `${d.title} ${d.name}`.toLowerCase().includes(q)) : definitions : [];
+    }, [ definitions, query ]);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        padding: 2,
+        style: {
+            width: 340
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            gap: 2,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
+                autoFocus: !0,
+                fontSize: 1,
+                icon: Search.SearchIcon,
+                onChange: event => setQuery(event.currentTarget.value),
+                placeholder: "Filter workflows…",
+                value: query
+            }), error ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+                text: `Could not load the deployed workflows: ${error}`
+            }) : null, !definitions && !error ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+                label: "Loading workflows…"
+            }) : null, definitions && definitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+                text: "No startable workflows are deployed"
+            }) : null, definitions && definitions.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+                text: "No workflows match"
+            }) : null, 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+                gap: 1,
+                style: {
+                    maxHeight: 320,
+                    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
+    }) : /* @__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…"
+            })
+        })
+    });
+}
+
+function datesOf(state) {
+    return state.filter(entry => entry._type === "date" || entry._type === "datetime").map(entry => entry.value).filter(value => typeof value == "string" && value !== "");
+}
+
+function spawnOrigins(instances) {
+    const origins = /* @__PURE__ */ new Map;
+    for (const parent of instances) for (const row of parent.subworkflows ?? []) origins.set(workflowEngine.extractDocumentId(row.ref.id), {
+        parent: parent,
+        activityName: row.activity,
+        cohortStage: row.cohortStage
+    });
+    return origins;
+}
+
+function rootOf(instance, byId) {
+    const rootRef = instance.ancestors[0];
+    return rootRef ? byId.get(workflowEngine.extractDocumentId(rootRef.id)) ?? instance : instance;
+}
+
+function taskRowsOf(args) {
+    const {instance: instance, identity: identity} = args, open = workflowEngine.findOpenStageEntry(instance);
+    if (!open) return [];
+    const definition = index.definitionSnapshotOf(instance), state = index.stateByActivity(instance), rows = (open.activities ?? []).map(activity => {
+        const fields = state.get(activity.name) ?? [], declared = index.findActivityNode({
+            definition: definition,
+            stageName: open.name,
+            activityName: activity.name
+        }) ?? {
+            name: activity.name
+        }, controlArgs = {
+            activity: declared,
+            status: activity.status,
+            editableFields: void 0
+        };
+        return {
             instanceId: instance._id,
             activityName: activity.name,
-            title: declared.title,
-            description: declared.description,
-            breadcrumb: breadcrumb,
+            title: declared.title ?? activity.name,
             stage: open.name,
-            stageTitle: index.stageTitle(definition, open.name),
             status: activity.status,
             open: index.isOpenActivityStatus(activity.status),
             dates: datesOf(fields),
@@ -91,69 +444,124 @@ function taskRowsOf(args) {
             assignedToMe: identity !== void 0 && index.isActivityAssignedTo({
                 state: fields,
                 who: identity
-            })
+            }),
+            assignControl: index.rowAssignControlState(controlArgs),
+            dateControl: index.rowDateControlState(controlArgs)
         };
     });
     return [ ...rows.filter(r => r.open), ...rows.filter(r => !r.open) ];
 }
 
 function deriveTaskGroups(args) {
-    const {instances: instances, identity: identity} = args, byId = new Map(instances.map(instance => [ instance._id, instance ])), origins = spawnOrigins(instances), groups = /* @__PURE__ */ new Map, ordered = [ ...instances ].sort((a, b) => a.startedAt.localeCompare(b.startedAt));
+    const {instances: instances, identity: identity} = args, byId = new Map(instances.map(instance => [ instance._id, instance ])), origins = spawnOrigins(instances), docGroups = /* @__PURE__ */ new Map, withoutDocuments = [], ordered = [ ...instances ].sort((a, b) => a.startedAt.localeCompare(b.startedAt));
     for (const instance of ordered) {
-        const origin = origins.get(instance._id), breadcrumb = origin ? index.findActivity({
-            definition: index.definitionSnapshotOf(origin.parent),
-            stageName: origin.cohortStage,
-            activityName: origin.activityName
-        }).title : void 0, rows = taskRowsOf({
+        const rows = taskRowsOf({
             instance: instance,
-            breadcrumb: breadcrumb,
             identity: identity
-        });
-        if (rows.length === 0) continue;
-        const root = rootOf(instance, byId), documents = documentRefsOf(root), document = documents[0], key = document ? `doc:${document.id}` : `def:${root.definition}`, held = groups.get(key);
+        }), first = rows[0];
+        if (!first) continue;
+        const origin = origins.get(instance._id), definition = index.definitionSnapshotOf(instance), entry = {
+            instanceId: instance._id,
+            workflowName: instance.definition,
+            title: index.instanceTitle(instance, definition),
+            stageTitle: index.stageTitle(definition, first.stage),
+            breadcrumb: origin ? index.findActivity({
+                definition: index.definitionSnapshotOf(origin.parent),
+                stageName: origin.cohortStage,
+                activityName: origin.activityName
+            }).title : void 0,
+            rows: rows
+        }, root = rootOf(instance, byId), documents = documentRefsOf(root), document = documents[0];
+        if (!document) {
+            withoutDocuments.push(entry);
+            continue;
+        }
+        const key = `doc:${document.id}`, held = docGroups.get(key);
         if (held) {
-            held.rows.push(...rows);
+            held.instances.push(entry);
             continue;
         }
-        const definition = index.definitionSnapshotOf(root);
-        groups.set(key, {
+        docGroups.set(key, {
             group: {
                 key: key,
                 document: document,
-                documents: documents,
-                instanceId: root._id,
-                workflowName: root.definition,
-                workflowTitle: index.instanceTitle(root, definition),
-                workflowDescription: definition?.description
+                documents: documents
             },
-            rows: rows
+            instances: [ entry ]
         });
     }
-    const assembled = [ ...groups.values() ].map(({group: group, rows: rows}) => ({
-        ...group,
-        rows: rows
-    }));
     return {
-        withDocuments: assembled.filter(g => g.document !== void 0),
-        withoutDocuments: assembled.filter(g => g.document === void 0)
+        withDocuments: [ ...docGroups.values() ].map(({group: group, instances: bands}) => ({
+            ...group,
+            instances: bands
+        })),
+        withoutDocuments: withoutDocuments
+    };
+}
+
+function cutTaskGroups(groups, cut) {
+    const cutBands = bands => bands.filter(band => cut.keepBand?.(band) ?? !0).map(band => ({
+        ...band,
+        rows: band.rows.filter(cut.keepRow)
+    })).filter(band => band.rows.length > 0);
+    return {
+        withDocuments: groups.withDocuments.filter(group => cut.keepGroup?.(group) ?? !0).map(group => ({
+            ...group,
+            instances: cutBands(group.instances)
+        })).filter(group => group.instances.length > 0),
+        withoutDocuments: cut.dropUngrouped ? [] : cutBands(groups.withoutDocuments)
     };
 }
 
 function onlyMyTasks(groups) {
-    const cut = list => list.map(group => ({
-        ...group,
-        rows: group.rows.filter(row => row.assignedToMe)
-    })).filter(group => group.rows.length > 0);
+    return cutTaskGroups(groups, {
+        keepRow: row => row.assignedToMe
+    });
+}
+
+function rowActivityEval(entry, row) {
+    const evaluation = entry?.evaluation;
+    if (!(evaluation === void 0 || evaluation.currentStage.stage.name !== row.stage)) return evaluation.currentStage.activities.find(a => a.activity.name === row.activityName);
+}
+
+function taskRowRender(row, entry) {
+    const activityEval = rowActivityEval(entry, row);
+    if (entry?.evaluation === void 0 || activityEval === void 0) return {
+        face: index.committedRowFace(row),
+        assignState: row.assignControl,
+        assigneeIds: row.assigneeIds,
+        dates: row.dates,
+        dateState: row.dateControl,
+        terminalActions: [],
+        stale: !1
+    };
+    const activityState = index.stateByActivity(entry.instance), {face: face, assignState: assignState, assigneeIds: assigneeIds, terminalActions: terminalActions} = index.activityRowProps({
+        activityEval: activityEval,
+        activityState: activityState,
+        editableFields: entry.evaluation.editableFields
+    });
     return {
-        withDocuments: cut(groups.withDocuments),
-        withoutDocuments: cut(groups.withoutDocuments)
+        face: face,
+        assignState: assignState,
+        assigneeIds: assigneeIds,
+        dates: datesOf(activityState.get(row.activityName) ?? []),
+        dateState: index.rowDateControlState({
+            activity: activityEval.activity,
+            status: activityEval.status,
+            editableFields: entry.evaluation.editableFields
+        }),
+        terminalActions: terminalActions,
+        stale: index.isEvaluationStale(entry)
     };
 }
 
 function taskFilterOptions(groups) {
-    const all = [ ...groups.withDocuments, ...groups.withoutDocuments ], workflows = /* @__PURE__ */ new Map, documents = /* @__PURE__ */ new Map;
-    for (const group of all) workflows.set(group.workflowName, group.workflowTitle), 
-    group.document && documents.set(group.document.id, group.document);
+    const workflows = /* @__PURE__ */ new Map, documents = /* @__PURE__ */ new Map;
+    for (const group of groups.withDocuments) {
+        documents.set(group.document.id, group.document);
+        for (const band of group.instances) workflows.set(band.workflowName, band.title);
+    }
+    for (const band of groups.withoutDocuments) workflows.set(band.workflowName, band.title);
     return {
         workflows: [ ...workflows ].map(([name, title]) => ({
             name: name,
@@ -270,72 +678,18 @@ function rowMatches(args) {
     }));
 }
 
-function groupMatches(group, filters) {
-    const workflows = activeArm(filters.workflows);
-    if (workflows && !workflows.includes(group.workflowName)) return !1;
-    const documentIds = activeArm(filters.documentIds);
-    return !(documentIds && (!group.document || !documentIds.includes(group.document.id)));
-}
-
 function applyTaskFilters(args) {
-    const {groups: groups, filters: filters, now: now} = args, cut = list => list.filter(group => groupMatches(group, filters)).map(group => ({
-        ...group,
-        rows: group.rows.filter(row => rowMatches({
+    const {groups: groups, filters: filters, now: now} = args, documentIds = activeArm(filters.documentIds), workflows = activeArm(filters.workflows);
+    return cutTaskGroups(groups, {
+        keepRow: row => rowMatches({
             row: row,
             filters: filters,
             now: now
-        }))
-    })).filter(group => group.rows.length > 0);
-    return {
-        withDocuments: cut(groups.withDocuments),
-        withoutDocuments: cut(groups.withoutDocuments)
-    };
-}
-
-function instanceFilterOptions(rows) {
-    const workflows = /* @__PURE__ */ new Map, documents = /* @__PURE__ */ new Map;
-    for (const row of rows) {
-        workflows.set(row.instance.definition, row.workflowTitle);
-        for (const doc of row.documents) documents.set(doc.id, doc);
-    }
-    return {
-        workflows: [ ...workflows ].map(([name, title]) => ({
-            name: name,
-            title: title
-        })),
-        documents: [ ...documents.values() ]
-    };
-}
-
-function applyInstanceFilters(args) {
-    const {rows: rows, filters: filters} = args, workflows = activeArm(filters.workflows), documentIds = activeArm(filters.documentIds);
-    return rows.filter(row => !workflows || workflows.includes(row.instance.definition)).filter(row => !documentIds || row.documents.some(doc => documentIds.includes(doc.id))).map(row => row.instance);
-}
-
-function hasTaskArms(filters) {
-    return (filters.assigneeIds?.length ?? 0) > 0 || filters.date !== void 0;
-}
-
-function instanceStatusMatches(instance, statuses) {
-    const arm = activeArm(statuses);
-    if (!arm) return !0;
-    const state = workflowEngine.terminalState(instance);
-    return state === "in-flight" ? arm.includes("open") : state === "completed" && arm.includes("completed");
-}
-
-function instanceIdsMatchingTaskArms(args) {
-    const {instances: instances, identity: identity, filters: filters, now: now} = args;
-    if (!hasTaskArms(filters)) return null;
-    const groups = deriveTaskGroups({
-        instances: instances,
-        identity: identity
-    }), {statuses: _workflowLevel, ...taskArms} = filters, cut = applyTaskFilters({
-        groups: groups,
-        filters: taskArms,
-        now: now
-    }), ids = /* @__PURE__ */ new Set;
-    for (const group of [ ...cut.withDocuments, ...cut.withoutDocuments ]) for (const row of group.rows) ids.add(row.instanceId);
-    return ids;
+        }),
+        keepBand: band => !workflows || workflows.includes(band.workflowName),
+        keepGroup: group => !documentIds || documentIds.includes(group.document.id),
+        dropUngrouped: documentIds !== void 0
+    });
 }
 
 const NOTHING = {
@@ -843,653 +1197,141 @@ function ActiveFilterChips({filters: filters, options: options, onChange: onChan
     });
 }
 
-const INSTANCE_CAP = 200, NEWEST_INSTANCES = {
-    includeCompleted: !0,
-    limit: INSTANCE_CAP
-};
-
-function useToolInstances() {
-    const {engine: engine} = index.useWorkflowContext(), {instances: instances, loading: loading, invalid: invalid} = 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 === INSTANCE_CAP,
-            loading: loading,
-            invalid: invalid
-        };
-    }, [ instances, loading, invalid ]);
-}
-
-function toFilterRows(instances) {
-    return instances.map(instance => ({
-        instance: instance,
-        workflowTitle: index.instanceTitle(instance, index.definitionSnapshotOf(instance)),
-        documents: documentRefsOf(instance)
-    }));
-}
-
-function cutInstances(args) {
-    const {rows: rows, filters: filters, taskArmIds: taskArmIds} = args, kept = applyInstanceFilters({
-        rows: rows,
-        filters: filters
-    }).filter(instance => instanceStatusMatches(instance, filters.statuses));
-    return taskArmIds === null ? kept : kept.filter(instance => taskArmIds.has(instance._id));
-}
-
-function WorkflowsDashboard({instances: instances, onOpenInstance: onOpenInstance}) {
-    const {inFlight: inFlight, settled: settled, truncated: truncated, loading: loading} = instances, [filters, setFilters] = react.useState({}), identity = index.useAssignmentIdentity(), inFlightRows = react.useMemo(() => toFilterRows(inFlight), [ inFlight ]), settledRows = react.useMemo(() => toFilterRows(settled), [ settled ]), options = react.useMemo(() => instanceFilterOptions([ ...inFlightRows, ...settledRows ]), [ inFlightRows, settledRows ]), taskArmIds = react.useMemo(() => instanceIdsMatchingTaskArms({
-        instances: [ ...inFlight, ...settled ],
-        identity: identity,
-        filters: filters,
-        now: /* @__PURE__ */ new Date
-    }), [ inFlight, settled, identity, filters ]), visibleInFlight = react.useMemo(() => cutInstances({
-        rows: inFlightRows,
-        filters: filters,
-        taskArmIds: taskArmIds
-    }), [ inFlightRows, filters, taskArmIds ]), visibleSettled = react.useMemo(() => cutInstances({
-        rows: settledRows,
-        filters: filters,
-        taskArmIds: taskArmIds
-    }), [ settledRows, filters, taskArmIds ]);
-    return loading ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
-        label: "Loading workflows…"
-    }) : inFlight.length === 0 && settled.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-        text: "No workflows yet — start one with “New workflow”"
-    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            gap: 2,
-            justify: "flex-end",
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ActiveFilterChips, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(TaskFilterMenu, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
-            }) ]
-        }), visibleInFlight.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-            text: "No running workflows match"
-        }) : /* @__PURE__ */ jsxRuntime.jsx(InstanceRows, {
-            instances: visibleInFlight,
-            onOpenInstance: onOpenInstance
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(SettledRows, {
-            defaultShown: filters.statuses?.includes("completed") ?? !1,
-            instances: visibleSettled,
-            onOpenInstance: onOpenInstance
-        }), truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-            text: `Showing the latest ${INSTANCE_CAP} workflows.`
-        }) : null ]
-    });
-}
-
-function InstanceRows({instances: instances, onOpenInstance: onOpenInstance}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: instances.map(instance => /* @__PURE__ */ jsxRuntime.jsx(InstanceRow, {
-            instance: instance,
-            onOpen: () => onOpenInstance(instance)
-        }, instance._id))
-    });
-}
-
-function SettledRows({instances: instances, onOpenInstance: onOpenInstance, defaultShown: defaultShown}) {
-    const [toggled, setToggled] = react.useState(void 0), shown = toggled ?? defaultShown;
-    return instances.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 2,
-        marginTop: 3,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                fontSize: 1,
-                icon: shown ? ChevronDown.ChevronDownIcon : ChevronRight.ChevronRightIcon,
-                mode: "bleed",
-                onClick: () => setToggled(!shown),
-                padding: 2,
-                text: `${shown ? "Hide" : "Show"} ${instances.length} finished`
-            })
-        }), shown ? /* @__PURE__ */ jsxRuntime.jsx(InstanceRows, {
-            instances: instances,
-            onOpenInstance: onOpenInstance
-        }) : null ]
-    });
-}
-
-function InstanceRow({instance: instance, onOpen: onOpen}) {
-    const definition = react.useMemo(() => index.definitionSnapshotOf(instance), [ instance ]);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
+function FilterRowPortal({filters: filters, onChange: onChange, options: options, slot: slot}) {
+    return slot ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
         align: "center",
         gap: 2,
+        justify: "flex-end",
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-            as: "button",
-            flex: 1,
-            onClick: onOpen,
-            padding: 3,
-            paddingLeft: 4,
-            radius: 2,
-            style: {
-                cursor: "pointer",
-                textAlign: "left"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                align: "center",
-                gap: 3,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                    size: 1,
-                    weight: "medium",
-                    children: index.instanceTitle(instance, definition)
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                    muted: !0,
-                    size: 1,
-                    children: [ "Started ", index.formatDate(instance.startedAt) ]
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                    flex: 1
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(index.AbortedBadge, {
-                    instance: instance
-                }) ]
-            })
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(DocRefChips, {
-            instance: instance
-        }) ]
-    });
-}
-
-function SpinnerSlot({busy: busy}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Flex, {
-        align: "center",
-        flex: "none",
-        justify: "center",
-        style: {
-            width: 19,
-            height: 19
-        },
-        children: busy ? /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
-            muted: !0
-        }) : null
-    });
-}
-
-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, {
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(index.ActivitiesList, {
-                entry: entry,
-                onOpenActivity: onOpenActivity
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(index.TodoItemsList, {
-                entry: entry
-            }) ]
-        })
-    });
-}
-
-function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
-    const entry = index.useWorkflowInstanceEntry(instanceId), [graceOver, setGraceOver] = react.useState(!1);
-    return react.useEffect(() => {
-        const timer = setTimeout(() => setGraceOver(!0), 2500);
-        return () => clearTimeout(timer);
-    }, [ instanceId ]), entry?.invalid ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-        padding: 4,
-        children: /* @__PURE__ */ jsxRuntime.jsx(index.InvalidDocNotice, {
-            invalid: entry.invalid
-        })
-    }) : entry ? /* @__PURE__ */ jsxRuntime.jsx(InstanceDetailPanel, {
-        entry: entry,
-        onBack: onBack
-    }) : /* @__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…"
-        })
-    });
-}
-
-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, onBack: onBack}) {
-    const definition = index.useDefinition(entry), [openActivity, setOpenActivity] = react.useState(null), {instance: instance} = entry;
-    return react.useEffect(() => {
-        openActivity && index.openActivityGone({
-            entry: entry,
-            target: openActivity
-        }) && setOpenActivity(null);
-    }, [ entry, openActivity ]), /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-        direction: "column",
-        height: "fill",
-        overflow: "hidden",
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(DetailHeader, {
-            definition: definition,
-            entry: entry,
-            onBack: onBack
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            flex: 1,
-            overflow: "auto",
-            paddingX: 4,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                gap: 4,
-                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
-                    })
-                }) ]
-            })
-        }), openActivity ? /* @__PURE__ */ jsxRuntime.jsx(index.ActivityDetailDialog, {
-            activityName: openActivity.activityName,
-            breadcrumb: index.instanceBreadcrumb(instance, definition),
-            definition: definition,
-            entry: entry,
-            onClose: () => setOpenActivity(null)
-        }) : null ]
-    });
-}
-
-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(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(ActiveFilterChips, {
+            filters: filters,
+            onChange: onChange,
+            options: options
         }), 
-        /* @__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 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,
-        error: error
-    };
-}
-
-function NewWorkflowButton() {
-    const {openStartDialog: openStartDialog} = index.useWorkflowContext(), [open, setOpen] = react.useState(!1);
-    /* @__PURE__ */
-    return jsxRuntime.jsx(index.DismissablePopover, {
-        content: open ? /* @__PURE__ */ jsxRuntime.jsx(DefinitionPickerPanel, {
-            onPick: definition => {
-                setOpen(!1), openStartDialog({
-                    definition: definition.name,
-                    label: definition.title
-                });
-            }
-        }) : null,
-        onDismiss: () => setOpen(!1),
-        open: open,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-            fontSize: 1,
-            icon: Add.AddIcon,
-            onClick: () => setOpen(v => !v),
-            padding: 2,
-            selected: open,
-            text: "New workflow",
-            tone: "primary"
-        })
-    });
-}
-
-function DefinitionPickerPanel({onPick: onPick}) {
-    const {definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = react.useState(""), visible = react.useMemo(() => {
-        const q = query.trim().toLowerCase();
-        return definitions ? q ? definitions.filter(d => `${d.title} ${d.name}`.toLowerCase().includes(q)) : definitions : [];
-    }, [ definitions, query ]);
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Box, {
-        padding: 2,
-        style: {
-            width: 340
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
-                autoFocus: !0,
-                fontSize: 1,
-                icon: Search.SearchIcon,
-                onChange: event => setQuery(event.currentTarget.value),
-                placeholder: "Filter workflows…",
-                value: query
-            }), error ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: `Could not load the deployed workflows: ${error}`
-            }) : null, !definitions && !error ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
-                label: "Loading workflows…"
-            }) : null, definitions && definitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: "No startable workflows are deployed"
-            }) : null, definitions && definitions.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: "No workflows match"
-            }) : null, 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
-                gap: 1,
-                style: {
-                    maxHeight: 320,
-                    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
-    }) : /* @__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…"
-            })
-        })
-    });
+        /* @__PURE__ */ jsxRuntime.jsx(TaskFilterMenu, {
+            filters: filters,
+            onChange: onChange,
+            options: options
+        }) ]
+    }), slot) : null;
 }
 
-function TaskGroupList({groups: groups, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow}) {
-    return groups.withDocuments.length === 0 && groups.withoutDocuments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-        text: "No tasks match — adjust the filters, or start a workflow"
-    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 2,
-        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsxRuntime.jsx(DocumentTaskGroup, {
-            group: group,
-            onOpenTask: onOpenTask,
-            onOpenWorkflow: onOpenWorkflow
-        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(CollapsibleGroup, {
-            header: /* @__PURE__ */ jsxRuntime.jsx(GroupTitle, {
-                text: "Workflows without Studio documents"
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
-                gap: 2,
-                paddingLeft: 2,
-                children: groups.withoutDocuments.map(group => /* @__PURE__ */ jsxRuntime.jsx(CollapsibleGroup, {
-                    header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                        children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                            muted: !0,
-                            size: 1,
-                            children: /* @__PURE__ */ jsxRuntime.jsx(index.StageGlyph, {})
-                        }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeTitle, {
-                            group: group
-                        }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                            flex: 1
-                        }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(GroupMenu, {
-                            group: group,
-                            onOpenWorkflow: onOpenWorkflow
-                        }) ]
-                    }),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(TaskRows, {
-                        onOpenTask: onOpenTask,
-                        rows: group.rows
-                    })
-                }, group.key))
+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({
+        state: state,
+        dates: dates
+    }), display = raw === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+        muted: !0,
+        size: 1,
+        children: index.formatDate(raw)
+    });
+    if (state.kind === "none") return display;
+    if (state.kind === "closed") return display === null ? null : /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+        text: state.reason,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+            "aria-label": "Date",
+            as: "span",
+            fontSize: 1,
+            mode: "bleed",
+            onClick: index.stopRowClick,
+            onMouseDown: index.stopRowMouseDown,
+            padding: 2,
+            children: display
+        })
+    });
+    const kind = index.dateControlKind(state), commit = (mode, value) => {
+        state.kind === "editable" && save(() => editFieldFor(instanceId, {
+            target: index.editTargetOf(state.field),
+            ...mode === "set" ? {
+                mode: mode,
+                value: value
+            } : {
+                mode: mode
+            }
+        }).then(() => {}));
+    }, handleClick = e => {
+        e.stopPropagation(), setOpen(v => !v);
+    };
+    /* @__PURE__ */
+    return jsxRuntime.jsx(index.DismissablePopover, {
+        content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            onClick: index.stopRowClick,
+            children: state.kind === "loading" || kind === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+                label: "Loading…",
+                padding: 3
+            }) : /* @__PURE__ */ jsxRuntime.jsx(workflowComponents.ClearableDatePicker, {
+                clearLabel: "Clear date",
+                onClear: () => {
+                    setOpen(!1), commit("unset");
+                },
+                onPick: next => {
+                    kind === "date" && setOpen(!1), commit("set", index.serializeDateFieldValue(next, kind));
+                },
+                selectTime: kind === "datetime",
+                value: index.parseDateFieldValue(state.field.value, kind)
             })
-        }) : null ]
+        }),
+        onDismiss: () => setOpen(!1),
+        open: open,
+        children: display ? /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+            "aria-label": "Change date",
+            as: "span",
+            fontSize: 1,
+            mode: "bleed",
+            onClick: handleClick,
+            onMouseDown: index.stopRowMouseDown,
+            padding: 2,
+            children: display
+        }) : /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
+            disabled: open,
+            text: "Set date",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                "aria-label": "Set date",
+                as: "span",
+                fontSize: 1,
+                icon: Calendar.CalendarIcon,
+                mode: "bleed",
+                onClick: handleClick,
+                onMouseDown: index.stopRowMouseDown,
+                padding: 2
+            })
+        })
     });
 }
 
-function GroupTitle({text: text}) {
+function RefChips({refs: refs, max: max = 2}) {
+    if (refs.length === 0) return null;
+    const shown = refs.slice(0, max), overflow = refs.length - shown.length;
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Text, {
-        size: 1,
-        weight: "semibold",
-        children: text
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 3,
+        wrap: "wrap",
+        children: [ shown.map(ref => /* @__PURE__ */ jsxRuntime.jsx(index.DocPreviewLink, {
+            gdr: ref,
+            layout: "inline"
+        }, ref.id)), overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: [ "+", overflow, " more" ]
+        }) : null ]
     });
 }
 
-function WorkflowBadgeTitle({group: group}) {
-    const badge = /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, {
-        fontSize: 1,
-        mode: "outline",
-        children: group.workflowTitle
-    });
-    return group.workflowDescription ? /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
-        text: group.workflowDescription,
-        children: badge
-    }) : badge;
-}
+const EMPTY_NOTE = "No tasks match — adjust the filters, or start a workflow", UNGROUPED_TITLE = "Workflows without Studio documents";
 
-function CollapsibleGroup({header: header, children: children}) {
-    const [open, setOpen] = react.useState(!0);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Stack, {
+function TaskGroupList({groups: groups, 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,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
-            paddingX: 2,
-            paddingY: 2,
-            radius: 2,
-            tone: "transparent",
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsxRuntime.jsx(index.CollapsibleBand, {
+            background: !0,
+            sticky: !0,
+            title: workflowEngine.extractDocumentId(group.document.id),
+            header: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
                 align: "center",
-                gap: 2,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    "aria-label": open ? "Collapse" : "Expand",
-                    fontSize: 1,
-                    icon: open ? ChevronDown.ChevronDownIcon : ChevronRight.ChevronRightIcon,
-                    mode: "bleed",
-                    onClick: () => setOpen(v => !v),
-                    padding: 1
-                }), header ]
-            })
-        }), open ? children : null ]
-    });
-}
-
-function DocumentTaskGroup({group: group, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow}) {
-    const document = group.document;
-    return document ? /* @__PURE__ */ jsxRuntime.jsx(CollapsibleGroup, {
-        header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                 flex: "none",
                 style: {
                     maxWidth: "60%"
@@ -1498,323 +1340,333 @@ function DocumentTaskGroup({group: group, onOpenTask: onOpenTask, onOpenWorkflow
                     max: 2,
                     refs: group.documents
                 })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeTitle, {
-                group: group
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                flex: 1
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(GroupMenu, {
-                document: document,
-                group: group,
-                onOpenWorkflow: onOpenWorkflow
-            }) ]
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(TaskRows, {
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(InstanceBands, {
+                instances: group.instances,
+                onOpenTask: onOpenTask,
+                onOpenWorkflow: onOpenWorkflow,
+                showTerminalActions: showTerminalActions
+            })
+        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.CollapsibleBand, {
+            background: !0,
+            sticky: !0,
+            title: UNGROUPED_TITLE,
+            header: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                weight: "semibold",
+                children: UNGROUPED_TITLE
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(InstanceBands, {
+                instances: groups.withoutDocuments,
+                onOpenTask: onOpenTask,
+                onOpenWorkflow: onOpenWorkflow,
+                showTerminalActions: showTerminalActions
+            })
+        }) : null ]
+    });
+}
+
+function targetOf(row) {
+    return {
+        instanceId: row.instanceId,
+        stage: row.stage,
+        activityName: row.activityName
+    };
+}
+
+function InstanceBands({instances: instances, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Stack, {
+        gap: 1,
+        children: instances.map(band => /* @__PURE__ */ jsxRuntime.jsx(InstanceBand, {
+            band: band,
             onOpenTask: onOpenTask,
-            rows: group.rows
-        })
-    }) : null;
+            onOpenWorkflow: onOpenWorkflow,
+            showTerminalActions: showTerminalActions
+        }, band.instanceId))
+    });
 }
 
-function GroupMenu({group: group, document: document, onOpenWorkflow: onOpenWorkflow}) {
-    const router$1 = router.useRouter(), state = index.useDocLink(document);
+function InstanceBand({band: band, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+    const {resolvePathFromState: resolvePathFromState} = router.useRouter();
     /* @__PURE__ */
-    return jsxRuntime.jsx(index.HintedMenuButton, {
-        button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-            "aria-label": "Group actions",
-            fontSize: 1,
-            icon: EllipsisHorizontal.EllipsisHorizontalIcon,
-            mode: "bleed",
-            padding: 2
-        }),
-        hint: "Group actions",
-        id: `task-group-menu-${group.key}`,
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+    return jsxRuntime.jsx(index.CollapsibleBand, {
+        title: band.title,
+        header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-                onClick: () => onOpenWorkflow(group.instanceId),
-                text: "View workflow"
-            }), state.kind === "linked" ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-                onClick: () => router$1.navigateIntent("edit", {
-                    id: state.bareId
+            /* @__PURE__ */ jsxRuntime.jsx(index.LinkChip, {
+                hint: "View workflow",
+                href: resolvePathFromState({
+                    instanceId: band.instanceId
                 }),
-                text: "Open document"
-            }) : null ]
+                onClick: event => {
+                    event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || (event.preventDefault(), 
+                    onOpenWorkflow(band.instanceId));
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                    align: "center",
+                    gap: 2,
+                    style: {
+                        minWidth: 0
+                    },
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        size: 1,
+                        style: {
+                            minWidth: 0
+                        },
+                        textOverflow: "ellipsis",
+                        weight: "medium",
+                        children: band.title
+                    }), band.breadcrumb === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.BreadcrumbTail, {
+                        segments: [ band.breadcrumb ]
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(index.StageFace, {
+                        title: band.stageTitle
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(index.TrailingHairline, {}) ]
         }),
-        popover: {
-            portal: !0
-        }
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            paddingLeft: 5,
+            children: /* @__PURE__ */ jsxRuntime.jsx(TaskRows, {
+                onOpenTask: onOpenTask,
+                rows: band.rows,
+                showTerminalActions: showTerminalActions
+            })
+        })
     });
 }
 
-function TaskRows({rows: rows, onOpenTask: onOpenTask}) {
+function TaskRows({rows: rows, onOpenTask: onOpenTask, showTerminalActions: showTerminalActions}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Stack, {
-        children: rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(TaskRowButton, {
-            onOpen: () => onOpenTask({
-                instanceId: row.instanceId,
-                stage: row.stage,
-                activityName: row.activityName
-            }),
-            row: row
+        gap: 1,
+        children: rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(TaskActivityRow, {
+            onOpen: () => onOpenTask(targetOf(row)),
+            row: row,
+            showTerminalActions: showTerminalActions
         }, `${row.instanceId}:${row.activityName}`))
     });
 }
 
-function RowDate({dates: dates}) {
-    const first = dates.find(value => index.parseStoredDateValue(value) !== void 0);
-    return first === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-        muted: !0,
-        size: 1,
-        children: index.formatDate(first)
-    });
-}
-
-function RowTitle({row: row}) {
-    const title = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-        size: 1,
-        style: row.open ? void 0 : {
-            opacity: .66
-        },
-        weight: "medium",
-        children: row.title
+function TaskActivityRow({row: row, onOpen: onOpen, showTerminalActions: showTerminalActions}) {
+    const entry = index.useWorkflowInstanceEntry(row.instanceId), render = taskRowRender(row, entry);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(index.StaleLock, {
+        stale: render.stale,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.ActivityRow, {
+            assignState: render.assignState,
+            assigneeIds: render.assigneeIds,
+            dateControl: /* @__PURE__ */ jsxRuntime.jsx(ActivityDateControl, {
+                dates: render.dates,
+                instanceId: row.instanceId,
+                state: render.dateState
+            }),
+            face: render.face,
+            instanceId: row.instanceId,
+            onOpen: onOpen,
+            terminalActions: showTerminalActions ? render.terminalActions : []
+        })
     });
-    return row.description ? /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
-        text: row.description,
-        children: title
-    }) : title;
 }
 
-function RowBreadcrumb({breadcrumb: breadcrumb}) {
-    return breadcrumb ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: breadcrumb
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
-        }) ]
-    }) : null;
-}
+const INSTANCE_CAP = 200, NEWEST_INSTANCES = {
+    includeCompleted: !0,
+    limit: INSTANCE_CAP
+};
 
-function TaskRowButton({row: row, onOpen: onOpen}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Card, {
-        as: "button",
-        onClick: onOpen,
-        padding: 3,
-        paddingLeft: 4,
-        radius: 2,
-        style: {
-            cursor: "pointer",
-            textAlign: "left"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            gap: 3,
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(index.ActivityStatusIcon, {
-                status: row.status
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(RowBreadcrumb, {
-                breadcrumb: row.breadcrumb
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(RowTitle, {
-                row: row
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, {
-                fontSize: 1,
-                mode: "outline",
-                tone: "default",
-                children: row.stageTitle
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-                flex: 1
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(RowDate, {
-                dates: row.dates
-            }), row.assigneeIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.UserAvatarGroup, {
-                ids: row.assigneeIds
-            }) : null ]
-        })
+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({instances: instances, loading: loading, identity: identity, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, truncated: truncated}) {
-    const [segment, setSegment] = react.useState("mine"), [filters, setFilters] = react.useState({}), groups = react.useMemo(() => deriveTaskGroups({
+function TasksTab({filterSlot: filterSlot, instances: instances, loading: loading, identity: identity, mineOnly: mineOnly, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, truncated: truncated, unreadable: unreadable}) {
+    const [filters, setFilters] = react.useState({}), groups = react.useMemo(() => deriveTaskGroups({
         instances: instances,
         identity: identity
     }), [ instances, identity ]), options = react.useMemo(() => taskFilterOptions(groups), [ groups ]), visible = react.useMemo(() => {
-        const segmented = segment === "mine" ? onlyMyTasks(groups) : groups;
-        return applyTaskFilters({
-            groups: segmented,
+        const filtered = applyTaskFilters({
+            groups: groups,
             filters: filters,
             now: /* @__PURE__ */ new Date
         });
-    }, [ groups, segment, filters ]);
-    return loading ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
-        label: "Loading tasks…"
+        return mineOnly ? onlyMyTasks(filtered) : filtered;
+    }, [ groups, filters, mineOnly ]);
+    return loading ? 
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+        paddingLeft: 2,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
+            label: "Loading tasks…"
+        })
     }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
+        /* @__PURE__ */ jsxRuntime.jsx(FilterRowPortal, {
+            filters: filters,
+            onChange: setFilters,
+            options: options,
+            slot: filterSlot
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
             gap: 2,
-            paddingBottom: 3,
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.TabList, {
-                gap: 1,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, {
-                    "aria-controls": "workflow-tasks-panel",
-                    fontSize: 1,
-                    id: "workflow-tasks-mine",
-                    label: "My tasks",
-                    onClick: () => setSegment("mine"),
-                    padding: 2,
-                    selected: segment === "mine"
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, {
-                    "aria-controls": "workflow-tasks-panel",
-                    fontSize: 1,
-                    id: "workflow-tasks-all",
-                    label: "All tasks",
-                    onClick: () => setSegment("all"),
-                    padding: 2,
-                    selected: segment === "all"
-                }) ]
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                flex: 1
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ActiveFilterChips, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
+            /* @__PURE__ */ jsxRuntime.jsx(index.UnreadableDocsNote, {
+                unreadable: unreadable
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(TaskFilterMenu, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
-            }) ]
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
-            id: "workflow-tasks-panel",
-            children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(TaskGroupList, {
                 groups: visible,
                 onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow
-            }), truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren't listed.`
-            }) : null ]
-        }) ]
+                onOpenWorkflow: onOpenWorkflow,
+                showTerminalActions: mineOnly
+            }) ]
+        }), 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: "for-me",
+    label: "For me"
+} ], [firstToolTab, ...restToolTabs] = TOOL_TABS, TOOL_TAB_CODEC = index.workflowsTabCodec([ firstToolTab.value, ...restToolTabs.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 WorkflowsToolRoot() {
     const router$1 = router.useRouter(), {seedInstance: seedInstance} = index.useWorkflowContext(), instanceId = typeof router$1.state.instanceId == "string" ? router$1.state.instanceId : void 0;
     return instanceId ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowInstanceDetail, {
         instanceId: instanceId,
-        onBack: () => router$1.navigate({})
+        onBack: () => router$1.navigate(carryingSearchParams({}, router$1.state._searchParams))
     }, instanceId) : /* @__PURE__ */ jsxRuntime.jsx(WorkflowsHome, {
         onOpenInstance: instance => {
-            typeof instance != "string" && seedInstance(instance), router$1.navigate({
+            typeof instance != "string" && seedInstance(instance), router$1.navigate(carryingSearchParams({
                 instanceId: typeof instance == "string" ? instance : instance._id
-            });
+            }, router$1.state._searchParams));
         }
     });
 }
 
-function ToolPanel({identity: identity, instances: instances, onOpenInstance: onOpenInstance, onOpenTask: onOpenTask, tab: tab}) {
-    return instances.invalid ? /* @__PURE__ */ jsxRuntime.jsx(index.InvalidDocNotice, {
-        invalid: instances.invalid
-    }) : tab === "tasks" ? /* @__PURE__ */ jsxRuntime.jsx(TasksTab, {
-        identity: identity,
-        instances: [ ...instances.inFlight, ...instances.settled ],
-        loading: instances.loading,
-        onOpenTask: onOpenTask,
-        onOpenWorkflow: onOpenInstance,
-        truncated: instances.truncated
-    }) : /* @__PURE__ */ jsxRuntime.jsx(WorkflowsDashboard, {
-        instances: instances,
-        onOpenInstance: onOpenInstance
-    });
-}
-
 function WorkflowsHome({onOpenInstance: onOpenInstance}) {
-    const [tab, setTab] = react.useState("tasks"), instances = useToolInstances(), identity = index.useAssignmentIdentity(), [openTask, setOpenTask] = react.useState(null);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Card, {
+    const {tab: tab, setTab: setTab} = useToolTab(), 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 ]), 
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, {
         height: "fill",
-        overflow: "auto",
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, {
-                width: 2,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                    gap: 4,
-                    children: [ 
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                        align: "center",
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+            direction: "column",
+            height: "fill",
+            overflow: "hidden",
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                flex: "none",
+                padding: 3,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, {
+                    width: 2,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
                         gap: 3,
                         children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                            size: 2,
-                            weight: "semibold",
-                            children: "Workflows"
-                        }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                            flex: 1
+                        /* @__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(NewWorkflowButton, {}) ]
-                    }), 
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.TabList, {
-                        gap: 1,
-                        children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, {
-                            "aria-controls": "workflows-tool-panel",
-                            fontSize: 1,
-                            id: "workflows-tool-tab-tasks",
-                            label: "Tasks",
-                            onClick: () => setTab("tasks"),
-                            padding: 2,
-                            selected: tab === "tasks"
+                        /* @__PURE__ */ jsxRuntime.jsx(index.TabSwitch, {
+                            ariaControls: "workflows-tool-panel",
+                            idPrefix: "workflows-tool-tab",
+                            onSelect: setTab,
+                            options: TOOL_TABS,
+                            selected: tab
                         }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, {
-                            "aria-controls": "workflows-tool-panel",
-                            fontSize: 1,
-                            id: "workflows-tool-tab-workflows",
-                            label: "All workflows",
-                            onClick: () => setTab("workflows"),
-                            padding: 2,
-                            selected: tab === "workflows"
+                        /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            ref: setFilterSlot
                         }) ]
-                    }), 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                    })
+                })
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                ref: scrollerRef,
+                flex: 1,
+                overflow: "auto",
+                paddingX: 3,
+                style: {
+                    scrollbarGutter: "stable"
+                },
+                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(ToolPanel, {
-                            identity: identity,
-                            instances: instances,
-                            onOpenInstance: target => {
-                                if (typeof target != "string") return onOpenInstance(target);
-                                const held = [ ...instances.inFlight, ...instances.settled ].find(i => i._id === target);
-                                onOpenInstance(held ?? target);
-                            },
-                            onOpenTask: setOpenTask,
-                            tab: tab
+                        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,
+                                mineOnly: tab === "for-me",
+                                onOpenTask: setOpenTask,
+                                onOpenWorkflow: openInstance,
+                                truncated: instances.truncated,
+                                unreadable: instances.unreadable
+                            })
                         })
-                    }) ]
+                    })
                 })
-            })
+            }) ]
         }), openTask ? /* @__PURE__ */ jsxRuntime.jsx(ToolActivityDialog, {
             onClose: () => setOpenTask(null),
             target: openTask