@hienlh/ppm 0.23.22 → 0.23.23

package/src/server/ws/chat.ts

@@ -24,6 +24,8 @@ import { isAsyncAgentLaunchAck, isTerminalAgentStatus } from "../../shared/backg
 import { cacheReleaseDelayMs, selectWarmIdleEvictions } from "../../services/subprocess-retention.ts";
 import { needsAuthServerNames } from "../../services/mcp-oauth/mcp-oauth-redirect.ts";
 import { mcpStatusEvent, registerMcpSignInSync } from "./chat-mcp-sign-in-sync.ts";
+import { refreshEffortStatus, sessionEffortStatus } from "./chat-effort-status.ts";
+import type { EffortStatus } from "../../shared/effort-status.ts";
 import { claudeTranscriptExists } from "../../services/claude-transcript-exists.ts";
 import { registerMemoryGauge } from "../../services/memory-diagnostics.ts";
 import { setTabOpenDelivery, tabOpenBroker } from "../../services/tab-tools-mcp/tab-open-broker.ts";
@@ -114,6 +116,11 @@ function resolveSessionEffort(sessionId: string): string | undefined {
   return getSessionEffort(sessionId) ?? sessionProviderConfig(sessionId)?.effort;
 }
 
+/** What overrides the effort shown in session_state, if anything does. */
+function resolveEffortStatus(sessionId: string, entry: SessionEntry): EffortStatus | null {
+  return sessionEffortStatus(providerRegistry.get(entry.providerId), entry, resolveSessionModel(sessionId));
+}
+
 /** Whether thinking is effectively ON: per-session override wins, else provider config, else SDK default. */
 function resolveSessionThinkingEnabled(sessionId: string): boolean {
   return isThinkingEnabled(
@@ -196,6 +203,8 @@ interface SessionEntry {
   compactStatus?: "compacting" | null;
   /** MCP servers the subprocess reported as `needs-auth` at init — drives the chat's sign-in bar */
   mcpNeedsAuth?: string[];
+  /** What the subprocess said at the last turn's start about the effort it sends — see chat-effort-status.ts */
+  effortStatus?: EffortStatus;
   /** toolUseIds of Bash/Agent calls launched with run_in_background — their spy outlives the tool_result */
   backgroundToolUseIds?: Set<string>;
   /** Nested-agent children buffered into turnEvents this turn (see MAX_NESTED_TURN_EVENTS) */
@@ -957,9 +966,20 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
       // System events → transition connecting → thinking, forward compact events
       if (evType === "system") {
         const sub = (ev as any).subtype;
-        if (sub === "init" && Array.isArray(ev.mcpServers)) {
-          entry.mcpNeedsAuth = needsAuthServerNames(ev.mcpServers);
-          broadcast(sessionId, mcpStatusEvent(entry.mcpNeedsAuth));
+        if (sub === "init") {
+          if (Array.isArray(ev.mcpServers)) {
+            entry.mcpNeedsAuth = needsAuthServerNames(ev.mcpServers);
+            broadcast(sessionId, mcpStatusEvent(entry.mcpNeedsAuth));
+          }
+          // Not awaited: the turn goes on while the CLI answers.
+          void refreshEffortStatus({
+            sessionId,
+            session: entry,
+            provider: providerRegistry.get(entry.providerId),
+            isCurrent: () => activeSessions.get(sessionId) === entry,
+            broadcast: (event) => broadcast(sessionId, event),
+            log: (line) => logSessionEvent(sessionId, "INFO", line),
+          });
         } else if (sub === "compacting") {
           entry.compactStatus = "compacting";
           log.debug(`session=${sessionId} compact_status=compacting (persisted on entry)`);
@@ -1388,6 +1408,7 @@ export const chatWebSocket = {
         mcpNeedsAuth: existing.mcpNeedsAuth ?? [],
         model: resolveSessionModel(sessionId),
         effort: resolveSessionEffort(sessionId),
+        effortStatus: resolveEffortStatus(sessionId, existing),
         thinking: resolveSessionThinkingEnabled(sessionId),
         promptCache: promptCacheSnapshot(sessionId, existing),
         turnStop: existing.phase === "idle" ? lastTurnStop(sessionId) : null,
@@ -1557,6 +1578,7 @@ export const chatWebSocket = {
         mcpNeedsAuth: entry.mcpNeedsAuth ?? [],
         model: resolveSessionModel(sessionId),
         effort: resolveSessionEffort(sessionId),
+        effortStatus: resolveEffortStatus(sessionId, entry),
         thinking: resolveSessionThinkingEnabled(sessionId),
         promptCache: promptCacheSnapshot(sessionId, entry),
         turnStop: entry.phase === "idle" ? lastTurnStop(sessionId) : null,
@@ -1779,6 +1801,8 @@ export const chatWebSocket = {
       }
       entry.model = parsed.model;
       setSessionModel(sessionId, parsed.model);
+      // Its levels and limits were the old model's; the settings files stand in until the next turn asks.
+      entry.effortStatus = undefined;
       const provider = providerRegistry.get(providerId);
       const hasLiveStream = provider?.hasStreamingSession?.(sessionId) ?? false;
       // Only abort when idle between turns — never interrupt an active turn.
@@ -1798,6 +1822,7 @@ export const chatWebSocket = {
         mcpNeedsAuth: entry.mcpNeedsAuth ?? [],
         model: resolveSessionModel(sessionId),
         effort: resolveSessionEffort(sessionId),
+        effortStatus: resolveEffortStatus(sessionId, entry),
         thinking: resolveSessionThinkingEnabled(sessionId),
       }));
     } else if (parsed.type === "set_effort") {
@@ -1825,6 +1850,7 @@ export const chatWebSocket = {
         mcpNeedsAuth: entry.mcpNeedsAuth ?? [],
         model: resolveSessionModel(sessionId),
         effort: resolveSessionEffort(sessionId),
+        effortStatus: resolveEffortStatus(sessionId, entry),
         thinking: resolveSessionThinkingEnabled(sessionId),
       }));
     } else if (parsed.type === "set_thinking") {
@@ -1846,6 +1872,7 @@ export const chatWebSocket = {
         mcpNeedsAuth: entry.mcpNeedsAuth ?? [],
         model: resolveSessionModel(sessionId),
         effort: resolveSessionEffort(sessionId),
+        effortStatus: resolveEffortStatus(sessionId, entry),
         thinking: resolveSessionThinkingEnabled(sessionId),
       }));
     } else if (parsed.type === "cancel") {

package/src/shared/effort-status.ts

@@ -0,0 +1,128 @@
+/**
+ * The effort a Claude session actually runs at, which is not always the one picked in PPM.
+ *
+ * Claude Code settles it in this order (measured against the bundled CLI's `get_settings`):
+ * `CLAUDE_CODE_EFFORT_LEVEL` beats the `--effort` PPM passes, whether it is in the environment
+ * or in the `env` block of a settings file, and a settings file beats the environment; a
+ * `maxEffortLevel` in the settings then clamps what is left; and a model without a level runs
+ * Extra and Max as High, or sends no effort at all. With
+ * `"env": { "CLAUDE_CODE_EFFORT_LEVEL": "max" }` in `~/.claude/settings.json`, every PPM chat
+ * ran at Max while the picker said High.
+ */
+
+export const EFFORT_LEVELS = ["low", "medium", "high", "xhigh", "max"] as const;
+export type EffortLevel = (typeof EFFORT_LEVELS)[number];
+
+export function isEffortLevel(value: unknown): value is EffortLevel {
+  return typeof value === "string" && (EFFORT_LEVELS as readonly string[]).includes(value);
+}
+
+export function effortRank(level: EffortLevel): number {
+  return EFFORT_LEVELS.indexOf(level);
+}
+
+/** A settings file, as the CLI names its sources, or the environment PPM starts the CLI with. */
+export type EffortSettingSource =
+  | "userSettings"
+  | "projectSettings"
+  | "localSettings"
+  | "flagSettings"
+  | "policySettings"
+  | "environment";
+
+export interface EffortSetting<T> {
+  value: T;
+  source: EffortSettingSource;
+  /** The file it is written in, the way the user would look for it. */
+  file?: string;
+}
+
+export interface EffortStatus {
+  /** `CLAUDE_CODE_EFFORT_LEVEL` as the CLI reads it. Absent when unset or a value the CLI ignores. */
+  env?: EffortSetting<string>;
+  /** The lowest `maxEffortLevel` the settings files set for the session's model. */
+  cap?: EffortSetting<EffortLevel>;
+  /**
+   * The running CLI's own answer: the effort it was started with and the one it sends. Only
+   * the CLI knows its organization's limits and what its model takes, so this outranks the rest.
+   */
+  observed?: { requested: EffortLevel | null; applied: EffortLevel | null; model?: string };
+  /** Levels the model runs as themselves, [] when it takes none. Absent when the CLI did not say. */
+  supported?: EffortLevel[];
+}
+
+export type EffortEnvMeaning =
+  | { kind: "level"; level: EffortLevel }
+  /** `auto` or `unset`: no effort is sent and the model's default applies. */
+  | { kind: "auto" }
+  /** A number: a thinking budget, sent instead of an effort level. */
+  | { kind: "budget" };
+
+/** What the CLI makes of `CLAUDE_CODE_EFFORT_LEVEL`, parsed as it parses it; null for a value it ignores. */
+export function effortEnvMeaning(raw: string | null | undefined): EffortEnvMeaning | null {
+  if (!raw) return null;
+  const value = raw.toLowerCase();
+  if (value === "auto" || value === "unset") return { kind: "auto" };
+  const level = value === "med" ? "medium" : value;
+  if (isEffortLevel(level)) return { kind: "level", level };
+  return Number.isNaN(parseInt(value, 10)) ? null : { kind: "budget" };
+}
+
+export interface EffortInEffect {
+  /** The level each request carries; null when none is sent, or when only the CLI can tell which. */
+  level: EffortLevel | null;
+  /** What decided it when that is not simply the pick. */
+  reason: "env" | "cap" | "model" | null;
+}
+
+/** The effort a turn runs at given the level picked in PPM, and what overrides the pick if anything does. */
+export function effortInEffect(pick: EffortLevel, status: EffortStatus | null | undefined): EffortInEffect {
+  if (!status) return { level: pick, reason: null };
+  const env = effortEnvMeaning(status.env?.value);
+  const { observed } = status;
+  if (env) {
+    // The variable outranks every pick, so the CLI's answer stays true whatever is picked since.
+    if (observed) return { level: observed.applied, reason: "env" };
+    return { level: envLevel(env, status), reason: "env" };
+  }
+  // A pick made after the CLI last answered is checked against the limits it reported.
+  const level = observed && observed.requested === pick ? observed.applied : withinLimits(pick, status);
+  if (level === pick) return { level, reason: null };
+  const capped = !!status.cap && effortRank(pick) > effortRank(status.cap.value);
+  return { level, reason: capped ? "cap" : "model" };
+}
+
+/**
+ * What the CLI makes of the variable before it has said so itself. A settings cap changes it:
+ * a number is then read as High and `auto` sends the model's own default, each clamped to the cap,
+ * where without one neither sends an effort. That default differs by model (measured: Medium on
+ * Opus 5.5, High on Opus 4.5, 4.6 and Sonnet 4.6), so under any cap but Low, which leaves nothing
+ * lower, only the CLI's answer can say which level `auto` gives.
+ */
+function envLevel(env: EffortEnvMeaning, status: EffortStatus): EffortLevel | null {
+  if (env.kind === "level") return withinLimits(env.level, status);
+  if (!status.cap) return null;
+  if (env.kind === "budget") return withinLimits("high", status);
+  return status.cap.value === "low" ? withinLimits("low", status) : null;
+}
+
+function withinLimits(level: EffortLevel, status: EffortStatus): EffortLevel | null {
+  if (status.supported?.length === 0) return null;
+  const capped = status.cap && effortRank(level) > effortRank(status.cap.value) ? status.cap.value : level;
+  // The CLI's own fallback for a model without Extra or Max.
+  const unsupported = status.supported && !status.supported.includes(capped);
+  return unsupported && (capped === "xhigh" || capped === "max") ? "high" : capped;
+}
+
+/** Where a setting lives, for a sentence that tells the user where to change it. */
+export function effortSettingPlace(setting: EffortSetting<unknown>): string {
+  if (setting.file) return setting.file;
+  switch (setting.source) {
+    case "userSettings": return "~/.claude/settings.json";
+    case "projectSettings": return ".claude/settings.json";
+    case "localSettings": return ".claude/settings.local.json";
+    case "policySettings": return "managed settings";
+    case "flagSettings": return "the settings PPM passes to Claude Code";
+    case "environment": return "the environment PPM runs in";
+  }
+}

package/src/types/api.ts

@@ -77,7 +77,9 @@ export type ChatWsServerMessage =
   | { type: "error"; message: string }
   | { type: "account_info"; accountId: string; accountLabel: string }
   | { type: "phase_changed"; phase: SessionPhase; elapsed?: number }
-  | { type: "session_state"; sessionId: string; phase: SessionPhase; pendingApproval: { requestId: string; tool: string; input: unknown } | null; sessionTitle: string | null; model?: string; effort?: string; thinking?: boolean; turnStop?: import("../shared/turn-stop").TurnStop | null }
+  | { type: "session_state"; sessionId: string; phase: SessionPhase; pendingApproval: { requestId: string; tool: string; input: unknown } | null; sessionTitle: string | null; model?: string; effort?: string; thinking?: boolean; effortStatus?: import("../shared/effort-status").EffortStatus | null; turnStop?: import("../shared/turn-stop").TurnStop | null }
+  /** What the session's CLI said about its effort when the turn started. */
+  | { type: "effort_status"; status: import("../shared/effort-status").EffortStatus }
   /** The turn that just ended was ended by an error. Sent just before its `done`. */
   | { type: "turn_stop"; stop: import("../shared/turn-stop").TurnStop }
   | { type: "turn_events"; events: unknown[]; streamSeq?: number; truncated?: boolean }

package/src/types/chat.ts

@@ -106,6 +106,14 @@ export interface AIProvider {
   getUsage?(sessionId?: string, pickedAccountId?: string): Promise<UsageInfo>;
   /** True when a live streaming subprocess exists for this session */
   hasStreamingSession?(sessionId: string): boolean;
+  /**
+   * The effort the session's live subprocess sends and what overrides the pick there; null
+   * when none is running or it cannot say. Only providers whose effort can be overridden
+   * outside PPM implement it.
+   */
+  readEffortStatus?(sessionId: string): Promise<import("../shared/effort-status").EffortStatus | null>;
+  /** The same overrides, worked out from settings files for a session nothing has started yet. */
+  estimateEffortStatus?(projectPath: string | undefined, model?: string): import("../shared/effort-status").EffortStatus;
   /** Prompt-cache lifetime for this session, in ms — how long holding its subprocess pays. */
   promptCacheTtlMs?(sessionId: string): number;
 }

package/src/web/components/chat/chat-scroll-nav.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ChevronUp, ChevronDown, ChevronsDown, ChevronsUpDown } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { useIsMobile } from "@/hooks/use-is-mobile";
@@ -52,14 +52,18 @@ export function ChatScrollNav({ scrollElement, userIndices, scrollToBottom }: {
   const rowTop = (el: HTMLElement, row: HTMLElement, elTop: number) =>
     row.getBoundingClientRect().top - elTop + el.scrollTop;
 
-  const userRows = useCallback((el: HTMLElement) =>
-    Array.from(el.querySelectorAll<HTMLElement>("[data-msg-index]"))
-      .filter((r) => userIndices.includes(Number(r.dataset.msgIndex))),
-    [userIndices]);
+  const userRows = useCallback((el: HTMLElement) => {
+    const users = new Set(userIndices);
+    return Array.from(el.querySelectorAll<HTMLElement>("[data-msg-index]"))
+      .filter((r) => users.has(Number(r.dataset.msgIndex)));
+  }, [userIndices]);
 
-  useEffect(() => {
+  // Followed only while the cluster is open, since nothing at rest shows it. A streaming answer
+  // scrolls the transcript on every flush, and each scroll measured every user row; a layout
+  // effect so opening shows the real position, not the last one.
+  useLayoutEffect(() => {
     const el = scrollElement;
-    if (!el) return;
+    if (!el || !open) return;
     let raf = 0;
     const recompute = () => {
       const top = el.scrollTop;
@@ -91,7 +95,7 @@ export function ChatScrollNav({ scrollElement, userIndices, scrollToBottom }: {
       el.removeEventListener("scroll", schedule);
       ro.disconnect();
     };
-  }, [scrollElement, userRows]);
+  }, [scrollElement, userRows, open]);
 
   // Auto-collapse. Restarts on every jump so a burst of navigation keeps it open.
   useEffect(() => {

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

@@ -9,6 +9,7 @@ import { splitAttachmentMarkers } from "@/lib/attachment-marker-split";
 import type { ChatAttemptEvent } from "@/lib/chat-attempt-lifecycle";
 import { useChat } from "@/hooks/use-chat";
 import { useChatPrewarm } from "@/hooks/use-chat-prewarm";
+import { useEffortStatus } from "@/hooks/use-effort-status";
 import { useUsage } from "@/hooks/use-usage";
 import { useDesignSessionRedirect } from "@/hooks/use-design-session-redirect";
 import { useTabStore } from "@/stores/tab-store";
@@ -26,9 +27,8 @@ import { AgentSessionProvider, normalizeProviderId } from "./agent-session-conte
 import { McpSignInBar } from "@/components/mcp-auth/mcp-sign-in-bar";
 import { SessionChangesBar } from "./session-changes-bar";
 import { CONTINUE_AFTER_STOP, TurnStopBar } from "./turn-stop-bar";
-import { SessionChangesContext, type SessionChangesValue } from "./session-changes-context";
+import { SessionChangesContext, useSessionChangesValue } from "./session-changes-context";
 import { useSessionFileChanges } from "@/hooks/use-session-file-changes";
-import { openSessionReview } from "@/lib/session-file-changes-client";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
 import { MessageInput, type ChatAttachment, type MessagePriority } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
@@ -458,6 +458,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     setModel,
     effort,
     setEffort,
+    effortStatus: sessionEffortStatus,
     thinking,
     setThinking,
     turnSettings,
@@ -481,17 +482,19 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     refetchMessages();
   }, [isConnected, reconnect, refetchMessages]);
 
+  const effortStatus = useEffortStatus({
+    projectName,
+    // Not while the provider is still a guess: the answer would be about another provider.
+    providerId: preparation.pending ? undefined : preparation.providerId ?? providerId,
+    model,
+    sessionStatus: sessionEffortStatus,
+  });
+
   const sessionChanges = useSessionFileChanges({ projectName, sessionId, messages, isStreaming });
-  const openReview = useCallback((path?: string) => {
-    if (!sessionId) return;
-    openSessionReview({ projectName, sessionId, title: sessionTitle || undefined, providerId, paths: sessionChanges.paths, selectPath: path });
-  }, [projectName, sessionId, sessionTitle, providerId, sessionChanges.paths]);
   // Each turn's change tray answers the same list the bar shows.
-  const sessionChangesValue = useMemo((): SessionChangesValue | null => (
-    projectName && sessionId
-      ? { projectName, sessionId, files: sessionChanges.files, refresh: sessionChanges.refresh, openReview }
-      : null
-  ), [projectName, sessionId, sessionChanges.files, sessionChanges.refresh, openReview]);
+  const { value: sessionChangesValue, openReview } = useSessionChangesValue({
+    projectName, sessionId, title: sessionTitle || undefined, providerId, changes: sessionChanges,
+  });
 
   // `model`/`effort`/`thinking` are what change when a pick does; the picks sent are read
   // through `turnSettings`, which leaves out whatever the user has not chosen.
@@ -1492,6 +1495,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             model={model}
             onModelChange={!preparation?.pending && !firstSendPending ? setModel : undefined}
             effort={effort}
+            effortStatus={effortStatus}
             onEffortChange={setEffort}
             thinking={thinking}
             onThinkingChange={setThinking}

package/src/web/components/chat/message-action-bar.tsx

@@ -3,16 +3,33 @@ import { Copy, Check } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { formatRelativeDate } from "@/lib/format-date";
 import { copyToClipboard } from "@/lib/clipboard";
+import { useRelativeTimeTick } from "@/hooks/use-relative-time-tick";
+
+// The fields `toLocaleString()` prints, in one formatter: a long chat draws hundreds of these.
+let fullDateFormat: Intl.DateTimeFormat | undefined;
 
 /** Full timestamp for the relative-time tooltip. */
 function fullDate(iso: string): string {
   try {
-    return new Date(iso).toLocaleString();
+    fullDateFormat ??= new Intl.DateTimeFormat(undefined, {
+      year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric",
+    });
+    return fullDateFormat.format(new Date(iso));
   } catch {
     return "";
   }
 }
 
+/** The relative time, kept current on its own so the message around it is never redrawn for it. */
+function RelativeTime({ timestamp }: { timestamp: string }) {
+  useRelativeTimeTick();
+  return (
+    <time title={fullDate(timestamp)} className="pr-1 tabular-nums">
+      {formatRelativeDate(timestamp)}
+    </time>
+  );
+}
+
 /**
  * Ghost-pill action button (icon + label) for the message action bar.
  * 44px min touch target on mobile; tighter on desktop. Always visible.
@@ -84,9 +101,7 @@ export function MessageActionBar({
         className,
       )}
     >
-      <time title={fullDate(timestamp)} className="pr-1 tabular-nums">
-        {formatRelativeDate(timestamp)}
-      </time>
+      <RelativeTime timestamp={timestamp} />
       <CopyButton content={content} />
       {children}
     </div>

package/src/web/components/chat/message-input.tsx

@@ -27,6 +27,7 @@ import { ReplyCard } from "./reply-card";
 import type { ReplyReference } from "../../../shared/chat-reply";
 import { PromptCacheChip } from "./prompt-cache-chip";
 import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
+import type { EffortStatus } from "../../../shared/effort-status";
 
 /**
  * Base64 payload for an image file, or undefined when it cannot be read.
@@ -144,6 +145,8 @@ interface MessageInputProps {
   onModelChange?: (model: string) => void;
   /** Current per-session effort (null = provider default) */
   effort?: string | null;
+  /** What overrides the effort pick outside PPM (CLAUDE_CODE_EFFORT_LEVEL, a settings cap, the model) */
+  effortStatus?: EffortStatus | null;
   /** Effort change handler */
   onEffortChange?: (effort: string) => void;
   /** Current per-session thinking on/off */
@@ -191,6 +194,7 @@ export const MessageInput = memo(function MessageInput({
   model,
   onModelChange,
   effort,
+  effortStatus,
   onEffortChange,
   thinking,
   onThinkingChange,
@@ -1048,6 +1052,7 @@ export const MessageInput = memo(function MessageInput({
             <ModelThinkingSelector
               model={model ?? null}
               effort={effort ?? null}
+              effortStatus={effortStatus}
               thinking={thinking ?? false}
               onModelChange={onModelChange}
               onEffortChange={onEffortChange ?? (() => {})}
@@ -1152,6 +1157,7 @@ export const MessageInput = memo(function MessageInput({
               <ModelThinkingSelector
                 model={model ?? null}
                 effort={effort ?? null}
+                effortStatus={effortStatus}
                 thinking={thinking ?? false}
                 onModelChange={onModelChange}
                 onEffortChange={onEffortChange ?? (() => {})}

package/src/web/components/chat/message-list.tsx

@@ -1,4 +1,4 @@
-import type { ReplyReference } from "../../../shared/chat-reply";
+import { decodeReply, type ReplyReference } from "../../../shared/chat-reply";
 import { createReplyReference, resolveReplyMessage } from "./message-reply-reference";
 import { useEffect, useRef, useState, useMemo, useCallback, useLayoutEffect, memo } from "react";
 import { userMessageOrdinals } from "@/lib/message-ordinals";
@@ -205,8 +205,12 @@ export function MessageList({
   // Mirror the lib's scroll-element ref into state so effects/nav re-run when the
   // scroll container mounts late (it appears only after the loading screen).
   const [scrollEl, setScrollEl] = useState<HTMLDivElement | null>(null);
+  // Read by the callbacks every bubble holds: one built on the state above changes when
+  // the container mounts, which drew the whole transcript twice on every open.
+  const scrollElRef = useRef<HTMLDivElement | null>(null);
   const setScrollRef = useCallback((el: HTMLDivElement | null) => {
     scrollRef(el);
+    scrollElRef.current = el;
     setScrollEl(el);
   }, [scrollRef]);
 
@@ -238,10 +242,11 @@ export function MessageList({
   // cleanup clears the pending flash, so a second jump can't leave a stale highlight.
   const flashCleanupRef = useRef<(() => void) | null>(null);
   const handleJumpToEdit = useCallback((editRef: string) => {
-    if (!scrollEl) return;
+    const el = scrollElRef.current;
+    if (!el) return;
     flashCleanupRef.current?.();
-    flashCleanupRef.current = jumpToEdit(scrollEl, editRef);
-  }, [scrollEl]);
+    flashCleanupRef.current = jumpToEdit(el, editRef);
+  }, []);
   useEffect(() => () => flashCleanupRef.current?.(), []);
 
   // The Review tab names the turn that wrote each block from what this chat shows.
@@ -338,26 +343,31 @@ export function MessageList({
     const reply = createReplyReference(message, sessionId, providerId);
     if (reply) onReply?.(reply);
   }, [sessionId, providerId, onReply]);
-  const replyAvailable = useCallback((reply: ReplyReference) => !!resolveReplyMessage(filtered, reply, sessionId, providerId), [filtered, sessionId, providerId]);
   const replyFlashCleanup = useRef<(() => void) | null>(null);
   useEffect(() => () => replyFlashCleanup.current?.(), []);
   /** Scroll to the message at `index` of `filtered` and flash it; false when it is not drawn. */
   const showMessageAt = useCallback((index: number) => {
-    const target = scrollEl?.querySelector<HTMLElement>(`[data-msg-index="${index}"]`);
-    if (!scrollEl || !target) return false;
+    const el = scrollElRef.current;
+    const target = el?.querySelector<HTMLElement>(`[data-msg-index="${index}"]`);
+    if (!el || !target) return false;
     stopScroll();
     replyFlashCleanup.current?.();
-    scrollEl.scrollTo({ top: scrollEl.scrollTop + target.getBoundingClientRect().top - scrollEl.getBoundingClientRect().top - 24, behavior: "smooth" });
+    el.scrollTo({ top: el.scrollTop + target.getBoundingClientRect().top - el.getBoundingClientRect().top - 24, behavior: "smooth" });
     target.classList.add("bg-primary/10", "ring-1", "ring-primary/40");
     const clear = () => target.classList.remove("bg-primary/10", "ring-1", "ring-primary/40");
     const timer = setTimeout(clear, 1400);
     replyFlashCleanup.current = () => { clearTimeout(timer); clear(); };
     return true;
-  }, [scrollEl, stopScroll]);
+  }, [stopScroll]);
+  // Every bubble holds this callback and `filtered` is new on every streamed flush, so
+  // depending on it re-rendered the whole transcript ten times a second. Only a click reads it.
+  const filteredRef = useRef(filtered);
+  useLayoutEffect(() => { filteredRef.current = filtered; }, [filtered]);
   const handleJumpToReply = useCallback((reply: ReplyReference) => {
-    const message = resolveReplyMessage(filtered, reply, sessionId, providerId);
-    if (message) showMessageAt(filtered.indexOf(message));
-  }, [filtered, sessionId, providerId, showMessageAt]);
+    const list = filteredRef.current;
+    const message = resolveReplyMessage(list, reply, sessionId, providerId);
+    if (message) showMessageAt(list.indexOf(message));
+  }, [sessionId, providerId, showMessageAt]);
 
   // "Show in chat" from the Review tab: the call's card, or the prompt that asked for it when
   // the card is not drawn (a sub-agent's call). Waits for the tab to be shown and its history to
@@ -482,14 +492,32 @@ export function MessageList({
     const el = scrollEl;
     const sentinel = topSentinelRef.current;
     if (!el || !sentinel || !hasMore || compactLoadError) return;
+    // A transcript parked out of sight (its panel unmounted on a project switch) has no height,
+    // so its top always reads as in range; loading then grew the chat by a page on every switch
+    // back. What the observer says there is set aside and asked again once there is a height:
+    // it reports changes only, so a short transcript whose top stayed in range heard nothing.
+    let parked = false;
     const io = new IntersectionObserver(
-      (entries) => { if (entries.some((e) => e.isIntersecting)) loadMore(); },
+      (entries) => {
+        parked = el.clientHeight === 0;
+        if (!parked && entries.some((e) => e.isIntersecting)) loadMore();
+      },
       // Start the fetch while the top is still a screenful away, so the next
       // segment is usually there before the user reaches the end of this one.
       { root: el, rootMargin: "400px 0px 0px 0px" },
     );
     io.observe(sentinel);
-    return () => io.disconnect();
+    const ro = new ResizeObserver(() => {
+      if (!parked || el.clientHeight === 0) return;
+      parked = false;
+      io.unobserve(sentinel);
+      io.observe(sentinel);
+    });
+    ro.observe(el);
+    return () => {
+      io.disconnect();
+      ro.disconnect();
+    };
   }, [scrollEl, hasMore, compactLoadError, loadMore]);
 
   if (messagesLoading && (!keepStaleWhileLoading || messages.length === 0)) {
@@ -576,6 +604,10 @@ export function MessageList({
               }
               turnCopyText = parts.join("\n\n");
             }
+            // A boolean rather than a lookup the bubble calls while rendering: it has to change
+            // when older history brings the quoted message in, and not on every streamed flush.
+            const replyTo = msg.role === "user" ? decodeReply(msg.content).replyTo : null;
+            const replyAvailable = replyTo ? !!resolveReplyMessage(filtered, replyTo, sessionId, providerId) : undefined;
             return (
               <div
                 key={msg.id}
@@ -589,11 +621,10 @@ export function MessageList({
                 <RenderErrorBoundary fallbackContent={msg.content}>
                   <MessageBubble
                     message={msg}
-                    onReply={onReply && sessionId && providerId
-                      ? msg.role === "assistant"
-                        ? turnReplyMessage ? () => handleReply(turnReplyMessage!) : undefined
-                        : handleReply
+                    onReply={onReply && sessionId && providerId && (msg.role !== "assistant" || turnReplyMessage)
+                      ? handleReply
                       : undefined}
+                    replyTarget={turnReplyMessage}
                     onJumpToReply={handleJumpToReply}
                     replyAvailable={replyAvailable}
                     isStreaming={isStreaming && msg.id.startsWith("streaming-")}
@@ -651,10 +682,13 @@ function assistantMessageText(msg: ChatMessage): string {
     : msg.content;
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLastAssistantInTurn, turnCopyText, turnChanges, turn, onJumpToEdit, projectName, onFork, onEdit, isEditing, onDismiss, prevMsgId, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled, bashPartialOutput, onReply, onJumpToReply, replyAvailable }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLastAssistantInTurn, turnCopyText, turnChanges, turn, onJumpToEdit, projectName, onFork, onEdit, isEditing, onDismiss, prevMsgId, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled, bashPartialOutput, onReply, replyTarget, onJumpToReply, replyAvailable }: {
   onReply?: (message: ChatMessage) => void;
+  /** Assistant only: the message of this turn that Reply quotes, which may be an earlier one. */
+  replyTarget?: ChatMessage;
   onJumpToReply?: (reply: ReplyReference) => void;
-  replyAvailable?: (reply: ReplyReference) => boolean;
+  /** Whether the message this one quotes is in the list; undefined when it quotes none. */
+  replyAvailable?: boolean;
   message: ChatMessage; isStreaming: boolean; isLastAssistantInTurn?: boolean; turnCopyText?: string; projectName?: string;
   /** Files this turn changed — drives the action-bar change pill. */
   turnChanges?: TurnFileChange[];
@@ -734,7 +768,7 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLast
       {/* Action bar: only on the last assistant message of the turn, after streaming ends */}
       {!isStreaming && isLastAssistantInTurn && (
         <TurnChangeRollup
-          onReply={onReply ? () => onReply(message) : undefined}
+          onReply={onReply && replyTarget ? () => onReply(replyTarget) : undefined}
           timestamp={message.timestamp}
           content={turnCopyText ?? assistantMessageText(message)}
           changes={turnChanges}

package/src/web/components/chat/message-user-bubble.tsx

@@ -37,7 +37,7 @@ export function UserBubble({ content, messageId, timestamp, projectName, onFork,
   onEdit?: () => void;
   onReply?: () => void;
   onJumpToReply?: (reply: ReplyReference) => void;
-  replyAvailable?: (reply: ReplyReference) => boolean;
+  replyAvailable?: boolean;
   isEditing?: boolean;
   sessionId?: string;
   providerId?: string;
@@ -80,7 +80,7 @@ export function UserBubble({ content, messageId, timestamp, projectName, onFork,
         : "max-w-[80%] bg-accent-wash border-accent-wash-border text-text",
       isEditing && "ring-2 ring-primary/60 border-primary/40",
     )}>
-      {replyTo && <ReplyCard reply={replyTo} onJump={replyAvailable?.(replyTo) ? () => onJumpToReply?.(replyTo) : undefined} unavailable={!replyAvailable?.(replyTo)} />}
+      {replyTo && <ReplyCard reply={replyTo} onJump={replyAvailable ? () => onJumpToReply?.(replyTo) : undefined} unavailable={!replyAvailable} />}
       {/* System tags as badges */}
       {tags.length > 0 && <SystemTagBadges tags={tags} />}