@sanity/workflow-studio-plugin 0.26.0 → 0.28.0

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), Clock = require("@sanity/icons/Clock"), Cog = require("@sanity/icons/Cog"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), workflowEngine = require("@sanity/workflow-engine"), ArrowLeft = require("@sanity/icons/ArrowLeft"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), pluralize = require("pluralize-esm"), sanity = require("sanity"), workflowStudio = require("@sanity/workflow-studio"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), Filter = require("@sanity/icons/Filter"), workflowComponents = require("@sanity/workflow-components"), endOfDay = require("date-fns/endOfDay"), reactDom = require("react-dom"), types = require("@sanity/types"), workflowDiagram = require("@sanity/workflow-diagram"), ChevronDown = require("@sanity/icons/ChevronDown"), react$1 = require("motion/react");
+var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), workflowEngine = require("@sanity/workflow-engine"), ArrowLeft = require("@sanity/icons/ArrowLeft"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), pluralize = require("pluralize-esm"), sanity = require("sanity"), workflowStudio = require("@sanity/workflow-studio"), Add = require("@sanity/icons/Add"), Search = require("@sanity/icons/Search"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), Filter = require("@sanity/icons/Filter"), workflowComponents = require("@sanity/workflow-components"), endOfDay = require("date-fns/endOfDay"), reactDom = require("react-dom"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), types = require("@sanity/types"), workflowDiagram = require("@sanity/workflow-diagram"), react$1 = require("motion/react");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -10,16 +10,6 @@ function _interopDefaultCompat(e) {
 
 var pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize);
 
-function CodeChip({value: value}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsx("code", {
-        style: {
-            overflowWrap: "anywhere"
-        },
-        children: value
-    });
-}
-
 function SectionHeading({children: children}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Text, {
@@ -29,146 +19,6 @@ function SectionHeading({children: children}) {
     });
 }
 
-function normalizeAbortReason(raw) {
-    const trimmed = raw.trim();
-    return trimmed === "" ? void 0 : trimmed;
-}
-
-function abortCommitReport(args) {
-    return args.changed ? {
-        outcome: "aborted",
-        toast: abortedToast(args.title)
-    } : {
-        outcome: "already-settled",
-        toast: abortAlreadySettledToast(args.title)
-    };
-}
-
-function abortedToast(title) {
-    return {
-        id: index.TOAST_ID.abort,
-        status: "info",
-        title: `Aborted “${title}”`
-    };
-}
-
-function abortAlreadySettledToast(title) {
-    return {
-        id: index.TOAST_ID.abort,
-        status: "info",
-        title: `“${title}” had already finished`,
-        description: "Nothing was aborted — the workflow reached a terminal state first."
-    };
-}
-
-function abortUnconfirmedToast(args) {
-    return {
-        id: index.TOAST_ID.abort,
-        status: "warning",
-        title: `Couldn’t confirm “${args.title}” was aborted`,
-        description: `${index.describeError(args.err)} — the abort may still have committed, so check the workflow’s state before trying again.`
-    };
-}
-
-function AbortWorkflowDialog({entry: entry, onClose: onClose}) {
-    const {engine: engine} = index.useWorkflowContext(), definition = index.useDefinition(entry), toast = index.useWorkflowToast(), telemetry = workflowReact.useWorkflowTelemetry(), [typedReason, setTypedReason] = react.useState(""), [pending, setPending] = react.useState(!1), {instance: instance} = entry, title = index.instanceTitle(instance, definition), reason = normalizeAbortReason(typedReason), reasonInputId = `abort-workflow-reason-${instance._id}`;
-    index.useLogEventOnMount(index.WorkflowAbortDialogOpened, {
-        instanceId: instance._id
-    });
-    const confirm = async () => {
-        if (reason === void 0) return;
-        const log = outcome => telemetry.log(index.WorkflowAbortDialogSubmitted, {
-            instanceId: instance._id,
-            outcome: outcome
-        });
-        setPending(!0);
-        try {
-            const {changed: changed} = await engine.abortInstance({
-                instanceId: instance._id,
-                reason: reason
-            }), report = abortCommitReport({
-                title: title,
-                changed: changed
-            });
-            toast.push(report.toast), log(report.outcome), onClose();
-        } catch (err) {
-            toast.push(abortUnconfirmedToast({
-                title: title,
-                err: err
-            })), log("unconfirmed"), setPending(!1);
-        }
-    };
-    /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Dialog, {
-        footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            padding: 3,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-                gap: 2,
-                justify: "flex-end",
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    disabled: pending,
-                    fontSize: 1,
-                    mode: "bleed",
-                    onClick: onClose,
-                    padding: 2,
-                    text: "Cancel"
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    disabled: reason === void 0,
-                    fontSize: 1,
-                    loading: pending,
-                    onClick: () => {
-                        confirm();
-                    },
-                    padding: 2,
-                    text: "Abort workflow",
-                    tone: "critical"
-                }) ]
-            })
-        }),
-        header: "Abort workflow",
-        id: `abort-workflow-${instance._id}`,
-        onClose: () => {
-            pending || onClose();
-        },
-        width: 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-            padding: 4,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                gap: 5,
-                children: [ 
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                    size: 1,
-                    children: [ "Abort the ", 
-                    /* @__PURE__ */ jsxRuntime.jsx("strong", {
-                        children: title
-                    }), " workflow? This cannot be undone." ]
-                }), 
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                    gap: 3,
-                    children: [ 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                        as: "label",
-                        htmlFor: reasonInputId,
-                        size: 1,
-                        weight: "medium",
-                        children: "Reason"
-                    }), 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
-                        autoFocus: !0,
-                        fontSize: 1,
-                        id: reasonInputId,
-                        onChange: event => setTypedReason(event.currentTarget.value),
-                        placeholder: "Why is this workflow being stopped?",
-                        value: typedReason
-                    }) ]
-                }) ]
-            })
-        })
-    });
-}
-
 function AbortWorkflowSection({entry: entry}) {
     const [aborting, setAborting] = react.useState(!1);
     return index.isLiveEntry(entry) ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
@@ -186,368 +36,13 @@ function AbortWorkflowSection({entry: entry}) {
                 text: "Abort workflow…",
                 tone: "critical"
             })
-        }), aborting ? /* @__PURE__ */ jsxRuntime.jsx(AbortWorkflowDialog, {
+        }), aborting ? /* @__PURE__ */ jsxRuntime.jsx(index.AbortWorkflowDialog, {
             entry: entry,
             onClose: () => setAborting(!1)
         }) : null ]
     }) : null;
 }
 
-function makeTitleResolver(definition) {
-    const activities = (definition?.stages ?? []).flatMap(s => s.activities ?? []);
-    return {
-        action: (activityName, actionName) => activities.find(t => t.name === activityName)?.actions?.find(a => a.name === actionName)?.title ?? actionName,
-        activity: name => activities.find(t => t.name === name)?.title ?? name,
-        stage: name => index.stageTitle(definition, name)
-    };
-}
-
-function attributed(actor, ...parts) {
-    if (actor) return {
-        actorId: actor.id,
-        parts: parts
-    };
-    const [first, ...rest] = parts;
-    return typeof first != "string" ? {
-        actorId: void 0,
-        parts: parts
-    } : {
-        actorId: void 0,
-        parts: [ first.charAt(0).toUpperCase() + first.slice(1), ...rest ]
-    };
-}
-
-function standalone(...parts) {
-    return {
-        actorId: void 0,
-        parts: parts
-    };
-}
-
-const historyLiner = {
-    stageEntered: (h, titles) => attributed(h.actor, `entered ${titles.stage(h.stage)}${h.fromStage ? ` from ${titles.stage(h.fromStage)}` : ""}`),
-    stageExited: (h, titles) => attributed(h.actor, `left ${titles.stage(h.stage)} for ${titles.stage(h.toStage)}`),
-    activityStatusChanged: (h, titles) => attributed(h.actor, `changed ${titles.activity(h.activity)}: ${h.from} → ${h.to}`),
-    actionFired: (h, titles) => {
-        const phrase = `fired ${titles.action(h.activity, h.action)} on ${titles.activity(h.activity)}`;
-        return h.triggered ? standalone(`The workflow ${phrase}`) : attributed(h.actor, phrase);
-    },
-    transitionFired: (h, titles) => attributed(h.actor, `moved ${titles.stage(h.fromStage)} → ${titles.stage(h.toStage)}`),
-    effectQueued: h => standalone("Effect ", {
-        code: h.effect
-    }, " queued"),
-    effectCompleted: h => {
-        const detail = h.detail ? ` — ${h.detail}` : "";
-        return h.actor ? attributed(h.actor, "resolved effect ", {
-            code: h.effect
-        }, ` — ${h.status}${detail}`) : standalone("Effect ", {
-            code: h.effect
-        }, ` ${h.status}${detail}`);
-    },
-    effectClaimReleased: h => attributed(h.actor, "released a stale claim on effect ", {
-        code: h.effect
-    }, ` ${h.via === "sweep" ? "via the sweeper" : "via a drain takeover"}`),
-    spawned: (h, titles) => attributed(h.actor, `spawned a child workflow from ${titles.activity(h.activity)}`),
-    subworkflowAdopted: (h, titles) => standalone(`Re-adopted child workflow into ${titles.activity(h.activity)} on re-entering ${titles.stage(h.stage)}`),
-    subworkflowResolved: (h, titles) => standalone(`Child workflow of ${titles.activity(h.activity)} ${h.status === "done" ? "completed" : "was aborted"}`),
-    subworkflowOrphaned: h => standalone(`Orphaned child workflow reached terminal — ${h.detail}`),
-    aborted: (h, titles) => attributed(h.actor, `aborted the workflow at ${titles.stage(h.stage)}${h.reason ? ` — ${h.reason}` : ""}`),
-    opApplied: (h, titles) => h.action ? attributed(h.actor, `changed state via action ${titles.action(h.activity ?? "", h.action)}`) : h.activity ? attributed(h.actor, `changed state via activity ${titles.activity(h.activity)}`) : attributed(h.actor, "changed state via ", {
-        code: h.opType
-    }),
-    fieldQueryDiscarded: h => standalone({
-        code: JSON.stringify(h)
-    })
-};
-
-function historyLine(h, titles) {
-    return historyLiner[h._type](h, titles);
-}
-
-function historyWindow(args) {
-    const {entries: entries, expanded: expanded} = args;
-    return {
-        overflows: entries.length > 6,
-        shown: expanded ? entries : entries.slice(0, 6)
-    };
-}
-
-function PendingEffectRows({instance: instance, now: now}) {
-    const {drainEffectsFor: drainEffectsFor, completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = index.useWorkflowContext(), toast = index.useWorkflowToast(), [busy, setBusy] = react.useState(!1), pending = instance.pendingEffects ?? [];
-    if (pending.length === 0) return null;
-    const runRegistered = async () => {
-        setBusy(!0);
-        try {
-            await drainEffectsFor(instance._id), toast.push({
-                id: index.TOAST_ID.effectsDrain,
-                status: "info",
-                title: "Ran the registered handlers"
-            });
-        } catch (err) {
-            toast.push({
-                id: index.TOAST_ID.effectsDrain,
-                status: "error",
-                title: "Failed to run pending effects",
-                description: index.describeError(err)
-            });
-        } finally {
-            setBusy(!1);
-        }
-    }, resolve = async (effectKey, status) => {
-        setBusy(!0);
-        try {
-            await completeEffectFor(instance._id, {
-                effectKey: effectKey,
-                status: status,
-                detail: "Resolved in Studio"
-            }), toast.push({
-                id: index.TOAST_ID.effectResolve,
-                status: "info",
-                title: `Effect marked as ${status}`
-            });
-        } catch (err) {
-            toast.push({
-                id: index.TOAST_ID.effectResolve,
-                status: "error",
-                title: "Failed to resolve the effect",
-                description: index.describeError(err)
-            });
-        } finally {
-            setBusy(!1);
-        }
-    };
-    /* @__PURE__ */
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: pending.map(fx => /* @__PURE__ */ jsxRuntime.jsx(PendingEffectRow, {
-            busy: busy,
-            effect: fx,
-            instanceId: instance._id,
-            now: now,
-            onResolve: status => resolve(fx._key, status),
-            onRunHandlers: runRegistered,
-            registered: fx.name in effectHandlers
-        }, fx._key))
-    });
-}
-
-function PendingEffectRow({busy: busy, effect: effect, instanceId: instanceId, now: now, onResolve: onResolve, onRunHandlers: onRunHandlers, registered: registered}) {
-    const label = effect.title ?? effect.name, avatarSize = index.useAvatarSize();
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(FeedGlyph, {
-            hint: "Waiting to run",
-            icon: /* @__PURE__ */ jsxRuntime.jsx(Clock.ClockIcon, {})
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            flex: 1,
-            gap: 1,
-            style: {
-                minWidth: 0
-            },
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                style: {
-                    minWidth: 0
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                    size: 1,
-                    textOverflow: "ellipsis",
-                    children: [ effect.title ?? /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
-                        value: effect.name
-                    }), registered ? " — ready to run in Studio" : " — waiting for the runtime" ]
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(FeedStamp, {
-                at: effect.queuedAt,
-                now: now
-            }) ]
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            align: "center",
-            flex: "none",
-            style: {
-                height: avatarSize
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(index.HintedMenuButton, {
-                button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                    "aria-label": `Resolve ${label}`,
-                    disabled: busy,
-                    fontSize: 1,
-                    icon: EllipsisHorizontal.EllipsisHorizontalIcon,
-                    mode: "bleed",
-                    padding: 2
-                }),
-                hint: "Resolve",
-                id: `pending-effect-menu-${instanceId}-${effect._key}`,
-                menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
-                    children: [ registered ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-                        onClick: onRunHandlers,
-                        text: "Run registered handlers"
-                    }) : null, 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-                        onClick: () => onResolve("done"),
-                        text: "Mark done"
-                    }), 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
-                        onClick: () => onResolve("failed"),
-                        text: "Mark failed",
-                        tone: "critical"
-                    }) ]
-                }),
-                popover: {
-                    placement: "bottom-end",
-                    portal: !0
-                }
-            })
-        }) ]
-    });
-}
-
-function ActivityLog({instance: instance, definition: definition}) {
-    const titles = react.useMemo(() => makeTitleResolver(definition), [ definition ]), entries = react.useMemo(() => instance.history.toReversed(), [ instance.history ]), [now, setNow] = react.useState(() => /* @__PURE__ */ new Date), [expanded, setExpanded] = react.useState(!1);
-    react.useEffect(() => {
-        const timer = setInterval(() => setNow(/* @__PURE__ */ new Date), 6e4);
-        return () => clearInterval(timer);
-    }, []);
-    const history = historyWindow({
-        entries: entries,
-        expanded: expanded
-    });
-    return entries.length === 0 && (instance.pendingEffects ?? []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-        muted: !0,
-        size: 1,
-        children: "No activity yet"
-    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-        gap: 3,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(PendingEffectRows, {
-            instance: instance,
-            now: now
-        }), history.shown.map(h => /* @__PURE__ */ jsxRuntime.jsx(HistoryRow, {
-            entry: h,
-            now: now,
-            titles: titles
-        }, h._key)), history.overflows ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
-                fontSize: 1,
-                mode: "bleed",
-                onClick: () => setExpanded(!expanded),
-                padding: 2,
-                text: expanded ? "Show less history" : "Show all history"
-            })
-        }) : null ]
-    });
-}
-
-function FeedStamp({at: at, now: now}) {
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        flex: "none",
-        gap: 1,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: "·"
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(index.HoverHint, {
-            text: index.formatDateTime(at),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                style: {
-                    whiteSpace: "nowrap"
-                },
-                children: index.formatShortAgo(at, now)
-            })
-        }) ]
-    });
-}
-
-function HistoryRow({entry: entry, now: now, titles: titles}) {
-    const line = historyLine(entry, titles);
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        children: [ line.actorId === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedGlyph, {
-            hint: "The workflow",
-            icon: /* @__PURE__ */ jsxRuntime.jsx(Cog.CogIcon, {})
-        }) : /* @__PURE__ */ jsxRuntime.jsx(index.UserAvatar, {
-            id: line.actorId
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-            align: "center",
-            flex: 1,
-            gap: 1,
-            style: {
-                minWidth: 0
-            },
-            children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-                style: {
-                    minWidth: 0
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-                    muted: !0,
-                    size: 1,
-                    textOverflow: "ellipsis",
-                    children: [ line.actorId === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                        children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsx(ActorNameSpan, {
-                            id: line.actorId
-                        }), " " ]
-                    }), line.parts.map((part, index2) => typeof part == "string" ? part : /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
-                        value: part.code
-                    }, index2)) ]
-                })
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(FeedStamp, {
-                at: entry.at,
-                now: now
-            }) ]
-        }) ]
-    });
-}
-
-function ActorNameSpan({id: id}) {
-    const {name: name} = index.useUserDisplay(id), {font: font} = ui.useTheme_v2();
-    /* @__PURE__ */
-    return jsxRuntime.jsx("span", {
-        style: {
-            fontWeight: font.text.weights.medium
-        },
-        children: name
-    });
-}
-
-function FeedGlyph({hint: hint, icon: icon}) {
-    const size = index.useAvatarSize();
-    /* @__PURE__ */
-    return jsxRuntime.jsx(index.HoverHint, {
-        text: hint,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-            align: "center",
-            flex: "none",
-            justify: "center",
-            style: {
-                height: size,
-                width: size
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                muted: !0,
-                size: 1,
-                children: icon
-            })
-        })
-    });
-}
-
 function documentRefsOf(instance) {
     const seen = /* @__PURE__ */ new Map;
     for (const ref of workflowEngine.entryDocRefs(instance.fields)) seen.has(ref.id) || seen.set(ref.id, ref);
@@ -781,7 +276,7 @@ function NotFoundNote({id: id}) {
     /* @__PURE__ */
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ "Unable to find workflow with id “", 
-        /* @__PURE__ */ jsxRuntime.jsx(CodeChip, {
+        /* @__PURE__ */ jsxRuntime.jsx(index.CodeChip, {
             value: id
         }), "”." ]
     });
@@ -836,7 +331,7 @@ function InstanceDetailBody({entry: entry, framed: framed, subject: subject}) {
                         /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, {
                             children: "History"
                         }), 
-                        /* @__PURE__ */ jsxRuntime.jsx(ActivityLog, {
+                        /* @__PURE__ */ jsxRuntime.jsx(index.ActivityLog, {
                             definition: definition,
                             instance: instance
                         }) ]
@@ -941,13 +436,45 @@ function deployedPhrase(definition) {
     return ago === "" ? index.formatShortDateTime(deployedAt) : `${index.formatShortDateTime(deployedAt)} (${ago})`;
 }
 
-const TOOL_PANEL_PADDING = 3, TOOL_HEADING_PADDING = 2;
+const TOOL_PANEL_PADDING = 3, TOOL_HEADING_PADDING = 2, logged = /* @__PURE__ */ new WeakSet;
+
+function logReadFailure(what, error) {
+    if (typeof error == "object" && error !== null) {
+        if (logged.has(error)) return;
+        logged.add(error);
+    }
+    console.error(`[workflow-studio-plugin] could not load ${what}:`, error);
+}
+
+function useReadFailureLog(what, error) {
+    react.useEffect(() => {
+        error !== void 0 && logReadFailure(what, error);
+    }, [ what, error ]);
+}
+
+const INSTANCE_CAP = 200, INSTANCES_READ_FAILED = "Couldn’t load workflow data. Try again later.";
 
-function catalogReadError(error) {
-    return `Could not load the deployed workflows: ${error}`;
+function useCappedInstances(filter) {
+    const {engine: engine} = index.useWorkflowContext(), capped = react.useMemo(() => ({
+        ...filter,
+        limit: INSTANCE_CAP
+    }), [ filter ]), {instances: instances, loading: loading, unreadable: unreadable, error: error} = workflowStudio.useWorkflowInstances({
+        engine: engine,
+        filter: capped
+    });
+    return useReadFailureLog("workflow data", error), react.useMemo(() => {
+        const rows = instances ?? [];
+        return {
+            rows: rows,
+            truncated: rows.length + unreadable.length === INSTANCE_CAP,
+            loading: loading,
+            unreadable: unreadable,
+            error: error === void 0 ? void 0 : workflowEngine.errorMessage(error)
+        };
+    }, [ instances, loading, unreadable, error ]);
 }
 
-const lastRead = /* @__PURE__ */ new WeakMap, issuedReads = /* @__PURE__ */ new WeakMap;
+const CATALOG_READ_FAILED = "Couldn’t load the deployed workflows. Try again later.", lastRead = /* @__PURE__ */ new WeakMap, issuedReads = /* @__PURE__ */ new WeakMap;
 
 function useDeployedDefinitions() {
     const {engine: engine} = index.useWorkflowContext(), [definitions, setDefinitions] = react.useState(() => lastRead.get(engine)?.rows), [error, setError] = react.useState(void 0);
@@ -962,7 +489,7 @@ function useDeployedDefinitions() {
                 rows: latest
             }), cancelled || (setDefinitions(latest), setError(void 0));
         })().catch(err => {
-            cancelled || setError(index.describeError(err));
+            logReadFailure("the deployed workflows", err), cancelled || setError(index.describeError(err));
         }), () => {
             cancelled = !0;
         };
@@ -972,46 +499,30 @@ function useDeployedDefinitions() {
     };
 }
 
-const INSTANCE_CAP = 200;
-
-function useCappedInstances(filter) {
-    const {engine: engine} = index.useWorkflowContext(), capped = react.useMemo(() => ({
-        ...filter,
-        limit: INSTANCE_CAP
-    }), [ filter ]), {instances: instances, loading: loading, unreadable: unreadable} = workflowStudio.useWorkflowInstances({
-        engine: engine,
-        filter: capped
-    });
-    return react.useMemo(() => {
-        const rows = instances ?? [];
-        return {
-            rows: rows,
-            truncated: rows.length + unreadable.length === INSTANCE_CAP,
-            loading: loading,
-            unreadable: unreadable
-        };
-    }, [ instances, loading, unreadable ]);
-}
-
 const INSTANCE_CAP_COUNT_NOTE = `Counts from the latest ${INSTANCE_CAP} workflows — older ones aren’t counted.`, NEWEST_INSTANCES = {
     includeCompleted: !0
 };
 
 function useToolInstances() {
-    const {rows: rows, truncated: truncated, loading: loading, unreadable: unreadable} = useCappedInstances(NEWEST_INSTANCES);
+    const {rows: rows, truncated: truncated, loading: loading, unreadable: unreadable, error: error} = useCappedInstances(NEWEST_INSTANCES);
     return react.useMemo(() => ({
         inFlight: rows.filter(instance => workflowEngine.terminalState(instance) === "in-flight"),
         settled: rows.filter(instance => workflowEngine.terminalState(instance) !== "in-flight"),
         truncated: truncated,
         loading: loading,
-        unreadable: unreadable
-    }), [ rows, truncated, loading, unreadable ]);
+        unreadable: unreadable,
+        error: error
+    }), [ rows, truncated, loading, unreadable, error ]);
 }
 
 function activeSummary(active) {
     return active === 0 ? "No active instances" : pluralize__default.default("active instance", active, !0);
 }
 
+function activeHeadline(args) {
+    if (args.error === void 0) return args.loading ? "counting active instances…" : activeSummary(args.active);
+}
+
 const CARD_MIN_WIDTH = 280, CARD_RADIUS$1 = 3, CARD_PADDING = 4, CARD_MIN_HEIGHT = 180;
 
 function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
@@ -1021,13 +532,9 @@ function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
             titleOf: name => schema.get(name)?.title
         })
     });
-    if (error !== void 0) /* @__PURE__ */
-    return jsxRuntime.jsx(TabStatusRow, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: catalogReadError(error)
-        })
+    if (error !== void 0) /* @__PURE__ */ return jsxRuntime.jsx(index.NoteBanner, {
+        label: CATALOG_READ_FAILED,
+        tone: "critical"
     });
     if (definitions === void 0) /* @__PURE__ */
     return jsxRuntime.jsx(TabStatusRow, {
@@ -1054,13 +561,20 @@ function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
         mappings: mappings,
         inFlight: instances.inFlight,
         issues: mappingIssues
-    }), active = rows.reduce((sum, row) => sum + row.activeCount, 0);
+    }), active = rows.reduce((sum, row) => sum + row.activeCount, 0), activity = activeHeadline({
+        active: active,
+        error: instances.error,
+        loading: instances.loading
+    });
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Stack, {
         gap: 3,
         paddingBottom: 4,
         paddingTop: 3,
-        children: [ undeployed, 
+        children: [ undeployed, instances.error === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
+            label: INSTANCES_READ_FAILED,
+            tone: "critical"
+        }), 
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
             align: "center",
             gap: 2,
@@ -1070,11 +584,10 @@ function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
                 size: 1,
                 weight: "semibold",
                 children: pluralize__default.default("workflow", rows.length, !0)
-            }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            }), activity === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                 muted: !0,
                 size: 1,
-                children: instances.loading ? "counting active instances…" : activeSummary(active)
+                children: activity
             }) ]
         }), 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, {
@@ -1084,7 +597,7 @@ function OverviewTab({onOpenWorkflow: onOpenWorkflow}) {
                 gridTemplateColumns: `repeat(auto-fill, minmax(${CARD_MIN_WIDTH}px, 1fr))`
             },
             children: rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(WorkflowCard, {
-                countPending: instances.loading,
+                countKnown: instances.error === void 0 && !instances.loading,
                 onOpen: () => onOpenWorkflow(row.name),
                 row: row
             }, row.name))
@@ -1101,13 +614,13 @@ function UndeployedWorkflows({notices: notices}) {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
         gap: 2,
         paddingBottom: 1,
-        children: notices.map(notice => /* @__PURE__ */ jsxRuntime.jsx(index.CautionNote, {
+        children: notices.map(notice => /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
             label: notice
         }, notice))
     });
 }
 
-function WorkflowCard({countPending: countPending, onOpen: onOpen, row: row}) {
+function WorkflowCard({countKnown: countKnown, onOpen: onOpen, row: row}) {
     const flagged = row.brokenBindings.length > 0, card = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
         as: "button",
         onClick: onOpen,
@@ -1142,11 +655,11 @@ function WorkflowCard({countPending: countPending, onOpen: onOpen, row: row}) {
                     size: 1,
                     weight: "semibold",
                     children: row.title
-                }), countPending ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                }), countKnown ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                     muted: !0,
                     size: 1,
                     children: activeSummary(row.activeCount)
-                }) ]
+                }) : null ]
             }) ]
         })
     });
@@ -1200,7 +713,7 @@ function DefinitionPickerPanel({onPick: onPick}) {
     const {definitions: definitions, error: error} = useStartableDefinitions(), [query, setQuery] = react.useState(""), visible = react.useMemo(() => {
         const q = query.trim().toLowerCase();
         return definitions ? q ? definitions.filter(d => `${d.title} ${d.name}`.toLowerCase().includes(q)) : definitions : [];
-    }, [ definitions, query ]);
+    }, [ definitions, query ]), settled = error === void 0 ? definitions : void 0;
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Box, {
         padding: 2,
@@ -1217,13 +730,14 @@ function DefinitionPickerPanel({onPick: onPick}) {
                 onChange: event => setQuery(event.currentTarget.value),
                 placeholder: "Filter workflows…",
                 value: query
-            }), error ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-                text: catalogReadError(error)
+            }), error ? /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
+                label: CATALOG_READ_FAILED,
+                tone: "critical"
             }) : null, !definitions && !error ? /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
                 label: "Loading workflows…"
-            }) : null, definitions && definitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+            }) : null, settled?.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
                 text: "No startable workflows are deployed"
-            }) : null, definitions && definitions.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+            }) : null, settled !== void 0 && settled.length > 0 && visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
                 text: "No workflows match"
             }) : null, 
             /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
@@ -1549,11 +1063,15 @@ function taskRowsOf(args) {
             open: index.isOpenActivityStatus(activity.status),
             dates: index.datesOf(fields),
             dueDates: index.dueDatesOf(fields),
-            assigneeIds: index.assigneeUserIdsOf(fields),
+            assignees: index.assigneesOf(fields),
             assignedToMe: identity !== void 0 && index.isActivityAssignedTo({
                 state: fields,
                 who: identity
             }),
+            roleMatched: identity !== void 0 && index.isRoleAssignedTo({
+                state: fields,
+                who: identity
+            }),
             assignControl: index.rowAssignControlState(controlArgs),
             dateControl: index.rowDateControlState(controlArgs)
         };
@@ -1636,6 +1154,11 @@ function onlyMyTasks(groups) {
     });
 }
 
+function hasRoleMatchedTasks(groups) {
+    const bandHasOne = band => band.rows.some(row => row.roleMatched);
+    return groups.withDocuments.some(group => group.instances.some(bandHasOne)) || groups.withoutDocuments.some(bandHasOne);
+}
+
 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);
@@ -1646,7 +1169,7 @@ function taskRowRender(row, entry) {
     return entry?.evaluation === void 0 || activityEval === void 0 ? {
         face: index.committedRowFace(row),
         assignState: row.assignControl,
-        assigneeIds: row.assigneeIds,
+        assignees: row.assignees,
         dateState: row.dateControl,
         dueDates: row.dueDates,
         terminalActions: [],
@@ -1779,7 +1302,7 @@ function OrphanedWorkflowsNote({orphans: orphans}) {
     /* @__PURE__ */
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(index.CautionNote, {
+        /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
             action: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
                 fontSize: 1,
                 mode: "ghost",
@@ -2083,7 +1606,7 @@ function statusArm(row, statuses) {
 
 function assigneeArm(row, assigneeIds) {
     const arm = activeArm(assigneeIds);
-    return arm ? arm.some(id => row.assigneeIds.includes(id)) : !0;
+    return arm ? row.assignees.some(item => item.type === "user" && arm.includes(item.id)) : !0;
 }
 
 function rowMatches(args) {
@@ -2607,6 +2130,55 @@ function FilterRowPortal({filters: filters, onChange: onChange, options: options
     }), slot) : null;
 }
 
+function CollapsibleBand({header: header, children: children, background: background = !1, defaultOpen: defaultOpen = !0, onToggle: onToggle, open: controlledOpen, sticky: sticky = !1, title: title}) {
+    const [heldOpen, setHeldOpen] = react.useState(defaultOpen), open = controlledOpen ?? heldOpen, toggle = onToggle ?? (() => setHeldOpen(value => !value)), verb = open ? "Collapse" : "Expand";
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 1,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+            onDoubleClick: event => {
+                event.target instanceof Element && event.target.closest("a, button") || toggle();
+            },
+            padding: 1,
+            radius: 3,
+            style: {
+                userSelect: "none",
+                ...sticky ? {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1
+                } : {}
+            },
+            tone: background ? "transparent" : "inherit",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "center",
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    "aria-label": `${verb} ${title}`,
+                    fontSize: 1,
+                    icon: open ? ChevronDown.ChevronDownIcon : ChevronRight.ChevronRightIcon,
+                    mode: "bleed",
+                    onClick: toggle,
+                    padding: 2
+                }), header ]
+            })
+        }), open ? children : null ]
+    });
+}
+
+function TrailingHairline() {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        flex: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.Hairline, {
+            weight: .5
+        })
+    });
+}
+
 function isPlainClick(event) {
     return !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
 }
@@ -2680,7 +2252,7 @@ function targetOf(row) {
 function DocumentBand({group: group, ...wiring}) {
     const {open: open, toggle: toggle} = useBandOpen(wiring.bands, group.key);
     /* @__PURE__ */
-    return jsxRuntime.jsx(index.CollapsibleBand, {
+    return jsxRuntime.jsx(CollapsibleBand, {
         background: !0,
         onToggle: toggle,
         open: open,
@@ -2707,7 +2279,7 @@ function DocumentBand({group: group, ...wiring}) {
 function UngroupedBand({instances: instances, ...wiring}) {
     const {open: open, toggle: toggle} = useBandOpen(wiring.bands, UNGROUPED_BAND_KEY);
     /* @__PURE__ */
-    return jsxRuntime.jsx(index.CollapsibleBand, {
+    return jsxRuntime.jsx(CollapsibleBand, {
         background: !0,
         onToggle: toggle,
         open: open,
@@ -2739,7 +2311,7 @@ function InstanceBands({instances: instances, ...wiring}) {
 function InstanceBand({bands: bands, instance: instance, onOpenInstance: onOpenInstance, onOpenTask: onOpenTask, showTerminalActions: showTerminalActions}) {
     const {open: open, toggle: toggle} = useBandOpen(bands, instance.instanceId), {resolvePathFromState: resolvePathFromState} = router.useRouter();
     /* @__PURE__ */
-    return jsxRuntime.jsx(index.CollapsibleBand, {
+    return jsxRuntime.jsx(CollapsibleBand, {
         onToggle: toggle,
         open: open,
         title: instance.title,
@@ -2776,7 +2348,7 @@ function InstanceBand({bands: bands, instance: instance, onOpenInstance: onOpenI
                     }) ]
                 })
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(index.TrailingHairline, {}) ]
+            /* @__PURE__ */ jsxRuntime.jsx(TrailingHairline, {}) ]
         }),
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             paddingLeft: 5,
@@ -2812,7 +2384,7 @@ function TaskActivityRow({row: row, onOpen: onOpen, showTerminalActions: showTer
             stale: render.stale,
             children: /* @__PURE__ */ jsxRuntime.jsx(index.ActivityRow, {
                 assignState: render.assignState,
-                assigneeIds: render.assigneeIds,
+                assignees: render.assignees,
                 dateState: render.dateState,
                 dueDates: render.dueDates,
                 face: render.face,
@@ -3066,7 +2638,7 @@ function useOrphanedWorkflows(groups) {
     }), [ groups, contentResource, missing ]);
 }
 
-function TasksTab({filterSlot: filterSlot, instances: instances, loading: loading, identity: identity, onOpenInstance: onOpenInstance, onOpenTask: onOpenTask, tab: tab, truncated: truncated, unreadable: unreadable}) {
+function TasksTab({error: error, filterSlot: filterSlot, instances: instances, loading: loading, identity: identity, onOpenInstance: onOpenInstance, onOpenTask: onOpenTask, tab: tab, truncated: truncated, unreadable: unreadable}) {
     const mineOnly = tab === "for-me", {binding: binding} = index.useWorkflowContext(), bands = useBandOpenState({
         segment: TASK_BAND_SEGMENTS[tab],
         scope: binding.engineResource.id
@@ -3084,6 +2656,10 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
         }), cut = mineOnly ? onlyMyTasks(filtered) : filtered;
         return orderGroupsByPreviewTitle(cut, titles.titles);
     }, [ listed, filters, mineOnly, titles ]);
+    if (error !== void 0) /* @__PURE__ */ return jsxRuntime.jsx(index.NoteBanner, {
+        label: INSTANCES_READ_FAILED,
+        tone: "critical"
+    });
     if (loading || !revealed) /* @__PURE__ */
     return jsxRuntime.jsx(TabStatusRow, {
         children: /* @__PURE__ */ jsxRuntime.jsx(index.LoadingRow, {
@@ -3123,7 +2699,7 @@ function TasksTab({filterSlot: filterSlot, instances: instances, loading: loadin
             }), 
             /* @__PURE__ */ jsxRuntime.jsx(OrphanedWorkflowsNote, {
                 orphans: orphans
-            }), body, truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
+            }), mineOnly && hasRoleMatchedTasks(visible) ? /* @__PURE__ */ jsxRuntime.jsx(index.RoleAssignedNotice, {}) : null, body, truncated ? /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
                 text: `Tasks from the latest ${INSTANCE_CAP} workflows — older ones aren’t listed.`
             }) : null ]
         }) ]
@@ -3501,6 +3077,16 @@ function useBoardInstances(definitionName) {
     return useCappedInstances(filter);
 }
 
+function activeCountFace(args) {
+    return args.error !== void 0 || args.loading ? {
+        count: void 0,
+        note: void 0
+    } : {
+        count: args.count,
+        note: args.truncated ? INSTANCE_CAP_COUNT_NOTE : void 0
+    };
+}
+
 function DefinitionPanel({definition: definition}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Box, {
@@ -3563,6 +3149,23 @@ function SetupIssues({bindings: bindings}) {
     });
 }
 
+function ActiveCount({face: face}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Stack, {
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: face.count === void 0,
+            size: 1,
+            children: face.count ?? "—"
+        }), face.note === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: face.note
+        }) ]
+    });
+}
+
 function DefinitionFacts({definition: definition}) {
     const {mappingIssues: mappingIssues, mappings: mappings} = index.useWorkflowContext(), schema = sanity.useSchema(), instances = useToolInstances(), snapshotWidth = index.useContainerToken(2), [row] = definitionCatalog({
         definitions: [ definition ],
@@ -3580,6 +3183,12 @@ function DefinitionFacts({definition: definition}) {
             children: /* @__PURE__ */ jsxRuntime.jsx(SetupIssues, {
                 bindings: row.brokenBindings
             })
+        }), instances.error === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            flex: "none",
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
+                label: INSTANCES_READ_FAILED,
+                tone: "critical"
+            })
         }), 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             flex: "none",
@@ -3598,21 +3207,13 @@ function DefinitionFacts({definition: definition}) {
                 }), 
                 /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
                     label: "Active instances",
-                    children: instances.loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                        muted: !0,
-                        size: 1,
-                        children: "—"
-                    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                        gap: 2,
-                        children: [ 
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                            size: 1,
-                            children: row?.activeCount ?? 0
-                        }), instances.truncated ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-                            muted: !0,
-                            size: 1,
-                            children: INSTANCE_CAP_COUNT_NOTE
-                        }) : null ]
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ActiveCount, {
+                        face: activeCountFace({
+                            count: row?.activeCount ?? 0,
+                            error: instances.error,
+                            loading: instances.loading,
+                            truncated: instances.truncated
+                        })
                     })
                 }), 
                 /* @__PURE__ */ jsxRuntime.jsx(index.MetaRow, {
@@ -4149,11 +3750,11 @@ function usePageSelection(page) {
 }
 
 function WorkflowPage({onOpenWorkflow: onOpenWorkflow, onSelectPage: onSelectPage, page: page, workflowName: workflowName}) {
-    const {definitions: definitions, error: error} = useDeployedDefinitions(), selection = resolveWorkflowSelection({
+    const {definitions: definitions, error: catalogError} = useDeployedDefinitions(), selection = resolveWorkflowSelection({
         definitions: definitions,
         routeName: workflowName
     }), selected = resolvedDefinition(selection), view = workflowPageView({
-        error: error,
+        error: catalogError,
         page: page,
         selection: selection
     }), instances = useBoardInstances(view.streamName), {board: board, ready: ready, titles: titles} = useBoard({
@@ -4165,9 +3766,9 @@ function WorkflowPage({onOpenWorkflow: onOpenWorkflow, onSelectPage: onSelectPag
     })), revealed = useRevealGate({
         loading: instances.loading,
         ready: ready
-    }), waiting = index.useDelayedFlag(selection.kind === "loading" && error === void 0, WAIT_CUE_DELAY_MS);
+    }), waiting = index.useDelayedFlag(selection.kind === "loading" && catalogError === void 0, WAIT_CUE_DELAY_MS);
     if (selection.kind === "loading") /* @__PURE__ */ return jsxRuntime.jsx(UnresolvedPage, {
-        error: error,
+        error: catalogError,
         waiting: waiting
     });
     const wiring = {
@@ -4226,7 +3827,8 @@ function WorkflowPage({onOpenWorkflow: onOpenWorkflow, onSelectPage: onSelectPag
                 /* @__PURE__ */ jsxRuntime.jsx(PageBody, {
                     board: board,
                     catalogEmpty: (definitions ?? []).length === 0,
-                    error: error,
+                    catalogError: catalogError,
+                    instancesError: instances.error,
                     loading: !revealed,
                     page: page,
                     selection: selection,
@@ -4264,8 +3866,8 @@ function UnresolvedPage({error: error, waiting: waiting}) {
         overflow: "hidden",
         children: error === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(WaitingFace, {
             waiting: waiting
-        }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogErrorFace, {
-            error: error
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ReadErrorFace, {
+            text: CATALOG_READ_FAILED
         })
     });
 }
@@ -4281,18 +3883,24 @@ function WaitingFace({waiting: waiting}) {
     });
 }
 
-function CatalogErrorFace({error: error}) {
+const BANNER_LANE_INSET = 2;
+
+function ReadErrorFace({text: text}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(StatusBox, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(MutedNote, {
-            text: catalogReadError(error)
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            paddingTop: BANNER_LANE_INSET,
+            children: /* @__PURE__ */ jsxRuntime.jsx(index.NoteBanner, {
+                label: text,
+                tone: "critical"
+            })
         })
     });
 }
 
-function PageBody({board: board, catalogEmpty: catalogEmpty, error: error, loading: loading, page: page, selection: selection, wiring: wiring}) {
-    if (error !== void 0) /* @__PURE__ */ return jsxRuntime.jsx(CatalogErrorFace, {
-        error: error
+function PageBody({board: board, catalogEmpty: catalogEmpty, catalogError: catalogError, instancesError: instancesError, loading: loading, page: page, selection: selection, wiring: wiring}) {
+    if (catalogError !== void 0) /* @__PURE__ */ return jsxRuntime.jsx(ReadErrorFace, {
+        text: CATALOG_READ_FAILED
     });
     if (selection.kind === "unknown") {
         const face = unknownWorkflowFace({
@@ -4310,6 +3918,8 @@ function PageBody({board: board, catalogEmpty: catalogEmpty, error: error, loadi
     }
     return page === "definition" ? /* @__PURE__ */ jsxRuntime.jsx(DefinitionPanel, {
         definition: selection.definition
+    }) : instancesError !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ReadErrorFace, {
+        text: INSTANCES_READ_FAILED
     }) : loading || board === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(StatusBox, {
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             paddingTop: LANE_PADDING,
@@ -4476,6 +4086,7 @@ function HomePanel({filterSlot: filterSlot, identity: identity, instances: insta
     return tab === "overview" ? /* @__PURE__ */ jsxRuntime.jsx(OverviewTab, {
         onOpenWorkflow: onOpenWorkflow
     }) : /* @__PURE__ */ jsxRuntime.jsx(TasksTab, {
+        error: instances.error,
         filterSlot: filterSlot,
         identity: identity,
         instances: [ ...instances.inFlight, ...instances.settled ],