@graph8/sdk 0.370.0 → 0.374.0

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

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

@@ -1,15 +1,18 @@
 "use client";
 
 /**
- * SocialScreen: the finished social publishing page. Two tabs:
+ * SocialScreen: the finished social publishing page. Four tabs:
  *   Posts     every post by status (SocialPostList): publish a draft, cancel a scheduled post, delete. "New post" opens the
  *             composer in a side sheet (PostComposer): write or draft with AI, save, schedule or publish.
- *   Accounts  the connected social accounts with their publishing capacity. Connecting an account (LinkedIn sign-in) only
- *             works in the graph8 app, so this tab links out instead of offering a dead button.
+ *   Accounts  the connected social accounts with their publishing capacity; disconnect one (confirmed). Connecting an account
+ *             (LinkedIn sign-in) only works in the graph8 app, so this tab links out instead of offering a dead button.
+ *   Ideas     post ideas mined from your signals and content (SocialIdeas); "Draft a post" opens the composer with the idea as the brief.
+ *   Performance  totals and a per-day table for a window (SocialPerformance); a live post also has a Performance tab of its own.
  *
  * Every post opens a complete detail screen (PostDetail, `?id=`, full page with `?view=full`).
  *
- * SDK operations: one read of listSocialPosts (page_size 1) for the per-status counts in the stat strip. Composes
+ * SDK operations: one read of listSocialPosts (page_size 1) for the per-status counts in the stat strip, and
+ * disconnectSocialAccount (DELETE /social/accounts/{id}, destructive, confirmed: publishing from it stops). Composes
  * PostComposer (billable AI drafts, external schedule/publish, all confirmed), SocialPostList (external + destructive,
  * confirmed) and useSocialAccounts (read).
  */
@@ -35,6 +38,11 @@ import { PostComposer } from "./post-composer";
 import { SocialPostList } from "./social-post-list";
 import { PostDetail } from "./post-detail";
 import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { g8Delete } from "@/g8/lib/g8-client";
+import { SocialIdeas } from "./social-ideas";
+import { SocialPerformance } from "./social-performance";
 
 export interface SocialScreenProps {
   /** Where "Connect" sends people. Default: graph8 Settings > Integrations. */
@@ -49,6 +57,7 @@ const APP_PATH = "/studio/settings?tab=integrations";
 function Accounts({ connectUrl }: { connectUrl: string }) {
   const brand = useBrand();
   const { accounts, loading, error, refetch } = useSocialAccounts();
+  const { ask, dialog, failure } = useConfirmAction();
   if (error) return <ApiError error={error} onRetry={() => void refetch()} />;
   if (loading && accounts.length === 0) return <p className="text-sm text-muted-foreground" role="status">Loading accounts...</p>;
   if (accounts.length === 0) {
@@ -61,6 +70,9 @@ function Accounts({ connectUrl }: { connectUrl: string }) {
     );
   }
   return (
+    <>
+    {failure ? <ApiError error={failure} title="Could not disconnect the account" /> : null}
+    <ConfirmSpendDialog {...dialog} />
     <ul className="grid gap-3 md:grid-cols-2">
       {accounts.map((a) => (
         <li key={a.id}>
@@ -74,11 +86,17 @@ function Accounts({ connectUrl }: { connectUrl: string }) {
                 </p>
               </div>
               {a.profile_url ? <a className="text-sm underline" href={a.profile_url} target="_blank" rel="noreferrer">Profile</a> : null}
+              <Button size="sm" variant="ghost" aria-label={`Disconnect ${a.display_name ?? a.provider}`} onClick={() => ask({
+                tier: "destructive", title: `Disconnect ${a.display_name ?? a.provider}`, confirmLabel: "Disconnect", affected: 1,
+                description: `Publishing and scheduled posts from this account stop. Posts already live stay live. Connect it again in ${brand.linkLabel} to resume.`,
+                tolerateStatus: [404], run: () => g8Delete(`/social/accounts/${encodeURIComponent(a.id)}`), onDone: () => void refetch(),
+              })}>Disconnect</Button>
             </div>
           </SectionCard>
         </li>
       ))}
     </ul>
+    </>
   );
 }
 
@@ -86,11 +104,12 @@ export function SocialScreen(props: SocialScreenProps) {
   const brand = useBrand();
   const connectUrl = props.connectUrl ?? brandUrl(brand, APP_PATH);
   const [tabValue, setTab] = useUrlState("tab", "posts");
-  const tab = tabValue === "accounts" ? "accounts" : "posts";
+  const tab = tabValue === "accounts" || tabValue === "ideas" || tabValue === "performance" ? tabValue : "posts";
   const [id, setId] = useUrlState("id", "");
   const [view, setView] = useUrlState("view", "");
   const expanded = view === "full" && Boolean(id);
   const [composing, setComposing] = useState(false);
+  const [composeBrief, setComposeBrief] = useState("");
   const [refreshKey, setRefreshKey] = useState(0);
   const counts = useG8Query(async (signal) => (await g8Get<SocialPostPage>("/social/posts", { page: 1, page_size: 1 }, { signal })).data, [refreshKey]);
 
@@ -112,13 +131,15 @@ export function SocialScreen(props: SocialScreenProps) {
       actions={
         <>
           {props.toolbarActions}
-          <Button onClick={() => setComposing(true)}>
+          <Button onClick={() => { setComposeBrief(""); setComposing(true); }}>
             <Plus className="mr-1.5 size-4" /> New post
           </Button>
         </>
       }
       tabs={[
         { id: "posts", label: "Posts" },
+        { id: "ideas", label: "Ideas" },
+        { id: "performance", label: "Performance" },
         { id: "accounts", label: "Accounts" },
       ]}
       activeTab={tab}
@@ -144,11 +165,17 @@ export function SocialScreen(props: SocialScreenProps) {
               onChanged={() => setRefreshKey((k) => k + 1)} />
           ) : null}
         />
+      ) : tab === "ideas" ? (
+        <SocialIdeas onUse={(brief) => { setComposeBrief(brief); setComposing(true); }} />
+      ) : tab === "performance" ? (
+        <SocialPerformance />
       ) : (
         <Accounts connectUrl={connectUrl} />
       )}
       <FormSheet open={composing} onOpenChange={setComposing} title="New post" description="Write it, draft it with AI, then save, schedule or publish.">
         <PostComposer
+          key={composeBrief}
+          initialBrief={composeBrief || undefined}
           onSaved={() => {
             setComposing(false);
             setRefreshKey((k) => k + 1);

package/blocks/social-ads/lib/ads-extra.ts

@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * Helpers for the ads and social management components (campaign editor, campaign ads, creative tools, revisions,
+ * concepts, performance, ideas). These endpoints return open dicts, so every reader accepts what is present.
+ */
+export type Rec = Record<string, unknown>;
+
+export function asRec(value: unknown): Rec {
+  return value && typeof value === "object" && !Array.isArray(value) ? (value as Rec) : {};
+}
+
+export function str(value: unknown, fallback = ""): string {
+  return typeof value === "string" ? value : value == null ? fallback : String(value);
+}
+
+export function num(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+export function rowsOf<T = Rec>(data: unknown, ...keys: string[]): T[] {
+  if (Array.isArray(data)) return data as T[];
+  const rec = asRec(data);
+  for (const key of [...keys, "items"]) if (Array.isArray(rec[key])) return rec[key] as T[];
+  return [];
+}
+
+export const whenText = (v: unknown): string => {
+  const d = new Date(str(v));
+  return Number.isNaN(d.getTime()) ? "" : d.toLocaleString();
+};
+
+/** What the API's `/editable` map says about one field. A field it does not list is treated as not editable. */
+export interface FieldCapability { editable: boolean; reason?: string; consequences: string[] }
+
+export function capabilityOf(editable: unknown, field: string): FieldCapability {
+  const f = asRec(asRec(asRec(editable).fields)[field]);
+  return { editable: f.editable === true, reason: str(f.reason) || undefined, consequences: rowsOf<string>(f.consequences).map(String) };
+}
+
+/** A money string from an input: a positive number with at most two decimals, else undefined. */
+export function parseMoney(raw: string): number | undefined {
+  const t = raw.trim();
+  if (!/^\d+(\.\d{1,2})?$/.test(t)) return undefined;
+  const n = Number(t);
+  return n > 0 ? n : undefined;
+}
+
+/** `YYYY-MM-DD` from an API date or midnight-UTC timestamp, for a date input. Never goes through the local zone. */
+export function dateInput(value: unknown): string {
+  const t = str(value);
+  return /^\d{4}-\d{2}-\d{2}/.test(t) ? t.slice(0, 10) : "";
+}
+
+export interface CampaignEdit { name?: string; daily_budget?: number; end_date?: string; spend_cap?: number }
+
+/** The body of an edit: only fields that differ from the saved campaign. Empty means nothing to save. */
+export function campaignChanges(saved: { name?: unknown; daily_budget?: unknown; end_date?: unknown }, draft: { name: string; daily_budget: string; end_date: string; spend_cap: string }): CampaignEdit {
+  const out: CampaignEdit = {};
+  if (draft.name.trim() && draft.name.trim() !== str(saved.name)) out.name = draft.name.trim();
+  const budget = parseMoney(draft.daily_budget);
+  if (budget !== undefined && budget !== num(saved.daily_budget)) out.daily_budget = budget;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(draft.end_date) && draft.end_date !== dateInput(saved.end_date)) out.end_date = draft.end_date;
+  const cap = parseMoney(draft.spend_cap);
+  if (cap !== undefined) out.spend_cap = cap;
+  return out;
+}