just-usage 0.0.1 → 0.0.4

package/dist/cli.js

@@ -1,6 +1,4 @@
 #!/usr/bin/env node
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/cli.ts
 import { parseArgs } from "node:util";
@@ -17,7 +15,7 @@ import { mkdirSync } from "node:fs";
 // package.json
 var package_default = {
   name: "just-usage",
-  version: "0.0.1",
+  version: "0.0.4",
   description: "One local page for your coding-CLI subscription quotas: Claude, Codex, Cursor, OpenCode Go.",
   type: "module",
   license: "MIT",
@@ -44,13 +42,14 @@ var package_default = {
   files: [
     "dist",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   engines: {
     node: ">=20"
   },
   scripts: {
-    dev: "bun run src/cli.ts",
+    dev: "bun --watch src/cli.ts",
     build: "bun run scripts/build.ts",
     test: "bun test",
     typecheck: "tsc --noEmit",
@@ -135,20 +134,41 @@ function clampPercent(v) {
     v = Number(v);
   if (typeof v !== "number" || !Number.isFinite(v))
     return null;
-  return Math.min(100, Math.max(0, Math.round(v * 10) / 10));
+  if (v <= 0)
+    return 0;
+  if (v >= 100)
+    return 100;
+  const tenth = Math.round(v * 10) / 10;
+  if (tenth === 0)
+    return 0.1;
+  if (tenth === 100)
+    return 99.9;
+  return tenth;
+}
+function formatPercent(used) {
+  if (used === null)
+    return "—";
+  const n = clampPercent(used) ?? 0;
+  const tenth = Math.round(n * 10) / 10;
+  return Number.isInteger(tenth) ? `${tenth}%` : `${tenth.toFixed(1)}%`;
+}
+function formatPlan(plan) {
+  if (!plan || !plan.trim())
+    return null;
+  return plan.replace(/\S+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1));
 }
 function windowLabel(minutes) {
   if (minutes === null)
-    return "Window";
+    return "Window Usage";
   if (minutes === 300)
-    return "5h";
+    return "5h Usage";
   if (minutes === 10080)
-    return "Weekly";
+    return "Weekly Usage";
   if (minutes % 1440 === 0)
-    return `${minutes / 1440}d`;
+    return `${minutes / 1440}d Usage`;
   if (minutes % 60 === 0)
-    return `${minutes / 60}h`;
-  return `${minutes}m`;
+    return `${minutes / 60}h Usage`;
+  return `${minutes}m Usage`;
 }
 function formatDuration(ms) {
   if (ms <= 0)
@@ -183,9 +203,13 @@ function severity(usedPercent) {
     return "warn";
   return "ok";
 }
+function formatHostname(name) {
+  return name.replace(/\.local$/, "").replace(/[-_]+/g, " ").replace(/\s+/g, " ").trim();
+}
 function slugify(s) {
   return s.toLowerCase().replace(/@.*$/, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40) || "account";
 }
+var GENERIC_LABELS = new Set(["", "default", "token", "go", "pending", "profile", "account", "codex"]);
 
 // src/adapters/common.ts
 function snapshot(account, status, patch = {}) {
@@ -196,7 +220,7 @@ function snapshot(account, status, patch = {}) {
       provider: account.provider,
       label: account.label,
       email: email ?? account.email ?? null,
-      plan: plan ?? null,
+      plan: formatPlan(plan) ?? null,
       kind: account.kind
     },
     status,
@@ -398,34 +422,56 @@ async function fetchCodex(account) {
     client?.close();
   }
 }
-async function codexLogin(codexHome, onAuthUrl, timeoutMs = 5 * 60000) {
+async function startCodexLogin(codexHome, timeoutMs = 5 * 60000) {
   const client = await AppServerClient.start(codexHome);
-  try {
-    const completed = new Promise((resolve, reject) => {
-      const timer = setTimeout(() => reject(new Error("login timed out")), timeoutMs);
-      client.onNotification((n) => {
-        if (n.method !== "account/login/completed")
-          return;
-        clearTimeout(timer);
-        const p = isObject(n.params) ? n.params : {};
-        if (p.success)
-          resolve();
-        else
-          reject(new Error(typeof p.error === "string" ? p.error : "login failed"));
-      });
+  let closed = false;
+  const close = () => {
+    if (closed)
+      return;
+    closed = true;
+    client.close();
+  };
+  const completed = new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error("login timed out")), timeoutMs);
+    client.onNotification(async (n) => {
+      if (n.method !== "account/login/completed")
+        return;
+      clearTimeout(timer);
+      const p = isObject(n.params) ? n.params : {};
+      if (!p.success) {
+        reject(new Error(typeof p.error === "string" ? p.error : "login failed"));
+        return;
+      }
+      try {
+        const acct = await client.request("account/read", {});
+        const info = isObject(acct.account) ? acct.account : {};
+        resolve({
+          email: typeof info.email === "string" ? info.email : null,
+          plan: typeof info.planType === "string" ? info.planType : null
+        });
+      } catch (e) {
+        reject(e instanceof Error ? e : new Error(String(e)));
+      }
     });
+  }).finally(close);
+  try {
     const start = await client.request("account/login/start", { type: "chatgpt" });
-    if (typeof start.authUrl === "string")
-      onAuthUrl(start.authUrl);
-    await completed;
-    const acct = await client.request("account/read", {});
-    const info = isObject(acct.account) ? acct.account : {};
-    return {
-      email: typeof info.email === "string" ? info.email : null,
-      plan: typeof info.planType === "string" ? info.planType : null
-    };
-  } finally {
-    client.close();
+    if (typeof start.authUrl !== "string" || !start.authUrl)
+      throw new Error("Codex did not return an auth URL.");
+    return { authUrl: start.authUrl, completed, close };
+  } catch (e) {
+    close();
+    throw e;
+  }
+}
+async function codexLogin(codexHome, onAuthUrl, timeoutMs = 5 * 60000) {
+  const handle = await startCodexLogin(codexHome, timeoutMs);
+  onAuthUrl(handle.authUrl);
+  try {
+    return await handle.completed;
+  } catch (e) {
+    handle.close();
+    throw e;
   }
 }
 
@@ -517,9 +563,6 @@ function openInBrowser(url) {
     child.unref();
   } catch {}
 }
-function stripAnsi(s) {
-  return s.replace(/\u001b\[[0-9;]*[A-Za-z]/g, "");
-}
 function withTimeout(p, ms, label) {
   return new Promise((resolve, reject) => {
     const t = setTimeout(() => reject(new Error(`${label} timed out after ${Math.round(ms / 1000)}s`)), ms);
@@ -603,10 +646,10 @@ function secretStore() {
 var USAGE_URL = "https://api.anthropic.com/api/oauth/usage";
 var PROFILE_URL = "https://api.anthropic.com/api/oauth/profile";
 var FALLBACK_CLI_VERSION = "2.1.259";
-function keychainService(configDir2) {
-  if (!configDir2)
+function keychainService(configDir) {
+  if (!configDir)
     return "Claude Code-credentials";
-  const hash = createHash("sha256").update(configDir2).digest("hex").slice(0, 8);
+  const hash = createHash("sha256").update(configDir).digest("hex").slice(0, 8);
   return `Claude Code-credentials-${hash}`;
 }
 function parseCreds(text) {
@@ -624,24 +667,24 @@ function parseCreds(text) {
     return null;
   }
 }
-async function readClaudeCredentials(configDir2) {
+async function readClaudeCredentials(configDir) {
   if (process.platform === "darwin") {
-    const res = await run("security", ["find-generic-password", "-s", keychainService(configDir2), "-w"], { timeoutMs: 20000 });
+    const res = await run("security", ["find-generic-password", "-s", keychainService(configDir), "-w"], { timeoutMs: 20000 });
     if (res.code === 0) {
       const creds = parseCreds(res.stdout.trim());
       if (creds)
         return creds;
     }
   }
-  const file = join2(configDir2 ?? join2(homedir2(), ".claude"), ".credentials.json");
+  const file = join2(configDir ?? join2(homedir2(), ".claude"), ".credentials.json");
   if (existsSync2(file))
     return parseCreds(readFileSync2(file, "utf8"));
   return null;
 }
-async function claudeAuthStatus(configDir2) {
+async function claudeAuthStatus(configDir) {
   const env = {};
-  if (configDir2)
-    env.CLAUDE_CONFIG_DIR = configDir2;
+  if (configDir)
+    env.CLAUDE_CONFIG_DIR = configDir;
   const res = await run("claude", ["auth", "status", "--json"], { env, timeoutMs: 15000 });
   if (res.code === null)
     return null;
@@ -681,17 +724,18 @@ function normalizeClaudeUsage(body) {
     return [];
   const out = [];
   const push = (w) => w && out.push(w);
-  push(bucket(body.five_hour, "five_hour", "5h", 300));
-  push(bucket(body.seven_day, "seven_day", "Weekly", 10080));
-  push(bucket(body.seven_day_opus, "seven_day_opus", "Weekly · Opus", 10080));
-  push(bucket(body.seven_day_sonnet, "seven_day_sonnet", "Weekly · Sonnet", 10080));
-  push(bucket(body.seven_day_oauth_apps, "seven_day_oauth_apps", "Weekly · OAuth apps", 10080));
+  push(bucket(body.five_hour, "five_hour", "5h Usage", 300));
+  push(bucket(body.seven_day, "seven_day", "Weekly Usage", 10080));
+  push(bucket(body.seven_day_opus, "seven_day_opus", "Weekly · Opus Usage", 10080));
+  push(bucket(body.seven_day_sonnet, "seven_day_sonnet", "Weekly · Sonnet Usage", 10080));
+  push(bucket(body.seven_day_oauth_apps, "seven_day_oauth_apps", "Weekly · OAuth apps Usage", 10080));
   if (out.length === 0 && Array.isArray(body.limits)) {
     for (const [i, item] of body.limits.entries()) {
       if (!isObject(item))
         continue;
       const name = [item.name, item.type, item.id].find((x) => typeof x === "string" && x.length > 0) ?? `limit ${i + 1}`;
-      push(bucket(item, `limits:${name}`, name.replace(/_/g, " "), null));
+      const label = name.replace(/_/g, " ");
+      push(bucket(item, `limits:${name}`, /usage$/i.test(label) ? label : `${label} Usage`, null));
     }
   }
   const extra = body.extra_usage;
@@ -720,14 +764,10 @@ async function resolveToken(account) {
       return { fail: snapshot(account, "error", { message: "Stored token missing. Run `just-usage remove` and add it again." }) };
     return { token, plan: null };
   }
-  const status = await claudeAuthStatus(account.path);
-  if (status && !status.loggedIn) {
-    const hint = account.kind === "default" ? "Run `claude` and `/login`." : `Run \`just-usage login ${account.id}\`.`;
-    return { fail: snapshot(account, "signed_out", { message: `Not signed in. ${hint}` }) };
-  }
   const creds = await readClaudeCredentials(account.path);
   if (!creds) {
-    return { fail: snapshot(account, "error", { message: "Could not read Claude Code's credential (Keychain access denied or file missing)." }) };
+    const hint = account.kind === "default" ? "Run `claude` and `/login`." : `Run \`just-usage login ${account.id}\`.`;
+    return { fail: snapshot(account, "signed_out", { message: `Not signed in. ${hint}` }) };
   }
   if (creds.expiresAt && creds.expiresAt < Date.now()) {
     const hint = account.kind === "default" ? "Open `claude` once to refresh it." : `Run \`CLAUDE_CONFIG_DIR=${account.path} claude\` once to refresh it.`;
@@ -785,6 +825,9 @@ async function verifyClaudeToken(token) {
   return { ok: true, email, message: "ok" };
 }
 
+// src/accounts.ts
+import { renameSync, rmSync as rmSync2 } from "node:fs";
+
 // src/adapters/opencode.ts
 import { existsSync as existsSync3, readFileSync as readFileSync3 } from "node:fs";
 import { homedir as homedir3 } from "node:os";
@@ -812,9 +855,9 @@ function readOpenCodeGoKey() {
   }
 }
 var WINDOWS = [
-  { key: "rolling", id: "rolling", label: "5h", minutes: 300, kind: "rolling" },
-  { key: "weekly", id: "weekly", label: "Weekly", minutes: 10080, kind: "rolling" },
-  { key: "monthly", id: "monthly", label: "Monthly", minutes: null, kind: "cycle" }
+  { key: "rolling", id: "rolling", label: "5h Usage", minutes: 300, kind: "rolling" },
+  { key: "weekly", id: "weekly", label: "Weekly Usage", minutes: 10080, kind: "rolling" },
+  { key: "monthly", id: "monthly", label: "Monthly Usage", minutes: null, kind: "cycle" }
 ];
 function normalizeOpenCodeUsage(body) {
   if (!isObject(body))
@@ -848,7 +891,7 @@ async function fetchOpenCode(account) {
     if (status === 401)
       return snapshot(account, "error", { message: "Key rejected (401)." });
     if (status === 403)
-      return snapshot(account, "unsupported", { message: "Valid key, but no active OpenCode Go subscription (403)." });
+      return snapshot(account, "unsupported", { message: "No active OpenCode Go subscription." });
     if (status === 429)
       return snapshot(account, "error", { message: "Rate limited (429). Try again shortly." });
     if (status !== 200)
@@ -861,28 +904,348 @@ async function fetchOpenCode(account) {
   }
 }
 
+// src/registry.ts
+import { existsSync as existsSync4, readFileSync as readFileSync4, writeFileSync as writeFileSync2, rmSync } from "node:fs";
+import { dirname as dirname2, join as join4 } from "node:path";
+function readRegistry() {
+  const file = paths.registry();
+  if (!existsSync4(file))
+    return { version: 1, accounts: [] };
+  try {
+    const parsed = JSON.parse(readFileSync4(file, "utf8"));
+    return { version: 1, accounts: Array.isArray(parsed.accounts) ? parsed.accounts : [] };
+  } catch {
+    return { version: 1, accounts: [] };
+  }
+}
+function writeRegistry(reg) {
+  const file = paths.registry();
+  ensureDir(dirname2(file));
+  writeFileSync2(file, JSON.stringify(reg, null, 2) + `
+`, { mode: 384 });
+}
+function listAccounts(provider) {
+  const all = readRegistry().accounts;
+  return provider ? all.filter((a) => a.provider === provider) : all;
+}
+function getAccount(id) {
+  return readRegistry().accounts.find((a) => a.id === id) ?? null;
+}
+function newAccountId(provider, hint) {
+  const existing = new Set(readRegistry().accounts.map((a) => a.id));
+  const base = `${provider}:${slugify(hint)}`;
+  if (base.endsWith(":default"))
+    return newAccountId(provider, `${hint}-2`);
+  if (!existing.has(base))
+    return base;
+  for (let i = 2;; i++) {
+    const candidate = `${base}-${i}`;
+    if (!existing.has(candidate))
+      return candidate;
+  }
+}
+function profileDirFor(provider, id) {
+  return join4(paths.profiles(provider), id.split(":")[1] ?? "account");
+}
+function saveAccount(record) {
+  const reg = readRegistry();
+  reg.accounts = reg.accounts.filter((a) => a.id !== record.id);
+  reg.accounts.push(record);
+  writeRegistry(reg);
+}
+function updateAccount(id, patch) {
+  const reg = readRegistry();
+  const idx = reg.accounts.findIndex((a) => a.id === id);
+  if (idx === -1)
+    return;
+  reg.accounts[idx] = { ...reg.accounts[idx], ...patch, id };
+  writeRegistry(reg);
+}
+function deleteAccount(id) {
+  const reg = readRegistry();
+  const record = reg.accounts.find((a) => a.id === id) ?? null;
+  if (!record)
+    return null;
+  reg.accounts = reg.accounts.filter((a) => a.id !== id);
+  writeRegistry(reg);
+  if (record.kind === "profile" && record.path && record.path.startsWith(paths.profiles(record.provider))) {
+    rmSync(record.path, { recursive: true, force: true });
+  }
+  return record;
+}
+
+// src/accounts.ts
+class AccountError extends Error {
+  status;
+  constructor(message, status = 400) {
+    super(message);
+    this.status = status;
+    this.name = "AccountError";
+  }
+}
+async function addClaudeToken(token, label) {
+  const secret = token.trim();
+  if (!secret)
+    throw new AccountError("No token given.");
+  const check = await verifyClaudeToken(secret);
+  if (!check.ok)
+    throw new AccountError(`Token check failed: ${check.message}`);
+  const named = label?.trim() || "";
+  const id = newAccountId("claude", named || check.email || "account");
+  await secretStore().set(id, secret);
+  const account = {
+    id,
+    provider: "claude",
+    label: named,
+    kind: "token",
+    email: check.email,
+    createdAt: new Date().toISOString()
+  };
+  saveAccount(account);
+  return { account };
+}
+async function addOpenCodeKey(key, label) {
+  const secret = key.trim();
+  if (!secret)
+    throw new AccountError("No key given.");
+  const { status } = await fetchOpenCodeUsage(secret);
+  if (status === 401)
+    throw new AccountError("Key rejected (401).");
+  if (status !== 200 && status !== 403)
+    throw new AccountError(`Usage endpoint returned HTTP ${status}.`);
+  const named = label?.trim() || "";
+  const id = newAccountId("opencode", named || "account");
+  await secretStore().set(id, secret);
+  const account = {
+    id,
+    provider: "opencode",
+    label: named,
+    kind: "token",
+    createdAt: new Date().toISOString()
+  };
+  saveAccount(account);
+  return {
+    account,
+    warning: status === 403 ? "Key is valid but has no active OpenCode Go subscription." : undefined
+  };
+}
+function renameExtraAccount(id, label) {
+  if (id.endsWith(":default"))
+    throw new AccountError("Default accounts are renamed on the page only.");
+  if (!getAccount(id))
+    throw new AccountError(`Unknown account: ${id}`, 404);
+  updateAccount(id, { label: label.trim() });
+  return getAccount(id);
+}
+async function removeExtraAccount(id) {
+  if (id.endsWith(":default"))
+    throw new AccountError("Default accounts belong to the CLI itself; sign out there instead.");
+  const rec = deleteAccount(id);
+  if (!rec)
+    throw new AccountError(`Unknown account: ${id}`, 404);
+  if (rec.kind === "token")
+    await secretStore().delete(id);
+  return rec;
+}
+function saveCodexProfile(opts) {
+  const named = opts.label?.trim() || "";
+  const finalLabel = named;
+  const id = named ? opts.tmpId : newAccountId("codex", opts.email || opts.tmpId.split(":")[1] || "account");
+  const path = id === opts.tmpId ? opts.dir : ensureDir(profileDirFor("codex", id));
+  if (path !== opts.dir) {
+    rmSync2(path, { recursive: true, force: true });
+    renameSync(opts.dir, path);
+  }
+  const account = {
+    id,
+    provider: "codex",
+    label: finalLabel,
+    kind: "profile",
+    path,
+    email: opts.email,
+    createdAt: new Date().toISOString()
+  };
+  saveAccount(account);
+  return account;
+}
+function isLocalCallbackUrl(raw) {
+  let u;
+  try {
+    u = new URL(raw.trim());
+  } catch {
+    return false;
+  }
+  if (u.protocol !== "http:" && u.protocol !== "https:")
+    return false;
+  const host = u.hostname.replace(/^\[|\]$/g, "").toLowerCase();
+  return host === "localhost" || host === "127.0.0.1" || host === "::1";
+}
+async function submitLocalCallback(raw) {
+  if (!isLocalCallbackUrl(raw))
+    throw new AccountError("Paste the localhost callback URL from the sign-in redirect.");
+  try {
+    await fetch(raw.trim(), { redirect: "manual" });
+  } catch (e) {
+    throw new AccountError(`Could not reach the local callback: ${e instanceof Error ? e.message : String(e)}`);
+  }
+}
+var SESSION_TTL_MS = 10 * 60000;
+var codexSessions = new Map;
+function dropCodexSession(id, removeDir) {
+  const rec = codexSessions.get(id);
+  if (!rec)
+    return;
+  clearTimeout(rec.timer);
+  rec.handle.close();
+  codexSessions.delete(id);
+  if (removeDir && rec.status !== "done") {
+    try {
+      rmSync2(rec.dir, { recursive: true, force: true });
+    } catch {}
+  }
+}
+async function beginCodexAdd(label) {
+  if (!await which("codex"))
+    throw new AccountError("codex is not installed (npm i -g @openai/codex).");
+  const tmpId = newAccountId("codex", label?.trim() || "pending");
+  const dir = ensureDir(profileDirFor("codex", tmpId));
+  const handle = await startCodexLogin(dir);
+  const id = crypto.randomUUID();
+  const rec = {
+    id,
+    label: label?.trim() || undefined,
+    tmpId,
+    dir,
+    handle,
+    status: "waiting",
+    timer: setTimeout(() => dropCodexSession(id, true), SESSION_TTL_MS)
+  };
+  rec.timer.unref?.();
+  handle.completed.then((info) => {
+    rec.account = saveCodexProfile({ label: rec.label, tmpId, dir, email: info.email });
+    rec.status = "done";
+  }).catch((e) => {
+    rec.status = "error";
+    rec.error = e instanceof Error ? e.message : String(e);
+  });
+  codexSessions.set(id, rec);
+  return { sessionId: id, authUrl: handle.authUrl };
+}
+async function beginCodexRelogin(accountId) {
+  const existing = getAccount(accountId);
+  if (!existing)
+    throw new AccountError(`Unknown account: ${accountId}`, 404);
+  if (existing.provider !== "codex" || existing.kind !== "profile" || !existing.path) {
+    throw new AccountError(`${accountId} cannot be re-authenticated this way.`);
+  }
+  const handle = await startCodexLogin(existing.path);
+  const id = crypto.randomUUID();
+  const rec = {
+    id,
+    tmpId: existing.id,
+    dir: existing.path,
+    handle,
+    status: "waiting",
+    timer: setTimeout(() => dropCodexSession(id, false), SESSION_TTL_MS)
+  };
+  rec.timer.unref?.();
+  handle.completed.then((info) => {
+    updateAccount(existing.id, { email: info.email });
+    rec.account = { ...existing, email: info.email };
+    rec.status = "done";
+  }).catch((e) => {
+    rec.status = "error";
+    rec.error = e instanceof Error ? e.message : String(e);
+  });
+  codexSessions.set(id, rec);
+  return { sessionId: id, authUrl: handle.authUrl };
+}
+function codexSessionStatus(sessionId) {
+  const rec = codexSessions.get(sessionId);
+  if (!rec)
+    return { status: "error", error: "Login session expired." };
+  return { status: rec.status, authUrl: rec.handle.authUrl, error: rec.error, account: rec.account };
+}
+async function submitCodexCallback(sessionId, url) {
+  if (!isLocalCallbackUrl(url))
+    throw new AccountError("Paste the localhost callback URL from the sign-in redirect.");
+  const rec = codexSessions.get(sessionId);
+  if (!rec)
+    throw new AccountError("Login session expired.", 404);
+  if (rec.status !== "waiting")
+    return;
+  await submitLocalCallback(url);
+}
+
 // src/collect.ts
 import { hostname } from "node:os";
 
 // src/adapters/cursor.ts
-import { existsSync as existsSync4, readFileSync as readFileSync4 } from "node:fs";
+import { existsSync as existsSync5, readFileSync as readFileSync5 } from "node:fs";
 import { homedir as homedir4 } from "node:os";
-import { join as join4 } from "node:path";
+import { join as join5 } from "node:path";
 var USAGE_URL3 = "https://api2.cursor.sh/aiserver.v1.DashboardService/GetCurrentPeriodUsage";
-function authFile() {
-  return process.env.CURSOR_AUTH_FILE ?? join4(homedir4(), ".cursor", "auth.json");
+var GROK_BOT_URL = "https://api2.cursor.sh/aiserver.v1.DashboardService/GetSandUsageStatus";
+var PLAN_URL = "https://api2.cursor.sh/aiserver.v1.DashboardService/GetPlanInfo";
+var KEYCHAIN_ACCOUNT = "cursor-user";
+var KEYCHAIN_SERVICE = "cursor-access-token";
+function tokenFromAuthJson(parsed) {
+  if (!isObject(parsed))
+    return null;
+  return typeof parsed.accessToken === "string" && parsed.accessToken ? parsed.accessToken : null;
 }
-function readAccessToken() {
-  const file = authFile();
-  if (!existsSync4(file))
+function tokenFromAuthFile(file) {
+  if (!existsSync5(file))
     return null;
   try {
-    const parsed = JSON.parse(readFileSync4(file, "utf8"));
-    return typeof parsed.accessToken === "string" && parsed.accessToken ? parsed.accessToken : null;
+    return tokenFromAuthJson(JSON.parse(readFileSync5(file, "utf8")));
   } catch {
     return null;
   }
 }
+function authFiles() {
+  const home = homedir4();
+  const out = [];
+  if (process.platform === "win32") {
+    const roaming = process.env.APPDATA || join5(home, "AppData", "Roaming");
+    out.push(join5(roaming, "Cursor", "auth.json"));
+  } else if (process.platform !== "darwin") {
+    const xdg = process.env.XDG_CONFIG_HOME || join5(home, ".config");
+    out.push(join5(xdg, "cursor", "auth.json"));
+  }
+  out.push(join5(home, ".cursor", "auth.json"));
+  return out;
+}
+async function tokenFromKeychain() {
+  if (process.platform !== "darwin")
+    return null;
+  const res = await run("security", ["find-generic-password", "-a", KEYCHAIN_ACCOUNT, "-s", KEYCHAIN_SERVICE, "-w"], { timeoutMs: 20000 });
+  if (res.code !== 0)
+    return null;
+  const v = res.stdout.replace(/\r?\n$/, "");
+  return v || null;
+}
+async function readCursorAccessToken() {
+  const env = process.env.CURSOR_AUTH_TOKEN?.trim();
+  if (env)
+    return env;
+  if (process.env.CURSOR_AUTH_FILE) {
+    const fromFile = tokenFromAuthFile(process.env.CURSOR_AUTH_FILE);
+    if (fromFile)
+      return fromFile;
+  }
+  const fromKeychain = await tokenFromKeychain();
+  if (fromKeychain)
+    return fromKeychain;
+  if (process.env.CURSOR_AUTH_FILE)
+    return null;
+  for (const file of authFiles()) {
+    const fromFile = tokenFromAuthFile(file);
+    if (fromFile)
+      return fromFile;
+  }
+  return null;
+}
 function jwtExpiry(token) {
   const part = token.split(".")[1];
   if (!part)
@@ -895,13 +1258,6 @@ function jwtExpiry(token) {
     return null;
   }
 }
-async function cursorEmail() {
-  const res = await run("cursor-agent", ["status"], { timeoutMs: 15000 });
-  const text = stripAnsi(res.stdout + `
-` + res.stderr);
-  const m = text.match(/Logged in as\s+(\S+)/i);
-  return m?.[1] ?? null;
-}
 function cents(v) {
   if (typeof v === "string" && v.trim())
     v = Number(v);
@@ -917,28 +1273,12 @@ function normalizeCursorUsage(body) {
   const out = [];
   const plan = isObject(body.planUsage) ? body.planUsage : null;
   if (plan) {
-    const limit = cents(plan.limit);
-    const included = cents(plan.includedSpend);
-    const bonus = cents(plan.bonusSpend);
-    let used = limit && included !== null ? clampPercent(included / limit * 100) : null;
-    if (used === null)
-      used = clampPercent(plan.totalPercentUsed);
-    if (used !== null) {
-      const parts = [];
-      if (limit !== null && included !== null)
-        parts.push(`${money(included)} of ${money(limit)} included`);
-      if (bonus)
-        parts.push(`${money(bonus)} bonus usage`);
-      if (typeof body.displayMessage === "string" && body.displayMessage.trim())
-        parts.push(body.displayMessage.trim());
-      out.push({ id: "included", label: "Included · billing cycle", usedPercent: used, resetsAt: cycleEnd, windowMinutes: null, kind: "cycle", note: parts.join(" · ") || undefined });
-    }
-    const api = clampPercent(plan.apiPercentUsed);
-    if (api !== null)
-      out.push({ id: "api", label: "Named models", usedPercent: api, resetsAt: cycleEnd, windowMinutes: null, kind: "cycle" });
     const auto = clampPercent(plan.autoPercentUsed);
     if (auto !== null)
-      out.push({ id: "auto", label: "Auto models", usedPercent: auto, resetsAt: cycleEnd, windowMinutes: null, kind: "cycle" });
+      out.push({ id: "auto", label: "Cursor Models", usedPercent: auto, resetsAt: cycleEnd, windowMinutes: null, kind: "cycle" });
+    const api = clampPercent(plan.apiPercentUsed);
+    if (api !== null)
+      out.push({ id: "api", label: "Other Models", usedPercent: api, resetsAt: cycleEnd, windowMinutes: null, kind: "cycle" });
   }
   const spend = isObject(body.spendLimitUsage) ? body.spendLimitUsage : null;
   if (spend) {
@@ -971,37 +1311,82 @@ function normalizeCursorUsage(body) {
   }
   return out.length ? out : null;
 }
+function normalizeGrokBotUsage(body) {
+  if (!isObject(body))
+    return null;
+  const src = isObject(body.usage) ? body.usage : body;
+  if (src.usesPooledEnterpriseAllowance === true)
+    return null;
+  if (src.hasNonZeroIncludedLimit === false)
+    return null;
+  if (src.includedLimitZero === true)
+    return null;
+  const used = clampPercent(src.usagePercent);
+  if (used === null)
+    return null;
+  return {
+    id: "grok_bot",
+    label: "Weekly Usage",
+    group: "Grok Bot",
+    usedPercent: used,
+    resetsAt: isoOrNull(src.nextResetTimestampUtc) ?? epochToIso(src.nextResetTimestampUtc),
+    windowMinutes: 10080,
+    kind: "rolling"
+  };
+}
+function insertGrokBot(windows, grok) {
+  const extra = windows.findIndex((w) => w.id === "on_demand" || w.id === "pooled");
+  if (extra === -1)
+    return [...windows, grok];
+  return [...windows.slice(0, extra), grok, ...windows.slice(extra)];
+}
+function planFromCursorPlanInfo(body) {
+  if (!isObject(body))
+    return null;
+  const info = isObject(body.planInfo) ? body.planInfo : body;
+  return typeof info.planName === "string" && info.planName.trim() ? info.planName.trim() : null;
+}
 async function fetchCursor(account) {
   try {
-    const token = readAccessToken();
+    const token = await readCursorAccessToken();
     if (!token)
       return snapshot(account, "signed_out", { message: "Not signed in. Run `cursor-agent login`." });
     const exp = jwtExpiry(token);
-    const emailP = cursorEmail().catch(() => null);
     if (exp && exp < Date.now()) {
-      return snapshot(account, "error", { email: await emailP, message: "Cursor session expired. Run `cursor-agent login`." });
+      return snapshot(account, "error", { email: account.email ?? null, message: "Cursor session expired. Run `cursor-agent login`." });
     }
-    const res = await fetchJson(USAGE_URL3, {
+    const headers = {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+      "Connect-Protocol-Version": "1"
+    };
+    const extra = {
       method: "POST",
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json",
-        "Connect-Protocol-Version": "1"
-      },
+      headers,
       body: "{}"
-    });
-    const email = await emailP;
+    };
+    const grokReq = fetchJson(GROK_BOT_URL, extra).catch(() => null);
+    const planReq = fetchJson(PLAN_URL, extra).catch(() => null);
+    const res = await fetchJson(USAGE_URL3, extra);
+    const email = account.email ?? null;
     if (res.status === 401 || res.status === 403) {
       return snapshot(account, "error", { email, message: `Cursor rejected the session (${res.status}). Run \`cursor-agent login\`.` });
     }
     if (res.status !== 200) {
       return snapshot(account, "error", { email, message: `Cursor usage endpoint returned HTTP ${res.status}.` });
     }
-    const windows = normalizeCursorUsage(res.body);
+    let windows = normalizeCursorUsage(res.body);
     if (!windows) {
       return snapshot(account, "unsupported", { email, message: "Cursor returned no plan usage for this account (team/enterprise plans are not supported yet)." });
     }
-    return snapshot(account, "ok", { email, windows });
+    const [grokRes, planRes] = await Promise.all([grokReq, planReq]);
+    if (grokRes?.status === 200) {
+      const grok = normalizeGrokBotUsage(grokRes.body);
+      if (grok)
+        windows = insertGrokBot(windows, grok);
+    }
+    const plan = planRes?.status === 200 ? planFromCursorPlanInfo(planRes.body) : null;
+    return snapshot(account, "ok", { email, plan, windows });
   } catch (e) {
     return snapshot(account, "error", { message: errorMessage(e) });
   }
@@ -1021,76 +1406,6 @@ function fetchSnapshot(account) {
   }
 }
 
-// src/registry.ts
-import { existsSync as existsSync5, readFileSync as readFileSync5, writeFileSync as writeFileSync2, rmSync } from "node:fs";
-import { dirname as dirname2, join as join5 } from "node:path";
-function readRegistry() {
-  const file = paths.registry();
-  if (!existsSync5(file))
-    return { version: 1, accounts: [] };
-  try {
-    const parsed = JSON.parse(readFileSync5(file, "utf8"));
-    return { version: 1, accounts: Array.isArray(parsed.accounts) ? parsed.accounts : [] };
-  } catch {
-    return { version: 1, accounts: [] };
-  }
-}
-function writeRegistry(reg) {
-  const file = paths.registry();
-  ensureDir(dirname2(file));
-  writeFileSync2(file, JSON.stringify(reg, null, 2) + `
-`, { mode: 384 });
-}
-function listAccounts(provider) {
-  const all = readRegistry().accounts;
-  return provider ? all.filter((a) => a.provider === provider) : all;
-}
-function getAccount(id) {
-  return readRegistry().accounts.find((a) => a.id === id) ?? null;
-}
-function newAccountId(provider, hint) {
-  const existing = new Set(readRegistry().accounts.map((a) => a.id));
-  const base = `${provider}:${slugify(hint)}`;
-  if (base.endsWith(":default"))
-    return newAccountId(provider, `${hint}-2`);
-  if (!existing.has(base))
-    return base;
-  for (let i = 2;; i++) {
-    const candidate = `${base}-${i}`;
-    if (!existing.has(candidate))
-      return candidate;
-  }
-}
-function profileDirFor(provider, id) {
-  return join5(paths.profiles(provider), id.split(":")[1] ?? "account");
-}
-function saveAccount(record) {
-  const reg = readRegistry();
-  reg.accounts = reg.accounts.filter((a) => a.id !== record.id);
-  reg.accounts.push(record);
-  writeRegistry(reg);
-}
-function updateAccount(id, patch) {
-  const reg = readRegistry();
-  const idx = reg.accounts.findIndex((a) => a.id === id);
-  if (idx === -1)
-    return;
-  reg.accounts[idx] = { ...reg.accounts[idx], ...patch, id };
-  writeRegistry(reg);
-}
-function deleteAccount(id) {
-  const reg = readRegistry();
-  const record = reg.accounts.find((a) => a.id === id) ?? null;
-  if (!record)
-    return null;
-  reg.accounts = reg.accounts.filter((a) => a.id !== id);
-  writeRegistry(reg);
-  if (record.kind === "profile" && record.path && record.path.startsWith(paths.profiles(record.provider))) {
-    rmSync(record.path, { recursive: true, force: true });
-  }
-  return record;
-}
-
 // src/types.ts
 var PROVIDERS = [
   { id: "claude", name: "Claude", bin: "claude" },
@@ -1106,8 +1421,7 @@ function providerName(id) {
 async function detectProviders() {
   return Promise.all(PROVIDERS.map(async (p) => {
     const path = await which(p.bin);
-    const version = path ? await binVersion(p.bin) : null;
-    return { id: p.id, installed: path !== null, version };
+    return { id: p.id, installed: path !== null, version: null };
   }));
 }
 function resolveAccounts(provider, installed) {
@@ -1132,12 +1446,15 @@ async function collectReport(update, only) {
   const providers = await Promise.all(PROVIDERS.filter((p) => !only || only.includes(p.id)).map(async (p) => {
     const pres = presence.find((x) => x.id === p.id);
     const accounts = resolveAccounts(p.id, pres.installed);
-    const snapshots = await Promise.all(accounts.map(fetchAccount));
-    return { id: p.id, name: p.name, installed: pres.installed, version: pres.version, accounts: snapshots };
+    const [snapshots, version] = await Promise.all([
+      Promise.all(accounts.map(fetchAccount)),
+      pres.installed ? binVersion(p.bin) : Promise.resolve(null)
+    ]);
+    return { id: p.id, name: p.name, installed: pres.installed, version, accounts: snapshots };
   }));
   return {
     version: VERSION,
-    hostname: hostname().replace(/\.local$/, ""),
+    hostname: formatHostname(hostname()),
     fetchedAt: new Date().toISOString(),
     update,
     providers
@@ -1154,22 +1471,28 @@ class ReportCache {
     this.getUpdate = getUpdate;
   }
   get(force = false) {
+    const cached = this.report ? { ...this.report, update: this.getUpdate() } : null;
+    const fresh = cached && Date.now() - Date.parse(cached.fetchedAt) < this.ttlMs;
+    if (!force && fresh)
+      return Promise.resolve(cached);
     if (this.inflight)
-      return this.inflight;
-    if (!force && this.report && Date.now() - Date.parse(this.report.fetchedAt) < this.ttlMs) {
-      return Promise.resolve({ ...this.report, update: this.getUpdate() });
-    }
+      return cached && !force ? Promise.resolve(cached) : this.inflight;
     this.inflight = collectReport(this.getUpdate()).then((r) => {
       this.report = r;
       return r;
     }).finally(() => {
       this.inflight = null;
     });
+    if (!force && cached)
+      return Promise.resolve(cached);
     return this.inflight;
   }
   peek() {
     return this.report ? { ...this.report, update: this.getUpdate() } : null;
   }
+  invalidate() {
+    this.report = null;
+  }
 }
 
 // src/server.ts
@@ -1209,39 +1532,48 @@ var ui_default = `<!doctype html>
   .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
   .wrap { max-width: 820px; margin: 0 auto; padding: 44px 20px 64px; }
 
-  header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; gap: 16px; }
+  header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
   h1 { font-size: 15px; font-weight: 500; letter-spacing: .01em; margin: 0; }
   h1 span { color: var(--dim); font-weight: 400; margin-left: 8px; }
   .meta { color: var(--muted); font-size: 12px; display: flex; gap: 14px; align-items: center; }
-  button.refresh {
+  button.opts-btn {
+    display: inline-flex; align-items: center; gap: 6px;
     background: transparent; color: var(--fg); border: 1px solid var(--line-2); border-radius: 6px;
     padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
   }
-  button.refresh:hover { border-color: #3a3a3a; }
-  button.refresh[disabled] { opacity: .45; cursor: default; }
+  button.opts-btn:hover { border-color: #3a3a3a; }
+  button.opts-btn svg { width: 13px; height: 13px; display: block; flex: none; }
+  button.opts-btn .icon-back { display: none; }
+  button.opts-btn.back .icon-gear { display: none; }
+  button.opts-btn.back .icon-back { display: block; }
 
-  /* Chrome-style tab strip */
-  .tabs { display: flex; gap: 2px; padding: 0 8px; position: relative; z-index: 1; }
+  .tabs {
+    display: flex; gap: 4px; flex-wrap: wrap;
+    border-bottom: 1px solid var(--line);
+    margin: 0 0 16px; padding: 0;
+  }
   .tab {
-    position: relative; background: transparent; border: 1px solid transparent; border-bottom: none;
-    border-radius: 10px 10px 0 0; color: var(--muted); padding: 9px 16px 9px 14px; cursor: pointer;
-    font: inherit; font-size: 13px; display: flex; gap: 9px; align-items: center; user-select: none;
-    transition: color .12s;
-  }
-  .tab:hover { color: var(--fg); background: #060606; }
-  .tab.active { background: var(--surface); border-color: var(--line); color: var(--fg); margin-bottom: -1px; padding-bottom: 10px; }
-  .tab.active::before, .tab.active::after {
-    content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; background: var(--surface);
-  }
-  .tab.active::before { left: -10px; -webkit-mask: radial-gradient(circle at 0 0, transparent 10px, #000 10.5px); mask: radial-gradient(circle at 0 0, transparent 10px, #000 10.5px); }
-  .tab.active::after { right: -10px; -webkit-mask: radial-gradient(circle at 100% 0, transparent 10px, #000 10.5px); mask: radial-gradient(circle at 100% 0, transparent 10px, #000 10.5px); }
-  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); flex: none; }
-  .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); }
+    background: none; border: none; border-bottom: 2px solid transparent;
+    color: var(--muted); padding: 9px 12px 10px; margin-bottom: -1px; cursor: pointer;
+    font: inherit; font-size: 13px; display: flex; gap: 8px; align-items: center; user-select: none;
+  }
+  .tab:hover { color: var(--fg); }
+  .tab.active { color: var(--fg); border-bottom-color: var(--fg); }
+  .tab img.logo { width: 14px; height: 14px; display: block; flex: none; opacity: .55; }
+  .tab.active img.logo, .tab:hover img.logo { opacity: 1; }
   .tab .n { color: var(--dim); font-size: 11px; }
 
   .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-height: 160px; }
+  .panel.cards {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch;
+    background: transparent; border: none; min-height: 0;
+  }
   .card { padding: 18px 18px 20px; border-bottom: 1px solid var(--line); }
   .card:last-child { border-bottom: none; }
+  .panel.cards .card {
+    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
+    border-bottom: 1px solid var(--line); min-width: 0; height: 100%;
+  }
   .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
   .label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .plan { color: var(--muted); font-size: 12px; text-transform: capitalize; margin-left: 8px; font-weight: 400; }
@@ -1250,28 +1582,147 @@ var ui_default = `<!doctype html>
   .badge.warn { color: var(--warn); border-color: rgba(245,197,66,.35); }
 
   .win { margin-top: 14px; }
-  .win-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); margin-bottom: 7px; gap: 12px; }
+  .win-group {
+    margin: 28px 0 0; font-size: 16px; font-weight: 500; color: var(--fg);
+  }
+  .win-group + .win { margin-top: 14px; }
+  .win-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); margin-bottom: 8px; gap: 12px; }
   .win-row b { color: var(--fg); font-weight: 500; }
   .win-row .pct { color: var(--fg); }
   .win-row .pct.warn { color: var(--warn); } .win-row .pct.crit { color: var(--crit); }
-  .track { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
-  .fill { height: 100%; border-radius: 2px; background: var(--ok); width: 0; transition: width .5s cubic-bezier(.2,.7,.2,1); }
+  .track { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
+  .fill { height: 100%; border-radius: 3px; background: var(--ok); width: 0; transition: width .5s cubic-bezier(.2,.7,.2,1); }
   .fill.warn { background: var(--warn); } .fill.crit { background: var(--crit); }
+  .fill.sliver { min-width: 8px; }
   .note { color: var(--dim); font-size: 11px; margin-top: 5px; }
 
   .msg { color: var(--muted); font-size: 13px; margin-top: 6px; }
   .empty { padding: 46px 18px; color: var(--muted); text-align: center; font-size: 13px; }
   .hint { color: var(--dim); font-size: 12px; margin-top: 8px; }
   code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #121212; padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--fg); }
-  .credits { font-size: 12px; color: var(--muted); margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
+  .credits {
+    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
+    margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
+    font-size: 12px;
+  }
+  .credits b { color: var(--fg); font-weight: 500; }
+  .credits-avail {
+    position: relative; color: var(--muted); cursor: help;
+    border-bottom: 1px dotted var(--dim);
+  }
+  .credits-avail:hover, .credits-avail:focus-visible { color: var(--fg); }
+  .credits-tip {
+    display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
+    min-width: 240px; padding: 8px 10px;
+    background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px;
+    color: var(--muted); font-size: 11px; line-height: 1.45; white-space: nowrap; z-index: 5;
+  }
+  .credits-avail:hover .credits-tip, .credits-avail:focus-visible .credits-tip { display: block; }
+  .credits-tip-row { display: flex; align-items: baseline; gap: 12px; }
+  .credits-tip-row + .credits-tip-row { margin-top: 6px; }
+  .credits-tip-n { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 1em; }
+  .credits-tip-date { color: var(--fg); flex: 1; }
+  .credits-tip-left { color: var(--dim); font-variant-numeric: tabular-nums; margin-left: auto; }
+
+  #dash[hidden], #settings[hidden] { display: none; }
+  .settings { display: flex; flex-direction: column; gap: 22px; }
+  .opts-label { font-size: 11px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
+  .opts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; user-select: none; }
+  .opts-row.dragging {
+    background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px;
+  }
+  .opts-prov { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .opts-row img.logo { width: 14px; height: 14px; }
+  .grip {
+    width: 10px; height: 14px; flex: none; cursor: grab; touch-action: none;
+    background-image: radial-gradient(circle, var(--dim) 1px, transparent 1.2px);
+    background-size: 5px 5px; background-position: 0 1px;
+  }
+  .grip:active { cursor: grabbing; }
+  .chk {
+    appearance: none; -webkit-appearance: none;
+    width: 15px; height: 15px; margin: 0; padding: 0;
+    border: 1px solid var(--line-2); border-radius: 4px;
+    background: transparent; cursor: pointer; flex: none;
+    display: grid; place-items: center;
+  }
+  .chk:hover { border-color: var(--muted); }
+  .chk:checked { background: var(--fg); border-color: var(--fg); }
+  .chk:checked::after {
+    content: ""; width: 7px; height: 4px;
+    border-left: 1.5px solid var(--bg);
+    border-bottom: 1.5px solid var(--bg);
+    transform: translateY(-1px) rotate(-45deg);
+  }
+  .opts-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .opts-inline .opts-label { margin: 0; }
+  .opts-inline.tight { margin-bottom: 8px; }
+  .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; width: auto; }
+  .seg label { text-align: center; font-size: 11px; padding: 3px 8px; color: var(--muted); cursor: pointer; }
+  .seg input { appearance: none; position: absolute; }
+  .seg label:has(input:checked) { background: #121212; color: var(--fg); }
+  .opts-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 2px; }
+  .opts-actions:has(#opts-signed-in:not([hidden])) { justify-content: space-between; }
+  .opts-link { background: none; border: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
+  .opts-link:hover { color: var(--fg); }
+  .opts-link[hidden] { display: none; }
+  .acct-group { padding-bottom: 12px; }
+  .acct-group + .acct-group { border-top: 1px solid var(--line); padding-top: 12px; }
+  .acct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
+  .acct-head img.logo { width: 14px; height: 14px; }
+  .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
+  .acct-actions { display: flex; align-items: center; gap: 10px; flex: none; }
+  .acct-row .acct-actions { opacity: 0; }
+  .acct-row:hover .acct-actions, .acct-row:focus-within .acct-actions { opacity: 1; }
+  .dlg-body .acct-actions { justify-content: space-between; width: 100%; }
+  .acct-meta { color: var(--dim); font-size: 12px; margin-left: 8px; }
+  .acct-rename { display: flex; gap: 8px; flex: 1; min-width: 0; }
+  dialog.dlg {
+    width: min(420px, calc(100vw - 32px));
+    background: var(--surface); color: var(--fg);
+    border: 1px solid var(--line); border-radius: 12px;
+    padding: 0;
+  }
+  dialog.dlg::backdrop { background: rgba(0, 0, 0, .9); }
+  .dlg-head {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 14px 16px; border-bottom: 1px solid var(--line);
+  }
+  .dlg-head strong { font-weight: 500; font-size: 13px; }
+  .dlg-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
+  .pick { display: flex; flex-direction: column; gap: 6px; }
+  .pick-btn {
+    display: flex; align-items: center; gap: 10px;
+    background: transparent; color: var(--fg); border: 1px solid var(--line-2); border-radius: 8px;
+    padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; text-align: left;
+  }
+  .pick-btn:hover { border-color: #3a3a3a; }
+  .pick-btn img.logo { width: 14px; height: 14px; }
+  .field {
+    background: #121212; color: var(--fg); border: 1px solid var(--line-2); border-radius: 6px;
+    padding: 6px 10px; font: inherit; font-size: 12px; min-width: 0; flex: 1;
+  }
+  .field:focus { outline: none; border-color: var(--muted); }
+  .acct-note { color: var(--dim); font-size: 12px; }
+  .acct-msg { color: var(--muted); font-size: 12px; }
+  .acct-msg.err { color: var(--crit); }
+  .acct-oauth { display: flex; flex-direction: column; gap: 8px; }
+  .acct-url { font-size: 12px; color: var(--fg); word-break: break-all; }
+  .acct-url a { color: var(--fg); }
+  button.refresh {
+    background: transparent; color: var(--fg); border: 1px solid var(--line-2); border-radius: 6px;
+    padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
+  }
+  button.refresh:hover { border-color: #3a3a3a; }
+  button.refresh[disabled] { opacity: .45; cursor: default; }
 
   footer { margin-top: 26px; color: var(--dim); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
   footer .update { color: var(--warn); }
-  footer kbd { font-family: inherit; color: var(--dim); }
   @media (max-width: 520px) {
     .wrap { padding: 28px 12px 48px; }
-    .tab { padding: 8px 11px; font-size: 12px; }
+    .tab { padding: 8px 10px; font-size: 12px; }
     .tab .n { display: none; }
+    .panel.cards { grid-template-columns: 1fr; }
   }
 </style>
 </head>
@@ -1280,18 +1731,56 @@ var ui_default = `<!doctype html>
   <header>
     <h1>just-usage<span id="host"></span></h1>
     <div class="meta">
-      <span id="updated" class="mono"></span>
-      <button class="refresh" id="refresh" type="button">Refresh</button>
+      <span id="updated"></span>
+      <button class="opts-btn" id="opts-btn" type="button"><svg class="icon-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg><svg class="icon-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18 9 12l6-6"/><path d="M9 12h12"/></svg><span id="opts-label">Options</span></button>
     </div>
   </header>
+  <div id="dash">
   <nav class="tabs" id="tabs" role="tablist"></nav>
   <section class="panel" id="panel" role="tabpanel"><div class="empty">Loading…</div></section>
+  </div>
+  <div id="settings" class="settings" hidden>
+    <div>
+      <div class="opts-label">Providers</div>
+      <div id="opts-providers"></div>
+    </div>
+    <div class="opts-inline">
+      <div class="opts-label">Meters</div>
+      <div class="seg" id="opts-meter">
+        <label><input type="radio" name="meter" value="left" checked> Left</label>
+        <label><input type="radio" name="meter" value="used"> Used</label>
+      </div>
+    </div>
+    <label class="opts-row" for="opts-email">
+      <span>Show email on accounts</span>
+      <input class="chk" id="opts-email" type="checkbox">
+    </label>
+    <div>
+      <div class="opts-inline tight">
+        <div class="opts-label">Accounts</div>
+        <button class="refresh" id="acct-add" type="button">Add account</button>
+      </div>
+      <div id="opts-accounts"></div>
+    </div>
+    <div class="opts-actions">
+      <button class="opts-link" id="opts-signed-in" type="button">Signed-in only</button>
+      <button class="refresh" id="refresh" type="button">Refresh data</button>
+    </div>
+  </div>
   <footer>
     <span id="version"></span>
     <span id="update"></span>
   </footer>
 </div>
 
+<dialog class="dlg" id="add-acct">
+  <div class="dlg-head">
+    <strong id="add-acct-title">Add account</strong>
+    <button class="opts-link" id="add-acct-close" type="button">Close</button>
+  </div>
+  <div class="dlg-body" id="add-acct-body"></div>
+</dialog>
+
 <script>
 (() => {
   const PROVIDERS = [
@@ -1308,15 +1797,69 @@ var ui_default = `<!doctype html>
   };
   const $ = (id) => document.getElementById(id);
   let report = null;
-  const wanted = new URLSearchParams(location.search).get("tab");
+  try {
+    const cached = JSON.parse(localStorage.getItem("ju.report"));
+    if (cached && Array.isArray(cached.providers)) report = cached;
+  } catch {}
+  const params = new URLSearchParams(location.search);
+  const wanted = params.get("tab");
   let active = PROVIDERS.some(([id]) => id === wanted) ? wanted : localStorage.getItem("ju.tab") || "claude";
+  let settingsOpen = params.get("view") === "settings";
   let loading = false;
+  let busy = false;
+  let showEmail = localStorage.getItem("ju.showEmail") === "1";
+  let aliases = {};
+  try {
+    const raw = JSON.parse(localStorage.getItem("ju.aliases"));
+    if (raw && typeof raw === "object") aliases = raw;
+  } catch {}
+  let renaming = null;
+  let wizard = { step: "provider", provider: "", label: "", secret: "", sessionId: "", authUrl: "", callback: "", msg: "", err: false };
+  let codexPoll = 0;
+  let enabled = null;
+  try {
+    const raw = JSON.parse(localStorage.getItem("ju.providers"));
+    if (raw && typeof raw === "object") enabled = raw;
+  } catch {}
+  let dragging = false;
+  let showLeft = localStorage.getItem("ju.showLeft") !== "0";
+  let order = PROVIDERS.map(([id]) => id);
+  try {
+    const raw = JSON.parse(localStorage.getItem("ju.order"));
+    if (Array.isArray(raw)) {
+      const known = new Set(order);
+      const next = raw.filter((id) => known.has(id));
+      for (const id of order) if (!next.includes(id)) next.push(id);
+      order = next;
+    }
+  } catch {}
 
   const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
-  // Escape, then turn \`backticked\` spans into <code>.
   const rich = (s) => esc(s).replace(/\`([^\`]+)\`/g, "<code>$1</code>");
   const sev = (p) => (p == null ? null : p >= 85 ? "crit" : p >= 60 ? "warn" : "ok");
   const rank = { ok: 1, warn: 2, crit: 3 };
+  const logo = (id) => \`<img class="logo" src="/logos/\${id}.svg?v=2" alt="" width="14" height="14">\`;
+  const formatPlan = (p) => String(p).replace(/\\S+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1));
+  const GENERIC_LABELS = new Set(["", "default", "token", "go", "pending", "profile", "account", "codex"]);
+  function isGenericLabel(label, email) {
+    const s = String(label ?? "").trim();
+    if (!s) return true;
+    if (email && s === email) return true;
+    return GENERIC_LABELS.has(s.toLowerCase());
+  }
+  function accountTitle(a, index) {
+    if (showEmail && a.account.email) return a.account.email;
+    const alias = String(aliases[a.account.id] || "").trim();
+    if (alias) return alias;
+    if (a.account.kind === "default" || /^default$/i.test(String(a.account.label || "").trim())) return "Default";
+    if (!isGenericLabel(a.account.label, a.account.email)) return String(a.account.label).trim();
+    return \`Account \${index + 1}\`;
+  }
+  function formatPercent(used) {
+    if (used == null) return "—";
+    const tenth = Math.round(Math.min(100, Math.max(0, used)) * 10) / 10;
+    return Number.isInteger(tenth) ? \`\${tenth}%\` : \`\${tenth.toFixed(1)}%\`;
+  }
 
   function fmtDuration(ms) {
     const min = Math.round(ms / 60000);
@@ -1336,31 +1879,80 @@ var ui_default = `<!doctype html>
     }
     return diff <= 0 ? "resetting" : \`resets in \${fmtDuration(diff)}\`;
   }
-  function fmtTime(iso) {
+  function fmtAgo(iso) {
     const t = Date.parse(iso);
-    return isFinite(t) ? new Date(t).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) : "";
+    if (!isFinite(t)) return "";
+    const sec = Math.max(0, Math.round((Date.now() - t) / 1000));
+    if (sec < 20) return "just now";
+    if (sec < 60) return \`\${sec} sec ago\`;
+    const min = Math.round(sec / 60);
+    if (min < 60) return min === 1 ? "1 min ago" : \`\${min} min ago\`;
+    const hr = Math.round(min / 60);
+    if (hr < 48) return hr === 1 ? "1 hr ago" : \`\${hr} hr ago\`;
+    const d = Math.round(hr / 24);
+    return d === 1 ? "1 day ago" : \`\${d} days ago\`;
   }
 
-  function providerSeverity(p) {
-    if (!p) return null;
-    let worst = null;
-    for (const a of p.accounts) {
-      if (a.status !== "ok") continue;
-      for (const w of a.windows) {
-        const s = sev(w.usedPercent);
-        if (s && (!worst || rank[s] > rank[worst])) worst = s;
-      }
-    }
-    return worst;
+  function isSignedIn(p) {
+    return !!p?.accounts.some((a) => a.status !== "signed_out");
+  }
+
+  function visibleIds() {
+    if (enabled) return order.filter((id) => enabled[id]);
+    if (!report) return [];
+    return order.filter((id) => isSignedIn(report.providers.find((x) => x.id === id)));
+  }
+
+  function ensureActive() {
+    const vis = visibleIds();
+    if (!vis.length || vis.includes(active)) return;
+    active = vis[0];
+    localStorage.setItem("ju.tab", active);
+  }
+
+  function persistEnabled(next) {
+    enabled = next;
+    if (next) localStorage.setItem("ju.providers", JSON.stringify(next));
+    else localStorage.removeItem("ju.providers");
+    ensureActive();
+    if (settingsOpen) {
+      renderTabs();
+      $("opts-signed-in").hidden = !enabled;
+    } else render();
+  }
+
+  function persistOrder(next) {
+    order = next;
+    localStorage.setItem("ju.order", JSON.stringify(next));
+    ensureActive();
+    if (settingsOpen) renderTabs();
+    else render();
+  }
+
+  function setView(open) {
+    settingsOpen = open;
+    $("dash").hidden = open;
+    $("settings").hidden = !open;
+    const btn = $("opts-btn");
+    $("opts-label").textContent = open ? "Back" : "Options";
+    const q = new URLSearchParams();
+    if (open) q.set("view", "settings");
+    else q.set("tab", active);
+    history.replaceState(null, "", q.toString() ? \`?\${q}\` : location.pathname);
+    if (open) {
+      renderSettings();
+      renderChrome();
+    } else render();
   }
 
   function renderTabs() {
-    $("tabs").innerHTML = PROVIDERS.map(([id, name]) => {
+    const vis = visibleIds();
+    $("tabs").innerHTML = vis.map((id) => {
+      const name = PROVIDERS.find(([x]) => x === id)?.[1] || id;
       const p = report?.providers.find((x) => x.id === id);
-      const s = providerSeverity(p);
       const n = p ? p.accounts.filter((a) => a.status === "ok").length : 0;
       return \`<button class="tab\${id === active ? " active" : ""}" role="tab" data-id="\${id}" aria-selected="\${id === active}">
-        <span class="dot\${s ? " " + s : ""}"></span>\${esc(name)}\${n > 1 ? \`<span class="n">\${n}</span>\` : ""}</button>\`;
+        \${logo(id)}\${esc(name)}\${n > 1 ? \`<span class="n">\${n}</span>\` : ""}</button>\`;
     }).join("");
     for (const el of $("tabs").querySelectorAll(".tab")) {
       el.onclick = () => { active = el.dataset.id; localStorage.setItem("ju.tab", active); render(); };
@@ -1368,21 +1960,38 @@ var ui_default = `<!doctype html>
   }
 
   function renderWindow(w) {
-    const s = sev(w.usedPercent);
-    const pct = w.usedPercent == null ? "—" : \`\${Math.round(w.usedPercent)}%\`;
+    const used = w.usedPercent;
+    const shown = showLeft && used != null ? Math.max(0, 100 - used) : used;
+    const s = sev(used);
+    const pct = formatPercent(shown);
+    const word = showLeft ? "left" : "used";
     const reset = fmtReset(w);
+    const bar = shown == null ? 0 : shown;
+    const sliver = shown > 0 && shown < 100;
     return \`<div class="win">
       <div class="win-row"><b>\${esc(w.label)}</b>
-        <span class="mono"><span class="pct\${s ? " " + s : ""}">\${pct} used</span>\${reset ? \` · \${esc(reset)}\` : ""}</span></div>
-      <div class="track"><div class="fill\${s ? " " + s : ""}" style="width:\${w.usedPercent ?? 0}%"></div></div>
+        <span class="mono"><span class="pct\${s ? " " + s : ""}">\${pct} \${word}</span>\${reset ? \` · \${esc(reset)}\` : ""}</span></div>
+      <div class="track"><div class="fill\${s ? " " + s : ""}\${sliver ? " sliver" : ""}" style="width:\${bar}%"></div></div>
       \${w.note ? \`<div class="note">\${esc(w.note)}</div>\` : ""}
     </div>\`;
   }
 
-  function renderCard(a, provider) {
-    const title = a.account.email || a.account.label;
-    const sub = a.account.email && a.account.label !== "Default" && a.account.label !== a.account.email ? \` <span class="plan">\${esc(a.account.label)}</span>\` : "";
-    const plan = a.account.plan ? \`<span class="plan">\${esc(a.account.plan)}</span>\` : "";
+  function renderWindows(windows) {
+    let html = "";
+    let lastGroup = null;
+    for (const w of windows) {
+      if (w.group && w.group !== lastGroup) {
+        html += \`<div class="win-group">\${esc(w.group)}</div>\`;
+        lastGroup = w.group;
+      }
+      html += renderWindow(w);
+    }
+    return html;
+  }
+
+  function renderCard(a, provider, index) {
+    const title = accountTitle(a, index);
+    const plan = a.account.plan ? \`<span class="plan">\${esc(formatPlan(a.account.plan))}</span>\` : "";
     let badge = "";
     if (a.status === "ok") {
       let worst = null;
@@ -1390,78 +1999,516 @@ var ui_default = `<!doctype html>
       if (worst === "crit") badge = \`<span class="badge crit">critical</span>\`;
       else if (worst === "warn") badge = \`<span class="badge warn">running low</span>\`;
     } else {
-      const text = { signed_out: "signed out", unsupported: "unsupported", error: "error" }[a.status] || a.status;
+      const text = { signed_out: "signed out", unsupported: "Unsupported", error: "error" }[a.status] || a.status;
       badge = \`<span class="badge">\${esc(text)}</span>\`;
     }
     let body = "";
     if (a.status === "ok") {
-      body = a.windows.map(renderWindow).join("");
+      body = renderWindows(a.windows);
       if (a.resetCredits && a.resetCredits.availableCount > 0) {
-        const c = a.resetCredits.credits.find((x) => x.status === "available") || a.resetCredits.credits[0];
-        const exp = c && c.expiresAt ? \` · expires \${new Date(c.expiresAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}\` : "";
         const n = a.resetCredits.availableCount;
-        body += \`<div class="credits">\${n} rate-limit reset\${n === 1 ? "" : "s"} banked\${c && c.title ? \` — \${esc(c.title)}\` : ""}\${exp}</div>\`;
+        const rows = (a.resetCredits.credits || [])
+          .filter((c) => !c.status || c.status === "available")
+          .map((c, i) => {
+            const t = c.expiresAt ? Date.parse(c.expiresAt) : NaN;
+            const day = Number.isFinite(t)
+              ? \`\${new Date(t).getDate()} \${new Date(t).toLocaleDateString(undefined, { month: "short" })}\`
+              : "—";
+            const left = Number.isFinite(t) && t > Date.now() ? fmtDuration(t - Date.now()) : "now";
+            return \`<div class="credits-tip-row"><span class="credits-tip-n">\${i + 1}</span><span class="credits-tip-date">\${esc(day)}</span><span class="credits-tip-left">\${esc(left)}</span></div>\`;
+          });
+        const tip = rows.length ? \`<span class="credits-tip">\${rows.join("")}</span>\` : "";
+        body += \`<div class="credits"><b>Rate Limit Reset</b>
+          <span class="credits-avail" tabindex="0">\${n} available\${tip}</span></div>\`;
       }
     } else {
       body = a.message ? \`<div class="msg">\${rich(a.message)}</div>\` : \`<div class="hint">\${SIGNIN_HINT[provider] || ""}</div>\`;
     }
     return \`<article class="card">
-      <div class="card-head"><div class="label">\${esc(title)}\${sub}\${plan}</div>\${badge}</div>
+      <div class="card-head"><div class="label">\${esc(title)}\${plan}</div>\${badge}</div>
       \${body}
     </article>\`;
   }
 
+  function formatHost(name) {
+    return String(name ?? "").replace(/\\.local$/, "").replace(/[-_]+/g, " ").replace(/\\s+/g, " ").trim();
+  }
+
   function renderPanel() {
+    $("panel").classList.remove("cards");
+    if (!report) {
+      $("panel").innerHTML = \`<div class="empty">Loading…</div>\`;
+      return;
+    }
+    const vis = visibleIds();
+    if (vis.length === 0) {
+      $("panel").innerHTML = \`<div class="empty">No providers enabled.<div class="hint">Open Options to show one, or add an account there.</div></div>\`;
+      return;
+    }
     const p = report?.providers.find((x) => x.id === active);
     const name = PROVIDERS.find(([id]) => id === active)?.[1] || active;
     if (!p) { $("panel").innerHTML = \`<div class="empty">Loading…</div>\`; return; }
     if (!p.installed && p.accounts.length === 0) {
-      $("panel").innerHTML = \`<div class="empty">\${esc(name)} isn't installed on \${esc(report.hostname)}.</div>\`;
+      $("panel").innerHTML = \`<div class="empty">\${esc(name)} isn't installed on \${esc(formatHost(report.hostname))}.</div>\`;
       return;
     }
     if (p.accounts.length === 0) {
       $("panel").innerHTML = \`<div class="empty">No \${esc(name)} accounts.<div class="hint">\${SIGNIN_HINT[active] || ""}</div></div>\`;
       return;
     }
-    $("panel").innerHTML = p.accounts.map((a) => renderCard(a, active)).join("");
+    $("panel").classList.toggle("cards", p.accounts.length > 1);
+    $("panel").innerHTML = p.accounts.map((a, i) => renderCard(a, active, i)).join("");
   }
 
-  function render() {
-    renderTabs();
-    renderPanel();
+  function renderOptions() {
+    const vis = new Set(visibleIds());
+    $("opts-providers").innerHTML = order.map((id) => {
+      const name = PROVIDERS.find(([x]) => x === id)?.[1] || id;
+      return \`<div class="opts-row" data-id="\${id}">
+        <span class="opts-prov"><span class="grip" title="Drag to reorder"></span>\${logo(id)}\${esc(name)}</span>
+        <input class="chk" type="checkbox" data-id="\${id}" \${vis.has(id) ? "checked" : ""}>
+      </div>\`;
+    }).join("");
+    for (const input of $("opts-providers").querySelectorAll("input")) {
+      input.onchange = () => {
+        const next = Object.fromEntries(order.map((id) => [id, vis.has(id)]));
+        next[input.dataset.id] = input.checked;
+        persistEnabled(next);
+      };
+    }
+    const list = $("opts-providers");
+    for (const grip of list.querySelectorAll(".grip")) {
+      grip.onpointerdown = (e) => {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        const row = grip.closest(".opts-row");
+        dragging = true;
+        row.classList.add("dragging");
+        const place = (clientY) => {
+          const others = [...list.querySelectorAll(".opts-row")].filter((r) => r !== row);
+          const before = others.find((r) => {
+            const b = r.getBoundingClientRect();
+            return clientY < b.top + b.height / 2;
+          });
+          if (before) list.insertBefore(row, before);
+          else list.appendChild(row);
+        };
+        const move = (ev) => place(ev.clientY);
+        const stop = () => {
+          document.removeEventListener("pointermove", move);
+          document.removeEventListener("pointerup", stop);
+          document.removeEventListener("pointercancel", stop);
+          dragging = false;
+          row.classList.remove("dragging");
+          const next = [...list.querySelectorAll(".opts-row")].map((r) => r.dataset.id);
+          if (next.join() !== order.join()) persistOrder(next);
+        };
+        document.addEventListener("pointermove", move);
+        document.addEventListener("pointerup", stop);
+        document.addEventListener("pointercancel", stop);
+      };
+    }
+    $("opts-signed-in").hidden = !enabled;
+    for (const input of $("opts-meter").querySelectorAll("input")) {
+      input.checked = (input.value === "left") === showLeft;
+    }
+    $("opts-email").checked = showEmail;
+    renderAccounts();
+  }
+
+  function wizardMsg(text, err) {
+    wizard.msg = text || "";
+    wizard.err = !!err;
+  }
+
+  async function api(path, opts) {
+    const res = await fetch(path, { cache: "no-store", ...opts });
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(body.error || \`HTTP \${res.status}\`);
+    return body;
+  }
+
+  function renderAccounts() {
+    const host = $("opts-accounts");
+    if (!host) return;
+    host.innerHTML = order.map((id) => {
+      const name = PROVIDERS.find(([x]) => x === id)?.[1] || id;
+      const p = report?.providers.find((x) => x.id === id);
+      const rows = (p?.accounts || []).map((a, i) => {
+        const title = accountTitle(a, i);
+        const extra = a.account.kind === "default" ? "from CLI" : a.account.kind;
+        if (renaming === a.account.id) {
+          return \`<div class="acct-row">
+            <span class="acct-rename"><input class="field acct-rename-input" data-id="\${esc(a.account.id)}" value="\${esc(title)}">
+              <button class="refresh acct-rename-save" type="button" data-id="\${esc(a.account.id)}">Save</button></span>
+            <button class="opts-link acct-rename-cancel" type="button">Cancel</button>
+          </div>\`;
+        }
+        const rm = a.account.kind !== "default"
+          ? \`<button class="opts-link acct-remove" type="button" data-id="\${esc(a.account.id)}">Remove</button>\`
+          : "";
+        return \`<div class="acct-row"><span>\${esc(title)}<span class="acct-meta">\${esc(extra)}</span></span>
+          <span class="acct-actions"><button class="opts-link acct-rename-btn" type="button" data-id="\${esc(a.account.id)}">Rename</button>\${rm}</span></div>\`;
+      }).join("") || \`<div class="acct-note">No accounts yet.</div>\`;
+      return \`<div class="acct-group"><div class="acct-head">\${logo(id)}\${esc(name)}</div>\${rows}</div>\`;
+    }).join("");
+    for (const btn of host.querySelectorAll(".acct-rename-btn")) {
+      btn.onclick = () => { renaming = btn.dataset.id; renderAccounts(); };
+    }
+    const cancel = host.querySelector(".acct-rename-cancel");
+    if (cancel) cancel.onclick = () => { renaming = null; renderAccounts(); };
+    const save = host.querySelector(".acct-rename-save");
+    const input = host.querySelector(".acct-rename-input");
+    if (save && input) save.onclick = () => renameAccount(save.dataset.id, input.value);
+    for (const btn of host.querySelectorAll(".acct-remove")) {
+      btn.onclick = () => removeAccount(btn.dataset.id);
+    }
+  }
+
+  function persistAliases() {
+    localStorage.setItem("ju.aliases", JSON.stringify(aliases));
+  }
+
+  async function renameAccount(id, label) {
+    const next = String(label ?? "").trim();
+    renaming = null;
+    if (id.endsWith(":default")) {
+      if (next && next !== "Default") aliases[id] = next;
+      else delete aliases[id];
+      persistAliases();
+      render();
+      return;
+    }
+    try {
+      const body = await api(\`/api/accounts/\${encodeURIComponent(id)}\`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ label: next }),
+      });
+      if (body.account && report) {
+        for (const p of report.providers) {
+          const a = p.accounts.find((x) => x.account.id === id);
+          if (a) a.account.label = body.account.label;
+        }
+      }
+      delete aliases[id];
+      persistAliases();
+    } catch (e) {
+      wizardMsg(e.message, true);
+    }
+    render();
+  }
+
+  function resetWizard() {
+    clearInterval(codexPoll);
+    wizard = { step: "provider", provider: "", label: "", secret: "", sessionId: "", authUrl: "", callback: "", msg: "", err: false };
+  }
+
+  function openWizard() {
+    resetWizard();
+    $("add-acct").showModal();
+    renderWizard();
+  }
+
+  function closeWizard() {
+    $("add-acct").close();
+    resetWizard();
+  }
+
+  function renderWizard() {
+    const dlg = $("add-acct");
+    if (!dlg.open) return;
+    const name = PROVIDERS.find(([id]) => id === wizard.provider)?.[1] || "account";
+    $("add-acct-title").textContent = wizard.step === "provider" ? "Add account" : \`Add \${name}\`;
+    let body = "";
+    if (wizard.step === "provider") {
+      body = \`<div class="pick">
+          <button class="pick-btn" type="button" data-id="claude">\${logo("claude")} Claude</button>
+          <button class="pick-btn" type="button" data-id="codex">\${logo("codex")} Codex</button>
+          <button class="pick-btn" type="button" data-id="opencode">\${logo("opencode")} OpenCode Go</button>
+        </div>
+        <div class="acct-note">One Cursor account for now — whatever <code>cursor-agent</code> is signed in as.</div>\`;
+    } else if (wizard.step === "label") {
+      body = \`<div class="acct-note">Optional. Leave blank to show as Account 2, Account 3, …</div>
+        <input class="field" id="wiz-label" placeholder="Label (optional)" value="\${esc(wizard.label)}">
+        <div class="acct-actions"><button class="opts-link" id="wiz-back" type="button">Back</button>
+          <button class="refresh" id="wiz-next" type="button">Continue</button></div>\`;
+    } else if (wizard.provider === "codex") {
+      body = \`<div class="acct-note">Sign in with ChatGPT. If you are not on this machine, paste the localhost callback after the redirect.</div>
+        \${wizard.authUrl ? \`<div class="acct-url">Open <a href="\${esc(wizard.authUrl)}" target="_blank" rel="noreferrer">this sign-in URL</a></div>
+          <input class="field" id="wiz-callback" placeholder="http://localhost:… callback" value="\${esc(wizard.callback)}">
+          <button class="refresh" id="wiz-callback-go" type="button">Submit callback</button>\` 
+          : \`<button class="refresh" id="wiz-codex" type="button">Sign in with ChatGPT</button>\`}
+        <button class="opts-link" id="wiz-back" type="button">Back</button>\`;
+    } else {
+      const ph = wizard.provider === "claude" ? "Setup token from <code>claude setup-token</code>" : "OpenCode Go API key";
+      body = \`<div class="acct-note">\${ph}.</div>
+        <input class="field" id="wiz-secret" type="password" placeholder="\${wizard.provider === "claude" ? "Setup token" : "API key"}" value="\${esc(wizard.secret)}" autocomplete="off">
+        <div class="acct-actions"><button class="opts-link" id="wiz-back" type="button">Back</button>
+          <button class="refresh" id="wiz-save" type="button">Add</button></div>\`;
+    }
+    if (wizard.msg) body += \`<div class="acct-msg\${wizard.err ? " err" : ""}">\${esc(wizard.msg)}</div>\`;
+    $("add-acct-body").innerHTML = body;
+    for (const btn of dlg.querySelectorAll(".pick-btn")) {
+      btn.onclick = () => { wizard.provider = btn.dataset.id; wizard.step = "label"; renderWizard(); };
+    }
+    const label = $("wiz-label");
+    if (label) label.oninput = () => { wizard.label = label.value; };
+    const secret = $("wiz-secret");
+    if (secret) secret.oninput = () => { wizard.secret = secret.value; };
+    const cb = $("wiz-callback");
+    if (cb) cb.oninput = () => { wizard.callback = cb.value; };
+    const back = $("wiz-back");
+    if (back) back.onclick = () => {
+      wizard.msg = "";
+      wizard.step = wizard.step === "auth" ? "label" : "provider";
+      if (wizard.step === "provider") wizard.provider = "";
+      renderWizard();
+    };
+    const next = $("wiz-next");
+    if (next) next.onclick = () => { wizard.step = "auth"; wizard.msg = ""; renderWizard(); };
+    const save = $("wiz-save");
+    if (save) save.onclick = addToken;
+    const start = $("wiz-codex");
+    if (start) start.onclick = startCodex;
+    const submit = $("wiz-callback-go");
+    if (submit) submit.onclick = submitCodexCallback;
+  }
+
+  async function addToken() {
+    if (busy) return;
+    if (!wizard.secret.trim()) { wizardMsg("Paste a token or key first.", true); renderWizard(); return; }
+    busy = true;
+    wizardMsg("Adding…", false);
+    renderWizard();
+    try {
+      const body = await api("/api/accounts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider: wizard.provider, label: wizard.label, secret: wizard.secret }),
+      });
+      closeWizard();
+      if (body.warning) wizardMsg(body.warning, false);
+      await load(true);
+    } catch (e) {
+      wizardMsg(e.message, true);
+    } finally {
+      busy = false;
+      if ($("add-acct").open) renderWizard();
+    }
+  }
+
+  async function startCodex() {
+    if (busy) return;
+    const popup = window.open("about:blank", "_blank");
+    busy = true;
+    wizardMsg("Starting sign-in…", false);
+    renderWizard();
+    try {
+      const body = await api("/api/accounts/codex/start", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ label: wizard.label }),
+      });
+      wizard.sessionId = body.sessionId;
+      wizard.authUrl = body.authUrl;
+      if (body.authUrl) {
+        if (popup) popup.location.replace(body.authUrl);
+        else window.location.assign(body.authUrl);
+      } else {
+        popup?.close();
+      }
+      wizardMsg("Waiting for sign-in…", false);
+      pollCodex();
+    } catch (e) {
+      popup?.close();
+      wizardMsg(e.message, true);
+    } finally {
+      busy = false;
+      renderWizard();
+    }
+  }
+
+  async function submitCodexCallback() {
+    if (!wizard.sessionId) return;
+    try {
+      await api("/api/accounts/codex/callback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId: wizard.sessionId, url: wizard.callback }),
+      });
+      wizardMsg("Callback submitted. Waiting for Codex…", false);
+      renderWizard();
+      pollCodex();
+    } catch (e) {
+      wizardMsg(e.message, true);
+      renderWizard();
+    }
+  }
+
+  function pollCodex() {
+    clearInterval(codexPoll);
+    if (!wizard.sessionId) return;
+    const tick = async () => {
+      try {
+        const body = await api(\`/api/accounts/codex/session/\${encodeURIComponent(wizard.sessionId)}\`);
+        if (body.status === "done") {
+          clearInterval(codexPoll);
+          closeWizard();
+          await load(true);
+        } else if (body.status === "error") {
+          clearInterval(codexPoll);
+          wizardMsg(body.error || "Sign-in failed.", true);
+          wizard.sessionId = "";
+          renderWizard();
+        }
+      } catch {}
+    };
+    tick();
+    codexPoll = setInterval(tick, 2000);
+  }
+
+  async function removeAccount(id) {
+    if (busy) return;
+    busy = true;
+    try {
+      await api(\`/api/accounts/\${encodeURIComponent(id)}\`, { method: "DELETE" });
+      await load(true);
+    } catch (e) {
+      wizardMsg(e.message, true);
+    } finally {
+      busy = false;
+      renderAccounts();
+    }
+  }
+
+  function renderSettings() {
+    if (!dragging) renderOptions();
+  }
+
+  function renderChrome() {
     if (report) {
-      $("host").textContent = report.hostname;
-      $("updated").textContent = loading ? "refreshing…" : \`updated \${fmtTime(report.fetchedAt)}\`;
+      $("host").textContent = formatHost(report.hostname);
+      $("updated").textContent = \`updated \${fmtAgo(report.fetchedAt)}\`;
       $("version").textContent = \`v\${report.version}\`;
       const u = report.update;
       $("update").innerHTML = u && u.available
         ? \`<span class="update">v\${esc(u.latest)} available — run <code>just-usage upgrade</code></span>\`
-        : \`<kbd>1</kbd>–<kbd>4</kbd> switch tabs · <kbd>r</kbd> refresh\`;
+        : "";
+    }
+    const locked = refreshLocked();
+    $("refresh").disabled = loading || locked;
+    $("refresh").textContent = loading ? "Refreshing…" : locked ? refreshLabel() : "Refresh data";
+    $("opts-label").textContent = settingsOpen ? "Back" : "Options";
+    $("opts-btn").classList.toggle("back", settingsOpen);
+  }
+
+  function render() {
+    ensureActive();
+    $("dash").hidden = settingsOpen;
+    $("settings").hidden = !settingsOpen;
+    if (settingsOpen) renderSettings();
+    else {
+      renderTabs();
+      renderPanel();
+    }
+    renderChrome();
+  }
+
+  function adoptReport(next) {
+    if (report) {
+      for (const p of next.providers || []) {
+        const prev = report.providers.find((x) => x.id === p.id);
+        for (const a of p.accounts || []) {
+          const old = prev?.accounts.find((x) => x.account.id === a.account.id);
+          if (!a.account.email && old?.account.email) a.account.email = old.account.email;
+          if (!a.account.plan && old?.account.plan) a.account.plan = old.account.plan;
+        }
+      }
     }
-    $("refresh").disabled = loading;
+    report = next;
+    try { localStorage.setItem("ju.report", JSON.stringify(next)); } catch {}
+  }
+
+  const COOLDOWN_MS = 5 * 60 * 1000;
+  function refreshUntil() {
+    return Number(localStorage.getItem("ju.refreshAt") || 0) + COOLDOWN_MS;
+  }
+  function refreshLocked() {
+    return Date.now() < refreshUntil();
+  }
+  function refreshLabel() {
+    const left = refreshUntil() - Date.now();
+    if (left <= 0) return "Refresh data";
+    const min = Math.max(1, Math.ceil(left / 60000));
+    return \`Refresh in \${min}m\`;
+  }
+  function markRefreshed() {
+    localStorage.setItem("ju.refreshAt", String(Date.now()));
   }
 
-  async function load(force) {
+  async function load(force, manual) {
+    if (manual && refreshLocked()) return;
+    if (manual) markRefreshed();
     loading = true;
     render();
     try {
       const res = await fetch(\`/api/quotas\${force ? "?refresh=1" : ""}\`, { cache: "no-store" });
-      report = await res.json();
+      adoptReport(await res.json());
     } catch (e) {
-      $("panel").innerHTML = \`<div class="empty">Couldn't reach just-usage. Is the server still running?</div>\`;
+      if (!report) $("panel").innerHTML = \`<div class="empty">Couldn't reach just-usage. Is the server still running?</div>\`;
     } finally {
       loading = false;
       render();
     }
   }
 
-  $("refresh").onclick = () => load(true);
+  $("opts-btn").onclick = () => setView(!settingsOpen);
+  $("refresh").onclick = () => load(true, true);
+  $("opts-signed-in").onclick = () => persistEnabled(null);
+  $("opts-email").onchange = () => {
+    showEmail = $("opts-email").checked;
+    localStorage.setItem("ju.showEmail", showEmail ? "1" : "0");
+    if (settingsOpen) renderAccounts();
+    else render();
+  };
+  $("acct-add").onclick = openWizard;
+  $("add-acct-close").onclick = closeWizard;
+  $("add-acct").addEventListener("close", resetWizard);
+  $("add-acct").addEventListener("click", (e) => { if (e.target === $("add-acct")) closeWizard(); });
+  for (const input of $("opts-meter").querySelectorAll("input")) {
+    input.onchange = () => {
+      showLeft = input.value === "left";
+      localStorage.setItem("ju.showLeft", showLeft ? "1" : "0");
+      if (!settingsOpen) render();
+    };
+  }
   document.addEventListener("keydown", (e) => {
     if (e.metaKey || e.ctrlKey || e.altKey) return;
-    if (e.key >= "1" && e.key <= "4") { active = PROVIDERS[Number(e.key) - 1][0]; localStorage.setItem("ju.tab", active); render(); }
-    else if (e.key === "r") load(true);
+    if (settingsOpen) return;
+    const vis = visibleIds();
+    if (e.key >= "1" && e.key <= String(vis.length)) {
+      active = vis[Number(e.key) - 1];
+      localStorage.setItem("ju.tab", active);
+      render();
+    } else if (e.key === "r") load(true, true);
   });
-  setInterval(() => { if (report && !loading) render(); }, 30000);
+  const STALE_MS = 5 * 60 * 1000;
+  function maybeAutoRefresh() {
+    if (!report || loading || settingsOpen) return;
+    const t = Date.parse(report.fetchedAt);
+    if (Number.isFinite(t) && Date.now() - t >= STALE_MS) load(true);
+  }
+  setInterval(() => {
+    maybeAutoRefresh();
+    if (!report || loading) return;
+    if (settingsOpen) renderChrome();
+    else render();
+  }, 15000);
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") maybeAutoRefresh();
+  });
+  if (report) render();
   load(false);
 })();
 </script>
@@ -1469,7 +2516,41 @@ var ui_default = `<!doctype html>
 </html>
 `;
 
+// src/ui/logos/claude.svg
+var claude_default = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ececec" role="img">
+  <title>Claude</title>
+  <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"/>
+</svg>
+`;
+
+// src/ui/logos/codex.svg
+var codex_default = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ececec" role="img">
+  <title>Codex</title>
+  <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>
+</svg>
+`;
+
+// src/ui/logos/cursor.svg
+var cursor_default = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ececec" role="img">
+  <title>Cursor</title>
+  <path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23"/>
+</svg>
+`;
+
+// src/ui/logos/opencode.svg
+var opencode_default = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ececec" fill-rule="evenodd" role="img">
+  <title>OpenCode</title>
+  <path d="M22 24H2V0h20zM17 4.8H7v14.4h10z"/>
+</svg>
+`;
+
 // src/server.ts
+var LOGOS = {
+  claude: claude_default,
+  codex: codex_default,
+  cursor: cursor_default,
+  opencode: opencode_default
+};
 function json(res, status, body) {
   const text = JSON.stringify(body);
   res.writeHead(status, {
@@ -1479,33 +2560,134 @@ function json(res, status, body) {
   });
   res.end(text);
 }
-function startServer(opts) {
+function readBody(req, limit = 64000) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let n = 0;
+    req.on("data", (c) => {
+      n += c.length;
+      if (n > limit) {
+        req.destroy();
+        reject(new AccountError("Request body too large."));
+        return;
+      }
+      chunks.push(c);
+    });
+    req.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
+    req.on("error", reject);
+  });
+}
+async function readJson(req) {
+  const text = await readBody(req);
+  if (!text.trim())
+    return {};
+  const parsed = JSON.parse(text);
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+    throw new AccountError("Expected a JSON object.");
+  return parsed;
+}
+function str(v) {
+  return typeof v === "string" ? v : "";
+}
+async function startServer(opts) {
   const cache = new ReportCache(CACHE_TTL_MS, opts.getUpdate);
   cache.get(true).catch(() => {});
+  const tailscaleIp = await detectTailscaleIp();
+  const mutated = async (work) => {
+    const out = await work();
+    cache.invalidate();
+    return out;
+  };
   const handler = async (req, res) => {
     const url = new URL(req.url ?? "/", "http://localhost");
     res.setHeader("X-Content-Type-Options", "nosniff");
     try {
-      if (req.method !== "GET" && req.method !== "HEAD") {
-        json(res, 405, { error: "method not allowed" });
-        return;
-      }
-      if (url.pathname === "/") {
+      const method = req.method ?? "GET";
+      if (url.pathname === "/" && (method === "GET" || method === "HEAD")) {
         res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" });
         res.end(ui_default);
         return;
       }
-      if (url.pathname === "/api/quotas") {
+      const logo = url.pathname.match(/^\/logos\/([a-z]+)\.svg$/);
+      if (logo && (method === "GET" || method === "HEAD")) {
+        const svg = LOGOS[logo[1]];
+        if (!svg) {
+          json(res, 404, { error: "not found" });
+          return;
+        }
+        res.writeHead(200, { "Content-Type": "image/svg+xml; charset=utf-8", "Cache-Control": "public, max-age=86400" });
+        res.end(svg);
+        return;
+      }
+      if (url.pathname === "/api/quotas" && (method === "GET" || method === "HEAD")) {
         const force = url.searchParams.get("refresh") === "1";
         json(res, 200, await cache.get(force));
         return;
       }
-      if (url.pathname === "/api/health") {
+      if (url.pathname === "/api/health" && (method === "GET" || method === "HEAD")) {
         json(res, 200, { ok: true, version: VERSION });
         return;
       }
+      if (url.pathname === "/api/accounts" && method === "POST") {
+        const body = await readJson(req);
+        const provider = str(body.provider);
+        const label = str(body.label) || undefined;
+        const secret = str(body.secret);
+        if (provider === "claude") {
+          json(res, 200, await mutated(() => addClaudeToken(secret, label)));
+          return;
+        }
+        if (provider === "opencode") {
+          json(res, 200, await mutated(() => addOpenCodeKey(secret, label)));
+          return;
+        }
+        json(res, 400, { error: "Add Claude with a setup-token, OpenCode with an API key, or start a Codex sign-in." });
+        return;
+      }
+      if (url.pathname === "/api/accounts/codex/start" && method === "POST") {
+        const body = await readJson(req);
+        const accountId = str(body.accountId);
+        json(res, 200, accountId ? await beginCodexRelogin(accountId) : await beginCodexAdd(str(body.label) || undefined));
+        return;
+      }
+      if (url.pathname === "/api/accounts/codex/callback" && method === "POST") {
+        const body = await readJson(req);
+        await submitCodexCallback(str(body.sessionId), str(body.url));
+        json(res, 200, { ok: true });
+        return;
+      }
+      const session = url.pathname.match(/^\/api\/accounts\/codex\/session\/([^/]+)$/);
+      if (session && (method === "GET" || method === "HEAD")) {
+        const state = codexSessionStatus(decodeURIComponent(session[1]));
+        if (state.status === "done")
+          cache.invalidate();
+        json(res, 200, state);
+        return;
+      }
+      const remove = url.pathname.match(/^\/api\/accounts\/([^/]+)$/);
+      if (remove && method === "PATCH") {
+        const body = await readJson(req);
+        json(res, 200, { account: await mutated(async () => renameExtraAccount(decodeURIComponent(remove[1]), str(body.label))) });
+        return;
+      }
+      if (remove && method === "DELETE") {
+        json(res, 200, { account: await mutated(() => removeExtraAccount(decodeURIComponent(remove[1]))) });
+        return;
+      }
+      if (method !== "GET" && method !== "HEAD" && method !== "POST" && method !== "DELETE" && method !== "PATCH") {
+        json(res, 405, { error: "method not allowed" });
+        return;
+      }
       json(res, 404, { error: "not found" });
     } catch (e) {
+      if (e instanceof AccountError) {
+        json(res, e.status, { error: e.message });
+        return;
+      }
+      if (e instanceof SyntaxError) {
+        json(res, 400, { error: "Invalid JSON." });
+        return;
+      }
       json(res, 500, { error: e instanceof Error ? e.message : String(e) });
     }
   };
@@ -1513,7 +2695,7 @@ function startServer(opts) {
   return new Promise((resolve, reject) => {
     server.once("error", reject);
     server.listen(opts.port, opts.host, () => {
-      resolve({ close: () => server.close(), urls: reachableUrls(opts.host, opts.port) });
+      resolve({ close: () => server.close(), urls: reachableUrls(opts.host, opts.port, tailscaleIp) });
     });
   });
 }
@@ -1521,22 +2703,49 @@ function isTailscale(ip) {
   const [a, b] = ip.split(".").map(Number);
   return a === 100 && b !== undefined && b >= 64 && b <= 127;
 }
-function reachableUrls(host, port) {
-  if (host !== "0.0.0.0" && host !== "::")
-    return [`http://${host === "::1" ? "localhost" : host}:${port}`];
-  const urls = [`http://127.0.0.1:${port}`];
+var TAILSCALE_NOTE = "Tailscale only. Not same-Wi-Fi. Other devices need Tailscale too.";
+async function detectTailscaleIp() {
+  const res = await run("tailscale", ["status", "--json"], { timeoutMs: 4000 });
+  if (res.code !== 0)
+    return null;
+  try {
+    const body = JSON.parse(res.stdout);
+    if (body.BackendState !== "Running")
+      return null;
+    const ips = body.Self?.TailscaleIPs ?? body.TailscaleIPs;
+    if (!Array.isArray(ips))
+      return null;
+    for (const ip of ips) {
+      if (typeof ip === "string" && isTailscale(ip))
+        return ip;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function reachableUrls(host, port, tailscaleIp = null) {
+  if (host !== "0.0.0.0" && host !== "::") {
+    return [{ kind: "local", url: `http://${host === "::1" ? "localhost" : host}:${port}` }];
+  }
+  const urls = [{ kind: "local", url: `http://127.0.0.1:${port}` }];
   const shortHost = hostname2().replace(/\.local$/, "").toLowerCase();
   if (shortHost)
-    urls.push(`http://${shortHost}:${port}`);
-  const seen = new Set;
+    urls.push({ kind: "network", url: `http://${shortHost}:${port}` });
+  const seen = new Set(tailscaleIp ? [tailscaleIp] : []);
   for (const list of Object.values(networkInterfaces())) {
     for (const iface of list ?? []) {
       if (iface.family !== "IPv4" || iface.internal || seen.has(iface.address))
         continue;
+      if (isTailscale(iface.address))
+        continue;
       seen.add(iface.address);
-      urls.push(`http://${iface.address}:${port}${isTailscale(iface.address) ? "  (tailscale)" : ""}`);
+      urls.push({ kind: "network", url: `http://${iface.address}:${port}` });
     }
   }
+  if (tailscaleIp) {
+    urls.push({ kind: "tailscale", url: `http://${tailscaleIp}:${port}`, note: TAILSCALE_NOTE });
+  }
   return urls;
 }
 
@@ -1559,7 +2768,7 @@ function bar(used, width = 20) {
 function pct(used) {
   if (used === null)
     return "  —  ";
-  const s = `${String(Math.round(used)).padStart(3)}%`;
+  const s = formatPercent(used).padStart(5);
   const sev = severity(used);
   return sev === "crit" ? c.red(s) : sev === "warn" ? c.yellow(s) : s;
 }
@@ -1614,10 +2823,10 @@ function readCache() {
   } catch {}
   return null;
 }
-function writeCache(c2) {
+function writeCache(c) {
   try {
     ensureDir(dirname3(paths.updateCache()));
-    writeFileSync3(paths.updateCache(), JSON.stringify(c2) + `
+    writeFileSync3(paths.updateCache(), JSON.stringify(c) + `
 `);
   } catch {}
 }
@@ -1668,8 +2877,8 @@ async function checkForUpdate(force = false) {
   writeCache(entry);
   return toInfo(entry);
 }
-function toInfo(c2) {
-  return { current: VERSION, latest: c2.latest, available: semverGt(c2.latest, VERSION), checkedAt: c2.checkedAt };
+function toInfo(c) {
+  return { current: VERSION, latest: c.latest, available: semverGt(c.latest, VERSION), checkedAt: c.checkedAt };
 }
 function detectPackageManager(argv1 = process.argv[1] ?? "", execPath = process.execPath) {
   const p = argv1.replace(/\\/g, "/");
@@ -1790,12 +2999,14 @@ Update available: v${u.current} → v${u.latest}. Run: just-usage upgrade
     throw e;
   }
   console.log(`${PACKAGE_NAME} v${VERSION}`);
-  for (const [i, url] of server.urls.entries())
-    console.log(`  ${i === 0 ? "local   " : "network "} ${url}`);
+  for (const u of server.urls) {
+    const tag = u.kind === "local" ? "local    " : u.kind === "tailscale" ? "tailscale" : "network  ";
+    console.log(`  ${tag} ${u.url}${u.note ? ` — ${u.note}` : ""}`);
+  }
   console.log(`
 Press Ctrl+C to stop.`);
   if (shouldOpen)
-    openInBrowser(server.urls[0]);
+    openInBrowser(server.urls[0].url);
   const shutdown = () => {
     server.close();
     process.exit(0);
@@ -1841,30 +3052,18 @@ ${url}
 `);
     openInBrowser(url);
   });
-  const finalLabel = label ?? info.email ?? tmpId.split(":")[1];
-  const id = label ? tmpId : newAccountId("codex", finalLabel);
-  const path = id === tmpId ? dir : ensureDir(profileDirFor("codex", id));
-  if (path !== dir) {
-    const { renameSync, rmSync: rmSync2 } = await import("node:fs");
-    rmSync2(path, { recursive: true, force: true });
-    renameSync(dir, path);
-  }
-  saveAccount({ id, provider: "codex", label: finalLabel, kind: "profile", path, email: info.email, createdAt: new Date().toISOString() });
-  console.log(`Added ${id}${info.email ? ` (${info.email}${info.plan ? `, ${info.plan}` : ""})` : ""}.`);
+  const rec = saveCodexProfile({ label, tmpId, dir, email: info.email });
+  console.log(`Added ${rec.id}${info.email ? ` (${info.email}${info.plan ? `, ${info.plan}` : ""})` : ""}.`);
 }
-async function addClaudeToken(label) {
+async function addClaudeTokenCli(label) {
   console.log("Run `claude setup-token` in the account you want to add, then paste the token here.");
   const token = await prompt("Token: ", { secret: true });
-  if (!token)
-    fail("No token given.");
-  const check = await verifyClaudeToken(token);
-  if (!check.ok)
-    fail(`Token check failed: ${check.message}`);
-  const finalLabel = label ?? check.email ?? "token";
-  const id = newAccountId("claude", finalLabel);
-  await secretStore().set(id, token);
-  saveAccount({ id, provider: "claude", label: finalLabel, kind: "token", email: check.email, createdAt: new Date().toISOString() });
-  console.log(`Added ${id}${check.email ? ` (${check.email})` : ""}. Token stored in ${secretStore().kind}.`);
+  try {
+    const { account } = await addClaudeToken(token, label);
+    console.log(`Added ${account.id}${account.email ? ` (${account.email})` : ""}.`);
+  } catch (e) {
+    fail(e instanceof Error ? e.message : String(e));
+  }
 }
 async function addClaudeProfile(label) {
   if (!await which("claude"))
@@ -1876,31 +3075,25 @@ async function addClaudeProfile(label) {
   await runInteractive("claude", ["auth", "login"], { CLAUDE_CONFIG_DIR: dir });
   const status = await claudeAuthStatus(dir);
   if (!status?.loggedIn) {
-    const { rmSync: rmSync2 } = await import("node:fs");
-    rmSync2(dir, { recursive: true, force: true });
+    const { rmSync } = await import("node:fs");
+    rmSync(dir, { recursive: true, force: true });
     fail("Login did not complete; nothing was saved.");
   }
   saveAccount({ id, provider: "claude", label: label ?? id.split(":")[1], kind: "profile", path: dir, email: null, createdAt: new Date().toISOString() });
   console.log(`
 Added ${id}. Note: on macOS the first read may trigger a Keychain prompt — choose "Always Allow".`);
 }
-async function addOpenCode(label) {
+async function addOpenCodeCli(label) {
   console.log("Paste an OpenCode Go API key (from https://opencode.ai/ → Go → API keys).");
   const key = await prompt("Key: ", { secret: true });
-  if (!key)
-    fail("No key given.");
-  const { status, windows } = await fetchOpenCodeUsage(key);
-  if (status === 401)
-    fail("Key rejected (401).");
-  if (status === 403)
-    console.log("Warning: key is valid but has no active OpenCode Go subscription (403). Saving anyway.");
-  else if (status !== 200)
-    fail(`Usage endpoint returned HTTP ${status}.`);
-  const finalLabel = label ?? "go";
-  const id = newAccountId("opencode", finalLabel);
-  await secretStore().set(id, key);
-  saveAccount({ id, provider: "opencode", label: finalLabel, kind: "token", createdAt: new Date().toISOString() });
-  console.log(`Added ${id}${windows.length ? ` (${windows.map((w) => `${w.label} ${w.usedPercent}%`).join(", ")})` : ""}. Key stored in ${secretStore().kind}.`);
+  try {
+    const { account, warning } = await addOpenCodeKey(key, label);
+    if (warning)
+      console.log(`Warning: ${warning} Saving anyway.`);
+    console.log(`Added ${account.id}.`);
+  } catch (e) {
+    fail(e instanceof Error ? e.message : String(e));
+  }
 }
 async function cmdAdd(argv) {
   const { values, positionals } = parseArgs({
@@ -1915,9 +3108,9 @@ async function cmdAdd(argv) {
     case "codex":
       return addCodex(values.label);
     case "claude":
-      return values.token ? addClaudeToken(values.label) : addClaudeProfile(values.label);
+      return values.token ? addClaudeTokenCli(values.label) : addClaudeProfile(values.label);
     case "opencode":
-      return addOpenCode(values.label);
+      return addOpenCodeCli(values.label);
     case "cursor":
       fail("Cursor is single-account: just-usage shows whatever `cursor-agent` is logged in as.");
   }
@@ -1955,12 +3148,12 @@ async function cmdRemove(argv) {
     fail("Usage: just-usage remove <account-id>");
   if (id.endsWith(":default"))
     fail("Default accounts belong to the CLI itself; sign out there instead.");
-  const rec = deleteAccount(id);
-  if (!rec)
-    fail(`Unknown account: ${id}`);
-  if (rec.kind === "token")
-    await secretStore().delete(id);
-  console.log(`Removed ${id}.`);
+  try {
+    const rec = await removeExtraAccount(id);
+    console.log(`Removed ${rec.id}.`);
+  } catch (e) {
+    fail(e instanceof Error ? e.message : String(e));
+  }
 }
 async function cmdUpgrade(argv) {
   const { values } = parseArgs({ args: argv, options: { check: { type: "boolean" }, yes: { type: "boolean", short: "y" } }, allowPositionals: true, strict: false });