From 9b8f1e348d7590213add7d5567402ddac1ecd1e5 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Thu, 5 Feb 2026 00:26:30 +0700
Subject: [PATCH] UX: emphasize connections; show grouped endpoints

---
 packages/app/src/app/settings.tsx              | 18 ++++++++++++++++--
 .../src/components/add-host-method-modal.tsx   |  8 ++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/app/settings.tsx b/packages/app/src/app/settings.tsx
index ab584b8b5..aee1d0fd9 100644
--- a/packages/app/src/app/settings.tsx
+++ b/packages/app/src/app/settings.tsx
@@ -120,6 +120,11 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     fontFamily: Fonts.mono,
   },
+  hostConnections: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontFamily: Fonts.mono,
+  },
   hostError: {
     color: theme.colors.palette.red[300],
     fontSize: theme.fontSize.xs,
@@ -662,7 +667,7 @@ export default function SettingsScreen() {
               style={styles.addButton}
               onPress={() => setIsAddHostMethodVisible(true)}
             >
-              <Text style={styles.addButtonText}>+ Add host</Text>
+              <Text style={styles.addButtonText}>+ Add connection</Text>
             </Pressable>
           </View>
 
@@ -1060,7 +1065,15 @@ function DaemonCard({
         ? "rgba(245, 158, 11, 0.1)"
         : statusTone === "error"
           ? "rgba(248, 113, 113, 0.1)"
-          : "rgba(161, 161, 170, 0.1)";
+      : "rgba(161, 161, 170, 0.1)";
+
+  const connectionsSummary = (() => {
+    const parts = daemon.connections.map((conn) => {
+      if (conn.type === "relay") return `relay:${conn.relayEndpoint}`;
+      return `direct:${conn.endpoint}`;
+    });
+    return parts.join(" • ");
+  })();
 
   return (
     <View style={styles.hostCard} testID={`daemon-card-${daemon.serverId}`}>
@@ -1097,6 +1110,7 @@ function DaemonCard({
             return "";
           })()}
         </Text>
+        {connectionsSummary ? <Text style={styles.hostConnections}>{connectionsSummary}</Text> : null}
         {connectionError ? <Text style={styles.hostError}>{connectionError}</Text> : null}
       </View>
       <View style={styles.hostActionsRow}>
diff --git a/packages/app/src/components/add-host-method-modal.tsx b/packages/app/src/components/add-host-method-modal.tsx
index 97bdf7114..c6a51638c 100644
--- a/packages/app/src/components/add-host-method-modal.tsx
+++ b/packages/app/src/components/add-host-method-modal.tsx
@@ -63,12 +63,12 @@ export function AddHostMethodModal({
   }, [onClose, onPasteLink]);
 
   return (
-    <AdaptiveModalSheet title="Add host" visible={visible} onClose={onClose} testID="add-host-method-modal">
+    <AdaptiveModalSheet title="Add connection" visible={visible} onClose={onClose} testID="add-host-method-modal">
       <Pressable style={styles.option} onPress={handleDirect} accessibilityLabel="Direct connection">
         <Link2 size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
           <Text style={styles.optionText}>Direct connection</Text>
-          <Text style={styles.optionSubtext}>Enter a host and port.</Text>
+          <Text style={styles.optionSubtext}>Local network or Tailscale (unencrypted).</Text>
         </View>
       </Pressable>
 
@@ -77,7 +77,7 @@ export function AddHostMethodModal({
           <QrCode size={18} color={theme.colors.foreground} />
           <View style={styles.optionBody}>
             <Text style={styles.optionText}>Scan QR code</Text>
-            <Text style={styles.optionSubtext}>Use your camera to pair.</Text>
+            <Text style={styles.optionSubtext}>Relay pairing (E2EE).</Text>
           </View>
         </Pressable>
       ) : null}
@@ -86,7 +86,7 @@ export function AddHostMethodModal({
         <ClipboardPaste size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
           <Text style={styles.optionText}>Paste pairing link</Text>
-          <Text style={styles.optionSubtext}>Works without a camera.</Text>
+          <Text style={styles.optionSubtext}>Relay pairing (E2EE).</Text>
         </View>
       </Pressable>
     </AdaptiveModalSheet>