perf(web): cut re-render storms and continuous repaints in bot chats

.changeset/perf-web-render.md

@@ -0,0 +1,5 @@
+---
+"@t3tools/web": patch
+---
+
+Smoother web chats: long conversations stop re-rendering on every update, and working-bot animations use far less GPU.

apps/web/src/components/roster/BotAvatarView.tsx

@@ -54,6 +54,9 @@ const EYES = [
   { x: 13, y: -1, rotate: -20 },
 ] as const;
 
+/** Minimum frame spacing for the working pose, about 30fps with rAF jitter headroom. */
+const WORKING_FRAME_MS = 1000 / 30 - 2;
+
 /** Radius the face travels on when it spins around the body. */
 const BELT_RADIUS = 44;
 
@@ -189,19 +192,60 @@ function BlobAvatar({
     let visible = true;
     let frameId: number | null = null;
     let last = 0;
+    // Last values written to the DOM, so settled or repeated poses cost no style work.
+    let lastBody = "";
+    // Switching between ink and cutout eyes replaces the eye nodes, so the cache is per node.
+    const lastEyes: Array<{
+      node: SVGRectElement | null;
+      transform: string | null;
+      visible: boolean | null;
+    }> = [
+      { node: null, transform: null, visible: null },
+      { node: null, transform: null, visible: null },
+    ];
 
     const render = (frame: MotionFrame) => {
-      body.style.transform = bodyTransform(frame);
+      const nextBody = bodyTransform(frame);
+      if (nextBody !== lastBody) {
+        body.style.transform = nextBody;
+        lastBody = nextBody;
+      }
       for (const index of [0, 1] as const) {
         const eye = eyeRefs.current[index];
-        if (!eye) continue;
+        const written = lastEyes[index];
+        if (!eye || !written) continue;
+        if (written.node !== eye) {
+          written.node = eye;
+          written.transform = null;
+          written.visible = null;
+        }
         const transform = eyeTransform(shape, frame, index);
-        eye.setAttribute("visibility", transform ? "visible" : "hidden");
-        if (transform) eye.setAttribute("transform", transform);
+        const visible = transform !== null;
+        if (visible !== written.visible) {
+          eye.setAttribute("visibility", visible ? "visible" : "hidden");
+          written.visible = visible;
+        }
+        if (transform && transform !== written.transform) {
+          eye.setAttribute("transform", transform);
+          written.transform = transform;
+        }
       }
     };
 
     const tick = (time: number) => {
+      // The continuous working bob reads fine at 30fps. Hover tracking and the spin keep
+      // the full display rate.
+      if (
+        last !== 0 &&
+        workingRef.current &&
+        !hovered &&
+        !motion.spinning &&
+        time - last < WORKING_FRAME_MS
+      ) {
+        frameId = visible ? requestAnimationFrame(tick) : null;
+        if (frameId === null) last = 0;
+        return;
+      }
       const dt = last === 0 ? 1 / 60 : (time - last) / 1000;
       last = time;
       const { frame, active } = motion.tick(dt, {

apps/web/src/components/roster/BotChatMessageRows.test.ts

@@ -0,0 +1,64 @@
+import { EnvironmentId, MessageId, ThreadId, type OrchestrationMessage } from "@t3tools/contracts";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+import { assistantRowPropsEqual } from "./BotChatMessageRows";
+
+type RowProps = Parameters<typeof assistantRowPropsEqual>[0];
+
+const message: OrchestrationMessage = {
+  id: MessageId.make("reply-1"),
+  role: "assistant",
+  text: "Done.",
+  turnId: null,
+  streaming: false,
+  createdAt: "2026-09-26T00:00:00.000Z",
+  updatedAt: "2026-09-26T00:00:00.000Z",
+};
+const engine = { provider: "codex", model: "gpt" } as const;
+const result = { kind: "plugin-search-results" } as unknown as NonNullable<
+  RowProps["pluginResults"]
+>[number]["result"];
+
+function props(overrides: Partial<RowProps> = {}): RowProps {
+  return {
+    message,
+    author: { name: "Akeru", avatar: { kind: "dither", seed: "a" } },
+    testId: "row",
+    cwd: "/work",
+    threadRef: { environmentId: EnvironmentId.make("env"), threadId: ThreadId.make("thread") },
+    stepMeter: { engine, tokens: 10, costUsd: null, hardStopReached: false },
+    pluginResults: [{ id: "entry-1", result }],
+    currentPersonId: "person",
+    playback: null,
+    playbackKey: "env/thread",
+    channelApproval: null,
+    onReply: vi.fn(),
+    onReactionChange: vi.fn(),
+    ...overrides,
+  } as RowProps;
+}
+
+describe("assistant row memoization", () => {
+  it("skips re-rendering when per-turn data is rebuilt with the same content", () => {
+    const previous = props();
+    const next = {
+      ...previous,
+      stepMeter: { ...previous.stepMeter!, engine: { ...engine } },
+      pluginResults: previous.pluginResults!.map((entry) => ({ ...entry })),
+    };
+    expect(assistantRowPropsEqual(previous, next)).toBe(true);
+  });
+
+  it("re-renders when the message, meter, playback context, or handlers change", () => {
+    const previous = props();
+    expect(assistantRowPropsEqual(previous, { ...previous, message: { ...message } })).toBe(false);
+    expect(
+      assistantRowPropsEqual(previous, {
+        ...previous,
+        stepMeter: { ...previous.stepMeter!, tokens: 11 },
+      }),
+    ).toBe(false);
+    expect(assistantRowPropsEqual(previous, { ...previous, playbackKey: null })).toBe(false);
+    expect(assistantRowPropsEqual(previous, { ...previous, onReply: vi.fn() })).toBe(false);
+  });
+});