@phenx-inc/ctlsurf 0.1.21 → 0.3.0

package/src/renderer/components/TerminalPanel.tsx

@@ -13,37 +13,42 @@ interface AgentConfig {
 }
 
 interface TerminalPanelProps {
+  tabId: string
   agent: AgentConfig | null
-  onSpawn: (agent: AgentConfig) => Promise<void>
-  onExit: () => void
+  onSpawn: (tabId: string, agent: AgentConfig) => Promise<void>
+  onExit: (tabId: string) => void
+  isActive: boolean
 }
 
-// ─── Module-level singleton ──────────────────────────
-// Survives React mount/unmount cycles so PTY connection is never lost.
+// ─── Per-tab terminal instances ──────────────────
+// Keyed by tabId so each tab has its own xterm + pty listeners.
+// Survives React re-renders but cleaned up when tab is closed.
 
-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
-
-// Scroll-pinning: true means user is at/near bottom, auto-scroll is allowed
-let _pinnedToBottom = true
+const _terminals = new Map<string, {
+  terminal: Terminal
+  fitAddon: FitAddon
+  unsubData: (() => void) | null
+  unsubExit: (() => void) | null
+  spawnedAgentId: string | null
+  pinnedToBottom: boolean
+}>()
 
 function isAtBottom(terminal: Terminal): boolean {
   const buf = terminal.buffer.active
   return buf.viewportY >= buf.baseY
 }
 
-function scrollIfPinned(terminal: Terminal) {
-  if (_pinnedToBottom) {
+function scrollIfPinned(tabId: string, terminal: Terminal) {
+  const state = _terminals.get(tabId)
+  if (state?.pinnedToBottom) {
     terminal.scrollToBottom()
   }
 }
 
-function getOrCreateTerminal(onExit: () => void): { terminal: Terminal; fitAddon: FitAddon } {
-  if (_terminal && _fitAddon) {
-    return { terminal: _terminal, fitAddon: _fitAddon }
+function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): { terminal: Terminal; fitAddon: FitAddon } {
+  const existing = _terminals.get(tabId)
+  if (existing) {
+    return { terminal: existing.terminal, fitAddon: existing.fitAddon }
   }
 
   const terminal = new Terminal({
@@ -81,45 +86,66 @@ function getOrCreateTerminal(onExit: () => void): { terminal: Terminal; fitAddon
   terminal.loadAddon(fitAddon)
   terminal.loadAddon(new WebLinksAddon())
 
-  // Track scroll position — detect when user scrolls away from bottom
+  const state = {
+    terminal,
+    fitAddon,
+    unsubData: null as (() => void) | null,
+    unsubExit: null as (() => void) | null,
+    spawnedAgentId: null as string | null,
+    pinnedToBottom: true,
+  }
+
+  // Track scroll position
   terminal.onScroll(() => {
-    _pinnedToBottom = isAtBottom(terminal)
+    state.pinnedToBottom = isAtBottom(terminal)
   })
 
-  // Send keystrokes to pty — re-pin to bottom on user input
+  // Send keystrokes to pty
   terminal.onData((data) => {
-    _pinnedToBottom = true
+    state.pinnedToBottom = true
     terminal.scrollToBottom()
-    window.worker.writePty(data)
+    window.worker.writePty(tabId, data)
   })
 
-  // Receive pty output — auto-scroll only if pinned
-  _unsubData = window.worker.onPtyData((data) => {
-    terminal.write(data)
-    scrollIfPinned(terminal)
+  // Receive pty output for this tab
+  state.unsubData = window.worker.onPtyData((eventTabId, data) => {
+    if (eventTabId === tabId) {
+      terminal.write(data)
+      scrollIfPinned(tabId, terminal)
+    }
   })
 
-  // Handle pty exit
-  _unsubExit = window.worker.onPtyExit((code) => {
-    terminal.writeln(`\r\n\x1b[33m[Process exited with code ${code}]\x1b[0m`)
-    onExit()
+  // Handle pty exit for this tab
+  state.unsubExit = window.worker.onPtyExit((eventTabId, code) => {
+    if (eventTabId === tabId) {
+      terminal.writeln(`\r\n\x1b[33m[Process exited with code ${code}]\x1b[0m`)
+      onExit(tabId)
+    }
   })
 
-  _terminal = terminal
-  _fitAddon = fitAddon
+  _terminals.set(tabId, state)
   return { terminal, fitAddon }
 }
 
+export function destroyTerminal(tabId: string): void {
+  const state = _terminals.get(tabId)
+  if (!state) return
+  state.unsubData?.()
+  state.unsubExit?.()
+  state.terminal.dispose()
+  _terminals.delete(tabId)
+}
+
 // ─── Component ───────────────────────────────────────
 
-export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
+export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: TerminalPanelProps) {
   const containerRef = useRef<HTMLDivElement>(null)
 
-  // Attach terminal to DOM container (or reattach on remount)
+  // Attach terminal to DOM container
   useEffect(() => {
     if (!containerRef.current) return
 
-    const { terminal, fitAddon } = getOrCreateTerminal(onExit)
+    const { terminal, fitAddon } = getOrCreateTerminal(tabId, onExit)
 
     // If terminal is already open in another container, move it
     const existingParent = terminal.element?.parentElement
@@ -130,18 +156,19 @@ export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
     }
 
     fitAddon.fit()
-    scrollIfPinned(terminal)
+    scrollIfPinned(tabId, terminal)
 
     // Resize handling
     let resizeTimeout: ReturnType<typeof setTimeout>
     const handleResize = () => {
       clearTimeout(resizeTimeout)
       resizeTimeout = setTimeout(() => {
-        if (_fitAddon && _terminal) {
-          _fitAddon.fit()
-          scrollIfPinned(_terminal)
-          const { cols, rows } = _terminal
-          window.worker.resizePty(cols, rows)
+        const state = _terminals.get(tabId)
+        if (state) {
+          state.fitAddon.fit()
+          scrollIfPinned(tabId, state.terminal)
+          const { cols, rows } = state.terminal
+          window.worker.resizePty(tabId, cols, rows)
         }
       }, 150)
     }
@@ -154,29 +181,52 @@ export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
       clearTimeout(resizeTimeout)
       window.removeEventListener('resize', handleResize)
       observer.disconnect()
-      // Do NOT dispose terminal or unsub PTY listeners
+      // Do NOT dispose terminal or unsub PTY listeners — they persist across remounts
     }
-  }, [onExit])
+  }, [tabId, onExit])
 
-  // Spawn agent when it changes
+  // Spawn agent when it changes for this tab
   useEffect(() => {
-    if (!agent || !_terminal) return
-    if (_currentAgentId === agent.id) return
-
-    _currentAgentId = agent.id
-    _terminal.clear()
-
-    onSpawn(agent).then(() => {
-      if (_fitAddon && _terminal) {
-        _fitAddon.fit()
-        _pinnedToBottom = true
-        _terminal.scrollToBottom()
-        const { cols, rows } = _terminal
-        window.worker.resizePty(cols, rows)
+    if (!agent) return
+    const state = _terminals.get(tabId)
+    if (!state) return
+    if (state.spawnedAgentId === agent.id) return
+
+    state.spawnedAgentId = agent.id
+    state.terminal.clear()
+
+    onSpawn(tabId, agent).then(() => {
+      const s = _terminals.get(tabId)
+      if (s) {
+        s.fitAddon.fit()
+        s.pinnedToBottom = true
+        s.terminal.scrollToBottom()
+        const { cols, rows } = s.terminal
+        window.worker.resizePty(tabId, cols, rows)
       }
-      _terminal?.focus()
+      state.terminal.focus()
     })
-  }, [agent, onSpawn])
+  }, [tabId, agent, onSpawn])
+
+  // Focus terminal when tab becomes active — delay fit to let the container get its layout dimensions
+  useEffect(() => {
+    if (isActive) {
+      window.worker.setActiveTab(tabId)
+      // Wait for the browser to layout the now-visible container before fitting
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          const state = _terminals.get(tabId)
+          if (state) {
+            state.fitAddon.fit()
+            state.terminal.focus()
+            scrollIfPinned(tabId, state.terminal)
+            const { cols, rows } = state.terminal
+            window.worker.resizePty(tabId, cols, rows)
+          }
+        }, 50)
+      })
+    }
+  }, [isActive, tabId])
 
   return (
     <div className="terminal-container" ref={containerRef} />

package/src/renderer/styles.css

@@ -118,6 +118,117 @@ html, body, #root {
   overflow: hidden;
 }
 
+/* Terminal tabs wrapper */
+.terminal-tabs-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.terminal-tab-bar {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 2px 4px;
+  background: #16161e;
+  border-bottom: 1px solid #292e42;
+  flex-shrink: 0;
+  overflow-x: auto;
+  min-height: 28px;
+}
+
+.terminal-tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  color: #565f89;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.terminal-tab:hover {
+  background: #1f2335;
+  color: #a9b1d6;
+}
+
+.terminal-tab.active {
+  background: #1a1b26;
+  color: #c0caf5;
+}
+
+.terminal-tab-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.terminal-tab-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.terminal-tab-dot.active {
+  background: #9ece6a;
+}
+
+.terminal-tab-dot.exited {
+  background: #565f89;
+}
+
+.terminal-tab-close {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 3px;
+  opacity: 0.5;
+}
+
+.terminal-tab-close:hover {
+  opacity: 1;
+  background: rgba(247, 118, 142, 0.2);
+  color: #f7768e;
+}
+
+.terminal-tab-add {
+  background: none;
+  border: none;
+  color: #565f89;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  line-height: 1;
+}
+
+.terminal-tab-add:hover {
+  background: #1f2335;
+  color: #a9b1d6;
+}
+
+.terminal-tabs-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.terminal-tab-panel {
+  flex-direction: column;
+  overflow: hidden;
+}
+
 /* Terminal container */
 .terminal-container {
   width: 100%;
@@ -407,6 +518,27 @@ html, body, #root {
 .status-dot.idle { background: #565f89; }
 .status-dot.pending { background: #e0af68; }
 
+.tracking-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+}
+.tracking-dot.on { background: #9ece6a; box-shadow: 0 0 4px #9ece6a; }
+.tracking-dot.off { background: #565f89; }
+
+.titlebar-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 8px;
+}
+.tracking-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
 /* Editor panel */
 .editor-panel {
   display: flex;