jinzd-ai-cli 0.1.76 → 0.1.77

package/CLAUDE.md

@@ -1853,3 +1853,64 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 - [ ] **IDE 集成**：VS Code / JetBrains 扩展（架构已准备就绪）
 - [ ] **OAuth/浏览器登录**：无需手动填 API Key
 - [x] **Extended Thinking**（v0.1.38）：Claude 深度推理模式集成，`/think` 运行时切换，thinking 块折叠显示
+
+---
+
+## Web UI 增强路线图（`aicli web`）
+
+> 目标：将 `aicli web` 从"可用的聊天界面"升级为功能完备、体验出色的 AI 代码助手 Web 端。
+
+### 当前 Web UI 已实现功能（v0.1.76 基线）
+
+- 实时流式聊天（WebSocket）
+- 完整 Agentic 循环（25 轮工具调用 + 流式工具调用）
+- Provider/Model 下拉切换
+- DaisyUI 主题切换（8 主题 + localStorage 持久化）
+- 工具确认对话框（单个 confirm + 批量 batch confirm + ask_user）
+- Extended Thinking 折叠显示
+- Plan Mode 只读规划
+- Markdown 渲染 + 代码高亮（marked.js + highlight.js）
+- 代码块复制按钮
+- 图片上传协议支持（C2S `images` 字段）
+- 用户纠偏（interjection）— 处理中可发送纠正指令
+- /clear /compact /think /plan /status /provider /model 命令
+
+### 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 命令及用法说明；输入不存在的命令给出提示 |
+
+### 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-4 | **键盘快捷键** | [ ] | `Ctrl+L` 清屏、`Ctrl+K` 清空输入、`Esc` 停止生成、`↑` 历史消息回溯 |
+| P1-5 | **Markdown 导出** | [ ] | 一键导出当前对话为 `.md` 文件下载 |
+| P1-6 | **断线重连恢复** | [ ] | WebSocket 重连后恢复 session 状态（当前重连=全丢）；心跳 ping/pong |
+
+### P2 — 差异化功能（Web 独有优势）
+
+| # | 功能 | 状态 | 说明 |
+|---|------|------|------|
+| P2-1 | **多 Tab 会话** | [ ] | 浏览器内多 Tab 并行对话（CLI 做不到），类似 ChatGPT |
+| P2-2 | **文件树面板** | [ ] | 浏览项目目录结构，点击文件查看/插入上下文，可视化 `@` 引用 |
+| P2-3 | **工具执行可视化** | [ ] | 进度条、工具调用时间线、Agentic 循环图示 |
+| P2-4 | **Prompt 模板库** | [ ] | 保存常用 prompt 为模板，一键复用（localStorage） |
+| P2-5 | **代码主题联动** | [ ] | highlight.js 主题随 DaisyUI 主题切换（亮色 → github-light，暗色 → github-dark） |
+
+### P3 — 长远方向
+
+| # | 功能 | 状态 | 说明 |
+|---|------|------|------|
+| P3-1 | **多用户支持** | [ ] | 认证 + 多 session handler（当前 `activeHandler` 单连接限制） |
+| P3-2 | **PWA 支持** | [ ] | Service Worker + manifest.json，可安装为桌面应用 |
+| P3-3 | **移动端适配** | [ ] | 响应式布局 + 触摸手势 |
+| P3-4 | **Electron 打包** | [ ] | 复用 Web UI 代码打包为桌面应用 |

package/dist/{chunk-RROTI54R.js → chunk-LKYVW34F.js}

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

package/dist/{chunk-6FYQR6TY.js → chunk-MSQW4A3S.js}

@@ -1,4 +1,10 @@
 #!/usr/bin/env node
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/tools/builtin/run-tests.ts
 import { execSync } from "child_process";
@@ -8,7 +14,7 @@ import { platform } from "os";
 import chalk from "chalk";
 
 // src/core/constants.ts
-var VERSION = "0.1.76";
+var VERSION = "0.1.77";
 var APP_NAME = "ai-cli";
 var CONFIG_DIR_NAME = ".aicli";
 var CONFIG_FILE_NAME = "config.json";
@@ -441,6 +447,7 @@ var runTestsTool = {
 };
 
 export {
+  __require,
   VERSION,
   APP_NAME,
   CONFIG_DIR_NAME,

package/dist/index.js

@@ -35,7 +35,7 @@ import {
   theme,
   truncateOutput,
   undoStack
-} from "./chunk-RROTI54R.js";
+} from "./chunk-LKYVW34F.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-6FYQR6TY.js";
+} from "./chunk-MSQW4A3S.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-W44VYI2J.js");
+        const { executeTests } = await import("./run-tests-S3XK43NB.js");
         const argStr = args.join(" ").trim();
         let testArgs = {};
         if (argStr) {
@@ -5291,7 +5291,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-HINOHGE2.js");
+  const { startWebServer } = await import("./server-WO2OXHJ6.js");
   await startWebServer({ port, host: options.host });
 });
 program.command("sessions").description("List recent conversation sessions").action(async () => {

package/dist/{run-tests-W44VYI2J.js → run-tests-S3XK43NB.js}

@@ -2,7 +2,7 @@
 import {
   executeTests,
   runTestsTool
-} from "./chunk-6FYQR6TY.js";
+} from "./chunk-MSQW4A3S.js";
 export {
   executeTests,
   runTestsTool

package/dist/{server-HINOHGE2.js → server-WO2OXHJ6.js}

@@ -8,6 +8,7 @@ import {
   SkillManager,
   TOOL_CALL_REMINDER,
   ToolRegistry,
+  askUserContext,
   checkPermission,
   detectsHallucinatedFileOp,
   getContentText,
@@ -22,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-RROTI54R.js";
+} from "./chunk-LKYVW34F.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -33,8 +34,9 @@ import {
   PLAN_MODE_READONLY_TOOLS,
   PLAN_MODE_SYSTEM_ADDON,
   SKILLS_DIR_NAME,
-  VERSION
-} from "./chunk-6FYQR6TY.js";
+  VERSION,
+  __require
+} from "./chunk-MSQW4A3S.js";
 
 // src/web/server.ts
 import express from "express";
@@ -445,6 +447,8 @@ var SessionHandler = class {
     const defaultPermission = this.config.get("defaultPermission");
     this.toolExecutor.setConfig({ hookConfig: hooks, permissionRules, defaultPermission });
     this.sendStatus();
+    askUserContext.rl = null;
+    askUserContext.prompting = false;
   }
   send(msg) {
     if (this.ws.readyState === this.ws.OPEN) {
@@ -895,8 +899,94 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
         });
         break;
       }
+      case "session": {
+        const sub = args[0];
+        if (sub === "new") {
+          this.sessions.save();
+          this.sessions.createSession(this.currentProvider, this.currentModel);
+          this.sessionTokenUsage = { inputTokens: 0, outputTokens: 0 };
+          this.send({ type: "info", message: "New session created." });
+          this.sendStatus();
+          this.sendSessionList();
+        } else if (sub === "load" && args[1]) {
+          const targetId = args[1];
+          this.sessions.save();
+          const list = this.sessions.listSessions();
+          const found = list.find((s) => s.id.startsWith(targetId));
+          if (found) {
+            this.sessions.loadSession(found.id);
+            this.sessionTokenUsage = { inputTokens: 0, outputTokens: 0 };
+            if (found.provider) this.currentProvider = found.provider;
+            if (found.model) this.currentModel = found.model;
+            this.send({ type: "info", message: `Loaded session: ${found.id.slice(0, 8)} "${found.title ?? ""}" (${found.messageCount} messages)` });
+            this.sendSessionMessages();
+            this.sendStatus();
+            this.sendSessionList();
+          } else {
+            this.send({ type: "error", message: `Session not found: ${targetId}` });
+          }
+        } else if (sub === "list") {
+          this.sendSessionList();
+        } else if (sub === "delete" && args[1]) {
+          const targetId = args[1];
+          const list = this.sessions.listSessions();
+          const found = list.find((s) => s.id.startsWith(targetId));
+          if (found) {
+            this.sessions.deleteSession(found.id);
+            this.send({ type: "info", message: `Deleted session: ${found.id.slice(0, 8)}` });
+            this.sendSessionList();
+          } else {
+            this.send({ type: "error", message: `Session not found: ${targetId}` });
+          }
+        } else {
+          this.send({ type: "info", message: "Usage: /session new | list | load <id> | delete <id>" });
+        }
+        break;
+      }
+      case "help":
+        this.send({
+          type: "info",
+          message: [
+            "\u{1F4D6} Available Web UI commands:",
+            "",
+            "  /provider <id>       \u2014 Switch AI provider",
+            "  /model <id>          \u2014 Switch model",
+            "  /clear               \u2014 Clear conversation & start new session",
+            "  /compact [hint]      \u2014 Compress conversation history",
+            "  /think [on|off]      \u2014 Toggle extended thinking mode",
+            "  /plan [enter|exit]   \u2014 Toggle read-only planning mode",
+            "  /session new         \u2014 Create a new session",
+            "  /session list        \u2014 List saved sessions",
+            "  /session load <id>   \u2014 Resume a saved session",
+            "  /session delete <id> \u2014 Delete a session",
+            "  /status              \u2014 Show session info & token usage",
+            "  /cost                \u2014 Show cumulative token usage",
+            "  /help                \u2014 Show this help message",
+            "",
+            "\u{1F4A1} Tips:",
+            "  \u2022 Change provider/model with the dropdowns above",
+            "  \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"
+          ].join("\n")
+        });
+        break;
+      case "cost": {
+        const total = this.sessionTokenUsage.inputTokens + this.sessionTokenUsage.outputTokens;
+        this.send({
+          type: "info",
+          message: `\u{1F4CA} Token Usage
+  Provider: ${this.currentProvider}
+  Model: ${this.currentModel}
+  Input:  ${this.sessionTokenUsage.inputTokens.toLocaleString()}
+  Output: ${this.sessionTokenUsage.outputTokens.toLocaleString()}
+  Total:  ${total.toLocaleString()}`
+        });
+        break;
+      }
       default:
-        this.send({ type: "error", message: `Unknown command: /${name}` });
+        this.send({ type: "error", message: `Unknown command: /${name}. Type /help for available commands.` });
     }
   }
   async compactSession(instruction) {
@@ -931,6 +1021,34 @@ Tokens: in=${this.sessionTokenUsage.inputTokens} out=${this.sessionTokenUsage.ou
       this.send({ type: "error", message: `Compact failed: ${err.message}` });
     }
   }
+  sendSessionList() {
+    const list = this.sessions.listSessions();
+    this.send({
+      type: "session_list",
+      sessions: list.slice(0, 50).map((s) => ({
+        id: s.id,
+        title: s.title ?? "",
+        provider: s.provider ?? "",
+        model: s.model ?? "",
+        messageCount: s.messageCount,
+        updated: s.updated instanceof Date ? s.updated.toISOString() : String(s.updated),
+        isCurrent: s.id === this.sessions.current?.id
+      }))
+    });
+  }
+  sendSessionMessages() {
+    const session = this.sessions.current;
+    if (!session) return;
+    const messages = session.messages.map((m) => ({
+      role: m.role,
+      content: getContentText(m.content),
+      timestamp: m.timestamp?.toISOString()
+    }));
+    this.send({
+      type: "session_messages",
+      messages
+    });
+  }
   // ── Helpers ──────────────────────────────────────────────────────
   buildSystemPrompt() {
     const skillContent = this.skillManager?.getActivePromptContent();
@@ -1099,6 +1217,71 @@ async function startWebServer(options = {}) {
       tools: toolRegistry.getDefinitions().length
     });
   });
+  app.get("/api/files", (req, res) => {
+    const { readdirSync, statSync } = __require("fs");
+    const { join: pjoin, relative } = __require("path");
+    const cwd = process.cwd();
+    const prefix = req.query.prefix || "";
+    const targetDir = pjoin(cwd, prefix);
+    if (!resolve2(targetDir).startsWith(resolve2(cwd))) {
+      res.json({ files: [] });
+      return;
+    }
+    try {
+      const SKIP = /* @__PURE__ */ new Set(["node_modules", ".git", "dist", "dist-cjs", "release", "__pycache__", ".next", ".nuxt", "coverage", ".cache"]);
+      const entries = readdirSync(targetDir, { withFileTypes: true });
+      const files = entries.filter((e) => !SKIP.has(e.name) && !e.name.startsWith(".")).slice(0, 50).map((e) => ({
+        name: e.name,
+        path: relative(cwd, pjoin(targetDir, e.name)).replace(/\\/g, "/"),
+        isDir: e.isDirectory()
+      }));
+      res.json({ files });
+    } catch {
+      res.json({ files: [] });
+    }
+  });
+  app.get("/api/sessions", (_req, res) => {
+    try {
+      const list = sessions.listSessions();
+      res.json({
+        sessions: list.slice(0, 50).map((s) => ({
+          id: s.id,
+          title: s.title,
+          provider: s.provider,
+          model: s.model,
+          messageCount: s.messageCount,
+          updated: s.updated
+        }))
+      });
+    } catch {
+      res.json({ sessions: [] });
+    }
+  });
+  app.get("/api/file-content", (req, res) => {
+    const filePath = req.query.path;
+    if (!filePath) {
+      res.json({ error: "Missing path" });
+      return;
+    }
+    const cwd = process.cwd();
+    const fullPath = resolve2(join3(cwd, filePath));
+    if (!fullPath.startsWith(resolve2(cwd))) {
+      res.json({ error: "Access denied" });
+      return;
+    }
+    try {
+      const { statSync, readFileSync: readFileSync5 } = __require("fs");
+      const stat = statSync(fullPath);
+      if (stat.size > 512 * 1024) {
+        res.json({ error: `File too large (${(stat.size / 1024).toFixed(0)} KB, max 512 KB)` });
+        return;
+      }
+      const content = readFileSync5(fullPath, "utf-8");
+      res.json({ content, size: stat.size });
+    } catch (err) {
+      res.json({ error: `Cannot read: ${err.message}` });
+    }
+  });
   let activeHandler = null;
   wss.on("connection", (ws) => {
     if (activeHandler) {

package/dist/web/client/app.js

@@ -13,6 +13,7 @@ let currentAssistantContent = '';
 let currentThinkingEl = null;
 let currentThinkingContent = '';
 let providers = [];
+let pendingImages = []; // { name, data (base64), mime }
 
 // ── DOM refs ───────────────────────────────────────────────────────
 
@@ -30,6 +31,10 @@ const modelSelect = document.getElementById('model-select');
 const statusSession = document.getElementById('status-session');
 const statusTokens = document.getElementById('status-tokens');
 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 sidebarToggle = document.getElementById('sidebar-toggle');
 
 // ── Configure marked.js ────────────────────────────────────────────
 
@@ -55,6 +60,7 @@ function connect() {
     connected = true;
     connectionStatus.textContent = '🟢 Connected';
     connectionStatus.className = 'status-connected';
+    requestSessionList();
   };
 
   ws.onclose = () => {
@@ -100,6 +106,8 @@ function handleServerMessage(msg) {
     case 'thinking_end':    handleThinkingEnd(); break;
     case 'todo_update':     handleTodoUpdate(msg.todos); break;
     case 'status':          handleStatus(msg); break;
+    case 'session_list':    renderSessionList(msg.sessions); break;
+    case 'session_messages':renderSessionMessages(msg.messages); break;
     case 'info':            addInfoMessage(msg.message); break;
     case 'error':           addErrorMessage(msg.message); setProcessing(false); break;
     case 'round_progress':  break;
@@ -146,15 +154,21 @@ function handleToolCallStart(msg) {
   const levelBadge = msg.dangerLevel === 'destructive' ? 'badge-error'
     : msg.dangerLevel === 'write' ? 'badge-warning' : 'badge-info';
 
-  const el = document.createElement('div');
+  // safe tools: collapsed by default; write/destructive: expanded
+  const isCollapsible = msg.dangerLevel === 'safe';
+  const el = document.createElement('details');
   el.id = `tool-${msg.callId}`;
   el.className = `tool-card ${levelBorder} my-1`;
+  if (!isCollapsible) el.open = true;
   el.innerHTML = `
-    <div class="flex items-center gap-2 w-full mb-1">
+    <summary class="flex items-center gap-2 w-full cursor-pointer select-none py-1">
       <span class="badge ${levelBadge} badge-sm gap-1">${levelIcon} ${escapeHtml(msg.toolName)}</span>
       <span class="text-xs opacity-50">${msg.round}/${msg.totalRounds}</span>
+      <span class="tool-result-badge text-xs ml-auto"></span>
+    </summary>
+    <div class="tool-details-body pt-1">
+      <div class="tool-args w-full">${formatToolArgs(msg.args)}</div>
     </div>
-    <div class="tool-args w-full">${formatToolArgs(msg.args)}</div>
   `;
   messagesEl.appendChild(el);
   scrollToBottom();
@@ -163,10 +177,21 @@ function handleToolCallStart(msg) {
 function handleToolCallResult(msg) {
   const el = document.getElementById(`tool-${msg.callId}`);
   if (el) {
-    const resultDiv = document.createElement('div');
-    resultDiv.className = `tool-result-content mt-2 pt-2 border-t border-base-content/10 w-full ${msg.isError ? 'text-error' : 'text-success'}`;
-    resultDiv.textContent = `${msg.isError ? '✗' : '✓'} ${msg.content}`;
-    el.appendChild(resultDiv);
+    // Add result inside the details body
+    const body = el.querySelector('.tool-details-body');
+    if (body) {
+      const resultDiv = document.createElement('div');
+      resultDiv.className = `tool-result-content mt-2 pt-2 border-t border-base-content/10 w-full ${msg.isError ? 'text-error' : 'text-success'}`;
+      const truncated = msg.content.length > 500 ? msg.content.slice(0, 500) + '...' : msg.content;
+      resultDiv.textContent = `${msg.isError ? '✗' : '✓'} ${truncated}`;
+      body.appendChild(resultDiv);
+    }
+    // Update the summary badge (visible when collapsed)
+    const badge = el.querySelector('.tool-result-badge');
+    if (badge) {
+      badge.textContent = msg.isError ? '✗' : '✓';
+      badge.className = `tool-result-badge text-xs ml-auto ${msg.isError ? 'text-error' : 'text-success'}`;
+    }
   }
   scrollToBottom();
 }
@@ -290,6 +315,11 @@ function handleStatus(msg) {
   if (msg.tokenUsage) {
     statusTokens.textContent = `📊 in: ${msg.tokenUsage.inputTokens}  out: ${msg.tokenUsage.outputTokens}`;
   }
+
+  // Update sidebar active state
+  sessionListEl.querySelectorAll('.session-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.sessionId === msg.sessionId);
+  });
 }
 
 // ── Response helpers ───────────────────────────────────────────────
@@ -353,10 +383,16 @@ function createAssistantMessage() {
   return el;
 }
 
-function addUserMessage(text) {
+function addUserMessage(text, images) {
   const wrapper = document.createElement('div');
   wrapper.className = 'chat chat-end';
-  wrapper.innerHTML = `<div class="chat-bubble chat-bubble-user chat-bubble-primary">${escapeHtml(text)}</div>`;
+  let imagesHtml = '';
+  if (images && images.length > 0) {
+    imagesHtml = `<div class="flex gap-1 flex-wrap mb-1">${images.map(img =>
+      `<img src="data:${img.mime};base64,${img.data}" class="rounded max-h-24 max-w-[150px] object-contain" alt="${escapeHtml(img.name)}">`
+    ).join('')}</div>`;
+  }
+  wrapper.innerHTML = `<div class="chat-bubble chat-bubble-user chat-bubble-primary">${imagesHtml}${escapeHtml(text)}</div>`;
   messagesEl.appendChild(wrapper);
   scrollToBottom();
 }
@@ -457,10 +493,12 @@ function updateModelSelect(providerId, currentModelId) {
 
 // ── Event handlers ─────────────────────────────────────────────────
 
-function sendMessage() {
+async function sendMessage() {
   const text = userInput.value.trim();
   if (!text || !connected) return;
 
+  hideFileDropdown();
+
   // Processing state: send as interjection
   if (processing) {
     send({ type: 'interjection', content: text });
@@ -481,8 +519,35 @@ function sendMessage() {
     return;
   }
 
-  addUserMessage(text);
-  send({ type: 'chat', content: text });
+  // Resolve @file references: replace @path with file content
+  let resolvedText = text;
+  const atRefs = text.match(/@([\w./_-]+[\w._-])/g);
+  if (atRefs) {
+    for (const ref of atRefs) {
+      const filePath = ref.slice(1); // remove @
+      try {
+        const resp = await fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`);
+        const data = await resp.json();
+        if (data.content) {
+          resolvedText = resolvedText.replace(ref,
+            `[File: ${filePath}]\n\`\`\`\n${data.content}\n\`\`\``);
+        } else if (data.error) {
+          addInfoMessage(`⚠ ${ref}: ${data.error}`);
+        }
+      } catch {
+        addInfoMessage(`⚠ Failed to read ${ref}`);
+      }
+    }
+  }
+
+  addUserMessage(text, pendingImages);
+  const msg = { type: 'chat', content: resolvedText };
+  if (pendingImages.length > 0) {
+    msg.images = pendingImages.map(img => ({ name: img.name, data: img.data, mime: img.mime }));
+  }
+  send(msg);
+  pendingImages = [];
+  clearImagePreview();
   userInput.value = '';
   userInput.style.height = 'auto';
   setProcessing(true);
@@ -494,17 +559,7 @@ btnStop.addEventListener('click', () => {
   send({ type: 'abort' });
 });
 
-userInput.addEventListener('keydown', (e) => {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
-});
-
-userInput.addEventListener('input', () => {
-  userInput.style.height = 'auto';
-  userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
-});
+// keydown and input handlers are in the @ file reference section above
 
 btnClear.addEventListener('click', () => {
   send({ type: 'command', name: 'clear', args: [] });
@@ -534,6 +589,291 @@ modelSelect.addEventListener('change', () => {
   send({ type: 'command', name: 'model', args: [modelSelect.value] });
 });
 
+// ── Session management ──────────────────────────────────────────────
+
+function renderSessionList(sessions) {
+  if (!sessions || sessions.length === 0) {
+    sessionListEl.innerHTML = '<div class="text-xs opacity-40 text-center py-4">No sessions yet</div>';
+    return;
+  }
+  sessionListEl.innerHTML = sessions.map(s => {
+    const title = s.title || 'Untitled';
+    const date = new Date(s.updated);
+    const timeStr = date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return `<div class="session-item ${s.isCurrent ? 'active' : ''}" data-session-id="${s.id}" title="${escapeHtml(title)}">
+      <div class="session-title">${escapeHtml(title)}</div>
+      <div class="session-meta">${s.messageCount} msgs · ${timeStr}</div>
+    </div>`;
+  }).join('');
+
+  // Click to load session
+  sessionListEl.querySelectorAll('.session-item').forEach(el => {
+    el.addEventListener('click', () => {
+      const id = el.dataset.sessionId;
+      if (!id) return;
+      send({ type: 'command', name: 'session', args: ['load', id] });
+    });
+  });
+}
+
+function renderSessionMessages(messages) {
+  // Clear chat and re-render all messages from loaded session
+  messagesEl.innerHTML = '';
+  for (const msg of messages) {
+    if (msg.role === 'user') {
+      addUserMessage(msg.content);
+    } else if (msg.role === 'assistant') {
+      const el = createAssistantMessage();
+      renderMarkdown(el, msg.content);
+    }
+  }
+  scrollToBottom();
+}
+
+// Sidebar toggle for mobile
+sidebarToggle.addEventListener('click', () => {
+  sidebar.classList.toggle('sidebar-open');
+});
+
+// New session button
+btnNewSession.addEventListener('click', () => {
+  send({ type: 'command', name: 'session', args: ['new'] });
+  // Clear chat area
+  messagesEl.innerHTML = '';
+});
+
+// Request session list on connect
+function requestSessionList() {
+  send({ type: 'command', name: 'session', args: ['list'] });
+}
+
+// ── @ File reference autocomplete ───────────────────────────────────
+
+const fileDropdown = document.createElement('div');
+fileDropdown.id = 'file-dropdown';
+fileDropdown.className = 'hidden absolute bg-base-200 border border-base-content/20 rounded-lg shadow-lg max-h-[200px] overflow-y-auto z-50 w-72 text-sm';
+document.body.appendChild(fileDropdown);
+
+let fileDropdownVisible = false;
+let fileDropdownItems = [];
+let fileDropdownIndex = -1;
+let atStartPos = -1; // cursor position where @ was typed
+
+async function fetchFiles(prefix) {
+  try {
+    const resp = await fetch(`/api/files?prefix=${encodeURIComponent(prefix)}`);
+    const data = await resp.json();
+    return data.files || [];
+  } catch { return []; }
+}
+
+function showFileDropdown(items) {
+  if (items.length === 0) { hideFileDropdown(); return; }
+  fileDropdownItems = items;
+  fileDropdownIndex = 0;
+  fileDropdown.innerHTML = items.map((f, i) =>
+    `<div class="file-dropdown-item px-3 py-1.5 cursor-pointer hover:bg-primary/20 flex items-center gap-2 ${i === 0 ? 'bg-primary/20' : ''}" data-index="${i}">
+      <span>${f.isDir ? '📁' : '📄'}</span>
+      <span>${escapeHtml(f.name)}${f.isDir ? '/' : ''}</span>
+    </div>`
+  ).join('');
+
+  // Position above the textarea
+  const rect = userInput.getBoundingClientRect();
+  fileDropdown.style.left = `${rect.left}px`;
+  fileDropdown.style.bottom = `${window.innerHeight - rect.top + 4}px`;
+  fileDropdown.style.position = 'fixed';
+  fileDropdown.classList.remove('hidden');
+  fileDropdownVisible = true;
+
+  // Click handler
+  fileDropdown.querySelectorAll('.file-dropdown-item').forEach(el => {
+    el.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      selectFileItem(parseInt(el.dataset.index));
+    });
+  });
+}
+
+function hideFileDropdown() {
+  fileDropdown.classList.add('hidden');
+  fileDropdownVisible = false;
+  fileDropdownItems = [];
+  fileDropdownIndex = -1;
+  atStartPos = -1;
+}
+
+function updateFileDropdownHighlight() {
+  fileDropdown.querySelectorAll('.file-dropdown-item').forEach((el, i) => {
+    el.classList.toggle('bg-primary/20', i === fileDropdownIndex);
+  });
+}
+
+function selectFileItem(index) {
+  const item = fileDropdownItems[index];
+  if (!item) return;
+
+  const val = userInput.value;
+  const before = val.slice(0, atStartPos); // text before @
+  const after = val.slice(userInput.selectionStart);
+
+  if (item.isDir) {
+    // Replace @ prefix with directory path, keep dropdown open for subdir
+    userInput.value = before + '@' + item.path + '/' + after;
+    const newPos = before.length + 1 + item.path.length + 1;
+    userInput.setSelectionRange(newPos, newPos);
+    // Fetch sub-directory contents
+    fetchFiles(item.path).then(files => showFileDropdown(files));
+  } else {
+    // Insert file reference and close
+    userInput.value = before + '@' + item.path + ' ' + after;
+    const newPos = before.length + 1 + item.path.length + 1;
+    userInput.setSelectionRange(newPos, newPos);
+    hideFileDropdown();
+  }
+  userInput.focus();
+}
+
+userInput.addEventListener('input', async () => {
+  userInput.style.height = 'auto';
+  userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
+
+  // Check if we're in a @ reference context
+  const pos = userInput.selectionStart;
+  const val = userInput.value;
+
+  // Find the @ that started this reference
+  let atPos = -1;
+  for (let i = pos - 1; i >= 0; i--) {
+    if (val[i] === '@') { atPos = i; break; }
+    if (val[i] === ' ' || val[i] === '\n') break;
+  }
+
+  if (atPos >= 0 && (atPos === 0 || val[atPos - 1] === ' ' || val[atPos - 1] === '\n')) {
+    atStartPos = atPos;
+    const prefix = val.slice(atPos + 1, pos);
+    // Extract directory part for the API
+    const lastSlash = prefix.lastIndexOf('/');
+    const dirPrefix = lastSlash >= 0 ? prefix.slice(0, lastSlash) : '';
+    const nameFilter = lastSlash >= 0 ? prefix.slice(lastSlash + 1) : prefix;
+
+    const files = await fetchFiles(dirPrefix);
+    const filtered = nameFilter
+      ? files.filter(f => f.name.toLowerCase().includes(nameFilter.toLowerCase()))
+      : files;
+    showFileDropdown(filtered);
+  } else if (fileDropdownVisible) {
+    hideFileDropdown();
+  }
+});
+
+userInput.addEventListener('keydown', (e) => {
+  if (fileDropdownVisible) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      fileDropdownIndex = Math.min(fileDropdownIndex + 1, fileDropdownItems.length - 1);
+      updateFileDropdownHighlight();
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      fileDropdownIndex = Math.max(fileDropdownIndex - 1, 0);
+      updateFileDropdownHighlight();
+      return;
+    }
+    if (e.key === 'Tab' || e.key === 'Enter') {
+      if (fileDropdownIndex >= 0) {
+        e.preventDefault();
+        selectFileItem(fileDropdownIndex);
+        return;
+      }
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      hideFileDropdown();
+      return;
+    }
+  }
+
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+});
+
+// ── Image upload (drag & drop + paste) ──────────────────────────────
+
+const imagePreviewArea = document.createElement('div');
+imagePreviewArea.id = 'image-preview';
+imagePreviewArea.className = 'hidden max-w-4xl mx-auto flex gap-2 flex-wrap px-1 py-1';
+// Insert before the input row
+const inputRow = userInput.closest('.flex');
+inputRow.parentElement.insertBefore(imagePreviewArea, inputRow);
+
+function clearImagePreview() {
+  pendingImages = [];
+  imagePreviewArea.innerHTML = '';
+  imagePreviewArea.classList.add('hidden');
+}
+
+function addImageToPreview(file) {
+  if (!file.type.startsWith('image/')) return;
+  if (file.size > 10 * 1024 * 1024) {
+    addErrorMessage(`Image too large (${(file.size / 1024 / 1024).toFixed(1)} MB, max 10 MB): ${file.name}`);
+    return;
+  }
+  const reader = new FileReader();
+  reader.onload = () => {
+    const base64 = reader.result.split(',')[1];
+    pendingImages.push({ name: file.name, data: base64, mime: file.type });
+
+    const thumb = document.createElement('div');
+    thumb.className = 'image-thumb relative';
+    thumb.innerHTML = `
+      <img src="${reader.result}" class="rounded max-h-16 max-w-[100px] object-contain border border-base-content/20" alt="${escapeHtml(file.name)}">
+      <button class="btn btn-xs btn-circle btn-error absolute -top-1 -right-1 opacity-80" title="Remove">✕</button>
+    `;
+    thumb.querySelector('button').onclick = () => {
+      const idx = pendingImages.findIndex(img => img.name === file.name && img.data === base64);
+      if (idx >= 0) pendingImages.splice(idx, 1);
+      thumb.remove();
+      if (pendingImages.length === 0) imagePreviewArea.classList.add('hidden');
+    };
+    imagePreviewArea.appendChild(thumb);
+    imagePreviewArea.classList.remove('hidden');
+  };
+  reader.readAsDataURL(file);
+}
+
+// Drag & drop on chat area
+chatArea.addEventListener('dragover', (e) => {
+  e.preventDefault();
+  chatArea.classList.add('ring-2', 'ring-primary', 'ring-inset');
+});
+chatArea.addEventListener('dragleave', () => {
+  chatArea.classList.remove('ring-2', 'ring-primary', 'ring-inset');
+});
+chatArea.addEventListener('drop', (e) => {
+  e.preventDefault();
+  chatArea.classList.remove('ring-2', 'ring-primary', 'ring-inset');
+  for (const file of e.dataTransfer.files) {
+    addImageToPreview(file);
+  }
+});
+
+// Ctrl+V paste image
+userInput.addEventListener('paste', (e) => {
+  const items = e.clipboardData?.items;
+  if (!items) return;
+  for (const item of items) {
+    if (item.type.startsWith('image/')) {
+      e.preventDefault();
+      const file = item.getAsFile();
+      if (file) addImageToPreview(file);
+    }
+  }
+});
+
 // ── Initialize ─────────────────────────────────────────────────────
 
 // Restore theme

package/dist/web/client/index.html

@@ -45,18 +45,37 @@
       </div>
     </div>
 
-    <!-- ── Chat Area ──────────────────────────────────── -->
-    <main id="chat-area" class="flex-1 overflow-y-auto px-4 py-4">
-      <div id="messages" class="max-w-4xl mx-auto flex flex-col gap-3">
-        <!-- Welcome message -->
-        <div class="chat chat-start">
-          <div class="chat-bubble chat-bubble-primary">
-            Welcome to <strong>ai-cli Web UI</strong>! Select a provider & model above, then start chatting.
-            <br><span class="text-xs opacity-70">Type <code>/command</code> for REPL commands. Shift+Enter for newline.</span>
+    <!-- ── Main content: sidebar + chat ──────────────── -->
+    <div class="flex flex-1 overflow-hidden">
+
+      <!-- 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">
+          <span class="font-semibold text-sm">Sessions</span>
+          <button id="btn-new-session" class="btn btn-xs btn-primary btn-outline" 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>
+      </aside>
+
+      <!-- Sidebar toggle (mobile) -->
+      <button id="sidebar-toggle" class="btn btn-xs btn-ghost absolute top-[3.75rem] left-0 z-10 rounded-l-none" title="Toggle sidebar">☰</button>
+
+      <!-- Chat Area -->
+      <main id="chat-area" class="flex-1 overflow-y-auto px-4 py-4">
+        <div id="messages" class="max-w-4xl mx-auto flex flex-col gap-3">
+          <!-- Welcome message -->
+          <div class="chat chat-start">
+            <div class="chat-bubble chat-bubble-primary">
+              Welcome to <strong>ai-cli Web UI</strong>! Select a provider & model above, then start chatting.
+              <br><span class="text-xs opacity-70">Type <code>/command</code> for REPL commands. Shift+Enter for newline. Type <code>@</code> to reference files.</span>
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+
+    </div>
 
     <!-- ── Input Area ─────────────────────────────────── -->
     <footer class="bg-base-200 border-t border-base-content/10 px-4 py-3 flex-shrink-0">

package/dist/web/client/style.css

@@ -110,14 +110,32 @@
   50% { opacity: 0; }
 }
 
-/* ── Tool call cards (base-colored with left border) ── */
+/* ── Tool call cards (collapsible <details>) ────────── */
 .tool-card {
   background: oklch(var(--b2));
   border-radius: 0.5rem;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 1rem;
   font-size: 0.85rem;
   border-left: 3px solid transparent;
 }
+.tool-card summary {
+  list-style: none;
+}
+.tool-card summary::-webkit-details-marker { display: none; }
+.tool-card summary::before {
+  content: '▶';
+  font-size: 0.65rem;
+  margin-right: 0.4rem;
+  transition: transform 0.15s;
+  display: inline-block;
+  opacity: 0.5;
+}
+.tool-card[open] summary::before {
+  transform: rotate(90deg);
+}
+.tool-card .tool-details-body {
+  padding-top: 0.25rem;
+}
 .tool-border-safe { border-left-color: oklch(var(--in)); }
 .tool-border-write { border-left-color: oklch(var(--wa)); }
 .tool-border-destructive { border-left-color: oklch(var(--er)); }
@@ -221,7 +239,46 @@
 .status-connected { color: oklch(var(--su)); }
 .status-disconnected { color: oklch(var(--er)); }
 
+/* ── Sidebar ───────────────────────────────────────── */
+.sidebar .session-item {
+  padding: 0.5rem 0.6rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 0.15s;
+  border-left: 2px solid transparent;
+}
+.sidebar .session-item:hover {
+  background: oklch(var(--b3));
+}
+.sidebar .session-item.active {
+  background: oklch(var(--p) / 0.15);
+  border-left-color: oklch(var(--p));
+}
+.sidebar .session-item .session-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.85rem;
+}
+.sidebar .session-item .session-meta {
+  font-size: 0.7rem;
+  opacity: 0.5;
+}
+
+/* ── Image upload preview ──────────────────────────── */
+#image-preview {
+  border-top: 1px dashed oklch(var(--bc) / 0.15);
+  padding-top: 0.5rem;
+}
+.image-thumb {
+  display: inline-block;
+}
+
 /* ── Responsive ─────────────────────────────────────── */
+@media (max-width: 768px) {
+  .sidebar { width: 0; padding: 0; border: none; }
+  .sidebar.sidebar-open { width: 16rem; position: absolute; z-index: 20; height: calc(100vh - 3.5rem); top: 3.5rem; }
+}
 @media (max-width: 640px) {
   .navbar-start .select { width: 6rem; font-size: 0.75rem; }
   .msg-assistant { padding: 0.75rem; }

package/package.json

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