@sanity/workflow-studio-plugin 0.2.0 → 0.3.0

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

@@ -0,0 +1,1860 @@
+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 { useMemo, useState, useEffect, 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 { ChevronDownIcon } from "@sanity/icons/ChevronDown";
+
+import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
+
+import { entryDocRefs, extractDocumentId, findOpenStageEntry, terminalState, tryParseGdr, resourceFromParsed, latestDeployedDefinitions, isStartableDefinition } from "@sanity/workflow-engine";
+
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
+
+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 { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
+
+import { WorkflowDiagram } from "@sanity/workflow-diagram";
+
+import { AddIcon } from "@sanity/icons/Add";
+
+import { SearchIcon } from "@sanity/icons/Search";
+
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
+
+function MutedNote({text: text}) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        paddingY: 3,
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: text
+        })
+    });
+}
+
+function documentRefsOf(instance) {
+    const seen = /* @__PURE__ */ new Map;
+    for (const ref of entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
+    return [ ...seen.values() ];
+}
+
+function 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 DocRefChips({instance: instance, max: max = 2}) {
+    const refs = useMemo(() => documentRefsOf(instance), [ instance ]);
+    /* @__PURE__ */
+    return jsx(RefChips, {
+        max: max,
+        refs: refs
+    });
+}
+
+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, 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({
+            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
+            })
+        };
+    });
+    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 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 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 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;
+}
+
+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 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;
+}
+
+const HITS_CAP = 6;
+
+function TaskFilterMenu({filters: filters, options: options, onChange: onChange}) {
+    const [open, setOpen] = useState(!1), active = hasActiveFilters(filters);
+    /* @__PURE__ */
+    return jsx(DismissablePopover, {
+        content: open ? /* @__PURE__ */ jsx(FilterPanel, {
+            filters: filters,
+            onChange: onChange,
+            options: options
+        }) : null,
+        onDismiss: () => setOpen(!1),
+        open: open,
+        overflow: "visible",
+        children: /* @__PURE__ */ jsx(Button, {
+            "aria-label": "Filter",
+            fontSize: 1,
+            icon: FilterIcon,
+            mode: "bleed",
+            onClick: () => setOpen(v => !v),
+            padding: 2,
+            selected: active || open
+        })
+    });
+}
+
+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(Box, {
+        padding: 3,
+        style: {
+            width: 360
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            gap: 4,
+            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 ]
+        })
+    });
+}
+
+const statusRows = () => Object.keys(STATUS_LABEL).map(key => ({
+    key: key,
+    text: STATUS_LABEL[key]
+}));
+
+function FieldLabel({text: text}) {
+    /* @__PURE__ */
+    return jsx(Text, {
+        muted: !0,
+        size: 1,
+        weight: "medium",
+        children: text
+    });
+}
+
+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 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)
+        })),
+        placeholder: placeholder,
+        query: open ? query : "",
+        children: /* @__PURE__ */ jsx(OptionsList, {
+            activeKeys: activeKeys,
+            emptyNote: emptyNote,
+            hits: hits,
+            onToggle: onToggle,
+            shown: shown
+        })
+    });
+}
+
+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 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 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 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 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
+            }) ]
+        })
+    }));
+    /* @__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 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
+        })
+    }));
+    /* @__PURE__ */
+    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 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(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(OptionRow, {
+                active: date === "past",
+                onPick: () => pick("past"),
+                children: /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    children: "In the past"
+                })
+            }), 
+            /* @__PURE__ */ jsx(OptionRow, {
+                active: date === "none",
+                onPick: () => pick("none"),
+                children: /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    children: "No date"
+                })
+            }), 
+            /* @__PURE__ */ jsx(Box, {
+                paddingTop: 1,
+                paddingX: 2,
+                children: /* @__PURE__ */ jsx(Text, {
+                    muted: !0,
+                    size: 1,
+                    children: "Before…"
+                })
+            }), 
+            /* @__PURE__ */ jsx(DatePicker, {
+                onSelect: next => pick({
+                    before: endOfDayIso(next)
+                }),
+                value: pickedDate
+            }) ]
+        })
+    });
+}
+
+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
+};
+
+function useToolInstances() {
+    const {engine: engine} = useWorkflowContext(), {instances: instances, loading: loading, invalid: invalid} = 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 === 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, {
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 2,
+            justify: "flex-end",
+            children: [ 
+            /* @__PURE__ */ jsx(ActiveFilterChips, {
+                filters: filters,
+                onChange: setFilters,
+                options: options
+            }), 
+            /* @__PURE__ */ jsx(TaskFilterMenu, {
+                filters: filters,
+                onChange: setFilters,
+                options: options
+            }) ]
+        }), 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}) {
+    /* @__PURE__ */
+    return jsx(Fragment, {
+        children: instances.map(instance => /* @__PURE__ */ jsx(InstanceRow, {
+            instance: instance,
+            onOpen: () => onOpenInstance(instance)
+        }, instance._id))
+    });
+}
+
+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 InstanceRow({instance: instance, onOpen: onOpen}) {
+    const definition = useMemo(() => definitionSnapshotOf(instance), [ instance ]);
+    /* @__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
+                }) ]
+            })
+        }), 
+        /* @__PURE__ */ jsx(DocRefChips, {
+            instance: instance
+        }) ]
+    });
+}
+
+function SpinnerSlot({busy: busy}) {
+    /* @__PURE__ */
+    return jsx(Flex, {
+        align: "center",
+        flex: "none",
+        justify: "center",
+        style: {
+            width: 19,
+            height: 19
+        },
+        children: busy ? /* @__PURE__ */ jsx(Spinner, {
+            muted: !0
+        }) : 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 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 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 ]
+    });
+}
+
+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(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(InstanceStatusBadge, {
+                definition: definition,
+                instance: instance
+            }), 
+            /* @__PURE__ */ jsx(PendingWorkBadge, {
+                instance: instance
+            }), 
+            /* @__PURE__ */ jsx(SpinnerSlot, {
+                busy: !ready || isEvaluationStale(entry)
+            }) ]
+        })
+    });
+}
+
+function StudioDocumentsSection({instance: instance}) {
+    const refs = documentRefsOf(instance);
+    return refs.length === 0 ? null : /* @__PURE__ */ jsxs(Stack, {
+        gap: 3,
+        marginTop: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            weight: "medium",
+            children: refs.length === 1 ? "Studio document" : "Studio documents"
+        }), 
+        /* @__PURE__ */ jsx(Stack, {
+            gap: 2,
+            children: refs.map(ref => /* @__PURE__ */ jsx(DocPreviewLink, {
+                gdr: ref
+            }, ref.id))
+        }) ]
+    });
+}
+
+function StageDiagramSection({entry: entry, definition: definition}) {
+    const {instance: instance} = entry;
+    return definition ? 
+    /* @__PURE__ */ jsx(WorkflowDiagram, {
+        currentStage: terminalState(instance) === "in-flight" ? instance.currentStage : void 0,
+        definition: definition,
+        evaluation: entry.evaluation,
+        explain: !0,
+        guardCount: entry.guards?.length,
+        height: 340,
+        history: instance.history
+    }, instance._id) : /* @__PURE__ */ jsx(Card, {
+        border: !0,
+        marginTop: 3,
+        padding: 3,
+        radius: 2,
+        tone: "caution",
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "Couldn’t load this workflow’s definition — the stage diagram is unavailable and titles fall back to raw names."
+        })
+    });
+}
+
+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 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 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))
+            }) ]
+        })
+    });
+}
+
+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 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))
+            })
+        }) : null ]
+    });
+}
+
+function GroupTitle({text: text}) {
+    /* @__PURE__ */
+    return jsx(Text, {
+        size: 1,
+        weight: "semibold",
+        children: text
+    });
+}
+
+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;
+}
+
+function CollapsibleGroup({header: header, children: children}) {
+    const [open, setOpen] = useState(!0);
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(Card, {
+            paddingX: 2,
+            paddingY: 2,
+            radius: 2,
+            tone: "transparent",
+            children: /* @__PURE__ */ jsxs(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%"
+                },
+                children: /* @__PURE__ */ jsx(RefChips, {
+                    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, {
+            onOpenTask: onOpenTask,
+            rows: group.rows
+        })
+    }) : null;
+}
+
+function GroupMenu({group: group, document: document, onOpenWorkflow: onOpenWorkflow}) {
+    const router = 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, {
+            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
+                }),
+                text: "Open document"
+            }) : null ]
+        }),
+        popover: {
+            portal: !0
+        }
+    });
+}
+
+function TaskRows({rows: rows, onOpenTask: onOpenTask}) {
+    /* @__PURE__ */
+    return jsx(Stack, {
+        children: rows.map(row => /* @__PURE__ */ jsx(TaskRowButton, {
+            onOpen: () => onOpenTask({
+                instanceId: row.instanceId,
+                stage: row.stage,
+                activityName: row.activityName
+            }),
+            row: row
+        }, `${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
+    });
+    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;
+}
+
+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 TasksTab({instances: instances, loading: loading, identity: identity, onOpenTask: onOpenTask, onOpenWorkflow: onOpenWorkflow, truncated: truncated}) {
+    const [segment, setSegment] = useState("mine"), [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,
+            filters: filters,
+            now: /* @__PURE__ */ new Date
+        });
+    }, [ groups, segment, filters ]);
+    return loading ? /* @__PURE__ */ jsx(LoadingRow, {
+        label: "Loading tasks…"
+    }) : /* @__PURE__ */ jsxs(Box, {
+        children: [ 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            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(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 ]
+        }) ]
+    });
+}
+
+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({})
+    }, instanceId) : /* @__PURE__ */ jsx(WorkflowsHome, {
+        onOpenInstance: instance => {
+            typeof instance != "string" && seedInstance(instance), router.navigate({
+                instanceId: typeof instance == "string" ? instance : instance._id
+            });
+        }
+    });
+}
+
+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, {
+        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",
+                        gap: 3,
+                        children: [ 
+                        /* @__PURE__ */ jsx(Text, {
+                            size: 2,
+                            weight: "semibold",
+                            children: "Workflows"
+                        }), 
+                        /* @__PURE__ */ jsx(Box, {
+                            flex: 1
+                        }), 
+                        /* @__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(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(Box, {
+                        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
+                        })
+                    }) ]
+                })
+            })
+        }), openTask ? /* @__PURE__ */ jsx(ToolActivityDialog, {
+            onClose: () => setOpenTask(null),
+            target: openTask
+        }) : null ]
+    });
+}
+
+export { WorkflowsToolRoot as default };