@scira/cli 0.1.0 → 0.1.1

package/dist/ui/ink/hooks/use-feed-lines.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Text } from "ink";
-import { S_BAR, TOOL_ICONS, USER_BAND_BG, SPINNER_FRAMES } from "../constants.js";
+import { S_BAR, TOOL_ICONS, SPINNER_FRAMES } from "../constants.js";
 import { formatTime, fmtDuration, wrapText, hyperlink, displayWidth } from "../lib/utils.js";
+import { formatToolResultLines, formatToolResultPreview, feedToolItemId, isCollapsibleToolName, isToolItemCollapsed, } from "../lib/tool-result.js";
 import { markdownToSegLines } from "../lib/markdown.js";
+import { useTheme } from "./use-theme.js";
 export function computeGroups(feed) {
     const groupOf = new Array(feed.length).fill(-1);
     const groups = new Map();
@@ -13,7 +15,7 @@ export function computeGroups(feed) {
         if (k === "tool" || k === "reasoning") {
             if (gs === -1) {
                 gs = i;
-                groups.set(gs, { toolNames: [], itemCount: 0, active: false, end: i });
+                groups.set(gs, { stepLabels: [], itemCount: 0, active: false, end: i });
             }
             const g = groups.get(gs);
             g.end = i;
@@ -21,12 +23,12 @@ export function computeGroups(feed) {
             groupOf[i] = gs;
             if (k === "tool") {
                 const it = feed[i];
-                if (!g.toolNames.includes(it.name))
-                    g.toolNames.push(it.name);
+                g.stepLabels.push(it.name);
                 if (it.status === "running")
                     g.active = true;
             }
             else {
+                g.stepLabels.push("thinking");
                 const it = feed[i];
                 if (it.durationMs === undefined)
                     g.active = true;
@@ -38,12 +40,16 @@ export function computeGroups(feed) {
     }
     return { groupOf, groups };
 }
-const isGH = (item) => "_tag" in item;
+const isGH = (item) => item._tag === "gh";
 export function useFeedLines(feed, innerWidth, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey) {
+reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState, hoveredLineIdx, config) {
+    const theme = useTheme();
     return useMemo(() => {
+        const bandBg = theme.userBandBackground ? { backgroundColor: theme.userBandBackground } : {};
         const lines = [];
+        const toggleAtLine = new Map();
+        const groupToggleAtLine = new Map();
         let key = 0;
         const { groupOf, groups } = computeGroups(feed);
         const eff = [];
@@ -55,18 +61,18 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey) {
                 if (gs === i) {
                     eff.push({ _tag: "gh", info, key: gs, collapsed, focused: focusedGroupKey === gs });
                     if (!collapsed)
-                        eff.push(feed[i]);
+                        eff.push({ _tag: "fi", idx: i, item: feed[i] });
                 }
                 else if (!collapsed) {
-                    eff.push(feed[i]);
+                    eff.push({ _tag: "fi", idx: i, item: feed[i] });
                 }
             }
             else {
-                eff.push(feed[i]);
+                eff.push({ _tag: "fi", idx: i, item: feed[i] });
             }
         }
         eff.forEach((item, ei) => {
-            const currKind = isGH(item) ? "gh" : item.kind;
+            const currKind = isGH(item) ? "gh" : item.item.kind;
             if (ei === 0 && currKind === "user") {
                 lines.push(_jsx(Text, { children: " " }, key++));
             }
@@ -74,13 +80,13 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey) {
                 const prev = eff[ei - 1];
                 const prevGH = isGH(prev);
                 const currGH = isGH(item);
-                const prevKind = prevGH ? "gh" : prev.kind;
-                const currKind = currGH ? "gh" : item.kind;
+                const prevKind = prevGH ? "gh" : prev.item.kind;
+                const currKind = currGH ? "gh" : item.item.kind;
                 const prevTool = prevKind === "tool" || prevKind === "reasoning";
                 const currTool = currKind === "tool" || currKind === "reasoning";
                 if (currKind === "gh") {
                     if (prevTool) {
-                        lines.push(_jsx(Text, { color: "gray", dimColor: true, children: S_BAR }, key++));
+                        lines.push(_jsx(Text, { color: theme.textDim, children: S_BAR }, key++));
                         lines.push(_jsx(Text, { children: " " }, key++));
                     }
                     else if (prevKind !== "gh") {
@@ -95,7 +101,7 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey) {
                 }
                 else if (prevTool && currTool) {
                     if (!(prevKind === "reasoning" && currKind === "reasoning")) {
-                        lines.push(_jsx(Text, { color: "gray", dimColor: true, children: S_BAR }, key++));
+                        lines.push(_jsx(Text, { color: theme.textDim, children: S_BAR }, key++));
                     }
                 }
                 else if (prevTool) {
@@ -118,25 +124,45 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey) {
                 }
             }
             if (isGH(item)) {
-                const { info, collapsed, focused } = item;
+                const { info, collapsed, focused, key: groupKey } = item;
+                const headerLineIdx = lines.length;
+                const hovered = hoveredLineIdx === headerLineIdx;
+                if (!info.active)
+                    groupToggleAtLine.set(headerLineIdx, groupKey);
                 const icon = info.active ? "◎" : collapsed ? "▶" : "▼";
-                const hc = focused ? "#FFE0C2" : "gray";
-                const names = info.toolNames.slice(0, 5).join(", ") + (info.toolNames.length > 5 ? ", …" : "");
-                lines.push(_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: info.active ? "#FFE0C2" : hc, bold: info.active || focused, children: [icon, " "] }), _jsxs(Text, { color: info.active ? "white" : hc, bold: info.active || focused, dimColor: !info.active && !focused, children: [info.itemCount, " step", info.itemCount !== 1 ? "s" : ""] }), (collapsed || info.active) && names ? (_jsxs(Text, { color: "gray", dimColor: true, children: ["  ", names] })) : null, focused && !collapsed && !info.active ? (_jsx(Text, { color: "gray", dimColor: true, children: "  [c] collapse · [esc] unfocus" })) : null] }, key++));
+                const hc = focused || hovered ? theme.accent : theme.textDim;
+                const labels = info.stepLabels.slice(0, 6).join(", ") + (info.stepLabels.length > 6 ? ", …" : "");
+                lines.push(_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: info.active ? theme.accent : hc, bold: info.active || focused || hovered, children: [icon, " "] }), _jsxs(Text, { color: info.active ? theme.text : hc, bold: info.active || focused || hovered, children: [info.itemCount, " step", info.itemCount !== 1 ? "s" : ""] }), (collapsed || info.active) && labels ? (_jsxs(Text, { color: theme.textDim, children: ["  ", labels] })) : null, focused && !collapsed && !info.active ? (_jsx(Text, { color: theme.textDim, children: "  [c] collapse · [esc] unfocus" })) : null] }, key++));
                 return;
             }
-            const fi = item;
+            const fi = item.item;
+            const feedIdx = item.idx;
             if (fi.kind === "tool") {
-                const toolIcon = fi.status === "running"
+                const running = fi.status === "running";
+                const failed = fi.status === "error";
+                const itemId = feedToolItemId(feedIdx, fi.toolCallId);
+                const collapsible = isCollapsibleToolName(fi.name) && !running;
+                const collapsed = collapsible && isToolItemCollapsed(itemId, fi.name, fi.status, itemExpandState);
+                const headerLineIdx = lines.length;
+                const hovered = hoveredLineIdx === headerLineIdx;
+                const toolIcon = running
                     ? SPINNER_FRAMES[spinnerFrame % SPINNER_FRAMES.length]
                     : TOOL_ICONS[fi.name] ?? "·";
-                const symColor = "#CFB59D";
-                const nameColor = fi.status === "running" ? "white" : "gray";
-                const summaryLine = fi.summary.replace(/\s+/gu, " ").trim();
-                const toolSummary = summaryLine.length > innerWidth - fi.name.length - 6
-                    ? summaryLine.slice(0, Math.max(0, innerWidth - fi.name.length - 7)) + "…"
-                    : summaryLine;
-                lines.push(_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: symColor, bold: fi.status === "running", children: toolIcon }), _jsxs(Text, { color: nameColor, bold: fi.status === "running", dimColor: fi.status === "done", children: [" ", fi.name] }), _jsxs(Text, { color: "gray", dimColor: true, children: ["  ", toolSummary] })] }, key++));
+                const symColor = failed ? theme.error : theme.accentDim;
+                const nameColor = running ? theme.text : failed ? theme.error : theme.textDim;
+                const panelWidth = innerWidth - 4;
+                const preview = formatToolResultPreview(fi.name, fi.summary, fi.result, fi.status);
+                const bodyLines = formatToolResultLines(fi.name, fi.summary, fi.result, fi.status, panelWidth, theme, !collapsed);
+                if (collapsible)
+                    toggleAtLine.set(headerLineIdx, itemId);
+                lines.push(_jsxs(Text, { wrap: "truncate", children: [collapsible ? (_jsx(Text, { color: hovered ? theme.accent : theme.textDim, bold: hovered, children: collapsed ? "▶ " : "▼ " })) : null, _jsx(Text, { color: symColor, bold: running, children: toolIcon }), _jsxs(Text, { color: nameColor, bold: running || failed || hovered, children: [" ", fi.name] }), failed ? _jsx(Text, { color: theme.error, children: " failed" }) : null, running ? _jsx(Text, { color: theme.textDim, children: " \u2026" }) : null, !running && !failed && collapsed && preview ? (_jsxs(Text, { color: theme.textDim, children: ["  ", preview] })) : null] }, key++));
+                for (const row of bodyLines) {
+                    if (row.length === 0) {
+                        lines.push(_jsx(Text, { color: theme.textDim, children: S_BAR }, key++));
+                        continue;
+                    }
+                    lines.push(_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: theme.textDim, children: [S_BAR, " "] }), row.map((s, i) => (_jsx(Text, { color: s.color ?? theme.textDim, bold: s.bold, italic: s.italic, underline: s.underline, dimColor: s.dim, children: hyperlink(s.text, s.url) }, i)))] }, key++));
+                }
             }
             else if (fi.kind === "user") {
                 const bandW = innerWidth;
@@ -144,43 +170,43 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey) {
                 const rightPad = time ? time.length + 1 : 0;
                 const wrapped = wrapText(fi.text, Math.max(10, bandW - 4 - rightPad));
                 const blank = " ".repeat(bandW);
-                lines.push(_jsx(Text, { backgroundColor: USER_BAND_BG, children: blank }, key++));
+                lines.push(_jsx(Text, { ...bandBg, children: blank }, key++));
                 wrapped.forEach((l, idx) => {
                     const isFirst = idx === 0;
                     const prefix = isFirst ? "  ❯ " : "    ";
                     const left = prefix + l;
                     const pad = Math.max(1, bandW - displayWidth(left) - (isFirst ? rightPad : 0));
-                    lines.push(_jsxs(Text, { backgroundColor: USER_BAND_BG, wrap: "truncate", children: [_jsx(Text, { color: isFirst ? "#FFE0C2" : "white", children: prefix }), _jsx(Text, { color: "white", children: l }), _jsx(Text, { children: " ".repeat(pad) }), isFirst && time ? _jsx(Text, { color: "gray", dimColor: true, children: time + " " }) : null] }, key++));
+                    lines.push(_jsxs(Text, { ...bandBg, wrap: "truncate", children: [_jsx(Text, { color: isFirst ? theme.accent : theme.text, children: prefix }), _jsx(Text, { color: theme.text, children: l }), _jsx(Text, { children: " ".repeat(pad) }), isFirst && time ? _jsx(Text, { color: theme.textDim, children: time + " " }) : null] }, key++));
                 });
-                lines.push(_jsx(Text, { backgroundColor: USER_BAND_BG, children: blank }, key++));
+                lines.push(_jsx(Text, { ...bandBg, children: blank }, key++));
             }
             else if (fi.kind === "status") {
-                lines.push(_jsxs(Text, { color: "gray", dimColor: true, wrap: "truncate", children: ["  · ", fi.text] }, key++));
+                lines.push(_jsxs(Text, { color: theme.textDim, wrap: "truncate", children: ["  · ", fi.text] }, key++));
             }
             else if (fi.kind === "reasoning") {
                 const isOpen = fi.durationMs === undefined;
                 const elapsedMs = fi.durationMs ?? (fi.startedAt ? Date.now() - fi.startedAt : 0);
                 const titleText = isOpen ? `Thinking… ${fmtDuration(elapsedMs)}` : `Thought for ${fmtDuration(elapsedMs)}`;
-                lines.push(_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "gray", dimColor: true, children: "\u25CC " }), _jsx(Text, { color: "gray", bold: isOpen, dimColor: !isOpen, children: titleText })] }, key++));
-                for (const segLine of markdownToSegLines(fi.text, innerWidth - 4)) {
+                lines.push(_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: theme.textDim, children: "\u25CC " }), _jsx(Text, { color: theme.textDim, bold: isOpen, children: titleText })] }, key++));
+                for (const segLine of markdownToSegLines(fi.text, innerWidth - 4, theme)) {
                     if (segLine.length === 0) {
-                        lines.push(_jsx(Text, { color: "gray", dimColor: true, children: S_BAR }, key++));
+                        lines.push(_jsx(Text, { color: theme.textDim, children: S_BAR }, key++));
                         continue;
                     }
-                    lines.push(_jsxs(Text, { color: "gray", dimColor: true, italic: true, wrap: "truncate-end", children: [_jsx(Text, { color: "gray", dimColor: true, children: "│ " }), segLine.map((s, i) => (_jsx(Text, { color: "gray", bold: s.bold, italic: s.italic ?? true, underline: s.underline, dimColor: true, children: hyperlink(s.text, s.url) }, i)))] }, key++));
+                    lines.push(_jsxs(Text, { color: theme.textDim, italic: true, wrap: "truncate-end", children: [_jsx(Text, { color: theme.textDim, children: "│ " }), segLine.map((s, i) => (_jsx(Text, { color: theme.textDim, bold: s.bold, italic: s.italic ?? true, underline: s.underline, children: hyperlink(s.text, s.url) }, i)))] }, key++));
                 }
             }
             else {
-                for (const segLine of markdownToSegLines(fi.text, innerWidth - 2)) {
+                for (const segLine of markdownToSegLines(fi.text, innerWidth - 2, theme)) {
                     if (segLine.length === 0) {
                         lines.push(_jsx(Text, { children: " " }, key++));
                         continue;
                     }
-                    lines.push(_jsx(Text, { wrap: "truncate-end", children: segLine.map((s, i) => (_jsx(Text, { color: s.color ?? "white", bold: s.bold, italic: s.italic, underline: s.underline, dimColor: s.dim, children: hyperlink(s.text, s.url) }, i))) }, key++));
+                    lines.push(_jsx(Text, { wrap: "truncate-end", children: segLine.map((s, i) => (_jsx(Text, { color: s.color ?? theme.text, bold: s.bold, italic: s.italic, underline: s.underline, dimColor: s.dim, children: hyperlink(s.text, s.url) }, i))) }, key++));
                 }
             }
         });
-        return lines;
+        return { lines, toggleAtLine, groupToggleAtLine };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [feed, innerWidth, reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey]);
+    }, [feed, innerWidth, reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState, hoveredLineIdx, config, theme]);
 }

package/dist/ui/ink/hooks/use-feed-lines.test.js

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { computeGroups } from "./use-feed-lines.js";
+describe("computeGroups", () => {
+    it("lists thinking and tools in step order", () => {
+        const feed = [
+            { kind: "reasoning", text: "plan", durationMs: 100 },
+            { kind: "tool", name: "webSearch", summary: "q", status: "done" },
+            { kind: "reasoning", text: "read", durationMs: 50 },
+            { kind: "tool", name: "readUrl", summary: "url", status: "done" },
+        ];
+        const { groups } = computeGroups(feed);
+        const g = groups.get(0);
+        expect(g?.stepLabels).toEqual(["thinking", "webSearch", "thinking", "readUrl"]);
+        expect(g?.itemCount).toBe(4);
+    });
+});

package/dist/ui/ink/hooks/use-feed.js

@@ -2,11 +2,17 @@ import { useCallback, useRef, useState } from "react";
 export function useFeed() {
     const [feed, setFeed] = useState([]);
     const feedRef = useRef([]);
-    const pushFeed = useCallback((item) => {
-        setFeed((f) => { const next = [...f, item]; feedRef.current = next; return next; });
+    /** Keep feedRef in sync immediately so convo.json saves never read stale React state. */
+    const applyFeed = useCallback((update) => {
+        const next = update(feedRef.current);
+        feedRef.current = next;
+        setFeed(next);
     }, []);
+    const pushFeed = useCallback((item) => {
+        applyFeed((f) => [...f, item]);
+    }, [applyFeed]);
     const appendText = useCallback((delta) => {
-        setFeed((f) => {
+        applyFeed((f) => {
             const next = [...f];
             const last = next.at(-1);
             if (last?.kind === "text") {
@@ -15,12 +21,11 @@ export function useFeed() {
             else {
                 next.push({ kind: "text", text: delta });
             }
-            feedRef.current = next;
             return next;
         });
-    }, []);
+    }, [applyFeed]);
     const appendReasoning = useCallback((delta) => {
-        setFeed((f) => {
+        applyFeed((f) => {
             const next = [...f];
             const last = next.at(-1);
             if (last?.kind === "reasoning" && last.durationMs === undefined) {
@@ -29,12 +34,11 @@ export function useFeed() {
             else {
                 next.push({ kind: "reasoning", text: delta, startedAt: Date.now() });
             }
-            feedRef.current = next;
             return next;
         });
-    }, []);
+    }, [applyFeed]);
     const finishReasoning = useCallback(() => {
-        setFeed((f) => {
+        applyFeed((f) => {
             let changed = false;
             const ended = Date.now();
             const next = f.map((it) => {
@@ -45,25 +49,21 @@ export function useFeed() {
                 }
                 return it;
             });
-            if (!changed)
-                return f;
-            feedRef.current = next;
-            return next;
+            return changed ? next : f;
         });
-    }, []);
+    }, [applyFeed]);
     const markToolDone = useCallback((toolCallId, status, result) => {
-        setFeed((f) => {
+        applyFeed((f) => {
             const next = [...f];
             for (let i = next.length - 1; i >= 0; i--) {
                 const item = next[i];
                 if (item.kind === "tool" && item.status === "running" && (item.toolCallId === toolCallId || !toolCallId)) {
-                    next[i] = { ...item, status, result };
+                    next[i] = { ...item, status, result: result ?? item.result };
                     break;
                 }
             }
-            feedRef.current = next;
             return next;
         });
-    }, []);
+    }, [applyFeed]);
     return { feed, setFeed, feedRef, pushFeed, appendText, appendReasoning, finishReasoning, markToolDone };
 }

package/dist/ui/ink/hooks/use-keyboard.js

@@ -1,9 +1,17 @@
 import { useRef } from "react";
 import { useInput } from "ink";
+import { COMMANDS_NEEDING_ARGS } from "../constants.js";
+function completeCommandWithArgSuffix(selected, inputText, acceptActiveSuggestion) {
+    if (COMMANDS_NEEDING_ARGS.has(selected) && inputText.trim() === selected) {
+        acceptActiveSuggestion(`${selected} `);
+        return true;
+    }
+    return false;
+}
 export function useKeyboard(o) {
     const { screen, setNotice, exit } = o;
     const { text: inputText, setText: setInputText, cursorPos, setCursorPos, history: inputHistory, historyIndex, setHistoryIndex } = o.input;
-    const { approvalPending, setApprovalPending, menu, setMenu, applyMenuSelection, helpOpen, setHelpOpen, mcpOpen, setMcpOpen } = o.dialogs;
+    const { approvalPending, setApprovalPending, menu, setMenu, applyMenuSelection, helpOpen, setHelpOpen, mcpOpen, setMcpOpen, mcpRowIdx, setMcpRowIdx, mcpRowCount, toggleMcpRow, removeMcpRow, } = o.dialogs;
     const { activeSuggestions, activeSuggestionKind, commandMenuIndex, setCommandMenuIndex, acceptActiveSuggestion } = o.suggestions;
     const { setScrollOffset, contentRows, maxScrollOffset, pendingRerun, setPendingRerun, busy, stopTurn, submitChat, toggleAllGroups, toggleFocusedGroup, focusPrevGroup, focusNextGroup, unfocusGroup, hasFocusedGroup } = o.chat;
     const { sessionsModalOpen, setSessionsModalOpen, sessionsModalIdx, setSessionsModalIdx, sessions, deleteSession, selectedIdx, setSelectedIdx, setHeroHidden, openRun, submitHome } = o.home;
@@ -139,8 +147,26 @@ export function useKeyboard(o) {
             return;
         }
         if (mcpOpen) {
-            if (key.escape || key.return || char === "q")
+            if (key.escape || char === "q") {
                 setMcpOpen(false);
+                return;
+            }
+            if (key.upArrow) {
+                setMcpRowIdx((i) => Math.max(0, i - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setMcpRowIdx((i) => Math.min(mcpRowCount - 1, i + 1));
+                return;
+            }
+            if (char === " " || key.return) {
+                toggleMcpRow(mcpRowIdx);
+                return;
+            }
+            if (char === "x" || char === "X") {
+                removeMcpRow(mcpRowIdx);
+                return;
+            }
             return;
         }
         if (screen === "chat" && busy && key.escape) {
@@ -243,7 +269,10 @@ export function useKeyboard(o) {
                 setSelectedIdx((i) => Math.min(maxHomeIdx, i + 1));
             else if (key.return) {
                 if (activeSuggestions.length > 0 && activeSuggestionKind === "command" && inputText.trim().startsWith("/")) {
-                    void submitHome(activeSuggestions[Math.min(commandMenuIndex, activeSuggestions.length - 1)] ?? inputText);
+                    const selected = activeSuggestions[Math.min(commandMenuIndex, activeSuggestions.length - 1)] ?? inputText;
+                    if (completeCommandWithArgSuffix(selected, inputText, acceptActiveSuggestion))
+                        return;
+                    void submitHome(selected);
                 }
                 else if (activeSuggestions.length > 0 && activeSuggestionKind === "file") {
                     acceptActiveSuggestion(activeSuggestions[Math.min(commandMenuIndex, activeSuggestions.length - 1)] ?? inputText);
@@ -296,7 +325,10 @@ export function useKeyboard(o) {
             }
             if (key.return) {
                 if (activeSuggestions.length > 0 && activeSuggestionKind === "command" && inputText.trim().startsWith("/")) {
-                    submitChat(activeSuggestions[Math.min(commandMenuIndex, activeSuggestions.length - 1)] ?? inputText);
+                    const selected = activeSuggestions[Math.min(commandMenuIndex, activeSuggestions.length - 1)] ?? inputText;
+                    if (completeCommandWithArgSuffix(selected, inputText, acceptActiveSuggestion))
+                        return;
+                    submitChat(selected);
                 }
                 else if (activeSuggestions.length > 0 && activeSuggestionKind === "file") {
                     acceptActiveSuggestion(activeSuggestions[Math.min(commandMenuIndex, activeSuggestions.length - 1)] ?? inputText);

package/dist/ui/ink/hooks/use-mcp-actions.js

@@ -0,0 +1,44 @@
+import { useCallback } from "react";
+import { saveGlobalMcpConfig } from "../../../config/load-config.js";
+export function useMcpActions(config, setConfig, notify) {
+    const toggleMcp = useCallback(async (target) => {
+        if (target.kind === "devtools") {
+            const dt = config.mcp.chromeDevtools;
+            const enabled = !dt.enabled;
+            const next = {
+                ...config,
+                mcp: { ...config.mcp, chromeDevtools: { ...dt, enabled } },
+            };
+            setConfig(next);
+            await saveGlobalMcpConfig(next.mcp);
+            notify(`chromeDevtools ${enabled ? "enabled" : "disabled"}.`);
+            return;
+        }
+        const idx = config.mcp.servers.findIndex((s) => s.name === target.name);
+        if (idx === -1)
+            return;
+        const enabled = !config.mcp.servers[idx].enabled;
+        const next = {
+            ...config,
+            mcp: {
+                ...config.mcp,
+                servers: config.mcp.servers.map((s, i) => (i === idx ? { ...s, enabled } : s)),
+            },
+        };
+        setConfig(next);
+        await saveGlobalMcpConfig(next.mcp);
+        notify(`"${target.name}" ${enabled ? "enabled" : "disabled"}.`);
+    }, [config, notify, setConfig]);
+    const removeMcp = useCallback(async (name) => {
+        if (!config.mcp.servers.some((s) => s.name === name))
+            return;
+        const next = {
+            ...config,
+            mcp: { ...config.mcp, servers: config.mcp.servers.filter((s) => s.name !== name) },
+        };
+        setConfig(next);
+        await saveGlobalMcpConfig(next.mcp);
+        notify(`Removed MCP server "${name}".`);
+    }, [config, notify, setConfig]);
+    return { toggleMcp, removeMcp };
+}

package/dist/ui/ink/hooks/use-mouse.js

@@ -25,7 +25,7 @@ export function useMouse(onWheel) {
             return; // left button press only
         const action = clickMapRef.current.get(y);
         if (action)
-            action();
+            action(Number(m[2]));
     }, []);
     return { clickMapRef, hoverMapRef, hoveredIdx, setHoveredIdx, handleMouseData };
 }

package/dist/ui/ink/hooks/use-settings.js

@@ -6,6 +6,7 @@ import { listModels } from "../../../providers/llm/models.js";
 import { LLM_PROVIDERS, LLM_PROVIDER_LABELS, defaultModelFor } from "../../../providers/llm/registry.js";
 import { PROVIDERS } from "../constants.js";
 import { prettifyModelId } from "../lib/utils.js";
+import { detectTerminalTheme } from "../theme.js";
 import { useMountEffect } from "../components/effects.js";
 export function useSettings({ config, setConfig, screen, pushFeed, setNotice }) {
     const [menu, setMenu] = useState(null);
@@ -144,6 +145,21 @@ export function useSettings({ config, setConfig, screen, pushFeed, setNotice })
             await setEnvKey(name, value);
             return `${name} saved to ~/.scira/.env and active for this session.`;
         }
+        if (cmd === "/theme") {
+            if (!arg) {
+                const resolved = config.theme === "auto" ? detectTerminalTheme() : config.theme;
+                const mode = config.theme === "auto"
+                    ? "follows terminal picker"
+                    : "locked — run /theme auto to sync with picker";
+                return `Current theme: ${config.theme} (rendering ${resolved})\n${mode}\nOptions: dark, light, auto`;
+            }
+            if (!["dark", "light", "auto"].includes(arg))
+                return `Unknown theme "${arg}". Options: dark, light, auto`;
+            const next = { ...config, theme: arg };
+            setConfig(next);
+            await saveGlobalConfig(next);
+            return `Theme set to ${arg}.`;
+        }
         if (cmd === "/keys") {
             return detectEnv(config.search.provider, config.llmProvider)
                 .map((c) => `${c.present ? "set    " : "missing"} ${c.name}${c.required ? " (required)" : ""}`)

package/dist/ui/ink/hooks/use-submit.js

@@ -117,7 +117,7 @@ export function useSubmit(o) {
             stopTurn();
             return;
         }
-        if (text === "/back" || text === "/new") {
+        if (text === "/back" || text === "/new" || text === "/home") {
             if (currentRunPath)
                 detachSubscriber(currentRunPath);
             setScreen("home");
@@ -136,7 +136,7 @@ export function useSubmit(o) {
             void openMenu("provider");
             return;
         }
-        if (["/key", "/keys", "/llm"].includes(text.split(/\s+/u)[0])) {
+        if (["/key", "/keys", "/llm", "/theme"].includes(text.split(/\s+/u)[0])) {
             void (async () => {
                 const result = await handleSettings(text);
                 if (result)

package/dist/ui/ink/hooks/use-theme.js

@@ -0,0 +1 @@
+export { ThemeProvider, useTheme } from "../theme-context.js";

package/dist/ui/ink/lib/markdown.js

@@ -1,5 +1,5 @@
 import { displayWidth } from "./utils.js";
-export function parseInlineMarkdown(text) {
+export function parseInlineMarkdown(text, theme) {
     const segs = [];
     const re = /(\[[^\]]+\]\([^)]+\))|(`[^`]+`)|(\*\*[^*]+\*\*)|(__[^_]+__)|(\*[^*\s][^*]*\*)|(_[^_\s][^_]*_)/gu;
     let last = 0;
@@ -9,12 +9,12 @@ export function parseInlineMarkdown(text) {
             segs.push({ text: text.slice(last, m.index) });
         const tok = m[0];
         if (tok.startsWith("`"))
-            segs.push({ text: tok.slice(1, -1), color: "#FFE0C2" });
+            segs.push({ text: tok.slice(1, -1), color: theme?.accent ?? "#FFE0C2" });
         else if (tok.startsWith("**") || tok.startsWith("__"))
             segs.push({ text: tok.slice(2, -2), bold: true });
         else if (tok.startsWith("[")) {
             const link = /^\[([^\]]+)\]\(([^)]+)\)$/u.exec(tok);
-            segs.push({ text: link ? link[1] : tok, color: "#FFE0C2", underline: true, url: link ? link[2] : undefined });
+            segs.push({ text: link ? link[1] : tok, color: theme?.accent ?? "#FFE0C2", underline: true, url: link ? link[2] : undefined });
         }
         else
             segs.push({ text: tok.slice(1, -1), italic: true });
@@ -180,7 +180,7 @@ export function tableToSegLines(rows, width) {
     });
     return out;
 }
-export function markdownToSegLines(text, width) {
+export function markdownToSegLines(text, width, theme) {
     const out = [];
     let inFence = false;
     const normalized = text
@@ -194,8 +194,8 @@ export function markdownToSegLines(text, width) {
             continue;
         }
         if (inFence) {
-            const gutter = { text: "  │ ", color: "gray", dim: true };
-            const wrapped = wrapSegments([{ text: raw || " ", color: "#FFE0C2", dim: true }], width - 4);
+            const gutter = { text: "  │ ", color: theme?.textDim ?? "gray", dim: false };
+            const wrapped = wrapSegments([{ text: raw || " ", color: theme?.accent ?? "#FFE0C2", dim: true }], width - 4);
             for (const ln of wrapped)
                 out.push([gutter, ...ln]);
             continue;
@@ -211,34 +211,34 @@ export function markdownToSegLines(text, width) {
             continue;
         }
         if (/^\s*([-*_])(\s*\1){2,}\s*$/u.test(raw)) {
-            out.push([{ text: "─".repeat(Math.max(3, width - 1)), color: "gray", dim: true }]);
+            out.push([{ text: "─".repeat(Math.max(3, width - 1)), color: theme?.textDim ?? "gray", dim: false }]);
             continue;
         }
         const heading = /^(#{1,6})\s+(.*)$/u.exec(raw);
         if (heading) {
-            const color = heading[1].length <= 2 ? "#FFE0C2" : "white";
-            const segs = parseInlineMarkdown(heading[2]).map((s) => ({ ...s, bold: true, color }));
+            const color = heading[1].length <= 2 ? theme?.accent ?? "#FFE0C2" : theme?.text ?? "white";
+            const segs = parseInlineMarkdown(heading[2], theme).map((s) => ({ ...s, bold: true, color }));
             for (const ln of wrapSegments(segs, width))
                 out.push(ln);
             continue;
         }
         const quote = /^\s*>\s?(.*)$/u.exec(raw);
         if (quote) {
-            const segs = parseInlineMarkdown(quote[1]).map((s) => ({ ...s, dim: true }));
+            const segs = parseInlineMarkdown(quote[1], theme).map((s) => ({ ...s, dim: true }));
             for (const ln of wrapSegments(segs, width - 2))
-                out.push([{ text: "│ ", color: "gray", dim: true }, ...ln]);
+                out.push([{ text: "│ ", color: theme?.textDim ?? "gray", dim: false }, ...ln]);
             continue;
         }
         const list = /^(\s*)(?:[-*+]|(\d+)[.)])\s+(.*)$/u.exec(raw);
         if (list) {
             const marker = list[2] ? `${list[2]}. ` : "• ";
             const prefix = list[1] + marker;
-            const segs = parseInlineMarkdown(list[3]);
+            const segs = parseInlineMarkdown(list[3], theme);
             const wrapped = wrapSegments(segs, Math.max(10, width - prefix.length));
-            wrapped.forEach((ln, i) => out.push([{ text: i === 0 ? prefix : " ".repeat(prefix.length), color: "#FFE0C2" }, ...ln]));
+            wrapped.forEach((ln, i) => out.push([{ text: i === 0 ? prefix : " ".repeat(prefix.length), color: theme?.accent ?? "#FFE0C2" }, ...ln]));
             continue;
         }
-        for (const ln of wrapSegments(parseInlineMarkdown(raw), width))
+        for (const ln of wrapSegments(parseInlineMarkdown(raw, theme), width))
             out.push(ln);
     }
     return out;