@graph8/sdk 0.308.1 → 0.357.0

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

@@ -0,0 +1,163 @@
+"use client";
+
+/**
+ * ContentLibrary: the content inventory (blogs, website pages, posts) with filters, add, edit and SEO enrichment.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listContentPages    GET    /content/pages?content_type&content_status&limit&offset  (read)
+ *   2. createContentPage   POST   /content/pages                                          (write; registers a URL)
+ *   3. getContentPage      GET    /content/pages/{id}                                      (read; loads the editor)
+ *   4. updateContentPage   PATCH  /content/pages/{id}                                      (write)
+ *   5. enrichContentPage   POST   /content/pages/{id}/enrich-seo                           (billable)
+ *   6. deleteContentPage   DELETE /content/pages/{id}                                      (destructive)
+ *
+ * Enrich and delete go through ConfirmSpendDialog. Delete is refused by the API when a calendar entry or
+ * grid row still references the page; the error is shown as-is. The API's `force=true` override is deliberately not offered here.
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Input, Label, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } from "@graph8/sdk/ui";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+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";
+
+export interface ContentLibraryProps {
+  pageSize?: number;
+  className?: string;
+}
+
+const TYPES = ["", "website", "blog", "linkedin", "newsletter"];
+const STATUSES = ["", "idea", "in_progress", "done", "published", "rejected"];
+const label = (v: string) => (v ? v.replace(/_/g, " ") : "all");
+
+type Action = { kind: "enrich" | "delete"; page: ContentPageRow };
+
+function Select({ id, value, options, onChange }: { id: string; value: string; options: string[]; onChange: (v: string) => void }) {
+  return (
+    <select id={id} aria-label={id} value={value} onChange={(e) => onChange(e.target.value)} className="border-input bg-background h-9 rounded-md border px-2 text-sm capitalize">
+      {options.map((o) => <option key={o} value={o}>{label(o)}</option>)}
+    </select>
+  );
+}
+
+function EditSheet({ pageId, onClose, onSaved }: { pageId: string; onClose: () => void; onSaved: () => 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);
+  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(); } });
+  return (
+    <Sheet open onOpenChange={(open) => { if (!open) onClose(); }}>
+      <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>Edit content</SheetTitle>
+          <SheetDescription>{text(d.url)}</SheetDescription>
+        </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" /> : (
+            <>
+              <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>
+              <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>
+            </>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export function ContentLibrary({ pageSize = 25, className }: 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 [action, setAction] = useState<Action | null>(null);
+
+  const list = useG8Query(
+    (signal) => g8Get("/content/pages", { content_type: type || undefined, content_status: status || undefined, is_owned: true, limit: pageSize, offset }, { signal }),
+    [type, status, offset, pageSize],
+  );
+  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(); } },
+  );
+
+  const data = asRec(list.data?.data);
+  const pages = rowsOf<ContentPageRow>(data, "pages");
+  const total = num(data.total) ?? pages.length;
+  // Deleting the last row of the last page leaves the offset past the end; step back to the previous page.
+  useEffect(() => { if (!list.loading && !list.error && pages.length === 0 && offset > 0) setOffset(Math.max(0, offset - pageSize)); }, [list.loading, list.error, pages.length, offset, pageSize]);
+  const name = (p: ContentPageRow) => p.title || p.url;
+
+  return (
+    <div className={className}>
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <Select id="Content type" value={type} options={TYPES} onChange={(v) => { setType(v); setOffset(0); }} />
+        <Select id="Content status" value={status} options={STATUSES} onChange={(v) => { setStatus(v); setOffset(0); }} />
+        <div className="ml-auto flex gap-2">
+          <Input aria-label="Page URL" placeholder="https://example.com/blog/post" value={url} onChange={(e) => setUrl(e.target.value)} className="w-72" />
+          <Button disabled={!url.trim()} loading={add.loading} onClick={() => void add.mutate(url.trim())}>Add page</Button>
+        </div>
+      </div>
+      {list.error ? <ApiError error={list.error} onRetry={() => void list.refetch()} /> : null}
+      {add.error ? <ApiError error={add.error} title="Could not add that page" /> : null}
+      {run.error ? <ApiError error={run.error} title="That action failed" /> : null}
+
+      {list.loading && !list.data ? (
+        <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+      ) : !list.error && pages.length === 0 ? (
+        <EmptyState title="No content yet" description="Add the URL of a page you publish, or import a sitemap, to start tracking it." />
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow><TableHead>Title</TableHead><TableHead>Type</TableHead><TableHead>Status</TableHead><TableHead>SEO score</TableHead><TableHead className="text-right">Actions</TableHead></TableRow>
+          </TableHeader>
+          <TableBody>
+            {pages.map((p) => (
+              <TableRow key={p.id}>
+                <TableCell><button type="button" className="text-left font-medium hover:underline" onClick={() => setEditing(p.id)}>{name(p)}</button><div className="text-muted-foreground text-xs">{p.url}</div></TableCell>
+                <TableCell className="capitalize">{label(text(p.content_type, "website"))}</TableCell>
+                <TableCell className="capitalize">{label(text(p.content_status, "idea"))}</TableCell>
+                <TableCell>{p.seo_score ?? "-"}</TableCell>
+                <TableCell className="space-x-1 text-right">
+                  <Button size="sm" variant="outline" onClick={() => setAction({ kind: "enrich", page: p })}>Enrich SEO</Button>
+                  <Button size="sm" variant="ghost" aria-label={`Delete ${name(p)}`} onClick={() => setAction({ kind: "delete", page: p })}>Delete</Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+      <div className="mt-3 flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">{total} {total === 1 ? "item" : "items"}</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>
+        </div>
+      </div>
+
+      {editing ? <EditSheet pageId={editing} onClose={() => setEditing(null)} onSaved={() => void list.refetch()} /> : null}
+      {action ? (
+        <ConfirmSpendDialog open tier={action.kind === "enrich" ? "billable" : "destructive"}
+          title={action.kind === "enrich" ? `Enrich SEO for "${name(action.page)}"` : `Delete "${name(action.page)}"`}
+          description={action.kind === "enrich" ? "Pulls rankings, backlinks and keyword data from a paid provider." : "The page leaves your content inventory."}
+          confirmLabel={action.kind === "enrich" ? "Enrich" : "Delete"} affected={action.kind === "delete" ? 1 : undefined}
+          confirming={run.loading} onConfirm={() => void run.mutate(action)} onCancel={() => setAction(null)} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,253 @@
+"use client";
+
+/**
+ * PageEditor (lite): edit a landing page as structured sections, not a WYSIWYG canvas.
+ *
+ * Each section is a card; every text field of its `content` is an input. Saving a section sends the whole
+ * section content back (the API replaces it). Freeform pages have no sections: the editor shows the page
+ * details and the preview link, and edits to the HTML itself go through your own tooling or the graph8 app.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. getLandingPage                 GET   /landing-pages/{id}                 (read; sections, status, URL)
+ *   2. updateLandingPage              PATCH /landing-pages/{id}                 (write; name, slug, description)
+ *   3. updateLandingPageSection       PATCH /landing-pages/{id}/sections/{idx}  (write; one section's content)
+ *   4. createLandingPagePreviewLink   GET   /landing-pages/{id}/preview         (read; opens a private preview)
+ *   5. listLandingPageVersions        GET   /landing-pages/{id}/versions        (read)
+ *   6. restoreLandingPageVersion      POST  /landing-pages/{id}/versions/{n}/restore (write; snapshots first)
+ *   7. publishLandingPage             POST  /landing-pages/{id}/publish         (external: public URL)
+ *   8. unpublishLandingPage           POST  /landing-pages/{id}/unpublish       (external)
+ *
+ * Publish and unpublish go through ConfirmSpendDialog. A published page keeps serving its published HTML
+ * until it is published again, so saving a section does not change the live page.
+ */
+
+import { useState } from "react";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { asRec, liveUrl, rowsOf, shortDate, text } from "../lib/studio";
+import type { LandingSection, Rec } from "../lib/studio";
+
+export interface PageEditorProps {
+  pageId: string;
+  /** Called after a successful save of any part of the page. */
+  onSaved?: () => void;
+  className?: string;
+}
+
+function isScalar(v: unknown): v is string | number {
+  return typeof v === "string" || typeof v === "number";
+}
+
+interface SectionCardProps {
+  index: number;
+  section: LandingSection;
+  pageId: string;
+  onSaved: () => void;
+}
+
+/**
+ * One section: the scalar fields of its content are editable, anything nested is kept untouched.
+ * Only the fields the person changed are held as `edits`, shown over the server copy. A refetch (another section
+ * saved, a restore, a publish) therefore never wipes unsaved typing; `edits` is cleared only by this card's own save.
+ */
+function SectionCard({ index, section, pageId, onSaved }: SectionCardProps) {
+  const content: Rec = asRec(section.content);
+  const [edits, setEdits] = useState<Rec>({});
+  const fields = Object.keys(content).filter((k) => isScalar(content[k]));
+  const dirty = fields.some((k) => k in edits && edits[k] !== content[k]);
+  const save = useG8Mutation(
+    () => g8Patch(`/landing-pages/${encodeURIComponent(pageId)}/sections/${index}`, { content: { ...content, ...edits } }),
+    { onSuccess: () => { setEdits({}); onSaved(); } },
+  );
+  return (
+    <Card data-testid={`section-${index}`}>
+      <CardHeader>
+        <CardTitle className="text-sm capitalize">
+          {index + 1}. {text(section.type, "section").replace(/[_-]/g, " ")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {fields.length === 0 ? <p className="text-muted-foreground text-sm">This section has no plain text fields to edit here.</p> : null}
+        {fields.map((key) => {
+          const id = `s${index}-${key}`;
+          const current = key in edits ? edits[key] : content[key];
+          const numeric = typeof content[key] === "number";
+          const value = text(current);
+          if (numeric) {
+            // Numbers stay numbers: the endpoint replaces the content, and a "3" where a 3 was breaks renderers.
+            return (
+              <div key={key} className="space-y-1">
+                <Label htmlFor={id}>{key.replace(/_/g, " ")}</Label>
+                <Input id={id} type="number" value={value} onChange={(e) => setEdits({ ...edits, [key]: e.target.value === "" ? 0 : Number(e.target.value) })} />
+              </div>
+            );
+          }
+          const onChange = (e: { target: { value: string } }) => setEdits({ ...edits, [key]: e.target.value });
+          return (
+            <div key={key} className="space-y-1">
+              <Label htmlFor={id}>{key.replace(/_/g, " ")}</Label>
+              {value.length > 80 ? <Textarea id={id} rows={3} value={value} onChange={onChange} /> : <Input id={id} value={value} onChange={onChange} />}
+            </div>
+          );
+        })}
+        {save.error ? <ApiError error={save.error} title="Could not save this section" /> : null}
+        <Button size="sm" disabled={!dirty} loading={save.loading} onClick={() => void save.mutate(undefined)}>
+          Save section
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+type Meta = Partial<Record<"name" | "slug" | "description", string>>;
+
+/** Same idea as SectionCard: only changed fields are held, so a refetch never wipes them. Keyed by page id only. */
+function DetailsCard({ pageId, data, onSaved }: { pageId: string; data: Rec; onSaved: () => void }) {
+  const [edits, setEdits] = useState<Meta>({});
+  const save = useG8Mutation(() => g8Patch(`/landing-pages/${encodeURIComponent(pageId)}`, edits), { onSuccess: () => { setEdits({}); onSaved(); } });
+  const val = (k: keyof Meta) => edits[k] ?? text(data[k]);
+  return (
+    <Card className="mb-4">
+      <CardHeader>
+        <CardTitle className="text-sm">Page details</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-3 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Label htmlFor="pg-name">Name</Label>
+          <Input id="pg-name" value={val("name")} onChange={(e) => setEdits({ ...edits, name: e.target.value })} />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="pg-slug">Slug</Label>
+          <Input id="pg-slug" value={val("slug")} onChange={(e) => setEdits({ ...edits, slug: e.target.value })} />
+        </div>
+        <div className="space-y-1 sm:col-span-2">
+          <Label htmlFor="pg-desc">Description</Label>
+          <Textarea id="pg-desc" rows={2} value={val("description")} onChange={(e) => setEdits({ ...edits, description: e.target.value })} />
+        </div>
+        {save.error ? (
+          <div className="sm:col-span-2">
+            <ApiError error={save.error} title="Could not save the details" />
+          </div>
+        ) : null}
+        <div>
+          <Button size="sm" disabled={Object.keys(edits).length === 0} loading={save.loading} onClick={() => void save.mutate(undefined)}>
+            Save details
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function PageEditor({ pageId, onSaved, className }: PageEditorProps) {
+  const base = `/landing-pages/${encodeURIComponent(pageId)}`;
+  const page = useG8Query((signal) => g8Get(base, undefined, { signal }), [pageId]);
+  const versions = useG8Query((signal) => g8Get(`${base}/versions`, undefined, { signal }), [pageId]);
+  const [confirm, setConfirm] = useState<"publish" | "unpublish" | null>(null);
+  const data = asRec(page.data?.data);
+
+  const refresh = () => {
+    void page.refetch();
+    void versions.refetch();
+    onSaved?.();
+  };
+  const toggle = useG8Mutation((kind: "publish" | "unpublish") => g8Post(`${base}/${kind}`), {
+    onSuccess: () => {
+      setConfirm(null);
+      refresh();
+    },
+  });
+  const restore = useG8Mutation((n: number) => g8Post(`${base}/versions/${n}/restore`), { onSuccess: refresh });
+  const preview = useG8Mutation(() => g8Get(`${base}/preview`), {
+    onSuccess: (res) => {
+      const url = text(asRec(res.data).url) || text(asRec(res.data).preview_url);
+      if (url && typeof window !== "undefined") window.open(url, "_blank", "noopener,noreferrer");
+    },
+  });
+
+  if (page.loading && !page.data) {
+    return (
+      <div className={className} aria-busy="true">
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+  if (page.error) return <ApiError error={page.error} onRetry={() => void page.refetch()} />;
+
+  const sections = Array.isArray(data.sections) ? (data.sections as LandingSection[]) : null;
+  const published = text(data.status) === "published";
+  const url = liveUrl(data);
+  const history = rowsOf<Rec>(versions.data?.data, "versions");
+  const name = text(data.name, "this page");
+
+  return (
+    <div className={className}>
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <h2 className="text-lg font-semibold">{text(data.name, "Untitled page")}</h2>
+        <span className="text-muted-foreground text-sm">
+          {text(data.status, "draft")}
+          {url ? ` · ${url}` : ""}
+        </span>
+        <div className="ml-auto flex gap-2">
+          <Button variant="outline" loading={preview.loading} onClick={() => void preview.mutate(undefined)}>
+            Preview
+          </Button>
+          <Button onClick={() => setConfirm(published ? "unpublish" : "publish")}>{published ? "Unpublish" : "Publish"}</Button>
+        </div>
+      </div>
+      {preview.error ? <ApiError error={preview.error} title="Could not open the preview" /> : null}
+      {toggle.error ? <ApiError error={toggle.error} title="Could not change the publish state" /> : null}
+
+      <DetailsCard key={`${pageId}-${text(data.id)}`} pageId={pageId} data={data} onSaved={refresh} />
+
+      {sections === null ? (
+        <p className="text-muted-foreground mb-4 text-sm">This is a freeform page, so it has no sections to edit here. Use Preview to review it.</p>
+      ) : (
+        <div className="mb-4 space-y-3">
+          {sections.map((s, i) => (
+            <SectionCard key={`${pageId}-${i}-${text(s.type)}`} index={i} section={s} pageId={pageId} onSaved={refresh} />
+          ))}
+        </div>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Versions</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {history.length ? <p className="text-muted-foreground text-xs">Restore replaces the current content. The current state is saved as a version first, so it can be restored again.</p> : null}
+          {restore.error ? <ApiError error={restore.error} title="Could not restore that version" /> : null}
+          {history.length === 0 ? <p className="text-muted-foreground text-sm">No saved versions yet. Edits made with AI snapshot the page first.</p> : null}
+          {history.map((v) => (
+            <div key={text(v.id)} className="flex items-center gap-3 text-sm">
+              <span className="font-medium">v{text(v.version_num)}</span>
+              <span className="text-muted-foreground flex-1 truncate">
+                {text(v.edit_summary) || text(v.edit_instruction) || "Saved version"} · {shortDate(v.created_at)}
+              </span>
+              <Button size="sm" variant="outline" disabled={restore.loading} title="Replaces the current content; the current state is saved as a version first" onClick={() => void restore.mutate(Number(v.version_num))}>
+                Restore
+              </Button>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      {confirm ? (
+        <ConfirmSpendDialog
+          open
+          tier="external"
+          title={confirm === "publish" ? `Publish "${name}"` : `Unpublish "${name}"`}
+          description={confirm === "publish" ? "The page goes live on a public URL." : "Every URL this page served stops resolving."}
+          confirmLabel={confirm === "publish" ? "Publish" : "Unpublish"}
+          confirming={toggle.loading}
+          onConfirm={() => void toggle.mutate(confirm)}
+          onCancel={() => setConfirm(null)}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,159 @@
+"use client";
+
+/**
+ * PageList: every landing page in the workspace, with status filter, create, publish, unpublish, delete.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listLandingPages      GET    /landing-pages?status&limit&offset   (read)
+ *   2. createLandingPage     POST   /landing-pages                       (billable when `generate` is true)
+ *   3. publishLandingPage    POST   /landing-pages/{id}/publish          (external: puts the page on a public URL)
+ *   4. unpublishLandingPage  POST   /landing-pages/{id}/unpublish        (external: the URL stops resolving)
+ *   5. deleteLandingPage     DELETE /landing-pages/{id}                  (destructive)
+ *
+ * Billable, external and destructive calls always open ConfirmSpendDialog first. "Blank page" sends
+ * `generate: false`, which is a plain write and needs no confirmation.
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton } from "@graph8/sdk/ui";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+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 type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
+import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
+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;
+  pageSize?: number;
+  className?: string;
+}
+
+type Pending =
+  | { kind: "create"; name: string }
+  | { kind: "publish" | "unpublish" | "delete"; page: LandingPageRow };
+
+const FILTERS: Array<{ value: string; label: string }> = [
+  { value: "", label: "All" },
+  { value: "draft", label: "Drafts" },
+  { value: "published", label: "Published" },
+];
+
+function confirmCopy(p: Pending): { tier: ConfirmTier; title: string; description: string; label: string; recipients?: number; affected?: number } {
+  if (p.kind === "create") {
+    return { tier: "billable", title: `Generate "${p.name || "Untitled page"}" with AI`, description: "Writes the copy and layout for the whole page and spends credits.", label: "Generate" };
+  }
+  if (p.kind === "publish") {
+    return { tier: "external", title: `Publish "${p.page.name}"`, description: "The page goes live on a public URL and anyone with the link can see it.", label: "Publish" };
+  }
+  if (p.kind === "unpublish") {
+    return { tier: "external", title: `Unpublish "${p.page.name}"`, description: "Every URL this page served stops resolving. Links in ads and emails will 404.", label: "Unpublish" };
+  }
+  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) {
+  const [status, setStatus] = useState("");
+  const [offset, setOffset] = useState(0);
+  const [name, setName] = useState("");
+  const [pending, setPending] = useState<Pending | null>(null);
+
+  const list = useG8Query(
+    (signal) => g8Get("/landing-pages", { status: status || undefined, limit: pageSize, offset }, { signal }),
+    [status, offset, pageSize],
+  );
+  const run = useG8Mutation(async (p: Pending) => {
+    if (p.kind === "create") return g8Post("/landing-pages", { name: p.name || undefined, generate: true });
+    const base = `/landing-pages/${encodeURIComponent(p.page.id)}`;
+    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(); } });
+  const blank = useG8Mutation((title: string) => g8Post("/landing-pages", { name: title || undefined, generate: false }), {
+    onSuccess: (res) => {
+      setName("");
+      const id = text(asRec(res.data).id);
+      if (id) onOpen?.(id);
+      else void list.refetch();
+    },
+  });
+
+  const data = asRec(list.data?.data);
+  const pages = rowsOf<LandingPageRow>(data, "landing_pages");
+  const total = num(data.total) ?? pages.length;
+  // Deleting the last row of the last page leaves the offset past the end; step back to the previous page.
+  useEffect(() => { if (!list.loading && !list.error && pages.length === 0 && offset > 0) setOffset(Math.max(0, offset - pageSize)); }, [list.loading, list.error, pages.length, offset, pageSize]);
+  const copy = pending ? confirmCopy(pending) : null;
+
+  return (
+    <div className={className}>
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <div className="flex gap-1" role="tablist" aria-label="Status">
+          {FILTERS.map((f) => (
+            <Button key={f.value} size="sm" variant={status === f.value ? "default" : "outline"} onClick={() => { setStatus(f.value); setOffset(0); }}>
+              {f.label}
+            </Button>
+          ))}
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          <Input aria-label="New page name" placeholder="Page name" value={name} onChange={(e) => setName(e.target.value)} className="w-56" />
+          <Button variant="outline" loading={blank.loading} onClick={() => blank.mutate(name)}>Blank page</Button>
+          <Button onClick={() => setPending({ kind: "create", name })}>Generate with AI</Button>
+        </div>
+      </div>
+
+      {list.error ? <ApiError error={list.error} onRetry={() => void list.refetch()} /> : null}
+      {run.error ? <ApiError error={run.error} title="That action failed" /> : null}
+      {blank.error ? <ApiError error={blank.error} title="Could not create the page" /> : null}
+
+      {list.loading && !list.data ? (
+        <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+      ) : !list.error && pages.length === 0 ? (
+        <EmptyState title="No landing pages yet" description="Generate a page with AI or start from a blank one, then edit its sections." />
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Sections</TableHead><TableHead>Updated</TableHead><TableHead className="text-right">Actions</TableHead></TableRow>
+          </TableHeader>
+          <TableBody>
+            {pages.map((page) => {
+              const live = page.status === "published";
+              return (
+                <TableRow key={page.id}>
+                  <TableCell>
+                    <button type="button" className="font-medium hover:underline" onClick={() => onOpen?.(page.id)}>{page.name || "Untitled page"}</button>
+                    {page.published_url ? <div className="text-muted-foreground text-xs">{page.published_url}</div> : null}
+                  </TableCell>
+                  <TableCell>{page.status}</TableCell>
+                  <TableCell>{page.generation_mode === "freeform" ? "Freeform" : page.section_count ?? 0}</TableCell>
+                  <TableCell>{shortDate(page.updated_at)}</TableCell>
+                  <TableCell className="space-x-1 text-right">
+                    <Button size="sm" variant="outline" onClick={() => setPending({ kind: live ? "unpublish" : "publish", page })}>{live ? "Unpublish" : "Publish"}</Button>
+                    <Button size="sm" variant="ghost" aria-label={`Delete ${page.name}`} onClick={() => setPending({ kind: "delete", page })}>Delete</Button>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+
+      <div className="mt-3 flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">{total} {total === 1 ? "page" : "pages"}</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>
+        </div>
+      </div>
+
+      {pending && copy ? (
+        <ConfirmSpendDialog open tier={copy.tier} title={copy.title} description={copy.description} confirmLabel={copy.label}
+          affected={copy.affected} confirming={run.loading} onConfirm={() => void run.mutate(pending)} onCancel={() => setPending(null)} />
+      ) : null}
+    </div>
+  );
+}