@navios/commander-tui 1.0.0

package/src/services/screen_manager.tsx

@@ -0,0 +1,390 @@
+import { Injectable } from '@navios/core'
+import { createCliRenderer, type CliRenderer } from '@opentui/core'
+import { createRoot } from '@opentui/react'
+
+import { getThemePreset } from '../themes/index.ts'
+import { printMessagesToStdout } from '../utils/index.ts'
+
+import type { ScreenOptions } from '../schemas/index.ts'
+import type { BindOptions, FocusArea, Theme } from '../types/index.ts'
+
+import { ScreenInstance } from './screen.ts'
+
+@Injectable()
+export class ScreenManager {
+  private screens: Map<string, ScreenInstance> = new Map()
+  private screenOrder: string[] = []
+  private activeScreenId: string | null = null
+  private renderer: CliRenderer | null = null
+  private root: ReturnType<typeof createRoot> | null = null
+  private isBound: boolean = false
+  private changeListeners: Set<() => void> = new Set()
+  private bindOptions: BindOptions = {}
+  private autoCloseTimer: ReturnType<typeof setTimeout> | null = null
+  private theme: Theme | undefined
+
+  // Keyboard navigation state (exposed for bridge component)
+  public focusArea: FocusArea = 'content'
+  public selectedIndex: number = 0
+
+  /**
+   * Create a new screen and return it
+   */
+  createScreen(options: ScreenOptions): ScreenInstance {
+    const id = `screen-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    const screen = new ScreenInstance(id, options)
+
+    // Set up the screen with manager reference and print function
+    screen._setManager(this)
+    screen._setPrintFn(printMessagesToStdout)
+
+    // Subscribe to screen changes
+    screen.onChange(() => this.notifyChange())
+
+    this.screens.set(id, screen)
+    this.screenOrder.push(id)
+
+    // Set first visible screen as active by default
+    if (!this.activeScreenId && !screen.isHidden()) {
+      this.activeScreenId = id
+    }
+
+    this.notifyChange()
+    return screen
+  }
+
+  getScreenByName(name: string): ScreenInstance | undefined {
+    const id = Array.from(this.screens.keys()).find(
+      (id) => this.screens.get(id)?.getName() === name,
+    )
+    return id ? this.screens.get(id) : undefined
+  }
+
+  /**
+   * Remove a screen dynamically
+   */
+  removeScreen(screen: ScreenInstance): void {
+    const id = screen.getId()
+    if (!this.screens.has(id)) return
+
+    this.screens.delete(id)
+    this.screenOrder = this.screenOrder.filter((sid) => sid !== id)
+
+    // If removed screen was active, switch to first visible screen
+    if (this.activeScreenId === id) {
+      const visibleScreens = this.getScreens()
+      this.activeScreenId = visibleScreens[0]?.getId() ?? null
+    }
+
+    // Update selected index if out of bounds
+    const visibleScreens = this.getScreens()
+    if (this.selectedIndex >= visibleScreens.length) {
+      this.selectedIndex = Math.max(0, visibleScreens.length - 1)
+    }
+
+    this.notifyChange()
+  }
+
+  /**
+   * Non-blocking bind - starts TUI rendering in background
+   */
+  async bind(options?: BindOptions): Promise<void> {
+    if (this.isBound) return
+
+    this.bindOptions = options ?? {}
+
+    // Resolve theme from options
+    if (options?.theme) {
+      this.theme = typeof options.theme === 'string' ? getThemePreset(options.theme) : options.theme
+    }
+
+    this.renderer = await createCliRenderer({
+      exitOnCtrlC: options?.exitOnCtrlC ?? true,
+      useAlternateScreen: true,
+      useMouse: options?.useMouse ?? false,
+    })
+
+    this.root = createRoot(this.renderer)
+    this.isBound = true
+
+    // Initial render
+    this.render()
+  }
+
+  /**
+   * Get the configured theme
+   */
+  getTheme(): Theme | undefined {
+    return this.theme
+  }
+
+  /**
+   * Stop TUI rendering and cleanup
+   * Flushes all completed screens to stdout/stderr
+   */
+  unbind(): void {
+    if (!this.isBound) return
+
+    // Clear any pending auto-close timer
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer)
+      this.autoCloseTimer = null
+    }
+
+    this.root?.unmount()
+
+    // Explicitly disable mouse tracking before destroy to prevent escape sequence leakage
+    // Using type assertion to access private method as a safety measure
+    if (this.renderer && 'disableMouse' in this.renderer) {
+      ;(this.renderer as unknown as { disableMouse: () => void }).disableMouse()
+    }
+
+    this.renderer?.destroy()
+
+    this.renderer = null
+    this.root = null
+    this.isBound = false
+
+    // Flush all completed screens to console (in order)
+    this.flushCompletedScreens()
+  }
+
+  /**
+   * Print all completed screens that haven't been printed yet
+   */
+  private flushCompletedScreens(): void {
+    for (const id of this.screenOrder) {
+      const screen = this.screens.get(id)
+      if (screen && !screen.hasPrintedToConsole()) {
+        screen._flushToConsole(true)
+      }
+    }
+  }
+
+  /**
+   * Check if TUI is currently bound
+   */
+  isTuiBound(): boolean {
+    return this.isBound
+  }
+
+  /**
+   * Called by Screen when a prompt becomes active
+   * Focuses the screen and switches to content area
+   */
+  onScreenPromptActivated(screen: ScreenInstance): void {
+    this.setActiveScreen(screen)
+    this.focusArea = 'content'
+    this.notifyChange()
+  }
+
+  /**
+   * Check if any screen has an active prompt
+   */
+  hasActivePrompt(): boolean {
+    for (const screen of this.screens.values()) {
+      if (screen.hasActivePrompt()) {
+        return true
+      }
+    }
+    return false
+  }
+
+  /**
+   * Get the screen with an active prompt (if any)
+   */
+  getScreenWithActivePrompt(): ScreenInstance | null {
+    for (const screen of this.screens.values()) {
+      if (screen.hasActivePrompt()) {
+        return screen
+      }
+    }
+    return null
+  }
+
+  /**
+   * Called by Screen when visibility changes
+   * Handles switching active screen if needed
+   */
+  onScreenVisibilityChanged(screen: ScreenInstance): void {
+    // If the hidden screen was active, switch to first visible screen
+    if (screen.isHidden() && this.activeScreenId === screen.getId()) {
+      const visibleScreens = this.getScreens()
+      this.activeScreenId = visibleScreens[0]?.getId() ?? null
+      this.selectedIndex = 0
+    }
+
+    // Update selected index if it's now out of bounds
+    const visibleScreens = this.getScreens()
+    if (this.selectedIndex >= visibleScreens.length) {
+      this.selectedIndex = Math.max(0, visibleScreens.length - 1)
+    }
+
+    this.notifyChange()
+  }
+
+  /**
+   * Called by Screen when status becomes success/fail
+   * Moves completed screens to end of sidebar list
+   */
+  onScreenCompleted(screen: ScreenInstance): void {
+    const id = screen.getId()
+    const index = this.screenOrder.indexOf(id)
+
+    if (index !== -1) {
+      // Remove from current position
+      this.screenOrder.splice(index, 1)
+      // Add to end
+      this.screenOrder.push(id)
+
+      // Update selected index if needed (based on visible screens)
+      const visibleScreens = this.getScreens()
+      if (this.selectedIndex >= visibleScreens.length) {
+        this.selectedIndex = Math.max(0, visibleScreens.length - 1)
+      }
+    }
+
+    // Check for auto-close
+    this.checkAutoClose()
+
+    this.notifyChange()
+  }
+
+  /**
+   * Check if all screens are successful and start auto-close timer if enabled
+   */
+  private checkAutoClose(): void {
+    const autoClose = this.bindOptions.autoClose
+    if (!autoClose || !this.isBound) return
+
+    // Clear any existing timer
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer)
+      this.autoCloseTimer = null
+    }
+
+    // Check if all screens are successful
+    const screens = this.getScreens()
+    if (screens.length === 0) return
+
+    const allSuccessful = screens.every((s) => s.getStatus() === 'success')
+    if (!allSuccessful) return
+
+    // Start auto-close timer
+    const delay = typeof autoClose === 'number' ? autoClose : 5000
+    this.autoCloseTimer = setTimeout(() => {
+      this.unbind()
+    }, delay)
+  }
+
+  /**
+   * Get visible screens in display order (excludes hidden screens)
+   */
+  getScreens(): ScreenInstance[] {
+    return this.screenOrder
+      .map((id) => this.screens.get(id))
+      .filter((s): s is ScreenInstance => s !== undefined && !s.isHidden())
+  }
+
+  /**
+   * Get all screens in display order (includes hidden screens)
+   */
+  getAllScreens(): ScreenInstance[] {
+    return this.screenOrder
+      .map((id) => this.screens.get(id))
+      .filter((s): s is ScreenInstance => s !== undefined)
+  }
+
+  /**
+   * Get the active screen
+   */
+  getActiveScreen(): ScreenInstance | null {
+    return this.activeScreenId ? (this.screens.get(this.activeScreenId) ?? null) : null
+  }
+
+  /**
+   * Set the active screen
+   */
+  setActiveScreen(screen: ScreenInstance): void {
+    this.activeScreenId = screen.getId()
+    this.notifyChange()
+  }
+
+  /**
+   * Get bind options
+   */
+  getBindOptions(): BindOptions {
+    return this.bindOptions
+  }
+
+  /**
+   * Set focus area (sidebar or content)
+   */
+  setFocusArea(area: FocusArea): void {
+    this.focusArea = area
+    this.notifyChange()
+  }
+
+  /**
+   * Set selected index in sidebar
+   */
+  setSelectedIndex(index: number): void {
+    const visibleScreens = this.getScreens()
+    this.selectedIndex = Math.max(0, Math.min(index, visibleScreens.length - 1))
+    this.notifyChange()
+  }
+
+  /**
+   * Navigate sidebar up
+   */
+  navigateUp(): void {
+    this.setSelectedIndex(this.selectedIndex - 1)
+  }
+
+  /**
+   * Navigate sidebar down
+   */
+  navigateDown(): void {
+    this.setSelectedIndex(this.selectedIndex + 1)
+  }
+
+  /**
+   * Select the currently highlighted screen
+   */
+  selectCurrent(): void {
+    const screens = this.getScreens()
+    const screen = screens[this.selectedIndex]
+    if (screen) {
+      this.setActiveScreen(screen)
+    }
+  }
+
+  /**
+   * Toggle focus between sidebar and content
+   */
+  toggleFocus(): void {
+    this.focusArea = this.focusArea === 'sidebar' ? 'content' : 'sidebar'
+    this.notifyChange()
+  }
+
+  /**
+   * Register a change listener for re-renders
+   */
+  onChange(listener: () => void): () => void {
+    this.changeListeners.add(listener)
+    return () => this.changeListeners.delete(listener)
+  }
+
+  private notifyChange(): void {
+    // Notify listeners - React components will forceUpdate and re-render
+    this.changeListeners.forEach((listener) => listener())
+  }
+
+  private async render(): Promise<void> {
+    if (!this.root) return
+
+    // Import the bridge component (cached by the module system after first load)
+    const { ScreenManagerBridge } = await import('../components/screen_manager_bridge.tsx')
+    this.root.render(<ScreenManagerBridge manager={this} theme={this.theme} />)
+  }
+}

package/src/themes/dark.ts

@@ -0,0 +1,173 @@
+import type { Theme } from '../types/index.ts'
+
+/**
+ * Default dark theme.
+ * Migrated from the scattered color files in utils/colors/.
+ */
+export const darkTheme: Theme = {
+  name: 'dark',
+
+  logLevels: {
+    verbose: {
+      border: '#6B7280', // Gray-500
+      background: '#6B728015', // Gray with 8% opacity
+    },
+    debug: {
+      border: '#8B5CF6', // Violet-500
+      background: '#8B5CF615', // Violet with 8% opacity
+    },
+    log: {
+      border: '#3B82F6', // Blue-500
+      background: '#3B82F615', // Blue with 8% opacity
+    },
+    warn: {
+      border: '#F59E0B', // Amber-500
+      background: '#F59E0B15', // Amber with 8% opacity
+    },
+    error: {
+      border: '#EF4444', // Red-500
+      background: '#EF444415', // Red with 8% opacity
+    },
+    fatal: {
+      border: '#DC2626', // Red-600
+      background: '#DC262625', // Red with 15% opacity
+      text: '#FCA5A5', // Light red text
+    },
+  },
+
+  sidebar: {
+    background: undefined,
+    selectedBackground: '#1F293780', // Gray-800 with 50% opacity
+    hoverBackground: '#374151', // Gray-700
+    text: '#E5E7EB', // Gray-200
+    textDim: '#6B7280', // Gray-500
+    border: '#374151', // Gray-700
+    badge: '#3B82F6', // Blue-500
+    focusBorder: '#3B82F6', // Blue-500
+  },
+
+  header: {
+    background: undefined,
+    text: '#F9FAFB', // Gray-50
+    border: '#374151', // Gray-700
+  },
+
+  statusIndicators: {
+    waiting: {
+      icon: '○',
+      color: '#6B7280', // Gray-500
+    },
+    pending: {
+      icon: '◐',
+      color: '#F59E0B', // Amber-500
+    },
+    success: {
+      icon: '✓',
+      color: '#22C55E', // Green-500
+    },
+    fail: {
+      icon: '✗',
+      color: '#EF4444', // Red-500
+    },
+  },
+
+  separator: {
+    line: '#374151', // Gray-700
+    text: '#6B7280', // Gray-500
+  },
+
+  progress: {
+    border: '#3B82F6', // Blue-500
+    background: '#3B82F615', // Blue with 8% opacity
+    barFilled: '#3B82F6', // Blue-500
+    barEmpty: '#374151', // Gray-700
+    text: '#E5E7EB', // Gray-200
+    textDim: '#9CA3AF', // Gray-400
+    complete: '#22C55E', // Green-500
+    completeBackground: '#22C55E15',
+    failed: '#EF4444', // Red-500
+    failedBackground: '#EF444415',
+  },
+
+  group: {
+    border: '#6B7280', // Gray-500
+    background: '#6B728010', // Gray with 6% opacity
+    headerText: '#E5E7EB', // Gray-200
+    icon: '#9CA3AF', // Gray-400
+  },
+
+  table: {
+    border: '#3B82F6', // Blue-500
+    background: '#3B82F615', // Blue with 8% opacity
+    headerText: '#F9FAFB', // Gray-50
+    cellText: '#E5E7EB', // Gray-200
+    title: '#F9FAFB', // Gray-50
+    separator: '#3B82F650', // Blue with 30% opacity
+  },
+
+  file: {
+    border: '#3B82F6', // Blue-500
+    background: '#3B82F615', // Blue with 8% opacity
+    headerText: '#F9FAFB', // Gray-50
+    headerBackground: '#3B82F625', // Blue with 15% opacity
+  },
+
+  prompt: {
+    question: '#F9FAFB', // Gray-50
+    optionText: '#E5E7EB', // Gray-200
+    optionTextDim: '#9CA3AF', // Gray-400
+    optionSelected: '#3B82F6', // Blue-500
+    optionSelectedBackground: '#1E3A5F', // Dark blue
+    confirmButton: '#22C55E', // Green-500
+    cancelButton: '#EF4444', // Red-500
+    buttonBackground: '#374151', // Gray-700
+    buttonSelectedBackground: '#1F2937', // Gray-800
+    inputBorder: '#3B82F6', // Blue-500
+    inputBackground: '#1F2937', // Gray-800
+    inputText: '#F9FAFB', // Gray-50
+    inputPlaceholder: '#6B7280', // Gray-500
+    inputCursor: '#3B82F6', // Blue-500
+    border: '#374151', // Gray-700
+    focusBorder: '#3B82F6', // Blue-500
+  },
+
+  errorHighlight: {
+    background: '#EF444425', // Red with 15% opacity
+    border: '#EF4444', // Red-500
+    gutterBackground: '#EF444440', // Red with 25% opacity
+  },
+
+  filter: {
+    background: '#1F293780', // Gray-800 with 50% opacity
+    border: '#3B82F6', // Blue-500
+    text: '#E5E7EB', // Gray-200
+    textDim: '#6B7280', // Gray-500
+    inputBackground: '#1F2937', // Gray-800
+    inputText: '#F9FAFB', // Gray-50
+    inputPlaceholder: '#6B7280', // Gray-500
+    cursor: '#3B82F6', // Blue-500
+    activeLevel: '#3B82F6', // Blue-500
+    inactiveLevel: '#4B5563', // Gray-600
+  },
+
+  help: {
+    background: '#1F2937', // Gray-800
+    border: '#3B82F6', // Blue-500
+    title: '#F9FAFB', // Gray-50
+    category: '#3B82F6', // Blue-500
+    key: '#F59E0B', // Amber-500
+    description: '#E5E7EB', // Gray-200
+    hint: '#6B7280', // Gray-500
+  },
+
+  colors: {
+    primary: '#3B82F6', // Blue-500
+    secondary: '#8B5CF6', // Violet-500
+    success: '#22C55E', // Green-500
+    warning: '#F59E0B', // Amber-500
+    error: '#EF4444', // Red-500
+    muted: '#6B7280', // Gray-500
+    background: '#111827', // Gray-900
+    foreground: '#F9FAFB', // Gray-50
+  },
+}