jinzd-ai-cli 0.1.84 → 0.1.86

package/CLAUDE.md

@@ -352,6 +352,103 @@ 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.85 → v0.1.86）
+
+### Web UI P1 增强（续）：命令扩展 + 键盘快捷键 + 导出 + 断线重连
+
+**P1-3：更多命令支持**
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/protocol.ts` | 修改 | 新增 `S2C_ExportData`（format/filename/content）+ `S2C_MemoryContent` 消息类型 |
+| `src/web/session-handler.ts` | 修改 | 新增 `/export [md\|json]` + `/memory [show\|add\|clear]` 命令 + 3 个实现方法 |
+| `src/web/client/app.js` | 修改 | `handleExportData()` 浏览器 Blob 下载 + `handleMemoryContent()` 卡片渲染 |
+
+- `/export md`：格式化 session 消息为 Markdown（标题/元数据/User+Assistant 分段），触发浏览器下载
+- `/export json`：导出结构化 JSON（title/provider/model/messages），触发浏览器下载
+- `/memory`：读取 `~/.aicli/memory.md` 显示为带样式卡片
+- `/memory add <text>`：追加带时间戳的条目
+- `/memory clear`：清空记忆文件
+
+**P1-4：键盘快捷键**
+
+| 快捷键 | 功能 |
+|--------|------|
+| `Esc` | 停止 AI 生成（发送 abort） |
+| `Ctrl+L` | 清屏（保留欢迎消息） |
+| `Ctrl+K` | 清空输入框 |
+| `↑` / `↓` | 历史消息回溯（最多 50 条，支持命令和聊天输入） |
+
+- 输入历史在 `sendMessage()` 中记录，去重 + 50 条上限
+- ↑ 键首次按下保存当前草稿，↓ 键到底恢复草稿
+- 单行输入时 ↑ 触发历史，多行输入时保持原有光标移动
+
+**P1-5：Markdown 导出**（合并到 P1-3 的 `/export md` 命令实现）
+
+**P1-6：断线重连恢复**
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/client/app.js` | 修改 | 30s 心跳 ping + 指数退避重连（1s→2s→4s→10s）+ 重连后 UI 状态恢复 |
+| `src/web/server.ts` | 修改 | WebSocket message handler 中识别 `ping` 并回复 `pong` |
+
+- 心跳：客户端每 30s 发送 `{ type: 'ping' }`，服务器回复 `{ type: 'pong' }`
+- 断线检测：连接关闭后显示 "Disconnected — reconnecting..."
+- 指数退避：重连间隔 1s→2s→4s→8s→10s（上限），连接成功后重置
+- 状态恢复：重连成功后自动请求 session list + tools list，processing 中断时显示提示
+
+### 版本与收尾
+- `src/core/constants.ts`：VERSION `0.1.85` → `0.1.86`
+- `package.json`：version 同步
+- 构建验证：`npm run build` 零错误（ESM + CJS 双产物）
+- Web UI 预览测试：/help 新命令显示、/memory 卡片渲染、/export 空 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,12 +2029,12 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 
 | # | 功能 | 状态 | 说明 |
 |---|------|------|------|
-| P1-1 | **侧边栏增强** | [x] | Session 列表已实现；待增加 Skills + MCP 工具列表 + 搜索 |
-| P1-2 | **Diff 渲染增强** | [ ] | confirm 对话框中的 diff 从纯文本升级为语法高亮的 diff 视图（绿/红增删行） |
-| 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 |
+| P1-1 | **侧边栏增强** | [x] | Sessions/Tools 双 Tab + Built-in Tools（危险级别圆点）+ MCP Servers（连接状态+工具数）+ Skills 列表 + 搜索过滤 |
+| P1-2 | **Diff 渲染增强** | [x] | confirm 对话框 diff 语法高亮（绿色增行、红色删行、紫色 hunk header、灰色上下文） |
+| P1-3 | **更多命令支持** | [x] | `/export [md\|json]`（浏览器下载）、`/memory [show\|add\|clear]`、`/tools`、`/cost`、`/session` |
+| P1-4 | **键盘快捷键** | [x] | `Ctrl+L` 清屏、`Ctrl+K` 清空输入、`Esc` 停止生成、`↑↓` 历史消息回溯（50 条） |
+| P1-5 | **Markdown 导出** | [x] | `/export md` 一键导出对话为 `.md` 文件浏览器下载、`/export json` 导出 JSON |
+| P1-6 | **断线重连恢复** | [x] | 30s 心跳 ping/pong、指数退避重连（1s→2s→4s→10s）、重连后状态恢复提示 |
 
 ### P2 — 差异化功能（Web 独有优势）
 

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

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

package/dist/{chunk-YHB3S2KS.js → chunk-SMLN357K.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.86";
 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-PCT4OP6Q.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-YHB3S2KS.js";
+} from "./chunk-SMLN357K.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-Y2PN5FYJ.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-BFNZIL3O.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-Y2PN5FYJ.js}

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

package/dist/{server-XWSMOXVH.js → server-BFNZIL3O.js}

@@ -23,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-L2PQET5S.js";
+} from "./chunk-PCT4OP6Q.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -36,7 +36,7 @@ import {
   SKILLS_DIR_NAME,
   VERSION,
   __require
-} from "./chunk-YHB3S2KS.js";
+} from "./chunk-SMLN357K.js";
 
 // src/web/server.ts
 import express from "express";
@@ -390,7 +390,7 @@ function loadMemoryContent(configDir) {
 }
 
 // src/web/session-handler.ts
-import { existsSync as existsSync3, readFileSync as readFileSync3 } from "fs";
+import { existsSync as existsSync3, readFileSync as readFileSync3, appendFileSync, writeFileSync, mkdirSync } from "fs";
 import { join as join2, resolve } from "path";
 var MAX_TOOL_ROUNDS = 25;
 var FREE_ROUND_TOOLS = /* @__PURE__ */ new Set(["write_todos"]);
@@ -961,6 +961,11 @@ 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",
+            "  /export [md|json]    \u2014 Export conversation as Markdown or JSON",
+            "  /memory              \u2014 Show persistent memory contents",
+            "  /memory add <text>   \u2014 Add entry to persistent memory",
+            "  /memory clear        \u2014 Clear persistent memory",
             "  /help                \u2014 Show this help message",
             "",
             "\u{1F4A1} Tips:",
@@ -968,7 +973,9 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
             "  \u2022 Drag & drop or Ctrl+V to paste images",
             "  \u2022 Type @ to reference files from your project",
             "  \u2022 Use Shift+Enter for multi-line input",
-            "  \u2022 During AI processing, type to send corrections"
+            "  \u2022 During AI processing, type to send corrections",
+            "  \u2022 Ctrl+L to clear screen, Esc to stop generation",
+            "  \u2022 \u2191/\u2193 arrow keys to recall previous messages"
           ].join("\n")
         });
         break;
@@ -985,6 +992,25 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
         });
         break;
       }
+      case "tools":
+        this.sendToolsList();
+        break;
+      case "export": {
+        const format = args[0] === "json" ? "json" : "md";
+        this.exportConversation(format);
+        break;
+      }
+      case "memory": {
+        const sub = args[0];
+        if (sub === "add" && args.length > 1) {
+          this.memoryAdd(args.slice(1).join(" "));
+        } else if (sub === "clear") {
+          this.memoryClear();
+        } else {
+          this.memoryShow();
+        }
+        break;
+      }
       default:
         this.send({ type: "error", message: `Unknown command: /${name}. Type /help for available commands.` });
     }
@@ -1036,6 +1062,122 @@ 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
+    });
+  }
+  exportConversation(format) {
+    const session = this.sessions.current;
+    if (!session || session.messages.length === 0) {
+      this.send({ type: "info", message: "No messages to export." });
+      return;
+    }
+    const title = session.title ?? "Untitled";
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    if (format === "json") {
+      const data = {
+        title,
+        provider: this.currentProvider,
+        model: this.currentModel,
+        exported: (/* @__PURE__ */ new Date()).toISOString(),
+        messages: session.messages.map((m) => ({
+          role: m.role,
+          content: getContentText(m.content),
+          timestamp: m.timestamp?.toISOString()
+        }))
+      };
+      this.send({
+        type: "export_data",
+        format: "json",
+        filename: `aicli-${timestamp}.json`,
+        content: JSON.stringify(data, null, 2)
+      });
+    } else {
+      const lines = [`# ${title}`, "", `> Exported: ${(/* @__PURE__ */ new Date()).toLocaleString()} | Provider: ${this.currentProvider} | Model: ${this.currentModel}`, ""];
+      for (const m of session.messages) {
+        const text = getContentText(m.content);
+        if (m.role === "user") {
+          lines.push(`## \u{1F9D1} User`, "", text, "");
+        } else if (m.role === "assistant") {
+          lines.push(`## \u{1F916} Assistant`, "", text, "");
+        }
+      }
+      this.send({
+        type: "export_data",
+        format: "md",
+        filename: `aicli-${timestamp}.md`,
+        content: lines.join("\n")
+      });
+    }
+  }
+  memoryShow() {
+    const configDir = this.config.getConfigDir();
+    const memPath = join2(configDir, MEMORY_FILE_NAME);
+    let content = "";
+    try {
+      if (existsSync3(memPath)) {
+        content = readFileSync3(memPath, "utf-8");
+      }
+    } catch {
+    }
+    this.send({
+      type: "memory_content",
+      content: content || "(empty \u2014 no persistent memory entries yet)",
+      filePath: memPath
+    });
+  }
+  memoryAdd(text) {
+    const configDir = this.config.getConfigDir();
+    const memPath = join2(configDir, MEMORY_FILE_NAME);
+    try {
+      mkdirSync(configDir, { recursive: true });
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace("T", " ");
+      appendFileSync(memPath, `
+- [${timestamp}] ${text}
+`, "utf-8");
+      this.send({ type: "info", message: `\u{1F4DD} Memory entry added: "${text}"` });
+    } catch (err) {
+      this.send({ type: "error", message: `Failed to write memory: ${err.message}` });
+    }
+  }
+  memoryClear() {
+    const configDir = this.config.getConfigDir();
+    const memPath = join2(configDir, MEMORY_FILE_NAME);
+    try {
+      writeFileSync(memPath, "", "utf-8");
+      this.send({ type: "info", message: "\u{1F5D1}\uFE0F Persistent memory cleared." });
+    } catch (err) {
+      this.send({ type: "error", message: `Failed to clear memory: ${err.message}` });
+    }
+  }
   sendSessionMessages() {
     const session = this.sessions.current;
     if (!session) return;
@@ -1293,7 +1435,15 @@ async function startWebServer(options = {}) {
     activeHandler = handler;
     ws.on("message", async (data) => {
       try {
-        await handler.handleMessage(data.toString());
+        const raw = data.toString();
+        const parsed = JSON.parse(raw);
+        if (parsed.type === "ping") {
+          if (ws.readyState === ws.OPEN) {
+            ws.send(JSON.stringify({ type: "pong" }));
+          }
+          return;
+        }
+        await handler.handleMessage(raw);
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
         console.error(`   Error: ${message}`);

package/dist/web/client/app.js

@@ -14,6 +14,9 @@ let currentThinkingEl = null;
 let currentThinkingContent = '';
 let providers = [];
 let pendingImages = []; // { name, data (base64), mime }
+let inputHistory = []; // Previous user inputs for ↑/↓ navigation
+let historyIndex = -1; // -1 = not browsing history
+let savedInputDraft = ''; // Saved current input when entering history mode
 
 // ── DOM refs ───────────────────────────────────────────────────────
 
@@ -34,6 +37,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 ────────────────────────────────────────────
 
@@ -51,22 +59,41 @@ marked.setOptions({
 
 // ── WebSocket ──────────────────────────────────────────────────────
 
+let heartbeatTimer = null;
+let reconnectDelay = 1000; // Start at 1s, exponential backoff
+
 function connect() {
   const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
   ws = new WebSocket(`${protocol}//${location.host}`);
 
   ws.onopen = () => {
     connected = true;
+    reconnectDelay = 1000; // Reset backoff on success
     connectionStatus.textContent = '🟢 Connected';
     connectionStatus.className = 'status-connected';
     requestSessionList();
+    // Start heartbeat ping every 30s
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = setInterval(() => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'ping' }));
+      }
+    }, 30000);
+    // If we had a session & were processing, reset UI state
+    if (processing) {
+      setProcessing(false);
+      addInfoMessage('⚡ Reconnected — previous generation may have been interrupted.');
+    }
   };
 
   ws.onclose = () => {
     connected = false;
-    connectionStatus.textContent = '🔴 Disconnected';
+    clearInterval(heartbeatTimer);
+    connectionStatus.textContent = '🔴 Disconnected — reconnecting...';
     connectionStatus.className = 'status-disconnected';
-    setTimeout(connect, 3000);
+    // Exponential backoff: 1s, 2s, 4s, max 10s
+    setTimeout(connect, reconnectDelay);
+    reconnectDelay = Math.min(reconnectDelay * 2, 10000);
   };
 
   ws.onerror = () => {
@@ -76,7 +103,9 @@ function connect() {
 
   ws.onmessage = (event) => {
     try {
-      handleServerMessage(JSON.parse(event.data));
+      const msg = JSON.parse(event.data);
+      if (msg.type === 'pong') return; // Heartbeat response, ignore
+      handleServerMessage(msg);
     } catch (e) {
       console.error('Failed to parse message:', e);
     }
@@ -107,6 +136,9 @@ 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 'export_data':     handleExportData(msg); break;
+    case 'memory_content':  handleMemoryContent(msg); break;
     case 'info':            addInfoMessage(msg.message); break;
     case 'error':           addErrorMessage(msg.message); setProcessing(false); break;
     case 'round_progress':  break;
@@ -205,7 +237,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>
@@ -513,6 +545,12 @@ async function sendMessage() {
     const args = parts.slice(1);
     send({ type: 'command', name, args });
     addInfoMessage(`/${text.slice(1)}`);
+    // Track command in history
+    if (inputHistory[inputHistory.length - 1] !== text) {
+      inputHistory.push(text);
+      if (inputHistory.length > 50) inputHistory.shift();
+    }
+    historyIndex = -1;
     userInput.value = '';
     userInput.style.height = 'auto';
     return;
@@ -539,6 +577,14 @@ async function sendMessage() {
     }
   }
 
+  // Track input history
+  if (inputHistory[inputHistory.length - 1] !== text) {
+    inputHistory.push(text);
+    if (inputHistory.length > 50) inputHistory.shift();
+  }
+  historyIndex = -1;
+  savedInputDraft = '';
+
   addUserMessage(text, pendingImages);
   const msg = { type: 'chat', content: resolvedText };
   if (pendingImages.length > 0) {
@@ -591,8 +637,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 +710,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 ───────────────────────────────────
@@ -806,6 +976,72 @@ userInput.addEventListener('keydown', (e) => {
     }
   }
 
+  // ── Keyboard shortcuts ───────────────────────────────────────
+
+  // Escape: stop generation
+  if (e.key === 'Escape') {
+    if (processing) {
+      e.preventDefault();
+      send({ type: 'abort' });
+      return;
+    }
+  }
+
+  // Ctrl+L: clear screen (keep welcome)
+  if (e.key === 'l' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    const welcome = messagesEl.querySelector('.chat');
+    messagesEl.innerHTML = '';
+    if (welcome) messagesEl.appendChild(welcome);
+    return;
+  }
+
+  // Ctrl+K: clear input
+  if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    userInput.value = '';
+    userInput.style.height = 'auto';
+    return;
+  }
+
+  // ↑/↓: input history navigation (only when input is empty or browsing history, single-line)
+  if (e.key === 'ArrowUp' && !e.shiftKey) {
+    const isAtStart = userInput.selectionStart === 0 && userInput.selectionEnd === 0;
+    const isSingleLine = !userInput.value.includes('\n');
+    if ((isSingleLine || userInput.value === '') && (isAtStart || userInput.value === '')) {
+      if (inputHistory.length > 0) {
+        e.preventDefault();
+        if (historyIndex === -1) {
+          savedInputDraft = userInput.value;
+          historyIndex = inputHistory.length - 1;
+        } else if (historyIndex > 0) {
+          historyIndex--;
+        }
+        userInput.value = inputHistory[historyIndex] || '';
+        userInput.style.height = 'auto';
+        userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
+        return;
+      }
+    }
+  }
+
+  if (e.key === 'ArrowDown' && !e.shiftKey) {
+    if (historyIndex >= 0) {
+      e.preventDefault();
+      if (historyIndex < inputHistory.length - 1) {
+        historyIndex++;
+        userInput.value = inputHistory[historyIndex] || '';
+      } else {
+        historyIndex = -1;
+        userInput.value = savedInputDraft;
+      }
+      userInput.style.height = 'auto';
+      userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
+      return;
+    }
+  }
+
+  // Enter: send message
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
     sendMessage();
@@ -885,6 +1121,34 @@ userInput.addEventListener('paste', (e) => {
   }
 });
 
+// ── Export & Memory handlers ────────────────────────────────────────
+
+function handleExportData(msg) {
+  // Trigger browser download
+  const blob = new Blob([msg.content], { type: msg.format === 'json' ? 'application/json' : 'text/markdown' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = msg.filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  addInfoMessage(`📥 Exported: ${msg.filename}`);
+}
+
+function handleMemoryContent(msg) {
+  const el = document.createElement('div');
+  el.className = 'msg-assistant my-2';
+  el.innerHTML = `
+    <div class="text-xs opacity-50 mb-1">📝 Persistent Memory</div>
+    <pre class="text-sm whitespace-pre-wrap opacity-80">${escapeHtml(msg.content)}</pre>
+    <div class="text-xs opacity-30 mt-1">${escapeHtml(msg.filePath)}</div>
+  `;
+  messagesEl.appendChild(el);
+  scrollToBottom();
+}
+
 // ── Initialize ─────────────────────────────────────────────────────
 
 // Restore theme

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