@vincentbanana/banana-gui 0.1.1 → 0.2.0

package/README.md

@@ -22,13 +22,38 @@ banana-gui --provider deepseek --model deepseek-chat
 
 ## 特性
 
-- 左侧会话列表：新建 / 切换 / 删除，切换即续上下文
-- 流式回复、工具调用实时状态（自绘图标：文件、终端、搜索、编辑…）
-- 危险操作弹出确认框，附变更预览（写文件前给 diff）
+- **和 CLI 同一套内核**：agent 循环、工具、权限、斜杠命令全部来自 `@vincentbanana/bananacli`，两边行为完全一致
+- 左侧会话列表：新建 / 切换 / 重命名 / 导出（Markdown、JSON）/ 删除
+- 输入 `/` 调出命令面板（`/help` 看全部），输入 `@` 补全项目文件
+- 流式回复、工具调用实时状态，点工具行可展开完整输出
+- 危险操作弹窗确认，写文件前给 diff
 - 一键撤销上一轮文件改动
+- 右侧项目文件面板：浏览目录、预览文件、一键插入引用
 - 粘贴或拖拽图片，随消息一起发送
-- 模型、权限、工作区、系统提示词在设置面板里改，改完立刻生效
-- 深浅色跟随系统，纯黑白，无渐变无彩色
+- 模型、权限、API Key、工作区、系统提示词在设置里改，改完立刻生效
+- 权限设置写清了每种模式的含义和风险，新手也不会懵
+- 三态主题：跟随系统 / 浅色 / 深色，纯黑白无渐变
+- 没配 API Key 也能打开界面，照着引导填完即可用
+
+## 桌面版
+
+仓库里有 Electron 主进程，可以打包成独立应用：
+
+```bash
+npm install          # 装 electron 与 electron-builder
+npm run desktop      # 本地直接跑桌面版
+npm run dist:win     # 出 Windows 安装包（也支持 dist:mac / dist:linux）
+```
+
+npm 安装的 `banana-gui` 仍是浏览器版，零原生依赖，任何装了 Node 20+ 的系统都能跑。
+
+## 配置
+
+首次启动会提示配置向导。GUI 与 CLI 共用 `~/.banana/config.json`：
+
+- 也可以直接在界面的设置面板里填 API Key、切换模型和权限
+- 环境变量优先级更高，例如 `DEEPSEEK_API_KEY`
+- API Key 只写在你自己的机器上，不会进代码仓库
 
 ## 安全
 

package/desktop/main.cjs

@@ -0,0 +1,113 @@
+// Banana 桌面版主进程：拉起本地 GUI 服务，再用窗口加载它。
+// 界面资源仍来自本包 ui/，agent 内核来自 @vincentbanana/bananacli。
+const { app, BrowserWindow, Menu, shell, dialog } = require('electron');
+const { spawn } = require('node:child_process');
+const { createRequire } = require('node:module');
+
+const require_ = createRequire(__filename);
+let child = null;
+let win = null;
+
+function startServer() {
+  const entry = require_.resolve('@vincentbanana/bananacli');
+  // 端口交给 CLI 随机分配，避免多开时互相抢占
+  child = spawn(process.execPath, [entry, '--ui', '--no-open'], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: process.env,
+  });
+  return new Promise((resolve, reject) => {
+    let buffer = '';
+    const onData = (chunk) => {
+      buffer += chunk.toString('utf8');
+      const match = buffer.match(/http:\/\/127\.0\.0\.1:\d+\/t\/[a-f0-9]+\//);
+      if (match) {
+        child.stdout.off('data', onData);
+        resolve(match[0]);
+      }
+    };
+    child.stdout.on('data', onData);
+    child.stderr.on('data', (chunk) => process.stderr.write(`[banana] ${chunk}`));
+    child.on('error', reject);
+    child.on('exit', (code) => {
+      if (!win) return;
+      dialog.showErrorBox('Banana 已退出', `本地服务意外结束（退出码 ${code}）。`);
+      app.quit();
+    });
+    setTimeout(() => reject(new Error('启动超时：本地服务没有在 30 秒内就绪')), 30_000);
+  });
+}
+
+async function createWindow() {
+  const url = await startServer();
+  win = new BrowserWindow({
+    width: 1180,
+    height: 820,
+    minWidth: 720,
+    minHeight: 520,
+    backgroundColor: '#ffffff',
+    title: 'Banana',
+    autoHideMenuBar: true,
+    webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true },
+  });
+  await win.loadURL(url);
+  win.on('closed', () => {
+    win = null;
+  });
+  // 外部链接交给系统浏览器，窗口只负责本地界面
+  win.webContents.setWindowOpenHandler(({ url: target }) => {
+    shell.openExternal(target);
+    return { action: 'deny' };
+  });
+}
+
+const menuTemplate = [
+  ...(process.platform === 'darwin' ? [{ role: 'appMenu' }] : []),
+  {
+    label: '文件',
+    submenu: [
+      {
+        label: '新建对话',
+        accelerator: 'CmdOrCtrl+N',
+        click: () => win?.webContents.executeJavaScript("document.getElementById('newChat')?.click()"),
+      },
+      { type: 'separator' },
+      process.platform === 'darwin' ? { role: 'close' } : { role: 'quit', label: '退出' },
+    ],
+  },
+  { role: 'editMenu', label: '编辑' },
+  {
+    label: '视图',
+    submenu: [
+      {
+        label: '项目文件',
+        accelerator: 'CmdOrCtrl+Shift+F',
+        click: () => win?.webContents.executeJavaScript("document.getElementById('filesBtn')?.click()"),
+      },
+      { type: 'separator' },
+      { role: 'reload', label: '重新加载' },
+      { role: 'toggleDevTools', label: '开发者工具' },
+      { role: 'togglefullscreen', label: '全屏' },
+    ],
+  },
+  { role: 'windowMenu', label: '窗口' },
+];
+
+app.whenReady().then(() => {
+  Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplate));
+  createWindow().catch((error) => {
+    dialog.showErrorBox('Banana 启动失败', String(error?.message ?? error));
+    app.quit();
+  });
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('before-quit', () => {
+  child?.kill();
+  child = null;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vincentbanana/banana-gui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Banana 的图形界面：本地服务 + 浏览器。黑白主题，自绘图标，无第三方 UI 依赖",
   "type": "module",
   "engines": {
@@ -12,14 +12,52 @@
   "files": [
     "bin",
     "ui",
+    "desktop",
     "README.md"
   ],
   "scripts": {
     "sync": "node ../scripts/sync-gui.mjs",
-    "test": "node test/gui-package.test.mjs"
+    "test": "node test/gui-package.test.mjs",
+    "desktop": "electron desktop/main.cjs",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder",
+    "dist:win": "electron-builder --win",
+    "dist:mac": "electron-builder --mac",
+    "dist:linux": "electron-builder --linux"
+  },
+  "build": {
+    "appId": "dev.banana.gui",
+    "productName": "Banana",
+    "files": [
+      "desktop/**/*",
+      "ui/**/*",
+      "bin/**/*",
+      "package.json"
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        "dmg"
+      ]
+    },
+    "win": {
+      "target": [
+        "nsis"
+      ]
+    },
+    "linux": {
+      "target": [
+        "AppImage"
+      ],
+      "category": "Development"
+    }
+  },
+  "devDependencies": {
+    "electron": "^33.0.0",
+    "electron-builder": "^25.0.0"
   },
   "dependencies": {
-    "@vincentbanana/bananacli": "^0.2.0"
+    "@vincentbanana/bananacli": "^0.3.0"
   },
   "keywords": [
     "ai",

package/ui/app.js

@@ -24,6 +24,13 @@ const ICONS = {
   folder: '<path d="M4 6.5h5.5L12 9h8v10.5H4z"/>',
   message: '<path d="M4 5.5h16v11H9.5L4 20z"/>',
   listCheck: '<path d="M4 7h10M4 12h10M4 17h6M17 15.5l1.5 1.5L22 13"/>',
+  dots: '<circle cx="6" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="18" cy="12" r="1.4"/>',
+  panel: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M14 5v14"/>',
+  chevron: '<path d="M9 6l6 6-6 6"/>',
+  download: '<path d="M12 4v10M8 11l4 4 4-4M5 19h14"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4"/>',
+  moon: '<path d="M20 14.5A8 8 0 019.5 4a8 8 0 1010.5 10.5z"/>',
+  contrast: '<circle cx="12" cy="12" r="8"/><path d="M12 4v16"/><path d="M12 4a8 8 0 010 16" fill="currentColor" stroke="none"/>',
 };
 
 const TOOL_ICON = {
@@ -131,21 +138,117 @@ function renderSidebar() {
     const node = document.createElement('div');
     node.className = `session-item${active}`;
     node.innerHTML =
-      `<span class="s-del" data-del="${item.id}">${svg('trash')}</span>` +
+      `<span class="s-actions">` +
+      `<span class="s-act" data-menu="${item.id}" title="更多">${svg('dots')}</span>` +
+      `<span class="s-act" data-del="${item.id}" title="删除">${svg('trash')}</span>` +
+      `</span>` +
       `<span class="s-title">${escapeHtml(item.title || '新对话')}</span>` +
       `<span class="s-meta">${item.turns} 轮 · ${relativeTime(item.updatedAt)}</span>`;
+
     node.addEventListener('click', (event) => {
-      if (event.target.closest('[data-del]')) return;
-      post('session', { action: 'switch', ref: item.id });
+      if (event.target.closest('[data-del], [data-menu]')) return;
+      post('session', { action: 'switch', ref: item.id }).then(() => refresh(true));
     });
+
     node.querySelector('[data-del]').addEventListener('click', (event) => {
       event.stopPropagation();
-      post('session', { action: 'delete', ref: item.id });
+      post('session', { action: 'delete', ref: item.id }).then(() => refresh(true));
+    });
+
+    node.querySelector('[data-menu]').addEventListener('click', (event) => {
+      event.stopPropagation();
+      openSessionMenu(item, node);
     });
     list.appendChild(node);
   }
 }
 
+/** 会话操作菜单：切换 / 重命名 / 导出 Markdown / 导出 JSON */
+function openSessionMenu(item, anchor) {
+  document.querySelector('.popover')?.remove();
+  const rect = anchor.getBoundingClientRect();
+  const pop = document.createElement('div');
+  pop.className = 'popover';
+  pop.innerHTML = `
+    <button data-act="switch">切换到这一轮</button>
+    <button data-act="rename">重命名</button>
+    <button data-act="md">导出 Markdown</button>
+    <button data-act="json">导出 JSON</button>`;
+  document.body.appendChild(pop);
+  // 先量再定位：贴着按钮右边缘，并且始终留在视口内
+  pop.style.visibility = 'hidden';
+  pop.style.left = '0px';
+  pop.style.top = '0px';
+  const width = pop.offsetWidth;
+  const height = pop.offsetHeight;
+  const left = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8));
+  const top = rect.bottom + height > window.innerHeight - 8 ? Math.max(8, rect.top - height - 4) : rect.bottom + 4;
+  pop.style.left = `${left}px`;
+  pop.style.top = `${top}px`;
+  pop.style.visibility = '';
+
+  const close = () => {
+    pop.remove();
+    document.removeEventListener('click', close, true);
+  };
+  document.addEventListener('click', close, true);
+
+  pop.addEventListener('click', async (event) => {
+    const action = event.target.closest('[data-act]')?.dataset.act;
+    if (!action) return;
+    event.stopPropagation();
+    close();
+    if (action === 'switch') {
+      await post('session', { action: 'switch', ref: item.id });
+      await refresh(true);
+    } else if (action === 'rename') {
+      const title = prompt('新的标题', item.title || '');
+      if (title && title.trim()) {
+        await post('session', { action: 'switch', ref: item.id });
+        await post('session', { action: 'rename', title: title.trim() });
+        await refresh(false);
+        toast('已重命名');
+      }
+    } else {
+      await post('session', { action: 'switch', ref: item.id });
+      await refresh(true);
+      downloadSession(action === 'json' ? 'json' : 'md', item.id);
+    }
+  });
+}
+
+function sessionToMarkdown(messages, title) {
+  const lines = [`# ${title || '对话'}`, '', `导出时间：${new Date().toLocaleString()}`, ''];
+  for (const message of messages) {
+    if (message.role === 'tool') continue;
+    lines.push(message.role === 'user' ? '## 你' : '## Banana', '');
+    lines.push(message.content || '(空)');
+    if (message.toolCalls?.length) {
+      lines.push('', '工具调用：');
+      for (const call of message.toolCalls) {
+        lines.push(`- \`${call.name}\` ${JSON.stringify(call.input ?? {}).slice(0, 200)}`);
+      }
+    }
+    lines.push('');
+  }
+  return lines.join('\n');
+}
+
+function downloadSession(format, id) {
+  const session = state.info.session;
+  const blob =
+    format === 'json'
+      ? JSON.stringify(session, null, 2)
+      : sessionToMarkdown(session.messages, session.title);
+  const blobUrl = URL.createObjectURL(new Blob([blob], { type: format === 'json' ? 'application/json' : 'text/markdown' }));
+  const link = document.createElement('a');
+  link.href = blobUrl;
+  link.download = `${(session.title || id).replace(/[\\/:*?"<>|]/g, '_').slice(0, 40)}.${format}`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
+  toast(`已导出 ${format === 'json' ? 'JSON' : 'Markdown'}`);
+}
+
 function toolGroup(calls, results) {
   const wrap = document.createElement('div');
   wrap.className = 'tool-group';
@@ -191,14 +294,36 @@ function renderMessage(message) {
 function renderEmpty() {
   const wrap = document.createElement('div');
   wrap.className = 'empty';
+  // 第一次用、或者还没配 key 时，给一条能照着做的引导
+  const provider = state.info?.provider;
+  const current = state.info?.providers?.find((item) => item.current);
+  const hasKey = Boolean(current?.keyReady);
+  const banner = hasKey
+    ? ''
+    : `<div class="empty-warn">
+         <strong>还差一步：填上 API Key</strong>
+         <span>没有 key 就没法对话。点下面的按钮，填进去立刻就能用（key 只存在你自己的电脑上）。</span>
+         <button class="btn primary" id="emptySetup">现在去填</button>
+       </div>`;
   wrap.innerHTML =
-    '<h1>要做什么</h1><p>读写文件、跑命令、查资料，都可以。默认每次都要你确认。</p>' +
+    '<h1>要做什么</h1>' +
+    '<p>读写文件、跑命令、查资料，都可以。默认每次都要你确认。</p>' +
+    banner +
     '<div class="suggest">' +
-    ['这个仓库是做什么的', '跑一下测试并修复失败', '给我一个重构方案，先别改代码', '把 README 翻译成英文'].map((text) => `<button>${text}</button>`).join('') +
-    '</div>';
+    ['这个仓库是做什么的', '跑一下测试并修复失败', '给我一个重构方案，先别改代码', '把 README 翻译成英文']
+      .map((text) => `<button>${escapeHtml(text)}</button>`)
+      .join('') +
+    '</div>' +
+    `<div class="empty-tips">
+       <span><b>/</b> 调命令（/help 看全部）</span>
+       <span><b>@</b> 引用项目里的文件</span>
+       <span><b>${escapeHtml(provider?.name ?? '')}</b> 当前模型</span>
+     </div>`;
   wrap.querySelectorAll('.suggest button').forEach((btn) => {
     btn.addEventListener('click', () => { $('input').value = btn.textContent; $('input').focus(); grow(); });
   });
+  const setup = wrap.querySelector('#emptySetup');
+  if (setup) setup.addEventListener('click', openSettings);
   return wrap;
 }
 
@@ -206,6 +331,11 @@ function renderThread() {
   THREAD.innerHTML = '';
   const messages = state.info?.session?.messages ?? [];
   if (messages.length === 0) THREAD.appendChild(renderEmpty());
+  else {
+    const divider = document.createElement('div');
+    divider.className = 'thread-divider';
+    THREAD.appendChild(divider);
+  }
   for (const message of messages) {
     const node = renderMessage(message);
     if (node) THREAD.appendChild(node);
@@ -334,6 +464,13 @@ async function send() {
   if (!text || state.busy) return;
   input.value = '';
   grow();
+  closePalette();
+  // 斜杠开头的是命令，不走对话
+  if (text.startsWith('/')) {
+    await runCommand(text);
+    grow();
+    return;
+  }
 
   if (state.info.session.messages.length === 0 && state.info.session.title === '新对话') {
     state.info.session.title = text.slice(0, 40);
@@ -371,6 +508,7 @@ async function send() {
 
   let buffer = '';
   let pending = 0;
+  let streamEnded = false;
   const paint = () => {
     pending = 0;
     body.textContent = buffer;
@@ -430,13 +568,27 @@ async function send() {
             if (row) {
               row.querySelector('.t-state').innerHTML = event.ok ? svg('check') : svg('x');
               row.classList.toggle('is-error', !event.ok);
+              if (event.detail) {
+                row.classList.add('is-clickable');
+                row.title = '点击展开输出';
+                row.addEventListener('click', () => toggleToolOutput(row, event.detail, !event.ok));
+              }
             }
           } else if (event.type === 'approval') {
             const allowed = await askApproval(event);
             await post('approve', { id: event.id, allowed });
+          } else if (event.type === 'error') {
+            // 服务端提前收尾（没配 key、请求出错等）：给出能照做的下一步
+            body.classList.remove('caret');
+            body.innerHTML = markdown(`**${escapeHtml(event.message ?? '出错了')}**`);
+            if (event.hint) metaLine('提示', event.hint);
+            if (event.code === 'no_api_key') openSettings();
+            streamEnded = true;
           } else if (event.type === 'done') {
             body.classList.remove('caret');
-            if (event.error) body.innerHTML = markdown(`请求失败：${event.error}`);
+            streamEnded = true;
+            if (event.error) body.innerHTML = markdown(`**请求失败** ${escapeHtml(event.error)}`);
+            else if (!buffer.trim()) body.innerHTML = markdown('这一轮没有返回内容。');
             else body.innerHTML = markdown(buffer);
             metaLine('步数', event.steps);
             metaLine('用时', (event.ms / 1000).toFixed(1) + 's');
@@ -455,9 +607,17 @@ async function send() {
         }
       }
     }
+    // 流结束了却没收到 done/error：多半是被中断，别让界面一直转圈
+    if (!streamEnded) {
+      body.classList.remove('caret');
+      if (body.textContent === '' && toolWrap.childElementCount === 0) {
+        body.innerHTML = markdown('这一轮没有返回内容。可以重试，或点「停止」后换个说法。');
+      }
+      await refresh();
+    }
   } catch (error) {
     body.classList.remove('caret');
-    body.innerHTML = markdown(`**中断** ${error.message}`);
+    body.innerHTML = markdown(`**中断** ${escapeHtml(error.message)}`);
     await refresh();
   } finally {
     setBusy(false);
@@ -465,6 +625,201 @@ async function send() {
   }
 }
 
+// ---------------- 主题 ----------------
+// 三态：跟随系统 / 浅色 / 深色，选择记在本地
+const THEMES = ['auto', 'light', 'dark'];
+const THEME_LABEL = { auto: '跟随系统', light: '浅色', dark: '深色' };
+const THEME_ICON = { auto: 'contrast', light: 'sun', dark: 'moon' };
+
+function applyTheme(theme) {
+  if (theme === 'auto') delete document.documentElement.dataset.theme;
+  else document.documentElement.dataset.theme = theme;
+  try {
+    localStorage.setItem('banana-theme', theme);
+  } catch {}
+  const button = $('themeBtn');
+  if (button) {
+    button.innerHTML = svg(THEME_ICON[theme]);
+    button.title = `主题：${THEME_LABEL[theme]}（点击切换）`;
+  }
+}
+
+function loadTheme() {
+  let saved = 'auto';
+  try {
+    saved = localStorage.getItem('banana-theme') ?? 'auto';
+  } catch {}
+  if (!THEMES.includes(saved)) saved = 'auto';
+  applyTheme(saved);
+}
+
+function cycleTheme() {
+  const current = (() => {
+    try {
+      return localStorage.getItem('banana-theme') ?? 'auto';
+    } catch {
+      return 'auto';
+    }
+  })();
+  const next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];
+  applyTheme(next);
+  toast(`主题：${THEME_LABEL[next]}`);
+}
+
+// ---------------- 补全面板：/ 命令与 @ 文件共用一套 ----------------
+let commandList = [];
+
+function renderCommandPalette(query) {
+  const box = $('commandPalette');
+  const term = query.replace(/^\//, '').toLowerCase();
+  const matches = commandList
+    .filter((item) => !term || item.name.startsWith(term) || item.aliases.some((alias) => alias.startsWith(term)))
+    .slice(0, 8);
+  state.commandMatches = matches.map((item) => ({ kind: 'command', item, insert: item.usage.startsWith('/') ? item.usage + ' ' : '/' + item.name + ' ' }));
+  state.commandIndex = 0;
+  paintPalette();
+}
+
+function paintPalette() {
+  const box = $('commandPalette');
+  box.innerHTML = '';
+  const rows = state.commandMatches ?? [];
+  if (!rows.length) {
+    box.innerHTML = '<div class="cmd-empty">没有匹配项</div>';
+    return;
+  }
+  rows.forEach((entry, index) => {
+    const row = document.createElement('button');
+    row.className = `cmd-item${index === state.commandIndex ? ' is-on' : ''}`;
+    row.type = 'button';
+    if (entry.kind === 'command') {
+      row.innerHTML =
+        `<span class="cmd-name">/${escapeHtml(entry.item.name)}</span>` +
+        `<span class="cmd-summary">${escapeHtml(entry.item.summary)}</span>` +
+        `<span class="cmd-usage">${escapeHtml(entry.item.usage)}</span>`;
+    } else {
+      row.innerHTML =
+        `<span class="cmd-name">${escapeHtml(entry.item.split('/').pop())}</span>` +
+        `<span class="cmd-summary">${escapeHtml(entry.item)}</span>` +
+        '<span class="cmd-usage">文件</span>';
+    }
+    row.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+      applyCompletion(entry);
+    });
+    box.appendChild(row);
+  });
+}
+
+/** 用候选替换输入框里对应的片段。 */
+function applyCompletion(entry) {
+  const input = $('input');
+  const value = input.value;
+  const replace = state.paletteReplace ?? '';
+  if (replace && value.endsWith(replace)) {
+    input.value = value.slice(0, value.length - replace.length) + entry.insert;
+  } else {
+    input.value = `${value.trimEnd()} ${entry.insert}`;
+  }
+  closePalette();
+  input.focus();
+  grow();
+}
+
+/** 命令面板：本地过滤，无需请求。 */
+function openPalette(query) {
+  const box = $('commandPalette');
+  box.hidden = false;
+  box.dataset.kind = 'command';
+  state.paletteReplace = '';
+  renderCommandPalette(query);
+}
+
+function closePalette() {
+  $('commandPalette').hidden = true;
+  state.commandMatches = [];
+  state.paletteReplace = '';
+  state.pendingFiles = [];
+}
+
+function movePalette(step) {
+  const box = $('commandPalette');
+  if (box.hidden) return;
+  const rows = [...box.querySelectorAll('.cmd-item')];
+  if (!rows.length) return;
+  state.commandIndex = (state.commandIndex + step + rows.length) % rows.length;
+  rows.forEach((row, index) => row.classList.toggle('is-on', index === state.commandIndex));
+  rows[state.commandIndex].scrollIntoView({ block: 'nearest' });
+}
+
+/** @ 补全：走服务端，和 CLI 用同一份 completeFileReference。 */
+let completeTimer = null;
+async function requestFileComplete(value) {
+  clearTimeout(completeTimer);
+  completeTimer = setTimeout(async () => {
+    try {
+      const data = await get(`complete?line=${encodeURIComponent(value)}`);
+      if (data.kind !== 'file' || !data.candidates.length) {
+        if (!$('commandPalette').hidden && $('commandPalette').dataset.kind === 'file') closePalette();
+        return;
+      }
+      // 补全请求返回时用户可能已经继续输入了，丢弃过期结果
+      if ($('input').value !== value) return;
+      state.pendingFiles = data.candidates.map((path) => ({ kind: 'file', item: path, insert: path + ' ' }));
+      $('commandPalette').hidden = false;
+      $('commandPalette').dataset.kind = 'file';
+      state.paletteReplace = data.replace;
+      state.commandMatches = state.pendingFiles;
+      state.commandIndex = 0;
+      paintPalette();
+    } catch {
+      /* 补全失败不影响输入 */
+    }
+  }, 90);
+}
+
+/** 执行命令：走服务端，和终端里同一份逻辑、同一份命令表。 */
+async function runCommand(text) {
+  closePalette();
+  const userMsg = document.createElement('article');
+  userMsg.className = 'msg user cmd';
+  userMsg.innerHTML = '<div class="msg-role">你</div>';
+  const userBody = document.createElement('div');
+  userBody.className = 'msg-body';
+  userBody.textContent = text;
+  userMsg.appendChild(userBody);
+  THREAD.appendChild(userMsg);
+
+  const botMsg = document.createElement('article');
+  botMsg.className = 'msg assistant';
+  const role = document.createElement('div');
+  role.className = 'msg-role';
+  role.textContent = '命令输出';
+  const out = document.createElement('div');
+  out.className = 'msg-body cmd-out';
+  botMsg.append(role, out);
+  THREAD.appendChild(botMsg);
+  out.textContent = '执行中…';
+  scrollToEnd();
+
+  try {
+    const result = await post('command', { input: text });
+    out.textContent = (result.output || '').replace(/\u001b\[\d+J/g, '') || (result.ok ? '（没有输出）' : '');
+    out.classList.toggle('is-error', !result.ok);
+    if (result.error) out.textContent += (out.textContent ? '\n' : '') + result.error;
+    if (result.info) state.info = result.info;
+    if (result.sessions) state.sessions = result.sessions;
+    // \u001b[clear 之类的终端指令：清空当前视图
+    if ((result.output || '').includes('\u001b[clear]')) renderThread();
+    renderHeader();
+    renderSidebar();
+  } catch (error) {
+    out.textContent = error.message;
+    out.classList.add('is-error');
+  }
+  scrollToEnd();
+}
+
 // ---------------- 附件 ----------------
 function renderAttachments() {
   const box = $('attachments');
@@ -536,7 +891,7 @@ function renderSettings() {
   const keyPlaceholder = active?.keySaved
     ? '已保存（留空表示不修改）'
     : active?.keyEnv
-      ? `默认读取环境变量 ${active.keyEnv}`
+      ? `默认读取环境变量 ${active.keyEnv}（当前${active.keyReady ? '已设置' : '未设置'}）`
       : '粘贴 API key';
   keyField.innerHTML =
     '<label>API Key</label>' +
@@ -562,38 +917,88 @@ function renderSettings() {
   const permField = document.createElement('div');
   permField.className = 'field';
   permField.innerHTML = '<label>权限</label>';
-  const permNames = { shell: '执行命令', write: '写文件', network: '联网' };
+  // 权限是小白最容易懵的地方，所以每种模式都写清楚"改了会发生什么"
+  const PERM_INFO = {
+    shell: {
+      name: '执行命令',
+      hint: 'Banana 可以在你的电脑上运行命令（如 npm test、git status）。',
+      modes: {
+        ask: '每次执行前弹窗问你 —— 最安全，推荐新手用这个',
+        allow: '直接执行，不打扰你 —— 方便但风险自负',
+        deny: '完全禁止 —— Banana 只能读文件，不能动你的系统',
+      },
+    },
+    write: {
+      name: '写入文件',
+      hint: '修改或新建文件的能力。每次改动都可以用左下角「撤销」回滚。',
+      modes: {
+        ask: '每次改文件前给你看改动内容，你确认才写',
+        allow: '直接改，不再逐个确认',
+        deny: '禁止任何写入 —— 只读模式',
+      },
+    },
+    network: {
+      name: '联网',
+      hint: '允许 Banana 访问外部网络（搜索、抓网页）。',
+      modes: {
+        ask: '每次联网都问你',
+        allow: '允许联网（默认）',
+        deny: '完全断网，只能用本地信息',
+      },
+    },
+  };
   for (const key of ['shell', 'write', 'network']) {
+    const spec = PERM_INFO[key];
     const row = document.createElement('div');
     row.className = 'perm-row';
     row.dataset.key = key;
-    row.innerHTML =
-      `<span class="perm-name">${permNames[key]}</span>` +
-      '<div class="seg">' +
-      ['ask', 'allow', 'deny']
-        .map((mode) => {
-          const label = mode === 'ask' ? '每次问' : mode === 'allow' ? '直接执行' : '禁止';
-          return `<button data-mode="${mode}" class="${info.permissions[key] === mode ? 'is-on' : ''}">${label}</button>`;
-        })
-        .join('') +
-      '</div>';
-    row.querySelector('.seg').addEventListener('click', async (event) => {
+    const seg = document.createElement('div');
+    seg.className = 'seg';
+    seg.innerHTML = ['ask', 'allow', 'deny']
+      .map((mode) => {
+        const label = mode === 'ask' ? '每次问' : mode === 'allow' ? '直接执行' : '禁止';
+        return `<button data-mode="${mode}" class="${info.permissions[key] === mode ? 'is-on' : ''}">${label}</button>`;
+      })
+      .join('');
+    seg.addEventListener('click', async (event) => {
       const button = event.target.closest('[data-mode]');
       if (!button) return;
-      const row = button.closest('.perm-row');
-      const key = row.dataset.key;
+      const mode = button.dataset.mode;
       // 立即反馈，失败再回滚并提示，避免看起来"点不动"
-      row.querySelectorAll('[data-mode]').forEach((item) => item.classList.toggle('is-on', item === button));
+      seg.querySelectorAll('[data-mode]').forEach((item) => item.classList.toggle('is-on', item === button));
+      const detail = row.querySelector('.perm-detail');
+      if (detail) detail.textContent = spec.modes[mode];
       try {
-        await post('action', { action: 'permission', name: key, value: button.dataset.mode });
+        await post('action', { action: 'permission', name: key, value: mode });
         await refresh(false);
+        toast(`「${spec.name}」已设为：${mode === 'ask' ? '每次问' : mode === 'allow' ? '直接执行' : '禁止'}`);
       } catch (error) {
-        row.querySelectorAll('[data-mode]').forEach((item) => item.classList.toggle('is-on', item.dataset.mode !== button.dataset.mode));
+        seg.querySelectorAll('[data-mode]').forEach((item) => item.classList.toggle('is-on', item.dataset.mode !== mode));
+        if (detail) detail.textContent = spec.modes[info.permissions[key]];
         toast('保存失败：' + error.message);
       }
     });
+
+    const block = document.createElement('div');
+    block.className = 'perm-block';
+    const head = document.createElement('div');
+    head.className = 'perm-head';
+    head.innerHTML = `<span class="perm-name">${escapeHtml(spec.name)}</span>`;
+    head.appendChild(seg);
+    const desc = document.createElement('div');
+    desc.className = 'hint';
+    desc.textContent = spec.hint;
+    const detail = document.createElement('div');
+    detail.className = 'perm-detail';
+    detail.textContent = spec.modes[info.permissions[key]];
+    block.append(head, desc, detail);
+    row.appendChild(block);
     permField.appendChild(row);
   }
+  const note = document.createElement('div');
+  note.className = 'hint perm-note';
+  note.textContent = '改动立刻生效，并保存在配置里（CLI 和 GUI 共用同一份设置）。不确定就保持「每次问」。';
+  permField.appendChild(note);
   body.appendChild(permField);
 
   const toolsField = document.createElement('div');
@@ -622,6 +1027,91 @@ function renderSettings() {
   body.appendChild(sysField);
 }
 
+// ---------------- 文件面板 ----------------
+const FILE_ICON = { dir: 'folder', file: 'file' };
+
+async function loadTree(path = '.', container = $('filesTree')) {
+  container.innerHTML = '<div class="hint" style="padding:8px 10px">读取中…</div>';
+  try {
+    const { entries } = await get(`files?path=${encodeURIComponent(path)}`);
+    container.innerHTML = '';
+    if (!entries.length) {
+      container.innerHTML = '<div class="hint" style="padding:8px 10px">（空目录）</div>';
+      return;
+    }
+    for (const entry of entries) {
+      const row = document.createElement('button');
+      row.className = 'file-row';
+      row.innerHTML =
+        `<span class="tool-caret">${entry.type === 'dir' ? svg('chevron') : ''}</span>` +
+        `<span>${svg(FILE_ICON[entry.type])}</span>` +
+        `<span class="f-name">${escapeHtml(entry.name)}</span>`;
+      row.addEventListener('click', async () => {
+        if (entry.type === 'dir') {
+          const holder = row.nextElementSibling;
+          if (holder?.classList.contains('file-children')) {
+            holder.remove();
+            row.classList.remove('is-open');
+            return;
+          }
+          row.classList.add('is-open');
+          const box = document.createElement('div');
+          box.className = 'file-children';
+          row.after(box);
+          await loadTree(entry.path, box);
+        } else {
+          await openFile(entry.path);
+        }
+      });
+      container.appendChild(row);
+    }
+  } catch (error) {
+    container.innerHTML = `<div class="hint" style="padding:8px 10px">${escapeHtml(error.message)}</div>`;
+  }
+}
+
+async function openFile(path) {
+  const box = $('filesPreview');
+  const body = $('previewBody');
+  box.hidden = false;
+  $('previewName').textContent = path;
+  body.textContent = '读取中…';
+  try {
+    const data = await get(`file?path=${encodeURIComponent(path)}`);
+    $('insertPath').dataset.path = path;
+    if (data.binary) body.textContent = `二进制文件（${data.bytes} 字节），无法预览。`;
+    else if (data.tooLarge) body.textContent = `文件较大（${data.bytes} 字节），未加载。`;
+    else body.textContent = data.content ?? '';
+    document.querySelectorAll('.file-row.is-active').forEach((node) => node.classList.remove('is-active'));
+  } catch (error) {
+    body.textContent = error.message;
+  }
+}
+
+async function toggleFiles() {
+  const panel = $('filesPanel');
+  panel.hidden = !panel.hidden;
+  if (!panel.hidden && !$('filesTree').childElementCount) {
+    $('filesTitle').textContent = `项目文件 · ${state.info?.workspace ?? ''}`;
+    await loadTree('.');
+  }
+}
+
+// ---------------- 工具输出详情 ----------------
+function toggleToolOutput(row, detail, isError) {
+  const existing = row.nextElementSibling;
+  if (existing?.classList.contains('tool-output')) {
+    existing.remove();
+    row.classList.remove('is-open');
+    return;
+  }
+  const pre = document.createElement('div');
+  pre.className = `tool-output${isError ? ' is-error' : ''}`;
+  pre.textContent = detail || '(无输出)';
+  row.after(pre);
+  row.classList.add('is-open');
+}
+
 // ---------------- 启动 ----------------
 function openSettings() {
   renderSettings();
@@ -640,7 +1130,10 @@ function bind() {
   $('abortBtn').innerHTML = svg('stop');
   $('toggleSidebar').innerHTML = svg('list');
   $('closeSettings').innerHTML = svg('x');
+  $('filesBtn').innerHTML = svg('panel');
+  $('closeFiles').innerHTML = svg('x');
   hydrate();
+  loadTheme();
 
   $('newChat').addEventListener('click', () => post('session', { action: 'new' }).then(() => refresh(true)));
   $('abortBtn').addEventListener('click', async () => { controller?.abort(); await post('abort'); });
@@ -654,6 +1147,18 @@ function bind() {
     if (event.target === $('settingsSheet')) closeSettings();
   });
   $('toggleSidebar').addEventListener('click', () => $('sidebar').classList.toggle('open'));
+  $('filesBtn').addEventListener('click', toggleFiles);
+  $('themeBtn').addEventListener('click', cycleTheme);
+  $('closeFiles').addEventListener('click', () => { $('filesPanel').hidden = true; });
+  $('insertPath').addEventListener('click', () => {
+    const path = $('insertPath').dataset.path;
+    if (!path) return;
+    const box = $('input');
+    box.value = box.value.trim() ? `${box.value.trim()} @${path} ` : `@${path} `;
+    box.focus();
+    box.setSelectionRange(box.value.length, box.value.length);
+    toast('已插入文件引用');
+  });
   $('approvalNo').addEventListener('click', () => closeApproval(false));
   $('approvalYes').addEventListener('click', () => closeApproval(true));
 
@@ -663,8 +1168,36 @@ function bind() {
   });
 
   $('composer').addEventListener('submit', (event) => { event.preventDefault(); send(); });
-  $('input').addEventListener('input', grow);
+  $('input').addEventListener('input', () => {
+    grow();
+    const value = $('input').value;
+    // / 开头 → 命令面板；结尾是 @路径 → 文件补全（服务端用 CLI 同一份逻辑）
+    if (/^\/[a-zA-Z?]*$/.test(value) && commandList.length) openPalette(value);
+    else if (/(^|\s)@[^\s]*$/.test(value)) requestFileComplete(value);
+    else closePalette();
+  });
   $('input').addEventListener('keydown', (event) => {
+    if (!$('commandPalette').hidden) {
+      if (event.key === 'ArrowDown') { event.preventDefault(); movePalette(1); return; }
+      if (event.key === 'ArrowUp') { event.preventDefault(); movePalette(-1); return; }
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        const picked = state.commandMatches?.[state.commandIndex ?? 0];
+        if (picked) applyCompletion(picked);
+        return;
+      }
+      // 文件补全面板里回车直接发送更顺手；命令面板里回车优先补全
+      if (event.key === 'Enter' && !event.shiftKey && $('commandPalette').dataset.kind === 'command' && state.commandMatches?.length) {
+        event.preventDefault();
+        const picked = state.commandMatches[state.commandIndex ?? 0];
+        if (picked) {
+          applyCompletion(picked);
+          renderCommandPalette(picked.item.name ?? '');
+          return;
+        }
+      }
+      if (event.key === 'Escape') { event.preventDefault(); closePalette(); return; }
+    }
     if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) { event.preventDefault(); send(); }
   });
 
@@ -672,6 +1205,7 @@ function bind() {
     if (event.key === 'Escape') {
       if (!$('approvalModal').hidden) closeApproval(false);
       else if (!$('settingsSheet').hidden) closeSettings();
+      else if (!$('filesPanel').hidden) $('filesPanel').hidden = true;
       else if ($('sidebar').classList.contains('open')) $('sidebar').classList.remove('open');
     }
   });
@@ -688,6 +1222,12 @@ function bind() {
 
 async function boot() {
   bind();
+  // 命令表来自服务端（与 CLI 同一份），拉不到也不影响对话
+  try {
+    commandList = (await get('commands')).commands ?? [];
+  } catch {
+    commandList = [];
+  }
   await refresh(true);
   grow();
   $('input').focus();

package/ui/index.html

@@ -42,6 +42,8 @@
             <button class="chip-btn" id="modelBtn" title="模型与权限">
               <span data-icon="chip"></span><span id="modelLabel">—</span>
             </button>
+            <button class="icon-btn" id="filesBtn" title="项目文件" aria-label="项目文件"></button>
+            <button class="icon-btn" id="themeBtn" title="切换主题" aria-label="切换主题"></button>
             <button class="icon-btn" id="abortBtn" title="停止" aria-label="停止" hidden></button>
           </div>
         </header>
@@ -51,7 +53,8 @@
         <div class="composer-wrap">
           <div class="attachments" id="attachments" hidden></div>
           <form class="composer" id="composer">
-            <textarea id="input" rows="1" placeholder="说点什么，Enter 发送，Shift+Enter 换行"></textarea>
+            <div class="command-palette" id="commandPalette" hidden></div>
+            <textarea id="input" rows="1" placeholder="说点什么；输入 / 调命令，@ 引文件，Enter 发送，Shift+Enter 换行"></textarea>
             <button class="send-btn" id="sendBtn" type="submit" title="发送" aria-label="发送"></button>
           </form>
           <div class="composer-hint" id="composerHint"></div>
@@ -69,6 +72,21 @@
       </div>
     </div>
 
+    <aside class="files-panel" id="filesPanel" hidden>
+      <header class="files-head">
+        <span id="filesTitle">项目文件</span>
+        <button class="icon-btn" id="closeFiles" aria-label="关闭文件面板"></button>
+      </header>
+      <div class="files-tree" id="filesTree"></div>
+      <div class="files-preview" id="filesPreview" hidden>
+        <div class="files-preview-head">
+          <span id="previewName"></span>
+          <button class="btn tiny" id="insertPath">插入到输入框</button>
+        </div>
+        <pre id="previewBody"></pre>
+      </div>
+    </aside>
+
     <div class="modal" id="approvalModal" hidden>
       <div class="modal-card">
         <div class="modal-head">

package/ui/style.css

@@ -19,8 +19,9 @@
   --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
 }
 
+/* 深色主题：默认跟随系统，也可以手动锁 light / dark */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme='light']) {
     --bg: #0e0e10;
     --panel: #131316;
     --panel-2: #1a1a1e;
@@ -35,6 +36,20 @@
   }
 }
 
+:root[data-theme='dark'] {
+  --bg: #0e0e10;
+  --panel: #131316;
+  --panel-2: #1a1a1e;
+  --line: #26262b;
+  --line-strong: #33333a;
+  --text: #f2f2f0;
+  --text-2: #a1a1a8;
+  --text-3: #74747c;
+  --inverse: #f2f2f0;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
+}
+
 * { box-sizing: border-box; }
 
 html, body {
@@ -486,6 +501,10 @@ pre.code code { border: 0; background: none; padding: 0; font-size: 12.6px; line
 .sheet[hidden] { display: none; }
 .sheet.is-closing { animation: fadeOut 160ms var(--ease-in) both; }
 @keyframes fadeOut { to { opacity: 0; } }
+@keyframes pop {
+  from { opacity: 0; transform: translateY(4px) scale(0.99); }
+  to { opacity: 1; transform: none; }
+}
 .sheet-panel {
   width: min(420px, 92vw);
   height: 100%;
@@ -534,11 +553,246 @@ pre.code code { border: 0; background: none; padding: 0; font-size: 12.6px; line
 .seg button:active { transform: scale(0.98); }
 .seg button.is-on { background: var(--inverse); color: var(--bg); }
 
-.perm-row { display: flex; align-items: center; gap: 10px; }
-.perm-name { width: 62px; flex: none; font-size: 13px; color: var(--text-2); }
+.perm-row { display: block; }
+.perm-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
+.perm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+.perm-name { font-size: 13px; color: var(--text); font-weight: 500; }
+.perm-head .seg { flex: none; width: 190px; }
+.perm-detail {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px dashed var(--line);
+  font-size: 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.perm-note { margin-top: 4px; }
+
+/* ---------- 空状态引导 ---------- */
+.empty-warn {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 520px;
+  margin: 4px auto 22px;
+  padding: 16px 18px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius);
+  background: var(--panel);
+  text-align: left;
+}
+.empty-warn strong { font-size: 14.5px; font-weight: 600; }
+.empty-warn span { font-size: 13px; color: var(--text-2); line-height: 1.6; }
+.empty-warn .btn { margin-top: 4px; }
+.empty-tips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px 18px;
+  margin-top: 22px;
+  font-size: 12px;
+  color: var(--text-3);
+}
+.empty-tips b { font-family: var(--mono); font-weight: 600; color: var(--text-2); }
+.thread-divider {
+  max-width: 780px;
+  margin: 6px auto 18px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--text-3);
+  font-size: 11.5px;
+}
+.thread-divider::before,
+.thread-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--line);
+}
+.thread-divider:empty::before,
+.thread-divider:empty::after { display: none; }
+
+/* ---------- 命令面板 ---------- */
+.command-palette {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: calc(100% + 8px);
+  z-index: 40;
+  padding: 5px;
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  background: var(--bg);
+  box-shadow: var(--shadow-lg);
+  animation: pop 170ms var(--ease) both;
+  max-height: 320px;
+  overflow: auto;
+}
+.command-palette[hidden] { display: none; }
+.cmd-item {
+  display: grid;
+  grid-template-columns: minmax(70px, 108px) 1fr auto;
+  align-items: baseline;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background 120ms var(--ease);
+}
+.cmd-item:hover, .cmd-item.is-on { background: var(--panel-2); }
+.cmd-name { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
+.cmd-summary { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmd-usage { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
+.cmd-empty { padding: 10px; font-size: 12.5px; color: var(--text-3); }
+
+/* 命令输出用等宽字体，和对话正文区分开 */
+.msg.cmd .msg-body { font-family: var(--mono); font-size: 12.6px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
+.cmd-out.is-error { color: var(--text); }
+.msg.cmd .msg-role { color: var(--text-3); }
 
 .hint { font-size: 12px; color: var(--text-3); line-height: 1.5; }
 
+/* ---------- 工具详情 ---------- */
+.tool-row { cursor: default; }
+.tool-row.is-open .t-detail { color: var(--text-2); }
+.tool-caret { transition: transform 200ms var(--ease); }
+.tool-row.is-open .tool-caret { transform: rotate(90deg); }
+.tool-output {
+  margin: 2px 0 8px;
+  padding: 10px 12px;
+  max-height: 320px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+  font-family: var(--mono);
+  font-size: 12.2px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  animation: fade 200ms var(--ease) both;
+}
+.tool-output.is-error { color: var(--text); border-color: var(--line-strong); }
+
+/* ---------- 文件面板 ---------- */
+.files-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(420px, 92vw);
+  background: var(--bg);
+  border-left: 1px solid var(--line);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  z-index: 30;
+  animation: slide 260ms var(--ease) both;
+}
+.files-panel[hidden] { display: none; }
+.files-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 54px;
+  padding: 0 10px 0 16px;
+  border-bottom: 1px solid var(--line);
+  font-size: 13px;
+  color: var(--text-2);
+}
+.files-tree { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
+.file-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 140ms var(--ease), color 140ms var(--ease);
+}
+.file-row:hover { background: var(--panel-2); color: var(--text); }
+.file-row.is-active { background: var(--panel-2); color: var(--text); }
+.tool-caret { flex: none; display: inline-grid; place-items: center; width: 13px; height: 13px; color: var(--text-3); }
+.file-row.is-open .tool-caret { transform: rotate(90deg); }
+.file-children { margin-left: 13px; padding-left: 7px; border-left: 1px solid var(--line); }
+.tool-row.is-clickable { cursor: pointer; }
+.tool-row.is-clickable:hover .t-detail { color: var(--text); }
+.tool-row.is-clickable .t-state { opacity: 1; }
+.file-row svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.file-row .f-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.files-preview { border-top: 1px solid var(--line); max-height: 46%; display: flex; flex-direction: column; }
+.files-preview-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px 8px 14px;
+  font-size: 12px;
+  color: var(--text-3);
+  font-family: var(--mono);
+}
+.files-preview pre {
+  margin: 0;
+  padding: 0 14px 14px;
+  overflow: auto;
+  font-family: var(--mono);
+  font-size: 12.2px;
+  line-height: 1.55;
+  color: var(--text-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.btn.tiny { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
+
+/* ---------- popover ---------- */
+.popover {
+  position: fixed;
+  z-index: 60;
+  min-width: 172px;
+  padding: 5px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg);
+  box-shadow: var(--shadow-lg);
+  animation: pop 160ms var(--ease) both;
+}
+.popover button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 130ms var(--ease), color 130ms var(--ease);
+}
+.popover button:hover { background: var(--panel-2); color: var(--text); }
+
+/* ---------- 侧边栏操作 ---------- */
+.session-item { position: relative; padding-right: 52px; }
+.s-actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity 140ms var(--ease); }
+.session-item:hover .s-actions, .session-item.is-active .s-actions { opacity: 1; }
+.s-act { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: var(--text-3); transition: background 130ms var(--ease), color 130ms var(--ease); }
+.s-act:hover { background: var(--panel-2); color: var(--text); }
+.s-act svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.session-item.is-active .s-title { padding-right: 0; }
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 1ms !important;