@tiphareth/dsh-hardssh 0.1.2 → 0.2.2

package/src/client/api.ts

@@ -5,25 +5,25 @@
  * origin 鈥?the only data path the panel components use.
  */
 
-import { HttpApiError, buildQuery, readJson } from '../client-http.ts'
+import { HttpApiError, buildQuery, readJson, type HttpErrorBody } from '../client-http.ts'
 import {
   WORKSPACE_API,
-  type DirListing,
-  type FileRead,
-  type FileWriteResult,
   type RemoteDirEntry,
-  type SearchView,
   type SshWorkspaceRecord,
 } from '../protocol.ts'
 
-/** Error carrying the route's JSON error message and stable code/status. */
+/**
+ * Workspace-route error: the shared transport error under this family's name.
+ * It adds no parsing — `readJson` in ../client-http.ts owns status/body
+ * decoding for both route families.
+ */
 export class WorkspaceApiError extends HttpApiError {
   constructor(
     message: string,
-    code?: string,
     status?: number,
+    body?: HttpErrorBody,
   ) {
-    super(message, code, status)
+    super(message, status, body)
     this.name = 'WorkspaceApiError'
   }
 }
@@ -80,34 +80,6 @@ export class WorkspaceApi {
     const body = await readJson<{ path: string; entries: RemoteDirEntry[] }>(response)
     return body
   }
-
-  async list(root: string, path: string): Promise<DirListing> {
-    const response = await fetch(WORKSPACE_API.tree + buildQuery({ root, path }))
-    const body = await readJson<{ listing: DirListing }>(response)
-    return body.listing
-  }
-
-  async read(root: string, path: string): Promise<FileRead> {
-    const response = await fetch(WORKSPACE_API.file + buildQuery({ root, path }))
-    const body = await readJson<{ file: FileRead }>(response)
-    return body.file
-  }
-
-  async write(root: string, path: string, content: string, expectedMtime?: number): Promise<FileWriteResult> {
-    const response = await fetch(WORKSPACE_API.file, {
-      method: 'PUT',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ root, path, content, expectedMtime }),
-    })
-    const body = await readJson<{ result: FileWriteResult }>(response)
-    return body.result
-  }
-
-  async search(root: string, queryText: string): Promise<SearchView> {
-    const response = await fetch(WORKSPACE_API.search + buildQuery({ root, query: queryText }))
-    const body = await readJson<{ search: SearchView }>(response)
-    return body.search
-  }
 }
 
 /** The two /api/dsh-ssh endpoints the config dialog needs (host create/test). */

package/src/client/connect-host.ts

@@ -0,0 +1,199 @@
+/**
+ * Probe-and-prompt for an SSH alias, with a browser-session pass cache.
+ *
+ * This is the interactive connection gate on its own — no row, no banner, no
+ * DOM decoration. Flows that surface their own errors (the workspace creation
+ * directory browser) call `connectHost` and get a plain boolean.
+ *
+ * The probe is the engine's `/test` route (a real, lightweight connect):
+ * - `HOST_KEY_UNKNOWN` / `HOST_KEY_MISMATCH` → the host fingerprint dialog
+ *   (TOFU first encounter / key rotation);
+ * - `NEEDS_PASSWORD` / `NEEDS_PASSPHRASE` → the VSCode-style session password
+ *   dialog (never persisted, session-only);
+ * - ok → the alias is marked passed for a TTL (trust is durable and the session
+ *   password survives in the engine's session table until the process exits).
+ *
+ * @module dsh-hardssh/client/connect-host
+ */
+import { createElement, type ReactElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import type { SshApi } from './ssh/api.ts'
+import { SshApiError } from './ssh/api.ts'
+import { ConnectionErrorDialog } from './ssh/panel/ConnectionErrorDialog.tsx'
+import { HostFingerprintDialog } from './ssh/panel/HostFingerprintDialog.tsx'
+import { SessionSecretDialog } from './ssh/panel/SessionSecretDialog.tsx'
+import { tt } from './text.ts'
+
+/** A passed alias stays valid this long (trust is durable; the session password
+ *  table lives in the host process for the session). */
+const GATE_TTL_MS = 5 * 60 * 1000
+/** Cap on interactive retry rounds (wrong password loops etc.). */
+const MAX_ATTEMPTS = 3
+
+/** alias → last successful probe timestamp (browser-session scope). */
+const passedAt = new Map<string, number>()
+/** alias → in-flight probe promise (no duplicate dialogs on multi-click). */
+const pending = new Map<string, Promise<boolean>>()
+/** alias → SSH login name (fetched once for the user@alias prompt). */
+let hostsCache: Map<string, string> | null = null
+/** At most one visible non-interactive failure dialog per alias. */
+const failureDialogs = new Map<string, () => void>()
+
+async function hostsUser(api: SshApi, alias: string): Promise<string | undefined> {
+  if (hostsCache === null) {
+    try {
+      const list = await api.listHosts()
+      hostsCache = new Map(list.map(host => [host.alias, host.user]))
+    } catch {
+      // Deliberately NOT cached: a transient list failure must not pin an empty
+      // map for the rest of the process (the secret prompt would then never
+      // show the login name again). The next call retries the list.
+      return undefined
+    }
+  }
+  return hostsCache.get(alias)
+}
+
+/** Whether the alias passed the gate within its TTL. */
+function gateActive(alias: string, now: number): boolean {
+  const at = passedAt.get(alias)
+  return at !== undefined && now - at < GATE_TTL_MS
+}
+
+/**
+ * Mount a dialog component into a fresh root; returns its closer. The dialog's
+ * `onClose` prop is CHAINED: the caller's handler (resolving its promise) runs
+ * first, then the root is torn down. Without the chaining a cancel would
+ * unmount the dialog but never resolve the caller's promise, leaving the alias
+ * stuck "in flight" so later calls stop prompting.
+ */
+function mountModal(node: ReactElement): () => void {
+  const host = document.createElement('div')
+  host.dataset.sshGateDialog = ''
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  const close = (): void => {
+    root.unmount()
+    host.remove()
+  }
+  const callerOnClose = (node.props as { onClose?: () => void }).onClose
+  const chainedOnClose = callerOnClose !== undefined
+    ? () => { callerOnClose(); close() }
+    : close
+  root.render(createElement(node.type, { ...node.props, onClose: chainedOnClose }))
+  return close
+}
+
+/** Log and surface one concrete non-interactive connection failure. */
+function reportConnectionFailure(alias: string, detail: string): false {
+  console.warn(`[dsh-hardssh] SSH probe failed for '${alias}': ${detail}`)
+  if (typeof document === 'undefined') return false
+  failureDialogs.get(alias)?.()
+  const close = mountModal(createElement(ConnectionErrorDialog, {
+    alias,
+    detail,
+    onClose: () => { failureDialogs.delete(alias) },
+  }))
+  failureDialogs.set(alias, close)
+  return false
+}
+
+/** Interactive prompts, resolving true when the user finished the action. */
+function promptFingerprint(api: SshApi, alias: string, fingerprintSha256: string, mismatch: boolean): Promise<boolean> {
+  return new Promise((resolve) => {
+    const close = mountModal(createElement(HostFingerprintDialog, {
+      api,
+      alias,
+      fingerprintSha256,
+      mismatch,
+      onClose: () => { resolve(false) },
+      onTrusted: () => { close(); resolve(true) },
+    }))
+  })
+}
+
+function promptSecret(api: SshApi, alias: string, secret: 'password' | 'passphrase', reason?: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    let closed = false
+    const finish = (ok: boolean): void => {
+      if (closed) return
+      closed = true
+      resolve(ok)
+    }
+    void hostsUser(api, alias).then((user) => {
+      const close = mountModal(createElement(SessionSecretDialog, {
+        api,
+        alias,
+        user,
+        secret,
+        reason,
+        onClose: () => { finish(false) },
+        onProvided: () => { close(); finish(true) },
+      }))
+    })
+  })
+}
+
+/**
+ * Probe + prompt until connected. Resolves true when the alias may proceed;
+ * false when the user cancelled or the failure is not interactive. When a
+ * credential was already supplied and the retry still fails (wrong password,
+ * unreachable host, network drop, …), the password dialog re-opens WITH the
+ * failure reason shown, VSCode style — no silent "stuck" states.
+ *
+ * @param api - the SSH API client.
+ * @param alias - the host alias to gate.
+ */
+export function connectHost(api: SshApi, alias: string): Promise<boolean> {
+  const now = Date.now()
+  if (gateActive(alias, now)) return Promise.resolve(true)
+  const inFlight = pending.get(alias)
+  if (inFlight !== undefined) return inFlight
+
+  const attempt = (async (): Promise<boolean> => {
+    let secretKind: 'password' | 'passphrase' | undefined
+    let lastFailure: string | null = null
+    for (let i = 0; i < MAX_ATTEMPTS; i++) {
+      try {
+        const result = await api.testHost(alias)
+        if (result.ok) {
+          passedAt.set(alias, Date.now())
+          return true
+        }
+        if (result.code === 'NEEDS_PASSWORD' && (result.secret === 'password' || result.secret === 'passphrase')) {
+          secretKind = result.secret
+          if (await promptSecret(api, alias, result.secret, lastFailure ?? undefined)) {
+            lastFailure = null
+            continue
+          }
+          return false
+        }
+        lastFailure = result.error ?? 'connection failed'
+        return reportConnectionFailure(alias, lastFailure)
+      } catch (cause) {
+        if (cause instanceof SshApiError && (cause.code === 'HOST_KEY_UNKNOWN' || cause.code === 'HOST_KEY_MISMATCH')) {
+          const fingerprint = cause.hostKeyFingerprint ?? ''
+          if (fingerprint !== '' && await promptFingerprint(api, alias, fingerprint, cause.code === 'HOST_KEY_MISMATCH')) continue
+          if (fingerprint === '') return reportConnectionFailure(alias, cause.message)
+          return false
+        }
+        lastFailure = cause instanceof Error ? cause.message : String(cause)
+        if (secretKind !== undefined) {
+          // Credential already entered but this attempt failed — re-prompt with
+          // the concrete reason instead of a bare failure.
+          if (await promptSecret(api, alias, secretKind, lastFailure)) {
+            lastFailure = null
+            continue
+          }
+          return false
+        }
+        return reportConnectionFailure(alias, lastFailure)
+      }
+    }
+    return reportConnectionFailure(alias, lastFailure ?? tt('gate.retryLimit'))
+  })()
+
+  pending.set(alias, attempt)
+  void attempt.finally(() => { pending.delete(alias) })
+  return attempt
+}

package/src/client/directory-flow.tsx

@@ -137,8 +137,16 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
   const [addingHost, setAddingHost] = useState(false)
   const [newHost, setNewHost] = useState({ alias: '', host: '', port: '22', user: '', password: '' })
   const [savingHost, setSavingHost] = useState(false)
+  const openRef = useRef(open)
+  openRef.current = open
+  const localPickRequestSequence = useRef(0)
+  const hostsRequestSequence = useRef(0)
+  const directoryRequestSequence = useRef(0)
+  const createWorkspaceRequestSequence = useRef(0)
+  const createHostRequestSequence = useRef(0)
 
-  // Reset and re-locate on each open edge.
+  // Reset and re-locate on each open edge. Every async data source owns a
+  // request sequence; cleanup invalidates outstanding work from this opening.
   useEffect(() => {
     if (!open) return
     setChoice('menu')
@@ -146,12 +154,31 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
     setDirPath('')
     setTitle('')
     setDirEntries([])
+    setLoading(false)
+    setCreating(false)
+    setSavingHost(false)
     setError(null)
     setAddingHost(false)
     setNewHost({ alias: '', host: '', port: '22', user: '', password: '' })
     setAnchorRect()
-    // Lazy-load the host list for the SSH branch.
-    props.listHosts().then((list) => setHosts(list)).catch(() => setHosts([]))
+    // Lazy-load the host list for the SSH branch. A later refresh (for
+    // example after adding a host) supersedes this request.
+    const request = ++hostsRequestSequence.current
+    void props.listHosts().then(
+      (list) => {
+        if (request === hostsRequestSequence.current && openRef.current) setHosts(list)
+      },
+      () => {
+        if (request === hostsRequestSequence.current && openRef.current) setHosts([])
+      },
+    )
+    return () => {
+      localPickRequestSequence.current += 1
+      hostsRequestSequence.current += 1
+      directoryRequestSequence.current += 1
+      createWorkspaceRequestSequence.current += 1
+      createHostRequestSequence.current += 1
+    }
   }, [open])
 
   /** Locate the trigger element that just opened the flow and anchor the menu
@@ -196,16 +223,22 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
 
   /** Choose "Local workspace": drive the native chooser once. */
   const pickLocal = (): void => {
+    const request = ++localPickRequestSequence.current
     setChoice('picking-local')
     props.pickDirectory().then(
       (path) => {
+        if (request !== localPickRequestSequence.current || !openRef.current) return
         if (path === null) {
           outcome.current.onCancel()
         } else {
           outcome.current.onPicked(path)
         }
       },
-      (reason) => outcome.current.onError(reason instanceof Error ? reason.message : String(reason)),
+      (reason) => {
+        if (request === localPickRequestSequence.current && openRef.current) {
+          outcome.current.onError(reason instanceof Error ? reason.message : String(reason))
+        }
+      },
     )
   }
 
@@ -213,32 +246,39 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
    *  a credential (host key untrusted / session password), run the interactive
    *  gate first, then retry — the operator never sees a raw "connect" error. */
   const browse = async (alias: string, path?: string): Promise<void> => {
+    const request = ++directoryRequestSequence.current
     if (alias === '') {
       setError(tt('create.needHost'))
       return
     }
-    for (let attempt = 0; attempt < 3; attempt++) {
-      setLoading(true)
-      setError(null)
-      try {
-        const result = await props.listRemoteDir(alias, path)
-        setDirPath(result.path)
-        setDirEntries(result.entries)
-        setChoice('browsing')
-        setLoading(false)
-        return
-      } catch (e: unknown) {
-        const code = (e as { code?: string })?.code
-        const interactive = code === 'NEEDS_PASSWORD' || code === 'HOST_KEY_UNKNOWN' || code === 'HOST_KEY_MISMATCH'
-        setLoading(false)
-        if (!interactive) {
-          setError(e instanceof Error ? e.message : String(e))
+    setLoading(true)
+    setError(null)
+    try {
+      for (let attempt = 0; attempt < 3; attempt++) {
+        try {
+          const result = await props.listRemoteDir(alias, path)
+          if (request !== directoryRequestSequence.current || !openRef.current) return
+          setDirPath(result.path)
+          setDirEntries(result.entries)
+          setChoice('browsing')
           return
+        } catch (e: unknown) {
+          if (request !== directoryRequestSequence.current || !openRef.current) return
+          const code = (e as { code?: string })?.code
+          const interactive = code === 'NEEDS_PASSWORD' || code === 'HOST_KEY_UNKNOWN' || code === 'HOST_KEY_MISMATCH'
+          if (!interactive) {
+            setError(e instanceof Error ? e.message : String(e))
+            return
+          }
+          const connected = await props.ensureConnected(alias)
+          if (request !== directoryRequestSequence.current || !openRef.current) return
+          if (!connected) return // user cancelled
         }
-        if (!await props.ensureConnected(alias)) return // user cancelled
       }
+      if (request === directoryRequestSequence.current && openRef.current) setError(tt('create.needConnect'))
+    } finally {
+      if (request === directoryRequestSequence.current && openRef.current) setLoading(false)
     }
-    setError(tt('create.needConnect'))
   }
 
   /** Create the SSH workspace; on success hand the anchor to the owner. */
@@ -247,20 +287,23 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
       setError(host === '' ? tt('create.needHost') : dirPath === '' ? tt('create.needDir') : tt('create.needTitle'))
       return
     }
+    const request = ++createWorkspaceRequestSequence.current
     setCreating(true)
     setError(null)
     try {
       const record = await props.createSshWorkspace({ title: title.trim(), alias: host, remoteRoot: dirPath })
+      if (request !== createWorkspaceRequestSequence.current || !openRef.current) return
       // The anchor is a REAL local dir (host workspace registration happens on
       // the server); adopt it so the host workspace list refreshes.
       outcome.current.onPicked(record.anchorPath)
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e))
+      if (request === createWorkspaceRequestSequence.current && openRef.current) {
+        setError(e instanceof Error ? e.message : String(e))
+      }
     } finally {
-      // Always reset: the owner may keep the flow open after onPicked (e.g.
-      // a host-side adoption error), and a stuck `creating=true` would lock
-      // the button forever.
-      setCreating(false)
+      // Always reset for the active opening: the owner may keep the flow open
+      // after onPicked (e.g. a host-side adoption error).
+      if (request === createWorkspaceRequestSequence.current && openRef.current) setCreating(false)
     }
   }
 
@@ -272,6 +315,7 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
       setError(tt('host.needFields'))
       return
     }
+    const request = ++createHostRequestSequence.current
     setSavingHost(true)
     setError(null)
     try {
@@ -282,15 +326,24 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
         user: newHost.user.trim(),
         auth: { kind: 'password', password: newHost.password },
       })
+      if (request !== createHostRequestSequence.current || !openRef.current) return
+      const hostsRequest = ++hostsRequestSequence.current
       const list = await props.listHosts()
+      if (
+        request !== createHostRequestSequence.current
+        || hostsRequest !== hostsRequestSequence.current
+        || !openRef.current
+      ) return
       setHosts(list)
       setHost(created.alias)
       setAddingHost(false)
       setNewHost({ alias: '', host: '', port: '22', user: '', password: '' })
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e))
+      if (request === createHostRequestSequence.current && openRef.current) {
+        setError(e instanceof Error ? e.message : String(e))
+      }
     } finally {
-      setSavingHost(false)
+      if (request === createHostRequestSequence.current && openRef.current) setSavingHost(false)
     }
   }
 
@@ -392,7 +445,7 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
               <>
                 <label className={css.field} style={{ gridColumn: '1 / -1' }}>
                   <span>{tt('create.host')}</span>
-                  <select value={host} onChange={(event) => setHost(event.target.value)}>
+                  <select value={host} disabled={loading} onChange={(event) => setHost(event.target.value)}>
                     <option value="">{hosts.length === 0 ? tt('create.hostEmpty') : '—'}</option>
                     {hosts.map((item) => (
                       <option key={item.alias} value={item.alias}>{item.alias} ({item.user}@{item.host}:{item.port})</option>
@@ -403,6 +456,7 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
                   type="button"
                   className={css.menuItem}
                   style={{ gridColumn: '1 / -1', padding: '5px 8px' }}
+                  disabled={loading}
                   onClick={() => setAddingHost(true)}
                 >
                   <span className={css.menuItemIcon}>＋</span>
@@ -410,7 +464,7 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
                 </button>
                 <label className={css.field} style={{ gridColumn: '1 / -1' }}>
                   <span>{tt('create.dir')}</span>
-                  <input value={dirPath} onChange={(event) => setDirPath(event.target.value)} placeholder={tt('create.dirPlaceholder')} spellCheck={false} />
+                  <input value={dirPath} disabled={loading} onChange={(event) => setDirPath(event.target.value)} placeholder={tt('create.dirPlaceholder')} spellCheck={false} />
                 </label>
                 <div className={css.dialogActions} style={{ gridColumn: '1 / -1' }}>
                   <button type="button" className={css.button} disabled={busy || loading} onClick={() => void browse(host)}>
@@ -425,8 +479,8 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
             )}
             {!addingHost && (
               <div className={css.dialogActions} style={{ gridColumn: '1 / -1' }}>
-                <button type="button" className={css.button} onClick={() => setChoice('menu')} disabled={busy || creating}>{tt('create.cancel')}</button>
-                <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || creating} onClick={() => void createSsh()}>
+                <button type="button" className={css.button} onClick={() => setChoice('menu')} disabled={busy || creating || loading}>{tt('create.cancel')}</button>
+                <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || creating || loading} onClick={() => void createSsh()}>
                   {creating ? tt('create.connecting') : tt('create.submit')}
                 </button>
               </div>
@@ -460,7 +514,8 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
                   key={entry.name}
                   type="button"
                   className={css.hostRow}
-                  style={{ width: '100%', textAlign: 'left', display: 'flex', gap: 6, alignItems: 'center', border: 'none', background: 'transparent', cursor: 'pointer', padding: '4px 6px' }}
+                  disabled={loading}
+                  style={{ width: '100%', textAlign: 'left', display: 'flex', gap: 6, alignItems: 'center', border: 'none', background: 'transparent', cursor: loading ? 'default' : 'pointer', padding: '4px 6px' }}
                   onClick={() => { void browse(host, `${dirPath.replace(/\/+$/, '')}/${entry.name}`) }}
                 >
                   <span>📁</span>
@@ -469,8 +524,8 @@ export function DirectoryFlow(props: DirectoryFlowOwnerProps & DirectoryFlowInje
               ))}
             </div>
             <div className={css.dialogActions} style={{ gridColumn: '1' }}>
-              <button type="button" className={css.button} onClick={() => setChoice('ssh')}>{tt('create.cancel')}</button>
-              <button type="button" className={`${css.button} ${css.buttonPrimary}`} onClick={() => setChoice('ssh')}>
+              <button type="button" className={css.button} disabled={loading} onClick={() => setChoice('ssh')}>{tt('create.cancel')}</button>
+              <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={loading} onClick={() => setChoice('ssh')}>
                 {tt('flow.useThisDir')}
               </button>
             </div>