@promptai.credit/cli 0.4.1 → 0.4.3

package/claude-plugin/hooks/ads.tsx

@@ -0,0 +1,729 @@
+/**
+ * PromptAI native rewarded-ad card for Claude Code (Mods / function hooks).
+ *
+ * Lifecycle:
+ *  1. session.start  — load ~/.promptai config; heartbeat so CLI skips /watch
+ *  2. prompt.submit  — fire-and-forget POST /ads/session (never await before next)
+ *  3. ui.render AbovePrompt — compact sponsored card + countdown
+ *  4. clock tick     — when minWatchMs elapsed, POST /ads/complete
+ *  5. CTA press      — beacon click, open destination in OS browser
+ *  6. Jev ticker     — GET /stocks/ticker (top picks + Robinhood Chain quotes),
+ *                      drawn on the ad card and on the prompt hint while working
+ *
+ * Stop / transcript pricing / credit redeem stay on the command-hook CLI path.
+ *
+ * Requires CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 until Mods are generally available.
+ */
+import type { EngineInterface as Engine, Register, RenderChildren, Timer } from "claude-code";
+import { WORK_PX, bitmapToCells, decodeBase64, hashKey, parseBmp, type LogoCells } from "./logo.ts";
+
+const SOURCE = "claude-mods";
+/** Logo cell grid: half-blocks, so 12 columns × 6 rows is a square of 12×12 pixels. */
+const LOGO_COLS = 12;
+const LOGO_ROWS = 6;
+/** Stock logos in the Jev tiles: 6×3 cells, one tile tall. */
+const STOCK_LOGO_COLS = 6;
+const STOCK_LOGO_ROWS = 3;
+const HEARTBEAT_FILE = "native-plugin.json";
+/** How long the CLI treats a heartbeat as "plugin is live" before falling back to /watch. */
+const HEARTBEAT_FRESH_MS = 2 * 60 * 60 * 1000;
+/** Refetch the Jev ticker at most this often (the server caches it for 60s). */
+const TICKER_STALE_MS = 5 * 60 * 1000;
+
+interface AdCreative {
+  id: string;
+  brand: string;
+  tag: string;
+  tagline: string;
+  lines: Array<{ cmd: boolean; text: string }>;
+  ctaLabel: string;
+  ctaUrl: string;
+  destinationUrl?: string;
+  logoUrl?: string;
+  minWatchMs: number;
+}
+
+interface PromptaiConfig {
+  deviceId: string;
+  serverUrl: string;
+  adsOptIn: boolean;
+}
+
+interface TickerName {
+  ticker: string;
+  name: string;
+  logoUrl?: string;
+  price: number | null;
+  change24h: number | null;
+  weight: number | null;
+}
+
+interface JevTicker {
+  enabled: boolean;
+  rewardUsd: number;
+  picks: TickerName[];
+  names: TickerName[];
+}
+
+interface GrantedStock {
+  ticker: string;
+  notionalUsd: number;
+}
+
+type AdPhase = "idle" | "loading" | "showing" | "verified" | "failed";
+
+interface ActiveAd {
+  phase: AdPhase;
+  sessionId?: string;
+  ad?: AdCreative;
+  shownAt?: number;
+  error?: string;
+  tick?: Timer;
+  logo?: LogoCells;
+  /** Paper stock slices granted on this verified watch (Jev inside promptai). */
+  stocks?: GrantedStock[];
+}
+
+const active: ActiveAd = { phase: "idle" };
+let config: PromptaiConfig | null = null;
+let homeDir = "";
+let startingSession = false;
+let jev: JevTicker | null = null;
+let jevFetchedAt = 0;
+let jevFetching = false;
+/** Stock logo cells by ticker; null once a load failed so it is not retried. */
+const stockLogos = new Map<string, LogoCells | null>();
+
+function configPath(): string {
+  return `${homeDir}/.promptai/config.json`;
+}
+
+function statePath(): string {
+  return `${homeDir}/.promptai/state.json`;
+}
+
+function heartbeatPath(): string {
+  return `${homeDir}/.promptai/${HEARTBEAT_FILE}`;
+}
+
+async function resolveHome($: Engine): Promise<string> {
+  try {
+    return ((await $.env.get("HOME")) ?? "").trim();
+  } catch {
+    return "";
+  }
+}
+
+async function readJson<T>($: Engine, path: string, fallback: T): Promise<T> {
+  try {
+    if (!(await $.fs.exists(path))) return fallback;
+    const raw = await $.fs.read(path);
+    return { ...fallback, ...(JSON.parse(raw) as T) };
+  } catch {
+    return fallback;
+  }
+}
+
+async function writeJson($: Engine, path: string, value: unknown): Promise<void> {
+  try {
+    await $.fs.write(path, `${JSON.stringify(value, null, 2)}\n`);
+  } catch {
+    // never break the session for local state
+  }
+}
+
+async function loadConfig($: Engine): Promise<PromptaiConfig | null> {
+  if (!homeDir) return null;
+  const cfg = await readJson<PromptaiConfig>($, configPath(), {
+    deviceId: "",
+    serverUrl: "https://api.promptai.credit",
+    adsOptIn: true,
+  });
+  if (!cfg.deviceId) return null;
+  if (!cfg.serverUrl) cfg.serverUrl = "https://api.promptai.credit";
+  return cfg;
+}
+
+async function bumpLastAdOpenedAt($: Engine, at: number): Promise<void> {
+  const state = await readJson<Record<string, unknown>>($, statePath(), {});
+  state.lastAdOpenedAt = at;
+  await writeJson($, statePath(), state);
+}
+
+async function writeHeartbeat($: Engine): Promise<void> {
+  await writeJson($, heartbeatPath(), {
+    active: true,
+    at: Date.now(),
+    source: SOURCE,
+    freshMs: HEARTBEAT_FRESH_MS,
+  });
+}
+
+// Same palette as the /watch page so the terminal card reads as one brand.
+const C = {
+  fg: "#fafafa",
+  soft: "#b9b9b9",
+  dim: "#8f8f8f",
+  faint: "#525252",
+  green: "#4ade80",
+  red: "#f87171",
+  amber: "#fbbf24",
+};
+
+function progressBar(elapsed: number, total: number, width = 20): { filled: string; empty: string } {
+  const ratio = Math.min(1, Math.max(0, elapsed / Math.max(1, total)));
+  const n = Math.round(ratio * width);
+  return { filled: "█".repeat(n), empty: "░".repeat(width - n) };
+}
+
+function clearTick(): void {
+  const tick = active.tick;
+  active.tick = undefined;
+  try {
+    tick?.cancel();
+  } catch {
+    // ignore
+  }
+}
+
+function resetAd(phase: AdPhase = "idle"): void {
+  clearTick();
+  active.phase = phase;
+  active.sessionId = undefined;
+  active.ad = undefined;
+  active.shownAt = undefined;
+  active.error = undefined;
+  active.logo = undefined;
+  active.stocks = undefined;
+}
+
+function parseBody<T>(text: string): T {
+  try {
+    return JSON.parse(text) as T;
+  } catch {
+    return {} as T;
+  }
+}
+
+/** True while /ads/complete is in flight, so a slow response is never asked twice. */
+let completing = false;
+
+async function completeAd($: Engine): Promise<void> {
+  if (completing || !config || !active.sessionId || active.phase !== "showing") return;
+  completing = true;
+  // Stop the countdown first: with the request in flight the phase is still
+  // "showing", and another tick would send a second complete ("already verified").
+  clearTick();
+  const sessionId = active.sessionId;
+  try {
+    const res = await $.http.fetch(`${config.serverUrl}/ads/complete`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId, deviceId: config.deviceId }),
+    });
+    if (!res.ok) {
+      const body = parseBody<{ error?: string }>(res.text);
+      active.phase = "failed";
+      active.error = body.error ?? `complete ${res.status}`;
+      clearTick();
+      $.ui.invalidate("ui.render");
+      return;
+    }
+    const body = parseBody<{
+      verified?: boolean;
+      stocks?: Array<{ ticker?: string; notionalUsd?: number | string }>;
+    }>(res.text);
+    active.stocks = (body.stocks ?? [])
+      .filter((s) => typeof s.ticker === "string" && s.ticker)
+      .map((s) => ({ ticker: s.ticker as string, notionalUsd: Number(s.notionalUsd) || 0 }))
+      .slice(0, 5);
+    active.phase = "verified";
+    clearTick();
+    // The card stays open once banked; Hide or the next prompt's ad replaces it.
+    $.ui.invalidate("ui.render");
+  } catch (err) {
+    active.phase = "failed";
+    active.error = String(err);
+    clearTick();
+    $.ui.invalidate("ui.render");
+  } finally {
+    completing = false;
+  }
+}
+
+function startCountdown($: Engine): void {
+  clearTick();
+  active.tick = $.clock.every(1_000, () => {
+    if (active.phase !== "showing" || !active.ad || active.shownAt == null) return;
+    const elapsed = Date.now() - active.shownAt;
+    if (elapsed >= active.ad.minWatchMs) {
+      void completeAd($);
+      return;
+    }
+    $.ui.invalidate("ui.render");
+  });
+}
+
+async function openDestination($: Engine, url: string): Promise<void> {
+  const candidates: string[][] = [
+    ["xdg-open", url],
+    ["open", url],
+    ["cmd", "/c", "start", "", url],
+  ];
+  for (const argv of candidates) {
+    try {
+      const result = await $.process.run(argv, { timeoutMs: 5_000 });
+      if (result.exitCode === 0) return;
+    } catch {
+      // try next opener
+    }
+  }
+  $.ui.toast(`Open in browser: ${url}`);
+}
+
+async function onCtaPress($: Engine): Promise<void> {
+  if (!config || !active.sessionId || !active.ad) return;
+  const ad = active.ad;
+  const clickUrl = ad.ctaUrl.includes("/ads/click/")
+    ? ad.ctaUrl
+    : `${config.serverUrl}/ads/click/${active.sessionId}`;
+  try {
+    void $.http.fetch(clickUrl, { method: "GET" });
+  } catch {
+    // click is best-effort
+  }
+  const target =
+    ad.destinationUrl ||
+    (ad.ctaUrl.includes("/ads/click/") ? undefined : ad.ctaUrl);
+  if (target) await openDestination($, target);
+}
+
+// --- logo host pipeline (curl → svg→png → bmp; pure image code is in logo.ts) ---
+
+async function tryRun($: Engine, argv: string[], timeoutMs = 8_000): Promise<{ ok: boolean; stdout: string }> {
+  try {
+    const res = await $.process.run(argv, { timeoutMs });
+    return { ok: res.exitCode === 0, stdout: res.stdout };
+  } catch {
+    return { ok: false, stdout: "" };
+  }
+}
+
+async function exists($: Engine, path: string): Promise<boolean> {
+  try {
+    return await $.fs.exists(path);
+  } catch {
+    return false;
+  }
+}
+
+async function svgToPng($: Engine, svg: string, dir: string, png: string): Promise<boolean> {
+  // macOS Quick Look thumbnailer: writes <dir>/<file>.png
+  const ql = await tryRun($, ["qlmanage", "-t", "-s", String(WORK_PX * 2), "-o", dir, svg]);
+  if (ql.ok && (await exists($, `${svg}.png`))) {
+    await tryRun($, ["mv", "-f", `${svg}.png`, png]);
+    if (await exists($, png)) return true;
+  }
+  const rsvg = await tryRun($, ["rsvg-convert", "-w", String(WORK_PX), "-h", String(WORK_PX), "-f", "png", "-o", png, svg]);
+  return rsvg.ok && (await exists($, png));
+}
+
+async function toBmp($: Engine, input: string, bmp: string): Promise<boolean> {
+  const attempts: string[][] = [
+    ["sips", "-s", "format", "bmp", "-Z", String(WORK_PX), input, "--out", bmp],
+    ["magick", input, "-background", "none", "-resize", `${WORK_PX}x${WORK_PX}`, `BMP3:${bmp}`],
+    ["convert", input, "-background", "none", "-resize", `${WORK_PX}x${WORK_PX}`, `BMP3:${bmp}`],
+  ];
+  for (const argv of attempts) {
+    const res = await tryRun($, argv);
+    if (res.ok && (await exists($, bmp))) return true;
+  }
+  return false;
+}
+
+const failedLogos = new Set<string>();
+
+/**
+ * Load `url` as terminal cells, caching the result under
+ * `<home>/.promptai/logos/`. Resolves null when anything is unavailable.
+ */
+async function loadLogoCells(
+  $: Engine,
+  opts: { url: string; home: string; columns: number; rows: number },
+): Promise<LogoCells | null> {
+  const { url, home, columns, rows } = opts;
+  if (!home || !/^https?:\/\//i.test(url)) return null;
+
+  const key = `${hashKey(url)}-${columns}x${rows}`;
+  if (failedLogos.has(key)) return null;
+
+  const dir = `${home}/.promptai/logos`;
+  const cacheFile = `${dir}/${key}.cells.json`;
+  try {
+    if (await exists($, cacheFile)) {
+      const cached = JSON.parse(await $.fs.read(cacheFile)) as LogoCells;
+      if (cached.cells && cached.columns === columns && cached.rows === rows) return cached;
+    }
+  } catch {
+    // rebuild below
+  }
+
+  const src = `${dir}/${key}.src`;
+  const png = `${dir}/${key}.png`;
+  const bmp = `${dir}/${key}.bmp`;
+  try {
+    const dl = await tryRun($, [
+      "curl", "-sSL", "--max-time", "5", "--max-filesize", "2000000", "--create-dirs",
+      "-o", src, "-w", "%{content_type}", url,
+    ]);
+    if (!dl.ok || !(await exists($, src))) throw new Error("download");
+
+    const isSvg = /svg/i.test(dl.stdout) || /\.svg(\?|$)/i.test(url);
+    let input = src;
+    if (isSvg) {
+      const svgFile = `${src}.svg`;
+      await tryRun($, ["mv", "-f", src, svgFile]);
+      if (!(await svgToPng($, svgFile, dir, png))) throw new Error("svg");
+      input = png;
+    }
+    if (!(await toBmp($, input, bmp))) throw new Error("bmp");
+
+    const { base64 } = await $.fs.read(bmp, { as: "bytes" });
+    const bitmap = parseBmp(decodeBase64(base64));
+    if (!bitmap) throw new Error("parse");
+
+    const logo = bitmapToCells(bitmap, columns, rows);
+    await $.fs.write(cacheFile, JSON.stringify(logo));
+    return logo;
+  } catch {
+    failedLogos.add(key);
+    return null;
+  } finally {
+    await tryRun($, ["rm", "-f", src, `${src}.svg`, png, bmp]);
+  }
+}
+
+/** Fire-and-forget: the card draws at once, the logo joins it when ready. */
+async function loadLogo($: Engine, ad: AdCreative): Promise<void> {
+  if (!ad.logoUrl) return;
+  const logo = await loadLogoCells($, { url: ad.logoUrl, home: homeDir, columns: LOGO_COLS, rows: LOGO_ROWS });
+  if (logo && active.ad?.id === ad.id) {
+    active.logo = logo;
+    $.ui.invalidate("ui.render");
+  }
+}
+
+async function beginAdSession($: Engine): Promise<void> {
+  if (!config || !config.adsOptIn || startingSession) return;
+  if (active.phase === "loading" || active.phase === "showing") return;
+
+  startingSession = true;
+  // A banked card stays open until now; drop its logo and credited stocks.
+  resetAd("loading");
+  $.ui.invalidate("ui.render");
+
+  try {
+    const res = await $.http.fetch(`${config.serverUrl}/ads/session`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ deviceId: config.deviceId, source: SOURCE }),
+    });
+    const body = parseBody<{
+      sessionId?: string;
+      ad?: AdCreative;
+      error?: string;
+    }>(res.text);
+    if (!res.ok || !body.sessionId || !body.ad) {
+      active.phase = "failed";
+      active.error = body.error ?? `session ${res.status}`;
+      $.ui.invalidate("ui.render");
+      $.clock.after(5_000, () => {
+        if (active.phase === "failed") {
+          resetAd("idle");
+          $.ui.invalidate("ui.render");
+        }
+      });
+      return;
+    }
+
+    const now = Date.now();
+    active.phase = "showing";
+    active.sessionId = body.sessionId;
+    active.ad = body.ad;
+    active.shownAt = now;
+    active.error = undefined;
+    await bumpLastAdOpenedAt($, now);
+    startCountdown($);
+    $.ui.invalidate("ui.render");
+    void loadLogo($, body.ad);
+  } catch (err) {
+    active.phase = "failed";
+    active.error = String(err);
+    $.ui.invalidate("ui.render");
+    $.clock.after(5_000, () => {
+      if (active.phase === "failed") {
+        resetAd("idle");
+        $.ui.invalidate("ui.render");
+      }
+    });
+  } finally {
+    startingSession = false;
+  }
+}
+
+// --- Jev ticker ---
+
+/** Fire-and-forget; keeps the last good ticker when a refresh fails. */
+async function refreshTicker($: Engine, force = false): Promise<void> {
+  if (!config || jevFetching) return;
+  if (!force && Date.now() - jevFetchedAt < TICKER_STALE_MS) return;
+  jevFetching = true;
+  try {
+    const res = await $.http.fetch(`${config.serverUrl}/stocks/ticker`, { method: "GET" });
+    if (!res.ok) return;
+    const body = parseBody<Partial<JevTicker>>(res.text);
+    if (!Array.isArray(body.names)) return;
+    jev = {
+      enabled: Boolean(body.enabled),
+      rewardUsd: Number(body.rewardUsd) || 0,
+      picks: Array.isArray(body.picks) ? body.picks : [],
+      names: body.names,
+    };
+    jevFetchedAt = Date.now();
+    $.ui.invalidate("ui.render");
+    for (const name of jev.names) void loadStockLogo($, name);
+  } catch {
+    // ticker is decoration; never surface a fetch error
+  } finally {
+    jevFetching = false;
+  }
+}
+
+/** Fire-and-forget: tiles draw a text badge until the logo lands. */
+async function loadStockLogo($: Engine, name: TickerName): Promise<void> {
+  if (!name.logoUrl || stockLogos.has(name.ticker)) return;
+  stockLogos.set(name.ticker, null);
+  const logo = await loadLogoCells($, {
+    url: name.logoUrl,
+    home: homeDir,
+    columns: STOCK_LOGO_COLS,
+    rows: STOCK_LOGO_ROWS,
+  });
+  if (logo) {
+    stockLogos.set(name.ticker, logo);
+    $.ui.invalidate("ui.render");
+  }
+}
+
+function tickerQuote(ticker: string): TickerName | undefined {
+  return jev?.names.find((n) => n.ticker === ticker);
+}
+
+function fmtPrice(price: number | null): string {
+  if (price == null) return "";
+  return price >= 1000 ? price.toFixed(0) : price.toFixed(2);
+}
+
+function fmtChange(change: number | null): { text: string; color: string } | null {
+  if (change == null) return null;
+  const up = change >= 0;
+  return { text: `${up ? "▲" : "▼"}${Math.abs(change).toFixed(1)}%`, color: up ? C.green : C.red };
+}
+
+/** Plain-text ticker for the one-string prompt hint: `NVDA 182.40 ▲1.2% · TSLA …`. */
+function tickerLine(): string {
+  const names = jev?.picks.length ? jev.picks : [];
+  return names
+    .map((n) => [n.ticker, fmtPrice(n.price), fmtChange(n.change24h)?.text ?? ""].filter(Boolean).join(" "))
+    .join(" · ");
+}
+
+function remainingSeconds($: Engine): number {
+  if (!active.ad || active.shownAt == null) return 0;
+  const left = active.ad.minWatchMs - (Date.now() - active.shownAt);
+  return Math.max(0, Math.ceil(left / 1000));
+}
+
+export const register: Register = (on) => {
+  on("session.start", async ($, e, next) => {
+    homeDir = await resolveHome($);
+    config = await loadConfig($);
+    if (config?.adsOptIn) {
+      await writeHeartbeat($);
+      void refreshTicker($, true);
+    }
+    return next(e);
+  });
+
+  // Fire-and-forget: never await the session fetch before next(e).
+  on("prompt.submit", ($, e, next) => {
+    if (config?.adsOptIn) {
+      void writeHeartbeat($);
+      void beginAdSession($);
+      void refreshTicker($);
+    }
+    return next(e);
+  });
+
+  // While the agent works and no card is up, ride Jev's picks on the hint line.
+  on("ui.render", { component: "PromptHint" }, ($, e, next) => {
+    if (!config?.adsOptIn || active.phase !== "idle" || !e.props.isWorking || e.props.isDraft) {
+      return next(e);
+    }
+    const line = tickerLine();
+    if (!line) return next(e);
+    const hint = e.props.hint ? `${e.props.hint} · ` : "";
+    return next({ ...e, props: { ...e.props, hint: `${hint}Jev ${line}` } });
+  });
+
+  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
+    if (!config?.adsOptIn || active.phase === "idle") {
+      return next(e);
+    }
+
+    const t = await $.ui.resolve(e);
+    const Raster = "Raster" in t ? t.Raster : null;
+
+    // One Jev stock tile: logo, then ticker / quote / detail stacked beside it.
+    const stockTile = (ticker: string, detail: string, detailColor: string) => {
+      const quote = tickerQuote(ticker);
+      const change = fmtChange(quote?.change24h ?? null);
+      const logo = stockLogos.get(ticker);
+      return (
+        <t.Box key={`tile-${ticker}`} gap={1}>
+          {Raster && logo ? (
+            <Raster key={`logo-${ticker}`} columns={logo.columns} rows={logo.rows} cells={logo.cells} />
+          ) : (
+            <t.Box width={STOCK_LOGO_COLS} height={STOCK_LOGO_ROWS} justifyContent="center" alignItems="center">
+              <t.Text color={C.dim} bold>{ticker.slice(0, 2)}</t.Text>
+            </t.Box>
+          )}
+          <t.Box flexDirection="column">
+            <t.Text color={C.fg} bold>{ticker}</t.Text>
+            <t.Box gap={1}>
+              {quote?.price != null ? <t.Text color={C.soft}>{fmtPrice(quote.price)}</t.Text> : null}
+              {change ? <t.Text color={change.color}>{change.text}</t.Text> : null}
+            </t.Box>
+            <t.Text color={detailColor}>{detail}</t.Text>
+          </t.Box>
+        </t.Box>
+      );
+    };
+
+    const jevSection = (title: string, aside: string, tiles: RenderChildren[]) => (
+      <t.Box flexDirection="column" borderStyle="round" borderColor={C.faint} paddingX={1} marginTop={1}>
+        <t.Box justifyContent="space-between">
+          <t.Text color={C.amber} bold>{`◇ ${title}`}</t.Text>
+          <t.Text color={C.dim}>{aside}</t.Text>
+        </t.Box>
+        <t.Box gap={4} flexWrap="wrap" marginTop={1}>
+          {tiles}
+        </t.Box>
+      </t.Box>
+    );
+
+    if (active.phase === "loading") {
+      return (
+        <t.Box borderStyle="round" borderColor={C.faint} paddingX={1} gap={1}>
+          <t.Text color={C.amber}>●</t.Text>
+          <t.Text color={C.dim}>promptai · loading sponsored card…</t.Text>
+        </t.Box>
+      );
+    }
+
+    if (active.phase === "failed") {
+      return (
+        <t.Box borderStyle="round" borderColor={C.red} paddingX={1} gap={1}>
+          <t.Text color={C.red}>✕</t.Text>
+          <t.Text color={C.dim}>{`promptai · ad unavailable${active.error ? ` (${active.error})` : ""}`}</t.Text>
+        </t.Box>
+      );
+    }
+
+    const verified = active.phase === "verified";
+    if ((active.phase !== "showing" && !verified) || !active.ad || active.shownAt == null) {
+      return next(e);
+    }
+
+    const ad = active.ad;
+    const elapsed = Date.now() - active.shownAt;
+    const bar = progressBar(elapsed, ad.minWatchMs);
+    const secs = remainingSeconds($);
+    const shownLines = (ad.lines ?? []).slice(0, 4);
+
+    const logo = active.logo;
+    const granted = verified ? (active.stocks ?? []) : [];
+
+    const details = (
+      <t.Box flexDirection="column" flexGrow={1}>
+        <t.Box gap={1}>
+          <t.Text color={C.green}>◆</t.Text>
+          <t.Text color={C.fg} bold>{ad.brand}</t.Text>
+          {ad.tag ? <t.Text color={C.dim}>{`· ${ad.tag}`}</t.Text> : null}
+          <t.Text color={C.faint}>· sponsored</t.Text>
+        </t.Box>
+        <t.Text color={C.soft} wrap="truncate-end">{ad.tagline}</t.Text>
+        {shownLines.map((line, i) => (
+          <t.Box key={`line-${i}`} gap={1}>
+            {line.cmd ? <t.Text color={C.green}>$</t.Text> : <t.Text color={C.faint}>│</t.Text>}
+            <t.Text color={line.cmd ? C.fg : C.dim} wrap="truncate-end">{line.text}</t.Text>
+          </t.Box>
+        ))}
+      </t.Box>
+    );
+
+    return (
+      <t.Box flexDirection="column" borderStyle="round" borderColor={verified ? C.green : C.faint} paddingX={1}>
+        {Raster && logo ? (
+          <t.Box gap={2}>
+            <Raster key="logo" columns={logo.columns} rows={logo.rows} cells={logo.cells} />
+            {details}
+          </t.Box>
+        ) : (
+          details
+        )}
+        {granted.length
+          ? jevSection(
+              "Jev credited",
+              `$${granted.reduce((sum, g) => sum + g.notionalUsd, 0).toFixed(2)} paper`,
+              granted.map((g) => stockTile(g.ticker, `+$${g.notionalUsd.toFixed(4)}`, C.green)),
+            )
+          : jev?.enabled && jev.picks.length && !verified
+          ? jevSection(
+              "Jev top picks",
+              `watch → $${jev.rewardUsd.toFixed(2)} slice`,
+              jev.picks.map((p) =>
+                stockTile(p.ticker, p.weight != null ? `${Math.round(p.weight * 100)}% of book` : "", C.faint),
+              ),
+            )
+          : null}
+        {verified ? (
+          <t.Box gap={1} marginTop={1}>
+            <t.Text color={C.green} bold>✓ verified</t.Text>
+            <t.Text color={C.soft}>credit banked</t.Text>
+            <t.Text color={C.faint}>·</t.Text>
+            <t.Button
+              key="hide"
+              label="Hide"
+              plain
+              onPress={() => {
+                resetAd("idle");
+                $.ui.invalidate("ui.render");
+              }}
+            />
+          </t.Box>
+        ) : (
+          <t.Box gap={1} marginTop={1}>
+            <t.Box>
+              <t.Text color={C.green}>{bar.filled}</t.Text>
+              <t.Text color={C.faint}>{bar.empty}</t.Text>
+            </t.Box>
+            <t.Text color={C.fg} bold>{`${secs}s`}</t.Text>
+            <t.Text color={C.faint}>opt-in rewarded ad</t.Text>
+          </t.Box>
+        )}
+        <t.Button key="cta" label={`${ad.ctaLabel || "Learn more"} →`} onPress={() => void onCtaPress($)} />
+      </t.Box>
+    );
+  });
+};