omni-agent-cli 2.0.0

package/src/ui.js

@@ -0,0 +1,320 @@
+import chalk from 'chalk';
+import gradient from 'gradient-string';
+import boxen from 'boxen';
+import ora from 'ora';
+
+// ─── Palette ──────────────────────────────────────────────────────────────────
+const C = {
+  primary:   chalk.hex('#00FFFF'),
+  secondary: chalk.hex('#FF00FF'),
+  accent:    chalk.hex('#FFFF00'),
+  success:   chalk.hex('#00FF88'),
+  error:     chalk.hex('#FF4466'),
+  warning:   chalk.hex('#FF8800'),
+  dim:       chalk.hex('#556677'),
+  dimBright: chalk.hex('#778899'),
+  white:     chalk.hex('#E8E8F0'),
+  tool:      chalk.hex('#88AAFF'),
+  user:      chalk.hex('#AAFFCC'),
+  ai:        chalk.hex('#CCAAFF'),
+  think:     chalk.hex('#AADDFF'),
+  lineNum:   chalk.hex('#555577'),
+  added:     chalk.hex('#00FF88'),
+  removed:   chalk.hex('#FF4466'),
+  code:      chalk.hex('#E8D5A3'),
+};
+
+const GRAD_BANNER = gradient(['#00FFFF', '#FF00FF', '#FFFF00']);
+const GRAD_RESULT = gradient(['#00FF88', '#00FFFF']);
+const GRAD_TOOL   = gradient(['#88AAFF', '#FF00FF']);
+const GRAD_STATS  = gradient(['#FFFF00', '#FF8800', '#FF4466']);
+const GRAD_THINK  = gradient(['#4488FF', '#00FFCC']);
+const GRAD_CONFIRM= gradient(['#FFAA00', '#FF6600']);
+
+// ─── Banner ────────────────────────────────────────────────────────────────────
+export async function displayBanner() {
+  console.clear();
+  const lines = [
+    ' ██████╗ ███╗   ███╗███╗  ██╗██╗      █████╗  ██████╗ ███████╗███╗  ██╗████████╗',
+    '██╔═══██╗████╗ ████║████╗ ██║██║     ██╔══██╗██╔════╝ ██╔════╝████╗ ██║╚══██╔══╝',
+    '██║   ██║██╔████╔██║██╔██╗██║██║     ███████║██║  ███╗█████╗  ██╔██╗██║   ██║   ',
+    '██║   ██║██║╚██╔╝██║██║╚████║██║     ██╔══██║██║   ██║██╔══╝  ██║╚████║   ██║   ',
+    '╚██████╔╝██║ ╚═╝ ██║██║ ╚███║███████╗██║  ██║╚██████╔╝███████╗██║ ╚███║   ██║   ',
+    ' ╚═════╝ ╚═╝     ╚═╝╚═╝  ╚══╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝  ╚══╝   ╚═╝  ',
+  ];
+  console.log('\n');
+  for (const line of lines) console.log('  ' + GRAD_BANNER(line));
+
+  const badges = [
+    chalk.bgHex('#00FFFF').black(' Claude '),
+    chalk.bgHex('#FF6600').black(' Qwen '),
+    chalk.bgHex('#00AA44').black(' Groq '),
+    chalk.bgHex('#0066FF').black(' Gemini '),
+    chalk.bgHex('#FF00AA').black(' DeepSeek '),
+    C.dim('+ любой'),
+  ];
+  console.log('\n  ' + badges.join(' '));
+  console.log(C.dim('\n  v3.0.0 · type /help for commands\n'));
+}
+
+// ─── Spinner ───────────────────────────────────────────────────────────────────
+export function createSpinner(text = 'Thinking…') {
+  return ora({
+    text: C.dim(text),
+    spinner: { interval: 80, frames: [C.primary('◐'), C.secondary('◓'), C.accent('◑'), C.primary('◒')] },
+    prefixText: ' ',
+  });
+}
+
+// ─── Thinking display (Qwen-style bullets) ─────────────────────────────────────
+export function displayThinking(bullets) {
+  console.log('');
+  for (const b of bullets) {
+    console.log('  ' + C.dim('•') + ' ' + C.think(b));
+  }
+}
+
+// ─── User message ──────────────────────────────────────────────────────────────
+export function displayUserMessage(content) {
+  console.log('\n' + C.dim('  ┌─') + C.user(' YOU'));
+  for (const line of content.split('\n')) {
+    console.log(C.dim('  │ ') + C.white(line));
+  }
+  console.log(C.dim('  └─'));
+}
+
+// ─── Assistant message ─────────────────────────────────────────────────────────
+export function displayMessage(role, content) {
+  if (!content?.trim()) return;
+  if (role === 'user') { displayUserMessage(content); return; }
+
+  console.log('\n' + C.ai('  ╔═ ') + GRAD_RESULT('◈ AGENT') + C.dim(' ' + '═'.repeat(44)));
+  const lines = content.split('\n');
+  let inCode = false;
+  let codeLang = '';
+
+  for (const line of lines) {
+    if (line.startsWith('```')) {
+      if (!inCode) {
+        inCode = true;
+        codeLang = line.slice(3).trim();
+        const ll = codeLang ? C.accent(` ${codeLang} `) : '';
+        console.log(C.dim('  ║ ') + chalk.bgHex('#1A1A2E').hex('#888888')('  ') + ll);
+      } else {
+        inCode = false;
+        console.log(C.dim('  ║ ') + chalk.hex('#334455')('─'.repeat(50)));
+      }
+      continue;
+    }
+    if (inCode) {
+      console.log(C.dim('  ║ ') + chalk.bgHex('#0D0D1A')(' ') + C.code(line));
+      continue;
+    }
+    if (line.startsWith('### ')) { console.log(C.dim('  ║\n  ║ ') + C.accent('▶ ') + chalk.bold.hex('#FFDD88')(line.slice(4))); continue; }
+    if (line.startsWith('## '))  { console.log(C.dim('  ║\n  ║ ') + C.secondary('◆ ') + chalk.bold.hex('#FF88FF')(line.slice(3))); continue; }
+    if (line.startsWith('# '))   { console.log(C.dim('  ║\n  ║ ') + C.primary('◈ ') + chalk.bold.hex('#00FFFF')(line.slice(2))); continue; }
+
+    let rendered = line
+      .replace(/\*\*(.+?)\*\*/g, (_, m) => chalk.bold.hex('#FFFAAA')(m))
+      .replace(/`(.+?)`/g, (_, m) => chalk.bgHex('#1A1A2E').hex('#88FFCC')(m));
+
+    if (/^[-*] /.test(line))    rendered = C.primary('  • ') + C.white(rendered.slice(2));
+    else if (/^\d+\. /.test(line)) rendered = C.accent('  ') + C.white(rendered);
+    else                           rendered = C.white(rendered);
+
+    console.log(C.dim('  ║ ') + rendered);
+  }
+  console.log(C.ai('  ╚' + '═'.repeat(52)));
+}
+
+// ─── Tool icons ────────────────────────────────────────────────────────────────
+const TOOL_ICONS = {
+  list_directory:  '📂', read_file:       '📖',
+  write_file:      '✍️ ', append_to_file:  '📝',
+  patch_file:      '🔧', delete_path:     '🗑️ ',
+  copy_path:       '📋', move_path:       '🚚',
+  create_directory:'📁', get_file_info:   '🔍',
+  find_files:      '🔎', search_in_files: '🕵️ ',
+  execute_command: '⚡',
+};
+
+const TOOL_LABELS = {
+  write_file:      'WriteFile',
+  patch_file:      'PatchFile',
+  append_to_file:  'AppendFile',
+  delete_path:     'DeletePath',
+  move_path:       'MovePath',
+  execute_command: 'RunCommand',
+  read_file:       'ReadFile',
+  list_directory:  'ListDir',
+  find_files:      'FindFiles',
+  search_in_files: 'SearchFiles',
+  create_directory:'MkDir',
+  copy_path:       'CopyFile',
+  get_file_info:   'FileInfo',
+};
+
+// ─── File preview box (Qwen Coder style) ──────────────────────────────────────
+export function displayFilePreview(toolName, input) {
+  const icon    = TOOL_ICONS[toolName] || '🔷';
+  const tlabel  = TOOL_LABELS[toolName] || toolName;
+  const target  = input.path || input.source || input.command || '';
+  const content = input.content || input.new_text || input.command || '';
+
+  // Header line: "? WriteFile  Writing to filename.js ←"
+  console.log('\n' + C.dim('  ?') + ' ' + GRAD_CONFIRM(tlabel) + ' ' + C.dim(getActionLabel(toolName, input)));
+
+  if (!content) return;
+
+  // Split into lines, show last N with line numbers
+  const allLines = content.split('\n');
+  const MAX_PREVIEW = 25;
+  const startLine = Math.max(0, allLines.length - MAX_PREVIEW);
+  const showLines = allLines.slice(startLine);
+
+  // Show "... N lines hidden ..." if truncated
+  if (startLine > 0) {
+    console.log(C.dim(`  ... ${startLine} lines hidden ...`));
+  }
+
+  // Code preview with line numbers
+  const boxLines = showLines.map((line, i) => {
+    const lineNo = String(startLine + i + 1).padStart(4);
+    return C.lineNum(lineNo) + C.dim('\t') + C.code(line.length > 100 ? line.slice(0, 100) + '…' : line);
+  });
+
+  for (const l of boxLines) console.log('  ' + l);
+}
+
+function getActionLabel(toolName, input) {
+  switch (toolName) {
+    case 'write_file':      return `Writing to ${input.path} ←`;
+    case 'patch_file':      return `Patching ${input.path} ←`;
+    case 'append_to_file':  return `Appending to ${input.path} ←`;
+    case 'delete_path':     return `Deleting ${input.path} ⚠`;
+    case 'move_path':       return `${input.source} → ${input.destination}`;
+    case 'execute_command': return `$ ${(input.command || '').slice(0, 60)}`;
+    default:                return input.path || '';
+  }
+}
+
+// ─── Confirmation prompt (Qwen Coder style) ────────────────────────────────────
+//  Returns: 'yes' | 'always' | 'skip' | 'modify'
+export async function displayConfirmPrompt(toolName) {
+  const isDestructive = toolName === 'delete_path';
+  const label = isDestructive
+    ? chalk.bold.red('  Apply this DESTRUCTIVE change?')
+    : chalk.bold.hex('#FFAA00')('  Apply this change?');
+
+  console.log('\n' + label + '\n');
+  console.log(C.success('  ● 1. Yes, allow once'));
+  console.log(C.dimBright('    2. Yes, allow always'));
+  console.log(C.dimBright('    3. No, skip this step'));
+  console.log(C.dimBright('    4. No, suggest changes'));
+  console.log('\n' + C.dim('  Press ctrl-s to show more lines'));
+}
+
+// ─── Tool call (non-confirm) display ──────────────────────────────────────────
+export function displayToolCall(toolName, input) {
+  const icon  = TOOL_ICONS[toolName] || '🔷';
+  const label = GRAD_TOOL(toolName);
+  console.log('\n' + C.dim('  ┌') + C.tool('─ TOOL ─ ') + icon + ' ' + label);
+  const entries = Object.entries(input).slice(0, 3);
+  for (const [k, v] of entries) {
+    const val = typeof v === 'string' ? v.slice(0, 80) + (v.length > 80 ? '…' : '') : JSON.stringify(v).slice(0, 80);
+    console.log(C.dim('  │ ') + C.dim(`${k}: `) + chalk.hex('#AACCFF')(val));
+  }
+  console.log(C.dim('  └' + '─'.repeat(50)));
+}
+
+export function displayToolResult(toolName, result, durationMs) {
+  const preview = (result || '').toString().split('\n').slice(0, 6).join('\n');
+  const hasMore = (result || '').toString().split('\n').length > 6;
+  console.log(C.dim('  ┌') + C.success('─ RESULT ') + C.dim(`${durationMs}ms`));
+  for (const line of preview.split('\n')) {
+    console.log(C.dim('  │ ') + chalk.hex('#88EEB8')(line.slice(0, 110)));
+  }
+  if (hasMore) console.log(C.dim('  │ ') + C.dim('  … (truncated)'));
+  console.log(C.dim('  └' + '─'.repeat(50)));
+}
+
+export function displayError(message) {
+  console.log('\n' + boxen(C.error('⚠  ' + message), {
+    padding: { left: 2, right: 2, top: 0, bottom: 0 },
+    borderStyle: 'round', borderColor: 'red',
+  }));
+}
+
+// ─── Session stats ─────────────────────────────────────────────────────────────
+export async function displayStats(stats) {
+  console.log('\n');
+  console.log(GRAD_STATS('  ╔═════════════════════════════════════════════════════╗'));
+  console.log(GRAD_STATS('  ║') + chalk.bold.white('         📊  SESSION STATISTICS                    ') + GRAD_STATS('║'));
+  console.log(GRAD_STATS('  ╠═════════════════════════════════════════════════════╣'));
+
+  const row = (label, value, color = C.white) => {
+    const l = C.dim(label.padEnd(26));
+    const v = color(String(value));
+    console.log(GRAD_STATS('  ║ ') + l + v + ' '.repeat(Math.max(0, 24 - String(value).length)) + GRAD_STATS(' ║'));
+  };
+
+  row('⏱  Duration',       stats.duration,          C.accent);
+  row('💬 Messages',        `${stats.messages.user} sent / ${stats.messages.assistant} got`, C.primary);
+  row('🌐 API Requests',    stats.apiRequests,        C.secondary);
+  row('🪙 Tokens In',       stats.tokens.input.toLocaleString(), C.success);
+  row('🪙 Tokens Out',      stats.tokens.output.toLocaleString(), C.success);
+  row('🪙 Total Tokens',    stats.totalTokens.toLocaleString(), chalk.bold.hex('#AAFFAA'));
+  row('⚡ Tools Called',    stats.totalToolCalls,    C.tool);
+  row('💰 Est. Cost',       `~$${stats.estimatedCost}`, C.warning);
+
+  if (stats.toolCallsList.length > 0) {
+    console.log(GRAD_STATS('  ╠─────────────────────────────────────────────────────╣'));
+    console.log(GRAD_STATS('  ║ ') + C.dim('Tool Usage:') + ' '.repeat(43) + GRAD_STATS(' ║'));
+    for (const [tool, count] of stats.toolCallsList.slice(0, 8)) {
+      const icon = TOOL_ICONS[tool] || '•';
+      const bar  = '█'.repeat(Math.min(count * 2, 15));
+      const label = `${icon} ${tool}`.padEnd(28);
+      console.log(GRAD_STATS('  ║ ') + C.dim(label) + C.primary(bar) + C.accent(` ${count}`) + ' '.repeat(Math.max(0, 16 - bar.length)) + GRAD_STATS(' ║'));
+    }
+  }
+
+  console.log(GRAD_STATS('  ╚═════════════════════════════════════════════════════╝'));
+  console.log('\n' + C.dim('  Thanks for using OmniAgent! ✨') + '\n');
+}
+
+// ─── Help ──────────────────────────────────────────────────────────────────────
+export function displayHelp() {
+  const help = boxen(
+    [
+      C.primary('COMMANDS'),
+      '',
+      `  ${C.accent('/help')}               ${C.dim('Show this help')}`,
+      `  ${C.accent('/clear')}              ${C.dim('Clear screen + reset history')}`,
+      `  ${C.accent('/stats')}              ${C.dim('Show session stats')}`,
+      `  ${C.accent('/cd <dir>')}           ${C.dim('Change working directory')}`,
+      `  ${C.accent('/model <name>')}       ${C.dim('Switch model on the fly')}`,
+      `  ${C.accent('/models')}             ${C.dim('Fetch live models (current provider)')}`,
+      `  ${C.accent('/models <provider>')}  ${C.dim('Fetch models for provider')}`,
+      `  ${C.accent('/providers')}          ${C.dim('List all providers')}`,
+      `  ${C.accent('/setup')}              ${C.dim('Reconfigure provider / API key')}`,
+      `  ${C.accent('/confirm on|off')}     ${C.dim('Toggle confirmation prompts')}`,
+      `  ${C.accent('/reset')}              ${C.dim('New conversation')}`,
+      `  ${C.accent('/exit')}               ${C.dim('Exit + show stats')}`,
+      '',
+      C.primary('CONFIRMATION (Qwen Coder style)'),
+      '',
+      `  ${C.dim('Before write/edit/delete/run — agent shows preview')}`,
+      `  ${C.success('1')} ${C.dim('Yes, once')}   ${C.success('2')} ${C.dim('Yes, always')}   ${C.warning('3')} ${C.dim('Skip')}   ${C.error('4')} ${C.dim('Suggest changes')}`,
+      '',
+      C.primary('AGENT TOOLS'),
+      '',
+      `  ${C.success('📂')} read/write/patch/move/copy/delete/mkdir`,
+      `  ${C.success('🔎')} find files by glob, grep in files`,
+      `  ${C.success('⚡')} execute any shell command`,
+    ].join('\n'),
+    { padding: 1, borderStyle: 'double', borderColor: 'cyan', title: '⟨ OMNI-AGENT v3 ⟩', titleAlignment: 'center' }
+  );
+  console.log('\n' + help + '\n');
+}
+
+export { C };