@preprocess-cn/nano-code-web 0.1.2

package/dist/server.js

@@ -0,0 +1,331 @@
+import * as http from 'node:http';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import * as crypto from 'node:crypto';
+export class NanoCodeWebServer {
+    server;
+    clients = [];
+    fileDir;
+    port;
+    host;
+    htmlContent = null;
+    inputCb = null;
+    cancelCb = null;
+    confirmCb = null;
+    questionAnswerCb = null;
+    modeToggleCb = null;
+    connectCb = null;
+    /** 实际监听端口（start 后设置） */
+    portUsed = 0;
+    constructor(opts) {
+        this.port = opts?.port ?? 3030;
+        this.host = opts?.host ?? '0.0.0.0';
+        this.fileDir = opts?.fileDir ?? path.join(os.tmpdir(), 'nano-code-web-files');
+        this.server = this.createServer();
+    }
+    onInput(cb) { this.inputCb = cb; }
+    onCancel(cb) { this.cancelCb = cb; }
+    onConfirm(cb) { this.confirmCb = cb; }
+    onQuestionAnswer(cb) { this.questionAnswerCb = cb; }
+    onModeToggle(cb) { this.modeToggleCb = cb; }
+    /** 新 SSE 客户端连入时回调，可发送初始状态 */
+    onConnect(cb) { this.connectCb = cb; }
+    async start() {
+        await fs.promises.mkdir(this.fileDir, { recursive: true });
+        return new Promise((resolve, reject) => {
+            this.server.listen(this.port, this.host, () => {
+                const addr = this.server.address();
+                this.portUsed = addr && typeof addr === 'object' ? addr.port : this.port;
+                resolve(this.portUsed);
+            });
+            this.server.on('error', reject);
+        });
+    }
+    async stop() {
+        for (const c of this.clients)
+            c.res.end();
+        this.clients = [];
+        this.server.closeAllConnections?.();
+        this.server.close();
+        await fs.promises.rm(this.fileDir, { recursive: true, force: true }).catch(() => { });
+    }
+    hasClients() {
+        return this.clients.length > 0;
+    }
+    /** 向所有 SSE 客户端广播事件 */
+    broadcast(type, data) {
+        const msg = `event: ${type}\ndata: ${JSON.stringify(data)}\n\n`;
+        // 倒序遍历，方便在写失败时移除失效客户端
+        for (let i = this.clients.length - 1; i >= 0; i--) {
+            try {
+                this.clients[i].res.write(msg);
+            }
+            catch {
+                this.clients.splice(i, 1);
+            }
+        }
+    }
+    /** 写入大内容到临时文件，返回 URL */
+    async writeContent(content, ext = '.txt') {
+        const uuid = crypto.randomUUID();
+        const filePath = path.join(this.fileDir, `${uuid}${ext}`);
+        await fs.promises.writeFile(filePath, content, 'utf-8');
+        setTimeout(() => fs.promises.unlink(filePath).catch(() => { }), 10 * 60 * 1000);
+        return { uuid, url: `/web-files/${uuid}${ext}` };
+    }
+    // ── HTTP 路由 ──
+    createServer() {
+        return http.createServer((req, res) => {
+            try {
+                // 目录遍历防护：必须在 URL 解析之前检查原始路径
+                if (req.url?.includes('..')) {
+                    res.writeHead(403);
+                    res.end('Forbidden');
+                    return;
+                }
+                const sUrl = new URL(req.url ?? '/', `http://${req.headers.host ?? 'localhost'}`);
+                if (req.method === 'GET' && sUrl.pathname === '/events')
+                    return this.handleSSE(req, res);
+                if (req.method === 'POST' && sUrl.pathname === '/input')
+                    return this.handleInput(req, res);
+                if (req.method === 'POST' && sUrl.pathname === '/cancel')
+                    return this.handleCancel(req, res);
+                if (req.method === 'POST' && sUrl.pathname === '/confirm')
+                    return this.handleConfirm(req, res);
+                if (req.method === 'POST' && sUrl.pathname === '/question-answer')
+                    return this.handleQuestionAnswer(req, res);
+                if (req.method === 'POST' && sUrl.pathname === '/mode-toggle')
+                    return this.handleModeToggle(req, res);
+                if (req.method === 'GET' && sUrl.pathname === '/health')
+                    return this.handleHealth(res);
+                if (req.method === 'GET' && sUrl.pathname.startsWith('/web-files/'))
+                    return this.handleFile(req, res, sUrl.pathname);
+                if (req.method === 'GET' && sUrl.pathname.startsWith('/vendor/'))
+                    return this.handleVendor(res, sUrl.pathname);
+                // 通用静态文件: 在 public/ 或 dist/ 下查找，存在即返回，否则走 index.html
+                if (req.method === 'GET') {
+                    const found = this.resolvePublicFile(sUrl.pathname);
+                    if (found)
+                        return this.serveStaticFile(res, sUrl.pathname, found);
+                }
+                return this.handleIndex(res);
+            }
+            catch {
+                res.writeHead(500);
+                res.end('Internal Server Error');
+            }
+        });
+    }
+    handleSSE(_req, res) {
+        res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive',
+            'Access-Control-Allow-Origin': '*',
+        });
+        res.flushHeaders();
+        const client = { id: crypto.randomUUID(), res };
+        // 新客户端连入时，发送当前状态（用于浏览器晚于 server 启动的场景）
+        this.connectCb?.(client);
+        // 初始化完成后才加入广播列表，避免初始化期间收到 broadcast 写入
+        this.clients.push(client);
+        const keepAlive = setInterval(() => { res.write(':keepalive\n\n'); }, 15000);
+        const onClose = () => {
+            clearInterval(keepAlive);
+            this.clients = this.clients.filter(c => c.id !== client.id);
+        };
+        res.on('close', onClose);
+    }
+    handleInput(req, res) {
+        let body = '';
+        req.on('data', (chunk) => { body += chunk; });
+        req.on('end', () => {
+            try {
+                const parsed = JSON.parse(body);
+                const text = typeof parsed?.text === 'string' ? parsed.text : '';
+                if (text && this.inputCb)
+                    this.inputCb(text);
+            }
+            catch {
+                // 非 JSON 格式，直接作为文本
+                if (body.trim() && this.inputCb)
+                    this.inputCb(body.trim());
+            }
+            res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+            res.end(JSON.stringify({ ok: true }));
+        });
+    }
+    handleCancel(_req, res) {
+        if (this.cancelCb)
+            this.cancelCb();
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ ok: true }));
+    }
+    handleConfirm(req, res) {
+        let body = '';
+        req.on('data', (chunk) => { body += chunk; });
+        req.on('end', () => {
+            try {
+                const parsed = JSON.parse(body);
+                if (typeof parsed?.id === 'string' && typeof parsed?.approved === 'boolean' && this.confirmCb) {
+                    this.confirmCb(parsed.id, parsed.approved);
+                }
+            }
+            catch { /* ignore parse errors */ }
+            res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+            res.end(JSON.stringify({ ok: true }));
+        });
+    }
+    handleQuestionAnswer(req, res) {
+        let body = '';
+        req.on('data', (chunk) => { body += chunk; });
+        req.on('end', () => {
+            try {
+                const parsed = JSON.parse(body);
+                if (typeof parsed?.id === 'string' && typeof parsed?.answers === 'object' && this.questionAnswerCb) {
+                    this.questionAnswerCb(parsed.id, parsed.answers);
+                }
+            }
+            catch { /* ignore parse errors */ }
+            res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+            res.end(JSON.stringify({ ok: true }));
+        });
+    }
+    handleModeToggle(_req, res) {
+        if (this.modeToggleCb)
+            this.modeToggleCb();
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ ok: true }));
+    }
+    handleHealth(res) {
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ status: 'ok', clients: this.clients.length }));
+    }
+    handleFile(_req, res, pathname) {
+        const fileName = pathname.slice('/web-files/'.length);
+        // 目录遍历防护
+        if (fileName.includes('..') || fileName.includes('/')) {
+            res.writeHead(403);
+            res.end('Forbidden');
+            return;
+        }
+        const filePath = path.join(this.fileDir, fileName);
+        if (!filePath.startsWith(this.fileDir)) {
+            res.writeHead(403);
+            res.end('Forbidden');
+            return;
+        }
+        let stream;
+        try {
+            fs.statSync(filePath);
+            stream = fs.createReadStream(filePath);
+        }
+        catch {
+            res.writeHead(404);
+            res.end('Not Found');
+            return;
+        }
+        res.writeHead(200, {
+            'Content-Type': 'text/plain; charset=utf-8',
+            'Access-Control-Allow-Origin': '*',
+            'Cache-Control': 'public, max-age=300',
+        });
+        stream.pipe(res);
+    }
+    handleVendor(res, pathname) {
+        const fileName = pathname.slice('/vendor/'.length);
+        if (fileName.includes('..') || fileName.includes('/')) {
+            res.writeHead(403);
+            res.end('Forbidden');
+            return;
+        }
+        const scriptDir = new URL('.', import.meta.url).pathname;
+        const candidates = [
+            path.join(scriptDir, 'vendor', fileName),
+            path.join(scriptDir, '..', 'dist', 'vendor', fileName),
+        ];
+        let content = null;
+        for (const p of candidates) {
+            try {
+                content = fs.readFileSync(p);
+                break;
+            }
+            catch { /* try next */ }
+        }
+        if (!content) {
+            res.writeHead(404);
+            res.end('Not Found');
+            return;
+        }
+        const ext = path.extname(fileName);
+        const mime = { '.js': 'application/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8' };
+        res.writeHead(200, {
+            'Content-Type': mime[ext] || 'application/octet-stream',
+            'Access-Control-Allow-Origin': '*',
+            'Cache-Control': 'public, max-age=3600',
+        });
+        res.end(content);
+    }
+    resolvePublicFile(pathname) {
+        const fileName = pathname.replace(/^\//, '');
+        if (!fileName)
+            return null;
+        const scriptDir = new URL('.', import.meta.url).pathname;
+        const candidates = [
+            path.join(scriptDir, fileName),
+            path.join(scriptDir, '..', 'public', fileName),
+            path.join(scriptDir, '..', '..', 'public', fileName),
+        ];
+        for (const p of candidates) {
+            try {
+                if (fs.statSync(p).isFile())
+                    return p;
+            }
+            catch { /* try next */ }
+        }
+        return null;
+    }
+    serveStaticFile(res, pathname, filePath) {
+        const ext = path.extname(pathname);
+        const mime = {
+            '.js': 'application/javascript; charset=utf-8',
+            '.css': 'text/css; charset=utf-8',
+            '.html': 'text/html; charset=utf-8',
+            '.png': 'image/png',
+            '.svg': 'image/svg+xml',
+            '.ico': 'image/x-icon',
+            '.woff2': 'font/woff2',
+            '.json': 'application/json',
+        };
+        res.writeHead(200, {
+            'Content-Type': mime[ext] || 'application/octet-stream',
+            'Access-Control-Allow-Origin': '*',
+            'Cache-Control': 'public, max-age=3600',
+        });
+        fs.createReadStream(filePath).pipe(res);
+    }
+    handleIndex(res) {
+        if (!this.htmlContent) {
+            const scriptDir = new URL('.', import.meta.url).pathname;
+            // 尝试多个路径: 同目录 (dist/) → ../public/ (tsx 开发模式)
+            const candidates = [
+                path.join(scriptDir, 'index.html'),
+                path.join(scriptDir, '..', 'public', 'index.html'),
+                path.join(scriptDir, '..', '..', 'public', 'index.html'),
+            ];
+            for (const p of candidates) {
+                try {
+                    this.htmlContent = fs.readFileSync(p, 'utf-8');
+                    break;
+                }
+                catch { /* try next */ }
+            }
+            if (!this.htmlContent) {
+                this.htmlContent = '<!DOCTYPE html><html lang="zh"><meta charset="utf-8"><title>nano-code-web</title><body><h1>nano-code-web</h1><p>index.html 未找到</p></body></html>';
+            }
+        }
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(this.htmlContent);
+    }
+}

package/dist/style.css

@@ -0,0 +1,182 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #1a1b1e; --surface: #25262b; --border: #373a40;
+  --text: #c1c2c5; --text-dim: #909296; --text-muted: #5c5f66;
+  --accent: #4c9aff; --accent-bg: rgba(76,154,255,0.08);
+  --success: #51cf66; --error: #ff6b6b; --warning: #fcc419;
+}
+body { font: 14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; }
+
+/* ── Header ── */
+header { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+header h1 { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.dot.connected { background: var(--success); }
+.dot.connecting { background: var(--warning); animation: pulse 1s infinite; }
+.dot.disconnected { background: var(--error); }
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+#status-text { color: var(--text-dim); font-size: 12px; flex: 1; }
+#cancel-btn { padding: 4px 14px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-dim); cursor: pointer; display: none; }
+#cancel-btn:hover { background: rgba(255,107,107,0.1); border-color: var(--error); color: var(--error); }
+
+/* ── Mode indicator ── */
+#mode-indicator { display: none; font-size: 12px; font-weight: 600; margin-left: auto; margin-right: 8px; cursor: pointer; user-select: none; padding: 2px 8px; border-radius: 4px; }
+#mode-indicator.show { display: inline; }
+#mode-indicator.plan { color: #fbbf24; }
+#mode-indicator.plan:hover { background: rgba(251,191,36,0.12); }
+
+/* ── Welcome placeholder ── */
+#welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; color: var(--text-muted); user-select: none; }
+#welcome.hidden { display: none; }
+#welcome .logo { font-size: 32px; font-weight: 700; color: var(--text); letter-spacing: -1px; opacity: 0.15; }
+#welcome .hint { font-size: 13px; text-align: center; line-height: 1.8; }
+
+/* ── Messages ── */
+#messages { flex: 1; overflow-y: auto; padding: 20px; display: none; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
+#messages.show { display: flex; }
+.msg { max-width: 88%; padding: 10px 14px; border-radius: 8px; line-height: 1.65; word-break: break-word; }
+.msg.user { align-self: flex-end; background: var(--accent-bg); border: 1px solid rgba(76,154,255,0.15); white-space: pre-wrap; }
+.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; }
+.msg.system { align-self: center; color: var(--text-dim); font-size: 13px; background: transparent; border: none; padding: 6px; text-align: center; }
+.msg.error { align-self: flex-start; background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.2); color: var(--error); }
+
+/* ── Tool call cards ── */
+.tool-card { align-self: flex-start; width: 100%; max-width: 640px; border-radius: 8px; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); overflow: hidden; flex-shrink: 0; }
+.tool-card.success { border-left-color: var(--success); }
+.tool-card.error { border-left-color: var(--error); }
+.tool-card.rejected { border-left-color: var(--warning); }
+.tool-card-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); }
+.tool-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
+.tool-card.success .tool-spinner { border-color: var(--success); animation: none; }
+.tool-card.success .tool-spinner::after { content: "✓"; display: block; font-size: 11px; line-height: 13px; text-align: center; color: var(--success); }
+.tool-card.error .tool-spinner { border-color: var(--error); animation: none; }
+.tool-card.error .tool-spinner::after { content: "✕"; display: block; font-size: 11px; line-height: 13px; text-align: center; color: var(--error); }
+.tool-card.rejected .tool-spinner { border-color: var(--warning); animation: none; }
+.tool-card.rejected .tool-spinner::after { content: "!"; display: block; font-size: 12px; line-height: 14px; text-align: center; color: var(--warning); font-weight: 700; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.tool-card-header { cursor: pointer; user-select: none; }
+.tool-name { font-weight: 600; flex: 1; }
+.tool-args-preview { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
+.tool-status { font-size: 12px; color: var(--text-dim); }
+.tool-arrow { font-size: 10px; color: var(--text-muted); margin-left: auto; }
+.tool-detail { display: none; }
+.tool-detail.open { display: block; }
+.tool-section { border-top: 1px solid var(--border); }
+.tool-section-label { padding: 4px 12px 2px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: rgba(255,255,255,0.02); }
+.tool-section-content { padding: 6px 12px 8px; margin: 0; font-size: 12px; font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); background: transparent; border: none; }
+
+/* ── 授权确认卡片 ── */
+.confirm-card { align-self: flex-start; width: 100%; max-width: 640px; border-radius: 8px; border: 1px solid var(--warning); border-left: 3px solid var(--warning); background: var(--surface); overflow: hidden; flex-shrink: 0; }
+.confirm-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; background: rgba(252,196,25,0.06); border-bottom: 1px solid var(--border); }
+.confirm-icon { font-size: 15px; }
+.confirm-title { font-weight: 600; flex: 1; color: var(--warning); }
+.confirm-tool { padding: 4px 12px; font-size: 13px; color: var(--text-dim); }
+.confirm-message { padding: 4px 12px 8px; font-size: 14px; color: var(--text); white-space: pre-wrap; }
+.confirm-details { padding: 4px 12px 8px; font-size: 12px; color: var(--text-muted); font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; white-space: pre-wrap; word-break: break-word; }
+.confirm-buttons { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); justify-content: flex-end; }
+.confirm-btn { padding: 6px 20px; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 500; border: none; }
+.confirm-btn.allow { background: var(--success); color: #fff; }
+.confirm-btn.allow:hover { filter: brightness(1.1); }
+.confirm-btn.deny { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
+.confirm-btn.deny:hover { border-color: var(--error); color: var(--error); }
+
+/* ── Markdown 内容 ── */
+.msg.assistant p { margin: 6px 0; }
+.msg.assistant p:first-child { margin-top: 0; }
+.msg.assistant p:last-child { margin-bottom: 0; }
+.msg.assistant ul, .msg.assistant ol { margin: 6px 0; padding-left: 20px; }
+.msg.assistant li { margin: 2px 0; }
+.msg.assistant h1, .msg.assistant h2, .msg.assistant h3, .msg.assistant h4 { margin: 12px 0 6px; color: var(--text); font-weight: 600; }
+.msg.assistant h1 { font-size: 16px; }
+.msg.assistant h2 { font-size: 15px; }
+.msg.assistant h3, .msg.assistant h4 { font-size: 14px; }
+.msg.assistant table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 13px; }
+.msg.assistant th, .msg.assistant td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
+.msg.assistant th { background: rgba(255,255,255,0.04); font-weight: 600; }
+.msg.assistant tr:nth-child(even) { background: rgba(255,255,255,0.02); }
+.msg.assistant pre { background: #151618; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; }
+.msg.assistant pre code { background: none; padding: 0; border-radius: 0; font-size: 13px; color: var(--text); }
+.msg.assistant code { background: rgba(255,255,255,0.06); padding: 2px 5px; border-radius: 4px; font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size: 13px; }
+.msg.assistant blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-dim); }
+.msg.assistant hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
+.msg.assistant a { color: var(--accent); text-decoration: none; }
+.msg.assistant a:hover { text-decoration: underline; }
+.msg.assistant .table-pending { display: block; font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size: 13px; color: var(--text-dim); white-space: pre; margin: 6px 0; }
+
+/* ── Thinking indicator ── */
+#thinking { display: none; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-dim); font-size: 13px; align-self: flex-start; margin-left: 20px; }
+#thinking.show { display: flex; }
+#thinking .label { color: var(--text-muted); }
+.think-dots { display: flex; gap: 4px; }
+.think-dots span { width: 5px; height: 5px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.4s infinite both; }
+.think-dots span:nth-child(2) { animation-delay: 0.16s; }
+.think-dots span:nth-child(3) { animation-delay: 0.32s; }
+@keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
+
+/* ── Agent turn badge ── */
+.agent-badge { align-self: center; padding: 2px 10px; border-radius: 10px; font-size: 11px; background: var(--accent-bg); border: 1px solid rgba(76,154,255,0.2); color: var(--accent); }
+
+/* ── Question dialog overlay ── */
+#qd-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }
+#qd-overlay.show { display: flex; }
+#qd-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-width: 640px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
+#qd-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; font-size: 14px; }
+#qd-header .icon { font-size: 16px; }
+#qd-header .title { font-weight: 600; color: var(--warning); }
+#qd-header .progress { color: var(--text-muted); font-size: 12px; margin-left: auto; }
+#qd-question { padding: 10px 18px 6px; font-size: 14px; color: var(--text); line-height: 1.6; }
+#qd-options { padding: 6px 18px 8px; }
+.qd-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; margin-top: 4px; border: 1px solid transparent; }
+.qd-opt:hover { background: rgba(255,255,255,0.04); }
+.qd-opt.focused { background: rgba(76,154,255,0.1); border-color: var(--accent); }
+.qd-opt .indicator { flex-shrink: 0; font-size: 15px; width: 20px; text-align: center; color: var(--text-dim); }
+.qd-opt.focused .indicator { color: var(--accent); }
+.qd-opt.selected .indicator { color: var(--accent); }
+.qd-opt .label { flex: 1; font-size: 14px; color: var(--text); }
+.qd-opt.focused .label { color: #fff; }
+.qd-opt.other .indicator { color: var(--text-muted); }
+#qd-desc { padding: 0 18px 6px; font-size: 12px; color: var(--text-muted); min-height: 20px; }
+#qd-hint { padding: 0 18px 14px; font-size: 11px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
+#qd-custom-area { display: none; padding: 8px 18px 14px; }
+#qd-custom-area.show { display: block; }
+#qd-custom-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; resize: none; min-height: 40px; }
+#qd-custom-input:focus { border-color: var(--accent); }
+#qd-custom-hint { display: none; padding: 0 18px 14px; font-size: 11px; color: var(--text-muted); }
+#qd-custom-hint.show { display: block; }
+#qd-confirm-area { display: none; padding: 8px 18px 14px; }
+#qd-confirm-area.show { display: block; }
+.qd-confirm-item { padding: 6px 0; }
+.qd-confirm-item .q { font-size: 13px; color: var(--text-dim); }
+.qd-confirm-item .a { font-size: 14px; color: var(--accent); padding-left: 12px; margin-top: 2px; }
+#qd-footer { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--border); justify-content: flex-end; }
+.qd-btn { padding: 6px 18px; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 500; border: none; }
+.qd-btn.primary { background: var(--accent); color: #fff; }
+.qd-btn.primary:hover { filter: brightness(1.08); }
+.qd-btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
+.qd-btn.secondary:hover { border-color: var(--text-dim); color: var(--text); }
+.qd-btn.danger { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
+.qd-btn.danger:hover { border-color: var(--error); color: var(--error); }
+
+/* ── Background task display ── */
+#bg-tasks { display: none; gap: 4px 12px; padding: 4px 20px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim); flex-shrink: 0; flex-wrap: wrap; }
+#bg-tasks.show { display: flex; }
+.bg-task { display: inline-flex; align-items: center; gap: 4px; }
+.bg-task .dot { width: 6px; height: 6px; border-radius: 50%; }
+.bg-task .dot.running { background: var(--accent); animation: pulse 1s infinite; }
+.bg-task .dot.completed { background: var(--success); }
+.bg-task .dot.error { background: var(--error); }
+
+/* ── Status bar ── */
+#status-bar { display: none; flex-wrap: wrap; gap: 4px 12px; padding: 4px 20px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
+#status-bar.show { display: flex; }
+.status-seg { display: inline-flex; align-items: center; gap: 4px; }
+
+/* ── Input area ── */
+#input-area { display: flex; gap: 8px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; }
+#input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; resize: none; outline: none; max-height: 120px; }
+#input::placeholder { color: var(--text-muted); }
+#input:focus { border-color: var(--accent); }
+#input:disabled { opacity: 0.35; }
+#send-btn { padding: 10px 20px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 14px; cursor: pointer; font-weight: 500; }
+#send-btn:disabled { opacity: 0.35; cursor: default; }
+#send-btn:hover:not(:disabled) { filter: brightness(1.08); }

package/dist/tool-display.js

@@ -0,0 +1,112 @@
+const BIG_FIELDS = new Set([
+    'content', 'old_string', 'new_string',
+    'fileContent', 'fileContents', 'originalFile', 'replace',
+]);
+const BUILTIN_DISPLAY_NAMES = {
+    'run_bash_command': 'Bash',
+    'view_file_content': 'Read',
+    'write_file_content': 'Write',
+    'patch_file': 'Patch',
+    'list_project_files': 'List',
+    'glob_files': 'Glob',
+    'grep_file_content': 'Grep',
+};
+function capitalize(word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+}
+/**
+ * Resolve user-friendly tool display name.
+ * Priority: tool definition displayName > built-in mapping > agent-xxx > snake_case.
+ */
+export function getToolDisplayName(toolName, definitions) {
+    if (definitions) {
+        for (const def of definitions) {
+            if (def.function.name === toolName && def.function.displayName) {
+                return def.function.displayName;
+            }
+        }
+    }
+    if (BUILTIN_DISPLAY_NAMES[toolName])
+        return BUILTIN_DISPLAY_NAMES[toolName];
+    if (toolName.startsWith('agent-')) {
+        return toolName.slice(6).split('-').map(capitalize).join(' ');
+    }
+    return toolName.split('_').map(capitalize).join(' ');
+}
+/**
+ * Build concise args preview for display.
+ * Single non-big field → value only; multiple → key=value pairs; big fields skipped.
+ */
+export function getToolArgsPreview(args) {
+    if (!args || typeof args !== 'object')
+        return null;
+    const truncVal = (v, max = 80) => v.length > max ? v.slice(0, max) + '…' : v;
+    const pickKeys = (keys) => {
+        const parts = [];
+        for (const k of keys) {
+            const v = args[k];
+            if (v !== undefined && v !== null) {
+                parts.push(typeof v === 'string' ? truncVal(v) : String(v));
+            }
+        }
+        return parts.length > 0 ? parts.join(', ') : null;
+    };
+    if (args.pattern)
+        return pickKeys(['pattern', 'path']);
+    if (args.glob)
+        return pickKeys(['glob', 'path']);
+    if (args.path !== undefined || args.file_path !== undefined) {
+        const pathArg = args.path ?? args.file_path;
+        const rest = [];
+        for (const k of Object.keys(args)) {
+            if (k === 'path' || k === 'file_path' || BIG_FIELDS.has(k))
+                continue;
+            const v = args[k];
+            if (typeof v === 'string')
+                rest.push(`${k}=${v}`);
+            else
+                rest.push(`${k}=${JSON.stringify(v)}`);
+        }
+        const pathPart = truncVal(pathArg);
+        return rest.length > 0 ? `${pathPart}, ${rest.join(', ')}` : pathPart;
+    }
+    if (args.content !== undefined) {
+        const parts = [];
+        for (const k of Object.keys(args)) {
+            if (k === 'content')
+                continue;
+            parts.push(`${k}=${typeof args[k] === 'string' ? args[k] : JSON.stringify(args[k])}`);
+        }
+        return parts.length > 0 ? parts.join(', ') : pickKeys(['content']);
+    }
+    if (args.command)
+        return truncVal(args.command);
+    if (args.url)
+        return pickKeys(['url']);
+    const entries = [];
+    for (const [k, v] of Object.entries(args)) {
+        if (BIG_FIELDS.has(k) || v === undefined || v === null)
+            continue;
+        entries.push({ key: k, value: typeof v === 'string' ? truncVal(v) : JSON.stringify(v) });
+    }
+    if (entries.length === 0)
+        return null;
+    if (entries.length === 1)
+        return entries[0].value;
+    return entries.map(e => `${e.key}=${e.value}`).join(', ');
+}
+/**
+ * Full formatted tool call string.
+ */
+export function formatToolCall(toolName, args, definitions) {
+    const displayName = getToolDisplayName(toolName, definitions);
+    if (!args || typeof args !== 'object')
+        return `${displayName}(${JSON.stringify(args)})`;
+    if (Object.keys(args).length === 0)
+        return `${displayName}()`;
+    const preview = getToolArgsPreview(args);
+    if (preview)
+        return `${displayName}(${preview})`;
+    const str = JSON.stringify(args);
+    return str.length > 200 ? `${displayName}(${str.slice(0, 200)}…)` : `${displayName}(${str})`;
+}