@navios/commander-tui 1.0.0

package/src/components/screen/progress_message.tsx

@@ -0,0 +1,60 @@
+import { useTheme } from '../../hooks/index.ts'
+
+import type { ProgressMessageData } from '../../types/index.ts'
+
+export interface ProgressMessageProps {
+  message: ProgressMessageData
+}
+
+export function ProgressMessage({ message }: ProgressMessageProps) {
+  const theme = useTheme()
+  const percent = Math.round((message.current / message.total) * 100)
+  const barWidth = 20
+  const filled = Math.round((percent / 100) * barWidth)
+  const empty = barWidth - filled
+
+  const barFilled = '█'.repeat(filled)
+  const barEmpty = '░'.repeat(empty)
+
+  // Determine colors based on status
+  const borderColor =
+    message.status === 'complete'
+      ? theme.progress.complete
+      : message.status === 'failed'
+        ? theme.progress.failed
+        : theme.progress.border
+
+  const backgroundColor =
+    message.status === 'complete'
+      ? theme.progress.completeBackground
+      : message.status === 'failed'
+        ? theme.progress.failedBackground
+        : theme.progress.background
+
+  const barColor =
+    message.status === 'complete'
+      ? theme.progress.complete
+      : message.status === 'failed'
+        ? theme.progress.failed
+        : theme.progress.barFilled
+
+  const displayLabel = message.resolvedContent ?? message.label
+
+  return (
+    <box
+      flexDirection="column"
+      border={['left']}
+      borderColor={borderColor}
+      backgroundColor={backgroundColor}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <box flexDirection="row" gap={1}>
+        <text fg={barColor}>[{barFilled}</text>
+        <text fg={theme.progress.barEmpty}>{barEmpty}]</text>
+        <text fg={theme.progress.textDim}>{percent}%</text>
+        <text fg={theme.progress.text}>{displayLabel}</text>
+      </box>
+    </box>
+  )
+}

package/src/components/screen/screen_bridge.tsx

@@ -0,0 +1,149 @@
+import { TextAttributes } from '@opentui/core'
+import { useState, useEffect } from 'react'
+
+import { useTheme } from '../../hooks/index.ts'
+import { PromptRenderer } from '../prompt/index.ts'
+
+import type { ScreenInstance } from '../../services/index.ts'
+import type { MessageData } from '../../types/index.ts'
+
+import { GroupRenderer } from './group_renderer.tsx'
+import { MessageRenderer } from './message_renderer.tsx'
+
+export interface ScreenBridgeProps {
+  screen: ScreenInstance
+  focused: boolean
+  /** Pre-filtered messages (if filtering is active) */
+  filteredMessages?: MessageData[]
+  /** Whether any filter is currently active */
+  isFiltering?: boolean
+  /** Total message count (before filtering) */
+  totalMessages?: number
+}
+
+// Helper to process messages and organize them into groups
+interface ProcessedMessage {
+  type: 'single' | 'group'
+  message?: MessageData
+  label?: string
+  messages?: MessageData[]
+}
+
+function processMessagesIntoGroups(messages: MessageData[]): ProcessedMessage[] {
+  const result: ProcessedMessage[] = []
+  let i = 0
+
+  while (i < messages.length) {
+    const msg = messages[i]!
+
+    if (msg.type === 'group' && !msg.isEnd) {
+      // Start of a group - collect all messages until groupEnd
+      const groupLabel = msg.label
+      const groupMessages: MessageData[] = []
+      i++ // Move past the group start
+
+      while (i < messages.length) {
+        const innerMsg = messages[i]!
+        if (innerMsg.type === 'group' && innerMsg.isEnd) {
+          i++ // Move past the group end
+          break
+        }
+        groupMessages.push(innerMsg)
+        i++
+      }
+
+      result.push({
+        type: 'group',
+        label: groupLabel,
+        messages: groupMessages,
+      })
+    } else if (msg.type === 'group' && msg.isEnd) {
+      // Stray group end - skip it
+      i++
+    } else {
+      // Regular message
+      result.push({ type: 'single', message: msg })
+      i++
+    }
+  }
+
+  return result
+}
+
+export function ScreenBridge({
+  screen,
+  focused,
+  filteredMessages,
+  isFiltering,
+  totalMessages,
+}: ScreenBridgeProps) {
+  const theme = useTheme()
+  const [, forceUpdate] = useState({})
+
+  // Subscribe to screen changes
+  useEffect(() => {
+    return screen.onChange(() => forceUpdate({}))
+  }, [screen])
+
+  // Use filtered messages if provided, otherwise get from screen
+  const messages = filteredMessages ?? screen.getMessages()
+  const activePrompt = screen.getActivePrompt()
+  const processedMessages = processMessagesIntoGroups(messages)
+
+  // Calculate filter stats
+  const filteredCount = messages.length
+  const total = totalMessages ?? messages.length
+  const showFilterStatus = isFiltering && filteredCount !== total
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {/* Screen header */}
+      <box
+        backgroundColor={theme.header.background}
+        borderColor={focused ? theme.sidebar.focusBorder : theme.header.border}
+        border={['bottom']}
+        paddingLeft={1}
+        paddingRight={1}
+        flexDirection="row"
+        justifyContent="space-between"
+      >
+        <text fg={theme.header.text} attributes={TextAttributes.BOLD}>
+          {screen.getName()}
+        </text>
+        {showFilterStatus && (
+          <text fg={theme.sidebar.textDim}>
+            {filteredCount}/{total} messages
+          </text>
+        )}
+      </box>
+
+      {/* Scrollable content area */}
+      <scrollbox
+        flexGrow={1}
+        scrollY
+        stickyScroll
+        stickyStart="bottom"
+        contentOptions={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+          paddingBottom: 1,
+          gap: 1,
+        }}
+      >
+        {processedMessages.map((item, index) => {
+          if (item.type === 'group') {
+            return (
+              <GroupRenderer key={`group-${index}`} label={item.label!} messages={item.messages!} />
+            )
+          } else {
+            return <MessageRenderer key={item.message!.id} message={item.message!} />
+          }
+        })}
+
+        {/* Render active prompt at the end of messages */}
+        {activePrompt && <PromptRenderer prompt={activePrompt} />}
+      </scrollbox>
+    </box>
+  )
+}

package/src/components/screen/table_message.tsx

@@ -0,0 +1,57 @@
+import { TextAttributes } from '@opentui/core'
+
+import { TABLE_COLORS } from '../../utils/index.ts'
+
+import type { TableMessageData } from '../../types/index.ts'
+
+export interface TableMessageProps {
+  message: TableMessageData
+}
+
+export function TableMessage({ message }: TableMessageProps) {
+  // Calculate column widths
+  const colWidths = message.headers.map((h, i) => {
+    const headerLen = h.length
+    const maxRowLen =
+      message.rows.length > 0
+        ? Math.max(...message.rows.map((r) => (r[i] ?? '').length))
+        : 0
+    return Math.max(headerLen, maxRowLen)
+  })
+
+  const pad = (str: string, width: number) => str.padEnd(width)
+
+  const headerRow = message.headers.map((h, i) => pad(h, colWidths[i] ?? 0)).join(' │ ')
+
+  const separator = colWidths.map((w) => '─'.repeat(w)).join('─┼─')
+
+  const dataRows = message.rows.map((row) =>
+    row.map((cell, i) => pad(cell, colWidths[i] ?? 0)).join(' │ '),
+  )
+
+  return (
+    <box
+      flexDirection="column"
+      border={['left']}
+      borderColor={TABLE_COLORS.border}
+      backgroundColor={TABLE_COLORS.background}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      {message.title && (
+        <text fg={TABLE_COLORS.title} attributes={TextAttributes.BOLD}>
+          {message.title}
+        </text>
+      )}
+      <text fg={TABLE_COLORS.headerText} attributes={TextAttributes.BOLD}>
+        {headerRow}
+      </text>
+      <text fg={TABLE_COLORS.separator}>{separator}</text>
+      {dataRows.map((row, i) => (
+        <text key={i} fg={TABLE_COLORS.cellText}>
+          {row}
+        </text>
+      ))}
+    </box>
+  )
+}

package/src/components/screen_manager_bridge.tsx

@@ -0,0 +1,245 @@
+import { useKeyboard } from '@opentui/react'
+import { useState, useEffect, useCallback, useMemo, useSyncExternalStore } from 'react'
+
+import { LoggerProvider } from '../context/index.ts'
+import { FilterEngine } from '../filter/index.ts'
+import { KeyboardManager, createDefaultBindings, handlePrintableInput } from '../keyboard/index.ts'
+import {
+  ALL_LOG_LEVELS,
+  createDefaultFilterState,
+  hasActiveFilter,
+  type FilterState,
+  type KeyboardContext,
+  type Theme,
+} from '../types/index.ts'
+
+import type { ScreenManager } from '../services/index.ts'
+
+import { FilterBar } from './filter/filter_bar.tsx'
+import { HelpOverlay } from './help/help_overlay.tsx'
+import { ScreenBridge } from './screen/screen_bridge.tsx'
+import { Sidebar } from './sidebar/sidebar.tsx'
+
+export interface ScreenManagerBridgeProps {
+  manager: ScreenManager
+  theme?: Theme
+}
+
+export function ScreenManagerBridge({ manager, theme }: ScreenManagerBridgeProps) {
+  const [, forceUpdate] = useState({})
+  const [showHelp, setShowHelp] = useState(false)
+  const [filter, setFilter] = useState<FilterState>(createDefaultFilterState)
+
+  // Subscribe to manager changes
+  useEffect(() => {
+    return manager.onChange(() => forceUpdate({}))
+  }, [manager])
+
+  // Helper functions for keyboard bindings
+  const getActiveScreen = useCallback(() => manager.getActiveScreen(), [manager])
+
+  const toggleHelp = useCallback(() => {
+    setShowHelp((prev) => !prev)
+  }, [])
+
+  const toggleFilter = useCallback(() => {
+    setFilter((prev) => ({
+      ...prev,
+      isVisible: !prev.isVisible,
+      focusedField: 'search',
+    }))
+  }, [])
+
+  const closeFilter = useCallback(() => {
+    setFilter((prev) => ({ ...prev, isVisible: false }))
+  }, [])
+
+  const filterAppendChar = useCallback((char: string) => {
+    setFilter((prev) => ({
+      ...prev,
+      searchQuery: prev.searchQuery + char,
+    }))
+  }, [])
+
+  const filterDeleteChar = useCallback(() => {
+    setFilter((prev) => ({
+      ...prev,
+      searchQuery: prev.searchQuery.slice(0, -1),
+    }))
+  }, [])
+
+  const filterToggleLevel = useCallback((index: number) => {
+    setFilter((prev) => {
+      const level = ALL_LOG_LEVELS[index]
+      if (!level) return prev
+
+      const newLevels = new Set(prev.enabledLevels)
+      if (newLevels.has(level)) {
+        newLevels.delete(level)
+      } else {
+        newLevels.add(level)
+      }
+
+      return { ...prev, enabledLevels: newLevels }
+    })
+  }, [])
+
+  const filterCycleField = useCallback(() => {
+    setFilter((prev) => ({
+      ...prev,
+      focusedField: prev.focusedField === 'search' ? 'levels' : 'search',
+    }))
+  }, [])
+
+  // Create keyboard manager with bindings
+  const keyboardManager = useMemo(() => {
+    const km = new KeyboardManager()
+    const bindings = createDefaultBindings({
+      manager,
+      getActiveScreen,
+      toggleHelp,
+      toggleFilter,
+      closeFilter,
+      filterAppendChar,
+      filterDeleteChar,
+      filterToggleLevel,
+      filterCycleField,
+    })
+    km.addBindings(bindings)
+    return km
+  }, [
+    manager,
+    getActiveScreen,
+    toggleHelp,
+    toggleFilter,
+    closeFilter,
+    filterAppendChar,
+    filterDeleteChar,
+    filterToggleLevel,
+    filterCycleField,
+  ])
+
+  // Keyboard handler
+  const handleKeyboard = useCallback(
+    (key: { name: string; ctrl?: boolean; meta?: boolean; sequence?: string }) => {
+      const screens = manager.getScreens()
+      const activeScreen = manager.getActiveScreen()
+
+      const context: KeyboardContext = {
+        hasSidebar: screens.length > 1,
+        focusArea: manager.focusArea,
+        hasPrompt: activeScreen?.hasActivePrompt() ?? false,
+        inInputMode: activeScreen?.isPromptInInputMode() ?? false,
+        isFilterActive: filter.isVisible,
+        isHelpVisible: showHelp,
+      }
+
+      // Try keyboard manager first
+      if (keyboardManager.handleKey(key, context)) {
+        return
+      }
+
+      // Handle printable characters (for input mode and filter)
+      handlePrintableInput(key, context, {
+        manager,
+        getActiveScreen,
+        toggleHelp,
+        toggleFilter,
+        closeFilter,
+        filterAppendChar,
+        filterDeleteChar,
+        filterToggleLevel,
+        filterCycleField,
+      })
+    },
+    [
+      manager,
+      keyboardManager,
+      filter.isVisible,
+      showHelp,
+      getActiveScreen,
+      toggleHelp,
+      toggleFilter,
+      closeFilter,
+      filterAppendChar,
+      filterDeleteChar,
+      filterToggleLevel,
+      filterCycleField,
+    ],
+  )
+
+  // Handle keyboard input
+  useKeyboard(handleKeyboard)
+
+  const screens = manager.getScreens()
+  const activeScreen = manager.getActiveScreen()
+  const activeScreenId = activeScreen?.getId() ?? screens[0]?.getId() ?? ''
+  const bindOptions = manager.getBindOptions()
+  const hasSidebar = screens.length > 1
+
+  const activeScreenVersion = useSyncExternalStore(
+    (updater) => activeScreen?.onChange(updater) ?? (() => {}),
+    () => activeScreen?.getVersion() ?? -1,
+  )
+  // Get level counts for filter bar
+  const levelCounts = useMemo(() => {
+    if (!activeScreen) {
+      return {
+        verbose: 0,
+        debug: 0,
+        log: 0,
+        warn: 0,
+        error: 0,
+        fatal: 0,
+      }
+    }
+    return FilterEngine.countByLevel(activeScreen.getMessages())
+  }, [activeScreenVersion, activeScreen])
+
+  // Filter messages for the active screen
+  const filteredMessages = useMemo(() => {
+    if (!activeScreen) return []
+    return FilterEngine.filterMessages(activeScreen.getMessages(), filter)
+  }, [activeScreenVersion, activeScreen, filter])
+
+  const isFiltering = useMemo(() => hasActiveFilter(filter), [filter])
+
+  return (
+    <LoggerProvider theme={theme}>
+      <box flexDirection="row" flexGrow={1}>
+        {/* Sidebar */}
+        {hasSidebar && (
+          <Sidebar
+            screens={screens}
+            selectedIndex={manager.selectedIndex}
+            activeScreenId={activeScreenId}
+            focused={manager.focusArea === 'sidebar'}
+            width={bindOptions.sidebarWidth ?? 25}
+            title={bindOptions.sidebarTitle ?? 'Screens'}
+          />
+        )}
+
+        {/* Main content area */}
+        <box flexDirection="column" flexGrow={1}>
+          {/* Filter bar */}
+          {filter.isVisible && <FilterBar filter={filter} levelCounts={levelCounts} />}
+
+          {/* Screen content */}
+          {activeScreen && (
+            <ScreenBridge
+              key={activeScreen.getId()}
+              screen={activeScreen}
+              focused={manager.focusArea === 'content'}
+              filteredMessages={filteredMessages}
+              isFiltering={isFiltering}
+              totalMessages={activeScreen.getMessages().length}
+            />
+          )}
+        </box>
+
+        {/* Help overlay */}
+        {showHelp && <HelpOverlay bindings={keyboardManager.getBindingsForHelp()} />}
+      </box>
+    </LoggerProvider>
+  )
+}

package/src/components/sidebar/index.ts

@@ -0,0 +1,3 @@
+export * from './sidebar.tsx'
+export * from './sidebar_item.tsx'
+export * from './sidebar_separator.tsx'

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,102 @@
+import { TextAttributes } from '@opentui/core'
+
+import { useTheme } from '../../hooks/index.ts'
+
+import type { ScreenInstance } from '../../services/index.ts'
+
+import { SidebarItem } from './sidebar_item.tsx'
+import { SidebarSeparator } from './sidebar_separator.tsx'
+
+export interface SidebarProps {
+  screens: ScreenInstance[]
+  selectedIndex: number
+  activeScreenId: string
+  focused: boolean
+  width: number
+  title: string
+}
+
+export function Sidebar({
+  screens,
+  selectedIndex,
+  activeScreenId,
+  focused,
+  width,
+  title,
+}: SidebarProps) {
+  const theme = useTheme()
+
+  // Separate screens: only "pending" status on top, everything else below
+  const pendingScreens: { screen: ScreenInstance; originalIndex: number }[] = []
+  const otherScreens: { screen: ScreenInstance; originalIndex: number }[] = []
+
+  screens.forEach((screen, index) => {
+    const status = screen.getStatus()
+    if (status === 'pending') {
+      pendingScreens.push({ screen, originalIndex: index })
+    } else {
+      otherScreens.push({ screen, originalIndex: index })
+    }
+  })
+
+  const hasPending = pendingScreens.length > 0
+  const hasOther = otherScreens.length > 0
+  const showSeparator = hasPending && hasOther
+
+  return (
+    <box
+      flexDirection="column"
+      width={width}
+      borderColor={focused ? theme.sidebar.focusBorder : theme.sidebar.border}
+      border={['right']}
+    >
+      {/* Sidebar header */}
+      <box
+        backgroundColor={theme.header.background}
+        paddingLeft={1}
+        paddingRight={1}
+        borderColor={theme.header.border}
+        border={['bottom']}
+      >
+        <text fg={theme.header.text} attributes={TextAttributes.BOLD}>
+          {title}
+        </text>
+      </box>
+
+      {/* Screen list */}
+      <scrollbox scrollY stickyScroll={false} flexGrow={1} contentOptions={{ flexGrow: 1 }}>
+        <box flexDirection="column">
+          {/* Pending screens (active work) */}
+          {pendingScreens.map(({ screen, originalIndex }) => (
+            <SidebarItem
+              key={screen.getId()}
+              screen={screen}
+              isSelected={originalIndex === selectedIndex}
+              isActive={screen.getId() === activeScreenId}
+              focused={focused}
+            />
+          ))}
+
+          {/* Separator between pending and other screens */}
+          {showSeparator && <SidebarSeparator />}
+
+          {/* Other screens (waiting, success, fail) */}
+          {otherScreens.map(({ screen, originalIndex }) => (
+            <SidebarItem
+              key={screen.getId()}
+              screen={screen}
+              isSelected={originalIndex === selectedIndex}
+              isActive={screen.getId() === activeScreenId}
+              focused={focused}
+            />
+          ))}
+        </box>
+      </scrollbox>
+
+      {/* Footer with keybindings hint */}
+      <box paddingLeft={1} paddingRight={1} borderColor={theme.sidebar.border} border={['top']}>
+        <text fg={theme.sidebar.text}>q: exit | Tab: focus | ?: help</text>
+      </box>
+    </box>
+  )
+}

package/src/components/sidebar/sidebar_item.tsx

@@ -0,0 +1,50 @@
+import { TextAttributes } from '@opentui/core'
+
+import { useTheme } from '../../hooks/index.ts'
+
+import type { ScreenInstance } from '../../services/index.ts'
+
+export interface SidebarItemProps {
+  screen: ScreenInstance
+  isSelected: boolean
+  isActive: boolean
+  focused: boolean
+}
+
+export function SidebarItem({ screen, isSelected, isActive, focused }: SidebarItemProps) {
+  const theme = useTheme()
+  const status = screen.getStatus()
+  const statusIndicator = theme.statusIndicators[status]
+
+  // Determine background color based on state
+  let backgroundColor: string | undefined = undefined
+  if (isSelected && focused) {
+    backgroundColor = theme.sidebar.selectedBackground
+  } else if (isActive) {
+    backgroundColor = theme.sidebar.selectedBackground + '80'
+  }
+
+  return (
+    <box flexDirection="row" paddingLeft={1} paddingRight={1} backgroundColor={backgroundColor}>
+      {/* Selection indicator */}
+      <text fg={isSelected && focused ? theme.sidebar.focusBorder : 'transparent'}>{'>'} </text>
+
+      {/* Status indicator */}
+      <text fg={statusIndicator.color}>{statusIndicator.icon} </text>
+
+      {/* Screen name */}
+      <text fg={isActive ? theme.sidebar.text : theme.sidebar.textDim} flexGrow={1}>
+        {screen.getName()}
+      </text>
+
+      {/* Badge if present */}
+      {screen.getBadgeCount() > 0 && (
+        <box backgroundColor={theme.sidebar.badge} paddingLeft={1} paddingRight={1}>
+          <text fg={theme.colors.foreground} attributes={TextAttributes.BOLD}>
+            {screen.getBadgeCount() > 99 ? '99+' : screen.getBadgeCount()}
+          </text>
+        </box>
+      )}
+    </box>
+  )
+}

package/src/components/sidebar/sidebar_separator.tsx

@@ -0,0 +1,13 @@
+import { useTheme } from '../../hooks/index.ts'
+
+export function SidebarSeparator() {
+  const theme = useTheme()
+
+  return (
+    <box flexDirection="row" paddingTop={1}>
+      <box flexGrow={1} />
+      <text fg={theme.separator.line}>· · ·</text>
+      <box flexGrow={1} />
+    </box>
+  )
+}

package/src/context/index.ts

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