@oversk7/pi-web-dsh-style 1.3.2 → 1.3.4

package/README.md

@@ -16,7 +16,7 @@ A browser interface for [Pi Coding Agent](https://pi.dev), inspired by DeepSeek
 
 ## English
 
-Pi Web brings your Pi sessions to desktop and mobile browsers. Run multiple workspaces and sessions, inspect streaming replies and tool calls, preview files, revisit conversation branches, and use models, slash commands, extensions and skills. Pi and its tools keep running on your own computer. Choose light or dark themes and a custom chat background.
+Pi Web brings your Pi sessions to desktop and mobile browsers. Run multiple workspaces and sessions, inspect streaming replies and tool calls, preview files, revisit conversation branches, and use models, slash commands, extensions and skills. Pi and its tools keep running on your own computer. Choose light or dark themes and a custom chat background. Replies and Markdown file previews render mathematical formulas and Mermaid diagrams, with diagram modules loaded on demand.
 
 ### Requirements
 
@@ -40,6 +40,10 @@ 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.
+
 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
@@ -61,7 +65,7 @@ npm run verify
 
 ## 简体中文
 
-Pi Web 为 [Pi Coding Agent](https://pi.dev) 提供浏览器界面，灵感来自 DeepSeek Harness。在桌面或手机上切换多个工作区与会话，查看流式回答、工具调用和文件预览，浏览会话分支，并使用模型、斜杠命令、扩展与技能。Pi 和工具仍运行在自己的电脑上。支持明暗主题和自定义聊天背景。
+Pi Web 为 [Pi Coding Agent](https://pi.dev) 提供浏览器界面，灵感来自 DeepSeek Harness。在桌面或手机上切换多个工作区与会话，查看流式回答、工具调用和文件预览，浏览会话分支，并使用模型、斜杠命令、扩展与技能。Pi 和工具仍运行在自己的电脑上。支持明暗主题和自定义聊天背景。回答和 Markdown 文件预览支持数学公式与 Mermaid 图表，图表模块按需加载。
 
 ### 系统要求
 
@@ -85,6 +89,10 @@ pi --web
 
 也可以在已有的 Pi 终端中输入 `/web`。网页会在本机打开，默认地址为 `http://127.0.0.1:18789`。执行 `/web --stop` 或退出宿主 Pi 可停止服务；仅关闭浏览器标签页不会停止服务。
 
+每个可见网页只订阅正在查看的会话，首次接收快照，随后只传输变化内容。隐藏标签页会暂停实时更新和通知，返回网页后同步最新状态。没有网页查看时，Pi 和工具仍会继续运行。
+
+切回新建或已加载的会话时，立即显示缓存内容，后台刷新期间仍可编辑输入。重复打开会复用待完成请求；已有运行进程的会话直接返回当前快照，避免等待 RPC 刷新。
+
 界面默认使用中文。打开 **设置 → 外观 → 界面语言**，即可一键切换中文或 English；选择会保存在当前浏览器。
 
 ### 手机与远程访问

package/THIRD_PARTY_NOTICES.md

@@ -3,9 +3,10 @@
 This package contains adapted web UI styles and bundled font assets from the
 projects below. Their licenses are reproduced here as required.
 
-The browser Markdown renderer also bundles markdown-it and highlight.js with
-their dependencies. Their license texts are included in
-`web/assets/markdown.LICENSE.txt`, next to the bundled renderer.
+The browser Markdown renderer bundles markdown-it, highlight.js, KaTeX,
+markdown-it-texmath, and Mermaid. Their license texts are included in
+`web/assets/markdown.LICENSE.txt`. Mermaid dependency notices are also included
+alongside the entry and chunks under `web/assets/mermaid/` as `.LEGAL.txt` files.
 
 ## DeepSeek Harness
 
@@ -92,3 +93,31 @@ LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+## Oh Pi Themes — Tokyo Night
+
+Source: https://github.com/ifiokjr/oh-pi/tree/main/packages/themes
+
+The chat palette in `web/themes.css` adapts the Tokyo Night semantic colors.
+
+MIT License
+
+Copyright (c) 2025 Ifiok Jr.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oversk7/pi-web-dsh-style",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "An unofficial DSH-styled Windows browser UI for pi coding agent with configurable LAN and native frp relay access",
   "type": "module",
   "license": "MIT",
@@ -87,7 +87,10 @@
     "fast-xml-parser": "^5.11.1",
     "fflate": "^0.8.3",
     "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
     "markdown-it": "^15.0.2",
+    "markdown-it-texmath": "^1.0.0",
+    "mermaid": "^12.1.0",
     "pdfjs-dist": "^6.3.289"
   }
 }

package/server.ts

@@ -1,7 +1,9 @@
-import type { ServerResponse } from "node:http";
+import type { IncomingMessage, ServerResponse } from "node:http";
 import { createServer } from "node:http";
 import { spawn } from "node:child_process";
-import { randomUUID } from "node:crypto";
+import { createHash, randomUUID } from "node:crypto";
+import { promisify } from "node:util";
+import { brotliCompress, constants as zlibConstants, gzip } from "node:zlib";
 import { existsSync } from "node:fs";
 import { chmod, mkdir, mkdtemp, readFile, readdir, rm, stat, unlink } from "node:fs/promises";
 import { homedir, platform, tmpdir } from "node:os";
@@ -181,6 +183,7 @@ interface RuntimeSession {
   streaming: boolean;
   needsAttention: boolean;
   starting?: Promise<void>;
+  openRefresh?: Promise<void>;
   modelRefresh?: Promise<void>;
   commandRefresh?: Promise<void>;
   lastUsed: number;
@@ -242,6 +245,8 @@ let heartbeat: ReturnType<typeof setInterval> | undefined;
 const MAX_IDLE_PROCESSES = 1;
 const modelInfoCache = new Map<string, ModelInfo>();
 const modelCatalogRefreshes = new Map<string, Promise<ModelCatalog>>();
+const recentModelCatalogs = new Map<string, { catalog: ModelCatalog; refreshedAt: number }>();
+const MODEL_CATALOG_REUSE_MS = 30_000;
 const commandCache = new Map<string, SlashCommandInfo[]>();
 const exportDownloads = new Map<string, ExportDownload>();
 const attachments = new AttachmentStore();
@@ -517,13 +522,23 @@ function isImmediateExtensionCommand(record: RuntimeSession, message: string): b
 
 function debounce<A extends unknown[]>(fn: (...args: A) => void, ms: number) {
   let timer: ReturnType<typeof setTimeout> | undefined;
-  return (...args: A) => {
+  const schedule = (...args: A) => {
     if (timer) clearTimeout(timer);
-    timer = setTimeout(() => fn(...args), ms);
+    timer = setTimeout(() => {
+      timer = undefined;
+      fn(...args);
+    }, ms);
   };
+  return Object.assign(schedule, {
+    cancel() {
+      if (timer) clearTimeout(timer);
+      timer = undefined;
+    },
+  });
 }
 
 const scheduleSave = debounce(() => {
+  if (shuttingDown) return;
   stateSaveChain = stateSaveChain.then(saveStateNow).catch(() => {});
 }, 120);
 
@@ -545,6 +560,7 @@ async function loadState(): Promise<void> {
   }) ?? { version: 1, workspaces: [], sessions: [] };
   sessions = new Map();
   modelInfoCache.clear();
+  recentModelCatalogs.clear();
   commandCache.clear();
   if (state.modelCache) {
     for (const [cwd, cached] of Object.entries(state.modelCache)) {
@@ -605,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 {
@@ -669,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),
@@ -688,7 +716,7 @@ function emitSessionSnapshot(record: RuntimeSession): void {
     messages: browserMessages(snapshotMessages(record)),
     pendingQueue: pendingQueueSnapshot(record),
     dialogs: record.dialogs,
-  });
+  };
 }
 
 function serializeWorkspaces(): Json[] {
@@ -917,12 +945,26 @@ async function discoverFreshModelCatalog(cwd: string): Promise<ModelCatalog> {
   })();
   modelCatalogRefreshes.set(key, task);
   try {
-    return await task;
+    const catalog = await task;
+    recentModelCatalogs.set(key, { catalog, refreshedAt: Date.now() });
+    return catalog;
   } finally {
     modelCatalogRefreshes.delete(key);
   }
 }
 
+async function modelCatalogForNewSession(cwd: string, preferredModel?: unknown): Promise<ModelCatalog> {
+  const key = normalizePath(cwd);
+  const refreshing = modelCatalogRefreshes.get(key);
+  if (refreshing) return refreshing;
+  const recent = recentModelCatalogs.get(key);
+  if (recent && Date.now() - recent.refreshedAt < MODEL_CATALOG_REUSE_MS
+    && (!preferredModel || findCatalogModel(recent.catalog.models, preferredModel))) {
+    return recent.catalog;
+  }
+  return discoverFreshModelCatalog(cwd);
+}
+
 function applyModelInfo(record: RuntimeSession, info: ModelInfo): void {
   record.models = info.models;
   record.thinkingLevels = info.thinkingLevels;
@@ -1444,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);
@@ -1506,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 {
@@ -1591,7 +1654,7 @@ async function createSession(
   const ws = state.workspaces.find((w) => w.id === workspaceId);
   if (!ws) throw new Error("workspace not found");
   const info = modelInfoFromCatalog(
-    await discoverFreshModelCatalog(ws.path),
+    await modelCatalogForNewSession(ws.path, preferences.model),
     preferences.model,
     preferences.thinkingLevel,
   );
@@ -2041,19 +2104,161 @@ function filePathFromUrl(url: string): string {
   return path;
 }
 
-async function serveStatic(res: ServerResponse, url: string): Promise<void> {
+type StaticEncoding = "br" | "gzip" | "identity";
+interface StaticAsset {
+  metadata: string;
+  data: Buffer;
+  etag: string;
+  bytes: number;
+  compressed: Partial<Record<"br" | "gzip", Buffer>>;
+  compressing: Partial<Record<"br" | "gzip", Promise<Buffer>>>;
+}
+
+const STATIC_CACHE_LIMIT = 32 * 1024 * 1024;
+const STATIC_ENTRY_LIMIT = 8 * 1024 * 1024;
+const staticAssets = new Map<string, StaticAsset>();
+const staticReads = new Map<string, Promise<StaticAsset>>();
+let staticCacheBytes = 0;
+const compressBrotliStatic = promisify(brotliCompress);
+const compressStatic = {
+  br: (data: Buffer) => compressBrotliStatic(data, { params: { [zlibConstants.BROTLI_PARAM_QUALITY]: 4 } }),
+  gzip: promisify(gzip),
+};
+
+function evictStaticAsset(path: string): void {
+  const entry = staticAssets.get(path);
+  if (entry) staticCacheBytes -= entry.bytes;
+  staticAssets.delete(path);
+}
+
+function trimStaticCache(): void {
+  while (staticCacheBytes > STATIC_CACHE_LIMIT || staticAssets.size > 256) {
+    evictStaticAsset(staticAssets.keys().next().value!);
+  }
+}
+
+function staticMetadata(info: Awaited<ReturnType<typeof stat>>): string {
+  return `${info.dev}:${info.ino}:${info.size}:${info.mtimeMs}:${info.ctimeMs}`;
+}
+
+async function loadStaticAsset(path: string): Promise<StaticAsset> {
+  // Revalidate metadata even for cached entries so local rebuilds are visible immediately.
+  for (let attempt = 0; attempt < 3; attempt++) {
+    const info = await stat(path);
+    if (!info.isFile()) throw new Error("not a file");
+    const metadata = staticMetadata(info);
+    const cached = staticAssets.get(path);
+    if (cached?.metadata === metadata) {
+      staticAssets.delete(path);
+      staticAssets.set(path, cached);
+      return cached;
+    }
+    evictStaticAsset(path);
+    const key = `${path}\0${metadata}`;
+    let reading = staticReads.get(key);
+    if (!reading) {
+      reading = (async () => {
+        const data = await readFile(path);
+        if (staticMetadata(await stat(path)) !== metadata) throw new Error("static asset changed during read");
+        const entry: StaticAsset = {
+          metadata, data, etag: `W/"${createHash("sha256").update(data).digest("hex")}"`,
+          bytes: data.length, compressed: {}, compressing: {},
+        };
+        if (entry.bytes <= STATIC_ENTRY_LIMIT) {
+          evictStaticAsset(path);
+          staticAssets.set(path, entry);
+          staticCacheBytes += entry.bytes;
+          trimStaticCache();
+        }
+        return entry;
+      })();
+      staticReads.set(key, reading);
+    }
+    try {
+      return await reading;
+    } catch (error) {
+      if (attempt === 2) throw error;
+    } finally {
+      if (staticReads.get(key) === reading) staticReads.delete(key);
+    }
+  }
+  throw new Error("unable to read static asset");
+}
+
+function staticEncoding(header: string | undefined, compressible: boolean): StaticEncoding | undefined {
+  if (!header?.trim()) return "identity";
+  const qualities = new Map<string, number>();
+  for (const part of header.split(",")) {
+    const [name, ...parameters] = part.trim().toLowerCase().split(";");
+    if (!name) continue;
+    const q = parameters.map((parameter) => parameter.trim()).find((parameter) => parameter.startsWith("q="));
+    const value = q === undefined ? 1 : Number(q.slice(2));
+    qualities.set(name, Number.isFinite(value) && value >= 0 && value <= 1 ? value : 0);
+  }
+  const quality = (encoding: StaticEncoding): number => qualities.get(encoding)
+    ?? (encoding === "identity" ? (qualities.get("*") === 0 ? 0 : 1) : (qualities.get("*") ?? 0));
+  const encodings: StaticEncoding[] = compressible ? ["br", "gzip", "identity"] : ["identity"];
+  return encodings.filter((encoding) => quality(encoding) > 0)
+    .sort((a, b) => quality(b) - quality(a))[0];
+}
+
+async function staticRepresentation(path: string, entry: StaticAsset, encoding: StaticEncoding): Promise<Buffer> {
+  if (encoding === "identity") return entry.data;
+  const cached = entry.compressed[encoding];
+  if (cached) return cached;
+  let compressing = entry.compressing[encoding];
+  if (!compressing) {
+    compressing = compressStatic[encoding](entry.data).then((data) => {
+      if (staticAssets.get(path) === entry && entry.bytes + data.length <= STATIC_ENTRY_LIMIT) {
+        entry.compressed[encoding] = data;
+        entry.bytes += data.length;
+        staticCacheBytes += data.length;
+        trimStaticCache();
+      }
+      return data;
+    }).finally(() => { delete entry.compressing[encoding]; });
+    entry.compressing[encoding] = compressing;
+  }
+  return compressing;
+}
+
+function staticEtagMatches(header: string | undefined, etag: string): boolean {
+  return Boolean(header?.split(",").some((candidate) => {
+    const tag = candidate.trim();
+    return tag === "*" || tag.replace(/^W\//, "") === etag.replace(/^W\//, "");
+  }));
+}
+
+async function serveStatic(req: IncomingMessage, res: ServerResponse, url: string): Promise<void> {
   const filePath = filePathFromUrl(url);
   try {
-    const data = await readFile(filePath);
+    const entry = await loadStaticAsset(filePath);
     const ext = extname(filePath).toLowerCase();
-    res.writeHead(200, {
-      "content-type": MIME[ext] ?? "application/octet-stream",
-      "cache-control": "no-cache",
-    });
-    res.end(data);
+    const encoding = staticEncoding(req.headers["accept-encoding"], /^(?:\.(?:js|css|html|json|svg|txt|wasm|woff2?|ttf|otf))$/.test(ext));
+    const relative = filePath.slice(WEB_DIR.length + 1).split(sep).join("/");
+    res.setHeader("content-type", MIME[ext] ?? "application/octet-stream");
+    res.setHeader("cache-control", /^assets\/mermaid\/chunks\/[^/]+-[a-zA-Z0-9]{8}\.js$/.test(relative)
+      ? "public, max-age=31536000, immutable" : "no-cache");
+    res.setHeader("vary", "Accept-Encoding");
+    res.setHeader("etag", entry.etag);
+    if (!encoding) {
+      res.writeHead(406, { "content-length": 0 });
+      res.end();
+      return;
+    }
+    if (encoding !== "identity") res.setHeader("content-encoding", encoding);
+    if ((req.method === "GET" || req.method === "HEAD") && staticEtagMatches(req.headers["if-none-match"], entry.etag)) {
+      res.writeHead(304);
+      res.end();
+      return;
+    }
+    const data = await staticRepresentation(filePath, entry, encoding);
+    res.setHeader("content-length", data.length);
+    res.writeHead(200);
+    res.end(req.method === "HEAD" ? undefined : data);
   } catch {
-    res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
-    res.end("not found");
+    res.writeHead(404, { "content-type": "text/plain; charset=utf-8", "content-length": 9 });
+    res.end(req.method === "HEAD" ? undefined : "not found");
   }
 }
 
@@ -2422,6 +2627,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",
@@ -2433,10 +2641,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;
   }
 
@@ -3299,7 +3510,6 @@ async function shutdownServer(): Promise<void> {
   await attachments.close();
   if (heartbeat) clearInterval(heartbeat);
   heartbeat = undefined;
-  await saveStateNow().catch(() => {});
   const activeServer = server;
   server = undefined;
   serverUrl = undefined;
@@ -3312,6 +3522,9 @@ async function shutdownServer(): Promise<void> {
       activeServer.close(() => resolveClose());
     });
   }
+  scheduleSave.cancel();
+  await stateSaveChain;
+  await saveStateNow().catch(() => {});
   process.off("exit", exitHook);
   process.off("SIGINT", sigintHook);
   process.off("SIGTERM", sigintHook);
@@ -3385,7 +3598,7 @@ export async function startWebServer(options: {
         if (!handled) sendJson(res, 404, { error: "not found" });
         return;
       }
-      await serveStatic(res, url.pathname);
+      await serveStatic(req, res, url.pathname);
     } catch (error) {
       if (!res.headersSent) sendJson(res, 500, { error: error instanceof Error ? error.message : String(error) });
       else res.end();

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.css

@@ -284,6 +284,14 @@ body[data-workspace-dragging] .YDXeBa_projectRow[draggable=true]{cursor:grabbing
 ._markdown_1nba0_5 .md-code-container>.md-code-block{border:0;border-radius:0;margin:0}
 ._markdown_1nba0_5 .md-code-block code{font:inherit;white-space:inherit}
 ._markdown_1nba0_5 .md-table-wrap{max-width:100%;overflow-x:auto}
+._markdown_1nba0_5 .katex{font-size:1.1em;overflow-wrap:normal;word-break:normal}
+._markdown_1nba0_5 .katex-display{max-width:100%;margin:16px 0;padding:4px 0;overflow:auto hidden;overscroll-behavior-inline:contain}
+._markdown_1nba0_5 .md-mermaid{min-width:0;max-width:100%;margin:16px 0;overflow-x:auto;overscroll-behavior-inline:contain}
+._markdown_1nba0_5 .md-mermaid>svg{display:block;max-width:100%;height:auto;margin:0 auto}
+._markdown_1nba0_5 .md-mermaid pre{margin:0}
+._markdown_1nba0_5 eq{display:inline}
+._markdown_1nba0_5 .eqno{display:flex;align-items:center;gap:12px;max-width:100%}
+._markdown_1nba0_5 eqn{display:block;min-width:0;flex:1}
 [data-chat-flow-kind=assistant-text] .md-table-wrap{max-width:100%;margin:18px 0;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-base);overflow-x:auto;overscroll-behavior-inline:contain}
 [data-chat-flow-kind=assistant-text] .md-table-wrap table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.55}
 [data-chat-flow-kind=assistant-text] .md-table-wrap :is(th,td){box-sizing:border-box;min-width:112px;max-width:360px;padding:9px 12px;text-align:left;vertical-align:top;border-right:1px solid var(--dsw-alias-border-l2);border-bottom:1px solid var(--dsw-alias-border-l2);overflow-wrap:anywhere}
@@ -730,7 +738,7 @@ body[data-ds-dark-theme] :is(.pi-filePreview,._markdown_1nba0_5) .hljs-meta,body
 .pi-loginCard .pi-settingsAction{width:100%;min-height:44px}
 .pi-lanUrl{box-sizing:border-box;width:100%;min-width:0;padding:8px;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font:12px/20px var(--ds-font-family-code)}
 .pi-copyField{box-sizing:border-box;width:100%;min-height:160px;max-height:40vh;margin:12px 0;padding:10px;resize:vertical;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font:16px/24px var(--dsw-font-family)}
-@media(pointer:coarse){
+@media(max-width:640px),(pointer:coarse){
   #root{box-sizing:border-box;position:fixed;top:var(--pi-viewport-top,0px);left:0;right:0;height:var(--pi-viewport-height,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
   .wSkVaW_root,.wSkVaW_composerSeat{--dsh-composer-text-max-height:min(200px,calc(var(--pi-viewport-height,100dvh) * .3))}
   .wSkVaW_composerSeat{padding-bottom:env(safe-area-inset-bottom)}