opencode-session 0.1.0

package/src/ui/components/header.ts

@@ -0,0 +1,62 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import { APP_NAME, APP_VERSION } from "../../config"
+
+// ============================================================================
+// Header Component
+// ============================================================================
+
+export class Header {
+  private box: BoxRenderable
+  private text: TextRenderable
+
+  constructor(renderer: CliRenderer) {
+    this.box = new BoxRenderable(renderer, {
+      id: "header-box",
+      width: "100%",
+      height: 3,
+      borderStyle: "single",
+      borderColor: "#666666",
+      padding: 1,
+    })
+
+    this.text = new TextRenderable(renderer, {
+      id: "header-text",
+      content: `${APP_NAME} v${APP_VERSION}`,
+      fg: "#FFFFFF",
+    })
+
+    this.box.add(this.text)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Set counts (total items and selected)
+   */
+  setCounts(totalCount: number, selectedCount: number): void {
+    let text = `${APP_NAME} v${APP_VERSION}`
+    if (totalCount > 0) {
+      text += `  |  ${totalCount} items`
+      if (selectedCount > 0) {
+        text += `, ${selectedCount} selected`
+      }
+    }
+    this.text.content = text
+  }
+
+  /**
+   * Set loading state with message
+   */
+  setLoading(message: string = "Loading..."): void {
+    this.text.content = `${APP_NAME} v${APP_VERSION} - ${message}`
+  }
+}

package/src/ui/components/index.ts

@@ -0,0 +1,8 @@
+export { Header } from "./header"
+export { TabBar } from "./tabbar"
+export { StatusBar } from "./status-bar"
+export { ConfirmDialog } from "./confirm-dialog"
+export { ListContainer } from "./list-container"
+export { LogViewer } from "./log-viewer"
+export { DetailViewer } from "./detail-viewer"
+export type { DetailViewerItem, DetailViewerData } from "./detail-viewer"

package/src/ui/components/list-container.ts

@@ -0,0 +1,97 @@
+import {
+  BoxRenderable,
+  SelectRenderable,
+  TextRenderable,
+  type CliRenderer,
+  type SelectOption,
+} from "@opentui/core"
+
+// ============================================================================
+// List Container Component
+// ============================================================================
+
+export class ListContainer {
+  private box: BoxRenderable
+  private select: SelectRenderable
+  private emptyText: TextRenderable
+
+  constructor(renderer: CliRenderer) {
+    this.box = new BoxRenderable(renderer, {
+      id: "list-box",
+      width: "100%",
+      flexGrow: 1,
+      borderStyle: "single",
+      borderColor: "#444444",
+      overflow: "hidden",
+    })
+
+    this.select = new SelectRenderable(renderer, {
+      id: "select-list",
+      width: "100%",
+      height: "100%",
+      options: [],
+      showDescription: true,
+      wrapSelection: true,
+    })
+
+    this.emptyText = new TextRenderable(renderer, {
+      id: "empty-text",
+      content: "  No items",
+      fg: "#666666",
+    })
+    this.emptyText.visible = false
+
+    this.box.add(this.select)
+    this.box.add(this.emptyText)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Set the options to display in the list
+   */
+  setOptions(options: SelectOption[]): void {
+    if (options.length === 0) {
+      this.select.visible = false
+      this.emptyText.visible = true
+    } else {
+      this.select.visible = true
+      this.emptyText.visible = false
+      this.select.options = options
+      this.select.focus()  // Re-focus after making visible
+    }
+  }
+
+  /**
+   * Get the currently selected index
+   */
+  getSelectedIndex(): number {
+    return this.select.getSelectedIndex()
+  }
+
+  /**
+   * Set the selected index
+   */
+  setSelectedIndex(index: number): void {
+    this.select.selectedIndex = index
+  }
+
+  /**
+   * Focus the list for keyboard input
+   */
+  focus(): void {
+    this.select.focus()
+  }
+
+  /**
+   * Get the number of options
+   */
+  getOptionCount(): number {
+    return this.select.options.length
+  }
+}

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

@@ -0,0 +1,217 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+
+// ============================================================================
+// Log Viewer Component
+// ============================================================================
+
+export class LogViewer {
+  private box: BoxRenderable
+  private titleText: TextRenderable
+  private contentText: TextRenderable
+  private hintsText: TextRenderable
+  
+  private lines: string[] = []
+  private scrollOffset = 0
+  private viewportHeight = 0
+  private contentWidth = 0
+
+  constructor(private renderer: CliRenderer) {
+    // Full-screen overlay box
+    this.box = new BoxRenderable(renderer, {
+      id: "log-viewer-box",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      borderStyle: "double",
+      borderColor: "#FF6600",
+      backgroundColor: "#1a1a1a",
+      visible: false,
+      padding: 1,
+      zIndex: 300,
+      flexDirection: "column",
+    })
+
+    // Title bar
+    this.titleText = new TextRenderable(renderer, {
+      id: "log-viewer-title",
+      content: "",
+      fg: "#FF6600",
+    })
+
+    // Scrollable content area
+    this.contentText = new TextRenderable(renderer, {
+      id: "log-viewer-content",
+      content: "",
+      fg: "#FFFFFF",
+      flexGrow: 1,
+    })
+
+    // Hints at the bottom
+    this.hintsText = new TextRenderable(renderer, {
+      id: "log-viewer-hints",
+      content: "j/k:scroll  g/G:top/bottom  Esc/q:back",
+      fg: "#888888",
+    })
+
+    this.box.add(this.titleText)
+    this.box.add(this.contentText)
+    this.box.add(this.hintsText)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Show the log viewer with the given content
+   */
+  show(filename: string, content: string): void {
+    this.titleText.content = `Log: ${filename}`
+    
+    // Calculate viewport dimensions (accounting for border, padding, title, hints)
+    // Box has padding=1 (top+bottom), border=1 (top+bottom), title=1, hints=1
+    const terminalHeight = this.renderer.terminalHeight
+    const terminalWidth = this.renderer.terminalWidth
+    this.viewportHeight = terminalHeight - 8  // border(2) + padding(2) + title(1) + hints(1) + some margin
+    this.contentWidth = terminalWidth - 6      // border(2) + padding(2) + line number gutter(~6)
+    
+    // Split and wrap lines
+    this.lines = this.wrapContent(content)
+    this.scrollOffset = 0
+    
+    this.updateContent()
+    this.box.visible = true
+  }
+
+  /**
+   * Hide the log viewer
+   */
+  hide(): void {
+    this.box.visible = false
+    this.lines = []
+    this.scrollOffset = 0
+  }
+
+  /**
+   * Check if the viewer is currently visible
+   */
+  isVisible(): boolean {
+    return this.box.visible
+  }
+
+  /**
+   * Scroll up by one line
+   */
+  scrollUp(): void {
+    if (this.scrollOffset > 0) {
+      this.scrollOffset--
+      this.updateContent()
+    }
+  }
+
+  /**
+   * Scroll down by one line
+   */
+  scrollDown(): void {
+    const maxOffset = Math.max(0, this.lines.length - this.viewportHeight)
+    if (this.scrollOffset < maxOffset) {
+      this.scrollOffset++
+      this.updateContent()
+    }
+  }
+
+  /**
+   * Scroll to the top
+   */
+  scrollToTop(): void {
+    this.scrollOffset = 0
+    this.updateContent()
+  }
+
+  /**
+   * Scroll to the bottom
+   */
+  scrollToBottom(): void {
+    this.scrollOffset = Math.max(0, this.lines.length - this.viewportHeight)
+    this.updateContent()
+  }
+
+  // --------------------------------------------------------------------------
+  // Private Methods
+  // --------------------------------------------------------------------------
+
+  /**
+   * Wrap long lines and add line numbers
+   */
+  private wrapContent(content: string): string[] {
+    const rawLines = content.split("\n")
+    const wrappedLines: string[] = []
+    
+    // Calculate the gutter width based on total line count
+    const gutterWidth = Math.max(4, String(rawLines.length).length + 1)
+    const maxLineWidth = Math.max(20, this.contentWidth - gutterWidth - 2)  // -2 for " | " separator
+    
+    for (let i = 0; i < rawLines.length; i++) {
+      const lineNum = i + 1
+      const rawLine = rawLines[i]
+      
+      if (rawLine.length <= maxLineWidth) {
+        // Line fits, add with line number
+        const lineNumStr = String(lineNum).padStart(gutterWidth)
+        wrappedLines.push(`${lineNumStr} | ${rawLine}`)
+      } else {
+        // Line needs wrapping
+        let remaining = rawLine
+        let isFirstSegment = true
+        
+        while (remaining.length > 0) {
+          const segment = remaining.slice(0, maxLineWidth)
+          remaining = remaining.slice(maxLineWidth)
+          
+          if (isFirstSegment) {
+            const lineNumStr = String(lineNum).padStart(gutterWidth)
+            wrappedLines.push(`${lineNumStr} | ${segment}`)
+            isFirstSegment = false
+          } else {
+            // Continuation lines show empty gutter
+            const emptyGutter = " ".repeat(gutterWidth)
+            wrappedLines.push(`${emptyGutter} | ${segment}`)
+          }
+        }
+      }
+    }
+    
+    return wrappedLines
+  }
+
+  /**
+   * Update the visible content based on scroll offset
+   */
+  private updateContent(): void {
+    const visibleLines = this.lines.slice(
+      this.scrollOffset,
+      this.scrollOffset + this.viewportHeight
+    )
+    
+    this.contentText.content = visibleLines.join("\n")
+    
+    // Update hints with scroll position
+    const totalLines = this.lines.length
+    const currentLine = this.scrollOffset + 1
+    const endLine = Math.min(this.scrollOffset + this.viewportHeight, totalLines)
+    const scrollInfo = totalLines > this.viewportHeight 
+      ? `  [${currentLine}-${endLine}/${totalLines}]`
+      : ""
+    
+    this.hintsText.content = `j/k:scroll  g/G:top/bottom  Esc/q:back${scrollInfo}`
+  }
+}

package/src/ui/components/status-bar.ts

@@ -0,0 +1,99 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+
+// ============================================================================
+// Status Bar Component
+// ============================================================================
+
+export class StatusBar {
+  private box: BoxRenderable
+  private text: TextRenderable
+  private statusTimeout: ReturnType<typeof setTimeout> | null = null
+  private currentHints: string = ""
+  private currentMessage: string = ""
+
+  constructor(renderer: CliRenderer) {
+    this.box = new BoxRenderable(renderer, {
+      id: "status-box",
+      width: "100%",
+      height: 3,
+      borderStyle: "single",
+      borderColor: "#666666",
+      padding: 1,
+    })
+
+    this.text = new TextRenderable(renderer, {
+      id: "status-text",
+      content: "",
+      fg: "#888888",
+    })
+
+    this.box.add(this.text)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Set the keybinding hints for the current view
+   */
+  setHints(hints: string): void {
+    this.currentHints = hints
+    this.updateDisplay()
+  }
+
+  /**
+   * Set a temporary status message
+   * @param message The message to display
+   * @param duration Duration in ms before clearing (default: 3000)
+   */
+  setMessage(message: string, duration: number = 3000): void {
+    // Clear any existing timeout
+    if (this.statusTimeout) {
+      clearTimeout(this.statusTimeout)
+      this.statusTimeout = null
+    }
+
+    this.currentMessage = message
+    this.updateDisplay()
+
+    // Auto-clear message after duration
+    if (duration > 0) {
+      this.statusTimeout = setTimeout(() => {
+        this.currentMessage = ""
+        this.updateDisplay()
+        this.statusTimeout = null
+      }, duration)
+    }
+  }
+
+  /**
+   * Clear the status message
+   */
+  clearMessage(): void {
+    if (this.statusTimeout) {
+      clearTimeout(this.statusTimeout)
+      this.statusTimeout = null
+    }
+    this.currentMessage = ""
+    this.updateDisplay()
+  }
+
+  /**
+   * Update the display text
+   */
+  private updateDisplay(): void {
+    if (this.currentMessage) {
+      this.text.content = `${this.currentMessage} | ${this.currentHints}`
+    } else {
+      this.text.content = this.currentHints
+    }
+  }
+}

package/src/ui/components/tabbar.ts

@@ -0,0 +1,79 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import type { ViewType } from "../../types"
+
+// ============================================================================
+// Tab Configuration
+// ============================================================================
+
+interface TabConfig {
+  id: ViewType
+  label: string
+}
+
+const TABS: TabConfig[] = [
+  { id: "main", label: "Projects" },
+  { id: "orphans", label: "Orphans" },
+  { id: "logs", label: "Logs" },
+]
+
+// ============================================================================
+// TabBar Component
+// ============================================================================
+
+export class TabBar {
+  private box: BoxRenderable
+  private text: TextRenderable
+  private activeView: ViewType = "main"
+
+  constructor(renderer: CliRenderer) {
+    this.box = new BoxRenderable(renderer, {
+      id: "tabbar-box",
+      width: "100%",
+      height: 3,
+      borderStyle: "single",
+      borderColor: "#444444",
+      padding: 1,
+    })
+
+    this.text = new TextRenderable(renderer, {
+      id: "tabbar-text",
+      content: this.buildTabText("main"),
+      fg: "#FFFFFF",
+    })
+
+    this.box.add(this.text)
+  }
+
+  /**
+   * Get the root renderable for this component
+   */
+  getRenderable(): BoxRenderable {
+    return this.box
+  }
+
+  /**
+   * Set the active tab and update display
+   */
+  setActiveTab(view: ViewType): void {
+    if (this.activeView !== view) {
+      this.activeView = view
+      this.text.content = this.buildTabText(view)
+    }
+  }
+
+  /**
+   * Build the tab text with the active tab bracketed
+   */
+  private buildTabText(activeView: ViewType): string {
+    return TABS.map((tab) => {
+      if (tab.id === activeView) {
+        return `[${tab.label}]`
+      }
+      return ` ${tab.label} `
+    }).join("  ")
+  }
+}

package/src/ui/controllers/confirm-controller.ts

@@ -0,0 +1,57 @@
+import type { ViewController, ControllerContext } from "./index"
+import { Action, CONFIRM_KEYBINDINGS, type KeyBinding } from "../keybindings"
+
+// ============================================================================
+// Confirm Dialog Types
+// ============================================================================
+
+export interface ConfirmField {
+  label: string
+  value: string
+}
+
+export interface ConfirmDetails {
+  title: string           // e.g., "Delete Project", "Delete Session"
+  fields: ConfirmField[]  // e.g., [{ label: "Path:", value: "~/foo" }]
+  onConfirm: () => Promise<void>
+}
+
+// ============================================================================
+// Confirm Dialog Controller
+// ============================================================================
+
+export class ConfirmDialogController implements ViewController {
+  constructor(private details: ConfirmDetails) {}
+
+  onEnter(ctx: ControllerContext): void {
+    ctx.confirmDialog.showDetails(this.details.title, this.details.fields)
+    ctx.statusBar.setHints("y:confirm  n/Esc:cancel")
+  }
+
+  onExit(ctx: ControllerContext): void {
+    ctx.confirmDialog.hide()
+  }
+
+  handleAction(action: Action, ctx: ControllerContext): boolean {
+    switch (action) {
+      case Action.CONFIRM_YES:
+        ctx.popController()
+        this.details.onConfirm()
+        return true
+      case Action.CONFIRM_NO:
+      case Action.BACK:
+        ctx.popController()
+        return true
+      default:
+        return false
+    }
+  }
+
+  getHelpText(): string {
+    return "y:confirm  n/Esc:cancel"
+  }
+
+  getKeybindings(): KeyBinding[] {
+    return CONFIRM_KEYBINDINGS
+  }
+}