@scira/cli 0.1.0 → 0.1.1

package/dist/agent/research-agent.js

@@ -1,7 +1,7 @@
 import { createInterface } from "node:readline/promises";
 import { stdin, stdout } from "node:process";
 import { ToolLoopAgent, isLoopFinished } from "ai";
-import ora from "ora";
+import { Spinner } from "picospinner";
 import { getLanguageModel, requireLlmKeys } from "../providers/llm/registry.js";
 import { createResearchTools, createOneShotTools, createCodingTools } from "./tools.js";
 import { SKILL_CATALOG } from "./skills.js";
@@ -173,7 +173,7 @@ export async function createOneShotAgent(runPath, goal, config, onApprovalRequir
  * Run the research agent headlessly, streaming a compact timeline to stdout.
  */
 export async function runResearchAgent(runPath, goal, config, workspacePath) {
-    const spinner = ora({ stream: stdout });
+    const spinner = new Spinner();
     const onApprovalRequired = async (toolName, description) => {
         spinner.stop();
         console.error(`\n⚠  ${toolName} needs approval`);
@@ -193,7 +193,8 @@ export async function runResearchAgent(runPath, goal, config, workspacePath) {
         const result = await bundle.agent.stream({ prompt: goal });
         for await (const part of result.fullStream) {
             if (part.type === "tool-call") {
-                spinner.start(`${CODING_ICONS[part.toolName] ?? TOOL_ICONS[part.toolName] ?? "•"} ${part.toolName}  ${summarize(part.input)}`);
+                spinner.setText(`${CODING_ICONS[part.toolName] ?? TOOL_ICONS[part.toolName] ?? "•"} ${part.toolName}  ${summarize(part.input)}`);
+                spinner.start();
             }
             else if (part.type === "tool-result") {
                 spinner.succeed(`${part.toolName}`);

package/dist/cli/commands/init.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env bun
 import { mkdir, writeFile, readFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
 import { homedir } from "node:os";
@@ -244,6 +244,7 @@ export async function initCommand() {
     let models = [];
     try {
         const tempConfig = {
+            theme: "auto",
             llmProvider: llmProvider,
             model: defaultModelFor(llmProvider),
             lastModels: {},
@@ -327,6 +328,7 @@ export async function initCommand() {
     }
     // Write config file
     const config = {
+        theme: existingConfig?.theme ?? "auto",
         llmProvider: llmProvider,
         model,
         lastModels: { [llmProvider]: model, ...(existingConfig?.lastModels || {}) },

package/dist/cli/index.js

@@ -1,11 +1,15 @@
-#!/usr/bin/env node
+#!/usr/bin/env bun
 import process from "node:process";
+if (typeof Bun === "undefined") {
+    console.error("scira requires Bun. Install it from https://bun.sh and run: bun run dist/cli/index.js");
+    process.exit(1);
+}
 import { readFileSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { dirname, join } from "node:path";
 import { homedir } from "node:os";
 import { fileURLToPath } from "node:url";
-import { Command } from "commander";
+import sade from "sade";
 const { version: pkgVersion } = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), "../../package.json"), "utf8"));
 // Load keys from the global config dir (~/.scira/.env) so they work regardless
 // of where the CLI is invoked from (e.g. after pnpm link / global install).
@@ -29,15 +33,15 @@ import { createMcpBridge } from "../tools/mcp-bridge.js";
 import { saveGlobalMcpConfig } from "../config/load-config.js";
 import { runOAuthFlow } from "../tools/mcp-oauth.js";
 import { initCommand } from "./commands/init.js";
-const program = new Command();
-program
-    .name("scira")
-    .description("Terminal-native AI research agent.")
-    .version(pkgVersion);
-program
-    .argument("[question]", "research question or coding task")
-    .option("--workspace <path>", "enable coding tools for this workspace directory")
-    .action(async (question, options) => {
+const prog = sade("scira");
+prog
+    .version(pkgVersion)
+    .describe("Terminal-native AI research agent.");
+prog
+    .command("*", "research question or coding task", { default: true })
+    .option("--workspace", "enable coding tools for this workspace directory")
+    .action(async (opts) => {
+    const question = opts._.length > 0 ? opts._.join(" ") : undefined;
     const config = await loadConfig();
     if (!question) {
         await openTuiHome(config);
@@ -46,31 +50,30 @@ program
     requireLlmKeys(config);
     const run = await createRun(question, config);
     console.log(`Run: ${run.path}`);
-    if (options?.workspace) {
-        console.log(`Workspace: ${options.workspace}`);
+    if (opts.workspace) {
+        console.log(`Workspace: ${opts.workspace}`);
     }
     console.log("");
-    await runResearchAgent(run.path, question, config, options?.workspace);
+    await runResearchAgent(run.path, question, config, opts.workspace);
     console.log(`\nRun complete: ${run.path}`);
 });
-program.command("init")
-    .description("initialize Scira with API keys and configuration")
+prog
+    .command("init", "initialize Scira with API keys and configuration")
     .action(async () => {
     await initCommand();
 });
-program.command("new")
-    .argument("<question>")
-    .description("create a new interactive research run")
+prog
+    .command("new <question>", "create a new interactive research run")
     .option("--no-shell", "create the run without opening the interactive shell")
     .option("--tui", "open the Ink TUI after creating the run")
     .option("--shell", "open the classic readline shell after creating the run")
-    .action(async (question, options) => {
+    .action(async (question, opts) => {
     const config = await loadConfig();
     const run = await createRun(question, config);
-    if (options.tui) {
+    if (opts.tui) {
         await openTui(run.path, config);
     }
-    else if (options.shell) {
+    else if (opts.shell) {
         await openShell(run.path, config);
     }
     else {
@@ -78,37 +81,34 @@ program.command("new")
         console.log(`Open TUI: scira resume --tui ${run.id}`);
     }
 });
-program.command("resume")
-    .argument("<run-id>")
-    .description("resume an existing run")
+prog
+    .command("resume <run-id>", "resume an existing run")
     .option("--shell", "resume in the classic readline shell")
     .option("--tui", "resume in the Ink TUI")
-    .action(async (runId, options) => {
+    .action(async (runId, opts) => {
     const config = await loadConfig();
     const runPath = await findRun(runId, config);
-    if (options.shell) {
+    if (opts.shell) {
         await openShell(runPath, config);
     }
     else {
         await openTui(runPath, config);
     }
 });
-program.command("list")
-    .description("list runs")
+prog
+    .command("list", "list runs")
     .action(async () => {
     const config = await loadConfig();
     console.table(await listRuns(config));
 });
-program.command("show")
-    .argument("<run-id>")
-    .description("show run status")
+prog
+    .command("show <run-id>", "show run status")
     .action(async (runId) => {
     const config = await loadConfig();
     console.log(await summarizeRun(await findRun(runId, config)));
 });
-program.command("run")
-    .argument("<run-id>")
-    .description("run (or re-run) the research agent on an existing run")
+prog
+    .command("run <run-id>", "run (or re-run) the research agent on an existing run")
     .action(async (runId) => {
     const config = await loadConfig();
     requireLlmKeys(config);
@@ -117,23 +117,21 @@ program.command("run")
     await runResearchAgent(runPath, goal, config);
     console.log(`\nRun complete: ${runPath}`);
 });
-program.command("verify")
-    .argument("<run-id>")
-    .description("show the verification report for a run's claims")
+prog
+    .command("verify <run-id>", "show the verification report for a run's claims")
     .action(async (runId) => {
     const config = await loadConfig();
     const runPath = await findRun(runId, config);
     console.log(await verificationReport(runPath));
 });
-program.command("export")
-    .argument("<run-id>")
-    .option("--format <format>", "export format: md | json | csv", "md")
-    .option("--output <file>", "write to file instead of stdout")
-    .description("export run report (md, json, or csv)")
-    .action(async (runId, options) => {
-    const fmt = options.format.toLowerCase();
+prog
+    .command("export <run-id>", "export run report (md, json, or csv)")
+    .option("--format", "export format: md | json | csv", "md")
+    .option("--output", "write to file instead of stdout")
+    .action(async (runId, opts) => {
+    const fmt = opts.format.toLowerCase();
     if (!["md", "json", "csv"].includes(fmt)) {
-        throw new Error(`Unknown format "${options.format}". Supported: md, json, csv.`);
+        throw new Error(`Unknown format "${opts.format}". Supported: md, json, csv.`);
     }
     const config = await loadConfig();
     const runPath = await findRun(runId, config);
@@ -152,20 +150,19 @@ program.command("export")
         const bundle = { runId, goal, sources, claims };
         output = fmt === "json" ? toJson(bundle) : toCsv(bundle);
     }
-    if (options.output) {
+    if (opts.output) {
         const { writeFile, mkdir } = await import("node:fs/promises");
         const { dirname } = await import("node:path");
-        await mkdir(dirname(options.output), { recursive: true });
-        await writeFile(options.output, output, "utf8");
-        console.log(`Exported to ${options.output}`);
+        await mkdir(dirname(opts.output), { recursive: true });
+        await writeFile(opts.output, output, "utf8");
+        console.log(`Exported to ${opts.output}`);
     }
     else {
         console.log(output);
     }
 });
-const mcp = program.command("mcp").description("manage MCP servers in .scira/config.json");
-mcp.command("list")
-    .description("list configured MCP servers")
+prog
+    .command("mcp list", "list configured MCP servers")
     .action(async () => {
     const config = await loadConfig();
     const dt = config.mcp.chromeDevtools;
@@ -177,22 +174,19 @@ mcp.command("list")
         console.log(`${s.name} [${s.transport}]${authLabel}${oauthStatus} ${s.enabled ? "enabled" : "disabled"}  ${loc}`);
     }
 });
-mcp.command("add")
-    .argument("<transport>", "stdio | sse | http")
-    .argument("<name>")
-    .argument("<target>")
-    .argument("[args...]")
-    .option("--bearer <token>", "bearer token for Authorization header")
-    .option("--header <name:value>", "custom header in name:value format")
+prog
+    .command("mcp add <transport> <name> <target> [args...]", "add an MCP server")
+    .option("--bearer", "bearer token for Authorization header")
+    .option("--header", "custom header in name:value format")
     .option("--oauth", "use OAuth PKCE flow (requires --oauth-client-id)")
-    .option("--oauth-client-id <id>", "OAuth client ID")
-    .option("--oauth-client-secret <secret>", "OAuth client secret (optional for PKCE)")
-    .option("--oauth-issuer <url>", "OAuth issuer URL for auto-discovery")
-    .option("--oauth-auth-url <url>", "OAuth authorization endpoint URL")
-    .option("--oauth-token-url <url>", "OAuth token endpoint URL")
-    .option("--oauth-scopes <scopes>", "OAuth scopes (space-separated)")
-    .description("add an MCP server")
+    .option("--oauth-client-id", "OAuth client ID")
+    .option("--oauth-client-secret", "OAuth client secret (optional for PKCE)")
+    .option("--oauth-issuer", "OAuth issuer URL for auto-discovery")
+    .option("--oauth-auth-url", "OAuth authorization endpoint URL")
+    .option("--oauth-token-url", "OAuth token endpoint URL")
+    .option("--oauth-scopes", "OAuth scopes (space-separated)")
     .action(async (transport, name, target, args, opts) => {
+    const restArgs = Array.isArray(args) ? args : args ? [args] : [];
     if (!["stdio", "sse", "http"].includes(transport)) {
         throw new Error("transport must be one of: stdio, sse, http");
     }
@@ -230,7 +224,7 @@ mcp.command("add")
         oauthScopes: opts.oauthScopes,
     };
     const entry = transport === "stdio"
-        ? { ...base, transport: "stdio", command: target, args }
+        ? { ...base, transport: "stdio", command: target, args: restArgs }
         : { ...base, transport: transport, url: target, args: [] };
     const nextMcp = { ...config.mcp, servers: [...config.mcp.servers, entry] };
     await saveGlobalMcpConfig(nextMcp);
@@ -239,9 +233,8 @@ mcp.command("add")
         console.log(`Run: scira mcp oauth ${name}   to authenticate`);
     }
 });
-mcp.command("oauth")
-    .argument("<name>", "name of the OAuth MCP server to authenticate")
-    .description("run OAuth PKCE flow for an MCP server")
+prog
+    .command("mcp oauth <name>", "run OAuth PKCE flow for an MCP server")
     .action(async (name) => {
     const config = await loadConfig();
     const srv = config.mcp.servers.find((s) => s.name === name);
@@ -251,9 +244,8 @@ mcp.command("oauth")
         throw new Error(`"${name}" is not an OAuth server (authType: ${srv.authType})`);
     await runOAuthFlow(srv, config);
 });
-mcp.command("enable")
-    .argument("<name>")
-    .description("enable an MCP server")
+prog
+    .command("mcp enable <name>", "enable an MCP server")
     .action(async (name) => {
     const config = await loadConfig();
     const nextMcp = name === "chromeDevtools" || name === "devtools"
@@ -262,9 +254,8 @@ mcp.command("enable")
     await saveGlobalMcpConfig(nextMcp);
     console.log(`Enabled MCP server "${name}"`);
 });
-mcp.command("disable")
-    .argument("<name>")
-    .description("disable an MCP server")
+prog
+    .command("mcp disable <name>", "disable an MCP server")
     .action(async (name) => {
     const config = await loadConfig();
     const nextMcp = name === "chromeDevtools" || name === "devtools"
@@ -273,9 +264,8 @@ mcp.command("disable")
     await saveGlobalMcpConfig(nextMcp);
     console.log(`Disabled MCP server "${name}"`);
 });
-mcp.command("remove")
-    .argument("<name>")
-    .description("remove an MCP server from config")
+prog
+    .command("mcp remove <name>", "remove an MCP server from config")
     .action(async (name) => {
     const config = await loadConfig();
     if (!config.mcp.servers.some((s) => s.name === name)) {
@@ -285,63 +275,63 @@ mcp.command("remove")
     await saveGlobalMcpConfig(nextMcp);
     console.log(`Removed MCP server "${name}" from ~/.scira/config.json`);
 });
-program.command("watch")
-    .argument("<goal>", "research goal to monitor, e.g. \"AI search market\"")
+prog
+    .command("watch <goal>", "monitor a topic by running research on a schedule and diffing reports")
     .option("--daily", "run once per day (default)")
     .option("--hourly", "run once per hour")
     .option("--weekly", "run once per week")
-    .option("--interval <ms>", "custom interval in milliseconds")
-    .option("--runs <n>", "stop after N runs (default: run forever)", (v) => parseInt(v, 10))
-    .description("monitor a topic by running research on a schedule and diffing reports")
-    .action(async (goal, options) => {
+    .option("--interval", "custom interval in milliseconds")
+    .option("--runs", "stop after N runs (default: run forever)")
+    .action(async (goal, opts) => {
     const config = await loadConfig();
     const INTERVALS = {
         hourly: 60 * 60 * 1000,
         daily: 24 * 60 * 60 * 1000,
         weekly: 7 * 24 * 60 * 60 * 1000,
     };
-    const intervalMs = options.interval
-        ? parseInt(options.interval, 10)
-        : options.hourly ? INTERVALS.hourly
-            : options.weekly ? INTERVALS.weekly
+    const intervalMs = opts.interval
+        ? parseInt(String(opts.interval), 10)
+        : opts.hourly ? INTERVALS.hourly
+            : opts.weekly ? INTERVALS.weekly
                 : INTERVALS.daily;
     if (Number.isNaN(intervalMs) || intervalMs < 1000) {
         throw new Error("Interval must be at least 1000 ms.");
     }
+    const maxRuns = opts.runs != null ? parseInt(String(opts.runs), 10) : undefined;
     const { watchLoop } = await import("../watch/runner.js");
     const controller = new AbortController();
     process.on("SIGINT", () => { console.log("\nStopping watch…"); controller.abort(); });
     process.on("SIGTERM", () => { controller.abort(); });
     console.log(`Watching: "${goal}"`);
-    console.log(`Interval: ${intervalMs / 1000}s${options.runs ? ` · max ${options.runs} runs` : ""}`);
+    console.log(`Interval: ${intervalMs / 1000}s${maxRuns ? ` · max ${maxRuns} runs` : ""}`);
     console.log("Press Ctrl-C to stop.\n");
     await watchLoop({
-        goal, intervalMs, maxRuns: options.runs, config,
+        goal, intervalMs, maxRuns, config,
         onRunStart: (runPath, tick) => { console.log(`\n[tick ${tick + 1}] Starting run → ${runPath}`); },
         onRunComplete: (runPath, diffText, tick) => { console.log(`[tick ${tick + 1}] Done. Diff:\n${diffText}`); },
         onError: (err, tick) => { console.error(`[tick ${tick + 1}] Error: ${err.message}`); },
     }, controller.signal);
     console.log("Watch finished.");
 });
-program.command("models")
-    .option("--provider <provider>", "gateway only: filter by model prefix such as anthropic, openai, or google")
-    .description("list models for the configured LLM provider")
-    .action(async (options) => {
+prog
+    .command("models", "list models for the configured LLM provider")
+    .option("--provider", "gateway only: filter by model prefix such as anthropic, openai, or google")
+    .action(async (opts) => {
     const config = await loadConfig();
-    const models = config.llmProvider === "gateway" && options.provider
-        ? await listGatewayModels(options.provider)
+    const models = config.llmProvider === "gateway" && opts.provider
+        ? await listGatewayModels(opts.provider)
         : await listModels(config);
     for (const model of models) {
         console.log(model.id);
     }
 });
-program.command("config")
-    .description("print resolved config")
+prog
+    .command("config", "print resolved config")
     .action(async () => {
     console.log(JSON.stringify(await loadConfig(), null, 2));
 });
-program.command("doctor")
-    .description("check local setup")
+prog
+    .command("doctor", "check local setup")
     .action(async () => {
     const config = await loadConfig();
     const nodeCheck = checkNodeVersion(20);
@@ -437,7 +427,10 @@ async function commandResolves(command) {
     }
 }
 try {
-    await program.parseAsync(process.argv);
+    const parsed = prog.parse(process.argv, { lazy: true });
+    if (parsed?.handler) {
+        await parsed.handler(...parsed.args);
+    }
 }
 catch (error) {
     console.error(error instanceof Error ? error.message : String(error));

package/dist/types/index.js

@@ -1,6 +1,8 @@
 import { z } from "zod";
 export const ApprovalModeSchema = z.enum(["manual", "suggest", "auto"]);
+export const ThemeSchema = z.enum(["dark", "light", "auto"]).default("auto");
 export const SciraConfigSchema = z.object({
+    theme: ThemeSchema,
     llmProvider: z.enum(["gateway", "xai", "workers-ai", "huggingface"]).default("gateway"),
     model: z.string().default("deepseek/deepseek-v4-flash"),
     // last selected model per LLM provider, restored when switching back

package/dist/ui/ink/SciraApp.js

@@ -6,8 +6,10 @@ import { CWD_DISPLAY, wrapText, wrapInputWithCursor, loadInputHistory, saveInput
 import { deleteRun } from "../../storage/run-store.js";
 import { useMountEffect, TipCycler, AnimationTick, MouseTracker } from "./components/effects.js";
 import { useFeedLines, computeGroups } from "./hooks/use-feed-lines.js";
+import { feedToolItemId, isToolItemCollapsed } from "./lib/tool-result.js";
 import { useAgentTurn } from "./hooks/use-agent-turn.js";
-import { TopBar, InputBar, HintLine, CommandMenuBox, HelpBox, ApprovalBox, MenuDialog, McpDialog } from "./components/overlays.js";
+import { TopBar, InputBar, HintLine, CommandMenuBox, HelpBox, ApprovalBox, MenuDialog, McpDialog, buildMcpDialogRows } from "./components/overlays.js";
+import { useMcpActions } from "./hooks/use-mcp-actions.js";
 import { useKeyboard } from "./hooks/use-keyboard.js";
 import { HomeScreen } from "./components/home-screen.js";
 import { useFeed } from "./hooks/use-feed.js";
@@ -16,6 +18,7 @@ import { useSuggestions } from "./hooks/use-suggestions.js";
 import { useSubmit } from "./hooks/use-submit.js";
 import { useSession } from "./hooks/use-session.js";
 import { useMouse } from "./hooks/use-mouse.js";
+import { ThemeProvider, useTheme } from "./hooks/use-theme.js";
 export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
@@ -36,6 +39,7 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const [notice, setNotice] = useState("");
     const [pendingRerun, setPendingRerun] = useState(false);
     const [mcpOpen, setMcpOpen] = useState(false);
+    const [mcpRowIdx, setMcpRowIdx] = useState(0);
     const [sessions, setSessions] = useState([]);
     const [selectedIdx, setSelectedIdx] = useState(0);
     const [sessionsModalOpen, setSessionsModalOpen] = useState(false);
@@ -68,7 +72,7 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const [historyIndex, setHistoryIndex] = useState(-1);
     const [heroHidden, setHeroHidden] = useState(false);
     const [busy, setBusy] = useState(false);
-    const [blink, setBlink] = useState(true);
+    const [, setBlink] = useState(true);
     const [frame, setFrame] = useState(0);
     const [reasoningTick, setReasoningTick] = useState(0);
     const [commandMenuIndex, setCommandMenuIndex] = useState(0);
@@ -77,6 +81,21 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const [focusedGroupKey, setFocusedGroupKey] = useState(null);
     const [pendingCollapse, setPendingCollapse] = useState(new Set());
+    const [itemExpandState, setItemExpandState] = useState(new Map());
+    React.useEffect(() => {
+        setItemExpandState(new Map());
+    }, [currentRunPath]);
+    const toggleToolItem = useCallback((id) => {
+        setItemExpandState((prev) => {
+            const tool = feed.find((it, i) => it.kind === "tool" && feedToolItemId(i, it.toolCallId) === id);
+            if (tool?.kind !== "tool")
+                return prev;
+            const next = new Map(prev);
+            const collapsed = isToolItemCollapsed(id, tool.name, tool.status, prev);
+            next.set(id, collapsed);
+            return next;
+        });
+    }, [feed]);
     const doneGroupKeys = useMemo(() => {
         const { groups } = computeGroups(feed);
         return [...groups.entries()].filter(([, g]) => !g.active).map(([k]) => k).sort((a, b) => a - b);
@@ -96,18 +115,21 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
             }));
         });
     }, [doneGroupKeys, feed]);
-    const toggleFocusedGroup = useCallback(() => {
-        if (focusedGroupKey === null)
-            return;
+    const toggleGroup = useCallback((groupKey) => {
         setCollapsedGroups((prev) => {
             const next = new Set(prev);
-            if (next.has(focusedGroupKey))
-                next.delete(focusedGroupKey);
+            if (next.has(groupKey))
+                next.delete(groupKey);
             else
-                next.add(focusedGroupKey);
+                next.add(groupKey);
             return next;
         });
-    }, [focusedGroupKey]);
+    }, []);
+    const toggleFocusedGroup = useCallback(() => {
+        if (focusedGroupKey === null)
+            return;
+        toggleGroup(focusedGroupKey);
+    }, [focusedGroupKey, toggleGroup]);
     // Auto-collapse groups when they become inactive if they're in pendingCollapse
     React.useEffect(() => {
         if (pendingCollapse.size === 0)
@@ -212,6 +234,48 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const { menu, setMenu, modelName, openMenu, applyMenuSelection, handleSettings } = useSettings({
         config, setConfig, screen, pushFeed, setNotice,
     });
+    const notifyMcp = useCallback((message) => {
+        if (screen === "chat")
+            pushFeed({ kind: "status", text: message });
+        else
+            setNotice(message);
+    }, [screen, pushFeed]);
+    const { toggleMcp, removeMcp } = useMcpActions(config, setConfig, notifyMcp);
+    const mcpRows = useMemo(() => buildMcpDialogRows(config), [config]);
+    const mcpRowCount = mcpRows.length;
+    const toggleMcpRow = useCallback((idx) => {
+        const row = mcpRows[idx];
+        if (!row)
+            return;
+        void toggleMcp(row.key === "chromeDevtools"
+            ? { kind: "devtools" }
+            : { kind: "server", name: row.name });
+    }, [mcpRows, toggleMcp]);
+    const removeMcpRow = useCallback((idx) => {
+        const row = mcpRows[idx];
+        if (!row?.removable)
+            return;
+        void removeMcp(row.name);
+        setMcpRowIdx((i) => Math.max(0, Math.min(i, mcpRowCount - 2)));
+    }, [mcpRows, mcpRowCount, removeMcp]);
+    const handleMcpToggle = useCallback((row) => {
+        void toggleMcp(row.key === "chromeDevtools"
+            ? { kind: "devtools" }
+            : { kind: "server", name: row.name });
+    }, [toggleMcp]);
+    const handleMcpRemove = useCallback((row) => {
+        if (!row.removable)
+            return;
+        void removeMcp(row.name);
+        setMcpRowIdx((i) => Math.max(0, Math.min(i, mcpRowCount - 2)));
+    }, [mcpRowCount, removeMcp]);
+    React.useEffect(() => {
+        if (mcpOpen)
+            setMcpRowIdx(0);
+    }, [mcpOpen]);
+    React.useEffect(() => {
+        setMcpRowIdx((i) => Math.min(i, Math.max(0, mcpRowCount - 1)));
+    }, [mcpRowCount]);
     const { runTurn } = useAgentTurn({
         config, currentRunPath, queuedPromptRef, fullModeRef, conversationRef, turnsRef, feedRef,
         setBusy, setScrollOffset, refreshRun, recordUsage, setMode, getSubscriber,
@@ -246,12 +310,29 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const menuHeight = commandMenuHeight + helpHeight + approvalHeight;
     const feedRows = Math.max(3, rows - 6 - inputLines.length - menuHeight);
     const hasRunningTool = feed.some((it) => it.kind === "tool" && it.status === "running");
-    const feedLines = useFeedLines(feed, innerWidth, reasoningTick, hasRunningTool ? frame : 0, collapsedGroups, focusedGroupKey);
+    const { lines: feedLines, toggleAtLine, groupToggleAtLine } = useFeedLines(feed, innerWidth, reasoningTick, hasRunningTool ? frame : 0, collapsedGroups, focusedGroupKey, itemExpandState, hoveredIdx, config);
     const contentRows = Math.max(1, feedRows);
     const maxScrollOffset = Math.max(0, feedLines.length - contentRows);
     wheelStateRef.current = { screen, maxScrollOffset };
     const clampedOffset = Math.min(scrollOffset, maxScrollOffset);
     const startIdx = Math.max(0, feedLines.length - contentRows - clampedOffset);
+    const feedStartRow = 3;
+    if (screen === "chat") {
+        const clickMap = new Map();
+        const hoverMap = new Map();
+        const registerLine = (lineIdx, onClick) => {
+            const vis = lineIdx - startIdx;
+            if (vis < 0 || vis >= contentRows)
+                return;
+            const row = feedStartRow + vis;
+            clickMap.set(row, onClick);
+            hoverMap.set(row, lineIdx);
+        };
+        toggleAtLine.forEach((id, lineIdx) => registerLine(lineIdx, () => toggleToolItem(id)));
+        groupToggleAtLine.forEach((groupKey, lineIdx) => registerLine(lineIdx, () => toggleGroup(groupKey)));
+        clickMapRef.current = clickMap;
+        hoverMapRef.current = hoverMap;
+    }
     const visibleLines = feedLines.slice(startIdx, startIdx + contentRows);
     const scrollLabel = clampedOffset > 0
         ? (startIdx > 0 ? `↑ ${startIdx} · ↓ ${clampedOffset} · wheel/⇞⇟` : `top · ↓ ${clampedOffset} · wheel/⇞⇟`)
@@ -261,14 +342,22 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
         setNotice,
         exit,
         input: { text: inputText, setText: setInputText, cursorPos, setCursorPos, history: inputHistory, historyIndex, setHistoryIndex },
-        dialogs: { approvalPending, setApprovalPending, menu, setMenu, applyMenuSelection, helpOpen, setHelpOpen, mcpOpen, setMcpOpen },
+        dialogs: {
+            approvalPending, setApprovalPending, menu, setMenu, applyMenuSelection, helpOpen, setHelpOpen,
+            mcpOpen, setMcpOpen, mcpRowIdx, setMcpRowIdx, mcpRowCount, toggleMcpRow, removeMcpRow,
+        },
         suggestions: { activeSuggestions, activeSuggestionKind, commandMenuIndex, setCommandMenuIndex, acceptActiveSuggestion },
         chat: { setScrollOffset, contentRows, maxScrollOffset, pendingRerun, setPendingRerun, busy, stopTurn, submitChat, toggleAllGroups, toggleFocusedGroup, focusPrevGroup, focusNextGroup, unfocusGroup, hasFocusedGroup: focusedGroupKey !== null },
         home: { sessionsModalOpen, setSessionsModalOpen, sessionsModalIdx, setSessionsModalIdx, sessions, deleteSession, selectedIdx, setSelectedIdx, setHeroHidden, openRun, submitHome },
     });
     const activeUsage = usage[config.model];
+    const themed = (node) => (_jsx(ThemeProvider, { config: config, stdin: stdin, stdout: stdout, children: node }));
     if (screen === "home") {
-        return (_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [_jsx(TipCycler, { setTipIndex: setTipIndex }), !sessionsModalOpen && stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY }), _jsx(HomeScreen, { cols: cols, rows: rows, sessions: sessions, selectedIdx: selectedIdx, hoveredIdx: hoveredIdx, heroHidden: heroHidden, notice: notice, tipIndex: tipIndex, commandMenuHeight: commandMenuHeight, sessionsModalOpen: sessionsModalOpen, sessionsModalIdx: sessionsModalIdx, inputText: inputText, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef, setSelectedIdx: setSelectedIdx, setSessionsModalOpen: setSessionsModalOpen, setSessionsModalIdx: setSessionsModalIdx, setNotice: setNotice, openRun: openRun, submitHome: submitHome, exit: exit }), _jsxs(Box, { flexDirection: "column", backgroundColor: "#141414", paddingBottom: 1, children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: !!approvalPending, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName }), _jsx(HintLine, { screen: screen, busy: busy })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows })] }));
+        return themed(_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [_jsx(TipCycler, { setTipIndex: setTipIndex }), (!sessionsModalOpen || mcpOpen) && stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY, config: config }), _jsx(HomeScreen, { cols: cols, rows: rows, sessions: sessions, selectedIdx: selectedIdx, hoveredIdx: hoveredIdx, heroHidden: heroHidden, notice: notice, tipIndex: tipIndex, commandMenuHeight: commandMenuHeight, mcpOpen: mcpOpen, sessionsModalOpen: sessionsModalOpen, sessionsModalIdx: sessionsModalIdx, inputText: inputText, config: config, modelName: modelName, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef, setSelectedIdx: setSelectedIdx, setSessionsModalOpen: setSessionsModalOpen, setSessionsModalIdx: setSessionsModalIdx, setNotice: setNotice, openRun: openRun, submitHome: submitHome, exit: exit }), _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions, config: config }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: !!approvalPending, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName, config: config }), _jsx(HintLine, { screen: screen, busy: busy, config: config })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows, config: config }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows, selectedIdx: mcpRowIdx, hoveredIdx: hoveredIdx, onToggle: handleMcpToggle, onRemove: handleMcpRemove, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY }), _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingTop: 1, overflow: "hidden", children: visibleLines }), _jsxs(Box, { flexDirection: "column", backgroundColor: "#141414", paddingBottom: 1, children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions }), _jsx(HelpBox, { open: helpOpen, innerWidth: innerWidth }), approvalPending && _jsx(ApprovalBox, { toolName: approvalPending.toolName, description: approvalPending.description, innerWidth: innerWidth }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: !!approvalPending, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName }), _jsx(HintLine, { screen: screen, busy: busy, scrollLabel: scrollLabel, hasDoneGroups: doneGroupKeys.length > 0, hasFocusedGroup: focusedGroupKey !== null })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows })] }));
+    return themed(_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY, config: config }), _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingTop: 1, overflow: "hidden", children: visibleLines }), _jsxs(ChatInputChrome, { children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions, config: config }), _jsx(HelpBox, { open: helpOpen, innerWidth: innerWidth, config: config }), approvalPending && _jsx(ApprovalBox, { toolName: approvalPending.toolName, description: approvalPending.description, innerWidth: innerWidth, config: config }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: !!approvalPending, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName, config: config }), _jsx(HintLine, { screen: screen, busy: busy, scrollLabel: scrollLabel, hasDoneGroups: doneGroupKeys.length > 0, hasFocusedGroup: focusedGroupKey !== null, config: config })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows, config: config }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows, selectedIdx: mcpRowIdx, hoveredIdx: hoveredIdx, onToggle: handleMcpToggle, onRemove: handleMcpRemove, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef })] }));
+}
+function ChatInputChrome({ children }) {
+    const theme = useTheme();
+    return (_jsx(Box, { flexDirection: "column", ...(theme.background ? { backgroundColor: theme.background } : {}), paddingBottom: 1, children: children }));
 }