codexmate 0.1.12 → 0.1.14

package/README.md

@@ -49,7 +49,7 @@
 
 Have you ever felt overwhelmed by managing multiple local AI agents? Each has its own config format, session storage, and skills directory.
 
-**Codex Mate** offers a unified control plane to bring order to the chaos. It's a local-first CLI + Web UI designed to manage [Codex](https://github.com/openai/codex), [Claude Code](https://github.com/anthropic-ai/claude-code), [OpenCode](https://opencode.ai/), KiloCode, and [OpenClaw](https://github.com/moeru-ai/openclaw) seamlessly.
+**Codex Mate** offers a unified control plane to bring order to the chaos. It's a local-first CLI + Web UI designed to manage [Codex](https://github.com/openai/codex), [Claude Code](https://github.com/anthropic-ai/claude-code), [OpenCode](https://opencode.ai/), KiloCode, [OpenClaw](https://github.com/moeru-ai/openclaw), and Pi seamlessly.
 
 ### What's So Special?
 
@@ -59,6 +59,7 @@ Unlike simple wrappers, Codex Mate acts as a **Local Agent Bridge**:
 - **Claude Provider Bridge**: Connect Claude Code to OpenAI Chat Completions-compatible providers and Ollama through the built-in local Claude-compatible proxy.
 - **OpenCode Provider Control**: Manage OpenCode provider/model selection with a CodexMate-owned provider store under `~/.codexmate`, projecting only the active provider into native OpenCode config to avoid polluting or deleting user-owned settings.
 - **KiloCode Config Bridge**: Configure KiloCode providers from the CLI or Web UI, writing to `~/.config/kilo/kilo.jsonc` while preserving stored API keys.
+- **Pi Provider Config**: Manage Pi providers from the Web UI with lossless round-trip writes to `~/.pi/agent/models.json`, auto-fetched remote model lists, and one-click default provider/model switching via `~/.pi/agent/settings.json`.
 - **Provider Health Cleanup**: Probe local Codex and Claude provider routes, surface failed configs in one modal, and bulk-clean selected broken providers without touching healthy or protected entries.
 - **Skills Marketplace**: A local-first market to share and import skills between different agent apps.
 - **Prompt File Editor**: Unified editor for global and project-level `CLAUDE.md` and `AGENTS.md` with auto-detection of project paths, plus a shared preset pool for reusable prompts.
@@ -70,7 +71,7 @@ Unlike simple wrappers, Codex Mate acts as a **Local Agent Bridge**:
 
 | Feature | Status | Description |
 | --- | --- | --- |
-| **Provider Management** | ✅ | Switch providers/models for Codex, Claude, OpenCode, KiloCode, and OpenClaw |
+| **Provider Management** | ✅ | Switch providers/models for Codex, Claude, OpenCode, KiloCode, OpenClaw, and Pi |
 | **Live Agent Sync** | ✅ | Real-time monitoring of Codex/Claude config & status |
 | **Session Browser** | ✅ | Search, preview, filter, and export sessions across Codex, Claude Code, Gemini CLI, CodeBuddy Code, and Pi |
 | **Usage Analytics** | ✅ | Visualize message trends and top projects |
@@ -80,6 +81,7 @@ Unlike simple wrappers, Codex Mate acts as a **Local Agent Bridge**:
 | **Claude Provider Bridge** | ✅ | Connect Claude Code to OpenAI Chat Completions-compatible providers and Ollama via the built-in Claude-compatible proxy |
 | **OpenCode Provider Store** | ✅ | Keep multiple OpenCode providers in `~/.codexmate` while projecting only the selected provider to native OpenCode config |
 | **KiloCode Config Bridge** | ✅ | Configure KiloCode through `codexmate kilo config` or the Web UI, writing provider URL/model/API key data to `~/.config/kilo/kilo.jsonc` |
+| **Pi Provider Config** | ✅ | Manage Pi providers in the Web UI writing to `~/.pi/agent/models.json` (unknown fields preserved) and switch the default provider/model in `~/.pi/agent/settings.json` |
 | **Provider Health Check** | ✅ | Probe local Codex/Claude provider routes, highlight failed configs, and bulk-remove selected broken providers safely |
 | **Prompt Templates** | ✅ | Reusable prompt plugins with variables |
 | **Prompt File Editor** | ✅ | Edit global and project-level CLAUDE.md / AGENTS.md with auto-detect, path switching, and a shared preset pool. Applying a preset only updates the editor; save manually to write the file. |
@@ -133,7 +135,7 @@ curl -fsSL https://raw.githubusercontent.com/SakuraByteCore/codexmate/main/scrip
 - **KiloCode**: `npm install -g @kilocode/cli` (`kilo` / `kilocode`)
 - **OpenCode**: install from the [official OpenCode docs](https://opencode.ai/)
 - **OpenClaw**: see the [OpenClaw repository](https://github.com/moeru-ai/openclaw)
-- **Pi**: sessions are discovered from `~/.pi/agent/sessions`
+- **Pi**: sessions are discovered from `~/.pi/agent/sessions`; provider config lives in `~/.pi/agent/models.json` and the default provider/model in `~/.pi/agent/settings.json`
 
 ---
 

package/README.vi.md

@@ -41,7 +41,7 @@
 
 Bạn có bao giờ cảm thấy rối khi phải quản lý nhiều AI agent cục bộ? Mỗi tool lại có định dạng cấu hình, nơi lưu phiên và thư mục skill riêng.
 
-**Codex Mate** cung cấp một trung tâm điều khiển thống nhất để giải quyết sự hỗn loạn đó. Đây là CLI + Web UI ưu tiên cục bộ, được thiết kế để quản lý [Codex](https://github.com/openai/codex), [Claude Code](https://github.com/anthropic-ai/claude-code), [OpenCode](https://opencode.ai/), KiloCode và [OpenClaw](https://github.com/moeru-ai/openclaw) một cách liền mạch.
+**Codex Mate** cung cấp một trung tâm điều khiển thống nhất để giải quyết sự hỗn loạn đó. Đây là CLI + Web UI ưu tiên cục bộ, được thiết kế để quản lý [Codex](https://github.com/openai/codex), [Claude Code](https://github.com/anthropic-ai/claude-code), [OpenCode](https://opencode.ai/), KiloCode, [OpenClaw](https://github.com/moeru-ai/openclaw) và Pi một cách liền mạch.
 
 ### Điểm nổi bật
 
@@ -58,7 +58,8 @@ Khác với các wrapper đơn giản, Codex Mate hoạt động như một **Ag
 
 | Tính năng | Trạng thái | Mô tả |
 | --- | --- | --- |
-| **Quản lý Provider** | ✅ | Chuyển đổi provider/model cho Codex, Claude, OpenCode, KiloCode và OpenClaw |
+| **Quản lý Provider** | ✅ | Chuyển đổi provider/model cho Codex, Claude, OpenCode, KiloCode, OpenClaw và Pi |
+| **Cấu hình Provider Pi** | ✅ | Quản lý provider Pi trong Web UI, ghi vào `~/.pi/agent/models.json` (giữ nguyên các trường không nhận dạng được) và chuyển đổi provider/model mặc định trong `~/.pi/agent/settings.json` |
 | **Đồng bộ Agent trực tiếp** | ✅ | Giám sát cấu hình & trạng thái Codex/Claude theo thời gian thực |
 | **Trình duyệt phiên** | ✅ | Liệt kê, xem trước, lọc và xuất phiên (Codex/Claude/Gemini/CodeBuddy/Pi) |
 | **Phân tích sử dụng** | ✅ | Trực quan hóa xu hướng tin nhắn và dự án nổi bật |
@@ -118,7 +119,7 @@ curl -fsSL https://raw.githubusercontent.com/SakuraByteCore/codexmate/main/scrip
 - **KiloCode**: `npm install -g @kilocode/cli` (`kilo` / `kilocode`)
 - **OpenCode**: xem [tài liệu chính thức OpenCode](https://opencode.ai/)
 - **OpenClaw**: xem [kho lưu trữ OpenClaw](https://github.com/moeru-ai/openclaw)
-- **Pi**: phiên làm việc được phát hiện từ `~/.pi/agent/sessions`
+- **Pi**: phiên làm việc được phát hiện từ `~/.pi/agent/sessions`; cấu hình provider nằm ở `~/.pi/agent/models.json`, provider/model mặc định nằm ở `~/.pi/agent/settings.json`
 
 ---
 

package/README.zh.md

@@ -48,7 +48,7 @@
 
 你是否曾因管理多个本地 AI 智能体而感到疲惫？每个工具都有自己的配置格式、会话存储和 Skills 目录。
 
-**Codex Mate** 提供了一个统一的控制平面，让混乱重归有序。这是一个本地优先的 CLI + Web UI，旨在无缝管理 [Codex](https://github.com/openai/codex)、[Claude Code](https://github.com/anthropic-ai/claude-code)、[OpenCode](https://opencode.ai/)、KiloCode 和 [OpenClaw](https://github.com/moeru-ai/openclaw)。
+**Codex Mate** 提供了一个统一的控制平面，让混乱重归有序。这是一个本地优先的 CLI + Web UI，旨在无缝管理 [Codex](https://github.com/openai/codex)、[Claude Code](https://github.com/anthropic-ai/claude-code)、[OpenCode](https://opencode.ai/)、KiloCode、[OpenClaw](https://github.com/moeru-ai/openclaw) 与 Pi。
 
 ### 有什么独特之处？
 
@@ -57,6 +57,7 @@
 - **OpenAI 兼容桥接**：通过归一化 Responses API，让 Codex 能够与任何支持 OpenAI 格式的 UI 配合使用；内建 Codex 转换会补齐并规范化 `User-Agent`、`Version`、`OpenAI-Beta`、`Originator` 等 Codex 指纹，对上游伪装为官方 Codex CLI 请求。
 - **Claude Provider 桥接**：通过内建本地 Claude 兼容代理，让 Claude Code 接入 OpenAI Chat Completions 兼容 provider 与 Ollama。
 - **OpenCode Provider 控制**：在 `~/.codexmate` 下维护 CodexMate 自有的 OpenCode 多 provider 存储，只将当前选中的 provider 投影到 OpenCode 原生配置，避免污染或误删用户已有配置。
+- **Pi Provider 配置**：在 Web UI 中管理 Pi 供应商，写入 `~/.pi/agent/models.json` 时无损保留未知字段，支持自动拉取远端模型列表，并可一键切换 `~/.pi/agent/settings.json` 中的默认供应商/模型。
 - **Provider 健康清理**：探测本地 Codex 与 Claude provider 路由，在同一个弹窗里集中展示失败配置，并批量清理已选坏配置，不影响正常或受保护项。
 - **Skills 市场**：本地优先的市场，支持在不同的智能体应用之间共享和导入 Skills。
 - **提示词文件编辑器**：统一编辑全局和项目级 `CLAUDE.md` 与 `AGENTS.md`，支持项目路径自动检测，并提供通用预设池复用 prompt。
@@ -68,7 +69,7 @@
 
 | 特性 | 状态 | 描述 |
 | --- | --- | --- |
-| **Provider 管理** | ✅ | 切换 Codex、Claude、OpenCode、KiloCode 和 OpenClaw 的 provider/model |
+| **Provider 管理** | ✅ | 切换 Codex、Claude、OpenCode、KiloCode、OpenClaw 与 Pi 的 provider/model |
 | **状态实时同步** | ✅ | 实时感知 Codex/Claude 的配置与运行状态变更 |
 | **会话浏览器** | ✅ | 跨 Codex、Claude Code、Gemini CLI、CodeBuddy Code 与 Pi 的本地会话进行检索、预览、筛选与导出 |
 | **Usage 统计** | ✅ | 可视化消息趋势与热门项目统计 |
@@ -77,6 +78,7 @@
 | **OpenAI 桥接** | ✅ | 将 Codex Responses API 转换为标准 OpenAI 格式，并在内建转换中附加/规范化 Codex 指纹 |
 | **Claude Provider 桥接** | ✅ | 通过内建 Claude 兼容代理，让 Claude Code 接入 OpenAI Chat Completions 兼容 provider 与 Ollama |
 | **OpenCode Provider 存储** | ✅ | 在 `~/.codexmate` 中保留多个 OpenCode provider，只将当前选中的 provider 投影到 OpenCode 原生配置 |
+| **Pi Provider 配置** | ✅ | 在 Web UI 中管理 Pi 供应商，写入 `~/.pi/agent/models.json`（未知字段无损保留），并切换 `~/.pi/agent/settings.json` 中的默认供应商/模型 |
 | **Provider 健康检查** | ✅ | 探测本地 Codex/Claude provider 路由，标记失败配置，并安全批量移除已选坏配置 |
 | **提示词模板** | ✅ | 支持变量的可复用提示词插件 |
 | **提示词文件编辑器** | ✅ | 编辑全局和项目级 CLAUDE.md / AGENTS.md，支持自动检测、路径切换与通用预设池。应用预设只更新编辑器，需手动保存才会写入文件。 |
@@ -130,7 +132,7 @@ curl -fsSL https://raw.githubusercontent.com/SakuraByteCore/codexmate/main/scrip
 - **KiloCode**: `npm install -g @kilocode/cli`（`kilo` / `kilocode`）
 - **OpenCode**: 参照 [OpenCode 官方文档](https://opencode.ai/) 安装
 - **OpenClaw**: 参见 [OpenClaw 仓库](https://github.com/moeru-ai/openclaw)
-- **Pi**: 会话从 `~/.pi/agent/sessions` 自动发现
+- **Pi**: 会话从 `~/.pi/agent/sessions` 自动发现；供应商配置位于 `~/.pi/agent/models.json`，默认供应商/模型位于 `~/.pi/agent/settings.json`
 
 ---
 

package/cli.js

@@ -891,8 +891,8 @@ function isPlainObject(value) {
     return !!value && typeof value === 'object' && !Array.isArray(value);
 }
 
-const TOOL_CONFIG_PERMISSION_TARGETS = new Set(['codex', 'claude', 'opencode', 'kilocode', 'openclaw']);
-const TOOL_CONFIG_PERMISSION_DEFAULTS = Object.freeze({ codex: false, claude: false, opencode: false, kilocode: false, openclaw: false });
+const TOOL_CONFIG_PERMISSION_TARGETS = new Set(['codex', 'claude', 'opencode', 'kilocode', 'openclaw', 'pi']);
+const TOOL_CONFIG_PERMISSION_DEFAULTS = Object.freeze({ codex: false, claude: false, opencode: false, kilocode: false, openclaw: false, pi: false });
 let toolConfigWriteGuardDepth = 0;
 
 function enterToolConfigWriteGuard() {
@@ -921,7 +921,8 @@ function normalizeToolConfigPermissions(value) {
         claude: source.claude === true,
         opencode: source.opencode === true,
         kilocode: source.kilocode === true,
-        openclaw: source.openclaw === true
+        openclaw: source.openclaw === true,
+        pi: source.pi === true
     };
 }
 
@@ -979,7 +980,7 @@ function normalizeMainTabPreference(value) {
 
 function normalizeConfigModePreference(value) {
     const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
-    return ['codex', 'claude', 'openclaw', 'opencode', 'kilocode'].includes(normalized) ? normalized : 'codex';
+    return ['codex', 'claude', 'openclaw', 'opencode', 'kilocode', 'pi'].includes(normalized) ? normalized : 'codex';
 }
 
 function normalizeUsageTimeRangePreference(value) {
@@ -1203,9 +1204,123 @@ function getApiToolConfigWriteTarget(action) {
     if (opencodeWriteActions.has(name)) return 'opencode';
     if (kilocodeWriteActions.has(name)) return 'kilocode';
     if (openclawWriteActions.has(name)) return 'openclaw';
+    const piWriteActions = new Set([
+        'write-pi-models',
+        'write-pi-settings'
+    ]);
+    if (piWriteActions.has(name)) return 'pi';
     return '';
 }
 
+function getPiAgentDir() {
+    const homeDir = (typeof os.homedir === 'function' ? os.homedir() : null) || process.env.HOME || process.env.USERPROFILE || '';
+    return path.join(homeDir, '.pi', 'agent');
+}
+
+function readPiModels(params = {}) {
+    try {
+        const dir = getPiAgentDir();
+        const filePath = path.join(dir, 'models.json');
+        if (!fs.existsSync(filePath)) {
+            return { providers: {} };
+        }
+        const raw = fs.readFileSync(filePath, 'utf-8');
+        const data = JSON.parse(raw);
+        const providers = (data && typeof data === 'object' && data.providers && typeof data.providers === 'object')
+            ? data.providers
+            : {};
+        return { providers };
+    } catch (e) {
+        return { error: e && e.message ? e.message : '读取 Pi models.json 失败' };
+    }
+}
+
+function writePiModels(params = {}) {
+    const providers = params && typeof params.providers === 'object' ? params.providers : null;
+    if (providers === null) {
+        return { error: 'providers 不能为空' };
+    }
+    try {
+        const dir = getPiAgentDir();
+        fs.mkdirSync(dir, { recursive: true });
+        const filePath = path.join(dir, 'models.json');
+        let existing = {};
+        if (fs.existsSync(filePath)) {
+            try {
+                existing = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+            } catch (_) {
+                existing = {};
+            }
+        }
+        existing.providers = providers;
+        fs.writeFileSync(filePath, JSON.stringify(existing, null, 2), 'utf-8');
+        return { success: true };
+    } catch (e) {
+        return { error: e && e.message ? e.message : '写入 Pi models.json 失败' };
+    }
+}
+
+async function fetchPiRemoteModels(params = {}) {
+    const baseUrl = typeof params.baseUrl === 'string' ? params.baseUrl.trim() : '';
+    const apiKey = typeof params.apiKey === 'string' ? params.apiKey.trim() : '';
+    if (!baseUrl || !isValidHttpUrl(baseUrl)) {
+        return { error: 'baseUrl 无效', models: [] };
+    }
+    try {
+        const result = await fetchModelsFromBaseUrl(baseUrl, apiKey);
+        const models = result && Array.isArray(result.models)
+            ? [...new Set(result.models.filter((id) => typeof id === 'string' && id !== ''))].sort()
+            : [];
+        if (models.length > 0) return { models };
+        return { error: (result && result.error) || '未获取到可用模型', models: [] };
+    } catch (e) {
+        return { error: e && e.message ? e.message : '请求失败', models: [] };
+    }
+}
+
+function readPiSettings(params = {}) {
+    try {
+        const dir = getPiAgentDir();
+        const filePath = path.join(dir, 'settings.json');
+        if (!fs.existsSync(filePath)) {
+            return { settings: {} };
+        }
+        const raw = fs.readFileSync(filePath, 'utf-8');
+        const data = JSON.parse(raw);
+        return { settings: data || {} };
+    } catch (e) {
+        return { error: e && e.message ? e.message : '读取 Pi settings.json 失败' };
+    }
+}
+
+function writePiSettings(params = {}) {
+    const updates = {};
+    if (typeof (params && params.defaultProvider) === 'string') updates.defaultProvider = params.defaultProvider;
+    if (typeof (params && params.defaultModel) === 'string') updates.defaultModel = params.defaultModel;
+    if (Object.keys(updates).length === 0) {
+        return { error: '缺少可写入的设置项' };
+    }
+    try {
+        const dir = getPiAgentDir();
+        fs.mkdirSync(dir, { recursive: true });
+        const filePath = path.join(dir, 'settings.json');
+        let existing = {};
+        if (fs.existsSync(filePath)) {
+            try {
+                existing = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+            } catch (_) {
+                existing = {};
+            }
+            if (!existing || typeof existing !== 'object' || Array.isArray(existing)) existing = {};
+        }
+        const updated = { ...existing, ...updates };
+        fs.writeFileSync(filePath, JSON.stringify(updated, null, 2), 'utf-8');
+        return { success: true, settings: updated };
+    } catch (e) {
+        return { error: e && e.message ? e.message : '写入 Pi settings.json 失败' };
+    }
+}
+
 function setToolConfigPermission(params = {}) {
     const target = normalizeToolConfigTarget(params && params.target);
     if (!target) return { error: '未知配置对象' };
@@ -13173,6 +13288,26 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
                             };
                             break;
                         }
+                        case 'read-pi-models': {
+                            result = readPiModels(params || {});
+                            break;
+                        }
+                        case 'write-pi-models': {
+                            result = writePiModels(params || {});
+                            break;
+                        }
+                        case 'read-pi-settings': {
+                            result = readPiSettings(params || {});
+                            break;
+                        }
+                        case 'write-pi-settings': {
+                            result = writePiSettings(params || {});
+                            break;
+                        }
+                        case 'fetch-pi-remote-models': {
+                            result = await fetchPiRemoteModels(params || {});
+                            break;
+                        }
                         case 'install-status':
                             result = buildInstallStatusReport();
                             break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexmate",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Codex/Claude Code/OpenClaw 配置、会话与任务编排 CLI + Web 工具",
   "main": "cli.js",
   "bin": {

package/web-ui/app.js

@@ -26,6 +26,35 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const { createApp } = Vue;
+    const showFatalErrorOverlay = (label, message, stack, extra) => {
+        try {
+            const target = document.querySelector('#app') || document.body;
+            const pre = document.createElement('pre');
+            pre.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:#900;color:#fff;padding:12px;white-space:pre-wrap;font-size:12px;z-index:9999;';
+            pre.textContent = '[' + label + '] ' + (message || '') + '\n' + (stack || '') + (extra ? '\n' + extra : '');
+            target.appendChild(pre);
+        } catch (_) {}
+    };
+    window.addEventListener('error', (event) => {
+        console.error('[window error]', event.message, event.filename, event.lineno, event.colno, event.error);
+        try {
+            const target = document.querySelector('#app') || document.body;
+            const pre = document.createElement('pre');
+            pre.style.cssText = 'position:fixed;bottom:60px;left:0;right:0;background:#b00;color:#fff;padding:12px;white-space:pre-wrap;font-size:12px;z-index:9999;';
+            pre.textContent = '[window error] ' + (event.message || '') + '\n' + ((event.error && event.error.stack) || (event.filename + ':' + event.lineno + ':' + event.colno));
+            target.appendChild(pre);
+        } catch (_) {}
+    });
+    window.addEventListener('unhandledrejection', (event) => {
+        console.error('[unhandled rejection]', event.reason);
+        try {
+            const target = document.querySelector('#app') || document.body;
+            const pre = document.createElement('pre');
+            pre.style.cssText = 'position:fixed;bottom:120px;left:0;right:0;background:#b00;color:#fff;padding:12px;white-space:pre-wrap;font-size:12px;z-index:9999;';
+            pre.textContent = '[unhandled rejection] ' + (event.reason && event.reason.message ? event.reason.message : String(event.reason)) + '\n' + ((event.reason && event.reason.stack) || '');
+            target.appendChild(pre);
+        } catch (_) {}
+    });
 
     const appOptions = {
         data() {
@@ -96,6 +125,29 @@ document.addEventListener('DOMContentLoaded', () => {
                 showCodexBridgePoolModal: false,
                 showClaudeBridgePoolModal: false,
                 showWebhookModal: false,
+                piProviders: {},
+                piProviderIds: [],
+                editingPiProvider: null,
+                addingPiProviderId: '',
+                addingPiProviderName: '',
+                addingPiProviderBaseUrl: '',
+                addingPiProviderApi: 'openai-completions',
+                addingPiProviderApiKey: '',
+                addingPiProviderModel: '',
+                addingPiRemoteModels: [],
+                addingPiRemoteLoading: false,
+                addingPiRemoteError: '',
+                addingPiRemoteDebounce: null,
+                showAddPiProviderModal: false,
+                piProviderLoading: false,
+                piSaving: false,
+                piRemoteModels: [],
+                piRemoteModelsLoading: false,
+                piRemoteModelError: '',
+                piModelSearch: '',
+                piActiveProvider: '',
+                piActiveModel: '',
+                piShowKey: false,
                 // Plugins
                 pluginsActiveId: 'prompt-templates',
                 pluginsLoading: false,
@@ -137,7 +189,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 configTemplateDiffFingerprint: '',
                 _configTemplateDiffPreviewRequestToken: null,
                 configTemplateDiffConfirmEnabled: true,
-                configModeVisibility: { codex: true, claude: true, openclaw: true, opencode: true, kilocode: true },
+                configModeVisibility: { codex: true, claude: true, openclaw: true, opencode: true, kilocode: true, pi: true },
                 codexApplying: false,
                 _pendingCodexApplyOptions: null,
                 agentsContent: '',
@@ -433,8 +485,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 providerCacheError: '',
                 providerCacheRequestSeq: 0,
                 settingsTab: 'general',
-                toolConfigPermissions: { codex: false, claude: false, opencode: false, kilocode: false, openclaw: false },
-                toolConfigPermissionSaving: { codex: false, claude: false, opencode: false, kilocode: false, openclaw: false },
+                toolConfigPermissions: { codex: false, claude: false, opencode: false, kilocode: false, openclaw: false, pi: false },
+                toolConfigPermissionSaving: { codex: false, claude: false, opencode: false, kilocode: false, openclaw: false, pi: false },
                 sessionTrashEnabled: true,
                 sessionTrashItems: [],
                 sessionTrashVisibleCount: SESSION_TRASH_PAGE_SIZE,
@@ -535,7 +587,11 @@ document.addEventListener('DOMContentLoaded', () => {
                         return true;
                     }
                 })();
-                void this.loadWebUiPreferences({ applyNavigation: applyPreferenceNavigation });
+                this.loadWebUiPreferences({ applyNavigation: applyPreferenceNavigation }).then(() => {
+                    if (this.mainTab === 'prompts' && typeof this.loadPromptsTabContent === 'function') {
+                        this.loadPromptsTabContent();
+                    }
+                });
             }
             if (typeof this.t === 'function') {
                 this.confirmDialogConfirmText = this.t('confirm.ok');
@@ -734,14 +790,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     return;
                 }
                 if (newTab === 'prompts') {
-                    if (this.promptsSubTab === 'claude-project' && !this.projectPathOptions.length && !this.projectPathOptionsLoading && typeof this.loadProjectPathOptions === 'function') {
-                        this.loadProjectPathOptions();
-                    }
-                    if (this.promptsSubTab === 'system') {
-                        if (typeof this.loadSystemPrompt === 'function') this.loadSystemPrompt();
-                    } else if (typeof this.loadPromptsContent === 'function') {
-                        this.loadPromptsContent();
-                    }
+                    if (typeof this.loadPromptsTabContent === 'function') this.loadPromptsTabContent();
                 }
             },
             promptsSubTab(newVal) {
@@ -753,11 +802,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     return;
                 }
                 if (this.mainTab === 'prompts') {
-                    if (this.promptsSubTab === 'system') {
-                        if (typeof this.loadSystemPrompt === 'function') this.loadSystemPrompt();
-                    } else if (typeof this.loadPromptsContent === 'function') {
-                        this.loadPromptsContent();
-                    }
+                    if (typeof this.loadPromptsTabContent === 'function') this.loadPromptsTabContent();
                 }
             },
             projectClaudeMdPath(newPath) {
@@ -777,8 +822,19 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         },
 
+        watch: {
+            configMode(newMode) {
+                if (newMode === 'pi' && typeof this.loadPiSources === 'function') {
+                    this.loadPiSources();
+                }
+            }
+        },
+
         computed: createAppComputed(),
-        methods: createAppMethods()
+        methods: {
+            ...createAppMethods(),
+            ...(typeof createPiConfigMethods === 'function' ? createPiConfigMethods({ api }) : {})
+        }
     };
 
     if (typeof window.__CODEXMATE_WEB_UI_RENDER__ === 'function') {
@@ -786,6 +842,19 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const app = createApp(appOptions);
+    app.config.errorHandler = (err, vm, info) => {
+        console.error('[Vue error handler]', err, info);
+        if (err && err.stack) console.error(err.stack);
+        showFatalErrorOverlay('Vue error', err && err.message ? err.message : String(err), err && err.stack ? err.stack : '', info || '');
+    };
 
-    app.mount('#app');
+    try {
+        app.mount('#app');
+    } catch (error) {
+        console.error('Failed to mount Web UI:', error);
+        const fallback = document.querySelector('#app');
+        if (fallback) {
+            fallback.innerHTML = '<pre style="color:red;white-space:pre-wrap;">Failed to mount Web UI\n' + (error && error.stack ? error.stack : String(error)) + '</pre>';
+        }
+    }
 });

package/web-ui/index.html

@@ -18,6 +18,7 @@
     <!-- @include ./partials/index/panel-config-openclaw.html -->
     <!-- @include ./partials/index/panel-config-opencode.html -->
     <!-- @include ./partials/index/panel-config-kilocode.html -->
+    <!-- @include ./partials/index/panel-config-pi.html -->
     <!-- @include ./partials/index/panel-sessions.html -->
     <!-- @include ./partials/index/panel-usage.html -->
     <!-- @include ./partials/index/panel-docs.html -->
@@ -34,6 +35,6 @@
     <!-- @include ./partials/index/modal-skills.html -->
     <!-- @include ./partials/index/modal-health-check.html -->
     <!-- @include ./partials/index/modal-confirm-toast.html -->
-    <script type="module" src="/web-ui/app.js"></script>
+    <script type="module" src="/web-ui/app.js?cb=3"></script>
 </body>
 </html>

package/web-ui/modules/app.methods.agents.mjs

@@ -980,17 +980,28 @@ export function createAgentsMethods(options = {}) {
                 this.loadProjectPathOptions();
             }
             if (this.promptsSubTab === normalized) {
-                if (normalized === 'system') this.loadSystemPrompt();
-                else this.loadPromptsContent();
+                if (typeof this.loadPromptsTabContent === 'function') this.loadPromptsTabContent();
                 return;
             }
+            this.__skipNextPromptsSubTabLoad = true;
             this.promptsSubTab = normalized;
-            if (normalized === 'system') this.loadSystemPrompt();
+            if (typeof this.loadPromptsTabContent === 'function') this.loadPromptsTabContent();
             this.$nextTick(() => {
                 document.querySelector('.main-panel')?.scrollTo({ top: 0, left: 0, behavior: 'auto' });
             });
         },
 
+        loadPromptsTabContent() {
+            if (this.promptsSubTab === 'system') {
+                if (typeof this.loadSystemPrompt === 'function') this.loadSystemPrompt();
+            } else {
+                if (this.promptsSubTab === 'claude-project' && !this.projectPathOptions.length && !this.projectPathOptionsLoading && typeof this.loadProjectPathOptions === 'function') {
+                    this.loadProjectPathOptions();
+                }
+                if (typeof this.loadPromptsContent === 'function') this.loadPromptsContent();
+            }
+        },
+
         async loadPromptsContent() {
             const requestToken = issueLatestRequestToken(this, '_agentsOpenRequestToken');
             this.agentsLoading = true;

package/web-ui/modules/app.methods.index.mjs

@@ -22,6 +22,7 @@ import { createOpenclawEditingMethods } from './app.methods.openclaw-editing.mjs
 import { createOpenclawPersistMethods } from './app.methods.openclaw-persist.mjs';
 import { createOpencodeConfigMethods } from './app.methods.opencode-config.mjs';
 import { createKilocodeConfigMethods } from './app.methods.kilocode-config.mjs';
+import { createPiConfigMethods } from './app.methods.pi-config.mjs';
 import { createProvidersMethods } from './app.methods.providers.mjs';
 import { createProviderCacheMethods } from './app.methods.provider-cache.mjs';
 import { createRuntimeMethods } from './app.methods.runtime.mjs';
@@ -102,6 +103,7 @@ export function createAppMethods() {
             modelCatalog: OPENCODE_MODEL_CATALOG
         }),
         ...createKilocodeConfigMethods({ api }),
+        ...createPiConfigMethods({ api }),
         ...createInstallMethods({ api }),
         ...createRuntimeMethods({ api })
     };

package/web-ui/modules/app.methods.navigation.mjs

@@ -147,7 +147,7 @@
             }
             const resolvedMode = configModeSet.has(normalizedMode) ? normalizedMode : 'codex';
             if (typeof this.isConfigModeVisible === 'function' && !this.isConfigModeVisible(resolvedMode)) {
-                const fallback = ['codex', 'claude', 'openclaw', 'opencode', 'kilocode'].find(m => this.isConfigModeVisible(m)) || 'codex';
+                const fallback = ['codex', 'claude', 'openclaw', 'opencode', 'kilocode', 'pi'].find(m => this.isConfigModeVisible(m)) || 'codex';
                 this.configMode = configModeSet.has(fallback) ? fallback : 'codex';
             } else {
                 this.configMode = resolvedMode;