upfynai-code 2.3.0 → 2.4.1

package/server/cli-ui.js

@@ -1,15 +1,16 @@
 /**
  * Upfyn-Code CLI — Terminal UI & Animations
  *
- * Beautiful blue-themed terminal experience inspired by Claude Code
- * with rocket launch animation, ASCII branding, and styled panels.
+ * Beautiful blue-themed terminal experience inspired by Claude Code.
+ * Uses terminal-safe characters that render correctly on Windows CMD,
+ * PowerShell, Windows Terminal, Git Bash, macOS Terminal, and Linux.
  */
 
-// ─── ANSI escape codes ───
+// --- ANSI escape codes ---
 const ESC = '\x1b';
 const CSI = `${ESC}[`;
 
-// Blue theme palette
+// Blue theme palette (24-bit RGB — works in all modern terminals)
 const theme = {
   // Core blues
   blue:       `${CSI}38;2;59;130;246m`,   // #3B82F6
@@ -47,6 +48,62 @@ const theme = {
 const t = theme;
 const r = t.reset;
 
+// --- Terminal capability detection ---
+function detectTerminalSupport() {
+  // Windows Terminal, VS Code, modern terminals support full Unicode
+  if (process.env.WT_SESSION) return 'unicode';
+  if (process.env.TERM_PROGRAM === 'vscode') return 'unicode';
+  if (process.env.TERM_PROGRAM === 'iTerm.app') return 'unicode';
+  if (process.env.TERM_PROGRAM === 'Hyper') return 'unicode';
+  if (process.env.TERM === 'xterm-256color') return 'unicode';
+  if (process.env.TERM === 'xterm-kitty') return 'unicode';
+  if (process.env.COLORTERM === 'truecolor') return 'unicode';
+
+  // Windows without WT_SESSION — use ASCII
+  if (process.platform === 'win32') return 'ascii';
+
+  // Most modern Linux/Mac terminals support basic box-drawing
+  return 'unicode';
+}
+
+// Box-drawing character sets
+const CHARS_UNICODE = {
+  h: '\u2500',   // ─
+  v: '\u2502',   // │
+  tl: '\u250C',  // ┌
+  tr: '\u2510',  // ┐
+  bl: '\u2514',  // └
+  br: '\u2518',  // ┘
+  cross: '\u253C', // ┼
+  ltee: '\u251C',  // ├
+  rtee: '\u2524',  // ┤
+  ttee: '\u252C',  // ┬
+  btee: '\u2534',  // ┴
+  dot: '\u00B7',   // ·
+  bullet: '\u2022', // •
+  star: '*',
+};
+
+const CHARS_ASCII = {
+  h: '-',
+  v: '|',
+  tl: '+',
+  tr: '+',
+  bl: '+',
+  br: '+',
+  cross: '+',
+  ltee: '+',
+  rtee: '+',
+  ttee: '+',
+  btee: '+',
+  dot: '.',
+  bullet: '*',
+  star: '*',
+};
+
+const termLevel = detectTerminalSupport();
+const ch = termLevel === 'unicode' ? CHARS_UNICODE : CHARS_ASCII;
+
 // Helper — colorize
 const c = {
   blue:    (s) => `${t.blue}${s}${r}`,
@@ -71,7 +128,7 @@ const c = {
   bCyan:   (s) => `${t.bold}${t.cyan}${s}${r}`,
 };
 
-// ─── ASCII Art Logo ───
+// --- ASCII Art Logo ---
 const LOGO = [
   `${t.brightBlue}    __  __      ____                 ${t.skyBlue} ______          __     ${r}`,
   `${t.brightBlue}   / / / /___  / __/_  ______        ${t.skyBlue}/ ____/___  ____/ /__   ${r}`,
@@ -81,127 +138,150 @@ const LOGO = [
   `${t.brightBlue}     /_/       /____/                                          ${r}`,
 ];
 
-// ─── Rocket ASCII Art (16 frames for launch animation) ───
+// --- Rocket ASCII Art (safe characters only) ---
 const ROCKET_FRAMES = [
-  // Frame 0: Pre-launch — rocket on pad
+  // Frame 0: Pre-launch
   [
-    `         ${t.dimGray}│${r}`,
-    `        ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.brightBlue}║║${t.white}│${r}`,
-    `      ${t.white}╱${t.blue}║║║${t.white}╲${r}`,
-    `     ${t.white}╱${t.blue}═════${t.white}╲${r}`,
-    `    ${t.dimGray}▔▔▔▔▔▔▔▔▔${r}`,
+    `         ${t.dimGray}|${r}`,
+    `        ${t.white}/${t.brightBlue}^${t.white}\\${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.brightBlue}||${t.white}|${r}`,
+    `      ${t.white}/${t.blue}|||${t.white}\\${r}`,
+    `     ${t.white}/${t.blue}=====${t.white}\\${r}`,
+    `    ${t.dimGray}==========${r}`,
   ],
   // Frame 1: Ignition
   [
-    `         ${t.dimGray}│${r}`,
-    `        ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.brightBlue}║║${t.white}│${r}`,
-    `      ${t.white}╱${t.blue}║║║${t.white}╲${r}`,
-    `     ${t.white}╱${t.blue}═════${t.white}╲${r}`,
-    `      ${t.orange}▓${t.yellow}░${t.orange}▓${t.yellow}░${t.orange}▓${r}`,
+    `         ${t.dimGray}|${r}`,
+    `        ${t.white}/${t.brightBlue}^${t.white}\\${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.brightBlue}||${t.white}|${r}`,
+    `      ${t.white}/${t.blue}|||${t.white}\\${r}`,
+    `     ${t.white}/${t.blue}=====${t.white}\\${r}`,
+    `      ${t.orange}#${t.yellow}*${t.orange}#${t.yellow}*${t.orange}#${r}`,
   ],
   // Frame 2: Lift-off
   [
-    `        ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.brightBlue}║║${t.white}│${r}`,
-    `      ${t.white}╱${t.blue}║║║${t.white}╲${r}`,
-    `     ${t.white}╱${t.blue}═════${t.white}╲${r}`,
-    `      ${t.yellow}▓${t.orange}█${t.yellow}▓${t.orange}█${t.yellow}▓${r}`,
-    `       ${t.orange}░${t.yellow}▒${t.orange}░${r}`,
+    `        ${t.white}/${t.brightBlue}^${t.white}\\${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.brightBlue}||${t.white}|${r}`,
+    `      ${t.white}/${t.blue}|||${t.white}\\${r}`,
+    `     ${t.white}/${t.blue}=====${t.white}\\${r}`,
+    `      ${t.yellow}#${t.orange}@${t.yellow}#${t.orange}@${t.yellow}#${r}`,
+    `       ${t.orange}*${t.yellow}o${t.orange}*${r}`,
   ],
   // Frame 3: Ascending
   [
-    `        ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.brightBlue}║║${t.white}│${r}`,
-    `      ${t.white}╱${t.blue}║║║${t.white}╲${r}`,
-    `     ${t.white}╱${t.blue}═════${t.white}╲${r}`,
-    `      ${t.yellow}█${t.orange}▓${t.yellow}█${t.orange}▓${t.yellow}█${r}`,
-    `       ${t.orange}▓${t.yellow}█${t.orange}▓${r}`,
-    `        ${t.yellow}░${t.orange}░${r}`,
+    `        ${t.white}/${t.brightBlue}^${t.white}\\${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.brightBlue}||${t.white}|${r}`,
+    `      ${t.white}/${t.blue}|||${t.white}\\${r}`,
+    `     ${t.white}/${t.blue}=====${t.white}\\${r}`,
+    `      ${t.yellow}@${t.orange}#${t.yellow}@${t.orange}#${t.yellow}@${r}`,
+    `       ${t.orange}#${t.yellow}@${t.orange}#${r}`,
+    `        ${t.yellow}*${t.orange}*${r}`,
   ],
   // Frame 4: Full thrust
   [
-    `        ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `       ${t.white}│${t.brightBlue}║║${t.white}│${r}`,
-    `      ${t.white}╱${t.blue}║║║${t.white}╲${r}`,
-    `     ${t.white}╱${t.blue}═════${t.white}╲${r}`,
-    `     ${t.yellow}█${t.orange}▓${t.yellow}█${t.orange}▓${t.yellow}█${t.orange}▓${r}`,
-    `      ${t.orange}▓${t.yellow}█${t.orange}▓${t.yellow}█${r}`,
-    `       ${t.yellow}▒${t.orange}░${t.yellow}▒${r}`,
-    `        ${t.orange}░${t.yellow}░${r}`,
+    `        ${t.white}/${t.brightBlue}^${t.white}\\${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `       ${t.white}|${t.brightBlue}||${t.white}|${r}`,
+    `      ${t.white}/${t.blue}|||${t.white}\\${r}`,
+    `     ${t.white}/${t.blue}=====${t.white}\\${r}`,
+    `     ${t.yellow}@${t.orange}#${t.yellow}@${t.orange}#${t.yellow}@${t.orange}#${r}`,
+    `      ${t.orange}#${t.yellow}@${t.orange}#${t.yellow}@${r}`,
+    `       ${t.yellow}o${t.orange}*${t.yellow}o${r}`,
+    `        ${t.orange}*${t.yellow}*${r}`,
   ],
-  // Frame 5: Going up (smaller)
+  // Frame 5: Going up
   [
     ``,
-    `        ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`,
-    `       ${t.white}│${t.blue}║║${t.white}│${r}`,
-    `      ${t.white}╱${t.blue}║║║${t.white}╲${r}`,
-    `     ${t.white}╱${t.blue}═════${t.white}╲${r}`,
-    `     ${t.yellow}█${t.orange}▓${t.yellow}█${t.orange}▓${t.yellow}█${t.orange}▓${r}`,
-    `      ${t.orange}█${t.yellow}▓${t.orange}█${t.yellow}▓${r}`,
-    `       ${t.yellow}▒${t.orange}▒${t.yellow}▒${r}`,
-    `        ${t.orange}░${r}  ${t.dimGray}·${r}`,
+    `        ${t.white}/${t.brightBlue}^${t.white}\\${r}`,
+    `       ${t.white}|${t.blue}||${t.white}|${r}`,
+    `      ${t.white}/${t.blue}|||${t.white}\\${r}`,
+    `     ${t.white}/${t.blue}=====${t.white}\\${r}`,
+    `     ${t.yellow}@${t.orange}#${t.yellow}@${t.orange}#${t.yellow}@${t.orange}#${r}`,
+    `      ${t.orange}@${t.yellow}#${t.orange}@${t.yellow}#${r}`,
+    `       ${t.yellow}o${t.orange}o${t.yellow}o${r}`,
+    `        ${t.orange}*${r}  ${t.dimGray}.${r}`,
   ],
   // Frame 6: Higher
   [
     ``,
     ``,
-    `        ${t.skyBlue}╱${t.brightBlue}▲${t.skyBlue}╲${r}`,
-    `       ${t.skyBlue}│${t.blue}║║${t.skyBlue}│${r}`,
-    `      ${t.skyBlue}╱${t.blue}══${t.skyBlue}╲${r}`,
-    `      ${t.yellow}▓${t.orange}█${t.yellow}▓${t.orange}▓${r}`,
-    `       ${t.orange}▒${t.yellow}▒${r}`,
-    `        ${t.yellow}░${r}`,
-    `        ${t.dimGray}·${r}   ${t.dimGray}·${r}`,
+    `        ${t.skyBlue}/${t.brightBlue}^${t.skyBlue}\\${r}`,
+    `       ${t.skyBlue}|${t.blue}||${t.skyBlue}|${r}`,
+    `      ${t.skyBlue}/${t.blue}==${t.skyBlue}\\${r}`,
+    `      ${t.yellow}#${t.orange}@${t.yellow}#${t.orange}#${r}`,
+    `       ${t.orange}o${t.yellow}o${r}`,
+    `        ${t.yellow}*${r}`,
+    `        ${t.dimGray}.${r}   ${t.dimGray}.${r}`,
   ],
-  // Frame 7: Almost gone — tiny dot
+  // Frame 7: Almost gone
   [
     ``,
     ``,
     ``,
-    `        ${t.skyBlue}╱${t.brightBlue}▲${t.skyBlue}╲${r}`,
-    `       ${t.blue}══${r}`,
-    `       ${t.orange}▒${t.yellow}▒${r}`,
-    `        ${t.yellow}░${r}`,
+    `        ${t.skyBlue}/${t.brightBlue}^${t.skyBlue}\\${r}`,
+    `       ${t.blue}==${r}`,
+    `       ${t.orange}o${t.yellow}o${r}`,
+    `        ${t.yellow}*${r}`,
     ``,
-    `     ${t.dimGray}·${r}      ${t.dimGray}·${r}  ${t.dimGray}·${r}`,
+    `     ${t.dimGray}.${r}      ${t.dimGray}.${r}  ${t.dimGray}.${r}`,
   ],
   // Frame 8: Gone — just stars
   [
     ``,
     ``,
     ``,
-    `        ${t.brightBlue}✦${r}`,
+    `        ${t.brightBlue}*${r}`,
     ``,
-    `       ${t.dimGray}·${r}`,
+    `       ${t.dimGray}.${r}`,
     ``,
-    `  ${t.dimGray}·${r}          ${t.dimGray}·${r}`,
-    `     ${t.dimGray}·${r}    ${t.dimGray}·${r}      ${t.dimGray}·${r}`,
+    `  ${t.dimGray}.${r}          ${t.dimGray}.${r}`,
+    `     ${t.dimGray}.${r}    ${t.dimGray}.${r}      ${t.dimGray}.${r}`,
   ],
 ];
 
-// ─── Sleep utility ───
+// --- Sleep utility ---
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
-// ─── Clear screen ───
+// --- Clear screen ---
 const clearScreen = () => process.stdout.write(`${CSI}2J${CSI}H`);
 
-// ─── Move cursor ───
+// --- Move cursor ---
 const moveTo = (row, col) => process.stdout.write(`${CSI}${row};${col}H`);
 
-// ─── Hide/show cursor ───
+// --- Hide/show cursor ---
 const hideCursor = () => process.stdout.write(`${CSI}?25l`);
 const showCursor = () => process.stdout.write(`${CSI}?25h`);
 
+/**
+ * Strip ANSI codes for length calculation
+ */
+function stripAnsi(str) {
+  return str.replace(/\x1b\[[0-9;]*m/g, '');
+}
+
+/**
+ * Pad a string (with ANSI codes) to a visual width
+ */
+function padAnsi(str, width) {
+  const visible = stripAnsi(str).length;
+  const pad = Math.max(0, width - visible);
+  return str + ' '.repeat(pad);
+}
+
+/**
+ * Draw a horizontal line
+ */
+function hLine(width = 60) {
+  return c.dark(ch.h.repeat(width));
+}
+
 /**
  * Play the rocket launch animation
  */
@@ -242,7 +322,7 @@ async function playRocketAnimation() {
     else if (f <= 4) process.stdout.write(c.bright('Ascending...'));
     else if (f <= 6) process.stdout.write(c.sky('Reaching orbit...'));
     else if (f === 7) process.stdout.write(c.cyan('Entering space...'));
-    else process.stdout.write(c.bBright('Ready to code! ✦'));
+    else process.stdout.write(c.bBright('Ready to code! *'));
 
     await sleep(delays[f] || 200);
   }
@@ -252,82 +332,72 @@ async function playRocketAnimation() {
 }
 
 /**
- * Draw a horizontal line
- */
-function hLine(char = '─', width = 60) {
-  return c.dark(char.repeat(width));
-}
-
-/**
- * Draw a box with title
+ * Draw a box with title (terminal-safe characters)
  */
 function box(title, content, width = 58) {
   const lines = [];
   const inner = width - 4;
 
-  lines.push(`  ${t.dimGray}╭─${r} ${c.bBright(title)} ${t.dimGray}${'─'.repeat(Math.max(0, inner - title.length - 1))}╮${r}`);
+  lines.push(`  ${t.dimGray}${ch.tl}${ch.h}${r} ${c.bBright(title)} ${t.dimGray}${ch.h.repeat(Math.max(0, inner - title.length - 1))}${ch.tr}${r}`);
 
   for (const line of content) {
-    // Pad line — we can't easily measure ANSI length, so just append
-    lines.push(`  ${t.dimGray}│${r} ${line}`);
+    lines.push(`  ${t.dimGray}${ch.v}${r} ${line}`);
   }
 
-  lines.push(`  ${t.dimGray}╰${'─'.repeat(width - 2)}╯${r}`);
+  lines.push(`  ${t.dimGray}${ch.bl}${ch.h.repeat(width - 2)}${ch.br}${r}`);
   return lines;
 }
 
 /**
- * Show the main welcome screen (like Claude Code's startup)
+ * Show the main welcome screen (Claude Code-style layout)
  */
 function showWelcomeScreen(version, options = {}) {
   const cols = process.stdout.columns || 80;
   const { serverUrl, username, cwd, isConnected } = options;
+  const W = Math.min(cols - 4, 72); // content width
+  const leftW = 32;
+  const rightW = W - leftW - 3; // 3 for separator + padding
 
   clearScreen();
 
   const lines = [];
 
-  // ─── Top border with version ───
+  // --- Top border with version ---
   const verStr = `Upfyn-Code v${version}`;
-  const topLine = `${t.dimGray}── ${r}${c.bBright(verStr)}${t.dimGray} ${'─'.repeat(Math.max(0, 56 - verStr.length))}${r}`;
+  const topPad = Math.max(0, W - verStr.length - 4);
   lines.push('');
-  lines.push(`  ${topLine}`);
+  lines.push(`  ${t.dimGray}${ch.h}${ch.h} ${r}${c.bBright(verStr)}${t.dimGray} ${ch.h.repeat(topPad)}${r}`);
   lines.push('');
 
-  // ─── Left panel: Welcome + Mascot ───
-  // We use a side-by-side layout like Claude Code
+  // --- Build left and right panels ---
   const leftPanel = [];
   const rightPanel = [];
 
-  // Welcome message
+  // Left: Welcome + Rocket mascot
   leftPanel.push(c.bWhite('  Welcome back!'));
   leftPanel.push('');
-
-  // Rocket mascot (small static version)
-  leftPanel.push(`      ${t.dimGray}│${r}`);
-  leftPanel.push(`     ${t.white}╱${t.brightBlue}▲${t.white}╲${r}`);
-  leftPanel.push(`    ${t.white}│${t.blue}║${t.brightBlue}◈${t.blue}║${t.white}│${r}`);
-  leftPanel.push(`    ${t.white}│${t.blue}║║${t.white}│${r}`);
-  leftPanel.push(`   ${t.white}╱${t.blue}═══${t.white}╲${r}`);
-  leftPanel.push(`   ${t.cyan}▔▔▔▔▔${r}`);
+  leftPanel.push(`      ${t.dimGray}|${r}`);
+  leftPanel.push(`     ${t.white}/${t.brightBlue}^${t.white}\\${r}`);
+  leftPanel.push(`    ${t.white}|${t.blue}|${t.brightBlue}o${t.blue}|${t.white}|${r}`);
+  leftPanel.push(`    ${t.white}|${t.blue}||${t.white}|${r}`);
+  leftPanel.push(`   ${t.white}/${t.blue}===${t.white}\\${r}`);
+  leftPanel.push(`   ${t.cyan}~~~~~${r}`);
   leftPanel.push('');
-
-  // Info
   if (username) {
     leftPanel.push(`  ${c.gray('User:')} ${c.bright(username)}`);
   }
   leftPanel.push(`  ${c.gray('Path:')} ${c.dim(cwd || process.cwd())}`);
 
-  // Right panel: Tips + Recent Activity
+  // Right: Tips + Recent Activity
   rightPanel.push(`  ${c.bCyan('Tips for getting started')}`);
-  rightPanel.push(`  ${c.gray('Run')} ${c.bright('uc connect')} ${c.gray('to bridge to the web UI')}`);
-  rightPanel.push(`  ${c.gray('Run')} ${c.bright('uc start')} ${c.gray('to launch the local server')}`);
+  rightPanel.push(`  ${c.gray('Run')} ${c.bright('uc connect')} ${c.gray('to bridge to web UI')}`);
+  rightPanel.push(`  ${c.gray('Run')} ${c.bright('uc start')} ${c.gray('to launch local server')}`);
   rightPanel.push(`  ${c.gray('Run')} ${c.bright('uc status')} ${c.gray('to see configuration')}`);
   rightPanel.push(`  ${c.gray('Run')} ${c.bright('uc help')} ${c.gray('for all commands')}`);
   rightPanel.push('');
   rightPanel.push(`  ${c.bCyan('Recent activity')}`);
   if (isConnected) {
-    rightPanel.push(`  ${c.green('●')} Connected to ${c.bright(serverUrl || 'server')}`);
+    rightPanel.push(`  ${c.green('*')} Connected to ${c.bright(serverUrl || 'server')}`);
   } else {
     rightPanel.push(`  ${c.dim('No active connection')}`);
   }
@@ -337,40 +407,38 @@ function showWelcomeScreen(version, options = {}) {
   }
 
   // Merge panels side by side
-  const leftWidth = 30;
   const maxRows = Math.max(leftPanel.length, rightPanel.length);
 
   for (let i = 0; i < maxRows; i++) {
-    const left = leftPanel[i] || '';
+    const left = padAnsi(leftPanel[i] || '', leftW);
     const right = rightPanel[i] || '';
-
-    // Separator between panels
-    if (i === 0) {
-      lines.push(`${left}${''.padEnd(Math.max(0, leftWidth - stripAnsi(left).length))}${t.dimGray}│${r} ${right}`);
-    } else {
-      lines.push(`${left}${''.padEnd(Math.max(0, leftWidth - stripAnsi(left).length))}${t.dimGray}│${r} ${right}`);
-    }
+    lines.push(`${left}${t.dimGray}${ch.v}${r} ${right}`);
   }
 
   lines.push('');
 
-  // ─── Bottom border ───
-  lines.push(`  ${t.dimGray}${'─'.repeat(58)}${r}`);
+  // --- Bottom border ---
+  lines.push(`  ${t.dimGray}${ch.h.repeat(W)}${r}`);
   lines.push('');
 
-  // ─── Status bar ───
+  // --- Status bar ---
   const statusItems = [];
   if (isConnected) {
-    statusItems.push(`${t.green}● Connected${r}`);
+    statusItems.push(`${t.green}* Connected${r}`);
   } else {
-    statusItems.push(`${t.dimGray}○ Not connected${r}`);
+    statusItems.push(`${t.dimGray}o Not connected${r}`);
   }
   statusItems.push(`${t.gray}v${version}${r}`);
 
-  lines.push(`  ${statusItems.join(`  ${t.dimGray}·${r}  `)}`);
+  lines.push(`  ${statusItems.join(`  ${t.dimGray}${ch.dot}${r}  `)}`);
+  lines.push('');
+
+  // --- Input prompt area (between two lines like Claude Code) ---
+  lines.push(`  ${t.dimGray}${ch.h.repeat(W)}${r}`);
+  lines.push(`  ${t.brightBlue}>${r} ${c.dim('Type a command or use /upfynai-connect ...')}`);
+  lines.push(`  ${t.dimGray}${ch.h.repeat(W)}${r}`);
   lines.push('');
 
-  // Print all at once
   process.stdout.write(lines.join('\n') + '\n');
 }
 
@@ -378,17 +446,19 @@ function showWelcomeScreen(version, options = {}) {
  * Show connection success banner
  */
 function showConnectionBanner(username, serverUrl) {
+  const W = 50;
   const lines = [];
+  const bLine = (content) => `  ${t.green}${ch.v}${r}${padAnsi(content, W)}${t.green}${ch.v}${r}`;
   lines.push('');
-  lines.push(`  ${t.green}╭──────────────────────────────────────────────╮${r}`);
-  lines.push(`  ${t.green}│${r}  ${c.green('✓')} ${c.bWhite('Connected successfully!')}                    ${t.green}│${r}`);
-  lines.push(`  ${t.green}│${r}                                              ${t.green}│${r}`);
-  lines.push(`  ${t.green}│${r}  ${c.gray('User:')}    ${c.bright(username || 'Unknown')}${' '.repeat(Math.max(0, 30 - (username || 'Unknown').length))}${t.green}│${r}`);
-  lines.push(`  ${t.green}│${r}  ${c.gray('Server:')}  ${c.cyan(serverUrl || 'Unknown')}${' '.repeat(Math.max(0, 28 - (serverUrl || 'Unknown').length))}${t.green}│${r}`);
-  lines.push(`  ${t.green}│${r}                                              ${t.green}│${r}`);
-  lines.push(`  ${t.green}│${r}  ${c.dim('Your machine is bridged to the web UI.')}      ${t.green}│${r}`);
-  lines.push(`  ${t.green}│${r}  ${c.dim('Press Ctrl+C to disconnect.')}                 ${t.green}│${r}`);
-  lines.push(`  ${t.green}╰──────────────────────────────────────────────╯${r}`);
+  lines.push(`  ${t.green}${ch.tl}${ch.h.repeat(W)}${ch.tr}${r}`);
+  lines.push(bLine(`  ${c.green('OK')} ${c.bWhite('Connected successfully!')}`));
+  lines.push(bLine(''));
+  lines.push(bLine(`  ${c.gray('User:')}    ${c.bright(username || 'Unknown')}`));
+  lines.push(bLine(`  ${c.gray('Server:')}  ${c.cyan(serverUrl || 'Unknown')}`));
+  lines.push(bLine(''));
+  lines.push(bLine(`  ${c.dim('Your machine is bridged to the web UI.')}`));
+  lines.push(bLine(`  ${c.dim('Press Ctrl+C to disconnect.')}`));
+  lines.push(`  ${t.green}${ch.bl}${ch.h.repeat(W)}${ch.br}${r}`);
   lines.push('');
 
   process.stdout.write(lines.join('\n') + '\n');
@@ -398,7 +468,7 @@ function showConnectionBanner(username, serverUrl) {
  * Show a spinner with message
  */
 function createSpinner(message) {
-  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  const frames = ['/', '-', '\\', '|'];
   let i = 0;
   let interval;
 
@@ -409,16 +479,16 @@ function createSpinner(message) {
         const frame = frames[i % frames.length];
         process.stdout.write(`\r  ${t.brightBlue}${frame}${r} ${c.gray(message)}`);
         i++;
-      }, 80);
+      }, 100);
     },
     stop(finalMessage) {
       clearInterval(interval);
-      process.stdout.write(`\r  ${c.green('✓')} ${c.white(finalMessage || message)}${''.padEnd(20)}\n`);
+      process.stdout.write(`\r  ${c.green('OK')} ${c.white(finalMessage || message)}${''.padEnd(20)}\n`);
       showCursor();
     },
     fail(finalMessage) {
       clearInterval(interval);
-      process.stdout.write(`\r  ${c.red('✗')} ${c.red(finalMessage || message)}${''.padEnd(20)}\n`);
+      process.stdout.write(`\r  ${c.red('FAIL')} ${c.red(finalMessage || message)}${''.padEnd(20)}\n`);
       showCursor();
     }
   };
@@ -428,14 +498,17 @@ function createSpinner(message) {
  * Show styled help
  */
 function showStyledHelp(version) {
+  const W = 60;
   const lines = [];
 
   lines.push('');
-  // Header
-  lines.push(`  ${t.brightBlue}╔══════════════════════════════════════════════════════════╗${r}`);
-  lines.push(`  ${t.brightBlue}║${r}    ${c.bBright('Upfyn-Code')} ${c.dim('—')} ${c.gray('by Thinqmesh Technologies')}            ${t.brightBlue}║${r}`);
-  lines.push(`  ${t.brightBlue}║${r}    ${c.dim('Visual AI Coding Interface with Upfyn-Canvas')}        ${t.brightBlue}║${r}`);
-  lines.push(`  ${t.brightBlue}╚══════════════════════════════════════════════════════════╝${r}`);
+  // Header box — build each line to exactly W visible chars inside the borders
+  const hdrLine1 = `    ${c.bBright('Upfyn-Code')} ${c.dim('--')} ${c.gray('by Thinqmesh Technologies')}`;
+  const hdrLine2 = `    ${c.dim('Visual AI Coding Interface with Upfyn-Canvas')}`;
+  lines.push(`  ${t.brightBlue}${ch.tl}${ch.h.repeat(W)}${ch.tr}${r}`);
+  lines.push(`  ${t.brightBlue}${ch.v}${r}${padAnsi(hdrLine1, W)}${t.brightBlue}${ch.v}${r}`);
+  lines.push(`  ${t.brightBlue}${ch.v}${r}${padAnsi(hdrLine2, W)}${t.brightBlue}${ch.v}${r}`);
+  lines.push(`  ${t.brightBlue}${ch.bl}${ch.h.repeat(W)}${ch.br}${r}`);
   lines.push('');
 
   // Usage
@@ -446,8 +519,10 @@ function showStyledHelp(version) {
   // Commands
   lines.push(`  ${c.bBright('Commands:')}`);
   const cmds = [
-    ['start',              'Start the local server (default)'],
+    ['(default)',            'Launch Claude Code with Upfyn branding'],
+    ['start',              'Start the local server only'],
     ['connect',            'Connect local machine to hosted server'],
+    ['config',             'View/set configuration (API key, etc.)'],
     ['status',             'Show configuration and data locations'],
     ['install-commands',   'Install /upfynai-* slash commands'],
     ['uninstall-commands', 'Remove /upfynai-* slash commands'],
@@ -461,7 +536,7 @@ function showStyledHelp(version) {
   lines.push('');
 
   // Slash Commands
-  lines.push(`  ${c.bBright('Slash Commands')} ${c.dim('(inside your AI CLI):')}`);
+  lines.push(`  ${c.bBright('Slash Commands')} ${c.dim('(inside Claude Code CLI):')}`);
   const slashCmds = [
     ['/upfynai',            'Start the web UI server'],
     ['/upfynai-connect',    'Connect CLI session to web UI'],
@@ -480,6 +555,7 @@ function showStyledHelp(version) {
     ['-p, --port <port>',         'Set server port (default: 3001)'],
     ['--server <url>',            'Server URL for connect'],
     ['--key <token>',             'Relay token for connect'],
+    ['--api-key <key>',           'Set Anthropic API key'],
     ['--database-path <path>',    'Custom database location'],
     ['-h, --help',                'Show help'],
     ['-v, --version',             'Show version'],
@@ -491,9 +567,10 @@ function showStyledHelp(version) {
 
   // Examples
   lines.push(`  ${c.bBright('Examples:')}`);
-  lines.push(`    ${c.dim('$')} ${c.bright('uc')}                              ${c.dim('# Start with defaults')}`);
-  lines.push(`    ${c.dim('$')} ${c.bright('uc --port 8080')}                  ${c.dim('# Start on port 8080')}`);
+  lines.push(`    ${c.dim('$')} ${c.bright('uc')}                              ${c.dim('# Launch Claude Code')}`);
   lines.push(`    ${c.dim('$')} ${c.bright('uc connect --key upfyn_xxx')}      ${c.dim('# Bridge to hosted server')}`);
+  lines.push(`    ${c.dim('$')} ${c.bright('uc config --api-key sk-ant-xxx')}  ${c.dim('# Save Anthropic API key')}`);
+  lines.push(`    ${c.dim('$')} ${c.bright('uc start --port 8080')}            ${c.dim('# Start on port 8080')}`);
   lines.push(`    ${c.dim('$')} ${c.bright('uc status')}                       ${c.dim('# Show configuration')}`);
   lines.push('');
 
@@ -512,8 +589,8 @@ function showStyledStatus(info) {
   const lines = [];
 
   lines.push('');
-  lines.push(`  ${c.bBright('Upfyn-Code')} ${c.dim('— Status')}`);
-  lines.push(`  ${c.dark('═'.repeat(50))}`);
+  lines.push(`  ${c.bBright('Upfyn-Code')} ${c.dim('-- Status')}`);
+  lines.push(`  ${c.dark('='.repeat(50))}`);
   lines.push('');
 
   // Version
@@ -524,9 +601,9 @@ function showStyledStatus(info) {
   lines.push(`  ${c.bright('Install')}     ${c.dim(info.installDir)}`);
   lines.push(`  ${c.bright('Database')}    ${c.dim(info.dbPath)}`);
   if (info.dbExists) {
-    lines.push(`              ${c.green('✓')} ${c.gray(`Exists (${info.dbSize})`)}`);
+    lines.push(`              ${c.green('OK')} ${c.gray(`Exists (${info.dbSize})`)}`);
   } else {
-    lines.push(`              ${c.yellow('○')} ${c.gray('Not created yet')}`);
+    lines.push(`              ${c.yellow('--')} ${c.gray('Not created yet')}`);
   }
   lines.push('');
 
@@ -535,15 +612,18 @@ function showStyledStatus(info) {
   lines.push(`    ${c.gray('PORT')}          ${c.cyan(info.port)} ${info.portDefault ? c.dim('(default)') : ''}`);
   lines.push(`    ${c.gray('DATABASE')}      ${c.dim(info.dbPath)}`);
   lines.push(`    ${c.gray('CLI')}           ${c.dim(info.claudeCli || 'claude (default)')}`);
+  if (info.apiKey) {
+    lines.push(`    ${c.gray('API KEY')}       ${c.green('Set')} ${c.dim('(sk-ant-...' + info.apiKey.slice(-4) + ')')}`);
+  }
   lines.push('');
 
   // Bottom
-  lines.push(`  ${c.dark('═'.repeat(50))}`);
+  lines.push(`  ${c.dark('='.repeat(50))}`);
   lines.push('');
   lines.push(`  ${c.bCyan('Tips:')}`);
-  lines.push(`    ${c.dim('>')} Use ${c.bright('uc --port 8080')} to run on a custom port`);
+  lines.push(`    ${c.dim('>')} Use ${c.bright('uc')} to launch Claude Code with Upfyn branding`);
   lines.push(`    ${c.dim('>')} Use ${c.bright('uc connect --key upfyn_xxx')} to bridge to web UI`);
-  lines.push(`    ${c.dim('>')} Access the UI at ${c.cyan(`http://localhost:${info.port}`)}`);
+  lines.push(`    ${c.dim('>')} Use ${c.bright('uc config --api-key sk-ant-xxx')} to save your API key`);
   lines.push('');
 
   process.stdout.write(lines.join('\n') + '\n');
@@ -558,11 +638,11 @@ function showServerBanner(port, version) {
   lines.push('');
   for (const line of LOGO) lines.push(`  ${line}`);
   lines.push('');
-  lines.push(`  ${c.dim('v' + version)}  ${c.dim('—')}  ${c.gray('by Thinqmesh Technologies')}`);
+  lines.push(`  ${c.dim('v' + version)}  ${c.dim('--')}  ${c.gray('by Thinqmesh Technologies')}`);
   lines.push('');
-  lines.push(`  ${c.dark('─'.repeat(52))}`);
+  lines.push(`  ${c.dark(ch.h.repeat(52))}`);
   lines.push('');
-  lines.push(`  ${c.green('●')} ${c.bWhite('Server running')} ${c.gray('on')} ${c.bCyan(`http://localhost:${port}`)}`);
+  lines.push(`  ${c.green('*')} ${c.bWhite('Server running')} ${c.gray('on')} ${c.bCyan(`http://localhost:${port}`)}`);
   lines.push('');
   lines.push(`  ${c.dim('Press Ctrl+C to stop.')}`);
   lines.push('');
@@ -583,9 +663,9 @@ async function showConnectStartup(serverUrl, machine, user, version) {
   lines.push('');
   for (const line of LOGO) lines.push(`  ${line}`);
   lines.push('');
-  lines.push(`  ${c.dim('v' + version)}  ${c.dim('—')}  ${c.gray('Relay Client')}`);
+  lines.push(`  ${c.dim('v' + version)}  ${c.dim('--')}  ${c.gray('Relay Client')}`);
   lines.push('');
-  lines.push(`  ${c.dark('─'.repeat(52))}`);
+  lines.push(`  ${c.dark(ch.h.repeat(52))}`);
   lines.push('');
   lines.push(`  ${c.gray('Server:')}   ${c.cyan(serverUrl)}`);
   lines.push(`  ${c.gray('Machine:')}  ${c.dim(machine)}`);
@@ -595,6 +675,79 @@ async function showConnectStartup(serverUrl, machine, user, version) {
   process.stdout.write(lines.join('\n') + '\n');
 }
 
+/**
+ * Show interactive launch screen (before spawning Claude Code)
+ */
+function showLaunchScreen(version, claudeBin, options = {}) {
+  const cols = process.stdout.columns || 80;
+  const W = Math.min(cols - 4, 72);
+
+  const lines = [];
+
+  lines.push('');
+  for (const line of LOGO) lines.push(`  ${line}`);
+  lines.push('');
+  lines.push(`  ${c.dim('v' + version)}  ${c.dim('--')}  ${c.gray('by Thinqmesh Technologies')}`);
+  lines.push('');
+  lines.push(`  ${c.dark(ch.h.repeat(W))}`);
+  lines.push('');
+
+  if (claudeBin) {
+    lines.push(`  ${c.green('*')} ${c.bWhite('Claude Code detected:')} ${c.dim(claudeBin)}`);
+  }
+  if (options.relayStatus) {
+    lines.push(`  ${c.green('*')} ${c.bWhite('Relay:')} ${c.dim(options.relayStatus)}`);
+  }
+  if (options.apiKey) {
+    lines.push(`  ${c.green('*')} ${c.bWhite('API Key:')} ${c.dim('Configured')}`);
+  }
+  lines.push('');
+
+  if (claudeBin) {
+    lines.push(`  ${c.dim('Launching Claude Code...')}`);
+    lines.push(`  ${c.dim('Slash commands available: /upfynai-connect, /upfynai-status')}`);
+  } else {
+    lines.push(`  ${c.yellow('!')} ${c.white('Claude Code CLI not found on PATH')}`);
+    lines.push('');
+    lines.push(`  ${c.gray('Install Claude Code:')}`);
+    lines.push(`    ${c.bright('npm install -g @anthropic-ai/claude-code')}`);
+    lines.push('');
+    lines.push(`  ${c.gray('Or start the server instead:')}`);
+    lines.push(`    ${c.bright('uc start')}`);
+  }
+  lines.push('');
+  lines.push(`  ${c.dark(ch.h.repeat(W))}`);
+  lines.push('');
+
+  process.stdout.write(lines.join('\n') + '\n');
+}
+
+/**
+ * Show config display
+ */
+function showConfig(config) {
+  const lines = [];
+  lines.push('');
+  lines.push(`  ${c.bBright('Upfyn-Code')} ${c.dim('-- Configuration')}`);
+  lines.push(`  ${c.dark('='.repeat(50))}`);
+  lines.push('');
+
+  lines.push(`  ${c.gray('Server')}        ${config.server ? c.cyan(config.server) : c.dim('(not set)')}`);
+  lines.push(`  ${c.gray('Relay Key')}     ${config.relayKey ? c.green('Set') + ' ' + c.dim('(' + config.relayKey.slice(0, 10) + '...)') : c.dim('(not set)')}`);
+  lines.push(`  ${c.gray('API Key')}       ${config.anthropicApiKey ? c.green('Set') + ' ' + c.dim('(sk-ant-...' + config.anthropicApiKey.slice(-4) + ')') : c.dim('(not set)')}`);
+  lines.push('');
+  lines.push(`  ${c.gray('Config file:')}  ${c.dim(config._path || '~/.upfynai/config.json')}`);
+  lines.push('');
+
+  lines.push(`  ${c.bCyan('Set values:')}`);
+  lines.push(`    ${c.dim('$')} ${c.bright('uc config --api-key sk-ant-xxx')}    ${c.dim('# Save Anthropic API key')}`);
+  lines.push(`    ${c.dim('$')} ${c.bright('uc config --clear-api-key')}         ${c.dim('# Remove API key')}`);
+  lines.push(`    ${c.dim('$')} ${c.bright('uc connect --server <url> --key <token>')}`);
+  lines.push('');
+
+  process.stdout.write(lines.join('\n') + '\n');
+}
+
 /**
  * Log a relay event with icon
  */
@@ -604,17 +757,12 @@ function logRelayEvent(icon, message, color = 'gray') {
   console.log(`  ${c.dim(timestamp)}  ${icon}  ${colorFn(message)}`);
 }
 
-/**
- * Strip ANSI codes for length calculation
- */
-function stripAnsi(str) {
-  return str.replace(/\x1b\[[0-9;]*m/g, '');
-}
-
 export {
   theme,
   c,
+  ch,
   LOGO,
+  detectTerminalSupport,
   playRocketAnimation,
   showWelcomeScreen,
   showConnectionBanner,
@@ -622,6 +770,8 @@ export {
   showStyledStatus,
   showServerBanner,
   showConnectStartup,
+  showLaunchScreen,
+  showConfig,
   logRelayEvent,
   createSpinner,
   hideCursor,
@@ -631,4 +781,5 @@ export {
   hLine,
   box,
   stripAnsi,
+  padAnsi,
 };