@phenx-inc/ctlsurf 0.11.0 → 0.12.1

package/src/renderer/components/RemoteConnect.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useState } from 'react'
+
+interface AgentConfig {
+  id: string
+  name: string
+  command: string
+  args: string[]
+  description: string
+}
+
+interface SshHost {
+  alias: string
+  hostName?: string
+  user?: string
+}
+
+interface ProbeResult {
+  reachable: boolean
+  authRequired: boolean
+  error?: string
+  tmuxInstalled: boolean
+  sessions: string[]
+  ctlsurfSessions: string[]
+}
+
+interface RemoteConnectProps {
+  /** Called with the built ssh-backed agent once an action is chosen. */
+  onConnect: (agent: AgentConfig) => void
+  /** Return to the normal agent list. */
+  onBack: () => void
+}
+
+type Step = 'hosts' | 'probing' | 'action' | 'error'
+
+const TMUX_PREFIX = 'ctlsurf_'
+
+// Lowest free ctlsurf_N given the sessions already on the host (mirrors
+// nextSessionName in src/main/ssh.ts so the label is right before we connect).
+function nextSessionName(sessions: string[]): string {
+  const used = new Set(
+    sessions
+      .filter((s) => s.startsWith(TMUX_PREFIX))
+      .map((s) => parseInt(s.slice(TMUX_PREFIX.length), 10))
+      .filter((n) => Number.isInteger(n) && n > 0),
+  )
+  let n = 1
+  while (used.has(n)) n++
+  return `${TMUX_PREFIX}${n}`
+}
+
+export function RemoteConnect({ onConnect, onBack }: RemoteConnectProps) {
+  const [step, setStep] = useState<Step>('hosts')
+  const [configHosts, setConfigHosts] = useState<SshHost[]>([])
+  const [recents, setRecents] = useState<string[]>([])
+  const [manual, setManual] = useState('')
+  const [agentCmd, setAgentCmd] = useState<'claude' | ''>('claude') // '' = remote shell
+  const [target, setTarget] = useState('')
+  const [probe, setProbe] = useState<ProbeResult | null>(null)
+  const [errorMsg, setErrorMsg] = useState('')
+  const [password, setPassword] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    window.worker.sshListHosts().then((r) => {
+      if (cancelled) return
+      setConfigHosts(r.configHosts || [])
+      setRecents(r.recents || [])
+    }).catch(() => { /* no hosts */ })
+    return () => { cancelled = true }
+  }, [])
+
+  const startProbe = async (t: string) => {
+    const dest = t.trim()
+    if (!dest) return
+    setTarget(dest)
+    setStep('probing')
+    try {
+      const result = await window.worker.sshProbe(dest)
+      setProbe(result)
+      if (result.reachable || result.authRequired) {
+        setStep('action')
+      } else {
+        setErrorMsg(result.error || 'Could not connect')
+        setStep('error')
+      }
+    } catch (err: any) {
+      setErrorMsg(err?.message || 'Probe failed')
+      setStep('error')
+    }
+  }
+
+  const connect = async (action: unknown) => {
+    try {
+      const agent = await window.worker.sshBuildAgent(target, action, agentCmd)
+      // Hand the typed password (if any) to the main process for one-shot
+      // injection into ssh's prompt, then wipe it from component state. Blank =
+      // let ssh prompt in the terminal instead.
+      if (password) {
+        await window.worker.sshSetPassword(target, password).catch(() => { /* falls back to terminal prompt */ })
+      }
+      setPassword('')
+      window.worker.sshAddRecent(target).catch(() => { /* convenience only */ })
+      onConnect(agent)
+    } catch (err: any) {
+      setErrorMsg(err?.message || 'Failed to build connection')
+      setStep('error')
+    }
+  }
+
+  const passwordField = (
+    <div className="remote-pw">
+      <input
+        className="remote-input"
+        type="password"
+        placeholder="Password (optional — blank prompts in terminal)"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        autoCapitalize="off"
+        autoCorrect="off"
+        spellCheck={false}
+      />
+      <div className="remote-pw-hint">Used once for this connection — never stored.</div>
+    </div>
+  )
+
+  const agentLabel = agentCmd === 'claude' ? 'Claude Code' : 'shell'
+
+  // ─── Agent toggle (Claude Code vs shell), shared across steps ───
+  const agentToggle = (
+    <div className="remote-toggle">
+      <span className="remote-toggle-label">Run:</span>
+      <button
+        className={`remote-toggle-btn${agentCmd === 'claude' ? ' is-active' : ''}`}
+        onClick={() => setAgentCmd('claude')}
+      >Claude Code</button>
+      <button
+        className={`remote-toggle-btn${agentCmd === '' ? ' is-active' : ''}`}
+        onClick={() => setAgentCmd('')}
+      >Shell</button>
+    </div>
+  )
+
+  return (
+    <div className="agent-picker-overlay">
+      <div className="agent-picker-modal">
+        <div className="agent-picker-brand">ctlsurf</div>
+        <div className="agent-picker-title">CONNECT TO REMOTE</div>
+
+        {step === 'hosts' && (
+          <>
+            {agentToggle}
+
+            {recents.length > 0 && (
+              <>
+                <div className="remote-section-label">RECENT</div>
+                <div className="agent-picker-list">
+                  {recents.map((r) => (
+                    <button key={r} className="agent-picker-item" onClick={() => startProbe(r)}>
+                      <span className="agent-picker-name">{r}</span>
+                      <span className="agent-picker-desc">reconnect</span>
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+
+            {configHosts.length > 0 && (
+              <>
+                <div className="remote-section-label">~/.ssh/config</div>
+                <div className="agent-picker-list remote-host-scroll">
+                  {configHosts.map((h) => (
+                    <button key={h.alias} className="agent-picker-item" onClick={() => startProbe(h.alias)}>
+                      <span className="agent-picker-name">{h.alias}</span>
+                      <span className="agent-picker-desc">
+                        {h.user ? `${h.user}@` : ''}{h.hostName || ''}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+
+            <div className="remote-section-label">OR TYPE A HOST</div>
+            <form
+              className="remote-manual"
+              onSubmit={(e) => { e.preventDefault(); startProbe(manual) }}
+            >
+              <input
+                className="remote-input"
+                type="text"
+                placeholder="user@host"
+                value={manual}
+                onChange={(e) => setManual(e.target.value)}
+                autoCapitalize="off"
+                autoCorrect="off"
+                spellCheck={false}
+              />
+              <button className="remote-btn" type="submit" disabled={!manual.trim()}>Connect</button>
+            </form>
+
+            <button className="remote-link" onClick={onBack}>← back to agents</button>
+          </>
+        )}
+
+        {step === 'probing' && (
+          <div className="remote-status">
+            <div className="remote-spinner" />
+            <div>Connecting to <b>{target}</b>…</div>
+            <div className="remote-status-sub">Checking for tmux sessions</div>
+          </div>
+        )}
+
+        {step === 'action' && probe && (
+          <>
+            <div className="remote-target-line">
+              <b>{target}</b> · run {agentLabel}
+            </div>
+
+            {probe.authRequired && (
+              <>
+                <div className="remote-note">
+                  This host needs a password. Enter it below, or leave blank to
+                  type it at ssh's prompt in the terminal. Either way it is never stored.
+                </div>
+                {passwordField}
+              </>
+            )}
+
+            {/* Reattach existing sessions (only when we could enumerate them). */}
+            {probe.reachable && probe.sessions.length > 0 && (
+              <>
+                <div className="remote-section-label">REATTACH</div>
+                <div className="agent-picker-list">
+                  {[...probe.sessions]
+                    .sort((a, b) => (a.startsWith(TMUX_PREFIX) === b.startsWith(TMUX_PREFIX) ? 0 : a.startsWith(TMUX_PREFIX) ? -1 : 1))
+                    .map((s) => (
+                      <button
+                        key={s}
+                        className="agent-picker-item"
+                        onClick={() => connect({ kind: 'attach', session: s })}
+                      >
+                        <span className="agent-picker-name">{s}</span>
+                        <span className="agent-picker-desc">attach running tmux session</span>
+                      </button>
+                    ))}
+                </div>
+              </>
+            )}
+
+            <div className="remote-section-label">START</div>
+            <div className="agent-picker-list">
+              {/* New tmux session — when reachable+tmux, or password host (auto). */}
+              {((probe.reachable && probe.tmuxInstalled) || probe.authRequired) && (
+                <button
+                  className="agent-picker-item"
+                  onClick={() => {
+                    const session = probe.reachable ? nextSessionName(probe.sessions) : `${TMUX_PREFIX}1`
+                    connect(probe.reachable
+                      ? { kind: 'new-tmux', session }
+                      : { kind: 'auto', session })
+                  }}
+                >
+                  <span className="agent-picker-name">
+                    New tmux session ({probe.reachable ? nextSessionName(probe.sessions) : `${TMUX_PREFIX}1`})
+                  </span>
+                  <span className="agent-picker-desc">persists across disconnects (recommended)</span>
+                </button>
+              )}
+
+              {probe.reachable && !probe.tmuxInstalled && (
+                <div className="remote-note">tmux isn't installed on this host — running without it.</div>
+              )}
+
+              <button
+                className="agent-picker-item"
+                onClick={() => connect({ kind: 'no-tmux' })}
+              >
+                <span className="agent-picker-name">Run without tmux</span>
+                <span className="agent-picker-desc">{agentLabel} directly — won't survive a dropped connection</span>
+              </button>
+            </div>
+
+            <button className="remote-link" onClick={() => setStep('hosts')}>← choose another host</button>
+          </>
+        )}
+
+        {step === 'error' && (
+          <>
+            <div className="remote-error">Couldn't connect to <b>{target}</b></div>
+            <div className="remote-status-sub">{errorMsg}</div>
+            {passwordField}
+            <div className="remote-section-label">TRY ANYWAY (INTERACTIVE)</div>
+            <div className="agent-picker-list">
+              <button
+                className="agent-picker-item"
+                onClick={() => connect({ kind: 'auto', session: `${TMUX_PREFIX}1` })}
+              >
+                <span className="agent-picker-name">Connect with tmux</span>
+                <span className="agent-picker-desc">ssh will prompt if a password / key passphrase is needed</span>
+              </button>
+              <button
+                className="agent-picker-item"
+                onClick={() => connect({ kind: 'no-tmux' })}
+              >
+                <span className="agent-picker-name">Connect without tmux</span>
+                <span className="agent-picker-desc">run {agentLabel} directly</span>
+              </button>
+            </div>
+            <button className="remote-link" onClick={() => setStep('hosts')}>← choose another host</button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/renderer/components/SpeakControls.tsx

@@ -18,7 +18,10 @@ import {
 
 const SAMPLE = 'This is how spoken agent replies will sound.'
 
-export function SpeakControls() {
+// `remote` is true while the active tab is a remote SSH session, where spoken
+// replies can't work: the agent's transcript is written on the remote machine,
+// so there's nothing local to read aloud. The toggle is disabled in that case.
+export function SpeakControls({ remote = false }: { remote?: boolean }) {
   const [enabled, setEnabled] = useState(false)
   const [engine, setEngineState] = useState<TtsEngineId>(getEngine)
   const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
@@ -124,7 +127,9 @@ export function SpeakControls() {
     speech.enqueue(SAMPLE)
   }, [])
 
-  const title = enabled ? 'Spoken replies on — click to mute' : 'Speak agent replies (off)'
+  const title = remote
+    ? "Spoken replies aren't available for remote SSH sessions — the agent's transcript lives on the remote machine"
+    : enabled ? 'Spoken replies on — click to mute' : 'Speak agent replies (off)'
 
   return (
     <div className="speak-controls" ref={wrapRef}>
@@ -133,6 +138,7 @@ export function SpeakControls() {
         className={`titlebar-btn titlebar-icon-btn speak-btn ${enabled ? 'active' : ''}`}
         onClick={toggle}
         title={title}
+        disabled={remote}
         aria-label="Toggle spoken agent replies"
         aria-pressed={enabled}
       >

package/src/renderer/components/TerminalPanel.tsx

@@ -67,27 +67,72 @@ interface TerminalPanelProps {
 // Keyed by tabId so each tab has its own xterm + pty listeners.
 // Survives React re-renders but cleaned up when tab is closed.
 
-const _terminals = new Map<string, {
+type TermState = {
   terminal: Terminal
   fitAddon: FitAddon
   unsubData: (() => void) | null
   unsubExit: (() => void) | null
   spawnedAgentId: 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
+  // viewport — restored after each write so redraws can't drag the view
+  // (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
+  // 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
+  // Guard so our own programmatic scrolls don't feed back through onScroll.
+  holding: boolean
+  // Subscribers (the jump-to-latest button) notified when follow mode flips.
+  pinListeners: Set<(pinned: boolean) => void>
+}
+
+const _terminals = new Map<string, TermState>()
 
+// Within a couple of lines of the bottom still counts as "at bottom", so a
+// small redraw delta doesn't strand the view just shy of the end.
 function isAtBottom(terminal: Terminal): boolean {
   const buf = terminal.buffer.active
-  return buf.viewportY >= buf.baseY
+  return buf.baseY - buf.viewportY <= 2
 }
 
-function scrollIfPinned(tabId: string, terminal: Terminal) {
-  const state = _terminals.get(tabId)
-  if (state?.pinnedToBottom) {
-    terminal.scrollToBottom()
+function notifyPin(state: TermState): void {
+  state.pinListeners.forEach((fn) => fn(state.pinnedToBottom))
+}
+
+function setPinned(state: TermState, pinned: boolean): void {
+  if (pinned) state.anchorLine = null
+  if (state.pinnedToBottom === pinned) return
+  state.pinnedToBottom = pinned
+  notifyPin(state)
+}
+
+// Re-assert the intended scroll position: follow the bottom while pinned,
+// otherwise hold the user's anchored line. Guarded so the resulting onScroll
+// is recognised as ours and ignored. This both keeps output pinned AND stops
+// involuntary redraw jumps (the old "scrolls to the top" bug) from sticking.
+function reassert(state: TermState): void {
+  const { terminal } = state
+  state.holding = true
+  try {
+    if (state.pinnedToBottom) {
+      terminal.scrollToBottom()
+    } else if (state.anchorLine != null && terminal.buffer.active.viewportY !== state.anchorLine) {
+      terminal.scrollToLine(state.anchorLine)
+    }
+  } finally {
+    state.holding = false
   }
 }
 
+function markGesture(tabId: string): void {
+  const s = _terminals.get(tabId)
+  if (s) s.userScrollPending = true
+}
+
 function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): { terminal: Terminal; fitAddon: FitAddon } {
   const existing = _terminals.get(tabId)
   if (existing) {
@@ -137,6 +182,10 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
   // is running, where right-click is forwarded to the program instead.
   terminal.attachCustomKeyEventHandler((e) => {
     if (e.type !== 'keydown') return true
+    // Buffer-scroll keys count as a user gesture (see onScroll).
+    if (e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Home' || e.key === 'End') {
+      markGesture(tabId)
+    }
     const isCombo = (e.metaKey || e.ctrlKey) && e.shiftKey && e.code === 'KeyE'
     if (!isCombo) return true
     e.preventDefault()
@@ -144,32 +193,53 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
     return false // consume — don't forward to the pty
   })
 
-  const state = {
+  const state: TermState = {
     terminal,
     fitAddon,
-    unsubData: null as (() => void) | null,
-    unsubExit: null as (() => void) | null,
-    spawnedAgentId: null as string | null,
+    unsubData: null,
+    unsubExit: null,
+    spawnedAgentId: null,
     pinnedToBottom: true,
+    anchorLine: null,
+    userScrollPending: false,
+    holding: false,
+    pinListeners: new Set(),
   }
 
-  // Track scroll position
+  // Track scroll position. Distinguish a real user scroll (recent wheel/key
+  // gesture) from the involuntary viewport jumps TUI redraws cause: trust the
+  // former to set follow/anchor; for the latter, re-assert our target so the
+  // view neither snaps to the bottom nor jumps to the top.
   terminal.onScroll(() => {
-    state.pinnedToBottom = isAtBottom(terminal)
+    if (state.holding) return
+    if (!state.userScrollPending) {
+      // Not tied to a user gesture → an involuntary scroll from a redraw.
+      // Hold our target instead of trusting it (this is the spinner case:
+      // every screen update would otherwise drag the view back to the bottom).
+      reassert(state)
+      return
+    }
+    state.userScrollPending = false
+    if (isAtBottom(terminal)) {
+      setPinned(state, true)
+    } else {
+      state.anchorLine = terminal.buffer.active.viewportY
+      setPinned(state, false)
+    }
   })
 
-  // Send keystrokes to pty
+  // Send keystrokes to pty — typing always returns to (and follows) the bottom.
   terminal.onData((data) => {
-    state.pinnedToBottom = true
+    setPinned(state, true)
     terminal.scrollToBottom()
     window.worker.writePty(tabId, data)
   })
 
-  // Receive pty output for this tab
+  // Receive pty output for this tab. Re-assert AFTER the write is parsed (the
+  // write callback) so we read settled buffer coordinates.
   state.unsubData = window.worker.onPtyData((eventTabId, data) => {
     if (eventTabId === tabId) {
-      terminal.write(data)
-      scrollIfPinned(tabId, terminal)
+      terminal.write(data, () => reassert(state))
     }
   })
 
@@ -206,6 +276,17 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
   const containerRef = useRef<HTMLDivElement>(null)
   const [menu, setMenu] = useState<{ x: number; y: number } | null>(null)
   const [toast, setToast] = useState<string | null>(null)
+  // Mirrors the terminal's follow-mode; drives the "jump to latest" overlay,
+  // which only shows while the user has scrolled up.
+  const [followBottom, setFollowBottom] = useState(true)
+
+  const jumpToLatest = () => {
+    const s = _terminals.get(tabId)
+    if (!s) return
+    setPinned(s, true)
+    s.terminal.scrollToBottom()
+    s.terminal.focus()
+  }
 
   // Right-click → offer "Copy as email table", but only when the current
   // selection actually parses as a table; otherwise fall through to default.
@@ -270,7 +351,13 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     }
 
     fitAddon.fit()
-    scrollIfPinned(tabId, terminal)
+    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).
+    const onWheel = () => markGesture(tabId)
+    terminal.element?.addEventListener('wheel', onWheel, { passive: 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
@@ -286,7 +373,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
         state.fitAddon.fit()
         const { cols, rows } = state.terminal
         if (cols < 10 || rows < 5) return
-        scrollIfPinned(tabId, state.terminal)
+        reassert(state)
         window.worker.resizePty(tabId, cols, rows)
       }, 150)
     }
@@ -299,6 +386,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       clearTimeout(resizeTimeout)
       window.removeEventListener('resize', handleResize)
       observer.disconnect()
+      terminal.element?.removeEventListener('wheel', onWheel)
       // Do NOT dispose terminal or unsub PTY listeners — they persist across remounts
     }
   }, [tabId, onExit])
@@ -317,7 +405,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       const s = _terminals.get(tabId)
       if (s) {
         s.fitAddon.fit()
-        s.pinnedToBottom = true
+        setPinned(s, true)
         s.terminal.scrollToBottom()
         const { cols, rows } = s.terminal
         window.worker.resizePty(tabId, cols, rows)
@@ -337,7 +425,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
           if (state) {
             state.fitAddon.fit()
             state.terminal.focus()
-            scrollIfPinned(tabId, state.terminal)
+            reassert(state)
             const { cols, rows } = state.terminal
             window.worker.resizePty(tabId, cols, rows)
           }
@@ -346,9 +434,32 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     }
   }, [isActive, tabId])
 
+  // Subscribe to follow-mode flips so the jump button shows/hides. Runs after
+  // the attach effect has created the terminal for this tab.
+  useEffect(() => {
+    const s = _terminals.get(tabId)
+    if (!s) return
+    setFollowBottom(s.pinnedToBottom)
+    const fn = (p: boolean) => setFollowBottom(p)
+    s.pinListeners.add(fn)
+    return () => { s.pinListeners.delete(fn) }
+  }, [tabId])
+
   return (
     <>
-      <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+      <div className="terminal-wrap">
+        <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+        {!followBottom && (
+          <button
+            type="button"
+            className="term-jump-latest"
+            onMouseDown={(e) => { e.preventDefault(); jumpToLatest() }}
+            title="Jump to latest output"
+          >
+            ↓ Latest
+          </button>
+        )}
+      </div>
       {menu && (
         <div className="term-context-menu" style={{ position: 'fixed', left: menu.x, top: menu.y }}>
           <button type="button" onMouseDown={(e) => { e.preventDefault(); runConvert() }}>