@vincentbanana/banana-gui 0.1.1 → 0.3.0

package/README.md

@@ -6,9 +6,18 @@ 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` 会提示你用浏览器版。
+
 首次启动会进配置向导（选 provider、贴 API key、选权限、测连接），配置与 CLI 共用 `~/.banana/config.json`。
 
 ## 用法
@@ -22,13 +31,48 @@ banana-gui --provider deepseek --model deepseek-chat
 
 ## 特性
 
-- 左侧会话列表：新建 / 切换 / 删除，切换即续上下文
-- 流式回复、工具调用实时状态（自绘图标：文件、终端、搜索、编辑…）
-- 危险操作弹出确认框，附变更预览（写文件前给 diff）
+- **和 CLI 同一套内核**：agent 循环、工具、权限、斜杠命令全部来自 `@vincentbanana/bananacli`，两边行为完全一致
+- 左侧会话列表：新建 / 切换 / 重命名 / 导出（Markdown、JSON）/ 删除
+- 输入 `/` 调出命令面板（`/help` 看全部），输入 `@` 补全项目文件
+- 流式回复、工具调用实时状态，点工具行可展开完整输出
+- 危险操作弹窗确认，写文件前给 diff
 - 一键撤销上一轮文件改动
+- 右侧项目文件面板：浏览目录、预览文件、一键插入引用
 - 粘贴或拖拽图片，随消息一起发送
-- 模型、权限、工作区、系统提示词在设置面板里改，改完立刻生效
-- 深浅色跟随系统，纯黑白，无渐变无彩色
+- 模型、权限、API Key、工作区、系统提示词在设置里改，改完立刻生效
+- 权限设置写清了每种模式的含义和风险，新手也不会懵
+- 三态主题：跟随系统 / 浅色 / 深色，纯黑白无渐变
+- 没配 API Key 也能打开界面，照着引导填完即可用
+
+## 两种方式对比
+
+| | 启动命令 | 需要什么 | 说明 |
+| --- | --- | --- | --- |
+| 浏览器版 | `banana-gui` | 任何装了 Node 20+ 的系统 | 启动后自动打开浏览器，几十 MB |
+| 桌面版 | `banana-gui --desktop` | 同一个 npm 包 | 独立窗口，约 200MB（内含 electron） |
+
+两者用的是同一套 agent 内核和同一份界面资源，功能完全一致，只是外壳不同。
+
+## 打包成安装包（可选）
+
+想出 `.exe` / `.dmg` / `AppImage` 的话，在源码仓库里构建：
+
+```bash
+git clone <这个仓库>
+cd banana-gui
+npm install          # 装 electron-builder
+npm run dist:win     # 也支持 dist:mac / dist:linux
+```
+
+产物在 `gui/release/`。
+
+## 配置
+
+首次启动会提示配置向导。GUI 与 CLI 共用 `~/.banana/config.json`：
+
+- 也可以直接在界面的设置面板里填 API Key、切换模型和权限
+- 环境变量优先级更高，例如 `DEEPSEEK_API_KEY`
+- API Key 只写在你自己的机器上，不会进代码仓库
 
 ## 安全
 

package/bin/banana-gui-desktop.mjs

@@ -0,0 +1,71 @@
+#!/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' });
+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,8 +4,11 @@
 // 启动：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');
 
 function resolveCli() {
   // 依赖可能被 npm 提升到上层 node_modules，用 require 解析更稳；
@@ -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);
+      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('  --version        显示版本');
   console.log('  --help           显示帮助');
+  console.log('');
+  console.log('提示：默认用浏览器打开。想要独立窗口就加 --desktop，');
+  console.log('      或直接运行 banana-gui-desktop。');
   process.exit(0);
 }
 
@@ -43,7 +66,42 @@ if (!entry) {
   process.exit(1);
 }
 
-const cliArgs = ['--ui'];
+// --desktop：交给 electron 开独立窗口，本进程不参与
+if (args.includes('--desktop')) {
+  const binary = electronBinary();
+  if (!binary) {
+    console.error('没装 electron，用不了独立窗口。补装一次即可：npm install -g electron');
+    console.error('（不装也没关系，直接运行 banana-gui 用浏览器版，功能完全一样）');
+    process.exit(1);
+  }
+  const rest = args.filter((arg) => arg !== '--desktop');
+  const desktop = spawn(binary, [join(dirname(fileURLToPath(import.meta.url)), '..', 'desktop', 'main.cjs'), ...rest], {
+    stdio: 'inherit',
+  });
+  desktop.on('exit', (code) => process.exit(code ?? 0));
+  for (const signal of ['SIGINT', 'SIGTERM']) process.on(signal, () => desktop.kill(signal));
+} else {
+  startBrowser(entry);
+}
+
+function startBrowser(entry) {
+  const cliArgs = ['--ui'];
+  let forwarding = false;
+  for (const arg of args) {
+    if (arg === '--open') {
+      forwarding = false;
+      continue;
+    }
+    forwarding = passthrough.includes(arg) || forwarding;
+    cliArgs.push(arg);
+  }
+
+  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));
+  }
+}
 let forwarding = false;
 for (const arg of args) {
   if (arg === '--open') {

package/desktop/main.cjs

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

package/package.json

@@ -1,34 +1,78 @@
 {
   "name": "@vincentbanana/banana-gui",
-  "version": "0.1.1",
+  "version": "0.3.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",
     "ui",
+    "desktop",
     "README.md"
   ],
-  "scripts": {
-    "sync": "node ../scripts/sync-gui.mjs",
-    "test": "node test/gui-package.test.mjs"
-  },
-  "dependencies": {
-    "@vincentbanana/bananacli": "^0.2.0"
-  },
   "keywords": [
     "ai",
     "agent",
     "gui",
     "web-ui",
     "llm",
-    "terminal"
+    "terminal",
+    "desktop",
+    "electron"
   ],
+  "scripts": {
+    "sync": "node ../scripts/sync-gui.mjs",
+    "test": "node test/gui-package.test.mjs",
+    "desktop": "electron desktop/main.cjs",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder",
+    "dist:win": "electron-builder --win",
+    "dist:mac": "electron-builder --mac",
+    "dist:linux": "electron-builder --linux"
+  },
+  "build": {
+    "appId": "dev.banana.gui",
+    "productName": "Banana",
+    "files": [
+      "desktop/**/*",
+      "ui/**/*",
+      "bin/**/*",
+      "package.json"
+    ],
+    "npmRebuild": false,
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        "dmg"
+      ]
+    },
+    "win": {
+      "target": [
+        "nsis"
+      ]
+    },
+    "linux": {
+      "target": [
+        "AppImage"
+      ],
+      "category": "Development"
+    }
+  },
+  "optionalDependencies": {
+    "electron": "^33.0.0"
+  },
+  "devDependencies": {
+    "electron-builder": "^25.0.0"
+  },
+  "dependencies": {
+    "@vincentbanana/bananacli": "^0.3.0"
+  },
   "license": "MIT",
   "publishConfig": {
     "access": "public"