blyuecode 0.3.0 → 0.3.4

package/dist/ui/Chat.js

@@ -8,6 +8,7 @@ import { Agent } from '../core/agent.js';
 import { permissions } from '../core/permission.js';
 import { InputBar } from './InputBar.js';
 import { ModelPicker } from './ModelPicker.js';
+import { McpPanel } from './McpPanel.js';
 import { Settings } from './Settings.js';
 import { PermissionPrompt } from './PermissionPrompt.js';
 import { Spinner } from './Spinner.js';
@@ -127,6 +128,11 @@ export const Chat = ({ resumedCount = 0 }) => {
             setOverlay('settings');
             return;
         }
+        if (trimmed === '/mcp') {
+            setInput('');
+            setOverlay('mcp');
+            return;
+        }
         if (trimmed === '/debug') {
             setInput('');
             const lines = readDebug();
@@ -172,6 +178,7 @@ export const Chat = ({ resumedCount = 0 }) => {
                 mkItem('tool', 'Commands:'),
                 mkItem('tool', '  /model     switch model            (Ctrl+L)'),
                 mkItem('tool', '  /settings  open settings           (Ctrl+O)'),
+                mkItem('tool', '  /mcp       show MCP servers and tools'),
                 mkItem('tool', '  /compact   summarize history to free context'),
                 mkItem('tool', '  /debug     show last request to provider'),
                 mkItem('tool', '  /clear     clear session and permissions'),
@@ -246,6 +253,9 @@ export const Chat = ({ resumedCount = 0 }) => {
     if (overlay === 'model') {
         return (_jsx(Box, { flexDirection: "column", children: _jsx(ModelPicker, { current: currentModel, onSelect: handleModelSelect, onCancel: () => setOverlay('none') }) }));
     }
+    if (overlay === 'mcp') {
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(McpPanel, { onClose: () => setOverlay('none') }) }));
+    }
     if (overlay === 'settings') {
         return (_jsx(Box, { flexDirection: "column", children: _jsx(Settings, { onClose: () => setOverlay('none'), onModelChange: (m) => {
                     setCurrentModel(m);

package/dist/ui/McpPanel.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { listMcpServers, initMcpRegistry, closeAllMcp, } from '../core/mcpRegistry.js';
+import { mcpConfigPath } from '../core/mcp.js';
+import { theme } from './theme.js';
+export const McpPanel = ({ onClose }) => {
+    const { stdout } = useStdout();
+    const width = Math.max(40, stdout?.columns ?? 60);
+    const inner = width - 4;
+    const [servers, setServers] = useState(() => listMcpServers());
+    const [reloading, setReloading] = useState(false);
+    const [msg, setMsg] = useState(null);
+    // Refresh list on mount in case registry changed since last render.
+    useEffect(() => {
+        setServers(listMcpServers());
+    }, []);
+    const reload = async () => {
+        setReloading(true);
+        setMsg(null);
+        try {
+            await closeAllMcp();
+            await initMcpRegistry();
+            setServers(listMcpServers());
+            setMsg('✓ reloaded');
+        }
+        catch (err) {
+            setMsg('✗ ' + err.message);
+        }
+        setReloading(false);
+    };
+    useInput((input, key) => {
+        if (key.escape)
+            return onClose();
+        if (input === 'r' || input === 'R') {
+            if (!reloading)
+                void reload();
+        }
+    });
+    const label = 'mcp servers';
+    const topPad = Math.max(1, inner - label.length - 4);
+    const totalTools = servers.reduce((n, s) => n + s.toolCount, 0);
+    const healthy = servers.filter((s) => !s.error).length;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╭─ ' }), _jsx(Text, { color: theme.accent, bold: true, children: label }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(topPad) + '╮' })] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.muted, children: ["config: ", mcpConfigPath()] })] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.muted, children: [servers.length, " server", servers.length === 1 ? '' : 's', " \u00B7", ' '] }), _jsxs(Text, { color: healthy === servers.length ? theme.success : theme.warning, children: [healthy, " connected"] }), _jsxs(Text, { color: theme.muted, children: [" \u00B7 ", totalTools, " tools"] })] }), _jsx(Text, { color: theme.muted, children: '│ ' + '─'.repeat(Math.max(1, inner - 2)) }), servers.length === 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsx(Text, { color: theme.warning, children: "no MCP servers configured" })] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.muted, children: ["add one to ", mcpConfigPath(), " then press [r]"] })] })] })) : (servers.map((s) => {
+                const status = s.error ? '✗' : '●';
+                const statusColor = s.error ? theme.error : theme.success;
+                const autoTag = s.autoAllow ? ' [auto]' : '';
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsx(Text, { color: statusColor, children: status + ' ' }), _jsx(Text, { color: theme.text, bold: true, children: s.name }), _jsxs(Text, { color: theme.muted, children: [autoTag, " \u00B7 ", s.toolCount, " tool", s.toolCount === 1 ? '' : 's'] })] }), s.error ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│   ' }), _jsx(Text, { color: theme.error, children: s.error.slice(0, inner - 6) })] })) : (s.toolNames.slice(0, 4).map((t) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│   · ' }), _jsx(Text, { color: theme.muted, children: t })] }, t)))), !s.error && s.toolNames.length > 4 && (_jsx(Text, { children: _jsx(Text, { color: theme.muted, children: '│   · +' + (s.toolNames.length - 4) + ' more' }) }))] }, s.name));
+            })), _jsx(Text, { color: theme.muted, children: '╰' + '─'.repeat(inner) + '╯' }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "  [" }), _jsx(Text, { color: theme.accent, children: "r" }), _jsx(Text, { color: theme.muted, children: "] reload \u00B7 [" }), _jsx(Text, { color: theme.accent, children: "esc" }), _jsx(Text, { color: theme.muted, children: "] close" }), reloading && _jsx(Text, { color: theme.warning, children: " \u00B7 reloading\u2026" }), msg && _jsxs(Text, { color: theme.success, children: [" \u00B7 ", msg] })] })] }));
+};

package/dist/ui/ModelPicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import { fetchModels, currentProviderLabel, } from '../core/models.js';
 import { theme } from './theme.js';
@@ -12,6 +12,7 @@ export const ModelPicker = ({ current, onSelect, onCancel }) => {
     const [error, setError] = useState(null);
     const [idx, setIdx] = useState(0);
     const [filter, setFilter] = useState('');
+    const [tier, setTier] = useState('all');
     useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -35,48 +36,121 @@ export const ModelPicker = ({ current, onSelect, onCancel }) => {
             cancelled = true;
         };
     }, [current]);
-    const filtered = filter
-        ? models.filter((m) => m.id.toLowerCase().includes(filter.toLowerCase()))
-        : models;
+    const { free, paid } = useMemo(() => {
+        const q = filter.toLowerCase();
+        const matched = q
+            ? models.filter((m) => m.id.toLowerCase().includes(q))
+            : models;
+        const free = [];
+        const paid = [];
+        for (const m of matched) {
+            if (m.isFree)
+                free.push(m);
+            else
+                paid.push(m);
+        }
+        return { free, paid };
+    }, [models, filter]);
+    const rows = useMemo(() => {
+        const out = [];
+        let abs = 0;
+        const pushSection = (label, list) => {
+            if (list.length === 0)
+                return;
+            out.push({ kind: 'header', label, count: list.length });
+            for (const m of list) {
+                out.push({ kind: 'model', model: m, absoluteIdx: abs++ });
+            }
+        };
+        if (tier === 'all' || tier === 'free')
+            pushSection('FREE', free);
+        if (tier === 'all' || tier === 'paid')
+            pushSection('PAID', paid);
+        return out;
+    }, [free, paid, tier]);
+    const selectableIdxToRow = [];
+    rows.forEach((r, i) => {
+        if (r.kind === 'model')
+            selectableIdxToRow.push(i);
+    });
+    const totalSelectable = selectableIdxToRow.length;
+    useEffect(() => {
+        if (totalSelectable === 0) {
+            if (idx !== 0)
+                setIdx(0);
+            return;
+        }
+        if (idx >= totalSelectable)
+            setIdx(totalSelectable - 1);
+    }, [totalSelectable, idx]);
     useInput((input, key) => {
         if (key.escape)
             return onCancel();
-        if (key.upArrow && filtered.length)
-            setIdx((i) => (i - 1 + filtered.length) % filtered.length);
-        if (key.downArrow && filtered.length)
-            setIdx((i) => (i + 1) % filtered.length);
-        if (key.return && filtered[idx])
-            onSelect(filtered[idx].id);
-        if (key.backspace || key.delete)
+        if (key.tab) {
+            setTier((t) => (t === 'all' ? 'free' : t === 'free' ? 'paid' : 'all'));
+            setIdx(0);
+            return;
+        }
+        if (key.upArrow && totalSelectable)
+            setIdx((i) => (i - 1 + totalSelectable) % totalSelectable);
+        if (key.downArrow && totalSelectable)
+            setIdx((i) => (i + 1) % totalSelectable);
+        if (key.return) {
+            const rowI = selectableIdxToRow[idx];
+            const row = rowI !== undefined ? rows[rowI] : undefined;
+            if (row && row.kind === 'model')
+                onSelect(row.model.id);
+            return;
+        }
+        if (key.backspace || key.delete) {
             setFilter((f) => f.slice(0, -1));
+            setIdx(0);
+            return;
+        }
         if (input && !key.ctrl && !key.meta && !key.upArrow && !key.downArrow) {
             const clean = input.replace(/[\x00-\x1F\x7F]/g, '');
-            if (clean)
+            if (clean) {
                 setFilter((f) => f + clean);
+                setIdx(0);
+            }
         }
     });
     const inner = width - 4;
-    const maxVisible = 12;
-    const start = Math.max(0, Math.min(idx - 6, Math.max(0, filtered.length - maxVisible)));
-    const visible = filtered.slice(start, start + maxVisible);
-    const label = filter ? `filter: ${filter}` : `${provider} models`;
-    const topPad = Math.max(1, inner - label.length - 4);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╭─ ' }), _jsx(Text, { color: theme.accent, bold: true, children: label }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(topPad) + '╮' })] }), loading ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.muted, children: ["fetching ", provider, " catalog\u2026"] })] })) : error ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.error, children: ["\u2717 ", error.slice(0, inner - 6)] })] })) : visible.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsx(Text, { color: theme.error, children: "no matches" })] })) : (visible.map((m, i) => {
-                const realIdx = start + i;
-                const active = realIdx === idx;
+    const total = free.length + paid.length;
+    const headerLabel = filter
+        ? `filter: ${filter} · ${total} match`
+        : `${provider} · ${total} total · ${free.length} free`;
+    const topPad = Math.max(1, inner - headerLabel.length - 4);
+    const maxVisible = 14;
+    const cursorRowI = selectableIdxToRow[idx] ?? 0;
+    let windowStart = Math.max(0, cursorRowI - Math.floor(maxVisible / 2));
+    windowStart = Math.min(windowStart, Math.max(0, rows.length - maxVisible));
+    const windowEnd = windowStart + maxVisible;
+    const visibleRows = rows.slice(windowStart, windowEnd);
+    const cursorAbs = idx;
+    const tierBadge = tier === 'all' ? 'all' : tier === 'free' ? 'FREE only' : 'PAID only';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╭─ ' }), _jsx(Text, { color: theme.accent, bold: true, children: headerLabel }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(topPad) + '╮' })] }), loading ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.muted, children: ["fetching ", provider, " catalog\u2026"] })] })) : error ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.error, children: ["\u2717 ", error.slice(0, inner - 6)] })] })) : rows.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsxs(Text, { color: theme.error, children: ["no matches", tier !== 'all' ? ` in ${tierBadge}` : ''] })] })) : (visibleRows.map((row, i) => {
+                if (row.kind === 'header') {
+                    const sectionPad = Math.max(1, inner - row.label.length - row.count.toString().length - 5);
+                    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsx(Text, { color: theme.accent, bold: true, children: row.label }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(sectionPad) + ' ' + row.count })] }, `h-${row.label}`));
+                }
+                const m = row.model;
+                const active = row.absoluteIdx === cursorAbs;
                 const isCurrent = m.id === current;
                 const ctx = m.contextLength
                     ? m.contextLength >= 1000
                         ? `${Math.round(m.contextLength / 1000)}k`
                         : `${m.contextLength}`
                     : '';
-                const freeTag = m.isFree ? 'FREE' : '';
-                // Right side:  ctx + free badge
-                const right = [ctx, freeTag].filter(Boolean).join(' · ');
-                const label0 = m.id.length > inner - 10
-                    ? m.id.slice(0, inner - 13) + '…'
-                    : m.id;
-                const pad = Math.max(1, inner - label0.length - right.length - 4);
-                return (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsx(Text, { color: active ? theme.accent : theme.muted, bold: active, children: active ? '❯ ' : '  ' }), _jsx(Text, { color: active ? theme.text : theme.muted, bold: active, children: label0 }), _jsx(Text, { color: theme.muted, children: ' '.repeat(pad) }), _jsx(Text, { color: theme.muted, children: right }), isCurrent && _jsx(Text, { color: theme.accent, children: " \u2713" })] }, m.id));
-            })), _jsx(Text, { children: _jsx(Text, { color: theme.muted, children: '╰' + '─'.repeat(inner) + '╯' }) }), _jsx(Text, { color: theme.muted, children: "\u2191\u2193 move \u00B7 type to filter \u00B7 \u21B5 select \u00B7 esc cancel" })] }));
+                const price = m.isFree
+                    ? 'FREE'
+                    : m.pricing
+                        ? `$${(m.pricing.prompt * 1_000_000).toFixed(2)}/M`
+                        : '';
+                const right = [ctx, price].filter(Boolean).join(' · ');
+                const maxName = Math.max(8, inner - right.length - 6);
+                const name = m.id.length > maxName ? m.id.slice(0, maxName - 1) + '…' : m.id;
+                const pad = Math.max(1, inner - name.length - right.length - 4);
+                return (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), _jsx(Text, { color: active ? theme.accent : theme.muted, bold: active, children: active ? '❯ ' : '  ' }), _jsx(Text, { color: active ? theme.text : theme.muted, bold: active, children: name }), _jsx(Text, { color: theme.muted, children: ' '.repeat(pad) }), _jsx(Text, { color: m.isFree ? theme.success : theme.muted, children: right }), isCurrent && _jsx(Text, { color: theme.accent, children: " \u2713" })] }, `m-${m.id}`));
+            })), _jsx(Text, { children: _jsx(Text, { color: theme.muted, children: '╰' + '─'.repeat(inner) + '╯' }) }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "  \u2191\u2193 move \u00B7 " }), _jsx(Text, { color: theme.accent, children: "tab" }), _jsxs(Text, { color: theme.muted, children: [" tier (", tierBadge, ") \u00B7 "] }), _jsx(Text, { color: theme.muted, children: "type to filter \u00B7 " }), _jsx(Text, { color: theme.accent, children: "\u21B5" }), _jsx(Text, { color: theme.muted, children: " select \u00B7 " }), _jsx(Text, { color: theme.accent, children: "esc" }), _jsx(Text, { color: theme.muted, children: " cancel" })] })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blyuecode",
-  "version": "0.3.0",
+  "version": "0.3.4",
   "description": "BLYUE Code — a coding agent by Lumen",
   "type": "module",
   "license": "MIT",