@vincentbanana/bananacli 0.5.0 → 0.6.0

package/dist/ui/app.js

@@ -41,6 +41,7 @@ const ICONS = {
   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"/>',
   diff: '<path d="M6 4v16M18 4v16M3 8h6M15 16h6M3 16h6M15 8h6"/>',
+  refresh: '<path d="M20 11a8 8 0 1 0-2.3 5.7"/><path d="M20 5v6h-6"/>',
 };
 
 const TOOL_ICON = {
@@ -175,7 +176,11 @@ const state = {
   overlay: null,
   ccIndex: 0,
   ccItems: [],
-  workbench: { open: false, tab: 'terminal', width: 420 },
+  tabs: [],
+  activeTab: null,
+  review: { open: false, mode: 'changes', width: 520 },
+  sidebar: { open: true, width: 344 },
+  dock: { open: false, height: 280 },
   changes: null,
   changesFile: null,
 };
@@ -236,7 +241,8 @@ async function switchSession(ref) {
     renderSidebar();
     renderThread();
     $('filesTitle').textContent = `项目文件 · ${state.info?.workspace ?? ''}`;
-    if (state.workbench.open && state.workbench.tab === 'changes') void loadChanges(true);
+    setActiveTab(state.info?.session?.id ?? null);
+    if (state.review.open && state.review.mode === 'changes') void loadChanges(true);
     closeSidebarIfOverlay();
   } catch (error) {
     toast('切换会话失败：' + (error?.message ?? error));
@@ -247,10 +253,153 @@ async function switchSession(ref) {
   }
 }
 
+// ---------------- 会话标签条 ----------------
+function tabTitleFor(id) {
+  if (state.info?.session?.id === id && state.info.session.title) return state.info.session.title;
+  return state.sessions.find((item) => item.id === id)?.title || '新对话';
+}
+
+function saveTabs() {
+  try {
+    localStorage.setItem(
+      SHELL_STORAGE.tabState,
+      JSON.stringify({ all: state.tabs, active: state.activeTab }),
+    );
+  } catch {}
+}
+
+function upsertTab(id, title) {
+  if (!id) return;
+  const existing = state.tabs.find((tab) => tab.id === id);
+  if (existing) {
+    if (title) existing.title = title;
+    return;
+  }
+  state.tabs.push({ id, title: title || tabTitleFor(id) });
+}
+
+function setActiveTab(id) {
+  state.activeTab = id;
+  if (id) upsertTab(id);
+  saveTabs();
+  renderTabs();
+  renderSidebar();
+}
+
+function renderTabs() {
+  const strip = $('tabStrip');
+  if (!strip) return;
+  strip.innerHTML = '';
+  for (const tab of state.tabs) {
+    const node = document.createElement('button');
+    node.type = 'button';
+    node.className = `tab${tab.id === state.activeTab ? ' is-active' : ''}`;
+    node.draggable = true;
+    node.dataset.id = tab.id;
+    const title = tabTitleFor(tab.id) || tab.title || '新对话';
+    node.innerHTML =
+      `<span class="tab-avatar">${escapeHtml(title.slice(0, 1))}</span>` +
+      `<span class="tab-title">${escapeHtml(title)}</span>` +
+      `<span class="tab-close" title="关闭标签"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></span>`;
+    node.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0 || event.target.closest('.tab-close')) return;
+      if (tab.id !== state.activeTab) {
+        event.preventDefault();
+        switchSession(tab.id);
+      }
+    });
+    node.addEventListener('click', (event) => {
+      if (event.target.closest('.tab-close')) {
+        event.stopPropagation();
+        closeTab(tab.id);
+        return;
+      }
+      if (event.detail === 0) switchSession(tab.id);
+    });
+    node.addEventListener('auxclick', (event) => {
+      if (event.button === 1) closeTab(tab.id);
+    });
+    node.addEventListener('dragstart', (event) => {
+      event.dataTransfer.setData('text/plain', tab.id);
+      node.classList.add('is-dragging');
+    });
+    node.addEventListener('dragend', () => node.classList.remove('is-dragging'));
+    node.addEventListener('dragover', (event) => event.preventDefault());
+    node.addEventListener('drop', (event) => {
+      event.preventDefault();
+      const source = event.dataTransfer.getData('text/plain');
+      const from = state.tabs.findIndex((item) => item.id === source);
+      const to = state.tabs.findIndex((item) => item.id === tab.id);
+      if (from < 0 || to < 0 || from === to) return;
+      const [picked] = state.tabs.splice(from, 1);
+      state.tabs.splice(to, 0, picked);
+      saveTabs();
+      renderTabs();
+    });
+    strip.appendChild(node);
+  }
+}
+
+function closeTab(id) {
+  const index = state.tabs.findIndex((tab) => tab.id === id);
+  if (index < 0) return;
+  state.tabs.splice(index, 1);
+  saveTabs();
+  if (state.activeTab !== id) {
+    renderTabs();
+    return;
+  }
+  if (state.tabs.length) {
+    const next = state.tabs[Math.max(0, index - 1)] ?? state.tabs[0];
+    switchSession(next.id);
+  } else {
+    state.activeTab = null;
+    renderTabs();
+    $('newChat').click();
+  }
+}
+
+function initTabs() {
+  let saved = null;
+  try {
+    saved = JSON.parse(localStorage.getItem(SHELL_STORAGE.tabState) || 'null');
+  } catch {}
+  if (saved && Array.isArray(saved.all)) {
+    const known = new Set(state.sessions.map((item) => item.id));
+    if (state.info?.session?.id) known.add(state.info.session.id);
+    state.tabs = saved.all.filter((tab) => tab && typeof tab.id === 'string' && known.has(tab.id));
+    state.activeTab = saved.active ?? null;
+  }
+  const current = state.info?.session?.id;
+  if (current) upsertTab(current, state.info.session.title);
+  if (!state.activeTab || !state.tabs.some((tab) => tab.id === state.activeTab)) {
+    state.activeTab = current ?? state.tabs[0]?.id ?? null;
+  }
+  renderTabs();
+}
+
 function renderSidebar() {
   const list = $('sessionList');
   list.innerHTML = '';
+  let group = '';
+  const dayOf = (iso) => {
+    const date = new Date(iso);
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    const value = date.getTime();
+    if (value >= start) return '今天';
+    if (value >= start - 86_400_000) return '昨天';
+    return '更早';
+  };
   state.sessions.forEach((item, index) => {
+    const label = dayOf(item.updatedAt);
+    if (label !== group) {
+      group = label;
+      const head = document.createElement('div');
+      head.className = 'sb-group';
+      head.textContent = label;
+      list.appendChild(head);
+    }
     const active = item.id === state.info?.session?.id ? ' is-active' : '';
     const node = document.createElement('div');
     node.className = `session-item${active}`;
@@ -270,7 +419,11 @@ function renderSidebar() {
 
     node.querySelector('[data-del]').addEventListener('click', (event) => {
       event.stopPropagation();
-      post('session', { action: 'delete', ref: item.id }).then(() => refresh(true));
+      post('session', { action: 'delete', ref: item.id }).then(() => {
+        state.tabs = state.tabs.filter((tab) => tab.id !== item.id);
+        saveTabs();
+        refresh(true);
+      });
     });
 
     node.querySelector('[data-menu]').addEventListener('click', (event) => {
@@ -425,36 +578,42 @@ 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>`;
+  // 新会话：只保留 wordmark，操作提示放到 composer 下方，和 opencode 的首页一致
   wrap.innerHTML =
-    '<h1>要做什么</h1>' +
-    '<p>读写文件、跑命令、查资料，都可以。默认每次都要你确认。</p>' +
-    banner +
-    '<div class="suggest">' +
-    ['这个仓库是做什么的', '跑一下测试并修复失败', '给我一个重构方案，先别改代码', '把 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 class="home-wordmark" aria-hidden="true">
+       <span class="wm-text">Banana</span>
+       <svg class="wm-leaf" viewBox="0 0 72 72"><path d="M14 42c2-16 14-27 34-28 0 18-8 31-24 35"/><path d="M14 58c8-15 18-24 32-31"/><path d="M44 14c-3 7-4 13-3 20"/></svg>
      </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);
+
+  const tips = $('homeTips');
+  if (tips) {
+    const provider = state.info?.provider;
+    const current = state.info?.providers?.find((item) => item.current);
+    const hasKey = Boolean(current?.keyReady);
+    tips.innerHTML =
+      (hasKey
+        ? ''
+        : `<div class="empty-warn">
+             <strong>还差一步：填上 API Key</strong>
+             <span>没有 key 就没法对话。点下面的按钮，填进去立刻就能用（key 只存在你自己的电脑上）。</span>
+             <button class="btn primary" id="emptySetup">现在去填</button>
+           </div>`) +
+      '<div class="suggest">' +
+      ['这个仓库是做什么的', '跑一下测试并修复失败', '给我一个重构方案，先别改代码', '把 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>`;
+    tips.querySelectorAll('.suggest button').forEach((btn) => {
+      btn.addEventListener('click', () => { $('input').value = btn.textContent; $('input').focus(); grow(); });
+    });
+    const setup = tips.querySelector('#emptySetup');
+    if (setup) setup.addEventListener('click', () => openSettings());
+  }
   return wrap;
 }
 
@@ -472,6 +631,7 @@ function renderThread() {
     if (node) THREAD.appendChild(node);
   }
   renderTurnMeta();
+  updateHomeMode();
   // 切换会话时瞬间定位到底部；平滑滚动只用于新消息
   scrollToEnd(false);
 }
@@ -542,8 +702,13 @@ async function refresh(path) {
   state.info = info;
   const { sessions } = await get('sessions');
   state.sessions = sessions;
+  if (state.info?.session?.id && state.tabs.length) {
+    upsertTab(state.info.session.id, state.info.session.title);
+    state.activeTab = state.info.session.id;
+  }
   renderHeader();
   renderSidebar();
+  renderTabs();
   if (path) renderThread();
 }
 
@@ -572,7 +737,6 @@ function syncOverlayState() {
     !$('commandCenter').hidden ||
     !$('codeViewer').hidden ||
     !$('settingsSheet').hidden ||
-    !$('workbench').hidden ||
     !$('approvalModal').hidden;
   document.body.classList.toggle('has-overlay', open);
 }
@@ -583,7 +747,7 @@ function closeTopOverlay() {
   if (!$('codeViewer').hidden) return closeViewer();
   if (!$('settingsSheet').hidden) return closeSettings();
   if (!$('approvalModal').hidden) return closeApproval(false);
-  if (!$('workbench').hidden) return closeWorkbench();
+  if (state.review.open) return closeReview();
   return false;
 }
 
@@ -742,6 +906,7 @@ async function send() {
   userBody.textContent = text;
   userMsg.appendChild(userBody);
   THREAD.appendChild(userMsg);
+  updateHomeMode();
 
   const botMsg = document.createElement('article');
   botMsg.className = 'msg assistant enter';
@@ -886,6 +1051,11 @@ async function send() {
                 row.addEventListener('click', () => toggleToolOutput(row, event.detail, !event.ok));
               }
             }
+          } else if (event.type === 'status') {
+            if (event.message) {
+              $('composerHint').textContent = event.message;
+              $('threadMeta').textContent = event.message;
+            }
           } else if (event.type === 'approval') {
             const allowed = await askApproval(event);
             await post('approve', { id: event.id, allowed });
@@ -918,8 +1088,9 @@ async function send() {
             const { sessions } = await get('sessions');
             state.sessions = sessions;
             renderSidebar();
+            renderTabs();
             renderHeader();
-            if (state.workbench.open && state.workbench.tab === 'changes') void loadChanges(true);
+            if (state.review.open && state.review.mode === 'changes') void loadChanges(true);
           }
         }
       }
@@ -943,7 +1114,8 @@ async function send() {
     finishWork();
     setBusy(false);
     scrollToEnd();
-    if (state.workbench.open && state.workbench.tab === 'changes') void loadChanges(true);
+    renderHeader();
+    if (state.review.open && state.review.mode === 'changes') void loadChanges(true);
   }
 }
 
@@ -1117,6 +1289,7 @@ async function runCommand(text) {
   userBody.textContent = text;
   userMsg.appendChild(userBody);
   THREAD.appendChild(userMsg);
+  updateHomeMode();
 
   const botMsg = document.createElement('article');
   botMsg.className = 'msg assistant enter';
@@ -1509,10 +1682,10 @@ function renderTerminalSettings(body) {
   });
   card.appendChild(settingsRow('默认 Shell', '新建终端标签时使用。', shellSelect));
 
-  const isTermOpen = state.workbench.open && state.workbench.tab === 'terminal';
+  const isTermOpen = state.dock.open;
   const openBtn = settingsButton(isTermOpen ? '收起终端' : '打开终端', () => {
     closeSettings();
-    if (isTermOpen) closeWorkbench();
+    if (isTermOpen) termClose();
     else termOpen();
   }, true);
   card.appendChild(settingsRow('终端面板', '在右侧工作台打开，不会挡住输入框。快捷键 Ctrl+`。', openBtn));
@@ -1769,113 +1942,144 @@ function renderAboutSettings(body) {
   body.appendChild(section);
 }
 
-// ---------------- 右侧工作台 ----------------
-const WB_STORAGE = { width: 'banana.wb.width', tab: 'banana.wb.tab' };
-const WB_MIN = 340;
-const WB_DEFAULT = 420;
+// ---------------- 外壳：侧栏 / Review / 终端 dock ----------------
+const SHELL_STORAGE = {
+  sidebarWidth: 'banana.sidebar.width',
+  sidebarOpen: 'banana.sidebar.open',
+  reviewWidth: 'banana.review.width',
+  reviewMode: 'banana.review.mode',
+  tabState: 'banana.tabs.v1',
+  dockHeight: 'banana.dock.height',
+  dockOpen: 'banana.dock.open',
+};
 
-function wbApplyWidth(width) {
-  const max = Math.max(WB_MIN, Math.min(820, window.innerWidth * 0.72));
-  state.workbench.width = Math.max(WB_MIN, Math.min(Number(width) || WB_DEFAULT, max));
-  $('workbench').style.setProperty('--wb-width', `${Math.round(state.workbench.width)}px`);
+function applySidebarWidth(width) {
+  const max = Math.max(240, Math.min(430, window.innerWidth * 0.42));
+  state.sidebar.width = Math.max(240, Math.min(Number(width) || 344, max));
+  document.documentElement.style.setProperty('--sidebar', `${Math.round(state.sidebar.width)}px`);
 }
 
-function wbIsNarrow() {
-  return window.matchMedia('(max-width: 980px)').matches;
+function setSidebar(open) {
+  state.sidebar.open = Boolean(open);
+  $('sidebar').classList.toggle('open', state.sidebar.open && window.matchMedia('(max-width: 900px)').matches);
+  $('sidebar').hidden = !state.sidebar.open && !window.matchMedia('(max-width: 900px)').matches;
+  if (window.matchMedia('(max-width: 900px)').matches) $('sidebar').hidden = false;
+  try {
+    localStorage.setItem(SHELL_STORAGE.sidebarOpen, state.sidebar.open ? '1' : '0');
+  } catch {}
 }
 
-function openWorkbench(tab) {
-  const wb = $('workbench');
-  if (tab) state.workbench.tab = tab;
-  wb.classList.remove('is-closing');
-  wb.hidden = false;
-  state.workbench.open = true;
-  wbApplyWidth(state.workbench.width);
-  // 强制读一次布局，保证从 0 宽开始过渡（不依赖可能被后台节流的 rAF）
-  void wb.offsetWidth;
-  wb.classList.add('open');
-  setWorkbenchTab(state.workbench.tab);
-  $('wbScrim').hidden = !wbIsNarrow();
-  syncOverlayState();
+function toggleSidebar() {
+  setSidebar(!state.sidebar.open || (window.matchMedia('(max-width: 900px)').matches && !$('sidebar').classList.contains('open')));
 }
 
-function closeWorkbench() {
-  const wb = $('workbench');
-  if (!state.workbench.open) return;
-  state.workbench.open = false;
-  wb.classList.remove('open');
-  wb.classList.add('is-closing');
-  $('wbScrim').hidden = true;
-  setTimeout(() => {
-    if (state.workbench.open) return;
-    wb.hidden = true;
-    wb.classList.remove('is-closing');
-    syncOverlayState();
-    $('input')?.focus();
-  }, 280);
+function applyReviewWidth(width) {
+  const max = Math.max(480, Math.min(800, window.innerWidth * 0.7));
+  state.review.width = Math.max(480, Math.min(Number(width) || 520, max));
+  $('reviewPanel').style.setProperty('--review-width', `${Math.round(state.review.width)}px`);
 }
 
-function setWorkbenchTab(tab) {
-  if (!['terminal', 'files', 'changes'].includes(tab)) tab = 'terminal';
-  state.workbench.tab = tab;
+function setReviewMode(mode) {
+  if (!['changes', 'files'].includes(mode)) mode = 'changes';
+  state.review.mode = mode;
   try {
-    localStorage.setItem(WB_STORAGE.tab, tab);
+    localStorage.setItem(SHELL_STORAGE.reviewMode, mode);
   } catch {}
-  $('wbTabs').querySelectorAll('.wb-tab').forEach((node) => {
-    const on = node.dataset.tab === tab;
-    node.classList.toggle('is-on', on);
-    node.setAttribute('aria-selected', String(on));
-  });
-  $('workbench').querySelectorAll('.wb-pane').forEach((node) => {
-    node.classList.toggle('active', node.dataset.pane === tab);
-  });
-  if (tab === 'terminal') {
-    termEnsure();
-    requestAnimationFrame(() => termFitActive());
-  } else if (tab === 'files') {
+  $('reviewTabChanges').classList.toggle('is-on', mode === 'changes');
+  $('reviewTabFiles').classList.toggle('is-on', mode === 'files');
+  $('changesPanel').classList.toggle('is-on', mode === 'changes');
+  $('filesPanel').classList.toggle('is-on', mode === 'files');
+  if (mode === 'changes') void loadChanges();
+  else {
+    applyFilesLayout();
+    $('filesTitle').textContent = `工作区文件 · ${state.info?.workspace ?? ''}`;
     if (!$('filesTree').childElementCount) void loadTree('.');
-  } else if (tab === 'changes') {
-    void loadChanges(true);
   }
 }
 
-function initWorkbench() {
+function openReview(mode = 'changes') {
+  state.review.open = true;
+  const panel = $('reviewPanel');
+  panel.classList.remove('is-closing');
+  panel.hidden = false;
+  applyReviewWidth(state.review.width);
+  setReviewMode(mode);
+  syncOverlayState();
+}
+
+function closeReview() {
+  const panel = $('reviewPanel');
+  if (!state.review.open) return;
+  state.review.open = false;
+  panel.classList.add('is-closing');
+  setTimeout(() => {
+    if (state.review.open) return;
+    panel.hidden = true;
+    panel.classList.remove('is-closing');
+    syncOverlayState();
+    $('input')?.focus();
+    termFitActive();
+  }, 200);
+}
+
+function initShell() {
   try {
-    const savedWidth = Number(localStorage.getItem(WB_STORAGE.width));
-    if (savedWidth) state.workbench.width = savedWidth;
-    const savedTab = localStorage.getItem(WB_STORAGE.tab);
-    if (savedTab) state.workbench.tab = savedTab;
-  } catch {}
-  wbApplyWidth(state.workbench.width);
-  $('wbTabs').querySelectorAll('.wb-tab').forEach((node) => {
-    node.addEventListener('click', () => setWorkbenchTab(node.dataset.tab));
+    const sw = Number(localStorage.getItem(SHELL_STORAGE.sidebarWidth));
+    applySidebarWidth(sw || 344);
+    const rw = Number(localStorage.getItem(SHELL_STORAGE.reviewWidth));
+    applyReviewWidth(rw || 520);
+    const rm = localStorage.getItem(SHELL_STORAGE.reviewMode);
+    if (rm) state.review.mode = rm;
+    const dh = Number(localStorage.getItem(SHELL_STORAGE.dockHeight));
+    if (dh) state.dock.height = Math.max(120, Math.min(dh, window.innerHeight * 0.6));
+    const openSidebar = localStorage.getItem(SHELL_STORAGE.sidebarOpen);
+    state.sidebar.open = openSidebar === null ? window.innerWidth > 900 : openSidebar !== '0';
+  } catch {
+    applySidebarWidth(344);
+    applyReviewWidth(520);
+  }
+  setSidebar(state.sidebar.open);
+  $('reviewTabChanges').addEventListener('click', () => setReviewMode('changes'));
+  $('reviewTabFiles').addEventListener('click', () => setReviewMode('files'));
+  $('reviewClose').addEventListener('click', closeReview);
+  $('reviewRefresh').addEventListener('click', () => {
+    state.changes = null;
+    if (state.review.mode === 'changes') void loadChanges(true);
+    else $('filesTree').innerHTML = '', void loadTree('.');
+  });
+  $('sbResizer').addEventListener('pointerdown', (event) => {
+    event.preventDefault();
+    const move = (moveEvent) => applySidebarWidth(moveEvent.clientX - 8);
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      try {
+        localStorage.setItem(SHELL_STORAGE.sidebarWidth, String(Math.round(state.sidebar.width)));
+      } catch {}
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
   });
-  $('wbClose').addEventListener('click', closeWorkbench);
-  $('wbScrim').addEventListener('click', closeWorkbench);
-  $('changesRefresh').addEventListener('click', () => loadChanges(true));
-  $('wbResizer').addEventListener('pointerdown', (event) => {
+  $('reviewResizer').addEventListener('pointerdown', (event) => {
     event.preventDefault();
-    $('workbench').classList.add('is-resizing');
     const move = (moveEvent) => {
-      wbApplyWidth(window.innerWidth - moveEvent.clientX);
-      if (state.workbench.tab === 'terminal') termFitActive();
+      applyReviewWidth(window.innerWidth - 8 - moveEvent.clientX);
+      termFitActive();
     };
     const up = () => {
       window.removeEventListener('pointermove', move);
       window.removeEventListener('pointerup', up);
-      $('workbench').classList.remove('is-resizing');
       try {
-        localStorage.setItem(WB_STORAGE.width, String(Math.round(state.workbench.width)));
+        localStorage.setItem(SHELL_STORAGE.reviewWidth, String(Math.round(state.review.width)));
       } catch {}
-      if (state.workbench.tab === 'terminal') termFitActive();
+      termFitActive();
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up);
   });
   window.addEventListener('resize', () => {
-    wbApplyWidth(state.workbench.width);
-    $('wbScrim').hidden = !state.workbench.open || !wbIsNarrow();
-    if (state.workbench.tab === 'terminal') termFitActive();
+    applyReviewWidth(state.review.width);
+    termFitActive();
   });
 }
 
@@ -1899,14 +2103,18 @@ async function loadChanges(force = false) {
 function renderChanges() {
   const list = $('changesList');
   const detail = $('changesDetail');
+  const stats = $('reviewStats');
   list.innerHTML = '';
   const turns = state.changes?.turns ?? [];
   if (!turns.length) {
-    list.innerHTML = '<div class="hint" style="padding:12px">还没有文件改动。让 Banana 改一次文件后，这里会出现增删行。</div>';
+    stats.textContent = '';
+    list.innerHTML = '<div class="changes-empty"><strong>还没有改动</strong><span>让 Banana 改一次文件后，这里会出现增删行。</span></div>';
     detail.innerHTML = '<div class="hint">没有可显示的改动。</div>';
     return;
   }
   let total = 0;
+  let additions = 0;
+  let deletions = 0;
   for (const turn of turns) {
     const group = document.createElement('div');
     group.className = 'changes-group';
@@ -1916,9 +2124,12 @@ function renderChanges() {
     group.appendChild(head);
     for (const file of turn.files) {
       total += 1;
+      additions += file.additions;
+      deletions += file.deletions;
       const button = document.createElement('button');
       button.className = 'change-file';
       button.innerHTML =
+        `<span class="change-status ${file.missing ? 'deleted' : file.existed ? 'modified' : 'added'}">${file.missing ? 'D' : file.existed ? 'M' : 'A'}</span>` +
         `<span class="cf-name">${escapeHtml(file.path)}</span>` +
         `<span class="cf-count"><i class="plus">+${file.additions}</i><i class="minus">-${file.deletions}</i></span>`;
       button.addEventListener('click', () => {
@@ -1930,7 +2141,7 @@ function renderChanges() {
     }
     list.appendChild(group);
   }
-  $('changesTitle').textContent = `本会话改动 · ${total} 个文件`;
+  stats.innerHTML = `<i class="plus">+${additions}</i> <i class="minus">-${deletions}</i> · ${total} 个文件`;
   // 默认打开第一个有内容的文件
   const firstFile = turns.find((turn) => turn.files.length)?.files[0];
   if (firstFile) {
@@ -2043,21 +2254,21 @@ function applyFilesLayout() {
 
 function openFiles() {
   applyFilesLayout();
-  $('filesTitle').textContent = `项目文件 · ${state.info?.workspace ?? ''}`;
-  openWorkbench('files');
+  $('filesTitle').textContent = `工作区文件 · ${state.info?.workspace ?? ''}`;
+  openReview('files');
 }
 
 function openChanges() {
-  openWorkbench('changes');
+  openReview('changes');
   void loadChanges(true);
 }
 
 function closeFiles() {
-  closeWorkbench();
+  closeReview();
 }
 
 function toggleFiles() {
-  if (!$('workbench').hidden && state.workbench.tab === 'files') closeWorkbench();
+  if (state.review.open && state.review.mode === 'files') closeReview();
   else openFiles();
 }
 
@@ -2193,7 +2404,7 @@ function termTheme() {
     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)',
+    selectionBackground: dark ? 'rgba(220, 222, 141, 0.3)' : 'rgba(138, 109, 18, 0.18)',
     black: dark ? '#2a2a30' : '#3a3a40',
     red: dark ? '#d1786e' : '#b4453a',
     green: dark ? '#86b98d' : '#2f7d50',
@@ -2218,7 +2429,7 @@ function termActiveTab() {
 }
 
 function termFitActive() {
-  if ($('workbench').hidden || state.workbench.tab !== 'terminal') return;
+  if ($('terminalPanel').hidden) return;
   const tab = termActiveTab();
   if (!tab) return;
   try {
@@ -2229,6 +2440,18 @@ function termFitActive() {
   }
 }
 
+function applyDockHeight(height, persist = true) {
+  const max = Math.max(160, window.innerHeight * 0.6);
+  state.dock.height = Math.max(120, Math.min(Number(height) || 280, max));
+  $('terminalPanel').style.setProperty('--term-height', `${Math.round(state.dock.height)}px`);
+  if (persist) {
+    try {
+      localStorage.setItem(SHELL_STORAGE.dockHeight, String(Math.round(state.dock.height)));
+    } catch {}
+  }
+  requestAnimationFrame(() => termFitActive());
+}
+
 function termUpdateCwd(cwd) {
   const label = $('termCwd');
   if (label && cwd) label.textContent = cwd;
@@ -2463,21 +2686,41 @@ function termEnsure() {
 }
 
 function termOpen() {
-  openWorkbench('terminal');
+  const panel = $('terminalPanel');
+  state.dock.open = true;
+  panel.classList.remove('is-closing');
+  panel.hidden = false;
+  applyDockHeight(state.dock.height, false);
   termUpdateCwd(state.info?.workspace ?? '');
+  termEnsure();
+  try {
+    localStorage.setItem(SHELL_STORAGE.dockOpen, '1');
+  } catch {}
   setTimeout(() => {
     termFitActive();
     termActiveTab()?.terminal.focus();
-  }, 320);
+  }, 220);
 }
 
 function termClose() {
-  closeWorkbench();
+  const panel = $('terminalPanel');
+  if (!state.dock.open) return;
+  state.dock.open = false;
+  panel.classList.add('is-closing');
+  try {
+    localStorage.setItem(SHELL_STORAGE.dockOpen, '0');
+  } catch {}
+  setTimeout(() => {
+    if (state.dock.open) return;
+    panel.hidden = true;
+    panel.classList.remove('is-closing');
+    $('input')?.focus();
+  }, 200);
 }
 
 function termToggle() {
-  if (!state.workbench.open || state.workbench.tab !== 'terminal') termOpen();
-  else closeWorkbench();
+  if (state.dock.open) termClose();
+  else termOpen();
 }
 
 function termRestyle() {
@@ -2528,7 +2771,25 @@ function bindTerminal() {
   });
 
   const observer = new ResizeObserver(() => termFitActive());
-  observer.observe($('workbench'));
+  observer.observe($('terminalPanel'));
+
+  $('termResizer').addEventListener('pointerdown', (event) => {
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = state.dock.height;
+    const move = (moveEvent) => {
+      applyDockHeight(startHeight - (moveEvent.clientY - startY), false);
+      termFitActive();
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      applyDockHeight(state.dock.height);
+      if (state.dock.height <= 150) termClose();
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  });
 
   document.addEventListener('banana:theme', () => {
     if (term.tabs.length) termRestyle();
@@ -2861,15 +3122,18 @@ function initDesktop() {
 
 function bind() {
   $('newChat').innerHTML = svg('plus');
+  $('newTab').innerHTML = svg('plus');
+  $('searchBtn').innerHTML = svg('search');
   $('sendBtn').innerHTML = svg('send');
   $('abortBtn').innerHTML = svg('stop');
-  $('toggleSidebar').innerHTML = svg('list');
+  $('toggleSidebar').innerHTML = '<svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.6c2.6-.4 4.9.5 6.3 2.6M12.3 7.2c1.4-2.1 3.7-3 6.3-2.6-1.1 1.6-1.2 3.1-.4 4.6.8 1.5.8 3-.1 4.5-1.1 2-3.3 3.5-5.9 4.3-2.3.7-4.7.7-7.1 0"/><path d="M7.2 18c-1.1-2-1.2-4-.4-6 .9-2.3 2.5-3.7 4.7-4.2"/></svg>';
   $('closeSettings').innerHTML = svg('x');
+  $('reviewClose').innerHTML = svg('x');
+  $('reviewRefresh').innerHTML = svg('refresh');
   $('filesBtn').innerHTML = svg('panel');
-  $('changesBtn').innerHTML = svg('diff');
-  $('wbClose').innerHTML = svg('x');
+  $('reviewBtn').innerHTML = svg('diff');
   $('pluginsBtn').innerHTML = svg('plug');
-  initWorkbench();
+  initShell();
   initFileResize();
   bindTerminal();
   initTooltips();
@@ -2888,6 +3152,7 @@ function bind() {
       renderHeader();
       renderSidebar();
       renderThread();
+      setActiveTab(state.info?.session?.id ?? null);
       $('input').focus();
     } catch (error) {
       toast('新建对话失败：' + (error?.message ?? error));
@@ -2903,9 +3168,15 @@ function bind() {
   $('settingsSheet').addEventListener('mousedown', (event) => {
     if (event.target === $('settingsSheet')) closeSettings();
   });
-  $('toggleSidebar').addEventListener('click', () => $('sidebar').classList.toggle('open'));
+  $('toggleSidebar').addEventListener('click', toggleSidebar);
   $('filesBtn').addEventListener('click', toggleFiles);
-  $('changesBtn').addEventListener('click', openChanges);
+  $('reviewBtn').addEventListener('click', () => {
+    if (state.review.open && state.review.mode === 'changes') closeReview();
+    else openChanges();
+  });
+  $('searchBtn').addEventListener('click', openCommandCenter);
+  $('openSettingsFoot').addEventListener('click', () => openSettings());
+  $('newTab').addEventListener('click', () => $('newChat').click());
   $('themeBtn').addEventListener('click', cycleTheme);
   $('pluginsBtn').addEventListener('click', () => openSettings('plugins'));
   $('previewWrap').addEventListener('click', toggleWrap);
@@ -2936,7 +3207,7 @@ function bind() {
     const result = await post('undo');
     toast(result.had ? `已回滚：恢复 ${result.restored} 个文件` : '没有可回滚的改动');
     state.changes = null;
-    if (state.workbench.open && state.workbench.tab === 'changes') void loadChanges(true);
+    if (state.review.open && state.review.mode === 'changes') void loadChanges(true);
   });
 
   $('composer').addEventListener('submit', (event) => { event.preventDefault(); send(); });
@@ -3037,8 +3308,23 @@ async function boot() {
     commandList = [];
   }
   await refresh(true);
+  initTabs();
+  $('workspaceLabel').textContent = state.info?.workspace ?? '';
+  updateHomeMode();
+  try {
+    if (localStorage.getItem(SHELL_STORAGE.dockOpen) === '1') termOpen();
+  } catch {}
   grow();
   $('input').focus();
 }
 
+function updateHomeMode() {
+  const card = $('chatCard');
+  if (!card) return;
+  const empty = !(state.info?.session?.messages?.length);
+  card.classList.toggle('home-mode', empty);
+  const tips = $('homeTips');
+  if (tips) tips.hidden = !empty;
+}
+
 boot().catch((error) => toast('加载失败：' + error.message));