9router 0.2.49 → 0.2.50

package/src/cli/utils/display.js

@@ -0,0 +1,156 @@
+const { formatNumber } = require("./format");
+
+// ANSI color codes
+const COLORS = {
+  reset: "\x1b[0m",
+  success: "\x1b[32m",
+  error: "\x1b[31m",
+  warning: "\x1b[33m",
+  info: "\x1b[36m",
+  dim: "\x1b[2m",
+  bold: "\x1b[1m",
+  bright: "\x1b[1m",
+  cyan: "\x1b[36m"
+};
+
+// Box drawing characters
+const BOX_CHARS = {
+  topLeft: "┌",
+  topRight: "┐",
+  bottomLeft: "└",
+  bottomRight: "┘",
+  horizontal: "─",
+  vertical: "│"
+};
+
+/**
+ * Draw a box with border around content
+ * @param {string} title - Box title
+ * @param {string} content - Content to display inside box
+ * @param {number} [width=60] - Box width
+ */
+function showBox(title, content, width = 60) {
+  const innerWidth = width - 4;
+  const lines = content.split("\n");
+
+  // Top border with title
+  const topBorder = BOX_CHARS.topLeft + BOX_CHARS.horizontal.repeat(2) + 
+    ` ${title} ` + 
+    BOX_CHARS.horizontal.repeat(Math.max(0, innerWidth - title.length - 3)) + 
+    BOX_CHARS.topRight;
+
+  console.log(topBorder);
+
+  // Content lines
+  lines.forEach(line => {
+    const paddedLine = line.padEnd(innerWidth);
+    console.log(`${BOX_CHARS.vertical} ${paddedLine} ${BOX_CHARS.vertical}`);
+  });
+
+  // Bottom border
+  const bottomBorder = BOX_CHARS.bottomLeft + 
+    BOX_CHARS.horizontal.repeat(innerWidth + 2) + 
+    BOX_CHARS.bottomRight;
+
+  console.log(bottomBorder);
+}
+
+/**
+ * Display a menu with numbered items
+ * @param {string} title - Menu title
+ * @param {string[]} items - Array of menu items
+ * @param {string} [footer] - Optional footer text
+ */
+function showMenu(title, items, footer) {
+  console.log(`\n${COLORS.bold}${title}${COLORS.reset}`);
+  console.log(COLORS.dim + "─".repeat(title.length) + COLORS.reset);
+
+  items.forEach((item, index) => {
+    console.log(`  ${COLORS.info}${index + 1}.${COLORS.reset} ${item}`);
+  });
+
+  if (footer) {
+    console.log(`\n${COLORS.dim}${footer}${COLORS.reset}`);
+  }
+  console.log();
+}
+
+/**
+ * Display data in table format
+ * @param {string[]} headers - Array of column headers
+ * @param {Array<Array<string|number>>} rows - Array of row data
+ */
+function showTable(headers, rows) {
+  if (!headers.length || !rows.length) {
+    return;
+  }
+
+  // Calculate column widths
+  const colWidths = headers.map((header, i) => {
+    const maxDataWidth = Math.max(...rows.map(row => String(row[i] || "").length));
+    return Math.max(header.length, maxDataWidth);
+  });
+
+  // Print header
+  const headerRow = headers.map((h, i) => h.padEnd(colWidths[i])).join(" │ ");
+  console.log(COLORS.bold + headerRow + COLORS.reset);
+
+  // Print separator
+  const separator = colWidths.map(w => "─".repeat(w)).join("─┼─");
+  console.log(COLORS.dim + separator + COLORS.reset);
+
+  // Print rows
+  rows.forEach(row => {
+    const rowStr = row.map((cell, i) => String(cell || "").padEnd(colWidths[i])).join(" │ ");
+    console.log(rowStr);
+  });
+}
+
+/**
+ * Show colored status message
+ * @param {string} message - Message to display
+ * @param {string} [type="info"] - Status type: success, error, warning, info
+ */
+function showStatus(message, type = "info") {
+  const symbols = {
+    success: "✓",
+    error: "✗",
+    warning: "⚠",
+    info: "ℹ"
+  };
+
+  const color = COLORS[type] || COLORS.info;
+  const symbol = symbols[type] || symbols.info;
+
+  console.log(`${color}${symbol} ${message}${COLORS.reset}`);
+}
+
+/**
+ * Clear the terminal screen
+ */
+function clearScreen() {
+  console.clear();
+}
+
+/**
+ * Show menu header with title and subtitle
+ * @param {string} title - Main title
+ * @param {string} subtitle - Optional subtitle
+ */
+function showHeader(title, subtitle) {
+  console.log(`\n${"=".repeat(60)}`);
+  console.log(`  ${COLORS.bright}${COLORS.cyan}${title}${COLORS.reset}`);
+  if (subtitle) {
+    console.log(`  ${COLORS.dim}${subtitle}${COLORS.reset}`);
+  }
+  console.log(`${"=".repeat(60)}\n`);
+}
+
+module.exports = {
+  showBox,
+  showMenu,
+  showTable,
+  showStatus,
+  clearScreen,
+  showHeader
+};

package/src/cli/utils/format.js

@@ -0,0 +1,125 @@
+/**
+ * Truncate text with ellipsis
+ * @param {string} text - Text to truncate
+ * @param {number} maxLength - Maximum length
+ * @returns {string} Truncated text
+ */
+function truncate(text, maxLength) {
+  if (!text || text.length <= maxLength) {
+    return text;
+  }
+  return text.substring(0, maxLength - 3) + "...";
+}
+
+/**
+ * Mask API key showing only first and last characters
+ * @param {string} key - API key to mask
+ * @returns {string} Masked key
+ */
+function maskKey(key) {
+  if (!key || key.length < 8) {
+    return "***";
+  }
+  const firstChars = key.substring(0, 4);
+  const lastChars = key.substring(key.length - 4);
+  return `${firstChars}${"*".repeat(key.length - 8)}${lastChars}`;
+}
+
+/**
+ * Format date to readable string
+ * @param {Date|string|number} date - Date to format
+ * @returns {string} Formatted date string
+ */
+function formatDate(date) {
+  const d = new Date(date);
+  if (isNaN(d.getTime())) {
+    return "Invalid Date";
+  }
+
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hours = String(d.getHours()).padStart(2, "0");
+  const minutes = String(d.getMinutes()).padStart(2, "0");
+  const seconds = String(d.getSeconds()).padStart(2, "0");
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * Format number with commas
+ * @param {number} num - Number to format
+ * @returns {string} Formatted number
+ */
+function formatNumber(num) {
+  if (typeof num !== "number" || isNaN(num)) {
+    return "0";
+  }
+  return num.toLocaleString("en-US");
+}
+
+/**
+ * Format bytes to human readable size
+ * @param {number} bytes - Bytes to format
+ * @returns {string} Formatted size string
+ */
+function formatBytes(bytes) {
+  if (typeof bytes !== "number" || isNaN(bytes) || bytes < 0) {
+    return "0 B";
+  }
+
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(2)} ${units[unitIndex]}`;
+}
+
+/**
+ * Get relative time string
+ * @param {Date|string|number} date - Date to compare
+ * @returns {string} Relative time string
+ */
+function getRelativeTime(date) {
+  const d = new Date(date);
+  if (isNaN(d.getTime())) {
+    return "Invalid Date";
+  }
+
+  const now = new Date();
+  const diffMs = now - d;
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  const diffMonth = Math.floor(diffDay / 30);
+  const diffYear = Math.floor(diffDay / 365);
+
+  if (diffSec < 60) {
+    return "just now";
+  } else if (diffMin < 60) {
+    return `${diffMin} minute${diffMin > 1 ? "s" : ""} ago`;
+  } else if (diffHour < 24) {
+    return `${diffHour} hour${diffHour > 1 ? "s" : ""} ago`;
+  } else if (diffDay < 30) {
+    return `${diffDay} day${diffDay > 1 ? "s" : ""} ago`;
+  } else if (diffMonth < 12) {
+    return `${diffMonth} month${diffMonth > 1 ? "s" : ""} ago`;
+  } else {
+    return `${diffYear} year${diffYear > 1 ? "s" : ""} ago`;
+  }
+}
+
+module.exports = {
+  truncate,
+  maskKey,
+  formatDate,
+  formatNumber,
+  formatBytes,
+  getRelativeTime
+};

package/src/cli/utils/input.js

@@ -0,0 +1,211 @@
+const readline = require("readline");
+
+const COLORS = {
+  reset: "\x1b[0m",
+  bright: "\x1b[1m",
+  dim: "\x1b[2m",
+  underline: "\x1b[4m",
+  reverse: "\x1b[7m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  white: "\x1b[37m",
+  bgGreen: "\x1b[42m",
+  bgBlue: "\x1b[44m",
+  black: "\x1b[30m",
+  // Terracotta/Earth orange - using RGB escape code
+  terracotta: "\x1b[38;2;217;119;87m",  // #D97757
+  bgTerracotta: "\x1b[48;2;217;119;87m"
+};
+
+/**
+ * Ask a question and return the user's answer
+ * @param {string} question - The question to ask
+ * @returns {Promise<string>} The user's answer
+ */
+async function prompt(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+/**
+ * Show a numbered menu and return the selected option number
+ * @param {string} question - The question to ask
+ * @param {string[]} options - Array of options to display
+ * @returns {Promise<number>} The selected option index (0-based)
+ */
+async function select(question, options) {
+  console.log(question);
+  options.forEach((option, index) => {
+    console.log(`  ${index + 1}. ${option}`);
+  });
+
+  while (true) {
+    const answer = await prompt("\nSelect option (number): ");
+    const num = parseInt(answer, 10);
+
+    if (!isNaN(num) && num >= 1 && num <= options.length) {
+      return num - 1;
+    }
+
+    console.log(`Invalid selection. Please enter a number between 1 and ${options.length}`);
+  }
+}
+
+/**
+ * Ask a yes/no question and return boolean
+ * @param {string} question - The question to ask
+ * @returns {Promise<boolean>} True for yes, false for no
+ */
+async function confirm(question) {
+  while (true) {
+    const answer = await prompt(`${question} (y/n): `);
+    const lower = answer.toLowerCase();
+
+    if (lower === "y" || lower === "yes") {
+      return true;
+    }
+    if (lower === "n" || lower === "no") {
+      return false;
+    }
+
+    console.log("Please answer 'y' or 'n'");
+  }
+}
+
+/**
+ * Pause execution until user presses Enter
+ * @param {string} [message="Press Enter to continue..."] - Message to display
+ * @returns {Promise<void>}
+ */
+async function pause(message = "Press Enter to continue...") {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  return new Promise((resolve) => {
+    rl.question(message, () => {
+      rl.close();
+      resolve();
+    });
+  });
+}
+
+/**
+ * Show interactive menu with arrow key navigation
+ * @param {string} title - Menu title
+ * @param {Array<{label: string, icon?: string}>} items - Menu items
+ * @param {number} defaultIndex - Default selected index
+ * @param {string} headerContent - Optional content to show above menu
+ * @param {Array<string>} breadcrumb - Optional breadcrumb path
+ * @returns {Promise<number>} Selected index, or -1 if ESC pressed
+ */
+async function selectMenu(title, items, defaultIndex = 0, headerContent = "", breadcrumb = []) {
+  return new Promise((resolve) => {
+    let selectedIndex = defaultIndex;
+    let isActive = true;
+    
+    // Remove any existing keypress listeners first
+    process.stdin.removeAllListeners("keypress");
+    
+    readline.emitKeypressEvents(process.stdin);
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true);
+    }
+
+    const renderMenu = () => {
+      if (!isActive) return;
+      
+      // Clear previous menu
+      process.stdout.write("\x1b[2J\x1b[H");
+      
+      // Show title with terracotta color
+      console.log(`\n${COLORS.terracotta}${"=".repeat(60)}${COLORS.reset}`);
+      console.log(`  ${COLORS.bright}${COLORS.terracotta}${title}${COLORS.reset}`);
+      console.log(`${COLORS.terracotta}${"=".repeat(60)}${COLORS.reset}`);
+      
+      // Show breadcrumb if provided
+      if (breadcrumb.length > 0) {
+        console.log(`  ${COLORS.dim}${breadcrumb.join(" > ")}${COLORS.reset}`);
+      }
+      console.log();
+      
+      // Show header content if provided
+      if (headerContent) {
+        console.log(headerContent);
+        console.log();
+      }
+      
+      // Show menu items with proper alignment
+      items.forEach((item, index) => {
+        const isSelected = index === selectedIndex;
+        
+        // Use ★ for selected, ☆ for normal
+        const icon = isSelected ? "★" : "☆";
+        
+        if (isSelected) {
+          // Selected: reverse + bright for high visibility on any terminal
+          console.log(` ${COLORS.reverse}${COLORS.bright}${icon} ${item.label}${COLORS.reset}`);
+        } else {
+          // Not selected: plain text with empty star
+          console.log(`  ${icon} ${item.label}`);
+        }
+      });
+    };
+
+    const cleanup = () => {
+      if (!isActive) return;
+      isActive = false;
+      
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false);
+      }
+      process.stdin.removeListener("keypress", onKeypress);
+      process.stdin.pause();
+    };
+
+    const onKeypress = (str, key) => {
+      if (!isActive || !key) return;
+      
+      if (key.name === "up") {
+        selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+        renderMenu();
+      } else if (key.name === "down") {
+        selectedIndex = (selectedIndex + 1) % items.length;
+        renderMenu();
+      } else if (key.name === "return") {
+        cleanup();
+        resolve(selectedIndex);
+      } else if (key.name === "escape") {
+        cleanup();
+        resolve(-1);
+      } else if (key.ctrl && key.name === "c") {
+        cleanup();
+        process.exit(0);
+      }
+    };
+
+    process.stdin.on("keypress", onKeypress);
+    process.stdin.resume();
+    renderMenu();
+  });
+}
+
+module.exports = {
+  prompt,
+  select,
+  confirm,
+  pause,
+  selectMenu
+};

package/src/cli/utils/menuHelper.js

@@ -0,0 +1,155 @@
+const { selectMenu } = require("./input");
+
+/**
+ * Show a menu with back button at top and handle selection
+ * @param {Object} config - Menu configuration
+ * @param {string} config.title - Menu title
+ * @param {string} config.headerContent - Optional header content
+ * @param {Array<{label: string, action: Function}>} config.items - Menu items with actions
+ * @param {string} config.backLabel - Back button label (default: "← Back")
+ * @param {number} config.defaultIndex - Default selected index (default: 0)
+ * @param {Function} config.refresh - Optional refresh function to call after each action
+ * @param {Array<string>} config.breadcrumb - Optional breadcrumb path
+ * @returns {Promise<void>}
+ */
+async function showMenuWithBack(config) {
+  const {
+    title,
+    headerContent = "",
+    items,
+    backLabel = "← Back",
+    defaultIndex = 0,
+    refresh = null,
+    breadcrumb = []
+  } = config;
+
+  while (true) {
+    // Call refresh if provided
+    let refreshedData = null;
+    if (refresh) {
+      refreshedData = await refresh();
+      if (refreshedData === null) {
+        // Refresh failed, exit menu
+        return;
+      }
+    }
+
+    // Build menu items with back at top
+    const menuItems = [
+      { label: backLabel, icon: "☆" },
+      ...items.map(item => ({
+        label: typeof item.label === "function" ? item.label(refreshedData) : item.label,
+        icon: "☆"
+      }))
+    ];
+
+    // Resolve headerContent if it's a function
+    const resolvedHeader = typeof headerContent === "function" 
+      ? await headerContent(refreshedData) 
+      : headerContent;
+
+    const selected = await selectMenu(
+      title,
+      menuItems,
+      defaultIndex,
+      resolvedHeader,
+      breadcrumb
+    );
+
+    // Back or ESC
+    if (selected === -1 || selected === 0) {
+      return;
+    }
+
+    // Execute action for selected item
+    const actionIndex = selected - 1;
+    const item = items[actionIndex];
+    
+    if (item && item.action) {
+      const shouldContinue = await item.action(refreshedData);
+      // If action returns false, exit menu
+      if (shouldContinue === false) {
+        return;
+      }
+    }
+  }
+}
+
+/**
+ * Show a list menu where items are fetched dynamically
+ * @param {Object} config - Menu configuration
+ * @param {string} config.title - Menu title
+ * @param {string} config.headerContent - Optional header content
+ * @param {Function} config.fetchItems - Async function to fetch items array
+ * @param {Function} config.formatItem - Function to format each item to {label, data}
+ * @param {Function} config.onSelect - Action when item is selected
+ * @param {Object} config.createAction - Optional create action {label, action}
+ * @param {string} config.backLabel - Back button label
+ * @param {Array<string>} config.breadcrumb - Optional breadcrumb path
+ * @returns {Promise<void>}
+ */
+async function showListMenu(config) {
+  const {
+    title,
+    headerContent = "",
+    fetchItems,
+    formatItem,
+    onSelect,
+    createAction = null,
+    backLabel = "← Back",
+    breadcrumb = []
+  } = config;
+
+  while (true) {
+    // Fetch items
+    const result = await fetchItems();
+    if (!result) {
+      return;
+    }
+
+    const items = result.items || [];
+    const metadata = result.metadata || {};
+
+    // Build menu items
+    const menuItems = [{ label: backLabel, icon: "☆" }];
+    
+    if (createAction) {
+      menuItems.push({ label: createAction.label, icon: "☆" });
+    }
+
+    items.forEach(item => {
+      const formatted = formatItem(item);
+      menuItems.push({ label: formatted, icon: "☆" });
+    });
+
+    const header = typeof headerContent === "function" 
+      ? await headerContent(metadata) 
+      : headerContent;
+
+    const selected = await selectMenu(title, menuItems, 0, header, breadcrumb);
+
+    // Back or ESC
+    if (selected === -1 || selected === 0) {
+      return;
+    }
+
+    // Create action
+    if (createAction && selected === 1) {
+      await createAction.action();
+      continue;
+    }
+
+    // Select item
+    const offset = createAction ? 2 : 1;
+    const itemIndex = selected - offset;
+    
+    if (itemIndex >= 0 && itemIndex < items.length) {
+      await onSelect(items[itemIndex]);
+    }
+  }
+}
+
+module.exports = {
+  showMenuWithBack,
+  showListMenu
+};