function clientApp(config) {
  const THEME_STORAGE_KEY = "localstack-inspector-theme";
  const PANEL_STORAGE_KEY = "localstack-inspector-panel";
  const EMAIL_PREFERENCES_STORAGE_KEY = "localstack-inspector-email-preferences";
  const LOG_PREFERENCES_STORAGE_KEY = "localstack-inspector-log-preferences";
  const SECRET_PREFERENCES_STORAGE_KEY = "localstack-inspector-secret-preferences";
  const S3_PREFERENCES_STORAGE_KEY = "localstack-inspector-s3-preferences";
  const HEALTH_REFRESH_MS = 30000;
  const REFRESH_INTERVALS = [5000, 10000, 15000, 30000, 60000];
  const LOG_WINDOWS = [300000, 900000, 3600000, 21600000, 86400000];
  const LOG_LIMITS = [100, 200, 300, 500];
  const storedEmailPreferences = getStoredPreferences(EMAIL_PREFERENCES_STORAGE_KEY);
  const storedLogPreferences = getStoredPreferences(LOG_PREFERENCES_STORAGE_KEY);
  const storedSecretPreferences = getStoredPreferences(SECRET_PREFERENCES_STORAGE_KEY);
  const storedS3Preferences = getStoredPreferences(S3_PREFERENCES_STORAGE_KEY);

  const appState = {
    panel: getInitialPanel(),
    logsReady: false,
    secretsReady: false,
    s3Ready: false,
    theme: getInitialTheme()
  };

  const state = {
    messages: [],
    filtered: [],
    search: getStoredText(storedEmailPreferences?.search),
    auto: getStoredBoolean(storedEmailPreferences?.auto, true),
    interval: getStoredNumber(storedEmailPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
    loading: false,
    error: "",
    updatedAt: 0,
    source: "initial",
    duration: 0,
    parseErrors: 0,
    newest: "",
    newIds: new Set(),
    knownIds: new Set(),
    openIds: new Set(),
    views: {},
    raw: {},
    listSignature: ""
  };

  const logsState = {
    groups: [],
    streams: [],
    events: [],
    filtered: [],
    group: getStoredText(storedLogPreferences?.group, config.defaultLogGroup || ""),
    stream: getStoredText(storedLogPreferences?.stream),
    search: getStoredText(storedLogPreferences?.search),
    auto: getStoredBoolean(storedLogPreferences?.auto, true),
    interval: getStoredNumber(storedLogPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
    windowMs: getStoredNumber(storedLogPreferences?.windowMs, LOG_WINDOWS, config.defaultLogWindowMs),
    limit: getStoredNumber(storedLogPreferences?.limit, LOG_LIMITS, config.defaultLogLimit),
    wrapLines: getStoredBoolean(storedLogPreferences?.wrapLines, true),
    tailNewest: getStoredBoolean(storedLogPreferences?.tailNewest, false),
    loading: false,
    error: "",
    updatedAt: 0,
    source: "initial",
    duration: 0,
    newest: 0,
    searchedLogStreams: 0,
    openIds: new Set(),
    listSignature: ""
  };

  const secretsState = {
    items: [],
    filtered: [],
    search: getStoredText(storedSecretPreferences?.search),
    auto: getStoredBoolean(storedSecretPreferences?.auto, true),
    interval: getStoredNumber(storedSecretPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
    loading: false,
    error: "",
    updatedAt: 0,
    source: "initial",
    duration: 0,
    newest: "",
    openIds: new Set(),
    values: {},
    revealedIds: new Set(),
    listSignature: ""
  };

  const s3State = {
    buckets: [],
    objects: [],
    filtered: [],
    bucket: getStoredText(storedS3Preferences?.bucket, config.defaultS3Bucket || ""),
    prefix: getStoredText(storedS3Preferences?.prefix),
    search: getStoredText(storedS3Preferences?.search),
    auto: getStoredBoolean(storedS3Preferences?.auto, true),
    interval: getStoredNumber(storedS3Preferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
    loading: false,
    error: "",
    updatedAt: 0,
    source: "initial",
    duration: 0,
    newest: "",
    openIds: new Set(),
    previews: {},
    listSignature: ""
  };

  const healthState = {
    services: {},
    loading: false,
    error: "",
    updatedAt: 0,
    source: "initial"
  };

  const el = {
    themeToggle: document.getElementById("themeToggle"),
    resetStateButton: document.getElementById("resetStateButton"),
    healthRefreshButton: document.getElementById("healthRefreshButton"),
    healthStrip: document.getElementById("healthStrip"),
    emailsPanel: document.getElementById("emailsPanel"),
    logsPanel: document.getElementById("logsPanel"),
    secretsPanel: document.getElementById("secretsPanel"),
    s3Panel: document.getElementById("s3Panel"),
    refreshButton: document.getElementById("refreshButton"),
    autoToggle: document.getElementById("autoToggle"),
    intervalSelect: document.getElementById("intervalSelect"),
    searchInput: document.getElementById("searchInput"),
    clearSearchButton: document.getElementById("clearSearchButton"),
    expandAllButton: document.getElementById("expandAllButton"),
    collapseAllButton: document.getElementById("collapseAllButton"),
    scrollToTopButton: document.getElementById("scrollToTopButton"),
    statusChip: document.getElementById("statusChip"),
    totalStat: document.getElementById("totalStat"),
    visibleStat: document.getElementById("visibleStat"),
    newStat: document.getElementById("newStat"),
    newestStat: document.getElementById("newestStat"),
    updatedStat: document.getElementById("updatedStat"),
    fetchStat: document.getElementById("fetchStat"),
    fetchDetail: document.getElementById("fetchDetail"),
    banner: document.getElementById("banner"),
    empty: document.getElementById("empty"),
    list: document.getElementById("list"),
    emailsContentPane: document.getElementById("emailsContentPane"),
    logsRefreshButton: document.getElementById("logsRefreshButton"),
    logsAutoToggle: document.getElementById("logsAutoToggle"),
    logsIntervalSelect: document.getElementById("logsIntervalSelect"),
    logsGroupSelect: document.getElementById("logsGroupSelect"),
    logsStreamSelect: document.getElementById("logsStreamSelect"),
    logsWindowSelect: document.getElementById("logsWindowSelect"),
    logsLimitSelect: document.getElementById("logsLimitSelect"),
    logsSearchInput: document.getElementById("logsSearchInput"),
    logsClearSearchButton: document.getElementById("logsClearSearchButton"),
    logsWrapToggle: document.getElementById("logsWrapToggle"),
    logsTailToggle: document.getElementById("logsTailToggle"),
    logsExpandAllButton: document.getElementById("logsExpandAllButton"),
    logsCollapseAllButton: document.getElementById("logsCollapseAllButton"),
    logsScrollToTopButton: document.getElementById("logsScrollToTopButton"),
    logsStatusChip: document.getElementById("logsStatusChip"),
    logsTotalStat: document.getElementById("logsTotalStat"),
    logsVisibleStat: document.getElementById("logsVisibleStat"),
    logsStreamsStat: document.getElementById("logsStreamsStat"),
    logsNewestStat: document.getElementById("logsNewestStat"),
    logsUpdatedStat: document.getElementById("logsUpdatedStat"),
    logsFetchStat: document.getElementById("logsFetchStat"),
    logsFetchDetail: document.getElementById("logsFetchDetail"),
    logsBanner: document.getElementById("logsBanner"),
    logsEmpty: document.getElementById("logsEmpty"),
    logsList: document.getElementById("logsList"),
    logsContentPane: document.getElementById("logsContentPane"),
    secretsRefreshButton: document.getElementById("secretsRefreshButton"),
    secretsAutoToggle: document.getElementById("secretsAutoToggle"),
    secretsIntervalSelect: document.getElementById("secretsIntervalSelect"),
    secretsSearchInput: document.getElementById("secretsSearchInput"),
    secretsClearSearchButton: document.getElementById("secretsClearSearchButton"),
    secretsExpandAllButton: document.getElementById("secretsExpandAllButton"),
    secretsCollapseAllButton: document.getElementById("secretsCollapseAllButton"),
    secretsScrollToTopButton: document.getElementById("secretsScrollToTopButton"),
    secretsStatusChip: document.getElementById("secretsStatusChip"),
    secretsTotalStat: document.getElementById("secretsTotalStat"),
    secretsVisibleStat: document.getElementById("secretsVisibleStat"),
    secretsLoadedStat: document.getElementById("secretsLoadedStat"),
    secretsNewestStat: document.getElementById("secretsNewestStat"),
    secretsUpdatedStat: document.getElementById("secretsUpdatedStat"),
    secretsFetchStat: document.getElementById("secretsFetchStat"),
    secretsFetchDetail: document.getElementById("secretsFetchDetail"),
    secretsBanner: document.getElementById("secretsBanner"),
    secretsEmpty: document.getElementById("secretsEmpty"),
    secretsList: document.getElementById("secretsList"),
    secretsContentPane: document.getElementById("secretsContentPane"),
    s3RefreshButton: document.getElementById("s3RefreshButton"),
    s3AutoToggle: document.getElementById("s3AutoToggle"),
    s3IntervalSelect: document.getElementById("s3IntervalSelect"),
    s3BucketSelect: document.getElementById("s3BucketSelect"),
    s3PrefixInput: document.getElementById("s3PrefixInput"),
    s3ApplyPrefixButton: document.getElementById("s3ApplyPrefixButton"),
    s3SearchInput: document.getElementById("s3SearchInput"),
    s3ClearSearchButton: document.getElementById("s3ClearSearchButton"),
    s3ExpandAllButton: document.getElementById("s3ExpandAllButton"),
    s3CollapseAllButton: document.getElementById("s3CollapseAllButton"),
    s3ScrollToTopButton: document.getElementById("s3ScrollToTopButton"),
    s3StatusChip: document.getElementById("s3StatusChip"),
    s3TotalStat: document.getElementById("s3TotalStat"),
    s3VisibleStat: document.getElementById("s3VisibleStat"),
    s3BucketsStat: document.getElementById("s3BucketsStat"),
    s3NewestStat: document.getElementById("s3NewestStat"),
    s3UpdatedStat: document.getElementById("s3UpdatedStat"),
    s3FetchStat: document.getElementById("s3FetchStat"),
    s3FetchDetail: document.getElementById("s3FetchDetail"),
    s3Banner: document.getElementById("s3Banner"),
    s3Empty: document.getElementById("s3Empty"),
    s3List: document.getElementById("s3List"),
    s3ContentPane: document.getElementById("s3ContentPane")
  };

  el.autoToggle.checked = state.auto;
  el.intervalSelect.value = String(state.interval);
  el.searchInput.value = state.search;
  el.logsAutoToggle.checked = logsState.auto;
  el.logsIntervalSelect.value = String(logsState.interval);
  el.logsWindowSelect.value = String(logsState.windowMs);
  el.logsLimitSelect.value = String(logsState.limit);
  el.logsSearchInput.value = logsState.search;
  el.logsWrapToggle.checked = logsState.wrapLines;
  el.logsTailToggle.checked = logsState.tailNewest;
  el.secretsAutoToggle.checked = secretsState.auto;
  el.secretsIntervalSelect.value = String(secretsState.interval);
  el.secretsSearchInput.value = secretsState.search;
  el.s3AutoToggle.checked = s3State.auto;
  el.s3IntervalSelect.value = String(s3State.interval);
  el.s3PrefixInput.value = s3State.prefix;
  el.s3SearchInput.value = s3State.search;
  applyTheme(appState.theme);
  persistPanel();
  persistEmailPreferences();
  persistLogPreferences();
  persistSecretPreferences();
  persistS3Preferences();
  wire();
  renderWorkspace();
  renderAll();
  renderLogsAll();
  renderSecretsAll();
  renderS3All();
  renderHealthStrip();
  if (appState.panel === "logs") {
    ensureLogsReady();
  } else if (appState.panel === "secrets") {
    ensureSecretsReady();
  } else if (appState.panel === "s3") {
    ensureS3Ready();
  } else {
    refreshMessages("initial");
  }
  refreshHealthSummary("initial");
  window.setInterval(() => {
    if (!document.hidden) {
      refreshHealthSummary("auto");
    }
  }, HEALTH_REFRESH_MS);
  window.setInterval(() => {
    renderLiveClock();
    renderLogsLiveClock();
    renderSecretsLiveClock();
    renderS3LiveClock();
    renderHealthStrip();
  }, 1000);

  function wire() {
    el.themeToggle.addEventListener("click", () => {
      applyTheme(appState.theme === "dark" ? "light" : "dark");
    });

    el.resetStateButton.addEventListener("click", () => {
      resetSavedState();
    });

    el.healthRefreshButton.addEventListener("click", () => {
      refreshHealthSummary("manual");
    });

    el.healthStrip.addEventListener("click", async (event) => {
      const button = event.target.closest("button[data-health-panel]");

      if (!button) {
        return;
      }

      await setPanel(button.dataset.healthPanel);
    });

    el.refreshButton.addEventListener("click", () => refreshMessages("manual"));

    el.autoToggle.addEventListener("change", () => {
      state.auto = el.autoToggle.checked;
      persistEmailPreferences();
      scheduleRefresh();
      renderStatus();
    });

    el.intervalSelect.addEventListener("change", () => {
      state.interval = Number(el.intervalSelect.value) || config.defaultRefreshMs;
      persistEmailPreferences();
      scheduleRefresh();
      renderStatus();
    });

    el.searchInput.addEventListener("input", (event) => {
      state.search = event.target.value;
      applyFilter();
    });

    el.clearSearchButton.addEventListener("click", () => {
      state.search = "";
      el.searchInput.value = "";
      applyFilter();
    });

    el.expandAllButton.addEventListener("click", () => {
      state.filtered.forEach((message) => state.openIds.add(message.id));
      syncCardExpansion();
    });

    el.collapseAllButton.addEventListener("click", () => {
      state.openIds.clear();
      syncCardExpansion();
    });

    el.scrollToTopButton.addEventListener("click", () => {
      scrollPaneToTop(el.emailsContentPane);
    });

    el.emailsContentPane.addEventListener("scroll", () => {
      updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
    });

    el.list.addEventListener("click", async (event) => {
      const button = event.target.closest("button[data-action]");

      if (!button) {
        return;
      }

      const id = button.dataset.id;
      const message = getMessage(id);

      if (!message) {
        return;
      }

      if (button.dataset.action === "view") {
        state.views[id] = button.dataset.view;
        renderList();
        return;
      }

      if (button.dataset.action === "load-raw") {
        await loadRaw(id);
        renderList();
        return;
      }

      if (button.dataset.action === "copy-raw") {
        const raw = await loadRaw(id);

        if (raw) {
          await copyText(raw);
          setStatus("Raw message copied to the clipboard.", "ok");
        }
      }
    });

    el.logsRefreshButton.addEventListener("click", () => refreshLogs("manual"));

    el.logsAutoToggle.addEventListener("change", () => {
      logsState.auto = el.logsAutoToggle.checked;
      persistLogPreferences();
      scheduleLogsRefresh();
      renderLogsStatus();
    });

    el.logsIntervalSelect.addEventListener("change", () => {
      logsState.interval = Number(el.logsIntervalSelect.value) || config.defaultRefreshMs;
      persistLogPreferences();
      scheduleLogsRefresh();
      renderLogsStatus();
    });

    el.logsWindowSelect.addEventListener("change", () => {
      logsState.windowMs = Number(el.logsWindowSelect.value) || config.defaultLogWindowMs;
      persistLogPreferences();
      refreshLogs("window");
    });

    el.logsLimitSelect.addEventListener("change", () => {
      logsState.limit = Number(el.logsLimitSelect.value) || config.defaultLogLimit;
      persistLogPreferences();
      refreshLogs("limit");
    });

    el.logsSearchInput.addEventListener("input", (event) => {
      logsState.search = event.target.value;
      applyLogsFilter();
    });

    el.logsClearSearchButton.addEventListener("click", () => {
      logsState.search = "";
      el.logsSearchInput.value = "";
      applyLogsFilter();
    });

    el.logsWrapToggle.addEventListener("change", () => {
      logsState.wrapLines = el.logsWrapToggle.checked;
      persistLogPreferences();
      renderLogsList();
    });

    el.logsTailToggle.addEventListener("change", () => {
      logsState.tailNewest = el.logsTailToggle.checked;
      persistLogPreferences();
    });

    el.logsExpandAllButton.addEventListener("click", () => {
      logsState.filtered.forEach((event) => logsState.openIds.add(event.id));
      renderLogsList();
    });

    el.logsCollapseAllButton.addEventListener("click", () => {
      logsState.openIds.clear();
      renderLogsList();
    });

    el.logsScrollToTopButton.addEventListener("click", () => {
      scrollPaneToTop(el.logsContentPane);
    });

    el.logsContentPane.addEventListener("scroll", () => {
      updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
    });

    el.logsGroupSelect.addEventListener("change", async () => {
      logsState.group = el.logsGroupSelect.value;
      logsState.stream = "";
      persistLogPreferences();
      await refreshLogStreams();
      await refreshLogs("group");
    });

    el.logsStreamSelect.addEventListener("change", () => {
      logsState.stream = el.logsStreamSelect.value;
      persistLogPreferences();
      refreshLogs("stream");
    });

    el.logsList.addEventListener("click", async (event) => {
      const button = event.target.closest("button[data-log-action]");

      if (!button) {
        return;
      }

      event.preventDefault();
      event.stopPropagation();

      const logEvent = getLogEvent(button.dataset.id);

      if (!logEvent) {
        return;
      }

      if (button.dataset.logAction === "copy") {
        await copyText(formatLogMessage(logEvent.message));
        setLogsStatus("Log payload copied to the clipboard.", "ok");
      }
    });

    el.secretsRefreshButton.addEventListener("click", () => refreshSecrets("manual"));

    el.secretsAutoToggle.addEventListener("change", () => {
      secretsState.auto = el.secretsAutoToggle.checked;
      persistSecretPreferences();
      scheduleSecretsRefresh();
      renderSecretsStatus();
    });

    el.secretsIntervalSelect.addEventListener("change", () => {
      secretsState.interval = Number(el.secretsIntervalSelect.value) || config.defaultRefreshMs;
      persistSecretPreferences();
      scheduleSecretsRefresh();
      renderSecretsStatus();
    });

    el.secretsSearchInput.addEventListener("input", (event) => {
      secretsState.search = event.target.value;
      applySecretsFilter();
    });

    el.secretsClearSearchButton.addEventListener("click", () => {
      secretsState.search = "";
      el.secretsSearchInput.value = "";
      applySecretsFilter();
    });

    el.secretsExpandAllButton.addEventListener("click", () => {
      secretsState.filtered.forEach((secret) => secretsState.openIds.add(secret.id));
      syncSecretExpansion();
    });

    el.secretsCollapseAllButton.addEventListener("click", () => {
      secretsState.openIds.clear();
      syncSecretExpansion();
    });

    el.secretsScrollToTopButton.addEventListener("click", () => {
      scrollPaneToTop(el.secretsContentPane);
    });

    el.secretsContentPane.addEventListener("scroll", () => {
      updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
    });

    el.secretsList.addEventListener("click", async (event) => {
      const button = event.target.closest("button[data-secret-action]");

      if (!button) {
        return;
      }

      const id = button.dataset.id;
      const secret = getSecret(id);

      if (!secret) {
        return;
      }

      if (button.dataset.secretAction === "load-value") {
        await ensureSecretValue(id, { force: false });
        return;
      }

      if (button.dataset.secretAction === "reload-value") {
        await ensureSecretValue(id, { force: true });
        return;
      }

      if (button.dataset.secretAction === "copy-value") {
        const entry = await ensureSecretValue(id, { force: false });

        if (entry?.status === "loaded") {
          await copyText(entry.copyValue);
          setSecretsStatus("Secret value copied to the clipboard.", "ok");
        }

        return;
      }

      if (button.dataset.secretAction === "toggle-reveal") {
        toggleSecretReveal(id);
        return;
      }

      if (button.dataset.secretAction === "copy-name") {
        await copyText(secret.name || "");
        setSecretsStatus("Secret name copied to the clipboard.", "ok");
        return;
      }

      if (button.dataset.secretAction === "copy-arn") {
        await copyText(secret.arn || "");
        setSecretsStatus("Secret ARN copied to the clipboard.", "ok");
        return;
      }

      if (button.dataset.secretAction === "copy-env") {
        const entry = await ensureSecretValue(id, { force: false });

        if (entry?.status === "loaded") {
          await copyText(`${secret.name}=${entry.copyValue}`);
          setSecretsStatus("Secret env line copied to the clipboard.", "ok");
        }
      }
    });

    el.s3RefreshButton.addEventListener("click", async () => {
      await refreshS3Buckets();
      await refreshS3("manual");
    });

    el.s3AutoToggle.addEventListener("change", () => {
      s3State.auto = el.s3AutoToggle.checked;
      persistS3Preferences();
      scheduleS3Refresh();
      renderS3Status();
    });

    el.s3IntervalSelect.addEventListener("change", () => {
      s3State.interval = Number(el.s3IntervalSelect.value) || config.defaultRefreshMs;
      persistS3Preferences();
      scheduleS3Refresh();
      renderS3Status();
    });

    el.s3BucketSelect.addEventListener("change", () => {
      s3State.bucket = el.s3BucketSelect.value;
      persistS3Preferences();
      refreshS3("bucket");
    });

    el.s3PrefixInput.addEventListener("keydown", (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        s3State.prefix = el.s3PrefixInput.value.trim();
        persistS3Preferences();
        refreshS3("prefix");
      }
    });

    el.s3ApplyPrefixButton.addEventListener("click", () => {
      s3State.prefix = el.s3PrefixInput.value.trim();
      persistS3Preferences();
      refreshS3("prefix");
    });

    el.s3SearchInput.addEventListener("input", (event) => {
      s3State.search = event.target.value;
      applyS3Filter();
    });

    el.s3ClearSearchButton.addEventListener("click", () => {
      s3State.search = "";
      el.s3SearchInput.value = "";
      applyS3Filter();
    });

    el.s3ExpandAllButton.addEventListener("click", () => {
      s3State.filtered.forEach((object) => s3State.openIds.add(object.id));
      syncS3Expansion();
    });

    el.s3CollapseAllButton.addEventListener("click", () => {
      s3State.openIds.clear();
      syncS3Expansion();
    });

    el.s3ScrollToTopButton.addEventListener("click", () => {
      scrollPaneToTop(el.s3ContentPane);
    });

    el.s3ContentPane.addEventListener("scroll", () => {
      updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
    });

    el.s3List.addEventListener("click", async (event) => {
      const button = event.target.closest("button[data-s3-action]");

      if (!button) {
        return;
      }

      const id = button.dataset.id;
      const object = getS3Object(id);

      if (!object) {
        return;
      }

      if (button.dataset.s3Action === "load-preview") {
        await ensureS3Preview(id, { force: false });
        return;
      }

      if (button.dataset.s3Action === "reload-preview") {
        await ensureS3Preview(id, { force: true });
        return;
      }

      if (button.dataset.s3Action === "copy-key") {
        await copyText(object.key);
        setS3Status("Object key copied to the clipboard.", "ok");
        return;
      }

      if (button.dataset.s3Action === "copy-uri") {
        await copyText(`s3://${object.bucket}/${object.key}`);
        setS3Status("S3 URI copied to the clipboard.", "ok");
      }
    });

    document.addEventListener("visibilitychange", () => {
      window.clearTimeout(state.timer);
      window.clearTimeout(logsState.timer);
      window.clearTimeout(secretsState.timer);
      window.clearTimeout(s3State.timer);

      if (document.hidden) {
        renderStatus();
        renderLogsStatus();
        renderSecretsStatus();
        renderS3Status();
        return;
      }

      refreshHealthSummary("visibility");

      if (appState.panel === "s3") {
        if (s3State.auto) {
          refreshS3("visibility");
        } else {
          renderS3Status();
        }
        return;
      }

      if (appState.panel === "secrets") {
        if (secretsState.auto) {
          refreshSecrets("visibility");
        } else {
          renderSecretsStatus();
        }
        return;
      }

      if (appState.panel === "logs") {
        if (logsState.auto) {
          refreshLogs("visibility");
        } else {
          renderLogsStatus();
        }
        return;
      }

      if (state.auto) {
        refreshMessages("visibility");
      } else {
        renderStatus();
      }
    });

    window.addEventListener("keydown", (event) => {
      const isField =
        event.target instanceof HTMLElement &&
        (event.target.matches("input,textarea,select") || event.target.isContentEditable);

      if (!isField && event.key.toLowerCase() === "r") {
        event.preventDefault();

        if (appState.panel === "logs") {
          refreshLogs("keyboard");
          return;
        }

        if (appState.panel === "secrets") {
          refreshSecrets("keyboard");
          return;
        }

        if (appState.panel === "s3") {
          refreshS3("keyboard");
          return;
        }

        refreshMessages("keyboard");
      }
    });

    updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
    updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
    updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
    updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
  }

  async function setPanel(panel) {
    if (!panel || panel === appState.panel) {
      if (panel === "logs") {
        await ensureLogsReady();
      } else if (panel === "secrets") {
        await ensureSecretsReady();
      } else if (panel === "s3") {
        await ensureS3Ready();
      }

      renderWorkspace();
      return;
    }

    appState.panel = panel;
    persistPanel();
    renderWorkspace();

    if (panel === "logs") {
      await ensureLogsReady();
    } else if (panel === "secrets") {
      await ensureSecretsReady();
    } else if (panel === "s3") {
      await ensureS3Ready();
    } else if (!state.updatedAt && !state.loading) {
      await refreshMessages("panel");
    }

    scheduleRefresh();
    scheduleLogsRefresh();
    scheduleSecretsRefresh();
    scheduleS3Refresh();
    renderStatus();
    renderLogsStatus();
    renderSecretsStatus();
    renderS3Status();
  }

  function renderWorkspace() {
    el.emailsPanel.hidden = appState.panel !== "emails";
    el.logsPanel.hidden = appState.panel !== "logs";
    el.secretsPanel.hidden = appState.panel !== "secrets";
    el.s3Panel.hidden = appState.panel !== "s3";
    renderHealthStrip();
  }

  async function ensureLogsReady() {
    if (appState.logsReady) {
      return;
    }

    await refreshLogGroups();
    appState.logsReady = !logsState.error;

    if (logsState.group) {
      await refreshLogs("initial");
    }
  }

  async function ensureSecretsReady() {
    if (appState.secretsReady) {
      return;
    }

    await refreshSecrets("initial");
    appState.secretsReady = !secretsState.error;
  }

  async function ensureS3Ready() {
    if (appState.s3Ready) {
      return;
    }

    await refreshS3Buckets();
    appState.s3Ready = !s3State.error;

    if (s3State.bucket) {
      await refreshS3("initial");
    }
  }

  async function refreshMessages(source) {
    if (state.loading) {
      return;
    }

    let shouldRenderList = false;

    state.loading = true;
    state.source = source;
    state.error = "";
    renderStatus();
    renderFetch();

    try {
      const response = await fetch("/api/messages", { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      const messages = Array.isArray(payload.messages) ? payload.messages : [];
      const nextIds = new Set(messages.map((message) => message.id));
      const nextSignature = computeListSignature(messages);

      shouldRenderList = nextSignature !== state.listSignature;
      state.newIds =
        state.updatedAt && shouldRenderList
          ? new Set(messages.filter((message) => !state.knownIds.has(message.id)).map((message) => message.id))
          : state.newIds;
      state.knownIds = nextIds;
      state.messages = messages;
      state.duration = payload.fetchDurationMs || 0;
      state.parseErrors = payload.parseErrors || 0;
      state.newest = payload.latestMessageTimestamp || "";
      state.updatedAt = Date.now();
      state.listSignature = nextSignature;

      pruneState();
      applyFilter(shouldRenderList);
      setStatus(`Updated ${messages.length} message${messages.length === 1 ? "" : "s"}.`, "ok");
    } catch (error) {
      state.error = error.message || "Unknown refresh error";
      setStatus(`Refresh failed: ${state.error}`, "bad");
    } finally {
      state.loading = false;
      scheduleRefresh();
      renderAll({ renderList: shouldRenderList });
    }
  }

  async function refreshLogGroups() {
    try {
      const response = await fetch("/api/logs/groups", { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      logsState.groups = Array.isArray(payload.groups) ? payload.groups : [];

      const availableGroups = logsState.groups.map((group) => group.name).filter(Boolean);

      if (!availableGroups.includes(logsState.group)) {
        logsState.group = availableGroups.includes(config.defaultLogGroup)
          ? config.defaultLogGroup
          : availableGroups[0] || "";
      }

      logsState.error = "";
      await refreshLogStreams();
    } catch (error) {
      logsState.error = error.message || "Unknown log group refresh error";
    } finally {
      persistLogPreferences();
      renderLogsAll();
    }
  }

  async function refreshLogStreams() {
    if (!logsState.group) {
      logsState.streams = [];
      logsState.stream = "";
      renderLogsAll();
      return;
    }

    try {
      const response = await fetch(`/api/logs/streams?group=${encodeURIComponent(logsState.group)}`, {
        cache: "no-store"
      });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      logsState.streams = Array.isArray(payload.streams) ? payload.streams : [];

      if (!logsState.streams.some((stream) => stream.name === logsState.stream)) {
        logsState.stream = "";
      }

      logsState.error = "";
    } catch (error) {
      logsState.streams = [];
      logsState.stream = "";
      logsState.error = error.message || "Unknown log stream refresh error";
    } finally {
      persistLogPreferences();
      renderLogsAll();
    }
  }

  async function refreshLogs(source) {
    if (logsState.loading) {
      return;
    }

    if (!appState.logsReady) {
      await ensureLogsReady();
      return;
    }

    if (!logsState.group) {
      logsState.error = logsState.groups.length ? "Choose a log group to load events." : "No log groups found.";
      renderLogsAll();
      return;
    }

    let shouldRenderList = false;

    logsState.loading = true;
    logsState.source = source;
    logsState.error = "";
    renderLogsStatus();
    renderLogsFetch();

    try {
      const params = new URLSearchParams({
        group: logsState.group,
        windowMs: String(logsState.windowMs),
        limit: String(logsState.limit)
      });

      if (logsState.stream) {
        params.set("stream", logsState.stream);
      }

      const response = await fetch(`/api/logs/events?${params.toString()}`, { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      const events = Array.isArray(payload.events) ? payload.events : [];
      const nextSignature = computeLogListSignature(events);
      shouldRenderList = nextSignature !== logsState.listSignature;
      logsState.events = events;
      logsState.duration = payload.fetchDurationMs || 0;
      logsState.newest = payload.latestTimestamp || 0;
      logsState.updatedAt = Date.now();
      logsState.searchedLogStreams = payload.searchedLogStreams || (logsState.stream ? 1 : logsState.streams.length);
      logsState.listSignature = nextSignature;

      pruneLogsState();
      applyLogsFilter(shouldRenderList);
      setLogsStatus(`Updated ${logsState.events.length} log event${logsState.events.length === 1 ? "" : "s"}.`, "ok");
    } catch (error) {
      logsState.error = error.message || "Unknown log refresh error";
      setLogsStatus(`Refresh failed: ${logsState.error}`, "bad");
    } finally {
      logsState.loading = false;
      scheduleLogsRefresh();
      renderLogsAll({ renderList: shouldRenderList });

      if (shouldRenderList && logsState.tailNewest) {
        scrollPaneToTop(el.logsContentPane);
      }
    }
  }

  async function refreshSecrets(source) {
    if (secretsState.loading) {
      return;
    }

    let shouldRenderList = false;

    secretsState.loading = true;
    secretsState.source = source;
    secretsState.error = "";
    renderSecretsStatus();
    renderSecretsFetch();

    try {
      const response = await fetch("/api/secrets", { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      const items = Array.isArray(payload.secrets) ? payload.secrets : [];
      const nextSignature = computeSecretsListSignature(items);
      shouldRenderList = nextSignature !== secretsState.listSignature;
      secretsState.items = items;
      secretsState.duration = payload.fetchDurationMs || 0;
      secretsState.newest = payload.latestTimestamp || "";
      secretsState.updatedAt = Date.now();
      secretsState.listSignature = nextSignature;

      pruneSecretsState();
      applySecretsFilter(shouldRenderList);
      appState.secretsReady = true;
      setSecretsStatus(`Updated ${items.length} secret${items.length === 1 ? "" : "s"}.`, "ok");
    } catch (error) {
      secretsState.error = error.message || "Unknown secrets refresh error";
      appState.secretsReady = false;
      setSecretsStatus(`Refresh failed: ${secretsState.error}`, "bad");
    } finally {
      secretsState.loading = false;
      scheduleSecretsRefresh();
      renderSecretsAll({ renderList: shouldRenderList });
    }
  }

  async function refreshHealthSummary(source) {
    if (healthState.loading && source === "auto") {
      return;
    }

    healthState.loading = true;
    healthState.source = source;
    renderHealthStrip();

    try {
      const response = await fetch("/api/service-health", { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      healthState.services = payload.services || {};
      healthState.updatedAt = Date.now();
      healthState.error = "";
    } catch (error) {
      healthState.error = error.message || "Unknown health refresh error";
    } finally {
      healthState.loading = false;
      renderHealthStrip();
    }
  }

  async function refreshS3Buckets() {
    try {
      const response = await fetch("/api/s3/buckets", { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      s3State.buckets = Array.isArray(payload.buckets) ? payload.buckets : [];

      const availableBuckets = s3State.buckets.map((bucket) => bucket.name).filter(Boolean);

      if (!availableBuckets.includes(s3State.bucket)) {
        s3State.bucket = availableBuckets.includes(config.defaultS3Bucket)
          ? config.defaultS3Bucket
          : availableBuckets[0] || "";
      }

      s3State.error = "";
    } catch (error) {
      s3State.buckets = [];
      s3State.bucket = "";
      s3State.error = error.message || "Unknown S3 bucket refresh error";
    } finally {
      appState.s3Ready = !s3State.error;
      persistS3Preferences();
      renderS3All();
    }
  }

  async function refreshS3(source) {
    if (s3State.loading) {
      return;
    }

    if (!appState.s3Ready) {
      await ensureS3Ready();
      return;
    }

    if (!s3State.bucket) {
      s3State.error = s3State.buckets.length ? "Choose a bucket to load objects." : "No S3 buckets found.";
      renderS3All();
      return;
    }

    let shouldRenderList = false;

    s3State.loading = true;
    s3State.source = source;
    s3State.error = "";
    renderS3Status();
    renderS3Fetch();

    try {
      const params = new URLSearchParams({
        bucket: s3State.bucket
      });

      if (s3State.prefix) {
        params.set("prefix", s3State.prefix);
      }

      const response = await fetch(`/api/s3/objects?${params.toString()}`, { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      const objects = Array.isArray(payload.objects) ? payload.objects : [];
      const nextSignature = computeS3ListSignature(objects);
      shouldRenderList = nextSignature !== s3State.listSignature;
      s3State.objects = objects;
      s3State.duration = payload.fetchDurationMs || 0;
      s3State.newest = payload.latestTimestamp || "";
      s3State.updatedAt = Date.now();
      s3State.listSignature = nextSignature;

      pruneS3State();
      applyS3Filter(shouldRenderList);
      appState.s3Ready = true;
      setS3Status(`Updated ${objects.length} object${objects.length === 1 ? "" : "s"}.`, "ok");
    } catch (error) {
      s3State.error = error.message || "Unknown S3 refresh error";
      appState.s3Ready = false;
      setS3Status(`Refresh failed: ${s3State.error}`, "bad");
    } finally {
      s3State.loading = false;
      scheduleS3Refresh();
      renderS3All({ renderList: shouldRenderList });
    }
  }

  function applyLogsFilter(shouldRenderList = true) {
    const search = logsState.search.trim().toLowerCase();
    logsState.filtered = !search
      ? [...logsState.events]
      : logsState.events.filter((event) => logHaystack(event).includes(search));
    persistLogPreferences();
    renderLogsAll({ renderList: shouldRenderList });
  }

  function applySecretsFilter(shouldRenderList = true) {
    const search = secretsState.search.trim().toLowerCase();
    secretsState.filtered = !search
      ? [...secretsState.items]
      : secretsState.items.filter((secret) => secretHaystack(secret).includes(search));
    persistSecretPreferences();
    renderSecretsAll({ renderList: shouldRenderList });
  }

  function applyS3Filter(shouldRenderList = true) {
    const search = s3State.search.trim().toLowerCase();
    s3State.filtered = !search
      ? [...s3State.objects]
      : s3State.objects.filter((object) => s3Haystack(object).includes(search));
    persistS3Preferences();
    renderS3All({ renderList: shouldRenderList });
  }

  function pruneState() {
    const ids = new Set(state.messages.map((message) => message.id));
    state.openIds = new Set([...state.openIds].filter((id) => ids.has(id)));
    state.newIds = new Set([...state.newIds].filter((id) => ids.has(id)));

    Object.keys(state.views).forEach((id) => {
      if (!ids.has(id)) {
        delete state.views[id];
      }
    });

    Object.keys(state.raw).forEach((id) => {
      if (!ids.has(id)) {
        delete state.raw[id];
      }
    });
  }

  function pruneLogsState() {
    const ids = new Set(logsState.events.map((event) => event.id));
    logsState.openIds = new Set([...logsState.openIds].filter((id) => ids.has(id)));
  }

  function pruneSecretsState() {
    const ids = new Set(secretsState.items.map((secret) => secret.id));
    secretsState.openIds = new Set([...secretsState.openIds].filter((id) => ids.has(id)));

    Object.keys(secretsState.values).forEach((id) => {
      if (!ids.has(id)) {
        delete secretsState.values[id];
      }
    });

    secretsState.revealedIds = new Set([...secretsState.revealedIds].filter((id) => ids.has(id)));
  }

  function pruneS3State() {
    const ids = new Set(s3State.objects.map((object) => object.id));
    s3State.openIds = new Set([...s3State.openIds].filter((id) => ids.has(id)));

    Object.keys(s3State.previews).forEach((id) => {
      if (!ids.has(id)) {
        delete s3State.previews[id];
      }
    });
  }

  function applyFilter(shouldRenderList = true) {
    const search = state.search.trim().toLowerCase();
    state.filtered = !search
      ? [...state.messages]
      : state.messages.filter((message) => haystack(message).includes(search));
    persistEmailPreferences();
    renderAll({ renderList: shouldRenderList });
  }

  function computeListSignature(messages) {
    return messages
      .map((message) =>
        [
          message.id,
          message.timestampMs || 0,
          message.rawSizeBytes || 0,
          message.attachmentCount || 0,
          message.hasHtml ? 1 : 0,
          message.preview || "",
          message.parseError || ""
        ].join("::")
      )
      .join("|");
  }

  function computeLogListSignature(events) {
    return events
      .map((event) =>
        [event.id, event.timestamp || 0, event.ingestionTime || 0, event.logStreamName || "", event.message || ""].join(
          "::"
        )
      )
      .join("|");
  }

  function computeSecretsListSignature(items) {
    return items
      .map((secret) =>
        [
          secret.id,
          secret.name || "",
          secret.arn || "",
          secret.description || "",
          secret.lastChangedDate || "",
          secret.createdDate || "",
          secret.rotationEnabled ? 1 : 0,
          secret.owningService || "",
          secret.primaryRegion || "",
          secret.versionCount || 0,
          secret.tagCount || 0
        ].join("::")
      )
      .join("|");
  }

  function computeS3ListSignature(objects) {
    return objects
      .map((object) =>
        [object.id, object.key || "", object.size || 0, object.lastModified || "", object.etag || ""].join("::")
      )
      .join("|");
  }

  function haystack(message) {
    return [
      message.subject,
      message.from,
      message.to,
      message.replyTo,
      message.preview,
      message.textContent,
      message.region,
      ...(message.attachments || []).flatMap((attachment) => [attachment.filename, attachment.contentType])
    ]
      .filter(Boolean)
      .join(" ")
      .toLowerCase();
  }

  function logHaystack(event) {
    return [event.logStreamName, event.message, event.preview].filter(Boolean).join(" ").toLowerCase();
  }

  function secretHaystack(secret) {
    return [
      secret.name,
      secret.arn,
      secret.description,
      secret.primaryRegion,
      secret.owningService,
      ...(secret.tags || []).flatMap((tag) => [tag.key, tag.value])
    ]
      .filter(Boolean)
      .join(" ")
      .toLowerCase();
  }

  function s3Haystack(object) {
    return [object.bucket, object.key, object.storageClass, object.etag].filter(Boolean).join(" ").toLowerCase();
  }

  function scheduleRefresh() {
    window.clearTimeout(state.timer);

    if (appState.panel !== "emails" || !state.auto || document.hidden || state.loading) {
      return;
    }

    state.timer = window.setTimeout(() => refreshMessages("auto"), state.interval);
  }

  function scheduleLogsRefresh() {
    window.clearTimeout(logsState.timer);

    if (appState.panel !== "logs" || !logsState.auto || document.hidden || logsState.loading) {
      return;
    }

    logsState.timer = window.setTimeout(() => refreshLogs("auto"), logsState.interval);
  }

  function scheduleSecretsRefresh() {
    window.clearTimeout(secretsState.timer);

    if (appState.panel !== "secrets" || !secretsState.auto || document.hidden || secretsState.loading) {
      return;
    }

    secretsState.timer = window.setTimeout(() => refreshSecrets("auto"), secretsState.interval);
  }

  function scheduleS3Refresh() {
    window.clearTimeout(s3State.timer);

    if (appState.panel !== "s3" || !s3State.auto || document.hidden || s3State.loading) {
      return;
    }

    s3State.timer = window.setTimeout(() => refreshS3("auto"), s3State.interval);
  }

  function renderAll(options = {}) {
    const { renderList: shouldRenderList = true } = options;
    renderStats();
    renderFetch();
    renderStatus();
    if (shouldRenderList) {
      renderList();
    }
    renderLiveClock();
  }

  function renderLogsAll(options = {}) {
    const { renderList: shouldRenderList = true } = options;
    renderLogsFilters();
    renderLogsStats();
    renderLogsFetch();
    renderLogsStatus();
    if (shouldRenderList) {
      renderLogsList();
    }
    renderLogsLiveClock();
  }

  function renderSecretsAll(options = {}) {
    const { renderList: shouldRenderList = true } = options;
    renderSecretsStats();
    renderSecretsFetch();
    renderSecretsStatus();
    if (shouldRenderList) {
      renderSecretsList();
    }
    renderSecretsLiveClock();
  }

  function renderS3All(options = {}) {
    const { renderList: shouldRenderList = true } = options;
    renderS3Filters();
    renderS3Stats();
    renderS3Fetch();
    renderS3Status();
    if (shouldRenderList) {
      renderS3List();
    }
    renderS3LiveClock();
  }

  function renderHealthStrip() {
    const serviceOrder = [
      { key: "emails", panel: "emails", icon: "✉️", label: "SES Emails", shortLabel: "SES" },
      { key: "logs", panel: "logs", icon: "📜", label: "CloudWatch Logs", shortLabel: "Logs" },
      { key: "secrets", panel: "secrets", icon: "🔐", label: "Secrets Manager", shortLabel: "Secrets" },
      { key: "s3", panel: "s3", icon: "🪣", label: "S3 Explorer", shortLabel: "S3" }
    ];

    el.healthStrip.innerHTML = serviceOrder
      .map((service) => {
        const entry = healthState.services?.[service.key];
        const toneClass = healthState.loading && !entry ? "warn" : entry?.ok ? "ok" : entry ? "bad" : "";
        const activeClass = service.panel === appState.panel ? "active" : "";
        const className = ["healthBadge", toneClass, activeClass].filter(Boolean).join(" ");
        const summary = entry?.summary || (healthState.loading ? "Checking..." : "Waiting");
        const detail = entry?.detail || (healthState.error ? healthState.error : "Not checked yet");
        const updatedMeta = healthState.updatedAt
          ? `Updated ${formatRelative(healthState.updatedAt)} via ${healthState.source}`
          : "";
        const titleParts = [`${service.label}: ${detail}`];

        if (updatedMeta) {
          titleParts.push(updatedMeta);
        }

        return `<button class="${className}" type="button" data-health-panel="${service.panel}" aria-pressed="${service.panel === appState.panel ? "true" : "false"}" title="${escapeHtml(
          titleParts.join(" • ")
        )}"><span class="healthBadgeName">${service.icon} ${escapeHtml(service.shortLabel)}</span><span class="healthBadgeSummary">${escapeHtml(summary)}</span></button>`;
      })
      .join("");
  }

  function renderStats() {
    el.totalStat.textContent = String(state.messages.length);
    el.visibleStat.textContent = `${state.filtered.length} visible${state.search ? " after search" : ""}`;
    el.newStat.textContent = String(state.newIds.size);
    el.newestStat.textContent = state.newest ? formatDateTime(state.newest) : "No messages";
  }

  function renderLogsFilters() {
    const groups = logsState.groups.length
      ? logsState.groups.map((group) => `<option value="${escapeHtml(group.name)}">${escapeHtml(group.name)}</option>`)
      : ['<option value="">No log groups</option>'];
    const streams = [
      '<option value="">All streams</option>',
      ...logsState.streams.map(
        (stream) => `<option value="${escapeHtml(stream.name)}">${escapeHtml(stream.name)}</option>`
      )
    ];

    el.logsGroupSelect.innerHTML = groups.join("");
    el.logsStreamSelect.innerHTML = streams.join("");

    if (logsState.group) {
      el.logsGroupSelect.value = logsState.group;
    }

    el.logsStreamSelect.value = logsState.stream;
    el.logsWrapToggle.checked = logsState.wrapLines;
    el.logsTailToggle.checked = logsState.tailNewest;
  }

  function renderS3Filters() {
    const bucketOptions = s3State.buckets.length
      ? s3State.buckets.map(
          (bucket) => `<option value="${escapeHtml(bucket.name)}">${escapeHtml(bucket.name)}</option>`
        )
      : ['<option value="">No buckets</option>'];

    el.s3BucketSelect.innerHTML = bucketOptions.join("");

    if (s3State.bucket) {
      el.s3BucketSelect.value = s3State.bucket;
    }

    el.s3PrefixInput.value = s3State.prefix;
    el.s3SearchInput.value = s3State.search;
  }

  function renderLogsStats() {
    el.logsTotalStat.textContent = String(logsState.events.length);
    el.logsVisibleStat.textContent = `${logsState.filtered.length} visible${logsState.search ? " after search" : ""}`;
    el.logsStreamsStat.textContent = String(logsState.streams.length || logsState.searchedLogStreams || 0);
    el.logsNewestStat.textContent = logsState.newest ? formatDateTime(logsState.newest) : "No events";
  }

  function renderSecretsStats() {
    el.secretsTotalStat.textContent = String(secretsState.items.length);
    el.secretsVisibleStat.textContent = `${secretsState.filtered.length} visible${secretsState.search ? " after search" : ""}`;
    el.secretsLoadedStat.textContent = String(
      Object.values(secretsState.values).filter((entry) => entry?.status === "loaded").length
    );
    el.secretsNewestStat.textContent = secretsState.newest ? formatDateTime(secretsState.newest) : "No secrets";
  }

  function renderS3Stats() {
    el.s3TotalStat.textContent = String(s3State.objects.length);
    el.s3VisibleStat.textContent = `${s3State.filtered.length} visible${s3State.search ? " after search" : ""}`;
    el.s3BucketsStat.textContent = String(s3State.buckets.length);
    el.s3NewestStat.textContent = s3State.newest ? formatDateTime(s3State.newest) : "No objects";
  }

  function renderFetch() {
    if (state.loading) {
      el.fetchStat.textContent = "Refreshing...";
      el.fetchDetail.textContent = `Endpoint: ${config.endpoint}`;
      return;
    }

    if (state.error) {
      el.fetchStat.textContent = "Needs attention";
      el.fetchDetail.textContent = state.error;
      return;
    }

    if (!state.updatedAt) {
      el.fetchStat.textContent = "Idle";
      el.fetchDetail.textContent = `Endpoint: ${config.endpoint}`;
      return;
    }

    el.fetchStat.textContent = `${state.duration}ms`;
    el.fetchDetail.textContent = `${state.parseErrors} parse error${state.parseErrors === 1 ? "" : "s"}. Endpoint: ${config.endpoint}`;
  }

  function renderLogsFetch() {
    if (logsState.loading) {
      el.logsFetchStat.textContent = "Refreshing...";
      el.logsFetchDetail.textContent = `Endpoint: ${config.cloudWatchEndpoint} (${config.cloudWatchRegion})`;
      return;
    }

    if (logsState.error) {
      el.logsFetchStat.textContent = "Needs attention";
      el.logsFetchDetail.textContent = logsState.error;
      return;
    }

    if (!logsState.updatedAt) {
      el.logsFetchStat.textContent = "Idle";
      el.logsFetchDetail.textContent = `Endpoint: ${config.cloudWatchEndpoint} (${config.cloudWatchRegion})`;
      return;
    }

    el.logsFetchStat.textContent = `${logsState.duration}ms`;
    el.logsFetchDetail.textContent = `${logsState.group || "No group selected"}. Endpoint: ${config.cloudWatchEndpoint}`;
  }

  function renderSecretsFetch() {
    if (secretsState.loading) {
      el.secretsFetchStat.textContent = "Refreshing...";
      el.secretsFetchDetail.textContent = `Endpoint: ${config.secretsEndpoint} (${config.secretsRegion})`;
      return;
    }

    if (secretsState.error) {
      el.secretsFetchStat.textContent = "Needs attention";
      el.secretsFetchDetail.textContent = secretsState.error;
      return;
    }

    if (!secretsState.updatedAt) {
      el.secretsFetchStat.textContent = "Idle";
      el.secretsFetchDetail.textContent = `Endpoint: ${config.secretsEndpoint} (${config.secretsRegion})`;
      return;
    }

    el.secretsFetchStat.textContent = `${secretsState.duration}ms`;
    el.secretsFetchDetail.textContent = `Endpoint: ${config.secretsEndpoint} (${config.secretsRegion})`;
  }

  function renderS3Fetch() {
    if (s3State.loading) {
      el.s3FetchStat.textContent = "Refreshing...";
      el.s3FetchDetail.textContent = `Endpoint: ${config.s3Endpoint} (${config.s3Region})`;
      return;
    }

    if (s3State.error) {
      el.s3FetchStat.textContent = "Needs attention";
      el.s3FetchDetail.textContent = s3State.error;
      return;
    }

    if (!s3State.updatedAt) {
      el.s3FetchStat.textContent = "Idle";
      el.s3FetchDetail.textContent = `Endpoint: ${config.s3Endpoint} (${config.s3Region})`;
      return;
    }

    el.s3FetchStat.textContent = `${s3State.duration}ms`;
    el.s3FetchDetail.textContent = `${s3State.bucket || "No bucket selected"}. Endpoint: ${config.s3Endpoint}`;
  }

  function renderStatus() {
    el.statusChip.className = "status";

    if (state.loading) {
      el.statusChip.classList.add("warn");
      el.statusChip.textContent = "Refreshing messages...";
      return;
    }

    if (state.error) {
      el.statusChip.classList.add("bad");
      el.statusChip.textContent = `Refresh failed: ${state.error}`;
      return;
    }

    if (!state.auto) {
      el.statusChip.textContent = "Live refresh paused";
      return;
    }

    if (document.hidden) {
      el.statusChip.classList.add("warn");
      el.statusChip.textContent = "Tab hidden, live refresh paused";
      return;
    }

    if (!state.updatedAt) {
      el.statusChip.textContent = "Waiting for first refresh...";
      return;
    }

    const seconds = Math.max(0, Math.ceil((state.updatedAt + state.interval - Date.now()) / 1000));
    el.statusChip.classList.add("ok");
    el.statusChip.textContent = `Live refresh on, next check in ${seconds}s`;
  }

  function renderLogsStatus() {
    el.logsStatusChip.className = "status";

    if (logsState.loading) {
      el.logsStatusChip.classList.add("warn");
      el.logsStatusChip.textContent = "Refreshing logs...";
      return;
    }

    if (logsState.error) {
      el.logsStatusChip.classList.add("bad");
      el.logsStatusChip.textContent = `Refresh failed: ${logsState.error}`;
      return;
    }

    if (!logsState.auto) {
      el.logsStatusChip.textContent = "Live refresh paused";
      return;
    }

    if (document.hidden) {
      el.logsStatusChip.classList.add("warn");
      el.logsStatusChip.textContent = "Tab hidden, live refresh paused";
      return;
    }

    if (!logsState.updatedAt) {
      el.logsStatusChip.textContent = "Waiting for first refresh...";
      return;
    }

    const seconds = Math.max(0, Math.ceil((logsState.updatedAt + logsState.interval - Date.now()) / 1000));
    el.logsStatusChip.classList.add("ok");
    el.logsStatusChip.textContent = `Live refresh on, next check in ${seconds}s`;
  }

  function renderSecretsStatus() {
    el.secretsStatusChip.className = "status";

    if (secretsState.loading) {
      el.secretsStatusChip.classList.add("warn");
      el.secretsStatusChip.textContent = "Refreshing secrets...";
      return;
    }

    if (secretsState.error) {
      el.secretsStatusChip.classList.add("bad");
      el.secretsStatusChip.textContent = `Refresh failed: ${secretsState.error}`;
      return;
    }

    if (!secretsState.auto) {
      el.secretsStatusChip.textContent = "Live refresh paused";
      return;
    }

    if (document.hidden) {
      el.secretsStatusChip.classList.add("warn");
      el.secretsStatusChip.textContent = "Tab hidden, live refresh paused";
      return;
    }

    if (!secretsState.updatedAt) {
      el.secretsStatusChip.textContent = "Waiting for first refresh...";
      return;
    }

    const seconds = Math.max(0, Math.ceil((secretsState.updatedAt + secretsState.interval - Date.now()) / 1000));
    el.secretsStatusChip.classList.add("ok");
    el.secretsStatusChip.textContent = `Live refresh on, next check in ${seconds}s`;
  }

  function renderS3Status() {
    el.s3StatusChip.className = "status";

    if (s3State.loading) {
      el.s3StatusChip.classList.add("warn");
      el.s3StatusChip.textContent = "Refreshing objects...";
      return;
    }

    if (s3State.error) {
      el.s3StatusChip.classList.add("bad");
      el.s3StatusChip.textContent = `Refresh failed: ${s3State.error}`;
      return;
    }

    if (!s3State.auto) {
      el.s3StatusChip.textContent = "Live refresh paused";
      return;
    }

    if (document.hidden) {
      el.s3StatusChip.classList.add("warn");
      el.s3StatusChip.textContent = "Tab hidden, live refresh paused";
      return;
    }

    if (!s3State.updatedAt) {
      el.s3StatusChip.textContent = "Waiting for first refresh...";
      return;
    }

    const seconds = Math.max(0, Math.ceil((s3State.updatedAt + s3State.interval - Date.now()) / 1000));
    el.s3StatusChip.classList.add("ok");
    el.s3StatusChip.textContent = `Live refresh on, next check in ${seconds}s`;
  }

  function renderLiveClock() {
    if (!state.updatedAt) {
      el.updatedStat.textContent = "Not refreshed yet";
      return;
    }

    el.updatedStat.textContent = `Updated ${formatRelative(state.updatedAt)} via ${state.source}`;
    renderStatus();
  }

  function renderLogsLiveClock() {
    if (!logsState.updatedAt) {
      el.logsUpdatedStat.textContent = "Not refreshed yet";
      return;
    }

    el.logsUpdatedStat.textContent = `Updated ${formatRelative(logsState.updatedAt)} via ${logsState.source}`;
    renderLogsStatus();
  }

  function renderSecretsLiveClock() {
    if (!secretsState.updatedAt) {
      el.secretsUpdatedStat.textContent = "Not refreshed yet";
      return;
    }

    el.secretsUpdatedStat.textContent = `Updated ${formatRelative(secretsState.updatedAt)} via ${secretsState.source}`;
    renderSecretsStatus();
  }

  function renderS3LiveClock() {
    if (!s3State.updatedAt) {
      el.s3UpdatedStat.textContent = "Not refreshed yet";
      return;
    }

    el.s3UpdatedStat.textContent = `Updated ${formatRelative(s3State.updatedAt)} via ${s3State.source}`;
    renderS3Status();
  }

  function renderList() {
    el.banner.hidden = !state.error;
    el.banner.textContent = state.error ? `Refresh failed: ${state.error}` : "";

    if (!state.filtered.length) {
      el.list.innerHTML = "";
      el.empty.hidden = false;
      el.empty.textContent = state.messages.length
        ? "No messages match the current search."
        : "No emails yet. Send one through LocalStack SES and refresh.";
      updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
      return;
    }

    el.empty.hidden = true;
    el.list.innerHTML = state.filtered.map(renderCard).join("");
    bindCardToggles();
    syncCardExpansion();
    updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
  }

  function renderLogsList() {
    el.logsBanner.hidden = !logsState.error;
    el.logsBanner.textContent = logsState.error ? `Refresh failed: ${logsState.error}` : "";

    if (!logsState.group && !logsState.groups.length) {
      el.logsList.innerHTML = "";
      el.logsEmpty.hidden = false;
      el.logsEmpty.textContent = "No CloudWatch log groups found in LocalStack yet.";
      updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
      return;
    }

    if (!logsState.filtered.length) {
      el.logsList.innerHTML = "";
      el.logsEmpty.hidden = false;
      el.logsEmpty.textContent = logsState.events.length
        ? "No log events match the current search."
        : "No log events found for the selected group, stream, and time window.";
      updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
      return;
    }

    el.logsEmpty.hidden = true;
    el.logsList.innerHTML = logsState.filtered.map((event) => renderLogEvent(event)).join("");
    bindLogToggles();
    updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
  }

  function renderSecretsList() {
    el.secretsBanner.hidden = !secretsState.error;
    el.secretsBanner.textContent = secretsState.error ? `Refresh failed: ${secretsState.error}` : "";

    if (!secretsState.filtered.length) {
      el.secretsList.innerHTML = "";
      el.secretsEmpty.hidden = false;
      el.secretsEmpty.textContent = secretsState.items.length
        ? "No secrets match the current search."
        : "No Secrets Manager entries found in LocalStack yet.";
      updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
      return;
    }

    el.secretsEmpty.hidden = true;
    el.secretsList.innerHTML = secretsState.filtered.map((secret) => renderSecretCard(secret)).join("");
    bindSecretToggles();
    syncSecretExpansion();
    updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
  }

  function renderS3List() {
    el.s3Banner.hidden = !s3State.error;
    el.s3Banner.textContent = s3State.error ? `Refresh failed: ${s3State.error}` : "";

    if (!s3State.bucket && !s3State.buckets.length) {
      el.s3List.innerHTML = "";
      el.s3Empty.hidden = false;
      el.s3Empty.textContent = "No S3 buckets found in LocalStack yet.";
      updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
      return;
    }

    if (!s3State.filtered.length) {
      el.s3List.innerHTML = "";
      el.s3Empty.hidden = false;
      el.s3Empty.textContent = s3State.objects.length
        ? "No S3 objects match the current search."
        : "No S3 objects found for the selected bucket and prefix.";
      updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
      return;
    }

    el.s3Empty.hidden = true;
    el.s3List.innerHTML = s3State.filtered.map((object) => renderS3ObjectCard(object)).join("");
    bindS3Toggles();
    syncS3Expansion();
    updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
  }

  function renderLogEvent(event) {
    const level = detectLogLevel(event);
    const levelTag = level ? `<span class="tag ${level.className}">${escapeHtml(level.label)}</span>` : "";

    return `
      <details class="logEvent" data-id="${escapeHtml(event.id)}" ${logsState.openIds.has(event.id) ? "open" : ""}>
        <summary class="logSummary">
          <div class="logSummaryTop">
            <div class="logMeta">
              <span class="time">${escapeHtml(formatDateTime(event.timestamp))}</span>
              <span class="tag logTag" title="${escapeHtml(event.logStreamName || "Unknown stream")}">${escapeHtml(event.logStreamName || "Unknown stream")}</span>
              ${levelTag}
            </div>
            <div class="logSummaryActions">
              <button class="mini logCopyButton" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">📋 Copy JSON</button>
              <span class="tag">${escapeHtml(formatRelative(event.timestamp || Date.now()))}</span>
            </div>
          </div>
          <p class="logPreview jsonSyntax">${renderLogPreviewContent(event)}</p>
        </summary>
        <div class="logBody ${logsState.wrapLines ? "" : "wrapOff"}">
          <pre class="jsonSyntax">${renderLogBodyContent(event.message)}</pre>
        </div>
      </details>
    `;
  }

  function renderSecretCard(secret) {
    const valueState = secretsState.values[secret.id];
    const tags = [];

    if (secret.owningService) {
      tags.push(`<span class="tag secretTag">${escapeHtml(secret.owningService)}</span>`);
    }

    if (secret.primaryRegion) {
      tags.push(`<span class="tag secretTag">${escapeHtml(secret.primaryRegion)}</span>`);
    }

    if (secret.rotationEnabled) {
      tags.push('<span class="tag secretTag">Rotation on</span>');
    } else {
      tags.push('<span class="tag">Rotation off</span>');
    }

    if (secret.tagCount) {
      tags.push(`<span class="tag secretTag">${secret.tagCount} tag${secret.tagCount === 1 ? "" : "s"}</span>`);
    }

    if (valueState?.status === "loaded") {
      tags.push(`<span class="tag secretTag">${escapeHtml(valueState.label)}</span>`);
    }

    if (valueState?.status === "error") {
      tags.push('<span class="tag bad">Value load failed</span>');
    }

    return `
      <details class="card secretCard" data-id="${escapeHtml(secret.id)}">
        <summary class="summary secretSummary">
          <div class="top">
            <div class="head">
              <h2>🔐 ${escapeHtml(secret.name)}</h2>
              <p class="meta">${escapeHtml(secret.description || secret.arn || "No description")}</p>
            </div>
            <span class="time">${escapeHtml(formatDateTime(secret.lastChangedDate || secret.createdDate))}</span>
          </div>
          <div class="tags">${tags.join("")}</div>
          <p class="preview">${escapeHtml(buildSecretPreview(secret))}</p>
        </summary>
        <div class="body secretBody">
          <dl class="grid">
            ${metaCard("Name", secret.name)}
            ${metaCard("ARN", secret.arn || "Not available")}
            ${metaCard("Description", secret.description || "None")}
            ${metaCard("Last changed", formatDateTime(secret.lastChangedDate || secret.createdDate))}
            ${metaCard("Created", formatDateTime(secret.createdDate))}
            ${metaCard("Last accessed", formatDateTime(secret.lastAccessedDate))}
            ${metaCard("Primary region", secret.primaryRegion || "Not set")}
            ${metaCard("Owning service", secret.owningService || "Not set")}
          </dl>

          <div class="secretValuePanel">
            ${renderSecretValuePanel(secret, valueState)}
          </div>
        </div>
      </details>
    `;
  }

  function renderS3ObjectCard(object) {
    const previewState = s3State.previews[object.id];
    const tags = [
      `<span class="tag bucketTag">${escapeHtml(object.bucket)}</span>`,
      `<span class="tag bucketTag">${escapeHtml(formatBytes(object.size))}</span>`
    ];

    if (object.storageClass) {
      tags.push(`<span class="tag bucketTag">${escapeHtml(object.storageClass)}</span>`);
    }

    if (previewState?.status === "loaded") {
      tags.push(`<span class="tag bucketTag">${escapeHtml(previewState.previewType)}</span>`);
    }

    if (previewState?.status === "error") {
      tags.push('<span class="tag bad">Preview failed</span>');
    }

    return `
      <details class="card s3Card" data-id="${escapeHtml(object.id)}">
        <summary class="summary s3Summary">
          <div class="top">
            <div class="head">
              <h2>🪣 ${escapeHtml(object.key)}</h2>
              <p class="meta">${escapeHtml(object.bucket)} • ${escapeHtml(formatBytes(object.size))}</p>
            </div>
            <span class="time">${escapeHtml(formatDateTime(object.lastModified))}</span>
          </div>
          <div class="tags">${tags.join("")}</div>
          <p class="preview">${escapeHtml(buildS3Preview(object))}</p>
        </summary>
        <div class="body s3Body">
          <div class="toolbar">
            <div class="actions">
              <button class="mini" type="button" data-s3-action="copy-key" data-id="${escapeHtml(object.id)}">📋 Copy key</button>
              <button class="mini" type="button" data-s3-action="copy-uri" data-id="${escapeHtml(object.id)}">🔗 Copy URI</button>
              <a class="mini attachmentLink" href="/api/s3/download?bucket=${encodeURIComponent(object.bucket)}&key=${encodeURIComponent(object.key)}">⬇️ Download</a>
            </div>
          </div>

          <dl class="grid">
            ${metaCard("Bucket", object.bucket)}
            ${metaCard("Key", object.key)}
            ${metaCard("Size", formatBytes(object.size))}
            ${metaCard("Modified", formatDateTime(object.lastModified))}
            ${metaCard("Storage class", object.storageClass || "STANDARD")}
            ${metaCard("ETag", object.etag || "Not available")}
          </dl>

          <div class="s3PreviewPanel">${renderS3PreviewPanel(object, previewState)}</div>
        </div>
      </details>
    `;
  }

  function bindLogToggles() {
    el.logsList.querySelectorAll(".logEvent").forEach((details) => {
      details.addEventListener("toggle", () => {
        const id = details.dataset.id;

        if (!id) {
          return;
        }

        if (details.open) {
          logsState.openIds.add(id);
        } else {
          logsState.openIds.delete(id);
        }
      });
    });
  }

  function bindSecretToggles() {
    el.secretsList.querySelectorAll(".secretCard").forEach((details) => {
      details.addEventListener("toggle", () => {
        const id = details.dataset.id;

        if (!id) {
          return;
        }

        if (details.open) {
          secretsState.openIds.add(id);
          ensureSecretValue(id, { force: false });
        } else {
          secretsState.openIds.delete(id);
        }
      });
    });
  }

  function bindS3Toggles() {
    el.s3List.querySelectorAll(".s3Card").forEach((details) => {
      details.addEventListener("toggle", () => {
        const id = details.dataset.id;

        if (!id) {
          return;
        }

        if (details.open) {
          s3State.openIds.add(id);
          ensureS3Preview(id, { force: false });
        } else {
          s3State.openIds.delete(id);
        }
      });
    });
  }

  function bindCardToggles() {
    el.list.querySelectorAll(".card").forEach((details) => {
      details.addEventListener("toggle", () => {
        const id = details.dataset.id;

        if (!id) {
          return;
        }

        if (details.open) {
          state.openIds.add(id);
        } else {
          state.openIds.delete(id);
        }

        hydrate(details, getMessage(id));
      });
    });
  }

  function renderCard(message) {
    const view = state.views[message.id] || (message.hasHtml ? "rendered" : "text");
    const tags = [];

    if (state.newIds.has(message.id)) {
      tags.push('<span class="tag new">New</span>');
    }

    if (message.attachmentCount) {
      tags.push(
        `<span class="tag">${message.attachmentCount} attachment${message.attachmentCount === 1 ? "" : "s"}</span>`
      );
    }

    tags.push(`<span class="tag">${message.hasHtml ? "HTML" : "Text only"}</span>`);

    if (message.parseError) {
      tags.push('<span class="tag bad">Parse issue</span>');
    }

    return `
      <details class="card ${state.newIds.has(message.id) ? "new" : ""}" data-id="${escapeHtml(message.id)}">
        <summary class="summary">
          <div class="top">
            <div class="head">
              <h2>${escapeHtml(message.subject)}</h2>
              <p class="meta">${escapeHtml(message.from)} to ${escapeHtml(message.to)}</p>
            </div>
            <span class="time">${escapeHtml(formatDateTime(message.timestamp))}</span>
          </div>
          <div class="tags">${tags.join("")}</div>
          <p class="preview">${escapeHtml(message.preview)}</p>
        </summary>
        <div class="body">
          <div class="toolbar">
            <div class="tabs">
              ${
                message.hasHtml
                  ? `<button class="tab ${view === "rendered" ? "active" : ""}" type="button" data-action="view" data-view="rendered" data-id="${escapeHtml(message.id)}">Rendered</button>`
                  : ""
              }
              <button class="tab ${view === "text" ? "active" : ""}" type="button" data-action="view" data-view="text" data-id="${escapeHtml(message.id)}">Text</button>
              <button class="tab ${view === "raw" ? "active" : ""}" type="button" data-action="view" data-view="raw" data-id="${escapeHtml(message.id)}">Raw</button>
            </div>
            <div class="actions">
              <button class="mini" type="button" data-action="copy-raw" data-id="${escapeHtml(message.id)}">📋 Copy raw</button>
            </div>
          </div>

          <dl class="grid">
            ${metaCard("From", message.from)}
            ${metaCard("To", message.to)}
            ${metaCard("Reply-To", message.replyTo || "None")}
            ${metaCard("Sent", formatDateTime(message.timestamp))}
            ${metaCard("Region", message.region || "Unknown region")}
            ${metaCard("LocalStack Id", message.id)}
            ${metaCard("Message-Id", message.messageId || "Not available")}
            ${metaCard("Raw size", formatBytes(message.rawSizeBytes))}
            ${message.parseError ? metaCard("Parse error", message.parseError) : ""}
          </dl>

          ${
            message.attachments?.length
              ? `<div class="attachments">${message.attachments
                  .map((attachment) => {
                    const size = attachment.size ? `, ${formatBytes(attachment.size)}` : "";
                    const icon = resolveAttachmentIcon(attachment);
                    return `<a class="attachment attachmentLink" href="/api/messages/${encodeURIComponent(message.id)}/attachments/${attachment.index}" download="${escapeHtml(attachment.filename)}" title="Download ${escapeHtml(attachment.filename)}">${icon} ${escapeHtml(attachment.filename)} (${escapeHtml(attachment.contentType)}${escapeHtml(size)})</a>`;
                  })
                  .join("")}</div>`
              : ""
          }

          <div class="panel">${renderPanel(message, view)}</div>
        </div>
      </details>
    `;
  }

  function renderPanel(message, view) {
    if (view === "rendered" && message.hasHtml) {
      return `<iframe title="${escapeHtml(message.subject)}" data-frame sandbox="" referrerpolicy="no-referrer"></iframe>`;
    }

    if (view === "raw") {
      const raw = state.raw[message.id];

      if (!raw) {
        return `<div class="placeholder">Raw MIME source is loaded on demand.<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-action="load-raw" data-id="${escapeHtml(message.id)}">Load raw source</button></div></div>`;
      }

      if (raw.status === "loading") {
        return '<div class="placeholder">Loading raw source...</div>';
      }

      if (raw.status === "error") {
        return `<div class="inlineError">Unable to load raw source: ${escapeHtml(raw.error)}<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-action="load-raw" data-id="${escapeHtml(message.id)}">Retry</button></div></div>`;
      }

      return `<pre>${escapeHtml(raw.value)}</pre>`;
    }

    return `<pre>${escapeHtml(message.textContent || "No plain-text content available for this message.")}</pre>`;
  }

  function renderSecretValuePanel(secret, valueState) {
    if (!valueState) {
      return `<div class="placeholder">Secret values are loaded on demand.<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-secret-action="load-value" data-id="${escapeHtml(secret.id)}">Load value</button></div></div>`;
    }

    if (valueState.status === "loading") {
      return '<div class="placeholder">Loading secret value...</div>';
    }

    if (valueState.status === "error") {
      return `<div class="inlineError">Unable to load secret value: ${escapeHtml(valueState.error)}<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-secret-action="reload-value" data-id="${escapeHtml(secret.id)}">Retry</button></div></div>`;
    }

    const revealed = secretsState.revealedIds.has(secret.id);
    const maskedHtml = escapeHtml(maskSecretValue(valueState.copyValue));

    return `
      <div class="toolbar">
        <div class="tags">
          <span class="tag secretTag">${escapeHtml(valueState.label)}</span>
          ${
            valueState.versionId
              ? `<span class="tag secretTag">Version ${escapeHtml(valueState.versionId.slice(0, 8))}</span>`
              : ""
          }
          ${
            valueState.versionStages.length
              ? `<span class="tag secretTag">${escapeHtml(valueState.versionStages.join(", "))}</span>`
              : ""
          }
        </div>
        <div class="actions">
          <button class="mini" type="button" data-secret-action="toggle-reveal" data-id="${escapeHtml(secret.id)}">${revealed ? "🙈 Hide" : "👁️ Reveal"}</button>
          <button class="mini" type="button" data-secret-action="copy-value" data-id="${escapeHtml(secret.id)}">📋 Copy value</button>
          <button class="mini" type="button" data-secret-action="copy-env" data-id="${escapeHtml(secret.id)}">🧪 Copy env</button>
          <button class="mini" type="button" data-secret-action="copy-name" data-id="${escapeHtml(secret.id)}">🏷️ Copy name</button>
          <button class="mini" type="button" data-secret-action="copy-arn" data-id="${escapeHtml(secret.id)}">🔗 Copy ARN</button>
          <button class="mini" type="button" data-secret-action="reload-value" data-id="${escapeHtml(secret.id)}">🔄 Reload</button>
        </div>
      </div>
      <pre class="${revealed && valueState.isJson ? "jsonSyntax" : ""}">${revealed ? valueState.displayHtml : maskedHtml}</pre>
    `;
  }

  function renderS3PreviewPanel(object, previewState) {
    if (!previewState) {
      return `<div class="placeholder">Object previews load on demand.<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-s3-action="load-preview" data-id="${escapeHtml(object.id)}">Load preview</button></div></div>`;
    }

    if (previewState.status === "loading") {
      return '<div class="placeholder">Loading object preview...</div>';
    }

    if (previewState.status === "error") {
      return `<div class="inlineError">Unable to load object preview: ${escapeHtml(previewState.error)}<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-s3-action="reload-preview" data-id="${escapeHtml(object.id)}">Retry</button></div></div>`;
    }

    const truncatedTag = previewState.truncated ? '<span class="tag bucketTag">Preview truncated</span>' : "";
    let previewContent = `<pre>No inline preview available for this object type.</pre>`;

    if (previewState.previewType === "image" && previewState.imageDataUrl) {
      previewContent = `<img class="s3PreviewImage" alt="${escapeHtml(object.key)}" src="${previewState.imageDataUrl}">`;
    } else if (previewState.previewType === "json") {
      previewContent = `<pre class="jsonSyntax">${highlightJsonText(prettyJsonOrText(previewState.previewText))}</pre>`;
    } else if (previewState.previewType === "text" || previewState.previewType === "html") {
      previewContent = `<pre>${escapeHtml(previewState.previewText || "No preview text available.")}</pre>`;
    }

    return `
      <div class="toolbar">
        <div class="tags">
          <span class="tag bucketTag">${escapeHtml(previewState.previewType)}</span>
          ${truncatedTag}
          ${previewState.contentType ? `<span class="tag bucketTag">${escapeHtml(previewState.contentType)}</span>` : ""}
        </div>
        <div class="actions">
          <button class="mini" type="button" data-s3-action="reload-preview" data-id="${escapeHtml(object.id)}">🔄 Reload</button>
          <a class="mini attachmentLink" href="/api/s3/download?bucket=${encodeURIComponent(object.bucket)}&key=${encodeURIComponent(object.key)}">⬇️ Download</a>
        </div>
      </div>
      ${previewContent}
    `;
  }

  function metaCard(label, value) {
    return `<div class="metaCard"><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`;
  }

  function syncCardExpansion() {
    const applyCardState = () => {
      el.list.querySelectorAll(".card").forEach((details) => {
        const id = details.dataset.id;
        const shouldOpen = Boolean(id && state.openIds.has(id));

        if (shouldOpen && !details.open) {
          details.open = true;
        }

        if (!shouldOpen && details.open) {
          details.open = false;
          return;
        }

        if (shouldOpen) {
          hydrate(details, getMessage(id));
        }
      });
    };

    applyCardState();
    window.requestAnimationFrame(applyCardState);
  }

  function syncSecretExpansion() {
    const applySecretState = () => {
      el.secretsList.querySelectorAll(".secretCard").forEach((details) => {
        const id = details.dataset.id;
        const shouldOpen = Boolean(id && secretsState.openIds.has(id));

        if (shouldOpen && !details.open) {
          details.open = true;
        }

        if (!shouldOpen && details.open) {
          details.open = false;
          return;
        }

        if (shouldOpen) {
          ensureSecretValue(id, { force: false });
        }
      });
    };

    applySecretState();
    window.requestAnimationFrame(applySecretState);
  }

  function syncS3Expansion() {
    const applyS3State = () => {
      el.s3List.querySelectorAll(".s3Card").forEach((details) => {
        const id = details.dataset.id;
        const shouldOpen = Boolean(id && s3State.openIds.has(id));

        if (shouldOpen && !details.open) {
          details.open = true;
        }

        if (!shouldOpen && details.open) {
          details.open = false;
          return;
        }

        if (shouldOpen) {
          ensureS3Preview(id, { force: false });
        }
      });
    };

    applyS3State();
    window.requestAnimationFrame(applyS3State);
  }

  function resolveAttachmentIcon(attachment) {
    const filename = String(attachment?.filename || "").toLowerCase();
    const contentType = String(attachment?.contentType || "").toLowerCase();

    if (filename.endsWith(".pdf") || contentType.includes("pdf")) {
      return "📄";
    }

    if (
      [".doc", ".docx", ".txt", ".rtf", ".md"].some((extension) => filename.endsWith(extension)) ||
      contentType.includes("word") ||
      contentType.startsWith("text/")
    ) {
      return "📝";
    }

    if (
      [".xls", ".xlsx", ".csv"].some((extension) => filename.endsWith(extension)) ||
      contentType.includes("sheet") ||
      contentType.includes("csv")
    ) {
      return "📊";
    }

    if (
      filename.endsWith(".json") ||
      filename.endsWith(".xml") ||
      filename.endsWith(".yaml") ||
      filename.endsWith(".yml")
    ) {
      return "🧾";
    }

    if (contentType.startsWith("image/")) {
      return "🖼️";
    }

    if (contentType.startsWith("audio/")) {
      return "🎵";
    }

    if (contentType.startsWith("video/")) {
      return "🎬";
    }

    if (
      [".zip", ".rar", ".7z", ".tar", ".gz"].some((extension) => filename.endsWith(extension)) ||
      contentType.includes("zip") ||
      contentType.includes("compressed")
    ) {
      return "🗜️";
    }

    return "📎";
  }

  function hydrate(details, message) {
    if (!details || !details.open || !message) {
      return;
    }

    const view = state.views[message.id] || (message.hasHtml ? "rendered" : "text");

    if (view !== "rendered" || !message.hasHtml) {
      return;
    }

    const iframe = details.querySelector("[data-frame]");

    if (iframe) {
      iframe.referrerPolicy = "no-referrer";
      iframe.sandbox = "";
      iframe.srcdoc = message.renderedHtml || "";
    }
  }

  function getMessage(id) {
    return state.messages.find((message) => message.id === id);
  }

  function getLogEvent(id) {
    return logsState.events.find((event) => event.id === id);
  }

  function getSecret(id) {
    return secretsState.items.find((secret) => secret.id === id);
  }

  function getS3Object(id) {
    return s3State.objects.find((object) => object.id === id);
  }

  async function loadRaw(id) {
    if (state.raw[id]?.status === "loaded") {
      return state.raw[id].value;
    }

    if (state.raw[id]?.status === "loading") {
      return null;
    }

    state.raw[id] = { status: "loading" };
    renderList();

    try {
      const response = await fetch(`/api/messages/${encodeURIComponent(id)}/raw`, { cache: "no-store" });

      if (!response.ok) {
        throw new Error((await response.text()) || `Request failed with ${response.status}`);
      }

      const value = await response.text();
      state.raw[id] = { status: "loaded", value };
      return value;
    } catch (error) {
      state.raw[id] = { status: "error", error: error.message || "Unknown raw load error" };
      setStatus("Could not load the raw message source.", "bad");
      return null;
    } finally {
      renderList();
    }
  }

  async function ensureSecretValue(id, options = {}) {
    const { force = false } = options;

    if (!id) {
      return null;
    }

    if (!force && secretsState.values[id]?.status === "loaded") {
      return secretsState.values[id];
    }

    if (secretsState.values[id]?.status === "loading") {
      return null;
    }

    secretsState.values[id] = { status: "loading" };
    renderSecretsAll();

    try {
      const response = await fetch(`/api/secrets/value?id=${encodeURIComponent(id)}`, { cache: "no-store" });

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      const secretString = typeof payload.secretString === "string" ? payload.secretString : "";
      const secretBinary = typeof payload.secretBinary === "string" ? payload.secretBinary : "";
      const parsedString = secretString ? tryParseJsonText(secretString) : { ok: false, value: null };
      const entry = {
        status: "loaded",
        label: secretBinary ? "Binary" : parsedString.ok ? "JSON" : secretString ? "Text" : "Empty",
        copyValue: secretBinary
          ? secretBinary
          : parsedString.ok
            ? JSON.stringify(parsedString.value, null, 2)
            : secretString || "No secret value.",
        displayHtml: secretBinary
          ? escapeHtml(secretBinary)
          : parsedString.ok
            ? highlightJsonText(JSON.stringify(parsedString.value, null, 2))
            : escapeHtml(secretString || "No secret value."),
        isJson: parsedString.ok,
        isBinary: Boolean(secretBinary),
        versionId: payload.versionId || "",
        versionStages: Array.isArray(payload.versionStages) ? payload.versionStages : [],
        createdDate: payload.createdDate || "",
        arn: payload.arn || "",
        name: payload.name || ""
      };

      secretsState.values[id] = entry;
      return entry;
    } catch (error) {
      secretsState.values[id] = {
        status: "error",
        error: error.message || "Unknown secret value error"
      };
      setSecretsStatus("Could not load the secret value.", "bad");
      return null;
    } finally {
      renderSecretsAll();
    }
  }

  async function ensureS3Preview(id, options = {}) {
    const { force = false } = options;

    if (!id) {
      return null;
    }

    if (!force && s3State.previews[id]?.status === "loaded") {
      return s3State.previews[id];
    }

    if (s3State.previews[id]?.status === "loading") {
      return null;
    }

    const object = getS3Object(id);

    if (!object) {
      return null;
    }

    s3State.previews[id] = { status: "loading" };
    renderS3All();

    try {
      const response = await fetch(
        `/api/s3/object?bucket=${encodeURIComponent(object.bucket)}&key=${encodeURIComponent(object.key)}`,
        { cache: "no-store" }
      );

      if (!response.ok) {
        const payload = await safeJson(response);
        throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
      }

      const payload = await response.json();
      const entry = {
        status: "loaded",
        previewType: payload.previewType || "binary",
        previewText: payload.previewText || "",
        imageDataUrl: payload.imageDataUrl || "",
        contentType: payload.contentType || "",
        contentLength: payload.contentLength || 0,
        truncated: Boolean(payload.truncated),
        metadata: payload.metadata || {}
      };

      s3State.previews[id] = entry;
      return entry;
    } catch (error) {
      s3State.previews[id] = {
        status: "error",
        error: error.message || "Unknown S3 preview error"
      };
      setS3Status("Could not load the S3 object preview.", "bad");
      return null;
    } finally {
      renderS3All();
    }
  }

  async function copyText(value) {
    try {
      await navigator.clipboard.writeText(value);
    } catch {
      const input = document.createElement("textarea");
      input.value = value;
      input.setAttribute("readonly", "");
      input.style.position = "fixed";
      input.style.opacity = "0";
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
    }
  }

  function setStatus(message, tone) {
    el.statusChip.className = "status";

    if (tone) {
      el.statusChip.classList.add(tone);
    }

    el.statusChip.textContent = message;
  }

  function setLogsStatus(message, tone) {
    el.logsStatusChip.className = "status";

    if (tone) {
      el.logsStatusChip.classList.add(tone);
    }

    el.logsStatusChip.textContent = message;
  }

  function setSecretsStatus(message, tone) {
    el.secretsStatusChip.className = "status";

    if (tone) {
      el.secretsStatusChip.classList.add(tone);
    }

    el.secretsStatusChip.textContent = message;
  }

  function setS3Status(message, tone) {
    el.s3StatusChip.className = "status";

    if (tone) {
      el.s3StatusChip.classList.add(tone);
    }

    el.s3StatusChip.textContent = message;
  }

  function getInitialPanel() {
    const storedPanel = readStoredValue(PANEL_STORAGE_KEY);
    return ["emails", "logs", "secrets", "s3"].includes(storedPanel) ? storedPanel : "emails";
  }

  function getInitialTheme() {
    const storedTheme = readStoredValue(THEME_STORAGE_KEY);

    if (storedTheme === "dark" || storedTheme === "light") {
      return storedTheme;
    }

    return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
  }

  function applyTheme(theme) {
    const nextTheme = theme === "dark" ? "dark" : "light";
    appState.theme = nextTheme;
    document.body.dataset.theme = nextTheme;

    try {
      window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
    } catch {}

    renderThemeToggle();
  }

  function renderThemeToggle() {
    if (!el.themeToggle) {
      return;
    }

    const isDark = appState.theme === "dark";
    el.themeToggle.textContent = isDark ? "🌙 Dark theme" : "☀️ Light theme";
    el.themeToggle.setAttribute("aria-pressed", isDark ? "true" : "false");
    el.themeToggle.setAttribute("aria-label", isDark ? "Switch to light theme" : "Switch to dark theme");
    el.themeToggle.title = isDark ? "Switch to light theme" : "Switch to dark theme";
  }

  function persistPanel() {
    writeStoredValue(PANEL_STORAGE_KEY, appState.panel);
  }

  function persistEmailPreferences() {
    writeStoredJson(EMAIL_PREFERENCES_STORAGE_KEY, {
      search: state.search,
      auto: state.auto,
      interval: state.interval
    });
  }

  function persistLogPreferences() {
    writeStoredJson(LOG_PREFERENCES_STORAGE_KEY, {
      group: logsState.group,
      stream: logsState.stream,
      search: logsState.search,
      auto: logsState.auto,
      interval: logsState.interval,
      windowMs: logsState.windowMs,
      limit: logsState.limit,
      wrapLines: logsState.wrapLines,
      tailNewest: logsState.tailNewest
    });
  }

  function persistSecretPreferences() {
    writeStoredJson(SECRET_PREFERENCES_STORAGE_KEY, {
      search: secretsState.search,
      auto: secretsState.auto,
      interval: secretsState.interval
    });
  }

  function persistS3Preferences() {
    writeStoredJson(S3_PREFERENCES_STORAGE_KEY, {
      bucket: s3State.bucket,
      prefix: s3State.prefix,
      search: s3State.search,
      auto: s3State.auto,
      interval: s3State.interval
    });
  }

  function resetSavedState() {
    [
      THEME_STORAGE_KEY,
      PANEL_STORAGE_KEY,
      EMAIL_PREFERENCES_STORAGE_KEY,
      LOG_PREFERENCES_STORAGE_KEY,
      SECRET_PREFERENCES_STORAGE_KEY,
      S3_PREFERENCES_STORAGE_KEY
    ].forEach((key) => {
      try {
        window.localStorage.removeItem(key);
      } catch {}
    });

    window.location.reload();
  }

  function getStoredPreferences(key) {
    try {
      const rawValue = window.localStorage.getItem(key);

      if (!rawValue) {
        return null;
      }

      const parsedValue = JSON.parse(rawValue);
      return parsedValue && typeof parsedValue === "object" && !Array.isArray(parsedValue) ? parsedValue : null;
    } catch {
      return null;
    }
  }

  function readStoredValue(key) {
    try {
      return window.localStorage.getItem(key);
    } catch {
      return null;
    }
  }

  function writeStoredValue(key, value) {
    try {
      window.localStorage.setItem(key, String(value));
    } catch {}
  }

  function writeStoredJson(key, value) {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch {}
  }

  function getStoredText(value, fallback = "") {
    return typeof value === "string" ? value : fallback;
  }

  function getStoredBoolean(value, fallback) {
    return typeof value === "boolean" ? value : fallback;
  }

  function getStoredNumber(value, allowedValues, fallback) {
    const normalizedValue = Number(value);
    return Number.isFinite(normalizedValue) && allowedValues.includes(normalizedValue) ? normalizedValue : fallback;
  }

  function scrollPaneToTop(element) {
    if (!element) {
      return;
    }

    element.scrollTo({ top: 0, behavior: "smooth" });
  }

  function updatePaneTopButtonVisibility(pane, button) {
    if (!pane || !button) {
      return;
    }

    button.classList.toggle("visible", pane.scrollTop > 140);
  }

  function formatDateTime(value) {
    if (!value) {
      return "Unknown time";
    }

    const date = new Date(value);
    return Number.isNaN(date.getTime())
      ? "Unknown time"
      : new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
  }

  function formatRelative(timestampMs) {
    const seconds = Math.max(1, Math.round((Date.now() - timestampMs) / 1000));

    if (seconds < 60) {
      return `${seconds}s ago`;
    }

    const minutes = Math.round(seconds / 60);

    if (minutes < 60) {
      return `${minutes}m ago`;
    }

    const hours = Math.round(minutes / 60);

    if (hours < 24) {
      return `${hours}h ago`;
    }

    return `${Math.round(hours / 24)}d ago`;
  }

  function formatBytes(value) {
    if (!value) {
      return "0 B";
    }

    const units = ["B", "KB", "MB", "GB"];
    let size = value;
    let index = 0;

    while (size >= 1024 && index < units.length - 1) {
      size /= 1024;
      index += 1;
    }

    return `${index === 0 ? size : size.toFixed(1)} ${units[index]}`;
  }

  function formatLogMessage(message) {
    const value = String(message || "").trim();

    if (!value) {
      return "No log payload.";
    }

    try {
      return JSON.stringify(JSON.parse(value), null, 2);
    } catch {
      return value;
    }
  }

  function buildSecretPreview(secret) {
    const fragments = [];

    if (secret.description) {
      fragments.push(secret.description);
    }

    if (secret.owningService) {
      fragments.push(`Service: ${secret.owningService}`);
    }

    if (secret.primaryRegion) {
      fragments.push(`Region: ${secret.primaryRegion}`);
    }

    if (secret.tagCount) {
      fragments.push(`${secret.tagCount} tag${secret.tagCount === 1 ? "" : "s"}`);
    }

    if (!fragments.length) {
      fragments.push("No description or tags yet.");
    }

    return fragments.join(" • ");
  }

  function toggleSecretReveal(id) {
    if (secretsState.revealedIds.has(id)) {
      secretsState.revealedIds.delete(id);
    } else {
      secretsState.revealedIds.add(id);
    }

    renderSecretsAll();
  }

  function maskSecretValue(value) {
    const source = String(value || "");

    if (!source) {
      return "Secret is loaded but empty.";
    }

    const lines = source.split("\n");
    return lines.map((line) => "•".repeat(Math.max(12, Math.min(line.length || 0, 48)))).join("\n");
  }

  function buildS3Preview(object) {
    const fragments = [];

    if (object.storageClass) {
      fragments.push(object.storageClass);
    }

    fragments.push(formatBytes(object.size));

    if (object.etag) {
      fragments.push(`ETag ${object.etag.slice(0, 12)}`);
    }

    return fragments.join(" • ");
  }

  function prettyJsonOrText(value) {
    const parsed = tryParseJsonText(value);
    return parsed.ok ? JSON.stringify(parsed.value, null, 2) : String(value || "");
  }

  function detectLogLevel(event) {
    const parsed = tryParseJsonText(event?.message);
    const candidates = parsed.ok
      ? [parsed.value?.level, parsed.value?.severity, parsed.value?.logLevel, parsed.value?.status, parsed.value?.lvl]
      : [String(event?.message || "").match(/\b(error|warn|warning|info|debug|trace|fatal)\b/i)?.[0] || ""];
    const normalized = String(candidates.find(Boolean) || "").toLowerCase();

    if (["fatal", "error", "critical"].includes(normalized)) {
      return { label: normalized.toUpperCase(), className: "levelError" };
    }

    if (["warn", "warning"].includes(normalized)) {
      return { label: "WARN", className: "levelWarn" };
    }

    if (["info", "notice"].includes(normalized)) {
      return { label: normalized.toUpperCase(), className: "levelInfo" };
    }

    if (["debug", "trace"].includes(normalized)) {
      return { label: normalized.toUpperCase(), className: "levelDebug" };
    }

    return null;
  }

  function renderLogPreviewContent(event) {
    const parsedLog = tryParseJsonText(event?.message);

    if (!parsedLog.ok) {
      return escapeHtml(event?.preview || "No preview available.");
    }

    const compactJson = JSON.stringify(parsedLog.value);
    const previewText = compactJson.length > 220 ? `${compactJson.slice(0, 217)}...` : compactJson;
    return highlightJsonText(previewText);
  }

  function renderLogBodyContent(message) {
    const parsedLog = tryParseJsonText(message);

    if (!parsedLog.ok) {
      return escapeHtml(formatLogMessage(message));
    }

    return highlightJsonText(JSON.stringify(parsedLog.value, null, 2));
  }

  function tryParseJsonText(message) {
    const value = String(message || "").trim();

    if (!value) {
      return { ok: false, value: null };
    }

    try {
      return { ok: true, value: JSON.parse(value) };
    } catch {
      return { ok: false, value: null };
    }
  }

  function highlightJsonText(value) {
    const source = String(value ?? "");
    const tokenRegex =
      /("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\btrue\b|\bfalse\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)/g;
    let html = "";
    let lastIndex = 0;

    for (const match of source.matchAll(tokenRegex)) {
      const [token] = match;
      const index = match.index ?? 0;
      let className = "jsonNumber";

      html += escapeHtml(source.slice(lastIndex, index));

      if (token.endsWith(":")) {
        className = "jsonKey";
      } else if (token === "true" || token === "false") {
        className = "jsonBoolean";
      } else if (token === "null") {
        className = "jsonNull";
      } else if (token.startsWith('"')) {
        className = "jsonString";
      }

      html += `<span class="${className}">${escapeHtml(token)}</span>`;
      lastIndex = index + token.length;
    }

    html += escapeHtml(source.slice(lastIndex));
    return html;
  }

  function escapeHtml(value) {
    return String(value ?? "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  async function safeJson(response) {
    try {
      return await response.json();
    } catch {
      return null;
    }
  }
}