@oversk7/pi-web-dsh-style 1.3.3 → 1.4.0

package/README.md

@@ -40,6 +40,12 @@ pi --web
 
 You can also enter `/web` in an existing Pi terminal. The page opens on your computer; the default local address is `http://127.0.0.1:18789`. To stop the service, run `/web --stop` or exit the host Pi process. Closing the browser tab alone does not stop it.
 
+Each visible page subscribes to its selected session, receives an initial snapshot, and then receives only changes. Hidden tabs pause live updates and notifications; returning to the page synchronizes the latest state. Pi and its tools continue running while no page is viewing them.
+
+Switching back to a newly created or previously loaded session shows its cached content immediately and keeps the composer available while refreshing. Repeated opens share pending requests, and sessions with a running process return their current snapshot without waiting for RPC refreshes.
+
+In the in-app workspace directory browser, click the pencil to paste a full path. The list loads the corresponding directory and filters matching folders, including deeply nested paths. Click a folder to select it, or press Enter to navigate directly; a trailing separator previews the folder's contents. Relative file links in replies resolve against the selected session's workspace.
+
 The interface starts in Chinese. To switch to English, open **设置 (Settings) → 外观 (Appearance) → 界面语言 (Interface language) → English**. Your choice is saved in this browser.
 
 ### Phone and remote access
@@ -85,6 +91,12 @@ pi --web
 
 也可以在已有的 Pi 终端中输入 `/web`。网页会在本机打开，默认地址为 `http://127.0.0.1:18789`。执行 `/web --stop` 或退出宿主 Pi 可停止服务；仅关闭浏览器标签页不会停止服务。
 
+每个可见网页只订阅正在查看的会话，首次接收快照，随后只传输变化内容。隐藏标签页会暂停实时更新和通知，返回网页后同步最新状态。没有网页查看时，Pi 和工具仍会继续运行。
+
+切回新建或已加载的会话时，立即显示缓存内容，后台刷新期间仍可编辑输入。重复打开会复用待完成请求；已有运行进程的会话直接返回当前快照，避免等待 RPC 刷新。
+
+在内置工作区目录浏览器中，点击铅笔图标即可粘贴完整路径，列表会加载对应目录并筛选匹配的文件夹，支持多层嵌套路径。点击文件夹选择，或按 Enter 直接跳转；路径末尾带分隔符时预览该文件夹的内容。回答中的相对文件链接按当前会话的工作区解析。
+
 界面默认使用中文。打开 **设置 → 外观 → 界面语言**，即可一键切换中文或 English；选择会保存在当前浏览器。
 
 ### 手机与远程访问

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oversk7/pi-web-dsh-style",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "An unofficial DSH-styled Windows browser UI for pi coding agent with configurable LAN and native frp relay access",
   "type": "module",
   "license": "MIT",

package/server.ts

@@ -183,6 +183,7 @@ interface RuntimeSession {
   streaming: boolean;
   needsAttention: boolean;
   starting?: Promise<void>;
+  openRefresh?: Promise<void>;
   modelRefresh?: Promise<void>;
   commandRefresh?: Promise<void>;
   lastUsed: number;
@@ -620,7 +621,14 @@ function firstMessageTitle(session: SessionInfo): string {
 // ---------------------------------------------------------------------------
 
 function broadcastEvent(event: Json): void {
-  for (const client of [...sseClients]) sendSseEvent(client, event);
+  for (const client of [...sseClients]) {
+    if (event.sessionId && client.sessionId !== event.sessionId) continue;
+    sendSseEvent(client, event);
+  }
+}
+
+function hasSessionSubscribers(sessionId: string): boolean {
+  return [...sseClients].some((client) => !client.closed && client.sessionId === sessionId);
 }
 
 function sessionSummary(record: RuntimeSession): Json {
@@ -684,12 +692,17 @@ function setPendingQueue(record: RuntimeSession, queue: RpcQueueSnapshot): void
 const snapshotScheduler = createSnapshotScheduler<RuntimeSession>(emitSessionSnapshot);
 
 function broadcastSessionSnapshot(record: RuntimeSession): void {
-  if (shuttingDown) return;
+  if (shuttingDown || !hasSessionSubscribers(record.id)) return;
   snapshotScheduler.schedule(record.id, record, !record.streaming || record.dialogs.length > 0);
 }
 
 function emitSessionSnapshot(record: RuntimeSession): void {
-  broadcastEvent({
+  if (shuttingDown || !hasSessionSubscribers(record.id)) return;
+  broadcastEvent(sessionSnapshot(record));
+}
+
+function sessionSnapshot(record: RuntimeSession): Json {
+  return {
     type: "snapshot",
     sessionId: record.id,
     session: sessionSummary(record),
@@ -703,7 +716,7 @@ function emitSessionSnapshot(record: RuntimeSession): void {
     messages: browserMessages(snapshotMessages(record)),
     pendingQueue: pendingQueueSnapshot(record),
     dialogs: record.dialogs,
-  });
+  };
 }
 
 function serializeWorkspaces(): Json[] {
@@ -1473,6 +1486,19 @@ async function ensureProcess(record: RuntimeSession): Promise<void> {
   return task;
 }
 
+function refreshOpenedSession(record: RuntimeSession): void {
+  if (record.openRefresh || record.streaming || record.starting) return;
+  record.openRefresh = (async () => {
+    await Promise.allSettled([refreshState(record), refreshMessages(record)]);
+    if (record.models.length === 0) await refreshModels(record).catch(() => {});
+    applyCachedModelInfo(record);
+    await refreshStats(record);
+    broadcastSessionSnapshot(record);
+  })().catch((error) => {
+    console.error("[pi-web] open session refresh failed:", error);
+  }).finally(() => { record.openRefresh = undefined; });
+}
+
 async function openSessionRecord(record: RuntimeSession): Promise<void> {
   record.lastUsed = Date.now();
   applyCachedCommands(record);
@@ -1535,6 +1561,14 @@ async function openSessionRecord(record: RuntimeSession): Promise<void> {
     return;
   }
 
+  if (record.proc && record.state) {
+    // Live events keep this snapshot current; browsing must not wait for RPC.
+    applyCachedModelInfo(record);
+    refreshOpenedSession(record);
+    broadcastSessionSnapshot(record);
+    return;
+  }
+
   if (!record.proc) {
     await ensureProcess(record);
   } else {
@@ -1909,21 +1943,11 @@ async function listDirectories(input: string): Promise<Json> {
     .map((e) => ({ name: e.name, path: join(target, e.name), hidden: e.name.startsWith(".") }))
     .sort((a, b) => a.name.localeCompare(b.name, "zh-CN"));
   const crumbs: { name: string; path: string; hidden: boolean }[] = [];
-  {
-    const parts: string[] = [];
-    let current = target;
-    for (;;) {
-      parts.unshift(current);
-      const up = dirname(current);
-      if (up === current) break;
-      current = up;
-    }
-    let acc = parts[0];
-    crumbs.push({ name: parts[0], path: parts[0], hidden: false });
-    for (const part of parts.slice(1)) {
-      acc = join(acc, part);
-      crumbs.push({ name: part, path: acc, hidden: part.startsWith(".") });
-    }
+  for (let current = target; ; current = dirname(current)) {
+    const isRoot = dirname(current) === current;
+    const name = isRoot ? current : basename(current);
+    crumbs.unshift({ name, path: current, hidden: !isRoot && name.startsWith(".") });
+    if (isRoot) break;
   }
   const parent = dirname(target) === target ? null : dirname(target);
   return { path: target, home, parent, crumbs, entries: dirs, truncated: false };
@@ -2593,6 +2617,9 @@ async function handleApi(req: import("node:http").IncomingMessage, res: ServerRe
   }
 
   if (method === "GET" && path === "/api/events") {
+    const sessionId = url.searchParams.get("sessionId") || undefined;
+    const subscribedSession = sessionId ? sessions.get(sessionId) : undefined;
+    if (sessionId && !subscribedSession) return sendJson(res, 404, { error: "session not found" });
     res.writeHead(200, {
       "content-type": "text/event-stream; charset=utf-8",
       "cache-control": "no-store",
@@ -2604,10 +2631,13 @@ async function handleApi(req: import("node:http").IncomingMessage, res: ServerRe
     const removeClient = () => {
       closeSseClient(client);
       sseClients.delete(client);
+      if (sessionId && !hasSessionSubscribers(sessionId)) snapshotScheduler.cancel(sessionId);
     };
     client = createSseClient(res, removeClient);
+    client.sessionId = sessionId;
     sseClients.add(client);
     req.on("close", removeClient);
+    if (subscribedSession) sendSseEvent(client, sessionSnapshot(subscribedSession));
     return true;
   }
 

package/sse-channel.ts

@@ -1,3 +1,5 @@
+import { canonicalizeJson, diffSessionSnapshots, type JsonValue } from "./web/session-sync.js";
+
 export type SseEvent = Record<string, unknown>;
 
 // Coalesce before serializing full histories, so a burst of tokens does not
@@ -44,6 +46,9 @@ export interface SseWritable {
 
 export interface SseClient {
   res: SseWritable;
+  sessionId?: string;
+  snapshotBaseline?: Record<string, JsonValue>;
+  snapshotRevision: number;
   waitingForDrain: boolean;
   pendingEvents: Map<string, SseEvent>;
   closed: boolean;
@@ -59,6 +64,7 @@ function eventKey(event: SseEvent): string {
 export function createSseClient(res: SseWritable, onError: () => void): SseClient {
   return {
     res,
+    snapshotRevision: 0,
     waitingForDrain: false,
     pendingEvents: new Map(),
     closed: false,
@@ -68,7 +74,24 @@ export function createSseClient(res: SseWritable, onError: () => void): SseClien
 
 function writeEvent(client: SseClient, event: SseEvent): boolean {
   try {
-    const accepted = client.res.write(`data: ${JSON.stringify(event)}\n\n`);
+    let outgoing = event;
+    const snapshot = event.type === "snapshot" ? event as Record<string, JsonValue> : undefined;
+    if (snapshot) {
+      const revision = client.snapshotRevision + 1;
+      if (client.snapshotBaseline && client.snapshotBaseline.sessionId === snapshot.sessionId) {
+        const patches = diffSessionSnapshots(client.snapshotBaseline, snapshot);
+        if (patches.length === 0) return true;
+        outgoing = { type: "session_patch", sessionId: snapshot.sessionId, baseRevision: client.snapshotRevision, revision, patches };
+      } else {
+        outgoing = { ...snapshot, revision };
+      }
+    }
+    const accepted = client.res.write(`data: ${JSON.stringify(outgoing)}\n\n`);
+    // A false return still means Node accepted the bytes into its buffer.
+    if (snapshot) {
+      client.snapshotBaseline = snapshot;
+      client.snapshotRevision++;
+    }
     if (accepted) return true;
     client.waitingForDrain = true;
     client.res.once("drain", () => flushPendingEvents(client));
@@ -93,7 +116,18 @@ function flushPendingEvents(client: SseClient): void {
 
 export function sendSseEvent(client: SseClient, event: SseEvent): void {
   if (client.closed) return;
+  if (event.type === "snapshot") {
+    try {
+      const { revision: _revision, ...body } = event;
+      event = canonicalizeJson(body) as Record<string, JsonValue>;
+    } catch {
+      closeSseClient(client);
+      client.onError();
+      return;
+    }
+  }
   if (client.waitingForDrain) {
+    // Snapshot entries are detached full targets, diffed only when written.
     // Keep only the newest event of each kind while the browser catches up.
     // This bounds memory even when snapshots contain a long conversation.
     client.pendingEvents.set(eventKey(event), event);
@@ -106,4 +140,6 @@ export function closeSseClient(client: SseClient): void {
   client.closed = true;
   client.waitingForDrain = false;
   client.pendingEvents.clear();
+  client.snapshotBaseline = undefined;
+  client.snapshotRevision = 0;
 }

package/web/app.js

@@ -2,6 +2,7 @@
 
 import { markdown as renderMarkdown } from "./assets/markdown.js";
 import { observeMarkdownDiagrams } from "./markdown-diagrams.js";
+import { applySessionPatches } from "./session-sync.js";
 
 observeMarkdownDiagrams();
 import { webSlashCommands, unsupportedSlashCommands, parseSlashCommand } from "./slash-commands.js";
@@ -20,6 +21,8 @@ const S = {
   currentWorkspaceId: null,
   currentSessionId: null,
   snapshots: new Map(),
+  loadedSessions: new Set(),
+  sessionOpens: new Map(),
   newSessionSnapshot: null,
   newSessionPreferenceWorkspaceId: null,
   collapsed: new Set(),
@@ -108,8 +111,8 @@ async function api(path, options = {}) {
   return data;
 }
 
-function post(path, body) {
-  return api(path, { method: "POST", body: JSON.stringify(body || {}) });
+function post(path, body, options = {}) {
+  return api(path, { ...options, method: "POST", body: JSON.stringify(body || {}) });
 }
 
 function timeLabel(iso) {
@@ -1456,6 +1459,7 @@ function renderActive() {
 }
 
 function renderConversation() {
+  syncEventSubscription();
   const mount = $("#conversationMount");
   if (!mount) return;
   const previousInput = $("#composerInput");
@@ -3127,7 +3131,14 @@ async function openSession(id, opts = {}) {
   if (!opts.skipRemember) rememberCurrentDraft();
   const generation = ++S.openGeneration;
   S.currentSessionId = id;
-  S.loadingSession = opts.initialSnapshot ? null : id;
+  if (opts.initialSnapshot) {
+    S.snapshots.set(id, opts.initialSnapshot);
+    S.loadedSessions.add(id);
+  }
+  const before = S.snapshots.get(id);
+  const cached = S.loadedSessions.has(id) && before?.session?.id === id && !before.error;
+  S.loadingSession = cached ? null : id;
+  if (before?.session?.workspaceId) S.currentWorkspaceId = before.session.workspaceId;
   if (!opts.silent) {
     const key = draftKey(id);
     const savedDraft = S.drafts.get(key) || "";
@@ -3142,14 +3153,24 @@ async function openSession(id, opts = {}) {
   }
   renderSidebar();
   renderConversation();
+  let request = S.sessionOpens.get(id);
   try {
-    const data = opts.initialSnapshot ?? await post(`/api/sessions/${encodeURIComponent(id)}/open`);
-    S.snapshots.set(id, data);
+    if (!opts.initialSnapshot && !request) {
+      const promise = post(`/api/sessions/${encodeURIComponent(id)}/open`, {}, { signal: AbortSignal.timeout(15_000) })
+        .finally(() => { S.sessionOpens.delete(id); });
+      request = { promise, snapshot: before };
+      S.sessionOpens.set(id, request);
+    }
+    const data = opts.initialSnapshot ?? await request.promise;
+    if (S.snapshots.get(id) === (opts.initialSnapshot ? before : request.snapshot)) S.snapshots.set(id, data);
+    S.loadedSessions.add(id);
     if (generation !== S.openGeneration) return;
     const ws = data.session?.workspaceId;
     if (ws) S.currentWorkspaceId = ws;
   } catch (error) {
-    S.snapshots.set(id, { ...snapshotFor(id), session: { id, title: "会话", status: "error" }, error: String(error) });
+    if (!cached && S.snapshots.get(id) === (request ? request.snapshot : before)) {
+      S.snapshots.set(id, { ...snapshotFor(id), session: { id, title: "会话", status: "error" }, error: String(error) });
+    }
   } finally {
     if (generation === S.openGeneration) {
       S.loadingSession = null;
@@ -3257,6 +3278,7 @@ async function ensureWorkspaceThen(action) {
 let browser = null;
 let pickerResolve = null;
 let browserKeyHandler = null;
+let directoryRequest = null;
 
 async function adoptWorkspacePath(path) {
   const added = await post("/api/workspaces", { path });
@@ -3333,6 +3355,7 @@ function promptWorkspaceBrowse() {
 }
 
 function closeWorkspacePicker() {
+  directoryRequest = null;
   if (browserKeyHandler) {
     document.removeEventListener("keydown", browserKeyHandler);
     browserKeyHandler = null;
@@ -3366,10 +3389,44 @@ function draftDirectory(draft) {
 function readDraft(listing, draft) {
   const directory = draftDirectory(draft);
   if (directory === null) return { directory: null, tail: null };
-  const answers = directory === levelDirectory(listing);
+  const fold = (value) => separatorOf() === "\\" ? value.replaceAll("/", "\\").toLowerCase() : value;
+  const answers = fold(directory) === fold(levelDirectory(listing));
   return { directory, tail: answers ? draft.slice(directory.length) : null };
 }
 
+async function previewPathDraft(draft) {
+  const current = browser;
+  const request = {};
+  directoryRequest = request;
+  if (!current || current.pathDraft !== draft) return;
+  const listing = current.child ?? current.parent;
+  const directory = draftDirectory(draft);
+  current.error = null;
+  if (directory === null || (listing && readDraft(listing, draft).tail !== null)) {
+    current.loading = false;
+    renderBrowser();
+    return;
+  }
+  current.loading = true;
+  renderBrowser();
+  try {
+    const data = await api(`/api/fs/list?path=${encodeURIComponent(directory)}`);
+    if (browser !== current || directoryRequest !== request) return;
+    if (data.error) throw new Error(data.error);
+    current.parent = data;
+    current.selected = null;
+    current.child = null;
+    current.home = data.home || current.home;
+    current.loading = false;
+    renderBrowser();
+  } catch (error) {
+    if (browser !== current || directoryRequest !== request) return;
+    current.loading = false;
+    current.error = error.message || String(error);
+    renderBrowser();
+  }
+}
+
 function visibleEntries(entries, selectedPath, showHidden, filterPrefix) {
   const needle = filterPrefix === null ? "" : filterPrefix.toLowerCase();
   const displayable = (entry) => showHidden || !entry.hidden || needle.startsWith(".");
@@ -3408,6 +3465,9 @@ function browserTargetPath() {
 
 async function navigate(path) {
   if (!browser || !path) return;
+  const current = browser;
+  const request = {};
+  directoryRequest = request;
   browser.loading = true;
   browser.error = null;
   browser.selected = null;
@@ -3416,7 +3476,7 @@ async function navigate(path) {
   let target = null;
   try {
     const data = await api(`/api/fs/list?path=${encodeURIComponent(path)}`);
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     if (data.error) throw new Error(data.error);
     target = data;
     browser.home = data.home || browser.home;
@@ -3425,7 +3485,7 @@ async function navigate(path) {
     browser.loading = false;
     renderBrowser();
   } catch (error) {
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     browser.loading = false;
     browser.error = error.message || String(error);
     renderBrowser();
@@ -3438,7 +3498,7 @@ async function navigate(path) {
   if (!parentCrumb) return;
   try {
     const data = await api(`/api/fs/list?path=${encodeURIComponent(parentCrumb.path)}`);
-    if (!browser || data.error) return;
+    if (browser !== current || directoryRequest !== request || data.error) return;
     const sep = separatorOf();
     const fold = (value) => (sep === "\\" ? value.toLowerCase() : value);
     const match = (data.entries || []).find((entry) => fold(entry.path) === fold(target.path));
@@ -3454,6 +3514,10 @@ async function navigate(path) {
 
 async function selectEntry(entry) {
   if (!browser) return;
+  const current = browser;
+  const request = {};
+  directoryRequest = request;
+  browser.pathDraft = null;
   browser.selected = entry;
   browser.child = null;
   browser.loading = true;
@@ -3461,13 +3525,13 @@ async function selectEntry(entry) {
   renderBrowser();
   try {
     const data = await api(`/api/fs/list?path=${encodeURIComponent(entry.path)}`);
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     if (data.error) throw new Error(data.error);
     browser.child = data;
     browser.loading = false;
     renderBrowser();
   } catch (error) {
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     browser.loading = false;
     browser.error = error.message || String(error);
     browser.selected = null;
@@ -3492,6 +3556,8 @@ function openPathEditor() {
 
 function cancelPathEdit() {
   if (!browser) return;
+  directoryRequest = null;
+  browser.loading = false;
   browser.pathDraft = null;
   browser.error = null;
   renderBrowser();
@@ -3607,6 +3673,8 @@ function renderBrowser() {
       </div>
     </div>` : "";
 
+  const previousPathInput = $("#dbPathInput");
+  const pathSelection = previousPathInput ? [previousPathInput.selectionStart, previousPathInput.selectionEnd] : null;
   mount.innerHTML = `
     <div class="db-modal">
       <div class="db-modalMask" data-action="db-cancel"></div>
@@ -3633,10 +3701,9 @@ function renderBrowser() {
 
   const pathInput = $("#dbPathInput");
   if (pathInput) {
-    const start = pathInput.selectionStart;
-    const end = pathInput.selectionEnd;
+    const [start, end] = pathSelection ?? [pathInput.selectionStart, pathInput.selectionEnd];
     pathInput.focus();
-    if (start != null && end != null && start === end) pathInput.setSelectionRange(start, end);
+    if (start != null && end != null) pathInput.setSelectionRange(start, end);
     pathInput.addEventListener("keydown", (event) => {
       if (event.key === "Enter" && !event.isComposing) {
         event.preventDefault();
@@ -3651,7 +3718,7 @@ function renderBrowser() {
     pathInput.addEventListener("input", () => {
       const caret = pathInput.selectionStart ?? pathInput.value.length;
       b.pathDraft = pathInput.value;
-      renderBrowser();
+      void previewPathDraft(b.pathDraft);
       const next = $("#dbPathInput");
       if (next) next.setSelectionRange(caret, caret);
     });
@@ -4869,6 +4936,7 @@ async function onClick(ev) {
       ];
       await Promise.all(orphanedAttachments.map((attachment) => deleteAttachment(attachment.id)));
       S.snapshots.delete(sessionId);
+      S.loadedSessions.delete(sessionId);
       S.drafts.delete(sessionDraftKey);
       S.failedDrafts.delete(sessionId);
       S.attachmentDrafts.delete(sessionDraftKey);
@@ -5124,7 +5192,8 @@ let loginPromise;
 
 function requireLogin() {
   if (loginPromise) return loginPromise;
-  eventSource?.close();
+  let authenticated = false;
+  disconnectEvents();
   loginPromise = (async () => {
     let { passwordConfigured } = await api("/api/auth");
     const dialog = el(`<div class="pi-loginBackdrop">
@@ -5163,6 +5232,7 @@ function requireLogin() {
           input.value = "";
           dialog.remove();
           root.inert = false;
+          authenticated = true;
           resolve();
         } catch (error) {
           message.textContent = error.message || String(error);
@@ -5172,8 +5242,10 @@ function requireLogin() {
         }
       };
     });
-    if (eventSource) connectEvents();
-  })().finally(() => { loginPromise = null; });
+  })().finally(() => {
+    loginPromise = null;
+    if (authenticated && !document.hidden) connectEvents();
+  });
   return loginPromise;
 }
 
@@ -5182,6 +5254,17 @@ let eventWatchdog;
 let lastEventAt = 0;
 let resyncPending;
 
+function disconnectEvents() {
+  eventSource?.close();
+  eventSource = null;
+  clearInterval(eventWatchdog);
+}
+
+function syncEventSubscription() {
+  if (document.hidden || !eventSource || loginPromise) return;
+  if (eventSource.sessionId !== (S.currentSessionId || null)) connectEvents(false);
+}
+
 async function resyncAfterReconnect() {
   if (resyncPending) return resyncPending;
   resyncPending = (async () => {
@@ -5200,7 +5283,7 @@ async function resyncAfterReconnect() {
       const data = await api(`/api/sessions/${encodeURIComponent(id)}/open`, {
         method: "POST", body: "{}", signal: AbortSignal.timeout(15_000),
       });
-      if (S.snapshots.get(id) === before) S.snapshots.set(id, data);
+      if (id === S.currentSessionId && generation === S.openGeneration && S.snapshots.get(id) === before) S.snapshots.set(id, data);
     } else if (id && generation === S.openGeneration) {
       rememberCurrentDraft();
       ++S.openGeneration;
@@ -5215,21 +5298,31 @@ async function resyncAfterReconnect() {
   return resyncPending;
 }
 
-function connectEvents() {
-  eventSource?.close();
-  const es = new EventSource("/api/events");
+function connectEvents(resync = true) {
+  disconnectEvents();
+  if (document.hidden || loginPromise) return;
+  const sessionId = S.currentSessionId || null;
+  const query = sessionId ? `?sessionId=${encodeURIComponent(sessionId)}` : "";
+  const es = new EventSource(`/api/events${query}`);
+  es.sessionId = sessionId;
   eventSource = es;
+  let streamedSnapshot;
+  let streamRevision = 0;
+  let opened = false;
   lastEventAt = Date.now();
-  clearInterval(eventWatchdog);
   // Heartbeats arrive every 25s, including when the model is idle. Some mobile
   // networks leave a dead stream open without notifying EventSource.
   eventWatchdog = setInterval(() => {
-    if (document.hidden || loginPromise || eventSource !== es) return;
+    if (eventSource !== es || document.hidden || loginPromise) return;
     if (Date.now() - lastEventAt > 60_000) connectEvents();
   }, 5_000);
   es.onopen = () => {
+    if (eventSource !== es) return;
+    streamedSnapshot = undefined;
+    streamRevision = 0;
     lastEventAt = Date.now();
-    void resyncAfterReconnect();
+    if (resync || opened) void resyncAfterReconnect();
+    opened = true;
   };
   es.onmessage = (ev) => {
     if (eventSource !== es) return;
@@ -5265,9 +5358,26 @@ function connectEvents() {
         }
         return;
       }
-      if (event.type === "snapshot") {
-        if (!event.sessionId) return;
-        S.snapshots.set(event.sessionId, { ...snapshotFor(event.sessionId), ...event });
+      if (event.type === "snapshot" || event.type === "session_patch") {
+        if (!event.sessionId || event.sessionId !== es.sessionId || event.sessionId !== S.currentSessionId) return;
+        if (event.type === "snapshot") {
+          const { revision, ...snapshot } = event;
+          streamedSnapshot = snapshot;
+          streamRevision = revision;
+        } else {
+          if (!streamedSnapshot || event.baseRevision !== streamRevision || event.revision !== streamRevision + 1) {
+            connectEvents(false);
+            return;
+          }
+          try {
+            streamedSnapshot = applySessionPatches(streamedSnapshot, event.patches);
+          } catch {
+            connectEvents(false);
+            return;
+          }
+          streamRevision = event.revision;
+        }
+        S.snapshots.set(event.sessionId, { ...snapshotFor(event.sessionId), error: undefined, ...streamedSnapshot });
         const current = event.sessionId === S.currentSessionId;
         // Settings do not depend on session snapshots. Rebuilding the panel on
         // every streamed chunk replaces controls between pointerdown and click.
@@ -5300,15 +5410,18 @@ function connectEvents() {
       // ignore malformed event
     }
   };
-  es.onerror = () => { void resyncAfterReconnect(); };
+  es.onerror = () => {
+    if (eventSource === es && !document.hidden) void resyncAfterReconnect();
+  };
 }
 
 window.addEventListener("resize", () => { updateViewport(); applyFrameLayout(); });
 window.visualViewport?.addEventListener("resize", updateViewport);
 window.visualViewport?.addEventListener("scroll", updateViewport);
-window.addEventListener("online", () => { if (eventSource && !loginPromise) connectEvents(); });
+window.addEventListener("online", () => { if (!document.hidden && !loginPromise) connectEvents(); });
 document.addEventListener("visibilitychange", () => {
-  if (!document.hidden && eventSource && !loginPromise) connectEvents();
+  if (document.hidden) disconnectEvents();
+  else if (!loginPromise) connectEvents();
 });
 setLanguage(getLanguage());
 observeUi();

package/web/session-sync.d.ts

@@ -0,0 +1,12 @@
+export type JsonValue = null | boolean | number | string | JsonValue[] | { [key: string]: JsonValue };
+export type SessionPatch =
+  | { op: "set"; path: (string | number)[]; value: JsonValue }
+  | { op: "delete"; path: (string | number)[] }
+  | { op: "append"; path: (string | number)[]; value: string }
+  | { op: "truncate"; path: (string | number)[]; length: number };
+/** Detached JSON normalization: undefined object fields disappear; array holes become null. */
+export function canonicalizeJson(value: unknown): JsonValue | undefined;
+/** Compare canonical JSON, emitting string suffixes and changes to individual paths. */
+export function diffSessionSnapshots(previous: JsonValue, next: JsonValue): SessionPatch[];
+/** Immutable application with structural sharing; invalid or unsafe paths throw. */
+export function applySessionPatches<T extends JsonValue>(snapshot: T, patches: readonly SessionPatch[]): T;

package/web/session-sync.js

@@ -0,0 +1,105 @@
+// Paths contain object keys or array indices. Operations are set, delete (object
+// field), append (string suffix), and truncate (array length). A root set resets
+// structure. Paths traverse only own properties, including ordinary JSON keys
+// such as __proto__; assignments cannot invoke prototype setters.
+const own = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+function setOwn(value, key, item) {
+  Object.defineProperty(value, key, { value: item, enumerable: true, writable: true, configurable: true });
+}
+
+export function canonicalizeJson(value) {
+  const ancestors = new Set();
+  function visit(input, key = "") {
+    if (input && typeof input.toJSON === "function") input = input.toJSON(key);
+    if (input === null || typeof input === "string" || typeof input === "boolean") return input;
+    if (typeof input === "number") return Number.isFinite(input) ? input : null;
+    if (typeof input === "bigint") throw new TypeError("BigInt is not JSON data");
+    if (typeof input !== "object") return undefined;
+    if (ancestors.has(input)) throw new TypeError("Circular JSON data");
+    ancestors.add(input);
+    let result;
+    if (Array.isArray(input)) {
+      result = Array.from({ length: input.length }, (_, i) => visit(input[i], String(i)) ?? null);
+    } else {
+      result = {};
+      for (const key of Object.keys(input)) {
+        const item = visit(input[key], key);
+        if (item !== undefined) setOwn(result, key, item);
+      }
+    }
+    ancestors.delete(input);
+    return result;
+  }
+  return visit(value);
+}
+
+// Compare detached canonical JSON without serializing unchanged history strings.
+export function diffSessionSnapshots(previous, next) {
+  const patches = [];
+  function walk(before, after, path) {
+    if (before === after) return;
+    if (typeof before === "string" && typeof after === "string" && after.startsWith(before)) {
+      patches.push({ op: "append", path, value: after.slice(before.length) });
+    } else if (Array.isArray(before) && Array.isArray(after)) {
+      const common = Math.min(before.length, after.length);
+      for (let i = 0; i < common; i++) walk(before[i], after[i], [...path, i]);
+      for (let i = common; i < after.length; i++) patches.push({ op: "set", path: [...path, i], value: after[i] });
+      if (after.length < before.length) patches.push({ op: "truncate", path, length: after.length });
+    } else if (before && after && typeof before === "object" && typeof after === "object" && !Array.isArray(before) && !Array.isArray(after)) {
+      for (const key of Object.keys(before)) {
+        if (!own(after, key)) patches.push({ op: "delete", path: [...path, key] });
+      }
+      for (const key of Object.keys(after)) {
+        if (own(before, key)) walk(before[key], after[key], [...path, key]);
+        else patches.push({ op: "set", path: [...path, key], value: after[key] });
+      }
+    } else {
+      patches.push({ op: "set", path, value: after });
+    }
+  }
+  walk(previous, next, []);
+  return patches;
+}
+
+// Rebuild only modified paths; the input snapshot and unchanged branches retain
+// their identity. Invalid operations throw before any input can be mutated.
+export function applySessionPatches(snapshot, patches) {
+  if (!Array.isArray(patches)) throw new TypeError("Expected patches array");
+  let result = snapshot;
+  for (const patch of patches) {
+    if (!patch || !["set", "delete", "append", "truncate"].includes(patch.op) || !Array.isArray(patch.path)) throw new TypeError("Invalid patch");
+    for (const key of patch.path) {
+      if (typeof key !== "string" && (!Number.isSafeInteger(key) || key < 0)) throw new TypeError("Invalid patch path");
+    }
+    function update(current, depth) {
+      if (depth === patch.path.length) {
+        if (patch.op === "set") {
+          if (!own(patch, "value")) throw new TypeError("Missing patch value");
+          const value = canonicalizeJson(patch.value);
+          if (value === undefined) throw new TypeError("Invalid patch value");
+          return value;
+        }
+        if (patch.op === "append" && typeof current === "string" && typeof patch.value === "string") return current + patch.value;
+        if (patch.op === "truncate" && Array.isArray(current) && Number.isSafeInteger(patch.length) && patch.length >= 0 && patch.length <= current.length) return current.slice(0, patch.length);
+        throw new TypeError("Invalid patch target");
+      }
+      const key = patch.path[depth];
+      if (!current || typeof current !== "object") throw new TypeError("Invalid patch parent");
+      const array = Array.isArray(current);
+      if (array ? typeof key !== "number" || key > current.length : typeof key !== "string") throw new TypeError("Invalid patch key");
+      const leaf = depth === patch.path.length - 1;
+      const exists = own(current, key);
+      if (!exists && !(leaf && patch.op === "set")) throw new TypeError("Missing patch path");
+      const copy = array ? current.slice() : { ...current };
+      if (leaf && patch.op === "delete") {
+        if (array) throw new TypeError("Use truncate for arrays");
+        delete copy[key];
+      } else {
+        setOwn(copy, key, update(exists ? current[key] : undefined, depth + 1));
+      }
+      return copy;
+    }
+    result = update(result, 0);
+  }
+  return result;
+}