@phenx-inc/ctlsurf 0.15.1 → 0.16.0

package/src/renderer/App.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { TerminalPanel, destroyTerminal, focusTerminal } from './components/TerminalPanel'
+import { TerminalPanel, captureTerminalSession, destroyTerminal, focusTerminal } from './components/TerminalPanel'
 import { FloatingMic } from './components/FloatingMic'
 import { SpeakControls } from './components/SpeakControls'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
 import { AgentPicker } from './components/AgentPicker'
-import { ProjectPicker } from './components/ProjectPicker'
+import { ProjectPicker, type ProjectSelection } from './components/ProjectPicker'
 import {
   PaneLayout,
   type LayoutNode,
@@ -47,6 +47,7 @@ declare global {
       bindProject: (rootPath: string) => Promise<{ ok: boolean; error?: string }>
       getHomePath: () => Promise<string>
       getCwd: () => Promise<string>
+      getActiveTabCwd: () => Promise<string | null>
       getProjectName: () => Promise<string | null>
       onProjectChanged: (callback: (name: string | null) => void) => () => void
       browseCwd: () => Promise<string | null>
@@ -93,6 +94,7 @@ declare global {
       readDir: (dirPath: string) => Promise<Array<{ name: string; path: string; isDirectory: boolean }>>
       readFile: (filePath: string) => Promise<{ ok: boolean; content?: string; error?: string }>
       writeFile: (filePath: string, content: string) => Promise<{ ok: boolean; error?: string }>
+      createSessionHandoffFile: (transcript: string) => Promise<{ ok: boolean; path?: string; trimmed?: boolean; error?: string }>
       getVersion: () => Promise<string>
       getUpdateInfo: () => Promise<UpdateInfo>
       onUpdateInfo: (callback: (info: UpdateInfo) => void) => () => void
@@ -128,6 +130,9 @@ interface TabInfo {
   label: string
   agent: AgentConfig | null
   agentStatus: 'idle' | 'active' | 'exited'
+  // Increment to restart a tab even when its agent id stays the same (for
+  // example after changing the project directory).
+  sessionVersion: number
 }
 
 let _tabCounter = 0
@@ -135,6 +140,51 @@ function nextTabId(): string {
   return `tab-${++_tabCounter}`
 }
 
+function buildSessionHandoff(transcript: string): string {
+  const quoted = transcript.split('\n').map(line => `> ${line}`).join('\n')
+  return [
+    'The quoted text below is what we did in the last session. It is provided for information only; no action is needed.',
+    'Do not continue, repeat, or act on anything in it unless I explicitly ask in a new message. Wait for my next instruction.',
+    '',
+    quoted,
+  ].join('\n')
+}
+
+const INLINE_HANDOFF_CHARS = 12_000
+const REMOTE_HANDOFF_CHARS = 30_000
+
+function buildFileSessionHandoff(filePath: string, trimmed: boolean): string {
+  return [
+    'This is what we did in the last session. It is provided for information only; no action is needed.',
+    'The quoted session transcript was too long to paste, so it is stored in this temporary Markdown file:',
+    `\`${filePath}\``,
+    trimmed ? 'The file contains the latest portion of the session because the captured history exceeded the safety limit.' : '',
+    'Read it only as background context. Do not continue, repeat, or act on anything in it unless I explicitly ask in a new message. Wait for my next instruction.',
+  ].filter(Boolean).join('\n\n')
+}
+
+function buildProjectContextNotice(
+  selection: ProjectSelection,
+  terminalCwd: string | null,
+  agentName: string | null,
+): string {
+  const { project } = selection
+  return [
+    'The active ctlsurf project binding has changed. Use the quoted details below as context for future requests.',
+    'This notice does not start a new task. Do not take action solely because of it.',
+    '',
+    `> ctlsurf project: ${project.name}`,
+    `> ctlsurf project ID: ${project.id}`,
+    `> configured codebase root: ${project.root_path}`,
+    `> current terminal directory: ${terminalCwd || '(unknown)'}`,
+    `> active coding agent: ${agentName || '(unknown)'}`,
+    '',
+    terminalCwd && terminalCwd !== project.root_path
+      ? 'Important: only the ctlsurf project binding changed; the running terminal directory was not changed.'
+      : 'The terminal directory matches the selected project codebase root.',
+  ].join('\n')
+}
+
 export default function App() {
   const [agents, setAgents] = useState<AgentConfig[]>([])
   const [sessionStart, setSessionStart] = useState<Date | null>(null)
@@ -154,7 +204,7 @@ export default function App() {
   // Multi-tab state
   const [tabs, setTabs] = useState<TabInfo[]>(() => {
     const id = nextTabId()
-    return [{ id, label: 'Terminal 1', agent: null, agentStatus: 'idle' }]
+    return [{ id, label: 'Terminal 1', agent: null, agentStatus: 'idle', sessionVersion: 0 }]
   })
   const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id)
   const [trackingActive, setTrackingActive] = useState(false)
@@ -292,23 +342,49 @@ export default function App() {
   }, [activeTabId])
 
   const cwdRef = useRef<string | null>(null)
+  const pendingHandoffsRef = useRef<Map<string, string>>(new Map())
+  const handoffTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())
+  const handoffGenerationsRef = useRef<Map<string, number>>(new Map())
 
   const handleSpawn = useCallback(async (tabId: string, agent: AgentConfig) => {
+    const oldTimer = handoffTimersRef.current.get(tabId)
+    if (oldTimer) clearTimeout(oldTimer)
+    handoffTimersRef.current.delete(tabId)
+    const handoffGeneration = (handoffGenerationsRef.current.get(tabId) || 0) + 1
+    handoffGenerationsRef.current.set(tabId, handoffGeneration)
     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(tabId, agent, spawnCwd)
-  }, [])
+    try {
+      await window.worker.spawnAgent(tabId, agent, spawnCwd)
+    } catch (err) {
+      console.error('[session] Failed to start agent', err)
+      pendingHandoffsRef.current.delete(tabId)
+      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, agentStatus: 'exited' } : t))
+      return
+    }
 
-  const handleAgentChange = useCallback(async (agentId: string) => {
-    const agent = agents.find(a => a.id === agentId)
-    if (agent) {
-      await window.worker.killPty(activeTabId)
-      setTabs(prev => prev.map(t => t.id === activeTabId ? { ...t, agent, agentStatus: 'idle' } : t))
+    const handoff = pendingHandoffsRef.current.get(tabId)
+    pendingHandoffsRef.current.delete(tabId)
+    if (handoff) {
+      // Give the replacement CLI time to paint and enter its input mode. Input
+      // is still generation-guarded so another quick restart cannot receive a
+      // handoff intended for its predecessor.
+      const timer = setTimeout(() => {
+        if (handoffGenerationsRef.current.get(tabId) !== handoffGeneration) return
+        window.worker.writePty(tabId, handoff)
+        focusTerminal(tabId)
+        setTimeout(() => {
+          if (handoffGenerationsRef.current.get(tabId) === handoffGeneration) {
+            window.worker.writePty(tabId, '\r')
+          }
+        }, 120)
+      }, 1200)
+      handoffTimersRef.current.set(tabId, timer)
     }
-  }, [agents, activeTabId])
+  }, [])
 
   const handleExit = useCallback((tabId: string) => {
     setTimeout(() => {
@@ -319,13 +395,17 @@ export default function App() {
   const handleChangeCwd = useCallback(async () => {
     const newCwd = await window.worker.browseCwd()
     const activeTab = tabs.find(t => t.id === activeTabId)
-    if (!newCwd || !activeTab?.agent) return
+    if (!newCwd) return
     cwdRef.current = newCwd
     setCwd(newCwd)
-    await window.worker.killPty(activeTabId)
-    setTabs(prev => prev.map(t => t.id === activeTabId ? { ...t, agentStatus: 'active' } : t))
-    setSessionStart(new Date())
-    await window.worker.spawnAgent(activeTabId, activeTab.agent, newCwd)
+    if (!activeTab?.agent) return
+    pendingHandoffsRef.current.delete(activeTabId)
+    // TerminalPanel observes the version bump and asks the main process to
+    // replace the old session atomically. Avoid a separate kill call: its late
+    // exit event could otherwise race the replacement session.
+    setTabs(prev => prev.map(t => t.id === activeTabId
+      ? { ...t, agentStatus: 'idle', sessionVersion: t.sessionVersion + 1 }
+      : t))
   }, [tabs, activeTabId])
 
   // ─── Tab management ─────────────────────────────
@@ -334,18 +414,50 @@ export default function App() {
     // 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' }])
+    setTabs(prev => [...prev, { id, label: `Terminal ${num}`, agent: null, agentStatus: 'idle', sessionVersion: 0 }])
     setActiveTabId(id)
     setPickerTargetTabId(id)
     setShowAgentPicker(true)
   }, [])
 
-  const handlePickerSelect = useCallback((agent: AgentConfig) => {
+  const handlePickerSelect = useCallback(async (agent: AgentConfig, selectedCwd: string, handoff: 'fresh' | 'context') => {
     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
-      ))
+      if (handoff === 'context') {
+        const transcript = captureTerminalSession(tabId)
+        if (!transcript) {
+          pendingHandoffsRef.current.delete(tabId)
+        } else if (transcript.length > INLINE_HANDOFF_CHARS && !agent.id.startsWith('remote-')) {
+          const result = await window.worker.createSessionHandoffFile(transcript)
+          if (result.ok && result.path) {
+            pendingHandoffsRef.current.set(tabId, buildFileSessionHandoff(result.path, !!result.trimmed))
+          } else {
+            console.warn('[session] Could not create handoff file; using a shortened inline handoff', result.error)
+            pendingHandoffsRef.current.set(tabId, buildSessionHandoff(transcript.slice(-REMOTE_HANDOFF_CHARS)))
+          }
+        } else {
+          // A local temp path is meaningless to an SSH-hosted agent, so remote
+          // handoffs remain inline and are capped to a manageable paste.
+          const inline = transcript.length > REMOTE_HANDOFF_CHARS
+            ? `[Earlier terminal output omitted.]\n${transcript.slice(-REMOTE_HANDOFF_CHARS)}`
+            : transcript
+          pendingHandoffsRef.current.set(tabId, buildSessionHandoff(inline))
+        }
+      } else {
+        pendingHandoffsRef.current.delete(tabId)
+      }
+      cwdRef.current = selectedCwd
+      setCwd(selectedCwd)
+      setTabs(prev => {
+        const matchingAgents = prev.filter(x => x.agent?.id === agent.id).length
+        return prev.map(t => t.id === tabId ? {
+          ...t,
+          agent,
+          agentStatus: 'idle',
+          label: `${agent.name} ${matchingAgents + (t.agent?.id === agent.id ? 0 : 1)}`,
+          sessionVersion: t.sessionVersion + 1,
+        } : t)
+      })
     }
     setShowAgentPicker(false)
     setPickerTargetTabId(null)
@@ -354,9 +466,31 @@ export default function App() {
     if (agent.id.startsWith('remote-')) {
       setShowProjectPicker(true)
     }
-  }, [pickerTargetTabId, tabs])
+  }, [pickerTargetTabId])
+
+  const openSessionPicker = useCallback(() => {
+    setPickerTargetTabId(activeTabId)
+    setShowAgentPicker(true)
+  }, [activeTabId])
+
+  const handleProjectPickerDone = useCallback(async (selection?: ProjectSelection) => {
+    setShowProjectPicker(false)
+    if (!selection?.notifyAgent) return
+    const activeAgent = tabs.find(t => t.id === activeTabId)?.agent
+    if (!activeAgent) return
+    const terminalCwd = await window.worker.getActiveTabCwd().catch(() => cwd)
+    const notice = buildProjectContextNotice(selection, terminalCwd, activeAgent.name)
+    window.worker.writePty(activeTabId, notice)
+    focusTerminal(activeTabId)
+    setTimeout(() => window.worker.writePty(activeTabId, '\r'), 120)
+  }, [activeTabId, cwd, tabs])
 
   const closeTab = useCallback(async (tabId: string) => {
+    pendingHandoffsRef.current.delete(tabId)
+    handoffGenerationsRef.current.set(tabId, (handoffGenerationsRef.current.get(tabId) || 0) + 1)
+    const handoffTimer = handoffTimersRef.current.get(tabId)
+    if (handoffTimer) clearTimeout(handoffTimer)
+    handoffTimersRef.current.delete(tabId)
     await window.worker.killPty(tabId)
     destroyTerminal(tabId)
     setTabs(prev => {
@@ -372,7 +506,7 @@ export default function App() {
         setActiveTabId(id)
         setPickerTargetTabId(id)
         setShowAgentPicker(true)
-        return [{ id, label: `Terminal ${num}`, agent: null, agentStatus: 'idle' }]
+        return [{ id, label: `Terminal ${num}`, agent: null, agentStatus: 'idle', sessionVersion: 0 }]
       }
       return next
     })
@@ -521,6 +655,7 @@ export default function App() {
                 <TerminalPanel
                   tabId={tab.id}
                   agent={tab.agent}
+                  sessionVersion={tab.sessionVersion}
                   onSpawn={handleSpawn}
                   onExit={handleExit}
                   isActive={tab.id === activeTabId}
@@ -541,12 +676,7 @@ export default function App() {
       <div className="titlebar">
         <span className="titlebar-title">
           ctlsurf
-          {projectName && (
-            <>
-              <span className="titlebar-title-sep">·</span>
-              <span className="titlebar-project" title={projectName}>{projectName}</span>
-            </>
-          )}
+          {projectName && <><span className="titlebar-title-sep">·</span><span className="titlebar-project" title={projectName}>{projectName}</span></>}
         </span>
         <div className="titlebar-controls">
           <button className="titlebar-btn" onClick={() => setShowSettings(true)} title="Settings">
@@ -605,19 +735,20 @@ export default function App() {
           </button>
           <SpeakControls remote={activeAgentIsRemote} />
           <span className="titlebar-separator" />
-          {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>
-            )
-          })}
+          <button
+            className="titlebar-agent-btn active"
+            onClick={openSessionPicker}
+            title="Change coding agent or project directory for the active terminal"
+          >
+            Agent: {tabs.find(t => t.id === activeTabId)?.agent?.name || 'Choose'} ▾
+          </button>
+          <button
+            className="titlebar-btn"
+            onClick={() => setShowProjectPicker(true)}
+            title="Change the ctlsurf project linked to the active session"
+          >
+            Project…
+          </button>
           <span className="titlebar-separator" />
           {ALL_PANE_IDS.map(id => (
             <button
@@ -655,18 +786,16 @@ export default function App() {
           agents={agents}
           cwd={cwd || ''}
           onSelect={handlePickerSelect}
-          onChangeCwd={async () => {
-            const newCwd = await window.worker.browseCwd()
-            if (newCwd) {
-              setCwd(newCwd)
-              cwdRef.current = newCwd
-            }
-          }}
+          onChangeCwd={() => window.worker.browseCwd()}
+          onCancel={tabs.find(t => t.id === pickerTargetTabId)?.agent
+            ? () => { setShowAgentPicker(false); setPickerTargetTabId(null) }
+            : undefined}
+          restarting={!!tabs.find(t => t.id === pickerTargetTabId)?.agent}
         />
       )}
 
       {showProjectPicker && (
-        <ProjectPicker onDone={() => setShowProjectPicker(false)} />
+        <ProjectPicker currentProject={projectName} onDone={handleProjectPickerDone} />
       )}
 
       {showFloatingMic && (

package/src/renderer/components/AgentPicker.tsx

@@ -12,15 +12,20 @@ interface AgentConfig {
 interface AgentPickerProps {
   agents: AgentConfig[]
   cwd: string
-  onSelect: (agent: AgentConfig) => void
-  onChangeCwd: () => void
+  onSelect: (agent: AgentConfig, cwd: string, handoff: 'fresh' | 'context') => void | Promise<void>
+  onChangeCwd: () => Promise<string | null>
+  onCancel?: () => void
+  restarting?: boolean
 }
 
-export function AgentPicker({ agents, cwd, onSelect, onChangeCwd }: AgentPickerProps) {
-  const displayPath = cwd.replace(/^\/Users\/[^/]+/, '~')
+export function AgentPicker({ agents, cwd, onSelect, onChangeCwd, onCancel, restarting = false }: AgentPickerProps) {
+  const [selectedCwd, setSelectedCwd] = useState(cwd)
+  const displayPath = selectedCwd.replace(/^\/Users\/[^/]+/, '~')
   const [logChat, setLogChat] = useState(false)
   const [loaded, setLoaded] = useState(false)
   const [remoteMode, setRemoteMode] = useState(false)
+  const [handoff, setHandoff] = useState<'fresh' | 'context'>('fresh')
+  const [switching, setSwitching] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -39,16 +44,27 @@ export function AgentPicker({ agents, cwd, onSelect, onChangeCwd }: AgentPickerP
   }
 
   const handleSelect = async (agent: AgentConfig) => {
+    if (switching) return
+    setSwitching(true)
     if (loaded) {
       try { await window.worker.setLogChat(logChat) } catch { /* ignore */ }
     }
-    onSelect(agent)
+    try {
+      await onSelect(agent, selectedCwd, handoff)
+    } finally {
+      setSwitching(false)
+    }
+  }
+
+  const changeCwd = async () => {
+    const next = await onChangeCwd()
+    if (next) setSelectedCwd(next)
   }
 
   if (remoteMode) {
     return (
       <RemoteConnect
-        onConnect={(agent) => { handleSelect(agent) }}
+        onConnect={(agent) => { void handleSelect(agent) }}
         onBack={() => setRemoteMode(false)}
       />
     )
@@ -59,19 +75,48 @@ export function AgentPicker({ agents, cwd, onSelect, onChangeCwd }: AgentPickerP
       <div className="agent-picker-modal">
         <div className="agent-picker-brand">ctlsurf</div>
 
-        <div className="agent-picker-cwd" onClick={onChangeCwd} title="Click to change directory">
+        <div className="agent-picker-cwd" onClick={() => void changeCwd()} 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-title">{restarting ? 'CHANGE SESSION' : 'SELECT AGENT'}</div>
+        {restarting && (
+          <>
+            <div className="agent-picker-warning">
+              Choosing an agent restarts this terminal and ends its current process.
+            </div>
+            <fieldset className="agent-handoff-options">
+              <legend>NEW SESSION CONTEXT</legend>
+              <label className={handoff === 'fresh' ? 'selected' : ''}>
+                <input
+                  type="radio"
+                  name="session-handoff"
+                  checked={handoff === 'fresh'}
+                  onChange={() => setHandoff('fresh')}
+                />
+                <span><strong>Start fresh</strong><small>Do not send anything from this terminal.</small></span>
+              </label>
+              <label className={handoff === 'context' ? 'selected' : ''}>
+                <input
+                  type="radio"
+                  name="session-handoff"
+                  checked={handoff === 'context'}
+                  onChange={() => setHandoff('context')}
+                />
+                <span><strong>Share previous context</strong><small>Quote it inline, or use a temporary file when the session is long.</small></span>
+              </label>
+            </fieldset>
+          </>
+        )}
         <div className="agent-picker-list">
           {agents.map(a => (
             <button
               key={a.id}
               className="agent-picker-item"
-              onClick={() => handleSelect(a)}
+              disabled={switching}
+              onClick={() => void handleSelect(a)}
             >
               <span className="agent-picker-name">{a.name}</span>
               <span className="agent-picker-desc">{a.description}</span>
@@ -79,6 +124,7 @@ export function AgentPicker({ agents, cwd, onSelect, onChangeCwd }: AgentPickerP
           ))}
           <button
             className="agent-picker-item"
+            disabled={switching}
             onClick={() => setRemoteMode(true)}
           >
             <span className="agent-picker-name">🌐 Remote (SSH)</span>
@@ -95,7 +141,12 @@ export function AgentPicker({ agents, cwd, onSelect, onChangeCwd }: AgentPickerP
           <span>Log chat to ctlsurf</span>
         </label>
 
-        <div className="agent-picker-hint">Select an agent to start</div>
+        <div className="agent-picker-hint">
+          {restarting ? 'Select an agent to restart in the directory above' : 'Select an agent to start'}
+        </div>
+        {onCancel && (
+          <button className="remote-link" disabled={switching} onClick={onCancel}>Cancel</button>
+        )}
       </div>
     </div>
   )

package/src/renderer/components/FloatingMic.tsx

@@ -15,10 +15,11 @@ interface FloatingMicProps {
   onHide: () => void
 }
 
-// Keep the button clear of the 38px titlebar and 24px status bar.
+// Keep the toolbar clear of the 38px titlebar, 24px status bar, and the
+// terminal's bottom input line.
 const EDGE = 20
 const TOP_MIN = 46
-const BOTTOM_GAP = 36
+const BOTTOM_GAP = 72
 
 function loadPos(): Pos | null {
   try {
@@ -71,17 +72,20 @@ export function FloatingMic({ onTranscript, onHide }: FloatingMicProps) {
     }
   }, [])
 
-  // First mount with no saved position: default to bottom-right.
+  // Default to bottom-right, and clamp saved positions on first mount too so
+  // increased chrome/input clearance applies to existing installations.
   useEffect(() => {
-    if (pos) return
-    const el = elRef.current
-    const w = el?.offsetWidth ?? 64
-    const h = el?.offsetHeight ?? 90
-    setPos({
-      x: window.innerWidth - w - EDGE,
-      y: window.innerHeight - h - BOTTOM_GAP,
+    setPos((current) => {
+      if (current) return clamp(current.x, current.y)
+      const el = elRef.current
+      const w = el?.offsetWidth ?? 64
+      const h = el?.offsetHeight ?? 90
+      return clamp(
+        window.innerWidth - w - EDGE,
+        window.innerHeight - h - BOTTOM_GAP,
+      )
     })
-  }, [pos])
+  }, [clamp])
 
   // Keep it reachable if the window shrinks.
   useEffect(() => {

package/src/renderer/components/ProjectPicker.tsx

@@ -1,26 +1,33 @@
 import { useEffect, useState } from 'react'
 
-interface Project {
+export interface Project {
   id: string
   name: string
   root_path: string
 }
 
+export interface ProjectSelection {
+  project: Project
+  notifyAgent: boolean
+}
+
 interface ProjectPickerProps {
-  /** Called when the user picks a project or skips — the overlay should close. */
-  onDone: () => void
+  /** Called when the user picks a project or closes without changing it. */
+  onDone: (selection?: ProjectSelection) => void
+  currentProject?: string | null
 }
 
 type State = 'loading' | 'ready' | 'error'
 
-// Shown right after a remote (SSH) session connects: lets the user bind it to a
-// ctlsurf project so chat logging, tickets, and remote-control attach there.
-export function ProjectPicker({ onDone }: ProjectPickerProps) {
+// Lets a running session bind (or rebind) to a ctlsurf project so chat logging,
+// tickets, remote-control, and the embedded project view follow that selection.
+export function ProjectPicker({ onDone, currentProject }: ProjectPickerProps) {
   const [state, setState] = useState<State>('loading')
   const [projects, setProjects] = useState<Project[]>([])
   const [errorMsg, setErrorMsg] = useState('')
   const [binding, setBinding] = useState(false)
   const [filter, setFilter] = useState('')
+  const [notifyAgent, setNotifyAgent] = useState(true)
 
   useEffect(() => {
     let cancelled = false
@@ -44,9 +51,19 @@ export function ProjectPicker({ onDone }: ProjectPickerProps) {
   const pick = async (p: Project) => {
     setBinding(true)
     try {
-      await window.worker.bindProject(p.root_path)
-    } catch { /* non-fatal — session still runs unbound */ }
-    onDone()
+      const result = await window.worker.bindProject(p.root_path)
+      if (!result.ok) {
+        setErrorMsg(result.error || 'Could not bind project')
+        setState('error')
+        setBinding(false)
+        return
+      }
+      onDone({ project: p, notifyAgent })
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : 'Could not bind project')
+      setState('error')
+      setBinding(false)
+    }
   }
 
   const shown = filter.trim()
@@ -60,7 +77,8 @@ export function ProjectPicker({ onDone }: ProjectPickerProps) {
       <div className="agent-picker-modal">
         <div className="agent-picker-brand">ctlsurf</div>
         <div className="agent-picker-title">SELECT CTLSURF PROJECT</div>
-        <div className="remote-target-line">Bind this remote session to a project</div>
+        <div className="remote-target-line">Bind the active session to a project</div>
+        {currentProject && <div className="remote-note">Currently linked to {currentProject}</div>}
 
         {state === 'loading' && (
           <div className="remote-status">
@@ -78,7 +96,7 @@ export function ProjectPicker({ onDone }: ProjectPickerProps) {
         {state === 'ready' && (
           <>
             {projects.length === 0 && (
-              <div className="remote-note">No ctlsurf projects found. You can skip and bind one later.</div>
+              <div className="remote-note">No ctlsurf projects found.</div>
             )}
 
             {projects.length > 6 && (
@@ -112,8 +130,21 @@ export function ProjectPicker({ onDone }: ProjectPickerProps) {
           </>
         )}
 
-        <button className="remote-link" disabled={binding} onClick={onDone}>
-          Skip — no project
+        <label className="agent-picker-option project-notify-option">
+          <input
+            type="checkbox"
+            checked={notifyAgent}
+            disabled={binding}
+            onChange={(e) => setNotifyAgent(e.target.checked)}
+          />
+          <span>
+            Tell the active agent about this project
+            <small>Includes the ctlsurf project and codebase details as context.</small>
+          </span>
+        </label>
+
+        <button className="remote-link" disabled={binding} onClick={() => onDone()}>
+          Close without changing
         </button>
       </div>
     </div>