Merge pull request #191 from jayleaton/fix/mobile-reconnect-loop-20261104

fix(client-runtime): connections stay put and offline machines stop saying reconnecting

Author: jayleaton

apps/mobile/src/features/connection/CloudEnvironmentRows.tsx

@@ -214,7 +214,9 @@ function ConnectedCloudEnvironmentRow(props: {
       {...(enabled || unsupported
         ? diagnosis
           ? { statusText: diagnosis.headline }
-          : {}
+          : presentation
+            ? { statusText: environmentStatusText(presentation.connection) }
+            : {}
         : { statusText: "Off" })}
       value={enabled}
     />

apps/mobile/src/features/connection/ConnectionEnvironmentRow.tsx

@@ -1,7 +1,11 @@
 import * as Dialog from "../../components/ui/Dialog";
 import { ConnectionTraceId } from "./ConnectionTraceId";
 import { SymbolView } from "../../components/ui/AppSymbol";
-import { hasSavedBearerRoute, hostFreezeNotice } from "@t3tools/client-runtime/connection";
+import {
+  type EnvironmentConnectionPresentation,
+  hasSavedBearerRoute,
+  hostFreezeNotice,
+} from "@t3tools/client-runtime/connection";
 import type { AtomCommandResult } from "@t3tools/client-runtime/state/runtime";
 import { type EnvironmentId, resolveEnvironmentMachineKind } from "@t3tools/contracts";
 import { useAtomValue } from "@effect/atom-react";
@@ -25,15 +29,20 @@ import { ConnectionFormField } from "./ConnectionFormField";
 import { ConnectionStatusDot } from "./ConnectionStatusDot";
 import { environmentStatusText } from "./environmentStatusText";
 
-function connectionStatusLabel(environment: ConnectedEnvironmentSummary): string | null {
+function connectionStatusLabel(
+  environment: ConnectedEnvironmentSummary,
+  connection: EnvironmentConnectionPresentation | undefined,
+): string | null {
   if (!environment.isEnabled && environment.connectionState !== "unsupported") {
     return "Off";
   }
-  return environmentStatusText({
-    phase: environment.connectionState,
-    error: environment.connectionError,
-    traceId: environment.connectionErrorTraceId,
-  });
+  return environmentStatusText(
+    connection ?? {
+      phase: environment.connectionState,
+      error: environment.connectionError,
+      traceId: environment.connectionErrorTraceId,
+    },
+  );
 }
 
 export function ConnectionEnvironmentRow(props: {
@@ -64,7 +73,7 @@ export function ConnectionEnvironmentRow(props: {
     presentation,
   );
   const enabled = props.environment.isEnabled && !unsupported;
-  const statusLabel = connectionStatusLabel(props.environment);
+  const statusLabel = connectionStatusLabel(props.environment, presentation?.connection);
   const statusTraceId = enabled ? props.environment.connectionErrorTraceId : null;
   const hasConnectionFailure = enabled && props.environment.connectionError !== null;
   const freeze = enabled

apps/mobile/src/features/connection/EnvironmentConnectionNotice.tsx

@@ -10,18 +10,23 @@ import { View } from "react-native";
 
 import { AppText as Text } from "../../components/ui/AppText";
 
-function noticeTitle(phase: EnvironmentConnectionPhase, environmentLabel: string): string {
-  switch (phase) {
+function noticeTitle(
+  connection: EnvironmentConnectionPresentation,
+  environmentLabel: string,
+): string {
+  switch (connection.phase) {
     case "offline":
-      return "You are offline";
+      return `${environmentLabel} is offline`;
     case "connecting":
       return `Connecting to ${environmentLabel}...`;
     case "reconnecting":
       return `Reconnecting to ${environmentLabel}...`;
     case "unsupported":
       return "Client not supported";
     case "error":
-      return `${environmentLabel} is unavailable`;
+      return connection.needsPairing === true
+        ? `${environmentLabel} needs pairing again`
+        : `${environmentLabel} is unavailable`;
     case "available":
       return `${environmentLabel} is disconnected`;
     case "connected":
@@ -40,7 +45,7 @@ function noticeDetail(
 
   switch (phase) {
     case "offline":
-      return `Cached data remains available. The ${resourceName} will load when your connection returns.`;
+      return `Cached data remains available. The ${resourceName} will load when the environment is back.`;
     case "connecting":
     case "reconnecting":
       return `The ${resourceName} will load as soon as the environment is ready.`;
@@ -78,7 +83,7 @@ export function EnvironmentConnectionNotice(props: {
         )}
 
         <Text className="text-center text-lg font-t3-bold text-foreground">
-          {noticeTitle(props.connection.phase, props.environmentLabel)}
+          {noticeTitle(props.connection, props.environmentLabel)}
         </Text>
         <Text className="text-center text-sm leading-normal text-foreground-muted">
           {noticeDetail(props.connection.phase, props.resourceName, props.connection.error)}

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

@@ -1,10 +1,13 @@
 import {
   connectionStatusText,
+  lastSeenLabel,
   type EnvironmentConnectionPresentation,
 } from "@t3tools/client-runtime/connection";
 
 export function environmentStatusText(connection: EnvironmentConnectionPresentation): string {
-  return connection.phase === "unsupported" && connection.error !== null
-    ? connection.error
-    : connectionStatusText(connection);
+  if (connection.phase === "unsupported" && connection.error !== null) return connection.error;
+  const text = connectionStatusText(connection);
+  return connection.phase === "offline" && connection.lastConnectedAt !== undefined
+    ? `${text} · ${lastSeenLabel(connection.lastConnectedAt, Date.now())}`
+    : text;
 }

apps/mobile/src/features/home/WorkspaceConnectionTitle.tsx

@@ -18,7 +18,9 @@ import {
   type WorkspaceConnectionStatusPresentation,
 } from "./workspace-connection-status";
 
-const STATUS_SHOW_DELAY_MS = 800;
+// Long enough that the reconnect on every app open, which usually lands within two seconds,
+// never shows.
+const STATUS_SHOW_DELAY_MS = 2_000;
 const FADE_IN_MS = 250;
 
 type ConnectionStatus = WorkspaceConnectionStatusPresentation & {

apps/mobile/src/features/threads/ThreadDetailScreen.tsx

@@ -349,6 +349,8 @@ const NO_RUN_STOP_ATOM = Atom.make<RunStopPresentation | null>(null).pipe(
 
 // Connection failures survive retries and app suspension.
 const RECONNECT_ERROR_DELAY_MS = 5_000;
+// The reconnect on every app open usually lands within this, so it never shows.
+const RECONNECT_STATUS_DELAY_MS = 2_000;
 
 // Anchors, the submitted message, follow state and pending scrolls belong to
 // one thread, so the body remounts when the thread changes.
@@ -539,6 +541,11 @@ function ThreadDetailBody(props: ThreadDetailScreenProps) {
     retryError,
     RECONNECT_ERROR_DELAY_MS,
   );
+  const shownRetryState = useDelayedStatus(
+    `${props.environmentId}:retrying`,
+    connectionRetrying ? props.connectionStateLabel : null,
+    RECONNECT_STATUS_DELAY_MS,
+  );
   const interruptThreadTurn = useAtomCommand(threadEnvironment.interruptTurn, {
     reportFailure: false,
   });
@@ -674,7 +681,10 @@ function ThreadDetailBody(props: ThreadDetailScreenProps) {
   const floatingStatus = ((): FloatingWorkingStatus | null => {
     const connectionStatus = connectionFloatingStatus({
       connectionError: connectionRetrying ? retryConnectionError : props.connectionError,
-      connectionState: props.connectionStateLabel,
+      // Until the delay passes, a retry shows nothing rather than a reconnect banner.
+      connectionState: connectionRetrying
+        ? (shownRetryState ?? "connected")
+        : props.connectionStateLabel,
       environmentLabel: props.environmentLabel,
       onReconnect: props.onReconnectEnvironment,
     });

apps/mobile/src/features/threads/floating-working-status.ts

@@ -73,7 +73,7 @@ export function connectionFloatingStatus(input: {
         onPress: input.onReconnect,
       };
     case "offline":
-      return unavailable("You are offline");
+      return unavailable(`${environmentLabel} is offline`);
     case "unsupported":
       return unavailable("Client not supported");
     case "error":

apps/web/src/components/settings/SavedEnvironmentRows.tsx

@@ -14,6 +14,7 @@ import {
   hasSavedBearerRoute,
   connectionStatusText,
   environmentMcpUrl,
+  lastSeenLabel,
 } from "@t3tools/client-runtime/connection";
 import * as Option from "effect/Option";
 
@@ -93,12 +94,19 @@ function savedBackendStatus(environment: EnvironmentPresentation): {
     case "unsupported":
       return { text: "Client not supported", tone: "muted" };
     case "error":
+      if (connection.needsPairing === true) return { text: "Needs pairing again", tone: "error" };
       return {
         text: connection.error ? `Connection failed: ${connection.error}` : "Connection failed",
         tone: "error",
       };
     case "offline":
-      return { text: "Offline", tone: "muted" };
+      return {
+        text:
+          connection.lastConnectedAt === undefined
+            ? "Offline"
+            : `Offline · ${lastSeenLabel(connection.lastConnectedAt, Date.now())}`,
+        tone: "muted",
+      };
     case "available":
       return { text: "Not connected", tone: "muted" };
   }

apps/web/src/state/shell.ts

@@ -144,6 +144,7 @@ export const allReachableShellsLiveAtom = Atom.make((get) => {
     const settledOffline =
       connection.phase === "offline" ||
       connection.phase === "blocked" ||
+      connection.unreachable === true ||
       (connection.phase === "backoff" && connection.attempt > 2);
     if (!settledOffline) return false;
   }

docs/internals/remote.md

@@ -39,7 +39,12 @@ connect, including a blocked one such as a signed-out T3 Connect, moves on to
 the next; only an incompatible server stops the walk, because it is the same
 server on every route. While connected over a later route the
 [supervisor](../../packages/client-runtime/src/connection/supervisor.ts)
-preflights the earlier ones and replaces the session when one would connect.
+preflights earlier routes of a better kind (loopback, LAN, tailnet or VPN,
+public, SSH, relay, best first) and replaces the session when one would
+connect. An earlier route of the same kind is not worth a reconnect: MagicDNS
+through `tailscale serve` and the raw tailnet address reach the same host, and
+mobile reconnects over whichever answers first after every resume, so following
+list order would replace the socket on nearly every foreground.
 Preflight includes authorization so a route that answers but rejects this
 client never costs a working session; a route that still fails afterwards is
 held back for a cooldown so a flaky network cannot bounce the connection.