@promptai.credit/cli 0.4.0 → 0.4.2

package/README.md

@@ -6,17 +6,36 @@ Cursor Agents Window are supported today; Codex CLI is next.
 
 ## How it works
 
-1. `promptai install claude` merges two hooks into `~/.claude/settings.json`:
+1. `promptai install claude` merges two hooks into `~/.claude/settings.json` and
+   installs the Claude Mods plugin into `~/.claude/skills/promptai/`:
    - **UserPromptSubmit**: baselines the session's transcript watermark and (if opted
      in, at most every 90s, never headless) opens the hosted rewarded-ad page
-     (`/watch`) in your browser. The ad plays while your agent works.
+     (`/watch`) in your browser — **unless** the Mods plugin is live (heartbeat in
+     `~/.promptai/native-plugin.json`), in which case the native AbovePrompt card
+     shows the ad instead.
    - **Stop** (async): reads the session transcript JSONL since the watermark, prices
      the turn with the shared model price table, and redeems one banked
      server-verified ad session against it via the API.
-2. The `/watch` page creates the ad session server-side on load, so SSV wall-clock
-   timing is enforced by the server; the browser countdown is cosmetic.
+   - **Mods plugin** (`product/claude-plugin`): on `prompt.submit` fetches an ad
+     session and renders a compact sponsored card via `ui.render` / `AbovePrompt`.
+2. The `/watch` page (and the native card) create the ad session server-side, so SSV
+   wall-clock timing is enforced by the server; countdowns are cosmetic.
 3. `promptai claim` pays out your verified balance as USDC on Base.
 
+### Claude Mods (native card)
+
+Native AbovePrompt ads need Claude Code function hooks (early access until GA).
+`promptai install claude` sets `env.CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1` in
+`~/.claude/settings.json` (an explicit value you already set is left alone, and
+`promptai uninstall claude` removes only what it added). This also enables any other
+function-hook plugins you use. Where Mods are unavailable, command hooks open `/watch`
+in the browser.
+Dev-load the plugin without installing:
+
+```bash
+CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 claude --plugin-dir product/claude-plugin
+```
+
 ## Cursor Agents Window (Glass)
 
 The Agents Window doesn't run VS Code extensions, so the promptai extension can't
@@ -45,17 +64,17 @@ State lives in `~/.promptai/` (`config.json`, `state.json`, `cli.log`).
 
 ```bash
 npm install -g @promptai.credit/cli
-promptai install claude      # Claude Code hooks
+promptai install claude      # Claude Code hooks + Mods plugin
 promptai install cursor      # Cursor Agents Window / classic IDE hooks
 ```
 
-`promptai install` then asks for your email and payout wallet, and docks ads on the **right** by default (like the IDE panel). Enter accepts a detected email.
+`promptai install` then asks for your email and payout wallet. Ads dock on the **right** by default. Enter accepts a detected email.
 
 ```bash
 promptai status              # device, balance, banked ad watches, recent prompts
 promptai watch               # open a rewarded ad now (banks a credit for later)
 promptai claim               # USDC on Base
-promptai set ads off         # opt out any time
+promptai off                 # toggle ads off (`promptai on` to turn them back on)
 promptai set side left       # or `default` for a normal browser tab
 ```
 
@@ -77,7 +96,9 @@ Developing from the repo instead: `pnpm --filter @promptai.credit/cli build`, th
   as the default during `promptai install`. Auto-detected emails link without
   verification; typing a different address (or `promptai set email`) sends a
   6-digit code to prove ownership.
+- Ads dock on the right by default. Toggle them anytime with `promptai on` /
+  `promptai off`.
 - Headless environments (CI, ssh without a display) never get browser tabs and
   simply skip crediting.
 - Uninstall with `promptai uninstall claude`; other hooks in your settings are
-  preserved.
+  preserved, and the Mods plugin under `~/.claude/skills/promptai/` is removed.

package/claude-plugin/.claude-plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+  "name": "promptai",
+  "version": "0.1.0",
+  "description": "Opt-in rewarded ads above the Claude Code prompt. Watch a short sponsored card while the agent works; verified watches fund prompt credits via promptai.credit.",
+  "author": {
+    "name": "PromptAI",
+    "url": "https://promptai.credit"
+  },
+  "homepage": "https://promptai.credit",
+  "keywords": ["ads", "credits", "promptai", "rewarded"]
+}

package/claude-plugin/README.md

@@ -0,0 +1,33 @@
+# PromptAI Claude Code plugin
+
+Native rewarded-ad card for Claude Code via **Claude Mods** (function hooks).
+
+While the agent works, a compact sponsored row renders above the prompt
+(`AbovePrompt`). After the server-verified watch window, the credit is banked
+the same way as the browser `/watch` path. Transcript pricing and redeem still
+run through the `promptai` CLI `Stop` command hook.
+
+## Requirements
+
+- Claude Code with function hooks enabled (early access). `promptai install claude`
+  sets `env.CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1` in `~/.claude/settings.json`; to enable
+  it by hand, use `CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 claude`.
+
+- `promptai install claude` (wires command hooks, enables the flag, copies this plugin)
+
+## Dev load (without install)
+
+```bash
+CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 claude --plugin-dir /path/to/product/claude-plugin
+```
+
+## Notes
+
+- If Mods are off or the module fails to load, the CLI falls back to opening
+  `/watch` in the browser (fail open).
+- The plugin writes `~/.promptai/native-plugin.json` on `session.start` so the
+  CLI can skip the browser tab while the native card is live.
+- The brand logo (PNG, favicon or SVG) is drawn as half-block cells, so it works in any
+  terminal. It is fetched with `curl` and converted with `sips` (macOS) or ImageMagick;
+  SVGs need `qlmanage` (macOS) or `rsvg-convert`. If any step is missing the card simply
+  draws without a logo. Results are cached under `~/.promptai/logos/`.

package/claude-plugin/hooks/ads.tsx

@@ -0,0 +1,557 @@
+/**
+ * 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
+ *
+ * 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, 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;
+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;
+
+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;
+}
+
+type AdPhase = "idle" | "loading" | "showing" | "verified" | "failed";
+
+interface ActiveAd {
+  phase: AdPhase;
+  sessionId?: string;
+  ad?: AdCreative;
+  shownAt?: number;
+  error?: string;
+  tick?: Timer;
+  logo?: LogoCells;
+}
+
+const active: ActiveAd = { phase: "idle" };
+let config: PromptaiConfig | null = null;
+let homeDir = "";
+let startingSession = false;
+
+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;
+}
+
+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;
+    }
+    active.phase = "verified";
+    clearTick();
+    $.ui.invalidate("ui.render");
+    // Auto-collapse the verified strip after a short beat.
+    $.clock.after(8_000, () => {
+      if (active.phase === "verified") {
+        resetAd("idle");
+        $.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;
+  active.phase = "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;
+  }
+}
+
+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($);
+    }
+    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($);
+    }
+    return next(e);
+  });
+
+  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
+    if (!config?.adsOptIn || active.phase === "idle") {
+      return next(e);
+    }
+
+    const t = await $.ui.resolve(e);
+
+    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>
+      );
+    }
+
+    if (active.phase === "verified") {
+      return (
+        <t.Box borderStyle="round" borderColor={C.green} paddingX={1} gap={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>
+      );
+    }
+
+    if (active.phase !== "showing" || !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 Raster = "Raster" in t ? t.Raster : null;
+    const logo = active.logo;
+
+    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={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
+        )}
+        <t.Box gap={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>
+    );
+  });
+};

package/claude-plugin/hooks/hooks.json

@@ -0,0 +1,4 @@
+{
+  "description": "PromptAI native rewarded-ad card (Claude Mods function hooks).",
+  "modules": ["./ads.tsx"]
+}