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

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

@@ -14,45 +14,88 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */ 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PLATFORM_BRAND_NAME } from "@aglyn/aglyn";
+import { PageHeaderRecord } from "@aglyn/aglyn/app-utils/page-header-record-context";
 import { mdiAlertCircle, mdiCheckCircle, mdiChevronDown, mdiClockOutline } from "@aglyn/shared-data-mdi";
 import { AppLink, MdiIcon } from "@aglyn/shared-ui-jsx";
-import { useFirestore, useUser } from "@aglyn/tenant-feature-instance";
+import { useUser } from "@aglyn/tenant-feature-instance";
 import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, Card, CircularProgress, Container, LinearProgress, Stack, Typography } from "@mui/material";
-import { doc, getDoc } from "firebase/firestore";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { aiSiteBuildCreditsLine, aiSiteBuildPhase, aiSiteBuildRows } from "../model/ai-site-build-progress.js";
-import { aiSiteStarterFallbackOffered } from "../model/ai-job-failure-copy.js";
+import { aiJobPageCopy, aiSiteBuildCreditsLine, aiSiteBuildPhase, aiSiteBuildRows } from "../model/ai-site-build-progress.js";
+import { aiJobRefundCopy, aiSiteStarterFallbackOffered } from "../model/ai-job-failure-copy.js";
+import { aiSiteStartAnswersFromInputs } from "../model/ai-site-start.js";
+import { AiSiteStartCard } from "./ai-site-start-card.component.js";
+import { AI_JOB_TERMINAL_STATUSES } from "../model/ai-jobs.types.js";
 import { followAiJobEvents } from "./ai-job-events.js";
 import { aiSiteBuildDoneLinks } from "./ai-job-links.js";
 import { resumeAiJobRequest } from "./ai-job-requests.js";
+import { useAiJobSite } from "./ai-job-site.js";
 import { AiSiteStarterFallback } from "./ai-site-starter-fallback.component.js";
-/** Follows one job by id: its latest summary, `null` while the first state is out, `'missing'` when the route had none. */ export function useAiJobById(user, orgId, jobId) {
+/**
+ * "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
+ * plan a site, and where a notification about that job opens.
+ *
+ * A guided site start confirms its own plan (`autoConfirm`), so there is no
+ * approval to make here: the page says what is happening, step by step, live
+ * from the job's events route; shows what is being built; and, when the job
+ * ends, leads with the next thing to do — the live site and the pages to
+ * edit, or, where it stopped, the plain sentence for why and what to do
+ * about it. It is linkable and survives a reload, because it reads the job by
+ * the id in its own address under the site's own route.
+ *
+ * Every wait ends (AGL-3596): a site that cannot be read, a job the route
+ * does not know, a route that fails, and a first state that never arrives
+ * each end on a sentence instead of a spinner.
+ *
+ * Mounted by `AiJobsPage`, the plugin's unlisted `/ai-jobs` route: no tab on
+ * the site's strip, an address under it.
+ */ /** How long the job's first state may take before the page says it could not be loaded. */ export const AI_JOB_FIRST_STATE_TIMEOUT_MS = 20000;
+/** Follows one job by id. `retry` follows it again after a `'missing'` or `'error'`. */ export function useAiJobById(user, orgId, jobId) {
     const userRef = useRef(user);
     userRef.current = user;
     const [job, setJob] = useState(null);
-    const status = job && job !== 'missing' ? job.status : null;
-    const moving = status === null || status === 'queued' || status === 'running';
+    const [attempt, setAttempt] = useState(0);
+    const status = job && typeof job === 'object' ? job.status : null;
+    // Followed until the job ENDS (AGL-3596), not until it first stops: a guided
+    // start parks on its plan for the instant it takes to confirm it, and a page
+    // that stopped following there showed that park — the plan's 13 credits and
+    // "the plan is ready" — after the job had built, spent and failed.
+    const moving = status === null || !AI_JOB_TERMINAL_STATUSES.includes(status);
     useEffect(()=>{
         if (!orgId || !jobId || !moving) return undefined;
         const controller = new AbortController();
         let heard = false;
+        const timer = setTimeout(()=>{
+            if (!heard) setJob((current)=>current != null ? current : 'error');
+        }, AI_JOB_FIRST_STATE_TIMEOUT_MS);
         void followAiJobEvents(()=>userRef.current, orgId, jobId, controller.signal, (next)=>{
             heard = true;
             setJob(next);
-        }).then(()=>{
-            if (!heard && !controller.signal.aborted) setJob((current)=>current != null ? current : 'missing');
+        }).then((end)=>{
+            if (heard || controller.signal.aborted) return;
+            const unheard = end === 'not-found' ? 'missing' : 'error';
+            setJob((current)=>current && typeof current === 'object' ? current : unheard);
         });
-        return ()=>controller.abort();
+        return ()=>{
+            clearTimeout(timer);
+            controller.abort();
+        };
     }, [
         orgId,
         jobId,
-        moving
+        moving,
+        attempt
     ]);
+    const retry = useCallback(()=>{
+        setJob(null);
+        setAttempt((count)=>count + 1);
+    }, []);
     return [
         job,
-        setJob
+        setJob,
+        retry
     ];
 }
 const ROW_ICON = {
@@ -95,67 +138,7 @@ function RowIcon({ state }) {
         })
     });
 }
-export function AiSiteBuildPage({ hostId, segments, basePath }) {
-    var _split_, _ref, _ref1;
-    var _ready_review, _ready_review1, _ready_review2;
-    const firestore = useFirestore();
-    const { data: user } = useUser();
-    const jobId = (segments == null ? void 0 : segments[0]) ? decodeURIComponent(String(segments[0])) : null;
-    const orgSlug = (_split_ = (basePath != null ? basePath : '').split('/')[1]) != null ? _split_ : '';
-    const [site, setSite] = useState(null);
-    useEffect(()=>{
-        if (!hostId) return;
-        let active = true;
-        void getDoc(doc(firestore, 'hosts', hostId)).then((snapshot)=>{
-            var _snapshot_data, _data_orgId, _data_displayName;
-            if (!active) return;
-            const data = (_snapshot_data = snapshot.data()) != null ? _snapshot_data : {};
-            setSite({
-                orgId: String((_data_orgId = data.orgId) != null ? _data_orgId : ''),
-                name: String((_data_displayName = data.displayName) != null ? _data_displayName : '')
-            });
-        }).catch(()=>{
-            if (active) setSite({
-                orgId: '',
-                name: ''
-            });
-        });
-        return ()=>{
-            active = false;
-        };
-    }, [
-        firestore,
-        hostId
-    ]);
-    const [job, setJob] = useAiJobById(user, (site == null ? void 0 : site.orgId) || null, jobId);
-    const [busy, setBusy] = useState(false);
-    const [notice, setNotice] = useState(null);
-    const tryAgain = useCallback(async ()=>{
-        if (!(site == null ? void 0 : site.orgId) || !job || job === 'missing') return;
-        setBusy(true);
-        setNotice(null);
-        const decision = await resumeAiJobRequest(user, site.orgId, job);
-        if (decision.job) setJob(decision.job);
-        if (decision.error) setNotice(decision.error);
-        setBusy(false);
-    }, [
-        site,
-        job,
-        user,
-        setJob
-    ]);
-    const ready = job && job !== 'missing' ? job : null;
-    const phase = ready ? aiSiteBuildPhase(ready) : 'working';
-    const heading = phase === 'done' ? 'Your site is ready' : phase === 'working' ? 'Building your site' : 'Your site was not built';
-    const lede = phase === 'done' ? 'Your new pages are drafts. Publish them when you’re happy.' : phase === 'working' ? `${PLATFORM_BRAND_NAME} AI is planning your pages and writing each one. You can leave this page; it keeps going.` : phase === 'canceled' ? 'The job was canceled.' : (_ref = (_ref1 = ready == null ? void 0 : (_ready_review = ready.review) == null ? void 0 : _ready_review.message) != null ? _ref1 : ready == null ? void 0 : ready.error) != null ? _ref : 'Something went wrong building your site.';
-    const rows = ready ? aiSiteBuildRows(ready) : [];
-    const credits = ready ? aiSiteBuildCreditsLine(ready) : null;
-    const links = ready && phase === 'done' ? aiSiteBuildDoneLinks(ready, orgSlug) : {
-        view: null,
-        pages: null
-    };
-    const retryRefusal = ready == null ? void 0 : (_ready_review1 = ready.review) == null ? void 0 : _ready_review1.retryRefusal;
-    const canRetry = phase === 'stopped' && (ready == null ? void 0 : (_ready_review2 = ready.review) == null ? void 0 : _ready_review2.reason) === 'doctrine';
+/** The page's frame: the site's name over the heading and its sentence. */ function Frame({ siteName, heading, lede, children }) {
     return /*#__PURE__*/ _jsx(Container, {
         maxWidth: "sm",
         sx: {
@@ -174,202 +157,370 @@ export function AiSiteBuildPage({ hostId, segments, basePath }) {
                 /*#__PURE__*/ _jsxs(Stack, {
                     spacing: 1,
                     children: [
-                        (site == null ? void 0 : site.name) ? /*#__PURE__*/ _jsx(Typography, {
+                        siteName ? /*#__PURE__*/ _jsx(Typography, {
                             variant: "overline",
                             color: "text.secondary",
-                            children: site.name
+                            children: siteName
                         }) : null,
                         /*#__PURE__*/ _jsx(Typography, {
                             variant: "h4",
                             component: "h1",
                             children: heading
                         }),
-                        /*#__PURE__*/ _jsx(Typography, {
+                        lede ? /*#__PURE__*/ _jsx(Typography, {
                             variant: "body1",
                             color: "text.secondary",
                             children: lede
-                        })
+                        }) : null
                     ]
                 }),
-                job === 'missing' ? /*#__PURE__*/ _jsx(Alert, {
+                children
+            ]
+        })
+    });
+}
+export function AiSiteBuildPage({ hostId, segments, basePath }) {
+    var _split_, _ready_sitePublish, _ready_refundedCredits;
+    var _ready_review, _ready_review1;
+    const { data: user } = useUser();
+    const jobId = (segments == null ? void 0 : segments[0]) ? decodeURIComponent(String(segments[0])) : null;
+    const orgSlug = (_split_ = (basePath != null ? basePath : '').split('/')[1]) != null ? _split_ : '';
+    // `/{orgSlug}/hosts/{subdomain}/ai-jobs`: the site's subdomain, which a console URL names it by.
+    const hostSubdomain = (basePath != null ? basePath : '').split('/')[3] || null;
+    const site = useAiJobSite(hostId);
+    const orgId = site.status === 'ready' ? site.orgId : null;
+    const siteName = site.status === 'ready' ? site.name : undefined;
+    const [job, setJob, retry] = useAiJobById(user, orgId, jobId);
+    const [busy, setBusy] = useState(false);
+    const [notice, setNotice] = useState(null);
+    // A failed guided start's Try again reopens its questions, filled in (AGL-3596);
+    // `?retry=1` — what the AI jobs drawer links — opens them on arrival.
+    const [retrying, setRetrying] = useState(()=>typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('retry') === '1');
+    const tryAgain = useCallback(async ()=>{
+        if (!orgId || !job || typeof job !== 'object') return;
+        setBusy(true);
+        setNotice(null);
+        const decision = await resumeAiJobRequest(user, orgId, job);
+        if (decision.job) setJob(decision.job);
+        if (decision.error) setNotice(decision.error);
+        setBusy(false);
+    }, [
+        orgId,
+        job,
+        user,
+        setJob
+    ]);
+    const ready = job && typeof job === 'object' ? job : null;
+    const copy = ready ? aiJobPageCopy(ready, PLATFORM_BRAND_NAME) : null;
+    // The shell's header names the job's page as the page does, and its trail
+    // walks back to the site's AI jobs.
+    const record = /*#__PURE__*/ _jsx(PageHeaderRecord, {
+        title: copy == null ? void 0 : copy.heading
+    });
+    if (site.status === 'error') {
+        return /*#__PURE__*/ _jsx(Frame, {
+            heading: "This site could not be read",
+            children: /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: 'The site this job belongs to could not be loaded. Check your connection and reload the page.'
+            })
+        });
+    }
+    if (job === 'missing') {
+        return /*#__PURE__*/ _jsxs(Frame, {
+            siteName: siteName,
+            heading: "This job could not be found",
+            children: [
+                /*#__PURE__*/ _jsx(Alert, {
                     severity: "info",
-                    children: 'This job could not be found. It may belong to another workspace.'
-                }) : !ready ? /*#__PURE__*/ _jsx(Stack, {
-                    sx: {
-                        alignItems: 'center',
-                        py: 4
-                    },
-                    children: /*#__PURE__*/ _jsx(CircularProgress, {
-                        "aria-label": "Loading the job"
+                    children: 'It may belong to another workspace, or it may have expired.'
+                }),
+                basePath ? /*#__PURE__*/ _jsx(Box, {
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        component: AppLink,
+                        href: basePath,
+                        children: 'See this site’s AI jobs'
                     })
-                }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        notice && /*#__PURE__*/ _jsx(Alert, {
-                            severity: "warning",
-                            children: notice
-                        }),
-                        /*#__PURE__*/ _jsxs(Card, {
-                            variant: "outlined",
-                            sx: {
-                                borderRadius: 2
-                            },
-                            children: [
-                                phase === 'working' && /*#__PURE__*/ _jsx(LinearProgress, {
-                                    "aria-label": "Building"
-                                }),
-                                /*#__PURE__*/ _jsx(Box, {
-                                    component: "ol",
-                                    "aria-label": "Progress",
-                                    sx: {
-                                        listStyle: 'none',
-                                        m: 0,
-                                        p: {
-                                            xs: 2,
-                                            sm: 3
-                                        }
-                                    },
-                                    children: /*#__PURE__*/ _jsx(Stack, {
-                                        spacing: 2,
-                                        children: rows.map((row)=>/*#__PURE__*/ _jsxs(Stack, {
-                                                component: "li",
-                                                direction: "row",
-                                                spacing: 2,
-                                                sx: {
-                                                    alignItems: 'center'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Box, {
-                                                        sx: {
-                                                            width: (theme)=>theme.spacing(3),
-                                                            display: 'flex',
-                                                            justifyContent: 'center'
-                                                        },
-                                                        children: /*#__PURE__*/ _jsx(RowIcon, {
-                                                            state: row.state
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body1",
-                                                        color: row.state === 'waiting' ? 'text.secondary' : 'text.primary',
-                                                        children: row.label
-                                                    })
-                                                ]
-                                            }, row.id))
-                                    })
-                                })
-                            ]
-                        }),
-                        credits && /*#__PURE__*/ _jsx(Typography, {
-                            variant: "body2",
-                            color: "text.secondary",
-                            children: credits
-                        }),
-                        phase === 'done' && /*#__PURE__*/ _jsxs(Stack, {
-                            direction: {
-                                xs: 'column',
-                                sm: 'row'
-                            },
+                }) : null
+            ]
+        });
+    }
+    if (job === 'error') {
+        return /*#__PURE__*/ _jsx(Frame, {
+            siteName: siteName,
+            heading: "This job could not be loaded",
+            children: /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                action: /*#__PURE__*/ _jsx(Button, {
+                    color: "inherit",
+                    size: "small",
+                    onClick: retry,
+                    children: 'Try again'
+                }),
+                children: 'Something went wrong reading it. It may still be running: try again in a moment.'
+            })
+        });
+    }
+    if (!ready || !copy) {
+        return /*#__PURE__*/ _jsx(Frame, {
+            siteName: siteName,
+            heading: "Building your site",
+            children: /*#__PURE__*/ _jsx(Stack, {
+                sx: {
+                    alignItems: 'center',
+                    py: 4
+                },
+                children: /*#__PURE__*/ _jsx(CircularProgress, {
+                    "aria-label": "Loading the job"
+                })
+            })
+        });
+    }
+    const phase = aiSiteBuildPhase(ready);
+    const rows = aiSiteBuildRows(ready);
+    const credits = aiSiteBuildCreditsLine(ready);
+    const links = phase === 'done' ? aiSiteBuildDoneLinks(ready, orgSlug) : {
+        view: null,
+        pages: null
+    };
+    const sitePublish = ready.kind === 'site' && phase === 'done' ? (_ready_sitePublish = ready.sitePublish) != null ? _ready_sitePublish : null : null;
+    const liveUrl = sitePublish && sitePublish.published.length > 0 ? sitePublish.liveUrl : null;
+    const retryRefusal = (_ready_review = ready.review) == null ? void 0 : _ready_review.retryRefusal;
+    const canRetry = phase === 'stopped' && ((_ready_review1 = ready.review) == null ? void 0 : _ready_review1.reason) === 'doctrine';
+    // A guided start that ended without building its site starts over from its
+    // own answers, as a fresh job: the questions reopen filled in.
+    const restartAnswers = ready.kind === 'site' && (phase === 'failed' || phase === 'canceled') ? aiSiteStartAnswersFromInputs(ready.siteInputs) : null;
+    const refund = phase === 'failed' || phase === 'stopped' || phase === 'canceled' ? aiJobRefundCopy(ready) : null;
+    return /*#__PURE__*/ _jsxs(Frame, {
+        siteName: siteName,
+        heading: copy.heading,
+        lede: copy.lede,
+        children: [
+            record,
+            notice && /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: notice
+            }),
+            /*#__PURE__*/ _jsxs(Card, {
+                variant: "outlined",
+                sx: {
+                    borderRadius: 2
+                },
+                children: [
+                    phase === 'working' && /*#__PURE__*/ _jsx(LinearProgress, {
+                        "aria-label": "Building"
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "ol",
+                        "aria-label": "Progress",
+                        sx: {
+                            listStyle: 'none',
+                            m: 0,
+                            p: {
+                                xs: 2,
+                                sm: 3
+                            }
+                        },
+                        children: /*#__PURE__*/ _jsx(Stack, {
                             spacing: 2,
-                            children: [
-                                links.view && /*#__PURE__*/ _jsx(Button, {
-                                    variant: "contained",
-                                    size: "large",
-                                    component: AppLink,
-                                    href: links.view,
-                                    children: 'View your site'
-                                }),
-                                links.pages && /*#__PURE__*/ _jsx(Button, {
-                                    variant: "outlined",
-                                    size: "large",
-                                    component: AppLink,
-                                    href: links.pages,
-                                    children: 'Edit your pages'
-                                })
-                            ]
-                        }),
-                        (phase === 'stopped' || phase === 'failed' || phase === 'canceled') && /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 1,
-                            children: [
-                                retryRefusal && /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "body2",
-                                    color: "text.secondary",
-                                    children: retryRefusal
-                                }),
-                                /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: {
-                                        xs: 'column',
-                                        sm: 'row'
-                                    },
+                            children: rows.map((row)=>/*#__PURE__*/ _jsxs(Stack, {
+                                    component: "li",
+                                    direction: "row",
                                     spacing: 2,
                                     sx: {
-                                        alignItems: {
-                                            sm: 'center'
-                                        }
+                                        alignItems: 'center'
                                     },
                                     children: [
-                                        canRetry && /*#__PURE__*/ _jsx(Button, {
-                                            variant: "contained",
-                                            disabled: busy || Boolean(retryRefusal),
-                                            onClick: ()=>void tryAgain(),
-                                            children: 'Try again'
+                                        /*#__PURE__*/ _jsx(Box, {
+                                            sx: {
+                                                width: (theme)=>theme.spacing(3),
+                                                display: 'flex',
+                                                justifyContent: 'center'
+                                            },
+                                            children: /*#__PURE__*/ _jsx(RowIcon, {
+                                                state: row.state
+                                            })
                                         }),
-                                        aiSiteStarterFallbackOffered(ready) && user ? /*#__PURE__*/ _jsx(AiSiteStarterFallback, {
-                                            job: ready,
-                                            user: user
-                                        }) : null
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body1",
+                                            color: row.state === 'waiting' ? 'text.secondary' : 'text.primary',
+                                            children: row.label
+                                        })
                                     ]
+                                }, row.id))
+                        })
+                    })
+                ]
+            }),
+            refund && ((_ready_refundedCredits = ready.refundedCredits) != null ? _ready_refundedCredits : 0) > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: refund
+            }) : credits ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: credits
+            }) : null,
+            retrying && restartAnswers && hostId ? /*#__PURE__*/ _jsx(AiSiteStartCard, {
+                hostId: hostId,
+                orgId: orgId != null ? orgId : undefined,
+                orgSlug: orgSlug,
+                host: hostSubdomain,
+                initialAnswers: restartAnswers,
+                startBlank: ()=>setRetrying(false),
+                leave: ()=>setRetrying(false)
+            }) : null,
+            sitePublish && sitePublish.drafts.length > 0 && // The pages the publish left as drafts, each with its plain reason;
+            // Edit your pages is where they are fixed and published.
+            /*#__PURE__*/ _jsxs(Alert, {
+                severity: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            mb: 1
+                        },
+                        children: sitePublish.drafts.length === 1 ? 'This page stayed a draft:' : 'These pages stayed drafts:'
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "ul",
+                        sx: {
+                            m: 0,
+                            pl: 2.5
+                        },
+                        children: sitePublish.drafts.map((draft)=>/*#__PURE__*/ _jsx("li", {
+                                children: /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: `${draft.label}: ${draft.reason}`
                                 })
-                            ]
+                            }, draft.id))
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            mt: 1
+                        },
+                        children: 'Open Edit your pages to fix and publish them.'
+                    })
+                ]
+            }),
+            phase === 'done' && /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    liveUrl ? // The live site, in a tab of its own: the console stays where it is.
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        component: "a",
+                        href: liveUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: 'View your site'
+                    }) : links.view ? /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        component: AppLink,
+                        href: links.view,
+                        children: 'View your site'
+                    }) : null,
+                    links.pages && /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        size: "large",
+                        component: AppLink,
+                        href: links.pages,
+                        children: 'Edit your pages'
+                    })
+                ]
+            }),
+            (phase === 'stopped' || phase === 'failed' || phase === 'canceled') && /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    retryRefusal && /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: retryRefusal
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: {
+                            xs: 'column',
+                            sm: 'row'
+                        },
+                        spacing: 2,
+                        sx: {
+                            alignItems: {
+                                sm: 'center'
+                            }
+                        },
+                        children: [
+                            restartAnswers && hostId && /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                onClick: ()=>setRetrying(true),
+                                children: 'Try again'
+                            }),
+                            canRetry && /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || Boolean(retryRefusal),
+                                onClick: ()=>void tryAgain(),
+                                children: 'Try again'
+                            }),
+                            aiSiteStarterFallbackOffered(ready) && user ? /*#__PURE__*/ _jsx(AiSiteStarterFallback, {
+                                job: ready,
+                                user: user
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            ready.plan && ready.plan.screens.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
+                variant: "outlined",
+                disableGutters: true,
+                sx: {
+                    borderRadius: 2,
+                    '&::before': {
+                        display: 'none'
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(AccordionSummary, {
+                        expandIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mdiChevronDown.path
                         }),
-                        ready.plan && ready.plan.screens.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
-                            variant: "outlined",
-                            disableGutters: true,
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: 'What we’re building'
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(AccordionDetails, {
+                        children: /*#__PURE__*/ _jsx(Stack, {
+                            component: "ul",
+                            spacing: 1.5,
                             sx: {
-                                borderRadius: 2,
-                                '&::before': {
-                                    display: 'none'
-                                }
+                                m: 0,
+                                pl: 2.5
                             },
-                            children: [
-                                /*#__PURE__*/ _jsx(AccordionSummary, {
-                                    expandIcon: /*#__PURE__*/ _jsx(MdiIcon, {
-                                        path: mdiChevronDown.path
-                                    }),
-                                    children: /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "subtitle1",
-                                        children: 'What we’re building'
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(AccordionDetails, {
-                                    children: /*#__PURE__*/ _jsx(Stack, {
-                                        component: "ul",
-                                        spacing: 1.5,
-                                        sx: {
-                                            m: 0,
-                                            pl: 2.5
-                                        },
-                                        children: ready.plan.screens.map((screen, index)=>/*#__PURE__*/ _jsxs(Box, {
-                                                component: "li",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body1",
-                                                        children: `${screen.title} — ${screen.slug}`
-                                                    }),
-                                                    screen.sections.length > 0 && /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body2",
-                                                        color: "text.secondary",
-                                                        children: screen.sections.map((section)=>section.name).join(', ')
-                                                    })
-                                                ]
-                                            }, `${screen.slug}-${index}`))
-                                    })
-                                })
-                            ]
+                            children: ready.plan.screens.map((screen, index)=>/*#__PURE__*/ _jsxs(Box, {
+                                    component: "li",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body1",
+                                            children: `${screen.title} — ${screen.slug}`
+                                        }),
+                                        screen.sections.length > 0 && /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            color: "text.secondary",
+                                            children: screen.sections.map((section)=>section.name).join(', ')
+                                        })
+                                    ]
+                                }, `${screen.slug}-${index}`))
                         })
-                    ]
-                })
-            ]
-        })
+                    })
+                ]
+            })
+        ]
     });
 }
 export default AiSiteBuildPage;