ai-cli-online 2.6.0 → 2.9.0

package/README.md

@@ -20,18 +20,19 @@ Ideal for **unstable networks** where SSH drops frequently, or as a **local stat
 - **Session Persistence** — tmux keeps processes alive through disconnects; fixed socket path ensures auto-reconnect even after server restarts
 - **Multi-Tab** — independent terminal groups with layout persistence across browser refreshes
 - **Split Panes** — horizontal / vertical splits, arbitrarily nested
-- **Document Browser** — view Markdown, HTML, and PDF files alongside your terminal; file picker shows file sizes
 - **Mermaid Diagrams** — Gantt charts, flowcharts, and other Mermaid diagrams render inline with dark theme; CDN fallback for reliability
-- **Plan Annotations** — add, edit, and delete inline annotations on document content with persistent storage
+- **Plan Annotations** — 4 annotation types (insert / delete / replace / comment) on document content with persistent storage; selection float button group for quick action
 - **Editor Panel** — multi-line editing with server-side draft persistence (SQLite), undo stack, and slash commands (`/history`, etc.)
 - **Copy & Paste** — mouse selection auto-copies to clipboard; right-click pastes into terminal
 - **File Transfer** — upload files to CWD, browse and download via REST API
 - **Scroll History** — capture-pane scrollback viewer with ANSI color preservation
 - **Session Management** — sidebar to restore, delete, rename sessions, and close individual terminals (with confirmation)
+- **CJK Font Support** — LXGW WenKai Mono via CDN with unicode-range subsetting; browser loads only needed CJK glyphs on demand
 - **Font Size Control** — adjustable terminal font size (A−/A+) with server-side persistence
 - **Network Indicator** — real-time RTT latency display with signal bars
 - **Auto Reconnect** — exponential backoff with jitter to prevent thundering herd
 - **Secure Auth** — token authentication with timing-safe comparison
+- **Security Hardening** — symlink traversal protection, unauthenticated WebSocket connection limits, TOCTOU download guard, CSP headers (frame-ancestors, base-uri, form-action)
 
 ## Comparison: AI-Cli Online vs OpenClaw
 
@@ -46,14 +47,14 @@ Ideal for **unstable networks** where SSH drops frequently, or as a **local stat
 | **Native Apps** | None (pure web) | macOS + iOS + Android |
 | **Voice Interaction** | None | Voice Wake + Talk Mode |
 | **AI Agent** | None built-in (run any CLI) | Pi Agent runtime + multi-agent routing |
-| **Canvas / UI** | Document browser (MD / HTML / PDF) | A2UI real-time visual workspace |
+| **Canvas / UI** | Plan annotations (Markdown) | A2UI real-time visual workspace |
 | **File Transfer** | REST API upload / download | Channel-native media |
 | **Security Model** | Token auth + timing-safe | Device pairing + DM policy + Docker sandbox |
 | **Extensibility** | Shell scripts | 33 extensions + 60+ skills + ClawHub |
 | **Transport** | Binary frames (ultra-low latency) | JSON WebSocket |
 | **Deployment** | Single-node Node.js | Single-node + Tailscale Serve/Funnel |
 | **Tech Stack** | React + Express + node-pty | Lit + Express + Pi Agent |
-| **Package Size** | ~950 KB | ~300 MB+ |
+| **Package Size** | ~1 MB | ~300 MB+ |
 | **Install** | `npx ai-cli-online` | `npm i -g openclaw && openclaw onboard` |
 
 ## Quick Start
@@ -121,8 +122,7 @@ Browser (xterm.js + WebGL) <-- WebSocket binary/JSON --> Express (node-pty) <-->
 - **WebSocket compression** — `perMessageDeflate` (level 1, threshold 128 B), 50-70% bandwidth reduction
 - **WebGL renderer** — 3-10x rendering throughput vs canvas
 - **Parallel initialization** — PTY creation, tmux config, and resize run concurrently
-- **PDF lazy loading** — pdfjs-dist (445 KB) only loaded when a user opens a PDF file
-- **Smart re-render** — matchMedia threshold hook, conditional Zustand selectors, batched stat calls
+- **Smart re-render** — responsive layout hook, conditional Zustand selectors, batched stat calls
 
 ## Project Structure
 

package/README.zh-CN.md

@@ -20,18 +20,19 @@
 - **会话持久化** — tmux 保证断网后进程存活；固定 socket 路径，服务重启后自动重连
 - **Tab 多标签页** — 独立终端分组，布局跨刷新持久化
 - **分屏布局** — 水平/垂直任意嵌套分割
-- **文档浏览器** — 终端旁查看 Markdown / HTML / PDF 文件
 - **Mermaid 图表** — 甘特图、流程图等 Mermaid 图表暗色主题内联渲染，CDN 双源容错
-- **Plan 批注** — 文档内容内联批注，支持新增/编辑/删除，持久化存储
+- **Plan 批注** — 4 种批注类型（插入/删除/替换/评注），选中文本弹出浮动按钮组，持久化存储
 - **编辑器面板** — 多行编辑 + 草稿服务端持久化 (SQLite) + undo 撤销栈 + 斜杠命令（`/history` 等）
 - **复制粘贴** — 鼠标选中自动复制到剪贴板，右键粘贴到终端
 - **文件传输** — 上传文件到 CWD，浏览/下载通过 REST API
 - **滚动历史** — capture-pane 回看，保留 ANSI 颜色
 - **会话管理** — 侧边栏管理 session（恢复/删除/重命名）
+- **中文等宽字体** — 通过 CDN 加载霞鹜文楷等宽 (LXGW WenKai Mono)，unicode-range 按需分片，浏览器仅下载实际用到的字符
 - **字体大小控制** — 可调节终端字体大小 (A−/A+)，设置服务端持久化
 - **网络指示器** — 实时 RTT 延迟显示 + 信号条
 - **自动重连** — 指数退避 + jitter 防雷群效应
 - **安全认证** — Token 认证 + timing-safe 比较
+- **安全加固** — symlink 穿越防护、未认证 WebSocket 连接限制、TOCTOU 下载防护、CSP Headers (frame-ancestors / base-uri / form-action)
 
 ## 功能对比：AI-Cli Online vs OpenClaw
 
@@ -46,14 +47,14 @@
 | **原生应用** | 无（纯 Web） | macOS + iOS + Android |
 | **语音交互** | 无 | Voice Wake + Talk Mode |
 | **AI Agent** | 无内置（运行任意 CLI） | Pi Agent 运行时 + 多 Agent 路由 |
-| **Canvas/UI** | 文档浏览器（MD / HTML / PDF） | A2UI 实时可视化工作区 |
+| **Canvas/UI** | Plan 批注系统（Markdown） | A2UI 实时可视化工作区 |
 | **文件传输** | REST API 上传/下载 | 渠道原生媒体 |
 | **安全模型** | Token auth + timing-safe | 设备配对 + DM 策略 + Docker 沙箱 |
 | **可扩展性** | Shell 脚本 | 33 扩展 + 60+ Skills + ClawHub |
 | **传输协议** | 二进制帧（超低延迟） | JSON WebSocket |
 | **部署** | 单机 Node.js | 单机 + Tailscale Serve/Funnel |
 | **技术栈** | React + Express + node-pty | Lit + Express + Pi Agent |
-| **包大小** | ~950 KB | ~300 MB+ |
+| **包大小** | ~1 MB | ~300 MB+ |
 | **安装** | `npx ai-cli-online` | `npm i -g openclaw && openclaw onboard` |
 
 ## 快速开始
@@ -121,8 +122,7 @@ TRUST_PROXY=1                    # nginx 反代时设为 1
 - **WebSocket 压缩** — `perMessageDeflate`（level 1，threshold 128 B），带宽减少 50-70%
 - **WebGL 渲染器** — 渲染吞吐量提升 3-10 倍
 - **并行初始化** — PTY 创建、tmux 配置、resize 并行执行
-- **PDF 懒加载** — pdfjs-dist (445 KB) 仅在用户打开 PDF 文件时加载
-- **智能重渲染** — matchMedia 阈值 hook、条件 Zustand selector、分批 stat 调用
+- **智能重渲染** — 响应式布局 hook、条件 Zustand selector、分批 stat 调用
 
 ## 项目结构
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-cli-online",
-  "version": "2.6.0",
+  "version": "2.9.0",
   "description": "AI-Cli Online - Web Terminal for Claude Code via xterm.js + tmux",
   "license": "MIT",
   "bin": {

package/server/dist/db.js

@@ -35,6 +35,9 @@ db.exec(`
     PRIMARY KEY (session_name, file_path)
   )
 `);
+// Indexes for periodic cleanup queries on updated_at
+db.exec('CREATE INDEX IF NOT EXISTS idx_drafts_updated_at ON drafts(updated_at)');
+db.exec('CREATE INDEX IF NOT EXISTS idx_annotations_updated_at ON annotations(updated_at)');
 // --- Annotations statements ---
 const stmtAnnGet = db.prepare('SELECT content, updated_at FROM annotations WHERE session_name = ? AND file_path = ?');
 const stmtAnnUpsert = db.prepare(`

package/server/dist/files.d.ts

@@ -17,5 +17,10 @@ export declare function listFiles(dirPath: string): Promise<ListFilesResult>;
  * We resolve the path and ensure it's an absolute path that exists.
  */
 export declare function validatePath(requested: string, baseCwd: string): Promise<string | null>;
+/**
+ * Validate path and reject symlinks (A1).
+ * Used for download/file-content/stream-file to prevent symlink traversal.
+ */
+export declare function validatePathNoSymlink(requested: string, baseCwd: string): Promise<string | null>;
 /** Validate a path that may not exist yet (for touch/mkdir). Uses realpath on baseCwd only. */
 export declare function validateNewPath(requested: string, baseCwd: string): Promise<string | null>;

package/server/dist/files.js

@@ -1,7 +1,30 @@
-import { readdir, stat, realpath } from 'fs/promises';
+import { readdir, stat, lstat, realpath } from 'fs/promises';
 import { join, resolve } from 'path';
 export const MAX_UPLOAD_SIZE = 100 * 1024 * 1024; // 100 MB
 export const MAX_DOWNLOAD_SIZE = 100 * 1024 * 1024; // 100 MB
+/* ── realpath cache (C3) ── */
+const realpathCache = new Map();
+const REALPATH_CACHE_TTL = 5000; // 5s
+const REALPATH_CACHE_MAX = 100;
+async function cachedRealpath(p) {
+    const now = Date.now();
+    const cached = realpathCache.get(p);
+    if (cached && now < cached.expiresAt)
+        return cached.value;
+    const real = await realpath(p);
+    if (realpathCache.size >= REALPATH_CACHE_MAX) {
+        // Evict oldest entry
+        const first = realpathCache.keys().next().value;
+        if (first !== undefined)
+            realpathCache.delete(first);
+    }
+    realpathCache.set(p, { value: real, expiresAt: now + REALPATH_CACHE_TTL });
+    return real;
+}
+/* ── Path containment helper (B3) ── */
+function isContainedIn(path, base) {
+    return path === base || path.startsWith(base + '/');
+}
 const MAX_DIR_ENTRIES = 1000;
 /** List files in a directory, directories first, then alphabetical */
 export async function listFiles(dirPath) {
@@ -48,25 +71,40 @@ export async function validatePath(requested, baseCwd) {
     try {
         const resolved = resolve(baseCwd, requested);
         const real = await realpath(resolved);
-        // Containment check: ensure resolved path is within baseCwd
-        const realBase = await realpath(baseCwd);
-        if (real !== realBase && !real.startsWith(realBase + '/')) {
+        const realBase = await cachedRealpath(baseCwd);
+        if (!isContainedIn(real, realBase))
             return null;
-        }
         return real;
     }
     catch {
         return null;
     }
 }
+/**
+ * Validate path and reject symlinks (A1).
+ * Used for download/file-content/stream-file to prevent symlink traversal.
+ */
+export async function validatePathNoSymlink(requested, baseCwd) {
+    const resolved = await validatePath(requested, baseCwd);
+    if (!resolved)
+        return null;
+    try {
+        const s = await lstat(resolved);
+        if (s.isSymbolicLink())
+            return null;
+        return resolved;
+    }
+    catch {
+        return null;
+    }
+}
 /** Validate a path that may not exist yet (for touch/mkdir). Uses realpath on baseCwd only. */
 export async function validateNewPath(requested, baseCwd) {
     try {
-        const realBase = await realpath(baseCwd);
+        const realBase = await cachedRealpath(baseCwd);
         const resolved = resolve(realBase, requested);
-        if (resolved !== realBase && !resolved.startsWith(realBase + '/')) {
+        if (!isContainedIn(resolved, realBase))
             return null;
-        }
         return resolved;
     }
     catch {

package/server/dist/index.js

@@ -15,7 +15,7 @@ import { fileURLToPath } from 'url';
 import { createHash } from 'crypto';
 import { setupWebSocket, getActiveSessionNames, clearWsIntervals } from './websocket.js';
 import { isTmuxAvailable, listSessions, buildSessionName, killSession, isValidSessionId, cleanupStaleSessions, getCwd, getPaneCommand } from './tmux.js';
-import { listFiles, validatePath, validateNewPath, MAX_DOWNLOAD_SIZE, MAX_UPLOAD_SIZE } from './files.js';
+import { listFiles, validatePath, validatePathNoSymlink, validateNewPath, MAX_DOWNLOAD_SIZE, MAX_UPLOAD_SIZE } from './files.js';
 import { getDraft, saveDraft as saveDraftDb, deleteDraft, cleanupOldDrafts, getSetting, saveSetting, getAnnotation, saveAnnotation, cleanupOldAnnotations, closeDb } from './db.js';
 import { safeTokenCompare } from './auth.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -58,9 +58,13 @@ async function main() {
             directives: {
                 defaultSrc: ["'self'"],
                 scriptSrc: ["'self'", "https://cdn.jsdelivr.net", "https://unpkg.com"],
-                styleSrc: ["'self'", "'unsafe-inline'"],
+                styleSrc: ["'self'", "'unsafe-inline'", "https://cdn.jsdelivr.net"],
+                fontSrc: ["'self'", "https://cdn.jsdelivr.net"],
                 imgSrc: ["'self'", "https:", "data:", "blob:"],
                 connectSrc: ["'self'", "wss:", "ws:"],
+                frameAncestors: ["'none'"],
+                baseUri: ["'self'"],
+                formAction: ["'self'"],
             },
         },
         frameguard: { action: 'deny' },
@@ -255,7 +259,7 @@ async function main() {
                 res.status(400).json({ error: 'path query parameter required' });
                 return;
             }
-            const resolved = await validatePath(filePath, cwd);
+            const resolved = await validatePathNoSymlink(filePath, cwd);
             if (!resolved) {
                 res.status(400).json({ error: 'Invalid path' });
                 return;
@@ -271,7 +275,25 @@ async function main() {
             }
             res.setHeader('Content-Disposition', `attachment; filename="${encodeURIComponent(basename(resolved))}"`);
             res.setHeader('Content-Length', fileStat.size);
-            createReadStream(resolved).pipe(res);
+            // A3: Stream with byte counting to guard against TOCTOU size changes
+            const stream = createReadStream(resolved);
+            let bytesWritten = 0;
+            stream.on('data', (chunk) => {
+                const buf = typeof chunk === 'string' ? Buffer.from(chunk) : chunk;
+                bytesWritten += buf.length;
+                if (bytesWritten > MAX_DOWNLOAD_SIZE) {
+                    stream.destroy();
+                    if (!res.writableEnded)
+                        res.end();
+                    return;
+                }
+                if (!res.writableEnded)
+                    res.write(chunk);
+            });
+            stream.on('end', () => { if (!res.writableEnded)
+                res.end(); });
+            stream.on('error', () => { if (!res.writableEnded)
+                res.end(); });
         }
         catch (err) {
             console.error(`[api:download] ${sessionName}:`, err);
@@ -285,6 +307,11 @@ async function main() {
             return;
         try {
             const cwd = await getCwd(sessionName);
+            // A5: Validate CWD format before passing to tar
+            if (!cwd.startsWith('/') || cwd.includes('\0')) {
+                res.status(400).json({ error: 'Invalid working directory' });
+                return;
+            }
             const dirName = basename(cwd);
             res.setHeader('Content-Type', 'application/gzip');
             res.setHeader('Content-Disposition', `attachment; filename="${encodeURIComponent(dirName)}.tar.gz"`);
@@ -547,7 +574,7 @@ async function main() {
         }
         try {
             const cwd = await getCwd(sessionName);
-            const resolved = await validatePath(filePath, cwd);
+            const resolved = await validatePathNoSymlink(filePath, cwd);
             if (!resolved) {
                 res.status(400).json({ error: 'Invalid path' });
                 return;

package/server/dist/websocket.js

@@ -1,10 +1,13 @@
 import { WebSocket } from 'ws';
 import { buildSessionName, isValidSessionId, tokenToSessionName, hasSession, createSession, configureSession, captureScrollback, resizeSession, getCwd, } from './tmux.js';
-import { validatePath } from './files.js';
+import { validatePathNoSymlink } from './files.js';
 import { createReadStream } from 'fs';
 import { stat as fsStat } from 'fs/promises';
 import { PtySession } from './pty.js';
 import { BIN_TYPE_OUTPUT, BIN_TYPE_INPUT, BIN_TYPE_SCROLLBACK, BIN_TYPE_SCROLLBACK_CONTENT, BIN_TYPE_FILE_CHUNK } from 'ai-cli-online-shared';
+// A2: Limit pending (unauthenticated) WebSocket connections
+const MAX_PENDING_AUTH = 50;
+let pendingAuthCount = 0;
 const MAX_STREAM_SIZE = 50 * 1024 * 1024; // 50MB
 const STREAM_CHUNK_SIZE = 64 * 1024; // 64KB highWaterMark
 const STREAM_HIGH_WATER = 1024 * 1024; // 1MB backpressure threshold
@@ -111,9 +114,24 @@ export function setupWebSocket(wss, authToken, defaultCwd, tokenCompare, maxConn
             socket.setNoDelay(true);
         }
         const clientIp = req.socket.remoteAddress || 'unknown';
+        // A2: Reject when too many unauthenticated connections are pending
+        let countedAsPending = false;
+        if (authToken) {
+            if (pendingAuthCount >= MAX_PENDING_AUTH) {
+                console.log(`[WS] Pending auth limit (${MAX_PENDING_AUTH}) reached, rejecting connection from ${clientIp}`);
+                ws.close(4006, 'Too many pending connections');
+                return;
+            }
+            pendingAuthCount++;
+            countedAsPending = true;
+        }
         // Reject connections from IPs with too many recent auth failures
         if (authToken && isAuthRateLimited(clientIp)) {
             console.log(`[WS] Auth rate-limited IP: ${clientIp}`);
+            if (countedAsPending) {
+                pendingAuthCount--;
+                countedAsPending = false;
+            }
             ws.close(4001, 'Too many auth failures');
             return;
         }
@@ -142,6 +160,10 @@ export function setupWebSocket(wss, authToken, defaultCwd, tokenCompare, maxConn
         const authTimer = authToken
             ? setTimeout(() => {
                 if (!authenticated) {
+                    if (countedAsPending) {
+                        pendingAuthCount--;
+                        countedAsPending = false;
+                    }
                     console.log('[WS] Auth timeout — no auth message received');
                     ws.close(4001, 'Auth timeout');
                 }
@@ -257,9 +279,17 @@ export function setupWebSocket(wss, authToken, defaultCwd, tokenCompare, maxConn
                     if (!msg.token || !compareToken(msg.token, authToken)) {
                         recordAuthFailure(clientIp);
                         console.log(`[WS] Unauthorized — invalid token from ${clientIp}`);
+                        if (countedAsPending) {
+                            pendingAuthCount--;
+                            countedAsPending = false;
+                        }
                         ws.close(4001, 'Unauthorized');
                         return;
                     }
+                    if (countedAsPending) {
+                        pendingAuthCount--;
+                        countedAsPending = false;
+                    }
                     authenticated = true;
                     authenticatedToken = msg.token;
                     await initSession(msg.token);
@@ -306,7 +336,7 @@ export function setupWebSocket(wss, authToken, defaultCwd, tokenCompare, maxConn
                         }
                         try {
                             const cwd = await getCwd(sessionName);
-                            const resolved = await validatePath(msg.path, cwd);
+                            const resolved = await validatePathNoSymlink(msg.path, cwd);
                             if (!resolved) {
                                 send(ws, { type: 'file-stream-error', error: 'Invalid path' });
                                 break;
@@ -333,18 +363,18 @@ export function setupWebSocket(wss, authToken, defaultCwd, tokenCompare, maxConn
                                 buf[0] = BIN_TYPE_FILE_CHUNK;
                                 buf.set(data, 1);
                                 ws.send(buf);
-                                // Backpressure: pause stream when WS send buffer is full
+                                // Backpressure: pause stream when WS send buffer is full, resume on drain
                                 if (ws.bufferedAmount > STREAM_HIGH_WATER) {
                                     stream.pause();
-                                    const checkDrain = () => {
+                                    const onDrain = () => {
                                         if (ws.bufferedAmount < STREAM_LOW_WATER) {
                                             stream.resume();
                                         }
                                         else {
-                                            setTimeout(checkDrain, 10);
+                                            ws.once('drain', onDrain);
                                         }
                                     };
-                                    setTimeout(checkDrain, 10);
+                                    ws.once('drain', onDrain);
                                 }
                             });
                             stream.on('end', () => {
@@ -375,6 +405,10 @@ export function setupWebSocket(wss, authToken, defaultCwd, tokenCompare, maxConn
             }
         });
         ws.on('close', () => {
+            if (countedAsPending) {
+                pendingAuthCount--;
+                countedAsPending = false;
+            }
             if (authTimer)
                 clearTimeout(authTimer);
             if (activeFileStream) {

package/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-cli-online-server",
-  "version": "2.6.0",
+  "version": "2.9.0",
   "description": "CLI-Online Backend Server",
   "main": "dist/index.js",
   "type": "module",

package/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-cli-online-shared",
-  "version": "2.4.0",
+  "version": "2.9.0",
   "description": "Shared types for CLI-Online",
   "type": "module",
   "main": "dist/types.js",