@phenx-inc/ctlsurf 0.1.2 → 0.1.4

package/src/main/bridge.ts

@@ -1,66 +1,31 @@
-import { CtlsurfApi } from './ctlsurfApi'
+import { WorkerWsClient } from './workerWs'
 
 /**
  * Conversation Bridge
  *
- * Taps the pty output stream and logs chunks to a ctlsurf log block.
- * Generic approach: buffers terminal output and flushes periodically.
+ * Taps the pty output stream, strips ANSI codes, buffers output,
+ * and sends cleaned chunks to the backend via WebSocket for S3-backed chat logging.
  */
 export class ConversationBridge {
-  private api: CtlsurfApi
-  private logBlockId: string | null = null
-  private pageId: string | null = null
+  private wsClient: WorkerWsClient | null = null
   private buffer: string = ''
   private flushTimer: ReturnType<typeof setTimeout> | null = null
   private flushIntervalMs: number = 3000 // flush every 3 seconds
-  private agentName: string = 'shell'
   private sessionActive: boolean = false
   private inputBuffer: string = ''
 
-  constructor(api: CtlsurfApi) {
-    this.api = api
+  setWsClient(ws: WorkerWsClient): void {
+    this.wsClient = ws
   }
 
   /**
    * Start a new logging session.
-   * Creates a log block on the given dataspace page.
    */
-  async startSession(dataspacePageId: string, agentName: string, cwd: string): Promise<void> {
-    if (!this.api.getApiKey()) {
-      console.log('[bridge] No API key set, skipping session logging')
-      return
-    }
-
-    this.pageId = dataspacePageId
-    this.agentName = agentName
+  startSession(): void {
     this.buffer = ''
     this.inputBuffer = ''
-
-    try {
-      const timestamp = new Date().toISOString().replace('T', ' ').substring(0, 19)
-      const block = await this.api.createBlock(dataspacePageId, {
-        type: 'log',
-        title: `${agentName} — ${timestamp} — ${cwd}`,
-        props: {
-          entries: [],
-          max_entries: 1000
-        }
-      })
-      this.logBlockId = block.id
-      this.sessionActive = true
-
-      // Log session start
-      await this.api.appendLog(this.logBlockId, 'session_start', `Started ${agentName} session`, {
-        agent: agentName,
-        cwd,
-        timestamp
-      })
-
-      console.log(`[bridge] Session started, log block: ${this.logBlockId}`)
-    } catch (err: any) {
-      console.error(`[bridge] Failed to start session:`, err.message)
-      this.sessionActive = false
-    }
+    this.sessionActive = true
+    console.log('[bridge] Session started')
   }
 
   /**
@@ -90,17 +55,17 @@ export class ConversationBridge {
     if (data.includes('\r') || data.includes('\n')) {
       const input = this.inputBuffer.trim()
       if (input.length > 0) {
-        this.logEntry('user_input', input)
+        this.sendEntry('user_input', input)
       }
       this.inputBuffer = ''
     }
   }
 
   /**
-   * Flush buffered output to ctlsurf.
+   * Flush buffered output via WebSocket.
    */
-  private async flush(): Promise<void> {
-    if (!this.logBlockId || this.buffer.length === 0) return
+  private flush(): void {
+    if (this.buffer.length === 0) return
 
     const chunk = this.buffer
     this.buffer = ''
@@ -109,42 +74,29 @@ export class ConversationBridge {
     const cleaned = stripAnsi(chunk)
     if (cleaned.trim().length === 0) return
 
-    try {
-      await this.api.appendLog(this.logBlockId, 'terminal_output', cleaned)
-    } catch (err: any) {
-      console.error(`[bridge] Failed to append log:`, err.message)
-    }
+    this.sendEntry('terminal_output', cleaned)
   }
 
   /**
-   * Log a specific entry immediately.
+   * Send an entry to the backend via WebSocket.
    */
-  private async logEntry(action: string, message: string, data?: Record<string, unknown>): Promise<void> {
-    if (!this.logBlockId) return
-    try {
-      await this.api.appendLog(this.logBlockId, action, message, data)
-    } catch (err: any) {
-      console.error(`[bridge] Failed to log entry:`, err.message)
-    }
+  private sendEntry(type: string, content: string): void {
+    if (!this.wsClient) return
+    this.wsClient.sendChatLog({
+      ts: new Date().toISOString(),
+      type,
+      content,
+    })
   }
 
   /**
    * End the current session.
    */
-  async endSession(exitCode?: number): Promise<void> {
-    if (!this.sessionActive || !this.logBlockId) return
+  endSession(): void {
+    if (!this.sessionActive) return
 
     // Flush remaining buffer
-    await this.flush()
-
-    try {
-      await this.api.appendLog(this.logBlockId, 'session_end', `Session ended (exit code: ${exitCode ?? 'unknown'})`, {
-        agent: this.agentName,
-        exitCode
-      })
-    } catch (err: any) {
-      console.error(`[bridge] Failed to log session end:`, err.message)
-    }
+    this.flush()
 
     if (this.flushTimer) {
       clearTimeout(this.flushTimer)
@@ -152,7 +104,6 @@ export class ConversationBridge {
     }
 
     this.sessionActive = false
-    this.logBlockId = null
     this.buffer = ''
     this.inputBuffer = ''
     console.log('[bridge] Session ended')

package/src/main/orchestrator.ts

@@ -57,7 +57,7 @@ export class Orchestrator {
 
   // Core services
   readonly ctlsurfApi = new CtlsurfApi()
-  readonly bridge = new ConversationBridge(this.ctlsurfApi)
+  readonly bridge = new ConversationBridge()
   readonly workerWs: WorkerWsClient
 
   // State
@@ -105,6 +105,8 @@ export class Orchestrator {
         this.ptyManager?.write(data)
       },
     })
+
+    this.bridge.setWsClient(this.workerWs)
   }
 
   // ─── Settings ───────────────────────────────────
@@ -282,7 +284,7 @@ export class Orchestrator {
 
   async spawnAgent(agent: AgentConfig, cwd: string): Promise<void> {
     if (this.ptyManager) {
-      await this.bridge.endSession()
+      this.bridge.endSession()
       this.ptyManager.kill()
     }
 
@@ -303,19 +305,15 @@ export class Orchestrator {
 
     const thisPtyManager = this.ptyManager
 
-    this.ptyManager.onExit(async (exitCode: number) => {
+    this.ptyManager.onExit((exitCode: number) => {
       this.events.onPtyExit(exitCode)
-      await this.bridge.endSession(exitCode)
+      this.bridge.endSession()
       if (thisPtyManager === this.ptyManager && this.currentAgent && isCodingAgent(this.currentAgent)) {
         this.workerWs.disconnect()
       }
     })
 
-    const profile = this.getActiveProfile()
-    const dataspacePageId = profile.dataspacePageId || process.env.CTLSURF_DATASPACE_PAGE_ID || ''
-    if (dataspacePageId && this.ctlsurfApi.getApiKey()) {
-      await this.bridge.startSession(dataspacePageId, agent.name, cwd)
-    }
+    this.bridge.startSession()
 
     if (isCodingAgent(agent)) {
       this.connectWorkerWs(agent, cwd)
@@ -336,7 +334,7 @@ export class Orchestrator {
   }
 
   async killAgent(): Promise<void> {
-    await this.bridge.endSession()
+    this.bridge.endSession()
     this.ptyManager?.kill()
     this.ptyManager = null
     if (this.currentAgent && isCodingAgent(this.currentAgent)) {
@@ -392,7 +390,7 @@ export class Orchestrator {
   // ─── Shutdown ───────────────────────────────────
 
   async shutdown(): Promise<void> {
-    await this.bridge.endSession()
+    this.bridge.endSession()
     this.ptyManager?.kill()
     this.ptyManager = null
     this.workerWs.disconnect()

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 */ }
@@ -130,6 +134,10 @@ export class WorkerWsClient {
     this.send({ type: 'terminal_resize', cols, rows })
   }
 
+  sendChatLog(entry: { type: string; content: string; ts?: string }): void {
+    this.send({ type: 'chat_log', entry })
+  }
+
   private doConnect(): void {
     if (!this.apiKey || !this.registration) {
       log('[worker-ws] No API key or registration, skipping connect')
@@ -169,7 +177,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 +280,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;