pi-web-ui 0.2.12 → 0.2.13

package/README.md

@@ -207,6 +207,13 @@ Key design points:
   reference and the model reads them on demand with its `read` tool, so attaching
   a 5 MB file costs only a few tokens until the model actually looks at it.
   Images are always attached as image content.
+- **File preview with line selection.** Click a file name (or its 👁 button) in
+  the right panel to open a preview modal with line numbers. Click / drag /
+  Shift+click to select a line range, then “添加到对话” to queue it as a `lines`
+  attachment — the server inlines only the selected range
+  (`<file path=... lines="2-3">`), so you can point the agent at exactly the
+  code you mean without dumping the whole file. Preview reads are capped at
+  512 KB and binary files are detected and refused.
 - **Live tool output.** `bash_execution_update` / `tool_execution_update` events
   are forwarded as lightweight `tool_delta` messages so terminal output streams
   in real time; the final output arrives in the toolResult message on the next

package/dist/server/agent-service.js

@@ -18,6 +18,8 @@ import { loadCommands, saveCommandsFile, TerminalManager, } from "./terminals.js
 const SNAPSHOT_INTERVAL_MS = 60;
 const WIDGET_REFRESH_MS = 2000;
 const WIDGET_WIDTH = 80;
+/** Preview panel cap: only the first 512KB of a file is ever read/sent. */
+const MAX_PREVIEW_BYTES = 512 * 1024;
 // ---------------------------------------------------------------------------
 // Web UI context adapter — bridges extension UI calls (setWidget/notify) to the
 // browser. Extensions like rpiv-todo render a TUI widget via
@@ -244,12 +246,17 @@ const IGNORED_ENTRIES = new Set([
     "Thumbs.db",
 ]);
 function countLines(buf) {
+    if (buf.length === 0)
+        return 0;
+    const hasTrailingNewline = buf[buf.length - 1] === 10; /* \n */
     let lines = 0;
     for (let i = 0; i < buf.length; i++) {
-        if (buf[i] === 10 /* \n */)
+        if (buf[i] === 10)
             lines++;
     }
-    return lines + (buf.length > 0 ? 1 : 0);
+    // A trailing newline terminates the last line instead of starting an empty
+    // one — matches the client preview's split-based line numbering.
+    return hasTrailingNewline ? lines : lines + 1;
 }
 function extractPartialText(partial) {
     const content = partial
@@ -959,7 +966,8 @@ export class ClientSession {
      * Text files are size-aware: small files are inlined into the message so the
      * model sees them immediately; large files are passed as a <file path="...">
      * reference and the model reads them on demand with its read tool (which has
-     * built-in truncation). Images are always passed as image content.
+     * built-in truncation). Images are always passed as image content. Mode
+     * "lines" inlines only a 1-based inclusive line range of the file.
      */
     async buildAttachmentMessages(attachments) {
         if (!attachments || attachments.length === 0)
@@ -990,6 +998,8 @@ export class ClientSession {
             ".svg": "image/svg+xml",
         };
         const out = [];
+        /** Cap for reading a file in "lines" mode (selected slice is inlined). */
+        const MAX_LINES_READ_BYTES = 2 * 1024 * 1024;
         for (const att of attachments) {
             const abs = resolve(root, att.path);
             const rel = relative(root, abs);
@@ -1104,6 +1114,79 @@ export class ClientSession {
                 out.push(makeReference());
                 continue;
             }
+            // Line-range mode: inline only the selected 1-based inclusive range.
+            // Reading is capped so a huge file can't exhaust memory even though
+            // the selected slice is small.
+            if (att.mode === "lines") {
+                const range = att.lines;
+                if (!range || range.start < 1 || range.end < range.start) {
+                    this.emit({
+                        type: "notice",
+                        level: "warning",
+                        text: `行范围无效，已改为仅引用：${att.path}`,
+                    });
+                    out.push(makeReference());
+                    continue;
+                }
+                if (stat.size > MAX_LINES_READ_BYTES) {
+                    this.emit({
+                        type: "notice",
+                        level: "warning",
+                        text: `文件过大，已改为仅引用：${att.path}`,
+                    });
+                    out.push(makeReference());
+                    continue;
+                }
+                const buf = await fs.readFile(abs);
+                if (buf.includes(0)) {
+                    this.emit({
+                        type: "notice",
+                        level: "warning",
+                        text: `二进制文件已改为仅引用：${att.path}`,
+                    });
+                    out.push(makeReference());
+                    continue;
+                }
+                const parts = buf.toString("utf8").split("\n");
+                // A trailing newline yields an empty phantom line — drop it so line
+                // numbers match the preview panel.
+                if (parts.length > 0 && parts[parts.length - 1] === "")
+                    parts.pop();
+                const start = Math.min(range.start, parts.length);
+                const end = Math.min(range.end, parts.length);
+                if (start < 1 || end < start) {
+                    this.emit({
+                        type: "notice",
+                        level: "warning",
+                        text: `选中行超出文件范围，已改为仅引用：${att.path}`,
+                    });
+                    out.push(makeReference());
+                    continue;
+                }
+                const selected = parts.slice(start - 1, end).join("\n");
+                out.push({
+                    message: {
+                        customType: "file",
+                        content: [
+                            {
+                                type: "text",
+                                text: `\n<file path="${rel}" lines="${start}-${end}">\n\`\`\`\n${selected}\n\`\`\`\n</file>`,
+                            },
+                        ],
+                        display: true,
+                        details: {
+                            name,
+                            path: rel,
+                            mode: "lines",
+                            size: stat.size,
+                            lines: end - start + 1,
+                            startLine: start,
+                            endLine: end,
+                        },
+                    },
+                });
+                continue;
+            }
             // Forced inline has a hard cap to protect the model context.
             if (att.mode === "inline") {
                 if (stat.size > MAX_INLINE_BYTES) {
@@ -1288,6 +1371,75 @@ export class ClientSession {
             });
         }
     }
+    /** Read a workspace file for the preview panel (size-capped, binary-safe). */
+    async readFile(relPath) {
+        try {
+            const fs = await import("node:fs/promises");
+            const { resolve, sep, relative } = await import("node:path");
+            const root = resolve(this.cwd);
+            const abs = resolve(root, relPath);
+            const rel = relative(root, abs);
+            if (rel.startsWith("..") || rel.includes(`${sep}..`)) {
+                this.emit({
+                    type: "notice",
+                    level: "warning",
+                    text: `路径超出工作区：${relPath}`,
+                });
+                return;
+            }
+            const stat = await fs.stat(abs);
+            if (!stat.isFile()) {
+                this.emit({
+                    type: "notice",
+                    level: "warning",
+                    text: `不是文件：${relPath}`,
+                });
+                return;
+            }
+            // Read only the first MAX_PREVIEW_BYTES so huge files can't exhaust
+            // memory or flood the socket.
+            const handle = await fs.open(abs, "r");
+            try {
+                const buf = Buffer.alloc(Math.min(stat.size, MAX_PREVIEW_BYTES));
+                const { bytesRead } = await handle.read(buf, 0, buf.length, 0);
+                const data = buf.subarray(0, bytesRead);
+                const name = relPath.split("/").pop() ?? relPath;
+                if (data.includes(0)) {
+                    this.emit({
+                        type: "file_content",
+                        path: rel,
+                        name,
+                        text: "",
+                        truncated: false,
+                        binary: true,
+                        lines: 0,
+                        size: stat.size,
+                    });
+                    return;
+                }
+                this.emit({
+                    type: "file_content",
+                    path: rel,
+                    name,
+                    text: data.toString("utf8"),
+                    truncated: bytesRead < stat.size,
+                    binary: false,
+                    lines: countLines(data),
+                    size: stat.size,
+                });
+            }
+            finally {
+                await handle.close();
+            }
+        }
+        catch (err) {
+            this.emit({
+                type: "notice",
+                level: "error",
+                text: `读取文件失败：${err.message}`,
+            });
+        }
+    }
     async cycleModel() {
         try {
             await this.session.cycleModel();

package/dist/server/index.js

@@ -104,6 +104,9 @@ wss.on("connection", (ws) => {
             case "list_files":
                 void cs.listFiles(msg.path);
                 break;
+            case "read_file":
+                void cs.readFile(msg.path);
+                break;
             case "list_models":
                 void cs.listModels();
                 break;

package/dist/server/terminals.js

@@ -121,7 +121,10 @@ const SHELL_ARGS = isWindows ? [] : ["-i"];
  * Default a UTF-8 locale so multibyte text round-trips.
  */
 function shellEnv() {
-    const env = { ...process.env, TERM: "xterm-256color" };
+    const env = {
+        ...process.env,
+        TERM: "xterm-256color",
+    };
     if (!env.LANG && !env.LC_ALL)
         env.LANG = "en_US.UTF-8";
     return env;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-ui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "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",