jinzd-ai-cli 0.1.84 → 0.1.85

package/CLAUDE.md

@@ -352,6 +352,50 @@ 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
@@ -1932,8 +1976,8 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 
 | # | 功能 | 状态 | 说明 |
 |---|------|------|------|
-| P1-1 | **侧边栏增强** | [x] | Session 列表已实现；待增加 Skills + MCP 工具列表 + 搜索 |
-| P1-2 | **Diff 渲染增强** | [ ] | confirm 对话框中的 diff 从纯文本升级为语法高亮的 diff 视图（绿/红增删行） |
+| 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` 文件下载 |

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

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

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

@@ -14,7 +14,7 @@ import { platform } from "os";
 import chalk from "chalk";
 
 // src/core/constants.ts
-var VERSION = "0.1.84";
+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-L2PQET5S.js";
+} from "./chunk-QHZGVP5X.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-YHB3S2KS.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-V2VE7ST5.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-XWSMOXVH.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-V2VE7ST5.js → run-tests-IFXCV4UW.js}

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

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

@@ -23,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-L2PQET5S.js";
+} from "./chunk-QHZGVP5X.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -36,7 +36,7 @@ import {
   SKILLS_DIR_NAME,
   VERSION,
   __require
-} from "./chunk-YHB3S2KS.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;

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.84",
+  "version": "0.1.85",
   "description": "Cross-platform REPL-style AI CLI with multi-provider support",
   "type": "module",
   "main": "./dist/index.js",