@hienlh/ppm 0.19.12 → 0.20.1

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

@@ -11,12 +11,19 @@
  * An expired account (past `expiresAt` AND no refresh token) is dimmed and loses every
  * control except delete — toggling or exporting a token the server can no longer renew only
  * produces confusing failures.
+ *
+ * The footer states what the user can act on and nothing else. It deliberately no longer
+ * counts down the access token: that number renews itself every few hours, no one can do
+ * anything about it, and it is what made two revoked accounts look healthy for six days
+ * while every turn on them failed. The sign-in deadline replaced it.
  */
 
-import { Download, Eye, Trash2 } from "lucide-react";
+import { Download, Eye, KeyRound, RefreshCw, Trash2 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { AccountInfo, AccountUsageEntry, OAuthProfileData } from "../../../lib/api-settings";
 import { AccountBucketRow } from "./account-bucket-row";
+import { AccountHint } from "./account-hint";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AccountCardShell } from "./accounts-pane-header";
 import { formatExpiry, formatLastUpdated, tokenStatus } from "./account-usage-format";
 
@@ -31,6 +38,16 @@ export interface AccountCardProps {
   onViewProfile?: (profile: OAuthProfileData, accountId: string) => void;
   /** Brief highlight when this account's usage numbers just changed. */
   flash?: boolean;
+  /**
+   * Move the current chat session onto this account. Omitted in Settings, where a card
+   * manages an account rather than routing a conversation to it — leaving it out is what
+   * keeps that screen behaving exactly as before.
+   */
+  onSelect?: (id: string) => void;
+  /** Why this account cannot be selected. Present means the choice is refused, and says so. */
+  unselectableReason?: string | null;
+  /** A selection is in flight for this card. */
+  selecting?: boolean;
   /** `list` fills the width, `strip` is a fixed-width card in a sideways scroller, `grid`
    *  fills a cell of the fullscreen grid. */
   layout?: "list" | "strip" | "grid";
@@ -43,6 +60,7 @@ const STRIP_WIDTH = { readOnly: "min-w-[220px]", withActions: "min-w-[300px]" }
 
 export function AccountCard({
   entry, isActive, accountInfo, onToggle, toggling, onDelete, onExport, onViewProfile, flash,
+  onSelect, unselectableReason, selecting,
   layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
@@ -53,7 +71,32 @@ export function AccountCard({
     && accountInfo.expiresAt < Math.floor(Date.now() / 1000)
   );
   const ts = tokenStatus(accountInfo);
+  // Distinct from isExpired: this account still holds a refresh token, it is just one the
+  // server will not honour. Dim it like an expired card, but keep every control — signing
+  // in again goes through the same add flow, and delete has to stay reachable.
+  const needsReauth = !!accountInfo?.reauthRequired;
+  // A sign-in dies on a fixed schedule regardless of use, so the warning has to lead the
+  // last stretch of it rather than appear once it is already too late.
+  const grantExpiresAtMs = accountInfo?.grantExpiresAt ? accountInfo.grantExpiresAt * 1000 : null;
+  const grantEndingSoon = !!grantExpiresAtMs && grantExpiresAtMs - Date.now() < 5 * 86_400_000;
+  // The header already badges Expired, Sign in again and API key, and "long-lived" only
+  // restates what the sign-in chip beside it implies. That leaves the two states nothing
+  // else announces: a temporary token with no way to renew, and one that has lapsed but
+  // still has a refresh token behind it.
+  const showTokenStatus = ts.label === "temp" || ts.label === "unknown"
+    || (ts.label === "expired" && !isExpired && !needsReauth);
+  const grantExpiresOn = grantExpiresAtMs
+    ? new Date(grantExpiresAtMs).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })
+    : null;
   const hasActions = Boolean(onToggle || onDelete || onExport || onViewProfile);
+  // Every state that already dims this card also refuses the chat to it. `needsReauth` is
+  // the one worth naming separately: the token is present and unexpired, so nothing else
+  // here looks wrong, but the server has rejected it and no turn can run on it.
+  const refusedReason = isExpired
+    ? "Token expired — sign in again"
+    : needsReauth
+      ? "Sign in again to use this account"
+      : unselectableReason ?? null;
 
   const layoutClass = layout === "list"
     ? ""
@@ -67,7 +110,7 @@ export function AccountCard({
       active={isActive}
       flash={flash}
       dense={layout !== "list"}
-      className={[layoutClass, isExpired ? "opacity-50" : ""].filter(Boolean).join(" ") || undefined}
+      className={[layoutClass, isExpired || needsReauth ? "opacity-50" : ""].filter(Boolean).join(" ") || undefined}
       data-testid="account-card"
       data-account-id={entry.accountId}
     >
@@ -75,32 +118,90 @@ export function AccountCard({
         <span className="text-sm font-medium truncate flex-1 min-w-0">
           {entry.accountLabel ?? entry.accountId.slice(0, 8)}
         </span>
-        {isActive && <span className="text-[10px] text-primary shrink-0 font-medium">Active</span>}
-        {isExpired && <span className="text-[10px] text-error shrink-0 font-medium">Expired</span>}
+        {isActive && (
+          <AccountHint className="text-[10px] text-primary shrink-0 font-medium" hint="The next turn will run on this account.">
+            Active
+          </AccountHint>
+        )}
+        {/* Occupies the slot the "Active" badge would, so a card is the same height whether
+            it is the one serving or one you could switch to. A row of its own below cost
+            every card that height, including the ones whose button did nothing. */}
+        {onSelect && !isActive && (
+          // Shown even when the account cannot serve, and clicking it then reports why.
+          // Hiding it instead left a blank where the other cards have a control, which reads
+          // as a missing feature rather than as a refusal with a reason behind it.
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={() => onSelect(entry.accountId)}
+                disabled={selecting}
+                className={[
+                  "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors cursor-pointer disabled:cursor-wait",
+                  refusedReason
+                    ? "text-text-subtle hover:text-error hover:bg-error/10"
+                    : "text-text-secondary hover:text-foreground hover:bg-surface-elevated",
+                ].join(" ")}
+              >
+                {selecting ? "Switching…" : "Use"}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">{refusedReason ?? "Use this account for this chat"}</TooltipContent>
+          </Tooltip>
+        )}
+        {isExpired && (
+          <AccountHint
+            className="text-[10px] text-error shrink-0 font-medium"
+            hint="This token has expired and carries no refresh token, so nothing can renew it. Add the account again."
+          >
+            Expired
+          </AccountHint>
+        )}
+        {needsReauth && !isExpired && (
+          <AccountHint
+            className="text-[10px] text-error shrink-0 font-medium"
+            hint="Anthropic rejected this account's refresh token, so no turn can run on it. Signing in again is the only thing that restores it."
+          >
+            Sign in again
+          </AccountHint>
+        )}
         {!entry.isOAuth && !isExpired && (
-          <span className="text-[10px] text-text-subtle shrink-0">API key</span>
+          <AccountHint
+            className="text-[10px] text-text-subtle shrink-0"
+            hint="A static API key rather than a sign-in: nothing to expire and nothing to renew."
+          >
+            API key
+          </AccountHint>
         )}
 
         <div className="flex items-center gap-0.5 shrink-0">
           {!isExpired && onViewProfile && accountInfo?.profileData && (
-            <button
-              className="p-2 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
-              onClick={() => onViewProfile(accountInfo.profileData!, entry.accountId)}
-              title="View profile"
-              aria-label="View profile"
-            >
-              <Eye className="size-4" />
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className="p-2 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
+                  onClick={() => onViewProfile(accountInfo.profileData!, entry.accountId)}
+                  aria-label="View profile"
+                >
+                  <Eye className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">View profile</TooltipContent>
+            </Tooltip>
           )}
           {!isExpired && onExport && entry.isOAuth && (
-            <button
-              className="p-2 rounded cursor-pointer text-text-subtle hover:text-primary hover:bg-surface-elevated transition-colors"
-              onClick={() => onExport(entry.accountId)}
-              title="Export this account"
-              aria-label="Export this account"
-            >
-              <Download className="size-4" />
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className="p-2 rounded cursor-pointer text-text-subtle hover:text-primary hover:bg-surface-elevated transition-colors"
+                  onClick={() => onExport(entry.accountId)}
+                  aria-label="Export this account"
+                >
+                  <Download className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">Export this account</TooltipContent>
+            </Tooltip>
           )}
           {!isExpired && onToggle && (
             <Switch
@@ -112,14 +213,18 @@ export function AccountCard({
             />
           )}
           {onDelete && (
-            <button
-              className="p-2 rounded cursor-pointer text-text-subtle hover:text-error hover:bg-surface-elevated transition-colors"
-              onClick={() => onDelete(entry.accountId, entry.accountLabel ?? entry.accountId.slice(0, 8))}
-              title="Remove account"
-              aria-label="Remove account"
-            >
-              <Trash2 className="size-4" />
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className="p-2 rounded cursor-pointer text-text-subtle hover:text-error hover:bg-surface-elevated transition-colors"
+                  onClick={() => onDelete(entry.accountId, entry.accountLabel ?? entry.accountId.slice(0, 8))}
+                  aria-label="Remove account"
+                >
+                  <Trash2 className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">Remove account</TooltipContent>
+            </Tooltip>
           )}
         </div>
       </div>
@@ -139,13 +244,28 @@ export function AccountCard({
 
       <div className="flex items-center gap-2 text-[10px] text-text-subtle flex-wrap">
         {usage.lastFetchedAt && (
-          <span title="Last usage data update">↻ {formatLastUpdated(new Date(usage.lastFetchedAt).getTime())}</span>
+          <AccountHint
+            className="inline-flex items-center gap-1"
+            hint={`Usage last read from Anthropic on ${new Date(usage.lastFetchedAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}. The bars above are only as current as this.`}
+          >
+            <RefreshCw className="size-3 shrink-0" aria-hidden />
+            {formatLastUpdated(new Date(usage.lastFetchedAt).getTime())}
+          </AccountHint>
+        )}
+        {grantExpiresAtMs && !needsReauth && (
+          <AccountHint
+            className={["inline-flex items-center gap-1", grantEndingSoon ? "text-warning" : ""].filter(Boolean).join(" ")}
+            hint={`Sign-in stops working on ${grantExpiresOn}. Anthropic ends every sign-in on a fixed schedule from the day it was made, whether or not the account gets used — refreshing does not extend it. After that the account fails until you sign in again.`}
+          >
+            <KeyRound className="size-3 shrink-0" aria-hidden />
+            sign-in {formatExpiry(grantExpiresAtMs)}
+          </AccountHint>
         )}
-        {accountInfo?.expiresAt && accountInfo.expiresAt * 1000 > Date.now() && (
-          <span title="Token expires in">⏱ {formatExpiry(accountInfo.expiresAt * 1000)}</span>
+        {showTokenStatus && (
+          <AccountHint className={ts.color} hint={ts.tip}>© {ts.label}</AccountHint>
         )}
-        <span className={ts.color} title={ts.tip}>© {ts.label}</span>
       </div>
+
     </AccountCardShell>
   );
 }

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

@@ -0,0 +1,33 @@
+/**
+ * A card label that carries an explanation.
+ *
+ * The trigger is a button rather than a span on purpose. Radix opens a tooltip on focus as
+ * well as hover, so tapping the chip reaches the explanation on touch, where hover does not
+ * exist at all — `docs/design-guidelines.md` rules out hiding anything behind hover alone.
+ * The visible label still carries the information; this only makes the reasoning behind it
+ * reachable on every device rather than on desktop only.
+ */
+
+import type { ReactNode } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+export interface AccountHintProps {
+  hint: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+export function AccountHint({ hint, className, children }: AccountHintProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button type="button" className={["cursor-help text-left", className].filter(Boolean).join(" ")}>
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-[260px] text-xs leading-relaxed">
+        {hint}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/web/components/settings/accounts/account-usage-format.ts

@@ -49,6 +49,24 @@ export function formatResetTime(bucket?: LimitBucket): string | null {
 }
 
 /** Time until a token expires. Takes milliseconds. */
+/**
+ * The exact moment a bucket resets, for the tooltip behind the relative "↻ 2h 10m".
+ *
+ * The relative figure is the right thing on the card — it answers "can I keep working" at a
+ * glance — but it cannot answer "will this be back before my meeting", and it goes stale as
+ * soon as it is rendered. The absolute time answers both, so it belongs one hover away rather
+ * than competing for the same few pixels.
+ *
+ * Rendered in the viewer's own locale and zone: the server sends UTC, and a reset time shown
+ * in UTC is a small puzzle to solve at exactly the moment someone is in a hurry.
+ */
+export function formatResetAt(resetsAt?: string | null): string | null {
+  if (!resetsAt) return null;
+  const ms = new Date(resetsAt).getTime();
+  if (!Number.isFinite(ms)) return null;
+  return new Date(ms).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+}
+
 export function formatExpiry(expiresAtMs: number): string {
   const diff = expiresAtMs - Date.now();
   if (diff <= 0) return "expired";
@@ -65,10 +83,18 @@ export function formatExpiry(expiresAtMs: number): string {
  *
  * An expired token with a refresh token is only a warning, not an error: the server renews
  * it on the next call. Without one it is genuinely dead, which is why the two cases differ.
+ *
+ * Unless the server has already refused to renew it. PPM kept a rejected account holding its
+ * refresh token — deliberately, so a re-import can recover it — and this function read that
+ * as "will auto-renew" for six days while every turn on the account failed. A rejection
+ * outranks both other cases.
  */
 export function tokenStatus(info?: AccountInfo): { label: string; tip: string; color: string } {
   if (!info) return { label: "unknown", tip: "No account info available", color: "text-text-subtle" };
   if (!info.expiresAt) return { label: "key", tip: "API key (no expiry)", color: "text-text-subtle" };
+  if (info.reauthRequired) {
+    return { label: "sign in again", tip: "Anthropic rejected this account's refresh token. Sign in again to restore it.", color: "text-error" };
+  }
   const expired = info.expiresAt * 1000 < Date.now(); // expiresAt is seconds
   if (expired && info.hasRefreshToken) return { label: "expired", tip: "Token expired but has refresh token — will auto-renew", color: "text-warning" };
   if (expired) return { label: "expired", tip: "Token expired, no refresh token", color: "text-error" };

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

@@ -9,6 +9,8 @@
 import { useState } from "react";
 import { Download, KeyRound, Loader2, Plus, Settings, Trash2, Upload } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AccountCardRow, AccountCardShell, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
 import { CodexAddAccountDialog } from "./codex-add-account-dialog";
 import { CodexBackupDialog } from "./codex-backup-dialog";
@@ -85,15 +87,28 @@ export function CodexAccountsSection() {
                       {a.type}
                     </span>
                     {a.planType && <span className="text-[10px] text-text-subtle shrink-0">{a.planType}</span>}
-                    <button
-                      type="button"
-                      onClick={() => void c.remove(a.id)}
-                      title="Remove account"
-                      aria-label="Remove account"
-                      className="p-2 rounded cursor-pointer text-text-subtle hover:text-error hover:bg-surface-elevated transition-colors shrink-0"
-                    >
-                      <Trash2 className="size-4" />
-                    </button>
+                    {/* Same control the Claude card uses, in the same place, so the two
+                        sub-tabs read as one screen rather than two designs. */}
+                    <Switch
+                      checked={a.status !== "disabled"}
+                      onCheckedChange={() => void c.toggle(a.id, a.status ?? "active")}
+                      disabled={c.toggling.has(a.id)}
+                      aria-label={a.status === "disabled" ? "Enable account" : "Disable account"}
+                      className="cursor-pointer shrink-0"
+                    />
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={() => void c.remove(a.id)}
+                          aria-label="Remove account"
+                          className="p-2 rounded cursor-pointer text-text-subtle hover:text-error hover:bg-surface-elevated transition-colors shrink-0"
+                        >
+                          <Trash2 className="size-4" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent side="top">Remove account</TooltipContent>
+                    </Tooltip>
                   </div>
                   <CodexUsageRows usage={u} />
                 </AccountCardShell>

package/src/web/components/settings/accounts/codex-usage-rows.tsx

@@ -19,8 +19,8 @@ function toPct(v?: number): number | null { return v != null ? Math.round(v * 10
 export function CodexUsageRows({ usage }: { usage: Usage }) {
   return (
     <div className="space-y-2">
-      <AccountUsageBar label="5-Hour Session" pct={toPct(usage.fiveHour)} reset={formatResetTime(usage.session)} />
-      <AccountUsageBar label="Weekly" pct={toPct(usage.sevenDay)} reset={formatResetTime(usage.weekly)} />
+      <AccountUsageBar label="5-Hour Session" pct={toPct(usage.fiveHour)} reset={formatResetTime(usage.session)} resetsAt={usage.session?.resetsAt} />
+      <AccountUsageBar label="Weekly" pct={toPct(usage.sevenDay)} reset={formatResetTime(usage.weekly)} resetsAt={usage.weekly?.resetsAt} />
     </div>
   );
 }

package/src/web/components/settings/accounts/use-accounts-data.ts

@@ -8,7 +8,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
-  getAccounts, getActiveAccount, getAllAccountUsages,
+  getAccounts, getActiveAccount, getAllAccountUsages, patchAccount,
   type AccountInfo, type AccountUsageEntry,
 } from "../../../lib/api-settings";
 
@@ -22,6 +22,10 @@ export interface AccountsData {
   /** Accounts whose utilisation changed on the last refresh — briefly highlighted. */
   flashIds: Set<string>;
   reload: () => Promise<void>;
+  /** Switch an account on or off, reloading when it lands. Resolves to an error message, or null. */
+  toggle: (id: string, status: string) => Promise<string | null>;
+  /** Account whose switch is mid-flight, or null. */
+  togglingId: string | null;
 }
 
 /** Utilisation across all four buckets, as a comparable string. */
@@ -37,6 +41,7 @@ export function useAccountsData(enabled = true): AccountsData {
   const [initialLoading, setInitialLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [flashIds, setFlashIds] = useState<Set<string>>(new Set());
+  const [togglingId, setTogglingId] = useState<string | null>(null);
   const prevUsages = useRef<AccountUsageEntry[]>([]);
   const flashTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
 
@@ -72,10 +77,35 @@ export function useAccountsData(enabled = true): AccountsData {
     setRefreshing(false);
   }, []);
 
+  /**
+   * Switch an account on or off.
+   *
+   * Lives here rather than in either pane so Settings and the chat toolbar drive one
+   * implementation. Two of them is how those screens drifted apart before, and the drift is
+   * invisible until someone notices the same switch behaving differently in two places.
+   *
+   * Returns the server's message instead of throwing: enabling a parked account makes the
+   * server prove its token first, which can take most of a minute and can come back 400 with
+   * a message worth reading — "sign in again" and "could not reach Anthropic" call for
+   * different actions, and swallowing the difference leaves the switch silently snapping back.
+   */
+  const toggle = useCallback(async (id: string, status: string): Promise<string | null> => {
+    setTogglingId(id);
+    let error: string | null = null;
+    try {
+      await patchAccount(id, { status: status === "disabled" ? "active" : "disabled" });
+    } catch (e) {
+      error = (e as Error).message;
+    }
+    setTogglingId(null);
+    await reload();
+    return error;
+  }, [reload]);
+
   useEffect(() => {
     if (enabled) void reload();
     return () => clearTimeout(flashTimer.current);
   }, [enabled, reload]);
 
-  return { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload };
+  return { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload, toggle, togglingId };
 }

package/src/web/components/settings/accounts/use-codex-accounts.ts

@@ -15,7 +15,7 @@ import type { LimitBucket } from "../../../../types/chat";
 import type { CodexStrategy } from "./codex-rotation-dialog";
 
 export type Strategy = CodexStrategy;
-export interface CodexAccount { id: string; label: string; type: string; planType?: string | null }
+export interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled" }
 /**
  * One account's quota. The two percentages are what the bars read; the buckets carry the
  * reset clock the server already sends, so the Codex card can show "resets in" the way the
@@ -41,6 +41,7 @@ export function useCodexAccounts(onDone: () => void) {
   const [strategy, setStrategy] = useState<Strategy>("round-robin");
   const [usages, setUsages] = useState<Record<string, Usage>>({});
   const [loading, setLoading] = useState(false);
+  const [toggling, setToggling] = useState<Set<string>>(new Set());
   const [apiKey, setApiKey] = useState("");
   const [label, setLabel] = useState("");
   const [adding, setAdding] = useState(false);
@@ -117,6 +118,26 @@ export function useCodexAccounts(onDone: () => void) {
   };
 
   const remove = async (id: string) => { await api.del(`/api/codex-accounts/${id}`); await load(); };
+
+  /**
+   * Switch an account on or off.
+   *
+   * Tracked per account rather than with one shared flag: the pane shows every account side
+   * by side, and a single flag would grey out all of them while one is changing.
+   */
+  const toggle = async (id: string, status: string) => {
+    const next = status === "disabled" ? "active" : "disabled";
+    setToggling((prev) => new Set(prev).add(id));
+    setErr(null);
+    try {
+      await api.patch(`/api/codex-accounts/${id}`, { status: next });
+      await load();
+    } catch (e) {
+      setErr((e as Error).message || "Could not change the account");
+    } finally {
+      setToggling((prev) => { const n = new Set(prev); n.delete(id); return n; });
+    }
+  };
   const changeStrategy = async (s: Strategy) => { setStrategy(s); try { await api.put("/api/codex-accounts/strategy", { strategy: s }); } catch { /* revert on reload */ } };
 
   const doExport = async () => {
@@ -157,6 +178,7 @@ export function useCodexAccounts(onDone: () => void) {
     accounts, strategy, usages, loading, apiKey, setApiKey, label, setLabel, adding,
     err, setErr, device, deviceWaiting, backupPassword, setBackupPassword,
     exporting, importing, msg, setMsg,
-    load, addApiKey, startDevice, remove, changeStrategy, doExport, doImport,
+    toggling,
+    load, addApiKey, startDevice, remove, toggle, changeStrategy, doExport, doImport,
   };
 }

package/src/web/components/shared/markdown-code-block.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, type ReactNode } from "react";
+import { useState, useEffect, useMemo, useRef, type ReactNode } from "react";
 import { useMdContext, FILE_EXT_RE, GLOB_CHARS_RE } from "./markdown-context";
 import { highlightToHtml, highlightSync, getActiveShikiTheme } from "@/theme/adapters/shiki-adapter";
 import { copyToClipboard } from "@/lib/clipboard";
@@ -80,11 +80,14 @@ export function MdPre({ children, node, ...rest }: any) {
   // Highlight once the block is done streaming; render raw code until then to
   // avoid re-highlighting on every token (and Shiki being async).
   const shikiHtml = useShikiHtml(text, lang, !isStreaming);
+  // Stable object: React 19 re-sets innerHTML whenever this prop's identity changes, which
+  // would rebuild the highlighted subtree on every re-render of the surrounding message.
+  const shikiProp = useMemo(() => (shikiHtml ? { __html: shikiHtml } : null), [shikiHtml]);
 
   return (
     <div className="relative group">
-      {shikiHtml
-        ? <div className="shiki-block" dangerouslySetInnerHTML={{ __html: shikiHtml }} />
+      {shikiProp
+        ? <div className="shiki-block" dangerouslySetInnerHTML={shikiProp} />
         : <pre {...rest}>{children}</pre>}
       {codeActions && (
         <div className="code-actions absolute top-1 right-1 flex gap-1">
@@ -151,6 +154,8 @@ export function MdCode({ className, children, node, ...rest }: any) {
 function MermaidDiagram({ source }: { source: string }) {
   const { openDiagramOverlay } = useMdContext();
   const [svg, setSvg] = useState<string | null>(null);
+  // Same identity rule as the Shiki block: a fresh `{ __html }` per render re-parses the SVG.
+  const svgProp = useMemo(() => (svg ? { __html: svg } : null), [svg]);
 
   useEffect(() => {
     let cancelled = false;
@@ -174,14 +179,14 @@ function MermaidDiagram({ source }: { source: string }) {
     };
   }, [source]);
 
-  if (!svg) return <pre><code>{source}</code></pre>;
+  if (!svg || !svgProp) return <pre><code>{source}</code></pre>;
 
   return (
     <div
       className="mermaid-diagram group relative cursor-pointer rounded-lg border border-border bg-white dark:bg-panel-2 p-3 overflow-x-auto my-2"
       onClick={() => openDiagramOverlay(svg)}
     >
-      <div dangerouslySetInnerHTML={{ __html: svg }} />
+      <div dangerouslySetInnerHTML={svgProp} />
       <div className="absolute top-2 right-2 flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity pointer-events-none">
         Click to expand
       </div>

package/src/web/hooks/use-chat.ts

@@ -66,6 +66,13 @@ interface UseChatReturn {
   compactStatus: "compacting" | null;
   statusMessage: string | null;
   sessionTitle: string | null;
+  /**
+   * Account the server last reported as serving this session, from the stream rather than
+   * the polled usage endpoint — so a forced account switch shows up immediately instead of
+   * up to two minutes later. Carries the id as well as the label because the panel marks the
+   * serving card by id.
+   */
+  liveAccount: { id: string; label: string | null } | null;
   /** Per-session model override (null = provider default) */
   model: string | null;
   /** Switch the per-session model (persists + recreates query on next message) */
@@ -166,6 +173,17 @@ export function useChat(
   const streamingEventsRef = useRef<ChatEvent[]>([]);
   const bashOutputRef = useRef<Map<string, BashPartialEntry>>(new Map());
   const streamingAccountRef = useRef<{ accountId: string; accountLabel: string } | null>(null);
+  /**
+   * Which account last reported serving this session, as state rather than a ref so the
+   * toolbar re-renders on it.
+   *
+   * Deliberately sticky across turns: it is cleared when the session changes, not when a
+   * turn ends. The account that just served is still the account bound to the session, and
+   * the only other source for that label is the usage endpoint on a two-minute poll — so
+   * dropping it at turn end would leave the chip showing a stale name for minutes after the
+   * server was forced onto a different account.
+   */
+  const [liveAccount, setLiveAccount] = useState<{ id: string; label: string | null } | null>(null);
   const phaseRef = useRef<SessionPhase>("idle");
   const pendingMessageRef = useRef<string | null>(null);
   const sendRef = useRef<(data: string) => void>(() => {});
@@ -402,6 +420,7 @@ export function useChat(
     switch (evType) {
       case "account_info": {
         streamingAccountRef.current = { accountId: ev.accountId, accountLabel: ev.accountLabel };
+        setLiveAccount({ id: ev.accountId, label: ev.accountLabel ?? null });
         setStatusMessage(null);
         break;
       }
@@ -410,6 +429,9 @@ export function useChat(
         // Update streaming account to the new one being tried
         if (ev.accountId && ev.accountLabel) {
           streamingAccountRef.current = { accountId: ev.accountId, accountLabel: ev.accountLabel };
+          // A retry means the server was forced off the account the toolbar is naming —
+          // rate limit, usage cap or auth. Say so now rather than at the next usage poll.
+          setLiveAccount({ id: ev.accountId, label: ev.accountLabel });
         }
         // Clear previous streaming events (error text from failed attempt)
         // and start fresh with only the retry notification
@@ -961,6 +983,9 @@ export function useChat(
     if (prevSessionIdRef.current && prevSessionIdRef.current !== sessionId) {
       pendingModelRef.current = null;
       thinkingRef.current = null;
+      // One session's account must not label another's. Only on a real session-to-session
+      // switch: the draft→real transition (null → id) keeps serving the same conversation.
+      setLiveAccount(null);
     }
     prevSessionIdRef.current = sessionId ?? null;
 
@@ -1359,6 +1384,8 @@ export function useChat(
     compactStatus,
     statusMessage,
     sessionTitle,
+    /** Account the server last reported for this session — beats the polled usage label. */
+    liveAccount,
     model,
     setModel,
     effort,