@hienlh/ppm 0.19.12 → 0.20.0

package/packages/ext-git-graph/src/webview-shell.ts

@@ -0,0 +1,236 @@
+/**
+ * Shared chrome for the panels added in v0.2.0 (blame, file history, compare,
+ * interactive rebase).
+ *
+ * The graph panel keeps its own self-contained HTML — it predates this shell and
+ * its CSS is tuned to the graph canvas. This shell only carries what the four
+ * newer panels have in common: the theme tokens, base typography, a toolbar, and
+ * the `acquireVsCodeApi` bridge. Webviews are sandboxed with `allow-scripts`
+ * only, so everything is inlined.
+ */
+
+/** Theme tokens, kept in sync with the graph panel's palette. */
+export const SHELL_CSS = `
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #ffffff; --surface: #f4f4f5; --text: #09090b; --subtext: #71717a; --subtle: #a1a1aa;
+  --border: #e4e4e7; --border2: #d4d4d8; --blue: #3b82f6; --red: #ef4444; --green: #22c55e;
+  --yellow: #eab308; --purple: #8b5cf6; --orange: #f97316;
+  --surface-hover: #f4f4f5; --selected: #eff6ff;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #09090b; --surface: #18181b; --text: #fafafa; --subtext: #a1a1aa; --subtle: #52525b;
+    --border: #27272a; --border2: #3f3f46; --selected: #1e293b; --surface-hover: #27272a;
+  }
+}
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 12px; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
+#app { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
+code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+
+#toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
+.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
+.toolbar-title { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.toolbar-sub { color: var(--subtext); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+button { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 11px; cursor: pointer; min-width: 24px; min-height: 24px; transition: background 0.15s, border-color 0.15s; }
+button:hover { background: var(--surface-hover); border-color: var(--border2); }
+button:active { background: var(--surface); }
+button:disabled { opacity: 0.5; cursor: default; }
+button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
+button.danger { border-color: var(--red); color: var(--red); }
+select, input[type=text], input[type=search] { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 4px; padding: 3px 6px; font-size: 11px; outline: none; }
+select:focus, input:focus { border-color: var(--blue); }
+
+.scroll { flex: 1; overflow: auto; min-height: 0; }
+.empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--subtext); font-size: 12px; padding: 24px; text-align: center; }
+.spinner { width: 16px; height: 16px; border: 2px solid var(--border2); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.banner { padding: 6px 10px; font-size: 11px; border-bottom: 1px solid var(--border); background: rgba(234,179,8,0.12); color: var(--text); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.banner.error { background: rgba(239,68,68,0.12); }
+.hidden { display: none !important; }
+
+/* Author chip — initials only. Rendering a real avatar would mean sending the
+   committer's email to a third-party service (gravatar), which a self-hosted
+   tool must not do silently. */
+.avatar { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -0.2px; }
+
+/* Touch devices get taller rows — matches the graph panel's coarse-pointer rule */
+@media (pointer: coarse) {
+  button { min-height: 32px; padding: 5px 10px; }
+  .row { min-height: 40px; }
+}
+`;
+
+/** Deterministic author colour + initials, shared by every panel. */
+export const AVATAR_JS = `
+const AVATAR_COLORS = ['#3b82f6','#8b5cf6','#ec4899','#f97316','#22c55e','#14b8a6','#eab308','#ef4444','#6366f1','#0ea5e9'];
+function authorInitials(name) {
+  const parts = String(name || '?').trim().split(/\\s+/).filter(Boolean);
+  if (!parts.length) return '?';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function authorColor(key) {
+  const s = String(key || '');
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
+  return AVATAR_COLORS[Math.abs(h) % AVATAR_COLORS.length];
+}
+function avatarHtml(name, email) {
+  return '<span class="avatar" style="background:' + authorColor(email || name) + '">' + escHtml(authorInitials(name)) + '</span>';
+}
+`;
+
+/** HTML escaping + relative time, needed by every panel's renderer. */
+export const SHELL_JS = `
+const vscode = acquireVsCodeApi();
+function escHtml(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+function relTime(ts) {
+  const diff = Math.floor(Date.now() / 1000) - Number(ts);
+  if (!Number.isFinite(diff)) return '';
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+  if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+  if (diff < 2592000) return Math.floor(diff / 86400) + 'd ago';
+  if (diff < 31536000) return Math.floor(diff / 2592000) + 'mo ago';
+  return Math.floor(diff / 31536000) + 'y ago';
+}
+function showError(message) {
+  const el = document.getElementById('banner');
+  if (!el) return;
+  el.textContent = message;
+  el.classList.remove('hidden');
+  el.classList.add('error');
+}
+function clearError() {
+  const el = document.getElementById('banner');
+  if (el) el.classList.add('hidden');
+}
+${AVATAR_JS}
+`;
+
+/**
+ * Tracked-file picker, shared by the blame and file-history panels.
+ *
+ * The extension holds the full `git ls-files` list and filters it per keystroke,
+ * so the webview never receives a large repo's entire path list. The host panel
+ * supplies `onFileChosen` and forwards `loadFiles` to `applyFileList`.
+ */
+export const FILE_PICKER_CSS = `
+.picker { position: absolute; top: 34px; left: 8px; right: 8px; max-width: 620px; z-index: 40; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); display: flex; flex-direction: column; max-height: 60vh; }
+.picker input { margin: 8px; }
+.picker-list { overflow: auto; min-height: 0; }
+.picker-item { padding: 6px 10px; cursor: pointer; font-family: ui-monospace, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.picker-item:hover, .picker-item.active { background: var(--selected); }
+.picker-foot { padding: 6px 10px; border-top: 1px solid var(--border); color: var(--subtext); font-size: 10px; }
+@media (pointer: coarse) { .picker-item { padding: 10px; } }
+`;
+
+export const FILE_PICKER_HTML = `
+      <div id="picker" class="picker hidden">
+        <input id="picker-input" type="search" placeholder="Filter tracked files…" autocomplete="off" />
+        <div id="picker-list" class="picker-list"></div>
+        <div class="picker-foot" id="picker-foot"></div>
+      </div>`;
+
+export const FILE_PICKER_JS = `
+const picker = {
+  root: document.getElementById('picker'),
+  input: document.getElementById('picker-input'),
+  list: document.getElementById('picker-list'),
+  foot: document.getElementById('picker-foot'),
+  files: [],
+  idx: 0,
+  timer: undefined,
+};
+
+function openFilePicker() {
+  picker.root.classList.remove('hidden');
+  picker.input.value = '';
+  picker.input.focus();
+  vscode.postMessage({ command: 'requestFiles', query: '' });
+}
+function closeFilePicker() { picker.root.classList.add('hidden'); }
+function isFilePickerOpen() { return !picker.root.classList.contains('hidden'); }
+
+function applyFileList(data) {
+  picker.files = data.files || [];
+  picker.idx = 0;
+  renderFilePicker();
+  picker.foot.textContent = picker.files.length + ' of ' + data.total + ' tracked files';
+}
+
+function renderFilePicker() {
+  picker.list.innerHTML = picker.files.map((f, i) =>
+    '<div class="picker-item' + (i === picker.idx ? ' active' : '') + '" data-file="' + escHtml(f) + '">' + escHtml(f) + '</div>'
+  ).join('') || '<div class="picker-foot">No tracked file matches.</div>';
+}
+
+picker.input.addEventListener('input', () => {
+  clearTimeout(picker.timer);
+  picker.timer = setTimeout(() => {
+    vscode.postMessage({ command: 'requestFiles', query: picker.input.value });
+  }, 120);
+});
+
+picker.input.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') { closeFilePicker(); return; }
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    picker.idx = Math.max(0, Math.min(picker.files.length - 1, picker.idx + (e.key === 'ArrowDown' ? 1 : -1)));
+    renderFilePicker();
+    const active = picker.list.querySelector('.picker-item.active');
+    if (active) active.scrollIntoView({ block: 'nearest' });
+    return;
+  }
+  if (e.key === 'Enter') {
+    const file = picker.files[picker.idx];
+    if (file) { closeFilePicker(); onFileChosen(file); }
+  }
+});
+
+picker.list.addEventListener('click', (e) => {
+  const item = e.target.closest('.picker-item');
+  if (item) { closeFilePicker(); onFileChosen(item.dataset.file); }
+});
+`;
+
+export interface ShellOptions {
+  /** Toolbar markup (left/right groups). */
+  toolbar: string;
+  /** Panel body markup, placed inside `#app` below the toolbar. */
+  body: string;
+  /** Panel-specific CSS appended after the shell CSS. */
+  css?: string;
+  /** Panel-specific JS appended after the shell JS. */
+  script: string;
+}
+
+export function shellHtml(options: ShellOptions): string {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+${SHELL_CSS}
+${options.css ?? ""}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="toolbar">${options.toolbar}</div>
+  <div id="banner" class="banner hidden"></div>
+${options.body}
+</div>
+<script>
+${SHELL_JS}
+${options.script}
+</script>
+</body>
+</html>`;
+}

package/src/providers/claude-agent-sdk.ts

@@ -812,6 +812,13 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       if (oldCount != null) { this.messageCount.set(newId, oldCount); this.messageCount.delete(sessionId); }
       const oldStream = this.streamingSessions.get(sessionId);
       if (oldStream) { this.streamingSessions.set(newId, oldStream); this.streamingSessions.delete(sessionId); }
+      // The account binding lives in the database under the old id, and the lookup below
+      // runs after this block — so without moving it, a session that migrates silently
+      // loses whichever account was chosen for it and gets re-routed to another one. That
+      // costs a full prompt-cache write, and when the choice was the user's it also
+      // quietly overrides them.
+      const boundAccount = getSessionAccount(sessionId);
+      if (boundAccount) accountSelector.bindSession(newId, boundAccount);
       yield { type: "session_migrated" as const, oldSessionId: sessionId, newSessionId: newId };
       sessionId = newId;
     }

package/src/providers/codex-app-server/codex-provider.ts

@@ -106,6 +106,26 @@ interface LiveSession {
   compactRequested?: boolean;
   /** Token counts from the most recent usage notification, attached to `done`. */
   lastUsage?: import("../../shared/turn-usage.ts").TurnUsage;
+  /** A turn is running on the thread. Codex accepts exactly one at a time: a
+   *  second `turn/start` resolves with the ALREADY-RUNNING turn (same id,
+   *  status `inProgress`) and silently discards the new input — no error, so
+   *  nothing downstream can notice. Follow-ups therefore wait in `pendingTurns`
+   *  and are sent when the running turn reports `turn/completed`. */
+  turnInFlight?: boolean;
+  /** Id of the running turn — `turn/interrupt` needs it, `threadId` alone is rejected. */
+  activeTurnId?: string | null;
+  /** Interrupt asked for before `turn/started` named the turn; fired on arrival. */
+  interruptRequested?: boolean;
+  /** Follow-ups waiting for the current turn, in the order they will be sent. */
+  pendingTurns: QueuedTurn[];
+}
+
+/** A follow-up held back because a turn was already running. */
+interface QueuedTurn {
+  message: string;
+  opts?: SendMessageOpts;
+  /** `later` sinks to the end of the queue; `now`/`next` go in front of it. */
+  priority: "now" | "next" | "later";
 }
 
 interface EventChannel {
@@ -310,6 +330,15 @@ export class CodexAppServerProvider implements AIProvider {
 
   private startTurn(live: LiveSession, message: string, opts?: SendMessageOpts): void {
     if (!live.threadId) return;
+    // One turn at a time — anything sent now would be dropped without a trace.
+    // `now` additionally cuts the running turn short so this one answers next.
+    if (live.turnInFlight) {
+      const priority = opts?.priority ?? "next";
+      this.enqueueTurn(live, { message, opts, priority });
+      if (priority === "now") this.interruptActiveTurn(live);
+      return;
+    }
+    live.turnInFlight = true;
     // `/compact` → trigger codex's real compaction (thread/compact/start), not a text turn.
     // Completion is surfaced on the `thread/compacted` notification (handleNotification).
     if (message.trim() === "/compact") {
@@ -318,6 +347,7 @@ export class CodexAppServerProvider implements AIProvider {
         live.compactRequested = false;
         if (!live.client.isClosed) live.channel.push({ type: "error", message: redactTruncate((err as Error)?.message ?? String(err), 256) });
         live.channel.push({ type: "done", sessionId: live.threadId ?? "", resultSubtype: "error_during_execution" });
+        this.endTurn(live);
       });
       return;
     }
@@ -335,11 +365,55 @@ export class CodexAppServerProvider implements AIProvider {
       threadId: live.threadId,
       input,
       ...(turnModel ? { model: turnModel } : {}),
+    }).then((res) => {
+      // Backup for the `turn/started` notification, which is what normally names
+      // the turn — an interrupt arriving in between has nothing to address.
+      const id = (res as { turn?: { id?: string } })?.turn?.id;
+      if (id && !live.activeTurnId) this.setActiveTurn(live, id);
     }).catch((err) => {
       if (!live.client.isClosed) live.channel.push({ type: "error", message: redactTruncate((err as Error)?.message ?? String(err), 256) });
+      // No turn is running, so nothing will report `turn/completed` — release the
+      // queue here or every later follow-up waits on a turn that never existed.
+      this.endTurn(live);
     });
   }
 
+  /** Insert a follow-up: `later` sinks behind everything, `now`/`next` queue ahead of it. */
+  private enqueueTurn(live: LiveSession, item: QueuedTurn): void {
+    if (item.priority === "later") {
+      live.pendingTurns.push(item);
+      return;
+    }
+    const firstLater = live.pendingTurns.findIndex((q) => q.priority === "later");
+    if (firstLater === -1) live.pendingTurns.push(item);
+    else live.pendingTurns.splice(firstLater, 0, item);
+  }
+
+  /** Cut the running turn short. Falls back to waiting it out when the interrupt
+   *  cannot be sent — the follow-up stays queued either way, never dropped. */
+  private interruptActiveTurn(live: LiveSession): void {
+    if (!live.activeTurnId) { live.interruptRequested = true; return; }
+    live.client.request("turn/interrupt", { threadId: live.threadId, turnId: live.activeTurnId })
+      .catch(() => { /* turn already ending — the queue drains on turn/completed */ });
+  }
+
+  private setActiveTurn(live: LiveSession, turnId: string): void {
+    live.activeTurnId = turnId;
+    if (live.interruptRequested) {
+      live.interruptRequested = false;
+      this.interruptActiveTurn(live);
+    }
+  }
+
+  /** Running turn is over: send the next follow-up, if one is waiting. */
+  private endTurn(live: LiveSession): void {
+    live.turnInFlight = false;
+    live.activeTurnId = null;
+    live.interruptRequested = false;
+    const next = live.pendingTurns.shift();
+    if (next) this.startTurn(live, next.message, next.opts);
+  }
+
   private async connect(sessionId: string, opts?: SendMessageOpts): Promise<LiveSession> {
     const meta = this.sessions.get(sessionId);
     const cwd = meta?.projectPath || getSessionProjectPath(sessionId) || process.cwd();
@@ -352,6 +426,7 @@ export class CodexAppServerProvider implements AIProvider {
       client, threadId: null, cwd, channel, permission, model,
       pendingApprovals: new Map(), answeredCodexIds: new Set(),
       history: [], transcript: [], currentAssistant: "", currentEvents: [],
+      pendingTurns: [],
     };
     this.live.set(sessionId, live);
 
@@ -434,6 +509,14 @@ export class CodexAppServerProvider implements AIProvider {
       }
       live.currentAssistant = "";
       live.currentEvents = [];
+      this.endTurn(live);
+    }
+    if (notif.method === "turn/started") {
+      // Codex is the authority on whether the thread is busy — take the flag from
+      // it rather than only from what this side believes it started.
+      live.turnInFlight = true;
+      const id = (notif.params as { turn?: { id?: string } })?.turn?.id;
+      if (id) this.setActiveTurn(live, id);
     }
     // Manual /compact finished — codex signals via the contextCompaction item
     // (the thread/compacted notification is deprecated). Surface the compact-summary
@@ -724,7 +807,12 @@ export class CodexAppServerProvider implements AIProvider {
 
     // Managed accounts are assigned on first send; don't show an unrelated
     // ambient login while that assignment is pending or the binding is missing.
-    if (accountId || listCodexAccounts().length > 0) return {};
+    //
+    // Disabled ones do not count towards "managed accounts exist": with every one switched
+    // off the selector returns null and chats really do run on the ambient ~/.codex login,
+    // so that is the login whose usage belongs here.
+    const selectable = listCodexAccounts().filter((a) => a.status !== "disabled");
+    if (accountId || selectable.length > 0) return {};
     return getOrFetchUsage(this.id, AMBIENT_ACCOUNT_KEY);
   }
 }

package/src/server/index.ts

@@ -952,7 +952,7 @@ if (process.argv.includes("__serve__")) {
   });
 
   // Start background account token refresh in daemon child
-  import("../services/account.service.ts").then(({ accountService }) => accountService.startAutoRefresh()).catch(() => {});
+  import("../services/account.service.ts").then(({ accountService }) => accountService.startAccountMaintenance()).catch(() => {});
 
   // Start background usage limit polling (every 5 min)
   import("../services/claude-usage.service.ts").then(({ startUsagePolling }) => startUsagePolling()).catch(() => {});

package/src/server/routes/accounts.ts

@@ -32,6 +32,9 @@ accountsRoutes.get("/", (c) => {
   const accounts = accountService.list().map((acc) => ({
     ...acc,
     hasRefreshToken: accountService.hasRefreshToken(acc.id),
+    // When this account's sign-in stops being valid, so the card can warn instead of
+    // waiting for the turn that fails. Null where PPM never recorded the grant.
+    grantExpiresAt: accountService.grantExpiresAt(acc),
   }));
   return c.json(ok(accounts));
 });
@@ -44,6 +47,25 @@ accountsRoutes.get("/active", (c) => {
   return c.json(ok(account));
 });
 
+/**
+ * POST /api/accounts/pick — claim the account that will serve a new chat tab.
+ *
+ * POST, not GET, because this consumes a pick: round-robin advances its cursor, so asking
+ * twice is meant to hand back two different accounts. That is the point — a tab asks once
+ * when it opens, keeps the answer for as long as it lives, and several tabs opened in a row
+ * spread across the pool instead of piling onto whichever account happens to be next.
+ *
+ * Unlike `/active`, which only previews, the answer here is the one the first message will
+ * actually run on: the client sends the id back when it creates the session, and it becomes
+ * that session's binding. Null means nothing is usable right now, and the caller must say so
+ * rather than showing a stale name.
+ */
+accountsRoutes.post("/pick", (c) => {
+  const picked = accountSelector.next();
+  if (!picked) return c.json(ok(null));
+  return c.json(ok({ id: picked.id, label: picked.label ?? picked.email ?? null }));
+});
+
 /** GET /api/accounts/settings */
 accountsRoutes.get("/settings", (c) => {
   return c.json(ok({
@@ -389,7 +411,9 @@ accountsRoutes.patch("/:id", async (c) => {
       // Only for an account that has a refresh token: a temporary one has nothing to prove,
       // and setEnabled()'s own guard says something more useful than a refresh error would.
       if (wasParked && accountService.hasRefreshToken(id)) {
-        const proof = await accountService.ensureFreshTokenChecked(id);
+        // Enabling is a deliberate gesture, so it re-tests a grant PPM has already
+        // written off — the check exists to catch a rejection, not to trust a stored one.
+        const proof = await accountService.ensureFreshTokenChecked(id, { retryRejected: true });
         if (!proof.account) {
           // Worth splitting: invalid_grant means the token is gone and only a fresh sign-in
           // brings it back, while a network drop or a 429 is worth trying again in a minute.

package/src/server/routes/chat.ts

@@ -13,6 +13,7 @@ import { ensureSdkCommands, invalidateSdkCommands } from "../../services/slash-d
 import { upsertSlashRecent, getSlashRecents, setSessionClearedFrom, listTurnUsage, getSessionAccount, getSessionProvider, resolveMigratedSession } from "../../services/db.service.ts";
 import type { TurnUsage } from "../../shared/turn-usage.ts";
 import { getCachedUsage, refreshUsageNow } from "../../services/claude-usage.service.ts";
+import { bindPickedAccount, bindRefusalReason } from "../../services/picked-account-binding.ts";
 import { getSessionLog } from "../../services/session-log.service.ts";
 import { parseJsonlTranscript, validateJsonlPath } from "../../services/jsonl-transcript-parser.ts";
 import { aggregateTasks } from "../../services/task-status-aggregator.ts";
@@ -361,13 +362,19 @@ chatRoutes.post("/sessions", async (c) => {
   try {
     const projectName = c.get("projectName");
     const projectPath = c.get("projectPath");
-    const body = await c.req.json<{ providerId?: string; title?: string; clearedFrom?: string }>();
+    const body = await c.req.json<{ providerId?: string; title?: string; clearedFrom?: string; accountId?: string }>();
     const session = await chatService.createSession(body.providerId, {
       projectName,
       projectPath,
       title: body.title,
     });
     if (body.clearedFrom) setSessionClearedFrom(session.id, body.clearedFrom);
+    // The tab claimed an account when it opened and showed its name; honour that here so
+    // the first message runs on the account the user was actually looking at. Advisory,
+    // never authoritative: bindPickedAccount re-checks the id against the server's own
+    // pool and simply declines an id it does not recognise, because this arrives from a
+    // client and selecting a token by client-supplied id is not something to allow.
+    if (body.accountId) bindPickedAccount(session.id, session.providerId, body.accountId);
     // Auto-assign default tag if project has one
     const defaultTagId = getProjectDefaultTagId(projectPath);
     if (defaultTagId) setSessionTag(session.id, defaultTagId, projectPath);
@@ -473,6 +480,27 @@ chatRoutes.patch("/sessions/:id", async (c) => {
   }
 });
 
+/**
+ * PUT /chat/sessions/:id/account — move a live session onto an account the user picked.
+ *
+ * Unlike the same choice made at session creation, this one answers: the user is looking at
+ * a panel and pressed something, so a silently ignored pick would read as a broken button.
+ *
+ * Worth knowing before calling: the prompt cache is scoped per account, so moving a session
+ * mid-conversation re-sends its whole transcript as a cache write rather than a read. On a
+ * long session that is a real cost, not a formality.
+ */
+chatRoutes.put("/sessions/:id/account", async (c) => {
+  const sessionId = c.req.param("id");
+  const body = await c.req.json<{ accountId?: string }>().catch(() => ({} as { accountId?: string }));
+  if (!body.accountId) return c.json(err("accountId is required"), 400);
+  const providerId = getSessionProvider(sessionId) ?? "claude";
+  if (!bindPickedAccount(sessionId, providerId, body.accountId)) {
+    return c.json(err(bindRefusalReason(providerId, body.accountId)), 400);
+  }
+  return c.json(ok({ accountId: body.accountId }));
+});
+
 /** PUT /chat/sessions/:id/pin — pin a session */
 chatRoutes.put("/sessions/:id/pin", (c) => {
   try {

package/src/server/routes/codex-accounts.ts

@@ -1,6 +1,6 @@
 import { Hono } from "hono";
 import { ok, err } from "../../types/api.ts";
-import { listCodexAccounts, removeCodexAccount, getAllCodexUsages, getCodexStrategy, setCodexStrategy, type CodexStrategy } from "../../services/codex-account.service.ts";
+import { listCodexAccounts, removeCodexAccount, getAllCodexUsages, getCodexStrategy, setCodexStrategy, selectCodexAccount, setCodexAccountStatus, type CodexStrategy } from "../../services/codex-account.service.ts";
 import { addApiKeyAccount, startDeviceLogin, getDeviceLoginStatus, cancelDeviceLogin } from "../../services/codex-account-login.ts";
 import { exportCodexEncrypted, importCodexEncrypted } from "../../services/codex-account-portability.ts";
 
@@ -12,6 +12,46 @@ codexAccountsRoutes.get("/", (c) => c.json(ok({ accounts: listCodexAccounts(), s
 /** Per-account quota map { [accountId]: UsageInfo }. */
 codexAccountsRoutes.get("/usage", async (c) => c.json(ok(await getAllCodexUsages())));
 
+/**
+ * POST /api/codex-accounts/pick — claim the account that will serve a new chat tab.
+ *
+ * Mirrors the Claude side: a consuming pick, so round-robin advances and consecutive tabs
+ * land on different accounts. Usage is read once here and handed to the selector, which is
+ * what lets it skip accounts with no five-hour room left — the synchronous `peekCodexAccount`
+ * has no way to reach that data, which is why the toolbar could never name an account before
+ * the first turn under round-robin.
+ *
+ * Null when no account is managed: chats then run on the ambient ~/.codex login, which has
+ * no id to bind and nothing to choose between.
+ */
+codexAccountsRoutes.post("/pick", async (c) => {
+  if (listCodexAccounts().length === 0) return c.json(ok(null));
+  const usages = await getAllCodexUsages();
+  // A failed usage fetch yields {} → +Infinity, which the selector reads as "unknown", not
+  // as "capped": an account we could not measure stays a candidate.
+  const picked = selectCodexAccount({ usageOf: (id) => usages[id]?.fiveHour ?? Number.POSITIVE_INFINITY });
+  if (!picked) return c.json(ok(null));
+  return c.json(ok({ id: picked.id, label: picked.label }));
+});
+
+/**
+ * PATCH /api/codex-accounts/:id — switch an account on or off.
+ *
+ * Mirrors the shape of the Claude route so the two panels can share one control, but not its
+ * pre-flight token check: that exists for Anthropic OAuth refresh tokens, which have nothing
+ * to do with how a Codex account authenticates. Nothing to prove here means this answers
+ * immediately instead of taking the better part of a minute.
+ */
+codexAccountsRoutes.patch("/:id", async (c) => {
+  const body = await c.req.json<{ status?: string }>().catch(() => ({} as { status?: string }));
+  if (body.status !== "active" && body.status !== "disabled") {
+    return c.json(err("status must be active or disabled"), 400);
+  }
+  const updated = setCodexAccountStatus(c.req.param("id"), body.status);
+  if (!updated) return c.json(err("Account not found"), 404);
+  return c.json(ok(updated));
+});
+
 /** Set the selection strategy. */
 codexAccountsRoutes.put("/strategy", async (c) => {
   const body = await c.req.json<{ strategy?: CodexStrategy }>().catch(() => ({} as { strategy?: CodexStrategy }));