@aglyn/plugins-ai 1.0.0-beta.237 → 1.0.0-beta.238

package/src/lib/components/ai-jobs-list-page.component.js

@@ -17,11 +17,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PLATFORM_BRAND_NAME } from "@aglyn/aglyn";
 import { aiJobRefundCopy } from "../model/ai-job-failure-copy.js";
-import { AppLink } from "@aglyn/shared-ui-jsx";
+import { mdiDotsVertical } from "@aglyn/shared-data-mdi";
+import { AppLink, MdiIcon } from "@aglyn/shared-ui-jsx";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
-import { Alert, Box, Button, Card, Chip, CircularProgress, Container, List, ListItemButton, Stack, Typography } from "@mui/material";
+import { Alert, Box, Button, Card, Chip, CircularProgress, Container, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Stack, Typography } from "@mui/material";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { aiJobCancelBlockedReason } from "../model/ai-job-cancel-copy.js";
+import { useAiJobCancel } from "./ai-job-cancel.component.js";
 import { AI_JOB_PHASE_LABELS, aiJobKindNoun, aiJobPhase } from "../model/ai-job-activity.js";
 import { AI_JOB_KINDS } from "../model/ai-jobs.types.js";
 import { publishAiJob } from "./ai-jobs-store.js";
@@ -100,7 +103,7 @@ async function readSiteJobs(user, orgId, hostId, signal) {
     }
 }
 export function AiJobsListPage({ hostId, basePath }) {
-    var _ref;
+    var _ref, _ref1;
     const { data: user } = useUser();
     const userRef = useRef(user);
     userRef.current = user;
@@ -145,6 +148,19 @@ export function AiJobsListPage({ hostId, basePath }) {
         attempt
     ]);
     const retry = useCallback(()=>setAttempt((count)=>count + 1), []);
+    // A row's menu (AGL-3616): open the job, or cancel it after the confirm.
+    const [menu, setMenu] = useState(null);
+    const patchJob = useCallback((next)=>{
+        setList((current)=>current.status === 'ready' ? {
+                status: 'ready',
+                jobs: current.jobs.map((job)=>job.id === next.id ? next : job)
+            } : current);
+    }, []);
+    const canceling = useAiJobCancel({
+        user,
+        orgId,
+        onJob: patchJob
+    });
     const siteName = site.status === 'ready' ? site.name : '';
     const state = site.status === 'error' ? {
         status: 'error',
@@ -231,88 +247,141 @@ export function AiJobsListPage({ hostId, basePath }) {
                             })
                         ]
                     })
-                }) : /*#__PURE__*/ _jsx(Card, {
+                }) : /*#__PURE__*/ _jsxs(Card, {
                     variant: "outlined",
                     sx: {
                         borderRadius: 2
                     },
-                    children: /*#__PURE__*/ _jsx(List, {
-                        disablePadding: true,
-                        "aria-label": "AI jobs",
-                        children: state.jobs.map((job, index)=>{
-                            const phase = aiJobPhase(job);
-                            const credits = aiJobNetCredits(job);
-                            const refund = aiJobRefundCopy(job);
-                            const brief = job.brief.length > BRIEF_PREVIEW_CHARS ? `${job.brief.slice(0, BRIEF_PREVIEW_CHARS)}…` : job.brief;
-                            const created = new Date(job.createdAt);
-                            return /*#__PURE__*/ _jsxs(ListItemButton, {
-                                component: AppLink,
-                                href: `${basePath != null ? basePath : ''}/${encodeURIComponent(job.id)}`,
-                                divider: index < state.jobs.length - 1,
-                                sx: {
-                                    display: 'block',
-                                    py: 1.5
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        direction: "row",
-                                        spacing: 1,
-                                        useFlexGap: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(List, {
+                            disablePadding: true,
+                            "aria-label": "AI jobs",
+                            children: state.jobs.map((job, index)=>{
+                                const phase = aiJobPhase(job);
+                                const credits = aiJobNetCredits(job);
+                                const refund = aiJobRefundCopy(job);
+                                const brief = job.brief.length > BRIEF_PREVIEW_CHARS ? `${job.brief.slice(0, BRIEF_PREVIEW_CHARS)}…` : job.brief;
+                                const created = new Date(job.createdAt);
+                                return /*#__PURE__*/ _jsx(ListItem, {
+                                    disablePadding: true,
+                                    divider: index < state.jobs.length - 1,
+                                    secondaryAction: /*#__PURE__*/ _jsx(IconButton, {
+                                        edge: "end",
+                                        "aria-label": `Actions for this ${aiJobKindLabel(job.kind).toLowerCase()} job`,
+                                        "aria-haspopup": "menu",
+                                        onClick: (event)=>setMenu({
+                                                anchor: event.currentTarget,
+                                                job
+                                            }),
+                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiDotsVertical.path,
+                                            fontSize: "small"
+                                        })
+                                    }),
+                                    children: /*#__PURE__*/ _jsxs(ListItemButton, {
+                                        component: AppLink,
+                                        href: `${basePath != null ? basePath : ''}/${encodeURIComponent(job.id)}`,
                                         sx: {
-                                            alignItems: 'center',
-                                            flexWrap: 'wrap',
-                                            rowGap: 0.5
+                                            display: 'block',
+                                            py: 1.5,
+                                            pr: 7
                                         },
                                         children: [
-                                            /*#__PURE__*/ _jsx(Chip, {
-                                                size: "small",
-                                                variant: "outlined",
-                                                label: aiJobKindLabel(job.kind)
-                                            }),
-                                            /*#__PURE__*/ _jsx(Chip, {
-                                                size: "small",
-                                                color: PHASE_COLOR[phase],
-                                                label: AI_JOB_PHASE_LABELS[phase]
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                direction: "row",
+                                                spacing: 1,
+                                                useFlexGap: true,
+                                                sx: {
+                                                    alignItems: 'center',
+                                                    flexWrap: 'wrap',
+                                                    rowGap: 0.5
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        label: aiJobKindLabel(job.kind)
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: PHASE_COLOR[phase],
+                                                        label: AI_JOB_PHASE_LABELS[phase]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Box, {
+                                                        sx: {
+                                                            flexGrow: 1
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Typography, {
+                                                        variant: "caption",
+                                                        color: "text.secondary",
+                                                        children: [
+                                                            credits > 0 ? `${credits.toLocaleString('en-US')} credits · ` : '',
+                                                            Number.isNaN(created.getTime()) ? null : /*#__PURE__*/ _jsx("time", {
+                                                                dateTime: job.createdAt,
+                                                                children: WHEN.format(created)
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
                                             }),
-                                            /*#__PURE__*/ _jsx(Box, {
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
                                                 sx: {
-                                                    flexGrow: 1
-                                                }
+                                                    mt: 0.75,
+                                                    wordBreak: 'break-word'
+                                                },
+                                                children: brief
                                             }),
-                                            /*#__PURE__*/ _jsxs(Typography, {
+                                            refund ? /*#__PURE__*/ _jsx(Typography, {
                                                 variant: "caption",
                                                 color: "text.secondary",
-                                                children: [
-                                                    credits > 0 ? `${credits.toLocaleString('en-US')} credits · ` : '',
-                                                    Number.isNaN(created.getTime()) ? null : /*#__PURE__*/ _jsx("time", {
-                                                        dateTime: job.createdAt,
-                                                        children: WHEN.format(created)
-                                                    })
-                                                ]
-                                            })
+                                                component: "div",
+                                                sx: {
+                                                    mt: 0.5
+                                                },
+                                                children: refund
+                                            }) : null
                                         ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "body2",
-                                        sx: {
-                                            mt: 0.75,
-                                            wordBreak: 'break-word'
-                                        },
-                                        children: brief
-                                    }),
-                                    refund ? /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        color: "text.secondary",
-                                        component: "div",
-                                        sx: {
-                                            mt: 0.5
-                                        },
-                                        children: refund
-                                    }) : null
-                                ]
-                            }, job.id);
-                        })
-                    })
+                                    })
+                                }, job.id);
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(Menu, {
+                            anchorEl: (_ref1 = menu == null ? void 0 : menu.anchor) != null ? _ref1 : null,
+                            open: menu !== null,
+                            onClose: ()=>setMenu(null),
+                            children: [
+                                menu ? /*#__PURE__*/ _jsx(MenuItem, {
+                                    component: AppLink,
+                                    href: `${basePath != null ? basePath : ''}/${encodeURIComponent(menu.job.id)}`,
+                                    onClick: ()=>setMenu(null),
+                                    children: 'Open job'
+                                }) : null,
+                                menu ? /*#__PURE__*/ _jsx(MenuItem, {
+                                    disabled: Boolean(aiJobCancelBlockedReason(menu.job)),
+                                    onClick: ()=>{
+                                        const job = menu.job;
+                                        setMenu(null);
+                                        canceling.ask(job);
+                                    },
+                                    children: /*#__PURE__*/ _jsx(ListItemText, {
+                                        primary: "Cancel job",
+                                        secondary: aiJobCancelBlockedReason(menu.job),
+                                        slotProps: {
+                                            secondary: {
+                                                sx: {
+                                                    whiteSpace: 'normal',
+                                                    maxWidth: 260
+                                                }
+                                            }
+                                        }
+                                    })
+                                }) : null
+                            ]
+                        }),
+                        canceling.dialog
+                    ]
                 }),
                 state.status === 'ready' && state.jobs.length >= AI_JOBS_PAGE_LIMIT ? /*#__PURE__*/ _jsx(Typography, {
                     variant: "body2",

package/src/lib/components/ai-jobs-list-page.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../libs/plugins/ai/src/lib/components/ai-jobs-list-page.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'use client'\n\nimport { PLATFORM_BRAND_NAME } from '@aglyn/aglyn'\nimport type { ConsolePluginPageProps } from '@aglyn/aglyn/plugin-manager/feature-plugins'\nimport { aiJobRefundCopy } from '../model/ai-job-failure-copy'\nimport { AppLink } from '@aglyn/shared-ui-jsx'\nimport { authorizedFetch, type MaybeTokenSource } from '@aglyn/shared-util-http/authorized-token'\nimport { useUser } from '@aglyn/tenant-feature-instance'\nimport {\n  Alert,\n  Box,\n  Button,\n  Card,\n  Chip,\n  CircularProgress,\n  Container,\n  List,\n  ListItemButton,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { AI_JOB_PHASE_LABELS, aiJobKindNoun, aiJobPhase, type AiJobPhase } from '../model/ai-job-activity'\nimport { AI_JOB_KINDS, type AiJobSummary } from '../model/ai-jobs.types'\nimport { publishAiJob } from './ai-jobs-store'\nimport { useAiJobSite } from './ai-job-site'\n\n/**\n * A site's AI jobs (AGL-3596), at `/ai-jobs` under the site: every job that\n * worked on this site, newest first, each linking to its own page.\n *\n * Read through the jobs route, never Firestore, so the membership, flag and\n * plan rungs that answer every other jobs read answer this one. The site is\n * a query on the route (`hostId`), not a filter of the workspace's list.\n *\n * Every wait ends: the site's read and the list's each settle on content,\n * the empty state, or a sentence with Try again.\n */\n\n/** The most jobs the page lists; the newest, which is what a person comes for. */\nexport const AI_JOBS_PAGE_LIMIT = 50\n\n/** How long the list may take before the page says it could not be loaded. */\nexport const AI_JOBS_LIST_TIMEOUT_MS = 20_000\n\n/** How much of a brief a row shows. */\nconst BRIEF_PREVIEW_CHARS = 120\n\n/** A row's chip, colored as the AI jobs drawer colors it. */\nconst PHASE_COLOR: Record<AiJobPhase, 'default' | 'primary' | 'success' | 'error' | 'warning'> = {\n  queued: 'default',\n  planning: 'primary',\n  'plan-ready': 'warning',\n  building: 'primary',\n  attention: 'warning',\n  done: 'success',\n  failed: 'error',\n  canceled: 'default',\n}\n\nconst WHEN = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' })\n\n/** What a job cost the person: what it spent, less what we refunded. */\nexport function aiJobNetCredits(job: Pick<AiJobSummary, 'creditsSpent' | 'refundedCredits'>): number {\n  return Math.max(0, (job.creditsSpent ?? 0) - (job.refundedCredits ?? 0))\n}\n\n/** The kind as a row names it: `Site`, `Page`, `AI job`. */\nexport function aiJobKindLabel(kind: AiJobSummary['kind']): string {\n  const noun = aiJobKindNoun(kind)\n  return noun === 'AI job' ? noun : noun.charAt(0).toUpperCase() + noun.slice(1)\n}\n\n/**\n * Every kind a row can name, in the kinds registry's order: the labels the\n * rows' chips read, so the empty state never falls behind a new kind.\n */\nexport function aiJobKindLabels(): string[] {\n  const labels = AI_JOB_KINDS.map(aiJobKindLabel).filter((label) => label !== 'AI job')\n  return [...new Set(labels)]\n}\n\n/** `A, B and C`. */\nfunction listOf(items: readonly string[]): string {\n  return items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`\n}\n\ntype ListState =\n  | { status: 'loading' }\n  | { status: 'ready'; jobs: AiJobSummary[] }\n  | { status: 'error'; message: string }\n\nconst LOAD_ERROR = 'This site’s AI jobs could not be loaded. Try again in a moment.'\n\nasync function readSiteJobs(\n  user: MaybeTokenSource,\n  orgId: string,\n  hostId: string,\n  signal: AbortSignal,\n): Promise<ListState> {\n  try {\n    const response = await authorizedFetch(\n      user,\n      `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&hostId=${encodeURIComponent(hostId)}&limit=${AI_JOBS_PAGE_LIMIT}`,\n      { signal },\n    )\n    const payload = (await response.json().catch(() => null)) as { jobs?: AiJobSummary[]; error?: string } | null\n    if (!response.ok) return { status: 'error', message: String(payload?.error ?? LOAD_ERROR) }\n    const jobs = payload?.jobs ?? []\n    // A job the top-bar indicator still counts that has settled since leaves it.\n    for (const job of jobs) publishAiJob(job)\n    return { status: 'ready', jobs }\n  } catch {\n    return { status: 'error', message: LOAD_ERROR }\n  }\n}\n\nexport function AiJobsListPage({ hostId, basePath }: ConsolePluginPageProps) {\n  const { data: user } = useUser()\n  const userRef = useRef<MaybeTokenSource>(user)\n  userRef.current = user\n  const site = useAiJobSite(hostId)\n  const orgId = site.status === 'ready' ? site.orgId : null\n  const [list, setList] = useState<ListState>({ status: 'loading' })\n  const [attempt, setAttempt] = useState(0)\n  const uid = user?.uid ?? null\n\n  useEffect(() => {\n    if (!orgId || !hostId || !uid) return undefined\n    const controller = new AbortController()\n    let settled = false\n    setList({ status: 'loading' })\n    const timer = setTimeout(() => {\n      if (settled) return\n      settled = true\n      controller.abort()\n      setList({ status: 'error', message: LOAD_ERROR })\n    }, AI_JOBS_LIST_TIMEOUT_MS)\n    void readSiteJobs(userRef.current, orgId, hostId, controller.signal).then((next) => {\n      if (settled) return\n      settled = true\n      clearTimeout(timer)\n      setList(next)\n    })\n    return () => {\n      settled = true\n      clearTimeout(timer)\n      controller.abort()\n    }\n  }, [orgId, hostId, uid, attempt])\n\n  const retry = useCallback(() => setAttempt((count) => count + 1), [])\n\n  const siteName = site.status === 'ready' ? site.name : ''\n  const state: ListState =\n    site.status === 'error'\n      ? { status: 'error', message: 'This site could not be read. Check your connection and reload the page.' }\n      : list\n\n  return (\n    <Container maxWidth=\"md\" sx={{ py: { xs: 3, sm: 5 }, px: { xs: 2, sm: 3 } }}>\n      <Stack spacing={3}>\n        <Stack spacing={1}>\n          {siteName ? (\n            <Typography variant=\"overline\" color=\"text.secondary\">\n              {siteName}\n            </Typography>\n          ) : null}\n          <Typography variant=\"h4\" component=\"h1\">\n            {'AI jobs'}\n          </Typography>\n          <Typography variant=\"body1\" color=\"text.secondary\">\n            {`What ${PLATFORM_BRAND_NAME} AI has done and is doing on this site, newest first.`}\n          </Typography>\n        </Stack>\n        {state.status === 'loading' ? (\n          <Stack sx={{ alignItems: 'center', py: 4 }}>\n            <CircularProgress aria-label=\"Loading AI jobs\" />\n          </Stack>\n        ) : state.status === 'error' ? (\n          <Alert\n            severity=\"warning\"\n            action={\n              site.status === 'error' ? undefined : (\n                <Button color=\"inherit\" size=\"small\" onClick={retry}>\n                  {'Try again'}\n                </Button>\n              )\n            }\n          >\n            {state.message}\n          </Alert>\n        ) : state.jobs.length === 0 ? (\n          <Card variant=\"outlined\" sx={{ borderRadius: 2, p: { xs: 2, sm: 3 } }}>\n            <Stack spacing={1}>\n              <Typography variant=\"h6\" component=\"h2\">\n                {'No AI jobs on this site yet'}\n              </Typography>\n              <Typography variant=\"body1\" color=\"text.secondary\">\n                {`An AI job is ${PLATFORM_BRAND_NAME} AI making something for this site from a short ` +\n                  `description you write. Each job is one of these kinds: ${listOf(aiJobKindLabels())}. ` +\n                  'Each one gets a page here that shows its progress and what it made.'}\n              </Typography>\n              <Typography variant=\"body1\" color=\"text.secondary\">\n                {'To start one, choose Create with AI on any list that offers it, such as this site’s ' +\n                  'Pages or Forms. A new site can also be built with AI when it is created.'}\n              </Typography>\n            </Stack>\n          </Card>\n        ) : (\n          <Card variant=\"outlined\" sx={{ borderRadius: 2 }}>\n            <List disablePadding aria-label=\"AI jobs\">\n              {state.jobs.map((job, index) => {\n                const phase = aiJobPhase(job)\n                const credits = aiJobNetCredits(job)\n                const refund = aiJobRefundCopy(job)\n                const brief =\n                  job.brief.length > BRIEF_PREVIEW_CHARS ? `${job.brief.slice(0, BRIEF_PREVIEW_CHARS)}…` : job.brief\n                const created = new Date(job.createdAt)\n                return (\n                  <ListItemButton\n                    key={job.id}\n                    component={AppLink}\n                    href={`${basePath ?? ''}/${encodeURIComponent(job.id)}`}\n                    divider={index < state.jobs.length - 1}\n                    sx={{ display: 'block', py: 1.5 }}\n                  >\n                    <Stack direction=\"row\" spacing={1} useFlexGap sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 0.5 }}>\n                      <Chip size=\"small\" variant=\"outlined\" label={aiJobKindLabel(job.kind)} />\n                      <Chip size=\"small\" color={PHASE_COLOR[phase]} label={AI_JOB_PHASE_LABELS[phase]} />\n                      <Box sx={{ flexGrow: 1 }} />\n                      <Typography variant=\"caption\" color=\"text.secondary\">\n                        {credits > 0 ? `${credits.toLocaleString('en-US')} credits · ` : ''}\n                        {Number.isNaN(created.getTime()) ? null : (\n                          <time dateTime={job.createdAt}>{WHEN.format(created)}</time>\n                        )}\n                      </Typography>\n                    </Stack>\n                    <Typography variant=\"body2\" sx={{ mt: 0.75, wordBreak: 'break-word' }}>\n                      {brief}\n                    </Typography>\n                    {/* What became of its credits, from the job's recorded give-back (AGL-3596). */}\n                    {refund ? (\n                      <Typography variant=\"caption\" color=\"text.secondary\" component=\"div\" sx={{ mt: 0.5 }}>\n                        {refund}\n                      </Typography>\n                    ) : null}\n                  </ListItemButton>\n                )\n              })}\n            </List>\n          </Card>\n        )}\n        {state.status === 'ready' && state.jobs.length >= AI_JOBS_PAGE_LIMIT ? (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {`Showing the ${AI_JOBS_PAGE_LIMIT} most recent jobs.`}\n          </Typography>\n        ) : null}\n      </Stack>\n    </Container>\n  )\n}\n\nexport default AiJobsListPage\n"],"names":["PLATFORM_BRAND_NAME","aiJobRefundCopy","AppLink","authorizedFetch","useUser","Alert","Box","Button","Card","Chip","CircularProgress","Container","List","ListItemButton","Stack","Typography","useCallback","useEffect","useRef","useState","AI_JOB_PHASE_LABELS","aiJobKindNoun","aiJobPhase","AI_JOB_KINDS","publishAiJob","useAiJobSite","AI_JOBS_PAGE_LIMIT","AI_JOBS_LIST_TIMEOUT_MS","BRIEF_PREVIEW_CHARS","PHASE_COLOR","queued","planning","building","attention","done","failed","canceled","WHEN","Intl","DateTimeFormat","dateStyle","timeStyle","aiJobNetCredits","job","Math","max","creditsSpent","refundedCredits","aiJobKindLabel","kind","noun","charAt","toUpperCase","slice","aiJobKindLabels","labels","map","filter","label","Set","listOf","items","length","join","LOAD_ERROR","readSiteJobs","user","orgId","hostId","signal","response","encodeURIComponent","payload","json","catch","ok","status","message","String","error","jobs","AiJobsListPage","basePath","data","userRef","current","site","list","setList","attempt","setAttempt","uid","undefined","controller","AbortController","settled","timer","setTimeout","abort","then","next","clearTimeout","retry","count","siteName","name","state","maxWidth","sx","py","xs","sm","px","spacing","variant","color","component","alignItems","aria-label","severity","action","size","onClick","borderRadius","p","disablePadding","index","phase","credits","refund","brief","created","Date","createdAt","href","id","divider","display","direction","useFlexGap","flexWrap","rowGap","flexGrow","toLocaleString","Number","isNaN","getTime","time","dateTime","format","mt","wordBreak"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../libs/plugins/ai/src/lib/components/ai-jobs-list-page.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'use client'\n\nimport { PLATFORM_BRAND_NAME } from '@aglyn/aglyn'\nimport type { ConsolePluginPageProps } from '@aglyn/aglyn/plugin-manager/feature-plugins'\nimport { aiJobRefundCopy } from '../model/ai-job-failure-copy'\nimport { mdiDotsVertical } from '@aglyn/shared-data-mdi'\nimport { AppLink, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { authorizedFetch, type MaybeTokenSource } from '@aglyn/shared-util-http/authorized-token'\nimport { useUser } from '@aglyn/tenant-feature-instance'\nimport {\n  Alert,\n  Box,\n  Button,\n  Card,\n  Chip,\n  CircularProgress,\n  Container,\n  IconButton,\n  List,\n  ListItem,\n  ListItemButton,\n  ListItemText,\n  Menu,\n  MenuItem,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { aiJobCancelBlockedReason } from '../model/ai-job-cancel-copy'\nimport { useAiJobCancel } from './ai-job-cancel.component'\nimport { AI_JOB_PHASE_LABELS, aiJobKindNoun, aiJobPhase, type AiJobPhase } from '../model/ai-job-activity'\nimport { AI_JOB_KINDS, type AiJobSummary } from '../model/ai-jobs.types'\nimport { publishAiJob } from './ai-jobs-store'\nimport { useAiJobSite } from './ai-job-site'\n\n/**\n * A site's AI jobs (AGL-3596), at `/ai-jobs` under the site: every job that\n * worked on this site, newest first, each linking to its own page.\n *\n * Read through the jobs route, never Firestore, so the membership, flag and\n * plan rungs that answer every other jobs read answer this one. The site is\n * a query on the route (`hostId`), not a filter of the workspace's list.\n *\n * Every wait ends: the site's read and the list's each settle on content,\n * the empty state, or a sentence with Try again.\n */\n\n/** The most jobs the page lists; the newest, which is what a person comes for. */\nexport const AI_JOBS_PAGE_LIMIT = 50\n\n/** How long the list may take before the page says it could not be loaded. */\nexport const AI_JOBS_LIST_TIMEOUT_MS = 20_000\n\n/** How much of a brief a row shows. */\nconst BRIEF_PREVIEW_CHARS = 120\n\n/** A row's chip, colored as the AI jobs drawer colors it. */\nconst PHASE_COLOR: Record<AiJobPhase, 'default' | 'primary' | 'success' | 'error' | 'warning'> = {\n  queued: 'default',\n  planning: 'primary',\n  'plan-ready': 'warning',\n  building: 'primary',\n  attention: 'warning',\n  done: 'success',\n  failed: 'error',\n  canceled: 'default',\n}\n\nconst WHEN = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' })\n\n/** What a job cost the person: what it spent, less what we refunded. */\nexport function aiJobNetCredits(job: Pick<AiJobSummary, 'creditsSpent' | 'refundedCredits'>): number {\n  return Math.max(0, (job.creditsSpent ?? 0) - (job.refundedCredits ?? 0))\n}\n\n/** The kind as a row names it: `Site`, `Page`, `AI job`. */\nexport function aiJobKindLabel(kind: AiJobSummary['kind']): string {\n  const noun = aiJobKindNoun(kind)\n  return noun === 'AI job' ? noun : noun.charAt(0).toUpperCase() + noun.slice(1)\n}\n\n/**\n * Every kind a row can name, in the kinds registry's order: the labels the\n * rows' chips read, so the empty state never falls behind a new kind.\n */\nexport function aiJobKindLabels(): string[] {\n  const labels = AI_JOB_KINDS.map(aiJobKindLabel).filter((label) => label !== 'AI job')\n  return [...new Set(labels)]\n}\n\n/** `A, B and C`. */\nfunction listOf(items: readonly string[]): string {\n  return items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`\n}\n\ntype ListState =\n  | { status: 'loading' }\n  | { status: 'ready'; jobs: AiJobSummary[] }\n  | { status: 'error'; message: string }\n\nconst LOAD_ERROR = 'This site’s AI jobs could not be loaded. Try again in a moment.'\n\nasync function readSiteJobs(\n  user: MaybeTokenSource,\n  orgId: string,\n  hostId: string,\n  signal: AbortSignal,\n): Promise<ListState> {\n  try {\n    const response = await authorizedFetch(\n      user,\n      `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&hostId=${encodeURIComponent(hostId)}&limit=${AI_JOBS_PAGE_LIMIT}`,\n      { signal },\n    )\n    const payload = (await response.json().catch(() => null)) as { jobs?: AiJobSummary[]; error?: string } | null\n    if (!response.ok) return { status: 'error', message: String(payload?.error ?? LOAD_ERROR) }\n    const jobs = payload?.jobs ?? []\n    // A job the top-bar indicator still counts that has settled since leaves it.\n    for (const job of jobs) publishAiJob(job)\n    return { status: 'ready', jobs }\n  } catch {\n    return { status: 'error', message: LOAD_ERROR }\n  }\n}\n\nexport function AiJobsListPage({ hostId, basePath }: ConsolePluginPageProps) {\n  const { data: user } = useUser()\n  const userRef = useRef<MaybeTokenSource>(user)\n  userRef.current = user\n  const site = useAiJobSite(hostId)\n  const orgId = site.status === 'ready' ? site.orgId : null\n  const [list, setList] = useState<ListState>({ status: 'loading' })\n  const [attempt, setAttempt] = useState(0)\n  const uid = user?.uid ?? null\n\n  useEffect(() => {\n    if (!orgId || !hostId || !uid) return undefined\n    const controller = new AbortController()\n    let settled = false\n    setList({ status: 'loading' })\n    const timer = setTimeout(() => {\n      if (settled) return\n      settled = true\n      controller.abort()\n      setList({ status: 'error', message: LOAD_ERROR })\n    }, AI_JOBS_LIST_TIMEOUT_MS)\n    void readSiteJobs(userRef.current, orgId, hostId, controller.signal).then((next) => {\n      if (settled) return\n      settled = true\n      clearTimeout(timer)\n      setList(next)\n    })\n    return () => {\n      settled = true\n      clearTimeout(timer)\n      controller.abort()\n    }\n  }, [orgId, hostId, uid, attempt])\n\n  const retry = useCallback(() => setAttempt((count) => count + 1), [])\n\n  // A row's menu (AGL-3616): open the job, or cancel it after the confirm.\n  const [menu, setMenu] = useState<{ anchor: HTMLElement; job: AiJobSummary } | null>(null)\n  const patchJob = useCallback((next: AiJobSummary) => {\n    setList((current) =>\n      current.status === 'ready'\n        ? { status: 'ready', jobs: current.jobs.map((job) => (job.id === next.id ? next : job)) }\n        : current,\n    )\n  }, [])\n  const canceling = useAiJobCancel({ user, orgId, onJob: patchJob })\n\n  const siteName = site.status === 'ready' ? site.name : ''\n  const state: ListState =\n    site.status === 'error'\n      ? { status: 'error', message: 'This site could not be read. Check your connection and reload the page.' }\n      : list\n\n  return (\n    <Container maxWidth=\"md\" sx={{ py: { xs: 3, sm: 5 }, px: { xs: 2, sm: 3 } }}>\n      <Stack spacing={3}>\n        <Stack spacing={1}>\n          {siteName ? (\n            <Typography variant=\"overline\" color=\"text.secondary\">\n              {siteName}\n            </Typography>\n          ) : null}\n          <Typography variant=\"h4\" component=\"h1\">\n            {'AI jobs'}\n          </Typography>\n          <Typography variant=\"body1\" color=\"text.secondary\">\n            {`What ${PLATFORM_BRAND_NAME} AI has done and is doing on this site, newest first.`}\n          </Typography>\n        </Stack>\n        {state.status === 'loading' ? (\n          <Stack sx={{ alignItems: 'center', py: 4 }}>\n            <CircularProgress aria-label=\"Loading AI jobs\" />\n          </Stack>\n        ) : state.status === 'error' ? (\n          <Alert\n            severity=\"warning\"\n            action={\n              site.status === 'error' ? undefined : (\n                <Button color=\"inherit\" size=\"small\" onClick={retry}>\n                  {'Try again'}\n                </Button>\n              )\n            }\n          >\n            {state.message}\n          </Alert>\n        ) : state.jobs.length === 0 ? (\n          <Card variant=\"outlined\" sx={{ borderRadius: 2, p: { xs: 2, sm: 3 } }}>\n            <Stack spacing={1}>\n              <Typography variant=\"h6\" component=\"h2\">\n                {'No AI jobs on this site yet'}\n              </Typography>\n              <Typography variant=\"body1\" color=\"text.secondary\">\n                {`An AI job is ${PLATFORM_BRAND_NAME} AI making something for this site from a short ` +\n                  `description you write. Each job is one of these kinds: ${listOf(aiJobKindLabels())}. ` +\n                  'Each one gets a page here that shows its progress and what it made.'}\n              </Typography>\n              <Typography variant=\"body1\" color=\"text.secondary\">\n                {'To start one, choose Create with AI on any list that offers it, such as this site’s ' +\n                  'Pages or Forms. A new site can also be built with AI when it is created.'}\n              </Typography>\n            </Stack>\n          </Card>\n        ) : (\n          <Card variant=\"outlined\" sx={{ borderRadius: 2 }}>\n            <List disablePadding aria-label=\"AI jobs\">\n              {state.jobs.map((job, index) => {\n                const phase = aiJobPhase(job)\n                const credits = aiJobNetCredits(job)\n                const refund = aiJobRefundCopy(job)\n                const brief =\n                  job.brief.length > BRIEF_PREVIEW_CHARS ? `${job.brief.slice(0, BRIEF_PREVIEW_CHARS)}…` : job.brief\n                const created = new Date(job.createdAt)\n                return (\n                  <ListItem\n                    key={job.id}\n                    disablePadding\n                    divider={index < state.jobs.length - 1}\n                    secondaryAction={\n                      <IconButton\n                        edge=\"end\"\n                        aria-label={`Actions for this ${aiJobKindLabel(job.kind).toLowerCase()} job`}\n                        aria-haspopup=\"menu\"\n                        onClick={(event) => setMenu({ anchor: event.currentTarget, job })}\n                      >\n                        <MdiIcon path={mdiDotsVertical.path} fontSize=\"small\" />\n                      </IconButton>\n                    }\n                  >\n                    <ListItemButton\n                      component={AppLink}\n                      href={`${basePath ?? ''}/${encodeURIComponent(job.id)}`}\n                      sx={{ display: 'block', py: 1.5, pr: 7 }}\n                    >\n                      <Stack direction=\"row\" spacing={1} useFlexGap sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 0.5 }}>\n                        <Chip size=\"small\" variant=\"outlined\" label={aiJobKindLabel(job.kind)} />\n                        <Chip size=\"small\" color={PHASE_COLOR[phase]} label={AI_JOB_PHASE_LABELS[phase]} />\n                        <Box sx={{ flexGrow: 1 }} />\n                        <Typography variant=\"caption\" color=\"text.secondary\">\n                          {credits > 0 ? `${credits.toLocaleString('en-US')} credits · ` : ''}\n                          {Number.isNaN(created.getTime()) ? null : (\n                            <time dateTime={job.createdAt}>{WHEN.format(created)}</time>\n                          )}\n                        </Typography>\n                      </Stack>\n                      <Typography variant=\"body2\" sx={{ mt: 0.75, wordBreak: 'break-word' }}>\n                        {brief}\n                      </Typography>\n                      {/* What became of its credits, from the job's recorded give-back (AGL-3596). */}\n                      {refund ? (\n                        <Typography variant=\"caption\" color=\"text.secondary\" component=\"div\" sx={{ mt: 0.5 }}>\n                          {refund}\n                        </Typography>\n                      ) : null}\n                    </ListItemButton>\n                  </ListItem>\n                )\n              })}\n            </List>\n            <Menu anchorEl={menu?.anchor ?? null} open={menu !== null} onClose={() => setMenu(null)}>\n              {menu ? (\n                <MenuItem component={AppLink} href={`${basePath ?? ''}/${encodeURIComponent(menu.job.id)}`} onClick={() => setMenu(null)}>\n                  {'Open job'}\n                </MenuItem>\n              ) : null}\n              {menu ? (\n                <MenuItem\n                  disabled={Boolean(aiJobCancelBlockedReason(menu.job))}\n                  onClick={() => {\n                    const job = menu.job\n                    setMenu(null)\n                    canceling.ask(job)\n                  }}\n                >\n                  <ListItemText\n                    primary=\"Cancel job\"\n                    secondary={aiJobCancelBlockedReason(menu.job)}\n                    slotProps={{ secondary: { sx: { whiteSpace: 'normal', maxWidth: 260 } } }}\n                  />\n                </MenuItem>\n              ) : null}\n            </Menu>\n            {canceling.dialog}\n          </Card>\n        )}\n        {state.status === 'ready' && state.jobs.length >= AI_JOBS_PAGE_LIMIT ? (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {`Showing the ${AI_JOBS_PAGE_LIMIT} most recent jobs.`}\n          </Typography>\n        ) : null}\n      </Stack>\n    </Container>\n  )\n}\n\nexport default AiJobsListPage\n"],"names":["PLATFORM_BRAND_NAME","aiJobRefundCopy","mdiDotsVertical","AppLink","MdiIcon","authorizedFetch","useUser","Alert","Box","Button","Card","Chip","CircularProgress","Container","IconButton","List","ListItem","ListItemButton","ListItemText","Menu","MenuItem","Stack","Typography","useCallback","useEffect","useRef","useState","aiJobCancelBlockedReason","useAiJobCancel","AI_JOB_PHASE_LABELS","aiJobKindNoun","aiJobPhase","AI_JOB_KINDS","publishAiJob","useAiJobSite","AI_JOBS_PAGE_LIMIT","AI_JOBS_LIST_TIMEOUT_MS","BRIEF_PREVIEW_CHARS","PHASE_COLOR","queued","planning","building","attention","done","failed","canceled","WHEN","Intl","DateTimeFormat","dateStyle","timeStyle","aiJobNetCredits","job","Math","max","creditsSpent","refundedCredits","aiJobKindLabel","kind","noun","charAt","toUpperCase","slice","aiJobKindLabels","labels","map","filter","label","Set","listOf","items","length","join","LOAD_ERROR","readSiteJobs","user","orgId","hostId","signal","response","encodeURIComponent","payload","json","catch","ok","status","message","String","error","jobs","AiJobsListPage","basePath","data","userRef","current","site","list","setList","attempt","setAttempt","uid","undefined","controller","AbortController","settled","timer","setTimeout","abort","then","next","clearTimeout","retry","count","menu","setMenu","patchJob","id","canceling","onJob","siteName","name","state","maxWidth","sx","py","xs","sm","px","spacing","variant","color","component","alignItems","aria-label","severity","action","size","onClick","borderRadius","p","disablePadding","index","phase","credits","refund","brief","created","Date","createdAt","divider","secondaryAction","edge","toLowerCase","aria-haspopup","event","anchor","currentTarget","path","fontSize","href","display","pr","direction","useFlexGap","flexWrap","rowGap","flexGrow","toLocaleString","Number","isNaN","getTime","time","dateTime","format","mt","wordBreak","anchorEl","open","onClose","disabled","Boolean","ask","primary","secondary","slotProps","whiteSpace","dialog"],"mappings":"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"}

package/src/lib/components/ai-site-build-page.component.js

@@ -39,6 +39,8 @@ import { AiCreditsPromptNotice } from "./ai-credits-prompt.component.js";
 import { aiCreditRangeText } from "../model/ai-credit-estimate.js";
 import { useAiJobSite } from "./ai-job-site.js";
 import { AiSiteStarterFallback } from "./ai-site-starter-fallback.component.js";
+import { AiJobCancelButton } from "./ai-job-cancel.component.js";
+import { AI_JOB_CANCELING_COPY } from "../model/ai-job-cancel-copy.js";
 /**
  * "Building your site" (AGL-3594): one job's page, at `/ai-jobs/{jobId}`
  * under its site — where the guided start sends a person the moment they
@@ -344,6 +346,7 @@ export function AiSiteBuildPage({ hostId, segments, basePath }) {
         });
     }
     const phase = aiSiteBuildPhase(ready);
+    const terminal = AI_JOB_TERMINAL_STATUSES.includes(ready.status);
     const rows = aiSiteBuildRows(ready);
     const fraction = aiSiteBuildFraction(rows);
     const activeRow = phase === 'working' ? (_rows_find = rows.find((row)=>row.state === 'active')) != null ? _rows_find : null : null;
@@ -499,6 +502,12 @@ export function AiSiteBuildPage({ hostId, segments, basePath }) {
                 color: "text.secondary",
                 children: credits
             }) : null,
+            ready.cancelRequested && !terminal ? // Asked to cancel while a step is in flight (AGL-3616): it finishes
+            // or stops, and the page turns to "canceled" when it has.
+            /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: AI_JOB_CANCELING_COPY
+            }) : null,
             retrying && restartAnswers && hostId ? /*#__PURE__*/ _jsx(AiSiteStartCard, {
                 hostId: hostId,
                 orgId: orgId != null ? orgId : undefined,
@@ -651,10 +660,11 @@ export function AiSiteBuildPage({ hostId, segments, basePath }) {
                             }
                         },
                         children: [
-                            restartAnswers && hostId && /*#__PURE__*/ _jsx(Button, {
+                            restartAnswers && hostId && // A fresh job from the same answers; a canceled one starts again.
+                            /*#__PURE__*/ _jsx(Button, {
                                 variant: "contained",
                                 onClick: ()=>setRetrying(true),
-                                children: 'Try again'
+                                children: phase === 'canceled' ? 'Start again' : 'Try again'
                             }),
                             canRetry && /*#__PURE__*/ _jsx(Button, {
                                 variant: "contained",
@@ -670,6 +680,16 @@ export function AiSiteBuildPage({ hostId, segments, basePath }) {
                     })
                 ]
             }),
+            /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(AiJobCancelButton, {
+                    job: ready,
+                    user: user,
+                    orgId: orgId,
+                    onJob: setJob,
+                    variant: terminal ? 'text' : 'outlined',
+                    size: terminal ? 'small' : 'medium'
+                })
+            }),
             ready.plan && ready.plan.screens.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
                 // Open while the site is built, so the plan is in view as each part of it is written.
                 defaultExpanded: phase === 'working',