@graph8/sdk 0.370.0 → 0.373.0

package/blocks/social-ads/components/creative-concepts.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+/**
+ * CreativeConcepts: a concept board. Describe the ad and get 3 to 6 creative directions to react to before any image is
+ * generated; nothing is saved. Pick the one you like and hand its brief to your generator.
+ *
+ * SDK operations:
+ *   1. generateAdConcepts  POST /ad-creatives/concepts { brief?, count }   (BILLABLE, confirmed; one AI pass; saves nothing)
+ *
+ * The API quotes no price in advance and the balance is not checked here, so the dialog says what runs. Each concept is
+ * a name, a hook, a tone, a layout and two brand colours. `onUse` receives a ready-to-use brief for the chosen concept.
+ */
+import { useState } from "react";
+import { Button, Input, Label } 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 { g8Post } from "@/g8/lib/g8-client";
+import { rowsOf, str } from "../lib/ads-extra";
+import type { Rec } from "../lib/ads-extra";
+
+export interface CreativeConceptsProps {
+  /** Called with a brief built from the chosen concept (its name, hook, tone and layout). */
+  onUse?: (brief: string, concept: Rec) => void;
+  className?: string;
+}
+
+/** A hex colour the API sent, or undefined: a rogue value is never put in a style. */
+export function safeHex(v: unknown): string | undefined {
+  const t = str(v);
+  return /^#[0-9a-f]{3,8}$/i.test(t) ? t : undefined;
+}
+
+export function conceptBrief(c: Rec): string {
+  const tone = rowsOf<string>(c.tone).map(String).join(", ");
+  return [`Concept: ${str(c.name)}.`, str(c.hook) ? `Hook: ${str(c.hook)}.` : "", tone ? `Tone: ${tone}.` : "", str(c.layout) ? `Layout: ${str(c.layout)}.` : ""].filter(Boolean).join(" ");
+}
+
+export function CreativeConcepts({ onUse, className }: CreativeConceptsProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const [brief, setBrief] = useState("");
+  const [count, setCount] = useState(4);
+  const [items, setItems] = useState<Rec[] | null>(null);
+  const go = (): void => ask({
+    tier: "billable", title: `Get ${count} creative concepts`, confirmLabel: "Get concepts",
+    description: "One AI pass writes the directions. Nothing is saved and no image is generated. Uses credits; the API gives no price in advance and your balance is not checked here.",
+    run: async () => { const res = await g8Post("/ad-creatives/concepts", { brief: brief.trim() || undefined, count }); setItems(rowsOf<Rec>(res.data, "concepts")); },
+  });
+  return (
+    <SectionCard className={className} title="Concept board" description="React to a few directions before generating anything.">
+      <form className="mb-3 flex flex-wrap items-end gap-2" onSubmit={(e) => { e.preventDefault(); go(); }}>
+        <div className="min-w-60 flex-1"><Label htmlFor="cc-brief" className="mb-1">Brief for the concepts</Label><Input id="cc-brief" value={brief} maxLength={2000} onChange={(e) => setBrief(e.target.value)} /></div>
+        <div><Label htmlFor="cc-count" className="mb-1">How many</Label><select id="cc-count" className="border-input bg-background h-9 rounded-md border px-2 text-sm" value={count} onChange={(e) => setCount(Number(e.target.value))}>{[3, 4, 5, 6].map((n) => <option key={n} value={n}>{n}</option>)}</select></div>
+        <Button type="submit">Get concepts</Button>
+      </form>
+      {items === null ? <EmptyState compact title="No concepts yet" /> : items.length === 0 ? <EmptyState compact title="No concepts came back" description="Try a more specific brief." /> : (
+        <ul className="grid gap-3 sm:grid-cols-2">
+          {items.map((c, i) => (
+            <li key={i} className="grid gap-1 rounded-md border p-3">
+              <div className="flex items-center gap-2"><span className="size-4 rounded border" style={{ background: safeHex(c.bg) }} aria-hidden /><span className="size-4 rounded border" style={{ background: safeHex(c.accent) }} aria-hidden /><span className="text-sm font-medium">{str(c.name)}</span></div>
+              <p className="text-sm">{str(c.hook)}</p>
+              <p className="text-muted-foreground text-xs">{rowsOf<string>(c.tone).join(", ")}{str(c.layout) ? ` · ${str(c.layout)}` : ""}</p>
+              {onUse ? <div><Button size="sm" variant="outline" aria-label={`Use ${str(c.name)}`} onClick={() => onUse(conceptBrief(c), c)}>Use this concept</Button></div> : null}
+            </li>
+          ))}
+        </ul>
+      )}
+      {failure ? <ApiError error={failure} title="Could not get concepts" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </SectionCard>
+  );
+}

package/blocks/social-ads/components/creative-detail.tsx

@@ -3,7 +3,8 @@
 /**
  * CreativeDetail: the complete screen for one AI ad creative. Finds it by id (so `?id=` deep links work), shows the image and every
  * copy field, and offers every action: edit headline, primary text, description and call to action; make a new image (billable);
- * move it to the gallery; delete. A creative that is still generating re-reads itself until it finishes.
+ * move it to the gallery; delete. A creative that is still generating re-reads itself until it finishes. The AI tools tab edits by
+ * instruction, rewrites a field, reviews, makes other sizes and more (CreativeTools); Revisions lists and restores earlier versions.
  *
  * SDK operations, in order:
  *   1. listAdCreatives          GET    /ad-creatives?limit=100                   (read)
@@ -28,6 +29,8 @@ import { StatusPill } from "@/g8/components/screen/status-pill";
 import type { AdCreative } from "../lib/social-ads-types";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { CreativeRevisions } from "./creative-revisions";
+import { CreativeTools } from "./creative-tools";
 
 export interface CreativeDetailProps {
   creativeId: string;
@@ -139,6 +142,8 @@ export function CreativeDetail({ creativeId, onClose, onExpand, onCollapse, onCh
         </SectionCard>
       ),
     },
+    { id: "ai", label: "AI tools", content: <CreativeTools creativeId={creativeId} platform={creative.platform} status={creative.status} onChanged={changed} /> },
+    { id: "revisions", label: "Revisions", content: <CreativeRevisions creativeId={creativeId} onRestored={changed} /> },
   ];
   return (
     <>

package/blocks/social-ads/components/creative-gallery.tsx

@@ -7,7 +7,7 @@
  *
  * SDK operations, in order:
  *   1. getAdCreativeSpecs       GET    /ad-creatives/specs                         (read)  { platforms, specs: { platform: { format: { label } } }, ctas }
- *   2. listAdCreatives          GET    /ad-creatives?status&platform&limit&offset  (read)  { items }
+ *   2. listAdCreatives          GET    /ad-creatives?status&platform&limit&offset  (read)  { items }; 50 at a time, "Load more" reads the next 50
  *   3. createAdCreative         POST   /ad-creatives { platform, ad_format, prompt, name }  (billable)  ConfirmSpendDialog first; 201 with status "generating"
  *      While any card is `generating` the list is re-read with useJobPoll (no streams) until none is.
  *   5. updateAdCreative         PATCH  /ad-creatives/{id} { headline, primary_text, description, cta }  (write)
@@ -15,6 +15,7 @@
  *   7. moveAdCreativeToGallery  POST   /ad-creatives/{id}/move-to-gallery          (write)  needs the ads launch permission
  *   8. deleteAdCreative         DELETE /ad-creatives/{id}                          (destructive)
  * The API quotes no price for generation: the dialog says credits are used and the balance is not checked here.
+ * A "Concept board" (CreativeConcepts, billable and confirmed) offers directions to react to; choosing one fills the brief.
  */
 
 import { useState } from "react";
@@ -24,9 +25,13 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byOffset, hasNextOf } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
 import { useJobPoll } from "@/g8/hooks/use-job-poll";
 import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { listOf } from "../lib/social-ads-types";
+import { CreativeConcepts } from "./creative-concepts";
 import type { AdCreative } from "../lib/social-ads-types";
 
 export interface CreativeGalleryProps {
@@ -40,6 +45,9 @@ export interface CreativeGalleryProps {
 interface Specs { platforms: string[]; specs: Record<string, Record<string, { label: string }>> }
 type Pending = { kind: "create" } | { kind: "regenerate" | "delete"; creative: AdCreative };
 
+/** Creatives per read; "Load more" appends the next page (the gallery used to stop silently at 50). */
+const CREATIVE_PAGE = 50;
+
 export function CreativeGallery({ status, onSelectCreative, className }: CreativeGalleryProps) {
   const [platform, setPlatform] = useState("");
   const [form, setForm] = useState({ platform: "meta", format: "", prompt: "", name: "" });
@@ -49,8 +57,13 @@ export function CreativeGallery({ status, onSelectCreative, className }: Creativ
   const [failure, setFailure] = useState<unknown>(null);
 
   const specs = useG8Query(async (signal) => (await g8Get<Specs>("/ad-creatives/specs", undefined, { signal })).data, []);
-  const list = useG8Query(async (signal) => listOf<AdCreative>((await g8Get("/ad-creatives", { status, platform: platform || undefined, limit: 50 }, { signal })).data), [status, platform]);
+  const list = useLoadMoreList(byOffset<AdCreative>(CREATIVE_PAGE, async (offset, signal) => {
+    const env = await g8Get("/ad-creatives", { status, platform: platform || undefined, limit: CREATIVE_PAGE, offset: offset || undefined }, { signal });
+    const rows = listOf<AdCreative>(env.data);
+    return { rows, hasNext: hasNextOf(env, CREATIVE_PAGE, rows.length) };
+  }), [status, platform]);
   const items = list.data ?? [];
+  const [boardOpen, setBoardOpen] = useState(false);
   const generating = items.filter((c) => c.status === "generating");
   useJobPoll(async () => (await list.refetch()) ?? ([{ status: "generating" }] as AdCreative[]), { enabled: generating.length > 0, intervalMs: 4000, maxAttempts: 100, isTerminal: (rows) => !rows.some((c) => c.status === "generating") });
 
@@ -122,6 +135,11 @@ export function CreativeGallery({ status, onSelectCreative, className }: Creativ
           </li>
         ))}
       </ul>
+      <LoadMore shown={items.length} noun="creatives" hasMore={list.hasMore} loading={list.loadingMore} onLoadMore={list.loadMore} />
+      <details className="rounded-md border p-3" onToggle={(e) => setBoardOpen((e.currentTarget as HTMLDetailsElement).open)}>
+        <summary className="cursor-pointer text-sm font-medium">Concept board</summary>
+        {boardOpen ? <CreativeConcepts className="mt-3" onUse={(brief) => setForm((f) => ({ ...f, prompt: brief.slice(0, 2000) }))} /> : null}
+      </details>
       <ConfirmSpendDialog open={pending != null} tier={tier}
         title={pending?.kind === "create" ? `Generate a ${form.platform} creative` : pending?.kind === "regenerate" ? `Make a new image for "${name}"` : `Delete "${name}"`}
         description={tier === "billable" ? "Uses credits (copy and image). The API gives no price in advance and your balance is not checked here." : "The creative and its revisions are removed."}

package/blocks/social-ads/components/creative-revisions.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * CreativeRevisions: the saved versions of one ad creative (every edit, rewrite and regeneration is kept), with restore.
+ *
+ * SDK operations:
+ *   1. listAdCreativeRevisions   GET  /ad-creatives/{id}/revisions                    (read; oldest first, as the API returns them)
+ *   2. restoreAdCreativeRevision POST /ad-creatives/{id}/restore-revision { index }   (write; the creative takes that version's copy and image)
+ *
+ * Revisions are open dicts: each row shows whatever of `label`, `source`, `headline` and `created_at` it has. Restoring
+ * asks for a second click because it replaces what the creative shows now.
+ */
+import { useState } from "react";
+import { Button, Skeleton } 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { num, rowsOf, str, whenText } from "../lib/ads-extra";
+import type { Rec } from "../lib/ads-extra";
+
+export interface CreativeRevisionsProps {
+  creativeId: string;
+  /** Called after a revision was restored, so the detail reloads. */
+  onRestored?: () => void;
+  className?: string;
+}
+
+export function CreativeRevisions({ creativeId, onRestored, className }: CreativeRevisionsProps) {
+  const base = `/ad-creatives/${encodeURIComponent(creativeId)}`;
+  const list = useG8Query((signal) => g8Get(`${base}/revisions`, undefined, { signal }), [creativeId]);
+  const rows = rowsOf<Rec>(list.data?.data, "revisions");
+  const [sure, setSure] = useState<number | null>(null);
+  const restore = useG8Mutation((index: number) => g8Post(`${base}/restore-revision`, { index }), { onSuccess: () => { setSure(null); void list.refetch(); onRestored?.(); } });
+  return (
+    <SectionCard className={className} title="Revisions" description="Every change is kept. Restoring one replaces what the creative shows now.">
+      {list.error ? <ApiError error={list.error} title="Could not load the revisions" onRetry={() => void list.refetch()} /> : list.loading && !list.data ? <Skeleton className="h-20 w-full" aria-busy="true" /> : rows.length === 0 ? (
+        <EmptyState compact title="No earlier versions" description="A version is kept each time the creative is edited." />
+      ) : (
+        <ul className="grid gap-2">
+          {rows.map((r, i) => {
+            const index = num(r.index) ?? i;
+            return (
+              <li key={index} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                <div className="min-w-0 text-sm"><span className="font-medium">Version {index + 1}</span>{str(r.label) || str(r.source) ? <span className="text-muted-foreground"> {str(r.label) || str(r.source).replace(/_/g, " ")}</span> : null}<span className="text-muted-foreground block truncate text-xs">{whenText(r.created_at ?? r.at)}{str(r.headline) ? ` · ${str(r.headline)}` : ""}</span></div>
+                {sure === index ? <div className="flex gap-1"><Button size="sm" loading={restore.loading} onClick={() => void restore.mutate(index)}>Replace the current version</Button><Button size="sm" variant="ghost" onClick={() => setSure(null)}>Cancel</Button></div> : <Button size="sm" variant="outline" aria-label={`Restore version ${index + 1}`} onClick={() => setSure(index)}>Restore</Button>}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {restore.error ? <ApiError error={restore.error} title="Could not restore that version" /> : null}
+    </SectionCard>
+  );
+}

package/blocks/social-ads/components/creative-tools.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+/**
+ * CreativeTools: AI help and housekeeping for one ad creative. Describe a change and the creative is edited, rewrite the
+ * copy or one field, review it and apply the exact fixes, make the other sizes, retry a failed generation, send it back
+ * to draft, or keep it as a template.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. chatEditAdCreative         POST /ad-creatives/{id}/chat-edit { instruction }            (BILLABLE, confirmed)
+ *   2. regenerateAdCreativeCopy   POST /ad-creatives/{id}/regenerate-copy                       (BILLABLE, confirmed)
+ *   3. rewriteAdCreativeField     POST /ad-creatives/{id}/rewrite-field { field, instruction }  (BILLABLE, confirmed; the previous text is shown so it can be put back)
+ *   4. reviewAdCreative           POST /ad-creatives/{id}/ai-review { deep }                    (BILLABLE, confirmed; changes nothing)
+ *   5. applyAdCreativeReviewFindings POST /ad-creatives/{id}/ai-review/apply { finding_ids }    (write, free)
+ *   6. createAdCreativeSizeSet    POST /ad-creatives/{id}/size-set { formats? }                 (BILLABLE, confirmed: one new creative per format)
+ *   7. retryAdCreativeGeneration  POST /ad-creatives/{id}/retry                                  (BILLABLE, confirmed; only for a failed creative)
+ *   8. moveAdCreativeToDraft      POST /ad-creatives/{id}/move-to-draft                          (write)
+ *   9. saveAdCreativeAsTemplate   POST /ad-creatives/{id}/save-as-template                       (write)
+ *  10. updateAdCreative           PATCH /ad-creatives/{id} { field }                              (write; "Put the old text back")
+ *
+ * The API quotes no price in advance and the balance is not checked here, so each dialog says what runs and how many
+ * AI passes it is; a quick check runs no model (0 credits). Nothing here publishes or launches an ad.
+ */
+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 { EmptyState } from "@/g8/components/empty-state";
+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 { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { asRec, num, rowsOf, str } from "../lib/ads-extra";
+import type { Rec } from "../lib/ads-extra";
+
+export interface CreativeToolsProps {
+  creativeId: string;
+  platform: string;
+  /** The creative's state: "failed" offers Retry, anything but "draft" offers Move to draft. */
+  status: string;
+  /** Called after the creative changed, so the detail reloads. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+const FIELDS = [
+  { key: "headline", label: "Headline" },
+  { key: "primary_text", label: "Primary text" },
+  { key: "description", label: "Description" },
+] as const;
+const SEVERITY: Record<string, Tone> = { error: "negative", critical: "negative", high: "negative", warning: "warning", medium: "warning", info: "neutral", low: "neutral" };
+const PASS = "Uses credits; the API gives no price in advance and your balance is not checked here.";
+
+export function CreativeTools({ creativeId, platform, status, onChanged, className }: CreativeToolsProps) {
+  const base = `/ad-creatives/${encodeURIComponent(creativeId)}`;
+  const { ask, dialog, failure } = useConfirmAction();
+  const [instruction, setInstruction] = useState("");
+  const [field, setField] = useState<(typeof FIELDS)[number]["key"]>("headline");
+  const [fieldInstruction, setFieldInstruction] = useState("");
+  const [reply, setReply] = useState("");
+  const [previous, setPrevious] = useState<{ field: string; value: string } | null>(null);
+  const [findings, setFindings] = useState<Rec[] | null>(null);
+  const [picked, setPicked] = useState<string[]>([]);
+  const [made, setMade] = useState("");
+  const [formats, setFormats] = useState<string[]>([]);
+  const specs = useG8Query((signal) => g8Get("/ad-creatives/specs", undefined, { signal }), [creativeId]);
+  const platformFormats = Object.entries(asRec(asRec(asRec(specs.data?.data).specs)[platform])).map(([key, v]) => ({ key, label: str(asRec(v).label) || key }));
+
+  const changed = (): void => onChanged?.();
+  const restore = useG8Mutation(() => g8Patch(base, { [previous?.field ?? "headline"]: previous?.value ?? "" }), { onSuccess: () => { setPrevious(null); changed(); } });
+  const apply = useG8Mutation(() => g8Post(`${base}/ai-review/apply`, { finding_ids: picked }), {
+    onSuccess: (res) => {
+      const d = asRec(res.data);
+      const left = new Set(rowsOf<Rec>(asRec(d.review).findings).map((f) => str(f.id)));
+      setFindings((cur) => (cur ?? []).filter((f) => left.has(str(f.id))));
+      setPicked([]);
+      setReply(`Applied ${num(d.applied) ?? 0} fix${num(d.applied) === 1 ? "" : "es"}.`);
+      changed();
+    },
+  });
+  const move = useG8Mutation(() => g8Post(`${base}/move-to-draft`), { onSuccess: changed });
+  const template = useG8Mutation(() => g8Post(`${base}/save-as-template`), { onSuccess: () => setReply("Saved as a template.") });
+
+  const chat = (): void => ask({
+    tier: "billable", title: "Edit this creative with AI", confirmLabel: "Edit with AI",
+    description: `One AI pass applies your instruction to the copy and image. ${PASS}`,
+    run: async () => { const d = asRec((await g8Post(`${base}/chat-edit`, { instruction: instruction.trim() })).data); setReply(str(d.reply) || "Edit applied."); setInstruction(""); }, onDone: changed,
+  });
+  const newCopy = (): void => ask({
+    tier: "billable", title: "Write new copy for this creative", confirmLabel: "Write new copy",
+    description: `One AI pass replaces the headline, primary text and description. The old text is not kept here (use the Revisions tab to go back). ${PASS}`,
+    run: async () => { await g8Post(`${base}/regenerate-copy`); setReply("New copy written."); }, onDone: changed,
+  });
+  const rewrite = (): void => ask({
+    tier: "billable", title: `Rewrite the ${FIELDS.find((f) => f.key === field)?.label.toLowerCase()}`, confirmLabel: "Rewrite",
+    description: `One AI pass rewrites this field only. ${PASS}`,
+    run: async () => { const d = asRec((await g8Post(`${base}/rewrite-field`, { field, instruction: fieldInstruction.trim() })).data); setPrevious({ field, value: str(d.previous_value) }); setFieldInstruction(""); }, onDone: changed,
+  });
+  const review = (deep: boolean): void => ask({
+    tier: "billable", title: deep ? "Review this creative with AI" : "Quick check of this creative", confirmLabel: deep ? "Review with AI" : "Run quick check",
+    estimatedCredits: deep ? undefined : 0,
+    description: deep ? `One AI pass checks the copy quality on top of the built-in checks. ${PASS} Nothing changes.` : "Runs the built-in checks only, no AI model: 0 credits. Nothing changes.",
+    run: async () => { const d = asRec((await g8Post(`${base}/ai-review`, { deep })).data); setFindings(rowsOf<Rec>(d.findings).filter((f) => str(f.id) !== "")); setPicked([]); },
+  });
+  const sizes = (): void => ask({
+    tier: "billable", title: formats.length ? `Make ${formats.length} more size${formats.length === 1 ? "" : "s"}` : `Make every other ${platform} size`, confirmLabel: "Make sizes",
+    description: `Creates one new creative per size with this copy kept word for word; each one generates an image. ${PASS}`,
+    run: async () => { const d = asRec((await g8Post(`${base}/size-set`, formats.length ? { formats } : {})).data); setMade(`${num(d.total) ?? rowsOf(d.ad_creatives).length} new creatives are being made. They appear in the gallery.`); }, onDone: changed,
+  });
+  const retry = (): void => ask({
+    tier: "billable", title: "Retry generating this creative", confirmLabel: "Retry",
+    description: `Runs the generation again from the same brief. ${PASS}`, run: () => g8Post(`${base}/retry`), onDone: changed,
+  });
+
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <SectionCard title="Edit with AI" description="Say what to change, for example: make it punchier and add the free trial.">
+          <form className="grid gap-2" onSubmit={(e) => { e.preventDefault(); if (instruction.trim()) chat(); }}>
+            <Label htmlFor="ct-chat" className="sr-only">What should change</Label>
+            <Textarea id="ct-chat" rows={2} value={instruction} onChange={(e) => setInstruction(e.target.value)} />
+            <div className="flex flex-wrap gap-2"><Button type="submit" disabled={!instruction.trim()}>Edit with AI</Button><Button type="button" variant="outline" onClick={newCopy}>Write all new copy</Button></div>
+          </form>
+        </SectionCard>
+        <SectionCard title="Rewrite one field">
+          <form className="flex flex-wrap items-end gap-2" onSubmit={(e) => { e.preventDefault(); if (fieldInstruction.trim()) rewrite(); }}>
+            <select aria-label="Field to rewrite" className="border-input bg-background h-9 rounded-md border px-2 text-sm" value={field} onChange={(e) => setField(e.target.value as typeof field)}>{FIELDS.map((f) => <option key={f.key} value={f.key}>{f.label}</option>)}</select>
+            <div className="min-w-48 flex-1"><Input aria-label="How to rewrite it" placeholder="Shorter, with a number" value={fieldInstruction} onChange={(e) => setFieldInstruction(e.target.value)} /></div>
+            <Button type="submit" disabled={!fieldInstruction.trim()}>Rewrite</Button>
+          </form>
+          {previous ? (
+            <div className="mt-2 flex items-center gap-2 text-sm" role="status"><span>Rewritten. Before: "{previous.value}"</span><Button size="sm" variant="outline" loading={restore.loading} onClick={() => void restore.mutate(undefined)}>Put the old text back</Button></div>
+          ) : null}
+          {restore.error ? <ApiError error={restore.error} title="Could not put the text back" /> : null}
+        </SectionCard>
+        <SectionCard title="Review" description="Check the creative against ad rules and copy quality."
+          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" /> : 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) => (
+                <li key={str(f.id)} className="flex items-start gap-3 rounded-md border p-3">
+                  <input type="checkbox" className="mt-1" aria-label={`Select ${str(f.title) || str(f.id)}`} checked={picked.includes(str(f.id))} onChange={() => setPicked((c) => (c.includes(str(f.id)) ? c.filter((x) => x !== str(f.id)) : [...c, str(f.id)]))} />
+                  <div className="min-w-0 flex-1"><div className="flex items-center gap-2"><span className="text-sm font-medium">{str(f.title) || str(f.message) || str(f.id)}</span><StatusPill tone={SEVERITY[str(f.severity).toLowerCase()] ?? "neutral"}>{str(f.severity, "note")}</StatusPill></div>{str(f.description) ? <p className="text-muted-foreground text-xs">{str(f.description)}</p> : null}</div>
+                </li>
+              ))}</ul>
+              <div><Button size="sm" loading={apply.loading} disabled={picked.length === 0} onClick={() => void apply.mutate(undefined)}>Apply {picked.length || ""} selected (free)</Button></div>
+            </div>
+          )}
+          {apply.error ? <ApiError error={apply.error} title="Could not apply the fixes" /> : null}
+        </SectionCard>
+        <SectionCard title="Other sizes" description={`Make this creative in the other ${platform} formats with the same copy.`}>
+          {platformFormats.length === 0 ? <p className="text-muted-foreground text-sm">No other formats are listed for {platform}.</p> : (
+            <div className="grid gap-2">
+              <div className="flex flex-wrap gap-3">{platformFormats.map((f) => <label key={f.key} className="flex items-center gap-1 text-sm"><input type="checkbox" checked={formats.includes(f.key)} onChange={() => setFormats((c) => (c.includes(f.key) ? c.filter((x) => x !== f.key) : [...c, f.key]))} />{f.label}</label>)}</div>
+              <div><Button variant="outline" onClick={sizes}>{formats.length ? `Make ${formats.length} selected` : "Make all other sizes"}</Button></div>
+            </div>
+          )}
+          {made ? <p role="status" className="mt-2 text-sm">{made}</p> : null}
+        </SectionCard>
+        <SectionCard title="Housekeeping">
+          <div className="flex flex-wrap gap-2">
+            {status === "failed" ? <Button variant="outline" onClick={retry}>Retry generation</Button> : null}
+            {status !== "draft" && status !== "generating" ? <Button variant="outline" loading={move.loading} onClick={() => void move.mutate(undefined)}>Move back to draft</Button> : null}
+            <Button variant="outline" loading={template.loading} onClick={() => void template.mutate(undefined)}>Save as a template</Button>
+          </div>
+          {[move.error, template.error].filter(Boolean).map((e, i) => <ApiError key={i} error={e} title="That did not work" />)}
+        </SectionCard>
+        {reply ? <p role="status" className="text-sm">{reply}</p> : null}
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}

package/blocks/social-ads/components/post-composer.tsx

@@ -29,6 +29,8 @@ import type { PostVariant, SocialPost } from "../lib/social-ads-types";
 import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface PostComposerProps {
+  /** Start with this AI brief filled in (for example from a post idea). */
+  initialBrief?: string;
   /** Called after a post was saved, scheduled or published. */
   onSaved?: (post: SocialPost, action: "draft" | "scheduled" | "published") => void;
   className?: string;
@@ -37,14 +39,14 @@ export interface PostComposerProps {
 type Action = "schedule" | "publish";
 const newKey = () => globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`;
 
-export function PostComposer({ onSaved, className }: PostComposerProps) {
+export function PostComposer({ initialBrief, onSaved, className }: PostComposerProps) {
   const brand = useBrand();
   const { accounts, loading, error, refetch } = useSocialAccounts();
   const [account, setAccount] = useState("");
   const [body, setBody] = useState("");
   const [imageUrl, setImageUrl] = useState("");
   const [when, setWhen] = useState("");
-  const [brief, setBrief] = useState("");
+  const [brief, setBrief] = useState(initialBrief ?? "");
   const [variants, setVariants] = useState<PostVariant[]>([]);
   const [confirm, setConfirm] = useState<Action | "generate" | null>(null);
   const [notice, setNotice] = useState<string | null>(null);

package/blocks/social-ads/components/post-detail.tsx

@@ -12,6 +12,7 @@
  *   4. publishSocialPost  POST   /social/posts/{post_id}/publish   (external, confirmed)
  *   5. cancelSocialPost   POST   /social/posts/{post_id}/cancel    (destructive, confirmed)
  *   6. deleteSocialPost   DELETE /social/posts/{post_id}           (destructive, confirmed; 404 counts as done)
+ * 7. getSocialPostMetrics GET  /social/posts/{post_id}/metrics  (read; the Performance tab, only for a post that is live)
  * Times are instants shown in the viewer's zone with its name.
  */
 import { useState } from "react";
@@ -28,6 +29,7 @@ import { formatInstant, isFuture, localInputToIso } from "../lib/social-ads-type
 import type { SocialPost } from "../lib/social-ads-types";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { PostMetrics } from "./social-performance";
 
 export interface PostDetailProps {
   postId: string;
@@ -147,6 +149,7 @@ export function PostDetail({ postId, onClose, onExpand, onCollapse, onChanged, o
           ),
         }]
       : []),
+    ...(post.status === "live" ? [{ id: "performance", label: "Performance", content: <PostMetrics postId={postId} /> }] : []),
   ];
 
   return (

package/blocks/social-ads/components/social-ideas.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * SocialIdeas: post ideas mined from your own signals and content, with the reason each one fits. Pick one to start a
+ * draft with its hook as the brief.
+ *
+ * SDK operations:
+ *   1. listSocialIdeas  GET /social/ideas?source   (read; the ideas already mined. This screen never asks the API to mine new ones.)
+ *
+ * `onUse` receives a brief for the chosen idea; SocialScreen opens the composer with it. Nothing is written or spent here.
+ */
+import { useState } from "react";
+import { Button, Skeleton } 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 { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { rowsOf, str } from "../lib/ads-extra";
+import type { Rec } from "../lib/ads-extra";
+
+export interface SocialIdeasProps {
+  /** Called with a brief built from the idea. */
+  onUse?: (brief: string, idea: Rec) => void;
+  className?: string;
+}
+
+const SOURCES = [
+  { value: "", label: "All sources" },
+  { value: "signal_mining", label: "Your signals" },
+  { value: "linkedin_trending", label: "Trending on LinkedIn" },
+  { value: "proof_freshness", label: "Fresh proof" },
+  { value: "repurpose", label: "Repurposed content" },
+  { value: "ai", label: "AI" },
+];
+
+export function ideaBrief(idea: Rec): string {
+  return [str(idea.title), str(idea.primary_hook) ? `Hook: ${str(idea.primary_hook)}` : "", str(idea.concept), str(idea.proof_points) ? `Proof: ${str(idea.proof_points)}` : ""].filter(Boolean).join(". ");
+}
+
+export function SocialIdeas({ onUse, className }: SocialIdeasProps) {
+  const [source, setSource] = useState("");
+  const res = useG8Query((signal) => g8Get("/social/ideas", { source: source || undefined }, { signal }), [source]);
+  const ideas = rowsOf<Rec>(res.data?.data, "ideas");
+  return (
+    <SectionCard className={className} title="Post ideas" description="Starting points from your own signals and content."
+      actions={<select aria-label="Idea source" className="border-input bg-background h-8 rounded-md border px-2 text-sm" value={source} onChange={(e) => setSource(e.target.value)}>{SOURCES.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select>}>
+      {res.error ? <ApiError error={res.error} title="Could not load ideas" onRetry={() => void res.refetch()} /> : res.loading && !res.data ? <Skeleton className="h-24 w-full" aria-busy="true" /> : ideas.length === 0 ? (
+        <EmptyState compact title="No ideas yet" description="Ideas appear as signals and content worth posting about come in." />
+      ) : (
+        <ul className="grid gap-3">
+          {ideas.map((i) => (
+            <li key={str(i.id)} className="grid gap-1 rounded-md border p-3">
+              <span className="text-sm font-medium">{str(i.title)}</span>
+              {str(i.why) ? <p className="text-muted-foreground text-xs">{str(i.why)}</p> : null}
+              {str(i.primary_hook) ? <p className="text-sm">{str(i.primary_hook)}</p> : null}
+              {onUse ? <div><Button size="sm" variant="outline" aria-label={`Draft a post from ${str(i.title)}`} onClick={() => onUse(ideaBrief(i), i)}>Draft a post</Button></div> : null}
+            </li>
+          ))}
+        </ul>
+      )}
+    </SectionCard>
+  );
+}

package/blocks/social-ads/components/social-performance.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+/**
+ * SocialPerformance: how your social posts perform. Totals for a window with a per-day table, and (as PostMetrics)
+ * the numbers for one post.
+ *
+ * SDK operations:
+ *   1. getSocialAnalytics    GET /social/analytics?days            (read; totals and per-day rows)
+ *   2. getSocialPostMetrics  GET /social/posts/{id}/metrics        (read; impressions, reactions, comments, shares)
+ *
+ * Both payloads are open: every numeric total is shown with its name, and a figure the network does not provide is a
+ * dash, never a zero. `supported: false` on a post means the network gives no numbers for it.
+ */
+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 { g8Get } from "@/g8/lib/g8-client";
+import { asRec, num, rowsOf, str, whenText } from "../lib/ads-extra";
+import type { Rec } from "../lib/ads-extra";
+
+export interface SocialPerformanceProps {
+  className?: string;
+}
+
+const label = (k: string): string => k.replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
+const count = (v: unknown): string => (num(v) == null ? "-" : (v as number).toLocaleString());
+
+export function SocialPerformance({ className }: SocialPerformanceProps) {
+  const [days, setDays] = useState(30);
+  const res = useG8Query((signal) => g8Get("/social/analytics", { days }, { signal }), [days]);
+  const d = asRec(res.data?.data);
+  const totals = Object.entries(asRec(d.totals)).filter(([, v]) => num(v) !== undefined);
+  const perDay = rowsOf<Rec>(d.per_day);
+  const columns = [...new Set(perDay.flatMap((r) => Object.entries(r).filter(([k, v]) => k !== "date" && num(v) !== undefined).map(([k]) => k)))];
+  const stats: StatItem[] = totals.map(([k, v]) => ({ label: label(k), value: count(v) }));
+  return (
+    <div className={className}>
+      <div className="mb-4"><select aria-label="Reporting window" className="border-input bg-background h-9 rounded-md border px-2 text-sm" value={days} onChange={(e) => setDays(Number(e.target.value))}>{[7, 30, 90].map((n) => <option key={n} value={n}>Last {n} days</option>)}</select></div>
+      {res.error ? <ApiError error={res.error} title="Could not load post performance" onRetry={() => void res.refetch()} /> : res.loading && !res.data ? <Skeleton className="h-24 w-full" aria-busy="true" /> : stats.length === 0 && perDay.length === 0 ? (
+        <EmptyState title="No performance numbers yet" description="Numbers appear after posts have been live for a while." />
+      ) : (
+        <div className="grid gap-4">
+          {stats.length ? <StatStrip items={stats} /> : null}
+          {perDay.length ? (
+            <SectionCard title="By day" flush>
+              <Table>
+                <TableHeader><TableRow><TableHead>Day</TableHead>{columns.map((c) => <TableHead key={c}>{label(c)}</TableHead>)}</TableRow></TableHeader>
+                <TableBody>{perDay.map((r, i) => <TableRow key={i}><TableCell className="font-medium">{str(r.date)}</TableCell>{columns.map((c) => <TableCell key={c}>{count(r[c])}</TableCell>)}</TableRow>)}</TableBody>
+              </Table>
+            </SectionCard>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function PostMetrics({ postId, className }: { postId: string; className?: string }) {
+  const res = useG8Query((signal) => g8Get(`/social/posts/${encodeURIComponent(postId)}/metrics`, undefined, { signal }), [postId]);
+  const d = asRec(res.data?.data);
+  return (
+    <SectionCard className={className} title="Post performance" description={d.fetched_at ? `Read ${whenText(d.fetched_at)}` : undefined}>
+      {res.error ? <ApiError error={res.error} title="Could not load the numbers" onRetry={() => void res.refetch()} /> : res.loading && !res.data ? <Skeleton className="h-16 w-full" aria-busy="true" /> : d.supported === false ? (
+        <EmptyState compact title="No numbers for this post" description="This network does not provide performance numbers for it." />
+      ) : (
+        <StatStrip items={[
+          { label: "Impressions", value: count(d.impressions) },
+          { label: "Reactions", value: count(d.reactions) },
+          { label: "Comments", value: count(d.comments) },
+          { label: "Shares", value: count(d.shares) },
+        ]} />
+      )}
+    </SectionCard>
+  );
+}