@phenx-inc/ctlsurf 0.1.0

package/src/main/tui.ts

@@ -0,0 +1,366 @@
+/**
+ * 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.
+ */
+
+const ESC = '\x1b'
+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 BG_MODAL = `${CSI}48;2;31;35;53m`    // #1f2335
+const BG_SELECTED = `${CSI}48;2;42;43;61m` // #2a2b3d
+const RESET = `${CSI}0m`
+
+export interface TuiState {
+  agentName: string
+  cwd: string
+  wsStatus: string
+  workerId: string | null
+  mode: string
+}
+
+export class Tui {
+  private rows: number = 0
+  private cols: number = 0
+  private state: TuiState = {
+    agentName: '',
+    cwd: '',
+    wsStatus: 'disconnected',
+    workerId: null,
+    mode: 'terminal',
+  }
+
+  constructor() {
+    this.rows = process.stdout.rows || 24
+    this.cols = process.stdout.columns || 80
+  }
+
+  /**
+   * Initialize the TUI: alternate screen, hide cursor reporting, set scroll region
+   */
+  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()
+  }
+
+  /**
+   * 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`)
+  }
+
+  /**
+   * Handle terminal resize
+   */
+  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)
+   */
+  getPtySize(): { cols: number; rows: number } {
+    return {
+      cols: this.cols,
+      rows: Math.max(1, this.rows - 2),
+    }
+  }
+
+  /**
+   * Update state and redraw bars
+   */
+  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
+  }
+
+  /**
+   * Write PTY output to the scroll region.
+   * Cursor is assumed to be in the PTY area already.
+   */
+  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`)
+  }
+
+  /**
+   * Build a title string from current state for the terminal tab.
+   */
+  updateTerminalTitle(): void {
+    const { agentName, wsStatus, cwd } = this.state
+    const displayCwd = this.shortenPath(cwd)
+    const statusIcon = {
+      connected: '\u25CF',
+      connecting: '\u25CB',
+      disconnected: '\u25CB',
+      pending_approval: '\u25CB',
+      no_project: '\u25CB',
+    }[wsStatus] || '\u25CB'
+    const statusLabel = {
+      connected: 'Connected',
+      connecting: 'Connecting...',
+      disconnected: 'Disconnected',
+      pending_approval: 'Pending',
+      no_project: 'No Project',
+    }[wsStatus] || wsStatus
+
+    this.setTerminalTitle(`ctlsurf \u00B7 ${agentName} \u00B7 ${statusIcon} ${statusLabel} \u00B7 ${displayCwd}`)
+  }
+
+  /**
+   * Show an interactive agent picker modal.
+   * Returns a promise that resolves with the selected agent index.
+   */
+  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 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
+      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
+          const isSelected = i === selected
+          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 content = `${pointer}${nameFg}${nameStr}${descStr}`
+          const contentLen = (isSelected ? 2 : 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 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)
+      }
+      process.stdin.resume()
+
+      const onKey = (data: Buffer) => {
+        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
+          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())
+      }
+
+      process.stdin.on('data', onKey)
+    })
+  }
+
+  // ─── Internal ───────────────────────────────────
+
+  private write(data: string): void {
+    try {
+      process.stdout.write(data)
+    } catch { /* EPIPE safe */ }
+  }
+
+  private setScrollRegion(): void {
+    // Scroll region from line 2 to line (rows - 1)
+    this.write(`${CSI}2;${this.rows - 1}r`)
+  }
+
+  private moveToPtyArea(): void {
+    // Move cursor to top of PTY area (line 2)
+    this.write(`${CSI}2;1H`)
+  }
+
+  private drawTitleBar(): void {
+    const { agentName, cwd, wsStatus } = this.state
+    // Move to line 1
+    this.write(`${CSI}1;1H`)
+    // Clear line and draw
+    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,
+      disconnected: FG_RED,
+      pending_approval: FG_YELLOW,
+      no_project: FG_DIM,
+    }[wsStatus] || FG_DIM
+
+    const statusDot = `${statusColor}\u25CF${RESET}${BG_BAR}`
+    const statusLabel = {
+      connected: 'Connected',
+      connecting: 'Connecting...',
+      disconnected: 'Disconnected',
+      pending_approval: 'Pending Approval',
+      no_project: 'No Project',
+    }[wsStatus] || wsStatus
+
+    const displayCwd = this.shortenPath(cwd)
+    const left = ` ${statusDot} ${FG_DIM}${statusLabel}${RESET}${BG_BAR}`
+    const right = `${FG_DIM}Ctrl+\\ exit${RESET}${BG_BAR} ${FG_DIM}${displayCwd} ${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 shortenPath(p: string): string {
+    if (!p) return ''
+    const home = process.env.HOME || ''
+    if (home && p.startsWith(home)) {
+      return '~' + p.slice(home.length)
+    }
+    return p
+  }
+
+  private visibleLen(s: string): number {
+    // Strip ANSI codes to get visible length
+    return s.replace(/\x1b\[[^m]*m/g, '').length
+  }
+}

package/src/main/workerWs.ts

@@ -0,0 +1,312 @@
+import os from 'os'
+import crypto from 'crypto'
+
+function log(...args: unknown[]): void {
+  try { console.log(...args) } catch { /* EPIPE safe */ }
+}
+
+const HEARTBEAT_INTERVAL_MS = 30_000
+const RECONNECT_DELAY_MS = 5_000
+const MAX_RECONNECT_DELAY_MS = 60_000
+
+export interface WorkerRegistration {
+  machine: string
+  cwd: string
+  repo_url?: string
+  agent: string
+  fingerprint: string
+}
+
+export interface WorkerWsEvents {
+  onStatusChange: (status: WorkerWsStatus) => void
+  onMessage: (message: IncomingMessage) => void
+  onRegistered: (data: { worker_id: string; folder_id: string | null; status: string; pending_messages?: IncomingMessage[] }) => void
+  onTerminalInput?: (data: string) => void
+}
+
+export interface IncomingMessage {
+  id: string
+  type: string
+  content: string
+  metadata?: Record<string, unknown> | null
+  parent_id?: string | null
+}
+
+export type WorkerWsStatus = 'disconnected' | 'connecting' | 'connected' | 'pending_approval'
+
+export class WorkerWsClient {
+  private ws: WebSocket | null = null
+  private apiKey: string | null = null
+  private baseUrl: string
+  private events: WorkerWsEvents
+  private heartbeatTimer: ReturnType<typeof setInterval> | null = null
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  private reconnectDelay = RECONNECT_DELAY_MS
+  private registration: WorkerRegistration | null = null
+  private workerId: string | null = null
+  private _status: WorkerWsStatus = 'disconnected'
+  private shouldReconnect = false
+  private fingerprint: string
+
+  constructor(events: WorkerWsEvents, baseUrl?: string) {
+    this.events = events
+    this.baseUrl = baseUrl || 'wss://app.ctlsurf.com'
+    // Generate a stable machine fingerprint
+    this.fingerprint = this.generateFingerprint()
+  }
+
+  get status(): WorkerWsStatus {
+    return this._status
+  }
+
+  get currentWorkerId(): string | null {
+    return this.workerId
+  }
+
+  setApiKey(key: string | null): void {
+    this.apiKey = key
+  }
+
+  setBaseUrl(url: string): void {
+    this.baseUrl = url
+  }
+
+  private generateFingerprint(): string {
+    const data = `${os.hostname()}:${os.userInfo().username}:${os.platform()}:${os.arch()}`
+    return crypto.createHash('sha256').update(data).digest('hex').slice(0, 32)
+  }
+
+  private setStatus(status: WorkerWsStatus): void {
+    if (this._status !== status) {
+      this._status = status
+      this.events.onStatusChange(status)
+    }
+  }
+
+  connect(registration: WorkerRegistration): void {
+    this.registration = { ...registration, fingerprint: this.fingerprint }
+    this.shouldReconnect = true
+    this.doConnect()
+  }
+
+  disconnect(): void {
+    this.shouldReconnect = false
+    this.clearTimers()
+    if (this.ws) {
+      const oldWs = this.ws
+      this.ws = null
+      // Remove handlers before closing to prevent stale onclose from firing
+      oldWs.onopen = null
+      oldWs.onmessage = null
+      oldWs.onclose = null
+      oldWs.onerror = null
+      try { oldWs.close(1000, 'client disconnect') } catch { /* ignore */ }
+    }
+    this.setStatus('disconnected')
+  }
+
+  sendResponse(parentId: string, content: string, metadata?: Record<string, unknown>): void {
+    this.send({
+      type: 'response',
+      parent_id: parentId,
+      content,
+      metadata,
+    })
+  }
+
+  sendStatusUpdate(status: string): void {
+    this.send({ type: 'status_update', status })
+  }
+
+  sendAck(messageId: string): void {
+    this.send({ type: 'ack', message_id: messageId })
+  }
+
+  sendTerminalData(data: string): void {
+    this.send({ type: 'terminal_stream', data })
+  }
+
+  sendTerminalResize(cols: number, rows: number): void {
+    this.send({ type: 'terminal_resize', cols, rows })
+  }
+
+  private doConnect(): void {
+    if (!this.apiKey || !this.registration) {
+      log('[worker-ws] No API key or registration, skipping connect')
+      return
+    }
+
+    this.clearTimers()
+    if (this.ws) {
+      const oldWs = this.ws
+      this.ws = null
+      oldWs.onopen = null
+      oldWs.onmessage = null
+      oldWs.onclose = null
+      oldWs.onerror = null
+      try { oldWs.close() } catch { /* ignore */ }
+      // Let the old connection fully close before opening a new one
+      setTimeout(() => this.doConnectNow(), 500)
+      return
+    }
+
+    this.doConnectNow()
+  }
+
+  private doConnectNow(): void {
+    if (!this.apiKey || !this.registration) return
+    if (!this.shouldReconnect) {
+      log('[worker-ws] shouldReconnect is false, aborting connect')
+      return
+    }
+
+    this.setStatus('connecting')
+
+    // Use ws:// for localhost, wss:// for remote
+    const wsBase = this.baseUrl.replace(/^http/, 'ws')
+    const url = `${wsBase}/api/ws/worker?token=${encodeURIComponent(this.apiKey)}`
+
+    log(`[worker-ws] Connecting to ${url.replace(/token=.*/, 'token=***')}...`)
+
+    try {
+      this.ws = new WebSocket(url)
+    } catch (err) {
+      log('[worker-ws] Failed to create WebSocket:', err)
+      this.scheduleReconnect()
+      return
+    }
+
+    this.ws.onopen = () => {
+      log('[worker-ws] Connected, sending register')
+      this.reconnectDelay = RECONNECT_DELAY_MS // Reset backoff
+      this.send({
+        type: 'register',
+        ...this.registration,
+      })
+      this.startHeartbeat()
+    }
+
+    this.ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(String(event.data))
+        this.handleMessage(data)
+      } catch (err) {
+        log('[worker-ws] Failed to parse message:', err)
+      }
+    }
+
+    this.ws.onclose = (event) => {
+      log(`[worker-ws] Disconnected: ${event.code} ${event.reason}`)
+      this.ws = null
+      this.clearHeartbeat()
+      this.setStatus('disconnected')
+      if (this.shouldReconnect) {
+        this.scheduleReconnect()
+      }
+    }
+
+    this.ws.onerror = () => {
+      log('[worker-ws] WebSocket error')
+    }
+  }
+
+  private handleMessage(data: Record<string, unknown>): void {
+    const msgType = data.type as string
+
+    switch (msgType) {
+      case 'registered': {
+        this.workerId = data.worker_id as string
+        const workerStatus = data.status as string
+        console.log(`[worker-ws] Registered as ${this.workerId}, status: ${workerStatus}`)
+
+        if (workerStatus === 'pending_approval') {
+          this.setStatus('pending_approval')
+        } else {
+          this.setStatus('connected')
+        }
+
+        const pendingMessages = (data.pending_messages || []) as IncomingMessage[]
+        this.events.onRegistered({
+          worker_id: this.workerId,
+          folder_id: data.folder_id as string | null,
+          status: workerStatus,
+          pending_messages: pendingMessages,
+        })
+
+        // Deliver pending messages
+        for (const msg of pendingMessages) {
+          this.events.onMessage(msg)
+        }
+        break
+      }
+
+      case 'approved': {
+        log('[worker-ws] Worker approved!')
+        this.setStatus('connected')
+        break
+      }
+
+      case 'message': {
+        const msg = data.message as IncomingMessage
+        if (msg) {
+          console.log(`[worker-ws] Received message: ${msg.id}`)
+          this.events.onMessage(msg)
+        }
+        break
+      }
+
+      case 'terminal_input': {
+        const inputData = data.data as string
+        if (inputData && this.events.onTerminalInput) {
+          this.events.onTerminalInput(inputData)
+        }
+        break
+      }
+
+      case 'heartbeat_ack':
+        break
+
+      default:
+        console.log(`[worker-ws] Unknown message type: ${msgType}`)
+    }
+  }
+
+  private send(data: Record<string, unknown>): void {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(data))
+    }
+  }
+
+
+  private startHeartbeat(): void {
+    this.clearHeartbeat()
+    this.heartbeatTimer = setInterval(() => {
+      this.send({ type: 'heartbeat' })
+    }, HEARTBEAT_INTERVAL_MS)
+  }
+
+  private clearHeartbeat(): void {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer)
+      this.heartbeatTimer = null
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (!this.shouldReconnect) return
+    console.log(`[worker-ws] Reconnecting in ${this.reconnectDelay / 1000}s...`)
+    this.reconnectTimer = setTimeout(() => {
+      this.doConnect()
+    }, this.reconnectDelay)
+    // Exponential backoff
+    this.reconnectDelay = Math.min(this.reconnectDelay * 2, MAX_RECONNECT_DELAY_MS)
+  }
+
+  private clearTimers(): void {
+    this.clearHeartbeat()
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+  }
+}