@openagents-org/agent-launcher 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openagents-org/agent-launcher",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "OpenAgents Launcher — install, configure, and run AI coding agents from your terminal",
   "main": "src/index.js",
   "bin": {

package/src/tui.js

@@ -1,5 +1,5 @@
 /**
- * Interactive TUI dashboard for OpenAgents — `agent-connector` or `agent-connector tui`
+ * Interactive TUI dashboard for OpenAgents — `openagents` or `openagents tui`
  *
  * Ported from Python Textual TUI (cli_tui.py). Uses blessed for terminal UI.
  */
@@ -49,14 +49,12 @@ function loadAgentRows(connector) {
 function loadCatalog(connector) {
   const registry = connector.getRegistry();
   const entries = registry.list();
-  // Check installed status
   return entries.map(e => {
     let installed = false;
     try {
       const { whichBinary } = require('./paths');
       installed = !!whichBinary(e.install?.binary || e.name);
     } catch {}
-    // Also check installed_agents.json marker
     if (!installed) {
       try {
         const markerFile = path.join(connector.config?.configDir || '', 'installed_agents.json');
@@ -75,18 +73,14 @@ function loadCatalog(connector) {
   });
 }
 
-const STATE_COLORS = {
-  online: 'green', running: 'green',
-  starting: 'yellow', reconnecting: 'yellow',
-  stopped: 'white', error: 'red',
-  'not configured': 'white',
-};
-
-const STATE_SYMBOLS = {
-  online: '●', running: '●',
-  starting: '◐', reconnecting: '◐',
-  stopped: '○', error: '✗',
-  'not configured': '○',
+const STATE_STYLES = {
+  online:   { sym: '●', color: 'green',  label: 'running' },
+  running:  { sym: '●', color: 'green',  label: 'running' },
+  starting: { sym: '◐', color: 'yellow', label: 'starting' },
+  reconnecting: { sym: '◐', color: 'yellow', label: 'reconnecting' },
+  stopped:  { sym: '○', color: 'gray',   label: 'stopped' },
+  error:    { sym: '✗', color: 'red',    label: 'error' },
+  'not configured': { sym: '○', color: 'gray', label: 'not configured' },
 };
 
 // ── Main TUI ─────────────────────────────────────────────────────────────
@@ -99,78 +93,93 @@ function createTUI() {
   });
 
   const connector = getConnector();
+  let pkg;
+  try { pkg = require('../package.json'); } catch { pkg = { version: '?' }; }
 
   // ── Layout ──
 
-  // Header
+  // Header bar
   const header = blessed.box({
-    top: 0, left: 0, width: '100%', height: 3,
-    content: '{bold}  OpenAgents{/bold}  {gray-fg}Interactive Setup{/gray-fg}',
+    top: 0, left: 0, width: '100%', height: 1,
     tags: true,
-    style: { bg: 'blue', fg: 'white' },
+    style: { bg: 'blue', fg: 'white', bold: true },
   });
 
-  // Agent table
-  const agentBox = blessed.box({
-    top: 3, left: 0, width: '100%', height: '60%',
-    border: { type: 'line' },
-    label: ' Agents ',
+  // Title area below header
+  const titleBox = blessed.box({
+    top: 1, left: 0, width: '100%', height: 3,
     tags: true,
-    scrollable: true,
-    keys: true,
-    vi: true,
+    content: `\n  {bold}OpenAgents{/bold} {gray-fg}v${pkg.version}{/gray-fg}    {gray-fg}Local AI Agent Manager{/gray-fg}`,
   });
 
-  const agentList = blessed.list({
-    parent: agentBox,
-    top: 0, left: 0, width: '100%-2', height: '100%-2',
+  // Column headers for agent table
+  const colHeaders = blessed.box({
+    top: 4, left: 0, width: '100%', height: 1,
     tags: true,
-    keys: true,
-    vi: true,
-    mouse: true,
+    style: { bg: 'white', fg: 'black' },
+    content: `  ${'NAME'.padEnd(22)} ${'TYPE'.padEnd(14)} ${'STATUS'.padEnd(14)} WORKSPACE`,
+  });
+
+  // Agent list
+  const agentList = blessed.list({
+    top: 5, left: 0, width: '100%', height: '50%-2',
+    tags: true, keys: true, vi: true, mouse: true,
+    border: { type: 'line', left: false, right: false, top: false },
     style: {
-      selected: { bg: 'blue', fg: 'white' },
+      selected: { bg: 'blue', fg: 'white', bold: true },
       item: { fg: 'white' },
+      border: { fg: 'gray' },
     },
   });
 
+  // Separator
+  const separator = blessed.line({
+    top: '50%+3', left: 0, width: '100%',
+    orientation: 'horizontal',
+    style: { fg: 'gray' },
+  });
+
   // Activity log
-  const logBox = blessed.box({
-    top: '60%+3', left: 0, width: '100%', height: '40%-6',
-    border: { type: 'line' },
-    label: ' Activity Log ',
+  const logLabel = blessed.box({
+    top: '50%+4', left: 0, width: '100%', height: 1,
     tags: true,
-    scrollable: true,
+    content: '  {bold}Activity{/bold}',
+    style: { fg: 'white' },
   });
 
   const logContent = blessed.log({
-    parent: logBox,
-    top: 0, left: 0, width: '100%-2', height: '100%-2',
+    top: '50%+5', left: 0, width: '100%', height: '50%-8',
     tags: true,
     scrollable: true,
     scrollOnInput: true,
+    padding: { left: 2 },
+    style: { fg: 'gray' },
   });
 
-  // Footer with keybindings
+  // Footer
   const footer = blessed.box({
-    bottom: 0, left: 0, width: '100%', height: 3,
+    bottom: 0, left: 0, width: '100%', height: 1,
     tags: true,
     style: { bg: 'blue', fg: 'white' },
   });
 
   screen.append(header);
-  screen.append(agentBox);
-  screen.append(logBox);
+  screen.append(titleBox);
+  screen.append(colHeaders);
+  screen.append(agentList);
+  screen.append(separator);
+  screen.append(logLabel);
+  screen.append(logContent);
   screen.append(footer);
 
   // ── State ──
 
   let agentRows = [];
-  let currentView = 'main'; // main | install | configure
+  let currentView = 'main';
 
   function log(msg) {
-    const ts = new Date().toLocaleTimeString();
-    logContent.log(`{gray-fg}${ts}{/gray-fg} ${msg}`);
+    const ts = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    logContent.log(`{gray-fg}${ts}{/gray-fg}  ${msg}`);
     screen.render();
   }
 
@@ -182,27 +191,27 @@ function createTUI() {
     } catch { agentRows = []; }
 
     const items = agentRows.length ? agentRows.map(r => {
-      const sym = STATE_SYMBOLS[r.state] || '?';
-      const color = STATE_COLORS[r.state] || 'white';
-      const ws = r.workspace ? `  ${r.workspace}` : '';
-      return `  {${color}-fg}${sym}{/${color}-fg} ${r.name.padEnd(20)} ${r.type.padEnd(12)} {${color}-fg}${r.state.padEnd(12)}{/${color}-fg}${ws}`;
-    }) : ['  {gray-fg}No agents configured — press {bold}i{/bold} to install one{/gray-fg}'];
+      const st = STATE_STYLES[r.state] || STATE_STYLES.stopped;
+      const ws = r.workspace || '{gray-fg}—{/gray-fg}';
+      return `  {${st.color}-fg}${st.sym}{/${st.color}-fg} ${r.name.padEnd(20)} ${r.type.padEnd(14)} {${st.color}-fg}${st.label.padEnd(14)}{/${st.color}-fg} ${ws}`;
+    }) : ['  {gray-fg}No agents configured. Press {bold}i{/bold} to install, {bold}n{/bold} to create.{/gray-fg}'];
 
     agentList.setItems(items);
+    updateHeader();
     updateFooter();
     screen.render();
   }
 
-  function updateFooter() {
+  function updateHeader() {
     const pid = connector.getDaemonPid();
-    const daemonState = pid ? '{green-fg}● running{/green-fg}' : '{yellow-fg}○ idle{/yellow-fg}';
-
-    const keys = [
-      '{bold}i{/bold}:Install', '{bold}n{/bold}:New', '{bold}s{/bold}:Start', '{bold}x{/bold}:Stop',
-      '{bold}c{/bold}:Connect', '{bold}d{/bold}:Disconnect', '{bold}u{/bold}:Daemon',
-      '{bold}r{/bold}:Refresh', '{bold}q{/bold}:Quit',
-    ];
-    footer.setContent(`  Daemon: ${daemonState}  │  ${keys.join('  ')}`);
+    const dot = pid ? '{green-fg}●{/green-fg}' : '{gray-fg}○{/gray-fg}';
+    const state = pid ? 'Daemon running' : 'Daemon idle';
+    const count = agentRows.length;
+    header.setContent(`  ${dot} ${state}  │  ${count} agent${count !== 1 ? 's' : ''} configured`);
+  }
+
+  function updateFooter() {
+    footer.setContent('  {bold}i{/bold} Install  {bold}n{/bold} New  {bold}s{/bold} Start  {bold}x{/bold} Stop  {bold}c{/bold} Connect  {bold}u{/bold} Daemon  {bold}r{/bold} Refresh  {bold}q{/bold} Quit');
   }
 
   // ── Install Screen ──
@@ -222,61 +231,93 @@ function createTUI() {
       tags: true,
     });
 
+    // Header
     const installHeader = blessed.box({
       parent: installBox,
-      top: 0, left: 0, width: '100%', height: 3,
-      content: '{bold}  Install Agent Runtime{/bold}  {gray-fg}Enter to install, Escape to go back{/gray-fg}',
+      top: 0, left: 0, width: '100%', height: 1,
       tags: true,
-      style: { bg: 'blue', fg: 'white' },
+      style: { bg: 'blue', fg: 'white', bold: true },
+      content: '  Install Agent Runtimes',
+    });
+
+    // Subtitle
+    blessed.box({
+      parent: installBox,
+      top: 1, left: 0, width: '100%', height: 2,
+      tags: true,
+      content: '\n  {gray-fg}Select a runtime and press Enter to install or update.{/gray-fg}',
+    });
+
+    // Column headers
+    blessed.box({
+      parent: installBox,
+      top: 3, left: 0, width: '100%', height: 1,
+      tags: true,
+      style: { bg: 'white', fg: 'black' },
+      content: `  ${'AGENT'.padEnd(25)} ${'STATUS'.padEnd(16)} DESCRIPTION`,
     });
 
+    // Install list
     const installList = blessed.list({
       parent: installBox,
-      top: 3, left: 0, width: '100%', height: '100%-6',
-      border: { type: 'line' },
+      top: 4, left: 0, width: '100%', height: '100%-7',
       tags: true, keys: true, vi: true, mouse: true,
       style: {
-        selected: { bg: 'blue', fg: 'white' },
+        selected: { bg: 'blue', fg: 'white', bold: true },
         item: { fg: 'white' },
       },
     });
 
-    const installFooter = blessed.box({
+    // Status bar at bottom
+    const statusBar = blessed.box({
       parent: installBox,
-      bottom: 0, left: 0, width: '100%', height: 3,
+      bottom: 1, left: 0, width: '100%', height: 1,
       tags: true,
-      style: { bg: 'blue', fg: 'white' },
-      content: '  {bold}Enter{/bold}:Install/Update  {bold}Escape{/bold}:Back',
+      content: '',
     });
 
-    const items = catalog.map(e => {
-      const status = e.installed ? '{green-fg}installed{/green-fg}' : '{yellow-fg}not installed{/yellow-fg}';
-      const desc = e.description ? `  {gray-fg}${e.description.substring(0, 40)}{/gray-fg}` : '';
-      return `  ${e.label.padEnd(25)} ${status}${desc}`;
+    // Footer
+    blessed.box({
+      parent: installBox,
+      bottom: 0, left: 0, width: '100%', height: 1,
+      tags: true,
+      style: { bg: 'blue', fg: 'white' },
+      content: '  {bold}Enter{/bold} Install/Update  {bold}Esc{/bold} Back',
     });
 
-    installList.setItems(items);
+    function renderCatalog() {
+      const items = catalog.map(e => {
+        const st = e.installed
+          ? '{green-fg}● installed{/green-fg}   '
+          : '{yellow-fg}○ available{/yellow-fg}   ';
+        const desc = e.description ? `{gray-fg}${e.description.substring(0, 45)}{/gray-fg}` : '';
+        return `  ${e.label.padEnd(25)} ${st} ${desc}`;
+      });
+      installList.setItems(items);
+    }
+
+    renderCatalog();
     installList.focus();
 
-    installList.on('select', (item, idx) => {
+    installList.on('select', (_item, idx) => {
       const entry = catalog[idx];
       if (!entry) return;
 
       const verb = entry.installed ? 'Update' : 'Install';
-      // Show confirm dialog
       const confirm = blessed.question({
         parent: installBox,
         top: 'center', left: 'center',
-        width: 50, height: 7,
+        width: 55, height: 7,
         border: { type: 'line' },
         tags: true,
-        style: { bg: 'black', fg: 'white', border: { fg: 'blue' } },
+        label: ` ${verb} `,
+        style: { bg: 'black', fg: 'white', border: { fg: 'cyan' }, label: { fg: 'cyan', bold: true } },
       });
 
-      confirm.ask(`${verb} ${entry.label}?`, (err, ok) => {
+      confirm.ask(`${verb} ${entry.label}? (y/n)`, (_err, ok) => {
         confirm.destroy();
         if (!ok) { installList.focus(); screen.render(); return; }
-        doInstall(entry, installBox, installList);
+        doInstall(entry, statusBar, installList, catalog, renderCatalog);
       });
     });
 
@@ -293,32 +334,27 @@ function createTUI() {
     screen.render();
   }
 
-  function doInstall(entry, installBox, installList) {
-    const statusLine = blessed.box({
-      parent: installBox,
-      bottom: 3, left: 0, width: '100%', height: 1,
-      tags: true,
-      content: `  Installing ${entry.name}...`,
-    });
+  function doInstall(entry, statusBar, installList, catalog, renderCatalog) {
+    statusBar.setContent(`  {cyan-fg}Installing ${entry.name}...{/cyan-fg}`);
     screen.render();
 
     const installer = connector.getInstaller();
     const installCmd = installer._resolveInstallCommand(entry.name);
     if (!installCmd) {
-      statusLine.setContent(`  {red-fg}✗ No install command for ${entry.name}{/red-fg}`);
+      statusBar.setContent(`  {red-fg}✗ No install command for ${entry.name}{/red-fg}`);
       screen.render();
+      installList.focus();
       return;
     }
 
-    log(`Installing ${entry.name}: ${installCmd}`);
-    statusLine.setContent(`  {cyan-fg}$ ${installCmd}{/cyan-fg}`);
+    log(`{cyan-fg}$ ${installCmd}{/cyan-fg}`);
+    statusBar.setContent(`  {gray-fg}$ ${installCmd.substring(0, 80)}{/gray-fg}`);
     screen.render();
 
     const env = { ...process.env };
     env.npm_config_yes = 'true';
     env.CI = '1';
 
-    // Enhance PATH
     const extraDirs = getExtraBinDirs();
     if (extraDirs.length) {
       const sep = IS_WINDOWS ? ';' : ':';
@@ -331,11 +367,15 @@ function createTUI() {
     });
 
     let lastLine = '';
+    let lineCount = 0;
     const onData = (data) => {
       const lines = data.toString().split('\n').filter(l => l.trim());
       for (const line of lines) {
         lastLine = line.trim().substring(0, 100);
+        lineCount++;
         log(`  ${lastLine}`);
+        statusBar.setContent(`  {gray-fg}[${lineCount} lines] ${lastLine.substring(0, 70)}{/gray-fg}`);
+        screen.render();
       }
     };
     proc.stdout.on('data', onData);
@@ -343,9 +383,9 @@ function createTUI() {
 
     proc.on('close', (code) => {
       if (code === 0) {
-        statusLine.setContent(`  {green-fg}✓ ${entry.name} installed successfully{/green-fg}`);
-        log(`{green-fg}✓ ${entry.name} installed{/green-fg}`);
-        // Mark as installed
+        statusBar.setContent(`  {green-fg}✓ ${entry.name} installed successfully{/green-fg}`);
+        log(`{green-fg}✓ ${entry.name} installed successfully{/green-fg}`);
+        // Mark installed
         try {
           const markerFile = path.join(connector.config?.configDir || '', 'installed_agents.json');
           let markers = {};
@@ -353,18 +393,20 @@ function createTUI() {
           markers[entry.name] = { installed_at: new Date().toISOString() };
           fs.writeFileSync(markerFile, JSON.stringify(markers, null, 2));
         } catch {}
-        // Refresh catalog
+        // Refresh
         try {
           const newCatalog = loadCatalog(connector);
-          const newItems = newCatalog.map(e => {
-            const st = e.installed ? '{green-fg}installed{/green-fg}' : '{yellow-fg}not installed{/yellow-fg}';
-            const desc = e.description ? `  {gray-fg}${e.description.substring(0, 40)}{/gray-fg}` : '';
-            return `  ${e.label.padEnd(25)} ${st}${desc}`;
-          });
-          installList.setItems(newItems);
+          for (let i = 0; i < catalog.length; i++) {
+            const updated = newCatalog.find(c => c.name === catalog[i].name);
+            if (updated) catalog[i] = updated;
+          }
+          // Also mark the just-installed one
+          const idx = catalog.findIndex(c => c.name === entry.name);
+          if (idx >= 0) catalog[idx].installed = true;
+          renderCatalog();
         } catch {}
       } else {
-        statusLine.setContent(`  {red-fg}✗ Install failed (exit ${code}): ${lastLine}{/red-fg}`);
+        statusBar.setContent(`  {red-fg}✗ Failed (exit ${code}): ${lastLine.substring(0, 60)}{/red-fg}`);
         log(`{red-fg}✗ ${entry.name} install failed (exit ${code}){/red-fg}`);
       }
       installList.focus();
@@ -372,80 +414,94 @@ function createTUI() {
     });
   }
 
-  // ── New Agent ──
+  // ── New Agent Dialog ──
 
   function showNewAgentDialog() {
-    const form = blessed.form({
+    const dialog = blessed.box({
       top: 'center', left: 'center',
-      width: 60, height: 14,
+      width: 60, height: 16,
       border: { type: 'line' },
       tags: true, keys: true,
-      label: ' New Agent ',
-      style: { border: { fg: 'blue' } },
+      label: ' {bold}Create Agent{/bold} ',
+      style: { border: { fg: 'cyan' }, label: { fg: 'cyan' } },
     });
 
-    blessed.text({ parent: form, top: 1, left: 2, content: 'Agent name:', tags: true });
+    blessed.text({ parent: dialog, top: 1, left: 2, tags: true, content: '{bold}Name:{/bold}' });
     const nameInput = blessed.textbox({
-      parent: form, top: 2, left: 2, width: 40, height: 3,
+      parent: dialog, top: 2, left: 2, width: 44, height: 3,
       border: { type: 'line' },
       inputOnFocus: true,
-      style: { focus: { border: { fg: 'blue' } } },
+      style: { border: { fg: 'gray' }, focus: { border: { fg: 'cyan' } } },
     });
 
-    blessed.text({ parent: form, top: 5, left: 2, content: 'Type (openclaw/claude/codex/aider/goose):', tags: true });
+    blessed.text({ parent: dialog, top: 5, left: 2, tags: true, content: '{bold}Type:{/bold} {gray-fg}(openclaw, claude, codex, aider, goose){/gray-fg}' });
     const typeInput = blessed.textbox({
-      parent: form, top: 6, left: 2, width: 40, height: 3,
+      parent: dialog, top: 6, left: 2, width: 44, height: 3,
       border: { type: 'line' },
       inputOnFocus: true,
       value: 'openclaw',
-      style: { focus: { border: { fg: 'blue' } } },
+      style: { border: { fg: 'gray' }, focus: { border: { fg: 'cyan' } } },
+    });
+
+    const statusLabel = blessed.text({ parent: dialog, top: 10, left: 2, tags: true, content: '' });
+
+    const createBtn = blessed.button({
+      parent: dialog, top: 12, left: 2, width: 14, height: 1,
+      content: '  Create  ', tags: true, mouse: true,
+      style: { bg: 'blue', fg: 'white', focus: { bg: 'cyan' }, hover: { bg: 'cyan' } },
     });
 
-    blessed.button({
-      parent: form, top: 10, left: 2, width: 12, height: 1,
-      content: ' Create ', tags: true,
-      style: { bg: 'blue', fg: 'white', focus: { bg: 'cyan' } },
-      mouse: true,
-    }).on('press', () => {
+    const cancelBtn = blessed.button({
+      parent: dialog, top: 12, left: 18, width: 14, height: 1,
+      content: '  Cancel  ', tags: true, mouse: true,
+      style: { bg: 'gray', fg: 'white', focus: { bg: 'red' }, hover: { bg: 'red' } },
+    });
+
+    function doCreate() {
       const name = nameInput.getValue().trim();
       const type = typeInput.getValue().trim();
-      if (!name || !type) return;
+      if (!name) { statusLabel.setContent('{red-fg}Name is required{/red-fg}'); screen.render(); return; }
+      if (!type) { statusLabel.setContent('{red-fg}Type is required{/red-fg}'); screen.render(); return; }
       try {
         connector.createAgent(name, type);
         log(`{green-fg}✓ Agent '${name}' (${type}) created{/green-fg}`);
+        screen.remove(dialog);
+        dialog.destroy();
+        agentList.focus();
+        refreshAgentTable();
       } catch (e) {
-        log(`{red-fg}✗ Error: ${e.message}{/red-fg}`);
+        statusLabel.setContent(`{red-fg}${e.message}{/red-fg}`);
+        screen.render();
       }
-      screen.remove(form);
-      form.destroy();
+    }
+
+    createBtn.on('press', doCreate);
+    cancelBtn.on('press', () => {
+      screen.remove(dialog);
+      dialog.destroy();
       agentList.focus();
-      refreshAgentTable();
+      screen.render();
     });
 
-    form.key('escape', () => {
-      screen.remove(form);
-      form.destroy();
+    dialog.key('escape', () => {
+      screen.remove(dialog);
+      dialog.destroy();
       agentList.focus();
       screen.render();
     });
 
-    screen.append(form);
+    screen.append(dialog);
     nameInput.focus();
     screen.render();
   }
 
   // ── Keybindings ──
 
-  screen.key('q', () => process.exit(0));
+  screen.key('q', () => { if (currentView === 'main') process.exit(0); });
   screen.key('C-c', () => process.exit(0));
 
-  screen.key('i', () => {
-    if (currentView === 'main') showInstallScreen();
-  });
-
-  screen.key('n', () => {
-    if (currentView === 'main') showNewAgentDialog();
-  });
+  screen.key('i', () => { if (currentView === 'main') showInstallScreen(); });
+  screen.key('n', () => { if (currentView === 'main') showNewAgentDialog(); });
 
   screen.key('r', () => {
     if (currentView === 'main') {
@@ -458,13 +514,11 @@ function createTUI() {
     if (currentView !== 'main') return;
     const idx = agentList.selected;
     const agent = agentRows[idx];
-    if (!agent) return;
+    if (!agent) { log('{yellow-fg}No agent selected{/yellow-fg}'); return; }
     try {
       connector.startAgent(agent.name);
       log(`Starting ${agent.name}...`);
-    } catch (e) {
-      log(`{red-fg}Error: ${e.message}{/red-fg}`);
-    }
+    } catch (e) { log(`{red-fg}Error: ${e.message}{/red-fg}`); }
     setTimeout(refreshAgentTable, 2000);
   });
 
@@ -472,13 +526,11 @@ function createTUI() {
     if (currentView !== 'main') return;
     const idx = agentList.selected;
     const agent = agentRows[idx];
-    if (!agent) return;
+    if (!agent) { log('{yellow-fg}No agent selected{/yellow-fg}'); return; }
     try {
       connector.stopAgent(agent.name);
       log(`Stopped ${agent.name}`);
-    } catch (e) {
-      log(`{red-fg}Error: ${e.message}{/red-fg}`);
-    }
+    } catch (e) { log(`{red-fg}Error: ${e.message}{/red-fg}`); }
     setTimeout(refreshAgentTable, 1000);
   });
 
@@ -490,7 +542,7 @@ function createTUI() {
       log('Daemon stopped');
     } else {
       connector.startDaemon();
-      log('Daemon started');
+      log('Daemon starting...');
     }
     setTimeout(refreshAgentTable, 2000);
   });
@@ -499,22 +551,19 @@ function createTUI() {
     if (currentView !== 'main') return;
     const idx = agentList.selected;
     const agent = agentRows[idx];
-    if (!agent) return;
-    // TODO: show workspace picker
-    log(`Connect: use 'agent-connector connect ${agent.name} <workspace-slug>' from terminal`);
+    if (!agent) { log('{yellow-fg}No agent selected{/yellow-fg}'); return; }
+    log(`{gray-fg}Use: openagents connect ${agent.name} <workspace-token>{/gray-fg}`);
   });
 
   screen.key('d', () => {
     if (currentView !== 'main') return;
     const idx = agentList.selected;
     const agent = agentRows[idx];
-    if (!agent) return;
+    if (!agent) { log('{yellow-fg}No agent selected{/yellow-fg}'); return; }
     try {
       connector.disconnectAgent(agent.name);
       log(`Disconnected ${agent.name}`);
-    } catch (e) {
-      log(`{red-fg}Error: ${e.message}{/red-fg}`);
-    }
+    } catch (e) { log(`{red-fg}Error: ${e.message}{/red-fg}`); }
     refreshAgentTable();
   });
 
@@ -522,11 +571,9 @@ function createTUI() {
 
   agentList.focus();
   refreshAgentTable();
-  log('Ready. Press {bold}i{/bold} to install agents, {bold}n{/bold} to create one.');
+  log('Welcome to {bold}OpenAgents{/bold}. Press {bold}i{/bold} to install agents, {bold}n{/bold} to create one.');
 
-  // Auto-refresh every 5 seconds
   setInterval(refreshAgentTable, 5000);
-
   screen.render();
   return screen;
 }