# Files changed · PR \#22685 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22685/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [refactor\(web\): saved and T3 Connect environment rows live in their own file](https://git.cafe/pingdotgg/t3code/pull/22685.md) Version: 11 Head commit: e081122a3a17ff3800e3d58e3bffacfd352289a3 Base commit: b1f19d8f24ec9a434580df47e7f2f5348113ebbe Comparison base: b1f19d8f24ec9a434580df47e7f2f5348113ebbe Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/settings/ConnectionsSettings.tsx Status: modified; +8; −679 ```diff @@ -4,19 +4,11 @@ ChevronsLeftRightEllipsisIcon, EllipsisIcon, PlusIcon, - RouteIcon, TerminalIcon, } from "lucide-react"; import { useAtomValue } from "@effect/atom-react"; +import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react"; import { - type KeyboardEvent, - type ReactNode, - useEffect, - useEffectEvent, - useRef, - useState, -} from "react"; -import { AuthAccessReadScope, AuthAccessWriteScope, AuthEnvironmentMaintainScope, @@ -31,17 +23,11 @@ type DesktopServerExposureState, type DesktopWslState, type EnvironmentId, - connectReachabilityHelpUrl, - formatConnectReachable, resolveEnvironmentMachineKind, } from "@t3tools/contracts"; import { RelayConnectionRegistration, RelayConnectionTarget, - connectionRoutes, - hasSavedBearerRoute, - connectionStatusText, - environmentMcpUrl, } from "@t3tools/client-runtime/connection"; import { isAtomCommandInterrupted, @@ -51,7 +37,6 @@ import * as Cause from "effect/Cause"; import * as Option from "effect/Option"; -import { useCopyToClipboard } from "../../hooks/useCopyToClipboard"; import { cn } from "../../lib/utils"; import { isLocalEnvironmentDisabled } from "../../localEnvironment"; import { @@ -64,18 +49,7 @@ import { LocalEnvironmentSetting } from "./LocalEnvironmentSetting"; import { searchableSetting } from "./settingsSearch"; import { EnvironmentIconMenu } from "./EnvironmentIconPicker"; -import { EnvironmentRoutesList } from "./EnvironmentRoutesList"; +import { formatDesktopSshTarget } from "./EnvironmentRow"; -import { - ConnectionDiagnosisPanel, - ConnectionDiagnosisSummary, - useConnectionDiagnosis, -} from "./ConnectionDiagnosisDetails"; -import { usePreparedConnection } from "~/state/session"; -import { - EnvironmentRow, - environmentTransportLabel, - formatDesktopSshTarget, -} from "./EnvironmentRow"; import { FoldedSettingsSection } from "./FoldedSettingsSection"; import { LoadBalancingSettings } from "./LoadBalancingSettings"; import { GitHubRoutingSettings } from "./GitHubRoutingSettings"; @@ -112,13 +86,12 @@ } from "../ui/alert-dialog"; import { Spinner } from "../ui/spinner"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select"; +import { Menu, MenuPopup, MenuTrigger } from "../ui/menu"; -import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "../ui/menu"; 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 { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty"; import { AnimatedHeight } from "../AnimatedHeight"; import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon"; import { @@ -138,7 +111,6 @@ } from "~/versionSkew"; import { hasCloudPublicConfig } from "~/cloud/publicConfig"; import { RemoveT3ConnectEnvironmentDialog } from "../clerk/RemoveT3ConnectEnvironmentDialog"; -import { useCloudLinkController } from "~/cloud/useCloudLinkController"; import { authEnvironment } from "~/state/auth"; import { environmentCatalog } from "~/connection/catalog"; import { @@ -159,9 +131,7 @@ useEnvironments, usePrimaryEnvironment, useRelayEnvironmentDiscovery, - usePrimaryEnvironmentId, } from "~/state/environments"; -import { APP_VERSION } from "~/branding"; import { requestConfirmDialog } from "~/confirmDialog"; import { useAtomCommand } from "../../state/use-atom-command"; import { environmentIdsKey } from "~/state/environmentAtomList"; @@ -171,13 +141,11 @@ serverEnvironment, } from "~/state/server"; import { - OutdatedServerUpdateAction, ServerUpdateAction, ServerUpdateProgress, ServerUpdatesAction, type ServerUpdateTarget, } from "../ServerUpdateAction"; -import { CloudEnvironmentConnectRows } from "../cloud/CloudEnvironmentConnectList"; import { resolveShortcutCommand, shortcutLabelForCommand, @@ -206,6 +174,11 @@ NetworkAccessDescription, PairingClientsList, } from "./AuthorizedClientsSettings"; +import { + CloudLinkRow, + CloudRemoteEnvironmentRows, + SavedBackendListRow, +} from "./SavedEnvironmentRows"; const DEFAULT_TAILSCALE_SERVE_PORT = 443; const EMPTY_ADVERTISED_ENDPOINTS: ReadonlyArray = []; @@ -217,650 +190,6 @@ const BACKEND_VALUE_DEFAULT_WSL = "backend:default-wsl"; const BACKEND_VALUE_WSL_OFF = "backend:wsl-off"; -type SavedBackendListRowProps = { - environment: EnvironmentPresentation; - removingEnvironmentId: EnvironmentId | null; - onSetEnabled: (environmentId: EnvironmentId, enabled: boolean) => void; - onRemove: (environment: EnvironmentPresentation) => void; - onAddRoute: (environment: EnvironmentPresentation) => void; -}; - -function savedBackendStatus(environment: EnvironmentPresentation): { - readonly text: string; - readonly tone: "muted" | "error"; -} { - if (!environment.entry.enabled && environment.connection.phase !== "unsupported") - return { text: "Off", tone: "muted" }; - const { connection } = environment; - switch (connection.phase) { - case "connected": - return { text: "Connected", tone: "muted" }; - case "connecting": - return { text: "Connecting", tone: "muted" }; - case "reconnecting": - return { - text: connection.error ? `Reconnecting: ${connection.error}` : "Reconnecting", - tone: "error", - }; - case "unsupported": - return { text: "Client not supported", tone: "muted" }; - case "error": - return { - text: connection.error ? `Connection failed: ${connection.error}` : "Connection failed", - tone: "error", - }; - case "offline": - return { text: "Offline", tone: "muted" }; - case "available": - return { text: "Not connected", tone: "muted" }; - } -} - -function SavedBackendListRow({ - environment, - removingEnvironmentId, - onSetEnabled, - onRemove, - onAddRoute, -}: SavedBackendListRowProps) { - const [routesOpen, setRoutesOpen] = useState(false); - const [permissionsOpen, setPermissionsOpen] = useState(false); - const [diagnosisOpen, setDiagnosisOpen] = useState(false); - const environmentId = environment.environmentId; - const unsupported = environment.connection.phase === "unsupported"; - const blocked = unsupported && !hasSavedBearerRoute(environment.entry); - const enabled = environment.entry.enabled && !unsupported; - const isConnected = environment.connection.phase === "connected"; - const isRemoving = removingEnvironmentId === environmentId; - const errorTraceId = environment.connection.traceId; - const { copyToClipboard: copyTraceIdToClipboard } = useCopyToClipboard<{ traceId: string }>({ - target: "trace ID", - onCopy: ({ traceId }) => { - toastManager.add({ - type: "success", - title: "Trace ID copied", - description: traceId, - }); - }, - onError: (error) => { - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Could not copy trace ID", - description: error.message, - }), - ); - }, - }); - const copyTraceId = (traceId: string) => { - copyTraceIdToClipboard(traceId, { traceId }); - }; - const { copyToClipboard: copyMcpUrl } = useCopyToClipboard<{ url: string }>({ - target: "MCP URL", - onCopy: ({ url }) => { - toastManager.add({ - type: "success", - title: "MCP URL copied", - description: `Add it to an agent, e.g. claude mcp add --transport http t3 ${url}`, - }); - }, - onError: (error) => { - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Could not copy MCP URL", - description: error.message, - }), - ); - }, - }); - const versionMismatch = resolveServerConfigVersionMismatch(environment.serverConfig); - const serverUpdateState = useAtomValue(serverEnvironment.updateStateAtom(environmentId)); - const resumingServerUpdate = - serverUpdateState.status === "running" && serverUpdateState.stage === "resuming"; - const status = savedBackendStatus(environment); - const serverVersion = environment.serverConfig?.environment.serverVersion ?? null; - // Discovery empties its map on every refresh, so hold the last descriptor - // seen or the glyph would blink back to the generic one each time. - const relayDiscovery = useRelayEnvironmentDiscovery(); - const discoveredDescriptor = Option.getOrNull( - relayDiscovery.environments.get(environmentId)?.status ?? Option.none(), - )?.descriptor; - const [lastDescriptor, setLastDescriptor] = useState(discoveredDescriptor); - if (discoveredDescriptor !== undefined && discoveredDescriptor !== lastDescriptor) { - setLastDescriptor(discoveredDescriptor); - } - const discoveredRelayHttpBaseUrl = - relayDiscovery.environments.get(environmentId)?.environment.endpoint.httpBaseUrl; - const [lastRelayHttpBaseUrl, setLastRelayHttpBaseUrl] = useState(discoveredRelayHttpBaseUrl); - if ( - discoveredRelayHttpBaseUrl !== undefined && - discoveredRelayHttpBaseUrl !== lastRelayHttpBaseUrl - ) { - setLastRelayHttpBaseUrl(discoveredRelayHttpBaseUrl); - } - const retryNow = useAtomCommand(environmentCatalog.retryNow); - const { - diagnosis: currentDiagnosis, - state: connectionState, - relayOnly, - } = useConnectionDiagnosis(environment); - const diagnosis = resumingServerUpdate ? null : currentDiagnosis; - const prepared = usePreparedConnection(environmentId); - const connectedTarget = isConnected && prepared._tag === "Some" ? prepared.value.target : null; - const mcpUrl = environmentMcpUrl({ - entry: environment.entry, - relayHttpBaseUrl: discoveredRelayHttpBaseUrl ?? lastRelayHttpBaseUrl, - connectedTarget, - }); - const machineKind = resolveEnvironmentMachineKind( - environment.serverConfig ?? - (lastDescriptor === undefined ? null : { environment: lastDescriptor }), - ); - const routeCount = connectionRoutes(environment.entry).length; - const subtitleText = [ - environmentTransportLabel(environment, connectedTarget), - // The headline below names the failure in full. - diagnosis ? null : resumingServerUpdate ? "Restarting" : status.text, - enabled && versionMismatch ? serverVersion : null, - ] - .filter((value): value is string => value !== null) - .join(" · "); - - const showUpdateAction = - enabled && - isConnected && - versionMismatch !== null && - (serverUpdateState.status === "idle" || serverUpdateState.status === "failed"); - - const statusTooltip = `${ - unsupported - ? (environment.connection.error ?? connectionStatusText(environment.connection)) - : enabled - ? connectionStatusText(environment.connection) - : "Switched off" - }${ - versionMismatch - ? `\nUpdate available: ${versionMismatch.serverVersion} → ${versionMismatch.clientVersion}` - : "" - }`; - - return ( - - - {/* The status can change while the tooltip is open, and base-ui only - re-measures the popup when the trigger's payload changes. */} - - } - > - {subtitleText} - - - {statusTooltip} - - - - · - - - - · - - - - } - below={ - <> - {diagnosis ? ( - setDiagnosisOpen((open) => !open)} - /> - ) : null} - {serverUpdateState.status !== "idle" ? ( -
- -
- ) : null} - - } - detail={ - <> - {diagnosis && diagnosisOpen ? ( - void retryNow(environmentId)} - onAddRoute={relayOnly ? () => onAddRoute(environment) : null} - /> - ) : null} - {routesOpen && ( - onAddRoute(environment)} - /> - )} - {permissionsOpen && ( -
- -
- )} - - } - > - {unsupported && - environment.entry.serverUpdateRequired === true && - serverUpdateState.status !== "running" ? ( - - ) : null} - {showUpdateAction ? ( - - ) : null} - - onSetEnabled(environmentId, checked)} - /> - } - /> - - {blocked ? "Client not supported" : enabled ? "Switch off" : "Switch on"} - - - - - } - > - - - - - setRoutesOpen((open) => !open)}> - - {routesOpen ? "Hide routes" : "Routes"} - - {mcpUrl ? ( - copyMcpUrl(mcpUrl, { url: mcpUrl })}>Copy MCP URL - ) : null} - {errorTraceId ? ( - copyTraceId(errorTraceId)}>Copy trace ID - ) : null} - - onRemove(environment)}> - {isRemoving ? "Removing…" : "Remove from this device…"} - - - - - ); -} - -function CloudLinkSwitch({ - checked, - disabled, - disabledReason, - onCheckedChange, - ariaLabel = "Enable T3 Connect", -}: { - readonly checked: boolean; - readonly disabled: boolean; - readonly disabledReason: string | null; - readonly onCheckedChange?: (enabled: boolean) => void; - readonly ariaLabel?: string; -}) { - const control = ( - - ); - return disabledReason ? ( - - {control}} /> - {disabledReason} - - ) : ( - control - ); -} - -function ConfiguredCloudLinkRow({ canManageRelay }: { readonly canManageRelay: boolean }) { - const primaryEnvironmentId = usePrimaryEnvironmentId(); - const { - isSignedIn, - linkState: primaryCloudLinkState, - linkRevoked, - managedTunnelActive, - managedTunnelOutOfSync, - publishAgentActivity, - holdWebhooksWhileOffline, - operationError, - reconcileCloudState, - } = useCloudLinkController(); - const [isUpdating, setIsUpdating] = useState(false); - const [isUpdatingPreference, setIsUpdatingPreference] = useState(false); - - const disabledReason = !isSignedIn - ? "Sign in to T3 Connect to manage this environment." - : !canManageRelay - ? "Your session does not have permission to manage T3 Connect access." - : null; - const isBusy = isUpdating || isUpdatingPreference; - const refreshLinkState = useEffectEvent(primaryCloudLinkState.refresh); - // The server rechecks reachability when the tunnel's 30 s readiness poll changes. - // Poll while mounted, so a failed read does not stop later ones. - useEffect(() => { - const interval = window.setInterval(() => refreshLinkState(), 30_000); - return () => window.clearInterval(interval); - }, []); - const reachability = managedTunnelActive ? primaryCloudLinkState.data?.reachability : undefined; - const reachabilityStatus = - reachability?.status === "reachable" ? ( - formatConnectReachable(reachability) - ) : reachability?.status === "unreachable" ? ( - - {[reachability.reason, reachability.hint, `Fix: ${reachability.fix}`] - .filter(Boolean) - .join(" ")}{" "} - - More info - - - ) : null; - - const updateManagedTunnel = async (enabled: boolean) => { - if ( - primaryEnvironmentId === null || - !readEnvironmentScope(primaryEnvironmentId, AuthRelayWriteScope) - ) - return; - setIsUpdating(true); - const ok = await reconcileCloudState({ managedTunnel: enabled, publish: publishAgentActivity }); - if (ok) { - toastManager.add({ - type: "success", - title: enabled - ? "T3 Connect linked" - : publishAgentActivity - ? "T3 Connect tunnel disabled" - : "T3 Connect unlinked", - description: enabled - ? "This environment is available through T3 Connect." - : publishAgentActivity - ? "The managed tunnel was removed. Agent activity publishing stays on." - : "This environment is no longer available through T3 Connect.", - }); - } - setIsUpdating(false); - }; - - const updatePublishAgentActivity = async (enabled: boolean) => { - if ( - primaryEnvironmentId === null || - !readEnvironmentScope(primaryEnvironmentId, AuthRelayWriteScope) - ) - return; - setIsUpdatingPreference(true); - const ok = await reconcileCloudState({ managedTunnel: managedTunnelActive, publish: enabled }); - if (ok) { - toastManager.add({ - type: "success", - title: enabled ? "Agent activity enabled" : "Agent activity disabled", - description: enabled - ? "This environment publishes agent activity to your mobile clients." - : "This environment will stop publishing agent activity.", - }); - } - setIsUpdatingPreference(false); - }; - - const updateHoldWebhooks = async (enabled: boolean) => { - setIsUpdatingPreference(true); - const ok = await reconcileCloudState({ - managedTunnel: managedTunnelActive, - publish: publishAgentActivity, - holdWebhooksWhileOffline: enabled, - }); - if (ok) { - toastManager.add({ - type: "success", - title: enabled ? "Webhooks held while offline" : "Webhooks no longer held", - description: enabled - ? "T3 Connect keeps webhook requests for up to 24 hours while this environment is offline." - : "Requests to an offline environment now fail. Anything already held is still delivered.", - }); - } - setIsUpdatingPreference(false); - }; - - return ( - <> - {window.desktopBridge ? ( - void updateManagedTunnel(enabled)} - /> - } - /> - ) : linkRevoked ? ( - - ) : null} - void updatePublishAgentActivity(enabled)} - /> - } - /> - {managedTunnelActive ? ( - void updateHoldWebhooks(enabled)} - /> - } - /> - ) : null} - - ); -} - -function CloudLinkRow({ - canReadRelay, - canManageRelay, -}: { - readonly canReadRelay: boolean; - readonly canManageRelay: boolean; -}) { - if (!hasCloudPublicConfig()) return null; - if (!canReadRelay) { - return ( - - ); - } - return ; -} - -function EmptyRemoteEnvironments({ cloudEnabled = true }: { readonly cloudEnabled?: boolean }) { - return ( - - - - - - No saved remote environments - - {cloudEnabled - ? "Click “Add environment” to pair another environment, or connect one from T3 Connect." - : "Click “Add environment” to pair another environment."} - - - - ); -} - -function CloudRemoteEnvironmentRows({ - primaryEnvironmentId, - savedEnvironments, -}: { - readonly primaryEnvironmentId: EnvironmentId | null; - readonly savedEnvironments: ReadonlyArray; -}) { - return hasCloudPublicConfig() ? ( - } - /> - ) : savedEnvironments.length === 0 ? ( - - ) : null; -} - // Subscribes on its own so desktop download progress does not re-render the page. function LocalVersionStatusLabel() { const updateState = useDesktopUpdateState(); ``` ## apps/web/src/components/settings/SavedEnvironmentRows.tsx Status: added; +711; −0 ```diff @@ -1,0 +1,711 @@ +import { SessionPermissions } from "./SessionPermissions"; +import { + ChevronRightIcon, + ChevronsLeftRightEllipsisIcon, + EllipsisIcon, + RouteIcon, +} from "lucide-react"; +import { useAtomValue } from "@effect/atom-react"; +import { useEffect, useEffectEvent, useState } from "react"; +import { + AuthRelayWriteScope, + type EnvironmentId, + connectReachabilityHelpUrl, + formatConnectReachable, + resolveEnvironmentMachineKind, +} from "@t3tools/contracts"; +import { + connectionRoutes, + hasSavedBearerRoute, + connectionStatusText, + environmentMcpUrl, +} from "@t3tools/client-runtime/connection"; +import * as Option from "effect/Option"; + +import { useCopyToClipboard } from "../../hooks/useCopyToClipboard"; +import { cn } from "../../lib/utils"; +import { SettingsRow } from "./settingsLayout"; +import { searchableSetting } from "./settingsSearch"; +import { EnvironmentIconMenu } from "./EnvironmentIconPicker"; +import { EnvironmentRoutesList } from "./EnvironmentRoutesList"; +import { + ConnectionDiagnosisPanel, + ConnectionDiagnosisSummary, + useConnectionDiagnosis, +} from "./ConnectionDiagnosisDetails"; +import { usePreparedConnection } from "~/state/session"; +import { EnvironmentRow, environmentTransportLabel } from "./EnvironmentRow"; +import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "../ui/menu"; +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 { + resolveServerConfigVersionMismatch, + resolveServerSelfUpdateCapability, + supportsDesktopAppUpdate, + supportsServerUpdateThreadContinuation, +} from "~/versionSkew"; +import { hasCloudPublicConfig } from "~/cloud/publicConfig"; +import { useCloudLinkController } from "~/cloud/useCloudLinkController"; +import { environmentCatalog } from "~/connection/catalog"; +import { readEnvironmentScope } from "~/state/session"; +import { + type EnvironmentPresentation, + useRelayEnvironmentDiscovery, + usePrimaryEnvironmentId, +} from "~/state/environments"; +import { APP_VERSION } from "~/branding"; +import { useAtomCommand } from "../../state/use-atom-command"; +import { serverEnvironment } from "~/state/server"; +import { + OutdatedServerUpdateAction, + ServerUpdateAction, + ServerUpdateProgress, +} from "../ServerUpdateAction"; +import { CloudEnvironmentConnectRows } from "../cloud/CloudEnvironmentConnectList"; + +type SavedBackendListRowProps = { + environment: EnvironmentPresentation; + removingEnvironmentId: EnvironmentId | null; + onSetEnabled: (environmentId: EnvironmentId, enabled: boolean) => void; + onRemove: (environment: EnvironmentPresentation) => void; + onAddRoute: (environment: EnvironmentPresentation) => void; +}; + +function savedBackendStatus(environment: EnvironmentPresentation): { + readonly text: string; + readonly tone: "muted" | "error"; +} { + if (!environment.entry.enabled && environment.connection.phase !== "unsupported") + return { text: "Off", tone: "muted" }; + const { connection } = environment; + switch (connection.phase) { + case "connected": + return { text: "Connected", tone: "muted" }; + case "connecting": + return { text: "Connecting", tone: "muted" }; + case "reconnecting": + return { + text: connection.error ? `Reconnecting: ${connection.error}` : "Reconnecting", + tone: "error", + }; + case "unsupported": + return { text: "Client not supported", tone: "muted" }; + case "error": + return { + text: connection.error ? `Connection failed: ${connection.error}` : "Connection failed", + tone: "error", + }; + case "offline": + return { text: "Offline", tone: "muted" }; + case "available": + return { text: "Not connected", tone: "muted" }; + } +} + +export function SavedBackendListRow({ + environment, + removingEnvironmentId, + onSetEnabled, + onRemove, + onAddRoute, +}: SavedBackendListRowProps) { + const [routesOpen, setRoutesOpen] = useState(false); + const [permissionsOpen, setPermissionsOpen] = useState(false); + const [diagnosisOpen, setDiagnosisOpen] = useState(false); + const environmentId = environment.environmentId; + const unsupported = environment.connection.phase === "unsupported"; + const blocked = unsupported && !hasSavedBearerRoute(environment.entry); + const enabled = environment.entry.enabled && !unsupported; + const isConnected = environment.connection.phase === "connected"; + const isRemoving = removingEnvironmentId === environmentId; + const errorTraceId = environment.connection.traceId; + const { copyToClipboard: copyTraceIdToClipboard } = useCopyToClipboard<{ traceId: string }>({ + target: "trace ID", + onCopy: ({ traceId }) => { + toastManager.add({ + type: "success", + title: "Trace ID copied", + description: traceId, + }); + }, + onError: (error) => { + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Could not copy trace ID", + description: error.message, + }), + ); + }, + }); + const copyTraceId = (traceId: string) => { + copyTraceIdToClipboard(traceId, { traceId }); + }; + const { copyToClipboard: copyMcpUrl } = useCopyToClipboard<{ url: string }>({ + target: "MCP URL", + onCopy: ({ url }) => { + toastManager.add({ + type: "success", + title: "MCP URL copied", + description: `Add it to an agent, e.g. claude mcp add --transport http t3 ${url}`, + }); + }, + onError: (error) => { + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Could not copy MCP URL", + description: error.message, + }), + ); + }, + }); + const versionMismatch = resolveServerConfigVersionMismatch(environment.serverConfig); + const serverUpdateState = useAtomValue(serverEnvironment.updateStateAtom(environmentId)); + const resumingServerUpdate = + serverUpdateState.status === "running" && serverUpdateState.stage === "resuming"; + const status = savedBackendStatus(environment); + const serverVersion = environment.serverConfig?.environment.serverVersion ?? null; + // Discovery empties its map on every refresh, so hold the last descriptor + // seen or the glyph would blink back to the generic one each time. + const relayDiscovery = useRelayEnvironmentDiscovery(); + const discoveredDescriptor = Option.getOrNull( + relayDiscovery.environments.get(environmentId)?.status ?? Option.none(), + )?.descriptor; + const [lastDescriptor, setLastDescriptor] = useState(discoveredDescriptor); + if (discoveredDescriptor !== undefined && discoveredDescriptor !== lastDescriptor) { + setLastDescriptor(discoveredDescriptor); + } + const discoveredRelayHttpBaseUrl = + relayDiscovery.environments.get(environmentId)?.environment.endpoint.httpBaseUrl; + const [lastRelayHttpBaseUrl, setLastRelayHttpBaseUrl] = useState(discoveredRelayHttpBaseUrl); + if ( + discoveredRelayHttpBaseUrl !== undefined && + discoveredRelayHttpBaseUrl !== lastRelayHttpBaseUrl + ) { + setLastRelayHttpBaseUrl(discoveredRelayHttpBaseUrl); + } + const retryNow = useAtomCommand(environmentCatalog.retryNow); + const { + diagnosis: currentDiagnosis, + state: connectionState, + relayOnly, + } = useConnectionDiagnosis(environment); + const diagnosis = resumingServerUpdate ? null : currentDiagnosis; + const prepared = usePreparedConnection(environmentId); + const connectedTarget = isConnected && prepared._tag === "Some" ? prepared.value.target : null; + const mcpUrl = environmentMcpUrl({ + entry: environment.entry, + relayHttpBaseUrl: discoveredRelayHttpBaseUrl ?? lastRelayHttpBaseUrl, + connectedTarget, + }); + const machineKind = resolveEnvironmentMachineKind( + environment.serverConfig ?? + (lastDescriptor === undefined ? null : { environment: lastDescriptor }), + ); + const routeCount = connectionRoutes(environment.entry).length; + const subtitleText = [ + environmentTransportLabel(environment, connectedTarget), + // The headline below names the failure in full. + diagnosis ? null : resumingServerUpdate ? "Restarting" : status.text, + enabled && versionMismatch ? serverVersion : null, + ] + .filter((value): value is string => value !== null) + .join(" · "); + + const showUpdateAction = + enabled && + isConnected && + versionMismatch !== null && + (serverUpdateState.status === "idle" || serverUpdateState.status === "failed"); + + const statusTooltip = `${ + unsupported + ? (environment.connection.error ?? connectionStatusText(environment.connection)) + : enabled + ? connectionStatusText(environment.connection) + : "Switched off" + }${ + versionMismatch + ? `\nUpdate available: ${versionMismatch.serverVersion} → ${versionMismatch.clientVersion}` + : "" + }`; + + return ( + + + {/* The status can change while the tooltip is open, and base-ui only + re-measures the popup when the trigger's payload changes. */} + + } + > + {subtitleText} + + + {statusTooltip} + + + + · + + + + · + + + + } + below={ + <> + {diagnosis ? ( + setDiagnosisOpen((open) => !open)} + /> + ) : null} + {serverUpdateState.status !== "idle" ? ( +
+ +
+ ) : null} + + } + detail={ + <> + {diagnosis && diagnosisOpen ? ( + void retryNow(environmentId)} + onAddRoute={relayOnly ? () => onAddRoute(environment) : null} + /> + ) : null} + {routesOpen && ( + onAddRoute(environment)} + /> + )} + {permissionsOpen && ( +
+ +
+ )} + + } + > + {unsupported && + environment.entry.serverUpdateRequired === true && + serverUpdateState.status !== "running" ? ( + + ) : null} + {showUpdateAction ? ( + + ) : null} + + onSetEnabled(environmentId, checked)} + /> + } + /> + + {blocked ? "Client not supported" : enabled ? "Switch off" : "Switch on"} + + + + + } + > + + + + + setRoutesOpen((open) => !open)}> + + {routesOpen ? "Hide routes" : "Routes"} + + {mcpUrl ? ( + copyMcpUrl(mcpUrl, { url: mcpUrl })}>Copy MCP URL + ) : null} + {errorTraceId ? ( + copyTraceId(errorTraceId)}>Copy trace ID + ) : null} + + onRemove(environment)}> + {isRemoving ? "Removing…" : "Remove from this device…"} + + + + + ); +} + +function CloudLinkSwitch({ + checked, + disabled, + disabledReason, + onCheckedChange, + ariaLabel = "Enable T3 Connect", +}: { + readonly checked: boolean; + readonly disabled: boolean; + readonly disabledReason: string | null; + readonly onCheckedChange?: (enabled: boolean) => void; + readonly ariaLabel?: string; +}) { + const control = ( + + ); + return disabledReason ? ( + + {control}} /> + {disabledReason} + + ) : ( + control + ); +} + +function ConfiguredCloudLinkRow({ canManageRelay }: { readonly canManageRelay: boolean }) { + const primaryEnvironmentId = usePrimaryEnvironmentId(); + const { + isSignedIn, + linkState: primaryCloudLinkState, + linkRevoked, + managedTunnelActive, + managedTunnelOutOfSync, + publishAgentActivity, + holdWebhooksWhileOffline, + operationError, + reconcileCloudState, + } = useCloudLinkController(); + const [isUpdating, setIsUpdating] = useState(false); + const [isUpdatingPreference, setIsUpdatingPreference] = useState(false); + + const disabledReason = !isSignedIn + ? "Sign in to T3 Connect to manage this environment." + : !canManageRelay + ? "Your session does not have permission to manage T3 Connect access." + : null; + const isBusy = isUpdating || isUpdatingPreference; + const refreshLinkState = useEffectEvent(primaryCloudLinkState.refresh); + // The server rechecks reachability when the tunnel's 30 s readiness poll changes. + // Poll while mounted, so a failed read does not stop later ones. + useEffect(() => { + const interval = window.setInterval(() => refreshLinkState(), 30_000); + return () => window.clearInterval(interval); + }, []); + const reachability = managedTunnelActive ? primaryCloudLinkState.data?.reachability : undefined; + const reachabilityStatus = + reachability?.status === "reachable" ? ( + formatConnectReachable(reachability) + ) : reachability?.status === "unreachable" ? ( + + {[reachability.reason, reachability.hint, `Fix: ${reachability.fix}`] + .filter(Boolean) + .join(" ")}{" "} + + More info + + + ) : null; + + const updateManagedTunnel = async (enabled: boolean) => { + if ( + primaryEnvironmentId === null || + !readEnvironmentScope(primaryEnvironmentId, AuthRelayWriteScope) + ) + return; + setIsUpdating(true); + const ok = await reconcileCloudState({ managedTunnel: enabled, publish: publishAgentActivity }); + if (ok) { + toastManager.add({ + type: "success", + title: enabled + ? "T3 Connect linked" + : publishAgentActivity + ? "T3 Connect tunnel disabled" + : "T3 Connect unlinked", + description: enabled + ? "This environment is available through T3 Connect." + : publishAgentActivity + ? "The managed tunnel was removed. Agent activity publishing stays on." + : "This environment is no longer available through T3 Connect.", + }); + } + setIsUpdating(false); + }; + + const updatePublishAgentActivity = async (enabled: boolean) => { + if ( + primaryEnvironmentId === null || + !readEnvironmentScope(primaryEnvironmentId, AuthRelayWriteScope) + ) + return; + setIsUpdatingPreference(true); + const ok = await reconcileCloudState({ managedTunnel: managedTunnelActive, publish: enabled }); + if (ok) { + toastManager.add({ + type: "success", + title: enabled ? "Agent activity enabled" : "Agent activity disabled", + description: enabled + ? "This environment publishes agent activity to your mobile clients." + : "This environment will stop publishing agent activity.", + }); + } + setIsUpdatingPreference(false); + }; + + const updateHoldWebhooks = async (enabled: boolean) => { + setIsUpdatingPreference(true); + const ok = await reconcileCloudState({ + managedTunnel: managedTunnelActive, + publish: publishAgentActivity, + holdWebhooksWhileOffline: enabled, + }); + if (ok) { + toastManager.add({ + type: "success", + title: enabled ? "Webhooks held while offline" : "Webhooks no longer held", + description: enabled + ? "T3 Connect keeps webhook requests for up to 24 hours while this environment is offline." + : "Requests to an offline environment now fail. Anything already held is still delivered.", + }); + } + setIsUpdatingPreference(false); + }; + + return ( + <> + {window.desktopBridge ? ( + void updateManagedTunnel(enabled)} + /> + } + /> + ) : linkRevoked ? ( + + ) : null} + void updatePublishAgentActivity(enabled)} + /> + } + /> + {managedTunnelActive ? ( + void updateHoldWebhooks(enabled)} + /> + } + /> + ) : null} + + ); +} + +export function CloudLinkRow({ + canReadRelay, + canManageRelay, +}: { + readonly canReadRelay: boolean; + readonly canManageRelay: boolean; +}) { + if (!hasCloudPublicConfig()) return null; + if (!canReadRelay) { + return ( + + ); + } + return ; +} + +function EmptyRemoteEnvironments({ cloudEnabled = true }: { readonly cloudEnabled?: boolean }) { + return ( + + + + + + No saved remote environments + + {cloudEnabled + ? "Click “Add environment” to pair another environment, or connect one from T3 Connect." + : "Click “Add environment” to pair another environment."} + + + + ); +} + +export function CloudRemoteEnvironmentRows({ + primaryEnvironmentId, + savedEnvironments, +}: { + readonly primaryEnvironmentId: EnvironmentId | null; + readonly savedEnvironments: ReadonlyArray; +}) { + return hasCloudPublicConfig() ? ( + } + /> + ) : savedEnvironments.length === 0 ? ( + + ) : null; +} ```