@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/dist/esm/components/flows-actors/graph-viewer.labels.js

@@ -0,0 +1,67 @@
+import { FrontendComponentType, LabelKind, registerComponentLabels } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for this component: keys + params + (where
+// authored) per-key purpose / kind / variable meaning. Statically scanned by
+// the dev companion; NOT imported at runtime, so it never ships in the bundle.
+export const LowLevelAiGraphViewerLabels = [
+    { ref: 'presentationGraph', kind: LabelKind.BUTTON, purpose: 'Toggle that shows a process (a plan, a run, a flow) drawn as a graph of steps and arrows' },
+    { ref: 'presentationList', kind: LabelKind.BUTTON, purpose: 'Toggle that shows the same process as a plain list of its steps, readable without the drawing' },
+    { ref: 'legendTitle', kind: LabelKind.HEADING, purpose: 'Heading of the key explaining what the colours of the steps and the kinds of arrows mean' },
+    {
+        ref: 'awaitingDecision',
+        kind: LabelKind.MESSAGE,
+        purpose: 'Banner above the drawing of a run that is paused until a person answers a question',
+        params: [{ key: 'title', meaning: 'the question the run is waiting on, in the words of whoever asked it' }],
+    },
+    {
+        ref: 'awaitingDecisionSince',
+        kind: LabelKind.MESSAGE,
+        purpose: 'When the question the run waits on was asked, shown after the banner',
+        params: [{ key: 'since', meaning: 'the date and time the question was asked' }],
+    },
+    { ref: 'openDecision', kind: LabelKind.BUTTON, purpose: 'Button that opens the question the run waits on, where a person can answer it' },
+    {
+        ref: 'waitsOn',
+        kind: LabelKind.LABEL,
+        purpose: 'Under a step that cannot start yet: the steps it is still waiting for',
+        params: [{ key: 'steps', meaning: 'the names of the unfinished steps this one depends on, already joined into one phrase in the reader\'s language ("A, B and C")' }],
+    },
+    {
+        ref: 'stepWithStatus',
+        kind: LabelKind.LABEL,
+        purpose: 'What a screen reader announces for one step of the drawing: its name, then where it stands',
+        params: [
+            { key: 'step', meaning: 'the name of the step' },
+            { key: 'status', meaning: 'where the step stands, such as finished or waiting on a person' },
+        ],
+    },
+    {
+        ref: 'roundTitle',
+        kind: LabelKind.HEADING,
+        purpose: 'Title of one round of an automated process, a box holding the steps that ran in that round',
+        params: [{ key: 'round', meaning: 'the round number, starting at 1' }],
+    },
+    { ref: 'noNodes', kind: LabelKind.EMPTY_STATE, purpose: 'Shown instead of the drawing when the process has no steps yet' },
+    { ref: 'edge_depends_on', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow meaning: the step the arrow points to needs this one finished first' },
+    { ref: 'edge_flow', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow meaning: the process goes on from this step to the next' },
+    { ref: 'edge_next_round', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow joining one round of an automated process to the round that followed it' },
+    {
+        ref: 'edge_repeats_input_state',
+        kind: LabelKind.LABEL,
+        purpose: 'Key entry and arrow label: this round started from exactly the same situation as an earlier one, so the process is going round in circles',
+    },
+    { ref: 'edge_produces', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow from an automated step to a document it writes' },
+    { ref: 'edge_reads', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow from a document to an automated step that reads it' },
+    {
+        ref: 'edge_gates',
+        kind: LabelKind.LABEL,
+        purpose: 'Key entry for a dashed arrow from a document to an automated step that cannot run until that document is ready',
+    },
+    {
+        ref: 'edge_conditions',
+        kind: LabelKind.LABEL,
+        purpose: 'Key entry for a dashed arrow from a document to an automated step: what the document decides changes which other documents the step waits for',
+    },
+    { ref: 'edge_admits', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow from a larger automated step to a smaller step it runs as one of its parts' },
+];
+registerComponentLabels(FrontendComponentType.LOW_LEVEL_AI_GRAPH_VIEWER, LowLevelAiGraphViewerLabels);
+//# sourceMappingURL=graph-viewer.labels.js.map

package/dist/esm/components/flows-actors/graph-viewer.labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-viewer.labels.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/graph-viewer.labels.ts"],"names":[],"mappings":"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","sourcesContent":["import { FrontendComponentType, LabelKind, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const LowLevelAiGraphViewerLabels: LabellingUnitaryDef[] = [\n  { ref: 'presentationGraph', kind: LabelKind.BUTTON, purpose: 'Toggle that shows a process (a plan, a run, a flow) drawn as a graph of steps and arrows' },\n  { ref: 'presentationList', kind: LabelKind.BUTTON, purpose: 'Toggle that shows the same process as a plain list of its steps, readable without the drawing' },\n  { ref: 'legendTitle', kind: LabelKind.HEADING, purpose: 'Heading of the key explaining what the colours of the steps and the kinds of arrows mean' },\n  {\n    ref: 'awaitingDecision',\n    kind: LabelKind.MESSAGE,\n    purpose: 'Banner above the drawing of a run that is paused until a person answers a question',\n    params: [{ key: 'title', meaning: 'the question the run is waiting on, in the words of whoever asked it' }],\n  },\n  {\n    ref: 'awaitingDecisionSince',\n    kind: LabelKind.MESSAGE,\n    purpose: 'When the question the run waits on was asked, shown after the banner',\n    params: [{ key: 'since', meaning: 'the date and time the question was asked' }],\n  },\n  { ref: 'openDecision', kind: LabelKind.BUTTON, purpose: 'Button that opens the question the run waits on, where a person can answer it' },\n  {\n    ref: 'waitsOn',\n    kind: LabelKind.LABEL,\n    purpose: 'Under a step that cannot start yet: the steps it is still waiting for',\n    params: [{ key: 'steps', meaning: 'the names of the unfinished steps this one depends on, already joined into one phrase in the reader\\'s language (\"A, B and C\")' }],\n  },\n  {\n    ref: 'stepWithStatus',\n    kind: LabelKind.LABEL,\n    purpose: 'What a screen reader announces for one step of the drawing: its name, then where it stands',\n    params: [\n      { key: 'step', meaning: 'the name of the step' },\n      { key: 'status', meaning: 'where the step stands, such as finished or waiting on a person' },\n    ],\n  },\n  {\n    ref: 'roundTitle',\n    kind: LabelKind.HEADING,\n    purpose: 'Title of one round of an automated process, a box holding the steps that ran in that round',\n    params: [{ key: 'round', meaning: 'the round number, starting at 1' }],\n  },\n  { ref: 'noNodes', kind: LabelKind.EMPTY_STATE, purpose: 'Shown instead of the drawing when the process has no steps yet' },\n  { ref: 'edge_depends_on', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow meaning: the step the arrow points to needs this one finished first' },\n  { ref: 'edge_flow', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow meaning: the process goes on from this step to the next' },\n  { ref: 'edge_next_round', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow joining one round of an automated process to the round that followed it' },\n  {\n    ref: 'edge_repeats_input_state',\n    kind: LabelKind.LABEL,\n    purpose: 'Key entry and arrow label: this round started from exactly the same situation as an earlier one, so the process is going round in circles',\n  },\n  { ref: 'edge_produces', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow from an automated step to a document it writes' },\n  { ref: 'edge_reads', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow from a document to an automated step that reads it' },\n  {\n    ref: 'edge_gates',\n    kind: LabelKind.LABEL,\n    purpose: 'Key entry for a dashed arrow from a document to an automated step that cannot run until that document is ready',\n  },\n  {\n    ref: 'edge_conditions',\n    kind: LabelKind.LABEL,\n    purpose: 'Key entry for a dashed arrow from a document to an automated step: what the document decides changes which other documents the step waits for',\n  },\n  { ref: 'edge_admits', kind: LabelKind.LABEL, purpose: 'Key entry for an arrow from a larger automated step to a smaller step it runs as one of its parts' },\n];\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_AI_GRAPH_VIEWER, LowLevelAiGraphViewerLabels);\n"]}

package/dist/esm/components/flows-actors/graph-viewer.models.d.ts

@@ -0,0 +1,16 @@
+import type { GraphViewEdgeKind } from '../../core/flows-actors/graph-view.model';
+/**
+ * The parts of `AI_GraphViewer`'s contract a host names without loading the graph library: this module imports nothing
+ * from `@xyflow/react`, so the package root can export it, while the viewer itself stays behind the flows-actors graph
+ * door (`flows-actors-graph.lazy.tsx`).
+ */
+/** How a process is shown: drawn, or as a list of its steps. */
+export declare enum GraphViewerPresentation {
+    /** The drawing: steps placed in ranks, joined by arrows. */
+    GRAPH = "graph",
+    /** Every step in the graph's order, a group's steps nested under it: the process read without the drawing. */
+    LIST = "list"
+}
+/** The label key of an edge kind's words: one per `GraphViewEdgeKind` member. */
+export declare function graphViewerEdgeLabelKey(kind: GraphViewEdgeKind): string;
+//# sourceMappingURL=graph-viewer.models.d.ts.map

package/dist/esm/components/flows-actors/graph-viewer.models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-viewer.models.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/graph-viewer.models.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAEhG;;;;GAIG;AAEH,gEAAgE;AAChE,oBAAY,uBAAuB;IACjC,4DAA4D;IAC5D,KAAK,UAAU;IACf,8GAA8G;IAC9G,IAAI,SAAS;CACd;AAED,iFAAiF;AACjF,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,CAEvE"}

package/dist/esm/components/flows-actors/graph-viewer.models.js

@@ -0,0 +1,18 @@
+/**
+ * The parts of `AI_GraphViewer`'s contract a host names without loading the graph library: this module imports nothing
+ * from `@xyflow/react`, so the package root can export it, while the viewer itself stays behind the flows-actors graph
+ * door (`flows-actors-graph.lazy.tsx`).
+ */
+/** How a process is shown: drawn, or as a list of its steps. */
+export var GraphViewerPresentation;
+(function (GraphViewerPresentation) {
+    /** The drawing: steps placed in ranks, joined by arrows. */
+    GraphViewerPresentation["GRAPH"] = "graph";
+    /** Every step in the graph's order, a group's steps nested under it: the process read without the drawing. */
+    GraphViewerPresentation["LIST"] = "list";
+})(GraphViewerPresentation || (GraphViewerPresentation = {}));
+/** The label key of an edge kind's words: one per `GraphViewEdgeKind` member. */
+export function graphViewerEdgeLabelKey(kind) {
+    return `edge_${kind}`;
+}
+//# sourceMappingURL=graph-viewer.models.js.map

package/dist/esm/components/flows-actors/graph-viewer.models.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-viewer.models.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/graph-viewer.models.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,gEAAgE;AAChE,MAAM,CAAN,IAAY,uBAKX;AALD,WAAY,uBAAuB;IACjC,4DAA4D;IAC5D,0CAAe,CAAA;IACf,8GAA8G;IAC9G,wCAAa,CAAA;AACf,CAAC,EALW,uBAAuB,KAAvB,uBAAuB,QAKlC;AAED,iFAAiF;AACjF,MAAM,UAAU,uBAAuB,CAAC,IAAuB;IAC7D,OAAO,QAAQ,IAAI,EAAE,CAAC;AACxB,CAAC","sourcesContent":["import type { GraphViewEdgeKind } from '~wildo-frontend-lib/core/flows-actors/graph-view.model';\n\n/**\n * The parts of `AI_GraphViewer`'s contract a host names without loading the graph library: this module imports nothing\n * from `@xyflow/react`, so the package root can export it, while the viewer itself stays behind the flows-actors graph\n * door (`flows-actors-graph.lazy.tsx`).\n */\n\n/** How a process is shown: drawn, or as a list of its steps. */\nexport enum GraphViewerPresentation {\n  /** The drawing: steps placed in ranks, joined by arrows. */\n  GRAPH = 'graph',\n  /** Every step in the graph's order, a group's steps nested under it: the process read without the drawing. */\n  LIST = 'list',\n}\n\n/** The label key of an edge kind's words: one per `GraphViewEdgeKind` member. */\nexport function graphViewerEdgeLabelKey(kind: GraphViewEdgeKind): string {\n  return `edge_${kind}`;\n}\n"]}

package/dist/esm/components/flows-actors/human-decision-form.d.ts

@@ -0,0 +1,57 @@
+/**
+ * A question to a person, asked through the automated form (#2720).
+ *
+ * A decision's request says what is asked (`fields`: the question, why it is asked, a CHOICE's options) and may carry a
+ * form saying how (`form`: each answer's type, its edit control, the headings). This renders it the way every other
+ * form in an application renders: `compileHumanInputForm` builds the decorated schema and its layout, the layout becomes
+ * an edit template from the same skeleton a resource's `*.ui-behavior.tsx` uses (`<FormLayout>`, `<Section>`,
+ * `<FormField>`), and `AutomatedForm` draws it. A request without a form is asked through its default form — a text
+ * box, its options, a yes or no — so every decision surface renders through here.
+ *
+ * ## The words are the asker's
+ *
+ * The question, its reason and the headings are CONTENT written by whoever asked, so they reach the form as literal
+ * labels, never as keys; a CHOICE's options are both its values and its words. The one vocabulary the framework owns
+ * here, a CONFIRM's yes and no, comes from the host's own labels (`confirmWords`).
+ *
+ * ## No submit
+ *
+ * A decision is answered by its OPTIONS, which the host draws beside the form, and only some of them carry values. So
+ * the form offers no submit of its own. The host asks it for the answer when an option that proceeds with values is
+ * chosen (`HumanDecisionFormHandle.readValues`), and it reports whether the answer is complete, so that option can wait
+ * until it is (`onCompleteChange`).
+ */
+import React from 'react';
+import { type CompiledHumanInputForm, type HumanDecision_AnswerValue, type HumanDecision_ConfirmAnswer, type HumanDecision_Field, type HumanInputForm } from '@wildo-ai/saas-models';
+import type { AutomatedFormLabels } from '@wildo-ai/presets-components-models';
+/** One answered field, as an answer carries it: the request field's ref and its value's JSON. */
+export interface HumanDecisionFormValue {
+    readonly ref: string;
+    readonly value: HumanDecision_AnswerValue;
+}
+/** What a host asks of the form when an option that proceeds with values is chosen. */
+export interface HumanDecisionFormHandle {
+    /**
+     * Validate every field and return the answer, one value per field in the request's order, each as its JSON. `null`
+     * when a field is not answered or is answered wrongly; the form then shows where.
+     */
+    readValues(): Promise<readonly HumanDecisionFormValue[] | null>;
+}
+export interface HumanDecisionFormProps {
+    /** The request's questions, in its order. */
+    fields: readonly HumanDecision_Field[];
+    /** How they are asked. Absent: the default form. */
+    form?: HumanInputForm;
+    /** The words for a yes and a no, from the host's labels. */
+    confirmWords: Readonly<Record<HumanDecision_ConfirmAnswer, string>>;
+    disabled?: boolean;
+    /** Handed the form's handle once it can answer. */
+    onReady?: (handle: HumanDecisionFormHandle) => void;
+    /** Whether every field holds a value the form accepts, each time that changes. */
+    onCompleteChange?: (complete: boolean) => void;
+    className?: string;
+}
+/** The literal words a compiled form is drawn with: the asker's, and the host's yes and no. */
+export declare function humanDecisionFormLabels(compiled: CompiledHumanInputForm, confirmWords: Readonly<Record<HumanDecision_ConfirmAnswer, string>>): AutomatedFormLabels;
+export declare function HumanDecisionForm({ fields, form, confirmWords, disabled, onReady, onCompleteChange, className }: HumanDecisionFormProps): React.JSX.Element;
+//# sourceMappingURL=human-decision-form.d.ts.map

package/dist/esm/components/flows-actors/human-decision-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"human-decision-form.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/human-decision-form.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAA6B,MAAM,qCAAqC,CAAC;AAO1G,iGAAiG;AACjG,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,yBAAyB,CAAC;CAC3C;AAED,uFAAuF;AACvF,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,UAAU,IAAI,OAAO,CAAC,SAAS,sBAAsB,EAAE,GAAG,IAAI,CAAC,CAAC;CACjE;AAED,MAAM,WAAW,sBAAsB;IACrC,6CAA6C;IAC7C,MAAM,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACvC,oDAAoD;IACpD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,4DAA4D;IAC5D,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACpD,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+FAA+F;AAC/F,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,sBAAsB,EAChC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC,GAClE,mBAAmB,CAmBrB;AA4ED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8B3J"}

package/dist/esm/components/flows-actors/human-decision-form.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A question to a person, asked through the automated form (#2720).
+ *
+ * A decision's request says what is asked (`fields`: the question, why it is asked, a CHOICE's options) and may carry a
+ * form saying how (`form`: each answer's type, its edit control, the headings). This renders it the way every other
+ * form in an application renders: `compileHumanInputForm` builds the decorated schema and its layout, the layout becomes
+ * an edit template from the same skeleton a resource's `*.ui-behavior.tsx` uses (`<FormLayout>`, `<Section>`,
+ * `<FormField>`), and `AutomatedForm` draws it. A request without a form is asked through its default form — a text
+ * box, its options, a yes or no — so every decision surface renders through here.
+ *
+ * ## The words are the asker's
+ *
+ * The question, its reason and the headings are CONTENT written by whoever asked, so they reach the form as literal
+ * labels, never as keys; a CHOICE's options are both its values and its words. The one vocabulary the framework owns
+ * here, a CONFIRM's yes and no, comes from the host's own labels (`confirmWords`).
+ *
+ * ## No submit
+ *
+ * A decision is answered by its OPTIONS, which the host draws beside the form, and only some of them carry values. So
+ * the form offers no submit of its own. The host asks it for the answer when an option that proceeds with values is
+ * chosen (`HumanDecisionFormHandle.readValues`), and it reports whether the answer is complete, so that option can wait
+ * until it is (`onCompleteChange`).
+ */
+import React from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { HumanInputForm_LayoutKind, compileHumanInputForm, humanDecisionWireValue, HumanDecision_FieldKind, } from '@wildo-ai/saas-models';
+import { SectionMode } from '@wildo-ai/zod-decorators';
+import { AutomatedForm } from '../../components/form/automated/AutomatedForm.js';
+import { FormField } from '../../components/form/automated/FormField.js';
+import { FormLayout } from '../../components/resources/skeleton/FormLayout.js';
+import { Section } from '../../components/resources/skeleton/Section.js';
+/** The literal words a compiled form is drawn with: the asker's, and the host's yes and no. */
+export function humanDecisionFormLabels(compiled, confirmWords) {
+    const fieldWords = {};
+    const descriptions = {};
+    const enums = {};
+    for (const field of compiled.fields) {
+        fieldWords[field.key] = field.request.question;
+        if (field.request.why)
+            descriptions[field.key] = field.request.why;
+        if (field.request.kind === HumanDecision_FieldKind.CHOICE) {
+            enums[field.key] = Object.fromEntries((field.request.options ?? []).map((option) => [option, option]));
+        }
+        else if (field.request.kind === HumanDecision_FieldKind.CONFIRM) {
+            enums[field.key] = { ...confirmWords };
+        }
+    }
+    const groups = compiled.layout.kind === HumanInputForm_LayoutKind.SECTIONS
+        ? compiled.layout.sections
+        : compiled.layout.kind === HumanInputForm_LayoutKind.WIZARD ? compiled.layout.steps : [];
+    const sections = {};
+    for (const group of groups)
+        sections[group.name] = { title: group.title, ...(group.description ? { description: group.description } : {}) };
+    return { fields: fieldWords, descriptions, enums, sections };
+}
+const HumanDecisionFormTemplateContext = React.createContext(null);
+/**
+ * Reports whether the answer is complete, from inside the form. A component rather than an effect in the host, because
+ * only a descendant of the form can watch its values.
+ */
+function CompletionReporter() {
+    const context = React.useContext(HumanDecisionFormTemplateContext);
+    const { control } = useFormContext();
+    const values = useWatch({ control });
+    const complete = React.useMemo(() => context?.compiled.schema.safeParse(values).success ?? false, [context?.compiled, values]);
+    React.useEffect(() => { context?.onCompleteChangeRef.current?.(complete); }, [complete, context]);
+    return null;
+}
+/**
+ * The edit template the compiled layout is drawn as, from the ui-behavior skeleton. A WIZARD is drawn as STEPPER
+ * sections, not a `<WizardLayout>`: the decision's options sit outside the form and may be chosen on any step, so every
+ * step must stay mounted (a stepper keeps hidden panels mounted, and an answer read on step one still validates step
+ * three, revealing it when it holds the first error).
+ *
+ * One module-level component, never one built per render: a host refreshes its decisions with fresh objects (an inbox
+ * refetches after every act), and a template whose identity changed would remount the form's body, losing the focus
+ * and the caret of the person typing and sending a wizard back to its first step (#2720 review M2).
+ */
+function HumanDecisionFormTemplate() {
+    const context = React.useContext(HumanDecisionFormTemplateContext);
+    if (!context)
+        return null;
+    const { layout, fields } = context.compiled;
+    if (layout.kind === HumanInputForm_LayoutKind.FLAT) {
+        return (_jsxs(FormLayout, { autoInjectSubmitButton: false, children: [fields.map((field) => _jsx(FormField, { name: field.key }, field.key)), _jsx(CompletionReporter, {})] }));
+    }
+    const appearance = layout.kind === HumanInputForm_LayoutKind.SECTIONS ? layout.appearance : SectionMode.STEPPER;
+    const groups = layout.kind === HumanInputForm_LayoutKind.SECTIONS ? layout.sections : layout.steps;
+    return (_jsxs(FormLayout, { autoInjectSubmitButton: false, children: [groups.map((group) => (_jsx(Section, { name: group.name, appearance: appearance, children: group.keys.map((key) => _jsx(FormField, { name: key }, key)) }, group.name))), _jsx(CompletionReporter, {})] }));
+}
+/** Never called: the form has no submit, and Enter in a field must not answer the decision. */
+const NO_SUBMIT = () => undefined;
+/**
+ * A value that keeps its identity while its CONTENT is unchanged. A host hands the same question again as a fresh object
+ * on every refresh, and the compiled form, the labels and the template must not be rebuilt for it.
+ */
+function useContentStable(value) {
+    const key = JSON.stringify(value);
+    // Keyed on the content on purpose: the identity is what changes from one refresh to the next.
+    return React.useMemo(() => value, [key]);
+}
+export function HumanDecisionForm({ fields, form, confirmWords, disabled, onReady, onCompleteChange, className }) {
+    const stableFields = useContentStable(fields);
+    const stableForm = useContentStable(form);
+    const stableConfirmWords = useContentStable(confirmWords);
+    const compiled = React.useMemo(() => compileHumanInputForm({ fields: [...stableFields], form: stableForm }), [stableFields, stableForm]);
+    const labels = React.useMemo(() => humanDecisionFormLabels(compiled, stableConfirmWords), [compiled, stableConfirmWords]);
+    const onCompleteChangeRef = React.useRef(onCompleteChange);
+    React.useLayoutEffect(() => { onCompleteChangeRef.current = onCompleteChange; }, [onCompleteChange]);
+    const templateContext = React.useMemo(() => ({ compiled, onCompleteChangeRef }), [compiled]);
+    const handleFormReady = React.useCallback((methods) => {
+        onReady?.({
+            async readValues() {
+                if (!(await methods.trigger()))
+                    return null;
+                // The OUTPUT of the compiled schema (trimmed text, a calendar day as the date picker holds it), then its JSON.
+                const parsed = compiled.schema.safeParse(methods.getValues());
+                if (!parsed.success)
+                    return null;
+                const output = parsed.data;
+                return compiled.fields.map((field) => ({ ref: field.request.ref, value: humanDecisionWireValue(output[field.key]) }));
+            },
+        });
+    }, [compiled, onReady]);
+    return (_jsx("div", { className: className, "data-human-decision-form": "", children: _jsx(HumanDecisionFormTemplateContext.Provider, { value: templateContext, children: _jsx(AutomatedForm, { schema: compiled.schema, onSubmit: NO_SUBMIT, labels: labels, disabled: disabled, layoutTemplate: HumanDecisionFormTemplate, onFormReady: handleFormReady }) }) }));
+}
+//# sourceMappingURL=human-decision-form.js.map

package/dist/esm/components/flows-actors/human-decision-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"human-decision-form.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/human-decision-form.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * A question to a person, asked through the automated form (#2720).\n *\n * A decision's request says what is asked (`fields`: the question, why it is asked, a CHOICE's options) and may carry a\n * form saying how (`form`: each answer's type, its edit control, the headings). This renders it the way every other\n * form in an application renders: `compileHumanInputForm` builds the decorated schema and its layout, the layout becomes\n * an edit template from the same skeleton a resource's `*.ui-behavior.tsx` uses (`<FormLayout>`, `<Section>`,\n * `<FormField>`), and `AutomatedForm` draws it. A request without a form is asked through its default form — a text\n * box, its options, a yes or no — so every decision surface renders through here.\n *\n * ## The words are the asker's\n *\n * The question, its reason and the headings are CONTENT written by whoever asked, so they reach the form as literal\n * labels, never as keys; a CHOICE's options are both its values and its words. The one vocabulary the framework owns\n * here, a CONFIRM's yes and no, comes from the host's own labels (`confirmWords`).\n *\n * ## No submit\n *\n * A decision is answered by its OPTIONS, which the host draws beside the form, and only some of them carry values. So\n * the form offers no submit of its own. The host asks it for the answer when an option that proceeds with values is\n * chosen (`HumanDecisionFormHandle.readValues`), and it reports whether the answer is complete, so that option can wait\n * until it is (`onCompleteChange`).\n */\nimport React from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport {\n  HumanInputForm_LayoutKind,\n  compileHumanInputForm,\n  humanDecisionWireValue,\n  HumanDecision_FieldKind,\n  type CompiledHumanInputForm,\n  type HumanDecision_AnswerValue,\n  type HumanDecision_ConfirmAnswer,\n  type HumanDecision_Field,\n  type HumanInputForm,\n} from '@wildo-ai/saas-models';\nimport { SectionMode } from '@wildo-ai/zod-decorators';\nimport type { AutomatedFormLabels, DisplayOrFormSectionLabel } from '@wildo-ai/presets-components-models';\nimport { AutomatedForm } from '~wildo-frontend-lib/components/form/automated/AutomatedForm';\nimport { FormField } from '~wildo-frontend-lib/components/form/automated/FormField';\nimport { FormLayout } from '~wildo-frontend-lib/components/resources/skeleton/FormLayout';\nimport { Section } from '~wildo-frontend-lib/components/resources/skeleton/Section';\nimport type { FormMethods } from '~wildo-frontend-lib/components/form/Form';\n\n/** One answered field, as an answer carries it: the request field's ref and its value's JSON. */\nexport interface HumanDecisionFormValue {\n  readonly ref: string;\n  readonly value: HumanDecision_AnswerValue;\n}\n\n/** What a host asks of the form when an option that proceeds with values is chosen. */\nexport interface HumanDecisionFormHandle {\n  /**\n   * Validate every field and return the answer, one value per field in the request's order, each as its JSON. `null`\n   * when a field is not answered or is answered wrongly; the form then shows where.\n   */\n  readValues(): Promise<readonly HumanDecisionFormValue[] | null>;\n}\n\nexport interface HumanDecisionFormProps {\n  /** The request's questions, in its order. */\n  fields: readonly HumanDecision_Field[];\n  /** How they are asked. Absent: the default form. */\n  form?: HumanInputForm;\n  /** The words for a yes and a no, from the host's labels. */\n  confirmWords: Readonly<Record<HumanDecision_ConfirmAnswer, string>>;\n  disabled?: boolean;\n  /** Handed the form's handle once it can answer. */\n  onReady?: (handle: HumanDecisionFormHandle) => void;\n  /** Whether every field holds a value the form accepts, each time that changes. */\n  onCompleteChange?: (complete: boolean) => void;\n  className?: string;\n}\n\n/** The literal words a compiled form is drawn with: the asker's, and the host's yes and no. */\nexport function humanDecisionFormLabels(\n  compiled: CompiledHumanInputForm,\n  confirmWords: Readonly<Record<HumanDecision_ConfirmAnswer, string>>,\n): AutomatedFormLabels {\n  const fieldWords: Record<string, string> = {};\n  const descriptions: Record<string, string> = {};\n  const enums: Record<string, Record<string, string>> = {};\n  for (const field of compiled.fields) {\n    fieldWords[field.key] = field.request.question;\n    if (field.request.why) descriptions[field.key] = field.request.why;\n    if (field.request.kind === HumanDecision_FieldKind.CHOICE) {\n      enums[field.key] = Object.fromEntries((field.request.options ?? []).map((option) => [option, option]));\n    } else if (field.request.kind === HumanDecision_FieldKind.CONFIRM) {\n      enums[field.key] = { ...confirmWords };\n    }\n  }\n  const groups = compiled.layout.kind === HumanInputForm_LayoutKind.SECTIONS\n    ? compiled.layout.sections\n    : compiled.layout.kind === HumanInputForm_LayoutKind.WIZARD ? compiled.layout.steps : [];\n  const sections: Record<string, DisplayOrFormSectionLabel> = {};\n  for (const group of groups) sections[group.name] = { title: group.title, ...(group.description ? { description: group.description } : {}) };\n  return { fields: fieldWords, descriptions, enums, sections };\n}\n\n/**\n * What the template reads: the compiled form, and where to report whether the answer is complete. Through a context\n * rather than a closure, so the template is ONE component for the life of the form (see `HumanDecisionFormTemplate`).\n */\ninterface HumanDecisionFormTemplateContextValue {\n  readonly compiled: CompiledHumanInputForm;\n  /** The host's latest callback, read when completeness changes: a new callback is not a new form. */\n  readonly onCompleteChangeRef: React.RefObject<((complete: boolean) => void) | undefined>;\n}\n\nconst HumanDecisionFormTemplateContext = React.createContext<HumanDecisionFormTemplateContextValue | null>(null);\n\n/**\n * Reports whether the answer is complete, from inside the form. A component rather than an effect in the host, because\n * only a descendant of the form can watch its values.\n */\nfunction CompletionReporter(): null {\n  const context = React.useContext(HumanDecisionFormTemplateContext);\n  const { control } = useFormContext();\n  const values = useWatch({ control });\n  const complete = React.useMemo(() => context?.compiled.schema.safeParse(values).success ?? false, [context?.compiled, values]);\n  React.useEffect(() => { context?.onCompleteChangeRef.current?.(complete); }, [complete, context]);\n  return null;\n}\n\n/**\n * The edit template the compiled layout is drawn as, from the ui-behavior skeleton. A WIZARD is drawn as STEPPER\n * sections, not a `<WizardLayout>`: the decision's options sit outside the form and may be chosen on any step, so every\n * step must stay mounted (a stepper keeps hidden panels mounted, and an answer read on step one still validates step\n * three, revealing it when it holds the first error).\n *\n * One module-level component, never one built per render: a host refreshes its decisions with fresh objects (an inbox\n * refetches after every act), and a template whose identity changed would remount the form's body, losing the focus\n * and the caret of the person typing and sending a wizard back to its first step (#2720 review M2).\n */\nfunction HumanDecisionFormTemplate(): React.JSX.Element | null {\n  const context = React.useContext(HumanDecisionFormTemplateContext);\n  if (!context) return null;\n  const { layout, fields } = context.compiled;\n  if (layout.kind === HumanInputForm_LayoutKind.FLAT) {\n    return (\n      <FormLayout autoInjectSubmitButton={false}>\n        {fields.map((field) => <FormField key={field.key} name={field.key} />)}\n        <CompletionReporter />\n      </FormLayout>\n    );\n  }\n  const appearance = layout.kind === HumanInputForm_LayoutKind.SECTIONS ? layout.appearance : SectionMode.STEPPER;\n  const groups = layout.kind === HumanInputForm_LayoutKind.SECTIONS ? layout.sections : layout.steps;\n  return (\n    <FormLayout autoInjectSubmitButton={false}>\n      {groups.map((group) => (\n        <Section key={group.name} name={group.name} appearance={appearance}>\n          {group.keys.map((key) => <FormField key={key} name={key} />)}\n        </Section>\n      ))}\n      <CompletionReporter />\n    </FormLayout>\n  );\n}\n\n/** Never called: the form has no submit, and Enter in a field must not answer the decision. */\nconst NO_SUBMIT = (): void => undefined;\n\n/**\n * A value that keeps its identity while its CONTENT is unchanged. A host hands the same question again as a fresh object\n * on every refresh, and the compiled form, the labels and the template must not be rebuilt for it.\n */\nfunction useContentStable<T>(value: T): T {\n  const key = JSON.stringify(value);\n  // Keyed on the content on purpose: the identity is what changes from one refresh to the next.\n  return React.useMemo(() => value, [key]);\n}\n\nexport function HumanDecisionForm({ fields, form, confirmWords, disabled, onReady, onCompleteChange, className }: HumanDecisionFormProps): React.JSX.Element {\n  const stableFields = useContentStable(fields);\n  const stableForm = useContentStable(form);\n  const stableConfirmWords = useContentStable(confirmWords);\n  const compiled = React.useMemo(() => compileHumanInputForm({ fields: [...stableFields], form: stableForm }), [stableFields, stableForm]);\n  const labels = React.useMemo(() => humanDecisionFormLabels(compiled, stableConfirmWords), [compiled, stableConfirmWords]);\n  const onCompleteChangeRef = React.useRef(onCompleteChange);\n  React.useLayoutEffect(() => { onCompleteChangeRef.current = onCompleteChange; }, [onCompleteChange]);\n  const templateContext = React.useMemo(() => ({ compiled, onCompleteChangeRef }), [compiled]);\n\n  const handleFormReady = React.useCallback((methods: FormMethods) => {\n    onReady?.({\n      async readValues() {\n        if (!(await methods.trigger())) return null;\n        // The OUTPUT of the compiled schema (trimmed text, a calendar day as the date picker holds it), then its JSON.\n        const parsed = compiled.schema.safeParse(methods.getValues());\n        if (!parsed.success) return null;\n        const output = parsed.data as Record<string, unknown>;\n        return compiled.fields.map((field) => ({ ref: field.request.ref, value: humanDecisionWireValue(output[field.key]) }));\n      },\n    });\n  }, [compiled, onReady]);\n\n  return (\n    <div className={className} data-human-decision-form=\"\">\n      <HumanDecisionFormTemplateContext.Provider value={templateContext}>\n        <AutomatedForm schema={compiled.schema} onSubmit={NO_SUBMIT} labels={labels} disabled={disabled} layoutTemplate={HumanDecisionFormTemplate} onFormReady={handleFormReady} />\n      </HumanDecisionFormTemplateContext.Provider>\n    </div>\n  );\n}\n"]}

package/dist/esm/components/flows-actors/system-catalog.d.ts

@@ -12,8 +12,13 @@ export type AI_SystemCatalogProps = ComponentProps<"div"> & {
     defaultViewMode?: ViewMode;
     /** Callback when a system card is selected for detail view */
     onSelectSystem?: (systemRef: string) => void;
+    /**
+     * Takes the person to where a system is used (its conversation, its run page). Without it no Launch button is drawn:
+     * the catalog cannot start a system itself (see the file header).
+     */
+    onLaunch?: (systemRef: string) => void;
 };
-export declare const AI_SystemCatalog: ({ className, defaultKindFilter, defaultStatusFilter, defaultViewMode, onSelectSystem, ...props }: AI_SystemCatalogProps) => React.JSX.Element | null;
+export declare const AI_SystemCatalog: ({ className, defaultKindFilter, defaultStatusFilter, defaultViewMode, onSelectSystem, onLaunch, ...props }: AI_SystemCatalogProps) => React.JSX.Element | null;
 export type AI_SystemCardProps = ComponentProps<typeof Card> & {
     system: FlowActorSystem_FrontendInfo;
     onLaunch?: (systemRef: string) => void;

package/dist/esm/components/flows-actors/system-catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"system-catalog.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/system-catalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAmE,MAAM,8CAA8C,CAAC;AAarI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAsB1E,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3C,KAAK,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AACxF,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAkBhC,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1D,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kGAO9B,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA0H9C,CAAC;AAkHF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC7D,MAAM,EAAE,4BAA4B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,2CAK3B,kBAAkB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAuE3C,CAAC;AAMF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D,MAAM,EAAE,4BAA4B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,2CAKlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAsDlD,CAAC;AAMF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,MAAM,EAAE,4BAA4B,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,mDAM7B,oBAAoB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAoJ7C,CAAC;AA2DF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,sBAGhC,uBAAuB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAWhD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,eAAO,MAAM,oBAAoB,GAAI,wBAGlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IASlD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AASF,eAAO,MAAM,iBAAiB,GAAI,uBAG/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAS/C,CAAC"}
+{"version":3,"file":"system-catalog.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/system-catalog.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/flows-actors/system-catalog.js

@@ -14,6 +14,7 @@ import { useI18n } from "../../core/i18n/useI18n.js";
 import { Text } from "../../components/typography/text.js";
 import { TextSize, TextVariant } from "@wildo-ai/presets-components-models";
 import { cn } from "../../core/ui/cn.js";
+import { focusIndicatorClasses, FocusIndicatorShape } from "../../core/ui/themes/focus-indicator.js";
 import { z } from "zod";
 import { useFlowsActors, useFlowsActorsSafe } from "../../core/flows-actors/useFlowsActors.js";
 import { FlowsActorsExecutionStatus } from "../../core/flows-actors/FlowsActorsContext.js";
@@ -26,9 +27,9 @@ function matchesSearch(system, query) {
         (system.category?.toLowerCase().includes(q) ?? false) ||
         (system.tags?.some((t) => t.toLowerCase().includes(q)) ?? false));
 }
-export const AI_SystemCatalog = ({ className, defaultKindFilter = "all", defaultStatusFilter = "all", defaultViewMode = "grid", onSelectSystem, ...props }) => {
+export const AI_SystemCatalog = ({ className, defaultKindFilter = "all", defaultStatusFilter = "all", defaultViewMode = "grid", onSelectSystem, onLaunch, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
-    const { systems, isLoading, error, startExecution, refreshSystems } = useFlowsActors();
+    const { systems, isLoading, error, refreshSystems } = useFlowsActors();
     const [searchQuery, setSearchQuery] = React.useState("");
     const [kindFilter, setKindFilter] = React.useState(defaultKindFilter);
     const [statusFilter, setStatusFilter] = React.useState(defaultStatusFilter);
@@ -53,18 +54,15 @@ export const AI_SystemCatalog = ({ className, defaultKindFilter = "all", default
     const handleBackToCatalog = React.useCallback(() => {
         setSelectedSystemRef(null);
     }, []);
-    const handleLaunch = React.useCallback((systemRef) => {
-        startExecution(systemRef);
-    }, [startExecution]);
     if (selectedSystem) {
-        return (_jsx(AI_SystemDetail, { system: selectedSystem, onBack: handleBackToCatalog, onLaunch: handleLaunch, className: className, ...props }));
+        return (_jsx(AI_SystemDetail, { system: selectedSystem, onBack: handleBackToCatalog, onLaunch: onLaunch, className: className, ...props }));
     }
     if (!isReady)
         return null;
     if (error) {
-        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-card rounded-lg border bg-card p-section text-center", className), ...props, children: [_jsx(Text, { variant: TextVariant.DESTRUCTIVE, children: tComponent(CT, "errorState") }), _jsx(Text, { size: TextSize.XS, variant: TextVariant.MUTED, children: error.message }), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.SECONDARY, size: ButtonSize.SM, onClick: () => void refreshSystems(), children: tComponent(CT, "retry") })] }));
+        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-card rounded-lg border bg-card p-section text-center", className), ...props, children: [_jsx(Text, { variant: TextVariant.DESTRUCTIVE, children: tComponent(CT, "errorState") }), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.SECONDARY, size: ButtonSize.SM, onClick: () => void refreshSystems(), children: tComponent(CT, "retry") })] }));
     }
-    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsx(AI_SystemCatalogToolbar, { searchQuery: searchQuery, onSearchChange: setSearchQuery, kindFilter: kindFilter, onKindFilterChange: setKindFilter, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, viewMode: viewMode, onViewModeChange: setViewMode, systemCount: filteredSystems.length, totalCount: systems.length }), isLoading ? (_jsx(AI_SystemCatalogSkeleton, { viewMode: viewMode })) : filteredSystems.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center gap-element rounded-lg border bg-card p-section text-center", children: _jsx(Text, { variant: TextVariant.MUTED, children: systems.length === 0 ? tComponent(CT, "emptyState") : tComponent(CT, "emptyFilteredState") }) })) : viewMode === "grid" ? (_jsx("div", { className: "grid gap-card sm:grid-cols-2 lg:grid-cols-3", children: filteredSystems.map((sys) => (_jsx(AI_SystemCard, { system: sys, onLaunch: handleLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) })) : (_jsx("div", { className: "flex flex-col gap-element", children: filteredSystems.map((sys) => (_jsx(AI_SystemCardCompact, { system: sys, onLaunch: handleLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) }))] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsx(AI_SystemCatalogToolbar, { searchQuery: searchQuery, onSearchChange: setSearchQuery, kindFilter: kindFilter, onKindFilterChange: setKindFilter, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, viewMode: viewMode, onViewModeChange: setViewMode, systemCount: filteredSystems.length, totalCount: systems.length }), isLoading ? (_jsx(AI_SystemCatalogSkeleton, { viewMode: viewMode })) : filteredSystems.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center gap-element rounded-lg border bg-card p-section text-center", children: _jsx(Text, { variant: TextVariant.MUTED, children: systems.length === 0 ? tComponent(CT, "emptyState") : tComponent(CT, "emptyFilteredState") }) })) : viewMode === "grid" ? (_jsx("div", { className: "grid gap-card sm:grid-cols-2 lg:grid-cols-3", children: filteredSystems.map((sys) => (_jsx(AI_SystemCard, { system: sys, onLaunch: onLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) })) : (_jsx("div", { className: "flex flex-col gap-element", children: filteredSystems.map((sys) => (_jsx(AI_SystemCardCompact, { system: sys, onLaunch: onLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) }))] }));
 };
 const AI_SystemCatalogToolbar = ({ searchQuery, onSearchChange, kindFilter, onKindFilterChange, statusFilter, onStatusFilterChange, viewMode, onViewModeChange, systemCount, totalCount, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
@@ -90,12 +88,13 @@ export const AI_SystemCard = ({ system, onLaunch, className, ...props }) => {
     return (_jsxs(Card, { role: "button", tabIndex: 0, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
-                props.onClick?.(e);
+                // Enter and Space press the card as a click would, through the host's own `onClick`.
+                e.currentTarget.click();
             }
-        }, className: cn("flex cursor-pointer flex-col transition-shadow hover:shadow-[var(--shadow-md)] focus-ring-offset", !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] }), _jsx(CardTitle, { className: "text-sm", children: system.displayName }), _jsx(CardDescription, { className: "line-clamp-2 text-xs", children: system.description })] }), _jsxs(CardContent, { className: "flex flex-col gap-element", children: [_jsx("div", { className: "flex flex-wrap items-center gap-element", children: _jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(CT, `scope_${config.primaryScope}`) }) }), (system.category || (system.tags && system.tags.length > 0)) && (_jsxs("div", { className: "flex flex-wrap gap-element", children: [system.category && (_jsx(Badge, { variant: "outline", className: "text-2xs", children: system.category })), system.tags?.map((tag) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tag }, tag)))] }))] }), _jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: (e) => {
+        }, className: cn("flex cursor-pointer flex-col transition-shadow hover:shadow-[var(--shadow-md)]", focusIndicatorClasses(FocusIndicatorShape.OFFSET), !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] }), _jsx(CardTitle, { className: "text-sm", children: system.displayName }), _jsx(CardDescription, { className: "line-clamp-2 text-xs", children: system.description })] }), _jsxs(CardContent, { className: "flex flex-col gap-element", children: [_jsx("div", { className: "flex flex-wrap items-center gap-element", children: _jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(CT, `scope_${config.primaryScope}`) }) }), (system.category || (system.tags && system.tags.length > 0)) && (_jsxs("div", { className: "flex flex-wrap gap-element", children: [system.category && (_jsx(Badge, { variant: "outline", className: "text-2xs", children: system.category })), system.tags?.map((tag) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tag }, tag)))] }))] }), onLaunch && (_jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: (e) => {
                         e.stopPropagation();
-                        onLaunch?.(system.ref);
-                    }, className: "w-full", children: tComponent(CT, "launch") }) })] }));
+                        onLaunch(system.ref);
+                    }, className: "w-full", children: tComponent(CT, "launch") }) }))] }));
 };
 export const AI_SystemCardCompact = ({ system, onLaunch, className, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
@@ -106,12 +105,13 @@ export const AI_SystemCardCompact = ({ system, onLaunch, className, ...props })
     return (_jsxs("div", { role: "button", tabIndex: 0, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
-                props.onClick?.(e);
+                // Enter and Space press the card as a click would, through the host's own `onClick`.
+                e.currentTarget.click();
             }
-        }, className: cn("flex cursor-pointer items-center gap-card rounded-lg border bg-card p-card-sm transition-shadow hover:shadow-[var(--shadow-md)] focus-ring-offset", !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs("div", { className: "flex flex-1 items-center gap-card overflow-hidden", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: system.displayName }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: system.description })] }), _jsx("div", { className: "hidden shrink-0 items-center gap-element md:flex", children: config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel }) })] }), _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, size: ButtonSize.SM, onClick: (e) => {
+        }, className: cn("flex cursor-pointer items-center gap-card rounded-lg border bg-card p-card-sm transition-shadow hover:shadow-[var(--shadow-md)]", focusIndicatorClasses(FocusIndicatorShape.OFFSET), !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs("div", { className: "flex flex-1 items-center gap-card overflow-hidden", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: system.displayName }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: system.description })] }), _jsx("div", { className: "hidden shrink-0 items-center gap-element md:flex", children: config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel }) })] }), onLaunch && (_jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, size: ButtonSize.SM, onClick: (e) => {
                     e.stopPropagation();
-                    onLaunch?.(system.ref);
-                }, children: tComponent(CT, "launch") })] }));
+                    onLaunch(system.ref);
+                }, children: tComponent(CT, "launch") }))] }));
 };
 export const AI_SystemDetail = ({ system, onBack, onLaunch, className, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
@@ -130,7 +130,7 @@ export const AI_SystemDetail = ({ system, onBack, onLaunch, className, ...props
     }, [flowsActors?.executions, system.ref]);
     if (!isReady)
         return null;
-    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-card", children: [_jsxs("div", { className: "flex flex-col gap-element", children: [onBack && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: onBack, className: "self-start", children: tComponent(CT, "backToCatalog") })), _jsx("h2", { className: "text-lg font-semibold", children: system.displayName }), _jsx(Text, { variant: TextVariant.MUTED, children: system.description }), _jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] })] }), _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: () => onLaunch?.(system.ref), children: tComponent(CT, "launch") })] }), _jsxs(Tabs, { defaultValue: "config", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "config", children: tComponent(CT, "detailConfig") }), system.kind === "flow" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "flowPreview") })), system.kind === "actor" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "actorTeamPreview") })), _jsx(TabsTrigger, { value: "executions", children: tComponent(CT, "executionHistory") })] }), _jsx(TabsContent, { value: "config", children: _jsxs("div", { className: "grid gap-card sm:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailConfig") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "scope"), value: tComponent(CT, `scope_${config.primaryScope}`) }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "riskLevel"), value: _jsx(AI_RiskLevelBadge, { level: config.riskLevel }) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailMetadata") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailRef"), value: system.ref }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailKind"), value: system.kind }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailStatus"), value: system.status }), system.category && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailCategory"), value: system.category })), system.tags && system.tags.length > 0 && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailTags"), value: _jsx("div", { className: "flex flex-wrap gap-element", children: system.tags.map((t) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: t }, t))) }) })), system.metadata && Object.keys(system.metadata).length > 0 && (_jsx(_Fragment, { children: Object.entries(system.metadata).map(([k, v]) => (_jsx(AI_SystemDetailRow, { label: k, value: v }, k))) }))] })] })] }) }), _jsx(TabsContent, { value: "preview", children: _jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: _jsx(Text, { variant: TextVariant.MUTED, children: system.kind === "flow"
+    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-card", children: [_jsxs("div", { className: "flex flex-col gap-element", children: [onBack && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: onBack, className: "self-start", children: tComponent(CT, "backToCatalog") })), _jsx("h2", { className: "text-lg font-semibold", children: system.displayName }), _jsx(Text, { variant: TextVariant.MUTED, children: system.description }), _jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] })] }), onLaunch && (_jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: () => onLaunch(system.ref), children: tComponent(CT, "launch") }))] }), _jsxs(Tabs, { defaultValue: "config", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "config", children: tComponent(CT, "detailConfig") }), system.kind === "flow" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "flowPreview") })), system.kind === "actor" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "actorTeamPreview") })), _jsx(TabsTrigger, { value: "executions", children: tComponent(CT, "executionHistory") })] }), _jsx(TabsContent, { value: "config", children: _jsxs("div", { className: "grid gap-card sm:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailConfig") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "scope"), value: tComponent(CT, `scope_${config.primaryScope}`) }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "riskLevel"), value: _jsx(AI_RiskLevelBadge, { level: config.riskLevel }) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailMetadata") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailRef"), value: system.ref }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailKind"), value: system.kind }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailStatus"), value: system.status }), system.category && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailCategory"), value: system.category })), system.tags && system.tags.length > 0 && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailTags"), value: _jsx("div", { className: "flex flex-wrap gap-element", children: system.tags.map((t) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: t }, t))) }) })), system.metadata && Object.keys(system.metadata).length > 0 && (_jsx(_Fragment, { children: Object.entries(system.metadata).map(([k, v]) => (_jsx(AI_SystemDetailRow, { label: k, value: v }, k))) }))] })] })] }) }), _jsx(TabsContent, { value: "preview", children: _jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: _jsx(Text, { variant: TextVariant.MUTED, children: system.kind === "flow"
                                         ? tComponent(CT, "flowPreviewPlaceholder")
                                         : tComponent(CT, "actorTeamPreviewPlaceholder") }) }) }) }), _jsx(TabsContent, { value: "executions", children: systemExecutions.length === 0 ? (_jsx("div", { className: "flex items-center justify-center rounded-lg border bg-card p-section", children: _jsx(Text, { variant: TextVariant.MUTED, children: tComponent(CT, "noExecutions") }) })) : (_jsx(ScrollArea, { className: "max-h-96", children: _jsx("div", { className: "flex flex-col gap-element", children: systemExecutions.map((exec) => (_jsx(AI_ExecutionRow, { execution: exec }, exec.executionId))) }) })) })] })] }));
 };
@@ -147,13 +147,15 @@ const EXECUTION_STATUS_VARIANT = {
     [FlowsActorsExecutionStatus.RUNNING]: "default",
     [FlowsActorsExecutionStatus.AWAITING_APPROVAL]: "secondary",
     [FlowsActorsExecutionStatus.COMPLETED]: "default",
+    // Stopped by the person: an ending, not a failure (#2524).
+    [FlowsActorsExecutionStatus.CANCELLED]: "outline",
     [FlowsActorsExecutionStatus.ERROR]: "destructive",
 };
 const AI_ExecutionRow = ({ execution, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     if (!isReady)
         return null;
-    return (_jsxs("div", { className: "flex items-center gap-card rounded-lg border bg-card p-card-sm", children: [_jsx(Badge, { variant: EXECUTION_STATUS_VARIANT[execution.status] ?? "secondary", className: "text-2xs", children: tComponent(CT, `execStatus_${execution.status}`) }), _jsx(Text, { as: "span", size: TextSize.XS, variant: TextVariant.MUTED, className: "flex-1 truncate", children: execution.executionId }), execution.progress != null && (_jsxs("span", { className: "text-2xs text-muted-foreground", children: [execution.progress, "%"] })), execution.currentStep && (_jsx("span", { className: "hidden text-2xs text-muted-foreground sm:inline", children: execution.currentStep }))] }));
+    return (_jsxs("div", { className: "flex items-center gap-card rounded-lg border bg-card p-card-sm", children: [_jsx(Badge, { variant: EXECUTION_STATUS_VARIANT[execution.status] ?? "secondary", className: "text-2xs", children: tComponent(CT, `execStatus_${execution.status}`) }), _jsx(Text, { as: "span", size: TextSize.XS, variant: TextVariant.MUTED, className: "flex-1 truncate", children: execution.executionId })] }));
 };
 export const AI_SystemKindBadge = ({ kind, className, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
@@ -164,7 +166,7 @@ export const AI_SystemKindBadge = ({ kind, className, }) => {
 const SYSTEM_STATUS_STYLES = {
     draft: { variant: "outline", extraClass: "text-muted-foreground" },
     active: { variant: "default" },
-    inactive: { variant: "secondary", extraClass: "text-warning" },
+    inactive: { variant: "secondary", extraClass: "text-warning-subtle-foreground" },
     deprecated: { variant: "destructive", extraClass: "opacity-[0.75]" },
     archived: { variant: "outline", extraClass: "text-muted-foreground opacity-[var(--opacity-muted)]" },
 };
@@ -177,7 +179,7 @@ export const AI_SystemStatusBadge = ({ status, className, }) => {
 };
 const RISK_LEVEL_STYLES = {
     low: { variant: "outline" },
-    medium: { variant: "secondary", extraClass: "text-warning" },
+    medium: { variant: "secondary", extraClass: "text-warning-subtle-foreground" },
     high: { variant: "destructive" },
     critical: { variant: "destructive", extraClass: "animate-pulse" },
 };