@peers-app/peers-ui 0.20.3 → 0.20.5

package/src/screens/contacts/user-connect.tsx

@@ -1,77 +1,300 @@
+/**
+ * Connect-to-user screen: QR invite, link share, manual code entry, and trust confirmation.
+ */
+
 import {
+  copyToClipboard,
   Devices,
   formatConnectionCode,
   generateConfirmationHash,
   generateConnectionCode,
   getMe,
   getUserContext,
+  type IConnectedDeviceSummary,
   type IUser,
   type IUserConnectInfo,
+  rpcServerCalls,
   setUserTrustLevel,
   TrustLevel,
+  USER_CONNECT_IDLE_STATUS,
+  USER_CONNECT_TTL_MS,
+  type UserConnectErrorCode,
+  type UserConnectStatus,
   Users,
   userConnectCodeAnswer,
   userConnectCodeOffer,
   userConnectStatus,
 } from "@peers-app/peers-sdk";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import QRCode from "react-qr-code";
 import { mainContentPath } from "../../globals";
 import { useObservable } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import {
+  buildUserConnectInviteUrl,
+  buildUserConnectShareText,
+  captureUserConnectInviteFromLocation,
+  clearUserConnectPendingIntent,
+  normalizeUserConnectCode,
+  readUserConnectPendingIntent,
+} from "./user-connect-invite";
 
-type ConnectionMode = "select" | "initiate" | "respond";
-type ConnectionStatus = "idle" | "waiting" | "success" | "error";
+type ScreenPhase = "offer" | "manual" | "review" | "connecting" | "success" | "error" | "expired";
 
 interface ConnectionResult {
   remoteUser: IUser;
   confirmationHash: string;
 }
 
+interface LocalError {
+  code: UserConnectErrorCode;
+  detail?: string;
+}
+
+const ERROR_COPY: Record<UserConnectErrorCode, { title: string; body: string }> = {
+  "invalid-code": {
+    title: "That invite isn’t valid",
+    body: "Check the link or code and try again, or create a new invite.",
+  },
+  "no-route": {
+    title: "This device isn’t connected yet",
+    body: "Connect this device to the internet or another Peers device, then try again.",
+  },
+  "not-found-or-expired": {
+    title: "Invite not found or expired",
+    body: "Ask the other person to create a new invite, or enter a fresh code.",
+  },
+  "remote-not-waiting": {
+    title: "The other device stopped waiting",
+    body: "Ask them to open Connect again and create a new invite.",
+  },
+  canceled: {
+    title: "Connection canceled",
+    body: "You can create a new invite or enter another code whenever you’re ready.",
+  },
+  "protocol-error": {
+    title: "Something went wrong",
+    body: "Try again in a moment. If it keeps failing, create a new invite.",
+  },
+};
+
+function errorMessage(error: LocalError): { title: string; body: string } {
+  const base = ERROR_COPY[error.code];
+  if (error.code === "protocol-error" && error.detail) {
+    return { title: base.title, body: base.body };
+  }
+  return base;
+}
+
+function formatCountdown(remainingMs: number): string {
+  const clamped = Math.max(0, remainingMs);
+  const totalSeconds = Math.ceil(clamped / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+function canShare(): boolean {
+  return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+
+/**
+ * Polished Connect to user screen. Creating an invite is the default path;
+ * inbound links open a review state before connecting.
+ */
 export function UserConnect() {
-  const [mode, setMode] = useState<ConnectionMode>("select");
-  const [status, setStatus] = useState<ConnectionStatus>("idle");
-  const [connectionCode, setConnectionCode] = useState<string>("");
-  const [inputCode, setInputCode] = useState<string>("");
+  const [phase, setPhase] = useState<ScreenPhase>("offer");
+  const [connectionCode, setConnectionCode] = useState("");
+  const [inviteUrl, setInviteUrl] = useState("");
+  const [expiresAt, setExpiresAt] = useState<number | null>(null);
+  const [remainingMs, setRemainingMs] = useState(USER_CONNECT_TTL_MS);
+  const [inputCode, setInputCode] = useState("");
+  const [reviewCode, setReviewCode] = useState("");
   const [result, setResult] = useState<ConnectionResult | null>(null);
-  const [error, setError] = useState<string>("");
-  const [copied, setCopied] = useState(false);
-
-  // Subscribe to userConnectStatus from the device layer
+  const [localError, setLocalError] = useState<LocalError | null>(null);
+  const [feedback, setFeedback] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [hasRoute, setHasRoute] = useState<boolean | null>(null);
   const [connectStatus] = useObservable(userConnectStatus);
+  const [answerCode] = useObservable(userConnectCodeAnswer);
+  const completedRef = useRef(false);
+  const offerStartedRef = useRef(false);
+  const answerWasActiveRef = useRef(false);
+  const protocolActiveRef = useRef(false);
+  const ceremonyGenerationRef = useRef(0);
+
+  const clearCeremony = useCallback((options?: { preservePendingIntent?: boolean }) => {
+    ceremonyGenerationRef.current += 1;
+    completedRef.current = false;
+    answerWasActiveRef.current = false;
+    protocolActiveRef.current = false;
+    userConnectCodeOffer("");
+    userConnectCodeAnswer("");
+    userConnectStatus(USER_CONNECT_IDLE_STATUS);
+    if (!options?.preservePendingIntent) {
+      clearUserConnectPendingIntent();
+    }
+  }, []);
+
+  const startOffer = useCallback(() => {
+    completedRef.current = false;
+    clearCeremony();
+    const code = generateConnectionCode();
+    const formatted = formatConnectionCode(code.code);
+    setConnectionCode(formatted);
+    setInviteUrl(buildUserConnectInviteUrl(code.code));
+    setExpiresAt(Date.now() + USER_CONNECT_TTL_MS);
+    setRemainingMs(USER_CONNECT_TTL_MS);
+    setLocalError(null);
+    setResult(null);
+    setFeedback("");
+    setSubmitting(false);
+    setPhase("offer");
+    userConnectCodeOffer(code.code);
+  }, [clearCeremony]);
+
+  const showError = useCallback((error: LocalError) => {
+    answerWasActiveRef.current = false;
+    protocolActiveRef.current = false;
+    setLocalError(error);
+    setSubmitting(false);
+    setPhase("error");
+  }, []);
+
+  const applyPendingInvite = useCallback((): boolean => {
+    const pending = readUserConnectPendingIntent();
+    if (!pending.ok && pending.reason === "none") {
+      return false;
+    }
+
+    clearCeremony({ preservePendingIntent: true });
+    offerStartedRef.current = true;
+    setConnectionCode("");
+    setInviteUrl("");
+    setExpiresAt(null);
+    setLocalError(null);
+    setResult(null);
+    setFeedback("");
+    setSubmitting(false);
+
+    if (!pending.ok && pending.reason === "invalid") {
+      setReviewCode("");
+      setInputCode("");
+      setLocalError({ code: "invalid-code" });
+      setPhase("error");
+      return true;
+    }
+    if (!pending.ok && pending.reason === "expired") {
+      setReviewCode("");
+      setInputCode("");
+      setPhase("expired");
+      return true;
+    }
+
+    if (pending.ok) {
+      const formatted = formatConnectionCode(pending.intent.code);
+      setReviewCode(formatted);
+      setInputCode(formatted);
+      setPhase("review");
+    }
+    return true;
+  }, [clearCeremony]);
+
+  const refreshRouteStatus = useCallback(async () => {
+    try {
+      const devices: IConnectedDeviceSummary[] = await rpcServerCalls.listConnectedDevices();
+      setHasRoute(devices.length > 0);
+    } catch {
+      // If the RPC is unavailable, do not block entry — route may appear shortly.
+      setHasRoute(null);
+    }
+  }, []);
+
+  // Capture inbound intent once on mount; otherwise auto-start an offer.
+  useEffect(() => {
+    if (applyPendingInvite()) {
+      return;
+    }
+    if (!offerStartedRef.current) {
+      offerStartedRef.current = true;
+      startOffer();
+    }
+  }, [applyPendingInvite, startOffer]);
 
-  const handleConnectStatusChange = useCallback(
-    async (connectStatusValue: string) => {
-      if (!connectStatusValue || status === "success") return;
+  // A second invite can arrive while this screen is already mounted.
+  useEffect(() => {
+    const captureInboundInvite = () => {
+      const path = window.location.hash.slice(1).split("?")[0];
+      if (path !== "contacts/connect") {
+        return;
+      }
+      const captured = captureUserConnectInviteFromLocation();
+      if (captured.ok || captured.reason !== "none") {
+        applyPendingInvite();
+      }
+    };
+    window.addEventListener("hashchange", captureInboundInvite);
+    return () => window.removeEventListener("hashchange", captureInboundInvite);
+  }, [applyPendingInvite]);
 
-      if (connectStatusValue.startsWith("Error:")) {
-        // Error status
-        setError(connectStatusValue.replace("Error: ", ""));
-        setStatus("error");
-      } else if (connectStatusValue.length > 0) {
-        // Success - connectStatus is the remote userId
-        const remoteUserId = connectStatusValue;
+  useEffect(() => {
+    void refreshRouteStatus();
+  }, [refreshRouteStatus]);
 
+  // Countdown while an offer is active.
+  useEffect(() => {
+    if (phase !== "offer" || expiresAt === null) {
+      return;
+    }
+    const tick = () => {
+      const remaining = expiresAt - Date.now();
+      setRemainingMs(remaining);
+      if (remaining <= 0) {
+        clearCeremony();
+        setPhase("expired");
+      }
+    };
+    tick();
+    const id = window.setInterval(tick, 1000);
+    return () => window.clearInterval(id);
+  }, [phase, expiresAt, clearCeremony]);
+
+  const handleProtocolStatus = useCallback(
+    async (status: UserConnectStatus | undefined) => {
+      if (!status || completedRef.current) {
+        return;
+      }
+      if (status.kind === "connecting") {
+        protocolActiveRef.current = true;
+        return;
+      }
+      if (status.kind === "connected") {
+        const generation = ceremonyGenerationRef.current;
+        completedRef.current = true;
         try {
           const userContext = await getUserContext();
           const me = await getMe();
-          const remoteUser = await Users(userContext.userDataContext).get(remoteUserId);
-
+          const remoteUser = await Users(userContext.userDataContext).get(status.remoteUserId);
+          if (generation !== ceremonyGenerationRef.current) {
+            return;
+          }
           if (!remoteUser) {
-            setError("Could not find connected user");
-            setStatus("error");
+            showError({ code: "protocol-error", detail: "Could not find connected user" });
+            return;
+          }
+          const remoteDevice = await Devices(userContext.userDataContext).get(
+            status.remoteDeviceId,
+          );
+          if (generation !== ceremonyGenerationRef.current) {
             return;
           }
-
-          const remoteDevice = await Devices(userContext.userDataContext).findOne({
-            userId: remoteUserId,
-          });
           if (!remoteDevice) {
-            setError("Could not find connected device but connection was successful");
-            setStatus("error");
+            showError({
+              code: "protocol-error",
+              detail: "Could not find connected device",
+            });
             return;
           }
-
-          // Build user connect info for confirmation hash
           const myInfo: IUserConnectInfo = {
             userId: me.userId,
             publicKey: me.publicKey,
@@ -84,363 +307,565 @@ export function UserConnect() {
             publicBoxKey: remoteUser.publicBoxKey,
             deviceId: remoteDevice.deviceId,
           };
-
-          const confirmationHash = generateConfirmationHash(myInfo, remoteInfo);
-
-          setResult({ remoteUser, confirmationHash });
-          setStatus("success");
-
-          // Clear the codes
+          setResult({
+            remoteUser,
+            confirmationHash: generateConfirmationHash(myInfo, remoteInfo),
+          });
+          clearUserConnectPendingIntent();
           userConnectCodeOffer("");
           userConnectCodeAnswer("");
+          setSubmitting(false);
+          setPhase("success");
         } catch (err: unknown) {
-          setError(err instanceof Error ? err.message : String(err));
-          setStatus("error");
+          if (generation !== ceremonyGenerationRef.current) {
+            return;
+          }
+          showError({
+            code: "protocol-error",
+            detail: err instanceof Error ? err.message : String(err),
+          });
         }
+        return;
+      }
+      if (status.kind === "error") {
+        showError({ code: status.code, detail: status.detail });
       }
     },
-    [status],
+    [showError],
   );
 
-  // Also set up a direct subscription after loading is complete
   useEffect(() => {
-    let disposed = false;
-    let subscription: { dispose: () => void } | undefined;
-
-    userConnectStatus.loadingPromise.then(() => {
-      if (disposed) return;
-      subscription = userConnectStatus.subscribe(() => {
-        // Force a re-render by checking the current value
-        const currentStatus = userConnectStatus();
-        if (currentStatus && typeof currentStatus === "string") {
-          handleConnectStatusChange(currentStatus);
-        }
-      });
-    });
-
-    return () => {
-      disposed = true;
-      subscription?.dispose();
-    };
-  }, [handleConnectStatusChange]);
+    void handleProtocolStatus(connectStatus as UserConnectStatus | undefined);
+  }, [connectStatus, handleProtocolStatus]);
 
-  // React to userConnectStatus changes from useObservable
   useEffect(() => {
-    if (connectStatus && typeof connectStatus === "string") {
-      handleConnectStatusChange(connectStatus);
+    if (
+      phase !== "connecting" ||
+      !connectStatus ||
+      connectStatus.kind !== "idle" ||
+      (answerCode && !protocolActiveRef.current) ||
+      (!answerCode && !answerWasActiveRef.current)
+    ) {
+      return;
     }
-  }, [connectStatus, handleConnectStatusChange]);
 
-  // Clean up on unmount
+    // Terminal handlers publish error/connected immediately after clearing the
+    // answer. Defer idle recovery one turn so those statuses win.
+    const timeout = window.setTimeout(() => {
+      const latestStatus = userConnectStatus();
+      const latestAnswer = userConnectCodeAnswer();
+      if (latestStatus.kind !== "idle") {
+        return;
+      }
+      if (latestAnswer) {
+        if (protocolActiveRef.current) {
+          clearCeremony();
+          showError({ code: "canceled" });
+        }
+        return;
+      }
+      if (answerWasActiveRef.current) {
+        clearCeremony();
+        setSubmitting(false);
+        setPhase("expired");
+      }
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [answerCode, clearCeremony, connectStatus, phase, showError]);
+
   useEffect(() => {
     return () => {
-      if (mode === "initiate" && status === "waiting") {
-        userConnectCodeOffer("");
-        userConnectCodeAnswer("");
+      // Leaving the screen cancels an in-flight offer/answer.
+      userConnectCodeOffer("");
+      userConnectCodeAnswer("");
+      userConnectStatus(USER_CONNECT_IDLE_STATUS);
+      const path = window.location.hash.slice(1).split("?")[0];
+      if (path !== "contacts/connect") {
+        clearUserConnectPendingIntent();
       }
     };
-  }, [mode, status]);
-
-  const handleInitiate = useCallback(async () => {
-    setMode("initiate");
-    setStatus("waiting");
-    setError("");
-    userConnectStatus(""); // Clear any previous status
-
-    // Generate the connection code
-    const code = generateConnectionCode();
-    userConnectCodeOffer(code.code);
-    const formattedCode = formatConnectionCode(code.code);
-    setConnectionCode(formattedCode);
   }, []);
 
-  const handleRespond = useCallback(async () => {
-    if (inputCode.replace(/[^0-9A-Za-z]/g, "").length !== 12) {
-      setError("Please enter a valid 12-character connection code");
+  const handleConfirmReview = useCallback(async () => {
+    if (submitting) return;
+    const pending = readUserConnectPendingIntent();
+    if (!pending.ok) {
+      if (pending.reason === "invalid" || pending.reason === "expired") {
+        applyPendingInvite();
+      } else {
+        showError({ code: "canceled" });
+      }
       return;
     }
+    const normalized = normalizeUserConnectCode(reviewCode);
+    if (!normalized || normalized !== pending.intent.code) {
+      showError({ code: "invalid-code" });
+      return;
+    }
+    ceremonyGenerationRef.current += 1;
+    completedRef.current = false;
+    answerWasActiveRef.current = true;
+    protocolActiveRef.current = false;
+    setSubmitting(true);
+    setPhase("connecting");
+    setLocalError(null);
+    clearUserConnectPendingIntent();
+    userConnectStatus(USER_CONNECT_IDLE_STATUS);
+    userConnectCodeAnswer(normalized);
+  }, [applyPendingInvite, reviewCode, showError, submitting]);
+
+  const handleManualConnect = useCallback(async () => {
+    if (submitting) return;
+    const normalized = normalizeUserConnectCode(inputCode);
+    if (!normalized) {
+      setLocalError({ code: "invalid-code" });
+      return;
+    }
+    ceremonyGenerationRef.current += 1;
+    completedRef.current = false;
+    answerWasActiveRef.current = true;
+    protocolActiveRef.current = false;
+    setSubmitting(true);
+    setPhase("connecting");
+    setLocalError(null);
+    clearUserConnectPendingIntent();
+    userConnectStatus(USER_CONNECT_IDLE_STATUS);
+    userConnectCodeAnswer(normalized);
+  }, [inputCode, submitting]);
+
+  const handleCancel = useCallback(() => {
+    clearCeremony();
+    setSubmitting(false);
+    setLocalError(null);
+    setResult(null);
+    mainContentPath("contacts");
+  }, [clearCeremony]);
 
-    setStatus("waiting");
-    setError("");
-    userConnectStatus(""); // Clear any previous status
-    userConnectCodeAnswer(inputCode);
-  }, [inputCode]);
-
-  const handleCancel = useCallback(async () => {
-    userConnectCodeOffer("");
-    userConnectCodeAnswer("");
-    userConnectStatus("");
-    setMode("select");
-    setStatus("idle");
-    setConnectionCode("");
-    setError("");
-  }, []);
-
-  const handleReset = useCallback(() => {
-    userConnectCodeOffer("");
-    userConnectCodeAnswer("");
-    userConnectStatus("");
-    setMode("select");
-    setStatus("idle");
-    setConnectionCode("");
+  const handleEnterManual = useCallback(() => {
+    clearCeremony();
+    setSubmitting(false);
+    setLocalError(null);
     setInputCode("");
-    setResult(null);
-    setError("");
-    setCopied(false);
-  }, []);
+    setPhase("manual");
+  }, [clearCeremony]);
+
+  const handleCopyLink = useCallback(async () => {
+    if (!inviteUrl) return;
+    const ok = await copyToClipboard(inviteUrl);
+    setFeedback(ok ? "Link copied" : "Could not copy link");
+    window.setTimeout(() => setFeedback(""), 2000);
+  }, [inviteUrl]);
+
+  const handleShareLink = useCallback(async () => {
+    if (!inviteUrl || !canShare()) {
+      await handleCopyLink();
+      return;
+    }
+    try {
+      await navigator.share({
+        title: "Connect on Peers",
+        text: buildUserConnectShareText(inviteUrl),
+        url: inviteUrl,
+      });
+      setFeedback("Share sheet opened");
+      window.setTimeout(() => setFeedback(""), 2000);
+    } catch (err: unknown) {
+      // User cancel is neutral.
+      if (err instanceof DOMException && err.name === "AbortError") {
+        return;
+      }
+      await handleCopyLink();
+    }
+  }, [handleCopyLink, inviteUrl]);
 
-  const handleSaveContact = useCallback(async () => {
+  const handleTrustAndView = useCallback(async () => {
     if (!result) return;
-
     try {
       const userContext = await getUserContext();
-
-      // Contact is already saved by the device layer, just set trust level
       await setUserTrustLevel(
         result.remoteUser.userId,
         TrustLevel.Trusted,
         userContext.userDataContext,
       );
-
-      // Navigate to contact details
+      clearCeremony();
       mainContentPath(`contacts/${result.remoteUser.userId}`);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err));
+      showError({
+        code: "protocol-error",
+        detail: err instanceof Error ? err.message : String(err),
+      });
     }
-  }, [result]);
+  }, [clearCeremony, result, showError]);
 
-  // Copy connection code to clipboard
-  const handleCopyCode = useCallback(async () => {
-    if (!connectionCode) return;
-    try {
-      await navigator.clipboard.writeText(connectionCode);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (_err) {
-      // Fallback for older browsers
-      const textArea = document.createElement("textarea");
-      textArea.value = connectionCode;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textArea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [connectionCode]);
+  const handleViewWithoutTrust = useCallback(() => {
+    if (!result) return;
+    clearCeremony();
+    mainContentPath(`contacts/${result.remoteUser.userId}`);
+  }, [clearCeremony, result]);
 
-  // Format input code as user types
   const handleCodeInput = (value: string) => {
-    // Remove non-alphanumeric characters
     const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, "");
-
-    // Format as XXXX-YYYY-ZZZZ
     let formatted = "";
     for (let i = 0; i < cleaned.length && i < 12; i++) {
       if (i === 4 || i === 8) formatted += "-";
       formatted += cleaned[i];
     }
-
     setInputCode(formatted);
+    setLocalError(null);
   };
 
   return (
     <div className="container-fluid p-3">
-      <div className="d-flex justify-content-between align-items-center mb-4">
-        <h4>
-          <i className="bi-person-plus-fill me-2" />
-          Connect to New User
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h4 className="mb-0">
+          <i className="bi-person-plus-fill me-2" aria-hidden="true" />
+          Connect to user
         </h4>
-        {mode !== "select" && (
-          <button className="btn btn-outline-secondary btn-sm" onClick={handleReset}>
-            <i className="bi-arrow-left me-1" />
+        {phase !== "offer" && phase !== "success" && (
+          <button type="button" className="btn btn-outline-secondary btn-sm" onClick={handleCancel}>
+            <i className="bi-arrow-left me-1" aria-hidden="true" />
             Back
           </button>
         )}
       </div>
 
-      {/* Mode Selection */}
-      {mode === "select" && (
-        <div className="row g-3">
-          <div className="col-md-6">
-            <div
-              className="card h-100 border-primary"
-              style={{ cursor: "pointer" }}
-              onClick={handleInitiate}
-            >
-              <div className="card-body text-center p-4">
-                <i className="bi-qr-code display-4 text-primary mb-3" />
-                <h5 className="card-title">Create Connection Code</h5>
-                <p className="card-text text-muted">
-                  Generate a code to share with someone who wants to connect with you
-                </p>
-              </div>
+      {hasRoute === false && phase !== "success" && (
+        <div className="alert alert-warning" role="status">
+          <div className="d-flex justify-content-between align-items-start gap-2 flex-wrap">
+            <div>
+              This device isn’t connected to the internet or another Peers device yet. You can still
+              prepare an invite; connection will work once a route appears.
             </div>
-          </div>
-          <div className="col-md-6">
-            <div
-              className="card h-100 border-success"
-              style={{ cursor: "pointer" }}
-              onClick={() => setMode("respond")}
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-warning"
+              onClick={() => void refreshRouteStatus()}
             >
-              <div className="card-body text-center p-4">
-                <i className="bi-keyboard display-4 text-success mb-3" />
-                <h5 className="card-title">Enter Connection Code</h5>
-                <p className="card-text text-muted">
-                  Enter a code that someone shared with you to connect
-                </p>
-              </div>
-            </div>
+              Check again
+            </button>
           </div>
         </div>
       )}
 
-      {/* Initiate Mode - Show Generated Code */}
-      {mode === "initiate" && status === "waiting" && (
-        <div className="text-center">
-          <div className="mb-4">
-            <p className="text-muted">Share this code with the person you want to connect with:</p>
-          </div>
-
-          <div className="mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
-            <div className="input-group">
-              <input
-                type="text"
-                className="form-control form-control-lg text-center font-monospace"
-                value={connectionCode || "XXXX-YYYY-ZZZZ"}
-                readOnly
-                style={{ letterSpacing: "0.15em", fontSize: "1.5rem" }}
-              />
-              <button
-                className="btn btn-outline-primary"
-                onClick={handleCopyCode}
-                title="Copy to clipboard"
-              >
-                <i className={copied ? "bi-check-lg" : "bi-clipboard"} />
-              </button>
-            </div>
-            {copied && <small className="text-success mt-1 d-block">Copied!</small>}
-          </div>
+      <div aria-live="polite" className="visually-hidden">
+        {feedback}
+      </div>
 
-          <div className="mb-4">
-            <div className="spinner-border spinner-border-sm text-primary me-2" role="status" />
-            <span className="text-muted">Waiting for connection...</span>
-          </div>
+      {phase === "offer" && (
+        <OfferPanel
+          connectionCode={connectionCode}
+          inviteUrl={inviteUrl}
+          remainingMs={remainingMs}
+          feedback={feedback}
+          onShare={() => void handleShareLink()}
+          onCopy={() => void handleCopyLink()}
+          onEnterManual={handleEnterManual}
+          onCancel={handleCancel}
+        />
+      )}
 
-          <p className="text-muted small">This code will expire in 10 minutes</p>
+      {phase === "manual" && (
+        <ManualEntryPanel
+          inputCode={inputCode}
+          localError={localError}
+          submitting={submitting}
+          onChange={handleCodeInput}
+          onConnect={() => void handleManualConnect()}
+        />
+      )}
 
-          <button className="btn btn-outline-secondary" onClick={handleCancel}>
-            Cancel
-          </button>
-        </div>
+      {phase === "review" && (
+        <ReviewPanel
+          reviewCode={reviewCode}
+          submitting={submitting}
+          onConfirm={() => void handleConfirmReview()}
+          onEnterManual={handleEnterManual}
+        />
       )}
 
-      {/* Respond Mode - Enter Code */}
-      {mode === "respond" && status !== "success" && (
-        <div className="text-center">
-          <div className="mb-4">
-            <p className="text-muted">Enter the connection code shared with you:</p>
-          </div>
+      {phase === "connecting" && <ConnectingPanel />}
 
-          <div className="mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
-            <input
-              type="text"
-              className="form-control form-control-lg text-center font-monospace"
-              placeholder="XXXX-YYYY-ZZZZ"
-              value={inputCode}
-              onChange={(e) => handleCodeInput(e.target.value)}
-              maxLength={14}
-              style={{ letterSpacing: "0.15em", fontSize: "1.5rem" }}
-            />
-          </div>
+      {phase === "success" && result && (
+        <SuccessPanel
+          result={result}
+          onTrust={() => void handleTrustAndView()}
+          onViewWithoutTrust={handleViewWithoutTrust}
+        />
+      )}
 
-          {error && (
-            <div
-              className="alert alert-danger"
-              style={{ maxWidth: "400px", margin: "0 auto 1rem" }}
-            >
-              {error}
-            </div>
-          )}
-
-          <button
-            className="btn btn-primary btn-lg"
-            onClick={handleRespond}
-            disabled={status === "waiting" || inputCode.replace(/[^0-9A-Z]/gi, "").length !== 12}
-          >
-            {status === "waiting" ? (
-              <>
-                <span className="spinner-border spinner-border-sm me-2" role="status" />
-                Connecting...
-              </>
-            ) : (
-              <>
-                <i className="bi-link-45deg me-2" />
-                Connect
-              </>
-            )}
-          </button>
-        </div>
+      {phase === "error" && localError && (
+        <ErrorPanel error={localError} onNewInvite={startOffer} onEnterCode={handleEnterManual} />
       )}
 
-      {/* Success State */}
-      {status === "success" && result && (
-        <div className="text-center">
-          <div className="mb-4">
-            <i className="bi-check-circle-fill text-success display-3" />
-          </div>
+      {phase === "expired" && (
+        <ExpiredPanel onNewInvite={startOffer} onEnterCode={handleEnterManual} />
+      )}
+    </div>
+  );
+}
 
-          <h5 className="mb-4">Connection Successful!</h5>
+function OfferPanel(props: {
+  connectionCode: string;
+  inviteUrl: string;
+  remainingMs: number;
+  feedback: string;
+  onShare: () => void;
+  onCopy: () => void;
+  onEnterManual: () => void;
+  onCancel: () => void;
+}) {
+  const shareAvailable = canShare();
+  return (
+    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
+      <p className="text-muted mb-3">Ask the other person to scan this with their camera</p>
+
+      <div
+        className="d-inline-block p-3 mb-3 rounded"
+        style={{ background: "#ffffff" }}
+        aria-label="Connection QR code"
+      >
+        {props.inviteUrl ? (
+          <QRCode
+            value={props.inviteUrl}
+            size={220}
+            bgColor="#FFFFFF"
+            fgColor="#000000"
+            style={{ height: "auto", maxWidth: "100%", width: "min(70vw, 220px)" }}
+            viewBox="0 0 256 256"
+          />
+        ) : (
+          <div
+            className="spinner-border text-primary"
+            role="status"
+            aria-label="Preparing invite"
+          />
+        )}
+      </div>
 
-          <div className="card mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
-            <div className="card-body">
-              <p className="text-muted mb-2">Verify with the other person that you both see:</p>
-              <h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: "0.2em" }}>
-                {result.confirmationHash}
-              </h3>
+      <div className="mb-2">
+        <span className="spinner-border spinner-border-sm text-primary me-2" role="status" />
+        <span className="text-muted">Waiting for connection…</span>
+      </div>
+      <p className="text-muted small mb-3" aria-live="polite">
+        Expires in {formatCountdown(props.remainingMs)}
+      </p>
+
+      <div className="d-grid gap-2 mb-3">
+        {shareAvailable ? (
+          <button type="button" className="btn btn-primary" onClick={props.onShare}>
+            <i className="bi-share me-2" aria-hidden="true" />
+            Share link
+          </button>
+        ) : null}
+        <button type="button" className="btn btn-outline-primary" onClick={props.onCopy}>
+          <i className="bi-clipboard me-2" aria-hidden="true" />
+          Copy link
+        </button>
+        {props.feedback ? <small className="text-success">{props.feedback}</small> : null}
+      </div>
 
-              <hr />
+      <div className="mb-3">
+        <label className="form-label small text-muted mb-1" htmlFor="user-connect-fallback-code">
+          Or share this code
+        </label>
+        <input
+          id="user-connect-fallback-code"
+          type="text"
+          className="form-control form-control-lg text-center font-monospace"
+          value={props.connectionCode}
+          readOnly
+          aria-label="Connection code"
+        />
+      </div>
 
-              <div className="text-start">
-                <small className="text-muted">Name:</small>
-                <p className="mb-2">{result.remoteUser.name}</p>
+      <div className="d-flex gap-2 justify-content-center flex-wrap">
+        <button type="button" className="btn btn-link" onClick={props.onEnterManual}>
+          Enter a code instead
+        </button>
+        <button type="button" className="btn btn-outline-secondary" onClick={props.onCancel}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
 
-                <small className="text-muted">User ID:</small>
-                <p className="font-monospace small mb-0">{result.remoteUser.userId}</p>
-              </div>
-            </div>
-          </div>
+function ManualEntryPanel(props: {
+  inputCode: string;
+  localError: LocalError | null;
+  submitting: boolean;
+  onChange: (value: string) => void;
+  onConnect: () => void;
+}) {
+  const ready = props.inputCode.replace(/[^0-9A-Z]/gi, "").length === 12;
+  return (
+    <div className="text-center" style={{ maxWidth: 400, margin: "0 auto" }}>
+      <p className="text-muted mb-3">Enter the connection code shared with you</p>
+      <input
+        type="text"
+        className="form-control form-control-lg text-center font-monospace mb-3"
+        placeholder="XXXX-YYYY-ZZZZ"
+        value={props.inputCode}
+        onChange={(e) => props.onChange(e.target.value)}
+        maxLength={14}
+        aria-label="Connection code"
+        autoComplete="off"
+      />
+      {props.localError ? (
+        <div className="alert alert-danger">{errorMessage(props.localError).body}</div>
+      ) : null}
+      <button
+        type="button"
+        className="btn btn-primary btn-lg"
+        onClick={props.onConnect}
+        disabled={props.submitting || !ready}
+      >
+        {props.submitting ? (
+          <>
+            <span className="spinner-border spinner-border-sm me-2" role="status" />
+            Connecting…
+          </>
+        ) : (
+          <>
+            <i className="bi-link-45deg me-2" aria-hidden="true" />
+            Connect
+          </>
+        )}
+      </button>
+    </div>
+  );
+}
 
-          <div className="d-flex gap-2 justify-content-center">
-            <button className="btn btn-primary" onClick={handleSaveContact}>
-              <i className="bi-check-lg me-2" />
-              Trust & View Contact
-            </button>
-            <button className="btn btn-outline-secondary" onClick={handleReset}>
-              Connect Another
-            </button>
-          </div>
-        </div>
-      )}
+function ReviewPanel(props: {
+  reviewCode: string;
+  submitting: boolean;
+  onConfirm: () => void;
+  onEnterManual: () => void;
+}) {
+  return (
+    <div className="text-center" style={{ maxWidth: 400, margin: "0 auto" }}>
+      <p className="text-muted mb-2">You opened a connection invite</p>
+      <p className="font-monospace fs-4 mb-3">{props.reviewCode}</p>
+      <p className="text-muted small mb-4">
+        Both of you need Peers open. Confirm to connect with the person who shared this invite.
+      </p>
+      <button
+        type="button"
+        className="btn btn-primary btn-lg mb-2"
+        onClick={props.onConfirm}
+        disabled={props.submitting}
+      >
+        {props.submitting ? (
+          <>
+            <span className="spinner-border spinner-border-sm me-2" role="status" />
+            Connecting…
+          </>
+        ) : (
+          "Connect"
+        )}
+      </button>
+      <div>
+        <button type="button" className="btn btn-link" onClick={props.onEnterManual}>
+          Enter a different code
+        </button>
+      </div>
+    </div>
+  );
+}
 
-      {/* Error State */}
-      {status === "error" && (
-        <div className="text-center">
-          <div className="mb-4">
-            <i className="bi-x-circle-fill text-danger display-3" />
-          </div>
+function ConnectingPanel() {
+  return (
+    <div className="text-center py-5">
+      <div className="spinner-border text-primary mb-3" role="status" aria-label="Connecting" />
+      <p className="text-muted mb-0">Connecting…</p>
+    </div>
+  );
+}
 
-          <h5 className="mb-4">Connection Failed</h5>
+function SuccessPanel(props: {
+  result: ConnectionResult;
+  onTrust: () => void;
+  onViewWithoutTrust: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  return (
+    <div className="text-center" style={{ maxWidth: 420, margin: "0 auto" }}>
+      <i className="bi-check-circle-fill text-success display-3 mb-3" aria-hidden="true" />
+      <h5 className="mb-3">Connected</h5>
+      <p className="text-muted mb-2">Verify with the other person that you both see:</p>
+      <h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: "0.15em" }}>
+        {props.result.confirmationHash}
+      </h3>
+      <p className="mb-1">
+        <span className="text-muted">Name: </span>
+        {props.result.remoteUser.name || "Unnamed"}
+      </p>
+      <button
+        type="button"
+        className="btn btn-link btn-sm mb-3"
+        onClick={() => setShowDetails((v) => !v)}
+        aria-expanded={showDetails}
+      >
+        {showDetails ? "Hide details" : "Show details"}
+      </button>
+      {showDetails ? (
+        <p className="font-monospace small text-muted mb-3">{props.result.remoteUser.userId}</p>
+      ) : null}
+      <div className="d-grid gap-2">
+        <button type="button" className="btn btn-primary" onClick={props.onTrust}>
+          Trust and view contact
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-secondary"
+          onClick={props.onViewWithoutTrust}
+        >
+          View without trusting
+        </button>
+      </div>
+    </div>
+  );
+}
 
-          <div className="alert alert-danger" style={{ maxWidth: "400px", margin: "0 auto 1rem" }}>
-            {error}
-          </div>
+function ErrorPanel(props: {
+  error: LocalError;
+  onNewInvite: () => void;
+  onEnterCode: () => void;
+}) {
+  const copy = errorMessage(props.error);
+  return (
+    <div className="text-center" style={{ maxWidth: 420, margin: "0 auto" }}>
+      <i className="bi-x-circle-fill text-danger display-3 mb-3" aria-hidden="true" />
+      <h5 className="mb-2">{copy.title}</h5>
+      <p className="text-muted mb-4">{copy.body}</p>
+      <div className="d-flex gap-2 justify-content-center flex-wrap">
+        <button type="button" className="btn btn-primary" onClick={props.onNewInvite}>
+          Create a new invite
+        </button>
+        <button type="button" className="btn btn-outline-secondary" onClick={props.onEnterCode}>
+          Enter another code
+        </button>
+      </div>
+    </div>
+  );
+}
 
-          <button className="btn btn-primary" onClick={handleReset}>
-            Try Again
-          </button>
-        </div>
-      )}
+function ExpiredPanel(props: { onNewInvite: () => void; onEnterCode: () => void }) {
+  return (
+    <div className="text-center" style={{ maxWidth: 420, margin: "0 auto" }}>
+      <i className="bi-hourglass-bottom text-warning display-3 mb-3" aria-hidden="true" />
+      <h5 className="mb-2">Invite expired</h5>
+      <p className="text-muted mb-4">
+        Create a new invite or enter a fresh code from the other person.
+      </p>
+      <div className="d-flex gap-2 justify-content-center flex-wrap">
+        <button type="button" className="btn btn-primary" onClick={props.onNewInvite}>
+          Create a new invite
+        </button>
+        <button type="button" className="btn btn-outline-secondary" onClick={props.onEnterCode}>
+          Enter another code
+        </button>
+      </div>
     </div>
   );
 }