@aglyn/plugins-ai 1.0.0-beta.143

package/src/lib/components/ai-theme-proposal-card.component.js

@@ -0,0 +1,619 @@
+/**
+ * @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 { lockdownRefusalText, parseLockdownRefusal } from "@aglyn/aglyn";
+import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
+import { CardDisplay } from "@aglyn/shared-ui-jsx";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { themeEditorControl } from "@aglyn/shared-ui-theme/util/theme-editor-fields";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { useUser } from "@aglyn/tenant-feature-instance";
+import { Alert, Box, Button, Chip, CircularProgress, Grid, Stack, Tab, TableBody, TableCell, TableHead, TableRow, Tabs, TextField, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AI_JOB_TERMINAL_STATUSES } from "../model/ai-jobs.types.js";
+import { aiThemeColorToken, aiThemeProposalAfter, aiThemeStaleChanges, readAiThemeProposal } from "../model/ai-theme-proposal.js";
+import { readEventFrames } from "./assist-jobs-drawer.component.js";
+/**
+ * The theme assistant (AGL-2938), on the site's Theme section through the
+ * `hostTheme` zone: a brief in, a theme proposal out, previewed before and
+ * after with the editor's own preview, and put in the editor below as
+ * unsaved changes when the person chooses. It never writes the theme — the
+ * editor's Save does, through the same guarded path every edit takes.
+ *
+ * It renders nothing until the jobs route has answered for this workspace.
+ * The shell has already decided the plan and the member's permission before
+ * mounting it, but a released-off feature does not exist, and the release
+ * flag is the route's to decide: a 404 there is this card staying absent.
+ * The same read lists the site's recent proposals, so one made while the
+ * person was elsewhere is still here to preview.
+ */ /** How many recent jobs the card reads to find this site's proposals. */ const RECENT_JOBS_READ = 20;
+/** How many of this site's proposals the card offers again. */ const RECENT_PROPOSALS_SHOWN = 3;
+const BRIEF_MAX_CHARS = 4000;
+const SOURCE_COPY = {
+    installed: 'Saved as your changes on top of the installed theme. The publisher’s version stays as it is and can still take an update.',
+    custom: 'Changes this site’s own theme.',
+    default: 'Only these values are stored. Everything else keeps following the default theme.'
+};
+const isTerminal = (job)=>AI_JOB_TERMINAL_STATUSES.includes(job.status);
+/** The proposal a theme job produced, when it produced one. */ function proposalOf(job) {
+    const output = job == null ? void 0 : job.outputs.find((entry)=>entry.resource === 'theme');
+    return output ? readAiThemeProposal(output.proposal) : null;
+}
+/** A control's label, with its scheme when it has one. */ function changeLabel(change) {
+    return themeEditorControl(change.control).label;
+}
+function Swatch({ value }) {
+    if (value === null) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            color: "text.secondary",
+            children: 'Default'
+        });
+    }
+    const text = String(value);
+    const color = typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center'
+        },
+        children: [
+            color ? /*#__PURE__*/ _jsx(Box, {
+                "aria-hidden": true,
+                sx: {
+                    width: 14,
+                    height: 14,
+                    borderRadius: 0.5,
+                    border: 1,
+                    borderColor: 'divider',
+                    backgroundColor: text,
+                    flexShrink: 0
+                }
+            }) : null,
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                sx: {
+                    fontFamily: 'monospace',
+                    wordBreak: 'break-all'
+                },
+                children: text
+            })
+        ]
+    });
+}
+function correctionText(correction) {
+    var _correction_against;
+    const label = `${changeLabel(correction)} (${correction.scheme})`;
+    if (correction.reason === 'dark-value') {
+        return `${label} set to ${correction.to} so the color keeps reading on the dark background.`;
+    }
+    return `${label} moved to ${correction.to} to reach ${correction.required}:1` + (((_correction_against = correction.against) == null ? void 0 : _correction_against.length) ? ` against ${correction.against.join(' and ')}` : '') + (correction.ratio ? ` (it was ${correction.ratio}:1).` : '.');
+}
+export function AiThemeProposalCard(props) {
+    var _ref;
+    const { hostId, orgId, theme, themeSource, ThemePreview, proposeDraft } = props;
+    const { data: user } = useUser();
+    // Held in a ref so the reads below key on WHO is signed in, never on the
+    // identity of the object that says so.
+    const userRef = useRef(user);
+    userRef.current = user;
+    const uid = (_ref = user == null ? void 0 : user.uid) != null ? _ref : null;
+    const [verdict, setVerdict] = useState('checking');
+    const [notice, setNotice] = useState(null);
+    const [recent, setRecent] = useState([]);
+    const [brief, setBrief] = useState('');
+    const [mode, setMode] = useState('modify');
+    const [busy, setBusy] = useState(false);
+    const [job, setJob] = useState(null);
+    const [scheme, setScheme] = useState('light');
+    const [applied, setApplied] = useState(null);
+    const watchRef = useRef(null);
+    useEffect(()=>()=>{
+            var _watchRef_current;
+            return (_watchRef_current = watchRef.current) == null ? void 0 : _watchRef_current.abort();
+        }, []);
+    useEffect(()=>{
+        if (!orgId || !hostId || !uid) return;
+        let active = true;
+        setVerdict('checking');
+        void (async ()=>{
+            try {
+                const response = await authorizedFetch(userRef.current, `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=${RECENT_JOBS_READ}`);
+                if (!active) return;
+                // The flag off (404) and the plan without generation (403): the
+                // feature is not this workspace's, so the card is not here at all.
+                if (response.status === 404 || response.status === 403) {
+                    setVerdict('hidden');
+                    return;
+                }
+                const payload = await response.json().catch(()=>null);
+                if (!active) return;
+                if (!response.ok) {
+                    var _ref;
+                    const locked = parseLockdownRefusal(response.status, payload);
+                    setNotice(locked ? lockdownRefusalText(locked) : String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'Recent theme proposals could not be loaded.'));
+                } else {
+                    var _ref1;
+                    const jobs = (_ref1 = payload == null ? void 0 : payload.jobs) != null ? _ref1 : [];
+                    setRecent(jobs.filter((entry)=>entry.kind === 'theme' && entry.hostId === hostId).filter((entry)=>proposalOf(entry) !== null).slice(0, RECENT_PROPOSALS_SHOWN));
+                }
+                setVerdict('ready');
+            } catch (unused) {
+                if (!active) return;
+                setNotice('Recent theme proposals could not be loaded.');
+                setVerdict('ready');
+            }
+        })();
+        return ()=>{
+            active = false;
+        };
+    }, [
+        orgId,
+        hostId,
+        uid
+    ]);
+    /** Follows a job through the events route until it settles. */ const watch = useCallback(async (jobId, org)=>{
+        var _watchRef_current;
+        (_watchRef_current = watchRef.current) == null ? void 0 : _watchRef_current.abort();
+        const controller = new AbortController();
+        watchRef.current = controller;
+        let again = true;
+        while(again && !controller.signal.aborted){
+            again = false;
+            try {
+                const response = await authorizedFetch(userRef.current, `/api/ai/jobs/${encodeURIComponent(jobId)}/events?orgId=${encodeURIComponent(org)}`, {
+                    signal: controller.signal
+                });
+                if (!response.ok || !response.body) return;
+                await readEventFrames(response.body, (event)=>{
+                    if (event['type'] === 'state') setJob(event['job']);
+                    else if (event['type'] === 'reconnect') again = true;
+                });
+            } catch (unused) {
+                return;
+            }
+        }
+    }, []);
+    const propose = useCallback(async ()=>{
+        if (!orgId || !brief.trim()) return;
+        setBusy(true);
+        setNotice(null);
+        setApplied(null);
+        try {
+            const response = await authorizedFetch(userRef.current, '/api/ai/jobs', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    orgId,
+                    hostId,
+                    kind: 'theme',
+                    brief: brief.trim(),
+                    inputs: {
+                        mode
+                    }
+                })
+            });
+            const payload = await response.json().catch(()=>null);
+            if (!response.ok) {
+                var _ref;
+                const locked = parseLockdownRefusal(response.status, payload);
+                setNotice(locked ? lockdownRefusalText(locked) : String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The theme proposal could not be started — try again.'));
+                return;
+            }
+            const next = payload == null ? void 0 : payload.job;
+            if (!next) return;
+            setJob(next);
+            if (!isTerminal(next)) await watch(next.id, orgId);
+        } catch (unused) {
+            setNotice('The theme proposal could not be started — try again.');
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        orgId,
+        hostId,
+        brief,
+        mode,
+        watch
+    ]);
+    const proposal = useMemo(()=>proposalOf(job), [
+        job
+    ]);
+    const after = useMemo(()=>proposal ? aiThemeProposalAfter(theme, proposal) : null, [
+        theme,
+        proposal
+    ]);
+    const stale = useMemo(()=>proposal ? aiThemeStaleChanges(theme, proposal).length > 0 : false, [
+        theme,
+        proposal
+    ]);
+    const apply = useCallback(()=>{
+        if (!job || !after) return;
+        proposeDraft(after.theme, job.id);
+        setApplied(job.id);
+    }, [
+        job,
+        after,
+        proposeDraft
+    ]);
+    if (verdict !== 'ready') return null;
+    const running = Boolean(job && !isTerminal(job));
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        contentGutterX: true,
+        contentGutterY: true,
+        header: "Theme assistant",
+        help: pluginDocsHelp('aiThemes', {
+            excerpt: 'Describe the change and get a proposal for every control the editor has, previewed before and after. Nothing is saved until you save it in the editor.'
+        }),
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                    exclusive: true,
+                    size: "small",
+                    value: mode,
+                    onChange: (_, value)=>value && setMode(value),
+                    "aria-label": "What to propose",
+                    children: [
+                        /*#__PURE__*/ _jsx(ToggleButton, {
+                            value: "modify",
+                            children: 'Change what I describe'
+                        }),
+                        /*#__PURE__*/ _jsx(ToggleButton, {
+                            value: "create",
+                            children: 'Design a new theme'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    multiline: true,
+                    minRows: 2,
+                    fullWidth: true,
+                    label: "Describe the change",
+                    placeholder: "Warmer, with a deep green primary and bigger headings on mobile",
+                    helperText: "A hex color in your description is used exactly. Paste a link to borrow a page’s colors.",
+                    value: brief,
+                    onChange: (event)=>setBrief(event.target.value.slice(0, BRIEF_MAX_CHARS)),
+                    disabled: busy
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            disabled: busy || !brief.trim(),
+                            onClick: ()=>void propose(),
+                            children: 'Propose changes'
+                        }),
+                        running ? /*#__PURE__*/ _jsx(CircularProgress, {
+                            size: 18,
+                            "aria-label": "Working on a proposal"
+                        }) : null
+                    ]
+                }),
+                notice ? /*#__PURE__*/ _jsx(Alert, {
+                    severity: "warning",
+                    children: notice
+                }) : null,
+                job && job.error && !proposal ? /*#__PURE__*/ _jsx(Alert, {
+                    severity: job.status === 'failed' ? 'error' : 'warning',
+                    children: job.error
+                }) : null,
+                !job && recent.length ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle2",
+                            children: 'Recent proposals for this site'
+                        }),
+                        recent.map((entry)=>/*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        sx: {
+                                            flexGrow: 1,
+                                            minWidth: 0
+                                        },
+                                        noWrap: true,
+                                        children: entry.brief
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        onClick: ()=>setJob(entry),
+                                        children: 'Show'
+                                    })
+                                ]
+                            }, entry.id))
+                    ]
+                }) : null,
+                proposal && after ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    "aria-label": "Theme proposal",
+                    children: [
+                        proposal.summary ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body1",
+                            children: proposal.summary
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: SOURCE_COPY[proposal.source]
+                        }),
+                        stale ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: 'The theme has changed since this proposal was made. The preview and the editor apply it to the theme as it is now.'
+                        }) : null,
+                        proposal.changes.length || proposal.components.length || proposal.resetComponents ? /*#__PURE__*/ _jsx(Box, {
+                            children: /*#__PURE__*/ _jsxs(ScrollTable, {
+                                size: "small",
+                                "aria-label": "Proposed changes",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableHead, {
+                                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Control'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Now'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Proposed'
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs(TableBody, {
+                                        children: [
+                                            proposal.changes.map((change)=>{
+                                                var _change_scheme;
+                                                return /*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                                direction: "row",
+                                                                spacing: 1,
+                                                                sx: {
+                                                                    alignItems: 'center'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                                        variant: "body2",
+                                                                        children: changeLabel(change)
+                                                                    }),
+                                                                    aiThemeColorToken(change.control) && change.scheme ? /*#__PURE__*/ _jsx(Chip, {
+                                                                        size: "small",
+                                                                        variant: "outlined",
+                                                                        label: change.scheme
+                                                                    }) : null
+                                                                ]
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: /*#__PURE__*/ _jsx(Swatch, {
+                                                                value: change.before
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: /*#__PURE__*/ _jsx(Swatch, {
+                                                                value: change.value
+                                                            })
+                                                        })
+                                                    ]
+                                                }, `${change.control}:${(_change_scheme = change.scheme) != null ? _change_scheme : ''}`);
+                                            }),
+                                            proposal.resetComponents ? /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: themeEditorControl('components').label
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'This site’s overrides'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Theme defaults'
+                                                    })
+                                                ]
+                                            }) : null,
+                                            proposal.components.map((leaf)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs(TableCell, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Typography, {
+                                                                    variant: "body2",
+                                                                    children: [
+                                                                        leaf.component,
+                                                                        leaf.target === 'defaultProps' ? 'default' : leaf.slot,
+                                                                        leaf.property
+                                                                    ].join(' · ')
+                                                                }),
+                                                                leaf.media ? /*#__PURE__*/ _jsx(Chip, {
+                                                                    size: "small",
+                                                                    variant: "outlined",
+                                                                    label: leaf.media
+                                                                }) : null
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: '—'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: /*#__PURE__*/ _jsx(Swatch, {
+                                                                value: typeof leaf.value === 'boolean' ? String(leaf.value) : leaf.value
+                                                            })
+                                                        })
+                                                    ]
+                                                }, `${leaf.component}:${leaf.target}:${leaf.slot}:${leaf.media}:${leaf.property}`))
+                                        ]
+                                    })
+                                ]
+                            })
+                        }) : /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: 'No changes proposed.'
+                        }),
+                        [
+                            ...proposal.corrections,
+                            ...after.corrections
+                        ].length ? /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 0.5,
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "subtitle2",
+                                    children: 'Adjusted for readability'
+                                }),
+                                [
+                                    ...proposal.corrections,
+                                    ...after.corrections
+                                ].map((correction)=>/*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        children: correctionText(correction)
+                                    }, `${correction.control}:${correction.scheme}:${correction.to}`))
+                            ]
+                        }) : null,
+                        [
+                            ...proposal.notes,
+                            ...after.notes,
+                            ...proposal.dropped
+                        ].length ? /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 0.5,
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "subtitle2",
+                                    children: 'Worth knowing'
+                                }),
+                                [
+                                    ...proposal.notes,
+                                    ...after.notes
+                                ].map((line)=>/*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: line
+                                    }, `note:${line}`)),
+                                proposal.dropped.map((line)=>/*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: `Left out — ${line}`
+                                    }, `dropped:${line}`))
+                            ]
+                        }) : null,
+                        /*#__PURE__*/ _jsxs(Tabs, {
+                            value: scheme,
+                            onChange: (_, value)=>setScheme(value),
+                            "aria-label": "Preview scheme",
+                            children: [
+                                /*#__PURE__*/ _jsx(Tab, {
+                                    label: "Light",
+                                    value: "light"
+                                }),
+                                /*#__PURE__*/ _jsx(Tab, {
+                                    label: "Dark",
+                                    value: "dark"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Grid, {
+                            container: true,
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    size: {
+                                        xs: 12,
+                                        md: 6
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "subtitle2",
+                                            gutterBottom: true,
+                                            children: 'Before'
+                                        }),
+                                        /*#__PURE__*/ _jsx(Box, {
+                                            "data-preview": "before",
+                                            children: /*#__PURE__*/ _jsx(ThemePreview, {
+                                                theme: theme != null ? theme : {},
+                                                scheme: scheme
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    size: {
+                                        xs: 12,
+                                        md: 6
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "subtitle2",
+                                            gutterBottom: true,
+                                            children: 'After'
+                                        }),
+                                        /*#__PURE__*/ _jsx(Box, {
+                                            "data-preview": "after",
+                                            children: /*#__PURE__*/ _jsx(ThemePreview, {
+                                                theme: after.theme,
+                                                scheme: scheme
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        applied === (job == null ? void 0 : job.id) ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "success",
+                            children: 'In the editor below as unsaved changes. Review them there, then Save — or Discard changes to go back.'
+                        }) : null,
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    onClick: apply,
+                                    disabled: applied === (job == null ? void 0 : job.id),
+                                    children: 'Put in the editor'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    onClick: ()=>{
+                                        setJob(null);
+                                        setApplied(null);
+                                    },
+                                    children: 'Dismiss'
+                                })
+                            ]
+                        })
+                    ]
+                }) : null
+            ]
+        })
+    });
+}
+AiThemeProposalCard.displayName = 'AiThemeProposalCard';
+export default AiThemeProposalCard;
+
+//# sourceMappingURL=ai-theme-proposal-card.component.js.map