From b1f19d8f24ec9a434580df47e7f2f5348113ebbe Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Tue, 20 Oct 2026 23:47:09 -0700 Subject: [PATCH] refactor(web): authorized clients and endpoint rows live in their own file Co-Authored-By: Claude Opus 5.5 --- .../settings/AuthorizedClientsSettings.tsx | 992 ++++++++++++++++++ .../settings/ConnectionsSettings.tsx | 971 +---------------- vite.config.ts | 1 + 3 files changed, 1002 insertions(+), 962 deletions(-) create mode 100644 apps/web/src/components/settings/AuthorizedClientsSettings.tsx diff --git a/apps/web/src/components/settings/AuthorizedClientsSettings.tsx b/apps/web/src/components/settings/AuthorizedClientsSettings.tsx new file mode 100644 index 000000000000..9b63e35b2c95 --- /dev/null +++ b/apps/web/src/components/settings/AuthorizedClientsSettings.tsx @@ -0,0 +1,992 @@ +import { AUTH_SCOPE_OPTIONS as PAIRING_SCOPE_OPTIONS } from "@t3tools/shared/authScopeOptions"; +import { PlusIcon, QrCodeIcon } from "lucide-react"; +import { type ReactNode, memo, useId, useState } from "react"; +import { + AuthAccessWriteScope, + AuthDiagnosticsReadScope, + AuthOrchestrationReadScope, + AuthFilesystemReadScope, + AuthStandardClientScopes, + AuthTerminalReadScope, + type AuthEnvironmentScope, + type AuthGrantScope, + type AuthPairingCredentialResult, + type AdvertisedEndpoint, +} from "@t3tools/contracts"; +import { settlePromise } from "@t3tools/client-runtime/state/runtime"; +import * as Cause from "effect/Cause"; + +import { useCopyToClipboard } from "../../hooks/useCopyToClipboard"; +import { cn } from "../../lib/utils"; +import { formatElapsedDurationLabel, formatExpiresInLabel } from "../../timestampFormat"; +import { resolveDesktopPairingUrl, resolveHostedPairingUrl } from "./pairingUrls"; +import { + canRevokeOtherClients, + isQrShareableEndpoint, + selectQrEndpointOption, + togglePairingScopeSelection, +} from "./ConnectionsSettings.logic"; +import { useRelativeTimeTick } from "./settingsLayout"; +import { Input } from "../ui/input"; +import { Checkbox } from "../ui/checkbox"; +import { + Dialog, + DialogFooter, + DialogDescription, + DialogHeader, + DialogPanel, + DialogPopup, + DialogTitle, + DialogTrigger, +} from "../ui/dialog"; +import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover"; +import { QRCodeSvg } from "../ui/qr-code"; +import { stackedThreadToast, toastManager } from "../ui/toast"; +import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +import { Button } from "../ui/button"; +import { Textarea } from "../ui/textarea"; +import { + createServerPairingCredential, + isLoopbackHostname, + type ServerClientSessionRecord, + type ServerPairingLinkRecord, +} from "~/environments/primary"; +import { readEnvironmentScope } from "~/state/session"; +import { usePrimaryEnvironmentId } from "~/state/environments"; +import { ConnectionStatusDot } from "../ConnectionStatusDot"; +import { ITEM_ROW_CLASSNAME, ITEM_ROW_INNER_CLASSNAME } from "./itemRows"; +import { + formatAccessTimestamp, + selectPairingEndpoint, + isTailscaleHttpsEndpoint, + endpointDefaultPreferenceKey, + resolveAdvertisedEndpointPairingUrl, + resolveCurrentOriginPairingUrl, + isHostedAppPairingUrl, + endpointShareHint, +} from "./ConnectionsSettings.logic"; + +function AccessScopeSummary({ + scopes, + label, +}: { + readonly scopes: ReadonlyArray; + readonly label: string; +}) { + const scopeCountLabel = `${scopes.length} ${scopes.length === 1 ? "scope" : "scopes"}`; + + return ( + + + } + > + {scopeCountLabel} + + +

Granted scopes

+
+ {scopes.map((scope) => ( + + {scope} + + ))} +
+ + + ); +} + +const ENDPOINT_ROW_CLASSNAME = "first:rounded-t-xl last:rounded-b-xl px-3 py-2.5 sm:px-4"; + +export type AccessSectionPresentation = "current" | "endpoint-rail"; + +export function accessRowClassName(_presentation: AccessSectionPresentation) { + return ITEM_ROW_CLASSNAME; +} + +function endpointRowClassName(presentation: AccessSectionPresentation, isAvailable: boolean) { + if (presentation === "endpoint-rail") { + return cn( + "relative first:rounded-t-xl last:rounded-b-xl px-3 py-3 sm:px-4", + !isAvailable && "bg-muted/15", + ); + } + + return cn(ENDPOINT_ROW_CLASSNAME, !isAvailable && "bg-muted/24"); +} + +type PairingLinkListRowProps = { + pairingLink: ServerPairingLinkRecord; + credential: string | undefined; + endpointUrl: string | null | undefined; + endpoints: ReadonlyArray; + defaultEndpointKey: string | null; + presentation?: AccessSectionPresentation; + revokingPairingLinkId: string | null; + onRevoke: (id: string) => void; + canRevoke: boolean; +}; + +const PairingLinkListRow = memo(function PairingLinkListRow({ + pairingLink, + credential, + endpointUrl, + endpoints, + defaultEndpointKey, + presentation = "current", + revokingPairingLinkId, + onRevoke, + canRevoke, +}: PairingLinkListRowProps) { + const nowMs = useRelativeTimeTick(1_000); + const expiresAtMs = new Date(pairingLink.expiresAt).getTime(); + const [isRevealDialogOpen, setIsRevealDialogOpen] = useState(false); + const [isQrPanelOpen, setIsQrPanelOpen] = useState(false); + const [qrEndpointId, setQrEndpointId] = useState(null); + const qrPanelId = useId(); + + const currentOriginPairingUrl = credential ? resolveCurrentOriginPairingUrl(credential) : null; + const hostedPairingUrl = + credential && endpointUrl != null && endpointUrl !== "" + ? resolveHostedPairingUrl(endpointUrl, credential) + : null; + const endpointPairingUrl = (() => { + const endpoint = selectPairingEndpoint(endpoints, defaultEndpointKey); + return endpoint && credential + ? resolveAdvertisedEndpointPairingUrl(endpoint, credential) + : null; + })(); + const endpointCopyOptions = (() => { + const options: Array<{ + readonly id: string; + readonly preferenceKey: string; + readonly label: string; + readonly url: string; + readonly detail: string; + readonly qrShareable: boolean; + }> = []; + if (!credential) return options; + for (const endpoint of endpoints) { + if (endpoint.status === "unavailable") { + continue; + } + const url = resolveAdvertisedEndpointPairingUrl(endpoint, credential); + options.push({ + id: endpoint.id, + preferenceKey: endpointDefaultPreferenceKey(endpoint), + label: endpoint.label, + url, + detail: endpointShareHint(endpoint, url), + qrShareable: isQrShareableEndpoint(endpoint), + }); + } + return options; + })(); + const shareablePairingUrl = + endpointPairingUrl ?? + (credential && endpointUrl != null && endpointUrl !== "" + ? (hostedPairingUrl ?? resolveDesktopPairingUrl(endpointUrl, credential)) + : isLoopbackHostname(window.location.hostname) + ? null + : currentOriginPairingUrl); + const [failedCopyValue, setFailedCopyValue] = useState(null); + const revealValue = failedCopyValue ?? shareablePairingUrl ?? credential ?? ""; + const isRevealValueUrl = revealValue !== credential; + const isRevealValueHostedAppPairingUrl = isRevealValueUrl && isHostedAppPairingUrl(revealValue); + const isRevealValueQrShareable = + endpointCopyOptions.find((option) => option.url === revealValue)?.qrShareable ?? true; + const canCopyToClipboard = + typeof window !== "undefined" && + window.isSecureContext && + navigator.clipboard?.writeText != null; + + const { copyToClipboard } = useCopyToClipboard<{ + value: string; + kind: "code" | "hosted-link" | "link"; + }>({ + onCopy: ({ kind }) => { + toastManager.add({ + type: "success", + title: + kind === "hosted-link" + ? "Hosted app link copied" + : kind === "link" + ? "Pairing URL copied" + : "Pairing code copied", + description: + kind === "hosted-link" + ? "Open it in the browser on the device you want to connect." + : kind === "link" + ? "Open it in the client you want to pair to this environment." + : "Paste it into another client to finish pairing.", + }); + }, + onError: (error, { value, kind }) => { + // Captured per attempt so concurrent copies cannot make the dialog + // reveal a different value than the one that failed. + setFailedCopyValue(value); + setIsRevealDialogOpen(true); + toastManager.add( + stackedThreadToast({ + type: "error", + title: canCopyToClipboard + ? kind === "hosted-link" + ? "Could not copy hosted app link" + : kind === "link" + ? "Could not copy pairing URL" + : "Could not copy pairing code" + : "Clipboard copy unavailable", + description: canCopyToClipboard ? error.message : "Showing the full value instead.", + }), + ); + }, + }); + + const copyPairingValue = (value: string, kind: "code" | "hosted-link" | "link") => { + copyToClipboard(value, { value, kind }); + }; + + const copyKindForUrl = (url: string): "hosted-link" | "link" => + isHostedAppPairingUrl(url) ? "hosted-link" : "link"; + + const handleCopyCode = () => { + if (credential) copyPairingValue(credential, "code"); + }; + + const expiresAbsolute = formatAccessTimestamp(pairingLink.expiresAt); + + const primaryLabel = pairingLink.label ?? "Pairing link"; + const selectedQrOption = selectQrEndpointOption( + endpointCopyOptions, + qrEndpointId, + defaultEndpointKey, + ); + const qrPairingUrl = selectedQrOption?.url ?? shareablePairingUrl; + const canRenderQrForSelection = selectedQrOption?.qrShareable ?? true; + if (expiresAtMs <= nowMs) { + return null; + } + + return ( +
+
+
+
+ +

{primaryLabel}

+
+

+ + }> + {formatExpiresInLabel(pairingLink.expiresAt, nowMs)} + + {expiresAbsolute} + + · + +

+ {!credential ? ( +

+ Create a new link to share from this client. +

+ ) : shareablePairingUrl === null ? ( +

+ Copy the token and pair from another client using this backend's reachable host. +

+ ) : null} +
+
+ {shareablePairingUrl && canCopyToClipboard ? ( + + ) : null} + { + setIsRevealDialogOpen(open); + if (!open) setFailedCopyValue(null); + }} + > + {!credential ? null : canCopyToClipboard ? ( + shareablePairingUrl ? null : ( + + ) + ) : ( + }> + {shareablePairingUrl ? "Show link" : "Show code"} + + )} + + + + {isRevealValueUrl + ? isRevealValueHostedAppPairingUrl + ? "Hosted app pairing link" + : "Pairing link" + : "Pairing code"} + + + {isRevealValueUrl + ? isRevealValueHostedAppPairingUrl + ? "Clipboard copy is unavailable here. Open or manually copy this hosted app link on the device you want to connect." + : "Clipboard copy is unavailable here. Open or manually copy this full pairing URL on the device you want to connect." + : "Clipboard copy is unavailable here. Manually copy this code into another client."} + + + +