viveworker 0.7.0-beta.0 → 0.7.0-beta.2

package/web/app.js

@@ -6,6 +6,8 @@ const PUSH_BANNER_DISMISS_KEY = "viveworker-push-banner-dismissed-v1";
 const INITIAL_DETECTED_LOCALE = detectBrowserLocale();
 const TIMELINE_MESSAGE_KINDS = new Set(["user_message", "assistant_commentary", "assistant_final"]);
 const TIMELINE_OPERATIONAL_KINDS = new Set(["approval", "plan", "plan_ready", "choice"]);
+const EXTERNAL_TARGET_TABS = new Set(["inbox", "timeline", "diff"]);
+const EXTERNAL_TARGET_INBOX_SUBTABS = new Set(["pending", "completed"]);
 const THREAD_FILTER_INTERACTION_DEFER_MS = 8000;
 const MAX_COMPLETION_REPLY_IMAGE_COUNT = 4;
 const NOTIFICATION_INTENT_CACHE = "viveworker-notification-intent-v1";
@@ -14,6 +16,12 @@ const NOTIFICATION_INTENT_PATH = "/__viveworker_notification_intent__";
 const state = {
   session: null,
   inbox: null,
+  // Flips to true after the first /api/inbox/diff response resolves
+  // (success OR failure). Until then the Code/diff tab shows skeleton
+  // shimmer cards instead of the "no entries" empty state, because the
+  // initial diff scan spawns git subprocesses per tracked repo and can
+  // take 1–3 seconds — the empty state was misleading during that window.
+  inboxDiffLoaded: false,
   timeline: null,
   devices: [],
   currentTab: "inbox",
@@ -52,6 +60,34 @@ const state = {
   a2aRelayStatus: null,
   a2aShareStatus: null,
   a2aShareRecentExpanded: 0,
+  hazbaseStatus: null,
+  hazbaseNotice: "",
+  hazbaseError: "",
+  // Session-only flag: once the Sepolia wallet is ready, the mainnet step
+  // is hidden behind a subtle opt-in link (most beta users won't activate
+  // it). Flipping this reveals the full mainnet step card for the rest of
+  // the session. Not persisted — reopening Wallet next visit starts hidden
+  // again, which is the desired default for the closed beta.
+  hazbaseMainnetOptIn: false,
+  // Sign-in OTP flow is a two-step send→verify dance. Showing both
+  // buttons side-by-side confused users; they clicked "Verify" before
+  // ever requesting a code. We gate the verify button behind a
+  // successful send by tracking that a code was just issued in this
+  // session (plus the email it was sent to, so verify doesn't re-prompt).
+  // Both reset on successful verify (or on page reload — losing the flag
+  // just means the user re-clicks "send", which is idempotent on the
+  // server side). Email + code are also mirrored here so re-renders
+  // triggered by polls/notices don't wipe what the user was typing —
+  // the <input value="..."> attributes read these back.
+  hazbaseOtpRequested: false,
+  hazbaseOtpEmail: "",
+  hazbaseOtpCode: "",
+  // Wallet logout is reversible in principle (same account + same passkey
+  // re-derives the same smart account address), but it still wipes the
+  // current session + any in-flight approvals and forces an OTP round-trip
+  // to recover — cheap to gate behind an explicit confirm. Session-only
+  // flag; flipped by the signOut button and cleared on confirm/cancel.
+  hazbaseLogoutConfirmOpen: false,
   a2aTaskExecutorPick: "codex",
   pushNotice: "",
   pushError: "",
@@ -73,10 +109,31 @@ const state = {
 };
 
 let detailLoadSequence = 0;
+let hazbasePasskeyModulePromise = null;
+
+async function loadHazbasePasskeyModule() {
+  if (!hazbasePasskeyModulePromise) {
+    hazbasePasskeyModulePromise = import("./hazbase-passkey.js");
+  }
+  return hazbasePasskeyModulePromise;
+}
+
+function hazbasePasskeyHostSupport() {
+  const protocol = normalizeClientText(window.location?.protocol || "");
+  const hostname = normalizeClientText(window.location?.hostname || "").toLowerCase();
+  const eligible = protocol === "https:" && Boolean(hostname) && hostname.endsWith(".local");
+  return {
+    eligible,
+    hostname,
+    detail: eligible ? "" : L("settings.hazbase.passkey.localHostRequired"),
+  };
+}
 
 const app = document.querySelector("#app");
 const params = new URLSearchParams(window.location.search);
 const initialItem = params.get("item") || "";
+const initialTargetTab = params.get("tab") || "";
+const initialTargetSubtab = params.get("subtab") || "";
 const initialPairToken = params.get("pairToken") || "";
 const initialFocusPending = params.get("focusPending") || "";
 let didReloadForServiceWorker = false;
@@ -101,14 +158,19 @@ boot().catch((error) => {
 
 async function boot() {
   updateManifestHref(initialPairToken);
-  await registerServiceWorker();
+  // 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(() => {});
   navigator.serviceWorker?.addEventListener("message", handleServiceWorkerMessage);
   window.addEventListener("resize", handleViewportChange, { passive: true });
   window.addEventListener("focus", handlePotentialExternalNavigation, { passive: true });
   window.addEventListener("pageshow", handlePotentialExternalNavigation, { passive: true });
   document.addEventListener("visibilitychange", handleDocumentVisibilityChange);
 
-  await refreshSession();
+  // Single round-trip for session + inbox(pending/completed) + timeline +
+  // devices. See `refreshBootstrap` for why we collapsed the boot fan-out.
+  await refreshBootstrap();
 
   if (!state.session?.authenticated && initialPairToken && shouldAutoPairFromBootstrapToken()) {
     try {
@@ -119,17 +181,19 @@ async function boot() {
     } catch (error) {
       state.pairError = error.message || String(error);
     }
-    await refreshSession();
+    await refreshBootstrap();
   }
 
   syncPairingTokenState(desiredBootstrapPairingToken());
 
   const parsedInitialItem = parseItemRef(initialItem);
   if (parsedInitialItem) {
+    const targetTab = sanitizeExternalTargetTab(initialTargetTab) || tabForItemKind(parsedInitialItem.kind, state.currentTab);
+    const targetSubtab = sanitizeExternalTargetInboxSubtab(initialTargetSubtab);
     state.currentItem = parsedInitialItem;
-    state.currentTab = tabForItemKind(parsedInitialItem.kind, state.currentTab);
+    state.currentTab = targetTab;
     if (state.currentTab === "inbox") {
-      state.inboxSubtab = inboxSubtabForItemKind(parsedInitialItem.kind);
+      state.inboxSubtab = inboxSubtabForItemKind(parsedInitialItem.kind, targetSubtab);
     }
     state.detailOpen = true;
     if (isFastPathItemRef(parsedInitialItem)) {
@@ -146,8 +210,6 @@ async function boot() {
   }
 
   await consumePendingNotificationIntent();
-  await syncDetectedLocalePreference();
-  await refreshAuthenticatedState();
   // `?focusPending=claude` marks this tab as the Claude-hook-opened popup:
   // auto-navigate to the newest unresolved Claude pending (plan/question)
   // detail view — but only when the user is not already in the middle of
@@ -156,10 +218,37 @@ async function boot() {
   if (initialFocusPending === "claude" && !state.currentItem) {
     state.claudePopupMode = true;
   }
-  maybeAutoFocusClaudePending();
+
+  // Bootstrap already populated session + inbox(pending/completed) +
+  // timeline + devices, so the shell renders with real data on first
+  // paint. No null-state fallback needed here.
   ensureCurrentSelection();
+  maybeAutoFocusClaudePending();
   await renderShell();
 
+  // Diff fetch runs as a background phase because `/api/inbox/diff`
+  // spawns `git` subprocesses per tracked repo and can stall for several
+  // seconds. The Code/diff tab lights up when this resolves.
+  refreshInboxDiff()
+    .then(async () => {
+      if (!shouldDeferRenderForActiveInteraction()) {
+        await renderShell();
+      }
+    })
+    .catch(() => {});
+
+  // Remote status probes (push/moltbook/a2a-relay/a2a-share — the share
+  // worker round-trip alone can block up to 10s). Re-renders when it
+  // resolves.
+  refreshAuthenticatedStateRemote()
+    .then(async () => {
+      if (!shouldDeferRenderForActiveInteraction()) {
+        await renderShell();
+      }
+    })
+    .catch(() => {});
+  syncDetectedLocalePreference().catch(() => {});
+
   setInterval(async () => {
     if (!state.session?.authenticated) {
       return;
@@ -168,11 +257,41 @@ async function boot() {
     if (consumedNotificationIntent) {
       return;
     }
-    await refreshAuthenticatedState();
+    // Split the poll tick into a fast local fan-out and a slow background
+    // fan-out. The fast calls are all in-memory bridge lookups (inbox,
+    // timeline, devices, push status, relay status) and typically resolve in
+    // under ~100 ms over localhost; rendering immediately after them keeps
+    // new user_message entries reaching the timeline within one scan tick.
+    // The slow calls — /api/inbox/diff (git subprocesses), moltbook scout
+    // status (cross-origin to moltbook.com on cache miss), and especially
+    // /api/share/status (10 s upstream timeout to share.viveworker.com) —
+    // used to gate the render on every poll, so a single share-worker
+    // cache miss stalled timeline updates for up to 10 seconds. Now they
+    // run in the background and trigger a second render when they resolve.
+    await Promise.all([
+      refreshInbox(),
+      refreshTimeline(),
+      refreshDevices(),
+      refreshPushStatus(),
+      fetchA2aRelayStatus(),
+    ]);
+    ensureCurrentSelection();
     maybeAutoFocusClaudePending();
     if (!shouldDeferRenderForActiveInteraction()) {
       await renderShell();
     }
+
+    Promise.allSettled([
+      refreshInboxDiff(),
+      fetchMoltbookScoutStatus(),
+      fetchA2aShareStatus(),
+    ])
+      .then(async () => {
+        if (!shouldDeferRenderForActiveInteraction()) {
+          await renderShell();
+        }
+      })
+      .catch(() => {});
   }, 3000);
 }
 
@@ -215,22 +334,84 @@ function handleViewportChange() {
 }
 
 async function refreshAuthenticatedState() {
-  await refreshInbox();
+  // Fire the two inbox halves in parallel so the diff's git subprocesses
+  // don't serialize behind pending+completed (or vice versa).
+  await Promise.all([refreshInbox(), refreshInboxDiff()]);
   await refreshTimeline();
   await refreshDevices();
   await refreshPushStatus();
   await fetchMoltbookScoutStatus();
   await fetchA2aRelayStatus();
   await fetchA2aShareStatus();
+  if (state.currentTab === "settings") {
+    await fetchHazbaseStatus();
+  }
   ensureCurrentSelection();
 }
 
+// Boot-time split: the first paint should not wait on cross-origin status
+// probes. `Local` covers in-memory bridge lookups (fast). `Remote` covers
+// everything that can stall on an external service (push config,
+// moltbook/a2a worker calls — the a2a share worker has a 10s timeout) and
+// runs in the background after the shell renders.
+async function refreshAuthenticatedStateLocal() {
+  await Promise.all([refreshInbox(), refreshTimeline(), refreshDevices()]);
+  ensureCurrentSelection();
+}
+
+async function refreshAuthenticatedStateRemote() {
+  await Promise.allSettled([
+    refreshPushStatus(),
+    fetchMoltbookScoutStatus(),
+    fetchA2aRelayStatus(),
+    fetchA2aShareStatus(),
+  ]);
+}
+
 async function refreshSession() {
   state.session = await apiGet("/api/session");
   syncPairingTokenState(desiredBootstrapPairingToken());
   applyResolvedLocale();
 }
 
+// One-shot boot fetch: hits `/api/bootstrap` which bundles session,
+// inbox (pending + completed), timeline, and devices into a single
+// HTTPS round-trip. Saves 3 additional TLS handshakes versus calling
+// the four endpoints in parallel, which is the dominant boot cost on
+// 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");
+  state.session = bootstrap?.session || null;
+  syncPairingTokenState(desiredBootstrapPairingToken());
+  applyResolvedLocale();
+
+  if (!state.session?.authenticated) {
+    state.devices = [];
+    state.deviceError = "";
+    return;
+  }
+
+  const fastInbox = bootstrap?.inbox || {};
+  const previousDiff = Array.isArray(state.inbox?.diff) ? state.inbox.diff : [];
+  state.inbox = {
+    pending: Array.isArray(fastInbox.pending) ? fastInbox.pending : [],
+    completed: Array.isArray(fastInbox.completed) ? fastInbox.completed : [],
+    diff: previousDiff,
+  };
+  syncDiffThreadFilter();
+  syncCompletedThreadFilter();
+  syncInboxSubtab();
+
+  state.timeline = bootstrap?.timeline || null;
+  syncTimelineThreadFilter();
+  syncTimelineKindFilter();
+
+  const devicesPayload = bootstrap?.devices;
+  state.devices = Array.isArray(devicesPayload?.devices) ? devicesPayload.devices : [];
+  state.deviceError = "";
+}
+
 async function syncDetectedLocalePreference() {
   if (!state.session?.authenticated || !state.session?.deviceId || !state.detectedLocale) {
     return;
@@ -248,16 +429,47 @@ async function syncDetectedLocalePreference() {
   applyResolvedLocale();
 }
 
-async function setLocaleOverride(nextLocale) {
-  const result = await apiPost("/api/session/locale", {
-    detectedLocale: state.detectedLocale,
-    overrideLocale: nextLocale || null,
+// Two-phase override: flip state.session + applyResolvedLocale synchronously
+// so the caller can renderShell() in the new language before the POST
+// round-trip, then reconcile with the server response. On failure the
+// previous session snapshot is restored so the UI rolls back.
+function applyLocaleOverrideOptimistically(nextLocale) {
+  if (!state.session) return null;
+  const previousSession = { ...state.session };
+  const optimistic = resolveLocalePreference({
+    overrideLocale: nextLocale || "",
+    detectedLocale: state.session?.deviceDetectedLocale || state.detectedLocale,
+    defaultLocale: state.session?.defaultLocale || DEFAULT_LOCALE,
+    fallbackLocale: DEFAULT_LOCALE,
   });
   state.session = {
     ...state.session,
-    ...result,
+    deviceOverrideLocale: nextLocale || "",
+    locale: optimistic.locale,
+    localeSource: optimistic.source,
   };
   applyResolvedLocale();
+  return previousSession;
+}
+
+async function persistLocaleOverride(nextLocale, previousSession) {
+  try {
+    const result = await apiPost("/api/session/locale", {
+      detectedLocale: state.detectedLocale,
+      overrideLocale: nextLocale || null,
+    });
+    state.session = {
+      ...state.session,
+      ...result,
+    };
+    applyResolvedLocale();
+  } catch (error) {
+    if (previousSession) {
+      state.session = previousSession;
+      applyResolvedLocale();
+    }
+    throw error;
+  }
 }
 
 function applyResolvedLocale() {
@@ -280,6 +492,8 @@ function L(key, vars = {}) {
   return t(state.locale || DEFAULT_LOCALE, key, vars);
 }
 
+
+
 function detectBrowserLocale() {
   if (Array.isArray(navigator.languages) && navigator.languages.length > 0) {
     for (const value of navigator.languages) {
@@ -363,6 +577,15 @@ async function fetchA2aShareStatus() {
   }
 }
 
+
+async function fetchHazbaseStatus() {
+  try {
+    state.hazbaseStatus = await apiGet("/api/hazbase/status");
+  } catch {
+    state.hazbaseStatus = null;
+  }
+}
+
 async function getClientPushState() {
   const registration = state.serviceWorkerRegistration || (await navigator.serviceWorker?.ready.catch(() => null));
   if (registration) {
@@ -385,12 +608,41 @@ async function getClientPushState() {
 }
 
 async function refreshInbox() {
-  state.inbox = await apiGet("/api/inbox");
+  const fast = await apiGet("/api/inbox");
+  // `/api/inbox` now returns only `{ pending, completed }`. The `diff`
+  // half lives at `/api/inbox/diff` because it spawns `git` subprocesses
+  // server-side and was blocking first paint of the completed/pending
+  // lists. Preserve whatever diff entries we already have in memory so
+  // polling doesn't wipe the diff tab between diff refetches.
+  const previousDiff = Array.isArray(state.inbox?.diff) ? state.inbox.diff : [];
+  state.inbox = {
+    pending: Array.isArray(fast?.pending) ? fast.pending : [],
+    completed: Array.isArray(fast?.completed) ? fast.completed : [],
+    diff: previousDiff,
+  };
   syncDiffThreadFilter();
   syncCompletedThreadFilter();
   syncInboxSubtab();
 }
 
+async function refreshInboxDiff() {
+  try {
+    const response = await apiGet("/api/inbox/diff");
+    const previous = state.inbox || { pending: [], completed: [] };
+    state.inbox = {
+      pending: Array.isArray(previous.pending) ? previous.pending : [],
+      completed: Array.isArray(previous.completed) ? previous.completed : [],
+      diff: Array.isArray(response?.diff) ? response.diff : [],
+    };
+    syncDiffThreadFilter();
+    syncInboxSubtab();
+  } finally {
+    // Always flip off the skeleton — a persistent error shouldn't leave the
+    // Code tab perpetually shimmering. The next poll cycle will retry.
+    state.inboxDiffLoaded = true;
+  }
+}
+
 async function refreshTimeline() {
   state.timeline = await apiGet("/api/timeline");
   syncTimelineThreadFilter();
@@ -466,9 +718,9 @@ function allInboxEntries() {
     return [];
   }
   return [
-    ...state.inbox.pending.map((item) => ({ item, status: "pending" })),
+    ...(Array.isArray(state.inbox.pending) ? state.inbox.pending.map((item) => ({ item, status: "pending" })) : []),
     ...(Array.isArray(state.inbox.diff) ? state.inbox.diff.map((item) => ({ item, status: "diff" })) : []),
-    ...state.inbox.completed.map((item) => ({ item, status: "completed" })),
+    ...(Array.isArray(state.inbox.completed) ? state.inbox.completed.map((item) => ({ item, status: "completed" })) : []),
   ];
 }
 
@@ -565,7 +817,7 @@ function listInboxEntries() {
   if (state.inboxSubtab === "completed") {
     return filteredCompletedEntries().map((item) => ({ item, status: "completed" }));
   }
-  return state.inbox.pending
+  return (Array.isArray(state.inbox.pending) ? state.inbox.pending : [])
     .filter((item) => entryMatchesProviderFilter(item))
     .map((item) => ({ item, status: "pending" }));
 }
@@ -914,6 +1166,10 @@ async function logout({ revokeCurrentDeviceTrust = false } = {}) {
 function resetAuthenticatedState() {
   state.session = null;
   state.inbox = null;
+  // Reset the diff-loaded flag so the next sign-in shows the skeleton
+  // again during the fresh /api/inbox/diff fetch instead of flashing the
+  // empty state from the previous session's terminal value.
+  state.inboxDiffLoaded = false;
   state.timeline = null;
   state.devices = [];
   state.currentItem = null;
@@ -985,6 +1241,7 @@ async function renderShell() {
       ${renderImageViewerModal()}
       ${renderInstallGuideModal()}
       ${renderLogoutConfirmModal()}
+      ${renderHazbaseLogoutConfirmModal()}
     </div>
   `;
 
@@ -1086,6 +1343,17 @@ function shouldDeferRenderForActiveInteraction() {
   ) {
     return true;
   }
+  if (
+    activeElement instanceof HTMLInputElement &&
+    activeElement.matches("[data-hazbase-input]")
+  ) {
+    // User is mid-edit on the wallet sign-in email/OTP field. A poll tick
+    // that re-renders here would blur the input and interrupt typing
+    // (state mirroring restores value + caret position, but the blur
+    // itself is still jarring, especially on iOS where it also dismisses
+    // the keyboard).
+    return true;
+  }
   if (
     activeElement instanceof HTMLSelectElement &&
     activeElement.matches("[data-timeline-thread-select], [data-diff-thread-select], [data-completed-thread-select]")
@@ -1937,6 +2205,12 @@ function renderCompletedCompletionCard(entry, sourceTab) {
   const timestampLabel = formatTimelineTimestamp(item.createdAtMs);
   const pillLabel = item.kind === "completion" ? L("common.task") : kindInfo.label;
   const pillTone = item.kind === "completion" ? "completion" : kindInfo.tone;
+  const compactSummary = normalizeClientText(summaryText);
+  const useThreadAsPrimaryTitle = Boolean(threadLabel) && /^\d+$/u.test(compactSummary);
+  const titleText = useThreadAsPrimaryTitle ? threadLabel : (summaryText || L("common.untitledItem"));
+  const secondarySummaryHtml = useThreadAsPrimaryTitle
+    ? `<p class="item-card__summary">${escapeHtml(summaryText)}</p>`
+    : "";
 
   return `
     <button
@@ -1958,7 +2232,8 @@ function renderCompletedCompletionCard(entry, sourceTab) {
       </div>
       <div class="item-card__content">
         ${threadLabel ? `<p class="item-card__thread">${escapeHtml(threadLabel)}</p>` : ""}
-        <h3 class="item-card__title">${escapeHtml(summaryText || L("common.untitledItem"))}</h3>
+        <h3 class="item-card__title">${escapeHtml(titleText)}</h3>
+        ${secondarySummaryHtml}
       </div>
     </button>
   `;
@@ -2007,9 +2282,16 @@ function renderTimelinePanel({ entries, desktop }) {
 function renderDiffPanel({ entries, desktop }) {
   const meta = tabMeta("diff");
   const listClassName = desktop ? "diff-list diff-list--desktop" : "diff-list";
-  const bodyHtml = entries.length
-    ? `<div class="${listClassName}">${entries.map((entry) => renderDiffEntry(entry)).join("")}</div>`
-    : renderEmptyList("diff");
+  let bodyHtml;
+  if (entries.length) {
+    bodyHtml = `<div class="${listClassName}">${entries.map((entry) => renderDiffEntry(entry)).join("")}</div>`;
+  } else if (!state.inboxDiffLoaded) {
+    // First /api/inbox/diff still in flight — show shimmer cards so the
+    // user sees something is happening instead of "no entries".
+    bodyHtml = renderDiffSkeleton(listClassName);
+  } else {
+    bodyHtml = renderEmptyList("diff");
+  }
 
   if (!desktop) {
     return `
@@ -2038,6 +2320,31 @@ function renderDiffPanel({ entries, desktop }) {
   `;
 }
 
+// Placeholder shimmer shown while the first /api/inbox/diff response is
+// pending. Shape mirrors `.diff-entry` so the tab doesn't visually jump when
+// real entries land. Three cards with decreasing prominence is enough to
+// signal activity without pretending to be a specific number of results.
+function renderDiffSkeleton(listClassName) {
+  const card = `
+    <div class="diff-entry diff-entry--skeleton" aria-hidden="true">
+      <div class="diff-entry__header">
+        <span class="diff-skeleton-line diff-skeleton-line--thread"></span>
+        <span class="diff-skeleton-line diff-skeleton-line--time"></span>
+      </div>
+      <span class="diff-skeleton-line diff-skeleton-line--title"></span>
+      <div class="diff-entry__files">
+        <span class="diff-skeleton-chip"></span>
+        <span class="diff-skeleton-chip diff-skeleton-chip--narrow"></span>
+      </div>
+    </div>
+  `;
+  return `
+    <div class="${listClassName}" role="status" aria-busy="true" aria-label="${escapeHtml(L("common.loading"))}">
+      ${card}${card}${card}
+    </div>
+  `;
+}
+
 function timelineThreadsForProvider(provider) {
   const entries = Array.isArray(state.timeline?.entries) ? state.timeline.entries : [];
   const byThread = new Map();
@@ -2893,6 +3200,7 @@ function buildSettingsContext() {
     moltbookScout: state.moltbookScoutStatus,
     a2aRelay: state.a2aRelayStatus,
     a2aShare: state.a2aShareStatus,
+    hazbase: state.hazbaseStatus,
   };
 }
 
@@ -3039,6 +3347,13 @@ function settingsPageMeta(page) {
         description: L("settings.awayMode.copy"),
         icon: "settings",
       };
+    case "autoPilot":
+      return {
+        id: "autoPilot",
+        title: L("settings.autoPilot.title"),
+        description: L("settings.autoPilot.copy"),
+        icon: "approval",
+      };
     case "moltbook":
       return {
         id: "moltbook",
@@ -3060,6 +3375,13 @@ function settingsPageMeta(page) {
         description: L("settings.a2aShare.copy"),
         icon: "link",
       };
+    case "wallet":
+      return {
+        id: "wallet",
+        title: L("settings.wallet.title"),
+        description: L("settings.wallet.copy"),
+        icon: "coin",
+      };
     case "a2aExecutor":
       // Executor settings integrated into a2aRelay page — redirect.
       return settingsPageMeta("a2aRelay");
@@ -3097,6 +3419,15 @@ function renderSettingsRoot(context, { mobile }) {
       title: L("settings.awayMode.title"),
       value: state.session?.claudeAwayMode === true ? L("settings.claudeAway.on") : L("settings.claudeAway.off"),
     }),
+    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"),
+    }),
   ].filter(Boolean);
   const deviceRows = [
     renderSettingsNavRow({
@@ -3132,7 +3463,7 @@ function renderSettingsRoot(context, { mobile }) {
           `
       }
       ${renderSettingsGroup(L("settings.group.general"), generalRows)}
-      ${(state.session?.moltbookEnabled || state.session?.a2aRelayEnabled || state.session?.a2aShareEnabled) ? renderSettingsGroup(L("settings.group.integrations"), [
+      ${(state.session?.moltbookEnabled || state.session?.a2aRelayEnabled || state.session?.a2aShareEnabled || context.hazbase?.enabled) ? renderSettingsGroup(L("settings.group.integrations"), [
         state.session?.moltbookEnabled ? renderSettingsNavRow({
           page: "moltbook",
           icon: "item",
@@ -3154,6 +3485,13 @@ function renderSettingsRoot(context, { mobile }) {
           subtitle: L("settings.a2aShare.subtitle"),
           value: context.a2aShare?.enabled ? L("settings.status.enabled") : L("settings.status.disabled"),
         }) : "",
+        context.hazbase?.enabled ? renderSettingsNavRow({
+          page: "wallet",
+          icon: "coin",
+          title: L("settings.wallet.title"),
+          subtitle: L("settings.wallet.subtitle"),
+          value: context.hazbase?.signedIn ? L("settings.hazbase.status.signedIn") : L("settings.hazbase.status.signedOut"),
+        }) : "",
       ].filter(Boolean)) : ""}
       ${renderSettingsGroup(L("settings.pairing.title"), deviceRows)}
       ${renderSettingsGroup(L("settings.group.advanced"), advancedRows)}
@@ -3198,6 +3536,9 @@ function renderSettingsSubpage(context, { mobile }) {
     case "awayMode":
       content = renderSettingsAwayModePage();
       break;
+    case "autoPilot":
+      content = renderSettingsAutoPilotPage();
+      break;
     case "moltbook":
       content = renderSettingsMoltbookPage(context);
       break;
@@ -3208,6 +3549,9 @@ function renderSettingsSubpage(context, { mobile }) {
     case "a2aShare":
       content = renderSettingsA2aSharePage(context);
       break;
+    case "wallet":
+      content = renderSettingsWalletPage(context);
+      break;
     default:
       content = "";
   }
@@ -3394,31 +3738,481 @@ function renderSettingsNavRow({ page, icon, title, subtitle, value }) {
         <span class="settings-row__title">${escapeHtml(title)}</span>
         ${subtitle ? `<span class="settings-row__subtitle">${escapeHtml(subtitle)}</span>` : ""}
       </span>
-      <span class="settings-row__value">${escapeHtml(value || "")}</span>
-      <span class="settings-row__chevron" aria-hidden="true">${renderIcon("chevron-right")}</span>
+      <span class="settings-row__value">${escapeHtml(value || "")}</span>
+      <span class="settings-row__chevron" aria-hidden="true">${renderIcon("chevron-right")}</span>
+    </button>
+  `;
+}
+
+function renderSettingsAwayModePage() {
+  const enabled = state.session?.claudeAwayMode === true;
+  const stateLabel = enabled ? L("settings.claudeAway.on") : L("settings.claudeAway.off");
+  return `
+    <div class="settings-page">
+      ${renderSettingsGroup("", [`
+        <label class="reply-mode-switch" 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>
+        </label>
+      `])}
+      <p class="settings-page-copy muted">${escapeHtml(L("settings.awayMode.codexNote"))}</p>
+    </div>
+  `;
+}
+
+function renderSettingsAutoPilotPage() {
+  const trustedReadsEnabled = state.session?.autoPilotTrustedReads === true;
+  const trustedReadsStateLabel = trustedReadsEnabled ? L("common.enabled") : L("common.disabled");
+  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 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>
+          <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>
+        </label>
+      `, `
+        <div class="settings-toggle-subhead" role="presentation">
+          <span class="settings-toggle-subhead__title">${escapeHtml(L("settings.autoPilot.trustedWritesTitle"))}</span>
+          <span class="settings-toggle-subhead__state">${escapeHtml(trustedWritesStateLabel)}</span>
+        </div>
+      `, `
+        <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">
+          <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>
+        </label>
+      `, `
+        <label class="reply-mode-switch 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>
+        </label>
+      `, `
+        <label class="reply-mode-switch 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>
+        </label>
+      `], { listClassName: "settings-list settings-list--toggle-group" })}
+      <p class="settings-page-copy muted">${escapeHtml(L("settings.autoPilot.scopeNote"))}</p>
+      ${
+        suggestions.length
+          ? renderSettingsGroup(
+              L("settings.autoPilot.suggestionsTitle"),
+              suggestions.map((suggestion) => renderSettingsAutoPilotSuggestion(suggestion))
+            )
+          : ""
+      }
+      ${
+        recentEntries.length
+          ? renderSettingsGroup(
+              L("settings.autoPilot.recentTitle"),
+              recentEntries.map((item) => renderSettingsAutoPilotRecentEntry(item))
+            )
+          : `
+            <section class="settings-group">
+              <p class="settings-group__title">${escapeHtml(L("settings.autoPilot.recentTitle"))}</p>
+              <div class="settings-copy-block settings-copy-block--compact">
+                <p class="muted">${escapeHtml(L("settings.autoPilot.recentEmpty"))}</p>
+              </div>
+            </section>
+          `
+      }
+    </div>
+  `;
+}
+
+function recentAutoPilotEntries(limit = 5) {
+  const entries = Array.isArray(state.timeline?.entries) ? state.timeline.entries : [];
+  return entries
+    .filter((entry) => isAutoPilotApprovalEntry(entry))
+    .sort((a, b) => (Number(b.createdAtMs) || 0) - (Number(a.createdAtMs) || 0))
+    .slice(0, limit);
+}
+
+function isAutoPilotApprovalEntry(entry) {
+  const stableId = normalizeClientText(entry?.stableId || "");
+  return (
+    normalizeClientText(entry?.kind || "") === "approval" &&
+    normalizeClientText(entry?.outcome || "") === "approved" &&
+    (stableId.endsWith(":autopilot") || stableId.includes(":autopilot-write"))
+  );
+}
+
+function autoPilotEntryMode(item) {
+  const stableId = normalizeClientText(item?.stableId || "");
+  return stableId.includes(":autopilot-write") ? "write" : "read";
+}
+
+function autoPilotEntryWriteLane(item) {
+  const stableId = normalizeClientText(item?.stableId || "");
+  const match = stableId.match(/:autopilot-write:([a-z_-]+)$/u);
+  return normalizeClientText(match?.[1] || "");
+}
+
+function isManualApprovedWriteEntry(entry) {
+  const stableId = normalizeClientText(entry?.stableId || "");
+  return (
+    normalizeClientText(entry?.kind || "") === "approval" &&
+    normalizeClientText(entry?.outcome || "") === "approved" &&
+    !stableId.includes(":autopilot") &&
+    normalizeClientFileRefs(entry?.fileRefs).length > 0 &&
+    normalizeClientText(entry?.diffText || "").length > 0
+  );
+}
+
+function autoPilotDeniedWritePathClient(fileRef) {
+  const normalized = normalizeClientText(fileRef || "");
+  if (!normalized) {
+    return true;
+  }
+  const lower = normalized.toLowerCase();
+  const segments = lower.split(/[\\/]+/u).filter(Boolean);
+  const basename = segments[segments.length - 1] || "";
+  if (
+    segments.some((segment) => [".ssh", ".aws", ".gnupg", ".azure", ".kube", ".github", ".gitlab", ".terraform", ".claude", ".husky", ".vscode"].includes(segment))
+  ) {
+    return true;
+  }
+  if (basename === ".npmrc" || basename === ".netrc" || basename === ".env" || basename.startsWith(".env.")) {
+    return true;
+  }
+  if (basename.endsWith(".pem") || basename.endsWith(".key") || basename.endsWith(".p12") || basename.endsWith(".pfx")) {
+    return true;
+  }
+  if (
+    [
+      "package.json",
+      "package-lock.json",
+      "pnpm-lock.yaml",
+      "yarn.lock",
+      "bun.lockb",
+      "cargo.toml",
+      "cargo.lock",
+      "gemfile",
+      "gemfile.lock",
+      "podfile",
+      "podfile.lock",
+      "composer.json",
+      "composer.lock",
+      "pipfile",
+      "pipfile.lock",
+      "poetry.lock",
+      "requirements.txt",
+      "dockerfile",
+      "wrangler.toml",
+      "tsconfig.json",
+      "tsconfig.tsbuildinfo",
+    ].includes(basename)
+  ) {
+    return true;
+  }
+  return /^id_[a-z0-9._-]+$/iu.test(basename) || basename.includes("secret") || basename.includes("credential");
+}
+
+function autoPilotContentWritePathClient(fileRef) {
+  const normalized = normalizeClientText(fileRef || "");
+  if (!normalized || autoPilotDeniedWritePathClient(normalized)) {
+    return false;
+  }
+  const lower = normalized.toLowerCase();
+  const segments = lower.split(/[\\/]+/u).filter(Boolean);
+  const basename = segments[segments.length - 1] || "";
+  const extension = basename.includes(".") ? `.${basename.split(".").pop().toLowerCase()}` : "";
+  const basenameWithoutExtension = extension ? basename.slice(0, -extension.length) : basename;
+  if ([".md", ".mdx", ".txt", ".rst", ".adoc"].includes(extension)) {
+    return true;
+  }
+  if (["license", "notice", "copying", "readme", "changelog", "contributing"].includes(basenameWithoutExtension.toLowerCase())) {
+    return true;
+  }
+  if (segments.includes("i18n") && [".js", ".ts", ".json", ".yaml", ".yml"].includes(extension)) {
+    return true;
+  }
+  if (segments.includes("messages") && extension === ".json") {
+    return true;
+  }
+  return false;
+}
+
+function autoPilotUiTestsWritePathClient(fileRef) {
+  const normalized = normalizeClientText(fileRef || "");
+  if (!normalized || autoPilotDeniedWritePathClient(normalized)) {
+    return false;
+  }
+  const lower = normalized.toLowerCase();
+  const segments = lower.split(/[\\/]+/u).filter(Boolean);
+  const basename = segments[segments.length - 1] || "";
+  const extension = basename.includes(".") ? `.${basename.split(".").pop().toLowerCase()}` : "";
+  if ([".css", ".scss", ".sass", ".less", ".styl", ".pcss"].includes(extension)) {
+    return true;
+  }
+  if (segments.includes("__tests__") || /\.(test|spec)\.[cm]?[jt]sx?$/u.test(basename)) {
+    return true;
+  }
+  if ((segments.includes("web") || segments.includes("components")) && [".js", ".jsx", ".ts", ".tsx", ".html"].includes(extension)) {
+    return true;
+  }
+  return false;
+}
+
+function autoPilotSourceWritePathClient(fileRef) {
+  const normalized = normalizeClientText(fileRef || "");
+  if (!normalized || autoPilotDeniedWritePathClient(normalized)) {
+    return false;
+  }
+  if (autoPilotContentWritePathClient(normalized) || autoPilotUiTestsWritePathClient(normalized)) {
+    return false;
+  }
+  return /\.(?:[cm]?[jt]sx?)$/u.test(normalized);
+}
+
+function diffAddedLinesClient(diffText) {
+  return String(diffText || "")
+    .replace(/\r\n/gu, "\n")
+    .split("\n")
+    .filter((line) => line.startsWith("+") && !line.startsWith("+++"))
+    .map((line) => line.slice(1));
+}
+
+function addedDiffLinesContainClient(diffText, pattern) {
+  return diffAddedLinesClient(diffText).some((line) => pattern.test(line));
+}
+
+function hasUnsafeUiOrTestWriteDiffClient(diffText) {
+  const patterns = [
+    /\bprocess\.env\b/u,
+    /\b(?:child_process|spawn|exec|execFile|fork)\b/u,
+    /\bfs\.(?:write|append|rm|unlink|rename|chmod|chown|copyFile|cp)\b/u,
+    /\b(?:fetch|axios|XMLHttpRequest)\s*\(/u,
+    /\bcrypto\b/u,
+    /\b(?:secret|token|password|privateKey|credential)\b/iu,
+  ];
+  return (
+    addedDiffLinesContainClient(diffText, /^\s*(?:import\s|export\s+.*\s+from\s)/u) ||
+    addedDiffLinesContainClient(diffText, /\brequire\s*\(/u) ||
+    patterns.some((pattern) => addedDiffLinesContainClient(diffText, pattern))
+  );
+}
+
+function hasUnsafeSourceWriteDiffClient(diffText) {
+  const patterns = [
+    /\bprocess\.env\b/u,
+    /\b(?:child_process|spawn|exec|execFile|fork)\b/u,
+    /\bfs\.(?:write|append|rm|unlink|rename|chmod|chown|copyFile|cp)\b/u,
+    /\b(?:fetch|axios|XMLHttpRequest)\s*\(/u,
+    /\b(?:net|tls|dgram|http2?)\b/u,
+    /\bcrypto\b/u,
+    /\b(?:secret|token|password|privateKey|credential)\b/iu,
+  ];
+  return (
+    addedDiffLinesContainClient(diffText, /^\s*(?:import\s|export\s+.*\s+from\s)/u) ||
+    addedDiffLinesContainClient(diffText, /\brequire\s*\(/u) ||
+    patterns.some((pattern) => addedDiffLinesContainClient(diffText, pattern))
+  );
+}
+
+function classifyManualWriteLaneSuggestion(entry) {
+  const fileRefs = normalizeClientFileRefs(entry?.fileRefs);
+  const diffText = normalizeClientText(entry?.diffText || "");
+  const added = Math.max(0, Number(entry?.diffAddedLines) || 0);
+  const removed = Math.max(0, Number(entry?.diffRemovedLines) || 0);
+  const totalChangedLines = added + removed;
+  if (!fileRefs.length || !diffText || totalChangedLines === 0) {
+    return "";
+  }
+  if (/^(?:new file mode|deleted file mode|rename from|rename to|old mode|new mode|similarity index|dissimilarity index|GIT binary patch|Binary files )/mu.test(diffText)) {
+    return "";
+  }
+  if (
+    fileRefs.length >= 1 &&
+    fileRefs.length <= 3 &&
+    totalChangedLines <= 120 &&
+    fileRefs.every((fileRef) => autoPilotContentWritePathClient(fileRef))
+  ) {
+    return "content";
+  }
+  if (
+    fileRefs.length >= 1 &&
+    fileRefs.length <= 2 &&
+    totalChangedLines <= 80 &&
+    fileRefs.every((fileRef) => autoPilotUiTestsWritePathClient(fileRef)) &&
+    !hasUnsafeUiOrTestWriteDiffClient(diffText)
+  ) {
+    return "ui_tests";
+  }
+  if (
+    fileRefs.length === 1 &&
+    totalChangedLines <= 40 &&
+    fileRefs.every((fileRef) => autoPilotSourceWritePathClient(fileRef)) &&
+    !hasUnsafeSourceWriteDiffClient(diffText)
+  ) {
+    return "source";
+  }
+  return "";
+}
+
+function isWriteLaneEnabled(lane) {
+  return lane === "content"
+    ? state.session?.autoPilotWriteLaneContent === true
+    : lane === "ui_tests"
+      ? state.session?.autoPilotWriteLaneUiTests === true
+      : state.session?.autoPilotWriteLaneSource === true;
+}
+
+function recentAutoPilotSuggestions(limit = 40, minCount = 3) {
+  const entries = Array.isArray(state.timeline?.entries) ? state.timeline.entries : [];
+  const counts = new Map();
+  for (const entry of entries
+    .filter((item) => isManualApprovedWriteEntry(item))
+    .sort((a, b) => (Number(b.createdAtMs) || 0) - (Number(a.createdAtMs) || 0))
+    .slice(0, limit)) {
+    const lane = classifyManualWriteLaneSuggestion(entry);
+    if (!lane || isWriteLaneEnabled(lane)) {
+      continue;
+    }
+    counts.set(lane, (counts.get(lane) || 0) + 1);
+  }
+  return ["content", "ui_tests", "source"]
+    .map((lane) => ({ lane, count: counts.get(lane) || 0 }))
+    .filter((item) => item.count >= minCount);
+}
+
+function firstMarkdownCodeFence(text) {
+  const match = String(text || "").match(/```(?:\w+)?\n([\s\S]*?)\n```/u);
+  return normalizeClientText(match?.[1] || "");
+}
+
+function truncateUiText(value, maxGlyphs = 92) {
+  const normalized = normalizeClientText(value || "");
+  if (!normalized) {
+    return "";
+  }
+  const glyphs = Array.from(normalized);
+  return glyphs.length > maxGlyphs ? `${glyphs.slice(0, maxGlyphs).join("")}…` : normalized;
+}
+
+function autoPilotEntryHeadline(item) {
+  const mode = autoPilotEntryMode(item);
+  if (mode === "read") {
+    return truncateUiText(firstMarkdownCodeFence(item?.messageText || "") || item?.summary || item?.title || "");
+  }
+
+  const fileRefs = normalizeClientFileRefs(item?.fileRefs);
+  const primaryRef = fileRefs[0] || item?.summary || item?.title || "";
+  const extraCount = Math.max(0, fileRefs.length - 1);
+  const stats =
+    Number.isFinite(Number(item?.diffAddedLines)) && Number.isFinite(Number(item?.diffRemovedLines))
+      ? ` (+${Math.max(0, Number(item?.diffAddedLines) || 0)} / -${Math.max(0, Number(item?.diffRemovedLines) || 0)})`
+      : "";
+  return truncateUiText(`${primaryRef}${extraCount > 0 ? ` +${extraCount}` : ""}${stats}`);
+}
+
+function renderSettingsAutoPilotRecentEntry(item) {
+  const mode = autoPilotEntryMode(item);
+  const badgeLabel = mode === "write" ? L("settings.autoPilot.recentWrite") : L("settings.autoPilot.recentRead");
+  const badgeClass = mode === "write" ? "settings-compose-badge--write" : "settings-compose-badge--read";
+  const iconName = mode === "write" ? "file-event" : "approval";
+  const iconToneClass = mode === "write" ? "settings-icon-entry__icon--write" : "settings-icon-entry__icon--read";
+  const headline = autoPilotEntryHeadline(item) || L("common.untitledItem");
+  const threadLabel = resolvedThreadLabel(item?.threadId || "", item?.threadLabel || "");
+  const laneLabel = ({
+    content: L("settings.autoPilot.recentContent"),
+    "ui_tests": L("settings.autoPilot.recentUiTests"),
+    source: L("settings.autoPilot.recentSource"),
+  }[autoPilotEntryWriteLane(item)] || "");
+  const metaParts = [providerDisplayName(item?.provider), formatTimelineTimestamp(item?.createdAtMs)].filter(Boolean);
+
+  return `
+    <button
+      type="button"
+      class="settings-compose-entry settings-icon-entry settings-autopilot-entry"
+      data-open-item-kind="${escapeHtml(item.kind)}"
+      data-open-item-token="${escapeHtml(item.token)}"
+      data-source-tab="timeline"
+    >
+      <span class="settings-icon-entry__icon ${iconToneClass}" aria-hidden="true">${renderIcon(iconName)}</span>
+      <span class="settings-icon-entry__body">
+        <span class="settings-icon-entry__title-row">
+          <span class="settings-compose-entry__title">${escapeHtml(headline)}</span>
+          <span class="settings-compose-badge ${badgeClass}">${escapeHtml(badgeLabel)}</span>
+          ${mode === "write" && laneLabel ? `<span class="settings-compose-badge settings-compose-badge--lane">${escapeHtml(laneLabel)}</span>` : ""}
+        </span>
+        <span class="settings-autopilot-entry__meta">${escapeHtml(metaParts.join(" · "))}</span>
+        ${threadLabel ? `<span class="settings-autopilot-entry__thread">${escapeHtml(threadLabel)}</span>` : ""}
+      </span>
     </button>
   `;
 }
 
-function renderSettingsAwayModePage() {
-  const enabled = state.session?.claudeAwayMode === true;
-  const stateLabel = enabled ? L("settings.claudeAway.on") : L("settings.claudeAway.off");
+function renderSettingsAutoPilotSuggestion({ lane, count }) {
+  const title =
+    lane === "content"
+      ? L("settings.autoPilot.suggestionContentTitle")
+      : lane === "ui_tests"
+        ? L("settings.autoPilot.suggestionUiTestsTitle")
+        : L("settings.autoPilot.suggestionSourceTitle");
+  const body =
+    lane === "content"
+      ? L("settings.autoPilot.suggestionContentBody", { count })
+      : lane === "ui_tests"
+        ? L("settings.autoPilot.suggestionUiTestsBody", { count })
+        : L("settings.autoPilot.suggestionSourceBody", { count });
   return `
-    <div class="settings-page">
-      ${renderSettingsGroup("", [`
-        <label class="reply-mode-switch" 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>
-        </label>
-      `])}
-      <p class="settings-page-copy muted">${escapeHtml(L("settings.awayMode.codexNote"))}</p>
+    <div class="settings-suggestion-card">
+      <div class="settings-suggestion-card__header">
+        <div>
+          <p class="settings-suggestion-card__title">${escapeHtml(title)}</p>
+          <p class="settings-suggestion-card__body">${escapeHtml(body)}</p>
+        </div>
+        <button
+          type="button"
+          class="primary settings-suggestion-card__action"
+          data-auto-pilot-suggest-lane="${escapeHtml(lane)}"
+        >${escapeHtml(L("settings.autoPilot.suggestionEnable"))}</button>
+      </div>
     </div>
   `;
 }
@@ -3694,6 +4488,388 @@ function renderSettingsA2aSharePage(context) {
   `;
 }
 
+function renderSettingsWalletPage(context) {
+  const hazbase = context.hazbase || { enabled: false };
+  if (!hazbase?.enabled) {
+    return `
+      <div class="settings-page">
+        <p class="settings-page-copy muted">${escapeHtml(L("settings.wallet.unavailable"))}</p>
+      </div>
+    `;
+  }
+  const flow = deriveHazbaseWalletFlow(hazbase);
+
+  // Progressive disclosure. Previous layout rendered the full status summary
+  // plus all four full-sized step cards at once; new account flows were
+  // dominated by locked-looking cards and it was hard to tell which step was
+  // actionable. Now we:
+  //  - skip `locked` steps entirely (still-unreachable actions add noise),
+  //  - collapse `complete` steps to a compact one-line row that keeps the
+  //    verified value visible (email / address) without a full card,
+  //  - keep the single `current`/`pending` step in the full action card so
+  //    the CTA is unambiguous,
+  //  - hide the optional mainnet step behind a subtle opt-in link until the
+  //    user explicitly requests it (see `state.hazbaseMainnetOptIn`).
+  // The compact rows also replace the former "Current status" summary group
+  // above the flow, so signed-in email / passkey state / addresses are no
+  // longer duplicated.
+  const guideRows = [
+    renderHazbaseWalletBanner(flow),
+    state.hazbaseNotice
+      ? `<div class="settings-copy-block settings-copy-block--compact wallet-flow-message wallet-flow-message--notice"><p>${escapeHtml(state.hazbaseNotice)}</p></div>`
+      : "",
+    state.hazbaseError
+      ? `<div class="settings-copy-block settings-copy-block--compact wallet-flow-message wallet-flow-message--error"><p>${escapeHtml(state.hazbaseError)}</p></div>`
+      : "",
+    renderHazbaseWalletStepList(flow),
+  ].filter(Boolean);
+  const advancedActions = hazbase.signedIn
+    ? `<button class="secondary secondary--wide" type="button" data-hazbase-action="logout">${escapeHtml(L("settings.hazbase.action.signOut"))}</button>`
+    : "";
+  // Render the wallet flow without `renderSettingsGroup`'s `.settings-list`
+  // wrapper. The banner (`.settings-copy-block`), notice/error blocks, and
+  // each step card (`.wallet-step-card`) already have their own rounded
+  // frame — wrapping them in another `.settings-list` produced a visible
+  // "box inside a box" nest. The title (`.settings-group__title`) still
+  // sits above a flat stack of sibling cards via `.wallet-setup-stack`.
+  const flowTitle = L("settings.wallet.flow.title");
+  // Brand attribution. The wallet stack (factory + validator + bundler +
+  // paymaster) is provided by hazBase; the link points to their LP so
+  // curious users can discover what's running the signing path.
+  const poweredBy = `
+    <p class="wallet-powered-by muted">
+      powered by <a href="https://lp.hazbase.com" target="_blank" rel="noopener noreferrer">hazBase</a>
+    </p>
+  `;
+  return `
+    <div class="settings-page">
+      <section class="settings-group">
+        ${flowTitle ? `<p class="settings-group__title">${escapeHtml(flowTitle)}</p>` : ""}
+        <div class="wallet-setup-stack">
+          ${guideRows.join("")}
+        </div>
+      </section>
+      ${advancedActions ? renderSettingsActionPanel(advancedActions, L("settings.wallet.advanced.title")) : ""}
+      ${poweredBy}
+    </div>
+  `;
+}
+
+function renderHazbaseWalletStepList(flow) {
+  const rendered = [];
+  for (const step of flow.steps) {
+    // Step 4 (Base mainnet) is hidden while hazbase's closed beta keeps
+    // chainId 8453 out of `WALLET_GATEWAY_CHAINS_JSON` — calling bootstrap
+    // against mainnet currently returns `unsupported_chain`, so there's no
+    // path for the user to complete the step. Step 3 (Base Sepolia) is the
+    // true completion boundary; the ready banner already keys off
+    // `coreReady = signedIn && hasPasskey && hasBaseSepolia`. Drop this
+    // guard (and restore the opt-in reveal) once mainnet is enabled
+    // server-side.
+    if (step.number === 4) {
+      continue;
+    }
+
+    // Locked steps don't render. Revealing them only adds grayed-out
+    // placeholders below the active step; users mistake the placeholder
+    // status chips for inactive buttons.
+    if (step.status === "locked") {
+      continue;
+    }
+
+    const mode = step.status === "complete" ? "compact" : "full";
+    rendered.push(renderHazbaseWalletStepCard(step, { mode }));
+  }
+  return `<div class="wallet-step-list">${rendered.join("")}</div>`;
+}
+
+function renderHazbaseWalletMainnetOptIn() {
+  return `
+    <button class="wallet-mainnet-optin" type="button" data-hazbase-action="mainnet-opt-in">
+      <span class="wallet-mainnet-optin__body">
+        <span class="wallet-mainnet-optin__label">${escapeHtml(L("settings.wallet.mainnet.optIn"))}</span>
+        <span class="wallet-mainnet-optin__hint muted">${escapeHtml(L("settings.wallet.mainnet.optInHint"))}</span>
+      </span>
+      <span class="wallet-mainnet-optin__chevron" aria-hidden="true">→</span>
+    </button>
+  `;
+}
+
+function deriveHazbaseWalletFlow(hazbase) {
+  const accounts = Array.isArray(hazbase.accounts) ? hazbase.accounts : [];
+  const baseSepolia = accounts.find((entry) => Number(entry.chainId) === 84532) || null;
+  const baseMainnet = accounts.find((entry) => Number(entry.chainId) === 8453) || null;
+  const signedIn = Boolean(hazbase.signedIn);
+  const passkeyHost = hazbasePasskeyHostSupport();
+  const hasPasskey = Boolean(hazbase.credentialId || hazbase.deviceBindingId);
+  const hasBaseSepolia = Boolean(baseSepolia?.smartAccountAddress);
+  const hasBaseMainnet = Boolean(baseMainnet?.smartAccountAddress);
+  const coreReady = signedIn && hasPasskey && hasBaseSepolia;
+
+  const actionButton = (labelKey, action, { primary = false, disabled = false } = {}) => `
+    <button
+      class="${primary ? "primary" : "secondary"} ${primary ? "primary--wide" : "secondary--wide"}"
+      type="button"
+      data-hazbase-action="${action}"
+      ${disabled ? "disabled" : ""}
+    >${escapeHtml(L(labelKey))}</button>
+  `;
+
+  return {
+    hasPasskey,
+    baseSepolia,
+    baseMainnet,
+    coreReady,
+    steps: [
+      {
+        number: 1,
+        icon: "approval",
+        title: L("settings.wallet.step.signIn.title"),
+        copy: L("settings.wallet.step.signIn.copy"),
+        detail: signedIn
+          ? hazbase.email || L("settings.hazbase.status.signedIn")
+          : state.hazbaseOtpRequested
+            ? L("settings.hazbase.status.otpAwaitingVerify")
+            : L("settings.hazbase.status.signedOut"),
+        status: signedIn ? "complete" : "current",
+        // Inline form: email input (always visible pre-sign-in) and the
+        // one-time password input (revealed after a successful send).
+        // Putting the field immediately above its submit button is the
+        // whole point — users don't have to guess "what does this button
+        // ask me?" before clicking.
+        form: signedIn
+          ? ""
+          : renderHazbaseSignInForm({
+              email: state.hazbaseOtpEmail || hazbase.email || "",
+              otpRequested: Boolean(state.hazbaseOtpRequested),
+              code: state.hazbaseOtpCode || "",
+            }),
+        // Sequential flow: before a code is requested, only the primary
+        // "send" action is visible. After a successful send we swap the
+        // primary CTA to "verify" and demote "send" to a quieter "resend"
+        // option in case the email never arrives. This keeps the user's
+        // next move unambiguous.
+        actions: signedIn
+          ? []
+          : state.hazbaseOtpRequested
+            ? [
+                actionButton("settings.hazbase.action.verifyOtp", "verify-otp", { primary: true }),
+                actionButton("settings.hazbase.action.resendOtp", "request-otp"),
+              ]
+            : [
+                actionButton("settings.hazbase.action.requestOtp", "request-otp", { primary: true }),
+              ],
+      },
+      {
+        number: 2,
+        icon: "lock",
+        title: L("settings.wallet.step.passkey.title"),
+        copy: L("settings.wallet.step.passkey.copy"),
+        detail: hasPasskey
+          ? L("settings.hazbase.passkey.ready")
+          : passkeyHost.eligible
+            ? L("settings.hazbase.passkey.missing")
+            : passkeyHost.detail,
+        status: hasPasskey ? "complete" : signedIn ? "current" : "locked",
+        actions: hasPasskey
+          ? []
+          : [
+              actionButton("settings.hazbase.action.registerPasskey", "register-passkey", {
+                primary: signedIn && passkeyHost.eligible,
+                disabled: !signedIn || !passkeyHost.eligible,
+              }),
+            ],
+      },
+      {
+        number: 3,
+        icon: "coin",
+        title: L("settings.wallet.step.baseSepolia.title"),
+        copy: L("settings.wallet.step.baseSepolia.copy"),
+        detail: baseSepolia?.smartAccountAddress || L("settings.hazbase.wallet.missing"),
+        monoDetail: Boolean(baseSepolia?.smartAccountAddress),
+        status: hasBaseSepolia ? "complete" : signedIn && hasPasskey ? "current" : "locked",
+        actions: hasBaseSepolia
+          ? []
+          : [
+              actionButton("settings.hazbase.action.bootstrapBaseSepolia", "bootstrap-base-sepolia", {
+                primary: signedIn && hasPasskey,
+                disabled: !signedIn || !hasPasskey,
+              }),
+            ],
+      },
+      {
+        number: 4,
+        icon: "coin",
+        title: L("settings.wallet.step.base.title"),
+        copy: L("settings.wallet.step.base.copy"),
+        detail: baseMainnet?.smartAccountAddress || L("settings.hazbase.wallet.missing"),
+        monoDetail: Boolean(baseMainnet?.smartAccountAddress),
+        status: hasBaseMainnet ? "complete" : coreReady ? "optional" : "locked",
+        actions: hasBaseMainnet
+          ? []
+          : [
+              actionButton("settings.hazbase.action.bootstrapBase", "bootstrap-base", {
+                disabled: !coreReady,
+              }),
+            ],
+      },
+    ],
+  };
+}
+
+function renderHazbaseWalletBanner(flow) {
+  const title = flow.coreReady ? L("settings.wallet.ready.title") : L("settings.wallet.flow.banner.title");
+  const className = flow.coreReady
+    ? "settings-copy-block settings-copy-block--stacked wallet-flow-banner wallet-flow-banner--ready"
+    : "settings-copy-block settings-copy-block--stacked wallet-flow-banner";
+  // Ready state: surface the smart-account address prominently so the user
+  // can see at a glance which wallet agents will use as `--pay-to` when
+  // gating paid shares / A2A payouts. The address is the single most
+  // actionable fact on this page once setup is complete — muted filler
+  // copy buries it.
+  const payoutAddress = flow.baseSepolia?.smartAccountAddress || "";
+  const copyLabel = L("settings.wallet.ready.copyAddress");
+  const body = flow.coreReady && payoutAddress
+    ? `
+      <p class="wallet-flow-banner__copy muted">${escapeHtml(L("settings.wallet.ready.payoutIntro"))}</p>
+      <button
+        class="wallet-flow-banner__address"
+        type="button"
+        data-wallet-address-copy="${escapeHtml(payoutAddress)}"
+        aria-label="${escapeHtml(copyLabel)}: ${escapeHtml(payoutAddress)}"
+      >
+        <span class="wallet-flow-banner__address-text">${escapeHtml(payoutAddress)}</span>
+        <span class="wallet-flow-banner__address-icon-slot">
+          <span class="wallet-flow-banner__address-icon wallet-flow-banner__address-icon--copy" aria-hidden="true">${renderIcon("copy")}</span>
+          <span class="wallet-flow-banner__address-icon wallet-flow-banner__address-icon--check" aria-hidden="true">${renderIcon("check")}</span>
+        </span>
+      </button>
+    `
+    : `<p class="wallet-flow-banner__copy muted">${escapeHtml(
+        flow.coreReady ? L("settings.wallet.ready.copy") : L("settings.wallet.flow.copy"),
+      )}</p>`;
+  return `
+    <div class="${className}">
+      <p class="wallet-flow-banner__eyebrow">${escapeHtml(L("settings.hazbase.title"))}</p>
+      <p class="wallet-flow-banner__title">${escapeHtml(title)}</p>
+      ${body}
+    </div>
+  `;
+}
+
+function renderHazbaseWalletStepCard(step, { mode = "full" } = {}) {
+  const statusMeta = {
+    complete: { label: L("settings.wallet.status.complete"), icon: "completed" },
+    current: { label: L("settings.wallet.status.current"), icon: "pending" },
+    locked: { label: L("settings.wallet.status.locked"), icon: "lock" },
+    optional: { label: L("settings.wallet.status.optional"), icon: "coin" },
+    pending: { label: L("settings.wallet.status.pending"), icon: "pending" },
+  }[step.status] || { label: L("settings.wallet.status.pending"), icon: "pending" };
+
+  if (mode === "compact") {
+    // Compact row for finished steps. Keeps the check icon + title + one-line
+    // detail visible (so the user can scan what's done at a glance) but
+    // drops the copy/actions to stop the page from being four blocks tall.
+    const detailClass = step.monoDetail
+      ? "wallet-step-card__compact-detail wallet-step-card__compact-detail--mono"
+      : "wallet-step-card__compact-detail";
+    return `
+      <div class="wallet-step-card wallet-step-card--compact wallet-step-card--${escapeHtml(step.status)}">
+        <span class="wallet-step-card__compact-icon" aria-hidden="true">${renderIcon(statusMeta.icon)}</span>
+        <div class="wallet-step-card__compact-body">
+          <p class="wallet-step-card__compact-title">${escapeHtml(step.title)}</p>
+          ${step.detail ? `<p class="${detailClass}">${escapeHtml(step.detail)}</p>` : ""}
+        </div>
+        <span class="wallet-step-card__compact-status" aria-hidden="true">${escapeHtml(statusMeta.label)}</span>
+      </div>
+    `;
+  }
+
+  return `
+    <article class="wallet-step-card wallet-step-card--${escapeHtml(step.status)}">
+      <div class="wallet-step-card__header">
+        <div class="wallet-step-card__headline">
+          <span class="wallet-step-card__icon" aria-hidden="true">${renderIcon(step.icon)}</span>
+          <div class="wallet-step-card__title-wrap">
+            <p class="wallet-step-card__eyebrow">${escapeHtml(L("settings.wallet.stepNumber", { count: step.number }))}</p>
+            <h3 class="wallet-step-card__title">${escapeHtml(step.title)}</h3>
+          </div>
+        </div>
+        <span class="wallet-step-card__status wallet-step-card__status--${escapeHtml(step.status)}">
+          <span class="wallet-step-card__status-icon" aria-hidden="true">${renderIcon(statusMeta.icon)}</span>
+          <span>${escapeHtml(statusMeta.label)}</span>
+        </span>
+      </div>
+      <p class="wallet-step-card__copy">${escapeHtml(step.copy)}</p>
+      <p class="wallet-step-card__detail ${step.monoDetail ? "wallet-step-card__detail--mono" : ""}">${escapeHtml(step.detail)}</p>
+      ${step.form || ""}
+      ${step.actions.length ? `<div class="wallet-step-card__actions">${step.actions.join("")}</div>` : ""}
+    </article>
+  `;
+}
+
+// Sign-in form sits inside step 1 when the user hasn't signed in yet.
+// Email field is always rendered (editable so users can correct a typo
+// and resend); OTP field only appears once a code has been issued. Both
+// inputs carry value="..." sourced from state so a poll-triggered
+// re-render doesn't wipe what the user was typing mid-edit.
+function renderHazbaseSignInForm({ email, otpRequested, code }) {
+  // Once the OTP has been sent we lock the email field so accidental edits
+  // can't invalidate the pending code. A small "change email" link is shown
+  // as the intentional escape hatch — clicking it reverts the form to the
+  // pre-sent state (code discarded, email stays for easy typo recovery).
+  const emailLocked = Boolean(otpRequested);
+  const emailLabelRow = emailLocked
+    ? `<span class="wallet-step-card__field-label-row">
+        <span class="wallet-step-card__field-label">${escapeHtml(L("settings.hazbase.field.emailLabel"))}</span>
+        <button
+          type="button"
+          class="wallet-step-card__field-link"
+          data-hazbase-action="change-email"
+        >${escapeHtml(L("settings.hazbase.action.changeEmail"))}</button>
+      </span>`
+    : `<span class="wallet-step-card__field-label">${escapeHtml(L("settings.hazbase.field.emailLabel"))}</span>`;
+  const emailField = `
+    <label class="wallet-step-card__field">
+      ${emailLabelRow}
+      <input
+        type="email"
+        class="wallet-step-card__field-input${emailLocked ? " wallet-step-card__field-input--locked" : ""}"
+        data-hazbase-input="otp-email"
+        value="${escapeHtml(email || "")}"
+        placeholder="${escapeHtml(L("settings.hazbase.field.emailPlaceholder"))}"
+        autocomplete="email"
+        inputmode="email"
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        ${emailLocked ? "disabled aria-disabled=\"true\"" : ""}
+      />
+    </label>
+  `;
+  const otpField = otpRequested
+    ? `
+    <label class="wallet-step-card__field">
+      <span class="wallet-step-card__field-label">${escapeHtml(L("settings.hazbase.field.otpLabel"))}</span>
+      <input
+        type="text"
+        class="wallet-step-card__field-input wallet-step-card__field-input--mono"
+        data-hazbase-input="otp-code"
+        value="${escapeHtml(code || "")}"
+        placeholder="${escapeHtml(L("settings.hazbase.field.otpPlaceholder"))}"
+        autocomplete="one-time-code"
+        inputmode="numeric"
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        maxlength="12"
+      />
+    </label>
+  `
+    : "";
+  return `<div class="wallet-step-card__form">${emailField}${otpField}</div>`;
+}
+
 function formatRelativeAge(ms) {
   if (!Number.isFinite(ms) || ms < 0) return "";
   // Intl.RelativeTimeFormat with numeric:"auto" gives us locale-aware phrasing
@@ -3754,8 +4930,16 @@ function formatUsdcAtomic(atomic) {
 }
 
 function renderSettingsInfoRow(label, value, options = {}) {
-  const rowClassName = ["settings-info-row", options.rowClassName || ""].filter(Boolean).join(" ");
-  const valueClassName = ["settings-info-row__value", options.valueClassName || ""].filter(Boolean).join(" ");
+  const rowClassName = [
+    "settings-info-row",
+    options.stacked ? "settings-info-row--stacked" : "",
+    options.rowClassName || "",
+  ].filter(Boolean).join(" ");
+  const valueClassName = [
+    "settings-info-row__value",
+    options.mono ? "settings-info-row__value--mono" : "",
+    options.valueClassName || "",
+  ].filter(Boolean).join(" ");
   const displayValue = options.rawValue ? value : escapeHtml(value);
   return `
     <div class="${rowClassName}">
@@ -3868,6 +5052,7 @@ function renderStandardDetailDesktop(detail) {
       <h2 class="detail-title detail-title--desktop">${renderDetailTitle(detail)}</h2>
       ${detail.readOnly || detail.kind === "approval" || detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "thread_share" ? "" : renderDetailLead(detail, kindInfo)}
       ${renderPreviousContextCard(detail)}
+      ${renderAutoPilotManualReview(detail)}
       ${renderInterruptedDetailNotice(detail)}
       ${renderMoltbookReplyComposer(detail)}
       ${renderMoltbookDraftComposer(detail)}
@@ -3907,6 +5092,7 @@ function renderStandardDetailMobile(detail) {
         <div class="mobile-detail-scroll mobile-detail-scroll--detail">
           ${renderDetailMetaRow(detail, kindInfo, { mobile: true })}
           ${renderPreviousContextCard(detail, { mobile: true })}
+          ${renderAutoPilotManualReview(detail, { mobile: true })}
           ${renderInterruptedDetailNotice(detail, { mobile: true })}
           ${renderMoltbookReplyComposer(detail, { mobile: true })}
           ${renderMoltbookDraftComposer(detail, { mobile: true })}
@@ -4087,6 +5273,25 @@ function renderPreviousContextCard(detail, options = {}) {
   `;
 }
 
+function renderAutoPilotManualReview(detail, options = {}) {
+  const review = detail?.autoPilotReview;
+  if (!review?.title || !review?.body) {
+    return "";
+  }
+  return `
+    <section class="detail-card detail-card--autopilot ${options.mobile ? "detail-card--mobile" : ""}">
+      <div class="detail-context-card__header">
+        <div class="detail-context-card__eyebrow">
+          <span class="detail-context-card__icon" aria-hidden="true">${renderIcon("settings")}</span>
+          <span>${escapeHtml(L("detail.autoPilotManualEyebrow"))}</span>
+        </div>
+      </div>
+      <p class="detail-context-card__kind">${escapeHtml(review.title)}</p>
+      <p class="detail-autopilot-copy">${escapeHtml(review.body)}</p>
+    </section>
+  `;
+}
+
 function renderDetailImageGallery(detail, options = {}) {
   const imageUrls = Array.isArray(detail?.imageUrls) ? detail.imageUrls.filter(Boolean) : [];
   if (imageUrls.length === 0) {
@@ -5168,6 +6373,35 @@ function renderImageViewerModal() {
   `;
 }
 
+function renderHazbaseLogoutConfirmModal() {
+  if (!state.hazbaseLogoutConfirmOpen) {
+    return "";
+  }
+  const email = state.hazbaseStatus?.email || "";
+  // Mirror the session-logout dialog's shape but drop the split-choice
+  // options — wallet sign-out is a single binary (log out or don't), no
+  // "keep this device trusted" toggle applies.
+  // Note: the backdrop uses a dedicated `data-close-hazbase-logout-confirm`
+  // marker (bound in bindSharedUi) rather than a `data-hazbase-action`.
+  // If we reused the action dispatcher here, an inside-card click would
+  // bubble up to the backdrop's handler and run a second async dispatch
+  // in parallel with the button's own handler — which races against the
+  // API call. The mirror approach matches the session-logout modal.
+  return `
+    <div class="modal-backdrop" data-close-hazbase-logout-confirm>
+      <section class="modal-card modal-card--confirm" role="dialog" aria-modal="true" aria-labelledby="hazbase-logout-confirm-title">
+        <div class="helper-copy">
+          <strong id="hazbase-logout-confirm-title">${escapeHtml(L("settings.hazbase.logout.confirm.title"))}</strong>
+          <p class="muted">${escapeHtml(L("settings.hazbase.logout.confirm.copy"))}</p>
+          ${email ? `<p class="muted"><code>${escapeHtml(email)}</code></p>` : ""}
+        </div>
+        <button class="secondary secondary--wide" type="button" data-hazbase-action="logout-confirm">${escapeHtml(L("settings.hazbase.logout.confirm.confirmLabel"))}</button>
+        <button class="ghost ghost--wide" type="button" data-close-hazbase-logout-confirm>${escapeHtml(L("common.cancel"))}</button>
+      </section>
+    </div>
+  `;
+}
+
 function renderLogoutConfirmModal() {
   if (!state.logoutConfirmOpen || !state.session?.authenticated) {
     return "";
@@ -5283,6 +6517,8 @@ function bindShellInteractions() {
     });
   }
 
+
+
   for (const select of document.querySelectorAll("[data-timeline-thread-select]")) {
     const handleInteractionStart = () => {
       markThreadFilterInteraction();
@@ -5316,6 +6552,7 @@ function bindShellInteractions() {
       state.timelineKindFilter = "all";
       state.timelineKindFilterOpen = false;
       state.completedThreadFilter = "all";
+      state.diffThreadFilter = "all";
       alignCurrentItemToVisibleEntries();
       await renderShell();
     });
@@ -5341,6 +6578,25 @@ function bindShellInteractions() {
     });
   }
 
+  for (const select of document.querySelectorAll("[data-diff-thread-select]")) {
+    const handleInteractionStart = () => {
+      markThreadFilterInteraction();
+    };
+    const handleInteractionEnd = () => {
+      clearThreadFilterInteraction();
+    };
+    select.addEventListener("pointerdown", handleInteractionStart);
+    select.addEventListener("click", handleInteractionStart);
+    select.addEventListener("focus", handleInteractionStart);
+    select.addEventListener("blur", handleInteractionEnd);
+    select.addEventListener("change", async () => {
+      clearThreadFilterInteraction();
+      state.diffThreadFilter = select.value || "all";
+      alignCurrentItemToVisibleEntries();
+      await renderShell();
+    });
+  }
+
   for (const select of document.querySelectorAll("[data-completed-thread-select]")) {
     const handleInteractionStart = () => {
       markThreadFilterInteraction();
@@ -5657,6 +6913,16 @@ function bindShellInteractions() {
       const action = button.dataset.pushAction;
       state.pushError = "";
       state.pushNotice = "";
+      // Immediate visual feedback — enable/disable inherently wait on
+      // Web Push APIs (permission prompt → pushManager.subscribe() →
+      // server POST → refreshPushStatus), which can take 1–3 seconds.
+      // Without this the button just sat there looking inert the whole
+      // time. The .is-loading + aria-busy pair matches the pattern used
+      // by approval action buttons elsewhere in this file.
+      const wasDisabled = button.disabled;
+      button.classList.add("is-loading");
+      button.disabled = true;
+      button.setAttribute("aria-busy", "true");
       try {
         if (action === "enable") {
           await enableNotifications();
@@ -5675,6 +6941,12 @@ function bindShellInteractions() {
         await refreshPushStatus();
       } catch (error) {
         state.pushError = error.message || String(error);
+        // Restore this specific button on failure; renderShell() below
+        // would rebuild it anyway but leaving it disabled between
+        // exception and render flashes a dead button.
+        button.classList.remove("is-loading");
+        button.disabled = wasDisabled;
+        button.removeAttribute("aria-busy");
       }
       await renderShell();
     });
@@ -5683,11 +6955,96 @@ function bindShellInteractions() {
   for (const checkbox of document.querySelectorAll("[data-claude-away-checkbox]")) {
     checkbox.addEventListener("change", async () => {
       const next = checkbox.checked === true;
+      const previous = state.session?.claudeAwayMode === true;
+      // Optimistic flip — the server round-trip and the old post-toggle
+      // refreshAuthenticatedState() (7 endpoints) used to gate the UI
+      // update. Flip state now, POST in background, roll back on error.
+      if (state.session) {
+        state.session.claudeAwayMode = next;
+      }
+      await renderShell();
       try {
         const result = await apiPost("/api/settings/claude-away-mode", { enabled: next });
+        if (state.session && result && Object.prototype.hasOwnProperty.call(result, "enabled")) {
+          const reconciled = result.enabled === true;
+          if (reconciled !== next) {
+            state.session.claudeAwayMode = reconciled;
+            await renderShell();
+          }
+        }
+      } catch (error) {
         if (state.session) {
-          state.session.claudeAwayMode = result?.enabled === true;
+          state.session.claudeAwayMode = previous;
         }
+        state.pushError = error.message || String(error);
+        await renderShell();
+      }
+    });
+  }
+
+  function applyAutoPilotSettingsResult(result) {
+    if (!state.session) {
+      return;
+    }
+    state.session.autoPilotTrustedReads = result?.trustedReadsEnabled === true;
+    state.session.autoPilotTrustedWrites = result?.trustedWritesEnabled === true;
+    state.session.autoPilotWriteLaneContent = result?.writeLaneContentEnabled === true;
+    state.session.autoPilotWriteLaneUiTests = result?.writeLaneUiTestsEnabled === true;
+    state.session.autoPilotWriteLaneSource = result?.writeLaneSourceEnabled === true;
+  }
+
+  for (const checkbox of document.querySelectorAll("[data-auto-pilot-checkbox]")) {
+    checkbox.addEventListener("change", async () => {
+      const next = checkbox.checked === true;
+      try {
+        const result = await apiPost("/api/settings/auto-pilot", { trustedReadsEnabled: next });
+        applyAutoPilotSettingsResult(result);
+        await refreshAuthenticatedState();
+      } catch (error) {
+        state.pushError = error.message || String(error);
+      }
+      await renderShell();
+    });
+  }
+
+  for (const checkbox of document.querySelectorAll("[data-auto-pilot-write-lane-checkbox]")) {
+    checkbox.addEventListener("change", async () => {
+      const next = checkbox.checked === true;
+      const lane = normalizeClientText(checkbox.getAttribute("data-auto-pilot-write-lane-checkbox") || "");
+      const payload =
+        lane === "content"
+          ? { writeLaneContentEnabled: next }
+          : lane === "ui-tests"
+            ? { writeLaneUiTestsEnabled: next }
+            : { writeLaneSourceEnabled: next };
+      try {
+        const result = await apiPost("/api/settings/auto-pilot", payload);
+        applyAutoPilotSettingsResult(result);
+        await refreshAuthenticatedState();
+      } catch (error) {
+        state.pushError = error.message || String(error);
+      }
+      await renderShell();
+    });
+  }
+
+  for (const button of document.querySelectorAll("[data-auto-pilot-suggest-lane]")) {
+    button.addEventListener("click", async () => {
+      const lane = normalizeClientText(button.getAttribute("data-auto-pilot-suggest-lane") || "");
+      const payload =
+        lane === "content"
+          ? { writeLaneContentEnabled: true }
+          : lane === "ui_tests"
+            ? { writeLaneUiTestsEnabled: true }
+            : lane === "source"
+              ? { writeLaneSourceEnabled: true }
+              : null;
+      if (!payload) {
+        return;
+      }
+      try {
+        const result = await apiPost("/api/settings/auto-pilot", payload);
+        applyAutoPilotSettingsResult(result);
         await refreshAuthenticatedState();
       } catch (error) {
         state.pushError = error.message || String(error);
@@ -5699,13 +7056,29 @@ function bindShellInteractions() {
   for (const checkbox of document.querySelectorAll("[data-a2a-public-checkbox]")) {
     checkbox.addEventListener("change", async () => {
       const next = checkbox.checked === true;
+      const previous = state.a2aRelayStatus?.acceptPublicTasks === true;
+      // Optimistic flip — POST + a follow-up GET of the (remote-worker)
+      // relay-status endpoint used to gate the visual update. Flip the
+      // local flag, render, then reconcile in background.
+      if (state.a2aRelayStatus) {
+        state.a2aRelayStatus = { ...state.a2aRelayStatus, acceptPublicTasks: next };
+      }
+      await renderShell();
       try {
         await apiPost("/api/a2a/public-tasks", { accept: next });
-        state.a2aRelayStatus = await apiGet("/api/a2a/relay-status");
+        apiGet("/api/a2a/relay-status")
+          .then((fresh) => {
+            state.a2aRelayStatus = fresh;
+            renderShell();
+          })
+          .catch(() => {});
       } catch (error) {
+        if (state.a2aRelayStatus) {
+          state.a2aRelayStatus = { ...state.a2aRelayStatus, acceptPublicTasks: previous };
+        }
         state.pushError = error.message || String(error);
+        await renderShell();
       }
-      await renderShell();
     });
   }
 
@@ -5713,13 +7086,24 @@ function bindShellInteractions() {
     radio.addEventListener("change", async () => {
       if (!radio.checked) return;
       const preference = radio.value || "auto";
+      const previous = state.session?.a2aExecutorPreference || "ask";
+      // Optimistic flip — the POST + refreshSession() GET used to gate
+      // any re-render that depends on the preference (e.g. downstream
+      // picker defaults). Flip locally and reconcile in background.
+      if (state.session) {
+        state.session.a2aExecutorPreference = preference;
+      }
+      await renderShell();
       try {
         await apiPost("/api/settings/a2a-executor", { preference });
-        await refreshSession();
+        refreshSession().catch(() => {});
       } catch (error) {
+        if (state.session) {
+          state.session.a2aExecutorPreference = previous;
+        }
         state.pushError = error.message || String(error);
+        await renderShell();
       }
-      await renderShell();
     });
   }
 
@@ -5749,18 +7133,189 @@ function bindShellInteractions() {
     });
   }
 
+
+for (const button of document.querySelectorAll("[data-hazbase-action]")) {
+  button.addEventListener("click", async () => {
+    state.hazbaseNotice = "";
+    state.hazbaseError = "";
+    const action = button.dataset.hazbaseAction || "";
+    try {
+      if (action === "request-otp") {
+        // Read from the DOM input, not just state. The state mirror is
+        // populated on every keystroke, but a pre-filled value (returning
+        // user whose email came back from hazbase status) never fires
+        // `input`, so state stays empty while the DOM shows the address.
+        // Treat DOM as authoritative and fall back to state.
+        const emailInput = document.querySelector('[data-hazbase-input="otp-email"]');
+        const email = (emailInput?.value || state.hazbaseOtpEmail || "").trim();
+        if (!email) throw new Error(L("error.hazbaseEmailRequired"));
+        const result = await apiPost("/api/hazbase/request-otp", { email });
+        state.hazbaseOtpEmail = email;
+        state.hazbaseOtpRequested = true;
+        state.hazbaseOtpCode = "";
+        state.hazbaseNotice = result?.debugCode
+          ? `${L("settings.hazbase.notice.otpRequested")} (${result.debugCode})`
+          : L("settings.hazbase.notice.otpRequested");
+      } else if (action === "verify-otp") {
+        // Same pattern — DOM wins, state fallback covers the rare case
+        // where the field was removed/re-added between type and click.
+        const emailInput = document.querySelector('[data-hazbase-input="otp-email"]');
+        const codeInput = document.querySelector('[data-hazbase-input="otp-code"]');
+        const email = (emailInput?.value || state.hazbaseOtpEmail || "").trim();
+        const code = (codeInput?.value || state.hazbaseOtpCode || "").trim();
+        if (!email) throw new Error(L("error.hazbaseEmailRequired"));
+        if (!code) throw new Error(L("error.hazbaseOtpRequired"));
+        await apiPost("/api/hazbase/verify-otp", { email, code });
+        state.hazbaseOtpRequested = false;
+        state.hazbaseOtpEmail = "";
+        state.hazbaseOtpCode = "";
+        state.hazbaseNotice = L("settings.hazbase.notice.otpVerified");
+      } else if (action === "register-passkey") {
+        if (!hazbasePasskeyHostSupport().eligible) {
+          throw new Error(L("error.hazbasePasskeyLocalHostRequired"));
+        }
+        const { createPasskeyRegistrationCredential } = await loadHazbasePasskeyModule();
+        const challenge = await apiPost("/api/hazbase/passkey/register/challenge", {});
+        const credential = await createPasskeyRegistrationCredential(challenge);
+        await apiPost("/api/hazbase/passkey/register/complete", {
+          challengeId: challenge.challengeId,
+          credential,
+        });
+        state.hazbaseNotice = L("settings.hazbase.notice.passkeyRegistered");
+      } else if (action === "bootstrap-base-sepolia" || action === "bootstrap-base") {
+        if (!hazbasePasskeyHostSupport().eligible) {
+          throw new Error(L("error.hazbasePasskeyLocalHostRequired"));
+        }
+        const { createPasskeyAssertionCredential } = await loadHazbasePasskeyModule();
+        const chainId = action === "bootstrap-base" ? 8453 : 84532;
+        const challenge = await apiPost("/api/hazbase/passkey/assert/challenge", { purpose: "bootstrap" });
+        const credential = await createPasskeyAssertionCredential(challenge);
+        await apiPost("/api/hazbase/passkey/assert/complete", {
+          challengeId: challenge.challengeId,
+          credential,
+          purpose: "bootstrap",
+        });
+        await apiPost("/api/hazbase/account/bootstrap", { chainId });
+        state.hazbaseNotice = L("settings.hazbase.notice.walletBootstrapped", { chainId });
+      } else if (action === "logout") {
+        // Gate wallet logout behind an explicit confirm — the modal's
+        // "confirm" button dispatches `logout-confirm`, which actually
+        // hits the API. Short-circuit here so the initial click only
+        // opens the dialog.
+        state.hazbaseLogoutConfirmOpen = true;
+        await renderShell();
+        return;
+      } else if (action === "logout-confirm") {
+        state.hazbaseLogoutConfirmOpen = false;
+        await apiPost("/api/hazbase/logout", {});
+        state.hazbaseNotice = L("settings.hazbase.notice.signedOut");
+      } else if (action === "change-email") {
+        // Flip the form back to pre-send mode. We keep the email so typo
+        // recovery ("hoshin" → "hoshino") stays one edit away, but drop
+        // the now-stale OTP code. No server call — hazbase invalidates
+        // the previous OTP automatically when a fresh one is requested.
+        state.hazbaseOtpRequested = false;
+        state.hazbaseOtpCode = "";
+        state.hazbaseNotice = "";
+        state.hazbaseError = "";
+        await renderShell();
+        // Move focus back to the (now re-enabled) email input so the user
+        // can start editing immediately.
+        document.querySelector('[data-hazbase-input="otp-email"]')?.focus();
+        return;
+      } else if (action === "mainnet-opt-in") {
+        // Pure client-side reveal — the mainnet step is always in the flow
+        // data, we just hide it behind an opt-in link to keep the default
+        // path (testnet only) focused. No network call; no status refetch.
+        state.hazbaseMainnetOptIn = true;
+        await renderShell();
+        return;
+      }
+      await fetchHazbaseStatus();
+    } catch (error) {
+      state.hazbaseError = error.message || String(error);
+    }
+    await renderShell();
+  });
+}
+
+// Mirror every keystroke into state so a background re-render (poll tick,
+// notice clear, etc.) can repopulate `value="..."` without wiping what
+// the user was typing. Reads happen at button-click time against state,
+// which is why we don't need to also query the DOM in the handler.
+for (const input of document.querySelectorAll("[data-hazbase-input]")) {
+  const name = input.dataset.hazbaseInput || "";
+  input.addEventListener("input", () => {
+    if (name === "otp-email") state.hazbaseOtpEmail = input.value;
+    else if (name === "otp-code") state.hazbaseOtpCode = input.value;
+  });
+  // Enter key submits the step. In the email field it triggers "send"
+  // (or "verify" once a code was already issued — the email field stays
+  // editable post-send to support typo recovery via resend). In the OTP
+  // field it always submits verify.
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" || event.isComposing) return;
+    event.preventDefault();
+    const target = name === "otp-code"
+      ? "verify-otp"
+      : state.hazbaseOtpRequested ? "verify-otp" : "request-otp";
+    const btn = document.querySelector(`[data-hazbase-action="${target}"]`);
+    btn?.click();
+  });
+}
+
+// Tap-to-copy the wallet payout address. We swap the clipboard icon to a
+// check mark for ~1.5s via CSS (toggling `.is-copied`) rather than a full
+// re-render, so focus stays on the button and the rest of the settings
+// page doesn't flicker. The address sits inside a banner that doesn't
+// otherwise re-render on every tick, so an ephemeral class flip is the
+// cleanest way to acknowledge the copy.
+for (const button of document.querySelectorAll("[data-wallet-address-copy]")) {
+  button.addEventListener("click", async () => {
+    const text = button.dataset.walletAddressCopy || "";
+    if (!text) return;
+    try {
+      await copyTextToClipboard(text);
+      button.classList.add("is-copied");
+      if (button._copyResetTimer) clearTimeout(button._copyResetTimer);
+      button._copyResetTimer = setTimeout(() => {
+        button.classList.remove("is-copied");
+        button._copyResetTimer = null;
+      }, 1500);
+    } catch {
+      // Copy failed (permissions denied, execCommand unsupported, etc).
+      // We intentionally stay silent — the address is still visible and
+      // `user-select: all` on the text span lets the user long-press to
+      // select manually on iOS.
+    }
+  });
+}
+
   for (const button of document.querySelectorAll("[data-locale-option]")) {
     button.addEventListener("click", async () => {
       state.pushError = "";
       state.pushNotice = "";
+      const nextLocale = button.dataset.localeOption || "";
+      // Flip language synchronously and render before the POST — the
+      // UI switches in one frame instead of waiting on the round-trip
+      // plus the 7-endpoint refreshAuthenticatedState() that followed.
+      const previousSession = applyLocaleOverrideOptimistically(nextLocale);
+      await renderShell();
       try {
-        await setLocaleOverride(button.dataset.localeOption || "");
-        await refreshSession();
-        await refreshAuthenticatedState();
+        await persistLocaleOverride(nextLocale, previousSession);
+        // Server-rendered inbox/timeline strings (kind labels, summaries)
+        // are localised; refresh them in the background so the user
+        // doesn't wait. Polling would eventually pick this up anyway,
+        // but this makes the switch feel instant.
+        Promise.all([
+          refreshInbox().catch(() => {}),
+          refreshInboxDiff().catch(() => {}),
+          refreshTimeline().catch(() => {}),
+        ]).then(() => renderShell());
       } catch (error) {
         state.pushError = error.message || String(error);
+        await renderShell();
       }
-      await renderShell();
     });
   }
 
@@ -6261,6 +7816,21 @@ function bindSharedUi(renderFn) {
     });
   }
 
+  for (const button of document.querySelectorAll("[data-close-hazbase-logout-confirm]")) {
+    // Mirror the session-logout modal: the backdrop swallows outside-clicks
+    // to dismiss, but inside-card clicks bubble up through here too — skip
+    // those so the Confirm button's own handler can run alone.
+    button.addEventListener("click", async (event) => {
+      if (button.classList.contains("modal-backdrop")) {
+        if (event.target.closest(".modal-card")) {
+          return;
+        }
+      }
+      state.hazbaseLogoutConfirmOpen = false;
+      await renderFn();
+    });
+  }
+
   for (const button of document.querySelectorAll("[data-dismiss-install]")) {
     button.addEventListener("click", async () => {
       state.installBannerDismissed = true;
@@ -6319,6 +7889,15 @@ async function switchTab(tab) {
     syncCurrentItemUrl(state.currentItem);
   }
   await renderShell();
+  if (tab === "settings") {
+    void fetchHazbaseStatus()
+      .then(() => {
+        if (state.currentTab === "settings") {
+          renderCurrentSurface();
+        }
+      })
+      .catch(() => {});
+  }
 }
 
 function openItem({ kind, token, sourceTab, sourceSubtab }) {
@@ -6455,6 +8034,9 @@ function pendingInboxCount() {
 }
 
 function tabForItemKind(kind, fallback) {
+  if (kind === "completion" || kind === "plan_ready" || kind === "moltbook_draft" || kind === "moltbook_reply" || kind === "thread_share" || kind === "a2a_task" || kind === "a2a_task_result") {
+    return "inbox";
+  }
   if (kind === "diff_thread") {
     return "diff";
   }
@@ -6464,22 +8046,20 @@ function tabForItemKind(kind, fallback) {
   if (TIMELINE_MESSAGE_KINDS.has(kind)) {
     return "timeline";
   }
-  if (kind === "completion") {
-    return "inbox";
-  }
   if (fallback === "timeline") {
     return "timeline";
   }
   return kind === "approval" || kind === "plan" || kind === "choice"
     ? "inbox"
-    : fallback || "inbox";
+    : "inbox";
 }
 
 function inboxSubtabForItemKind(kind, sourceSubtab = "") {
   if (normalizeClientText(sourceSubtab || "") === "completed") {
     return "completed";
   }
-  return kind === "completion" || kind === "assistant_final" ? "completed" : "pending";
+  const completedKinds = new Set(["completion", "assistant_final", "plan_ready", "moltbook_reply", "thread_share", "a2a_task_result"]);
+  return completedKinds.has(kind) ? "completed" : "pending";
 }
 
 function kindMeta(kind, item) {
@@ -6893,6 +8473,8 @@ function renderIcon(name) {
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7h14"/><path d="M8 12h8"/><path d="M10.5 17h3"/></svg>`;
     case "check":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.8 12.5 3.2 3.2 7.2-7.4"/></svg>`;
+    case "copy":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3.5" width="11" height="14" rx="2"/><path d="M6.5 7.5H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-.5"/></svg>`;
     case "lock":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="10.5" width="13" height="9" rx="2"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></svg>`;
     case "coin":
@@ -7114,6 +8696,10 @@ function localizeApiError(value) {
     "choice-input-read-only": "error.choiceInputReadOnly",
     "choice-input-already-handled": "error.choiceInputAlreadyHandled",
     "mkcert-root-ca-not-found": "error.mkcertRootCaNotFound",
+    "hazbase-auth-required": "error.hazbaseAuthRequired",
+    "hazbase-passkey-local-host-required": "error.hazbasePasskeyLocalHostRequired",
+    "hazbase-wallet-account-missing": "error.hazbaseWalletAccountMissing",
+    "unsupported-chain": "error.unsupportedChain",
   };
   const key = map[raw];
   return key ? L(key) : raw;
@@ -7209,6 +8795,16 @@ function parseItemRef(value) {
   return kind && token ? { kind, token } : null;
 }
 
+function sanitizeExternalTargetTab(value) {
+  const normalized = normalizeClientText(value || "");
+  return EXTERNAL_TARGET_TABS.has(normalized) ? normalized : "";
+}
+
+function sanitizeExternalTargetInboxSubtab(value) {
+  const normalized = normalizeClientText(value || "");
+  return EXTERNAL_TARGET_INBOX_SUBTABS.has(normalized) ? normalized : "";
+}
+
 async function applyExternalTargetUrl(urlString, { allowRefresh = true } = {}) {
   if (!state.session?.authenticated) {
     return;
@@ -7225,10 +8821,16 @@ async function applyExternalTargetUrl(urlString, { allowRefresh = true } = {}) {
   if (!itemRef) {
     return;
   }
+  const explicitTargetTab = sanitizeExternalTargetTab(nextUrl.searchParams.get("tab"));
+  const explicitTargetSubtab = sanitizeExternalTargetInboxSubtab(nextUrl.searchParams.get("subtab"));
+  const targetTab = explicitTargetTab || tabForItemKind(itemRef.kind, state.currentTab);
+  const targetSubtab = targetTab === "inbox" ? inboxSubtabForItemKind(itemRef.kind, explicitTargetSubtab) : "";
 
   const sameItem =
     Boolean(state.currentItem) &&
     isSameItemRef(state.currentItem, itemRef) &&
+    state.currentTab === targetTab &&
+    (targetTab !== "inbox" || state.inboxSubtab === targetSubtab) &&
     (isDesktopLayout() || state.detailOpen);
   if (sameItem) {
     if (allowRefresh) {
@@ -7242,7 +8844,8 @@ async function applyExternalTargetUrl(urlString, { allowRefresh = true } = {}) {
   openItem({
     kind: itemRef.kind,
     token: itemRef.token,
-    sourceTab: tabForItemKind(itemRef.kind, state.currentTab),
+    sourceTab: targetTab,
+    sourceSubtab: targetSubtab,
   });
   if (isFastPathItemRef(itemRef)) {
     state.launchItemIntent = {