@phenx-inc/ctlsurf 0.5.0 → 0.5.2

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`)

package/src/preload/index.ts

@@ -129,6 +129,10 @@ const api = {
     pageUrl?: string;
     authenticated: boolean;
   }> => ipcRenderer.invoke('worker:getWebviewInfo'),
+  // Resolve a terminal-printed URL to an authenticated ctlsurf embed URL, or
+  // null if it isn't a ctlsurf link (caller opens those externally).
+  getEmbedUrl: (targetUrl: string): Promise<string | null> =>
+    ipcRenderer.invoke('worker:getEmbedUrl', targetUrl),
 
   onWorkerStatus: (callback: (status: string) => void) => {
     const listener = (_event: Electron.IpcRendererEvent, status: string) => callback(status)

package/src/renderer/App.tsx

@@ -59,6 +59,7 @@ declare global {
       getWebviewInfo: () => Promise<{
         frontendUrl: string; pageUrl?: string; authenticated: boolean;
       }>
+      getEmbedUrl: (targetUrl: string) => Promise<string | null>
       getWorkerStatus: () => Promise<string>
       getWorkerId: () => Promise<string | null>
       onWorkerStatus: (callback: (status: string) => void) => () => void
@@ -117,6 +118,11 @@ export default function App() {
   const [cwd, setCwd] = useState<string | null>(null)
   const [projectName, setProjectName] = useState<string | null>(null)
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
+  // A ctlsurf link clicked in the terminal: the authenticated URL to load in
+  // the ctlsurf panel. `n` bumps on every request so re-clicking the same URL
+  // still triggers a navigation.
+  const [ctlsurfNav, setCtlsurfNav] = useState<{ url: string; n: number } | null>(null)
+  const ctlsurfNavCounter = useRef(0)
 
   // Multi-tab state
   const [tabs, setTabs] = useState<TabInfo[]>(() => {
@@ -349,6 +355,20 @@ export default function App() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [togglePane])
 
+  // A ctlsurf link was clicked in the terminal — reveal the ctlsurf pane if
+  // hidden and hand the authenticated URL to the panel to load.
+  useEffect(() => {
+    const onOpen = (e: Event) => {
+      const url = (e as CustomEvent).detail?.url as string | undefined
+      if (!url) return
+      if (!findPaneIds(layout).includes('ctlsurf')) togglePane('ctlsurf')
+      ctlsurfNavCounter.current += 1
+      setCtlsurfNav({ url, n: ctlsurfNavCounter.current })
+    }
+    window.addEventListener('ctlsurf-open-url', onOpen)
+    return () => window.removeEventListener('ctlsurf-open-url', onOpen)
+  }, [layout, togglePane])
+
   // Build pane contents (always rendered, layout controls visibility)
   const panes: PaneContent[] = [
     { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
@@ -409,7 +429,7 @@ export default function App() {
         </div>
       ),
     },
-    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel /> },
+    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
   ]
 
   return (

package/src/renderer/components/CtlsurfPanel.tsx

@@ -1,9 +1,15 @@
 import { useRef, useEffect, useState } from 'react'
 
-export function CtlsurfPanel() {
+interface CtlsurfPanelProps {
+  // An authenticated ctlsurf URL to load (e.g. from a terminal link click).
+  // `n` bumps per request so repeat navigations to the same URL still apply.
+  navigate?: { url: string; n: number } | null
+}
+
+export function CtlsurfPanel({ navigate }: CtlsurfPanelProps) {
   const webviewRef = useRef<HTMLWebViewElement>(null)
   const [url, setUrl] = useState<string | null>(null)
-  const [key, setKey] = useState(0) // force remount on cwd change
+  const [key, setKey] = useState(0) // force remount on cwd change / navigation
 
   const loadUrl = async () => {
     try {
@@ -15,7 +21,17 @@ export function CtlsurfPanel() {
     }
   }
 
-  useEffect(() => { loadUrl() }, [])
+  // Default-load the project page on mount, unless a navigation is already
+  // queued (e.g. the pane was just revealed to show a clicked link).
+  useEffect(() => { if (!navigate?.url) loadUrl() }, [])
+
+  // Navigate to a specific authenticated URL when requested.
+  useEffect(() => {
+    if (navigate?.url) {
+      setUrl(navigate.url)
+      setKey(k => k + 1)
+    }
+  }, [navigate?.n])
 
   // Reload webview when cwd changes
   useEffect(() => {

package/src/renderer/components/TerminalPanel.tsx

@@ -22,6 +22,31 @@ function copySelectionAsEmailTable(terminal: Terminal): void {
   )
 }
 
+// Open a URL in the system browser, mirroring WebLinksAddon's safe default
+// (clear the opener so the new page can't reach back into this window).
+function openExternal(uri: string): void {
+  const win = window.open()
+  if (win) {
+    try { (win as { opener: unknown }).opener = null } catch { /* ignore */ }
+    win.location.href = uri
+  }
+}
+
+// Custom handler for links clicked in the terminal. ctlsurf page links are
+// routed into the embedded (authenticated) ctlsurf panel via a window event;
+// everything else opens in the default browser as before.
+function handleTerminalLink(_event: MouseEvent, uri: string): void {
+  window.worker.getEmbedUrl(uri)
+    .then((embedUrl) => {
+      if (embedUrl) {
+        window.dispatchEvent(new CustomEvent('ctlsurf-open-url', { detail: { url: embedUrl } }))
+      } else {
+        openExternal(uri)
+      }
+    })
+    .catch(() => openExternal(uri))
+}
+
 interface AgentConfig {
   id: string
   name: string
@@ -105,7 +130,7 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
 
   const fitAddon = new FitAddon()
   terminal.loadAddon(fitAddon)
-  terminal.loadAddon(new WebLinksAddon())
+  terminal.loadAddon(new WebLinksAddon(handleTerminalLink))
 
   // ⌘/Ctrl+Shift+E → convert the current selection to an email table. Handled
   // here (not as a DOM listener) so it works even while a mouse-tracking TUI