otherwise-cli 0.1.0

package/src/ui/ink-runner.js

@@ -0,0 +1,22 @@
+/**
+ * Ink UI Runner Script
+ * This script is invoked by tsx to run the Ink-based CLI
+ * It handles JSX transpilation at runtime
+ */
+
+import chalk from 'chalk';
+import { startInkCli } from './index.js';
+
+// Parse command line arguments
+const serverUrl = process.argv[2] || 'http://localhost:3000';
+const showBanner = process.argv[3] !== 'false';
+const isRemoteMode = process.argv[4] === 'remote';
+
+// Start the Ink CLI
+const instance = await startInkCli({ serverUrl, showBanner, isRemoteMode });
+
+// Wait for the user to exit
+await instance.waitUntilExit();
+
+// Show goodbye message
+console.log(chalk.dim.italic('\nGoodbye'));

package/src/ui/utils/formatters.js

@@ -0,0 +1,424 @@
+/**
+ * Formatting utilities for the Ink UI
+ * Ported and enhanced from chat/renderer.js
+ *
+ * Includes responsive utilities for terminal width adaptation
+ */
+
+/**
+ * Strip ANSI escape codes from string
+ * @param {string} str - String with ANSI codes
+ * @returns {string} - Clean string
+ */
+export function stripAnsi(str) {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "");
+}
+
+/**
+ * Truncate string to max length with ellipsis
+ * @param {string} str - String to truncate
+ * @param {number} maxLen - Maximum length
+ * @returns {string} - Truncated string
+ */
+export function truncate(str, maxLen) {
+  if (!str) return "";
+  const stripped = stripAnsi(str);
+  if (stripped.length <= maxLen) return str;
+  return str.substring(0, maxLen - 1) + "…";
+}
+
+/**
+ * Responsive truncation that ensures minimum visible content
+ * @param {string} text - Text to truncate
+ * @param {number} availableWidth - Available width in characters
+ * @param {object} options - Options
+ * @param {number} options.minChars - Minimum characters to show (default: 10)
+ * @param {string} options.ellipsis - Ellipsis character (default: '…')
+ * @returns {string} - Truncated text
+ */
+export function responsiveTruncate(text, availableWidth, options = {}) {
+  if (!text) return "";
+
+  const { minChars = 10, ellipsis = "…" } = options;
+  const maxLen = Math.max(minChars, availableWidth);
+  const stripped = stripAnsi(text);
+
+  if (stripped.length <= maxLen) return text;
+
+  return text.substring(0, maxLen - ellipsis.length) + ellipsis;
+}
+
+/**
+ * Smart path truncation - keeps filename visible, truncates middle of path
+ * @param {string} path - File path to truncate
+ * @param {number} maxLen - Maximum length
+ * @returns {string} - Truncated path
+ */
+export function truncatePath(path, maxLen) {
+  if (!path || path.length <= maxLen) return path || "";
+
+  const parts = path.split("/");
+  const filename = parts.pop();
+
+  // If filename alone is too long, truncate it
+  if (filename.length >= maxLen - 3) {
+    return "…" + filename.slice(-(maxLen - 1));
+  }
+
+  // Keep filename, truncate directory path
+  const remainingLen = maxLen - filename.length - 4; // "…/filename"
+  if (remainingLen <= 0) {
+    return "…/" + filename;
+  }
+
+  const dirPath = parts.join("/");
+  if (dirPath.length <= remainingLen) {
+    return dirPath + "/" + filename;
+  }
+
+  return "…" + dirPath.slice(-remainingLen) + "/" + filename;
+}
+
+/**
+ * Calculate proportionally scaled column widths for tables
+ * @param {Array<{width: number, minWidth?: number}>} columns - Column definitions
+ * @param {number} terminalWidth - Current terminal width
+ * @param {number} baseWidth - Base width the columns were designed for (default: 100)
+ * @returns {Array<number>} - Scaled column widths
+ */
+export function scaleColumnWidths(columns, terminalWidth, baseWidth = 100) {
+  const scale = terminalWidth / baseWidth;
+
+  return columns.map((col) => {
+    const scaled = Math.floor(col.width * scale);
+    return Math.max(col.minWidth || 5, scaled);
+  });
+}
+
+/**
+ * Word wrap text to fit within a width, respecting word boundaries
+ * @param {string} text - Text to wrap
+ * @param {number} width - Maximum line width
+ * @returns {string[]} - Array of wrapped lines
+ */
+export function wordWrap(text, width) {
+  if (!text) return [];
+  if (width <= 0) return [text];
+
+  const words = text.split(/\s+/);
+  const lines = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    if (currentLine.length === 0) {
+      currentLine = word;
+    } else if (currentLine.length + 1 + word.length <= width) {
+      currentLine += " " + word;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines;
+}
+
+/**
+ * Format file size in human-readable format
+ * @param {number} bytes - Size in bytes
+ * @returns {string} - Formatted size
+ */
+export function formatSize(bytes) {
+  if (bytes === null || bytes === undefined) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/**
+ * Format duration in human-readable format
+ * @param {number} ms - Duration in milliseconds
+ * @returns {string} - Formatted duration
+ */
+export function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60000);
+  const secs = ((ms % 60000) / 1000).toFixed(0);
+  return `${mins}m ${secs}s`;
+}
+
+/**
+ * Format elapsed time in human-readable format
+ * @param {number} ms - Elapsed milliseconds
+ * @returns {string} - Formatted time
+ */
+export function formatElapsed(ms) {
+  if (ms < 1000) return "";
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.floor((ms % 60000) / 1000);
+  return `${mins}m ${secs}s`;
+}
+
+/**
+ * Format relative time from date string or Date object
+ * @param {string|Date} dateInput - Date to format
+ * @returns {string} - Relative time string
+ */
+export function formatRelativeTime(dateInput) {
+  if (!dateInput) return "";
+
+  const date = dateInput instanceof Date ? dateInput : new Date(dateInput);
+  const now = new Date();
+  const diffMs = now - date;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
+  });
+}
+
+/**
+ * Format character count for display
+ * @param {number} chars - Character count
+ * @returns {string} - Formatted count
+ */
+export function formatCharCount(chars) {
+  if (chars > 1000) {
+    return `${(chars / 1000).toFixed(1)}k chars`;
+  }
+  return `${chars} chars`;
+}
+
+/**
+ * Format token count for display
+ * @param {number} tokens - Token count
+ * @returns {string} - Formatted count
+ */
+export function formatTokenCount(tokens) {
+  if (tokens > 1000) {
+    return `${(tokens / 1000).toFixed(1)}k`;
+  }
+  return `${tokens}`;
+}
+
+/**
+ * Get friendly model name from model ID
+ * @param {string} modelId - Full model ID
+ * @returns {string} - Friendly name
+ */
+export function getFriendlyModelName(modelId) {
+  if (!modelId) return "";
+
+  const modelNames = {
+    // Anthropic
+    "claude-sonnet-4-20250514": "Sonnet 4",
+    "claude-sonnet-4-5-20250929": "Sonnet 4.5",
+    "claude-opus-4-20250514": "Opus 4",
+    "claude-3-5-sonnet-20241022": "Sonnet 3.5",
+    "claude-3-5-haiku-20241022": "Haiku 3.5",
+    // OpenAI
+    "gpt-4o": "GPT-4o",
+    "gpt-4o-mini": "GPT-4o Mini",
+    o1: "o1",
+    "o1-mini": "o1 Mini",
+    "o1-preview": "o1 Preview",
+    "o3-mini": "o3 Mini",
+    // Google
+    "gemini-2.0-flash": "Gemini 2.0 Flash",
+    "gemini-2.0-flash-thinking": "Gemini 2.0 Thinking",
+    "gemini-1.5-pro": "Gemini 1.5 Pro",
+    "gemini-1.5-flash": "Gemini 1.5 Flash",
+    // xAI
+    "grok-2": "Grok 2",
+    "grok-2-vision": "Grok 2 Vision",
+    "grok-beta": "Grok Beta",
+  };
+
+  // Check for exact match
+  if (modelNames[modelId]) {
+    return modelNames[modelId];
+  }
+
+  // Check for partial match (for versioned models)
+  for (const [id, name] of Object.entries(modelNames)) {
+    if (modelId.includes(id) || id.includes(modelId)) {
+      return name;
+    }
+  }
+
+  // Handle Ollama models
+  if (modelId.startsWith("ollama:")) {
+    return modelId.replace("ollama:", "").split(":")[0];
+  }
+
+  // Fallback: clean up the model ID
+  return modelId
+    .replace(/-\d{8}$/, "") // Remove date suffix
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+/**
+ * Tool icons mapping
+ */
+export const TOOL_ICONS = {
+  // File operations
+  read_file: "📄",
+  write_file: "📝",
+  edit_file: "✏️",
+  list_dir: "📁",
+  list_directory: "📁",
+  read_dir: "📁",
+  search_files: "🔎",
+
+  // Shell
+  shell: "💻",
+  run_command: "💻",
+  execute_command: "💻",
+
+  // Web & Browser
+  web_search: "🔍",
+  fetch_url: "🌐",
+  browser_launch: "🌐",
+  browser_navigate: "🧭",
+  browser_read: "📖",
+  browser_click: "👆",
+  browser_type: "⌨️",
+  browser_close: "❌",
+  browser_screenshot: "📸",
+  deep_research: "🔬",
+
+  // Memory (chat history)
+  search_memory: "🧠",
+  read_memory: "💭",
+
+  // Communication
+  send_email: "📧",
+  check_email: "📬",
+
+  // Meta
+  set_title: "🏷️",
+  schedule_task: "⏰",
+  schedule_task_once: "⏰",
+  list_scheduled_tasks: "📋",
+  cancel_task: "🚫",
+
+  // Default
+  default: "🔧",
+};
+
+/**
+ * Get icon for a tool
+ * @param {string} toolName - Tool name
+ * @returns {string} - Icon
+ */
+export function getToolIcon(toolName) {
+  return TOOL_ICONS[toolName] || TOOL_ICONS.default;
+}
+
+/**
+ * Format tool name for display
+ * @param {string} toolName - Tool name
+ * @returns {string} - Formatted name
+ */
+export function formatToolName(toolName) {
+  return toolName.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+/**
+ * Get primary argument from tool args for display
+ * @param {string} toolName - Tool name
+ * @param {object} args - Tool arguments
+ * @returns {string} - Primary argument string
+ */
+export function getPrimaryArg(toolName, args = {}) {
+  switch (toolName) {
+    case "read_file":
+    case "write_file":
+    case "edit_file":
+      return args.path || "";
+    case "list_dir":
+    case "read_dir":
+      return args.path || args.dir || ".";
+    case "shell":
+    case "run_command":
+      return args.command ? truncate(args.command, 50) : "";
+    case "web_search":
+      return args.query ? `"${truncate(args.query, 40)}"` : "";
+    case "fetch_url":
+    case "browser_navigate":
+      return args.url ? truncate(args.url, 50) : "";
+    case "send_email":
+      return args.to || "";
+    case "set_title":
+      return args.title ? `"${args.title}"` : "";
+    case "search_files":
+      return args.query ? `"${truncate(args.query, 40)}"` : "";
+    case "search_memory":
+      return args.query ? `"${truncate(args.query, 40)}"` : "";
+    case "read_memory":
+      return args.chat_id
+        ? `Chat #${args.chat_id}`
+        : args.chatId
+          ? `Chat #${args.chatId}`
+          : "";
+    case "deep_research":
+      return args.topic ? `"${truncate(args.topic, 40)}"` : "";
+    case "browser_screenshot":
+      return args.filename || "screenshot";
+    default:
+      // Try to find a sensible primary arg
+      const keys = Object.keys(args);
+      if (keys.length > 0) {
+        const val = args[keys[0]];
+        if (typeof val === "string") {
+          return truncate(val, 40);
+        }
+      }
+      return "";
+  }
+}
+
+/**
+ * Tools that produce streaming output
+ */
+const STREAMING_TOOLS = new Set(["write_file", "edit_file"]);
+
+/**
+ * Check if a tool is a streaming tool
+ * @param {string} toolName - Tool name
+ * @returns {boolean} - True if streaming
+ */
+export function isStreamingTool(toolName) {
+  return STREAMING_TOOLS.has(toolName);
+}
+
+/**
+ * Hidden tools that shouldn't be displayed
+ */
+const HIDDEN_TOOLS = new Set(["set_title"]);
+
+/**
+ * Check if a tool should be hidden from display
+ * @param {string} toolName - Tool name
+ * @returns {boolean} - True if hidden
+ */
+export function isHiddenTool(toolName) {
+  return HIDDEN_TOOLS.has(toolName);
+}

package/src/ui/utils/index.js

@@ -0,0 +1,6 @@
+/**
+ * UI utilities index
+ */
+
+export * from './formatters.js';
+export * from './markdown.js';

package/src/ui/utils/markdown.js

@@ -0,0 +1,166 @@
+/**
+ * Terminal markdown rendering utilities
+ * Uses marked + marked-terminal for rendering markdown in the terminal
+ * 
+ * Refactored for responsive rendering - width is now dynamic based on terminal size
+ */
+
+import { Marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import chalk from 'chalk';
+import { highlight } from 'cli-highlight';
+import { getTerminalWidth } from '../hooks/useTerminalSize.js';
+
+/**
+ * Cache for marked instances by width to avoid recreating on every render
+ * @type {Map<number, Marked>}
+ */
+const markedCache = new Map();
+
+/**
+ * Default markdown rendering options
+ */
+const DEFAULT_OPTIONS = {
+  // Colors and styles
+  firstHeading: chalk.bold.cyan,
+  heading: chalk.bold.white,
+  strong: chalk.bold,
+  em: chalk.italic,
+  codespan: chalk.bgGray.white,
+  del: chalk.strikethrough,
+  link: chalk.cyan,
+  href: chalk.cyan.underline,
+  code: chalk.gray,
+  blockquote: chalk.gray.italic,
+  // Options
+  reflowText: true,
+  showSectionPrefix: false,
+  tab: 2,
+  unescape: true,
+};
+
+/**
+ * Get or create a marked instance for a specific width
+ * @param {number} width - Terminal width for text reflow
+ * @returns {Marked} Configured marked instance
+ */
+function getMarkedInstance(width) {
+  // Round width to nearest 10 to improve cache hits
+  const cacheKey = Math.round(width / 10) * 10;
+  
+  if (markedCache.has(cacheKey)) {
+    return markedCache.get(cacheKey);
+  }
+  
+  const marked = new Marked();
+  marked.use(markedTerminal({
+    ...DEFAULT_OPTIONS,
+    width: cacheKey,
+  }));
+  
+  // Limit cache size to prevent memory leaks
+  if (markedCache.size > 10) {
+    const firstKey = markedCache.keys().next().value;
+    markedCache.delete(firstKey);
+  }
+  
+  markedCache.set(cacheKey, marked);
+  return marked;
+}
+
+/**
+ * Render markdown to terminal-formatted text
+ * Width is now dynamic - either passed explicitly or read from terminal
+ * 
+ * @param {string} text - Markdown text
+ * @param {number} [width] - Optional width override (defaults to terminal width)
+ * @returns {string} - Terminal-formatted text
+ */
+export function renderMarkdown(text, width = null) {
+  if (!text) return '';
+  
+  // Determine effective width
+  // Use provided width, or get current terminal width, with sensible bounds
+  const terminalWidth = width ?? getTerminalWidth();
+  const effectiveWidth = Math.max(40, Math.min(terminalWidth - 4, 120));
+  
+  try {
+    const marked = getMarkedInstance(effectiveWidth);
+    const result = marked.parse(text);
+    // Clean up extra newlines
+    return result.replace(/\n{3,}/g, '\n\n').trim();
+  } catch (e) {
+    // Fallback to plain text if parsing fails
+    return text;
+  }
+}
+
+/**
+ * Render markdown with explicit width from terminal context
+ * Use this when you have access to useTerminal() hook
+ * 
+ * @param {string} text - Markdown text
+ * @param {number} contentWidth - Width from terminal context
+ * @returns {string} - Terminal-formatted text
+ */
+export function renderMarkdownWithWidth(text, contentWidth) {
+  return renderMarkdown(text, contentWidth);
+}
+
+/**
+ * Highlight code with syntax highlighting
+ * @param {string} code - Code to highlight
+ * @param {string} language - Language for highlighting
+ * @returns {string} - Highlighted code
+ */
+export function highlightCode(code, language = '') {
+  try {
+    return highlight(code, {
+      language: language || 'plaintext',
+      ignoreIllegals: true,
+    });
+  } catch (e) {
+    // Fallback to plain code if highlighting fails
+    return code;
+  }
+}
+
+/**
+ * Format a code block with language label
+ * @param {string} code - Code content
+ * @param {string} language - Language name
+ * @param {number} [maxWidth] - Maximum width for the code block
+ * @returns {string} - Formatted code block
+ */
+export function formatCodeBlock(code, language = '', maxWidth = null) {
+  const highlighted = highlightCode(code, language);
+  const langLabel = language ? `[${language}]` : '';
+  
+  // If maxWidth provided, truncate long lines
+  if (maxWidth) {
+    const lines = highlighted.split('\n').map(line => {
+      if (line.length > maxWidth) {
+        return line.slice(0, maxWidth - 3) + '...';
+      }
+      return line;
+    });
+    return `${langLabel}\n${lines.join('\n')}`;
+  }
+  
+  return `${langLabel}\n${highlighted}`;
+}
+
+/**
+ * Clear the marked cache (useful for testing or when terminal resizes dramatically)
+ */
+export function clearMarkdownCache() {
+  markedCache.clear();
+}
+
+export default {
+  renderMarkdown,
+  renderMarkdownWithWidth,
+  highlightCode,
+  formatCodeBlock,
+  clearMarkdownCache,
+};