pi-web-ui 0.29.1 → 0.29.3

package/dist/server/terminals.js

@@ -109,6 +109,8 @@ export async function saveCommandsFile(workspaceRoot, commands) {
 }
 const isWindows = process.platform === "win32";
 const MAX_TERMINALS = 16;
+/** Coalescing window for terminal_output WS messages (one animation frame). */
+const OUTPUT_FLUSH_MS = 16;
 const MAX_TERMINAL_HISTORY = 32;
 const MAX_OUTPUT = 200_000;
 const MAX_INPUT = 64 * 1024;
@@ -429,6 +431,7 @@ export class TerminalManager {
             // process group) and start a fresh shell with the same id. Keep the
             // last known size so the replacement matches the xterm's dimensions.
             if (!existing.exited) {
+                this.flushPending(existing);
                 existing.exited = true;
                 try {
                     existing.pty.kill();
@@ -509,6 +512,8 @@ export class TerminalManager {
             output: "",
             outputOffset: 0,
             waiters: new Set(),
+            pendingOut: "",
+            flushTimer: null,
         };
         this.terms.set(id, entry);
         // The closures capture `entry`: after a restart the map points at the
@@ -517,7 +522,13 @@ export class TerminalManager {
             if (this.terms.get(id) !== entry)
                 return;
             this.appendOutput(entry, data);
-            this.writeOut(id, data);
+            // Coalesce instead of emitting per chunk: node-pty onData fires per
+            // ConPTY read buffer (dozens of bytes to a few KB each), so a build or
+            // `cat` of a big file used to produce hundreds/thousands of WS frames
+            // per second — each paying stringify + frame + parse + dispatch cost.
+            // A one-frame micro-batch cuts the frame rate 10-50× at ≤16ms latency
+            // (imperceptible; xterm writes batch data more efficiently anyway).
+            this.queueOut(entry, data);
         });
         pty.onExit(({ exitCode }) => {
             if (this.terms.get(id) !== entry)
@@ -526,12 +537,33 @@ export class TerminalManager {
         });
         return true;
     }
+    /** Emit output immediately, bypassing the coalescing window (rare paths:
+     *  one-shot hints/banners — not per-chunk data). */
     writeOut(id, data) {
-        const entry = this.terms.get(id);
-        if (!entry)
-            return;
         this.emit({ type: "terminal_output", terminalId: id, data });
     }
+    /** Queue output for the coalescing window; flushes via flushPending. */
+    queueOut(entry, data) {
+        entry.pendingOut += data;
+        if (entry.flushTimer)
+            return;
+        entry.flushTimer = setTimeout(() => {
+            entry.flushTimer = null;
+            this.flushPending(entry);
+        }, OUTPUT_FLUSH_MS);
+    }
+    /** Emit everything queued for this terminal (no-op when nothing pending). */
+    flushPending(entry) {
+        if (entry.flushTimer) {
+            clearTimeout(entry.flushTimer);
+            entry.flushTimer = null;
+        }
+        if (!entry.pendingOut)
+            return;
+        const pending = entry.pendingOut;
+        entry.pendingOut = "";
+        this.emit({ type: "terminal_output", terminalId: entry.id, data: pending });
+    }
     appendOutput(entry, data) {
         entry.output += data;
         if (entry.output.length > MAX_OUTPUT) {
@@ -668,9 +700,11 @@ export class TerminalManager {
         const entry = this.terms.get(id);
         if (!entry || entry.exited)
             return;
+        // Flush queued output BEFORE the exit banner so ordering is preserved.
+        this.flushPending(entry);
         const banner = `\r\n\x1b[90m[进程已退出，退出码 ${exitCode}]\x1b[0m\r\n`;
         this.appendOutput(entry, banner);
-        this.writeOut(id, banner);
+        this.emit({ type: "terminal_output", terminalId: id, data: banner });
         entry.exited = true;
         entry.exitCode = exitCode;
         this.terms.delete(id);
@@ -705,6 +739,7 @@ export class TerminalManager {
     kill(id) {
         const entry = this.terms.get(id);
         if (entry) {
+            this.flushPending(entry);
             entry.exited = true;
             try {
                 entry.pty.kill();

package/dist/server/webui-context.js

@@ -1,4 +1,11 @@
 const WIDGET_WIDTH = 80;
+/** ANSI 转义序列（CSI + OSC 两类）：扩展 widget/status 文本里常混有 TUI 颜色码
+ *  （如 pi-powerline-footer），浏览器会把它渲染成字面 `[38;5;244m` 乱码（issue #16）。 */
+const ANSI_RE = /\[[0-9:;<=>?]*[ -/]*[@-~]|\][^\u0007\u001b]*(?:\u0007|\u001b\\)/g;
+/** Strip all ANSI escape sequences (CSI/OSC) from a string. */
+export function stripAnsi(s) {
+    return s.replace(ANSI_RE, "");
+}
 /** Mock theme: TUI color functions degrade to identity so widget text survives. */
 const mockTheme = new Proxy({
     fg: (_color, text) => text,
@@ -101,8 +108,10 @@ export class WebUIContext {
             catch {
                 lines = undefined;
             }
-            this.lastLines.set(key, lines ?? []);
-            return { key, lines: lines ?? [] };
+            // 浏览器不是终端：ANSI 颜色码剥掉再下发/比对（issue #16）。
+            const clean = lines?.map(stripAnsi) ?? undefined;
+            this.lastLines.set(key, clean ?? []);
+            return { key, lines: clean ?? [] };
         });
     }
     // -- notifications --------------------------------------------------------
@@ -116,7 +125,12 @@ export class WebUIContext {
             this.statuses.delete(key);
         }
         else {
-            this.statuses.set(key, text);
+            // 入口处剥 ANSI：pushStatuses / statusSnapshot 两条路径都拿到干净文本。
+            const clean = stripAnsi(text);
+            if (clean === "")
+                this.statuses.delete(key);
+            else
+                this.statuses.set(key, clean);
         }
         this.pushStatuses();
     }

package/package.json

@@ -1,96 +1,96 @@
-{
-  "name": "pi-web-ui",
-  "version": "0.29.1",
-  "description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
-  "license": "MIT",
-  "type": "module",
-  "bin": {
-    "pi-web-ui": "bin/pi-web-ui.mjs"
-  },
-  "main": "dist/server/index.js",
-  "files": [
-    "bin/",
-    "dist/",
-    "web/dist/",
-    "web/public/",
-    "themes/",
-    "deploy/",
-    "extensions/",
-    "README.md",
-    "LICENSE"
-  ],
-  "keywords": [
-    "pi",
-    "pi-package",
-    "coding-agent",
-    "ai",
-    "chat",
-    "web-ui",
-    "terminal",
-    "llm"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/xing-shuyin/pi-web-ui.git"
-  },
-  "pi": {
-    "extensions": [
-      "./extensions"
-    ]
-  },
-  "engines": {
-    "node": ">=22.19.0"
-  },
-  "scripts": {
-    "prepublishOnly": "npm run build",
-    "dev": "concurrently -k -n server,web -c blue,green \"npm:dev:server\" \"npm:dev:web\"",
-    "dev:server": "cross-env PORT=8788 PI_WEB_ALLOW_ORIGINS=http://localhost:5173,http://127.0.0.1:5173 node --watch --import tsx server/index.ts",
-    "dev:web": "vite --config web/vite.config.ts",
-    "build": "npm run build:web && npm run build:server",
-    "build:web": "vite build --config web/vite.config.ts",
-    "build:server": "tsc -p tsconfig.server.json",
-    "typecheck": "tsc -p tsconfig.server.json --noEmit && tsc -p web/tsconfig.json --noEmit && tsc -p tsconfig.tests.json --noEmit",
-    "test": "vitest run",
-    "test:unit": "vitest run",
-    "test:smoke": "node tests/run-smoke.mjs",
-    "check:protocol": "node scripts/check-protocol-sync.mjs",
-    "test:freeze": "node tests/freeze-test.mjs",
-    "start": "node dist/server/index.js"
-  },
-  "dependencies": {
-    "@earendil-works/pi-coding-agent": "^0.84.2",
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/xterm": "^6.0.0",
-    "compression": "^1.8.1",
-    "express": "^4.21.2",
-    "highlight.js": "^11.10.0",
-    "node-pty": "^1.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.7.0",
-    "react-markdown": "^9.0.1",
-    "rehype-highlight": "^7.0.1",
-    "remark-gfm": "^4.0.0",
-    "typebox": "^1.3.14",
-    "ws": "^8.18.0"
-  },
-  "devDependencies": {
-    "@types/compression": "^1.8.1",
-    "@types/express": "^4.17.21",
-    "@types/node": "^22.10.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/ws": "^8.5.13",
-    "@vitejs/plugin-react": "^4.3.4",
-    "concurrently": "^9.1.0",
-    "cross-env": "^10.1.0",
-    "playwright-core": "^1.62.1",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.3",
-    "vitest": "^4.1.11"
-  },
-  "allowScripts": {
-    "node-pty@1.1.0": true
-  }
-}
+{
+  "name": "pi-web-ui",
+  "version": "0.29.3",
+  "description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "pi-web-ui": "bin/pi-web-ui.mjs"
+  },
+  "main": "dist/server/index.js",
+  "files": [
+    "bin/",
+    "dist/",
+    "web/dist/",
+    "web/public/",
+    "themes/",
+    "deploy/",
+    "extensions/",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "pi",
+    "pi-package",
+    "coding-agent",
+    "ai",
+    "chat",
+    "web-ui",
+    "terminal",
+    "llm"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xing-shuyin/pi-web-ui.git"
+  },
+  "pi": {
+    "extensions": [
+      "./extensions"
+    ]
+  },
+  "engines": {
+    "node": ">=22.19.0"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "dev": "concurrently -k -n server,web -c blue,green \"npm:dev:server\" \"npm:dev:web\"",
+    "dev:server": "cross-env PORT=8788 PI_WEB_ALLOW_ORIGINS=http://localhost:5173,http://127.0.0.1:5173 node --watch --import tsx server/index.ts",
+    "dev:web": "vite --config web/vite.config.ts",
+    "build": "npm run build:web && npm run build:server",
+    "build:web": "vite build --config web/vite.config.ts",
+    "build:server": "tsc -p tsconfig.server.json",
+    "typecheck": "tsc -p tsconfig.server.json --noEmit && tsc -p web/tsconfig.json --noEmit && tsc -p tsconfig.tests.json --noEmit",
+    "test": "vitest run",
+    "test:unit": "vitest run",
+    "test:smoke": "node tests/run-smoke.mjs",
+    "check:protocol": "node scripts/check-protocol-sync.mjs",
+    "test:freeze": "node tests/freeze-test.mjs",
+    "start": "node dist/server/index.js"
+  },
+  "dependencies": {
+    "@earendil-works/pi-coding-agent": "^0.84.2",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
+    "compression": "^1.8.1",
+    "express": "^4.21.2",
+    "highlight.js": "^11.10.0",
+    "node-pty": "^1.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.7.0",
+    "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.1",
+    "remark-gfm": "^4.0.0",
+    "typebox": "^1.3.14",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.8.1",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.10.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/ws": "^8.5.13",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.1.0",
+    "cross-env": "^10.1.0",
+    "playwright-core": "^1.62.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vitest": "^4.1.11"
+  },
+  "allowScripts": {
+    "node-pty@1.1.0": true
+  }
+}