@graph8/sdk 0.358.0 → 0.362.0

package/blocks/nurture/components/nurture-screen.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+/**
+ * NurtureScreen: the finished nurture workspace. No props needed.
+ *
+ * Composes: ScreenLayout (title, stats), Toolbar (search, status filter), SplitView + DetailPanel (selected
+ * nurture, deep link `?id=`), FormSheet (new nurture via NurtureForm), NurtureStats (overview and results),
+ * NurtureEnroll (audience list, consent, Go live), NurtureForm in edit mode (settings).
+ *
+ * The detail panel (`?id=`) has Overview, Details (every field and each email), Audience and launch, and Settings;
+ * `&view=full` shows it as a full page.
+ *
+ * User flows: see every nurture with its state, search and filter, create a nurture (sender mailbox, audience,
+ * email steps), open one to read its results, choose the audience and add selected contacts, tick consent and go
+ * live (confirmed with the audience size), pause, resume (confirmed), duplicate, edit settings and archive
+ * (confirmed). Connecting a mailbox needs Google or Microsoft sign-in, which only exists in the graph8 app, so
+ * the create sheet links out when no mailbox is connected.
+ *
+ * SDK operations: listNurtures, listMyMailboxes (only to detect "no mailbox"), pauseNurture, resumeNurture
+ * (external-style confirm), duplicateNurture, deleteNurture (destructive, confirmed); the rest live in the parts.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Copy, ExternalLink, HeartHandshake, Pause, Play, Plus, Trash2 } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { isDrafted, isFinished, isLiveLike, isNurtureOff, isPaused, statusOf } from "../lib/nurture-types";
+import type { ListOption, MailboxOption, Nurture } from "../lib/nurture-types";
+import { NurtureEnroll } from "./nurture-enroll";
+import { NurtureForm } from "./nurture-form";
+import { NurtureStats } from "./nurture-stats";
+
+export interface NurtureScreenProps {
+  /** Where a person connects a mailbox (Google and Microsoft sign-in only works in the graph8 app). */
+  connectMailboxUrl?: string;
+  /** Contact ids (for example selected elsewhere) offered as "add to the audience" in the launch tab. */
+  contactIds?: readonly number[];
+  renderRowActions?: (nurture: Nurture) => ReactNode;
+  renderDetailActions?: (nurture: Nurture) => ReactNode;
+  /** Shown in the launch tab for adding people to the audience (for example a contact picker from your CRM page). */
+  renderAudienceTools?: (nurture: Nurture) => ReactNode;
+  extraDetailTabs?: { id: string; label: string; render: (nurture: Nurture) => ReactNode }[];
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+const SELECT = "border-input bg-background h-9 rounded-md border px-2 text-sm";
+
+function toneOf(n: Nurture): Tone {
+  if (isLiveLike(n)) return "positive";
+  if (isPaused(n)) return "warning";
+  if (isFinished(n)) return "neutral";
+  return "info";
+}
+
+function matchesFilter(n: Nurture, f: string): boolean {
+  if (!f) return true;
+  if (f === "drafted") return isDrafted(n);
+  if (f === "live") return isLiveLike(n);
+  if (f === "paused") return isPaused(n);
+  return isFinished(n);
+}
+
+interface StepRow { step_order?: number; time_interval?: number; step_data?: { subject?: string; body?: string } }
+
+const when = (v: string | null | undefined): string => (v ? new Date(v).toLocaleString() : "");
+const yesNo = (v: boolean | undefined, fallback: boolean): string => ((v ?? fallback) ? "Yes" : "No");
+
+/** Every field of one nurture, its audience and sender by name, and each email of the series. */
+function NurtureDetails({ nurtureId }: { nurtureId: string }) {
+  const one = useG8Query((signal) => g8Get<Nurture>(`/nurtures/${encodeURIComponent(nurtureId)}`, {}, { signal }).then((r) => r.data), [nurtureId]);
+  const lists = useG8Query((signal) => g8Get<ListOption[]>("/lists", { limit: 200 }, { signal }).then((r) => r.data ?? []), []);
+  const boxes = useG8Query((signal) => g8Get<{ mailboxes?: MailboxOption[] }>("/mailboxes/my", {}, { signal }).then((r) => r.data?.mailboxes ?? []), []);
+  if (one.error) return <ApiError error={one.error} title="Could not load the nurture" onRetry={() => void one.refetch()} />;
+  if (!one.data) return <Skeleton className="h-40 w-full" aria-busy="true" />;
+  const n = one.data;
+  const list = (lists.data ?? []).find((l) => l.id === n.associated_list_id);
+  const box = (boxes.data ?? []).find((m) => m.id === n.pinned_mailbox_id);
+  const steps = Array.isArray(n.steps) ? (n.steps as StepRow[]) : [];
+  return (
+    <div className="grid gap-4">
+      <KeyValueList
+        columns={2}
+        items={[
+          { label: "Name", value: n.name },
+          { label: "Status", value: statusOf(n) },
+          { label: "Description", value: n.description || "Not set" },
+          { label: "Audience list", value: list ? `${list.title} (${(list.contact_count ?? 0).toLocaleString()})` : n.associated_list_id ? `List ${n.associated_list_id}` : "None yet" },
+          { label: "Sends from", value: box?.email ?? (n.pinned_mailbox_id ? `Mailbox ${n.pinned_mailbox_id}` : "Not set") },
+          { label: "Stops on reply", value: yesNo(n.finish_on_reply, true) },
+          { label: "One thread", value: yesNo(n.send_in_same_thread, true) },
+          { label: "Opt-out line", value: yesNo(n.include_unsubscribe_cta, true) },
+          { label: "Shared", value: yesNo(n.is_shared, false) },
+          { label: "Created", value: when(n.created_at) || "Not set" },
+          { label: "Updated", value: when(n.updated_at) || "Not set" },
+          { label: "Nurture id", value: n.id },
+        ]}
+      />
+      <SectionCard title="Emails" description={steps.length ? "In the order they are sent." : "The series has no emails to show."}>
+        <ol className="grid gap-2">
+          {steps.map((st, i) => (
+            <li key={st.step_order ?? i} className="rounded-md border p-3 text-sm">
+              <p className="font-medium">{i + 1}. {st.step_data?.subject || "No subject"}</p>
+              <p className="text-muted-foreground text-xs">{i === 0 ? "Sent first, when you go live" : waitText(Math.round((st.time_interval ?? 0) / 86400))}</p>
+              {st.step_data?.body ? <p className="mt-1 whitespace-pre-wrap">{st.step_data.body}</p> : null}
+            </li>
+          ))}
+        </ol>
+      </SectionCard>
+    </div>
+  );
+}
+
+/** "Wait 1 day" / "Wait 3 days" after the previous email (`time_interval` is seconds). */
+function waitText(days: number): string {
+  return `Wait ${days} ${days === 1 ? "day" : "days"} after the previous email`;
+}
+
+export function NurtureScreen({ connectMailboxUrl = "https://app.graph8.com", contactIds, renderRowActions, renderDetailActions, renderAudienceTools, extraDetailTabs, toolbarActions, className }: NurtureScreenProps) {
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expandProps = { onExpand: () => setView("full"), onCollapse: view === "full" ? () => setView(null) : undefined };
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [toResume, setToResume] = useState<Nurture | null>(null);
+  const [toArchive, setToArchive] = useState<Nurture | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  const list = useG8Query((signal) => g8Get<{ nurtures?: Nurture[] }>("/nurtures", { page: 1, limit: 100 }, { signal }).then((r) => r.data?.nurtures ?? []), []);
+  const mailboxes = useG8Query((signal) => g8Get<{ mailboxes?: MailboxOption[] }>("/mailboxes/my", {}, { signal }).then((r) => (r.data?.mailboxes ?? []).filter((m) => !m.is_archived)), [], { enabled: creating });
+
+  const act = useG8Mutation((a: { kind: "pause" | "duplicate"; nurture: Nurture }) => g8Post(`/nurtures/${encodeURIComponent(a.nurture.id)}/${a.kind}`, a.kind === "duplicate" ? {} : undefined), { onSuccess: () => void list.refetch() });
+  const run = async (kind: "pause" | "duplicate", nurture: Nurture): Promise<void> => {
+    setBusy(`${kind}:${nurture.id}`);
+    await act.mutate({ kind, nurture });
+    setBusy(null);
+  };
+  const resume = useG8Mutation((n: Nurture) => g8Post(`/nurtures/${encodeURIComponent(n.id)}/resume`), { onSuccess: () => { setToResume(null); void list.refetch(); } });
+  const archive = useG8Mutation((n: Nurture) => g8Delete(`/nurtures/${encodeURIComponent(n.id)}`), {
+    onSuccess: (_r, n) => { setToArchive(null); if (n.id === id) setId(null); void list.refetch(); },
+  });
+
+  if (isNurtureOff(list.error)) {
+    return <ScreenLayout title="Nurture" description="Lifecycle email series for people who agreed to hear from you." icon={<HeartHandshake className="size-5" />}><EmptyState title="Nurture is not enabled" description="Nurture is switched off for this workspace. Ask graph8 to turn it on, then reload." /></ScreenLayout>;
+  }
+
+  const all = list.data ?? [];
+  const q = search.trim().toLowerCase();
+  const shown = all.filter((n) => matchesFilter(n, filter) && (!q || n.name.toLowerCase().includes(q)));
+  const selected = all.find((n) => n.id === id);
+  const noMailbox = creating && !mailboxes.loading && (mailboxes.data ?? []).length === 0 && !mailboxes.error;
+
+  const rows = list.error ? <ApiError error={list.error} title="Could not load nurtures" onRetry={() => void list.refetch()} /> : list.loading && !list.data ? (
+    <div aria-busy="true" className="grid gap-2"><Skeleton className="h-16 w-full" /><Skeleton className="h-16 w-full" /><Skeleton className="h-16 w-full" /></div>
+  ) : shown.length === 0 ? (
+    <EmptyState icon={<HeartHandshake className="size-8" />} title={all.length === 0 ? "No nurtures yet" : "No nurtures match"} description={all.length === 0 ? "A nurture sends a short series of emails to people who agreed to hear from you, and stops for each person when they reply." : "Try another search or status."} action={all.length === 0 ? <Button onClick={() => setCreating(true)}>New nurture</Button> : undefined} />
+  ) : (
+    <ul className="grid gap-2">
+      {shown.map((n) => (
+        <li key={n.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-md border p-3 ${n.id === id ? "bg-muted" : ""}`}>
+          <button type="button" className="min-w-0 flex-1 text-left" onClick={() => setId(n.id)}>
+            <span className="block truncate font-medium">{n.name}</span>
+            <span className="text-muted-foreground block text-xs">{Array.isArray(n.steps) && n.steps.length > 0 ? `${n.steps.length} ${n.steps.length === 1 ? "email" : "emails"}` : "Series"}{n.is_shared ? " · shared" : ""}</span>
+          </button>
+          <StatusPill tone={toneOf(n)}>{statusOf(n)}</StatusPill>
+          <div className="flex gap-1">
+            {isLiveLike(n) ? <Button size="sm" variant="ghost" aria-label={`Pause ${n.name}`} loading={busy === `pause:${n.id}`} disabled={busy !== null} onClick={() => void run("pause", n)}><Pause className="size-4" /></Button> : null}
+            {isPaused(n) ? <Button size="sm" variant="ghost" aria-label={`Resume ${n.name}`} onClick={() => setToResume(n)}><Play className="size-4" /></Button> : null}
+            <Button size="sm" variant="ghost" aria-label={`Duplicate ${n.name}`} loading={busy === `duplicate:${n.id}`} disabled={busy !== null} onClick={() => void run("duplicate", n)}><Copy className="size-4" /></Button>
+            {!isFinished(n) ? <Button size="sm" variant="ghost" aria-label={`Archive ${n.name}`} onClick={() => setToArchive(n)}><Trash2 className="size-4" /></Button> : null}
+            {renderRowActions?.(n)}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+
+  const detail = selected ? (
+    <DetailPanel
+      title={selected.name}
+      subtitle={selected.description ?? undefined}
+      badges={<StatusPill tone={toneOf(selected)}>{statusOf(selected)}</StatusPill>}
+      actions={renderDetailActions?.(selected)}
+      onClose={() => { setId(null); setView(null); }}
+      {...expandProps}
+      tabs={[
+        { id: "overview", label: "Overview", content: <NurtureStats key={selected.id} nurtureId={selected.id} /> },
+        { id: "details", label: "Details", content: <NurtureDetails key={selected.id} nurtureId={selected.id} /> },
+        { id: "launch", label: "Audience and launch", content: (
+          <div className="grid gap-4">
+            <NurtureEnroll key={selected.id} nurtureId={selected.id} contactIds={contactIds} onLaunched={() => void list.refetch()} />
+            <SectionCard title="Add people to the audience" description="Enrolling means putting a contact in the audience list. Add people to that list from your contacts, or import a list, before you go live.">
+              {renderAudienceTools?.(selected)}
+            </SectionCard>
+          </div>
+        ) },
+        ...(!isFinished(selected) ? [{ id: "settings", label: "Settings", content: <NurtureForm key={selected.id} nurture={selected} onSaved={() => void list.refetch()} /> }] : []),
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selected) })),
+      ]}
+    />
+  ) : null;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Nurture"
+      description="Lifecycle email series for people who agreed to hear from you."
+      icon={<HeartHandshake className="size-5" />}
+      actions={<Button size="sm" onClick={() => setCreating(true)}><Plus className="size-4" />New nurture</Button>}
+      stats={[
+        { label: "Nurtures", value: all.length.toLocaleString() },
+        { label: "Live", value: all.filter(isLiveLike).length.toLocaleString(), tone: "positive" },
+        { label: "Drafted", value: all.filter(isDrafted).length.toLocaleString() },
+        { label: "Paused", value: all.filter(isPaused).length.toLocaleString(), tone: "warning" },
+      ]}
+      toolbar={(
+        <Toolbar
+          search={{ value: search, onChange: setSearch, placeholder: "Search nurtures" }}
+          filters={(
+            <select aria-label="Nurture status" className={SELECT} value={filter} onChange={(e) => setFilter(e.target.value)}>
+              <option value="">All statuses</option><option value="drafted">Drafted</option><option value="live">Live</option><option value="paused">Paused</option><option value="finished">Finished</option>
+            </select>
+          )}
+          actions={toolbarActions}
+        />
+      )}
+    >
+      {act.error ? <ApiError error={act.error} title="That did not work" /> : null}
+      <SplitView list={rows} detail={detail} detailOpen={Boolean(selected)} onCloseDetail={() => { setId(null); setView(null); }} expanded={view === "full"} onExpandedChange={(e) => setView(e ? "full" : null)} detailWidth="xl" />
+      <FormSheet open={creating} onOpenChange={setCreating} title="New nurture" description="Pick the sender and the audience, then write the emails. Nothing is sent until you go live.">
+        <div className="grid gap-4">
+          {noMailbox ? (
+            <SectionCard title="Connect a mailbox first" description="A nurture sends from one connected mailbox. Google and Microsoft sign-in only works inside graph8.">
+              <a className="inline-flex items-center gap-1 text-sm underline" href={connectMailboxUrl} target="_blank" rel="noreferrer">Connect in graph8 <ExternalLink className="size-3.5" /></a>
+            </SectionCard>
+          ) : null}
+          {creating ? <NurtureForm onCancel={() => setCreating(false)} onSaved={(created) => { setCreating(false); void list.refetch(); setId(created.id); }} /> : null}
+        </div>
+      </FormSheet>
+      <ConfirmSpendDialog
+        open={toResume !== null}
+        tier="external"
+        title={`Resume ${toResume?.name ?? "this nurture"}?`}
+        description={<><p>Emails start going out again to the contacts who have not finished it.</p>{resume.error ? <ApiError error={resume.error} title="Could not resume" /> : null}</>}
+        confirmLabel="Resume"
+        confirming={resume.loading}
+        onCancel={() => setToResume(null)}
+        onConfirm={() => { if (toResume) void resume.mutate(toResume); }}
+      />
+      <ConfirmSpendDialog
+        open={toArchive !== null}
+        tier="destructive"
+        title={`Archive ${toArchive?.name ?? "this nurture"}?`}
+        description={<><p>{toArchive && isLiveLike(toArchive) ? "It is paused and wound down first, then archived. Contacts stop receiving its emails." : "It is archived and no longer runs."}</p>{archive.error ? <ApiError error={archive.error} title="Could not archive" /> : null}</>}
+        confirmLabel="Archive"
+        confirming={archive.loading}
+        onCancel={() => setToArchive(null)}
+        onConfirm={() => { if (toArchive) void archive.mutate(toArchive); }}
+      />
+    </ScreenLayout>
+  );
+}

package/blocks/pages/README.md

@@ -3,8 +3,20 @@
 Editable React screens for the marketing-site side of a product: landing pages (list, section editor, publish),
 a content library, the brand kit and SEO audits. Install with `npx @graph8/sdk add pages`.
 
+## Screens
+
+`PagesScreen` (`components/pages-screen.tsx`) is the finished page: landing pages with the editor beside the list, plus content, brand kit and SEO tabs.
+
+```tsx
+import { PagesScreen } from "@/g8/pages/components/pages-screen";
+export default function Page() { return <PagesScreen />; }
+```
+
+Flows: list and filter landing pages, create blank (free) or with AI (confirmed spend), open one (deep link `?id=`) to edit sections, preview, restore a version, publish or unpublish (confirmed) and delete (confirmed); manage the content library; re-scan the brand kit; run SEO audits. Needs the proxy prefixes listed under Prerequisites. Optional props: `defaultDomain`, `renderDetailActions`, `extraDetailTabs`, `toolbarActions`.
+
 | Component | What it is |
 |---|---|
+| `PagesScreen` | The finished page: landing pages with the editor beside them, content, brand kit and SEO tabs. |
 | `PageList` | Landing pages with a status filter; create blank or with AI; publish, unpublish, delete. |
 | `PageEditor` | Lite editor: page details, one card per section (its text fields), preview, version restore, publish. Not a WYSIWYG canvas. |
 | `ContentLibrary` | Content inventory (blogs, website pages): filters, add by URL, edit sheet, SEO enrichment, delete. |

package/blocks/pages/block.json

@@ -45,6 +45,13 @@
     "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post"
   ],
   "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": []
+    },
     {
       "name": "PageList",
       "file": "components/page-list.tsx",
@@ -218,6 +225,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

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

@@ -23,12 +23,15 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
-import { asRec, num, rowsOf, text } from "../lib/studio";
-import type { ContentPageRow } from "../lib/studio";
+import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
+import type { ContentPageRow, Rec } from "../lib/studio";
 
 export interface ContentLibraryProps {
   pageSize?: number;
   className?: string;
+  /** Controlled: the content item whose full record is open (for a `?id=` deep link). */
+  selectedId?: string | null;
+  onSelectedChange?: (id: string | null) => void;
 }
 
 const TYPES = ["", "website", "blog", "linkedin", "newsletter"];
@@ -45,7 +48,22 @@ function Select({ id, value, options, onChange }: { id: string; value: string; o
   );
 }
 
-function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () => void; onSaved: () => void }) {
+/** Every read-only field the content record carries (labels and keys come from the Studio content response). */
+function contentFacts(d: Rec): Array<[string, string]> {
+  const n = (k: string): string => (d[k] == null ? "" : text(d[k]));
+  const yes = (k: string): string => (d[k] == null ? "" : d[k] ? "Yes" : "No");
+  return [
+    ["Type", label(text(d.content_type, "website"))], ["Source", n("source")], ["Domain", n("domain")], ["Owned", yes("is_owned")],
+    ["H1", n("h1")], ["Meta description", n("meta_description")], ["Words", n("word_count")], ["Crawl status", n("crawl_status")],
+    ["SEO score", n("seo_score")], ["AEO score", n("aeo_score")], ["Freshness", n("freshness_score")], ["Priority", n("priority_score")],
+    ["Authority", n("authority_score")], ["Backlinks", n("backlinks_total")], ["Referring domains", n("referring_domains_count")], ["Organic keywords", n("organic_keywords_count")],
+    ["Keyword position", n("primary_keyword_position")], ["Keyword volume", n("primary_keyword_volume")], ["LLM grade", n("llm_grade")], ["Cited by LLMs", yes("llm_cited")],
+    ["AI overview", yes("ai_overview_present")], ["Clicks", n("gsc_clicks")], ["Impressions", n("gsc_impressions")], ["CTR", n("gsc_ctr")], ["Search position", n("gsc_position")],
+    ["Published", shortDate(d.published_at)], ["Last crawled", shortDate(d.last_crawled_at)], ["Created", shortDate(d.created_at)], ["Last synced", shortDate(d.semrush_last_synced)],
+  ];
+}
+
+function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onClose: () => void; onSaved: () => void; onAction: (kind: "enrich" | "delete", page: ContentPageRow) => void }) {
   const detail = useG8Query((signal) => g8Get(`/content/pages/${encodeURIComponent(pageId)}`, undefined, { signal }), [pageId]);
   const [form, setForm] = useState({ title: "", primary_keyword: "", content_status: "idea", body_content: "" });
   const d = asRec(detail.data?.data);
@@ -64,6 +82,15 @@ function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () =
           {detail.error ? <ApiError error={detail.error} onRetry={() => void detail.refetch()} /> : null}
           {detail.loading && !detail.data ? <Skeleton className="h-32 w-full" /> : (
             <>
+              <dl className="grid grid-cols-2 gap-2 text-sm">
+                {contentFacts(d).map(([k, v]) => (
+                  <div key={k}><dt className="text-muted-foreground text-xs">{k}</dt><dd className="truncate" title={v}>{v || "Not set"}</dd></div>
+                ))}
+              </dl>
+              <div className="flex gap-2">
+                <Button size="sm" variant="outline" onClick={() => onAction("enrich", { id: pageId, url: text(d.url), title: text(d.title) })}>Enrich SEO</Button>
+                <Button size="sm" variant="ghost" onClick={() => onAction("delete", { id: pageId, url: text(d.url), title: text(d.title) })}>Delete page</Button>
+              </div>
               <div className="space-y-1"><Label htmlFor="cl-title">Title</Label><Input id="cl-title" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></div>
               <div className="space-y-1"><Label htmlFor="cl-kw">Primary keyword</Label><Input id="cl-kw" value={form.primary_keyword} onChange={(e) => setForm({ ...form, primary_keyword: e.target.value })} /></div>
               <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>
@@ -78,12 +105,15 @@ function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () =
   );
 }
 
-export function ContentLibrary({ pageSize = 25, className }: ContentLibraryProps) {
+export function ContentLibrary({ pageSize = 25, className, selectedId, onSelectedChange }: ContentLibraryProps) {
   const [type, setType] = useState("");
   const [status, setStatus] = useState("");
   const [offset, setOffset] = useState(0);
   const [url, setUrl] = useState("");
-  const [editing, setEditing] = useState<string | null>(null);
+  const [localEditing, setLocalEditing] = useState<string | null>(null);
+  const controlled = onSelectedChange !== undefined;
+  const editing = controlled ? (selectedId ?? null) : localEditing;
+  const setEditing = (id: string | null): void => (controlled ? onSelectedChange?.(id) : setLocalEditing(id));
   const [action, setAction] = useState<Action | null>(null);
 
   const list = useG8Query(
@@ -93,7 +123,7 @@ export function ContentLibrary({ pageSize = 25, className }: ContentLibraryProps
   const add = useG8Mutation((u: string) => g8Post("/content/pages", { url: u, content_type: type || "website" }), { onSuccess: () => { setUrl(""); void list.refetch(); } });
   const run = useG8Mutation(
     (a: Action) => (a.kind === "enrich" ? g8Post(`/content/pages/${encodeURIComponent(a.page.id)}/enrich-seo`) : g8Delete(`/content/pages/${encodeURIComponent(a.page.id)}`)),
-    { onSuccess: () => { setAction(null); void list.refetch(); } },
+    { onSuccess: (_r, a) => { setAction(null); if (a.kind === "delete" && a.page.id === editing) setEditing(null); void list.refetch(); } },
   );
 
   const data = asRec(list.data?.data);
@@ -150,7 +180,7 @@ export function ContentLibrary({ pageSize = 25, className }: ContentLibraryProps
         </div>
       </div>
 
-      {editing ? <EditSheet pageId={editing} onClose={() => setEditing(null)} onSaved={() => void list.refetch()} /> : null}
+      {editing ? <EditSheet pageId={editing} onClose={() => setEditing(null)} onSaved={() => void list.refetch()} onAction={(kind, page) => setAction({ kind, page })} /> : null}
       {action ? (
         <ConfirmSpendDialog open tier={action.kind === "enrich" ? "billable" : "destructive"}
           title={action.kind === "enrich" ? `Enrich SEO for "${name(action.page)}"` : `Delete "${name(action.page)}"`}

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

@@ -29,6 +29,8 @@ import type { LandingPageRow } from "../lib/studio";
 export interface PageListProps {
   /** Called with the page id when a row is opened. Wire it to your PageEditor route. */
   onOpen?: (pageId: string) => void;
+  /** Called with the page id after a page is deleted (for example to close it if it is open beside the list). */
+  onDeleted?: (pageId: string) => void;
   pageSize?: number;
   className?: string;
 }
@@ -56,7 +58,7 @@ function confirmCopy(p: Pending): { tier: ConfirmTier; title: string; descriptio
   return { tier: "destructive", title: `Delete "${p.page.name}"`, description: "The page and its version history are removed.", label: "Delete", affected: 1 };
 }
 
-export function PageList({ onOpen, pageSize = 25, className }: PageListProps) {
+export function PageList({ onOpen, onDeleted, pageSize = 25, className }: PageListProps) {
   const [status, setStatus] = useState("");
   const [offset, setOffset] = useState(0);
   const [name, setName] = useState("");
@@ -72,7 +74,7 @@ export function PageList({ onOpen, pageSize = 25, className }: PageListProps) {
     if (p.kind === "publish") return g8Post(`${base}/publish`);
     if (p.kind === "unpublish") return g8Post(`${base}/unpublish`);
     return g8Delete(base);
-  }, { onSuccess: () => { setPending(null); void list.refetch(); } });
+  }, { onSuccess: (_res, p) => { setPending(null); void list.refetch(); if (p.kind === "delete") onDeleted?.(p.page.id); } });
   const blank = useG8Mutation((title: string) => g8Post("/landing-pages", { name: title || undefined, generate: false }), {
     onSuccess: (res) => {
       setName("");

package/blocks/pages/components/pages-screen.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * PagesScreen: the finished marketing-site workspace. No props needed.
+ *
+ * Composes: ScreenLayout (title, tabs, stats), SplitView + DetailPanel (landing page list and the selected
+ * page's editor, deep link `?id=`), PageList (list, filter, blank or AI create, publish, unpublish, delete),
+ * PageEditor (details, sections, preview, versions, publish), ContentLibrary, BrandKitEditor, SeoReport.
+ *
+ * Every record is deep-linkable: `?id=` opens a landing page (Edit and Details tabs) or, on the Content tab
+ * (`?tab=content`), a content item with all of its fields and actions; the Brand kit tab is the one brand record.
+ * `&view=full` shows the open record as a full page.
+ *
+ * User flows: see every landing page with its state, create one (blank is free, AI is a confirmed spend), open it
+ * beside the list, edit its sections, preview, restore a version, publish or unpublish (confirmed), delete
+ * (confirmed); manage the content inventory (add by URL, edit, SEO enrichment, delete); re-scan the brand kit and
+ * choose page layouts; run an SEO audit and track keywords. The editor changes text fields of sections-mode pages;
+ * freeform HTML pages can be previewed, published and versioned, and their HTML is edited in the graph8 app.
+ *
+ * SDK operations: listLandingPages (for the headline numbers only); everything else lives in the composed parts,
+ * which confirm every publish, unpublish, delete, AI generation and paid audit.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Globe } from "lucide-react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
+import type { LandingPageRow } from "../lib/studio";
+import { BrandKitEditor } from "./brand-kit-editor";
+import { ContentLibrary } from "./content-library";
+import { PageEditor } from "./page-editor";
+import { PageList } from "./page-list";
+import { SeoReport } from "./seo-report";
+
+export interface PagesScreenProps {
+  /** Prefill the SEO audit domain. */
+  defaultDomain?: string;
+  renderDetailActions?: (pageId: string) => ReactNode;
+  extraDetailTabs?: { id: string; label: string; render: (pageId: string) => ReactNode }[];
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+type Tab = "pages" | "content" | "brand" | "seo";
+
+/** Every field of one landing page (name and slug are edited in the Edit tab). */
+function PageDetails({ pageId }: { pageId: string }) {
+  const res = useG8Query((signal) => g8Get(`/landing-pages/${encodeURIComponent(pageId)}`, undefined, { signal }), [pageId]);
+  if (res.error) return <ApiError error={res.error} title="Could not load the page" onRetry={() => void res.refetch()} />;
+  if (!res.data) return <Skeleton className="h-32 w-full" aria-busy="true" />;
+  const d = asRec(res.data.data);
+  const n = (k: string): string => (d[k] == null || d[k] === "" ? "Not set" : text(d[k]));
+  const sections = Array.isArray(d.sections) ? d.sections.length : null;
+  return (
+    <KeyValueList
+      columns={2}
+      items={[
+        { label: "Name", value: n("name") },
+        { label: "Status", value: n("status") },
+        { label: "Slug", value: n("slug") },
+        { label: "Mode", value: d.generation_mode === "freeform" ? "Freeform HTML" : "Sections" },
+        { label: "Sections", value: sections == null ? "None (freeform)" : String(sections) },
+        { label: "Live URL", value: n("published_url") },
+        { label: "Description", value: n("description") },
+        { label: "Created", value: shortDate(d.created_at) || "Not set" },
+        { label: "Updated", value: shortDate(d.updated_at) || "Not set" },
+        { label: "Page id", value: n("id") },
+        ...(d.error_message ? [{ label: "Last error", value: text(d.error_message) }] : []),
+      ]}
+    />
+  );
+}
+
+export function PagesScreen({ defaultDomain, renderDetailActions, extraDetailTabs, toolbarActions, className }: PagesScreenProps) {
+  const [tabParam, setTabParam] = useUrlState("tab", "pages");
+  const tab = (["pages", "content", "brand", "seo"].includes(tabParam) ? tabParam : "pages") as Tab;
+  const [pageId, setPageId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expandProps = { onExpand: () => setView("full"), onCollapse: view === "full" ? () => setView(null) : undefined };
+  // The list owns its own fetch; bumping this remounts it after the editor changed something (publish, rename).
+  const [rev, setRev] = useState(0);
+  const pages = useG8Query((signal) => g8Get("/landing-pages", { limit: 100 }, { signal }), [rev]);
+  const data = asRec(pages.data?.data);
+  const rows = rowsOf<LandingPageRow>(data, "landing_pages");
+  const total = num(data.total) ?? rows.length;
+  const published = rows.filter((p) => p.status === "published").length;
+  const current = tab === "pages" ? rows.find((p) => p.id === pageId) : undefined;
+
+  const detail = tab === "pages" && pageId ? (
+    <DetailPanel
+      title={current?.name || "Landing page"}
+      subtitle={current?.published_url ?? undefined}
+      badges={current ? <StatusPill tone={current.status === "published" ? "positive" : "neutral"}>{current.status}</StatusPill> : undefined}
+      actions={renderDetailActions?.(pageId)}
+      onClose={() => { setPageId(null); setView(null); }}
+      {...expandProps}
+      tabs={[
+        { id: "edit", label: "Edit", content: <PageEditor key={pageId} pageId={pageId} onSaved={() => setRev((r) => r + 1)} /> },
+        { id: "details", label: "Details", content: <PageDetails key={`${pageId}:${rev}`} pageId={pageId} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(pageId) })),
+      ]}
+    />
+  ) : null;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Pages"
+      description="Landing pages, your content library, the brand kit and SEO in one place."
+      icon={<Globe className="size-5" />}
+      actions={toolbarActions}
+      tabs={[
+        { id: "pages", label: "Landing pages", count: total },
+        { id: "content", label: "Content" },
+        { id: "brand", label: "Brand kit" },
+        { id: "seo", label: "SEO" },
+      ]}
+      activeTab={tab}
+      onTabChange={(id) => { setTabParam(id === "pages" ? null : id); setPageId(null); setView(null); }}
+      stats={tab === "pages" ? [
+        { label: "Landing pages", value: total.toLocaleString() },
+        { label: "Published", value: published.toLocaleString(), tone: "positive" },
+        { label: "Drafts", value: Math.max(0, rows.length - published).toLocaleString() },
+      ] : undefined}
+    >
+      {tab === "pages" ? (
+        <>
+          {pages.error ? <ApiError error={pages.error} title="Could not load landing pages" onRetry={() => void pages.refetch()} /> : null}
+          <SplitView
+            detailOpen={Boolean(pageId)}
+            onCloseDetail={() => { setPageId(null); setView(null); }}
+            expanded={view === "full"}
+            onExpandedChange={(e) => setView(e ? "full" : null)}
+            detailWidth="xl"
+            list={<PageList key={rev} onOpen={(id) => setPageId(id)} onDeleted={(id) => { if (id === pageId) { setPageId(null); setView(null); } setRev((r) => r + 1); }} />}
+            detail={detail}
+          />
+        </>
+      ) : tab === "content" ? <ContentLibrary selectedId={pageId || null} onSelectedChange={(id) => setPageId(id)} />
+        : tab === "brand" ? <BrandKitEditor />
+        : <SeoReport defaultDomain={defaultDomain} />}
+    </ScreenLayout>
+  );
+}

package/blocks/quotes/README.md

@@ -11,6 +11,22 @@ Install with `npx @graph8/sdk add quotes`.
 | `QuoteViewer` | One quote with totals and status-based actions: send/resend, edit as draft, duplicate, delete. |
 | `SignatureStatus` | Envelope state, signers, activity, reminder. |
 
+## Screens
+
+`QuotesScreen` (`components/quotes-screen.tsx`): `<QuotesScreen />`, optionally `dealId` or `companyId` to scope it.
+
+- Headline numbers by status (drafts, out for signature, accepted, declined) and the quote list with its status filter.
+- Open a quote (deep link `?id=<quote id>`): line items, totals, signer, signature progress, with the actions its status
+  allows. Send, resend, signature reminder and edit-as-draft are external and confirmed; delete is destructive and
+  confirmed; duplicate and saving a draft email nobody.
+- **New quote** asks for the deal first (search by name, skipped when `dealId` is given because graph8 attaches every
+  quote to a deal), then opens the builder (details, signer, line items from the quotable products, live totals).
+- Edit a draft from the viewer in a side sheet.
+- Slots, all optional: `renderDetailActions(quoteId)`, `extraDetailTabs`, `toolbarActions`.
+
+The deal search calls `GET /deals`, so the key also needs `deals:read` and the proxy `allowedPrefixes` need `deals`.
+
+
 ## Flow, in order (and the ids passed between steps)
 
 1. `GET /quotable-products` -> items with `prices[]`. A line item needs `stripe_product_id` + `stripe_price_id`, or `manual_product_id`
@@ -71,6 +87,7 @@ and **delete** (destructive). From code, never call `sendQuote` without the pers
 | `duplicateQuote` | POST `/api/v1/quotes/{quote_id}/duplicate` | external | `quotes:run` |
 | `deleteQuote` | DELETE `/api/v1/quotes/{quote_id}` | destructive | `quotes:delete` |
 | `resendEnvelope` | POST `/api/v1/envelopes/{envelope_id}/resend` | external | `quotes:run` |
+| `listDeals` | GET `/api/v1/deals` | read | `deals:read` (the deal picker in QuotesScreen) |
 
 ## Recipes