@vincentbanana/bananacli 0.4.8 → 0.4.9

package/dist/ui/app.js

@@ -31,6 +31,15 @@ const ICONS = {
   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"/>',
+  plug: '<path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0zM12 16v5"/>',
+  command: '<path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z"/>',
+  wrap: '<path d="M4 6h16M4 12h12a3 3 0 1 1 0 6h-3M4 18h4"/>',
+  expand: '<path d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5"/>',
+  copy: '<rect x="8" y="8" width="11" height="11" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>',
+  info: '<circle cx="12" cy="12" r="8"/><path d="M12 11v5M12 8h.01"/>',
+  minimize: '<path d="M5 12h14"/>',
+  maximize: '<rect x="6" y="6" width="12" height="12" rx="1"/>',
+  restore: '<rect x="5" y="8" width="9" height="9" rx="1"/><path d="M9 5h9v9"/>',
 };
 
 const TOOL_ICON = {
@@ -152,7 +161,20 @@ function highlightPreview(element, path, code) {
 
 
 // ---------------- 状态 ----------------
-const state = { info: null, sessions: [], attachments: [], busy: false, pendingApproval: null };
+const state = {
+  info: null,
+  sessions: [],
+  attachments: [],
+  busy: false,
+  pendingApproval: null,
+  settingsCategory: 'model',
+  settingsScroll: 0,
+  plugins: null,
+  preview: null,
+  overlay: null,
+  ccIndex: 0,
+  ccItems: [],
+};
 
 const THREAD = $('thread');
 
@@ -510,6 +532,132 @@ async function refreshSettings() {
   if (!$('settingsSheet').hidden) renderSettings();
 }
 
+// ---------------- 覆盖层与通用交互 ----------------
+const sleep = (ms) => new Promise((resolvePromise) => setTimeout(resolvePromise, ms));
+
+function hideAnimated(element, className = 'is-closing', ms = 180) {
+  if (!element || element.hidden) return Promise.resolve();
+  element.classList.add(className);
+  return sleep(ms).then(() => {
+    // 动画期间如果又被打开，就不要把面板藏起来
+    if (!element.classList.contains(className)) return;
+    element.hidden = true;
+    element.classList.remove(className);
+  });
+}
+
+function syncOverlayState() {
+  const open =
+    !$('commandCenter').hidden ||
+    !$('codeViewer').hidden ||
+    !$('settingsSheet').hidden ||
+    !$('filesPanel').hidden ||
+    !$('terminalPanel').hidden ||
+    !$('approvalModal').hidden;
+  document.body.classList.toggle('has-overlay', open);
+}
+
+function closeTopOverlay() {
+  if (!$('selectionTools').hidden) return hideSelectionTools();
+  if (!$('commandCenter').hidden) return closeCommandCenter();
+  if (!$('codeViewer').hidden) return closeViewer();
+  if (!$('settingsSheet').hidden) return closeSettings();
+  if (!$('filesPanel').hidden) return closeFiles();
+  if (!$('terminalPanel').hidden) return termClose();
+  if (!$('approvalModal').hidden) return closeApproval(false);
+  return false;
+}
+
+async function copyText(text, message = '已复制') {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const area = document.createElement('textarea');
+    area.value = text;
+    area.style.cssText = 'position:fixed;left:-9999px;top:0';
+    document.body.appendChild(area);
+    area.select();
+    document.execCommand('copy');
+    area.remove();
+  }
+  toast(message);
+}
+
+function insertComposer(text) {
+  const input = $('input');
+  input.value = text;
+  grow();
+  input.focus();
+  input.setSelectionRange(input.value.length, input.value.length);
+}
+
+function askAboutText(text, path, kind = 'code') {
+  const trimmed = text.trim();
+  if (!trimmed) return;
+  const clipped = trimmed.length > 12_000 ? `${trimmed.slice(0, 12_000)}\n…（已截断）` : trimmed;
+  const body =
+    kind === 'terminal'
+      ? `这段终端输出看起来有问题，帮我分析原因，并给出可以直接执行的修复步骤：\n\n\`\`\`\n${clipped}\n\`\`\``
+      : `请解释并检查这段代码${path ? `（${path}）` : ''}，指出潜在问题，必要时给出修改方案：\n\n\`\`\`\n${clipped}\n\`\`\``;
+  insertComposer(body);
+  toast(kind === 'terminal' ? '已带入终端输出，回车发送' : '已带入选中代码，回车发送');
+  hideSelectionTools();
+}
+
+function hideSelectionTools() {
+  const box = $('selectionTools');
+  box.hidden = true;
+  box.innerHTML = '';
+  syncOverlayState();
+}
+
+function showSelectionTools(x, y, buttons) {
+  const box = $('selectionTools');
+  box.innerHTML = '';
+  for (const item of buttons) {
+    const button = document.createElement('button');
+    button.textContent = item.label;
+    button.addEventListener('mousedown', (event) => event.preventDefault());
+    button.addEventListener('click', item.run);
+    box.appendChild(button);
+  }
+  box.hidden = false;
+  box.style.visibility = 'hidden';
+  box.style.left = '0px';
+  box.style.top = '0px';
+  const width = box.offsetWidth;
+  const height = box.offsetHeight;
+  box.style.left = `${Math.max(8, Math.min(x - width / 2, window.innerWidth - width - 8))}px`;
+  box.style.top = `${Math.max(8, Math.min(y - height - 10, window.innerHeight - height - 8))}px`;
+  box.style.visibility = '';
+  syncOverlayState();
+}
+
+function languageFor(path) {
+  const ext = String(path ?? '').split('.').pop()?.toLowerCase() ?? '';
+  return LANG_BY_EXT[ext] ?? '';
+}
+
+/** 代码容器：左侧行号 + 右侧高亮代码，整体共用一个滚动区域。 */
+function renderCode(container, code, path) {
+  const lines = String(code ?? '').split('\n');
+  const gutter = lines.map((_, index) => index + 1).join('\n');
+  const lang = languageFor(path);
+  container.innerHTML =
+    `<div class="code-scroll"><pre class="code-gutter">${gutter}</pre>` +
+    `<pre class="code-pre"><code${lang ? ` class="language-${escapeHtml(lang)}"` : ''}></code></pre></div>`;
+  const node = container.querySelector('code');
+  node.textContent = String(code ?? '');
+  if (window.hljs && lang && String(code ?? '').length <= 300_000) {
+    try {
+      window.hljs.highlightElement(node);
+    } catch {
+      /* 单个文件失败保持纯文本 */
+    }
+  }
+}
+
+
 // ---------------- 聊天流 ----------------
 let controller = null;
 
@@ -721,6 +869,11 @@ const THEME_LABEL = { auto: '跟随系统', light: '浅色', dark: '深色' };
 const THEME_ICON = { auto: 'contrast', light: 'sun', dark: 'moon' };
 
 function applyTheme(theme) {
+  // 主题切换时短暂开启颜色过渡，避免整页硬切
+  const root = document.documentElement;
+  root.classList.add('theme-anim');
+  clearTimeout(applyTheme.timer);
+  applyTheme.timer = setTimeout(() => root.classList.remove('theme-anim'), 300);
   if (theme === 'auto') delete document.documentElement.dataset.theme;
   else document.documentElement.dataset.theme = theme;
   try {
@@ -941,231 +1094,620 @@ async function attach(file) {
   toast('已附加 ' + file.name);
 }
 
-// ---------------- 设置面板 ----------------
+// ---------------- 控制中心 ----------------
+const SETTINGS_NAV = [
+  { id: 'model', label: '模型', icon: 'chip' },
+  { id: 'appearance', label: '外观', icon: 'sun' },
+  { id: 'terminal', label: '终端', icon: 'terminal' },
+  { id: 'workspace', label: '工作区', icon: 'folder' },
+  { id: 'plugins', label: '插件', icon: 'plug' },
+  { id: 'about', label: '关于', icon: 'info' },
+];
+
+function openSettings(category) {
+  if (category) state.settingsCategory = category;
+  state.settingsScroll = 0;
+  renderSettings();
+  const sheet = $('settingsSheet');
+  sheet.classList.remove('is-closing');
+  sheet.hidden = false;
+  document.body.classList.add('has-overlay');
+  requestAnimationFrame(() => {
+    $('settingsBody').scrollTop = 0;
+    $('settingsSheet').querySelector('.settings-panel')?.focus?.();
+  });
+}
+
+function closeSettings() {
+  const sheet = $('settingsSheet');
+  if (sheet.hidden) return;
+  state.settingsScroll = $('settingsBody').scrollTop;
+  void hideAnimated(sheet, 'is-closing', 170).then(syncOverlayState);
+  $('input')?.focus();
+}
+
+function settingsCard() {
+  const card = document.createElement('div');
+  card.className = 'set-card';
+  return card;
+}
+
+function settingsRow(title, desc, control) {
+  const row = document.createElement('div');
+  row.className = 'set-row';
+  const copy = document.createElement('div');
+  copy.className = 'set-copy';
+  copy.innerHTML = `<strong>${escapeHtml(title)}</strong>${desc ? `<span>${escapeHtml(desc)}</span>` : ''}`;
+  row.appendChild(copy);
+  if (control) {
+    const holder = document.createElement('div');
+    holder.className = 'set-control';
+    holder.appendChild(control);
+    row.appendChild(holder);
+  }
+  return row;
+}
+
+function settingsButton(label, onClick, primary = false) {
+  const button = document.createElement('button');
+  button.className = `btn tiny${primary ? ' primary' : ''}`;
+  button.textContent = label;
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+function settingsInput(value, placeholder, type = 'text') {
+  const input = document.createElement('input');
+  input.type = type;
+  input.value = value ?? '';
+  input.placeholder = placeholder ?? '';
+  input.spellcheck = false;
+  return input;
+}
+
+function settingsSwitch(on, onChange) {
+  const button = document.createElement('button');
+  button.className = `switch${on ? ' is-on' : ''}`;
+  button.type = 'button';
+  button.setAttribute('role', 'switch');
+  button.setAttribute('aria-checked', String(Boolean(on)));
+  button.addEventListener('click', () => {
+    const next = !button.classList.contains('is-on');
+    button.classList.toggle('is-on', next);
+    button.setAttribute('aria-checked', String(next));
+    onChange(next);
+  });
+  return button;
+}
+
+function settingsSeg(options, current, onChange) {
+  const seg = document.createElement('div');
+  seg.className = 'seg';
+  for (const option of options) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.value = option.value;
+    button.textContent = option.label;
+    button.classList.toggle('is-on', option.value === current);
+    button.addEventListener('click', () => {
+      if (button.classList.contains('is-on')) return;
+      seg.querySelectorAll('button').forEach((item) => item.classList.toggle('is-on', item === button));
+      onChange(option.value);
+    });
+    seg.appendChild(button);
+  }
+  return seg;
+}
+
+function settingsSection(title, sub) {
+  const section = document.createElement('section');
+  section.className = 'settings-section';
+  section.innerHTML = `<h3 class="settings-title">${escapeHtml(title)}</h3>${sub ? `<p class="settings-sub">${escapeHtml(sub)}</p>` : ''}`;
+  return section;
+}
+
+async function saveSetting(action, payload) {
+  try {
+    const result = await post('action', { action, ...payload });
+    if (result?.info) state.info = result.info;
+    return result;
+  } catch (error) {
+    toast('保存失败：' + (error?.message ?? error));
+    throw error;
+  }
+}
+
 function renderSettings() {
   const info = state.info;
+  if (!info) return;
   const body = $('settingsBody');
+  const nav = $('settingsNav');
+  const scroll = body.scrollTop || state.settingsScroll || 0;
+  nav.innerHTML = '';
+  for (const item of SETTINGS_NAV) {
+    const button = document.createElement('button');
+    button.innerHTML = `${svg(item.icon)}<span>${item.label}</span>`;
+    button.classList.toggle('is-on', item.id === state.settingsCategory);
+    button.addEventListener('click', () => {
+      if (state.settingsCategory === item.id) return;
+      state.settingsCategory = item.id;
+      state.settingsScroll = 0;
+      renderSettings();
+      body.scrollTop = 0;
+    });
+    nav.appendChild(button);
+  }
+
   body.innerHTML = '';
+  const category = state.settingsCategory;
+  if (category === 'model') renderModelSettings(body);
+  else if (category === 'appearance') renderAppearanceSettings(body);
+  else if (category === 'terminal') renderTerminalSettings(body);
+  else if (category === 'workspace') renderWorkspaceSettings(body);
+  else if (category === 'plugins') renderPluginSettings(body);
+  else renderAboutSettings(body);
+  requestAnimationFrame(() => { body.scrollTop = scroll; });
+}
 
-  const providerField = document.createElement('div');
-  providerField.className = 'field';
-  providerField.innerHTML =
-    '<label>Provider</label><select>' +
-    info.providers.map((item) => `<option value="${item.name}" ${item.current ? 'selected' : ''}>${item.name} — ${item.model}</option>`).join('') +
-    '</select>';
-  providerField.querySelector('select').addEventListener('change', async (event) => {
-    await post('action', { action: 'provider', name: event.target.value });
-    await refreshSettings();
+function renderModelSettings(body) {
+  const info = state.info;
+  const active = info.providers.find((item) => item.current);
+  const section = settingsSection('模型', '选择 provider、模型和密钥。CLI 与 GUI 共用同一份配置。');
+
+  const card = settingsCard();
+  const providerSelect = document.createElement('select');
+  providerSelect.innerHTML = info.providers
+    .map((item) => `<option value="${escapeHtml(item.name)}" ${item.current ? 'selected' : ''}>${escapeHtml(item.name)} · ${escapeHtml(item.model)}</option>`)
+    .join('');
+  providerSelect.addEventListener('change', async () => {
+    await saveSetting('provider', { name: providerSelect.value });
+    await refresh(false);
+    renderSettings();
+    toast('已切换到 ' + providerSelect.value);
   });
-  body.appendChild(providerField);
-
-  const modelField = document.createElement('div');
-  modelField.className = 'field';
-  modelField.innerHTML = `<label>模型</label><div class="row"><input value="${escapeHtml(info.provider.model)}" /><button class="btn">保存</button></div>`;
-  modelField.querySelector('button').addEventListener('click', async () => {
-    const value = modelField.querySelector('input').value.trim();
-    if (!value) return;
-    await post('action', { action: 'model', value });
-    await refreshSettings();
+  card.appendChild(settingsRow('Provider', '切换后新消息使用这个 provider。', providerSelect));
+
+  const modelInput = settingsInput(info.provider.model, '模型名，例如 deepseek-chat');
+  const saveModel = settingsButton('保存', async () => {
+    const value = modelInput.value.trim();
+    if (!value) return toast('请填写模型名');
+    await saveSetting('model', { value });
+    await refresh(false);
+    renderSettings();
     toast('模型已更新');
-  });
-  modelField.querySelector('input').addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') modelField.querySelector('button').click();
-  });
-  body.appendChild(modelField);
-
-  // API key：留空表示不修改；提示可以用环境变量代替
-  const active = info.providers.find((item) => item.current);
-  const keyField = document.createElement('div');
-  keyField.className = 'field';
-  const keyPlaceholder = active?.keySaved
-    ? '已保存（留空表示不修改）'
-    : active?.keyEnv
-      ? `默认读取环境变量 ${active.keyEnv}（当前${active.keyReady ? '已设置' : '未设置'}）`
-      : '粘贴 API key';
-  keyField.innerHTML =
-    '<label>API Key</label>' +
-    `<div class="row"><input type="password" placeholder="${keyPlaceholder}" /><button class="btn">保存</button></div>` +
-    `<div class="hint">${active?.keyEnv ? `默认读取环境变量 ${active.keyEnv}；` : ''}更安全的做法是只设环境变量，配置文件里只留变量名。</div>`;
-  keyField.querySelector('button').addEventListener('click', async () => {
-    const input = keyField.querySelector('input');
-    const value = input.value.trim();
-    if (!value) {
-      toast('留空表示不修改');
-      return;
-    }
-    await post('action', { action: 'apiKey', value });
-    input.value = '';
-    await refreshSettings();
+  }, true);
+  modelInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') saveModel.click(); });
+  const modelBox = document.createElement('div');
+  modelBox.style.display = 'flex';
+  modelBox.style.gap = '6px';
+  modelBox.append(modelInput, saveModel);
+  card.appendChild(settingsRow('模型', '保存后立即生效。', modelBox));
+
+  const keyInput = settingsInput('', active?.keySaved ? '已保存，留空表示不修改' : '粘贴 API Key', 'password');
+  const saveKey = settingsButton('保存', async () => {
+    const value = keyInput.value.trim();
+    if (!value) return toast('留空表示不修改');
+    await saveSetting('apiKey', { value });
+    keyInput.value = '';
+    await refresh(false);
+    renderSettings();
     toast('API Key 已保存');
+  }, true);
+  keyInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') saveKey.click(); });
+  const keyBox = document.createElement('div');
+  keyBox.style.display = 'flex';
+  keyBox.style.gap = '6px';
+  keyBox.append(keyInput, saveKey);
+  const keyHint = active?.keyEnv
+    ? `也可以只设置环境变量 ${active.keyEnv}，当前${active.keyReady ? '已就绪' : '未设置'}。`
+    : '更安全的做法是使用环境变量，不要把 key 写进仓库。';
+  card.appendChild(settingsRow('API Key', keyHint, keyBox));
+  card.appendChild(
+    settingsRow(
+      '显示思考过程',
+      '推理模型会展示思考内容；关闭后只保留最终回答。',
+      settingsSwitch(info.showReasoning !== false, async (on) => {
+        await saveSetting('showReasoning', { value: String(on) });
+        await refresh(false);
+        toast(on ? '已显示思考过程' : '已隐藏思考过程');
+      }),
+    ),
+  );
+  section.appendChild(card);
+
+  const promptCard = settingsCard();
+  const stack = document.createElement('div');
+  stack.className = 'set-stack';
+  stack.innerHTML = '<div class="set-copy"><strong>系统提示词</strong><span>给模型的长期指令，会影响所有对话。</span></div>';
+  const area = document.createElement('textarea');
+  area.value = info.systemPrompt ?? '';
+  area.placeholder = '例如：回答尽量简洁，优先给可执行命令。';
+  stack.appendChild(area);
+  const actions = document.createElement('div');
+  actions.className = 'settings-actions';
+  actions.append(
+    settingsButton('恢复默认', async () => {
+      area.value = '';
+      await saveSetting('system', { value: '' });
+      await refresh(false);
+      renderSettings();
+      toast('已清空，使用内置系统提示词');
+    }),
+    settingsButton('保存提示词', async () => {
+      await saveSetting('system', { value: area.value });
+      await refresh(false);
+      toast('系统提示词已保存');
+    }, true),
+  );
+  stack.appendChild(actions);
+  promptCard.appendChild(stack);
+  section.appendChild(promptCard);
+  body.appendChild(section);
+}
+
+function renderAppearanceSettings(body) {
+  const saved = (() => {
+    try {
+      return localStorage.getItem('banana-theme') ?? 'auto';
+    } catch {
+      return 'auto';
+    }
+  })();
+  const section = settingsSection('外观', '黑白主题，柔和对比。切换会同步终端和代码高亮。');
+  const card = settingsCard();
+  card.appendChild(
+    settingsRow(
+      '主题',
+      '跟随系统最省心；也可以固定浅色或深色。',
+      settingsSeg(
+        [
+          { value: 'auto', label: '跟随系统' },
+          { value: 'light', label: '浅色' },
+          { value: 'dark', label: '深色' },
+        ],
+        saved,
+        (value) => {
+          applyTheme(value);
+          toast('主题：' + (value === 'auto' ? '跟随系统' : value === 'dark' ? '深色' : '浅色'));
+        },
+      ),
+    ),
+  );
+  section.appendChild(card);
+
+  const motion = settingsCard();
+  motion.appendChild(
+    settingsRow('减少动效', '关闭大部分弹簧和入场动画，适合晕动或低性能设备。', settingsSwitch(
+      document.documentElement.dataset.reduceMotion === '1',
+      (on) => {
+        if (on) document.documentElement.dataset.reduceMotion = '1';
+        else delete document.documentElement.dataset.reduceMotion;
+        localStorage.setItem('banana.reduceMotion', on ? '1' : '0');
+        toast(on ? '已减少动效' : '已恢复弹力动画');
+      },
+    )),
+  );
+  section.appendChild(motion);
+  body.appendChild(section);
+}
+
+function renderTerminalSettings(body) {
+  const section = settingsSection('终端', '真实 PTY，支持 PowerShell、cmd、Git Bash 和 WSL。关面板不会杀进程。');
+  const card = settingsCard();
+
+  card.appendChild(
+    settingsRow(
+      '字号',
+      '只影响终端显示，不改变 shell 行为。',
+      settingsSeg(
+        [12, 13, 14, 15, 16].map((size) => ({ value: String(size), label: `${size}px` })),
+        String(term.fontSize),
+        (value) => {
+          term.fontSize = Number(value) || 13;
+          localStorage.setItem(TERM_STORAGE.fontSize, String(term.fontSize));
+          termRestyle();
+        },
+      ),
+    ),
+  );
+
+  const shellSelect = document.createElement('select');
+  const preferred = localStorage.getItem(TERM_STORAGE.shell) || term.defaultShell || 'powershell';
+  shellSelect.innerHTML = (term.shells.length ? term.shells : [{ id: 'powershell', name: 'PowerShell' }])
+    .map((shell) => `<option value="${escapeHtml(shell.id)}" ${shell.id === preferred ? 'selected' : ''}>${escapeHtml(shell.name)}</option>`)
+    .join('');
+  shellSelect.addEventListener('change', () => {
+    localStorage.setItem(TERM_STORAGE.shell, shellSelect.value);
+    const picker = $('termShell');
+    if (picker) picker.value = shellSelect.value;
+    toast('新标签将使用 ' + (term.shells.find((item) => item.id === shellSelect.value)?.name ?? shellSelect.value));
   });
-  keyField.querySelector('input').addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') keyField.querySelector('button').click();
-  });
-  body.appendChild(keyField);
-
-  // 工作区：换目录后所有文件工具和命令都跟着换，所以放显眼位置
-  const workspaceField = document.createElement('div');
-  workspaceField.className = 'field';
-  workspaceField.innerHTML =
-    '<label>工作区</label>' +
-    `<div class="row"><input value="${escapeHtml(info.workspace ?? '')}" spellcheck="false" /><button class="btn">切换</button></div>` +
-    '<div class="hint">Banana 只能读写这个目录下的文件，命令也在这里执行。绝对路径，例如 D:\\project。</div>';
-  workspaceField.querySelector('button').addEventListener('click', async () => {
-    const input = workspaceField.querySelector('input');
+  card.appendChild(settingsRow('默认 Shell', '新建终端标签时使用。', shellSelect));
+
+  card.appendChild(
+    settingsRow(
+      '停靠位置',
+      '底部会盖住输入框；也可以靠左、靠右或浮动。',
+      settingsSeg(
+        [
+          { value: 'bottom', label: '底部' },
+          { value: 'left', label: '左侧' },
+          { value: 'right', label: '右侧' },
+          { value: 'float', label: '浮动' },
+        ],
+        term.dock,
+        (value) => {
+          termApplyDock(value);
+          if (!term.open) termOpen();
+          setTimeout(() => termActiveTab()?.terminal.focus(), 220);
+          renderSettings();
+        },
+      ),
+    ),
+  );
+
+  const openBtn = settingsButton(term.open ? '隐藏终端' : '打开终端', () => {
+    closeSettings();
+    if (term.open) termClose();
+    else termOpen();
+  }, true);
+  card.appendChild(settingsRow('终端面板', '快捷键 Ctrl+`，Esc 也可以收起。', openBtn));
+  section.appendChild(card);
+
+  const help = settingsSection('常用快捷键', '');
+  const helpCard = settingsCard();
+  for (const [keys, text] of [
+    ['Ctrl+`', '打开 / 收起终端'],
+    ['Ctrl+K', '全局命令中心'],
+    ['Esc', '关闭最上层面板'],
+    ['Enter / Shift+Enter', '发送 / 换行'],
+    ['@', '引用项目文件'],
+    ['/', '打开命令面板'],
+  ]) {
+    const row = settingsRow(keys, text);
+    row.querySelector('.set-copy strong').style.fontFamily = 'var(--mono)';
+    helpCard.appendChild(row);
+  }
+  help.appendChild(helpCard);
+  body.append(section, help);
+}
+
+function renderWorkspaceSettings(body) {
+  const info = state.info;
+  const section = settingsSection('工作区', '文件工具和命令都只能在这个目录下执行。');
+  const card = settingsCard();
+  const input = settingsInput(info.workspace ?? '', '绝对路径，例如 D:\\project');
+  const switchBtn = settingsButton('切换', async () => {
     const value = input.value.trim();
-    if (!value) {
-      toast('请填写目录路径');
-      return;
-    }
+    if (!value) return toast('请填写目录路径');
     try {
-      await post('action', { action: 'workspace', value });
-      await refreshSettings();
+      await saveSetting('workspace', { value });
+      await refresh(false);
       renderHeader();
+      renderSettings();
+      $('filesTree').innerHTML = '';
       toast('工作区已切换到 ' + value);
     } catch (error) {
       toast('切换失败：' + (error?.message ?? error));
     }
-  });
-  workspaceField.querySelector('input').addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') workspaceField.querySelector('button').click();
-  });
-  body.appendChild(workspaceField);
-
-  const terminalField = document.createElement('div');
-  terminalField.className = 'field';
-  terminalField.innerHTML =
-    '<label>终端</label><div class="row"><button class="btn">在界面里打开终端</button>' +
-    '<select class="tiny-select" aria-label="终端字号">' +
-    [12, 13, 14, 15, 16].map((size) => `<option value="${size}" ${size === term.fontSize ? 'selected' : ''}>${size}px</option>`).join('') +
-    '</select></div>' +
-    '<div class="hint">真实 shell（cmd / PowerShell / Git Bash / WSL），支持颜色和交互；停靠位置可在终端右上角切换，Ctrl+` 开关。</div>';
-  terminalField.querySelector('button').addEventListener('click', () => {
-    closeSettings();
-    termOpen();
-  });
-  terminalField.querySelector('select').addEventListener('change', (event) => {
-    term.fontSize = Number(event.target.value) || 13;
-    localStorage.setItem(TERM_STORAGE.fontSize, String(term.fontSize));
-    termRestyle();
-  });
-  body.appendChild(terminalField);
-
-  const permField = document.createElement('div');
-  permField.className = 'field';
-  permField.innerHTML = '<label>权限</label>';
-  // 权限是小白最容易懵的地方，所以每种模式都写清楚"改了会发生什么"
+  }, true);
+  input.addEventListener('keydown', (event) => { if (event.key === 'Enter') switchBtn.click(); });
+  const box = document.createElement('div');
+  box.style.display = 'flex';
+  box.style.gap = '6px';
+  box.append(input, switchBtn);
+  card.appendChild(settingsRow('当前工作区', '切换后插件也会重新加载项目目录。', box));
+  section.appendChild(card);
+
+  const permSection = settingsSection('权限', '不确定就保持「每次问」。改动会立刻保存，CLI 和 GUI 共用。');
+  const permCard = settingsCard();
   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: '完全断网，只能用本地信息',
-      },
-    },
+    shell: { name: '执行命令', hint: '运行 npm test、git status 等命令。' },
+    write: { name: '写入文件', hint: '新建或修改文件，可用左下角撤销回滚。' },
+    network: { name: '联网', hint: '搜索和抓取网页。' },
   };
   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;
-    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 mode = button.dataset.mode;
-      // 立即反馈，失败再回滚并提示，避免看起来"点不动"
-      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];
+    permCard.appendChild(
+      settingsRow(
+        spec.name,
+        spec.hint,
+        settingsSeg(
+          [
+            { value: 'ask', label: '每次问' },
+            { value: 'allow', label: '允许' },
+            { value: 'deny', label: '禁止' },
+          ],
+          info.permissions[key],
+          async (mode) => {
+            await saveSetting('permission', { name: key, value: mode });
+            await refresh(false);
+            toast(`「${spec.name}」已设为：${mode === 'ask' ? '每次问' : mode === 'allow' ? '允许' : '禁止'}`);
+          },
+        ),
+      ),
+    );
+  }
+  permSection.appendChild(permCard);
+  body.append(section, permSection);
+}
+
+function pluginBadge(text) {
+  const badge = document.createElement('span');
+  badge.className = 'plugin-badge';
+  badge.textContent = text;
+  return badge;
+}
+
+function renderPluginSettings(body) {
+  const section = settingsSection('插件工坊', '插件就是 .mjs 文件。可以生成模板、查看错误、试运行和启用停用。');
+
+  const actions = document.createElement('div');
+  actions.className = 'settings-actions';
+  actions.style.justifyContent = 'flex-start';
+  actions.style.marginBottom = '12px';
+  actions.append(
+    settingsButton('重新加载', async () => {
       try {
-        await post('action', { action: 'permission', name: key, value: mode });
+        state.plugins = await post('plugins', { action: 'reload' });
         await refresh(false);
-        toast(`「${spec.name}」已设为：${mode === 'ask' ? '每次问' : mode === 'allow' ? '直接执行' : '禁止'}`);
+        renderSettings();
+        toast('插件已重新加载');
       } catch (error) {
-        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);
+        toast('重载失败：' + (error?.message ?? error));
       }
-    });
+    }, true),
+    settingsButton('新建模板', async () => {
+      try {
+        const result = await post('plugins', { action: 'create' });
+        state.plugins = result;
+        await refresh(false);
+        renderSettings();
+        toast('已创建 ' + result.file);
+      } catch (error) {
+        toast('创建失败：' + (error?.message ?? error));
+      }
+    }),
+    settingsButton('打开全局目录', () => {
+      post('plugins', { action: 'open', scope: 'global' }).catch((error) => toast('打开失败：' + error.message));
+    }),
+    settingsButton('打开项目目录', () => {
+      post('plugins', { action: 'open', scope: 'project' }).catch((error) => toast('打开失败：' + error.message));
+    }),
+  );
+  section.appendChild(actions);
+
+  const list = document.createElement('div');
+  list.innerHTML = '<div class="plugin-empty">读取插件中…</div>';
+  section.appendChild(list);
+  body.appendChild(section);
+
+  void (async () => {
+    let data;
+    try {
+      data = await get('plugins');
+      state.plugins = data;
+    } catch (error) {
+      list.innerHTML = `<div class="plugin-empty">${escapeHtml(error.message)}</div>`;
+      return;
+    }
+    if (state.settingsCategory !== 'plugins') return;
+    list.innerHTML = '';
+    if (!data.plugins?.length) {
+      const empty = document.createElement('div');
+      empty.className = 'plugin-empty';
+      empty.textContent = '还没有插件。点「新建模板」生成第一个，或把 .mjs 放进插件目录。';
+      list.appendChild(empty);
+    }
+    for (const plugin of data.plugins ?? []) {
+      list.appendChild(renderPluginCard(plugin));
+    }
+    const dirs = document.createElement('div');
+    dirs.className = 'hint';
+    dirs.style.marginTop = '12px';
+    dirs.textContent = '全局：' + (data.dirs?.find((dir) => dir.id === 'global')?.path ?? '') + '　项目：' + (data.dirs?.find((dir) => dir.id === 'project')?.path ?? '');
+    list.appendChild(dirs);
+  })();
+}
 
-    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);
+function renderPluginCard(plugin) {
+  const card = document.createElement('div');
+  card.className = `plugin-card${plugin.enabled ? '' : ' is-off'}`;
+  const main = document.createElement('div');
+  main.className = 'plugin-main';
+  const name = document.createElement('div');
+  name.className = 'plugin-name';
+  name.textContent = plugin.name || plugin.file.split(/[\\/]/).pop();
+  name.appendChild(pluginBadge(plugin.ok ? (plugin.disabled ? '已停用' : '已加载') : '加载失败'));
+  if (plugin.approval && plugin.approval !== 'never') name.appendChild(pluginBadge(plugin.approval));
+  main.appendChild(name);
+  const desc = document.createElement('div');
+  desc.className = 'plugin-desc';
+  desc.textContent = plugin.description || (plugin.ok ? '没有填写说明。' : '插件文件存在错误，模型暂时无法调用。');
+  main.appendChild(desc);
+  const file = document.createElement('div');
+  file.className = 'plugin-file';
+  file.textContent = plugin.file;
+  main.appendChild(file);
+  if (plugin.error) {
+    const error = document.createElement('div');
+    error.className = 'plugin-error';
+    error.textContent = plugin.error;
+    main.appendChild(error);
   }
-  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');
-  toolsField.className = 'field';
-  toolsField.innerHTML =
-    '<label>工具</label><div class="hint">' +
-    info.tools.map((tool) => `${escapeHtml(tool.name)} <span style="opacity:.6">${tool.permission}</span>`).join('、') +
-    '</div>';
-  body.appendChild(toolsField);
-
-  const sysField = document.createElement('div');
-  sysField.className = 'field';
-  sysField.innerHTML = '<label>系统提示词</label>';
-  const textarea = document.createElement('textarea');
-  textarea.rows = 6;
-  textarea.style.cssText = 'border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;resize:vertical';
-  textarea.value = state.systemPrompt ?? '';
-  sysField.append(textarea);
-  const saveRow = document.createElement('div');
-  saveRow.innerHTML = '<button class="btn">保存提示词</button>';
-  saveRow.querySelector('button').addEventListener('click', async () => {
-    await post('action', { action: 'system', value: textarea.value });
-    toast('已保存');
-  });
-  sysField.append(saveRow);
-  body.appendChild(sysField);
+
+  const acts = document.createElement('div');
+  acts.className = 'plugin-actions';
+  if (plugin.ok) {
+    acts.appendChild(
+      settingsSwitch(plugin.enabled, async (on) => {
+        try {
+          const result = await post('plugins', { action: 'toggle', name: plugin.name, disabled: !on });
+          state.plugins = result;
+          await refresh(false);
+          renderSettings();
+          toast(on ? `已启用 ${plugin.name}` : `已停用 ${plugin.name}`);
+        } catch (error) {
+          toast('操作失败：' + (error?.message ?? error));
+          renderSettings();
+        }
+      }),
+    );
+    const test = settingsButton('试运行', () => {
+      const existing = card.querySelector('.plugin-test');
+      if (existing) {
+        existing.remove();
+        return;
+      }
+      const box = document.createElement('div');
+      box.className = 'plugin-test';
+      box.style.cssText = 'margin-top:10px;display:flex;flex-direction:column;gap:6px';
+      const area = document.createElement('textarea');
+      area.className = 'plugin-json';
+      area.value = '{\n  "text": "hello"\n}';
+      const run = settingsButton('运行', async () => {
+        output.textContent = '运行中…';
+        try {
+          const result = await post('plugins', { action: 'test', file: plugin.file, input: area.value });
+          output.textContent = result.result ?? '(无输出)';
+        } catch (error) {
+          output.textContent = '失败：' + (error?.message ?? error);
+        }
+      }, true);
+      const output = document.createElement('pre');
+      output.className = 'plugin-error';
+      output.textContent = '输入 JSON，然后点运行。';
+      box.append(area, run, output);
+      main.appendChild(box);
+    });
+    acts.appendChild(test);
+  }
+  card.append(main, acts);
+  return card;
+}
+
+function renderAboutSettings(body) {
+  const info = state.info;
+  const section = settingsSection('关于 Banana', '一个把 CLI 内核完整搬进图形界面的本地 agent。');
+  const card = settingsCard();
+  card.appendChild(settingsRow('版本', 'CLI 与 GUI 使用同一套 agent 循环和工具。', pluginBadge('v' + (info.version ?? '0.6.0'))));
+  card.appendChild(settingsRow('工作区', info.workspace ?? '', null));
+  card.appendChild(settingsRow('工具数量', `${info.tools?.length ?? 0} 个`, null));
+  card.appendChild(settingsRow('平台', info.platform === 'win32' ? 'Windows' : info.platform === 'darwin' ? 'macOS' : 'Linux', null));
+  section.appendChild(card);
+
+  const tip = settingsCard();
+  tip.appendChild(settingsRow('命令中心', '按 Ctrl+K 搜索会话、文件、动作和设置。', settingsButton('打开', () => { closeSettings(); openCommandCenter(); })));
+  tip.appendChild(settingsRow('项目文件', '代码支持行号、全屏查看和选中后问 AI。', settingsButton('打开', () => { closeSettings(); openFiles(); })));
+  section.appendChild(tip);
+  body.appendChild(section);
 }
 
 // ---------------- 文件面板 ----------------
+
+
 const FILE_ICON = { dir: 'folder', file: 'file' };
+const FILE_STORAGE = { width: 'banana.files.width', tree: 'banana.files.tree', wrap: 'banana.files.wrap' };
 
 async function loadTree(path = '.', container = $('filesTree')) {
   container.innerHTML = '<div class="hint" style="padding:8px 10px">读取中…</div>';
@@ -1179,6 +1721,7 @@ async function loadTree(path = '.', container = $('filesTree')) {
     entries.forEach((entry, index) => {
       const row = document.createElement('button');
       row.className = 'file-row';
+      row.dataset.path = entry.path;
       row.style.setProperty('--i', String(Math.min(index, 14)));
       row.innerHTML =
         `<span class="tool-caret">${entry.type === 'dir' ? svg('chevron') : ''}</span>` +
@@ -1208,33 +1751,141 @@ async function loadTree(path = '.', container = $('filesTree')) {
   }
 }
 
+function applyFilesLayout() {
+  const panel = $('filesPanel');
+  const width = Number(localStorage.getItem(FILE_STORAGE.width));
+  if (width) panel.style.setProperty('--files-width', `${Math.max(340, Math.min(width, window.innerWidth * 0.92))}px`);
+  const tree = Number(localStorage.getItem(FILE_STORAGE.tree));
+  if (tree) panel.style.setProperty('--tree-height', `${tree}px`);
+  const wrap = localStorage.getItem(FILE_STORAGE.wrap) === '1';
+  $('previewBody').classList.toggle('is-wrap', wrap);
+  $('viewerBody').classList.toggle('is-wrap', wrap);
+  $('previewWrap').classList.toggle('is-on', wrap);
+  $('viewerWrap').classList.toggle('is-on', wrap);
+}
+
+function openFiles() {
+  const panel = $('filesPanel');
+  panel.classList.remove('is-closing');
+  panel.hidden = false;
+  applyFilesLayout();
+  document.body.classList.add('has-overlay');
+  $('filesTitle').textContent = `项目文件 · ${state.info?.workspace ?? ''}`;
+  if (!$('filesTree').childElementCount) void loadTree('.');
+}
+
+function closeFiles() {
+  const panel = $('filesPanel');
+  if (panel.hidden) return;
+  void hideAnimated(panel, 'is-closing', 170).then(() => {
+    syncOverlayState();
+    $('input')?.focus();
+  });
+}
+
+function toggleFiles() {
+  if ($('filesPanel').hidden) openFiles();
+  else closeFiles();
+}
+
+function closePreview() {
+  const panel = $('filesPanel');
+  const box = $('filesPreview');
+  if (box.hidden) return;
+  panel.classList.remove('previewing');
+  box.hidden = true;
+  state.preview = null;
+}
+
 async function openFile(path) {
   const box = $('filesPreview');
   const body = $('previewBody');
+  $('filesPanel').classList.add('previewing');
   box.hidden = false;
   $('previewName').textContent = path;
-  body.textContent = '读取中…';
+  $('insertPath').dataset.path = path;
+  body.innerHTML = '<div class="hint" style="padding:14px">读取中…</div>';
+  document.querySelectorAll('.file-row.is-active').forEach((node) => node.classList.remove('is-active'));
+  document.querySelectorAll('.file-row').forEach((node) => {
+    if (node.dataset.path === path) node.classList.add('is-active');
+  });
   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 highlightPreview(body, path, data.content ?? '');
-    document.querySelectorAll('.file-row.is-active').forEach((node) => node.classList.remove('is-active'));
+    state.preview = { path, code: data.content ?? '', binary: Boolean(data.binary), tooLarge: Boolean(data.tooLarge) };
+    if (data.binary) {
+      body.innerHTML = `<div class="hint" style="padding:14px">二进制文件（${data.bytes} 字节），无法预览。</div>`;
+    } else if (data.tooLarge) {
+      body.innerHTML = `<div class="hint" style="padding:14px">文件较大（${data.bytes} 字节），未加载。</div>`;
+    } else {
+      renderCode(body, data.content ?? '', path);
+    }
   } catch (error) {
-    body.textContent = error.message;
+    body.innerHTML = `<div class="hint" style="padding:14px">${escapeHtml(error.message)}</div>`;
   }
 }
 
-async function toggleFiles() {
+function openViewer() {
+  const preview = state.preview;
+  if (!preview?.code) return toast('没有可查看的代码');
+  $('viewerName').textContent = preview.path;
+  renderCode($('viewerBody'), preview.code, preview.path);
+  applyFilesLayout();
+  $('codeViewer').classList.remove('is-closing');
+  $('codeViewer').hidden = false;
+  document.body.classList.add('has-overlay');
+}
+
+function closeViewer() {
+  const viewer = $('codeViewer');
+  if (viewer.hidden) return;
+  void hideAnimated(viewer, 'is-closing', 160).then(syncOverlayState);
+}
+
+function toggleWrap() {
+  const on = !$('previewBody').classList.contains('is-wrap');
+  $('previewBody').classList.toggle('is-wrap', on);
+  $('viewerBody').classList.toggle('is-wrap', on);
+  $('previewWrap').classList.toggle('is-on', on);
+  $('viewerWrap').classList.toggle('is-on', on);
+  localStorage.setItem(FILE_STORAGE.wrap, on ? '1' : '0');
+}
+
+function initFileResize() {
   const panel = $('filesPanel');
-  panel.hidden = !panel.hidden;
-  if (!panel.hidden && !$('filesTree').childElementCount) {
-    $('filesTitle').textContent = `项目文件 · ${state.info?.workspace ?? ''}`;
-    await loadTree('.');
-  }
+  $('filesGrip').addEventListener('pointerdown', (event) => {
+    event.preventDefault();
+    const move = (moveEvent) => {
+      const width = Math.max(320, Math.min(window.innerWidth - 80, window.innerWidth - moveEvent.clientX));
+      panel.style.setProperty('--files-width', `${width}px`);
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      localStorage.setItem(FILE_STORAGE.width, String(Math.round(panel.getBoundingClientRect().width)));
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  });
+
+  $('filesDivider').addEventListener('pointerdown', (event) => {
+    event.preventDefault();
+    const split = $('filesSplit');
+    const move = (moveEvent) => {
+      const rect = split.getBoundingClientRect();
+      const height = Math.max(76, Math.min(rect.height - 140, moveEvent.clientY - rect.top));
+      panel.style.setProperty('--tree-height', `${height}px`);
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      localStorage.setItem(FILE_STORAGE.tree, String(Math.round($('filesTree').getBoundingClientRect().height)));
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  });
 }
 
+
 // ---------------- 工具输出详情 ----------------
 function toggleToolOutput(row, detail, isError) {
   const existing = row.nextElementSibling;
@@ -1251,17 +1902,6 @@ function toggleToolOutput(row, detail, isError) {
 }
 
 // ---------------- 启动 ----------------
-function openSettings() {
-  renderSettings();
-  $('settingsSheet').hidden = false;
-}
-
-function closeSettings() {
-  $('settingsSheet').hidden = true;
-  // 收掉动画后再清空内容，避免关闭瞬间出现内容跳动
-  setTimeout(() => { if ($('settingsSheet').hidden) $('settingsBody').innerHTML = ''; }, 240);
-}
-
 // ---------------- 内嵌终端（xterm + PTY） ----------------
 const TERM_FONT = '"Cascadia Mono", "JetBrains Mono", "SF Mono", Consolas, "Microsoft YaHei", monospace';
 const TERM_STORAGE = {
@@ -1337,9 +1977,8 @@ function termPersistSize() {
 function termApplyDock(dock, persist = true) {
   term.dock = dock;
   const panel = $('terminalPanel');
-  const workspace = $('workspace');
+  const main = $('main');
   panel.dataset.dock = dock;
-  workspace.dataset.dock = dock;
   panel.style.removeProperty('left');
   panel.style.removeProperty('top');
   panel.style.removeProperty('right');
@@ -1347,17 +1986,23 @@ function termApplyDock(dock, persist = true) {
   panel.style.width = '';
   panel.style.height = '';
   if (dock === 'bottom' || dock === 'top') {
+    const max = Math.max(180, main.clientHeight - 150);
+    term.size = Math.min(Math.max(180, term.size), max);
     panel.style.height = `${term.size}px`;
   } else if (dock === 'left' || dock === 'right') {
+    const max = Math.max(300, main.clientWidth - 320);
+    term.size = Math.min(Math.max(260, term.size), max);
     panel.style.width = `${term.size}px`;
   } else {
-    panel.style.width = `${Math.min(680, Math.max(360, Math.round(workspace.clientWidth * 0.62)))}px`;
-    panel.style.height = `${Math.min(420, Math.max(220, Math.round(workspace.clientHeight * 0.55)))}px`;
-    const saved = termReadPos();
-    if (saved) {
-      panel.style.left = `${saved.x}px`;
-      panel.style.top = `${saved.y}px`;
-    }
+    const width = Math.min(720, Math.max(380, Math.round(main.clientWidth * 0.64)));
+    const height = Math.min(460, Math.max(240, Math.round(main.clientHeight * 0.56)));
+    panel.style.width = `${width}px`;
+    panel.style.height = `${height}px`;
+    const saved = termReadPos() ?? { x: Math.max(24, main.clientWidth - width - 40), y: Math.max(20, main.clientHeight - height - 40) };
+    const left = Math.max(8, Math.min(saved.x, main.clientWidth - width - 8));
+    const top = Math.max(8, Math.min(saved.y, main.clientHeight - height - 8));
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
   }
   if (persist) termPersistSize();
   requestAnimationFrame(() => {
@@ -1543,13 +2188,15 @@ function termCreateTab(shellId) {
   terminal.onResize(() => tab.sendResize());
   termRenderTabs();
   termActivate(tab.id);
+  // 先连 WebSocket（不依赖页面可见性），再等布局完成 fit
+  termConnect(tab);
   requestAnimationFrame(() => {
     try {
       fit.fit();
+      tab.sendResize();
     } catch {
       /* 忽略 */
     }
-    termConnect(tab);
   });
   return tab;
 }
@@ -1590,18 +2237,22 @@ function termOpen() {
   if (!term.open) {
     term.open = true;
     panel.hidden = false;
+    document.body.classList.add('has-overlay');
     requestAnimationFrame(() => panel.classList.add('show'));
   }
   const ensure = () => {
     if (term.tabs.length === 0) termCreateTab($('termShell')?.value || term.defaultShell);
     else termActivate(term.activeId);
+    setTimeout(() => termActiveTab()?.terminal.focus(), 180);
   };
   if (term.loadedShells) ensure();
   else termLoadShells().then(ensure);
   termUpdateCwd(state.info?.workspace ?? '');
+  syncOverlayState();
 }
 
 function termClose() {
+  if (!term.open) return;
   term.open = false;
   const panel = $('terminalPanel');
   panel.classList.remove('show');
@@ -1610,6 +2261,8 @@ function termClose() {
     if (term.open) return;
     panel.hidden = true;
     panel.classList.remove('closing');
+    syncOverlayState();
+    $('input')?.focus();
   }, 180);
 }
 
@@ -1639,8 +2292,10 @@ function bindTerminal() {
   $('termClear').innerHTML = svg('trash');
   $('termClose').innerHTML = svg('x');
   $('termDock').innerHTML = svg('panel');
+  $('termAnalyze').innerHTML = svg('search');
   $('termBtn').addEventListener('click', termToggle);
   $('termClose').addEventListener('click', termClose);
+  $('termAnalyze').addEventListener('click', analyzeTerminal);
   $('termAdd').addEventListener('click', () => {
     termCreateTab($('termShell')?.value || term.defaultShell);
   });
@@ -1656,8 +2311,8 @@ function bindTerminal() {
   const grip = $('termGrip');
   grip.addEventListener('pointerdown', (event) => {
     event.preventDefault();
-    const workspace = $('workspace');
-    const rect = workspace.getBoundingClientRect();
+    const main = $('main');
+    const rect = main.getBoundingClientRect();
     const move = (moveEvent) => {
       let size;
       if (term.dock === 'bottom') size = rect.bottom - moveEvent.clientY;
@@ -1682,8 +2337,8 @@ function bindTerminal() {
   panel.addEventListener('pointerdown', (event) => {
     if (term.dock !== 'float') return;
     if (event.target.closest('button, select, .term-tab, .term-grip')) return;
-    const workspace = $('workspace');
-    const rect = workspace.getBoundingClientRect();
+    const main = $('main');
+    const rect = main.getBoundingClientRect();
     const panelRect = panel.getBoundingClientRect();
     const offsetX = event.clientX - panelRect.left;
     const offsetY = event.clientY - panelRect.top;
@@ -1714,7 +2369,7 @@ function bindTerminal() {
   const observer = new ResizeObserver(() => {
     if (term.open) termActiveTab()?.fit.fit();
   });
-  observer.observe($('workspace'));
+  observer.observe($('main'));
 
   document.addEventListener('banana:theme', () => {
     if (term.tabs.length) termRestyle();
@@ -1722,6 +2377,323 @@ function bindTerminal() {
   termUpdateCwd(state.info?.workspace ?? '');
 }
 
+// ---------------- 命令中心（Ctrl+K） ----------------
+const CC_GROUPS = ['会话', '动作', '设置', '命令', '文件'];
+
+function ccActions() {
+  return [
+    { title: '新建对话', sub: '开始一个干净的会话', icon: 'plus', run: () => $('newChat').click() },
+    { title: '打开项目文件', sub: '浏览、全屏查看、引用文件', icon: 'panel', run: openFiles },
+    { title: '打开终端', sub: 'Ctrl+` 随时开关，底部覆盖不挤压对话', icon: 'terminal', run: termOpen },
+    { title: '打开控制中心', sub: '模型、外观、终端、工作区、插件', icon: 'sliders', run: () => openSettings() },
+    { title: '插件工坊', sub: '启用、停用、生成模板、试运行插件', icon: 'plug', run: () => openSettings('plugins') },
+    { title: '切换主题', sub: '浅色 / 深色 / 跟随系统', icon: 'sun', run: cycleTheme },
+    { title: '撤销上一轮改动', sub: '把文件恢复到上一轮对话之前', icon: 'undo', run: () => $('undoBtn').click() },
+  ];
+}
+
+function openCommandCenter() {
+  const cc = $('commandCenter');
+  if (!cc.hidden && !cc.classList.contains('is-closing')) {
+    $('ccInput').select();
+    return;
+  }
+  if (!$('settingsSheet').hidden) closeSettings();
+  state.ccIndex = 0;
+  state.ccFiles = [];
+  $('ccInput').value = '';
+  cc.classList.remove('is-closing');
+  cc.hidden = false;
+  renderCommandCenter('');
+  syncOverlayState();
+  requestAnimationFrame(() => {
+    $('ccInput').focus();
+    $('ccInput').select();
+  });
+}
+
+function closeCommandCenter() {
+  const cc = $('commandCenter');
+  if (cc.hidden) return;
+  void hideAnimated(cc, 'is-closing', 140).then(syncOverlayState);
+  $('input')?.focus();
+}
+
+let ccFileTimer = 0;
+let ccFileSeq = 0;
+function scheduleCommandFiles(query) {
+  clearTimeout(ccFileTimer);
+  if (!query.trim()) return;
+  const seq = ++ccFileSeq;
+  ccFileTimer = setTimeout(async () => {
+    try {
+      const data = await get(`find?q=${encodeURIComponent(query.trim())}&limit=24`);
+      if (seq !== ccFileSeq || $('commandCenter').hidden) return;
+      state.ccFiles = data.files ?? [];
+      renderCommandCenter($('ccInput').value);
+    } catch {
+      /* 文件搜索失败不打扰主流程 */
+    }
+  }, 150);
+}
+
+function renderCommandCenter(query) {
+  const q = query.trim().toLowerCase();
+  const hit = (text) => !q || String(text ?? '').toLowerCase().includes(q);
+  const items = [];
+
+  const sessions = state.sessions
+    .filter((item) => hit(item.title) || hit('会话'))
+    .slice(0, q ? 5 : 4)
+    .map((item) => ({
+      group: '会话',
+      title: item.title || '新对话',
+      sub: `${item.turns} 轮 · ${relativeTime(item.updatedAt)}`,
+      icon: 'message',
+      run: () => switchSession(item.id),
+    }));
+  items.push(...sessions);
+
+  for (const action of ccActions()) {
+    if (hit(action.title) || hit(action.sub)) items.push({ ...action, group: '动作' });
+  }
+
+  for (const nav of SETTINGS_NAV) {
+    const title = `设置 · ${nav.label}`;
+    if (hit(title)) {
+      items.push({ group: '设置', title, sub: '打开控制中心对应的分类', icon: nav.icon, run: () => openSettings(nav.id) });
+    }
+  }
+
+  for (const command of commandList) {
+    const title = `/${command.name}`;
+    if (hit(title) || hit(command.summary)) {
+      items.push({
+        group: '命令',
+        title,
+        sub: command.summary,
+        icon: 'command',
+        run: () => {
+          insertComposer(`/${command.name} `);
+          $('input').focus();
+        },
+      });
+    }
+  }
+
+  for (const path of state.ccFiles ?? []) {
+    const name = path.split('/').pop();
+    items.push({
+      group: '文件',
+      title: name,
+      sub: path,
+      icon: 'file',
+      run: () => {
+        openFiles();
+        void openFile(path);
+      },
+    });
+  }
+
+  state.ccItems = items;
+  if (!items.length) {
+    $('ccResults').innerHTML = '<div class="cc-empty">没有匹配结果，换个关键词试试。</div>';
+    state.ccIndex = 0;
+    return;
+  }
+  state.ccIndex = Math.max(0, Math.min(state.ccIndex, items.length - 1));
+  paintCommandCenter(items);
+}
+
+function paintCommandCenter(items) {
+  const box = $('ccResults');
+  box.innerHTML = '';
+  let group = '';
+  items.forEach((item, index) => {
+    if (item.group !== group) {
+      group = item.group;
+      const head = document.createElement('div');
+      head.className = 'cc-group';
+      head.textContent = group;
+      box.appendChild(head);
+    }
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `cc-item${index === state.ccIndex ? ' is-on' : ''}`;
+    button.innerHTML =
+      `<span class="cc-item-icon">${svg(item.icon)}</span>` +
+      `<span class="cc-item-main"><span class="cc-item-title">${escapeHtml(item.title)}</span>` +
+      `${item.sub ? `<span class="cc-item-sub">${escapeHtml(item.sub)}</span>` : ''}</span>`;
+    button.addEventListener('pointerenter', () => {
+      if (state.ccIndex === index) return;
+      state.ccIndex = index;
+      box.querySelectorAll('.cc-item').forEach((node, i) => node.classList.toggle('is-on', i === index));
+    });
+    button.addEventListener('click', () => runCommandCenterItem(item));
+    box.appendChild(button);
+  });
+  scrollCommandCenterActive();
+}
+
+function scrollCommandCenterActive() {
+  const box = $('ccResults');
+  const active = box.querySelectorAll('.cc-item')[state.ccIndex];
+  active?.scrollIntoView({ block: 'nearest' });
+}
+
+function moveCommandCenter(delta) {
+  if (!state.ccItems?.length) return;
+  state.ccIndex = (state.ccIndex + delta + state.ccItems.length) % state.ccItems.length;
+  const buttons = $('ccResults').querySelectorAll('.cc-item');
+  buttons.forEach((node, index) => node.classList.toggle('is-on', index === state.ccIndex));
+  scrollCommandCenterActive();
+}
+
+function runCommandCenterItem(item) {
+  if (!item) return;
+  closeCommandCenter();
+  setTimeout(() => item.run(), 60);
+}
+
+// ---------------- 悬停提示 ----------------
+function initTooltips() {
+  const tip = document.createElement('div');
+  tip.className = 'tooltip';
+  tip.hidden = true;
+  document.body.appendChild(tip);
+  let timer = 0;
+  let target = null;
+
+  const place = () => {
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    const box = tip.getBoundingClientRect();
+    const x = Math.max(8, Math.min(rect.left + rect.width / 2 - box.width / 2, window.innerWidth - box.width - 8));
+    const below = rect.bottom + 9;
+    const y = below + box.height > window.innerHeight - 8 ? Math.max(8, rect.top - box.height - 9) : below;
+    tip.style.left = `${x}px`;
+    tip.style.top = `${y}px`;
+  };
+
+  const hide = () => {
+    clearTimeout(timer);
+    target = null;
+    tip.classList.remove('is-on');
+    setTimeout(() => {
+      if (!tip.classList.contains('is-on')) tip.hidden = true;
+    }, 120);
+  };
+
+  document.addEventListener('pointerover', (event) => {
+    const node = event.target.closest?.('[title], [data-tip]');
+    if (!node) return;
+    const title = node.getAttribute('title');
+    if (title) {
+      node.dataset.tip = title;
+      node.removeAttribute('title');
+    }
+    const text = node.dataset.tip;
+    if (!text) return;
+    clearTimeout(timer);
+    target = node;
+    timer = setTimeout(() => {
+      if (target !== node) return;
+      tip.textContent = text;
+      tip.hidden = false;
+      tip.classList.remove('is-on');
+      requestAnimationFrame(() => {
+        place();
+        tip.classList.add('is-on');
+      });
+    }, 380);
+  });
+
+  document.addEventListener('pointerout', (event) => {
+    if (!target) return;
+    const related = event.relatedTarget;
+    if (related && target.contains(related)) return;
+    hide();
+  });
+
+  document.addEventListener('pointerdown', hide, true);
+  window.addEventListener('scroll', hide, true);
+  window.addEventListener('blur', hide);
+}
+
+// ---------------- 选中文本工具条 ----------------
+function initSelectionTools() {
+  document.addEventListener('mouseup', (event) => {
+    setTimeout(() => {
+      const node = event.target instanceof Element ? event.target : null;
+      if (node?.closest('#terminalPanel')) {
+        const tab = termActiveTab();
+        const text = tab?.terminal.getSelection?.() ?? '';
+        if (text.trim()) {
+          showSelectionTools(event.clientX, event.clientY, [
+            { label: '分析输出', run: () => { termClose(); askAboutText(text, '', 'terminal'); } },
+            { label: '复制', run: () => copyText(text) },
+          ]);
+        } else hideSelectionTools();
+        return;
+      }
+      const host = node?.closest('.thread, .files-code, .viewer-body');
+      const text = window.getSelection()?.toString() ?? '';
+      if (host && text.trim().length > 1) {
+        const path = host.classList.contains('files-code') || host.classList.contains('viewer-body') ? state.preview?.path : '';
+        showSelectionTools(event.clientX, event.clientY, [
+          { label: '问 AI', run: () => askAboutText(text, path) },
+          { label: '复制', run: () => copyText(text) },
+          { label: '插入输入框', run: () => { insertComposer(text.trim()); hideSelectionTools(); } },
+        ]);
+      } else hideSelectionTools();
+    }, 20);
+  });
+  document.addEventListener('selectionchange', () => {
+    if (!window.getSelection()?.toString().trim() && !$('selectionTools').hidden) hideSelectionTools();
+  });
+}
+
+// ---------------- 终端输出分析 ----------------
+function analyzeTerminal() {
+  const tab = termActiveTab();
+  if (!tab) return toast('还没有打开终端');
+  let text = tab.terminal.getSelection?.() ?? '';
+  if (!text.trim()) {
+    const buffer = tab.terminal.buffer.active;
+    const lines = [];
+    const start = Math.max(0, buffer.length - 180);
+    for (let i = start; i < buffer.length; i += 1) lines.push(buffer.getLine(i)?.translateToString(true) ?? '');
+    text = lines.join('\n').trim();
+  }
+  if (!text.trim()) return toast('终端还没有输出');
+  termClose();
+  askAboutText(text, '', 'terminal');
+}
+
+// ---------------- 桌面窗口控制 ----------------
+function initDesktop() {
+  const api = window.bananaDesktop;
+  if (!api) return;
+  document.body.classList.add('desktop');
+  if (!api.frameless) {
+    // macOS 保留原生红绿灯，只启用拖动区域
+    document.body.classList.add('mac-titlebar');
+    return;
+  }
+  const controls = $('winControls');
+  controls.hidden = false;
+  $('winMin').innerHTML = svg('minimize');
+  $('winMax').innerHTML = svg('maximize');
+  $('winClose').innerHTML = svg('x');
+  $('winMin').addEventListener('click', () => api.minimize());
+  $('winMax').addEventListener('click', () => api.toggleMaximize());
+  $('winClose').addEventListener('click', () => api.close());
+  api.onMaximizeChange?.((maximized) => {
+    $('winMax').innerHTML = svg(maximized ? 'restore' : 'maximize');
+    $('winMax').title = maximized ? '还原' : '最大化';
+  });
+}
+
 function bind() {
   $('newChat').innerHTML = svg('plus');
   $('sendBtn').innerHTML = svg('send');
@@ -1730,7 +2702,11 @@ function bind() {
   $('closeSettings').innerHTML = svg('x');
   $('filesBtn').innerHTML = svg('panel');
   $('closeFiles').innerHTML = svg('x');
+  $('pluginsBtn').innerHTML = svg('plug');
   bindTerminal();
+  initTooltips();
+  initSelectionTools();
+  initDesktop();
   hydrate();
   loadTheme();
 
@@ -1749,8 +2725,8 @@ function bind() {
     }
   });
   $('abortBtn').addEventListener('click', async () => { controller?.abort(); await post('abort'); });
-  $('modelBtn').addEventListener('click', openSettings);
-  $('openSettings').addEventListener('click', openSettings);
+  $('modelBtn').addEventListener('click', () => openSettings());
+  $('openSettings').addEventListener('click', () => openSettings());
   $('closeSettings').addEventListener('click', closeSettings);
   $('settingsSheet').addEventListener('click', (event) => {
     if (event.target === $('settingsSheet')) closeSettings();
@@ -1761,7 +2737,20 @@ function bind() {
   $('toggleSidebar').addEventListener('click', () => $('sidebar').classList.toggle('open'));
   $('filesBtn').addEventListener('click', toggleFiles);
   $('themeBtn').addEventListener('click', cycleTheme);
-  $('closeFiles').addEventListener('click', () => { $('filesPanel').hidden = true; });
+  $('closeFiles').addEventListener('click', closeFiles);
+  $('pluginsBtn').addEventListener('click', () => openSettings('plugins'));
+  $('previewWrap').addEventListener('click', toggleWrap);
+  $('viewerWrap').addEventListener('click', toggleWrap);
+  $('previewCopy').addEventListener('click', () => copyText(state.preview?.code ?? '', '已复制代码'));
+  $('viewerCopy').addEventListener('click', () => copyText(state.preview?.code ?? '', '已复制代码'));
+  $('previewCopyPath').addEventListener('click', () => copyText(state.preview?.path ?? '', '已复制路径'));
+  $('viewerCopyPath').addEventListener('click', () => copyText(state.preview?.path ?? '', '已复制路径'));
+  $('previewFull').addEventListener('click', openViewer);
+  $('previewClose').addEventListener('click', closePreview);
+  $('viewerClose').addEventListener('click', closeViewer);
+  $('codeViewer').addEventListener('mousedown', (event) => {
+    if (event.target === $('codeViewer')) closeViewer();
+  });
   $('insertPath').addEventListener('click', () => {
     const path = $('insertPath').dataset.path;
     if (!path) return;
@@ -1813,12 +2802,32 @@ function bind() {
     if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) { event.preventDefault(); send(); }
   });
 
+  $('ccInput').addEventListener('input', () => {
+    state.ccIndex = 0;
+    renderCommandCenter($('ccInput').value);
+    scheduleCommandFiles($('ccInput').value);
+  });
+  $('ccInput').addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown') { event.preventDefault(); moveCommandCenter(1); }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); moveCommandCenter(-1); }
+    else if (event.key === 'Enter' && !event.isComposing) { event.preventDefault(); runCommandCenterItem(state.ccItems?.[state.ccIndex]); }
+    else if (event.key === 'Escape') { event.preventDefault(); closeCommandCenter(); }
+  });
+  $('commandCenter').addEventListener('mousedown', (event) => {
+    if (event.target === $('commandCenter')) closeCommandCenter();
+  });
+
   document.addEventListener('keydown', (event) => {
+    if ((event.ctrlKey || event.metaKey) && String(event.key).toLowerCase() === 'k') {
+      event.preventDefault();
+      if ($('commandCenter').hidden) openCommandCenter();
+      else closeCommandCenter();
+      return;
+    }
     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');
+      if (!$('commandPalette').hidden) { closePalette(); return; }
+      if (closeTopOverlay()) return;
+      if ($('sidebar').classList.contains('open')) $('sidebar').classList.remove('open');
     }
   });