@phenx-inc/ctlsurf 0.5.1 → 0.5.2

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