@aglyn/plugins-ai 1.0.0-beta.226 → 1.0.0-beta.227

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

@@ -16,18 +16,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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 { pluginRecordHref, pluginRecordListHref } from "@aglyn/aglyn/plugin-manager/plugin-record-routes";
 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 { AI_JOB_PHASE_LABELS, aiJobActivityCounts, aiJobPhase, aiJobsHeaderChips } from "../model/ai-job-activity.js";
+import { cancelAiJobRequest, resumeAiJobRequest } from "./ai-job-requests.js";
+import { publishAiJob } from "./ai-jobs-store.js";
 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";
+import { aiJobOutputHref, aiJobPrimaryLink } from "./ai-job-links.js";
+import { readEventFrames } from "./ai-job-events.js";
+// Where an output opens, and the stream reader, live beside the dialogs that
+// share them (AGL-3593); this module has always exported them.
+export { aiJobOutputHref, aiJobPrimaryLink, readEventFrames };
 /**
  * The AI jobs drawer inside the Assist panel (AGL-2904): the workspace's
  * running and recent generation jobs, each step's progress, an "open
@@ -40,97 +46,40 @@ import { AiJobPlan } from "./ai-job-plan.component.js";
  * panel opens on every console page, and a list nobody asked for is a read
  * on every page view.
  *
+ * It opens EXPANDED while any of the workspace's jobs is moving or waiting
+ * for the person (AGL-3593) — the shared list the top-bar indicator reads
+ * says so — because a plan waiting behind a collapsed row is a site that
+ * never gets built. An "Open AI jobs" anywhere in the console expands it,
+ * scrolls to the job it names and highlights it for a moment.
+ *
  * 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 = {
+/**
+ * A row's chip says where the job stands in the words every AI surface uses
+ * (AGL-3593): a plan waiting to be confirmed is "Plan ready", never "Running"
+ * and never the machine's `needs_review`.
+ */ const PHASE_COLOR = {
     queued: 'default',
-    running: 'primary',
-    needs_input: 'warning',
-    needs_review: 'warning',
+    planning: 'primary',
+    'plan-ready': 'warning',
+    building: 'primary',
+    attention: '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'
+/** The header's count chips, colored as the rows they count. */ const STATE_COLOR = {
+    'needs-you': 'warning',
+    attention: 'warning',
+    running: 'primary'
 };
-/**
- * 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') {
-        // The catalog a drafted product lands in: the commerce plugin's address
-        // for it (AGL-3080), or no link where commerce is not loaded.
-        return pluginRecordListHref('product', {
-            orgSlug,
-            host
-        });
-    }
-    if (output.resource === 'workflow') {
-        // A drafted automation is an action (AGL-2919), listed switched off on
-        // the workflows plugin's list of actions, or no link where it is not loaded.
-        return pluginRecordListHref('action', {
-            orgSlug,
-            host
-        });
-    }
-    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 — the
-        // forms plugin's address for it — mints the first one, and holds the
-        // routing and consent it declares.
-        return pluginRecordHref('form', {
-            orgSlug,
-            host
-        }, output.id);
-    }
-    if (output.resource === 'campaign') {
-        // A campaign's page is the marketing plugin's, under the site: its
-        // address for the campaign (AGL-3080), or no link where it is not loaded.
-        return pluginRecordHref('campaign', {
-            orgSlug,
-            host
-        }, output.id);
-    }
-    return null;
+/** How long a job AI jobs was opened on stays highlighted. */ const HIGHLIGHT_MS = 2500;
+/** What a job cost the person: what it spent, less what we refunded. */ function netCredits(job) {
+    var _job_creditsSpent, _job_refundedCredits;
+    return Math.max(0, ((_job_creditsSpent = job.creditsSpent) != null ? _job_creditsSpent : 0) - ((_job_refundedCredits = job.refundedCredits) != null ? _job_refundedCredits : 0));
 }
 /**
  * The navigation entry a page job proposes for the page it built (AGL-2907),
@@ -144,37 +93,17 @@ const STATUS_COLOR = {
     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;
+export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible, isStaff = false, hostId, insight, inFlight, focus }) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
     const entitled = orgReady && checkEntitlement(org, 'aiGenerative');
     const [expanded, setExpanded] = useState(false);
+    /**
+   * The person opened or closed the list themselves: from then on the
+   * expanded-by-default rule leaves their choice alone until the workspace
+   * changes.
+   */ const toggledRef = useRef(false);
+    /** The job AI jobs was opened on, highlighted for a moment once it is listed. */ const [highlight, setHighlight] = useState(null);
+    const listRef = useRef(null);
     const [jobs, setJobs] = useState([]);
     const [loading, setLoading] = useState(false);
     const [notice, setNotice] = useState(null);
@@ -186,6 +115,8 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
     /** 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)=>{
+        // Every counting surface moves with the row (AGL-3593).
+        publishAiJob(next);
         setJobs((prior)=>{
             const index = prior.findIndex((job)=>job.id === next.id);
             if (index === -1) return [
@@ -229,6 +160,8 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
             // 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);
+                // A job the indicator still counts that has settled since leaves it.
+                publishAiJob(job);
             }
             setJobs(payload.jobs);
         } catch (unused) {
@@ -251,15 +184,60 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
     useEffect(()=>{
         setJobs([]);
         setExpanded(false);
+        toggledRef.current = false;
         watchingRef.current = null;
     }, [
         orgId
     ]);
+    // Expanded by default while anything is moving or waiting (AGL-3593): a
+    // plan waiting to be confirmed behind a collapsed row is a site that never
+    // gets built. Otherwise collapsed, which reads nothing until asked.
+    const anyInFlight = ((_ref = inFlight == null ? void 0 : inFlight.length) != null ? _ref : 0) > 0;
+    useEffect(()=>{
+        if (anyInFlight && !toggledRef.current) setExpanded(true);
+    }, [
+        anyInFlight
+    ]);
+    // A request to open AI jobs (AGL-3593): expand, read the list again so a
+    // job created a moment ago is in it, and highlight the job named.
+    const focusSeq = (_ref1 = focus == null ? void 0 : focus.seq) != null ? _ref1 : 0;
+    const focusJobId = (_ref2 = focus == null ? void 0 : focus.jobId) != null ? _ref2 : null;
+    const expandedRef = useRef(expanded);
+    expandedRef.current = expanded;
+    useEffect(()=>{
+        if (!focusSeq) return;
+        toggledRef.current = true;
+        setHighlight(focusJobId);
+        // An open list does not re-run the expand effect's read, so it reads here.
+        if (expandedRef.current) void load();
+        else setExpanded(true);
+    // Only a new request runs this; `load` and the job are read as they stand.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        focusSeq
+    ]);
+    // Scroll to the highlighted job once it is listed, then let it fade.
+    const highlightListed = highlight !== null && jobs.some((job)=>job.id === highlight);
+    useEffect(()=>{
+        var _ref;
+        var _listRef_current, _row_scrollIntoView;
+        if (!highlight || !highlightListed) return undefined;
+        const row = Array.from((_ref = (_listRef_current = listRef.current) == null ? void 0 : _listRef_current.querySelectorAll('[data-ai-job-id]')) != null ? _ref : []).find((element)=>element.dataset['aiJobId'] === highlight);
+        row == null ? void 0 : (_row_scrollIntoView = row.scrollIntoView) == null ? void 0 : _row_scrollIntoView.call(row, {
+            block: 'nearest',
+            behavior: 'smooth'
+        });
+        const timer = setTimeout(()=>setHighlight(null), HIGHLIGHT_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        highlight,
+        highlightListed
+    ]);
     // 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;
+    const watchedId = (_ref3 = watched == null ? void 0 : watched.id) != null ? _ref3 : null;
     useEffect(()=>{
         if (!expanded || !orgId || !watchedId || watchingRef.current === watchedId) return;
         watchingRef.current = watchedId;
@@ -303,28 +281,15 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
         user,
         patchJob
     ]);
+    // The same door the dialog that started the job cancels through (AGL-3593).
     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.');
+        const { job, error } = await cancelAiJobRequest(user, orgId, jobId);
+        if (error) {
+            setNotice(error);
+            return;
         }
+        if (job) patchJob(job);
     }, [
         orgId,
         user,
@@ -338,35 +303,20 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
         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);
-        }
+        // The same door the dialog that started the job confirms through (AGL-3593).
+        const { job: next, error } = await resumeAiJobRequest(user, orgId, job);
+        if (next) patchJob(next);
+        if (error) setNotice(error);
+        setResuming(null);
     }, [
         orgId,
         user,
         patchJob
     ]);
     if (!visible || !orgId || !entitled) return null;
-    const active = jobs.filter((job)=>!AI_JOB_TERMINAL_STATUSES.includes(job.status)).length;
+    // Counted by state, never as one "running" figure (AGL-3593): a plan waiting
+    // to be confirmed needs the person, and a stopped job is not moving.
+    const chips = aiJobsHeaderChips(aiJobActivityCounts(inFlight != null ? inFlight : jobs));
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             mb: 2,
@@ -389,14 +339,14 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                         },
                         children: [
                             "AI jobs",
-                            active > 0 && /*#__PURE__*/ _jsx(Chip, {
-                                size: "small",
-                                color: "primary",
-                                label: `${active} running`,
-                                sx: {
-                                    ml: 1
-                                }
-                            })
+                            chips.map((chip)=>/*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    color: STATE_COLOR[chip.state],
+                                    label: chip.label,
+                                    sx: {
+                                        ml: 1
+                                    }
+                                }, chip.state))
                         ]
                     }),
                     insight && /*#__PURE__*/ _jsx(Button, {
@@ -413,7 +363,10 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                         size: "small",
                         "aria-label": expanded ? 'Hide AI jobs' : 'Show AI jobs',
                         "aria-expanded": expanded,
-                        onClick: ()=>setExpanded((prior)=>!prior),
+                        onClick: ()=>{
+                            toggledRef.current = true;
+                            setExpanded((prior)=>!prior);
+                        },
                         children: /*#__PURE__*/ _jsx(MdiIcon, {
                             path: expanded ? mdiChevronUp.path : mdiChevronDown.path,
                             sx: {
@@ -453,6 +406,7 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                         children: "No AI jobs yet."
                     }),
                     /*#__PURE__*/ _jsx(Stack, {
+                        ref: listRef,
                         spacing: 1,
                         sx: {
                             mt: 1
@@ -463,11 +417,24 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                             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);
+                            const phase = aiJobPhase(job);
+                            const primary = aiJobPrimaryLink(job, orgSlug);
+                            const highlighted = highlight === job.id;
                             return /*#__PURE__*/ _jsxs(Box, {
                                 role: "listitem",
+                                "data-ai-job-id": job.id,
+                                "aria-current": highlighted ? 'true' : undefined,
                                 sx: {
                                     borderRadius: 1,
-                                    bgcolor: 'action.hover',
+                                    bgcolor: highlighted ? 'action.selected' : 'action.hover',
+                                    outline: 2,
+                                    outlineColor: highlighted ? 'primary.main' : 'transparent',
+                                    transition: (theme)=>theme.transitions.create([
+                                            'background-color',
+                                            'outline-color'
+                                        ], {
+                                            duration: theme.transitions.duration.standard
+                                        }),
                                     px: 1.5,
                                     py: 1
                                 },
@@ -486,8 +453,8 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                                             }),
                                             /*#__PURE__*/ _jsx(Chip, {
                                                 size: "small",
-                                                color: STATUS_COLOR[job.status],
-                                                label: STATUS_LABEL[job.status]
+                                                color: PHASE_COLOR[phase],
+                                                label: AI_JOB_PHASE_LABELS[phase]
                                             }),
                                             /*#__PURE__*/ _jsxs(Typography, {
                                                 variant: "caption",
@@ -501,7 +468,7 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                                                     job.steps.length,
                                                     " steps",
                                                     current ? ` — ${current.name}` : '',
-                                                    job.creditsSpent > 0 ? ` · ${job.creditsSpent} credits` : ''
+                                                    netCredits(job) > 0 ? ` · ${netCredits(job)} credits` : ''
                                                 ]
                                             }),
                                             !terminal && /*#__PURE__*/ _jsx(Button, {
@@ -525,6 +492,16 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                                         component: "div",
                                         children: job.error
                                     }),
+                                    primary ? /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        variant: "contained",
+                                        component: AppLink,
+                                        href: primary.href,
+                                        sx: {
+                                            mt: 0.5
+                                        },
+                                        children: primary.label
+                                    }) : null,
                                     job.outputs.map((output, index)=>{
                                         const href = aiJobOutputHref(output, orgSlug);
                                         const navigation = aiJobNavigationProposal(output);
@@ -591,7 +568,8 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                                         job: job,
                                         onResume: (target)=>void resume(target),
                                         busy: resuming === job.id,
-                                        staff: isStaff
+                                        staff: isStaff,
+                                        user: user
                                     })
                                 ]
                             }, job.id);
@@ -608,10 +586,10 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                 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',
+                host: (_ref4 = insight == null ? void 0 : insight.host) != null ? _ref4 : null,
+                surface: (_ref5 = insight == null ? void 0 : insight.surface) != null ? _ref5 : 'analytics',
                 user: user,
-                uid: (_ref3 = user == null ? void 0 : user.uid) != null ? _ref3 : null,
+                uid: (_ref6 = user == null ? void 0 : user.uid) != null ? _ref6 : null,
                 jobId: insightOpen === 'ask' ? null : insightOpen
             }),
             hostId && /*#__PURE__*/ _jsx(AiPageBriefDialog, {
@@ -622,7 +600,9 @@ export function AssistJobsDrawer({ orgId, org, orgReady, orgSlug, user, visible,
                 },
                 orgId: orgId,
                 hostId: hostId,
-                user: user
+                user: user,
+                orgSlug: orgSlug,
+                isStaff: isStaff
             })
         ]
     });