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

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
 
@@ -61,7 +61,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 图表，图表模块按需加载。
 
 ### 系统要求
 

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.3",
   "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";
@@ -242,6 +244,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 +521,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 +559,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)) {
@@ -917,12 +932,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;
@@ -1591,7 +1620,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 +2070,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");
   }
 }
 
@@ -3299,7 +3470,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 +3482,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 +3558,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/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)}

package/web/app.js

@@ -1,6 +1,9 @@
 "use strict";
 
 import { markdown as renderMarkdown } from "./assets/markdown.js";
+import { observeMarkdownDiagrams } from "./markdown-diagrams.js";
+
+observeMarkdownDiagrams();
 import { webSlashCommands, unsupportedSlashCommands, parseSlashCommand } from "./slash-commands.js";
 import { getLanguage, setLanguage, t, translateUi, observeUi } from "./i18n.js";
 
@@ -437,7 +440,6 @@ function usesMobileFilePreview() {
 
 function updateViewport() {
   const viewport = window.visualViewport;
-  if (viewport && viewport.scale !== 1) return;
   document.documentElement.style.setProperty("--pi-viewport-height", `${viewport?.height || window.innerHeight}px`);
   document.documentElement.style.setProperty("--pi-viewport-top", `${viewport?.offsetTop || 0}px`);
 }
@@ -5267,7 +5269,9 @@ function connectEvents() {
         if (!event.sessionId) return;
         S.snapshots.set(event.sessionId, { ...snapshotFor(event.sessionId), ...event });
         const current = event.sessionId === S.currentSessionId;
-        queueRender(false, { sidebar: false, conversation: current, overlay: current });
+        // Settings do not depend on session snapshots. Rebuilding the panel on
+        // every streamed chunk replaces controls between pointerdown and click.
+        queueRender(false, { sidebar: false, conversation: current, overlay: false });
         return;
       }
       if (event.type === "workspaces") {
@@ -5290,7 +5294,7 @@ function connectEvents() {
           }
         }
         if (unchanged && !conversationChanged) return;
-        queueRender(false, { sidebar: true, conversation: conversationChanged, overlay: conversationChanged });
+        queueRender(false, { sidebar: true, conversation: conversationChanged, overlay: false });
       }
     } catch {
       // ignore malformed event