import { ChevronDownIcon, ChevronsLeftRightEllipsisIcon, PlusIcon, QrCodeIcon, RefreshCwIcon, TerminalIcon, TriangleAlertIcon,} from "lucide-react";import { useAuth } from "@clerk/react";import { type ReactNode, memo, useCallback, useEffect, useMemo, useState } from "react";import { AuthAccessReadScope, AuthAccessWriteScope, AuthAdministrativeScopes, AuthOrchestrationOperateScope, AuthOrchestrationReadScope, AuthRelayReadScope, AuthRelayWriteScope, AuthReviewWriteScope, AuthStandardClientScopes, AuthTerminalOperateScope, type AuthClientSession, type AuthEnvironmentScope, type AuthPairingLink, type AdvertisedEndpoint, type DesktopDiscoveredSshHost, type DesktopSshEnvironmentTarget, type DesktopServerExposureState, type EnvironmentId,} from "@t3tools/contracts";import { connectionStatusText, RelayConnectionRegistration, RelayConnectionTarget,} from "@t3tools/client-runtime/connection";import { findErrorTraceId } from "@t3tools/client-runtime/errors";import { isAtomCommandInterrupted, settlePromise, squashAtomCommandFailure,} from "@t3tools/client-runtime/state/runtime";import type { RelayClientEnvironmentRecord } from "@t3tools/contracts/relay";import * as DateTime from "effect/DateTime";import * as Option from "effect/Option"; import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";import { cn } from "../../lib/utils";import { formatElapsedDurationLabel, formatExpiresInLabel } from "../../timestampFormat";import { resolveDesktopPairingUrl, resolveHostedPairingUrl } from "./pairingUrls";import { resolveRelayClerkTokenOptions } from "../../cloud/publicConfig";import { SettingsPageContainer, SettingsRow, SettingsSection, useRelativeTimeTick,} from "./settingsLayout";import { Input } from "../ui/input";import { Checkbox } from "../ui/checkbox";import { Dialog, DialogClose, DialogFooter, DialogDescription, DialogHeader, DialogPanel, DialogPopup, DialogTitle, DialogTrigger,} from "../ui/dialog";import { ScrollArea } from "../ui/scroll-area";import { AlertDialog, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle,} from "../ui/alert-dialog";import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";import { QRCodeSvg } from "../ui/qr-code";import { Skeleton } from "../ui/skeleton";import { Spinner } from "../ui/spinner";import { Switch } from "../ui/switch";import { stackedThreadToast, toastManager } from "../ui/toast";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import { Button } from "../ui/button";import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";import { Group, GroupSeparator } from "../ui/group";import { AnimatedHeight } from "../AnimatedHeight";import { Menu, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuTrigger,} from "../ui/menu";import { Textarea } from "../ui/textarea";import { getPairingTokenFromUrl, setPairingTokenOnUrl } from "../../pairingUrl";import { readHostedPairingRequest } from "../../hostedPairing";import { createServerPairingCredential, revokeOtherServerClientSessions, revokeServerClientSession, revokeServerPairingLink, isLoopbackHostname, usePrimarySessionState, type ServerClientSessionRecord, type ServerPairingLinkRecord,} from "~/environments/primary";import { useUiStateStore } from "~/uiStateStore";import { resolveServerConfigVersionMismatch } from "~/versionSkew";import { usePrimaryCloudLinkState } from "~/cloud/primaryCloudLinkState";import { hasCloudPublicConfig } from "~/cloud/publicConfig";import { linkPrimaryEnvironment as linkPrimaryEnvironmentAtom, unlinkPrimaryEnvironment as unlinkPrimaryEnvironmentAtom,} from "~/cloud/linkEnvironmentAtoms";import { authEnvironment } from "~/state/auth";import { environmentCatalog } from "~/connection/catalog";import { connectPairing as connectPairingAtom, connectSshEnvironment as connectSshEnvironmentAtom,} from "~/connection/onboarding";import { useEnvironmentQuery } from "~/state/query";import { desktopNetworkAccessStateAtom, refreshDesktopNetworkAccessState,} from "~/state/desktopNetworkAccess";import { desktopSshHostsStateAtom } from "~/state/desktopSshHosts";import { type EnvironmentPresentation, useEnvironments, usePrimaryEnvironment, useRelayEnvironmentDiscovery,} from "~/state/environments";import { relayEnvironmentDiscovery } from "~/state/relay";import { useAtomCommand } from "../../state/use-atom-command"; const DEFAULT_TAILSCALE_SERVE_PORT = 443;const EMPTY_ADVERTISED_ENDPOINTS: ReadonlyArray<AdvertisedEndpoint> = [];const EMPTY_DISCOVERED_SSH_HOSTS: ReadonlyArray<DesktopDiscoveredSshHost> = []; const accessTimestampFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short",}); function formatAccessTimestamp(value: string): string { const parsed = new Date(value); if (Number.isNaN(parsed.getTime())) { return value; } return accessTimestampFormatter.format(parsed);} const PAIRING_SCOPE_OPTIONS: ReadonlyArray<{ readonly scope: AuthEnvironmentScope; readonly title: string; readonly description: string;}> = [ { scope: AuthOrchestrationReadScope, title: "View environment", description: "Read threads, status, diffs, and configuration.", }, { scope: AuthOrchestrationOperateScope, title: "Operate tasks", description: "Start tasks and perform changes in the environment.", }, { scope: AuthTerminalOperateScope, title: "Use terminals", description: "Create terminals and send input to running shells.", }, { scope: AuthReviewWriteScope, title: "Write reviews", description: "Create comments while reviewing changes.", }, { scope: AuthAccessReadScope, title: "View access", description: "Inspect pairing links and authorized clients.", }, { scope: AuthAccessWriteScope, title: "Manage access", description: "Issue and revoke credentials for other clients.", }, { scope: AuthRelayReadScope, title: "View relay", description: "Inspect managed relay connectivity.", }, { scope: AuthRelayWriteScope, title: "Manage relay", description: "Change managed tunnel connectivity.", },]; function AccessScopeSummary({ scopes, label,}: { readonly scopes: ReadonlyArray<AuthEnvironmentScope>; readonly label: string;}) { const scopeCountLabel = `${scopes.length} ${scopes.length === 1 ? "scope" : "scopes"}`; return ( <Popover> <PopoverTrigger openOnHover delay={250} closeDelay={100} render={ <button type="button" aria-label={`${label}: show ${scopeCountLabel}`} className="cursor-help underline decoration-border underline-offset-2 outline-hidden hover:text-foreground focus-visible:text-foreground" /> } > {scopeCountLabel} </PopoverTrigger> <PopoverPopup side="top" align="start" tooltipStyle className="w-max max-w-80 whitespace-normal" > <p className="mb-1 font-medium">Granted scopes</p> <div className="flex flex-col gap-0.5"> {scopes.map((scope) => ( <code key={scope} className="font-mono text-foreground/85"> {scope} </code> ))} </div> </PopoverPopup> </Popover> );} type ConnectionStatusDotProps = { tooltipText?: string | null; dotClassName: string; pingClassName?: string | null;}; function ConnectionStatusDot({ tooltipText, dotClassName, pingClassName,}: ConnectionStatusDotProps) { const dotContent = ( <> {pingClassName ? ( <span className={cn( "absolute inline-flex h-full w-full animate-ping rounded-full", pingClassName, )} /> ) : null} <span className={cn("relative inline-flex size-2 rounded-full", dotClassName)} /> </> ); if (!tooltipText) { return ( <span className="relative flex size-3 shrink-0 items-center justify-center"> {dotContent} </span> ); } const dot = ( <button type="button" title={tooltipText} aria-label={tooltipText} className="relative flex size-3 shrink-0 cursor-help items-center justify-center rounded-full outline-hidden" > {dotContent} </button> ); return ( <Tooltip> <TooltipTrigger render={dot} /> <TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight"> {tooltipText} </TooltipPopup> </Tooltip> );} function formatDesktopSshTarget(target: DesktopSshEnvironmentTarget): string { const authority = target.username ? `${target.username}@${target.hostname}` : target.hostname; return target.port ? `${authority}:${target.port}` : authority;} function parseManualDesktopSshTarget(input: { readonly host: string; readonly username: string; readonly port: string;}): DesktopSshEnvironmentTarget { const rawHost = input.host.trim(); if (rawHost.length === 0) { throw new Error("SSH host or alias is required."); } let hostname = rawHost; let username = input.username.trim() || null; let port: number | null = null; const atIndex = hostname.lastIndexOf("@"); if (atIndex > 0) { const inlineUsername = hostname.slice(0, atIndex).trim(); hostname = hostname.slice(atIndex + 1).trim(); if (!username && inlineUsername.length > 0) { username = inlineUsername; } } const bracketedHostMatch = /^\[([^\]]+)\](?::(\d+))?$/u.exec(hostname); if (bracketedHostMatch) { hostname = bracketedHostMatch[1]!.trim(); if (bracketedHostMatch[2]) { port = Number.parseInt(bracketedHostMatch[2], 10); } } else { const colonSegments = hostname.split(":"); if (colonSegments.length === 2 && /^\d+$/u.test(colonSegments[1] ?? "")) { hostname = colonSegments[0]!.trim(); port = Number.parseInt(colonSegments[1]!, 10); } } const rawPort = input.port.trim(); if (rawPort.length > 0) { port = Number.parseInt(rawPort, 10); } if (hostname.length === 0) { throw new Error("SSH host or alias is required."); } if (port !== null && (!Number.isInteger(port) || port <= 0 || port > 65_535)) { throw new Error("SSH port must be between 1 and 65535."); } return { alias: hostname, hostname, username, port, };} function parsePairingUrlFields( input: string,): { readonly host: string; readonly pairingCode: string } | null { const trimmed = input.trim(); if (!trimmed) return null; try { const urlLikeInput = /^[a-zA-Z][a-zA-Z\d+.-]*:\/\//u.test(trimmed) || trimmed.startsWith("//") ? trimmed : `https://${trimmed}`; const url = new URL(urlLikeInput, window.location.origin); const hostedPairingRequest = readHostedPairingRequest(url); if (hostedPairingRequest) { return { host: hostedPairingRequest.host, pairingCode: hostedPairingRequest.token, }; } const pairingCode = getPairingTokenFromUrl(url); if (!pairingCode) return null; return { host: url.origin, pairingCode, }; } catch { return null; }} function parseRemotePairingFields(input: { readonly host: string; readonly pairingCode: string }): { readonly host: string; readonly pairingCode: string;} { const parsedPairingUrl = parsePairingUrlFields(input.host); if (parsedPairingUrl) return parsedPairingUrl; const host = input.host.trim(); const pairingCode = input.pairingCode.trim(); if (!host) { throw new Error("Enter a backend host."); } if (!pairingCode) { throw new Error("Enter a pairing code."); } return { host, pairingCode };} function formatDesktopSshConnectionError(error: unknown): string { const fallback = "Failed to connect SSH host."; const rawMessage = error instanceof Error ? error.message : fallback; const withoutIpcPrefix = rawMessage.replace( /^Error invoking remote method 'desktop:ensure-ssh-environment':\s*/u, "", ); const withoutTaggedErrorPrefix = withoutIpcPrefix.replace(/^Ssh[A-Za-z]+Error:\s*/u, ""); return withoutTaggedErrorPrefix.trim() || fallback;} /** Direct row in the card – same pattern as the Provider / ACP-agent list rows. */const ITEM_ROW_CLASSNAME = "border-t border-border/60 px-4 py-4 first:border-t-0 sm:px-5";const ENDPOINT_ROW_CLASSNAME = "border-t border-border/60 px-4 py-2.5 first:border-t-0 sm:px-5"; const ITEM_ROW_INNER_CLASSNAME = "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"; type AccessSectionPresentation = "current" | "endpoint-rail"; function accessRowClassName(_presentation: AccessSectionPresentation) { return ITEM_ROW_CLASSNAME;} function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) { if (presentation === "endpoint-rail") { return cn( "relative border-t border-border/60 px-4 py-3 first:border-t-0 sm:px-5", !isAvailable && "bg-muted/20", ); } return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24");} function sortDesktopPairingLinks(links: ReadonlyArray<ServerPairingLinkRecord>) { return [...links].toSorted( (left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(), );} function sortDesktopClientSessions(sessions: ReadonlyArray<ServerClientSessionRecord>) { return [...sessions].toSorted((left, right) => { if (left.current !== right.current) { return left.current ? -1 : 1; } if (left.connected !== right.connected) { return left.connected ? -1 : 1; } return new Date(right.issuedAt).getTime() - new Date(left.issuedAt).getTime(); });} function toDesktopPairingLinkRecord(pairingLink: AuthPairingLink): ServerPairingLinkRecord { return { ...pairingLink, createdAt: DateTime.formatIso(pairingLink.createdAt), expiresAt: DateTime.formatIso(pairingLink.expiresAt), };} function toDesktopClientSessionRecord(clientSession: AuthClientSession): ServerClientSessionRecord { return { ...clientSession, issuedAt: DateTime.formatIso(clientSession.issuedAt), expiresAt: DateTime.formatIso(clientSession.expiresAt), lastConnectedAt: clientSession.lastConnectedAt === null ? null : DateTime.formatIso(clientSession.lastConnectedAt), };} function selectPairingEndpoint( endpoints: ReadonlyArray<AdvertisedEndpoint>, defaultEndpointKey?: string | null,): AdvertisedEndpoint | null { const availableEndpoints = endpoints.filter((endpoint) => endpoint.status !== "unavailable"); if (defaultEndpointKey) { const selectedEndpoint = availableEndpoints.find( (endpoint) => endpointDefaultPreferenceKey(endpoint) === defaultEndpointKey, ); if (selectedEndpoint) { return selectedEndpoint;Lines 1–500 of 3123. Load more
import { ChevronDownIcon, ChevronsLeftRightEllipsisIcon, PlusIcon, QrCodeIcon, RefreshCwIcon, TerminalIcon, TriangleAlertIcon, } from "lucide-react"; import { useAuth } from "@clerk/react"; import { type ReactNode, memo, useCallback, useEffect, useMemo, useState } from "react"; import { AuthAccessReadScope, AuthAccessWriteScope, AuthAdministrativeScopes, AuthOrchestrationOperateScope, AuthOrchestrationReadScope, AuthRelayReadScope, AuthRelayWriteScope, AuthReviewWriteScope, AuthStandardClientScopes, AuthTerminalOperateScope, type AuthClientSession, type AuthEnvironmentScope, type AuthPairingLink, type AdvertisedEndpoint, type DesktopDiscoveredSshHost, type DesktopSshEnvironmentTarget, type DesktopServerExposureState, type EnvironmentId, } from "@t3tools/contracts"; import { connectionStatusText, RelayConnectionRegistration, RelayConnectionTarget, } from "@t3tools/client-runtime/connection"; import { findErrorTraceId } from "@t3tools/client-runtime/errors"; import { isAtomCommandInterrupted, settlePromise, squashAtomCommandFailure, } from "@t3tools/client-runtime/state/runtime"; import type { RelayClientEnvironmentRecord } from "@t3tools/contracts/relay"; import * as DateTime from "effect/DateTime"; import * as Option from "effect/Option"; import { useCopyToClipboard } from "../../hooks/useCopyToClipboard"; import { cn } from "../../lib/utils"; import { formatElapsedDurationLabel, formatExpiresInLabel } from "../../timestampFormat"; import { resolveDesktopPairingUrl, resolveHostedPairingUrl } from "./pairingUrls"; import { resolveRelayClerkTokenOptions } from "../../cloud/publicConfig"; import { SettingsPageContainer, SettingsRow, SettingsSection, useRelativeTimeTick, } from "./settingsLayout"; import { Input } from "../ui/input"; import { Checkbox } from "../ui/checkbox"; import { Dialog, DialogClose, DialogFooter, DialogDescription, DialogHeader, DialogPanel, DialogPopup, DialogTitle, DialogTrigger, } from "../ui/dialog"; import { ScrollArea } from "../ui/scroll-area"; import { AlertDialog, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, } from "../ui/alert-dialog"; import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover"; import { QRCodeSvg } from "../ui/qr-code"; import { Skeleton } from "../ui/skeleton"; import { Spinner } from "../ui/spinner"; import { Switch } from "../ui/switch"; import { stackedThreadToast, toastManager } from "../ui/toast"; import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; import { Button } from "../ui/button"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty"; import { Group, GroupSeparator } from "../ui/group"; import { AnimatedHeight } from "../AnimatedHeight"; import { Menu, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, } from "../ui/menu"; import { Textarea } from "../ui/textarea"; import { getPairingTokenFromUrl, setPairingTokenOnUrl } from "../../pairingUrl"; import { readHostedPairingRequest } from "../../hostedPairing"; import { createServerPairingCredential, revokeOtherServerClientSessions, revokeServerClientSession, revokeServerPairingLink, isLoopbackHostname, usePrimarySessionState, type ServerClientSessionRecord, type ServerPairingLinkRecord, } from "~/environments/primary"; import { useUiStateStore } from "~/uiStateStore"; import { resolveServerConfigVersionMismatch } from "~/versionSkew"; import { usePrimaryCloudLinkState } from "~/cloud/primaryCloudLinkState"; import { hasCloudPublicConfig } from "~/cloud/publicConfig"; import { linkPrimaryEnvironment as linkPrimaryEnvironmentAtom, unlinkPrimaryEnvironment as unlinkPrimaryEnvironmentAtom, } from "~/cloud/linkEnvironmentAtoms"; import { authEnvironment } from "~/state/auth"; import { environmentCatalog } from "~/connection/catalog"; import { connectPairing as connectPairingAtom, connectSshEnvironment as connectSshEnvironmentAtom, } from "~/connection/onboarding"; import { useEnvironmentQuery } from "~/state/query"; import { desktopNetworkAccessStateAtom, refreshDesktopNetworkAccessState, } from "~/state/desktopNetworkAccess"; import { desktopSshHostsStateAtom } from "~/state/desktopSshHosts"; import { type EnvironmentPresentation, useEnvironments, usePrimaryEnvironment, useRelayEnvironmentDiscovery, } from "~/state/environments"; import { relayEnvironmentDiscovery } from "~/state/relay"; import { useAtomCommand } from "../../state/use-atom-command"; const DEFAULT_TAILSCALE_SERVE_PORT = 443; const EMPTY_ADVERTISED_ENDPOINTS: ReadonlyArray<AdvertisedEndpoint> = []; const EMPTY_DISCOVERED_SSH_HOSTS: ReadonlyArray<DesktopDiscoveredSshHost> = []; const accessTimestampFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short", }); function formatAccessTimestamp(value: string): string { const parsed = new Date(value); if (Number.isNaN(parsed.getTime())) { return value; } return accessTimestampFormatter.format(parsed); } const PAIRING_SCOPE_OPTIONS: ReadonlyArray<{ readonly scope: AuthEnvironmentScope; readonly title: string; readonly description: string; }> = [ { scope: AuthOrchestrationReadScope, title: "View environment", description: "Read threads, status, diffs, and configuration.", }, { scope: AuthOrchestrationOperateScope, title: "Operate tasks", description: "Start tasks and perform changes in the environment.", }, { scope: AuthTerminalOperateScope, title: "Use terminals", description: "Create terminals and send input to running shells.", }, { scope: AuthReviewWriteScope, title: "Write reviews", description: "Create comments while reviewing changes.", }, { scope: AuthAccessReadScope, title: "View access", description: "Inspect pairing links and authorized clients.", }, { scope: AuthAccessWriteScope, title: "Manage access", description: "Issue and revoke credentials for other clients.", }, { scope: AuthRelayReadScope, title: "View relay", description: "Inspect managed relay connectivity.", }, { scope: AuthRelayWriteScope, title: "Manage relay", description: "Change managed tunnel connectivity.", }, ]; function AccessScopeSummary({ scopes, label, }: { readonly scopes: ReadonlyArray<AuthEnvironmentScope>; readonly label: string; }) { const scopeCountLabel = `${scopes.length} ${scopes.length === 1 ? "scope" : "scopes"}`; return ( <Popover> <PopoverTrigger openOnHover delay={250} closeDelay={100} render={ <button type="button" aria-label={`${label}: show ${scopeCountLabel}`} className="cursor-help underline decoration-border underline-offset-2 outline-hidden hover:text-foreground focus-visible:text-foreground" /> } > {scopeCountLabel} </PopoverTrigger> <PopoverPopup side="top" align="start" tooltipStyle className="w-max max-w-80 whitespace-normal" > <p className="mb-1 font-medium">Granted scopes</p> <div className="flex flex-col gap-0.5"> {scopes.map((scope) => ( <code key={scope} className="font-mono text-foreground/85"> {scope} </code> ))} </div> </PopoverPopup> </Popover> ); } type ConnectionStatusDotProps = { tooltipText?: string | null; dotClassName: string; pingClassName?: string | null; }; function ConnectionStatusDot({ tooltipText, dotClassName, pingClassName, }: ConnectionStatusDotProps) { const dotContent = ( <> {pingClassName ? ( <span className={cn( "absolute inline-flex h-full w-full animate-ping rounded-full", pingClassName, )} /> ) : null} <span className={cn("relative inline-flex size-2 rounded-full", dotClassName)} /> </> ); if (!tooltipText) { return ( <span className="relative flex size-3 shrink-0 items-center justify-center"> {dotContent} </span> ); } const dot = ( <button type="button" title={tooltipText} aria-label={tooltipText} className="relative flex size-3 shrink-0 cursor-help items-center justify-center rounded-full outline-hidden" > {dotContent} </button> ); return ( <Tooltip> <TooltipTrigger render={dot} /> <TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight"> {tooltipText} </TooltipPopup> </Tooltip> ); } function formatDesktopSshTarget(target: DesktopSshEnvironmentTarget): string { const authority = target.username ? `${target.username}@${target.hostname}` : target.hostname; return target.port ? `${authority}:${target.port}` : authority; } function parseManualDesktopSshTarget(input: { readonly host: string; readonly username: string; readonly port: string; }): DesktopSshEnvironmentTarget { const rawHost = input.host.trim(); if (rawHost.length === 0) { throw new Error("SSH host or alias is required."); } let hostname = rawHost; let username = input.username.trim() || null; let port: number | null = null; const atIndex = hostname.lastIndexOf("@"); if (atIndex > 0) { const inlineUsername = hostname.slice(0, atIndex).trim(); hostname = hostname.slice(atIndex + 1).trim(); if (!username && inlineUsername.length > 0) { username = inlineUsername; } } const bracketedHostMatch = /^\[([^\]]+)\](?::(\d+))?$/u.exec(hostname); if (bracketedHostMatch) { hostname = bracketedHostMatch[1]!.trim(); if (bracketedHostMatch[2]) { port = Number.parseInt(bracketedHostMatch[2], 10); } } else { const colonSegments = hostname.split(":"); if (colonSegments.length === 2 && /^\d+$/u.test(colonSegments[1] ?? "")) { hostname = colonSegments[0]!.trim(); port = Number.parseInt(colonSegments[1]!, 10); } } const rawPort = input.port.trim(); if (rawPort.length > 0) { port = Number.parseInt(rawPort, 10); } if (hostname.length === 0) { throw new Error("SSH host or alias is required."); } if (port !== null && (!Number.isInteger(port) || port <= 0 || port > 65_535)) { throw new Error("SSH port must be between 1 and 65535."); } return { alias: hostname, hostname, username, port, }; } function parsePairingUrlFields( input: string, ): { readonly host: string; readonly pairingCode: string } | null { const trimmed = input.trim(); if (!trimmed) return null; try { const urlLikeInput = /^[a-zA-Z][a-zA-Z\d+.-]*:\/\//u.test(trimmed) || trimmed.startsWith("//") ? trimmed : `https://${trimmed}`; const url = new URL(urlLikeInput, window.location.origin); const hostedPairingRequest = readHostedPairingRequest(url); if (hostedPairingRequest) { return { host: hostedPairingRequest.host, pairingCode: hostedPairingRequest.token, }; } const pairingCode = getPairingTokenFromUrl(url); if (!pairingCode) return null; return { host: url.origin, pairingCode, }; } catch { return null; } } function parseRemotePairingFields(input: { readonly host: string; readonly pairingCode: string }): { readonly host: string; readonly pairingCode: string; } { const parsedPairingUrl = parsePairingUrlFields(input.host); if (parsedPairingUrl) return parsedPairingUrl; const host = input.host.trim(); const pairingCode = input.pairingCode.trim(); if (!host) { throw new Error("Enter a backend host."); } if (!pairingCode) { throw new Error("Enter a pairing code."); } return { host, pairingCode }; } function formatDesktopSshConnectionError(error: unknown): string { const fallback = "Failed to connect SSH host."; const rawMessage = error instanceof Error ? error.message : fallback; const withoutIpcPrefix = rawMessage.replace( /^Error invoking remote method 'desktop:ensure-ssh-environment':\s*/u, "", ); const withoutTaggedErrorPrefix = withoutIpcPrefix.replace(/^Ssh[A-Za-z]+Error:\s*/u, ""); return withoutTaggedErrorPrefix.trim() || fallback; } /** Direct row in the card – same pattern as the Provider / ACP-agent list rows. */ const ITEM_ROW_CLASSNAME = "border-t border-border/60 px-4 py-4 first:border-t-0 sm:px-5"; const ENDPOINT_ROW_CLASSNAME = "border-t border-border/60 px-4 py-2.5 first:border-t-0 sm:px-5"; const ITEM_ROW_INNER_CLASSNAME = "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"; type AccessSectionPresentation = "current" | "endpoint-rail"; function accessRowClassName(_presentation: AccessSectionPresentation) { return ITEM_ROW_CLASSNAME; } function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) { if (presentation === "endpoint-rail") { return cn( "relative border-t border-border/60 px-4 py-3 first:border-t-0 sm:px-5", !isAvailable && "bg-muted/20", ); } return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24"); } function sortDesktopPairingLinks(links: ReadonlyArray<ServerPairingLinkRecord>) { return [...links].toSorted( (left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(), ); } function sortDesktopClientSessions(sessions: ReadonlyArray<ServerClientSessionRecord>) { return [...sessions].toSorted((left, right) => { if (left.current !== right.current) { return left.current ? -1 : 1; } if (left.connected !== right.connected) { return left.connected ? -1 : 1; } return new Date(right.issuedAt).getTime() - new Date(left.issuedAt).getTime(); }); } function toDesktopPairingLinkRecord(pairingLink: AuthPairingLink): ServerPairingLinkRecord { return { ...pairingLink, createdAt: DateTime.formatIso(pairingLink.createdAt), expiresAt: DateTime.formatIso(pairingLink.expiresAt), }; } function toDesktopClientSessionRecord(clientSession: AuthClientSession): ServerClientSessionRecord { return { ...clientSession, issuedAt: DateTime.formatIso(clientSession.issuedAt), expiresAt: DateTime.formatIso(clientSession.expiresAt), lastConnectedAt: clientSession.lastConnectedAt === null ? null : DateTime.formatIso(clientSession.lastConnectedAt), }; } function selectPairingEndpoint( endpoints: ReadonlyArray<AdvertisedEndpoint>, defaultEndpointKey?: string | null, ): AdvertisedEndpoint | null { const availableEndpoints = endpoints.filter((endpoint) => endpoint.status !== "unavailable"); if (defaultEndpointKey) { const selectedEndpoint = availableEndpoints.find( (endpoint) => endpointDefaultPreferenceKey(endpoint) === defaultEndpointKey, ); if (selectedEndpoint) { return selectedEndpoint;