jinzd-ai-cli 0.1.83 → 0.1.85

package/CLAUDE.md

@@ -2,7 +2,7 @@
 
 ## 项目简介
 
-一个跨平台的 REPL 风格 AI 对话工具，支持多个主流 AI 提供商（OpenAI、Claude、Gemini、DeepSeek、智谱清言、Kimi），
+一个跨平台的 REPL 风格 AI 对话工具，支持多个主流 AI 提供商（OpenAI、Claude、Gemini、DeepSeek、智谱清言、Kimi、OpenRouter），
 带有 **AI 工具调用（Agentic）** 能力，支持执行 bash 命令、读写文件、运行交互式程序、流式生成大文档。
 代理支持（`proxy` 配置字段 + 环境变量），Gemini 完整支持（2.5 Pro/Flash，array items schema 修复）。
 **MCP 协议支持**：可接入外部 MCP 服务器，自动发现并注册工具，无缝融入 agentic 循环。
@@ -32,6 +32,7 @@ src/
 │   ├── claude.ts                   # Anthropic SDK provider
 │   ├── gemini.ts                   # Google Generative AI provider（role: assistant → model）
 │   ├── openai.ts                   # OpenAI provider（GPT-5.4/5/4.1/4o/o3/o4-mini）
+│   ├── openrouter.ts               # OpenRouter provider（多模型聚合，16 个热门模型）
 │   ├── deepseek.ts / zhipu.ts / kimi.ts  # 继承 OpenAICompatibleProvider；deepseek/kimi 覆写 chatWithTools 实现虚假声明检测
 ├── config/
 │   ├── schema.ts                   # Zod schema（含 timeouts / customBaseUrls / defaultModels）
@@ -165,6 +166,7 @@ AICLI_API_KEY_GEMINI     Gemini API Key
 AICLI_API_KEY_DEEPSEEK   DeepSeek API Key
 AICLI_API_KEY_ZHIPU      智谱 API Key
 AICLI_API_KEY_KIMI       Kimi API Key
+AICLI_API_KEY_OPENROUTER OpenRouter API Key
 AICLI_API_KEY_GOOGLESEARCH  Google Custom Search API Key
 AICLI_GOOGLE_CX          Google Search Engine ID (cx)
 AICLI_PROVIDER           默认 Provider ID
@@ -350,6 +352,88 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 - [x] **web_fetch DNS 解析时 SSRF 防护**（v0.1.25）：新增 `resolveAndCheck()` 函数，用 `dns.promises.lookup()` 预解析域名，检查结果 IP 是否为私有地址。初始 URL 和 redirect 目标均校验。
 - [ ] **`persistentCwd` 全局状态**：bash 工具的当前工作目录是模块级全局变量，多 session 并发时可能串扰。现阶段单 session REPL 无影响，GUI 多会话扩展时需重构为 per-session 状态。
 
+## 本轮开发完成记录（2026-03-16，v0.1.84 → v0.1.85）
+
+### Web UI P1 增强：侧边栏 Tools Tab + Diff 语法高亮
+
+**P1-1：侧边栏增强 — Sessions/Tools 双 Tab**
+
+将原有单一 session 列表侧边栏升级为双 Tab 布局：
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/protocol.ts` | 修改 | 新增 `S2C_ToolsList` 消息类型（builtinTools/mcpServers/skills 三段数据） |
+| `src/web/session-handler.ts` | 修改 | 新增 `/tools` 命令 + `sendToolsList()` 方法（遍历 ToolRegistry + MCP + Skills） |
+| `src/web/client/index.html` | 修改 | 侧边栏重构为 Tabs（📋 Sessions / 🔧 Tools）+ 搜索框 |
+| `src/web/client/style.css` | 修改 | Tab 激活样式 + 工具列表样式（section 标题/工具项/彩色圆点/MCP 折叠） |
+| `src/web/client/app.js` | 修改 | Tab 切换逻辑 + `renderToolsList()` + `renderFilteredTools()` 搜索过滤 |
+
+- **Built-in Tools**：显示所有内置工具，带危险级别彩色圆点（蓝=safe, 黄=write, 红=destructive）
+- **MCP Servers**：显示连接状态（绿=connected）+ 工具数量 badge，可折叠展开查看工具列表
+- **Skills**：显示所有可用技能，绿色=active，灰色=inactive
+- **搜索过滤**：实时过滤工具名和描述，空 section 自动隐藏
+- **Session 搜索**：Sessions tab 新增搜索框，按标题过滤
+
+**P1-2：Diff 渲染增强 — 语法高亮**
+
+工具确认对话框中的 diff 预览从纯文本升级为语法高亮：
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/client/style.css` | 修改 | 新增 `.diff-add`/`.diff-del`/`.diff-hunk`/`.diff-ctx` 四种行样式 |
+| `src/web/client/app.js` | 修改 | 新增 `renderDiffHtml()` 函数，按行首字符（+/-/@@）分类着色 |
+
+- `+` 增加行：绿色文字 + 绿色半透明背景
+- `-` 删除行：红色文字 + 红色半透明背景
+- `@@` Hunk header：主题色（紫色），加粗
+- 其他上下文行：降低不透明度
+
+### 版本与收尾
+- `src/core/constants.ts`：VERSION `0.1.84` → `0.1.85`
+- `package.json`：version 同步
+- 构建验证：`npm run build` 零错误（ESM + CJS 双产物）
+- Web UI 预览测试：侧边栏 Tab 切换、工具列表渲染、搜索过滤、MCP/Skills 显示 全部通过
+
+---
+
+## 本轮开发完成记录（2026-03-16，v0.1.82 → v0.1.83）
+
+### 新增功能：OpenRouter 内置 Provider
+
+**背景**：OpenRouter 是多模型聚合 API 平台，提供统一的 OpenAI 兼容接口访问数百个模型。用户可通过单个 API Key 使用来自 Anthropic、OpenAI、Google、Meta、DeepSeek、Qwen、Mistral 等厂商的模型。
+
+**实现**：继承 `OpenAICompatibleProvider`，无需覆写任何方法（API 完全兼容）。
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/providers/openrouter.ts` | **新增** | OpenRouterProvider 类，16 个热门模型 |
+| `src/providers/registry.ts` | 修改 | BUILT_IN_PROVIDERS 新增 OpenRouterProvider |
+| `src/config/env-loader.ts` | 修改 | ENV_KEY_MAP 新增 `openrouter → AICLI_API_KEY_OPENROUTER` |
+| `src/repl/setup-wizard.ts` | 修改 | PROVIDERS 列表新增 OpenRouter |
+| `src/core/constants.ts` | 修改 | VERSION 0.1.82 → 0.1.83 |
+| `package.json` | 修改 | version 0.1.82 → 0.1.83 |
+
+**内置模型列表（16 个）**：
+- Anthropic：Claude Opus 4 / Sonnet 4 / Haiku 4
+- OpenAI：GPT-5.4 / GPT-4o / GPT-4o Mini
+- Google：Gemini 2.5 Pro / Flash
+- Meta：Llama 4 Maverick / Scout
+- DeepSeek：V3 0324 / R1
+- Qwen：Qwen3 Coder / Qwen 2.5 72B
+- Mistral：Large / Small 3.1 24B
+
+**Web UI 无需修改**：Web UI 采用动态注册架构，provider 列表通过 WebSocket S2C_Status 从后端 ProviderRegistry 动态获取，自动支持新 Provider。
+
+**同步更新 CLAUDE.md**：项目简介、项目结构、环境变量、Web UI 路线图（P0 全部标记已完成）。
+
+### 版本与收尾
+- `src/core/constants.ts`：VERSION `0.1.82` → `0.1.83`
+- `package.json`：version 同步
+- 构建验证：`npm run build` 零错误（ESM + CJS 双产物）
+- 发布：`npm publish` → `jinzd-ai-cli@0.1.83`
+
+---
+
 ## 本轮开发完成记录（2026-03-10，v0.1.57 → v0.1.58）
 
 ### 代码质量修复：19 个低危问题修复 + 代码重构
@@ -1860,7 +1944,7 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 
 > 目标：将 `aicli web` 从"可用的聊天界面"升级为功能完备、体验出色的 AI 代码助手 Web 端。
 
-### 当前 Web UI 已实现功能（v0.1.76 基线）
+### 当前 Web UI 已实现功能（v0.1.82 基线）
 
 - 实时流式聊天（WebSocket）
 - 完整 Agentic 循环（25 轮工具调用 + 流式工具调用）
@@ -1871,27 +1955,30 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 - Plan Mode 只读规划
 - Markdown 渲染 + 代码高亮（marked.js + highlight.js）
 - 代码块复制按钮
-- 图片上传协议支持（C2S `images` 字段）
 - 用户纠偏（interjection）— 处理中可发送纠正指令
-- /clear /compact /think /plan /status /provider /model 命令
+- Session 持久化与管理（侧边栏列表、新建/切换/恢复/删除会话）
+- `@文件` 引用（`@` 触发文件选择下拉、目录遍历、服务端文件读取 API）
+- 图片拖拽/粘贴上传（D&D + Ctrl+V + 预览缩略图 + 10MB 限制）
+- 工具卡片折叠（safe 默认折叠、write/destructive 展开、可手动 toggle）
+- /clear /compact /think /plan /status /provider /model /cost /session /help 命令
 
-### P0 — 最痛问题（当前就会遇到）
+### P0 — 最痛问题（全部已完成 ✅）
 
 | # | 功能 | 状态 | 说明 |
 |---|------|------|------|
-| P0-1 | **Session 持久化与管理** | [ ] | 刷新页面不丢对话；会话列表侧边栏；新建/切换/恢复/删除会话；历史搜索 |
-| P0-2 | **`@文件` 引用** | [ ] | CLI 支持 `@file.ts` 读文件注入上下文，Web 需要：`@` 触发文件选择 + 服务端文件读取 API |
-| P0-3 | **图片拖拽/粘贴上传** | [ ] | 协议层已有 `images` 字段，缺少客户端 UI：拖拽到输入区 + `Ctrl+V` 粘贴截图 + 预览缩略图 |
-| P0-4 | **工具卡片折叠** | [ ] | 多轮工具调用后聊天区被淹没；safe 级别默认折叠、write/destructive 展开；可手动 toggle |
-| P0-5 | **`/help` 命令** | [ ] | 显示所有支持的 Web 命令及用法说明；输入不存在的命令给出提示 |
+| P0-1 | **Session 持久化与管理** | [x] | 侧边栏会话列表 + 新建/切换/恢复/删除 + JSON 持久化 |
+| P0-2 | **`@文件` 引用** | [x] | `@` 触发文件选择下拉 + `/api/file-content` 读取 + 路径穿越安全检查 |
+| P0-3 | **图片拖拽/粘贴上传** | [x] | D&D + Ctrl+V 粘贴 + 预览缩略图 + base64 传输 + 10MB 限制 |
+| P0-4 | **工具卡片折叠** | [x] | safe 默认折叠、write/destructive 展开、手动 toggle、结果 badge |
+| P0-5 | **`/help` 命令** | [x] | 显示所有支持的 Web 命令及用法说明 |
 
 ### P1 — 明显提升体验
 
 | # | 功能 | 状态 | 说明 |
 |---|------|------|------|
-| P1-1 | **侧边栏布局** | [ ] | 左侧：Session 列表 + Skills + MCP 工具列表 + 搜索；右侧：聊天区；响应式 mobile 折叠 |
-| P1-2 | **Diff 渲染增强** | [ ] | confirm 对话框中的 diff 从纯文本升级为语法高亮的 diff 视图（绿/红增删行） |
-| P1-3 | **更多命令支持** | [ ] | `/cost`（token 用量统计）、`/session list\|load`、`/undo`、`/export [md\|json]`、`/tools`（工具列表） |
+| P1-1 | **侧边栏增强** | [x] | Sessions/Tools 双 Tab + Built-in Tools（危险级别圆点）+ MCP Servers（连接状态+工具数）+ Skills 列表 + 搜索过滤 |
+| P1-2 | **Diff 渲染增强** | [x] | confirm 对话框 diff 语法高亮（绿色增行、红色删行、紫色 hunk header、灰色上下文） |
+| P1-3 | **更多命令支持** | [~] | `/cost`、`/session list\|load\|delete` 已实现；待增加 `/undo`、`/export [md\|json]`、`/tools`、`/memory` |
 | P1-4 | **键盘快捷键** | [ ] | `Ctrl+L` 清屏、`Ctrl+K` 清空输入、`Esc` 停止生成、`↑` 历史消息回溯 |
 | P1-5 | **Markdown 导出** | [ ] | 一键导出当前对话为 `.md` 文件下载 |
 | P1-6 | **断线重连恢复** | [ ] | WebSocket 重连后恢复 session 状态（当前重连=全丢）；心跳 ping/pong |

package/dist/{chunk-F24DAC6L.js → chunk-QHZGVP5X.js}

@@ -16,7 +16,7 @@ import {
   SUBAGENT_MAX_ROUNDS_LIMIT,
   VERSION,
   runTestsTool
-} from "./chunk-VLVLY5YV.js";
+} from "./chunk-VR7VECPG.js";
 
 // src/config/config-manager.ts
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";

package/dist/{chunk-VLVLY5YV.js → chunk-VR7VECPG.js}

@@ -14,7 +14,7 @@ import { platform } from "os";
 import chalk from "chalk";
 
 // src/core/constants.ts
-var VERSION = "0.1.83";
+var VERSION = "0.1.85";
 var APP_NAME = "ai-cli";
 var CONFIG_DIR_NAME = ".aicli";
 var CONFIG_FILE_NAME = "config.json";

package/dist/index.js

@@ -35,7 +35,7 @@ import {
   theme,
   truncateOutput,
   undoStack
-} from "./chunk-F24DAC6L.js";
+} from "./chunk-QHZGVP5X.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-VLVLY5YV.js";
+} from "./chunk-VR7VECPG.js";
 
 // src/index.ts
 import { program } from "commander";
@@ -1904,7 +1904,7 @@ ${hint}` : "")
       description: "Run project tests and show structured report",
       usage: "/test [command|filter]",
       async execute(args, _ctx) {
-        const { executeTests } = await import("./run-tests-QYSZ27IZ.js");
+        const { executeTests } = await import("./run-tests-IFXCV4UW.js");
         const argStr = args.join(" ").trim();
         let testArgs = {};
         if (argStr) {
@@ -5292,7 +5292,7 @@ program.command("web").description("Start Web UI server with browser-based chat
     console.error("Error: Invalid port number. Must be between 1 and 65535.");
     process.exit(1);
   }
-  const { startWebServer } = await import("./server-ZFMNC6PH.js");
+  const { startWebServer } = await import("./server-2LECXHO6.js");
   await startWebServer({ port, host: options.host });
 });
 program.command("sessions").description("List recent conversation sessions").action(async () => {

package/dist/{run-tests-QYSZ27IZ.js → run-tests-IFXCV4UW.js}

@@ -2,7 +2,7 @@
 import {
   executeTests,
   runTestsTool
-} from "./chunk-VLVLY5YV.js";
+} from "./chunk-VR7VECPG.js";
 export {
   executeTests,
   runTestsTool

package/dist/{server-ZFMNC6PH.js → server-2LECXHO6.js}

@@ -23,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-F24DAC6L.js";
+} from "./chunk-QHZGVP5X.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -36,7 +36,7 @@ import {
   SKILLS_DIR_NAME,
   VERSION,
   __require
-} from "./chunk-VLVLY5YV.js";
+} from "./chunk-VR7VECPG.js";
 
 // src/web/server.ts
 import express from "express";
@@ -961,6 +961,7 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
             "  /session delete <id> \u2014 Delete a session",
             "  /status              \u2014 Show session info & token usage",
             "  /cost                \u2014 Show cumulative token usage",
+            "  /tools               \u2014 Show tools, MCP servers & skills in sidebar",
             "  /help                \u2014 Show this help message",
             "",
             "\u{1F4A1} Tips:",
@@ -985,6 +986,9 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
         });
         break;
       }
+      case "tools":
+        this.sendToolsList();
+        break;
       default:
         this.send({ type: "error", message: `Unknown command: /${name}. Type /help for available commands.` });
     }
@@ -1036,6 +1040,38 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
       }))
     });
   }
+  sendToolsList() {
+    const allDefs = this.toolRegistry.getDefinitions();
+    const builtinTools = allDefs.filter((d) => !d.name.startsWith("mcp__")).map((d) => ({
+      name: d.name,
+      description: d.description,
+      dangerLevel: getDangerLevel(d.name, {})
+    }));
+    const mcpServers = [];
+    if (this.mcpManager) {
+      for (const status of this.mcpManager.getStatus()) {
+        const serverTools = allDefs.filter((d) => d.name.startsWith(`mcp__${status.serverId}__`)).map((d) => d.name.replace(`mcp__${status.serverId}__`, ""));
+        mcpServers.push({
+          serverId: status.serverId,
+          serverName: status.serverName,
+          toolCount: status.toolCount,
+          connected: status.connected,
+          tools: serverTools
+        });
+      }
+    }
+    const skills = (this.skillManager?.listSkills() ?? []).map((s) => ({
+      name: s.meta.name,
+      description: s.meta.description,
+      isActive: this.skillManager?.getActive()?.meta.name === s.meta.name
+    }));
+    this.send({
+      type: "tools_list",
+      builtinTools,
+      mcpServers,
+      skills
+    });
+  }
   sendSessionMessages() {
     const session = this.sessions.current;
     if (!session) return;
@@ -1322,7 +1358,7 @@ async function startWebServer(options = {}) {
   process.on("SIGINT", () => {
     console.log("\n   Shutting down...");
     if (activeHandler) activeHandler.onDisconnect();
-    if (mcpManager) mcpManager.disconnectAll();
+    if (mcpManager) mcpManager.closeAll();
     wss.close();
     server.close();
     process.exit(0);

package/dist/web/client/app.js

@@ -34,6 +34,11 @@ const connectionStatus = document.getElementById('connection-status');
 const sidebar = document.getElementById('sidebar');
 const sessionListEl = document.getElementById('session-list');
 const btnNewSession = document.getElementById('btn-new-session');
+const toolsListEl = document.getElementById('tools-list');
+const sessionSearchInput = document.getElementById('session-search');
+const toolsSearchInput = document.getElementById('tools-search');
+let cachedSessions = [];
+let cachedToolsData = null;
 
 // ── Configure marked.js ────────────────────────────────────────────
 
@@ -107,6 +112,7 @@ function handleServerMessage(msg) {
     case 'status':          handleStatus(msg); break;
     case 'session_list':    renderSessionList(msg.sessions); break;
     case 'session_messages':renderSessionMessages(msg.messages); break;
+    case 'tools_list':      renderToolsList(msg); switchSidebarTab('tools'); break;
     case 'info':            addInfoMessage(msg.message); break;
     case 'error':           addErrorMessage(msg.message); setProcessing(false); break;
     case 'round_progress':  break;
@@ -205,7 +211,7 @@ function handleConfirmRequest(msg) {
       <span class="badge ${isDestructive ? 'badge-error' : 'badge-warning'} badge-sm">${isDestructive ? '⚠ DESTRUCTIVE' : '✎ Write'}</span>
       <span class="text-sm font-semibold">${escapeHtml(msg.toolName)}</span>
     </div>
-    ${msg.diff ? `<div class="confirm-diff w-full">${escapeHtml(msg.diff)}</div>` : ''}
+    ${msg.diff ? `<div class="confirm-diff w-full">${renderDiffHtml(msg.diff)}</div>` : ''}
     <div class="flex gap-2 mt-2">
       <button class="btn btn-success btn-sm btn-outline" onclick="respondConfirm('${msg.requestId}', true)">✓ Approve</button>
       <button class="btn btn-error btn-sm btn-outline" onclick="respondConfirm('${msg.requestId}', false)">✗ Deny</button>
@@ -591,8 +597,16 @@ modelSelect.addEventListener('change', () => {
 // ── Session management ──────────────────────────────────────────────
 
 function renderSessionList(sessions) {
+  cachedSessions = sessions || [];
+  renderFilteredSessions(sessionSearchInput?.value || '');
+}
+
+function renderFilteredSessions(filter) {
+  const sessions = filter
+    ? cachedSessions.filter(s => (s.title || '').toLowerCase().includes(filter.toLowerCase()))
+    : cachedSessions;
   if (!sessions || sessions.length === 0) {
-    sessionListEl.innerHTML = '<div class="text-xs opacity-40 text-center py-4">No sessions yet</div>';
+    sessionListEl.innerHTML = `<div class="text-xs opacity-40 text-center py-4">${filter ? 'No matches' : 'No sessions yet'}</div>`;
     return;
   }
   sessionListEl.innerHTML = sessions.map(s => {
@@ -656,6 +670,122 @@ btnNewSession.addEventListener('click', () => {
 // Request session list on connect
 function requestSessionList() {
   send({ type: 'command', name: 'session', args: ['list'] });
+  // Also request tools list for sidebar
+  send({ type: 'command', name: 'tools', args: [] });
+}
+
+// Session search filter
+if (sessionSearchInput) {
+  sessionSearchInput.addEventListener('input', () => {
+    renderFilteredSessions(sessionSearchInput.value);
+  });
+}
+
+// ── Sidebar tabs ──────────────────────────────────────────────────────
+
+function switchSidebarTab(tabName) {
+  document.querySelectorAll('.sidebar-tab').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.tab === tabName);
+  });
+  document.querySelectorAll('.sidebar-tab-content').forEach(el => {
+    el.classList.toggle('hidden', el.id !== `tab-${tabName}`);
+  });
+}
+
+document.querySelectorAll('.sidebar-tab').forEach(btn => {
+  btn.addEventListener('click', () => switchSidebarTab(btn.dataset.tab));
+});
+
+// ── Tools list rendering ──────────────────────────────────────────────
+
+function renderToolsList(data) {
+  cachedToolsData = data;
+  renderFilteredTools(toolsSearchInput?.value || '');
+}
+
+function renderFilteredTools(filter) {
+  if (!cachedToolsData) {
+    toolsListEl.innerHTML = '<div class="text-xs opacity-40 text-center py-4">Type /tools to load</div>';
+    return;
+  }
+  const fl = filter.toLowerCase();
+  let html = '';
+
+  // Built-in tools
+  const tools = fl
+    ? cachedToolsData.builtinTools.filter(t => t.name.includes(fl) || t.description.toLowerCase().includes(fl))
+    : cachedToolsData.builtinTools;
+  if (tools.length > 0) {
+    html += '<div class="tools-section-title">Built-in Tools</div>';
+    html += tools.map(t =>
+      `<div class="tool-item" title="${escapeHtml(t.description)}">
+        <span class="tool-dot tool-dot-${t.dangerLevel}"></span>
+        <span class="flex-1 truncate">${escapeHtml(t.name)}</span>
+      </div>`
+    ).join('');
+  }
+
+  // MCP servers
+  const servers = fl
+    ? cachedToolsData.mcpServers.filter(s =>
+        s.serverId.includes(fl) || s.serverName.toLowerCase().includes(fl) ||
+        s.tools.some(t => t.includes(fl)))
+    : cachedToolsData.mcpServers;
+  if (servers.length > 0) {
+    html += '<div class="tools-section-title mt-2">MCP Servers</div>';
+    for (const s of servers) {
+      const dotClass = s.connected ? 'tool-dot-connected' : 'tool-dot-disconnected';
+      html += `<details class="mcp-server-item">
+        <summary class="flex items-center gap-2 cursor-pointer select-none">
+          <span class="tool-dot ${dotClass}"></span>
+          <span class="flex-1 truncate">${escapeHtml(s.serverId)}</span>
+          <span class="text-xs opacity-40">${s.toolCount}</span>
+        </summary>
+        <div class="mcp-server-tools">
+          ${s.tools.map(t => `<div class="py-0.5">${escapeHtml(t)}</div>`).join('')}
+        </div>
+      </details>`;
+    }
+  }
+
+  // Skills
+  const skills = fl
+    ? cachedToolsData.skills.filter(s => s.name.includes(fl) || s.description.toLowerCase().includes(fl))
+    : cachedToolsData.skills;
+  if (skills.length > 0) {
+    html += '<div class="tools-section-title mt-2">Skills</div>';
+    html += skills.map(s =>
+      `<div class="tool-item" title="${escapeHtml(s.description)}">
+        <span class="tool-dot ${s.isActive ? 'tool-dot-active' : 'tool-dot-inactive'}"></span>
+        <span class="flex-1 truncate">${escapeHtml(s.name)}</span>
+        ${s.isActive ? '<span class="badge badge-success badge-xs">active</span>' : ''}
+      </div>`
+    ).join('');
+  }
+
+  if (!html) {
+    html = '<div class="text-xs opacity-40 text-center py-4">No matches</div>';
+  }
+  toolsListEl.innerHTML = html;
+}
+
+// Tools search filter
+if (toolsSearchInput) {
+  toolsSearchInput.addEventListener('input', () => {
+    renderFilteredTools(toolsSearchInput.value);
+  });
+}
+
+// ── Diff syntax highlighting ──────────────────────────────────────────
+
+function renderDiffHtml(diffText) {
+  return diffText.split('\n').map(line => {
+    const escaped = escapeHtml(line);
+    if (line.startsWith('@@')) return `<div class="diff-hunk">${escaped}</div>`;
+    if (line.startsWith('+')) return `<div class="diff-add">${escaped}</div>`;
+    if (line.startsWith('-')) return `<div class="diff-del">${escaped}</div>`;
+    return `<div class="diff-ctx">${escaped}</div>`;
+  }).join('');
 }
 
 // ── @ File reference autocomplete ───────────────────────────────────

package/dist/web/client/index.html

@@ -50,12 +50,29 @@
 
       <!-- Sidebar -->
       <aside id="sidebar" class="sidebar bg-base-200 border-r border-base-content/10 flex flex-col w-64 flex-shrink-0 overflow-hidden transition-all duration-200">
-        <div class="p-3 border-b border-base-content/10 flex items-center justify-between h-12">
-          <span class="font-semibold text-sm leading-none">Sessions</span>
-          <button id="btn-new-session" class="btn btn-xs btn-primary btn-outline leading-none" title="New session">+ New</button>
+        <!-- Sidebar tabs -->
+        <div class="flex border-b border-base-content/10 flex-shrink-0">
+          <button class="sidebar-tab active flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="sessions">📋 Sessions</button>
+          <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="tools">🔧 Tools</button>
         </div>
-        <div id="session-list" class="flex-1 overflow-y-auto p-2 flex flex-col gap-1 text-sm">
-          <div class="text-xs opacity-40 text-center py-4">No sessions yet</div>
+        <!-- Sessions tab -->
+        <div id="tab-sessions" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden">
+          <div class="p-2 border-b border-base-content/10 flex items-center justify-between">
+            <input id="session-search" type="text" class="input input-xs input-bordered flex-1 mr-2" placeholder="Search sessions...">
+            <button id="btn-new-session" class="btn btn-xs btn-primary btn-outline flex-shrink-0" title="New session">+ New</button>
+          </div>
+          <div id="session-list" class="flex-1 overflow-y-auto p-2 flex flex-col gap-1 text-sm">
+            <div class="text-xs opacity-40 text-center py-4">No sessions yet</div>
+          </div>
+        </div>
+        <!-- Tools tab -->
+        <div id="tab-tools" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden hidden">
+          <div class="p-2 border-b border-base-content/10">
+            <input id="tools-search" type="text" class="input input-xs input-bordered w-full" placeholder="Search tools...">
+          </div>
+          <div id="tools-list" class="flex-1 overflow-y-auto p-2 text-sm">
+            <div class="text-xs opacity-40 text-center py-4">Type /tools to load</div>
+          </div>
         </div>
       </aside>
 

package/dist/web/client/style.css

@@ -239,6 +239,20 @@
 .status-connected { color: oklch(var(--su)); }
 .status-disconnected { color: oklch(var(--er)); }
 
+/* ── Sidebar tabs ──────────────────────────────────── */
+.sidebar-tab {
+  cursor: pointer;
+  opacity: 0.5;
+  transition: all 0.15s;
+  border-bottom: 2px solid transparent;
+}
+.sidebar-tab:hover { opacity: 0.8; }
+.sidebar-tab.active {
+  opacity: 1;
+  border-bottom-color: oklch(var(--p));
+  color: oklch(var(--p));
+}
+
 /* ── Sidebar ───────────────────────────────────────── */
 .sidebar .session-item {
   padding: 0.5rem 0.6rem;
@@ -280,6 +294,73 @@
   display: inline-block;
 }
 
+/* ── Diff syntax highlighting ─────────────────────── */
+.confirm-diff .diff-add {
+  color: oklch(var(--su));
+  background: oklch(var(--su) / 0.1);
+}
+.confirm-diff .diff-del {
+  color: oklch(var(--er));
+  background: oklch(var(--er) / 0.1);
+}
+.confirm-diff .diff-hunk {
+  color: oklch(var(--p));
+  opacity: 0.8;
+  font-weight: 600;
+}
+.confirm-diff .diff-ctx {
+  opacity: 0.6;
+}
+
+/* ── Tools sidebar list ──────────────────────────── */
+.tools-section-title {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.4;
+  padding: 0.5rem 0.25rem 0.25rem;
+}
+.tool-item {
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.tool-item:hover {
+  background: oklch(var(--b3));
+}
+.tool-item .tool-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.tool-dot-safe { background: oklch(var(--in)); }
+.tool-dot-write { background: oklch(var(--wa)); }
+.tool-dot-destructive { background: oklch(var(--er)); }
+.tool-dot-connected { background: oklch(var(--su)); }
+.tool-dot-disconnected { background: oklch(var(--er)); }
+.tool-dot-active { background: oklch(var(--su)); }
+.tool-dot-inactive { background: oklch(var(--bc) / 0.3); }
+
+.mcp-server-item {
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.mcp-server-item:hover {
+  background: oklch(var(--b3));
+}
+.mcp-server-tools {
+  padding-left: 1.25rem;
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+
 /* ── Responsive ─────────────────────────────────────── */
 @media (max-width: 768px) {
   .sidebar { width: 0; padding: 0; border: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jinzd-ai-cli",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "description": "Cross-platform REPL-style AI CLI with multi-provider support",
   "type": "module",
   "main": "./dist/index.js",