feat: defer mesh connection on first visit to avoid browser prompt

First-time visitors to the standalone PWA see a connect prompt instead
of Chrome's unexpected 'access device' permission. Returning users
(with localStorage flag) auto-connect immediately. Local server
deployments always auto-connect.

Author: Mearman

src/bridges/user/web/frontend/components/App.tsx

@@ -31,6 +31,7 @@ export interface AppProps {
   onJoinRoomInput: (roomName: string) => void;
   onRelayConnect: (urlA: string, urlB: string) => void;
   onRelayDisconnect: () => void;
+  onConnectToMesh: () => void;
 }
 
 export function App(props: AppProps) {
@@ -53,8 +54,10 @@ export function App(props: AppProps) {
         messages={props.messages}
         currentRoom={props.currentRoom}
         dmTarget={props.dmTarget}
+        connected={props.connected}
         onSendAction={props.onSendAction}
         onLeaveRoom={props.onLeaveRoom}
+        onConnectToMesh={props.onConnectToMesh}
       />
     </>
   );

src/bridges/user/web/frontend/components/ChatArea.tsx

@@ -12,16 +12,20 @@ interface ChatAreaProps {
   messages: DisplayMessage[];
   currentRoom: string | undefined;
   dmTarget: string | undefined;
+  connected: boolean;
   onSendAction: (text: string) => void;
   onLeaveRoom: () => void;
+  onConnectToMesh: () => void;
 }
 
 export function ChatArea({
   messages,
   currentRoom,
   dmTarget,
+  connected,
   onSendAction,
   onLeaveRoom,
+  onConnectToMesh,
 }: ChatAreaProps) {
   const [inputText, setInputText] = useState("");
 
@@ -61,6 +65,14 @@ export function ChatArea({
         )}
       </div>
       <MessageList messages={messages} />
+      {!connected && messages.length === 0 && (
+        <div class="connect-prompt">
+          <p>Connect to a local mesh to discover agents and rooms.</p>
+          <button class="connect-btn" onClick={onConnectToMesh}>
+            Connect to local mesh
+          </button>
+        </div>
+      )}
       <div id="input-bar">
         <input
           id="input"

src/bridges/user/web/frontend/main.tsx

@@ -16,6 +16,11 @@ import { MeshClient } from "./mesh-client.js";
 import { RelayClient } from "./relay-client.js";
 import type { Action, DisplayMessage, WsFrame } from "./types.js";
 import type { RelayStatus } from "./relay-client.js";
+
+/** Whether the page is served from a local mesh server (vs standalone PWA). */
+const isLocalServer = /^(localhost|127\.\d+\.\d+\.\d+)(:\d+)?$/.test(
+  location.host,
+);
 import { deliveryEventToMessage, roomMessageToDisplay } from "./messages.js";
 import { parseDeepLink, resolveDeepLink, syncUrl } from "./url-sync.js";
 
@@ -50,7 +55,10 @@ meshClient.subscribe((meshState) => {
   state.setConnected(meshState.connected);
 });
 
-meshClient.connect();
+// Don't auto-connect the MeshClient on first load.
+// The user must explicitly connect to avoid Chrome's "access device"
+// prompt appearing before the user understands the UI.
+// meshClient.connect() is called from onConnectToMesh().
 
 // ---------------------------------------------------------------------------
 // Relay client — P2P mesh relay
@@ -265,6 +273,11 @@ function rerender(): void {
       onRelayDisconnect={() => {
         relayClient.disconnect();
       }}
+      onConnectToMesh={() => {
+        localStorage.setItem("agent-comms-connected", "true");
+        meshClient.connect();
+        if (isLocalServer) ws.connect();
+      }}
     />,
     rootEl,
   );
@@ -278,14 +291,14 @@ state.subscribe(rerender);
 
 const deepLink = parseDeepLink(location.search);
 
-// Only connect the direct server WebSocket when served from localhost.
-// On GitHub Pages / standalone deployments, only MeshClient is used.
-/** Whether the page is served from a local mesh server (vs standalone PWA). */
-const isLocalServer = /^(localhost|127\.\d+\.\d+\.\d+)(:\d+)?$/.test(
-  location.host,
-);
-if (isLocalServer) {
-  ws.connect();
+// Auto-connect when served from local server, or when the user has connected before.
+// First-time visitors to the standalone PWA see a connect prompt instead of
+// Chrome's unexpected "access device" permission prompt.
+const hasConnectedBefore =
+  localStorage.getItem("agent-comms-connected") === "true";
+if (isLocalServer || hasConnectedBefore) {
+  meshClient.connect();
+  if (isLocalServer) ws.connect();
 }
 
 // Initial state fetch, then resolve any deep link from the URL

src/bridges/user/web/frontend/styles.css

@@ -507,3 +507,31 @@ body {
   color: var(--red);
   line-height: 1.4;
 }
+
+/* Connect prompt */
+.connect-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 32px;
+  text-align: center;
+  color: var(--dim);
+}
+.connect-prompt p {
+  margin: 0;
+}
+.connect-btn {
+  padding: 8px 20px;
+  border: 1px solid var(--accent);
+  background: transparent;
+  color: var(--accent);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.connect-btn:hover {
+  background: var(--accent);
+  color: var(--bg);
+}