hedgequantx 2.7.21 → 2.7.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedgequantx",
-  "version": "2.7.21",
+  "version": "2.7.22",
   "description": "HedgeQuantX - Prop Futures Trading CLI",
   "main": "src/app.js",
   "bin": {

package/src/app.js

@@ -126,7 +126,16 @@ const banner = async () => {
   
   const tagline = isMobile ? `HQX v${version}` : `Prop Futures Algo Trading  v${version}`;
   console.log(chalk.cyan('║') + chalk.white(centerText(tagline, innerWidth)) + chalk.cyan('║'));
-  console.log(chalk.cyan('╚' + '═'.repeat(innerWidth) + '╝'));
+};
+
+/**
+ * Display banner with closed bottom (standalone)
+ */
+const bannerClosed = async () => {
+  await banner();
+  const termWidth = process.stdout.columns || 100;
+  const boxWidth = termWidth < 60 ? Math.max(termWidth - 2, 40) : Math.max(getLogoWidth(), 98);
+  console.log(chalk.cyan('╚' + '═'.repeat(boxWidth - 2) + '╝'));
 };
 
 const getFullLogo = () => [
@@ -187,7 +196,8 @@ const run = async () => {
           const totalContentWidth = numCols * colWidth;
           const leftMargin = Math.max(2, Math.floor((innerWidth - totalContentWidth) / 2));
           
-          console.log(chalk.cyan('╔' + '═'.repeat(innerWidth) + '╗'));
+          // Continue from banner (connected rectangle)
+          console.log(chalk.cyan('╠' + '═'.repeat(innerWidth) + '╣'));
           console.log(chalk.cyan('║') + chalk.white.bold(centerText('SELECT PROPFIRM', innerWidth)) + chalk.cyan('║'));
           console.log(chalk.cyan('╠' + '═'.repeat(innerWidth) + '╣'));
           

package/src/menus/dashboard.js

@@ -30,8 +30,8 @@ const dashboardMenu = async (service) => {
     return chalk.cyan('║') + content + ' '.repeat(Math.max(0, padding)) + chalk.cyan('║');
   };
   
-  // New box for dashboard menu
-  console.log(chalk.cyan('╔' + '═'.repeat(W) + '╗'));
+  // Continue from banner (connected rectangle)
+  console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
   console.log(makeLine(chalk.yellow.bold('Welcome, HQX Trader!'), 'center'));
   console.log(chalk.cyan('╠' + '═'.repeat(W) + '╣'));
   

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

@@ -0,0 +1,185 @@
+/**
+ * AI Agents UI Components
+ * 
+ * UI drawing functions for the AI Agents configuration page.
+ */
+
+const chalk = require('chalk');
+const { centerText, visibleLength } = require('../ui');
+
+/**
+ * Draw a 2-column row
+ * @param {string} leftText - Left column text
+ * @param {string} rightText - Right column text
+ * @param {number} W - Inner width
+ */
+const draw2ColRow = (leftText, rightText, W) => {
+  const col1Width = Math.floor(W / 2);
+  const col2Width = W - col1Width;
+  const leftLen = visibleLength(leftText);
+  const leftPad = col1Width - leftLen;
+  const leftPadL = Math.floor(leftPad / 2);
+  const rightLen = visibleLength(rightText || '');
+  const rightPad = col2Width - rightLen;
+  const rightPadL = Math.floor(rightPad / 2);
+  console.log(
+    chalk.cyan('║') +
+    ' '.repeat(leftPadL) + leftText + ' '.repeat(leftPad - leftPadL) +
+    ' '.repeat(rightPadL) + (rightText || '') + ' '.repeat(rightPad - rightPadL) +
+    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) => {
+  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 providers table
+ * @param {Array} providers - List of AI providers
+ * @param {Object} config - Current config
+ * @param {number} boxWidth - Box width
+ */
+const drawProvidersTable = (providers, config, boxWidth) => {
+  const W = boxWidth - 2;
+  const items = providers.map((p, i) => {
+    const status = config.providers[p.id]?.active ? chalk.green(' ●') : '';
+    return chalk.cyan(`[${i + 1}]`) + ' ' + chalk[p.color](p.name) + status;
+  });
+  draw2ColTable('AI AGENTS CONFIGURATION', chalk.yellow.bold, items, '[B] Back to Menu', W);
+};
+
+/**
+ * Draw models table
+ * @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 items = models.map((m, i) => chalk.cyan(`[${i + 1}]`) + ' ' + chalk.white(m.name));
+  draw2ColTable(`${provider.name.toUpperCase()} - MODELS`, chalk[provider.color].bold, items, '[B] Back', W);
+};
+
+/**
+ * Draw provider configuration window
+ * @param {Object} provider - Provider object
+ * @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] || {};
+  
+  // Header
+  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) + '╣'));
+  
+  // Empty line
+  console.log(chalk.cyan('║') + ' '.repeat(W) + chalk.cyan('║'));
+  
+  // Options in 2 columns
+  const opt1Title = '[1] Connect via Paid Plan';
+  const opt1Desc = 'Uses CLIProxy - No API key needed';
+  const opt2Title = '[2] Connect via API Key';
+  const opt2Desc = 'Enter your own API key';
+  
+  // Row 1: Titles
+  const left1 = chalk.green(opt1Title);
+  const right1 = chalk.yellow(opt2Title);
+  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('║')
+  );
+  
+  // Row 2: Descriptions
+  const left2 = chalk.gray(opt1Desc);
+  const right2 = chalk.gray(opt2Desc);
+  const left2Len = visibleLength(left2);
+  const right2Len = visibleLength(right2);
+  const left2PadTotal = col1Width - left2Len;
+  const left2PadL = Math.floor(left2PadTotal / 2);
+  const left2PadR = left2PadTotal - left2PadL;
+  const right2PadTotal = col2Width - right2Len;
+  const right2PadL = Math.floor(right2PadTotal / 2);
+  const right2PadR = right2PadTotal - right2PadL;
+  
+  console.log(
+    chalk.cyan('║') +
+    ' '.repeat(left2PadL) + left2 + ' '.repeat(left2PadR) +
+    ' '.repeat(right2PadL) + right2 + ' '.repeat(right2PadR) +
+    chalk.cyan('║')
+  );
+  
+  // Empty line
+  console.log(chalk.cyan('║') + ' '.repeat(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';
+    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) + '╝'));
+};
+
+module.exports = {
+  draw2ColRow,
+  draw2ColTable,
+  drawProvidersTable,
+  drawModelsTable,
+  drawProviderWindow
+};

package/src/pages/ai-agents.js

@@ -9,11 +9,13 @@ const chalk = require('chalk');
 const os = require('os');
 const path = require('path');
 const fs = require('fs');
-
 const ora = require('ora');
-const { getLogoWidth, centerText, visibleLength } = require('../ui');
+
+const { getLogoWidth } = require('../ui');
 const { prompts } = require('../utils');
 const { fetchModelsFromApi } = require('./ai-models');
+const { drawProvidersTable, drawModelsTable, drawProviderWindow } = require('./ai-agents-ui');
+const { isCliProxyRunning, fetchModelsFromCliProxy, getOAuthUrl, checkOAuthStatus } = require('../services/cliproxy');
 
 // Config file path
 const CONFIG_DIR = path.join(os.homedir(), '.hqx');
@@ -31,32 +33,20 @@ const AI_PROVIDERS = [
   { id: 'openrouter', name: 'OpenRouter', color: 'gray' },
 ];
 
-/**
- * Load AI config from file
- * @returns {Object} Config object with provider settings
- */
+/** Load AI config from file */
 const loadConfig = () => {
   try {
     if (fs.existsSync(CONFIG_FILE)) {
-      const data = fs.readFileSync(CONFIG_FILE, 'utf8');
-      return JSON.parse(data);
+      return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
     }
-  } catch (error) {
-    // Config file doesn't exist or is invalid
-  }
+  } catch (error) { /* ignore */ }
   return { providers: {} };
 };
 
-/**
- * Save AI config to file
- * @param {Object} config - Config object to save
- * @returns {boolean} Success status
- */
+/** Save AI config to file */
 const saveConfig = (config) => {
   try {
-    if (!fs.existsSync(CONFIG_DIR)) {
-      fs.mkdirSync(CONFIG_DIR, { recursive: true });
-    }
+    if (!fs.existsSync(CONFIG_DIR)) fs.mkdirSync(CONFIG_DIR, { recursive: true });
     fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
     return true;
   } catch (error) {
@@ -64,87 +54,28 @@ const saveConfig = (config) => {
   }
 };
 
-/**
- * Mask API key for display
- * @param {string} key - API key
- * @returns {string} Masked key
- */
-const maskKey = (key) => {
-  if (!key || key.length < 16) return '****';
-  return key.substring(0, 8) + '...' + key.substring(key.length - 4);
-};
-
-/**
- * Draw a 2-column row
- */
-const draw2ColRow = (leftText, rightText, W) => {
-  const col1Width = Math.floor(W / 2);
-  const col2Width = W - col1Width;
-  const leftLen = visibleLength(leftText);
-  const leftPad = col1Width - leftLen;
-  const leftPadL = Math.floor(leftPad / 2);
-  const rightLen = visibleLength(rightText || '');
-  const rightPad = col2Width - rightLen;
-  const rightPadL = Math.floor(rightPad / 2);
-  console.log(
-    chalk.cyan('║') +
-    ' '.repeat(leftPadL) + leftText + ' '.repeat(leftPad - leftPadL) +
-    ' '.repeat(rightPadL) + (rightText || '') + ' '.repeat(rightPad - rightPadL) +
-    chalk.cyan('║')
-  );
-};
-
-/**
- * Draw 2-column table
- */
-const draw2ColTable = (title, titleColor, items, backText, W) => {
-  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);
+/** Select a model from a pre-fetched list */
+const selectModelFromList = async (provider, models, boxWidth) => {
+  while (true) {
+    console.clear();
+    drawModelsTable(provider, models, boxWidth);
+    
+    const input = await prompts.textInput(chalk.cyan('Select model: '));
+    const choice = (input || '').toLowerCase().trim();
+    
+    if (choice === 'b' || choice === '') return null;
+    
+    const num = parseInt(choice);
+    if (!isNaN(num) && num >= 1 && num <= models.length) return models[num - 1];
+    
+    console.log(chalk.red('  Invalid option.'));
+    await new Promise(r => setTimeout(r, 1000));
   }
-  
-  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
-  console.log(chalk.cyan('║') + chalk.red(centerText(backText, W)) + chalk.cyan('║'));
-  console.log(chalk.cyan('╚' + '═'.repeat(W) + '╝'));
-};
-
-/**
- * Draw providers table
- */
-const drawProvidersTable = (config, boxWidth) => {
-  const W = boxWidth - 2;
-  const items = AI_PROVIDERS.map((p, i) => {
-    const status = config.providers[p.id]?.active ? chalk.green(' ●') : '';
-    return chalk.cyan(`[${i + 1}]`) + ' ' + chalk[p.color](p.name) + status;
-  });
-  draw2ColTable('AI AGENTS CONFIGURATION', chalk.yellow.bold, items, '[B] Back to Menu', W);
-};
-
-/**
- * Draw models table
- */
-const drawModelsTable = (provider, models, boxWidth) => {
-  const W = boxWidth - 2;
-  const items = models.map((m, i) => chalk.cyan(`[${i + 1}]`) + ' ' + chalk.white(m.name));
-  draw2ColTable(`${provider.name.toUpperCase()} - MODELS`, chalk[provider.color].bold, items, '[B] Back', W);
 };
 
-/**
- * Select a model for a provider (fetches from API)
- * @param {Object} provider - Provider object
- * @param {string} apiKey - API key for fetching models
- * @returns {Object|null} Selected model or null if cancelled/failed
- */
+/** Select a model for a provider (fetches from API) */
 const selectModel = async (provider, apiKey) => {
   const boxWidth = getLogoWidth();
-  
-  // Fetch models from API
   const spinner = ora({ text: 'Fetching models from API...', color: 'yellow' }).start();
   const result = await fetchModelsFromApi(provider.id, apiKey);
   
@@ -155,129 +86,167 @@ const selectModel = async (provider, apiKey) => {
   }
   
   spinner.succeed(`Found ${result.models.length} models`);
-  const models = result.models;
+  return selectModelFromList(provider, result.models, boxWidth);
+};
+
+/** Deactivate all providers and activate one */
+const activateProvider = (config, providerId, data) => {
+  Object.keys(config.providers).forEach(id => {
+    if (config.providers[id]) config.providers[id].active = false;
+  });
+  if (!config.providers[providerId]) config.providers[providerId] = {};
+  Object.assign(config.providers[providerId], data, { active: true, configuredAt: new Date().toISOString() });
+};
+
+/** Handle CLIProxy connection */
+const handleCliProxyConnection = async (provider, config, boxWidth) => {
+  console.log();
+  const spinner = ora({ text: 'Checking CLIProxy status...', color: 'yellow' }).start();
+  const proxyStatus = await isCliProxyRunning();
   
-  while (true) {
-    console.clear();
-    drawModelsTable(provider, models, boxWidth);
-    
-    const input = await prompts.textInput(chalk.cyan('Select model: '));
-    const choice = (input || '').toLowerCase().trim();
+  if (!proxyStatus.running) {
+    spinner.fail('CLIProxy is not running');
+    console.log(chalk.yellow('\n  CLIProxy must be running on localhost:8317'));
+    console.log(chalk.gray('  Install: https://help.router-for.me\n'));
+    await prompts.waitForEnter();
+    return false;
+  }
+  
+  spinner.succeed('CLIProxy is running');
+  const oauthResult = await getOAuthUrl(provider.id);
+  
+  if (!oauthResult.success) {
+    // OAuth not supported - try direct model fetch
+    console.log(chalk.gray(`  OAuth not available for ${provider.name}, checking models...`));
+    const modelsResult = await fetchModelsFromCliProxy();
     
-    if (choice === 'b' || choice === '') {
-      return null;
+    if (!modelsResult.success || modelsResult.models.length === 0) {
+      console.log(chalk.red(`  No models available via CLIProxy for ${provider.name}`));
+      console.log(chalk.gray(`  Error: ${modelsResult.error || 'Unknown'}`));
+      await prompts.waitForEnter();
+      return false;
     }
     
-    const num = parseInt(choice);
-    if (!isNaN(num) && num >= 1 && num <= models.length) {
-      return models[num - 1];
-    }
+    const selectedModel = await selectModelFromList(provider, modelsResult.models, boxWidth);
+    if (!selectedModel) return false;
     
-    console.log(chalk.red('  Invalid option.'));
-    await new Promise(r => setTimeout(r, 1000));
+    activateProvider(config, provider.id, {
+      connectionType: 'cliproxy',
+      modelId: selectedModel.id,
+      modelName: selectedModel.name
+    });
+    
+    if (saveConfig(config)) {
+      console.log(chalk.green(`\n  ✓ ${provider.name} connected via CLIProxy.`));
+      console.log(chalk.cyan(`    Model: ${selectedModel.name}`));
+    }
+    await prompts.waitForEnter();
+    return true;
   }
-};
-
-/**
- * Draw provider configuration window
- * @param {Object} provider - Provider object
- * @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] || {};
   
-  // Header
-  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) + '╣'));
+  // OAuth flow
+  console.log(chalk.cyan('\n  Open this URL in your browser to authenticate:\n'));
+  console.log(chalk.yellow(`  ${oauthResult.url}\n`));
+  console.log(chalk.gray('  Waiting for authentication... (Press Enter to cancel)'));
   
-  // Empty line
-  console.log(chalk.cyan('║') + ' '.repeat(W) + chalk.cyan('║'));
+  let authenticated = false;
+  const maxWait = 120000, pollInterval = 3000;
+  let waited = 0;
   
-  // Options in 2 columns
-  const opt1Title = '[1] Connect via Paid Plan';
-  const opt1Desc = 'Uses CLIProxy - No API key needed';
-  const opt2Title = '[2] Connect via API Key';
-  const opt2Desc = 'Enter your own API key';
+  const pollPromise = (async () => {
+    while (waited < maxWait) {
+      await new Promise(r => setTimeout(r, pollInterval));
+      waited += pollInterval;
+      if (oauthResult.state) {
+        const statusResult = await checkOAuthStatus(oauthResult.state);
+        if (statusResult.success && statusResult.status === 'ok') { authenticated = true; return true; }
+        if (statusResult.status === 'error') {
+          console.log(chalk.red(`\n  Authentication error: ${statusResult.error || 'Unknown'}`));
+          return false;
+        }
+      }
+    }
+    return false;
+  })();
   
-  // Row 1: Titles
-  const left1 = chalk.green(opt1Title);
-  const right1 = chalk.yellow(opt2Title);
-  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;
+  await Promise.race([pollPromise, prompts.waitForEnter()]);
   
-  console.log(
-    chalk.cyan('║') +
-    ' '.repeat(left1PadL) + left1 + ' '.repeat(left1PadR) +
-    ' '.repeat(right1PadL) + right1 + ' '.repeat(right1PadR) +
-    chalk.cyan('║')
-  );
+  if (!authenticated) {
+    console.log(chalk.yellow('  Authentication cancelled or timed out.'));
+    await prompts.waitForEnter();
+    return false;
+  }
   
-  // Row 2: Descriptions
-  const left2 = chalk.gray(opt1Desc);
-  const right2 = chalk.gray(opt2Desc);
-  const left2Len = visibleLength(left2);
-  const right2Len = visibleLength(right2);
-  const left2PadTotal = col1Width - left2Len;
-  const left2PadL = Math.floor(left2PadTotal / 2);
-  const left2PadR = left2PadTotal - left2PadL;
-  const right2PadTotal = col2Width - right2Len;
-  const right2PadL = Math.floor(right2PadTotal / 2);
-  const right2PadR = right2PadTotal - right2PadL;
+  console.log(chalk.green('  ✓ Authentication successful!'));
   
-  console.log(
-    chalk.cyan('║') +
-    ' '.repeat(left2PadL) + left2 + ' '.repeat(left2PadR) +
-    ' '.repeat(right2PadL) + right2 + ' '.repeat(right2PadR) +
-    chalk.cyan('║')
-  );
+  const modelsResult = await fetchModelsFromCliProxy();
+  if (modelsResult.success && modelsResult.models.length > 0) {
+    const selectedModel = await selectModelFromList(provider, modelsResult.models, boxWidth);
+    if (selectedModel) {
+      activateProvider(config, provider.id, {
+        connectionType: 'cliproxy',
+        modelId: selectedModel.id,
+        modelName: selectedModel.name
+      });
+      if (saveConfig(config)) {
+        console.log(chalk.green(`\n  ✓ ${provider.name} connected via CLIProxy.`));
+        console.log(chalk.cyan(`    Model: ${selectedModel.name}`));
+      }
+    }
+  } else {
+    activateProvider(config, provider.id, {
+      connectionType: 'cliproxy',
+      modelId: null,
+      modelName: 'Default'
+    });
+    if (saveConfig(config)) console.log(chalk.green(`\n  ✓ ${provider.name} connected via CLIProxy.`));
+  }
   
-  // Empty line
-  console.log(chalk.cyan('║') + ' '.repeat(W) + chalk.cyan('║'));
+  await prompts.waitForEnter();
+  return true;
+};
+
+/** Handle API Key connection */
+const handleApiKeyConnection = async (provider, config) => {
+  console.clear();
+  console.log(chalk.yellow(`\n  Enter your ${provider.name} API key:`));
+  console.log(chalk.gray('  (Press Enter to cancel)\n'));
   
-  // Status bar
-  console.log(chalk.cyan('╠' + '─'.repeat(W) + '╣'));
+  const apiKey = await prompts.textInput(chalk.cyan('  API Key: '), true);
   
-  let statusText = '';
-  if (providerConfig.active) {
-    const connType = providerConfig.connectionType === 'cliproxy' ? 'CLIProxy' : 'API Key';
-    const modelName = providerConfig.modelName || 'N/A';
-    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');
+  if (!apiKey || apiKey.trim() === '') {
+    console.log(chalk.gray('  Cancelled.'));
+    await prompts.waitForEnter();
+    return false;
   }
-  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('║'));
+  if (apiKey.length < 20) {
+    console.log(chalk.red('  Invalid API key format (too short).'));
+    await prompts.waitForEnter();
+    return false;
   }
   
-  // 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) + '╝'));
+  const selectedModel = await selectModel(provider, apiKey.trim());
+  if (!selectedModel) return false;
+  
+  activateProvider(config, provider.id, {
+    connectionType: 'apikey',
+    apiKey: apiKey.trim(),
+    modelId: selectedModel.id,
+    modelName: selectedModel.name
+  });
+  
+  if (saveConfig(config)) {
+    console.log(chalk.green(`\n  ✓ ${provider.name} connected via API Key.`));
+    console.log(chalk.cyan(`    Model: ${selectedModel.name}`));
+  } else {
+    console.log(chalk.red('\n  Failed to save config.'));
+  }
+  await prompts.waitForEnter();
+  return true;
 };
 
-/**
- * Handle provider configuration
- * @param {Object} provider - Provider to configure
- * @param {Object} config - Current config
- * @returns {Object} Updated config
- */
+/** Handle provider configuration */
 const handleProviderConfig = async (provider, config) => {
   const boxWidth = getLogoWidth();
   
@@ -288,94 +257,23 @@ const handleProviderConfig = async (provider, config) => {
     const input = await prompts.textInput(chalk.cyan('Select option: '));
     const choice = (input || '').toLowerCase().trim();
     
-    if (choice === 'b' || choice === '') {
-      break;
-    }
+    if (choice === 'b' || choice === '') break;
     
-    if (choice === 'd') {
-      // Disconnect
-      if (config.providers[provider.id]) {
-        config.providers[provider.id].active = false;
-        saveConfig(config);
-        console.log(chalk.yellow(`\n  ${provider.name} disconnected.`));
-        await prompts.waitForEnter();
-      }
+    if (choice === 'd' && config.providers[provider.id]) {
+      config.providers[provider.id].active = false;
+      saveConfig(config);
+      console.log(chalk.yellow(`\n  ${provider.name} disconnected.`));
+      await prompts.waitForEnter();
       continue;
     }
     
     if (choice === '1') {
-      // CLIProxy connection - models will be fetched via proxy
-      console.log();
-      console.log(chalk.cyan('  CLIProxy uses your paid plan subscription.'));
-      console.log(chalk.gray('  Model selection will be available after connecting.'));
-      console.log();
-      
-      // Deactivate all other providers
-      Object.keys(config.providers).forEach(id => {
-        if (config.providers[id]) config.providers[id].active = false;
-      });
-      
-      if (!config.providers[provider.id]) config.providers[provider.id] = {};
-      config.providers[provider.id].connectionType = 'cliproxy';
-      config.providers[provider.id].modelId = null;
-      config.providers[provider.id].modelName = 'N/A';
-      config.providers[provider.id].active = true;
-      config.providers[provider.id].configuredAt = new Date().toISOString();
-      
-      if (saveConfig(config)) {
-        console.log(chalk.green(`  ✓ ${provider.name} connected via CLIProxy.`));
-      } else {
-        console.log(chalk.red('  Failed to save config.'));
-      }
-      await prompts.waitForEnter();
+      await handleCliProxyConnection(provider, config, boxWidth);
       continue;
     }
     
     if (choice === '2') {
-      // API Key connection - get key first, then fetch models
-      console.clear();
-      console.log(chalk.yellow(`\n  Enter your ${provider.name} API key:`));
-      console.log(chalk.gray('  (Press Enter to cancel)'));
-      console.log();
-      
-      const apiKey = await prompts.textInput(chalk.cyan('  API Key: '), true);
-      
-      if (!apiKey || apiKey.trim() === '') {
-        console.log(chalk.gray('  Cancelled.'));
-        await prompts.waitForEnter();
-        continue;
-      }
-      
-      if (apiKey.length < 20) {
-        console.log(chalk.red('  Invalid API key format (too short).'));
-        await prompts.waitForEnter();
-        continue;
-      }
-      
-      // Fetch models from API with the provided key
-      const selectedModel = await selectModel(provider, apiKey.trim());
-      if (!selectedModel) continue;
-      
-      // Deactivate all other providers
-      Object.keys(config.providers).forEach(id => {
-        if (config.providers[id]) config.providers[id].active = false;
-      });
-      
-      if (!config.providers[provider.id]) config.providers[provider.id] = {};
-      config.providers[provider.id].connectionType = 'apikey';
-      config.providers[provider.id].apiKey = apiKey.trim();
-      config.providers[provider.id].modelId = selectedModel.id;
-      config.providers[provider.id].modelName = selectedModel.name;
-      config.providers[provider.id].active = true;
-      config.providers[provider.id].configuredAt = new Date().toISOString();
-      
-      if (saveConfig(config)) {
-        console.log(chalk.green(`\n  ✓ ${provider.name} connected via API Key.`));
-        console.log(chalk.cyan(`    Model: ${selectedModel.name}`));
-      } else {
-        console.log(chalk.red('\n  Failed to save config.'));
-      }
-      await prompts.waitForEnter();
+      await handleApiKeyConnection(provider, config);
       continue;
     }
   }
@@ -383,54 +281,41 @@ const handleProviderConfig = async (provider, config) => {
   return config;
 };
 
-/**
- * Get active AI provider config
- * @returns {Object|null} Active provider config or null
- */
+/** Get active AI provider config */
 const getActiveProvider = () => {
   const config = loadConfig();
   for (const provider of AI_PROVIDERS) {
-    const providerConfig = config.providers[provider.id];
-    if (providerConfig && providerConfig.active) {
+    const pc = config.providers[provider.id];
+    if (pc && pc.active) {
       return {
         id: provider.id,
         name: provider.name,
-        connectionType: providerConfig.connectionType,
-        apiKey: providerConfig.apiKey || null,
-        modelId: providerConfig.modelId || null,
-        modelName: providerConfig.modelName || null
+        connectionType: pc.connectionType,
+        apiKey: pc.apiKey || null,
+        modelId: pc.modelId || null,
+        modelName: pc.modelName || null
       };
     }
   }
   return null;
 };
 
-/**
- * Count active AI agents
- * @returns {number} Number of active agents (0 or 1)
- */
-const getActiveAgentCount = () => {
-  const active = getActiveProvider();
-  return active ? 1 : 0;
-};
+/** Count active AI agents */
+const getActiveAgentCount = () => getActiveProvider() ? 1 : 0;
 
-/**
- * Main AI Agents menu
- */
+/** Main AI Agents menu */
 const aiAgentsMenu = async () => {
   let config = loadConfig();
   const boxWidth = getLogoWidth();
   
   while (true) {
     console.clear();
-    drawProvidersTable(config, boxWidth);
+    drawProvidersTable(AI_PROVIDERS, config, boxWidth);
     
     const input = await prompts.textInput(chalk.cyan('Select provider: '));
     const choice = (input || '').toLowerCase().trim();
     
-    if (choice === 'b' || choice === '') {
-      break;
-    }
+    if (choice === 'b' || choice === '') break;
     
     const num = parseInt(choice);
     if (!isNaN(num) && num >= 1 && num <= AI_PROVIDERS.length) {

package/src/services/cliproxy.js

@@ -0,0 +1,199 @@
+/**
+ * CLIProxy Service
+ * 
+ * Connects to CLIProxyAPI (localhost:8317) for AI provider access
+ * via paid plans (Claude Pro, ChatGPT Plus, etc.)
+ * 
+ * Docs: https://help.router-for.me
+ */
+
+const http = require('http');
+
+// CLIProxy default endpoint
+const CLIPROXY_BASE = 'http://localhost:8317';
+
+/**
+ * Make HTTP request to CLIProxy
+ * @param {string} path - API path
+ * @param {string} method - HTTP method
+ * @param {Object} headers - Request headers
+ * @param {number} timeout - Timeout in ms (default 60000 per RULES.md #15)
+ * @returns {Promise<Object>} { success, data, error }
+ */
+const fetchCliProxy = (path, method = 'GET', headers = {}, timeout = 60000) => {
+  return new Promise((resolve) => {
+    const url = new URL(path, CLIPROXY_BASE);
+    const options = {
+      hostname: url.hostname,
+      port: url.port || 8317,
+      path: url.pathname + url.search,
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        ...headers
+      },
+      timeout
+    };
+
+    const req = http.request(options, (res) => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => {
+        try {
+          if (res.statusCode >= 200 && res.statusCode < 300) {
+            resolve({ success: true, data: JSON.parse(data) });
+          } else {
+            resolve({ success: false, error: `HTTP ${res.statusCode}`, data: null });
+          }
+        } catch (error) {
+          resolve({ success: false, error: 'Invalid JSON response', data: null });
+        }
+      });
+    });
+
+    req.on('error', (error) => {
+      if (error.code === 'ECONNREFUSED') {
+        resolve({ success: false, error: 'CLIProxy not running', data: null });
+      } else {
+        resolve({ success: false, error: error.message, data: null });
+      }
+    });
+
+    req.on('timeout', () => {
+      req.destroy();
+      resolve({ success: false, error: 'Request timeout', data: null });
+    });
+
+    req.end();
+  });
+};
+
+/**
+ * Check if CLIProxy is running
+ * @returns {Promise<Object>} { running, error }
+ */
+const isCliProxyRunning = async () => {
+  const result = await fetchCliProxy('/v1/models', 'GET', {}, 5000);
+  return { 
+    running: result.success, 
+    error: result.success ? null : result.error 
+  };
+};
+
+/**
+ * Fetch available models from CLIProxy
+ * @returns {Promise<Object>} { success, models, error }
+ */
+const fetchModelsFromCliProxy = async () => {
+  const result = await fetchCliProxy('/v1/models');
+  
+  if (!result.success) {
+    return { success: false, models: [], error: result.error };
+  }
+  
+  // Parse OpenAI-compatible format: { data: [{ id, ... }] }
+  const data = result.data;
+  if (!data || !data.data || !Array.isArray(data.data)) {
+    return { success: false, models: [], error: 'Invalid response format' };
+  }
+  
+  const models = data.data
+    .filter(m => m.id)
+    .map(m => ({
+      id: m.id,
+      name: m.id
+    }));
+  
+  if (models.length === 0) {
+    return { success: false, models: [], error: 'No models available' };
+  }
+  
+  return { success: true, models, error: null };
+};
+
+/**
+ * Get OAuth URL for a provider
+ * @param {string} providerId - Provider ID (anthropic, openai, google, etc.)
+ * @returns {Promise<Object>} { success, url, state, error }
+ */
+const getOAuthUrl = async (providerId) => {
+  // Map HQX provider IDs to CLIProxy endpoints
+  const oauthEndpoints = {
+    anthropic: '/v0/management/anthropic-auth-url',
+    openai: '/v0/management/codex-auth-url',
+    google: '/v0/management/gemini-cli-auth-url',
+    // Others may not have OAuth support in CLIProxy
+  };
+  
+  const endpoint = oauthEndpoints[providerId];
+  if (!endpoint) {
+    return { success: false, url: null, state: null, error: 'OAuth not supported for this provider' };
+  }
+  
+  const result = await fetchCliProxy(endpoint);
+  
+  if (!result.success) {
+    return { success: false, url: null, state: null, error: result.error };
+  }
+  
+  const data = result.data;
+  if (!data || !data.url) {
+    return { success: false, url: null, state: null, error: 'Invalid OAuth response' };
+  }
+  
+  return { 
+    success: true, 
+    url: data.url, 
+    state: data.state || null,
+    error: null 
+  };
+};
+
+/**
+ * Check OAuth status
+ * @param {string} state - OAuth state from getOAuthUrl
+ * @returns {Promise<Object>} { success, status, error }
+ */
+const checkOAuthStatus = async (state) => {
+  const result = await fetchCliProxy(`/v0/management/get-auth-status?state=${encodeURIComponent(state)}`);
+  
+  if (!result.success) {
+    return { success: false, status: null, error: result.error };
+  }
+  
+  const data = result.data;
+  // status can be: "wait", "ok", "error"
+  return { 
+    success: true, 
+    status: data.status || 'unknown',
+    error: data.error || null
+  };
+};
+
+/**
+ * Get CLIProxy auth files (connected accounts)
+ * @returns {Promise<Object>} { success, files, error }
+ */
+const getAuthFiles = async () => {
+  const result = await fetchCliProxy('/v0/management/auth-files');
+  
+  if (!result.success) {
+    return { success: false, files: [], error: result.error };
+  }
+  
+  return { 
+    success: true, 
+    files: result.data?.files || [],
+    error: null 
+  };
+};
+
+module.exports = {
+  CLIPROXY_BASE,
+  isCliProxyRunning,
+  fetchModelsFromCliProxy,
+  getOAuthUrl,
+  checkOAuthStatus,
+  getAuthFiles,
+  fetchCliProxy
+};