@hienlh/ppm 0.23.15 → 0.23.16

package/src/server/ws/chat-token-rotation.ts

@@ -0,0 +1,150 @@
+/**
+ * Renews Claude sign-ins while nothing is using them, and moves idle chats onto the new token.
+ *
+ * Every chat subprocess is started with its account's access token in
+ * `CLAUDE_CODE_OAUTH_TOKEN` and cannot renew it (`SubprocessCredential` in
+ * `claude-agent-sdk.ts` says why). Tokens live eight hours, and renewing one revokes the
+ * previous token, so a renewal used to land in the middle of whatever turn happened to be
+ * running: its next request got a 401, the provider rebuilt the subprocess, and every
+ * subagent still working inside it died with it.
+ *
+ * So a token is renewed early — inside `QUIET_REFRESH_WINDOW_S` of expiry — at a moment
+ * when no turn, approval or background work is running on that account. Idle subprocesses
+ * still holding the old token are then dropped, the same way a model switch drops them, and
+ * their next message resumes on the new one. A subprocess that is busy is left alone and
+ * dropped once its turn is over. Only an account kept busy for the whole window still meets
+ * the point-of-use renewal mid-turn, and the provider's 401 recovery covers that, as before.
+ *
+ * Accounts no subprocess is using are not touched: they are renewed where they are next
+ * used, which is the rule `account.service.ts` follows on purpose.
+ */
+import { accountService } from "../../services/account.service.ts";
+import { createLogger } from "../../services/logger.ts";
+import type { SubprocessCredential } from "../../providers/claude-agent-sdk.ts";
+
+const log = createLogger("token-rotation");
+
+/** Renew this close to expiry, as soon as nothing is running on the account. */
+export const QUIET_REFRESH_WINDOW_S = 2 * 3600;
+/** Inside this the point-of-use renewal owns the token (`PREFLIGHT_REFRESH_BUFFER_S`). */
+const POINT_OF_USE_BUFFER_S = 300;
+const SWEEP_INTERVAL_MS = 60_000;
+
+export interface LiveSubprocess {
+  sessionId: string;
+  credential: SubprocessCredential;
+  /** A turn, an approval or background work is running in it — dropping it would lose work. */
+  busy: boolean;
+}
+
+export interface RenewalCandidate {
+  id: string;
+  expiresAt: number | null;
+  /** An OAuth account with a refresh token that the server has not rejected. */
+  renewable: boolean;
+}
+
+/** Accounts to renew now: in use by some subprocess, near expiry, and busy in none. */
+export function accountsToRenewNow(candidates: RenewalCandidate[], live: LiveSubprocess[], nowS: number): string[] {
+  const inUse = new Set<string>();
+  const busy = new Set<string>();
+  for (const p of live) {
+    const id = p.credential.accountId;
+    if (!id || !p.credential.oauthToken) continue;
+    inUse.add(id);
+    if (p.busy) busy.add(id);
+  }
+  return candidates
+    .filter((c) => {
+      if (!c.renewable || c.expiresAt == null || !inUse.has(c.id) || busy.has(c.id)) return false;
+      const left = c.expiresAt - nowS;
+      return left <= QUIET_REFRESH_WINDOW_S && left > POINT_OF_USE_BUFFER_S;
+    })
+    .map((c) => c.id);
+}
+
+/** Idle subprocesses still holding a token their account no longer has. */
+export function staleIdleSessions(live: LiveSubprocess[], currentToken: (accountId: string) => string | null): string[] {
+  return live
+    .filter((p) => {
+      const id = p.credential.accountId;
+      if (p.busy || !id || !p.credential.oauthToken) return false;
+      const current = currentToken(id);
+      return current !== null && current !== p.credential.oauthToken;
+    })
+    .map((p) => p.sessionId);
+}
+
+export interface TokenRotationDeps {
+  /** Every live Claude subprocess and whether work is running in it right now. */
+  liveSubprocesses: () => LiveSubprocess[];
+  /** Restart one idle subprocess; its next message resumes on the account's current token. */
+  dropIdle: (sessionId: string) => void;
+}
+
+function currentOAuthToken(accountId: string): string | null {
+  const token = accountService.getWithTokens(accountId)?.accessToken;
+  return token && token.startsWith("sk-ant-oat") ? token : null;
+}
+
+/** Drop every idle subprocess whose token has been replaced. Safe to call at any time. */
+export function dropStaleIdle(deps: TokenRotationDeps): void {
+  for (const sessionId of staleIdleSessions(deps.liveSubprocesses(), currentOAuthToken)) {
+    log.info(`session=${sessionId} restarting idle subprocess: its account's token was renewed`);
+    deps.dropIdle(sessionId);
+  }
+}
+
+/** One pass: renew what is due and quiet, then move idle subprocesses onto new tokens. */
+export async function sweepTokenRotation(deps: TokenRotationDeps, nowS = Math.floor(Date.now() / 1000)): Promise<void> {
+  const candidates: RenewalCandidate[] = accountService.list().map((a) => {
+    const acc = accountService.getWithTokens(a.id);
+    return {
+      id: a.id,
+      expiresAt: acc?.expiresAt ?? null,
+      renewable: !!acc && acc.accessToken.startsWith("sk-ant-oat") && acc.refreshToken !== "" && !acc.reauthRequired,
+    };
+  });
+  for (const id of accountsToRenewNow(candidates, deps.liveSubprocesses(), nowS)) {
+    const left = (candidates.find((c) => c.id === id)?.expiresAt ?? nowS) - nowS;
+    log.info(`Renewing ${id} early while no turn runs on it (token expires in ${left}s)`);
+    try {
+      await accountService.refreshAccessToken(id, false, false, QUIET_REFRESH_WINDOW_S);
+    } catch (e) {
+      // The point-of-use renewal tries again before the token is needed.
+      log.warn(`Early renewal failed for ${id}: ${(e as Error).message}`);
+    }
+  }
+  dropStaleIdle(deps);
+}
+
+// Survive Bun --hot reloads: one timer and one listener, whichever module copy registered last.
+const HOT_KEY = "__PPM_TOKEN_ROTATION__" as const;
+const hot = ((globalThis as any)[HOT_KEY] ??= { stop: null, deps: null }) as {
+  stop: (() => void) | null;
+  deps: TokenRotationDeps | null;
+};
+
+/** Run a sweep now with the registered chat layer, rather than waiting for the timer. */
+export async function runTokenRotationSweep(): Promise<void> {
+  if (hot.deps) await sweepTokenRotation(hot.deps);
+}
+
+export function registerTokenRotation(deps: TokenRotationDeps): () => void {
+  hot.stop?.();
+  hot.deps = deps;
+  let sweeping = false;
+  const sweep = () => {
+    if (sweeping) return;
+    sweeping = true;
+    sweepTokenRotation(deps)
+      .catch((e) => log.warn(`token rotation sweep failed: ${(e as Error).message}`))
+      .finally(() => { sweeping = false; });
+  };
+  const timer = setInterval(sweep, SWEEP_INTERVAL_MS);
+  (timer as { unref?: () => void }).unref?.();
+  // Any renewal — this sweep's, a turn's pre-flight, the usage poller's — strands idle subprocesses.
+  const unlisten = accountService.onTokenRotated(() => dropStaleIdle(deps));
+  hot.stop = () => { clearInterval(timer); unlisten(); };
+  return hot.stop;
+}

package/src/server/ws/chat.ts

@@ -33,6 +33,8 @@ import { parseTabOpenResult, type TabOpenRequest } from "../../shared/tab-open-p
 import { readLastTurnStop } from "../../services/session-trace/turn-stop-reader.ts";
 import { describeTurnStop, type TurnStop } from "../../shared/turn-stop.ts";
 import { createLogger } from "../../services/logger.ts";
+import { dropStaleIdle, registerTokenRotation, type TokenRotationDeps } from "./chat-token-rotation.ts";
+import type { SubprocessCredential } from "../../providers/claude-agent-sdk.ts";
 
 const log = createLogger("chat");
 const bgShellLog = createLogger("bg-shell");
@@ -436,6 +438,28 @@ registerMcpSignInSync({
   ),
 });
 
+const tokenRotationDeps: TokenRotationDeps = {
+  liveSubprocesses: () => {
+    const provider = providerRegistry.get("claude") as {
+      liveSubprocessCredentials?: () => Array<{ sessionId: string; credential: SubprocessCredential }>;
+    } | undefined;
+    return (provider?.liveSubprocessCredentials?.() ?? []).map(({ sessionId, credential }) => {
+      const entry = activeSessions.get(sessionId);
+      // The consumer loop outlives each turn, so a live subprocess between turns sits at
+      // `idle` with `isStreamingActive` still set. A subprocess with no entry here belongs to
+      // something else (a scheduled run) and is never ours to judge idle.
+      const busy = !entry || entry.phase !== "idle" || !!entry.pendingApprovalEvent || hasBackgroundWork(sessionId);
+      return { sessionId, credential, busy };
+    });
+  },
+  dropIdle: (sessionId) => dropIdleSubprocess(
+    sessionId,
+    "token_rotated",
+    "Subprocess restarted: its account's sign-in token was renewed, the next message resumes on the new one",
+  ),
+};
+registerTokenRotation(tokenRotationDeps);
+
 /**
  * Sessions with a turn in flight, optionally narrowed to one project.
  *
@@ -1253,6 +1277,10 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
           broadcast(sessionId, { type: "compact_status", status: "done" });
         }
         setPhase(sessionId, "idle");
+        // A renewal that landed while this turn ran left its subprocess holding a revoked
+        // token; restart it now rather than let the next message open with a 401. Deferred so
+        // the drop does not close the query from inside the loop that is reading it.
+        setTimeout(() => dropStaleIdle(tokenRotationDeps), 0);
         // Reset heartbeat tracking for next turn
         firstEventReceived = false;
         startTime = Date.now();

package/src/services/account.service.ts

@@ -166,6 +166,17 @@ class AccountService {
   private pendingStates = new Map<string, { verifier: string; createdAt: number }>();
   /** Per-account mutex: dedup concurrent refresh calls so only one OAuth request fires at a time. */
   private pendingRefreshes = new Map<string, Promise<void>>();
+  private tokenListeners = new Set<(accountId: string) => void>();
+
+  /**
+   * Hear about every replaced access token. Renewing one revokes the previous token, so a
+   * Claude subprocess still holding it fails its next request — see
+   * `src/server/ws/chat-token-rotation.ts`, which moves idle chats onto the new one.
+   */
+  onTokenRotated(listener: (accountId: string) => void): () => void {
+    this.tokenListeners.add(listener);
+    return () => { this.tokenListeners.delete(listener); };
+  }
 
   private toAccount(row: AccountRow): Account {
     let profileData: OAuthProfileData | null = null;
@@ -518,6 +529,9 @@ class AccountService {
       reauth_required: 0,
       ...(parked ? {} : { status: "active" as const }),
     });
+    for (const listener of this.tokenListeners) {
+      try { listener(id); } catch (e) { log.warn(`token rotation listener failed for ${id}: ${(e as Error).message}`); }
+    }
   }
 
   /**

package/src/web/components/chat/chat-reconnect-banner.tsx

@@ -0,0 +1,54 @@
+import { Loader2, WifiOff } from "@/lib/icons";
+import { useReconnectIndicator } from "@/hooks/use-reconnect-indicator";
+
+interface ChatReconnectBannerProps {
+  isReconnecting: boolean;
+  onRetry: () => void;
+  /** Overrides for tests; production uses the hook's defaults. */
+  showDelayMs?: number;
+  lostAfterMs?: number;
+}
+
+/**
+ * A small pill floating over the top of the chat while the socket reconnects.
+ *
+ * It deliberately covers nothing else: the messages on screen stay readable and
+ * scrollable, and anything sent meanwhile is queued and goes out on reconnect.
+ */
+export function ChatReconnectBanner({ isReconnecting, onRetry, showDelayMs, lostAfterMs }: ChatReconnectBannerProps) {
+  const { stage, restart } = useReconnectIndicator(isReconnecting, showDelayMs, lostAfterMs);
+  if (stage === "hidden") return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-x-0 top-2 z-40 flex justify-center px-4">
+      <div
+        role="status"
+        aria-live="polite"
+        data-reconnect-stage={stage}
+        className="pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-surface/95 px-3 py-1 text-xs text-text-secondary shadow-sm backdrop-blur-sm"
+      >
+        {stage === "reconnecting" ? (
+          <>
+            <Loader2 className="size-3.5 animate-spin" />
+            <span>Reconnecting…</span>
+          </>
+        ) : (
+          <>
+            <WifiOff className="size-3.5 text-error" />
+            <span>Connection lost</span>
+            <button
+              type="button"
+              onClick={() => {
+                restart();
+                onRetry();
+              }}
+              className="-my-1 min-h-11 rounded-full px-2 font-medium text-primary hover:underline active:opacity-70 md:min-h-0 md:py-1"
+            >
+              Retry
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -19,6 +19,7 @@ import { useChatAccountClaim } from "@/hooks/use-chat-account-claim";
 import { startPrepare, getPrepare, isPrepared, forgetPrepare } from "@/lib/new-chat-prepare-client";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
+import { ChatReconnectBanner } from "./chat-reconnect-banner";
 import { RunningAgentsBar } from "./running-agents-bar";
 import { AgentSessionProvider, normalizeProviderId } from "./agent-session-context";
 import { McpSignInBar } from "@/components/mcp-auth/mcp-sign-in-bar";
@@ -473,6 +474,12 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     killBackgroundShell,
   } = useChat(sessionId, providerId, projectName, handleSessionMigrated, observeAttempt, replyTransportOptions);
 
+  // Shared by the history bar's reload button and the reconnect pill's Retry.
+  const reloadChat = useCallback(() => {
+    if (!isConnected) reconnect();
+    refetchMessages();
+  }, [isConnected, reconnect, refetchMessages]);
+
   const sessionChanges = useSessionFileChanges({ projectName, sessionId, messages, isStreaming });
   const openReview = useCallback((path?: string) => {
     if (!sessionId) return;
@@ -1283,15 +1290,8 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         </div>
       )}
 
-      {/* Reconnect overlay */}
-      {isReconnecting && (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Loader2 className="size-4 animate-spin" />
-            <span>Reconnecting...</span>
-          </div>
-        </div>
-      )}
+      {/* Reconnect status — a pill, not an overlay: the chat stays readable and usable */}
+      <ChatReconnectBanner isReconnecting={isReconnecting} onRetry={reloadChat} />
 
       {/* Edit-fork overlay — covers the chat while the new version forks + connects */}
       {editForking && (
@@ -1399,10 +1399,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           onSelectSession={handleSelectSession}
           historyFilter={historyFilter}
           isConnected={isConnected}
-          onReload={() => {
-            if (!isConnected) reconnect();
-            refetchMessages();
-          }}
+          onReload={reloadChat}
           teamActivity={teamActivity}
           teamMessages={teamMessages}
           onTeamOpen={markTeamRead}

package/src/web/hooks/use-reconnect-indicator.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from "react";
+
+/** What the chat shows while its socket is being re-established. */
+export type ReconnectStage = "hidden" | "reconnecting" | "lost";
+
+/** A reconnect that lands within this window is never shown — returning to the app should not flash. */
+export const RECONNECT_SHOW_DELAY_MS = 800;
+/** Past this the connection is reported lost and a retry is offered. */
+export const RECONNECT_LOST_AFTER_MS = 8_000;
+
+/**
+ * Turns a raw `isReconnecting` flag into what is worth telling the user.
+ *
+ * A phone browser closes the socket of every page it sends to the background, so a
+ * reconnect follows almost every return to PPM and usually finishes in well under a
+ * second. Both timers restart whenever the page becomes visible again: timers frozen
+ * while the page was hidden fire as soon as it resumes, which would otherwise report
+ * a connection that started reconnecting a moment ago as lost.
+ */
+export function useReconnectIndicator(
+  isReconnecting: boolean,
+  showDelayMs = RECONNECT_SHOW_DELAY_MS,
+  lostAfterMs = RECONNECT_LOST_AFTER_MS,
+): { stage: ReconnectStage; restart: () => void } {
+  const [stage, setStage] = useState<ReconnectStage>("hidden");
+  const [epoch, setEpoch] = useState(0);
+  const restart = useCallback(() => setEpoch((n) => n + 1), []);
+
+  useEffect(() => {
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") restart();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [restart]);
+
+  useEffect(() => {
+    setStage("hidden");
+    if (!isReconnecting) return;
+    const show = setTimeout(() => setStage("reconnecting"), showDelayMs);
+    const lost = setTimeout(() => setStage("lost"), lostAfterMs);
+    return () => {
+      clearTimeout(show);
+      clearTimeout(lost);
+    };
+  }, [isReconnecting, showDelayMs, lostAfterMs, epoch]);
+
+  return { stage, restart };
+}