@aglyn/plugins-ai 1.0.0-beta.143

package/src/lib/components/assist-jobs-drawer.component.js

@@ -0,0 +1,626 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { checkEntitlement } from "@aglyn/aglyn";
+import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
+import { buildRoute, Route } from "@aglyn/aglyn/app-utils/console-routes";
+import { formatBytes } from "@aglyn/aglyn/app-utils/measure-node-map";
+import { AI_JOB_TERMINAL_STATUSES } from "../model/ai-jobs.types.js";
+import { mdiChevronDown, mdiChevronUp } from "@aglyn/shared-data-mdi";
+import { AppLink, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { Box, Button, Chip, CircularProgress, Collapse, IconButton, Stack, Typography } from "@mui/material";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AiPageBriefDialog } from "./ai-page-brief-dialog.component.js";
+import { AiInsightDialog } from "./ai-insight-dialog.component.js";
+import { AiJobPlan } from "./ai-job-plan.component.js";
+/**
+ * The AI jobs drawer inside the Assist panel (AGL-2904): the workspace's
+ * running and recent generation jobs, each step's progress, an "open
+ * draft" link per output, and cancel.
+ *
+ * Reads through the routes, never Firestore directly, so the same
+ * membership, flag and entitlement rungs answer every read; progress comes
+ * from the events route's server-sent stream, re-opened when the server
+ * says `reconnect`. Everything loads on EXPAND rather than on mount: the
+ * panel opens on every console page, and a list nobody asked for is a read
+ * on every page view.
+ *
+ * Hidden — not disabled — unless the flag shows it AND the plan carries
+ * `aiGenerative`: a released-off feature does not exist, and a plan without
+ * it is sold the add-on on the Billing page, not here.
+ */ /** Jobs the drawer lists; the route caps higher, the drawer is a glance. */ const LIST_LIMIT = 10;
+/** How much of a brief a row shows. */ const BRIEF_PREVIEW_CHARS = 90;
+const STATUS_LABEL = {
+    queued: 'Queued',
+    running: 'Running',
+    needs_input: 'Needs attention',
+    needs_review: 'Needs review',
+    done: 'Done',
+    failed: 'Failed',
+    canceled: 'Canceled'
+};
+const STATUS_COLOR = {
+    queued: 'default',
+    running: 'primary',
+    needs_input: 'warning',
+    needs_review: 'warning',
+    done: 'success',
+    failed: 'error',
+    canceled: 'default'
+};
+/** The besigner segment each versioned resource lives under. */ const BESIGNER_SEGMENT = {
+    screen: 'screens',
+    reusableComponent: 'components',
+    layout: 'layouts',
+    template: 'templates',
+    // An email design is a screen: it opens in the screen besigner, as the
+    // Emails page's own Edit design does.
+    emailScreen: 'screens'
+};
+/**
+ * Where "open draft" goes, or `null` when the output has no page of its
+ * own — a `text` output carries its copy on the job and is shown inline.
+ * A versioned resource opens in the besigner on the version the job wrote;
+ * one the console lists without a detail page opens its list; a `theme`
+ * proposal opens the site's Theme section, where it is put in the editor.
+ *
+ * A console URL names a site by its SUBDOMAIN: the `[host]` segment resolves
+ * through the member's host projection by subdomain, never by document id.
+ * So an output that carries no `hostSubdomain` gets no link rather than one
+ * that opens no site.
+ */ export function aiJobOutputHref(output, orgSlug) {
+    const host = output.hostSubdomain;
+    if (!orgSlug || !host) return null;
+    const segment = BESIGNER_SEGMENT[output.resource];
+    if (segment) {
+        const base = `/${orgSlug}/hosts/${host}/${segment}/${output.id}`;
+        return output.versionId ? `${base}/versions/${output.versionId}/besigner` : base;
+    }
+    if (output.resource === 'product') {
+        return `/${orgSlug}/hosts/${host}/products`;
+    }
+    if (output.resource === 'workflow') {
+        // A drafted automation is an action (AGL-2919), listed switched off on
+        // the Automation page's Actions.
+        return `${buildRoute(Route.HOST_AUTOMATION, {
+            orgSlug,
+            host
+        })}/actions`;
+    }
+    if (output.resource === 'theme') {
+        return buildRoute(Route.HOST_SETUP_THEME, {
+            orgSlug,
+            host
+        });
+    }
+    if (output.resource === 'form') {
+        // A new form has no version for the besigner to open: its own page mints
+        // the first one, and holds the routing and consent it declares.
+        return buildRoute(Route.FORM_DETAILS, {
+            orgSlug,
+            host,
+            formId: output.id
+        });
+    }
+    if (output.resource === 'campaign') {
+        // A campaign's page belongs to the Marketing console, under the site.
+        return `${buildRoute(Route.HOST_PLUGIN, {
+            orgSlug,
+            host,
+            pluginSlug: 'marketing'
+        })}/campaigns/${output.id}`;
+    }
+    return null;
+}
+/**
+ * The navigation entry a page job proposes for the page it built (AGL-2907),
+ * or `null`. The job writes no menu: the member adds the entry once the page
+ * is live.
+ */ export function aiJobNavigationProposal(output) {
+    var _output_proposal;
+    if (output.resource !== 'screen') return null;
+    const navigation = (_output_proposal = output.proposal) == null ? void 0 : _output_proposal['navigation'];
+    if (!navigation || typeof navigation !== 'object') return null;
+    const label = navigation['label'];
+    return typeof label === 'string' && label.trim() ? label.trim() : null;
+}
+/**
+ * `data:` frames out of an SSE body, one parsed event per frame. Shared with
+ * every panel that watches a job through the events route.
+ */ export async function readEventFrames(body, onEvent) {
+    const reader = body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    for(;;){
+        var _frames_pop;
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, {
+            stream: true
+        });
+        const frames = buffer.split('\n\n');
+        buffer = (_frames_pop = frames.pop()) != null ? _frames_pop : '';
+        for (const frame of frames){
+            const line = frame.split('\n').find((part)=>part.startsWith('data: '));
+            if (!line) continue;
+            try {
+                onEvent(JSON.parse(line.slice('data: '.length)));
+            } catch (unused) {
+            // A torn frame is dropped; the next state event carries the whole job.
+            }
+        }
+    }
+}
+export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible, isStaff = false, hostId, insight }) {
+    var _ref, _ref1, _ref2, _ref3;
+    const entitled = orgReady && checkEntitlement(org, 'aiGenerative');
+    const [expanded, setExpanded] = useState(false);
+    const [jobs, setJobs] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [notice, setNotice] = useState(null);
+    /** Whether the page brief dialog is open (AGL-2907). */ const [describing, setDescribing] = useState(false);
+    /**
+   * The insight dialog (AGL-2915): `'ask'` for a new question, a job id for an
+   * answer a job already wrote, `null` when closed.
+   */ const [insightOpen, setInsightOpen] = useState(null);
+    /** Job ids whose terminal event has been tracked, so a re-read does not count twice. */ const trackedRef = useRef(new Set());
+    /** The job whose stream is open, so a re-render does not open a second. */ const watchingRef = useRef(null);
+    const patchJob = useCallback((next)=>{
+        setJobs((prior)=>{
+            const index = prior.findIndex((job)=>job.id === next.id);
+            if (index === -1) return [
+                next,
+                ...prior
+            ].slice(0, LIST_LIMIT);
+            const copy = [
+                ...prior
+            ];
+            copy[index] = next;
+            return copy;
+        });
+        if (AI_JOB_TERMINAL_STATUSES.includes(next.status) && !trackedRef.current.has(next.id)) {
+            trackedRef.current.add(next.id);
+            if (next.status === 'done') {
+                trackEvent('ai_job_completed', {
+                    kind: next.kind,
+                    credits: next.creditsSpent
+                });
+            } else if (next.status === 'failed') {
+                trackEvent('ai_job_failed', {
+                    kind: next.kind
+                });
+            }
+        }
+    }, []);
+    const load = useCallback(async ()=>{
+        if (!orgId) return;
+        setLoading(true);
+        setNotice(null);
+        try {
+            const response = await authorizedFetch(user, `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=${LIST_LIMIT}`);
+            if (!response.ok) {
+                var _ref;
+                const payload = await response.json().catch(()=>null);
+                setNotice(String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The AI jobs could not be loaded — try again.'));
+                return;
+            }
+            const payload = await response.json();
+            // Every job that arrives already terminal is one the drawer did not
+            // watch finish, so its outcome is not this session's to count.
+            for (const job of payload.jobs){
+                if (AI_JOB_TERMINAL_STATUSES.includes(job.status)) trackedRef.current.add(job.id);
+            }
+            setJobs(payload.jobs);
+        } catch (unused) {
+            setNotice('The AI jobs could not be loaded — try again.');
+        } finally{
+            setLoading(false);
+        }
+    }, [
+        orgId,
+        user
+    ]);
+    useEffect(()=>{
+        if (expanded) void load();
+    }, [
+        expanded,
+        load
+    ]);
+    // Reset when the panel's org changes: a list from one workspace must not
+    // show under another's key while the new one loads.
+    useEffect(()=>{
+        setJobs([]);
+        setExpanded(false);
+        watchingRef.current = null;
+    }, [
+        orgId
+    ]);
+    // Watch the most recent job that is still moving. One stream at a time:
+    // the route re-reads a document every two seconds per open stream, and a
+    // drawer with three running jobs does not need three of them.
+    const watched = jobs.find((job)=>!AI_JOB_TERMINAL_STATUSES.includes(job.status));
+    const watchedId = (_ref = watched == null ? void 0 : watched.id) != null ? _ref : null;
+    useEffect(()=>{
+        if (!expanded || !orgId || !watchedId || watchingRef.current === watchedId) return;
+        watchingRef.current = watchedId;
+        const controller = new AbortController();
+        const watch = async ()=>{
+            // The server closes a stream at its deadline with `reconnect`; the
+            // loop here re-opens it until the job settles or the drawer unmounts.
+            let again = true;
+            while(again && !controller.signal.aborted){
+                again = false;
+                try {
+                    const response = await authorizedFetch(user, `/api/ai/jobs/${encodeURIComponent(watchedId)}/events?orgId=${encodeURIComponent(orgId)}`, {
+                        signal: controller.signal
+                    });
+                    if (!response.ok || !response.body) return;
+                    await readEventFrames(response.body, (event)=>{
+                        if (event['type'] === 'state') patchJob(event['job']);
+                        else if (event['type'] === 'reconnect') again = true;
+                        else if (event['type'] === 'gone') {
+                            setJobs((prior)=>prior.filter((job)=>job.id !== watchedId));
+                        }
+                    });
+                } catch (unused) {
+                    // The stream ended without a terminal state — a network blip or
+                    // the drawer closing. The next expand reloads the list.
+                    return;
+                }
+            }
+        };
+        void watch().finally(()=>{
+            if (watchingRef.current === watchedId) watchingRef.current = null;
+        });
+        return ()=>{
+            controller.abort();
+            if (watchingRef.current === watchedId) watchingRef.current = null;
+        };
+    }, [
+        expanded,
+        orgId,
+        watchedId,
+        user,
+        patchJob
+    ]);
+    const cancel = useCallback(async (jobId)=>{
+        if (!orgId) return;
+        try {
+            const response = await authorizedFetch(user, `/api/ai/jobs/${encodeURIComponent(jobId)}/cancel`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    orgId
+                })
+            });
+            const payload = await response.json().catch(()=>null);
+            if (!response.ok) {
+                var _ref;
+                setNotice(String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The job could not be canceled — try again.'));
+                return;
+            }
+            if (payload == null ? void 0 : payload.job) patchJob(payload.job);
+        } catch (unused) {
+            setNotice('The job could not be canceled — try again.');
+        }
+    }, [
+        orgId,
+        user,
+        patchJob
+    ]);
+    /** The job whose resume is in flight, so its button cannot send twice. */ const [resuming, setResuming] = useState(null);
+    // Confirms a plan, or tries again a step whose answer broke a building
+    // rule (AGL-2935). The door runs the next step inline and answers with the
+    // job, so the row moves on without waiting for the stream.
+    const resume = useCallback(async (job)=>{
+        if (!orgId) return;
+        setResuming(job.id);
+        setNotice(null);
+        try {
+            const response = await authorizedFetch(user, `/api/ai/jobs/${encodeURIComponent(job.id)}/resume`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    orgId,
+                    hostId: job.hostId
+                })
+            });
+            const payload = await response.json().catch(()=>null);
+            if (payload == null ? void 0 : payload.job) patchJob(payload.job);
+            if (!response.ok) {
+                var _ref;
+                setNotice(String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The job could not be resumed — try again.'));
+            }
+        } catch (unused) {
+            setNotice('The job could not be resumed — try again.');
+        } finally{
+            setResuming(null);
+        }
+    }, [
+        orgId,
+        user,
+        patchJob
+    ]);
+    if (!visible || !orgId || !entitled) return null;
+    const active = jobs.filter((job)=>!AI_JOB_TERMINAL_STATUSES.includes(job.status)).length;
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            mb: 2,
+            borderBottom: 1,
+            borderColor: 'divider',
+            pb: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "subtitle2",
+                        sx: {
+                            flexGrow: 1
+                        },
+                        children: [
+                            "AI jobs",
+                            active > 0 && /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                color: "primary",
+                                label: `${active} running`,
+                                sx: {
+                                    ml: 1
+                                }
+                            })
+                        ]
+                    }),
+                    insight && /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>setInsightOpen('ask'),
+                        children: "Ask about your numbers"
+                    }),
+                    hostId && /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>setDescribing(true),
+                        children: "Describe a page"
+                    }),
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": expanded ? 'Hide AI jobs' : 'Show AI jobs',
+                        "aria-expanded": expanded,
+                        onClick: ()=>setExpanded((prior)=>!prior),
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: expanded ? mdiChevronUp.path : mdiChevronDown.path,
+                            sx: {
+                                fontSize: 18
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Collapse, {
+                in: expanded,
+                unmountOnExit: true,
+                children: [
+                    notice && /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "error",
+                        component: "div",
+                        sx: {
+                            mt: 0.5
+                        },
+                        children: notice
+                    }),
+                    loading && !jobs.length && /*#__PURE__*/ _jsx(CircularProgress, {
+                        size: 16,
+                        sx: {
+                            mt: 1
+                        },
+                        "aria-label": "Loading AI jobs"
+                    }),
+                    !loading && !jobs.length && !notice && /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        component: "div",
+                        sx: {
+                            mt: 0.5
+                        },
+                        children: "No AI jobs yet."
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 1,
+                        sx: {
+                            mt: 1
+                        },
+                        role: "list",
+                        "aria-label": "AI jobs",
+                        children: jobs.map((job)=>{
+                            const stepsDone = job.steps.filter((step)=>step.status === 'done').length;
+                            const current = job.steps.find((step)=>step.status === 'running');
+                            const terminal = AI_JOB_TERMINAL_STATUSES.includes(job.status);
+                            return /*#__PURE__*/ _jsxs(Box, {
+                                role: "listitem",
+                                sx: {
+                                    borderRadius: 1,
+                                    bgcolor: 'action.hover',
+                                    px: 1.5,
+                                    py: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        sx: {
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Chip, {
+                                                size: "small",
+                                                variant: "outlined",
+                                                label: job.kind
+                                            }),
+                                            /*#__PURE__*/ _jsx(Chip, {
+                                                size: "small",
+                                                color: STATUS_COLOR[job.status],
+                                                label: STATUS_LABEL[job.status]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                sx: {
+                                                    flexGrow: 1
+                                                },
+                                                children: [
+                                                    stepsDone,
+                                                    "/",
+                                                    job.steps.length,
+                                                    " steps",
+                                                    current ? ` — ${current.name}` : '',
+                                                    job.creditsSpent > 0 ? ` · ${job.creditsSpent} credits` : ''
+                                                ]
+                                            }),
+                                            !terminal && /*#__PURE__*/ _jsx(Button, {
+                                                size: "small",
+                                                onClick: ()=>void cancel(job.id),
+                                                children: "Cancel"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        sx: {
+                                            mt: 0.5,
+                                            wordBreak: 'break-word'
+                                        },
+                                        children: job.brief.length > BRIEF_PREVIEW_CHARS ? `${job.brief.slice(0, BRIEF_PREVIEW_CHARS)}…` : job.brief
+                                    }),
+                                    job.error && /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: job.status === 'failed' ? 'error' : 'warning.main',
+                                        component: "div",
+                                        children: job.error
+                                    }),
+                                    job.outputs.map((output, index)=>{
+                                        const href = aiJobOutputHref(output, orgSlug);
+                                        const navigation = aiJobNavigationProposal(output);
+                                        return /*#__PURE__*/ _jsxs(Box, {
+                                            sx: {
+                                                mt: 0.5
+                                            },
+                                            children: [
+                                                output.resource === 'insight' ? /*#__PURE__*/ _jsx(Button, {
+                                                    size: "small",
+                                                    onClick: ()=>setInsightOpen(output.id),
+                                                    children: "View answer"
+                                                }) : href ? /*#__PURE__*/ _jsxs(AppLink, {
+                                                    componentVariant: "naked",
+                                                    href: href,
+                                                    children: [
+                                                        "Open draft — ",
+                                                        output.label
+                                                    ]
+                                                }) : output.text ? /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "body2",
+                                                    component: "pre",
+                                                    sx: {
+                                                        whiteSpace: 'pre-wrap',
+                                                        fontFamily: 'inherit',
+                                                        m: 0
+                                                    },
+                                                    children: output.text
+                                                }) : /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    children: output.label
+                                                }),
+                                                output.load ? /*#__PURE__*/ _jsxs(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    component: "div",
+                                                    children: [
+                                                        "About ",
+                                                        formatBytes(output.load.totalBytes),
+                                                        " on a first visit"
+                                                    ]
+                                                }) : null,
+                                                output.note ? /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    component: "div",
+                                                    children: output.note
+                                                }) : null,
+                                                navigation ? /*#__PURE__*/ _jsxs(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    component: "div",
+                                                    children: [
+                                                        "Add “",
+                                                        navigation,
+                                                        "” to your navigation once the page is live."
+                                                    ]
+                                                }) : null
+                                            ]
+                                        }, `${output.resource}:${output.id}:${index}`);
+                                    }),
+                                    /*#__PURE__*/ _jsx(AiJobPlan, {
+                                        job: job,
+                                        onResume: (target)=>void resume(target),
+                                        busy: resuming === job.id,
+                                        staff: isStaff
+                                    })
+                                ]
+                            }, job.id);
+                        })
+                    })
+                ]
+            }),
+            insightOpen !== null && /*#__PURE__*/ _jsx(AiInsightDialog, {
+                open: true,
+                onClose: ()=>{
+                    setInsightOpen(null);
+                    if (expanded) void load();
+                },
+                orgId: orgId,
+                orgSlug: orgSlug,
+                hostId: (insight == null ? void 0 : insight.host) ? hostId != null ? hostId : null : null,
+                host: (_ref1 = insight == null ? void 0 : insight.host) != null ? _ref1 : null,
+                surface: (_ref2 = insight == null ? void 0 : insight.surface) != null ? _ref2 : 'analytics',
+                user: user,
+                uid: (_ref3 = user == null ? void 0 : user.uid) != null ? _ref3 : null,
+                jobId: insightOpen === 'ask' ? null : insightOpen
+            }),
+            hostId && /*#__PURE__*/ _jsx(AiPageBriefDialog, {
+                open: describing,
+                onClose: ()=>{
+                    setDescribing(false);
+                    if (expanded) void load();
+                },
+                orgId: orgId,
+                hostId: hostId,
+                user: user
+            })
+        ]
+    });
+}
+export default AssistJobsDrawer;
+
+//# sourceMappingURL=assist-jobs-drawer.component.js.map