hedgequantx 2.9.20 → 2.9.22

package/src/pages/accounts.js

@@ -7,13 +7,17 @@ const ora = require('ora');
 
 const { connections } = require('../services');
 const { ACCOUNT_STATUS, ACCOUNT_TYPE } = require('../config');
-const { getLogoWidth, getColWidths, drawBoxHeader, drawBoxFooter, draw2ColHeader, visibleLength, displayBanner } = require('../ui');
+const { getLogoWidth, getColWidths, drawBoxHeader, drawBoxFooter, draw2ColHeader, visibleLength, displayBanner, clearScreen } = require('../ui');
 const { prompts } = require('../utils');
 
 /**
  * Show all accounts
  */
 const showAccounts = async (service) => {
+  // Clear screen and show banner
+  clearScreen();
+  displayBanner();
+  
   const boxWidth = getLogoWidth();
   const { col1, col2 } = getColWidths(boxWidth);
 
@@ -28,13 +32,12 @@ const showAccounts = async (service) => {
   let spinner;
 
   try {
-    // Single spinner for loading (appears below the dashboard header)
-    spinner = ora({ text: 'Loading accounts...', color: 'yellow' }).start();
+    spinner = ora({ text: 'LOADING ACCOUNTS...', color: 'yellow' }).start();
     
     const allConns = connections.count() > 0 ? connections.getAll() : (service ? [{ service, propfirm: service.propfirm?.name || 'Unknown', type: 'single' }] : []);
     
     if (allConns.length === 0) {
-      spinner.fail('No connections found');
+      spinner.fail('NO CONNECTIONS FOUND');
       await prompts.waitForEnter();
       return;
     }
@@ -60,7 +63,7 @@ const showAccounts = async (service) => {
     }
 
     if (allAccounts.length === 0) {
-      spinner.fail('No accounts found');
+      spinner.fail('NO ACCOUNTS FOUND');
       await prompts.waitForEnter();
       return;
     }
@@ -78,8 +81,11 @@ const showAccounts = async (service) => {
       } catch (e) {}
     }
     
-    spinner.succeed('Accounts loaded');
-    console.log();
+    spinner.stop();
+    
+    // Clear and show banner again before displaying accounts
+    clearScreen();
+    displayBanner();
 
     // Display accounts
     drawBoxHeader('TRADING ACCOUNTS', boxWidth);
@@ -91,12 +97,20 @@ const showAccounts = async (service) => {
       const name1 = String(acc1.accountName || acc1.rithmicAccountId || acc1.accountId || `Account #${i + 1}`);
       const name2 = acc2 ? String(acc2.accountName || acc2.rithmicAccountId || acc2.accountId || `Account #${i + 2}`) : '';
 
-      draw2ColHeader(name1.substring(0, col1 - 4), name2 ? name2.substring(0, col2 - 4) : '', boxWidth);
+      // For single account, use full width; for pairs, use 2-column layout
+      const sep = acc2 ? '│' : '║';
+      const rightCol = acc2 ? col2 : col2;
+      
+      // Header row with account name(s)
+      const h1 = centerText(name1.substring(0, col1 - 4), col1);
+      const h2 = acc2 ? centerText(name2.substring(0, col2 - 4), col2) : ' '.repeat(col2);
+      console.log(chalk.cyan('║') + chalk.cyan.bold(h1) + chalk.cyan(sep) + chalk.cyan.bold(h2) + chalk.cyan('║'));
+      console.log(chalk.cyan('╠') + chalk.cyan('─'.repeat(col1)) + chalk.cyan(acc2 ? '┼' : '┼') + chalk.cyan('─'.repeat(col2)) + chalk.cyan('╣'));
 
       // PropFirm
       const pf1 = chalk.magenta(acc1.propfirm || 'Unknown');
       const pf2 = acc2 ? chalk.magenta(acc2.propfirm || 'Unknown') : '';
-      console.log(chalk.cyan('║') + fmtRow('PropFirm:', pf1, col1) + chalk.cyan('│') + (acc2 ? fmtRow('PropFirm:', pf2, col2) : ' '.repeat(col2)) + chalk.cyan('║'));
+      console.log(chalk.cyan('║') + fmtRow('PropFirm:', pf1, col1) + chalk.cyan(sep) + (acc2 ? fmtRow('PropFirm:', pf2, col2) : ' '.repeat(col2)) + chalk.cyan('║'));
 
       // Balance
       const bal1 = acc1.balance;
@@ -105,7 +119,7 @@ const showAccounts = async (service) => {
       const balStr2 = bal2 !== null && bal2 !== undefined ? '$' + Number(bal2).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '--';
       const balColor1 = bal1 === null || bal1 === undefined ? chalk.gray : (bal1 >= 0 ? chalk.green : chalk.red);
       const balColor2 = bal2 === null || bal2 === undefined ? chalk.gray : (bal2 >= 0 ? chalk.green : chalk.red);
-      console.log(chalk.cyan('║') + fmtRow('Balance:', balColor1(balStr1), col1) + chalk.cyan('│') + (acc2 ? fmtRow('Balance:', balColor2(balStr2), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
+      console.log(chalk.cyan('║') + fmtRow('Balance:', balColor1(balStr1), col1) + chalk.cyan(sep) + (acc2 ? fmtRow('Balance:', balColor2(balStr2), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
 
       // P&L
       const pnl1 = acc1.profitAndLoss;
@@ -114,44 +128,41 @@ const showAccounts = async (service) => {
       const pnlStr2 = pnl2 !== null && pnl2 !== undefined ? (pnl2 >= 0 ? '+' : '') + '$' + Number(pnl2).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '--';
       const pnlColor1 = pnl1 === null || pnl1 === undefined ? chalk.gray : (pnl1 >= 0 ? chalk.green : chalk.red);
       const pnlColor2 = pnl2 === null || pnl2 === undefined ? chalk.gray : (pnl2 >= 0 ? chalk.green : chalk.red);
-      console.log(chalk.cyan('║') + fmtRow('P&L:', pnlColor1(pnlStr1), col1) + chalk.cyan('│') + (acc2 ? fmtRow('P&L:', pnlColor2(pnlStr2), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
+      console.log(chalk.cyan('║') + fmtRow('P&L:', pnlColor1(pnlStr1), col1) + chalk.cyan(sep) + (acc2 ? fmtRow('P&L:', pnlColor2(pnlStr2), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
 
-      // Status - handle both string from API and numeric lookup
-      const getStatusDisplay = (status) => {
-        if (!status && status !== 0) return { text: '--', color: 'gray' };
+      // Status - from Rithmic RMS API (field 154003), N/A if not available
+      const getStatusDisplay = (acc) => {
+        const status = acc.status;
+        if (status === null || status === undefined) return { text: 'N/A', color: 'gray' };
         if (typeof status === 'string') {
-          // Direct string from Rithmic API (e.g., "Active", "Disabled")
           const lowerStatus = status.toLowerCase();
           if (lowerStatus.includes('active') || lowerStatus.includes('open')) return { text: status, color: 'green' };
           if (lowerStatus.includes('disabled') || lowerStatus.includes('closed')) return { text: status, color: 'red' };
           if (lowerStatus.includes('halt')) return { text: status, color: 'red' };
           return { text: status, color: 'yellow' };
         }
-        return ACCOUNT_STATUS[status] || { text: 'Unknown', color: 'gray' };
+        return { text: String(status), color: 'yellow' };
       };
-      const status1 = getStatusDisplay(acc1.status);
-      const status2 = acc2 ? getStatusDisplay(acc2.status) : null;
-      console.log(chalk.cyan('║') + fmtRow('Status:', chalk[status1.color](status1.text), col1) + chalk.cyan('│') + (acc2 ? fmtRow('Status:', chalk[status2.color](status2.text), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
-
-      // Type/Algorithm - handle both string from API and numeric lookup
-      const getTypeDisplay = (type, algorithm) => {
-        // Prefer algorithm from RMS info if available
-        const value = algorithm || type;
-        if (!value && value !== 0) return { text: '--', color: 'gray' };
-        if (typeof value === 'string') {
-          // Direct string from Rithmic API
-          const lowerValue = value.toLowerCase();
-          if (lowerValue.includes('eval')) return { text: value, color: 'yellow' };
-          if (lowerValue.includes('live') || lowerValue.includes('funded')) return { text: value, color: 'green' };
-          if (lowerValue.includes('sim') || lowerValue.includes('demo')) return { text: value, color: 'gray' };
-          if (lowerValue.includes('express')) return { text: value, color: 'magenta' };
-          return { text: value, color: 'cyan' };
+      const status1 = getStatusDisplay(acc1);
+      const status2 = acc2 ? getStatusDisplay(acc2) : null;
+      console.log(chalk.cyan('║') + fmtRow('Status:', chalk[status1.color](status1.text), col1) + chalk.cyan(sep) + (acc2 ? fmtRow('Status:', chalk[status2.color](status2.text), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
+
+      // Algorithm - from Rithmic RMS API (field 150142), N/A if not available
+      const getAlgorithmDisplay = (acc) => {
+        const algo = acc.algorithm;
+        if (algo === null || algo === undefined) return { text: 'N/A', color: 'gray' };
+        if (typeof algo === 'string') {
+          const lowerAlgo = algo.toLowerCase();
+          if (lowerAlgo.includes('eval')) return { text: algo, color: 'yellow' };
+          if (lowerAlgo.includes('live') || lowerAlgo.includes('funded')) return { text: algo, color: 'green' };
+          if (lowerAlgo.includes('sim') || lowerAlgo.includes('demo')) return { text: algo, color: 'gray' };
+          return { text: algo, color: 'cyan' };
         }
-        return ACCOUNT_TYPE[value] || { text: 'Unknown', color: 'white' };
+        return { text: String(algo), color: 'cyan' };
       };
-      const type1 = getTypeDisplay(acc1.type, acc1.algorithm);
-      const type2 = acc2 ? getTypeDisplay(acc2.type, acc2.algorithm) : null;
-      console.log(chalk.cyan('║') + fmtRow('Type:', chalk[type1.color](type1.text), col1) + chalk.cyan('│') + (acc2 ? fmtRow('Type:', chalk[type2.color](type2.text), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
+      const algo1 = getAlgorithmDisplay(acc1);
+      const algo2 = acc2 ? getAlgorithmDisplay(acc2) : null;
+      console.log(chalk.cyan('║') + fmtRow('Algorithm:', chalk[algo1.color](algo1.text), col1) + chalk.cyan(sep) + (acc2 ? fmtRow('Algorithm:', chalk[algo2.color](algo2.text), col2) : ' '.repeat(col2)) + chalk.cyan('║'));
 
       if (i + 2 < allAccounts.length) {
         console.log(chalk.cyan('╠') + chalk.cyan('═'.repeat(col1)) + chalk.cyan('╪') + chalk.cyan('═'.repeat(col2)) + chalk.cyan('╣'));
@@ -162,7 +173,7 @@ const showAccounts = async (service) => {
     console.log();
 
   } catch (error) {
-    if (spinner) spinner.fail('Error loading accounts: ' + error.message);
+    if (spinner) spinner.fail('ERROR LOADING ACCOUNTS: ' + error.message.toUpperCase());
   }
 
   await prompts.waitForEnter();

package/src/pages/ai-agents-ui.js

@@ -0,0 +1,388 @@
+/**
+ * AI Agents UI Components
+ * 
+ * UI drawing functions for the AI Agents configuration page.
+ */
+
+const chalk = require('chalk');
+const ora = require('ora');
+const { centerText, visibleLength } = require('../ui');
+const cliproxy = require('../services/cliproxy');
+const { runPreflightCheck, formatPreflightResults, getPreflightSummary } = require('../services/ai-supervision');
+
+/**
+ * Draw a 2-column row with perfect alignment
+ * @param {string} leftText - Left column text
+ * @param {string} rightText - Right column text
+ * @param {number} W - Inner width
+ * @param {number} padding - Left padding for each column (default 3)
+ */
+const draw2ColRow = (leftText, rightText, W, padding = 3) => {
+  const colWidth = Math.floor(W / 2);
+  const leftLen = visibleLength(leftText);
+  const rightLen = visibleLength(rightText || '');
+  
+  // Left column: padding + text + fill to colWidth
+  const leftFill = colWidth - padding - leftLen;
+  const leftCol = ' '.repeat(padding) + leftText + ' '.repeat(Math.max(0, leftFill));
+  
+  // Right column: padding + text + fill to remaining width
+  const rightColWidth = W - colWidth;
+  const rightFill = rightColWidth - padding - rightLen;
+  const rightCol = ' '.repeat(padding) + (rightText || '') + ' '.repeat(Math.max(0, rightFill));
+  
+  console.log(chalk.cyan('║') + leftCol + rightCol + chalk.cyan('║'));
+};
+
+/**
+ * Draw 2-column table with title and back option
+ * @param {string} title - Table title
+ * @param {Function} titleColor - Chalk color function
+ * @param {Array} items - Items to display
+ * @param {string} backText - Back button text
+ * @param {number} W - Inner width
+ */
+const draw2ColTable = (title, titleColor, items, backText, W) => {
+  // New rectangle (banner is always closed)
+  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  console.log(chalk.cyan('║') + titleColor(centerText(title, W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  
+  const rows = Math.ceil(items.length / 2);
+  for (let row = 0; row < rows; row++) {
+    const left = items[row];
+    const right = items[row + rows];
+    draw2ColRow(left || '', right || '', W);
+  }
+  
+  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+  console.log(chalk.cyan('║') + chalk.red(centerText(backText, W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╚' + '═'.repeat(W) + '╝'));
+};
+
+/**
+ * Draw centered 2-column row
+ * @param {string} leftText - Left column text
+ * @param {string} rightText - Right column text
+ * @param {number} W - Inner width
+ */
+const draw2ColRowCentered = (leftText, rightText, W) => {
+  const colWidth = Math.floor(W / 2);
+  const leftLen = visibleLength(leftText);
+  const rightLen = visibleLength(rightText || '');
+  
+  // Center left text in left column
+  const leftPadTotal = colWidth - leftLen;
+  const leftPadL = Math.floor(leftPadTotal / 2);
+  const leftPadR = leftPadTotal - leftPadL;
+  const leftCol = ' '.repeat(Math.max(0, leftPadL)) + leftText + ' '.repeat(Math.max(0, leftPadR));
+  
+  // Center right text in right column
+  const rightColWidth = W - colWidth;
+  const rightPadTotal = rightColWidth - rightLen;
+  const rightPadL = Math.floor(rightPadTotal / 2);
+  const rightPadR = rightPadTotal - rightPadL;
+  const rightCol = ' '.repeat(Math.max(0, rightPadL)) + (rightText || '') + ' '.repeat(Math.max(0, rightPadR));
+  
+  console.log(chalk.cyan('║') + leftCol + rightCol + chalk.cyan('║'));
+};
+
+/**
+ * Draw providers table with vertically aligned columns
+ * @param {Array} providers - List of AI providers
+ * @param {Object} config - Current config
+ * @param {number} boxWidth - Box width
+ * @param {boolean} showTest - Show [T] TEST option
+ */
+const drawProvidersTable = (providers, config, boxWidth, showTest = false) => {
+  const W = boxWidth - 2;
+  const colWidth = Math.floor(W / 2);
+  
+  // Get connected providers (have auth files)
+  const connected = cliproxy.getConnectedProviders();
+  
+  // New rectangle (banner is always closed)
+  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  console.log(chalk.cyan('║') + chalk.cyan.bold(centerText('AI AGENTS CONFIGURATION', W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  
+  const rows = Math.ceil(providers.length / 2);
+  
+  // Find max name length across ALL providers for consistent alignment
+  const maxNameLen = Math.max(...providers.map(p => p.name.length));
+  
+  // Fixed format: "● [XX] NAME" where XX is 2-digit padded number
+  // Total content width = 2 (● ) + 4 ([XX]) + 1 (space) + maxNameLen
+  const contentWidth = 2 + 4 + 1 + maxNameLen;
+  const leftPad = Math.floor((colWidth - contentWidth) / 2);
+  const rightPad = Math.floor(((W - colWidth) - contentWidth) / 2);
+  
+  for (let row = 0; row < rows; row++) {
+    const leftP = providers[row];
+    const rightP = providers[row + rows];
+    
+    // Left column
+    let leftCol = '';
+    if (leftP) {
+      const num = String(row + 1).padStart(2);
+      // Show cyan dot if provider has auth file (connected via OAuth)
+      const isConnected = connected[leftP.id] || config.providers[leftP.id]?.active;
+      const status = isConnected ? chalk.cyan('● ') : '  ';
+      const name = leftP.provider ? leftP.provider.name : leftP.name;
+      const namePadded = name.toUpperCase().padEnd(maxNameLen);
+      const content = status + chalk.yellow(`[${num}]`) + ' ' + chalk.cyan(namePadded);
+      const contentLen = 2 + 4 + 1 + maxNameLen;
+      const padR = colWidth - leftPad - contentLen;
+      leftCol = ' '.repeat(leftPad) + content + ' '.repeat(Math.max(0, padR));
+    } else {
+      leftCol = ' '.repeat(colWidth);
+    }
+    
+    // Right column
+    let rightCol = '';
+    const rightColWidth = W - colWidth;
+    if (rightP) {
+      const num = String(row + rows + 1).padStart(2);
+      // Show cyan dot if provider has auth file (connected via OAuth)
+      const isConnected = connected[rightP.id] || config.providers[rightP.id]?.active;
+      const status = isConnected ? chalk.cyan('● ') : '  ';
+      const name = rightP.provider ? rightP.provider.name : rightP.name;
+      const namePadded = name.toUpperCase().padEnd(maxNameLen);
+      const content = status + chalk.yellow(`[${num}]`) + ' ' + chalk.cyan(namePadded);
+      const contentLen = 2 + 4 + 1 + maxNameLen;
+      const padR2 = rightColWidth - rightPad - contentLen;
+      rightCol = ' '.repeat(rightPad) + content + ' '.repeat(Math.max(0, padR2));
+    } else {
+      rightCol = ' '.repeat(rightColWidth);
+    }
+    
+    console.log(chalk.cyan('║') + leftCol + rightCol + chalk.cyan('║'));
+  }
+  
+  // Show [T] TEST option if agents are configured
+  if (showTest) {
+    console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+    console.log(chalk.cyan('║') + chalk.green(centerText('[T] TEST ALL CONNECTIONS', W)) + chalk.cyan('║'));
+  }
+  
+  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+  console.log(chalk.cyan('║') + chalk.red(centerText('[B] BACK TO MENU', W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╚' + '═'.repeat(W) + '╝'));
+};
+
+/**
+ * Draw models table with 2-column layout
+ * @param {Object} provider - Provider object
+ * @param {Array} models - List of models
+ * @param {number} boxWidth - Box width
+ */
+const drawModelsTable = (provider, models, boxWidth) => {
+  const W = boxWidth - 2;
+  const colWidth = Math.floor(W / 2);
+  
+  // New rectangle
+  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  console.log(chalk.cyan('║') + chalk[provider.color].bold(centerText(`${provider.name.toUpperCase()} - SELECT MODEL`, W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  
+  // Calculate rows (2 columns)
+  const rows = Math.ceil(models.length / 2);
+  
+  // Find max model name length for alignment
+  const maxNameLen = Math.min(
+    Math.max(...models.map(m => m.name.length)),
+    colWidth - 8 // [XX] + space + padding
+  );
+  
+  for (let row = 0; row < rows; row++) {
+    const leftIdx = row;
+    const rightIdx = row + rows;
+    const leftModel = models[leftIdx];
+    const rightModel = models[rightIdx];
+    
+    // Left column
+    let leftCol = '';
+    if (leftModel) {
+      const num = String(leftIdx + 1).padStart(2);
+      const name = leftModel.name.length > maxNameLen 
+        ? leftModel.name.substring(0, maxNameLen - 2) + '..'
+        : leftModel.name.padEnd(maxNameLen);
+      leftCol = `  ${chalk.cyan(`[${num}]`)} ${chalk.white(name)}`;
+      const leftLen = 2 + 4 + 1 + maxNameLen; // padding + [XX] + space + name
+      leftCol += ' '.repeat(Math.max(0, colWidth - leftLen));
+    } else {
+      leftCol = ' '.repeat(colWidth);
+    }
+    
+    // Right column
+    let rightCol = '';
+    const rightColWidth = W - colWidth;
+    if (rightModel) {
+      const num = String(rightIdx + 1).padStart(2);
+      const name = rightModel.name.length > maxNameLen
+        ? rightModel.name.substring(0, maxNameLen - 2) + '..'
+        : rightModel.name.padEnd(maxNameLen);
+      rightCol = `  ${chalk.cyan(`[${num}]`)} ${chalk.white(name)}`;
+      const rightLen = 2 + 4 + 1 + maxNameLen;
+      rightCol += ' '.repeat(Math.max(0, rightColWidth - rightLen));
+    } else {
+      rightCol = ' '.repeat(rightColWidth);
+    }
+    
+    console.log(chalk.cyan('║') + leftCol + rightCol + chalk.cyan('║'));
+  }
+  
+  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+  console.log(chalk.cyan('║') + chalk.red(centerText('[B] BACK', W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╚' + '═'.repeat(W) + '╝'));
+};
+
+/**
+ * Draw provider configuration window
+ * Shows connection options based on provider capabilities (OAuth and/or API Key)
+ * @param {Object} provider - Provider object with supportsOAuth and supportsApiKey flags
+ * @param {Object} config - Current config
+ * @param {number} boxWidth - Box width
+ */
+const drawProviderWindow = (provider, config, boxWidth) => {
+  const W = boxWidth - 2;
+  const col1Width = Math.floor(W / 2);
+  const col2Width = W - col1Width;
+  const providerConfig = config.providers[provider.id] || {};
+  
+  // Check provider capabilities (default to both if not specified)
+  const supportsOAuth = provider.supportsOAuth !== false;
+  const supportsApiKey = provider.supportsApiKey !== false;
+  
+  // New rectangle (banner is always closed)
+  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  console.log(chalk.cyan('║') + chalk[provider.color].bold(centerText(provider.name.toUpperCase(), W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  
+  // Display connection options based on provider capabilities
+  if (supportsOAuth && supportsApiKey) {
+    // Both options: 2 columns
+    const opt1 = '[1] CONNECT VIA PAID PLAN';
+    const opt2 = '[2] CONNECT VIA API KEY';
+    
+    const left1 = chalk.green(opt1);
+    const right1 = chalk.yellow(opt2);
+    const left1Len = visibleLength(left1);
+    const right1Len = visibleLength(right1);
+    const left1PadTotal = col1Width - left1Len;
+    const left1PadL = Math.floor(left1PadTotal / 2);
+    const left1PadR = left1PadTotal - left1PadL;
+    const right1PadTotal = col2Width - right1Len;
+    const right1PadL = Math.floor(right1PadTotal / 2);
+    const right1PadR = right1PadTotal - right1PadL;
+    
+    console.log(
+      chalk.cyan('║') +
+      ' '.repeat(left1PadL) + left1 + ' '.repeat(left1PadR) +
+      ' '.repeat(right1PadL) + right1 + ' '.repeat(right1PadR) +
+      chalk.cyan('║')
+    );
+  } else if (supportsApiKey) {
+    // API Key only: centered single option
+    const opt = '[1] CONNECT VIA API KEY';
+    console.log(chalk.cyan('║') + chalk.yellow(centerText(opt, W)) + chalk.cyan('║'));
+  } else if (supportsOAuth) {
+    // OAuth only: centered single option
+    const opt = '[1] CONNECT VIA PAID PLAN';
+    console.log(chalk.cyan('║') + chalk.green(centerText(opt, W)) + chalk.cyan('║'));
+  }
+  
+  // Status bar
+  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+  
+  let statusText = '';
+  if (providerConfig.active) {
+    const connType = providerConfig.connectionType === 'cliproxy' ? 'CLIPROXY' : 'API KEY';
+    const modelName = (providerConfig.modelName || 'N/A').toUpperCase();
+    statusText = chalk.green('● ACTIVE') + chalk.gray('  MODEL: ') + chalk.yellow(modelName) + chalk.gray('  VIA ') + chalk.cyan(connType);
+  } else if (providerConfig.apiKey || providerConfig.connectionType) {
+    statusText = chalk.yellow('● CONFIGURED') + chalk.gray(' (NOT ACTIVE)');
+  } else {
+    statusText = chalk.gray('○ NOT CONFIGURED');
+  }
+  console.log(chalk.cyan('║') + centerText(statusText, W) + chalk.cyan('║'));
+  
+  // Disconnect option if active
+  if (providerConfig.active) {
+    console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+    console.log(chalk.cyan('║') + chalk.red(centerText('[D] DISCONNECT', W)) + chalk.cyan('║'));
+  }
+  
+  // Back
+  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+  console.log(chalk.cyan('║') + chalk.red(centerText('[B] BACK', W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╚' + '═'.repeat(W) + '╝'));
+};
+
+/**
+ * Draw and run connection test for all agents
+ * @param {Array} agents - Array of agent configs
+ * @param {number} boxWidth - Box width
+ * @param {Function} clearWithBanner - Function to clear and show banner
+ * @returns {Promise<Object>} Test results
+ */
+const drawConnectionTest = async (agents, boxWidth, clearWithBanner) => {
+  if (agents.length === 0) {
+    console.log(chalk.yellow('\n  No agents configured. Connect an agent first.'));
+    return { success: false, error: 'No agents' };
+  }
+  
+  const W = boxWidth - 2;
+  
+  // Show loading state with spinner
+  clearWithBanner();
+  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  console.log(chalk.cyan('║') + chalk.yellow.bold(centerText('AI AGENTS CONNECTION TEST', W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  console.log(chalk.cyan('║') + ' '.repeat(W) + chalk.cyan('║'));
+  
+  // Start spinner on the loading line
+  const spinnerText = 'Testing connections... Please wait';
+  const spinner = ora({
+    text: spinnerText,
+    spinner: 'dots',
+    color: 'yellow'
+  }).start();
+  
+  // Run pre-flight check
+  const results = await runPreflightCheck(agents);
+  
+  // Stop spinner
+  spinner.stop();
+  
+  // Clear and redraw with results
+  clearWithBanner();
+  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  console.log(chalk.cyan('║') + chalk.yellow.bold(centerText('AI AGENTS CONNECTION TEST', W)) + chalk.cyan('║'));
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  
+  // Display results
+  const lines = formatPreflightResults(results, boxWidth);
+  for (const line of lines) {
+    const lineLen = visibleLength(line);
+    const padding = Math.max(0, W - lineLen);
+    console.log(chalk.cyan('║') + line + ' '.repeat(padding) + chalk.cyan('║'));
+  }
+  
+  // Summary
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
+  const summary = getPreflightSummary(results);
+  console.log(chalk.cyan('║') + centerText(summary.text, W) + chalk.cyan('║'));
+  console.log(chalk.cyan('╚' + '═'.repeat(W) + '╝'));
+  
+  return results;
+};
+
+module.exports = {
+  draw2ColRow,
+  draw2ColTable,
+  drawProvidersTable,
+  drawModelsTable,
+  drawProviderWindow,
+  drawConnectionTest
+};