@navios/commander-tui 1.0.0

package/src/types/theme.types.ts

@@ -0,0 +1,252 @@
+import type { LogLevel } from '@navios/core'
+
+// ============================================
+// Theme Type Definitions
+// ============================================
+
+/**
+ * Color scheme for a single log level.
+ */
+export interface LogLevelTheme {
+  border: string
+  background: string
+  text?: string
+}
+
+/**
+ * Sidebar color scheme.
+ */
+export interface SidebarTheme {
+  background?: string
+  selectedBackground: string
+  hoverBackground: string
+  text: string
+  textDim: string
+  border: string
+  badge: string
+  focusBorder: string
+}
+
+/**
+ * Screen header color scheme.
+ */
+export interface HeaderTheme {
+  background?: string
+  text: string
+  border: string
+}
+
+/**
+ * Status indicator with icon and color.
+ */
+export interface StatusIndicator {
+  icon: string
+  color: string
+}
+
+/**
+ * Status indicators for all screen states.
+ */
+export interface StatusIndicatorsTheme {
+  waiting: StatusIndicator
+  pending: StatusIndicator
+  success: StatusIndicator
+  fail: StatusIndicator
+}
+
+/**
+ * Separator colors for sidebar sections.
+ */
+export interface SeparatorTheme {
+  line: string
+  text: string
+}
+
+/**
+ * Progress bar and loading indicator colors.
+ */
+export interface ProgressTheme {
+  border: string
+  background: string
+  barFilled: string
+  barEmpty: string
+  text: string
+  textDim: string
+  complete: string
+  completeBackground: string
+  failed: string
+  failedBackground: string
+}
+
+/**
+ * Collapsible group colors.
+ */
+export interface GroupTheme {
+  border: string
+  background: string
+  headerText: string
+  icon: string
+}
+
+/**
+ * Table display colors.
+ */
+export interface TableTheme {
+  border: string
+  background: string
+  headerText: string
+  cellText: string
+  title: string
+  separator: string
+}
+
+/**
+ * File display colors.
+ */
+export interface FileTheme {
+  border: string
+  background: string
+  headerText: string
+  headerBackground: string
+}
+
+/**
+ * Interactive prompt colors.
+ */
+export interface PromptTheme {
+  question: string
+  optionText: string
+  optionTextDim: string
+  optionSelected: string
+  optionSelectedBackground: string
+  confirmButton: string
+  cancelButton: string
+  buttonBackground: string
+  buttonSelectedBackground: string
+  inputBorder: string
+  inputBackground: string
+  inputText: string
+  inputPlaceholder: string
+  inputCursor: string
+  border: string
+  focusBorder: string
+}
+
+/**
+ * Error highlighting colors for file displays.
+ */
+export interface ErrorHighlightTheme {
+  background: string
+  border: string
+  gutterBackground: string
+}
+
+/**
+ * Filter bar colors.
+ */
+export interface FilterTheme {
+  background: string
+  border: string
+  text: string
+  textDim: string
+  inputBackground: string
+  inputText: string
+  inputPlaceholder: string
+  cursor: string
+  activeLevel: string
+  inactiveLevel: string
+}
+
+/**
+ * Help overlay colors.
+ */
+export interface HelpTheme {
+  background: string
+  border: string
+  title: string
+  category: string
+  key: string
+  description: string
+  hint: string
+}
+
+/**
+ * General semantic colors.
+ */
+export interface SemanticColors {
+  primary: string
+  secondary: string
+  success: string
+  warning: string
+  error: string
+  muted: string
+  background?: string
+  foreground: string
+}
+
+/**
+ * Complete theme definition.
+ */
+export interface Theme {
+  /** Theme identifier */
+  name: string
+
+  /** Log level color schemes */
+  logLevels: Record<LogLevel, LogLevelTheme>
+
+  /** Sidebar colors */
+  sidebar: SidebarTheme
+
+  /** Screen header colors */
+  header: HeaderTheme
+
+  /** Status indicator colors and icons */
+  statusIndicators: StatusIndicatorsTheme
+
+  /** Separator colors */
+  separator: SeparatorTheme
+
+  /** Progress bar colors */
+  progress: ProgressTheme
+
+  /** Collapsible group colors */
+  group: GroupTheme
+
+  /** Table display colors */
+  table: TableTheme
+
+  /** File display colors */
+  file: FileTheme
+
+  /** Prompt colors */
+  prompt: PromptTheme
+
+  /** Error highlighting colors */
+  errorHighlight: ErrorHighlightTheme
+
+  /** Filter bar colors */
+  filter: FilterTheme
+
+  /** Help overlay colors */
+  help: HelpTheme
+
+  /** General semantic colors */
+  colors: SemanticColors
+}
+
+/**
+ * Theme preset names.
+ */
+export type ThemePreset = 'dark' | 'light' | 'high-contrast'
+
+/**
+ * Deep partial type for theme overrides.
+ */
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
+}
+
+/**
+ * Partial theme for creating custom themes.
+ */
+export type PartialTheme = DeepPartial<Theme>

package/src/utils/colors/file-colors.ts

@@ -0,0 +1,9 @@
+/**
+ * File display colors (uses info/blue scheme).
+ */
+export const FILE_COLORS = {
+  border: '#3B82F6', // Blue-500 (same as info)
+  background: '#3B82F615', // Blue with 8% opacity
+  headerText: '#F9FAFB', // Gray-50
+  headerBackground: '#3B82F625', // Blue with 15% opacity
+}

package/src/utils/colors/helpers.ts

@@ -0,0 +1,50 @@
+import { RGBA } from '@opentui/core'
+
+import type { LogLevel } from '@navios/core'
+
+import type { LogLevelColorMap, LogLevelColors } from '../../types/index.ts'
+
+import { DEFAULT_LOG_LEVEL_COLORS } from './log-colors.ts'
+
+/**
+ * Creates a tinted (subtle) version of a color by setting alpha.
+ *
+ * @param color - The base color (hex string or RGBA)
+ * @param alpha - Target alpha value (0-1), default 0.08 for subtle tinting
+ * @returns New RGBA with adjusted alpha
+ */
+export function createTintedColor(color: string | RGBA, alpha: number = 0.08): RGBA {
+  const rgba = typeof color === 'string' ? RGBA.fromHex(color) : color
+  return RGBA.fromValues(rgba.r, rgba.g, rgba.b, alpha)
+}
+
+/**
+ * Creates a more prominent version of a color for borders.
+ *
+ * @param color - The base color
+ * @param alpha - Target alpha, default 1.0 for solid borders
+ */
+export function createBorderColor(color: string | RGBA, alpha: number = 1.0): RGBA {
+  const rgba = typeof color === 'string' ? RGBA.fromHex(color) : color
+  return RGBA.fromValues(rgba.r, rgba.g, rgba.b, alpha)
+}
+
+/**
+ * Gets colors for a specific log level.
+ *
+ * @param level - The log level
+ * @param customColors - Optional custom color map
+ */
+export function getLogLevelColors(
+  level: LogLevel,
+  customColors?: Partial<LogLevelColorMap>,
+): LogLevelColors {
+  const defaultColors = DEFAULT_LOG_LEVEL_COLORS[level]
+  const custom = customColors?.[level]
+
+  return {
+    border: custom?.border ?? defaultColors.border,
+    background: custom?.background ?? defaultColors.background,
+    text: custom?.text ?? defaultColors.text,
+  }
+}

package/src/utils/colors/index.ts

@@ -0,0 +1,20 @@
+// Log level colors
+export * from './log-colors.ts'
+
+// Sidebar and header colors
+export * from './sidebar-colors.ts'
+
+// Progress and group colors
+export * from './progress-colors.ts'
+
+// Table colors
+export * from './table-colors.ts'
+
+// File colors
+export * from './file-colors.ts'
+
+// Prompt colors
+export * from './prompt-colors.ts'
+
+// Helper functions
+export * from './helpers.ts'

package/src/utils/colors/log-colors.ts

@@ -0,0 +1,56 @@
+import type { LogLevelColorMap, LogLevelColors, LogMessageVariant } from '../../types/index.ts'
+
+/**
+ * Default color scheme for all log levels.
+ * Each level has a prominent border color and a subtle background tint.
+ */
+export const DEFAULT_LOG_LEVEL_COLORS: LogLevelColorMap = {
+  verbose: {
+    border: '#6B7280', // Gray-500
+    background: '#6B728015', // Gray with 8% opacity
+  },
+  debug: {
+    border: '#8B5CF6', // Violet-500
+    background: '#8B5CF615', // Violet with 8% opacity
+  },
+  log: {
+    border: '#3B82F6', // Blue-500
+    background: '#3B82F615', // Blue with 8% opacity
+  },
+  warn: {
+    border: '#F59E0B', // Amber-500
+    background: '#F59E0B15', // Amber with 8% opacity
+  },
+  error: {
+    border: '#EF4444', // Red-500
+    background: '#EF444415', // Red with 8% opacity
+  },
+  fatal: {
+    border: '#DC2626', // Red-600
+    background: '#DC262625', // Red with 15% opacity (more prominent)
+    text: '#FCA5A5', // Light red text for contrast
+  },
+}
+
+/**
+ * Colors for semantic variants (override level colors when variant is set).
+ */
+export const VARIANT_COLORS: Record<LogMessageVariant, LogLevelColors> = {
+  success: {
+    border: '#22C55E', // Green-500
+    background: '#22C55E15', // Green with 8% opacity
+  },
+  trace: {
+    border: '#6B7280', // Gray-500
+    background: '#6B728015', // Gray with 8% opacity
+  },
+}
+
+/**
+ * Error highlighting colors.
+ */
+export const ERROR_HIGHLIGHT_COLORS = {
+  background: '#EF444425', // Red with 15% opacity
+  border: '#EF4444', // Red-500
+  gutterBackground: '#EF444440', // Red with 25% opacity for line number gutter
+}

package/src/utils/colors/progress-colors.ts

@@ -0,0 +1,25 @@
+/**
+ * Progress bar colors.
+ */
+export const PROGRESS_COLORS = {
+  border: '#3B82F6', // Blue-500
+  background: '#3B82F615', // Blue with 8% opacity
+  barFilled: '#3B82F6', // Blue-500
+  barEmpty: '#374151', // Gray-700
+  text: '#E5E7EB', // Gray-200
+  textDim: '#9CA3AF', // Gray-400
+  complete: '#22C55E', // Green-500
+  completeBackground: '#22C55E15',
+  failed: '#EF4444', // Red-500
+  failedBackground: '#EF444415',
+}
+
+/**
+ * Group colors for collapsible log groups.
+ */
+export const GROUP_COLORS = {
+  border: '#6B7280', // Gray-500
+  background: '#6B728010', // Gray with 6% opacity
+  headerText: '#E5E7EB', // Gray-200
+  icon: '#9CA3AF', // Gray-400
+}

package/src/utils/colors/prompt-colors.ts

@@ -0,0 +1,30 @@
+/**
+ * Prompt colors for interactive prompts.
+ */
+export const PROMPT_COLORS = {
+  // Question text
+  question: '#F9FAFB', // Gray-50
+
+  // Choice options
+  optionText: '#E5E7EB', // Gray-200
+  optionTextDim: '#9CA3AF', // Gray-400
+  optionSelected: '#3B82F6', // Blue-500
+  optionSelectedBackground: '#1E3A5F', // Dark blue
+
+  // Confirm buttons
+  confirmButton: '#22C55E', // Green-500
+  cancelButton: '#EF4444', // Red-500
+  buttonBackground: '#374151', // Gray-700
+  buttonSelectedBackground: '#1F2937', // Gray-800
+
+  // Input field
+  inputBorder: '#3B82F6', // Blue-500
+  inputBackground: '#1F2937', // Gray-800
+  inputText: '#F9FAFB', // Gray-50
+  inputPlaceholder: '#6B7280', // Gray-500
+  inputCursor: '#3B82F6', // Blue-500
+
+  // General
+  border: '#374151', // Gray-700
+  focusBorder: '#3B82F6', // Blue-500
+}

package/src/utils/colors/sidebar-colors.ts

@@ -0,0 +1,52 @@
+/**
+ * Sidebar colors.
+ */
+export const SIDEBAR_COLORS = {
+  background: undefined, // Transparent - blend with terminal
+  selectedBackground: '#1F293780', // Gray-800 with 50% opacity
+  hoverBackground: '#374151', // Gray-700
+  text: '#E5E7EB', // Gray-200
+  textDim: '#6B7280', // Gray-500
+  border: '#374151', // Gray-700
+  badge: '#3B82F6', // Blue-500
+  focusBorder: '#3B82F6', // Blue-500
+}
+
+/**
+ * Screen header colors.
+ */
+export const HEADER_COLORS = {
+  background: undefined, // Transparent - blend with terminal
+  text: '#F9FAFB', // Gray-50
+  border: '#374151', // Gray-700
+}
+
+/**
+ * Screen status indicator colors and icons.
+ */
+export const STATUS_INDICATORS = {
+  waiting: {
+    icon: '○', // Empty circle
+    color: '#6B7280', // Gray-500
+  },
+  pending: {
+    icon: '◐', // Half circle (spinner-like)
+    color: '#F59E0B', // Amber-500
+  },
+  success: {
+    icon: '✓', // Checkmark
+    color: '#22C55E', // Green-500
+  },
+  fail: {
+    icon: '✗', // X mark
+    color: '#EF4444', // Red-500
+  },
+} as const
+
+/**
+ * Separator colors for sidebar sections.
+ */
+export const SEPARATOR_COLORS = {
+  line: '#374151', // Gray-700
+  text: '#6B7280', // Gray-500
+}

package/src/utils/colors/table-colors.ts

@@ -0,0 +1,11 @@
+/**
+ * Table colors (uses info/blue scheme).
+ */
+export const TABLE_COLORS = {
+  border: '#3B82F6', // Blue-500 (same as info)
+  background: '#3B82F615', // Blue with 8% opacity
+  headerText: '#F9FAFB', // Gray-50
+  cellText: '#E5E7EB', // Gray-200
+  title: '#F9FAFB', // Gray-50
+  separator: '#3B82F650', // Blue with 30% opacity
+}

package/src/utils/filetype.ts

@@ -0,0 +1,64 @@
+/**
+ * Common file extension to filetype mapping for syntax highlighting.
+ */
+export const COMMON_FILETYPES: Record<string, string> = {
+  ts: 'typescript',
+  tsx: 'tsx',
+  js: 'javascript',
+  jsx: 'javascript',
+  json: 'json',
+  md: 'markdown',
+  py: 'python',
+  rs: 'rust',
+  go: 'go',
+  java: 'java',
+  c: 'c',
+  cpp: 'cpp',
+  h: 'c',
+  hpp: 'cpp',
+  css: 'css',
+  html: 'html',
+  yaml: 'yaml',
+  yml: 'yaml',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  toml: 'toml',
+  xml: 'xml',
+  sql: 'sql',
+  rb: 'ruby',
+  php: 'php',
+  swift: 'swift',
+  kt: 'kotlin',
+  scala: 'scala',
+  hs: 'haskell',
+  elm: 'elm',
+  vue: 'vue',
+  svelte: 'svelte',
+}
+
+/**
+ * Resolves filetype from file path for syntax highlighting.
+ *
+ * @param filePath - Full file path or just filename
+ * @returns Filetype string for tree-sitter, or undefined
+ */
+export function resolveFiletype(filePath: string): string | undefined {
+  // Extract extension from path
+  const lastDot = filePath.lastIndexOf('.')
+  if (lastDot === -1) return undefined
+
+  const ext = filePath.slice(lastDot + 1).toLowerCase()
+  return COMMON_FILETYPES[ext]
+}
+
+/**
+ * Gets the filename from a full path.
+ *
+ * @param filePath - Full file path
+ * @returns Just the filename
+ */
+export function getFileName(filePath: string): string {
+  const lastSlash = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'))
+  return lastSlash === -1 ? filePath : filePath.slice(lastSlash + 1)
+}

package/src/utils/format.ts

@@ -0,0 +1,52 @@
+/**
+ * Format an object for display with configurable depth
+ */
+export function formatObject(obj: unknown, depth: number = 2, currentDepth: number = 0): string {
+  if (currentDepth >= depth) {
+    if (Array.isArray(obj)) return '[Array]'
+    if (typeof obj === 'object' && obj !== null) {
+      const constructorName = obj.constructor?.name ?? 'Object'
+      return `[${constructorName}]`
+    }
+    return String(obj)
+  }
+
+  if (obj === null) return 'null'
+  if (obj === undefined) return 'undefined'
+  if (typeof obj === 'string') return `"${obj}"`
+  if (typeof obj === 'number' || typeof obj === 'boolean') return String(obj)
+  if (typeof obj === 'function') return '[Function]'
+  if (obj instanceof Date) return obj.toISOString()
+  if (obj instanceof Error) return `${obj.name}: ${obj.message}`
+
+  const indent = '  '.repeat(currentDepth)
+  const childIndent = '  '.repeat(currentDepth + 1)
+
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return '[]'
+    const items = obj.map((item) => formatObject(item, depth, currentDepth + 1))
+    return `[\n${childIndent}${items.join(`,\n${childIndent}`)}\n${indent}]`
+  }
+
+  if (typeof obj === 'object') {
+    const entries = Object.entries(obj)
+    if (entries.length === 0) return '{}'
+    const pairs = entries.map(
+      ([key, value]) => `${key}: ${formatObject(value, depth, currentDepth + 1)}`,
+    )
+    return `{\n${childIndent}${pairs.join(`,\n${childIndent}`)}\n${indent}}`
+  }
+
+  return String(obj)
+}
+
+/**
+ * Capture a stack trace, filtering out internal frames
+ */
+export function captureTrace(): string {
+  const err = new Error()
+  const stack = err.stack ?? ''
+  const lines = stack.split('\n')
+  // Skip the first 4 lines: Error, captureTrace, trace method, and the log method
+  return lines.slice(4).join('\n')
+}

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+// Colors
+export * from './colors/index.ts'
+
+// File utilities
+export * from './filetype.ts'
+
+// Stdout printer
+export * from './stdout-printer.ts'
+
+// Format utilities
+export * from './format.ts'