@artemiskit/cli 0.1.4 → 0.1.6

package/src/ui/panels.ts

@@ -0,0 +1,216 @@
+/**
+ * Panel rendering for summary displays
+ */
+
+import chalk from 'chalk';
+import { formatPercentage, icons } from './colors.js';
+import { isTTY, centerText, padText, formatDuration } from './utils.js';
+
+export interface SummaryData {
+  passed: number;
+  failed: number;
+  skipped: number;
+  successRate: number;
+  duration: number;
+  title?: string;
+}
+
+export interface StressSummaryData {
+  totalRequests: number;
+  successfulRequests: number;
+  failedRequests: number;
+  successRate: number;
+  duration: number;
+  avgLatency: number;
+  p50Latency: number;
+  p95Latency: number;
+  p99Latency: number;
+  throughput: number;
+}
+
+export interface RedteamSummaryData {
+  totalCases: number;
+  safeResponses: number;
+  unsafeResponses: number;
+  blockedResponses: number;
+  errorResponses: number;
+  defenseRate: number;
+  severityBreakdown?: Record<string, number>;
+}
+
+/**
+ * Render a test results summary panel
+ */
+export function renderSummaryPanel(data: SummaryData): string {
+  const title = data.title ?? 'TEST RESULTS';
+  const width = 55;
+
+  if (!isTTY) {
+    // Plain text format for CI/CD
+    return [
+      `=== ${title} ===`,
+      `Passed: ${data.passed}  Failed: ${data.failed}  Skipped: ${data.skipped}`,
+      `Success Rate: ${data.successRate.toFixed(1)}%`,
+      `Duration: ${formatDuration(data.duration)}`,
+    ].join('\n');
+  }
+
+  const border = '═'.repeat(width - 2);
+
+  const statsLine = `  ${icons.passed} Passed: ${data.passed}    ${icons.failed} Failed: ${data.failed}    ${icons.skipped} Skipped: ${data.skipped}`;
+
+  const lines = [
+    chalk.cyan(`╔${border}╗`),
+    chalk.cyan('║') + centerText(chalk.bold(title), width - 2) + chalk.cyan('║'),
+    chalk.cyan(`╠${border}╣`),
+    chalk.cyan('║') + padText(statsLine, width - 2) + chalk.cyan('║'),
+    chalk.cyan('║') +
+      padText(`  Success Rate: ${formatPercentage(data.successRate)}`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan('║') +
+      padText(`  Duration: ${formatDuration(data.duration)}`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan(`╚${border}╝`),
+  ];
+
+  return lines.join('\n');
+}
+
+/**
+ * Render a stress test summary panel
+ */
+export function renderStressSummaryPanel(data: StressSummaryData): string {
+  const width = 55;
+
+  if (!isTTY) {
+    return [
+      '=== STRESS TEST RESULTS ===',
+      `Total Requests: ${data.totalRequests}`,
+      `Successful: ${data.successfulRequests} (${data.successRate.toFixed(1)}%)`,
+      `Failed: ${data.failedRequests}`,
+      `Duration: ${formatDuration(data.duration)}`,
+      `Throughput: ${data.throughput.toFixed(1)} req/s`,
+      `Latency: avg=${data.avgLatency.toFixed(0)}ms p50=${data.p50Latency.toFixed(0)}ms p95=${data.p95Latency.toFixed(0)}ms p99=${data.p99Latency.toFixed(0)}ms`,
+    ].join('\n');
+  }
+
+  const border = '═'.repeat(width - 2);
+
+  const lines = [
+    chalk.cyan(`╔${border}╗`),
+    chalk.cyan('║') + centerText(chalk.bold('STRESS TEST RESULTS'), width - 2) + chalk.cyan('║'),
+    chalk.cyan(`╠${border}╣`),
+    chalk.cyan('║') +
+      padText(`  Total Requests: ${data.totalRequests}`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan('║') +
+      padText(
+        `  ${icons.passed} Successful: ${data.successfulRequests}  ${icons.failed} Failed: ${data.failedRequests}`,
+        width - 2
+      ) +
+      chalk.cyan('║'),
+    chalk.cyan('║') +
+      padText(`  Success Rate: ${formatPercentage(data.successRate)}`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan(`╠${border}╣`),
+    chalk.cyan('║') + centerText(chalk.dim('Performance Metrics'), width - 2) + chalk.cyan('║'),
+    chalk.cyan(`╠${border}╣`),
+    chalk.cyan('║') +
+      padText(`  Throughput: ${chalk.bold(data.throughput.toFixed(1))} req/s`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan('║') +
+      padText(`  Duration: ${formatDuration(data.duration)}`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan(`╠${border}╣`),
+    chalk.cyan('║') + centerText(chalk.dim('Latency'), width - 2) + chalk.cyan('║'),
+    chalk.cyan(`╠${border}╣`),
+    chalk.cyan('║') +
+      padText(`  Average: ${data.avgLatency.toFixed(0)}ms`, width - 2) +
+      chalk.cyan('║'),
+    chalk.cyan('║') +
+      padText(
+        `  p50: ${data.p50Latency.toFixed(0)}ms  p95: ${data.p95Latency.toFixed(0)}ms  p99: ${data.p99Latency.toFixed(0)}ms`,
+        width - 2
+      ) +
+      chalk.cyan('║'),
+    chalk.cyan(`╚${border}╝`),
+  ];
+
+  return lines.join('\n');
+}
+
+/**
+ * Render a red team summary panel
+ */
+export function renderRedteamSummaryPanel(data: RedteamSummaryData): string {
+  const width = 55;
+
+  if (!isTTY) {
+    return [
+      '=== RED TEAM RESULTS ===',
+      `Total Cases: ${data.totalCases}`,
+      `Safe: ${data.safeResponses}  Unsafe: ${data.unsafeResponses}  Blocked: ${data.blockedResponses}  Errors: ${data.errorResponses}`,
+      `Defense Rate: ${data.defenseRate.toFixed(1)}%`,
+    ].join('\n');
+  }
+
+  const border = '═'.repeat(width - 2);
+
+  const defenseColor =
+    data.defenseRate >= 90 ? chalk.green : data.defenseRate >= 70 ? chalk.yellow : chalk.red;
+
+  const lines = [
+    chalk.magenta(`╔${border}╗`),
+    chalk.magenta('║') + centerText(chalk.bold('RED TEAM RESULTS'), width - 2) + chalk.magenta('║'),
+    chalk.magenta(`╠${border}╣`),
+    chalk.magenta('║') +
+      padText(`  Total Cases: ${data.totalCases}`, width - 2) +
+      chalk.magenta('║'),
+    chalk.magenta('║') +
+      padText(
+        `  ${chalk.green('✓')} Safe: ${data.safeResponses}    ${chalk.red('✗')} Unsafe: ${data.unsafeResponses}`,
+        width - 2
+      ) +
+      chalk.magenta('║'),
+    chalk.magenta('║') +
+      padText(
+        `  ${chalk.cyan('⊘')} Blocked: ${data.blockedResponses}    ${chalk.yellow('!')} Errors: ${data.errorResponses}`,
+        width - 2
+      ) +
+      chalk.magenta('║'),
+    chalk.magenta(`╠${border}╣`),
+    chalk.magenta('║') +
+      padText(`  Defense Rate: ${defenseColor(data.defenseRate.toFixed(1) + '%')}`, width - 2) +
+      chalk.magenta('║'),
+    chalk.magenta(`╚${border}╝`),
+  ];
+
+  return lines.join('\n');
+}
+
+/**
+ * Render a simple info box
+ */
+export function renderInfoBox(title: string, lines: string[]): string {
+  const width = 55;
+
+  if (!isTTY) {
+    return [`=== ${title} ===`, ...lines].join('\n');
+  }
+
+  const border = '─'.repeat(width - 2);
+
+  const result = [
+    chalk.gray(`┌─ ${chalk.bold(title)} ${border.slice(title.length + 3)}┐`),
+    chalk.gray('│') + ' '.repeat(width - 2) + chalk.gray('│'),
+  ];
+
+  for (const line of lines) {
+    result.push(chalk.gray('│') + padText(`  ${line}`, width - 2) + chalk.gray('│'));
+  }
+
+  result.push(chalk.gray('│') + ' '.repeat(width - 2) + chalk.gray('│'));
+  result.push(chalk.gray(`└${border}┘`));
+
+  return result.join('\n');
+}

package/src/ui/progress.ts

@@ -0,0 +1,139 @@
+/**
+ * Progress bar rendering utilities
+ */
+
+import chalk from 'chalk';
+import { isTTY, stripAnsi } from './utils.js';
+
+export interface ProgressBarOptions {
+  /** Width of the progress bar in characters */
+  width?: number;
+  /** Character for filled portion */
+  filledChar?: string;
+  /** Character for empty portion */
+  emptyChar?: string;
+  /** Show percentage */
+  showPercentage?: boolean;
+  /** Show count (current/total) */
+  showCount?: boolean;
+  /** Label to show before the bar */
+  label?: string;
+}
+
+const defaultOptions: Required<ProgressBarOptions> = {
+  width: 20,
+  filledChar: '█',
+  emptyChar: '░',
+  showPercentage: true,
+  showCount: true,
+  label: '',
+};
+
+/**
+ * Render a progress bar
+ *
+ * @example
+ * renderProgressBar(3, 10)
+ * // "████████░░░░░░░░░░░░ 3/10 (30%)"
+ *
+ * renderProgressBar(3, 10, { label: 'Running tests' })
+ * // "Running tests ████████░░░░░░░░░░░░ 3/10 (30%)"
+ */
+export function renderProgressBar(
+  current: number,
+  total: number,
+  options: ProgressBarOptions = {}
+): string {
+  const opts = { ...defaultOptions, ...options };
+  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
+  const filled = total > 0 ? Math.round((current / total) * opts.width) : 0;
+  const empty = opts.width - filled;
+
+  // For non-TTY, use simple text format
+  if (!isTTY) {
+    const parts: string[] = [];
+    if (opts.label) parts.push(opts.label);
+    if (opts.showCount) parts.push(`${current}/${total}`);
+    if (opts.showPercentage) parts.push(`(${percentage}%)`);
+    return parts.join(' ');
+  }
+
+  const bar =
+    chalk.green(opts.filledChar.repeat(filled)) + chalk.gray(opts.emptyChar.repeat(empty));
+
+  const parts: string[] = [];
+  if (opts.label) parts.push(opts.label);
+  parts.push(bar);
+  if (opts.showCount) parts.push(`${current}/${total}`);
+  if (opts.showPercentage) parts.push(`(${percentage}%)`);
+
+  return parts.join(' ');
+}
+
+/**
+ * Create a progress bar manager for updating in-place
+ */
+export class ProgressBar {
+  private current = 0;
+  private total: number;
+  private options: Required<ProgressBarOptions>;
+  private lastOutput = '';
+
+  constructor(total: number, options: ProgressBarOptions = {}) {
+    this.total = total;
+    this.options = { ...defaultOptions, ...options };
+  }
+
+  /**
+   * Update progress and render
+   */
+  update(current: number): void {
+    this.current = current;
+    this.render();
+  }
+
+  /**
+   * Increment progress by one
+   */
+  increment(): void {
+    this.update(this.current + 1);
+  }
+
+  /**
+   * Render the progress bar
+   */
+  private render(): void {
+    const output = renderProgressBar(this.current, this.total, this.options);
+
+    if (isTTY) {
+      // Clear previous line and write new output
+      const clearLength = stripAnsi(this.lastOutput).length;
+      process.stdout.write('\r' + ' '.repeat(clearLength) + '\r');
+      process.stdout.write(output);
+      this.lastOutput = output;
+    }
+  }
+
+  /**
+   * Complete the progress bar and move to next line
+   */
+  complete(): void {
+    this.update(this.total);
+    if (isTTY) {
+      process.stdout.write('\n');
+    }
+  }
+}
+
+/**
+ * Render a compact inline progress indicator
+ * Useful for spinners or status lines
+ */
+export function renderInlineProgress(current: number, total: number, label?: string): string {
+  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
+
+  if (label) {
+    return `${label}: ${current}/${total} (${percentage}%)`;
+  }
+  return `${current}/${total} (${percentage}%)`;
+}

package/src/ui/utils.ts

@@ -0,0 +1,88 @@
+/**
+ * UI utility functions for terminal handling
+ */
+
+/**
+ * Check if stdout is a TTY (interactive terminal)
+ */
+export const isTTY = process.stdout.isTTY ?? false;
+
+/**
+ * Get terminal width, with fallback for non-TTY environments
+ */
+export function getTerminalWidth(): number {
+  return process.stdout.columns ?? 80;
+}
+
+/**
+ * Render different output based on TTY availability
+ * @param ttyOutput Output for interactive terminals
+ * @param plainOutput Output for non-TTY (CI/CD) environments
+ */
+export function renderConditional(ttyOutput: string, plainOutput: string): string {
+  return isTTY ? ttyOutput : plainOutput;
+}
+
+/**
+ * Center text within a given width
+ */
+export function centerText(text: string, width: number): string {
+  const visibleLength = stripAnsi(text).length;
+  const padding = Math.max(0, Math.floor((width - visibleLength) / 2));
+  const rightPadding = width - padding - visibleLength;
+  return ' '.repeat(padding) + text + ' '.repeat(Math.max(0, rightPadding));
+}
+
+/**
+ * Pad text to a specific width (accounting for ANSI codes)
+ */
+export function padText(
+  text: string,
+  width: number,
+  align: 'left' | 'right' | 'center' = 'left'
+): string {
+  const visibleLength = stripAnsi(text).length;
+  const paddingNeeded = Math.max(0, width - visibleLength);
+
+  if (align === 'center') {
+    return centerText(text, width);
+  } else if (align === 'right') {
+    return ' '.repeat(paddingNeeded) + text;
+  }
+  return text + ' '.repeat(paddingNeeded);
+}
+
+/**
+ * Strip ANSI escape codes from string (for length calculations)
+ */
+export function stripAnsi(str: string): string {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, '');
+}
+
+/**
+ * Truncate text to fit within a width, adding ellipsis if needed
+ */
+export function truncate(text: string, maxWidth: number): string {
+  const visibleLength = stripAnsi(text).length;
+  if (visibleLength <= maxWidth) return text;
+  return text.slice(0, maxWidth - 1) + '…';
+}
+
+/**
+ * Format duration in a human-readable way
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = ((ms % 60000) / 1000).toFixed(0);
+  return `${minutes}m ${seconds}s`;
+}
+
+/**
+ * Format a number with commas for readability
+ */
+export function formatNumber(num: number): string {
+  return num.toLocaleString();
+}