@aglyn/plugins-ai 1.0.0-beta.228 → 1.0.0-beta.230

package/src/lib/components/ai-upsell-dialog.component.js

@@ -0,0 +1,177 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { aiAddonName } from "@aglyn/aglyn";
+import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
+import { mdiCreation } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+/** The label every "Create with AI" entry reads. */ export const AI_UPSELL_CREATE_LABEL = 'Create with AI';
+/** What the dialog says one entry would do here. */ export const AI_UPSELL_COPY = {
+    page: {
+        title: 'Create a page with AI',
+        does: 'Describe the page you need and AI plans it from your brief, using your theme and ' + 'what the site already has. You confirm the plan, and the page is built as an ' + 'unpublished draft.'
+    },
+    template: {
+        title: 'Create a page template with AI',
+        does: 'Describe what each page should show and AI plans the template, filling what ' + 'changes from page to page from each record. You confirm the plan, and the template ' + 'is built as a draft in your library.'
+    },
+    layout: {
+        title: 'Create a layout with AI',
+        does: 'Describe what the layout should hold and AI plans it, linking your pages and placing ' + 'your navigation or menu component when the site has one. You confirm the plan, and ' + 'the layout is built as a draft no page uses until you assign it.'
+    },
+    form: {
+        title: 'Create a form with AI',
+        does: 'Describe what the form is for and AI plans its fields, its marketing consent and ' + 'where each submission goes. You confirm the plan, and the form is built as a draft.'
+    },
+    component: {
+        title: 'Create a reusable component with AI',
+        does: 'Describe what the component should show and AI plans it, making what each page can ' + 'change into its properties. You confirm the plan, and the component is built as a ' + 'draft.'
+    },
+    workflow: {
+        title: 'Create an automation with AI',
+        does: 'Describe what should happen, and when, and AI drafts the automation from the ' + 'triggers and steps your plan includes. It is saved switched off for you to review.'
+    },
+    email: {
+        title: 'Create an email with AI',
+        does: 'Describe the email you need and AI plans a design from the email blocks, with three ' + 'subject lines and three preheaders to choose between. You confirm the plan, and the ' + 'design is built as a draft that is sent to nobody.'
+    },
+    campaign: {
+        title: 'Create a campaign with AI',
+        does: 'Describe what the campaign is for and AI writes its email design and a draft campaign ' + 'that would send it. Nothing is sent or scheduled, and the campaign is aimed at nobody ' + 'until you pick its lists.'
+    },
+    product: {
+        title: 'Create products with AI',
+        does: 'Describe what the store sells and AI proposes up to twelve products. You review them ' + 'before any is created, and each is created as a draft that is not on your storefront ' + 'until you price it and activate it.'
+    },
+    logic: {
+        title: 'Create a function or variable with AI',
+        does: 'Describe what it should work out or hold and AI drafts the function or variable. It ' + 'opens unsaved in the editor for you to check and save.'
+    },
+    overlay: {
+        title: 'Create an overlay with AI',
+        does: 'Describe the announcement bar or popup you want and AI writes its copy within the ' + 'overlay’s limits. It is saved switched off, for you to check and turn on.'
+    },
+    funnel: {
+        title: 'Create a funnel with AI',
+        does: 'Describe the journey you want to measure and AI proposes its steps from the site’s ' + 'real pages, forms and products. It opens in the funnel editor for you to check and save.'
+    },
+    insight: {
+        title: 'Ask AI about these numbers',
+        label: 'Ask a question',
+        does: 'Ask a question about the figures on this page and AI answers from them, every answer ' + 'traced to the figures it is built from. It reads; it changes nothing.'
+    }
+};
+/** The label an entry's button reads. */ export function aiUpsellLabel(kind) {
+    var _AI_UPSELL_COPY_kind_label;
+    return (_AI_UPSELL_COPY_kind_label = AI_UPSELL_COPY[kind].label) != null ? _AI_UPSELL_COPY_kind_label : AI_UPSELL_CREATE_LABEL;
+}
+/**
+ * The sentence that says where the feature comes from, and who can add it.
+ * `feature` is what the entry is called: "Create with AI" unless it is an ask.
+ */ export function aiUpsellOffer(canManageBilling, feature = AI_UPSELL_CREATE_LABEL) {
+    const addon = aiAddonName();
+    return canManageBilling ? `${feature} comes with the ${addon} add-on, which you can add to this ` + 'workspace from Billing.' : `${feature} comes with the ${addon} add-on. Ask a workspace owner or admin ` + 'to add it from Billing.';
+}
+export function AiUpsellDialog({ kind, open, onClose, upgrade }) {
+    const copy = AI_UPSELL_COPY[kind];
+    const { canManageBilling, billingHref } = upgrade;
+    // Counted once per opening: the denominator the click is a rate against.
+    useEffect(()=>{
+        if (open) trackEvent('ai_upsell_shown', {
+            kind,
+            can_manage: canManageBilling
+        });
+    }, [
+        open,
+        kind,
+        canManageBilling
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: open,
+        onClose: onClose,
+        fullWidth: true,
+        maxWidth: "xs",
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: copy.title
+            }),
+            /*#__PURE__*/ _jsx(DialogContent, {
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: copy.does
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: aiUpsellOffer(canManageBilling, kind === 'insight' ? copy.title : AI_UPSELL_CREATE_LABEL)
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: onClose,
+                        children: canManageBilling ? 'Not now' : 'Close'
+                    }),
+                    canManageBilling ? /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        href: billingHref,
+                        onClick: ()=>trackEvent('ai_upsell_clicked', {
+                                kind
+                            }),
+                        children: `Add ${aiAddonName()}`
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The entry itself on a plan without the add-on: the same button, label and
+ * icon as the entitled entry, opening {@link AiUpsellDialog}. Every entry that
+ * draws it renders from the shell's client-side gates alone and asks the
+ * server nothing until it is used (AGL-3601).
+ */ export function AiUpsellButton({ kind, upgrade, label }) {
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "outlined",
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiCreation.path
+                }),
+                onClick: ()=>setOpen(true),
+                children: label != null ? label : aiUpsellLabel(kind)
+            }),
+            /*#__PURE__*/ _jsx(AiUpsellDialog, {
+                kind: kind,
+                open: open,
+                onClose: ()=>setOpen(false),
+                upgrade: upgrade
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ai-upsell-dialog.component.js.map

package/src/lib/components/ai-upsell-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/ai/src/lib/components/ai-upsell-dialog.component.tsx"],"sourcesContent":["'use client'\n\n/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { aiAddonName } from '@aglyn/aglyn'\nimport { trackEvent } from '@aglyn/aglyn/app-utils/analytics-events'\nimport type { ConsoleWidgetUpgrade } from '@aglyn/aglyn/plugin-manager/feature-plugins'\nimport { mdiCreation } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { useEffect, useState, type ReactNode } from 'react'\nimport type { AiBriefKind } from './ai-brief-dialog.component'\n\n/**\n * \"Create with AI\" on a plan that could buy the AI add-on and has not\n * (AGL-3601). The shell mounts the entry with `entitled={false}` only where\n * the add-on is sold to this workspace, and the jobs route has said the plan\n * is the one thing missing; the entry then keeps its place on the page and\n * opens this instead of the brief, so the reader sees where the add-on is used.\n */\n\n/**\n * What a \"Create with AI\" or \"Ask AI\" entry makes: the brief kinds, an\n * automation, products, a function or variable, an overlay, and an answer\n * about the figures on a page.\n */\nexport type AiUpsellKind =\n  | AiBriefKind\n  | 'workflow'\n  | 'product'\n  | 'logic'\n  | 'overlay'\n  | 'funnel'\n  | 'insight'\n\n/** What one entry's dialog says. */\nexport interface AiUpsellCopy {\n  title: string\n  does: string\n  /** The entry's own label, which the button reads and the offer names; \"Create with AI\" when absent. */\n  label?: string\n}\n\n/** The label every \"Create with AI\" entry reads. */\nexport const AI_UPSELL_CREATE_LABEL = 'Create with AI'\n\n/** What the dialog says one entry would do here. */\nexport const AI_UPSELL_COPY: Readonly<Record<AiUpsellKind, AiUpsellCopy>> = {\n  page: {\n    title: 'Create a page with AI',\n    does:\n      'Describe the page you need and AI plans it from your brief, using your theme and ' +\n      'what the site already has. You confirm the plan, and the page is built as an ' +\n      'unpublished draft.',\n  },\n  template: {\n    title: 'Create a page template with AI',\n    does:\n      'Describe what each page should show and AI plans the template, filling what ' +\n      'changes from page to page from each record. You confirm the plan, and the template ' +\n      'is built as a draft in your library.',\n  },\n  layout: {\n    title: 'Create a layout with AI',\n    does:\n      'Describe what the layout should hold and AI plans it, linking your pages and placing ' +\n      'your navigation or menu component when the site has one. You confirm the plan, and ' +\n      'the layout is built as a draft no page uses until you assign it.',\n  },\n  form: {\n    title: 'Create a form with AI',\n    does:\n      'Describe what the form is for and AI plans its fields, its marketing consent and ' +\n      'where each submission goes. You confirm the plan, and the form is built as a draft.',\n  },\n  component: {\n    title: 'Create a reusable component with AI',\n    does:\n      'Describe what the component should show and AI plans it, making what each page can ' +\n      'change into its properties. You confirm the plan, and the component is built as a ' +\n      'draft.',\n  },\n  workflow: {\n    title: 'Create an automation with AI',\n    does:\n      'Describe what should happen, and when, and AI drafts the automation from the ' +\n      'triggers and steps your plan includes. It is saved switched off for you to review.',\n  },\n  email: {\n    title: 'Create an email with AI',\n    does:\n      'Describe the email you need and AI plans a design from the email blocks, with three ' +\n      'subject lines and three preheaders to choose between. You confirm the plan, and the ' +\n      'design is built as a draft that is sent to nobody.',\n  },\n  campaign: {\n    title: 'Create a campaign with AI',\n    does:\n      'Describe what the campaign is for and AI writes its email design and a draft campaign ' +\n      'that would send it. Nothing is sent or scheduled, and the campaign is aimed at nobody ' +\n      'until you pick its lists.',\n  },\n  product: {\n    title: 'Create products with AI',\n    does:\n      'Describe what the store sells and AI proposes up to twelve products. You review them ' +\n      'before any is created, and each is created as a draft that is not on your storefront ' +\n      'until you price it and activate it.',\n  },\n  logic: {\n    title: 'Create a function or variable with AI',\n    does:\n      'Describe what it should work out or hold and AI drafts the function or variable. It ' +\n      'opens unsaved in the editor for you to check and save.',\n  },\n  overlay: {\n    title: 'Create an overlay with AI',\n    does:\n      'Describe the announcement bar or popup you want and AI writes its copy within the ' +\n      'overlay’s limits. It is saved switched off, for you to check and turn on.',\n  },\n  funnel: {\n    title: 'Create a funnel with AI',\n    does:\n      'Describe the journey you want to measure and AI proposes its steps from the site’s ' +\n      'real pages, forms and products. It opens in the funnel editor for you to check and save.',\n  },\n  insight: {\n    title: 'Ask AI about these numbers',\n    label: 'Ask a question',\n    does:\n      'Ask a question about the figures on this page and AI answers from them, every answer ' +\n      'traced to the figures it is built from. It reads; it changes nothing.',\n  },\n}\n\n/** The label an entry's button reads. */\nexport function aiUpsellLabel(kind: AiUpsellKind): string {\n  return AI_UPSELL_COPY[kind].label ?? AI_UPSELL_CREATE_LABEL\n}\n\n/**\n * The sentence that says where the feature comes from, and who can add it.\n * `feature` is what the entry is called: \"Create with AI\" unless it is an ask.\n */\nexport function aiUpsellOffer(canManageBilling: boolean, feature = AI_UPSELL_CREATE_LABEL): string {\n  const addon = aiAddonName()\n  return canManageBilling\n    ? `${feature} comes with the ${addon} add-on, which you can add to this ` +\n        'workspace from Billing.'\n    : `${feature} comes with the ${addon} add-on. Ask a workspace owner or admin ` +\n        'to add it from Billing.'\n}\n\nexport interface AiUpsellDialogProps {\n  kind: AiUpsellKind\n  open: boolean\n  onClose: () => void\n  upgrade: ConsoleWidgetUpgrade\n}\n\nexport function AiUpsellDialog({ kind, open, onClose, upgrade }: AiUpsellDialogProps) {\n  const copy = AI_UPSELL_COPY[kind]\n  const { canManageBilling, billingHref } = upgrade\n\n  // Counted once per opening: the denominator the click is a rate against.\n  useEffect(() => {\n    if (open) trackEvent('ai_upsell_shown', { kind, can_manage: canManageBilling })\n  }, [open, kind, canManageBilling])\n\n  return (\n    <Dialog open={open} onClose={onClose} fullWidth maxWidth=\"xs\">\n      <DialogTitle>{copy.title}</DialogTitle>\n      <DialogContent>\n        <Stack spacing={2}>\n          <Typography variant=\"body2\">{copy.does}</Typography>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {aiUpsellOffer(canManageBilling, kind === 'insight' ? copy.title : AI_UPSELL_CREATE_LABEL)}\n          </Typography>\n        </Stack>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={onClose}>{canManageBilling ? 'Not now' : 'Close'}</Button>\n        {canManageBilling ? (\n          <Button\n            variant=\"contained\"\n            href={billingHref}\n            onClick={() => trackEvent('ai_upsell_clicked', { kind })}\n          >\n            {`Add ${aiAddonName()}`}\n          </Button>\n        ) : null}\n      </DialogActions>\n    </Dialog>\n  )\n}\n\n/**\n * The entry itself on a plan without the add-on: the same button, label and\n * icon as the entitled entry, opening {@link AiUpsellDialog}. Every entry that\n * draws it renders from the shell's client-side gates alone and asks the\n * server nothing until it is used (AGL-3601).\n */\nexport function AiUpsellButton({\n  kind,\n  upgrade,\n  label,\n}: {\n  kind: AiUpsellKind\n  upgrade: ConsoleWidgetUpgrade\n  /** The entitled entry's own label, when it is not the kind's. */\n  label?: string\n}): ReactNode {\n  const [open, setOpen] = useState(false)\n  return (\n    <>\n      <Button\n        size=\"small\"\n        variant=\"outlined\"\n        startIcon={<MdiIcon path={mdiCreation.path} />}\n        onClick={() => setOpen(true)}\n      >\n        {label ?? aiUpsellLabel(kind)}\n      </Button>\n      <AiUpsellDialog kind={kind} open={open} onClose={() => setOpen(false)} upgrade={upgrade} />\n    </>\n  )\n}\n"],"names":["aiAddonName","trackEvent","mdiCreation","MdiIcon","Button","Dialog","DialogActions","DialogContent","DialogTitle","Stack","Typography","useEffect","useState","AI_UPSELL_CREATE_LABEL","AI_UPSELL_COPY","page","title","does","template","layout","form","component","workflow","email","campaign","product","logic","overlay","funnel","insight","label","aiUpsellLabel","kind","aiUpsellOffer","canManageBilling","feature","addon","AiUpsellDialog","open","onClose","upgrade","copy","billingHref","can_manage","fullWidth","maxWidth","spacing","variant","color","onClick","href","AiUpsellButton","setOpen","size","startIcon","path"],"mappings":"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"}

package/src/lib/components/assist-build-card.component.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { MaybeTokenSource } from '@aglyn/shared-util-http/authorized-token';
+import { type AiJobSummary } from '../model/ai-jobs.types';
+import type { AssistBuildProposal } from '../model/assist-build';
+/**
+ * The one card a build proposed in the chat becomes (AGL-3616): while its
+ * job plans, a line saying so; then the job's own plan card, with its one
+ * price and Confirm — the same `AiJobPlan` the AI jobs drawer shows, so
+ * confirming here and there is one door; then where the build stands, item
+ * by item, with AI jobs a click away. The job itself is started by the
+ * panel, once, when the turn that proposed it ends; this card only follows
+ * it, so re-rendering a stored thread never starts a second build.
+ */
+export interface AssistBuildCardProps {
+    proposal: AssistBuildProposal;
+    /** The job the proposal started, as last seen; `null` while it is being created. */
+    job: AiJobSummary | null;
+    /** Why the job could not be created or confirmed, when it could not. */
+    notice: string | null;
+    orgId: string;
+    user: MaybeTokenSource;
+    staff?: boolean;
+    /** The job as it moved, for the thread to keep. */
+    onJob: (job: AiJobSummary) => void;
+    onNotice: (notice: string | null) => void;
+}
+export declare function AssistBuildCard({ proposal, job, notice, orgId, user, staff, onJob, onNotice, }: AssistBuildCardProps): JSX.Element;

package/src/lib/components/assist-build-card.component.js

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { aiBuildCanRetry, aiBuildItemRows, aiBuildOutcomeLine } from "../model/ai-build-progress.js";
+import { AI_JOB_TERMINAL_STATUSES } from "../model/ai-jobs.types.js";
+import { followAiJobEvents } from "./ai-job-events.js";
+import { AiJobPlan } from "./ai-job-plan.component.js";
+import { resumeAiJobRequest } from "./ai-job-requests.js";
+import { openAiJobs } from "./ai-jobs-store.js";
+const ITEM_STATES = {
+    done: 'built',
+    active: 'building',
+    waiting: 'waiting',
+    failed: 'failed',
+    skipped: 'not built'
+};
+export function AssistBuildCard({ proposal, job, notice, orgId, user, staff = false, onJob, onNotice }) {
+    var _ref, _ref1, _ref2;
+    var _job_plan, _job_items;
+    const [busy, setBusy] = useState(false);
+    const userRef = useRef(user);
+    userRef.current = user;
+    const onJobRef = useRef(onJob);
+    onJobRef.current = onJob;
+    // Follow a job that is still planning or building; a plan waiting for its
+    // confirmation and a settled job need nothing more from the stream.
+    const following = Boolean(job && !AI_JOB_TERMINAL_STATUSES.includes(job.status) && job.status !== 'needs_review');
+    const jobId = (_ref = job == null ? void 0 : job.id) != null ? _ref : null;
+    useEffect(()=>{
+        if (!following || !jobId) return;
+        const controller = new AbortController();
+        void followAiJobEvents(()=>userRef.current, orgId, jobId, controller.signal, (next)=>onJobRef.current(next));
+        return ()=>controller.abort();
+    }, [
+        following,
+        jobId,
+        orgId
+    ]);
+    const resume = async (target, options)=>{
+        setBusy(true);
+        onNotice(null);
+        const decision = await resumeAiJobRequest(user, orgId, target, options);
+        if (decision.job) onJob(decision.job);
+        if (decision.error) onNotice(decision.error);
+        setBusy(false);
+    };
+    const settled = job ? AI_JOB_TERMINAL_STATUSES.includes(job.status) : false;
+    const outcome = job ? aiBuildOutcomeLine(job) : null;
+    return /*#__PURE__*/ _jsxs(Paper, {
+        variant: "outlined",
+        sx: {
+            mt: 1,
+            p: 1.5
+        },
+        "aria-label": "Build plan",
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: proposal.summary
+            }),
+            !job && !notice && /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    mt: 0.5,
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(CircularProgress, {
+                        size: 14
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Planning what to build on this site…'
+                    })
+                ]
+            }),
+            notice && /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "error",
+                sx: {
+                    mt: 0.5
+                },
+                role: "alert",
+                children: notice
+            }),
+            job && job.status === 'needs_review' && /*#__PURE__*/ _jsx(AiJobPlan, {
+                job: job,
+                busy: busy,
+                staff: staff,
+                user: user,
+                onResume: (target, options)=>void resume(target, options)
+            }),
+            job && following && /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    mt: 0.5,
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(CircularProgress, {
+                        size: 14
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: ((_job_plan = job.plan) == null ? void 0 : _job_plan.status) === 'confirmed' ? 'Building each part in turn. What it makes is an unpublished draft unless you chose to publish.' : 'Planning what to build on this site…'
+                    })
+                ]
+            }),
+            job && ((_ref1 = (_job_items = job.items) == null ? void 0 : _job_items.length) != null ? _ref1 : 0) > 0 && job.status !== 'needs_review' && /*#__PURE__*/ _jsx(Box, {
+                component: "ul",
+                "aria-label": "Items",
+                sx: {
+                    m: 0,
+                    mt: 0.5,
+                    pl: 2
+                },
+                children: aiBuildItemRows(job).map((row)=>/*#__PURE__*/ _jsxs(Typography, {
+                        component: "li",
+                        variant: "caption",
+                        "data-item-state": row.state,
+                        children: [
+                            `${row.label} — ${ITEM_STATES[row.state]}`,
+                            row.detail ? `. ${row.detail}` : ''
+                        ]
+                    }, row.slot))
+            }),
+            settled && /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                sx: {
+                    mt: 0.5
+                },
+                children: (_ref2 = outcome != null ? outcome : job == null ? void 0 : job.error) != null ? _ref2 : ''
+            }),
+            job && /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    mt: 1
+                },
+                children: [
+                    job && aiBuildCanRetry(job) && /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "contained",
+                        disabled: busy,
+                        onClick: ()=>void resume(job, {
+                                retry: 'failed-items'
+                            }),
+                        children: 'Try again what failed'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>openAiJobs({
+                                jobId: job.id
+                            }),
+                        children: 'Open in AI jobs'
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=assist-build-card.component.js.map

package/src/lib/components/assist-build-card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/ai/src/lib/components/assist-build-card.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport type { MaybeTokenSource } from '@aglyn/shared-util-http/authorized-token'\nimport { Box, Button, CircularProgress, Paper, Stack, Typography } from '@mui/material'\nimport { useEffect, useRef, useState } from 'react'\nimport { aiBuildCanRetry, aiBuildItemRows, aiBuildOutcomeLine } from '../model/ai-build-progress'\nimport { AI_JOB_TERMINAL_STATUSES, type AiJobSummary } from '../model/ai-jobs.types'\nimport type { AssistBuildProposal } from '../model/assist-build'\nimport { followAiJobEvents } from './ai-job-events'\nimport { AiJobPlan } from './ai-job-plan.component'\nimport { resumeAiJobRequest } from './ai-job-requests'\nimport { openAiJobs } from './ai-jobs-store'\n\n/**\n * The one card a build proposed in the chat becomes (AGL-3616): while its\n * job plans, a line saying so; then the job's own plan card, with its one\n * price and Confirm — the same `AiJobPlan` the AI jobs drawer shows, so\n * confirming here and there is one door; then where the build stands, item\n * by item, with AI jobs a click away. The job itself is started by the\n * panel, once, when the turn that proposed it ends; this card only follows\n * it, so re-rendering a stored thread never starts a second build.\n */\nexport interface AssistBuildCardProps {\n  proposal: AssistBuildProposal\n  /** The job the proposal started, as last seen; `null` while it is being created. */\n  job: AiJobSummary | null\n  /** Why the job could not be created or confirmed, when it could not. */\n  notice: string | null\n  orgId: string\n  user: MaybeTokenSource\n  staff?: boolean\n  /** The job as it moved, for the thread to keep. */\n  onJob: (job: AiJobSummary) => void\n  onNotice: (notice: string | null) => void\n}\n\nconst ITEM_STATES = { done: 'built', active: 'building', waiting: 'waiting', failed: 'failed', skipped: 'not built' } as const\n\nexport function AssistBuildCard({\n  proposal,\n  job,\n  notice,\n  orgId,\n  user,\n  staff = false,\n  onJob,\n  onNotice,\n}: AssistBuildCardProps): JSX.Element {\n  const [busy, setBusy] = useState(false)\n  const userRef = useRef(user)\n  userRef.current = user\n  const onJobRef = useRef(onJob)\n  onJobRef.current = onJob\n\n  // Follow a job that is still planning or building; a plan waiting for its\n  // confirmation and a settled job need nothing more from the stream.\n  const following = Boolean(job && !AI_JOB_TERMINAL_STATUSES.includes(job.status) && job.status !== 'needs_review')\n  const jobId = job?.id ?? null\n  useEffect(() => {\n    if (!following || !jobId) return\n    const controller = new AbortController()\n    void followAiJobEvents(() => userRef.current, orgId, jobId, controller.signal, (next) => onJobRef.current(next))\n    return () => controller.abort()\n  }, [following, jobId, orgId])\n\n  const resume = async (target: AiJobSummary, options?: { publish?: boolean; retry?: 'failed-items' }) => {\n    setBusy(true)\n    onNotice(null)\n    const decision = await resumeAiJobRequest(user, orgId, target, options)\n    if (decision.job) onJob(decision.job)\n    if (decision.error) onNotice(decision.error)\n    setBusy(false)\n  }\n\n  const settled = job ? AI_JOB_TERMINAL_STATUSES.includes(job.status) : false\n  const outcome = job ? aiBuildOutcomeLine(job) : null\n  return (\n    <Paper variant=\"outlined\" sx={{ mt: 1, p: 1.5 }} aria-label=\"Build plan\">\n      <Typography variant=\"subtitle2\">{proposal.summary}</Typography>\n      {!job && !notice && (\n        <Stack direction=\"row\" spacing={1} sx={{ mt: 0.5, alignItems: 'center' }}>\n          <CircularProgress size={14} />\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {'Planning what to build on this site…'}\n          </Typography>\n        </Stack>\n      )}\n      {notice && (\n        <Typography variant=\"body2\" color=\"error\" sx={{ mt: 0.5 }} role=\"alert\">\n          {notice}\n        </Typography>\n      )}\n      {job && job.status === 'needs_review' && (\n        <AiJobPlan job={job} busy={busy} staff={staff} user={user} onResume={(target, options) => void resume(target, options)} />\n      )}\n      {job && following && (\n        <Stack direction=\"row\" spacing={1} sx={{ mt: 0.5, alignItems: 'center' }}>\n          <CircularProgress size={14} />\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {job.plan?.status === 'confirmed'\n              ? 'Building each part in turn. What it makes is an unpublished draft unless you chose to publish.'\n              : 'Planning what to build on this site…'}\n          </Typography>\n        </Stack>\n      )}\n      {job && (job.items?.length ?? 0) > 0 && job.status !== 'needs_review' && (\n        <Box component=\"ul\" aria-label=\"Items\" sx={{ m: 0, mt: 0.5, pl: 2 }}>\n          {aiBuildItemRows(job).map((row) => (\n            <Typography key={row.slot} component=\"li\" variant=\"caption\" data-item-state={row.state}>\n              {`${row.label} — ${ITEM_STATES[row.state]}`}\n              {row.detail ? `. ${row.detail}` : ''}\n            </Typography>\n          ))}\n        </Box>\n      )}\n      {settled && (\n        <Typography variant=\"body2\" sx={{ mt: 0.5 }}>\n          {outcome ?? job?.error ?? ''}\n        </Typography>\n      )}\n      {job && (\n        <Stack direction=\"row\" spacing={1} sx={{ mt: 1 }}>\n          {job && aiBuildCanRetry(job) && (\n            <Button size=\"small\" variant=\"contained\" disabled={busy} onClick={() => void resume(job, { retry: 'failed-items' })}>\n              {'Try again what failed'}\n            </Button>\n          )}\n          <Button size=\"small\" onClick={() => openAiJobs({ jobId: job.id })}>\n            {'Open in AI jobs'}\n          </Button>\n        </Stack>\n      )}\n    </Paper>\n  )\n}\n"],"names":["Box","Button","CircularProgress","Paper","Stack","Typography","useEffect","useRef","useState","aiBuildCanRetry","aiBuildItemRows","aiBuildOutcomeLine","AI_JOB_TERMINAL_STATUSES","followAiJobEvents","AiJobPlan","resumeAiJobRequest","openAiJobs","ITEM_STATES","done","active","waiting","failed","skipped","AssistBuildCard","proposal","job","notice","orgId","user","staff","onJob","onNotice","outcome","busy","setBusy","userRef","current","onJobRef","following","Boolean","includes","status","jobId","id","controller","AbortController","signal","next","abort","resume","target","options","decision","error","settled","variant","sx","mt","p","aria-label","summary","direction","spacing","alignItems","size","color","role","onResume","plan","items","length","component","m","pl","map","row","data-item-state","state","label","detail","slot","disabled","onClick","retry"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAGA,SAASA,GAAG,EAAEC,MAAM,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AACvF,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AACnD,SAASC,eAAe,EAAEC,eAAe,EAAEC,kBAAkB,QAAQ,gCAA4B;AACjG,SAASC,wBAAwB,QAA2B,4BAAwB;AAEpF,SAASC,iBAAiB,QAAQ,qBAAiB;AACnD,SAASC,SAAS,QAAQ,6BAAyB;AACnD,SAASC,kBAAkB,QAAQ,uBAAmB;AACtD,SAASC,UAAU,QAAQ,qBAAiB;AAyB5C,MAAMC,cAAc;IAAEC,MAAM;IAASC,QAAQ;IAAYC,SAAS;IAAWC,QAAQ;IAAUC,SAAS;AAAY;AAEpH,OAAO,SAASC,gBAAgB,EAC9BC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,KAAK,EACbC,KAAK,EACLC,QAAQ,EACa;qBAsEZC;QAlBEP,WAMEA;IAzDb,MAAM,CAACQ,MAAMC,QAAQ,GAAG1B,SAAS;IACjC,MAAM2B,UAAU5B,OAAOqB;IACvBO,QAAQC,OAAO,GAAGR;IAClB,MAAMS,WAAW9B,OAAOuB;IACxBO,SAASD,OAAO,GAAGN;IAEnB,0EAA0E;IAC1E,oEAAoE;IACpE,MAAMQ,YAAYC,QAAQd,OAAO,CAACb,yBAAyB4B,QAAQ,CAACf,IAAIgB,MAAM,KAAKhB,IAAIgB,MAAM,KAAK;IAClG,MAAMC,gBAAQjB,uBAAAA,IAAKkB,EAAE,mBAAI;IACzBrC,UAAU;QACR,IAAI,CAACgC,aAAa,CAACI,OAAO;QAC1B,MAAME,aAAa,IAAIC;QACvB,KAAKhC,kBAAkB,IAAMsB,QAAQC,OAAO,EAAET,OAAOe,OAAOE,WAAWE,MAAM,EAAE,CAACC,OAASV,SAASD,OAAO,CAACW;QAC1G,OAAO,IAAMH,WAAWI,KAAK;IAC/B,GAAG;QAACV;QAAWI;QAAOf;KAAM;IAE5B,MAAMsB,SAAS,OAAOC,QAAsBC;QAC1CjB,QAAQ;QACRH,SAAS;QACT,MAAMqB,WAAW,MAAMrC,mBAAmBa,MAAMD,OAAOuB,QAAQC;QAC/D,IAAIC,SAAS3B,GAAG,EAAEK,MAAMsB,SAAS3B,GAAG;QACpC,IAAI2B,SAASC,KAAK,EAAEtB,SAASqB,SAASC,KAAK;QAC3CnB,QAAQ;IACV;IAEA,MAAMoB,UAAU7B,MAAMb,yBAAyB4B,QAAQ,CAACf,IAAIgB,MAAM,IAAI;IACtE,MAAMT,UAAUP,MAAMd,mBAAmBc,OAAO;IAChD,qBACE,MAACtB;QAAMoD,SAAQ;QAAWC,IAAI;YAAEC,IAAI;YAAGC,GAAG;QAAI;QAAGC,cAAW;;0BAC1D,KAACtD;gBAAWkD,SAAQ;0BAAa/B,SAASoC,OAAO;;YAChD,CAACnC,OAAO,CAACC,wBACR,MAACtB;gBAAMyD,WAAU;gBAAMC,SAAS;gBAAGN,IAAI;oBAAEC,IAAI;oBAAKM,YAAY;gBAAS;;kCACrE,KAAC7D;wBAAiB8D,MAAM;;kCACxB,KAAC3D;wBAAWkD,SAAQ;wBAAQU,OAAM;kCAC/B;;;;YAINvC,wBACC,KAACrB;gBAAWkD,SAAQ;gBAAQU,OAAM;gBAAQT,IAAI;oBAAEC,IAAI;gBAAI;gBAAGS,MAAK;0BAC7DxC;;YAGJD,OAAOA,IAAIgB,MAAM,KAAK,gCACrB,KAAC3B;gBAAUW,KAAKA;gBAAKQ,MAAMA;gBAAMJ,OAAOA;gBAAOD,MAAMA;gBAAMuC,UAAU,CAACjB,QAAQC,UAAY,KAAKF,OAAOC,QAAQC;;YAE/G1B,OAAOa,2BACN,MAAClC;gBAAMyD,WAAU;gBAAMC,SAAS;gBAAGN,IAAI;oBAAEC,IAAI;oBAAKM,YAAY;gBAAS;;kCACrE,KAAC7D;wBAAiB8D,MAAM;;kCACxB,KAAC3D;wBAAWkD,SAAQ;wBAAQU,OAAM;kCAC/BxC,EAAAA,YAAAA,IAAI2C,IAAI,qBAAR3C,UAAUgB,MAAM,MAAK,cAClB,mGACA;;;;YAIThB,OAAO,WAACA,aAAAA,IAAI4C,KAAK,qBAAT5C,WAAW6C,MAAM,oBAAI,KAAK,KAAK7C,IAAIgB,MAAM,KAAK,gCACrD,KAACzC;gBAAIuE,WAAU;gBAAKZ,cAAW;gBAAQH,IAAI;oBAAEgB,GAAG;oBAAGf,IAAI;oBAAKgB,IAAI;gBAAE;0BAC/D/D,gBAAgBe,KAAKiD,GAAG,CAAC,CAACC,oBACzB,MAACtE;wBAA0BkE,WAAU;wBAAKhB,SAAQ;wBAAUqB,mBAAiBD,IAAIE,KAAK;;4BACnF,GAAGF,IAAIG,KAAK,CAAC,GAAG,EAAE7D,WAAW,CAAC0D,IAAIE,KAAK,CAAC,EAAE;4BAC1CF,IAAII,MAAM,GAAG,CAAC,EAAE,EAAEJ,IAAII,MAAM,EAAE,GAAG;;uBAFnBJ,IAAIK,IAAI;;YAO9B1B,yBACC,KAACjD;gBAAWkD,SAAQ;gBAAQC,IAAI;oBAAEC,IAAI;gBAAI;2BACvCzB,QAAAA,kBAAAA,UAAWP,uBAAAA,IAAK4B,KAAK,YAArBrB,QAAyB;;YAG7BP,qBACC,MAACrB;gBAAMyD,WAAU;gBAAMC,SAAS;gBAAGN,IAAI;oBAAEC,IAAI;gBAAE;;oBAC5ChC,OAAOhB,gBAAgBgB,sBACtB,KAACxB;wBAAO+D,MAAK;wBAAQT,SAAQ;wBAAY0B,UAAUhD;wBAAMiD,SAAS,IAAM,KAAKjC,OAAOxB,KAAK;gCAAE0D,OAAO;4BAAe;kCAC9G;;kCAGL,KAAClF;wBAAO+D,MAAK;wBAAQkB,SAAS,IAAMlE,WAAW;gCAAE0B,OAAOjB,IAAIkB,EAAE;4BAAC;kCAC5D;;;;;;AAMb"}

package/src/lib/components/assist-edit-canvas.d.ts

@@ -39,6 +39,8 @@ export interface AssistEditCanvasNodeLike {
     name?: string;
     props?: unknown;
     sx?: unknown;
+    /** The element's own interactions (AGL-3603), as the canvas holds them. */
+    interactions?: unknown;
 }
 /**
  * The slice of the besigner canvas the edit rung reads and drives. Every

package/src/lib/components/assist-edit-canvas.js

@@ -17,6 +17,7 @@ import { _ as _extends } from "@swc/helpers/_/_extends";
  */ import { screenSeoStageKey } from "@aglyn/aglyn/app-utils/screen-seo-fields";
 import { NODE_HIDE_IF_PROP, replaceSubtreeWithInstance, reusableComponentDefinitionFrom } from "@aglyn/aglyn/app-utils/compose-reusable-components";
 import { CANVAS_ROOT_ELEMENT_ID } from "@aglyn/aglyn/foundation/constants/canvas";
+import { NODE_MAX_INTERACTIONS, upsertNodeInteraction } from "@aglyn/aglyn/app-utils/node-interactions";
 import { stageEditorSessionFields } from "@aglyn/aglyn/plugin-manager/editor-sessions";
 import { ASSIST_EDIT_CONTEXT_MAX_NODES, ASSIST_EDIT_CONTEXT_MAX_PROPS, ASSIST_EDIT_OUTLINE_TEXT_CHARS, ASSIST_EDIT_SELECTED_TEXT_CHARS, assistEditOpCounts } from "../model/assist-edit.js";
 const UNDESCRIBED_PROP = /^(html|sx|style|className|dangerouslySetInnerHTML|on[A-Z].*)$/;
@@ -268,7 +269,7 @@ function describeSx(raw) {
             brief: true
         } : {}, model ? {
             like: model
-        } : {});
+        } : {}, isSelected ? summarizeInteractions(node.interactions) : {});
     });
     return {
         selectedId: (selected == null ? void 0 : selected.$id) && seen.has(selected.$id) ? selected.$id : null,
@@ -276,6 +277,27 @@ function describeSx(raw) {
         nodes
     };
 }
+/**
+ * The selected element's interactions as the outline carries them
+ * (AGL-3603): name, event and the kinds of its steps — never a selector.
+ */ function summarizeInteractions(raw) {
+    if (!Array.isArray(raw) || !raw.length) return {};
+    const interactions = raw.filter(isRecord).slice(0, NODE_MAX_INTERACTIONS).map((entry)=>{
+        var _entry_name, _entry_trigger_event;
+        return {
+            name: String((_entry_name = entry['name']) != null ? _entry_name : ''),
+            event: String(isRecord(entry['trigger']) ? (_entry_trigger_event = entry['trigger']['event']) != null ? _entry_trigger_event : '' : ''),
+            steps: (Array.isArray(entry['steps']) ? entry['steps'] : []).filter(isRecord).map((step)=>{
+                var _step_type;
+                return String((_step_type = step['type']) != null ? _step_type : '');
+            }),
+            enabled: entry['enabled'] !== false
+        };
+    }).filter((entry)=>entry.event);
+    return interactions.length ? {
+        interactions
+    } : {};
+}
 /** Ids of the subtree at `rootId`, the root included, through child lists only. */ function subtreeIds(canvas, rootId) {
     var _ref;
     var _canvas_getNode;
@@ -373,6 +395,24 @@ const STALE = {
                     }
                     break;
                 }
+            case 'addInteraction':
+                {
+                    const node = canvas.getNode(op.nodeId);
+                    if (!node || node.componentId !== op.componentId) return STALE;
+                    if (Array.isArray(node.interactions) && node.interactions.length >= NODE_MAX_INTERACTIONS) {
+                        return {
+                            ok: false,
+                            reason: 'refused',
+                            message: `That element already does ${NODE_MAX_INTERACTIONS} things, the most one can. Remove one in Interactions first.`
+                        };
+                    }
+                    // Every element a step acts on is still there, as it was.
+                    for (const target of op.targets){
+                        const live = canvas.getNode(target.nodeId);
+                        if (!live || live.componentId !== target.componentId) return STALE;
+                    }
+                    break;
+                }
             default:
                 {
                     const node = canvas.getNode(op.nodeId);
@@ -463,6 +503,21 @@ function applyOne(canvas, op) {
                 name: op.name
             });
             return;
+        case 'addInteraction':
+            {
+                // Added beside what the element does already, never in place of it:
+                // an id the element already uses is re-minted, so nothing is replaced.
+                const node = live(canvas, op.nodeId);
+                const current = Array.isArray(node.interactions) ? node.interactions : [];
+                let id = op.interaction.id;
+                while(current.some((entry)=>entry.id === id))id = `${op.interaction.id}${current.length}x`;
+                canvas.updateNodeFields(node, {
+                    interactions: upsertNodeInteraction(current, _extends({}, op.interaction, {
+                        id
+                    }))
+                });
+                return;
+            }
         case 'insertSubtree':
             var _op_index1;
             canvas.addNodeFromNested(nestSubtree(op), live(canvas, op.parentId), (_op_index1 = op.index) != null ? _op_index1 : NaN);