perf(chat): hidden panes stop polling, rows stop re-rendering, a covered terminal stops drawing

The Workspace keeps panes of other workspaces and tabs mounted (display:none),
and every one of them kept following the live stream as if shown.

- useOnScreen (IntersectionObserver): ConversationView, the outline and the
  700 ms menu scan skip while their pane is hidden and catch up once on show.
- A new_event refetches the tail at most every 1.5 s (leading + trailing).
- MessageList: WorkGroup/MessageRow/EditedFiles compare only their own blocks
  and results, so a tail append no longer re-renders every row.
- A terminal under the chat is moved off the viewport with a transform, so
  xterm pauses drawing without a resize.
- PaneChat and TerminalView are memoized; LaneConsolePane passes a stable onExit.
- RunningStep's clock and the outline poll skip unchanged or hidden updates.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

client/src/components/run/ChatOutline.tsx

@@ -16,7 +16,14 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState, type ComponentType, type DragEvent, type ReactNode } from "react";
+import {
+  useEffect,
+  useState,
+  type ComponentType,
+  type DragEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useSettingsHref } from "../../lib/settingsLink";
@@ -35,6 +42,8 @@ import {
   X,
 } from "lucide-react";
 import { api, type SessionOutline } from "../../lib/api";
+import { keepIfSame } from "../../lib/keepIfSame";
+import { isShown } from "../../hooks/useOnScreen";
 import { displayName, extOf } from "./ChatFilePreview";
 import { dragAttachments, dragSkill, type Attachment } from "../../lib/promptAttach";
 
@@ -49,25 +58,30 @@ const EMPTY: SessionOutline = {
   mcp: [],
 };
 
-/** The session's outline, re-read on a visibility-gated poll. */
-export function useSessionOutline(sessionId: string): SessionOutline {
+/** The session's outline, re-read on a visibility-gated poll — skipped too
+ *  while `onScreen` says the pane is hidden (another workspace or tab, kept
+ *  mounted). An unchanged answer keeps the old object: no re-render. */
+export function useSessionOutline(
+  sessionId: string,
+  onScreen?: RefObject<boolean>
+): SessionOutline {
   const [outline, setOutline] = useState<SessionOutline>(EMPTY);
   useEffect(() => {
     let live = true;
     const load = () =>
       api.sessions
         .outline(sessionId)
-        .then((o) => live && setOutline({ ...EMPTY, ...o }))
+        .then((o) => live && setOutline(keepIfSame<SessionOutline>({ ...EMPTY, ...o })))
         .catch(() => {});
     void load();
     const timer = window.setInterval(() => {
-      if (document.visibilityState === "visible") void load();
+      if (onScreen ? isShown(onScreen) : document.visibilityState === "visible") void load();
     }, POLL_MS);
     return () => {
       live = false;
       window.clearInterval(timer);
     };
-  }, [sessionId]);
+  }, [sessionId, onScreen]);
   return outline;
 }
 
@@ -271,7 +285,7 @@ export function ChatOutline({
                   </span>
                 ) : (
                   <span
-                    className={`h-4 w-4 flex-shrink-0 rounded-full border-2 ${task.status === "in_progress" ? "animate-pulse border-accent" : "border-border"}`}
+                    className={`h-4 w-4 flex-shrink-0 rounded-full border-2 ${task.status === "in_progress" ? "animate-pulse-dot border-accent" : "border-border"}`}
                   />
                 )}
                 <span

client/src/components/run/LaneConsolePane.tsx

@@ -20,7 +20,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AlertCircle, Plus } from "lucide-react";
 import { api } from "../../lib/api";
@@ -89,6 +89,13 @@ export function LaneConsolePane({
     : null;
   const chat = useSessionChat(chatSession);
   const chatable = !!handle && !!chatSession && CHAT_TOOLS.has(handle.tool);
+  // Stable, so the memoized terminal is not re-rendered for a new closure.
+  const onRunExitRef = useRef(onRunExit);
+  onRunExitRef.current = onRunExit;
+  const onTerminalExit = useCallback(() => {
+    setHandle(null);
+    onRunExitRef.current?.();
+  }, []);
 
   useEffect(() => {
     onHasActiveRunChange?.(handle !== null);
@@ -210,13 +217,11 @@ export function LaneConsolePane({
             runId={handle.id}
             wsBaseUrl={window.location.origin.replace(/^http/, "ws")}
             autoFocus={autoFocus && !(chatable && chat)}
+            covered={!!(chatable && chat)}
             // The pane died (double Ctrl+C out of `claude`, `exit`, a crash) —
             // the tab bar moves on (another tab, or the home's prompt box)
             // rather than leaving a dead terminal the user has to click out of.
-            onExit={() => {
-              setHandle(null);
-              onRunExit?.();
-            }}
+            onExit={onTerminalExit}
           />
         </div>
       )}

client/src/components/run/PaneChat.tsx

@@ -54,7 +54,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { memo, useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
 import { ArrowUp, FileText, Square, SquareCheck } from "lucide-react";
 import { isSubmitEnter } from "../../lib/keys";
@@ -76,6 +76,7 @@ import {
   type PaneMenu,
 } from "../../lib/panePaste";
 import { useLiveRefresh } from "../../hooks/useLiveRefresh";
+import { useOnScreen, isShown } from "../../hooks/useOnScreen";
 import { openInChanges } from "../../lib/openInChanges";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
@@ -306,7 +307,10 @@ function PaneMenuCard({
   );
 }
 
-export function PaneChat({
+/** Memoized: a lane_update re-renders the Workspace's pane tree, and every
+ *  prop here is a primitive or the pane's own run handle — nothing in a
+ *  frame about another lane reaches the chat. */
+export const PaneChat = memo(function PaneChat({
   run,
   sessionId,
   cwd,
@@ -370,7 +374,9 @@ export function PaneChat({
     return () => ro.disconnect();
   }, []);
   const [list, setList] = useState<OutlineList | null>(null);
-  const activity = useSessionOutline(sessionId);
+  // Kept mounted in a hidden workspace or tab: its pollers skip until shown.
+  const onScreen = useOnScreen(rootRef);
+  const activity = useSessionOutline(sessionId, onScreen);
   // Open by default only in a spanning pane, and only once there is an output.
   const outlineOpen = outlineChoice ?? (panelOpen && activity.outputs.length > 0);
   const scope: PreviewScope = { laneId, laneCwd: laneCwd || cwd, cwd, sessionId };
@@ -421,9 +427,12 @@ export function PaneChat({
         return JSON.stringify(next) === JSON.stringify(prev) ? prev : next;
       });
     read();
-    const timer = window.setInterval(read, 700);
+    // Nobody can answer a menu in a hidden tab or pane: no screen scan then.
+    const timer = window.setInterval(() => {
+      if (isShown(onScreen)) read();
+    }, 700);
     return () => window.clearInterval(timer);
-  }, [runId]);
+  }, [runId, onScreen]);
   const asking = waiting || menu !== null;
   // Gone until the pane redraws: no second press on a stale menu.
   const choose = (index: number) => {
@@ -451,7 +460,10 @@ export function PaneChat({
     model: null,
   });
   const onContext = useCallback(
-    (tokens: number, model: string | null) => setContext({ tokens, model }),
+    (tokens: number, model: string | null) =>
+      setContext((prev) =>
+        prev.tokens === tokens && prev.model === model ? prev : { tokens, model }
+      ),
     []
   );
 
@@ -678,4 +690,4 @@ export function PaneChat({
       )}
     </div>
   );
-}
+});

client/src/components/run/TerminalView.tsx

@@ -42,6 +42,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import {
+  memo,
   useEffect,
   useId,
   useMemo,
@@ -153,9 +154,22 @@ interface TerminalViewProps {
   /** Take the keyboard when it appears (default). Off for a split pane that
    *  is not the focused one, or keys would land in whichever mounted last. */
   autoFocus?: boolean;
+  /** Another layer (the pane's chat) covers it. xterm stops drawing only when
+   *  its IntersectionObserver says off screen, and a covered terminal is not —
+   *  so it is moved out of the viewport with a transform, which keeps its
+   *  layout size (no PTY resize; the chat still reads and answers its menus). */
+  covered?: boolean;
 }
 
-export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: TerminalViewProps) {
+/** Memoized: the Workspace re-renders its pane tree on every lane_update, and
+ *  a terminal only cares about its own props (its owner keeps `onExit` stable). */
+export const TerminalView = memo(function TerminalView({
+  runId,
+  wsBaseUrl,
+  onExit,
+  autoFocus = true,
+  covered = false,
+}: TerminalViewProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   // Read through a ref: an inline `onExit` from the parent changes identity on
   // every render, and as an effect dep it would tear the terminal down and
@@ -709,7 +723,12 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
       onPasteCapture={onPaste}
       onFocus={() => notePaneFocus(runId)}
     >
-      <div ref={containerRef} className="h-full w-full" data-testid="terminal-view" />
+      <div
+        ref={containerRef}
+        className="h-full w-full"
+        style={covered ? { transform: "translateX(-300vw)" } : undefined}
+        data-testid="terminal-view"
+      />
       <p id={hintId} className="sr-only">
         {t("terminal.keyboardHint")}
       </p>
@@ -810,4 +829,4 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
       )}
     </div>
   );
-}
+});