@hienlh/ppm 0.23.21 → 0.23.23

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/components/settings/notifications-settings-section.tsx

@@ -144,6 +144,8 @@ function PushSection() {
   const [subscription, setSubscription] = useState<PushSubscription | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const [enabling, setEnabling] = useState(false);
+  const [enableError, setEnableError] = useState<string | null>(null);
   const [testing, setTesting] = useState<string | null>(null);
   const support = pushSupport();
 
@@ -174,6 +176,8 @@ function PushSection() {
   const toggle = async (on: boolean) => {
     if (!status) return;
     setBusy(true);
+    setEnabling(on);
+    setEnableError(null);
     try {
       if (on) {
         await enablePush(status.publicKey);
@@ -182,9 +186,12 @@ function PushSection() {
         await disablePush();
       }
     } catch (e) {
-      toast.error(on ? "Could not turn push on" : "Could not turn push off", { description: errorText(e) });
+      // Kept on screen rather than in a toast: the fix is usually a browser setting to go and change.
+      if (on) setEnableError(errorText(e));
+      else toast.error("Could not turn push off", { description: errorText(e) });
     } finally {
       setBusy(false);
+      setEnabling(false);
       await load();
     }
   };
@@ -231,6 +238,12 @@ function PushSection() {
         />
       </div>
       {support.state !== "available" && <p className="text-xs leading-relaxed text-warning">{support.message}</p>}
+      {enabling && (
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          Waiting for the browser's push service. Just after the browser starts, this can take up to a minute.
+        </p>
+      )}
+      {enableError && <p className="break-words text-xs leading-relaxed text-error">{enableError}</p>}
       {loadError && <p className="text-xs text-error">{loadError}</p>}
 
       {status && status.devices.length > 0 && (

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,

package/src/web/hooks/use-effort-status.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { api, projectUrl } from "@/lib/api-client";
+import type { EffortStatus } from "../../shared/effort-status";
+
+/** Short-lived: it is read from settings files the user may be editing right now. */
+const CACHE_MS = 30_000;
+const cache = new Map<string, { status: EffortStatus | null; at: number }>();
+
+/**
+ * What overrides the effort pick outside PPM. A session's own status comes over its socket once
+ * the server has sent it; a chat with no session yet — the new-chat composer — asks what the
+ * project's settings files say, so the chip is right before the first message too.
+ */
+export function useEffortStatus(p: {
+  projectName?: string;
+  providerId?: string;
+  model?: string | null;
+  sessionStatus: EffortStatus | null | undefined;
+}): EffortStatus | null {
+  const { projectName, providerId, model, sessionStatus } = p;
+  const key = JSON.stringify([projectName ?? null, providerId ?? null, model ?? null]);
+  const wanted = sessionStatus === undefined && !!projectName && !!providerId;
+  const [fetched, setFetched] = useState<{ key: string; status: EffortStatus | null } | null>(null);
+
+  useEffect(() => {
+    if (!wanted) return;
+    const hit = cache.get(key);
+    if (hit && Date.now() - hit.at < CACHE_MS) {
+      setFetched({ key, status: hit.status });
+      return;
+    }
+    let active = true;
+    const query = model ? `?model=${encodeURIComponent(model)}` : "";
+    api.get<{ status: EffortStatus | null }>(`${projectUrl(projectName!)}/chat/providers/${providerId}/effort-status${query}`)
+      .then(({ status }) => {
+        cache.set(key, { status, at: Date.now() });
+        if (active) setFetched({ key, status });
+      })
+      // Nothing to say then; the chip shows the pick as it always did.
+      .catch(() => {});
+    return () => { active = false; };
+  }, [wanted, key, projectName, providerId, model]);
+
+  if (sessionStatus !== undefined) return sessionStatus;
+  return fetched?.key === key ? fetched.status : cache.get(key)?.status ?? null;
+}

package/src/web/hooks/use-relative-time-tick.ts

@@ -0,0 +1,35 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * Re-renders the caller every half minute, for labels such as "5m ago".
+ *
+ * The chat's labels used to stay current only because the whole transcript was redrawn on
+ * every render of the chat; now that it is not, they ask for the time themselves. One timer for
+ * the page, running only while a label is mounted.
+ */
+export const RELATIVE_TIME_TICK_MS = 30_000;
+
+let tick = 0;
+let timer: ReturnType<typeof setInterval> | undefined;
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  timer ??= setInterval(() => {
+    tick++;
+    for (const notify of listeners) notify();
+  }, RELATIVE_TIME_TICK_MS);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && timer !== undefined) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  };
+}
+
+const snapshot = () => tick;
+
+export function useRelativeTimeTick(): number {
+  return useSyncExternalStore(subscribe, snapshot, snapshot);
+}

package/src/web/hooks/use-session-file-changes.ts

@@ -35,6 +35,10 @@ import {
 import type { ChatMessage } from "../../types/chat";
 import { SESSION_FILE_CHANGES_PUSH, type SessionFileChange, type SessionFileChangesPushEvent } from "../../shared/session-file-changes";
 
+// One array for "not asked yet", which is most chats: a fresh `[]` per render reached every
+// turn's action bar through the context and redrew them all on each render of the chat.
+const NO_FILES: SessionFileChange[] = [];
+
 export function useSessionFileChanges({ projectName, sessionId, messages, isStreaming }: {
   projectName: string;
   sessionId: string | null;
@@ -173,5 +177,5 @@ export function useSessionFileChanges({ projectName, sessionId, messages, isStre
 
   // A list fetched for the previous session is never shown under this one.
   const unloadedCount = Math.max(paths.length, count.key === key ? count.n : 0);
-  return { files: loaded ? state.files : [], paths, unloadedCount, loaded, loading: loadingKey === key && key !== "", refresh, setReviewed };
+  return { files: loaded ? state.files : NO_FILES, paths, unloadedCount, loaded, loading: loadingKey === key && key !== "", refresh, setReviewed };
 }