@hienlh/ppm 0.19.3 → 0.19.5

package/src/services/proxy-image-bridge.ts

@@ -0,0 +1,186 @@
+/**
+ * OpenAI Images API over a PPM provider's agent.
+ *
+ *   POST /proxy/<provider>/v1/images/generations   text → image
+ *   POST /proxy/<provider>/v1/images/edits         image → image
+ *
+ * Only codex is wired up, and that is the honest shape of it rather than a
+ * shortcut: codex owns a built-in image tool, while Claude cannot generate
+ * images at all. Other providers get a clear refusal instead of a hang.
+ *
+ * Getting the bytes back is the awkward part. The agent's sandbox stays
+ * read-only — a proxy reachable with an API key must not gain write access to
+ * the host — so it cannot drop the file somewhere of our choosing. It does
+ * write into codex's own `generated_images` directory even under that sandbox,
+ * so the bridge snapshots that directory around the turn and takes whatever is
+ * new. Widening the sandbox to control the path was tried and rejected: codex
+ * reports the workspace as read-only regardless, and the elevation would buy
+ * nothing.
+ */
+import { mkdtempSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, extname } from "node:path";
+import { resolveCodexAccountForSession } from "./codex-account.service.ts";
+import { startAgentTurn, resolveProvider } from "./proxy-agent-turn.ts";
+import { openAiError } from "./proxy-openai-format.ts";
+
+/** Providers whose agent can actually produce an image. */
+const IMAGE_CAPABLE = new Set(["codex"]);
+
+const IMAGE_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".webp", ".gif"]);
+
+export interface ImageGenerationBody {
+  prompt?: string;
+  n?: number;
+  size?: string;
+  model?: string;
+}
+
+export interface ImageEditBody extends ImageGenerationBody {
+  /** Data URL or bare base64 of the image to edit. */
+  image?: string;
+}
+
+/** Decode a data URL (or bare base64) into bytes plus a file extension. */
+export function decodeImagePayload(payload: string): { bytes: Buffer; ext: string } {
+  const match = /^data:([^;,]+)(;base64)?,(.*)$/s.exec(payload.trim());
+  const mime = match?.[1] ?? "image/png";
+  const data = match ? match[3]! : payload.trim();
+  const ext = mime === "image/jpeg" ? ".jpg" : mime === "image/webp" ? ".webp" : ".png";
+  return { bytes: Buffer.from(data, "base64"), ext };
+}
+
+/** Every image file under a directory tree, with its modified time. */
+function listImages(root: string): Map<string, number> {
+  const found = new Map<string, number>();
+  const walk = (dir: string) => {
+    let entries: string[];
+    try { entries = readdirSync(dir); } catch { return; }
+    for (const name of entries) {
+      const full = join(dir, name);
+      let stat;
+      try { stat = statSync(full); } catch { continue; }
+      if (stat.isDirectory()) walk(full);
+      else if (IMAGE_EXTENSIONS.has(extname(name).toLowerCase())) found.set(full, stat.mtimeMs);
+    }
+  };
+  walk(root);
+  return found;
+}
+
+/** Where the provider drops generated images. Codex writes under its CODEX_HOME. */
+async function imageOutputRoot(): Promise<string> {
+  const account = await resolveCodexAccountForSession();
+  const home = account?.home ?? join(process.env.USERPROFILE ?? process.env.HOME ?? ".", ".codex");
+  return join(home, "generated_images");
+}
+
+/** Run one turn and return the image files it produced, newest first. */
+async function runImageTurn(
+  providerId: string, prompt: string, model: string | undefined, imagePaths: string[],
+): Promise<string[]> {
+  const root = await imageOutputRoot();
+  mkdirSync(root, { recursive: true });
+  const before = listImages(root);
+
+  const { events, cleanup } = await startAgentTurn(providerId, { prompt, model, imagePaths });
+  let said = "";
+  try {
+    for await (const ev of events) {
+      if (ev.type === "text") said += ev.content;
+      else if (ev.type === "error") throw new Error(ev.message);
+      else if (ev.type === "done") break;
+    }
+  } finally {
+    await cleanup();
+  }
+
+  const produced = [...listImages(root)]
+    .filter(([path, mtime]) => !before.has(path) || before.get(path) !== mtime)
+    .sort((a, b) => b[1] - a[1])
+    .map(([path]) => path);
+
+  if (produced.length === 0) {
+    // The agent answers in prose when it declines, and that reason is far more
+    // useful to the caller than a bare "no image".
+    throw new Error(`The agent produced no image. It replied: ${said.trim().slice(0, 400) || "(nothing)"}`);
+  }
+  return produced;
+}
+
+/** OpenAI's images response. Always base64 — PPM has nowhere to host a URL. */
+function imagesResponse(paths: string[]): Response {
+  return new Response(JSON.stringify({
+    created: Math.floor(Date.now() / 1000),
+    data: paths.map((p) => ({ b64_json: readFileSync(p).toString("base64") })),
+  }), {
+    status: 200,
+    headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" },
+  });
+}
+
+/** Shared guard: provider must exist and be able to make images. */
+function refuse(providerId: string): Response | null {
+  if (!resolveProvider(providerId)) return openAiError(404, `Unknown provider "${providerId}"`);
+  if (!IMAGE_CAPABLE.has(providerId)) {
+    return openAiError(400, `Provider "${providerId}" cannot generate images. Supported: ${[...IMAGE_CAPABLE].join(", ")}`);
+  }
+  return null;
+}
+
+/** Ask for exactly the files we intend to read back. */
+function generationPrompt(body: ImageGenerationBody): string {
+  const count = Math.min(Math.max(body.n ?? 1, 1), 4);
+  return [
+    `Generate ${count} image${count > 1 ? "s" : ""} using your built-in image generation tool.`,
+    body.size ? `Target size: ${body.size}.` : "",
+    `Subject: ${body.prompt}`,
+    "Do not write any files yourself and do not run shell commands. Reply with only the word DONE.",
+  ].filter(Boolean).join("\n");
+}
+
+/** POST /v1/images/generations */
+export async function forwardImageGeneration(providerId: string, body: ImageGenerationBody): Promise<Response> {
+  const blocked = refuse(providerId);
+  if (blocked) return blocked;
+  if (!body.prompt?.trim()) return openAiError(400, "prompt is required");
+
+  try {
+    const produced = await runImageTurn(providerId, generationPrompt(body), body.model, []);
+    return imagesResponse(produced.slice(0, Math.min(Math.max(body.n ?? 1, 1), 4)));
+  } catch (e) {
+    return openAiError(502, (e as Error).message);
+  }
+}
+
+/** POST /v1/images/edits */
+export async function forwardImageEdit(providerId: string, body: ImageEditBody): Promise<Response> {
+  const blocked = refuse(providerId);
+  if (blocked) return blocked;
+  if (!body.image) return openAiError(400, "image is required");
+  if (!body.prompt?.trim()) return openAiError(400, "prompt is required");
+
+  // The agent reads the source off disk, so the payload has to land somewhere
+  // first; the directory is this request's alone and goes away with it.
+  const dir = mkdtempSync(join(tmpdir(), "ppm-img-in-"));
+  try {
+    const { bytes, ext } = decodeImagePayload(body.image);
+    if (bytes.length === 0) return openAiError(400, "image is not valid base64");
+    const path = join(dir, `input${ext}`);
+    writeFileSync(path, bytes);
+
+    const prompt = [
+      "Edit the attached image using your built-in image generation tool.",
+      `Requested change: ${body.prompt}`,
+      "Preserve everything the request does not ask you to change.",
+      "Do not write any files yourself and do not run shell commands. Reply with only the word DONE.",
+    ].join("\n");
+
+    const produced = await runImageTurn(providerId, prompt, body.model, [path]);
+    return imagesResponse(produced.slice(0, Math.min(Math.max(body.n ?? 1, 1), 4)));
+  } catch (e) {
+    return openAiError(502, (e as Error).message);
+  } finally {
+    try { rmSync(dir, { recursive: true, force: true }); } catch { /* best effort */ }
+  }
+}

package/src/services/proxy-openai-bridge.ts

@@ -7,6 +7,9 @@
  */
 import { query } from "@anthropic-ai/claude-agent-sdk";
 import { accountSelector } from "./account-selector.service.ts";
+import {
+  buildPromptFromOpenAiMessages, openAiError, SSE_HEADERS,
+} from "./proxy-openai-format.ts";
 
 // ── Helpers ──────────────────────────────────────────────────────────
 
@@ -26,36 +29,6 @@ function buildSdkEnv(accessToken: string): Record<string, string | undefined> {
   };
 }
 
-/** Extract system prompt and build text prompt from OpenAI messages format */
-function buildPromptFromOpenAiMessages(body: any): { prompt: string; systemPrompt?: string } {
-  const messages: any[] = body.messages ?? [];
-  let systemPrompt: string | undefined;
-  const conversationParts: string[] = [];
-
-  for (const m of messages) {
-    const text = typeof m.content === "string"
-      ? m.content
-      : Array.isArray(m.content)
-        ? m.content.filter((b: any) => b.type === "text").map((b: any) => b.text).join("\n")
-        : String(m.content ?? "");
-
-    if (m.role === "system") {
-      systemPrompt = systemPrompt ? `${systemPrompt}\n${text}` : text;
-    } else {
-      const role = m.role === "assistant" ? "Assistant" : "Human";
-      conversationParts.push(`${role}: ${text}`);
-    }
-  }
-
-  return { prompt: conversationParts.join("\n\n"), systemPrompt };
-}
-
-function openAiError(status: number, message: string): Response {
-  return new Response(JSON.stringify({
-    error: { message, type: "server_error", code: String(status) },
-  }), { status, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" } });
-}
-
 // ── Public API ───────────────────────────────────────────────────────
 
 interface SdkAccount {
@@ -230,12 +203,5 @@ async function handleStreaming(
     },
   });
 
-  return new Response(readable, {
-    headers: {
-      "Content-Type": "text/event-stream",
-      "Cache-Control": "no-cache",
-      "Connection": "keep-alive",
-      "Access-Control-Allow-Origin": "*",
-    },
-  });
+  return new Response(readable, { headers: SSE_HEADERS });
 }

package/src/services/proxy-openai-format.ts

@@ -0,0 +1,174 @@
+/**
+ * OpenAI Chat Completions wire format — the shared translation layer between
+ * PPM's proxy bridges and the shape an OpenAI client expects.
+ *
+ * Both proxy bridges speak this: the Claude SDK bridge (`proxy-openai-bridge.ts`)
+ * and the provider-agnostic agent bridge (`proxy-agent-bridge.ts`). Keeping the
+ * wire format in one place is what stops the two from drifting into subtly
+ * different `chat.completion` payloads.
+ */
+
+/** One entry of the OpenAI `messages` array (content is string or block array). */
+export interface OpenAiMessage {
+  role?: string;
+  content?: string | Array<{
+    type?: string;
+    text?: string;
+    image_url?: { url?: string };
+  }> | null;
+}
+
+export interface OpenAiChatBody {
+  model?: string;
+  messages?: OpenAiMessage[];
+  stream?: boolean;
+}
+
+/**
+ * Flatten OpenAI `messages` into a single prompt plus a system prompt.
+ *
+ * Non-text blocks (notably `image_url`) are dropped: neither bridge can carry
+ * an inline image today. Callers that must not silently lose an attachment
+ * should check `hasUnsupportedBlocks` first.
+ */
+export function buildPromptFromOpenAiMessages(
+  body: OpenAiChatBody,
+): { prompt: string; systemPrompt?: string } {
+  const messages = body.messages ?? [];
+  let systemPrompt: string | undefined;
+  const conversationParts: string[] = [];
+
+  for (const m of messages) {
+    const text = typeof m.content === "string"
+      ? m.content
+      : Array.isArray(m.content)
+        ? m.content.filter((b) => b.type === "text").map((b) => b.text ?? "").join("\n")
+        : String(m.content ?? "");
+
+    if (m.role === "system") {
+      systemPrompt = systemPrompt ? `${systemPrompt}\n${text}` : text;
+    } else {
+      const role = m.role === "assistant" ? "Assistant" : "Human";
+      conversationParts.push(`${role}: ${text}`);
+    }
+  }
+
+  return { prompt: conversationParts.join("\n\n"), systemPrompt };
+}
+
+/**
+ * Inline image payloads, in request order.
+ *
+ * Only `data:` URLs are accepted. Fetching an arbitrary `http(s)` URL would let
+ * a caller aim the server at hosts it can reach and the caller cannot, so a
+ * remote URL is refused rather than followed.
+ */
+export function extractImagePayloads(body: OpenAiChatBody): { dataUrls: string[]; remoteUrls: number } {
+  const dataUrls: string[] = [];
+  let remoteUrls = 0;
+  for (const m of body.messages ?? []) {
+    if (!Array.isArray(m.content)) continue;
+    for (const block of m.content) {
+      if (block.type !== "image_url") continue;
+      const url = block.image_url?.url ?? "";
+      if (url.startsWith("data:")) dataUrls.push(url);
+      else remoteUrls++;
+    }
+  }
+  return { dataUrls, remoteUrls };
+}
+
+/** True when a message carries a block this format can neither send nor name. */
+export function hasUnsupportedBlocks(body: OpenAiChatBody): boolean {
+  return (body.messages ?? []).some((m) =>
+    Array.isArray(m.content) && m.content.some((b) => b.type && b.type !== "text" && b.type !== "image_url"),
+  );
+}
+
+const JSON_HEADERS = {
+  "Content-Type": "application/json",
+  "Access-Control-Allow-Origin": "*",
+} as const;
+
+export const SSE_HEADERS = {
+  "Content-Type": "text/event-stream",
+  "Cache-Control": "no-cache",
+  "Connection": "keep-alive",
+  "Access-Control-Allow-Origin": "*",
+} as const;
+
+export function openAiError(status: number, message: string): Response {
+  return new Response(
+    JSON.stringify({ error: { message, type: "server_error", code: String(status) } }),
+    { status, headers: JSON_HEADERS },
+  );
+}
+
+/** Token counts for the `usage` object; omitted fields report as 0. */
+export interface OpenAiUsage {
+  promptTokens?: number;
+  completionTokens?: number;
+}
+
+/** Build a non-streaming `chat.completion` response. */
+export function completionResponse(
+  content: string,
+  model: string,
+  usage?: OpenAiUsage,
+): Response {
+  const promptTokens = usage?.promptTokens ?? 0;
+  const completionTokens = usage?.completionTokens ?? 0;
+  return new Response(JSON.stringify({
+    id: `chatcmpl-${Date.now()}`,
+    object: "chat.completion",
+    created: Math.floor(Date.now() / 1000),
+    model,
+    choices: [{
+      index: 0,
+      message: { role: "assistant", content },
+      finish_reason: "stop",
+    }],
+    usage: {
+      prompt_tokens: promptTokens,
+      completion_tokens: completionTokens,
+      total_tokens: promptTokens + completionTokens,
+    },
+  }), { status: 200, headers: JSON_HEADERS });
+}
+
+/** Emits `chat.completion.chunk` frames for one streamed response. */
+export class ChunkWriter {
+  private readonly encoder = new TextEncoder();
+  private readonly id = `chatcmpl-${Date.now()}`;
+  private readonly created = Math.floor(Date.now() / 1000);
+
+  constructor(
+    private readonly controller: ReadableStreamDefaultController<Uint8Array>,
+    private readonly model: string,
+  ) {}
+
+  /** One SSE frame carrying a delta (and optionally the finish reason). */
+  send(delta: Record<string, unknown>, finishReason: string | null = null): void {
+    const payload = {
+      id: this.id, object: "chat.completion.chunk", created: this.created, model: this.model,
+      choices: [{ index: 0, delta, finish_reason: finishReason }],
+    };
+    this.controller.enqueue(this.encoder.encode(`data: ${JSON.stringify(payload)}\n\n`));
+  }
+
+  /** OpenAI clients treat the role-only first chunk as the start of the message. */
+  open(): void {
+    this.send({ role: "assistant", content: "" });
+  }
+
+  text(content: string): void {
+    if (content) this.send({ content });
+  }
+
+  /** Terminal frame plus the `[DONE]` sentinel every OpenAI client waits for. */
+  close(finishReason = "stop"): void {
+    this.send({}, finishReason);
+    this.controller.enqueue(this.encoder.encode("data: [DONE]\n\n"));
+    this.controller.close();
+  }
+}

package/src/services/proxy.service.ts

@@ -3,6 +3,8 @@ import { accountSelector } from "./account-selector.service.ts";
 import { accountService } from "./account.service.ts";
 import { forwardViaSdk } from "./proxy-sdk-bridge.ts";
 import { forwardOpenAiViaSdk } from "./proxy-openai-bridge.ts";
+import { forwardAgentChatCompletions } from "./proxy-agent-bridge.ts";
+import { forwardAgentMessages } from "./proxy-agent-anthropic-bridge.ts";
 import { randomBytes } from "node:crypto";
 
 const PROXY_ENABLED_KEY = "proxy_enabled";
@@ -168,6 +170,58 @@ class ProxyService {
     }
   }
 
+  /**
+   * Run a provider's agent behind one of the two API dialects. Account rotation
+   * is the provider's own concern here — codex picks a CODEX_HOME — so unlike
+   * forwardOpenAi this must not claim a Claude account.
+   */
+  private async forwardAgent(
+    providerId: string,
+    body: string,
+    path: string,
+    run: (providerId: string, parsed: any) => Promise<Response>,
+    invalidJson: Response,
+    caller?: ProxyCallerMeta,
+  ): Promise<Response> {
+    const endpoint = `/${providerId}/v1/${path}`;
+    let parsed: { model?: string };
+    try {
+      parsed = JSON.parse(body);
+    } catch {
+      return invalidJson;
+    }
+
+    const start = performance.now();
+    this.requestCount++;
+    const response = await run(providerId, parsed);
+    const durationMs = Math.round(performance.now() - start);
+    insertProxyRequest({
+      endpoint, model: parsed.model, accountLabel: providerId,
+      callerIp: caller?.callerIp, callerUa: caller?.callerUa,
+      status: response.ok ? "success" : "error", durationMs,
+    });
+    console.log(`[proxy] POST ${endpoint} → ${response.status} ${durationMs}ms caller=${caller?.callerIp ?? "unknown"}`);
+    return response;
+  }
+
+  /** OpenAI dialect: `/proxy/<provider>/v1/chat/completions`. */
+  async forwardAgentChat(providerId: string, body: string, caller?: ProxyCallerMeta): Promise<Response> {
+    return this.forwardAgent(providerId, body, "chat/completions", forwardAgentChatCompletions,
+      new Response(
+        JSON.stringify({ error: { message: "Invalid JSON body", type: "invalid_request_error" } }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      ), caller);
+  }
+
+  /** Anthropic dialect: `/proxy/<provider>/v1/messages`. */
+  async forwardAgentMessages(providerId: string, body: string, caller?: ProxyCallerMeta): Promise<Response> {
+    return this.forwardAgent(providerId, body, "messages", forwardAgentMessages,
+      new Response(
+        JSON.stringify({ type: "error", error: { type: "invalid_request_error", message: "Invalid JSON body" } }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      ), caller);
+  }
+
   /** Direct HTTP forward for API key accounts */
   private async forwardDirect(
     path: string,

package/src/web/components/chat/usage-badge.tsx

@@ -6,9 +6,14 @@
  * controls, which is what let the two drift apart. The account cards are the same component
  * the Settings pane renders — passing no action callbacks is what makes them read-only, so
  * there is one card implementation rather than a display twin.
+ *
+ * Accounts sit in a row that scrolls sideways, not a vertical stack: this panel exists to
+ * compare them, and stacked in a 350px strip that meant scrolling past one account to see
+ * the next. Fullscreen lays the same cards out as a grid when there are too many to fit.
  */
 
-import { Activity, ExternalLink, RefreshCw, X } from "lucide-react";
+import { useState } from "react";
+import { Activity, ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
 import type { UsageInfo } from "../../../types/chat";
 import { openSettings } from "@/components/settings/open-settings";
 import { AccountCard } from "@/components/settings/accounts/account-card";
@@ -61,6 +66,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   // Fetching is gated on visibility: the panel is collapsed most of the time, and its
   // usage endpoint is the expensive one.
   const { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload } = useAccountsData(visible);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   if (!visible) return null;
 
@@ -68,8 +74,19 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
   const hasPerAccountUsage = usages.length > 0;
 
+  // Roughly square, so the cards fill the viewport instead of leaving a long empty column.
+  const fsCount = usages.length || 1;
+  const fsCols = Math.ceil(Math.sqrt(fsCount));
+  const fsRows = Math.ceil(fsCount / fsCols);
+
   return (
-    <div className="relative border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
+    <div
+      className={`relative border-b border-border bg-surface px-3 py-2.5 ${
+        isFullscreen
+          ? "fixed inset-0 z-50 flex flex-col gap-2.5 overflow-hidden"
+          : "space-y-2.5 max-h-[350px] overflow-y-auto"
+      }`}
+    >
       <div className="flex items-center justify-between shrink-0">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-text-primary">Usage</span>
@@ -85,6 +102,16 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           >
             Manage accounts <ExternalLink className="size-3" />
           </button>
+          {hasPerAccountUsage && (
+            <button
+              onClick={() => setIsFullscreen((v) => !v)}
+              className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+              title={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
+              aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
+            >
+              {isFullscreen ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
+            </button>
+          )}
           {onReload && (
             <button
               onClick={() => { onReload(); void reload(); }}
@@ -97,7 +124,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
             </button>
           )}
           <button
-            onClick={onClose}
+            onClick={() => { setIsFullscreen(false); onClose(); }}
             className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
             aria-label="Close usage panel"
           >
@@ -107,7 +134,16 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
       </div>
 
       {hasPerAccountUsage || initialLoading ? (
-        <div className="space-y-1.5">
+        <div
+          className={isFullscreen
+            ? "flex-1 min-h-0 grid gap-2 overflow-hidden"
+            // Same classes as AccountCardRow, with the panel's wider padding to clear.
+            : "flex gap-2 overflow-x-auto pb-1 -mx-3 px-3 snap-x snap-mandatory scrollbar-thin"}
+          style={isFullscreen ? {
+            gridTemplateColumns: `repeat(${fsCols}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${fsRows}, minmax(0, 1fr))`,
+          } : undefined}
+        >
           {initialLoading ? (
             <p className="text-[10px] text-text-subtle">Loading...</p>
           ) : (
@@ -118,6 +154,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
                 isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
                 accountInfo={accountMap.get(entry.accountId)}
                 flash={flashIds.has(entry.accountId)}
+                layout={isFullscreen ? "grid" : "strip"}
               />
             ))
           )}

package/src/web/components/settings/accounts/account-card.tsx

@@ -1,6 +1,12 @@
 /**
- * One account in the list: name, badges, per-account controls, its rate-limit buckets, and a
- * footer of token facts.
+ * One account: name, badges, per-account controls, its rate-limit buckets, and a footer of
+ * token facts.
+ *
+ * Three layouts, because the two callers want opposite things. Settings manages accounts one
+ * at a time, so `list` gives each card the full width. The chat panel is for comparing them
+ * at a glance, so `strip` makes fixed-width cards that scroll sideways and `grid` fills a
+ * cell of the fullscreen view — stacked vertically, comparing two accounts meant scrolling
+ * past the one above.
  *
  * An expired account (past `expiresAt` AND no refresh token) is dimmed and loses every
  * control except delete — toggling or exporting a token the server can no longer renew only
@@ -25,10 +31,19 @@ export interface AccountCardProps {
   onViewProfile?: (profile: OAuthProfileData, accountId: string) => void;
   /** Brief highlight when this account's usage numbers just changed. */
   flash?: boolean;
+  /** `list` fills the width, `strip` is a fixed-width card in a sideways scroller, `grid`
+   *  fills a cell of the fullscreen grid. */
+  layout?: "list" | "strip" | "grid";
 }
 
+// Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
+// name and its bars, but a card that also carries view/export/toggle/delete needs room for
+// four controls beside the name, and at the read-only width that header wraps.
+const STRIP_WIDTH = { readOnly: "min-w-[220px]", withActions: "min-w-[300px]" } as const;
+
 export function AccountCard({
   entry, isActive, accountInfo, onToggle, toggling, onDelete, onExport, onViewProfile, flash,
+  layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
@@ -38,12 +53,21 @@ export function AccountCard({
     && accountInfo.expiresAt < Math.floor(Date.now() / 1000)
   );
   const ts = tokenStatus(accountInfo);
+  const hasActions = Boolean(onToggle || onDelete || onExport || onViewProfile);
+
+  const layoutClass = layout === "list"
+    ? ""
+    : layout === "grid"
+      // The cell owns the height, so the card spreads its rows into it.
+      ? "flex flex-col justify-evenly overflow-hidden min-h-0"
+      : `shrink-0 snap-start ${hasActions ? STRIP_WIDTH.withActions : STRIP_WIDTH.readOnly}`;
 
   return (
     <AccountCardShell
       active={isActive}
       flash={flash}
-      className={isExpired ? "opacity-50" : undefined}
+      dense={layout !== "list"}
+      className={[layoutClass, isExpired ? "opacity-50" : ""].filter(Boolean).join(" ") || undefined}
       data-testid="account-card"
       data-account-id={entry.accountId}
     >