lonny-agent 0.1.2 → 0.1.8

package/src/pi-tui/components/select-list.ts

@@ -0,0 +1,263 @@
+import { getKeybindings } from '../keybindings.js'
+import type { Component } from '../tui.js'
+import { truncateToWidth, visibleWidth } from '../utils.js'
+
+const DEFAULT_PRIMARY_COLUMN_WIDTH = 32
+const PRIMARY_COLUMN_GAP = 2
+const MIN_DESCRIPTION_WIDTH = 10
+
+const normalizeToSingleLine = (text: string): string => text.replace(/[\r\n]+/g, ' ').trim()
+const clamp = (value: number, min: number, max: number): number =>
+  Math.max(min, Math.min(value, max))
+
+export interface SelectItem {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface SelectListTheme {
+  selectedPrefix: (text: string) => string
+  selectedText: (text: string) => string
+  description: (text: string) => string
+  scrollInfo: (text: string) => string
+  noMatch: (text: string) => string
+}
+
+export interface SelectListTruncatePrimaryContext {
+  text: string
+  maxWidth: number
+  columnWidth: number
+  item: SelectItem
+  isSelected: boolean
+}
+
+export interface SelectListLayoutOptions {
+  minPrimaryColumnWidth?: number
+  maxPrimaryColumnWidth?: number
+  truncatePrimary?: (context: SelectListTruncatePrimaryContext) => string
+}
+
+export class SelectList implements Component {
+  private items: SelectItem[] = []
+  private filteredItems: SelectItem[] = []
+  private selectedIndex: number = 0
+  private maxVisible: number = 5
+  private theme: SelectListTheme
+  private layout: SelectListLayoutOptions
+
+  public onSelect?: (item: SelectItem) => void
+  public onCancel?: () => void
+  public onSelectionChange?: (item: SelectItem) => void
+
+  constructor(
+    items: SelectItem[],
+    maxVisible: number,
+    theme: SelectListTheme,
+    layout: SelectListLayoutOptions = {},
+  ) {
+    this.items = items
+    this.filteredItems = items
+    this.maxVisible = maxVisible
+    this.theme = theme
+    this.layout = layout
+  }
+
+  setFilter(filter: string): void {
+    this.filteredItems = this.items.filter(item =>
+      item.value.toLowerCase().startsWith(filter.toLowerCase()),
+    )
+    // Reset selection when filter changes
+    this.selectedIndex = 0
+  }
+
+  setSelectedIndex(index: number): void {
+    this.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1))
+  }
+
+  invalidate(): void {
+    // No cached state to invalidate currently
+  }
+
+  render(width: number): string[] {
+    const lines: string[] = []
+
+    // If no items match filter, show message
+    if (this.filteredItems.length === 0) {
+      lines.push(this.theme.noMatch('  No matching commands'))
+      return lines
+    }
+
+    const primaryColumnWidth = this.getPrimaryColumnWidth()
+
+    // Calculate visible range with scrolling
+    const startIndex = Math.max(
+      0,
+      Math.min(
+        this.selectedIndex - Math.floor(this.maxVisible / 2),
+        this.filteredItems.length - this.maxVisible,
+      ),
+    )
+    const endIndex = Math.min(startIndex + this.maxVisible, this.filteredItems.length)
+
+    // Render visible items
+    for (let i = startIndex; i < endIndex; i++) {
+      const item = this.filteredItems[i]
+      if (!item) continue
+
+      const isSelected = i === this.selectedIndex
+      const descriptionSingleLine = item.description
+        ? normalizeToSingleLine(item.description)
+        : undefined
+      lines.push(
+        this.renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth),
+      )
+    }
+
+    // Add scroll indicators if needed
+    if (startIndex > 0 || endIndex < this.filteredItems.length) {
+      const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`
+      // Truncate if too long for terminal
+      lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, '')))
+    }
+
+    return lines
+  }
+
+  handleInput(keyData: string): void {
+    const kb = getKeybindings()
+    // Up arrow - wrap to bottom when at top
+    if (kb.matches(keyData, 'tui.select.up')) {
+      this.selectedIndex =
+        this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1
+      this.notifySelectionChange()
+    }
+    // Down arrow - wrap to top when at bottom
+    else if (kb.matches(keyData, 'tui.select.down')) {
+      this.selectedIndex =
+        this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1
+      this.notifySelectionChange()
+    }
+    // Enter
+    else if (kb.matches(keyData, 'tui.select.confirm')) {
+      const selectedItem = this.filteredItems[this.selectedIndex]
+      if (selectedItem && this.onSelect) {
+        this.onSelect(selectedItem)
+      }
+    }
+    // Escape or Ctrl+C
+    else if (kb.matches(keyData, 'tui.select.cancel')) {
+      if (this.onCancel) {
+        this.onCancel()
+      }
+    }
+  }
+
+  private renderItem(
+    item: SelectItem,
+    isSelected: boolean,
+    width: number,
+    descriptionSingleLine: string | undefined,
+    primaryColumnWidth: number,
+  ): string {
+    const prefix = isSelected ? '→ ' : '  '
+    const prefixWidth = visibleWidth(prefix)
+
+    if (descriptionSingleLine && width > 40) {
+      const effectivePrimaryColumnWidth = Math.max(
+        1,
+        Math.min(primaryColumnWidth, width - prefixWidth - 4),
+      )
+      const maxPrimaryWidth = Math.max(1, effectivePrimaryColumnWidth - PRIMARY_COLUMN_GAP)
+      const truncatedValue = this.truncatePrimary(
+        item,
+        isSelected,
+        maxPrimaryWidth,
+        effectivePrimaryColumnWidth,
+      )
+      const truncatedValueWidth = visibleWidth(truncatedValue)
+      const spacing = ' '.repeat(Math.max(1, effectivePrimaryColumnWidth - truncatedValueWidth))
+      const descriptionStart = prefixWidth + truncatedValueWidth + spacing.length
+      const remainingWidth = width - descriptionStart - 2 // -2 for safety
+
+      if (remainingWidth > MIN_DESCRIPTION_WIDTH) {
+        const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, '')
+        if (isSelected) {
+          return this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`)
+        }
+
+        const descText = this.theme.description(spacing + truncatedDesc)
+        return prefix + truncatedValue + descText
+      }
+    }
+
+    const maxWidth = width - prefixWidth - 2
+    const truncatedValue = this.truncatePrimary(item, isSelected, maxWidth, maxWidth)
+    if (isSelected) {
+      return this.theme.selectedText(`${prefix}${truncatedValue}`)
+    }
+
+    return prefix + truncatedValue
+  }
+
+  private getPrimaryColumnWidth(): number {
+    const { min, max } = this.getPrimaryColumnBounds()
+    const widestPrimary = this.filteredItems.reduce((widest, item) => {
+      return Math.max(widest, visibleWidth(this.getDisplayValue(item)) + PRIMARY_COLUMN_GAP)
+    }, 0)
+
+    return clamp(widestPrimary, min, max)
+  }
+
+  private getPrimaryColumnBounds(): { min: number; max: number } {
+    const rawMin =
+      this.layout.minPrimaryColumnWidth ??
+      this.layout.maxPrimaryColumnWidth ??
+      DEFAULT_PRIMARY_COLUMN_WIDTH
+    const rawMax =
+      this.layout.maxPrimaryColumnWidth ??
+      this.layout.minPrimaryColumnWidth ??
+      DEFAULT_PRIMARY_COLUMN_WIDTH
+
+    return {
+      min: Math.max(1, Math.min(rawMin, rawMax)),
+      max: Math.max(1, Math.max(rawMin, rawMax)),
+    }
+  }
+
+  private truncatePrimary(
+    item: SelectItem,
+    isSelected: boolean,
+    maxWidth: number,
+    columnWidth: number,
+  ): string {
+    const displayValue = this.getDisplayValue(item)
+    const truncatedValue = this.layout.truncatePrimary
+      ? this.layout.truncatePrimary({
+          text: displayValue,
+          maxWidth,
+          columnWidth,
+          item,
+          isSelected,
+        })
+      : truncateToWidth(displayValue, maxWidth, '')
+
+    return truncateToWidth(truncatedValue, maxWidth, '')
+  }
+
+  private getDisplayValue(item: SelectItem): string {
+    return item.label || item.value
+  }
+
+  private notifySelectionChange(): void {
+    const selectedItem = this.filteredItems[this.selectedIndex]
+    if (selectedItem && this.onSelectionChange) {
+      this.onSelectionChange(selectedItem)
+    }
+  }
+
+  getSelectedItem(): SelectItem | null {
+    const item = this.filteredItems[this.selectedIndex]
+    return item || null
+  }
+}

package/src/pi-tui/components/settings-list.ts

@@ -0,0 +1,264 @@
+import { fuzzyFilter } from '../fuzzy.js'
+import { getKeybindings } from '../keybindings.js'
+import type { Component } from '../tui.js'
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from '../utils.js'
+import { Input } from './input.js'
+
+export interface SettingItem {
+  /** Unique identifier for this setting */
+  id: string
+  /** Display label (left side) */
+  label: string
+  /** Optional description shown when selected */
+  description?: string
+  /** Current value to display (right side) */
+  currentValue: string
+  /** If provided, Enter/Space cycles through these values */
+  values?: string[]
+  /** If provided, Enter opens this submenu. Receives current value and done callback. */
+  submenu?: (currentValue: string, done: (selectedValue?: string) => void) => Component
+}
+
+export interface SettingsListTheme {
+  label: (text: string, selected: boolean) => string
+  value: (text: string, selected: boolean) => string
+  description: (text: string) => string
+  cursor: string
+  hint: (text: string) => string
+}
+
+export interface SettingsListOptions {
+  enableSearch?: boolean
+}
+
+export class SettingsList implements Component {
+  private items: SettingItem[]
+  private filteredItems: SettingItem[]
+  private theme: SettingsListTheme
+  private selectedIndex = 0
+  private maxVisible: number
+  private onChange: (id: string, newValue: string) => void
+  private onCancel: () => void
+  private searchInput?: Input
+  private searchEnabled: boolean
+
+  // Submenu state
+  private submenuComponent: Component | null = null
+  private submenuItemIndex: number | null = null
+
+  constructor(
+    items: SettingItem[],
+    maxVisible: number,
+    theme: SettingsListTheme,
+    onChange: (id: string, newValue: string) => void,
+    onCancel: () => void,
+    options: SettingsListOptions = {},
+  ) {
+    this.items = items
+    this.filteredItems = items
+    this.maxVisible = maxVisible
+    this.theme = theme
+    this.onChange = onChange
+    this.onCancel = onCancel
+    this.searchEnabled = options.enableSearch ?? false
+    if (this.searchEnabled) {
+      this.searchInput = new Input()
+    }
+  }
+
+  /** Update an item's currentValue */
+  updateValue(id: string, newValue: string): void {
+    const item = this.items.find(i => i.id === id)
+    if (item) {
+      item.currentValue = newValue
+    }
+  }
+
+  invalidate(): void {
+    this.submenuComponent?.invalidate?.()
+  }
+
+  render(width: number): string[] {
+    // If submenu is active, render it instead
+    if (this.submenuComponent) {
+      return this.submenuComponent.render(width)
+    }
+
+    return this.renderMainList(width)
+  }
+
+  private renderMainList(width: number): string[] {
+    const lines: string[] = []
+
+    if (this.searchEnabled && this.searchInput) {
+      lines.push(...this.searchInput.render(width))
+      lines.push('')
+    }
+
+    if (this.items.length === 0) {
+      lines.push(this.theme.hint('  No settings available'))
+      if (this.searchEnabled) {
+        this.addHintLine(lines, width)
+      }
+      return lines
+    }
+
+    const displayItems = this.searchEnabled ? this.filteredItems : this.items
+    if (displayItems.length === 0) {
+      lines.push(truncateToWidth(this.theme.hint('  No matching settings'), width))
+      this.addHintLine(lines, width)
+      return lines
+    }
+
+    // Calculate visible range with scrolling
+    const startIndex = Math.max(
+      0,
+      Math.min(
+        this.selectedIndex - Math.floor(this.maxVisible / 2),
+        displayItems.length - this.maxVisible,
+      ),
+    )
+    const endIndex = Math.min(startIndex + this.maxVisible, displayItems.length)
+
+    // Calculate max label width for alignment
+    const maxLabelWidth = Math.min(
+      30,
+      Math.max(...this.items.map(item => visibleWidth(item.label))),
+    )
+
+    // Render visible items
+    for (let i = startIndex; i < endIndex; i++) {
+      const item = displayItems[i]
+      if (!item) continue
+
+      const isSelected = i === this.selectedIndex
+      const prefix = isSelected ? this.theme.cursor : '  '
+      const prefixWidth = visibleWidth(prefix)
+
+      // Pad label to align values
+      const labelPadded =
+        item.label + ' '.repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)))
+      const labelText = this.theme.label(labelPadded, isSelected)
+
+      // Calculate space for value
+      const separator = '  '
+      const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator)
+      const valueMaxWidth = width - usedWidth - 2
+
+      const valueText = this.theme.value(
+        truncateToWidth(item.currentValue, valueMaxWidth, ''),
+        isSelected,
+      )
+
+      lines.push(truncateToWidth(prefix + labelText + separator + valueText, width))
+    }
+
+    // Add scroll indicator if needed
+    if (startIndex > 0 || endIndex < displayItems.length) {
+      const scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`
+      lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, '')))
+    }
+
+    // Add description for selected item
+    const selectedItem = displayItems[this.selectedIndex]
+    if (selectedItem?.description) {
+      lines.push('')
+      const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4)
+      for (const line of wrappedDesc) {
+        lines.push(this.theme.description(`  ${line}`))
+      }
+    }
+
+    // Add hint
+    this.addHintLine(lines, width)
+
+    return lines
+  }
+
+  handleInput(data: string): void {
+    // If submenu is active, delegate all input to it
+    // The submenu's onCancel (triggered by escape) will call done() which closes it
+    if (this.submenuComponent) {
+      this.submenuComponent.handleInput?.(data)
+      return
+    }
+
+    // Main list input handling
+    const kb = getKeybindings()
+    const displayItems = this.searchEnabled ? this.filteredItems : this.items
+    if (kb.matches(data, 'tui.select.up')) {
+      if (displayItems.length === 0) return
+      this.selectedIndex =
+        this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1
+    } else if (kb.matches(data, 'tui.select.down')) {
+      if (displayItems.length === 0) return
+      this.selectedIndex =
+        this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1
+    } else if (kb.matches(data, 'tui.select.confirm') || data === ' ') {
+      this.activateItem()
+    } else if (kb.matches(data, 'tui.select.cancel')) {
+      this.onCancel()
+    } else if (this.searchEnabled && this.searchInput) {
+      const sanitized = data.replace(/ /g, '')
+      if (!sanitized) {
+        return
+      }
+      this.searchInput.handleInput(sanitized)
+      this.applyFilter(this.searchInput.getValue())
+    }
+  }
+
+  private activateItem(): void {
+    const item = this.searchEnabled
+      ? this.filteredItems[this.selectedIndex]
+      : this.items[this.selectedIndex]
+    if (!item) return
+
+    if (item.submenu) {
+      // Open submenu, passing current value so it can pre-select correctly
+      this.submenuItemIndex = this.selectedIndex
+      this.submenuComponent = item.submenu(item.currentValue, (selectedValue?: string) => {
+        if (selectedValue !== undefined) {
+          item.currentValue = selectedValue
+          this.onChange(item.id, selectedValue)
+        }
+        this.closeSubmenu()
+      })
+    } else if (item.values && item.values.length > 0) {
+      // Cycle through values
+      const currentIndex = item.values.indexOf(item.currentValue)
+      const nextIndex = (currentIndex + 1) % item.values.length
+      const newValue = item.values[nextIndex]
+      item.currentValue = newValue
+      this.onChange(item.id, newValue)
+    }
+  }
+
+  private closeSubmenu(): void {
+    this.submenuComponent = null
+    // Restore selection to the item that opened the submenu
+    if (this.submenuItemIndex !== null) {
+      this.selectedIndex = this.submenuItemIndex
+      this.submenuItemIndex = null
+    }
+  }
+
+  private applyFilter(query: string): void {
+    this.filteredItems = fuzzyFilter(this.items, query, item => item.label)
+    this.selectedIndex = 0
+  }
+
+  private addHintLine(lines: string[], width: number): void {
+    lines.push('')
+    lines.push(
+      truncateToWidth(
+        this.theme.hint(
+          this.searchEnabled
+            ? '  Type to search · Enter/Space to change · Esc to cancel'
+            : '  Enter/Space to change · Esc to cancel',
+        ),
+        width,
+      ),
+    )
+  }
+}

package/src/pi-tui/components/spacer.ts

@@ -0,0 +1,28 @@
+import type { Component } from '../tui.js'
+
+/**
+ * Spacer component that renders empty lines
+ */
+export class Spacer implements Component {
+  private lines: number
+
+  constructor(lines: number = 1) {
+    this.lines = lines
+  }
+
+  setLines(lines: number): void {
+    this.lines = lines
+  }
+
+  invalidate(): void {
+    // No cached state to invalidate currently
+  }
+
+  render(_width: number): string[] {
+    const result: string[] = []
+    for (let i = 0; i < this.lines; i++) {
+      result.push('')
+    }
+    return result
+  }
+}

package/src/pi-tui/components/text.ts

@@ -0,0 +1,113 @@
+import type { Component } from '../tui.js'
+import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from '../utils.js'
+
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export class Text implements Component {
+  private text: string
+  private paddingX: number // Left/right padding
+  private paddingY: number // Top/bottom padding
+  private customBgFn?: (text: string) => string
+
+  // Cache for rendered output
+  private cachedText?: string
+  private cachedWidth?: number
+  private cachedLines?: string[]
+
+  constructor(
+    text: string = '',
+    paddingX: number = 1,
+    paddingY: number = 1,
+    customBgFn?: (text: string) => string,
+  ) {
+    this.text = text
+    this.paddingX = paddingX
+    this.paddingY = paddingY
+    this.customBgFn = customBgFn
+  }
+
+  setText(text: string): void {
+    this.text = text
+    this.cachedText = undefined
+    this.cachedWidth = undefined
+    this.cachedLines = undefined
+  }
+
+  setCustomBgFn(customBgFn?: (text: string) => string): void {
+    this.customBgFn = customBgFn
+    this.cachedText = undefined
+    this.cachedWidth = undefined
+    this.cachedLines = undefined
+  }
+
+  invalidate(): void {
+    this.cachedText = undefined
+    this.cachedWidth = undefined
+    this.cachedLines = undefined
+  }
+
+  render(width: number): string[] {
+    // Check cache
+    if (this.cachedLines && this.cachedText === this.text && this.cachedWidth === width) {
+      return this.cachedLines
+    }
+
+    // Don't render anything if there's no actual text
+    if (!this.text || this.text.trim() === '') {
+      const result: string[] = []
+      this.cachedText = this.text
+      this.cachedWidth = width
+      this.cachedLines = result
+      return result
+    }
+
+    // Replace tabs with 3 spaces
+    const normalizedText = this.text.replace(/\t/g, '   ')
+
+    // Calculate content width (subtract left/right margins)
+    const contentWidth = Math.max(1, width - this.paddingX * 2)
+
+    // Wrap text (this preserves ANSI codes but does NOT pad)
+    const wrappedLines = wrapTextWithAnsi(normalizedText, contentWidth)
+
+    // Add margins and background to each line
+    const leftMargin = ' '.repeat(this.paddingX)
+    const rightMargin = ' '.repeat(this.paddingX)
+    const contentLines: string[] = []
+
+    for (const line of wrappedLines) {
+      // Add margins
+      const lineWithMargins = leftMargin + line + rightMargin
+
+      // Apply background if specified (this also pads to full width)
+      if (this.customBgFn) {
+        contentLines.push(applyBackgroundToLine(lineWithMargins, width, this.customBgFn))
+      } else {
+        // No background - just pad to width with spaces
+        const visibleLen = visibleWidth(lineWithMargins)
+        const paddingNeeded = Math.max(0, width - visibleLen)
+        contentLines.push(lineWithMargins + ' '.repeat(paddingNeeded))
+      }
+    }
+
+    // Add top/bottom padding (empty lines)
+    const emptyLine = ' '.repeat(width)
+    const emptyLines: string[] = []
+    for (let i = 0; i < this.paddingY; i++) {
+      const line = this.customBgFn
+        ? applyBackgroundToLine(emptyLine, width, this.customBgFn)
+        : emptyLine
+      emptyLines.push(line)
+    }
+
+    const result = [...emptyLines, ...contentLines, ...emptyLines]
+
+    // Update cache
+    this.cachedText = this.text
+    this.cachedWidth = width
+    this.cachedLines = result
+
+    return result.length > 0 ? result : ['']
+  }
+}