@navios/commander-tui 1.3.0 → 1.4.0

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

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

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

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

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

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

@@ -1,61 +0,0 @@
-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>
-  )
-}