codebakers 2.2.2 → 2.3.4

package/src/commands/setup.ts

@@ -1,5 +1,6 @@
 import * as p from '@clack/prompts';
 import chalk from 'chalk';
+import boxen from 'boxen';
 import open from 'open';
 import { Config } from '../utils/config.js';
 
@@ -13,11 +14,12 @@ interface ServiceDef {
   description: string;
   whyNeeded: string;
   url: string;
-  urlDescription: string;
+  steps: string[];  // Step-by-step instructions
   fields: Array<{
     key: string;
     label: string;
     placeholder: string;
+    hint?: string;
     validate?: (v: string) => string | undefined;
   }>;
 }
@@ -27,13 +29,19 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'anthropic',
     name: 'Anthropic (Claude)',
     description: 'Powers the AI coding agent',
-    whyNeeded: 'Without this, CodeBakers cannot generate any code. This is the brain of the system.',
+    whyNeeded: 'This is REQUIRED. Without it, CodeBakers cannot generate any code.',
     url: 'https://console.anthropic.com/settings/keys',
-    urlDescription: 'Create an API key',
+    steps: [
+      'Sign up or log in to Anthropic Console',
+      'Click "Create Key"',
+      'Give it a name like "CodeBakers"',
+      'Copy the key (starts with sk-ant-)',
+    ],
     fields: [{
       key: 'apiKey',
-      label: 'Anthropic API Key',
+      label: 'Paste your Anthropic API Key',
       placeholder: 'sk-ant-...',
+      hint: 'Starts with sk-ant-',
       validate: (v) => {
         if (!v) return 'API key is required';
         if (!v.startsWith('sk-ant-')) return 'Should start with sk-ant-';
@@ -45,13 +53,19 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'github',
     name: 'GitHub',
     description: 'Create repos and push code',
-    whyNeeded: 'Without this, CodeBakers cannot create repositories or save your code to GitHub.',
+    whyNeeded: 'Needed to create repositories and save your code. Skip if you\'ll manage git manually.',
     url: 'https://github.com/settings/tokens/new?scopes=repo,user&description=CodeBakers',
-    urlDescription: 'Create a token with "repo" and "user" scopes checked',
+    steps: [
+      'Log in to GitHub',
+      'The "repo" and "user" boxes should already be checked',
+      'Scroll down and click "Generate token"',
+      'Copy the token (starts with ghp_)',
+    ],
     fields: [{
       key: 'token',
-      label: 'GitHub Token',
-      placeholder: 'ghp_... or github_pat_...',
+      label: 'Paste your GitHub Token',
+      placeholder: 'ghp_...',
+      hint: 'Starts with ghp_ or github_pat_',
       validate: (v) => {
         if (!v) return 'Token is required';
         if (!v.startsWith('ghp_') && !v.startsWith('github_pat_')) {
@@ -65,38 +79,55 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'vercel',
     name: 'Vercel',
     description: 'Deploy your apps to production',
-    whyNeeded: 'Without this, CodeBakers cannot deploy your apps. You\'ll have to deploy manually.',
+    whyNeeded: 'Needed to deploy apps automatically. Skip if you\'ll deploy manually.',
     url: 'https://vercel.com/account/tokens',
-    urlDescription: 'Click "Create" to generate a new token',
+    steps: [
+      'Log in to Vercel',
+      'Click "Create" button',
+      'Name it "CodeBakers"',
+      'Click "Create Token"',
+      'Copy the token',
+    ],
     fields: [{
       key: 'token',
-      label: 'Vercel Token',
+      label: 'Paste your Vercel Token',
       placeholder: 'vercel_...',
+      hint: 'The token you just created',
     }],
   },
   supabase: {
     key: 'supabase',
     name: 'Supabase',
     description: 'Database and authentication',
-    whyNeeded: 'Without this, CodeBakers cannot create databases for your apps. You\'ll need to set up databases manually.',
+    whyNeeded: 'Needed for database features. Skip if you\'ll set up databases manually.',
     url: 'https://supabase.com/dashboard/account/tokens',
-    urlDescription: 'Generate a new access token',
+    steps: [
+      'Log in to Supabase',
+      'Click "Generate new token"',
+      'Name it "CodeBakers"',
+      'Copy the token',
+    ],
     fields: [{
       key: 'accessToken',
-      label: 'Supabase Access Token',
+      label: 'Paste your Supabase Token',
       placeholder: 'sbp_...',
+      hint: 'Starts with sbp_',
     }],
   },
   openai: {
     key: 'openai',
     name: 'OpenAI',
     description: 'GPT models, embeddings, DALL-E',
-    whyNeeded: 'Optional. Only needed if you want to use OpenAI models instead of or alongside Claude.',
+    whyNeeded: 'Optional. Only if you want to use OpenAI alongside Claude.',
     url: 'https://platform.openai.com/api-keys',
-    urlDescription: 'Create a new API key',
+    steps: [
+      'Log in to OpenAI',
+      'Click "Create new secret key"',
+      'Copy the key',
+    ],
     fields: [{
       key: 'apiKey',
-      label: 'OpenAI API Key',
+      label: 'Paste your OpenAI API Key',
       placeholder: 'sk-...',
     }],
   },
@@ -104,12 +135,15 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'stripe',
     name: 'Stripe',
     description: 'Payment processing',
-    whyNeeded: 'Optional. Only needed if your app accepts payments.',
+    whyNeeded: 'Optional. Only if your app accepts payments.',
     url: 'https://dashboard.stripe.com/apikeys',
-    urlDescription: 'Copy your Secret key (sk_live or sk_test)',
+    steps: [
+      'Log in to Stripe',
+      'Copy your Secret key (starts with sk_)',
+    ],
     fields: [{
       key: 'secretKey',
-      label: 'Stripe Secret Key',
+      label: 'Paste your Stripe Secret Key',
       placeholder: 'sk_live_... or sk_test_...',
     }],
   },
@@ -117,9 +151,13 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'twilio',
     name: 'Twilio',
     description: 'SMS, voice calls, WhatsApp',
-    whyNeeded: 'Optional. Only needed if your app sends SMS or makes calls.',
+    whyNeeded: 'Optional. Only if your app sends SMS or makes calls.',
     url: 'https://console.twilio.com/',
-    urlDescription: 'Find Account SID and Auth Token on the dashboard',
+    steps: [
+      'Log in to Twilio',
+      'Find Account SID on the dashboard',
+      'Find Auth Token on the dashboard',
+    ],
     fields: [
       {
         key: 'accountSid',
@@ -137,12 +175,16 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'resend',
     name: 'Resend',
     description: 'Email sending',
-    whyNeeded: 'Optional. Only needed if your app sends emails.',
+    whyNeeded: 'Optional. Only if your app sends emails.',
     url: 'https://resend.com/api-keys',
-    urlDescription: 'Create an API key',
+    steps: [
+      'Log in to Resend',
+      'Click "Create API Key"',
+      'Copy the key',
+    ],
     fields: [{
       key: 'apiKey',
-      label: 'Resend API Key',
+      label: 'Paste your Resend API Key',
       placeholder: 're_...',
     }],
   },
@@ -150,12 +192,16 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'vapi',
     name: 'VAPI',
     description: 'Voice AI agents',
-    whyNeeded: 'Optional. Only needed if you\'re building voice agents.',
+    whyNeeded: 'Optional. Only if you\'re building voice agents.',
     url: 'https://dashboard.vapi.ai/',
-    urlDescription: 'Copy your API key from the dashboard',
+    steps: [
+      'Log in to VAPI',
+      'Go to Settings > API Keys',
+      'Copy your API key',
+    ],
     fields: [{
       key: 'apiKey',
-      label: 'VAPI API Key',
+      label: 'Paste your VAPI API Key',
       placeholder: '...',
     }],
   },
@@ -163,12 +209,16 @@ const SERVICES: Record<string, ServiceDef> = {
     key: 'elevenlabs',
     name: 'ElevenLabs',
     description: 'AI voice generation',
-    whyNeeded: 'Optional. Only needed if you want AI-generated voices.',
+    whyNeeded: 'Optional. Only if you want AI-generated voices.',
     url: 'https://elevenlabs.io/app/settings/api-keys',
-    urlDescription: 'Create an API key',
+    steps: [
+      'Log in to ElevenLabs',
+      'Click "Create API Key"',
+      'Copy the key',
+    ],
     fields: [{
       key: 'apiKey',
-      label: 'ElevenLabs API Key',
+      label: 'Paste your ElevenLabs API Key',
       placeholder: '...',
     }],
   },
@@ -184,160 +234,207 @@ const OPTIONAL_SERVICES = ['openai', 'stripe', 'twilio', 'resend', 'vapi', 'elev
 export async function setupCommand(): Promise<void> {
   const config = new Config();
 
-  p.intro(chalk.bgCyan.black(' CodeBakers Setup '));
-
   // Check if already configured
-  if (config.isConfigured()) {
-    const action = await p.select({
-      message: 'CodeBakers is already configured. What do you want to do?',
-      options: [
-        { value: 'view', label: '👀 View connected services' },
-        { value: 'add', label: '➕ Add another service' },
-        { value: 'update', label: '🔄 Update a service' },
-        { value: 'reset', label: '🗑️  Reset all configuration' },
-        { value: 'back', label: '← Back' },
-      ],
-    });
-
-    if (p.isCancel(action) || action === 'back') {
-      return;
-    }
-
-    switch (action) {
-      case 'view':
-        showConnectedServices(config);
-        return;
-      case 'add':
-        await addService(config);
-        return;
-      case 'update':
-        await updateService(config);
-        return;
-      case 'reset':
-        await resetConfig(config);
-        return;
-    }
+  const hasAnthropic = !!config.getCredentials('anthropic')?.apiKey;
+  
+  if (hasAnthropic) {
+    // Already has minimum setup - show management menu
+    await showManagementMenu(config);
+    return;
   }
 
-  // First-time setup
-  console.log(chalk.cyan(`
-  Welcome to CodeBakers! Let's connect your services.
+  // =========================================================================
+  // FIRST TIME SETUP - Step by step with clear instructions
+  // =========================================================================
   
-  ${chalk.dim('Your credentials are stored locally in ~/.codebakers/')}
-  ${chalk.dim('and are never sent to our servers.')}
+  console.log(boxen(
+    chalk.bold.cyan('Welcome to CodeBakers Setup!\n\n') +
+    chalk.white('We need to connect a few services to get started.\n\n') +
+    chalk.dim('Your credentials are stored locally on your computer\n') +
+    chalk.dim('in ~/.codebakers/ and never sent to our servers.\n\n') +
+    chalk.yellow('Required: ') + chalk.white('Anthropic API key (for AI)\n') +
+    chalk.dim('Optional: GitHub, Vercel, Supabase (for full features)'),
+    { padding: 1, borderColor: 'cyan', borderStyle: 'round' }
+  ));
+
+  // STEP 1: Anthropic (REQUIRED)
+  console.log(chalk.bold.cyan('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
+  console.log(chalk.bold.cyan('  STEP 1 of 4: Anthropic API Key (Required)'));
+  console.log(chalk.bold.cyan('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n'));
   
-  ${chalk.bold('Core Services (Recommended):')}
-  ${chalk.dim('These power the main CodeBakers features.')}
+  console.log(chalk.white('  Anthropic (Claude)'));
+  console.log(chalk.dim('  Powers the AI coding agent\n'));
   
-`));
-
-  // Setup core services
-  let skippedCore: string[] = [];
+  // Check if they have an account
+  const hasAccount = await p.select({
+    message: 'Do you have an Anthropic account?',
+    options: [
+      { value: 'yes', label: '✓ Yes, I have an API key ready' },
+      { value: 'no', label: '✗ No, I need to sign up (free)' },
+    ],
+  });
   
-  for (const serviceKey of CORE_SERVICES) {
-    const service = SERVICES[serviceKey];
-    const connected = await connectService(config, service);
+  if (p.isCancel(hasAccount)) {
+    return;
+  }
+  
+  if (hasAccount === 'no') {
+    console.log(chalk.yellow('\n  No problem! Let\'s get you signed up.\n'));
+    console.log(chalk.white('  Steps:'));
+    console.log(chalk.cyan('  1. ') + 'Click "Sign Up" on the page that opens');
+    console.log(chalk.cyan('  2. ') + 'Create your account (email + password)');
+    console.log(chalk.cyan('  3. ') + 'Once logged in, go to Settings → API Keys');
+    console.log(chalk.cyan('  4. ') + 'Click "Create Key"');
+    console.log(chalk.cyan('  5. ') + 'Copy the key and paste it here\n');
+    
+    const openSignup = await p.confirm({
+      message: 'Open Anthropic signup page?',
+      initialValue: true,
+    });
     
-    if (!connected) {
-      skippedCore.push(service.name);
+    if (openSignup && !p.isCancel(openSignup)) {
+      await open('https://console.anthropic.com/');
+      console.log(chalk.dim('\n  Take your time - come back when you have your API key.\n'));
+    }
+  } else {
+    // They have an account, show regular instructions
+    console.log(chalk.bold.white('\n  Here\'s what to do:\n'));
+    console.log(chalk.cyan('  1. ') + 'Log in to Anthropic Console');
+    console.log(chalk.cyan('  2. ') + 'Go to Settings → API Keys');
+    console.log(chalk.cyan('  3. ') + 'Click "Create Key"');
+    console.log(chalk.cyan('  4. ') + 'Copy the key (starts with sk-ant-)');
+    console.log('');
+    
+    const openBrowser = await p.confirm({
+      message: 'Open Anthropic Console?',
+      initialValue: true,
+    });
+    
+    if (openBrowser && !p.isCancel(openBrowser)) {
+      await open('https://console.anthropic.com/settings/keys');
     }
   }
-
-  // Show warning if core services skipped
-  if (skippedCore.length > 0) {
-    console.log(chalk.yellow(`
-  ⚠️  You skipped: ${skippedCore.join(', ')}
   
-  Some features won't work without these services.
-  Run ${chalk.bold('codebakers setup')} anytime to add them.
-`));
-  }
-
-  // Ask about optional services
-  const addOptional = await p.confirm({
-    message: 'Add optional services? (Stripe, Twilio, Resend, etc.)',
-    initialValue: false,
+  // Now collect the API key
+  console.log('');
+  const apiKey = await p.text({
+    message: 'Paste your Anthropic API Key:',
+    placeholder: 'sk-ant-...',
+    validate: (v) => {
+      if (!v) return 'API key is required';
+      if (!v.startsWith('sk-ant-')) return 'Should start with sk-ant-';
+      return undefined;
+    },
   });
+  
+  if (p.isCancel(apiKey) || !apiKey) {
+    console.log(chalk.red('\n  ❌ Anthropic API key is required to use CodeBakers.'));
+    console.log(chalk.dim('  Run `codebakers setup` when you\'re ready to try again.\n'));
+    return;
+  }
+  
+  config.setCredentials('anthropic', { apiKey: apiKey as string });
+  console.log(chalk.green('\n  ✓ Anthropic connected successfully!\n'));
 
-  if (addOptional && !p.isCancel(addOptional)) {
-    const selected = await p.multiselect({
-      message: 'Select services to add:',
-      options: OPTIONAL_SERVICES.map(key => ({
-        value: key,
-        label: `${SERVICES[key].name} - ${SERVICES[key].description}`,
-      })),
-      required: false,
-    });
+  // STEP 2: GitHub (Optional but recommended)
+  console.log(chalk.bold.cyan('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
+  console.log(chalk.bold.cyan('  STEP 2 of 4: GitHub Token (Recommended)'));
+  console.log(chalk.bold.cyan('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n'));
+  
+  await connectServiceWithInstructions(config, SERVICES.github, false);
 
-    if (!p.isCancel(selected) && Array.isArray(selected)) {
-      for (const serviceKey of selected) {
-        await connectService(config, SERVICES[serviceKey as string]);
-      }
-    }
-  }
+  // STEP 3: Vercel (Optional but recommended)
+  console.log(chalk.bold.cyan('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
+  console.log(chalk.bold.cyan('  STEP 3 of 4: Vercel Token (Recommended)'));
+  console.log(chalk.bold.cyan('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n'));
+  
+  await connectServiceWithInstructions(config, SERVICES.vercel, false);
 
-  // Done
-  const connectedCount = [...CORE_SERVICES, ...OPTIONAL_SERVICES].filter(
-    key => config.getCredentials(key)
-  ).length;
+  // STEP 4: Supabase (Optional)
+  console.log(chalk.bold.cyan('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
+  console.log(chalk.bold.cyan('  STEP 4 of 4: Supabase Token (Optional)'));
+  console.log(chalk.bold.cyan('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n'));
+  
+  await connectServiceWithInstructions(config, SERVICES.supabase, false);
 
-  p.outro(chalk.green(`
-  ✓ Setup complete! ${connectedCount} services connected.
+  // =========================================================================
+  // SETUP COMPLETE - Show what to do next
+  // =========================================================================
+  
+  const connectedServices = CORE_SERVICES.filter(key => config.getCredentials(key)).map(key => SERVICES[key].name);
   
-  Run ${chalk.bold('codebakers')} to get started.
-`));
+  console.log(boxen(
+    chalk.bold.green('✓ Setup Complete!\n\n') +
+    chalk.white('Connected: ') + chalk.cyan(connectedServices.join(', ')) + '\n\n' +
+    chalk.bold.white('What to do next:\n\n') +
+    chalk.cyan('1. ') + chalk.white('Open a terminal and navigate to where you want to build:\n') +
+    chalk.dim('   cd C:\\dev\\my-project\n') +
+    chalk.dim('   (or any folder where you want to create your project)\n\n') +
+    chalk.cyan('2. ') + chalk.white('Run CodeBakers:\n') +
+    chalk.dim('   codebakers\n\n') +
+    chalk.bold.white('Or try these commands directly:\n\n') +
+    chalk.dim('   codebakers website    ') + chalk.white('Build a website by describing it\n') +
+    chalk.dim('   codebakers init       ') + chalk.white('Create a new project from scratch\n') +
+    chalk.dim('   codebakers help       ') + chalk.white('See all available commands'),
+    { padding: 1, borderColor: 'green', borderStyle: 'round' }
+  ));
 }
 
 // ============================================================================
-// CONNECT SERVICE
+// CONNECT SERVICE WITH DETAILED INSTRUCTIONS
 // ============================================================================
 
-async function connectService(config: Config, service: ServiceDef): Promise<boolean> {
-  console.log('');
-  console.log(chalk.bold(`  ${service.name}`));
-  console.log(chalk.dim(`  ${service.description}`));
-  console.log('');
+async function connectServiceWithInstructions(
+  config: Config, 
+  service: ServiceDef, 
+  required: boolean
+): Promise<boolean> {
+  
+  // Show what this service does
+  console.log(chalk.white(`  ${service.name}`));
+  console.log(chalk.dim(`  ${service.description}\n`));
+  
+  if (!required) {
+    console.log(chalk.yellow(`  ${service.whyNeeded}\n`));
+  }
 
-  // Ask to proceed or skip
+  // Ask if they want to connect or skip
   const action = await p.select({
     message: `Connect ${service.name}?`,
-    options: [
-      { value: 'connect', label: '✓ Yes, connect now' },
+    options: required ? [
+      { value: 'connect', label: '✓ Yes, let\'s connect it' },
+    ] : [
+      { value: 'connect', label: '✓ Yes, connect it' },
       { value: 'skip', label: '→ Skip for now' },
-      { value: 'why', label: '? Why do I need this?' },
     ],
   });
 
-  if (p.isCancel(action)) return false;
-
-  if (action === 'why') {
-    console.log(chalk.yellow(`\n  ${service.whyNeeded}\n`));
-    
-    const proceed = await p.confirm({
-      message: `Connect ${service.name}?`,
-      initialValue: true,
-    });
-    
-    if (!proceed || p.isCancel(proceed)) {
-      console.log(chalk.dim(`  Skipped ${service.name}`));
-      return false;
+  if (p.isCancel(action) || action === 'skip') {
+    if (!required) {
+      console.log(chalk.dim(`\n  Skipped ${service.name}. You can add it later with: codebakers setup\n`));
     }
-  } else if (action === 'skip') {
-    console.log(chalk.dim(`  Skipped ${service.name}`));
-    console.log(chalk.dim(`  ${service.whyNeeded}`));
     return false;
   }
 
-  // Open browser
+  // Show step-by-step instructions
+  console.log(chalk.bold.white('\n  Here\'s what to do:\n'));
+  service.steps.forEach((step, i) => {
+    console.log(chalk.cyan(`  ${i + 1}. `) + chalk.white(step));
+  });
+  console.log('');
+
+  // Ask to open browser
   const openBrowser = await p.confirm({
-    message: 'Open browser to get credentials?',
+    message: 'Open the website in your browser?',
     initialValue: true,
   });
 
   if (openBrowser && !p.isCancel(openBrowser)) {
-    console.log(chalk.dim(`\n  Opening: ${service.url}`));
-    console.log(chalk.dim(`  ${service.urlDescription}\n`));
+    console.log(chalk.dim(`\n  Opening: ${service.url}\n`));
     await open(service.url);
+    
+    // Give user time to get the key
+    console.log(chalk.dim('  Complete the steps above, then paste your key below.\n'));
   }
 
   // Collect credentials
@@ -345,7 +442,7 @@ async function connectService(config: Config, service: ServiceDef): Promise<bool
 
   for (const field of service.fields) {
     const value = await p.text({
-      message: `${field.label}:`,
+      message: field.label + (field.hint ? chalk.dim(` (${field.hint})`) : '') + ':',
       placeholder: field.placeholder,
       validate: field.validate,
     });
@@ -353,7 +450,11 @@ async function connectService(config: Config, service: ServiceDef): Promise<bool
     if (p.isCancel(value)) return false;
     
     if (!value) {
-      console.log(chalk.dim(`  Skipped ${service.name} (no ${field.label} provided)`));
+      if (required) {
+        console.log(chalk.red(`\n  ${field.label} is required.\n`));
+        return false;
+      }
+      console.log(chalk.dim(`\n  Skipped ${service.name}.\n`));
       return false;
     }
 
@@ -362,34 +463,61 @@ async function connectService(config: Config, service: ServiceDef): Promise<bool
 
   // Save credentials
   config.setCredentials(service.key, credentials);
-  console.log(chalk.green(`  ✓ ${service.name} connected!`));
+  console.log(chalk.green(`\n  ✓ ${service.name} connected successfully!\n`));
   
   return true;
 }
 
 // ============================================================================
-// VIEW CONNECTED SERVICES
+// MANAGEMENT MENU (for already-configured users)
 // ============================================================================
 
-function showConnectedServices(config: Config): void {
-  console.log(chalk.bold('\n  Connected Services:\n'));
-
+async function showManagementMenu(config: Config): Promise<void> {
+  // Show current status
+  console.log(chalk.bold.cyan('\n  CodeBakers Settings\n'));
+  
   const allServices = [...CORE_SERVICES, ...OPTIONAL_SERVICES];
-  let connectedCount = 0;
+  const connected = allServices.filter(key => config.getCredentials(key));
+  const notConnected = allServices.filter(key => !config.getCredentials(key));
+  
+  console.log(chalk.green('  Connected:'));
+  connected.forEach(key => {
+    console.log(chalk.green(`    ✓ ${SERVICES[key].name}`));
+  });
+  
+  if (notConnected.length > 0) {
+    console.log(chalk.dim('\n  Not connected:'));
+    notConnected.forEach(key => {
+      console.log(chalk.dim(`    ○ ${SERVICES[key].name}`));
+    });
+  }
+  console.log('');
 
-  for (const key of allServices) {
-    const service = SERVICES[key];
-    const creds = config.getCredentials(key);
-    
-    if (creds) {
-      console.log(chalk.green(`  ✓ ${service.name}`));
-      connectedCount++;
-    } else {
-      console.log(chalk.dim(`  ○ ${service.name} (not connected)`));
-    }
+  const action = await p.select({
+    message: 'What would you like to do?',
+    options: [
+      { value: 'add', label: '➕ Add a service' },
+      { value: 'update', label: '🔄 Update a service' },
+      { value: 'reset', label: '🗑️  Reset all settings' },
+      { value: 'back', label: '← Back' },
+    ],
+  });
+
+  if (p.isCancel(action) || action === 'back') {
+    return;
   }
 
-  console.log(chalk.dim(`\n  ${connectedCount}/${allServices.length} services connected\n`));
+  switch (action) {
+    case 'add':
+      await addService(config);
+      break;
+    case 'update':
+      await updateService(config);
+      break;
+    case 'reset':
+      await resetConfig(config);
+      break;
+  }
 }
 
 // ============================================================================
@@ -401,7 +529,7 @@ async function addService(config: Config): Promise<void> {
   const unconnected = allServices.filter(key => !config.getCredentials(key));
 
   if (unconnected.length === 0) {
-    p.log.info('All services are already connected!');
+    console.log(chalk.green('\n  All services are already connected!\n'));
     return;
   }
 
@@ -415,7 +543,7 @@ async function addService(config: Config): Promise<void> {
 
   if (p.isCancel(selected)) return;
 
-  await connectService(config, SERVICES[selected as string]);
+  await connectServiceWithInstructions(config, SERVICES[selected as string], false);
 }
 
 // ============================================================================
@@ -427,7 +555,7 @@ async function updateService(config: Config): Promise<void> {
   const connected = allServices.filter(key => config.getCredentials(key));
 
   if (connected.length === 0) {
-    p.log.info('No services connected yet. Run setup first.');
+    console.log(chalk.yellow('\n  No services connected yet.\n'));
     return;
   }
 
@@ -441,7 +569,7 @@ async function updateService(config: Config): Promise<void> {
 
   if (p.isCancel(selected)) return;
 
-  await connectService(config, SERVICES[selected as string]);
+  await connectServiceWithInstructions(config, SERVICES[selected as string], false);
 }
 
 // ============================================================================
@@ -449,12 +577,17 @@ async function updateService(config: Config): Promise<void> {
 // ============================================================================
 
 async function resetConfig(config: Config): Promise<void> {
+  console.log(chalk.yellow('\n  ⚠️  This will remove ALL your saved API keys.\n'));
+  
   const confirm = await p.confirm({
-    message: 'Are you sure? This will remove ALL credentials.',
+    message: 'Are you sure?',
     initialValue: false,
   });
 
-  if (!confirm || p.isCancel(confirm)) return;
+  if (!confirm || p.isCancel(confirm)) {
+    console.log(chalk.dim('\n  Cancelled.\n'));
+    return;
+  }
 
   // Clear all credentials
   const allServices = [...CORE_SERVICES, ...OPTIONAL_SERVICES];
@@ -462,5 +595,6 @@ async function resetConfig(config: Config): Promise<void> {
     config.setCredentials(key, null as any);
   }
 
-  p.log.success('Configuration reset. Run `codebakers setup` to reconfigure.');
+  console.log(chalk.green('\n  ✓ All settings reset.\n'));
+  console.log(chalk.dim('  Run `codebakers setup` to configure again.\n'));
 }