pi-web-ui 0.30.0 → 0.31.0

package/dist/server/agent-service.js

@@ -24,7 +24,7 @@ import { ModelAdminService } from "./model-admin.js";
 import { FilesService, workspacePath } from "./files-service.js";
 import { isExtensionDisabled, ClientStateStore, } from "./client-state.js";
 import { saveUpload } from "./uploads.js";
-import { makePersistentTerminalTools } from "./terminals.js";
+import { makePersistentTerminalTools, TERMINAL_TOOLS_GUIDANCE, TERMINAL_TOOL_NAMES, } from "./terminals.js";
 import { WebUIContext } from "./webui-context.js";
 import { buildAttachmentMessages, parseModelSpec, } from "./attachments.js";
 import { serializeMessage, serializeStreamingMessage, } from "./serialize.js";
@@ -415,6 +415,8 @@ export class ClientSession {
             isStreaming: () => this.session.isStreaming,
             reloadSession: async () => {
                 await this.session.reload();
+                // reload() 会把 custom 工具重新加回活跃集——重放终端开关。
+                this.applyTerminalToolGating(this.session);
                 await this.pushSlashCommands();
             },
             effectiveDefaultSystemPrompt: () => this.effectiveDefaultSystemPrompt(),
@@ -520,6 +522,11 @@ export class ClientSession {
                             // GBK 老中文文件让模型改用终端按正确编码读（iconv/chcp/Get-Content）。
                             out.push(WINDOWS_PERSONA);
                         }
+                        if (this.settingsSvc.current.terminalToolsEnabled !== false) {
+                            // 终端工具使用引导（全平台）：告诉模型什么场景该用持久终端
+                            // 而不是一次性 bash——没有这段模型几乎从不主动选终端工具。
+                            out.push(TERMINAL_TOOLS_GUIDANCE);
+                        }
                         return out;
                     },
                     // 技能开关：禁用的技能从系统提示词和 /skill: 目录中剔除。
@@ -536,18 +543,21 @@ export class ClientSession {
                     }),
                 },
             });
+            const created = await createAgentSessionFromServices({
+                services,
+                sessionManager,
+                // 可手动停止的 bash 工具：覆盖 SDK 内置 bash（customTools 按 name
+                // 覆盖），执行时把自己的 AbortController 注册进客户端集合——
+                // abortBash() 只杀这些命令，agent run 与对话继续。
+                customTools: [
+                    makeKillableBashTool(effectiveCwd, this.bashKills),
+                    ...makePersistentTerminalTools(terminals, effectiveCwd),
+                ],
+            });
+            // 终端工具开关从创建起就生效（工具始终注册进注册表，只调活跃集）。
+            this.applyTerminalToolGating(created.session);
             return {
-                ...(await createAgentSessionFromServices({
-                    services,
-                    sessionManager,
-                    // 可手动停止的 bash 工具：覆盖 SDK 内置 bash（customTools 按 name
-                    // 覆盖），执行时把自己的 AbortController 注册进客户端集合——
-                    // abortBash() 只杀这些命令，agent run 与对话继续。
-                    customTools: [
-                        makeKillableBashTool(effectiveCwd, this.bashKills),
-                        ...makePersistentTerminalTools(terminals, effectiveCwd),
-                    ],
-                })),
+                ...created,
                 services,
                 diagnostics: services.diagnostics,
             };
@@ -590,8 +600,8 @@ export class ClientSession {
             uiMessageCache: new Map(),
             lastMessagesSig: "",
             lastMessagesArray: [],
-            queueSteering: 0,
-            queueFollowUp: 0,
+            queueSteering: [],
+            queueFollowUp: [],
             toolStartTimes: new Map(),
             toolWatchdogs: new Map(),
         };
@@ -849,8 +859,8 @@ export class ClientSession {
                 break;
             }
             case "queue_update":
-                conv.queueSteering = event.steering.length;
-                conv.queueFollowUp = event.followUp.length;
+                conv.queueSteering = [...event.steering];
+                conv.queueFollowUp = [...event.followUp];
                 break;
             // A run finished or a new entry was persisted — keep the session list fresh
             // (new chat + first message, completed turns, compaction, etc.).
@@ -1453,6 +1463,7 @@ export class ClientSession {
         setCwd: (path) => this.setCwd(path),
         setThinking: (level) => this.setThinking(level),
         refreshSessions: () => this.refreshSessions(),
+        afterReload: () => this.applyTerminalToolGating(this.session),
         onQuit: () => this.onQuit?.() ?? false,
     });
     /** Catalog push — index.ts get_commands / attach / cwd 切换等都会调用。 */
@@ -1495,6 +1506,12 @@ export class ClientSession {
     pushSettings() {
         this.settingsSvc.push();
     }
+    /** Extensions/skills changed externally (e.g. `pi remove` finished in the
+     *  terminal): re-run session.reload() and re-push state. Streaming-safe —
+     *  deferred to agent_end, same as settings reloads. */
+    async reloadExtensions() {
+        return this.settingsSvc.applyRuntime();
+    }
     /** Persist + apply a partial settings update (prompt text/mode, toggles). */
     async setSettings(partial) {
         await this.settingsSvc.set(partial);
@@ -1515,6 +1532,25 @@ export class ClientSession {
     async applyRuntimeSettings() {
         return this.settingsSvc.applyRuntime();
     }
+    /** 把终端工具开关应用到 session 的活跃工具集：关闭时从活跃集中剔除
+     *  terminal_*（工具仍留在注册表，重开时可直接加回）。session.reload() 与新
+     *  会话创建都会把 custom 工具加回活跃集，所以这两条路径之后都要重放本方法。 */
+    applyTerminalToolGating(session) {
+        try {
+            const enabled = this.settingsSvc.current.terminalToolsEnabled !== false;
+            const names = new Set(session.getActiveToolNames());
+            for (const n of TERMINAL_TOOL_NAMES) {
+                if (enabled)
+                    names.add(n);
+                else
+                    names.delete(n);
+            }
+            session.setActiveToolsByName([...names]);
+        }
+        catch {
+            // Session 未就绪——下次创建/reload 会再应用。
+        }
+    }
     async applySettingsReload() {
         // 兼容旧入口：reload + 刷目录在宿主回调里完成
         return this.settingsSvc.applyRuntime();
@@ -1557,7 +1593,7 @@ export class ClientSession {
     pendingMessages() {
         let n = 0;
         for (const c of this.convs.values())
-            n += c.queueFollowUp + c.queueSteering;
+            n += c.queueFollowUp.length + c.queueSteering.length;
         return n;
     }
     async prompt(text, attachments, 

package/dist/server/client-state.js

@@ -151,6 +151,7 @@ export class ClientStateStore {
             customSystemPrompt: s?.settings?.customSystemPrompt ?? "",
             disabledSkills: s?.settings?.disabledSkills ?? [],
             disabledExtensions: s?.settings?.disabledExtensions ?? [],
+            terminalToolsEnabled: s?.settings?.terminalToolsEnabled ?? true,
             visionBridgeEnabled: s?.settings?.visionBridgeEnabled ?? true,
             visionBridgeModel: s?.settings?.visionBridgeModel ?? null,
             visionBridgePromptMode: s?.settings?.visionBridgePromptMode === "replace" ? "replace" : "append",
@@ -169,6 +170,7 @@ export class ClientStateStore {
             customSystemPrompt: settings.customSystemPrompt ?? cur.customSystemPrompt ?? "",
             disabledSkills: settings.disabledSkills ?? cur.disabledSkills ?? [],
             disabledExtensions: settings.disabledExtensions ?? cur.disabledExtensions ?? [],
+            terminalToolsEnabled: settings.terminalToolsEnabled ?? cur.terminalToolsEnabled ?? true,
             visionBridgeEnabled: settings.visionBridgeEnabled ?? cur.visionBridgeEnabled ?? true,
             visionBridgeModel: settings.visionBridgeModel ?? cur.visionBridgeModel ?? null,
             visionBridgePromptMode: settings.visionBridgePromptMode ??

package/dist/server/index.js

@@ -660,6 +660,7 @@ wss.on("connection", (ws) => {
                     customSystemPrompt: msg.customSystemPrompt,
                     disabledSkills: msg.disabledSkills,
                     disabledExtensions: msg.disabledExtensions,
+                    terminalToolsEnabled: msg.terminalToolsEnabled,
                     visionBridgeEnabled: msg.visionBridgeEnabled,
                     visionBridgeModel: msg.visionBridgeModel,
                     visionBridgePromptMode: msg.visionBridgePromptMode,
@@ -668,6 +669,9 @@ wss.on("connection", (ws) => {
                     reviewDisabledSkills: msg.reviewDisabledSkills,
                 });
                 break;
+            case "extensions_reload":
+                void cs.reloadExtensions();
+                break;
             case "save_preset":
                 void cs.savePreset(msg.name);
                 break;

package/dist/server/protocol-version.js

@@ -8,4 +8,4 @@
  * its own copy in web/src/protocol-version.ts; scripts/check-protocol-sync.mjs
  * verifies the two never drift.
  */
-export const PROTOCOL_VERSION = 3;
+export const PROTOCOL_VERSION = 5;

package/dist/server/settings-service.js

@@ -99,6 +99,7 @@ export class SettingsService {
             settings: {
                 promptMode: this.settings.promptMode,
                 customSystemPrompt: this.settings.customSystemPrompt,
+                terminalToolsEnabled: this.settings.terminalToolsEnabled,
                 visionBridgeEnabled: this.settings.visionBridgeEnabled,
                 visionBridgeModel: this.settings.visionBridgeModel,
                 visionBridgePromptMode: this.settings.visionBridgePromptMode,
@@ -139,7 +140,8 @@ export class SettingsService {
         const needsReload = partial.promptMode !== undefined ||
             partial.customSystemPrompt !== undefined ||
             partial.disabledSkills !== undefined ||
-            partial.disabledExtensions !== undefined;
+            partial.disabledExtensions !== undefined ||
+            partial.terminalToolsEnabled !== undefined;
         if (partial.promptMode !== undefined)
             this.settings.promptMode = partial.promptMode;
         if (partial.customSystemPrompt !== undefined) {
@@ -151,6 +153,9 @@ export class SettingsService {
         if (partial.disabledExtensions !== undefined) {
             this.settings.disabledExtensions = partial.disabledExtensions;
         }
+        if (partial.terminalToolsEnabled !== undefined) {
+            this.settings.terminalToolsEnabled = partial.terminalToolsEnabled;
+        }
         if (partial.visionBridgeEnabled !== undefined) {
             this.settings.visionBridgeEnabled = partial.visionBridgeEnabled;
         }
@@ -187,6 +192,7 @@ export class SettingsService {
             customSystemPrompt: this.settings.customSystemPrompt,
             disabledSkills: [...this.settings.disabledSkills],
             disabledExtensions: [...this.settings.disabledExtensions],
+            terminalToolsEnabled: this.settings.terminalToolsEnabled,
             reviewPrompt: this.settings.reviewPrompt,
             reviewDisabledSkills: [...this.settings.reviewDisabledSkills],
         };
@@ -210,6 +216,8 @@ export class SettingsService {
             customSystemPrompt: p.customSystemPrompt,
             disabledSkills: [...p.disabledSkills],
             disabledExtensions: [...p.disabledExtensions],
+            // 旧版持久化的预设可能没有该字段——保留当前值。
+            terminalToolsEnabled: p.terminalToolsEnabled ?? this.settings.terminalToolsEnabled,
             reviewPrompt: p.reviewPrompt ?? this.settings.reviewPrompt,
             reviewDisabledSkills: [
                 ...(p.reviewDisabledSkills ?? this.settings.reviewDisabledSkills),

package/dist/server/slash-commands.js

@@ -204,6 +204,8 @@ export class SlashCommandsService {
                     // Re-discovers extensions / skills / prompt templates from disk and
                     // re-pushes the picker catalog (the CLI's /reload semantics).
                     await this.host.getSession().reload();
+                    // reload() 会把 custom 工具加回活跃集——重放设置门控（终端开关等）。
+                    this.host.afterReload?.();
                     await this.push();
                     this.host.emit({
                         type: "notice",

package/dist/server/terminals.js

@@ -778,6 +778,23 @@ export class TerminalManager {
         this.emitList();
     }
 }
+/** Names of the agent-facing persistent-terminal tools（设置开关门控用）。 */
+export const TERMINAL_TOOL_NAMES = [
+    "terminal_create",
+    "terminal_list",
+    "terminal_close",
+    "terminal_input",
+    "terminal_key",
+    "terminal_read",
+];
+/** System-prompt guidance teaching the model WHEN to prefer the terminal tools
+ *  over one-shot bash. Without it models almost never pick them — bash returns
+ *  complete output in a single call, so it always wins on convenience. */
+export const TERMINAL_TOOLS_GUIDANCE = `Persistent interactive terminal tools are available (terminal_create / terminal_list / terminal_close / terminal_input / terminal_key / terminal_read). The one-shot bash tool stays the DEFAULT for ordinary commands - it runs once and returns the full output. Switch to the terminal tools only when:
+- The program is interactive or TUI-based (REPLs like python/node, vim/htop, installers asking y/n, anything waiting on stdin).
+- You start a long-running server or watcher and want to keep watching its output (terminal_read with waitMs) or send keys to it later (e.g. interrupt via terminal_key with Ctrl+c).
+- The user explicitly asks you to work in the visible terminal panel.
+Do NOT use them for simple one-shot commands; bash remains cheaper and simpler there.`;
 /** Build the agent-facing persistent terminal tools for one conversation. */
 export function makePersistentTerminalTools(terminals, cwd) {
     const result = (text, details = {}) => ({ content: [{ type: "text", text }], details });
@@ -789,8 +806,8 @@ export function makePersistentTerminalTools(terminals, cwd) {
         defineTool({
             name: "terminal_create",
             label: "Create terminal",
-            description: "Create a named persistent interactive PTY in the current workspace. Use terminal_input or terminal_key to interact with it and terminal_read to inspect incremental output.",
-            promptSnippet: "create persistent interactive PTY terminals",
+            description: "Create a named persistent interactive PTY in the current workspace. Use terminal_input or terminal_key to interact with it and terminal_read to inspect incremental output. Prefer this over bash when the program is interactive/TUI-based (REPLs, vim/htop, y/n prompts), when starting a long-running server you want to keep observing or interrupt, or when the user asks to work in the visible terminal. For simple one-shot commands use bash instead.",
+            promptSnippet: "run interactive programs or long-running servers in a persistent visible PTY (multi-step: create → input/key → read)",
             parameters: Type.Object({
                 terminalId: Type.String({ description: "Stable terminal name" }),
                 cwd: Type.Optional(Type.String({ description: "Workspace-relative directory" })),

package/dist/server/themes.js

@@ -7,10 +7,24 @@
  *   - builtin: <pkgRoot>/themes/*.css   (ships with the npm package)
  *   - user   : <dataDir>/themes/*.css   (drop a css file here to add a theme)
  */
-import { existsSync, readdirSync, statSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { join } from "node:path";
 /** Only simple file ids — no path traversal. */
 const ID_RE = /^[A-Za-z0-9_-]+$/;
+/** Display-name marker inside a theme css file (first lines):
+ *  `/* theme-name: 中文名 *∕` — falls back to the file id when absent.
+ *  Lets built-in AND user themes carry a human-readable label while the
+ *  filename stays ASCII (id must match ID_RE). */
+const THEME_NAME_RE = /\/\*\s*theme-name:\s*(.+?)\s*\*\//;
+function readDisplayName(path, fallback) {
+    try {
+        const head = readFileSync(path, "utf8").slice(0, 300);
+        return head.match(THEME_NAME_RE)?.[1]?.trim() || fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
 export function listThemes(builtinDir, userDir) {
     const scan = (dir, builtin) => {
         if (!existsSync(dir))
@@ -19,7 +33,11 @@ export function listThemes(builtinDir, userDir) {
             .filter((f) => f.endsWith(".css"))
             .filter((f) => ID_RE.test(f.slice(0, -4)))
             .sort()
-            .map((f) => ({ id: f.slice(0, -4), name: f.slice(0, -4), builtin }));
+            .map((f) => ({
+            id: f.slice(0, -4),
+            name: readDisplayName(join(dir, f), f.slice(0, -4)),
+            builtin,
+        }));
     };
     const builtin = scan(builtinDir, true);
     const user = scan(userDir, false);

package/package.json

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

package/themes/light.css

@@ -3926,6 +3926,46 @@ body.panel-resizing {
 
 /* ----------------------------------------------------------- message roles */
 
+/* Queued prompts (steer = 插队 / followUp = 排队) — pending user bubbles at
+ * the bottom of the real message list, styled like user messages but dimmed
+ * with a tag until the server actually delivers them. */
+.queued-msg {
+	display: flex;
+	justify-content: flex-end;
+	padding: 6px 16px;
+}
+.queued-bubble {
+	max-width: min(85%, 720px);
+	background: var(--accent-soft);
+	border: 1px dashed rgba(139, 92, 246, 0.35);
+	border-radius: 12px;
+	padding: 8px 12px;
+	opacity: 0.75;
+}
+.queued-tag {
+	display: inline-block;
+	font-size: 10px;
+	line-height: 1.4;
+	padding: 1px 7px;
+	border-radius: 999px;
+	margin-bottom: 4px;
+	font-weight: 600;
+}
+.queued-tag.steer {
+	color: var(--amber);
+	background: rgba(251, 191, 36, 0.14);
+}
+.queued-tag.follow {
+	color: var(--text-dim);
+	background: var(--bg-elev2);
+}
+.queued-text {
+	white-space: pre-wrap;
+	word-break: break-word;
+	font-size: 13px;
+	color: var(--text);
+}
+
 .msg-user .msg-body {
 	background: var(--accent-soft);
 	border: 1px solid rgba(139, 92, 246, 0.25);
@@ -5360,6 +5400,31 @@ body.panel-resizing {
 	text-overflow: ellipsis;
 }
 
+/* Switch */
+.set-uninstall {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 3px 8px;
+	font-size: 11px;
+	border-radius: 6px;
+	border: 1px solid var(--border);
+	background: transparent;
+	color: var(--text-dim);
+	cursor: pointer;
+	transition: color 0.15s, border-color 0.15s;
+}
+.set-uninstall:hover {
+	color: var(--red);
+	border-color: var(--red);
+}
+.set-uninstall.confirm {
+	color: var(--red);
+	border-color: var(--red);
+	font-weight: 600;
+}
+
 /* Switch */
 .set-switch {
 	flex: none;