@phenx-inc/ctlsurf 0.1.2 → 0.1.3

package/src/main/workerWs.ts

@@ -1,5 +1,9 @@
 import os from 'os'
 import crypto from 'crypto'
+import WsModule from 'ws'
+
+// Use native WebSocket if available (Node 22+), otherwise fall back to ws package
+const WS: typeof WebSocket = typeof WebSocket !== 'undefined' ? WebSocket : WsModule as any
 
 function log(...args: unknown[]): void {
   try { console.log(...args) } catch { /* EPIPE safe */ }
@@ -169,7 +173,7 @@ export class WorkerWsClient {
     log(`[worker-ws] Connecting to ${url.replace(/token=.*/, 'token=***')}...`)
 
     try {
-      this.ws = new WebSocket(url)
+      this.ws = new WS(url) as unknown as WebSocket
     } catch (err) {
       log('[worker-ws] Failed to create WebSocket:', err)
       this.scheduleReconnect()
@@ -272,7 +276,7 @@ export class WorkerWsClient {
   }
 
   private send(data: Record<string, unknown>): void {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+    if (this.ws && this.ws.readyState === WS.OPEN) {
       this.ws.send(JSON.stringify(data))
     }
   }

package/src/renderer/App.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react'
 import { TerminalPanel } from './components/TerminalPanel'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
+import { AgentPicker } from './components/AgentPicker'
 import {
   PaneLayout,
   type LayoutNode,
@@ -63,11 +64,10 @@ const DEFAULT_LAYOUT: LayoutNode = {
   type: 'split',
   direction: 'horizontal',
   children: [
-    { type: 'leaf', paneId: 'editor' },
     { type: 'leaf', paneId: 'terminal' },
     { type: 'leaf', paneId: 'ctlsurf' },
   ],
-  sizes: [33.33, 33.33, 33.34],
+  sizes: [50, 50],
 }
 
 const ALL_PANE_IDS = ['editor', 'terminal', 'ctlsurf']
@@ -86,14 +86,18 @@ export default function App() {
   // Track which panes are in the layout tree
   const visiblePaneIds = findPaneIds(layout)
 
+  const [showAgentPicker, setShowAgentPicker] = useState(true)
+
   useEffect(() => {
     async function init() {
       const list = await window.worker.listAgents()
-      const defaultAgent = await window.worker.getDefaultAgent()
       setAgents(list)
-      setSelectedAgent(defaultAgent)
       const status = await window.worker.getWorkerStatus()
       setWsStatus(status)
+      // Load initial cwd for the picker
+      const initialCwd = await window.worker.getCwd().catch(() => window.worker.getHomePath())
+      setCwd(initialCwd)
+      cwdRef.current = initialCwd
     }
     init()
   }, [])
@@ -232,6 +236,18 @@ export default function App() {
           <button className="titlebar-btn" onClick={() => setShowSettings(true)} title="Settings">
             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>
+          ))}
+          <span className="titlebar-separator" />
           {ALL_PANE_IDS.map(id => (
             <button
               key={id}
@@ -242,14 +258,6 @@ export default function App() {
               {id === 'editor' ? 'Editor' : id === 'terminal' ? 'Terminal' : 'ctlsurf'}
             </button>
           ))}
-          <select
-            value={selectedAgent?.id || ''}
-            onChange={(e) => handleAgentChange(e.target.value)}
-          >
-            {agents.map(a => (
-              <option key={a.id} value={a.id}>{a.name}</option>
-            ))}
-          </select>
         </div>
       </div>
 
@@ -270,6 +278,24 @@ export default function App() {
 
       <StatusBar wsStatus={wsStatus} cwd={cwd} onChangeCwd={handleChangeCwd} />
       <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
+
+      {showAgentPicker && agents.length > 0 && (
+        <AgentPicker
+          agents={agents}
+          cwd={cwd || ''}
+          onSelect={(agent) => {
+            setSelectedAgent(agent)
+            setShowAgentPicker(false)
+          }}
+          onChangeCwd={async () => {
+            const newCwd = await window.worker.browseCwd()
+            if (newCwd) {
+              setCwd(newCwd)
+              cwdRef.current = newCwd
+            }
+          }}
+        />
+      )}
     </div>
   )
 }

package/src/renderer/components/AgentPicker.tsx

@@ -0,0 +1,49 @@
+interface AgentConfig {
+  id: string
+  name: string
+  command: string
+  args: string[]
+  description: string
+}
+
+interface AgentPickerProps {
+  agents: AgentConfig[]
+  cwd: string
+  onSelect: (agent: AgentConfig) => void
+  onChangeCwd: () => void
+}
+
+export function AgentPicker({ agents, cwd, onSelect, onChangeCwd }: AgentPickerProps) {
+  const home = typeof window !== 'undefined' ? '' : ''
+  // Shorten home dir for display
+  const displayPath = cwd.replace(/^\/Users\/[^/]+/, '~')
+
+  return (
+    <div className="agent-picker-overlay">
+      <div className="agent-picker-modal">
+        <div className="agent-picker-brand">ctlsurf</div>
+
+        <div className="agent-picker-cwd" onClick={onChangeCwd} title="Click to change directory">
+          <span className="agent-picker-cwd-icon">&#x1F4C2;</span>
+          <span className="agent-picker-cwd-path">{displayPath}</span>
+          <span className="agent-picker-cwd-change">change</span>
+        </div>
+
+        <div className="agent-picker-title">SELECT AGENT</div>
+        <div className="agent-picker-list">
+          {agents.map(a => (
+            <button
+              key={a.id}
+              className="agent-picker-item"
+              onClick={() => onSelect(a)}
+            >
+              <span className="agent-picker-name">{a.name}</span>
+              <span className="agent-picker-desc">{a.description}</span>
+            </button>
+          ))}
+        </div>
+        <div className="agent-picker-hint">Select an agent to start</div>
+      </div>
+    </div>
+  )
+}

package/src/renderer/styles.css

@@ -82,6 +82,36 @@ html, body, #root {
   background: #1f2335;
 }
 
+.titlebar-separator {
+  width: 1px;
+  height: 16px;
+  background: #3b3d57;
+  margin: 0 4px;
+}
+
+.titlebar-agent-btn {
+  background: #2a2b3d;
+  color: #565f89;
+  border: 1px solid #3b3d57;
+  border-radius: 4px;
+  padding: 2px 12px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.titlebar-agent-btn:hover {
+  color: #a9b1d6;
+  border-color: #565f89;
+}
+
+.titlebar-agent-btn.active {
+  color: #1a1b26;
+  background: #7aa2f7;
+  border-color: #7aa2f7;
+  font-weight: 600;
+}
+
 /* Main content area */
 .main-content {
   flex: 1;
@@ -530,6 +560,122 @@ html, body, #root {
   font-size: 13px;
 }
 
+/* Agent picker modal */
+.agent-picker-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.agent-picker-modal {
+  background: #1f2335;
+  border: 1px solid #3b3d57;
+  border-radius: 12px;
+  padding: 32px 40px;
+  min-width: 360px;
+  text-align: center;
+}
+
+.agent-picker-brand {
+  font-size: 22px;
+  font-weight: 700;
+  color: #7aa2f7;
+  margin-bottom: 20px;
+  letter-spacing: 0.5px;
+}
+
+.agent-picker-cwd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 16px;
+  margin-bottom: 20px;
+  background: #16161e;
+  border: 1px solid #2a2b3d;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.agent-picker-cwd:hover {
+  border-color: #7aa2f7;
+}
+
+.agent-picker-cwd-icon {
+  font-size: 14px;
+}
+
+.agent-picker-cwd-path {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  color: #a9b1d6;
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-picker-cwd-change {
+  font-size: 11px;
+  color: #7aa2f7;
+  flex-shrink: 0;
+}
+
+.agent-picker-title {
+  font-size: 11px;
+  color: #565f89;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.agent-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.agent-picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: #16161e;
+  border: 1px solid #2a2b3d;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+}
+
+.agent-picker-item:hover {
+  border-color: #7aa2f7;
+  background: #1a1b2e;
+}
+
+.agent-picker-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #c0caf5;
+}
+
+.agent-picker-desc {
+  font-size: 11px;
+  color: #565f89;
+}
+
+.agent-picker-hint {
+  margin-top: 20px;
+  font-size: 11px;
+  color: #414868;
+}
+
 /* Settings dialog */
 .settings-overlay {
   position: fixed;