@graph8/sdk 0.362.0 → 0.373.0

package/blocks/social-ads/README.md

@@ -5,6 +5,17 @@ Publish to social, watch your ads, make ad creatives and feed ad platforms with
 
 Install: `npx @graph8/sdk add social-ads` (installs `foundation`, `crm` and `lists` first).
 
+## Screens
+
+Two finished pages, each a route you can copy. No props are required.
+
+- `SocialScreen` (`components/social-screen.tsx`): **Posts** by status with per-status counts, publish/cancel/delete (confirmed), and a
+  **New post** side sheet holding the composer (AI drafts, schedule, publish). **Accounts** lists connected accounts and publishing
+  capacity, and links out to graph8 to connect LinkedIn (browser sign-in only).
+- `AdsScreen` (`components/ads-screen.tsx`): **Campaigns** with a 30-day results strip, **Audiences** (with sync run history, a billable read that asks first; sync a list to Meta, LinkedIn, Google or X
+  and launch a campaign; launching moves you to Campaigns), **Creatives** (generate, edit, organize). Ad accounts are connected in graph8.
+- Everything that sends data, spends or deletes keeps its confirmation. Slot: `toolbarActions`; `connectUrl` overrides the link-out.
+
 ## What you get
 
 | Component | Use it for | Props |
@@ -126,3 +137,11 @@ Ask the person: campaign daily budget, dates and destination URL (always typed b
 | updateAdCreative | PATCH /ad-creatives/{creative_id} | write | CreativeGallery |
 | updateAudienceSync | PATCH /audience-syncs/{config_id} | external | AudienceSync |
 | updateSocialPost | PATCH /social/posts/{post_id} | write | PostComposer |
+
+## Depth added (C7c)
+
+- `CampaignDetail` gains **Ads** (`CampaignAds`: list, edit, pause or activate, archive, add; all external or destructive confirms) and **Edit** (`CampaignEditor`: name, daily budget, end date, spend cap, pause or resume; previewed, then an external confirm; fields the platform refuses are disabled with its reason).
+- `CreativeDetail` gains **AI tools** (`CreativeTools`: edit by instruction, rewrite a field with undo, review and apply, other sizes, retry, move to draft, save as template; billable passes are confirmed) and **Revisions** (`CreativeRevisions`). `CreativeGallery` loads past 50 and has a **Concept board** (`CreativeConcepts`, billable confirm).
+- `SocialScreen` gains **Ideas** (`SocialIdeas`, Draft a post opens the composer with the brief), **Performance** (`SocialPerformance`), a per-post Performance tab, and Disconnect on an account (destructive confirm).
+
+Not covered (and why): `createAdCreativeSet` and `readAdCreativeThroughPersona` need persona pickers; video clips, image-point edits, reskin, set-image and library ops need pickers or media editing; `uploadAdImage` is multipart; social autopilot (`saveSocialAutopilot`) auto-publishes and engagers (`addSocialEngagersToAudience`, `enrollSocialEngagers`) need list and sequence pickers; `getAudienceSync` is already covered by the list read.

package/blocks/social-ads/block.json

@@ -14,37 +14,63 @@
     "lists"
   ],
   "operations": [
+    "apply_ad_creative_review_findings_ad_creatives__creative_id__ai_review_apply_post",
+    "archive_campaign_ad_ad_campaigns__campaign_id__ads__ad_id__delete",
     "cancel_social_post_social_posts__post_id__cancel_post",
+    "chat_edit_ad_creative_ad_creatives__creative_id__chat_edit_post",
     "create_ad_creative_ad_creatives_post",
+    "create_ad_creative_size_set_ad_creatives__creative_id__size_set_post",
     "create_audience_sync_audience_syncs_post",
+    "create_campaign_ad_ad_campaigns__campaign_id__ads_post",
     "create_social_post_social_posts_post",
     "delete_ad_campaign_ad_campaigns__campaign_id__delete",
     "delete_ad_creative_ad_creatives__creative_id__delete",
     "delete_audience_sync_audience_syncs__config_id__delete",
     "delete_social_post_social_posts__post_id__delete",
+    "disconnect_social_account_social_accounts__account_id__delete",
+    "generate_ad_concepts_ad_creatives_concepts_post",
     "generate_social_post_social_posts_generate_post",
+    "get_ad_campaign_ad_campaigns__campaign_id__get",
+    "get_ad_creative_ad_creatives__creative_id__get",
     "get_ad_creative_specs_ad_creatives_specs_get",
     "get_ad_creative_status_ad_creatives__creative_id__status_get",
+    "get_campaign_editable_fields_ad_campaigns__campaign_id__editable_get",
     "get_per_campaign_metrics_ad_campaigns_metrics_get",
+    "get_social_analytics_social_analytics_get",
+    "get_social_post_metrics_social_posts__post_id__metrics_get",
     "get_social_post_social_posts__post_id__get",
     "launch_ad_campaign_audience_syncs__config_id__launch_post",
     "list_ad_campaigns_ad_campaigns_get",
+    "list_ad_creative_revisions_ad_creatives__creative_id__revisions_get",
     "list_ad_creatives_ad_creatives_get",
     "list_audience_syncs_audience_syncs_get",
+    "list_campaign_ads_ad_campaigns__campaign_id__ads_get",
     "list_social_accounts_social_accounts_get",
+    "list_social_ideas_social_ideas_get",
     "list_social_posts_social_posts_get",
     "list_sync_errors_audience_syncs__config_id__errors_get",
     "list_sync_runs_audience_syncs__config_id__runs_get",
+    "move_ad_creative_to_draft_ad_creatives__creative_id__move_to_draft_post",
     "move_ad_creative_to_gallery_ad_creatives__creative_id__move_to_gallery_post",
+    "preview_ad_campaign_edit_ad_campaigns__campaign_id__edit_preview_post",
     "publish_social_post_social_posts__post_id__publish_post",
     "refresh_all_campaign_statuses_ad_campaigns_status_refresh_post",
     "refresh_campaign_status_ad_campaigns__campaign_id__status_refresh_post",
+    "regenerate_ad_creative_copy_ad_creatives__creative_id__regenerate_copy_post",
     "regenerate_ad_creative_image_ad_creatives__creative_id__regenerate_image_post",
+    "restore_ad_creative_revision_ad_creatives__creative_id__restore_revision_post",
+    "retry_ad_creative_generation_ad_creatives__creative_id__retry_post",
     "retry_campaign_launch_ad_campaigns__campaign_id__retry_post",
+    "review_ad_creative_ad_creatives__creative_id__ai_review_post",
+    "rewrite_ad_creative_field_ad_creatives__creative_id__rewrite_field_post",
+    "save_ad_creative_as_template_ad_creatives__creative_id__save_as_template_post",
     "schedule_social_post_social_posts__post_id__schedule_post",
+    "set_campaign_ad_status_ad_campaigns__campaign_id__ads__ad_id__status_post",
     "trigger_audience_sync_audience_syncs__config_id__trigger_post",
+    "update_ad_campaign_ad_campaigns__campaign_id__put",
     "update_ad_creative_ad_creatives__creative_id__patch",
     "update_audience_sync_audience_syncs__config_id__patch",
+    "update_campaign_ad_ad_campaigns__campaign_id__ads__ad_id__patch",
     "update_social_post_social_posts__post_id__patch"
   ],
   "components": [
@@ -139,6 +165,207 @@
         "external",
         "destructive"
       ]
+    },
+    {
+      "name": "SocialScreen",
+      "file": "components/social-screen.tsx",
+      "purpose": "Finished social page: posts by status with a New post composer sheet, and connected accounts.",
+      "operations": [
+        "list_social_posts_social_posts_get",
+        "disconnect_social_account_social_accounts__account_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "AdsScreen",
+      "file": "components/ads-screen.tsx",
+      "purpose": "Finished ads page: campaigns with results, audience syncs and launch, and AI creatives.",
+      "operations": [
+        "get_per_campaign_metrics_ad_campaigns_metrics_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "PostDetail",
+      "file": "components/post-detail.tsx",
+      "purpose": "Complete screen for one social post: content, edit, schedule, publish, cancel, delete.",
+      "operations": [
+        "get_social_post_social_posts__post_id__get",
+        "update_social_post_social_posts__post_id__patch",
+        "publish_social_post_social_posts__post_id__publish_post",
+        "cancel_social_post_social_posts__post_id__cancel_post",
+        "delete_social_post_social_posts__post_id__delete",
+        "schedule_social_post_social_posts__post_id__schedule_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "CampaignDetail",
+      "file": "components/campaign-detail.tsx",
+      "purpose": "Complete screen for one ad campaign: fields, results, refresh, retry, stop and delete.",
+      "operations": [
+        "list_ad_campaigns_ad_campaigns_get",
+        "get_per_campaign_metrics_ad_campaigns_metrics_get",
+        "refresh_campaign_status_ad_campaigns__campaign_id__status_refresh_post",
+        "retry_campaign_launch_ad_campaigns__campaign_id__retry_post",
+        "delete_ad_campaign_ad_campaigns__campaign_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "CreativeDetail",
+      "file": "components/creative-detail.tsx",
+      "purpose": "Complete screen for one ad creative: image, copy, edit, new image, gallery, delete.",
+      "operations": [
+        "get_ad_creative_ad_creatives__creative_id__get",
+        "get_ad_creative_status_ad_creatives__creative_id__status_get",
+        "update_ad_creative_ad_creatives__creative_id__patch",
+        "move_ad_creative_to_gallery_ad_creatives__creative_id__move_to_gallery_post",
+        "regenerate_ad_creative_image_ad_creatives__creative_id__regenerate_image_post",
+        "delete_ad_creative_ad_creatives__creative_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "AudienceSyncDetail",
+      "file": "components/audience-sync-detail.tsx",
+      "purpose": "Complete screen for one audience sync: status, runs, errors, sync now, pause, launch campaign, delete.",
+      "operations": [
+        "list_sync_runs_audience_syncs__config_id__runs_get",
+        "list_audience_syncs_audience_syncs_get",
+        "list_sync_errors_audience_syncs__config_id__errors_get",
+        "launch_ad_campaign_audience_syncs__config_id__launch_post",
+        "trigger_audience_sync_audience_syncs__config_id__trigger_post",
+        "update_audience_sync_audience_syncs__config_id__patch",
+        "delete_audience_sync_audience_syncs__config_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "billable",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "CampaignAds",
+      "file": "components/campaign-ads.tsx",
+      "purpose": "The ads inside a campaign: list, edit, pause or activate, archive and add (each confirmed).",
+      "operations": [
+        "update_campaign_ad_ad_campaigns__campaign_id__ads__ad_id__patch",
+        "list_campaign_ads_ad_campaigns__campaign_id__ads_get",
+        "set_campaign_ad_status_ad_campaigns__campaign_id__ads__ad_id__status_post",
+        "archive_campaign_ad_ad_campaigns__campaign_id__ads__ad_id__delete",
+        "create_campaign_ad_ad_campaigns__campaign_id__ads_post"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "CampaignEditor",
+      "file": "components/campaign-editor.tsx",
+      "purpose": "Edit a live ad campaign: name, budget, end date, spend cap, pause or resume; previewed, then confirmed.",
+      "operations": [
+        "preview_ad_campaign_edit_ad_campaigns__campaign_id__edit_preview_post",
+        "update_ad_campaign_ad_campaigns__campaign_id__put",
+        "get_ad_campaign_ad_campaigns__campaign_id__get",
+        "get_campaign_editable_fields_ad_campaigns__campaign_id__editable_get"
+      ],
+      "tiers": [
+        "read",
+        "external"
+      ]
+    },
+    {
+      "name": "CreativeConcepts",
+      "file": "components/creative-concepts.tsx",
+      "purpose": "Concept board: creative directions to react to before generating (confirmed AI spend).",
+      "operations": [
+        "generate_ad_concepts_ad_creatives_concepts_post"
+      ],
+      "tiers": [
+        "billable"
+      ]
+    },
+    {
+      "name": "CreativeRevisions",
+      "file": "components/creative-revisions.tsx",
+      "purpose": "Saved versions of an ad creative with restore.",
+      "operations": [
+        "list_ad_creative_revisions_ad_creatives__creative_id__revisions_get",
+        "restore_ad_creative_revision_ad_creatives__creative_id__restore_revision_post"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
+    },
+    {
+      "name": "CreativeTools",
+      "file": "components/creative-tools.tsx",
+      "purpose": "AI tools for a creative: edit by instruction, rewrite a field, review, other sizes, retry, template.",
+      "operations": [
+        "get_ad_creative_specs_ad_creatives_specs_get",
+        "update_ad_creative_ad_creatives__creative_id__patch",
+        "apply_ad_creative_review_findings_ad_creatives__creative_id__ai_review_apply_post",
+        "move_ad_creative_to_draft_ad_creatives__creative_id__move_to_draft_post",
+        "save_ad_creative_as_template_ad_creatives__creative_id__save_as_template_post",
+        "chat_edit_ad_creative_ad_creatives__creative_id__chat_edit_post",
+        "regenerate_ad_creative_copy_ad_creatives__creative_id__regenerate_copy_post",
+        "rewrite_ad_creative_field_ad_creatives__creative_id__rewrite_field_post",
+        "review_ad_creative_ad_creatives__creative_id__ai_review_post",
+        "create_ad_creative_size_set_ad_creatives__creative_id__size_set_post",
+        "retry_ad_creative_generation_ad_creatives__creative_id__retry_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable"
+      ]
+    },
+    {
+      "name": "SocialIdeas",
+      "file": "components/social-ideas.tsx",
+      "purpose": "Post ideas mined from signals and content, with a Draft a post action.",
+      "operations": [
+        "list_social_ideas_social_ideas_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "SocialPerformance",
+      "file": "components/social-performance.tsx",
+      "purpose": "Social post performance: totals and per-day numbers, and the numbers of one post.",
+      "operations": [
+        "get_social_analytics_social_analytics_get",
+        "get_social_post_metrics_social_posts__post_id__metrics_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -155,6 +382,10 @@
     {
       "file": "lib/social-ads-types.ts",
       "purpose": "Post, account, campaign, creative and sync shapes; time helpers (localInputToIso, formatInstant, formatDateOnly), metricsFor and listOf."
+    },
+    {
+      "file": "lib/ads-extra.ts",
+      "purpose": "Helpers for the ads and social management components: open-dict readers, editable-field map, campaign edit diff."
     }
   ],
   "recipes": [
@@ -251,6 +482,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

package/blocks/social-ads/components/ad-campaign-list.tsx

@@ -27,26 +27,30 @@ import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
 import { AD_PLATFORMS, formatDateOnly, formatMoney, launchOutcome, listOf, metricsFor } from "../lib/social-ads-types";
 import type { AdCampaign, CampaignMetric } from "../lib/social-ads-types";
+import { DEFAULT_BRAND, useBrand } from "@/g8/hooks/use-brand";
 
 export interface AdCampaignListProps {
   /** Change to reload, for example after AudienceSync launched a campaign. */
   refreshKey?: number;
+  /** Called when a person opens a campaign (show a CampaignDetail). */
+  onSelectCampaign?: (campaign: AdCampaign) => void;
   className?: string;
 }
 
 type Pending = { kind: "refresh" | "retry" | "delete"; campaign: AdCampaign } | { kind: "refreshAll" };
 const COLUMNS = 8;
 
-function copyFor(p: Pending | null): { tier: ConfirmTier; title: string; text: string; label: string } {
+function copyFor(p: Pending | null, platform: string = DEFAULT_BRAND.linkLabel): { tier: ConfirmTier; title: string; text: string; label: string } {
   if (!p) return { tier: "external", title: "", text: "", label: "Confirm" };
   if (p.kind === "refreshAll") return { tier: "external", title: "Refresh every campaign's status", text: "Asks each ad platform for the current review state of every campaign. Can take a while; campaigns that did refresh keep their new state if it times out.", label: "Refresh all" };
   const name = p.campaign.name;
   if (p.kind === "refresh") return { tier: "external", title: `Refresh "${name}"`, text: `Asks ${p.campaign.platform} for this campaign's current review state.`, label: "Refresh" };
   if (p.kind === "retry") return { tier: "external", title: `Retry launching "${name}"`, text: `Sends the campaign to ${p.campaign.platform} again. It may start spending on that platform once approved.`, label: "Retry launch" };
-  return { tier: "destructive", title: `Stop and delete "${name}"`, text: `Stops the campaign on ${p.campaign.platform} first, then removes it from graph8 together with its history. This cannot be undone. If ${p.campaign.platform} refuses to stop it, the campaign stays live and keeps spending.`, label: "Stop and delete" };
+  return { tier: "destructive", title: `Stop and delete "${name}"`, text: `Stops the campaign on ${p.campaign.platform} first, then removes it from ${platform} together with its history. This cannot be undone. If ${p.campaign.platform} refuses to stop it, the campaign stays live and keeps spending.`, label: "Stop and delete" };
 }
 
-export function AdCampaignList({ refreshKey = 0, className }: AdCampaignListProps) {
+export function AdCampaignList({ refreshKey = 0, onSelectCampaign, className }: AdCampaignListProps) {
+  const brand = useBrand();
   const [platform, setPlatform] = useState("");
   const [days, setDays] = useState(30);
   const [pending, setPending] = useState<Pending | null>(null);
@@ -84,7 +88,7 @@ export function AdCampaignList({ refreshKey = 0, className }: AdCampaignListProp
     }
   };
 
-  const copy = copyFor(pending);
+  const copy = copyFor(pending, brand.linkLabel);
   return (
     <div className={`flex flex-col gap-3 ${className ?? ""}`}>
       <div className="flex flex-wrap items-center gap-2">
@@ -110,7 +114,7 @@ export function AdCampaignList({ refreshKey = 0, className }: AdCampaignListProp
               const mine = busy === String(c.id);
               return (
                 <TableRow key={c.id} data-testid="campaign">
-                  <TableCell><div className="font-medium">{c.name}</div>{m ? <div className="text-xs text-muted-foreground">{formatMoney(m.spend, m.currency ?? c.currency)} spent</div> : null}</TableCell>
+                  <TableCell>{onSelectCampaign ? <button type="button" className="font-medium hover:underline" onClick={() => onSelectCampaign(c)}>{c.name}</button> : <div className="font-medium">{c.name}</div>}{m ? <div className="text-xs text-muted-foreground">{formatMoney(m.spend, m.currency ?? c.currency)} spent</div> : null}</TableCell>
                   <TableCell>{c.platform}</TableCell>
                   <TableCell>{c.status}</TableCell>
                   <TableCell>{formatMoney(c.daily_budget, c.currency)}</TableCell>

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

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * AdsScreen: the finished paid-ads page. Three tabs:
+ *   Campaigns  Meta, LinkedIn, Google and X campaigns with budget, dates and results; refresh status, retry a failed launch,
+ *              stop and delete (AdCampaignList).
+ *   Audiences  send a list to an ad platform as a custom audience, keep it synced, and launch a campaign that targets it
+ *              (AudienceSync). A launched campaign moves you to the Campaigns tab.
+ *   Creatives  generate, edit and organize AI ad creatives (CreativeGallery).
+ *
+ * Every campaign, audience sync and creative opens a complete detail screen (`?id=`, full page with `?view=full`):
+ * CampaignDetail, AudienceSyncDetail (runs, errors, launch) and CreativeDetail (edit copy, new image, gallery, delete).
+ *
+ * SDK operations: one read of getPerCampaignMetrics (30 days) for the stat strip. Composes AdCampaignList (external +
+ * destructive), AudienceSync (external, sends people's data to a third party) and CreativeGallery (billable): every
+ * spend, send or delete is confirmed by those parts. Ad accounts are connected in the graph8 app (OAuth), see the link-out card.
+ */
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Target } from "lucide-react";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { listOf } from "../lib/social-ads-types";
+import type { CampaignMetric } from "../lib/social-ads-types";
+import { AdCampaignList } from "./ad-campaign-list";
+import { AudienceSync } from "./audience-sync";
+import { AudienceSyncDetail } from "./audience-sync-detail";
+import { CampaignDetail } from "./campaign-detail";
+import { CreativeDetail } from "./creative-detail";
+import { CreativeGallery } from "./creative-gallery";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+
+export interface AdsScreenProps {
+  /** Where "Connect ad accounts" sends people. Default: graph8 Settings > Integrations. */
+  connectUrl?: string;
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+/** Integrations settings on the platform's web app, resolved against the brand. */
+const APP_PATH = "/studio/settings?tab=integrations";
+const TABS = ["campaigns", "audiences", "creatives"] as const;
+type Tab = (typeof TABS)[number];
+
+function useStats(refreshKey: number): StatItem[] | undefined {
+  const q = useG8Query(async (signal) => listOf<CampaignMetric>((await g8Get("/ad-campaigns/metrics", { days: 30 }, { signal })).data, "metrics"), [refreshKey]);
+  if (q.error || !q.data) return undefined;
+  // The metrics payload is open-shaped in the contract: sum only values that are really numbers, and omit what is absent.
+  const rows = q.data;
+  const total = (k: "impressions" | "clicks" | "spend"): number | undefined => {
+    const nums = rows.map((r) => r[k]).filter((v): v is number => typeof v === "number");
+    return nums.length ? nums.reduce((s, v) => s + v, 0) : undefined;
+  };
+  const impressions = total("impressions");
+  const clicks = total("clicks");
+  const spend = total("spend");
+  const currencies = new Set(rows.map((r) => r.currency).filter(Boolean));
+  const items: StatItem[] = [];
+  if (spend != null) {
+    // Spend in several currencies cannot be added up honestly: show it only when there is one.
+    const cur = [...currencies][0] ?? "";
+    items.push({ label: "Spend (30 days)", value: currencies.size > 1 ? "Mixed currencies" : `${cur} ${spend.toLocaleString(undefined, { maximumFractionDigits: 2 })}`.trim() });
+  }
+  if (impressions != null) items.push({ label: "Impressions", value: impressions.toLocaleString() });
+  if (clicks != null) items.push({ label: "Clicks", value: clicks.toLocaleString() });
+  if (impressions && clicks != null) items.push({ label: "CTR", value: `${((clicks / impressions) * 100).toFixed(2)}%` });
+  return items.length ? items : undefined;
+}
+
+export function AdsScreen(props: AdsScreenProps) {
+  const brand = useBrand();
+  const connectUrl = props.connectUrl ?? brandUrl(brand, APP_PATH);
+  const [tabValue, setTab] = useUrlState("tab", "campaigns");
+  const tab: Tab = (TABS as readonly string[]).includes(tabValue) ? (tabValue as Tab) : "campaigns";
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expanded = view === "full" && Boolean(id);
+  const stats = useStats(refreshKey);
+  const close = () => {
+    setId("");
+    setView("");
+  };
+  const bump = () => setRefreshKey((k) => k + 1);
+  const panel = {
+    onClose: close,
+    onExpand: expanded ? undefined : () => setView("full"),
+    onCollapse: expanded ? () => setView("") : undefined,
+    onChanged: bump,
+  };
+  const split = (list: ReactNode, detail: ReactNode) => (
+    <SplitView
+      detailOpen={Boolean(id)}
+      onCloseDetail={close}
+      expanded={expanded}
+      onExpandedChange={(next) => setView(next ? "full" : "")}
+      detailWidth="lg"
+      list={list}
+      detail={id ? detail : null}
+    />
+  );
+
+  return (
+    <ScreenLayout
+      title="Ads"
+      description="Sync audiences to ad platforms, launch campaigns and make creatives, with the results next to them."
+      icon={<Target className="size-5" />}
+      actions={props.toolbarActions}
+      tabs={[
+        { id: "campaigns", label: "Campaigns" },
+        { id: "audiences", label: "Audiences" },
+        { id: "creatives", label: "Creatives" },
+      ]}
+      activeTab={tab}
+      onTabChange={(next) => {
+        setTab(next);
+        close();
+      }}
+      stats={tab === "campaigns" ? stats : undefined}
+      className={props.className}
+    >
+      {tab === "campaigns" ? (
+        split(
+          <AdCampaignList refreshKey={refreshKey} onSelectCampaign={(c) => setId(String(c.id))} />,
+          <CampaignDetail key={id} campaignId={Number(id)} {...panel} onOpenSync={(syncId) => { setTab("audiences"); setId(String(syncId)); }} />,
+        )
+      ) : tab === "audiences" ? (
+        <div className="space-y-4">
+          <SectionCard title="Ad accounts" description={`Meta, LinkedIn, Google and X sign-in happens in ${brand.linkLabel}. Connect there, then sync audiences here.`}>
+            <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">
+              Connect ad accounts in {brand.linkLabel}
+            </a>
+          </SectionCard>
+          {split(
+            <AudienceSync key={refreshKey} onSelectSync={(sync) => setId(String(sync.id))} onLaunched={() => { bump(); }} />,
+            <AudienceSyncDetail key={id} syncId={Number(id)} {...panel} onLaunched={() => { bump(); setTab("campaigns"); close(); }} />,
+          )}
+        </div>
+      ) : (
+        split(
+          <CreativeGallery key={refreshKey} onSelectCreative={(c) => setId(c.id)} />,
+          <CreativeDetail key={id} creativeId={id} {...panel} />,
+        )
+      )}
+    </ScreenLayout>
+  );
+}