viveworker 0.6.3 → 0.6.4

package/web/app.js

@@ -14,6 +14,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",
@@ -101,14 +107,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,7 +130,7 @@ async function boot() {
     } catch (error) {
       state.pairError = error.message || String(error);
     }
-    await refreshSession();
+    await refreshBootstrap();
   }
 
   syncPairingTokenState(desiredBootstrapPairingToken());
@@ -146,8 +157,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 +165,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 +204,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,7 +281,9 @@ 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();
@@ -225,12 +293,69 @@ async function refreshAuthenticatedState() {
   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 +373,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() {
@@ -385,12 +541,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();
@@ -914,6 +1099,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;
@@ -2007,9 +2196,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 +2234,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();
@@ -3039,6 +3260,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",
@@ -3097,6 +3325,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({
@@ -3198,6 +3435,9 @@ function renderSettingsSubpage(context, { mobile }) {
     case "awayMode":
       content = renderSettingsAwayModePage();
       break;
+    case "autoPilot":
+      content = renderSettingsAutoPilotPage();
+      break;
     case "moltbook":
       content = renderSettingsMoltbookPage(context);
       break;
@@ -3423,6 +3663,456 @@ function renderSettingsAwayModePage() {
   `;
 }
 
+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 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-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>
+  `;
+}
+
 function renderSettingsMoltbookPage(context) {
   const scout = context.moltbookScout;
   if (!scout?.enabled) {
@@ -3833,6 +4523,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)}
@@ -3872,6 +4563,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 })}
@@ -4052,6 +4744,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) {
@@ -5622,6 +6333,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();
@@ -5640,6 +6361,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();
     });
@@ -5648,11 +6375,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);
@@ -5664,13 +6476,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();
     });
   }
 
@@ -5678,13 +6506,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();
     });
   }
 
@@ -5718,14 +6557,27 @@ function bindShellInteractions() {
     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();
     });
   }