@vincentbanana/bananacli 0.1.0 → 0.2.0

package/dist/cli/repl.js

@@ -487,6 +487,7 @@ export async function startRepl(options) {
         if ((session.usage.costUsd ?? 0) > 0)
             parts.push(`累计 ${formatCost(session.usage.costUsd ?? 0)}`);
         ui.hint(parts.join(' · '));
+        ui.line(ui.divider());
         const todosAfter = JSON.stringify(session.todos ?? []);
         if (todosAfter !== todosBefore && session.todos?.length) {
             ui.line(ui.c.bold('任务清单'));
@@ -611,7 +612,7 @@ export async function startRepl(options) {
                 await handleInput(answer);
             }
             if (!exiting)
-                ui.line();
+                ui.line(ui.divider());
         }
     }
     finally {

package/dist/cli/ui.js

@@ -118,7 +118,12 @@ export function truncateDisplay(text, maxWidth, ellipsis = '…') {
     return out + ellipsis;
 }
 export function toolLine(label, detail) {
-    return `${c.magenta('⏺')} ${c.bold(label)} ${c.dim(detail)}`;
+    return `${c.dim('│')} ${c.magenta('⏺')} ${c.bold(label)} ${c.dim(detail)}`;
+}
+/** 回合之间的细分隔线，让每轮对话在视觉上分成独立区块。 */
+export function divider() {
+    const width = Math.max(24, Math.min(72, (process.stdout.columns ?? 80) - 14));
+    return c.dim('─'.repeat(width));
 }
 export function bullet(text) {
     return `${c.gray('•')} ${text}`;

package/dist/index.js

@@ -6,6 +6,7 @@ import { createProvider } from "./providers/index.js";
 import { SessionStore } from "./session/store.js";
 import { allTools } from "./tools/index.js";
 import { loadPluginTools } from "./tools/plugins.js";
+import { startUiServer, openBrowser } from "./server/ui-server.js";
 import { join } from 'node:path';
 import { startRepl } from "./cli/repl.js";
 import { runSetupWizard } from "./cli/setup.js";
@@ -32,6 +33,9 @@ ${'🍌'} BananaCLI v${ui.version} - 终端里的多 provider AI agent
       --no-tools         不给 agent 任何工具（纯对话）
       --no-reasoning     不显示推理模型的思考过程
       --setup            运行/重新运行配置向导（配置 API key、模型、权限）
+      --ui               启动图形界面（本地服务 + 浏览器），不开终端对话
+      --port <端口>      指定 GUI 端口（默认随机端口）
+      --no-open          启动 GUI 时不自动打开浏览器
   -h, --help             显示帮助
   -v, --version          显示版本
 
@@ -71,6 +75,9 @@ async function resolve(argv) {
             'no-tools': { type: 'boolean' },
             'no-reasoning': { type: 'boolean' },
             setup: { type: 'boolean' },
+            ui: { type: 'boolean' },
+            port: { type: 'string' },
+            'no-open': { type: 'boolean' },
             help: { type: 'boolean', short: 'h' },
             version: { type: 'boolean', short: 'v' },
         },
@@ -156,6 +163,9 @@ async function resolve(argv) {
         noTools: Boolean(values['no-tools']),
         yolo: Boolean(values.yolo),
         setup: Boolean(values.setup),
+        ui: Boolean(values.ui),
+        port: values.port ? Number(values.port) : undefined,
+        launchBrowser: values['no-open'] !== true,
         firstRun: !existsSync(configPath()),
         missingKey,
     };
@@ -231,6 +241,21 @@ async function main() {
             ui.hint(`已加载 ${pluginResult.tools.length} 个插件工具: ${pluginResult.tools.map((tool) => tool.name).join(', ')}`);
         }
     }
+    // GUI 模式：本地服务 + 浏览器，不进入终端对话（不需要先有可用 provider）
+    if (resolved.ui) {
+        const handle = await startUiServer({ config, store, tools, port: resolved.port });
+        ui.line();
+        ui.ok(`GUI 已启动：${handle.url}`);
+        ui.hint('只监听 127.0.0.1，URL 里的 token 是访问凭证，不要分享。按 Ctrl+C 退出。');
+        if (resolved.launchBrowser)
+            openBrowser(handle.url);
+        await new Promise((resolvePromise) => {
+            process.on('SIGINT', () => {
+                void handle.close().finally(() => resolvePromise());
+            });
+        });
+        return;
+    }
     const outcome = await startRepl({
         config,
         store,

package/dist/server/ui-server.js

@@ -0,0 +1,385 @@
+import { createServer } from 'node:http';
+import { randomBytes } from 'node:crypto';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { extname, join, resolve, dirname } from 'node:path';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { bananaHome } from "../config/config.js";
+import { runTurn } from "../agent/loop.js";
+import { compactMessages } from "../agent/context.js";
+import { createProvider } from "../providers/index.js";
+import { estimateCost, formatCost, resolvePricing } from "../providers/pricing.js";
+import { SessionStore } from "../session/store.js";
+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";
+const MIME = {
+    '.html': 'text/html; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.svg': 'image/svg+xml',
+};
+const IMAGE_TYPES = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+};
+const MAX_IMAGE_BYTES = 4 * 1024 * 1024;
+/** 静态资源目录：默认是 CLI 包自带的 ui/，GUI 包启动时可以传自己的目录进来。 */
+function defaultAssetsDir() {
+    return join(dirname(fileURLToPath(import.meta.url)), '..', 'ui');
+}
+let activeAssetsDir = null;
+function assetRoot() {
+    return activeAssetsDir ?? defaultAssetsDir();
+}
+/** 启动只监听回环地址的本地 GUI 服务；token 保护所有接口。 */
+export async function startUiServer(options) {
+    const { config, store } = options;
+    const token = randomBytes(24).toString('hex');
+    const host = options.host ?? '127.0.0.1';
+    const prefix = `/t/${token}`;
+    const assets = options.assetsDir ?? defaultAssetsDir();
+    activeAssetsDir = assets;
+    let turn = null;
+    const provider = () => createProvider(config.current, config);
+    const backups = (sessionId) => new BackupStore(join(bananaHome(), 'backups'), sessionId);
+    const info = async (session) => ({
+        version: '0.1.0',
+        provider: { name: config.current, model: config.providers[config.current]?.model ?? '', protocol: config.providers[config.current]?.protocol ?? 'openai' },
+        providers: Object.entries(config.providers).map(([name, item]) => ({
+            name,
+            model: item.model,
+            protocol: item.protocol,
+            current: name === config.current,
+            keySaved: Boolean(item.apiKey),
+            keyEnv: item.apiKeyEnv ?? null,
+        })),
+        workspace: config.workspace,
+        platform: process.platform,
+        permissions: config.permissions,
+        tools: options.tools.map((tool) => ({ name: tool.name, approval: tool.approval, permission: permissionFor(config.permissions, tool) })),
+        session: {
+            id: session.id,
+            title: session.title,
+            messages: session.messages,
+            todos: session.todos ?? [],
+            usage: session.usage ?? { inputTokens: 0, outputTokens: 0 },
+        },
+    });
+    const listSessions = async () => (await store.list()).map((item) => ({
+        id: item.id,
+        title: item.title,
+        updatedAt: item.updatedAt,
+        turns: item.turns,
+    }));
+    const server = createServer((req, res) => {
+        handle(req, res).catch((error) => {
+            if (!res.headersSent)
+                json(res, 500, { error: error instanceof Error ? error.message : String(error) });
+            else
+                res.end();
+        });
+    });
+    async function handle(req, res) {
+        const url = new URL(req.url ?? '/', `http://${host}`);
+        if (!url.pathname.startsWith(prefix))
+            return notFound(res);
+        const path = url.pathname.slice(prefix.length) || '/';
+        if (path === '/' || path === '/index.html')
+            return sendFile(res, 'index.html');
+        if (path === '/style.css')
+            return sendFile(res, 'style.css');
+        if (path === '/app.js')
+            return sendFile(res, 'app.js');
+        let session = turn?.session ?? (await store.lastActive().then(async (id) => (id ? await store.load(id) : null))) ?? store.create();
+        if (path === '/api/info' && req.method === 'GET')
+            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/session' && req.method === 'POST') {
+            const body = await readJson(req);
+            if (body.action === 'new') {
+                session = store.create(body.title?.trim() || '新对话');
+                await store.save(session);
+            }
+            else if (body.action === 'rename') {
+                session.title = body.title?.trim() || session.title;
+                await store.save(session);
+            }
+            else if (body.action === 'switch') {
+                const found = body.ref ? await store.find(body.ref) : null;
+                if (!found)
+                    return json(res, 404, { error: '没找到这个对话' });
+                session = found;
+            }
+            else if (body.action === 'delete') {
+                const found = body.ref ? await store.find(body.ref) : null;
+                if (found) {
+                    await store.remove(found.id);
+                    await backups(found.id).clear();
+                    if (found.id === session.id) {
+                        session = store.create();
+                        await store.save(session);
+                    }
+                }
+            }
+            else if (body.action === 'clear') {
+                session.messages = [];
+                session.todos = [];
+                session.usage = { inputTokens: 0, outputTokens: 0 };
+                await store.save(session);
+            }
+            if (turn)
+                turn.session = session;
+            return json(res, 200, { session: session.id, sessions: await listSessions(), info: await info(session) });
+        }
+        if (path === '/api/action' && req.method === 'POST') {
+            const body = await readJson(req);
+            if (body.action === 'provider' && body.name && config.providers[body.name]) {
+                config.current = body.name;
+                session.provider = body.name;
+            }
+            else if (body.action === 'model' && body.value) {
+                const current = config.providers[config.current];
+                if (current)
+                    current.model = body.value;
+            }
+            else if (body.action === 'permission' && body.name && body.value) {
+                config.permissions = { ...config.permissions, [body.name]: body.value };
+            }
+            else if (body.action === 'apiKey') {
+                const current = config.providers[config.current];
+                if (current) {
+                    const value = String(body.value ?? '').trim();
+                    if (value)
+                        current.apiKey = value;
+                    else
+                        delete current.apiKey;
+                }
+            }
+            else if (body.action === 'system' && body.value) {
+                config.systemPrompt = body.value;
+            }
+            else if (body.action === 'workspace' && body.value) {
+                config.workspace = resolve(body.value);
+            }
+            const { saveConfig } = await import("../config/config.js");
+            await saveConfig(config);
+            // 没配 key 也要能把设置存下去，这里不能因为构造 provider 失败而 500
+            try {
+                session.model = provider().model;
+                session.provider = config.current;
+                await store.save(session);
+            }
+            catch {
+                /* provider 暂时不可用，不影响设置已保存 */
+            }
+            return json(res, 200, { info: await info(session) });
+        }
+        if (path === '/api/undo' && req.method === 'POST') {
+            const result = await backups(session.id).undo();
+            return json(res, 200, { restored: result.restored, deleted: result.deleted, had: Boolean(result.turn) });
+        }
+        if (path === '/api/attach' && req.method === 'POST') {
+            const name = decodeURIComponent(new URL(req.url ?? '/', 'http://x').searchParams.get('name') ?? 'image.png');
+            const body = await readBody(req);
+            const buffer = Buffer.from(body, 'base64');
+            const dir = join(bananaHome(), 'attachments');
+            await mkdir(dir, { recursive: true });
+            const file = join(dir, `${Date.now().toString(36)}-${randomBytes(4).toString('hex')}${extname(name).toLowerCase()}`);
+            await writeFile(file, buffer);
+            return json(res, 200, { path: file, bytes: buffer.byteLength });
+        }
+        if (path === '/api/approve' && req.method === 'POST') {
+            const body = await readJson(req);
+            const active = turn;
+            const resolvePending = active?.pending.get(body.id);
+            if (resolvePending && active) {
+                active.pending.delete(body.id);
+                resolvePending(Boolean(body.allowed));
+            }
+            return json(res, 200, { ok: Boolean(resolvePending) });
+        }
+        if (path === '/api/abort' && req.method === 'POST') {
+            if (turn) {
+                for (const resolvePending of turn.pending.values())
+                    resolvePending(false);
+                turn.pending.clear();
+                turn.controller.abort();
+            }
+            return json(res, 200, { ok: Boolean(turn) });
+        }
+        if (path === '/api/chat' && req.method === 'POST') {
+            const body = await readJson(req);
+            if (turn)
+                return json(res, 409, { error: '当前正在跑一轮对话' });
+            return chat(body, res, session);
+        }
+        return notFound(res);
+    }
+    async function chat(body, res, session) {
+        const controller = new AbortController();
+        const active = { controller, pending: new Map(), session };
+        turn = active;
+        res.writeHead(200, {
+            'Content-Type': 'text/event-stream; charset=utf-8',
+            'Cache-Control': 'no-cache, no-transform',
+            Connection: 'keep-alive',
+            'X-Accel-Buffering': 'no',
+        });
+        const send = (type, payload = {}) => {
+            if (!res.writableEnded)
+                res.write(`data: ${JSON.stringify({ type, ...payload })}\n\n`);
+        };
+        send('start', { session: session.id });
+        res.on('close', () => {
+            if (!res.writableEnded)
+                controller.abort();
+        });
+        const dataUrls = await Promise.all((body.images ?? []).map(async (file) => {
+            const absolute = resolve(file);
+            const type = IMAGE_TYPES[extname(absolute).toLowerCase()];
+            if (!type)
+                return null;
+            const { readFile } = await import('node:fs/promises');
+            const buffer = await readFile(absolute);
+            if (buffer.byteLength > MAX_IMAGE_BYTES)
+                return null;
+            return `data:${type};base64,${buffer.toString('base64')}`;
+        }));
+        const todosBefore = JSON.stringify(session.todos ?? []);
+        session.todos ??= [];
+        const recorder = await backups(session.id).beginTurn(newTurnId(), config.workspace);
+        const approve = async (kind, summary, preview) => {
+            const id = randomBytes(6).toString('hex');
+            send('approval', { id, kind, summary, preview });
+            return new Promise((resolvePromise) => {
+                active.pending.set(id, resolvePromise);
+            });
+        };
+        const toolContext = {
+            workspace: config.workspace,
+            signal: controller.signal,
+            approve,
+            log: (message) => send('status', { message }),
+            allowOutsideWorkspace: config.allowOutsideWorkspace,
+            permissions: config.permissions,
+            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)));
+        session.messages = result.messages;
+        session.provider = config.current;
+        session.model = provider().model;
+        const pricing = resolvePricing(session.model, config.providers[config.current]?.pricing);
+        const cost = estimateCost(result.usage, pricing);
+        session.usage = {
+            inputTokens: (session.usage?.inputTokens ?? 0) + (result.usage.inputTokens ?? 0),
+            outputTokens: (session.usage?.outputTokens ?? 0) + (result.usage.outputTokens ?? 0),
+            costUsd: (session.usage?.costUsd ?? 0) + cost,
+        };
+        await store.save(session);
+        await recorder.commit().catch(() => { });
+        turn = null;
+        send('done', {
+            stopReason: result.stopReason,
+            error: result.error ?? '',
+            steps: result.steps,
+            ms: Date.now() - started,
+            usage: result.usage,
+            cost: formatCost(cost),
+            todos: JSON.stringify(session.todos ?? []) !== todosBefore ? session.todos : undefined,
+            info: await info(session),
+        });
+        res.end();
+    }
+    const port = await new Promise((resolvePromise, rejectPromise) => {
+        server.once('error', rejectPromise);
+        server.listen(options.port ?? 0, host, () => resolvePromise(server.address().port));
+    });
+    return {
+        url: `http://${host}:${port}${prefix}/`,
+        token,
+        port,
+        close: async () => {
+            // 浏览器可能留着 keep-alive 连接，先断开再关，否则 Windows 上会触发 libuv 断言
+            server.closeAllConnections?.();
+            await new Promise((resolvePromise) => server.close(() => resolvePromise()));
+        },
+    };
+}
+function json(res, status, payload) {
+    const body = JSON.stringify(payload);
+    res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Content-Length': Buffer.byteLength(body) });
+    res.end(body);
+}
+function notFound(res) {
+    res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+    res.end('not found');
+}
+async function sendFile(res, name) {
+    const { readFile } = await import('node:fs/promises');
+    try {
+        const file = await readFile(join(assetRoot(), name));
+        res.writeHead(200, {
+            'Content-Type': MIME[extname(name)] ?? 'application/octet-stream',
+            'Content-Length': file.byteLength,
+            'Cache-Control': 'no-store',
+        });
+        res.end(file);
+    }
+    catch {
+        notFound(res);
+    }
+}
+async function readBody(req) {
+    const chunks = [];
+    for await (const chunk of req)
+        chunks.push(Buffer.from(chunk));
+    return Buffer.concat(chunks).toString('utf8');
+}
+async function readJson(req) {
+    try {
+        return JSON.parse(await readBody(req));
+    }
+    catch {
+        return {};
+    }
+}
+/** 打开系统默认浏览器。 */
+export function openBrowser(url) {
+    const command = process.platform === 'darwin' ? { file: 'open', args: [url] }
+        : process.platform === 'win32' ? { file: 'cmd', args: ['/c', 'start', '""', url] }
+            : { file: 'xdg-open', args: [url] };
+    try {
+        spawn(command.file, command.args, { detached: true, stdio: 'ignore', windowsHide: true }).unref();
+    }
+    catch {
+        // 打不开就让用户手动复制链接
+    }
+}
+export const __testing = { MIME, IMAGE_TYPES, resolvePath, assetRoot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vincentbanana/bananacli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A multi-provider AI agent for your terminal: file tools, shell, web search, persistent sessions, diff preview and undo",
   "type": "module",
   "engines": {
@@ -11,10 +11,12 @@
   },
   "main": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./server": "./dist/server/ui-server.js"
   },
   "files": [
     "dist",
+    "ui",
     "README.md",
     "LICENSE"
   ],
@@ -23,7 +25,8 @@
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "dev": "node --watch src/index.ts",
-    "test": "node test/prompt.test.mjs && node test/ui.test.mjs && node test/p0.test.mjs && node test/features.test.mjs && node test/smoke.mjs",
+    "test": "node test/prompt.test.mjs && node test/ui.test.mjs && node test/p0.test.mjs && node test/features.test.mjs && node test/gui.test.mjs && node test/smoke.mjs",
+    "gui:sync": "node scripts/sync-gui.mjs",
     "prepare": "npm run build",
     "prepublishOnly": "npm run typecheck && npm test && npm run build"
   },