feat: add direct PTY grid with expand/select mode for text copying

Replace tmux-based grid with direct PTY rendering. Add [MAX] button
to expand a pane to fullscreen and [SEL] to enable native text
selection within the expanded pane. Esc exits select/expanded mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/session-grid.ts

@@ -10,13 +10,31 @@ import {
 } from "@opentui/core"
 import { TerminalView, getProjectColor } from "./terminal-view"
 import type { TmuxSession } from "../tmux/session-manager"
-import { sendKeys } from "../tmux/input-bridge"
+import { sendKeys, sendMouseEvent } from "../tmux/input-bridge"
+
+export type PaneStatus = "busy" | "idle" | null
 
 export interface GridPane {
   session: TmuxSession
   termView: TerminalView
   borderBox: BoxRenderable
   titleText: TextRenderable
+  subtitleText: TextRenderable
+  status: PaneStatus
+  statusSince: number // Date.now() when status was set
+}
+
+function fmtElapsed(sinceMs: number): string {
+  if (!sinceMs) return ""
+  const sec = Math.floor((Date.now() - sinceMs) / 1000)
+  if (sec < 1) return "0s"
+  if (sec < 60) return `${sec}s`
+  const m = Math.floor(sec / 60)
+  const s = sec % 60
+  if (m < 60) return `${m}m${s > 0 ? String(s).padStart(2, "0") + "s" : ""}`
+  const h = Math.floor(m / 60)
+  const rm = m % 60
+  return `${h}h${rm > 0 ? String(rm).padStart(2, "0") + "m" : ""}`
 }
 
 export class SessionGrid {
@@ -25,17 +43,19 @@ export class SessionGrid {
   private panes: GridPane[] = []
   private _focusIndex = 0
   private flashTimers = new Map<string, ReturnType<typeof setInterval>>()
+  private titleTimer: ReturnType<typeof setInterval> | null = null
 
   constructor(renderer: CliRenderer, container: BoxRenderable) {
     this.renderer = renderer
     this.container = container
+    this.titleTimer = setInterval(() => this.refreshTitles(), 1000)
   }
 
   get focusIndex() { return this._focusIndex }
   get paneCount() { return this.panes.length }
   get focusedPane(): GridPane | null { return this.panes[this._focusIndex] ?? null }
 
-  addSession(session: TmuxSession): GridPane {
+  addSession(session: TmuxSession, subtitle?: ReturnType<typeof t>): GridPane {
     const color = getProjectColor(session.colorIndex)
     const colorRGBA = RGBA.fromHex(color)
 
@@ -55,18 +75,27 @@ export class SessionGrid {
     })
     titleText.content = t` ${bold(fg(color)(session.projectName))}${session.sessionId ? dim(` #${session.sessionId.slice(0, 8)}`) : ""}`
 
-    // Calculate pane size (leave room for border + title)
+    const subtitleText = new TextRenderable(this.renderer, {
+      width: "100%",
+      height: 1,
+      flexShrink: 0,
+    })
+    if (subtitle) subtitleText.content = subtitle
+    else subtitleText.content = t` ${dim("...")}`
+
+    // Calculate pane size (leave room for border + title + subtitle)
     const dims = this.calcPaneDims()
     const termView = new TerminalView(this.renderer, {
       width: Math.max(dims.w - 2, 10),
-      height: Math.max(dims.h - 3, 4),
+      height: Math.max(dims.h - 4, 4),
     })
 
     borderBox.add(titleText)
+    borderBox.add(subtitleText)
     borderBox.add(termView)
     this.container.add(borderBox)
 
-    const pane: GridPane = { session, termView, borderBox, titleText }
+    const pane: GridPane = { session, termView, borderBox, titleText, subtitleText, status: null, statusSince: 0 }
     this.panes.push(pane)
 
     termView.attach(session)
@@ -114,10 +143,110 @@ export class SessionGrid {
     }
   }
 
-  async sendInputToFocused(rawSequence: string) {
+  flashFocused() {
     const pane = this.focusedPane
     if (!pane) return
-    await sendKeys(pane.session.name, rawSequence)
+    const flashColor = RGBA.fromHex("#7dcfff")
+    pane.borderBox.borderColor = flashColor
+    this.renderer.requestRender()
+    setTimeout(() => {
+      // Restore to heavy white (focused state)
+      pane.borderBox.borderColor = RGBA.fromHex("#ffffff")
+      this.renderer.requestRender()
+    }, 150)
+  }
+
+  focusByDirection(dir: "up" | "down" | "left" | "right") {
+    const n = this.panes.length
+    if (n <= 1) return
+    const cols = n <= 1 ? 1 : n <= 2 ? 2 : n <= 4 ? 2 : n <= 6 ? 3 : n <= 9 ? 3 : 4
+    const rows = Math.ceil(n / cols)
+    const curCol = this._focusIndex % cols
+    const curRow = Math.floor(this._focusIndex / cols)
+
+    let newCol = curCol
+    let newRow = curRow
+    switch (dir) {
+      case "left":  newCol = (curCol - 1 + cols) % cols; break
+      case "right": newCol = (curCol + 1) % cols; break
+      case "up":    newRow = (curRow - 1 + rows) % rows; break
+      case "down":  newRow = (curRow + 1) % rows; break
+    }
+    const idx = newRow * cols + newCol
+    if (idx >= 0 && idx < n) {
+      this._focusIndex = idx
+      this.updateBorders()
+    }
+  }
+
+  focusByClick(col: number, row: number): boolean {
+    const n = this.panes.length
+    if (n === 0) return false
+    const termW = process.stdout.columns || 120
+    const termH = process.stdout.rows || 40
+    const cols = n <= 1 ? 1 : n <= 2 ? 2 : n <= 4 ? 2 : n <= 6 ? 3 : n <= 9 ? 3 : 4
+    const rows = Math.ceil(n / cols)
+    const cellW = Math.floor(termW / cols)
+    const cellH = Math.floor((termH - 2) / rows) // -2 for header+footer
+    const gridCol = Math.floor(col / cellW)
+    const gridRow = Math.floor((row - 1) / cellH) // -1 for header line
+    const idx = gridRow * cols + gridCol
+    if (idx >= 0 && idx < n) {
+      this._focusIndex = idx
+      this.updateBorders()
+      return true
+    }
+    return false
+  }
+
+  sendInputToFocused(rawSequence: string) {
+    const pane = this.focusedPane
+    if (!pane) return
+    sendKeys(pane.session.name, rawSequence)
+    pane.termView.nudge()
+  }
+
+  // Hit-test: map absolute screen coords to pane index + relative terminal coords
+  hitTest(absCol: number, absRow: number): { index: number, relX: number, relY: number } | null {
+    const n = this.panes.length
+    if (n === 0) return null
+    const termW = process.stdout.columns || 120
+    const termH = process.stdout.rows || 40
+    const gridCols = n <= 1 ? 1 : n <= 2 ? 2 : n <= 4 ? 2 : n <= 6 ? 3 : n <= 9 ? 3 : 4
+    const gridRows = Math.ceil(n / gridCols)
+    const cellW = Math.floor(termW / gridCols)
+    const cellH = Math.floor((termH - 2) / gridRows)
+
+    // Convert 1-based screen coords to grid cell
+    const gc = Math.floor((absCol - 1) / cellW)
+    const gr = Math.floor((absRow - 2) / cellH) // row 2 is first grid row (row 1 = header)
+    if (gc < 0 || gc >= gridCols || gr < 0 || gr >= gridRows) return null
+
+    const idx = gr * gridCols + gc
+    if (idx < 0 || idx >= n) return null
+
+    // Terminal content within cell: after left border(1) + after top border(1)+title(1)+subtitle(1)
+    const termStartX = gc * cellW + 2   // 1-based + left border
+    const termStartY = 2 + gr * cellH + 3 // header(1) + top border(1) + title(1) + subtitle(1)
+
+    return {
+      index: idx,
+      relX: absCol - termStartX + 1, // 1-based for tmux
+      relY: absRow - termStartY + 1,
+    }
+  }
+
+  // Forward mouse event to the focused tmux pane with correct relative coordinates
+  sendMouseToFocused(absCol: number, absRow: number, btn: number, release: boolean) {
+    const pane = this.focusedPane
+    if (!pane) return
+
+    const hit = this.hitTest(absCol, absRow)
+    if (!hit || hit.index !== this._focusIndex) return
+    if (hit.relX < 1 || hit.relY < 1) return
+    if (hit.relX > pane.session.width || hit.relY > pane.session.height) return
+
+    sendMouseEvent(pane.session.name, hit.relX, hit.relY, btn, release)
   }
 
   // Flash a pane's border to draw attention (e.g., when session goes idle)
@@ -159,34 +288,69 @@ export class SessionGrid {
   markIdle(sessionName: string) {
     const pane = this.panes.find(p => p.session.name === sessionName)
     if (!pane) return
+    if (pane.status !== "idle") {
+      pane.status = "idle"
+      pane.statusSince = Date.now()
+    }
     this.startFlash(sessionName)
-    pane.titleText.content = t` ${bold(fg(getProjectColor(pane.session.colorIndex))(pane.session.projectName))} ${fg("#e0af68")("NEEDS INPUT")}`
-    this.renderer.requestRender()
+    this.renderPaneTitle(pane)
   }
 
   markBusy(sessionName: string) {
     const pane = this.panes.find(p => p.session.name === sessionName)
     if (!pane) return
+    if (pane.status !== "busy") {
+      pane.status = "busy"
+      pane.statusSince = Date.now()
+    }
     this.clearFlash(sessionName)
-    pane.titleText.content = t` ${bold(fg(getProjectColor(pane.session.colorIndex))(pane.session.projectName))} ${fg("#9ece6a")("RUNNING")}`
-    this.renderer.requestRender()
+    this.renderPaneTitle(pane)
   }
 
   clearMark(sessionName: string) {
     const pane = this.panes.find(p => p.session.name === sessionName)
     if (!pane) return
+    pane.status = null
+    pane.statusSince = 0
     this.clearFlash(sessionName)
+    this.renderPaneTitle(pane)
+  }
+
+  private renderPaneTitle(pane: GridPane) {
     const color = getProjectColor(pane.session.colorIndex)
-    pane.titleText.content = t` ${bold(fg(color)(pane.session.projectName))}${pane.session.sessionId ? dim(` #${pane.session.sessionId.slice(0, 8)}`) : ""}`
+    const name = bold(fg(color)(pane.session.projectName))
+    const elapsed = pane.statusSince ? fmtElapsed(pane.statusSince) : ""
+
+    if (pane.status === "idle") {
+      pane.titleText.content = t` ${name} ${fg("#e0af68")("IDLE")} ${dim(elapsed)}`
+    } else if (pane.status === "busy") {
+      pane.titleText.content = t` ${name} ${fg("#9ece6a")("RUNNING")} ${dim(elapsed)}`
+    } else {
+      pane.titleText.content = t` ${name}${pane.session.sessionId ? dim(` #${pane.session.sessionId.slice(0, 8)}`) : ""}`
+    }
     this.renderer.requestRender()
   }
 
+  private refreshTitles() {
+    let needsRender = false
+    for (const pane of this.panes) {
+      if (pane.status && pane.statusSince) {
+        this.renderPaneTitle(pane)
+        needsRender = true
+      }
+    }
+    if (needsRender) this.renderer.requestRender()
+  }
+
   private updateBorders() {
     for (let i = 0; i < this.panes.length; i++) {
       const pane = this.panes[i]
       const isFocused = i === this._focusIndex
       const color = getProjectColor(pane.session.colorIndex)
 
+      // Update terminal view focus state (controls poll rate)
+      pane.termView.focused = isFocused
+
       // Focused pane gets brighter border, others get dimmer
       if (isFocused) {
         pane.borderBox.borderColor = RGBA.fromHex("#ffffff")
@@ -241,6 +405,7 @@ export class SessionGrid {
   }
 
   destroyAll() {
+    if (this.titleTimer) { clearInterval(this.titleTimer); this.titleTimer = null }
     for (const timer of this.flashTimers.values()) clearInterval(timer)
     this.flashTimers.clear()
     for (const pane of this.panes) {