@build-astron-co/nimbus 0.2.0 → 0.4.0

package/src/ui/PermissionPrompt.tsx

@@ -41,6 +41,14 @@ const RISK_COLORS: Record<RiskLevel, string> = {
   critical: 'magenta',
 };
 
+/** H4: Human-readable descriptions of each risk tier. */
+const RISK_DESCRIPTIONS: Record<RiskLevel, string> = {
+  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.
  */
@@ -112,12 +120,16 @@ export function PermissionPrompt({
       </Box>
 
       {/* Risk level */}
-      <Box marginBottom={1}>
+      <Box>
         <Text dimColor>Risk: </Text>
         <Text bold color={riskColor}>
           {riskLevel.toUpperCase()}
         </Text>
       </Box>
+      {/* H4: Risk description */}
+      <Box marginBottom={1}>
+        <Text dimColor>{RISK_DESCRIPTIONS[riskLevel]}</Text>
+      </Box>
 
       {/* Parameters */}
       <Box flexDirection="column" marginBottom={1}>
@@ -132,19 +144,19 @@ export function PermissionPrompt({
         <Text color="green" bold inverse={pressed === 'a'}>
           [a]
         </Text>
-        <Text> Approve </Text>
+        <Text>=approve  </Text>
         <Text color="red" bold inverse={pressed === 'r'}>
           [r]
         </Text>
-        <Text> Reject </Text>
+        <Text>=reject  </Text>
         <Text color="cyan" bold inverse={pressed === 'A'}>
           [A]
         </Text>
-        <Text> Approve all </Text>
+        <Text>=approve-all-session  </Text>
         <Text color="blue" bold inverse={pressed === 's'}>
           [s]
         </Text>
-        <Text> Session</Text>
+        <Text>=approve-this-tool-session</Text>
       </Box>
     </Box>
   );

package/src/ui/StatusBar.tsx

@@ -5,7 +5,7 @@
  * percentage bar, estimated cost, snapshot count, and elapsed processing time.
  *
  * Layout:
- *   [Plan] [Build] [Deploy] | Tokens: 45.2k/200k (22%) | Cost: $0.03 | Snapshots: 3 | 12s
+ *   [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%
@@ -24,6 +24,20 @@ export interface StatusBarProps {
   isProcessing?: boolean;
   /** Timestamp (Date.now()) when processing started. Null when idle. */
   processingStartTime?: number | null;
+  /** Number of lines in the current input (Gap 9 — multi-line indicator). */
+  inputLineCount?: number;
+  /** C1: Show scroll hint when the user has scrolled away from the bottom. */
+  showScrollHint?: boolean;
+  /** H1: Toast message shown after copying a code block to clipboard. */
+  copyToast?: string;
+  /** Show "Esc to stop" hint when a log stream is active. */
+  showStreamingHint?: boolean;
+  /** H5: Mode change toast — shown for 2 seconds after Tab cycle. */
+  modeToast?: string;
+  /** M1: Active search query (shows "Search: N results" when set). */
+  searchQuery?: string;
+  /** M1: Number of messages matching the current search. */
+  searchResultCount?: number;
 }
 
 /** All modes in display order. */
@@ -55,6 +69,13 @@ function tokenColor(pct: number): string {
   return 'green';
 }
 
+/**
+ * Determine if an environment name is production-like (G1).
+ */
+function isProdEnvironment(name: string): boolean {
+  return /prod|production|live/i.test(name);
+}
+
 /**
  * A single mode badge. The active mode is rendered with inverse styling.
  */
@@ -79,6 +100,13 @@ export function StatusBar({
   session,
   isProcessing = false,
   processingStartTime = null,
+  inputLineCount = 1,
+  showScrollHint = false,
+  copyToast = '',
+  showStreamingHint = false,
+  modeToast,
+  searchQuery,
+  searchResultCount,
 }: StatusBarProps) {
   const pct =
     session.maxTokens > 0 ? Math.round((session.tokenCount / session.maxTokens) * 100) : 0;
@@ -115,6 +143,24 @@ export function StatusBar({
     }
   }, [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 (
     <Box
       borderStyle="single"
@@ -132,26 +178,99 @@ export function StatusBar({
 
       {/* Metrics + keyboard hints */}
       <Box>
-        <Text dimColor>Tokens: </Text>
+        <Text dimColor>Ctx: </Text>
+        <Text color={pctColor}>{progressBar}</Text>
+        <Text dimColor> </Text>
         <Text color={pctColor}>
           {formatTokens(session.tokenCount)}/{formatTokens(session.maxTokens)} ({pct}%)
         </Text>
         <Text dimColor> | Cost: </Text>
         <Text>{costStr}</Text>
         <Text dimColor> | Snapshots: </Text>
-        <Text>{String(session.snapshotCount)}</Text>
+        <Text>{snapshotDisplay}</Text>
+        {/* G1: Terraform workspace display */}
+        {session.terraformWorkspace && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color={tfColor}>tf:{session.terraformWorkspace}</Text>
+          </>
+        )}
+        {/* G1: kubectl context display */}
+        {session.kubectlContext && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color={k8sColor}>k8s:{session.kubectlContext}</Text>
+          </>
+        )}
+        {/* G15: Infra cost delta display */}
+        {session.infraCostDelta && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="green">delta:{session.infraCostDelta}</Text>
+          </>
+        )}
         {isProcessing && elapsedSeconds > 0 && (
           <>
             <Text dimColor> | </Text>
             <Text color="cyan">{elapsedSeconds}s</Text>
           </>
         )}
+        {inputLineCount > 1 && !isProcessing && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="cyan">{inputLineCount} lines</Text>
+          </>
+        )}
         <Text dimColor> | Tab</Text>
         <Text dimColor>:mode </Text>
         <Text dimColor>Esc</Text>
         <Text dimColor>:cancel </Text>
         <Text dimColor>^C</Text>
         <Text dimColor>:exit</Text>
+        {/* C3: Discoverability hints when idle */}
+        {!isProcessing && inputLineCount <= 1 && (
+          <>
+            <Text dimColor> | </Text>
+            <Text dimColor>F1:help  /tree  /terminal</Text>
+            <Text dimColor>  </Text>
+            <Text dimColor>? help</Text>
+          </>
+        )}
+        {/* C1: Scroll hint when user has scrolled away from bottom */}
+        {showScrollHint && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="cyan">↑↓ scroll | G bottom</Text>
+          </>
+        )}
+        {/* H1: Streaming tool indicator — show "Esc to stop" when a log stream is active */}
+        {showStreamingHint && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="cyan">Esc:stop stream</Text>
+          </>
+        )}
+        {/* H1: Copy toast message after copying a code block */}
+        {copyToast && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="green">{copyToast}</Text>
+          </>
+        )}
+        {/* H5: Mode change toast */}
+        {modeToast && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="cyan" italic>{modeToast}</Text>
+          </>
+        )}
+        {/* M1: Search result count */}
+        {searchQuery && searchResultCount !== undefined && (
+          <>
+            <Text dimColor> | </Text>
+            <Text color="yellow">Search: "{searchQuery}" — {searchResultCount} results</Text>
+          </>
+        )}
       </Box>
     </Box>
   );

package/src/ui/TerminalPane.tsx

@@ -0,0 +1,84 @@
+/**
+ * TerminalPane Component (M1)
+ *
+ * Read-only tool output observation pane showing the last N lines from
+ * completed tool calls. Rendered alongside MessageList in a side-by-side
+ * layout when active. Toggle via /terminal slash command.
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { UIToolCall } from './types';
+
+export interface TerminalPaneProps {
+  /** Tool calls to display output from. */
+  toolCalls: UIToolCall[];
+  /** Maximum number of output lines to show (default: 20). */
+  maxLines?: number;
+  /** Width percentage hint for layout (unused — parent controls width). */
+  width?: number;
+}
+
+/**
+ * A scrollable pane showing the last tool outputs as a rolling buffer.
+ */
+export function TerminalPane({ toolCalls, maxLines = 20 }: TerminalPaneProps) {
+  // Collect lines from all tool calls (completed + running with streaming output)
+  const outputLines: Array<{ text: string; isError: boolean; toolName: string; live?: boolean }> = [];
+
+  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 (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="gray"
+      paddingX={1}
+      flexGrow={1}
+      overflow="hidden"
+    >
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          Terminal Output
+        </Text>
+        <Text dimColor> (read-only · /terminal to toggle)</Text>
+      </Box>
+
+      {visible.length === 0 ? (
+        <Text dimColor italic>No tool output yet.</Text>
+      ) : (
+        visible.map((line, i) => (
+          <Text
+            key={i}
+            color={line.isError ? 'red' : line.live ? 'cyan' : undefined}
+            dimColor={!line.isError && !line.live}
+            wrap="truncate"
+          >
+            {line.live ? '[>] ' : ''}{line.text}
+          </Text>
+        ))
+      )}
+    </Box>
+  );
+}

package/src/ui/ToolCallDisplay.tsx

@@ -15,9 +15,10 @@
  * All other tools fall through to a generic key/value display.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import Spinner from 'ink-spinner';
+import { parseTerraformPlanOutput } from '../agent/deploy-preview';
 import type { UIToolCall } from './types';
 
 /** Props accepted by the ToolCallDisplay component. */
@@ -36,7 +37,25 @@ const COLLAPSED_LINES = 20;
  * Status badge
  * -------------------------------------------------------------------------*/
 
-function StatusBadge({ status }: { status: UIToolCall['status'] }) {
+/** 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 }: { status: UIToolCall['status']; startTime?: number }) {
+  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 <Text dimColor>[pending]</Text>;
@@ -44,6 +63,7 @@ function StatusBadge({ status }: { status: UIToolCall['status'] }) {
       return (
         <Text color="cyan">
           <Spinner type="dots" />
+          {startTime && elapsed > 0 ? ` ${elapsed}s` : ''}
         </Text>
       );
     case 'completed':
@@ -258,31 +278,129 @@ function TerraformBody({
   input: Record<string, unknown>;
   result?: UIToolCall['result'];
 }) {
-  const subcommand = String(input.command ?? input.subcommand ?? 'plan');
+  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 (
     <Box flexDirection="column">
       <Text>
         <Text dimColor>terraform </Text>
-        <Text bold>{subcommand}</Text>
+        <Text bold>{action}</Text>
       </Text>
-      {result && !result.isError && (
-        <Box flexDirection="column" marginTop={1}>
-          {result.output.split('\n').map((line, i) => {
-            let color: string | undefined;
-            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';
-            }
+
+      {/* Gap 8: Structured plan summary panel */}
+      {isPlan && changes.length > 0 && result && !result.isError && (
+        <Box flexDirection="column" marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
+          <Text bold>Plan Summary</Text>
+          <Box>
+            {creates > 0 && <Text color="green">+{creates} create  </Text>}
+            {updates > 0 && <Text color="yellow">~{updates} change  </Text>}
+            {destroys > 0 && <Text color="red">-{destroys} destroy  </Text>}
+            {replaces > 0 && <Text color="magenta">±{replaces} replace  </Text>}
+            {creates === 0 && updates === 0 && destroys === 0 && replaces === 0 && (
+              <Text dimColor>No changes</Text>
+            )}
+          </Box>
+          {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 (
-              <Text key={i} color={color} dimColor={!color}>
-                {line}
+              <Text key={i} color={color}>
+                {icon} {c.resource}
               </Text>
             );
           })}
+          {changes.length > 10 && <Text dimColor>... and {changes.length - 10} more</Text>}
+        </Box>
+      )}
+
+      {/* H1: Fallback raw line coloring — show up to 200 lines with indicator for truncation */}
+      {!(isPlan && changes.length > 0) && result && !result.isError && (
+        <Box flexDirection="column" marginTop={1}>
+          {(() => {
+            const lines = result.output.split('\n');
+            const MAX_LINES = 200;
+            const displayLines = lines.slice(0, MAX_LINES);
+            return (
+              <>
+                {displayLines.map((line, i) => {
+                  let color: string | undefined;
+                  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 (
+                    <Text key={i} color={color} dimColor={!color}>
+                      {line}
+                    </Text>
+                  );
+                })}
+                {lines.length > MAX_LINES && (
+                  <Text dimColor>... {lines.length - MAX_LINES} more lines (full output saved to tool history)</Text>
+                )}
+              </>
+            );
+          })()}
+        </Box>
+      )}
+      {result && result.isError && <Text color="red">{result.output}</Text>}
+    </Box>
+  );
+}
+
+/** G12: Kubectl output renderer with status colorization */
+function KubectlBody({
+  input,
+  result,
+}: {
+  input: Record<string, unknown>;
+  result?: UIToolCall['result'];
+}) {
+  const action = String(input.action ?? input.command ?? 'get');
+
+  const colorizeKubectlLine = (line: string, i: number): React.ReactNode => {
+    // Status coloring for kubectl get output
+    if (/\bRunning\b/.test(line)) {
+      return <Text key={i} color="green">{line}</Text>;
+    }
+    if (/\b(Pending|ContainerCreating|Init:|PodInitializing)\b/.test(line)) {
+      return <Text key={i} color="yellow">{line}</Text>;
+    }
+    if (/\b(CrashLoopBackOff|Error|Failed|OOMKilled|ImagePullBackOff|ErrImagePull)\b/.test(line)) {
+      return <Text key={i} color="red">{line}</Text>;
+    }
+    if (/\bCompleted\b/.test(line)) {
+      return <Text key={i} color="green" dimColor>{line}</Text>;
+    }
+    if (/\bTerminating\b/.test(line)) {
+      return <Text key={i} color="yellow" dimColor>{line}</Text>;
+    }
+    return <Text key={i} dimColor>{line}</Text>;
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text dimColor>kubectl </Text>
+        <Text bold>{action}</Text>
+      </Text>
+      {result && !result.isError && (
+        <Box flexDirection="column" marginTop={1}>
+          {/* M1: Increased from 40 to 80 lines for better kubectl output visibility */}
+          {result.output.split('\n').slice(0, 80).map((line, i) => colorizeKubectlLine(line, i))}
         </Box>
       )}
       {result && result.isError && <Text color="red">{result.output}</Text>}
@@ -290,6 +408,66 @@ function TerraformBody({
   );
 }
 
+/** M2: Docker build progress renderer */
+function DockerBuildBody({
+  input,
+  result,
+  streamingOutput,
+}: {
+  input: Record<string, unknown>;
+  result?: UIToolCall['result'];
+  streamingOutput?: string;
+}) {
+  const action = String(input.action ?? '');
+  if (action !== 'build') {
+    // Non-build actions: show raw output
+    if (result && !result.isError) {
+      return (
+        <Box flexDirection="column" marginTop={1}>
+          {result.output.split('\n').slice(0, 20).map((line, i) => (
+            <Text key={i} dimColor>{line}</Text>
+          ))}
+        </Box>
+      );
+    }
+    if (result?.isError) return <Text color="red">{result.output}</Text>;
+    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 (
+    <Box flexDirection="column" marginTop={1}>
+      {totalSteps > 0 && (
+        <Box>
+          <Text color={succeeded ? 'green' : failed ? 'red' : 'cyan'}>
+            {succeeded ? '[ok] ' : failed ? '[xx] ' : '[..] '}
+            [{currentStep}/{totalSteps} steps]
+          </Text>
+        </Box>
+      )}
+      {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 (
+          <Text key={i} color={isSuccess ? 'green' : isError ? 'red' : isStep ? 'cyan' : undefined} dimColor={!isStep && !isSuccess && !isError}>
+            {line}
+          </Text>
+        );
+      })}
+      {result?.isError && <Text color="red">{result.output}</Text>}
+    </Box>
+  );
+}
+
 function GenericBody({
   input,
   result,
@@ -332,6 +510,7 @@ function GenericBody({
 
 function ToolCallBox({ toolCall, expanded }: { toolCall: UIToolCall; expanded: boolean }) {
   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 = () => {
@@ -362,6 +541,12 @@ function ToolCallBox({ toolCall, expanded }: { toolCall: UIToolCall; expanded: b
     if (name.startsWith('terraform') || name === 'tf_plan' || name === 'tf_apply') {
       return <TerraformBody {...props} />;
     }
+    if (name === 'kubectl' || name === 'k8s') {
+      return <KubectlBody {...props} />;
+    }
+    if (name === 'docker') {
+      return <DockerBuildBody input={toolCall.input} result={toolCall.result} streamingOutput={toolCall.streamingOutput} />;
+    }
     return <GenericBody {...props} />;
   };
 
@@ -375,11 +560,60 @@ function ToolCallBox({ toolCall, expanded }: { toolCall: UIToolCall; expanded: b
     >
       {/* Header */}
       <Box>
-        <StatusBadge status={toolCall.status} />
+        <StatusBadge status={toolCall.status} startTime={toolCall.startTime} />
         <Text bold> {toolCall.name}</Text>
         <Text dimColor>{durationLabel}</Text>
+        {/* M4: Highlight duration prominently when operation took > 5 seconds */}
+        {toolCall.status === 'completed' && toolCall.duration != null && toolCall.duration > 5000 && (
+          <Text dimColor> [{(toolCall.duration / 1000).toFixed(1)}s]</Text>
+        )}
+        {toolCall.status === 'running' && toolCall.name === 'logs' && (
+          <Text color="cyan"> ● LIVE</Text>
+        )}
       </Box>
 
+      {/* Long-running hint */}
+      {toolCall.status === 'running' && isLongRunning && (
+        <Text dimColor italic>
+          This may take several minutes for large infrastructure changes.
+        </Text>
+      )}
+
+      {/* Streaming output — shown while tool is running */}
+      {toolCall.status === 'running' && toolCall.streamingOutput && toolCall.streamingOutput.trim() && (
+        <Box flexDirection="column" marginTop={1} marginLeft={2}>
+          <Box>
+            <Text color="green" bold>[LIVE] </Text>
+            <Text>{'─'.repeat(34)}</Text>
+          </Box>
+          {(() => {
+            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 (
+              <>
+                {hiddenCount > 0 && (
+                  <Text dimColor>... {hiddenCount} earlier lines</Text>
+                )}
+                {visibleLines.map((line, i) => {
+                  // M2: Color terraform/kubectl streaming output lines
+                  let lineColor: string | undefined;
+                  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 <Text key={i} color={lineColor ?? 'gray'} dimColor={!lineColor}>{line}</Text>;
+                })}
+              </>
+            );
+          })()}
+        </Box>
+      )}
+
       {/* Body */}
       <Box marginTop={1}>{renderBody()}</Box>
     </Box>