codeant-cli 0.3.3 → 0.3.5

package/src/components/SecretsUI.js

@@ -0,0 +1,366 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+
+// ── Constants ────────────────────────────────────────────────────────────────
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const DIVIDER = '─'.repeat(55);
+const STEPS = ['Init', 'Fetch', 'Scan'];
+
+const CONFIDENCE_COLORS = {
+  HIGH: 'red',
+  MEDIUM: 'yellow',
+  LOW: 'cyan',
+  FALSE_POSITIVE: 'gray',
+};
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function getConfidenceColor(score) {
+  return CONFIDENCE_COLORS[score?.toUpperCase()] || 'gray';
+}
+
+function padEnd(str, len) {
+  return str + ' '.repeat(Math.max(0, len - str.length));
+}
+
+function formatElapsed(startTime) {
+  return ((Date.now() - startTime) / 1000).toFixed(1) + 's';
+}
+
+// ── Animated Components ──────────────────────────────────────────────────────
+
+function Spinner({ color = 'cyan' }) {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame(f => (f + 1) % SPINNER_FRAMES.length);
+    }, 80);
+    return () => clearInterval(timer);
+  }, []);
+  return React.createElement(Text, { color }, SPINNER_FRAMES[frame]);
+}
+
+function ElapsedTime({ startTime }) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => setTick(t => t + 1), 100);
+    return () => clearInterval(timer);
+  }, []);
+  return React.createElement(Text, { color: 'gray' }, formatElapsed(startTime));
+}
+
+function StepProgress({ currentStep }) {
+  const items = STEPS.map((step, i) => {
+    if (i < currentStep) {
+      return React.createElement(Text, { key: step, color: 'green' }, `✓ ${step}`);
+    } else if (i === currentStep) {
+      return React.createElement(
+        Box, { key: step },
+        React.createElement(Spinner, { color: 'cyan' }),
+        React.createElement(Text, { color: 'cyan' }, ` ${step}`),
+      );
+    } else {
+      return React.createElement(Text, { key: step, color: 'gray', dimColor: true }, `· ${step}`);
+    }
+  });
+  return React.createElement(Box, { gap: 2 }, ...items);
+}
+
+// ── Loading Screen ───────────────────────────────────────────────────────────
+
+function SecretsLoading({ message, step, startTime, fileCount, meta }) {
+  const els = [
+    React.createElement(
+      Box, { key: 'status', gap: 1 },
+      React.createElement(Spinner, {}),
+      React.createElement(Text, { color: 'white', bold: true }, message),
+      startTime != null && React.createElement(ElapsedTime, { startTime }),
+    ),
+    React.createElement(
+      Box, { key: 'steps', marginTop: 1 },
+      React.createElement(StepProgress, { currentStep: step }),
+    ),
+  ];
+
+  // Show file list and coverage info when we have metadata (during scan step)
+  if (meta && step >= 2) {
+    const scanned = meta.scanned_files || [];
+    const total = meta.total_changed || 0;
+    const skipped = meta.skipped || [];
+
+    els.push(React.createElement(Text, { key: 'meta-sp' }, ''));
+    els.push(React.createElement(
+      Text, { key: 'meta-hdr', color: 'gray', dimColor: true }, DIVIDER,
+    ));
+
+    // Coverage line
+    if (total > 0) {
+      const coverageColor = scanned.length === total ? 'green' : 'yellow';
+      els.push(React.createElement(
+        Text, { key: 'coverage', color: coverageColor },
+        `Scanning ${scanned.length} of ${total} changed file${total !== 1 ? 's' : ''}`,
+      ));
+    }
+
+    // File list
+    if (scanned.length > 0) {
+      els.push(React.createElement(Text, { key: 'files-sp' }, ''));
+      scanned.forEach((file, i) => {
+        const isLast = i === scanned.length - 1;
+        const branch = isLast ? '└─' : '├─';
+        els.push(React.createElement(
+          Text, { key: `file-${i}`, color: 'white' },
+          `  ${branch} ${file}`,
+        ));
+      });
+    }
+
+    // Skipped summary
+    if (skipped.length > 0) {
+      els.push(React.createElement(Text, { key: 'skip-sp' }, ''));
+      const reasons = {};
+      skipped.forEach(s => {
+        const r = s.reason.split(' (')[0];
+        reasons[r] = (reasons[r] || 0) + 1;
+      });
+      const parts = Object.entries(reasons).map(([r, n]) => `${n} ${r}`);
+      els.push(React.createElement(
+        Text, { key: 'skipped', color: 'gray', dimColor: true },
+        `Skipped: ${parts.join(' · ')}`,
+      ));
+    }
+  }
+
+  return React.createElement(
+    Box, { flexDirection: 'column', paddingX: 1, paddingY: 1 }, ...els,
+  );
+}
+
+// ── Public Render Functions ──────────────────────────────────────────────────
+
+export function renderInitializing(startTime) {
+  return React.createElement(SecretsLoading, {
+    message: 'Initializing...',
+    step: 0,
+    startTime,
+  });
+}
+
+export function renderFetchingDiff(startTime) {
+  return React.createElement(SecretsLoading, {
+    message: 'Fetching changes...',
+    step: 1,
+    startTime,
+  });
+}
+
+export function renderScanning(startTime, fileCount, meta) {
+  return React.createElement(SecretsLoading, {
+    message: 'Scanning for secrets...',
+    step: 2,
+    startTime,
+    fileCount,
+    meta,
+  });
+}
+
+export function renderNoFiles(scanType, lastNCommits, baseBranch, baseCommit) {
+  const hints = {
+    'staged-only': 'Stage some changes first with "git add".',
+    'branch-diff': 'No changes found compared to the base branch.',
+    'uncommitted': 'No uncommitted changes found.',
+    'committed': 'No unpushed commits found.',
+    'all': 'No changes found between your branch and the base.',
+    'last-commit': 'No files found in the last commit.',
+    'last-n-commits': `No changes found in the last ${lastNCommits} commit(s).`,
+    'base-branch': `No changes found compared to ${baseBranch}.`,
+    'base-commit': `No changes found compared to commit ${baseCommit}.`,
+  };
+  return React.createElement(
+    Box, { flexDirection: 'column', paddingX: 1, paddingY: 1 },
+    React.createElement(Text, { color: 'cyan', bold: true }, 'CodeAnt Secrets'),
+    React.createElement(Text, { color: 'gray', dimColor: true }, DIVIDER),
+    React.createElement(Text, {}, ''),
+    React.createElement(Text, { color: 'yellow' }, '  No changes to scan.'),
+    React.createElement(Text, { color: 'gray' }, `  ${hints[scanType] || 'No files found.'}`),
+    React.createElement(Text, {}, ''),
+  );
+}
+
+export function renderError(error) {
+  return React.createElement(
+    Box, { flexDirection: 'column', paddingX: 1, paddingY: 1 },
+    React.createElement(Text, { color: 'cyan', bold: true }, 'CodeAnt Secrets'),
+    React.createElement(Text, { color: 'gray', dimColor: true }, DIVIDER),
+    React.createElement(Text, {}, ''),
+    React.createElement(Text, { color: 'red', bold: true }, `  ✗ ${error}`),
+    React.createElement(Text, {}, ''),
+  );
+}
+
+export function renderNotLoggedIn() {
+  return React.createElement(
+    Box, { flexDirection: 'column', paddingX: 1, paddingY: 1 },
+    React.createElement(Text, { color: 'cyan', bold: true }, 'CodeAnt Secrets'),
+    React.createElement(Text, { color: 'gray', dimColor: true }, DIVIDER),
+    React.createElement(Text, {}, ''),
+    React.createElement(Text, { color: 'red', bold: true }, '  ✗ Not logged in'),
+    React.createElement(Text, { color: 'gray' }, '  Run "codeant login" to authenticate.'),
+    React.createElement(Text, {}, ''),
+  );
+}
+
+export function renderDone(secrets, failOn, shouldFailOn, startTime, fileCount, meta) {
+  const allSecrets = secrets.flatMap(file =>
+    file.secrets.map(s => ({ ...s, file_path: file.file_path }))
+  );
+
+  const blockingSecrets = allSecrets.filter(s => shouldFailOn(s.confidence_score));
+  const hasBlocking = blockingSecrets.length > 0;
+  const elapsed = startTime ? formatElapsed(startTime) : null;
+
+  // Count by confidence
+  const counts = {};
+  allSecrets.forEach(s => {
+    const conf = s.confidence_score?.toUpperCase() || 'UNKNOWN';
+    counts[conf] = (counts[conf] || 0) + 1;
+  });
+
+  // Group by file
+  const grouped = {};
+  allSecrets.forEach(s => {
+    const file = s.file_path || 'Unknown';
+    (grouped[file] ??= []).push(s);
+  });
+  const sortedFiles = Object.keys(grouped).sort();
+  sortedFiles.forEach(f =>
+    grouped[f].sort((a, b) => (a.line_number || 0) - (b.line_number || 0))
+  );
+
+  const els = [];
+
+  // ── Header ──
+  els.push(React.createElement(
+    Box, { key: 'hdr', gap: 1 },
+    React.createElement(Text, { color: 'cyan', bold: true }, 'CodeAnt Secrets'),
+    elapsed && React.createElement(Text, { color: 'gray' }, elapsed),
+  ));
+  els.push(React.createElement(
+    Text, { key: 'div1', color: 'gray', dimColor: true }, DIVIDER,
+  ));
+
+  if (allSecrets.length === 0) {
+    // ── Clean pass ──
+    els.push(React.createElement(Text, { key: 'sp' }, ''));
+    els.push(React.createElement(
+      Text, { key: 'ok', color: 'green', bold: true }, '  ✓ No secrets found',
+    ));
+    els.push(React.createElement(Text, { key: 'sp2' }, ''));
+  } else {
+    // ── Secrets grouped by file ──
+    els.push(React.createElement(Text, { key: 'sp1' }, ''));
+
+    sortedFiles.forEach((file, fi) => {
+      const fileSecrets = grouped[file];
+
+      els.push(React.createElement(
+        Text, { key: `f-${fi}`, color: 'white', bold: true }, `  ${file}`,
+      ));
+
+      fileSecrets.forEach((secret, si) => {
+        const conf = secret.confidence_score?.toUpperCase() || 'UNKNOWN';
+        const confColor = getConfidenceColor(conf);
+        const isBlocking = shouldFailOn(secret.confidence_score);
+        const isLast = si === fileSecrets.length - 1;
+        const branch = isLast ? '└─' : '├─';
+        const lineStr = secret.line_number ? `L${secret.line_number}` : '';
+
+        els.push(React.createElement(
+          Box, { key: `s-${fi}-${si}` },
+          React.createElement(Text, { color: 'gray' }, `    ${branch} `),
+          React.createElement(Text, {
+            color: confColor,
+            bold: isBlocking,
+          }, padEnd(conf, 16)),
+          React.createElement(Text, { color: 'gray' }, padEnd(lineStr, 6)),
+          React.createElement(Text, { color: isBlocking ? 'white' : 'gray', dimColor: !isBlocking }, secret.type || ''),
+        ));
+      });
+
+      els.push(React.createElement(Text, { key: `g-${fi}` }, ''));
+    });
+  }
+
+  // ── Footer ──
+  els.push(React.createElement(
+    Text, { key: 'div2', color: 'gray', dimColor: true }, DIVIDER,
+  ));
+
+  // Coverage line
+  const totalChanged = meta?.total_changed || 0;
+  const scannedCount = meta?.scanned_files?.length || fileCount;
+  if (totalChanged > 0) {
+    const coverageColor = scannedCount === totalChanged ? 'green' : 'yellow';
+    els.push(React.createElement(
+      Text, { key: 'coverage', color: coverageColor },
+      `Scanned ${scannedCount} of ${totalChanged} changed file${totalChanged !== 1 ? 's' : ''}`,
+    ));
+  } else if (fileCount) {
+    els.push(React.createElement(
+      Text, { key: 'coverage', color: 'gray' },
+      `${fileCount} file${fileCount !== 1 ? 's' : ''} scanned`,
+    ));
+  }
+
+  // Skipped files summary
+  const skipped = meta?.skipped || [];
+  if (skipped.length > 0) {
+    const reasons = {};
+    skipped.forEach(s => {
+      const r = s.reason.split(' (')[0];
+      reasons[r] = (reasons[r] || 0) + 1;
+    });
+    const parts = Object.entries(reasons).map(([r, n]) => `${n} ${r}`);
+    els.push(React.createElement(
+      Text, { key: 'skipped', color: 'gray', dimColor: true },
+      `Skipped: ${parts.join(' · ')}`,
+    ));
+  }
+
+  // Secret stats line
+  if (allSecrets.length > 0) {
+    const stats = [`${allSecrets.length} secret${allSecrets.length !== 1 ? 's' : ''} found`];
+    for (const conf of ['HIGH', 'MEDIUM', 'LOW', 'FALSE_POSITIVE']) {
+      if (counts[conf]) {
+        const label = conf === 'FALSE_POSITIVE' ? 'false positive' : conf.toLowerCase();
+        stats.push(`${counts[conf]} ${label}`);
+      }
+    }
+    els.push(React.createElement(
+      Text, { key: 'stats', color: 'gray' }, stats.join('  ·  '),
+    ));
+  }
+
+  // Status line
+  if (hasBlocking) {
+    els.push(React.createElement(
+      Text, { key: 'status', color: 'red', bold: true },
+      `✗ ${blockingSecrets.length} blocking secret${blockingSecrets.length !== 1 ? 's' : ''} — remove before committing`,
+    ));
+  } else if (allSecrets.length > 0) {
+    els.push(React.createElement(
+      Text, { key: 'status', color: 'green', bold: true },
+      '✓ No blocking secrets found',
+    ));
+  } else {
+    els.push(React.createElement(
+      Text, { key: 'status', color: 'green', bold: true },
+      '✓ All clear',
+    ));
+  }
+
+  return React.createElement(
+    Box, { flexDirection: 'column', paddingX: 1, paddingY: 1 }, ...els,
+  );
+}

package/src/components/Welcome.js

@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import { Text, Box, useApp } from 'ink';
+
+const logo = `
+   ___          _        _          _
+  / __\\___   __| | ___  / \\   _ __ | |_
+ / /  / _ \\ / _\` |/ _ \\/  /\\ | '_ \\| __|
+/ /__| (_) | (_| |  __/\\_/ \\ | | | | |_
+\\____/\\___/ \\__,_|\\___\\___/\\_/_| |_|\\__|
+`;
+
+const tagline = "Your AI-powered code review companion";
+
+const commands = [
+  { cmd: 'codeant review', desc: 'Run AI-powered code review' },
+  { cmd: 'codeant secrets', desc: 'Scan for secrets in your code' },
+  { cmd: 'codeant login', desc: 'Login to CodeAnt' },
+  { cmd: 'codeant --help', desc: 'Show all commands' },
+];
+
+export default function Welcome({ version }) {
+  const { exit } = useApp();
+  const [displayedLogo, setDisplayedLogo] = useState('');
+  const [displayedTagline, setDisplayedTagline] = useState('');
+  const [showCursor, setShowCursor] = useState(true);
+  const [phase, setPhase] = useState('logo');
+  const [showCommands, setShowCommands] = useState(false);
+
+  // Typing effect for logo (fast)
+  useEffect(() => {
+    if (phase !== 'logo') return;
+
+    let i = 0;
+    const chars = logo.split('');
+    const interval = setInterval(() => {
+      if (i < chars.length) {
+        setDisplayedLogo(prev => prev + chars[i]);
+        i++;
+      } else {
+        clearInterval(interval);
+        setPhase('tagline');
+      }
+    }, 2);
+
+    return () => clearInterval(interval);
+  }, [phase]);
+
+  // Typing effect for tagline (slower, more dramatic)
+  useEffect(() => {
+    if (phase !== 'tagline') return;
+
+    let i = 0;
+    const chars = tagline.split('');
+    const interval = setInterval(() => {
+      if (i < chars.length) {
+        setDisplayedTagline(prev => prev + chars[i]);
+        i++;
+      } else {
+        clearInterval(interval);
+        setPhase('commands');
+        setShowCommands(true);
+      }
+    }, 25);
+
+    return () => clearInterval(interval);
+  }, [phase]);
+
+  // Blinking cursor
+  useEffect(() => {
+    if (phase === 'commands') {
+      setShowCursor(false);
+      return;
+    }
+    const interval = setInterval(() => {
+      setShowCursor(prev => !prev);
+    }, 400);
+    return () => clearInterval(interval);
+  }, [phase]);
+
+  // Exit after animation
+  useEffect(() => {
+    if (showCommands) {
+      const timeout = setTimeout(() => exit(), 100);
+      return () => clearTimeout(timeout);
+    }
+  }, [showCommands, exit]);
+
+  const cursor = showCursor ? '|' : ' ';
+
+  const elements = [
+    React.createElement(Text, { key: 'logo', color: 'cyan', bold: true }, displayedLogo)
+  ];
+
+  if (phase !== 'logo') {
+    elements.push(
+      React.createElement(
+        Box,
+        { key: 'tagline-box', marginTop: 0 },
+        React.createElement(
+          Text,
+          { color: 'magenta', italic: true },
+          displayedTagline,
+          React.createElement(Text, { color: 'gray' }, cursor)
+        )
+      )
+    );
+  }
+
+  if (showCommands) {
+    elements.push(
+      React.createElement(Text, { key: 'divider', color: 'gray' }, '─────────────────────────────────────────')
+    );
+
+    elements.push(
+      React.createElement(
+        Box,
+        { key: 'commands-box', marginTop: 1, flexDirection: 'column' },
+        React.createElement(Text, { color: 'yellow', bold: true }, 'Quick Start:'),
+        ...commands.map((item, idx) =>
+          React.createElement(
+            Box,
+            { key: `cmd-${idx}`, marginLeft: 2 },
+            React.createElement(Text, { color: 'green' }, `$ ${item.cmd}`),
+            React.createElement(Text, { color: 'gray' }, `  ${item.desc}`)
+          )
+        )
+      )
+    );
+
+    elements.push(
+      React.createElement(
+        Box,
+        { key: 'version-box', marginTop: 1 },
+        React.createElement(Text, { color: 'gray' }, `v${version || '0.0.0'}`)
+      )
+    );
+  }
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column', padding: 1 },
+    ...elements
+  );
+}