pi-web-ui 0.16.2 → 0.17.0

package/dist/server/agent-service.js

@@ -832,6 +832,9 @@ export class ClientSession {
         // left panel shows every background chat (a fresh socket never got the
         // newChat/switch pushes).
         this.emitConversations();
+        // Reconnect: same for the slash-command catalog (the picker needs it even
+        // before the client asks).
+        void this.pushSlashCommands();
     }
     detachSink(send) {
         this.sinks.delete(send);
@@ -1652,11 +1655,226 @@ export class ClientSession {
         }, SNAPSHOT_INTERVAL_MS);
     }
     // ---------------------------------------------------------------------------
+    // Slash commands
+    // ---------------------------------------------------------------------------
+    /**
+     * Slash commands implemented natively by the web server (the pi CLI's built-in
+     * interactive commands like /model and /new are NOT handled by the SDK's
+     * prompt() — without this they'd be sent to the model as plain text). Keep in
+     * sync with execNativeCommand(). /help and /copy are client-side UI actions
+     * (they never reach the server) but stay listed so the picker shows them.
+     */
+    static NATIVE_COMMANDS = [
+        { name: "new", description: "新建对话" },
+        { name: "model", description: "切换模型", argumentHint: "[名称]" },
+        { name: "compact", description: "压缩上下文", argumentHint: "[说明]" },
+        { name: "cwd", description: "切换工作目录", argumentHint: "<路径>" },
+        {
+            name: "thinking",
+            description: "设置思考强度",
+            argumentHint: "<off|low|medium|high>",
+        },
+        { name: "resume", description: "刷新会话列表" },
+        { name: "help", description: "显示全部命令" },
+        { name: "copy", description: "复制上一条助手回复" },
+    ];
+    /** Parse a prompt into "/command args" — returns null when it isn't one. */
+    parseSlash(text) {
+        const trimmed = text.trim();
+        if (!trimmed.startsWith("/"))
+            return null;
+        const m = trimmed.match(/^\/([^\s]+)\s*([\s\S]*)$/);
+        if (!m || !m[1])
+            return null;
+        return { name: m[1], args: m[2].trim() };
+    }
+    /** Run a native slash command (see NATIVE_COMMANDS). Returns false when the
+     *  name is not a native command (the prompt falls through to the SDK). */
+    async execNativeCommand(name, args) {
+        switch (name) {
+            case "new":
+                await this.newChat();
+                return true;
+            case "model": {
+                if (!args) {
+                    const current = this.session.model;
+                    this.emit({
+                        type: "notice",
+                        level: "info",
+                        text: current
+                            ? `当前模型：${current.name}（${current.provider}/${current.id}）。用法：/model <名称>`
+                            : `用法：/model <名称>`,
+                    });
+                    return true;
+                }
+                const query = args.toLowerCase();
+                const available = await this.session.modelRuntime.getAvailable();
+                // Prefer an exact "provider/id" match, else id/name substring.
+                const exact = available.find((m) => m.provider + "/" + m.id === args.trim());
+                const matches = exact
+                    ? [exact]
+                    : available.filter((m) => m.id.toLowerCase().includes(query) ||
+                        m.name.toLowerCase().includes(query) ||
+                        m.provider.toLowerCase().includes(query));
+                if (matches.length === 0) {
+                    this.emit({
+                        type: "notice",
+                        level: "error",
+                        text: `没有匹配到模型：${args}（可用模型见顶栏模型列表）`,
+                    });
+                    return true;
+                }
+                const pick = matches[0];
+                if (matches.length > 1) {
+                    this.emit({
+                        type: "notice",
+                        level: "warning",
+                        text: `找到 ${matches.length} 个匹配模型，已选用：${pick.name}（精确匹配请用 provider/id）`,
+                    });
+                }
+                await this.setModel(`${pick.provider}/${pick.id}`);
+                return true;
+            }
+            case "compact":
+                try {
+                    await this.session.compact(args || undefined);
+                }
+                catch (err) {
+                    this.emit({
+                        type: "notice",
+                        level: "error",
+                        text: `压缩上下文失败：${err.message}`,
+                    });
+                }
+                return true;
+            case "cwd":
+                if (!args) {
+                    this.emit({
+                        type: "notice",
+                        level: "info",
+                        text: `当前工作目录：${this.cwd}。用法：/cwd <路径>`,
+                    });
+                }
+                else {
+                    await this.setCwd(args);
+                }
+                return true;
+            case "thinking": {
+                const ALIAS = {
+                    off: "off",
+                    minimal: "minimal",
+                    low: "low",
+                    medium: "medium",
+                    high: "high",
+                    xhigh: "xhigh",
+                    max: "max",
+                    关闭: "off",
+                    极简: "minimal",
+                    低: "low",
+                    中: "medium",
+                    高: "high",
+                    极高: "xhigh",
+                    最大: "max",
+                };
+                const level = ALIAS[args.trim().toLowerCase()];
+                if (!level) {
+                    this.emit({
+                        type: "notice",
+                        level: "error",
+                        text: `无效的思考强度：${args || "（空）"}。可用：off / minimal / low / medium / high / xhigh / max`,
+                    });
+                    return true;
+                }
+                this.setThinking(level);
+                return true;
+            }
+            case "resume":
+                await this.refreshSessions();
+                this.emit({
+                    type: "notice",
+                    level: "info",
+                    text: "会话列表已刷新，请在左侧「历史对话」中选择",
+                });
+                return true;
+            case "help":
+            case "copy":
+                // Client-side UI actions — the client handles them before sending;
+                // swallow here so the SDK never sees them as plain prompt text.
+                return true;
+            default:
+                return false;
+        }
+    }
+    /**
+     * Catalog of slash commands for the chat input: web-native builtins first,
+     * then the SDK's invokable commands for the ACTIVE conversation (extension
+     * commands, prompt templates, skills) — the same set the SDK expands when a
+     * prompt text starts with "/" (see AgentSession.prompt).
+     */
+    async pushSlashCommands() {
+        const commands = [];
+        const seen = new Set();
+        for (const c of ClientSession.NATIVE_COMMANDS) {
+            commands.push({ ...c, source: "builtin" });
+            seen.add(c.name);
+        }
+        try {
+            const s = this.session;
+            // Extension commands — the SDK already suffixes collisions with builtin
+            // names ("new:2"), and those still reach the SDK since execNativeCommand
+            // only intercepts the exact native names.
+            for (const cmd of s.extensionRunner.getRegisteredCommands()) {
+                if (seen.has(cmd.invocationName))
+                    continue;
+                commands.push({
+                    name: cmd.invocationName,
+                    description: cmd.description,
+                    source: "extension",
+                });
+                seen.add(cmd.invocationName);
+            }
+            // Prompt templates: /templatename args
+            for (const t of s.promptTemplates) {
+                if (seen.has(t.name))
+                    continue;
+                commands.push({
+                    name: t.name,
+                    description: t.description,
+                    source: "prompt",
+                });
+                seen.add(t.name);
+            }
+            // Skills: /skill:name args
+            for (const skill of s.resourceLoader.getSkills().skills) {
+                const name = `skill:${skill.name}`;
+                if (seen.has(name))
+                    continue;
+                commands.push({
+                    name,
+                    description: skill.description,
+                    source: "skill",
+                });
+            }
+        }
+        catch {
+            // Session not ready yet — native-only catalog still serves the picker.
+        }
+        this.emit({ type: "slash_commands", commands });
+    }
+    // ---------------------------------------------------------------------------
     // Commands
     // ---------------------------------------------------------------------------
     async prompt(text, attachments) {
         try {
             const s = this.session;
+            // Native slash commands (see NATIVE_COMMANDS) are executed here and
+            // never reach the SDK. Extension / skill / template commands fall
+            // through — AgentSession.prompt() handles those itself.
+            const slash = this.parseSlash(text);
+            if (slash && (await this.execNativeCommand(slash.name, slash.args))) {
+                this.flushSnapshot();
+                return;
+            }
             // Attach files as independent nextTurn context messages (asides) so the
             // user message stays clean; they render as separate attachment cards.
             const asides = await this.buildAttachmentMessages(attachments);
@@ -2766,6 +2984,8 @@ export class ClientSession {
             void this.pushProjects();
             this.webUi.refresh();
             this.emitConversations();
+            // Skills / prompt templates are project-bound — refresh the catalog.
+            void this.pushSlashCommands();
             this.emit({
                 type: "notice",
                 level: "info",

package/dist/server/index.js

@@ -224,6 +224,9 @@ wss.on("connection", (ws) => {
             case "get_state":
                 cs.flushSnapshot();
                 break;
+            case "get_commands":
+                void cs.pushSlashCommands();
+                break;
             case "list_sessions":
                 void cs.refreshSessions();
                 break;

package/extensions/webui.ts

@@ -1,184 +1,184 @@
-/**
- * pi-web-ui 的 pi 扩展 —— 提供命令行集成。
- *
- * 能力：
- *   /webui                      启动本机 pi-web-ui 服务器，打开浏览器访问
- *   /webui --port 9000          指定端口启动
- *   /webui --no-browser         启动但不开浏览器
- *   /webui stop                 停止已启动的服务器
- *   /webui status               查看运行状态 / URL
- *
- * 实现说明：
- *   - 不依赖全局 bin（pi install 后 pi-web-ui 命令不一定在 PATH），直接用
- *     node 调包内 dist/server/index.js，通过环境变量 PORT / PI_WEB_CWD /
- *     PI_WEB_DATA_DIR 控制。
- *   - 工作目录默认用当前 pi 会话的 ctx.cwd；可用 --cwd / path 覆盖。
- *   - 服务器作为子进程后台运行，/webui 不阻塞 pi。
- *   - 每个 pi 会话管理一个子进程；session_shutdown 时清理，避免孤儿进程。
- */
-
-import { spawn } from "node:child_process";
-import { existsSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import net from "node:net";
-import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-
-// 本文件位于 <pkg>/extensions/webui.ts → 包根在上一级
-const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
-const SERVER_ENTRY = join(PKG_ROOT, "dist", "server", "index.js");
-const NODE = process.execPath;
-
-/** 每个会话的服务器子进程 + 元数据 */
-interface RunningServer {
-	proc: ReturnType<typeof spawn>;
-	port: number;
-	cwd: string;
-	url: string;
-}
-
-// 会话 → 运行实例（模块级 Map；每会话一个会话对象，无需清理全局）
-const running = new Map<string, RunningServer>();
-
-/** 找一个空闲端口 */
-function findFreePort(from = 8787): Promise<number> {
-	return new Promise((resolve_, reject) => {
-		const srv = net.createServer();
-		srv.listen(from, () => {
-			const port = (srv.address() as net.AddressInfo).port;
-			srv.close(() => resolve_(port));
-		});
-		srv.on("error", () => {
-			// 端口被占则顺延
-			findFreePort(from + 1).then(resolve_, reject);
-		});
-	});
-}
-
-/** 解析 --key value / --flag 参数 */
-function parseArgs(args: string): { port?: number; cwd?: string; noBrowser: boolean } {
-	const out: { port?: number; cwd?: string; noBrowser: boolean } = { noBrowser: false };
-	const toks = args.split(/\s+/).filter(Boolean);
-	for (let i = 0; i < toks.length; i++) {
-		const t = toks[i];
-		if ((t === "--port" || t === "-p") && toks[i + 1]) {
-			const n = Number(toks[++i]);
-			if (Number.isInteger(n) && n > 0 && n < 65536) out.port = n;
-		} else if ((t === "--cwd") && toks[i + 1]) {
-			out.cwd = resolve(toks[++i]);
-		} else if (t === "--no-browser") {
-			out.noBrowser = true;
-		}
-	}
-	return out;
-}
-
-/** 打开浏览器 */
-async function openBrowser(url: string): Promise<void> {
-	const { platform } = process;
-	const cmd =
-		platform === "darwin"
-			? ["open", url]
-			: platform === "win32"
-				? ["cmd", "/c", "start", "", url]
-				: ["xdg-open", url];
-	try {
-		spawn(cmd[0], cmd.slice(1), { stdio: "ignore", detached: true }).unref();
-	} catch {
-		/* 忽略打开失败（headless 等场景） */
-	}
-}
-
-export default function (pi: ExtensionAPI): void {
-	pi.registerCommand("webui", {
-		description: "启动本机 pi-web-ui Web 界面（/webui [--port N] [--cwd PATH] [--no-browser] | stop | status）",
-		handler: async (args: string, ctx: ExtensionCommandContext) => {
-			const sid = ctx.sessionManager.getSessionId();
-			const opts = parseArgs(args);
-			const action = (args.split(/\s+/)[0] || "start").toLowerCase();
-
-			// 停止
-			if (action === "stop" || action === "kill") {
-				const inst = running.get(sid);
-				if (!inst) {
-					ctx.ui.notify("没有正在运行的本机 pi-web-ui 服务器", "info");
-					return;
-				}
-				inst.proc.kill("SIGTERM");
-				running.delete(sid);
-				ctx.ui.notify(`已停止 pi-web-ui (${inst.url})`, "info");
-				return;
-			}
-
-			// 状态
-			if (action === "status") {
-				const inst = running.get(sid);
-				if (!inst) {
-					ctx.ui.notify("本机 pi-web-ui 未运行", "info");
-					return;
-				}
-				const alive = inst.proc.exitCode === null;
-				ctx.ui.notify(
-					alive ? `pi-web-ui 运行中 → ${inst.url}\n端口 ${inst.port} · cwd ${inst.cwd}` : `已退出(exit=${inst.proc.exitCode})`,
-					alive ? "info" : "warning",
-				);
-				return;
-			}
-
-			// 默认 start
-			if (action !== "start" && action !== "run") {
-				ctx.ui.notify(`未知动作 ${action}（可用 start|stop|status）`, "warning");
-				return;
-			}
-
-			// 已运行则提示
-			const existing = running.get(sid);
-			if (existing && existing.proc.exitCode === null) {
-				ctx.ui.notify(`pi-web-ui 已在运行 → ${existing.url}`, "info");
-				return;
-			}
-
-			// 检查是否已构建
-			if (!existsSync(SERVER_ENTRY)) {
-				ctx.ui.notify(
-					"缺少 dist/ 产物（当前安装未包含已构建前端）。请运行 `npm run build` 后重试，或用 pi-web-ui 官方 npm 包。",
-					"warning",
-				);
-				return;
-			}
-
-			const port = opts.port ?? (await findFreePort());
-			const cwd = opts.cwd ?? ctx.cwd;
-			const url = `http://localhost:${port}`;
-
-			const env = {
-				...process.env,
-				PORT: String(port),
-				PI_WEB_CWD: cwd,
-				...(process.env.PI_WEB_DATA_DIR ? {} : { PI_WEB_DATA_DIR: join(cwd, ".pi-web") }),
-			};
-			const proc = spawn(NODE, [SERVER_ENTRY], { cwd, env, stdio: "ignore", detached: true });
-			proc.unref();
-			running.set(sid, { proc, port, cwd, url });
-
-			ctx.ui.notify(`pi-web-ui 启动中 → ${url}\n端口 ${port} · cwd ${cwd}\n(几秒后可用，/webui status 查看)`);
-
-			if (!opts.noBrowser) await openBrowser(url);
-
-			// 进程退出时清理
-			proc.on("exit", () => {
-				if (running.get(sid)?.proc === proc) running.delete(sid);
-			});
-		},
-	});
-
-	// 会话结束清理子进程，避免孤儿
-	pi.on("session_shutdown", async (_event, ctx) => {
-		const sid = ctx.sessionManager.getSessionId();
-		const inst = running.get(sid);
-		if (inst && inst.proc.exitCode === null) {
-			inst.proc.kill("SIGTERM");
-			running.delete(sid);
-		}
-	});
-}
+/**
+ * pi-web-ui 的 pi 扩展 —— 提供命令行集成。
+ *
+ * 能力：
+ *   /webui                      启动本机 pi-web-ui 服务器，打开浏览器访问
+ *   /webui --port 9000          指定端口启动
+ *   /webui --no-browser         启动但不开浏览器
+ *   /webui stop                 停止已启动的服务器
+ *   /webui status               查看运行状态 / URL
+ *
+ * 实现说明：
+ *   - 不依赖全局 bin（pi install 后 pi-web-ui 命令不一定在 PATH），直接用
+ *     node 调包内 dist/server/index.js，通过环境变量 PORT / PI_WEB_CWD /
+ *     PI_WEB_DATA_DIR 控制。
+ *   - 工作目录默认用当前 pi 会话的 ctx.cwd；可用 --cwd / path 覆盖。
+ *   - 服务器作为子进程后台运行，/webui 不阻塞 pi。
+ *   - 每个 pi 会话管理一个子进程；session_shutdown 时清理，避免孤儿进程。
+ */
+
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import net from "node:net";
+import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+
+// 本文件位于 <pkg>/extensions/webui.ts → 包根在上一级
+const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const SERVER_ENTRY = join(PKG_ROOT, "dist", "server", "index.js");
+const NODE = process.execPath;
+
+/** 每个会话的服务器子进程 + 元数据 */
+interface RunningServer {
+	proc: ReturnType<typeof spawn>;
+	port: number;
+	cwd: string;
+	url: string;
+}
+
+// 会话 → 运行实例（模块级 Map；每会话一个会话对象，无需清理全局）
+const running = new Map<string, RunningServer>();
+
+/** 找一个空闲端口 */
+function findFreePort(from = 8787): Promise<number> {
+	return new Promise((resolve_, reject) => {
+		const srv = net.createServer();
+		srv.listen(from, () => {
+			const port = (srv.address() as net.AddressInfo).port;
+			srv.close(() => resolve_(port));
+		});
+		srv.on("error", () => {
+			// 端口被占则顺延
+			findFreePort(from + 1).then(resolve_, reject);
+		});
+	});
+}
+
+/** 解析 --key value / --flag 参数 */
+function parseArgs(args: string): { port?: number; cwd?: string; noBrowser: boolean } {
+	const out: { port?: number; cwd?: string; noBrowser: boolean } = { noBrowser: false };
+	const toks = args.split(/\s+/).filter(Boolean);
+	for (let i = 0; i < toks.length; i++) {
+		const t = toks[i];
+		if ((t === "--port" || t === "-p") && toks[i + 1]) {
+			const n = Number(toks[++i]);
+			if (Number.isInteger(n) && n > 0 && n < 65536) out.port = n;
+		} else if ((t === "--cwd") && toks[i + 1]) {
+			out.cwd = resolve(toks[++i]);
+		} else if (t === "--no-browser") {
+			out.noBrowser = true;
+		}
+	}
+	return out;
+}
+
+/** 打开浏览器 */
+async function openBrowser(url: string): Promise<void> {
+	const { platform } = process;
+	const cmd =
+		platform === "darwin"
+			? ["open", url]
+			: platform === "win32"
+				? ["cmd", "/c", "start", "", url]
+				: ["xdg-open", url];
+	try {
+		spawn(cmd[0], cmd.slice(1), { stdio: "ignore", detached: true }).unref();
+	} catch {
+		/* 忽略打开失败（headless 等场景） */
+	}
+}
+
+export default function (pi: ExtensionAPI): void {
+	pi.registerCommand("webui", {
+		description: "启动本机 pi-web-ui Web 界面（/webui [--port N] [--cwd PATH] [--no-browser] | stop | status）",
+		handler: async (args: string, ctx: ExtensionCommandContext) => {
+			const sid = ctx.sessionManager.getSessionId();
+			const opts = parseArgs(args);
+			const action = (args.split(/\s+/)[0] || "start").toLowerCase();
+
+			// 停止
+			if (action === "stop" || action === "kill") {
+				const inst = running.get(sid);
+				if (!inst) {
+					ctx.ui.notify("没有正在运行的本机 pi-web-ui 服务器", "info");
+					return;
+				}
+				inst.proc.kill("SIGTERM");
+				running.delete(sid);
+				ctx.ui.notify(`已停止 pi-web-ui (${inst.url})`, "info");
+				return;
+			}
+
+			// 状态
+			if (action === "status") {
+				const inst = running.get(sid);
+				if (!inst) {
+					ctx.ui.notify("本机 pi-web-ui 未运行", "info");
+					return;
+				}
+				const alive = inst.proc.exitCode === null;
+				ctx.ui.notify(
+					alive ? `pi-web-ui 运行中 → ${inst.url}\n端口 ${inst.port} · cwd ${inst.cwd}` : `已退出(exit=${inst.proc.exitCode})`,
+					alive ? "info" : "warning",
+				);
+				return;
+			}
+
+			// 默认 start
+			if (action !== "start" && action !== "run") {
+				ctx.ui.notify(`未知动作 ${action}（可用 start|stop|status）`, "warning");
+				return;
+			}
+
+			// 已运行则提示
+			const existing = running.get(sid);
+			if (existing && existing.proc.exitCode === null) {
+				ctx.ui.notify(`pi-web-ui 已在运行 → ${existing.url}`, "info");
+				return;
+			}
+
+			// 检查是否已构建
+			if (!existsSync(SERVER_ENTRY)) {
+				ctx.ui.notify(
+					"缺少 dist/ 产物（当前安装未包含已构建前端）。请运行 `npm run build` 后重试，或用 pi-web-ui 官方 npm 包。",
+					"warning",
+				);
+				return;
+			}
+
+			const port = opts.port ?? (await findFreePort());
+			const cwd = opts.cwd ?? ctx.cwd;
+			const url = `http://localhost:${port}`;
+
+			const env = {
+				...process.env,
+				PORT: String(port),
+				PI_WEB_CWD: cwd,
+				...(process.env.PI_WEB_DATA_DIR ? {} : { PI_WEB_DATA_DIR: join(cwd, ".pi-web") }),
+			};
+			const proc = spawn(NODE, [SERVER_ENTRY], { cwd, env, stdio: "ignore", detached: true });
+			proc.unref();
+			running.set(sid, { proc, port, cwd, url });
+
+			ctx.ui.notify(`pi-web-ui 启动中 → ${url}\n端口 ${port} · cwd ${cwd}\n(几秒后可用，/webui status 查看)`);
+
+			if (!opts.noBrowser) await openBrowser(url);
+
+			// 进程退出时清理
+			proc.on("exit", () => {
+				if (running.get(sid)?.proc === proc) running.delete(sid);
+			});
+		},
+	});
+
+	// 会话结束清理子进程，避免孤儿
+	pi.on("session_shutdown", async (_event, ctx) => {
+		const sid = ctx.sessionManager.getSessionId();
+		const inst = running.get(sid);
+		if (inst && inst.proc.exitCode === null) {
+			inst.proc.kill("SIGTERM");
+			running.delete(sid);
+		}
+	});
+}

package/package.json

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