feat(clients): auto-reconnect on drop + live session timer

- Auto-reconnect: if the tunnel drops while the user still wants it (they didn't
  disconnect) and it had reached 'connected', bring it back up ~3s later. Only a
  genuine drop reconnects — initial connect failures fall through to the error +
  watchdog, so there's no retry loop. Desktop also treats a polled 'down'/'error'
  status as a drop.
- Session timer: stamp the connect time (connectedSince) and show a live
  "Connected · <elapsed>" — under the orb on desktop, in the connected subtitle
  on mobile — ticking each second.

tsc / eslint / prettier / tests green on both clients.

Author: TheTrunk

clients/desktop/src/App.tsx

@@ -6,6 +6,7 @@ import { CountryPicker } from './components/CountryPicker.js';
 import { MultihopPanel } from './components/MultihopPanel.js';
 import { TierBadge } from './components/TierBadge.js';
 import { StatBar } from './components/StatBar.js';
+import { SessionTimer } from './components/SessionTimer.js';
 import { Settings } from './components/Settings.js';
 import { UPGRADE_URL } from './lib/directory.js';
 
@@ -65,6 +66,8 @@ export function App(): JSX.Element {
         onToggle={connected || busy ? conn.disconnect : conn.connect}
       />
 
+      {connected && conn.connectedSince && <SessionTimer since={conn.connectedSince} />}
+
       <button
         className="loc-btn"
         onClick={() => setPicker('entry')}

clients/desktop/src/components/SessionTimer.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+
+/** Compact elapsed duration: "45s", "12m 03s", "2h 09m". */
+function fmt(ms: number): string {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (h > 0) {
+    return `${h}h ${String(m).padStart(2, '0')}m`;
+  }
+  if (m > 0) {
+    return `${m}m ${String(sec).padStart(2, '0')}s`;
+  }
+  return `${sec}s`;
+}
+
+/** Live "Connected · <elapsed>" line, ticking once a second. */
+export function SessionTimer({ since }: { readonly since: number }): JSX.Element {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return <div className="session-timer">Connected · {fmt(now - since)}</div>;
+}

clients/desktop/src/hooks/useConnection.ts

@@ -68,6 +68,8 @@ export interface ConnectionModel {
   readonly autoConnect: boolean;
   /** Toggle auto-connect on launch. */
   readonly setAutoConnect: (on: boolean) => void;
+  /** Unix-ms when the active session connected, or null when not connected. */
+  readonly connectedSince: number | null;
 }
 
 const DOWN: TunnelStatus = {
@@ -113,6 +115,10 @@ export function useConnection(): ConnectionModel {
     () => localStorage.getItem('cvpn.autoConnect') === '1',
   );
   const autoConnectedRef = useRef(false);
+  // Unix-ms when the current session connected (for the session timer), and
+  // whether we ever reached 'connected' this session (for auto-reconnect).
+  const [connectedSince, setConnectedSince] = useState<number | null>(null);
+  const wasConnectedRef = useRef(false);
 
   // Bootstrap: discover the fleet and restore the last-selected country.
   useEffect(() => {
@@ -230,6 +236,7 @@ export function useConnection(): ConnectionModel {
   }, [selected, exit, multihop, routeStyle, phase, keypair, killSwitch, refreshEntitlement]);
 
   const disconnect = useCallback(() => {
+    wasConnectedRef.current = false;
     void (async () => {
       try {
         const s = await teardown();
@@ -242,6 +249,30 @@ export function useConnection(): ConnectionModel {
     })();
   }, []);
 
+  // Session timer + drop detection: stamp the connect time, remember we reached
+  // 'connected', and clear on idle.
+  useEffect(() => {
+    if (phase === 'connected') {
+      wasConnectedRef.current = true;
+      setConnectedSince((prev) => prev ?? Date.now());
+    } else if (phase === 'idle') {
+      setConnectedSince(null);
+    }
+  }, [phase]);
+
+  // Auto-reconnect an unexpected drop: if the tunnel errors out after having been
+  // connected (not a user disconnect, not an initial connect failure), bring it
+  // back up shortly.
+  useEffect(() => {
+    if (phase === 'error' && wasConnectedRef.current) {
+      wasConnectedRef.current = false;
+      setConnectedSince(null);
+      const id = setTimeout(() => connect(), 3000);
+      return () => clearTimeout(id);
+    }
+    return undefined;
+  }, [phase, connect]);
+
   // Auto-connect on launch (opt-in): once discovery settles and a location is
   // selected, bring the tunnel up automatically.
   useEffect(() => {
@@ -261,8 +292,10 @@ export function useConnection(): ConnectionModel {
         try {
           const s = await nativeStatus();
           setTunnel(s);
-          if (s.state === 'error') {
-            setError(s.error ?? 'tunnel error');
+          // A drop shows up as an error or a 'down' state while we think we're
+          // connected — surface it as an error so auto-reconnect can kick in.
+          if (s.state === 'error' || s.state === 'down') {
+            setError(s.error ?? 'connection lost');
             setPhase('error');
           }
         } catch {
@@ -293,5 +326,6 @@ export function useConnection(): ConnectionModel {
     setKillSwitch,
     autoConnect,
     setAutoConnect,
+    connectedSince,
   };
 }

clients/desktop/src/styles.css

@@ -371,6 +371,14 @@ button {
   font-size: 18px;
 }
 
+.session-timer {
+  text-align: center;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--cyan);
+  margin-top: -4px;
+}
+
 .ping {
   width: 8px;
   height: 8px;

clients/mobile/src/screens/ConnectScreen.tsx

@@ -4,6 +4,7 @@
  * Orb + tier pill + a country selector row + the big connect/disconnect button,
  * plus live down/up/ping stats when connected. Everything is driven by `useVpn`.
  */
+import { useEffect, useState } from 'react';
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import type { RouteStyle } from '@cumulusvpn/core';
 import type { Country } from '../lib/gateways';
@@ -55,6 +56,17 @@ export function ConnectScreen({
   const target: Country | null = vpn.selected ?? vpn.countries[0] ?? null;
   const busy = vpn.state === 'connecting' || vpn.state === 'disconnecting';
 
+  // Tick every second while connected so the session timer stays live.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!connected) {
+      return undefined;
+    }
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [connected]);
+  const elapsed = vpn.connectedSince ? formatDuration(now - vpn.connectedSince) : null;
+
   return (
     <View style={styles.root}>
       <View style={styles.top}>
@@ -77,9 +89,7 @@ export function ConnectScreen({
           <View style={styles.loc}>
             <Text style={styles.flag}>{target.flag}</Text>
             <Text style={styles.country}>{target.name}</Text>
-            <Text style={styles.ip}>
-              {target.city ? `Protected · ${target.city}` : 'Protected'}
-            </Text>
+            <Text style={styles.ip}>{elapsed ? `Protected · ${elapsed}` : 'Protected'}</Text>
           </View>
         ) : (
           <View style={styles.loc}>
@@ -400,6 +410,21 @@ function sinceSec(unixSec: number): number {
   return Math.max(0, Math.round(Date.now() / 1000 - unixSec));
 }
 
+/** Compact elapsed duration: "45s", "12m 03s", "2h 09m". */
+function formatDuration(ms: number): string {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (h > 0) {
+    return `${h}h ${String(m).padStart(2, '0')}m`;
+  }
+  if (m > 0) {
+    return `${m}m ${String(sec).padStart(2, '0')}s`;
+  }
+  return `${sec}s`;
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1, paddingHorizontal: space.xl, paddingBottom: space.xxl, paddingTop: space.sm },
   top: {

clients/mobile/src/state/useVpn.ts

@@ -79,6 +79,8 @@ export interface VpnModel {
   readonly killSwitch: boolean;
   /** Auto-connect on app launch once discovery completes (persisted). */
   readonly autoConnect: boolean;
+  /** Unix-ms when the active session connected, or null when not connected. */
+  readonly connectedSince: number | null;
 }
 
 /** Chain-payment identity derived from the device key + last enrollment. */
@@ -131,6 +133,13 @@ export function useVpn(): VpnModel & VpnActions {
   const [killSwitch, setKillSwitchState] = useState(false);
   const [autoConnect, setAutoConnectState] = useState(false);
   const autoConnectedRef = useRef(false);
+  // Unix-ms when the current session connected, for the session timer.
+  const [connectedSince, setConnectedSince] = useState<number | null>(null);
+  // Whether the user currently wants a tunnel (true after connect, false after
+  // an explicit disconnect) + whether we reached 'connected' — together these
+  // distinguish an unexpected drop from a user disconnect, for auto-reconnect.
+  const wantConnectedRef = useRef(false);
+  const wasConnectedRef = useRef(false);
 
   // Latest enrolled gateway IP, kept in a ref for the status poller.
   const gatewayIpRef = useRef<string | null>(null);
@@ -222,6 +231,11 @@ export function useVpn(): VpnModel & VpnActions {
     const sub = onTunnelStatus((s) => {
       setStatus(s);
       setState(s.state);
+      if (s.state === 'connected') {
+        setConnectedSince((prev) => prev ?? Date.now());
+      } else if (s.state === 'disconnected' || s.state === 'error') {
+        setConnectedSince(null);
+      }
     });
     return () => sub.remove();
   }, []);
@@ -276,6 +290,7 @@ export function useVpn(): VpnModel & VpnActions {
     if (!keypair) {
       return;
     }
+    wantConnectedRef.current = true;
     setError(null);
     setState('connecting');
     try {
@@ -333,6 +348,8 @@ export function useVpn(): VpnModel & VpnActions {
   }, [keypair, countries, selectedCode, routeStyle, entryCode, exitCode, killSwitch]);
 
   const disconnect = useCallback(async (): Promise<void> => {
+    wantConnectedRef.current = false;
+    wasConnectedRef.current = false;
     setState('disconnecting');
     try {
       await CumulusTunnel.stopTunnel();
@@ -341,6 +358,24 @@ export function useVpn(): VpnModel & VpnActions {
     }
   }, []);
 
+  // ---- auto-reconnect on an unexpected drop ------------------------------
+  // If the tunnel drops while the user still wants it (they didn't tap
+  // Disconnect) and we had reached 'connected', bring it back up shortly. Only
+  // reconnects a genuine drop — initial connect failures are handled by the
+  // watchdog + the error message, not a retry loop.
+  useEffect(() => {
+    if (state === 'connected') {
+      wasConnectedRef.current = true;
+      return;
+    }
+    if (state === 'disconnected' && wantConnectedRef.current && wasConnectedRef.current) {
+      wasConnectedRef.current = false;
+      const id = setTimeout(() => void connect(), 3000);
+      return () => clearTimeout(id);
+    }
+    return undefined;
+  }, [state, connect]);
+
   // ---- auto-connect on launch (opt-in) -----------------------------------
   // Once, after the first successful discovery, if the user enabled auto-connect
   // and nothing is up yet, bring the tunnel up automatically.
@@ -408,6 +443,7 @@ export function useVpn(): VpnModel & VpnActions {
     exit,
     killSwitch,
     autoConnect,
+    connectedSince,
     connect,
     disconnect,
     selectCountry,