@phenx-inc/ctlsurf 0.1.21 → 0.2.0

package/src/preload/index.ts

@@ -9,24 +9,26 @@ export interface AgentConfig {
 }
 
 const api = {
-  // Pty operations
-  spawnAgent: (agent: AgentConfig, cwd: string) =>
-    ipcRenderer.invoke('pty:spawn', agent, cwd),
-  writePty: (data: string) =>
-    ipcRenderer.invoke('pty:write', data),
-  resizePty: (cols: number, rows: number) =>
-    ipcRenderer.invoke('pty:resize', cols, rows),
-  killPty: () =>
-    ipcRenderer.invoke('pty:kill'),
+  // Pty operations (multi-tab: all take tabId)
+  spawnAgent: (tabId: string, agent: AgentConfig, cwd: string) =>
+    ipcRenderer.invoke('pty:spawn', tabId, agent, cwd),
+  writePty: (tabId: string, data: string) =>
+    ipcRenderer.invoke('pty:write', tabId, data),
+  resizePty: (tabId: string, cols: number, rows: number) =>
+    ipcRenderer.invoke('pty:resize', tabId, cols, rows),
+  killPty: (tabId: string) =>
+    ipcRenderer.invoke('pty:kill', tabId),
+  setActiveTab: (tabId: string) =>
+    ipcRenderer.invoke('pty:setActiveTab', tabId),
 
-  // Pty events
-  onPtyData: (callback: (data: string) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, data: string) => callback(data)
+  // Pty events (multi-tab: callbacks receive tabId)
+  onPtyData: (callback: (tabId: string, data: string) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, tabId: string, data: string) => callback(tabId, data)
     ipcRenderer.on('pty:data', listener)
     return () => ipcRenderer.removeListener('pty:data', listener)
   },
-  onPtyExit: (callback: (code: number) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, code: number) => callback(code)
+  onPtyExit: (callback: (tabId: string, code: number) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, tabId: string, code: number) => callback(tabId, code)
     ipcRenderer.on('pty:exit', listener)
     return () => ipcRenderer.removeListener('pty:exit', listener)
   },

package/src/renderer/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { TerminalPanel } from './components/TerminalPanel'
+import { TerminalPanel, destroyTerminal } from './components/TerminalPanel'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
 import { AgentPicker } from './components/AgentPicker'
@@ -24,12 +24,13 @@ interface AgentConfig {
 declare global {
   interface Window {
     worker: {
-      spawnAgent: (agent: AgentConfig, cwd: string) => Promise<{ ok: boolean }>
-      writePty: (data: string) => Promise<void>
-      resizePty: (cols: number, rows: number) => Promise<void>
-      killPty: () => Promise<void>
-      onPtyData: (callback: (data: string) => void) => () => void
-      onPtyExit: (callback: (code: number) => void) => () => void
+      spawnAgent: (tabId: string, agent: AgentConfig, cwd: string) => Promise<{ ok: boolean }>
+      writePty: (tabId: string, data: string) => Promise<void>
+      resizePty: (tabId: string, cols: number, rows: number) => Promise<void>
+      killPty: (tabId: string) => Promise<void>
+      setActiveTab: (tabId: string) => Promise<void>
+      onPtyData: (callback: (tabId: string, data: string) => void) => () => void
+      onPtyExit: (callback: (tabId: string, code: number) => void) => () => void
       listAgents: () => Promise<AgentConfig[]>
       getDefaultAgent: () => Promise<AgentConfig>
       getHomePath: () => Promise<string>
@@ -72,10 +73,20 @@ const DEFAULT_LAYOUT: LayoutNode = {
 
 const ALL_PANE_IDS = ['editor', 'terminal', 'ctlsurf']
 
+interface TabInfo {
+  id: string
+  label: string
+  agent: AgentConfig | null
+  agentStatus: 'idle' | 'active' | 'exited'
+}
+
+let _tabCounter = 0
+function nextTabId(): string {
+  return `tab-${++_tabCounter}`
+}
+
 export default function App() {
   const [agents, setAgents] = useState<AgentConfig[]>([])
-  const [selectedAgent, setSelectedAgent] = useState<AgentConfig | null>(null)
-  const [agentStatus, setAgentStatus] = useState<'idle' | 'active' | 'exited'>('idle')
   const [sessionStart, setSessionStart] = useState<Date | null>(null)
   const [layout, setLayout] = useState<LayoutNode>(DEFAULT_LAYOUT)
   const [hiddenPanes, setHiddenPanes] = useState<Set<string>>(new Set())
@@ -83,11 +94,20 @@ export default function App() {
   const [wsStatus, setWsStatus] = useState('disconnected')
   const [cwd, setCwd] = useState<string | null>(null)
 
-  // Track which panes are in the layout tree
-  const visiblePaneIds = findPaneIds(layout)
+  // Multi-tab state
+  const [tabs, setTabs] = useState<TabInfo[]>(() => {
+    const id = nextTabId()
+    return [{ id, label: 'Terminal 1', agent: null, agentStatus: 'idle' }]
+  })
+  const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id)
 
+  // Agent picker state: which tab is being configured (null = initial picker for first tab)
+  const [pickerTargetTabId, setPickerTargetTabId] = useState<string | null>(tabs[0].id)
   const [showAgentPicker, setShowAgentPicker] = useState(true)
 
+  // Track which panes are in the layout tree
+  const visiblePaneIds = findPaneIds(layout)
+
   useEffect(() => {
     async function init() {
       const list = await window.worker.listAgents()
@@ -114,45 +134,91 @@ export default function App() {
     return unsub
   }, [])
 
-  const spawnGenRef = useRef(0)
   const cwdRef = useRef<string | null>(null)
 
-  const handleSpawn = useCallback(async (agent: AgentConfig) => {
-    spawnGenRef.current += 1
-    setAgentStatus('active')
+  const handleSpawn = useCallback(async (tabId: string, agent: AgentConfig) => {
+    setTabs(prev => prev.map(t => t.id === tabId ? { ...t, agentStatus: 'active' } : t))
     setSessionStart(new Date())
     const spawnCwd = cwdRef.current || await window.worker.getCwd().catch(() => window.worker.getHomePath())
     setCwd(spawnCwd)
     cwdRef.current = spawnCwd
-    await window.worker.spawnAgent(agent, spawnCwd)
+    await window.worker.spawnAgent(tabId, agent, spawnCwd)
   }, [])
 
   const handleAgentChange = useCallback(async (agentId: string) => {
     const agent = agents.find(a => a.id === agentId)
     if (agent) {
-      await window.worker.killPty()
-      setSelectedAgent(agent)
+      await window.worker.killPty(activeTabId)
+      setTabs(prev => prev.map(t => t.id === activeTabId ? { ...t, agent, agentStatus: 'idle' } : t))
     }
-  }, [agents])
+  }, [agents, activeTabId])
 
-  const handleExit = useCallback(() => {
-    const gen = spawnGenRef.current
+  const handleExit = useCallback((tabId: string) => {
     setTimeout(() => {
-      if (spawnGenRef.current === gen) setAgentStatus('exited')
+      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, agentStatus: 'exited' } : t))
     }, 200)
   }, [])
 
   const handleChangeCwd = useCallback(async () => {
     const newCwd = await window.worker.browseCwd()
-    if (!newCwd || !selectedAgent) return
+    const activeTab = tabs.find(t => t.id === activeTabId)
+    if (!newCwd || !activeTab?.agent) return
     cwdRef.current = newCwd
     setCwd(newCwd)
-    await window.worker.killPty()
-    spawnGenRef.current += 1
-    setAgentStatus('active')
+    await window.worker.killPty(activeTabId)
+    setTabs(prev => prev.map(t => t.id === activeTabId ? { ...t, agentStatus: 'active' } : t))
     setSessionStart(new Date())
-    await window.worker.spawnAgent(selectedAgent, newCwd)
-  }, [selectedAgent])
+    await window.worker.spawnAgent(activeTabId, activeTab.agent, newCwd)
+  }, [tabs, activeTabId])
+
+  // ─── Tab management ─────────────────────────────
+
+  const addTab = useCallback(() => {
+    // Create the tab in idle state and show the agent picker for it
+    const id = nextTabId()
+    const num = _tabCounter
+    setTabs(prev => [...prev, { id, label: `Terminal ${num}`, agent: null, agentStatus: 'idle' }])
+    setActiveTabId(id)
+    setPickerTargetTabId(id)
+    setShowAgentPicker(true)
+  }, [])
+
+  const handlePickerSelect = useCallback((agent: AgentConfig) => {
+    const tabId = pickerTargetTabId
+    if (tabId) {
+      setTabs(prev => prev.map(t =>
+        t.id === tabId ? { ...t, agent, label: `${agent.name} ${tabs.filter(x => x.agent?.id === agent.id).length + 1}` } : t
+      ))
+    }
+    setShowAgentPicker(false)
+    setPickerTargetTabId(null)
+  }, [pickerTargetTabId, tabs])
+
+  const closeTab = useCallback(async (tabId: string) => {
+    await window.worker.killPty(tabId)
+    destroyTerminal(tabId)
+    setTabs(prev => {
+      const next = prev.filter(t => t.id !== tabId)
+      // If we closed the active tab, switch to the last remaining
+      if (tabId === activeTabId && next.length > 0) {
+        setActiveTabId(next[next.length - 1].id)
+      }
+      // If no tabs left, create a fresh one with the picker
+      if (next.length === 0) {
+        const id = nextTabId()
+        const num = _tabCounter
+        setActiveTabId(id)
+        setPickerTargetTabId(id)
+        setShowAgentPicker(true)
+        return [{ id, label: `Terminal ${num}`, agent: null, agentStatus: 'idle' }]
+      }
+      return next
+    })
+  }, [activeTabId])
+
+  const switchTab = useCallback((tabId: string) => {
+    setActiveTabId(tabId)
+  }, [])
 
   // Toggle pane: hide removes from layout tree, show re-inserts
   const togglePane = useCallback((id: string) => {
@@ -223,7 +289,59 @@ export default function App() {
     {
       id: 'terminal',
       label: 'Terminal',
-      content: <TerminalPanel agent={selectedAgent} onSpawn={handleSpawn} onExit={handleExit} />,
+      content: (
+        <div className="terminal-tabs-wrapper">
+          {/* Tab bar */}
+          <div className="terminal-tab-bar">
+            {tabs.map(tab => (
+              <div
+                key={tab.id}
+                className={`terminal-tab ${tab.id === activeTabId ? 'active' : ''}`}
+                onClick={() => switchTab(tab.id)}
+              >
+                <span className="terminal-tab-label">
+                  {tab.agent ? tab.agent.name : tab.label}
+                  {tab.agentStatus === 'active' && <span className="terminal-tab-dot active" />}
+                  {tab.agentStatus === 'exited' && <span className="terminal-tab-dot exited" />}
+                </span>
+                {tabs.length > 1 && (
+                  <button
+                    className="terminal-tab-close"
+                    onClick={(e) => { e.stopPropagation(); closeTab(tab.id) }}
+                    title="Close tab"
+                  >
+                    ×
+                  </button>
+                )}
+              </div>
+            ))}
+            <button className="terminal-tab-add" onClick={addTab} title="New terminal tab">
+              +
+            </button>
+          </div>
+          {/* Terminal panels — all mounted, only active visible */}
+          <div className="terminal-tabs-content">
+            {tabs.map(tab => (
+              <div
+                key={tab.id}
+                className="terminal-tab-panel"
+                style={{
+                  display: tab.id === activeTabId ? 'flex' : 'none',
+                  flex: 1,
+                }}
+              >
+                <TerminalPanel
+                  tabId={tab.id}
+                  agent={tab.agent}
+                  onSpawn={handleSpawn}
+                  onExit={handleExit}
+                  isActive={tab.id === activeTabId}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel /> },
   ]
@@ -237,16 +355,19 @@ export default function App() {
             Settings
           </button>
           <span className="titlebar-separator" />
-          {agents.map(a => (
-            <button
-              key={a.id}
-              className={`titlebar-agent-btn ${selectedAgent?.id === a.id ? 'active' : ''}`}
-              onClick={() => handleAgentChange(a.id)}
-              title={a.description}
-            >
-              {a.name}
-            </button>
-          ))}
+          {agents.map(a => {
+            const activeTab = tabs.find(t => t.id === activeTabId)
+            return (
+              <button
+                key={a.id}
+                className={`titlebar-agent-btn ${activeTab?.agent?.id === a.id ? 'active' : ''}`}
+                onClick={() => handleAgentChange(a.id)}
+                title={a.description}
+              >
+                {a.name}
+              </button>
+            )
+          })}
           <span className="titlebar-separator" />
           {ALL_PANE_IDS.map(id => (
             <button
@@ -283,10 +404,7 @@ export default function App() {
         <AgentPicker
           agents={agents}
           cwd={cwd || ''}
-          onSelect={(agent) => {
-            setSelectedAgent(agent)
-            setShowAgentPicker(false)
-          }}
+          onSelect={handlePickerSelect}
           onChangeCwd={async () => {
             const newCwd = await window.worker.browseCwd()
             if (newCwd) {

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,44 @@ 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
+  useEffect(() => {
+    if (isActive) {
+      const state = _terminals.get(tabId)
+      if (state) {
+        state.fitAddon.fit()
+        state.terminal.focus()
+      }
+      window.worker.setActiveTab(tabId)
+    }
+  }, [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%;