Add shared remote runtime for mobile and web

- Move remote HTTP calls into `@t3tools/client-runtime`
- Let mobile parse hosted pairing links and use shared runtime
- Keep web and mobile remote connection flows aligned

Author: juliusmarminge

apps/mobile/app.config.ts

@@ -49,7 +49,6 @@ function resolveAppVariant(value: string | undefined): AppVariant {
 }
 
 const variant = VARIANT_CONFIG[APP_VARIANT];
-const allowsCleartextTraffic = APP_VARIANT === "development";
 
 const config: ExpoConfig = {
   name: variant.appName,
@@ -78,13 +77,11 @@ const config: ExpoConfig = {
     supportsTablet: true,
     bundleIdentifier: variant.iosBundleIdentifier,
     infoPlist: {
-      ...(allowsCleartextTraffic
-        ? {
-            NSAppTransportSecurity: {
-              NSAllowsArbitraryLoads: true,
-            },
-          }
-        : {}),
+      NSAppTransportSecurity: {
+        NSAllowsArbitraryLoads: true,
+      },
+      NSLocalNetworkUsageDescription:
+        "Allow T3 Code to connect to T3 Code servers on your local network or tailnet.",
       ITSAppUsesNonExemptEncryption: false,
     },
   },
@@ -133,7 +130,7 @@ const config: ExpoConfig = {
     ],
     "expo-secure-store",
     "expo-router",
-    ...(allowsCleartextTraffic ? ["./plugins/withAndroidCleartextTraffic.cjs"] : []),
+    "./plugins/withAndroidCleartextTraffic.cjs",
   ],
   extra: {
     appVariant: APP_VARIANT,

apps/mobile/src/app/index.tsx

@@ -1,38 +1,12 @@
 import { Stack, useRouter } from "expo-router";
-import { type ComponentProps, useState } from "react";
-import { Pressable, Text as RNText, View, useColorScheme } from "react-native";
-import { SymbolView } from "expo-symbols";
+import { useState } from "react";
+import { Text as RNText, View, useColorScheme } from "react-native";
 import { useThemeColor } from "../lib/useThemeColor";
 
 import { buildThreadRoutePath } from "../lib/routes";
 import { useRemoteCatalog } from "../state/use-remote-catalog";
 import { useRemoteEnvironmentState } from "../state/use-remote-environment-registry";
 import { HomeScreen } from "../features/home/HomeScreen";
-import type { RemoteCatalogState } from "../state/use-remote-catalog";
-
-function resolveHeaderStatus(state: RemoteCatalogState): {
-  readonly icon: ComponentProps<typeof SymbolView>["name"];
-  readonly color: string;
-  readonly label: string;
-} {
-  if (state.isLoadingSavedConnections) {
-    return { icon: "hourglass", color: "#737373", label: "Loading environments" };
-  }
-  if (state.connectionError) {
-    return { icon: "exclamationmark.triangle.fill", color: "#ef4444", label: "Environment error" };
-  }
-  if (state.connectionState === "ready") {
-    return { icon: "checkmark.circle.fill", color: "#22c55e", label: "Environment online" };
-  }
-  if (state.connectionState === "connecting" || state.connectionState === "reconnecting") {
-    return {
-      icon: "arrow.triangle.2.circlepath",
-      color: "#f59e0b",
-      label: "Environment connecting",
-    };
-  }
-  return { icon: "wifi.slash", color: "#ef4444", label: "Environment offline" };
-}
 
 /* ─── Route screen ───────────────────────────────────────────────────── */
 
@@ -44,7 +18,6 @@ export default function HomeRouteScreen() {
 
   const isDark = useColorScheme() === "dark";
   const iconColor = String(useThemeColor("--color-icon"));
-  const status = resolveHeaderStatus(catalogState);
 
   return (
     <>
@@ -105,15 +78,16 @@ export default function HomeRouteScreen() {
       </Stack.Toolbar>
 
       <Stack.Toolbar placement="right">
-        <Stack.Toolbar.View hidesSharedBackground>
-          <Pressable
-            accessibilityLabel={status.label}
-            className="h-11 w-11 items-center justify-center rounded-full bg-card active:opacity-70"
+        <Stack.Toolbar.Menu icon="ellipsis.circle" separateBackground>
+          <Stack.Toolbar.Label>More</Stack.Toolbar.Label>
+          <Stack.Toolbar.MenuAction
+            icon="desktopcomputer"
             onPress={() => router.push("/connections")}
+            subtitle="Manage connected hosts"
           >
-            <SymbolView name={status.icon} size={21} tintColor={status.color} type="monochrome" />
-          </Pressable>
-        </Stack.Toolbar.View>
+            <Stack.Toolbar.Label>Environments</Stack.Toolbar.Label>
+          </Stack.Toolbar.MenuAction>
+        </Stack.Toolbar.Menu>
       </Stack.Toolbar>
 
       {/* Bottom toolbar: search + compose, visually split like iMessage */}

apps/mobile/src/features/connection/pairing.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { extractPairingUrlFromQrPayload } from "./pairing";
+import { extractPairingUrlFromQrPayload, parsePairingUrl } from "./pairing";
 
 describe("extractPairingUrlFromQrPayload", () => {
   it("trims raw pairing urls from qr payloads", () => {
@@ -23,3 +23,16 @@ describe("extractPairingUrlFromQrPayload", () => {
     );
   });
 });
+
+describe("parsePairingUrl", () => {
+  it("reads hosted pairing links into backend host fields", () => {
+    expect(
+      parsePairingUrl(
+        "https://app.t3.codes/pair?host=https%3A%2F%2Fdesktop.tailnet.ts.net%2F#token=pairing-token",
+      ),
+    ).toEqual({
+      host: "https://desktop.tailnet.ts.net",
+      code: "pairing-token",
+    });
+  });
+});

apps/mobile/src/features/connection/pairing.ts

@@ -1,3 +1,5 @@
+import { readHostedPairingRequest } from "@t3tools/shared/remote";
+
 const MOBILE_PAIRING_URL_PARAM = "pairingUrl";
 
 export function buildPairingUrl(host: string, code: string): string {
@@ -21,6 +23,14 @@ export function parsePairingUrl(url: string): { host: string; code: string } {
 
   try {
     const parsed = new URL(trimmed);
+    const hostedPairingRequest = readHostedPairingRequest(parsed);
+    if (hostedPairingRequest) {
+      return {
+        host: hostedPairingRequest.host.replace(/\/$/, ""),
+        code: hostedPairingRequest.token,
+      };
+    }
+
     const hashParams = new URLSearchParams(parsed.hash.slice(1));
     const hashToken = hashParams.get("token");
     const queryToken = parsed.searchParams.get("token");

apps/mobile/src/lib/connection.ts

@@ -2,8 +2,9 @@ import { EnvironmentId } from "@t3tools/contracts";
 import {
   bootstrapRemoteBearerSession,
   fetchRemoteEnvironmentDescriptor,
-  resolveRemotePairingTarget,
-} from "@t3tools/shared/remote";
+} from "@t3tools/client-runtime";
+import { resolveRemotePairingTarget } from "@t3tools/shared/remote";
+import { mobileRemoteHttpRuntime } from "./runtime";
 
 export interface RemoteConnectionInput {
   readonly pairingUrl: string;
@@ -33,14 +34,18 @@ export async function bootstrapRemoteConnection(
     pairingUrl: input.pairingUrl,
   });
 
-  const descriptor = await fetchRemoteEnvironmentDescriptor({
-    httpBaseUrl: target.httpBaseUrl,
-  });
+  const descriptor = await mobileRemoteHttpRuntime.runPromise(
+    fetchRemoteEnvironmentDescriptor({
+      httpBaseUrl: target.httpBaseUrl,
+    }),
+  );
 
-  const bootstrap = await bootstrapRemoteBearerSession({
-    httpBaseUrl: target.httpBaseUrl,
-    credential: target.credential,
-  });
+  const bootstrap = await mobileRemoteHttpRuntime.runPromise(
+    bootstrapRemoteBearerSession({
+      httpBaseUrl: target.httpBaseUrl,
+      credential: target.credential,
+    }),
+  );
 
   return {
     environmentId: descriptor.environmentId,

apps/mobile/src/lib/runtime.ts

@@ -0,0 +1,6 @@
+import { fetch as expoFetch } from "expo/fetch";
+import * as ManagedRuntime from "effect/ManagedRuntime";
+
+import { remoteHttpClientLayer } from "@t3tools/client-runtime";
+
+export const mobileRemoteHttpRuntime = ManagedRuntime.make(remoteHttpClientLayer(expoFetch));

apps/mobile/src/state/use-remote-environment-registry.ts

@@ -9,9 +9,9 @@ import {
   createWsRpcClient,
   EnvironmentConnectionState,
   WsTransport,
+  resolveRemoteWebSocketConnectionUrl,
 } from "@t3tools/client-runtime";
 import type { EnvironmentId } from "@t3tools/contracts";
-import { resolveRemoteWebSocketConnectionUrl } from "@t3tools/shared/remote";
 import * as Arr from "effect/Array";
 import * as Order from "effect/Order";
 import * as Option from "effect/Option";
@@ -28,6 +28,7 @@ import {
   saveConnection,
 } from "../lib/storage";
 import { appAtomRegistry } from "./atom-registry";
+import { mobileRemoteHttpRuntime } from "../lib/runtime";
 import {
   drainEnvironmentSessions,
   notifyEnvironmentConnectionListeners,
@@ -213,11 +214,13 @@ export async function connectSavedEnvironment(
 
   const transport = new WsTransport(
     () =>
-      resolveRemoteWebSocketConnectionUrl({
-        wsBaseUrl: connection.wsBaseUrl,
-        httpBaseUrl: connection.httpBaseUrl,
-        bearerToken: connection.bearerToken,
-      }),
+      mobileRemoteHttpRuntime.runPromise(
+        resolveRemoteWebSocketConnectionUrl({
+          wsBaseUrl: connection.wsBaseUrl,
+          httpBaseUrl: connection.httpBaseUrl,
+          bearerToken: connection.bearerToken,
+        }),
+      ),
     {
       onAttempt: () => {
         environmentRuntimeManager.patch({ environmentId: connection.environmentId }, (previous) => {