viveworker 0.7.0 → 0.8.1

package/web/app.js

@@ -1,4 +1,12 @@
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES, localeDisplayName, normalizeLocale, resolveLocalePreference, t } from "./i18n.js";
+import { ensureIdentityKeypair, bytesToHex } from "./remote-pairing/keys.js";
+import {
+  loadPairingState as loadRemotePairingState,
+  savePairingState as saveRemotePairingState,
+  clearPairingState as clearRemotePairingState,
+} from "./remote-pairing/pairing-state.js";
+const APP_BUILD_ID = "__VIVEWORKER_APP_BUILD_ID__";
+const { getRoutingTelemetry, routedFetch } = await import(`./remote-pairing/api-router.js?v=${encodeURIComponent(APP_BUILD_ID)}`);
 
 const DESKTOP_BREAKPOINT = 980;
 const INSTALL_BANNER_DISMISS_KEY = "viveworker-install-banner-dismissed-v2";
@@ -12,6 +20,24 @@ const THREAD_FILTER_INTERACTION_DEFER_MS = 8000;
 const MAX_COMPLETION_REPLY_IMAGE_COUNT = 4;
 const NOTIFICATION_INTENT_CACHE = "viveworker-notification-intent-v1";
 const NOTIFICATION_INTENT_PATH = "/__viveworker_notification_intent__";
+const MAX_TIMELINE_IMAGE_OBJECT_URLS = 80;
+const REMOTE_PAIRING_STATE_STORAGE_KEY = "viveworker.remote-pairing.state";
+const REMOTE_PAIRING_STATE_SCHEMA_VERSION = 2;
+const REMOTE_PAIRING_STATE_LEGACY_SCHEMA_VERSION = 1;
+const BOOT_SPLASH_SLOW_HINT_MS = 10000;
+const BOOT_SPLASH_REMOTE_SWITCHING_MIN_MS = 650;
+const BOOTSTRAP_REMOTE_TIMEOUT_MS = 12_000;
+const REMOTE_PAIRING_TOKEN_REFRESH_MS = 30 * 24 * 60 * 60 * 1000;
+const BOOT_TRACE_MAX_EVENTS = 90;
+const BOOT_TRACE_MAX_VALUE_LENGTH = 120;
+const BOOT_SPLASH_STAGE = Object.freeze({
+  initial: -1,
+  checking: 0,
+  switching: 1,
+  establishing: 2,
+  loading: 3,
+});
+const timelineImageObjectUrlCache = new Map();
 
 const state = {
   session: null,
@@ -51,6 +77,7 @@ const state = {
   detailDiffExpanded: {},
   choiceLocalDrafts: {},
   completionReplyDrafts: {},
+  completionReplySheetToken: "",
   pendingActionUrls: new Set(),
   pairError: "",
   pairNotice: "",
@@ -60,6 +87,21 @@ const state = {
   a2aRelayStatus: null,
   a2aShareStatus: null,
   a2aShareRecentExpanded: 0,
+  // Remote-pairing relay snapshot — { enabled, relayUrl, configuredRelayUrl,
+  // identityFingerprint, sessions: [...], pairings: [...] } | null.
+  // Populated by fetchRemotePairingStatus() on settings page open and after
+  // toggle/revoke actions. Null until first fetch completes.
+  remotePairingStatus: null,
+  // Notice / error flashes for the remote-pairing settings page (consumed
+  // and cleared after a single render, mirroring `pushNotice` / `pushError`
+  // from the push UI).
+  remotePairingNotice: "",
+  remotePairingError: "",
+  // Pending action key for in-flight toggle / revoke / relay-url save —
+  // used to disable buttons while the round-trip is in progress so a fast
+  // double-click doesn't fire two POSTs.
+  remotePairingPending: "",
+  remotePairingDetailsOpen: false,
   hazbaseStatus: null,
   hazbaseNotice: "",
   hazbaseError: "",
@@ -106,6 +148,9 @@ const state = {
   defaultLocale: DEFAULT_LOCALE,
   supportedLocales: [...SUPPORTED_LOCALES],
   appVersion: "",
+  appBuildId: APP_BUILD_ID,
+  serverAppBuildId: "",
+  clientUpdateRequired: false,
   versionStatus: null,
   versionStatusError: "",
 };
@@ -133,12 +178,150 @@ function hazbasePasskeyHostSupport() {
 
 const app = document.querySelector("#app");
 let bootSplashDismissed = false;
+let bootSplashHintTimer = null;
+let bootSplashHintVisible = false;
+let bootSplashDeferredStatusTimer = null;
+let bootSplashRemoteRouteSeen = false;
+let bootSplashRemoteSwitchingShownAtMs = 0;
+let bootSplashStatusStage = BOOT_SPLASH_STAGE.initial;
+let bootSplashPendingStatusStage = BOOT_SPLASH_STAGE.initial;
+const bootTraceStartedAtMs = Date.now();
+const bootTraceStartPerfMs = bootTraceNow();
+const bootTraceId = makeBootTraceId();
+let bootTraceEvents = [];
+let bootTraceClosed = false;
+let bootTraceSent = false;
+
+if (typeof window !== "undefined") {
+  window.__viveworkerAppBuild = APP_BUILD_ID;
+  window.__viveworkerBootTraceId = bootTraceId;
+}
+
+function bootTraceNow() {
+  return typeof performance !== "undefined" && typeof performance.now === "function"
+    ? performance.now()
+    : Date.now();
+}
+
+function makeBootTraceId() {
+  const randomPart = Math.random().toString(36).slice(2, 10);
+  return `${Date.now().toString(36)}-${randomPart}`;
+}
+
+function sanitizeBootTraceValue(value) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  return String(value).slice(0, BOOT_TRACE_MAX_VALUE_LENGTH);
+}
+
+function sanitizeBootTraceUrl(value) {
+  const raw = sanitizeBootTraceValue(value);
+  if (!raw) {
+    return "";
+  }
+  try {
+    const base = window.location?.origin || "https://localhost";
+    const url = new URL(raw, base);
+    return url.pathname;
+  } catch {
+    return raw.split("?")[0].slice(0, BOOT_TRACE_MAX_VALUE_LENGTH);
+  }
+}
+
+function recordBootTraceEvent(type, detail = {}) {
+  if (bootTraceClosed) {
+    return;
+  }
+  const event = {
+    type: sanitizeBootTraceValue(type),
+    tMs: Math.max(0, Math.round(bootTraceNow() - bootTraceStartPerfMs)),
+  };
+  const phase = sanitizeBootTraceValue(detail.phase);
+  const url = sanitizeBootTraceUrl(detail.url);
+  const stateValue = sanitizeBootTraceValue(detail.state);
+  const previousState = sanitizeBootTraceValue(detail.previousState);
+  const reason = sanitizeBootTraceValue(detail.reason);
+  if (phase) event.phase = phase;
+  if (url) event.url = url;
+  if (stateValue) event.state = stateValue;
+  if (previousState) event.previousState = previousState;
+  if (reason) event.reason = reason;
+  if (detail.sticky === true || detail.sticky === false) event.sticky = detail.sticky;
+  if (Number.isFinite(Number(detail.code))) event.code = Number(detail.code);
+  if (detail.resumed === true || detail.resumed === false) event.resumed = detail.resumed;
+  bootTraceEvents.push(event);
+  if (bootTraceEvents.length > BOOT_TRACE_MAX_EVENTS) {
+    bootTraceEvents = bootTraceEvents.slice(-BOOT_TRACE_MAX_EVENTS);
+  }
+}
+
+function flushBootTrace(reason, extra = {}) {
+  if (bootTraceSent) {
+    return;
+  }
+  bootTraceSent = true;
+  bootTraceClosed = true;
+  const payload = {
+    traceId: bootTraceId,
+    reason: sanitizeBootTraceValue(reason),
+    appBuildId: APP_BUILD_ID,
+    locale: state.locale || DEFAULT_LOCALE,
+    startedAtMs: bootTraceStartedAtMs,
+    totalMs: Math.max(0, Math.round(bootTraceNow() - bootTraceStartPerfMs)),
+    remoteRouteSeen: bootSplashRemoteRouteSeen,
+    finalStage: bootSplashStatusStage,
+    userAgent: navigator.userAgent || "",
+    events: bootTraceEvents,
+    ...extra,
+  };
+  queueMicrotask(() => {
+    routedFetch("/api/remote-pairing/boot-trace", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(payload),
+    }, { suppressRoutingStatus: true }).catch(() => {});
+  });
+}
+
+function syncVisualViewportMetrics() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const root = document.documentElement;
+  const viewport = window.visualViewport;
+  const width = viewport?.width || window.innerWidth || root.clientWidth || 0;
+  const left = viewport?.offsetLeft || 0;
+  root.style.setProperty("--visual-viewport-width", `${Math.max(0, width)}px`);
+  root.style.setProperty("--visual-viewport-left", `${Math.max(0, left)}px`);
+}
+
+function resetHorizontalViewportScroll() {
+  syncVisualViewportMetrics();
+  const scrollingElement = document.scrollingElement || document.documentElement;
+  if (scrollingElement) {
+    scrollingElement.scrollLeft = 0;
+  }
+  document.documentElement.scrollLeft = 0;
+  document.body.scrollLeft = 0;
+  syncVisualViewportMetrics();
+  window.requestAnimationFrame?.(syncVisualViewportMetrics);
+}
 
 function dismissBootSplash() {
   if (bootSplashDismissed || typeof document === "undefined") {
     return;
   }
   bootSplashDismissed = true;
+  clearBootSplashHintTimer();
+  clearBootSplashDeferredStatusTimer();
+  if (typeof window !== "undefined") {
+    window.removeEventListener("viveworker:remote-routing-status", handleBootRoutingStatus);
+  }
   const splash = document.querySelector("#boot-splash");
   document.body?.classList.add("viveworker-ready");
   if (!splash) {
@@ -149,6 +332,147 @@ function dismissBootSplash() {
     splash.remove();
   }, 280);
 }
+
+function setBootSplashStatus(key, stage = bootSplashStatusStage) {
+  if (bootSplashDismissed || typeof document === "undefined") {
+    return false;
+  }
+  if (stage < bootSplashStatusStage) {
+    return false;
+  }
+  const message = L(key);
+  const status = document.querySelector("#boot-splash-status");
+  const splash = document.querySelector("#boot-splash");
+  if (status && status.textContent !== message) {
+    status.textContent = message;
+  }
+  if (splash) {
+    splash.setAttribute("aria-label", `${L("common.appName")} ${message}`);
+  }
+  if (bootSplashRemoteRouteSeen) {
+    ensureBootSplashHintTimer();
+  }
+  bootSplashStatusStage = Math.max(bootSplashStatusStage, stage);
+  return true;
+}
+
+function ensureBootSplashHintTimer() {
+  if (bootSplashHintTimer != null || bootSplashHintVisible || bootSplashDismissed) {
+    return;
+  }
+  bootSplashHintTimer = window.setTimeout(() => {
+    bootSplashHintTimer = null;
+    showBootSplashHint();
+  }, BOOT_SPLASH_SLOW_HINT_MS);
+}
+
+function clearBootSplashHintTimer() {
+  if (bootSplashHintTimer != null) {
+    window.clearTimeout(bootSplashHintTimer);
+    bootSplashHintTimer = null;
+  }
+}
+
+function clearBootSplashDeferredStatusTimer() {
+  if (bootSplashDeferredStatusTimer != null) {
+    window.clearTimeout(bootSplashDeferredStatusTimer);
+    bootSplashDeferredStatusTimer = null;
+  }
+  bootSplashPendingStatusStage = BOOT_SPLASH_STAGE.initial;
+}
+
+function showBootSplashHint() {
+  if (bootSplashDismissed || bootSplashHintVisible || typeof document === "undefined") {
+    return;
+  }
+  const hint = document.querySelector("#boot-splash-hint");
+  if (!hint) {
+    return;
+  }
+  bootSplashHintVisible = true;
+  hint.textContent = L("boot.status.slowHint");
+  hint.hidden = false;
+  if (typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(() => {
+      hint.classList.add("is-visible");
+    });
+  } else {
+    hint.classList.add("is-visible");
+  }
+}
+
+function bootSplashNow() {
+  return typeof performance !== "undefined" && typeof performance.now === "function"
+    ? performance.now()
+    : Date.now();
+}
+
+function showBootRemoteSwitchingStatus() {
+  bootSplashRemoteRouteSeen = true;
+  const effectiveStage = Math.max(bootSplashStatusStage, bootSplashPendingStatusStage);
+  if (effectiveStage >= BOOT_SPLASH_STAGE.switching) {
+    ensureBootSplashHintTimer();
+    return;
+  }
+  bootSplashRemoteSwitchingShownAtMs = bootSplashNow();
+  clearBootSplashDeferredStatusTimer();
+  setBootSplashStatus("boot.status.switchingRemote", BOOT_SPLASH_STAGE.switching);
+}
+
+function setBootRemoteStatusAfterSwitching(key, stage) {
+  bootSplashRemoteRouteSeen = true;
+  const effectiveStage = Math.max(bootSplashStatusStage, bootSplashPendingStatusStage);
+  if (stage <= effectiveStage) {
+    ensureBootSplashHintTimer();
+    return;
+  }
+  if (bootSplashStatusStage < BOOT_SPLASH_STAGE.switching) {
+    showBootRemoteSwitchingStatus();
+  }
+  const elapsedMs = bootSplashRemoteSwitchingShownAtMs > 0
+    ? bootSplashNow() - bootSplashRemoteSwitchingShownAtMs
+    : BOOT_SPLASH_REMOTE_SWITCHING_MIN_MS;
+  const delayMs = Math.max(0, BOOT_SPLASH_REMOTE_SWITCHING_MIN_MS - elapsedMs);
+  clearBootSplashDeferredStatusTimer();
+  if (delayMs <= 0) {
+    setBootSplashStatus(key, stage);
+    return;
+  }
+  bootSplashDeferredStatusTimer = window.setTimeout(() => {
+    bootSplashDeferredStatusTimer = null;
+    bootSplashPendingStatusStage = BOOT_SPLASH_STAGE.initial;
+    setBootSplashStatus(key, stage);
+  }, delayMs);
+  bootSplashPendingStatusStage = stage;
+}
+
+function handleBootRoutingStatus(event) {
+  if (bootSplashDismissed) {
+    return;
+  }
+  recordBootTraceEvent("route", event?.detail || {});
+  const phase = event?.detail?.phase || "";
+  switch (phase) {
+    case "lan-checking":
+      setBootSplashStatus("boot.status.checkingLan", BOOT_SPLASH_STAGE.checking);
+      break;
+    case "lan-failed":
+    case "remote-switching":
+      showBootRemoteSwitchingStatus();
+      break;
+    case "remote-connecting":
+      setBootRemoteStatusAfterSwitching("boot.status.establishingRemote", BOOT_SPLASH_STAGE.establishing);
+      break;
+    case "lan-connected":
+      // Same-LAN startup is fast and already covered by the checking message.
+      break;
+    case "remote-connected":
+      setBootRemoteStatusAfterSwitching("boot.status.loadingData", BOOT_SPLASH_STAGE.loading);
+      break;
+    default:
+      break;
+  }
+}
 const params = new URLSearchParams(window.location.search);
 const initialItem = params.get("item") || "";
 const initialTargetTab = params.get("tab") || "";
@@ -159,10 +483,13 @@ let didReloadForServiceWorker = false;
 let lastViewportMode = isDesktopLayout();
 
 boot().catch((error) => {
-  const message = error.message || String(error);
-  const hint = /Load failed|Failed to fetch|NetworkError|fetch/i.test(message)
+  const message = bootErrorMessage(error);
+  const hint = shouldShowNetworkHint(error, message)
     ? `<p class="muted">${escapeHtml(L("error.networkHint"))}</p>`
     : "";
+  flushBootTrace("boot-error", {
+    error: sanitizeBootTraceValue(error?.code || error?.name || message),
+  });
   dismissBootSplash();
   app.innerHTML = `
     <main class="onboarding-shell">
@@ -176,13 +503,95 @@ boot().catch((error) => {
   `;
 });
 
+function bootErrorMessage(error) {
+  if (isRemotePairingEnrollmentRequired(error)) {
+    return L("error.remotePairingNeedsLanRefresh");
+  }
+  if (isRemotePairingUnavailable(error)) {
+    return L("error.remotePairingUnavailable");
+  }
+  return error?.message || String(error);
+}
+
+function shouldShowNetworkHint(error, message) {
+  if (isRemotePairingEnrollmentRequired(error) || isRemotePairingUnavailable(error)) {
+    return false;
+  }
+  return /Load failed|Failed to fetch|NetworkError|fetch/i.test(message);
+}
+
+function isRemotePairingEnrollmentRequired(error) {
+  return error?.code === "remote-pairing-enrollment-required" ||
+    error?.name === "RemotePairingEnrollmentRequiredError";
+}
+
+function isRemotePairingUnavailable(error) {
+  return error?.code === "remote-pairing-unavailable" ||
+    error?.code === "remote-pairing-unreachable" ||
+    error?.name === "RemotePairingUnavailableError" ||
+    error?.name === "RpcTimeoutError" ||
+    error?.name === "RpcTransportError" ||
+    error?.name === "RpcTransportFailedError";
+}
+
+function inspectRemotePairingStateForEnrollment() {
+  let store;
+  try {
+    store = globalThis.localStorage ?? null;
+  } catch {
+    return { status: "storage-unavailable", needsEnrollment: false };
+  }
+  if (!store) {
+    return { status: "storage-unavailable", needsEnrollment: false };
+  }
+
+  let raw;
+  try {
+    raw = store.getItem(REMOTE_PAIRING_STATE_STORAGE_KEY);
+  } catch {
+    return { status: "storage-unavailable", needsEnrollment: false };
+  }
+  if (!raw) {
+    return { status: "missing", needsEnrollment: true };
+  }
+
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return { status: "malformed", needsEnrollment: true };
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    return { status: "malformed", needsEnrollment: true };
+  }
+  if (parsed.version === REMOTE_PAIRING_STATE_LEGACY_SCHEMA_VERSION) {
+    return { status: "legacy-v1", needsEnrollment: true };
+  }
+  if (parsed.version !== REMOTE_PAIRING_STATE_SCHEMA_VERSION) {
+    return { status: "unsupported-version", needsEnrollment: true };
+  }
+  if (typeof parsed.relayToken !== "string" || parsed.relayToken.length === 0) {
+    return { status: "missing-token", needsEnrollment: true };
+  }
+  return { status: "ready", needsEnrollment: false };
+}
+
 async function boot() {
+  recordBootTraceEvent("boot-start", {
+    url: window.location?.pathname || "/app",
+  });
   updateManifestHref(initialPairToken);
+  syncVisualViewportMetrics();
+  setBootSplashStatus("boot.status.checkingLan", BOOT_SPLASH_STAGE.checking);
   // SW register + update() can take hundreds of ms and does not need to gate
   // first paint. Fire and forget; the `controllerchange` reload handler wired
   // up inside `registerServiceWorker` still picks up new versions.
   registerServiceWorker().catch(() => {});
+  window.addEventListener("viveworker:remote-routing-status", handleBootRoutingStatus);
   navigator.serviceWorker?.addEventListener("message", handleServiceWorkerMessage);
+  window.addEventListener("resize", syncVisualViewportMetrics, { passive: true });
+  window.visualViewport?.addEventListener("resize", syncVisualViewportMetrics, { passive: true });
+  window.visualViewport?.addEventListener("scroll", syncVisualViewportMetrics, { passive: true });
   window.addEventListener("resize", handleViewportChange, { passive: true });
   window.addEventListener("focus", handlePotentialExternalNavigation, { passive: true });
   window.addEventListener("pageshow", handlePotentialExternalNavigation, { passive: true });
@@ -191,13 +600,24 @@ async function boot() {
   // Single round-trip for session + inbox(pending/completed) + timeline +
   // devices. See `refreshBootstrap` for why we collapsed the boot fan-out.
   await refreshBootstrap();
+  if (bootSplashRemoteRouteSeen) {
+    setBootRemoteStatusAfterSwitching("boot.status.loadingData", BOOT_SPLASH_STAGE.loading);
+  }
+  flushBootTrace("bootstrap-complete");
 
   if (!state.session?.authenticated && initialPairToken && shouldAutoPairFromBootstrapToken()) {
     try {
-      await pair({
+      const pairResult = await pair({
         token: initialPairToken,
         temporary: shouldUseTemporaryBootstrapPairing(),
       });
+      // Mirror the manual #pair-form path: register with the bridge so
+      // off-LAN reconnect via the relay works without a second pair step.
+      // Skipped when the bridge graced this tab a temporary session
+      // (Safari non-PWA bootstrap), since those don't survive the tab.
+      if (pairResult?.temporaryPairing !== true) {
+        await enrollRemotePairing();
+      }
     } catch (error) {
       state.pairError = error.message || String(error);
     }
@@ -229,6 +649,7 @@ async function boot() {
     return;
   }
 
+  await maybeAutoEnrollRemotePairingFromLan();
   await consumePendingNotificationIntent();
   // `?focusPending=claude` marks this tab as the Claude-hook-opened popup:
   // auto-navigate to the newest unresolved Claude pending (plan/question)
@@ -306,6 +727,7 @@ async function boot() {
       refreshInboxDiff(),
       fetchMoltbookScoutStatus(),
       fetchA2aShareStatus(),
+      fetchRemotePairingStatus(),
     ])
       .then(async () => {
         if (!shouldDeferRenderForActiveInteraction()) {
@@ -316,6 +738,49 @@ async function boot() {
   }, 3000);
 }
 
+async function maybeAutoEnrollRemotePairingFromLan() {
+  if (!state.session?.authenticated) {
+    return null;
+  }
+  const pairingState = inspectRemotePairingStateForEnrollment();
+  const telemetry = getRoutingTelemetry();
+  if (!telemetry || telemetry.lanOk <= 0) {
+    return null;
+  }
+  if (!pairingState.needsEnrollment) {
+    const record = pairingState.record || loadRemotePairingState();
+    if (!shouldRefreshRemotePairingTokenFromLan(record)) {
+      return null;
+    }
+  }
+  return enrollRemotePairing();
+}
+
+function shouldRefreshRemotePairingTokenFromLan(record) {
+  if (!record) {
+    return false;
+  }
+  const updatedAt = Number(record.relayTokenUpdatedAtMs) || 0;
+  if (!updatedAt) {
+    return true;
+  }
+  return Date.now() - updatedAt >= REMOTE_PAIRING_TOKEN_REFRESH_MS;
+}
+
+function isRemotePairingUsingRelay() {
+  const telemetry = getRoutingTelemetry();
+  if (!telemetry) {
+    return false;
+  }
+  if (telemetry.lastRoute === "lan") {
+    return false;
+  }
+  if (telemetry.lastRoute === "relay") {
+    return true;
+  }
+  return telemetry.relayOk > 0 && Number(telemetry.stickyRelayUntilMs || 0) > Date.now();
+}
+
 async function registerServiceWorker() {
   if (!("serviceWorker" in navigator)) {
     return;
@@ -335,6 +800,47 @@ async function registerServiceWorker() {
   }
 }
 
+async function forceAppRefreshFromLan() {
+  try {
+    const healthInit = {
+      cache: "no-store",
+      credentials: "same-origin",
+      headers: { Accept: "application/json" },
+    };
+    if (typeof AbortSignal !== "undefined" && typeof AbortSignal.timeout === "function") {
+      healthInit.signal = AbortSignal.timeout(2500);
+    }
+    await fetch("/health", healthInit);
+  } catch {
+    state.pushError = L("error.clientUpdateNeedsLan");
+    return;
+  }
+
+  try {
+    const registration = state.serviceWorkerRegistration || await navigator.serviceWorker?.getRegistration?.();
+    await registration?.update?.();
+  } catch {
+    // Reload below is still useful; the next boot can retry SW update.
+  }
+
+  try {
+    if (typeof caches !== "undefined") {
+      const keys = await caches.keys();
+      await Promise.all(
+        keys
+          .filter((key) => /^viveworker-v/.test(key))
+          .map((key) => caches.delete(key))
+      );
+    }
+  } catch {
+    // Cache deletion is best-effort; network-first app routes still help.
+  }
+
+  const nextUrl = new URL(window.location.href);
+  nextUrl.searchParams.set("appRefresh", String(Date.now()));
+  window.location.replace(nextUrl.toString());
+}
+
 function handleViewportChange() {
   const nextViewportMode = isDesktopLayout();
   if (nextViewportMode === lastViewportMode) {
@@ -364,6 +870,7 @@ async function refreshAuthenticatedState() {
   await fetchMoltbookScoutStatus();
   await fetchA2aRelayStatus();
   await fetchA2aShareStatus();
+  await fetchRemotePairingStatus();
   if (state.currentTab === "settings") {
     await fetchHazbaseStatus();
   }
@@ -386,11 +893,13 @@ async function refreshAuthenticatedStateRemote() {
     fetchMoltbookScoutStatus(),
     fetchA2aRelayStatus(),
     fetchA2aShareStatus(),
+    fetchRemotePairingStatus(),
   ]);
 }
 
 async function refreshSession() {
   state.session = await apiGet("/api/session");
+  applyServerAppBuildId(state.session?.webAppBuildId);
   syncPairingTokenState(desiredBootstrapPairingToken());
   applyResolvedLocale();
 }
@@ -402,8 +911,14 @@ async function refreshSession() {
 // iOS PWAs where connection reuse is aggressive. Leaves the diff and
 // external-status probes as separate background phases in `boot()`.
 async function refreshBootstrap() {
-  const bootstrap = await apiGet("/api/bootstrap");
+  recordBootTraceEvent("bootstrap-start", { url: "/api/bootstrap" });
+  const bootstrap = await apiGet("/api/bootstrap", {
+    timeoutMs: BOOTSTRAP_REMOTE_TIMEOUT_MS,
+    preferRelayError: true,
+  });
+  recordBootTraceEvent("bootstrap-response", { url: "/api/bootstrap" });
   state.session = bootstrap?.session || null;
+  applyServerAppBuildId(bootstrap?.appBuildId || state.session?.webAppBuildId);
   syncPairingTokenState(desiredBootstrapPairingToken());
   applyResolvedLocale();
 
@@ -424,7 +939,7 @@ async function refreshBootstrap() {
   syncCompletedThreadFilter();
   syncInboxSubtab();
 
-  state.timeline = bootstrap?.timeline || null;
+  state.timeline = await hydrateTimelinePayloadImages(bootstrap?.timeline || null);
   syncTimelineThreadFilter();
   syncTimelineKindFilter();
 
@@ -433,6 +948,12 @@ async function refreshBootstrap() {
   state.deviceError = "";
 }
 
+function applyServerAppBuildId(value) {
+  const buildId = normalizeClientText(value);
+  state.serverAppBuildId = buildId;
+  state.clientUpdateRequired = Boolean(buildId && buildId !== APP_BUILD_ID);
+}
+
 async function syncDetectedLocalePreference() {
   if (!state.session?.authenticated || !state.session?.deviceId || !state.detectedLocale) {
     return;
@@ -529,9 +1050,10 @@ function detectBrowserLocale() {
 
 async function refreshPushStatus() {
   const client = await getClientPushState();
+  const { clientSubscription, ...clientStatus } = client;
   if (!state.session?.authenticated) {
     state.pushStatus = {
-      ...client,
+      ...clientStatus,
       enabled: false,
       subscribed: false,
       serverSubscribed: false,
@@ -542,16 +1064,34 @@ async function refreshPushStatus() {
   }
 
   try {
-    const server = await apiGet("/api/push/status");
+    let server = await apiGet("/api/push/status");
+    if (
+      server?.enabled === true &&
+      server?.subscribed !== true &&
+      clientSubscription &&
+      clientStatus.notificationPermission === "granted"
+    ) {
+      try {
+        await apiPost("/api/push/subscribe", {
+          subscription: clientSubscription,
+          userAgent: navigator.userAgent,
+          standalone: isStandaloneMode(),
+        });
+        server = await apiGet("/api/push/status");
+      } catch {
+        // Best effort: if the browser still has a local subscription, the
+        // status row can reflect that while the enable action repairs it.
+      }
+    }
     state.pushStatus = {
       ...server,
-      ...client,
+      ...clientStatus,
       serverSubscribed: Boolean(server.subscribed),
-      subscribed: Boolean(server.subscribed || client.clientSubscribed),
+      subscribed: Boolean(server.subscribed || clientStatus.clientSubscribed),
     };
   } catch (error) {
     state.pushStatus = {
-      ...client,
+      ...clientStatus,
       enabled: false,
       subscribed: false,
       serverSubscribed: false,
@@ -586,6 +1126,18 @@ async function fetchA2aRelayStatus() {
   }
 }
 
+async function fetchRemotePairingStatus() {
+  if (!state.session?.remotePairingAvailable) {
+    state.remotePairingStatus = null;
+    return;
+  }
+  try {
+    state.remotePairingStatus = await apiGet("/api/remote-pairing/status");
+  } catch {
+    state.remotePairingStatus = null;
+  }
+}
+
 async function fetchA2aShareStatus() {
   if (!state.session?.a2aShareEnabled) {
     state.a2aShareStatus = null;
@@ -648,6 +1200,7 @@ async function getClientPushState() {
       "PushManager" in window &&
       "Notification" in window,
     clientSubscribed: Boolean(subscription),
+    clientSubscription: subscription ? subscription.toJSON() : null,
   };
 }
 
@@ -688,7 +1241,7 @@ async function refreshInboxDiff() {
 }
 
 async function refreshTimeline() {
-  state.timeline = await apiGet("/api/timeline");
+  state.timeline = await hydrateTimelinePayloadImages(await apiGet("/api/timeline"));
   syncTimelineThreadFilter();
   syncTimelineKindFilter();
 }
@@ -872,6 +1425,7 @@ function normalizeProviderClient(value) {
   if (normalized === "moltbook") return "moltbook";
   if (normalized === "a2a") return "a2a";
   if (normalized === "viveworker") return "viveworker";
+  if (normalized === "mcp") return "mcp";
   return "codex";
 }
 
@@ -881,6 +1435,7 @@ function providerDisplayName(provider) {
   if (p === "moltbook") return "Moltbook";
   if (p === "a2a") return "A2A";
   if (p === "viveworker") return L("common.appName");
+  if (p === "mcp") return "MCP";
   return L("common.codex");
 }
 
@@ -1176,9 +1731,16 @@ function renderPair() {
     event.preventDefault();
     const form = new FormData(event.currentTarget);
     try {
-      await pair({ code: String(form.get("code") || "") });
+      const pairResult = await pair({ code: String(form.get("code") || "") });
       state.pairError = "";
       state.pairNotice = "";
+      // Best-effort: register this phone's X25519 pubkey with the bridge
+      // so it can reach us via the relay later. Doesn't block the shell
+      // render; failures (older bridge, IndexedDB blocked, …) are swallowed
+      // inside the helper.
+      if (pairResult?.temporaryPairing !== true) {
+        await enrollRemotePairing();
+      }
       await refreshSession();
       await refreshAuthenticatedState();
       await renderShell();
@@ -1200,6 +1762,80 @@ async function pair(payload) {
   return result;
 }
 
+/**
+ * Best-effort post-pair enrollment: hand the bridge our X25519 static
+ * pubkey + a friendly label, persist the bridge's response in localStorage,
+ * and return the saved record (or null on any failure).
+ *
+ * Always called after a successful LAN pair (regardless of whether the
+ * remote relay is currently ON). Reasoning:
+ *
+ *   - Enrollment is idempotent on phonePub server-side; re-pairing the same
+ *     phone keeps its existing pairingId and bridge identity.
+ *   - Doing it eagerly means flipping the relay toggle later "just works"
+ *     without forcing the user to repair-on-LAN to register their key.
+ *   - LAN-only basic auth keeps working even if this fails (e.g. older
+ *     bridge predating the lan-enroll endpoint, IndexedDB blocked, etc.) —
+ *     we explicitly swallow errors and let the caller continue rendering
+ *     the authenticated shell.
+ *
+ * Skipped when the surrounding `pair()` returned `temporaryPairing: true`
+ * — temporary sessions are an opt-in shape that doesn't outlive the tab,
+ * so persisting a pairing record would be misleading.
+ *
+ * @param {string} [label]  user-visible device label; defaults to a
+ *                          "LAN paired YYYY-MM-DD" stamp.
+ * @returns {Promise<import("./remote-pairing/pairing-state.js").RemotePairingState | null>}
+ */
+async function enrollRemotePairing(label) {
+  try {
+    const keypair = await ensureIdentityKeypair();
+    const phonePubHex = bytesToHex(keypair.pub);
+    const effectiveLabel = (label && String(label).trim()) || buildDefaultEnrollLabel();
+    const response = await apiPost("/api/remote-pairing/lan-enroll", {
+      phonePubHex,
+      label: effectiveLabel,
+    });
+    if (!response || response.ok !== true) {
+      return null;
+    }
+    const saved = saveRemotePairingState({
+      pairingId: response.pairingId,
+      relayToken: response.relayToken,
+      phonePub: response.phonePub,
+      phoneFingerprint: response.phoneFingerprint,
+      bridgePubHex: response.bridgePubHex,
+      bridgeFingerprint: response.bridgeFingerprint,
+      relayUrl: response.relayUrl,
+      label: response.label || "",
+      addedAtMs: Number.isFinite(response.addedAtMs) ? response.addedAtMs : Date.now(),
+      relayTokenUpdatedAtMs: Number.isFinite(response.relayTokenUpdatedAtMs)
+        ? response.relayTokenUpdatedAtMs
+        : Date.now(),
+    });
+    if (!saved) {
+      // Storage is full / disabled; the bridge still has the pairing,
+      // so future toggle-on works — just no localStorage cache for the
+      // PWA's own routing decisions.
+      return null;
+    }
+    return loadRemotePairingState();
+  } catch (error) {
+    console.warn("[remote-pairing] lan-enroll skipped:", error?.message || error);
+    return null;
+  }
+}
+
+function buildDefaultEnrollLabel() {
+  // YYYY-MM-DD so re-enrolls produce stable, sortable labels in the
+  // settings list. (The user can rename in the settings page later.)
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  return `LAN paired ${y}-${m}-${d}`;
+}
+
 async function logout({ revokeCurrentDeviceTrust = false } = {}) {
   await apiPost("/api/session/logout", { revokeCurrentDeviceTrust });
   resetAuthenticatedState();
@@ -1227,6 +1863,7 @@ function resetAuthenticatedState() {
   state.choiceLocalDrafts = {};
   clearAllCompletionReplyDrafts();
   state.completionReplyDrafts = {};
+  state.completionReplySheetToken = "";
   state.settingsSubpage = "";
   state.settingsScrollState = null;
   state.listScrollState = null;
@@ -1238,6 +1875,7 @@ function resetAuthenticatedState() {
   state.deviceError = "";
   state.logoutConfirmOpen = false;
   state.pairError = "";
+  state.remotePairingDetailsOpen = false;
 }
 
 async function revokeTrustedDevice(deviceId) {
@@ -1258,7 +1896,49 @@ async function revokeTrustedDevice(deviceId) {
   await renderShell();
 }
 
+/**
+ * `renderShell()` rebuilds the entire `#app` subtree by reassigning
+ * `innerHTML`, which destroys every <pre> element in the DOM — including
+ * any horizontal scroll position the user dragged into a wide code block.
+ * On a polling interval, that means a long line of code keeps snapping
+ * back to the start while the reader is mid-line.
+ *
+ * `snapshotCodeBlockScrolls()` records each `.markdown pre`'s scrollLeft
+ * keyed by its trimmed textContent (so the key survives a fresh render
+ * regardless of position in the DOM tree). `restoreCodeBlockScrolls()`
+ * walks the new DOM and restores any scrollLeft we still have a key for.
+ *
+ * Content-keyed matching is intentional: if the underlying code text
+ * changes mid-scroll, the new <pre> is logically different and we let it
+ * start at scrollLeft=0 rather than landing the reader somewhere unrelated.
+ */
+function snapshotCodeBlockScrolls() {
+  if (typeof document === "undefined") return null;
+  const blocks = document.querySelectorAll(".markdown pre");
+  if (blocks.length === 0) return null;
+  const map = new Map();
+  for (const pre of blocks) {
+    const key = pre.textContent ? pre.textContent.trim() : "";
+    if (!key) continue;
+    if (pre.scrollLeft === 0 && pre.scrollTop === 0) continue;
+    map.set(key, { scrollLeft: pre.scrollLeft, scrollTop: pre.scrollTop });
+  }
+  return map.size > 0 ? map : null;
+}
+
+function restoreCodeBlockScrolls(snapshot) {
+  if (!snapshot || typeof document === "undefined") return;
+  for (const pre of document.querySelectorAll(".markdown pre")) {
+    const key = pre.textContent ? pre.textContent.trim() : "";
+    const saved = key ? snapshot.get(key) : null;
+    if (!saved) continue;
+    if (saved.scrollLeft) pre.scrollLeft = saved.scrollLeft;
+    if (saved.scrollTop) pre.scrollTop = saved.scrollTop;
+  }
+}
+
 async function renderShell() {
+  syncVisualViewportMetrics();
   const desktop = isDesktopLayout();
   const shouldShowDetail = state.currentTab !== "settings" && state.currentItem && (desktop || state.detailOpen);
   let detail = null;
@@ -1277,6 +1957,8 @@ async function renderShell() {
     .filter(Boolean)
     .join(" ");
 
+  const codeBlockScrollSnapshot = snapshotCodeBlockScrolls();
+
   app.innerHTML = `
     <div class="${shellClassName}">
       ${desktop ? renderDesktopHeader(detail) : renderMobileTopBar(detail)}
@@ -1291,13 +1973,21 @@ async function renderShell() {
       ${renderLogoutConfirmModal()}
       ${renderHazbaseLogoutConfirmModal()}
     </div>
+    ${!desktop && detail ? renderCompletionReplySheet(detail) : ""}
   `;
 
   bindShellInteractions();
+  if (state.completionReplySheetToken) {
+    resetHorizontalViewportScroll();
+  }
   applyPendingDetailScrollReset();
   applyPendingListScrollRestore();
   applyPendingSettingsSubpageScrollReset();
   applyPendingSettingsScrollRestore();
+  // Reapply any horizontal scroll the user dragged into a code block before
+  // this re-render. Done after the imperative scroll resets above so they
+  // can't fight each other.
+  restoreCodeBlockScrolls(codeBlockScrollSnapshot);
   requestAnimationFrame(dismissBootSplash);
 }
 
@@ -1361,6 +2051,9 @@ function clearThreadFilterInteraction() {
 
 function shouldDeferRenderForActiveInteraction() {
   const activeElement = document.activeElement;
+  if (state.completionReplySheetToken) {
+    return true;
+  }
   if (
     activeElement instanceof HTMLTextAreaElement &&
     activeElement.matches("[data-completion-reply-textarea]") &&
@@ -1728,7 +2421,6 @@ function renderMobileTopBar(detail) {
   return `
     <header class="mobile-topbar">
       <div class="mobile-topbar__heading">
-        <span class="eyebrow-pill eyebrow-pill--quiet">${escapeHtml(L("common.appName"))}</span>
         <h1 class="mobile-topbar__title">${escapeHtml(meta.title)}</h1>
       </div>
     </header>
@@ -1783,7 +2475,9 @@ async function fetchCurrentDetailForItem(itemRef = state.currentItem) {
     return state.detailOverride.detail;
   }
   try {
-    const detail = await apiGet(`/api/items/${encodeURIComponent(itemRef.kind)}/${encodeURIComponent(itemRef.token)}`);
+    const detail = await hydrateDetailImages(
+      await apiGet(`/api/items/${encodeURIComponent(itemRef.kind)}/${encodeURIComponent(itemRef.token)}`)
+    );
     if (hasLaunchItemIntent(itemRef)) {
       state.launchItemIntent.status = "loaded";
     }
@@ -1797,7 +2491,9 @@ async function fetchCurrentDetailForItem(itemRef = state.currentItem) {
     }
     await refreshInbox();
     try {
-      const detail = await apiGet(`/api/items/${encodeURIComponent(itemRef.kind)}/${encodeURIComponent(itemRef.token)}`);
+      const detail = await hydrateDetailImages(
+        await apiGet(`/api/items/${encodeURIComponent(itemRef.kind)}/${encodeURIComponent(itemRef.token)}`)
+      );
       if (hasLaunchItemIntent(itemRef)) {
         state.launchItemIntent.status = "loaded";
       }
@@ -3230,7 +3926,7 @@ function buildSettingsContext() {
     standalone,
     supportsPushValue,
     permission,
-    subscribed: push.serverSubscribed === true,
+    subscribed: push.subscribed === true,
   });
 
   return {
@@ -3256,6 +3952,7 @@ function buildSettingsContext() {
     a2aRelay: state.a2aRelayStatus,
     a2aShare: state.a2aShareStatus,
     hazbase: state.hazbaseStatus,
+    remotePairing: state.remotePairingStatus,
   };
 }
 
@@ -3358,6 +4055,195 @@ function collectSettingsDiagnostics({ permission, secureContext, standalone, sup
   return Array.from(new Set(issues.filter(Boolean)));
 }
 
+function hasAutoPilotWriteLaneEnabled(session = state.session) {
+  return Boolean(
+    session?.autoPilotTrustedWrites === true ||
+    session?.autoPilotWriteLaneContent === true ||
+    session?.autoPilotWriteLaneUiTests === true ||
+    session?.autoPilotWriteLaneSource === true,
+  );
+}
+
+function hasAutoPilotEnabled(session = state.session) {
+  return Boolean(session?.autoPilotTrustedReads === true || hasAutoPilotWriteLaneEnabled(session));
+}
+
+function settingsEnabledValue(enabled) {
+  return enabled ? L("common.enabled") : L("common.disabled");
+}
+
+function settingsNeedsActionValue() {
+  return L("settings.status.actionNeeded");
+}
+
+function settingsDisconnectedValue() {
+  return L("settings.status.disconnected");
+}
+
+function settingsSupportedValue(supported) {
+  return supported ? L("settings.status.supported") : L("settings.status.unsupported");
+}
+
+function settingsInstalledValue(installed) {
+  return installed ? L("settings.status.installed") : L("settings.status.notInstalled");
+}
+
+function settingsNotificationRootValue(context) {
+  if (context.push?.serverSubscribed === true) {
+    return L("common.enabled");
+  }
+  if (context.push?.clientSubscribed === true) {
+    return settingsNeedsActionValue();
+  }
+  if (context.permission === "denied") {
+    return settingsNeedsActionValue();
+  }
+  return L("common.disabled");
+}
+
+function notificationPermissionValue(permission) {
+  const key = `settings.permission.${permission || "default"}`;
+  const translated = L(key);
+  return translated === key ? String(permission || "") : translated;
+}
+
+function notificationReceiveValue(push) {
+  if (push?.serverSubscribed === true) {
+    return L("common.enabled");
+  }
+  if (push?.clientSubscribed === true) {
+    return L("settings.status.actionNeeded");
+  }
+  return L("common.disabled");
+}
+
+function notificationOverallValue(context) {
+  if (context.push?.serverSubscribed === true) {
+    return L("common.enabled");
+  }
+  if (context.permission === "denied") {
+    return L("settings.status.blocked");
+  }
+  if (!context.serverEnabled) {
+    return L("settings.status.notAvailable");
+  }
+  if (!context.supportsPushValue) {
+    return L("settings.status.unsupported");
+  }
+  if (!context.secureContext || !context.standalone || context.permission !== "granted") {
+    return L("settings.status.actionNeeded");
+  }
+  return L("common.disabled");
+}
+
+function settingsMoltbookRootValue(context) {
+  return context.moltbookScout?.enabled === true
+    ? L("common.enabled")
+    : settingsNeedsActionValue();
+}
+
+function settingsA2aRelayRootValue(context) {
+  const relay = context.a2aRelay;
+  if (relay?.enabled === true && relay?.connected === true) {
+    return L("common.enabled");
+  }
+  return settingsDisconnectedValue();
+}
+
+function settingsA2aShareRootValue(context) {
+  const share = context.a2aShare;
+  if (share?.enabled === true && !share?.error) {
+    return L("common.enabled");
+  }
+  return settingsNeedsActionValue();
+}
+
+function settingsWalletRootValue(context) {
+  if (context.hazbase?.enabled !== true) {
+    return L("common.disabled");
+  }
+  return deriveHazbaseWalletFlow(context.hazbase).coreReady
+    ? L("common.enabled")
+    : settingsNeedsActionValue();
+}
+
+function isRemotePairingSessionConnected(session) {
+  const value = normalizeClientText(session?.state).toLowerCase();
+  return value === "connected" || value === "open" || value === "running";
+}
+
+function isRemotePairingSessionReachable(session) {
+  const value = normalizeClientText(session?.state).toLowerCase();
+  return value === "connected" || value === "open" || value === "running" || value === "opening" || value === "handshaking" || value === "resuming";
+}
+
+function remotePairingStatusModel(status, opts = {}) {
+  const enabled = status?.enabled === true;
+  const sessions = Array.isArray(status?.sessions) ? status.sessions : [];
+  const pairings = Array.isArray(status?.pairings) ? status.pairings : [];
+  const usingRelay = opts.usingRelay === true;
+  if (!enabled) {
+    return { key: "disabled", tone: "muted", label: L("settings.remotePairing.status.disabled") };
+  }
+  if (usingRelay && sessions.some(isRemotePairingSessionConnected)) {
+    return { key: "connected", tone: "success", label: L("settings.remotePairing.status.connected") };
+  }
+  if (sessions.some(isRemotePairingSessionReachable)) {
+    return { key: "available", tone: "success", label: L("settings.remotePairing.status.available") };
+  }
+  if (pairings.length > 0) {
+    return { key: "waiting", tone: "warning", label: L("settings.remotePairing.status.waiting") };
+  }
+  return { key: "waiting", tone: "muted", label: L("settings.remotePairing.status.waiting") };
+}
+
+function remotePairingAuditTypeLabel(type) {
+  const key = `settings.remotePairing.audit.type.${type || "unknown"}`;
+  const translated = L(key);
+  return translated === key ? L("settings.remotePairing.audit.type.unknown") : translated;
+}
+
+function remotePairingAuditOutcomeTone(outcome) {
+  if (outcome === "success") return "success";
+  if (outcome === "failure") return "danger";
+  return "muted";
+}
+
+function remotePairingAuditMeta(event) {
+  return [
+    event?.label,
+    event?.phoneFingerprint,
+    event?.relayHost,
+    event?.reason,
+  ].filter(Boolean).join(" / ");
+}
+
+function renderRemotePairingAudit(events) {
+  const list = Array.isArray(events) ? events.slice(0, 10) : [];
+  if (!list.length) {
+    return `<div class="settings-copy-block"><p class="muted">${escapeHtml(L("settings.remotePairing.audit.empty"))}</p></div>`;
+  }
+  return `
+    <div class="settings-remote-audit-list">
+      ${list.map((event) => {
+        const tone = remotePairingAuditOutcomeTone(event?.outcome);
+        const title = remotePairingAuditTypeLabel(event?.type);
+        const meta = remotePairingAuditMeta(event);
+        return `
+          <article class="settings-remote-audit-item">
+            <span class="settings-remote-audit-dot settings-remote-audit-dot--${escapeHtml(tone)}" aria-hidden="true"></span>
+            <div class="settings-remote-audit-body">
+              <p class="settings-remote-audit-title">${escapeHtml(title)}</p>
+              ${meta ? `<p class="settings-remote-audit-meta">${escapeHtml(meta)}</p>` : ""}
+            </div>
+            <time class="settings-remote-audit-time">${escapeHtml(formatSettingsTimestamp(event?.atMs))}</time>
+          </article>
+        `;
+      }).join("")}
+    </div>
+  `;
+}
+
 function settingsPageMeta(page) {
   switch (page) {
     case "notifications":
@@ -3421,14 +4307,14 @@ function settingsPageMeta(page) {
         id: "a2aRelay",
         title: L("settings.a2aRelay.title"),
         description: L("settings.a2aRelay.copy"),
-        icon: "link",
+        icon: "agent-network",
       };
     case "a2aShare":
       return {
         id: "a2aShare",
         title: L("settings.a2aShare.title"),
         description: L("settings.a2aShare.copy"),
-        icon: "link",
+        icon: "file-event",
       };
     case "wallet":
       return {
@@ -3437,6 +4323,13 @@ function settingsPageMeta(page) {
         description: L("settings.wallet.copy"),
         icon: "coin",
       };
+    case "remotePairing":
+      return {
+        id: "remotePairing",
+        title: L("settings.remotePairing.title"),
+        description: L("settings.remotePairing.copy"),
+        icon: "remote-connection",
+      };
     case "a2aExecutor":
       // Executor settings integrated into a2aRelay page — redirect.
       return settingsPageMeta("a2aRelay");
@@ -3452,7 +4345,7 @@ function renderSettingsRoot(context, { mobile }) {
       page: "notifications",
       icon: "notifications",
       title: L("settings.notifications.title"),
-      value: L(context.setupState.notifications.labelKey),
+      value: settingsNotificationRootValue(context),
     }),
     renderSettingsNavRow({
       page: "language",
@@ -3465,23 +4358,20 @@ function renderSettingsRoot(context, { mobile }) {
           page: "install",
           icon: "homescreen",
           title: L("settings.install.title"),
-          value: L(context.setupState.install.labelKey),
+          value: settingsEnabledValue(context.standalone),
         })
       : "",
     renderSettingsNavRow({
       page: "awayMode",
       icon: "settings",
       title: L("settings.awayMode.title"),
-      value: state.session?.claudeAwayMode === true ? L("settings.claudeAway.on") : L("settings.claudeAway.off"),
+      value: settingsEnabledValue(state.session?.claudeAwayMode === true),
     }),
     renderSettingsNavRow({
       page: "autoPilot",
       icon: "approval",
       title: L("settings.autoPilot.title"),
-      value:
-        state.session?.autoPilotTrustedReads === true || state.session?.autoPilotTrustedWrites === true
-          ? L("common.enabled")
-          : L("common.disabled"),
+      value: settingsEnabledValue(hasAutoPilotEnabled()),
     }),
   ].filter(Boolean);
   const deviceRows = [
@@ -3493,6 +4383,12 @@ function renderSettingsRoot(context, { mobile }) {
         ? L("settings.device.count", { count: context.devices.length })
         : L("settings.pairing.connected"),
     }),
+    state.session?.remotePairingAvailable ? renderSettingsNavRow({
+      page: "remotePairing",
+      icon: "remote-connection",
+      title: L("settings.remotePairing.title"),
+      value: settingsEnabledValue(context.remotePairing?.enabled === true),
+    }) : "",
   ];
   const advancedRows = [
     renderSettingsNavRow({
@@ -3523,32 +4419,26 @@ function renderSettingsRoot(context, { mobile }) {
           page: "moltbook",
           icon: "item",
           title: L("settings.moltbook.title"),
-          subtitle: L("settings.moltbook.subtitle"),
-          value: context.moltbookScout?.enabled ? L("settings.status.enabled") : L("settings.status.disabled"),
+          value: settingsMoltbookRootValue(context),
         }) : "",
         state.session?.a2aRelayEnabled ? renderSettingsNavRow({
           page: "a2aRelay",
-          icon: "link",
+          icon: "agent-network",
           title: L("settings.a2aRelay.title"),
-          subtitle: L("settings.a2aRelay.subtitle"),
-          value: context.a2aRelay?.connected ? L("settings.status.connected") : L("settings.a2aRelay.status.disconnected"),
+          value: settingsA2aRelayRootValue(context),
         }) : "",
         state.session?.a2aShareEnabled ? renderSettingsNavRow({
           page: "a2aShare",
-          icon: "link",
+          icon: "file-event",
           title: L("settings.a2aShare.title"),
-          subtitle: L("settings.a2aShare.subtitle"),
-          value: context.a2aShare?.enabled ? L("settings.status.enabled") : L("settings.status.disabled"),
+          value: settingsA2aShareRootValue(context),
         }) : "",
         context.hazbase?.enabled ? renderSettingsNavRow({
           page: "wallet",
           icon: "coin",
           title: L("settings.wallet.title"),
           badge: "beta",
-          subtitle: L("settings.wallet.subtitle"),
-          value: context.hazbase?.sessionInvalid
-            ? L("settings.hazbase.status.sessionExpired")
-            : context.hazbase?.signedIn ? L("settings.hazbase.status.signedIn") : L("settings.hazbase.status.signedOut"),
+          value: settingsWalletRootValue(context),
         }) : "",
       ].filter(Boolean)) : ""}
       ${renderSettingsGroup(L("settings.pairing.title"), deviceRows)}
@@ -3610,6 +4500,9 @@ function renderSettingsSubpage(context, { mobile }) {
     case "wallet":
       content = renderSettingsWalletPage(context);
       break;
+    case "remotePairing":
+      content = renderSettingsRemotePairingPage(context);
+      break;
     default:
       content = "";
   }
@@ -3624,11 +4517,14 @@ function renderSettingsSubpage(context, { mobile }) {
 }
 
 function renderSettingsNotificationsPage(context) {
-  const { push, permission, secureContext, standalone, supportsPushValue, serverEnabled } = context;
+  const { push, permission, standalone } = context;
+  const notificationEnabled = push.serverSubscribed === true;
   const statusRows = [
-    renderSettingsInfoRow(L("settings.row.status"), L(context.setupState.notifications.labelKey)),
-    renderSettingsInfoRow(L("settings.row.notificationPermission"), L(`settings.permission.${permission}`) || permission),
-    renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), push.serverSubscribed ? L("common.enabled") : L("common.disabled")),
+    renderSettingsInfoRow(L("settings.row.status"), notificationOverallValue(context)),
+    renderSettingsInfoRow(L("settings.row.notificationPermission"), notificationPermissionValue(permission), {
+      valueTone: permission === "granted" ? "enabled" : permission === "denied" ? "attention" : "disabled",
+    }),
+    renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), notificationReceiveValue(push)),
     push.lastSuccessfulDeliveryAtMs
       ? renderSettingsInfoRow(
           L("settings.row.lastSuccessfulDelivery"),
@@ -3639,12 +4535,6 @@ function renderSettingsNotificationsPage(context) {
   return `
     <div class="settings-page">
       ${renderSettingsGroup("", statusRows)}
-      ${renderSettingsGroup(L("settings.group.advanced"), [
-        renderSettingsInfoRow(L("settings.row.serverWebPush"), serverEnabled ? L("common.enabled") : L("common.disabled")),
-        renderSettingsInfoRow(L("settings.row.secureContext"), secureContext ? L("common.supported") : L("common.notSupported")),
-        renderSettingsInfoRow(L("settings.row.homeScreenApp"), standalone ? L("common.supported") : L("common.notSupported")),
-        renderSettingsInfoRow(L("settings.row.browserSupport"), supportsPushValue ? L("common.supported") : L("common.notSupported")),
-      ])}
       ${state.pushNotice ? `<p class="inline-alert inline-alert--success">${escapeHtml(state.pushNotice)}</p>` : ""}
       ${state.pushError ? `<p class="inline-alert inline-alert--danger">${escapeHtml(state.pushError)}</p>` : ""}
       ${renderSettingsActionPanel(renderSettingsNotificationActions({
@@ -3737,17 +4627,13 @@ function renderSettingsAdvancedPage(context) {
       ${context.diagnostics.map((message) => `<p class="inline-alert">${escapeHtml(message)}</p>`).join("")}
       ${renderSettingsGroup("", [
         renderSettingsInfoRow(L("settings.row.serverWebPush"), context.serverEnabled ? L("common.enabled") : L("common.disabled")),
-        renderSettingsInfoRow(L("settings.row.secureContext"), context.secureContext ? L("common.supported") : L("common.notSupported")),
-        renderSettingsInfoRow(L("settings.row.homeScreenApp"), context.standalone ? L("common.supported") : L("common.notSupported")),
-        renderSettingsInfoRow(L("settings.row.notificationPermission"), L(`settings.permission.${context.permission}`) || context.permission),
-        renderSettingsInfoRow(L("settings.row.browserSupport"), context.supportsPushValue ? L("common.supported") : L("common.notSupported")),
-        renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), context.push.serverSubscribed ? L("common.enabled") : L("common.disabled")),
-        context.push.lastSuccessfulDeliveryAtMs
-          ? renderSettingsInfoRow(
-              L("settings.row.lastSuccessfulDelivery"),
-              new Date(context.push.lastSuccessfulDeliveryAtMs).toLocaleString(state.locale)
-            )
-          : "",
+        renderSettingsInfoRow(L("settings.row.secureContext"), context.secureContext ? L("common.enabled") : L("common.disabled")),
+        renderSettingsInfoRow(L("settings.row.homeScreenApp"), settingsInstalledValue(context.standalone), {
+          valueTone: context.standalone ? "enabled" : "disabled",
+        }),
+        renderSettingsInfoRow(L("settings.row.browserSupport"), settingsSupportedValue(context.supportsPushValue), {
+          valueTone: context.supportsPushValue ? "enabled" : "disabled",
+        }),
         renderSettingsInfoRow(L("settings.row.version"), state.appVersion || L("common.unavailable")),
       ].filter(Boolean), { listClassName: "settings-list settings-list--compact" })}
       ${versionNotice}
@@ -3807,7 +4693,37 @@ function renderSettingsGroup(title, rows, options = {}) {
   `;
 }
 
-function renderSettingsNavRow({ page, icon, title, badge, subtitle, value }) {
+function settingsNavValueTone(value, explicitTone = "") {
+  if (explicitTone) {
+    return explicitTone;
+  }
+  const text = String(value || "").trim();
+  if (!text) {
+    return "";
+  }
+  if (text === L("common.enabled") || text === L("settings.status.enabled")) {
+    return "enabled";
+  }
+  if (text === L("common.disabled") || text === L("settings.status.disabled")) {
+    return "disabled";
+  }
+  if (text === L("settings.status.actionNeeded") || text === L("settings.status.blocked")) {
+    return "attention";
+  }
+  if (text === L("settings.status.supported") || text === L("settings.status.installed")) {
+    return "enabled";
+  }
+  if (text === L("settings.status.disconnected")) {
+    return "disconnected";
+  }
+  return "";
+}
+
+function renderSettingsNavRow({ page, icon, title, badge, subtitle, value, valueTone }) {
+  const tone = settingsNavValueTone(value, valueTone);
+  const valueClass = tone
+    ? `settings-row__value settings-row__value--${escapeHtml(tone)}`
+    : "settings-row__value";
   return `
     <button class="settings-nav-row" type="button" data-settings-subpage="${escapeHtml(page)}">
       <span class="settings-row__icon" aria-hidden="true">${renderIcon(icon)}</span>
@@ -3818,7 +4734,7 @@ function renderSettingsNavRow({ page, icon, title, badge, subtitle, value }) {
         </span>
         ${subtitle ? `<span class="settings-row__subtitle">${escapeHtml(subtitle)}</span>` : ""}
       </span>
-      <span class="settings-row__value">${escapeHtml(value || "")}</span>
+      <span class="${valueClass}">${escapeHtml(value || "")}</span>
       <span class="settings-row__chevron" aria-hidden="true">${renderIcon("chevron-right")}</span>
     </button>
   `;
@@ -3830,16 +4746,18 @@ function renderSettingsAwayModePage() {
   return `
     <div class="settings-page">
       ${renderSettingsGroup("", [`
-        <label class="reply-mode-switch" data-claude-away-toggle>
+        <label class="reply-mode-switch reply-mode-switch--settings" data-claude-away-toggle>
           <input type="checkbox" class="reply-mode-switch__input" ${enabled ? "checked" : ""} data-claude-away-checkbox />
-          <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
           <span class="reply-mode-switch__copy">
             <span class="reply-mode-switch__title">
               <span>${escapeHtml(L("settings.claudeAway.title"))}</span>
-              <span class="reply-mode-switch__state">${escapeHtml(stateLabel)}</span>
             </span>
             <span class="reply-mode-switch__hint">${escapeHtml(L("settings.claudeAway.description"))}</span>
           </span>
+          <span class="reply-mode-switch--settings__toggle">
+            <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
+            <span class="reply-mode-switch__state">${escapeHtml(stateLabel)}</span>
+          </span>
         </label>
       `])}
       <p class="settings-page-copy muted">${escapeHtml(L("settings.awayMode.codexNote"))}</p>
@@ -3853,24 +4771,25 @@ function renderSettingsAutoPilotPage() {
   const writeLaneContentEnabled = state.session?.autoPilotWriteLaneContent === true;
   const writeLaneUiTestsEnabled = state.session?.autoPilotWriteLaneUiTests === true;
   const writeLaneSourceEnabled = state.session?.autoPilotWriteLaneSource === true;
-  const trustedWritesEnabled =
-    writeLaneContentEnabled || writeLaneUiTestsEnabled || writeLaneSourceEnabled || state.session?.autoPilotTrustedWrites === true;
+  const trustedWritesEnabled = hasAutoPilotWriteLaneEnabled();
   const trustedWritesStateLabel = trustedWritesEnabled ? L("common.enabled") : L("common.disabled");
   const recentEntries = recentAutoPilotEntries();
   const suggestions = recentAutoPilotSuggestions();
   return `
     <div class="settings-page">
       ${renderSettingsGroup("", [`
-        <label class="reply-mode-switch reply-mode-switch--grouped" data-auto-pilot-toggle>
+        <label class="reply-mode-switch reply-mode-switch--settings reply-mode-switch--grouped" data-auto-pilot-toggle>
           <input type="checkbox" class="reply-mode-switch__input" ${trustedReadsEnabled ? "checked" : ""} data-auto-pilot-checkbox />
-          <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
           <span class="reply-mode-switch__copy">
             <span class="reply-mode-switch__title">
               <span>${escapeHtml(L("settings.autoPilot.trustedReadsTitle"))}</span>
-              <span class="reply-mode-switch__state">${escapeHtml(trustedReadsStateLabel)}</span>
             </span>
             <span class="reply-mode-switch__hint">${escapeHtml(L("settings.autoPilot.trustedReadsDescription"))}</span>
           </span>
+          <span class="reply-mode-switch--settings__toggle">
+            <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
+            <span class="reply-mode-switch__state">${escapeHtml(trustedReadsStateLabel)}</span>
+          </span>
         </label>
       `, `
         <div class="settings-toggle-subhead" role="presentation">
@@ -3880,40 +4799,46 @@ function renderSettingsAutoPilotPage() {
       `, `
         <div class="settings-toggle-subcopy muted">${escapeHtml(L("settings.autoPilot.trustedWritesDescription"))}</div>
       `, `
-        <label class="reply-mode-switch reply-mode-switch--grouped" data-auto-pilot-write-lane="content">
+        <label class="reply-mode-switch reply-mode-switch--settings reply-mode-switch--grouped" data-auto-pilot-write-lane="content">
           <input type="checkbox" class="reply-mode-switch__input" ${writeLaneContentEnabled ? "checked" : ""} data-auto-pilot-write-lane-checkbox="content" />
-          <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
           <span class="reply-mode-switch__copy">
             <span class="reply-mode-switch__title">
               <span>${escapeHtml(L("settings.autoPilot.writeLaneContentTitle"))}</span>
-              <span class="reply-mode-switch__state">${escapeHtml(writeLaneContentEnabled ? L("common.enabled") : L("common.disabled"))}</span>
             </span>
             <span class="reply-mode-switch__hint">${escapeHtml(L("settings.autoPilot.writeLaneContentDescription"))}</span>
           </span>
+          <span class="reply-mode-switch--settings__toggle">
+            <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
+            <span class="reply-mode-switch__state">${escapeHtml(writeLaneContentEnabled ? L("common.enabled") : L("common.disabled"))}</span>
+          </span>
         </label>
       `, `
-        <label class="reply-mode-switch reply-mode-switch--grouped" data-auto-pilot-write-lane="ui-tests">
+        <label class="reply-mode-switch reply-mode-switch--settings reply-mode-switch--grouped" data-auto-pilot-write-lane="ui-tests">
           <input type="checkbox" class="reply-mode-switch__input" ${writeLaneUiTestsEnabled ? "checked" : ""} data-auto-pilot-write-lane-checkbox="ui-tests" />
-          <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
           <span class="reply-mode-switch__copy">
             <span class="reply-mode-switch__title">
               <span>${escapeHtml(L("settings.autoPilot.writeLaneUiTestsTitle"))}</span>
-              <span class="reply-mode-switch__state">${escapeHtml(writeLaneUiTestsEnabled ? L("common.enabled") : L("common.disabled"))}</span>
             </span>
             <span class="reply-mode-switch__hint">${escapeHtml(L("settings.autoPilot.writeLaneUiTestsDescription"))}</span>
           </span>
+          <span class="reply-mode-switch--settings__toggle">
+            <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
+            <span class="reply-mode-switch__state">${escapeHtml(writeLaneUiTestsEnabled ? L("common.enabled") : L("common.disabled"))}</span>
+          </span>
         </label>
       `, `
-        <label class="reply-mode-switch reply-mode-switch--grouped" data-auto-pilot-write-lane="source">
+        <label class="reply-mode-switch reply-mode-switch--settings reply-mode-switch--grouped" data-auto-pilot-write-lane="source">
           <input type="checkbox" class="reply-mode-switch__input" ${writeLaneSourceEnabled ? "checked" : ""} data-auto-pilot-write-lane-checkbox="source" />
-          <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
           <span class="reply-mode-switch__copy">
             <span class="reply-mode-switch__title">
               <span>${escapeHtml(L("settings.autoPilot.writeLaneSourceTitle"))}</span>
-              <span class="reply-mode-switch__state">${escapeHtml(writeLaneSourceEnabled ? L("common.enabled") : L("common.disabled"))}</span>
             </span>
             <span class="reply-mode-switch__hint">${escapeHtml(L("settings.autoPilot.writeLaneSourceDescription"))}</span>
           </span>
+          <span class="reply-mode-switch--settings__toggle">
+            <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
+            <span class="reply-mode-switch__state">${escapeHtml(writeLaneSourceEnabled ? L("common.enabled") : L("common.disabled"))}</span>
+          </span>
         </label>
       `], { listClassName: "settings-list settings-list--toggle-group" })}
       <p class="settings-page-copy muted">${escapeHtml(L("settings.autoPilot.scopeNote"))}</p>
@@ -4537,33 +5462,290 @@ function renderSettingsA2aSharePage(context) {
           ${meta ? `<span class="settings-compose-entry__meta muted">${meta}</span>` : ""}
         </span>
       </div>
-    `;
-  });
-  if (hasMore) {
-    const remaining = items.length - visibleCount;
-    filesList.push(
-      `<button type="button" class="settings-compose-more" data-a2a-share-files-more>${escapeHtml(L("settings.a2aShare.showMore", { count: remaining }))}</button>`
-    );
-  } else if (items.length > PAGE_SIZE) {
-    filesList.push(
-      `<button type="button" class="settings-compose-more" data-a2a-share-files-collapse>${escapeHtml(L("settings.a2aShare.showLess"))}</button>`
-    );
-  }
+    `;
+  });
+  if (hasMore) {
+    const remaining = items.length - visibleCount;
+    filesList.push(
+      `<button type="button" class="settings-compose-more" data-a2a-share-files-more>${escapeHtml(L("settings.a2aShare.showMore", { count: remaining }))}</button>`
+    );
+  } else if (items.length > PAGE_SIZE) {
+    filesList.push(
+      `<button type="button" class="settings-compose-more" data-a2a-share-files-collapse>${escapeHtml(L("settings.a2aShare.showLess"))}</button>`
+    );
+  }
+
+  return `
+    <div class="settings-page">
+      ${renderSettingsGroup("", [
+        renderSettingsInfoRow(L("settings.row.a2aShareStatus"), statusLabel),
+        renderSettingsInfoRow(L("settings.row.a2aShareEndpoint"), share.shareHost || share.shareUrl || ""),
+        renderSettingsInfoRow(L("settings.row.a2aShareUserId"), share.userId || ""),
+      ])}
+      ${renderSettingsGroup(L("settings.a2aShare.storage.title"), storageRows)}
+      ${items.length
+        ? renderSettingsGroup(L("settings.a2aShare.files.title"), filesList)
+        : renderSettingsGroup(L("settings.a2aShare.files.title"), [
+            `<p class="settings-group__description muted">${escapeHtml(L("settings.a2aShare.files.empty"))}</p>`,
+          ])}
+      ${share.error ? `<p class="settings-page-copy muted">${escapeHtml(L("settings.a2aShare.error", { reason: share.error }))}</p>` : ""}
+    </div>
+  `;
+}
+
+function renderSettingsRemotePairingPage(context) {
+  // Always render — remote pairing is a feature toggle, not a credential-
+  // gated integration. If the bridge hasn't responded with a status payload
+  // yet, fall back to a default-disabled view so the toggle still works.
+  const status = context.remotePairing || {
+    enabled: false,
+    relayUrl: "",
+    configuredRelayUrl: "",
+    identityFingerprint: null,
+    sessions: [],
+    pairings: [],
+    auditEvents: [],
+  };
+
+  const enabled = status.enabled === true;
+  const sessions = Array.isArray(status.sessions) ? status.sessions : [];
+  const pairings = Array.isArray(status.pairings) ? status.pairings : [];
+  const auditEvents = Array.isArray(status.auditEvents) ? status.auditEvents : [];
+  const usingRelay = isRemotePairingUsingRelay();
+  const statusModel = remotePairingStatusModel(status, { usingRelay });
+  const sessionsByPub = new Map(
+    sessions.map((s) => [String(s.phonePub || "").toLowerCase(), s]),
+  );
+  const sessionsByPairingId = new Map(
+    sessions.map((s) => [String(s.pairingId || ""), s]),
+  );
+  const togglePending = state.remotePairingPending === "toggle";
+  const relayPending = state.remotePairingPending === "relayUrl";
+
+  // "This device" — the locally-stored enrollment record (if any). Read
+  // synchronously from localStorage on each render so the badge shows up
+  // immediately after a successful lan-enroll without waiting for state
+  // refresh. Returns null in storage-disabled contexts (Safari private
+  // mode etc.) — the page just renders without the indicator.
+  const localPairing = (() => {
+    try {
+      return loadRemotePairingState();
+    } catch {
+      return null;
+    }
+  })();
+  const localPhonePub = (localPairing?.phonePub || "").toLowerCase();
+  const localRegistered = Boolean(localPairing);
+
+  // Identity fingerprint row — shows the bridge's stable public key short-
+  // form so the human can verify what the phone is pairing against.
+  const fpRow = renderSettingsInfoRow(
+    L("settings.remotePairing.identity.fingerprint"),
+    status.identityFingerprint || L("settings.remotePairing.identity.empty"),
+  );
+
+  const connectionSection = `
+    <section class="settings-remote-connection">
+      <header class="settings-remote-connection__header">
+        <div class="settings-remote-connection__copy">
+          <p class="settings-remote-connection__title">${escapeHtml(L("settings.remotePairing.connection.title"))}</p>
+        </div>
+        <span class="settings-remote-status settings-remote-status--${escapeHtml(statusModel.tone)}">${escapeHtml(statusModel.label)}</span>
+      </header>
+      <label class="reply-mode-switch reply-mode-switch--settings" data-remote-pairing-toggle>
+        <input type="checkbox" class="reply-mode-switch__input"
+          ${enabled ? "checked" : ""}
+          ${togglePending ? "disabled" : ""}
+          data-remote-pairing-toggle-checkbox />
+        <span class="reply-mode-switch--settings__toggle">
+          <span class="reply-mode-switch__track" aria-hidden="true"><span class="reply-mode-switch__thumb"></span></span>
+          <span class="reply-mode-switch__state">${escapeHtml(enabled ? L("settings.claudeAway.on") : L("settings.claudeAway.off"))}</span>
+        </span>
+        <span class="reply-mode-switch__hint">${escapeHtml(L("settings.remotePairing.toggle.description"))}</span>
+      </label>
+      <p class="settings-remote-connection__trust">${escapeHtml(L("settings.remotePairing.security.copy"))}</p>
+    </section>
+  `;
+
+  // Relay URL editor. When empty, the bridge falls back to the compiled-in
+  // default — surfacing that here would require leaking it to the client,
+  // so we just show "" and lean on the placeholder.
+  const relayUrlValue = String(status.configuredRelayUrl || "");
+  const relayUrlSection = `
+    <section class="settings-group">
+      <p class="settings-group__title">${escapeHtml(L("settings.remotePairing.relayUrl.title"))}</p>
+      <div class="settings-input-row">
+        <input type="text"
+          class="settings-input"
+          data-remote-pairing-relay-url-input
+          value="${escapeHtml(relayUrlValue)}"
+          placeholder="${escapeHtml(L("settings.remotePairing.relayUrl.placeholder"))}"
+          ${relayPending ? "disabled" : ""}
+          autocomplete="off"
+          spellcheck="false" />
+        <button type="button"
+          class="secondary"
+          data-remote-pairing-relay-url-save
+          ${relayPending ? "disabled" : ""}>
+          ${escapeHtml(L("settings.remotePairing.relayUrl.save"))}
+        </button>
+      </div>
+      <p class="settings-group__description">${escapeHtml(L("settings.remotePairing.relayUrl.help"))}</p>
+    </section>
+  `;
+
+  // Pairings list — one card per phonePub on disk. "Live" badge if there's
+  // an open session; otherwise show the last-seen timestamp. The phone
+  // currently rendering this page gets an extra "This device" badge so the
+  // user can identify themselves in the list (especially useful when more
+  // than one phone is paired to the same Mac).
+  const otherPairings = localPhonePub
+    ? pairings.filter((p) => String(p.phonePub || "").toLowerCase() !== localPhonePub)
+    : pairings;
+  const pairingsRows = otherPairings.length === 0
+    ? `<div class="settings-copy-block"><p class="muted">${escapeHtml(L("settings.remotePairing.pairings.empty"))}</p></div>`
+    : `<div class="device-list">
+        ${otherPairings.map((p) => {
+        const session = sessionsByPub.get(String(p.phonePub || "").toLowerCase())
+          || sessionsByPairingId.get(String(p.pairingId || ""));
+        const live = isRemotePairingSessionConnected(session);
+        const lastSeenAtMs = Number(session?.lastSeenAtMs || p.lastSeenAtMs) || 0;
+        const lastSeen = lastSeenAtMs
+          ? new Date(lastSeenAtMs).toLocaleString(state.locale)
+          : L("settings.remotePairing.pairings.never");
+        const added = p.addedAtMs
+          ? new Date(p.addedAtMs).toLocaleString(state.locale)
+          : L("settings.remotePairing.pairings.never");
+        const pendingThis = state.remotePairingPending === `revoke:${p.phonePub}`;
+        return `
+          <article class="device-card" data-remote-pairing-row="${escapeHtml(p.phonePub)}">
+            <div class="device-card__header">
+              <div class="device-card__title-wrap">
+                <div class="device-card__headline">
+                  <span class="device-card__icon" aria-hidden="true">${renderIcon("iphone")}</span>
+                  <h3 class="device-card__title">${escapeHtml(p.label || p.phoneFingerprint || p.pairingId)}</h3>
+                </div>
+                <p class="device-card__subtitle">${escapeHtml(p.phoneFingerprint || p.phonePub.slice(0, 16))}</p>
+              </div>
+              <div class="device-card__badges">
+                <span class="device-card__badge ${live ? "device-card__badge--live" : "device-card__badge--offline"}">
+                  ${escapeHtml(live ? L("settings.remotePairing.pairings.live") : L("settings.remotePairing.pairings.offline"))}
+                </span>
+              </div>
+            </div>
+            <div class="device-card__meta">
+              ${renderDeviceMetaRow(L("settings.remotePairing.pairings.added"), added)}
+              ${renderDeviceMetaRow(L("settings.remotePairing.pairings.lastSeen"), lastSeen)}
+            </div>
+            <div class="device-card__actions">
+              <button type="button"
+                class="secondary secondary--wide"
+                data-remote-pairing-revoke="${escapeHtml(p.phonePub)}"
+                ${pendingThis ? "disabled" : ""}>
+                ${escapeHtml(L("settings.remotePairing.pairings.revoke"))}
+              </button>
+            </div>
+          </article>
+        `;
+      }).join("")}
+      </div>`;
+
+  // "This device" group — sits above the pairings list and tells the user
+  // explicitly whether *this phone* (the one rendering the page) is the
+  // enrolled one. Two states:
+  //   1. Enrolled: show the phone fingerprint + a confirmation copy.
+  //   2. Not enrolled: surface a hint that re-pairing on LAN registers
+  //      the device. (The hint applies even when other phones are paired
+  //      — they're not relevant to this device's relay status.)
+  const thisDeviceSection = (() => {
+    if (localRegistered) {
+      const fingerprint = localPairing.phoneFingerprint
+        || localPairing.phonePub.slice(0, 16);
+      const rotatePending = state.remotePairingPending === "rotateToken";
+      return renderSettingsGroup(L("settings.remotePairing.thisDevice.title"), [
+        `
+          <div class="device-list">
+            <article class="device-card">
+              <div class="device-card__header">
+                <div class="device-card__title-wrap">
+                  <div class="device-card__headline">
+                    <span class="device-card__icon" aria-hidden="true">${renderIcon("iphone")}</span>
+                    <h3 class="device-card__title">${escapeHtml(L("settings.remotePairing.thisDevice.registeredTitle"))}</h3>
+                  </div>
+                  <p class="device-card__subtitle">${escapeHtml(fingerprint)}</p>
+                </div>
+                <span class="device-card__badge">${escapeHtml(L("settings.remotePairing.pairings.thisDevice"))}</span>
+              </div>
+              <div class="device-card__meta">
+                ${renderDeviceMetaRow(L("settings.remotePairing.status.title"), statusModel.label)}
+                ${renderDeviceMetaRow(L("settings.remotePairing.thisDevice.fingerprint"), fingerprint)}
+              </div>
+              <div class="device-card__actions">
+                <button type="button"
+                  class="secondary secondary--wide"
+                  data-remote-pairing-rotate-token
+                  ${rotatePending || usingRelay ? "disabled" : ""}>
+                  ${escapeHtml(L("settings.remotePairing.token.rotate"))}
+                </button>
+              </div>
+              ${usingRelay ? `<p class="settings-page-copy muted settings-remote-device-hint">${escapeHtml(L("settings.remotePairing.token.lanOnly"))}</p>` : ""}
+            </article>
+          </div>
+        `,
+      ]);
+    }
+    return renderSettingsGroup(L("settings.remotePairing.thisDevice.title"), [
+      `
+        <div class="device-list">
+          <article class="device-card">
+            <div class="device-card__header">
+              <div class="device-card__title-wrap">
+                <div class="device-card__headline">
+                  <span class="device-card__icon" aria-hidden="true">${renderIcon("iphone")}</span>
+                  <h3 class="device-card__title">${escapeHtml(L("settings.remotePairing.thisDevice.notEnrolledTitle"))}</h3>
+                </div>
+              </div>
+            </div>
+            <div class="device-card__meta">
+              ${renderDeviceMetaRow(L("settings.remotePairing.status.title"), L("settings.remotePairing.status.disabled"))}
+              ${renderDeviceMetaRow(L("settings.remotePairing.thisDevice.fingerprint"), L("common.unavailable"))}
+            </div>
+            <p class="settings-page-copy muted settings-remote-device-hint">${escapeHtml(L("settings.remotePairing.thisDevice.notEnrolled"))}</p>
+          </article>
+        </div>
+      `,
+    ]);
+  })();
+
+  const detailsSection = `
+    <details class="settings-disclosure settings-remote-details" data-remote-pairing-details ${state.remotePairingDetailsOpen ? "open" : ""}>
+      <summary>${escapeHtml(L("settings.remotePairing.details.title"))}</summary>
+      <div class="settings-disclosure__body">
+        ${relayUrlSection}
+        ${renderSettingsGroup(L("settings.remotePairing.identity.title"), [fpRow])}
+      </div>
+    </details>
+  `;
+  const auditSection = renderSettingsGroup(L("settings.remotePairing.audit.title"), [
+    renderRemotePairingAudit(auditEvents),
+  ]);
+
+  const noticeBlock = state.remotePairingNotice
+    ? `<p class="settings-page-copy">${escapeHtml(state.remotePairingNotice)}</p>`
+    : "";
+  const errorBlock = state.remotePairingError
+    ? `<p class="settings-page-copy danger">${escapeHtml(state.remotePairingError)}</p>`
+    : "";
 
   return `
     <div class="settings-page">
-      ${renderSettingsGroup("", [
-        renderSettingsInfoRow(L("settings.row.a2aShareStatus"), statusLabel),
-        renderSettingsInfoRow(L("settings.row.a2aShareEndpoint"), share.shareHost || share.shareUrl || ""),
-        renderSettingsInfoRow(L("settings.row.a2aShareUserId"), share.userId || ""),
-      ])}
-      ${renderSettingsGroup(L("settings.a2aShare.storage.title"), storageRows)}
-      ${items.length
-        ? renderSettingsGroup(L("settings.a2aShare.files.title"), filesList)
-        : renderSettingsGroup(L("settings.a2aShare.files.title"), [
-            `<p class="settings-group__description muted">${escapeHtml(L("settings.a2aShare.files.empty"))}</p>`,
-          ])}
-      ${share.error ? `<p class="settings-page-copy muted">${escapeHtml(L("settings.a2aShare.error", { reason: share.error }))}</p>` : ""}
+      ${noticeBlock}
+      ${errorBlock}
+      ${connectionSection}
+      ${thisDeviceSection}
+      ${renderSettingsGroup(L("settings.remotePairing.pairings.otherTitle"), [pairingsRows])}
+      ${auditSection}
+      ${detailsSection}
     </div>
   `;
 }
@@ -5030,6 +6212,7 @@ function formatUsdcAtomic(atomic) {
 }
 
 function renderSettingsInfoRow(label, value, options = {}) {
+  const tone = settingsNavValueTone(value, options.valueTone || "");
   const rowClassName = [
     "settings-info-row",
     options.stacked ? "settings-info-row--stacked" : "",
@@ -5037,6 +6220,7 @@ function renderSettingsInfoRow(label, value, options = {}) {
   ].filter(Boolean).join(" ");
   const valueClassName = [
     "settings-info-row__value",
+    tone ? `settings-info-row__value--${tone}` : "",
     options.mono ? "settings-info-row__value--mono" : "",
     options.valueClassName || "",
   ].filter(Boolean).join(" ");
@@ -5083,9 +6267,17 @@ function renderTrustedDeviceCard(device) {
   const badge = device.currentDevice
     ? `<span class="device-card__badge">${escapeHtml(L("settings.device.thisDevice"))}</span>`
     : "";
-  const actionLabel = device.currentDevice
-    ? L("settings.action.removeThisDevice")
-    : L("settings.action.revokeDevice");
+  const actions = device.currentDevice
+    ? ""
+    : `
+      <div class="device-card__actions">
+        <button
+          class="secondary secondary--wide"
+          type="button"
+          data-device-revoke="${escapeHtml(device.deviceId)}"
+        >${escapeHtml(L("settings.action.revokeDevice"))}</button>
+      </div>
+    `;
 
   return `
     <article class="device-card">
@@ -5106,14 +6298,7 @@ function renderTrustedDeviceCard(device) {
         ${renderDeviceMetaRow(L("settings.row.pushStatus"), pushLabel)}
         ${renderDeviceMetaRow(L("settings.row.currentLanguage"), localeLabel)}
       </div>
-      <div class="device-card__actions">
-        <button
-          class="secondary secondary--wide"
-          type="button"
-          data-device-revoke="${escapeHtml(device.deviceId)}"
-          data-device-current="${device.currentDevice ? "true" : "false"}"
-        >${escapeHtml(actionLabel)}</button>
-      </div>
+      ${actions}
     </article>
   `;
 }
@@ -5186,8 +6371,9 @@ function renderStandardDetailMobile(detail) {
   const kindInfo = kindMeta(detail.kind, detail);
   const spaciousBodyDetail = TIMELINE_MESSAGE_KINDS.has(detail.kind);
   const plainIntro = renderDetailPlainIntro(detail, { mobile: true });
+  const hasCompletionReply = isCompletionReplyAvailable(detail);
   return `
-    <div class="mobile-detail-screen">
+    <div class="mobile-detail-screen ${hasCompletionReply ? "mobile-detail-screen--has-reply-dock" : ""}">
       <div class="detail-shell detail-shell--mobile">
         <div class="mobile-detail-scroll mobile-detail-scroll--detail">
           ${renderDetailMetaRow(detail, kindInfo, { mobile: true })}
@@ -5217,10 +6403,10 @@ function renderStandardDetailMobile(detail) {
           ${renderDetailDiffPanel(detail, { mobile: true })}
           ${renderDetailDiffThreadGroups(detail, { mobile: true })}
           ${renderDetailFileRefs(detail, { mobile: true })}
-          ${renderCompletionReplyComposer(detail, { mobile: true })}
         </div>
         ${detail.readOnly ? "" : renderActionButtons(detail.actions || [], { mobileSticky: true })}
       </div>
+      ${renderCompletionReplyDock(detail)}
     </div>
   `;
 }
@@ -5968,7 +7154,7 @@ function renderThreadShareDetail(detail, options = {}) {
 }
 
 function renderCompletionReplyComposer(detail, options = {}) {
-  if ((detail.kind !== "completion" && detail.kind !== "assistant_final") || detail.reply?.enabled !== true) {
+  if (!isCompletionReplyAvailable(detail)) {
     return "";
   }
 
@@ -6142,6 +7328,51 @@ function renderCompletionReplyComposer(detail, options = {}) {
   `;
 }
 
+function isCompletionReplyAvailable(detail) {
+  return Boolean(
+    detail &&
+    (detail.kind === "completion" || detail.kind === "assistant_final") &&
+    detail.reply?.enabled === true &&
+    detail.token
+  );
+}
+
+function renderCompletionReplyDock(detail) {
+  if (!isCompletionReplyAvailable(detail)) {
+    return "";
+  }
+  const providerVars = { provider: providerDisplayName(detail?.provider) };
+  return `
+    <div class="reply-dock" role="region" aria-label="${escapeHtml(L("reply.eyebrow"))}">
+      <button
+        class="reply-dock__button"
+        type="button"
+        data-open-completion-reply-sheet
+        data-token="${escapeHtml(detail.token)}"
+      >
+        <span class="reply-dock__label">${escapeHtml(L("reply.title", providerVars))}</span>
+      </button>
+    </div>
+  `;
+}
+
+function renderCompletionReplySheet(detail) {
+  if (!isCompletionReplyAvailable(detail) || state.completionReplySheetToken !== detail.token) {
+    return "";
+  }
+  const providerVars = { provider: providerDisplayName(detail?.provider) };
+  return `
+    <div class="reply-sheet-backdrop" data-close-completion-reply-sheet aria-hidden="true"></div>
+    <section class="reply-sheet" role="dialog" aria-modal="true" aria-label="${escapeHtml(L("reply.title", providerVars))}">
+      <div class="reply-sheet__handle" aria-hidden="true"></div>
+      <button class="reply-sheet__close" type="button" data-close-completion-reply-sheet aria-label="${escapeHtml(L("common.close"))}">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      ${renderCompletionReplyComposer(detail, { mobile: true, sheet: true })}
+    </section>
+  `;
+}
+
 function renderChoiceQuestions(detail) {
   const effectiveAnswers = getEffectiveChoiceDraftAnswers(detail);
   return detail.questions
@@ -6392,10 +7623,27 @@ function renderInstallBanner() {
   `;
 }
 
+function renderClientUpdateBanner() {
+  return `
+    <section class="install-banner install-banner--push">
+      <div class="install-banner__copy">
+        <strong>${escapeHtml(L("banner.clientUpdate.title"))}</strong>
+        <p class="muted">${escapeHtml(L("banner.clientUpdate.copy"))}</p>
+      </div>
+      <div class="actions install-banner__actions">
+        <button class="secondary" type="button" data-force-app-refresh>${escapeHtml(L("banner.clientUpdate.action"))}</button>
+      </div>
+    </section>
+  `;
+}
+
 function renderTopBanner() {
   if (!isDesktopLayout() && (state.detailOpen || isSettingsSubpageOpen())) {
     return "";
   }
+  if (state.clientUpdateRequired) {
+    return renderClientUpdateBanner();
+  }
   if (shouldShowInstallBanner()) {
     return renderInstallBanner();
   }
@@ -6922,6 +8170,23 @@ function bindShellInteractions() {
     });
   }
 
+  for (const button of document.querySelectorAll("[data-open-completion-reply-sheet][data-token]")) {
+    button.addEventListener("click", async () => {
+      state.completionReplySheetToken = button.dataset.token || "";
+      resetHorizontalViewportScroll();
+      await renderShell();
+      resetHorizontalViewportScroll();
+    });
+  }
+
+  for (const trigger of document.querySelectorAll("[data-close-completion-reply-sheet]")) {
+    trigger.addEventListener("click", async () => {
+      state.completionReplySheetToken = "";
+      resetHorizontalViewportScroll();
+      await renderShell();
+    });
+  }
+
   for (const input of document.querySelectorAll("[data-reply-mode-toggle][data-reply-token]")) {
     input.addEventListener("change", async () => {
       const token = input.dataset.replyToken || "";
@@ -7132,14 +8397,51 @@ function bindShellInteractions() {
     state.session.autoPilotWriteLaneSource = result?.writeLaneSourceEnabled === true;
   }
 
+  function snapshotAutoPilotSettings() {
+    return {
+      trustedReads: state.session?.autoPilotTrustedReads === true,
+      trustedWrites: state.session?.autoPilotTrustedWrites === true,
+      writeLaneContent: state.session?.autoPilotWriteLaneContent === true,
+      writeLaneUiTests: state.session?.autoPilotWriteLaneUiTests === true,
+      writeLaneSource: state.session?.autoPilotWriteLaneSource === true,
+    };
+  }
+
+  function restoreAutoPilotSettings(snapshot) {
+    if (!state.session || !snapshot) {
+      return;
+    }
+    state.session.autoPilotTrustedReads = snapshot.trustedReads === true;
+    state.session.autoPilotTrustedWrites = snapshot.trustedWrites === true;
+    state.session.autoPilotWriteLaneContent = snapshot.writeLaneContent === true;
+    state.session.autoPilotWriteLaneUiTests = snapshot.writeLaneUiTests === true;
+    state.session.autoPilotWriteLaneSource = snapshot.writeLaneSource === true;
+  }
+
+  function reconcileAutoPilotTrustedWrites() {
+    if (!state.session) {
+      return;
+    }
+    state.session.autoPilotTrustedWrites = Boolean(
+      state.session.autoPilotWriteLaneContent === true ||
+      state.session.autoPilotWriteLaneUiTests === true ||
+      state.session.autoPilotWriteLaneSource === true,
+    );
+  }
+
   for (const checkbox of document.querySelectorAll("[data-auto-pilot-checkbox]")) {
     checkbox.addEventListener("change", async () => {
       const next = checkbox.checked === true;
+      const previous = snapshotAutoPilotSettings();
+      if (state.session) {
+        state.session.autoPilotTrustedReads = next;
+      }
+      await renderShell();
       try {
         const result = await apiPost("/api/settings/auto-pilot", { trustedReadsEnabled: next });
         applyAutoPilotSettingsResult(result);
-        await refreshAuthenticatedState();
       } catch (error) {
+        restoreAutoPilotSettings(previous);
         state.pushError = error.message || String(error);
       }
       await renderShell();
@@ -7150,17 +8452,29 @@ function bindShellInteractions() {
     checkbox.addEventListener("change", async () => {
       const next = checkbox.checked === true;
       const lane = normalizeClientText(checkbox.getAttribute("data-auto-pilot-write-lane-checkbox") || "");
+      const previous = snapshotAutoPilotSettings();
       const payload =
         lane === "content"
           ? { writeLaneContentEnabled: next }
           : lane === "ui-tests"
             ? { writeLaneUiTestsEnabled: next }
             : { writeLaneSourceEnabled: next };
+      if (state.session) {
+        if (lane === "content") {
+          state.session.autoPilotWriteLaneContent = next;
+        } else if (lane === "ui-tests") {
+          state.session.autoPilotWriteLaneUiTests = next;
+        } else {
+          state.session.autoPilotWriteLaneSource = next;
+        }
+        reconcileAutoPilotTrustedWrites();
+      }
+      await renderShell();
       try {
         const result = await apiPost("/api/settings/auto-pilot", payload);
         applyAutoPilotSettingsResult(result);
-        await refreshAuthenticatedState();
       } catch (error) {
+        restoreAutoPilotSettings(previous);
         state.pushError = error.message || String(error);
       }
       await renderShell();
@@ -7181,11 +8495,23 @@ function bindShellInteractions() {
       if (!payload) {
         return;
       }
+      const previous = snapshotAutoPilotSettings();
+      if (state.session) {
+        if (lane === "content") {
+          state.session.autoPilotWriteLaneContent = true;
+        } else if (lane === "ui_tests") {
+          state.session.autoPilotWriteLaneUiTests = true;
+        } else {
+          state.session.autoPilotWriteLaneSource = true;
+        }
+        reconcileAutoPilotTrustedWrites();
+      }
+      await renderShell();
       try {
         const result = await apiPost("/api/settings/auto-pilot", payload);
         applyAutoPilotSettingsResult(result);
-        await refreshAuthenticatedState();
       } catch (error) {
+        restoreAutoPilotSettings(previous);
         state.pushError = error.message || String(error);
       }
       await renderShell();
@@ -7272,6 +8598,166 @@ function bindShellInteractions() {
     });
   }
 
+  // ─── Remote pairing (Phase 5c) ─────────────────────────────────────
+  // Optimistic flips with bridge-side reconciliation. The bridge endpoints
+  // hot-restart the orchestrator, so the post-POST `fetchRemotePairingStatus`
+  // call can briefly observe a transient state — that's fine, the next
+  // render will land on the steady state.
+  for (const details of document.querySelectorAll("[data-remote-pairing-details]")) {
+    details.addEventListener("toggle", () => {
+      state.remotePairingDetailsOpen = details.open === true;
+    });
+  }
+
+  for (const checkbox of document.querySelectorAll("[data-remote-pairing-toggle-checkbox]")) {
+    checkbox.addEventListener("change", async () => {
+      const next = checkbox.checked === true;
+      const previous = state.remotePairingStatus?.enabled === true;
+      if (!next && isRemotePairingUsingRelay() && !window.confirm(L("settings.remotePairing.toggle.offConfirm"))) {
+        checkbox.checked = previous;
+        return;
+      }
+      state.remotePairingNotice = "";
+      state.remotePairingError = "";
+      state.remotePairingPending = "toggle";
+      // Optimistic flip — render once with the new value disabled-during-pending,
+      // then reconcile with the bridge.
+      if (state.remotePairingStatus) {
+        state.remotePairingStatus = { ...state.remotePairingStatus, enabled: next };
+      } else {
+        state.remotePairingStatus = {
+          enabled: next,
+          relayUrl: "",
+          configuredRelayUrl: "",
+          identityFingerprint: null,
+          sessions: [],
+          pairings: [],
+          auditEvents: [],
+        };
+      }
+      await renderShell();
+      try {
+        await apiPost("/api/remote-pairing/toggle", { enabled: next });
+        state.remotePairingNotice = next
+          ? L("settings.remotePairing.notice.toggleOn")
+          : L("settings.remotePairing.notice.toggleOff");
+        await fetchRemotePairingStatus();
+      } catch (error) {
+        // Roll back to the previous value so the checkbox visually reverts.
+        if (state.remotePairingStatus) {
+          state.remotePairingStatus = { ...state.remotePairingStatus, enabled: previous };
+        }
+        state.remotePairingError = L("settings.remotePairing.error.toggleFailed");
+      } finally {
+        state.remotePairingPending = "";
+        await renderShell();
+      }
+    });
+  }
+
+  for (const button of document.querySelectorAll("[data-remote-pairing-relay-url-save]")) {
+    button.addEventListener("click", async () => {
+      // The input lives on the same page; querySelector grabs the (single)
+      // visible field. If we ever add multiple URL editors we'd need to
+      // scope this to a container — but right now there's exactly one.
+      const input = document.querySelector("[data-remote-pairing-relay-url-input]");
+      const trimmed = (input?.value || "").trim();
+      state.remotePairingNotice = "";
+      state.remotePairingError = "";
+      state.remotePairingPending = "relayUrl";
+      await renderShell();
+      try {
+        await apiPost("/api/remote-pairing/relay-url", { relayUrl: trimmed });
+        state.remotePairingNotice = L("settings.remotePairing.notice.relayUrlSaved");
+        await fetchRemotePairingStatus();
+      } catch (error) {
+        // Distinguish the validation error from a generic save failure so
+        // the user knows whether to fix the URL or retry.
+        state.remotePairingError = error?.errorKey === "invalid-relay-url"
+          ? L("settings.remotePairing.error.invalidRelayUrl")
+          : L("settings.remotePairing.error.relayUrlFailed");
+      } finally {
+        state.remotePairingPending = "";
+        await renderShell();
+      }
+    });
+  }
+
+  for (const button of document.querySelectorAll("[data-remote-pairing-rotate-token]")) {
+    button.addEventListener("click", async () => {
+      const local = loadRemotePairingState();
+      if (!local?.phonePub) return;
+      state.remotePairingNotice = "";
+      state.remotePairingError = "";
+      state.remotePairingPending = "rotateToken";
+      await renderShell();
+      try {
+        const response = await apiPost("/api/remote-pairing/rotate-token", { phonePub: local.phonePub });
+        saveRemotePairingState({
+          pairingId: response.pairingId,
+          relayToken: response.relayToken,
+          phonePub: response.phonePub,
+          phoneFingerprint: response.phoneFingerprint,
+          bridgePubHex: response.bridgePubHex,
+          bridgeFingerprint: response.bridgeFingerprint,
+          relayUrl: response.relayUrl,
+          label: response.label || local.label || "",
+          addedAtMs: Number.isFinite(response.addedAtMs) ? response.addedAtMs : local.addedAtMs,
+          relayTokenUpdatedAtMs: Number.isFinite(response.relayTokenUpdatedAtMs)
+            ? response.relayTokenUpdatedAtMs
+            : Date.now(),
+        });
+        state.remotePairingNotice = L("settings.remotePairing.notice.tokenRotated");
+        await fetchRemotePairingStatus();
+      } catch (error) {
+        state.remotePairingError = L("settings.remotePairing.error.tokenRotateFailed");
+      } finally {
+        state.remotePairingPending = "";
+        await renderShell();
+      }
+    });
+  }
+
+  for (const button of document.querySelectorAll("[data-remote-pairing-revoke]")) {
+    button.addEventListener("click", async () => {
+      const phonePub = button.dataset.remotePairingRevoke || "";
+      if (!phonePub) return;
+      if (!window.confirm(L("settings.remotePairing.pairings.revokeConfirm"))) return;
+      state.remotePairingNotice = "";
+      state.remotePairingError = "";
+      // Per-pub pending key so the renderer only disables this card's
+      // button, not every revoke button on the page.
+      state.remotePairingPending = `revoke:${phonePub}`;
+      await renderShell();
+      try {
+        await apiPost("/api/remote-pairing/revoke", { phonePub });
+        // If the revoked phone is THIS device, drop the local enrollment
+        // record too — otherwise the "this device" indicator would keep
+        // claiming the (now-revoked) record is live, and a future fetch
+        // routing layer would try to reuse the stale pairingId. Best
+        // effort: storage failures don't change the revoke outcome.
+        try {
+          const local = loadRemotePairingState();
+          if (
+            local
+            && local.phonePub.toLowerCase() === phonePub.toLowerCase()
+          ) {
+            clearRemotePairingState();
+          }
+        } catch {
+          // ignore — same fall-through as savePairingState
+        }
+        state.remotePairingNotice = L("settings.remotePairing.notice.revoked");
+        await fetchRemotePairingStatus();
+      } catch (error) {
+        state.remotePairingError = L("settings.remotePairing.error.revokeFailed");
+      } finally {
+        state.remotePairingPending = "";
+        await renderShell();
+      }
+    });
+  }
+
 
 for (const button of document.querySelectorAll("[data-hazbase-action]")) {
   button.addEventListener("click", async () => {
@@ -7548,24 +9034,13 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
       try {
         const decisionBody = { action: submittedAction, editedText };
         if (editedTitle) decisionBody.editedTitle = editedTitle;
-        const res = await fetch(`/api/items/moltbook-draft/${encodeURIComponent(token)}/decision`, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          credentials: "same-origin",
-          body: JSON.stringify(decisionBody),
-        });
-        if (!res.ok) {
-          const errBody = await res.json().catch(() => ({}));
-          alert(`Moltbook draft ${submittedAction} failed: ${errBody.error || res.status}`);
-          buttons.forEach((btn) => {
-            btn.disabled = false;
-            btn.classList.remove("is-loading", "is-dimmed");
-            btn.innerHTML = labelCache.get(btn);
-          });
-          if (textarea) textarea.readOnly = false;
-          moltbookDraftForm.dataset.submitting = "";
-          return;
-        }
+        // apiPost routes through LAN-first / relay-fallback and throws on
+        // !ok — the existing catch below handles both transport and HTTP
+        // failures uniformly.
+        await apiPost(
+          `/api/items/moltbook-draft/${encodeURIComponent(token)}/decision`,
+          decisionBody,
+        );
         // Mark local detail as resolved so re-render shows "already resolved" immediately.
         if (state.currentDetail?.kind === "moltbook_draft") {
           state.currentDetail.moltbookDraftEnabled = false;
@@ -7574,7 +9049,7 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
         await refreshAuthenticatedState();
         await renderShell();
       } catch (error) {
-        alert(`Moltbook draft error: ${error.message}`);
+        alert(`Moltbook draft ${submittedAction} failed: ${error.message}`);
         buttons.forEach((btn) => {
           btn.disabled = false;
           btn.classList.remove("is-loading", "is-dimmed");
@@ -7625,24 +9100,10 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
       try {
         const decisionBody = { action: submittedAction, instruction };
         if (executor) decisionBody.executor = executor;
-        const res = await fetch(`/api/items/a2a-task/${encodeURIComponent(token)}/decision`, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          credentials: "same-origin",
-          body: JSON.stringify(decisionBody),
-        });
-        if (!res.ok) {
-          const errBody = await res.json().catch(() => ({}));
-          alert(`A2A task ${submittedAction} failed: ${errBody.error || res.status}`);
-          buttons.forEach((btn) => {
-            btn.disabled = false;
-            btn.classList.remove("is-loading", "is-dimmed");
-            btn.innerHTML = labelCache.get(btn);
-          });
-          if (textarea) textarea.readOnly = false;
-          a2aTaskForm.dataset.submitting = "";
-          return;
-        }
+        await apiPost(
+          `/api/items/a2a-task/${encodeURIComponent(token)}/decision`,
+          decisionBody,
+        );
         if (state.currentDetail?.kind === "a2a_task") {
           state.currentDetail.a2aTaskEnabled = false;
           state.currentDetail.readOnly = true;
@@ -7650,7 +9111,7 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
         await refreshAuthenticatedState();
         await renderShell();
       } catch (error) {
-        alert(`A2A task error: ${error.message}`);
+        alert(`A2A task ${submittedAction} failed: ${error.message}`);
         buttons.forEach((btn) => {
           btn.disabled = false;
           btn.classList.remove("is-loading", "is-dimmed");
@@ -7691,24 +9152,10 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
       if (textarea) textarea.readOnly = true;
       const editedContent = normalizeClientText(new FormData(threadShareForm).get("shareContent"));
       try {
-        const res = await fetch(`/api/threads/share/${encodeURIComponent(token)}/decision`, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          credentials: "same-origin",
-          body: JSON.stringify({ decision: submittedAction, editedContent }),
-        });
-        if (!res.ok) {
-          const errBody = await res.json().catch(() => ({}));
-          alert(`Thread share ${submittedAction} failed: ${errBody.error || res.status}`);
-          buttons.forEach((btn) => {
-            btn.disabled = false;
-            btn.classList.remove("is-loading", "is-dimmed");
-            btn.innerHTML = labelCache.get(btn);
-          });
-          if (textarea) textarea.readOnly = false;
-          threadShareForm.dataset.submitting = "";
-          return;
-        }
+        await apiPost(
+          `/api/threads/share/${encodeURIComponent(token)}/decision`,
+          { decision: submittedAction, editedContent },
+        );
         if (state.currentDetail?.kind === "thread_share") {
           state.currentDetail.threadShareEnabled = false;
           state.currentDetail.readOnly = true;
@@ -7716,7 +9163,7 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
         await refreshAuthenticatedState();
         await renderShell();
       } catch (error) {
-        alert(`Thread share error: ${error.message}`);
+        alert(`Thread share ${submittedAction} failed: ${error.message}`);
         buttons.forEach((btn) => {
           btn.disabled = false;
           btn.classList.remove("is-loading", "is-dimmed");
@@ -7775,14 +9222,22 @@ for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
       await renderShell();
 
       try {
-        const requestBody = new FormData();
-        requestBody.set("text", text);
-        requestBody.set("planMode", draft.mode === "plan" ? "true" : "false");
-        requestBody.set("force", draft.confirmOverride === true ? "true" : "false");
-        for (const attachment of draft.attachments || []) {
-          if (attachment?.file) {
-            requestBody.append("image", attachment.file, attachment.name || attachment.file.name);
-          }
+        const attachments = (draft.attachments || []).filter((attachment) => attachment?.file);
+        let requestBody;
+        if (attachments.length > 0) {
+          requestBody = new FormData();
+          requestBody.set("text", text);
+          requestBody.set("planMode", draft.mode === "plan" ? "true" : "false");
+          requestBody.set("force", draft.confirmOverride === true ? "true" : "false");
+        } else {
+          requestBody = {
+            text,
+            planMode: draft.mode === "plan",
+            force: draft.confirmOverride === true,
+          };
+        }
+        for (const attachment of attachments) {
+          requestBody.append("image", attachment.file, attachment.name || attachment.file.name);
         }
         const replyKind = replyForm.dataset.replyKind || "completion";
         await apiPost(`/api/items/${encodeURIComponent(replyKind)}/${encodeURIComponent(token)}/reply`, requestBody);
@@ -7941,6 +9396,13 @@ function bindSharedUi(renderFn) {
     });
   }
 
+  for (const button of document.querySelectorAll("[data-force-app-refresh]")) {
+    button.addEventListener("click", async () => {
+      await forceAppRefreshFromLan();
+      await renderFn();
+    });
+  }
+
   for (const button of document.querySelectorAll("[data-install-guide-close]")) {
     button.addEventListener("click", async (event) => {
       if (button.classList.contains("modal-backdrop")) {
@@ -8608,6 +10070,10 @@ function renderIcon(name) {
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><rect x="7.2" y="2.8" width="9.6" height="18.4" rx="2.4"/><path d="M10 6.7h4"/><circle cx="12" cy="17.6" r="0.7" fill="currentColor" stroke="none"/></svg>`;
     case "language":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5c3.8 0 7 3.8 7 8.5s-3.2 8.5-7 8.5-7-3.8-7-8.5 3.2-8.5 7-8.5Z"/><path d="M5.8 9h12.4"/><path d="M5.8 15h12.4"/><path d="M12 3.8c1.9 2 3 4.9 3 8.2s-1.1 6.2-3 8.2c-1.9-2-3-4.9-3-8.2s1.1-6.2 3-8.2Z"/></svg>`;
+    case "agent-network":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.8" cy="7.2" r="2.7"/><circle cx="17.2" cy="7.2" r="2.7"/><circle cx="12" cy="17" r="3"/><path d="M9.2 8.8 11 14.1"/><path d="m14.8 8.8-1.9 5.3"/><path d="M9.5 7.2h5"/></svg>`;
+    case "remote-connection":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="12" width="14" height="7" rx="2"/><path d="M9 19h6"/><path d="M12 12v7"/><path d="M8.2 8.8a5.4 5.4 0 0 1 7.6 0"/><path d="M10.2 6.3a8.2 8.2 0 0 1 3.6 0"/><path d="M11.2 9.8a1.2 1.2 0 0 1 1.6 0"/></svg>`;
     case "link":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10.4 13.6 8.3 15.7a3 3 0 0 1-4.2-4.2l2.8-2.8a3 3 0 0 1 4.2 0"/><path d="m13.6 10.4 2.1-2.1a3 3 0 1 1 4.2 4.2l-2.8 2.8a3 3 0 0 1-4.2 0"/><path d="m9.5 14.5 5-5"/></svg>`;
     case "clip":
@@ -8758,13 +10224,138 @@ function handleDocumentVisibilityChange() {
   handlePotentialExternalNavigation();
 }
 
-async function apiGet(url) {
-  const response = await fetch(url, {
+async function hydrateTimelinePayloadImages(payload) {
+  if (!payload || !Array.isArray(payload.entries)) {
+    return payload;
+  }
+
+  const entries = await Promise.all(
+    payload.entries.map(async (entry) => hydrateItemImageUrls(entry))
+  );
+  return { ...payload, entries };
+}
+
+async function hydrateDetailImages(detail) {
+  if (!detail || !Array.isArray(detail.imageUrls)) {
+    return detail;
+  }
+  return hydrateItemImageUrls(detail);
+}
+
+async function hydrateItemImageUrls(item) {
+  const imageUrls = Array.isArray(item?.imageUrls) ? item.imageUrls.filter(Boolean) : [];
+  if (imageUrls.length === 0) {
+    return item;
+  }
+
+  const hydratedUrls = await Promise.all(imageUrls.map((url) => routedTimelineImageUrl(url)));
+  return {
+    ...item,
+    imageUrls: hydratedUrls.filter(Boolean),
+  };
+}
+
+async function routedTimelineImageUrl(imageUrl) {
+  const sourceUrl = normalizeClientText(imageUrl);
+  if (!sourceUrl || /^(?:blob:|data:)/iu.test(sourceUrl)) {
+    return sourceUrl;
+  }
+
+  const existing = timelineImageObjectUrlCache.get(sourceUrl);
+  if (existing?.objectUrl) {
+    existing.lastUsedMs = Date.now();
+    return existing.objectUrl;
+  }
+
+  try {
+    const response = await routedFetch(sourceUrl, {
+      credentials: "same-origin",
+      headers: {
+        Accept: "image/*",
+      },
+    });
+    if (!response.ok) {
+      return unavailableTimelineImageDataUrl();
+    }
+    const arrayBuffer = await response.arrayBuffer();
+    const contentType = responseHeader(response.headers, "content-type") || "application/octet-stream";
+    const objectUrl = URL.createObjectURL(new Blob([arrayBuffer], { type: contentType }));
+    timelineImageObjectUrlCache.set(sourceUrl, {
+      objectUrl,
+      lastUsedMs: Date.now(),
+    });
+    pruneTimelineImageObjectUrlCache();
+    return objectUrl;
+  } catch {
+    return unavailableTimelineImageDataUrl();
+  }
+}
+
+function unavailableTimelineImageDataUrl() {
+  const title = L("detail.imageUnavailable");
+  const subtitle = L("detail.imageUnavailableHint");
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 640 640">
+      <defs>
+        <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stop-color="#132026"/>
+          <stop offset="1" stop-color="#0a1116"/>
+        </linearGradient>
+      </defs>
+      <rect width="640" height="640" rx="34" fill="url(#bg)"/>
+      <rect x="24" y="24" width="592" height="592" rx="28" fill="none" stroke="#9cb5c5" stroke-opacity=".18" stroke-width="2"/>
+      <circle cx="320" cy="266" r="50" fill="#26343d"/>
+      <path d="M294 266h52M320 240v52" stroke="#d7e5ed" stroke-width="12" stroke-linecap="round" opacity=".78"/>
+      <text x="320" y="360" text-anchor="middle" fill="#d7e5ed" font-family="Avenir Next, Helvetica, Arial, sans-serif" font-size="31" font-weight="700">${escapeSvgText(title)}</text>
+      <text x="320" y="410" text-anchor="middle" fill="#9cb5c5" font-family="Avenir Next, Helvetica, Arial, sans-serif" font-size="22">${escapeSvgText(subtitle)}</text>
+    </svg>
+  `.trim();
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+}
+
+function escapeSvgText(value) {
+  return normalizeClientText(value)
+    .replace(/&/gu, "&amp;")
+    .replace(/</gu, "&lt;")
+    .replace(/>/gu, "&gt;");
+}
+
+function responseHeader(headers, name) {
+  const key = String(name || "").toLowerCase();
+  if (!headers || !key) {
+    return "";
+  }
+  if (typeof headers.get === "function") {
+    return headers.get(key) || "";
+  }
+  return headers[key] || headers[name] || "";
+}
+
+function pruneTimelineImageObjectUrlCache() {
+  if (timelineImageObjectUrlCache.size <= MAX_TIMELINE_IMAGE_OBJECT_URLS) {
+    return;
+  }
+  const staleEntries = [...timelineImageObjectUrlCache.entries()]
+    .sort((left, right) => Number(left[1]?.lastUsedMs || 0) - Number(right[1]?.lastUsedMs || 0))
+    .slice(0, Math.max(0, timelineImageObjectUrlCache.size - MAX_TIMELINE_IMAGE_OBJECT_URLS));
+  for (const [sourceUrl, entry] of staleEntries) {
+    if (entry?.objectUrl && typeof URL !== "undefined" && typeof URL.revokeObjectURL === "function") {
+      URL.revokeObjectURL(entry.objectUrl);
+    }
+    timelineImageObjectUrlCache.delete(sourceUrl);
+  }
+}
+
+async function apiGet(url, opts = {}) {
+  // routedFetch tries LAN first, then falls back to the relay tunnel when
+  // the phone is off-LAN. Returns a fetch-Response-compatible object so the
+  // rest of this function is identical to a plain `fetch()` call.
+  const response = await routedFetch(url, {
     credentials: "same-origin",
     headers: {
       Accept: "application/json",
     },
-  });
+  }, opts);
   if (!response.ok) {
     const errorInfo = await readError(response);
     const error = new Error(errorInfo.message);
@@ -8778,7 +10369,9 @@ async function apiGet(url) {
 
 async function apiPost(url, body) {
   const isFormDataBody = typeof FormData !== "undefined" && body instanceof FormData;
-  const response = await fetch(url, {
+  // Keep native FormData for LAN; routedFetch serializes it to multipart
+  // bytes only when the request has to travel through the remote relay.
+  const response = await routedFetch(url, {
     method: "POST",
     credentials: "same-origin",
     headers: isFormDataBody