@hienlh/ppm 0.19.12 → 0.20.1

package/src/web/components/chat/chat-tab.tsx

@@ -11,7 +11,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useNotificationStore } from "@/stores/notification-store";
 import { openBugReportPopup } from "@/lib/report-bug";
-import { getAISettings } from "@/lib/api-settings";
+import { getAISettings, pickAccountForTab } from "@/lib/api-settings";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
 import { TeamWorkingBar } from "./team-working-bar";
@@ -104,14 +104,113 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     }).catch(() => {});
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Persist sessionId, providerId, and permissionMode to tab metadata
+  // Persist sessionId, providerId, and permissionMode to tab metadata.
+  //
+  // The claimed account is dropped at the same moment: once a session exists, its binding
+  // is the only account that matters, and it is the one the server re-routes when an
+  // account goes bad. Keeping the tab's copy alongside it would give the chip a second,
+  // staler answer to the same question.
   useEffect(() => {
     if (!tabId || !sessionId) return;
     updateTab(tabId, {
-      metadata: { ...metadata, sessionId, providerId, permissionMode },
+      metadata: {
+        ...metadata,
+        sessionId,
+        providerId,
+        permissionMode,
+        pickedAccountId: undefined,
+        pickedAccountLabel: undefined,
+        pickedAccountProvider: undefined,
+      },
     });
   }, [sessionId, providerId, permissionMode]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  /** The account this tab claimed while it had no session yet, and who it was claimed from. */
+  const pickedAccountId = metadata?.pickedAccountId as string | undefined;
+  const pickedAccountLabel = metadata?.pickedAccountLabel as string | undefined;
+  const pickedAccountProvider = metadata?.pickedAccountProvider as string | undefined;
+  // A tab with no session can still switch provider, and accounts do not cross that line.
+  // Without this the claim from the old provider survives the switch and the chip names a
+  // Codex account on a Claude chat — confidently, and wrongly.
+  const claimMatchesProvider = Boolean(pickedAccountId) && pickedAccountProvider === providerId;
+
+  /**
+   * Claim an account the moment the tab opens, instead of at the first message.
+   *
+   * A tab with no session has no WebSocket and no row anywhere, so there is nothing
+   * server-side to hang this on. The tab's own metadata is the natural home: it is
+   * persisted with the panel layout, so the claim survives a reload, and it is discarded
+   * with the tab, which is exactly the lifetime asked for.
+   *
+   * Guarded on `pickedAccountId` being absent, not merely on having no session. Without
+   * that, every reload would claim a fresh account and the tab would keep changing its
+   * mind about who is answering. The claim is consumed — several tabs opened in a row
+   * deliberately spread across the pool, and are allowed to collide.
+   */
+  useEffect(() => {
+    if (!tabId || sessionId || claimMatchesProvider) return;
+    let cancelled = false;
+    pickAccountForTab(providerId)
+      .then((picked) => {
+        if (cancelled || !picked) return;
+        updateTab(tabId, {
+          metadata: {
+            ...metadata,
+            pickedAccountId: picked.id,
+            pickedAccountLabel: picked.label,
+            pickedAccountProvider: providerId,
+          },
+        });
+      })
+      .catch(() => { /* leave the chip blank rather than naming an account we did not get */ });
+    return () => { cancelled = true; };
+  }, [tabId, sessionId, providerId, claimMatchesProvider]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /**
+   * Move this chat onto an account the user picked in the panel.
+   *
+   * Two destinations, one for each half of a tab's life. Before the first message there is
+   * no session, so the choice replaces the tab's claim and is redeemed when the session is
+   * created. After that the session's binding is the only thing that decides, so it is
+   * written directly. Both end up in the same place — this is the same path the automatic
+   * route uses, not a parallel one.
+   */
+  const handleSelectAccount = useCallback(async (accountId: string, label: string | null): Promise<string | null> => {
+    if (sessionId) {
+      try {
+        await api.put(`${projectUrl(projectName)}/chat/sessions/${sessionId}/account`, { accountId });
+        // Say it locally too. The panel marks the serving card from this state, and the only
+        // other source is the usage endpoint on a two-minute poll — so without this the badge
+        // sits on the old account long after the switch, which reads as the button not working.
+        setServingAccount({ id: accountId, label });
+        // Switching costs a full prompt-cache write, so it is worth saying out loud rather
+        // than letting the chip quietly change.
+        toast.success("This chat will use the selected account from the next message.");
+      } catch (e) {
+        // Returned rather than toasted: the panel shows it beside the cards, which is where
+        // the user just clicked and where the account they picked is still on screen.
+        return (e as Error).message || "Could not switch account";
+      }
+      return null;
+    }
+    if (!tabId) return null;
+    updateTab(tabId, {
+      metadata: { ...metadata, pickedAccountId: accountId, pickedAccountLabel: label, pickedAccountProvider: providerId },
+    });
+    return null;
+  }, [sessionId, projectName, tabId, metadata, providerId, updateTab]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /**
+   * The account this chat is on, as far as the UI can tell.
+   *
+   * One piece of state with two writers, and last write wins — which is the right answer
+   * chronologically. The stream writes it whenever a turn reports who served (including a
+   * forced switch), and the manual picker writes it the moment the server accepts a choice.
+   * Deriving it instead from the polled usage endpoint is what made the badge lag two
+   * minutes behind a switch the user had just made.
+   */
+  const [servingAccount, setServingAccount] = useState<{ id: string; label: string | null } | null>(null);
+
   const {
     messages,
     renderedMessages,
@@ -130,6 +229,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     compactStatus,
     statusMessage,
     sessionTitle,
+    liveAccount,
     model,
     setModel,
     effort,
@@ -150,6 +250,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     killBackgroundShell,
   } = useChat(sessionId, providerId, projectName, handleSessionMigrated);
 
+  // The stream's report is the second writer. A turn that ran — or was forced onto another
+  // account mid-flight — is ground truth, and it arrives after whatever the picker last said.
+  useEffect(() => {
+    if (liveAccount) setServingAccount(liveAccount);
+  }, [liveAccount]);
+
+  // A different conversation has a different account; carrying this one's over would label
+  // it wrongly until the next turn corrected it.
+  useEffect(() => { setServingAccount(null); }, [sessionId]);
+
+
   // Teammates keep working long after their spawn card scrolled away — a resume
   // arrives by SendMessage and writes no card at all. Poll the roster whenever this
   // session has a team so the working bar below the conversation stays truthful.
@@ -429,6 +540,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             title: content.slice(0, 50),
             // Set by /clear — the session only exists now, so persist the lineage here.
             clearedFrom: metadata?.clearedFrom as string | undefined,
+            // The account this tab claimed on open and has been displaying since. Redeeming
+            // it here is what makes that display true rather than a guess.
+            accountId: pickedAccountId,
           });
           setSessionId(session.id);
           setProviderId(session.providerId);
@@ -688,6 +802,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           lastFetchedAt={lastFetchedAt}
           sessionId={sessionId}
           providerId={providerId}
+          pickedAccountLabel={servingAccount?.label ?? (claimMatchesProvider ? pickedAccountLabel : null)}
+          pickedAccountId={servingAccount?.id ?? (claimMatchesProvider ? pickedAccountId ?? null : null)}
+          onSelectAccount={handleSelectAccount}
           onSelectSession={handleSelectSession}
           onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
           isConnected={isConnected}

package/src/web/components/chat/codex-usage-panel.tsx

@@ -1,20 +1,27 @@
 import { useState, useEffect, useCallback } from "react";
 import { X, Loader2, RefreshCw } from "lucide-react";
 import { api } from "@/lib/api-client";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AccountUsageBar } from "@/components/settings/accounts/account-bucket-row";
 import { formatResetTime } from "@/components/settings/accounts/account-usage-format";
 import type { UsageInfo } from "../../../types/chat";
 
-interface CodexAccount { id: string; label: string; type: string; planType?: string | null }
+interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled" }
 type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
 
+/** Matches the whole-percent figure the bars show, so a refusal agrees with the card. */
+function atCap(util: number | null | undefined): boolean {
+  return Math.round((util ?? 0) * 100) >= 100;
+}
+
 function UsageBar({ label, frac, bucket }: {
   label: string;
   frac?: number;
   bucket?: UsageInfo["session"];
 }) {
   const pct = frac != null ? Math.round(frac * 100) : null;
-  return <AccountUsageBar label={label} pct={pct} reset={formatResetTime(bucket)} />;
+  return <AccountUsageBar label={label} pct={pct} reset={formatResetTime(bucket)} resetsAt={bucket?.resetsAt} />;
 }
 
 /** Read-only usage panel opened from the chat toolbar badge (Claude parity).
@@ -22,15 +29,58 @@ function UsageBar({ label, frac, bucket }: {
  * accounts exist, chats run on the ambient ~/.codex login — its usage comes
  * from the session `usage` prop. Login/management lives in Settings → AI
  * Provider → Codex. */
-export function CodexUsagePanel({ onClose, usage, onReload }: {
+export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, selectedAccountId }: {
   onClose: () => void;
   usage: UsageInfo;
   /** Forces the chat usage endpoint to bypass its provider-usage cache. */
   onReload?: () => void | Promise<void>;
+  /** Route this chat onto another Codex account. */
+  onSelectAccount?: (accountId: string, label: string | null) => Promise<string | null>;
+  /** Account currently claimed or bound for this chat. */
+  selectedAccountId?: string | null;
 }) {
   const [accounts, setAccounts] = useState<CodexAccount[]>([]);
   const [usages, setUsages] = useState<Record<string, Usage>>({});
   const [loading, setLoading] = useState(false);
+  const [selectingId, setSelectingId] = useState<string | null>(null);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const [toggleError, setToggleError] = useState<string | null>(null);
+
+  // This panel draws its own cards rather than reusing Settings' AccountCard, so the
+  // selection control is rebuilt here. Kept visually the same as the Claude panel's on
+  // purpose — the two sub-tabs drifting apart is the thing the shared Settings layout was
+  // introduced to stop, and a differently-shaped button here would start it again.
+  const select = useCallback(async (id: string, label: string, refused: string | null) => {
+    if (!onSelectAccount) return;
+    // Refuse here rather than leaving the button inert: the user pressed something and is
+    // owed the reason. The server checks again, which catches an account that became
+    // unusable between this render and the click.
+    if (refused) { setToggleError(`Cannot switch to this account — ${refused}`); return; }
+    setSelectingId(id);
+    setToggleError(null);
+    try { setToggleError((await onSelectAccount(id, label)) ?? null); } finally { setSelectingId(null); }
+  }, [onSelectAccount]);
+
+  /**
+   * Switch a Codex account on or off without leaving the chat.
+   *
+   * No pending-token dance like the Claude side: the Codex route answers immediately because
+   * there is no refresh token to prove. The pending id is still tracked so the switch cannot
+   * be double-fired on a slow connection.
+   */
+  const toggle = useCallback(async (id: string, status: string) => {
+    setTogglingId(id);
+    setToggleError(null);
+    try {
+      await api.patch(`/api/codex-accounts/${id}`, { status: status === "disabled" ? "active" : "disabled" });
+      const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
+      setAccounts(d.accounts);
+    } catch (e) {
+      setToggleError((e as Error).message || "Could not change the account");
+    } finally {
+      setTogglingId(null);
+    }
+  }, []);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -59,19 +109,42 @@ export function CodexUsagePanel({ onClose, usage, onReload }: {
       <div className="flex items-center justify-between">
         <span className="text-xs font-semibold text-text-primary">Codex Usage</span>
         <div className="flex items-center gap-1">
-          <button
-            onClick={reload}
-            disabled={loading}
-            className="text-text-subtle hover:text-text-primary px-1 cursor-pointer disabled:opacity-50"
-            title="Refresh"
-          >
-            <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
-          </button>
-          <button onClick={onClose} className="text-text-subtle hover:text-text-primary px-1 cursor-pointer" title="Close">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={reload}
+                disabled={loading}
+                className="text-text-subtle hover:text-text-primary px-1 cursor-pointer disabled:opacity-50"
+                aria-label="Refresh usage"
+              >
+                <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Refresh</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={onClose}
+                className="text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+                aria-label="Close usage panel"
+              >
+                <X className="size-3" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Close</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      {toggleError && (
+        <div className="flex items-start gap-2 rounded border border-error/40 bg-error/10 px-2 py-1.5 text-[11px] text-error">
+          <span className="flex-1">{toggleError}</span>
+          <button onClick={() => setToggleError(null)} className="shrink-0 text-error/70 hover:text-error cursor-pointer" aria-label="Dismiss">
             <X className="size-3" />
           </button>
         </div>
-      </div>
+      )}
 
       {loading && accounts.length === 0 && (
         <div className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Loading…</div>
@@ -94,12 +167,57 @@ export function CodexUsagePanel({ onClose, usage, onReload }: {
 
       {accounts.map((a) => {
         const u = usages[a.id] ?? {};
+        const isServing = a.id === (selectedAccountId ?? usage.activeAccountId);
+        // Reached, not approaching: an account at 96% still answers, one at 100% does not.
+        const refused = a.status === "disabled"
+          ? "it is switched off."
+          : atCap(u.fiveHour)
+            ? "it has reached its 5-hour limit."
+            : atCap(u.sevenDay)
+              ? "it has reached its weekly limit."
+              : null;
         return (
-          <div key={a.id} className="rounded-md border border-border/50 bg-surface/40 p-2.5 space-y-2">
+          <div
+            key={a.id}
+            className={`rounded-md border bg-surface/40 p-2.5 space-y-2 ${isServing ? "border-primary/30 bg-primary/5" : "border-border/50"}`}
+          >
             <div className="flex items-center gap-2">
               <span className="text-sm text-text-primary truncate flex-1 min-w-0">{a.label}</span>
+              {isServing && <span className="text-[10px] text-primary shrink-0 font-medium">Active</span>}
+              {/* Same slot as the Active badge, so every card keeps one header row and the
+                  panel does not grow taller just to carry a button. */}
+              {onSelectAccount && !isServing && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => select(a.id, a.label, refused)}
+                      disabled={selectingId === a.id}
+                      className={[
+                        "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors cursor-pointer disabled:cursor-wait",
+                        refused
+                          ? "text-text-subtle hover:text-error hover:bg-error/10"
+                          : "text-text-secondary hover:text-foreground hover:bg-surface-elevated",
+                      ].join(" ")}
+                    >
+                      {selectingId === a.id ? "Switching…" : "Use"}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {refused ? `Cannot use this account — ${refused}` : "Use this account for this chat"}
+                  </TooltipContent>
+                </Tooltip>
+              )}
+              {a.status === "disabled" && <span className="text-[10px] text-text-subtle shrink-0">Off</span>}
               <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">{a.type}</span>
               {a.planType && <span className="text-[10px] text-text-subtle">{a.planType}</span>}
+              <Switch
+                checked={a.status !== "disabled"}
+                onCheckedChange={() => void toggle(a.id, a.status ?? "active")}
+                disabled={togglingId === a.id}
+                aria-label={a.status === "disabled" ? "Enable account" : "Disable account"}
+                className="cursor-pointer shrink-0"
+              />
             </div>
             <UsageBar label="5-Hour" frac={u.fiveHour} bucket={u.session} />
             <UsageBar label="Weekly" frac={u.sevenDay} bucket={u.weekly} />

package/src/web/components/chat/edit-diff-preview.tsx

@@ -22,16 +22,23 @@ export default function EditDiffPreview({ oldStr, newStr, filePath, maxLines = 1
     [oldStr, newStr, maxLines],
   );
 
+  // The `{ __html }` objects live inside the memo on purpose. React 19 compares that prop by
+  // identity, not by the string inside, so an inline `{{ __html: html }}` re-parses and
+  // rebuilds every line's subtree on every render of this card — and a card re-renders on
+  // each flush of the streaming turn it sits in. Measured at ~20 identical rewrites per line
+  // per turn (tests/e2e/chat-dom-leak-trace.mjs), all of it garbage for the DOM allocator.
   const lines = useMemo(
     () =>
       rows.map((row) => ({
         row,
-        html: renderLine(
-          row.text,
-          language,
-          row.kind === "equal" ? [] : row.ranges,
-          row.kind === "del" ? "bg-diff-removed-word" : "bg-diff-added-word",
-        ),
+        html: {
+          __html: renderLine(
+            row.text,
+            language,
+            row.kind === "equal" ? [] : row.ranges,
+            row.kind === "del" ? "bg-diff-removed-word" : "bg-diff-added-word",
+          ),
+        },
       })),
     [rows, language],
   );
@@ -51,7 +58,7 @@ export default function EditDiffPreview({ oldStr, newStr, filePath, maxLines = 1
             <span className={`select-none shrink-0 w-3 pl-1.5 ${s.gutter}`}>{s.prefix}</span>
             <code
               className="whitespace-pre-wrap break-all text-text-primary pr-1.5"
-              dangerouslySetInnerHTML={{ __html: html }}
+              dangerouslySetInnerHTML={html}
             />
           </div>
         );

package/src/web/components/chat/team-member-window-content.tsx

@@ -1,18 +1,17 @@
 /**
- * Floating-window body replaying one teammate's whole work session.
+ * Floating-window body replaying one teammate's whole work session, live.
  *
  * The transcript is fetched on demand and only for the member being opened —
  * a single teammate transcript reaches several MB, so loading all of a team's
- * transcripts up front is not an option. Steps render through the same
- * `SubagentChildren` view the inline Agent card uses, so a teammate's session
- * looks identical wherever it is read.
+ * transcripts up front is not an option, and following one means tailing it by
+ * byte offset rather than re-reading it (`useMemberTranscriptTail`). Steps
+ * render through the same `SubagentChildren` view the inline Agent card uses,
+ * so a teammate's session looks identical wherever it is read.
  */
 
-import { useEffect, useState } from "react";
 import { Loader2, RefreshCw } from "lucide-react";
-import { api } from "@/lib/api-client";
 import { cn } from "@/lib/utils";
-import type { ChatEvent } from "../../../types/chat";
+import { useMemberTranscriptTail } from "@/hooks/use-member-transcript-tail";
 import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
 import { SubagentChildren } from "./tool-cards";
 
@@ -25,37 +24,7 @@ export interface TeamMemberWindowPayload {
 
 export default function TeamMemberWindowContent({ payload }: WindowContentProps) {
   const { teamName, memberName, projectName } = (payload ?? {}) as unknown as TeamMemberWindowPayload;
-  const [events, setEvents] = useState<ChatEvent[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  // Bumped by the refresh button; a working teammate keeps appending steps.
-  const [reloadKey, setReloadKey] = useState(0);
-
-  useEffect(() => {
-    if (!teamName || !memberName) {
-      setError("Missing team or member");
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    api
-      .get<{ events?: ChatEvent[] }>(
-        `/api/teams/${encodeURIComponent(teamName)}/members/${encodeURIComponent(memberName)}/transcript`,
-      )
-      .then((res) => {
-        if (cancelled) return;
-        setEvents(res?.events ?? []);
-      })
-      .catch(() => {
-        if (!cancelled) setError("Could not read this member's session");
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => { cancelled = true; };
-  }, [teamName, memberName, reloadKey]);
+  const { events, loading, error, refresh } = useMemberTranscriptTail(teamName, memberName);
 
   return (
     <div className="flex flex-col h-full min-h-0 bg-surface">
@@ -66,7 +35,7 @@ export default function TeamMemberWindowContent({ payload }: WindowContentProps)
         </span>
         <button
           type="button"
-          onClick={() => setReloadKey((k) => k + 1)}
+          onClick={refresh}
           className="ml-auto text-text-subtle hover:text-foreground p-1 shrink-0"
           aria-label="Reload session"
         >