@vincentbanana/bananacli 0.2.0 → 0.4.0

package/README.md

@@ -31,6 +31,19 @@
 - **改前先看 diff、改后能回滚**：写文件前展示具体增删行，`/undo` 还原上一轮所有文件改动。
 - **多模态与扩展**：`/image` 附加截图，`.banana/tools/` 放脚本即可注册自定义工具，成本按 token 估算。
 
+## 图形界面
+
+同一个内核，两种界面。CLI 加 `--ui` 就能开图形界面：
+
+```bash
+banana --ui                 # 打开图形界面
+npm install -g @vincentbanana/banana-gui && banana-gui   # 或装独立的 GUI 包
+```
+
+图形界面与终端**共用同一套内核**（agent 循环、工具、权限、`commands.ts` 里的斜杠命令），行为完全一致，配置也共用 `~/.banana/config.json`。
+
+界面提供：会话管理与导出（Markdown / JSON）、`/` 命令面板、`@` 文件补全、项目文件面板、工具输出详情、三态主题、API Key 设置。
+
 ## 平台支持
 
 | 平台 | 状态 | 说明 |

package/dist/cli/ui.js

@@ -35,11 +35,24 @@ export const c = {
     magenta: paint(35, 39),
     gray: paint(90, 39),
 };
+let sink = null;
+/** 把输出转到别处（GUI 用）；返回还原函数。 */
+export function captureOutput(target) {
+    const previous = sink;
+    sink = target;
+    return () => {
+        sink = previous;
+    };
+}
 export function write(text) {
+    if (sink) {
+        sink(text);
+        return;
+    }
     process.stdout.write(text);
 }
 export function line(text = '') {
-    process.stdout.write(`${text}\n`);
+    write(`${text}\n`);
 }
 export function info(text) {
     line(c.cyan(text));
@@ -174,6 +187,10 @@ export function relativeTime(iso) {
     return `${Math.round(hours / 24)} 天前`;
 }
 export function clearScreen() {
+    if (sink) {
+        sink('\u001b[clear]\n');
+        return;
+    }
     if (process.stdout.isTTY)
         process.stdout.write('\u001b[2J\u001b[H');
 }

package/dist/index.js

@@ -220,13 +220,23 @@ async function main() {
         provider = createProvider(config.current, config);
     }
     catch (error) {
-        ui.error(error instanceof Error ? error.message : String(error));
-        if (interactive)
-            ui.hint('  运行 `banana --setup` 运行配置向导，或设置对应环境变量后重试。');
-        process.exit(1);
+        // GUI 模式下不因缺 key 而退出：界面本身可以用来填 key
+        if (resolved.ui) {
+            ui.warn(error instanceof Error ? error.message : String(error));
+            ui.hint('  图形界面会照常打开，在设置里填入 API Key 即可开始使用。');
+            provider = null;
+        }
+        else {
+            ui.error(error instanceof Error ? error.message : String(error));
+            if (interactive)
+                ui.hint('  运行 `banana --setup` 运行配置向导，或设置对应环境变量后重试。');
+            process.exit(1);
+        }
+    }
+    if (provider) {
+        session.provider = provider.name;
+        session.model = provider.model;
     }
-    session.provider = provider.name;
-    session.model = provider.model;
     const tools = resolved.noTools ? [] : [...allTools];
     if (resolved.noTools)
         ui.hint('已禁用全部工具（--no-tools）。');
@@ -256,10 +266,11 @@ async function main() {
         });
         return;
     }
+    // 走到这里说明 provider 可用（GUI 分支已在上方返回）
     const outcome = await startRepl({
         config,
         store,
-        provider,
+        provider: provider,
         tools,
         session,
         oneShot: resolved.oneShot,

package/dist/server/ui-server.js

@@ -1,6 +1,7 @@
 import { createServer } from 'node:http';
 import { randomBytes } from 'node:crypto';
-import { mkdir, writeFile } from 'node:fs/promises';
+import { mkdir, readdir, readFile, stat, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
 import { extname, join, resolve, dirname } from 'node:path';
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
@@ -14,6 +15,9 @@ import { BackupStore, newTurnId } from "../session/backups.js";
 import { allTools, permissionFor, summarizeInput } from "../tools/index.js";
 import { loadPluginTools } from "../tools/plugins.js";
 import { resolvePath } from "../tools/fs.js";
+import { commands, findCommand, suggestCommand } from "../cli/commands.js";
+import { completeCommand, completeFileReference } from "../cli/completion.js";
+import { captureOutput } from "../cli/ui.js";
 const MIME = {
     '.html': 'text/html; charset=utf-8',
     '.css': 'text/css; charset=utf-8',
@@ -28,13 +32,40 @@ const IMAGE_TYPES = {
     '.webp': 'image/webp',
 };
 const MAX_IMAGE_BYTES = 4 * 1024 * 1024;
-/** 静态资源目录：默认是 CLI 包自带的 ui/，GUI 包启动时可以传自己的目录进来。 */
-function defaultAssetsDir() {
-    return join(dirname(fileURLToPath(import.meta.url)), '..', 'ui');
+const MAX_FILE_BYTES = 400 * 1024;
+const TEXT_EXT = new Set([
+    '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.json', '.md', '.txt', '.yml', '.yaml',
+    '.toml', '.css', '.scss', '.html', '.sh', '.bash', '.zsh', '.py', '.go', '.rs', '.java',
+    '.c', '.h', '.cpp', '.hpp', '.sql', '.xml', '.ini', '.conf', '.env', '.gitignore', '.lock',
+]);
+const SKIP_DIRS = new Set([
+    'node_modules', '.git', 'dist', 'build', 'out', '.next', '.nuxt', 'coverage', '__pycache__',
+    '.venv', 'venv', 'target', '.cache', '.idea', '.gradle',
+]);
+/**
+ * 静态资源目录。同一个包在两种形态下路径不同，所以按候选顺序找第一个真实存在的：
+ * - 源码运行：src/server/ -> src/ui
+ * - 编译产物：dist/server/ -> dist/ui（构建时由 scripts/copy-ui.mjs 复制）
+ * - 兜底：包根 ui/ 或环境变量指定的目录（GUI 独立包用这个）
+ */
+export function resolveAssetsDir() {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const candidates = [
+        process.env.BANANA_UI_DIR,
+        join(here, '..', 'ui'),
+        join(here, '..', '..', 'ui'),
+        join(here, '..', '..', 'src', 'ui'),
+    ].filter((item) => Boolean(item));
+    for (const candidate of candidates) {
+        if (existsSync(join(candidate, 'index.html')))
+            return candidate;
+    }
+    // 都找不到时返回默认位置，让 404 报错能指向一个具体路径
+    return join(here, '..', 'ui');
 }
 let activeAssetsDir = null;
 function assetRoot() {
-    return activeAssetsDir ?? defaultAssetsDir();
+    return activeAssetsDir ?? resolveAssetsDir();
 }
 /** 启动只监听回环地址的本地 GUI 服务；token 保护所有接口。 */
 export async function startUiServer(options) {
@@ -42,7 +73,7 @@ export async function startUiServer(options) {
     const token = randomBytes(24).toString('hex');
     const host = options.host ?? '127.0.0.1';
     const prefix = `/t/${token}`;
-    const assets = options.assetsDir ?? defaultAssetsDir();
+    const assets = options.assetsDir ?? resolveAssetsDir();
     activeAssetsDir = assets;
     let turn = null;
     const provider = () => createProvider(config.current, config);
@@ -57,6 +88,8 @@ export async function startUiServer(options) {
             current: name === config.current,
             keySaved: Boolean(item.apiKey),
             keyEnv: item.apiKeyEnv ?? null,
+            // 环境变量名只是"配置里写了"，不代表真的设了值，所以把可用性也算出来
+            keyReady: Boolean(item.apiKey || (item.apiKeyEnv && process.env[item.apiKeyEnv])),
         })),
         workspace: config.workspace,
         platform: process.platform,
@@ -100,6 +133,36 @@ export async function startUiServer(options) {
             return json(res, 200, await info(session));
         if (path === '/api/sessions' && req.method === 'GET')
             return json(res, 200, { sessions: await listSessions(), current: session.id });
+        if (path === '/api/files' && req.method === 'GET') {
+            const target = url.searchParams.get('path') ?? '.';
+            try {
+                return json(res, 200, { entries: await listTree(config, target) });
+            }
+            catch (error) {
+                return json(res, 400, { error: error instanceof Error ? error.message : String(error) });
+            }
+        }
+        if (path === '/api/file' && req.method === 'GET') {
+            const requested = url.searchParams.get('path') ?? '';
+            try {
+                const context = sandboxContext(config);
+                const absolute = resolvePath(requested, context);
+                const info = await stat(absolute);
+                if (!info.isFile())
+                    return json(res, 400, { error: '不是文件' });
+                if (info.size > MAX_FILE_BYTES)
+                    return json(res, 200, { path: requested, tooLarge: true, bytes: info.size });
+                const ext = extname(absolute).toLowerCase();
+                if (!TEXT_EXT.has(ext) && ext !== '') {
+                    return json(res, 200, { path: requested, binary: true, bytes: info.size });
+                }
+                const content = await readFile(absolute, 'utf8');
+                return json(res, 200, { path: requested, content, bytes: info.size, truncated: info.size >= MAX_FILE_BYTES });
+            }
+            catch (error) {
+                return json(res, 400, { error: error instanceof Error ? error.message : String(error) });
+            }
+        }
         if (path === '/api/session' && req.method === 'POST') {
             const body = await readJson(req);
             if (body.action === 'new') {
@@ -137,6 +200,31 @@ export async function startUiServer(options) {
                 turn.session = session;
             return json(res, 200, { session: session.id, sessions: await listSessions(), info: await info(session) });
         }
+        if (path === '/api/complete' && req.method === 'GET') {
+            const line = url.searchParams.get('line') ?? '';
+            // 与 CLI 共用同一份补全实现
+            const files = completeFileReference(line, config.workspace, { limit: 12 });
+            if (files)
+                return json(res, 200, { kind: 'file', replace: files[1], candidates: files[0] });
+            const commandHits = completeCommand(line, commands.map((command) => command.name));
+            if (commandHits)
+                return json(res, 200, { kind: 'command', replace: commandHits[1], candidates: commandHits[0] });
+            return json(res, 200, { kind: 'none', replace: '', candidates: [] });
+        }
+        if (path === '/api/command' && req.method === 'POST') {
+            const body = await readJson(req);
+            return runCliCommand(body.input ?? '', res, session);
+        }
+        if (path === '/api/commands' && req.method === 'GET') {
+            return json(res, 200, {
+                commands: commands.map((command) => ({
+                    name: command.name,
+                    aliases: command.aliases ?? [],
+                    usage: command.usage,
+                    summary: command.summary,
+                })),
+            });
+        }
         if (path === '/api/action' && req.method === 'POST') {
             const body = await readJson(req);
             if (body.action === 'provider' && body.name && config.providers[body.name]) {
@@ -221,6 +309,98 @@ export async function startUiServer(options) {
         }
         return notFound(res);
     }
+    /**
+     * 执行 CLI 命令：命令表只有一份（cli/commands.ts），GUI 只是换了个输出通道。
+     * 输出逐行推给前端，行为和终端里一致。
+     */
+    async function runCliCommand(input, res, session) {
+        const trimmed = input.trim();
+        const [token = '', ...rest] = trimmed.replace(/^\//, '').split(/\s+/);
+        const command = findCommand(token);
+        if (!command) {
+            const suggestion = suggestCommand(token);
+            json(res, 200, {
+                ok: false,
+                output: suggestion
+                    ? `未知命令 /${token}，你是不是想用 /${suggestion}？`
+                    : `未知命令 /${token}。输入 /help 看可用命令。`,
+                info: await info(session),
+            });
+            return;
+        }
+        const chunks = [];
+        const restore = captureOutput((text) => chunks.push(text));
+        let next = session;
+        let failure = '';
+        // provider 惰性创建：像 /help、/cwd 这类命令不需要 key 也能跑
+        let lazyProvider = null;
+        const needProvider = () => {
+            if (!lazyProvider) {
+                try {
+                    lazyProvider = provider();
+                }
+                catch (error) {
+                    throw new Error(`${error instanceof Error ? error.message : String(error)}\n请先在设置里填入 API Key。`);
+                }
+            }
+            return lazyProvider;
+        };
+        try {
+            await command.run(rest.join(' '), {
+                config,
+                store,
+                session,
+                get provider() {
+                    return needProvider();
+                },
+                tools: options.tools,
+                ask: async (question) => {
+                    throw new Error(`${question}（这个命令需要交互输入，请用界面上的对应功能）`);
+                },
+                confirm: async () => false,
+                setSession: (value) => {
+                    next = value;
+                },
+                setSessionAndSave: async (value) => {
+                    next = value;
+                    await store.save(value);
+                },
+                setProvider: () => { },
+                setConfig: (value) => Object.assign(config, value),
+                setTools: () => { },
+                saveSession: async () => {
+                    await store.save(next);
+                },
+                reloadProvider: () => { },
+                compactNow: async () => { },
+                runSetup: async () => {
+                    throw new Error('配置向导请在终端运行 banana --setup');
+                },
+                undo: async () => backups(next.id).undo(),
+                clearBackups: async (sessionId) => {
+                    await backups(sessionId).clear();
+                },
+                attachImage: async () => ({ ok: false, message: '请直接在界面里粘贴图片' }),
+                listImages: () => [],
+                clearImages: () => { },
+                clearScreen: () => { },
+                exit: () => { },
+            });
+        }
+        catch (error) {
+            failure = error instanceof Error ? error.message : String(error);
+        }
+        finally {
+            restore();
+        }
+        return json(res, 200, {
+            ok: !failure,
+            output: chunks.join(''),
+            error: failure,
+            info: await info(next),
+            sessions: await listSessions(),
+        });
+    }
     async function chat(body, res, session) {
         const controller = new AbortController();
         const active = { controller, pending: new Map(), session };
@@ -235,11 +415,28 @@ export async function startUiServer(options) {
             if (!res.writableEnded)
                 res.write(`data: ${JSON.stringify({ type, ...payload })}\n\n`);
         };
+        const finish = () => {
+            turn = null;
+            if (!res.writableEnded)
+                res.end();
+        };
         send('start', { session: session.id });
         res.on('close', () => {
             if (!res.writableEnded)
                 controller.abort();
         });
+        // 没配 key 之类的问题要在流里说清楚，否则前端会一直转圈
+        const current = config.providers[config.current];
+        const hasKey = Boolean(current?.apiKey || (current?.apiKeyEnv && process.env[current.apiKeyEnv]));
+        if (!hasKey) {
+            send('error', {
+                message: `还没有配置 ${config.current} 的 API key。点右上角的模型按钮，在设置里填入 API Key 就能开始对话。`,
+                hint: '也可以在终端运行 banana --setup 走一遍配置向导。',
+                code: 'no_api_key',
+            });
+            finish();
+            return;
+        }
         const dataUrls = await Promise.all((body.images ?? []).map(async (file) => {
             const absolute = resolve(file);
             const type = IMAGE_TYPES[extname(absolute).toLowerCase()];
@@ -271,30 +468,49 @@ export async function startUiServer(options) {
             todos: session.todos,
         };
         const started = Date.now();
-        const result = await runTurn({
-            provider: provider(),
-            tools: options.tools,
-            permissions: config.permissions,
-            system: config.systemPrompt,
-            maxSteps: config.maxSteps,
-            maxContextChars: config.maxContextChars,
-            toolsWorkspace: config.workspace,
-            allowOutsideWorkspace: config.allowOutsideWorkspace,
-            signal: controller.signal,
-            todos: session.todos,
-            recordChange: (path, beforeContent) => recorder.record(path, beforeContent),
-            onText: (chunk) => send('text', { chunk }),
-            onReasoning: (chunk) => send('reasoning', { chunk }),
-            onToolStart: (name, input) => send('tool_start', { name, detail: summarizeInput(input) }),
-            onToolEnd: (name, toolResult) => send('tool_end', { name, ok: toolResult.ok, display: toolResult.display ?? '', error: toolResult.ok ? '' : toolResult.content.slice(0, 400) }),
-            onNotice: (message) => send('status', { message }),
-            onCompact: () => send('status', { message: '已压缩历史对话' }),
-            onRetry: (info) => send('status', { message: `网络重试 ${info.attempt}：${info.reason}` }),
-            approve,
-        }, session.messages, body.message, dataUrls.filter((item) => Boolean(item)));
+        let result;
+        try {
+            result = await runTurn({
+                provider: provider(),
+                tools: options.tools,
+                permissions: config.permissions,
+                system: config.systemPrompt,
+                maxSteps: config.maxSteps,
+                maxContextChars: config.maxContextChars,
+                toolsWorkspace: config.workspace,
+                allowOutsideWorkspace: config.allowOutsideWorkspace,
+                signal: controller.signal,
+                todos: session.todos,
+                recordChange: (path, beforeContent) => recorder.record(path, beforeContent),
+                onText: (chunk) => send('text', { chunk }),
+                onReasoning: (chunk) => send('reasoning', { chunk }),
+                onToolStart: (name, input) => send('tool_start', { name, detail: summarizeInput(input) }),
+                onToolEnd: (name, toolResult) => send('tool_end', {
+                    name,
+                    ok: toolResult.ok,
+                    display: toolResult.display ?? '',
+                    error: toolResult.ok ? '' : toolResult.content.slice(0, 400),
+                    // 详情面板用：命令输出 / 搜索结果等，最多 8KB
+                    detail: toolResult.content.slice(0, 8000),
+                }),
+                onNotice: (message) => send('status', { message }),
+                onCompact: () => send('status', { message: '已压缩历史对话' }),
+                onRetry: (info) => send('status', { message: `网络重试 ${info.attempt}：${info.reason}` }),
+                approve,
+            }, session.messages, body.message, dataUrls.filter((item) => Boolean(item)));
+        }
+        catch (error) {
+            // 任何异常都要以 error 事件收尾，否则前端会一直等下去
+            send('error', {
+                message: error instanceof Error ? error.message : String(error),
+                code: 'turn_failed',
+            });
+            finish();
+            return;
+        }
         session.messages = result.messages;
         session.provider = config.current;
-        session.model = provider().model;
+        session.model = session.model || provider().model;
         const pricing = resolvePricing(session.model, config.providers[config.current]?.pricing);
         const cost = estimateCost(result.usage, pricing);
         session.usage = {
@@ -304,7 +520,6 @@ export async function startUiServer(options) {
         };
         await store.save(session);
         await recorder.commit().catch(() => { });
-        turn = null;
         send('done', {
             stopReason: result.stopReason,
             error: result.error ?? '',
@@ -315,7 +530,7 @@ export async function startUiServer(options) {
             todos: JSON.stringify(session.todos ?? []) !== todosBefore ? session.todos : undefined,
             info: await info(session),
         });
-        res.end();
+        finish();
     }
     const port = await new Promise((resolvePromise, rejectPromise) => {
         server.once('error', rejectPromise);
@@ -337,6 +552,42 @@ function json(res, status, payload) {
     res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Content-Length': Buffer.byteLength(body) });
     res.end(body);
 }
+function sandboxContext(config) {
+    return {
+        workspace: config.workspace,
+        signal: new AbortController().signal,
+        approve: async () => false,
+        log: () => { },
+        allowOutsideWorkspace: false,
+        permissions: config.permissions,
+        todos: [],
+    };
+}
+/** 目录树：只返回一层子项，按需展开，避免大仓库一次拉全量。 */
+async function listTree(config, requested) {
+    const { readdir, stat: statFile } = await import('node:fs/promises');
+    const root = resolvePath(requested || '.', sandboxContext(config));
+    const info = await statFile(root);
+    if (!info.isDirectory())
+        throw new Error(`${root} 不是目录`);
+    const items = await readdir(root, { withFileTypes: true });
+    const entries = [];
+    for (const item of items) {
+        if (item.name.startsWith('.'))
+            continue;
+        if (item.isDirectory() && SKIP_DIRS.has(item.name))
+            continue;
+        const rel = join(requested === '.' ? '' : requested, item.name).split('\\').join('/');
+        if (item.isDirectory()) {
+            entries.push({ name: item.name, path: rel, type: 'dir' });
+        }
+        else if (item.isFile()) {
+            entries.push({ name: item.name, path: rel, type: 'file' });
+        }
+    }
+    entries.sort((a, b) => (a.type === b.type ? a.name.localeCompare(b.name) : a.type === 'dir' ? -1 : 1));
+    return entries.slice(0, 500);
+}
 function notFound(res) {
     res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
     res.end('not found');