@navios/commander-tui 1.0.0

package/src/__tests__/utils/format.spec.ts

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest'
+
+import { captureTrace, formatObject } from '../../utils/format.ts'
+
+describe('formatObject', () => {
+  describe('primitives', () => {
+    it('should format null', () => {
+      expect(formatObject(null)).toBe('null')
+    })
+
+    it('should format undefined', () => {
+      expect(formatObject(undefined)).toBe('undefined')
+    })
+
+    it('should format strings with quotes', () => {
+      expect(formatObject('hello')).toBe('"hello"')
+    })
+
+    it('should format numbers', () => {
+      expect(formatObject(42)).toBe('42')
+      expect(formatObject(3.14)).toBe('3.14')
+      expect(formatObject(-10)).toBe('-10')
+    })
+
+    it('should format booleans', () => {
+      expect(formatObject(true)).toBe('true')
+      expect(formatObject(false)).toBe('false')
+    })
+  })
+
+  describe('special types', () => {
+    it('should format Date objects as ISO string', () => {
+      const date = new Date('2024-01-15T10:30:00.000Z')
+      expect(formatObject(date)).toBe('2024-01-15T10:30:00.000Z')
+    })
+
+    it('should format Error objects as name: message', () => {
+      const error = new Error('Something went wrong')
+      expect(formatObject(error)).toBe('Error: Something went wrong')
+    })
+
+    it('should format custom error types', () => {
+      class CustomError extends Error {
+        name = 'CustomError'
+      }
+      const error = new CustomError('Custom message')
+      expect(formatObject(error)).toBe('CustomError: Custom message')
+    })
+
+    it('should format functions as [Function]', () => {
+      const fn = () => {}
+      expect(formatObject(fn)).toBe('[Function]')
+
+      function namedFn() {}
+      expect(formatObject(namedFn)).toBe('[Function]')
+    })
+  })
+
+  describe('arrays', () => {
+    it('should format empty arrays', () => {
+      expect(formatObject([])).toBe('[]')
+    })
+
+    it('should format arrays with primitives', () => {
+      const result = formatObject([1, 2, 3])
+      expect(result).toContain('1')
+      expect(result).toContain('2')
+      expect(result).toContain('3')
+    })
+
+    it('should format nested arrays with indentation', () => {
+      const result = formatObject([1, [2, 3]])
+      expect(result).toContain('[')
+      expect(result).toContain(']')
+      // Should have nested structure
+      expect(result.split('\n').length).toBeGreaterThan(1)
+    })
+  })
+
+  describe('objects', () => {
+    it('should format empty objects', () => {
+      expect(formatObject({})).toBe('{}')
+    })
+
+    it('should format objects with properties', () => {
+      const result = formatObject({ name: 'test', value: 42 })
+      expect(result).toContain('name:')
+      expect(result).toContain('"test"')
+      expect(result).toContain('value:')
+      expect(result).toContain('42')
+    })
+
+    it('should format nested objects with indentation', () => {
+      const result = formatObject({
+        outer: {
+          inner: 'value',
+        },
+      })
+      expect(result).toContain('outer:')
+      expect(result).toContain('inner:')
+      // Should have nested structure
+      expect(result.split('\n').length).toBeGreaterThan(1)
+    })
+  })
+
+  describe('depth limit', () => {
+    it('should return [Array] for arrays at depth limit', () => {
+      const deep = { level1: { level2: [1, 2, 3] } }
+      const result = formatObject(deep, 2)
+      expect(result).toContain('[Array]')
+    })
+
+    it('should return [Object] for objects at depth limit', () => {
+      const deep = { level1: { level2: { level3: 'value' } } }
+      const result = formatObject(deep, 2)
+      expect(result).toContain('[Object]')
+    })
+
+    it('should use constructor name for custom objects at depth limit', () => {
+      class CustomClass {
+        value = 1
+      }
+      const deep = { level1: { level2: new CustomClass() } }
+      const result = formatObject(deep, 2)
+      expect(result).toContain('[CustomClass]')
+    })
+
+    it('should respect custom depth parameter', () => {
+      const deep = { a: { b: { c: { d: 'value' } } } }
+
+      // Depth 1: only see first level
+      const depth1 = formatObject(deep, 1)
+      expect(depth1).toContain('[Object]')
+
+      // Depth 3: should see deeper
+      const depth3 = formatObject(deep, 3)
+      expect(depth3).toContain('c:')
+    })
+  })
+
+  describe('mixed types', () => {
+    it('should handle complex nested structures', () => {
+      const complex = {
+        users: [
+          { name: 'Alice', age: 30 },
+          { name: 'Bob', age: 25 },
+        ],
+        metadata: {
+          count: 2,
+          timestamp: new Date('2024-01-01T00:00:00.000Z'),
+        },
+      }
+
+      const result = formatObject(complex, 3)
+      expect(result).toContain('users:')
+      expect(result).toContain('Alice')
+      expect(result).toContain('metadata:')
+      expect(result).toContain('count:')
+    })
+  })
+})
+
+describe('captureTrace', () => {
+  it('should return a stack trace string', () => {
+    const trace = captureTrace()
+    expect(typeof trace).toBe('string')
+    expect(trace.length).toBeGreaterThan(0)
+  })
+
+  it('should filter internal frames (skip first 4 lines)', () => {
+    const trace = captureTrace()
+    // The trace should not contain "captureTrace" in the first visible line
+    // since it filters out internal frames
+    const lines = trace.split('\n')
+    // First line should be the caller, not captureTrace itself
+    expect(lines[0]).not.toContain('captureTrace')
+  })
+})

package/src/__tests__/utils/render-utils.tsx

@@ -0,0 +1,39 @@
+import { LoggerProvider } from '../../context/index.ts'
+import { darkTheme } from '../../themes/index.ts'
+
+import type { ReactNode } from 'react'
+import type { Theme, LogLevelColorMap } from '../../types/index.ts'
+
+export interface RenderContextOptions {
+  theme?: Theme
+  levelColors?: Partial<LogLevelColorMap>
+}
+
+/**
+ * Wrap a component with LoggerProvider for testing.
+ * Returns the wrapped component tree.
+ */
+export function wrapWithContext(
+  component: ReactNode,
+  options: RenderContextOptions = {},
+): ReactNode {
+  const { theme = darkTheme, levelColors } = options
+
+  return (
+    <LoggerProvider theme={theme} levelColors={levelColors}>
+      {component}
+    </LoggerProvider>
+  )
+}
+
+/**
+ * Create a default context value for testing components outside LoggerProvider.
+ */
+export function createMockContextValue(overrides: Partial<RenderContextOptions> = {}) {
+  return {
+    syntaxStyle: undefined,
+    treeSitterClient: undefined,
+    levelColors: darkTheme.logLevels,
+    theme: overrides.theme ?? darkTheme,
+  }
+}

package/src/__tests__/utils/test-container.ts

@@ -0,0 +1,48 @@
+import { TestContainer } from '@navios/core/testing'
+
+import { Screen, ScreenLogger, Prompt } from '../../tokens/index.ts'
+
+import { createMockScreenInstance } from './factories.ts'
+
+import type { ScreenInstance } from '../../services/index.ts'
+import type { MockScreenInstance } from './factories.ts'
+
+/**
+ * Create a pre-configured TestContainer for commander-tui tests.
+ * Includes common bindings for Screen token with a mock instance.
+ */
+export function createTestContainer(): TestContainer {
+  return new TestContainer()
+}
+
+/**
+ * Bind a mock ScreenInstance to the Screen token.
+ * Returns the mock for assertions.
+ */
+export function bindMockScreen(
+  container: TestContainer,
+  overrides?: Partial<MockScreenInstance>,
+): MockScreenInstance {
+  const mockScreen = createMockScreenInstance(overrides)
+  // Cast through unknown since MockScreenInstance has mock functions instead of real implementations
+  container.bind(Screen).toValue(mockScreen as unknown as ScreenInstance)
+  return mockScreen
+}
+
+/**
+ * Rebind a mock ScreenInstance to the Screen token.
+ * Must invalidate the previous instance first.
+ */
+export function rebindMockScreen(
+  container: TestContainer,
+  previousInstance: MockScreenInstance,
+  overrides?: Partial<MockScreenInstance>,
+): MockScreenInstance {
+  const mockScreen = createMockScreenInstance(overrides)
+  container.invalidate(previousInstance as unknown as ScreenInstance)
+  // Cast through unknown since MockScreenInstance has mock functions instead of real implementations
+  container.bind(Screen).toValue(mockScreen as unknown as ScreenInstance)
+  return mockScreen
+}
+
+export { TestContainer, Screen, ScreenLogger, Prompt }

package/src/components/file/file_log.tsx

@@ -0,0 +1,241 @@
+import { useMemo } from 'react'
+
+import { useLoggerContext } from '../../context/index.ts'
+import { ERROR_HIGHLIGHT_COLORS, HEADER_COLORS, resolveFiletype } from '../../utils/index.ts'
+
+import type {
+  FileLogProps,
+  FileLogFullProps,
+  FileLogDiffProps,
+  FileLogPartialProps,
+} from '../../types/index.ts'
+
+/**
+ * FileLog - Displays file content, diffs, or partial files with error highlighting.
+ *
+ * Three modes:
+ * 1. "full" - Display complete file with syntax highlighting
+ * 2. "diff" - Display unified diff using <diff> component
+ * 3. "partial" - Display file excerpt with optional error line highlighting
+ *
+ * @example Full file
+ * <FileLog
+ *   mode="full"
+ *   filePath="src/index.ts"
+ *   content={fileContent}
+ * />
+ *
+ * @example Diff
+ * <FileLog
+ *   mode="diff"
+ *   filePath="src/api.ts"
+ *   diff={unifiedDiff}
+ *   view="unified"
+ * />
+ *
+ * @example Partial with error
+ * <FileLog
+ *   mode="partial"
+ *   filePath="src/utils.ts"
+ *   content={excerpt}
+ *   startLine={42}
+ *   errorLines={[45, 46]}
+ * />
+ */
+export function FileLog(props: FileLogProps) {
+  const { syntaxStyle, treeSitterClient } = useLoggerContext()
+
+  // Auto-detect filetype from path
+  const filetype = props.filetype ?? resolveFiletype(props.filePath)
+  const showHeader = props.showHeader ?? true
+  const showLineNumbers = props.showLineNumbers ?? true
+
+  return (
+    <box flexDirection="column" marginBottom={1}>
+      {/* File header */}
+      {showHeader && (
+        <box
+          backgroundColor={props.headerBackgroundColor ?? HEADER_COLORS.background}
+          paddingLeft={1}
+          paddingRight={1}
+          border={['bottom']}
+          borderColor={HEADER_COLORS.border}
+        >
+          <text fg={HEADER_COLORS.text}>{props.filePath}</text>
+        </box>
+      )}
+
+      {/* Content based on mode */}
+      {props.mode === 'full' && (
+        <FileLogFull
+          {...props}
+          filetype={filetype}
+          syntaxStyle={syntaxStyle}
+          treeSitterClient={treeSitterClient}
+          showLineNumbers={showLineNumbers}
+        />
+      )}
+
+      {props.mode === 'diff' && (
+        <FileLogDiff
+          {...props}
+          filetype={filetype}
+          syntaxStyle={syntaxStyle}
+          treeSitterClient={treeSitterClient}
+        />
+      )}
+
+      {props.mode === 'partial' && (
+        <FileLogPartial
+          {...props}
+          filetype={filetype}
+          syntaxStyle={syntaxStyle}
+          treeSitterClient={treeSitterClient}
+          showLineNumbers={showLineNumbers}
+        />
+      )}
+    </box>
+  )
+}
+
+interface FileLogInternalProps {
+  filetype?: string
+  syntaxStyle?: ReturnType<typeof useLoggerContext>['syntaxStyle']
+  treeSitterClient?: ReturnType<typeof useLoggerContext>['treeSitterClient']
+}
+
+/**
+ * Full file display with syntax highlighting.
+ */
+function FileLogFull({
+  content,
+  filetype,
+  syntaxStyle,
+  treeSitterClient,
+}: FileLogFullProps & FileLogInternalProps) {
+  if (!syntaxStyle) {
+    // Fallback to plain text display if no syntax style available
+    return (
+      <box paddingLeft={1} paddingRight={1}>
+        <text>{content}</text>
+      </box>
+    )
+  }
+
+  return (
+    <code
+      content={content}
+      filetype={filetype}
+      syntaxStyle={syntaxStyle}
+      treeSitterClient={treeSitterClient}
+    />
+  )
+}
+
+/**
+ * Diff display using the built-in <diff> component.
+ */
+function FileLogDiff({
+  diff,
+  view = 'unified',
+  filetype,
+  syntaxStyle,
+  treeSitterClient,
+}: FileLogDiffProps & FileLogInternalProps) {
+  if (!syntaxStyle) {
+    // Fallback to plain text display if no syntax style available
+    return (
+      <box paddingLeft={1} paddingRight={1}>
+        <text>{diff}</text>
+      </box>
+    )
+  }
+
+  return (
+    <diff
+      diff={diff}
+      view={view}
+      filetype={filetype}
+      syntaxStyle={syntaxStyle}
+      treeSitterClient={treeSitterClient}
+    />
+  )
+}
+
+/**
+ * Partial file display with error line highlighting.
+ *
+ * This component renders a file excerpt and highlights specific lines
+ * as errors using box overlays with colored backgrounds.
+ */
+function FileLogPartial({
+  content,
+  startLine,
+  errorLines = [],
+  errorLineBackground,
+  errorLineBorderColor,
+  filetype,
+  syntaxStyle,
+  treeSitterClient,
+  showLineNumbers,
+}: FileLogPartialProps & FileLogInternalProps) {
+  // Parse content into lines for error highlighting
+  const lines = useMemo(() => content.split('\n'), [content])
+
+  // Calculate which lines are errors (relative to startLine)
+  const errorLineSet = useMemo(() => new Set(errorLines), [errorLines])
+
+  // Error colors
+  const errorBg = errorLineBackground ?? ERROR_HIGHLIGHT_COLORS.background
+  const errorBorder = errorLineBorderColor ?? ERROR_HIGHLIGHT_COLORS.border
+
+  // Line number width based on max line number
+  const maxLineNum = startLine + lines.length - 1
+  const lineNumWidth = Math.max(4, String(maxLineNum).length + 1)
+
+  return (
+    <box flexDirection="column">
+      {lines.map((line, index) => {
+        const lineNumber = startLine + index
+        const isError = errorLineSet.has(lineNumber)
+
+        return (
+          <box
+            key={lineNumber}
+            flexDirection="row"
+            backgroundColor={isError ? errorBg : undefined}
+            border={isError ? ['left'] : undefined}
+            borderColor={isError ? errorBorder : undefined}
+          >
+            {/* Line number gutter */}
+            {showLineNumbers && (
+              <box
+                width={lineNumWidth}
+                backgroundColor={
+                  isError ? ERROR_HIGHLIGHT_COLORS.gutterBackground : HEADER_COLORS.background
+                }
+                paddingRight={1}
+              >
+                <text fg="#6B7280">{String(lineNumber).padStart(lineNumWidth - 1)}</text>
+              </box>
+            )}
+
+            {/* Code line */}
+            <box flexGrow={1} paddingLeft={1}>
+              {syntaxStyle ? (
+                <code
+                  content={line}
+                  filetype={filetype}
+                  syntaxStyle={syntaxStyle}
+                  treeSitterClient={treeSitterClient}
+                />
+              ) : (
+                <text>{line}</text>
+              )}
+            </box>
+          </box>
+        )
+      })}
+    </box>
+  )
+}

package/src/components/file/index.ts

@@ -0,0 +1 @@
+export * from './file_log.tsx'

package/src/components/filter/filter_bar.tsx

@@ -0,0 +1,79 @@
+import { TextAttributes } from '@opentui/core'
+
+import type { LogLevel } from '@navios/core'
+
+import { useTheme } from '../../hooks/index.ts'
+import { ALL_LOG_LEVELS } from '../../types/index.ts'
+
+import type { FilterState, LevelCounts } from '../../types/index.ts'
+
+export interface FilterBarProps {
+  filter: FilterState
+  levelCounts: LevelCounts
+}
+
+const LEVEL_LABELS: Record<LogLevel, string> = {
+  verbose: 'V',
+  debug: 'D',
+  log: 'L',
+  warn: 'W',
+  error: 'E',
+  fatal: 'F',
+}
+
+export function FilterBar({ filter, levelCounts }: FilterBarProps) {
+  const theme = useTheme()
+  const isSearchFocused = filter.focusedField === 'search'
+
+  return (
+    <box
+      flexDirection="column"
+      backgroundColor={theme.filter.background}
+      borderColor={theme.filter.border}
+      border={['bottom']}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      {/* Search input row */}
+      <box flexDirection="row" gap={1}>
+        <text fg={isSearchFocused ? theme.colors.primary : theme.filter.textDim}>/</text>
+        <text fg={filter.searchQuery ? theme.filter.inputText : theme.filter.inputPlaceholder}>
+          {filter.searchQuery || 'Search logs...'}
+        </text>
+        {isSearchFocused && (
+          <text fg={theme.filter.cursor} attributes={TextAttributes.BLINK}>
+            _
+          </text>
+        )}
+      </box>
+
+      {/* Level filters row */}
+      <box flexDirection="row" gap={1}>
+        <text fg={theme.filter.textDim}>Levels:</text>
+        {ALL_LOG_LEVELS.map((level, index) => {
+          const isEnabled = filter.enabledLevels.has(level)
+          const count = levelCounts[level]
+          const levelColor = theme.logLevels[level].border
+          const isLevelsFocused = filter.focusedField === 'levels'
+
+          return (
+            <box key={level} flexDirection="row">
+              <text
+                fg={isEnabled ? levelColor : theme.filter.inactiveLevel}
+                attributes={isLevelsFocused ? TextAttributes.BOLD : undefined}
+              >
+                {index + 1}:{LEVEL_LABELS[level]}
+              </text>
+              {count > 0 && <text fg={theme.filter.textDim}>({count > 99 ? '99+' : count})</text>}
+            </box>
+          )
+        })}
+      </box>
+
+      {/* Hints */}
+      <box flexDirection="row">
+        <text fg={theme.filter.textDim}>Tab: switch fields | 1-7: toggle levels | Esc: close</text>
+      </box>
+    </box>
+  )
+}

package/src/components/filter/index.ts

@@ -0,0 +1 @@
+export { FilterBar } from './filter_bar.tsx'

package/src/components/help/help_overlay.tsx

@@ -0,0 +1,100 @@
+import { TextAttributes } from '@opentui/core'
+
+import { useTheme } from '../../hooks/index.ts'
+import { formatKeyBinding } from '../../keyboard/index.ts'
+
+import type { KeyBinding, KeyBindingCategory } from '../../types/index.ts'
+
+export interface HelpOverlayProps {
+  bindings: KeyBinding[]
+}
+
+const CATEGORY_ORDER: KeyBindingCategory[] = ['general', 'navigation', 'screen', 'filter', 'prompt']
+
+const CATEGORY_LABELS: Record<KeyBindingCategory, string> = {
+  general: 'General',
+  navigation: 'Navigation',
+  screen: 'Screen',
+  filter: 'Filter',
+  prompt: 'Prompts',
+}
+
+function groupByCategory(bindings: KeyBinding[]): Record<KeyBindingCategory, KeyBinding[]> {
+  const grouped: Record<KeyBindingCategory, KeyBinding[]> = {
+    general: [],
+    navigation: [],
+    screen: [],
+    filter: [],
+    prompt: [],
+  }
+
+  for (const binding of bindings) {
+    if (binding.description) {
+      grouped[binding.category].push(binding)
+    }
+  }
+
+  return grouped
+}
+
+export function HelpOverlay({ bindings }: HelpOverlayProps) {
+  const theme = useTheme()
+  const grouped = groupByCategory(bindings)
+
+  return (
+    <box
+      position="absolute"
+      top={1}
+      left={2}
+      right={2}
+      bottom={1}
+      backgroundColor={theme.help.background}
+      borderColor={theme.help.border}
+      border={['top', 'bottom', 'left', 'right']}
+      flexDirection="column"
+      paddingLeft={2}
+      paddingRight={2}
+      paddingTop={1}
+      paddingBottom={1}
+    >
+      {/* Header */}
+      <box marginBottom={1}>
+        <text fg={theme.help.title} attributes={TextAttributes.BOLD}>
+          Keyboard Shortcuts
+        </text>
+      </box>
+
+      {/* Categories */}
+      <scrollbox scrollY flexGrow={1}>
+        <box flexDirection="column" gap={1}>
+          {CATEGORY_ORDER.map((category) => {
+            const categoryBindings = grouped[category]
+            if (categoryBindings.length === 0) return null
+
+            return (
+              <box key={category} flexDirection="column">
+                <text fg={theme.help.category} attributes={TextAttributes.BOLD}>
+                  {CATEGORY_LABELS[category]}
+                </text>
+
+                {categoryBindings.map((binding, index) => (
+                  <box key={`${binding.key}-${index}`} flexDirection="row" paddingLeft={2}>
+                    <text fg={theme.help.key} width={14}>
+                      {formatKeyBinding(binding)}
+                    </text>
+                    <text fg={theme.help.description}>{binding.description}</text>
+                  </box>
+                ))}
+              </box>
+            )
+          })}
+        </box>
+      </scrollbox>
+
+      {/* Footer */}
+      <box marginTop={1} borderColor={theme.separator.line} border={['top']} paddingTop={1}>
+        <text fg={theme.help.hint}>Press ? or Esc to close</text>
+      </box>
+    </box>
+  )
+}

package/src/components/help/index.ts

@@ -0,0 +1 @@
+export { HelpOverlay } from './help_overlay.tsx'