@vincentbanana/bananacli 0.4.7 → 0.4.8

package/dist/ui/app.js

@@ -64,12 +64,13 @@ function markdown(source) {
   while (i < lines.length) {
     const line = lines[i];
     if (/^```/.test(line)) {
-      const lang = line.slice(3).trim();
+      const lang = line.slice(3).trim().replace(/[^\w+-]/g, '');
       const body = [];
       i += 1;
       while (i < lines.length && !/^```/.test(lines[i])) { body.push(lines[i]); i += 1; }
       i += 1;
-      out.push(`<pre class="code"><code data-lang="${escapeHtml(lang)}">${escapeHtml(body.join('\n'))}</code></pre>`);
+      const codeClass = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+      out.push(`<pre class="code" data-lang="${escapeHtml(lang)}"><code${codeClass}>${escapeHtml(body.join('\n'))}</code></pre>`);
       continue;
     }
     if (/^\s*$/.test(line)) { i += 1; continue; }
@@ -105,11 +106,67 @@ function markdown(source) {
   return out.join('');
 }
 
+// ---------------- 语法高亮 ----------------
+const LANG_BY_EXT = {
+  ts: 'typescript', tsx: 'typescript', mts: 'typescript', cts: 'typescript',
+  js: 'javascript', jsx: 'javascript', mjs: 'javascript', cjs: 'javascript',
+  json: 'json', jsonc: 'json', md: 'markdown', markdown: 'markdown',
+  py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java', kt: 'kotlin',
+  c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', hpp: 'cpp', cs: 'csharp',
+  sh: 'bash', bash: 'bash', zsh: 'bash', ps1: 'powershell', psm1: 'powershell',
+  html: 'xml', htm: 'xml', xml: 'xml', svg: 'xml', vue: 'xml',
+  css: 'css', scss: 'scss', less: 'less', sql: 'sql', yml: 'yaml', yaml: 'yaml',
+  toml: 'ini', ini: 'ini', diff: 'diff', patch: 'diff', dockerfile: 'dockerfile',
+};
+
+function highlightAll(root = document) {
+  if (!window.hljs) return;
+  for (const node of root.querySelectorAll('pre code')) {
+    if (node.dataset.highlighted === 'yes' || !node.textContent.trim()) continue;
+    try {
+      window.hljs.highlightElement(node);
+    } catch {
+      /* 单个代码块失败不影响整页 */
+    }
+  }
+}
+
+/** 文件预览：按扩展名挑语言；未知扩展名保持纯文本。 */
+function highlightPreview(element, path, code) {
+  const ext = (path.split('.').pop() ?? '').toLowerCase();
+  const lang = LANG_BY_EXT[ext];
+  if (!window.hljs || !lang || code.length > 300_000) {
+    element.textContent = code;
+    return;
+  }
+  element.innerHTML = `<code class="language-${lang}"></code>`;
+  const node = element.firstElementChild;
+  node.textContent = code;
+  try {
+    window.hljs.highlightElement(node);
+  } catch {
+    element.textContent = code;
+  }
+}
+
+
+
 // ---------------- 状态 ----------------
 const state = { info: null, sessions: [], attachments: [], busy: false, pendingApproval: null };
 
 const THREAD = $('thread');
 
+// 历史消息 / 新回复渲染完成后统一高亮，避免流式过程中反复解析
+let highlightFrame = 0;
+const highlightObserver = new MutationObserver(() => {
+  if (highlightFrame) return;
+  highlightFrame = requestAnimationFrame(() => {
+    highlightFrame = 0;
+    highlightAll(THREAD);
+  });
+});
+highlightObserver.observe(THREAD, { childList: true, subtree: true });
+
 // ---------------- 渲染 ----------------
 function hydrate(root = document) {
   root.querySelectorAll('[data-icon]').forEach((node) => {
@@ -165,10 +222,11 @@ async function switchSession(ref) {
 function renderSidebar() {
   const list = $('sessionList');
   list.innerHTML = '';
-  for (const item of state.sessions) {
+  state.sessions.forEach((item, index) => {
     const active = item.id === state.info?.session?.id ? ' is-active' : '';
     const node = document.createElement('div');
     node.className = `session-item${active}`;
+    node.style.setProperty('--i', String(Math.min(index, 12)));
     node.innerHTML =
       `<span class="s-actions">` +
       `<span class="s-act" data-menu="${item.id}" title="更多">${svg('dots')}</span>` +
@@ -192,7 +250,7 @@ function renderSidebar() {
       openSessionMenu(item, node);
     });
     list.appendChild(node);
-  }
+  });
 }
 
 /** 会话操作菜单：切换 / 重命名 / 导出 Markdown / 导出 JSON */
@@ -673,6 +731,7 @@ function applyTheme(theme) {
     button.innerHTML = svg(THEME_ICON[theme]);
     button.title = `主题：${THEME_LABEL[theme]}（点击切换）`;
   }
+  document.dispatchEvent(new CustomEvent('banana:theme'));
 }
 
 function loadTheme() {
@@ -976,12 +1035,20 @@ function renderSettings() {
   const terminalField = document.createElement('div');
   terminalField.className = 'field';
   terminalField.innerHTML =
-    '<label>终端</label><div class="row"><button class="btn">在界面里打开终端</button></div>' +
-    '<div class="hint">内嵌在对话下方，不弹外部窗口；直接在当前工作区执行命令，cd 会记住目录。</div>';
+    '<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');
@@ -1109,9 +1176,10 @@ async function loadTree(path = '.', container = $('filesTree')) {
       container.innerHTML = '<div class="hint" style="padding:8px 10px">（空目录）</div>';
       return;
     }
-    for (const entry of entries) {
+    entries.forEach((entry, index) => {
       const row = document.createElement('button');
       row.className = 'file-row';
+      row.style.setProperty('--i', String(Math.min(index, 14)));
       row.innerHTML =
         `<span class="tool-caret">${entry.type === 'dir' ? svg('chevron') : ''}</span>` +
         `<span>${svg(FILE_ICON[entry.type])}</span>` +
@@ -1134,7 +1202,7 @@ async function loadTree(path = '.', container = $('filesTree')) {
         }
       });
       container.appendChild(row);
-    }
+    });
   } catch (error) {
     container.innerHTML = `<div class="hint" style="padding:8px 10px">${escapeHtml(error.message)}</div>`;
   }
@@ -1151,7 +1219,7 @@ async function openFile(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 ?? '';
+    else highlightPreview(body, path, data.content ?? '');
     document.querySelectorAll('.file-row.is-active').forEach((node) => node.classList.remove('is-active'));
   } catch (error) {
     body.textContent = error.message;
@@ -1194,72 +1262,343 @@ function closeSettings() {
   setTimeout(() => { if ($('settingsSheet').hidden) $('settingsBody').innerHTML = ''; }, 240);
 }
 
-// ---------------- 内嵌终端 ----------------
-const term = { open: false, running: false, history: [], cursor: 0, controller: null, size: 0 };
+// ---------------- 内嵌终端（xterm + PTY） ----------------
+const TERM_FONT = '"Cascadia Mono", "JetBrains Mono", "SF Mono", Consolas, "Microsoft YaHei", monospace';
+const TERM_STORAGE = {
+  dock: 'banana.term.dock',
+  size: 'banana.term.size',
+  pos: 'banana.term.pos',
+  fontSize: 'banana.term.fontSize',
+  shell: 'banana.term.shell',
+};
 
-const ANSI_COLORS = {
-  30: '#6b6b72', 31: '#b4453a', 32: '#2f7d50', 33: '#966d1f',
-  34: '#3b63b0', 35: '#7b4d9e', 36: '#257f80', 37: '#55555c',
-  90: '#8c8c93', 91: '#c9564a', 92: '#3f9a66', 93: '#b0852d',
-  94: '#527cd1', 95: '#9a67c4', 96: '#2f9a9a', 97: '#16161a',
+const term = {
+  open: false,
+  dock: localStorage.getItem(TERM_STORAGE.dock) || 'bottom',
+  size: Number(localStorage.getItem(TERM_STORAGE.size)) || 280,
+  fontSize: Number(localStorage.getItem(TERM_STORAGE.fontSize)) || 13,
+  shells: [],
+  defaultShell: '',
+  tabs: [],
+  activeId: null,
+  counter: 0,
+  loadedShells: false,
 };
 
-/** 把 ANSI 上色转成 span；其他控制序列直接丢掉，避免满屏乱码。 */
-function ansiToHtml(input) {
-  const text = input.replace(/\x1b\][^\x07]*\x07/g, '').replace(/\x1b\[[0-9;?]*[A-LN-Za-ln-z]/g, '');
-  let out = '';
-  let last = 0;
-  let color = '';
-  let bold = false;
-  let dim = false;
-  const style = () =>
-    color || bold || dim
-      ? `color:${color || 'inherit'};font-weight:${bold ? 600 : 400};opacity:${dim ? 0.7 : 1}`
-      : '';
-  for (const match of text.matchAll(/\x1b\[([0-9;]*)m/g)) {
-    out += `<span style="${style()}">${escapeHtml(text.slice(last, match.index))}</span>`;
-    last = match.index + match[0].length;
-    for (const code of (match[1] || '0').split(';').filter(Boolean).map(Number)) {
-      if (code === 0) { color = ''; bold = false; dim = false; }
-      else if (code === 1) bold = true;
-      else if (code === 2) dim = true;
-      else if (code === 22) { bold = false; dim = false; }
-      else if (code === 39) color = '';
-      else if (ANSI_COLORS[code]) color = ANSI_COLORS[code];
+function termIsDark() {
+  const explicit = document.documentElement.dataset.theme;
+  if (explicit === 'dark') return true;
+  if (explicit === 'light') return false;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+/** 柔和配色：不用纯红纯绿，降低饱和度，长时间看不刺眼。 */
+function termTheme() {
+  const dark = termIsDark();
+  return {
+    background: dark ? '#101013' : '#fbfbfa',
+    foreground: dark ? '#d9d9d4' : '#26262b',
+    cursor: dark ? '#e8e8e2' : '#16161a',
+    cursorAccent: dark ? '#101013' : '#fbfbfa',
+    selectionBackground: dark ? 'rgba(120, 150, 220, 0.28)' : 'rgba(70, 110, 190, 0.18)',
+    black: dark ? '#2a2a30' : '#3a3a40',
+    red: dark ? '#d1786e' : '#b4453a',
+    green: dark ? '#86b98d' : '#2f7d50',
+    yellow: dark ? '#d2b06a' : '#8f6b1f',
+    blue: dark ? '#8aa9dc' : '#3b63b0',
+    magenta: dark ? '#b294cd' : '#7b4d9e',
+    cyan: dark ? '#82bdbd' : '#257f80',
+    white: dark ? '#c9c9c4' : '#55555c',
+    brightBlack: dark ? '#6c6c75' : '#8c8c93',
+    brightRed: dark ? '#e29a90' : '#c9564a',
+    brightGreen: dark ? '#a3d2a8' : '#3f9a66',
+    brightYellow: dark ? '#e6ca8c' : '#b0852d',
+    brightBlue: dark ? '#a9c3ee' : '#527cd1',
+    brightMagenta: dark ? '#cbb0e2' : '#9a67c4',
+    brightCyan: dark ? '#a2d4d4' : '#2f9a9a',
+    brightWhite: dark ? '#f2f2ee' : '#16161a',
+  };
+}
+
+function termActiveTab() {
+  return term.tabs.find((tab) => tab.id === term.activeId) ?? null;
+}
+
+function termUpdateCwd(cwd) {
+  const label = $('termCwd');
+  if (label && cwd) label.textContent = cwd;
+}
+
+function termPersistSize() {
+  localStorage.setItem(TERM_STORAGE.size, String(Math.round(term.size)));
+  localStorage.setItem(TERM_STORAGE.dock, term.dock);
+}
+
+function termApplyDock(dock, persist = true) {
+  term.dock = dock;
+  const panel = $('terminalPanel');
+  const workspace = $('workspace');
+  panel.dataset.dock = dock;
+  workspace.dataset.dock = dock;
+  panel.style.removeProperty('left');
+  panel.style.removeProperty('top');
+  panel.style.removeProperty('right');
+  panel.style.removeProperty('bottom');
+  panel.style.width = '';
+  panel.style.height = '';
+  if (dock === 'bottom' || dock === 'top') {
+    panel.style.height = `${term.size}px`;
+  } else if (dock === 'left' || dock === 'right') {
+    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`;
     }
   }
-  out += `<span style="${style()}">${escapeHtml(text.slice(last))}</span>`;
-  return out;
-}
-
-function termWrite(text, kind = 'out') {
-  if (!text) return;
-  const body = $('termBody');
-  const chunk = document.createElement('span');
-  chunk.className = 'term-chunk' + (kind === 'stderr' ? ' stderr' : kind === 'input' ? ' input' : '');
-  chunk.innerHTML = ansiToHtml(text);
-  body.appendChild(chunk);
-  term.size += text.length;
-  if (term.size > 240_000) {
-    body.textContent = '';
-    term.size = 0;
-    termWrite('输出太多，已清空旧内容。\n', 'input');
+  if (persist) termPersistSize();
+  requestAnimationFrame(() => {
+    termActiveTab()?.fit.fit();
+  });
+}
+
+function termReadPos() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(TERM_STORAGE.pos) || 'null');
+    return raw && Number.isFinite(raw.x) && Number.isFinite(raw.y) ? raw : null;
+  } catch {
+    return null;
+  }
+}
+
+async function termLoadShells() {
+  if (term.loadedShells) return;
+  term.loadedShells = true;
+  try {
+    const data = await get('shells');
+    term.shells = Array.isArray(data.shells) ? data.shells : [];
+    term.defaultShell = data.default || term.shells[0]?.id || 'cmd';
+    const select = $('termShell');
+    const preferred = localStorage.getItem(TERM_STORAGE.shell);
+    select.innerHTML = term.shells
+      .map((shell) => `<option value="${escapeHtml(shell.id)}">${escapeHtml(shell.name)}</option>`)
+      .join('');
+    select.value = term.shells.some((shell) => shell.id === preferred) ? preferred : term.defaultShell;
+    select.addEventListener('change', () => {
+      localStorage.setItem(TERM_STORAGE.shell, select.value);
+      termCreateTab(select.value);
+    });
+  } catch (error) {
+    term.shells = [{ id: 'cmd', name: '终端' }];
+    term.defaultShell = 'cmd';
+  }
+}
+
+function termRenderTabs() {
+  const holder = $('termTabs');
+  holder.innerHTML = '';
+  for (const tab of term.tabs) {
+    const node = document.createElement('div');
+    node.className = 'term-tab' + (tab.id === term.activeId ? ' active' : '');
+    node.innerHTML = `<span class="term-tab-name">${escapeHtml(tab.name)}</span><button class="term-tab-close" title="关闭标签" aria-label="关闭标签"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>`;
+    node.addEventListener('click', (event) => {
+      if (event.target.closest('.term-tab-close')) {
+        event.stopPropagation();
+        termCloseTab(tab.id);
+        return;
+      }
+      termActivate(tab.id);
+    });
+    holder.appendChild(node);
+  }
+}
+
+function termActivate(id) {
+  term.activeId = id;
+  for (const tab of term.tabs) {
+    const active = tab.id === id;
+    tab.pane.classList.toggle('active', active);
+    if (active) {
+      requestAnimationFrame(() => {
+        try {
+          tab.fit.fit();
+        } catch {
+          /* 面板还没显示 */
+        }
+        tab.terminal.focus();
+      });
+    }
+  }
+  termRenderTabs();
+}
+
+function termConnect(tab) {
+  const url = new URL(API + 'terminal/ws', location.href);
+  url.protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  url.searchParams.set('shell', tab.shell || term.defaultShell || 'cmd');
+  url.searchParams.set('cwd', state.info?.workspace ?? '');
+  url.searchParams.set('cols', String(tab.terminal.cols || 100));
+  url.searchParams.set('rows', String(tab.terminal.rows || 28));
+  if (tab.termId) url.searchParams.set('id', tab.termId);
+
+  let ws;
+  try {
+    ws = new WebSocket(url);
+  } catch (error) {
+    tab.terminal.write(`\r\n\x1b[31m连接终端失败：${error?.message ?? error}\x1b[0m\r\n`);
+    return;
+  }
+  tab.ws = ws;
+
+  ws.addEventListener('open', () => {
+    requestAnimationFrame(() => {
+      try {
+        tab.fit.fit();
+      } catch {
+        /* 忽略 */
+      }
+      tab.sendResize();
+    });
+  });
+  ws.addEventListener('message', (event) => {
+    let message;
+    try {
+      message = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+    if (message.type === 'id' || message.type === 'ready') {
+      if (message.id) tab.termId = message.id;
+      if (message.cwd) termUpdateCwd(message.cwd);
+    } else if (message.type === 'data') {
+      tab.terminal.write(message.data);
+    } else if (message.type === 'exit') {
+      tab.terminal.write(`\r\n\x1b[90m[进程已退出，代码 ${message.code ?? 0}]\x1b[0m\r\n`);
+    } else if (message.type === 'error') {
+      tab.terminal.write(`\r\n\x1b[31m${message.message}\x1b[0m\r\n`);
+    }
+  });
+  ws.addEventListener('close', () => {
+    if (!tab.alive || !term.open) return;
+    // 服务重启或网络抖动时自动重连；服务端会按 tab.termId 把会话接回来
+    setTimeout(() => {
+      if (tab.alive && term.open && (!tab.ws || tab.ws.readyState > 1)) termConnect(tab);
+    }, 900);
+  });
+
+  tab.sendResize = () => {
+    if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'resize', cols: tab.terminal.cols, rows: tab.terminal.rows }));
+  };
+}
+
+function termCreateTab(shellId) {
+  if (!term.open) {
+    termOpen();
+    return null;
+  }
+  termLoadShells();
+  const shell = term.shells.find((item) => item.id === shellId) ?? term.shells[0];
+  const name = shell?.name ?? '终端';
+  const pane = document.createElement('div');
+  pane.className = 'term-pane';
+  $('termBody').appendChild(pane);
+
+  const terminal = new window.Terminal({
+    cursorBlink: true,
+    cursorStyle: 'bar',
+    fontFamily: TERM_FONT,
+    fontSize: term.fontSize,
+    lineHeight: 1.25,
+    letterSpacing: 0,
+    scrollback: 8000,
+    allowTransparency: true,
+    theme: termTheme(),
+    rightClickSelectsWord: true,
+  });
+  const fit = new window.FitAddon.FitAddon();
+  terminal.loadAddon(fit);
+  terminal.open(pane);
+
+  const tab = {
+    id: `tab${++term.counter}`,
+    name,
+    shell: shell?.id ?? '',
+    terminal,
+    fit,
+    pane,
+    ws: null,
+    termId: null,
+    alive: true,
+    sendResize: () => {},
+  };
+  term.tabs.push(tab);
+  term.activeId = tab.id;
+  // 输入监听只注册一次；重连只换 WebSocket，不能重复绑定，否则一个按键发两遍
+  terminal.onData((data) => {
+    if (tab.ws?.readyState === 1) tab.ws.send(JSON.stringify({ type: 'input', data }));
+  });
+  terminal.onResize(() => tab.sendResize());
+  termRenderTabs();
+  termActivate(tab.id);
+  requestAnimationFrame(() => {
+    try {
+      fit.fit();
+    } catch {
+      /* 忽略 */
+    }
+    termConnect(tab);
+  });
+  return tab;
+}
+
+function termCloseTab(id) {
+  const index = term.tabs.findIndex((tab) => tab.id === id);
+  if (index < 0) return;
+  const tab = term.tabs[index];
+  tab.alive = false;
+  try {
+    if (tab.ws?.readyState === 1) tab.ws.send(JSON.stringify({ type: 'close' }));
+    tab.ws?.close();
+  } catch {
+    /* 已经断开 */
+  }
+  try {
+    tab.terminal.dispose();
+  } catch {
+    /* 忽略 */
+  }
+  tab.pane.remove();
+  term.tabs.splice(index, 1);
+  if (term.tabs.length === 0) {
+    termClose();
+    return;
+  }
+  if (term.activeId === id) {
+    const next = term.tabs[Math.max(0, index - 1)] ?? term.tabs[0];
+    termActivate(next.id);
+  } else {
+    termRenderTabs();
   }
-  body.scrollTop = body.scrollHeight;
 }
 
 function termOpen() {
   const panel = $('terminalPanel');
+  termApplyDock(term.dock, false);
   if (!term.open) {
     term.open = true;
     panel.hidden = false;
     requestAnimationFrame(() => panel.classList.add('show'));
-    if (!term.size) {
-      termWrite('在当前工作区执行命令；cd 会记住目录，clear 清屏。\n', 'input');
-    }
   }
-  $('termCwd').textContent = state.info?.workspace ?? '';
-  $('termInput').focus();
+  const ensure = () => {
+    if (term.tabs.length === 0) termCreateTab($('termShell')?.value || term.defaultShell);
+    else termActivate(term.activeId);
+  };
+  if (term.loadedShells) ensure();
+  else termLoadShells().then(ensure);
+  termUpdateCwd(state.info?.workspace ?? '');
 }
 
 function termClose() {
@@ -1271,7 +1610,7 @@ function termClose() {
     if (term.open) return;
     panel.hidden = true;
     panel.classList.remove('closing');
-  }, 160);
+  }, 180);
 }
 
 function termToggle() {
@@ -1279,112 +1618,108 @@ function termToggle() {
   else termOpen();
 }
 
-async function termRun(command) {
-  const cmd = command.trim();
-  if (!cmd || term.running) return;
-  if (/^(clear|cls)$/i.test(cmd)) {
-    $('termBody').textContent = '';
-    term.size = 0;
-    return;
-  }
-  term.running = true;
-  $('termStop').hidden = false;
-  $('termSend').disabled = true;
-  termWrite(`\n> ${cmd}\n`, 'input');
-
-  const history = term.history;
-  if (history[history.length - 1] !== cmd) history.push(cmd);
-  term.cursor = history.length;
-
-  term.controller = new AbortController();
-  try {
-    const response = await fetch(API + 'terminal', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ command: cmd }),
-      signal: term.controller.signal,
-    });
-    if (!response.ok) {
-      const payload = await response.json().catch(() => ({}));
-      termWrite((payload.error ?? `终端启动失败（${response.status}）`) + '\n', 'stderr');
-      return;
-    }
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-    for (;;) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-      let index;
-      while ((index = buffer.indexOf('\n\n')) >= 0) {
-        const raw = buffer.slice(0, index);
-        buffer = buffer.slice(index + 2);
-        const line = raw.startsWith('data: ') ? raw.slice(6) : raw;
-        if (!line) continue;
-        let event;
-        try { event = JSON.parse(line); } catch { continue; }
-        if (event.type === 'out') termWrite(event.data, event.stream);
-        else if (event.type === 'start' || event.type === 'exit') {
-          if (event.cwd) $('termCwd').textContent = event.cwd;
-          if (event.error) termWrite(event.error + '\n', 'stderr');
-          if (event.type === 'exit' && event.code) termWrite(`进程退出，代码 ${event.code}\n`, 'stderr');
-        }
+function termRestyle() {
+  const theme = termTheme();
+  for (const tab of term.tabs) {
+    tab.terminal.options.theme = theme;
+    tab.terminal.options.fontSize = term.fontSize;
+    requestAnimationFrame(() => {
+      try {
+        tab.fit.fit();
+      } catch {
+        /* 忽略 */
       }
-    }
-  } catch (error) {
-    if (error?.name !== 'AbortError') termWrite(`终端错误：${error?.message ?? error}\n`, 'stderr');
-    else termWrite('已停止。\n', 'input');
-  } finally {
-    term.running = false;
-    term.controller = null;
-    $('termStop').hidden = true;
-    $('termSend').disabled = false;
-    if (term.open) $('termInput').focus();
+    });
   }
 }
 
 function bindTerminal() {
   $('termBtn').innerHTML = svg('terminal');
-  $('termStop').innerHTML = svg('stop');
+  $('termAdd').innerHTML = svg('plus');
   $('termClear').innerHTML = svg('trash');
   $('termClose').innerHTML = svg('x');
+  $('termDock').innerHTML = svg('panel');
   $('termBtn').addEventListener('click', termToggle);
   $('termClose').addEventListener('click', termClose);
-  $('termClear').addEventListener('click', () => {
-    $('termBody').textContent = '';
-    term.size = 0;
+  $('termAdd').addEventListener('click', () => {
+    termCreateTab($('termShell')?.value || term.defaultShell);
   });
-  $('termStop').addEventListener('click', () => term.controller?.abort());
-  $('termForm').addEventListener('submit', (event) => {
+  $('termClear').addEventListener('click', () => termActiveTab()?.terminal.clear());
+  $('termDock').addEventListener('click', () => {
+    const order = ['bottom', 'right', 'left', 'float'];
+    const next = order[(order.indexOf(term.dock) + 1) % order.length];
+    termApplyDock(next);
+    toast(`终端停靠在${next === 'bottom' ? '底部' : next === 'top' ? '顶部' : next === 'right' ? '右侧' : next === 'left' ? '左侧' : '浮动'}`);
+  });
+
+  // 拖动边缘调整大小（浮动态拖标题栏移动位置）
+  const grip = $('termGrip');
+  grip.addEventListener('pointerdown', (event) => {
     event.preventDefault();
-    const input = $('termInput');
-    const value = input.value;
-    input.value = '';
-    termRun(value);
+    const workspace = $('workspace');
+    const rect = workspace.getBoundingClientRect();
+    const move = (moveEvent) => {
+      let size;
+      if (term.dock === 'bottom') size = rect.bottom - moveEvent.clientY;
+      else if (term.dock === 'top') size = moveEvent.clientY - rect.top;
+      else if (term.dock === 'right') size = rect.right - moveEvent.clientX;
+      else size = moveEvent.clientX - rect.left;
+      term.size = Math.min(Math.max(160, size), (term.dock === 'left' || term.dock === 'right' ? rect.width : rect.height) - 160);
+      if (term.dock === 'bottom' || term.dock === 'top') $('terminalPanel').style.height = `${term.size}px`;
+      else $('terminalPanel').style.width = `${term.size}px`;
+      termActiveTab()?.fit.fit();
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      termPersistSize();
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
   });
-  $('termInput').addEventListener('keydown', (event) => {
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (!term.history.length) return;
-      term.cursor = Math.max(0, term.cursor - 1);
-      $('termInput').value = term.history[term.cursor] ?? '';
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      term.cursor = Math.min(term.history.length, term.cursor + 1);
-      $('termInput').value = term.history[term.cursor] ?? '';
-    } else if (event.key === 'Escape') {
-      termClose();
-    }
+
+  const panel = $('terminalPanel');
+  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 panelRect = panel.getBoundingClientRect();
+    const offsetX = event.clientX - panelRect.left;
+    const offsetY = event.clientY - panelRect.top;
+    const move = (moveEvent) => {
+      const x = Math.min(Math.max(0, moveEvent.clientX - rect.left - offsetX), rect.width - 240);
+      const y = Math.min(Math.max(0, moveEvent.clientY - rect.top - offsetY), rect.height - 80);
+      panel.style.left = `${x}px`;
+      panel.style.top = `${y}px`;
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      const x = parseFloat(panel.style.left) || 0;
+      const y = parseFloat(panel.style.top) || 0;
+      localStorage.setItem(TERM_STORAGE.pos, JSON.stringify({ x, y }));
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
   });
+
   window.addEventListener('keydown', (event) => {
     if (event.ctrlKey && event.key === '`') {
       event.preventDefault();
       termToggle();
     }
   });
-  // 新建 / 切换会话时同步一下工作区显示
-  $('termCwd').textContent = state.info?.workspace ?? '';
+
+  const observer = new ResizeObserver(() => {
+    if (term.open) termActiveTab()?.fit.fit();
+  });
+  observer.observe($('workspace'));
+
+  document.addEventListener('banana:theme', () => {
+    if (term.tabs.length) termRestyle();
+  });
+  termUpdateCwd(state.info?.workspace ?? '');
 }
 
 function bind() {