@vincentbanana/banana-gui 0.2.0 → 0.4.0

package/README.md

@@ -6,9 +6,26 @@ Banana 的图形界面：本地起一个服务，用浏览器打开。黑白主
 
 ```bash
 npm install -g @vincentbanana/banana-gui
-banana-gui
 ```
 
+装完有两种启动方式，**同一份安装，不用额外装东西**：
+
+```bash
+banana-gui              # 浏览器版：启动后自动开浏览器，最轻
+banana-gui --desktop    # 桌面版：直接开独立窗口
+banana-gui-desktop      # 同上，等价的独立命令
+```
+
+electron 是可选依赖（`optionalDependencies`），npm 安装时会自动带上；万一某个平台装不上，`banana-gui` 仍然照常工作，只是 `--desktop` 会提示你用浏览器版。
+
+> **国内网络注意**：electron 的二进制默认从 GitHub 下载，国内经常连不上（连不上时 npm 会静默跳过它，浏览器版不受影响）。想要桌面版就用镜像重装一次：
+>
+> ```bash
+> npm install -g electron --electron_mirror=https://npmmirror.com/mirrors/electron/
+> ```
+>
+> 装完 `banana-gui --desktop` 就能开窗口了。
+
 首次启动会进配置向导（选 provider、贴 API key、选权限、测连接），配置与 CLI 共用 `~/.banana/config.json`。
 
 ## 用法
@@ -35,17 +52,27 @@ banana-gui --provider deepseek --model deepseek-chat
 - 三态主题：跟随系统 / 浅色 / 深色，纯黑白无渐变
 - 没配 API Key 也能打开界面，照着引导填完即可用
 
-## 桌面版
+## 两种方式对比
+
+| | 启动命令 | 需要什么 | 说明 |
+| --- | --- | --- | --- |
+| 浏览器版 | `banana-gui` | 任何装了 Node 20+ 的系统 | 启动后自动打开浏览器，几十 MB |
+| 桌面版 | `banana-gui --desktop` | 同一个 npm 包 | 独立窗口，约 200MB（内含 electron） |
+
+两者用的是同一套 agent 内核和同一份界面资源，功能完全一致，只是外壳不同。
+
+## 打包成安装包（可选）
 
-仓库里有 Electron 主进程，可以打包成独立应用：
+想出 `.exe` / `.dmg` / `AppImage` 的话，在源码仓库里构建：
 
 ```bash
-npm install          # 装 electron 与 electron-builder
-npm run desktop      # 本地直接跑桌面版
-npm run dist:win     # 出 Windows 安装包（也支持 dist:mac / dist:linux）
+git clone <这个仓库>
+cd banana-gui
+npm install          # 装 electron-builder
+npm run dist:win     # 也支持 dist:mac / dist:linux
 ```
 
-npm 安装的 `banana-gui` 仍是浏览器版，零原生依赖，任何装了 Node 20+ 的系统都能跑。
+产物在 `gui/release/`。
 
 ## 配置
 

package/bin/banana-gui-desktop.mjs

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+// 桌面版启动器：npm 安装后直接开一个独立窗口，不用浏览器。
+//
+//   npm install -g @vincentbanana/banana-gui
+//   banana-gui-desktop        开窗口
+//   banana-gui-desktop --port 8080
+//
+// electron 是 optionalDependencies：装得上就能用，装不上会提示改用浏览器版
+// （banana-gui）。本文件不直接依赖 electron 的 API，只负责把它拉起来。
+import { spawn } from 'node:child_process';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const require_ = createRequire(import.meta.url);
+const args = process.argv.slice(2);
+
+if (args.includes('--help') || args.includes('-h')) {
+  console.log('banana-gui-desktop — Banana 的桌面版（独立窗口）');
+  console.log('');
+  console.log('用法: banana-gui-desktop [选项]');
+  console.log('  --port <端口>    指定端口（默认随机）');
+  console.log('  --cwd <目录>     指定工作区');
+  console.log('  --provider <名>  指定 provider');
+  console.log('  --model <名>     指定模型');
+  console.log('  --help           显示帮助');
+  console.log('');
+  console.log('提示：日常使用建议用 banana-gui（浏览器版，更轻）。');
+  process.exit(0);
+}
+
+/** electron 装在依赖里；require('electron') 返回的是可执行文件路径。 */
+function electronBinary() {
+  for (const specifier of ['electron', '@vincentbanana/banana-gui/node_modules/electron']) {
+    try {
+      const resolved = require_.resolve(specifier);
+      // electron 主入口导出的是 exe 路径；解析失败时退回到包目录里的 dist
+      const binary = require_(resolved);
+      if (typeof binary === 'string') return binary;
+      return join(dirname(resolved), 'dist', process.platform === 'win32' ? 'electron.exe' : 'electron');
+    } catch {
+      /* 换下一个候选 */
+    }
+  }
+  return null;
+}
+
+const binary = electronBinary();
+if (!binary) {
+  console.error('没找到 electron，桌面版暂时用不了。');
+  console.error('');
+  console.error('可以先继续用浏览器版，功能完全一样：');
+  console.error('  banana-gui');
+  console.error('');
+  console.error('想用桌面版，试着补装一次：');
+  console.error('  npm install -g electron');
+  process.exit(1);
+}
+
+const main = join(here, '..', 'desktop', 'main.cjs');
+const child = spawn(binary, [main, ...args], {
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    BANANA_UI_DIR: join(here, '..', 'ui'),
+  },
+});
+child.on('error', (error) => {
+  console.error('桌面版启动失败：' + error.message);
+  console.error('可以先用浏览器版：banana-gui');
+  process.exit(1);
+});
+child.on('exit', (code) => process.exit(code ?? 0));
+for (const signal of ['SIGINT', 'SIGTERM']) {
+  process.on(signal, () => child.kill(signal));
+}

package/bin/banana-gui.mjs

@@ -4,12 +4,15 @@
 // 启动：banana-gui（首次会进配置向导）
 import { createRequire } from 'node:module';
 import { spawn } from 'node:child_process';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const require = createRequire(import.meta.url);
+const pkg = require('../package.json');
+const here = dirname(fileURLToPath(import.meta.url));
 
+/** CLI 内核入口。依赖可能被 npm 提升到上层 node_modules，用 require 解析更稳。 */
 function resolveCli() {
-  // 依赖可能被 npm 提升到上层 node_modules，用 require 解析更稳；
-  // 注意只能解析包根（子路径受 exports 限制）
   try {
     return require.resolve('@vincentbanana/bananacli');
   } catch {
@@ -17,23 +20,43 @@ function resolveCli() {
   }
 }
 
+/** electron 是可选依赖：装上了就能开独立窗口，没装就走浏览器。 */
+function electronBinary() {
+  for (const specifier of ['electron', '@vincentbanana/banana-gui/node_modules/electron']) {
+    try {
+      const resolved = require.resolve(specifier);
+      // electron 包的主入口导出的是可执行文件路径
+      const binary = require(resolved);
+      if (typeof binary === 'string') return binary;
+    } catch {
+      /* 换下一个候选 */
+    }
+  }
+  return null;
+}
+
 const args = process.argv.slice(2);
-const passthrough = ['--port', '--cwd', '--provider', '--model', '--base-url', '--api-key', '--setup'];
 
-if (args.some((arg) => arg === '--help' || arg === '-h' || args.length === 0 || arg === '--version' || arg === '-v')) {
-  if (args.includes('--version') || args.includes('-v')) {
-    console.log('0.1.1');
-    process.exit(0);
-  }
+if (args.includes('--version') || args.includes('-v')) {
+  console.log(pkg.version);
+  process.exit(0);
+}
+
+if (args.includes('--help') || args.includes('-h')) {
   console.log('banana-gui — Banana 的图形界面');
   console.log('');
   console.log('用法: banana-gui [选项]');
+  console.log('  --desktop        用独立窗口打开（需要已安装 electron）');
   console.log('  --port <端口>    指定端口（默认随机）');
   console.log('  --cwd <目录>     指定工作区');
   console.log('  --provider <名>  指定 provider');
   console.log('  --model <名>     指定模型');
-  console.log('  --open           启动后打开浏览器（默认已开启）');
+  console.log('  --no-open        不自动打开浏览器');
+  console.log('  --version        显示版本');
   console.log('  --help           显示帮助');
+  console.log('');
+  console.log('提示：默认用浏览器打开。想要独立窗口就加 --desktop，');
+  console.log('      或直接运行 banana-gui-desktop。');
   process.exit(0);
 }
 
@@ -43,19 +66,45 @@ if (!entry) {
   process.exit(1);
 }
 
-const cliArgs = ['--ui'];
-let forwarding = false;
-for (const arg of args) {
-  if (arg === '--open') {
-    forwarding = false;
-    continue;
+// 界面资源用本包自带的那份，保证 GUI 包和它的 ui/ 版本一致
+const uiDir = join(here, '..', 'ui');
+
+/** 用户参数原样转给内核；只摘掉本启动器自己的开关。 */
+function kernelArgs() {
+  const rest = [];
+  for (const arg of args) {
+    if (arg === '--desktop' || arg === '--open') continue;
+    rest.push(arg);
   }
-  forwarding = passthrough.includes(arg) || forwarding;
-  cliArgs.push(arg);
+  return rest;
 }
 
-const child = spawn(process.execPath, [entry, ...cliArgs], { stdio: 'inherit' });
-child.on('exit', (code) => process.exit(code ?? 0));
-for (const signal of ['SIGINT', 'SIGTERM']) {
-  process.on(signal, () => child.kill(signal));
-}
+if (args.includes('--desktop')) {
+  // --desktop：交给 electron 开独立窗口，本进程只做转发
+  const binary = electronBinary();
+  if (!binary) {
+    console.error('没装 electron，用不了独立窗口。补装一次即可：');
+    console.error('  npm install -g electron --electron_mirror=https://npmmirror.com/mirrors/electron/');
+    console.error('（国内网络必须加镜像参数，GitHub 连不上会装不了）');
+    console.error('不装也没关系：直接运行 banana-gui 用浏览器版，功能完全一样。');
+    process.exit(1);
+  }
+  launch(binary, [join(here, '..', 'desktop', 'main.cjs'), ...kernelArgs()], {});
+} else {
+  launch(process.execPath, [entry, '--ui', ...kernelArgs()], { BANANA_UI_DIR: uiDir });
+}
+
+function launch(command, commandArgs, extraEnv) {
+  const child = spawn(command, commandArgs, {
+    stdio: 'inherit',
+    env: { ...process.env, ...extraEnv },
+  });
+  child.on('error', (error) => {
+    console.error('启动失败：' + error.message);
+    process.exit(1);
+  });
+  child.on('exit', (code) => process.exit(code ?? 0));
+  for (const signal of ['SIGINT', 'SIGTERM']) {
+    process.on(signal, () => child.kill(signal));
+  }
+}

package/desktop/main.cjs

@@ -8,12 +8,39 @@ const require_ = createRequire(__filename);
 let child = null;
 let win = null;
 
-function startServer() {
-  const entry = require_.resolve('@vincentbanana/bananacli');
+// electron 自带的 node 运行 CLI 内核；ELECTRON_RUN_AS_NODE 让 electron.exe 当纯 node 用，
+// 否则会再开一个 Electron 窗口，而不是执行脚本。
+const PASSTHROUGH = ['--port', '--cwd', '--provider', '--model', '--base-url', '--api-key'];
+
+function serverArgs() {
+  const argv = process.argv.slice(2).filter((arg) => arg.startsWith('--'));
+  const extra = [];
+  for (const arg of argv) {
+    if (PASSTHROUGH.includes(arg)) {
+      extra.push(arg);
+      const value = process.argv[process.argv.indexOf(arg) + 1];
+      if (value && !value.startsWith('--')) extra.push(value);
+    }
+  }
   // 端口交给 CLI 随机分配，避免多开时互相抢占
-  child = spawn(process.execPath, [entry, '--ui', '--no-open'], {
+  return ['--ui', '--no-open', ...extra];
+}
+
+function startServer() {
+  let entry;
+  try {
+    // 依赖可能被提升到上层 node_modules；只能解析包根（子路径受 exports 限制）
+    entry = require_.resolve('@vincentbanana/bananacli');
+  } catch (error) {
+    throw new Error('找不到依赖 @vincentbanana/bananacli，请重新安装：npm install -g @vincentbanana/banana-gui');
+  }
+  child = spawn(process.execPath, [entry, ...serverArgs()], {
     stdio: ['ignore', 'pipe', 'pipe'],
-    env: process.env,
+    env: {
+      ...process.env,
+      ELECTRON_RUN_AS_NODE: '1',
+      BANANA_UI_DIR: process.env.BANANA_UI_DIR ?? join(__dirname, '..', 'ui'),
+    },
   });
   return new Promise((resolve, reject) => {
     let buffer = '';
@@ -58,6 +85,28 @@ async function createWindow() {
     shell.openExternal(target);
     return { action: 'deny' };
   });
+  if (process.argv.includes('--selftest')) await selfTest(url);
+}
+
+/** --selftest：不靠人眼看，直接在页面里断言界面渲染成功，然后退出。 */
+async function selfTest(url) {
+  try {
+    const probe = await win.webContents.executeJavaScript(`(() => ({
+      title: document.title,
+      composed: Boolean(document.querySelector('#composer')),
+      sidebar: Boolean(document.querySelector('#sidebar')),
+      scriptLoaded: typeof window.fetch === 'function' && Boolean(document.querySelector('#input')),
+      theme: getComputedStyle(document.documentElement).getPropertyValue('--bg').trim(),
+    }))()`);
+    const ok = probe.title === 'Banana' && probe.composed && probe.sidebar && probe.scriptLoaded;
+    console.log('SELFTEST ' + JSON.stringify({ ok, url: url.replace(/\/t\/[a-f0-9]+\//, '/t/<token>/'), ...probe }));
+    child?.kill();
+    app.exit(ok ? 0 : 1);
+  } catch (error) {
+    console.log('SELFTEST ' + JSON.stringify({ ok: false, error: String(error?.message ?? error) }));
+    child?.kill();
+    app.exit(1);
+  }
 }
 
 const menuTemplate = [

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@vincentbanana/banana-gui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Banana 的图形界面：本地服务 + 浏览器。黑白主题，自绘图标，无第三方 UI 依赖",
   "type": "module",
   "engines": {
     "node": ">=20.0.0"
   },
   "bin": {
-    "banana-gui": "bin/banana-gui.mjs"
+    "banana-gui": "bin/banana-gui.mjs",
+    "banana-gui-desktop": "bin/banana-gui-desktop.mjs"
   },
   "files": [
     "bin",
@@ -15,6 +16,16 @@
     "desktop",
     "README.md"
   ],
+  "keywords": [
+    "ai",
+    "agent",
+    "gui",
+    "web-ui",
+    "llm",
+    "terminal",
+    "desktop",
+    "electron"
+  ],
   "scripts": {
     "sync": "node ../scripts/sync-gui.mjs",
     "test": "node test/gui-package.test.mjs",
@@ -34,6 +45,7 @@
       "bin/**/*",
       "package.json"
     ],
+    "npmRebuild": false,
     "mac": {
       "category": "public.app-category.developer-tools",
       "target": [
@@ -52,21 +64,15 @@
       "category": "Development"
     }
   },
+  "optionalDependencies": {
+    "electron": "^33.4.11"
+  },
   "devDependencies": {
-    "electron": "^33.0.0",
     "electron-builder": "^25.0.0"
   },
   "dependencies": {
-    "@vincentbanana/bananacli": "^0.3.0"
+    "@vincentbanana/bananacli": "^0.4.0"
   },
-  "keywords": [
-    "ai",
-    "agent",
-    "gui",
-    "web-ui",
-    "llm",
-    "terminal"
-  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/ui/app.js

@@ -130,6 +130,11 @@ function relativeTime(iso) {
   return `${Math.round(hours / 24)} 天前`;
 }
 
+/** 窄屏下侧边栏是覆盖层，选完会话必须收起来，否则挡住对话。 */
+function closeSidebarIfOverlay() {
+  if (window.matchMedia('(max-width: 900px)').matches) $('sidebar').classList.remove('open');
+}
+
 function renderSidebar() {
   const list = $('sessionList');
   list.innerHTML = '';
@@ -147,7 +152,10 @@ function renderSidebar() {
 
     node.addEventListener('click', (event) => {
       if (event.target.closest('[data-del], [data-menu]')) return;
-      post('session', { action: 'switch', ref: item.id }).then(() => refresh(true));
+      post('session', { action: 'switch', ref: item.id }).then(() => {
+        refresh(true);
+        closeSidebarIfOverlay();
+      });
     });
 
     node.querySelector('[data-del]').addEventListener('click', (event) => {
@@ -201,6 +209,7 @@ function openSessionMenu(item, anchor) {
     if (action === 'switch') {
       await post('session', { action: 'switch', ref: item.id });
       await refresh(true);
+      closeSidebarIfOverlay();
     } else if (action === 'rename') {
       const title = prompt('新的标题', item.title || '');
       if (title && title.trim()) {
@@ -1210,6 +1219,14 @@ function bind() {
     }
   });
 
+  // 窄屏下点空白处收起侧边栏（点侧边栏内部或开合按钮不算）
+  document.addEventListener('click', (event) => {
+    if (!window.matchMedia('(max-width: 900px)').matches) return;
+    if (!$('sidebar').classList.contains('open')) return;
+    if (event.target.closest('#sidebar, #toggleSidebar')) return;
+    $('sidebar').classList.remove('open');
+  });
+
   $('input').addEventListener('paste', (event) => {
     for (const item of event.clipboardData?.files ?? []) attach(item);
   });