@vincentbanana/bananacli 0.1.0 → 0.3.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/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

@@ -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));
@@ -118,7 +131,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}`;
@@ -169,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

@@ -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,
     };
@@ -210,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）。');
@@ -231,10 +251,26 @@ 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;
+    }
+    // 走到这里说明 provider 可用（GUI 分支已在上方返回）
     const outcome = await startRepl({
         config,
         store,
-        provider,
+        provider: provider,
         tools,
         session,
         oneShot: resolved.oneShot,

package/dist/server/ui-server.js

@@ -0,0 +1,618 @@
+import { createServer } from 'node:http';
+import { randomBytes } from 'node:crypto';
+import { mkdir, readdir, readFile, stat, 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";
+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',
+    '.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;
+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',
+]);
+/** 静态资源目录：默认是 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,
+            // 环境变量名只是"配置里写了"，不代表真的设了值，所以把可用性也算出来
+            keyReady: Boolean(item.apiKey || (item.apiKeyEnv && process.env[item.apiKeyEnv])),
+        })),
+        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/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') {
+                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/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]) {
+                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);
+    }
+    /**
+     * 执行 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 };
+        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`);
+        };
+        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()];
+            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();
+        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 = 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(() => { });
+        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),
+        });
+        finish();
+    }
+    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 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');
+}
+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.3.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"
   },
@@ -46,4 +49,4 @@
     "@types/node": "^22.20.5",
     "typescript": "^5.7.3"
   }
-}
+}