@linxin666/dsh-remote-web-ui 0.2.0 → 0.2.2

package/src/client/UpdateEntry.tsx

@@ -1,8 +1,9 @@
 /**
  * The sidebar update seat: the download trigger beside the remote-control
  * trigger plus the update panel modal. Owns the flow — probe the registry
- * on open, auto-run the update when a newer release exists, report the
- * outcome (restart hint on success, translated failure on error).
+ * on open, show the result, and let the user start the update from the
+ * result view (#507), then report the outcome (restart hint on success,
+ * translated failure on error).
  * Component-local state per the client stack rules.
  */
 import { useCallback, useEffect, useRef, useState } from "react"
@@ -72,9 +73,12 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
       setView({ kind: "result", status })
       return
     }
+    // Checking never starts an update by itself (#507): the result view
+    // carries the confirmation button that calls startUpdate.
     setView({ kind: "result", status })
-    // Auto-update: an npm install with a newer release proceeds without a
-    // second confirmation — clicking the update trigger is the intent.
+  }, [t])
+
+  const startUpdate = useCallback(async (status: UpdateStatus): Promise<void> => {
     if (status.mode !== "npm" || !status.outdated) return
     setView({ kind: "updating", status })
     const token = ++runToken.current
@@ -128,7 +132,7 @@ export function UpdateEntry({ wide, t }: UpdateEntryProps) {
       {open && createPortal((
         <div className={css.overlay} role="presentation">
           <div className={css.mask} aria-hidden="true" onClick={closePanel} />
-          <UpdatePanel t={t} view={view} onClose={closePanel} onRecheck={() => { void check() }} />
+          <UpdatePanel t={t} view={view} onClose={closePanel} onRecheck={() => { void check() }} onStartUpdate={(status) => { void startUpdate(status) }} />
         </div>
       ), document.body)}
     </>

package/src/client/UpdatePanel.tsx

@@ -24,6 +24,8 @@ export interface UpdatePanelProps {
   onClose(): void
   /** Re-run the check from a terminal state. */
   onRecheck(): void
+  /** Start the update from the result view (the confirmation step, #507). */
+  onStartUpdate(status: UpdateStatus): void
 }
 
 /** The anchor package name (aggregate first) for copy purposes. */
@@ -41,7 +43,7 @@ function anchorLatest(status: UpdateStatus | undefined): string | undefined {
  * @param props - copy, view state, and actions.
  * @returns the panel element tree.
  */
-export function UpdatePanel({ t, view, onClose, onRecheck }: UpdatePanelProps) {
+export function UpdatePanel({ t, view, onClose, onRecheck, onStartUpdate }: UpdatePanelProps) {
   const status = view.kind === "result" || view.kind === "updating" ? view.status : undefined
   const title = view.kind === "done" && view.result.ok ? t("update.done") : t("update.title")
   const subtitle = subtitleOf(t, view)
@@ -58,11 +60,19 @@ export function UpdatePanel({ t, view, onClose, onRecheck }: UpdatePanelProps) {
       </div>
       {view.kind === "checking" && <p className={css.updateStatus}>{t("update.checking")}</p>}
       {view.kind === "result" && status !== undefined && <ResultBody t={t} status={status} />}
+      {view.kind === "result" && status !== undefined && status.mode === "npm" && status.outdated && status.error === undefined && (
+        <div className={css.updateActions}>
+          <button type="button" className={css.updateRetry} onClick={() => onStartUpdate(status)}>
+            {t("update.start")}
+          </button>
+        </div>
+      )}
       {view.kind === "updating" && status !== undefined && (
         <div>
           <p className={css.updateStatus}>
             {t("update.updating", { name: anchorName(status) ?? "", version: anchorLatest(status) ?? "" })}
           </p>
+          <p className={css.updateDetail}>{t("update.cooldownNotice")}</p>
           <PackageList status={status} />
         </div>
       )}
@@ -136,6 +146,7 @@ function ResultBody({ t, status }: { t: TranslateNS<"remote">; status: UpdateSta
         <p className={css.updateDetail}>
           {anchor !== undefined ? t("update.foundDetail", { name: anchor, version: latest ?? "" }) : ""}
         </p>
+        <p className={css.updateDetail}>{t("update.cooldownNotice")}</p>
       </div>
     )
   }

package/src/client/locales.ts

@@ -80,9 +80,11 @@ export const zh = {
   'update.upToDate': '当前已是最新版本',
   'update.upToDateDetail': '{name} 已是最新版本 v{version}。',
   'update.found': '发现新版本',
-  'update.foundDetail': '{name} 有新版本 v{version}，正在自动更新…',
+  'update.foundDetail': '{name} 有新版本 v{version}。确认后开始更新。',
+  'update.start': '开始更新',
   'update.updating': '正在更新 {name} 至 v{version}，可能需要 1-2 分钟…',
-  'update.updatingTitle': '正在自动更新…',
+  'update.cooldownNotice': '本次更新由你主动触发，将跳过 pnpm 的 24 小时发布冷却期（供应链保护）直接安装所选版本。',
+  'update.updatingTitle': '正在更新…',
   'update.done': '更新完成',
   'update.doneDetail': '所有组件已更新到最新版本。',
   'update.restartHint': '请重启 dsh web 使新版本生效：在终端按 Ctrl+C 停止后重新运行 dsh web。',
@@ -194,9 +196,11 @@ export const en = {
   'update.upToDate': 'Everything is up to date',
   'update.upToDateDetail': '{name} is at the latest version v{version}.',
   'update.found': 'A new version is available',
-  'update.foundDetail': '{name} has a newer release v{version}; updating automatically…',
+  'update.foundDetail': '{name} has a newer release v{version}. Confirm to start the update.',
+  'update.start': 'Update now',
   'update.updating': 'Updating {name} to v{version}; this may take 1-2 minutes…',
-  'update.updatingTitle': 'Updating automatically…',
+  'update.cooldownNotice': 'This user-initiated update bypasses pnpm\'s 24-hour release cooldown (supply-chain protection) and installs the selected version immediately.',
+  'update.updatingTitle': 'Updating…',
   'update.done': 'Update complete',
   'update.doneDetail': 'All components are up to date.',
   'update.restartHint': 'Restart dsh web for the new version to take effect: stop it with Ctrl+C in the terminal, then run dsh web again.',

package/src/client/pair-api.ts

@@ -128,16 +128,7 @@ export function readPairParams(search: string): { pair?: string; workspace?: str
   }
 }
 
-/**
- * Strip one query parameter from the current URL without reloading.
- * @param name - the parameter to remove.
- * @returns the new search string ('' when empty).
- */
-export function stripParam(name: string): string {
-  const url = new URL(window.location.href)
-  url.searchParams.delete(name)
-  return url.search
-}/** Human-readable expiry clock, e.g. "10:35". */
+/** Human-readable expiry clock, e.g. "10:35". */
 export function formatClock(epochMs: number): string {
   const date = new Date(epochMs)
   const hours = String(date.getHours()).padStart(2, '0')

package/src/client/settings-card.module.css

@@ -290,6 +290,92 @@
   border-color: var(--dsw-alias-label-error);
 }
 
+.selectWrap {
+  position: relative;
+}
+
+.selectButton {
+  appearance: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  display: flex;
+}
+
+.selectLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selectChevron {
+  color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
+}
+
+.selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+.selectPopup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  flex-direction: column;
+  max-height: 240px;
+  overflow-y: auto;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  box-shadow: 0 8px 24px var(--dsw-alias-bg-mask-2);
+  padding: 4px;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.1s ease, transform 0.1s ease;
+  display: flex;
+}
+
+.selectPopupOpen {
+  opacity: 1;
+  transform: none;
+}
+
+.selectPopupClose {
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+}
+
+.selectOption {
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selectOption:hover,
+.selectOptionActive {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.selectOptionSelected {
+  color: var(--dsw-alias-brand-primary);
+  font-weight: 500;
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color) 10%, transparent);
+}
+
 .invalid {
   color: var(--dsw-alias-label-error);
   margin: 0;
@@ -310,7 +396,10 @@
   .chevron,
   .chevronOpen,
   .discard,
-  .save {
+  .save,
+  .selectChevron,
+  .selectChevronOpen,
+  .selectPopup {
     transition: none;
   }
 }

package/src/gate.ts

@@ -89,6 +89,8 @@ export function makeGateListener(
     if (!active) return false
     const require = typeof requirePairingForLan === 'function' ? requirePairingForLan() : requirePairingForLan
     if (!require) return next()
+    // The paired-device cookie is a full host-API credential: it passes this
+    // gate for the whole ApiProxy surface, not just the /m/api allowlist.
     return isPairedDeviceRequest(service, request) ? next() : false
   }
 }

package/src/mobile/api.ts

@@ -6,6 +6,7 @@
  */
 
 import type { WorkspaceView } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
+import type { AgentPresetEntry } from '@deepseek-ai/dsh-host-apiproxy/api/agent-presets'
 import type { SessionSummary, SessionModels, SessionProjectionsBlock } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
 import { callUnary } from './rpc.ts'
 
@@ -24,6 +25,13 @@ export interface CreatedSession {
   agentPreset?: string
 }
 
+/** Agent presets available when composing a new session. */
+export interface AgentPresetRoster {
+  presets: readonly AgentPresetEntry[]
+  authorable: boolean
+  hasDocument: boolean
+}
+
 /** One history page (already bounded to whole messages by the host). */
 export interface HistoryPage {
   events: import('@deepseek-ai/dsh-host-apiproxy/api/sessions').HistoryEntry[]
@@ -57,12 +65,17 @@ export async function listSessions(cursor?: string): Promise<SessionPage> {
   return await callUnary<SessionPage>('session.list', cursor === undefined ? {} : { cursor })
 }
 
+/** Read the available agent compositions for a new session. */
+export async function listAgentPresets(): Promise<AgentPresetRoster> {
+  return await callUnary<AgentPresetRoster>('agentPreset.list', {})
+}
+
 /**
  * Create a blank session (entity birth precedes the first message). Name a
  * workspace to attach it there, or a cwd; omitting both uses the host cwd.
  */
 export async function createSession(
-  options: { workspaceId?: string; cwd?: string } = {},
+  options: { workspaceId?: string; cwd?: string; agentPreset?: string } = {},
 ): Promise<CreatedSession> {
   return await callUnary<CreatedSession>('session.create', options)
 }

package/src/mobile/messages.test.ts

@@ -1,6 +1,6 @@
 /** foldEvents: message-list folding from a session event stream. */
 import { describe, expect, it } from 'vitest'
-import { foldEvents, type WireEvent } from './messages.ts'
+import { EventFolder, foldEvents, type WireEvent } from './messages.ts'
 
 /** Assemble one event with an auto-incrementing seq / time. */
 function makeEvent(
@@ -326,3 +326,54 @@ describe('foldEvents', () => {
     expect(result[0]).toMatchObject({ id: 'u-1', kind: 'user' })
   })
 })
+
+describe('EventFolder incremental folding', () => {
+  it('matches a one-shot fold when events arrive one at a time', () => {
+    const stream: WireEvent[] = [
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 0),
+      textChunk(0, 0, '你', 1),
+      textChunk(0, 0, '好', 2),
+      makeEvent('assistant/message', assistantMessageData('a-1', 0, 0, '你好'), 3),
+      makeEvent('message/update', { id: 'u-1', text: '更新' }, 4),
+    ]
+    const oneShot = foldEvents(stream)
+    const folder = new EventFolder()
+    let incremental: ReturnType<typeof foldEvents> = []
+    for (const event of stream) incremental = folder.fold([event])
+    expect(incremental).toEqual(oneShot)
+  })
+
+  it('replays and re-folds are no-ops and reuse the previous snapshot identity', () => {
+    const folder = new EventFolder(foldEvents([
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 0),
+      textChunk(0, 0, '你', 1),
+    ]))
+    const first = folder.fold([textChunk(0, 0, '好', 2)])
+    expect(first[first.length - 1]).toMatchObject({ text: '你好', pending: true })
+    // Same event again (wire replay or a double-invoked state updater): no change, same identity.
+    const replay = folder.fold([textChunk(0, 0, '好', 2)])
+    expect(replay).toBe(first)
+    // A no-op batch over an already folded stream also keeps the identity.
+    expect(folder.fold([])).toBe(first)
+  })
+
+  it('prepends older pages and keeps folding live events on top', () => {
+    const folder = new EventFolder(foldEvents([
+      makeEvent('user/message', userMessageData('u-2', '第二页'), 10),
+    ]))
+    folder.prepend(foldEvents([makeEvent('user/message', userMessageData('u-1', '第一页'), 5)]))
+    const withLive = folder.fold([textChunk(0, 0, '新', 11)])
+    expect(withLive.map(message => message.id)).toEqual(['u-1', 'u-2', 'assistant,0.0#11'])
+    // The live fold must not lose the prepended rows on later events.
+    const later = folder.fold([textChunk(0, 0, '续', 12)])
+    expect(later.map(message => message.id)).toEqual(['u-1', 'u-2', 'assistant,0.0#11'])
+    expect(later[2]).toMatchObject({ text: '新续', pending: true })
+  })
+
+  it('seed replaces the whole stream', () => {
+    const folder = new EventFolder(foldEvents([makeEvent('user/message', userMessageData('u-1', '旧'), 0)]))
+    folder.seed(foldEvents([makeEvent('user/message', userMessageData('u-2', '新'), 5)]))
+    expect(folder.snapshot().map(message => message.id)).toEqual(['u-2'])
+    expect(folder.fold([textChunk(0, 0, '追加', 6)]).map(message => message.id)).toEqual(['u-2', 'assistant,0.0#6'])
+  })
+})

package/src/mobile/messages.ts

@@ -191,16 +191,6 @@ function chunkTarget(data: unknown): { text: string; kind: 'text' | 'reasoning';
   return result
 }
 
-/** Max message seq across an existing list, or -1 for an empty list. */
-function watermarkOf(existing: readonly RenderMessage[] | undefined): number {
-  if (existing === undefined) return -1
-  let maxSeq = -1
-  for (const message of existing) {
-    if (message.seq > maxSeq) maxSeq = message.seq
-  }
-  return maxSeq
-}
-
 /** Mutable fold state; message objects are immutable and swapped on change. */
 interface FoldState {
   messages: RenderMessage[]
@@ -215,6 +205,8 @@ interface FoldState {
   toolNames: Map<string, Set<string>>
   /** Context window for the current model (from request/context). */
   contextWindow?: number
+  /** Highest seq folded so far; the replay/watermark gate. */
+  maxSeq: number
 }
 
 function createState(existing: readonly RenderMessage[] | undefined): FoldState {
@@ -226,8 +218,10 @@ function createState(existing: readonly RenderMessage[] | undefined): FoldState
     turnStepMessage: new Map(),
     messageTurn: new Map(),
     toolNames: new Map(),
+    maxSeq: -1,
   }
   for (const message of messages) {
+    if (message.seq > state.maxSeq) state.maxSeq = message.seq
     state.byId.set(message.id, message)
     if (message.kind !== 'assistant') continue
     // Rebuild the (turn, step) and turn index maps lost when `existing` was
@@ -287,6 +281,7 @@ function retargetTurnStep(state: FoldState, key: string | undefined, oldMessage:
 
 /** Fold one event into the working state. Assumes the event passes the watermark. */
 function applyEvent(state: FoldState, event: WireEvent): void {
+  if (event.seq > state.maxSeq) state.maxSeq = event.seq
   switch (event.type) {
     case 'user/message':
       applyUserMessage(state, event)
@@ -608,17 +603,65 @@ function applyTurnEnd(state: FoldState, event: WireEvent): void {
  * @returns messages sorted by seq.
  */
 export function foldEvents(events: readonly WireEvent[], existing?: readonly RenderMessage[]): RenderMessage[] {
-  const sorted = [...events].sort((a, b) => a.seq - b.seq)
-  const watermark = watermarkOf(existing)
-  const state = createState(existing)
-  for (const event of sorted) {
-    if (event.seq <= watermark) continue
-    applyEvent(state, event)
-  }
-  // Incremental tails (the live-stream hot path) are appended in seq order
-  // or updated in place, so the list is usually ordered already — verify in
-  // O(n) and skip the O(n log n) re-sort when it is.
-  const out = state.messages
+  return new EventFolder(existing).fold(events)
+}
+
+/**
+ * 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.
+ */
+export class EventFolder {
+  private state: FoldState
+  private snapshotList: RenderMessage[] | undefined
+
+  /** @param initial - seed rows (history tail load); omit for an empty stream. */
+  constructor(initial?: readonly RenderMessage[]) {
+    this.state = createState(initial)
+  }
+
+  /** Fold one batch incrementally; returns the current snapshot list. */
+  fold(events: readonly WireEvent[]): RenderMessage[] {
+    const sorted = [...events].sort((a, b) => a.seq - b.seq)
+    let applied = false
+    for (const event of sorted) {
+      if (event.seq <= this.state.maxSeq) continue
+      applyEvent(this.state, event)
+      applied = true
+    }
+    if (!applied && this.snapshotList !== undefined) return this.snapshotList
+    this.snapshotList = snapshotOf(this.state)
+    return this.snapshotList
+  }
+
+  /** Replace the whole stream (history reload / session switch). */
+  seed(messages: readonly RenderMessage[]): void {
+    this.state = createState(messages)
+    this.snapshotList = undefined
+  }
+
+  /** Prepend an older history page (exact seam; no overlapping seqs). */
+  prepend(older: readonly RenderMessage[]): void {
+    this.state = createState([...older, ...this.state.messages])
+    this.snapshotList = undefined
+  }
+
+  /** Current snapshot list; a fresh copy whenever the folder changed. */
+  snapshot(): RenderMessage[] {
+    if (this.snapshotList !== undefined) return this.snapshotList
+    this.snapshotList = snapshotOf(this.state)
+    return this.snapshotList
+  }
+}
+
+/** Copy the folder's rows and keep them seq-ordered (skips re-sorting the common ordered case). */
+function snapshotOf(state: FoldState): RenderMessage[] {
+  const out = [...state.messages]
   let ordered = true
   for (let index = 1; index < out.length; index += 1) {
     const prev = out[index - 1]!
@@ -628,5 +671,5 @@ export function foldEvents(events: readonly WireEvent[], existing?: readonly Ren
       break
     }
   }
-  return ordered ? out : [...out].sort((a, b) => a.seq - b.seq || (a.id < b.id ? -1 : 1))
+  return ordered ? out : out.sort((a, b) => a.seq - b.seq || (a.id < b.id ? -1 : 1))
 }

package/src/mobile/mobile-styles.ts

@@ -252,6 +252,43 @@ body {
   padding: 8px 16px;
 }
 
+.mobile-create {
+  display: grid;
+  gap: 8px;
+}
+
+.mobile-preset {
+  display: grid;
+  gap: 4px;
+}
+
+.mobile-presetLabel {
+  color: var(--m-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.mobile-presetSelect {
+  width: 100%;
+  height: 40px;
+  padding: 0 36px 0 12px;
+  border: 1px solid var(--m-border);
+  border-radius: 10px;
+  background: var(--m-bg-input);
+  color: var(--m-text);
+  font: inherit;
+}
+
+.mobile-presetSelect:disabled {
+  opacity: 0.6;
+}
+
+.mobile-presetDescription {
+  margin: 0;
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+}
+
 /* ── buttons ─────────────────────────────────────────────────────────── */
 
 .mobile-button {
@@ -896,6 +933,7 @@ body {
 .mobile-row:focus-visible,
 .mobile-button:focus-visible,
 .mobile-new:focus-visible,
+.mobile-presetSelect:focus-visible,
 .chat-send:focus-visible,
 .chat-chip:focus-visible,
 .chat-msg-toggle:focus-visible,

package/src/mobile/mobile-theme.test.ts

@@ -2,7 +2,7 @@
 /** mobile-theme: light default, persisted dark toggle, document wiring. */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
-  getMobileTheme, initMobileTheme, setMobileTheme, subscribeMobileTheme, toggleMobileTheme,
+  getMobileTheme, setMobileTheme, subscribeMobileTheme, toggleMobileTheme,
 } from './mobile-theme.ts'
 
 const STORAGE_KEY = 'dsh.remote.theme'

package/src/mobile/views/ChatView.tsx

@@ -11,13 +11,13 @@
  *   permission pickers, both as bottom sheets.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import type { MuxFrame } from '@deepseek-ai/dsh-host-apiproxy/api/events'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
 import { loadHistory, prompt, type SessionView } from './App.tsx'
 import { errorText, formatTime, staleHostHint } from './App.tsx'
 import { fetchMobilePreferences, models, selectModel, sendCommand } from '../api.ts'
-import { foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
+import { EventFolder, foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
 import { renderMarkdown } from '../markdown.ts'
 import { MuxClient } from '../mux.ts'
 import { ThemeToggle } from '../theme-toggle.tsx'
@@ -144,6 +144,8 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const tailLoadingRef = useRef(true)
   /** Live session events buffered while the initial tail page loads. */
   const liveBufferRef = useRef<WireEvent[]>([])
+  /** Incremental folder for this session's stream (indexes stay hot across events). */
+  const folderRef = useRef<EventFolder | undefined>(undefined)
   /** True once the live buffer hit its cap (oldest events were dropped). */
   const liveBufferOverflowRef = useRef(false)
 
@@ -188,6 +190,7 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
     tailLoadingRef.current = true
     liveBufferRef.current = []
     liveBufferOverflowRef.current = false
+    folderRef.current = undefined
     setLoading(true)
     setError(undefined)
     setMessages([])
@@ -199,7 +202,9 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         const buffered = liveBufferRef.current
         liveBufferRef.current = []
         tailLoadingRef.current = false
-        setMessages(foldEvents(buffered, foldEvents(page.events.map(eventOf))))
+        const folder = new EventFolder(foldEvents(page.events.map(eventOf)))
+        folderRef.current = folder
+        setMessages(folder.fold(buffered))
         setHasOlder(page.hasMore)
         setLoading(false)
         // The history-tail projection baseline seeds the permission picker.
@@ -215,7 +220,9 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           void loadHistory(session.sessionId, undefined, controller.signal).then(
             (fresh) => {
               if (cancelled) return
-              setMessages(previous => foldEvents(fresh.events.map(eventOf), previous))
+              const folder = folderRef.current
+              const freshEvents = fresh.events.map(eventOf)
+              setMessages(previous => folder === undefined ? foldEvents(freshEvents, previous) : folder.fold(freshEvents))
               liveBufferOverflowRef.current = false
             },
             (reason: unknown) => {
@@ -231,7 +238,10 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         const buffered = liveBufferRef.current
         liveBufferRef.current = []
         tailLoadingRef.current = false
-        if (buffered.length > 0) setMessages(foldEvents(buffered))
+        if (buffered.length > 0) {
+          const folder = folderRef.current
+          setMessages(folder === undefined ? foldEvents(buffered) : folder.fold(buffered))
+        }
         setError(errorText(reason))
         setLoading(false)
       },
@@ -274,7 +284,10 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           liveBufferRef.current.push(event)
           return
         }
-        setMessages(previous => foldEvents([event], previous))
+        setMessages(previous => {
+          const folder = folderRef.current
+          return folder === undefined ? foldEvents([event], previous) : folder.fold([event])
+        })
         return
       }
       // Live projection pushes keep the permission picker current.
@@ -330,7 +343,13 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         pendingRef.current = false
         setLoading(false)
         const older = foldEvents(page.events.map(eventOf))
-        setMessages(previous => [...older, ...previous])
+        const folder = folderRef.current
+        if (folder === undefined) {
+          setMessages(previous => [...older, ...previous])
+        } else {
+          folder.prepend(older)
+          setMessages(folder.snapshot())
+        }
         setHasOlder(page.hasMore)
       },
       (reason: unknown) => {
@@ -481,8 +500,12 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
 
 /* ── message rows ─────────────────────────────────────────────────────── */
 
-/** One rendered message row (user bubble or assistant bubble with folds). */
-function MessageRow({ message, showToolCalls, showSystemMessages }: {
+/**
+ * One rendered message row (user bubble or assistant bubble with folds).
+ * Memoized: live streaming updates exactly one message object per frame, so
+ * unchanged rows skip re-rendering their markdown/sub-components.
+ */
+const MessageRow = memo(function MessageRow({ message, showToolCalls, showSystemMessages }: {
   message: RenderMessage
   showToolCalls: boolean
   showSystemMessages: boolean
@@ -510,7 +533,7 @@ function MessageRow({ message, showToolCalls, showSystemMessages }: {
       <span className="chat-msg-time">{formatTime(message.time)}</span>
     </div>
   )
-}
+})
 
 /** Collapsed-by-default reasoning disclosure (web-UI Think-row parity). */
 function ReasoningDisclosure({ text, pending }: { text: string; pending: boolean }) {