@navios/commander-tui 1.0.0

package/src/themes/high-contrast.ts

@@ -0,0 +1,178 @@
+import type { Theme } from '../types/index.ts'
+
+/**
+ * High contrast theme for accessibility.
+ * Uses pure black/white with saturated colors for maximum visibility.
+ */
+export const highContrastTheme: Theme = {
+  name: 'high-contrast',
+
+  logLevels: {
+    verbose: {
+      border: '#FFFFFF',
+      background: '#1A1A1A',
+      text: '#FFFFFF',
+    },
+    debug: {
+      border: '#A855F7', // Purple-500
+      background: '#1A1A1A',
+      text: '#E9D5FF', // Purple-200
+    },
+    log: {
+      border: '#3B82F6', // Blue-500
+      background: '#1A1A1A',
+      text: '#BFDBFE', // Blue-200
+    },
+    warn: {
+      border: '#FBBF24', // Amber-400
+      background: '#1A1A1A',
+      text: '#FEF08A', // Yellow-200
+    },
+    error: {
+      border: '#EF4444', // Red-500
+      background: '#1A1A1A',
+      text: '#FECACA', // Red-200
+    },
+    fatal: {
+      border: '#FF0000', // Pure red
+      background: '#330000',
+      text: '#FFFFFF',
+    },
+  },
+
+  sidebar: {
+    background: '#000000',
+    selectedBackground: '#333333',
+    hoverBackground: '#1A1A1A',
+    text: '#FFFFFF',
+    textDim: '#AAAAAA',
+    border: '#FFFFFF',
+    badge: '#FFFF00', // Yellow for high visibility
+    focusBorder: '#FFFF00',
+  },
+
+  header: {
+    background: '#000000',
+    text: '#FFFFFF',
+    border: '#FFFFFF',
+  },
+
+  statusIndicators: {
+    waiting: {
+      icon: '○',
+      color: '#AAAAAA',
+    },
+    pending: {
+      icon: '◐',
+      color: '#FBBF24', // Amber-400
+    },
+    success: {
+      icon: '✓',
+      color: '#22C55E', // Green-500
+    },
+    fail: {
+      icon: '✗',
+      color: '#EF4444', // Red-500
+    },
+  },
+
+  separator: {
+    line: '#FFFFFF',
+    text: '#AAAAAA',
+  },
+
+  progress: {
+    border: '#3B82F6',
+    background: '#1A1A1A',
+    barFilled: '#3B82F6',
+    barEmpty: '#333333',
+    text: '#FFFFFF',
+    textDim: '#AAAAAA',
+    complete: '#22C55E',
+    completeBackground: '#1A1A1A',
+    failed: '#EF4444',
+    failedBackground: '#1A1A1A',
+  },
+
+  group: {
+    border: '#FFFFFF',
+    background: '#1A1A1A',
+    headerText: '#FFFFFF',
+    icon: '#AAAAAA',
+  },
+
+  table: {
+    border: '#FFFFFF',
+    background: '#1A1A1A',
+    headerText: '#FFFFFF',
+    cellText: '#FFFFFF',
+    title: '#FFFFFF',
+    separator: '#666666',
+  },
+
+  file: {
+    border: '#FFFFFF',
+    background: '#1A1A1A',
+    headerText: '#FFFFFF',
+    headerBackground: '#333333',
+  },
+
+  prompt: {
+    question: '#FFFFFF',
+    optionText: '#FFFFFF',
+    optionTextDim: '#AAAAAA',
+    optionSelected: '#FFFF00', // Yellow for high visibility
+    optionSelectedBackground: '#333333',
+    confirmButton: '#22C55E',
+    cancelButton: '#EF4444',
+    buttonBackground: '#333333',
+    buttonSelectedBackground: '#1A1A1A',
+    inputBorder: '#FFFF00',
+    inputBackground: '#1A1A1A',
+    inputText: '#FFFFFF',
+    inputPlaceholder: '#666666',
+    inputCursor: '#FFFF00',
+    border: '#FFFFFF',
+    focusBorder: '#FFFF00',
+  },
+
+  errorHighlight: {
+    background: '#330000',
+    border: '#FF0000',
+    gutterBackground: '#660000',
+  },
+
+  filter: {
+    background: '#1A1A1A',
+    border: '#FFFF00',
+    text: '#FFFFFF',
+    textDim: '#AAAAAA',
+    inputBackground: '#000000',
+    inputText: '#FFFFFF',
+    inputPlaceholder: '#666666',
+    cursor: '#FFFF00',
+    activeLevel: '#FFFF00',
+    inactiveLevel: '#666666',
+  },
+
+  help: {
+    background: '#000000',
+    border: '#FFFFFF',
+    title: '#FFFFFF',
+    category: '#FFFF00',
+    key: '#00FFFF', // Cyan for contrast
+    description: '#FFFFFF',
+    hint: '#AAAAAA',
+  },
+
+  colors: {
+    primary: '#3B82F6',
+    secondary: '#A855F7',
+    success: '#22C55E',
+    warning: '#FBBF24',
+    error: '#EF4444',
+    muted: '#AAAAAA',
+    background: '#000000',
+    foreground: '#FFFFFF',
+  },
+}

package/src/themes/index.ts

@@ -0,0 +1,4 @@
+export * from './dark.ts'
+export * from './light.ts'
+export * from './high-contrast.ts'
+export * from './utils.ts'

package/src/themes/light.ts

@@ -0,0 +1,172 @@
+import type { Theme } from '../types/index.ts'
+
+/**
+ * Light theme for terminals with light backgrounds.
+ */
+export const lightTheme: Theme = {
+  name: 'light',
+
+  logLevels: {
+    verbose: {
+      border: '#9CA3AF', // Gray-400
+      background: '#F3F4F6', // Gray-100
+    },
+    debug: {
+      border: '#7C3AED', // Violet-600
+      background: '#EDE9FE', // Violet-100
+    },
+    log: {
+      border: '#2563EB', // Blue-600
+      background: '#DBEAFE', // Blue-100
+    },
+    warn: {
+      border: '#D97706', // Amber-600
+      background: '#FEF3C7', // Amber-100
+    },
+    error: {
+      border: '#DC2626', // Red-600
+      background: '#FEE2E2', // Red-100
+    },
+    fatal: {
+      border: '#991B1B', // Red-800
+      background: '#FECACA', // Red-200
+      text: '#7F1D1D', // Red-900
+    },
+  },
+
+  sidebar: {
+    background: '#F9FAFB', // Gray-50
+    selectedBackground: '#E5E7EB', // Gray-200
+    hoverBackground: '#F3F4F6', // Gray-100
+    text: '#1F2937', // Gray-800
+    textDim: '#6B7280', // Gray-500
+    border: '#D1D5DB', // Gray-300
+    badge: '#2563EB', // Blue-600
+    focusBorder: '#2563EB', // Blue-600
+  },
+
+  header: {
+    background: '#F9FAFB', // Gray-50
+    text: '#111827', // Gray-900
+    border: '#D1D5DB', // Gray-300
+  },
+
+  statusIndicators: {
+    waiting: {
+      icon: '○',
+      color: '#9CA3AF', // Gray-400
+    },
+    pending: {
+      icon: '◐',
+      color: '#D97706', // Amber-600
+    },
+    success: {
+      icon: '✓',
+      color: '#16A34A', // Green-600
+    },
+    fail: {
+      icon: '✗',
+      color: '#DC2626', // Red-600
+    },
+  },
+
+  separator: {
+    line: '#D1D5DB', // Gray-300
+    text: '#6B7280', // Gray-500
+  },
+
+  progress: {
+    border: '#2563EB', // Blue-600
+    background: '#DBEAFE', // Blue-100
+    barFilled: '#2563EB', // Blue-600
+    barEmpty: '#E5E7EB', // Gray-200
+    text: '#1F2937', // Gray-800
+    textDim: '#6B7280', // Gray-500
+    complete: '#16A34A', // Green-600
+    completeBackground: '#DCFCE7', // Green-100
+    failed: '#DC2626', // Red-600
+    failedBackground: '#FEE2E2', // Red-100
+  },
+
+  group: {
+    border: '#9CA3AF', // Gray-400
+    background: '#F3F4F6', // Gray-100
+    headerText: '#1F2937', // Gray-800
+    icon: '#6B7280', // Gray-500
+  },
+
+  table: {
+    border: '#2563EB', // Blue-600
+    background: '#DBEAFE', // Blue-100
+    headerText: '#111827', // Gray-900
+    cellText: '#1F2937', // Gray-800
+    title: '#111827', // Gray-900
+    separator: '#93C5FD', // Blue-300
+  },
+
+  file: {
+    border: '#2563EB', // Blue-600
+    background: '#DBEAFE', // Blue-100
+    headerText: '#111827', // Gray-900
+    headerBackground: '#BFDBFE', // Blue-200
+  },
+
+  prompt: {
+    question: '#111827', // Gray-900
+    optionText: '#1F2937', // Gray-800
+    optionTextDim: '#6B7280', // Gray-500
+    optionSelected: '#2563EB', // Blue-600
+    optionSelectedBackground: '#DBEAFE', // Blue-100
+    confirmButton: '#16A34A', // Green-600
+    cancelButton: '#DC2626', // Red-600
+    buttonBackground: '#E5E7EB', // Gray-200
+    buttonSelectedBackground: '#D1D5DB', // Gray-300
+    inputBorder: '#2563EB', // Blue-600
+    inputBackground: '#FFFFFF', // White
+    inputText: '#111827', // Gray-900
+    inputPlaceholder: '#9CA3AF', // Gray-400
+    inputCursor: '#2563EB', // Blue-600
+    border: '#D1D5DB', // Gray-300
+    focusBorder: '#2563EB', // Blue-600
+  },
+
+  errorHighlight: {
+    background: '#FEE2E2', // Red-100
+    border: '#DC2626', // Red-600
+    gutterBackground: '#FECACA', // Red-200
+  },
+
+  filter: {
+    background: '#F3F4F6', // Gray-100
+    border: '#2563EB', // Blue-600
+    text: '#1F2937', // Gray-800
+    textDim: '#6B7280', // Gray-500
+    inputBackground: '#FFFFFF', // White
+    inputText: '#111827', // Gray-900
+    inputPlaceholder: '#9CA3AF', // Gray-400
+    cursor: '#2563EB', // Blue-600
+    activeLevel: '#2563EB', // Blue-600
+    inactiveLevel: '#D1D5DB', // Gray-300
+  },
+
+  help: {
+    background: '#FFFFFF', // White
+    border: '#2563EB', // Blue-600
+    title: '#111827', // Gray-900
+    category: '#2563EB', // Blue-600
+    key: '#D97706', // Amber-600
+    description: '#1F2937', // Gray-800
+    hint: '#6B7280', // Gray-500
+  },
+
+  colors: {
+    primary: '#2563EB', // Blue-600
+    secondary: '#7C3AED', // Violet-600
+    success: '#16A34A', // Green-600
+    warning: '#D97706', // Amber-600
+    error: '#DC2626', // Red-600
+    muted: '#6B7280', // Gray-500
+    background: '#FFFFFF', // White
+    foreground: '#111827', // Gray-900
+  },
+}

package/src/themes/utils.ts

@@ -0,0 +1,83 @@
+import type { PartialTheme, Theme, ThemePreset } from '../types/index.ts'
+
+import { darkTheme } from './dark.ts'
+import { highContrastTheme } from './high-contrast.ts'
+import { lightTheme } from './light.ts'
+
+/**
+ * Deep merge two objects, with source taking precedence.
+ */
+function deepMerge<T extends object>(target: T, source: Partial<T>): T {
+  const result = { ...target }
+
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key]
+      const targetValue = target[key]
+
+      if (
+        sourceValue !== undefined &&
+        typeof sourceValue === 'object' &&
+        sourceValue !== null &&
+        !Array.isArray(sourceValue) &&
+        typeof targetValue === 'object' &&
+        targetValue !== null &&
+        !Array.isArray(targetValue)
+      ) {
+        ;(result as Record<string, unknown>)[key] = deepMerge(
+          targetValue as object,
+          sourceValue as object,
+        )
+      } else if (sourceValue !== undefined) {
+        ;(result as Record<string, unknown>)[key] = sourceValue
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * Get a theme by preset name.
+ */
+export function getThemePreset(preset: ThemePreset): Theme {
+  switch (preset) {
+    case 'dark':
+      return darkTheme
+    case 'light':
+      return lightTheme
+    case 'high-contrast':
+      return highContrastTheme
+    default:
+      return darkTheme
+  }
+}
+
+/**
+ * Merge a base theme with partial overrides.
+ */
+export function mergeThemes(base: Theme, overrides: PartialTheme): Theme {
+  return deepMerge(base, overrides as Partial<Theme>)
+}
+
+/**
+ * Create a custom theme by extending the dark theme with overrides.
+ */
+export function createTheme(overrides: PartialTheme): Theme {
+  return mergeThemes(darkTheme, overrides)
+}
+
+/**
+ * Create a custom theme by extending a specific base theme.
+ */
+export function createThemeFrom(base: Theme | ThemePreset, overrides: PartialTheme): Theme {
+  const baseTheme = typeof base === 'string' ? getThemePreset(base) : base
+  return mergeThemes(baseTheme, overrides)
+}
+
+/**
+ * Resolve a theme value which can be a Theme object or a preset name.
+ */
+export function resolveTheme(theme: Theme | ThemePreset): Theme {
+  return typeof theme === 'string' ? getThemePreset(theme) : theme
+}

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from './screen.ts'
+export * from './logger.ts'
+export * from './prompt.ts'

package/src/tokens/logger.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@navios/core'
+
+import { LoggerOptionsSchema } from '../schemas/index.ts'
+
+import type { ScreenLoggerInstance } from '../services/index.ts'
+
+export const ScreenLogger = InjectionToken.create<ScreenLoggerInstance, typeof LoggerOptionsSchema>(
+  'ScreenLoggerInstance',
+  LoggerOptionsSchema,
+)

package/src/tokens/prompt.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@navios/core'
+
+import { PromptOptionsSchema } from '../schemas/index.ts'
+
+import type { PromptInstance } from '../services/index.ts'
+
+export const Prompt = InjectionToken.create<PromptInstance, typeof PromptOptionsSchema>(
+  'Prompt',
+  PromptOptionsSchema,
+)

package/src/tokens/screen.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@navios/core'
+
+import { ScreenOptionsSchema } from '../schemas/index.ts'
+
+import type { ScreenInstance } from '../services/index.ts'
+
+export const Screen = InjectionToken.create<ScreenInstance, typeof ScreenOptionsSchema>(
+  'ScreenOptions',
+  ScreenOptionsSchema,
+)

package/src/types/file.types.ts

@@ -0,0 +1,60 @@
+import type { RGBA } from '@opentui/core'
+
+// ============================================
+// FileLog Component Types
+// ============================================
+
+export type FileLogMode = 'full' | 'diff' | 'partial'
+
+export interface FileLogBaseProps {
+  /** File path or name to display in header */
+  filePath: string
+
+  /** Override auto-detected filetype for syntax highlighting */
+  filetype?: string
+
+  /** Show line numbers */
+  showLineNumbers?: boolean
+
+  /** Show header with file path */
+  showHeader?: boolean
+
+  /** Custom header background color */
+  headerBackgroundColor?: string | RGBA
+}
+
+export interface FileLogFullProps extends FileLogBaseProps {
+  mode: 'full'
+
+  /** The complete file content */
+  content: string
+}
+
+export interface FileLogDiffProps extends FileLogBaseProps {
+  mode: 'diff'
+
+  /** Unified diff string */
+  diff: string
+
+  /** Diff view mode */
+  view?: 'unified' | 'split'
+}
+
+export interface FileLogPartialProps extends FileLogBaseProps {
+  mode: 'partial'
+
+  /** File content (full or partial) */
+  content: string
+
+  /** Starting line number of the content (1-indexed) */
+  startLine: number
+
+  /** Lines to highlight as errors */
+  errorLines?: number[]
+
+  /** Error highlighting colors */
+  errorLineBackground?: string | RGBA
+  errorLineBorderColor?: string | RGBA
+}
+
+export type FileLogProps = FileLogFullProps | FileLogDiffProps | FileLogPartialProps

package/src/types/filter.types.ts

@@ -0,0 +1,51 @@
+// ============================================
+// Filter Types
+// ============================================
+
+import type { LogLevel } from '@navios/core'
+
+/**
+ * Filter state for log filtering.
+ */
+export interface FilterState {
+  /** Which log levels are enabled (shown) */
+  enabledLevels: Set<LogLevel>
+
+  /** Text search query */
+  searchQuery: string
+
+  /** Whether the filter bar is visible */
+  isVisible: boolean
+
+  /** Which filter field is focused */
+  focusedField: 'search' | 'levels'
+}
+
+/**
+ * All log levels in order.
+ */
+export const ALL_LOG_LEVELS: LogLevel[] = ['verbose', 'debug', 'log', 'warn', 'error', 'fatal']
+
+/**
+ * Create a default filter state.
+ */
+export function createDefaultFilterState(): FilterState {
+  return {
+    enabledLevels: new Set(ALL_LOG_LEVELS),
+    searchQuery: '',
+    isVisible: false,
+    focusedField: 'search',
+  }
+}
+
+/**
+ * Check if any filtering is active.
+ */
+export function hasActiveFilter(filter: FilterState): boolean {
+  return filter.searchQuery !== '' || filter.enabledLevels.size < ALL_LOG_LEVELS.length
+}
+
+/**
+ * Level counts for display.
+ */
+export type LevelCounts = Record<LogLevel, number>

package/src/types/index.ts

@@ -0,0 +1,22 @@
+export * from './log.types.ts'
+
+// File types
+export * from './file.types.ts'
+
+// Screen types
+export * from './screen.types.ts'
+
+// Message types
+export * from './message.types.ts'
+
+// Prompt types
+export * from './prompt.types.ts'
+
+// Theme types
+export * from './theme.types.ts'
+
+// Keyboard types
+export * from './keyboard.types.ts'
+
+// Filter types
+export * from './filter.types.ts'