@build-astron-co/nimbus 0.2.0 → 0.4.0

package/dist/src/ui/PermissionPrompt.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PermissionPrompt Component
+ *
+ * Modal-style overlay that asks the user to approve or reject a tool
+ * invocation before it executes. Displays the tool name, its input
+ * parameters, and a risk-level indicator.
+ *
+ * Keyboard shortcuts:
+ *   a  - Approve this invocation
+ *   r  - Reject this invocation
+ *   A  - Approve all invocations for this tool
+ *   s  - Approve for the remainder of this session
+ */
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+/** Map risk levels to display colours. */
+const RISK_COLORS = {
+    low: 'green',
+    medium: 'yellow',
+    high: 'red',
+    critical: 'magenta',
+};
+/** H4: Human-readable descriptions of each risk tier. */
+const RISK_DESCRIPTIONS = {
+    low: 'Read-only — safe to auto-approve',
+    medium: 'Modifies local files — review before approving',
+    high: 'System or cloud operation — approve with caution',
+    critical: 'Destructive or irreversible — explicit confirmation required',
+};
+/**
+ * Format tool input into a list of truncated key=value lines.
+ */
+function formatInput(input, maxEntries = 6) {
+    return Object.entries(input)
+        .slice(0, maxEntries)
+        .map(([key, value]) => {
+        const str = typeof value === 'string' ? value : JSON.stringify(value);
+        const truncated = str.length > 80 ? `${str.slice(0, 77)}...` : str;
+        return `${key}: ${truncated}`;
+    });
+}
+/**
+ * PermissionPrompt renders a bordered box with tool information and waits for
+ * a single keypress to determine the user's decision.
+ */
+export function PermissionPrompt({ toolName, toolInput, riskLevel, onDecide, }) {
+    const [pressed, setPressed] = useState(null);
+    useInput(input => {
+        switch (input) {
+            case 'a':
+                setPressed('a');
+                onDecide('approve');
+                break;
+            case 'r':
+                setPressed('r');
+                onDecide('reject');
+                break;
+            case 'A':
+                setPressed('A');
+                onDecide('approve_all');
+                break;
+            case 's':
+                setPressed('s');
+                onDecide('session');
+                break;
+        }
+    });
+    const inputLines = formatInput(toolInput);
+    const riskColor = RISK_COLORS[riskLevel];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: riskColor, paddingX: 1, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "yellow", children: "Permission Required" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Tool: " }), _jsx(Text, { bold: true, children: toolName })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Risk: " }), _jsx(Text, { bold: true, color: riskColor, children: riskLevel.toUpperCase() })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: RISK_DESCRIPTIONS[riskLevel] }) }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Parameters:" }), inputLines.map((line, idx) => (_jsxs(Text, { children: [" ", line] }, idx)))] }), _jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, inverse: pressed === 'a', children: "[a]" }), _jsx(Text, { children: "=approve  " }), _jsx(Text, { color: "red", bold: true, inverse: pressed === 'r', children: "[r]" }), _jsx(Text, { children: "=reject  " }), _jsx(Text, { color: "cyan", bold: true, inverse: pressed === 'A', children: "[A]" }), _jsx(Text, { children: "=approve-all-session  " }), _jsx(Text, { color: "blue", bold: true, inverse: pressed === 's', children: "[s]" }), _jsx(Text, { children: "=approve-this-tool-session" })] })] }));
+}

package/dist/src/ui/StatusBar.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StatusBar Component
+ *
+ * A single-line footer that shows the active agent mode, token usage with a
+ * percentage bar, estimated cost, snapshot count, and elapsed processing time.
+ *
+ * Layout:
+ *   [Plan] [Build] [Deploy] | Tokens: 45.2k/200k (22%) | Cost: $0.03 | Snapshots: 3 (undo) | tf:default | k8s:prod-cluster | delta:+$1.20 | 12s
+ *
+ * Token percentage colour:
+ *   green  < 50%
+ *   yellow 50-80%
+ *   red    > 80%
+ */
+import { useState, useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
+/** All modes in display order. */
+const MODES = ['plan', 'build', 'deploy'];
+/**
+ * Format a token count into a human-readable string (e.g. 45200 -> "45.2k").
+ */
+function formatTokens(count) {
+    if (count >= 1_000_000) {
+        return `${(count / 1_000_000).toFixed(1)}M`;
+    }
+    if (count >= 1_000) {
+        return `${(count / 1_000).toFixed(1)}k`;
+    }
+    return String(count);
+}
+/**
+ * Pick the colour for the token percentage indicator.
+ */
+function tokenColor(pct) {
+    if (pct > 80) {
+        return 'red';
+    }
+    if (pct >= 50) {
+        return 'yellow';
+    }
+    return 'green';
+}
+/**
+ * Determine if an environment name is production-like (G1).
+ */
+function isProdEnvironment(name) {
+    return /prod|production|live/i.test(name);
+}
+/**
+ * A single mode badge. The active mode is rendered with inverse styling.
+ */
+function ModeBadge({ mode, active }) {
+    const label = ` ${mode.charAt(0).toUpperCase() + mode.slice(1)} `;
+    if (active) {
+        return (_jsx(Text, { bold: true, inverse: true, children: label }));
+    }
+    return _jsx(Text, { dimColor: true, children: label });
+}
+/**
+ * StatusBar renders the bottom status line of the TUI.
+ */
+export function StatusBar({ session, isProcessing = false, processingStartTime = null, inputLineCount = 1, showScrollHint = false, copyToast = '', showStreamingHint = false, modeToast, searchQuery, searchResultCount, }) {
+    const pct = session.maxTokens > 0 ? Math.round((session.tokenCount / session.maxTokens) * 100) : 0;
+    const pctColor = tokenColor(pct);
+    const costStr = session.costUSD < 0.01 && session.costUSD > 0
+        ? `$${session.costUSD.toFixed(4)}`
+        : `$${session.costUSD.toFixed(2)}`;
+    // Elapsed time counter
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (isProcessing && processingStartTime) {
+            // Immediately calculate current elapsed
+            setElapsedSeconds(Math.floor((Date.now() - processingStartTime) / 1000));
+            intervalRef.current = setInterval(() => {
+                setElapsedSeconds(Math.floor((Date.now() - processingStartTime) / 1000));
+            }, 1000);
+            return () => {
+                if (intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                }
+            };
+        }
+        else {
+            setElapsedSeconds(0);
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        }
+    }, [isProcessing, processingStartTime]);
+    // Snapshot display: show undo hint when snapshots exist (G19)
+    const snapshotDisplay = session.snapshotCount > 0
+        ? `${session.snapshotCount} (↶ undo)`
+        : String(session.snapshotCount);
+    // Infra context colors (G1)
+    const tfColor = session.terraformWorkspace && isProdEnvironment(session.terraformWorkspace)
+        ? 'yellow'
+        : 'green';
+    const k8sColor = session.kubectlContext && isProdEnvironment(session.kubectlContext)
+        ? 'yellow'
+        : 'green';
+    // L5: Build a compact visual progress bar for context budget
+    const BAR_WIDTH = 8;
+    const filledBars = Math.round((pct / 100) * BAR_WIDTH);
+    const progressBar = '█'.repeat(filledBars) + '░'.repeat(BAR_WIDTH - filledBars);
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, justifyContent: "space-between", width: "100%", children: [_jsx(Box, { children: MODES.map(m => (_jsx(ModeBadge, { mode: m, active: m === session.mode }, m))) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Ctx: " }), _jsx(Text, { color: pctColor, children: progressBar }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: pctColor, children: [formatTokens(session.tokenCount), "/", formatTokens(session.maxTokens), " (", pct, "%)"] }), _jsx(Text, { dimColor: true, children: " | Cost: " }), _jsx(Text, { children: costStr }), _jsx(Text, { dimColor: true, children: " | Snapshots: " }), _jsx(Text, { children: snapshotDisplay }), session.terraformWorkspace && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: tfColor, children: ["tf:", session.terraformWorkspace] })] })), session.kubectlContext && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: k8sColor, children: ["k8s:", session.kubectlContext] })] })), session.infraCostDelta && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: "green", children: ["delta:", session.infraCostDelta] })] })), isProcessing && elapsedSeconds > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: "cyan", children: [elapsedSeconds, "s"] })] })), inputLineCount > 1 && !isProcessing && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: "cyan", children: [inputLineCount, " lines"] })] })), _jsx(Text, { dimColor: true, children: " | Tab" }), _jsx(Text, { dimColor: true, children: ":mode " }), _jsx(Text, { dimColor: true, children: "Esc" }), _jsx(Text, { dimColor: true, children: ":cancel " }), _jsx(Text, { dimColor: true, children: "^C" }), _jsx(Text, { dimColor: true, children: ":exit" }), !isProcessing && inputLineCount <= 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { dimColor: true, children: "F1:help  /tree  /terminal" }), _jsx(Text, { dimColor: true, children: "  " }), _jsx(Text, { dimColor: true, children: "? help" })] })), showScrollHint && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { color: "cyan", children: "\u2191\u2193 scroll | G bottom" })] })), showStreamingHint && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { color: "cyan", children: "Esc:stop stream" })] })), copyToast && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { color: "green", children: copyToast })] })), modeToast && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsx(Text, { color: "cyan", italic: true, children: modeToast })] })), searchQuery && searchResultCount !== undefined && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: "yellow", children: ["Search: \"", searchQuery, "\" \u2014 ", searchResultCount, " results"] })] }))] })] }));
+}

package/dist/src/ui/TerminalPane.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * A scrollable pane showing the last tool outputs as a rolling buffer.
+ */
+export function TerminalPane({ toolCalls, maxLines = 20 }) {
+    // Collect lines from all tool calls (completed + running with streaming output)
+    const outputLines = [];
+    for (const tc of toolCalls) {
+        if (tc.status === 'running') {
+            // Show live streaming output for in-progress tool calls (Gap 1)
+            const liveOutput = tc.streamingOutput ?? '(waiting for output...)';
+            const lines = liveOutput.split('\n').filter(l => l.length > 0);
+            for (const line of lines) {
+                outputLines.push({ text: line, isError: false, toolName: tc.name, live: true });
+            }
+            continue;
+        }
+        if (tc.status !== 'completed' && tc.status !== 'failed')
+            continue;
+        const output = tc.result?.output ?? '';
+        const isError = tc.result?.isError ?? false;
+        const lines = output.split('\n').filter(l => l.length > 0);
+        for (const line of lines) {
+            outputLines.push({ text: line, isError, toolName: tc.name });
+        }
+    }
+    // Show only the last maxLines lines
+    const visible = outputLines.slice(-maxLines);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, flexGrow: 1, overflow: "hidden", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Terminal Output" }), _jsx(Text, { dimColor: true, children: " (read-only \u00B7 /terminal to toggle)" })] }), visible.length === 0 ? (_jsx(Text, { dimColor: true, italic: true, children: "No tool output yet." })) : (visible.map((line, i) => (_jsxs(Text, { color: line.isError ? 'red' : line.live ? 'cyan' : undefined, dimColor: !line.isError && !line.live, wrap: "truncate", children: [line.live ? '[>] ' : '', line.text] }, i))))] }));
+}

package/dist/src/ui/ToolCallDisplay.js

@@ -0,0 +1,303 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ToolCallDisplay Component
+ *
+ * Renders one or more tool invocations inline with the conversation. Each tool
+ * call is shown in a bordered box with a header containing the tool name and
+ * status indicator. While a tool is running the box shows a Spinner; on
+ * completion or failure it shows a condensed result summary.
+ *
+ * Specialised renderers exist for common tools:
+ *   - read_file: filename + optional line range
+ *   - edit_file: unified diff with context lines, red/green colouring
+ *   - bash: command + expandable/collapsible output
+ *   - terraform: resource table
+ *
+ * All other tools fall through to a generic key/value display.
+ */
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { parseTerraformPlanOutput } from '../agent/deploy-preview';
+/** Maximum number of output lines shown for bash tool results. */
+const MAX_BASH_OUTPUT_LINES = 50;
+/** Lines shown in collapsed view. */
+const COLLAPSED_LINES = 20;
+/* ---------------------------------------------------------------------------
+ * Status badge
+ * -------------------------------------------------------------------------*/
+/** Long-running tools that get a context hint about expected duration. */
+const LONG_RUNNING_TOOLS = new Set([
+    'terraform', 'terraform_plan_analyze', 'deploy_preview', 'drift_detect',
+    'helm', 'k8s_rbac', 'cfn', 'gitops',
+]);
+function StatusBadge({ status, startTime }) {
+    const [elapsed, setElapsed] = useState(0);
+    useEffect(() => {
+        if (status !== 'running' || !startTime)
+            return;
+        const initial = Math.floor((Date.now() - startTime) / 1000);
+        setElapsed(initial);
+        const id = setInterval(() => {
+            setElapsed(Math.floor((Date.now() - startTime) / 1000));
+        }, 1000);
+        return () => clearInterval(id);
+    }, [status, startTime]);
+    switch (status) {
+        case 'pending':
+            return _jsx(Text, { dimColor: true, children: "[pending]" });
+        case 'running':
+            return (_jsxs(Text, { color: "cyan", children: [_jsx(Spinner, { type: "dots" }), startTime && elapsed > 0 ? ` ${elapsed}s` : ''] }));
+        case 'completed':
+            return _jsx(Text, { color: "green", children: "[done]" });
+        case 'failed':
+            return _jsx(Text, { color: "red", children: "[failed]" });
+    }
+}
+/* ---------------------------------------------------------------------------
+ * Per-tool body renderers
+ * -------------------------------------------------------------------------*/
+function ReadFileBody({ input, result, }) {
+    const filePath = String(input.file_path ?? input.path ?? '');
+    const startLine = input.start_line;
+    const endLine = input.end_line;
+    const rangeLabel = startLine != null
+        ? endLine != null
+            ? ` (lines ${startLine}-${endLine})`
+            : ` (from line ${startLine})`
+        : '';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "file: " }), _jsx(Text, { color: "cyan", children: filePath }), _jsx(Text, { dimColor: true, children: rangeLabel })] }), result && !result.isError && (_jsxs(Text, { dimColor: true, children: [result.output.split('\n').length, " lines read"] })), result && result.isError && _jsx(Text, { color: "red", children: result.output })] }));
+}
+/**
+ * Compute a minimal unified diff between old and new text with context lines.
+ */
+function computeDiff(oldStr, newStr) {
+    const oldLines = oldStr.split('\n');
+    const newLines = newStr.split('\n');
+    const elements = [];
+    // Find common prefix
+    let prefixLen = 0;
+    while (prefixLen < oldLines.length &&
+        prefixLen < newLines.length &&
+        oldLines[prefixLen] === newLines[prefixLen]) {
+        prefixLen++;
+    }
+    // Find common suffix (from the end, but not overlapping with prefix)
+    let suffixLen = 0;
+    while (suffixLen < oldLines.length - prefixLen &&
+        suffixLen < newLines.length - prefixLen &&
+        oldLines[oldLines.length - 1 - suffixLen] === newLines[newLines.length - 1 - suffixLen]) {
+        suffixLen++;
+    }
+    // Context: show up to 2 lines before the diff
+    const contextStart = Math.max(0, prefixLen - 2);
+    for (let i = contextStart; i < prefixLen; i++) {
+        elements.push(_jsxs(Text, { dimColor: true, children: [' ', oldLines[i]] }, `ctx-pre-${i}`));
+    }
+    // Removed lines (from old)
+    const oldDiffEnd = oldLines.length - suffixLen;
+    for (let i = prefixLen; i < oldDiffEnd; i++) {
+        elements.push(_jsxs(Text, { color: "red", children: ["- ", oldLines[i]] }, `rm-${i}`));
+    }
+    // Added lines (from new)
+    const newDiffEnd = newLines.length - suffixLen;
+    for (let i = prefixLen; i < newDiffEnd; i++) {
+        elements.push(_jsxs(Text, { color: "green", children: ["+ ", newLines[i]] }, `add-${i}`));
+    }
+    // Context: show up to 2 lines after the diff
+    const contextEnd = Math.min(oldLines.length, oldDiffEnd + 2);
+    for (let i = oldDiffEnd; i < contextEnd; i++) {
+        elements.push(_jsxs(Text, { dimColor: true, children: [' ', oldLines[i]] }, `ctx-post-${i}`));
+    }
+    return elements;
+}
+function EditFileBody({ input, result, }) {
+    const filePath = String(input.file_path ?? input.path ?? '');
+    const oldStr = String(input.old_string ?? '');
+    const newStr = String(input.new_string ?? '');
+    const replaceAll = input.replace_all === true;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "file: " }), _jsx(Text, { color: "cyan", children: filePath }), replaceAll && _jsx(Text, { dimColor: true, children: " (replace all)" })] }), oldStr && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: computeDiff(oldStr, newStr) })), result && result.isError && _jsx(Text, { color: "red", children: result.output })] }));
+}
+function BashBody({ input, result, }) {
+    const command = String(input.command ?? '');
+    const [expanded, setExpanded] = useState(false);
+    useInput((_input, key) => {
+        if (_input === 'e' && !key.ctrl && !key.meta) {
+            setExpanded(prev => !prev);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "$ " }), _jsx(Text, { bold: true, children: command })] }), result && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: (() => {
+                    const lines = result.output.split('\n');
+                    const showLimit = expanded ? MAX_BASH_OUTPUT_LINES : COLLAPSED_LINES;
+                    const truncated = lines.length > showLimit;
+                    const visible = truncated ? lines.slice(0, showLimit) : lines;
+                    return (_jsxs(_Fragment, { children: [visible.map((line, i) => (_jsx(Text, { color: result.isError ? 'red' : undefined, dimColor: !result.isError, children: line }, i))), truncated && (_jsxs(Text, { dimColor: true, italic: true, children: ["... ", lines.length - showLimit, " more lines", ' ', expanded ? "(press 'e' to collapse)" : "(press 'e' to expand)"] })), !truncated && lines.length > COLLAPSED_LINES && expanded && (_jsx(Text, { dimColor: true, italic: true, children: "(press 'e' to collapse)" }))] }));
+                })() }))] }));
+}
+function TerraformBody({ input, result, }) {
+    const action = String(input.action ?? input.command ?? input.subcommand ?? 'plan');
+    // Gap 8: Show structured plan summary when output contains plan data
+    const isPlan = action === 'plan' || (result?.output ?? '').includes('Plan:');
+    const changes = isPlan && result && !result.isError
+        ? parseTerraformPlanOutput(result.output)
+        : [];
+    const creates = changes.filter(c => c.action === 'create').length;
+    const updates = changes.filter(c => c.action === 'update').length;
+    const destroys = changes.filter(c => c.action === 'destroy').length;
+    const replaces = changes.filter(c => c.action === 'replace').length;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "terraform " }), _jsx(Text, { bold: true, children: action })] }), isPlan && changes.length > 0 && result && !result.isError && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Plan Summary" }), _jsxs(Box, { children: [creates > 0 && _jsxs(Text, { color: "green", children: ["+", creates, " create  "] }), updates > 0 && _jsxs(Text, { color: "yellow", children: ["~", updates, " change  "] }), destroys > 0 && _jsxs(Text, { color: "red", children: ["-", destroys, " destroy  "] }), replaces > 0 && _jsxs(Text, { color: "magenta", children: ["\u00B1", replaces, " replace  "] }), creates === 0 && updates === 0 && destroys === 0 && replaces === 0 && (_jsx(Text, { dimColor: true, children: "No changes" }))] }), changes.slice(0, 10).map((c, i) => {
+                        const icon = c.action === 'create' ? '+' : c.action === 'destroy' ? '-' : c.action === 'replace' ? '±' : '~';
+                        const color = c.action === 'create' ? 'green' : c.action === 'destroy' ? 'red' : c.action === 'replace' ? 'magenta' : 'yellow';
+                        return (_jsxs(Text, { color: color, children: [icon, " ", c.resource] }, i));
+                    }), changes.length > 10 && _jsxs(Text, { dimColor: true, children: ["... and ", changes.length - 10, " more"] })] })), !(isPlan && changes.length > 0) && result && !result.isError && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: (() => {
+                    const lines = result.output.split('\n');
+                    const MAX_LINES = 200;
+                    const displayLines = lines.slice(0, MAX_LINES);
+                    return (_jsxs(_Fragment, { children: [displayLines.map((line, i) => {
+                                let color;
+                                if (line.startsWith('+') || line.includes('will be created')) {
+                                    color = 'green';
+                                }
+                                else if (line.startsWith('-') || line.includes('will be destroyed')) {
+                                    color = 'red';
+                                }
+                                else if (line.startsWith('~') || line.includes('will be updated')) {
+                                    color = 'yellow';
+                                }
+                                return (_jsx(Text, { color: color, dimColor: !color, children: line }, i));
+                            }), lines.length > MAX_LINES && (_jsxs(Text, { dimColor: true, children: ["... ", lines.length - MAX_LINES, " more lines (full output saved to tool history)"] }))] }));
+                })() })), result && result.isError && _jsx(Text, { color: "red", children: result.output })] }));
+}
+/** G12: Kubectl output renderer with status colorization */
+function KubectlBody({ input, result, }) {
+    const action = String(input.action ?? input.command ?? 'get');
+    const colorizeKubectlLine = (line, i) => {
+        // Status coloring for kubectl get output
+        if (/\bRunning\b/.test(line)) {
+            return _jsx(Text, { color: "green", children: line }, i);
+        }
+        if (/\b(Pending|ContainerCreating|Init:|PodInitializing)\b/.test(line)) {
+            return _jsx(Text, { color: "yellow", children: line }, i);
+        }
+        if (/\b(CrashLoopBackOff|Error|Failed|OOMKilled|ImagePullBackOff|ErrImagePull)\b/.test(line)) {
+            return _jsx(Text, { color: "red", children: line }, i);
+        }
+        if (/\bCompleted\b/.test(line)) {
+            return _jsx(Text, { color: "green", dimColor: true, children: line }, i);
+        }
+        if (/\bTerminating\b/.test(line)) {
+            return _jsx(Text, { color: "yellow", dimColor: true, children: line }, i);
+        }
+        return _jsx(Text, { dimColor: true, children: line }, i);
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "kubectl " }), _jsx(Text, { bold: true, children: action })] }), result && !result.isError && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: result.output.split('\n').slice(0, 80).map((line, i) => colorizeKubectlLine(line, i)) })), result && result.isError && _jsx(Text, { color: "red", children: result.output })] }));
+}
+/** M2: Docker build progress renderer */
+function DockerBuildBody({ input, result, streamingOutput, }) {
+    const action = String(input.action ?? '');
+    if (action !== 'build') {
+        // Non-build actions: show raw output
+        if (result && !result.isError) {
+            return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: result.output.split('\n').slice(0, 20).map((line, i) => (_jsx(Text, { dimColor: true, children: line }, i))) }));
+        }
+        if (result?.isError)
+            return _jsx(Text, { color: "red", children: result.output });
+        return null;
+    }
+    // Parse step progress from streaming output or result
+    const outputText = streamingOutput || result?.output || '';
+    const stepMatch = outputText.match(/Step\s+(\d+)\/(\d+)/gi);
+    const lastStep = stepMatch ? stepMatch[stepMatch.length - 1] : null;
+    const totalSteps = lastStep ? parseInt(lastStep.match(/\/(\d+)/)[1]) : 0;
+    const currentStep = lastStep ? parseInt(lastStep.match(/Step\s+(\d+)/i)[1]) : 0;
+    const succeeded = outputText.includes('Successfully built') || outputText.includes('Successfully tagged');
+    const failed = result?.isError || false;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [totalSteps > 0 && (_jsx(Box, { children: _jsxs(Text, { color: succeeded ? 'green' : failed ? 'red' : 'cyan', children: [succeeded ? '[ok] ' : failed ? '[xx] ' : '[..] ', "[", currentStep, "/", totalSteps, " steps]"] }) })), outputText.split('\n').filter(l => l.trim()).slice(-5).map((line, i) => {
+                const isStep = /^Step\s+\d+\/\d+/i.test(line.trim());
+                const isSuccess = /Successfully/i.test(line);
+                const isError = /error/i.test(line);
+                return (_jsx(Text, { color: isSuccess ? 'green' : isError ? 'red' : isStep ? 'cyan' : undefined, dimColor: !isStep && !isSuccess && !isError, children: line }, i));
+            }), result?.isError && _jsx(Text, { color: "red", children: result.output })] }));
+}
+function GenericBody({ input, result, }) {
+    const entries = Object.entries(input).slice(0, 6);
+    const omitted = Object.keys(input).length - entries.length;
+    return (_jsxs(Box, { flexDirection: "column", children: [entries.map(([key, value]) => {
+                const str = String(value);
+                const truncated = str.length > 120;
+                return (_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [key, ": "] }), _jsx(Text, { children: truncated ? `${str.slice(0, 120)}...` : str })] }, key));
+            }), omitted > 0 && (_jsxs(Text, { dimColor: true, italic: true, children: ["... ", omitted, " more fields"] })), result && result.isError && _jsx(Text, { color: "red", children: result.output }), result && !result.isError && (_jsx(Text, { dimColor: true, children: result.output.length > 120 ? `${result.output.slice(0, 120)}...` : result.output }))] }));
+}
+/* ---------------------------------------------------------------------------
+ * Single tool call box
+ * -------------------------------------------------------------------------*/
+function ToolCallBox({ toolCall, expanded }) {
+    const durationLabel = toolCall.duration != null ? ` (${toolCall.duration}ms)` : '';
+    const isLongRunning = LONG_RUNNING_TOOLS.has(toolCall.name.toLowerCase());
+    // Choose specialised body renderer based on tool name
+    const renderBody = () => {
+        if (!expanded && toolCall.status === 'completed') {
+            return (_jsx(Text, { dimColor: true, children: toolCall.result
+                    ? toolCall.result.isError
+                        ? toolCall.result.output.slice(0, 80)
+                        : 'completed'
+                    : 'completed' }));
+        }
+        const name = toolCall.name.toLowerCase();
+        const props = { input: toolCall.input, result: toolCall.result };
+        if (name === 'read_file' || name === 'read') {
+            return _jsx(ReadFileBody, { ...props });
+        }
+        if (name === 'edit_file' || name === 'edit') {
+            return _jsx(EditFileBody, { ...props });
+        }
+        if (name === 'bash' || name === 'execute' || name === 'run_command') {
+            return _jsx(BashBody, { ...props });
+        }
+        if (name.startsWith('terraform') || name === 'tf_plan' || name === 'tf_apply') {
+            return _jsx(TerraformBody, { ...props });
+        }
+        if (name === 'kubectl' || name === 'k8s') {
+            return _jsx(KubectlBody, { ...props });
+        }
+        if (name === 'docker') {
+            return _jsx(DockerBuildBody, { input: toolCall.input, result: toolCall.result, streamingOutput: toolCall.streamingOutput });
+        }
+        return _jsx(GenericBody, { ...props });
+    };
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: toolCall.status === 'failed' ? 'red' : 'gray', paddingX: 1, marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(StatusBadge, { status: toolCall.status, startTime: toolCall.startTime }), _jsxs(Text, { bold: true, children: [" ", toolCall.name] }), _jsx(Text, { dimColor: true, children: durationLabel }), toolCall.status === 'completed' && toolCall.duration != null && toolCall.duration > 5000 && (_jsxs(Text, { dimColor: true, children: [" [", (toolCall.duration / 1000).toFixed(1), "s]"] })), toolCall.status === 'running' && toolCall.name === 'logs' && (_jsx(Text, { color: "cyan", children: " \u25CF LIVE" }))] }), toolCall.status === 'running' && isLongRunning && (_jsx(Text, { dimColor: true, italic: true, children: "This may take several minutes for large infrastructure changes." })), toolCall.status === 'running' && toolCall.streamingOutput && toolCall.streamingOutput.trim() && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: "[LIVE] " }), _jsx(Text, { children: '─'.repeat(34) })] }), (() => {
+                        const allLines = toolCall.streamingOutput.split('\n');
+                        const isTerraformOrKubectl = toolCall.name === 'terraform' || toolCall.name === 'kubectl' || toolCall.name === 'logs';
+                        // M1: Increased streaming window — 60 lines for terraform/kubectl/logs, 40 for others
+                        const windowSize = isTerraformOrKubectl ? 60 : 40;
+                        const visibleLines = allLines.slice(-windowSize);
+                        // Pad to minimum 4 lines so the live area is always visible
+                        while (visibleLines.length < 4)
+                            visibleLines.push('');
+                        const hiddenCount = Math.max(0, allLines.length - windowSize);
+                        return (_jsxs(_Fragment, { children: [hiddenCount > 0 && (_jsxs(Text, { dimColor: true, children: ["... ", hiddenCount, " earlier lines"] })), visibleLines.map((line, i) => {
+                                    // M2: Color terraform/kubectl streaming output lines
+                                    let lineColor;
+                                    if (line.match(/^\s*\+/) || line.includes('will be created') || line.includes(' created'))
+                                        lineColor = 'green';
+                                    else if (line.match(/^\s*-/) || line.includes('will be destroyed') || line.includes(' destroyed'))
+                                        lineColor = 'red';
+                                    else if (line.match(/^\s*~/) || line.includes('will be updated') || line.includes(' modified'))
+                                        lineColor = 'yellow';
+                                    return _jsx(Text, { color: lineColor ?? 'gray', dimColor: !lineColor, children: line }, i);
+                                })] }));
+                    })()] })), _jsx(Box, { marginTop: 1, children: renderBody() })] }));
+}
+/* ---------------------------------------------------------------------------
+ * Public component
+ * -------------------------------------------------------------------------*/
+/**
+ * ToolCallDisplay renders a list of tool invocations. When `expanded` is
+ * false, completed calls are collapsed to a single summary line.
+ */
+export function ToolCallDisplay({ toolCalls, expanded = true }) {
+    if (toolCalls.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, children: toolCalls.map(tc => (_jsx(ToolCallBox, { toolCall: tc, expanded: expanded }, tc.id))) }));
+}

package/dist/src/ui/TreePane.js

@@ -0,0 +1,83 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TreePane Component (L1)
+ *
+ * Collapsible file tree sidebar using box-drawing characters.
+ * Shows 2 levels deep by default; toggle via /tree slash command.
+ */
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+function buildTree(dir, depth, maxDepth) {
+    if (depth > maxDepth)
+        return [];
+    try {
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
+        return entries
+            .filter(e => !e.name.startsWith('.') && e.name !== 'node_modules' && e.name !== 'dist')
+            .slice(0, 30) // limit entries per level
+            .map(e => {
+            const fullPath = path.join(dir, e.name);
+            const node = { name: e.name, fullPath, isDir: e.isDirectory() };
+            if (e.isDirectory() && depth < maxDepth) {
+                node.children = buildTree(fullPath, depth + 1, maxDepth);
+            }
+            return node;
+        });
+    }
+    catch {
+        return [];
+    }
+}
+function renderTree(nodes, prefix, selectedIdx, flatList, recentPaths) {
+    const elements = [];
+    nodes.forEach((node, i) => {
+        const isLast = i === nodes.length - 1;
+        const connector = isLast ? '└─' : '├─';
+        const childPrefix = prefix + (isLast ? '   ' : '│  ');
+        const globalIdx = flatList.indexOf(node);
+        const isSelected = globalIdx === selectedIdx;
+        const isRecent = recentPaths.has(node.fullPath);
+        elements.push(_jsxs(Text, { color: isSelected ? 'cyan' : isRecent ? 'yellow' : undefined, bold: isSelected, children: [prefix, connector, " ", node.isDir ? '[/] ' : '', node.name] }, node.fullPath));
+        if (node.children && node.children.length > 0) {
+            elements.push(...renderTree(node.children, childPrefix, selectedIdx, flatList, recentPaths));
+        }
+    });
+    return elements;
+}
+function flattenTree(nodes) {
+    const result = [];
+    for (const node of nodes) {
+        result.push(node);
+        if (node.children) {
+            result.push(...flattenTree(node.children));
+        }
+    }
+    return result;
+}
+export function TreePane({ cwd = process.cwd(), recentFiles = [], onSelectFile }) {
+    const [tree, setTree] = useState([]);
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const recentPaths = new Set(recentFiles);
+    useEffect(() => {
+        const nodes = buildTree(cwd, 0, 2);
+        setTree(nodes);
+    }, [cwd]);
+    const flat = flattenTree(tree);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIdx(prev => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIdx(prev => Math.min(flat.length - 1, prev + 1));
+        }
+        else if (key.return && flat[selectedIdx]) {
+            const node = flat[selectedIdx];
+            if (!node.isDir && onSelectFile) {
+                onSelectFile(node.fullPath);
+            }
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, flexShrink: 0, overflow: "hidden", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Files" }), _jsx(Text, { dimColor: true, children: " (\u2191\u2193 navigate \u00B7 Enter to @ref \u00B7 /tree to toggle)" })] }), _jsxs(Text, { bold: true, dimColor: true, children: [path.basename(cwd), "/"] }), renderTree(tree, '', selectedIdx, flat, recentPaths)] }));
+}