@tiphareth/dsh-hardssh 0.1.2 → 0.2.2

package/src/client/ssh/panel/ClusterTab.tsx

@@ -1,6 +1,6 @@
 /**
- * Cluster tab: run one command across many hosts (aliases / environment /
- * tags filters) and inspect per-host results. Stdout/stderr render in
+ * Cluster tab: run one command against the selected Session's fixed server and
+ * inspect its result. Stdout/stderr render in
  * collapsed <details> blocks; status renders as a colored badge.
  */
 import { useState } from 'react'
@@ -12,19 +12,13 @@ import css from './panel.module.css'
 /** Cluster tab props. */
 export interface ClusterTabProps {
   api: SshApi
-}
-
-/** Split a comma-separated input into a trimmed, non-empty string list. */
-function splitList(text: string): string[] {
-  return text.split(',').map(part => part.trim()).filter(part => part !== '')
+  /** Fixed alias inherited from the selected Session. */
+  alias: string
 }
 
 /** The cluster execution tab. */
-export function ClusterTab({ api }: ClusterTabProps) {
+export function ClusterTab({ api, alias }: ClusterTabProps) {
   const [command, setCommand] = useState('')
-  const [aliases, setAliases] = useState('')
-  const [environment, setEnvironment] = useState('')
-  const [tags, setTags] = useState('')
   const [running, setRunning] = useState(false)
   const [results, setResults] = useState<ClusterResult[] | null>(null)
   const [error, setError] = useState<string | null>(null)
@@ -35,13 +29,9 @@ export function ClusterTab({ api }: ClusterTabProps) {
     setRunning(true)
     setError(null)
     try {
-      const aliasList = splitList(aliases)
-      const tagList = splitList(tags)
       const outcome = await api.cluster({
         command: command.trim(),
-        aliases: aliasList.length > 0 ? aliasList : undefined,
-        environment: environment.trim() === '' ? undefined : environment.trim(),
-        tags: tagList.length > 0 ? tagList : undefined,
+        aliases: [alias],
       })
       setResults(outcome)
     } catch (cause) {
@@ -58,10 +48,9 @@ export function ClusterTab({ api }: ClusterTabProps) {
           <span className={css.fieldLabel}>{tt('cluster.command')}</span>
           <textarea className={css.input + ' ' + css.commandInput} value={command} onChange={event => { setCommand(event.target.value) }} />
         </label>
-        <div className={css.clusterFilters}>
-          <input className={css.input} placeholder={tt('cluster.aliases')} value={aliases} onChange={event => { setAliases(event.target.value) }} />
-          <input className={css.input} placeholder={tt('cluster.environment')} value={environment} onChange={event => { setEnvironment(event.target.value) }} />
-          <input className={css.input} placeholder={tt('cluster.tags')} value={tags} onChange={event => { setTags(event.target.value) }} />
+        <div className={css.controls}>
+          <span className={css.fieldLabel}>{tt('session.server')}</span>
+          <span className={css.targetBadge}>{alias}</span>
         </div>
         <div>
           <button type="button" className={css.primaryButton} disabled={running || command.trim() === ''} onClick={() => { void run() }}>{tt('cluster.run')}</button>

package/src/client/ssh/panel/ConnectionErrorDialog.tsx

@@ -0,0 +1,33 @@
+/** User-visible terminal connection failure surfaced by the Session connect gate. */
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+export interface ConnectionErrorDialogProps {
+  alias: string
+  detail: string
+  onClose: () => void
+}
+
+/** A small acknowledgement dialog for non-interactive SSH connection failures. */
+export function ConnectionErrorDialog({ alias, detail, onClose }: ConnectionErrorDialogProps) {
+  return (
+    <div className={css.modalBackdrop} onClick={onClose}>
+      <div className={css.modal} role="alertdialog" aria-modal="true" aria-labelledby="dsh-ssh-connection-error-title" onClick={event => { event.stopPropagation() }}>
+        <div className={css.modalHeader}>
+          <h3 id="dsh-ssh-connection-error-title" className={css.modalTitle}>
+            {tt('connectionError.title', { alias })}
+          </h3>
+        </div>
+        <div className={css.modalBody}>
+          <p>{tt('connectionError.intro')}</p>
+          <p className={css.formError}>{detail}</p>
+        </div>
+        <div className={css.modalFooter}>
+          <button type="button" className={css.modalPrimary} autoFocus onClick={onClose}>
+            {tt('connectionError.close')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/ssh/panel/SessionSecretDialog.tsx

@@ -19,13 +19,16 @@ export interface SessionSecretDialogProps {
   user?: string
   /** Which secret the connection needs. */
   secret: 'password' | 'passphrase'
+  /** A previous attempt's failure to show at the top (re-prompt with a
+   *  reason — wrong password, unreachable host, …), VSCode-style. */
+  reason?: string
   onClose: () => void
   /** Called after the secret was provided (retry the operation). */
   onProvided: () => void
 }
 
 /** Prompt for a session-only credential. */
-export function SessionSecretDialog({ api, alias, user, secret, onClose, onProvided }: SessionSecretDialogProps) {
+export function SessionSecretDialog({ api, alias, user, secret, reason, onClose, onProvided }: SessionSecretDialogProps) {
   const [value, setValue] = useState('')
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -57,6 +60,7 @@ export function SessionSecretDialog({ api, alias, user, secret, onClose, onProvi
           </h3>
         </div>
         <div className={css.modalBody}>
+          {reason !== undefined && reason !== '' && <p className={css.formError}>{reason}</p>}
           <input
             className={css.input}
             type="password"

package/src/client/ssh/panel/SshPanel.tsx

@@ -1,77 +1,81 @@
-/**
- * The SSH operations panel shell: a header with a close control, a five-tab
- * bar, and the active tab's content. Tab state lives here (browser session
- * state); inactive tabs unmount, so each tab fetches its own data on
- * activation. The hosts tab's connect action switches here to the terminal
- * tab with the chosen alias preselected.
- */
-import { useState } from 'react'
-import type { SshApi } from '../api.ts'
-import type { PanelController } from './controller.ts'
-import { tt } from './helpers.ts'
-import { ClusterTab } from './ClusterTab.tsx'
-import { HostsTab } from './HostsTab.tsx'
-import { TerminalTab } from './TerminalTab.tsx'
-import { TransferTab } from './TransferTab.tsx'
-import { TunnelsTab } from './TunnelsTab.tsx'
-import css from './panel.module.css'
-
-/** The panel's tab identifiers. */
-export type SshTab = 'hosts' | 'terminal' | 'transfer' | 'tunnels' | 'cluster'
-
-/** Panel shell props. */
-export interface SshPanelProps {
-  /** The panel state owner (open/close/toggle). */
-  controller: PanelController
-  /** The SSH API client every tab operates through. */
-  api: SshApi
-}
-
-/** The tab bar definition (labels resolved at render time). */
-const TABS: ReadonlyArray<{ id: SshTab; label: () => string }> = [
-  { id: 'hosts', label: () => tt('tab.hosts') },
-  { id: 'terminal', label: () => tt('tab.terminal') },
-  { id: 'transfer', label: () => tt('tab.transfer') },
-  { id: 'tunnels', label: () => tt('tab.tunnels') },
-  { id: 'cluster', label: () => tt('tab.cluster') },
-]
-
-/** A pending "connect this host" request handed to the terminal tab. */
-interface ConnectRequest {
-  alias: string
-  nonce: number
-}
-
-/** The tabbed SSH panel. */
-export function SshPanel({ controller, api }: SshPanelProps) {
-  const [activeTab, setActiveTab] = useState<SshTab>('hosts')
-  const [connectRequest, setConnectRequest] = useState<ConnectRequest | null>(null)
-
-  const handleConnect = (alias: string): void => {
-    setActiveTab('terminal')
-    setConnectRequest(prev => ({ alias, nonce: (prev?.nonce ?? 0) + 1 }))
-  }
-
-  return (
-    <div className={css.panel}>
-      <div className={css.panelHeader}>
-        <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
-        <button type="button" className={css.iconButton} title={tt('common.close')} aria-label={tt('common.close')} onClick={() => { controller.close() }}>x</button>
-      </div>
-      <div className={css.tabBar} role="tablist">
-        {TABS.map(tab => (
-          <button key={tab.id} type="button" role="tab" aria-selected={activeTab === tab.id} data-active={activeTab === tab.id ? '' : undefined} className={css.tab} onClick={() => { setActiveTab(tab.id) }}>
-            {tab.label()}
-          </button>
-        ))}
-      </div>
-      <div className={css.panelContent}>
-        {activeTab === 'hosts' && <HostsTab api={api} onConnect={handleConnect} />}
-        {activeTab === 'terminal' && <TerminalTab api={api} presetAlias={connectRequest?.alias} requestId={connectRequest?.nonce} />}
-        {activeTab === 'transfer' && <TransferTab api={api} />}
-        {activeTab === 'tunnels' && <TunnelsTab api={api} />}
-        {activeTab === 'cluster' && <ClusterTab api={api} />}
-      </div>
-    </div>
-  )
-}
+/**
+ * Session-scoped SSH operations console. The right sidebar follows the selected
+ * Session, so every operation inherits that Session's SSH workspace target.
+ * Individual tabs never offer a host picker. A local Session mounts no operation
+ * body and shows a blurred unavailable mask instead.
+ */
+import { useState, useSyncExternalStore } from 'react'
+import type { SshApi } from '../api.ts'
+import type { SessionSshTargetSource } from '../session-target.ts'
+import { tt } from './helpers.ts'
+import { ClusterTab } from './ClusterTab.tsx'
+import { TerminalTab } from './TerminalTab.tsx'
+import { TransferTab } from './TransferTab.tsx'
+import { TunnelsTab } from './TunnelsTab.tsx'
+import css from './panel.module.css'
+
+/** The console's tab identifiers. */
+export type SshTab = 'terminal' | 'transfer' | 'tunnels' | 'cluster'
+
+/** Console props. */
+export interface SshPanelProps {
+  /** The SSH API client every tab operates through. */
+  api: SshApi
+  /** Selected Session's fixed SSH target; null means a local Session. */
+  target: SessionSshTargetSource
+}
+
+/** The tab bar definition (labels resolved at render time). */
+const TABS: ReadonlyArray<{ id: SshTab; label: () => string }> = [
+  { id: 'terminal', label: () => tt('tab.terminal') },
+  { id: 'transfer', label: () => tt('tab.transfer') },
+  { id: 'tunnels', label: () => tt('tab.tunnels') },
+  { id: 'cluster', label: () => tt('tab.cluster') },
+]
+
+/** The tabbed SSH operations console. */
+export function SshPanel({ api, target }: SshPanelProps) {
+  const [activeTab, setActiveTab] = useState<SshTab>('terminal')
+  const sessionTarget = useSyncExternalStore(target.subscribe, target.getSnapshot, target.getSnapshot)
+
+  if (sessionTarget === null) {
+    return (
+      <div className={css.panel} data-session-mode="local">
+        <div className={css.disabledSurface} aria-hidden="true">
+          <div className={css.tabBar} role="presentation">
+            {TABS.map(tab => <span key={tab.id} className={css.tab}>{tab.label()}</span>)}
+          </div>
+          <div className={css.panelContent}>
+            <div className={css.disabledPlaceholder} />
+          </div>
+        </div>
+        <div className={css.localSessionMask} role="status">
+          <strong>{tt('session.localTitle')}</strong>
+          <span>{tt('session.localUnavailable')}</span>
+        </div>
+      </div>
+    )
+  }
+
+  const targetKey = `${sessionTarget.sessionId}:${sessionTarget.workspaceId}:${sessionTarget.alias}`
+  return (
+    <div className={css.panel} data-session-mode="ssh" data-session-alias={sessionTarget.alias}>
+      <div className={css.tabBar} role="tablist">
+        {TABS.map(tab => (
+          <button key={tab.id} type="button" role="tab" aria-selected={activeTab === tab.id} data-active={activeTab === tab.id ? '' : undefined} className={css.tab} onClick={() => { setActiveTab(tab.id) }}>
+            {tab.label()}
+          </button>
+        ))}
+      </div>
+      <div className={css.sessionTarget} title={sessionTarget.remoteRoot}>
+        {tt('session.target', { alias: sessionTarget.alias, remoteRoot: sessionTarget.remoteRoot })}
+      </div>
+      <div key={targetKey} className={css.panelContent}>
+        {activeTab === 'terminal' && <TerminalTab api={api} alias={sessionTarget.alias} />}
+        {activeTab === 'transfer' && <TransferTab api={api} alias={sessionTarget.alias} remoteRoot={sessionTarget.remoteRoot} />}
+        {activeTab === 'tunnels' && <TunnelsTab api={api} alias={sessionTarget.alias} />}
+        {activeTab === 'cluster' && <ClusterTab api={api} alias={sessionTarget.alias} />}
+      </div>
+    </div>
+  )
+}

package/src/client/ssh/panel/TerminalTab.tsx

@@ -1,7 +1,8 @@
 /**
  * Terminal tab: an xterm.js PTY view over the host's WebSocket terminal route.
- * A host <select> plus connect/disconnect controls; the terminal container is
- * sized by FitAddon (default 80x24 before first fit). On remote exit the last
+ * The target alias is inherited from the selected Session; only connect /
+ * disconnect controls remain. The terminal container is sized by FitAddon
+ * (default 80x24 before first fit). On remote exit the last
  * output stays visible and input is disabled. xterm's stylesheet is injected
  * once per page load (module-level guard).
  */
@@ -9,18 +10,15 @@ import { useEffect, useRef, useState } from 'react'
 import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import type { SshApi, TerminalConnection } from '../api.ts'
-import type { SshHostSummary } from '../../../ssh/protocol.ts'
 import { XTERM_CSS } from './xterm.css.ts'
-import { errorMessage, tt } from './helpers.ts'
+import { tt } from './helpers.ts'
 import css from './panel.module.css'
 
 /** Terminal tab props. */
 export interface TerminalTabProps {
   api: SshApi
-  /** Alias preselected by a "connect" action from the hosts tab. */
-  presetAlias?: string
-  /** Monotonic id of the connect request (re-applies presetAlias). */
-  requestId?: number
+  /** Fixed alias inherited from the selected Session's SSH workspace. */
+  alias: string
 }
 
 /** The terminal session lifecycle state shown in the status banner. */
@@ -45,9 +43,7 @@ function ensureXtermCss(): void {
 }
 
 /** The xterm terminal view. */
-export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
-  const [hosts, setHosts] = useState<SshHostSummary[]>([])
-  const [alias, setAlias] = useState(presetAlias ?? '')
+export function TerminalTab({ api, alias }: TerminalTabProps) {
   const [status, setStatus] = useState<TerminalStatus>({ kind: 'idle' })
   const containerRef = useRef<HTMLDivElement | null>(null)
   const termRef = useRef<Terminal | null>(null)
@@ -56,25 +52,6 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
 
   useEffect(() => { ensureXtermCss() }, [])
 
-  // Fetch the host list on tab activation.
-  useEffect(() => {
-    let disposed = false
-    void (async () => {
-      try {
-        const list = await api.listHosts()
-        if (!disposed) setHosts(list)
-      } catch (cause) {
-        if (!disposed) setStatus({ kind: 'error', detail: errorMessage(cause) })
-      }
-    })()
-    return () => { disposed = true }
-  }, [api])
-
-  // A hosts-tab connect action preselects its alias here.
-  useEffect(() => {
-    if (presetAlias !== undefined) setAlias(presetAlias)
-  }, [presetAlias, requestId])
-
   const teardown = (): void => {
     const connection = connRef.current
     connRef.current = null
@@ -123,13 +100,20 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
     term.loadAddon(fit)
     term.open(container)
     fit.fit()
+    // The WebSocket can be OPEN before the remote shell exists. Keep xterm
+    // input disabled until the protocol's ready frame; the API also keeps a
+    // bounded pre-ready queue as a defensive race buffer.
+    term.options.disableStdin = true
     const connection = api.openTerminal(target, term.cols, term.rows)
     termRef.current = term
     fitRef.current = fit
     connRef.current = connection
     let settled = false
     const dataSub = term.onData(data => { connection.send(data) })
-    connection.onReady = () => { setStatus({ kind: 'connected', alias: target }) }
+    connection.onReady = () => {
+      term.options.disableStdin = false
+      setStatus({ kind: 'connected', alias: target })
+    }
     connection.onOutput = data => { term.write(data) }
     connection.onExit = (code, error) => {
       if (settled) return
@@ -152,11 +136,8 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
   return (
     <div className={css.termBody}>
       <div className={css.controls}>
-        <select className={css.input} value={alias} onChange={event => { setAlias(event.target.value) }}>
-          <option value="">{tt('terminal.selectHost')}</option>
-          {hosts.map(host => <option key={host.alias} value={host.alias}>{host.alias} ({host.host})</option>)}
-        </select>
-        <button type="button" className={css.primaryButton} disabled={alias === '' || active} onClick={connect}>{tt('terminal.connect')}</button>
+        <span className={css.targetBadge}>{alias}</span>
+        <button type="button" className={css.primaryButton} disabled={active} onClick={connect}>{tt('terminal.connect')}</button>
         <button type="button" className={css.ghostButton} disabled={!active} onClick={disconnect}>{tt('terminal.disconnect')}</button>
       </div>
       {status.kind === 'connecting' && <div className={css.banner} data-kind="info">{tt('terminal.connecting')}</div>}
@@ -168,7 +149,7 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
       <div className={css.termWrap}>
         <div ref={containerRef} className={css.termContainer} />
         {status.kind === 'idle' && (
-          <div className={css.termPlaceholder}>{hosts.length === 0 ? tt('hosts.empty') : tt('terminal.placeholder')}</div>
+          <div className={css.termPlaceholder}>{tt('terminal.placeholder')}</div>
         )}
       </div>
     </div>

package/src/client/ssh/panel/TransferTab.tsx

@@ -5,13 +5,17 @@
  */
 import { useEffect, useRef, useState, type ChangeEvent } from 'react'
 import type { SshApi } from '../api.ts'
-import type { RemoteDirEntry, SshHostSummary, TransferProgress } from '../../../ssh/protocol.ts'
+import type { RemoteDirEntry, TransferProgress } from '../../../ssh/protocol.ts'
 import { errorMessage, tt } from './helpers.ts'
 import css from './panel.module.css'
 
 /** Transfer tab props. */
 export interface TransferTabProps {
   api: SshApi
+  /** Fixed alias inherited from the selected Session. */
+  alias: string
+  /** Initial browser/path root inherited from the Session's SSH workspace. */
+  remoteRoot: string
 }
 
 /** One in-flight transfer (drives the progress bar). */
@@ -49,32 +53,23 @@ function formatBytes(bytes: number): string {
 }
 
 /** The upload/download tab. */
-export function TransferTab({ api }: TransferTabProps) {
-  const [hosts, setHosts] = useState<SshHostSummary[]>([])
+export function TransferTab({ api, alias, remoteRoot }: TransferTabProps) {
   const [listError, setListError] = useState<string | null>(null)
-  const [alias, setAlias] = useState('')
-  const [remotePath, setRemotePath] = useState('')
+  const [remotePath, setRemotePath] = useState(remoteRoot)
   const [browseOpen, setBrowseOpen] = useState(false)
-  const [browseDir, setBrowseDir] = useState('/')
+  const [browseDir, setBrowseDir] = useState(remoteRoot)
   const [entries, setEntries] = useState<RemoteDirEntry[]>([])
   const [browsing, setBrowsing] = useState(false)
   const [transfer, setTransfer] = useState<TransferState | null>(null)
   const [status, setStatus] = useState<TransferStatus | null>(null)
   const fileRef = useRef<HTMLInputElement | null>(null)
   const seqRef = useRef(0)
+  const transferAbortRef = useRef<AbortController | null>(null)
 
-  useEffect(() => {
-    let disposed = false
-    void (async () => {
-      try {
-        const list = await api.listHosts()
-        if (!disposed) setHosts(list)
-      } catch (cause) {
-        if (!disposed) setListError(errorMessage(cause))
-      }
-    })()
-    return () => { disposed = true }
-  }, [api])
+  useEffect(() => () => {
+    transferAbortRef.current?.abort(Object.assign(new Error('transfer tab unmounted'), { name: 'AbortError' }))
+    transferAbortRef.current = null
+  }, [])
 
   const loadDir = async (path: string): Promise<void> => {
     if (alias === '') return
@@ -98,9 +93,8 @@ export function TransferTab({ api }: TransferTabProps) {
   }
 
   const openBrowse = (): void => {
-    if (alias === '') return
     setBrowseOpen(true)
-    const path = remotePath.trim() === '' ? '/' : remotePath.trim()
+    const path = remotePath.trim() === '' ? remoteRoot : remotePath.trim()
     void loadDir(path)
   }
 
@@ -108,10 +102,13 @@ export function TransferTab({ api }: TransferTabProps) {
     const file = event.target.files?.[0]
     event.target.value = ''
     if (file === undefined || alias === '' || remotePath.trim() === '' || transfer !== null) return
+    const controller = new AbortController()
+    transferAbortRef.current = controller
     setStatus(null)
     setTransfer({ kind: 'upload', phase: 'connecting', percent: 0, file: file.name })
     try {
       const outcome = await api.uploadFile(file, alias, remotePath.trim(), progress => {
+        if (transferAbortRef.current !== controller || controller.signal.aborted) return
         setTransfer(prev => prev === null ? prev : {
           kind: 'upload',
           phase: progress.phase,
@@ -119,21 +116,31 @@ export function TransferTab({ api }: TransferTabProps) {
           speedBps: progress.speedBps,
           file: progress.file,
         })
-      })
-      setStatus({ kind: 'ok', bytes: outcome.transferredBytes })
+      }, controller.signal)
+      if (transferAbortRef.current === controller && !controller.signal.aborted) {
+        setStatus({ kind: 'ok', bytes: outcome.transferredBytes })
+      }
     } catch (cause) {
-      setStatus({ kind: 'error', error: errorMessage(cause) })
+      if (transferAbortRef.current === controller && !controller.signal.aborted) {
+        setStatus({ kind: 'error', error: errorMessage(cause) })
+      }
     } finally {
-      setTransfer(null)
+      if (transferAbortRef.current === controller) {
+        transferAbortRef.current = null
+        if (!controller.signal.aborted) setTransfer(null)
+      }
     }
   }
 
   const handleDownload = async (): Promise<void> => {
     if (alias === '' || remotePath.trim() === '' || transfer !== null) return
+    const controller = new AbortController()
+    transferAbortRef.current = controller
     setStatus(null)
     setTransfer({ kind: 'download', phase: 'connecting', percent: 0, file: remotePath.trim() })
     try {
       const result = await api.downloadFile(alias, remotePath.trim(), progress => {
+        if (transferAbortRef.current !== controller || controller.signal.aborted) return
         setTransfer(prev => prev === null ? prev : {
           kind: 'download',
           phase: progress.phase,
@@ -141,7 +148,8 @@ export function TransferTab({ api }: TransferTabProps) {
           speedBps: progress.speedBps,
           file: progress.file,
         })
-      })
+      }, controller.signal)
+      if (transferAbortRef.current !== controller || controller.signal.aborted) return
       // Streamed downloads (File System Access API) were already saved; the
       // Blob fallback triggers a browser save here.
       if (!result.streamed && result.blob !== undefined) {
@@ -157,23 +165,25 @@ export function TransferTab({ api }: TransferTabProps) {
       }
       setStatus({ kind: 'ok', bytes: result.bytes })
     } catch (cause) {
-      setStatus({ kind: 'error', error: errorMessage(cause) })
+      if (transferAbortRef.current === controller && !controller.signal.aborted) {
+        setStatus({ kind: 'error', error: errorMessage(cause) })
+      }
     } finally {
-      setTransfer(null)
+      if (transferAbortRef.current === controller) {
+        transferAbortRef.current = null
+        if (!controller.signal.aborted) setTransfer(null)
+      }
     }
   }
 
-  const ready = alias !== '' && remotePath.trim() !== '' && transfer === null
+  const ready = remotePath.trim() !== '' && transfer === null
 
   return (
     <div className={css.tabBody}>
       <div className={css.controls}>
-        <select className={css.input} value={alias} onChange={event => { setAlias(event.target.value) }}>
-          <option value="">{tt('transfer.selectHost')}</option>
-          {hosts.map(host => <option key={host.alias} value={host.alias}>{host.alias} ({host.host})</option>)}
-        </select>
+        <span className={css.targetBadge}>{alias}</span>
         <input className={css.input} placeholder={tt('transfer.remotePathHint')} value={remotePath} onChange={event => { setRemotePath(event.target.value) }} />
-        <button type="button" className={css.ghostButton} disabled={alias === ''} onClick={openBrowse}>{tt('transfer.browseRemote')}</button>
+        <button type="button" className={css.ghostButton} onClick={openBrowse}>{tt('transfer.browseRemote')}</button>
         <div className={css.toolbarSpacer} />
         <button type="button" className={css.primaryButton} disabled={!ready} onClick={() => { fileRef.current?.click() }}>{tt('transfer.upload')}</button>
         <button type="button" className={css.ghostButton} disabled={!ready} onClick={() => { void handleDownload() }}>{tt('transfer.download')}</button>