refactor: extract index.ts into 7 focused modules

Break 1507-line index.ts into a slim 251-line entry point plus:
- lib/theme.ts, lib/state.ts (shared constants + app singleton)
- ui/formatters.ts, ui/panels.ts (row formatting + UI updates)
- input/parser.ts, input/handlers.ts (stdin parsing + keyboard/mouse)
- grid/view-switch.ts, actions/launch.ts (grid switching + PTY launch)

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

src/actions/launch.ts

@@ -0,0 +1,71 @@
+import { app } from "../lib/state"
+import { updateAll, rebuildDisplayRows } from "../ui/panels"
+import { ensureGridView } from "../grid/view-switch"
+import { loadSessions } from "../data/sessions"
+import { createSession } from "../pty/session-manager"
+
+export async function doLaunch() {
+  if (app.selectedProjects.size === 0 && app.selectedSessions.size === 0) return
+  if (app.demoMode) {
+    app.selectedProjects.clear()
+    app.selectedSessions.clear()
+    app.selectedBranches.clear()
+    rebuildDisplayRows()
+    updateAll()
+    return
+  }
+
+  const items: { path: string; name: string; sessionId?: string; targetBranch?: string }[] = []
+
+  for (const path of app.selectedProjects) {
+    const project = app.projects.find(p => p.path === path)
+    if (!project) continue
+    const targetBranch = app.selectedBranches.get(path)
+    const needsBranch = targetBranch && targetBranch !== project.branch
+    if (!project.sessions) {
+      project.sessions = await loadSessions(project.path)
+      project.sessionCount = project.sessions.length
+    }
+    const lastSessionId = project.sessions[0]?.id
+    items.push({ path, name: project.name, sessionId: lastSessionId, targetBranch: needsBranch ? targetBranch : undefined })
+  }
+
+  for (const project of app.projects) {
+    if (!project.sessions) continue
+    for (const session of project.sessions) {
+      if (app.selectedSessions.has(session.id)) {
+        const targetBranch = app.selectedBranches.get(project.path)
+        const needsBranch = targetBranch && targetBranch !== project.branch
+        items.push({ path: project.path, name: project.name, sessionId: session.id, targetBranch: needsBranch ? targetBranch : undefined })
+      }
+    }
+  }
+
+  if (items.length === 0) return
+
+  ensureGridView()
+
+  const termW = process.stdout.columns || 120
+  const termH = process.stdout.rows || 40
+  const totalPanes = items.length + (app.directGrid?.paneCount || 0)
+  const cols = totalPanes <= 1 ? 1 : totalPanes <= 2 ? 2 : totalPanes <= 4 ? 2 : 3
+  const rows = Math.ceil(totalPanes / cols)
+  const paneW = Math.max(Math.floor(termW / cols) - 2, 20)
+  const paneH = Math.max(Math.floor((termH - 2) / rows) - 4, 6)
+
+  for (const item of items) {
+    const session = await createSession({
+      projectPath: item.path,
+      projectName: item.name,
+      sessionId: item.sessionId,
+      targetBranch: item.targetBranch,
+      width: paneW,
+      height: paneH,
+    })
+    await app.directGrid!.addPane(session)
+  }
+
+  app.selectedProjects.clear()
+  app.selectedSessions.clear()
+  app.selectedBranches.clear()
+}

src/grid/view-switch.ts

@@ -0,0 +1,29 @@
+import { app } from "../lib/state"
+import { DirectGridRenderer } from "../components/direct-grid"
+
+export function ensureGridView() {
+  if (app.viewMode === "grid" && app.directGrid) return
+  switchToGrid()
+}
+
+export function switchToGrid() {
+  app.viewMode = "grid"
+
+  if (!app.directGrid) {
+    app.directGrid = new DirectGridRenderer(app.rawStdoutWrite)
+  }
+
+  app.renderer.suspend()
+
+  if (process.stdin.isTTY) process.stdin.setRawMode(true)
+  process.stdin.resume()
+  app.rawStdoutWrite("\x1b[?1049h")
+  app.rawStdoutWrite("\x1b[?1000h")
+  app.rawStdoutWrite("\x1b[?1006h")
+  app.directGrid.start()
+}
+
+export function resizeGridPanes() {
+  if (!app.directGrid || app.directGrid.paneCount === 0) return
+  app.directGrid.repositionAll()
+}

src/input/handlers.ts

@@ -0,0 +1,492 @@
+import type { KeyEvent } from "@opentui/core"
+import { app } from "../lib/state"
+import { updateAll, rebuildDisplayRows, applySortMode } from "../ui/panels"
+import { extractKeyboardInput, extractMouseEvents } from "./parser"
+import { switchToGrid } from "../grid/view-switch"
+import { doLaunch } from "../actions/launch"
+import { launchSelections } from "../actions/launcher"
+import { loadSessions } from "../data/sessions"
+import { loadBranches } from "../data/git"
+import { generateMockSessions, generateMockBranches } from "../data/mock"
+import { focusTerminalByPath, getSessionStatus, populateMockSessionStatus } from "../data/monitor"
+import { stopAllCaptures } from "../pty/capture"
+
+// Shift+arrow sequences across terminal emulators
+const SHIFT_ARROWS: Record<string, "up" | "down" | "left" | "right"> = {
+  "\x1b[1;2A": "up",
+  "\x1b[1;2B": "down",
+  "\x1b[1;2C": "right",
+  "\x1b[1;2D": "left",
+  "\x1b[a": "up",
+  "\x1b[b": "down",
+  "\x1b[c": "right",
+  "\x1b[d": "left",
+}
+
+export async function expandProject(projectIndex: number) {
+  const project = app.projects[projectIndex]
+  if (app.demoMode) {
+    if (!project.sessions) {
+      project.sessions = generateMockSessions(project.path)
+      project.sessionCount = project.sessions.length
+    }
+    if (!project.branches) {
+      project.branches = generateMockBranches(project.path)
+    }
+    populateMockSessionStatus(project)
+  } else {
+    const loads: Promise<void>[] = []
+    if (!project.sessions) {
+      loads.push(
+        loadSessions(project.path).then(s => {
+          project.sessions = s
+          project.sessionCount = s.length
+        })
+      )
+    }
+    if (!project.branches) {
+      loads.push(
+        loadBranches(project.path).then(b => { project.branches = b }).catch(() => { project.branches = [] })
+      )
+    }
+    if (loads.length > 0) await Promise.all(loads)
+  }
+  project.expanded = true
+  rebuildDisplayRows()
+  updateAll()
+}
+
+export function hitTestListRow(screenRow: number): number {
+  const listStartY = 2
+  const relY = screenRow - listStartY + app.listBox.scrollTop
+  if (relY < 0) return -1
+
+  let y = 0
+  for (let i = 0; i < app.displayRows.length; i++) {
+    const h = app.displayRows[i].type === "session" ? 3 : 1
+    if (relY >= y && relY < y + h) return i
+    y += h
+  }
+  return -1
+}
+
+export function handlePickerClick(_col: number, screenRow: number) {
+  const idx = hitTestListRow(screenRow)
+  if (idx < 0 || idx >= app.displayRows.length) return
+
+  app.cursor = idx
+  const row = app.displayRows[idx]
+  const project = app.projects[row.projectIndex]
+
+  if (row.type === "project" || row.type === "new-session") {
+    const path = project.path
+    if (app.selectedProjects.has(path)) app.selectedProjects.delete(path)
+    else app.selectedProjects.add(path)
+  } else if (row.type === "session") {
+    const session = project.sessions![row.sessionIndex!]
+    if (app.selectedSessions.has(session.id)) app.selectedSessions.delete(session.id)
+    else app.selectedSessions.add(session.id)
+  } else if (row.type === "branch") {
+    const path = project.path
+    if (app.selectedBranches.get(path) === row.branchName) {
+      app.selectedBranches.delete(path)
+    } else {
+      app.selectedBranches.set(path, row.branchName!)
+    }
+  }
+
+  updateAll()
+}
+
+export async function handleKeypress(key: KeyEvent) {
+  try {
+  const total = app.displayRows.length
+  if (total === 0) return
+
+  switch (key.name) {
+    case "up":
+      if (app.cursor > 0) app.cursor--
+      break
+
+    case "down":
+      if (app.cursor < total - 1) app.cursor++
+      break
+
+    case "pageup":
+      app.cursor = Math.max(0, app.cursor - 15)
+      break
+
+    case "pagedown":
+      app.cursor = Math.min(total - 1, app.cursor + 15)
+      break
+
+    case "home":
+      app.cursor = 0
+      break
+
+    case "end":
+      app.cursor = total - 1
+      break
+
+    case "right": {
+      const row = app.displayRows[app.cursor]
+      if (row.type === "project") {
+        const project = app.projects[row.projectIndex]
+        if (!project.expanded) {
+          expandProject(row.projectIndex)
+          return
+        }
+      }
+      return
+    }
+
+    case "left": {
+      const row = app.displayRows[app.cursor]
+      if (row.type === "project") {
+        app.projects[row.projectIndex].expanded = false
+      } else {
+        app.projects[row.projectIndex].expanded = false
+        const target = row.projectIndex
+        rebuildDisplayRows()
+        app.cursor = app.displayRows.findIndex(
+          (r) => r.type === "project" && r.projectIndex === target
+        )
+        if (app.cursor < 0) app.cursor = 0
+      }
+      rebuildDisplayRows()
+      if (app.cursor >= app.displayRows.length) app.cursor = app.displayRows.length - 1
+      break
+    }
+
+    case "space": {
+      const row = app.displayRows[app.cursor]
+      if (row.type === "project" || row.type === "new-session") {
+        const path = app.projects[row.projectIndex].path
+        if (app.selectedProjects.has(path)) app.selectedProjects.delete(path)
+        else app.selectedProjects.add(path)
+      } else if (row.type === "session") {
+        const session = app.projects[row.projectIndex].sessions![row.sessionIndex!]
+        if (app.selectedSessions.has(session.id)) app.selectedSessions.delete(session.id)
+        else app.selectedSessions.add(session.id)
+      } else if (row.type === "branch") {
+        const path = app.projects[row.projectIndex].path
+        if (app.selectedBranches.get(path) === row.branchName) {
+          app.selectedBranches.delete(path)
+        } else {
+          app.selectedBranches.set(path, row.branchName!)
+        }
+      }
+      break
+    }
+
+    case "f": {
+      const row = app.displayRows[app.cursor]
+      const project = app.projects[row.projectIndex]
+      Bun.spawn(["open", project.path])
+      break
+    }
+
+    case "g": {
+      const row = app.displayRows[app.cursor]
+      const project = app.projects[row.projectIndex]
+      if (project.activeSessions > 0) {
+        const sid = row.type === "session" && project.sessions
+          ? project.sessions[row.sessionIndex!]?.id
+          : undefined
+        await focusTerminalByPath(project.path, sid)
+      }
+      return
+    }
+
+    case "a":
+      for (const p of app.projects) app.selectedProjects.add(p.path)
+      break
+
+    case "n":
+      app.selectedProjects.clear()
+      app.selectedSessions.clear()
+      app.selectedBranches.clear()
+      break
+
+    case "i":
+      app.bottomPanelMode = app.bottomPanelMode === "preview" ? "idle" : "preview"
+      app.idleCursor = 0
+      break
+
+    case "tab":
+      if (app.bottomPanelMode === "idle" && app.cachedIdleSessions.length > 0) {
+        if (key.shift) {
+          app.idleCursor = app.idleCursor > 0 ? app.idleCursor - 1 : Math.min(app.cachedIdleSessions.length, 3) - 1
+        } else {
+          app.idleCursor = (app.idleCursor + 1) % Math.min(app.cachedIdleSessions.length, 3)
+        }
+      }
+      break
+
+    case "s":
+      app.sortMode = (app.sortMode + 1) % app.sortLabels.length
+      applySortMode()
+      app.cursor = 0
+      break
+
+    case "return": {
+      const hasSelections = app.selectedProjects.size > 0 || app.selectedSessions.size > 0
+      if (hasSelections) {
+        doLaunch()
+        break
+      }
+      if (app.bottomPanelMode === "idle" && app.cachedIdleSessions.length > 0 && app.idleCursor < app.cachedIdleSessions.length) {
+        const focused = await focusTerminalByPath(app.cachedIdleSessions[app.idleCursor].projectPath)
+        if (focused) return
+      }
+      const returnRow = app.displayRows[app.cursor]
+      if (
+        returnRow.type === "project" &&
+        app.projects[returnRow.projectIndex].activeSessions > 0
+      ) {
+        const focused = await focusTerminalByPath(app.projects[returnRow.projectIndex].path)
+        if (focused) return
+      }
+      doLaunch()
+      break
+    }
+
+    case "o": {
+      const hasOSel = app.selectedProjects.size > 0 || app.selectedSessions.size > 0
+      if (!hasOSel) {
+        const oRow = app.displayRows[app.cursor]
+        if (oRow) app.selectedProjects.add(app.projects[oRow.projectIndex].path)
+      }
+      if (app.selectedProjects.size > 0 || app.selectedSessions.size > 0) {
+        await launchSelections(app.projects, app.selectedProjects, app.selectedSessions, app.selectedBranches)
+        app.selectedProjects.clear()
+        app.selectedSessions.clear()
+        app.selectedBranches.clear()
+      }
+      break
+    }
+
+    case "q":
+    case "escape":
+      app.destroyed = true
+      if (app.monitorInterval) clearInterval(app.monitorInterval)
+      stopAllCaptures()
+      process.stdout.write("\x1b[?1006l")
+      process.stdout.write("\x1b[?1000l")
+      app.renderer.destroy()
+      return
+
+    case "t":
+      if (app.directGrid && app.directGrid.paneCount > 0) {
+        switchToGrid()
+        return
+      }
+      return
+
+    default:
+      return
+  }
+
+  updateAll()
+  } catch {}
+}
+
+export async function handleGridInput(rawSequence: string): Promise<boolean> {
+  if (app.viewMode !== "grid" || !app.directGrid) return false
+
+  if (rawSequence === "\x1b" && app.directGrid.isExpanded) {
+    app.directGrid.collapsePane()
+    return true
+  }
+
+  if (rawSequence === "\x1e" || rawSequence === "\x1b`") {
+    switchToPicker()
+    return true
+  }
+
+  if (rawSequence === "\x0e") {
+    app.directGrid.focusNext()
+    return true
+  }
+
+  if (rawSequence === "\x10") {
+    app.directGrid.focusPrev()
+    return true
+  }
+
+  if (rawSequence === "\x06") {
+    const pane = app.directGrid.focusedPane
+    if (pane) Bun.spawn(["open", pane.session.projectPath])
+    return true
+  }
+
+  if (rawSequence === "\x17") {
+    const pane = app.directGrid.focusedPane
+    if (pane) {
+      if (app.directGrid.isExpanded) app.directGrid.collapsePane()
+      const { killSession } = await import("../pty/session-manager")
+      app.directGrid.removePane(pane.session.name)
+      await killSession(pane.session.name)
+      if (app.directGrid.paneCount === 0) {
+        switchToPicker()
+      }
+    }
+    return true
+  }
+
+  if (rawSequence === "\x1b[5~") {
+    app.directGrid.sendScrollToFocused("up")
+    return true
+  }
+  if (rawSequence === "\x1b[6~") {
+    app.directGrid.sendScrollToFocused("down")
+    return true
+  }
+
+  app.directGrid.sendInputToFocused(rawSequence)
+  return true
+}
+
+export function switchToPicker() {
+  app.viewMode = "picker"
+  if (app.directGrid) {
+    if (app.directGrid.selectMode) app.directGrid.exitSelectMode()
+    if (app.directGrid.paneCount > 0) app.directGrid.stop()
+  }
+  app.renderer.resume()
+  process.stdin.removeAllListeners("data")
+  process.stdin.on("data", stdinHandler)
+  process.stdout.write("\x1b[?1000h")
+  process.stdout.write("\x1b[?1006h")
+  if (app.mainBox) app.mainBox.visible = true
+  updateAll()
+  app.renderer.requestRender()
+}
+
+export function stdinHandler(data: string | Buffer) {
+  const str = typeof data === "string" ? data : data.toString("utf8")
+
+  if (app.viewMode === "grid" && app.directGrid) {
+    if (app.directGrid.selectMode) {
+      const keyboard = extractKeyboardInput(str)
+      if (keyboard === "\x1b") {
+        app.directGrid.exitSelectMode()
+      }
+      return
+    }
+
+    const mouseEvents = extractMouseEvents(str)
+    for (const me of mouseEvents) {
+      if (me.btn === 64) {
+        app.directGrid.sendScrollToFocused("up", 3)
+        continue
+      }
+      if (me.btn === 65) {
+        app.directGrid.sendScrollToFocused("down", 3)
+        continue
+      }
+      if (me.btn === 0 && !me.release) {
+        const btn = app.directGrid.checkButtonClick(me.col, me.row)
+        if (btn?.action === "max") {
+          app.directGrid.expandPane(btn.paneIndex)
+        } else if (btn?.action === "min") {
+          app.directGrid.collapsePane()
+        } else if (btn?.action === "sel") {
+          app.directGrid.enterSelectMode()
+        } else {
+          app.directGrid.focusByClick(me.col, me.row)
+        }
+        continue
+      }
+    }
+
+    let stripped = str
+    for (let i = mouseEvents.length - 1; i >= 0; i--) {
+      const me = mouseEvents[i]
+      stripped = stripped.slice(0, me.start) + stripped.slice(me.end)
+    }
+
+    const keyboard = extractKeyboardInput(stripped)
+    if (keyboard) {
+      const dir = SHIFT_ARROWS[keyboard]
+      if (dir) {
+        app.directGrid.focusByDirection(dir)
+      } else {
+        handleGridInput(keyboard)
+      }
+    }
+    return
+  }
+
+  // Picker mode
+  const pickerMouse = extractMouseEvents(str)
+  for (const me of pickerMouse) {
+    if (me.btn === 0 && !me.release) handlePickerClick(me.col, me.row)
+    if (me.btn === 64) { if (app.cursor > 0) { app.cursor--; updateAll() } }
+    if (me.btn === 65) { if (app.cursor < app.displayRows.length - 1) { app.cursor++; updateAll() } }
+  }
+
+  const keyboard = extractKeyboardInput(str)
+  if (!keyboard) return
+
+  const keyMap: Record<string, { name: string; shift?: boolean; ctrl?: boolean }> = {
+    "\x1b[A": { name: "up" },
+    "\x1b[B": { name: "down" },
+    "\x1b[C": { name: "right" },
+    "\x1b[D": { name: "left" },
+    "\x1b[5~": { name: "pageup" },
+    "\x1b[6~": { name: "pagedown" },
+    "\x1b[H": { name: "home" },
+    "\x1b[F": { name: "end" },
+    "\x1bOH": { name: "home" },
+    "\x1bOF": { name: "end" },
+    "\x1b[Z": { name: "tab", shift: true },
+    "\x1b[1;2A": { name: "up", shift: true },
+    "\x1b[1;2B": { name: "down", shift: true },
+    "\x1b[1;2C": { name: "right", shift: true },
+    "\x1b[1;2D": { name: "left", shift: true },
+    "\x09": { name: "tab" },
+    "\x0d": { name: "return" },
+    "\x1b": { name: "escape" },
+    " ": { name: "space" },
+  }
+
+  let ki = 0
+  while (ki < keyboard.length) {
+    let matched = false
+    for (let len = Math.min(8, keyboard.length - ki); len >= 1; len--) {
+      const seq = keyboard.slice(ki, ki + len)
+      const mapped = keyMap[seq]
+      if (mapped) {
+        const syntheticKey = {
+          name: mapped.name,
+          shift: mapped.shift || false,
+          ctrl: mapped.ctrl || false,
+          meta: false,
+          preventDefault: () => {},
+          stopPropagation: () => {},
+        } as KeyEvent
+        handleKeypress(syntheticKey)
+        ki += len
+        matched = true
+        break
+      }
+    }
+    if (!matched) {
+      const ch = keyboard[ki]
+      const code = ch.charCodeAt(0)
+      if (code >= 0x21 && code <= 0x7e) {
+        const syntheticKey = {
+          name: ch,
+          shift: false,
+          ctrl: false,
+          meta: false,
+          preventDefault: () => {},
+          stopPropagation: () => {},
+        } as KeyEvent
+        handleKeypress(syntheticKey)
+      }
+      ki++
+    }
+  }
+}

src/input/parser.ts

@@ -0,0 +1,102 @@
+// Extract only safe keyboard input from stdin data.
+// WHITELIST approach: only recognized keyboard sequences pass through.
+// Everything else (mouse events, terminal responses, OSC, DCS, etc.) is dropped.
+export function extractKeyboardInput(data: string): string {
+  let keyboard = ""
+  let i = 0
+
+  while (i < data.length) {
+    const c = data.charCodeAt(i)
+
+    // ESC sequences
+    if (c === 0x1b) {
+      if (i + 1 >= data.length) { keyboard += "\x1b"; i++; continue } // lone ESC = Escape key
+
+      const next = data[i + 1]
+
+      // OSC: \x1b] ... (terminated by BEL \x07 or ST \x1b\\) — drop entirely
+      if (next === "]") {
+        let j = i + 2
+        while (j < data.length) {
+          if (data[j] === "\x07") { j++; break }
+          if (data[j] === "\x1b" && j + 1 < data.length && data[j + 1] === "\\") { j += 2; break }
+          j++
+        }
+        i = j; continue
+      }
+
+      // DCS: \x1bP ... ST  |  APC: \x1b_ ... ST  |  PM: \x1b^ ... ST — drop entirely
+      if (next === "P" || next === "_" || next === "^") {
+        let j = i + 2
+        while (j < data.length) {
+          if (data[j] === "\x1b" && j + 1 < data.length && data[j + 1] === "\\") { j += 2; break }
+          j++
+        }
+        i = j; continue
+      }
+
+      // CSI: \x1b[
+      if (next === "[") {
+        let j = i + 2
+        // Consume parameter bytes (0x30-0x3F: digits, ;, <, =, >, ?)
+        while (j < data.length && data.charCodeAt(j) >= 0x30 && data.charCodeAt(j) <= 0x3F) j++
+        // Consume intermediate bytes (0x20-0x2F)
+        while (j < data.length && data.charCodeAt(j) >= 0x20 && data.charCodeAt(j) <= 0x2F) j++
+        // Final byte (0x40-0x7E)
+        if (j < data.length && data.charCodeAt(j) >= 0x40 && data.charCodeAt(j) <= 0x7E) {
+          const final = data[j]
+          // Legacy X10 mouse: \x1b[M followed by 3 raw bytes (btn+32, col+32, row+32)
+          if (final === "M" && j === i + 2) {
+            i = Math.min(j + 4, data.length); continue
+          }
+          // ONLY keep: arrows (A-D), Home (H), End (F), shift-tab (Z), function keys (~)
+          if ("ABCDHFZ~".includes(final)) {
+            keyboard += data.slice(i, j + 1)
+          }
+          i = j + 1; continue
+        }
+        // Incomplete/malformed CSI — drop
+        i = j; continue
+      }
+
+      // SS3: \x1bO + letter (F1-F4, keypad)
+      if (next === "O" && i + 2 < data.length) {
+        keyboard += data.slice(i, i + 3)
+        i += 3; continue
+      }
+
+      // \x1b` (ctrl+backtick) — keep as keyboard shortcut
+      if (next === "`") {
+        keyboard += "\x1b`"
+        i += 2; continue
+      }
+
+      // Any other \x1b+char — drop (unknown escape sequence)
+      i += 2; continue
+    }
+
+    // Regular character: printable ASCII, control chars, UTF-8 — keep
+    keyboard += data[i]
+    i++
+  }
+
+  return keyboard
+}
+
+// Parse SGR mouse events from raw data.
+export function extractMouseEvents(data: string): { btn: number, col: number, row: number, release: boolean, start: number, end: number }[] {
+  const events: { btn: number, col: number, row: number, release: boolean, start: number, end: number }[] = []
+  const re = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g
+  let m
+  while ((m = re.exec(data)) !== null) {
+    events.push({
+      btn: parseInt(m[1]),
+      col: parseInt(m[2]),
+      row: parseInt(m[3]),
+      release: m[4] === "m",
+      start: m.index,
+      end: m.index + m[0].length,
+    })
+  }
+  return events
+}

src/lib/state.ts

@@ -0,0 +1,50 @@
+import type { CliRenderer } from "@opentui/core"
+import type { BoxRenderable, TextRenderable, ScrollBoxRenderable } from "@opentui/core"
+import type { Project, DisplayRow } from "./types"
+import type { DirectGridRenderer } from "../components/direct-grid"
+import type { UsageSummary } from "../data/usage"
+import type { IdleSessionInfo } from "../data/monitor"
+
+export type ViewMode = "picker" | "grid"
+
+export const app = {
+  // Config
+  demoMode: Bun.argv.includes("--demo"),
+
+  // Data
+  projects: [] as Project[],
+  selectedProjects: new Set<string>(),
+  selectedSessions: new Set<string>(),
+  selectedBranches: new Map<string, string>(),
+  cursor: 0,
+  sortMode: 0,
+  sortLabels: ["recent", "name", "commit", "sessions"] as const,
+  sortedIndices: [] as number[],
+  displayRows: [] as DisplayRow[],
+
+  // Monitor
+  monitorInterval: null as ReturnType<typeof setInterval> | null,
+  prevBusySnapshot: new Map<string, number>(),
+  bottomPanelMode: "preview" as "preview" | "idle",
+  destroyed: false,
+  idleCursor: 0,
+  cachedIdleSessions: [] as IdleSessionInfo[],
+
+  // Grid mode
+  viewMode: "picker" as ViewMode,
+  directGrid: null as DirectGridRenderer | null,
+  mainBox: null as BoxRenderable | null,
+  rawStdoutWrite: null as unknown as (s: string) => boolean,
+
+  // UI refs (set during init)
+  renderer: null as unknown as CliRenderer,
+  headerText: null as unknown as TextRenderable,
+  colHeaderText: null as unknown as TextRenderable,
+  listBox: null as unknown as ScrollBoxRenderable,
+  bottomRow: null as unknown as BoxRenderable,
+  previewBox: null as unknown as BoxRenderable,
+  previewText: null as unknown as TextRenderable,
+  usageBox: null as unknown as BoxRenderable,
+  footerText: null as unknown as TextRenderable,
+  cachedUsage: null as UsageSummary | null,
+}

src/lib/theme.ts

@@ -0,0 +1,4 @@
+export const CURSOR_BG = "#283457"
+export const ACTIVE_BG = "#1a2e1a"
+export const ACCENT = "#7aa2f7"
+export const DIM_CLR = "#565f89"

src/ui/formatters.ts

@@ -0,0 +1,144 @@
+import {
+  t,
+  bold,
+  dim,
+  fg,
+  green,
+  yellow,
+  cyan,
+  magenta,
+} from "@opentui/core"
+import { app } from "../lib/state"
+import { ACCENT } from "../lib/theme"
+import { getSessionStatus } from "../data/monitor"
+import { timeAgo, formatSize, elapsedCompact } from "../lib/time"
+
+export function fmtSyncIndicator(ahead: number, behind: number): string {
+  if (ahead === -1 && behind === -1) return "✗"
+  if (ahead === 0 && behind === 0) return "✓"
+  const parts: string[] = []
+  if (ahead > 0) parts.push(`↑${ahead}`)
+  if (behind > 0) parts.push(`↓${behind}`)
+  return parts.join("")
+}
+
+export function fmtProjectRow(project: import("../lib/types").Project, isSelected: boolean) {
+  let activeDot: string
+  let activeTag: string
+  if (project.activeSessions > 0) {
+    if (project.busySessions > 0) {
+      activeDot = green("●")
+      const count = String(project.activeSessions)
+      activeTag = project.activeSessions > 1 ? yellow((count + " ").slice(0, 2)) : "  "
+    } else {
+      activeDot = yellow("◉")
+      const elapsed = elapsedCompact(project.lastActivityMs)
+      activeTag = elapsed ? dim((elapsed + "  ").slice(0, 2)) : "  "
+    }
+  } else {
+    activeDot = dim("○")
+    activeTag = "  "
+  }
+  const check = isSelected ? green("✓") : " "
+  const arrow = project.expanded ? "▼" : "▶"
+  const name =
+    project.name.length > 28 ? project.name.slice(0, 25) + "..." : project.name
+  const branch =
+    project.branch.length > 8
+      ? project.branch.slice(0, 7) + "…"
+      : project.branch
+
+  const sync = fmtSyncIndicator(project.ahead, project.behind)
+  const syncCol = sync === "✓" ? green(sync.padEnd(5))
+    : sync === "✗" ? dim(sync.padEnd(5))
+    : yellow(sync.padEnd(5))
+
+  const dirtyCol = project.dirty
+    ? yellow(project.dirty.padEnd(9))
+    : green("clean".padEnd(9))
+
+  const ca = project.claudeAgo
+  let claudeCol
+  if (ca === "never" || ca === "-") claudeCol = dim(ca.padEnd(9))
+  else if (ca.includes("m ago") || ca.includes("h ago") || ca === "just now")
+    claudeCol = cyan(ca.padEnd(9))
+  else if (ca.includes("d ago")) claudeCol = green(ca.padEnd(9))
+  else claudeCol = dim(ca.padEnd(9))
+
+  return t` ${activeDot}${activeTag}[${check}] ${dim(arrow)} ${name.padEnd(28)} ${magenta(branch.padEnd(9))}${syncCol}${dim(
+    (project.commitAge || "-").padEnd(10)
+  )}${(project.commitMsg || "-").padEnd(22)}${dirtyCol}${claudeCol}${dim(
+    String(project.sessionCount).padStart(3)
+  )} ${dim(String(project.totalMessages).padStart(5))} ${dim(project.tags)}`
+}
+
+export function fmtSessionRow(
+  projectIdx: number,
+  sessionIdx: number,
+  isSelected: boolean,
+  isLastSession: boolean
+) {
+  const project = app.projects[projectIdx]
+  const session = project.sessions![sessionIdx]
+  const check = isSelected ? green("✓") : " "
+  const prefix = isLastSession ? "│ " : "├─"
+  const title =
+    session.title.length > 55
+      ? session.title.slice(0, 52) + "..."
+      : session.title
+  const age = timeAgo(session.timestamp)
+  const size = formatSize(session.sizeBytes)
+
+  const status = getSessionStatus(project.path, session.id)
+
+  const promptText = session.lastUserPrompt
+    ? session.lastUserPrompt.length > 60
+      ? session.lastUserPrompt.slice(0, 57) + "..."
+      : session.lastUserPrompt
+    : "(no text)"
+  const responseText = session.lastAssistantMsg
+    ? session.lastAssistantMsg.length > 60
+      ? session.lastAssistantMsg.slice(0, 57) + "..."
+      : session.lastAssistantMsg
+    : "(no text response)"
+
+  if (status === "busy") {
+    return t`    ${green("●")} ${dim(prefix)} [${check}] ${dim(age.padEnd(9))} ${dim(
+      size.padEnd(7)
+    )} ${fg(ACCENT)('"' + title + '"')} ${green("running")}
+      ${dim("│")}     ${dim("You:")} ${fg(ACCENT)('"' + promptText + '"')}
+      ${dim("│")}     ${dim("Claude:")} ${fg(ACCENT)('"' + responseText + '"')}`
+  }
+  if (status === "idle") {
+    return t`    ${yellow("◉")} ${dim(prefix)} [${check}] ${dim(age.padEnd(9))} ${dim(
+      size.padEnd(7)
+    )} ${fg(ACCENT)('"' + title + '"')} ${yellow("idle")}
+      ${dim("│")}     ${dim("You:")} ${fg(ACCENT)('"' + promptText + '"')}
+      ${dim("│")}     ${dim("Claude:")} ${fg(ACCENT)('"' + responseText + '"')}`
+  }
+  return t`      ${dim(prefix)} [${check}] ${dim(age.padEnd(9))} ${dim(
+    size.padEnd(7)
+  )} ${fg(ACCENT)('"' + title + '"')}
+      ${dim("│")}     ${dim("You:")} ${fg(ACCENT)('"' + promptText + '"')}
+      ${dim("│")}     ${dim("Claude:")} ${fg(ACCENT)('"' + responseText + '"')}`
+}
+
+export function fmtNewSessionRow(projectIdx: number, isSelected: boolean) {
+  const check = isSelected ? green("✓") : " "
+  return t`      ${dim("└─")} [${check}] ${green("+ New session")}`
+}
+
+export function fmtBranchRow(projectIdx: number, branchName: string, isSelected: boolean) {
+  const project = app.projects[projectIdx]
+  const br = project.branches?.find(b => b.name === branchName)
+  if (!br) return t`      ${dim("├─")} ${branchName}`
+
+  const check = isSelected ? green("✓") : " "
+  const sync = fmtSyncIndicator(br.ahead, br.behind)
+  const syncCol = sync === "✓" ? green(sync)
+    : sync === "✗" ? dim(sync)
+    : yellow(sync)
+  const msg = br.lastCommitMsg.length > 40 ? br.lastCommitMsg.slice(0, 37) + "..." : br.lastCommitMsg
+
+  return t`      ${dim("├─")} [${check}] ${magenta(branchName.padEnd(18))} ${syncCol} ${dim(br.lastCommitAge.padEnd(9))} ${dim(msg)}`
+}

src/ui/panels.ts

@@ -0,0 +1,321 @@
+import {
+  Box,
+  Text,
+  t,
+  bold,
+  dim,
+  fg,
+  green,
+  yellow,
+  cyan,
+  magenta,
+} from "@opentui/core"
+import { app } from "../lib/state"
+import { CURSOR_BG, ACTIVE_BG, ACCENT, DIM_CLR } from "../lib/theme"
+import { getSessionStatus, getIdleSessions } from "../data/monitor"
+import { getUsageSummary, formatCost, formatWindow, makeBar, pct, PLAN_LIMITS } from "../data/usage"
+import { timeAgo, formatSize, elapsedCompact } from "../lib/time"
+import { fmtProjectRow, fmtSessionRow, fmtNewSessionRow, fmtBranchRow, fmtSyncIndicator } from "./formatters"
+
+export function rebuildDisplayRows() {
+  app.displayRows = []
+  for (const idx of app.sortedIndices) {
+    const project = app.projects[idx]
+    app.displayRows.push({ type: "project", projectIndex: idx })
+    if (project.expanded) {
+      if (project.branches) {
+        for (const br of project.branches) {
+          if (!br.isCurrent) {
+            app.displayRows.push({ type: "branch", projectIndex: idx, branchName: br.name })
+          }
+        }
+      }
+      if (project.sessions) {
+        for (let si = 0; si < project.sessions.length; si++) {
+          app.displayRows.push({ type: "session", projectIndex: idx, sessionIndex: si })
+        }
+      }
+      app.displayRows.push({ type: "new-session", projectIndex: idx })
+    }
+  }
+}
+
+export function applySortMode() {
+  const indices = Array.from(app.projects.keys())
+  switch (app.sortMode) {
+    case 0:
+      app.sortedIndices = indices
+      break
+    case 1:
+      app.sortedIndices = indices.sort((a, b) =>
+        app.projects[a].name.localeCompare(app.projects[b].name)
+      )
+      break
+    case 2:
+      app.sortedIndices = indices.sort(
+        (a, b) => (app.projects[b].commitEpoch || 0) - (app.projects[a].commitEpoch || 0)
+      )
+      break
+    case 3:
+      app.sortedIndices = indices.sort(
+        (a, b) => app.projects[b].sessionCount - app.projects[a].sessionCount
+      )
+      break
+  }
+  rebuildDisplayRows()
+}
+
+export function updateHeader() {
+  const total = app.selectedProjects.size + app.selectedSessions.size
+  const branchNote = app.selectedBranches.size > 0 ? ` (${app.selectedBranches.size} branch switch)` : ""
+  const modeLabel = app.demoMode ? " [DEMO]" : ""
+  const activeCount = app.projects.reduce((sum, p) => sum + (p.activeSessions > 0 ? 1 : 0), 0)
+  const busyCount = app.projects.reduce((sum, p) => sum + (p.busySessions > 0 ? 1 : 0), 0)
+  const idleCount = activeCount - busyCount
+  if (activeCount > 0) {
+    app.headerText.content = t`  ${bold("cladm")}${yellow(modeLabel)} — ${String(total)} selected${branchNote}   ${dim(
+      `sort: ${app.sortLabels[app.sortMode]} │ ${app.projects.length} projects`
+    )} │ ${green(`${busyCount} busy`)} ${yellow(`${idleCount} idle`)}`
+  } else {
+    app.headerText.content = t`  ${bold("cladm")}${yellow(modeLabel)} — ${String(total)} selected${branchNote}   ${dim(
+      `sort: ${app.sortLabels[app.sortMode]} │ ${app.projects.length} projects`
+    )}`
+  }
+}
+
+export function updateColumnHeaders() {
+  const cols = `    ${"PROJECT".padEnd(30)} ${"BRANCH".padEnd(9)}${"SYNC".padEnd(5)}${"COMMIT".padEnd(10)}${"MESSAGE".padEnd(22)}${"DIRTY".padEnd(9)}${"LAST USE".padEnd(9)}${"SES".padStart(3)} ${"MSGS".padStart(5)} STACK`
+  app.colHeaderText.content = t`  ${dim(cols)}`
+}
+
+function addIdleRow(s: { idleSinceMs: number; projectName: string; sessionTitle: string; lastPrompt: string; lastResponse: string }, isCursor: boolean) {
+  const elapsed = (elapsedCompact(s.idleSinceMs) || "<5s").padEnd(6)
+  const name = s.projectName.length > 20 ? s.projectName.slice(0, 17) + "..." : s.projectName
+  const title = s.sessionTitle.length > 50 ? s.sessionTitle.slice(0, 47) + "..." : s.sessionTitle
+  const prompt = s.lastPrompt
+    ? s.lastPrompt.length > 60 ? s.lastPrompt.slice(0, 57) + "..." : s.lastPrompt
+    : "(no text)"
+  const response = s.lastResponse
+    ? s.lastResponse.length > 60 ? s.lastResponse.slice(0, 57) + "..." : s.lastResponse
+    : "(no response)"
+  const pointer = isCursor ? "▸" : " "
+  app.previewBox.add(Text({ content: t`  ${yellow("◉")} ${isCursor ? cyan(pointer) : dim(pointer)} ${dim(elapsed)}${bold(name)}  ${fg(ACCENT)('"' + title + '"')}`, width: "100%", height: 1 }))
+  app.previewBox.add(Text({ content: t`       ${dim("│")}  ${dim("You:")} ${fg(ACCENT)('"' + prompt + '"')}`, width: "100%", height: 1 }))
+  app.previewBox.add(Text({ content: t`       ${dim("│")}  ${dim("Claude:")} ${fg(ACCENT)('"' + response + '"')}`, width: "100%", height: 1 }))
+}
+
+export function updateIdlePanel() {
+  app.cachedIdleSessions = getIdleSessions(app.projects)
+  const n = app.cachedIdleSessions.length
+  app.previewBox.title = ` Idle Sessions (${n}) — enter to focus `
+  for (const child of app.previewBox.getChildren()) app.previewBox.remove(child.id)
+  if (n === 0) {
+    app.idleCursor = 0
+    app.previewBox.add(Text({ content: t`${dim("  No idle sessions")}`, width: "100%", height: 1 }))
+    return
+  }
+  if (app.idleCursor >= n) app.idleCursor = n - 1
+  const show = app.cachedIdleSessions.slice(0, 3)
+  for (let i = 0; i < show.length; i++) {
+    addIdleRow(show[i], app.idleCursor === i)
+  }
+  if (n > 3) {
+    app.previewBox.add(Text({ content: t`    ${dim(`+${n - 3} more`)}`, width: "100%", height: 1 }))
+  }
+}
+
+export function updateBottomPanel() {
+  if (app.bottomPanelMode === "idle") {
+    app.bottomRow.height = 14
+    updateIdlePanel()
+  } else {
+    for (const child of app.previewBox.getChildren()) app.previewBox.remove(child.id)
+    app.previewBox.add(app.previewText)
+    app.bottomRow.height = 10
+    app.previewBox.title = " Preview "
+    updatePreview()
+  }
+}
+
+function usageBarColor(p: number) {
+  return p >= 80 ? yellow : p >= 50 ? cyan : green
+}
+
+export function updateUsagePanel() {
+  if (app.destroyed) return
+  for (const child of app.usageBox.getChildren()) app.usageBox.remove(child.id)
+
+  if (!app.cachedUsage) {
+    app.usageBox.title = " Usage "
+    app.usageBox.add(Text({ content: t`${dim("Loading...")}`, width: "100%", height: 1 }))
+    return
+  }
+
+  const u = app.cachedUsage
+  const BAR_W = 18
+
+  const sPct = pct(u.totalCost, PLAN_LIMITS.session)
+  const sBar = makeBar(u.totalCost, PLAN_LIMITS.session, BAR_W)
+  const sReset = u.sessionResetMs > 0 ? formatWindow(u.sessionResetMs) : ""
+  app.usageBox.title = " Usage "
+  app.usageBox.add(Text({ content: t`${bold("Session")}`, width: "100%", height: 1 }))
+  app.usageBox.add(Text({ content: t`${usageBarColor(sPct)(sBar)} ${bold(String(sPct) + "%")}`, width: "100%", height: 1 }))
+  app.usageBox.add(Text({ content: t`${dim(sReset ? "resets " + sReset : "")} ${dim(formatCost(u.costPerHour) + "/h")}`, width: "100%", height: 1 }))
+
+  const wPct = pct(u.weekTotal, PLAN_LIMITS.weeklyAll)
+  const wBar = makeBar(u.weekTotal, PLAN_LIMITS.weeklyAll, BAR_W)
+  app.usageBox.add(Text({ content: t`${bold("All models")} ${dim(formatCost(u.weekTotal))}`, width: "100%", height: 1 }))
+  app.usageBox.add(Text({ content: t`${usageBarColor(wPct)(wBar)} ${bold(String(wPct) + "%")}`, width: "100%", height: 1 }))
+
+  const snPct = pct(u.weeklySonnetCost, PLAN_LIMITS.weeklySonnet)
+  const snBar = makeBar(u.weeklySonnetCost, PLAN_LIMITS.weeklySonnet, BAR_W)
+  app.usageBox.add(Text({ content: t`${bold("Sonnet")} ${dim(formatCost(u.weeklySonnetCost))}`, width: "100%", height: 1 }))
+  app.usageBox.add(Text({ content: t`${usageBarColor(snPct)(snBar)} ${bold(String(snPct) + "%")}`, width: "100%", height: 1 }))
+
+  const monthLabel = new Date().toLocaleString("en", { month: "short" })
+  app.usageBox.add(Text({ content: t`${bold(monthLabel + " total")} ${dim(formatCost(u.monthlyTotalCost))}`, width: "100%", height: 1 }))
+  app.usageBox.add(Text({ content: t`${dim(formatCost(u.costPerHour) + "/h avg · " + u.totalRequests + " reqs")}`, width: "100%", height: 1 }))
+
+  app.renderer.requestRender()
+}
+
+export function updateFooter() {
+  if (app.bottomPanelMode === "idle" && app.cachedIdleSessions.length > 0) {
+    app.footerText.content = t`  ${dim(
+      "↑↓ nav │ tab/shift-tab idle select │ enter focus │ i preview │ space select │ a all │ n none │ s sort │ q quit"
+    )}`
+  } else {
+    app.footerText.content = t`  ${dim(
+      "↑↓ nav │ space select │ → expand │ ← collapse │ f folder │ g go to │ i idle │ a all │ n none │ s sort │ enter grid │ o external │ q quit"
+    )}`
+  }
+}
+
+export function updatePreview() {
+  if (app.cursor >= app.displayRows.length) {
+    app.previewText.content = t`${dim("  No selection")}`
+    return
+  }
+
+  const row = app.displayRows[app.cursor]
+  const project = app.projects[row.projectIndex]
+
+  if (row.type === "project") {
+    app.previewText.content = t`  ${bold(project.name)}  ${dim(project.path)}
+  ${dim("Branch:")} ${magenta(project.branch)}  ${dim("Commit:")} ${
+      project.commitAge || "-"
+    } — ${project.commitMsg || "-"}
+  ${dim("Status:")} ${project.dirty ? yellow(project.dirty) : green("clean")}  ${dim(
+      "Sessions:"
+    )} ${String(project.sessionCount)}  ${dim("Msgs:")} ${String(project.totalMessages)}  ${dim(
+      "Stack:"
+    )} ${project.tags || "-"}`
+  } else if (row.type === "session" && project.sessions) {
+    const s = project.sessions[row.sessionIndex!]
+    const sStatus = getSessionStatus(project.path, s.id)
+    const sLabel = sStatus === "busy" ? green(" ● running") : sStatus === "idle" ? yellow(" ◉ idle") : ""
+    app.previewText.content = t`  ${bold("Session:")} ${s.title}${sLabel}
+  ${dim(timeAgo(s.timestamp))} · ${dim(formatSize(s.sizeBytes))} · ${magenta(s.branch || "-")}
+  ${dim("Last prompt:")} ${s.lastUserPrompt || dim("(no text)")}
+  ${dim("Claude:")} ${s.lastAssistantMsg || dim("(no text response)")}`
+  } else if (row.type === "branch" && project.branches) {
+    const br = project.branches.find(b => b.name === row.branchName)
+    if (br) {
+      const sync = fmtSyncIndicator(br.ahead, br.behind)
+      const selBranch = app.selectedBranches.get(project.path)
+      const selNote = selBranch === br.name
+        ? t`  ${green("Selected")} — will launch with: ${dim(`-p "switch to branch ${br.name}, stash if needed"`)}`
+        : t`  ${dim("Press space to select this branch for launch")}`
+      app.previewText.content = t`  ${bold("Branch:")} ${magenta(br.name)}  ${dim("Sync:")} ${sync}
+  ${dim("Last commit:")} ${br.lastCommitAge} — ${br.lastCommitMsg}
+${selNote}`
+    }
+  } else {
+    app.previewText.content = t`  ${green("Start a new Claude session")} in ${bold(project.name)}
+  ${dim(project.path)}`
+  }
+}
+
+export function rebuildList() {
+  for (const child of app.listBox.getChildren()) {
+    app.listBox.remove(child.id)
+  }
+
+  for (let i = 0; i < app.displayRows.length; i++) {
+    const row = app.displayRows[i]
+    const isCursor = i === app.cursor
+    const project = app.projects[row.projectIndex]
+
+    let content: ReturnType<typeof t>
+    let rowHeight = 1
+    if (row.type === "project") {
+      const isSel = app.selectedProjects.has(project.path)
+      content = fmtProjectRow(project, isSel)
+    } else if (row.type === "session") {
+      const session = project.sessions![row.sessionIndex!]
+      const isSel = app.selectedSessions.has(session.id)
+      content = fmtSessionRow(row.projectIndex, row.sessionIndex!, isSel, false)
+      rowHeight = 3
+    } else if (row.type === "branch") {
+      const isSel = app.selectedBranches.get(project.path) === row.branchName
+      content = fmtBranchRow(row.projectIndex, row.branchName!, isSel)
+    } else {
+      const isSel = app.selectedProjects.has(project.path)
+      content = fmtNewSessionRow(row.projectIndex, isSel)
+    }
+
+    const isActiveProject = row.type === "project" && project.activeSessions > 0
+    const isActiveSession = row.type === "session" && getSessionStatus(project.path, project.sessions![row.sessionIndex!].id) !== null
+    const bgColor = isCursor ? CURSOR_BG : (isActiveProject || isActiveSession) ? ACTIVE_BG : undefined
+
+    if (bgColor) {
+      app.listBox.add(
+        Box(
+          {
+            backgroundColor: bgColor,
+            shouldFill: true,
+            width: "100%",
+            height: rowHeight,
+          },
+          Text({ content })
+        )
+      )
+    } else {
+      app.listBox.add(Text({ content, width: "100%", height: rowHeight }))
+    }
+  }
+
+  ensureCursorVisible()
+  app.renderer.requestRender()
+}
+
+export function ensureCursorVisible() {
+  const vpH = app.listBox.viewport.height
+  if (vpH <= 0) return
+
+  let cursorY = 0
+  let cursorH = 1
+  for (let i = 0; i < app.displayRows.length; i++) {
+    const h = app.displayRows[i].type === "session" ? 3 : 1
+    if (i === app.cursor) {
+      cursorH = h
+      break
+    }
+    cursorY += h
+  }
+
+  const top = app.listBox.scrollTop
+  if (cursorY < top) {
+    app.listBox.scrollTo(cursorY)
+  } else if (cursorY + cursorH > top + vpH) {
+    app.listBox.scrollTo(cursorY + cursorH - vpH)
+  }
+}
+
+export function updateAll() {
+  if (app.destroyed) return
+  updateHeader()
+  rebuildList()
+  updateBottomPanel()
+  updateFooter()
+}