# Files changed · PR \#22686 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22686/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [refactor\(web\): the add environment dialog owns its form state](https://git.cafe/pingdotgg/t3code/pull/22686.md) Version: 13 Head commit: bd8e39916c28cf06c96f3c22ede04cf5ef08dff5 Base commit: 9179178fdff5ac750c29ef8d6234d5e75538c124 Comparison base: 9179178fdff5ac750c29ef8d6234d5e75538c124 Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/settings/AddEnvironmentDialog.tsx Status: added; +649; −0 ```diff @@ -1,0 +1,649 @@ +import { ChevronsLeftRightEllipsisIcon, PlusIcon, TerminalIcon } from "lucide-react"; +import { useAtomValue } from "@effect/atom-react"; +import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react"; +import { + type DesktopDiscoveredSshHost, + type DesktopSshEnvironmentTarget, +} from "@t3tools/contracts"; +import { + RelayConnectionRegistration, + RelayConnectionTarget, +} from "@t3tools/client-runtime/connection"; +import { + isAtomCommandInterrupted, + squashAtomCommandFailure, +} from "@t3tools/client-runtime/state/runtime"; +import * as Option from "effect/Option"; + +import { cn } from "../../lib/utils"; +import { formatDesktopSshTarget } from "./EnvironmentRow"; +import { Input } from "../ui/input"; +import { CommandShortcut } from "../ui/command"; +import { + Autocomplete, + AutocompleteEmpty, + AutocompleteInput, + AutocompleteItem, + AutocompleteList, + AutocompletePopup, +} from "../ui/autocomplete"; +import { + Dialog, + DialogDescription, + DialogHeader, + DialogPanel, + DialogPopup, + DialogTitle, + DialogTrigger, +} from "../ui/dialog"; +import { stackedThreadToast, toastManager } from "../ui/toast"; +import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +import { Alert, AlertDescription } from "../ui/alert"; +import { Button } from "../ui/button"; +import { AnimatedHeight } from "../AnimatedHeight"; +import { environmentCatalog } from "~/connection/catalog"; +import { + connectPairing as connectPairingAtom, + connectSshEnvironment as connectSshEnvironmentAtom, +} from "~/connection/onboarding"; +import { useEnvironmentQuery } from "~/state/query"; +import { desktopSshHostsStateAtom, filterDiscoveredSshHosts } from "~/state/desktopSshHosts"; +import { type EnvironmentPresentation, useRelayEnvironmentDiscovery } from "~/state/environments"; +import { useAtomCommand } from "../../state/use-atom-command"; +import { primaryServerKeybindingsAtom } from "~/state/server"; +import { + resolveShortcutCommand, + shortcutLabelForCommand, + threadJumpCommandForIndex, + threadJumpIndexFromCommand, +} from "../../keybindings"; +import { + parseManualDesktopSshTarget, + parsePairingUrlFields, + parseRemotePairingFields, + formatDesktopSshConnectionError, +} from "./ConnectionsSettings.logic"; + +const EMPTY_DISCOVERED_SSH_HOSTS: ReadonlyArray = []; + +export function AddEnvironmentDialog({ + open, + routeTarget, + error, + savedEnvironments, + onOpenChange, + onErrorChange, +}: { + readonly open: boolean; + readonly routeTarget: EnvironmentPresentation | null; + readonly error: string | null; + readonly savedEnvironments: ReadonlyArray; + readonly onOpenChange: (open: boolean) => void; + readonly onErrorChange: (error: string | null) => void; +}) { + const desktopBridge = window.desktopBridge; + const keybindings = useAtomValue(primaryServerKeybindingsAtom); + const connectPairing = useAtomCommand(connectPairingAtom, { reportFailure: false }); + const connectSshEnvironment = useAtomCommand(connectSshEnvironmentAtom, { + reportFailure: false, + }); + const registerEnvironment = useAtomCommand(environmentCatalog.register, { + reportFailure: false, + }); + const relayDiscoveryState = useRelayEnvironmentDiscovery(); + const savedDesktopSshEnvironmentKeys = (() => { + const keys = new Set(); + for (const environment of savedEnvironments) { + const profile = environment.entry.profile; + if ( + environment.entry.target._tag !== "SshConnectionTarget" || + Option.isNone(profile) || + profile.value._tag !== "SshConnectionProfile" + ) { + continue; + } + const target = profile.value.target; + keys.add(target.alias); + keys.add(formatDesktopSshTarget(target)); + } + return keys; + })(); + const [savedBackendMode, setSavedBackendMode] = useState<"remote" | "ssh">("remote"); + const [savedBackendHost, setSavedBackendHost] = useState(""); + const [savedBackendPairingCode, setSavedBackendPairingCode] = useState(""); + const [savedBackendSshHost, setSavedBackendSshHost] = useState(""); + const [savedBackendSshUsername, setSavedBackendSshUsername] = useState(""); + const [savedBackendSshPort, setSavedBackendSshPort] = useState(""); + const [sshHostSuggestionsOpen, setSshHostSuggestionsOpen] = useState(false); + const highlightedSshHostRef = useRef(undefined); + const [isAddingSavedBackend, setIsAddingSavedBackend] = useState(false); + const isSshDiscoveryActive = desktopBridge !== undefined && open && savedBackendMode === "ssh"; + const desktopSshHosts = useEnvironmentQuery( + isSshDiscoveryActive ? desktopSshHostsStateAtom : null, + ); + // The discovery atom is kept alive across dialog opens, so re-read SSH config + // each time the SSH tab is shown; stale hosts stay visible while it refreshes. + const refreshDesktopSshHosts = desktopSshHosts.refresh; + useEffect(() => { + if (isSshDiscoveryActive) refreshDesktopSshHosts(); + }, [isSshDiscoveryActive, refreshDesktopSshHosts]); + const discoveredSshHosts = desktopSshHosts.data ?? EMPTY_DISCOVERED_SSH_HOSTS; + const unsavedDiscoveredSshHosts = discoveredSshHosts.filter((target) => { + const address = formatDesktopSshTarget(target); + return ( + !savedDesktopSshEnvironmentKeys.has(target.alias) && + (target.source === "ssh-config" || !savedDesktopSshEnvironmentKeys.has(address)) + ); + }); + const filteredDiscoveredSshHosts = filterDiscoveredSshHosts( + unsavedDiscoveredSshHosts, + savedBackendSshHost, + ); + const isLoadingDiscoveredSshHosts = desktopSshHosts.isPending && desktopSshHosts.data === null; + const discoveredSshHostsError = desktopSshHosts.error; + const hasSshHostSuggestionContent = + desktopBridge !== undefined && + (isLoadingDiscoveredSshHosts || unsavedDiscoveredSshHosts.length > 0); + const connectSavedBackendSshTarget = async (target: DesktopSshEnvironmentTarget) => { + setIsAddingSavedBackend(true); + onErrorChange(null); + const result = await connectSshEnvironment({ + target, + label: "", + ...(routeTarget ? { expectedEnvironmentId: routeTarget.environmentId } : {}), + }); + if (result._tag === "Failure") { + if (!isAtomCommandInterrupted(result)) { + onErrorChange(formatDesktopSshConnectionError(squashAtomCommandFailure(result))); + } + setIsAddingSavedBackend(false); + return; + } + + setSavedBackendHost(""); + setSavedBackendPairingCode(""); + setSavedBackendSshHost(""); + setSavedBackendSshUsername(""); + setSavedBackendSshPort(""); + onOpenChange(false); + toastManager.add({ + type: "success", + title: routeTarget ? "Route added" : "Environment connected", + description: routeTarget + ? `${routeTarget.label} can now be reached over SSH ${target.alias}.` + : `${target.alias} is ready over an SSH-managed tunnel.`, + }); + setIsAddingSavedBackend(false); + }; + + const handleAddSavedBackend = async () => { + if (savedBackendMode === "ssh") { + let target: DesktopSshEnvironmentTarget; + try { + target = parseManualDesktopSshTarget({ + host: savedBackendSshHost, + username: savedBackendSshUsername, + port: savedBackendSshPort, + }); + } catch (error) { + onErrorChange(formatDesktopSshConnectionError(error)); + return; + } + + await connectSavedBackendSshTarget(target); + return; + } + + setIsAddingSavedBackend(true); + onErrorChange(null); + let remotePairingInput: ReturnType; + try { + remotePairingInput = parseRemotePairingFields({ + host: savedBackendHost, + pairingCode: savedBackendPairingCode, + }); + } catch (error) { + const message = error instanceof Error ? error.message : "Failed to add backend."; + onErrorChange(message); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Could not add backend", + description: message, + }), + ); + setIsAddingSavedBackend(false); + return; + } + + const result = await connectPairing({ + ...remotePairingInput, + ...(routeTarget ? { expectedEnvironmentId: routeTarget.environmentId } : {}), + }); + if (result._tag === "Failure") { + if (!isAtomCommandInterrupted(result)) { + const error = squashAtomCommandFailure(result); + const message = error instanceof Error ? error.message : "Failed to add backend."; + onErrorChange(message); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Could not add backend", + description: message, + }), + ); + } + setIsAddingSavedBackend(false); + return; + } + + setSavedBackendHost(""); + setSavedBackendPairingCode(""); + setSavedBackendSshHost(""); + setSavedBackendSshUsername(""); + setSavedBackendSshPort(""); + onOpenChange(false); + toastManager.add( + routeTarget + ? { + type: "success", + title: "Route added", + description: `${routeTarget.label} now has another way to connect.`, + } + : { + type: "success", + title: "Backend added", + description: "The environment is saved and will reconnect on app startup.", + }, + ); + setIsAddingSavedBackend(false); + }; + + const handleSavedBackendSshFieldKeyDown = (event: KeyboardEvent) => { + if (event.nativeEvent.isComposing || event.keyCode === 229) return; + if (event.key === "Enter" && savedBackendSshHost.trim().length > 0) { + event.preventDefault(); + void handleAddSavedBackend(); + } + }; + + const handleSelectSshHostSuggestion = async (target: DesktopDiscoveredSshHost) => { + if (isAddingSavedBackend || !desktopBridge) return; + + setIsAddingSavedBackend(true); + onErrorChange(null); + setSavedBackendSshHost(target.alias); + let resolved: DesktopSshEnvironmentTarget; + try { + resolved = await desktopBridge.resolveSshHost(target.alias); + } catch (error) { + onErrorChange(formatDesktopSshConnectionError(error)); + setIsAddingSavedBackend(false); + return; + } + setSavedBackendSshUsername(resolved.username ?? ""); + setSavedBackendSshPort(resolved.port === null ? "" : String(resolved.port)); + await connectSavedBackendSshTarget(resolved); + }; + + const handleSavedBackendSshHostKeyDown = (event: KeyboardEvent) => { + if (event.nativeEvent.isComposing || event.keyCode === 229) return; + + const isSshHostPopupVisible = sshHostSuggestionsOpen && hasSshHostSuggestionContent; + if (isSshHostPopupVisible) { + const command = resolveShortcutCommand(event, keybindings, { + platform: navigator.platform, + context: { modelPickerOpen: false }, + }); + const index = threadJumpIndexFromCommand(command ?? ""); + const target = index === null ? undefined : filteredDiscoveredSshHosts[index]; + if (target) { + event.preventDefault(); + event.stopPropagation(); + setSshHostSuggestionsOpen(false); + void handleSelectSshHostSuggestion(target); + return; + } + + if (event.key === "Escape") { + event.preventDefault(); + event.stopPropagation(); + return; + } + } + + const hasHighlightedSshHost = + isSshHostPopupVisible && highlightedSshHostRef.current !== undefined; + if ( + !event.defaultPrevented && + !hasHighlightedSshHost && + event.key === "Enter" && + savedBackendSshHost.trim().length > 0 + ) { + event.preventDefault(); + void handleAddSavedBackend(); + } + }; + + const handleSavedBackendHostChange = (value: string) => { + const parsedPairingUrl = parsePairingUrlFields(value); + if (parsedPairingUrl) { + setSavedBackendHost(parsedPairingUrl.host); + setSavedBackendPairingCode(parsedPairingUrl.pairingCode); + return; + } + setSavedBackendHost(value); + }; + const renderConnectionModeCard = (input: { + readonly mode: "remote" | "ssh"; + readonly title: string; + readonly description: string; + readonly icon?: ReactNode; + }) => { + const selected = savedBackendMode === input.mode; + return ( + + ); + }; + + const renderRemoteFields = () => ( +
+
+ + +
+
+ + Paste a full pairing URL here to fill both fields automatically. + +
+
+ ); + const relayRouteOffer = + routeTarget !== null && + !routeTarget.relayManaged && + relayDiscoveryState.environments.has(routeTarget.environmentId) + ? relayDiscoveryState.environments.get(routeTarget.environmentId)!.environment + : null; + const addRelayRoute = async () => { + if (relayRouteOffer === null || routeTarget === null) return; + setIsAddingSavedBackend(true); + const result = await registerEnvironment( + new RelayConnectionRegistration({ + target: new RelayConnectionTarget({ + environmentId: relayRouteOffer.environmentId, + label: routeTarget.label, + }), + }), + ); + setIsAddingSavedBackend(false); + if (result._tag === "Failure") { + if (!isAtomCommandInterrupted(result)) { + const error = squashAtomCommandFailure(result); + onErrorChange(error instanceof Error ? error.message : "Could not add the route."); + } + return; + } + onOpenChange(false); + toastManager.add({ + type: "success", + title: "Route added", + description: `${routeTarget.label} falls back to T3 Connect when its other routes are unreachable.`, + }); + }; + const renderRemoteModeBody = () => ( +
+ {relayRouteOffer !== null ? ( +
+

+ This machine is on your T3 Connect account. Use it as a fallback route. +

+ +
+ ) : null} + {renderRemoteFields()} + {error ?

{error}

: null} + +
+ ); + const renderSshFields = () => ( +
+
+
+ + target.alias} + mode="none" + openOnInputClick + open={sshHostSuggestionsOpen} + onOpenChange={setSshHostSuggestionsOpen} + onItemHighlighted={(target) => { + highlightedSshHostRef.current = target; + }} + value={savedBackendSshHost} + onValueChange={(value, eventDetails) => { + setSavedBackendSshHost(value); + if (eventDetails.reason !== "item-press") return; + + const target = filteredDiscoveredSshHosts.find((host) => host.alias === value); + if (target) void handleSelectSshHostSuggestion(target); + }} + > + + {hasSshHostSuggestionContent ? ( + + {isLoadingDiscoveredSshHosts ? ( +
Loading hosts…
+ ) : filteredDiscoveredSshHosts.length > 0 ? ( + + {filteredDiscoveredSshHosts.map((target, index) => { + const address = formatDesktopSshTarget(target); + const shortcutCommand = index < 9 ? threadJumpCommandForIndex(index) : null; + const shortcutLabel = shortcutCommand + ? shortcutLabelForCommand(keybindings, shortcutCommand, navigator.platform) + : null; + return ( + + + {target.alias} + + {address !== target.alias ? ( + + {address} + + ) : ( + + )} + {shortcutLabel ? ( + {shortcutLabel} + ) : null} + + ); + })} + + ) : ( + + No hosts match "{savedBackendSshHost.trim()}". + + )} + + ) : null} + +
+
+ + +
+ {error || discoveredSshHostsError ? ( + + {error ?? discoveredSshHostsError} + + ) : null} + +
+
+ ); + + return ( + + + + + Add environment + + } + /> + } + /> + Add environment + + + + + {routeTarget ? `Add a route to ${routeTarget.label}` : "Add Environment"} + + + {routeTarget + ? "Pair this machine again over another address, such as its Tailscale name. It joins the existing routes instead of adding a second machine." + : "Pair another environment to this client."} + + + +
+
+ {renderConnectionModeCard({ + mode: "remote", + title: "Remote link", + description: "Enter a backend host and pairing code.", + icon: , + })} + {desktopBridge + ? renderConnectionModeCard({ + mode: "ssh", + title: "SSH", + description: "Use local SSH config, agent, and tunnels for the backend.", + icon: , + }) + : null} +
+ + {savedBackendMode === "ssh" ? renderSshFields() : renderRemoteModeBody()} + +
+ + + + ); +} ``` ## apps/web/src/components/settings/ConnectionsSettings.tsx Status: modified; +19; −623 ```diff @@ -1,13 +1,7 @@ import { SessionPermissions } from "./SessionPermissions"; -import { - ChevronRightIcon, - ChevronsLeftRightEllipsisIcon, - EllipsisIcon, +import { ChevronRightIcon, EllipsisIcon } from "lucide-react"; - PlusIcon, - TerminalIcon, -} from "lucide-react"; import { useAtomValue } from "@effect/atom-react"; +import { useState } from "react"; -import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react"; import { AuthAccessReadScope, AuthAccessWriteScope, @@ -18,26 +12,18 @@ type AuthPairingLink, type AuthPairingCredentialResult, type AdvertisedEndpoint, - type DesktopDiscoveredSshHost, - type DesktopSshEnvironmentTarget, type DesktopServerExposureState, type DesktopWslState, type EnvironmentId, resolveEnvironmentMachineKind, } from "@t3tools/contracts"; -import { - RelayConnectionRegistration, - RelayConnectionTarget, -} from "@t3tools/client-runtime/connection"; import { isAtomCommandInterrupted, settlePromise, squashAtomCommandFailure, } from "@t3tools/client-runtime/state/runtime"; import * as Cause from "effect/Cause"; -import * as Option from "effect/Option"; -import { cn } from "../../lib/utils"; import { isLocalEnvironmentDisabled } from "../../localEnvironment"; import { applyWslEnableSelection, @@ -49,21 +35,11 @@ import { LocalEnvironmentSetting } from "./LocalEnvironmentSetting"; import { searchableSetting } from "./settingsSearch"; import { EnvironmentIconMenu } from "./EnvironmentIconPicker"; -import { formatDesktopSshTarget } from "./EnvironmentRow"; import { FoldedSettingsSection } from "./FoldedSettingsSection"; import { LoadBalancingSettings } from "./LoadBalancingSettings"; import { GitHubRoutingSettings } from "./GitHubRoutingSettings"; import { Input } from "../ui/input"; -import { CommandShortcut } from "../ui/command"; import { - Autocomplete, - AutocompleteEmpty, - AutocompleteInput, - AutocompleteItem, - AutocompleteList, - AutocompletePopup, -} from "../ui/autocomplete"; -import { Dialog, DialogClose, DialogFooter, @@ -72,7 +48,6 @@ DialogPanel, DialogPopup, DialogTitle, - DialogTrigger, } from "../ui/dialog"; import { ScrollArea } from "../ui/scroll-area"; import { @@ -90,9 +65,7 @@ import { Switch } from "../ui/switch"; import { stackedThreadToast, toastManager } from "../ui/toast"; import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; -import { Alert, AlertDescription } from "../ui/alert"; import { Button } from "../ui/button"; -import { AnimatedHeight } from "../AnimatedHeight"; import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon"; import { revokeOtherServerClientSessions, @@ -113,50 +86,30 @@ import { RemoveT3ConnectEnvironmentDialog } from "../clerk/RemoveT3ConnectEnvironmentDialog"; import { authEnvironment } from "~/state/auth"; import { environmentCatalog } from "~/connection/catalog"; -import { - connectPairing as connectPairingAtom, - connectSshEnvironment as connectSshEnvironmentAtom, -} from "~/connection/onboarding"; import { readEnvironmentScope, useEnvironmentScope } from "~/state/session"; import { useEnvironmentQuery } from "~/state/query"; import { desktopNetworkAccessStateAtom, refreshDesktopNetworkAccessState, } from "~/state/desktopNetworkAccess"; -import { desktopSshHostsStateAtom, filterDiscoveredSshHosts } from "~/state/desktopSshHosts"; import { desktopWslStateAtom, refreshDesktopWslState } from "~/state/desktopWslState"; import { useDesktopUpdateState } from "~/state/desktopUpdate"; import { type EnvironmentPresentation, useEnvironments, usePrimaryEnvironment, - useRelayEnvironmentDiscovery, } from "~/state/environments"; import { requestConfirmDialog } from "~/confirmDialog"; import { useAtomCommand } from "../../state/use-atom-command"; import { environmentIdsKey } from "~/state/environmentAtomList"; +import { environmentUpdateStatesAtom, serverEnvironment } from "~/state/server"; import { - environmentUpdateStatesAtom, - primaryServerKeybindingsAtom, - serverEnvironment, -} from "~/state/server"; -import { ServerUpdateAction, ServerUpdateProgress, ServerUpdatesAction, type ServerUpdateTarget, } from "../ServerUpdateAction"; import { - resolveShortcutCommand, - shortcutLabelForCommand, - threadJumpCommandForIndex, - threadJumpIndexFromCommand, -} from "../../keybindings"; -import { - parseManualDesktopSshTarget, - parsePairingUrlFields, - parseRemotePairingFields, - formatDesktopSshConnectionError, sortDesktopPairingLinks, summarizeAuthorizedClients, sortDesktopClientSessions, @@ -179,10 +132,10 @@ CloudRemoteEnvironmentRows, SavedBackendListRow, } from "./SavedEnvironmentRows"; +import { AddEnvironmentDialog } from "./AddEnvironmentDialog"; const DEFAULT_TAILSCALE_SERVE_PORT = 443; const EMPTY_ADVERTISED_ENDPOINTS: ReadonlyArray = []; -const EMPTY_DISCOVERED_SSH_HOSTS: ReadonlyArray = []; // Sentinels for the consolidated WSL backend picker. The colon is // rejected by DISTRO_NAME_PATTERN (validated on the desktop side) so @@ -202,18 +155,9 @@ export function ConnectionsSettings() { const desktopBridge = window.desktopBridge; - const keybindings = useAtomValue(primaryServerKeybindingsAtom); const { environments } = useEnvironments(); const primaryEnvironment = usePrimaryEnvironment(); - const connectPairing = useAtomCommand(connectPairingAtom, { reportFailure: false }); - const connectSshEnvironment = useAtomCommand(connectSshEnvironmentAtom, { - reportFailure: false, - }); const removeEnvironment = useAtomCommand(environmentCatalog.remove, { reportFailure: false }); - const registerEnvironment = useAtomCommand(environmentCatalog.register, { - reportFailure: false, - }); - const relayDiscoveryState = useRelayEnvironmentDiscovery(); const setEnvironmentEnabled = useAtomCommand(environmentCatalog.setEnabled, { reportFailure: false, }); @@ -273,23 +217,6 @@ ...(primaryEnvironment ? [primaryEnvironment] : []), ...savedEnvironments.filter((environment) => environment.entry.enabled), ].filter((environment) => environment.connection.phase !== "unsupported"); - const savedDesktopSshEnvironmentKeys = (() => { - const keys = new Set(); - for (const environment of savedEnvironments) { - const profile = environment.entry.profile; - if ( - environment.entry.target._tag !== "SshConnectionTarget" || - Option.isNone(profile) || - profile.value._tag !== "SshConnectionProfile" - ) { - continue; - } - const target = profile.value.target; - keys.add(target.alias); - keys.add(formatDesktopSshTarget(target)); - } - return keys; - })(); const [desktopServerExposureMutationError, setDesktopServerExposureMutationError] = useState< string | null >(null); @@ -311,16 +238,15 @@ const [isRevokingOtherDesktopClients, setIsRevokingOtherDesktopClients] = useState(false); const [addBackendDialogOpen, setAddBackendDialogOpen] = useState(false); const [routeTarget, setRouteTarget] = useState(null); - const [savedBackendMode, setSavedBackendMode] = useState<"remote" | "ssh">("remote"); - const [savedBackendHost, setSavedBackendHost] = useState(""); - const [savedBackendPairingCode, setSavedBackendPairingCode] = useState(""); - const [savedBackendSshHost, setSavedBackendSshHost] = useState(""); - const [savedBackendSshUsername, setSavedBackendSshUsername] = useState(""); - const [savedBackendSshPort, setSavedBackendSshPort] = useState(""); - const [sshHostSuggestionsOpen, setSshHostSuggestionsOpen] = useState(false); - const highlightedSshHostRef = useRef(undefined); const [savedBackendError, setSavedBackendError] = useState(null); - const [isAddingSavedBackend, setIsAddingSavedBackend] = useState(false); + const handleAddBackendDialogOpenChange = (open: boolean) => { + setAddBackendDialogOpen(open); + if (open) { + setRouteTarget(null); + } else { + setSavedBackendError(null); + } + }; const [removingSavedEnvironmentId, setRemovingSavedEnvironmentId] = useState(null); const [isUpdatingDesktopServerExposure, setIsUpdatingDesktopServerExposure] = useState(false); @@ -372,40 +298,12 @@ const desktopNetworkAccess = useEnvironmentQuery( canManageLocalBackend && desktopBridge ? desktopNetworkAccessStateAtom : null, ); - const isSshDiscoveryActive = - desktopBridge !== undefined && addBackendDialogOpen && savedBackendMode === "ssh"; - const desktopSshHosts = useEnvironmentQuery( - isSshDiscoveryActive ? desktopSshHostsStateAtom : null, - ); - // The discovery atom is kept alive across dialog opens, so re-read SSH config - // each time the SSH tab is shown; stale hosts stay visible while it refreshes. - const refreshDesktopSshHosts = desktopSshHosts.refresh; - useEffect(() => { - if (isSshDiscoveryActive) refreshDesktopSshHosts(); - }, [isSshDiscoveryActive, refreshDesktopSshHosts]); const desktopWsl = useEnvironmentQuery( canManageLocalBackend && desktopBridge ? desktopWslStateAtom : null, ); const desktopWslState = desktopWsl.data; const desktopWslError = desktopWslMutationError ?? desktopWsl.error; const isLoadingWslState = desktopWsl.isPending && desktopWsl.data === null; - const discoveredSshHosts = desktopSshHosts.data ?? EMPTY_DISCOVERED_SSH_HOSTS; - const unsavedDiscoveredSshHosts = discoveredSshHosts.filter((target) => { - const address = formatDesktopSshTarget(target); - return ( - !savedDesktopSshEnvironmentKeys.has(target.alias) && - (target.source === "ssh-config" || !savedDesktopSshEnvironmentKeys.has(address)) - ); - }); - const filteredDiscoveredSshHosts = filterDiscoveredSshHosts( - unsavedDiscoveredSshHosts, - savedBackendSshHost, - ); - const isLoadingDiscoveredSshHosts = desktopSshHosts.isPending && desktopSshHosts.data === null; - const discoveredSshHostsError = desktopSshHosts.error; - const hasSshHostSuggestionContent = - desktopBridge !== undefined && - (isLoadingDiscoveredSshHosts || unsavedDiscoveredSshHosts.length > 0); const desktopServerExposureState = desktopNetworkAccess.data?.serverExposureState ?? null; const desktopAdvertisedEndpoints = desktopNetworkAccess.data?.advertisedEndpoints ?? EMPTY_ADVERTISED_ENDPOINTS; @@ -656,187 +554,6 @@ setIsRevokingOtherDesktopClients(false); }; - const connectSavedBackendSshTarget = async (target: DesktopSshEnvironmentTarget) => { - setIsAddingSavedBackend(true); - setSavedBackendError(null); - const result = await connectSshEnvironment({ - target, - label: "", - ...(routeTarget ? { expectedEnvironmentId: routeTarget.environmentId } : {}), - }); - if (result._tag === "Failure") { - if (!isAtomCommandInterrupted(result)) { - setSavedBackendError(formatDesktopSshConnectionError(squashAtomCommandFailure(result))); - } - setIsAddingSavedBackend(false); - return; - } - - setSavedBackendHost(""); - setSavedBackendPairingCode(""); - setSavedBackendSshHost(""); - setSavedBackendSshUsername(""); - setSavedBackendSshPort(""); - setAddBackendDialogOpen(false); - toastManager.add({ - type: "success", - title: routeTarget ? "Route added" : "Environment connected", - description: routeTarget - ? `${routeTarget.label} can now be reached over SSH ${target.alias}.` - : `${target.alias} is ready over an SSH-managed tunnel.`, - }); - setIsAddingSavedBackend(false); - }; - - const handleAddSavedBackend = async () => { - if (savedBackendMode === "ssh") { - let target: DesktopSshEnvironmentTarget; - try { - target = parseManualDesktopSshTarget({ - host: savedBackendSshHost, - username: savedBackendSshUsername, - port: savedBackendSshPort, - }); - } catch (error) { - setSavedBackendError(formatDesktopSshConnectionError(error)); - return; - } - - await connectSavedBackendSshTarget(target); - return; - } - - setIsAddingSavedBackend(true); - setSavedBackendError(null); - let remotePairingInput: ReturnType; - try { - remotePairingInput = parseRemotePairingFields({ - host: savedBackendHost, - pairingCode: savedBackendPairingCode, - }); - } catch (error) { - const message = error instanceof Error ? error.message : "Failed to add backend."; - setSavedBackendError(message); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Could not add backend", - description: message, - }), - ); - setIsAddingSavedBackend(false); - return; - } - - const result = await connectPairing({ - ...remotePairingInput, - ...(routeTarget ? { expectedEnvironmentId: routeTarget.environmentId } : {}), - }); - if (result._tag === "Failure") { - if (!isAtomCommandInterrupted(result)) { - const error = squashAtomCommandFailure(result); - const message = error instanceof Error ? error.message : "Failed to add backend."; - setSavedBackendError(message); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Could not add backend", - description: message, - }), - ); - } - setIsAddingSavedBackend(false); - return; - } - - setSavedBackendHost(""); - setSavedBackendPairingCode(""); - setSavedBackendSshHost(""); - setSavedBackendSshUsername(""); - setSavedBackendSshPort(""); - setAddBackendDialogOpen(false); - toastManager.add( - routeTarget - ? { - type: "success", - title: "Route added", - description: `${routeTarget.label} now has another way to connect.`, - } - : { - type: "success", - title: "Backend added", - description: "The environment is saved and will reconnect on app startup.", - }, - ); - setIsAddingSavedBackend(false); - }; - - const handleSavedBackendSshFieldKeyDown = (event: KeyboardEvent) => { - if (event.nativeEvent.isComposing || event.keyCode === 229) return; - if (event.key === "Enter" && savedBackendSshHost.trim().length > 0) { - event.preventDefault(); - void handleAddSavedBackend(); - } - }; - - const handleSelectSshHostSuggestion = async (target: DesktopDiscoveredSshHost) => { - if (isAddingSavedBackend || !desktopBridge) return; - - setIsAddingSavedBackend(true); - setSavedBackendError(null); - setSavedBackendSshHost(target.alias); - let resolved: DesktopSshEnvironmentTarget; - try { - resolved = await desktopBridge.resolveSshHost(target.alias); - } catch (error) { - setSavedBackendError(formatDesktopSshConnectionError(error)); - setIsAddingSavedBackend(false); - return; - } - setSavedBackendSshUsername(resolved.username ?? ""); - setSavedBackendSshPort(resolved.port === null ? "" : String(resolved.port)); - await connectSavedBackendSshTarget(resolved); - }; - - const handleSavedBackendSshHostKeyDown = (event: KeyboardEvent) => { - if (event.nativeEvent.isComposing || event.keyCode === 229) return; - - const isSshHostPopupVisible = sshHostSuggestionsOpen && hasSshHostSuggestionContent; - if (isSshHostPopupVisible) { - const command = resolveShortcutCommand(event, keybindings, { - platform: navigator.platform, - context: { modelPickerOpen: false }, - }); - const index = threadJumpIndexFromCommand(command ?? ""); - const target = index === null ? undefined : filteredDiscoveredSshHosts[index]; - if (target) { - event.preventDefault(); - event.stopPropagation(); - setSshHostSuggestionsOpen(false); - void handleSelectSshHostSuggestion(target); - return; - } - - if (event.key === "Escape") { - event.preventDefault(); - event.stopPropagation(); - return; - } - } - - const hasHighlightedSshHost = - isSshHostPopupVisible && highlightedSshHostRef.current !== undefined; - if ( - !event.defaultPrevented && - !hasHighlightedSshHost && - event.key === "Enter" && - savedBackendSshHost.trim().length > 0 - ) { - event.preventDefault(); - void handleAddSavedBackend(); - } - }; - const handleSetSavedBackendEnabled = async (environmentId: EnvironmentId, enabled: boolean) => { setSavedBackendError(null); const result = await setEnvironmentEnabled({ environmentId, enabled }); @@ -917,273 +634,7 @@ const handleSetDefaultAdvertisedEndpoint = (endpoint: AdvertisedEndpoint) => { setDefaultAdvertisedEndpointKey(endpointDefaultPreferenceKey(endpoint)); }; - const handleSavedBackendHostChange = (value: string) => { - const parsedPairingUrl = parsePairingUrlFields(value); - if (parsedPairingUrl) { - setSavedBackendHost(parsedPairingUrl.host); - setSavedBackendPairingCode(parsedPairingUrl.pairingCode); - return; - } - setSavedBackendHost(value); - }; - const renderConnectionModeCard = (input: { - readonly mode: "remote" | "ssh"; - readonly title: string; - readonly description: string; - readonly icon?: ReactNode; - }) => { - const selected = savedBackendMode === input.mode; - return ( - - ); - }; - - const renderRemoteFields = () => ( -
-
- - -
-
- - Paste a full pairing URL here to fill both fields automatically. - -
-
- ); - const relayRouteOffer = - routeTarget !== null && - !routeTarget.relayManaged && - relayDiscoveryState.environments.has(routeTarget.environmentId) - ? relayDiscoveryState.environments.get(routeTarget.environmentId)!.environment - : null; - const addRelayRoute = async () => { - if (relayRouteOffer === null || routeTarget === null) return; - setIsAddingSavedBackend(true); - const result = await registerEnvironment( - new RelayConnectionRegistration({ - target: new RelayConnectionTarget({ - environmentId: relayRouteOffer.environmentId, - label: routeTarget.label, - }), - }), - ); - setIsAddingSavedBackend(false); - if (result._tag === "Failure") { - if (!isAtomCommandInterrupted(result)) { - const error = squashAtomCommandFailure(result); - setSavedBackendError(error instanceof Error ? error.message : "Could not add the route."); - } - return; - } - setAddBackendDialogOpen(false); - toastManager.add({ - type: "success", - title: "Route added", - description: `${routeTarget.label} falls back to T3 Connect when its other routes are unreachable.`, - }); - }; - const renderRemoteModeBody = () => ( -
- {relayRouteOffer !== null ? ( -
-

- This machine is on your T3 Connect account. Use it as a fallback route. -

- -
- ) : null} - {renderRemoteFields()} - {savedBackendError ?

{savedBackendError}

: null} - -
- ); - const renderSshFields = () => ( -
-
-
- - target.alias} - mode="none" - openOnInputClick - open={sshHostSuggestionsOpen} - onOpenChange={setSshHostSuggestionsOpen} - onItemHighlighted={(target) => { - highlightedSshHostRef.current = target; - }} - value={savedBackendSshHost} - onValueChange={(value, eventDetails) => { - setSavedBackendSshHost(value); - if (eventDetails.reason !== "item-press") return; - - const target = filteredDiscoveredSshHosts.find((host) => host.alias === value); - if (target) void handleSelectSshHostSuggestion(target); - }} - > - - {hasSshHostSuggestionContent ? ( - - {isLoadingDiscoveredSshHosts ? ( -
Loading hosts…
- ) : filteredDiscoveredSshHosts.length > 0 ? ( - - {filteredDiscoveredSshHosts.map((target, index) => { - const address = formatDesktopSshTarget(target); - const shortcutCommand = index < 9 ? threadJumpCommandForIndex(index) : null; - const shortcutLabel = shortcutCommand - ? shortcutLabelForCommand(keybindings, shortcutCommand, navigator.platform) - : null; - return ( - - - {target.alias} - - {address !== target.alias ? ( - - {address} - - ) : ( - - )} - {shortcutLabel ? ( - {shortcutLabel} - ) : null} - - ); - })} - - ) : ( - - No hosts match "{savedBackendSshHost.trim()}". - - )} - - ) : null} - -
-
- - -
- {savedBackendError || discoveredSshHostsError ? ( - - {savedBackendError ?? discoveredSshHostsError} - - ) : null} - -
-
- ); const renderNetworkAccessToggle = () => ( 0 ? ( ) : null} + { - setAddBackendDialogOpen(open); - if (open) { - setRouteTarget(null); - } else { - setSavedBackendError(null); - } - }} - > - - - - Add environment - - } - /> - } - /> - Add environment - - - - - {routeTarget ? `Add a route to ${routeTarget.label}` : "Add Environment"} - - - {routeTarget - ? "Pair this machine again over another address, such as its Tailscale name. It joins the existing routes instead of adding a second machine." - : "Pair another environment to this client."} - - - -
-
- {renderConnectionModeCard({ - mode: "remote", - title: "Remote link", - description: "Enter a backend host and pairing code.", - icon: , - })} - {desktopBridge - ? renderConnectionModeCard({ - mode: "ssh", - title: "SSH", - description: - "Use local SSH config, agent, and tunnels for the backend.", - icon: , - }) - : null} -
- - {savedBackendMode === "ssh" ? renderSshFields() : renderRemoteModeBody()} - -
+ routeTarget={routeTarget} - - - + error={savedBackendError} + savedEnvironments={savedEnvironments} + onOpenChange={handleAddBackendDialogOpenChange} + onErrorChange={setSavedBackendError} + /> } > ```