codex-agent-view 0.4.7 → 0.5.0

package/public/app.js

@@ -1,6 +1,13 @@
 const API_STATE_URL = "/api/state";
+const API_EXCHANGE_URL = "/api/viewer/exchange";
 const POLL_INTERVAL_MS = 2_000;
 const SESSION_TOKEN_KEY = "codex-agent-view-access-token";
+const RECOVERY_CREDENTIAL_KEY = "codex-agent-view-recovery-credential";
+const RECOVERY_HEADER = "x-codex-agent-view-recovery";
+const ACCESS_HEADER = "x-codex-agent-view-access";
+const ACCESS_CLIENT_TTL_MS = 15 * 60 * 1_000;
+const RECOVERY_CLIENT_TTL_MS = 30 * 60 * 1_000;
+const RECOVERY_REFRESH_THRESHOLD_MS = 5 * 60 * 1_000;
 const EXCLUDED_SESSION_KEY = "codex-agent-view-excluded-session";
 const LANGUAGE_KEY = "codex-agent-view-language";
 const SUPPORTED_LANGUAGES = new Set(["en", "ko", "es"]);
@@ -14,6 +21,7 @@ const KNOWN_STATUSES = new Set([
   "unknown",
 ]);
 const VIEWER_TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
+const SIGNED_CREDENTIAL_PATTERN = /^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]{43}$/;
 const CANONICAL_SESSION_ID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
 
 const MESSAGES = Object.freeze({
@@ -62,7 +70,7 @@ const MESSAGES = Object.freeze({
     completionNotObservedExplanation: "No end signal was received for this item, so completion cannot be confirmed.",
     staleExplanation: "This status is out of date and no end signal was received. Completion cannot be confirmed.",
     interruptedExplanation: "This activity was still open when the work ended; its own completion signal was not observed.",
-    connectingCopy: "Connecting to the Codex app's local status.",
+    connectingCopy: "Connecting this browser to the local Codex monitor on this device.",
     sessionListAria: "Codex work list",
     privacyPrompt: "This view shows only a shortened request summary; it never displays the full request or tool inputs.",
     privacyLocal: "Data is read only from the local monitor on this device.",
@@ -89,9 +97,13 @@ const MESSAGES = Object.freeze({
     retry: "Retry connection",
     retryAuthentication: "Try this tab again",
     checkAuthentication: "Check authentication again",
-    recoveryTitle: "Open a newly authenticated view",
-    recoveryStep: "In the Codex app, select @codex-agent-view in the composer, then choose the actual $show-agents skill from the skill picker.",
-    recoveryNote: "The skill opens a new live view with fresh authentication. No terminal command or external browser is needed.",
+    reconnectAuthentication: "Reconnect securely",
+    recoveryAvailableTitle: "Reconnect this live view",
+    recoveryAvailableStep: "This tab has a recent, read-only recovery credential.",
+    recoveryAvailableNote: "Select Reconnect securely to restore this browser tab without reopening Codex Agent View.",
+    recoveryTitle: "New authentication is required",
+    recoveryStep: "Return to the Codex app and run @codex-agent-view again.",
+    recoveryNote: "Codex Agent View opens a newly authenticated page in your default browser. For safety, this page cannot create or replace its own authentication.",
     resultsFiltered: "Showing {visible} of {total}",
     resultsTotal: "{count} work items",
     searchEmptyTitle: "No matching results.",
@@ -111,7 +123,7 @@ const MESSAGES = Object.freeze({
     disconnectedTitle: "Local status disconnected; retrying.",
     authTitle: "This live view cannot be authenticated.",
     retryWithState: "Reconnecting automatically every 2 seconds while keeping the last good state visible.",
-    retryWithoutState: "Reconnecting automatically every 2 seconds. You can leave this view open in the Codex app.",
+    retryWithoutState: "Reconnecting automatically every 2 seconds. You can leave this browser tab open or retry immediately.",
     missingToken: "This tab does not have the authentication needed to display live work.",
     expiredToken: "This tab's live-view authentication was rejected or is no longer valid.",
     requestFailed: "Status request failed ({status})",
@@ -201,7 +213,7 @@ const MESSAGES = Object.freeze({
     completionNotObservedExplanation: "이 항목의 종료 신호를 받지 못해 완료 여부를 확정할 수 없습니다.",
     staleExplanation: "상태 정보가 오래되었고 종료 신호를 받지 못했습니다. 완료 여부를 확정할 수 없습니다.",
     interruptedExplanation: "전체 작업이 끝날 때 이 활동이 열린 상태였습니다. 이 활동 자체의 완료 신호는 확인되지 않았습니다.",
-    connectingCopy: "Codex 앱의 로컬 상태에 연결하고 있습니다.",
+    connectingCopy: "이 브라우저를 기기의 로컬 Codex 모니터에 연결하고 있습니다.",
     sessionListAria: "Codex 작업 목록",
     privacyPrompt: "이 화면은 짧게 줄인 요청 요약만 표시하며, 전체 요청이나 도구 입력은 표시하지 않습니다.",
     privacyLocal: "데이터는 이 기기의 로컬 모니터에서만 읽습니다.",
@@ -228,9 +240,13 @@ const MESSAGES = Object.freeze({
     retry: "연결 다시 시도",
     retryAuthentication: "이 탭에서 다시 시도",
     checkAuthentication: "인증 정보 다시 확인",
-    recoveryTitle: "새 인증 화면 열기",
-    recoveryStep: "Codex 앱 입력창에서 @codex-agent-view를 선택한 다음, 스킬 선택기에서 실제 $show-agents 스킬을 선택하세요.",
-    recoveryNote: "새 인증이 적용된 실시간 화면이 열립니다. 터미널 명령이나 외부 브라우저는 필요하지 않습니다.",
+    reconnectAuthentication: "안전하게 다시 연결",
+    recoveryAvailableTitle: "이 실시간 화면 다시 연결",
+    recoveryAvailableStep: "이 탭에 최근 발급된 읽기 전용 복구 인증 정보가 있습니다.",
+    recoveryAvailableNote: "안전하게 다시 연결을 누르면 Codex Agent View를 다시 열지 않고 이 브라우저 탭의 접근을 복구합니다.",
+    recoveryTitle: "새 인증이 필요합니다",
+    recoveryStep: "Codex 앱으로 돌아가 @codex-agent-view를 다시 실행하세요.",
+    recoveryNote: "Codex Agent View가 기본 브라우저에 새 인증 화면을 엽니다. 안전을 위해 이 페이지 자체에서는 인증 정보를 만들거나 교체할 수 없습니다.",
     resultsFiltered: "전체 {total}개 중 {visible}개 표시",
     resultsTotal: "작업 {count}개",
     searchEmptyTitle: "검색 결과가 없습니다.",
@@ -250,7 +266,7 @@ const MESSAGES = Object.freeze({
     disconnectedTitle: "로컬 상태 연결이 끊겨 다시 시도 중입니다.",
     authTitle: "이 실시간 화면을 인증할 수 없습니다.",
     retryWithState: "2초마다 자동으로 다시 연결합니다. 마지막 정상 상태를 계속 표시합니다.",
-    retryWithoutState: "2초마다 자동으로 다시 연결합니다. Codex 앱에서 이 화면을 그대로 두어도 됩니다.",
+    retryWithoutState: "2초마다 자동으로 다시 연결합니다. 이 브라우저 탭을 열어 두거나 지금 바로 다시 시도할 수 있습니다.",
     missingToken: "이 탭에는 실시간 작업을 표시하는 데 필요한 인증 정보가 없습니다.",
     expiredToken: "이 탭의 실시간 화면 인증이 거부되었거나 더 이상 유효하지 않습니다.",
     requestFailed: "상태 요청 실패 ({status})",
@@ -340,7 +356,7 @@ const MESSAGES = Object.freeze({
     completionNotObservedExplanation: "No se recibió una señal de fin para este elemento, por lo que no se puede confirmar que haya terminado.",
     staleExplanation: "El estado está desactualizado y no se recibió una señal de fin. No se puede confirmar que haya terminado.",
     interruptedExplanation: "Esta actividad seguía abierta cuando terminó el trabajo; no se observó su propia señal de finalización.",
-    connectingCopy: "Conectando al estado local de la aplicación Codex.",
+    connectingCopy: "Conectando este navegador al monitor local de Codex en este dispositivo.",
     sessionListAria: "Lista de trabajos de Codex",
     privacyPrompt: "Esta vista solo muestra un resumen abreviado de la solicitud; nunca muestra la solicitud completa ni las entradas de herramientas.",
     privacyLocal: "Los datos se leen únicamente del monitor local de este dispositivo.",
@@ -367,9 +383,13 @@ const MESSAGES = Object.freeze({
     retry: "Reintentar conexión",
     retryAuthentication: "Reintentar en esta pestaña",
     checkAuthentication: "Volver a comprobar la autenticación",
-    recoveryTitle: "Abrir una vista con autenticación nueva",
-    recoveryStep: "En el cuadro de texto de Codex, selecciona @codex-agent-view y luego elige la skill real $show-agents en el selector de skills.",
-    recoveryNote: "La skill abre una vista en vivo nueva con autenticación actualizada. No necesitas la terminal ni un navegador externo.",
+    reconnectAuthentication: "Reconectar de forma segura",
+    recoveryAvailableTitle: "Reconectar esta vista en vivo",
+    recoveryAvailableStep: "Esta pestaña tiene una credencial reciente de recuperación de solo lectura.",
+    recoveryAvailableNote: "Selecciona Reconectar de forma segura para recuperar esta pestaña sin volver a abrir Codex Agent View.",
+    recoveryTitle: "Se necesita una autenticación nueva",
+    recoveryStep: "Vuelve a la aplicación Codex y ejecuta @codex-agent-view de nuevo.",
+    recoveryNote: "Codex Agent View abre una página recién autenticada en tu navegador predeterminado. Por seguridad, esta página no puede crear ni reemplazar su propia autenticación.",
     resultsFiltered: "Mostrando {visible} de {total}",
     resultsTotal: "{count} trabajos",
     searchEmptyTitle: "No hay resultados.",
@@ -389,7 +409,7 @@ const MESSAGES = Object.freeze({
     disconnectedTitle: "Se perdió la conexión local; reintentando.",
     authTitle: "No se puede autenticar esta vista en vivo.",
     retryWithState: "Se reconecta automáticamente cada 2 segundos y mantiene visible el último estado válido.",
-    retryWithoutState: "Se reconecta automáticamente cada 2 segundos. Puedes dejar esta vista abierta en Codex.",
+    retryWithoutState: "Se reconecta automáticamente cada 2 segundos. Puedes dejar abierta esta pestaña o reintentar de inmediato.",
     missingToken: "Esta pestaña no tiene la autenticación necesaria para mostrar el trabajo en vivo.",
     expiredToken: "La autenticación de esta pestaña fue rechazada o ya no es válida.",
     requestFailed: "Falló la solicitud de estado ({status})",
@@ -520,14 +540,20 @@ function t(key, replacements = {}) {
 
 function isExactLiveFragment(entries) {
   const tokenEntries = entries.filter(([key]) => key === "token");
+  const grantEntries = entries.filter(([key]) => key === "grant");
   const excludeEntries = entries.filter(([key]) => key === "exclude");
-  return (
+  const validGrant =
+    entries.length === 1 &&
+    grantEntries.length === 1 &&
+    SIGNED_CREDENTIAL_PATTERN.test(grantEntries[0][1]) &&
+    grantEntries[0][1].length <= 1_024;
+  const validLegacyToken =
     entries.length === tokenEntries.length + excludeEntries.length &&
     tokenEntries.length === 1 &&
     excludeEntries.length <= 1 &&
     VIEWER_TOKEN_PATTERN.test(tokenEntries[0][1]) &&
-    (excludeEntries.length === 0 || CANONICAL_SESSION_ID_PATTERN.test(excludeEntries[0][1]))
-  );
+    (excludeEntries.length === 0 || CANONICAL_SESSION_ID_PATTERN.test(excludeEntries[0][1]));
+  return validGrant || validLegacyToken;
 }
 
 function consumeLiveContext() {
@@ -536,8 +562,11 @@ function consumeLiveContext() {
     ? [...new URLSearchParams(window.location.hash.slice(1)).entries()]
     : [];
   const validFragment = hasFragment && isExactLiveFragment(entries);
+  const fragmentGrant = validFragment
+    ? entries.find(([key]) => key === "grant")?.[1] || ""
+    : "";
   const fragmentToken = validFragment
-    ? entries.find(([key]) => key === "token")[1]
+    ? entries.find(([key]) => key === "token")?.[1] || ""
     : "";
   const fragmentExclude = validFragment
     ? entries.find(([key]) => key === "exclude")?.[1] || ""
@@ -555,13 +584,19 @@ function consumeLiveContext() {
   let excludedSessionId = fragmentExclude;
   try {
     if (validFragment) {
+      window.sessionStorage.removeItem(RECOVERY_CREDENTIAL_KEY);
+    }
+    if (fragmentGrant) {
+      window.sessionStorage.removeItem(SESSION_TOKEN_KEY);
+      window.sessionStorage.removeItem(EXCLUDED_SESSION_KEY);
+    } else if (validFragment && fragmentToken) {
       window.sessionStorage.setItem(SESSION_TOKEN_KEY, fragmentToken);
       if (fragmentExclude) {
         window.sessionStorage.setItem(EXCLUDED_SESSION_KEY, fragmentExclude);
       } else {
         window.sessionStorage.removeItem(EXCLUDED_SESSION_KEY);
       }
-    } else {
+    } else if (!fragmentGrant) {
       token = window.sessionStorage.getItem(SESSION_TOKEN_KEY)?.trim() || "";
       excludedSessionId = window.sessionStorage.getItem(EXCLUDED_SESSION_KEY)?.trim() || "";
     }
@@ -572,13 +607,205 @@ function consumeLiveContext() {
 
   return {
     accessToken: VIEWER_TOKEN_PATTERN.test(token) ? token : "",
+    bootstrapCredential: SIGNED_CREDENTIAL_PATTERN.test(fragmentGrant)
+      ? fragmentGrant
+      : "",
     excludedSessionId: CANONICAL_SESSION_ID_PATTERN.test(excludedSessionId)
       ? excludedSessionId
       : "",
   };
 }
 
-let { accessToken, excludedSessionId } = consumeLiveContext();
+let { accessToken, bootstrapCredential, excludedSessionId } = consumeLiveContext();
+let recoveredAccessToken = "";
+let authenticationExchangeInFlight = false;
+
+function readRecoveryCredential() {
+  try {
+    const raw = window.sessionStorage.getItem(RECOVERY_CREDENTIAL_KEY);
+    if (!raw) return "";
+    const value = JSON.parse(raw);
+    if (
+      value === null ||
+      typeof value !== "object" ||
+      Array.isArray(value) ||
+      !SIGNED_CREDENTIAL_PATTERN.test(value.credential) ||
+      value.credential.length > 1_024 ||
+      !Number.isSafeInteger(value.expires_at_ms) ||
+      value.expires_at_ms <= Date.now()
+    ) {
+      window.sessionStorage.removeItem(RECOVERY_CREDENTIAL_KEY);
+      return "";
+    }
+    return value.credential;
+  } catch {
+    return "";
+  }
+}
+
+function persistRecoveryCredential(
+  credential,
+  expiresInMs = RECOVERY_CLIENT_TTL_MS,
+  { force = false } = {},
+) {
+  if (!SIGNED_CREDENTIAL_PATTERN.test(credential) || credential.length > 1_024) {
+    return false;
+  }
+  try {
+    if (!force) {
+      const existingRaw = window.sessionStorage.getItem(RECOVERY_CREDENTIAL_KEY);
+      if (existingRaw) {
+        const existing = JSON.parse(existingRaw);
+        if (
+          existing !== null &&
+          typeof existing === "object" &&
+          SIGNED_CREDENTIAL_PATTERN.test(existing.credential) &&
+          Number.isSafeInteger(existing.expires_at_ms) &&
+          existing.expires_at_ms - Date.now() > RECOVERY_REFRESH_THRESHOLD_MS
+        ) {
+          return false;
+        }
+      }
+    }
+    window.sessionStorage.setItem(RECOVERY_CREDENTIAL_KEY, JSON.stringify({
+      credential,
+      expires_at_ms: Date.now() + Math.min(expiresInMs, RECOVERY_CLIENT_TTL_MS),
+    }));
+    return true;
+  } catch {
+    // A valid live view remains usable when origin storage is unavailable.
+    return false;
+  }
+}
+
+function storeRecoveryCredential(response) {
+  const credential = response.headers?.get(RECOVERY_HEADER) || "";
+  persistRecoveryCredential(credential);
+  return credential;
+}
+
+function refreshRecoveredAccess(response, stateAccessCredential, recoveryCredential) {
+  const credential = response.headers?.get(ACCESS_HEADER) || "";
+  if (SIGNED_CREDENTIAL_PATTERN.test(credential) && credential.length <= 1_024) {
+    recoveredAccessToken = credential;
+    if (
+      stateAccessCredential === accessToken &&
+      VIEWER_TOKEN_PATTERN.test(accessToken) &&
+      SIGNED_CREDENTIAL_PATTERN.test(recoveryCredential) &&
+      recoveryCredential.length <= 1_024
+    ) {
+      accessToken = "";
+      try {
+        window.sessionStorage.removeItem(SESSION_TOKEN_KEY);
+        window.sessionStorage.removeItem(EXCLUDED_SESSION_KEY);
+      } catch {
+        // The signed credentials remain usable when storage is unavailable.
+      }
+    }
+  }
+}
+
+function clearRejectedViewerToken() {
+  accessToken = "";
+  recoveredAccessToken = "";
+  try {
+    window.sessionStorage.removeItem(SESSION_TOKEN_KEY);
+  } catch {
+    // Storage can be unavailable in hardened browser contexts.
+  }
+}
+
+function clearRecoveryCredential() {
+  try {
+    window.sessionStorage.removeItem(RECOVERY_CREDENTIAL_KEY);
+  } catch {
+    // Storage can be unavailable in hardened browser contexts.
+  }
+}
+
+function validateExchangePayload(payload) {
+  return Boolean(
+    payload !== null &&
+    typeof payload === "object" &&
+    !Array.isArray(payload) &&
+    Object.keys(payload).sort().join(",") ===
+      "access_credential,access_expires_in_ms,excluded_session_id,recovery_credential,recovery_expires_in_ms,status" &&
+    payload.status === "exchanged" &&
+    SIGNED_CREDENTIAL_PATTERN.test(payload.access_credential) &&
+    payload.access_credential.length <= 1_024 &&
+    Number.isSafeInteger(payload.access_expires_in_ms) &&
+    payload.access_expires_in_ms > 0 &&
+    payload.access_expires_in_ms <= ACCESS_CLIENT_TTL_MS &&
+    SIGNED_CREDENTIAL_PATTERN.test(payload.recovery_credential) &&
+    payload.recovery_credential.length <= 1_024 &&
+    Number.isSafeInteger(payload.recovery_expires_in_ms) &&
+    payload.recovery_expires_in_ms > 0 &&
+    payload.recovery_expires_in_ms <= RECOVERY_CLIENT_TTL_MS &&
+    (
+      payload.excluded_session_id === null ||
+      (
+        typeof payload.excluded_session_id === "string" &&
+        CANONICAL_SESSION_ID_PATTERN.test(payload.excluded_session_id)
+      )
+    )
+  );
+}
+
+async function exchangeViewerCredential(credential, { source }) {
+  if (
+    authenticationExchangeInFlight ||
+    !SIGNED_CREDENTIAL_PATTERN.test(credential) ||
+    credential.length > 1_024
+  ) {
+    return false;
+  }
+
+  authenticationExchangeInFlight = true;
+  try {
+    const response = await fetch(API_EXCHANGE_URL, {
+      body: JSON.stringify({ credential }),
+      cache: "no-store",
+      credentials: "same-origin",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+    if (!response.ok) {
+      await response.body?.cancel();
+      if (
+        (response.status === 401 || response.status === 403 || response.status === 409)
+      ) {
+        if (source === "recovery") {
+          clearRecoveryCredential();
+        } else if (source === "bootstrap") {
+          bootstrapCredential = "";
+        }
+      }
+      throw new Error(t("requestFailed", { status: response.status }));
+    }
+
+    const payload = await response.json();
+    if (!validateExchangePayload(payload)) {
+      throw new Error(t("invalidState"));
+    }
+
+    recoveredAccessToken = payload.access_credential;
+    if (source === "bootstrap") {
+      bootstrapCredential = "";
+    }
+    excludedSessionId = payload.excluded_session_id || "";
+    persistRecoveryCredential(
+      payload.recovery_credential,
+      payload.recovery_expires_in_ms,
+      { force: true },
+    );
+    return true;
+  } finally {
+    authenticationExchangeInFlight = false;
+  }
+}
 
 const elements = Object.freeze({
   connectionStatus: document.querySelector("#connection-status"),
@@ -1272,27 +1499,37 @@ function setStateMessage(kind, title, description, retryMode = "") {
   copy.textContent = description;
   elements.stateMessage.append(heading, copy);
 
+  const recoveryAvailable = retryMode === "authentication" && Boolean(
+    accessToken || recoveredAccessToken || bootstrapCredential || readRecoveryCredential(),
+  );
+
   if (retryMode === "authentication") {
     const recovery = document.createElement("div");
     recovery.className = "recovery-guidance";
 
     const recoveryTitle = document.createElement("strong");
-    recoveryTitle.textContent = t("recoveryTitle");
+    recoveryTitle.textContent = t(
+      recoveryAvailable ? "recoveryAvailableTitle" : "recoveryTitle",
+    );
     const recoveryStep = document.createElement("p");
-    recoveryStep.textContent = t("recoveryStep");
+    recoveryStep.textContent = t(
+      recoveryAvailable ? "recoveryAvailableStep" : "recoveryStep",
+    );
     const recoveryNote = document.createElement("p");
     recoveryNote.className = "recovery-note";
-    recoveryNote.textContent = t("recoveryNote");
+    recoveryNote.textContent = t(
+      recoveryAvailable ? "recoveryAvailableNote" : "recoveryNote",
+    );
     recovery.append(recoveryTitle, recoveryStep, recoveryNote);
     elements.stateMessage.append(recovery);
   }
 
-  if (retryMode) {
+  if (retryMode && (retryMode !== "authentication" || recoveryAvailable)) {
     const retry = document.createElement("button");
     retry.type = "button";
     retry.className = "retry-button";
     retry.textContent = retryMode === "authentication"
-      ? (accessToken ? t("retryAuthentication") : t("checkAuthentication"))
+      ? (accessToken ? t("retryAuthentication") : t("reconnectAuthentication"))
       : t("retry");
     retry.addEventListener(
       "click",
@@ -1302,12 +1539,30 @@ function setStateMessage(kind, title, description, retryMode = "") {
   }
 }
 
-function retryAuthentication() {
+async function retryAuthentication() {
   const refreshedContext = consumeLiveContext();
-  accessToken = refreshedContext.accessToken;
-  excludedSessionId = refreshedContext.excludedSessionId;
+  if (refreshedContext.accessToken) {
+    accessToken = refreshedContext.accessToken;
+    excludedSessionId = refreshedContext.excludedSessionId;
+  }
+  if (refreshedContext.bootstrapCredential) {
+    bootstrapCredential = refreshedContext.bootstrapCredential;
+  }
+
+  if (accessToken) {
+    viewState.authenticationFailed = false;
+    viewState.canRetry = true;
+    viewState.errorKey = "";
+    viewState.errorMessage = "";
+    setConnectionStatus("connecting");
+    render();
+    await refreshState();
+    return;
+  }
 
-  if (!accessToken) {
+  const credential = bootstrapCredential || readRecoveryCredential();
+  const source = bootstrapCredential ? "bootstrap" : "recovery";
+  if (!credential) {
     viewState.hasLoaded = true;
     viewState.canRetry = false;
     viewState.authenticationFailed = true;
@@ -1319,12 +1574,28 @@ function retryAuthentication() {
   }
 
   viewState.authenticationFailed = false;
-  viewState.canRetry = true;
+  viewState.canRetry = false;
   viewState.errorKey = "";
   viewState.errorMessage = "";
   setConnectionStatus("connecting");
   render();
-  void refreshState();
+
+  try {
+    const exchanged = await exchangeViewerCredential(credential, { source });
+    if (!exchanged) return;
+    viewState.canRetry = true;
+    await refreshState();
+  } catch (error) {
+    viewState.hasLoaded = true;
+    viewState.canRetry = false;
+    viewState.authenticationFailed = true;
+    viewState.errorKey = "expiredToken";
+    viewState.errorMessage = error instanceof Error
+      ? error.message
+      : t("unknownConnectionError");
+    setConnectionStatus("error", t("authenticationRequired"));
+    render();
+  }
 }
 
 function setEmptyObservationMessage() {
@@ -1472,7 +1743,8 @@ async function refreshState() {
     return;
   }
 
-  if (!accessToken) {
+  const stateAccessCredential = accessToken || recoveredAccessToken;
+  if (!stateAccessCredential) {
     viewState.hasLoaded = true;
     viewState.canRetry = false;
     viewState.authenticationFailed = true;
@@ -1489,17 +1761,26 @@ async function refreshState() {
   }
 
   try {
+    const stateHeaders = {
+      Accept: "application/json",
+      Authorization: `Bearer ${stateAccessCredential}`,
+    };
+    if (
+      stateAccessCredential === accessToken &&
+      VIEWER_TOKEN_PATTERN.test(accessToken) &&
+      CANONICAL_SESSION_ID_PATTERN.test(excludedSessionId)
+    ) {
+      stateHeaders["x-codex-agent-view-exclude-session"] = excludedSessionId;
+    }
     const response = await fetch(API_STATE_URL, {
       cache: "no-store",
       credentials: "same-origin",
-      headers: {
-        Accept: "application/json",
-        Authorization: `Bearer ${accessToken}`,
-      },
+      headers: stateHeaders,
     });
 
     if (response.status === 401 || response.status === 403) {
       await response.body?.cancel();
+      clearRejectedViewerToken();
       viewState.hasLoaded = true;
       viewState.canRetry = false;
       viewState.authenticationFailed = true;
@@ -1513,6 +1794,8 @@ async function refreshState() {
       throw new Error(t("requestFailed", { status: response.status }));
     }
 
+    const recoveryCredential = storeRecoveryCredential(response);
+    refreshRecoveredAccess(response, stateAccessCredential, recoveryCredential);
     const nextState = normalizeState(await response.json());
     viewState.updatedAtMs = nextState.updatedAtMs;
     viewState.sessions = nextState.sessions;
@@ -1559,9 +1842,36 @@ document.addEventListener("visibilitychange", () => {
   }
 });
 
-applyStaticTranslations();
-render();
-refreshState();
-if (accessToken) {
+async function initializeLiveView() {
+  applyStaticTranslations();
+  render();
+
+  if (bootstrapCredential) {
+    viewState.authenticationFailed = false;
+    setConnectionStatus("connecting");
+    try {
+      const exchanged = await exchangeViewerCredential(bootstrapCredential, {
+        source: "bootstrap",
+      });
+      if (exchanged) {
+        await refreshState();
+      }
+    } catch (error) {
+      viewState.hasLoaded = true;
+      viewState.canRetry = false;
+      viewState.authenticationFailed = true;
+      viewState.errorKey = "expiredToken";
+      viewState.errorMessage = error instanceof Error
+        ? error.message
+        : t("unknownConnectionError");
+      setConnectionStatus("error", t("authenticationRequired"));
+      render();
+    }
+  } else {
+    await refreshState();
+  }
+
   window.setInterval(refreshState, POLL_INTERVAL_MS);
 }
+
+void initializeLiveView();

package/public/index.html

@@ -138,7 +138,7 @@
 
           <div id="state-message" class="state-message" role="status" aria-live="polite">
             <strong data-i18n="loadingState">Loading status.</strong>
-            <span data-i18n="connectingCopy">Connecting to the Codex app's local status.</span>
+            <span data-i18n="connectingCopy">Connecting this browser to the local Codex monitor on this device.</span>
           </div>
 
           <ul id="session-list" class="session-list" aria-label="Codex work list" data-i18n-aria-label="sessionListAria" hidden></ul>