@hienlh/ppm 0.23.22 → 0.23.24

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} />}
 

package/src/web/components/chat/model-thinking-selector-helpers.ts

@@ -6,6 +6,12 @@
 // for the SDK value "xhigh"; the literal "extra" would crash the CLI subprocess,
 // so it must NEVER appear as a value here.
 
+import {
+  effortEnvMeaning, effortInEffect, effortSettingPlace, isEffortLevel,
+  type EffortInEffect, type EffortLevel, type EffortStatus,
+} from "../../../shared/effort-status";
+import { modelDisplayName } from "@/lib/model-display-name";
+
 export interface EffortOption {
   label: string;
   value: "low" | "medium" | "high" | "xhigh" | "max";
@@ -31,3 +37,76 @@ export function chipLabel(modelDisplay: string, effortValue: string | null | und
   const eff = effortLabel(effortValue);
   return eff ? `${modelDisplay} · ${eff}` : modelDisplay;
 }
+
+export const DEFAULT_EFFORT = EFFORT_OPTIONS.find((o) => o.default)!.value;
+
+/** The picked effort beside the one the turns run at, and what overrides the pick if anything does. */
+export function shownEffort(
+  effort: string | null | undefined,
+  status: EffortStatus | null | undefined,
+): EffortInEffect & { pick: EffortLevel } {
+  const pick = isEffortLevel(effort) ? effort : DEFAULT_EFFORT;
+  return { pick, ...effortInEffect(pick, status) };
+}
+
+/** Notice text; the names a user would type or search for (a variable, a file) are marked as code. */
+export type NoticePart = string | { code: string };
+
+export interface EffortNotice {
+  title: string;
+  detail: NoticePart[];
+}
+
+export function noticeText(parts: NoticePart[]): string {
+  return parts.map((part) => (typeof part === "string" ? part : part.code)).join("");
+}
+
+const USE_PPM_PICK = "Remove it there to use the effort picked in PPM.";
+
+/**
+ * Why the effort the turns run at is not the one picked, naming the setting and where it is, so
+ * the user can change it. Null when the pick is what runs.
+ */
+export function effortNotice(
+  shown: EffortInEffect & { pick: EffortLevel },
+  status: EffortStatus | null | undefined,
+  modelDisplay: string,
+): EffortNotice | null {
+  if (!shown.reason || !status) return null;
+  const observedModel = status.observed?.model;
+  const model = observedModel ? modelDisplayName(observedModel.replace(/\[[^\]]*\]$/, "")) : modelDisplay;
+  const level = shown.level ? effortLabel(shown.level) : null;
+
+  const meaning = effortEnvMeaning(status.env?.value);
+  if (shown.reason === "env" && status.env && meaning) {
+    const setting: NoticePart[] = [{ code: `CLAUDE_CODE_EFFORT_LEVEL=${status.env.value}` }, " in ", { code: effortSettingPlace(status.env) }];
+    if (meaning.kind === "auto") {
+      // With a cap in place the CLI sends the model's default, clamped, rather than nothing, and
+      // until it answers that default is not known here, so the sentence names only the cap.
+      const what = status.cap
+        ? `Claude Code sends ${model}'s default effort, capped at ${effortLabel(status.cap.value)}.`
+        : level
+          ? `Claude Code sends ${model}'s default, ${level}.`
+          : `no effort is sent, so ${model}'s default applies.`;
+      return { title: "Effort is left to the model", detail: [...setting, ` overrides the effort picked here: ${what} `, USE_PPM_PICK] };
+    }
+    if (meaning.kind === "budget") {
+      // Under a cap the CLI reads the number as High, clamped, instead of as a thinking budget.
+      if (level) {
+        return { title: `Effort is set to ${level} outside PPM`, detail: [...setting, ` overrides the effort picked here; with a maxEffortLevel set, Claude Code runs it as ${level}. `, USE_PPM_PICK] };
+      }
+      return { title: "A thinking budget replaces the effort", detail: [...setting, " sets a thinking budget instead of an effort level, so the effort picked here is not sent. ", USE_PPM_PICK] };
+    }
+    const runs = shown.level === meaning.level ? "" : level ? ` ${model} runs it as ${level}.` : ` ${model} takes no effort level, so none is sent.`;
+    return { title: `Effort is set to ${effortLabel(meaning.level)} outside PPM`, detail: [...setting, ` overrides the effort picked here.${runs} `, USE_PPM_PICK] };
+  }
+  if (shown.reason === "cap" && status.cap) {
+    const runs = shown.level === status.cap.value || !level ? "" : ` ${model} runs it as ${level}.`;
+    return {
+      title: `Effort is capped at ${effortLabel(status.cap.value)}`,
+      detail: [{ code: `maxEffortLevel: "${status.cap.value}"` }, " in ", { code: effortSettingPlace(status.cap) }, ` lowers any effort picked above it.${runs}`],
+    };
+  }
+  if (!level) return { title: `${model} takes no effort level`, detail: [`Claude Code sends no effort with ${model}, so the effort picked here has no effect.`] };
+  return { title: `Runs at ${level}`, detail: [`${effortLabel(shown.pick)} isn't available for ${model}, so Claude Code runs it at ${level}.`] };
+}

package/src/web/components/chat/model-thinking-selector.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, useRef, type ReactNode } from "react";
-import { Check, Sparkles, Brain } from "@/lib/icons";
+import { Check, Sparkles, Brain, TriangleAlert } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { modelDisplayName } from "@/lib/model-display-name";
-import { EFFORT_OPTIONS, chipLabel } from "./model-thinking-selector-helpers";
+import type { EffortStatus } from "../../../shared/effort-status";
+import { EFFORT_OPTIONS, chipLabel, effortLabel, effortNotice, noticeText, shownEffort, type EffortNotice } from "./model-thinking-selector-helpers";
 
 interface ModelOption {
   value: string;
@@ -18,6 +19,8 @@ const MODEL_CACHE_TTL = 5 * 60 * 1000;
 interface ModelThinkingSelectorProps {
   model: string | null;
   effort: string | null;
+  /** What overrides the effort pick outside PPM, so the chip shows the effort the turns run at. */
+  effortStatus?: EffortStatus | null;
   thinking: boolean;
   onModelChange: (model: string) => void;
   onEffortChange: (effort: string) => void;
@@ -33,8 +36,6 @@ function shortLabel(label: string): string {
   return label.replace(/^Claude\s+/i, "");
 }
 
-const DEFAULT_EFFORT = EFFORT_OPTIONS.find((o) => o.default)!.value;
-
 /**
  * Unified model + thinking picker — one chip, one popup. Mirrors Anthropic's native
  * picker: model list, effort levels (Extra→SDK "xhigh"), and a thinking on/off toggle.
@@ -43,6 +44,7 @@ const DEFAULT_EFFORT = EFFORT_OPTIONS.find((o) => o.default)!.value;
 export function ModelThinkingSelector({
   model,
   effort,
+  effortStatus,
   thinking,
   onModelChange,
   onEffortChange,
@@ -109,9 +111,11 @@ export function ModelThinkingSelector({
 
   const current = models.find((m) => m.value === model);
   const modelDisplay = current ? shortLabel(current.label) : model ? modelDisplayName(model) : "Model";
-  const effortValue = effort ?? DEFAULT_EFFORT;
+  const shown = shownEffort(effort, effortStatus);
+  const notice = effortNotice(shown, effortStatus, modelDisplay);
   const showModelList = models.length > 0 || Boolean(modelStatus);
-  const chipText = chipLabel(modelDisplay, effortValue);
+  // The effort the turns run at, which an override outside PPM can make differ from the pick.
+  const chipText = chipLabel(modelDisplay, shown.level);
 
   const pick = (fn: () => void) => {
     fn();
@@ -119,6 +123,8 @@ export function ModelThinkingSelector({
   };
 
   const content = (
+    <>
+    {notice && <EffortNoticeBanner notice={notice} />}
     <div className="flex divide-x divide-border">
       {/* Left column: model list */}
       {showModelList && (
@@ -137,12 +143,13 @@ export function ModelThinkingSelector({
       <div className="flex-1 min-w-0 py-1">
         <SectionLabel>Effort</SectionLabel>
         {EFFORT_OPTIONS.map((o) => (
-          <OptionRow key={o.value} active={o.value === effortValue} onClick={() => pick(() => onEffortChange(o.value))}>
+          <OptionRow key={o.value} active={o.value === shown.pick} onClick={() => pick(() => onEffortChange(o.value))}>
             <span className="flex-1 truncate">
               {o.label}
               {o.default && <span className="ml-2 text-xs text-text-subtle">Default</span>}
+              {o.value === shown.level && shown.level !== shown.pick && <span className="ml-2 text-xs text-warning">In effect</span>}
             </span>
-            {o.value === effortValue && <Check className="size-4 shrink-0 text-primary" />}
+            {o.value === shown.pick && <Check className="size-4 shrink-0 text-primary" />}
           </OptionRow>
         ))}
         <Separator />
@@ -161,6 +168,7 @@ export function ModelThinkingSelector({
         </button>
       </div>
     </div>
+    </>
   );
 
   return (
@@ -174,11 +182,12 @@ export function ModelThinkingSelector({
           if (!disabled) setOpen((v) => !v);
         }}
         className="inline-flex max-w-full items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
-        aria-label={`Model ${modelDisplay}, effort ${effortValue}${thinking ? ", thinking on" : ""}`}
-        title={disabled ? "Can't change while running" : chipText}
+        aria-label={`Model ${modelDisplay}, effort ${shown.level ? effortLabel(shown.level) : "none"}${notice ? ` (${notice.title})` : ""}${thinking ? ", thinking on" : ""}`}
+        title={disabled ? "Can't change while running" : notice ? `${chipText}\n${notice.title}: ${noticeText(notice.detail)}` : chipText}
       >
         <Sparkles className="h-3.5 w-3.5 shrink-0" />
         <span className="min-w-0 max-w-[140px] truncate">{chipText}</span>
+        {notice && <TriangleAlert className="h-3 w-3 shrink-0 text-warning" />}
         {thinking && <Brain className="h-3 w-3 shrink-0" />}
       </button>
 
@@ -204,6 +213,23 @@ export function ModelThinkingSelector({
   );
 }
 
+/** Above both columns, so it reads at full width in the phone's sheet too. */
+function EffortNoticeBanner({ notice }: { notice: EffortNotice }) {
+  return (
+    <div role="note" className="flex gap-2 border-b border-border bg-warning/10 px-3 py-2.5 text-sm leading-relaxed text-text-secondary md:text-xs">
+      <TriangleAlert className="mt-0.5 size-4 shrink-0 text-warning" />
+      <div className="min-w-0">
+        <div className="font-medium text-text-primary">{notice.title}</div>
+        <p className="m-0 break-words">
+          {notice.detail.map((part, i) => typeof part === "string"
+            ? part
+            : <code key={i} className="rounded bg-surface-elevated px-1 font-mono text-[0.92em]">{part.code}</code>)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
 function SectionLabel({ children }: { children: ReactNode }) {
   return <div className="px-3 py-1.5 text-xs font-medium text-text-secondary">{children}</div>;
 }

package/src/web/components/chat/session-changes-context.tsx

@@ -3,8 +3,9 @@
  * that answer them too: each turn's change tray keeps, reverts and reopens the blocks its edits
  * wrote, and has to see the same list the bar does — one request for the whole chat.
  */
-import { createContext, useContext } from "react";
+import { createContext, useCallback, useContext, useMemo, useRef } from "react";
 import type { SessionFileChange } from "../../../shared/session-file-changes";
+import { openSessionReview } from "@/lib/session-file-changes-client";
 
 export interface SessionChangesValue {
   projectName: string;
@@ -19,3 +20,30 @@ export interface SessionChangesValue {
 export const SessionChangesContext = createContext<SessionChangesValue | null>(null);
 
 export const useSessionChanges = () => useContext(SessionChangesContext);
+
+/**
+ * The value the chat provides, and the Review opener its changes bar uses.
+ *
+ * Every turn's action bar reads this context, so the value has to stay the same object while
+ * the agent streams: `paths` is a new array on every flush, which is why it is read only when
+ * the Review tab opens.
+ */
+export function useSessionChangesValue({ projectName, sessionId, title, providerId, changes }: {
+  projectName: string;
+  sessionId: string | null;
+  title?: string;
+  providerId: string;
+  changes: { files: SessionFileChange[]; paths: string[]; refresh: () => void };
+}): { value: SessionChangesValue | null; openReview: (path?: string) => void } {
+  const pathsRef = useRef(changes.paths);
+  pathsRef.current = changes.paths;
+  const openReview = useCallback((path?: string) => {
+    if (!sessionId) return;
+    openSessionReview({ projectName, sessionId, title, providerId, paths: pathsRef.current, selectPath: path });
+  }, [projectName, sessionId, title, providerId]);
+  const { files, refresh } = changes;
+  const value = useMemo((): SessionChangesValue | null => (
+    projectName && sessionId ? { projectName, sessionId, files, refresh, openReview } : null
+  ), [projectName, sessionId, files, refresh, openReview]);
+  return { value, openReview };
+}

package/src/web/components/layout/reparenting-tab.tsx

@@ -53,6 +53,32 @@ export function ReparentingTab({
   const panelIdRef = useRef(panelId);
   panelIdRef.current = panelId;
 
+  // Where each scroller in the tab last stood, as its own scroll events said. A move resets
+  // every offset, and on a project switch the old panel unmounts first, taking the wrapper off
+  // the page before the move below runs — too late to read them then. A chat came back at its
+  // top, and its history loader took that for the reader scrolling up and fetched another page
+  // on every switch back.
+  // Held weakly: a scroller React removed would keep its whole tree alive, and a chat replaces
+  // its transcript's on every session switch.
+  const scrolledRef = useRef(new WeakMap<Element, { top: number; left: number }>());
+  /** The keys of `scrolledRef`, which a WeakMap cannot list. */
+  const scrollersRef = useRef(new Set<WeakRef<Element>>());
+  /** Moved while hidden, when there was no layout to put the offsets back into. */
+  const restorePendingRef = useRef(false);
+  const restoreScroll = () => {
+    for (const ref of scrollersRef.current) {
+      const el = ref.deref();
+      const at = el && scrolledRef.current.get(el);
+      if (!el || !at || !wrapper.contains(el)) {
+        scrollersRef.current.delete(ref);
+        if (el) scrolledRef.current.delete(el);
+        continue;
+      }
+      el.scrollTop = at.top;
+      el.scrollLeft = at.left;
+    }
+  };
+
   // Mount the wrapper and own its removal. The listener is native and capturing because
   // the tab content is DOM-reparented out of the panel's fiber subtree: the panel never
   // sees clicks on the content body, so focus is set here, where the panel is known.
@@ -65,17 +91,39 @@ export function ReparentingTab({
       if (pid === DOCK_PANEL_ID || isWindowPanelId(pid)) return;
       usePanelStore.getState().setFocusedPanel(pid);
     };
+    const scrolled = scrolledRef.current;
+    const scrollers = scrollersRef.current;
+    const onScroll = (e: Event) => {
+      // Parked out of sight a scroller has no size, and whatever moves it there is not the reader.
+      if (wrapper.parentElement === hiddenContainer) return;
+      const el = e.target as Element;
+      if (el.nodeType !== Node.ELEMENT_NODE) return;
+      if (!scrolled.has(el)) {
+        for (const ref of scrollers) if (!ref.deref()) scrollers.delete(ref);
+        scrollers.add(new WeakRef(el));
+      }
+      scrolled.set(el, { top: el.scrollTop, left: el.scrollLeft });
+    };
     wrapper.addEventListener("pointerdown", onMouseDown, true);
     wrapper.addEventListener("focusin", onMouseDown, true);
+    wrapper.addEventListener("scroll", onScroll, true);
     return () => {
       wrapper.removeEventListener("pointerdown", onMouseDown, true);
       wrapper.removeEventListener("focusin", onMouseDown, true);
+      wrapper.removeEventListener("scroll", onScroll, true);
       wrapper.remove();
     };
   }, [wrapper, hiddenContainer]);
 
   useLayoutEffect(() => {
     wrapper.style.display = isActive ? "" : "none";
+    // Only for a tab moved while hidden: a plain tab switch keeps its offsets, and writing them
+    // back forces a layout of the whole tab in the middle of the commit.
+    if (isActive && restorePendingRef.current) {
+      restorePendingRef.current = false;
+      restoreScroll();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapper, isActive]);
 
   // Imperatively move the wrapper into the correct panel slot.
@@ -96,21 +144,12 @@ export function ReparentingTab({
 
     if (wrapper.parentElement === slot) return;
 
-    // Save scroll positions — appendChild resets them during the DOM move
-    const scrollables: { el: Element; top: number; left: number }[] = [];
-    wrapper.querySelectorAll("*").forEach((el) => {
-      if (el.scrollTop || el.scrollLeft) {
-        scrollables.push({ el, top: el.scrollTop, left: el.scrollLeft });
-      }
-    });
-
     slot.appendChild(wrapper);
-
-    // Restore scroll positions synchronously before paint
-    for (const { el, top, left } of scrollables) {
-      el.scrollTop = top;
-      el.scrollLeft = left;
-    }
+    // Before paint, from what the scroll events recorded: walking every element of the tab
+    // to read offsets cost a whole transcript's worth of reads per move, and read zeros
+    // whenever the wrapper had already left the page.
+    restorePendingRef.current = !isActive;
+    if (isActive) restoreScroll();
   });
 
   // Portal target for the tab's own dropdowns, tooltips and sheets. It belongs here and

package/src/web/components/settings/ai-settings-section.tsx

@@ -17,6 +17,9 @@ import { ProviderBadge } from "@/components/chat/provider-selector";
 import { openSettings } from "./open-settings";
 import { CodexContextSettings } from "./codex-context-settings";
 import { McpSignInList } from "@/components/mcp-auth/mcp-sign-in-list";
+import { effortNotice, noticeText, shownEffort } from "@/components/chat/model-thinking-selector-helpers";
+import { modelDisplayName } from "@/lib/model-display-name";
+import type { EffortStatus } from "../../../shared/effort-status";
 import type { ModelOption } from "../../../types/chat";
 import type { ProviderProbeStatus } from "../../../providers/provider-probe";
 
@@ -88,6 +91,21 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
       .finally(() => setModelsLoading(false));
   }, [activeTab, activeRegistered]);
 
+  // `CLAUDE_CODE_EFFORT_LEVEL` or a cap in the user's Claude Code settings makes the default
+  // below inert for every project, which the select alone would not show.
+  const [effortStatus, setEffortStatus] = useState<EffortStatus | null>(null);
+  const defaultModel = settings?.providers[activeTab]?.model;
+  useEffect(() => {
+    setEffortStatus(null);
+    if (!activeTab) return;
+    let active = true;
+    const query = defaultModel ? `?model=${encodeURIComponent(defaultModel)}` : "";
+    api.get<{ status: EffortStatus | null }>(`/api/settings/ai/providers/${activeTab}/effort-status${query}`)
+      .then(({ status }) => { if (active) setEffortStatus(status); })
+      .catch(() => {});
+    return () => { active = false; };
+  }, [activeTab, defaultModel]);
+
   const retryProbe = async () => {
     setProbing(true);
     try {
@@ -108,6 +126,11 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
 
   const config = settings?.providers[activeTab];
   const isSdkProvider = config?.type === "agent-sdk" || (!config?.type && activeTab === "claude");
+  const effortOverride = effortNotice(
+    shownEffort(config?.effort, effortStatus),
+    effortStatus,
+    config?.model ? modelDisplayName(config.model) : "the model",
+  );
 
   const handleSettingsSave = async (patch: Partial<AISettings>) => {
     if (!settings) return false;
@@ -359,6 +382,15 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
                   ))}
                 </SelectContent>
               </Select>
+              {effortOverride && (
+                <div role="note" className="flex items-start gap-2 rounded-md border border-warning/30 bg-warning/5 px-2.5 py-2">
+                  <AlertTriangle className="size-3.5 text-warning shrink-0 mt-0.5" />
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <p className={`${labelSize} text-text-secondary`}>{effortOverride.title}</p>
+                    <p className="text-[11px] text-muted-foreground break-words">{noticeText(effortOverride.detail)}</p>
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className={fieldGap}>

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

@@ -13,6 +13,7 @@ import type { ChatMessage, ChatEvent } from "../../types/chat";
 import type { BackgroundAgentStatus } from "../../shared/background-agent-status";
 import type { PromptCacheState } from "../../shared/prompt-cache-idle";
 import type { TurnStop } from "../../shared/turn-stop";
+import type { EffortStatus } from "../../shared/effort-status";
 import { decodeReply, encodeReply, type ReplyReference } from "../../shared/chat-reply";
 import { prefixTokens } from "../../shared/turn-usage";
 import { dbExecuteApprovalInput } from "../../shared/db-ai-tools";
@@ -131,6 +132,11 @@ interface UseChatReturn {
   effort: string | null;
   /** Switch the per-session effort (low|medium|high|xhigh|max) */
   setEffort: (effort: string) => void;
+  /**
+   * What overrides the effort pick outside PPM, as the server last said: undefined until it
+   * has, null when nothing can for this session's provider.
+   */
+  effortStatus: EffortStatus | null | undefined;
   /** Whether per-session thinking is on */
   thinking: boolean;
   /** Toggle per-session thinking on/off */
@@ -251,6 +257,7 @@ export function useChat(
   const pendingModelRef = useRef<string | null>(null);
   const [effort, setEffortState] = useState<string | null>(null);
   const effortRef = useRef<string | null>(null);
+  const [effortStatus, setEffortStatus] = useState<EffortStatus | null | undefined>(undefined);
   // Optimistic until session_state lands; the SDK default is adaptive thinking, so ON
   // is the honest starting guess.
   const [thinking, setThinkingState] = useState<boolean>(true);
@@ -1021,6 +1028,11 @@ export function useChat(
       return;
     }
 
+    if ((data as any).type === "effort_status") {
+      setEffortStatus(((data as any).status as EffortStatus | undefined) ?? null);
+      return;
+    }
+
     // Handle compact status events
     if ((data as any).type === "compact_status") {
       const status = (data as any).status;
@@ -1096,6 +1108,8 @@ export function useChat(
         setEffortState(state.effort);
         effortRef.current = state.effort;
       }
+      // Only the greetings that carry the effort carry this; the others leave it as it was.
+      if ("effortStatus" in state) setEffortStatus((state.effortStatus as EffortStatus | null) ?? null);
       // Display only. Writing this back into the ref would promote a server-derived
       // default into an explicit user choice that rides along on every message and
       // pins the session — the path that silently disabled thinking.
@@ -1289,6 +1303,7 @@ export function useChat(
     // Another session's subprocess saw another MCP state; its session_state brings its own.
     setMcpNeedsAuth([]);
     setTurnStop(null);
+    setEffortStatus(undefined);
     // Clear ephemeral pre-compact expansions on session change
     setExpansions(new Map());
     // Drop the previous session's version groups. Keeping them would let the
@@ -1819,6 +1834,7 @@ export function useChat(
     setModel,
     effort,
     setEffort,
+    effortStatus,
     thinking,
     setThinking,
     turnSettings,