@phenx-inc/ctlsurf 0.1.16 → 0.1.18

package/src/renderer/App.tsx

@@ -72,15 +72,6 @@ const DEFAULT_LAYOUT: LayoutNode = {
 
 const ALL_PANE_IDS = ['editor', 'terminal', 'ctlsurf']
 
-const offscreenStyle: React.CSSProperties = {
-  position: 'absolute',
-  width: '1px',
-  height: '1px',
-  overflow: 'hidden',
-  opacity: 0,
-  pointerEvents: 'none',
-}
-
 export default function App() {
   const [agents, setAgents] = useState<AgentConfig[]>([])
   const [selectedAgent, setSelectedAgent] = useState<AgentConfig | null>(null)
@@ -226,26 +217,19 @@ export default function App() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [togglePane])
 
-  // Pane definitions — content is rendered via portals to preserve React tree position
+  // Build pane contents (always rendered, layout controls visibility)
   const panes: PaneContent[] = [
-    { id: 'editor', label: 'Editor', content: null },
-    { id: 'terminal', label: 'Terminal', content: null },
-    { id: 'ctlsurf', label: 'ctlsurf', content: null },
+    { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
+    {
+      id: 'terminal',
+      label: 'Terminal',
+      content: <TerminalPanel agent={selectedAgent} onSpawn={handleSpawn} onExit={handleExit} />,
+    },
+    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel /> },
   ]
 
   return (
     <div className="app">
-      {/* Persistent component instances — never unmounted, positioned by portal targets */}
-      <div id="pane-host-editor" style={visiblePaneIds.includes('editor') ? undefined : offscreenStyle}>
-        <EditorPanel cwd={cwd} />
-      </div>
-      <div id="pane-host-terminal" style={visiblePaneIds.includes('terminal') ? undefined : offscreenStyle}>
-        <TerminalPanel agent={selectedAgent} onSpawn={handleSpawn} onExit={handleExit} />
-      </div>
-      <div id="pane-host-ctlsurf" style={visiblePaneIds.includes('ctlsurf') ? undefined : offscreenStyle}>
-        <CtlsurfPanel />
-      </div>
-
       <div className="titlebar">
         <span className="titlebar-title">ctlsurf-worker</span>
         <div className="titlebar-controls">
@@ -288,7 +272,6 @@ export default function App() {
             panes={panes.filter(p => visiblePaneIds.includes(p.id))}
             onLayoutChange={setLayout}
             onToggle={togglePane}
-            paneHostPrefix="pane-host-"
           />
         )}
       </div>

package/src/renderer/components/PaneLayout.tsx

@@ -116,10 +116,9 @@ interface PaneLayoutProps {
   panes: PaneContent[]
   onLayoutChange: (layout: LayoutNode) => void
   onToggle: (id: string) => void
-  paneHostPrefix?: string
 }
 
-export function PaneLayout({ layout, panes, onLayoutChange, onToggle, paneHostPrefix }: PaneLayoutProps) {
+export function PaneLayout({ layout, panes, onLayoutChange, onToggle }: PaneLayoutProps) {
   const [dragPaneId, setDragPaneId] = useState<string | null>(null)
 
   const handleDrop = useCallback((targetPaneId: string, zone: DropZone) => {
@@ -151,7 +150,6 @@ export function PaneLayout({ layout, panes, onLayoutChange, onToggle, paneHostPr
           onLayoutChange={onLayoutChange}
           parentDirection={null}
           path={[]}
-          paneHostPrefix={paneHostPrefix}
         />
       </div>
     </DragContext.Provider>
@@ -168,10 +166,9 @@ interface LayoutRendererProps {
   onLayoutChange: (layout: LayoutNode) => void
   parentDirection: SplitDirection | null
   path: number[]
-  paneHostPrefix?: string
 }
 
-function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path, paneHostPrefix }: LayoutRendererProps) {
+function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, parentDirection, path }: LayoutRendererProps) {
   if (node.type === 'leaf') {
     const pane = paneMap.get(node.paneId)
     if (!pane) return null
@@ -180,7 +177,6 @@ function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, paren
         pane={pane}
         onDrop={onDrop}
         onToggle={onToggle}
-        paneHostPrefix={paneHostPrefix}
       />
     )
   }
@@ -193,7 +189,6 @@ function LayoutRenderer({ node, paneMap, onDrop, onToggle, onLayoutChange, paren
       onToggle={onToggle}
       onLayoutChange={onLayoutChange}
       path={path}
-      paneHostPrefix={paneHostPrefix}
     />
   )
 }
@@ -207,10 +202,9 @@ interface SplitContainerProps {
   onToggle: (id: string) => void
   onLayoutChange: (layout: LayoutNode) => void
   path: number[]
-  paneHostPrefix?: string
 }
 
-function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path, paneHostPrefix }: SplitContainerProps) {
+function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path }: SplitContainerProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const draggingDivider = useRef<number | null>(null)
   const sizesRef = useRef(node.sizes)
@@ -312,7 +306,6 @@ function SplitContainer({ node, paneMap, onDrop, onToggle, onLayoutChange, path,
               }}
               parentDirection={node.direction}
               path={[...path, i]}
-              paneHostPrefix={paneHostPrefix}
             />
           </div>
           {i < node.children.length - 1 && (
@@ -339,43 +332,12 @@ interface LeafPaneProps {
   pane: PaneContent
   onDrop: (targetPaneId: string, zone: DropZone) => void
   onToggle: (id: string) => void
-  paneHostPrefix?: string
 }
 
-function LeafPane({ pane, onDrop, onToggle, paneHostPrefix }: LeafPaneProps) {
+function LeafPane({ pane, onDrop, onToggle }: LeafPaneProps) {
   const { dragPaneId, setDragPaneId } = useContext(DragContext)
   const [hoverZone, setHoverZone] = useState<DropZone | null>(null)
   const paneRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  // Reparent the persistent host element into this leaf's content area
-  useEffect(() => {
-    if (!paneHostPrefix || !contentRef.current) return
-    const hostEl = document.getElementById(`${paneHostPrefix}${pane.id}`)
-    if (!hostEl) return
-
-    // Move host element into this container
-    hostEl.style.position = ''
-    hostEl.style.width = '100%'
-    hostEl.style.height = '100%'
-    hostEl.style.overflow = ''
-    hostEl.style.opacity = '1'
-    hostEl.style.pointerEvents = ''
-    contentRef.current.appendChild(hostEl)
-
-    return () => {
-      // When this leaf unmounts, move host back to offscreen
-      if (hostEl.parentElement === contentRef.current) {
-        document.body.appendChild(hostEl)
-        hostEl.style.position = 'absolute'
-        hostEl.style.width = '1px'
-        hostEl.style.height = '1px'
-        hostEl.style.overflow = 'hidden'
-        hostEl.style.opacity = '0'
-        hostEl.style.pointerEvents = 'none'
-      }
-    }
-  }, [pane.id, paneHostPrefix])
 
   const isDragging = dragPaneId === pane.id
   const isDropTarget = dragPaneId !== null && dragPaneId !== pane.id
@@ -423,8 +385,8 @@ function LeafPane({ pane, onDrop, onToggle, paneHostPrefix }: LeafPaneProps) {
       </div>
 
       {/* Content */}
-      <div className="leaf-pane-content" ref={contentRef}>
-        {!paneHostPrefix && pane.content}
+      <div className="leaf-pane-content">
+        {pane.content}
       </div>
 
       {/* Drop zone overlay (only visible when another pane is being dragged) */}

package/src/renderer/components/TerminalPanel.tsx

@@ -18,82 +18,107 @@ interface TerminalPanelProps {
   onExit: () => void
 }
 
+// ─── Module-level singleton ──────────────────────────
+// Survives React mount/unmount cycles so PTY connection is never lost.
+
+let _terminal: Terminal | null = null
+let _fitAddon: FitAddon | null = null
+let _unsubData: (() => void) | null = null
+let _unsubExit: (() => void) | null = null
+let _currentAgentId: string | null = null
+
+function getOrCreateTerminal(onExit: () => void): { terminal: Terminal; fitAddon: FitAddon } {
+  if (_terminal && _fitAddon) {
+    return { terminal: _terminal, fitAddon: _fitAddon }
+  }
+
+  const terminal = new Terminal({
+    cursorBlink: true,
+    fontSize: 14,
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace",
+    theme: {
+      background: '#1a1b26',
+      foreground: '#a9b1d6',
+      cursor: '#c0caf5',
+      selectionBackground: '#33467C',
+      black: '#15161e',
+      red: '#f7768e',
+      green: '#9ece6a',
+      yellow: '#e0af68',
+      blue: '#7aa2f7',
+      magenta: '#bb9af7',
+      cyan: '#7dcfff',
+      white: '#a9b1d6',
+      brightBlack: '#414868',
+      brightRed: '#f7768e',
+      brightGreen: '#9ece6a',
+      brightYellow: '#e0af68',
+      brightBlue: '#7aa2f7',
+      brightMagenta: '#bb9af7',
+      brightCyan: '#7dcfff',
+      brightWhite: '#c0caf5'
+    },
+    scrollback: 10000,
+    scrollOnUserInput: true,
+    allowTransparency: false
+  })
+
+  const fitAddon = new FitAddon()
+  terminal.loadAddon(fitAddon)
+  terminal.loadAddon(new WebLinksAddon())
+
+  // Send keystrokes to pty
+  terminal.onData((data) => {
+    window.worker.writePty(data)
+  })
+
+  // Receive pty output — subscribed once, never unsubscribed
+  _unsubData = window.worker.onPtyData((data) => {
+    terminal.write(data)
+  })
+
+  // Handle pty exit
+  _unsubExit = window.worker.onPtyExit((code) => {
+    terminal.writeln(`\r\n\x1b[33m[Process exited with code ${code}]\x1b[0m`)
+    onExit()
+  })
+
+  _terminal = terminal
+  _fitAddon = fitAddon
+  return { terminal, fitAddon }
+}
+
+// ─── Component ───────────────────────────────────────
+
 export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
   const containerRef = useRef<HTMLDivElement>(null)
-  const terminalRef = useRef<Terminal | null>(null)
-  const fitAddonRef = useRef<FitAddon | null>(null)
-  const currentAgentRef = useRef<string | null>(null)
 
-  // Initialize terminal once
+  // Attach terminal to DOM container (or reattach on remount)
   useEffect(() => {
-    if (!containerRef.current || terminalRef.current) return
-
-    const terminal = new Terminal({
-      cursorBlink: true,
-      fontSize: 14,
-      fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace",
-      theme: {
-        background: '#1a1b26',
-        foreground: '#a9b1d6',
-        cursor: '#c0caf5',
-        selectionBackground: '#33467C',
-        black: '#15161e',
-        red: '#f7768e',
-        green: '#9ece6a',
-        yellow: '#e0af68',
-        blue: '#7aa2f7',
-        magenta: '#bb9af7',
-        cyan: '#7dcfff',
-        white: '#a9b1d6',
-        brightBlack: '#414868',
-        brightRed: '#f7768e',
-        brightGreen: '#9ece6a',
-        brightYellow: '#e0af68',
-        brightBlue: '#7aa2f7',
-        brightMagenta: '#bb9af7',
-        brightCyan: '#7dcfff',
-        brightWhite: '#c0caf5'
-      },
-      scrollback: 10000,
-      scrollOnUserInput: true,
-      allowTransparency: false
-    })
-
-    const fitAddon = new FitAddon()
-    terminal.loadAddon(fitAddon)
-    terminal.loadAddon(new WebLinksAddon())
-
-    terminal.open(containerRef.current)
-    fitAddon.fit()
+    if (!containerRef.current) return
 
-    terminalRef.current = terminal
-    fitAddonRef.current = fitAddon
+    const { terminal, fitAddon } = getOrCreateTerminal(onExit)
 
-    // Send keystrokes to pty
-    terminal.onData((data) => {
-      window.worker.writePty(data)
-    })
-
-    // Receive pty output
-    const unsubData = window.worker.onPtyData((data) => {
-      terminal.write(data)
-    })
+    // If terminal is already open in another container, move it
+    const existingParent = terminal.element?.parentElement
+    if (existingParent && existingParent !== containerRef.current) {
+      containerRef.current.appendChild(terminal.element!)
+    } else if (!terminal.element) {
+      terminal.open(containerRef.current)
+    }
 
-    // Handle pty exit
-    const unsubExit = window.worker.onPtyExit((code) => {
-      terminal.writeln(`\r\n\x1b[33m[Process exited with code ${code}]\x1b[0m`)
-      onExit()
-    })
+    fitAddon.fit()
+    terminal.scrollToBottom()
 
-    // Resize handling — scroll to bottom after fit to prevent jumping to top
+    // Resize handling
     let resizeTimeout: ReturnType<typeof setTimeout>
     const handleResize = () => {
       clearTimeout(resizeTimeout)
       resizeTimeout = setTimeout(() => {
-        if (fitAddonRef.current && terminalRef.current) {
-          fitAddonRef.current.fit()
-          terminalRef.current.scrollToBottom()
-          const { cols, rows } = terminalRef.current
+        if (_fitAddon && _terminal) {
+          _fitAddon.fit()
+          _terminal.scrollToBottom()
+          const { cols, rows } = _terminal
           window.worker.resizePty(cols, rows)
         }
       }, 150)
@@ -107,33 +132,26 @@ export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
       clearTimeout(resizeTimeout)
       window.removeEventListener('resize', handleResize)
       observer.disconnect()
-      unsubData()
-      unsubExit()
-      terminal.dispose()
-      terminalRef.current = null
-      fitAddonRef.current = null
+      // Do NOT dispose terminal or unsub PTY listeners
     }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [onExit])
 
   // Spawn agent when it changes
   useEffect(() => {
-    if (!agent || !terminalRef.current) return
-    if (currentAgentRef.current === agent.id) return
-
-    currentAgentRef.current = agent.id
+    if (!agent || !_terminal) return
+    if (_currentAgentId === agent.id) return
 
-    // Clear terminal for new agent
-    terminalRef.current.clear()
+    _currentAgentId = agent.id
+    _terminal.clear()
 
     onSpawn(agent).then(() => {
-      // Send initial resize after spawn
-      if (fitAddonRef.current && terminalRef.current) {
-        fitAddonRef.current.fit()
-        terminalRef.current.scrollToBottom()
-        const { cols, rows } = terminalRef.current
+      if (_fitAddon && _terminal) {
+        _fitAddon.fit()
+        _terminal.scrollToBottom()
+        const { cols, rows } = _terminal
         window.worker.resizePty(cols, rows)
       }
-      terminalRef.current?.focus()
+      _terminal?.focus()
     })
   }, [agent, onSpawn])