opencode-session 0.1.0

package/src/ui/app.ts

@@ -0,0 +1,245 @@
+import {
+  createCliRenderer,
+  BoxRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core"
+import { loadAllData } from "../data/loader"
+import { StateManager, StateEvent } from "./state"
+import { Action, findAction, getHintsForView } from "./keybindings"
+import { Header, TabBar, StatusBar, ConfirmDialog, ListContainer, LogViewer, DetailViewer } from "./components"
+import { createViews, getView, type ViewMap } from "./views"
+import { createController, type ViewController, type ControllerContext } from "./controllers"
+
+// ============================================================================
+// Main App Class
+// ============================================================================
+
+export class App {
+  private renderer!: CliRenderer
+  private state: StateManager
+  private views!: ViewMap
+
+  // UI Components
+  private mainContainer!: BoxRenderable
+  private header!: Header
+  private tabBar!: TabBar
+  private listContainer!: ListContainer
+  private statusBar!: StatusBar
+  private confirmDialog!: ConfirmDialog
+  private logViewer!: LogViewer
+  private detailViewer!: DetailViewer
+
+  // Controller Stack
+  private controllerStack: ViewController[] = []
+
+  constructor() {
+    this.state = new StateManager()
+  }
+
+  async init(): Promise<void> {
+    this.renderer = await createCliRenderer({
+      exitOnCtrlC: true,
+    })
+
+    // Initialize views
+    this.views = createViews(this.state)
+
+    // Create UI structure
+    this.createUI()
+
+    // Set up event listeners
+    this.setupEventListeners()
+
+    // Set up keyboard handlers
+    this.setupKeyboardHandlers()
+
+    // Load data
+    await this.loadData()
+
+    // Push initial controller onto stack
+    this.pushInitialController()
+  }
+
+  private createUI(): void {
+    // Main container
+    this.mainContainer = new BoxRenderable(this.renderer, {
+      id: "main-container",
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+    })
+
+    // Create components
+    this.header = new Header(this.renderer)
+    this.tabBar = new TabBar(this.renderer)
+    this.listContainer = new ListContainer(this.renderer)
+    this.statusBar = new StatusBar(this.renderer)
+    this.confirmDialog = new ConfirmDialog(this.renderer)
+    this.logViewer = new LogViewer(this.renderer)
+    this.detailViewer = new DetailViewer(this.renderer)
+
+    // Build hierarchy
+    this.mainContainer.add(this.header.getRenderable())
+    this.mainContainer.add(this.tabBar.getRenderable())
+    this.mainContainer.add(this.listContainer.getRenderable())
+    this.mainContainer.add(this.statusBar.getRenderable())
+    this.renderer.root.add(this.mainContainer)
+    this.renderer.root.add(this.confirmDialog.getRenderable())
+    this.renderer.root.add(this.logViewer.getRenderable())
+    this.renderer.root.add(this.detailViewer.getRenderable())
+
+    // Set initial state
+    this.header.setLoading()
+    this.listContainer.focus()
+  }
+
+  private setupEventListeners(): void {
+    // Reset cursor on view/data change
+    this.state.on(StateEvent.VIEW_CHANGED, () => {
+      // Replace base controller when view changes
+      this.controllerStack[0] = createController(this.state.view, this.views, this.state)
+      this.updateView(true)
+    })
+    this.state.on(StateEvent.DATA_LOADED, () => this.updateView(true))
+    // Preserve cursor on selection/expand change
+    this.state.on(StateEvent.SELECTION_CHANGED, () => this.updateView(false))
+    this.state.on(StateEvent.EXPAND_CHANGED, () => this.updateView(false))
+    this.state.on(StateEvent.STATUS_CHANGED, (msg: string) => {
+      this.statusBar.setMessage(msg)
+    })
+  }
+
+  private setupKeyboardHandlers(): void {
+    this.renderer.keyInput.on("keypress", (key: KeyEvent) => {
+      if (this.state.isLoading) return
+      this.handleKeys(key)
+    })
+  }
+
+  private handleKeys(key: KeyEvent): void {
+    // Use sequence for printable chars (preserves case like 'G'), otherwise use name for special keys
+    // Check if sequence is a printable character (not control chars like \r, \t, \x1b)
+    // Note: > 32 excludes space (charCode 32) so it uses key.name "space" instead
+    const isPrintable = key.sequence?.length === 1 && key.sequence.charCodeAt(0) > 32
+    const keyName = isPrintable ? key.sequence : (key.name ?? key.sequence)
+    const topController = this.getTopController()
+
+    // Find action using top controller's keybindings
+    const action = findAction(keyName, topController.getKeybindings())
+    if (!action) return
+
+    // Global actions only at root level (stack depth == 1)
+    if (this.controllerStack.length === 1) {
+      switch (action) {
+        case Action.QUIT:
+          this.quit()
+          return
+        case Action.NEXT_VIEW:
+          this.switchView()
+          return
+        case Action.RELOAD:
+          this.loadData()
+          return
+      }
+    }
+
+    // Delegate to top controller
+    topController.handleAction(action as Action, this.createContext())
+  }
+
+  // --------------------------------------------------------------------------
+  // Controller Stack Management
+  // --------------------------------------------------------------------------
+
+  private pushInitialController(): void {
+    const controller = createController(this.state.view, this.views, this.state)
+    this.controllerStack.push(controller)
+  }
+
+  private getTopController(): ViewController {
+    return this.controllerStack[this.controllerStack.length - 1]
+  }
+
+  private pushController(controller: ViewController): void {
+    this.controllerStack.push(controller)
+    controller.onEnter?.(this.createContext())
+  }
+
+  private popController(): void {
+    if (this.controllerStack.length > 1) {
+      const popped = this.controllerStack.pop()!
+      popped.onExit?.(this.createContext())
+      
+      // Re-enter the new top controller to restore its view
+      const newTop = this.getTopController()
+      newTop.onEnter?.(this.createContext())
+    }
+  }
+
+  private switchView(): void {
+    // Pop all subviews first (cancel any open dialogs)
+    while (this.controllerStack.length > 1) {
+      const popped = this.controllerStack.pop()!
+      popped.onExit?.(this.createContext())
+    }
+
+    // Switch to next view (this triggers VIEW_CHANGED event which updates stack[0])
+    this.state.nextView()
+  }
+
+  private createContext(): ControllerContext {
+    return {
+      state: this.state,
+      listContainer: this.listContainer,
+      confirmDialog: this.confirmDialog,
+      logViewer: this.logViewer,
+      detailViewer: this.detailViewer,
+      header: this.header,
+      statusBar: this.statusBar,
+      loadData: () => this.loadData(),
+      pushController: (c) => this.pushController(c),
+      popController: () => this.popController(),
+    }
+  }
+
+  // --------------------------------------------------------------------------
+  // Data & View Management
+  // --------------------------------------------------------------------------
+
+  private async loadData(): Promise<void> {
+    this.state.setLoading(true)
+    this.header.setLoading()
+
+    try {
+      const data = await loadAllData()
+      this.state.setData(data)
+    } catch (error) {
+      this.state.setStatus(`Error loading data: ${error}`)
+    }
+
+    this.state.setLoading(false)
+  }
+
+  private updateView(resetCursor: boolean = true): void {
+    const view = getView(this.views, this.state.view)
+    const options = view.getOptions(this.state.selectedIndices)
+
+    this.listContainer.setOptions(options)
+    if (resetCursor) {
+      this.listContainer.setSelectedIndex(0)
+    }
+    this.tabBar.setActiveTab(this.state.view)
+    this.header.setCounts(view.getItemCount(), this.state.selectedCount)
+    this.statusBar.setHints(getHintsForView(this.state.view))
+  }
+
+  private quit(): void {
+    this.renderer.destroy()
+    process.exit(0)
+  }
+
+  run(): void {
+    // The renderer handles the event loop
+  }
+}

package/src/ui/components/confirm-dialog.ts

@@ -0,0 +1,117 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import type { ConfirmField } from "../controllers/confirm-controller"
+
+// ============================================================================
+// Confirm Dialog Component
+// ============================================================================
+
+export class ConfirmDialog {
+  private box: BoxRenderable
+  private text: TextRenderable
+  private action: (() => Promise<void>) | null = null
+
+  constructor(renderer: CliRenderer) {
+    this.box = new BoxRenderable(renderer, {
+      id: "confirm-box",
+      width: 60,
+      height: 5,
+      position: "absolute",
+      left: 10,
+      top: 10,
+      borderStyle: "double",
+      borderColor: "#FF6600",
+      backgroundColor: "#1a1a1a",
+      visible: false,
+      padding: 1,
+      zIndex: 100,
+    })
+
+    this.text = new TextRenderable(renderer, {
+      id: "confirm-text",
+      content: "",
+      fg: "#FFFFFF",
+    })
+
+    this.box.add(this.text)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Show the confirmation dialog with a simple message
+   * @param message The confirmation message to display
+   * @param action The action to execute on confirmation
+   */
+  show(message: string, action: () => Promise<void>): void {
+    this.text.content = message
+    this.action = action
+    this.box.height = 5
+    this.box.visible = true
+  }
+
+  /**
+   * Show the confirmation dialog with detailed information
+   * @param title The dialog title
+   * @param fields Key-value fields to display
+   */
+  showDetails(title: string, fields: ConfirmField[]): void {
+    // Build content with title and fields
+    let content = `${title}\n\n`
+    
+    for (const field of fields) {
+      content += `${field.label.padEnd(12)} ${field.value}\n`
+    }
+    
+    content += `\nPress y to confirm, n/Esc to cancel`
+    
+    this.text.content = content
+    this.action = null  // Action is handled by controller now
+    this.box.height = 6 + fields.length + 2  // title + blank + fields + blank + hint
+    this.box.visible = true
+  }
+
+  /**
+   * Hide the confirmation dialog
+   */
+  hide(): void {
+    this.box.visible = false
+    this.text.content = ""
+    this.action = null
+  }
+
+  /**
+   * Check if the dialog is currently visible
+   */
+  isVisible(): boolean {
+    return this.box.visible
+  }
+
+  /**
+   * Execute the confirmed action and hide the dialog
+   * @deprecated Use ConfirmDialogController instead
+   */
+  async confirm(): Promise<void> {
+    const action = this.action
+    this.hide()
+    if (action) {
+      await action()
+    }
+  }
+
+  /**
+   * Cancel and hide the dialog without executing the action
+   * @deprecated Use ConfirmDialogController instead
+   */
+  cancel(): void {
+    this.hide()
+  }
+}

package/src/ui/components/detail-viewer.ts

@@ -0,0 +1,307 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+
+// ============================================================================
+// Detail Viewer Types
+// ============================================================================
+
+export interface DetailViewerItem {
+  name: string
+  description?: string
+  value: string  // For identifying item on Enter
+}
+
+export interface DetailViewerSection {
+  label: string  // e.g., "Todos:"
+  lines: string[]  // Non-selectable text lines
+}
+
+export interface DetailViewerData {
+  title: string
+  fields: { label: string; value: string }[]
+  sections?: DetailViewerSection[]  // Optional non-selectable sections before items
+  items: DetailViewerItem[]
+  itemsLabel?: string  // e.g., "Sessions:", "Messages:"
+}
+
+// ============================================================================
+// Detail Viewer Component
+// ============================================================================
+
+export class DetailViewer {
+  private box: BoxRenderable
+  private titleText: TextRenderable
+  private fieldsText: TextRenderable
+  private sectionsText: TextRenderable
+  private itemsLabelText: TextRenderable
+  private itemsText: TextRenderable
+  private hintsText: TextRenderable
+
+  private items: DetailViewerItem[] = []
+  private selectedIndex = 0
+  private scrollOffset = 0
+  private itemsViewportHeight = 0
+  private contentWidth = 0
+
+  constructor(private renderer: CliRenderer) {
+    // Full-screen overlay box
+    this.box = new BoxRenderable(renderer, {
+      id: "detail-viewer-box",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      borderStyle: "double",
+      borderColor: "#FF6600",
+      backgroundColor: "#1a1a1a",
+      visible: false,
+      padding: 1,
+      zIndex: 200,
+      flexDirection: "column",
+    })
+
+    // Title
+    this.titleText = new TextRenderable(renderer, {
+      id: "detail-viewer-title",
+      content: "",
+      fg: "#FF6600",
+    })
+
+    // Metadata fields
+    this.fieldsText = new TextRenderable(renderer, {
+      id: "detail-viewer-fields",
+      content: "",
+      fg: "#CCCCCC",
+    })
+
+    // Non-selectable sections (e.g., Todos)
+    this.sectionsText = new TextRenderable(renderer, {
+      id: "detail-viewer-sections",
+      content: "",
+      fg: "#AAAAAA",
+    })
+
+    // Items section label
+    this.itemsLabelText = new TextRenderable(renderer, {
+      id: "detail-viewer-items-label",
+      content: "",
+      fg: "#FF6600",
+    })
+
+    // Scrollable items area
+    this.itemsText = new TextRenderable(renderer, {
+      id: "detail-viewer-items",
+      content: "",
+      fg: "#FFFFFF",
+      flexGrow: 1,
+    })
+
+    // Hints at the bottom
+    this.hintsText = new TextRenderable(renderer, {
+      id: "detail-viewer-hints",
+      content: "",
+      fg: "#888888",
+    })
+
+    this.box.add(this.titleText)
+    this.box.add(this.fieldsText)
+    this.box.add(this.sectionsText)
+    this.box.add(this.itemsLabelText)
+    this.box.add(this.itemsText)
+    this.box.add(this.hintsText)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Show the detail viewer with data
+   */
+  show(data: DetailViewerData): void {
+    this.titleText.content = data.title
+
+    // Build fields content
+    const fieldsContent = data.fields
+      .map((f) => `${f.label.padEnd(14)} ${f.value}`)
+      .join("\n")
+    this.fieldsText.content = fieldsContent
+
+    // Build sections content (non-selectable)
+    let sectionsContent = ""
+    let sectionsHeight = 0
+    if (data.sections && data.sections.length > 0) {
+      const sectionParts: string[] = []
+      for (const section of data.sections) {
+        sectionParts.push(`\n${section.label}`)
+        sectionsHeight += 2  // label + blank line
+        for (const line of section.lines) {
+          sectionParts.push(`  ${line}`)
+          sectionsHeight += 1
+        }
+      }
+      sectionsContent = sectionParts.join("\n")
+    }
+    this.sectionsText.content = sectionsContent
+
+    // Items label
+    this.itemsLabelText.content = data.itemsLabel ? `\n${data.itemsLabel}` : ""
+
+    // Store items and reset selection
+    this.items = data.items
+    this.selectedIndex = 0
+    this.scrollOffset = 0
+
+    // Calculate dimensions
+    const terminalHeight = this.renderer.terminalHeight
+    const terminalWidth = this.renderer.terminalWidth
+    // Account for: border(2) + padding(2) + title(1) + fields + sections + itemsLabel(1) + hints(1) + margins
+    const fieldsHeight = data.fields.length + 1
+    const labelHeight = data.itemsLabel ? 2 : 0
+    this.itemsViewportHeight = Math.max(3, terminalHeight - 10 - fieldsHeight - sectionsHeight - labelHeight)
+    this.contentWidth = terminalWidth - 6  // border(2) + padding(2) + margin
+
+    this.updateContent()
+    this.box.visible = true
+  }
+
+  /**
+   * Hide the detail viewer
+   */
+  hide(): void {
+    this.box.visible = false
+    this.items = []
+    this.selectedIndex = 0
+    this.scrollOffset = 0
+  }
+
+  /**
+   * Check if the viewer is currently visible
+   */
+  isVisible(): boolean {
+    return this.box.visible
+  }
+
+  /**
+   * Get the currently selected index
+   */
+  getSelectedIndex(): number {
+    return this.selectedIndex
+  }
+
+  /**
+   * Get the value of the selected item
+   */
+  getSelectedValue(): string | undefined {
+    return this.items[this.selectedIndex]?.value
+  }
+
+  /**
+   * Move selection up
+   */
+  scrollUp(): void {
+    if (this.selectedIndex > 0) {
+      this.selectedIndex--
+      // Adjust scroll if selection goes above viewport
+      if (this.selectedIndex < this.scrollOffset) {
+        this.scrollOffset = this.selectedIndex
+      }
+      this.updateContent()
+    }
+  }
+
+  /**
+   * Move selection down
+   */
+  scrollDown(): void {
+    if (this.selectedIndex < this.items.length - 1) {
+      this.selectedIndex++
+      // Adjust scroll if selection goes below viewport
+      // Each item takes 2 lines (name + description)
+      const visibleItems = Math.floor(this.itemsViewportHeight / 2)
+      if (this.selectedIndex >= this.scrollOffset + visibleItems) {
+        this.scrollOffset = this.selectedIndex - visibleItems + 1
+      }
+      this.updateContent()
+    }
+  }
+
+  /**
+   * Jump to first item
+   */
+  scrollToTop(): void {
+    this.selectedIndex = 0
+    this.scrollOffset = 0
+    this.updateContent()
+  }
+
+  /**
+   * Jump to last item
+   */
+  scrollToBottom(): void {
+    this.selectedIndex = Math.max(0, this.items.length - 1)
+    const visibleItems = Math.floor(this.itemsViewportHeight / 2)
+    this.scrollOffset = Math.max(0, this.items.length - visibleItems)
+    this.updateContent()
+  }
+
+  // --------------------------------------------------------------------------
+  // Private Methods
+  // --------------------------------------------------------------------------
+
+  /**
+   * Update the visible content
+   */
+  private updateContent(): void {
+    if (this.items.length === 0) {
+      this.itemsText.content = "  (no items)"
+      this.hintsText.content = "Esc/q:back"
+      return
+    }
+
+    // Calculate visible items (each item is 2 lines)
+    const visibleItems = Math.floor(this.itemsViewportHeight / 2)
+    const endIndex = Math.min(this.scrollOffset + visibleItems, this.items.length)
+
+    const lines: string[] = []
+    for (let i = this.scrollOffset; i < endIndex; i++) {
+      const item = this.items[i]
+      const isSelected = i === this.selectedIndex
+      const prefix = isSelected ? "> " : "  "
+      
+      // Truncate name if too long
+      const maxNameLen = this.contentWidth - 4
+      const name = item.name.length > maxNameLen 
+        ? item.name.slice(0, maxNameLen - 3) + "..."
+        : item.name
+      
+      lines.push(`${prefix}${name}`)
+      
+      // Description line (indented)
+      if (item.description) {
+        const maxDescLen = this.contentWidth - 6
+        const desc = item.description.length > maxDescLen
+          ? item.description.slice(0, maxDescLen - 3) + "..."
+          : item.description
+        lines.push(`    ${desc}`)
+      } else {
+        lines.push("")
+      }
+    }
+
+    this.itemsText.content = lines.join("\n")
+
+    // Update hints with position
+    const totalItems = this.items.length
+    const current = this.selectedIndex + 1
+    const scrollInfo = totalItems > visibleItems ? `  [${current}/${totalItems}]` : ""
+    this.hintsText.content = `j/k:nav  Enter:view  g/G:top/bottom  Esc/q:back${scrollInfo}`
+  }
+}