@hienlh/ppm 0.19.3 → 0.19.4

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

@@ -0,0 +1,157 @@
+/**
+ * Anthropic Messages API wire format for the provider-scoped proxy.
+ *
+ * The mirror of `proxy-openai-format.ts`: same job, the other dialect, so
+ * `/proxy/<provider>/v1/messages` and `/proxy/<provider>/v1/chat/completions`
+ * expose the same agent through whichever SDK the caller already uses.
+ */
+
+/** One entry of the Anthropic `messages` array. */
+export interface AnthropicMessage {
+  role?: string;
+  content?: string | Array<{ type?: string; text?: string }> | null;
+}
+
+export interface AnthropicMessagesBody {
+  model?: string;
+  messages?: AnthropicMessage[];
+  /** Anthropic carries instructions top-level, not as a message role. */
+  system?: string | Array<{ type?: string; text?: string }>;
+  stream?: boolean;
+}
+
+/** Concatenate the text blocks of a content field, ignoring everything else. */
+function textOf(content: AnthropicMessage["content"] | AnthropicMessagesBody["system"]): string {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content.filter((b) => b.type === "text").map((b) => b.text ?? "").join("\n");
+  }
+  return "";
+}
+
+/**
+ * Flatten an Anthropic request into a single prompt plus its system text.
+ *
+ * Non-text blocks (notably `image`) are dropped: the agent turn has no way to
+ * carry an inline image today.
+ */
+export function buildPromptFromAnthropicMessages(
+  body: AnthropicMessagesBody,
+): { prompt: string; systemPrompt?: string } {
+  const parts = (body.messages ?? []).map((m) => {
+    const role = m.role === "assistant" ? "Assistant" : "Human";
+    return `${role}: ${textOf(m.content)}`;
+  });
+  const systemPrompt = textOf(body.system) || undefined;
+  return { prompt: parts.join("\n\n"), systemPrompt };
+}
+
+/** True when any message carries a content block this format cannot forward. */
+export function hasUnsupportedAnthropicBlocks(body: AnthropicMessagesBody): boolean {
+  return (body.messages ?? []).some((m) =>
+    Array.isArray(m.content) && m.content.some((b) => b.type && b.type !== "text"),
+  );
+}
+
+const JSON_HEADERS = {
+  "Content-Type": "application/json",
+  "Access-Control-Allow-Origin": "*",
+} as const;
+
+export const ANTHROPIC_SSE_HEADERS = {
+  "Content-Type": "text/event-stream",
+  "Cache-Control": "no-cache",
+  "Connection": "keep-alive",
+  "Access-Control-Allow-Origin": "*",
+} as const;
+
+/** Anthropic errors are `{type:"error", error:{type, message}}`, not OpenAI's shape. */
+export function anthropicError(status: number, message: string): Response {
+  const type = status === 404 ? "not_found_error" : status === 400 ? "invalid_request_error" : "api_error";
+  return new Response(
+    JSON.stringify({ type: "error", error: { type, message } }),
+    { status, headers: JSON_HEADERS },
+  );
+}
+
+export interface AnthropicUsage {
+  inputTokens: number;
+  outputTokens: number;
+}
+
+function messageId(): string {
+  return `msg_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+}
+
+/** Build a non-streaming Messages response. */
+export function messageResponse(text: string, model: string, usage?: AnthropicUsage): Response {
+  return new Response(JSON.stringify({
+    id: messageId(),
+    type: "message",
+    role: "assistant",
+    model,
+    content: [{ type: "text", text }],
+    stop_reason: "end_turn",
+    stop_sequence: null,
+    usage: {
+      input_tokens: usage?.inputTokens ?? 0,
+      output_tokens: usage?.outputTokens ?? 0,
+    },
+  }), { status: 200, headers: JSON_HEADERS });
+}
+
+/**
+ * Emits the Anthropic streaming event sequence for one response.
+ *
+ * Anthropic SSE is named-event based (`event:` line plus `data:`), and clients
+ * reject a stream that skips the message_start / content_block_* / message_stop
+ * envelope — so the envelope is written even when no text arrives.
+ */
+export class MessageStreamWriter {
+  private readonly encoder = new TextEncoder();
+  private readonly id = messageId();
+  private outputTokens = 0;
+
+  constructor(
+    private readonly controller: ReadableStreamDefaultController<Uint8Array>,
+    private readonly model: string,
+  ) {}
+
+  private emit(event: string, data: Record<string, unknown>): void {
+    this.controller.enqueue(this.encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`));
+  }
+
+  /** message_start + the single text block every response here uses. */
+  open(inputTokens = 0): void {
+    this.emit("message_start", {
+      type: "message_start",
+      message: {
+        id: this.id, type: "message", role: "assistant", model: this.model,
+        content: [], stop_reason: null, stop_sequence: null,
+        usage: { input_tokens: inputTokens, output_tokens: 0 },
+      },
+    });
+    this.emit("content_block_start", {
+      type: "content_block_start", index: 0, content_block: { type: "text", text: "" },
+    });
+  }
+
+  text(content: string): void {
+    if (!content) return;
+    this.emit("content_block_delta", {
+      type: "content_block_delta", index: 0, delta: { type: "text_delta", text: content },
+    });
+  }
+
+  /** Close the block and the message. `usage` reports what the turn actually cost. */
+  close(usage?: AnthropicUsage, stopReason = "end_turn"): void {
+    this.emit("content_block_stop", { type: "content_block_stop", index: 0 });
+    this.emit("message_delta", {
+      type: "message_delta",
+      delta: { stop_reason: stopReason, stop_sequence: null },
+      usage: { output_tokens: usage?.outputTokens ?? this.outputTokens },
+    });
+    this.emit("message_stop", { type: "message_stop" });
+    this.controller.close();
+  }
+}

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

@@ -0,0 +1,148 @@
+/**
+ * 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 }> | 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 };
+}
+
+/** True when any message carries a content block this format cannot forward. */
+export function hasUnsupportedBlocks(body: OpenAiChatBody): boolean {
+  return (body.messages ?? []).some((m) =>
+    Array.isArray(m.content) && m.content.some((b) => b.type && b.type !== "text"),
+  );
+}
+
+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/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}
     >

package/src/web/components/settings/accounts/accounts-pane-header.tsx

@@ -65,23 +65,43 @@ export function AccountsPaneMessage({ message, onDismiss }: {
   );
 }
 
+/**
+ * The row accounts are laid out in: a sideways scroller, one card per account.
+ *
+ * Horizontal everywhere — the chat panel and both settings panes — because the point of the
+ * list is comparing accounts, and stacked vertically you scroll past one to reach the next.
+ * Shared so the three callers cannot end up scrolling in different directions.
+ */
+export function AccountCardRow({ children }: { children: React.ReactNode }) {
+  return (
+    // Negative margin then padding: cards scroll edge to edge while still clearing the
+    // pane's own padding at rest. Snap so a swipe lands on a card rather than between two.
+    <div className="flex gap-2 overflow-x-auto pb-1 -mx-1 px-1 snap-x snap-mandatory scrollbar-thin">
+      {children}
+    </div>
+  );
+}
+
 /**
  * The card one account is drawn in.
  *
  * Shared so a Claude row and a Codex row are the same object on screen even though what goes
  * inside them differs.
  */
-export function AccountCardShell({ active, flash, children, ...rest }: {
+export function AccountCardShell({ active, flash, dense, children, ...rest }: {
   active?: boolean;
   /** Brief highlight when this account's numbers just changed. */
   flash?: boolean;
+  /** Tighter padding, for a card that has to fit a fixed narrow width. */
+  dense?: boolean;
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       {...rest}
       className={[
-        "rounded-md border p-3 space-y-2 transition-colors duration-500",
+        "rounded-md border transition-colors duration-500",
+        dense ? "p-2.5 space-y-1.5" : "p-3 space-y-2",
         flash ? "bg-primary/10 border-primary/40" : "",
         active ? "border-primary/30 bg-primary/5" : "border-border/50",
         rest.className ?? "",

package/src/web/components/settings/accounts/claude-accounts-section.tsx

@@ -10,7 +10,7 @@
 import { useState } from "react";
 import { Download, KeyRound, Loader2, Plus, Settings, Upload, FlaskConical } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
+import { AccountCardRow, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
 import { patchAccount, deleteAccount, type OAuthProfileData } from "../../../lib/api-settings";
 import { AccountProfilePanel } from "./account-profile-panel";
 import { AccountDeleteConfirm } from "./account-delete-confirm";
@@ -117,9 +117,10 @@ export function ClaudeAccountsSection() {
             <p className="text-xs text-muted-foreground">Add one to start using PPM.</p>
           </div>
         ) : (
-          <div className="space-y-2">
+          <AccountCardRow>
             {usages.map((entry) => (
               <AccountCard
+                layout="strip"
                 key={entry.accountId}
                 entry={entry}
                 isActive={entry.accountId === activeAccountId}
@@ -132,7 +133,7 @@ export function ClaudeAccountsSection() {
                 flash={flashIds.has(entry.accountId)}
               />
             ))}
-          </div>
+          </AccountCardRow>
         )}
       </section>
 

package/src/web/components/settings/accounts/codex-accounts-section.tsx

@@ -9,7 +9,7 @@
 import { useState } from "react";
 import { Download, KeyRound, Loader2, Plus, Settings, Trash2, Upload } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { AccountCardShell, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
+import { AccountCardRow, AccountCardShell, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
 import { AccountUsageBar } from "./account-bucket-row";
 import { CodexAddAccountDialog } from "./codex-add-account-dialog";
 import { CodexBackupDialog } from "./codex-backup-dialog";
@@ -70,11 +70,18 @@ export function CodexAccountsSection() {
             </p>
           </div>
         ) : (
-          <div className="space-y-2">
+          <AccountCardRow>
             {c.accounts.map((a) => {
               const u = c.usages[a.id] ?? {};
               return (
-                <AccountCardShell key={a.id} data-testid="account-card" data-account-id={a.id}>
+                <AccountCardShell
+                  key={a.id}
+                  dense
+                  // Matches the Claude card that also carries a control beside the name.
+                  className="min-w-[300px] shrink-0 snap-start"
+                  data-testid="account-card"
+                  data-account-id={a.id}
+                >
                   <div className="flex items-center gap-2">
                     <span className="text-sm font-medium truncate flex-1 min-w-0">{a.label}</span>
                     <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1 shrink-0">
@@ -98,7 +105,7 @@ export function CodexAccountsSection() {
                 </AccountCardShell>
               );
             })}
-          </div>
+          </AccountCardRow>
         )}
       </section>