jinzd-ai-cli 0.1.87 → 0.1.89

package/CLAUDE.md

@@ -2040,8 +2040,8 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 
 | # | 功能 | 状态 | 说明 |
 |---|------|------|------|
-| P2-1 | **多 Tab 会话** | [ ] | 浏览器内多 Tab 并行对话（CLI 做不到），类似 ChatGPT |
-| P2-2 | **文件树面板** | [ ] | 浏览项目目录结构，点击文件查看/插入上下文，可视化 `@` 引用 |
+| P2-1 | **多 Tab 会话** | [x] | 浏览器内多 Tab 并行对话（CLI 做不到），类似 ChatGPT |
+| P2-2 | **文件树面板** | [x] | 浏览项目目录结构，点击文件查看/插入上下文，可视化 `@` 引用 |
 | P2-3 | **工具执行可视化** | [ ] | 进度条、工具调用时间线、Agentic 循环图示 |
 | P2-4 | **Prompt 模板库** | [ ] | 保存常用 prompt 为模板，一键复用（localStorage） |
 | P2-5 | **代码主题联动** | [ ] | highlight.js 主题随 DaisyUI 主题切换（亮色 → github-light，暗色 → github-dark） |

package/dist/{chunk-F2N4QBIY.js → chunk-3RRSDUVU.js}

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

package/dist/{chunk-L5YUW6T3.js → chunk-6T7KHDLM.js}

@@ -14,7 +14,7 @@ import { platform } from "os";
 import chalk from "chalk";
 
 // src/core/constants.ts
-var VERSION = "0.1.87";
+var VERSION = "0.1.89";
 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-F2N4QBIY.js";
+} from "./chunk-3RRSDUVU.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-L5YUW6T3.js";
+} from "./chunk-6T7KHDLM.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-RCWE32G4.js");
+        const { executeTests } = await import("./run-tests-U3HF44WA.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-MDRGHPXN.js");
+  const { startWebServer } = await import("./server-IDSC72WU.js");
   await startWebServer({ port, host: options.host });
 });
 program.command("sessions").description("List recent conversation sessions").action(async () => {

package/dist/{run-tests-RCWE32G4.js → run-tests-U3HF44WA.js}

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

package/dist/{server-MDRGHPXN.js → server-IDSC72WU.js}

@@ -23,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-F2N4QBIY.js";
+} from "./chunk-3RRSDUVU.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -36,7 +36,7 @@ import {
   SKILLS_DIR_NAME,
   VERSION,
   __require
-} from "./chunk-L5YUW6T3.js";
+} from "./chunk-6T7KHDLM.js";
 
 // src/web/server.ts
 import express from "express";
@@ -466,6 +466,7 @@ var SessionHandler = class {
       provider: this.currentProvider,
       model: this.currentModel,
       sessionId: this.sessions.current?.id ?? "",
+      sessionTitle: this.sessions.current?.title ?? void 0,
       messageCount: this.sessions.current?.messages.length ?? 0,
       planMode: this.planMode,
       thinkingMode: this.runtimeThinking ?? false,
@@ -1356,7 +1357,8 @@ async function startWebServer(options = {}) {
     res.json({
       version: VERSION,
       providers: availableProviders,
-      tools: toolRegistry.getDefinitions().length
+      tools: toolRegistry.getDefinitions().length,
+      cwd: process.cwd()
     });
   });
   app.get("/api/files", (req, res) => {
@@ -1424,15 +1426,20 @@ async function startWebServer(options = {}) {
       res.json({ error: `Cannot read: ${err.message}` });
     }
   });
-  let activeHandler = null;
-  wss.on("connection", (ws) => {
-    if (activeHandler) {
-      activeHandler.onDisconnect();
-      activeHandler = null;
+  const handlers = /* @__PURE__ */ new Map();
+  wss.on("connection", (ws, req) => {
+    const urlStr = req.url ?? "";
+    const qMark = urlStr.indexOf("?");
+    const params = new URLSearchParams(qMark >= 0 ? urlStr.slice(qMark + 1) : "");
+    const tabId = params.get("tabId") || `tab-${Date.now()}`;
+    const existing = handlers.get(tabId);
+    if (existing) {
+      existing.onDisconnect();
+      handlers.delete(tabId);
     }
-    console.log("   \u2713 Client connected");
+    console.log(`   \u2713 Tab connected: ${tabId.slice(0, 12)} (total: ${handlers.size + 1})`);
     const handler = new SessionHandler(ws, shared);
-    activeHandler = handler;
+    handlers.set(tabId, handler);
     ws.on("message", async (data) => {
       try {
         const raw = data.toString();
@@ -1453,9 +1460,9 @@ async function startWebServer(options = {}) {
       }
     });
     ws.on("close", () => {
-      console.log("   \u2717 Client disconnected");
+      console.log(`   \u2717 Tab disconnected: ${tabId.slice(0, 12)} (total: ${handlers.size - 1})`);
       handler.onDisconnect();
-      if (activeHandler === handler) activeHandler = null;
+      handlers.delete(tabId);
     });
     ws.on("error", (err) => {
       console.error(`   WebSocket error: ${err.message}`);
@@ -1471,7 +1478,7 @@ async function startWebServer(options = {}) {
   });
   process.on("SIGINT", () => {
     console.log("\n   Shutting down...");
-    if (activeHandler) activeHandler.onDisconnect();
+    for (const handler of handlers.values()) handler.onDisconnect();
     if (mcpManager) mcpManager.closeAll();
     wss.close();
     server.close();

package/dist/web/client/app.js

@@ -57,6 +57,14 @@ marked.setOptions({
   },
 });
 
+// ── Tab identity (per browser tab, survives page reload) ──────────
+
+let tabId = sessionStorage.getItem('aicli-tab-id');
+if (!tabId) {
+  tabId = 'tab-' + Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+  sessionStorage.setItem('aicli-tab-id', tabId);
+}
+
 // ── WebSocket ──────────────────────────────────────────────────────
 
 let heartbeatTimer = null;
@@ -64,7 +72,7 @@ let reconnectDelay = 1000; // Start at 1s, exponential backoff
 
 function connect() {
   const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  ws = new WebSocket(`${protocol}//${location.host}`);
+  ws = new WebSocket(`${protocol}//${location.host}?tabId=${tabId}`);
 
   ws.onopen = () => {
     connected = true;
@@ -84,6 +92,11 @@ function connect() {
       setProcessing(false);
       addInfoMessage('⚡ Reconnected — previous generation may have been interrupted.');
     }
+    // Restore the last active session for this tab (page reload / reconnect)
+    const savedSession = sessionStorage.getItem('aicli-active-session');
+    if (savedSession && !processing) {
+      send({ type: 'command', name: 'session', args: ['load', savedSession] });
+    }
   };
 
   ws.onclose = () => {
@@ -351,6 +364,15 @@ function handleStatus(msg) {
   sessionListEl.querySelectorAll('.session-item').forEach(el => {
     el.classList.toggle('active', el.dataset.sessionId === msg.sessionId);
   });
+
+  // Persist active session for this tab (for page reload restore)
+  if (msg.sessionId) {
+    sessionStorage.setItem('aicli-active-session', msg.sessionId);
+  }
+
+  // Update browser tab title to reflect current session
+  const title = msg.sessionTitle || msg.sessionId?.slice(0, 8) || 'New Session';
+  document.title = `ai-cli — ${title}`;
 }
 
 // ── Response helpers ───────────────────────────────────────────────
@@ -723,6 +745,8 @@ if (sessionSearchInput) {
 
 // ── Sidebar tabs ──────────────────────────────────────────────────────
 
+let fileTreeLoaded = false;
+
 function switchSidebarTab(tabName) {
   document.querySelectorAll('.sidebar-tab').forEach(btn => {
     btn.classList.toggle('active', btn.dataset.tab === tabName);
@@ -730,6 +754,11 @@ function switchSidebarTab(tabName) {
   document.querySelectorAll('.sidebar-tab-content').forEach(el => {
     el.classList.toggle('hidden', el.id !== `tab-${tabName}`);
   });
+  // Lazy-init file tree on first visit
+  if (tabName === 'files' && !fileTreeLoaded) {
+    fileTreeLoaded = true;
+    initFileTree();
+  }
 }
 
 document.querySelectorAll('.sidebar-tab').forEach(btn => {
@@ -1149,6 +1178,181 @@ function handleMemoryContent(msg) {
   scrollToBottom();
 }
 
+// ── File Tree ──────────────────────────────────────────────────────
+
+const fileTreeEl = document.getElementById('file-tree');
+const fileTreeCwdEl = document.getElementById('file-tree-cwd');
+const btnFileTreeRefresh = document.getElementById('btn-file-tree-refresh');
+
+// Track expanded directories: path → true
+const fileTreeExpanded = {};
+
+async function initFileTree() {
+  fileTreeEl.innerHTML = '<div class="text-xs opacity-40 text-center py-4">Loading...</div>';
+  const files = await fetchFiles('');
+
+  // Show cwd hint via API status (already have it from /api/status, but we fetch fresh)
+  fetch('/api/status').then(r => r.json()).then(data => {
+    if (data.cwd && fileTreeCwdEl) {
+      fileTreeCwdEl.textContent = data.cwd.replace(/\\/g, '/').split('/').pop() || data.cwd;
+      fileTreeCwdEl.title = data.cwd;
+    }
+  }).catch(() => {});
+
+  renderFileTreeItems(fileTreeEl, files, 0);
+}
+
+function renderFileTreeItems(container, items, depth) {
+  if (!items || items.length === 0) {
+    container.innerHTML = `<div class="text-xs opacity-30 px-${2 + depth} py-1">Empty</div>`;
+    return;
+  }
+  container.innerHTML = '';
+
+  // Dirs first, then files
+  const sorted = [...items].sort((a, b) => {
+    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  for (const item of sorted) {
+    const el = document.createElement('div');
+    el.className = 'file-tree-item';
+
+    if (item.isDir) {
+      const expanded = !!fileTreeExpanded[item.path];
+      el.innerHTML = `
+        <div class="file-tree-row file-tree-dir" title="${escapeHtml(item.path)}">
+          <span class="file-tree-chevron${expanded ? ' expanded' : ''}">▶</span>
+          <span class="file-tree-icon">📁</span>
+          <span class="file-tree-name">${escapeHtml(item.name)}</span>
+        </div>
+        <div class="file-tree-children${expanded ? '' : ' hidden'}"></div>
+      `;
+      const row = el.querySelector('.file-tree-row');
+      const chevron = el.querySelector('.file-tree-chevron');
+      const children = el.querySelector('.file-tree-children');
+
+      row.addEventListener('click', async () => {
+        const isNowExpanded = !fileTreeExpanded[item.path];
+        fileTreeExpanded[item.path] = isNowExpanded;
+        chevron.classList.toggle('expanded', isNowExpanded);
+        children.classList.toggle('hidden', !isNowExpanded);
+        if (isNowExpanded && children.children.length === 0) {
+          children.innerHTML = '<div class="text-xs opacity-30 px-2 py-0.5">Loading...</div>';
+          const subItems = await fetchFiles(item.path);
+          renderFileTreeItems(children, subItems, depth + 1);
+        }
+      });
+
+      // If already expanded, load children immediately
+      if (expanded) {
+        fetchFiles(item.path).then(subItems => renderFileTreeItems(children, subItems, depth + 1));
+      }
+    } else {
+      const ext = item.name.includes('.') ? item.name.split('.').pop() : '';
+      const fileIcon = getFileIcon(ext);
+      el.innerHTML = `
+        <div class="file-tree-row file-tree-file" title="${escapeHtml(item.path)} — Click: insert @ref | Ctrl+Click: preview">
+          <span class="file-tree-chevron" style="visibility:hidden">▶</span>
+          <span class="file-tree-icon">${fileIcon}</span>
+          <span class="file-tree-name">${escapeHtml(item.name)}</span>
+          <button class="file-tree-insert-btn" title="Insert @reference">@</button>
+        </div>
+      `;
+      const row = el.querySelector('.file-tree-row');
+      const insertBtn = el.querySelector('.file-tree-insert-btn');
+
+      row.addEventListener('click', (e) => {
+        if (e.target === insertBtn) return;
+        if (e.ctrlKey || e.metaKey) {
+          previewFileInChat(item.path);
+        } else {
+          insertFileRef(item.path);
+        }
+      });
+
+      insertBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        insertFileRef(item.path);
+      });
+    }
+
+    container.appendChild(el);
+  }
+}
+
+function getFileIcon(ext) {
+  const icons = {
+    js: '🟨', ts: '🔷', jsx: '⚛️', tsx: '⚛️',
+    py: '🐍', go: '🐹', rs: '🦀', java: '☕',
+    md: '📝', json: '📋', yaml: '📋', yml: '📋', toml: '📋',
+    html: '🌐', css: '🎨', scss: '🎨',
+    sh: '⚡', bat: '⚡', ps1: '⚡',
+    png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️', svg: '🖼️',
+    pdf: '📕', zip: '📦', tar: '📦', gz: '📦',
+    sql: '🗄️', db: '🗄️',
+    env: '🔑', key: '🔑',
+    lock: '🔒',
+  };
+  return icons[ext?.toLowerCase()] || '📄';
+}
+
+function insertFileRef(filePath) {
+  const val = userInput.value;
+  const pos = userInput.selectionStart;
+  const before = val.slice(0, pos);
+  const after = val.slice(pos);
+  const ref = `@${filePath}`;
+  const needsSpace = after.length > 0 && !after.startsWith(' ') && !after.startsWith('\n');
+  userInput.value = before + ref + (needsSpace ? ' ' : '') + after;
+  const newPos = pos + ref.length + (needsSpace ? 1 : 0);
+  userInput.setSelectionRange(newPos, newPos);
+  userInput.focus();
+  // Auto-resize textarea
+  userInput.style.height = 'auto';
+  userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
+}
+
+async function previewFileInChat(filePath) {
+  try {
+    const resp = await fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`);
+    const data = await resp.json();
+    if (data.error) {
+      addErrorMessage(`Cannot preview ${filePath}: ${data.error}`);
+      return;
+    }
+    const ext = filePath.split('.').pop() || '';
+    const sizeKb = (data.size / 1024).toFixed(1);
+    const el = document.createElement('div');
+    el.className = 'file-preview-card my-2';
+    el.innerHTML = `
+      <div class="flex items-center gap-2 mb-1">
+        <span class="text-xs font-semibold opacity-70">📄 ${escapeHtml(filePath)}</span>
+        <span class="badge badge-ghost badge-xs">${sizeKb} KB</span>
+        <button class="btn btn-xs btn-ghost ml-auto opacity-50" onclick="insertFileRef('${escapeHtml(filePath).replace(/'/g, "\\'")}')">Insert @ref</button>
+      </div>
+      <pre style="max-height:300px"><code class="language-${escapeHtml(ext)}">${escapeHtml(data.content)}</code></pre>
+      <button class="btn btn-xs btn-ghost mt-1 opacity-50 text-xs" onclick="this.previousElementSibling.style.maxHeight='none';this.remove()">▼ Show all</button>
+    `;
+    el.querySelectorAll('pre code').forEach(block => {
+      try { hljs.highlightElement(block); } catch {}
+    });
+    messagesEl.appendChild(el);
+    scrollToBottom();
+  } catch {
+    addErrorMessage(`Failed to preview ${filePath}`);
+  }
+}
+
+// Refresh button
+if (btnFileTreeRefresh) {
+  btnFileTreeRefresh.addEventListener('click', () => {
+    Object.keys(fileTreeExpanded).forEach(k => delete fileTreeExpanded[k]);
+    initFileTree();
+  });
+}
+
 // ── Initialize ─────────────────────────────────────────────────────
 
 // Restore theme

package/dist/web/client/index.html

@@ -54,6 +54,7 @@
         <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>
+          <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="files">📁 Files</button>
         </div>
         <!-- Sessions tab -->
         <div id="tab-sessions" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden">
@@ -74,6 +75,16 @@
             <div class="text-xs opacity-40 text-center py-4">Type /tools to load</div>
           </div>
         </div>
+        <!-- Files tab -->
+        <div id="tab-files" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden hidden">
+          <div class="p-2 border-b border-base-content/10 flex items-center gap-1">
+            <span class="text-xs opacity-40 flex-1 truncate" id="file-tree-cwd" title="">cwd</span>
+            <button id="btn-file-tree-refresh" class="btn btn-xs btn-ghost opacity-50 hover:opacity-100 flex-shrink-0" title="Refresh file tree">↺</button>
+          </div>
+          <div id="file-tree" class="flex-1 overflow-y-auto py-1 text-sm">
+            <div class="text-xs opacity-40 text-center py-4">Click tab to load</div>
+          </div>
+        </div>
       </aside>
 
       <!-- Chat Area -->

package/dist/web/client/style.css

@@ -361,6 +361,98 @@
   opacity: 0.6;
 }
 
+/* ── File tree ──────────────────────────────────────── */
+.file-tree-item {
+  user-select: none;
+}
+.file-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: background 0.1s;
+  min-width: 0;
+}
+.file-tree-row:hover {
+  background: oklch(var(--b3));
+}
+.file-tree-row.file-tree-dir {
+  font-weight: 500;
+}
+.file-tree-chevron {
+  font-size: 0.55rem;
+  opacity: 0.4;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+  display: inline-block;
+  width: 0.75rem;
+  text-align: center;
+}
+.file-tree-chevron.expanded {
+  transform: rotate(90deg);
+}
+.file-tree-icon {
+  font-size: 0.8rem;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.file-tree-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.file-tree-insert-btn {
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: oklch(var(--p));
+  opacity: 0;
+  background: oklch(var(--p) / 0.12);
+  border: none;
+  border-radius: 0.2rem;
+  padding: 0 0.3rem;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: opacity 0.15s, background 0.15s;
+}
+.file-tree-row:hover .file-tree-insert-btn {
+  opacity: 1;
+}
+.file-tree-insert-btn:hover {
+  background: oklch(var(--p) / 0.25) !important;
+}
+.file-tree-children {
+  padding-left: 1rem;
+  border-left: 1px solid oklch(var(--bc) / 0.08);
+  margin-left: 0.85rem;
+}
+
+/* file preview card in chat */
+.file-preview-card {
+  background: oklch(var(--b2));
+  border-radius: var(--rounded-box, 1rem);
+  padding: 0.75rem 1rem;
+  border-left: 3px solid oklch(var(--in));
+}
+.file-preview-card pre {
+  background: oklch(var(--b3));
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin: 0.5rem 0 0;
+}
+.file-preview-card pre code {
+  display: block;
+  padding: 0.75rem;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
+}
+
 /* ── 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.87",
+  "version": "0.1.89",
   "description": "Cross-platform REPL-style AI CLI with multi-provider support",
   "type": "module",
   "main": "./dist/index.js",