@graph8/sdk 0.362.0 → 0.373.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

@@ -26,8 +26,11 @@ import { g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { useSocialAccounts } from "../hooks/use-social-accounts";
 import { formatInstant, isFuture, localInputToIso } from "../lib/social-ads-types";
 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;
@@ -36,13 +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);
@@ -76,7 +80,7 @@ export function PostComposer({ onSaved, className }: PostComposerProps) {
   });
 
   if (error) return <ApiError error={error} title="Could not load social accounts" onRetry={() => void refetch()} />;
-  if (!loading && accounts.length === 0) return <EmptyState title="No social account connected" description="Connect a LinkedIn account in graph8 (Settings, Channels), then come back. It cannot be done through the API." />;
+  if (!loading && accounts.length === 0) return <EmptyState title="No social account connected" description={`Connect a LinkedIn account in ${brand.linkLabel} (Settings, Channels), then come back. It cannot be done through the API.`} />;
 
   const ready = body.trim().length > 0 && Boolean(chosen);
   const dialog = confirm === "publish"

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

@@ -0,0 +1,163 @@
+"use client";
+
+/**
+ * PostDetail: the complete screen for one social post. Loads the post by id (so `?id=` deep links work), shows every field
+ * (body, media, account, status, schedule, publish time, failure reason, link), and offers every action that fits its state:
+ * edit the draft, schedule, publish now, cancel a scheduled post, delete.
+ *
+ * SDK operations, in order:
+ *   1. getSocialPost      GET    /social/posts/{post_id}           (read)
+ *   2. updateSocialPost   PATCH  /social/posts/{post_id}           (write; draft body)
+ *   3. scheduleSocialPost POST   /social/posts/{post_id}/schedule  (external, confirmed)
+ *   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";
+import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { formatInstant, isFuture, localInputToIso } from "../lib/social-ads-types";
+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;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after any change (edit, publish, schedule, cancel, delete) so the list can reload. */
+  onChanged?: () => void;
+  /** Called after the post was deleted. */
+  onDeleted?: () => void;
+}
+
+const tone = (s: string) => (s === "live" ? "positive" : s === "failed" ? "negative" : s === "scheduled" ? "info" : "neutral") as "positive" | "negative" | "info" | "neutral";
+
+export function PostDetail({ postId, onClose, onExpand, onCollapse, onChanged, onDeleted }: PostDetailProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const query = useG8Query(async (signal) => (await g8Get<SocialPost>(`/social/posts/${postId}`, undefined, { signal })).data, [postId]);
+  const [body, setBody] = useState<string | null>(null);
+  const [when, setWhen] = useState("");
+  const save = useG8Mutation((text: string) => g8Patch(`/social/posts/${postId}`, { body: text }), {
+    onSuccess: () => {
+      setBody(null);
+      void query.refetch();
+      onChanged?.();
+    },
+  });
+  const post = query.data;
+  const changed = () => {
+    void query.refetch();
+    onChanged?.();
+  };
+
+  if (query.error) return <ApiError error={query.error} title="Could not load the post" onRetry={() => void query.refetch()} />;
+  if (!post) return <Skeleton className="h-40 w-full" />;
+  const editable = ["draft", "ready", "failed"].includes(post.status);
+  const preview = post.body.length > 60 ? `${post.body.slice(0, 60)}...` : post.body;
+
+  const actions = (
+    <div className="flex flex-wrap gap-1">
+      {editable ? (
+        <AskButton ask={ask} label="Publish now" tier="external" title={`Publish: "${preview}"`} confirmLabel="Publish"
+          description="The post goes live now on the connected account and cannot be recalled from here."
+          run={() => g8Post(`/social/posts/${postId}/publish`, {})} onDone={changed} />
+      ) : null}
+      {post.status === "scheduled" ? (
+        <AskButton ask={ask} label="Cancel schedule" tier="destructive" title={`Cancel: "${preview}"`} confirmLabel="Cancel post"
+          description="The scheduled post will not be published. It stays as a cancelled record."
+          run={() => g8Post(`/social/posts/${postId}/cancel`, {})} onDone={changed} />
+      ) : null}
+      {post.status !== "publishing" ? (
+        <AskButton ask={ask} label="Delete" variant="ghost" tier="destructive" title={`Delete: "${preview}"`} confirmLabel="Delete"
+          description="The post is removed. A post that is already live stays live on the network."
+          tolerateStatus={[404]} run={() => g8Delete(`/social/posts/${postId}`)} onDone={() => { onChanged?.(); onDeleted?.(); onClose?.(); }} />
+      ) : null}
+    </div>
+  );
+
+  const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const tabs = [
+    {
+      id: "post",
+      label: "Post",
+      content: (
+        <div className="space-y-4">
+          <SectionCard title="Content">
+            {body == null ? (
+              <p className="whitespace-pre-wrap text-sm">{post.body}</p>
+            ) : (
+              <div className="space-y-2">
+                <Textarea aria-label="Post body" rows={8} value={body} onChange={(e) => setBody(e.target.value)} />
+                <div className="flex gap-2">
+                  <Button size="sm" disabled={!body.trim() || save.loading} onClick={() => void save.mutate(body.trim())}>Save draft</Button>
+                  <Button size="sm" variant="ghost" onClick={() => setBody(null)}>Cancel</Button>
+                </div>
+                {save.error ? <ApiError error={save.error} title="Could not save" /> : null}
+              </div>
+            )}
+            {editable && body == null ? <Button size="sm" variant="outline" className="mt-3" onClick={() => setBody(post.body)}>Edit text</Button> : null}
+            {(post.media ?? []).length > 0 ? (
+              <ul className="mt-3 grid grid-cols-2 gap-2">
+                {(post.media ?? []).map((m) => (
+                  <li key={m.url}><img src={m.url} alt={m.alt ?? ""} className="aspect-video w-full rounded object-cover" /></li>
+                ))}
+              </ul>
+            ) : null}
+          </SectionCard>
+          <KeyValueList columns={2} items={[
+            { label: "Type", value: post.post_type },
+            { label: "Network", value: post.provider ?? "-" },
+            { label: "Account", value: post.account_ref ?? "-" },
+            { label: "Created", value: post.created_at ? formatInstant(post.created_at) : "-" },
+            { label: "Scheduled for", value: post.scheduled_at ? formatInstant(post.scheduled_at) : "-" },
+            { label: "Published", value: post.published_at ? formatInstant(post.published_at) : "-" },
+          ]} />
+          {post.failure_reason ? <p role="alert" className="text-sm text-error-foreground">{post.failure_reason}</p> : null}
+          {post.external_post_url ? <a className="text-sm underline" href={post.external_post_url} target="_blank" rel="noreferrer">View on the network</a> : null}
+        </div>
+      ),
+    },
+    ...(editable || post.status === "scheduled"
+      ? [{
+          id: "schedule",
+          label: "Schedule",
+          content: (
+            <SectionCard title="Schedule this post" description={`Pick a time in your zone (${zone}).`}>
+              <div className="flex flex-wrap items-center gap-2">
+                <Input type="datetime-local" aria-label="Publish at" value={when} onChange={(e) => setWhen(e.target.value)} className="w-56" />
+                {when && isFuture(when) ? (
+                  <AskButton ask={ask} label="Schedule" tier="external" title={`Schedule: "${preview}"`} confirmLabel="Schedule"
+                    description={`Publishes at ${formatInstant(localInputToIso(when))}.`}
+                    run={() => g8Post(`/social/posts/${postId}/schedule`, { scheduled_at: localInputToIso(when) })} onDone={() => { setWhen(""); changed(); }} />
+                ) : (
+                  <span className="text-xs text-muted-foreground">Choose a time at least a minute from now.</span>
+                )}
+              </div>
+            </SectionCard>
+          ),
+        }]
+      : []),
+    ...(post.status === "live" ? [{ id: "performance", label: "Performance", content: <PostMetrics postId={postId} /> }] : []),
+  ];
+
+  return (
+    <>
+    <DetailPanel title={preview || "Post"} subtitle={post.provider ?? undefined} badges={<StatusPill tone={tone(post.status)}>{post.status}</StatusPill>}
+      actions={actions} tabs={tabs} onClose={onClose} onExpand={onExpand} onCollapse={onCollapse} />
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}

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-post-list.tsx

@@ -28,6 +28,10 @@ export interface SocialPostListProps {
   /** Change to reload the list, for example after PostComposer saved a post. */
   refreshKey?: number;
   pageSize?: number;
+  /** Called when a person opens a post (show a PostDetail). */
+  onSelectPost?: (post: SocialPost) => void;
+  /** Highlights the open post. */
+  selectedId?: string | null;
   className?: string;
 }
 
@@ -39,7 +43,7 @@ const COPY: Record<Pending["kind"], { tier: ConfirmTier; verb: string; text: str
   delete: { tier: "destructive", verb: "Delete", text: "The post is removed. A post that is already live stays live on the network." },
 };
 
-export function SocialPostList({ refreshKey = 0, pageSize = 20, className }: SocialPostListProps) {
+export function SocialPostList({ refreshKey = 0, pageSize = 20, onSelectPost, selectedId, className }: SocialPostListProps) {
   const [status, setStatus] = useState<(typeof STATUSES)[number]>("all");
   const [page, setPage] = useState(1);
   const [pending, setPending] = useState<Pending | null>(null);
@@ -87,9 +91,13 @@ export function SocialPostList({ refreshKey = 0, pageSize = 20, className }: Soc
       {!query.loading && !query.error && items.length === 0 ? <EmptyState title="No posts here" description="Write one with the composer." /> : null}
       <ul className="flex flex-col gap-2">
         {items.map((p) => (
-          <li key={p.id} className="flex flex-wrap items-start justify-between gap-2 rounded-md border p-3" data-testid="post">
+          <li key={p.id} className={`flex flex-wrap items-start justify-between gap-2 rounded-md border p-3 ${selectedId === p.id ? "bg-muted/50" : ""}`} data-testid="post">
             <div className="flex min-w-0 flex-1 flex-col gap-1">
-              <p className="line-clamp-3 text-sm">{p.body}</p>
+              {onSelectPost ? (
+                <button type="button" className="line-clamp-3 text-left text-sm hover:underline" onClick={() => onSelectPost(p)}>{p.body}</button>
+              ) : (
+                <p className="line-clamp-3 text-sm">{p.body}</p>
+              )}
               <p className="text-xs text-muted-foreground">
                 {p.status}
                 {p.status === "scheduled" && p.scheduled_at ? ` for ${formatInstant(p.scheduled_at)}` : ""}