@celilo/cli 0.1.5 → 0.1.7

package/src/cli/tui/clipboard.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, test } from 'bun:test';
+import type { DriftFinding } from '../../services/audit/types';
+import type { CommandLogEntry } from './audit-state';
+import { formatCommandLogForClipboard, formatFindingForClipboard } from './clipboard';
+
+const base: DriftFinding = {
+  category: 'module_configs',
+  severity: 'drift',
+  code: 'cfg_unset',
+  subject: 'caddy',
+  message: 'config "acme_ca" is unset (default: [])',
+};
+
+describe('formatFindingForClipboard', () => {
+  test('minimal finding — message + subject/code footer', () => {
+    expect(formatFindingForClipboard(base)).toBe(
+      [
+        'config "acme_ca" is unset (default: [])',
+        '',
+        'caddy · cfg_unset (module_configs/drift)',
+      ].join('\n'),
+    );
+  });
+
+  test('includes details and remediation when present', () => {
+    const out = formatFindingForClipboard({
+      ...base,
+      details: 'User-configured ACME CA URL',
+      remediation: 'celilo module config set caddy acme_ca <value>',
+    });
+    expect(out).toContain('User-configured ACME CA URL');
+    expect(out).toContain('→ celilo module config set caddy acme_ca <value>');
+    expect(out).toContain('caddy · cfg_unset');
+  });
+
+  test('strips ANSI escape codes from details', () => {
+    const out = formatFindingForClipboard({
+      ...base,
+      details: '\x1b[34mError:\x1b[39m something went wrong',
+    });
+    expect(out).toContain('Error: something went wrong');
+    expect(out).not.toContain('\x1b');
+    expect(out).not.toContain('[34m');
+  });
+});
+
+describe('formatCommandLogForClipboard', () => {
+  function entry(over: Partial<CommandLogEntry> = {}): CommandLogEntry {
+    return {
+      startedAt: new Date('2026-04-25T12:00:00Z').getTime(),
+      cmd: 'celilo module deploy caddy',
+      lines: [],
+      exitCode: 0,
+      ...over,
+    };
+  }
+
+  test('strips ANSI escape codes from streamed output', () => {
+    const out = formatCommandLogForClipboard([
+      entry({
+        lines: [
+          { stream: 'stdout', text: '\x1b[90m│ \x1b[39m' },
+          { stream: 'stdout', text: '\x1b[34m●\x1b[39m  Deploying module: caddy' },
+        ],
+      }),
+    ]);
+    expect(out).not.toContain('\x1b');
+    expect(out).not.toContain('[34m');
+    expect(out).not.toContain('[39m');
+    expect(out).toContain('●  Deploying module: caddy');
+  });
+
+  test('marks stderr lines with [err] prefix', () => {
+    const out = formatCommandLogForClipboard([
+      entry({
+        lines: [
+          { stream: 'stdout', text: 'normal output' },
+          { stream: 'stderr', text: 'oh no' },
+        ],
+      }),
+    ]);
+    expect(out).toContain('normal output');
+    expect(out).toContain('[err] oh no');
+  });
+
+  test('shows running… for an in-flight entry, exit N for finished', () => {
+    const out = formatCommandLogForClipboard([
+      entry({ exitCode: null, lines: [{ stream: 'stdout', text: 'working' }] }),
+      entry({ startedAt: 2, exitCode: 1, lines: [{ stream: 'stderr', text: 'failed' }] }),
+    ]);
+    expect(out).toContain('running…');
+    expect(out).toContain('exit 1');
+  });
+});

package/src/cli/tui/clipboard.ts

@@ -0,0 +1,101 @@
+/**
+ * Clipboard via OSC 52.
+ *
+ * OSC 52 (`\x1b]52;c;<base64>\x07`) is an ANSI sequence that asks
+ * the terminal emulator to set the system clipboard. It works in
+ * iTerm2, kitty, Alacritty, WezTerm, modern Windows Terminal, and
+ * tunnels naturally over SSH (the local terminal does the work, so
+ * we don't need a remote helper). macOS Terminal.app needs the
+ * "Allow applications on this Mac to access the clipboard" toggle.
+ *
+ * `c` selects the system clipboard (vs. `p` for primary selection
+ * on X11). BEL (`\x07`) terminates the sequence — works in every
+ * common terminal; some also accept ST (`\x1b\\`).
+ */
+
+import type { DriftFinding } from '../../services/audit/types';
+import type { CommandLogEntry } from './audit-state';
+
+/** Base64-encode UTF-8 input — Node/Bun's Buffer is the simplest path. */
+function base64(text: string): string {
+  return Buffer.from(text, 'utf8').toString('base64');
+}
+
+/**
+ * Strip ANSI escape sequences (CSI color/style codes, OSC strings,
+ * single-char escapes). Module output streamed into the command log
+ * keeps its colors so the in-TUI render stays pretty, but pasting
+ * those into a chat or issue tracker is just noise.
+ *
+ * Built from a string at runtime so biome's "control character in
+ * regex" lint doesn't fire on a literal `\x1b` in source.
+ */
+const ESC = '\x1b';
+const ANSI_PATTERN = new RegExp(
+  // CSI: ESC [ ... letter, e.g. \x1b[34m, \x1b[2;3H
+  `${ESC}\\[[0-9;?]*[A-Za-z]|` +
+    // OSC: ESC ] ... BEL or ST
+    `${ESC}\\][^${ESC}\\x07]*(?:${ESC}\\\\|\\x07)|` +
+    // Single-char escapes
+    `${ESC}[@-Z\\\\-_]`,
+  'g',
+);
+function stripAnsi(text: string): string {
+  return text.replace(ANSI_PATTERN, '');
+}
+
+/**
+ * Copy `text` to the system clipboard via OSC 52.
+ *
+ * Writes directly to stdout — Ink's renderer doesn't mind extra
+ * escape sequences interleaved between its frames. The terminal
+ * intercepts OSC 52 before it reaches the Ink output.
+ */
+export function copyToClipboard(text: string): void {
+  const seq = `\x1b]52;c;${base64(text)}\x07`;
+  process.stdout.write(seq);
+}
+
+/**
+ * Format a finding as plain text suitable for pasting into a chat,
+ * issue tracker, or notes app. Mirrors the Detail pane's structure.
+ * Strips ANSI codes from any field that might carry them (terraform
+ * stderr in `details`, etc.) so the paste is clean text.
+ */
+export function formatFindingForClipboard(f: DriftFinding): string {
+  const lines: string[] = [stripAnsi(f.message)];
+  if (f.details) {
+    lines.push('', stripAnsi(f.details));
+  }
+  if (f.remediation) {
+    lines.push('', `→ ${stripAnsi(f.remediation)}`);
+  }
+  lines.push('', `${f.subject} · ${f.code} (${f.category}/${f.severity})`);
+  return lines.join('\n');
+}
+
+/**
+ * Format the entire command log as plain text suitable for pasting.
+ * Mirrors the Command-log pane's rendering — separator headers,
+ * stdout/stderr lines (`[err]` prefix on stderr to disambiguate
+ * once colors are gone), and exit-code footers. ANSI escape codes
+ * in streamed module output are stripped — they're useful in the
+ * TUI but render as garbage when pasted elsewhere.
+ */
+export function formatCommandLogForClipboard(log: CommandLogEntry[]): string {
+  if (log.length === 0) return '(empty)';
+  const lines: string[] = [];
+  for (const entry of log) {
+    const time = new Date(entry.startedAt).toISOString();
+    lines.push(`─── ${time} · ${entry.cmd} ───`);
+    for (const ln of entry.lines) {
+      const clean = stripAnsi(ln.text);
+      lines.push(ln.stream === 'stderr' ? `[err] ${clean}` : clean);
+    }
+    lines.push(entry.exitCode === null ? 'running…' : `exit ${entry.exitCode}`);
+    lines.push('');
+  }
+  // Drop the trailing blank line.
+  if (lines[lines.length - 1] === '') lines.pop();
+  return lines.join('\n');
+}

package/src/cli/tui/icons.ts

@@ -0,0 +1,22 @@
+import type { AuditVerdict, DriftSeverity } from '../../services/audit/types';
+
+export interface SeverityVisual {
+  icon: string;
+  color: 'red' | 'yellow' | 'green' | 'gray';
+  label: string;
+}
+
+export const SEVERITY_VISUALS: Record<DriftSeverity, SeverityVisual> = {
+  blocked: { icon: '×', color: 'red', label: 'BLOCKED' },
+  drift: { icon: '▲', color: 'yellow', label: 'DRIFT' },
+};
+
+export const VERDICT_VISUALS: Record<AuditVerdict, SeverityVisual> = {
+  BLOCKED: { icon: '×', color: 'red', label: 'BLOCKED' },
+  DRIFT: { icon: '▲', color: 'yellow', label: 'DRIFT' },
+  READY: { icon: '✓', color: 'green', label: 'READY' },
+};
+
+export function severityRank(s: DriftSeverity): number {
+  return s === 'blocked' ? 0 : 1;
+}

package/src/cli/tui/keybar.tsx

@@ -0,0 +1,65 @@
+import { Box, Text } from 'ink';
+import type { PaneId } from './audit-state';
+
+interface Props {
+  focused: PaneId;
+  modal: 'remediate' | 'reaudit-prompt' | 'celebration' | 'analyzing' | null;
+  /** Transient confirmation that takes over the left side when set. */
+  flashMessage?: string | null;
+  /**
+   * Whether the currently-selected finding has a runnable
+   * remediation. Drives whether "Remediate: r" appears in the
+   * findings/detail bindings — surfacing it on a non-actionable
+   * finding (e.g. capability_abi) misleads the user into thinking
+   * `r` will fix it.
+   */
+  findingActionable?: boolean;
+}
+
+function findingsBar(actionable: boolean): string {
+  return actionable
+    ? 'Focus: <enter>  ·  Remediate: r  ·  Back: <esc>'
+    : 'Focus: <enter>  ·  Back: <esc>';
+}
+
+function detailBar(actionable: boolean): string {
+  return actionable ? 'Remediate: r  ·  Copy: y  ·  Back: <esc>' : 'Copy: y  ·  Back: <esc>';
+}
+
+export function KeyBar({ focused, modal, flashMessage, findingActionable = false }: Props) {
+  let left: string;
+  if (flashMessage) {
+    left = flashMessage;
+  } else if (modal === 'remediate') {
+    left = 'Run: <enter>  ·  Cancel: <esc>';
+  } else if (modal === 'reaudit-prompt') {
+    left = 'Yes: Y/<enter>  ·  No: n/<esc>';
+  } else if (modal === 'celebration') {
+    left = 'Re-audit: R  ·  Quit: q  ·  Dismiss: <esc>';
+  } else if (modal === 'analyzing') {
+    left = 'Analyzing system… (q to quit)';
+  } else if (focused === 'findings') {
+    left = findingsBar(findingActionable);
+  } else if (focused === 'detail') {
+    left = detailBar(findingActionable);
+  } else if (focused === 'categories') {
+    left = 'Focus: <enter>';
+  } else if (focused === 'log') {
+    left = 'Scroll: ↑↓  ·  Copy: y  ·  Back: <esc>';
+  } else {
+    left = '';
+  }
+
+  // width="100%" + justifyContent="space-between" pins the two
+  // groups to opposite edges; without an explicit width the flexbox
+  // shrinks to content and the items end up adjacent.
+  // Right side hosts globals: re-audit + help + quit. They're
+  // always available regardless of focused pane / modal state, so
+  // the user can discover them anywhere.
+  return (
+    <Box width="100%" justifyContent="space-between" paddingX={1}>
+      <Text color={flashMessage ? 'green' : undefined}>{left}</Text>
+      <Text dimColor>R re-audit · t theme · ? help · q quit</Text>
+    </Box>
+  );
+}

package/src/cli/tui/keymap.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, test } from 'bun:test';
+import type { Key } from 'ink';
+import { handleKey } from './keymap';
+
+function key(over: Partial<Key> = {}): Key {
+  return {
+    upArrow: false,
+    downArrow: false,
+    leftArrow: false,
+    rightArrow: false,
+    pageDown: false,
+    pageUp: false,
+    return: false,
+    escape: false,
+    ctrl: false,
+    shift: false,
+    tab: false,
+    backspace: false,
+    delete: false,
+    meta: false,
+    ...over,
+  } as Key;
+}
+
+describe('handleKey — quit', () => {
+  test('q quits', () => {
+    expect(handleKey('q', key(), 'categories').signal).toBe('quit');
+  });
+
+  test('Ctrl-C quits', () => {
+    expect(handleKey('c', key({ ctrl: true }), 'categories').signal).toBe('quit');
+  });
+
+  test('Esc on summary quits', () => {
+    expect(handleKey('', key({ escape: true }), 'summary').signal).toBe('quit');
+  });
+
+  test('Esc on categories quits', () => {
+    expect(handleKey('', key({ escape: true }), 'categories').signal).toBe('quit');
+  });
+
+  test('Esc on findings dispatches escape (not quit)', () => {
+    const r = handleKey('', key({ escape: true }), 'findings');
+    expect(r.signal).toBeUndefined();
+    expect(r.actions).toEqual([{ type: 'escape' }]);
+  });
+});
+
+describe('handleKey — pane jump', () => {
+  test.each(['1', '2', '3', '4', '5'] as const)('%s focuses corresponding pane', (n) => {
+    const r = handleKey(n, key(), 'summary');
+    expect(r.actions).toHaveLength(1);
+    expect(r.actions[0].type).toBe('focus');
+  });
+});
+
+describe('handleKey — movement', () => {
+  test('up arrow → move -1', () => {
+    expect(handleKey('', key({ upArrow: true }), 'categories').actions).toEqual([
+      { type: 'move', direction: -1 },
+    ]);
+  });
+
+  test('k → move -1', () => {
+    expect(handleKey('k', key(), 'categories').actions).toEqual([{ type: 'move', direction: -1 }]);
+  });
+
+  test('j → move +1', () => {
+    expect(handleKey('j', key(), 'categories').actions).toEqual([{ type: 'move', direction: 1 }]);
+  });
+});
+
+describe('handleKey — Enter / Tab', () => {
+  test('Enter dispatches enter', () => {
+    expect(handleKey('', key({ return: true }), 'categories').actions).toEqual([{ type: 'enter' }]);
+  });
+
+  test('Tab dispatches cycle +1', () => {
+    expect(handleKey('', key({ tab: true }), 'categories').actions).toEqual([
+      { type: 'cycle', direction: 1 },
+    ]);
+  });
+
+  test('Shift-Tab dispatches cycle -1', () => {
+    expect(handleKey('', key({ tab: true, shift: true }), 'categories').actions).toEqual([
+      { type: 'cycle', direction: -1 },
+    ]);
+  });
+});
+
+describe('handleKey — Phase 3 hooks', () => {
+  test('r signals remediate', () => {
+    expect(handleKey('r', key(), 'findings').signal).toBe('remediate');
+  });
+
+  test('R signals reaudit', () => {
+    expect(handleKey('R', key(), 'summary').signal).toBe('reaudit');
+  });
+});
+
+describe('handleKey — help', () => {
+  test('? toggles help', () => {
+    expect(handleKey('?', key(), 'summary').actions).toEqual([{ type: 'toggle-help' }]);
+  });
+});

package/src/cli/tui/keymap.ts

@@ -0,0 +1,70 @@
+import type { Key } from 'ink';
+import type { AuditTuiAction, PaneId } from './audit-state';
+import { PANE_BY_NUMBER } from './audit-state';
+
+export interface KeymapResult {
+  actions: AuditTuiAction[];
+  /** App-level signals the reducer can't express. */
+  signal?: 'quit' | 'help' | 'remediate' | 'reaudit' | 'copy' | 'toggle-theme';
+}
+
+/**
+ * Translate one keypress (input string + ink Key flags) into reducer
+ * actions and/or app-level signals. Pure function — no side effects,
+ * no React.
+ *
+ * Ink's `useInput(handler)` calls `handler(input, key)` for every
+ * keypress; this function is what `handler` delegates to.
+ */
+export function handleKey(input: string, key: Key, focused: PaneId): KeymapResult {
+  // Quit
+  if (key.ctrl && input === 'c') return { actions: [], signal: 'quit' };
+  if (input === 'q' && !key.ctrl && !key.meta) return { actions: [], signal: 'quit' };
+
+  // Help overlay
+  if (input === '?') return { actions: [{ type: 'toggle-help' }] };
+
+  // Pane jump (1-5)
+  if (input === '1' || input === '2' || input === '3' || input === '4' || input === '5') {
+    return { actions: [{ type: 'focus', pane: PANE_BY_NUMBER[input] }] };
+  }
+
+  // Tab / Shift-Tab: cycle focus
+  if (key.tab) {
+    return { actions: [{ type: 'cycle', direction: key.shift ? -1 : 1 }] };
+  }
+
+  // Movement: arrows + j/k
+  if (key.upArrow || (input === 'k' && !key.ctrl)) {
+    return { actions: [{ type: 'move', direction: -1 }] };
+  }
+  if (key.downArrow || (input === 'j' && !key.ctrl)) {
+    return { actions: [{ type: 'move', direction: 1 }] };
+  }
+
+  // Enter: drill in
+  if (key.return) {
+    return { actions: [{ type: 'enter' }] };
+  }
+
+  // Escape: step back; on top-of-chain panes, signal quit
+  if (key.escape) {
+    if (focused === 'summary' || focused === 'categories') {
+      return { actions: [], signal: 'quit' };
+    }
+    return { actions: [{ type: 'escape' }] };
+  }
+
+  // Action hotkeys
+  if (input === 'r' && !key.shift) return { actions: [], signal: 'remediate' };
+  if (input === 'R' || (input === 'r' && key.shift)) return { actions: [], signal: 'reaudit' };
+  // Yank — clipboard copy. Parent decides what to copy based on the
+  // focused pane (detail content, command log, etc.).
+  if (input === 'y' && !key.shift) return { actions: [], signal: 'copy' };
+  // Theme toggle. Routed as a signal so the parent can also flash a
+  // confirmation in the keybar — the user otherwise has no visual cue
+  // that anything happened (theme currently only drives modal colors).
+  if (input === 't' && !key.shift) return { actions: [], signal: 'toggle-theme' };
+
+  return { actions: [] };
+}

package/src/cli/tui/modals/analyzing.tsx

@@ -0,0 +1,75 @@
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { ALL_CATEGORIES, CATEGORY_LABELS, type CategoryStatus } from '../audit-state';
+import type { Theme } from '../theme';
+
+interface Props {
+  progress: Record<string, CategoryStatus>;
+  theme: Theme;
+}
+
+/**
+ * Right-padded label so all the verdict icons line up vertically
+ * regardless of category-name length. 21 = longest label
+ * ("Unconfigured modules") + a couple of cells of cushion.
+ */
+const LABEL_WIDTH = 22;
+
+function StatusRow({ category, status }: { category: string; status: CategoryStatus }) {
+  const label = CATEGORY_LABELS[category as keyof typeof CATEGORY_LABELS] ?? category;
+  const padded = label.padEnd(LABEL_WIDTH, ' ');
+
+  if (status === 'pending') {
+    return <Text dimColor>· {padded} pending</Text>;
+  }
+  if (status === 'running') {
+    return (
+      <Text>
+        <Spinner type="dots" />
+        <Text> </Text>
+        <Text>{padded}</Text>
+        <Text dimColor>checking…</Text>
+      </Text>
+    );
+  }
+  // done
+  if (status.verdict === 'clean') {
+    return <Text color="green">✓ {padded}clean</Text>;
+  }
+  if (status.verdict === 'drift') {
+    return <Text color="yellow">▲ {padded}drift</Text>;
+  }
+  return <Text color="red">× {padded}blocked</Text>;
+}
+
+/**
+ * Pops at the start of every audit run — one fuel-gauge per
+ * category. Auto-dismisses (via the reducer) when every category
+ * reports done. Non-interactive: nothing for the user to do here
+ * besides wait. Ctrl-C / q still quit at the AuditTui level.
+ */
+export function AnalyzingModal({ progress, theme }: Props) {
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="cyan"
+      backgroundColor={theme.dialogBg}
+      flexDirection="column"
+      paddingX={3}
+      paddingY={1}
+      width={56}
+    >
+      <Text color={theme.dialogFg} bold>
+        Analyzing system…
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {ALL_CATEGORIES.map((c) => (
+          <StatusRow key={c} category={c} status={progress[c] ?? 'pending'} />
+        ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>q to quit</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/modals/celebration.tsx

@@ -0,0 +1,44 @@
+import { Box, Text } from 'ink';
+import type { Theme } from '../theme';
+
+interface Props {
+  theme: Theme;
+}
+
+/**
+ * Pops once an audit completes with zero findings — a moment of
+ * actual closure for the user, not a drab "(no findings)". Two
+ * options surface explicitly: re-audit (`R`) or quit (`q`); Esc
+ * dismisses to the panes for browsing.
+ */
+export function CelebrationModal({ theme }: Props) {
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="green"
+      backgroundColor={theme.dialogBg}
+      flexDirection="column"
+      paddingX={3}
+      paddingY={1}
+      width={56}
+    >
+      <Text color="green" bold>
+        🎉 Everything is up-to-date in your system!
+      </Text>
+      <Box marginTop={1}>
+        <Text color={theme.dialogFg}>No drift detected across any audit category.</Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text color={theme.dialogFg}>
+          <Text color="cyan">R</Text> Re-audit
+        </Text>
+        <Text color={theme.dialogFg}>
+          <Text color="cyan">q</Text> Quit
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Esc to dismiss</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/modals/reaudit-prompt.tsx

@@ -0,0 +1,35 @@
+import { Box, Text } from 'ink';
+import type { Theme } from '../theme';
+
+interface Props {
+  theme: Theme;
+}
+
+/**
+ * Confirmation prompt shown after a remediation command exits 0.
+ * The TUI's input handler watches for Y/Enter (yes) and n/Esc (no);
+ * this component is purely presentational.
+ */
+export function ReauditPromptModal({ theme }: Props) {
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="cyan"
+      backgroundColor={theme.dialogBg}
+      flexDirection="column"
+      paddingX={2}
+      paddingY={1}
+      width={60}
+    >
+      <Text color={theme.dialogFg} bold>
+        Audit may be stale
+      </Text>
+      <Box marginTop={1}>
+        <Text color={theme.dialogFg}>Re-run audit now?</Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={theme.dialogFg}>Yes: Y/Enter · No: n/Esc</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/modals/remediate.tsx

@@ -0,0 +1,44 @@
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import type { Theme } from '../theme';
+
+interface Props {
+  command: string;
+  theme: Theme;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+}
+
+/**
+ * Single-line input modal pre-filled with a finding's remediation
+ * command. Cursor lands on the first `<placeholder>` if one is
+ * present (resolved by the parent before `command` reaches us — we
+ * just render whatever we're given). Enter submits, Esc cancels at
+ * the parent level via the keymap.
+ */
+export function RemediateModal({ command, theme, onChange, onSubmit }: Props) {
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="cyan"
+      backgroundColor={theme.dialogBg}
+      flexDirection="column"
+      paddingX={2}
+      paddingY={1}
+      width={80}
+    >
+      <Text color={theme.dialogFg} bold>
+        Remediate
+      </Text>
+      <Box marginTop={1}>
+        <Text color={theme.dialogFg}>
+          Edit the command, then press Enter to run (Esc to cancel).
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color="cyan">$ </Text>
+        <TextInput value={command} onChange={onChange} onSubmit={onSubmit} />
+      </Box>
+    </Box>
+  );
+}