@navios/commander-tui 1.3.0 → 1.5.0

package/src/adapters/react/context/logger_context.tsx

@@ -1,109 +0,0 @@
-import { SyntaxStyle, type TreeSitterClient } from '@opentui/core'
-import { createContext, useContext, useMemo, type ReactNode } from 'react'
-
-import { darkTheme, resolveTheme } from '../../../themes/index.ts'
-
-import type { LoggerContextValue, LogLevelColorMap, Theme, ThemePreset } from '../../../types/index.ts'
-
-const LoggerContext = createContext<LoggerContextValue | null>(null)
-
-export interface LoggerProviderProps {
-  children: ReactNode
-
-  /** Custom syntax style for code highlighting */
-  syntaxStyle?: SyntaxStyle
-
-  /** Tree-sitter client for parsing */
-  treeSitterClient?: TreeSitterClient
-
-  /**
-   * Theme configuration.
-   * Can be a preset name ("dark", "light", "high-contrast") or a Theme object.
-   * @default "dark"
-   */
-  theme?: Theme | ThemePreset
-
-  /**
-   * @deprecated Use `theme` instead. Custom log level colors.
-   * If both `theme` and `levelColors` are provided, `levelColors` takes precedence.
-   */
-  levelColors?: Partial<LogLevelColorMap>
-}
-
-/**
- * LoggerProvider - Provides shared context for logger components.
- *
- * This context provides:
- * - Shared SyntaxStyle instance for consistent code highlighting
- * - Optional TreeSitterClient for advanced parsing
- * - Theme configuration for consistent styling
- * - Log level color configuration (for backwards compatibility)
- *
- * @example
- * // Using a preset theme
- * <LoggerProvider theme="dark">
- *   <ScreenManager screens={screens} activeScreenId={activeId}>
- *     <Screen name="Logs">
- *       <LogMessage level="info">Hello</LogMessage>
- *     </Screen>
- *   </ScreenManager>
- * </LoggerProvider>
- *
- * @example
- * // Using a custom theme
- * <LoggerProvider theme={myCustomTheme}>
- *   ...
- * </LoggerProvider>
- */
-export function LoggerProvider({
-  children,
-  syntaxStyle: customSyntaxStyle,
-  treeSitterClient,
-  theme: themeProp = 'dark',
-  levelColors: customLevelColors,
-}: LoggerProviderProps) {
-  // Create or use provided SyntaxStyle
-  const syntaxStyle = useMemo(() => customSyntaxStyle ?? SyntaxStyle.create(), [customSyntaxStyle])
-
-  // Resolve theme (could be a preset name or a theme object)
-  const theme = useMemo(() => resolveTheme(themeProp), [themeProp])
-
-  // Derive levelColors from theme, allowing custom overrides for backwards compatibility
-  const levelColors = useMemo(
-    () => ({
-      ...theme.logLevels,
-      ...customLevelColors,
-    }),
-    [theme.logLevels, customLevelColors],
-  )
-
-  const value: LoggerContextValue = useMemo(
-    () => ({
-      syntaxStyle,
-      treeSitterClient,
-      levelColors,
-      theme,
-    }),
-    [syntaxStyle, treeSitterClient, levelColors, theme],
-  )
-
-  return <LoggerContext.Provider value={value}>{children}</LoggerContext.Provider>
-}
-
-/**
- * Hook to access logger context.
- * Returns default values if used outside LoggerProvider.
- */
-export function useLoggerContext(): LoggerContextValue {
-  const context = useContext(LoggerContext)
-  if (!context) {
-    // Return defaults if not in a provider (allows standalone usage)
-    return {
-      syntaxStyle: undefined,
-      treeSitterClient: undefined,
-      levelColors: darkTheme.logLevels,
-      theme: darkTheme,
-    }
-  }
-  return context
-}

package/src/adapters/react/hooks/index.ts

@@ -1 +0,0 @@
-export * from './use_theme.ts'

package/src/adapters/react/hooks/use_theme.ts

@@ -1,12 +0,0 @@
-import { useLoggerContext } from '../context/index.ts'
-
-import type { Theme } from '../../../types/index.ts'
-
-/**
- * Hook to access the current theme.
- * Returns the theme from LoggerContext.
- */
-export function useTheme(): Theme {
-  const { theme } = useLoggerContext()
-  return theme
-}

package/src/adapters/react/index.ts

@@ -1,39 +0,0 @@
-import { Injectable } from '@navios/core'
-import { createRoot as reactCreateRoot } from '@opentui/react'
-import { createElement } from 'react'
-
-import type { CliRenderer } from '@opentui/core'
-
-import { Adapter } from '../../tokens/adapter.ts'
-
-import type { AdapterInterface, AdapterRoot, AdapterRenderProps } from '../interface.ts'
-
-import { ScreenManagerBridge } from './components/screen_manager_bridge.tsx'
-
-/**
- * React adapter for TUI rendering.
- * Automatically registers to DI when this module is imported.
- */
-@Injectable({ token: Adapter })
-export class ReactAdapter implements AdapterInterface {
-  createRoot(renderer: CliRenderer): AdapterRoot {
-    const root = reactCreateRoot(renderer)
-    return {
-      render(element: unknown): void {
-        root.render(element as React.ReactNode)
-      },
-      unmount(): void {
-        root.unmount()
-      },
-    }
-  }
-
-  renderToRoot(root: AdapterRoot, props: AdapterRenderProps): void {
-    const element = createElement(ScreenManagerBridge, props as any)
-    root.render(element)
-  }
-}
-
-// Re-export context and hooks for external use
-export * from './context/index.ts'
-export * from './hooks/index.ts'

package/src/adapters/solid/components/file/file_log.tsx

@@ -1,221 +0,0 @@
-import { Show, For, createMemo } from 'solid-js'
-
-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 */}
-      <Show when={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>
-      </Show>
-
-      {/* Content based on mode */}
-      <Show when={props.mode === 'full'}>
-        <FileLogFull
-          {...(props as FileLogFullProps)}
-          filetype={filetype()}
-          syntaxStyle={syntaxStyle}
-          treeSitterClient={treeSitterClient}
-          showLineNumbers={showLineNumbers()}
-        />
-      </Show>
-
-      <Show when={props.mode === 'diff'}>
-        <FileLogDiff
-          {...(props as FileLogDiffProps)}
-          filetype={filetype()}
-          syntaxStyle={syntaxStyle}
-          treeSitterClient={treeSitterClient}
-        />
-      </Show>
-
-      <Show when={props.mode === 'partial'}>
-        <FileLogPartial
-          {...(props as FileLogPartialProps)}
-          filetype={filetype()}
-          syntaxStyle={syntaxStyle}
-          treeSitterClient={treeSitterClient}
-          showLineNumbers={showLineNumbers()}
-        />
-      </Show>
-    </box>
-  )
-}
-
-interface FileLogInternalProps {
-  filetype?: string
-  syntaxStyle?: ReturnType<typeof useLoggerContext>['syntaxStyle']
-  treeSitterClient?: ReturnType<typeof useLoggerContext>['treeSitterClient']
-}
-
-/**
- * Full file display with syntax highlighting.
- */
-function FileLogFull(props: FileLogFullProps & FileLogInternalProps) {
-  return (
-    <Show
-      when={props.syntaxStyle}
-      fallback={
-        <box paddingLeft={1} paddingRight={1}>
-          <text>{props.content}</text>
-        </box>
-      }
-    >
-      <code
-        content={props.content}
-        filetype={props.filetype}
-        syntaxStyle={props.syntaxStyle}
-        treeSitterClient={props.treeSitterClient}
-      />
-    </Show>
-  )
-}
-
-/**
- * Diff display using the built-in <diff> component.
- */
-function FileLogDiff(props: FileLogDiffProps & FileLogInternalProps) {
-  const view = () => props.view ?? 'unified'
-
-  return (
-    <Show
-      when={props.syntaxStyle}
-      fallback={
-        <box paddingLeft={1} paddingRight={1}>
-          <text>{props.diff}</text>
-        </box>
-      }
-    >
-      <diff
-        diff={props.diff}
-        view={view()}
-        filetype={props.filetype}
-        syntaxStyle={props.syntaxStyle}
-        treeSitterClient={props.treeSitterClient}
-      />
-    </Show>
-  )
-}
-
-/**
- * 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(props: FileLogPartialProps & FileLogInternalProps) {
-  // Parse content into lines for error highlighting
-  const lines = createMemo(() => props.content.split('\n'))
-
-  // Calculate which lines are errors (relative to startLine)
-  const errorLineSet = createMemo(() => new Set(props.errorLines ?? []))
-
-  // Error colors
-  const errorBg = () => props.errorLineBackground ?? ERROR_HIGHLIGHT_COLORS.background
-  const errorBorder = () => props.errorLineBorderColor ?? ERROR_HIGHLIGHT_COLORS.border
-
-  // Line number width based on max line number
-  const maxLineNum = () => props.startLine + lines().length - 1
-  const lineNumWidth = () => Math.max(4, String(maxLineNum()).length + 1)
-
-  return (
-    <box flexDirection="column">
-      <For each={lines()}>
-        {(line, index) => {
-          const lineNumber = () => props.startLine + index()
-          const isError = () => errorLineSet().has(lineNumber())
-
-          return (
-            <box
-              flexDirection="row"
-              backgroundColor={isError() ? errorBg() : undefined}
-              border={isError() ? ['left'] : undefined}
-              borderColor={isError() ? errorBorder() : undefined}
-            >
-              {/* Line number gutter */}
-              <Show when={props.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>
-              </Show>
-
-              {/* Code line */}
-              <box flexGrow={1} paddingLeft={1}>
-                <Show when={props.syntaxStyle} fallback={<text>{line}</text>}>
-                  <code
-                    content={line}
-                    filetype={props.filetype}
-                    syntaxStyle={props.syntaxStyle}
-                    treeSitterClient={props.treeSitterClient}
-                  />
-                </Show>
-              </box>
-            </box>
-          )
-        }}
-      </For>
-    </box>
-  )
-}

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

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

package/src/adapters/solid/components/filter/filter_bar.tsx

@@ -1,84 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { Show, For } from 'solid-js'
-
-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(props: FilterBarProps) {
-  const theme = useTheme()
-  const isSearchFocused = () => props.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={props.filter.searchQuery ? theme.filter.inputText : theme.filter.inputPlaceholder}>
-          {props.filter.searchQuery || 'Search logs...'}
-        </text>
-        <Show when={isSearchFocused()}>
-          <text fg={theme.filter.cursor} attributes={TextAttributes.BLINK}>
-            _
-          </text>
-        </Show>
-      </box>
-
-      {/* Level filters row */}
-      <box flexDirection="row" gap={1}>
-        <text fg={theme.filter.textDim}>Levels:</text>
-        <For each={ALL_LOG_LEVELS}>
-          {(level, index) => {
-            const isEnabled = () => props.filter.enabledLevels.has(level)
-            const count = () => props.levelCounts[level]
-            const levelColor = () => theme.logLevels[level].border
-            const isLevelsFocused = () => props.filter.focusedField === 'levels'
-
-            return (
-              <box flexDirection="row">
-                <text
-                  fg={isEnabled() ? levelColor() : theme.filter.inactiveLevel}
-                  attributes={isLevelsFocused() ? TextAttributes.BOLD : undefined}
-                >
-                  {index() + 1}:{LEVEL_LABELS[level]}
-                </text>
-                <Show when={count() > 0}>
-                  <text fg={theme.filter.textDim}>({count() > 99 ? '99+' : count()})</text>
-                </Show>
-              </box>
-            )
-          }}
-        </For>
-      </box>
-
-      {/* Hints */}
-      <box flexDirection="row">
-        <text fg={theme.filter.textDim}>Tab: switch fields | 1-7: toggle levels | Esc: close</text>
-      </box>
-    </box>
-  )
-}

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

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

package/src/adapters/solid/components/help/help_overlay.tsx

@@ -1,106 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { For, Show, createMemo } from 'solid-js'
-
-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(props: HelpOverlayProps) {
-  const theme = useTheme()
-  const grouped = createMemo(() => groupByCategory(props.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}>
-          <For each={CATEGORY_ORDER}>
-            {(category) => {
-              const categoryBindings = () => grouped()[category]
-
-              return (
-                <Show when={categoryBindings().length > 0}>
-                  <box flexDirection="column">
-                    <text fg={theme.help.category} attributes={TextAttributes.BOLD}>
-                      {CATEGORY_LABELS[category]}
-                    </text>
-
-                    <For each={categoryBindings()}>
-                      {(binding) => (
-                        <box flexDirection="row" paddingLeft={2}>
-                          <text fg={theme.help.key} width={14}>
-                            {formatKeyBinding(binding)}
-                          </text>
-                          <text fg={theme.help.description}>{binding.description}</text>
-                        </box>
-                      )}
-                    </For>
-                  </box>
-                </Show>
-              )
-            }}
-          </For>
-        </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/adapters/solid/components/help/index.ts

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

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

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

package/src/adapters/solid/components/log/log_message.tsx

@@ -1,92 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { Show, type JSX } from 'solid-js'
-
-import { useTheme } from '../../hooks/index.ts'
-import { VARIANT_COLORS } from '../../../../utils/index.ts'
-
-import type { LogMessageProps } from '../../../../types/index.ts'
-
-/**
- * LogMessage - A chat-like styled log message with level-based coloring.
- *
- * Features:
- * - Left border with prominent color based on log level
- * - Subtle tinted background matching the log level
- * - Optional timestamp and label display
- * - Supports both simple text and complex children
- * - Optional variant for semantic styling (e.g., 'success', 'trace')
- *
- * @example
- * <LogMessage level="error">
- *   Connection failed: timeout after 30s
- * </LogMessage>
- *
- * @example
- * <LogMessage level="log" timestamp={new Date()} label="API">
- *   Request completed successfully
- * </LogMessage>
- *
- * @example
- * <LogMessage level="log" variant="success">
- *   Operation completed successfully
- * </LogMessage>
- */
-export function LogMessage(props: LogMessageProps & { children?: JSX.Element }) {
-  const theme = useTheme()
-
-  // Get colors: variant colors take precedence over level colors
-  const levelColors = () => (props.variant ? VARIANT_COLORS[props.variant] : theme.logLevels[props.level])
-
-  // Resolve final colors (custom overrides level colors)
-  const borderColor = () => props.borderColor ?? levelColors().border
-  const backgroundColor = () => props.backgroundColor ?? levelColors().background
-
-  // Text color: use level-specific text color if defined, otherwise use foreground
-  const textColor = () => levelColors().text ?? theme.colors.foreground
-
-  // Determine border sides based on style
-  const borderSides = (): ('left' | 'top' | 'bottom')[] =>
-    props.borderStyle === 'thin' || props.borderStyle === undefined ? ['left'] : ['left', 'top', 'bottom']
-
-  // Format timestamp if provided
-  const formattedTimestamp = () => {
-    if (!props.timestamp) return null
-    return props.timestamp instanceof Date ? props.timestamp.toLocaleTimeString() : props.timestamp
-  }
-
-  return (
-    <box
-      flexDirection="column"
-      border={borderSides()}
-      borderColor={borderColor()}
-      backgroundColor={backgroundColor()}
-      paddingLeft={props.padding ?? 1}
-      paddingRight={props.padding ?? 1}
-      marginBottom={props.margin ?? 0}
-    >
-      {/* Header row with timestamp and label */}
-      <Show when={formattedTimestamp() || props.label}>
-        <box flexDirection="row" gap={1}>
-          <Show when={formattedTimestamp()}>
-            <text fg={theme.colors.muted}>{formattedTimestamp()}</text>
-          </Show>
-          <Show when={props.label}>
-            <text fg={levelColors().border} attributes={TextAttributes.BOLD}>
-              [{props.label}]
-            </text>
-          </Show>
-        </box>
-      </Show>
-
-      {/* Message content */}
-      <text fg={textColor()}>{props.children}</text>
-
-      {/* Stack trace (for trace level) */}
-      <Show when={props.trace}>
-        <box marginTop={1}>
-          <text fg={theme.colors.muted}>{props.trace}</text>
-        </box>
-      </Show>
-    </box>
-  )
-}

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

@@ -1,2 +0,0 @@
-export { PromptRenderer } from './prompt_renderer.tsx'
-export type { PromptRendererProps } from './prompt_renderer.tsx'