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

package/src/lib/components/ai-site-start-card.component.js

@@ -16,36 +16,176 @@
  */ 'use client';
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { lockdownRefusalText, parseLockdownRefusal } from "@aglyn/aglyn";
+import { lockdownRefusalText, parseLockdownRefusal, PLATFORM_BRAND_NAME } from "@aglyn/aglyn";
+import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
 import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { mdiCheckCircle, mdiCreation, mdiInformationOutline, mdiPageLayoutHeaderFooter } from "@aglyn/shared-data-mdi";
 import { MdiIcon } from "@aglyn/shared-ui-jsx";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
-import { Alert, AppBar, Box, Button, Chip, Container, Dialog, DialogActions, DialogContent, Divider, IconButton, MenuItem, Stack, TextField, Toolbar, Typography } from "@mui/material";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { AI_SITE_PAGES, AI_SITE_SUBMISSION_CHOICES, aiSiteCreditEstimate } from "../model/ai-site-job.js";
+import { Alert, AppBar, Box, Button, Card, CardActionArea, Chip, CircularProgress, Container, Dialog, DialogActions, DialogContent, IconButton, MenuItem, Stack, Step, StepLabel, Stepper, TextField, Toolbar, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { AI_JOB_AUTO_CONFIRM_INPUT, AI_SITE_FREE_PAGES, AI_SITE_FREE_PAGES_NOTE, AI_SITE_SUBMISSION_CHOICES, aiFreeSiteCreditEstimate, aiSiteCreditEstimate, aiSitePagesBand } from "../model/ai-site-job.js";
+import { FREE_AI_TASTE_CREDITS_PER_MONTH } from "../plan-entitlements.js";
 import { AI_SITE_START_ANSWERS, AI_SITE_START_EXAMPLES, AI_SITE_START_TYPES, aiSiteStartBrief, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
+import { AiJobFollow } from "./ai-job-follow.component.js";
+import { aiSiteBuildHref } from "./ai-job-links.js";
+import { publishAiJob } from "./ai-jobs-store.js";
 /** Labels the dialog for a reader, from its own heading. */ const TITLE_ID = 'ai-site-start-title';
-export function AiSiteStartCard({ hostId, orgId, startBlank }) {
+/**
+ * The takeover's surface, for its paper, its bar and its footer alike: the
+ * console page's own background (AGL-3596). The paper sits at elevation 0,
+ * which is what keeps MUI's dark-mode elevation overlay off it.
+ */ export const AI_SITE_START_SURFACE_SX = {
+    bgcolor: 'background.default'
+};
+/** The two steps, as the indicator under the header names them. */ const STEP_LABELS = [
+    'Choose',
+    'Describe'
+];
+/** The soft round badge an icon sits in, in its accent's tint. */ function IconBadge({ accent, children }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        "aria-hidden": true,
+        sx: (theme)=>({
+                width: theme.spacing(9),
+                height: theme.spacing(9),
+                borderRadius: '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bgcolor: alpha(theme.palette[accent].main, theme.palette.mode === 'dark' ? 0.24 : 0.12),
+                color: `${accent}.main`,
+                fontSize: theme.spacing(5.5)
+            }),
+        children: children
+    });
+}
+/**
+ * One way to start, as a card the whole of which is the button. Its accessible
+ * name is its title; its description describes it.
+ */ function ChoiceCard({ accent, icon, iconId, title, description, busy = false, onChoose, children }) {
+    const id = useId();
+    return /*#__PURE__*/ _jsx(Card, {
+        variant: "outlined",
+        sx: (theme)=>({
+                borderRadius: 2,
+                height: '100%',
+                transition: theme.transitions.create([
+                    'border-color',
+                    'box-shadow',
+                    'transform'
+                ], {
+                    duration: theme.transitions.duration.shorter
+                }),
+                '&:hover, &:focus-within': {
+                    borderColor: `${accent}.main`,
+                    boxShadow: theme.shadows[4],
+                    transform: `translateY(-${theme.spacing(0.25)})`
+                },
+                '@media (prefers-reduced-motion: reduce)': {
+                    transition: 'none',
+                    '&:hover, &:focus-within': {
+                        transform: 'none'
+                    }
+                }
+            }),
+        children: /*#__PURE__*/ _jsx(CardActionArea, {
+            onClick: onChoose,
+            disabled: busy,
+            "aria-labelledby": `${id}-title`,
+            "aria-describedby": `${id}-description`,
+            "aria-busy": busy || undefined,
+            sx: {
+                height: '100%',
+                p: {
+                    xs: 3,
+                    sm: 4
+                }
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                sx: {
+                    alignItems: 'center',
+                    textAlign: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(IconBadge, {
+                        accent: accent,
+                        children: busy ? /*#__PURE__*/ _jsx(CircularProgress, {
+                            size: "1em",
+                            color: accent,
+                            "aria-label": `${title}…`
+                        }) : /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: icon,
+                            "data-icon": iconId,
+                            "aria-hidden": true
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        id: `${id}-title`,
+                        variant: "h6",
+                        component: "h2",
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        id: `${id}-description`,
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: description
+                    }),
+                    children
+                ]
+            })
+        })
+    });
+}
+/** A small label above a group of questions. */ function SectionLabel({ children }) {
+    return /*#__PURE__*/ _jsx(Typography, {
+        variant: "overline",
+        color: "text.secondary",
+        component: "h2",
+        sx: {
+            display: 'block'
+        },
+        children: children
+    });
+}
+export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave }) {
     var _ref;
     const { data: user } = useUser();
+    const router = useRouter();
     // Held in a ref so a request reads WHO is signed in, never the identity of
     // the object that says so.
     const userRef = useRef(user);
     userRef.current = user;
     const uid = (_ref = user == null ? void 0 : user.uid) != null ? _ref : null;
     const [verdict, setVerdict] = useState('checking');
+    const [step, setStep] = useState('choose');
     const [answers, setAnswers] = useState(AI_SITE_START_ANSWERS);
     const [busy, setBusy] = useState(false);
+    // The starter card's own busy state while `startBlank` runs (AGL-3594).
+    const [startingStarter, setStartingStarter] = useState(false);
     const [notice, setNotice] = useState(null);
-    const [started, setStarted] = useState(false);
+    /** The site job "Plan my site" started, as the create door answered with it. */ const [started, setStarted] = useState(null);
+    // The Free taste's page band (AGL-3594), read off the verdict request.
+    const [freeTaste, setFreeTaste] = useState(false);
     useEffect(()=>{
         if (!orgId || !uid) return;
         let active = true;
         void (async ()=>{
             try {
                 const response = await authorizedFetch(userRef.current, `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=1`);
+                const payload = response.ok ? await response.json().catch(()=>null) : null;
                 if (active) {
+                    if ((payload == null ? void 0 : payload.freeTaste) === true) {
+                        setFreeTaste(true);
+                        setAnswers((current)=>_extends({}, current, {
+                                pages: AI_SITE_FREE_PAGES.max,
+                                welcomeEmail: false
+                            }));
+                    }
                     setVerdict(response.status === 404 || response.status === 403 ? 'hidden' : 'ready');
                 }
             } catch (unused) {
@@ -60,12 +200,18 @@ export function AiSiteStartCard({ hostId, orgId, startBlank }) {
         uid
     ]);
     const answer = useCallback((patch)=>setAnswers((current)=>_extends({}, current, patch)), []);
-    const refusal = aiSiteStartRefusal(answers);
+    const refusal = aiSiteStartRefusal(answers, {
+        freeTaste
+    });
+    const band = aiSitePagesBand(freeTaste);
     const plan = useCallback(async ()=>{
-        if (!orgId || aiSiteStartRefusal(answers)) return;
+        if (!orgId || aiSiteStartRefusal(answers, {
+            freeTaste
+        })) return;
         setBusy(true);
         setNotice(null);
         try {
+            var _ref;
             const response = await authorizedFetch(userRef.current, '/api/ai/jobs', {
                 method: 'POST',
                 headers: {
@@ -76,17 +222,38 @@ export function AiSiteStartCard({ hostId, orgId, startBlank }) {
                     hostId,
                     kind: 'site',
                     brief: aiSiteStartBrief(answers),
-                    inputs: aiSiteStartInputs(answers)
+                    // The guided start confirms its own plan (AGL-3594): the build
+                    // follows the plan with no approval to make.
+                    inputs: _extends({}, aiSiteStartInputs(answers), {
+                        [AI_JOB_AUTO_CONFIRM_INPUT]: true
+                    })
                 })
             });
             const payload = await response.json().catch(()=>null);
             if (!response.ok) {
-                var _ref;
+                var _ref1;
                 const locked = parseLockdownRefusal(response.status, payload);
-                setNotice(locked ? lockdownRefusalText(locked) : String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The site could not be started. Try again.'));
+                setNotice(locked ? lockdownRefusalText(locked) : String((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : 'The site could not be started. Try again.'));
+                return;
+            }
+            const created = (_ref = payload == null ? void 0 : payload.job) != null ? _ref : null;
+            if (!created) {
+                setNotice('The site could not be started. Try again.');
                 return;
             }
-            setStarted(true);
+            // The indicator and the launcher count it from the moment it exists.
+            publishAiJob(created);
+            // Where the next step is (AGL-3594): the site's "Building your site"
+            // page for this job. The zone closes without the starter first, so the
+            // setup page does not ask again behind it.
+            const href = aiSiteBuildHref(orgSlug, host, created.id);
+            if (href) {
+                ;
+                (leave != null ? leave : ()=>undefined)();
+                router.push(href);
+                return;
+            }
+            setStarted(created);
         } catch (unused) {
             setNotice('The site could not be started. Try again.');
         } finally{
@@ -95,28 +262,73 @@ export function AiSiteStartCard({ hostId, orgId, startBlank }) {
     }, [
         orgId,
         hostId,
-        answers
+        answers,
+        freeTaste,
+        orgSlug,
+        host,
+        leave,
+        router
+    ]);
+    const chooseStarter = useCallback(()=>{
+        setStartingStarter(true);
+        trackEvent('site_start_choice', {
+            choice: 'starter'
+        });
+        startBlank();
+    }, [
+        startBlank
     ]);
+    const chooseAi = useCallback(()=>{
+        trackEvent('site_start_choice', {
+            choice: 'ai'
+        });
+        setStep('describe');
+    }, []);
     if (verdict !== 'ready') return null;
-    const estimate = aiSiteCreditEstimate(answers.pages, {
+    // Before a job is started every way out is the blank site, which writes the
+    // starter (AGL-3594); after, it only closes — the job builds the site.
+    const exit = started ? leave != null ? leave : startBlank : startBlank;
+    const estimate = freeTaste ? aiFreeSiteCreditEstimate(answers.pages) : aiSiteCreditEstimate(answers.pages, {
         welcomeEmail: answers.welcomeEmail
     });
+    const estimateText = freeTaste ? `Up to about ${estimate.toLocaleString('en-US')} of the ${FREE_AI_TASTE_CREDITS_PER_MONTH} AI credits your Free workspace has each month` : `About ${estimate.toLocaleString('en-US')} credits, estimated`;
+    const choosing = step === 'choose' && !started;
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: true,
         fullScreen: true,
-        onClose: startBlank,
+        onClose: exit,
         "aria-labelledby": TITLE_ID,
+        // The console's own page surface, in both modes. A Dialog's paper sits
+        // at elevation 24 by default, and in dark mode MUI lightens an elevated
+        // paper with a white overlay, which turned the whole takeover a
+        // washed-out gray; the overlay is for floating surfaces, and this one
+        // fills the screen, so its paper is flat.
+        slotProps: {
+            paper: {
+                elevation: 0,
+                sx: AI_SITE_START_SURFACE_SX
+            }
+        },
         children: [
             /*#__PURE__*/ _jsx(AppBar, {
                 position: "relative",
-                color: "surface",
+                color: "inherit",
+                elevation: 0,
                 enableColorOnDark: true,
+                sx: _extends({}, AI_SITE_START_SURFACE_SX, {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                }),
                 children: /*#__PURE__*/ _jsxs(Toolbar, {
+                    variant: "dense",
+                    sx: {
+                        gap: 1
+                    },
                     children: [
                         /*#__PURE__*/ _jsx(IconButton, {
                             edge: "start",
                             color: "inherit",
-                            onClick: startBlank,
+                            onClick: exit,
                             "aria-label": "Close the guided start",
                             children: /*#__PURE__*/ _jsx(MdiIcon, {
                                 path: ICON_VARIANT_CLOSE.path
@@ -124,190 +336,336 @@ export function AiSiteStartCard({ hostId, orgId, startBlank }) {
                         }),
                         /*#__PURE__*/ _jsx(Typography, {
                             id: TITLE_ID,
-                            variant: "h6",
+                            variant: "subtitle1",
                             component: "div",
                             noWrap: true,
                             sx: {
                                 textOverflow: 'ellipsis',
-                                ml: 2,
                                 flex: 1
                             },
-                            children: 'Start this site with AI'
-                        }),
-                        /*#__PURE__*/ _jsx(Divider, {
-                            sx: {
-                                height: 28,
-                                m: 0.5
-                            },
-                            orientation: "vertical"
+                            children: 'Start your site'
                         }),
                         /*#__PURE__*/ _jsx(Button, {
                             color: "inherit",
-                            onClick: startBlank,
-                            children: started ? 'Close' : 'Skip and start blank'
+                            onClick: exit,
+                            "aria-label": started ? 'Close' : 'Skip and start blank',
+                            children: started ? 'Close' : 'Skip'
                         })
                     ]
                 })
             }),
             /*#__PURE__*/ _jsx(DialogContent, {
+                sx: {
+                    px: {
+                        xs: 2,
+                        sm: 3
+                    }
+                },
                 children: /*#__PURE__*/ _jsx(Container, {
-                    maxWidth: "md",
+                    maxWidth: choosing ? 'md' : 'sm',
                     disableGutters: true,
                     sx: {
-                        py: 2
+                        py: {
+                            xs: 3,
+                            sm: 5
+                        }
                     },
                     children: /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: 3,
+                        spacing: 4,
                         children: [
-                            /*#__PURE__*/ _jsx(Typography, {
-                                variant: "body2",
-                                color: "text.secondary",
-                                children: 'Answer a few questions and AI plans the whole site — its pages, its ' + 'navigation, its layout and a contact form. Nothing is built until you ' + 'confirm the plan, and everything it builds is an unpublished draft.'
+                            /*#__PURE__*/ _jsx(Stepper, {
+                                activeStep: choosing ? 0 : 1,
+                                "aria-label": choosing ? 'Step 1 of 2' : 'Step 2 of 2',
+                                sx: {
+                                    maxWidth: (theme)=>theme.spacing(40),
+                                    width: '100%',
+                                    mx: 'auto'
+                                },
+                                children: STEP_LABELS.map((label)=>/*#__PURE__*/ _jsx(Step, {
+                                        children: /*#__PURE__*/ _jsx(StepLabel, {
+                                            children: label
+                                        })
+                                    }, label))
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 1,
+                                sx: {
+                                    textAlign: choosing ? 'center' : 'left'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "h4",
+                                        component: "h1",
+                                        children: choosing ? 'How do you want to start?' : 'Tell us about your site'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body1",
+                                        color: "text.secondary",
+                                        children: choosing ? 'You can change everything later.' : `A few answers and ${PLATFORM_BRAND_NAME} AI plans and writes your pages, then publishes your site.`
+                                    })
+                                ]
                             }),
                             notice && /*#__PURE__*/ _jsx(Alert, {
                                 severity: "info",
                                 children: notice
                             }),
-                            started ? /*#__PURE__*/ _jsx(Alert, {
-                                severity: "success",
-                                children: 'Your site is being planned. Open AI jobs in the Assist panel to read the plan ' + 'and confirm it — nothing is built, and nothing is published, until you do.'
+                            choosing ? /*#__PURE__*/ _jsxs(Box, {
+                                sx: {
+                                    display: 'grid',
+                                    gridTemplateColumns: {
+                                        xs: '1fr',
+                                        sm: '1fr 1fr'
+                                    },
+                                    gap: 3
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(ChoiceCard, {
+                                        accent: "secondary",
+                                        icon: mdiPageLayoutHeaderFooter.path,
+                                        iconId: "page-layout-header-footer",
+                                        title: "Start from the starter site",
+                                        description: "A ready-made home page with a header, footer and contact form you can edit.",
+                                        busy: startingStarter,
+                                        onChoose: chooseStarter
+                                    }),
+                                    /*#__PURE__*/ _jsxs(ChoiceCard, {
+                                        accent: "primary",
+                                        icon: mdiCreation.path,
+                                        iconId: "creation",
+                                        title: "Start with AI",
+                                        description: `Answer a few questions and ${PLATFORM_BRAND_NAME} AI plans your pages.`,
+                                        onChoose: chooseAi,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Chip, {
+                                                size: "small",
+                                                color: "primary",
+                                                label: "Recommended"
+                                            }),
+                                            freeTaste && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                children: `Up to ${AI_SITE_FREE_PAGES.max} pages on the Free plan`
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }) : started && orgId ? /*#__PURE__*/ _jsx(Card, {
+                                variant: "outlined",
+                                sx: {
+                                    borderRadius: 2,
+                                    p: {
+                                        xs: 2,
+                                        sm: 3
+                                    }
+                                },
+                                children: /*#__PURE__*/ _jsx(AiJobFollow, {
+                                    job: started,
+                                    orgId: orgId,
+                                    orgSlug: orgSlug,
+                                    user: user,
+                                    intro: 'Your site is being planned. Review the plan here or in AI jobs, and confirm ' + 'it to build — nothing is built, and nothing is published, until you do.',
+                                    // Full screen: AI jobs opens in the panel this dialog covers.
+                                    onOpenJobs: exit
+                                })
                             }) : /*#__PURE__*/ _jsxs(_Fragment, {
                                 children: [
-                                    /*#__PURE__*/ _jsxs(Box, {
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 2,
+                                        component: "section",
+                                        "aria-label": "Your business",
                                         children: [
+                                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                                children: 'Your business'
+                                            }),
                                             /*#__PURE__*/ _jsx(TextField, {
                                                 fullWidth: true,
+                                                required: true,
                                                 label: "What kind of site are you creating?",
                                                 placeholder: "a neighborhood dog groomer that takes bookings",
                                                 value: answers.siteType,
                                                 onChange: (event)=>answer({
                                                         siteType: event.target.value
-                                                    })
+                                                    }),
+                                                helperText: "A few words is enough, or pick one below."
                                             }),
-                                            /*#__PURE__*/ _jsx(Stack, {
-                                                direction: "row",
-                                                spacing: 1,
+                                            /*#__PURE__*/ _jsx(Box, {
                                                 sx: {
+                                                    display: 'flex',
                                                     flexWrap: 'wrap',
-                                                    mt: 1,
-                                                    rowGap: 1
+                                                    gap: 1
                                                 },
                                                 children: AI_SITE_START_TYPES.map((type)=>/*#__PURE__*/ _jsx(Chip, {
                                                         label: type,
                                                         size: "small",
+                                                        color: answers.siteType === type ? 'primary' : 'default',
                                                         variant: answers.siteType === type ? 'filled' : 'outlined',
                                                         onClick: ()=>answer({
                                                                 siteType: type
                                                             })
                                                     }, type))
+                                            }),
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                fullWidth: true,
+                                                label: "Who is it for?",
+                                                placeholder: "local dog owners who want a regular groom booked online",
+                                                value: answers.audience,
+                                                onChange: (event)=>answer({
+                                                        audience: event.target.value
+                                                    }),
+                                                helperText: "Optional. It narrows who the pages are written for."
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        fullWidth: true,
-                                        label: "Who is it for?",
-                                        placeholder: "local dog owners who want a regular groom booked online",
-                                        value: answers.audience,
-                                        onChange: (event)=>answer({
-                                                audience: event.target.value
-                                            }),
-                                        helperText: "Optional. It narrows who the pages are written for."
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Box, {
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 2,
+                                        component: "section",
+                                        "aria-label": "Look & layout",
                                         children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "subtitle2",
-                                                gutterBottom: true,
-                                                children: 'Which of these do you like?'
+                                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                                children: 'Look & layout'
                                             }),
                                             /*#__PURE__*/ _jsx(Typography, {
                                                 variant: "body2",
                                                 color: "text.secondary",
-                                                gutterBottom: true,
                                                 children: 'Optional. Picking one steers the shape of the site, not its words.'
                                             }),
-                                            /*#__PURE__*/ _jsx(Stack, {
-                                                direction: "row",
-                                                spacing: 1,
+                                            /*#__PURE__*/ _jsx(Box, {
                                                 sx: {
-                                                    flexWrap: 'wrap',
-                                                    rowGap: 1
+                                                    display: 'grid',
+                                                    gridTemplateColumns: {
+                                                        xs: '1fr',
+                                                        sm: '1fr 1fr'
+                                                    },
+                                                    gap: 2
                                                 },
-                                                children: AI_SITE_START_EXAMPLES.map((example)=>/*#__PURE__*/ _jsx(Chip, {
-                                                        label: `${example.label} — ${example.blurb}`,
-                                                        variant: answers.example === example.id ? 'filled' : 'outlined',
-                                                        onClick: ()=>answer({
-                                                                example: answers.example === example.id ? null : example.id
+                                                children: AI_SITE_START_EXAMPLES.map((example)=>{
+                                                    const selected = answers.example === example.id;
+                                                    return /*#__PURE__*/ _jsx(Card, {
+                                                        variant: "outlined",
+                                                        sx: (theme)=>({
+                                                                borderRadius: 2,
+                                                                borderColor: selected ? 'primary.main' : 'divider',
+                                                                bgcolor: selected ? alpha(theme.palette.primary.main, 0.08) : 'transparent'
+                                                            }),
+                                                        children: /*#__PURE__*/ _jsx(CardActionArea, {
+                                                            "aria-pressed": selected,
+                                                            "aria-label": `${example.label} — ${example.blurb}`,
+                                                            onClick: ()=>answer({
+                                                                    example: selected ? null : example.id
+                                                                }),
+                                                            sx: {
+                                                                p: 2,
+                                                                height: '100%'
+                                                            },
+                                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                                direction: "row",
+                                                                spacing: 1.5,
+                                                                sx: {
+                                                                    alignItems: 'flex-start'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsxs(Box, {
+                                                                        sx: {
+                                                                            flex: 1,
+                                                                            minWidth: 0
+                                                                        },
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                                variant: "subtitle2",
+                                                                                children: example.label
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                                variant: "body2",
+                                                                                color: "text.secondary",
+                                                                                children: example.blurb
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    selected && /*#__PURE__*/ _jsx(Box, {
+                                                                        sx: {
+                                                                            color: 'primary.main',
+                                                                            display: 'flex'
+                                                                        },
+                                                                        "aria-hidden": true,
+                                                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                            path: mdiCheckCircle.path
+                                                                        })
+                                                                    })
+                                                                ]
                                                             })
-                                                    }, example.id))
+                                                        })
+                                                    }, example.id);
+                                                })
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        select: true,
-                                        fullWidth: true,
-                                        label: "Where do form submissions go?",
-                                        value: answers.submissions,
-                                        onChange: (event)=>answer({
-                                                submissions: event.target.value
-                                            }),
-                                        helperText: "You can change this on the form itself afterwards.",
-                                        children: AI_SITE_SUBMISSION_CHOICES.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                value: option.id,
-                                                children: `${option.label} — ${option.blurb}`
-                                            }, option.id))
-                                    }),
                                     /*#__PURE__*/ _jsxs(Stack, {
-                                        direction: {
-                                            xs: 'column',
-                                            sm: 'row'
-                                        },
                                         spacing: 2,
+                                        component: "section",
+                                        "aria-label": "Details",
                                         children: [
+                                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                                children: 'Details'
+                                            }),
                                             /*#__PURE__*/ _jsx(TextField, {
                                                 select: true,
-                                                label: "Pages",
-                                                value: answers.pages,
+                                                fullWidth: true,
+                                                label: "Where do form submissions go?",
+                                                value: answers.submissions,
                                                 onChange: (event)=>answer({
-                                                        pages: Number(event.target.value)
+                                                        submissions: event.target.value
                                                     }),
-                                                sx: {
-                                                    minWidth: 160
-                                                },
-                                                children: Array.from({
-                                                    length: AI_SITE_PAGES.max - AI_SITE_PAGES.min + 1
-                                                }, (_, index)=>AI_SITE_PAGES.min + index).map((count)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                        value: count,
-                                                        children: count
-                                                    }, count))
+                                                helperText: "You can change this on the form itself afterwards.",
+                                                children: AI_SITE_SUBMISSION_CHOICES.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: option.id,
+                                                        children: `${option.label} — ${option.blurb}`
+                                                    }, option.id))
                                             }),
-                                            /*#__PURE__*/ _jsxs(TextField, {
-                                                select: true,
-                                                label: "Welcome email",
-                                                value: answers.welcomeEmail ? 'yes' : 'no',
-                                                onChange: (event)=>answer({
-                                                        welcomeEmail: event.target.value === 'yes'
-                                                    }),
-                                                sx: {
-                                                    minWidth: 160
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                direction: {
+                                                    xs: 'column',
+                                                    sm: 'row'
                                                 },
+                                                spacing: 2,
                                                 children: [
-                                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                                        value: "yes",
-                                                        children: 'Draft one'
+                                                    /*#__PURE__*/ _jsx(TextField, {
+                                                        select: true,
+                                                        fullWidth: true,
+                                                        label: "Pages",
+                                                        value: answers.pages,
+                                                        onChange: (event)=>answer({
+                                                                pages: Number(event.target.value)
+                                                            }),
+                                                        helperText: freeTaste ? AI_SITE_FREE_PAGES_NOTE : undefined,
+                                                        children: Array.from({
+                                                            length: band.max - band.min + 1
+                                                        }, (_, index)=>band.min + index).map((count)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: count,
+                                                                children: count
+                                                            }, count))
                                                     }),
-                                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                                        value: "no",
-                                                        children: 'No'
+                                                    !freeTaste && /*#__PURE__*/ _jsxs(TextField, {
+                                                        select: true,
+                                                        fullWidth: true,
+                                                        label: "Welcome email",
+                                                        value: answers.welcomeEmail ? 'yes' : 'no',
+                                                        onChange: (event)=>answer({
+                                                                welcomeEmail: event.target.value === 'yes'
+                                                            }),
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "yes",
+                                                                children: 'Draft one'
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "no",
+                                                                children: 'No'
+                                                            })
+                                                        ]
                                                     })
                                                 ]
                                             })
                                         ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "body2",
-                                        color: "text.secondary",
-                                        children: `About ${estimate.toLocaleString('en-US')} credits, estimated. What it really ` + 'costs is what each step spends, and you can watch that add up while it runs.'
                                     })
                                 ]
                             })
@@ -315,27 +673,70 @@ export function AiSiteStartCard({ hostId, orgId, startBlank }) {
                     })
                 })
             }),
-            !started && /* Wraps, because the reason and the button together are wider than a
-           phone: on one line the reason would push the button off the edge. */ /*#__PURE__*/ _jsxs(DialogActions, {
-                sx: {
-                    px: 3,
+            step === 'describe' && !started && /* The footer stays put while the questions scroll. It wraps, because
+           the estimate, the reason and the buttons are wider than a phone. */ /*#__PURE__*/ _jsxs(DialogActions, {
+                sx: _extends({
+                    px: {
+                        xs: 2,
+                        sm: 3
+                    },
                     py: 2,
                     flexWrap: 'wrap',
-                    rowGap: 1
-                },
+                    rowGap: 1,
+                    columnGap: 2,
+                    borderTop: 1,
+                    borderColor: 'divider'
+                }, AI_SITE_START_SURFACE_SX),
                 children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 0.5,
+                        sx: {
+                            alignItems: 'center',
+                            mr: 'auto',
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: `${estimateText}.`
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "What it really costs is what each step spends, and you can watch that add up while it runs.",
+                                children: /*#__PURE__*/ _jsx(Box, {
+                                    component: "span",
+                                    tabIndex: 0,
+                                    "aria-label": "How the estimate works",
+                                    sx: {
+                                        display: 'inline-flex',
+                                        color: 'text.secondary'
+                                    },
+                                    children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                        path: mdiInformationOutline.path,
+                                        fontSize: "small"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
                     refusal && /*#__PURE__*/ _jsx(Typography, {
                         variant: "body2",
                         color: "text.secondary",
-                        sx: {
-                            mr: 'auto'
-                        },
                         children: refusal
                     }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setStep('choose'),
+                        children: 'Back'
+                    }),
                     /*#__PURE__*/ _jsx(Button, {
                         variant: "contained",
+                        size: "large",
                         disabled: busy || Boolean(refusal),
                         onClick: plan,
+                        startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mdiCreation.path
+                        }),
                         children: busy ? 'Starting…' : 'Plan my site'
                     })
                 ]