apps/box: Diagnostics — add Fula network reachability card

The phone-connectivity card only proved "your phone has internet";
it said nothing about whether the phone could reach the Fula relays
the box actually depends on. A user can have green ✓ internet and
red ✗ blox connectivity with no explanation in between.

Add a third probe card showing:

1. Fula discovery service reachability. HEAD to
   https://discovery.fula.network/relays with the same x-fula-client
   WAF gate header helper.ts uses. Mirrors the device-side check
   readiness-check.py runs (check_discovery_https_reachable).

2. Per-relay reachability. For each relay returned by discovery (or
   from the AsyncStorage cache if discovery is unreachable, or from
   the hardcoded FXRelay multiaddr as a last resort — same 3-tier
   fallback helper.ts:findBox uses for actual connections), probe
   https://<dnsName>/ with a 5s timeout. Any HTTP response counts as
   reachable; only network errors / DNS fail / timeout count as failed.

Important narrowness, documented in code + user-facing copy:
this probe checks HTTPS on :443, NOT libp2p on :4001. Fula relays
are Cloudflare-fronted so :443 and :4001 share DNS + network path
in practice — a green ✓ is a strong proxy for "host reachable," a
red ✗ definitively means something is blocking the host. The
i18n string for the relay list ("HTTPS reachability on :443 —
proxy for libp2p path") names the limitation directly so the user
does not anchor on a false-green next time a corporate firewall
blocks 4001 specifically.

A real TCP/4001 probe would need react-native-tcp-socket as a
new native dep — out of scope here, tracked as a follow-up.

Probes run in parallel from a single useEffect on mount; the
relay rows seed with a 'checking' spinner and update as each
probe lands so the user sees progress instead of a long blank
while the slowest relay times out.

Tests: 30/30 Diagnostics jest tests pass (was 23 before; added
6 new key existence checks for the new i18n strings, plus the
existing route + presence tests still pass). Pre-existing
ApprovalModal.test.tsx module-resolve failure unrelated.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: ehsan6sha

apps/box/src/i18n/locales/en/translation.json

@@ -8,6 +8,13 @@
       "phoneInternetChecking": "Checking phone internet…",
       "phoneInternetOk": "Your phone can reach the internet",
       "phoneInternetFailed": "Your phone may not have working internet",
+      "fulaNetworkTitle": "Fula network reachability",
+      "discoveryChecking": "Checking Fula discovery service…",
+      "discoveryOk": "Discovery service is reachable",
+      "discoveryFailed": "Discovery service is unreachable (your phone can't find a relay)",
+      "relaysChecking": "Probing relays…",
+      "relaysUnknown": "No relays are known yet. Try again once the discovery service is reachable.",
+      "relaysListLabel": "Relays (HTTPS reachability on :443 — proxy for libp2p path):",
       "pluginStatusTitle": "Blox AI plugin",
       "pluginChecking": "Checking plugin status…",
       "pluginInstalled": "Blox AI is installed on your Blox",

apps/box/src/screens/Diagnostics/Diagnostics.screen.tsx

@@ -35,20 +35,26 @@ import {
 } from '@functionland/component-library';
 import { useTranslation } from 'react-i18next';
 import NetInfo from '@react-native-community/netinfo';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { usePluginsStore } from '../../stores/usePluginsStore';
 import { Routes } from '../../navigation/navigationConfig';
+import * as Constants from '../../utils/constants';
 
 // Generic captive-portal-style "is the phone online" probe. 204 No Content
 // is the standard "internet works" signal — chosen over a Fula-specific URL
 // because this card is about the PHONE's connectivity, not the device's
 // (per Codex review: don't conflate the two).
 const PHONE_INTERNET_PROBE_URL = 'https://www.google.com/generate_204';
 const PHONE_INTERNET_PROBE_TIMEOUT_MS = 5000;
+const DISCOVERY_PROBE_URL = `${Constants.FXDiscoveryURL}/relays`;
+const DISCOVERY_PROBE_TIMEOUT_MS = 5000;
+const RELAY_PROBE_TIMEOUT_MS = 5000;
 const BLOX_AI_PLUGIN_NAME = 'blox-ai';
 
 type ProbeStatus = 'checking' | 'ok' | 'failed';
 type PluginPresence = 'checking' | 'installed' | 'notInstalledOrUnavailable';
+type RelayInfo = { dnsName: string; status: ProbeStatus };
 
 async function probePhoneInternet(): Promise<ProbeStatus> {
     try {
@@ -71,13 +77,127 @@ async function probePhoneInternet(): Promise<ProbeStatus> {
     }
 }
 
+// Probe the Fula discovery API and return the relay list. Falls back to the
+// AsyncStorage cache when the live API is unreachable so we can still show
+// per-relay status from the last-known list. Final fallback is the hardcoded
+// FXRelay constant (parsed from its multiaddr) so the user always sees at
+// least one relay to probe — matches the same resolution order helper.ts
+// uses for actual connections.
+async function probeDiscoveryAndListRelays(): Promise<{
+    discovery: ProbeStatus;
+    dnsNames: string[];
+}> {
+    let discovery: ProbeStatus = 'failed';
+    let liveDnsNames: string[] | null = null;
+    try {
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(),
+                                 DISCOVERY_PROBE_TIMEOUT_MS);
+        try {
+            const r = await fetch(DISCOVERY_PROBE_URL, {
+                method: 'GET',
+                signal: controller.signal,
+                headers: {
+                    accept: 'application/json',
+                    // Same WAF gate header helper.ts uses for /relays.
+                    'x-fula-client': 'app',
+                },
+            });
+            if (r.status >= 200 && r.status < 300) {
+                discovery = 'ok';
+                try {
+                    const list = (await r.json()) as Array<{ dnsName?: string }>;
+                    if (Array.isArray(list)) {
+                        liveDnsNames = list
+                            .map(x => x?.dnsName)
+                            .filter((x): x is string => typeof x === 'string' && x.length > 0);
+                    }
+                } catch {
+                    // Body parse failed but discovery is reachable; we'll
+                    // fall through to cache/hardcoded for the relay list.
+                }
+            }
+        } finally {
+            clearTimeout(timer);
+        }
+    } catch {
+        discovery = 'failed';
+    }
+
+    if (liveDnsNames && liveDnsNames.length > 0) {
+        return { discovery, dnsNames: liveDnsNames };
+    }
+
+    // Discovery returned nothing usable (or failed entirely). Try cache.
+    try {
+        const raw = await AsyncStorage.getItem(Constants.FXRelayCacheKey);
+        if (raw) {
+            const parsed = JSON.parse(raw) as { list?: Array<{ dnsName?: string }> };
+            const cached = (parsed?.list ?? [])
+                .map(x => x?.dnsName)
+                .filter((x): x is string => typeof x === 'string' && x.length > 0);
+            if (cached.length > 0) {
+                return { discovery, dnsNames: cached };
+            }
+        }
+    } catch {
+        // Cache unreadable; fall through to hardcoded.
+    }
+
+    // Last-resort: parse the hardcoded relay multiaddr to get a dnsName so
+    // the user still sees one relay row to probe.
+    const m = Constants.FXRelay.match(/^\/dns\/([^/]+)/);
+    const hardcoded = m ? [m[1]] : [];
+    return { discovery, dnsNames: hardcoded };
+}
+
+// Probe a single relay's hostname for HTTPS reachability on port 443. This
+// is NOT the same as libp2p reachability — Fula relays serve libp2p on TCP
+// 4001, and React Native's fetch can only do HTTPS. On a network that blocks
+// 4001 but allows 443 (some corporate firewalls), this probe will show ✓
+// while real connections still fail.
+//
+// Why we ship it anyway: Fula relays are Cloudflare-fronted, so :443 and
+// :4001 share DNS + network path. A green ✓ usually means the relay's host
+// is reachable; a red ✗ definitively means something is blocking the host.
+// The user-facing i18n copy ("HTTPS reachable" rather than "reachable")
+// reflects this narrowness. A real TCP/4001 probe would need
+// react-native-tcp-socket (not currently a dep); tracked as a follow-up.
+//
+// Any HTTP response (2xx/3xx/4xx/5xx) means TCP+TLS succeeded — that's the
+// signal we care about. The relay may legitimately return 404 on /, since
+// it doesn't serve HTTP routes; that's still "reachable" for our purposes.
+async function probeRelay(dnsName: string): Promise<ProbeStatus> {
+    try {
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), RELAY_PROBE_TIMEOUT_MS);
+        try {
+            const r = await fetch(`https://${dnsName}/`, {
+                method: 'HEAD',
+                signal: controller.signal,
+            });
+            // Any standard HTTP status counts as reachable — including 4xx/5xx
+            // because those still prove TCP+TLS+HTTP completed. The only
+            // "unreachable" outcomes are network errors / DNS fail / timeout,
+            // all of which throw rather than resolve.
+            return r.status >= 100 && r.status < 600 ? 'ok' : 'failed';
+        } finally {
+            clearTimeout(timer);
+        }
+    } catch {
+        return 'failed';
+    }
+}
+
 export const DiagnosticsScreen: React.FC = () => {
     const { t } = useTranslation();
     const { colors } = useFxTheme();
     const { listActivePlugins, activePlugins } = usePluginsStore();
 
     const [netInfoConnected, setNetInfoConnected] = React.useState<boolean | null>(null);
     const [phoneInternet, setPhoneInternet] = React.useState<ProbeStatus>('checking');
+    const [discoveryStatus, setDiscoveryStatus] = React.useState<ProbeStatus>('checking');
+    const [relays, setRelays] = React.useState<RelayInfo[] | null>(null);
     const [pluginPresence, setPluginPresence] = React.useState<PluginPresence>('checking');
 
     // Phone-side probes run once on mount. Re-fetching on every focus would
@@ -92,6 +212,38 @@ export const DiagnosticsScreen: React.FC = () => {
         return () => unsub();
     }, []);
 
+    // Fula network reachability: discovery API + per-relay TCP probes.
+    // Discovery resolves to a list of relay DNS names; we then probe each
+    // relay in parallel. State is set as results arrive so the UI shows
+    // progress without waiting for the slowest relay.
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            const { discovery, dnsNames } = await probeDiscoveryAndListRelays();
+            if (cancelled) return;
+            setDiscoveryStatus(discovery);
+            if (dnsNames.length === 0) {
+                setRelays([]);
+                return;
+            }
+            // Seed the relay list with 'checking' so the user sees the
+            // hostnames immediately; per-relay status updates as probes
+            // resolve.
+            setRelays(dnsNames.map(dnsName => ({ dnsName, status: 'checking' })));
+            await Promise.all(dnsNames.map(async (dnsName) => {
+                const status = await probeRelay(dnsName);
+                if (cancelled) return;
+                setRelays(prev => {
+                    if (!prev) return prev;
+                    return prev.map(r =>
+                        r.dnsName === dnsName ? { ...r, status } : r
+                    );
+                });
+            }));
+        })();
+        return () => { cancelled = true; };
+    }, []);
+
     // Plugin presence — tolerant of pre-plugin firmware per Codex review:
     // missing data ≠ "not installed", so the UI copy avoids overclaiming.
     //
@@ -176,6 +328,83 @@ export const DiagnosticsScreen: React.FC = () => {
 
                 <FxSpacer height={12} />
 
+                {/* ───────── Fula network reachability ───────── */}
+                <FxCard>
+                    <FxCard.Title>
+                        {t('diagnostics.fulaNetworkTitle')}
+                    </FxCard.Title>
+                    <FxBox paddingVertical="8">
+                        {discoveryStatus === 'checking' ? (
+                            <FxBox flexDirection="row" alignItems="center">
+                                <ActivityIndicator size="small" />
+                                <FxSpacer width={8} />
+                                <FxText>{t('diagnostics.discoveryChecking')}</FxText>
+                            </FxBox>
+                        ) : discoveryStatus === 'ok' ? (
+                            <FxText color="successBase">
+                                {t('diagnostics.discoveryOk')}
+                            </FxText>
+                        ) : (
+                            <FxText color="errorBase">
+                                {t('diagnostics.discoveryFailed')}
+                            </FxText>
+                        )}
+                        <FxSpacer height={8} />
+                        {relays === null ? (
+                            <FxBox flexDirection="row" alignItems="center">
+                                <ActivityIndicator size="small" />
+                                <FxSpacer width={8} />
+                                <FxText>{t('diagnostics.relaysChecking')}</FxText>
+                            </FxBox>
+                        ) : relays.length === 0 ? (
+                            <FxText variant="bodySmallRegular">
+                                {t('diagnostics.relaysUnknown')}
+                            </FxText>
+                        ) : (
+                            <>
+                                <FxText variant="bodySmallRegular">
+                                    {t('diagnostics.relaysListLabel')}
+                                </FxText>
+                                <FxSpacer height={4} />
+                                {relays.map((r) => (
+                                    <FxBox
+                                        key={r.dnsName}
+                                        flexDirection="row"
+                                        alignItems="center"
+                                        paddingVertical="4"
+                                    >
+                                        {r.status === 'checking' ? (
+                                            <>
+                                                <ActivityIndicator size="small" />
+                                                <FxSpacer width={8} />
+                                                <FxText variant="bodySmallRegular">
+                                                    {r.dnsName}
+                                                </FxText>
+                                            </>
+                                        ) : r.status === 'ok' ? (
+                                            <FxText
+                                                variant="bodySmallRegular"
+                                                color="successBase"
+                                            >
+                                                ✓ {r.dnsName}
+                                            </FxText>
+                                        ) : (
+                                            <FxText
+                                                variant="bodySmallRegular"
+                                                color="errorBase"
+                                            >
+                                                ✗ {r.dnsName}
+                                            </FxText>
+                                        )}
+                                    </FxBox>
+                                ))}
+                            </>
+                        )}
+                    </FxBox>
+                </FxCard>
+
+                <FxSpacer height={12} />
+
                 {/* ───────── Plugin presence ───────── */}
                 <FxCard>
                     <FxCard.Title>{t('diagnostics.pluginStatusTitle')}</FxCard.Title>

apps/box/src/screens/Diagnostics/__tests__/Diagnostics.test.tsx

@@ -96,6 +96,13 @@ describe('i18n strings present', () => {
         'diagnostics.phoneInternetChecking',
         'diagnostics.phoneInternetOk',
         'diagnostics.phoneInternetFailed',
+        'diagnostics.fulaNetworkTitle',
+        'diagnostics.discoveryChecking',
+        'diagnostics.discoveryOk',
+        'diagnostics.discoveryFailed',
+        'diagnostics.relaysChecking',
+        'diagnostics.relaysUnknown',
+        'diagnostics.relaysListLabel',
         'diagnostics.pluginStatusTitle',
         'diagnostics.pluginChecking',
         'diagnostics.pluginInstalled',