@phenx-inc/ctlsurf 0.1.21 → 0.3.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)
   },
@@ -58,13 +60,19 @@ const api = {
     ipcRenderer.invoke('profiles:list'),
   getProfile: (profileId: string) =>
     ipcRenderer.invoke('profiles:get', profileId),
-  saveProfile: (profileId: string, data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string }) =>
+  saveProfile: (profileId: string, data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string; trackTime?: boolean; idleTimeoutMin?: number }) =>
     ipcRenderer.invoke('profiles:save', profileId, data),
   switchProfile: (profileId: string) =>
     ipcRenderer.invoke('profiles:switch', profileId),
   deleteProfile: (profileId: string) =>
     ipcRenderer.invoke('profiles:delete', profileId),
 
+  // Tracking (active tab)
+  getTracking: (): Promise<{ active: boolean }> =>
+    ipcRenderer.invoke('tracking:get'),
+  setTracking: (enabled: boolean): Promise<{ active: boolean }> =>
+    ipcRenderer.invoke('tracking:set', enabled),
+
   // Filesystem
   readDir: (dirPath: string): Promise<Array<{ name: string; path: string; isDirectory: boolean }>> =>
     ipcRenderer.invoke('fs:readDir', dirPath),

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>
@@ -43,6 +44,8 @@ declare global {
       saveProfile: (profileId: string, data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string }) => Promise<{ ok: boolean }>
       switchProfile: (profileId: string) => Promise<{ ok: boolean }>
       deleteProfile: (profileId: string) => Promise<{ ok: boolean }>
+      getTracking: () => Promise<{ active: boolean }>
+      setTracking: (enabled: boolean) => Promise<{ active: boolean }>
       createProject: () => Promise<{ ok: boolean; folder_id?: string; error?: string }>
       getWebviewInfo: () => Promise<{
         frontendUrl: string; pageUrl?: string; authenticated: boolean;
@@ -72,10 +75,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 +96,21 @@ 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)
+  const [trackingActive, setTrackingActive] = useState(false)
 
+  // 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 +137,115 @@ export default function App() {
     return unsub
   }, [])
 
-  const spawnGenRef = useRef(0)
+  // Reflect tracking state for the active tab; refresh on tab switch and poll
+  // periodically so the UI catches changes (e.g. a session ending naturally).
+  useEffect(() => {
+    let cancelled = false
+    const refresh = async () => {
+      try {
+        const r = await window.worker.getTracking()
+        if (!cancelled) setTrackingActive(!!r?.active)
+      } catch { /* ignore */ }
+    }
+    refresh()
+    const id = setInterval(refresh, 4000)
+    return () => { cancelled = true; clearInterval(id) }
+  }, [activeTabId])
+
+  const handleToggleTracking = useCallback(async () => {
+    try {
+      const r = await window.worker.setTracking(!trackingActive)
+      setTrackingActive(!!r?.active)
+    } catch (err) {
+      console.error('[tracking] toggle failed', err)
+    }
+  }, [trackingActive])
+
   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 +316,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 /> },
   ]
@@ -236,17 +381,29 @@ export default function App() {
           <button className="titlebar-btn" onClick={() => setShowSettings(true)} title="Settings">
             Settings
           </button>
+          <button
+            className={`titlebar-btn titlebar-icon-btn ${trackingActive ? 'active' : ''}`}
+            onClick={handleToggleTracking}
+            title={trackingActive ? 'Time tracking on — click to stop' : 'Time tracking off — click to start'}
+            aria-label="Time tracking"
+          >
+            <span className="tracking-icon">⏱</span>
+            <span className={`tracking-dot ${trackingActive ? 'on' : 'off'}`} />
+          </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 +440,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/SettingsDialog.tsx

@@ -6,6 +6,8 @@ interface ProfileSummary {
   baseUrl: string
   hasApiKey: boolean
   dataspacePageId: string | null
+  trackTime?: boolean
+  idleTimeoutMin?: number
 }
 
 interface ProfileListResponse {
@@ -28,6 +30,8 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const [apiKey, setApiKey] = useState('')
   const [baseUrl, setBaseUrl] = useState('')
   const [dataspacePageId, setDataspacePageId] = useState('')
+  const [trackTime, setTrackTime] = useState(false)
+  const [idleTimeoutMin, setIdleTimeoutMin] = useState(15)
   const [saved, setSaved] = useState(false)
 
   const loadProfiles = async () => {
@@ -50,6 +54,8 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
     setApiKey('')
     setBaseUrl(profile.baseUrl)
     setDataspacePageId(profile.dataspacePageId || '')
+    setTrackTime(!!profile.trackTime)
+    setIdleTimeoutMin(profile.idleTimeoutMin ?? 15)
     setSaved(false)
   }
 
@@ -60,16 +66,20 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
     setApiKey('')
     setBaseUrl('http://localhost:8000')
     setDataspacePageId('')
+    setTrackTime(true)
+    setIdleTimeoutMin(15)
     setSaved(false)
   }
 
   const handleSave = async () => {
     if (!editingId || !name.trim()) return
 
-    const data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string } = {
+    const data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string; trackTime?: boolean; idleTimeoutMin?: number } = {
       name: name.trim(),
       baseUrl: baseUrl.trim() || 'https://app.ctlsurf.com',
       dataspacePageId: dataspacePageId.trim(),
+      trackTime,
+      idleTimeoutMin: Math.max(1, Math.floor(idleTimeoutMin)) || 15,
     }
     // Only send apiKey if user typed something new
     if (apiKey.trim()) {
@@ -154,6 +164,33 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
               />
             </label>
 
+            <label className="settings-checkbox">
+              <input
+                type="checkbox"
+                checked={trackTime}
+                onChange={e => setTrackTime(e.target.checked)}
+              />
+              <span>Track time per project</span>
+              <span className="settings-hint">
+                Logs each session to a "Time Tracking" datastore on the project's Agent Datastore page.
+              </span>
+            </label>
+
+            {trackTime && (
+              <label>
+                Idle timeout (min)
+                <input
+                  type="number"
+                  min={1}
+                  value={idleTimeoutMin}
+                  onChange={e => setIdleTimeoutMin(parseInt(e.target.value, 10) || 15)}
+                />
+                <span className="settings-hint">
+                  Gaps longer than this without terminal activity are counted as idle, not work.
+                </span>
+              </label>
+            )}
+
             <div className="settings-actions">
               <button className="btn-secondary" onClick={() => setEditingId(null)}>Back</button>
               <button className="btn-primary" onClick={handleSave}>