agent-from-zero 0.35.1 → 0.35.3

package/dist/ink/app.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { stripVTControlCharacters } from "node:util"; // plain text of a styled status line, to find the verb
 import { statusCommand } from "../status.js";
 import React, { useState, useEffect, useRef } from "react";
 import { Box, Text, Static, useInput, useApp } from "ink";
@@ -9,8 +10,9 @@ import { initFormState, reduceForm, renderForm, collectAnswers } from "../form.j
 import { CONFIG, saveGlobalSetting } from "../config.js"; // session allowlist + /model save
 import { effortMenu, setEffort } from "../effort.js";
 import { useSlashCompletion } from "./completion.js";
+import { commandNames, commandTokenRanges, inlineCommandGhost } from "../completion.js"; // which /command tokens to paint + the mid-text ghost suggestion
 import { TerminateReason, listAgentViews } from "../loop.js"; // how a turn can end
-import { compactHistory, COMPACT_AT } from "../context.js"; // /compact
+import { compactHistory, compactThreshold, contextWindowFor } from "../context.js"; // /compact + /model info
 import { forgetFilesExcept } from "../tools.js"; // /clear resets the file read-state
 import { clearUndo } from "../undo.js";
 import { clearTodos } from "../todos.js";
@@ -23,7 +25,8 @@ import { cronItemsPending, consumeCronQueue, cronTriggerContent } from "../cron.
 import { newSessionId, saveSession, listSessions, loadSession, setSessionTitle } from "../session.js";
 import { generateSessionTitle, setTerminalTitle } from "../title.js"; // concise session name, generated after the first message + the terminal tab that shows it
 import { isPlanMode, setPlanMode } from "../permissions.js";
-import { findSkill, skillInstructions } from "../skills.js";
+import { findSkill, recordSkillUsage, skillSource, skillUsageScores, userSkillMessages } from "../skills.js";
+import { SkillsPanel } from "./skills-panel.js"; // /skills: Claude Code's on / user-only / off manager
 import { extractMemories } from "../memory.js";
 import { displayWidth } from "../editor.js"; // display-width measurement (CJK-aware)
 import { runHooks } from "../hooks.js";
@@ -37,10 +40,17 @@ import { detailPage, summarizeActivity } from "./activity.js";
 import { useTerminalSize } from "./viewport.js";
 import { makeInkSink } from "./sink.js"; // turns the loop's output into React state
 import { runInfoCommand, mcpStatusText } from "./commands.js"; // the non-interactive slash commands + /mcp status
-import { listMcpServers, mcpActionsFor, runMcpAction } from "../mcp.js"; // /mcp: list + per-server actions
+import { listMcpServers, MCP_SUBCOMMANDS, mcpActionsFor, mcpProblems, mcpServerDetails, reloadMcpServers, runMcpAction } from "../mcp.js"; // /mcp: list + per-server actions
 // Injected when plan mode turns on, so the model knows the rules it now lives in.
 const PLAN_MODE_NOTICE = `[plan mode ON] Investigate this request using only read-only tools — read_file, search, and safe read-only shell (ls, cat, git status). Do NOT write files, edit, or run mutating commands; the permission gate will block them. When you have a concrete, ordered plan, call the exit_plan_mode tool with that plan. The user reviews and approves it before you make any change.`;
-const SPINNER_FRAMES = ["·", "✢", "✳", "✶", "✻", "✽", "✻", "✶", "✳", "✢"];
+// No ✳ (U+2733): it has an emoji presentation, and terminals that honour it draw
+// it two cells wide — the text after the glyph then jumps on every other frame.
+const SPINNER_FRAMES = ["·", "✢", "✶", "✻", "✽", "✻", "✶", "✢"];
+const SPINNER_COLOR = "#D77757"; // Claude Code's orange
+const SKILL_COLOR = "#B1B9F9"; // Claude Code's lavender for a recognised /skill in the input
+const SHIMMER_PEAK = "#FFD2BD"; // the highlight that sweeps across the verb
+const SHIMMER_TICK_MS = 100; // one animation clock for glyph + shimmer → one repaint per tick
+const SHIMMER_RADIUS = 3; // how many cells the highlight fades over on each side
 // Cap the live streaming preview to a terminal-aware tail. THIS IS LOAD-BEARING:
 // Ink redraws the whole dynamic region (everything below <Static>) on every
 // token, and when that region grows TALLER than the terminal, Ink can no longer
@@ -56,13 +66,49 @@ function liveTail(s, rows, columns, queued) {
     const page = detailPage(s, 0, maxLines, Math.max(1, columns - 2));
     return (page.pages > 1 ? "… " : "") + page.text;
 }
-function Spinner() {
-    const [f, setF] = useState(0);
+// A shared animation clock. One interval drives both the glyph and the shimmer,
+// so the live region repaints once per tick instead of once per effect.
+function useTick() {
+    const [tick, setTick] = useState(0);
     useEffect(() => {
-        const id = setInterval(() => setF((x) => (x + 1) % SPINNER_FRAMES.length), 120);
+        const id = setInterval(() => setTick((t) => t + 1), SHIMMER_TICK_MS);
         return () => clearInterval(id);
     }, []);
-    return _jsx(Text, { color: "#D77757", children: SPINNER_FRAMES[f] });
+    return tick;
+}
+// The glyph lives in a fixed two-cell box: whatever the frame, the text after it
+// starts in the same column.
+function Glyph({ tick }) {
+    return (_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: SPINNER_COLOR, children: SPINNER_FRAMES[Math.floor(tick / 2) % SPINNER_FRAMES.length] }) }));
+}
+function Spinner() {
+    return _jsx(Glyph, { tick: useTick() });
+}
+// Blend two #rrggbb colours; t = 0 → a, 1 → b.
+function mix(a, b, t) {
+    const ch = (hex, i) => parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16);
+    return "#" + [0, 1, 2].map((i) => Math.round(ch(a, i) + (ch(b, i) - ch(a, i)) * t).toString(16).padStart(2, "0")).join("");
+}
+// The light sweep: each character is coloured by its distance from a moving
+// highlight. Only COLOUR changes between frames — never a character, never a
+// width — so the line shimmers without a single cell moving.
+export function shimmer(text, pos) {
+    return [...text].map((c, i) => {
+        const glow = Math.max(0, 1 - Math.abs(i - pos) / SHIMMER_RADIUS);
+        return chalk.hex(mix(SPINNER_COLOR, SHIMMER_PEAK, glow))(c);
+    }).join("");
+}
+// "✶ Thinking… (3s · ↓ 281 tokens · thought for 1s)": the verb (everything up to
+// and including the first "…") shimmers; the stats after it stay put. A pause
+// between sweeps (the highlight travels past the end) keeps it calm.
+function SpinnerLine({ text }) {
+    const tick = useTick();
+    const plain = stripVTControlCharacters(text);
+    const cut = plain.indexOf("…");
+    const verb = cut >= 0 && text.startsWith(plain.slice(0, cut + 1)) ? plain.slice(0, cut + 1) : ""; // shimmer only an unstyled verb
+    const period = verb.length + SHIMMER_RADIUS * 2 + 8;
+    const pos = (tick % period) - SHIMMER_RADIUS;
+    return (_jsxs(Box, { children: [_jsx(Glyph, { tick: tick }), _jsxs(Text, { color: SPINNER_COLOR, wrap: "truncate-end", children: [verb ? shimmer(verb, pos) : "", text.slice(verb.length)] })] }));
 }
 // One committed line of conversation. `user` is a highlight bar; `answer` is a
 // finished reply rendered as markdown; `note` is already-formatted narration.
@@ -88,6 +134,24 @@ function StatusBar({ model, dir, branch, status }) {
     ];
     return (_jsx(Text, { wrap: "truncate-end", children: parts.map((p, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: "  ·  " }), p] }, i))) }));
 }
+// Bottom-right MCP health, like Claude Code's footer notice: red when a
+// server failed, yellow when one needs sign-in, dim while servers are still
+// connecting in the background; nothing at all when every server is fine.
+// Re-read on every render (the app ticks once a second), so it follows
+// background connects, /mcp actions and settings reloads with no wiring.
+function McpBadge() {
+    const { failed, needsAuth, pending } = mcpProblems();
+    const parts = [];
+    if (failed.length)
+        parts.push(_jsxs(Text, { color: "red", children: ["\u2717 MCP failed: ", failed.join(", ")] }, "f"));
+    if (needsAuth.length)
+        parts.push(_jsxs(Text, { color: "yellow", children: ["\u25B3 ", needsAuth.join(", "), " needs auth"] }, "a"));
+    if (pending)
+        parts.push(_jsxs(Text, { dimColor: true, children: ["\u25CC connecting ", pending, " MCP server", pending === 1 ? "" : "s", "\u2026"] }, "p"));
+    if (!parts.length)
+        return null;
+    return (_jsx(Box, { flexShrink: 1, marginLeft: 2, children: _jsxs(Text, { wrap: "truncate-end", children: [parts.map((p, i) => _jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: "  ·  " }), p] }, i)), failed.length || needsAuth.length ? _jsx(Text, { dimColor: true, children: "  · /mcp" }) : null] }) }));
+}
 // One human note per non-Done ending, so the user always learns why a turn stopped.
 const EXIT_NOTES = {
     [TerminateReason.ReviewLimit]: "Repeated automatic denials — stopped. Tell the agent how to proceed; prohibited actions were not executed.",
@@ -102,7 +166,7 @@ const EXIT_NOTES = {
 };
 export function App({ session, runTurn, clipboard }) {
     const { rows, columns } = useTerminalSize();
-    const { client, messages, systemMessage, costMeter, skills, judge, autoMode, model, dir, branch, getStatus } = session;
+    const { client, messages, systemMessage, costMeter, skills: liveSkills, allSkills: everySkill, judge, autoMode, model, dir, branch, getStatus } = session;
     // Seed the scrollback with the welcome banner + the dim startup notices.
     const [items, setItems] = useState(() => [{ kind: "note", text: session.bannerText }, ...session.notices.map((n) => ({ kind: "note", text: chalk.dim(n) }))]);
     const [status, setStatus] = useState(null); // the live spinner line
@@ -149,9 +213,12 @@ export function App({ session, runTurn, clipboard }) {
         modelListEndpoint.current = CONFIG.baseURL;
         void client.models.list().then((page) => setCompletionModels(page.data.map((m) => m.id))).catch(() => { });
     }, [wantsModels, client]);
+    const typeaheadSkills = liveSkills().map((s) => ({ name: s.name, description: s.description, whenToUse: s.whenToUse, argNames: s.argNames, argumentHint: s.argumentHint, source: skillSource(s) }));
     const completion = useSlashCompletion(input, completing, {
-        model: CONFIG.model, skills, models: completionModels, servers: listMcpServers().map((s) => s.name),
-    }, rows - 10);
+        model: CONFIG.model, skills: typeaheadSkills, models: completionModels, servers: listMcpServers().map((s) => s.name), usage: completing && input.startsWith("/") ? skillUsageScores() : undefined,
+    }, rows - 10, columns);
+    // A "/" later in the text: no list, just the rest of the best match as dim ghost text (Tab accepts).
+    const ghost = completing && cursor === input.length ? inlineCommandGhost(input, { skills: typeaheadSkills }) : null;
     useEffect(() => {
         const id = setInterval(() => setTick((t) => t + 1), 1000);
         return () => clearInterval(id);
@@ -162,10 +229,10 @@ export function App({ session, runTurn, clipboard }) {
         setTerminalTitle(session.initialTitle);
     }, [session.initialTitle]);
     // Open a one-of-N menu and run `onChoose` with the picked index (-1 = cancel).
-    const openSelect = (header, options, onChoose) => {
+    const openSelect = (header, options, onChoose, body) => {
         setDetails(null);
         setMenuSel(0);
-        setPending({ kind: "select", header, options, onChoose });
+        setPending({ kind: "select", header, body, options, onChoose });
     };
     // Run one conversation turn through the real loop. `display` is what scrolls up
     // as the prompt (a user highlight bar, or a note for /skill); the loop appends
@@ -314,7 +381,7 @@ export function App({ session, runTurn, clipboard }) {
                 setFormState(null);
                 if (pending.kind === "form")
                     pending.resolve(null);
-                else
+                else if (pending.kind === "select")
                     pending.onChoose(-1);
             }
             if (immediate)
@@ -336,12 +403,24 @@ export function App({ session, runTurn, clipboard }) {
     // /mcp — list configured servers + status, then pick one to manage it.
     const handleMcpCommand = async (arg) => {
         const parts = arg.trim().split(/\s+/).filter(Boolean);
+        // /mcp reload — re-read settings.json now (the file watcher normally does this on save).
+        if (parts[0] === "reload") {
+            setBusy(true);
+            try {
+                const changes = await reloadMcpServers();
+                note(chalk.dim(changes.length ? `(mcp: ${changes.join(", ")})` : "(mcp: no changes in settings.json)"));
+            }
+            finally {
+                setBusy(false);
+            }
+            return;
+        }
         // Direct subcommands (scriptable, matching Claude Code): /mcp reconnect|auth|enable|disable <name>
-        if (parts.length >= 2 && ["reconnect", "auth", "authenticate", "enable", "disable"].includes(parts[0])) {
+        if (parts.length >= 2 && MCP_SUBCOMMANDS[parts[0]]) {
             const name = parts.slice(1).join(" ");
             setBusy(true);
             try {
-                const action = parts[0] === "auth" || parts[0] === "authenticate" ? "authenticate" : parts[0];
+                const action = MCP_SUBCOMMANDS[parts[0]];
                 const msg = await runMcpAction(name, action, (url) => note(chalk.dim(`authenticate in your browser: ${url}`)));
                 note(chalk.dim(msg));
             }
@@ -364,7 +443,7 @@ export function App({ session, runTurn, clipboard }) {
                 return note(chalk.dim("(cancelled)"));
             const server = servers[i];
             const actions = mcpActionsFor(server);
-            openSelect(`${server.name} — ${mcpStatusText(server)}`, actions.map((a) => a.label), (j) => {
+            openSelect(`${server.name} MCP Server`, actions.map((a) => a.label), (j) => {
                 if (j < 0)
                     return note(chalk.dim("(cancelled)"));
                 setBusy(true);
@@ -372,7 +451,7 @@ export function App({ session, runTurn, clipboard }) {
                     .then((msg) => note(chalk.dim(msg)))
                     .catch((err) => note(chalk.yellow(err.message)))
                     .finally(() => setBusy(false));
-            });
+            }, mcpServerDetails(server)); // Claude Code's server screen: status, auth, protocol, URL, config, capabilities, tools
         });
     };
     const handleCommand = async (line) => {
@@ -393,6 +472,11 @@ export function App({ session, runTurn, clipboard }) {
         }
         if (line.startsWith("/skills "))
             line = `/skill ${line.slice(8).trim()}`;
+        if (line === "/skills") {
+            setDetails(null);
+            setPending({ kind: "skills" });
+            return true;
+        } // Claude Code's manager: on / user-only / off per skill
         if (line === "/effort" || line.startsWith("/effort ")) {
             const target = CONFIG.model;
             const value = line.slice("/effort".length).trim();
@@ -418,12 +502,12 @@ export function App({ session, runTurn, clipboard }) {
             setAutoEnabled(autoMode.enabled);
             return true;
         }
-        const info = runInfoCommand(line, { skills, costMeter }); // /help /cost /memory /stats /todos /bg /team /tasks /skills /undo /diff
+        const info = runInfoCommand(line, { skills: liveSkills(), costMeter }); // /help /cost /memory /stats /todos /bg /team /tasks /skills /undo /diff
         if (info !== null) {
             note(info);
             return true;
         }
-        // /mcp [reconnect|auth|enable|disable <name>]
+        // /mcp [reload | reconnect|auth|enable|disable <name>]
         if (line === "/mcp" || line.startsWith("/mcp ")) {
             await handleMcpCommand(line.slice("/mcp".length).trim());
             return true;
@@ -448,7 +532,7 @@ export function App({ session, runTurn, clipboard }) {
                 apply(name);
                 return true;
             }
-            note(chalk.dim(`model: ${CONFIG.model}\nendpoint: ${CONFIG.baseURL}\ncontext window: ${CONFIG.contextWindow} tokens (compaction at ~${COMPACT_AT})`));
+            note(chalk.dim(`model: ${CONFIG.model}\nendpoint: ${CONFIG.baseURL}\ncontext window: ${contextWindowFor()} tokens (auto-compact at ~${compactThreshold()})`));
             let models = [];
             try {
                 const page = await client.models.list();
@@ -468,9 +552,12 @@ export function App({ session, runTurn, clipboard }) {
             });
             return true;
         }
-        // /skill <name> — run a skill on the user's behalf (works for user-only skills)
+        // /skill <name> [args] — run a skill on the user's behalf (works for user-only
+        // skills). Claude Code's pair: a <command-name> marker, then the body.
         if (line === "/skill" || line.startsWith("/skill ")) {
-            const name = line.slice("/skill".length).trim();
+            const skills = liveSkills(); // live — a SKILL.md added mid-session is found
+            const [name = "", ...rest] = line.slice("/skill".length).trim().split(/\s+/);
+            const args = rest.join(" ");
             if (!name) {
                 note(chalk.dim(skills.length ? `usage: /skill <name> — available: ${skills.map((s) => s.name).join(", ")}` : "(no skills in this project — add one at .mini-agent/skills/<name>/SKILL.md)"));
                 return true;
@@ -480,8 +567,9 @@ export function App({ session, runTurn, clipboard }) {
                 note(chalk.yellow(`(no skill named "${name}")`));
                 return true;
             }
-            autoMode.recordRequest(`Run the "${s.name}" skill.`);
-            runConversationTurn(`Run the "${s.name}" skill.\n\n${skillInstructions(s)}`, { kind: "note", text: chalk.dim(`(running skill: ${s.name})`) });
+            autoMode.recordRequest(`/${s.name}${args ? ` ${args}` : ""}`);
+            recordSkillUsage(s.name); // feeds the "/" typeahead's most-used ranking
+            runConversationTurn(userSkillMessages(s, args), { kind: "note", text: chalk.dim(`(running skill: ${s.name})`) });
             return true;
         }
         switch (line) {
@@ -562,6 +650,8 @@ export function App({ session, runTurn, clipboard }) {
                 return true;
             }
             default:
+                if (line.startsWith("/") && findSkill(liveSkills(), line.slice(1).split(/\s+/)[0]))
+                    return handleCommand(`/skill ${line.slice(1)}`); // /<skill-name> [args], like Claude Code
                 if (line.startsWith("/")) {
                     note(chalk.dim(`unknown command: ${line} — try /help`));
                     return true; // consumed — don't send typos to the model
@@ -586,6 +676,8 @@ export function App({ session, runTurn, clipboard }) {
             tuiCleanup();
             return exit(); // Ctrl+C quits immediately (process.on exit cleans up MCP/background)
         }
+        if (pending?.kind === "skills")
+            return; // the /skills panel owns the keyboard while it is open
         const modifiedReturn = char === "[13;5u" || char === "[27;5;13~";
         // A submitted follow-up may still be passing hooks. A second Enter must
         // not approve the old action while that asynchronous preparation runs.
@@ -714,6 +806,13 @@ export function App({ session, runTurn, clipboard }) {
                 return;
             }
         }
+        if (key.tab && ghost) { // accept the inline suggestion as "/name "
+            const next = input.slice(0, ghost.start) + `/${ghost.full} `;
+            setInput(next);
+            setCursor(next.length);
+            setHistIdx(null);
+            return;
+        }
         const completionAction = completion.handleKey(key, (value) => { setInput(value); setCursor(value.length); setHistIdx(null); });
         if (completionAction.handled && !completionAction.submit)
             return;
@@ -854,7 +953,7 @@ export function App({ session, runTurn, clipboard }) {
     const agentDetailView = detailPage(selectedAgent?.transcript || "(Waiting for activity…)", agentPage, Math.max(1, Math.min(10, rows - 10)), Math.max(1, columns - 4));
     const detailView = detailPage(details === "tools" ? getToolCalls() ?? "No tool calls this turn." : details === "reasoning" ? getReasoning() ?? "No thinking recorded this turn." : "", detailOffset, Math.max(1, Math.min(12, rows - 9)), Math.max(1, columns - 4));
     const activity = rows >= 20 && busy && !details && !pending && !subAgentDetail && !followUps.size ? summarizeActivity(getToolActivity(), Date.now(), rows >= 30 && !agents.length ? 2 : 1) : [];
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item, i) => _jsx(ItemView, { item: item }, i) }), _jsxs(Box, { flexDirection: "column", height: !pending && (details || selectedAgent) ? Math.max(1, rows - 1) : undefined, overflow: "hidden", children: [live !== null && !details && !pending && !selectedAgent && (_jsxs(Box, { marginTop: rows >= 20 ? 1 : 0, flexDirection: "row", children: [_jsx(Text, { color: "green", children: "\u23FA " }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: live === "" ? chalk.dim("…") : liveTail(live, rows, columns, followUps.size > 0) }) })] })), activity.map((group, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i === 0 ? 1 : 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: group.failed ? "yellow" : group.running ? "cyan" : "green", children: "\u25CF " }), _jsx(Text, { bold: true, children: group.title })] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  \u23BF ", group.detail] })] }, i))), !details && !pending && !selectedAgent && (status !== null || busy) && (_jsxs(Box, { marginTop: rows >= 20 ? 1 : 0, children: [_jsx(Spinner, {}), _jsxs(Text, { color: "#D77757", wrap: "truncate-end", children: [" ", status?.replace("Ctrl+C to interrupt", "Esc to interrupt") ?? (live !== null ? "Writing…" : "Working…")] })] })), rows >= 20 && !details && !selectedAgent && !pending && (busy || getToolCallCount() > 0) && (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  ", getToolCallCount(), " tool calls \u00B7 Ctrl+T details \u00B7 Ctrl+R thinking", busy ? " · Esc interrupt" : ""] })), details && !pending && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [details === "tools" ? "Tool details" : "Thinking", " \u00B7 ", detailView.pages - detailView.page, "/", detailView.pages, " \u00B7 \u2191\u2193 page \u00B7 Esc close", followUps.size ? ` · ${followUps.size} queued` : ""] }), _jsx(Text, { children: detailView.text })] })), selectedAgent && !pending && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "blue", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "cyan", wrap: "truncate-end", children: [selectedAgent.name, " \u00B7 ", selectedAgent.model, " \u00B7 ", selectedAgent.status, " \u00B7 Esc main"] }), _jsxs(Box, { children: [selectedAgent.status === "running" && _jsx(Spinner, {}), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [" ", selectedAgent.activity, " \u00B7 ", selectedAgent.toolCalls, " tools \u00B7 PgUp/PgDn details"] })] }), _jsx(Text, { children: agentDetailView.text })] })), pending?.kind === "select" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: pending.header }), _jsx(Text, { children: renderMenu(pending.options, menuSel) }), _jsx(Text, { children: MENU_HINT })] })), pending?.kind === "form" && formState && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: renderForm(pending.questions, formState) }) })), pending && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Type a follow-up \u00B7 Enter sends text; empty input selects \u00B7 Esc cancels" }), !details && !selectedAgent && !pending && followUps.size > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: rows >= 20 ? 1 : 0, children: [_jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Messages queued for the next tool boundary \u00B7 Esc / Ctrl+Enter interrupt and send" }), followUps.pending.slice(rows >= 20 ? -2 : -1).map((message, i) => _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  \u21B3 ", message.displayText ?? message.text] }, i)), followUps.size > 2 && _jsxs(Text, { dimColor: true, children: ["  \u2026 ", followUps.size - 2, " earlier messages queued"] })] })), _jsx(Box, { borderStyle: "round", borderColor: planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : autoEnabled ? "yellow" : "cyan", paddingX: 1, marginTop: rows >= 20 ? 1 : 0, flexDirection: "column", flexShrink: 0, children: (() => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item, i) => _jsx(ItemView, { item: item }, i) }), _jsxs(Box, { flexDirection: "column", height: !pending && (details || selectedAgent) ? Math.max(1, rows - 1) : undefined, overflow: "hidden", children: [live !== null && !details && !pending && !selectedAgent && (_jsxs(Box, { marginTop: rows >= 20 ? 1 : 0, flexDirection: "row", children: [_jsx(Text, { color: "green", children: "\u23FA " }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: live === "" ? chalk.dim("…") : liveTail(live, rows, columns, followUps.size > 0) }) })] })), activity.map((group, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i === 0 ? 1 : 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: group.failed ? "yellow" : group.running ? "cyan" : "green", children: "\u25CF " }), _jsx(Text, { bold: true, children: group.title })] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  \u23BF ", group.detail] })] }, i))), !details && !pending && !selectedAgent && (status !== null || busy) && (_jsx(Box, { marginTop: rows >= 20 ? 1 : 0, children: _jsx(SpinnerLine, { text: status?.replace("Ctrl+C to interrupt", "Esc to interrupt") ?? (live !== null ? "Writing…" : "Working…") }) })), rows >= 20 && !details && !selectedAgent && !pending && (busy || getToolCallCount() > 0) && (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  ", getToolCallCount(), " tool calls \u00B7 Ctrl+T details \u00B7 Ctrl+R thinking", busy ? " · Esc interrupt" : ""] })), details && !pending && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [details === "tools" ? "Tool details" : "Thinking", " \u00B7 ", detailView.pages - detailView.page, "/", detailView.pages, " \u00B7 \u2191\u2193 page \u00B7 Esc close", followUps.size ? ` · ${followUps.size} queued` : ""] }), _jsx(Text, { children: detailView.text })] })), selectedAgent && !pending && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "blue", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "cyan", wrap: "truncate-end", children: [selectedAgent.name, " \u00B7 ", selectedAgent.model, " \u00B7 ", selectedAgent.status, " \u00B7 Esc main"] }), _jsxs(Box, { children: [selectedAgent.status === "running" && _jsx(Spinner, {}), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [" ", selectedAgent.activity, " \u00B7 ", selectedAgent.toolCalls, " tools \u00B7 PgUp/PgDn details"] })] }), _jsx(Text, { children: agentDetailView.text })] })), pending?.kind === "select" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: pending.header }), pending.body && _jsx(Box, { marginY: 1, children: _jsx(Text, { children: pending.body }) }), _jsx(Text, { children: renderMenu(pending.options, menuSel) }), _jsx(Text, { children: MENU_HINT })] })), pending?.kind === "skills" && (_jsx(SkillsPanel, { skills: everySkill(), maxRows: Math.max(3, rows - 14), onClose: (summary) => { setPending(null); note(chalk.dim(summary)); } })), pending?.kind === "form" && formState && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: renderForm(pending.questions, formState) }) })), pending && pending.kind !== "skills" && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Type a follow-up \u00B7 Enter sends text; empty input selects \u00B7 Esc cancels" }), !details && !selectedAgent && !pending && followUps.size > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: rows >= 20 ? 1 : 0, children: [_jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Messages queued for the next tool boundary \u00B7 Esc / Ctrl+Enter interrupt and send" }), followUps.pending.slice(rows >= 20 ? -2 : -1).map((message, i) => _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  \u21B3 ", message.displayText ?? message.text] }, i)), followUps.size > 2 && _jsxs(Text, { dimColor: true, children: ["  \u2026 ", followUps.size - 2, " earlier messages queued"] })] })), pending?.kind !== "skills" && (_jsx(Box, { borderStyle: "round", borderColor: planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : autoEnabled ? "yellow" : "cyan", paddingX: 1, marginTop: rows >= 20 ? 1 : 0, flexDirection: "column", flexShrink: 0, children: (() => {
                             const prompt = "❯ ";
                             const promptColor = planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : autoEnabled ? "yellow" : "cyan";
                             const cols = columns;
@@ -863,6 +962,7 @@ export function App({ session, runTurn, clipboard }) {
                             const firstW = Math.max(1, innerWidth - promptW);
                             // Build visual lines display-width-aware (CJK, emoji = 2 cols).
                             const lines = [""];
+                            const lineStarts = [0]; // code-unit offset where each visual line begins (for skill highlighting)
                             let row = 0;
                             let col = 0;
                             // Cursor tracking: map code-unit offset → (line, display-column).
@@ -882,6 +982,7 @@ export function App({ session, runTurn, clipboard }) {
                                     row++;
                                     col = 0;
                                     lines[row] = "";
+                                    lineStarts[row] = cu;
                                 }
                                 lines[row] += ch;
                                 col += cw;
@@ -896,9 +997,35 @@ export function App({ session, runTurn, clipboard }) {
                             if (cursorCol >= edge) {
                                 cursorLine++;
                                 cursorCol = 0;
-                                if (lines.length <= cursorLine)
+                                if (lines.length <= cursorLine) {
                                     lines.push("");
+                                    lineStarts.push(cu);
+                                }
                             }
+                            // "/<skill>" tokens anywhere in the draft are painted — the typeahead
+                            // only opens at the start, but a real skill name lights up wherever
+                            // it is. paint() splits a slice of a line into plain and lit runs.
+                            const lit = commandTokenRanges(input, commandNames({ skills: liveSkills() }));
+                            const isLit = (at) => lit.some(([a, b]) => at >= a && at < b);
+                            const paint = (text, from, keyBase) => {
+                                const runs = [];
+                                let run = "";
+                                let runLit = false;
+                                let at = from;
+                                const flush = () => { if (run)
+                                    runs.push(_jsx(Text, { color: runLit ? SKILL_COLOR : undefined, children: run }, `${keyBase}${runs.length}`)); run = ""; };
+                                for (const ch of text) {
+                                    const l = isLit(at);
+                                    if (l !== runLit) {
+                                        flush();
+                                        runLit = l;
+                                    }
+                                    run += ch;
+                                    at += ch.length;
+                                }
+                                flush();
+                                return runs;
+                            };
                             // Map display-column back to code-unit offset within the target line.
                             const cursorLineText = lines[cursorLine] ?? "";
                             let cuOff = 0; // code-unit offset into cursorLineText that matches cursorCol
@@ -919,9 +1046,10 @@ export function App({ session, runTurn, clipboard }) {
                                     const before = line.slice(0, cuOff);
                                     const at = line.slice(cuOff, cuOff + 1) || " ";
                                     const after = line.slice(cuOff + 1);
-                                    return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: before }), _jsx(Text, { inverse: true, children: at }), _jsx(Text, { children: after })] }, i));
+                                    const base = lineStarts[i] ?? 0;
+                                    return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: paint(before, base, "b") }), _jsx(Text, { inverse: true, color: isLit(base + cuOff) ? SKILL_COLOR : undefined, children: ghost ? ghost.suffix[0] : at }), _jsx(Text, { children: paint(after, base + cuOff + at.length, "a") }), ghost && _jsx(Text, { dimColor: true, children: ghost.suffix.slice(1) })] }, i));
                                 }
-                                return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: line })] }, i));
+                                return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: paint(line, lineStarts[i] ?? 0, "l") })] }, i));
                             });
-                        })() }), completion.view, rows >= 20 && busy && !details && !selectedAgent && !pending && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Enter queue follow-up \u00B7 Ctrl+Enter interrupt and send now" }), rows >= 20 && !details && !selectedAgent && !pending && !completion.visible && _jsx(AgentList, { agents: agents, focus: subAgentFocus, viewing: subAgentDetail, mainBusy: busy, maxRows: Math.max(2, Math.min(3, rows - 24)) }), _jsx(StatusBar, { model: CONFIG.model, dir: dir, branch: branch, status: getStatus() }), (planMode || autoEnabled || CONFIG.bypassPermissions) && (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : "yellow", children: planMode ? "⏸ plan mode on" : CONFIG.bypassPermissions ? "▶▶ bypass permissions on" : "▶▶ auto mode on" }), _jsx(Text, { dimColor: true, children: planMode ? " (/plan to toggle)" : CONFIG.bypassPermissions ? " (this run)" : " (/auto to toggle)" })] }))] })] }));
+                        })() })), completion.view, rows >= 20 && busy && !details && !selectedAgent && !pending && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Enter queue follow-up \u00B7 Ctrl+Enter interrupt and send now" }), rows >= 20 && !details && !selectedAgent && !pending && !completion.visible && _jsx(AgentList, { agents: agents, focus: subAgentFocus, viewing: subAgentDetail, mainBusy: busy, maxRows: Math.max(2, Math.min(3, rows - 24)) }), _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, children: _jsx(StatusBar, { model: CONFIG.model, dir: dir, branch: branch, status: getStatus() }) }), _jsx(McpBadge, {})] }), (planMode || autoEnabled || CONFIG.bypassPermissions) && (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : "yellow", children: planMode ? "⏸ plan mode on" : CONFIG.bypassPermissions ? "▶▶ bypass permissions on" : "▶▶ auto mode on" }), _jsx(Text, { dimColor: true, children: planMode ? " (/plan to toggle)" : CONFIG.bypassPermissions ? " (this run)" : " (/auto to toggle)" })] }))] })] }));
 }

package/dist/ink/chat.js

@@ -8,11 +8,13 @@ import { userContent } from "../images.js";
 // rest. All screen output flows through hooks.output (the Ink sink).
 export function makeRunTurn(client, messages) {
     let reviewBudget = new AutoReviewBudget();
+    // input: one user message, or several in order (a /skill run sends the
+    // <command-name> marker, then the skill body); images ride on the first.
     return async (input, hooks) => {
         if (input !== null)
             reviewBudget = new AutoReviewBudget();
         if (input !== null)
-            messages.push({ role: "user", content: userContent(input, hooks.images ?? []) });
+            [input].flat().forEach((text, i) => messages.push({ role: "user", content: i === 0 ? userContent(text, hooks.images ?? []) : text }));
         return runLoop(messages, {
             client,
             model: CONFIG.model,

package/dist/ink/commands.js

@@ -25,7 +25,8 @@ export const SESSION_HELP = `commands:
   /memory    show the durable facts the agent remembers about this project
   /status    session usage and vendor account balance/cost
   /cost      tokens, cache hit rate and estimated spend this session (local)
-  /mcp       list configured MCP servers + status; select one to authenticate / reconnect / disable
+  /mcp       list configured MCP servers + status; select one to view tools / authenticate / clear auth / reconnect / disable
+  /mcp reload  re-read mcpServers from settings.json (saves are also picked up automatically)
   /plan      toggle plan mode — research-only; the agent presents a plan you approve before any change
   /effort [level]  list/select the current model’s supported reasoning effort
   /auto      toggle auto mode — risky or uncertain actions still require approval
@@ -38,8 +39,8 @@ export const SESSION_HELP = `commands:
   /undo      revert the most recent file write (write_file / edit_file) this session
   /diff      show every file changed this session, as a diff from where it started
   /resume    list recent sessions in this project and continue one of them
-  /skills    list the reusable skills available in this project
-  /skill <name>  run a skill yourself (works even for user-only skills)
+  /skills    manage skills: turn each on, off, or user-only (search with /, sort with t)
+  /skill <name> [args]  run a skill yourself (works even for user-only skills); /<name> [args] works too
   exit       leave (Ctrl+C does the same)
 
 keys (during or after a turn):
@@ -57,6 +58,8 @@ keys (during or after a turn):
 // Colored status word for an MCP server (shared by the Ink + readline /mcp UIs).
 export function mcpStatusText(info) {
     switch (info.status) {
+        case "pending":
+            return chalk.dim("connecting…");
         case "connected":
             return chalk.green("connected");
         case "needs-auth":

package/dist/ink/completion.js

@@ -1,18 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Box, Text } from "ink";
 import { slashCompletions } from "../completion.js";
 // Keep the full list in state, but render only a window around the selection.
 // Long lists must never grow Ink's redraw region beyond the terminal height.
-export function useSlashCompletion(input, enabled, context, maxRows) {
+export function useSlashCompletion(input, enabled, context, maxRows, columns = 80) {
     const [selection, setSelection] = useState({ input: "", index: 0 });
     const [dismissed, setDismissed] = useState(null);
     useEffect(() => { setDismissed(null); }, [input]);
     const menu = enabled && dismissed !== input ? slashCompletions(input, context) : null;
     const items = menu?.items ?? [];
     const selected = Math.min(selection.input === input ? selection.index : 0, Math.max(0, items.length - 1));
-    const count = Math.max(1, Math.min(8, maxRows));
+    const count = Math.max(1, Math.min(6, maxRows)); // Claude Code shows at most 6, centred on the selection
     const start = Math.max(0, Math.min(selected - Math.floor(count / 2), items.length - count));
+    const nameWidth = Math.min(Math.max(0, ...items.map((item) => item.value.length)) + 2, Math.floor(columns * 0.4));
     return {
         visible: menu !== null,
         handleKey: (key, replace) => {
@@ -30,14 +31,21 @@ export function useSlashCompletion(input, enabled, context, maxRows) {
             }
             if (key.tab || (key.return && !key.ctrl && !key.meta)) {
                 const item = items[selected];
+                // Tab always just fills it in. Enter runs it — unless it takes
+                // arguments (a skill with `arguments`, or a command with sub-choices),
+                // then it fills "/name " so you can type them. (Claude Code's rule.)
                 if (key.tab || item.children)
-                    replace(item.value + (item.children ? " " : ""));
+                    replace(item.value + " ");
                 else
                     return { handled: true, submit: item.value };
                 return { handled: true };
             }
             return { handled: false };
         },
-        view: menu && (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [items.slice(start, start + count).map((item, i) => (_jsxs(Text, { color: start + i === selected ? "cyan" : undefined, bold: start + i === selected, wrap: "truncate-end", children: [start + i === selected ? "› " : "  ", item.value, "  ", _jsx(Text, { dimColor: true, children: item.description.replace(/\s+/g, " ") })] }, item.value))), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: items.length ? `↑↓ choose · Tab complete · Enter select · Esc close · ${selected + 1}/${items.length}` : menu.hint || "No matching commands" })] })),
+        view: menu && (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [items.slice(start, start + count).map((item, i) => {
+                    const on = start + i === selected;
+                    // Names in one column (at most 40% of the width); the description is one line, cut to fit.
+                    return (_jsxs(Text, { color: on ? "#B1B9F9" : undefined, dimColor: !on, wrap: "truncate-end", children: [on ? "› " : "  ", item.value.padEnd(nameWidth), item.description.replace(/\s+/g, " ")] }, item.value));
+                }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: items.length ? `↑↓ choose · Tab complete · Enter select · Esc close · ${selected + 1}/${items.length}` : menu.hint || "No matching commands" })] })),
     };
 }

package/dist/ink/setup.js

@@ -3,18 +3,18 @@ import path from "node:path";
 import { createRequire } from "node:module";
 import { CONFIG, requireApiKey } from "../config.js";
 import { buildSystemMessage, readProjectInstructions } from "../prompt.js";
-import { estimateHistoryTokens } from "../context.js";
+import { contextPercent } from "../context.js";
 import { initCostMeter, DEFAULT_PRICING } from "../cost.js";
 import { gitBranch } from "../tui.js";
 import { newSessionId, latestSession } from "../session.js";
 import { initTelemetry, emit } from "../telemetry.js";
 import { runHooks } from "../hooks.js";
-import { connectMcpServers } from "../mcp.js";
+import { connectMcpServers, watchMcpConfig } from "../mcp.js";
 import { Judge } from "../judge.js";
 import { AutoMode } from "../auto.js";
 import { registerExternalTool } from "../tools.js";
 import { rememberTool, readMemory } from "../memory.js";
-import { loadSkills, buildSkillTool } from "../skills.js";
+import { allSkills, currentSkills } from "../skills.js";
 import { killAllBackground } from "../background.js";
 import { killAllSubAgents } from "../loop.js";
 import { loadDurableJobs, startCronScheduler, stopCronScheduler, listJobs } from "../cron.js"; // cron scheduler (Day s14)
@@ -52,10 +52,12 @@ export async function buildInkSession(opts = {}) {
     }
     initTelemetry(sessionId);
     emit("agent_session_start", { mode: "repl" });
-    // MCP servers — must finish before the first model call so their tools appear
-    // in the manual. A server that fails to start is skipped, never fatal.
-    const disconnectMcp = await connectMcpServers();
+    // MCP servers connect in the BACKGROUND, like Claude Code: the prompt is
+    // ready at once, each server's tools join the next model call the moment it
+    // connects, and a failure is flagged in the status bar (red, bottom right).
+    const disconnectMcp = await connectMcpServers({ background: true });
     process.on("exit", disconnectMcp);
+    process.on("exit", watchMcpConfig()); // hot reload: a settings.json save adds/removes/reconnects servers, no restart
     process.on("exit", killAllBackground); // SIGKILL any background job so it never outlives the agent
     process.on("exit", killAllSubAgents); // mark any still-running sub-agents as killed
     process.on("exit", stopCronScheduler); // Day s14: stop the setInterval on exit
@@ -75,13 +77,11 @@ export async function buildInkSession(opts = {}) {
     const memCount = readMemory().length;
     if (memCount)
         notices.push(`(long-term memory: ${memCount} facts loaded)`);
-    // Skills: model-invocable ones get the single `skill` tool; user-only ones are
-    // reachable via /skill <name>.
-    const skills = loadSkills();
-    if (skills.some((s) => !s.disableModelInvocation))
-        registerExternalTool(buildSkillTool(skills));
-    if (skills.length)
-        notices.push(`(skills: ${skills.length} loaded — ${skills.map((s) => s.name).join(", ")})`);
+    // Skills are re-read before every model call (no restart needed); the loop
+    // registers the `skill` tool and sends the listing. Just announce them here.
+    const startupSkills = currentSkills();
+    if (startupSkills.length)
+        notices.push(`(skills: ${startupSkills.length} loaded — ${startupSkills.map((s) => s.name).join(", ")})`);
     const costMeter = initCostMeter({
         inputPerM: CONFIG.pricing.inputPerM ?? DEFAULT_PRICING.inputPerM,
         cachedInputPerM: CONFIG.pricing.cachedInputPerM ?? DEFAULT_PRICING.cachedInputPerM,
@@ -94,7 +94,7 @@ export async function buildInkSession(opts = {}) {
     const dir = path.basename(process.cwd());
     const branch = gitBranch();
     const getStatus = () => ({
-        ctxPct: Math.min(100, Math.round((estimateHistoryTokens(messages) / CONFIG.contextWindow) * 100)),
+        ctxPct: contextPercent(messages), // % of the way to auto-compaction
         cost: costMeter.cost(),
         elapsedMs: Date.now() - startedAt,
     });
@@ -106,7 +106,8 @@ export async function buildInkSession(opts = {}) {
         initialTitle,
         startedAt,
         costMeter,
-        skills,
+        skills: () => currentSkills(),
+        allSkills: () => allSkills(),
         judge,
         autoMode,
         model: CONFIG.model,