@build-astron-co/nimbus 0.4.1 → 0.4.3

package/src/ui/PermissionPrompt.tsx

@@ -1,163 +0,0 @@
-/**
- * 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 React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-
-/** The four possible decisions the user can make. */
-export type PermissionDecision = 'approve' | 'reject' | 'approve_all' | 'session';
-
-/** Risk level categorisation for a tool invocation. */
-export type RiskLevel = 'low' | 'medium' | 'high' | 'critical';
-
-/** Props accepted by the PermissionPrompt component. */
-export interface PermissionPromptProps {
-  /** Name of the tool requesting permission. */
-  toolName: string;
-  /** The parameters that will be passed to the tool. */
-  toolInput: Record<string, unknown>;
-  /** Risk assessment for this invocation. */
-  riskLevel: RiskLevel;
-  /** Called with the user's decision. */
-  onDecide: (decision: PermissionDecision) => void;
-}
-
-/** Map risk levels to display colours. */
-const RISK_COLORS: Record<RiskLevel, string> = {
-  low: 'green',
-  medium: 'yellow',
-  high: 'red',
-  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.
- */
-function formatInput(input: Record<string, unknown>, maxEntries = 6): string[] {
-  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,
-}: PermissionPromptProps) {
-  const [pressed, setPressed] = useState<string | null>(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 (
-    <Box
-      flexDirection="column"
-      borderStyle="double"
-      borderColor={riskColor}
-      paddingX={1}
-      paddingY={1}
-    >
-      {/* Title bar */}
-      <Box marginBottom={1}>
-        <Text bold color="yellow">
-          Permission Required
-        </Text>
-      </Box>
-
-      {/* Tool name */}
-      <Box>
-        <Text dimColor>Tool: </Text>
-        <Text bold>{toolName}</Text>
-      </Box>
-
-      {/* Risk level */}
-      <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}>
-        <Text dimColor>Parameters:</Text>
-        {inputLines.map((line, idx) => (
-          <Text key={idx}> {line}</Text>
-        ))}
-      </Box>
-
-      {/* Action keys */}
-      <Box>
-        <Text color="green" bold inverse={pressed === 'a'}>
-          [a]
-        </Text>
-        <Text>=approve  </Text>
-        <Text color="red" bold inverse={pressed === 'r'}>
-          [r]
-        </Text>
-        <Text>=reject  </Text>
-        <Text color="cyan" bold inverse={pressed === 'A'}>
-          [A]
-        </Text>
-        <Text>=approve-all-session  </Text>
-        <Text color="blue" bold inverse={pressed === 's'}>
-          [s]
-        </Text>
-        <Text>=approve-this-tool-session</Text>
-      </Box>
-    </Box>
-  );
-}

package/src/ui/StatusBar.tsx

@@ -1,277 +0,0 @@
-/**
- * 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 React, { useState, useEffect, useRef } from 'react';
-import { Box, Text } from 'ink';
-import type { SessionInfo, AgentMode } from './types';
-
-/** Props accepted by the StatusBar component. */
-export interface StatusBarProps {
-  session: SessionInfo;
-  /** Whether the agent is currently processing a request. */
-  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. */
-const MODES: AgentMode[] = ['plan', 'build', 'deploy'];
-
-/**
- * Format a token count into a human-readable string (e.g. 45200 -> "45.2k").
- */
-function formatTokens(count: number): string {
-  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: number): string {
-  if (pct > 80) {
-    return 'red';
-  }
-  if (pct >= 50) {
-    return 'yellow';
-  }
-  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.
- */
-function ModeBadge({ mode, active }: { mode: AgentMode; active: boolean }) {
-  const label = ` ${mode.charAt(0).toUpperCase() + mode.slice(1)} `;
-
-  if (active) {
-    return (
-      <Text bold inverse>
-        {label}
-      </Text>
-    );
-  }
-
-  return <Text dimColor>{label}</Text>;
-}
-
-/**
- * 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,
-}: StatusBarProps) {
-  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<ReturnType<typeof setInterval> | null>(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 (
-    <Box
-      borderStyle="single"
-      borderColor="gray"
-      paddingX={1}
-      justifyContent="space-between"
-      width="100%"
-    >
-      {/* Mode badges */}
-      <Box>
-        {MODES.map(m => (
-          <ModeBadge key={m} mode={m} active={m === session.mode} />
-        ))}
-      </Box>
-
-      {/* Metrics + keyboard hints */}
-      <Box>
-        <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>{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

@@ -1,84 +0,0 @@
-/**
- * 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>
-  );
-}