@peers-app/peers-ui 0.23.13 → 0.24.0

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

@@ -1,883 +0,0 @@
-/**
- * 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, 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 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 [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 [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]);
-
-  // 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]);
-
-  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(status.remoteUserId);
-          if (generation !== ceremonyGenerationRef.current) {
-            return;
-          }
-          if (!remoteUser) {
-            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;
-          }
-          if (!remoteDevice) {
-            showError({
-              code: "protocol-error",
-              detail: "Could not find connected device",
-            });
-            return;
-          }
-          const myInfo: IUserConnectInfo = {
-            userId: me.userId,
-            publicKey: me.publicKey,
-            publicBoxKey: me.publicBoxKey,
-            deviceId: userContext.deviceId(),
-          };
-          const remoteInfo: IUserConnectInfo = {
-            userId: remoteUser.userId,
-            publicKey: remoteUser.publicKey,
-            publicBoxKey: remoteUser.publicBoxKey,
-            deviceId: remoteDevice.deviceId,
-          };
-          setResult({
-            remoteUser,
-            confirmationHash: generateConfirmationHash(myInfo, remoteInfo),
-          });
-          clearUserConnectPendingIntent();
-          userConnectCodeOffer("");
-          userConnectCodeAnswer("");
-          setSubmitting(false);
-          setPhase("success");
-        } catch (err: unknown) {
-          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 });
-      }
-    },
-    [showError],
-  );
-
-  useEffect(() => {
-    void handleProtocolStatus(connectStatus as UserConnectStatus | undefined);
-  }, [connectStatus, handleProtocolStatus]);
-
-  useEffect(() => {
-    if (
-      phase !== "connecting" ||
-      !connectStatus ||
-      connectStatus.kind !== "idle" ||
-      (answerCode && !protocolActiveRef.current) ||
-      (!answerCode && !answerWasActiveRef.current)
-    ) {
-      return;
-    }
-
-    // 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 () => {
-      // 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();
-      }
-    };
-  }, []);
-
-  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]);
-
-  const handleEnterManual = useCallback(() => {
-    clearCeremony();
-    setSubmitting(false);
-    setLocalError(null);
-    setInputCode("");
-    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 handleTrustAndView = useCallback(async () => {
-    if (!result) return;
-    try {
-      const userContext = await getUserContext();
-      await setUserTrustLevel(
-        result.remoteUser.userId,
-        TrustLevel.Trusted,
-        userContext.userDataContext,
-      );
-      clearCeremony();
-      mainContentPath(`contacts/${result.remoteUser.userId}`);
-    } catch (err: unknown) {
-      showError({
-        code: "protocol-error",
-        detail: err instanceof Error ? err.message : String(err),
-      });
-    }
-  }, [clearCeremony, result, showError]);
-
-  const handleViewWithoutTrust = useCallback(() => {
-    if (!result) return;
-    clearCeremony();
-    mainContentPath(`contacts/${result.remoteUser.userId}`);
-  }, [clearCeremony, result]);
-
-  const handleCodeInput = (value: string) => {
-    const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, "");
-    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-3">
-        <h4 className="mb-0">
-          <i className="bi-person-plus-fill me-2" aria-hidden="true" />
-          Connect to user
-        </h4>
-        {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>
-
-      {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>
-            <button
-              type="button"
-              className="btn btn-sm btn-outline-warning"
-              onClick={() => void refreshRouteStatus()}
-            >
-              Check again
-            </button>
-          </div>
-        </div>
-      )}
-
-      <div aria-live="polite" className="visually-hidden">
-        {feedback}
-      </div>
-
-      {phase === "offer" && (
-        <OfferPanel
-          connectionCode={connectionCode}
-          inviteUrl={inviteUrl}
-          remainingMs={remainingMs}
-          feedback={feedback}
-          onShare={() => void handleShareLink()}
-          onCopy={() => void handleCopyLink()}
-          onEnterManual={handleEnterManual}
-          onCancel={handleCancel}
-        />
-      )}
-
-      {phase === "manual" && (
-        <ManualEntryPanel
-          inputCode={inputCode}
-          localError={localError}
-          submitting={submitting}
-          onChange={handleCodeInput}
-          onConnect={() => void handleManualConnect()}
-        />
-      )}
-
-      {phase === "review" && (
-        <ReviewPanel
-          reviewCode={reviewCode}
-          submitting={submitting}
-          onConfirm={() => void handleConfirmReview()}
-          onEnterManual={handleEnterManual}
-        />
-      )}
-
-      {phase === "connecting" && <ConnectingPanel />}
-
-      {phase === "success" && result && (
-        <SuccessPanel
-          result={result}
-          onTrust={() => void handleTrustAndView()}
-          onViewWithoutTrust={handleViewWithoutTrust}
-        />
-      )}
-
-      {phase === "error" && localError && (
-        <ErrorPanel error={localError} onNewInvite={startOffer} onEnterCode={handleEnterManual} />
-      )}
-
-      {phase === "expired" && (
-        <ExpiredPanel onNewInvite={startOffer} onEnterCode={handleEnterManual} />
-      )}
-    </div>
-  );
-}
-
-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="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>
-
-      <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="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>
-  );
-}
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-registerInternalPeersUI({
-  peersUIId: "000user00connect0screen01",
-  component: UserConnect,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "contacts/connect",
-      uiCategory: "screen",
-      priority: 3,
-    },
-  ],
-});