@graph8/sdk 0.370.0 → 0.373.0

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>
+  );
+}

package/blocks/pages/components/page-analytics.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+/**
+ * PageAnalytics: how landing pages perform. Visits, identified people and companies, form submissions and sign-ups
+ * for a window and a traffic source, per page and in total, plus who visited. Pass `pageId` to scope everything to
+ * one page (the page detail tab); omit it for the whole portfolio.
+ *
+ * SDK operations, in the order the screen uses them (all read, free):
+ *   1. getLandingPageReportingOverview   GET /landing-pages/reporting/overview?days&source&page_id
+ *   2. listLandingPageReportingPeople    GET /landing-pages/reporting/people?cursor&limit&days&source&page_id   (paged, "Load more")
+ *   3. listLandingPageReportingCompanies GET /landing-pages/reporting/companies?cursor&limit&days&source&page_id (paged, "Load more")
+ *
+ * The payloads are open-shaped in the contract: only values that are really numbers are shown, a missing one is a
+ * dash (never a zero). When graph8 cannot identify visitors right now it says so instead of showing an empty list.
+ */
+import { useState } from "react";
+import { Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatStrip } from "@/g8/components/screen/stat-strip";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { usePaginated } from "@/g8/hooks/use-paginated";
+import { g8Get } from "@/g8/lib/g8-client";
+import { asRec, num, pageOf, rowsOf, shortDate, text } from "../lib/studio";
+import type { Rec } from "../lib/studio";
+import { MoreRows } from "./more-rows";
+
+export interface PageAnalyticsProps {
+  /** Scope every number to one page. Omit for all pages. */
+  pageId?: string;
+  className?: string;
+}
+
+const SOURCES = ["all", "paid", "email", "organic", "referral", "direct"] as const;
+const SELECT = "border-input bg-background h-9 rounded-md border px-2 text-sm";
+const PAGE = 50;
+
+const count = (v: unknown): string => (num(v) == null ? "-" : (v as number).toLocaleString());
+const rate = (v: unknown): string => (num(v) == null ? "-" : `${((v as number) * 100).toFixed(1)}%`);
+
+function PeopleList({ query }: { query: Record<string, string | number | string[]> }) {
+  const list = usePaginated<Rec>(async (cursor, signal) => {
+    const res = await g8Get("/landing-pages/reporting/people", { ...query, cursor: cursor ? Number(cursor) : 0, limit: PAGE }, { signal });
+    const d = asRec(res.data);
+    return pageOf(rowsOf<Rec>(d, "people"), d.next_cursor ?? res.pagination?.next_cursor);
+  }, [JSON.stringify(query)]);
+  if (list.error) return <ApiError error={list.error} title="Could not load visitors" onRetry={() => void list.reload()} />;
+  if (list.loading) return <Skeleton className="h-24 w-full" aria-busy="true" />;
+  if (list.items.length === 0) return <EmptyState compact title="No identified people yet" description="People appear here once a visitor is matched to a contact, for example after they submit a form." />;
+  return (
+    <>
+      <Table>
+        <TableHeader><TableRow><TableHead>Person</TableHead><TableHead>Visits</TableHead><TableHead>Top source</TableHead><TableHead>Last seen</TableHead></TableRow></TableHeader>
+        <TableBody>
+          {list.items.map((p, i) => (
+            <TableRow key={text(p.contact_id) || i}>
+              <TableCell className="font-medium">{text(p.name, "Identified contact")}</TableCell>
+              <TableCell>{count(p.visits)}</TableCell>
+              <TableCell>{text(p.top_source) || "-"}</TableCell>
+              <TableCell>{shortDate(p.last_seen) || "-"}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <MoreRows shown={list.items.length} noun="people" hasMore={list.hasMore} loading={list.loadingMore} onMore={() => void list.loadMore()} />
+    </>
+  );
+}
+
+function CompaniesList({ query }: { query: Record<string, string | number | string[]> }) {
+  const list = usePaginated<Rec>(async (cursor, signal) => {
+    const res = await g8Get("/landing-pages/reporting/companies", { ...query, cursor: cursor ? Number(cursor) : 0, limit: PAGE }, { signal });
+    const d = asRec(res.data);
+    return pageOf(rowsOf<Rec>(d, "companies"), d.next_cursor ?? res.pagination?.next_cursor);
+  }, [JSON.stringify(query)]);
+  if (list.error) return <ApiError error={list.error} title="Could not load companies" onRetry={() => void list.reload()} />;
+  if (list.loading) return <Skeleton className="h-24 w-full" aria-busy="true" />;
+  if (list.items.length === 0) return <EmptyState compact title="No identified companies yet" description="Companies appear when a visit can be resolved to the organization behind it." />;
+  return (
+    <>
+      <Table>
+        <TableHeader><TableRow><TableHead>Company</TableHead><TableHead>Visits</TableHead><TableHead>Top source</TableHead><TableHead>Last seen</TableHead></TableRow></TableHeader>
+        <TableBody>
+          {list.items.map((c, i) => (
+            <TableRow key={text(c.company_id) || i}>
+              <TableCell className="font-medium">{text(c.company_name) || text(c.name) || text(c.domain) || "Unknown company"}</TableCell>
+              <TableCell>{count(c.visits)}</TableCell>
+              <TableCell>{text(c.top_source) || "-"}</TableCell>
+              <TableCell>{shortDate(c.last_seen) || "-"}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <MoreRows shown={list.items.length} noun="companies" hasMore={list.hasMore} loading={list.loadingMore} onMore={() => void list.loadMore()} />
+    </>
+  );
+}
+
+export function PageAnalytics({ pageId, className }: PageAnalyticsProps) {
+  const [days, setDays] = useState(30);
+  const [source, setSource] = useState<(typeof SOURCES)[number]>("all");
+  const query: Record<string, string | number | string[]> = { days, source, ...(pageId ? { page_id: [pageId] } : {}) };
+  const overview = useG8Query((signal) => g8Get("/landing-pages/reporting/overview", query, { signal }), [days, source, pageId]);
+
+  const o = asRec(overview.data?.data);
+  const totals = asRec(o.totals);
+  const pages = rowsOf<Rec>(o.pages);
+  const sources = rowsOf<Rec>(o.sources);
+  const stats: StatItem[] = [
+    { label: "Page views", value: count(totals.page_views) },
+    { label: "Unique visitors", value: count(totals.unique_visitors) },
+    { label: "Identified people", value: o.people_resolution_available === false ? "-" : count(totals.identified_people), hint: o.people_resolution_available === false ? "Visitor identification is not available right now." : undefined },
+    { label: "Identified companies", value: o.company_resolution_available === false ? "-" : count(totals.identified_companies), hint: o.company_resolution_available === false ? "Company matching is catching up. This is not zero." : undefined },
+    { label: "Form submissions", value: count(totals.form_submissions) },
+    { label: "Form conversion", value: rate(totals.form_conversion_rate) },
+  ];
+
+  return (
+    <div className={className}>
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <select aria-label="Reporting window" className={SELECT} value={days} onChange={(e) => setDays(Number(e.target.value))}>
+          {[7, 30, 90].map((d) => <option key={d} value={d}>Last {d} days</option>)}
+        </select>
+        <select aria-label="Traffic source" className={SELECT} value={source} onChange={(e) => setSource(e.target.value as (typeof SOURCES)[number])}>
+          {SOURCES.map((s) => <option key={s} value={s}>{s === "all" ? "All sources" : s[0].toUpperCase() + s.slice(1)}</option>)}
+        </select>
+      </div>
+      {overview.error ? <ApiError error={overview.error} title="Could not load page analytics" onRetry={() => void overview.refetch()} /> : (
+        <div className="grid gap-4">
+          <StatStrip items={stats} loading={overview.loading && !overview.data} />
+          {o.stale === true ? <p role="note" className="text-muted-foreground text-xs">These numbers may be a few minutes old.</p> : null}
+          {!pageId ? (
+            <SectionCard title="By page" flush>
+              {pages.length === 0 ? <EmptyState compact title="No published pages in this window" description="Only published pages with a URL are measured." /> : (
+                <Table>
+                  <TableHeader><TableRow><TableHead>Page</TableHead><TableHead>Views</TableHead><TableHead>Visitors</TableHead><TableHead>Forms</TableHead><TableHead>Top source</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {pages.map((p, i) => (
+                      <TableRow key={text(p.id) || i}>
+                        <TableCell className="font-medium">{text(p.name) || text(p.title) || text(p.id)}</TableCell>
+                        <TableCell>{count(p.page_views)}</TableCell>
+                        <TableCell>{count(p.unique_visitors)}</TableCell>
+                        <TableCell>{count(p.form_submissions)}</TableCell>
+                        <TableCell>{text(p.top_source) || "-"}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </SectionCard>
+          ) : null}
+          {sources.length > 0 ? (
+            <SectionCard title="Traffic sources" flush>
+              <Table>
+                <TableHeader><TableRow><TableHead>Source</TableHead><TableHead>Views</TableHead><TableHead>Visitors</TableHead></TableRow></TableHeader>
+                <TableBody>
+                  {sources.slice(0, 10).map((s, i) => (
+                    <TableRow key={i}><TableCell className="font-medium">{text(s.channel) || "Unknown"}</TableCell><TableCell>{count(s.page_views)}</TableCell><TableCell>{count(s.unique_visitors)}</TableCell></TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </SectionCard>
+          ) : null}
+          <SectionCard title="Identified people" description="Visitors matched to a contact.">
+            <PeopleList query={query} />
+          </SectionCard>
+          <SectionCard title="Identified companies" description="Organizations behind the visits.">
+            <CompaniesList query={query} />
+          </SectionCard>
+        </div>
+      )}
+    </div>
+  );
+}

package/blocks/pages/components/page-clone.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+/**
+ * PageClone: turn an existing web page into an editable landing page, from its public URL or from HTML you paste.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. cloneUrlToLandingPage   POST /landing-pages/clone-url  { url, name?, use_vision }   (BILLABLE, confirmed)
+ *   2. cloneHtmlToLandingPage  POST /landing-pages/clone-html { html, name?, source_url?, use_vision }   (BILLABLE, confirmed)
+ *
+ * Both run AI passes; "match the look from a screenshot" is the expensive half and is on by default, as in the API.
+ * The API quotes no price in advance and the balance is not checked here, so the dialog says what runs. The new page
+ * is a draft: nothing is published. Pasted HTML is limited to 4 MiB (the proxy rejects more than 5 MiB).
+ */
+import { useState } from "react";
+import { Button, Input, 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 { FormSheet } from "@/g8/components/screen/form-sheet";
+import { g8Post } from "@/g8/lib/g8-client";
+import { asRec, text } from "../lib/studio";
+
+export interface PageCloneProps {
+  /** Called with the new page's id once the clone is made. */
+  onCreated?: (pageId: string) => void;
+  /** The button label. */
+  label?: string;
+  className?: string;
+}
+
+export const MAX_HTML_BYTES = 4 * 1024 * 1024;
+
+/** True for an http(s) URL with a host: what the clone endpoint can fetch. */
+export function isPublicUrl(raw: string): boolean {
+  try {
+    const u = new URL(raw.trim());
+    return (u.protocol === "http:" || u.protocol === "https:") && u.hostname.includes(".");
+  } catch {
+    return false;
+  }
+}
+
+export function PageClone({ onCreated, label = "Clone a page", className }: PageCloneProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<"url" | "html">("url");
+  const [url, setUrl] = useState("");
+  const [html, setHtml] = useState("");
+  const [name, setName] = useState("");
+  const [vision, setVision] = useState(true);
+  const htmlBytes = new TextEncoder().encode(html).length;
+  const ready = mode === "url" ? isPublicUrl(url) : html.trim() !== "" && htmlBytes <= MAX_HTML_BYTES;
+
+  const reset = (): void => { setUrl(""); setHtml(""); setName(""); setVision(true); };
+  const go = (): void => ask({
+    tier: "billable",
+    title: mode === "url" ? `Clone ${url.trim()} into an editable page` : "Clone the pasted HTML into an editable page",
+    confirmLabel: "Clone page",
+    description: `Runs AI passes to rebuild the page as editable sections${vision ? ", including a screenshot pass so it looks like the original" : ""}. Uses credits; the API gives no price in advance and your balance is not checked here. The new page is a draft.`,
+    run: async () => {
+      const common = { name: name.trim() || undefined, use_vision: vision };
+      const res = mode === "url" ? await g8Post("/landing-pages/clone-url", { url: url.trim(), ...common }) : await g8Post("/landing-pages/clone-html", { html, ...common });
+      const id = text(asRec(res.data).id);
+      reset();
+      setOpen(false);
+      if (id) onCreated?.(id);
+    },
+  });
+
+  return (
+    <div className={className}>
+      <Button size="sm" variant="outline" onClick={() => setOpen(true)}>{label}</Button>
+      <FormSheet
+        open={open}
+        onOpenChange={setOpen}
+        title="Clone a page"
+        description="Rebuild a page you already have as an editable landing page. It starts as a draft."
+        width="lg"
+        footer={<><Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button><Button disabled={!ready} onClick={go}>Clone page</Button></>}
+      >
+        <div className="flex gap-1" role="tablist" aria-label="Clone source">
+          <Button size="sm" role="tab" aria-selected={mode === "url"} variant={mode === "url" ? "default" : "outline"} onClick={() => setMode("url")}>From a URL</Button>
+          <Button size="sm" role="tab" aria-selected={mode === "html"} variant={mode === "html" ? "default" : "outline"} onClick={() => setMode("html")}>From HTML</Button>
+        </div>
+        {mode === "url" ? (
+          <div><Label htmlFor="pc-url" className="mb-1">Page URL</Label><Input id="pc-url" type="url" placeholder="https://example.com/pricing" value={url} onChange={(e) => setUrl(e.target.value)} aria-invalid={url !== "" && !isPublicUrl(url)} />
+            {url !== "" && !isPublicUrl(url) ? <p role="alert" className="text-error-foreground mt-1 text-xs">Enter a full address starting with https://.</p> : null}</div>
+        ) : (
+          <div><Label htmlFor="pc-html" className="mb-1">HTML</Label><Textarea id="pc-html" rows={10} className="font-mono text-xs" value={html} onChange={(e) => setHtml(e.target.value)} />
+            {htmlBytes > MAX_HTML_BYTES ? <p role="alert" className="text-error-foreground mt-1 text-xs">This is {(htmlBytes / 1048576).toFixed(1)} MiB. The limit is 4 MiB.</p> : null}</div>
+        )}
+        <div><Label htmlFor="pc-name" className="mb-1">Name (optional)</Label><Input id="pc-name" value={name} onChange={(e) => setName(e.target.value)} /></div>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={vision} onChange={(e) => setVision(e.target.checked)} />Match the look from a screenshot (uses more credits)</label>
+        {failure ? <ApiError error={failure} title="The clone did not work" /> : null}
+      </FormSheet>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}

package/blocks/pages/components/page-domains.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+/**
+ * PageDomains: where one landing page is live. Lists every URL the page is bound to, takes one off the internet
+ * without unpublishing the page, and publishes the page to another of your verified domains.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listLandingPageBindings  GET    /landing-pages/{id}/bindings                (read)
+ *   2. listLandingPageDomains   GET    /landing-pages/domains                      (read; the domains a page can be published on)
+ *   3. publishLandingPage       POST   /landing-pages/{id}/publish { domain_id, subdomain, path }   (external, confirmed: a public URL)
+ *   4. removeLandingPageBinding DELETE /landing-pages/{id}/bindings?hostname&path  (destructive, confirmed: that URL stops resolving)
+ *   5. exportLandingPage        GET    /landing-pages/{id}/export                  (read; downloads the page as one self-contained HTML file)
+ *
+ * Publishing to a domain needs the domain to be connected for hosting (the shared default domain is published from the
+ * Edit tab). A domain that is not ready is listed but cannot be chosen, with the reason. A URL already used by another
+ * page is refused by the API; nothing is taken over from here.
+ */
+import { useState } from "react";
+import { Download } from "lucide-react";
+import { Button, Input, Label, Skeleton } 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 { SectionCard } from "@/g8/components/screen/section-card";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
+import type { Rec } from "../lib/studio";
+
+export interface PageDomainsProps {
+  pageId: string;
+  /** Called after a URL was added or removed, so the page list and status refresh. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+const SELECT = "border-input bg-background h-9 rounded-md border px-2 text-sm";
+
+/** The slash-led path the API stores: "" and "/" are the root. */
+export function normalizePath(raw: string): string {
+  const p = raw.trim().replace(/\/+$/, "");
+  return p ? (p.startsWith("/") ? p : `/${p}`) : "/";
+}
+
+/** A subdomain label: lowercase letters, digits and hyphens, not starting or ending with a hyphen. Empty means the apex. */
+export function validSubdomain(raw: string): boolean {
+  const s = raw.trim();
+  return s === "" || s === "@" || /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/i.test(s);
+}
+
+export function PageDomains({ pageId, onChanged, className }: PageDomainsProps) {
+  const base = `/landing-pages/${encodeURIComponent(pageId)}`;
+  const { ask, dialog, failure } = useConfirmAction();
+  const bindings = useG8Query((signal) => g8Get(`${base}/bindings`, undefined, { signal }), [pageId]);
+  const domains = useG8Query((signal) => g8Get("/landing-pages/domains", undefined, { signal }), []);
+  const [domainId, setDomainId] = useState("");
+  const [subdomain, setSubdomain] = useState("");
+  const [path, setPath] = useState("");
+
+  const exportHtml = useG8Mutation(async () => {
+    const d = asRec((await g8Get(`${base}/export`)).data);
+    const html = text(d.html) || text(d.html_output);
+    if (!html) throw new Error("This page has no HTML to download yet.");
+    const url = URL.createObjectURL(new Blob([html], { type: "text/html" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${(text(d.name) || pageId).replace(/[^a-z0-9-_]+/gi, "-").toLowerCase()}.html`;
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+  const changed = (): void => { void bindings.refetch(); onChanged?.(); };
+  const rows = rowsOf<Rec>(bindings.data?.data, "bindings");
+  const primary = asRec(asRec(bindings.data?.data).primary);
+  const available = rowsOf<Rec>(domains.data?.data, "domains");
+  const chosen = available.find((d) => String(d.id) === domainId);
+  const publishable = available.filter((d) => num(d.id) != null && d.inboxkit_connected === true);
+  const formOk = Boolean(chosen) && validSubdomain(subdomain);
+
+  const publish = (): void => {
+    if (!chosen) return;
+    const host = [subdomain.trim() && subdomain.trim() !== "@" ? subdomain.trim() : "", text(chosen.domain)].filter(Boolean).join(".");
+    const url = `https://${host}${normalizePath(path)}`;
+    ask({
+      tier: "external",
+      title: `Publish this page at ${url}`,
+      confirmLabel: "Publish",
+      description: "The page goes live at this address and anyone with the link can see it. A URL already used by another page is refused, nothing is replaced.",
+      run: () => g8Post(`${base}/publish`, { domain_id: Number(chosen.id), subdomain: subdomain.trim() === "@" ? "" : subdomain.trim(), path: normalizePath(path) }),
+      onDone: () => { setSubdomain(""); setPath(""); changed(); },
+    });
+  };
+
+  const remove = (b: Rec): void => {
+    const hostname = text(b.hostname);
+    const bindingPath = text(b.path, "/");
+    ask({
+      tier: "destructive",
+      title: `Take down ${hostname}${bindingPath === "/" ? "" : bindingPath}`,
+      confirmLabel: "Remove URL",
+      affected: 1,
+      description: "This URL stops serving the page. Links to it in ads and emails will 404. The page and its other URLs stay; DNS records are not touched.",
+      tolerateStatus: [404],
+      run: () => g8Delete(`${base}/bindings`, { query: { hostname, path: bindingPath } }),
+      onDone: changed,
+    });
+  };
+
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <SectionCard title="Live URLs" description="Every address that serves this page."
+          actions={<Button size="sm" variant="outline" loading={exportHtml.loading} onClick={() => void exportHtml.mutate(undefined)}><Download className="size-4" />Download HTML</Button>}>
+          {exportHtml.error ? <ApiError error={exportHtml.error} title="Could not download the page" /> : null}
+          {bindings.error ? <ApiError error={bindings.error} title="Could not load the URLs" onRetry={() => void bindings.refetch()} /> : bindings.loading && !bindings.data ? (
+            <Skeleton className="h-16 w-full" aria-busy="true" />
+          ) : rows.length === 0 ? (
+            <EmptyState compact title="No custom URLs" description={text(primary.published_url) ? `Live at ${text(primary.published_url)}.` : "This page is not published to a custom domain yet."} />
+          ) : (
+            <ul className="grid gap-2">
+              {rows.map((b) => (
+                <li key={`${text(b.hostname)}${text(b.path)}`} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                  <div className="min-w-0">
+                    <span className="block truncate text-sm font-medium">{text(b.published_url) || `${text(b.hostname)}${text(b.path)}`}</span>
+                    <span className="text-muted-foreground block text-xs">{b.published_at ? `Published ${shortDate(b.published_at)}` : "Published"}</span>
+                  </div>
+                  <Button size="sm" variant="ghost" aria-label={`Remove ${text(b.hostname)}`} onClick={() => remove(b)}>Remove</Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </SectionCard>
+
+        <SectionCard title="Publish to a domain" description="Choose one of your connected domains, then an optional subdomain and path.">
+          {domains.error ? <ApiError error={domains.error} title="Could not load your domains" onRetry={() => void domains.refetch()} /> : domains.loading && !domains.data ? (
+            <Skeleton className="h-16 w-full" aria-busy="true" />
+          ) : publishable.length === 0 ? (
+            <EmptyState compact title="No connected domains" description="Connect a domain for hosting first. The shared default domain is published from the Edit tab." />
+          ) : (
+            <form className="grid gap-3 sm:grid-cols-3" onSubmit={(e) => { e.preventDefault(); if (formOk) publish(); }}>
+              <div>
+                <Label htmlFor="pd-domain" className="mb-1">Domain</Label>
+                <select id="pd-domain" className={`${SELECT} w-full`} value={domainId} onChange={(e) => setDomainId(e.target.value)}>
+                  <option value="">Choose a domain</option>
+                  {publishable.map((d) => <option key={String(d.id)} value={String(d.id)}>{text(d.domain)}</option>)}
+                </select>
+              </div>
+              <div>
+                <Label htmlFor="pd-sub" className="mb-1">Subdomain (optional)</Label>
+                <Input id="pd-sub" value={subdomain} placeholder="www or empty for the root" onChange={(e) => setSubdomain(e.target.value)} aria-invalid={!validSubdomain(subdomain)} />
+              </div>
+              <div>
+                <Label htmlFor="pd-path" className="mb-1">Path (optional)</Label>
+                <Input id="pd-path" value={path} placeholder="/pricing" onChange={(e) => setPath(e.target.value)} />
+              </div>
+              {!validSubdomain(subdomain) ? <p role="alert" className="text-error-foreground text-xs sm:col-span-3">A subdomain can only hold letters, numbers and hyphens.</p> : null}
+              <div className="sm:col-span-3"><Button type="submit" disabled={!formOk}>Publish to this domain</Button></div>
+            </form>
+          )}
+        </SectionCard>
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}