@navios/commander-tui 1.1.0 → 1.3.0

package/src/adapters/solid/components/prompt/prompt_renderer.tsx

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

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

@@ -0,0 +1,61 @@
+import { TextAttributes } from '@opentui/core'
+import { For, Show } from 'solid-js'
+
+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(props: 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}>
+          {props.label}
+        </text>
+      </box>
+
+      {/* Group content */}
+      <box flexDirection="column" gap={1}>
+        <For each={props.messages}>{(msg) => <MessageRenderer message={msg} />}</For>
+      </box>
+    </box>
+  )
+}
+
+export interface GroupMessageRendererProps {
+  message: GroupMessageData
+}
+
+/**
+ * Fallback renderer for group markers (when not processed at higher level)
+ */
+export function GroupMessageRenderer(props: GroupMessageRendererProps) {
+  const theme = useTheme()
+
+  return (
+    <Show when={!props.message.isEnd}>
+      <box flexDirection="row" borderColor={theme.group.border} border={['left']} paddingLeft={1}>
+        <text fg={theme.group.headerText} attributes={TextAttributes.BOLD}>
+          ▼ {props.message.label}
+        </text>
+      </box>
+    </Show>
+  )
+}

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

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

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

@@ -0,0 +1,39 @@
+import { createSignal, createEffect, onCleanup } from 'solid-js'
+
+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(props: LoadingMessageProps) {
+  const [frameIndex, setFrameIndex] = createSignal(0)
+
+  createEffect(() => {
+    if (props.message.status === 'loading') {
+      const interval = setInterval(() => {
+        setFrameIndex((prev) => (prev + 1) % SPINNER_FRAMES.length)
+      }, 80)
+
+      onCleanup(() => clearInterval(interval))
+    }
+  })
+
+  // Map loading status to log level and variant for display
+  const level = () => (props.message.status === 'fail' ? 'error' : 'log')
+  const variant = (): LogMessageVariant | undefined =>
+    props.message.status === 'success' ? 'success' : undefined
+
+  const displayContent = () => props.message.resolvedContent ?? props.message.content
+  const spinner = () => (props.message.status === 'loading' ? SPINNER_FRAMES[frameIndex()] + ' ' : '')
+
+  return (
+    <LogMessage level={level()} variant={variant()} timestamp={props.message.timestamp}>
+      {spinner() + displayContent()}
+    </LogMessage>
+  )
+}

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

@@ -0,0 +1,122 @@
+import { Switch, Match } from 'solid-js'
+
+import { useTheme } from '../../hooks/index.ts'
+import { FileLog } from '../file/index.ts'
+import { LogMessage } from '../log/index.ts'
+
+import type {
+  MessageData,
+  LogMessageData,
+  FileMessageData,
+  DiffMessageData,
+  FileErrorMessageData,
+  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(props: MessageRendererProps) {
+  const theme = useTheme()
+  const msg = () => props.message
+
+  return (
+    <Switch fallback={null}>
+      <Match when={msg().type === 'log' && (msg() as LogMessageData)}>
+        {(logMsg) => (
+          <LogMessage
+            level={logMsg().level}
+            timestamp={logMsg().timestamp}
+            variant={logMsg().variant}
+            label={logMsg().label}
+            trace={logMsg().trace}
+          >
+            {logMsg().content}
+          </LogMessage>
+        )}
+      </Match>
+
+      <Match when={msg().type === 'file' && (msg() as FileMessageData)}>
+        {(fileMsg) => (
+          <box
+            flexDirection="column"
+            border={['left']}
+            borderColor={theme.file.border}
+            backgroundColor={theme.file.background}
+          >
+            <FileLog
+              mode="full"
+              filePath={fileMsg().filePath}
+              content={fileMsg().content}
+              headerBackgroundColor={theme.file.headerBackground}
+            />
+          </box>
+        )}
+      </Match>
+
+      <Match when={msg().type === 'diff' && (msg() as DiffMessageData)}>
+        {(diffMsg) => (
+          <box
+            flexDirection="column"
+            border={['left']}
+            borderColor={theme.file.border}
+            backgroundColor={theme.file.background}
+          >
+            <FileLog
+              mode="diff"
+              filePath={diffMsg().filePath}
+              diff={diffMsg().diff}
+              view={diffMsg().view}
+              headerBackgroundColor={theme.file.headerBackground}
+            />
+          </box>
+        )}
+      </Match>
+
+      <Match when={msg().type === 'fileError' && (msg() as FileErrorMessageData)}>
+        {(errorMsg) => (
+          <box
+            flexDirection="column"
+            border={['left']}
+            borderColor={theme.file.border}
+            backgroundColor={theme.file.background}
+          >
+            <FileLog
+              mode="partial"
+              filePath={errorMsg().filePath}
+              content={errorMsg().content}
+              startLine={errorMsg().startLine}
+              errorLines={errorMsg().errorLines}
+              headerBackgroundColor={theme.file.headerBackground}
+            />
+          </box>
+        )}
+      </Match>
+
+      <Match when={msg().type === 'loading' && (msg() as LoadingMessageData)}>
+        {(loadingMsg) => <LoadingMessage message={loadingMsg()} />}
+      </Match>
+
+      <Match when={msg().type === 'progress' && (msg() as ProgressMessageData)}>
+        {(progressMsg) => <ProgressMessage message={progressMsg()} />}
+      </Match>
+
+      <Match when={msg().type === 'group' && (msg() as GroupMessageData)}>
+        {(groupMsg) => <GroupMessageRenderer message={groupMsg()} />}
+      </Match>
+
+      <Match when={msg().type === 'table' && (msg() as TableMessageData)}>
+        {(tableMsg) => <TableMessage message={tableMsg()} />}
+      </Match>
+    </Switch>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { useTheme } from '../../hooks/index.ts'
+
+import type { ProgressMessageData } from '../../../../types/index.ts'
+
+export interface ProgressMessageProps {
+  message: ProgressMessageData
+}
+
+export function ProgressMessage(props: ProgressMessageProps) {
+  const theme = useTheme()
+
+  const percent = () => Math.round((props.message.current / props.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 = () =>
+    props.message.status === 'complete'
+      ? theme.progress.complete
+      : props.message.status === 'failed'
+        ? theme.progress.failed
+        : theme.progress.border
+
+  const backgroundColor = () =>
+    props.message.status === 'complete'
+      ? theme.progress.completeBackground
+      : props.message.status === 'failed'
+        ? theme.progress.failedBackground
+        : theme.progress.background
+
+  const barColor = () =>
+    props.message.status === 'complete'
+      ? theme.progress.complete
+      : props.message.status === 'failed'
+        ? theme.progress.failed
+        : theme.progress.barFilled
+
+  const displayLabel = () => props.message.resolvedContent ?? props.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>
+  )
+}