@navios/commander-tui 1.3.0 → 1.5.0

package/src/adapters/solid/components/screen/screen_bridge.tsx

@@ -1,155 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { createSignal, createEffect, createMemo, For, Show, onCleanup } from 'solid-js'
-
-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(props: ScreenBridgeProps) {
-  const theme = useTheme()
-  const [version, setVersion] = createSignal(0)
-
-  // Subscribe to screen changes
-  createEffect(() => {
-    const unsub = props.screen.onChange(() => setVersion((v) => v + 1))
-    onCleanup(() => unsub())
-  })
-
-  // Use filtered messages if provided, otherwise get from screen
-  const messages = createMemo(() => {
-    version() // Track version for reactivity
-    return props.filteredMessages ?? props.screen.getMessages()
-  })
-
-  const activePrompt = createMemo(() => {
-    version() // Track version for reactivity
-    return props.screen.getActivePrompt()
-  })
-
-  const processedMessages = createMemo(() => processMessagesIntoGroups(messages()))
-
-  // Calculate filter stats
-  const filteredCount = () => messages().length
-  const total = () => props.totalMessages ?? messages().length
-  const showFilterStatus = () => props.isFiltering && filteredCount() !== total()
-
-  return (
-    <box flexDirection="column" flexGrow={1}>
-      {/* Screen header */}
-      <box
-        backgroundColor={theme.header.background}
-        borderColor={props.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}>
-          {props.screen.getName()}
-        </text>
-        <Show when={showFilterStatus()}>
-          <text fg={theme.sidebar.textDim}>
-            {filteredCount()}/{total()} messages
-          </text>
-        </Show>
-      </box>
-
-      {/* Scrollable content area */}
-      <scrollbox
-        flexGrow={1}
-        scrollY
-        stickyScroll
-        stickyStart="bottom"
-        contentOptions={{
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 1,
-          paddingBottom: 1,
-          gap: 1,
-        }}
-      >
-        <For each={processedMessages()}>
-          {(item) => (
-            <Show
-              when={item.type === 'group'}
-              fallback={<MessageRenderer message={item.message!} />}
-            >
-              <GroupRenderer label={item.label!} messages={item.messages!} />
-            </Show>
-          )}
-        </For>
-
-        {/* Render active prompt at the end of messages */}
-        <Show when={activePrompt()}>
-          <PromptRenderer prompt={activePrompt()!} />
-        </Show>
-      </scrollbox>
-    </box>
-  )
-}

package/src/adapters/solid/components/screen/table_message.tsx

@@ -1,58 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { For, Show, createMemo } from 'solid-js'
-
-import { TABLE_COLORS } from '../../../../utils/index.ts'
-
-import type { TableMessageData } from '../../../../types/index.ts'
-
-export interface TableMessageProps {
-  message: TableMessageData
-}
-
-export function TableMessage(props: TableMessageProps) {
-  // Calculate column widths
-  const colWidths = createMemo(() =>
-    props.message.headers.map((h, i) => {
-      const headerLen = h.length
-      const maxRowLen =
-        props.message.rows.length > 0
-          ? Math.max(...props.message.rows.map((r) => (r[i] ?? '').length))
-          : 0
-      return Math.max(headerLen, maxRowLen)
-    }),
-  )
-
-  const pad = (str: string, width: number) => str.padEnd(width)
-
-  const headerRow = createMemo(() =>
-    props.message.headers.map((h, i) => pad(h, colWidths()[i] ?? 0)).join(' │ '),
-  )
-
-  const separator = createMemo(() => colWidths().map((w) => '─'.repeat(w)).join('─┼─'))
-
-  const dataRows = createMemo(() =>
-    props.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}
-    >
-      <Show when={props.message.title}>
-        <text fg={TABLE_COLORS.title} attributes={TextAttributes.BOLD}>
-          {props.message.title}
-        </text>
-      </Show>
-      <text fg={TABLE_COLORS.headerText} attributes={TextAttributes.BOLD}>
-        {headerRow()}
-      </text>
-      <text fg={TABLE_COLORS.separator}>{separator()}</text>
-      <For each={dataRows()}>{(row) => <text fg={TABLE_COLORS.cellText}>{row}</text>}</For>
-    </box>
-  )
-}

package/src/adapters/solid/components/screen_manager_bridge.tsx

@@ -1,243 +0,0 @@
-import { useKeyboard } from '@opentui/solid'
-import { createSignal, createEffect, createMemo, onCleanup, Show } from 'solid-js'
-
-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 { ScreenManagerInstance } 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: ScreenManagerInstance
-  theme?: Theme
-}
-
-export function ScreenManagerBridge(props: ScreenManagerBridgeProps) {
-  const [version, setVersion] = createSignal(0)
-  const [showHelp, setShowHelp] = createSignal(false)
-  const [filter, setFilter] = createSignal<FilterState>(createDefaultFilterState())
-
-  // Subscribe to manager changes
-  createEffect(() => {
-    const unsub = props.manager.onChange(() => setVersion((v) => v + 1))
-    onCleanup(() => unsub())
-  })
-
-  // Helper functions for keyboard bindings
-  const getActiveScreen = () => props.manager.getActiveScreen()
-
-  const toggleHelp = () => {
-    setShowHelp((prev) => !prev)
-  }
-
-  const toggleFilter = () => {
-    setFilter((prev) => ({
-      ...prev,
-      isVisible: !prev.isVisible,
-      focusedField: 'search',
-    }))
-  }
-
-  const closeFilter = () => {
-    setFilter((prev) => ({ ...prev, isVisible: false }))
-  }
-
-  const filterAppendChar = (char: string) => {
-    setFilter((prev) => ({
-      ...prev,
-      searchQuery: prev.searchQuery + char,
-    }))
-  }
-
-  const filterDeleteChar = () => {
-    setFilter((prev) => ({
-      ...prev,
-      searchQuery: prev.searchQuery.slice(0, -1),
-    }))
-  }
-
-  const filterToggleLevel = (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 = () => {
-    setFilter((prev) => ({
-      ...prev,
-      focusedField: prev.focusedField === 'search' ? 'levels' : 'search',
-    }))
-  }
-
-  // Create keyboard manager with bindings
-  const keyboardManager = createMemo(() => {
-    const km = new KeyboardManager()
-    const bindings = createDefaultBindings({
-      manager: props.manager,
-      getActiveScreen,
-      toggleHelp,
-      toggleFilter,
-      closeFilter,
-      filterAppendChar,
-      filterDeleteChar,
-      filterToggleLevel,
-      filterCycleField,
-    })
-    km.addBindings(bindings)
-    return km
-  })
-
-  // Keyboard handler
-  const handleKeyboard = (key: { name: string; ctrl?: boolean; meta?: boolean; sequence?: string }) => {
-    const screens = props.manager.getScreens()
-    const activeScreen = props.manager.getActiveScreen()
-
-    const context: KeyboardContext = {
-      hasSidebar: screens.length > 1,
-      focusArea: props.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: props.manager,
-      getActiveScreen,
-      toggleHelp,
-      toggleFilter,
-      closeFilter,
-      filterAppendChar,
-      filterDeleteChar,
-      filterToggleLevel,
-      filterCycleField,
-    })
-  }
-
-  // Handle keyboard input
-  useKeyboard(handleKeyboard)
-
-  // Derived state
-  const screens = () => {
-    version() // Track for reactivity
-    return props.manager.getScreens()
-  }
-
-  const activeScreen = () => {
-    version() // Track for reactivity
-    return props.manager.getActiveScreen()
-  }
-
-  const activeScreenId = () => activeScreen()?.getId() ?? screens()[0]?.getId() ?? ''
-  const bindOptions = () => props.manager.getBindOptions()
-  const hasSidebar = () => screens().length > 1
-
-  // Subscribe to active screen version for level counts
-  const [activeScreenVersion, setActiveScreenVersion] = createSignal(0)
-
-  createEffect(() => {
-    const screen = activeScreen()
-    if (screen) {
-      const unsub = screen.onChange(() => setActiveScreenVersion((v) => v + 1))
-      onCleanup(() => unsub())
-    }
-  })
-
-  // Get level counts for filter bar
-  const levelCounts = createMemo(() => {
-    activeScreenVersion() // Track for reactivity
-    const screen = activeScreen()
-    if (!screen) {
-      return {
-        verbose: 0,
-        debug: 0,
-        log: 0,
-        warn: 0,
-        error: 0,
-        fatal: 0,
-      }
-    }
-    return FilterEngine.countByLevel(screen.getMessages())
-  })
-
-  // Filter messages for the active screen
-  const filteredMessages = createMemo(() => {
-    activeScreenVersion() // Track for reactivity
-    const screen = activeScreen()
-    if (!screen) return []
-    return FilterEngine.filterMessages(screen.getMessages(), filter())
-  })
-
-  const isFiltering = createMemo(() => hasActiveFilter(filter()))
-
-  return (
-    <LoggerProvider theme={props.theme}>
-      <box flexDirection="row" flexGrow={1}>
-        {/* Sidebar */}
-        <Show when={hasSidebar()}>
-          <Sidebar
-            screens={screens()}
-            selectedIndex={props.manager.selectedIndex}
-            activeScreenId={activeScreenId()}
-            focused={props.manager.focusArea === 'sidebar'}
-            width={bindOptions().sidebarWidth ?? 25}
-            title={bindOptions().sidebarTitle ?? 'Screens'}
-          />
-        </Show>
-
-        {/* Main content area */}
-        <box flexDirection="column" flexGrow={1}>
-          {/* Filter bar */}
-          <Show when={filter().isVisible}>
-            <FilterBar filter={filter()} levelCounts={levelCounts()} />
-          </Show>
-
-          {/* Screen content */}
-          <Show when={activeScreen()}>
-            <ScreenBridge
-              screen={activeScreen()!}
-              focused={props.manager.focusArea === 'content'}
-              filteredMessages={filteredMessages()}
-              isFiltering={isFiltering()}
-              totalMessages={activeScreen()!.getMessages().length}
-            />
-          </Show>
-        </box>
-
-        {/* Help overlay */}
-        <Show when={showHelp()}>
-          <HelpOverlay bindings={keyboardManager().getBindingsForHelp()} />
-        </Show>
-      </box>
-    </LoggerProvider>
-  )
-}

package/src/adapters/solid/components/sidebar/index.ts

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

package/src/adapters/solid/components/sidebar/sidebar.tsx

@@ -1,108 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { For, Show, createMemo } from 'solid-js'
-
-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(props: SidebarProps) {
-  const theme = useTheme()
-
-  // Separate screens: only "pending" status on top, everything else below
-  const pendingScreens = createMemo(() => {
-    const result: { screen: ScreenInstance; originalIndex: number }[] = []
-    props.screens.forEach((screen, index) => {
-      if (screen.getStatus() === 'pending') {
-        result.push({ screen, originalIndex: index })
-      }
-    })
-    return result
-  })
-
-  const otherScreens = createMemo(() => {
-    const result: { screen: ScreenInstance; originalIndex: number }[] = []
-    props.screens.forEach((screen, index) => {
-      if (screen.getStatus() !== 'pending') {
-        result.push({ screen, originalIndex: index })
-      }
-    })
-    return result
-  })
-
-  const hasPending = () => pendingScreens().length > 0
-  const hasOther = () => otherScreens().length > 0
-  const showSeparator = () => hasPending() && hasOther()
-
-  return (
-    <box
-      flexDirection="column"
-      width={props.width}
-      borderColor={props.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}>
-          {props.title}
-        </text>
-      </box>
-
-      {/* Screen list */}
-      <scrollbox scrollY stickyScroll={false} flexGrow={1} contentOptions={{ flexGrow: 1 }}>
-        <box flexDirection="column">
-          {/* Pending screens (active work) */}
-          <For each={pendingScreens()}>
-            {({ screen, originalIndex }) => (
-              <SidebarItem
-                screen={screen}
-                isSelected={originalIndex === props.selectedIndex}
-                isActive={screen.getId() === props.activeScreenId}
-                focused={props.focused}
-              />
-            )}
-          </For>
-
-          {/* Separator between pending and other screens */}
-          <Show when={showSeparator()}>
-            <SidebarSeparator />
-          </Show>
-
-          {/* Other screens (waiting, success, fail) */}
-          <For each={otherScreens()}>
-            {({ screen, originalIndex }) => (
-              <SidebarItem
-                screen={screen}
-                isSelected={originalIndex === props.selectedIndex}
-                isActive={screen.getId() === props.activeScreenId}
-                focused={props.focused}
-              />
-            )}
-          </For>
-        </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/adapters/solid/components/sidebar/sidebar_item.tsx

@@ -1,55 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { Show } from 'solid-js'
-
-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(props: SidebarItemProps) {
-  const theme = useTheme()
-  const status = () => props.screen.getStatus()
-  const statusIndicator = () => theme.statusIndicators[status()]
-
-  // Determine background color based on state
-  const backgroundColor = () => {
-    if (props.isSelected && props.focused) {
-      return theme.sidebar.selectedBackground
-    } else if (props.isActive) {
-      return theme.sidebar.selectedBackground + '80'
-    }
-    return undefined
-  }
-
-  return (
-    <box flexDirection="row" paddingLeft={1} paddingRight={1} backgroundColor={backgroundColor()}>
-      {/* Selection indicator */}
-      <text fg={props.isSelected && props.focused ? theme.sidebar.focusBorder : 'transparent'}>
-        {'>'}{' '}
-      </text>
-
-      {/* Status indicator */}
-      <text fg={statusIndicator().color}>{statusIndicator().icon} </text>
-
-      {/* Screen name */}
-      <text fg={props.isActive ? theme.sidebar.text : theme.sidebar.textDim} flexGrow={1}>
-        {props.screen.getName()}
-      </text>
-
-      {/* Badge if present */}
-      <Show when={props.screen.getBadgeCount() > 0}>
-        <box backgroundColor={theme.sidebar.badge} paddingLeft={1} paddingRight={1}>
-          <text fg={theme.colors.foreground} attributes={TextAttributes.BOLD}>
-            {props.screen.getBadgeCount() > 99 ? '99+' : props.screen.getBadgeCount()}
-          </text>
-        </box>
-      </Show>
-    </box>
-  )
-}

package/src/adapters/solid/components/sidebar/sidebar_separator.tsx

@@ -1,13 +0,0 @@
-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/adapters/solid/context/index.ts

@@ -1,2 +0,0 @@
-export { LoggerProvider, useLoggerContext } from './logger_context.tsx'
-export type { LoggerProviderProps } from './logger_context.tsx'