gbos 1.1.9 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbos",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "description": "GBOS - Command line interface for GBOS services",
   "main": "src/index.js",
   "bin": {
@@ -39,6 +39,7 @@
   ],
   "dependencies": {
     "commander": "^12.1.0",
-    "pngjs": "^7.0.0"
+    "pngjs": "^7.0.0",
+    "terminal-image": "^4.2.0"
   }
 }

package/src/cli.js

@@ -6,6 +6,7 @@ const program = new Command();
 const authCommand = require('./commands/auth');
 const connectCommand = require('./commands/connect');
 const logoutCommand = require('./commands/logout');
+const logoCommand = require('./commands/logo');
 const config = require('./lib/config');
 
 const VERSION = require('../package.json').version;
@@ -117,6 +118,11 @@ program
   .option('-a, --all', 'Clear all stored data including machine ID')
   .action(logoutCommand);
 
+program
+  .command('logo')
+  .description('Print the GBOS logo image')
+  .action(logoCommand);
+
 program
   .command('help [command]')
   .description('Display help for a specific command')

package/src/commands/connect.js

@@ -1,45 +1,114 @@
 const api = require('../lib/api');
 const config = require('../lib/config');
 const { checkForUpdates } = require('../lib/version');
-const { displayConnectSuccess, displayMessageBox } = require('../lib/display');
+const { displayConnectSuccess, displayMessageBox, colors } = require('../lib/display');
 const readline = require('readline');
-const path = require('path');
 const { execSync } = require('child_process');
 
-// Simple selection prompt
-async function selectOption(message, options) {
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
+const ESC = '\x1b';
+const RESET = `${ESC}[0m`;
+const BOLD = `${ESC}[1m`;
+const DIM = `${ESC}[2m`;
+const PURPLE = `${ESC}[38;5;99m`;
+const WHITE = `${ESC}[37m`;
+const CYAN = `${ESC}[36m`;
+
+// Interactive arrow key selector
+async function selectWithArrows(title, options, displayFn) {
+  return new Promise((resolve) => {
+    let selectedIndex = 0;
+    const stdin = process.stdin;
+    const stdout = process.stdout;
+
+    // Save cursor position and hide cursor
+    stdout.write(`${ESC}[?25l`);
+
+    function render() {
+      // Move cursor to start and clear
+      stdout.write(`${ESC}[${options.length + 3}A${ESC}[J`);
+
+      console.log(`\n${PURPLE}${title}${RESET}\n`);
+
+      options.forEach((opt, index) => {
+        const isSelected = index === selectedIndex;
+        const prefix = isSelected ? `${CYAN}❯${RESET}` : ' ';
+        const text = displayFn ? displayFn(opt, isSelected) : opt.name;
 
-  console.log(`\n${message}\n`);
+        if (isSelected) {
+          console.log(`  ${prefix} ${BOLD}${WHITE}${text}${RESET}`);
+        } else {
+          console.log(`  ${prefix} ${DIM}${text}${RESET}`);
+        }
+      });
 
-  options.forEach((opt, index) => {
-    const status = opt.status ? ` [${opt.status}]` : '';
-    const connected = opt.is_connected ? ' (connected by another user)' : '';
-    console.log(`  ${index + 1}. ${opt.name}${status}${connected}`);
-    if (opt.description) {
-      console.log(`     ${opt.description}`);
+      console.log(`\n  ${DIM}↑/↓ to navigate, Enter to select, q to cancel${RESET}`);
     }
-  });
 
-  console.log('');
+    // Initial render
+    console.log(`\n${PURPLE}${title}${RESET}\n`);
+    options.forEach((opt, index) => {
+      const isSelected = index === selectedIndex;
+      const prefix = isSelected ? `${CYAN}❯${RESET}` : ' ';
+      const text = displayFn ? displayFn(opt, isSelected) : opt.name;
 
-  return new Promise((resolve) => {
-    rl.question('Enter number (or q to quit): ', (answer) => {
-      rl.close();
-      if (answer.toLowerCase() === 'q') {
+      if (isSelected) {
+        console.log(`  ${prefix} ${BOLD}${WHITE}${text}${RESET}`);
+      } else {
+        console.log(`  ${prefix} ${DIM}${text}${RESET}`);
+      }
+    });
+    console.log(`\n  ${DIM}↑/↓ to navigate, Enter to select, q to cancel${RESET}`);
+
+    // Enable raw mode
+    if (stdin.isTTY) {
+      stdin.setRawMode(true);
+    }
+    stdin.resume();
+    stdin.setEncoding('utf8');
+
+    function cleanup() {
+      if (stdin.isTTY) {
+        stdin.setRawMode(false);
+      }
+      stdin.removeListener('data', onKeypress);
+      // Show cursor
+      stdout.write(`${ESC}[?25h`);
+    }
+
+    function onKeypress(key) {
+      // Ctrl+C
+      if (key === '\u0003') {
+        cleanup();
+        process.exit();
+      }
+
+      // q or Q to quit
+      if (key === 'q' || key === 'Q') {
+        cleanup();
         resolve(null);
         return;
       }
-      const index = parseInt(answer, 10) - 1;
-      if (index >= 0 && index < options.length) {
-        resolve(options[index]);
-      } else {
-        resolve(null);
+
+      // Enter
+      if (key === '\r' || key === '\n') {
+        cleanup();
+        resolve(options[selectedIndex]);
+        return;
       }
-    });
+
+      // Arrow keys (escape sequences)
+      if (key === `${ESC}[A` || key === 'k') {
+        // Up
+        selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : options.length - 1;
+        render();
+      } else if (key === `${ESC}[B` || key === 'j') {
+        // Down
+        selectedIndex = selectedIndex < options.length - 1 ? selectedIndex + 1 : 0;
+        render();
+      }
+    }
+
+    stdin.on('data', onKeypress);
   });
 }
 
@@ -80,75 +149,140 @@ async function connectCommand(options) {
       return;
     }
 
-    console.log('\nFetching available nodes...\n');
+    console.log('\nFetching available applications...\n');
+
+    // Try to fetch applications directly first
+    let appOptions = [];
+    let nodesByApp = {};
+
+    try {
+      // Try the applications endpoint first
+      const appsResponse = await api.listApplications();
+      const applications = appsResponse.data || [];
+
+      if (applications.length > 0) {
+        appOptions = applications.map((app) => ({
+          id: app.id,
+          name: app.name || `Application ${app.id}`,
+          description: app.description,
+          nodeCount: app.nodes_count || app.nodesCount || '?',
+          application: app,
+        }));
+      }
+    } catch (err) {
+      // Applications endpoint not available, fall back to deriving from nodes
+      if (process.env.DEBUG) {
+        console.log('Note: /cli/applications endpoint not available, falling back to nodes');
+      }
+    }
+
+    // If no applications from direct endpoint, derive from nodes
+    if (appOptions.length === 0) {
+      const nodesResponse = await api.listNodes();
+      const nodes = nodesResponse.data || [];
+
+      if (nodes.length === 0) {
+        displayMessageBox(
+          'No Nodes Available',
+          'No development nodes available. Please create a development node in the GBOS web interface.',
+          'warning'
+        );
+        process.exit(1);
+      }
 
-    // Fetch available nodes
-    const nodesResponse = await api.listNodes();
-    const nodes = nodesResponse.data || [];
+      // Group nodes by application
+      nodes.forEach((node) => {
+        const appId = node.application_id || 'unassigned';
+        if (nodesByApp[appId] === undefined) {
+          nodesByApp[appId] = {
+            application: node.application,
+            nodes: [],
+          };
+        }
+        nodesByApp[appId].nodes.push(node);
+      });
+
+      const appIds = Object.keys(nodesByApp);
+      appOptions = appIds.map((appId) => ({
+        id: appId,
+        name: nodesByApp[appId].application?.name || `Application ${appId}`,
+        nodeCount: nodesByApp[appId].nodes.length,
+        application: nodesByApp[appId].application,
+      }));
+    }
 
-    if (nodes.length === 0) {
+    if (appOptions.length === 0) {
       displayMessageBox(
-        'No Nodes Available',
-        'No development nodes available. Please create a development node in the GBOS web interface.',
+        'No Applications Available',
+        'No applications found. Please create an application in the GBOS web interface.',
         'warning'
       );
       process.exit(1);
     }
 
-    // Group nodes by application
-    const nodesByApp = {};
-    nodes.forEach((node) => {
-      const appId = node.application_id || 'unassigned';
-      if (!nodesByApp[appId]) {
-        nodesByApp[appId] = {
-          application: node.application,
-          nodes: [],
-        };
-      }
-      nodesByApp[appId].nodes.push(node);
-    });
-
-    // If multiple applications, let user select one first
-    let selectedApp = null;
-    const appIds = Object.keys(nodesByApp);
+    // Always show application selection (even if only one)
+    const selectedApp = await selectWithArrows(
+      'Select an application:',
+      appOptions,
+      (opt) => `${opt.name} ${DIM}(${opt.nodeCount} node${opt.nodeCount > 1 ? 's' : ''})${RESET}`
+    );
 
-    if (appIds.length > 1) {
-      const appOptions = appIds.map((appId) => ({
-        id: appId,
-        name: nodesByApp[appId].application?.name || `Application ${appId}`,
-        description: `${nodesByApp[appId].nodes.length} node(s) available`,
-      }));
+    if (!selectedApp) {
+      console.log('\nConnection cancelled.\n');
+      return;
+    }
 
-      selectedApp = await selectOption('Select an application:', appOptions);
+    // Get nodes for selected application
+    let appNodes;
+    let selectedApplication = selectedApp.application;
 
-      if (!selectedApp) {
-        console.log('Connection cancelled.\n');
+    if (nodesByApp[selectedApp.id]) {
+      // We already have nodes from the fallback path
+      appNodes = nodesByApp[selectedApp.id].nodes;
+      selectedApplication = nodesByApp[selectedApp.id].application || selectedApp.application;
+    } else {
+      // Fetch nodes for the selected application
+      console.log(`\nFetching nodes for ${selectedApp.name}...\n`);
+      const nodesResponse = await api.listNodes(selectedApp.id);
+      appNodes = nodesResponse.data || [];
+
+      if (appNodes.length === 0) {
+        displayMessageBox(
+          'No Nodes Available',
+          `No development nodes found for "${selectedApp.name}". Please create a development node in the GBOS web interface.`,
+          'warning'
+        );
         return;
       }
-    } else {
-      selectedApp = { id: appIds[0] };
     }
 
-    // Get nodes for selected application
-    const appNodes = nodesByApp[selectedApp.id].nodes;
-    const selectedApplication = nodesByApp[selectedApp.id].application;
-
-    // Let user select a node
+    // Build node options
     const nodeOptions = appNodes.map((node) => ({
       ...node,
-      name: node.name,
-      description: node.node_type || '',
+      displayName: node.name,
+      nodeType: node.node_type || '',
+      isBusy: node.is_connected && node.active_connection,
     }));
 
-    const selectedNode = await selectOption('Select a development node:', nodeOptions);
+    // Select a node
+    const selectedNode = await selectWithArrows(
+      'Select a development node:',
+      nodeOptions,
+      (opt) => {
+        let text = opt.displayName;
+        if (opt.nodeType) text += ` ${DIM}[${opt.nodeType}]${RESET}`;
+        if (opt.isBusy) text += ` ${DIM}(busy)${RESET}`;
+        return text;
+      }
+    );
 
     if (!selectedNode) {
-      console.log('Connection cancelled.\n');
+      console.log('\nConnection cancelled.\n');
       return;
     }
 
     // Check if node is busy
-    if (selectedNode.is_connected && selectedNode.active_connection) {
+    if (selectedNode.isBusy) {
       displayMessageBox(
         'Node Busy',
         `Node "${selectedNode.name}" is already connected by another user. Please select a different node.`,

package/src/commands/logo.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const { displayImage, getTerminalWidth } = require('../lib/display');
+
+async function logoCommand() {
+  const logoPath = path.join(__dirname, '../../images/logo-2.png');
+  const terminalWidth = getTerminalWidth();
+  const targetWidth = Math.min(120, Math.max(40, terminalWidth - 4));
+
+  await displayImage(logoPath, {
+    width: targetWidth,
+    fallbackWidth: targetWidth,
+    fallbackHeight: null,
+    sharp: true,
+    crop: true,
+    alphaThreshold: 220,
+    cropAlphaThreshold: 220,
+  });
+}
+
+module.exports = logoCommand;

package/src/lib/api.js

@@ -81,6 +81,11 @@ class GbosApiClient {
     });
   }
 
+  // Application endpoints
+  async listApplications() {
+    return this.request('/cli/applications', { method: 'GET' });
+  }
+
   // Node endpoints
   async listNodes(applicationId = null) {
     let endpoint = '/cli/nodes';

package/src/lib/display.js

@@ -57,15 +57,18 @@ function samplePixel(png, x, y) {
 }
 
 // Check if pixel is transparent or white (background)
-function isBackground(pixel) {
-  return pixel.a < 50 || (pixel.r > 240 && pixel.g > 240 && pixel.b > 240);
+function isBackground(pixel, options = {}) {
+  const alphaThreshold = options.alphaThreshold ?? 50;
+  const backgroundLuminance = options.backgroundLuminance ?? 240;
+  return pixel.a < alphaThreshold ||
+    (pixel.r > backgroundLuminance && pixel.g > backgroundLuminance && pixel.b > backgroundLuminance);
 }
 
 // Shading characters for smooth edges (from light to full)
 const SHADE_CHARS = [' ', '░', '▒', '▓', '█'];
 
 // Get average alpha/coverage for a region (for anti-aliasing)
-function getRegionCoverage(png, startX, startY, width, height) {
+function getRegionCoverage(png, startX, startY, width, height, backgroundOptions = {}) {
   let totalAlpha = 0;
   let totalR = 0, totalG = 0, totalB = 0;
   let samples = 0;
@@ -73,7 +76,7 @@ function getRegionCoverage(png, startX, startY, width, height) {
   for (let y = startY; y < startY + height; y++) {
     for (let x = startX; x < startX + width; x++) {
       const pixel = samplePixel(png, x, y);
-      if (!isBackground(pixel)) {
+      if (!isBackground(pixel, backgroundOptions)) {
         totalAlpha += pixel.a;
         totalR += pixel.r;
         totalG += pixel.g;
@@ -94,30 +97,111 @@ function getRegionCoverage(png, startX, startY, width, height) {
   };
 }
 
-// Convert PNG to true-color pixel art with smooth edges
-// Uses shading characters for anti-aliasing on edges
-function imageToPixels(imagePath, targetWidth = 24, targetHeight = 5) {
+function cropPng(png, alphaThreshold = 1) {
+  let minX = png.width;
+  let minY = png.height;
+  let maxX = -1;
+  let maxY = -1;
+
+  for (let y = 0; y < png.height; y++) {
+    for (let x = 0; x < png.width; x++) {
+      const idx = (png.width * y + x) << 2;
+      if (png.data[idx + 3] >= alphaThreshold) {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      }
+    }
+  }
+
+  if (maxX < minX || maxY < minY) return png;
+
+  const width = maxX - minX + 1;
+  const height = maxY - minY + 1;
+  const cropped = new PNG({ width, height });
+
+  for (let y = 0; y < height; y++) {
+    const srcStart = ((minY + y) * png.width + minX) << 2;
+    const srcEnd = srcStart + (width << 2);
+    const destStart = (width * y) << 2;
+    png.data.copy(cropped.data, destStart, srcStart, srcEnd);
+  }
+
+  return cropped;
+}
+
+// Convert PNG to true-color pixel art
+// Uses shading characters for anti-aliasing on edges when sampling coverage
+function imageToPixels(imagePath, targetWidth = 24, targetHeight = 5, options = {}) {
+  const {
+    alphaThreshold = 50,
+    backgroundLuminance = 240,
+    sampleMode = 'coverage',
+    crop = false,
+    cropAlphaThreshold = 1,
+  } = options;
+
   try {
     const data = fs.readFileSync(imagePath);
-    const png = PNG.sync.read(data);
+    let png = PNG.sync.read(data);
+    if (crop) {
+      png = cropPng(png, cropAlphaThreshold);
+    }
+
+    const resolvedWidth = Math.max(1, Math.round(targetWidth));
+    const resolvedHeight = targetHeight == null
+      ? Math.max(1, Math.round((resolvedWidth * png.height) / (png.width * 2)))
+      : Math.max(1, Math.round(targetHeight));
 
     // Each row of output = 2 rows of pixels (using half-blocks)
-    const pixelRows = targetHeight * 2;
-    const cellWidth = png.width / targetWidth;
+    const pixelRows = resolvedHeight * 2;
+    const cellWidth = png.width / resolvedWidth;
     const cellHeight = png.height / pixelRows;
+    const backgroundOptions = { alphaThreshold, backgroundLuminance };
 
     const lines = [];
 
-    for (let row = 0; row < targetHeight; row++) {
+    for (let row = 0; row < resolvedHeight; row++) {
       let line = '';
-      for (let col = 0; col < targetWidth; col++) {
+      for (let col = 0; col < resolvedWidth; col++) {
+        if (sampleMode === 'nearest') {
+          const topStartY = row * 2 * cellHeight;
+          const bottomStartY = (row * 2 + 1) * cellHeight;
+          const startX = col * cellWidth;
+
+          const topPixel = samplePixel(png, startX + cellWidth * 0.5, topStartY + cellHeight * 0.5);
+          const bottomPixel = samplePixel(png, startX + cellWidth * 0.5, bottomStartY + cellHeight * 0.5);
+          const topBg = isBackground(topPixel, backgroundOptions);
+          const bottomBg = isBackground(bottomPixel, backgroundOptions);
+
+          if (topBg && bottomBg) {
+            line += ' ';
+            continue;
+          }
+
+          if (!topBg && !bottomBg) {
+            line += fg(topPixel.r, topPixel.g, topPixel.b) +
+              bg(bottomPixel.r, bottomPixel.g, bottomPixel.b) +
+              UPPER_HALF + RESET;
+            continue;
+          }
+
+          if (!topBg) {
+            line += fg(topPixel.r, topPixel.g, topPixel.b) + UPPER_HALF + RESET;
+          } else {
+            line += fg(bottomPixel.r, bottomPixel.g, bottomPixel.b) + LOWER_HALF + RESET;
+          }
+          continue;
+        }
+
         // Get coverage for top and bottom halves of this cell
         const topStartY = row * 2 * cellHeight;
         const bottomStartY = (row * 2 + 1) * cellHeight;
         const startX = col * cellWidth;
 
-        const topRegion = getRegionCoverage(png, startX, topStartY, cellWidth, cellHeight);
-        const bottomRegion = getRegionCoverage(png, startX, bottomStartY, cellWidth, cellHeight);
+        const topRegion = getRegionCoverage(png, startX, topStartY, cellWidth, cellHeight, backgroundOptions);
+        const bottomRegion = getRegionCoverage(png, startX, bottomStartY, cellWidth, cellHeight, backgroundOptions);
 
         const topCov = topRegion.coverage;
         const bottomCov = bottomRegion.coverage;
@@ -177,6 +261,92 @@ function imageToPixels(imagePath, targetWidth = 24, targetHeight = 5) {
   }
 }
 
+function applyAlphaThreshold(png, alphaThreshold) {
+  if (!alphaThreshold) return png;
+  for (let i = 0; i < png.data.length; i += 4) {
+    if (png.data[i + 3] < alphaThreshold) {
+      png.data[i + 3] = 0;
+    }
+  }
+  return png;
+}
+
+function preparePngForRender(imagePath, options = {}) {
+  const { alphaThreshold, crop, cropAlphaThreshold } = options;
+  const data = fs.readFileSync(imagePath);
+  let png = PNG.sync.read(data);
+  if (alphaThreshold) {
+    png = applyAlphaThreshold(png, alphaThreshold);
+  }
+  if (crop) {
+    png = cropPng(png, cropAlphaThreshold ?? alphaThreshold ?? 1);
+  }
+  return PNG.sync.write(png);
+}
+
+async function displayImage(imagePath, options = {}) {
+  const fallbackWidth = options.fallbackWidth === undefined ? 40 : options.fallbackWidth;
+  const fallbackHeight = options.fallbackHeight === undefined ? 12 : options.fallbackHeight;
+  const sharp = options.sharp ?? false;
+  const alphaThreshold = options.alphaThreshold ?? 50;
+  const crop = options.crop ?? false;
+  const cropAlphaThreshold = options.cropAlphaThreshold;
+  const backgroundLuminance = options.backgroundLuminance ?? 240;
+  const useProcessedBuffer = crop || sharp;
+  const renderOptions = { ...options };
+  delete renderOptions.fallbackWidth;
+  delete renderOptions.fallbackHeight;
+  delete renderOptions.sharp;
+  delete renderOptions.alphaThreshold;
+  delete renderOptions.crop;
+  delete renderOptions.cropAlphaThreshold;
+  delete renderOptions.backgroundLuminance;
+
+  try {
+    let supportsGraphics = false;
+    try {
+      const supportsTerminalGraphics = await import('supports-terminal-graphics');
+      const graphics = supportsTerminalGraphics.default || supportsTerminalGraphics;
+      supportsGraphics = Boolean(
+        graphics?.stdout?.kitty || graphics?.stdout?.iterm2 || graphics?.stdout?.sixel,
+      );
+    } catch {
+      supportsGraphics = false;
+    }
+
+    if (supportsGraphics) {
+      const terminalImage = await import('terminal-image');
+      const renderer = terminalImage.default || terminalImage;
+      const buffer = useProcessedBuffer
+        ? preparePngForRender(imagePath, { alphaThreshold, crop, cropAlphaThreshold })
+        : null;
+      const output = buffer
+        ? await renderer.buffer(buffer, renderOptions)
+        : await renderer.file(imagePath, renderOptions);
+      process.stdout.write(output);
+      if (!output.endsWith('\n')) process.stdout.write('\n');
+      return true;
+    }
+  } catch (error) {
+    // Fall through to ANSI fallback
+  }
+
+  const fallbackLines = imageToPixels(imagePath, fallbackWidth, fallbackHeight, {
+    sampleMode: sharp ? 'nearest' : 'coverage',
+    alphaThreshold,
+    backgroundLuminance,
+    crop,
+    cropAlphaThreshold: cropAlphaThreshold ?? alphaThreshold,
+  });
+  if (!fallbackLines) {
+    throw new Error('Unable to render image.');
+  }
+  console.log('');
+  fallbackLines.forEach((line) => console.log(line));
+  console.log('');
+  return false;
+}
+
 
 // Fallback compact logo
 const COMPACT_LOGO = [
@@ -187,7 +357,7 @@ const COMPACT_LOGO = [
 
 // Display logo with connection details (Claude Code style - clean, minimal)
 function displayLogoWithDetails(details = null) {
-  const logoPath = path.join(__dirname, '../../images/logo.png');
+  const logoPath = path.join(__dirname, '../../images/logo-2.png');
   const version = require('../../package.json').version;
 
   // Render logo at ~20 chars wide, 5 rows tall (smooth edges)
@@ -226,7 +396,7 @@ function displayLogo() {
 }
 
 function displayAuthSuccess(data) {
-  const logoPath = path.join(__dirname, '../../images/logo.png');
+  const logoPath = path.join(__dirname, '../../images/logo-2.png');
   const version = require('../../package.json').version;
 
   let logoLines = imageToPixels(logoPath, 20, 5);
@@ -300,6 +470,7 @@ module.exports = {
   displayAuthSuccess,
   displayConnectSuccess,
   displayMessageBox,
+  displayImage,
   imageToPixels,
   getTerminalWidth,
 };