@celilo/cli 0.1.4 → 0.1.6

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

@@ -0,0 +1,137 @@
+import { describe, expect, test } from 'bun:test';
+import type { DriftFinding, SystemAuditReport } from '../../services/audit/types';
+import { COMMAND_LOG_MAX_LINES, initState, reducer } from './audit-state';
+
+function finding(over: Partial<DriftFinding>): DriftFinding {
+  return {
+    category: 'module_configs',
+    severity: 'drift',
+    code: 'cfg_unset',
+    subject: 'caddy',
+    message: 'config "acme_ca" is unset',
+    remediation: 'celilo module config set caddy acme_ca <value>',
+    ...over,
+  };
+}
+
+function report(findings: DriftFinding[]): SystemAuditReport {
+  return {
+    version: 1,
+    verdict: findings.length > 0 ? 'DRIFT' : 'READY',
+    generatedAt: '2026-04-25T12:00:00.000Z',
+    findings,
+  };
+}
+
+describe('modal lifecycle', () => {
+  test('open-remediate stores findingId + command', () => {
+    const s = initState(report([finding({ code: 'a' })]));
+    const next = reducer(s, {
+      type: 'open-remediate',
+      findingId: 'caddy/a',
+      command: 'celilo module config set caddy acme_ca <value>',
+    });
+    expect(next.modal).toEqual({
+      kind: 'remediate',
+      findingId: 'caddy/a',
+      command: 'celilo module config set caddy acme_ca <value>',
+    });
+  });
+
+  test('set-modal-command updates the command in the modal', () => {
+    const s = initState(report([finding({ code: 'a' })]));
+    let st = reducer(s, {
+      type: 'open-remediate',
+      findingId: 'caddy/a',
+      command: 'celilo x',
+    });
+    st = reducer(st, { type: 'set-modal-command', command: 'celilo y' });
+    expect(st.modal).toMatchObject({ kind: 'remediate', command: 'celilo y' });
+  });
+
+  test('set-modal-command is a no-op when no remediate modal is open', () => {
+    const s = initState(report([finding({ code: 'a' })]));
+    const next = reducer(s, { type: 'set-modal-command', command: 'noop' });
+    expect(next.modal).toBeNull();
+  });
+
+  test('open-reaudit-prompt switches modal', () => {
+    const s = initState(report([finding({ code: 'a' })]));
+    const opened = reducer(s, {
+      type: 'open-remediate',
+      findingId: 'caddy/a',
+      command: 'celilo x',
+    });
+    const next = reducer(opened, { type: 'open-reaudit-prompt' });
+    expect(next.modal).toEqual({ kind: 'reaudit-prompt' });
+  });
+
+  test('close-modal clears the modal', () => {
+    const s = initState(report([finding({ code: 'a' })]));
+    const opened = reducer(s, {
+      type: 'open-remediate',
+      findingId: 'caddy/a',
+      command: 'celilo x',
+    });
+    const next = reducer(opened, { type: 'close-modal' });
+    expect(next.modal).toBeNull();
+  });
+});
+
+describe('command log lifecycle', () => {
+  test('log-start appends a running entry', () => {
+    const s = initState(report([]));
+    const next = reducer(s, { type: 'log-start', startedAt: 1000, cmd: 'celilo x' });
+    expect(next.commandLog).toHaveLength(1);
+    expect(next.commandLog[0]).toEqual({
+      startedAt: 1000,
+      cmd: 'celilo x',
+      lines: [],
+      exitCode: null,
+    });
+  });
+
+  test('log-line appends a line to the matching entry', () => {
+    let st = initState(report([]));
+    st = reducer(st, { type: 'log-start', startedAt: 1000, cmd: 'celilo x' });
+    st = reducer(st, { type: 'log-line', startedAt: 1000, stream: 'stdout', text: 'hello' });
+    st = reducer(st, { type: 'log-line', startedAt: 1000, stream: 'stderr', text: 'oh no' });
+    expect(st.commandLog[0].lines).toEqual([
+      { stream: 'stdout', text: 'hello' },
+      { stream: 'stderr', text: 'oh no' },
+    ]);
+  });
+
+  test('log-finish sets exit code on matching entry', () => {
+    let st = initState(report([]));
+    st = reducer(st, { type: 'log-start', startedAt: 1000, cmd: 'celilo x' });
+    st = reducer(st, { type: 'log-finish', startedAt: 1000, exitCode: 0 });
+    expect(st.commandLog[0].exitCode).toBe(0);
+  });
+
+  test('log entries with mismatched startedAt are not affected', () => {
+    let st = initState(report([]));
+    st = reducer(st, { type: 'log-start', startedAt: 1000, cmd: 'a' });
+    st = reducer(st, { type: 'log-start', startedAt: 2000, cmd: 'b' });
+    st = reducer(st, { type: 'log-line', startedAt: 1000, stream: 'stdout', text: 'hi' });
+    expect(st.commandLog[0].lines).toHaveLength(1);
+    expect(st.commandLog[1].lines).toHaveLength(0);
+  });
+
+  test('log evicts oldest entries when total lines exceed cap', () => {
+    let st = initState(report([]));
+    // First entry — fills almost the whole cap
+    st = reducer(st, { type: 'log-start', startedAt: 1, cmd: 'big' });
+    for (let i = 0; i < COMMAND_LOG_MAX_LINES - 5; i++) {
+      st = reducer(st, { type: 'log-line', startedAt: 1, stream: 'stdout', text: `line ${i}` });
+    }
+    // Second entry — pushes us over
+    st = reducer(st, { type: 'log-start', startedAt: 2, cmd: 'small' });
+    for (let i = 0; i < 50; i++) {
+      st = reducer(st, { type: 'log-line', startedAt: 2, stream: 'stdout', text: `t ${i}` });
+    }
+    // Oldest (entry 1) should have been evicted
+    expect(st.commandLog).toHaveLength(1);
+    expect(st.commandLog[0].cmd).toBe('small');
+  });
+});

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

@@ -0,0 +1,78 @@
+import { describe, expect, test } from 'bun:test';
+import { paneAt, parseMouseEvent } from './mouse';
+
+describe('parseMouseEvent', () => {
+  test('parses raw SGR press event', () => {
+    expect(parseMouseEvent('\x1b[<0;5;3M')).toEqual({
+      button: 0,
+      col: 4,
+      row: 2,
+      pressed: true,
+    });
+  });
+
+  test('parses Ink-relayed form (no leading ESC+CSI)', () => {
+    expect(parseMouseEvent('[<2;15;7M')).toEqual({
+      button: 2,
+      col: 14,
+      row: 6,
+      pressed: true,
+    });
+  });
+
+  test('press vs release', () => {
+    expect(parseMouseEvent('[<0;1;1M')?.pressed).toBe(true);
+    expect(parseMouseEvent('[<0;1;1m')?.pressed).toBe(false);
+  });
+
+  test('returns null for non-mouse input', () => {
+    expect(parseMouseEvent('q')).toBeNull();
+    expect(parseMouseEvent('\x1b[A')).toBeNull(); // arrow key, not mouse
+    expect(parseMouseEvent('')).toBeNull();
+  });
+});
+
+const REGIONS = {
+  bodyHeight: 30,
+  leftColWidth: 40,
+  summaryHeight: 6,
+  categoriesHeight: 8,
+  detailHeight: 15,
+};
+
+describe('paneAt', () => {
+  test('top-left of left column → summary', () => {
+    expect(paneAt(0, 0, REGIONS)).toEqual({ pane: 'summary', rowInPane: 0 });
+  });
+
+  test('mid-left below summary → categories with row offset', () => {
+    expect(paneAt(10, 8, REGIONS)).toEqual({ pane: 'categories', rowInPane: 2 });
+  });
+
+  test('bottom of left column → findings with row offset', () => {
+    expect(paneAt(20, 25, REGIONS)).toEqual({
+      pane: 'findings',
+      rowInPane: 25 - REGIONS.summaryHeight - REGIONS.categoriesHeight,
+    });
+  });
+
+  test('right column top → detail', () => {
+    expect(paneAt(50, 5, REGIONS)).toEqual({ pane: 'detail', rowInPane: 5 });
+  });
+
+  test('right column bottom → log with offset', () => {
+    expect(paneAt(60, 20, REGIONS)).toEqual({
+      pane: 'log',
+      rowInPane: 20 - REGIONS.detailHeight,
+    });
+  });
+
+  test('keybar row (out of body) → null', () => {
+    expect(paneAt(10, 30, REGIONS)).toBeNull();
+    expect(paneAt(10, 50, REGIONS)).toBeNull();
+  });
+
+  test('negative col returns null', () => {
+    expect(paneAt(-1, 5, REGIONS)).toBeNull();
+  });
+});

package/src/cli/tui/mouse.ts

@@ -0,0 +1,114 @@
+/**
+ * Mouse-click support via SGR mouse reporting.
+ *
+ * SGR mode (`CSI ? 1006 h`) is the modern, well-supported encoding —
+ * iTerm2, kitty, Alacritty, WezTerm, modern Windows Terminal all
+ * speak it. Format on press: `ESC [ < button ; col ; row M`; on
+ * release the trailing M becomes m.
+ *
+ * Buttons in SGR mode:
+ *   0 = left, 1 = middle, 2 = right
+ *   64 = wheel up, 65 = wheel down
+ *   modifiers (shift/alt/ctrl) get OR'd into the button code (4/8/16)
+ *
+ * `CSI ? 1000 h` enables button-event reporting (presses + releases,
+ * no motion). We don't need motion or any-event mode for click-to-
+ * focus.
+ */
+
+const ESC = '\x1b';
+
+export const MOUSE_ON = `${ESC}[?1000h${ESC}[?1006h`;
+export const MOUSE_OFF = `${ESC}[?1000l${ESC}[?1006l`;
+
+export interface MouseEvent {
+  button: number;
+  /** 0-based terminal column. SGR reports 1-based; we normalize. */
+  col: number;
+  /** 0-based terminal row. */
+  row: number;
+  pressed: boolean;
+}
+
+/**
+ * Match an SGR mouse sequence in a chunk of input. Ink's `useInput`
+ * sees mouse events as `key.escape: true` + an `input` like
+ * `[<0;5;3M`, so we accept both that form (Ink-relayed) and the raw
+ * form including the leading ESC + CSI. Built from a string at
+ * runtime so the `\x1b` control byte doesn't trip biome's "control
+ * character in regex" lint.
+ */
+const SGR_PATTERN = new RegExp(`^(?:${ESC}\\[|\\[)<(\\d+);(\\d+);(\\d+)([Mm])`);
+
+export function parseMouseEvent(input: string): MouseEvent | null {
+  const match = input.match(SGR_PATTERN);
+  if (!match) return null;
+  return {
+    button: Number.parseInt(match[1], 10),
+    // SGR coordinates are 1-based; our layout math is 0-based.
+    col: Number.parseInt(match[2], 10) - 1,
+    row: Number.parseInt(match[3], 10) - 1,
+    pressed: match[4] === 'M',
+  };
+}
+
+export interface ClickRegions {
+  /** Width and height of the body (everything above the keybar). */
+  bodyHeight: number;
+  leftColWidth: number;
+  /** rightColWidth is implied by total columns; not needed for hit-testing. */
+  summaryHeight: number;
+  categoriesHeight: number;
+  // findingsHeight is the remainder of the left column.
+  detailHeight: number;
+  // commandLogHeight is the remainder of the right column.
+}
+
+export type PaneId = 'summary' | 'categories' | 'findings' | 'detail' | 'log';
+
+export interface PaneHit {
+  pane: PaneId;
+  /**
+   * 0-based row offset relative to the pane's top edge (border
+   * inclusive). Useful for translating a click into a list index in
+   * scrollable panes.
+   */
+  rowInPane: number;
+}
+
+/**
+ * Hit-test a click against the pane layout. Returns the pane the
+ * click landed in (with the row offset within that pane), or null
+ * if the click is outside the body (e.g. keybar row).
+ */
+export function paneAt(col: number, row: number, regions: ClickRegions): PaneHit | null {
+  if (row < 0 || row >= regions.bodyHeight) return null;
+  if (col < 0) return null;
+
+  if (col < regions.leftColWidth) {
+    if (row < regions.summaryHeight) {
+      return { pane: 'summary', rowInPane: row };
+    }
+    if (row < regions.summaryHeight + regions.categoriesHeight) {
+      return { pane: 'categories', rowInPane: row - regions.summaryHeight };
+    }
+    return {
+      pane: 'findings',
+      rowInPane: row - regions.summaryHeight - regions.categoriesHeight,
+    };
+  }
+
+  // Right column.
+  if (row < regions.detailHeight) {
+    return { pane: 'detail', rowInPane: row };
+  }
+  return { pane: 'log', rowInPane: row - regions.detailHeight };
+}
+
+/**
+ * Each pane's "chrome" — non-content rows above the first list item.
+ * Categories: top border (1) + title (1) + marginTop spacer (1) = 3.
+ * Findings:   same. (Bottom border doesn't matter; we only care
+ * about the top offset.)
+ */
+export const LIST_PANE_CHROME = 3;

package/src/cli/tui/panes/categories.tsx

@@ -0,0 +1,62 @@
+import { Box, Text } from 'ink';
+import type { AuditTuiState } from '../audit-state';
+import { InboxZeroCelebration } from '../celebration';
+import { SEVERITY_VISUALS } from '../icons';
+
+interface Props {
+  state: AuditTuiState;
+  focused: boolean;
+}
+
+export function CategoriesPane({ state, focused }: Props) {
+  const { groups, selectedCategory } = state;
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={focused ? 'cyan' : 'gray'}
+      flexDirection="column"
+      paddingX={1}
+      width="100%"
+      height="100%"
+      overflow="hidden"
+    >
+      <Text dimColor>2 Categories</Text>
+      <Box flexDirection="column" marginTop={1}>
+        {groups.length === 0 ? (
+          // Don't celebrate while the audit is still running — the
+          // empty report is a placeholder, not a verdict.
+          state.auditing ? (
+            <Text dimColor>(checking…)</Text>
+          ) : (
+            <InboxZeroCelebration compact />
+          )
+        ) : (
+          groups.map((g) => {
+            const v = SEVERITY_VISUALS[g.severity];
+            const isSelected = focused && g.category === selectedCategory;
+            // When selected, render the whole row as a single inverse
+            // Text — nested <Text color> children override the parent's
+            // inverse styling in Ink's renderer, so we flatten.
+            if (isSelected) {
+              return (
+                <Text key={g.category} inverse wrap="truncate-end">
+                  {`▸ ${v.icon} ${v.label} · ${g.category} (${g.findings.length})`}
+                </Text>
+              );
+            }
+            return (
+              <Text key={g.category} wrap="truncate-end">
+                {'  '}
+                <Text color={v.color}>
+                  {v.icon} {v.label}
+                </Text>
+                {` · ${g.category} (${g.findings.length})`}
+              </Text>
+            );
+          })
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/panes/command-log.tsx

@@ -0,0 +1,87 @@
+import { Box, Text } from 'ink';
+import type { AuditTuiState, CommandLogEntry } from '../audit-state';
+
+interface Props {
+  state: AuditTuiState;
+  focused: boolean;
+  /** Total height the pane will occupy. Used to slice to the latest visible lines. */
+  height: number;
+}
+
+interface Line {
+  key: string;
+  text: string;
+  color?: string;
+  dim?: boolean;
+}
+
+/**
+ * Flatten the command log into renderable lines: a separator
+ * header + stdout/stderr lines + an exit-code footer per entry.
+ * Returned in chronological order (oldest first).
+ */
+function flattenLog(log: CommandLogEntry[]): Line[] {
+  const lines: Line[] = [];
+  for (const entry of log) {
+    const time = new Date(entry.startedAt).toLocaleTimeString();
+    lines.push({
+      key: `${entry.startedAt}-hdr`,
+      text: `─── ${time} · ${entry.cmd} ───`,
+      dim: true,
+    });
+    for (let i = 0; i < entry.lines.length; i++) {
+      const ln = entry.lines[i];
+      lines.push({
+        key: `${entry.startedAt}-${i}`,
+        text: ln.text,
+        color: ln.stream === 'stderr' ? 'red' : undefined,
+      });
+    }
+    lines.push({
+      key: `${entry.startedAt}-exit`,
+      text: entry.exitCode === null ? 'running…' : `exit ${entry.exitCode}`,
+      color: entry.exitCode === 0 ? 'green' : entry.exitCode === null ? undefined : 'red',
+      dim: true,
+    });
+  }
+  return lines;
+}
+
+export function CommandLogPane({ state, focused, height }: Props) {
+  const all = flattenLog(state.commandLog);
+  // chrome = 2 border rows + 1 title + 1 spacer = 4. Show the last
+  // `height - chrome` lines so the most recent output is always
+  // visible (terminal-tail behavior).
+  const chrome = 4;
+  const visible = Math.max(height - chrome, 0);
+  const slice = all.length <= visible ? all : all.slice(all.length - visible);
+  const hidden = all.length - slice.length;
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={focused ? 'cyan' : 'gray'}
+      flexDirection="column"
+      paddingX={1}
+      width="100%"
+      height="100%"
+      overflow="hidden"
+    >
+      <Text dimColor wrap="truncate-end">
+        5 Command log
+        {hidden > 0 ? ` (${hidden} earlier line${hidden === 1 ? '' : 's'} hidden)` : ''}
+      </Text>
+      <Box flexDirection="column" marginTop={1}>
+        {state.commandLog.length === 0 ? (
+          <Text dimColor>(empty — press r on a finding to remediate)</Text>
+        ) : (
+          slice.map((ln) => (
+            <Text key={ln.key} color={ln.color} dimColor={ln.dim} wrap="truncate-end">
+              {ln.text}
+            </Text>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/panes/detail.tsx

@@ -0,0 +1,175 @@
+import { Box, Text } from 'ink';
+import type { AuditTuiState } from '../audit-state';
+import { selectedFinding } from '../audit-state';
+import { InboxZeroCelebration } from '../celebration';
+import { SEVERITY_VISUALS } from '../icons';
+import { wrapText } from '../wrap';
+
+interface Props {
+  state: AuditTuiState;
+  focused: boolean;
+  /**
+   * The pane's full width in columns. Used to pre-wrap multi-line
+   * content (details, non-actionable guidance) so each rendered line
+   * fits within the pane — Ink's column layout assumes one Text =
+   * one row, so a wrapping Text would overlap the next sibling.
+   */
+  width: number;
+}
+
+/**
+ * ASCII-art "celilo" wordmark in the figlet "Standard" font. 4 rows
+ * tall, ~30 cols wide. Rendered cyan to pop against the pane chrome.
+ *
+ * Hard-coded as a string array rather than a runtime figlet
+ * dependency — the wordmark is stable and the dep would be overkill.
+ */
+const CELILO_ASCII = [
+  '   ___ ___ _    ___ _    ___  ',
+  '  / __| __| |  |_ _| |  / _ \\ ',
+  ' | (__| _|| |__ | || |_| (_) |',
+  '  \\___|___|____|___|____\\___/ ',
+];
+
+/**
+ * Banner shown in this pane when the user is focused on Summary
+ * (pane 1). Lazygit-style orientation: ASCII wordmark, what celilo
+ * is, where to learn more, where to find help. The full keymap
+ * lives behind `?` and is suppressed here to keep the banner clean.
+ */
+function CeliloBanner({ contentWidth }: { contentWidth: number }) {
+  const description = wrapText(
+    'Home-lab orchestration: Terraform + Ansible + a module registry, wrapped in a CLI that knows your topology.',
+    contentWidth,
+  );
+  const screenDesc = wrapText(
+    'Reports drift across CLI version, schema, capability ABI, terraform plan, module versions, configs, health, backups, undeployed modules, and unconfigured modules.',
+    contentWidth,
+  );
+  // Show ASCII art only when the pane is wide enough to fit it
+  // without ugly wrap. Falls back to a plain "celilo" title on
+  // narrow terminals.
+  const fitsAscii = contentWidth >= CELILO_ASCII[0].length;
+  return (
+    <Box flexDirection="column">
+      {fitsAscii ? (
+        <Box flexDirection="column">
+          {CELILO_ASCII.map((line, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static ASCII art
+            <Text key={`a-${i}`} color="cyan" bold>
+              {line}
+            </Text>
+          ))}
+        </Box>
+      ) : (
+        <Text bold color="cyan">
+          celilo
+        </Text>
+      )}
+      <Box marginTop={1} flexDirection="column">
+        {description.map((line, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
+          <Text key={`d-${i}`}>{line}</Text>
+        ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>https://celilo.computer</Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text bold>This screen — `system audit`</Text>
+        {screenDesc.map((line, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
+          <Text key={`s-${i}`}>{line}</Text>
+        ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Press `?` for the full keymap.</Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Copyright 2026 Peter Banka</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function DetailPane({ state, focused, width }: Props) {
+  const finding = selectedFinding(state);
+  const showBanner = state.focusedPane === 'summary';
+  const inboxZero = !state.auditing && state.report.findings.length === 0;
+  // Content width = pane width - 2 border cols - 2 padding cols (paddingX={1}).
+  const contentWidth = Math.max(width - 4, 10);
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={focused ? 'cyan' : 'gray'}
+      flexDirection="column"
+      paddingX={1}
+      width="100%"
+      height="100%"
+      overflow="hidden"
+    >
+      <Text dimColor>4 Detail</Text>
+      <Box flexDirection="column" marginTop={1}>
+        {showBanner ? (
+          <CeliloBanner contentWidth={contentWidth} />
+        ) : inboxZero ? (
+          <InboxZeroCelebration />
+        ) : finding === null ? (
+          <Text dimColor>(no finding selected)</Text>
+        ) : (
+          <>
+            {wrapText(finding.message, contentWidth).map((line, i) => (
+              <Text
+                // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
+                key={`m-${i}`}
+                bold
+                color={SEVERITY_VISUALS[finding.severity].color}
+              >
+                {line}
+              </Text>
+            ))}
+            {finding.details && (
+              <Box marginTop={1} flexDirection="column">
+                {wrapText(finding.details, contentWidth).map((line, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
+                  <Text key={`line-${i}`}>{line}</Text>
+                ))}
+              </Box>
+            )}
+            {finding.remediation && finding.actionable && (
+              <Box marginTop={1} flexDirection="column">
+                {wrapText(`→ ${finding.remediation}`, contentWidth).map((line, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
+                  <Text key={`rem-${i}`} color="cyan">
+                    {line}
+                  </Text>
+                ))}
+              </Box>
+            )}
+            {finding.remediation && !finding.actionable && (
+              <Box marginTop={1} flexDirection="column">
+                {/*
+                 * Non-runnable remediation — render as plain guidance
+                 * (no `→` arrow, no command-style cyan) so the user
+                 * doesn't expect to hit `r` and get a one-shot fix.
+                 */}
+                {wrapText(finding.remediation, contentWidth).map((line, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
+                  <Text key={`rem-${i}`} dimColor>
+                    {line}
+                  </Text>
+                ))}
+              </Box>
+            )}
+            <Box marginTop={1}>
+              <Text dimColor>
+                {finding.subject} · {finding.code}
+              </Text>
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}