agentvibes 4.6.7 → 5.0.0

package/src/console/tabs/install-tab.js

@@ -1,1081 +0,0 @@
-/**
- * AgentVibes TUI Console — Install Tab (Installer Wizard)
- * Epic 12: Stories 12.1-12.5
- *
- * Implements the Tab Component Contract:
- *   createInstallTab(screen, services) → { box, show, hide, onFocus, onBlur, getFooterText, getFooterColor }
- *
- * 5-screen wizard flow:
- *   Screen 1: Welcome & Purpose
- *   Screen 2: Auto Dependency Check
- *   Screen 3: Provider Selection
- *   Screen 4: Voice Config & Intro Text
- *   Screen 5: Complete & TTS Greeting
- */
-
-import path from 'node:path';
-import { execFile } from 'node:child_process';
-import { promisify } from 'node:util';
-import fs from 'node:fs';
-import { promises as _fsP } from 'node:fs';
-import { buildAudioEnv } from '../audio-env.js';
-import { SUPPORTED_LANGUAGES, t } from '../../i18n/strings.js';
-import {
-  copyCommandFiles, copyHookFiles, copyPersonalityFiles,
-  copyPluginFiles, copyBmadConfigFiles, copyBackgroundMusicFiles,
-  copyConfigFiles, configureSessionStartHook,
-  installPluginManifest, checkAndInstallPiper, ensureGitRepo,
-} from '../../installer.js';
-
-const _execFileAsync = promisify(execFile);
-
-const IS_TEST = process.env.AGENTVIBES_TEST_MODE === 'true';
-
-let blessed;
-if (!IS_TEST) {
-  const { default: b } = await import('blessed');
-  blessed = b;
-}
-
-// ---------------------------------------------------------------------------
-
-const COLORS = {
-  contentBg:  '#0a0e1a',
-  sectionHdr: 'bright-cyan',  // Matches header "Agent" color
-  labelFg:    '#e3f2fd',
-  valueFg:    '#ffff00',  // Yellow
-  brandPink:  '#f06292',  // Light magenta — AgentVibes logotype
-  successFg:  '#69f0ae',  // Green — success
-  errorFg:    '#ef9a9a',  // Red — error/missing
-  btnDefault: '#283593',
-  btnFocus:   '#2e7d32',  // Green — focused/selected
-  btnFocusFg: '#ffffff',  // White text on green
-  btnPress:   '#ff00ff',
-  borderFg:   'bright-cyan',
-  footerBg:   '#5c6bc0',  // Lighter indigo — Install tab footer
-  noticeFg:   '#90a4ae',
-};
-
-const FOOTER_TEXT = '[Enter] Continue/Finish  [Esc] Back/Exit  [C] Open Console  [S/V/M/A/R] Tab  [Q] Quit';
-
-// ---------------------------------------------------------------------------
-// Exported pure helpers (stories 12.1, 12.5)
-
-/**
- * Returns the default intro text suggestion (project folder name).
- * @param {string} projectDir
- * @returns {string}
- */
-export function getIntroDefault(projectDir) {
-  if (!projectDir) return '';
-  return path.basename(projectDir);
-}
-
-/**
- * Format the TTS greeting message for Screen 5.
- * @param {string} introText - User's intro text (may be empty)
- * @param {string} projectName - Project folder name
- * @returns {string}
- */
-export function formatGreeting(introText, projectName) {
-  const name = introText || projectName || 'AgentVibes';
-  return `${name} is ready! Welcome to AgentVibes. Love AgentVibes? We'd really appreciate it if you could give us a star on GitHub.`;
-}
-
-// ---------------------------------------------------------------------------
-// Dependency detection helpers (story 12.2)
-
-/**
- * Check if a command exists on the system (async).
- * Only ENOENT means "not installed" — non-zero exit code still means the binary exists.
- * @param {string} cmd
- * @returns {Promise<boolean>}
- */
-async function _commandExistsAsync(cmd) {
-  try {
-    // On Windows, commands like 'npm' are .cmd batch files that require shell: true
-    const opts = { stdio: 'pipe', timeout: 5000 };
-    if (process.platform === 'win32') opts.shell = true;
-    await _execFileAsync(cmd, ['--version'], opts);
-    return true;
-  } catch (err) {
-    if (err.code === 'ENOENT') return false;
-    return true;  // binary exists but --version returned non-zero
-  }
-}
-
-/**
- * Run dependency checks asynchronously. Returns results map.
- * @returns {Promise<{ node: boolean, npm: boolean, piper: boolean, soprano: boolean }>}
- */
-async function _checkDependenciesAsync() {
-  const [node, npm, piperCmd, sopranoTts, sopranoWebui, ffmpeg] = await Promise.all([
-    _commandExistsAsync('node'),
-    _commandExistsAsync('npm'),
-    _commandExistsAsync('piper'),
-    _commandExistsAsync('soprano-tts'),
-    _commandExistsAsync('soprano-webui'),
-    _commandExistsAsync('ffmpeg'),
-  ]);
-
-  // On Windows, Piper is a standalone exe at %LOCALAPPDATA%\Programs\Piper\piper.exe
-  let piper = piperCmd;
-  if (!piper && process.platform === 'win32') {
-    const localAppData = process.env.LOCALAPPDATA ||
-      (process.env.USERPROFILE ? path.join(process.env.USERPROFILE, 'AppData', 'Local') : null);
-    if (localAppData) {
-      piper = fs.existsSync(path.join(localAppData, 'Programs', 'Piper', 'piper.exe'));
-    }
-  }
-
-  return { node, npm, piper, soprano: sopranoTts || sopranoWebui, ffmpeg };
-}
-
-// ---------------------------------------------------------------------------
-// Test stub
-
-function createTestStub() {
-  return {
-    box: {},
-    show: () => {},
-    hide: () => {},
-    onFocus: () => {},
-    onBlur: () => {},
-    getFooterText: () => t('en', 'footerText'),
-    getFooterColor: () => COLORS.footerBg,
-  };
-}
-
-// ---------------------------------------------------------------------------
-
-/**
- * Create the Install tab component.
- *
- * @param {object} screen   - Blessed screen instance (or test stub)
- * @param {object} services
- * @param {import('../../services/config-service.js').ConfigService}   services.configService
- * @returns {{ box, show, hide, onFocus, onBlur, getFooterText, getFooterColor }}
- */
-export function createInstallTab(screen, services) {
-  if (IS_TEST) return createTestStub();
-
-  const { configService, providerService, navigationService, focusMainTabBar, languageService } = services;
-
-  // -------------------------------------------------------------------------
-  // Container
-
-  const box = blessed.box({
-    parent: screen,
-    top: 5,
-    left: 0,
-    width: '100%',
-    bottom: 2,
-    hidden: true,
-    style: { fg: COLORS.labelFg, bg: COLORS.contentBg },
-    border: { type: 'line' },
-    borderStyle: { fg: COLORS.borderFg },
-  });
-
-  // -------------------------------------------------------------------------
-  // Wizard state
-
-  let _screen = 0;
-  let _lastScreen = -1;
-  // _lang is now owned by languageService; keep a local helper for convenience
-  // and a local _langIdx for the language-picker UI (Screen 0).
-  const _getLang = () => languageService?.getLang() ?? 'en';
-  const _tl = (key) => languageService?.t(key) ?? t('en', key);
-  let _langIdx = 0;
-  let _deps = null;
-  let _checking = false;
-  let _selectedProvider = null;
-  let _introText = getIntroDefault(process.cwd());
-  let _screen5Announced    = false;  // TTS greeting fires once per wizard run
-  let _completionModalOpen = false;
-  let _completionModalBox  = null;
-
-  // Install state (populated during screen 5)
-  let _installLog      = [];   // array of blessed-tagged strings
-  let _installRunning  = false;
-  let _installComplete = false;
-  let _installError    = null;
-  let _lastSpinnerIdx  = -1;   // index of last ⟳ entry, replaced by ✓ on succeed
-
-  // -------------------------------------------------------------------------
-  // Content area — single persistent box, never detached.
-  //
-  // KEY INSIGHT: detach+recreate fails because the new widget has no previous
-  // cell state, so blessed's diff renderer doesn't know which cells to clear.
-  // Keeping the SAME element and calling setContent('') lets blessed diff
-  // old-content → empty and write spaces over every character that was there.
-
-  const contentBox = blessed.box({
-    parent: box,
-    top: 1,
-    left: 2,
-    width: '96%',
-    bottom: 5,
-    tags: true,
-    wrap: false,
-    scrollable: false,
-    style: { fg: COLORS.labelFg, bg: COLORS.contentBg },
-  });
-
-  // Footer hint
-  const hintLine = blessed.text({
-    parent: box,
-    bottom: 2,
-    left: 2,
-    right: 2,   // explicit right bound — prevents blessed auto-shrink which leaves stale chars
-    tags: true,
-    content: '',
-    style: { fg: COLORS.noticeFg, bg: COLORS.contentBg },
-  });
-
-  function _c(lines) { return lines.join('\n'); }
-
-  // -------------------------------------------------------------------------
-  // Screen 4 action button callbacks
-
-  function _doEdit() {
-    if (box.hidden || _screen !== 4) return;
-    const prompt = blessed.prompt({
-      parent: screen,
-      top: 'center',
-      left: 'center',
-      height: 'shrink',
-      width: '60%',
-      border: 'line',
-      tags: true,
-      style: {
-        fg: COLORS.labelFg,
-        bg: COLORS.contentBg,
-        border: { fg: COLORS.sectionHdr },
-        label: { fg: COLORS.sectionHdr },
-      },
-    });
-    prompt.input('Intro text (prefix spoken before every TTS message):', _introText, (err, val) => {
-      prompt.destroy();
-      if (!err && val !== null) {
-        _introText = val.trim();
-        _renderScreen4();
-      }
-      screen.render();
-    });
-    screen.render();
-  }
-
-  // -------------------------------------------------------------------------
-  // TUI spinner adapter — captures copy-function progress into _installLog
-
-  function _makeSpinner() {
-    return {
-      start(msg) {
-        _installLog.push(`{${COLORS.noticeFg}-fg}  ⟳  ${msg}{/${COLORS.noticeFg}-fg}`);
-        _lastSpinnerIdx = _installLog.length - 1;
-        _renderScreen5();
-      },
-      succeed(msg) {
-        const line = `{${COLORS.successFg}-fg}  ✓  ${msg || ''}{/${COLORS.successFg}-fg}`;
-        if (_lastSpinnerIdx >= 0) {
-          _installLog[_lastSpinnerIdx] = line;
-        } else {
-          _installLog.push(line);
-        }
-        _lastSpinnerIdx = -1;
-        _renderScreen5();
-      },
-      info(msg) {
-        _installLog.push(`{${COLORS.noticeFg}-fg}  ℹ  ${msg}{/${COLORS.noticeFg}-fg}`);
-        _renderScreen5();
-      },
-      warn(msg) {
-        _installLog.push(`{#ffcc00-fg}  ⚠  ${msg}{/#ffcc00-fg}`);
-        _renderScreen5();
-      },
-      stop() {},
-    };
-  }
-
-  // -------------------------------------------------------------------------
-  // Write AgentVibes config files into targetDir/.claude/
-
-  async function _writeInstallConfig(targetDir, provider) {
-    const claudeDir = path.join(targetDir, '.claude');
-    const configDir = path.join(claudeDir, 'config');
-    await _fsP.mkdir(configDir, { recursive: true });
-
-    const defaultVoices = {
-      piper:           'en_US-ryan-high',
-      macos:           'Samantha',
-      soprano:         'soprano-default',
-      sapi:            'Microsoft David Desktop',
-    };
-    // Use voice from Settings if configured, otherwise fall back to provider default
-    const configuredVoice = configService?.getConfig?.()?.voice;
-    const voice = configuredVoice ?? (defaultVoices[provider] ?? 'en_US-ryan-high');
-
-    await _fsP.writeFile(path.join(claudeDir, 'tts-provider.txt'), provider);
-    await _fsP.writeFile(path.join(claudeDir, 'tts-voice.txt'), voice);
-    await _fsP.writeFile(path.join(claudeDir, 'tts-verbosity.txt'), 'medium');
-
-    const pretext = _introText?.trim() ?? '';
-    if (pretext) {
-      await _fsP.writeFile(path.join(configDir, 'tts-pretext.txt'), pretext, { mode: 0o600 });
-    } else {
-      try { await _fsP.unlink(path.join(configDir, 'tts-pretext.txt')); } catch { /* ok */ }
-    }
-
-    // Apply background music settings from Settings tab.
-    // play-tts-piper.sh reads background-music-enabled.txt (not background-music.txt),
-    // so we must write that file explicitly when music is enabled.
-    const bgMusic = configService?.getConfig?.()?.backgroundMusic;
-    if (bgMusic?.enabled) {
-      await _fsP.writeFile(path.join(configDir, 'background-music-enabled.txt'), 'true');
-      // Update the track in audio-effects.cfg (copied from package defaults a moment ago).
-      // Only apply if the track name is a safe filename (no pipe characters or path separators).
-      const track = bgMusic.track;
-      if (track && !/[|/\\]/.test(track)) {
-        try {
-          const audioEffectsPath = path.join(configDir, 'audio-effects.cfg');
-          let content = await _fsP.readFile(audioEffectsPath, 'utf-8');
-          content = content.replace(
-            /^default\|([^|]*)\|([^|]*)\|(.*)$/m,
-            `default|$1|${track}|$3`,
-          );
-          await _fsP.writeFile(audioEffectsPath, content);
-        } catch { /* audio-effects.cfg not yet present — non-fatal */ }
-      }
-    }
-  }
-
-  // -------------------------------------------------------------------------
-  // Full installation sequence (runs on screen 5)
-
-  async function _runInstall() {
-    _installLog      = [];
-    _installRunning  = true;
-    _installComplete = false;
-    _installError    = null;
-    _lastSpinnerIdx  = -1;
-
-    const targetDir = process.cwd();
-    const provider  = _selectedProvider ?? 'piper';
-    const spinner   = _makeSpinner();
-
-    // Suppress console output from installer.js copy functions — they use
-    // chalk+console.log which would corrupt the blessed display.
-    const _origLog  = console.log;
-    const _origWarn = console.warn;
-    const _origErr  = console.error;
-    console.log  = () => {};
-    console.warn = () => {};
-    console.error = () => {};
-
-    try {
-      // Create directory structure
-      spinner.start('Preparing .claude directory...');
-      await _fsP.mkdir(path.join(targetDir, '.claude', 'commands'), { recursive: true });
-      await _fsP.mkdir(path.join(targetDir, '.claude', 'hooks'),    { recursive: true });
-      await _fsP.mkdir(path.join(targetDir, '.claude', 'audio', 'tracks'), { recursive: true });
-      spinner.succeed('Directory structure ready');
-
-      await copyCommandFiles(targetDir, spinner);
-      await copyHookFiles(targetDir, spinner);
-      await copyPersonalityFiles(targetDir, spinner);
-      await copyPluginFiles(targetDir, spinner);
-      await copyBmadConfigFiles(targetDir, spinner);
-      await copyBackgroundMusicFiles(targetDir, spinner);
-      await copyConfigFiles(targetDir, spinner);
-      await configureSessionStartHook(targetDir, spinner);
-      await installPluginManifest(targetDir, spinner);
-      await ensureGitRepo(targetDir, spinner);
-
-      spinner.start('Writing configuration...');
-      await _writeInstallConfig(targetDir, provider);
-      spinner.succeed('Configuration saved');
-
-      // Create .mcp.json if it doesn't already exist
-      const mcpConfigPath = path.join(targetDir, '.mcp.json');
-      let _mcpCreated = false;
-      try {
-        await _fsP.access(mcpConfigPath);
-        // Already exists — skip to avoid overwriting user's config
-      } catch {
-        const mcpConfig = {
-          mcpServers: {
-            agentvibes: {
-              command: 'npx',
-              args: ['-y', '--package=agentvibes', 'agentvibes-mcp-server'],
-            },
-          },
-        };
-        spinner.start('Creating .mcp.json...');
-        await _fsP.writeFile(mcpConfigPath, JSON.stringify(mcpConfig, null, 2) + '\n');
-        spinner.succeed('.mcp.json created');
-        _mcpCreated = true;
-      }
-
-      if (provider === 'piper') {
-        spinner.start('Checking Piper TTS voices...');
-        await checkAndInstallPiper(targetDir, { yes: true, silent: true });
-        spinner.succeed('Piper TTS ready');
-      }
-
-      _installComplete = true;
-      _installRunning  = false;
-      _installLog.push('');
-      _installLog.push(`{${COLORS.successFg}-fg}  ✅  AgentVibes installed successfully!{/${COLORS.successFg}-fg}`);
-      if (_mcpCreated) {
-        _installLog.push(`{${COLORS.successFg}-fg}  📡  .mcp.json created — run: claude --mcp-config .mcp.json{/${COLORS.successFg}-fg}`);
-      }
-      _installLog.push(`{${COLORS.noticeFg}-fg}  ⭐ Star us on GitHub: github.com/preibisch/agentvibes{/${COLORS.noticeFg}-fg}`);
-
-    } catch (err) {
-      _installRunning = false;
-      _installError   = err.message;
-      _installLog.push(`{${COLORS.errorFg}-fg}  ✗  Installation failed: ${err.message}{/${COLORS.errorFg}-fg}`);
-    } finally {
-      console.log  = _origLog;
-      console.warn = _origWarn;
-      console.error = _origErr;
-    }
-
-    _renderScreen5();
-
-    // Show buttons now that install is done (success or error)
-    _s5QuitBtn.show();
-    _s5CustomizeBtn.show();
-    _s5QuitBtn.focus();
-    screen.render();
-
-    // Play TTS greeting on success
-    if (_installComplete && !_screen5Announced) {
-      _screen5Announced = true;
-      const greeting = formatGreeting(_introText, getIntroDefault(process.cwd()));
-      const ttsScript = path.resolve(targetDir, '.claude/hooks/play-tts.sh');
-      execFile('bash', [ttsScript, greeting], {
-        env: buildAudioEnv(),
-        timeout: 30000,
-      }, () => {});
-    }
-  }
-
-  function _doAccept() {
-    if (_screen !== 4 || _installRunning) return;
-    _screen++;
-    _showCurrentScreen();
-    // Start install after screen transition renders (50ms delay in _showCurrentScreen)
-    setTimeout(() => _runInstall().catch(() => {}), 100);
-  }
-
-  // -------------------------------------------------------------------------
-  // Screen 4 action buttons — real blessed widgets for keyboard focus + ←/→ nav
-
-  function _createInstallBtn(label, bg, onClick, textColor = '#ffffff') {
-    const btn = blessed.button({
-      parent: box,
-      content: label,
-      mouse: true,
-      keys: true,
-      shrink: true,
-      hidden: true,
-      padding: { left: 1, right: 1 },
-      style: {
-        bg,
-        fg: textColor,
-        focus: { bg: COLORS.btnFocus, fg: COLORS.btnFocusFg, bold: true },
-      },
-    });
-
-    // Focus indicator: ►label◄ with blinking █ — matches settings-tab standard
-    let _blinkInterval = null;
-    btn.on('focus', () => {
-      btn.style.bg = COLORS.btnFocus;
-      btn.style.fg = COLORS.btnFocusFg;
-      const raw = btn.content.replace(/[►◄█]/g, '').trim();
-      btn.setContent(`►${raw}◄ █`);
-      let _on = true;
-      screen.render();
-      _blinkInterval = setInterval(() => {
-        _on = !_on;
-        if (!btn.content.includes('►')) return;
-        const r = btn.content.replace(/[►◄█]/g, '').trim();
-        btn.setContent(_on ? `►${r}◄ █` : `►${r}◄`);
-        screen.render();
-      }, 500);
-    });
-    btn.on('blur', () => {
-      if (_blinkInterval) { clearInterval(_blinkInterval); _blinkInterval = null; }
-      btn.style.bg = bg;
-      btn.style.fg = textColor;
-      const raw = btn.content.replace(/[►◄█]/g, '').trim();
-      btn.setContent(raw);
-      screen.render();
-    });
-
-    // Press: magenta flash then invoke onClick
-    // Guard: don't fire onClick when the completion modal is open — Enter should dismiss it.
-    btn.key(['enter', 'space'], () => {
-      if (_completionModalOpen) return;
-      btn.style.bg = COLORS.btnPress;
-      btn.style.fg = 'white';
-      screen.render();
-      setTimeout(() => {
-        btn.style.bg = bg;
-        btn.style.fg = textColor;
-        screen.render();
-        onClick();
-      }, 150);
-    });
-    btn.on('click', () => btn.press());
-    return btn;
-  }
-
-  const _editBtn   = _createInstallBtn(_tl('editInstallBtn'),  '#1565c0', _doEdit);
-  const _acceptBtn = _createInstallBtn(_tl('acceptInstallBtn'), COLORS.btnDefault, _doAccept);
-
-  // Edit sits inline with the intro text row; Accept & Install is below
-  _editBtn.top   = 8;  _editBtn.left   = 36;
-  _acceptBtn.top = 13; _acceptBtn.left = 4;
-
-  // ↓/↑ navigate between Edit and Accept & Install
-  // Note: Tab is NOT used here — 'tab' is registered globally by navigation.js (cycles tabs)
-  _editBtn.key(['down', 'right'],  () => { _acceptBtn.focus(); screen.render(); });
-  _acceptBtn.key(['up', 'left'],   () => { _editBtn.focus();   screen.render(); });
-
-  // -------------------------------------------------------------------------
-  // Screen 1 buttons — Begin (cyan) and Exit (grey)
-
-  const _s1BeginBtn = _createInstallBtn(_tl('beginBtn'), '#00838f', () => {
-    _screen++;
-    _showCurrentScreen();
-  });
-  const _s1ExitBtn = _createInstallBtn(_tl('exitBtn'), '#546e7a', () => {
-    box.hide();
-    screen.render();
-    if (typeof focusMainTabBar === 'function') focusMainTabBar();
-  });
-
-  _s1BeginBtn.top = 5; _s1BeginBtn.left = 4;
-  _s1ExitBtn.top  = 5; _s1ExitBtn.left  = 20;
-
-  // ←/→ horizontal and ↑/↓ vertical — both navigate between the two buttons
-  _s1BeginBtn.key(['right', 'down'],  () => { _s1ExitBtn.focus();   screen.render(); });
-  _s1ExitBtn.key(['right', 'down'],   () => { _s1BeginBtn.focus();  screen.render(); });
-  _s1ExitBtn.key(['left', 'up', 'S-tab'],   () => { _s1BeginBtn.focus();  screen.render(); });
-  _s1BeginBtn.key(['left', 'up', 'S-tab'],  () => { _s1ExitBtn.focus();   screen.render(); });
-
-  // -------------------------------------------------------------------------
-  // Screen 2 button — Continue (shown after deps check passes)
-
-  const _s2ContinueBtn = _createInstallBtn(_tl('continueArrowBtn'), '#1565c0', () => {
-    _screen++;
-    _showCurrentScreen();
-  });
-  _s2ContinueBtn.top  = 12; _s2ContinueBtn.left = 4;
-  // → also advances without the flash delay
-  _s2ContinueBtn.key(['right'], () => { _screen++; _showCurrentScreen(); });
-
-  // Screen 3: no Continue button — Enter/→ on the list confirms selection and advances
-
-  // -------------------------------------------------------------------------
-  // Screen 5 buttons — Customize More (left) + Done - Quit (right, default focused)
-  // Layout: [  Customize More  ]   [  Done - Quit  ]
-  // Button width = label + 2 padding chars; gap between buttons = 3 chars
-
-  const _s5CustomizeBtn = _createInstallBtn(_tl('doneCustomizeBtn'), '#1565c0', () => {
-    _dismissCompletionModal();
-  });
-  _s5CustomizeBtn.bottom = 3; _s5CustomizeBtn.left = 4;
-
-  const _s5QuitBtn = _createInstallBtn(_tl('doneQuitBtn'), '#b71c1c', () => {
-    screen.destroy();
-    process.exit(0);
-  });
-  // left = start(4) + customizeLabel + 2 padding + 3 gap
-  _s5QuitBtn.bottom = 3; _s5QuitBtn.left = 4 + _tl('doneCustomizeBtn').length + 2 + 3;
-
-  // Arrow/Tab navigation between the two buttons
-  _s5CustomizeBtn.key(['tab', 'right'], () => { _s5QuitBtn.focus(); screen.render(); });
-  _s5QuitBtn.key(['tab', 'left', 'S-tab'], () => { _s5CustomizeBtn.focus(); screen.render(); });
-
-  // -------------------------------------------------------------------------
-  // Screen renderers
-
-  const _HDR = (emoji, label) =>
-    `{${COLORS.sectionHdr}-fg}${emoji}  ${label} ${'─'.repeat(100)}{/${COLORS.sectionHdr}-fg}`;
-
-  function _renderScreen0() {
-    const lines = [
-      _HDR('🌐', 'Language / Idioma / Langue / Sprache / 言語 / भाषा / 语言 / 언어'),
-      '',
-      '  Select your language:',
-      '',
-      ...SUPPORTED_LANGUAGES.map((l, i) =>
-        i === _langIdx
-          ? `  {green-fg}► ${l.name}{/green-fg}`
-          : `    ${l.name}`
-      ),
-    ];
-    contentBox.setContent(_c(lines));
-    hintLine.setContent('  Screen 0: Language  |  [↑/↓] Select  |  [Enter] Apply & Continue  |  [→] Skip (English)');
-    screen.render();
-  }
-
-  function _renderScreen1() {
-    // Update button labels to current language before focus triggers the decorator
-    _s1BeginBtn.setContent(t(_getLang(), 'beginBtn'));
-    _s1ExitBtn.setContent(t(_getLang(), 'exitBtn'));
-    contentBox.setContent(_c([
-      _HDR('🔧', t(_getLang(), 'setupWizard')),
-      '',
-      `  {${COLORS.noticeFg}-fg}${t(_getLang(), 'setupWizardSubtitle')}{/${COLORS.noticeFg}-fg}`,
-      '',
-      '',  // ← [▶ Begin] [✗ Exit] buttons here (box row 5)
-    ]));
-    hintLine.setContent(`  ${t(_getLang(), 'screen1Hint')}`);
-    _s1BeginBtn.focus();
-    screen.render();
-  }
-
-  async function _renderScreen2() {
-    const frames = ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏'];
-    let frameIdx = 0;
-    _checking = true;
-    _s2ContinueBtn.hide();  // hidden during spinner
-
-    contentBox.setContent(_c([
-      _HDR('🔍', t(_getLang(), 'dependencyCheck')),
-      '',
-      `  {${COLORS.noticeFg}-fg}${frames[0]}  ${t(_getLang(), 'checkingDependencies')}{/${COLORS.noticeFg}-fg}`,
-    ]));
-    hintLine.setContent(`  ${t(_getLang(), 'screen2Hint')}`);
-    screen.render();
-
-    const spinInterval = setInterval(() => {
-      frameIdx = (frameIdx + 1) % frames.length;
-      contentBox.setContent(_c([
-        _HDR('🔍', t(_getLang(), 'dependencyCheck')),
-        '',
-        `  {${COLORS.noticeFg}-fg}${frames[frameIdx]}  ${t(_getLang(), 'checkingDependencies')}{/${COLORS.noticeFg}-fg}`,
-      ]));
-      screen.render();
-    }, 100);
-
-    try {
-      _deps = await _checkDependenciesAsync();
-    } finally {
-      clearInterval(spinInterval);
-      _checking = false;
-    }
-
-    const ok  = () => `{${COLORS.successFg}-fg}✅  ${t(_getLang(), 'installed')}{/${COLORS.successFg}-fg}`;
-    const bad = () => `{${COLORS.errorFg}-fg}❌  ${t(_getLang(), 'notFound')}{/${COLORS.errorFg}-fg}`;
-
-    const ttsOk = _deps.piper || _deps.soprano;
-    contentBox.setContent(_c([
-      _HDR('🔍', t(_getLang(), 'dependencyCheck')),
-      '',
-      `  {${COLORS.noticeFg}-fg}${t(_getLang(), 'depColumn').padEnd(14)}${t(_getLang(), 'statusColumn')}{/${COLORS.noticeFg}-fg}`,
-      `  {${COLORS.noticeFg}-fg}${'─'.repeat(78)}{/${COLORS.noticeFg}-fg}`,
-      `  {${COLORS.labelFg}-fg}${'Node.js'.padEnd(14)}{/${COLORS.labelFg}-fg}${_deps.node    ? ok() : bad()}`,
-      `  {${COLORS.labelFg}-fg}${'npm'.padEnd(14)}{/${COLORS.labelFg}-fg}${_deps.npm     ? ok() : bad()}`,
-      `  {${COLORS.labelFg}-fg}${'Piper TTS'.padEnd(14)}{/${COLORS.labelFg}-fg}${_deps.piper   ? ok() : bad()}`,
-      `  {${COLORS.labelFg}-fg}${'Soprano TTS'.padEnd(14)}{/${COLORS.labelFg}-fg}${_deps.soprano ? ok() : bad()}`,
-      `  {${COLORS.labelFg}-fg}${'ffmpeg'.padEnd(14)}{/${COLORS.labelFg}-fg}${_deps.ffmpeg  ? ok() : `{${COLORS.errorFg}-fg}⚠  ${t(_getLang(), 'ffmpegMissing')}{/${COLORS.errorFg}-fg}`}`,
-      '',
-      ttsOk
-        ? `  {${COLORS.successFg}-fg}✅  ${t(_getLang(), 'ttsDetected')}{/${COLORS.successFg}-fg}`
-        : `  {${COLORS.errorFg}-fg}⚠   ${t(_getLang(), 'noTtsFound')}{/${COLORS.errorFg}-fg}`,
-      '',  // blank separator
-      '',  // ← [Continue →] button here (box row 12) when TTS detected
-    ]));
-    if (ttsOk) {
-      _s2ContinueBtn.setContent(_tl('continueArrowBtn'));
-      _s2ContinueBtn.show();
-      _s2ContinueBtn.focus();
-    }
-    screen.render();
-  }
-
-  function _renderScreen3() {
-    const providers = [];
-    if (_deps?.piper)   providers.push('piper');
-    if (_deps?.soprano) providers.push('soprano');
-
-    if (providers.length === 0) providers.push('piper');  // fallback
-    if (!_selectedProvider) _selectedProvider = providers[0];
-
-    // Pad items to 96 visible chars so they fully overwrite any stale cells from Screen 2.
-    // Selected row uses cyan bg + black text (matches button focus standard).
-    const items = providers.map(p =>
-      p === _selectedProvider
-        ? `{#00e5ff-bg}{#000000-fg}{bold} ● ${p.padEnd(92)}{/bold}{/#000000-fg}{/#00e5ff-bg}`
-        : `{${COLORS.labelFg}-fg}   ${p.padEnd(93)}{/${COLORS.labelFg}-fg}`
-    );
-
-    // Pad item list to 3 entries so the Continue button sits at a fixed row
-    // and all stale lines from Screen 2 (which has ~10 lines) are overwritten.
-    const paddedItems = [...items];
-    while (paddedItems.length < 3) paddedItems.push(`   ${''.padEnd(93)}`);
-
-    // Append trailing blank rows (space-padded) so blessed rewrites every cell that
-    // screen 2 used. Two screen.render() calls in the same tick are batched, so the
-    // intermediate "clear" render never fires — trailing spaces here fix that in one pass.
-    const _blank = ' '.repeat(120);
-    const _trail = Array(12).fill(_blank);
-    contentBox.setContent(_c([
-      _HDR('🎤', t(_getLang(), 'providerSelection')),
-      '',
-      `  {${COLORS.noticeFg}-fg}${t(_getLang(), 'availableProviders').padEnd(94)}{/${COLORS.noticeFg}-fg}`,
-      '',
-      ...paddedItems.map(i => `  ${i}`),
-      ..._trail,
-    ]));
-    hintLine.setContent(`  ${t(_getLang(), 'screen3Hint')}`);
-    box.focus();
-    screen.render();
-  }
-
-  function _renderScreen4() {
-    const provider = _selectedProvider ?? 'piper';
-    const intro = _introText || '';
-    const folderName = getIntroDefault(process.cwd()) || 'AgentVibes';
-    const example = `${folderName}: Here`;
-    const voiceId = providerService?.getActiveVoiceId?.() ?? 'en_US-amy-medium';
-
-    contentBox.setContent(_c([
-      _HDR('🎤', t(_getLang(), 'providerAndVoice')),
-      '',
-      `  {${COLORS.labelFg}-fg}${`${t(_getLang(), 'providerLabel')}:`.padEnd(14)}{/${COLORS.labelFg}-fg}{${COLORS.valueFg}-fg}${provider}{/${COLORS.valueFg}-fg}`,
-      `  {${COLORS.labelFg}-fg}${`${t(_getLang(), 'voiceLabel')}:`.padEnd(14)}{/${COLORS.labelFg}-fg}{${COLORS.valueFg}-fg}${voiceId}{/${COLORS.valueFg}-fg}  {${COLORS.noticeFg}-fg}${t(_getLang(), 'voiceChangeHint')}{/${COLORS.noticeFg}-fg}`,
-      '',
-      _HDR('✍️', t(_getLang(), 'introText')),
-      '',
-      `  {${COLORS.labelFg}-fg}${`${t(_getLang(), 'introTextLabel')}:`.padEnd(14)}{/${COLORS.labelFg}-fg}{${COLORS.valueFg}-fg}${intro || `(${t(_getLang(), 'none')})`}{/${COLORS.valueFg}-fg}`,
-      // ↑ [Edit] button rendered inline at box row 8, left=36
-      '',
-      `  {${COLORS.noticeFg}-fg}${t(_getLang(), 'example')}:{/${COLORS.noticeFg}-fg}  {${COLORS.valueFg}-fg}"${example}"{/${COLORS.valueFg}-fg}`,
-      '',
-      '',
-      '',  // ← [✓ Accept & Install] button rendered as real widget here (box row 13)
-    ]));
-    hintLine.setContent(`  ${t(_getLang(), 'screen4Hint')}`);
-    _editBtn.setContent(_tl('editInstallBtn'));
-    _acceptBtn.setContent(_tl('acceptInstallBtn'));
-    _acceptBtn.focus();
-    screen.render();
-  }
-
-  function _renderScreen5() {
-    const header = _installError
-      ? _HDR('❌', t(_getLang(), 'installationFailed'))
-      : _installComplete
-        ? _HDR('✅', t(_getLang(), 'installComplete'))
-        : _HDR('⚙️', t(_getLang(), 'installing'));
-
-    const hint = (_installComplete || _installError)
-      ? `  ${t(_getLang(), 'screen5HintDone')}`
-      : `  ${t(_getLang(), 'screen5HintWait')}`;
-
-    // Show last 18 log lines so content fits in the box
-    const MAX_LINES = 18;
-    const visibleLog = _installLog.length > MAX_LINES
-      ? _installLog.slice(-MAX_LINES)
-      : _installLog;
-
-    contentBox.setContent(_c([
-      header,
-      '',
-      ...visibleLog,
-    ]));
-    hintLine.setContent(hint);
-    screen.render();
-  }
-
-  function _showInstallNotice(message) {
-    const width = Math.max(28, message.length + 6);
-    const notice = blessed.box({
-      parent: screen,
-      top: 'center',
-      left: 'center',
-      width,
-      height: 3,
-      border: { type: 'line' },
-      tags: true,
-      content: `{center}${message}{/center}`,
-      style: {
-        fg: '#e3f2fd',
-        bg: COLORS.contentBg,
-        border: { fg: 'bright-cyan' },
-      },
-    });
-    screen.render();
-    setTimeout(() => { try { notice.destroy(); screen.render(); } catch {} }, 2500);
-  }
-
-  function _dismissCompletionModal() {
-    if (_completionModalBox) {
-      _completionModalBox.destroy();
-      _completionModalBox = null;
-    }
-    _completionModalOpen = false;
-    _screen = 0;
-    box.hide();
-    _showInstallNotice('Installation Complete — Settings Saved');
-    screen.render();
-    navigationService?.switchTab('settings');
-  }
-
-  function _showCurrentScreen() {
-    // Show Screen 1 buttons only on screen 1
-    if (_screen === 1) {
-      _s1BeginBtn.show(); _s1ExitBtn.show();
-    } else {
-      _s1BeginBtn.hide(); _s1ExitBtn.hide();
-    }
-
-    // Screen 0 has no button widgets — nav is handled via key handlers
-
-    // Screen 2 continue button: hidden on other screens; _renderScreen2 manages show/focus
-    if (_screen !== 2) _s2ContinueBtn.hide();
-
-    // Screen 5 buttons: hidden during active install, shown by _runInstall() on completion
-    if (_screen === 5 && (_installComplete || _installError)) {
-      _s5QuitBtn.show();
-      _s5CustomizeBtn.show();
-    } else {
-      _s5QuitBtn.hide();
-      _s5CustomizeBtn.hide();
-    }
-
-    // Show Screen 4 action buttons only on screen 4
-    if (_screen === 4) {
-      _editBtn.show(); _acceptBtn.show();
-    } else {
-      _editBtn.hide(); _acceptBtn.hide();
-    }
-
-    if (_screen !== _lastScreen) {
-      // Nuclear clear: force-invalidate every olines cell so blessed's diff renderer
-      // actually writes blanks to the terminal (blessed skips cells it thinks are
-      // unchanged — setting attr=-1 is impossible for any real cell so draw() is
-      // forced to physically rewrite every character).
-      try {
-        for (let r = 0; r < screen.height; r++) {
-          const orow = screen.olines?.[r];
-          if (!orow) continue;
-          for (let c = 0; c < screen.width; c++) {
-            if (orow[c]) orow[c][0] = -1;
-          }
-        }
-        // Row 2 (header bottom) never becomes dirty on its own — force it so
-        // draw() writes headerBg+spaces and overwrites any ghost terminal content.
-        if (screen.lines?.[2]) screen.lines[2].dirty = true;
-      } catch {}
-
-      const _clearLine = ' '.repeat(150);
-      const _clearPage = Array(25).fill(_clearLine).join('\n');
-      contentBox.setContent(_clearPage);
-      hintLine.setContent(_clearLine);
-      screen.render();
-
-      const targetScreen = _screen;
-      _lastScreen = _screen;
-      // 50 ms delay: enough for the terminal to display the blank frame before
-      // the new screen content overwrites it. setTimeout(0) is too fast —
-      // both renders land in the same display frame.
-      setTimeout(() => {
-        if (_screen !== targetScreen) return;
-        switch (_screen) {
-          case 0: _renderScreen0(); break;
-          case 1: _renderScreen1(); break;
-          case 2: _renderScreen2(); break;
-          case 3: _renderScreen3(); break;
-          case 4: _renderScreen4(); break;
-          case 5: _renderScreen5(); break;
-        }
-      }, 50);
-      return;
-    }
-    switch (_screen) {
-      case 0: _renderScreen0(); break;
-      case 1: _renderScreen1(); break;
-      case 2: _renderScreen2(); break;
-      case 3: _renderScreen3(); break;
-      case 4: _renderScreen4(); break;
-      case 5: _renderScreen5(); break;
-    }
-  }
-
-  // -------------------------------------------------------------------------
-  // Navigation
-
-  // Use screen.key() instead of box.key() so handlers fire regardless of which
-  // blessed element currently holds focus.  Guard with `box.hidden` so they are
-  // no-ops when another tab is active.
-
-  screen.key(['enter'], () => {
-    if (box.hidden || _checking) return;
-    if (_completionModalOpen) { _dismissCompletionModal(); return; }  // always first
-    if (_screen === 0) {  // Screen 0: apply selected language and advance
-      if (languageService) languageService.setLang(SUPPORTED_LANGUAGES[_langIdx].value);
-      _screen = 1;
-      _showCurrentScreen();
-      return;
-    }
-    if (_screen === 1) return;  // Screen 1: Enter handled by Begin/Exit buttons
-    if (_screen === 2) return;  // Screen 2: Enter handled by Continue button
-    if (_screen === 4) return;  // Screen 4: Enter handled by the focused button
-    if (_screen === 5) return;  // Screen 5: Enter handled by OK button
-    if (_screen < 5) {
-      _screen++;
-      _showCurrentScreen();
-    }
-  });
-
-  screen.key(['escape'], () => {
-    if (box.hidden || _checking) return;
-    if (_completionModalOpen) { _dismissCompletionModal(); return; }
-    if (_screen > 0) {
-      _screen--;
-      _showCurrentScreen();
-    } else {
-      // User pressed Escape at the first screen — they want out of the installer.
-      // Switch to Settings so they can configure without being stuck on the install tab.
-      // (focusMainTabBar would re-focus the install tab item, which loops back here.)
-      setTimeout(() => navigationService?.switchTab('settings'), 0);
-    }
-  });
-
-  screen.key(['up'], () => {
-    if (box.hidden) return;
-    if (_screen === 0) {
-      _langIdx = Math.max(0, _langIdx - 1);
-      _renderScreen0();
-      return;
-    }
-    if (_screen === 3 && _deps) {
-      const providers = [];
-      if (_deps.piper)   providers.push('piper');
-      if (_deps.soprano) providers.push('soprano');
-      const idx = providers.indexOf(_selectedProvider ?? providers[0]);
-      _selectedProvider = providers[Math.max(0, idx - 1)];
-      _renderScreen3();
-    }
-  });
-
-  // Left arrow = go back (same logic as Escape)
-  // Screen 4: left arrow is handled by button ←/→ navigation; use Escape to go back
-  screen.key(['left'], () => {
-    if (box.hidden || _checking) return;
-    if (_screen === 4) return;
-    if (_screen === 5) return;  // Screen 5: ← handled by button nav
-    if (_screen > 0) {
-      _screen--;
-      _showCurrentScreen();
-    }
-  });
-
-  // Right arrow = go forward (same logic as Enter, without save/finish side-effects)
-  // Screen 0: → skips language selection (keeps English)
-  // Screen 1: right arrow handled by button ←/→ navigation
-  screen.key(['right'], () => {
-    if (box.hidden || _checking) return;
-    if (_screen === 0) {  // → skips: keep current _lang (default 'en') and advance
-      if (languageService) languageService.setLang(SUPPORTED_LANGUAGES[_langIdx].value);
-      _screen = 1;
-      _showCurrentScreen();
-      return;
-    }
-    if (_screen === 1) return;
-    if (_screen === 2) return;  // Screen 2: → handled by Continue button
-    if (_screen === 3) { _screen++; _showCurrentScreen(); return; }  // → confirms provider and advances
-    if (_screen === 4) return;  // Screen 4: → handled by button nav
-    if (_screen === 5) return;  // Screen 5: → handled by button nav
-  });
-
-  // Down arrow: Screen 0 language nav; Screen 3 provider nav; Screen 1 ↓ is handled by button key handlers
-  // (tab bar's el.key(['down']) → onFocus() focuses Begin, then button ↓ → Exit)
-  screen.key(['down'], () => {
-    if (box.hidden) return;
-    if (_screen === 0) {
-      _langIdx = Math.min(SUPPORTED_LANGUAGES.length - 1, _langIdx + 1);
-      _renderScreen0();
-      return;
-    }
-    if (_screen === 3 && _deps) {
-      const providers = [];
-      if (_deps.piper)   providers.push('piper');
-      if (_deps.soprano) providers.push('soprano');
-      const idx = providers.indexOf(_selectedProvider ?? providers[0]);
-      _selectedProvider = providers[Math.min(providers.length - 1, idx + 1)];
-      _renderScreen3();
-    }
-  });
-
-  // [E] on Screen 4: edit intro text inline
-  screen.key(['e', 'E'], () => { _doEdit(); });
-
-  // [O] anywhere: dismiss the completion modal (OK button)
-  screen.key(['o', 'O'], () => {
-    if (box.hidden || !_completionModalOpen) return;
-    _dismissCompletionModal();
-  });
-
-  // -------------------------------------------------------------------------
-  // Tab Component Contract
-
-  return {
-    box,
-
-    show() {
-      _screen = 0;
-      _langIdx = 0;
-      // _lang now lives in languageService — don't reset it here
-      _screen5Announced = false;
-      _installLog      = [];
-      _installRunning  = false;
-      _installComplete = false;
-      _installError    = null;
-      _lastSpinnerIdx  = -1;
-      if (_completionModalBox) { _completionModalBox.destroy(); _completionModalBox = null; }
-      _completionModalOpen = false;
-      box.show();
-      _showCurrentScreen();
-      screen.render();
-    },
-
-    hide() {
-      box.hide();
-      screen.render();
-    },
-
-    onFocus() {
-      // Focus the active interactive element, not just the box container
-      if (_screen === 0) {
-        box.focus();  // Screen 0 uses key handlers, no button widgets
-      } else if (_screen === 1) {
-        _s1BeginBtn.focus();
-      } else if (_screen === 4) {
-        _editBtn.focus();
-      } else if (_screen === 5 && (_installComplete || _installError)) {
-        _s5QuitBtn.focus();
-      } else {
-        box.focus();
-      }
-      screen.render();
-    },
-
-    onBlur() {},
-
-    getFooterText() {
-      return _tl('footerText');
-    },
-
-    getFooterColor() {
-      return COLORS.footerBg;
-    },
-  };
-}