@phenx-inc/ctlsurf 0.1.18 → 0.1.21

package/src/main/tui.ts

@@ -1,8 +1,10 @@
 /**
  * Terminal UI (TUI) renderer
  *
- * Draws a title bar and status bar around the PTY output area.
- * Uses ANSI escape codes and scroll regions — no external dependencies.
+ * Minimal status bar at the bottom, full PTY passthrough above.
+ * No alternate screen — the PTY (Claude Code) owns the screen and
+ * handles its own scrolling, mouse events, and display management.
+ * Status info also goes to the terminal tab title via OSC.
  */
 
 const ESC = '\x1b'
@@ -10,13 +12,13 @@ const CSI = `${ESC}[`
 
 // Colors (Tokyo Night palette)
 const BG_BAR = `${CSI}48;2;22;22;30m`     // #16161e
-const FG_TITLE = `${CSI}38;2;192;202;245m` // #c0caf5
 const FG_DIM = `${CSI}38;2;86;95;137m`     // #565f89
 const FG_ACCENT = `${CSI}38;2;122;162;247m` // #7aa2f7
 const FG_GREEN = `${CSI}38;2;158;206;106m`  // #9ece6a
 const FG_RED = `${CSI}38;2;247;118;142m`    // #f7768e
 const FG_YELLOW = `${CSI}38;2;224;175;104m` // #e0af68
 const FG_WHITE = `${CSI}38;2;169;177;214m`  // #a9b1d6
+const FG_TITLE = `${CSI}38;2;192;202;245m` // #c0caf5
 const BG_MODAL = `${CSI}48;2;31;35;53m`    // #1f2335
 const BG_SELECTED = `${CSI}48;2;42;43;61m` // #2a2b3d
 const RESET = `${CSI}0m`
@@ -46,28 +48,18 @@ export class Tui {
   }
 
   /**
-   * Initialize the TUI: alternate screen, hide cursor reporting, set scroll region
+   * Initialize the TUI: scroll region leaving last row for status bar.
+   * No alternate screen — PTY fully owns the display.
    */
   init(): void {
-    // Alternate screen buffer
-    this.write(`${CSI}?1049h`)
-    // Set scroll region: lines 2 to (rows - 1), leaving line 1 for title, line rows for status
-    this.setScrollRegion()
-    // Move cursor to the PTY area
-    this.moveToPtyArea()
-    // Draw chrome
-    this.drawTitleBar()
-    this.drawStatusBar()
+    // Just set tab title — the PTY agent owns the full screen
+    this.updateTerminalTitle()
   }
 
   /**
    * Restore terminal to normal state
    */
   destroy(): void {
-    // Reset scroll region
-    this.write(`${CSI}r`)
-    // Leave alternate screen
-    this.write(`${CSI}?1049l`)
     // Show cursor
     this.write(`${CSI}?25h`)
   }
@@ -78,46 +70,35 @@ export class Tui {
   resize(cols: number, rows: number): void {
     this.cols = cols
     this.rows = rows
-    this.setScrollRegion()
-    this.drawTitleBar()
-    this.drawStatusBar()
-    this.moveToPtyArea()
   }
 
   /**
-   * Get the PTY dimensions (main area minus title + status bars)
+   * Get the PTY dimensions (all rows minus status bar)
    */
   getPtySize(): { cols: number; rows: number } {
     return {
       cols: this.cols,
-      rows: Math.max(1, this.rows - 2),
+      rows: this.rows,
     }
   }
 
   /**
-   * Update state and redraw bars
+   * Update state and redraw status bar
    */
   update(partial: Partial<TuiState>): void {
     Object.assign(this.state, partial)
-    // Save cursor, draw bars, restore cursor
-    this.write(`${CSI}s`) // save cursor
-    this.drawTitleBar()
-    this.drawStatusBar()
-    this.write(`${CSI}u`) // restore cursor
+    this.updateTerminalTitle()
   }
 
   /**
-   * Write PTY output to the scroll region.
-   * Cursor is assumed to be in the PTY area already.
+   * Write PTY output — full passthrough.
    */
   writePtyData(data: string): void {
-    // PTY data goes straight to stdout — it's already in the scroll region
     this.write(data)
   }
 
   /**
    * Update the terminal window/tab title via OSC escape sequence.
-   * Works in passthrough mode (no chrome) — doesn't conflict with the agent's TUI.
    */
   setTerminalTitle(title: string): void {
     this.write(`${ESC}]0;${title}\x07`)
@@ -149,49 +130,41 @@ export class Tui {
 
   /**
    * Show an interactive agent picker modal.
-   * Returns a promise that resolves with the selected agent index.
+   * Uses alternate screen just for the picker, then exits back to normal.
    */
   showAgentPicker(agents: { name: string; description: string }[]): Promise<number> {
     return new Promise((resolve) => {
       let selected = 0
       const modalWidth = 44
-      const modalHeight = agents.length + 4 // border + title + items + border
+      const modalHeight = agents.length + 4
       const startCol = Math.max(1, Math.floor((this.cols - modalWidth) / 2))
       const startRow = Math.max(1, Math.floor((this.rows - modalHeight) / 2))
 
-      // Enter alternate screen if not already
+      // Enter alternate screen just for the picker
       this.write(`${CSI}?1049h`)
-      // Hide cursor
       this.write(`${CSI}?25l`)
 
       const drawModal = () => {
         const topBorder = '\u250c' + '\u2500'.repeat(modalWidth - 2) + '\u2510'
         const botBorder = '\u2514' + '\u2500'.repeat(modalWidth - 2) + '\u2518'
-        const emptyLine = '\u2502' + ' '.repeat(modalWidth - 2) + '\u2502'
 
-        // Draw background fill
         for (let r = 0; r < this.rows; r++) {
           this.write(`${CSI}${r + 1};1H${BG_BAR}${CSI}2K${RESET}`)
         }
 
-        // Draw logo/branding centered
         const brand = 'ctlsurf'
         const brandCol = Math.max(1, Math.floor((this.cols - brand.length) / 2))
         this.write(`${CSI}${startRow - 2};${brandCol}H${FG_ACCENT}${brand}${RESET}`)
 
-        // Top border
         this.write(`${CSI}${startRow};${startCol}H${BG_MODAL}${FG_DIM}${topBorder}${RESET}`)
 
-        // Title
         const title = ' Select Agent'
         const titlePad = ' '.repeat(Math.max(0, modalWidth - 2 - title.length))
         this.write(`${CSI}${startRow + 1};${startCol}H${BG_MODAL}${FG_DIM}\u2502${RESET}${BG_MODAL}${FG_TITLE}${title}${titlePad}${FG_DIM}\u2502${RESET}`)
 
-        // Separator
         const sep = '\u251c' + '\u2500'.repeat(modalWidth - 2) + '\u2524'
         this.write(`${CSI}${startRow + 2};${startCol}H${BG_MODAL}${FG_DIM}${sep}${RESET}`)
 
-        // Agent items
         for (let i = 0; i < agents.length; i++) {
           const agent = agents[i]
           const row = startRow + 3 + i
@@ -199,28 +172,24 @@ export class Tui {
           const bg = isSelected ? BG_SELECTED : BG_MODAL
           const pointer = isSelected ? `${FG_ACCENT}\u25B8 ` : '  '
           const nameFg = isSelected ? FG_ACCENT : FG_WHITE
-          const descFg = FG_DIM
           const nameStr = agent.name
-          const descStr = agent.description ? ` ${FG_DIM}— ${agent.description.slice(0, 20)}` : ''
+          const descStr = agent.description ? ` ${FG_DIM}\u2014 ${agent.description.slice(0, 20)}` : ''
           const content = `${pointer}${nameFg}${nameStr}${descStr}`
-          const contentLen = (isSelected ? 2 : 2) + nameStr.length + (agent.description ? 3 + Math.min(20, agent.description.length) : 0)
+          const contentLen = 2 + nameStr.length + (agent.description ? 3 + Math.min(20, agent.description.length) : 0)
           const pad = ' '.repeat(Math.max(0, modalWidth - 2 - contentLen))
           this.write(`${CSI}${row};${startCol}H${bg}${FG_DIM}\u2502${RESET}${bg}${content}${pad}${RESET}${BG_MODAL}${FG_DIM}\u2502${RESET}`)
         }
 
-        // Bottom border
         const botRow = startRow + 3 + agents.length
         this.write(`${CSI}${botRow};${startCol}H${BG_MODAL}${FG_DIM}${botBorder}${RESET}`)
 
-        // Hint
-        const hint = '\u2191\u2193 navigate · Enter select · q quit'
+        const hint = '\u2191\u2193 navigate \u00B7 Enter select \u00B7 q quit'
         const hintCol = Math.max(1, Math.floor((this.cols - hint.length) / 2))
         this.write(`${CSI}${botRow + 2};${hintCol}H${FG_DIM}${hint}${RESET}`)
       }
 
       drawModal()
 
-      // Set raw mode to capture keypresses
       if (process.stdin.isTTY) {
         process.stdin.setRawMode(true)
       }
@@ -230,31 +199,27 @@ export class Tui {
         const key = data.toString()
 
         if (key === '\x1b[A' || key === 'k') {
-          // Up
           selected = (selected - 1 + agents.length) % agents.length
           drawModal()
         } else if (key === '\x1b[B' || key === 'j') {
-          // Down
           selected = (selected + 1) % agents.length
           drawModal()
         } else if (key === '\r' || key === '\n') {
-          // Enter — select
           cleanup()
           resolve(selected)
         } else if (key === 'q' || key === '\x1b' || key === '\x03') {
-          // q, Escape, Ctrl+C — quit
           cleanup()
-          this.write(`${CSI}?25h`) // show cursor
-          this.write(`${CSI}?1049l`) // leave alt screen
+          this.write(`${CSI}?25h`)
+          this.write(`${CSI}?1049l`)
           process.exit(0)
         }
       }
 
       const cleanup = () => {
         process.stdin.removeListener('data', onKey)
-        // Show cursor again
         this.write(`${CSI}?25h`)
-        // Clear the modal (will be redrawn by init())
+        // Leave alternate screen — back to normal mode for the agent
+        this.write(`${CSI}?1049l`)
       }
 
       process.stdin.on('data', onKey)
@@ -270,58 +235,19 @@ export class Tui {
   }
 
   private setScrollRegion(): void {
-    // Scroll region from line 2 to line (rows - 1)
-    this.write(`${CSI}2;${this.rows - 1}r`)
+    // PTY gets rows 1 through (rows - 1), status bar on last row
+    this.write(`${CSI}1;${this.rows - 1}r`)
   }
 
-  private moveToPtyArea(): void {
-    // Move cursor to top of PTY area (line 2)
-    this.write(`${CSI}2;1H`)
-  }
+  private drawStatusBar(): void {
+    const { agentName, wsStatus, cwd } = this.state
 
-  private drawTitleBar(): void {
-    const { agentName, cwd, wsStatus } = this.state
-    // Move to line 1
-    this.write(`${CSI}1;1H`)
-    // Clear line and draw
+    // Move to last line (outside scroll region)
+    this.write(`${CSI}${this.rows};1H`)
     this.write(`${BG_BAR}${CSI}2K`)
 
     const displayCwd = this.shortenPath(cwd)
 
-    // WS status indicator
-    const statusColor = {
-      connected: FG_GREEN,
-      connecting: FG_YELLOW,
-      disconnected: FG_RED,
-      pending_approval: FG_YELLOW,
-      no_project: FG_DIM,
-    }[wsStatus] || FG_DIM
-    const statusLabel = {
-      connected: 'Connected',
-      connecting: 'Connecting...',
-      disconnected: 'Disconnected',
-      pending_approval: 'Pending',
-      no_project: 'No Project',
-    }[wsStatus] || wsStatus
-    const wsIndicator = `${statusColor}\u25CF ${statusLabel}${RESET}${BG_BAR}`
-
-    const left = ` ${FG_ACCENT}ctlsurf${RESET}${BG_BAR} ${FG_DIM}\u2502${RESET}${BG_BAR} ${FG_TITLE}${agentName || 'starting...'}${RESET}${BG_BAR} ${FG_DIM}\u2502${RESET}${BG_BAR} ${FG_DIM}${displayCwd}${RESET}${BG_BAR}`
-    const right = `${wsIndicator} ${RESET}${BG_BAR}`
-
-    this.write(left)
-    const pad = Math.max(0, this.cols - this.visibleLen(left) - this.visibleLen(right))
-    this.write(' '.repeat(pad))
-    this.write(right)
-    this.write(RESET)
-  }
-
-  private drawStatusBar(): void {
-    const { wsStatus, workerId, cwd } = this.state
-    // Move to last line
-    this.write(`${CSI}${this.rows};1H`)
-    // Clear line and draw
-    this.write(`${BG_BAR}${CSI}2K`)
-
     const statusColor = {
       connected: FG_GREEN,
       connecting: FG_YELLOW,
@@ -339,8 +265,7 @@ export class Tui {
       no_project: 'No Project',
     }[wsStatus] || wsStatus
 
-    const displayCwd = this.shortenPath(cwd)
-    const left = ` ${statusDot} ${FG_DIM}${statusLabel}${RESET}${BG_BAR}`
+    const left = ` ${FG_ACCENT}ctlsurf${RESET}${BG_BAR} ${statusDot} ${FG_DIM}${statusLabel}${RESET}${BG_BAR} ${FG_DIM}\u2502${RESET}${BG_BAR} ${FG_DIM}${agentName || '...'}${RESET}${BG_BAR}`
     const right = `${FG_DIM}Ctrl+\\ exit${RESET}${BG_BAR} ${FG_DIM}${displayCwd} ${RESET}${BG_BAR}`
 
     this.write(left)
@@ -360,7 +285,6 @@ export class Tui {
   }
 
   private visibleLen(s: string): number {
-    // Strip ANSI codes to get visible length
     return s.replace(/\x1b\[[^m]*m/g, '').length
   }
 }

package/src/renderer/components/TerminalPanel.tsx

@@ -27,6 +27,20 @@ let _unsubData: (() => void) | null = null
 let _unsubExit: (() => void) | null = null
 let _currentAgentId: string | null = null
 
+// Scroll-pinning: true means user is at/near bottom, auto-scroll is allowed
+let _pinnedToBottom = true
+
+function isAtBottom(terminal: Terminal): boolean {
+  const buf = terminal.buffer.active
+  return buf.viewportY >= buf.baseY
+}
+
+function scrollIfPinned(terminal: Terminal) {
+  if (_pinnedToBottom) {
+    terminal.scrollToBottom()
+  }
+}
+
 function getOrCreateTerminal(onExit: () => void): { terminal: Terminal; fitAddon: FitAddon } {
   if (_terminal && _fitAddon) {
     return { terminal: _terminal, fitAddon: _fitAddon }
@@ -67,14 +81,22 @@ function getOrCreateTerminal(onExit: () => void): { terminal: Terminal; fitAddon
   terminal.loadAddon(fitAddon)
   terminal.loadAddon(new WebLinksAddon())
 
-  // Send keystrokes to pty
+  // Track scroll position — detect when user scrolls away from bottom
+  terminal.onScroll(() => {
+    _pinnedToBottom = isAtBottom(terminal)
+  })
+
+  // Send keystrokes to pty — re-pin to bottom on user input
   terminal.onData((data) => {
+    _pinnedToBottom = true
+    terminal.scrollToBottom()
     window.worker.writePty(data)
   })
 
-  // Receive pty output — subscribed once, never unsubscribed
+  // Receive pty output — auto-scroll only if pinned
   _unsubData = window.worker.onPtyData((data) => {
     terminal.write(data)
+    scrollIfPinned(terminal)
   })
 
   // Handle pty exit
@@ -108,7 +130,7 @@ export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
     }
 
     fitAddon.fit()
-    terminal.scrollToBottom()
+    scrollIfPinned(terminal)
 
     // Resize handling
     let resizeTimeout: ReturnType<typeof setTimeout>
@@ -117,7 +139,7 @@ export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
       resizeTimeout = setTimeout(() => {
         if (_fitAddon && _terminal) {
           _fitAddon.fit()
-          _terminal.scrollToBottom()
+          scrollIfPinned(_terminal)
           const { cols, rows } = _terminal
           window.worker.resizePty(cols, rows)
         }
@@ -147,6 +169,7 @@ export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
     onSpawn(agent).then(() => {
       if (_fitAddon && _terminal) {
         _fitAddon.fit()
+        _pinnedToBottom = true
         _terminal.scrollToBottom()
         const { cols, rows } = _terminal
         window.worker.resizePty(cols, rows)