@sanity/workflow-studio-plugin 0.3.0 → 0.5.0

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

@@ -1,18 +1,22 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import { Box, Text, Flex, Button, Badge, Stack, Card, useTheme_v2, Spinner, TextInput, Dialog, MenuButton, Menu, MenuItem, TabList, Tab, Container } from "@sanity/ui";
+import { Flex, Spinner, Stack, Box, Text, Button, Card, TextInput, Dialog, Badge, useTheme_v2, Container, TabPanel } from "@sanity/ui";
 
-import { useMemo, useState, useEffect, useRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 
 import { useRouter } from "sanity/router";
 
-import { DocPreviewLink, findActivity, definitionSnapshotOf, instanceTitle, stateByActivity, isActivityAssignedTo, assigneeUserIdsOf, isOpenActivityStatus, stageTitle, formatDate, parseStoredDateValue, useWorkflowContext, isLocalContentResource, useUserDisplays, useProjectMembers, DismissablePopover, DocRefFace, MemberAvatar, DatePicker, useAssignmentIdentity, LoadingRow, InstanceStatusBadge, PendingWorkBadge, instanceNotice, StaleLock, ActivitiesList, TodoItemsList, isEvaluationStale, useWorkflowInstanceEntry, InvalidDocNotice, useDefinition, openActivityGone, GroupHeading, ActivityDetailDialog, instanceBreadcrumb, StageChip, readDeployedDefinitions, describeError, StageGlyph, HoverHint, ActivityStatusIcon, UserAvatarGroup } from "./index.js";
+import { instanceNotice, StaleLock, ActivitiesList, TodoItemsList, isEvaluationStale, useWorkflowInstanceEntry, InvalidDocNotice, LoadingRow, useDefinition, openActivityGone, GroupHeading, ActivityDetailDialog, instanceBreadcrumb, HoverHint, instanceTitle, formatDate, StageChip, stageTitle, AbortedBadge, DocPreviewLink, useWorkflowContext, readDeployedDefinitions, describeError, DismissablePopover, definitionSnapshotOf, findActivity, stateByActivity, findActivityNode, rowDateControlState, rowAssignControlState, isActivityAssignedTo, assigneeUserIdsOf, isOpenActivityStatus, committedRowFace, activityRowProps, parseStoredDateValue, gdrLocality, useUserDisplays, useProjectMembers, DocRefFace, useSaveField, dateControlValue, stopRowMouseDown, stopRowClick, parseDateFieldValue, serializeDateFieldValue, dateControlKind, editTargetOf, CollapsibleBand, LinkChip, BreadcrumbTail, StageFace, TrailingHairline, ActivityRow, UnreadableDocsNote, useAssignmentIdentity, TabSwitch, workflowsTabCodec } from "./index.js";
 
-import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
+import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
+
+import { WorkflowDiagram } from "@sanity/workflow-diagram";
+
+import { entryDocRefs, terminalState, latestDeployedDefinitions, isStartableDefinition, extractDocumentId, findOpenStageEntry } from "@sanity/workflow-engine";
 
-import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
+import { AddIcon } from "@sanity/icons/Add";
 
-import { entryDocRefs, extractDocumentId, findOpenStageEntry, terminalState, tryParseGdr, resourceFromParsed, latestDeployedDefinitions, isStartableDefinition } from "@sanity/workflow-engine";
+import { SearchIcon } from "@sanity/icons/Search";
 
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 
@@ -20,31 +24,31 @@ import { CloseIcon } from "@sanity/icons/Close";
 
 import { FilterIcon } from "@sanity/icons/Filter";
 
-import { endOfDay } from "date-fns/endOfDay";
-
-import { useDocumentPreviewStore, useSchema } from "sanity";
-
-import { useWorkflowInstances } from "@sanity/workflow-studio";
+import { MemberAvatar, DatePicker, ClearableDatePicker } from "@sanity/workflow-components";
 
-import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
+import { endOfDay } from "date-fns/endOfDay";
 
-import { WorkflowDiagram } from "@sanity/workflow-diagram";
+import { createPortal } from "react-dom";
 
-import { AddIcon } from "@sanity/icons/Add";
+import { useDocumentPreviewStore, useSchema } from "sanity";
 
-import { SearchIcon } from "@sanity/icons/Search";
+import { CalendarIcon } from "@sanity/icons/Calendar";
 
-import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
+import { useWorkflowInstances } from "@sanity/workflow-studio";
 
-function MutedNote({text: text}) {
+function SpinnerSlot({busy: busy}) {
     /* @__PURE__ */
-    return jsx(Box, {
-        paddingY: 3,
-        children: /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: text
-        })
+    return jsx(Flex, {
+        align: "center",
+        flex: "none",
+        justify: "center",
+        style: {
+            width: 19,
+            height: 19
+        },
+        children: busy ? /* @__PURE__ */ jsx(Spinner, {
+            muted: !0
+        }) : null
     });
 }
 
@@ -54,1477 +58,1314 @@ 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;
-    /* @__PURE__ */
-    return jsxs(Flex, {
-        align: "center",
-        gap: 3,
-        wrap: "wrap",
-        children: [ shown.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
-            gdr: ref,
-            layout: "inline"
-        }, ref.id)), overflow > 0 ? /* @__PURE__ */ jsxs(Text, {
-            muted: !0,
-            size: 1,
-            children: [ "+", overflow, " more" ]
-        }) : null ]
+function InstanceTaskLists({entry: entry, onOpenActivity: onOpenActivity}) {
+    return instanceNotice(entry) || /* @__PURE__ */ jsx(StaleLock, {
+        stale: isEvaluationStale(entry),
+        children: /* @__PURE__ */ jsxs(Stack, {
+            children: [ 
+            /* @__PURE__ */ jsx(ActivitiesList, {
+                entry: entry,
+                onOpenActivity: onOpenActivity
+            }), 
+            /* @__PURE__ */ jsx(TodoItemsList, {
+                entry: entry
+            }) ]
+        })
     });
 }
 
-function DocRefChips({instance: instance, max: max = 2}) {
-    const refs = useMemo(() => documentRefsOf(instance), [ instance ]);
-    /* @__PURE__ */
-    return jsx(RefChips, {
-        max: max,
-        refs: refs
+function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
+    const entry = useWorkflowInstanceEntry(instanceId), [graceOver, setGraceOver] = useState(!1);
+    return useEffect(() => {
+        const timer = setTimeout(() => setGraceOver(!0), 2500);
+        return () => clearTimeout(timer);
+    }, [ instanceId ]), entry?.invalid ? /* @__PURE__ */ jsx(Box, {
+        padding: 4,
+        children: /* @__PURE__ */ jsx(InvalidDocNotice, {
+            invalid: entry.invalid
+        })
+    }) : entry ? /* @__PURE__ */ jsx(InstanceDetailPanel, {
+        entry: entry,
+        onBack: onBack
+    }) : /* @__PURE__ */ jsx(Box, {
+        padding: 4,
+        children: graceOver ? /* @__PURE__ */ jsx(NotFound, {
+            id: instanceId,
+            onBack: onBack
+        }) : /* @__PURE__ */ jsx(LoadingRow, {
+            label: "Loading workflow…"
+        })
     });
 }
 
-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(extractDocumentId(row.ref.id), {
-        parent: parent,
-        activityName: row.activity,
-        cohortStage: row.cohortStage
+function NotFound({id: id, onBack: onBack}) {
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 4,
+        children: [ 
+        /* @__PURE__ */ jsxs(Text, {
+            muted: !0,
+            size: 1,
+            children: [ "No workflow with id “", id, "” — it may have been deleted." ]
+        }), 
+        /* @__PURE__ */ jsx(Flex, {
+            children: /* @__PURE__ */ jsx(Button, {
+                fontSize: 1,
+                icon: ArrowLeftIcon,
+                mode: "ghost",
+                onClick: onBack,
+                padding: 2,
+                text: "Back to workflows"
+            })
+        }) ]
     });
-    return origins;
 }
 
-function rootOf(instance, byId) {
-    const rootRef = instance.ancestors[0];
-    return rootRef ? byId.get(extractDocumentId(rootRef.id)) ?? instance : instance;
-}
-
-function taskRowsOf(args) {
-    const {instance: instance, breadcrumb: breadcrumb, identity: identity} = args, open = findOpenStageEntry(instance);
-    if (!open) return [];
-    const definition = definitionSnapshotOf(instance), state = stateByActivity(instance), rows = (open.activities ?? []).map(activity => {
-        const fields = state.get(activity.name) ?? [], declared = findActivity({
+function InstanceDetailPanel({entry: entry, onBack: onBack}) {
+    const definition = useDefinition(entry), [openActivity, setOpenActivity] = useState(null), {instance: instance} = entry;
+    return useEffect(() => {
+        openActivity && openActivityGone({
+            entry: entry,
+            target: openActivity
+        }) && setOpenActivity(null);
+    }, [ entry, openActivity ]), /* @__PURE__ */ jsxs(Flex, {
+        direction: "column",
+        height: "fill",
+        overflow: "hidden",
+        children: [ 
+        /* @__PURE__ */ jsx(DetailHeader, {
             definition: definition,
-            stageName: open.name,
-            activityName: activity.name
-        });
-        return {
-            instanceId: instance._id,
-            activityName: activity.name,
-            title: declared.title,
-            description: declared.description,
-            breadcrumb: breadcrumb,
-            stage: open.name,
-            stageTitle: stageTitle(definition, open.name),
-            status: activity.status,
-            open: isOpenActivityStatus(activity.status),
-            dates: datesOf(fields),
-            assigneeIds: assigneeUserIdsOf(fields),
-            assignedToMe: identity !== void 0 && isActivityAssignedTo({
-                state: fields,
-                who: identity
+            entry: entry,
+            onBack: onBack
+        }), 
+        /* @__PURE__ */ jsx(Box, {
+            flex: 1,
+            overflow: "auto",
+            paddingX: 4,
+            children: /* @__PURE__ */ jsxs(Stack, {
+                gap: 4,
+                paddingBottom: 5,
+                children: [ 
+                /* @__PURE__ */ jsx(StudioDocumentsSection, {
+                    instance: instance
+                }), 
+                /* @__PURE__ */ jsx(StageDiagramSection, {
+                    definition: definition,
+                    entry: entry
+                }), 
+                /* @__PURE__ */ jsx(GroupHeading, {
+                    title: "All tasks"
+                }), 
+                /* @__PURE__ */ jsx(InstanceTaskLists, {
+                    entry: entry,
+                    onOpenActivity: name => setOpenActivity({
+                        stage: instance.currentStage,
+                        activityName: name
+                    })
+                }) ]
             })
-        };
+        }), openActivity ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
+            activityName: openActivity.activityName,
+            breadcrumb: instanceBreadcrumb(instance, definition),
+            definition: definition,
+            entry: entry,
+            onClose: () => setOpenActivity(null)
+        }) : null ]
     });
-    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));
-    for (const instance of ordered) {
-        const origin = origins.get(instance._id), breadcrumb = origin ? findActivity({
-            definition: definitionSnapshotOf(origin.parent),
-            stageName: origin.cohortStage,
-            activityName: origin.activityName
-        }).title : void 0, 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);
-        if (held) {
-            held.rows.push(...rows);
-            continue;
-        }
-        const definition = definitionSnapshotOf(root);
-        groups.set(key, {
-            group: {
-                key: key,
-                document: document,
-                documents: documents,
-                instanceId: root._id,
-                workflowName: root.definition,
-                workflowTitle: instanceTitle(root, definition),
-                workflowDescription: definition?.description
-            },
-            rows: rows
-        });
-    }
-    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)
-    };
-}
-
-function onlyMyTasks(groups) {
-    const cut = list => list.map(group => ({
-        ...group,
-        rows: group.rows.filter(row => row.assignedToMe)
-    })).filter(group => group.rows.length > 0);
-    return {
-        withDocuments: cut(groups.withDocuments),
-        withoutDocuments: cut(groups.withoutDocuments)
-    };
+function DetailHeader({entry: entry, definition: definition, onBack: onBack}) {
+    const {instance: instance, ready: ready} = entry;
+    /* @__PURE__ */
+    return jsx(Card, {
+        flex: "none",
+        paddingX: 4,
+        paddingY: 3,
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 3,
+            wrap: "wrap",
+            children: [ 
+            /* @__PURE__ */ jsx(HoverHint, {
+                text: "Back to workflows",
+                children: /* @__PURE__ */ jsx(Button, {
+                    "aria-label": "Back to workflows",
+                    fontSize: 1,
+                    icon: ArrowLeftIcon,
+                    mode: "bleed",
+                    onClick: onBack,
+                    padding: 2
+                })
+            }), 
+            /* @__PURE__ */ jsxs(Stack, {
+                gap: 2,
+                children: [ 
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    weight: "semibold",
+                    children: instanceTitle(instance, definition)
+                }), 
+                /* @__PURE__ */ jsxs(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: [ "Started ", formatDate(instance.startedAt) ]
+                }) ]
+            }), terminalState(instance) === "in-flight" ? /* @__PURE__ */ jsx(StageChip, {
+                title: stageTitle(definition, instance.currentStage)
+            }) : /* @__PURE__ */ jsx(AbortedBadge, {
+                instance: instance
+            }), 
+            /* @__PURE__ */ jsx(SpinnerSlot, {
+                busy: !ready || isEvaluationStale(entry)
+            }) ]
+        })
+    });
 }
 
-function 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);
-    return {
-        workflows: [ ...workflows ].map(([name, title]) => ({
-            name: name,
-            title: title
-        })),
-        documents: [ ...documents.values() ]
-    };
-}
-
-function hasActiveFilters(filters) {
-    return Object.values(filters).some(value => value !== void 0 && (!Array.isArray(value) || value.length > 0));
-}
-
-function toggledValue(args) {
-    const {filters: filters, key: key, value: value} = args, current = filters[key] ?? [], next = current.includes(value) ? current.filter(v => v !== value) : [ ...current, value ];
-    if (next.length > 0) return {
-        ...filters,
-        [key]: next
-    };
-    const {[key]: _emptied, ...rest} = filters;
-    return rest;
-}
-
-const STATUS_LABEL = {
-    open: "Open",
-    completed: "Completed"
-}, DATE_PRESET_LABEL = {
-    past: "In the past",
-    none: "No date"
-};
-
-function dateLabel(date) {
-    return typeof date == "string" ? DATE_PRESET_LABEL[date] : `Before ${formatDate(date.before)}`;
-}
-
-function withoutChip(filters, chip) {
-    if (chip.key === "date") {
-        const {date: _cleared, ...rest} = filters;
-        return rest;
-    }
-    return chip.value === void 0 ? filters : toggledValue({
-        filters: filters,
-        key: chip.key,
-        value: chip.value
+function StudioDocumentsSection({instance: instance}) {
+    const refs = documentRefsOf(instance);
+    return refs.length === 0 ? null : /* @__PURE__ */ jsxs(Stack, {
+        gap: 3,
+        marginTop: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            weight: "medium",
+            children: refs.length === 1 ? "Studio document" : "Studio documents"
+        }), 
+        /* @__PURE__ */ jsx(Stack, {
+            gap: 2,
+            children: refs.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
+                gdr: ref
+            }, ref.id))
+        }) ]
     });
 }
 
-function chipsFor(args) {
-    const {key: key, values: values, labelOf: labelOf} = args;
-    return (values ?? []).map(value => ({
-        key: key,
-        value: value,
-        label: labelOf(value)
-    }));
-}
-
-function shownHits(hits, cap) {
-    return hits.length <= cap + 1 ? [ ...hits ] : hits.slice(0, cap);
-}
-
-const PENDING_LABEL = "…";
-
-function activeFilterChips(args) {
-    const {filters: filters, options: options, assigneeNames: assigneeNames, documentTitles: documentTitles} = args, chips = [ ...chipsFor({
-        key: "documentIds",
-        values: filters.documentIds,
-        labelOf: id => documentTitles?.get(id) ?? PENDING_LABEL
-    }), ...chipsFor({
-        key: "statuses",
-        values: filters.statuses,
-        labelOf: status => STATUS_LABEL[status]
-    }), ...chipsFor({
-        key: "assigneeIds",
-        values: filters.assigneeIds,
-        labelOf: id => assigneeNames?.get(id) ?? PENDING_LABEL
-    }), ...chipsFor({
-        key: "workflows",
-        values: filters.workflows,
-        labelOf: name => options.workflows.find(w => w.name === name)?.title ?? name
-    }) ];
-    return filters.date && chips.push({
-        key: "date",
-        label: dateLabel(filters.date)
-    }), chips;
-}
-
-function dateMatches(args) {
-    const {row: row, date: date, now: now} = args, parsed = row.dates.map(value => parseStoredDateValue(value)?.getTime()).filter(at => at !== void 0);
-    return date === "none" ? parsed.length === 0 : date === "past" ? parsed.some(at => at < now.getTime()) : parsed.some(at => at <= Date.parse(date.before));
-}
-
-function activeArm(values) {
-    return values !== void 0 && values.length > 0 ? values : void 0;
-}
-
-function statusArm(row, statuses) {
-    const arm = activeArm(statuses);
-    if (!arm) return !0;
-    const rowStatus = row.open ? "open" : "completed";
-    return arm.includes(rowStatus);
-}
-
-function assigneeArm(row, assigneeIds) {
-    const arm = activeArm(assigneeIds);
-    return arm ? arm.some(id => row.assigneeIds.includes(id)) : !0;
-}
-
-function rowMatches(args) {
-    const {row: row, filters: filters, now: now} = args;
-    return !(!statusArm(row, filters.statuses) || !assigneeArm(row, filters.assigneeIds) || filters.date !== void 0 && !dateMatches({
-        row: row,
-        date: filters.date,
-        now: now
-    }));
-}
-
-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({
-            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 = terminalState(instance);
-    return state === "in-flight" ? arm.includes("open") : state === "completed" && arm.includes("completed");
+function StageDiagramSection({entry: entry, definition: definition}) {
+    const {instance: instance} = entry;
+    return definition ? 
+    /* @__PURE__ */ jsx(WorkflowDiagram, {
+        currentStage: terminalState(instance) === "in-flight" ? instance.currentStage : void 0,
+        definition: definition,
+        evaluation: entry.evaluation,
+        explain: !0,
+        guardCount: entry.guards?.length,
+        height: 340,
+        history: instance.history
+    }, instance._id) : /* @__PURE__ */ jsx(Card, {
+        border: !0,
+        marginTop: 3,
+        padding: 3,
+        radius: 2,
+        tone: "caution",
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "Couldn’t load this workflow’s full details — the stage diagram is unavailable, and technical names show instead of titles."
+        })
+    });
 }
 
-function 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;
+function MutedNote({text: text}) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        paddingY: 3,
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: text
+        })
+    });
 }
 
-const NOTHING = {
-    titles: /* @__PURE__ */ new Map,
-    resolved: /* @__PURE__ */ new Set
-};
-
-function useDocPreviewTitles(documents) {
-    const previewStore = useDocumentPreviewStore(), schema = useSchema(), {binding: binding} = useWorkflowContext(), [state, setState] = useState(NOTHING), key = documents.map(doc => doc.id).join("|");
+function useStartableDefinitions() {
+    const {engine: engine} = useWorkflowContext(), [definitions, setDefinitions] = useState(void 0), [error, setError] = useState(void 0);
     return useEffect(() => {
-        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, publish = () => setState({
-            titles: new Map(titles),
-            resolved: new Set(resolved)
-        }), subscriptions = documents.flatMap(doc => {
-            const parsedRef = tryParseGdr(doc.id), resource = parsedRef ? resourceFromParsed(parsedRef) : void 0, local = isLocalContentResource(resource, binding.contentResource), schemaType = schema.get(doc.type);
-            return !parsedRef || !local || !schemaType ? (resolved.add(doc.id), []) : [ previewStore.observeForPreview({
-                _type: "reference",
-                _ref: parsedRef.documentId
-            }, schemaType).subscribe({
-                next: event => {
-                    resolved.add(doc.id);
-                    const title = event.snapshot?.title;
-                    typeof title == "string" && titles.set(doc.id, title), publish();
-                },
-                error: err => {
-                    console.error(`[workflow-studio-plugin] preview for "${doc.id}" failed:`, err), 
-                    resolved.add(doc.id), publish();
-                }
-            }) ];
-        });
-        return publish(), () => subscriptions.forEach(sub => sub.unsubscribe());
-    }, [ key, previewStore, schema, binding.contentResource.id ]), state;
+        let cancelled = !1;
+        return (async () => {
+            const rows = await readDeployedDefinitions(engine), startable = latestDeployedDefinitions(rows).filter(row => isStartableDefinition(row)).map(row => ({
+                name: row.name,
+                title: row.title ?? row.name,
+                description: row.description
+            }));
+            cancelled || (setDefinitions(startable), setError(void 0));
+        })().catch(err => {
+            cancelled || setError(describeError(err));
+        }), () => {
+            cancelled = !0;
+        };
+    }, [ engine ]), {
+        definitions: definitions,
+        error: error
+    };
 }
 
-const HITS_CAP = 6;
-
-function TaskFilterMenu({filters: filters, options: options, onChange: onChange}) {
-    const [open, setOpen] = useState(!1), active = hasActiveFilters(filters);
+function NewWorkflowButton() {
+    const {openStartDialog: openStartDialog} = useWorkflowContext(), [open, setOpen] = useState(!1);
     /* @__PURE__ */
     return jsx(DismissablePopover, {
-        content: open ? /* @__PURE__ */ jsx(FilterPanel, {
-            filters: filters,
-            onChange: onChange,
-            options: options
+        content: open ? /* @__PURE__ */ jsx(DefinitionPickerPanel, {
+            onPick: definition => {
+                setOpen(!1), openStartDialog({
+                    definition: definition.name,
+                    label: definition.title
+                });
+            }
         }) : null,
         onDismiss: () => setOpen(!1),
         open: open,
-        overflow: "visible",
         children: /* @__PURE__ */ jsx(Button, {
-            "aria-label": "Filter",
             fontSize: 1,
-            icon: FilterIcon,
-            mode: "bleed",
+            gap: 2,
+            icon: AddIcon,
             onClick: () => setOpen(v => !v),
             padding: 2,
-            selected: active || open
+            selected: open,
+            text: "New workflow"
         })
     });
 }
 
-function FilterPanel({filters: filters, options: options, onChange: onChange}) {
-    const [openList, setOpenList] = useState(null), toggle = (key, value) => onChange(toggledValue({
-        filters: filters,
-        key: key,
-        value: value
-    })), fieldProps = category => ({
-        open: openList === category,
-        onOpen: next => setOpenList(next ? category : null)
-    });
+function DefinitionPickerPanel({onPick: onPick}) {
+    const {definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = useState(""), visible = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        return definitions ? q ? definitions.filter(d => `${d.title} ${d.name}`.toLowerCase().includes(q)) : definitions : [];
+    }, [ definitions, query ]);
     /* @__PURE__ */
     return jsx(Box, {
-        padding: 3,
+        padding: 2,
         style: {
-            width: 360
+            width: 340
         },
         children: /* @__PURE__ */ jsxs(Stack, {
-            gap: 4,
+            gap: 2,
             children: [ 
-            /* @__PURE__ */ jsx(DocumentField, {
-                ...fieldProps("document"),
-                activeIds: filters.documentIds ?? [],
-                documents: options.documents,
-                onToggle: id => toggle("documentIds", id)
-            }), 
-            /* @__PURE__ */ jsx(TagField, {
-                ...fieldProps("status"),
-                activeKeys: filters.statuses ?? [],
-                label: "Status",
-                onToggle: key => toggle("statuses", key),
-                pillLabel: key => STATUS_LABEL[key],
-                placeholder: "Any status",
-                rows: statusRows()
-            }), 
-            /* @__PURE__ */ jsx(AssigneeField, {
-                ...fieldProps("assignee"),
-                activeIds: filters.assigneeIds ?? [],
-                onToggle: id => toggle("assigneeIds", id)
-            }), 
-            /* @__PURE__ */ jsx(TagField, {
-                ...fieldProps("workflow"),
-                activeKeys: filters.workflows ?? [],
-                label: "Workflow",
-                onToggle: key => toggle("workflows", key),
-                pillLabel: key => options.workflows.find(w => w.name === key)?.title ?? key,
-                placeholder: "Any workflow",
-                rows: options.workflows.map(w => ({
-                    key: w.name,
-                    text: w.title
-                }))
-            }), 
-            /* @__PURE__ */ jsx(DateField, {
-                ...fieldProps("date"),
-                date: filters.date,
-                onChange: next => {
-                    const {date: _cleared, ...rest} = filters;
-                    onChange(next === void 0 ? rest : {
-                        ...rest,
-                        date: next
-                    });
-                }
-            }), hasActiveFilters(filters) ? /* @__PURE__ */ jsx(Flex, {
-                justify: "flex-end",
-                children: /* @__PURE__ */ jsx(Button, {
-                    fontSize: 1,
-                    mode: "ghost",
-                    onClick: () => onChange({}),
-                    padding: 2,
-                    text: "Clear filters"
-                })
-            }) : null ]
+            /* @__PURE__ */ jsx(TextInput, {
+                autoFocus: !0,
+                fontSize: 1,
+                icon: SearchIcon,
+                onChange: event => setQuery(event.currentTarget.value),
+                placeholder: "Filter workflows…",
+                value: query
+            }), error ? /* @__PURE__ */ jsx(MutedNote, {
+                text: `Could not load the deployed workflows: ${error}`
+            }) : null, !definitions && !error ? /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Loading workflows…"
+            }) : null, definitions && definitions.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
+                text: "No startable workflows are deployed"
+            }) : null, definitions && definitions.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
+                text: "No workflows match"
+            }) : null, 
+            /* @__PURE__ */ jsx(Stack, {
+                gap: 1,
+                style: {
+                    maxHeight: 320,
+                    overflowY: "auto"
+                },
+                children: visible.map(definition => /* @__PURE__ */ jsx(Card, {
+                    as: "button",
+                    onClick: () => onPick(definition),
+                    padding: 3,
+                    radius: 2,
+                    style: {
+                        cursor: "pointer",
+                        textAlign: "left"
+                    },
+                    children: /* @__PURE__ */ jsxs(Stack, {
+                        gap: 2,
+                        children: [ 
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 1,
+                            weight: "medium",
+                            children: definition.title
+                        }), definition.description ? /* @__PURE__ */ jsx(Text, {
+                            muted: !0,
+                            size: 1,
+                            textOverflow: "ellipsis",
+                            children: definition.description
+                        }) : null ]
+                    })
+                }, definition.name))
+            }) ]
+        })
+    });
+}
+
+function ToolActivityDialog({target: target, onClose: onClose}) {
+    const entry = useWorkflowInstanceEntry(target.instanceId), definition = useDefinition(entry), resolvedOnce = useRef(!1);
+    return entry && (resolvedOnce.current = !0), useEffect(() => {
+        resolvedOnce.current && openActivityGone({
+            entry: entry,
+            target: target
+        }) && onClose();
+    }, [ entry, target, onClose ]), entry?.invalid ? /* @__PURE__ */ jsx(Dialog, {
+        header: "Workflow unavailable",
+        id: "workflow-activity-detail",
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsx(InvalidDocNotice, {
+                invalid: entry.invalid
+            })
+        })
+    }) : entry?.evaluation ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
+        activityName: target.activityName,
+        breadcrumb: instanceBreadcrumb(entry.instance, definition),
+        definition: definition,
+        document: documentRefsOf(entry.instance)[0],
+        entry: entry,
+        onClose: onClose
+    }) : /* @__PURE__ */ jsx(Dialog, {
+        header: "Loading activity…",
+        id: "workflow-activity-detail",
+        onClose: onClose,
+        width: 1,
+        children: /* @__PURE__ */ jsx(Box, {
+            padding: 4,
+            children: /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Fetching the live workflow state…"
+            })
         })
     });
 }
 
-const statusRows = () => Object.keys(STATUS_LABEL).map(key => ({
-    key: key,
-    text: STATUS_LABEL[key]
-}));
+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(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(extractDocumentId(rootRef.id)) ?? instance : instance;
+}
+
+function taskRowsOf(args) {
+    const {instance: instance, identity: identity} = args, open = findOpenStageEntry(instance);
+    if (!open) return [];
+    const definition = definitionSnapshotOf(instance), state = stateByActivity(instance), rows = (open.activities ?? []).map(activity => {
+        const fields = state.get(activity.name) ?? [], declared = 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 ?? activity.name,
+            stage: open.name,
+            status: activity.status,
+            open: isOpenActivityStatus(activity.status),
+            dates: datesOf(fields),
+            assigneeIds: assigneeUserIdsOf(fields),
+            assignedToMe: identity !== void 0 && isActivityAssignedTo({
+                state: fields,
+                who: identity
+            }),
+            assignControl: rowAssignControlState(controlArgs),
+            dateControl: 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), docGroups = /* @__PURE__ */ new Map, withoutDocuments = [], ordered = [ ...instances ].sort((a, b) => a.startedAt.localeCompare(b.startedAt));
+    for (const instance of ordered) {
+        const rows = taskRowsOf({
+            instance: instance,
+            identity: identity
+        }), first = rows[0];
+        if (!first) continue;
+        const origin = origins.get(instance._id), definition = definitionSnapshotOf(instance), entry = {
+            instanceId: instance._id,
+            workflowName: instance.definition,
+            title: instanceTitle(instance, definition),
+            stageTitle: stageTitle(definition, first.stage),
+            breadcrumb: origin ? findActivity({
+                definition: 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.instances.push(entry);
+            continue;
+        }
+        docGroups.set(key, {
+            group: {
+                key: key,
+                document: document,
+                documents: documents
+            },
+            instances: [ entry ]
+        });
+    }
+    return {
+        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 FieldLabel({text: text}) {
-    /* @__PURE__ */
-    return jsx(Text, {
-        muted: !0,
-        size: 1,
-        weight: "medium",
-        children: text
+function onlyMyTasks(groups) {
+    return cutTaskGroups(groups, {
+        keepRow: row => row.assignedToMe
     });
 }
 
-function FilterField({label: label, placeholder: placeholder, pills: pills, onClearPill: onClearPill, onFocus: onFocus, onQuery: onQuery, query: query, open: open, onOpen: onOpen, children: children}) {
-    const rootRef = useRef(null), inputRef = useRef(null);
-    /* @__PURE__ */
-    return jsxs(Stack, {
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsx(FieldLabel, {
-            text: label
-        }), 
-        /* @__PURE__ */ jsxs("div", {
-            ref: rootRef,
-            style: {
-                position: "relative"
-            },
-            children: [ 
-            /* @__PURE__ */ jsx(TagBox, {
-                inputRef: inputRef,
-                label: label,
-                onBlur: event => {
-                    rootRef.current?.contains(event.relatedTarget) || onOpen(!1);
-                },
-                onClearPill: onClearPill,
-                onFocus: onFocus,
-                onQuery: onQuery,
-                pills: pills,
-                placeholder: placeholder,
-                query: query
-            }), 
-            /* @__PURE__ */ jsx(FieldOverlay, {
-                open: open,
-                children: children
-            }) ]
-        }) ]
+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: committedRowFace(row),
+        assignState: row.assignControl,
+        assigneeIds: row.assigneeIds,
+        dates: row.dates,
+        dateState: row.dateControl,
+        terminalActions: [],
+        stale: !1
+    };
+    const activityState = stateByActivity(entry.instance), {face: face, assignState: assignState, assigneeIds: assigneeIds, terminalActions: terminalActions} = activityRowProps({
+        activityEval: activityEval,
+        activityState: activityState,
+        editableFields: entry.evaluation.editableFields
     });
+    return {
+        face: face,
+        assignState: assignState,
+        assigneeIds: assigneeIds,
+        dates: datesOf(activityState.get(row.activityName) ?? []),
+        dateState: rowDateControlState({
+            activity: activityEval.activity,
+            status: activityEval.status,
+            editableFields: entry.evaluation.editableFields
+        }),
+        terminalActions: terminalActions,
+        stale: isEvaluationStale(entry)
+    };
 }
 
-function TagField({label: label, placeholder: placeholder, rows: rows, activeKeys: activeKeys, onToggle: onToggle, pillLabel: pillLabel, open: open, onOpen: onOpen, emptyNote: emptyNote = "Nothing matches."}) {
-    const [query, setQuery] = useState(""), q = query.trim().toLowerCase(), hits = q ? rows.filter(row => row.text.toLowerCase().includes(q)) : rows, shown = shownHits(hits, HITS_CAP);
-    /* @__PURE__ */
-    return jsx(FilterField, {
-        label: label,
-        onClearPill: onToggle,
-        onFocus: () => {
-            setQuery(""), onOpen(!0);
-        },
-        onOpen: onOpen,
-        onQuery: setQuery,
-        open: open,
-        pills: activeKeys.map(key => ({
-            key: key,
-            label: pillLabel(key)
+function taskFilterOptions(groups) {
+    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,
+            title: title
         })),
-        placeholder: placeholder,
-        query: open ? query : "",
-        children: /* @__PURE__ */ jsx(OptionsList, {
-            activeKeys: activeKeys,
-            emptyNote: emptyNote,
-            hits: hits,
-            onToggle: onToggle,
-            shown: shown
-        })
-    });
+        documents: [ ...documents.values() ]
+    };
 }
 
-function FieldOverlay({open: open, children: children}) {
-    return open ? /* @__PURE__ */ jsx(Card, {
-        radius: 2,
-        shadow: 3,
-        style: {
-            insetInline: 0,
-            position: "absolute",
-            top: "calc(100% + 4px)",
-            zIndex: 2
-        },
-        children: children
-    }) : null;
+function hasActiveFilters(filters) {
+    return Object.values(filters).some(value => value !== void 0 && (!Array.isArray(value) || value.length > 0));
 }
 
-function useTagInputStyle() {
-    const {font: font} = useTheme_v2(), textSize = font.text.sizes[1];
-    if (!textSize) throw new Error("useTagInputStyle: theme is missing text size 1");
-    return {
-        background: "transparent",
-        border: "none",
-        color: "var(--card-fg-color)",
-        fontFamily: font.text.family,
-        fontSize: textSize.fontSize,
-        outline: "none",
-        padding: "4px 6px",
-        width: "100%"
+function toggledValue(args) {
+    const {filters: filters, key: key, value: value} = args, current = filters[key] ?? [], next = current.includes(value) ? current.filter(v => v !== value) : [ ...current, value ];
+    if (next.length > 0) return {
+        ...filters,
+        [key]: next
     };
+    const {[key]: _emptied, ...rest} = filters;
+    return rest;
 }
 
-function TagBox({pills: pills, onClearPill: onClearPill, query: query, onQuery: onQuery, placeholder: placeholder, label: label, onFocus: onFocus, onBlur: onBlur, inputRef: inputRef}) {
-    const inputStyle = useTagInputStyle();
-    /* @__PURE__ */
-    return jsx(Card, {
-        border: !0,
-        onClick: () => inputRef.current?.focus(),
-        padding: 1,
-        radius: 2,
-        style: {
-            cursor: "text"
-        },
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 1,
-            wrap: "wrap",
-            children: [ pills.map(pill => /* @__PURE__ */ jsx(FilterPill, {
-                label: pill.label,
-                onClear: () => onClearPill(pill.key)
-            }, pill.key)), 
-            /* @__PURE__ */ jsx(Box, {
-                flex: 1,
-                style: {
-                    minWidth: 90
-                },
-                children: /* @__PURE__ */ jsx("input", {
-                    "aria-label": label,
-                    onBlur: onBlur,
-                    onChange: event => onQuery(event.currentTarget.value),
-                    onFocus: onFocus,
-                    placeholder: pills.length === 0 ? placeholder : void 0,
-                    ref: inputRef,
-                    style: inputStyle,
-                    value: query
-                })
-            }) ]
-        })
-    });
+const STATUS_LABEL = {
+    open: "Open",
+    completed: "Completed"
+}, DATE_PRESET_LABEL = {
+    past: "In the past",
+    none: "No date"
+};
+
+function dateLabel(date) {
+    return typeof date == "string" ? DATE_PRESET_LABEL[date] : `Before ${formatDate(date.before)}`;
 }
 
-function OptionsList({hits: hits, shown: shown, activeKeys: activeKeys, onToggle: onToggle, emptyNote: emptyNote}) {
-    /* @__PURE__ */
-    return jsxs(Stack, {
-        space: 1,
-        children: [ hits.length === 0 ? /* @__PURE__ */ jsx(Box, {
-            padding: 2,
-            children: /* @__PURE__ */ jsx(MutedNote, {
-                text: emptyNote
-            })
-        }) : null, shown.map(row => /* @__PURE__ */ jsx(OptionRow, {
-            active: activeKeys.includes(row.key),
-            onPick: () => onToggle(row.key),
-            children: row.node ?? /* @__PURE__ */ jsx(Text, {
-                size: 1,
-                children: row.text
-            })
-        }, row.key)), hits.length > shown.length ? /* @__PURE__ */ jsx(Box, {
-            padding: 2,
-            children: /* @__PURE__ */ jsx(MutedNote, {
-                text: `…and ${hits.length - shown.length} more — keep typing to narrow`
-            })
-        }) : null ]
+function withoutChip(filters, chip) {
+    if (chip.key === "date") {
+        const {date: _cleared, ...rest} = filters;
+        return rest;
+    }
+    return chip.value === void 0 ? filters : toggledValue({
+        filters: filters,
+        key: chip.key,
+        value: chip.value
     });
 }
 
-function FilterPill({label: label, onClear: onClear}) {
-    /* @__PURE__ */
-    return jsx(Badge, {
-        fontSize: 1,
-        mode: "outline",
-        radius: "full",
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 1,
-            children: [ label, 
-            /* @__PURE__ */ jsx(Button, {
-                "aria-label": `Clear ${label}`,
-                fontSize: 0,
-                icon: CloseIcon,
-                mode: "bleed",
-                onClick: onClear,
-                onMouseDown: event => event.preventDefault(),
-                padding: 1
-            }) ]
-        })
-    });
+function chipsFor(args) {
+    const {key: key, values: values, labelOf: labelOf} = args;
+    return (values ?? []).map(value => ({
+        key: key,
+        value: value,
+        label: labelOf(value)
+    }));
+}
+
+function shownHits(hits, cap) {
+    return hits.length <= cap + 1 ? [ ...hits ] : hits.slice(0, cap);
+}
+
+const PENDING_LABEL = "…";
+
+function activeFilterChips(args) {
+    const {filters: filters, options: options, assigneeNames: assigneeNames, documentTitles: documentTitles} = args, chips = [ ...chipsFor({
+        key: "documentIds",
+        values: filters.documentIds,
+        labelOf: id => documentTitles?.get(id) ?? PENDING_LABEL
+    }), ...chipsFor({
+        key: "statuses",
+        values: filters.statuses,
+        labelOf: status => STATUS_LABEL[status]
+    }), ...chipsFor({
+        key: "assigneeIds",
+        values: filters.assigneeIds,
+        labelOf: id => assigneeNames?.get(id) ?? PENDING_LABEL
+    }), ...chipsFor({
+        key: "workflows",
+        values: filters.workflows,
+        labelOf: name => options.workflows.find(w => w.name === name)?.title ?? name
+    }) ];
+    return filters.date && chips.push({
+        key: "date",
+        label: dateLabel(filters.date)
+    }), chips;
+}
+
+function dateMatches(args) {
+    const {row: row, date: date, now: now} = args, parsed = row.dates.map(value => parseStoredDateValue(value)?.getTime()).filter(at => at !== void 0);
+    return date === "none" ? parsed.length === 0 : date === "past" ? parsed.some(at => at < now.getTime()) : parsed.some(at => at <= Date.parse(date.before));
+}
+
+function activeArm(values) {
+    return values !== void 0 && values.length > 0 ? values : void 0;
 }
 
-function OptionRow({active: active, onPick: onPick, children: children}) {
-    /* @__PURE__ */
-    return jsx(Card, {
-        as: "button",
-        onMouseDown: event => {
-            event.preventDefault(), onPick();
-        },
-        padding: 2,
-        radius: 2,
-        style: {
-            cursor: "pointer",
-            textAlign: "left"
-        },
-        tone: active ? "primary" : "default",
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsx(Box, {
-                flex: 1,
-                children: children
-            }), active ? /* @__PURE__ */ jsx(Text, {
-                size: 1,
-                children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
-            }) : null ]
-        })
-    });
+function statusArm(row, statuses) {
+    const arm = activeArm(statuses);
+    if (!arm) return !0;
+    const rowStatus = row.open ? "open" : "completed";
+    return arm.includes(rowStatus);
 }
 
-function AssigneeField({activeIds: activeIds, onToggle: onToggle, open: open, onOpen: onOpen}) {
-    const {members: members, loading: loading} = useProjectMembers(), displays = useUserDisplays(activeIds), names = new Map(displays.map(d => [ d.id, d.name ])), rows = members.map(member => ({
-        key: member.id,
-        text: `${member.displayName} ${member.email ?? ""}`.trim(),
-        node: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsx(MemberAvatar, {
-                imageUrl: member.imageUrl,
-                name: member.displayName
-            }), 
-            /* @__PURE__ */ jsx(Text, {
-                size: 1,
-                children: member.displayName
-            }) ]
-        })
+function assigneeArm(row, assigneeIds) {
+    const arm = activeArm(assigneeIds);
+    return arm ? arm.some(id => row.assigneeIds.includes(id)) : !0;
+}
+
+function rowMatches(args) {
+    const {row: row, filters: filters, now: now} = args;
+    return !(!statusArm(row, filters.statuses) || !assigneeArm(row, filters.assigneeIds) || filters.date !== void 0 && !dateMatches({
+        row: row,
+        date: filters.date,
+        now: now
     }));
-    /* @__PURE__ */
-    return jsx(TagField, {
-        activeKeys: activeIds,
-        label: "Assignee",
-        onOpen: onOpen,
-        onToggle: onToggle,
-        open: open,
-        pillLabel: id => loading ? PENDING_LABEL : names.get(id) ?? id,
-        placeholder: "Anyone",
-        rows: rows
+}
+
+function applyTaskFilters(args) {
+    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
+        }),
+        keepBand: band => !workflows || workflows.includes(band.workflowName),
+        keepGroup: group => !documentIds || documentIds.includes(group.document.id),
+        dropUngrouped: documentIds !== void 0
     });
 }
 
-function DocumentField({documents: documents, activeIds: activeIds, onToggle: onToggle, open: open, onOpen: onOpen}) {
-    const labels = useDocumentChipLabels(activeIds, documents), {titles: titles} = useDocPreviewTitles(documents);
-    if (documents.length === 0) return null;
-    const rows = documents.map(doc => ({
-        key: doc.id,
-        text: `${titles.get(doc.id) ?? ""} ${doc.type} ${extractDocumentId(doc.id)}`,
-        node: /* @__PURE__ */ jsx(DocRefFace, {
-            gdr: doc
-        })
-    }));
+const NOTHING = {
+    titles: /* @__PURE__ */ new Map,
+    resolved: /* @__PURE__ */ new Set
+};
+
+function useDocPreviewTitles(documents) {
+    const previewStore = useDocumentPreviewStore(), schema = useSchema(), {binding: binding} = useWorkflowContext(), [state, setState] = useState(NOTHING), key = documents.map(doc => doc.id).join("|");
+    return useEffect(() => {
+        const titles = /* @__PURE__ */ new Map, resolved = /* @__PURE__ */ new Set, publish = () => setState({
+            titles: new Map(titles),
+            resolved: new Set(resolved)
+        }), subscriptions = documents.flatMap(doc => {
+            const {parsed: parsedRef, local: local} = gdrLocality(doc.id, binding.contentResource), schemaType = schema.get(doc.type);
+            return !parsedRef || !local || !schemaType ? (resolved.add(doc.id), []) : [ previewStore.observeForPreview({
+                _type: "reference",
+                _ref: parsedRef.documentId
+            }, schemaType).subscribe({
+                next: event => {
+                    resolved.add(doc.id);
+                    const title = event.snapshot?.title;
+                    typeof title == "string" && titles.set(doc.id, title), publish();
+                },
+                error: err => {
+                    console.error(`[workflow-studio-plugin] preview for "${doc.id}" failed:`, err), 
+                    resolved.add(doc.id), publish();
+                }
+            }) ];
+        });
+        return publish(), () => subscriptions.forEach(sub => sub.unsubscribe());
+    }, [ key, previewStore, schema, binding.contentResource.id ]), state;
+}
+
+const HITS_CAP = 6;
+
+function TaskFilterMenu({filters: filters, options: options, onChange: onChange}) {
+    const [open, setOpen] = useState(!1), active = hasActiveFilters(filters);
     /* @__PURE__ */
-    return jsx(TagField, {
-        activeKeys: activeIds,
-        emptyNote: "No documents match.",
-        label: "Document",
-        onOpen: onOpen,
-        onToggle: onToggle,
+    return jsx(DismissablePopover, {
+        content: open ? /* @__PURE__ */ jsx(FilterPanel, {
+            filters: filters,
+            onChange: onChange,
+            options: options
+        }) : null,
+        onDismiss: () => setOpen(!1),
         open: open,
-        pillLabel: id => labels.get(id) ?? PENDING_LABEL,
-        placeholder: "Any document",
-        rows: rows
+        overflow: "visible",
+        children: /* @__PURE__ */ jsx(HoverHint, {
+            disabled: open,
+            text: "Filter",
+            children: /* @__PURE__ */ jsx(Button, {
+                "aria-label": "Filter",
+                fontSize: 1,
+                icon: FilterIcon,
+                mode: "bleed",
+                onClick: () => setOpen(v => !v),
+                padding: 2,
+                selected: active || open
+            })
+        })
     });
 }
 
-function DateField({date: date, onChange: onChange, open: open, onOpen: onOpen}) {
-    const pickedDate = typeof date == "object" ? new Date(date.before) : void 0, pick = next => {
-        onChange(next), onOpen(!1);
-    };
+function FilterPanel({filters: filters, options: options, onChange: onChange}) {
+    const [openList, setOpenList] = useState(null), toggle = (key, value) => onChange(toggledValue({
+        filters: filters,
+        key: key,
+        value: value
+    })), fieldProps = category => ({
+        open: openList === category,
+        onOpen: next => setOpenList(next ? category : null)
+    });
     /* @__PURE__ */
-    return jsx(FilterField, {
-        label: "Date",
-        onClearPill: () => onChange(void 0),
-        onFocus: () => onOpen(!0),
-        onOpen: onOpen,
-        onQuery: () => {},
-        open: open,
-        pills: date === void 0 ? [] : [ {
-            key: "date",
-            label: dateLabel(date)
-        } ],
-        placeholder: "Any time",
-        query: "",
+    return jsx(Box, {
+        padding: 3,
+        style: {
+            width: 360
+        },
         children: /* @__PURE__ */ jsxs(Stack, {
-            space: 1,
+            gap: 4,
             children: [ 
-            /* @__PURE__ */ jsx(OptionRow, {
-                active: date === "past",
-                onPick: () => pick("past"),
-                children: /* @__PURE__ */ jsx(Text, {
-                    size: 1,
-                    children: "In the past"
-                })
+            /* @__PURE__ */ jsx(DocumentField, {
+                ...fieldProps("document"),
+                activeIds: filters.documentIds ?? [],
+                documents: options.documents,
+                onToggle: id => toggle("documentIds", id)
             }), 
-            /* @__PURE__ */ jsx(OptionRow, {
-                active: date === "none",
-                onPick: () => pick("none"),
-                children: /* @__PURE__ */ jsx(Text, {
-                    size: 1,
-                    children: "No date"
-                })
+            /* @__PURE__ */ jsx(TagField, {
+                ...fieldProps("status"),
+                activeKeys: filters.statuses ?? [],
+                label: "Status",
+                onToggle: key => toggle("statuses", key),
+                pillLabel: key => STATUS_LABEL[key],
+                placeholder: "Any status",
+                rows: statusRows()
             }), 
-            /* @__PURE__ */ jsx(Box, {
-                paddingTop: 1,
-                paddingX: 2,
-                children: /* @__PURE__ */ jsx(Text, {
-                    muted: !0,
-                    size: 1,
-                    children: "Before…"
+            /* @__PURE__ */ jsx(AssigneeField, {
+                ...fieldProps("assignee"),
+                activeIds: filters.assigneeIds ?? [],
+                onToggle: id => toggle("assigneeIds", id)
+            }), 
+            /* @__PURE__ */ jsx(TagField, {
+                ...fieldProps("workflow"),
+                activeKeys: filters.workflows ?? [],
+                label: "Workflow",
+                onToggle: key => toggle("workflows", key),
+                pillLabel: key => options.workflows.find(w => w.name === key)?.title ?? key,
+                placeholder: "Any workflow",
+                rows: options.workflows.map(w => ({
+                    key: w.name,
+                    text: w.title
+                }))
+            }), 
+            /* @__PURE__ */ jsx(DateField, {
+                ...fieldProps("date"),
+                date: filters.date,
+                onChange: next => {
+                    const {date: _cleared, ...rest} = filters;
+                    onChange(next === void 0 ? rest : {
+                        ...rest,
+                        date: next
+                    });
+                }
+            }), hasActiveFilters(filters) ? /* @__PURE__ */ jsx(Flex, {
+                justify: "flex-end",
+                children: /* @__PURE__ */ jsx(Button, {
+                    fontSize: 1,
+                    mode: "ghost",
+                    onClick: () => onChange({}),
+                    padding: 2,
+                    text: "Clear filters"
                 })
-            }), 
-            /* @__PURE__ */ jsx(DatePicker, {
-                onSelect: next => pick({
-                    before: endOfDayIso(next)
-                }),
-                value: pickedDate
-            }) ]
+            }) : null ]
         })
     });
 }
 
-const endOfDayIso = date => endOfDay(date).toISOString();
-
-function schemaTypeTitle(schema, type) {
-    return schema.get(type)?.title;
-}
-
-function useDocumentChipLabels(documentIds, documents) {
-    const schema = useSchema(), activeDocs = documents.filter(doc => documentIds.includes(doc.id)), {titles: titles, resolved: resolved} = useDocPreviewTitles(activeDocs), labels = /* @__PURE__ */ new Map;
-    for (const doc of activeDocs) {
-        if (!resolved.has(doc.id)) continue;
-        const label = titles.get(doc.id) ?? schemaTypeTitle(schema, doc.type) ?? extractDocumentId(doc.id);
-        labels.set(doc.id, label);
-    }
-    return labels;
-}
-
-function ActiveFilterChips({filters: filters, options: options, onChange: onChange}) {
-    const displays = useUserDisplays(filters.assigneeIds ?? []), {loading: membersLoading} = useProjectMembers(), documentTitles = useDocumentChipLabels(filters.documentIds ?? [], options.documents), chips = activeFilterChips({
-        filters: filters,
-        options: options,
-        assigneeNames: membersLoading ? /* @__PURE__ */ new Map : new Map(displays.map(d => [ d.id, d.name ])),
-        documentTitles: documentTitles
-    });
-    return chips.length === 0 ? null : /* @__PURE__ */ jsx(Flex, {
-        align: "center",
-        gap: 2,
-        wrap: "wrap",
-        children: chips.map(chip => /* @__PURE__ */ jsx(FilterPill, {
-            label: chip.label,
-            onClear: () => onChange(withoutChip(filters, chip))
-        }, `${chip.key}:${chip.value ?? ""}`))
-    });
-}
-
-const INSTANCE_CAP = 200, NEWEST_INSTANCES = {
-    includeCompleted: !0,
-    limit: INSTANCE_CAP
-};
+const statusRows = () => Object.keys(STATUS_LABEL).map(key => ({
+    key: key,
+    text: STATUS_LABEL[key]
+}));
 
-function useToolInstances() {
-    const {engine: engine} = useWorkflowContext(), {instances: instances, loading: loading, invalid: invalid} = useWorkflowInstances({
-        engine: engine,
-        filter: NEWEST_INSTANCES
+function FieldLabel({text: text}) {
+    /* @__PURE__ */
+    return jsx(Text, {
+        muted: !0,
+        size: 1,
+        weight: "medium",
+        children: text
     });
-    return useMemo(() => {
-        const rows = instances ?? [];
-        return {
-            inFlight: rows.filter(instance => terminalState(instance) === "in-flight"),
-            settled: rows.filter(instance => terminalState(instance) !== "in-flight"),
-            truncated: rows.length === INSTANCE_CAP,
-            loading: loading,
-            invalid: invalid
-        };
-    }, [ instances, loading, invalid ]);
-}
-
-function toFilterRows(instances) {
-    return instances.map(instance => ({
-        instance: instance,
-        workflowTitle: instanceTitle(instance, 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] = useState({}), identity = useAssignmentIdentity(), inFlightRows = useMemo(() => toFilterRows(inFlight), [ inFlight ]), settledRows = useMemo(() => toFilterRows(settled), [ settled ]), options = useMemo(() => instanceFilterOptions([ ...inFlightRows, ...settledRows ]), [ inFlightRows, settledRows ]), taskArmIds = useMemo(() => instanceIdsMatchingTaskArms({
-        instances: [ ...inFlight, ...settled ],
-        identity: identity,
-        filters: filters,
-        now: /* @__PURE__ */ new Date
-    }), [ inFlight, settled, identity, filters ]), visibleInFlight = useMemo(() => cutInstances({
-        rows: inFlightRows,
-        filters: filters,
-        taskArmIds: taskArmIds
-    }), [ inFlightRows, filters, taskArmIds ]), visibleSettled = useMemo(() => cutInstances({
-        rows: settledRows,
-        filters: filters,
-        taskArmIds: taskArmIds
-    }), [ settledRows, filters, taskArmIds ]);
-    return loading ? /* @__PURE__ */ jsx(LoadingRow, {
-        label: "Loading workflows…"
-    }) : inFlight.length === 0 && settled.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
-        text: "No workflows yet — start one with “New workflow”."
-    }) : /* @__PURE__ */ jsxs(Stack, {
+function FilterField({label: label, placeholder: placeholder, pills: pills, onClearPill: onClearPill, onFocus: onFocus, onQuery: onQuery, query: query, open: open, onOpen: onOpen, children: children}) {
+    const rootRef = useRef(null), inputRef = useRef(null);
+    /* @__PURE__ */
+    return jsxs(Stack, {
         gap: 2,
         children: [ 
-        /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 2,
-            justify: "flex-end",
+        /* @__PURE__ */ jsx(FieldLabel, {
+            text: label
+        }), 
+        /* @__PURE__ */ jsxs("div", {
+            ref: rootRef,
+            style: {
+                position: "relative"
+            },
             children: [ 
-            /* @__PURE__ */ jsx(ActiveFilterChips, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
+            /* @__PURE__ */ jsx(TagBox, {
+                inputRef: inputRef,
+                label: label,
+                onBlur: event => {
+                    rootRef.current?.contains(event.relatedTarget) || onOpen(!1);
+                },
+                onClearPill: onClearPill,
+                onFocus: onFocus,
+                onQuery: onQuery,
+                pills: pills,
+                placeholder: placeholder,
+                query: query
             }), 
-            /* @__PURE__ */ jsx(TaskFilterMenu, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
+            /* @__PURE__ */ jsx(FieldOverlay, {
+                open: open,
+                children: children
             }) ]
-        }), visibleInFlight.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
-            text: "No running workflows match."
-        }) : /* @__PURE__ */ jsx(InstanceRows, {
-            instances: visibleInFlight,
-            onOpenInstance: onOpenInstance
-        }), 
-        /* @__PURE__ */ jsx(SettledRows, {
-            defaultShown: filters.statuses?.includes("completed") ?? !1,
-            instances: visibleSettled,
-            onOpenInstance: onOpenInstance
-        }), truncated ? /* @__PURE__ */ jsx(MutedNote, {
-            text: `Showing the latest ${INSTANCE_CAP} workflows.`
-        }) : null ]
+        }) ]
     });
 }
 
-function InstanceRows({instances: instances, onOpenInstance: onOpenInstance}) {
+function TagField({label: label, placeholder: placeholder, rows: rows, activeKeys: activeKeys, onToggle: onToggle, pillLabel: pillLabel, open: open, onOpen: onOpen, emptyNote: emptyNote = "Nothing matches"}) {
+    const [query, setQuery] = useState(""), q = query.trim().toLowerCase(), hits = q ? rows.filter(row => row.text.toLowerCase().includes(q)) : rows, shown = shownHits(hits, HITS_CAP);
     /* @__PURE__ */
-    return jsx(Fragment, {
-        children: instances.map(instance => /* @__PURE__ */ jsx(InstanceRow, {
-            instance: instance,
-            onOpen: () => onOpenInstance(instance)
-        }, instance._id))
+    return jsx(FilterField, {
+        label: label,
+        onClearPill: onToggle,
+        onFocus: () => {
+            setQuery(""), onOpen(!0);
+        },
+        onOpen: onOpen,
+        onQuery: setQuery,
+        open: open,
+        pills: activeKeys.map(key => ({
+            key: key,
+            label: pillLabel(key)
+        })),
+        placeholder: placeholder,
+        query: open ? query : "",
+        children: /* @__PURE__ */ jsx(OptionsList, {
+            activeKeys: activeKeys,
+            emptyNote: emptyNote,
+            hits: hits,
+            onToggle: onToggle,
+            shown: shown
+        })
     });
 }
 
-function SettledRows({instances: instances, onOpenInstance: onOpenInstance, defaultShown: defaultShown}) {
-    const [toggled, setToggled] = useState(void 0), shown = toggled ?? defaultShown;
-    return instances.length === 0 ? null : /* @__PURE__ */ jsxs(Stack, {
-        gap: 2,
-        marginTop: 3,
-        children: [ 
-        /* @__PURE__ */ jsx(Flex, {
-            children: /* @__PURE__ */ jsx(Button, {
-                fontSize: 1,
-                icon: shown ? ChevronDownIcon : ChevronRightIcon,
-                mode: "bleed",
-                onClick: () => setToggled(!shown),
-                padding: 2,
-                text: `${shown ? "Hide" : "Show"} ${instances.length} finished`
-            })
-        }), shown ? /* @__PURE__ */ jsx(InstanceRows, {
-            instances: instances,
-            onOpenInstance: onOpenInstance
-        }) : null ]
+function FieldOverlay({open: open, children: children}) {
+    return open ? /* @__PURE__ */ jsx(Card, {
+        radius: 2,
+        shadow: 3,
+        style: {
+            insetInline: 0,
+            position: "absolute",
+            top: "calc(100% + 4px)",
+            zIndex: 2
+        },
+        children: children
+    }) : null;
+}
+
+function useTagInputStyle() {
+    const {font: font} = useTheme_v2(), textSize = font.text.sizes[1];
+    if (!textSize) throw new Error("useTagInputStyle: theme is missing text size 1");
+    return {
+        background: "transparent",
+        border: "none",
+        color: "var(--card-fg-color)",
+        fontFamily: font.text.family,
+        fontSize: textSize.fontSize,
+        outline: "none",
+        padding: "4px 6px",
+        width: "100%"
+    };
+}
+
+function TagBox({pills: pills, onClearPill: onClearPill, query: query, onQuery: onQuery, placeholder: placeholder, label: label, onFocus: onFocus, onBlur: onBlur, inputRef: inputRef}) {
+    const inputStyle = useTagInputStyle();
+    /* @__PURE__ */
+    return jsx(Card, {
+        border: !0,
+        onClick: () => inputRef.current?.focus(),
+        padding: 1,
+        radius: 2,
+        style: {
+            cursor: "text"
+        },
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 1,
+            wrap: "wrap",
+            children: [ pills.map(pill => /* @__PURE__ */ jsx(FilterPill, {
+                label: pill.label,
+                onClear: () => onClearPill(pill.key)
+            }, pill.key)), 
+            /* @__PURE__ */ jsx(Box, {
+                flex: 1,
+                style: {
+                    minWidth: 90
+                },
+                children: /* @__PURE__ */ jsx("input", {
+                    "aria-label": label,
+                    onBlur: onBlur,
+                    onChange: event => onQuery(event.currentTarget.value),
+                    onFocus: onFocus,
+                    placeholder: pills.length === 0 ? placeholder : void 0,
+                    ref: inputRef,
+                    style: inputStyle,
+                    value: query
+                })
+            }) ]
+        })
     });
 }
 
-function InstanceRow({instance: instance, onOpen: onOpen}) {
-    const definition = useMemo(() => definitionSnapshotOf(instance), [ instance ]);
+function OptionsList({hits: hits, shown: shown, activeKeys: activeKeys, onToggle: onToggle, emptyNote: emptyNote}) {
     /* @__PURE__ */
-    return jsxs(Flex, {
-        align: "center",
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsx(Card, {
-            as: "button",
-            flex: 1,
-            onClick: onOpen,
-            padding: 3,
-            paddingLeft: 4,
-            radius: 2,
-            style: {
-                cursor: "pointer",
-                textAlign: "left"
-            },
-            children: /* @__PURE__ */ jsxs(Flex, {
-                align: "center",
-                gap: 3,
-                children: [ 
-                /* @__PURE__ */ jsx(Text, {
-                    size: 1,
-                    weight: "medium",
-                    children: instanceTitle(instance, definition)
-                }), 
-                /* @__PURE__ */ jsxs(Text, {
-                    muted: !0,
-                    size: 1,
-                    children: [ "Started ", formatDate(instance.startedAt) ]
-                }), 
-                /* @__PURE__ */ jsx(Flex, {
-                    flex: 1
-                }), 
-                /* @__PURE__ */ jsx(InstanceStatusBadge, {
-                    definition: definition,
-                    instance: instance
-                }), 
-                /* @__PURE__ */ jsx(PendingWorkBadge, {
-                    instance: instance
-                }) ]
+    return jsxs(Stack, {
+        space: 1,
+        children: [ hits.length === 0 ? /* @__PURE__ */ jsx(Box, {
+            padding: 2,
+            children: /* @__PURE__ */ jsx(MutedNote, {
+                text: emptyNote
             })
-        }), 
-        /* @__PURE__ */ jsx(DocRefChips, {
-            instance: instance
-        }) ]
+        }) : null, shown.map(row => /* @__PURE__ */ jsx(OptionRow, {
+            active: activeKeys.includes(row.key),
+            onPick: () => onToggle(row.key),
+            children: row.node ?? /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                children: row.text
+            })
+        }, row.key)), hits.length > shown.length ? /* @__PURE__ */ jsx(Box, {
+            padding: 2,
+            children: /* @__PURE__ */ jsx(MutedNote, {
+                text: `…and ${hits.length - shown.length} more — keep typing to narrow`
+            })
+        }) : null ]
     });
 }
 
-function SpinnerSlot({busy: busy}) {
+function FilterPill({label: label, onClear: onClear}) {
     /* @__PURE__ */
-    return jsx(Flex, {
-        align: "center",
-        flex: "none",
-        justify: "center",
+    return jsx(Badge, {
+        fontSize: 1,
+        mode: "outline",
+        radius: "full",
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 1,
+            children: [ label, 
+            /* @__PURE__ */ jsx(Button, {
+                "aria-label": `Clear ${label}`,
+                fontSize: 0,
+                icon: CloseIcon,
+                mode: "bleed",
+                onClick: onClear,
+                onMouseDown: event => event.preventDefault(),
+                padding: 1
+            }) ]
+        })
+    });
+}
+
+function OptionRow({active: active, onPick: onPick, children: children}) {
+    /* @__PURE__ */
+    return jsx(Card, {
+        as: "button",
+        onMouseDown: event => {
+            event.preventDefault(), onPick();
+        },
+        padding: 2,
+        radius: 2,
         style: {
-            width: 19,
-            height: 19
+            cursor: "pointer",
+            textAlign: "left"
         },
-        children: busy ? /* @__PURE__ */ jsx(Spinner, {
-            muted: !0
-        }) : null
+        tone: active ? "primary" : "default",
+        children: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 2,
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                flex: 1,
+                children: children
+            }), active ? /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
+            }) : null ]
+        })
     });
 }
 
-function InstanceTaskLists({entry: entry, onOpenActivity: onOpenActivity}) {
-    return instanceNotice(entry) || /* @__PURE__ */ jsx(StaleLock, {
-        stale: isEvaluationStale(entry),
-        children: /* @__PURE__ */ jsxs(Stack, {
+function AssigneeField({activeIds: activeIds, onToggle: onToggle, open: open, onOpen: onOpen}) {
+    const {members: members, loading: loading} = useProjectMembers(), displays = useUserDisplays(activeIds), names = new Map(displays.map(d => [ d.id, d.name ])), rows = members.map(member => ({
+        key: member.id,
+        text: `${member.displayName} ${member.email ?? ""}`.trim(),
+        node: /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 2,
             children: [ 
-            /* @__PURE__ */ jsx(ActivitiesList, {
-                entry: entry,
-                onOpenActivity: onOpenActivity
+            /* @__PURE__ */ jsx(MemberAvatar, {
+                imageUrl: member.imageUrl,
+                name: member.displayName
             }), 
-            /* @__PURE__ */ jsx(TodoItemsList, {
-                entry: entry
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                children: member.displayName
             }) ]
         })
+    }));
+    /* @__PURE__ */
+    return jsx(TagField, {
+        activeKeys: activeIds,
+        label: "Assignee",
+        onOpen: onOpen,
+        onToggle: onToggle,
+        open: open,
+        pillLabel: id => loading ? PENDING_LABEL : names.get(id) ?? id,
+        placeholder: "Anyone",
+        rows: rows
     });
 }
 
-function WorkflowInstanceDetail({instanceId: instanceId, onBack: onBack}) {
-    const entry = useWorkflowInstanceEntry(instanceId), [graceOver, setGraceOver] = useState(!1);
-    return useEffect(() => {
-        const timer = setTimeout(() => setGraceOver(!0), 2500);
-        return () => clearTimeout(timer);
-    }, [ instanceId ]), entry?.invalid ? /* @__PURE__ */ jsx(Box, {
-        padding: 4,
-        children: /* @__PURE__ */ jsx(InvalidDocNotice, {
-            invalid: entry.invalid
-        })
-    }) : entry ? /* @__PURE__ */ jsx(InstanceDetailPanel, {
-        entry: entry,
-        onBack: onBack
-    }) : /* @__PURE__ */ jsx(Box, {
-        padding: 4,
-        children: graceOver ? /* @__PURE__ */ jsx(NotFound, {
-            id: instanceId,
-            onBack: onBack
-        }) : /* @__PURE__ */ jsx(LoadingRow, {
-            label: "Loading workflow…"
+function DocumentField({documents: documents, activeIds: activeIds, onToggle: onToggle, open: open, onOpen: onOpen}) {
+    const labels = useDocumentChipLabels(activeIds, documents), {titles: titles} = useDocPreviewTitles(documents);
+    if (documents.length === 0) return null;
+    const rows = documents.map(doc => ({
+        key: doc.id,
+        text: `${titles.get(doc.id) ?? ""} ${doc.type} ${extractDocumentId(doc.id)}`,
+        node: /* @__PURE__ */ jsx(DocRefFace, {
+            gdr: doc
         })
-    });
-}
-
-function NotFound({id: id, onBack: onBack}) {
+    }));
     /* @__PURE__ */
-    return jsxs(Stack, {
-        gap: 4,
-        children: [ 
-        /* @__PURE__ */ jsxs(Text, {
-            muted: !0,
-            size: 1,
-            children: [ "No workflow with id “", id, "” — it may have been deleted." ]
-        }), 
-        /* @__PURE__ */ jsx(Flex, {
-            children: /* @__PURE__ */ jsx(Button, {
-                fontSize: 1,
-                icon: ArrowLeftIcon,
-                mode: "ghost",
-                onClick: onBack,
-                padding: 2,
-                text: "Back to workflows"
-            })
-        }) ]
-    });
-}
-
-function InstanceDetailPanel({entry: entry, onBack: onBack}) {
-    const definition = useDefinition(entry), [openActivity, setOpenActivity] = useState(null), {instance: instance} = entry;
-    return useEffect(() => {
-        openActivity && openActivityGone({
-            entry: entry,
-            target: openActivity
-        }) && setOpenActivity(null);
-    }, [ entry, openActivity ]), /* @__PURE__ */ jsxs(Flex, {
-        direction: "column",
-        height: "fill",
-        overflow: "hidden",
-        children: [ 
-        /* @__PURE__ */ jsx(DetailHeader, {
-            definition: definition,
-            entry: entry,
-            onBack: onBack
-        }), 
-        /* @__PURE__ */ jsx(Box, {
-            flex: 1,
-            overflow: "auto",
-            paddingX: 4,
-            children: /* @__PURE__ */ jsxs(Stack, {
-                gap: 4,
-                paddingBottom: 5,
-                children: [ 
-                /* @__PURE__ */ jsx(StudioDocumentsSection, {
-                    instance: instance
-                }), 
-                /* @__PURE__ */ jsx(StageDiagramSection, {
-                    definition: definition,
-                    entry: entry
-                }), 
-                /* @__PURE__ */ jsx(GroupHeading, {
-                    title: "All tasks"
-                }), 
-                /* @__PURE__ */ jsx(InstanceTaskLists, {
-                    entry: entry,
-                    onOpenActivity: name => setOpenActivity({
-                        stage: instance.currentStage,
-                        activityName: name
-                    })
-                }) ]
-            })
-        }), openActivity ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
-            activityName: openActivity.activityName,
-            breadcrumb: instanceBreadcrumb(instance, definition),
-            definition: definition,
-            entry: entry,
-            onClose: () => setOpenActivity(null)
-        }) : null ]
+    return jsx(TagField, {
+        activeKeys: activeIds,
+        emptyNote: "No documents match",
+        label: "Document",
+        onOpen: onOpen,
+        onToggle: onToggle,
+        open: open,
+        pillLabel: id => labels.get(id) ?? PENDING_LABEL,
+        placeholder: "Any document",
+        rows: rows
     });
 }
 
-function DetailHeader({entry: entry, definition: definition, onBack: onBack}) {
-    const {instance: instance, ready: ready} = entry;
+function DateField({date: date, onChange: onChange, open: open, onOpen: onOpen}) {
+    const pickedDate = typeof date == "object" ? new Date(date.before) : void 0, pick = next => {
+        onChange(next), onOpen(!1);
+    };
     /* @__PURE__ */
-    return jsx(Card, {
-        flex: "none",
-        paddingX: 4,
-        paddingY: 3,
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 3,
-            wrap: "wrap",
+    return jsx(FilterField, {
+        label: "Date",
+        onClearPill: () => onChange(void 0),
+        onFocus: () => onOpen(!0),
+        onOpen: onOpen,
+        onQuery: () => {},
+        open: open,
+        pills: date === void 0 ? [] : [ {
+            key: "date",
+            label: dateLabel(date)
+        } ],
+        placeholder: "Any time",
+        query: "",
+        children: /* @__PURE__ */ jsxs(Stack, {
+            space: 1,
             children: [ 
-            /* @__PURE__ */ jsx(Button, {
-                "aria-label": "Back to workflows",
-                fontSize: 1,
-                icon: ArrowLeftIcon,
-                mode: "bleed",
-                onClick: onBack,
-                padding: 2
+            /* @__PURE__ */ jsx(OptionRow, {
+                active: date === "past",
+                onPick: () => pick("past"),
+                children: /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    children: "In the past"
+                })
             }), 
-            /* @__PURE__ */ jsxs(Stack, {
-                gap: 2,
-                children: [ 
-                /* @__PURE__ */ jsx(Text, {
+            /* @__PURE__ */ jsx(OptionRow, {
+                active: date === "none",
+                onPick: () => pick("none"),
+                children: /* @__PURE__ */ jsx(Text, {
                     size: 1,
-                    weight: "semibold",
-                    children: instanceTitle(instance, definition)
-                }), 
-                /* @__PURE__ */ jsxs(Text, {
+                    children: "No date"
+                })
+            }), 
+            /* @__PURE__ */ jsx(Box, {
+                paddingTop: 1,
+                paddingX: 2,
+                children: /* @__PURE__ */ jsx(Text, {
                     muted: !0,
                     size: 1,
-                    children: [ "Started ", formatDate(instance.startedAt) ]
-                }) ]
-            }), terminalState(instance) === "in-flight" ? /* @__PURE__ */ jsx(StageChip, {
-                title: stageTitle(definition, instance.currentStage)
-            }) : /* @__PURE__ */ jsx(InstanceStatusBadge, {
-                definition: definition,
-                instance: instance
-            }), 
-            /* @__PURE__ */ jsx(PendingWorkBadge, {
-                instance: instance
+                    children: "Before…"
+                })
             }), 
-            /* @__PURE__ */ jsx(SpinnerSlot, {
-                busy: !ready || isEvaluationStale(entry)
+            /* @__PURE__ */ jsx(DatePicker, {
+                onSelect: next => pick({
+                    before: endOfDayIso(next)
+                }),
+                value: pickedDate
             }) ]
         })
     });
 }
 
-function StudioDocumentsSection({instance: instance}) {
-    const refs = documentRefsOf(instance);
-    return refs.length === 0 ? null : /* @__PURE__ */ jsxs(Stack, {
-        gap: 3,
-        marginTop: 3,
-        children: [ 
-        /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            weight: "medium",
-            children: refs.length === 1 ? "Studio document" : "Studio documents"
-        }), 
-        /* @__PURE__ */ jsx(Stack, {
-            gap: 2,
-            children: refs.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
-                gdr: ref
-            }, ref.id))
-        }) ]
-    });
-}
+const endOfDayIso = date => endOfDay(date).toISOString();
 
-function StageDiagramSection({entry: entry, definition: definition}) {
-    const {instance: instance} = entry;
-    return definition ? 
-    /* @__PURE__ */ jsx(WorkflowDiagram, {
-        currentStage: terminalState(instance) === "in-flight" ? instance.currentStage : void 0,
-        definition: definition,
-        evaluation: entry.evaluation,
-        explain: !0,
-        guardCount: entry.guards?.length,
-        height: 340,
-        history: instance.history
-    }, instance._id) : /* @__PURE__ */ jsx(Card, {
-        border: !0,
-        marginTop: 3,
-        padding: 3,
-        radius: 2,
-        tone: "caution",
-        children: /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: "Couldn’t load this workflow’s definition — the stage diagram is unavailable and titles fall back to raw names."
-        })
-    });
+function schemaTypeTitle(schema, type) {
+    return schema.get(type)?.title;
 }
 
-function useStartableDefinitions() {
-    const {engine: engine} = useWorkflowContext(), [definitions, setDefinitions] = useState(void 0), [error, setError] = useState(void 0);
-    return useEffect(() => {
-        let cancelled = !1;
-        return (async () => {
-            const rows = await readDeployedDefinitions(engine), startable = latestDeployedDefinitions(rows).filter(row => isStartableDefinition(row)).map(row => ({
-                name: row.name,
-                title: row.title ?? row.name,
-                description: row.description
-            }));
-            cancelled || (setDefinitions(startable), setError(void 0));
-        })().catch(err => {
-            cancelled || setError(describeError(err));
-        }), () => {
-            cancelled = !0;
-        };
-    }, [ engine ]), {
-        definitions: definitions,
-        error: error
-    };
+function useDocumentChipLabels(documentIds, documents) {
+    const schema = useSchema(), activeDocs = documents.filter(doc => documentIds.includes(doc.id)), {titles: titles, resolved: resolved} = useDocPreviewTitles(activeDocs), labels = /* @__PURE__ */ new Map;
+    for (const doc of activeDocs) {
+        if (!resolved.has(doc.id)) continue;
+        const label = titles.get(doc.id) ?? schemaTypeTitle(schema, doc.type) ?? extractDocumentId(doc.id);
+        labels.set(doc.id, label);
+    }
+    return labels;
 }
 
-function NewWorkflowButton() {
-    const {openStartDialog: openStartDialog} = useWorkflowContext(), [open, setOpen] = useState(!1);
-    /* @__PURE__ */
-    return jsx(DismissablePopover, {
-        content: open ? /* @__PURE__ */ jsx(DefinitionPickerPanel, {
-            onPick: definition => {
-                setOpen(!1), openStartDialog({
-                    definition: definition.name,
-                    label: definition.title
-                });
-            }
-        }) : null,
-        onDismiss: () => setOpen(!1),
-        open: open,
-        children: /* @__PURE__ */ jsx(Button, {
-            fontSize: 1,
-            icon: AddIcon,
-            onClick: () => setOpen(v => !v),
-            padding: 2,
-            selected: open,
-            text: "New workflow",
-            tone: "primary"
-        })
+function ActiveFilterChips({filters: filters, options: options, onChange: onChange}) {
+    const displays = useUserDisplays(filters.assigneeIds ?? []), {loading: membersLoading} = useProjectMembers(), documentTitles = useDocumentChipLabels(filters.documentIds ?? [], options.documents), chips = activeFilterChips({
+        filters: filters,
+        options: options,
+        assigneeNames: membersLoading ? /* @__PURE__ */ new Map : new Map(displays.map(d => [ d.id, d.name ])),
+        documentTitles: documentTitles
     });
-}
-
-function DefinitionPickerPanel({onPick: onPick}) {
-    const {definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = useState(""), visible = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        return definitions ? q ? definitions.filter(d => `${d.title} ${d.name}`.toLowerCase().includes(q)) : definitions : [];
-    }, [ definitions, query ]);
-    /* @__PURE__ */
-    return jsx(Box, {
-        padding: 2,
-        style: {
-            width: 340
-        },
-        children: /* @__PURE__ */ jsxs(Stack, {
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsx(TextInput, {
-                autoFocus: !0,
-                fontSize: 1,
-                icon: SearchIcon,
-                onChange: event => setQuery(event.currentTarget.value),
-                placeholder: "Filter workflows…",
-                value: query
-            }), error ? /* @__PURE__ */ jsx(MutedNote, {
-                text: `Could not load the deployed workflows: ${error}`
-            }) : null, !definitions && !error ? /* @__PURE__ */ jsx(LoadingRow, {
-                label: "Loading workflows…"
-            }) : null, definitions && definitions.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
-                text: "No startable workflows are deployed."
-            }) : null, definitions && definitions.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
-                text: "No workflows match."
-            }) : null, 
-            /* @__PURE__ */ jsx(Stack, {
-                gap: 1,
-                style: {
-                    maxHeight: 320,
-                    overflowY: "auto"
-                },
-                children: visible.map(definition => /* @__PURE__ */ jsx(Card, {
-                    as: "button",
-                    onClick: () => onPick(definition),
-                    padding: 3,
-                    radius: 2,
-                    style: {
-                        cursor: "pointer",
-                        textAlign: "left"
-                    },
-                    children: /* @__PURE__ */ jsxs(Stack, {
-                        gap: 2,
-                        children: [ 
-                        /* @__PURE__ */ jsx(Text, {
-                            size: 1,
-                            weight: "medium",
-                            children: definition.title
-                        }), definition.description ? /* @__PURE__ */ jsx(Text, {
-                            muted: !0,
-                            size: 1,
-                            textOverflow: "ellipsis",
-                            children: definition.description
-                        }) : null ]
-                    })
-                }, definition.name))
-            }) ]
-        })
+    return chips.length === 0 ? null : /* @__PURE__ */ jsx(Flex, {
+        align: "center",
+        gap: 2,
+        wrap: "wrap",
+        children: chips.map(chip => /* @__PURE__ */ jsx(FilterPill, {
+            label: chip.label,
+            onClear: () => onChange(withoutChip(filters, chip))
+        }, `${chip.key}:${chip.value ?? ""}`))
     });
 }
 
-function ToolActivityDialog({target: target, onClose: onClose}) {
-    const entry = useWorkflowInstanceEntry(target.instanceId), definition = useDefinition(entry), resolvedOnce = useRef(!1);
-    return entry && (resolvedOnce.current = !0), useEffect(() => {
-        resolvedOnce.current && openActivityGone({
-            entry: entry,
-            target: target
-        }) && onClose();
-    }, [ entry, target, onClose ]), entry?.invalid ? /* @__PURE__ */ jsx(Dialog, {
-        header: "Workflow unavailable",
-        id: "workflow-activity-detail",
-        onClose: onClose,
-        width: 1,
-        children: /* @__PURE__ */ jsx(Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsx(InvalidDocNotice, {
-                invalid: entry.invalid
-            })
-        })
-    }) : entry?.evaluation ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
-        activityName: target.activityName,
-        breadcrumb: instanceBreadcrumb(entry.instance, definition),
-        definition: definition,
-        document: documentRefsOf(entry.instance)[0],
-        entry: entry,
-        onClose: onClose
-    }) : /* @__PURE__ */ jsx(Dialog, {
-        header: "Loading activity…",
-        id: "workflow-activity-detail",
-        onClose: onClose,
-        width: 1,
-        children: /* @__PURE__ */ jsx(Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsx(LoadingRow, {
-                label: "Fetching the live workflow state…"
-            })
-        })
-    });
+function FilterRowPortal({filters: filters, onChange: onChange, options: options, slot: slot}) {
+    return slot ? createPortal(
+    /* @__PURE__ */ jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        justify: "flex-end",
+        children: [ 
+        /* @__PURE__ */ jsx(ActiveFilterChips, {
+            filters: filters,
+            onChange: onChange,
+            options: options
+        }), 
+        /* @__PURE__ */ 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__ */ jsx(MutedNote, {
-        text: "No tasks match — adjust the filters, or start a workflow."
-    }) : /* @__PURE__ */ jsxs(Stack, {
-        gap: 2,
-        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsx(DocumentTaskGroup, {
-            group: group,
-            onOpenTask: onOpenTask,
-            onOpenWorkflow: onOpenWorkflow
-        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsx(CollapsibleGroup, {
-            header: /* @__PURE__ */ jsx(GroupTitle, {
-                text: "Workflows without Studio documents"
-            }),
-            children: /* @__PURE__ */ jsx(Stack, {
-                gap: 2,
-                paddingLeft: 2,
-                children: groups.withoutDocuments.map(group => /* @__PURE__ */ jsx(CollapsibleGroup, {
-                    header: /* @__PURE__ */ jsxs(Fragment, {
-                        children: [ 
-                        /* @__PURE__ */ jsx(Text, {
-                            muted: !0,
-                            size: 1,
-                            children: /* @__PURE__ */ jsx(StageGlyph, {})
-                        }), 
-                        /* @__PURE__ */ jsx(WorkflowBadgeTitle, {
-                            group: group
-                        }), 
-                        /* @__PURE__ */ jsx(Box, {
-                            flex: 1
-                        }), 
-                        /* @__PURE__ */ jsx(GroupMenu, {
-                            group: group,
-                            onOpenWorkflow: onOpenWorkflow
-                        }) ]
-                    }),
-                    children: /* @__PURE__ */ jsx(TaskRows, {
-                        onOpenTask: onOpenTask,
-                        rows: group.rows
-                    })
-                }, group.key))
+function ActivityDateControl({instanceId: instanceId, state: state, dates: dates}) {
+    const {editFieldFor: editFieldFor} = useWorkflowContext(), {save: save} = useSaveField(), [open, setOpen] = useState(!1), raw = dateControlValue({
+        state: state,
+        dates: dates
+    }), display = raw === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+        muted: !0,
+        size: 1,
+        children: formatDate(raw)
+    });
+    if (state.kind === "none") return display;
+    if (state.kind === "closed") return display === null ? null : /* @__PURE__ */ jsx(HoverHint, {
+        text: state.reason,
+        children: /* @__PURE__ */ jsx(Button, {
+            "aria-label": "Date",
+            as: "span",
+            fontSize: 1,
+            mode: "bleed",
+            onClick: stopRowClick,
+            onMouseDown: stopRowMouseDown,
+            padding: 2,
+            children: display
+        })
+    });
+    const kind = dateControlKind(state), commit = (mode, value) => {
+        state.kind === "editable" && save(() => editFieldFor(instanceId, {
+            target: editTargetOf(state.field),
+            ...mode === "set" ? {
+                mode: mode,
+                value: value
+            } : {
+                mode: mode
+            }
+        }).then(() => {}));
+    }, handleClick = e => {
+        e.stopPropagation(), setOpen(v => !v);
+    };
+    /* @__PURE__ */
+    return jsx(DismissablePopover, {
+        content: /* @__PURE__ */ jsx(Box, {
+            onClick: stopRowClick,
+            children: state.kind === "loading" || kind === void 0 ? /* @__PURE__ */ jsx(LoadingRow, {
+                label: "Loading…",
+                padding: 3
+            }) : /* @__PURE__ */ jsx(ClearableDatePicker, {
+                clearLabel: "Clear date",
+                onClear: () => {
+                    setOpen(!1), commit("unset");
+                },
+                onPick: next => {
+                    kind === "date" && setOpen(!1), commit("set", serializeDateFieldValue(next, kind));
+                },
+                selectTime: kind === "datetime",
+                value: parseDateFieldValue(state.field.value, kind)
             })
-        }) : null ]
+        }),
+        onDismiss: () => setOpen(!1),
+        open: open,
+        children: display ? /* @__PURE__ */ jsx(Button, {
+            "aria-label": "Change date",
+            as: "span",
+            fontSize: 1,
+            mode: "bleed",
+            onClick: handleClick,
+            onMouseDown: stopRowMouseDown,
+            padding: 2,
+            children: display
+        }) : /* @__PURE__ */ jsx(HoverHint, {
+            disabled: open,
+            text: "Set date",
+            children: /* @__PURE__ */ jsx(Button, {
+                "aria-label": "Set date",
+                as: "span",
+                fontSize: 1,
+                icon: CalendarIcon,
+                mode: "bleed",
+                onClick: handleClick,
+                onMouseDown: 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 jsx(Text, {
-        size: 1,
-        weight: "semibold",
-        children: text
+    return jsxs(Flex, {
+        align: "center",
+        gap: 3,
+        wrap: "wrap",
+        children: [ shown.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
+            gdr: ref,
+            layout: "inline"
+        }, ref.id)), overflow > 0 ? /* @__PURE__ */ jsxs(Text, {
+            muted: !0,
+            size: 1,
+            children: [ "+", overflow, " more" ]
+        }) : null ]
     });
 }
 
-function WorkflowBadgeTitle({group: group}) {
-    const badge = /* @__PURE__ */ jsx(Badge, {
-        fontSize: 1,
-        mode: "outline",
-        children: group.workflowTitle
-    });
-    return group.workflowDescription ? /* @__PURE__ */ jsx(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] = useState(!0);
-    /* @__PURE__ */
-    return jsxs(Stack, {
+function TaskGroupList({groups: groups, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+    return groups.withDocuments.length === 0 && groups.withoutDocuments.length === 0 ? /* @__PURE__ */ jsx(MutedNote, {
+        text: EMPTY_NOTE
+    }) : /* @__PURE__ */ jsxs(Stack, {
         gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsx(Card, {
-            paddingX: 2,
-            paddingY: 2,
-            radius: 2,
-            tone: "transparent",
-            children: /* @__PURE__ */ jsxs(Flex, {
+        children: [ groups.withDocuments.map(group => /* @__PURE__ */ jsx(CollapsibleBand, {
+            background: !0,
+            sticky: !0,
+            title: extractDocumentId(group.document.id),
+            header: /* @__PURE__ */ jsx(Flex, {
                 align: "center",
-                gap: 2,
-                children: [ 
-                /* @__PURE__ */ jsx(Button, {
-                    "aria-label": open ? "Collapse" : "Expand",
-                    fontSize: 1,
-                    icon: open ? ChevronDownIcon : 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__ */ jsx(CollapsibleGroup, {
-        header: /* @__PURE__ */ jsxs(Fragment, {
-            children: [ 
-            /* @__PURE__ */ jsx(Box, {
                 flex: "none",
                 style: {
                     maxWidth: "60%"
@@ -1533,323 +1374,333 @@ function DocumentTaskGroup({group: group, onOpenTask: onOpenTask, onOpenWorkflow
                     max: 2,
                     refs: group.documents
                 })
-            }), 
-            /* @__PURE__ */ jsx(WorkflowBadgeTitle, {
-                group: group
-            }), 
-            /* @__PURE__ */ jsx(Box, {
-                flex: 1
-            }), 
-            /* @__PURE__ */ jsx(GroupMenu, {
-                document: document,
-                group: group,
-                onOpenWorkflow: onOpenWorkflow
-            }) ]
-        }),
-        children: /* @__PURE__ */ jsx(TaskRows, {
+            }),
+            children: /* @__PURE__ */ jsx(InstanceBands, {
+                instances: group.instances,
+                onOpenTask: onOpenTask,
+                onOpenWorkflow: onOpenWorkflow,
+                showTerminalActions: showTerminalActions
+            })
+        }, group.key)), groups.withoutDocuments.length > 0 ? /* @__PURE__ */ jsx(CollapsibleBand, {
+            background: !0,
+            sticky: !0,
+            title: UNGROUPED_TITLE,
+            header: /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "semibold",
+                children: UNGROUPED_TITLE
+            }),
+            children: /* @__PURE__ */ 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 jsx(Stack, {
+        gap: 1,
+        children: instances.map(band => /* @__PURE__ */ 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 = useRouter();
+function InstanceBand({band: band, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, showTerminalActions: showTerminalActions}) {
+    const {resolvePathFromState: resolvePathFromState} = useRouter();
     /* @__PURE__ */
-    return jsx(MenuButton, {
-        button: /* @__PURE__ */ jsx(Button, {
-            "aria-label": "Group actions",
-            fontSize: 1,
-            icon: EllipsisHorizontalIcon,
-            mode: "bleed",
-            padding: 2
-        }),
-        id: `task-group-menu-${group.key}`,
-        menu: /* @__PURE__ */ jsxs(Menu, {
+    return jsx(CollapsibleBand, {
+        title: band.title,
+        header: /* @__PURE__ */ jsxs(Fragment, {
             children: [ 
-            /* @__PURE__ */ jsx(MenuItem, {
-                onClick: () => onOpenWorkflow(group.instanceId),
-                text: "View workflow"
-            }), document ? /* @__PURE__ */ jsx(MenuItem, {
-                onClick: () => router.navigateIntent("edit", {
-                    id: extractDocumentId(document.id),
-                    type: document.type
+            /* @__PURE__ */ jsx(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__ */ jsxs(Flex, {
+                    align: "center",
+                    gap: 2,
+                    style: {
+                        minWidth: 0
+                    },
+                    children: [ 
+                    /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        style: {
+                            minWidth: 0
+                        },
+                        textOverflow: "ellipsis",
+                        weight: "medium",
+                        children: band.title
+                    }), band.breadcrumb === void 0 ? null : /* @__PURE__ */ jsx(BreadcrumbTail, {
+                        segments: [ band.breadcrumb ]
+                    }), 
+                    /* @__PURE__ */ jsx(StageFace, {
+                        title: band.stageTitle
+                    }) ]
+                })
+            }), 
+            /* @__PURE__ */ jsx(TrailingHairline, {}) ]
         }),
-        popover: {
-            portal: !0
-        }
+        children: /* @__PURE__ */ jsx(Box, {
+            paddingLeft: 5,
+            children: /* @__PURE__ */ 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 jsx(Stack, {
-        children: rows.map(row => /* @__PURE__ */ jsx(TaskRowButton, {
-            onOpen: () => onOpenTask({
-                instanceId: row.instanceId,
-                stage: row.stage,
-                activityName: row.activityName
-            }),
-            row: row
+        gap: 1,
+        children: rows.map(row => /* @__PURE__ */ jsx(TaskActivityRow, {
+            onOpen: () => onOpenTask(targetOf(row)),
+            row: row,
+            showTerminalActions: showTerminalActions
         }, `${row.instanceId}:${row.activityName}`))
     });
 }
 
-function RowDate({dates: dates}) {
-    const first = dates.find(value => parseStoredDateValue(value) !== void 0);
-    return first === void 0 ? null : /* @__PURE__ */ jsx(Text, {
-        muted: !0,
-        size: 1,
-        children: formatDate(first)
-    });
-}
-
-function RowTitle({row: row}) {
-    const title = /* @__PURE__ */ jsx(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 = useWorkflowInstanceEntry(row.instanceId), render = taskRowRender(row, entry);
+    /* @__PURE__ */
+    return jsx(StaleLock, {
+        stale: render.stale,
+        children: /* @__PURE__ */ jsx(ActivityRow, {
+            assignState: render.assignState,
+            assigneeIds: render.assigneeIds,
+            dateControl: /* @__PURE__ */ 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__ */ jsx(HoverHint, {
-        text: row.description,
-        children: title
-    }) : title;
 }
 
-function RowBreadcrumb({breadcrumb: breadcrumb}) {
-    return breadcrumb ? /* @__PURE__ */ jsxs(Flex, {
-        align: "center",
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: breadcrumb
-        }), 
-        /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-        }) ]
-    }) : null;
-}
+const INSTANCE_CAP = 200, NEWEST_INSTANCES = {
+    includeCompleted: !0,
+    limit: INSTANCE_CAP
+};
 
-function TaskRowButton({row: row, onOpen: onOpen}) {
-    /* @__PURE__ */
-    return jsx(Card, {
-        as: "button",
-        onClick: onOpen,
-        padding: 3,
-        paddingLeft: 4,
-        radius: 2,
-        style: {
-            cursor: "pointer",
-            textAlign: "left"
-        },
-        children: /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 3,
-            children: [ 
-            /* @__PURE__ */ jsx(ActivityStatusIcon, {
-                status: row.status
-            }), 
-            /* @__PURE__ */ jsx(RowBreadcrumb, {
-                breadcrumb: row.breadcrumb
-            }), 
-            /* @__PURE__ */ jsx(RowTitle, {
-                row: row
-            }), 
-            /* @__PURE__ */ jsx(Badge, {
-                fontSize: 1,
-                mode: "outline",
-                tone: "default",
-                children: row.stageTitle
-            }), 
-            /* @__PURE__ */ jsx(Flex, {
-                flex: 1
-            }), 
-            /* @__PURE__ */ jsx(RowDate, {
-                dates: row.dates
-            }), row.assigneeIds.length > 0 ? /* @__PURE__ */ jsx(UserAvatarGroup, {
-                ids: row.assigneeIds
-            }) : null ]
-        })
+function useToolInstances() {
+    const {engine: engine} = useWorkflowContext(), {instances: instances, loading: loading, unreadable: unreadable} = useWorkflowInstances({
+        engine: engine,
+        filter: NEWEST_INSTANCES
     });
+    return useMemo(() => {
+        const rows = instances ?? [];
+        return {
+            inFlight: rows.filter(instance => terminalState(instance) === "in-flight"),
+            settled: rows.filter(instance => terminalState(instance) !== "in-flight"),
+            truncated: rows.length + unreadable.length === INSTANCE_CAP,
+            loading: loading,
+            unreadable: unreadable
+        };
+    }, [ instances, loading, unreadable ]);
 }
 
-function TasksTab({instances: instances, loading: loading, identity: identity, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, truncated: truncated}) {
-    const [segment, setSegment] = useState("mine"), [filters, setFilters] = useState({}), groups = 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] = useState({}), groups = useMemo(() => deriveTaskGroups({
         instances: instances,
         identity: identity
     }), [ instances, identity ]), options = useMemo(() => taskFilterOptions(groups), [ groups ]), visible = 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__ */ jsx(LoadingRow, {
-        label: "Loading tasks…"
+        return mineOnly ? onlyMyTasks(filtered) : filtered;
+    }, [ groups, filters, mineOnly ]);
+    return loading ? 
+    /* @__PURE__ */ jsx(Box, {
+        paddingLeft: 2,
+        children: /* @__PURE__ */ jsx(LoadingRow, {
+            label: "Loading tasks…"
+        })
     }) : /* @__PURE__ */ jsxs(Box, {
         children: [ 
-        /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
+        /* @__PURE__ */ jsx(FilterRowPortal, {
+            filters: filters,
+            onChange: setFilters,
+            options: options,
+            slot: filterSlot
+        }), 
+        /* @__PURE__ */ jsxs(Stack, {
             gap: 2,
-            paddingBottom: 3,
             children: [ 
-            /* @__PURE__ */ jsxs(TabList, {
-                gap: 1,
-                children: [ 
-                /* @__PURE__ */ jsx(Tab, {
-                    "aria-controls": "workflow-tasks-panel",
-                    fontSize: 1,
-                    id: "workflow-tasks-mine",
-                    label: "My tasks",
-                    onClick: () => setSegment("mine"),
-                    padding: 2,
-                    selected: segment === "mine"
-                }), 
-                /* @__PURE__ */ jsx(Tab, {
-                    "aria-controls": "workflow-tasks-panel",
-                    fontSize: 1,
-                    id: "workflow-tasks-all",
-                    label: "All tasks",
-                    onClick: () => setSegment("all"),
-                    padding: 2,
-                    selected: segment === "all"
-                }) ]
-            }), 
-            /* @__PURE__ */ jsx(Box, {
-                flex: 1
-            }), 
-            /* @__PURE__ */ jsx(ActiveFilterChips, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
+            /* @__PURE__ */ jsx(UnreadableDocsNote, {
+                unreadable: unreadable
             }), 
-            /* @__PURE__ */ jsx(TaskFilterMenu, {
-                filters: filters,
-                onChange: setFilters,
-                options: options
-            }) ]
-        }), 
-        /* @__PURE__ */ jsxs(Box, {
-            id: "workflow-tasks-panel",
-            children: [ 
             /* @__PURE__ */ jsx(TaskGroupList, {
                 groups: visible,
                 onOpenTask: onOpenTask,
-                onOpenWorkflow: onOpenWorkflow
-            }), truncated ? /* @__PURE__ */ jsx(MutedNote, {
-                text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren't listed.`
-            }) : null ]
-        }) ]
+                onOpenWorkflow: onOpenWorkflow,
+                showTerminalActions: mineOnly
+            }) ]
+        }), truncated ? /* @__PURE__ */ jsx(MutedNote, {
+            text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren't listed.`
+        }) : null ]
     });
 }
 
+const TOOL_TABS = [ {
+    value: "overview",
+    label: "Overview"
+}, {
+    value: "for-me",
+    label: "For me"
+} ], [firstToolTab, ...restToolTabs] = TOOL_TABS, TOOL_TAB_CODEC = workflowsTabCodec([ firstToolTab.value, ...restToolTabs.map(tab => tab.value) ]);
+
+function useToolTab() {
+    const router = useRouter(), params = Object.fromEntries(router.state._searchParams ?? []);
+    return {
+        tab: TOOL_TAB_CODEC.read(params),
+        setTab: next => router.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 = useRouter(), {seedInstance: seedInstance} = useWorkflowContext(), instanceId = typeof router.state.instanceId == "string" ? router.state.instanceId : void 0;
     return instanceId ? /* @__PURE__ */ jsx(WorkflowInstanceDetail, {
         instanceId: instanceId,
-        onBack: () => router.navigate({})
+        onBack: () => router.navigate(carryingSearchParams({}, router.state._searchParams))
     }, instanceId) : /* @__PURE__ */ jsx(WorkflowsHome, {
         onOpenInstance: instance => {
-            typeof instance != "string" && seedInstance(instance), router.navigate({
+            typeof instance != "string" && seedInstance(instance), router.navigate(carryingSearchParams({
                 instanceId: typeof instance == "string" ? instance : instance._id
-            });
+            }, router.state._searchParams));
         }
     });
 }
 
-function ToolPanel({identity: identity, instances: instances, onOpenInstance: onOpenInstance, onOpenTask: onOpenTask, tab: tab}) {
-    return instances.invalid ? /* @__PURE__ */ jsx(InvalidDocNotice, {
-        invalid: instances.invalid
-    }) : tab === "tasks" ? /* @__PURE__ */ jsx(TasksTab, {
-        identity: identity,
-        instances: [ ...instances.inFlight, ...instances.settled ],
-        loading: instances.loading,
-        onOpenTask: onOpenTask,
-        onOpenWorkflow: onOpenInstance,
-        truncated: instances.truncated
-    }) : /* @__PURE__ */ jsx(WorkflowsDashboard, {
-        instances: instances,
-        onOpenInstance: onOpenInstance
-    });
-}
-
 function WorkflowsHome({onOpenInstance: onOpenInstance}) {
-    const [tab, setTab] = useState("tasks"), instances = useToolInstances(), identity = useAssignmentIdentity(), [openTask, setOpenTask] = useState(null);
-    /* @__PURE__ */
-    return jsxs(Card, {
+    const {tab: tab, setTab: setTab} = useToolTab(), instances = useToolInstances(), identity = useAssignmentIdentity(), [openTask, setOpenTask] = useState(null), openInstance = target => {
+        if (typeof target != "string") return onOpenInstance(target);
+        const held = [ ...instances.inFlight, ...instances.settled ].find(i => i._id === target);
+        onOpenInstance(held ?? target);
+    }, [filterSlot, setFilterSlot] = useState(null), scrollerRef = useRef(null);
+    return useEffect(() => {
+        scrollerRef.current?.scrollTo({
+            top: 0
+        });
+    }, [ tab ]), 
+    /* @__PURE__ */ jsxs(Card, {
         height: "fill",
-        overflow: "auto",
         children: [ 
-        /* @__PURE__ */ jsx(Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsx(Container, {
-                width: 2,
-                children: /* @__PURE__ */ jsxs(Stack, {
-                    gap: 4,
-                    children: [ 
-                    /* @__PURE__ */ jsxs(Flex, {
-                        align: "center",
+        /* @__PURE__ */ jsxs(Flex, {
+            direction: "column",
+            height: "fill",
+            overflow: "hidden",
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                flex: "none",
+                padding: 3,
+                children: /* @__PURE__ */ jsx(Container, {
+                    width: 2,
+                    children: /* @__PURE__ */ jsxs(Stack, {
                         gap: 3,
                         children: [ 
-                        /* @__PURE__ */ jsx(Text, {
-                            size: 2,
-                            weight: "semibold",
-                            children: "Workflows"
-                        }), 
-                        /* @__PURE__ */ jsx(Box, {
-                            flex: 1
+                        /* @__PURE__ */ jsxs(Flex, {
+                            align: "center",
+                            gap: 3,
+                            paddingLeft: 2,
+                            children: [ 
+                            /* @__PURE__ */ jsx(Text, {
+                                size: 2,
+                                weight: "semibold",
+                                children: "Workflows"
+                            }), 
+                            /* @__PURE__ */ jsx(Box, {
+                                flex: 1
+                            }), 
+                            /* @__PURE__ */ jsx(NewWorkflowButton, {}) ]
                         }), 
-                        /* @__PURE__ */ jsx(NewWorkflowButton, {}) ]
-                    }), 
-                    /* @__PURE__ */ jsxs(TabList, {
-                        gap: 1,
-                        children: [ 
-                        /* @__PURE__ */ jsx(Tab, {
-                            "aria-controls": "workflows-tool-panel",
-                            fontSize: 1,
-                            id: "workflows-tool-tab-tasks",
-                            label: "Tasks",
-                            onClick: () => setTab("tasks"),
-                            padding: 2,
-                            selected: tab === "tasks"
+                        /* @__PURE__ */ jsx(TabSwitch, {
+                            ariaControls: "workflows-tool-panel",
+                            idPrefix: "workflows-tool-tab",
+                            onSelect: setTab,
+                            options: TOOL_TABS,
+                            selected: tab
                         }), 
-                        /* @__PURE__ */ jsx(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__ */ jsx("div", {
+                            ref: setFilterSlot
                         }) ]
-                    }), 
-                    /* @__PURE__ */ jsx(Box, {
+                    })
+                })
+            }), 
+            /* @__PURE__ */ jsx(Box, {
+                ref: scrollerRef,
+                flex: 1,
+                overflow: "auto",
+                paddingX: 3,
+                style: {
+                    scrollbarGutter: "stable"
+                },
+                children: /* @__PURE__ */ jsx(Container, {
+                    width: 2,
+                    children: /* @__PURE__ */ jsx(TabPanel, {
+                        "aria-labelledby": `workflows-tool-tab-${tab}`,
                         id: "workflows-tool-panel",
-                        children: /* @__PURE__ */ 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__ */ jsx(Box, {
+                            paddingBottom: 4,
+                            paddingTop: 1,
+                            children: /* @__PURE__ */ 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__ */ jsx(ToolActivityDialog, {
             onClose: () => setOpenTask(null),
             target: openTask