@phenx-inc/ctlsurf 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {

package/src/main/tui.ts

@@ -140,6 +140,10 @@ export class Tui {
       let selected = 0
       let trackTime = options.initialTrackTime
       let logChat = options.initialLogChat
+      // Navigable items: agent rows, then Track time and Log chat checkbox rows
+      const trackIdx = agents.length
+      const logIdx = agents.length + 1
+      const itemCount = agents.length + 2
       const modalWidth = 44
       // +4 for borders/title/sep, +3 for separator + track-time row + log-chat row
       const modalHeight = agents.length + 4 + 3
@@ -190,26 +194,27 @@ export class Tui {
         const sepRow = startRow + 3 + agents.length
         this.write(`${CSI}${sepRow};${startCol}H${BG_MODAL}${FG_DIM}${innerSep}${RESET}`)
 
+        const drawCheckboxRow = (row: number, label: string, checked: boolean, isSelected: boolean) => {
+          const bg = isSelected ? BG_SELECTED : BG_MODAL
+          const pointer = isSelected ? `${FG_ACCENT}▸ ` : '  '
+          const checkbox = checked ? `${FG_GREEN}[✓]${RESET}${bg}` : `${FG_DIM}[ ]${RESET}${bg}`
+          const labelFg = checked || isSelected ? FG_WHITE : FG_DIM
+          const content = `${pointer}${checkbox} ${labelFg}${label}${RESET}${bg}`
+          const contentLen = 2 + 3 + 1 + label.length
+          const pad = ' '.repeat(Math.max(0, modalWidth - 2 - contentLen))
+          this.write(`${CSI}${row};${startCol}H${bg}${FG_DIM}│${RESET}${bg}${content}${pad}${RESET}${BG_MODAL}${FG_DIM}│${RESET}`)
+        }
+
         const trackRow = sepRow + 1
-        const checkbox = trackTime ? `${FG_GREEN}[✓]${RESET}${BG_MODAL}` : `${FG_DIM}[ ]${RESET}${BG_MODAL}`
-        const trackLabelFg = trackTime ? FG_WHITE : FG_DIM
-        const trackContent = `  ${checkbox} ${trackLabelFg}Track time${RESET}${BG_MODAL}`
-        const trackContentLen = 2 + 3 + 1 + 'Track time'.length
-        const trackPad = ' '.repeat(Math.max(0, modalWidth - 2 - trackContentLen))
-        this.write(`${CSI}${trackRow};${startCol}H${BG_MODAL}${FG_DIM}│${RESET}${BG_MODAL}${trackContent}${trackPad}${FG_DIM}│${RESET}`)
+        drawCheckboxRow(trackRow, 'Track time', trackTime, selected === trackIdx)
 
         const logRow = trackRow + 1
-        const logCheckbox = logChat ? `${FG_GREEN}[\u2713]${RESET}${BG_MODAL}` : `${FG_DIM}[ ]${RESET}${BG_MODAL}`
-        const logLabelFg = logChat ? FG_WHITE : FG_DIM
-        const logContent = `  ${logCheckbox} ${logLabelFg}Log chat${RESET}${BG_MODAL}`
-        const logContentLen = 2 + 3 + 1 + 'Log chat'.length
-        const logPad = ' '.repeat(Math.max(0, modalWidth - 2 - logContentLen))
-        this.write(`${CSI}${logRow};${startCol}H${BG_MODAL}${FG_DIM}\u2502${RESET}${BG_MODAL}${logContent}${logPad}${FG_DIM}\u2502${RESET}`)
+        drawCheckboxRow(logRow, 'Log chat', logChat, selected === logIdx)
 
         const botRow = logRow + 1
         this.write(`${CSI}${botRow};${startCol}H${BG_MODAL}${FG_DIM}${botBorder}${RESET}`)
 
-        const hint = '\u2191\u2193 nav \u00B7 Enter \u00B7 t track \u00B7 l log \u00B7 q quit'
+        const hint = '\u2191\u2193 nav \u00B7 Enter select \u00B7 Space toggle \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}`)
       }
@@ -224,11 +229,23 @@ export class Tui {
       const onKey = (data: Buffer) => {
         const key = data.toString()
 
+        const toggleSelected = (): boolean => {
+          if (selected === trackIdx) {
+            trackTime = !trackTime
+          } else if (selected === logIdx) {
+            logChat = !logChat
+          } else {
+            return false
+          }
+          drawModal()
+          return true
+        }
+
         if (key === '\x1b[A' || key === 'k') {
-          selected = (selected - 1 + agents.length) % agents.length
+          selected = (selected - 1 + itemCount) % itemCount
           drawModal()
         } else if (key === '\x1b[B' || key === 'j') {
-          selected = (selected + 1) % agents.length
+          selected = (selected + 1) % itemCount
           drawModal()
         } else if (key === 't' || key === 'T') {
           trackTime = !trackTime
@@ -236,9 +253,14 @@ export class Tui {
         } else if (key === 'l' || key === 'L') {
           logChat = !logChat
           drawModal()
+        } else if (key === ' ') {
+          toggleSelected()
         } else if (key === '\r' || key === '\n') {
-          cleanup()
-          resolve({ agentIdx: selected, trackTime, logChat })
+          // Enter on a checkbox row toggles it; on an agent row it confirms
+          if (!toggleSelected()) {
+            cleanup()
+            resolve({ agentIdx: selected, trackTime, logChat })
+          }
         } else if (key === 'q' || key === '\x1b' || key === '\x03') {
           cleanup()
           this.write(`${CSI}?25h`)