@phenx-inc/ctlsurf 0.15.2 → 0.16.1

package/src/renderer/components/TerminalPanel.tsx

@@ -104,6 +104,7 @@ interface AgentConfig {
 interface TerminalPanelProps {
   tabId: string
   agent: AgentConfig | null
+  sessionVersion: number
   onSpawn: (tabId: string, agent: AgentConfig) => Promise<void>
   onExit: (tabId: string) => void
   isActive: boolean
@@ -118,7 +119,7 @@ type TermState = {
   fitAddon: FitAddon
   unsubData: (() => void) | null
   unsubExit: (() => void) | null
-  spawnedAgentId: string | null
+  spawnedSessionKey: string | null
   // Follow mode: while true, new output keeps the view pinned to the bottom.
   pinnedToBottom: boolean
   // When NOT following, the absolute buffer line held at the top of the
@@ -126,7 +127,7 @@ type TermState = {
   // (neither down to the bottom, nor up to the top — the old bug).
   anchorLine: number | null
   // One-shot flag set by a real user scroll gesture (wheel / scroll keys) and
-  // consumed by the very next onScroll, so a redraw firing onScroll right after
+  // consumed by the next terminal/viewport scroll, so a redraw right after
   // a gesture isn't mistaken for one. Spinner redraws (~10x/s while "thinking")
   // would otherwise be misread as user intent and re-pin to the bottom.
   userScrollPending: boolean
@@ -189,6 +190,22 @@ function markGesture(tabId: string): void {
   if (s) s.userScrollPending = true
 }
 
+function followLatest(state: TermState): void {
+  state.userScrollPending = false
+  setPinned(state, true)
+  reassert(state)
+}
+
+function rememberScrollPosition(state: TermState): void {
+  state.userScrollPending = false
+  if (isAtBottom(state.terminal)) {
+    setPinned(state, true)
+  } else {
+    state.anchorLine = state.terminal.buffer.active.viewportY
+    setPinned(state, false)
+  }
+}
+
 function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): { terminal: Terminal; fitAddon: FitAddon } {
   const existing = _terminals.get(tabId)
   if (existing) {
@@ -215,7 +232,9 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace",
     theme: currentTheme().terminal,
     scrollback: 10000,
-    scrollOnUserInput: true,
+    // Follow explicit keyboard/paste input below. xterm also counts mouse
+    // reports as user input, which must not pull someone out of scrollback.
+    scrollOnUserInput: false,
     allowTransparency: false
   })
 
@@ -280,7 +299,7 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
     fitAddon,
     unsubData: null,
     unsubExit: null,
-    spawnedAgentId: null,
+    spawnedSessionKey: null,
     pinnedToBottom: true,
     anchorLine: null,
     userScrollPending: false,
@@ -301,19 +320,14 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
       reassert(state)
       return
     }
-    state.userScrollPending = false
-    if (isAtBottom(terminal)) {
-      setPinned(state, true)
-    } else {
-      state.anchorLine = terminal.buffer.active.viewportY
-      setPinned(state, false)
-    }
+    rememberScrollPosition(state)
   })
 
-  // Send keystrokes to pty — typing always returns to (and follows) the bottom.
+  // onData includes automatic cursor/device/color replies and focus/mouse
+  // reports, not just keystrokes. Codex's terminal queries used to re-enable
+  // follow mode here, snapping the viewport down while reading old output.
+  terminal.onKey(() => followLatest(state))
   terminal.onData((data) => {
-    setPinned(state, true)
-    terminal.scrollToBottom()
     window.worker.writePty(tabId, data)
   })
 
@@ -343,6 +357,29 @@ export function focusTerminal(tabId: string): void {
   _terminals.get(tabId)?.terminal.focus()
 }
 
+// Capture the rendered transcript before a live session is replaced. This is
+// intentionally sourced from the terminal the user actually saw, so it also
+// works for shells, custom agents, and remote SSH sessions whose native JSONL
+// transcripts are unavailable on this machine.
+const MAX_HANDOFF_CHARS = 1_000_000
+export function captureTerminalSession(tabId: string): string {
+  const terminal = _terminals.get(tabId)?.terminal
+  if (!terminal) return ''
+  const buffer = terminal.buffer.active
+  const lines: string[] = []
+  for (let i = 0; i < buffer.length; i++) {
+    const line = buffer.getLine(i)
+    if (!line) continue
+    const text = line.translateToString(true)
+    if (line.isWrapped && lines.length > 0) lines[lines.length - 1] += text
+    else lines.push(text)
+  }
+  while (lines.length && lines[lines.length - 1].trim() === '') lines.pop()
+  const text = lines.join('\n').trim()
+  if (text.length <= MAX_HANDOFF_CHARS) return text
+  return `[Earlier terminal output omitted; showing the last ${MAX_HANDOFF_CHARS.toLocaleString()} characters.]\n${text.slice(-MAX_HANDOFF_CHARS)}`
+}
+
 export function destroyTerminal(tabId: string): void {
   const state = _terminals.get(tabId)
   if (!state) return
@@ -354,7 +391,7 @@ export function destroyTerminal(tabId: string): void {
 
 // ─── Component ───────────────────────────────────────
 
-export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: TerminalPanelProps) {
+export function TerminalPanel({ tabId, agent, sessionVersion, onSpawn, onExit, isActive }: TerminalPanelProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [menu, setMenu] = useState<{ x: number; y: number } | null>(null)
   // Snapshot panel: the ⋮ button freezes the visible screen text into a static,
@@ -370,8 +407,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
   const jumpToLatest = () => {
     const s = _terminals.get(tabId)
     if (!s) return
-    setPinned(s, true)
-    s.terminal.scrollToBottom()
+    followLatest(s)
     s.terminal.focus()
   }
 
@@ -472,15 +508,33 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     const attached = _terminals.get(tabId)
     if (attached) reassert(attached)
 
-    // Wheel over the terminal is an explicit user scroll — stamp it so onScroll
-    // treats the resulting move as intentional (not an involuntary redraw jump).
-    // Capture is important: xterm handles wheel events on a descendant and
-    // emits onScroll synchronously. A bubbling listener runs too late, causing
-    // streamed Codex output to mistake the wheel scroll for a redraw and snap
-    // the viewport straight back to the bottom.
+    // Wheel handling starts inside xterm, so record intent in capture phase.
     const onWheel = () => markGesture(tabId)
     terminal.element?.addEventListener('wheel', onWheel, { capture: true, passive: true })
 
+    // xterm 5.5 suppresses its public onScroll event for native viewport
+    // scrolling. Observe the DOM event after xterm updates buffer.viewportY,
+    // otherwise a wheel gesture never pauses follow mode before the next write.
+    const viewport = terminal.element?.querySelector('.xterm-viewport')
+    const onViewportScroll = () => {
+      const state = _terminals.get(tabId)
+      if (state && !state.holding && state.userScrollPending) rememberScrollPosition(state)
+    }
+    viewport?.addEventListener('scroll', onViewportScroll)
+
+    // Paste and IME/emoji input can bypass onKey. Capture them before xterm
+    // handles the event (paste stops propagation inside xterm).
+    const onTextInput = () => {
+      const state = _terminals.get(tabId)
+      if (state) followLatest(state)
+    }
+    const onPaste = (event: ClipboardEvent) => {
+      if (event.clipboardData?.getData('text/plain')) onTextInput()
+    }
+    terminal.textarea?.addEventListener('paste', onPaste, true)
+    terminal.textarea?.addEventListener('input', onTextInput, true)
+    terminal.textarea?.addEventListener('compositionend', onTextInput, true)
+
     // Resize handling — skip when the container is hidden (display:none → 0x0),
     // otherwise fit() reports a tiny size and the PTY gets stuck at ~4 cols
     // until the user switches back.
@@ -509,18 +563,25 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       window.removeEventListener('resize', handleResize)
       observer.disconnect()
       terminal.element?.removeEventListener('wheel', onWheel, true)
+      viewport?.removeEventListener('scroll', onViewportScroll)
+      terminal.textarea?.removeEventListener('paste', onPaste, true)
+      terminal.textarea?.removeEventListener('input', onTextInput, true)
+      terminal.textarea?.removeEventListener('compositionend', onTextInput, true)
       // Do NOT dispose terminal or unsub PTY listeners — they persist across remounts
     }
   }, [tabId, onExit])
 
-  // Spawn agent when it changes for this tab
+  // Spawn whenever the selected agent or session version changes. The version
+  // makes choosing a new directory (or explicitly restarting the same agent)
+  // observable even though the agent id itself did not change.
   useEffect(() => {
     if (!agent) return
     const state = _terminals.get(tabId)
     if (!state) return
-    if (state.spawnedAgentId === agent.id) return
+    const sessionKey = `${agent.id}:${sessionVersion}`
+    if (state.spawnedSessionKey === sessionKey) return
 
-    state.spawnedAgentId = agent.id
+    state.spawnedSessionKey = sessionKey
     state.terminal.clear()
 
     onSpawn(tabId, agent).then(() => {
@@ -534,7 +595,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       }
       state.terminal.focus()
     })
-  }, [tabId, agent, onSpawn])
+  }, [tabId, agent, sessionVersion, onSpawn])
 
   // Focus terminal when tab becomes active — delay fit to let the container get its layout dimensions
   useEffect(() => {

package/src/renderer/styles.css

@@ -1604,6 +1604,73 @@ html, body, #root {
   letter-spacing: 1px;
 }
 
+.agent-picker-warning {
+  margin: -2px 0 14px;
+  padding: 9px 11px;
+  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--warning) 9%, transparent);
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.45;
+  text-align: left;
+}
+
+.agent-handoff-options {
+  display: grid;
+  gap: 7px;
+  margin: 0 0 14px;
+  padding: 0;
+  border: 0;
+  text-align: left;
+}
+
+.agent-handoff-options legend {
+  margin-bottom: 7px;
+  color: var(--text-muted);
+  font-size: 10px;
+  letter-spacing: 0.8px;
+}
+
+.agent-handoff-options label {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding: 9px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+  background: var(--bg-chrome);
+  cursor: pointer;
+}
+
+.agent-handoff-options label.selected {
+  border-color: var(--accent);
+  background: var(--bg-chrome-hi);
+}
+
+.agent-handoff-options input {
+  margin-top: 2px;
+  accent-color: var(--accent);
+}
+
+.agent-handoff-options span,
+.agent-handoff-options strong,
+.agent-handoff-options small {
+  display: block;
+}
+
+.agent-handoff-options strong {
+  color: var(--text-bright);
+  font-size: 12px;
+}
+
+.agent-handoff-options small {
+  margin-top: 2px;
+  color: var(--text-muted);
+  font-size: 10px;
+  line-height: 1.35;
+}
+
 .agent-picker-list {
   display: flex;
   flex-direction: column;
@@ -1664,6 +1731,27 @@ html, body, #root {
   accent-color: var(--accent);
 }
 
+.project-notify-option {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.project-notify-option input {
+  margin-top: 2px;
+}
+
+.project-notify-option span,
+.project-notify-option small {
+  display: block;
+}
+
+.project-notify-option small {
+  margin-top: 2px;
+  color: var(--text-muted);
+  font-size: 10px;
+  line-height: 1.35;
+}
+
 /* ─── Remote (SSH) connect ───────────────────────── */
 
 .remote-section-label {