@graph8/sdk 0.362.0 → 0.373.0

package/blocks/pages/block.json

@@ -14,43 +14,67 @@
     "foundation"
   ],
   "operations": [
-    "list_landing_pages_landing_pages_get",
+    "apply_landing_page_review_findings_landing_pages__landing_page_id__ai_review_apply_post",
+    "clear_landing_page_consent_override_landing_pages__landing_page_id__tracking_consent_delete",
+    "clone_html_to_landing_page_landing_pages_clone_html_post",
+    "clone_url_to_landing_page_landing_pages_clone_url_post",
+    "create_content_page_content_pages_post",
     "create_landing_page_landing_pages_post",
-    "publish_landing_page_landing_pages__landing_page_id__publish_post",
-    "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post",
-    "delete_landing_page_landing_pages__landing_page_id__delete",
-    "get_landing_page_landing_pages__landing_page_id__get",
-    "update_landing_page_landing_pages__landing_page_id__patch",
-    "update_landing_page_section_landing_pages__landing_page_id__sections__section_idx__patch",
     "create_landing_page_preview_link_landing_pages__landing_page_id__preview_get",
-    "list_landing_page_versions_landing_pages__landing_page_id__versions_get",
-    "restore_landing_page_version_landing_pages__landing_page_id__versions__version_num__restore_post",
-    "list_content_pages_content_pages_get",
-    "create_content_page_content_pages_post",
-    "get_content_page_content_pages__page_id__get",
-    "update_content_page_content_pages__page_id__patch",
-    "enrich_content_page_content_pages__page_id__enrich_seo_post",
     "delete_content_page_content_pages__page_id__delete",
+    "delete_landing_page_landing_pages__landing_page_id__delete",
+    "edit_landing_page_with_chat_landing_pages__landing_page_id__edit_post",
+    "enrich_content_page_content_pages__page_id__enrich_seo_post",
+    "export_landing_page_landing_pages__landing_page_id__export_get",
+    "fix_landing_page_finding_with_ai_landing_pages__landing_page_id__ai_review_fix_with_ai_post",
+    "generate_landing_page_seo_metadata_landing_pages__landing_page_id__generate_seo_metadata_post",
     "get_brand_kit_overview_brand_kit_get",
-    "trigger_brand_extraction_brand_kit_extract_post",
-    "list_archetypes_brand_kit_archetypes_get",
+    "get_content_page_content_pages__page_id__get",
+    "get_landing_page_landing_pages__landing_page_id__get",
+    "get_landing_page_reporting_overview_landing_pages_reporting_overview_get",
+    "get_landing_page_status_landing_pages__landing_page_id__status_get",
+    "get_landing_page_tracking_landing_pages__landing_page_id__tracking_get",
     "get_layout_selections_brand_kit_layout_selections_get",
-    "save_layout_selections_brand_kit_layout_selections_put",
-    "list_seo_audits_seo_audits_get",
-    "start_seo_audit_seo_audits_post",
-    "get_seo_audit_seo_audits__audit_id__get",
     "get_seo_audit_issues_seo_audits__audit_id__issues_get",
+    "get_seo_audit_seo_audits__audit_id__get",
+    "list_archetypes_brand_kit_archetypes_get",
+    "list_content_pages_content_pages_get",
+    "list_landing_page_bindings_landing_pages__landing_page_id__bindings_get",
+    "list_landing_page_domains_landing_pages_domains_get",
+    "list_landing_page_reporting_companies_landing_pages_reporting_companies_get",
+    "list_landing_page_reporting_people_landing_pages_reporting_people_get",
+    "list_landing_page_versions_landing_pages__landing_page_id__versions_get",
+    "list_landing_pages_landing_pages_get",
+    "list_seo_audits_seo_audits_get",
     "list_seo_tracked_keywords_seo_rank_tracking_get",
+    "provision_landing_page_tracking_landing_pages__landing_page_id__tracking_provision_post",
+    "publish_landing_page_landing_pages__landing_page_id__publish_post",
+    "remove_landing_page_binding_landing_pages__landing_page_id__bindings_delete",
+    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post",
+    "restore_landing_page_version_landing_pages__landing_page_id__versions__version_num__restore_post",
+    "review_landing_page_landing_pages__landing_page_id__ai_review_post",
+    "save_layout_selections_brand_kit_layout_selections_put",
     "save_seo_tracked_keywords_seo_rank_tracking_keywords_post",
-    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post"
+    "start_seo_audit_seo_audits_post",
+    "trigger_brand_extraction_brand_kit_extract_post",
+    "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post",
+    "update_content_page_content_pages__page_id__patch",
+    "update_landing_page_landing_pages__landing_page_id__patch",
+    "update_landing_page_section_landing_pages__landing_page_id__sections__section_idx__patch",
+    "update_landing_page_tracking_landing_pages__landing_page_id__tracking_patch"
   ],
   "components": [
     {
       "name": "PagesScreen",
       "file": "components/pages-screen.tsx",
       "purpose": "Finished marketing-site workspace: landing pages with beside-the-list editor, content library, brand kit and SEO tabs.",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "get_landing_page_landing_pages__landing_page_id__get",
+        "list_landing_pages_landing_pages_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     },
     {
       "name": "PageList",
@@ -143,6 +167,99 @@
         "write",
         "billable"
       ]
+    },
+    {
+      "name": "MoreRows",
+      "file": "components/more-rows.tsx",
+      "purpose": "Footer for paged lists: how many rows are shown and a Load more button.",
+      "operations": [],
+      "tiers": []
+    },
+    {
+      "name": "PageAiTools",
+      "file": "components/page-ai-tools.tsx",
+      "purpose": "AI help for a page: edit by instruction, review and apply fixes, write search metadata (each AI pass confirmed).",
+      "operations": [
+        "edit_landing_page_with_chat_landing_pages__landing_page_id__edit_post",
+        "apply_landing_page_review_findings_landing_pages__landing_page_id__ai_review_apply_post",
+        "review_landing_page_landing_pages__landing_page_id__ai_review_post",
+        "fix_landing_page_finding_with_ai_landing_pages__landing_page_id__ai_review_fix_with_ai_post",
+        "update_landing_page_landing_pages__landing_page_id__patch",
+        "generate_landing_page_seo_metadata_landing_pages__landing_page_id__generate_seo_metadata_post"
+      ],
+      "tiers": [
+        "write",
+        "billable"
+      ]
+    },
+    {
+      "name": "PageAnalytics",
+      "file": "components/page-analytics.tsx",
+      "purpose": "Landing page performance: visits, identified people and companies, form submissions and sources, for all pages or one.",
+      "operations": [
+        "list_landing_page_reporting_people_landing_pages_reporting_people_get",
+        "list_landing_page_reporting_companies_landing_pages_reporting_companies_get",
+        "get_landing_page_reporting_overview_landing_pages_reporting_overview_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "PageClone",
+      "file": "components/page-clone.tsx",
+      "purpose": "Rebuild a URL or pasted HTML as an editable landing page (confirmed AI spend).",
+      "operations": [
+        "clone_url_to_landing_page_landing_pages_clone_url_post",
+        "clone_html_to_landing_page_landing_pages_clone_html_post"
+      ],
+      "tiers": [
+        "billable"
+      ]
+    },
+    {
+      "name": "PageDomains",
+      "file": "components/page-domains.tsx",
+      "purpose": "Where one page is live: its URLs, publish to a connected domain, take a URL down, download the HTML.",
+      "operations": [
+        "list_landing_page_bindings_landing_pages__landing_page_id__bindings_get",
+        "list_landing_page_domains_landing_pages_domains_get",
+        "export_landing_page_landing_pages__landing_page_id__export_get",
+        "publish_landing_page_landing_pages__landing_page_id__publish_post",
+        "remove_landing_page_binding_landing_pages__landing_page_id__bindings_delete"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "PageGenerationStatus",
+      "file": "components/page-generation-status.tsx",
+      "purpose": "Progress of an AI-built page while it is generating.",
+      "operations": [
+        "get_landing_page_status_landing_pages__landing_page_id__status_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "PageTracking",
+      "file": "components/page-tracking.tsx",
+      "purpose": "How one page is measured: tracking mode, form label, chat widget and conversion goal; own stream and consent reset.",
+      "operations": [
+        "update_landing_page_tracking_landing_pages__landing_page_id__tracking_patch",
+        "provision_landing_page_tracking_landing_pages__landing_page_id__tracking_provision_post",
+        "clear_landing_page_consent_override_landing_pages__landing_page_id__tracking_consent_delete",
+        "get_landing_page_tracking_landing_pages__landing_page_id__tracking_get"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
     }
   ],
   "hooks": [],

package/blocks/pages/components/brand-kit-editor.tsx

@@ -99,7 +99,9 @@ function Layouts() {
   const picked = edit ?? saved;
   const save = useG8Mutation(() => g8Put("/brand-kit/layout-selections", { archetype_ids: picked }), { onSuccess: () => { setEdit(null); void selections.refetch(); } });
   const rows = rowsOf<Rec>(archetypes.data?.data);
-  const dirty = edit !== null && JSON.stringify([...picked].sort()) !== JSON.stringify([...saved].sort());
+  // The saved selection must be known before anything is ticked or saved: ticking first would replace it with just that box.
+  const savedKnown = selections.data !== undefined && !selections.error;
+  const dirty = savedKnown && edit !== null && JSON.stringify([...picked].sort()) !== JSON.stringify([...saved].sort());
   const toggle = (id: string) => setEdit(picked.includes(id) ? picked.filter((p) => p !== id) : [...picked, id]);
   return (
     <Card>
@@ -107,13 +109,14 @@ function Layouts() {
       <CardContent className="space-y-3">
         <p className="text-muted-foreground text-sm">New landing pages are built from the layouts you tick.</p>
         {archetypes.error ? <ApiError error={archetypes.error} onRetry={() => void archetypes.refetch()} /> : null}
+        {selections.error ? <ApiError error={selections.error} title="Could not load your saved layouts" onRetry={() => void selections.refetch()} /> : null}
         {archetypes.loading && !archetypes.data ? <Skeleton className="h-24 w-full" /> : null}
         <div className="grid gap-2 sm:grid-cols-2">
           {rows.map((a) => {
             const id = text(a.id);
             return (
               <label key={id} className="flex cursor-pointer items-start gap-2 rounded-md border p-3 text-sm">
-                <input type="checkbox" checked={picked.includes(id)} onChange={() => toggle(id)} aria-label={text(a.name)} />
+                <input type="checkbox" checked={picked.includes(id)} disabled={!savedKnown} onChange={() => toggle(id)} aria-label={text(a.name)} />
                 <span><span className="font-medium">{text(a.name)}</span><br /><span className="text-muted-foreground">{text(a.description)}</span></span>
               </label>
             );

package/blocks/pages/components/content-library.tsx

@@ -25,6 +25,7 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
 import type { ContentPageRow, Rec } from "../lib/studio";
+import { plural } from "@/g8/lib/plural";
 
 export interface ContentLibraryProps {
   pageSize?: number;
@@ -70,7 +71,10 @@ function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onC
   useEffect(() => {
     setForm({ title: text(d.title), primary_keyword: text(d.primary_keyword), content_status: text(d.content_status, "idea"), body_content: text(d.body_content) });
   }, [detail.data]);
-  const save = useG8Mutation(() => g8Patch(`/content/pages/${encodeURIComponent(pageId)}`, form), { onSuccess: () => { onSaved(); onClose(); } });
+  // Only the fields the person changed are sent, so nothing they did not touch can be blanked.
+  const original = { title: text(d.title), primary_keyword: text(d.primary_keyword), content_status: text(d.content_status, "idea"), body_content: text(d.body_content) };
+  const changed = Object.fromEntries(Object.entries(form).filter(([k, v]) => v !== original[k as keyof typeof original]));
+  const save = useG8Mutation(() => g8Patch(`/content/pages/${encodeURIComponent(pageId)}`, changed), { onSuccess: () => { onSaved(); onClose(); } });
   return (
     <Sheet open onOpenChange={(open) => { if (!open) onClose(); }}>
       <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
@@ -80,7 +84,8 @@ function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onC
         </SheetHeader>
         <div className="space-y-3 px-4 pb-4">
           {detail.error ? <ApiError error={detail.error} onRetry={() => void detail.refetch()} /> : null}
-          {detail.loading && !detail.data ? <Skeleton className="h-32 w-full" /> : (
+          {/* The form (and Save) exist only once the page has loaded: after a failed load there is nothing to edit over. */}
+          {!detail.data ? (detail.error ? null : <Skeleton className="h-32 w-full" />) : (
             <>
               <dl className="grid grid-cols-2 gap-2 text-sm">
                 {contentFacts(d).map(([k, v]) => (
@@ -96,7 +101,7 @@ function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onC
               <div className="space-y-1"><Label htmlFor="cl-status">Status</Label><Select id="cl-status" value={form.content_status} options={STATUSES.slice(1)} onChange={(v) => setForm({ ...form, content_status: v })} /></div>
               <div className="space-y-1"><Label htmlFor="cl-body">Body</Label><Textarea id="cl-body" rows={10} value={form.body_content} onChange={(e) => setForm({ ...form, body_content: e.target.value })} /></div>
               {save.error ? <ApiError error={save.error} title="Could not save" /> : null}
-              <Button loading={save.loading} onClick={() => void save.mutate(undefined)}>Save</Button>
+              <Button loading={save.loading} disabled={Object.keys(changed).length === 0} onClick={() => void save.mutate(undefined)}>Save</Button>
             </>
           )}
         </div>
@@ -173,7 +178,7 @@ export function ContentLibrary({ pageSize = 25, className, selectedId, onSelecte
         </Table>
       )}
       <div className="mt-3 flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">{total} {total === 1 ? "item" : "items"}</span>
+        <span className="text-muted-foreground">{plural(total, "item")}</span>
         <div className="flex gap-2">
           <Button size="sm" variant="outline" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - pageSize))}>Previous</Button>
           <Button size="sm" variant="outline" disabled={offset + pageSize >= total} onClick={() => setOffset(offset + pageSize)}>Next</Button>

package/blocks/pages/components/more-rows.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+/**
+ * MoreRows: the honest end of a list that the API pages. Shows how many rows are on screen and, while the API has
+ * another page, a "Load more" button. A list never ends silently: either every row is reachable or this says there are more.
+ * (Same contract as the foundation's LoadMore; kept local so the pages block does not wait on it.)
+ *
+ * SDK operations: none.
+ */
+import { Button } from "@graph8/sdk/ui";
+
+export interface MoreRowsProps {
+  /** Rows on screen. */
+  shown: number;
+  /** What the rows are, plural: "people". */
+  noun: string;
+  hasMore: boolean;
+  loading?: boolean;
+  onMore: () => void;
+}
+
+export function MoreRows({ shown, noun, hasMore, loading, onMore }: MoreRowsProps) {
+  if (!hasMore) return null;
+  return (
+    <div className="text-muted-foreground flex items-center justify-between gap-3 py-2 text-sm">
+      <span role="status">Showing {shown.toLocaleString()} {noun}</span>
+      <Button type="button" variant="outline" size="sm" loading={loading} onClick={onMore}>Load more</Button>
+    </div>
+  );
+}

package/blocks/pages/components/page-ai-tools.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+/**
+ * PageAiTools: AI help for one landing page. Describe a change in plain words and the page is edited; run a review that
+ * lists what could be better and apply the exact fixes for free; write search title, description and keywords.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. editLandingPageWithChat         POST /landing-pages/{id}/edit { instruction, section_idx? }          (BILLABLE, confirmed; changes the draft only)
+ *   2. reviewLandingPage               POST /landing-pages/{id}/ai-review { deep }                          (BILLABLE, confirmed; changes nothing)
+ *   3. applyLandingPageReviewFindings  POST /landing-pages/{id}/ai-review/apply { finding_ids }             (write, free, no model runs)
+ *   4. fixLandingPageFindingWithAi     POST /landing-pages/{id}/ai-review/fix-with-ai { finding }           (BILLABLE per finding, confirmed)
+ *   5. generateLandingPageSeoMetadata  POST /landing-pages/{id}/generate-seo-metadata                       (BILLABLE, confirmed)
+ *   6. updateLandingPage               PATCH /landing-pages/{id} { description }                            (write; "Use as description")
+ *
+ * The API quotes no price in advance and the balance is not checked here, so every dialog says what runs and how many
+ * AI passes it is (a "quick check" runs no model: 0 credits). Edits change the draft; the live page changes only when
+ * it is published again. Nothing here publishes.
+ */
+import { useState } from "react";
+import { Button, Label, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { asRec, num, rowsOf, text } from "../lib/studio";
+import type { Rec } from "../lib/studio";
+
+export interface PageAiToolsProps {
+  pageId: string;
+  /** Called after the page draft changed (an edit, applied fixes, a new description). */
+  onChanged?: () => void;
+  className?: string;
+}
+
+const SEVERITY: Record<string, Tone> = { error: "negative", critical: "negative", high: "negative", warning: "warning", medium: "warning", info: "neutral", low: "neutral" };
+
+/** Findings the review returned. The id is required: a finding without one cannot be applied. */
+export function findingsOf(data: unknown): Rec[] {
+  return rowsOf<Rec>(data, "findings").filter((f) => text(f.id) !== "");
+}
+
+function ChatEdit({ pageId, onChanged }: PageAiToolsProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const [instruction, setInstruction] = useState("");
+  const [section, setSection] = useState("");
+  const [done, setDone] = useState("");
+  const sectionIdx = section.trim() === "" ? undefined : Number(section) - 1;
+  const sectionOk = sectionIdx === undefined || (Number.isInteger(sectionIdx) && sectionIdx >= 0);
+  const go = (): void => {
+    const body = { instruction: instruction.trim(), ...(sectionIdx === undefined ? {} : { section_idx: sectionIdx }) };
+    ask({
+      tier: "billable",
+      title: sectionIdx === undefined ? "Edit the whole page with AI" : `Edit section ${sectionIdx + 1} with AI`,
+      confirmLabel: "Edit with AI",
+      description: `One AI pass applies your instruction to the draft. Uses credits; the API gives no price in advance and your balance is not checked here. The live page does not change until you publish.`,
+      run: async () => { await g8Post(`/landing-pages/${encodeURIComponent(pageId)}/edit`, body); setDone("Edit applied to the draft."); setInstruction(""); },
+      onDone: () => onChanged?.(),
+    });
+  };
+  return (
+    <SectionCard title="Edit with AI" description="Say what to change, for example: make the headline shorter and add a second call to action.">
+      <form className="grid gap-3" onSubmit={(e) => { e.preventDefault(); if (instruction.trim() && sectionOk) go(); }}>
+        <div>
+          <Label htmlFor="ai-instruction" className="mb-1">What should change</Label>
+          <Textarea id="ai-instruction" rows={3} value={instruction} onChange={(e) => { setInstruction(e.target.value); setDone(""); }} />
+        </div>
+        <div className="max-w-40">
+          <Label htmlFor="ai-section" className="mb-1">Section number (optional)</Label>
+          <input id="ai-section" inputMode="numeric" className="border-input bg-background h-9 w-full rounded-md border px-2 text-sm" value={section} onChange={(e) => setSection(e.target.value.replace(/\D/g, ""))} />
+        </div>
+        <div><Button type="submit" disabled={!instruction.trim() || !sectionOk}>Edit with AI</Button></div>
+      </form>
+      {done ? <p role="status" className="mt-2 text-sm">{done}</p> : null}
+      {failure ? <ApiError error={failure} title="The edit did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </SectionCard>
+  );
+}
+
+function Review({ pageId, onChanged }: PageAiToolsProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const base = `/landing-pages/${encodeURIComponent(pageId)}`;
+  const [findings, setFindings] = useState<Rec[] | null>(null);
+  const [picked, setPicked] = useState<string[]>([]);
+  const [note, setNote] = useState("");
+  const apply = useG8Mutation(() => g8Post(`${base}/ai-review/apply`, { finding_ids: picked }), {
+    onSuccess: (res) => {
+      // The API answers with the findings that remain (id, title, severity only): keep our full copies of those.
+      const d = asRec(res.data);
+      const applied = num(d.applied) ?? 0;
+      // remaining_findings comes from a rule-only re-review, so it never lists AI findings: drop only what could be applied (had an exact fix).
+      const done = new Set((findings ?? []).filter((f) => picked.includes(text(f.id)) && f.suggested_fix).map((f) => text(f.id)));
+      setFindings((cur) => (cur ?? []).filter((f) => !done.has(text(f.id))));
+      setNote(applied === picked.length ? `Applied ${applied} fix${applied === 1 ? "" : "es"}.` : `Applied ${applied} of ${picked.length} selected. The rest have no exact fix: use Fix with AI.`);
+      setPicked([]);
+      if (applied > 0) onChanged?.();
+    },
+  });
+  const review = (deep: boolean): void => ask({
+    tier: "billable",
+    title: deep ? "Review this page with AI" : "Quick check of this page",
+    confirmLabel: deep ? "Review with AI" : "Run quick check",
+    estimatedCredits: deep ? undefined : 0,
+    description: deep ? "One AI pass reads the page and lists what to improve. Uses credits; the API gives no price in advance. Nothing on the page changes." : "Runs the built-in checks only, no AI model: 0 credits. Nothing on the page changes.",
+    run: async () => { const res = await g8Post(`${base}/ai-review`, { deep }); setFindings(findingsOf(res.data)); setPicked([]); setNote(""); },
+  });
+  const fix = (f: Rec): void => ask({
+    tier: "billable",
+    title: `Fix "${text(f.title, "this finding")}" with AI`,
+    confirmLabel: "Fix with AI",
+    description: "One AI pass rewrites the affected part of the draft. Uses credits for this finding only.",
+    run: async () => { await g8Post(`${base}/ai-review/fix-with-ai`, { finding: f }); setFindings((cur) => (cur ?? []).filter((x) => text(x.id) !== text(f.id))); },
+    onDone: () => onChanged?.(),
+  });
+  const toggle = (id: string): void => setPicked((cur) => (cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]));
+  return (
+    <SectionCard title="Review" description="Find wording, brand and clarity problems, then apply the exact fixes."
+      actions={<div className="flex gap-1"><Button size="sm" variant="outline" onClick={() => review(false)}>Quick check</Button><Button size="sm" onClick={() => review(true)}>Review with AI</Button></div>}>
+      {findings === null ? <EmptyState compact title="No review yet" description="Run a review to see what could be better on this page." />
+        : findings.length === 0 ? <EmptyState compact title="Nothing to fix" description="The review found no remaining problems." />
+        : (
+          <div className="grid gap-2">
+            <ul className="grid gap-2">
+              {findings.map((f) => {
+                const id = text(f.id);
+                return (
+                  <li key={id} className="flex items-start gap-3 rounded-md border p-3">
+                    <input type="checkbox" aria-label={`Select ${text(f.title, id)}`} className="mt-1" checked={picked.includes(id)} onChange={() => toggle(id)} />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2"><span className="text-sm font-medium">{text(f.title, id)}</span><StatusPill tone={SEVERITY[text(f.severity).toLowerCase()] ?? "neutral"}>{text(f.severity, "note")}</StatusPill></div>
+                      {text(f.description) ? <p className="text-muted-foreground text-xs">{text(f.description)}</p> : null}
+                      {text(f.suggested_fix) ? <p className="text-xs">Suggested: {typeof f.suggested_fix === "string" ? f.suggested_fix : JSON.stringify(f.suggested_fix)}</p> : null}
+                    </div>
+                    <Button size="sm" variant="ghost" aria-label={`Fix ${text(f.title, id)} with AI`} onClick={() => fix(f)}>Fix with AI</Button>
+                  </li>
+                );
+              })}
+            </ul>
+            <div className="flex items-center gap-2">
+              <Button size="sm" loading={apply.loading} disabled={picked.length === 0} onClick={() => void apply.mutate(undefined)}>Apply {picked.length || ""} selected (free)</Button>
+              <Button size="sm" variant="ghost" onClick={() => setPicked(findings.map((f) => text(f.id)))}>Select all</Button>
+            </div>
+          </div>
+        )}
+      {note ? <p role="status" className="mt-2 text-sm">{note}</p> : null}
+      {apply.error ? <ApiError error={apply.error} title="Could not apply the fixes" /> : null}
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </SectionCard>
+  );
+}
+
+function SeoMetadata({ pageId, onChanged }: PageAiToolsProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const [meta, setMeta] = useState<Rec | null>(null);
+  const use = useG8Mutation((description: string) => g8Patch(`/landing-pages/${encodeURIComponent(pageId)}`, { description }), { onSuccess: () => onChanged?.() });
+  const scalars = Object.entries(meta ?? {}).filter(([, v]) => typeof v === "string" || typeof v === "number" || (Array.isArray(v) && v.every((x) => typeof x === "string")));
+  const description = text(meta?.description) || text(meta?.meta_description);
+  return (
+    <SectionCard title="Search title and description" description="Write the title, description and keywords search engines show."
+      actions={<Button size="sm" onClick={() => ask({
+        tier: "billable", title: "Write search metadata with AI", confirmLabel: "Write metadata",
+        description: "One AI pass reads the page and proposes a title, description and keywords. Uses credits; the API gives no price in advance. Nothing is saved until you choose to.",
+        run: async () => { setMeta(asRec((await g8Post(`/landing-pages/${encodeURIComponent(pageId)}/generate-seo-metadata`)).data)); },
+      })}>Write with AI</Button>}>
+      {!meta ? <EmptyState compact title="Not generated yet" description="Generate a proposal, read it, then keep what you like." /> : (
+        <div className="grid gap-3">
+          <KeyValueList columns={1} items={scalars.map(([k, v]) => ({ label: k.replace(/_/g, " "), value: Array.isArray(v) ? v.join(", ") : String(v), wide: true }))} />
+          {description ? <div><Button size="sm" variant="outline" loading={use.loading} onClick={() => void use.mutate(description)}>Use as the page description</Button></div> : null}
+          {use.data ? <p role="status" className="text-sm">Description saved.</p> : null}
+        </div>
+      )}
+      {use.error ? <ApiError error={use.error} title="Could not save the description" /> : null}
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </SectionCard>
+  );
+}
+
+export function PageAiTools({ pageId, onChanged, className }: PageAiToolsProps) {
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <ChatEdit pageId={pageId} onChanged={onChanged} />
+        <Review pageId={pageId} onChanged={onChanged} />
+        <SeoMetadata pageId={pageId} onChanged={onChanged} />
+      </div>
+    </div>
+  );
+}