@navios/commander-tui 1.0.0

package/src/components/index.ts

@@ -0,0 +1,15 @@
+// Log components
+export * from './log/index.ts'
+
+// File components
+export * from './file/index.ts'
+
+// Prompt components
+export * from './prompt/index.ts'
+
+// Screen components
+export * from './screen/index.ts'
+export * from './sidebar/index.ts'
+
+// Main bridge
+export * from './screen_manager_bridge.tsx'

package/src/components/log/index.ts

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

package/src/components/log/log_message.tsx

@@ -0,0 +1,102 @@
+import { TextAttributes } from '@opentui/core'
+
+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 React 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({
+  level,
+  variant,
+  children,
+  timestamp,
+  label,
+  trace,
+  borderColor: customBorderColor,
+  backgroundColor: customBackgroundColor,
+  borderStyle = 'thin',
+  padding = 1,
+  margin = 0,
+}: LogMessageProps) {
+  const theme = useTheme()
+
+  // Get colors: variant colors take precedence over level colors
+  const levelColors = variant ? VARIANT_COLORS[variant] : theme.logLevels[level]
+
+  // Resolve final colors (custom overrides level colors)
+  const borderColor = customBorderColor ?? levelColors.border
+  const backgroundColor = customBackgroundColor ?? 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')[] =
+    borderStyle === 'thin' ? ['left'] : ['left', 'top', 'bottom']
+
+  // Format timestamp if provided
+  const formattedTimestamp = timestamp
+    ? timestamp instanceof Date
+      ? timestamp.toLocaleTimeString()
+      : timestamp
+    : null
+
+  return (
+    <box
+      flexDirection="column"
+      border={borderSides}
+      borderColor={borderColor}
+      backgroundColor={backgroundColor}
+      paddingLeft={padding}
+      paddingRight={padding}
+      marginBottom={margin}
+    >
+      {/* Header row with timestamp and label */}
+      {(formattedTimestamp || label) && (
+        <box flexDirection="row" gap={1}>
+          {formattedTimestamp && <text fg={theme.colors.muted}>{formattedTimestamp}</text>}
+          {label && (
+            <text fg={levelColors.border} attributes={TextAttributes.BOLD}>
+              [{label}]
+            </text>
+          )}
+        </box>
+      )}
+
+      {/* Message content */}
+      <text fg={textColor}>{children}</text>
+
+      {/* Stack trace (for trace level) */}
+      {trace && (
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>{trace}</text>
+        </box>
+      )}
+    </box>
+  )
+}

package/src/components/prompt/index.ts

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

package/src/components/prompt/prompt_renderer.tsx

@@ -0,0 +1,346 @@
+import { TextAttributes } from '@opentui/core'
+
+import { useTheme } from '../../hooks/index.ts'
+
+import type {
+  PromptData,
+  ChoicePromptData,
+  ConfirmPromptData,
+  InputPromptData,
+  MultiChoicePromptData,
+  PromptTheme,
+} from '../../types/index.ts'
+
+export interface PromptRendererProps {
+  prompt: PromptData
+}
+
+export function PromptRenderer({ prompt }: PromptRendererProps) {
+  const theme = useTheme()
+  // Calculate timeout remaining if applicable
+  const timeoutRemaining = getTimeoutRemaining(prompt)
+
+  switch (prompt.type) {
+    case 'choice':
+      return (
+        <ChoicePromptRenderer
+          prompt={prompt}
+          timeoutRemaining={timeoutRemaining}
+          colors={theme.prompt}
+        />
+      )
+    case 'confirm':
+      return (
+        <ConfirmPromptRenderer
+          prompt={prompt}
+          timeoutRemaining={timeoutRemaining}
+          colors={theme.prompt}
+        />
+      )
+    case 'input':
+      return (
+        <InputPromptRenderer
+          prompt={prompt}
+          timeoutRemaining={timeoutRemaining}
+          colors={theme.prompt}
+        />
+      )
+    case 'multiChoice':
+      return (
+        <MultiChoicePromptRenderer
+          prompt={prompt}
+          timeoutRemaining={timeoutRemaining}
+          colors={theme.prompt}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+function getTimeoutRemaining(prompt: PromptData): number | null {
+  if (!prompt.timeout || !prompt.timeoutStarted) return null
+  const elapsed = Date.now() - prompt.timeoutStarted
+  const remaining = Math.max(0, prompt.timeout - elapsed)
+  return Math.ceil(remaining / 1000)
+}
+
+function TimeoutIndicator({ seconds, colors }: { seconds: number | null; colors: PromptTheme }) {
+  if (seconds === null) return null
+  return (
+    <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+      {' '}
+      (auto-select in {seconds}s)
+    </text>
+  )
+}
+
+interface ChoicePromptRendererProps {
+  prompt: ChoicePromptData
+  timeoutRemaining: number | null
+  colors: PromptTheme
+}
+
+function ChoicePromptRenderer({ prompt, timeoutRemaining, colors }: ChoicePromptRendererProps) {
+  return (
+    <box
+      flexDirection="column"
+      borderColor={colors.focusBorder}
+      border={['left']}
+      paddingLeft={1}
+      paddingRight={1}
+      gap={1}
+    >
+      {/* Question */}
+      <box flexDirection="row">
+        <text fg={colors.question} attributes={TextAttributes.BOLD}>
+          ? {prompt.question}
+        </text>
+        <TimeoutIndicator seconds={timeoutRemaining} colors={colors} />
+      </box>
+
+      {/* Choices */}
+      <box flexDirection="column">
+        {prompt.choices.map((choice, index) => {
+          const isSelected = index === prompt.selectedIndex
+          const showInput = isSelected && choice.input && prompt.inputMode
+
+          return (
+            <box key={choice.value} flexDirection="row">
+              {/* Selection indicator */}
+              <text fg={isSelected ? colors.optionSelected : 'transparent'}>{'>'} </text>
+
+              {/* Choice label */}
+              <text
+                fg={isSelected ? colors.optionText : colors.optionTextDim}
+                attributes={isSelected ? TextAttributes.BOLD : undefined}
+              >
+                {choice.label}
+              </text>
+
+              {/* Input field (if applicable) */}
+              {showInput && (
+                <box flexDirection="row" marginLeft={1}>
+                  <text fg={colors.inputText}>: </text>
+                  <text fg={colors.inputText}>{prompt.inputValue}</text>
+                  <text fg={colors.inputCursor} attributes={TextAttributes.BLINK}>
+                    _
+                  </text>
+                </box>
+              )}
+
+              {/* Show hint for input option when selected but not in input mode */}
+              {isSelected && choice.input && !prompt.inputMode && (
+                <text fg={colors.optionTextDim}> (press Enter to type)</text>
+              )}
+            </box>
+          )
+        })}
+      </box>
+
+      {/* Instructions */}
+      {prompt.inputMode ? (
+        <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+          Type your answer, Enter to submit, Esc to cancel
+        </text>
+      ) : (
+        <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+          ↑/↓ to navigate, Enter to select
+        </text>
+      )}
+    </box>
+  )
+}
+
+interface ConfirmPromptRendererProps {
+  prompt: ConfirmPromptData
+  timeoutRemaining: number | null
+  colors: PromptTheme
+}
+
+function ConfirmPromptRenderer({ prompt, timeoutRemaining, colors }: ConfirmPromptRendererProps) {
+  const confirmSelected = prompt.selectedValue === true
+  const cancelSelected = prompt.selectedValue === false
+
+  return (
+    <box
+      flexDirection="column"
+      borderColor={colors.focusBorder}
+      border={['left']}
+      paddingLeft={1}
+      paddingRight={1}
+      gap={1}
+    >
+      {/* Question */}
+      <box flexDirection="row">
+        <text fg={colors.question} attributes={TextAttributes.BOLD}>
+          ? {prompt.question}
+        </text>
+        <TimeoutIndicator seconds={timeoutRemaining} colors={colors} />
+      </box>
+
+      {/* Buttons */}
+      <box flexDirection="row" gap={2}>
+        {/* Confirm button */}
+        <box
+          backgroundColor={confirmSelected ? colors.buttonSelectedBackground : undefined}
+          paddingLeft={1}
+          paddingRight={1}
+        >
+          <text
+            fg={confirmSelected ? colors.confirmButton : colors.optionTextDim}
+            attributes={confirmSelected ? TextAttributes.BOLD : undefined}
+          >
+            {confirmSelected ? '>' : ' '} {prompt.confirmText}
+          </text>
+        </box>
+
+        {/* Cancel button */}
+        <box
+          backgroundColor={cancelSelected ? colors.buttonSelectedBackground : undefined}
+          paddingLeft={1}
+          paddingRight={1}
+        >
+          <text
+            fg={cancelSelected ? colors.cancelButton : colors.optionTextDim}
+            attributes={cancelSelected ? TextAttributes.BOLD : undefined}
+          >
+            {cancelSelected ? '>' : ' '} {prompt.cancelText}
+          </text>
+        </box>
+      </box>
+
+      {/* Instructions */}
+      <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+        ←/→ to select, Enter to confirm
+      </text>
+    </box>
+  )
+}
+
+interface InputPromptRendererProps {
+  prompt: InputPromptData
+  timeoutRemaining: number | null
+  colors: PromptTheme
+}
+
+function InputPromptRenderer({ prompt, timeoutRemaining, colors }: InputPromptRendererProps) {
+  const hasValue = prompt.value.length > 0
+
+  return (
+    <box
+      flexDirection="column"
+      borderColor={colors.focusBorder}
+      border={['left']}
+      paddingLeft={1}
+      paddingRight={1}
+      gap={1}
+    >
+      {/* Question */}
+      <box flexDirection="row">
+        <text fg={colors.question} attributes={TextAttributes.BOLD}>
+          ? {prompt.question}
+        </text>
+        <TimeoutIndicator seconds={timeoutRemaining} colors={colors} />
+      </box>
+
+      {/* Input field */}
+      <box flexDirection="row" borderColor={colors.inputBorder} border={['left']} paddingLeft={1}>
+        <text fg={hasValue ? colors.inputText : colors.inputPlaceholder}>
+          {hasValue ? prompt.value : prompt.placeholder}
+        </text>
+        <text fg={colors.inputCursor} attributes={TextAttributes.BLINK}>
+          _
+        </text>
+      </box>
+
+      {/* Instructions */}
+      <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+        Type your answer, Enter to submit
+      </text>
+    </box>
+  )
+}
+
+interface MultiChoicePromptRendererProps {
+  prompt: MultiChoicePromptData
+  timeoutRemaining: number | null
+  colors: PromptTheme
+}
+
+function MultiChoicePromptRenderer({
+  prompt,
+  timeoutRemaining,
+  colors,
+}: MultiChoicePromptRendererProps) {
+  const selectedCount = prompt.selectedIndices.size
+  const canSubmit = selectedCount >= prompt.minSelect
+
+  return (
+    <box
+      flexDirection="column"
+      borderColor={colors.focusBorder}
+      border={['left']}
+      paddingLeft={1}
+      paddingRight={1}
+      gap={1}
+    >
+      {/* Question */}
+      <box flexDirection="row">
+        <text fg={colors.question} attributes={TextAttributes.BOLD}>
+          ? {prompt.question}
+        </text>
+        <text fg={colors.optionTextDim}>
+          {' '}
+          ({selectedCount}/{prompt.maxSelect} selected)
+        </text>
+        <TimeoutIndicator seconds={timeoutRemaining} colors={colors} />
+      </box>
+
+      {/* Choices */}
+      <box flexDirection="column">
+        {prompt.choices.map((choice, index) => {
+          const isFocused = index === prompt.focusedIndex
+          const isChecked = prompt.selectedIndices.has(index)
+
+          return (
+            <box key={choice.value} flexDirection="row">
+              {/* Focus indicator */}
+              <text fg={isFocused ? colors.optionSelected : 'transparent'}>{'>'} </text>
+
+              {/* Checkbox */}
+              <text fg={isChecked ? colors.optionSelected : colors.optionTextDim}>
+                {isChecked ? '[✓]' : '[ ]'}{' '}
+              </text>
+
+              {/* Choice label */}
+              <text
+                fg={isFocused ? colors.optionText : colors.optionTextDim}
+                attributes={isFocused ? TextAttributes.BOLD : undefined}
+              >
+                {choice.label}
+              </text>
+            </box>
+          )
+        })}
+      </box>
+
+      {/* Instructions */}
+      <box flexDirection="column">
+        <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+          ↑/↓ to navigate, Space to toggle
+        </text>
+        {canSubmit ? (
+          <text fg={colors.optionTextDim} attributes={TextAttributes.DIM}>
+            Enter to confirm
+          </text>
+        ) : (
+          <text fg={colors.cancelButton} attributes={TextAttributes.DIM}>
+            Select at least {prompt.minSelect} option
+            {prompt.minSelect > 1 ? 's' : ''}
+          </text>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/components/screen/group_renderer.tsx

@@ -0,0 +1,64 @@
+import { TextAttributes } from '@opentui/core'
+
+import { useTheme } from '../../hooks/index.ts'
+
+import type { MessageData, GroupMessageData } from '../../types/index.ts'
+
+import { MessageRenderer } from './message_renderer.tsx'
+
+export interface GroupRendererProps {
+  label: string
+  messages: MessageData[]
+}
+
+export function GroupRenderer({ label, messages }: GroupRendererProps) {
+  const theme = useTheme()
+
+  return (
+    <box
+      flexDirection="column"
+      border={['left']}
+      borderColor={theme.group.border}
+      backgroundColor={theme.group.background}
+      paddingLeft={1}
+    >
+      {/* Group header */}
+      <box flexDirection="row" marginBottom={1}>
+        <text fg={theme.group.icon}>▼ </text>
+        <text fg={theme.group.headerText} attributes={TextAttributes.BOLD}>
+          {label}
+        </text>
+      </box>
+
+      {/* Group content */}
+      <box flexDirection="column" gap={1}>
+        {messages.map((msg) => (
+          <MessageRenderer key={msg.id} message={msg} />
+        ))}
+      </box>
+    </box>
+  )
+}
+
+export interface GroupMessageRendererProps {
+  message: GroupMessageData
+}
+
+/**
+ * Fallback renderer for group markers (when not processed at higher level)
+ */
+export function GroupMessageRenderer({ message }: GroupMessageRendererProps) {
+  const theme = useTheme()
+
+  if (message.isEnd) {
+    return null
+  }
+
+  return (
+    <box flexDirection="row" borderColor={theme.group.border} border={['left']} paddingLeft={1}>
+      <text fg={theme.group.headerText} attributes={TextAttributes.BOLD}>
+        ▼ {message.label}
+      </text>
+    </box>
+  )
+}

package/src/components/screen/index.ts

@@ -0,0 +1,6 @@
+export * from './screen_bridge.tsx'
+export * from './message_renderer.tsx'
+export * from './loading_message.tsx'
+export * from './progress_message.tsx'
+export * from './group_renderer.tsx'
+export * from './table_message.tsx'

package/src/components/screen/loading_message.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect, useRef } from 'react'
+
+import { LogMessage } from '../log/index.ts'
+
+import type { LoadingMessageData, LogMessageVariant } from '../../types/index.ts'
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+export interface LoadingMessageProps {
+  message: LoadingMessageData
+}
+
+export function LoadingMessage({ message }: LoadingMessageProps) {
+  const [frameIndex, setFrameIndex] = useState(0)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    if (message.status === 'loading') {
+      intervalRef.current = setInterval(() => {
+        setFrameIndex((prev) => (prev + 1) % SPINNER_FRAMES.length)
+      }, 80)
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [message.status])
+
+  // Map loading status to log level and variant for display
+  const level = message.status === 'fail' ? 'error' : 'log'
+  const variant: LogMessageVariant | undefined = message.status === 'success' ? 'success' : undefined
+
+  const displayContent = message.resolvedContent ?? message.content
+  const spinner = message.status === 'loading' ? SPINNER_FRAMES[frameIndex] + ' ' : ''
+
+  return (
+    <LogMessage level={level} variant={variant} timestamp={message.timestamp}>
+      {spinner}
+      {displayContent}
+    </LogMessage>
+  )
+}

package/src/components/screen/message_renderer.tsx

@@ -0,0 +1,108 @@
+import { useTheme } from '../../hooks/index.ts'
+import { FileLog } from '../file/index.ts'
+import { LogMessage } from '../log/index.ts'
+
+import type {
+  MessageData,
+  LoadingMessageData,
+  ProgressMessageData,
+  GroupMessageData,
+  TableMessageData,
+} from '../../types/index.ts'
+
+import { GroupMessageRenderer } from './group_renderer.tsx'
+import { LoadingMessage } from './loading_message.tsx'
+import { ProgressMessage } from './progress_message.tsx'
+import { TableMessage } from './table_message.tsx'
+
+export interface MessageRendererProps {
+  message: MessageData
+}
+
+export function MessageRenderer({ message }: MessageRendererProps) {
+  const theme = useTheme()
+
+  switch (message.type) {
+    case 'log':
+      return (
+        <LogMessage
+          level={message.level}
+          timestamp={message.timestamp}
+          variant={message.variant}
+          label={message.label}
+          trace={message.trace}
+        >
+          {message.content}
+        </LogMessage>
+      )
+
+    case 'file':
+      return (
+        <box
+          flexDirection="column"
+          border={['left']}
+          borderColor={theme.file.border}
+          backgroundColor={theme.file.background}
+        >
+          <FileLog
+            mode="full"
+            filePath={message.filePath}
+            content={message.content}
+            headerBackgroundColor={theme.file.headerBackground}
+          />
+        </box>
+      )
+
+    case 'diff':
+      return (
+        <box
+          flexDirection="column"
+          border={['left']}
+          borderColor={theme.file.border}
+          backgroundColor={theme.file.background}
+        >
+          <FileLog
+            mode="diff"
+            filePath={message.filePath}
+            diff={message.diff}
+            view={message.view}
+            headerBackgroundColor={theme.file.headerBackground}
+          />
+        </box>
+      )
+
+    case 'fileError':
+      return (
+        <box
+          flexDirection="column"
+          border={['left']}
+          borderColor={theme.file.border}
+          backgroundColor={theme.file.background}
+        >
+          <FileLog
+            mode="partial"
+            filePath={message.filePath}
+            content={message.content}
+            startLine={message.startLine}
+            errorLines={message.errorLines}
+            headerBackgroundColor={theme.file.headerBackground}
+          />
+        </box>
+      )
+
+    case 'loading':
+      return <LoadingMessage message={message as LoadingMessageData} />
+
+    case 'progress':
+      return <ProgressMessage message={message as ProgressMessageData} />
+
+    case 'group':
+      return <GroupMessageRenderer message={message as GroupMessageData} />
+
+    case 'table':
+      return <TableMessage message={message as TableMessageData} />
+
+    default:
+      return null
+  }
+}