wiggum-cli 0.5.0 → 0.5.1

package/src/utils/colors.ts

@@ -101,3 +101,142 @@ export function sectionHeader(title: string): string {
   const line = drawLine(50);
   return `\n${line}\n${simpson.yellow(title)}\n${line}`;
 }
+
+/**
+ * Compact section header (single line style)
+ */
+export function compactHeader(title: string): string {
+  const titlePart = `─── ${title} ───`;
+  return simpson.yellow(titlePart);
+}
+
+/**
+ * Progress phase indicators
+ */
+export const phase = {
+  pending: '○',
+  active: '◐',
+  complete: '✓',
+  error: '✗',
+};
+
+/**
+ * Display a stack info box
+ */
+export function stackBox(stack: {
+  framework?: string;
+  language?: string;
+  testing?: string;
+  packageManager?: string;
+}): string {
+  const lines: string[] = [];
+  const maxLabelWidth = 10;
+
+  const addLine = (label: string, value: string | undefined) => {
+    if (value) {
+      const paddedLabel = label.padEnd(maxLabelWidth);
+      lines.push(`│  ${simpson.brown(paddedLabel)} ${value}`);
+    }
+  };
+
+  lines.push(simpson.brown('┌─ Detected Stack ────────────────────────────┐'));
+  addLine('Framework:', stack.framework);
+  addLine('Language:', stack.language);
+  addLine('Testing:', stack.testing);
+  addLine('Package:', stack.packageManager);
+  lines.push(simpson.brown('└─────────────────────────────────────────────┘'));
+
+  return lines.join('\n');
+}
+
+/**
+ * Progress phases display
+ */
+export interface ProgressPhase {
+  name: string;
+  status: 'pending' | 'active' | 'complete' | 'error';
+  detail?: string;
+}
+
+export function progressPhases(phases: ProgressPhase[]): string {
+  return phases.map((p, i) => {
+    const num = `${i + 1}.`;
+    const icon = phase[p.status];
+    const statusColor = p.status === 'complete' ? simpson.yellow :
+                        p.status === 'active' ? simpson.white :
+                        p.status === 'error' ? simpson.pink :
+                        simpson.brown;
+    const detail = p.detail ? simpson.brown(` (${p.detail})`) : '';
+    return `  ${num} ${statusColor(icon)} ${p.name}${detail}`;
+  }).join('\n');
+}
+
+/**
+ * File tree display for generated files
+ */
+export function fileTree(basePath: string, files: string[]): string {
+  // Group files by directory
+  const tree: Record<string, string[]> = {};
+
+  for (const file of files) {
+    const parts = file.split('/');
+    if (parts.length === 1) {
+      tree[''] = tree[''] || [];
+      tree[''].push(parts[0]);
+    } else {
+      const dir = parts.slice(0, -1).join('/');
+      const filename = parts[parts.length - 1];
+      tree[dir] = tree[dir] || [];
+      tree[dir].push(filename);
+    }
+  }
+
+  const lines: string[] = [`  ${simpson.yellow(basePath + '/')}`];
+  const dirs = Object.keys(tree).sort();
+
+  for (let i = 0; i < dirs.length; i++) {
+    const dir = dirs[i];
+    const isLastDir = i === dirs.length - 1;
+    const dirPrefix = isLastDir ? '  └── ' : '  ├── ';
+    const filePrefix = isLastDir ? '      ' : '  │   ';
+
+    if (dir) {
+      lines.push(`${dirPrefix}${simpson.brown(dir + '/')}`);
+    }
+
+    const filesInDir = tree[dir].sort();
+    for (let j = 0; j < filesInDir.length; j++) {
+      const file = filesInDir[j];
+      const isLastFile = j === filesInDir.length - 1;
+      const connector = dir ? (isLastFile ? '└── ' : '├── ') : (isLastFile && isLastDir ? '└── ' : '├── ');
+      const prefix = dir ? filePrefix : '  ';
+      lines.push(`${prefix}${connector}${file}`);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+/**
+ * Next steps box
+ */
+export function nextStepsBox(steps: Array<{ command: string; description: string }>): string {
+  const lines: string[] = [];
+  lines.push('');
+  lines.push(compactHeader('Next Steps'));
+  lines.push('');
+
+  for (const step of steps) {
+    lines.push(`  ${simpson.yellow('$')} ${step.command}`);
+    lines.push(`    ${simpson.brown(step.description)}`);
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}
+
+/**
+ * Fixed-length password mask (32 characters)
+ */
+export const PASSWORD_MASK_LENGTH = 32;
+export const PASSWORD_MASK = '▪'.repeat(PASSWORD_MASK_LENGTH);

package/src/utils/header.ts

@@ -1,12 +1,29 @@
 import cfonts from 'cfonts';
 import { simpson, drawBox, SIMPSON_COLORS } from './colors.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+// Get version from package.json
+function getVersion(): string {
+  try {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const packagePath = join(__dirname, '..', '..', 'package.json');
+    const pkg = JSON.parse(readFileSync(packagePath, 'utf-8'));
+    return pkg.version || '0.5.0';
+  } catch {
+    return '0.5.0';
+  }
+}
 
 /**
  * Display the WIGGUM CLI ASCII header with welcome box
  */
 export function displayHeader(): void {
-  // Welcome box like Claude Code
-  const welcomeText = '🍩 Welcome to ' + simpson.yellow('Wiggum CLI') + ': AI-powered Ralph development loop CLI 🍩';
+  const version = getVersion();
+  // Welcome box like Claude Code with version
+  const welcomeText = '🍩 Welcome to ' + simpson.yellow('Wiggum CLI') + ': AI-powered ' + simpson.yellow('Ralph') + ' development loop CLI ' + simpson.pink(`v${version}`) + ' 🍩';
   console.log('');
   console.log(drawBox(welcomeText, 2));
   console.log('');

package/src/utils/spinner.ts

@@ -0,0 +1,262 @@
+/**
+ * Custom Spinner with Shimmer Effect, Timer, and Token Tracking
+ * Inspired by Claude Code's loading experience
+ */
+
+import { simpson } from './colors.js';
+
+/**
+ * Shimmer frames for the spinner animation
+ * Creates a wave-like effect similar to Claude Code
+ */
+const SHIMMER_FRAMES = [
+  '░▒▓█▓▒░',
+  '▒▓█▓▒░░',
+  '▓█▓▒░░▒',
+  '█▓▒░░▒▓',
+  '▓▒░░▒▓█',
+  '▒░░▒▓█▓',
+  '░░▒▓█▓▒',
+  '░▒▓█▓▒░',
+];
+
+/**
+ * Braille spinner frames (alternative style)
+ */
+const BRAILLE_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+/**
+ * Dots spinner frames
+ */
+const DOTS_FRAMES = ['⠁', '⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'];
+
+/**
+ * Format milliseconds to human-readable time
+ */
+function formatTime(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+
+  if (minutes > 0) {
+    return `${minutes}m ${remainingSeconds}s`;
+  }
+  return `${seconds}s`;
+}
+
+/**
+ * Format token count with commas
+ */
+function formatTokens(tokens: number): string {
+  return tokens.toLocaleString();
+}
+
+export interface ShimmerSpinnerOptions {
+  /** Enable shimmer effect (default: true) */
+  shimmer?: boolean;
+  /** Show elapsed time (default: true) */
+  showTimer?: boolean;
+  /** Show token usage (default: false) */
+  showTokens?: boolean;
+  /** Spinner style (default: 'shimmer') */
+  style?: 'shimmer' | 'braille' | 'dots';
+}
+
+export interface TokenUsage {
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+}
+
+/**
+ * Custom spinner with shimmer effect, timer, and token tracking
+ */
+export class ShimmerSpinner {
+  private message: string = '';
+  private isRunning: boolean = false;
+  private intervalId: NodeJS.Timeout | null = null;
+  private frameIndex: number = 0;
+  private startTime: number = 0;
+  private tokens: TokenUsage = { inputTokens: 0, outputTokens: 0, totalTokens: 0 };
+  private options: Required<ShimmerSpinnerOptions>;
+  private frames: string[];
+
+  constructor(options: ShimmerSpinnerOptions = {}) {
+    this.options = {
+      shimmer: options.shimmer ?? true,
+      showTimer: options.showTimer ?? true,
+      showTokens: options.showTokens ?? false,
+      style: options.style ?? 'shimmer',
+    };
+
+    // Select frames based on style
+    switch (this.options.style) {
+      case 'braille':
+        this.frames = BRAILLE_FRAMES;
+        break;
+      case 'dots':
+        this.frames = DOTS_FRAMES;
+        break;
+      case 'shimmer':
+      default:
+        this.frames = SHIMMER_FRAMES;
+        break;
+    }
+  }
+
+  /**
+   * Start the spinner with a message
+   */
+  start(message: string): void {
+    this.message = message;
+    this.isRunning = true;
+    this.startTime = Date.now();
+    this.frameIndex = 0;
+
+    // Clear line and hide cursor
+    process.stdout.write('\x1B[?25l');
+
+    this.render();
+    this.intervalId = setInterval(() => {
+      this.frameIndex = (this.frameIndex + 1) % this.frames.length;
+      this.render();
+    }, 80);
+  }
+
+  /**
+   * Update the spinner message
+   */
+  update(message: string): void {
+    this.message = message;
+  }
+
+  /**
+   * Update token usage (adds to existing)
+   */
+  updateTokens(usage: TokenUsage): void {
+    this.tokens = {
+      inputTokens: this.tokens.inputTokens + usage.inputTokens,
+      outputTokens: this.tokens.outputTokens + usage.outputTokens,
+      totalTokens: this.tokens.totalTokens + usage.totalTokens,
+    };
+  }
+
+  /**
+   * Set token usage directly
+   */
+  setTokens(usage: TokenUsage): void {
+    this.tokens = usage;
+  }
+
+  /**
+   * Render the spinner
+   */
+  private render(): void {
+    if (!this.isRunning) return;
+
+    const elapsed = Date.now() - this.startTime;
+    const frame = this.frames[this.frameIndex];
+
+    let line = '';
+
+    // Shimmer/spinner frame
+    if (this.options.shimmer && this.options.style === 'shimmer') {
+      line += simpson.yellow(frame) + ' ';
+    } else {
+      line += simpson.yellow(frame) + ' ';
+    }
+
+    // Message
+    line += this.message;
+
+    // Timer
+    if (this.options.showTimer) {
+      line += simpson.brown(` [${formatTime(elapsed)}]`);
+    }
+
+    // Tokens
+    if (this.options.showTokens && this.tokens.totalTokens > 0) {
+      line += simpson.pink(` (${formatTokens(this.tokens.totalTokens)} tokens)`);
+    }
+
+    // Clear line and write
+    process.stdout.write('\r\x1B[K' + line);
+  }
+
+  /**
+   * Stop the spinner with a final message
+   */
+  stop(finalMessage?: string): void {
+    this.isRunning = false;
+
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+
+    const elapsed = Date.now() - this.startTime;
+
+    // Build final line
+    let line = '';
+    line += simpson.yellow('✓') + ' ';
+    line += finalMessage || this.message;
+
+    if (this.options.showTimer) {
+      line += simpson.brown(` [${formatTime(elapsed)}]`);
+    }
+
+    if (this.options.showTokens && this.tokens.totalTokens > 0) {
+      line += simpson.pink(` (${formatTokens(this.tokens.totalTokens)} tokens)`);
+    }
+
+    // Clear line, show cursor, print final
+    process.stdout.write('\r\x1B[K' + line + '\n');
+    process.stdout.write('\x1B[?25h');
+  }
+
+  /**
+   * Stop with error
+   */
+  fail(message?: string): void {
+    this.isRunning = false;
+
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+
+    const elapsed = Date.now() - this.startTime;
+
+    let line = '';
+    line += simpson.pink('✗') + ' ';
+    line += message || this.message;
+
+    if (this.options.showTimer) {
+      line += simpson.brown(` [${formatTime(elapsed)}]`);
+    }
+
+    process.stdout.write('\r\x1B[K' + line + '\n');
+    process.stdout.write('\x1B[?25h');
+  }
+
+  /**
+   * Get elapsed time in milliseconds
+   */
+  getElapsed(): number {
+    return Date.now() - this.startTime;
+  }
+
+  /**
+   * Get current token usage
+   */
+  getTokens(): TokenUsage {
+    return { ...this.tokens };
+  }
+}
+
+/**
+ * Create a shimmer spinner instance
+ */
+export function createShimmerSpinner(options?: ShimmerSpinnerOptions): ShimmerSpinner {
+  return new ShimmerSpinner(options);
+}