@phenx-inc/ctlsurf 0.11.0 → 0.12.0

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/styles.css

@@ -1150,6 +1150,9 @@ html, body, #root {
   border-radius: 12px;
   padding: 32px 40px;
   min-width: 360px;
+  max-width: 460px;
+  max-height: 88vh;
+  overflow-y: auto;
   text-align: center;
 }
 
@@ -1218,6 +1221,7 @@ html, body, #root {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
   padding: 14px 18px;
   background: #16161e;
   border: 1px solid #2a2b3d;
@@ -1236,11 +1240,13 @@ html, body, #root {
   font-size: 14px;
   font-weight: 600;
   color: #c0caf5;
+  flex-shrink: 0;
 }
 
 .agent-picker-desc {
   font-size: 11px;
   color: #565f89;
+  text-align: right;
 }
 
 .agent-picker-hint {
@@ -1265,6 +1271,201 @@ html, body, #root {
   accent-color: #7aa2f7;
 }
 
+/* ─── Remote (SSH) connect ───────────────────────── */
+
+.remote-section-label {
+  font-size: 10px;
+  color: #565f89;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: left;
+  margin: 16px 0 8px;
+}
+
+/* Scroll the host list rather than letting it grow the whole modal. */
+.remote-host-scroll {
+  max-height: 40vh;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+/* Project rows: title on top, path muted + truncated below (paths are long). */
+.project-item {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.project-item .agent-picker-name {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-item .agent-picker-desc {
+  text-align: left;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 10px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Compact host rows so more fit before scrolling. */
+.remote-host-scroll .agent-picker-item {
+  padding: 10px 14px;
+}
+
+.remote-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.remote-toggle-label {
+  font-size: 12px;
+  color: #565f89;
+}
+
+.remote-toggle-btn {
+  flex: 1;
+  padding: 8px 10px;
+  background: #16161e;
+  border: 1px solid #2a2b3d;
+  border-radius: 8px;
+  color: #a9b1d6;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.remote-toggle-btn:hover {
+  border-color: #7aa2f7;
+}
+
+.remote-toggle-btn.is-active {
+  border-color: #7aa2f7;
+  background: #1a1b2e;
+  color: #c0caf5;
+  font-weight: 600;
+}
+
+.remote-manual {
+  display: flex;
+  gap: 8px;
+}
+
+.remote-input {
+  flex: 1;
+  padding: 10px 12px;
+  background: #16161e;
+  border: 1px solid #2a2b3d;
+  border-radius: 8px;
+  color: #c0caf5;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  outline: none;
+}
+
+.remote-input:focus {
+  border-color: #7aa2f7;
+}
+
+.remote-btn {
+  padding: 10px 16px;
+  background: #7aa2f7;
+  border: none;
+  border-radius: 8px;
+  color: #1f2335;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.remote-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.remote-link {
+  margin-top: 18px;
+  background: none;
+  border: none;
+  color: #7aa2f7;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.remote-status {
+  padding: 24px 8px;
+  color: #a9b1d6;
+  font-size: 13px;
+}
+
+.remote-status-sub {
+  margin-top: 6px;
+  font-size: 11px;
+  color: #565f89;
+  word-break: break-word;
+}
+
+.remote-spinner {
+  width: 22px;
+  height: 22px;
+  margin: 0 auto 14px;
+  border: 2px solid #2a2b3d;
+  border-top-color: #7aa2f7;
+  border-radius: 50%;
+  animation: remote-spin 0.8s linear infinite;
+}
+
+@keyframes remote-spin {
+  to { transform: rotate(360deg); }
+}
+
+.remote-target-line {
+  font-size: 13px;
+  color: #a9b1d6;
+  margin-bottom: 4px;
+}
+
+.remote-note {
+  font-size: 11px;
+  color: #e0af68;
+  background: rgba(224, 175, 104, 0.08);
+  border: 1px solid rgba(224, 175, 104, 0.25);
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 8px 0;
+  text-align: left;
+  line-height: 1.4;
+}
+
+.remote-error {
+  font-size: 13px;
+  color: #f7768e;
+  margin-bottom: 4px;
+}
+
+.remote-pw {
+  margin: 8px 0 4px;
+}
+
+.remote-pw .remote-input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.remote-pw-hint {
+  margin-top: 6px;
+  font-size: 10px;
+  color: #565f89;
+  text-align: left;
+}
+
 /* Settings dialog */
 .settings-overlay {
   position: fixed;