@build-astron-co/nimbus 0.2.0 → 0.4.0

package/src/ui/DeployPreview.tsx

@@ -99,70 +99,75 @@ export function DeployPreview({ preview, onDecide }: DeployPreviewProps) {
   const counts = summaryCounts(preview.changes);
 
   return (
-    <Box flexDirection="column" borderStyle="double" borderColor="yellow" paddingX={1} paddingY={1}>
-      {/* Title */}
-      <Box marginBottom={1}>
-        <Text bold color="yellow">
-          Deploy Preview
-        </Text>
-        <Text dimColor> ({preview.tool})</Text>
-      </Box>
-
-      {/* Summary counts */}
-      <Box marginBottom={1}>
-        <Text color="green">+{counts.add} to add</Text>
-        <Text> </Text>
-        <Text color="yellow">~{counts.change} to change</Text>
-        <Text> </Text>
-        <Text color="red">-{counts.destroy} to destroy</Text>
-      </Box>
+    <Box flexDirection="column">
+      {/* G20: Tip line before the main content box */}
+      <Text dimColor>Tip: Run /plan to review changes in detail before applying.</Text>
 
-      {/* Change table */}
-      <Box flexDirection="column" marginBottom={1}>
-        {preview.changes.map((change, idx) => (
-          <ChangeRow key={idx} change={change} />
-        ))}
-        {preview.changes.length === 0 && <Text dimColor>No resource changes detected.</Text>}
-      </Box>
+      <Box flexDirection="column" borderStyle="double" borderColor="yellow" paddingX={1} paddingY={1}>
+        {/* Title */}
+        <Box marginBottom={1}>
+          <Text bold color="yellow">
+            Deploy Preview
+          </Text>
+          <Text dimColor> ({preview.tool})</Text>
+        </Box>
 
-      {/* Cost impact */}
-      {preview.costImpact && (
-        <Box>
-          <Text dimColor>Cost impact: </Text>
-          <Text>{preview.costImpact}</Text>
+        {/* Summary counts */}
+        <Box marginBottom={1}>
+          <Text color="green">+{counts.add} to add</Text>
+          <Text> </Text>
+          <Text color="yellow">~{counts.change} to change</Text>
+          <Text> </Text>
+          <Text color="red">-{counts.destroy} to destroy</Text>
         </Box>
-      )}
 
-      {/* Blast radius */}
-      {preview.blastRadius && (
-        <Box>
-          <Text dimColor>Blast radius: </Text>
-          <Text color="yellow">{preview.blastRadius}</Text>
+        {/* Change table */}
+        <Box flexDirection="column" marginBottom={1}>
+          {preview.changes.map((change, idx) => (
+            <ChangeRow key={idx} change={change} />
+          ))}
+          {preview.changes.length === 0 && <Text dimColor>No resource changes detected.</Text>}
         </Box>
-      )}
 
-      {/* Affected services */}
-      {preview.affectedServices && preview.affectedServices.length > 0 && (
-        <Box>
-          <Text dimColor>Affected services: </Text>
-          <Text>{preview.affectedServices.join(', ')}</Text>
+        {/* Cost impact */}
+        {preview.costImpact && (
+          <Box>
+            <Text dimColor>Cost impact: </Text>
+            <Text>{preview.costImpact}</Text>
+          </Box>
+        )}
+
+        {/* Blast radius */}
+        {preview.blastRadius && (
+          <Box>
+            <Text dimColor>Blast radius: </Text>
+            <Text color="yellow">{preview.blastRadius}</Text>
+          </Box>
+        )}
+
+        {/* Affected services */}
+        {preview.affectedServices && preview.affectedServices.length > 0 && (
+          <Box>
+            <Text dimColor>Affected services: </Text>
+            <Text>{preview.affectedServices.join(', ')}</Text>
+          </Box>
+        )}
+
+        {/* Action keys */}
+        <Box marginTop={1}>
+          <Text color="green" bold>
+            [a]
+          </Text>
+          <Text> Approve </Text>
+          <Text color="red" bold>
+            [r]
+          </Text>
+          <Text> Reject </Text>
+          <Text color="cyan" bold>
+            [p]
+          </Text>
+          <Text> Show full plan</Text>
         </Box>
-      )}
-
-      {/* Action keys */}
-      <Box marginTop={1}>
-        <Text color="green" bold>
-          [a]
-        </Text>
-        <Text> Approve </Text>
-        <Text color="red" bold>
-          [r]
-        </Text>
-        <Text> Reject </Text>
-        <Text color="cyan" bold>
-          [p]
-        </Text>
-        <Text> Show full plan</Text>
       </Box>
     </Box>
   );

package/src/ui/FileDiffModal.tsx

@@ -0,0 +1,162 @@
+/**
+ * FileDiffModal Component
+ *
+ * Shows a proposed file change as a unified diff and waits for the user
+ * to approve or reject before the agent applies the change.
+ */
+
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+/** Decision returned by the file diff modal. */
+export type FileDiffDecision = 'apply' | 'reject' | 'apply-all' | 'reject-all';
+
+/**
+ * G9: A batch of file diffs to review sequentially.
+ *
+ * Use `queueFileDiffBatch` to present multiple diffs one at a time through
+ * the existing FileDiffModal, collecting per-file decisions.
+ */
+export interface FileDiffBatch {
+  /** The diffs to review, in order. */
+  files: Array<{ filePath: string; diff: string; toolName: string }>;
+  /** Called when the user has decided on every file. */
+  onComplete: (decisions: FileDiffDecision[]) => void;
+}
+
+/**
+ * G9: Process a FileDiffBatch sequentially, presenting each diff via the
+ * provided `showDiff` callback (which renders a `FileDiffRequest`).
+ *
+ * The caller supplies `showDiff` which wires into App state.  Each file is
+ * presented in order; 'apply-all' or 'reject-all' short-circuits the rest.
+ */
+export function queueFileDiffBatch(
+  batch: FileDiffBatch,
+  showDiff: (req: FileDiffRequest) => void
+): void {
+  const decisions: FileDiffDecision[] = [];
+
+  function processNext(index: number): void {
+    if (index >= batch.files.length) {
+      batch.onComplete(decisions);
+      return;
+    }
+
+    const file = batch.files[index];
+    showDiff({
+      toolName: file.toolName,
+      filePath: file.filePath,
+      diff: file.diff,
+      currentIndex: index + 1,
+      totalCount: batch.files.length,
+      onDecide: (decision) => {
+        decisions.push(decision);
+        if (decision === 'apply-all') {
+          // Fill remaining with 'apply'
+          for (let i = index + 1; i < batch.files.length; i++) {
+            decisions.push('apply');
+          }
+          batch.onComplete(decisions);
+        } else if (decision === 'reject-all') {
+          // Fill remaining with 'reject'
+          for (let i = index + 1; i < batch.files.length; i++) {
+            decisions.push('reject');
+          }
+          batch.onComplete(decisions);
+        } else {
+          processNext(index + 1);
+        }
+      },
+    });
+  }
+
+  processNext(0);
+}
+
+/** A pending file diff request. */
+export interface FileDiffRequest {
+  /** Tool that wants to modify the file. */
+  toolName: string;
+  /** Absolute or relative path of the file being changed. */
+  filePath: string;
+  /** Unified diff string (--- / +++ / @@ lines). */
+  diff: string;
+  /** 1-based index of this diff in the current batch (for progress display). */
+  currentIndex?: number;
+  /** Total number of diffs in the current batch (for progress display). */
+  totalCount?: number;
+  /** Callback invoked with the user's decision. */
+  onDecide: (d: FileDiffDecision) => void;
+}
+
+/** Props for the FileDiffModal component. */
+export interface FileDiffModalProps {
+  request: FileDiffRequest;
+}
+
+const VISIBLE_LINES = 30;
+
+/**
+ * Modal overlay that displays a proposed file diff and collects user approval.
+ *
+ * Keyboard bindings:
+ *   a — Apply this change
+ *   r — Reject this change
+ *   A — Apply this and all remaining changes (skip future prompts)
+ *   R — Reject this and all remaining changes
+ *   ↑/↓ — Scroll up/down one line
+ *   PgUp/PgDn — Scroll up/down one page
+ */
+export function FileDiffModal({ request }: FileDiffModalProps) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  const diffLines = request.diff.split('\n');
+  const total = diffLines.length;
+  const maxOffset = Math.max(0, total - VISIBLE_LINES);
+
+  useInput((input, key) => {
+    if (input === 'a') request.onDecide('apply');
+    if (input === 'r') request.onDecide('reject');
+    if (input === 'A') request.onDecide('apply-all');
+    if (input === 'R') request.onDecide('reject-all');
+    if (key.upArrow) setScrollOffset(o => Math.max(0, o - 1));
+    if (key.downArrow) setScrollOffset(o => Math.min(maxOffset, o + 1));
+    if (key.pageUp) setScrollOffset(o => Math.max(0, o - VISIBLE_LINES));
+    if (key.pageDown) setScrollOffset(o => Math.min(maxOffset, o + VISIBLE_LINES));
+  });
+
+  const endLine = Math.min(scrollOffset + VISIBLE_LINES, total);
+  const displayLines = diffLines.slice(scrollOffset, endLine);
+
+  const progress =
+    request.totalCount && request.currentIndex
+      ? ` (${request.currentIndex}/${request.totalCount})`
+      : '';
+
+  const scrollIndicator = total > VISIBLE_LINES
+    ? ` [${scrollOffset + 1}–${endLine} of ${total} lines]`
+    : '';
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
+      <Text bold color="yellow">
+        {request.toolName}{progress}: {request.filePath}{scrollIndicator}
+      </Text>
+      <Box flexDirection="column" marginY={1}>
+        {displayLines.map((line, i) => {
+          let color: string | undefined;
+          if (line.startsWith('+') && !line.startsWith('+++')) color = 'green';
+          else if (line.startsWith('-') && !line.startsWith('---')) color = 'red';
+          else if (line.startsWith('@@')) color = 'cyan';
+          return (
+            <Text key={i} color={color} dimColor={!color}>
+              {line}
+            </Text>
+          );
+        })}
+      </Box>
+      <Text dimColor>  [a] Apply   [r] Reject   [A] Apply all   [R] Reject all   [↑/↓] Scroll   [PgUp/PgDn] Page</Text>
+    </Box>
+  );
+}

package/src/ui/Header.tsx

@@ -22,6 +22,13 @@ const MODE_COLORS: Record<AgentMode, string> = {
   deploy: 'red',
 };
 
+/** Prominent mode labels for visual distinction (Gap 11). */
+const MODE_LABELS: Record<AgentMode, string> = {
+  plan: '[P] PLAN',
+  build: '[B] BUILD',
+  deploy: '[D] DEPLOY',
+};
+
 /**
  * Truncate a session ID to a short prefix for display purposes.
  */
@@ -29,40 +36,96 @@ function shortId(id: string): string {
   return id.length > 8 ? id.slice(0, 8) : id;
 }
 
+/**
+ * Determine if an environment name is production-like.
+ */
+function isProdEnvironment(name: string): boolean {
+  return /prod|production|live/i.test(name);
+}
+
 /**
  * Header renders a single-line banner containing the CLI version, the model
  * name, the abbreviated session ID, and a colour-coded mode badge.
  */
 export function Header({ session }: HeaderProps) {
   const modeColor = MODE_COLORS[session.mode];
+  const modeLabel = MODE_LABELS[session.mode];
+  // Gap 11: deploy mode gets a red border on the entire header for visual urgency
+  const borderColor = session.mode === 'deploy' ? 'red' : 'cyan';
+
+  const tfColor = session.terraformWorkspace && isProdEnvironment(session.terraformWorkspace)
+    ? 'yellow'
+    : 'green';
+  const k8sColor = session.kubectlContext && isProdEnvironment(session.kubectlContext)
+    ? 'yellow'
+    : 'green';
+
+  const isProd = isProdEnvironment(session.terraformWorkspace ?? '') || isProdEnvironment(session.kubectlContext ?? '');
+  const showProdWarning = session.mode === 'deploy' && isProd;
 
   return (
-    <Box
-      borderStyle="round"
-      borderColor="cyan"
-      paddingX={1}
-      justifyContent="space-between"
-      width="100%"
-    >
-      {/* Left: branding + version */}
-      <Box>
-        <Text bold color="cyan">
-          nimbus
-        </Text>
-        <Text dimColor> v{VERSION}</Text>
-        <Text dimColor> {' \u2014 '}</Text>
-        <Text>{session.model}</Text>
-        <Text dimColor> {' \u2014 '}</Text>
-        <Text dimColor>session: {shortId(session.id)}</Text>
-      </Box>
+    <Box flexDirection="column" width="100%">
+      <Box
+        borderStyle="round"
+        borderColor={borderColor}
+        paddingX={1}
+        justifyContent="space-between"
+        width="100%"
+      >
+        {/* Left: branding + version */}
+        <Box>
+          <Text bold color="cyan">
+            nimbus
+          </Text>
+          <Text dimColor> v{VERSION}</Text>
+          <Text dimColor> {' -- '}</Text>
+          <Text>{session.model}</Text>
+          <Text dimColor> {' -- '}</Text>
+          <Text dimColor>session: {shortId(session.id)}</Text>
+        </Box>
+
+        {/* Center: infra context badges */}
+        <Box>
+          {session.llmHealth === 'checking' && <Text color="yellow" dimColor> [~] </Text>}
+          {session.llmHealth === 'ok' && <Text color="green"> [+] </Text>}
+          {session.llmHealth === 'error' && <Text color="red"> [-] no LLM</Text>}
+          {session.terraformWorkspace && (
+            <>
+              <Text> </Text>
+              <Text color={tfColor} bold>tf:{session.terraformWorkspace}</Text>
+              {isProdEnvironment(session.terraformWorkspace) && (
+                <Text color="red" bold> [PROD]</Text>
+              )}
+            </>
+          )}
+          {session.kubectlContext && (
+            <>
+              <Text> </Text>
+              <Text color={k8sColor} bold>k8s:{session.kubectlContext}</Text>
+              {isProdEnvironment(session.kubectlContext) && (
+                <Text color="red" bold> [PROD]</Text>
+              )}
+            </>
+          )}
+          {/* M2: Context switcher shortcut hint when context is active */}
+          {(session.terraformWorkspace || session.kubectlContext) && (
+            <Text dimColor> [/k8s-ctx | /tf-ws to switch]</Text>
+          )}
+        </Box>
 
-      {/* Right: mode badge */}
-      <Box>
-        <Text color={modeColor} bold inverse>
-          {' '}
-          {session.mode.toUpperCase()}{' '}
-        </Text>
+        {/* Right: mode badge */}
+        <Box>
+          <Text color={modeColor} bold inverse>
+            {' '}
+            {modeLabel}{' '}
+          </Text>
+        </Box>
       </Box>
+      {showProdWarning && (
+        <Box paddingX={2}>
+          <Text color="red" bold>!! DEPLOY MODE — targeting production environment !!</Text>
+        </Box>
+      )}
     </Box>
   );
 }

package/src/ui/HelpModal.tsx

@@ -0,0 +1,57 @@
+/**
+ * HelpModal Component
+ *
+ * Dismissable overlay that shows all available slash commands and keyboard
+ * shortcuts without polluting the conversation history.
+ */
+
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+
+interface HelpModalProps {
+  onClose: () => void;
+}
+
+export function HelpModal({ onClose }: HelpModalProps) {
+  useInput((input, key) => {
+    if (key.escape || input === 'q' || input === '?') onClose();
+  });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1} marginY={1}>
+      <Text bold color="cyan"> Nimbus DevOps Agent — Help </Text>
+      <Text> </Text>
+      <Text bold>Slash Commands:</Text>
+      <Text>  /help           Show this help</Text>
+      <Text>  /mode plan      Switch to plan mode (read-only tools)</Text>
+      <Text>  /mode build     Switch to build mode (file + infra tools)</Text>
+      <Text>  /mode deploy    Switch to deploy mode (all tools + previews)</Text>
+      <Text>  /clear          Clear conversation history</Text>
+      <Text>  /compact        Compress context to free tokens</Text>
+      <Text>  /context        Show context window usage</Text>
+      <Text>  /cost           Show token usage and cost</Text>
+      <Text>  /diff           Show unstaged git diff</Text>
+      <Text>  /init           Regenerate NIMBUS.md project context</Text>
+      <Text>  /model [name]   Show or switch the active model</Text>
+      <Text>  /models         List all available provider models</Text>
+      <Text>  /undo           Undo last file change (snapshot)</Text>
+      <Text>  /redo           Redo last undone change</Text>
+      <Text>  /sessions       List active sessions</Text>
+      <Text>  /new [name]     Create a new session</Text>
+      <Text>  /switch {'<id>'}   Switch to a different session</Text>
+      <Text> </Text>
+      <Text bold>DevOps Tools Available:</Text>
+      <Text>  terraform, kubectl, helm, cloud_discover, cost_estimate,</Text>
+      <Text>  drift_detect, deploy_preview, git, task (subagent)</Text>
+      <Text> </Text>
+      <Text bold>Keyboard Shortcuts:</Text>
+      <Text>  ?               Open this help panel</Text>
+      <Text>  Tab             Cycle mode (plan → build → deploy)</Text>
+      <Text>  Ctrl+R          Search input history</Text>
+      <Text>  Ctrl+C          Interrupt or exit</Text>
+      <Text>  Esc / q / ?     Close this help</Text>
+      <Text> </Text>
+      <Text dimColor>Press Esc, q, or ? to close</Text>
+    </Box>
+  );
+}