@navios/commander-tui 1.1.0 → 1.3.0

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

@@ -0,0 +1,221 @@
+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

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

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

@@ -0,0 +1,84 @@
+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

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

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

@@ -0,0 +1,106 @@
+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

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

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

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

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

@@ -0,0 +1,92 @@
+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

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