@linxin666/dsh-remote-web-ui 0.3.5 → 0.3.6

package/lib/types/mobile/messages.d.ts

@@ -118,11 +118,19 @@ export declare function foldEvents(events: readonly WireEvent[], existing?: read
  * Incremental folder for one message stream. Live chat folds one event at a
  * time; rebuilding the five index maps by scanning every message per event
  * made that path O(n) per event (O(n * events) per turn). A folder keeps the
- * indexes alive across folds, applies each event in O(1) map operations, and
- * returns the previous snapshot identity unchanged when nothing applied, so
- * React skips the re-render entirely. Replayed events are no-ops: the maxSeq
- * watermark advanced by the first application skips them, which also makes a
- * double-invoked React state updater harmless.
+ * indexes alive across folds, applies each event in (near-)O(1) map
+ * operations, and returns the previous snapshot identity unchanged when
+ * nothing applied, so React skips the re-render entirely. Replayed events
+ * are no-ops: the maxSeq watermark advanced by the first application skips
+ * them, which also makes a double-invoked React state updater harmless.
+ *
+ * Cost contract: every fold that applies at least one event rebuilds the
+ * snapshot as one fresh O(messages) array copy (React needs the new
+ * identity), and replacement paths locate rows by an O(messages) identity
+ * scan. Both are amortized by the consumer folding bursts as ONE batch on a
+ * fixed cadence (see FOLD_FLUSH_MS in ChatView) instead of per event. An
+ * id-to-index map was measured and deliberately rejected: at realistic
+ * message counts the Map maintenance cost exceeds the identity-scan cost.
  */
 export declare class EventFolder {
     private state;

package/lib/types/mobile/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../src/mobile/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,sFAAsF;IACtF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD,sFAAsF;IACtF,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAC1B;AAyeD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,EAAE,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,aAAa,EAAE,CAE7G;AAED;;;;;;;;;GASG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,YAAY,CAA6B;IAEjD,gFAAgF;gBACpE,OAAO,CAAC,EAAE,SAAS,aAAa,EAAE;IAI9C,uEAAuE;IACvE,IAAI,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,aAAa,EAAE;IAanD,kEAAkE;IAClE,IAAI,CAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,OAAO,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,QAAQ,IAAI,aAAa,EAAE;CAK5B"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../src/mobile/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,sFAAsF;IACtF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD,sFAAsF;IACtF,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAC1B;AAyeD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,EAAE,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,aAAa,EAAE,CAE7G;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,YAAY,CAA6B;IAEjD,gFAAgF;gBACpE,OAAO,CAAC,EAAE,SAAS,aAAa,EAAE;IAI9C,uEAAuE;IACvE,IAAI,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,aAAa,EAAE;IAanD,kEAAkE;IAClE,IAAI,CAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,OAAO,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,QAAQ,IAAI,aAAa,EAAE;CAK5B"}

package/lib/types/mobile/messages.js

@@ -490,11 +490,19 @@ export function foldEvents(events, existing) {
  * Incremental folder for one message stream. Live chat folds one event at a
  * time; rebuilding the five index maps by scanning every message per event
  * made that path O(n) per event (O(n * events) per turn). A folder keeps the
- * indexes alive across folds, applies each event in O(1) map operations, and
- * returns the previous snapshot identity unchanged when nothing applied, so
- * React skips the re-render entirely. Replayed events are no-ops: the maxSeq
- * watermark advanced by the first application skips them, which also makes a
- * double-invoked React state updater harmless.
+ * indexes alive across folds, applies each event in (near-)O(1) map
+ * operations, and returns the previous snapshot identity unchanged when
+ * nothing applied, so React skips the re-render entirely. Replayed events
+ * are no-ops: the maxSeq watermark advanced by the first application skips
+ * them, which also makes a double-invoked React state updater harmless.
+ *
+ * Cost contract: every fold that applies at least one event rebuilds the
+ * snapshot as one fresh O(messages) array copy (React needs the new
+ * identity), and replacement paths locate rows by an O(messages) identity
+ * scan. Both are amortized by the consumer folding bursts as ONE batch on a
+ * fixed cadence (see FOLD_FLUSH_MS in ChatView) instead of per event. An
+ * id-to-index map was measured and deliberately rejected: at realistic
+ * message counts the Map maintenance cost exceeds the identity-scan cost.
  */
 export class EventFolder {
     state;

package/lib/types/mobile/views/ChatView.d.ts

@@ -25,6 +25,13 @@ export interface ChatViewProps {
  * history tail re-pull closes the seam.
  */
 export declare const MAX_TAIL_BUFFER_EVENTS = 500;
+/**
+ * Cadence for folding buffered live events into the message list. Streaming
+ * chunks can arrive at a far higher rate; flushing on this cadence caps fold
+ * and re-render work per second without visible lag, and keeps working in
+ * background tabs where requestAnimationFrame is paused.
+ */
+export declare const FOLD_FLUSH_MS = 50;
 /** One switchable permission preset (the `permissions` projection shape). */
 export interface PermissionOption {
     value: string;

package/lib/types/mobile/views/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAMjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAqCzC,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BAoe/D;AA2GD;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAA;AA6F5C,eAAO,MAAM,eAAe,OAAO,CAAA"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAMjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,KAAK,CAAA;AAqC/B,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BA2gB/D;AA2GD;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAA;AA6F5C,eAAO,MAAM,eAAe,OAAO,CAAA"}

package/lib/types/mobile/views/ChatView.js

@@ -24,6 +24,13 @@ import { ThemeToggle } from "../theme-toggle.js";
  * history tail re-pull closes the seam.
  */
 export const MAX_TAIL_BUFFER_EVENTS = 500;
+/**
+ * Cadence for folding buffered live events into the message list. Streaming
+ * chunks can arrive at a far higher rate; flushing on this cadence caps fold
+ * and re-render work per second without visible lag, and keeps working in
+ * background tabs where requestAnimationFrame is paused.
+ */
+export const FOLD_FLUSH_MS = 50;
 /** localStorage key for the tool-call display toggle (persisted on the /m origin). */
 const SHOW_TOOL_CALLS_KEY = 'dsh.mobile.showToolCalls';
 /** localStorage key for the injected-system-message display toggle. */
@@ -121,6 +128,14 @@ export function ChatView({ session, mux, onBack }) {
     const liveBufferRef = useRef([]);
     /** Incremental folder for this session's stream (indexes stay hot across events). */
     const folderRef = useRef(undefined);
+    /**
+     * Live events buffered between fold flushes. Folding every single event
+     * costs one O(messages) snapshot copy per event; flushing at a fixed
+     * cadence folds each burst once while keeping streaming text fluid.
+     */
+    const foldBufferRef = useRef([]);
+    /** Timer id of the scheduled fold flush, if any. */
+    const foldFlushTimerRef = useRef(undefined);
     /** True once the live buffer hit its cap (oldest events were dropped). */
     const liveBufferOverflowRef = useRef(false);
     /** The session's permission select (absent = capability not composed). */
@@ -238,7 +253,22 @@ export function ChatView({ session, mux, onBack }) {
     useEffect(() => {
         if (mux === undefined)
             return;
-        return mux.onFrame((frame) => {
+        /** Fold every buffered live event in one batch and publish the snapshot. */
+        const flushFoldBuffer = () => {
+            if (foldFlushTimerRef.current !== undefined) {
+                clearTimeout(foldFlushTimerRef.current);
+                foldFlushTimerRef.current = undefined;
+            }
+            const events = foldBufferRef.current;
+            if (events.length === 0)
+                return;
+            foldBufferRef.current = [];
+            setMessages(previous => {
+                const folder = folderRef.current;
+                return folder === undefined ? foldEvents(events, previous) : folder.fold(events);
+            });
+        };
+        const unsubscribe = mux.onFrame((frame) => {
             if (frame.type === 'session/event') {
                 if (frame.sessionId !== session.sessionId)
                     return;
@@ -264,10 +294,17 @@ export function ChatView({ session, mux, onBack }) {
                     liveBufferRef.current.push(event);
                     return;
                 }
-                setMessages(previous => {
-                    const folder = folderRef.current;
-                    return folder === undefined ? foldEvents([event], previous) : folder.fold([event]);
-                });
+                foldBufferRef.current.push(event);
+                // Only chunk streams batch on the flush cadence; every other event
+                // (final message, turn close, user echo, update/delete) flushes the
+                // buffer synchronously so settled UI states never wait for a timer.
+                const isChunk = event.type === 'assistant/chunk' || event.type === 'message/chunk';
+                if (!isChunk) {
+                    flushFoldBuffer();
+                }
+                else if (foldFlushTimerRef.current === undefined) {
+                    foldFlushTimerRef.current = setTimeout(flushFoldBuffer, FOLD_FLUSH_MS);
+                }
                 return;
             }
             // Live projection pushes keep the permission picker current.
@@ -307,6 +344,17 @@ export function ChatView({ session, mux, onBack }) {
                 return;
             }
         });
+        return () => {
+            unsubscribe();
+            // Drop the pending flush: its events belong to the session (or
+            // component instance) being torn down, and the next session reseeds
+            // its folder from a fresh history tail.
+            if (foldFlushTimerRef.current !== undefined) {
+                clearTimeout(foldFlushTimerRef.current);
+                foldFlushTimerRef.current = undefined;
+            }
+            foldBufferRef.current = [];
+        };
     }, [mux, session.sessionId]);
     // Weak-network polling fallback: when the assistant is running, poll for
     // pending approvals/questions every 1.5 s so the phone can act even if the

package/lib/types/mobile/views/ChatView.stream.test.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, cleanup, render, screen } from '@testing-library/react';
-import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT } from "./ChatView.js";
+import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT, FOLD_FLUSH_MS } from "./ChatView.js";
 import { renderMarkdown } from "../markdown.js";
 // The api module is fully mocked; App.tsx's history wrapper is overridden to
 // feed a fixed empty history page, its pure helpers stay real.
@@ -134,8 +134,13 @@ describe('ChatView streaming markdown throttle', () => {
             '第三段 ~~删除线~~ 和 [链接](https://example.com/a)。',
         ];
         const full = parts.join('');
-        // The first chunk mounts the pending message; the mount render parses it.
-        await act(async () => { chunk(mux, parts[0] ?? '', 6); });
+        // The first chunk mounts the pending message on the next fold flush
+        // (chunk streams fold in batches on the FOLD_FLUSH_MS cadence); the mount
+        // render parses it.
+        await act(async () => {
+            chunk(mux, parts[0] ?? '', 6);
+            vi.advanceTimersByTime(FOLD_FLUSH_MS + 5);
+        });
         const afterMount = renderMarkdownMock.mock.calls.length;
         expect(afterMount).toBeGreaterThanOrEqual(1);
         // A burst of further chunks does not re-parse per chunk: at most one

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Scan-to-pair mobile and PC remote control for the dsh web GUI: QR entry beside the settings button, one-time pairing tokens, a gated /remote/api desktop channel, live device status, and revocable sessions",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/src/mobile/messages.ts

@@ -611,11 +611,19 @@ export function foldEvents(events: readonly WireEvent[], existing?: readonly Ren
  * Incremental folder for one message stream. Live chat folds one event at a
  * time; rebuilding the five index maps by scanning every message per event
  * made that path O(n) per event (O(n * events) per turn). A folder keeps the
- * indexes alive across folds, applies each event in O(1) map operations, and
- * returns the previous snapshot identity unchanged when nothing applied, so
- * React skips the re-render entirely. Replayed events are no-ops: the maxSeq
- * watermark advanced by the first application skips them, which also makes a
- * double-invoked React state updater harmless.
+ * indexes alive across folds, applies each event in (near-)O(1) map
+ * operations, and returns the previous snapshot identity unchanged when
+ * nothing applied, so React skips the re-render entirely. Replayed events
+ * are no-ops: the maxSeq watermark advanced by the first application skips
+ * them, which also makes a double-invoked React state updater harmless.
+ *
+ * Cost contract: every fold that applies at least one event rebuilds the
+ * snapshot as one fresh O(messages) array copy (React needs the new
+ * identity), and replacement paths locate rows by an O(messages) identity
+ * scan. Both are amortized by the consumer folding bursts as ONE batch on a
+ * fixed cadence (see FOLD_FLUSH_MS in ChatView) instead of per event. An
+ * id-to-index map was measured and deliberately rejected: at realistic
+ * message counts the Map maintenance cost exceeds the identity-scan cost.
  */
 export class EventFolder {
   private state: FoldState

package/src/mobile/views/ChatView.stream.test.tsx

@@ -8,7 +8,7 @@
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { act, cleanup, render, screen } from '@testing-library/react'
-import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT } from './ChatView.tsx'
+import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT, FOLD_FLUSH_MS } from './ChatView.tsx'
 import { type SessionView } from './App.tsx'
 import { renderMarkdown } from '../markdown.ts'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
@@ -150,8 +150,13 @@ describe('ChatView streaming markdown throttle', () => {
     ]
     const full = parts.join('')
 
-    // The first chunk mounts the pending message; the mount render parses it.
-    await act(async () => { chunk(mux, parts[0] ?? '', 6) })
+    // The first chunk mounts the pending message on the next fold flush
+    // (chunk streams fold in batches on the FOLD_FLUSH_MS cadence); the mount
+    // render parses it.
+    await act(async () => {
+      chunk(mux, parts[0] ?? '', 6)
+      vi.advanceTimersByTime(FOLD_FLUSH_MS + 5)
+    })
     const afterMount = renderMarkdownMock.mock.calls.length
     expect(afterMount).toBeGreaterThanOrEqual(1)
 

package/src/mobile/views/ChatView.tsx

@@ -38,6 +38,14 @@ export interface ChatViewProps {
  */
 export const MAX_TAIL_BUFFER_EVENTS = 500
 
+/**
+ * Cadence for folding buffered live events into the message list. Streaming
+ * chunks can arrive at a far higher rate; flushing on this cadence caps fold
+ * and re-render work per second without visible lag, and keeps working in
+ * background tabs where requestAnimationFrame is paused.
+ */
+export const FOLD_FLUSH_MS = 50
+
 /** localStorage key for the tool-call display toggle (persisted on the /m origin). */
 const SHOW_TOOL_CALLS_KEY = 'dsh.mobile.showToolCalls'
 /** localStorage key for the injected-system-message display toggle. */
@@ -147,6 +155,14 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const liveBufferRef = useRef<WireEvent[]>([])
   /** Incremental folder for this session's stream (indexes stay hot across events). */
   const folderRef = useRef<EventFolder | undefined>(undefined)
+  /**
+   * Live events buffered between fold flushes. Folding every single event
+   * costs one O(messages) snapshot copy per event; flushing at a fixed
+   * cadence folds each burst once while keeping streaming text fluid.
+   */
+  const foldBufferRef = useRef<WireEvent[]>([])
+  /** Timer id of the scheduled fold flush, if any. */
+  const foldFlushTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   /** True once the live buffer hit its cap (oldest events were dropped). */
   const liveBufferOverflowRef = useRef(false)
 
@@ -273,7 +289,21 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   // Live frames: fold session events for this session in as they arrive.
   useEffect(() => {
     if (mux === undefined) return
-    return mux.onFrame((frame: MuxFrame) => {
+    /** Fold every buffered live event in one batch and publish the snapshot. */
+    const flushFoldBuffer = (): void => {
+      if (foldFlushTimerRef.current !== undefined) {
+        clearTimeout(foldFlushTimerRef.current)
+        foldFlushTimerRef.current = undefined
+      }
+      const events = foldBufferRef.current
+      if (events.length === 0) return
+      foldBufferRef.current = []
+      setMessages(previous => {
+        const folder = folderRef.current
+        return folder === undefined ? foldEvents(events, previous) : folder.fold(events)
+      })
+    }
+    const unsubscribe = mux.onFrame((frame: MuxFrame) => {
       if (frame.type === 'session/event') {
         if (frame.sessionId !== session.sessionId) return
         const event = frame.event as WireEvent
@@ -298,10 +328,16 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           liveBufferRef.current.push(event)
           return
         }
-        setMessages(previous => {
-          const folder = folderRef.current
-          return folder === undefined ? foldEvents([event], previous) : folder.fold([event])
-        })
+        foldBufferRef.current.push(event)
+        // Only chunk streams batch on the flush cadence; every other event
+        // (final message, turn close, user echo, update/delete) flushes the
+        // buffer synchronously so settled UI states never wait for a timer.
+        const isChunk = event.type === 'assistant/chunk' || event.type === 'message/chunk'
+        if (!isChunk) {
+          flushFoldBuffer()
+        } else if (foldFlushTimerRef.current === undefined) {
+          foldFlushTimerRef.current = setTimeout(flushFoldBuffer, FOLD_FLUSH_MS)
+        }
         return
       }
       // Live projection pushes keep the permission picker current.
@@ -342,6 +378,17 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         return
       }
     })
+    return () => {
+      unsubscribe()
+      // Drop the pending flush: its events belong to the session (or
+      // component instance) being torn down, and the next session reseeds
+      // its folder from a fresh history tail.
+      if (foldFlushTimerRef.current !== undefined) {
+        clearTimeout(foldFlushTimerRef.current)
+        foldFlushTimerRef.current = undefined
+      }
+      foldBufferRef.current = []
+    }
   }, [mux, session.sessionId])
 
   // Weak-network polling fallback: when the assistant is running, poll for