pi-web-ui 0.2.1 → 0.2.2

package/dist/server/agent-service.js

@@ -12,7 +12,7 @@
 import { existsSync } from "node:fs";
 import { join } from "node:path";
 import { createAgentSessionFromServices, createAgentSessionRuntime, createAgentSessionServices, getAgentDir, SessionManager, } from "@earendil-works/pi-coding-agent";
-import { serializeMessage, serializeStreamingMessage } from "./serialize.js";
+import { serializeMessage, serializeStreamingMessage, } from "./serialize.js";
 import { loadCommands, saveCommandsFile, TerminalManager, } from "./terminals.js";
 const SNAPSHOT_INTERVAL_MS = 60;
 const WIDGET_REFRESH_MS = 2000;
@@ -286,7 +286,20 @@ export class ClientSession {
     snapshotTimer = null;
     sessionsTimer = null;
     version = 0;
-    seq = 0;
+    /**
+     * Stable per-message ids: assigned once per (role, timestamp) so snapshot ids
+     * don't change every 60ms — changing ids would remount the whole list in
+     * React (collapse open thinking blocks, reset scroll, jank on long chats).
+     */
+    msgIds = new Map();
+    nextMsgId = 1;
+    /** Serialized UiMessage cache — object-reference-stable across snapshots, so
+     *  the frontend's React.memo can skip unchanged messages entirely. */
+    uiMessageCache = new Map();
+    /** Reused when the message set didn't change, keeping state.messages
+     *  reference-stable so the frontend can memoize derived maps. */
+    lastMessagesSig = "";
+    lastMessagesArray = [];
     queueSteering = 0;
     queueFollowUp = 0;
     disposed = false;
@@ -434,6 +447,25 @@ export class ClientSession {
                 void this.pushSessions();
         }, 800);
     }
+    /** Serialize a persisted message with a STABLE id + cached object reference. */
+    serializeCached(m) {
+        const key = m.role === "toolResult"
+            ? `t:${m.toolCallId}`
+            : `${m.role}:${m.timestamp}`;
+        let n = this.msgIds.get(key);
+        if (n === undefined) {
+            n = this.nextMsgId++;
+            this.msgIds.set(key, n);
+        }
+        const cacheKey = `${key}#${n}`;
+        const cached = this.uiMessageCache.get(cacheKey);
+        if (cached)
+            return cached;
+        const msg = serializeMessage(m, n);
+        if (msg)
+            this.uiMessageCache.set(cacheKey, msg);
+        return msg;
+    }
     snapshot() {
         const state = this.session.agent.state;
         const model = state.model;
@@ -461,14 +493,22 @@ export class ClientSession {
         catch {
             // stats are best-effort
         }
+        const rawMessages = state.messages
+            .map((m) => this.serializeCached(m))
+            .filter((m) => m !== null);
+        // Reuse the previous array when nothing changed: the element objects are
+        // cached (reference-stable) anyway, and a stable array reference lets the
+        // frontend memoize derived maps instead of rebuilding them every 60ms.
+        const sig = rawMessages.map((m) => m.id).join("\u0001");
+        const messages = sig === this.lastMessagesSig ? this.lastMessagesArray : rawMessages;
+        this.lastMessagesSig = sig;
+        this.lastMessagesArray = rawMessages;
         return {
             clientId: this.clientId,
             cwd: this.cwd,
             sessionId: this.session.sessionId,
             sessionFile: this.session.sessionFile,
-            messages: state.messages
-                .map((m) => serializeMessage(m, ++this.seq))
-                .filter((m) => m !== null),
+            messages,
             // The in-progress assistant message lives in state.streamingMessage
             // (the SDK only pushes it into state.messages at message_end). Surfacing
             // it here is what makes thinking + text stream into the browser at

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
   "license": "MIT",
   "type": "module",