@phenx-inc/ctlsurf 0.10.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/components/TicketPanel.tsx

@@ -26,11 +26,6 @@ interface Ticket {
   created: string | null
 }
 
-interface TicketPanelProps {
-  open: boolean
-  onClose: () => void
-}
-
 type SaveState = { kind: 'idle' } | { kind: 'saving' } | { kind: 'error'; message: string }
 type View = 'list' | 'form'
 
@@ -79,7 +74,10 @@ function Segmented({ options, value, onChange }: SegmentedProps) {
   )
 }
 
-export function TicketPanel({ open, onClose }: TicketPanelProps) {
+// Docked side-pane variant of the ticket UI: header + list/form body + footer.
+// It only mounts when its pane is visible, so it loads on mount and refreshes
+// when the connected project (cwd) changes. Closed via the pane's own header.
+export function TicketPane() {
   const [project, setProject] = useState<string | null>(null)
   const [view, setView] = useState<View>('list')
 
@@ -111,17 +109,18 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
     }
   }, [])
 
-  // On open: reset to the list and (re)load project + tickets.
+  // Load project + tickets on mount, and refresh whenever the connected project
+  // (cwd) changes so the list always tracks the active project.
   useEffect(() => {
-    if (!open) return
-    setView('list')
     let cancelled = false
-    window.worker.getTicketProject()
+    const loadProject = () => window.worker.getTicketProject()
       .then(r => { if (!cancelled) setProject(r?.name ?? null) })
       .catch(() => { if (!cancelled) setProject(null) })
+    loadProject()
     void refreshList()
-    return () => { cancelled = true }
-  }, [open, refreshList])
+    const unsub = window.worker.onCwdChanged(() => { loadProject(); void refreshList() })
+    return () => { cancelled = true; unsub() }
+  }, [refreshList])
 
   const openNewForm = useCallback(() => {
     setEditingId(null)
@@ -162,28 +161,26 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
     }
   }, [title, description, status, priority, editingId, save.kind, refreshList])
 
-  // Esc: form → back to list, list → close. Cmd/Ctrl+Enter saves in the form.
+  // Only capture keys while editing a ticket, so list-view typing in the terminal
+  // isn't hijacked. Esc returns to the list; Cmd/Ctrl+Enter saves.
   useEffect(() => {
-    if (!open) return
+    if (view !== 'form') return
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault()
-        if (view === 'form') setView('list')
-        else onClose()
-      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && view === 'form') {
+        setView('list')
+      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
         void handleSave()
       }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [open, view, onClose, handleSave])
+  }, [view, handleSave])
 
   return (
-    <>
-      <div className={`ticket-scrim ${open ? 'open' : ''}`} onClick={onClose} />
-      <div className={`ticket-drawer ${open ? 'open' : ''}`} role="dialog" aria-label="Tickets">
-        <div className="ticket-drawer-header">
+    <div className="ticket-pane" role="region" aria-label="Tickets">
+      <div className="ticket-drawer-header">
           <div className="ticket-drawer-heading">
             {view === 'form' ? (
               <button className="ticket-drawer-back" onClick={() => setView('list')} title="Back (Esc)">‹</button>
@@ -201,7 +198,6 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
               </span>
             </div>
           </div>
-          <button className="ticket-drawer-close" onClick={onClose} title="Close">×</button>
         </div>
 
         {view === 'list' ? (
@@ -302,7 +298,6 @@ export function TicketPanel({ open, onClose }: TicketPanelProps) {
             </div>
           </>
         )}
-      </div>
-    </>
+    </div>
   )
 }