@aglyn/plugins-ai 1.0.0-beta.231 → 1.0.0-beta.232

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

@@ -0,0 +1,187 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { aiAddonName, pluginDocsHelp } from "@aglyn/aglyn";
+import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, useFirestoreCollection } from "@aglyn/tenant-feature-instance";
+import { Button, Divider, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, limit, query, writeBatch } from "firebase/firestore";
+import { useCallback, useMemo, useState } from "react";
+import { AI_SITE_MEMORY_MAX, AI_SITE_MEMORY_SUBCOLLECTION, aiSitePreferenceOf } from "../model/ai-site-memory.js";
+/** The configured brand's AI, never ours by literal (AGL-2153). */ const AI_NAME = aiAddonName();
+/** A close mark, drawn inline so the card ships no icon set. */ const ForgetIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        "aria-hidden": true,
+        focusable: "false",
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        })
+    });
+/**
+ * What Aglyn AI learned from this site's edits (AGL-3661), on Setup →
+ * Business profile: the short preferences the assist edit route distilled
+ * from the edits the owner applied, which every later AI job for the site
+ * reads. The owner reads them here and forgets one, or all of them.
+ *
+ * Read and deleted on the client: the rules let a site's members read and
+ * delete `aiMemory` and refuse them a create or an update, because a client
+ * write would put words of its choosing into later prompts.
+ */ export function AiSiteMemoryCard(props) {
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const [busy, setBusy] = useState(false);
+    const { data, status } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, AI_SITE_MEMORY_SUBCOLLECTION), limit(AI_SITE_MEMORY_MAX * 2)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const preferences = useMemo(()=>data.map((row)=>aiSitePreferenceOf(row.$id, row)).filter((row)=>row !== null).sort((a, b)=>b.count - a.count || b.lastSeenAtMs - a.lastSeenAtMs), [
+        data
+    ]);
+    const forget = useCallback(async (preference)=>{
+        setBusy(true);
+        try {
+            await deleteDoc(doc(firestore, 'hosts', hostId, AI_SITE_MEMORY_SUBCOLLECTION, preference.id));
+            enqueueSnackbar(`${AI_NAME} will no longer use that preference`, {
+                variant: 'success'
+            });
+        } catch (error) {
+            console.error('ai memory forget failed', error);
+            enqueueSnackbar('That preference was not removed. Try again.', {
+                variant: 'error'
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        enqueueSnackbar,
+        firestore,
+        hostId
+    ]);
+    const forgetAll = useCallback(async ()=>{
+        const confirmed = await confirm({
+            title: `Forget everything ${AI_NAME} learned here?`,
+            description: `Later AI jobs for this site stop using these preferences. ${AI_NAME} learns again from the edits you apply next.`,
+            confirmationText: 'Forget all',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        }).then(()=>true).catch(()=>false);
+        if (!confirmed) return;
+        setBusy(true);
+        try {
+            const batch = writeBatch(firestore);
+            for (const preference of preferences){
+                batch.delete(doc(firestore, 'hosts', hostId, AI_SITE_MEMORY_SUBCOLLECTION, preference.id));
+            }
+            await batch.commit();
+            enqueueSnackbar(`${AI_NAME} forgot what it learned on this site`, {
+                variant: 'success'
+            });
+        } catch (error) {
+            console.error('ai memory clear failed', error);
+            enqueueSnackbar('The preferences were not cleared. Try again.', {
+                variant: 'error'
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        confirm,
+        enqueueSnackbar,
+        firestore,
+        hostId,
+        preferences
+    ]);
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: `What ${AI_NAME} learned`,
+        subheader: "Short preferences from the edits you applied with Assist. Every AI job for this site reads them.",
+        help: pluginDocsHelp('aiBusinessProfile', {
+            anchor: '#what-aglyn-ai-learned',
+            excerpt: `Preferences ${AI_NAME} took from the edits you applied. Forget one, or all, at any time.`
+        }),
+        actions: preferences.length ? /*#__PURE__*/ _jsx(Button, {
+            color: "error",
+            disabled: busy,
+            onClick: ()=>void forgetAll(),
+            children: 'Forget all'
+        }) : undefined,
+        contentGutterX: true,
+        contentGutterY: true,
+        children: preferences.length ? /*#__PURE__*/ _jsx(Stack, {
+            divider: /*#__PURE__*/ _jsx(Divider, {
+                flexItem: true
+            }),
+            "data-testid": "ai-site-memory",
+            children: preferences.map((preference)=>/*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 2,
+                    sx: {
+                        alignItems: 'center',
+                        py: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            sx: {
+                                flex: 1,
+                                minWidth: 0
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: preference.text
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: preference.count === 1 ? 'Seen in 1 applied edit' : `Seen in ${preference.count} applied edits`
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Tooltip, {
+                            title: "Forget this",
+                            children: /*#__PURE__*/ _jsx("span", {
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    "aria-label": `Forget “${preference.text}”`,
+                                    disabled: busy,
+                                    onClick: ()=>void forget(preference),
+                                    children: /*#__PURE__*/ _jsx(ForgetIcon, {})
+                                })
+                            })
+                        })
+                    ]
+                }, preference.id))
+        }) : /*#__PURE__*/ _jsx(EmptyStateComponent, {
+            compact: true,
+            label: status === 'loading' ? 'Loading…' : 'Nothing learned yet',
+            description: status === 'loading' ? undefined : 'When you apply an Assist edit that shows a preference, such as shorter copy or no emoji, it appears here.'
+        })
+    });
+}
+AiSiteMemoryCard.displayName = 'AiSiteMemoryCard';
+export default AiSiteMemoryCard;
+
+//# sourceMappingURL=ai-site-memory-card.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/ai/src/lib/components/ai-site-memory-card.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\n'use client'\n\nimport { aiAddonName, pluginDocsHelp } from '@aglyn/aglyn'\nimport type { ConsoleHostBusinessProfileZoneProps } from '@aglyn/aglyn/plugin-manager/feature-plugins'\nimport { CardDisplay, useConfirmationContext } from '@aglyn/shared-ui-jsx'\nimport EmptyStateComponent from '@aglyn/shared-ui-jsx/components/empty-state.component'\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { useFirestore, useFirestoreCollection } from '@aglyn/tenant-feature-instance'\nimport { Button, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material'\nimport { collection, deleteDoc, doc, limit, query, writeBatch } from 'firebase/firestore'\nimport { useCallback, useMemo, useState } from 'react'\nimport {\n  AI_SITE_MEMORY_MAX,\n  AI_SITE_MEMORY_SUBCOLLECTION,\n  aiSitePreferenceOf,\n  type AiSitePreference,\n} from '../model/ai-site-memory'\n\n/** The configured brand's AI, never ours by literal (AGL-2153). */\nconst AI_NAME = aiAddonName()\n\n/** A close mark, drawn inline so the card ships no icon set. */\nconst ForgetIcon = () => (\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n    />\n  </svg>\n)\n\n/**\n * What Aglyn AI learned from this site's edits (AGL-3661), on Setup →\n * Business profile: the short preferences the assist edit route distilled\n * from the edits the owner applied, which every later AI job for the site\n * reads. The owner reads them here and forgets one, or all of them.\n *\n * Read and deleted on the client: the rules let a site's members read and\n * delete `aiMemory` and refuse them a create or an update, because a client\n * write would put words of its choosing into later prompts.\n */\nexport function AiSiteMemoryCard(props: ConsoleHostBusinessProfileZoneProps) {\n  const { hostId } = props\n  const firestore = useFirestore()\n  const { enqueueSnackbar } = useSnackbar()\n  const { confirm } = useConfirmationContext()\n  const [busy, setBusy] = useState(false)\n  const { data, status } = useFirestoreCollection<Record<string, unknown> & { $id: string }>(\n    () => query(collection(firestore, 'hosts', hostId, AI_SITE_MEMORY_SUBCOLLECTION), limit(AI_SITE_MEMORY_MAX * 2)),\n    [firestore, hostId],\n    { idField: '$id' },\n  )\n  const preferences = useMemo(\n    () =>\n      data\n        .map((row) => aiSitePreferenceOf(row.$id, row))\n        .filter((row): row is AiSitePreference => row !== null)\n        .sort((a, b) => b.count - a.count || b.lastSeenAtMs - a.lastSeenAtMs),\n    [data],\n  )\n\n  const forget = useCallback(\n    async (preference: AiSitePreference) => {\n      setBusy(true)\n      try {\n        await deleteDoc(doc(firestore, 'hosts', hostId, AI_SITE_MEMORY_SUBCOLLECTION, preference.id))\n        enqueueSnackbar(`${AI_NAME} will no longer use that preference`, { variant: 'success' })\n      } catch (error) {\n        console.error('ai memory forget failed', error)\n        enqueueSnackbar('That preference was not removed. Try again.', { variant: 'error' })\n      } finally {\n        setBusy(false)\n      }\n    },\n    [enqueueSnackbar, firestore, hostId],\n  )\n\n  const forgetAll = useCallback(async () => {\n    const confirmed = await confirm({\n      title: `Forget everything ${AI_NAME} learned here?`,\n      description:\n        `Later AI jobs for this site stop using these preferences. ${AI_NAME} learns again from the edits you apply next.`,\n      confirmationText: 'Forget all',\n      confirmationButtonProps: { color: 'error' },\n    })\n      .then(() => true)\n      .catch(() => false)\n    if (!confirmed) return\n    setBusy(true)\n    try {\n      const batch = writeBatch(firestore)\n      for (const preference of preferences) {\n        batch.delete(doc(firestore, 'hosts', hostId, AI_SITE_MEMORY_SUBCOLLECTION, preference.id))\n      }\n      await batch.commit()\n      enqueueSnackbar(`${AI_NAME} forgot what it learned on this site`, { variant: 'success' })\n    } catch (error) {\n      console.error('ai memory clear failed', error)\n      enqueueSnackbar('The preferences were not cleared. Try again.', { variant: 'error' })\n    } finally {\n      setBusy(false)\n    }\n  }, [confirm, enqueueSnackbar, firestore, hostId, preferences])\n\n  return (\n    <CardDisplay\n      header={`What ${AI_NAME} learned`}\n      subheader=\"Short preferences from the edits you applied with Assist. Every AI job for this site reads them.\"\n      help={pluginDocsHelp('aiBusinessProfile', {\n        anchor: '#what-aglyn-ai-learned',\n        excerpt: `Preferences ${AI_NAME} took from the edits you applied. Forget one, or all, at any time.`,\n      })}\n      actions={\n        preferences.length ? (\n          <Button color=\"error\" disabled={busy} onClick={() => void forgetAll()}>\n            {'Forget all'}\n          </Button>\n        ) : undefined\n      }\n      contentGutterX\n      contentGutterY\n    >\n      {preferences.length ? (\n        <Stack divider={<Divider flexItem />} data-testid=\"ai-site-memory\">\n          {preferences.map((preference) => (\n            <Stack key={preference.id} direction=\"row\" spacing={2} sx={{ alignItems: 'center', py: 1 }}>\n              <Stack sx={{ flex: 1, minWidth: 0 }}>\n                <Typography variant=\"body2\">{preference.text}</Typography>\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                  {preference.count === 1 ? 'Seen in 1 applied edit' : `Seen in ${preference.count} applied edits`}\n                </Typography>\n              </Stack>\n              <Tooltip title=\"Forget this\">\n                <span>\n                  <IconButton\n                    size=\"small\"\n                    aria-label={`Forget “${preference.text}”`}\n                    disabled={busy}\n                    onClick={() => void forget(preference)}\n                  >\n                    <ForgetIcon />\n                  </IconButton>\n                </span>\n              </Tooltip>\n            </Stack>\n          ))}\n        </Stack>\n      ) : (\n        <EmptyStateComponent\n          compact\n          label={status === 'loading' ? 'Loading…' : 'Nothing learned yet'}\n          description={\n            status === 'loading'\n              ? undefined\n              : 'When you apply an Assist edit that shows a preference, such as shorter copy or no emoji, it appears here.'\n          }\n        />\n      )}\n    </CardDisplay>\n  )\n}\nAiSiteMemoryCard.displayName = 'AiSiteMemoryCard'\n\nexport default AiSiteMemoryCard\n"],"names":["aiAddonName","pluginDocsHelp","CardDisplay","useConfirmationContext","EmptyStateComponent","useSnackbar","useFirestore","useFirestoreCollection","Button","Divider","IconButton","Stack","Tooltip","Typography","collection","deleteDoc","doc","limit","query","writeBatch","useCallback","useMemo","useState","AI_SITE_MEMORY_MAX","AI_SITE_MEMORY_SUBCOLLECTION","aiSitePreferenceOf","AI_NAME","ForgetIcon","svg","width","height","viewBox","aria-hidden","focusable","path","fill","d","AiSiteMemoryCard","props","hostId","firestore","enqueueSnackbar","confirm","busy","setBusy","data","status","idField","preferences","map","row","$id","filter","sort","a","b","count","lastSeenAtMs","forget","preference","id","variant","error","console","forgetAll","confirmed","title","description","confirmationText","confirmationButtonProps","color","then","catch","batch","delete","commit","header","subheader","help","anchor","excerpt","actions","length","disabled","onClick","undefined","contentGutterX","contentGutterY","divider","flexItem","data-testid","direction","spacing","sx","alignItems","py","flex","minWidth","text","span","size","aria-label","compact","label","displayName"],"mappings":"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"}

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

@@ -19,8 +19,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { mdiAccount, mdiBookOpenPageVariant, mdiBriefcaseOutline, mdiCalendarHeart, mdiCamera, mdiClockOutline, mdiContentCut, mdiCreation, mdiDumbbell, mdiHandHeart, mdiHeartPulse, mdiHomeCity, mdiMusic, mdiPaletteOutline, mdiRocketLaunch, mdiScaleBalance, mdiSchool, mdiShopping, mdiSilverwareForkKnife, mdiViewGridOutline, mdiWrench, mdiYoga, mdiInformationOutline, mdiPageLayoutHeaderFooter } from "@aglyn/shared-data-mdi";
 import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { OptionCardGrid } from "@aglyn/shared-ui-jsx/components/option-card-grid.component";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
 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";
@@ -29,8 +30,34 @@ 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 { AI_SITE_START_ANSWERS, AI_SITE_START_TYPES, aiSiteStartBrief, aiSiteStartKind, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
+import { AI_SITE_KINDS } from "../model/ai-site-kinds.js";
+/** The icon each kind of site's card shows. */ const AI_SITE_KIND_ICONS = {
+    business: mdiBriefcaseOutline.path,
+    trades: mdiWrench.path,
+    professional: mdiScaleBalance.path,
+    wellness: mdiHeartPulse.path,
+    restaurant: mdiSilverwareForkKnife.path,
+    store: mdiShopping.path,
+    portfolio: mdiViewGridOutline.path,
+    studio: mdiPaletteOutline.path,
+    photography: mdiCamera.path,
+    blog: mdiBookOpenPageVariant.path,
+    events: mdiCalendarHeart.path,
+    fitness: mdiDumbbell.path,
+    yoga: mdiYoga.path,
+    beauty: mdiContentCut.path,
+    realestate: mdiHomeCity.path,
+    education: mdiSchool.path,
+    nonprofit: mdiHandHeart.path,
+    music: mdiMusic.path,
+    personal: mdiAccount.path,
+    landing: mdiRocketLaunch.path,
+    'coming-soon': mdiClockOutline.path
+};
 import { AiJobFollow } from "./ai-job-follow.component.js";
+import { AiModelSelector } from "./ai-model-selector.component.js";
+import { useAiModelChoice } from "./use-ai-model-choice.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';
@@ -154,6 +181,7 @@ import { publishAiJob } from "./ai-jobs-store.js";
 }
 export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, initialAnswers = null }) {
     var _ref;
+    var _modelChoice_options_options_find, _modelChoice_options;
     const { data: user } = useUser();
     const router = useRouter();
     // Held in a ref so a request reads WHO is signed in, never the identity of
@@ -207,6 +235,27 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
         freeTaste
     });
     const band = aiSitePagesBand(freeTaste);
+    // On a paid plan the person picks the model that builds the site (AGL-3660),
+    // Auto by default, from the models their plan allows; every step of the job
+    // runs on it. A Free workspace builds on the default and is offered none.
+    const modelChoice = useAiModelChoice({
+        orgId,
+        hostId,
+        surface: 'jobs',
+        kind: 'job.page'
+    });
+    // A pick remembered from before needs its cost to estimate by; Auto does not,
+    // and the list is otherwise read when the picker opens.
+    const { load: loadModels, model: rememberedModel } = modelChoice;
+    useEffect(()=>{
+        if (!freeTaste && step === 'describe' && rememberedModel) loadModels();
+    }, [
+        freeTaste,
+        step,
+        rememberedModel,
+        loadModels
+    ]);
+    const pickedModel = freeTaste ? null : modelChoice.model;
     const plan = useCallback(async ()=>{
         if (!orgId || aiSiteStartRefusal(answers, {
             freeTaste
@@ -220,7 +269,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({
+                body: JSON.stringify(_extends({
                     orgId,
                     hostId,
                     kind: 'site',
@@ -230,7 +279,9 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                     inputs: _extends({}, aiSiteStartInputs(answers), {
                         [AI_JOB_AUTO_CONFIRM_INPUT]: true
                     })
-                })
+                }, pickedModel ? {
+                    model: pickedModel
+                } : {}))
             });
             const payload = await response.json().catch(()=>null);
             if (!response.ok) {
@@ -270,7 +321,8 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
         orgSlug,
         host,
         leave,
-        router
+        router,
+        pickedModel
     ]);
     const chooseStarter = useCallback(()=>{
         setStartingStarter(true);
@@ -291,9 +343,11 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
     // 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, {
+    // The chosen model's cost against Auto's, as the model list states it.
+    const modelMultiplier = pickedModel && ((_modelChoice_options = modelChoice.options) == null ? void 0 : (_modelChoice_options_options_find = _modelChoice_options.options.find((option)=>option.id === pickedModel)) == null ? void 0 : _modelChoice_options_options_find.multiplier) || 1;
+    const estimate = freeTaste ? aiFreeSiteCreditEstimate(answers.pages) : Math.round(aiSiteCreditEstimate(answers.pages, {
         welcomeEmail: answers.welcomeEmail
-    });
+    }) * modelMultiplier);
     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, {
@@ -522,83 +576,28 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                                     /*#__PURE__*/ _jsxs(Stack, {
                                         spacing: 2,
                                         component: "section",
-                                        "aria-label": "Look & layout",
+                                        "aria-label": "Style",
                                         children: [
                                             /*#__PURE__*/ _jsx(SectionLabel, {
-                                                children: 'Look & layout'
+                                                children: 'Style'
                                             }),
                                             /*#__PURE__*/ _jsx(Typography, {
                                                 variant: "body2",
                                                 color: "text.secondary",
-                                                children: 'Optional. Picking one steers the shape of the site, not its words.'
+                                                children: answers.kind ? 'This decides how your site looks and which pages it usually has.' : 'Picked from your answer above. Choose another to change how your site looks and which pages it usually has.'
                                             }),
-                                            /*#__PURE__*/ _jsx(Box, {
-                                                sx: {
-                                                    display: 'grid',
-                                                    gridTemplateColumns: {
-                                                        xs: '1fr',
-                                                        sm: '1fr 1fr'
-                                                    },
-                                                    gap: 2
-                                                },
-                                                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);
-                                                })
+                                            /*#__PURE__*/ _jsx(OptionCardGrid, {
+                                                label: "Style of site",
+                                                options: AI_SITE_KINDS.map((kind)=>({
+                                                        id: kind.id,
+                                                        title: kind.label,
+                                                        description: kind.blurb,
+                                                        icon: AI_SITE_KIND_ICONS[kind.id]
+                                                    })),
+                                                value: aiSiteStartKind(answers).id,
+                                                onChange: (kind)=>answer({
+                                                        kind
+                                                    })
                                             })
                                         ]
                                     }),
@@ -728,6 +727,10 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                         color: "text.secondary",
                         children: refusal
                     }),
+                    !freeTaste && /*#__PURE__*/ _jsx(AiModelSelector, {
+                        choice: modelChoice,
+                        disabled: busy
+                    }),
                     /*#__PURE__*/ _jsx(Button, {
                         onClick: ()=>setStep('choose'),
                         children: 'Back'