From 34c9a3854cbbec9c98ae9be2ce4a08380f727cb6 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 15:51:55 -0400
Subject: [PATCH 01/10] feature/IO-3587-Commision-Cut - Improved local email /
 Test Plans

---
 .gitignore                                    |   3 -
 _reference/localEmailViewer/index.js          | 251 +++++--
 .../commission-based-cut-manual-test-plan.md  |   0
 .../testPlans/select-component-test-plan.md   | 647 ++++++++++++++++++
 4 files changed, 832 insertions(+), 69 deletions(-)
 rename _reference/{ => testPlans}/commission-based-cut-manual-test-plan.md (100%)
 create mode 100644 _reference/testPlans/select-component-test-plan.md

diff --git a/.gitignore b/.gitignore
index 4b0d51183..59c48f34d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -142,8 +142,6 @@ docker_data
 /CLAUDE.md
 /COPILOT.md
 /GEMINI.md
-/_reference/select-component-test-plan.md
-
 /.cursorrules
 /AGENTS.md
 /AI_CONTEXT.md
@@ -151,4 +149,3 @@ docker_data
 /COPILOT.md
 /.github/copilot-instructions.md
 /GEMINI.md
-/_reference/select-component-test-plan.md
diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 15b7736a9..7f35fa393 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -46,8 +46,7 @@ app.get("/api/messages", async (req, res) => {
 
 app.get("/api/messages/:id/raw", async (req, res) => {
   try {
-    const messages = await fetchSesMessages();
-    const message = messages.find((candidate) => resolveMessageId(candidate) === req.params.id);
+    const message = await findSesMessageById(req.params.id);
 
     if (!message) {
       res.status(404).type("text/plain").send("Message not found");
@@ -61,6 +60,42 @@ app.get("/api/messages/:id/raw", async (req, res) => {
   }
 });
 
+app.get("/api/messages/:id/attachments/:index", async (req, res) => {
+  try {
+    const attachmentIndex = Number.parseInt(req.params.index, 10);
+
+    if (!Number.isInteger(attachmentIndex) || attachmentIndex < 0) {
+      res.status(400).type("text/plain").send("Attachment index must be a non-negative integer");
+      return;
+    }
+
+    const parsed = await parseSesMessageById(req.params.id);
+
+    if (!parsed) {
+      res.status(404).type("text/plain").send("Message not found");
+      return;
+    }
+
+    const attachment = parsed.attachments?.[attachmentIndex];
+
+    if (!attachment) {
+      res.status(404).type("text/plain").send("Attachment not found");
+      return;
+    }
+
+    const filename = resolveAttachmentFilename(attachment, attachmentIndex);
+    const content = Buffer.isBuffer(attachment.content) ? attachment.content : Buffer.from(attachment.content || "");
+
+    res.setHeader("Content-Type", attachment.contentType || "application/octet-stream");
+    res.setHeader("Content-Disposition", buildAttachmentDisposition(filename));
+    res.setHeader("Content-Length", String(content.length));
+    res.send(content);
+  } catch (error) {
+    console.error("Error downloading attachment:", error);
+    res.status(502).type("text/plain").send(`Unable to download attachment: ${error.message}`);
+  }
+});
+
 async function loadMessages() {
   const startedAt = Date.now();
   const sesMessages = await fetchSesMessages();
@@ -98,6 +133,21 @@ async function fetchSesMessages() {
   return Array.isArray(data.messages) ? data.messages : [];
 }
 
+async function findSesMessageById(id) {
+  const messages = await fetchSesMessages();
+  return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
+}
+
+async function parseSesMessageById(id) {
+  const message = await findSesMessageById(id);
+
+  if (!message) {
+    return null;
+  }
+
+  return simpleParser(message.RawData || "");
+}
+
 async function toMessageViewModel(message, index) {
   const id = resolveMessageId(message, index);
 
@@ -120,8 +170,9 @@ async function toMessageViewModel(message, index) {
       messageId: parsed.messageId || "",
       rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
       attachmentCount: parsed.attachments.length,
-      attachments: parsed.attachments.map((attachment) => ({
-        filename: attachment.filename || "Unnamed attachment",
+      attachments: parsed.attachments.map((attachment, attachmentIndex) => ({
+        index: attachmentIndex,
+        filename: resolveAttachmentFilename(attachment, attachmentIndex),
         contentType: attachment.contentType || "application/octet-stream",
         size: attachment.size || 0
       })),
@@ -159,6 +210,45 @@ function resolveMessageId(message, index = 0) {
   return message.Id || `${message.Timestamp || "unknown"}-${message.Source || "unknown"}-${index}`;
 }
 
+function resolveAttachmentFilename(attachment, index = 0) {
+  if (attachment?.filename) {
+    return attachment.filename;
+  }
+
+  return `attachment-${index + 1}${attachmentExtension(attachment?.contentType)}`;
+}
+
+function attachmentExtension(contentType) {
+  const normalized = String(contentType || "")
+    .split(";")[0]
+    .trim()
+    .toLowerCase();
+
+  return (
+    {
+      "application/json": ".json",
+      "application/pdf": ".pdf",
+      "application/zip": ".zip",
+      "image/gif": ".gif",
+      "image/jpeg": ".jpg",
+      "image/png": ".png",
+      "image/webp": ".webp",
+      "text/calendar": ".ics",
+      "text/csv": ".csv",
+      "text/html": ".html",
+      "text/plain": ".txt"
+    }[normalized] || ""
+  );
+}
+
+function buildAttachmentDisposition(filename) {
+  const fallback = String(filename || "attachment")
+    .replace(/[^\x20-\x7e]/g, "_")
+    .replace(/["\\]/g, "_");
+
+  return `attachment; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "attachment")}`;
+}
+
 function normalizeTimestamp(value) {
   if (!value) {
     return "";
@@ -254,11 +344,11 @@ function renderHtml() {
         <div class="hero-copy">
           <p class="eyebrow">LocalStack SES</p>
           <h1>Email Viewer</h1>
-          <p class="lede">A faster local inbox for generated emails with live refresh, manual refresh, search, and raw MIME inspection.</p>
+          <p class="lede">Compact inbox for generated emails with live polling, search, and raw MIME inspection.</p>
         </div>
         <div class="hero-controls">
           <div class="row">
-            <button id="refreshButton" class="primary" type="button">Refresh now</button>
+            <button id="refreshButton" class="primary" type="button">Refresh</button>
             <label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
             <label class="chip">Every
               <select id="intervalSelect">
@@ -271,12 +361,12 @@ function renderHtml() {
             </label>
           </div>
           <div class="row">
-            <input id="searchInput" class="search" type="search" placeholder="Search subject, addresses, preview, attachment..." autocomplete="off">
+            <input id="searchInput" class="search" type="search" placeholder="Search subject, sender, preview..." autocomplete="off">
             <button id="clearSearchButton" class="ghost" type="button">Clear</button>
           </div>
           <div class="row">
-            <button id="expandAllButton" class="ghost" type="button">Expand all</button>
-            <button id="collapseAllButton" class="ghost" type="button">Collapse all</button>
+            <button id="expandAllButton" class="ghost" type="button">Open all</button>
+            <button id="collapseAllButton" class="ghost" type="button">Close all</button>
             <span id="statusChip" class="status">Waiting for first refresh...</span>
           </div>
         </div>
@@ -301,77 +391,80 @@ function renderHtml() {
 
 function renderStyles() {
   return `
-    :root{--panel:rgba(255,255,255,.86);--panel-strong:#fff;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--accent:#cf6d3c;--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 18px 48px rgba(35,43,53,.12);}
+    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);}
     *{box-sizing:border-box}
     html,body{margin:0;min-height:100%}
-    body{background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.14),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:16px/1.5 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif}
+    body{background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif}
     button,input,select,textarea{font:inherit}
     button{cursor:pointer}
-    .page{max-width:1440px;margin:0 auto;padding:24px}
-    .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:24px;margin-bottom:24px}
-    .hero-copy,.hero-controls,.stat,.card{background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow)}
-    .hero-copy,.hero-controls{border-radius:24px;padding:24px}
-    .eyebrow{margin:0 0 8px;color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
-    h1{margin:0;font-size:clamp(2.2rem,5vw,4rem);line-height:.95;letter-spacing:-.05em}
-    .lede{margin:16px 0 0;max-width:60ch;color:var(--muted)}
-    .hero-controls{display:grid;gap:12px}
-    .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
+    .page{max-width:1360px;margin:0 auto;padding:18px}
+    .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:14px;margin-bottom:14px}
+    .hero-copy,.hero-controls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
+    .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
+    .hero-copy,.hero-controls{border-radius:18px;padding:18px}
+    .eyebrow{margin:0 0 6px;color:var(--accent);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
+    h1{margin:0;font-size:clamp(1.9rem,4vw,3.1rem);line-height:.98;letter-spacing:-.05em}
+    .lede{margin:10px 0 0;max-width:54ch;color:var(--muted);font-size:.96rem}
+    .hero-controls{display:grid;gap:10px}
+    .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
     .primary,.ghost,.mini,.tab{border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
-    .primary,.ghost{min-height:44px;padding:0 18px;font-weight:700}
-    .mini,.tab{min-height:34px;padding:0 12px;font-weight:600}
+    .primary,.ghost{min-height:38px;padding:0 14px;font-weight:700}
+    .mini,.tab{min-height:30px;padding:0 10px;font-weight:600}
     .primary{background:var(--accent);color:#fff7f2}
     .ghost,.mini{background:rgba(255,255,255,.76);border-color:var(--line);color:var(--ink)}
     .tab{background:transparent;color:var(--muted)}
-    .tab.active{background:#fff;border-color:var(--line);color:var(--ink)}
+    .tab.active{background:#fff;border-color:rgba(207,109,60,.18);color:var(--ink)}
     .primary:hover,.ghost:hover,.mini:hover,.tab:hover{transform:translateY(-1px)}
-    .chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600}
+    .chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600;font-size:.92rem}
     .chip input{margin:0;accent-color:var(--accent)}
     .chip select{border:none;background:transparent;outline:none;color:var(--ink)}
-    .search{flex:1 1 320px;min-height:48px;padding:0 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
-    .status{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-weight:600}
+    .search{flex:1 1 260px;min-height:40px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
+    .status{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.9rem;font-weight:600}
     .status.ok{color:var(--ok);border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.08)}
     .status.warn{color:var(--warn);border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.08)}
     .status.bad{color:var(--bad);border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.08)}
-    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
-    .stat{border-radius:18px;padding:18px}
-    .stat span{display:block;margin-bottom:10px;color:var(--muted);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
-    .stat strong{display:block;font-size:clamp(2rem,4vw,2.6rem);line-height:1;letter-spacing:-.05em}
+    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
+    .stat{border-radius:16px;padding:14px}
+    .stat span{display:block;margin-bottom:8px;color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .stat strong{display:block;font-size:clamp(1.6rem,3vw,2rem);line-height:1;letter-spacing:-.05em}
     .stat strong.small{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
-    .stat small{display:block;margin-top:10px;color:var(--muted);font-size:.95rem}
-    .banner,.empty{margin:0 0 18px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
+    .stat small{display:block;margin-top:8px;color:var(--muted);font-size:.85rem}
+    .banner,.empty{margin:0 0 12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
     .banner{color:var(--bad);border-color:rgba(179,58,58,.24);background:rgba(179,58,58,.08)}
-    .list{display:grid;gap:18px}
-    .card{overflow:hidden;border-radius:18px}
-    .card.new{border-color:rgba(31,143,101,.28);box-shadow:var(--shadow),0 0 0 1px rgba(31,143,101,.12)}
-    .summary{list-style:none;display:grid;gap:12px;padding:20px;cursor:pointer}
+    .list{display:grid;gap:12px}
+    .card{overflow:hidden;border-radius:16px}
+    .card.new{border-color:rgba(31,143,101,.3);box-shadow:var(--card-shadow),0 0 0 1px rgba(31,143,101,.12)}
+    .summary{list-style:none;display:grid;gap:8px;padding:14px 16px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
     .summary::-webkit-details-marker{display:none}
-    .top,.tags,.toolbar,.actions,.attachments{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
+    .top,.tags,.toolbar,.actions,.attachments{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
     .top{justify-content:space-between}
     .head{min-width:0;flex:1 1 320px}
-    .head h2{margin:0;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.2;letter-spacing:-.03em;word-break:break-word}
-    .meta{margin:6px 0 0;color:var(--muted);font-size:.95rem;word-break:break-word}
-    .time,.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font-size:.84rem;font-weight:700}
+    .head h2{margin:0;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.18;letter-spacing:-.03em;word-break:break-word}
+    .meta{margin:4px 0 0;color:var(--muted);font-size:.88rem;word-break:break-word}
+    .time,.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:.76rem;font-weight:700}
     .time{background:rgba(31,41,51,.06)}
-    .tag{background:rgba(31,41,51,.06);color:var(--muted)}
+    .tag{background:var(--accent-soft);color:#8d5632}
     .tag.new{background:rgba(31,143,101,.1);color:var(--ok)}
     .tag.bad{background:rgba(179,58,58,.1);color:var(--bad)}
-    .preview{margin:0}
-    .body{display:grid;gap:16px;padding:18px 20px 20px;border-top:1px solid var(--line);background:var(--panel-strong)}
-    .toolbar{justify-content:space-between;align-items:flex-start}
-    .tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:rgba(31,41,51,.05)}
-    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
-    .metaCard{padding:14px 16px;border-radius:14px;background:rgba(31,41,51,.035);border:1px solid rgba(31,41,51,.08)}
-    .metaCard dt{margin:0 0 6px;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .preview{margin:0;color:#324150;font-size:.94rem}
+    .body{display:grid;gap:12px;padding:12px 16px 16px;border-top:1px solid rgba(207,109,60,.14);background:var(--card-body)}
+    .toolbar{justify-content:space-between;align-items:center}
+    .tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(207,109,60,.08)}
+    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
+    .metaCard{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(207,109,60,.12)}
+    .metaCard dt{margin:0 0 4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
     .metaCard dd{margin:0;word-break:break-word}
-    .attachments{gap:8px}
-    .attachment{padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid var(--line);font-size:.92rem}
-    .panel{overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#fff}
-    iframe{width:100%;min-height:720px;border:none;background:#fff}
-    pre{margin:0;padding:16px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:13px/1.55 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
-    .placeholder,.inlineError{padding:16px}
+    .attachments{gap:6px}
+    .attachment{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,248,240,.96);border:1px solid rgba(207,109,60,.12);font-size:.84rem}
+    .attachmentLink{color:#8d5632;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
+    .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
+    iframe{width:100%;min-height:560px;border:none;background:#fff}
+    pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
+    .placeholder,.inlineError{padding:12px}
     .inlineError{color:var(--bad)}
     @media (max-width:1080px){.hero{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
-    @media (max-width:720px){.page{padding:16px}.stats{grid-template-columns:1fr}.primary,.ghost,.chip{width:100%;justify-content:center}.toolbar,.row{align-items:stretch}iframe{min-height:560px}}
+    @media (max-width:720px){.page{padding:12px}.stats{grid-template-columns:1fr}.primary,.ghost,.chip{width:100%;justify-content:center}.toolbar,.row{align-items:stretch}iframe{min-height:420px}}
   `;
 }
 
@@ -402,7 +495,8 @@ function clientApp(config) {
     knownIds: new Set(),
     openIds: new Set(),
     views: {},
-    raw: {}
+    raw: {},
+    listSignature: ""
   };
 
   const el = {
@@ -531,6 +625,8 @@ function clientApp(config) {
       return;
     }
 
+    let shouldRenderList = false;
+
     state.loading = true;
     state.source = source;
     state.error = "";
@@ -548,19 +644,23 @@ function clientApp(config) {
       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);
 
-      state.newIds = state.updatedAt
-        ? new Set(messages.filter((message) => !state.knownIds.has(message.id)).map((message) => message.id))
-        : new Set();
+      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();
+      applyFilter(shouldRenderList);
       setStatus(`Updated ${messages.length} message${messages.length === 1 ? "" : "s"}.`, "ok");
     } catch (error) {
       state.error = error.message || "Unknown refresh error";
@@ -568,7 +668,7 @@ function clientApp(config) {
     } finally {
       state.loading = false;
       scheduleRefresh();
-      renderAll();
+      renderAll({ renderList: shouldRenderList });
     }
   }
 
@@ -590,12 +690,28 @@ function clientApp(config) {
     });
   }
 
-  function applyFilter() {
+  function applyFilter(shouldRenderList = true) {
     const search = state.search.trim().toLowerCase();
     state.filtered = !search
       ? [...state.messages]
       : state.messages.filter((message) => haystack(message).includes(search));
-    renderAll();
+    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 haystack(message) {
@@ -624,11 +740,14 @@ function clientApp(config) {
     state.timer = window.setTimeout(() => refreshMessages("auto"), state.interval);
   }
 
-  function renderAll() {
+  function renderAll(options = {}) {
+    const { renderList: shouldRenderList = true } = options;
     renderStats();
     renderFetch();
     renderStatus();
-    renderList();
+    if (shouldRenderList) {
+      renderList();
+    }
     renderLiveClock();
   }
 
@@ -814,7 +933,7 @@ function clientApp(config) {
               ? `<div class="attachments">${message.attachments
                   .map((attachment) => {
                     const size = attachment.size ? `, ${formatBytes(attachment.size)}` : "";
-                    return `<span class="attachment">${escapeHtml(attachment.filename)} (${escapeHtml(attachment.contentType)}${escapeHtml(size)})</span>`;
+                    return `<a class="attachment attachmentLink" href="/api/messages/${encodeURIComponent(message.id)}/attachments/${attachment.index}" download="${escapeHtml(attachment.filename)}" title="Download ${escapeHtml(attachment.filename)}">${escapeHtml(attachment.filename)} (${escapeHtml(attachment.contentType)}${escapeHtml(size)})</a>`;
                   })
                   .join("")}</div>`
               : ""
diff --git a/_reference/commission-based-cut-manual-test-plan.md b/_reference/testPlans/commission-based-cut-manual-test-plan.md
similarity index 100%
rename from _reference/commission-based-cut-manual-test-plan.md
rename to _reference/testPlans/commission-based-cut-manual-test-plan.md
diff --git a/_reference/testPlans/select-component-test-plan.md b/_reference/testPlans/select-component-test-plan.md
new file mode 100644
index 000000000..ae5eff2c2
--- /dev/null
+++ b/_reference/testPlans/select-component-test-plan.md
@@ -0,0 +1,647 @@
+# Ant Design Select.Option Deprecation - Manual Testing Plan
+**Branch:** `feature/IO-3544-Ant-Select-Deprecation`  
+**Base Branch:** `master-AIO`  
+**Jira:** IO-3544
+
+## Overview
+This branch migrates all Ant Design `<Select.Option>` components to the new `options` prop pattern (required for Ant Design v5+). The deprecated `Select.Option` child component pattern has been replaced with the `options` array prop.
+
+## What Changed
+- **Old Pattern:** `<Select><Select.Option value="x">Label</Select.Option></Select>`
+- **New Pattern:** `<Select options={[{ value: "x", label: "Label" }]} />`
+- Search filtering updated from `optionFilterProp: "children"` to `optionFilterProp: "label"` or custom props
+- Custom filter functions updated to use `option.label` instead of `option.props.children`
+- Complex components with custom rendered content (tags, icons, styled elements) now use `label` prop with JSX
+
+## Code Review Findings ✅
+**Validation completed on representative samples:**
+- ✅ Search functionality properly migrated (showSearch object syntax correct)
+- ✅ Custom rendered content (tags, badges, icons) preserved in label prop
+- ✅ Labor type selectors correctly implement all 14 types
+- ✅ Vendor search with favorites and discount tags working correctly
+- ✅ Employee selectors with flat_rate/straight_time tags properly structured
+- ✅ Job search with owner display and status tags correctly migrated
+- ✅ CiecaSelect utility updated to return options array format
+- ✅ Performance optimizations added (useMemo in jobs-convert-button)
+- ✅ Custom optionFilterProp values used where needed (e.g., "name", "search")
+
+## Testing Strategy
+For each select component below, verify:
+1. ✅ **Options Display:** All options appear correctly
+2. ✅ **Selection:** Can select an option and value is saved
+3. ✅ **Search/Filter:** Search functionality works (if applicable)
+4. ✅ **Visual Rendering:** Labels, tags, and custom content display properly (especially vendor discounts, employee tags, job status badges)
+5. ✅ **Form Integration:** Value persists and submits correctly
+6. ✅ **Custom Search Props:** Components using custom optionFilterProp (name, search) work correctly
+
+---
+
+## Component Test Cases
+
+### 1. Employee Assignment & Allocation
+**Files Modified:**
+- `allocations-assignment.component.jsx`
+- `allocations-bulk-assignment.component.jsx`
+- `labor-allocations-adjustment-edit.component.jsx`
+- `employee-search-select.component.jsx`
+- `employee-search-select-email.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Job Line Allocation:** Assign employee to job line
+  - Navigate to a job → Job Lines tab
+  - Click allocate hours to an employee
+  - Verify employee dropdown shows full names
+  - Search for employee by name
+  - Verify selection saves
+
+- [ ] **Bulk Assignment:** Assign multiple job lines to employee
+  - Select multiple job lines
+  - Open bulk assignment modal
+  - Verify employee selector works
+  - Verify employee number, name, and tags (flat rate/straight time) display
+
+- [ ] **Labor Allocations Adjustment:** Edit labor allocations
+  - Navigate to labor allocations
+  - Edit adjustment form
+  - Verify employee dropdowns work with search
+
+- [ ] **Employee Search Select with Email:** 
+  - Test in any form using employee email selector (uses custom `optionFilterProp: "search"`)
+  - Search by employee number, first name, or last name
+  - Verify employee number, name display correctly
+  - **Critical:** Verify green tag shows "Flat Rate" or "Straight Time"
+  - Verify blue email tag displays when showEmail=true
+  - Test that search matches against concatenated string
+
+---
+
+### 2. Job Management
+**Files Modified:**
+- `job-search-select.component.jsx`
+- `jobs-create-jobs-info.component.jsx`
+- `jobs-detail-general.component.jsx`
+- `jobs-detail-header-actions.component.jsx`
+- `jobs-convert-button.component.jsx`
+- `jobs-close-lines.component.jsx`
+- `job-3rd-party-modal.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Job Search Select:** Search and select jobs
+  - Any form with job selector (e.g., linking jobs, referencing jobs)
+  - Search by RO number, customer name, or vehicle (uses `filterOption: false` with custom search)
+  - **Critical:** Verify job label shows: `[CLM_NO |] RO_NUMBER | Owner Name | Year Make Model`
+  - **Critical:** Verify status tag displays (e.g., "OPEN", "CLOSED")
+  - Verify loading spinner appears during search
+  - Test with claim numbers visible (clm_no prop)
+  - Verify selection works
+
+- [ ] **Create Job Form:**
+  - Navigate to Create New Job
+  - Test all dropdowns in job info section:
+    - Job type selection
+    - Status selection
+    - Department/class selection
+    - Estimator selection
+    - File handler selection
+  - Verify options display and selection works
+
+- [ ] **Job Detail General Tab:**
+  - Open any job → General tab
+  - Test select dropdowns:
+    - Status select
+    - Department/class select
+    - Estimator select
+    - File handler select
+    - Responsibility center select
+  - Verify all dropdowns work with search
+
+- [ ] **Job Convert Button:**
+  - Open estimate job
+  - Click convert to RO
+  - Verify conversion type dropdown works
+  - Test all options in conversion modal
+
+- [ ] **Close Job Lines:**
+  - Open converted job
+  - Go to close/finalize
+  - Test location selector in close lines modal
+  - Verify cost center dropdowns
+
+- [ ] **Third Party Modal:**
+  - Open job → Third party integration
+  - Test company/payer selector
+  - Verify dropdown options and selection
+
+---
+
+### 3. Job Lines & Labor
+**Files Modified:**
+- `job-lines-upsert-modal.component.jsx`
+- `job-line-bulk-assign.component.jsx`
+- `job-line-convert-to-labor.component.jsx`
+- `job-line-dispatch-button.component.jsx`
+- `job-line-status-popup.component.jsx`
+- `job-line-team-assignment.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Add/Edit Job Line:**
+  - Open job → Add new line
+  - Test all dropdowns:
+    - **Labor type selector** (LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1-LA4)
+    - Location selector
+    - Status selector
+    - Skill/category selector
+  - Verify 14 labor type options display correctly
+  - Test search functionality
+
+- [ ] **Bulk Line Assignment:**
+  - Select multiple job lines
+  - Open bulk assign
+  - Test team assignment dropdown
+
+- [ ] **Convert to Labor:**
+  - Select part line
+  - Convert to labor
+  - Test labor type dropdown (LAA, LAB, etc.)
+  - Verify all 14 types available
+
+- [ ] **Line Dispatch:**
+  - Open dispatch modal for job line
+  - Test team/employee selector
+
+- [ ] **Line Status Popup:**
+  - Change job line status
+  - Verify status dropdown options
+
+- [ ] **Team Assignment:**
+  - Assign team to job line
+  - Test team selector dropdown
+
+---
+
+### 4. Owners & Vehicles
+**Files Modified:**
+- `owner-search-select.component.jsx`
+- `vehicle-search-select.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Owner Search Select:**
+  - Any form with owner selector
+  - Search by owner name
+  - Verify owner options display
+  - Test selection and search
+
+- [ ] **Vehicle Search Select:**
+  - Any form with vehicle selector
+  - Search by VIN, license plate, or vehicle description
+  - Verify vehicle options display correctly
+  - Test selection works
+
+---
+
+### 5. Vendors & Parts
+**Files Modified:**
+- `vendor-search-select.component.jsx`
+- `parts-order-modal.component.jsx`
+- `parts-receive-modal.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Vendor Search Select:**
+  - Navigate to bills or parts ordering
+  - Test vendor selector
+  - Search for vendor by name (uses custom `optionFilterProp: "name"`)
+  - **Critical:** Verify favorites (with heart icon) display at top
+  - **Critical:** Verify discount tags show correctly (e.g., "10%")
+  - **Critical:** Verify vendor tags display
+  - Verify phone numbers display if showPhone enabled
+  - Test selection saves discount value to form
+
+- [ ] **Parts Order Modal:**
+  - Order parts for a job
+  - Test all dropdowns in order form:
+    - Vendor selector
+    - Status selector
+    - Priority selector
+  - Verify options and selection
+
+- [ ] **Parts Receive Modal:**
+  - Receive parts
+  - Test selectors in receive form
+  - Verify dropdown functionality
+
+---
+
+### 6. Bills & Payments
+**Files Modified:**
+- `bill-form.component.jsx`
+- `bill-form-lines.component.jsx`
+- `bill-form-lines-extended.formitem.component.jsx`
+- `payment-form.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Bill Entry Form:**
+  - Navigate to Bills → Add New Bill
+  - Test all dropdowns:
+    - Vendor selector
+    - Payment terms selector
+    - GL account selector
+    - Tax code selector
+  - Verify options display
+
+- [ ] **Bill Lines:**
+  - Add bill line
+  - Test line-level selectors:
+    - Job selector
+    - Job line selector
+    - Account selector
+    - Location selector
+
+- [ ] **Bill Lines Extended:**
+  - Add extended bill line
+  - Test responsibility center dropdown
+  - Test cost center dropdown
+
+- [ ] **Payment Form:**
+  - Navigate to Payments → New Payment
+  - Test all dropdowns:
+    - Vendor selector
+    - Payment method selector
+    - Bank account selector
+  - Verify selection works
+
+---
+
+### 7. Shop Configuration
+**Files Modified:**
+- `shop-info.general.component.jsx`
+- `shop-info.intake.component.jsx`
+- `shop-info.responsibilitycenters.component.jsx`
+- `shop-info.rostatus.component.jsx`
+- `shop-info.speedprint.component.jsx`
+- `shop-intellipay-config.component.jsx`
+- `shop-employees-form.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Shop Info - General:**
+  - Navigate to Shop Settings → General
+  - Test all dropdowns:
+    - Timezone selector
+    - Currency selector
+    - Date format selector
+    - Default options
+
+- [ ] **Shop Info - Intake:**
+  - Navigate to Shop Settings → Intake
+  - Test intake form selectors
+  - Verify default options work
+
+- [ ] **Shop Info - Responsibility Centers:**
+  - Navigate to Shop Settings → Responsibility Centers
+  - Test cost center dropdowns
+  - Test location selectors
+  - **Note:** This file had major changes (980 lines modified)
+
+- [ ] **Shop Info - RO Status:**
+  - Navigate to Shop Settings → RO Status
+  - Test status configuration dropdowns
+  - **Note:** 120 lines modified
+
+- [ ] **Shop Info - Speed Print:**
+  - Navigate to Shop Settings → Speed Print
+  - Test printer selector
+  - Test template selector
+
+- [ ] **IntelliPay Config:**
+  - Navigate to Shop Settings → IntelliPay
+  - Test configuration dropdowns (56 lines modified)
+
+- [ ] **Shop Employees Form:**
+  - Navigate to Shop Settings → Employees → Add/Edit
+  - Test all dropdowns:
+    - Role selector
+    - Department selector
+    - Pay type selector
+  - Verify options display
+
+---
+
+### 8. Schedule & Time Tracking
+**Files Modified:**
+- `schedule-job-modal.component.jsx`
+- `schedule-manual-event.component.jsx`
+- `tech-job-clock-in-form.component.jsx`
+- `tech-job-clock-out-button.component.jsx`
+- `time-ticket-modal.component.jsx`
+- `time-ticket-shift-form.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Schedule Job Modal:**
+  - Navigate to Schedule → Add Appointment
+  - Test all dropdowns:
+    - Job selector
+    - Employee selector
+    - Time slot selector
+    - Duration selector
+
+- [ ] **Schedule Manual Event:**
+  - Add manual event to schedule
+  - Test event type dropdown
+  - Test employee selector
+
+- [ ] **Tech Clock In Form:**
+  - Navigate to Tech Portal
+  - Clock in to job
+  - Test job selector
+  - Test operation selector
+
+- [ ] **Tech Clock Out:**
+  - Clock out from job
+  - Test reason selector (if applicable)
+  - Verify dropdown works
+
+- [ ] **Time Ticket Modal:**
+  - Enter/edit time ticket
+  - Test all dropdowns:
+    - Employee selector
+    - Job selector
+    - Operation selector
+
+- [ ] **Time Ticket Shift Form:**
+  - Manage shift
+  - Test shift type selector
+  - Test employee selector
+
+---
+
+### 9. Contracts & Courtesy Cars
+**Files Modified:**
+- `contract-convert-to-ro.component.jsx`
+- `contract-status-select.component.jsx`
+- `courtesy-car-readiness-select.component.jsx`
+- `courtesy-car-status-select.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Contract Convert to RO:**
+  - Open contract
+  - Convert to RO
+  - Test conversion options dropdown
+
+- [ ] **Contract Status Select:**
+  - Change contract status
+  - Test status options:
+    - New
+    - Out
+    - Returned
+  - Verify all 3 status options work
+
+- [ ] **Courtesy Car Readiness:**
+  - Navigate to Courtesy Cars
+  - Change car readiness
+  - Test readiness options:
+    - Ready
+    - Not Ready
+  - Verify both options work
+
+- [ ] **Courtesy Car Status:**
+  - Change courtesy car status
+  - Test all status options:
+    - In
+    - In Service
+    - Out
+    - Sold
+    - Lease Return
+    - Unavailable
+  - Verify all 6 status options work
+
+---
+
+### 10. Email & Communication
+**Files Modified:**
+- `email-overlay.component.jsx`
+- `chat-tag-ro.component.jsx`
+- `parts-shop-info-email-presets.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Email Overlay:**
+  - Send email from any feature
+  - Test all dropdowns:
+    - From email selector (current user, shop email, custom emails)
+    - Template selector
+    - Priority selector
+  - Verify custom from emails display correctly
+
+- [ ] **Chat Tag RO:**
+  - Open chat
+  - Tag to RO
+  - Test RO selector dropdown
+
+- [ ] **Parts Shop Email Presets:**
+  - Navigate to Parts Settings → Email Presets
+  - Test preset selector
+  - Verify options display
+
+---
+
+### 11. DMS Integration
+**Files Modified:**
+- `dms-post-form/cdklike-dms-post-form.jsx`
+- `dms/dms.container.jsx`
+- `dms-payables/dms-payables.container.jsx`
+
+**Test Scenarios:**
+- [ ] **DMS Post Form:**
+  - Navigate to DMS posting
+  - Test all dropdowns in post form:
+    - Account selector
+    - Department selector
+    - GL code selector
+
+- [ ] **DMS Container:**
+  - Navigate to DMS section
+  - Test filter dropdowns
+  - Verify selection works
+
+- [ ] **DMS Payables:**
+  - Navigate to DMS Payables
+  - Test payables filter selectors
+
+---
+
+### 12. Production & Admin
+**Files Modified:**
+- `production-list-config-manager.component.jsx`
+- `jobs-admin-class.component.jsx`
+- `jobs-close/jobs-close.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Production List Config:**
+  - Navigate to Production Board → Configure
+  - Test column configuration dropdown
+  - Verify display settings work
+
+- [ ] **Jobs Admin Class:**
+  - Navigate to Admin → Jobs
+  - Change job class/department
+  - Test class selector dropdown
+
+- [ ] **Jobs Close Page:**
+  - Navigate to Jobs → Close/Export
+  - Test filter dropdowns:
+    - Status filter
+    - Date range
+    - Department filter
+  - Verify selections work
+
+---
+
+### 13. Miscellaneous Components
+**Files Modified:**
+- `Ciecaselect.jsx` (utility component - 75 lines modified)
+
+**Test Scenarios:**
+- [ ] **CIECA Select Utility:**
+  - Used in bill-form-lines-extended for labor type adjustments
+  - Returns options array with 14 labor types (LAA-LAU, LA1-LA4)
+  - Returns 10 part types (PAA, PAC, PAL, PAG, PAM, PAP, PAN, PAO, PAR, PAS) when parts=true
+  - Verify function returns properly formatted options array
+  - Test in any form using DMS integration with CIECA codes
+
+---
+
+## Cross-Component Testing
+
+### Search Functionality
+Test search across all searchable selects:
+- [ ] Employee search (by name, employee number)
+- [ ] Job search (by RO number, customer name, vehicle)
+- [ ] Vendor search (by name)
+- [ ] Vehicle search (by VIN, plate, make/model)
+- [ ] Owner search (by name)
+
+### Multi-Select Components
+If any components use `mode="multiple"`:
+- [ ] Verify multi-select works
+- [ ] Verify tags display correctly
+- [ ] Verify removal of selections works
+
+### Disabled State
+- [ ] Test dropdowns in disabled state
+- [ ] Verify disabled styling matches original
+
+### Form Validation
+- [ ] Test required field validation on selects
+- [ ] Verify error messages display correctly
+- [ ] Test form submission with select values
+
+---
+
+## Regression Testing Priority
+
+### High Priority (Critical User Flows)
+1. ✅ Create new job with all required fields
+2. ✅ Add job lines with labor types
+3. ✅ Assign employees to job lines
+4. ✅ Order parts with vendor selection
+5. ✅ Enter bills with vendor and account selection
+6. ✅ Close and export jobs
+
+### Medium Priority
+7. Convert estimate to RO
+8. Schedule appointments
+9. Clock in/out (tech portal)
+10. Update shop configuration
+11. Manage courtesy cars
+
+### Low Priority (Admin Functions)
+12. DMS integration posting
+13. Production board configuration
+14. Admin job modifications
+
+---
+
+## Browser Testing
+Test in:
+- [ ] Chrome (latest)
+- [ ] Firefox (latest)
+- [ ] Safari (if applicable)
+- [ ] Edge (latest)
+
+---
+
+## Known Changed Components Summary
+**Total Files Modified:** 54 client files + 1 server file
+
+**Labor Type Selectors (14 options):**
+- LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1, LA2, LA3, LA4
+- Found in: job-lines-upsert-modal, job-line-convert-to-labor, bill-form-lines
+
+**Most Complex Changes:**
+- `shop-info.responsibilitycenters.component.jsx` (980 lines changed)
+- `vendor-search-select.component.jsx` (120 lines changed)
+- `shop-info.rostatus.component.jsx` (120 lines changed)
+- `jobs-convert-button.component.jsx` (198 lines changed)
+- `Ciecaselect.jsx` (75 lines changed)
+
+---
+
+## Internal Code Review Results ✅
+
+**Files Validated (Sample):**
+1. ✅ `allocations-assignment.component.jsx` - Simple employee selector with search
+2. ✅ `contract-status-select.component.jsx` - Static 3-option select
+3. ✅ `courtesy-car-status-select.component.jsx` - Static 6-option select  
+4. ✅ `job-lines-upsert-modal.component.jsx` - 14 labor type options inline
+5. ✅ `email-overlay.component.jsx` - From email with custom emails array
+6. ✅ `employee-search-select-email.component.jsx` - Complex with tags and custom search prop
+7. ✅ `bill-form-lines-extended.formitem.component.jsx` - CiecaSelect utility usage
+8. ✅ `vendor-search-select.component.jsx` - Complex with favorites, tags, discount, phone
+9. ✅ `job-search-select.component.jsx` - Complex with owner display, status tags, loading states
+10. ✅ `Ciecaselect.jsx` - Utility function returning options array
+
+**Validation Checklist:**
+- [x] All `Select.Option` patterns removed
+- [x] Replaced with `options` array prop
+- [x] `showSearch` uses object syntax `{{ optionFilterProp: "label" }}`
+- [x] Custom `optionFilterProp` used where needed ("name", "search", etc.)
+- [x] Complex rendered content preserved in `label` prop with JSX
+- [x] Tags, icons, badges, and styled elements working correctly
+- [x] Search functionality using correct property references
+- [x] Labor types: All 14 types present (LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1, LA2, LA3, LA4)
+- [x] Part types: All 10 types in CiecaSelect (PAA, PAC, PAL, PAG, PAM, PAP, PAN, PAO, PAR, PAS)
+- [x] Custom filterOption functions updated (option.label vs option.props.children)
+- [x] Performance optimizations added (useMemo for large option lists)
+- [x] labelRender custom rendering preserved where used
+- [x] optionLabelProp used correctly for display vs value
+
+**Known Complex Patterns Verified:**
+1. **Vendor Select:** Favorites with heart icon, discount tags, phone display, custom search by "name"
+2. **Employee Select:** Flat rate/straight time tags, custom search by "search" prop (employee number + name)
+3. **Job Select:** Owner display function, status tags, loading states, conditional claim number display
+4. **Email Overlay:** Multiple from addresses (user email, shop email, custom md_from_emails array)
+5. **Bill Lines Extended:** Conditional DMS vs responsibility centers, CiecaSelect utility
+
+**No Issues Found** - All migrations follow the correct pattern.
+
+---
+
+## Testing Notes
+- Focus on components with search functionality - filtering logic changed from `children` to `label`
+- Pay attention to components with custom rendered content (tags, badges, formatted text)
+- Verify `optionFilterProp` works correctly for custom search fields
+- Test components that map over arrays to generate options
+- Check components with conditional option rendering
+
+---
+
+## Sign-Off
+- [ ] All high priority tests passed
+- [ ] All medium priority tests passed
+- [ ] All low priority tests passed
+- [ ] No console errors observed
+- [ ] Visual appearance matches original
+- [ ] Performance is acceptable (no lag in large dropdowns)
+
+**Tested By:** _________________  
+**Date:** _________________  
+**Environment:** _________________  
+**Notes:** _________________

From 281fe028201a1f8e5d8f3765edb1bc4760e1bef3 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 16:18:22 -0400
Subject: [PATCH 02/10] feature/IO-3587-Commision-Cut - Improved localstack
 client

---
 _reference/localEmailViewer/README.md         |   23 +-
 _reference/localEmailViewer/index.js          |  981 +++++++++++-
 _reference/localEmailViewer/package-lock.json | 1348 +++++++++++++++++
 _reference/localEmailViewer/package.json      |    3 +-
 4 files changed, 2313 insertions(+), 42 deletions(-)

diff --git a/_reference/localEmailViewer/README.md b/_reference/localEmailViewer/README.md
index 6054686fd..238c2bf22 100644
--- a/_reference/localEmailViewer/README.md
+++ b/_reference/localEmailViewer/README.md
@@ -1,5 +1,7 @@
-This app connects to your Docker LocalStack SES endpoint and gives you a local inbox-style viewer
-for generated emails.
+This app connects to your Docker LocalStack endpoints and gives you a compact inspector for:
+
+- SES generated emails
+- CloudWatch log groups, streams, and recent events
 
 ```shell
 npm start
@@ -15,13 +17,11 @@ Open: http://localhost:3334
 
 Features:
 
-- Manual refresh
-- Live refresh with adjustable polling interval
-- Search across subject, addresses, preview text, and attachment names
-- Expand/collapse all messages
-- Rendered HTML, plain-text, and raw MIME views
-- Copy raw MIME source
-- New-message highlighting plus fetch timing and parse-error stats
+- SES email workspace with manual refresh, live refresh, search, HTML/text/raw views,
+  attachment downloads, and new-message highlighting
+- CloudWatch Logs workspace with log group selection, stream filtering, adjustable time window,
+  adjustable event limit, live refresh, and in-browser log search
+- Compact single-page UI for switching between the local stack tools you use most
 
 Optional environment variables:
 
@@ -30,4 +30,9 @@ PORT=3334
 SES_VIEWER_ENDPOINT=http://localhost:4566/_aws/ses
 SES_VIEWER_REFRESH_MS=10000
 SES_VIEWER_FETCH_TIMEOUT_MS=5000
+CLOUDWATCH_VIEWER_ENDPOINT=http://localhost:4566
+CLOUDWATCH_VIEWER_REGION=ca-central-1
+CLOUDWATCH_VIEWER_LOG_GROUP=development
+CLOUDWATCH_VIEWER_WINDOW_MS=900000
+CLOUDWATCH_VIEWER_LIMIT=200
 ```
diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 7f35fa393..4d935135a 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -1,5 +1,11 @@
 import express from "express";
 import fetch from "node-fetch";
+import {
+  CloudWatchLogsClient,
+  DescribeLogGroupsCommand,
+  DescribeLogStreamsCommand,
+  FilterLogEventsCommand
+} from "@aws-sdk/client-cloudwatch-logs";
 import { simpleParser } from "mailparser";
 
 const app = express();
@@ -8,6 +14,20 @@ const PORT = Number(process.env.PORT || 3334);
 const SES_ENDPOINT = process.env.SES_VIEWER_ENDPOINT || "http://localhost:4566/_aws/ses";
 const FETCH_TIMEOUT_MS = Number(process.env.SES_VIEWER_FETCH_TIMEOUT_MS || 5000);
 const DEFAULT_REFRESH_MS = Number(process.env.SES_VIEWER_REFRESH_MS || 10000);
+const CLOUDWATCH_ENDPOINT = process.env.CLOUDWATCH_VIEWER_ENDPOINT || "http://localhost:4566";
+const CLOUDWATCH_REGION = process.env.CLOUDWATCH_VIEWER_REGION || process.env.AWS_DEFAULT_REGION || "ca-central-1";
+const CLOUDWATCH_DEFAULT_GROUP = process.env.CLOUDWATCH_VIEWER_LOG_GROUP || "development";
+const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW_MS || 15 * 60 * 1000);
+const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
+const LOCALSTACK_CREDENTIALS = {
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
+};
+const cloudWatchLogsClient = new CloudWatchLogsClient({
+  region: CLOUDWATCH_REGION,
+  endpoint: CLOUDWATCH_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS
+});
 
 app.use((req, res, next) => {
   res.set("Cache-Control", "no-store");
@@ -26,6 +46,10 @@ app.get("/health", (req, res) => {
   res.json({
     ok: true,
     endpoint: SES_ENDPOINT,
+    endpoints: {
+      ses: SES_ENDPOINT,
+      cloudWatchLogs: CLOUDWATCH_ENDPOINT
+    },
     port: PORT,
     defaultRefreshMs: DEFAULT_REFRESH_MS
   });
@@ -96,6 +120,71 @@ app.get("/api/messages/:id/attachments/:index", async (req, res) => {
   }
 });
 
+app.get("/api/logs/groups", async (req, res) => {
+  try {
+    const groups = await loadLogGroups();
+    res.json({
+      endpoint: CLOUDWATCH_ENDPOINT,
+      region: CLOUDWATCH_REGION,
+      defaultGroup: CLOUDWATCH_DEFAULT_GROUP,
+      groups
+    });
+  } catch (error) {
+    console.error("Error fetching log groups:", error);
+    res.status(502).json({
+      error: "Unable to fetch CloudWatch log groups from LocalStack",
+      details: error.message,
+      endpoint: CLOUDWATCH_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/logs/streams", async (req, res) => {
+  try {
+    const logGroupName = String(req.query.group || "");
+
+    if (!logGroupName) {
+      res.status(400).json({ error: "Query parameter 'group' is required" });
+      return;
+    }
+
+    res.json({
+      logGroupName,
+      streams: await loadLogStreams(logGroupName)
+    });
+  } catch (error) {
+    console.error("Error fetching log streams:", error);
+    res.status(502).json({
+      error: "Unable to fetch CloudWatch log streams from LocalStack",
+      details: error.message,
+      endpoint: CLOUDWATCH_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/logs/events", async (req, res) => {
+  try {
+    const logGroupName = String(req.query.group || "");
+    const logStreamName = String(req.query.stream || "");
+    const windowMs = clampNumber(req.query.windowMs, CLOUDWATCH_DEFAULT_WINDOW_MS, 60 * 1000, 24 * 60 * 60 * 1000);
+    const limit = clampNumber(req.query.limit, CLOUDWATCH_DEFAULT_LIMIT, 25, 500);
+
+    if (!logGroupName) {
+      res.status(400).json({ error: "Query parameter 'group' is required" });
+      return;
+    }
+
+    res.json(await loadLogEvents({ logGroupName, logStreamName, windowMs, limit }));
+  } catch (error) {
+    console.error("Error fetching log events:", error);
+    res.status(502).json({
+      error: "Unable to fetch CloudWatch log events from LocalStack",
+      details: error.message,
+      endpoint: CLOUDWATCH_ENDPOINT
+    });
+  }
+});
+
 async function loadMessages() {
   const startedAt = Date.now();
   const sesMessages = await fetchSesMessages();
@@ -133,6 +222,136 @@ async function fetchSesMessages() {
   return Array.isArray(data.messages) ? data.messages : [];
 }
 
+async function loadLogGroups() {
+  const groups = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new DescribeLogGroupsCommand({
+        nextToken,
+        limit: 50
+      })
+    );
+
+    groups.push(
+      ...(response.logGroups || []).map((group) => ({
+        name: group.logGroupName || "",
+        arn: group.arn || "",
+        storedBytes: group.storedBytes || 0,
+        retentionInDays: group.retentionInDays || 0,
+        creationTime: group.creationTime || 0
+      }))
+    );
+
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 10);
+
+  return groups.sort((left, right) => left.name.localeCompare(right.name));
+}
+
+async function loadLogStreams(logGroupName) {
+  const streams = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new DescribeLogStreamsCommand({
+        logGroupName,
+        descending: true,
+        orderBy: "LastEventTime",
+        nextToken,
+        limit: 50
+      })
+    );
+
+    streams.push(
+      ...(response.logStreams || []).map((stream) => ({
+        name: stream.logStreamName || "",
+        arn: stream.arn || "",
+        lastEventTimestamp: stream.lastEventTimestamp || 0,
+        lastIngestionTime: stream.lastIngestionTime || 0,
+        storedBytes: stream.storedBytes || 0
+      }))
+    );
+
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 6 && streams.length < 250);
+
+  return streams;
+}
+
+async function loadLogEvents({ logGroupName, logStreamName, windowMs, limit }) {
+  const startedAt = Date.now();
+  const eventMap = new Map();
+  const startTime = Date.now() - windowMs;
+  let nextToken;
+  let previousToken = "";
+  let pageCount = 0;
+  let searchedLogStreams = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new FilterLogEventsCommand({
+        logGroupName,
+        logStreamNames: logStreamName ? [logStreamName] : undefined,
+        startTime,
+        endTime: Date.now(),
+        limit,
+        nextToken
+      })
+    );
+
+    for (const event of response.events || []) {
+      const id =
+        event.eventId || `${event.logStreamName || "stream"}-${event.timestamp || 0}-${event.ingestionTime || 0}`;
+
+      if (!eventMap.has(id)) {
+        const message = String(event.message || "").trim();
+        eventMap.set(id, {
+          id,
+          timestamp: event.timestamp || 0,
+          ingestionTime: event.ingestionTime || 0,
+          logStreamName: event.logStreamName || "",
+          message,
+          preview: buildLogPreview(message)
+        });
+      }
+    }
+
+    searchedLogStreams = Math.max(searchedLogStreams, (response.searchedLogStreams || []).length);
+    previousToken = nextToken || "";
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && nextToken !== previousToken && pageCount < 10 && eventMap.size < limit);
+
+  const events = [...eventMap.values()]
+    .sort((left, right) => {
+      if ((right.timestamp || 0) !== (left.timestamp || 0)) {
+        return (right.timestamp || 0) - (left.timestamp || 0);
+      }
+
+      return left.logStreamName.localeCompare(right.logStreamName);
+    })
+    .slice(0, limit);
+
+  return {
+    endpoint: CLOUDWATCH_ENDPOINT,
+    region: CLOUDWATCH_REGION,
+    logGroupName,
+    logStreamName,
+    fetchDurationMs: Date.now() - startedAt,
+    latestTimestamp: events[0]?.timestamp || 0,
+    searchedLogStreams,
+    totalEvents: events.length,
+    events
+  };
+}
+
 async function findSesMessageById(id) {
   const messages = await fetchSesMessages();
   return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
@@ -274,6 +493,28 @@ function buildPreview(textContent, renderedHtml) {
   return source.length > 220 ? `${source.slice(0, 217)}...` : source;
 }
 
+function buildLogPreview(message) {
+  const source = String(message || "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  if (!source) {
+    return "No log preview available.";
+  }
+
+  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
+}
+
+function clampNumber(value, fallback, min, max) {
+  const parsed = Number(value);
+
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+
+  return Math.min(Math.max(parsed, min), max);
+}
+
 function buildRenderedHtml(html) {
   if (!html) {
     return "";
@@ -325,7 +566,12 @@ function formatAddressList(addresses) {
 function getClientConfig() {
   return {
     defaultRefreshMs: DEFAULT_REFRESH_MS,
-    endpoint: SES_ENDPOINT
+    endpoint: SES_ENDPOINT,
+    cloudWatchEndpoint: CLOUDWATCH_ENDPOINT,
+    cloudWatchRegion: CLOUDWATCH_REGION,
+    defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
+    defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
+    defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
   };
 }
 
@@ -335,18 +581,28 @@ function renderHtml() {
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LocalStack Email Viewer</title>
+    <title>LocalStack Inspector</title>
     <style>${renderStyles()}</style>
   </head>
   <body>
     <div class="page">
       <header class="hero">
         <div class="hero-copy">
-          <p class="eyebrow">LocalStack SES</p>
-          <h1>Email Viewer</h1>
-          <p class="lede">Compact inbox for generated emails with live polling, search, and raw MIME inspection.</p>
+          <p class="eyebrow">LocalStack Toolbox</p>
+          <h1>Inspector</h1>
+          <p class="lede">Inspect generated SES mail and CloudWatch logs from the same local stack console.</p>
         </div>
         <div class="hero-controls">
+          <div id="workspaceTabs" class="workspaceTabs" role="tablist" aria-label="Inspector views">
+            <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">SES Emails</button>
+            <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">CloudWatch Logs</button>
+          </div>
+          <p class="helper">Keep outbound email inspection and CloudWatch tailing in one local viewer without leaving the browser.</p>
+        </div>
+      </header>
+
+      <section id="emailsPanel" class="workspacePanel">
+        <section class="toolControls">
           <div class="row">
             <button id="refreshButton" class="primary" type="button">Refresh</button>
             <label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
@@ -359,29 +615,94 @@ function renderHtml() {
                 <option value="60000">60s</option>
               </select>
             </label>
+            <span id="statusChip" class="status">Waiting for first refresh...</span>
           </div>
           <div class="row">
             <input id="searchInput" class="search" type="search" placeholder="Search subject, sender, preview..." autocomplete="off">
             <button id="clearSearchButton" class="ghost" type="button">Clear</button>
-          </div>
-          <div class="row">
             <button id="expandAllButton" class="ghost" type="button">Open all</button>
             <button id="collapseAllButton" class="ghost" type="button">Close all</button>
-            <span id="statusChip" class="status">Waiting for first refresh...</span>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Total</span><strong id="totalStat">0</strong><small id="visibleStat">0 visible</small></article>
+          <article class="stat"><span>New</span><strong id="newStat">0</strong><small>New since last refresh</small></article>
+          <article class="stat"><span>Newest</span><strong id="newestStat" class="small">No messages</strong><small id="updatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
+        </section>
+
+        <div class="contentPane">
+          <div class="contentStack">
+            <div id="banner" class="banner" hidden></div>
+            <div id="empty" class="empty" hidden></div>
+            <section id="list" class="list" aria-live="polite"></section>
           </div>
         </div>
-      </header>
-
-      <section class="stats">
-        <article class="stat"><span>Total</span><strong id="totalStat">0</strong><small id="visibleStat">0 visible</small></article>
-        <article class="stat"><span>New</span><strong id="newStat">0</strong><small>New since last refresh</small></article>
-        <article class="stat"><span>Newest</span><strong id="newestStat" class="small">No messages</strong><small id="updatedStat">Not refreshed yet</small></article>
-        <article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
       </section>
 
-      <div id="banner" class="banner" hidden></div>
-      <div id="empty" class="empty" hidden></div>
-      <section id="list" class="list" aria-live="polite"></section>
+      <section id="logsPanel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="logsRefreshButton" class="primary" type="button">Refresh</button>
+            <label class="chip"><input id="logsAutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="logsIntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="logsStatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <label class="chip">Group
+              <select id="logsGroupSelect"></select>
+            </label>
+            <label class="chip">Stream
+              <select id="logsStreamSelect"></select>
+            </label>
+            <label class="chip">Window
+              <select id="logsWindowSelect">
+                <option value="300000">5m</option>
+                <option value="900000" selected>15m</option>
+                <option value="3600000">1h</option>
+                <option value="21600000">6h</option>
+                <option value="86400000">24h</option>
+              </select>
+            </label>
+            <label class="chip">Limit
+              <select id="logsLimitSelect">
+                <option value="100">100</option>
+                <option value="200" selected>200</option>
+                <option value="300">300</option>
+                <option value="500">500</option>
+              </select>
+            </label>
+          </div>
+          <div class="row">
+            <input id="logsSearchInput" class="search" type="search" placeholder="Search stream name or log content..." autocomplete="off">
+            <button id="logsClearSearchButton" class="ghost" type="button">Clear</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Events</span><strong id="logsTotalStat">0</strong><small id="logsVisibleStat">0 visible</small></article>
+          <article class="stat"><span>Streams</span><strong id="logsStreamsStat">0</strong><small>Streams in selected group</small></article>
+          <article class="stat"><span>Latest</span><strong id="logsNewestStat" class="small">No events</strong><small id="logsUpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="logsFetchStat" class="small">Idle</strong><small id="logsFetchDetail">Endpoint: ${escapeHtml(CLOUDWATCH_ENDPOINT)} (${escapeHtml(CLOUDWATCH_REGION)})</small></article>
+        </section>
+
+        <div class="contentPane">
+          <div class="contentStack">
+            <div id="logsBanner" class="banner" hidden></div>
+            <div id="logsEmpty" class="empty" hidden></div>
+            <section id="logsList" class="logList" aria-live="polite"></section>
+          </div>
+        </div>
+      </section>
     </div>
 
     <script type="module" src="/app.js"></script>
@@ -391,23 +712,32 @@ function renderHtml() {
 
 function renderStyles() {
   return `
-    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);}
+    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);}
     *{box-sizing:border-box}
     html,body{margin:0;min-height:100%}
     body{background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif}
     button,input,select,textarea{font:inherit}
     button{cursor:pointer}
-    .page{max-width:1360px;margin:0 auto;padding:18px}
-    .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:14px;margin-bottom:14px}
-    .hero-copy,.hero-controls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
+    .page{display:grid;gap:14px;max-width:1360px;min-height:100vh;margin:0 auto;padding:18px}
+    .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:14px;margin-bottom:0}
+    .hero-copy,.hero-controls,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
     .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
-    .hero-copy,.hero-controls{border-radius:18px;padding:18px}
+    .hero-copy,.hero-controls,.toolControls{border-radius:18px;padding:18px}
     .eyebrow{margin:0 0 6px;color:var(--accent);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
     h1{margin:0;font-size:clamp(1.9rem,4vw,3.1rem);line-height:.98;letter-spacing:-.05em}
     .lede{margin:10px 0 0;max-width:54ch;color:var(--muted);font-size:.96rem}
     .hero-controls{display:grid;gap:10px}
+    .helper{margin:0;color:var(--muted);font-size:.95rem}
+    .workspaceTabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:999px;background:rgba(31,41,51,.05)}
+    .workspaceTab,.primary,.ghost,.mini,.tab{border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .workspaceTab{min-height:34px;padding:0 14px;background:transparent;color:var(--muted);font-weight:700}
+    .workspaceTab.active{background:#fff;border-color:rgba(31,41,51,.08);color:var(--ink)}
+    .workspacePanel{display:grid;gap:12px}
+    .workspacePanel[hidden]{display:none}
+    .toolControls{display:grid;gap:10px}
+    .contentPane{height:clamp(360px,50vh,720px);overflow:auto;padding-right:4px}
+    .contentStack{display:grid;gap:12px;min-width:min-content}
     .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
-    .primary,.ghost,.mini,.tab{border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
     .primary,.ghost{min-height:38px;padding:0 14px;font-weight:700}
     .mini,.tab{min-height:30px;padding:0 10px;font-weight:600}
     .primary{background:var(--accent);color:#fff7f2}
@@ -429,9 +759,10 @@ function renderStyles() {
     .stat strong{display:block;font-size:clamp(1.6rem,3vw,2rem);line-height:1;letter-spacing:-.05em}
     .stat strong.small{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
     .stat small{display:block;margin-top:8px;color:var(--muted);font-size:.85rem}
-    .banner,.empty{margin:0 0 12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
+    .banner,.empty{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
     .banner{color:var(--bad);border-color:rgba(179,58,58,.24);background:rgba(179,58,58,.08)}
-    .list{display:grid;gap:12px}
+    .list{display:grid;gap:12px;align-content:start}
+    .logList{display:grid;gap:10px;align-content:start}
     .card{overflow:hidden;border-radius:16px}
     .card.new{border-color:rgba(31,143,101,.3);box-shadow:var(--card-shadow),0 0 0 1px rgba(31,143,101,.12)}
     .summary{list-style:none;display:grid;gap:8px;padding:14px 16px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
@@ -459,12 +790,22 @@ function renderStyles() {
     .attachmentLink{color:#8d5632;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
     .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
     .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
+    .logEvent{overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
+    .logSummary{list-style:none;display:grid;gap:8px;padding:12px 14px;cursor:pointer}
+    .logSummary::-webkit-details-marker{display:none}
+    .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
+    .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+    .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .logPreview{margin:0;color:#324150;font-size:.9rem}
+    .logBody{padding:0 14px 14px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
+    .logActions{display:flex;justify-content:flex-end;padding:12px 0 0}
+    .logBody pre{background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
     iframe{width:100%;min-height:560px;border:none;background:#fff}
     pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
     .placeholder,.inlineError{padding:12px}
     .inlineError{color:var(--bad)}
     @media (max-width:1080px){.hero{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
-    @media (max-width:720px){.page{padding:12px}.stats{grid-template-columns:1fr}.primary,.ghost,.chip{width:100%;justify-content:center}.toolbar,.row{align-items:stretch}iframe{min-height:420px}}
+    @media (max-width:720px){.page{padding:12px}.stats{grid-template-columns:1fr}.workspaceTab,.primary,.ghost,.chip{width:100%;justify-content:center}.toolbar,.row{align-items:stretch}.logSummaryTop{align-items:flex-start}.contentPane{height:clamp(300px,48vh,560px)}iframe{min-height:420px}}
   `;
 }
 
@@ -478,6 +819,11 @@ function escapeHtml(value) {
 }
 
 function clientApp(config) {
+  const appState = {
+    panel: "emails",
+    logsReady: false
+  };
+
   const state = {
     messages: [],
     filtered: [],
@@ -499,7 +845,34 @@ function clientApp(config) {
     listSignature: ""
   };
 
+  const logsState = {
+    groups: [],
+    streams: [],
+    events: [],
+    filtered: [],
+    group: config.defaultLogGroup || "",
+    stream: "",
+    search: "",
+    auto: true,
+    interval: config.defaultRefreshMs,
+    windowMs: config.defaultLogWindowMs,
+    limit: config.defaultLogLimit,
+    loading: false,
+    error: "",
+    updatedAt: 0,
+    source: "initial",
+    duration: 0,
+    newest: 0,
+    searchedLogStreams: 0,
+    openIds: new Set(),
+    hasInteracted: false,
+    listSignature: ""
+  };
+
   const el = {
+    workspaceTabs: document.getElementById("workspaceTabs"),
+    emailsPanel: document.getElementById("emailsPanel"),
+    logsPanel: document.getElementById("logsPanel"),
     refreshButton: document.getElementById("refreshButton"),
     autoToggle: document.getElementById("autoToggle"),
     intervalSelect: document.getElementById("intervalSelect"),
@@ -517,16 +890,54 @@ function clientApp(config) {
     fetchDetail: document.getElementById("fetchDetail"),
     banner: document.getElementById("banner"),
     empty: document.getElementById("empty"),
-    list: document.getElementById("list")
+    list: document.getElementById("list"),
+    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"),
+    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")
   };
 
   el.intervalSelect.value = String(config.defaultRefreshMs);
+  el.logsIntervalSelect.value = String(config.defaultRefreshMs);
+  el.logsWindowSelect.value = String(config.defaultLogWindowMs);
+  el.logsLimitSelect.value = String(config.defaultLogLimit);
   wire();
+  renderWorkspace();
   renderAll();
+  renderLogsAll();
   refreshMessages("initial");
-  window.setInterval(renderLiveClock, 1000);
+  window.setInterval(() => {
+    renderLiveClock();
+    renderLogsLiveClock();
+  }, 1000);
 
   function wire() {
+    el.workspaceTabs.addEventListener("click", async (event) => {
+      const button = event.target.closest("button[data-panel]");
+
+      if (!button) {
+        return;
+      }
+
+      await setPanel(button.dataset.panel);
+    });
+
     el.refreshButton.addEventListener("click", () => refreshMessages("manual"));
 
     el.autoToggle.addEventListener("change", () => {
@@ -598,10 +1009,88 @@ function clientApp(config) {
       }
     });
 
+    el.logsRefreshButton.addEventListener("click", () => refreshLogs("manual"));
+
+    el.logsAutoToggle.addEventListener("change", () => {
+      logsState.auto = el.logsAutoToggle.checked;
+      scheduleLogsRefresh();
+      renderLogsStatus();
+    });
+
+    el.logsIntervalSelect.addEventListener("change", () => {
+      logsState.interval = Number(el.logsIntervalSelect.value) || config.defaultRefreshMs;
+      scheduleLogsRefresh();
+      renderLogsStatus();
+    });
+
+    el.logsWindowSelect.addEventListener("change", () => {
+      logsState.windowMs = Number(el.logsWindowSelect.value) || config.defaultLogWindowMs;
+      refreshLogs("window");
+    });
+
+    el.logsLimitSelect.addEventListener("change", () => {
+      logsState.limit = Number(el.logsLimitSelect.value) || config.defaultLogLimit;
+      refreshLogs("limit");
+    });
+
+    el.logsSearchInput.addEventListener("input", (event) => {
+      logsState.search = event.target.value;
+      applyLogsFilter();
+    });
+
+    el.logsClearSearchButton.addEventListener("click", () => {
+      logsState.search = "";
+      el.logsSearchInput.value = "";
+      applyLogsFilter();
+    });
+
+    el.logsGroupSelect.addEventListener("change", async () => {
+      logsState.group = el.logsGroupSelect.value;
+      logsState.stream = "";
+      await refreshLogStreams();
+      await refreshLogs("group");
+    });
+
+    el.logsStreamSelect.addEventListener("change", () => {
+      logsState.stream = el.logsStreamSelect.value;
+      refreshLogs("stream");
+    });
+
+    el.logsList.addEventListener("click", async (event) => {
+      const button = event.target.closest("button[data-log-action]");
+
+      if (!button) {
+        return;
+      }
+
+      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");
+      }
+    });
+
     document.addEventListener("visibilitychange", () => {
       window.clearTimeout(state.timer);
+      window.clearTimeout(logsState.timer);
 
-      if (!document.hidden && state.auto) {
+      if (document.hidden) {
+        renderStatus();
+        renderLogsStatus();
+        return;
+      }
+
+      if (appState.panel === "logs" && logsState.auto) {
+        refreshLogs("visibility");
+        return;
+      }
+
+      if (state.auto) {
         refreshMessages("visibility");
       } else {
         renderStatus();
@@ -615,11 +1104,64 @@ function clientApp(config) {
 
       if (!isField && event.key.toLowerCase() === "r") {
         event.preventDefault();
+
+        if (appState.panel === "logs") {
+          refreshLogs("keyboard");
+          return;
+        }
+
         refreshMessages("keyboard");
       }
     });
   }
 
+  async function setPanel(panel) {
+    if (!panel || panel === appState.panel) {
+      if (panel === "logs") {
+        await ensureLogsReady();
+      }
+
+      renderWorkspace();
+      return;
+    }
+
+    appState.panel = panel;
+    renderWorkspace();
+
+    if (panel === "logs") {
+      await ensureLogsReady();
+    }
+
+    scheduleRefresh();
+    scheduleLogsRefresh();
+    renderStatus();
+    renderLogsStatus();
+  }
+
+  function renderWorkspace() {
+    el.emailsPanel.hidden = appState.panel !== "emails";
+    el.logsPanel.hidden = appState.panel !== "logs";
+
+    el.workspaceTabs.querySelectorAll("button[data-panel]").forEach((button) => {
+      const active = button.dataset.panel === appState.panel;
+      button.classList.toggle("active", active);
+      button.setAttribute("aria-pressed", active ? "true" : "false");
+    });
+  }
+
+  async function ensureLogsReady() {
+    if (appState.logsReady) {
+      return;
+    }
+
+    await refreshLogGroups();
+    appState.logsReady = !logsState.error;
+
+    if (logsState.group) {
+      await refreshLogs("initial");
+    }
+  }
+
   async function refreshMessages(source) {
     if (state.loading) {
       return;
@@ -672,6 +1214,144 @@ function clientApp(config) {
     }
   }
 
+  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 {
+      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 {
+      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 });
+    }
+  }
+
+  function applyLogsFilter(shouldRenderList = true) {
+    const search = logsState.search.trim().toLowerCase();
+    logsState.filtered = !search
+      ? [...logsState.events]
+      : logsState.events.filter((event) => logHaystack(event).includes(search));
+    renderLogsAll({ 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)));
@@ -690,6 +1370,11 @@ function clientApp(config) {
     });
   }
 
+  function pruneLogsState() {
+    const ids = new Set(logsState.events.map((event) => event.id));
+    logsState.openIds = new Set([...logsState.openIds].filter((id) => ids.has(id)));
+  }
+
   function applyFilter(shouldRenderList = true) {
     const search = state.search.trim().toLowerCase();
     state.filtered = !search
@@ -714,6 +1399,16 @@ function clientApp(config) {
       .join("|");
   }
 
+  function computeLogListSignature(events) {
+    return events
+      .map((event) =>
+        [event.id, event.timestamp || 0, event.ingestionTime || 0, event.logStreamName || "", event.message || ""].join(
+          "::"
+        )
+      )
+      .join("|");
+  }
+
   function haystack(message) {
     return [
       message.subject,
@@ -730,16 +1425,30 @@ function clientApp(config) {
       .toLowerCase();
   }
 
+  function logHaystack(event) {
+    return [event.logStreamName, event.message, event.preview].filter(Boolean).join(" ").toLowerCase();
+  }
+
   function scheduleRefresh() {
     window.clearTimeout(state.timer);
 
-    if (!state.auto || document.hidden || state.loading) {
+    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 renderAll(options = {}) {
     const { renderList: shouldRenderList = true } = options;
     renderStats();
@@ -751,6 +1460,18 @@ function clientApp(config) {
     renderLiveClock();
   }
 
+  function renderLogsAll(options = {}) {
+    const { renderList: shouldRenderList = true } = options;
+    renderLogsFilters();
+    renderLogsStats();
+    renderLogsFetch();
+    renderLogsStatus();
+    if (shouldRenderList) {
+      renderLogsList();
+    }
+    renderLogsLiveClock();
+  }
+
   function renderStats() {
     el.totalStat.textContent = String(state.messages.length);
     el.visibleStat.textContent = `${state.filtered.length} visible${state.search ? " after search" : ""}`;
@@ -758,6 +1479,34 @@ function clientApp(config) {
     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;
+  }
+
+  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 renderFetch() {
     if (state.loading) {
       el.fetchStat.textContent = "Refreshing...";
@@ -781,6 +1530,29 @@ function clientApp(config) {
     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 renderStatus() {
     el.statusChip.className = "status";
 
@@ -817,6 +1589,42 @@ function clientApp(config) {
     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 renderLiveClock() {
     if (!state.updatedAt) {
       el.updatedStat.textContent = "Not refreshed yet";
@@ -827,6 +1635,16 @@ function clientApp(config) {
     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 renderList() {
     el.banner.hidden = !state.error;
     el.banner.textContent = state.error ? `Refresh failed: ${state.error}` : "";
@@ -846,6 +1664,76 @@ function clientApp(config) {
     el.list.querySelectorAll(".card[open]").forEach((details) => hydrate(details, getMessage(details.dataset.id)));
   }
 
+  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.";
+      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.";
+      return;
+    }
+
+    el.logsEmpty.hidden = true;
+    el.logsList.innerHTML = logsState.filtered.map((event, index) => renderLogEvent(event, index)).join("");
+    bindLogToggles();
+  }
+
+  function renderLogEvent(event, index) {
+    const open = logsState.openIds.has(event.id) || (!logsState.hasInteracted && index === 0) ? "open" : "";
+
+    return `
+      <details class="logEvent" data-id="${escapeHtml(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>
+            </div>
+            <span class="tag">${escapeHtml(formatRelative(event.timestamp || Date.now()))}</span>
+          </div>
+          <p class="logPreview">${escapeHtml(event.preview || "No preview available.")}</p>
+        </summary>
+        <div class="logBody">
+          <div class="logActions">
+            <button class="mini" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">Copy JSON</button>
+          </div>
+          <pre>${escapeHtml(formatLogMessage(event.message))}</pre>
+        </div>
+      </details>
+    `;
+  }
+
+  function bindLogToggles() {
+    el.logsList.querySelectorAll(".logEvent").forEach((details) => {
+      details.addEventListener("toggle", () => {
+        const id = details.dataset.id;
+
+        if (!id) {
+          return;
+        }
+
+        logsState.hasInteracted = true;
+
+        if (details.open) {
+          logsState.openIds.add(id);
+        } else {
+          logsState.openIds.delete(id);
+        }
+      });
+    });
+  }
+
   function bindCardToggles() {
     el.list.querySelectorAll(".card").forEach((details) => {
       details.addEventListener("toggle", () => {
@@ -999,6 +1887,10 @@ function clientApp(config) {
     return state.messages.find((message) => message.id === id);
   }
 
+  function getLogEvent(id) {
+    return logsState.events.find((event) => event.id === id);
+  }
+
   async function loadRaw(id) {
     if (state.raw[id]?.status === "loaded") {
       return state.raw[id].value;
@@ -1056,6 +1948,16 @@ function clientApp(config) {
     el.statusChip.textContent = message;
   }
 
+  function setLogsStatus(message, tone) {
+    el.logsStatusChip.className = "status";
+
+    if (tone) {
+      el.logsStatusChip.classList.add(tone);
+    }
+
+    el.logsStatusChip.textContent = message;
+  }
+
   function formatDateTime(value) {
     if (!value) {
       return "Unknown time";
@@ -1106,6 +2008,20 @@ function clientApp(config) {
     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 escapeHtml(value) {
     return String(value ?? "")
       .replace(/&/g, "&amp;")
@@ -1125,6 +2041,7 @@ function clientApp(config) {
 }
 
 app.listen(PORT, () => {
-  console.log(`Local email viewer is running on http://localhost:${PORT}`);
+  console.log(`LocalStack inspector is running on http://localhost:${PORT}`);
   console.log(`Watching LocalStack SES endpoint at ${SES_ENDPOINT}`);
+  console.log(`Watching LocalStack CloudWatch Logs endpoint at ${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`);
 });
diff --git a/_reference/localEmailViewer/package-lock.json b/_reference/localEmailViewer/package-lock.json
index 2c7ecad93..2dec2be60 100644
--- a/_reference/localEmailViewer/package-lock.json
+++ b/_reference/localEmailViewer/package-lock.json
@@ -9,11 +9,634 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
         "express": "^5.1.0",
         "mailparser": "^3.7.4",
         "node-fetch": "^3.3.2"
       }
     },
+    "node_modules/@aws-crypto/crc32": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-5.2.0.tgz",
+      "integrity": "sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/util": "^5.2.0",
+        "@aws-sdk/types": "^3.222.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/sha256-browser": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-browser/-/sha256-browser-5.2.0.tgz",
+      "integrity": "sha512-AXfN/lGotSQwu6HNcEsIASo7kWXZ5HYWvfOmSNKDsEqC4OashTp8alTmaz+F7TC2L083SFv5RdB+qU3Vs1kZqw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/sha256-js": "^5.2.0",
+        "@aws-crypto/supports-web-crypto": "^5.2.0",
+        "@aws-crypto/util": "^5.2.0",
+        "@aws-sdk/types": "^3.222.0",
+        "@aws-sdk/util-locate-window": "^3.0.0",
+        "@smithy/util-utf8": "^2.0.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@aws-crypto/sha256-browser/node_modules/@smithy/is-array-buffer": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-2.2.0.tgz",
+      "integrity": "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/sha256-browser/node_modules/@smithy/util-buffer-from": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-2.2.0.tgz",
+      "integrity": "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/is-array-buffer": "^2.2.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/sha256-browser/node_modules/@smithy/util-utf8": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-2.3.0.tgz",
+      "integrity": "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/util-buffer-from": "^2.2.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/sha256-js": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-js/-/sha256-js-5.2.0.tgz",
+      "integrity": "sha512-FFQQyu7edu4ufvIZ+OadFpHHOt+eSTBaYaki44c+akjg7qZg9oOQeLlk77F6tSYqjDAFClrHJk9tMf0HdVyOvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/util": "^5.2.0",
+        "@aws-sdk/types": "^3.222.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/supports-web-crypto": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/supports-web-crypto/-/supports-web-crypto-5.2.0.tgz",
+      "integrity": "sha512-iAvUotm021kM33eCdNfwIN//F77/IADDSs58i+MDaOqFrVjZo9bAal0NK7HurRuWLLpF1iLX7gbWrjHjeo+YFg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@aws-crypto/util": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/util/-/util-5.2.0.tgz",
+      "integrity": "sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.222.0",
+        "@smithy/util-utf8": "^2.0.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@aws-crypto/util/node_modules/@smithy/is-array-buffer": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-2.2.0.tgz",
+      "integrity": "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/util/node_modules/@smithy/util-buffer-from": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-2.2.0.tgz",
+      "integrity": "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/is-array-buffer": "^2.2.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/util/node_modules/@smithy/util-utf8": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-2.3.0.tgz",
+      "integrity": "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/util-buffer-from": "^2.2.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/client-cloudwatch-logs": {
+      "version": "3.1012.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/client-cloudwatch-logs/-/client-cloudwatch-logs-3.1012.0.tgz",
+      "integrity": "sha512-nkMczmeCG9a1YD48zDKZLX7wLGb5ycXMJXVFnXF8xVxQ2v2uo2xFz1ZZganWHSQxR6ZfBPG7R9OTkDrVx79ZPA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/sha256-browser": "5.2.0",
+        "@aws-crypto/sha256-js": "5.2.0",
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/credential-provider-node": "^3.972.22",
+        "@aws-sdk/middleware-host-header": "^3.972.8",
+        "@aws-sdk/middleware-logger": "^3.972.8",
+        "@aws-sdk/middleware-recursion-detection": "^3.972.8",
+        "@aws-sdk/middleware-user-agent": "^3.972.22",
+        "@aws-sdk/region-config-resolver": "^3.972.8",
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-endpoints": "^3.996.5",
+        "@aws-sdk/util-user-agent-browser": "^3.972.8",
+        "@aws-sdk/util-user-agent-node": "^3.973.8",
+        "@smithy/config-resolver": "^4.4.11",
+        "@smithy/core": "^3.23.12",
+        "@smithy/eventstream-serde-browser": "^4.2.12",
+        "@smithy/eventstream-serde-config-resolver": "^4.3.12",
+        "@smithy/eventstream-serde-node": "^4.2.12",
+        "@smithy/fetch-http-handler": "^5.3.15",
+        "@smithy/hash-node": "^4.2.12",
+        "@smithy/invalid-dependency": "^4.2.12",
+        "@smithy/middleware-content-length": "^4.2.12",
+        "@smithy/middleware-endpoint": "^4.4.26",
+        "@smithy/middleware-retry": "^4.4.43",
+        "@smithy/middleware-serde": "^4.2.15",
+        "@smithy/middleware-stack": "^4.2.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/node-http-handler": "^4.5.0",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-body-length-browser": "^4.2.2",
+        "@smithy/util-body-length-node": "^4.2.3",
+        "@smithy/util-defaults-mode-browser": "^4.3.42",
+        "@smithy/util-defaults-mode-node": "^4.2.45",
+        "@smithy/util-endpoints": "^3.3.3",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-retry": "^4.2.12",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/core": {
+      "version": "3.973.21",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.973.21.tgz",
+      "integrity": "sha512-OTUcDX9Yfz/FLKbHjiMaP9D4Hs44lYJzN7zBcrK2nDmBt0Wr8D6nYt12QoBkZsW0nVMFsTIGaZCrsU9zCcIMXQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/xml-builder": "^3.972.12",
+        "@smithy/core": "^3.23.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/signature-v4": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-env": {
+      "version": "3.972.19",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.972.19.tgz",
+      "integrity": "sha512-33NpkQtmnsjLr9QdZvL3w8bjy+WoBJ+jY8JwuzxIq38rDNi1kwpBWW7Yjh+8bMlksd+ZAWW0fH4S/6OeoAdU5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-http": {
+      "version": "3.972.21",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-http/-/credential-provider-http-3.972.21.tgz",
+      "integrity": "sha512-xFke7yjbON4unNOG0TApQwz+o1LH5VhVLgWlUuiLRWNDyBfeHIFje2ck8qHybvJ8Fkm5m3SsN+pvHtVo6PGWlQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/fetch-http-handler": "^5.3.15",
+        "@smithy/node-http-handler": "^4.5.0",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-stream": "^4.5.20",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-ini": {
+      "version": "3.972.21",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-ini/-/credential-provider-ini-3.972.21.tgz",
+      "integrity": "sha512-fmJN7KhB7CoG65w9fC2LVOd2wZbR2d1yJIpZNe2J5CeDPu7nUHSmavuJAeGEoE3OL5UIBVPNhmK/fV/NQrs3Hw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/credential-provider-env": "^3.972.19",
+        "@aws-sdk/credential-provider-http": "^3.972.21",
+        "@aws-sdk/credential-provider-login": "^3.972.21",
+        "@aws-sdk/credential-provider-process": "^3.972.19",
+        "@aws-sdk/credential-provider-sso": "^3.972.21",
+        "@aws-sdk/credential-provider-web-identity": "^3.972.21",
+        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/credential-provider-imds": "^4.2.12",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-login": {
+      "version": "3.972.21",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-login/-/credential-provider-login-3.972.21.tgz",
+      "integrity": "sha512-ENU+YCiuQocQjfIf9bPxZ+ZY0wIBkl3SMH22optBQwy8UFpSfonHynXzGT27xQxer4cYTNOpwDqbfo57BusbpQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-node": {
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-node/-/credential-provider-node-3.972.22.tgz",
+      "integrity": "sha512-VE6i8nkmrRyhKut7nnfCWRbdDf+CfyRr8ixSwdaPDguYlgvkAO2pHu9oK11XzbSuatB0io1ozI/vpYhelXn8Pg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/credential-provider-env": "^3.972.19",
+        "@aws-sdk/credential-provider-http": "^3.972.21",
+        "@aws-sdk/credential-provider-ini": "^3.972.21",
+        "@aws-sdk/credential-provider-process": "^3.972.19",
+        "@aws-sdk/credential-provider-sso": "^3.972.21",
+        "@aws-sdk/credential-provider-web-identity": "^3.972.21",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/credential-provider-imds": "^4.2.12",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-process": {
+      "version": "3.972.19",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-process/-/credential-provider-process-3.972.19.tgz",
+      "integrity": "sha512-hjj5bFo4kf5/WzAMjDEFByVOMbq5gZiagIpJexf7Kp9nIDaGzhCphMsx03NCA8s9zUJzHlD1lXazd7MS+e03Lg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-sso": {
+      "version": "3.972.21",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-sso/-/credential-provider-sso-3.972.21.tgz",
+      "integrity": "sha512-9jWRCuMZpZKlqCZ46bvievqdfswsyB2yPAr9rOiN+FxaGgf8jrR5iYDqJgscvk1jrbAxiK4cIjHv3XjIAWAhzQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/token-providers": "3.1012.0",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/credential-provider-web-identity": {
+      "version": "3.972.21",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-web-identity/-/credential-provider-web-identity-3.972.21.tgz",
+      "integrity": "sha512-ShWQO/cQVZ+j3zUDK7Kj+m7grPzQCVA2iaZdJ+hJTGvVH5lR32Ip/rgZZ+zBdH6D6wczP9Upa4NMXoqJdGpK1g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-host-header": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-host-header/-/middleware-host-header-3.972.8.tgz",
+      "integrity": "sha512-wAr2REfKsqoKQ+OkNqvOShnBoh+nkPurDKW7uAeVSu6kUECnWlSJiPvnoqxGlfousEY/v9LfS9sNc46hjSYDIQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-logger": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-logger/-/middleware-logger-3.972.8.tgz",
+      "integrity": "sha512-CWl5UCM57WUFaFi5kB7IBY1UmOeLvNZAZ2/OZ5l20ldiJ3TiIz1pC65gYj8X0BCPWkeR1E32mpsCk1L1I4n+lA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-recursion-detection": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-recursion-detection/-/middleware-recursion-detection-3.972.8.tgz",
+      "integrity": "sha512-BnnvYs2ZEpdlmZ2PNlV2ZyQ8j8AEkMTjN79y/YA475ER1ByFYrkVR85qmhni8oeTaJcDqbx364wDpitDAA/wCA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@aws/lambda-invoke-store": "^0.2.2",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-user-agent": {
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-user-agent/-/middleware-user-agent-3.972.22.tgz",
+      "integrity": "sha512-pZPNGWZVQvgUIO/P9PXZNz7ciq9mLYb/wQEurg3phKTa3DiBIunIRcgA0eBNwmog6S3oy0KR1bv4EJ4ld9A5sQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-endpoints": "^3.996.5",
+        "@smithy/core": "^3.23.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-retry": "^4.2.12",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/nested-clients": {
+      "version": "3.996.11",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/nested-clients/-/nested-clients-3.996.11.tgz",
+      "integrity": "sha512-i7SwoSR4JB/79JoGDUACnFUQOZwXGLWNX35lIb1Pq72nUGlVV+RFZp+BLa8S+mog2pbXU9+6Kc5YwGiMi5bKhQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/sha256-browser": "5.2.0",
+        "@aws-crypto/sha256-js": "5.2.0",
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/middleware-host-header": "^3.972.8",
+        "@aws-sdk/middleware-logger": "^3.972.8",
+        "@aws-sdk/middleware-recursion-detection": "^3.972.8",
+        "@aws-sdk/middleware-user-agent": "^3.972.22",
+        "@aws-sdk/region-config-resolver": "^3.972.8",
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-endpoints": "^3.996.5",
+        "@aws-sdk/util-user-agent-browser": "^3.972.8",
+        "@aws-sdk/util-user-agent-node": "^3.973.8",
+        "@smithy/config-resolver": "^4.4.11",
+        "@smithy/core": "^3.23.12",
+        "@smithy/fetch-http-handler": "^5.3.15",
+        "@smithy/hash-node": "^4.2.12",
+        "@smithy/invalid-dependency": "^4.2.12",
+        "@smithy/middleware-content-length": "^4.2.12",
+        "@smithy/middleware-endpoint": "^4.4.26",
+        "@smithy/middleware-retry": "^4.4.43",
+        "@smithy/middleware-serde": "^4.2.15",
+        "@smithy/middleware-stack": "^4.2.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/node-http-handler": "^4.5.0",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-body-length-browser": "^4.2.2",
+        "@smithy/util-body-length-node": "^4.2.3",
+        "@smithy/util-defaults-mode-browser": "^4.3.42",
+        "@smithy/util-defaults-mode-node": "^4.2.45",
+        "@smithy/util-endpoints": "^3.3.3",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-retry": "^4.2.12",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/region-config-resolver": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/region-config-resolver/-/region-config-resolver-3.972.8.tgz",
+      "integrity": "sha512-1eD4uhTDeambO/PNIDVG19A6+v4NdD7xzwLHDutHsUqz0B+i661MwQB2eYO4/crcCvCiQG4SRm1k81k54FEIvw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/config-resolver": "^4.4.11",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/token-providers": {
+      "version": "3.1012.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/token-providers/-/token-providers-3.1012.0.tgz",
+      "integrity": "sha512-vzKwy020zjuiF4WTJzejx5nYcXJnRhHpb6i3lyZHIwfFwXG1yX4bzBVNMWYWF+bz1i2Pp2VhJbPyzpqj4VuJXQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/types": {
+      "version": "3.973.6",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.973.6.tgz",
+      "integrity": "sha512-Atfcy4E++beKtwJHiDln2Nby8W/mam64opFPTiHEqgsthqeydFS1pY+OUlN1ouNOmf8ArPU/6cDS65anOP3KQw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/util-endpoints": {
+      "version": "3.996.5",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/util-endpoints/-/util-endpoints-3.996.5.tgz",
+      "integrity": "sha512-Uh93L5sXFNbyR5sEPMzUU8tJ++Ku97EY4udmC01nB8Zu+xfBPwpIwJ6F7snqQeq8h2pf+8SGN5/NoytfKgYPIw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-endpoints": "^3.3.3",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/util-locate-window": {
+      "version": "3.965.5",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/util-locate-window/-/util-locate-window-3.965.5.tgz",
+      "integrity": "sha512-WhlJNNINQB+9qtLtZJcpQdgZw3SCDCpXdUJP7cToGwHbCWCnRckGlc6Bx/OhWwIYFNAn+FIydY8SZ0QmVu3xTQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/util-user-agent-browser": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/util-user-agent-browser/-/util-user-agent-browser-3.972.8.tgz",
+      "integrity": "sha512-B3KGXJviV2u6Cdw2SDY2aDhoJkVfY/Q/Trwk2CMSkikE1Oi6gRzxhvhIfiRpHfmIsAhV4EA54TVEX8K6CbHbkA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/types": "^4.13.1",
+        "bowser": "^2.11.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@aws-sdk/util-user-agent-node": {
+      "version": "3.973.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/util-user-agent-node/-/util-user-agent-node-3.973.8.tgz",
+      "integrity": "sha512-Kvb96TafGPLYo4Z2GRCzQTne77epXgiZEo0DDXwavzkWmgDV/1XD1tMA766gzRcHHFUraWsE+4T8DKtPTZUxgQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/middleware-user-agent": "^3.972.22",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-config-provider": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "aws-crt": ">=1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "aws-crt": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@aws-sdk/xml-builder": {
+      "version": "3.972.13",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.13.tgz",
+      "integrity": "sha512-I/+BMxM4WE/6xL0tyV7tAUDOAXmyw/va1oGr/eSly43HmLUcD1G+v96vEKAA8VoLcZ03ZQo/PWzjmN9zQErqPQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "fast-xml-parser": "5.5.6",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws/lambda-invoke-store": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@aws/lambda-invoke-store/-/lambda-invoke-store-0.2.4.tgz",
+      "integrity": "sha512-iY8yvjE0y651BixKNPgmv1WrQc+GZ142sb0z4gYnChDDY2YqI4P/jsSopBWrKfAt7LOJAkOXt7rC/hms+WclQQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@selderee/plugin-htmlparser2": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
@@ -27,6 +650,657 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/@smithy/abort-controller": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/abort-controller/-/abort-controller-4.2.12.tgz",
+      "integrity": "sha512-xolrFw6b+2iYGl6EcOL7IJY71vvyZ0DJ3mcKtpykqPe2uscwtzDZJa1uVQXyP7w9Dd+kGwYnPbMsJrGISKiY/Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/config-resolver": {
+      "version": "4.4.13",
+      "resolved": "https://registry.npmjs.org/@smithy/config-resolver/-/config-resolver-4.4.13.tgz",
+      "integrity": "sha512-iIzMC5NmOUP6WL6o8iPBjFhUhBZ9pPjpUpQYWMUFQqKyXXzOftbfK8zcQCz/jFV1Psmf05BK5ypx4K2r4Tnwdg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-config-provider": "^4.2.2",
+        "@smithy/util-endpoints": "^3.3.3",
+        "@smithy/util-middleware": "^4.2.12",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/core": {
+      "version": "3.23.12",
+      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-3.23.12.tgz",
+      "integrity": "sha512-o9VycsYNtgC+Dy3I0yrwCqv9CWicDnke0L7EVOrZtJpjb2t0EjaEofmMrYc0T1Kn3yk32zm6cspxF9u9Bj7e5w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-body-length-browser": "^4.2.2",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-stream": "^4.5.20",
+        "@smithy/util-utf8": "^4.2.2",
+        "@smithy/uuid": "^1.1.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/credential-provider-imds": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/credential-provider-imds/-/credential-provider-imds-4.2.12.tgz",
+      "integrity": "sha512-cr2lR792vNZcYMriSIj+Um3x9KWrjcu98kn234xA6reOAFMmbRpQMOv8KPgEmLLtx3eldU6c5wALKFqNOhugmg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/eventstream-codec": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/eventstream-codec/-/eventstream-codec-4.2.12.tgz",
+      "integrity": "sha512-FE3bZdEl62ojmy8x4FHqxq2+BuOHlcxiH5vaZ6aqHJr3AIZzwF5jfx8dEiU/X0a8RboyNDjmXjlbr8AdEyLgiA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/crc32": "5.2.0",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-hex-encoding": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/eventstream-serde-browser": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/eventstream-serde-browser/-/eventstream-serde-browser-4.2.12.tgz",
+      "integrity": "sha512-XUSuMxlTxV5pp4VpqZf6Sa3vT/Q75FVkLSpSSE3KkWBvAQWeuWt1msTv8fJfgA4/jcJhrbrbMzN1AC/hvPmm5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/eventstream-serde-universal": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/eventstream-serde-config-resolver": {
+      "version": "4.3.12",
+      "resolved": "https://registry.npmjs.org/@smithy/eventstream-serde-config-resolver/-/eventstream-serde-config-resolver-4.3.12.tgz",
+      "integrity": "sha512-7epsAZ3QvfHkngz6RXQYseyZYHlmWXSTPOfPmXkiS+zA6TBNo1awUaMFL9vxyXlGdoELmCZyZe1nQE+imbmV+Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/eventstream-serde-node": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/eventstream-serde-node/-/eventstream-serde-node-4.2.12.tgz",
+      "integrity": "sha512-D1pFuExo31854eAvg89KMn9Oab/wEeJR6Buy32B49A9Ogdtx5fwZPqBHUlDzaCDpycTFk2+fSQgX689Qsk7UGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/eventstream-serde-universal": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/eventstream-serde-universal": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/eventstream-serde-universal/-/eventstream-serde-universal-4.2.12.tgz",
+      "integrity": "sha512-+yNuTiyBACxOJUTvbsNsSOfH9G9oKbaJE1lNL3YHpGcuucl6rPZMi3nrpehpVOVR2E07YqFFmtwpImtpzlouHQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/eventstream-codec": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/fetch-http-handler": {
+      "version": "5.3.15",
+      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-5.3.15.tgz",
+      "integrity": "sha512-T4jFU5N/yiIfrtrsb9uOQn7RdELdM/7HbyLNr6uO/mpkj1ctiVs7CihVr51w4LyQlXWDpXFn4BElf1WmQvZu/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/querystring-builder": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-base64": "^4.3.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/hash-node": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/hash-node/-/hash-node-4.2.12.tgz",
+      "integrity": "sha512-QhBYbGrbxTkZ43QoTPrK72DoYviDeg6YKDrHTMJbbC+A0sml3kSjzFtXP7BtbyJnXojLfTQldGdUR0RGD8dA3w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-buffer-from": "^4.2.2",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/invalid-dependency": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/invalid-dependency/-/invalid-dependency-4.2.12.tgz",
+      "integrity": "sha512-/4F1zb7Z8LOu1PalTdESFHR0RbPwHd3FcaG1sI3UEIriQTWakysgJr65lc1jj6QY5ye7aFsisajotH6UhWfm/g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/is-array-buffer": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-4.2.2.tgz",
+      "integrity": "sha512-n6rQ4N8Jj4YTQO3YFrlgZuwKodf4zUFs7EJIWH86pSCWBaAtAGBFfCM7Wx6D2bBJ2xqFNxGBSrUWswT3M0VJow==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/middleware-content-length": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/middleware-content-length/-/middleware-content-length-4.2.12.tgz",
+      "integrity": "sha512-YE58Yz+cvFInWI/wOTrB+DbvUVz/pLn5mC5MvOV4fdRUc6qGwygyngcucRQjAhiCEbmfLOXX0gntSIcgMvAjmA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/middleware-endpoint": {
+      "version": "4.4.27",
+      "resolved": "https://registry.npmjs.org/@smithy/middleware-endpoint/-/middleware-endpoint-4.4.27.tgz",
+      "integrity": "sha512-T3TFfUgXQlpcg+UdzcAISdZpj4Z+XECZ/cefgA6wLBd6V4lRi0svN2hBouN/be9dXQ31X4sLWz3fAQDf+nt6BA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/core": "^3.23.12",
+        "@smithy/middleware-serde": "^4.2.15",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-middleware": "^4.2.12",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/middleware-retry": {
+      "version": "4.4.44",
+      "resolved": "https://registry.npmjs.org/@smithy/middleware-retry/-/middleware-retry-4.4.44.tgz",
+      "integrity": "sha512-Y1Rav7m5CFRPQyM4CI0koD/bXjyjJu3EQxZZhtLGD88WIrBrQ7kqXM96ncd6rYnojwOo/u9MXu57JrEvu/nLrA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/service-error-classification": "^4.2.12",
+        "@smithy/smithy-client": "^4.12.7",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-retry": "^4.2.12",
+        "@smithy/uuid": "^1.1.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/middleware-serde": {
+      "version": "4.2.15",
+      "resolved": "https://registry.npmjs.org/@smithy/middleware-serde/-/middleware-serde-4.2.15.tgz",
+      "integrity": "sha512-ExYhcltZSli0pgAKOpQQe1DLFBLryeZ22605y/YS+mQpdNWekum9Ujb/jMKfJKgjtz1AZldtwA/wCYuKJgjjlg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/core": "^3.23.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/middleware-stack": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/middleware-stack/-/middleware-stack-4.2.12.tgz",
+      "integrity": "sha512-kruC5gRHwsCOuyCd4ouQxYjgRAym2uDlCvQ5acuMtRrcdfg7mFBg6blaxcJ09STpt3ziEkis6bhg1uwrWU7txw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/node-config-provider": {
+      "version": "4.3.12",
+      "resolved": "https://registry.npmjs.org/@smithy/node-config-provider/-/node-config-provider-4.3.12.tgz",
+      "integrity": "sha512-tr2oKX2xMcO+rBOjobSwVAkV05SIfUKz8iI53rzxEmgW3GOOPOv0UioSDk+J8OpRQnpnhsO3Af6IEBabQBVmiw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/shared-ini-file-loader": "^4.4.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/node-http-handler": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@smithy/node-http-handler/-/node-http-handler-4.5.0.tgz",
+      "integrity": "sha512-Rnq9vQWiR1+/I6NZZMNzJHV6pZYyEHt2ZnuV3MG8z2NNenC4i/8Kzttz7CjZiHSmsN5frhXhg17z3Zqjjhmz1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/abort-controller": "^4.2.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/querystring-builder": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/property-provider": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/property-provider/-/property-provider-4.2.12.tgz",
+      "integrity": "sha512-jqve46eYU1v7pZ5BM+fmkbq3DerkSluPr5EhvOcHxygxzD05ByDRppRwRPPpFrsFo5yDtCYLKu+kreHKVrvc7A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/protocol-http": {
+      "version": "5.3.12",
+      "resolved": "https://registry.npmjs.org/@smithy/protocol-http/-/protocol-http-5.3.12.tgz",
+      "integrity": "sha512-fit0GZK9I1xoRlR4jXmbLhoN0OdEpa96ul8M65XdmXnxXkuMxM0Y8HDT0Fh0Xb4I85MBvBClOzgSrV1X2s1Hxw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/querystring-builder": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/querystring-builder/-/querystring-builder-4.2.12.tgz",
+      "integrity": "sha512-6wTZjGABQufekycfDGMEB84BgtdOE/rCVTov+EDXQ8NHKTUNIp/j27IliwP7tjIU9LR+sSzyGBOXjeEtVgzCHg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-uri-escape": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/querystring-parser": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/querystring-parser/-/querystring-parser-4.2.12.tgz",
+      "integrity": "sha512-P2OdvrgiAKpkPNKlKUtWbNZKB1XjPxM086NeVhK+W+wI46pIKdWBe5QyXvhUm3MEcyS/rkLvY8rZzyUdmyDZBw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/service-error-classification": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/service-error-classification/-/service-error-classification-4.2.12.tgz",
+      "integrity": "sha512-LlP29oSQN0Tw0b6D0Xo6BIikBswuIiGYbRACy5ujw/JgWSzTdYj46U83ssf6Ux0GyNJVivs2uReU8pt7Eu9okQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/shared-ini-file-loader": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@smithy/shared-ini-file-loader/-/shared-ini-file-loader-4.4.7.tgz",
+      "integrity": "sha512-HrOKWsUb+otTeo1HxVWeEb99t5ER1XrBi/xka2Wv6NVmTbuCUC1dvlrksdvxFtODLBjsC+PHK+fuy2x/7Ynyiw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/signature-v4": {
+      "version": "5.3.12",
+      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-5.3.12.tgz",
+      "integrity": "sha512-B/FBwO3MVOL00DaRSXfXfa/TRXRheagt/q5A2NM13u7q+sHS59EOVGQNfG7DkmVtdQm5m3vOosoKAXSqn/OEgw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/is-array-buffer": "^4.2.2",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-hex-encoding": "^4.2.2",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-uri-escape": "^4.2.2",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/smithy-client": {
+      "version": "4.12.7",
+      "resolved": "https://registry.npmjs.org/@smithy/smithy-client/-/smithy-client-4.12.7.tgz",
+      "integrity": "sha512-q3gqnwml60G44FECaEEsdQMplYhDMZYCtYhMCzadCnRnnHIobZJjegmdoUo6ieLQlPUzvrMdIJUpx6DoPmzANQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/core": "^3.23.12",
+        "@smithy/middleware-endpoint": "^4.4.27",
+        "@smithy/middleware-stack": "^4.2.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-stream": "^4.5.20",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/types": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.13.1.tgz",
+      "integrity": "sha512-787F3yzE2UiJIQ+wYW1CVg2odHjmaWLGksnKQHUrK/lYZSEcy1msuLVvxaR/sI2/aDe9U+TBuLsXnr3vod1g0g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/url-parser": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/url-parser/-/url-parser-4.2.12.tgz",
+      "integrity": "sha512-wOPKPEpso+doCZGIlr+e1lVI6+9VAKfL4kZWFgzVgGWY2hZxshNKod4l2LXS3PRC9otH/JRSjtEHqQ/7eLciRA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/querystring-parser": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-base64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-base64/-/util-base64-4.3.2.tgz",
+      "integrity": "sha512-XRH6b0H/5A3SgblmMa5ErXQ2XKhfbQB+Fm/oyLZ2O2kCUrwgg55bU0RekmzAhuwOjA9qdN5VU2BprOvGGUkOOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/util-buffer-from": "^4.2.2",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-body-length-browser": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-body-length-browser/-/util-body-length-browser-4.2.2.tgz",
+      "integrity": "sha512-JKCrLNOup3OOgmzeaKQwi4ZCTWlYR5H4Gm1r2uTMVBXoemo1UEghk5vtMi1xSu2ymgKVGW631e2fp9/R610ZjQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-body-length-node": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@smithy/util-body-length-node/-/util-body-length-node-4.2.3.tgz",
+      "integrity": "sha512-ZkJGvqBzMHVHE7r/hcuCxlTY8pQr1kMtdsVPs7ex4mMU+EAbcXppfo5NmyxMYi2XU49eqaz56j2gsk4dHHPG/g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-buffer-from": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-4.2.2.tgz",
+      "integrity": "sha512-FDXD7cvUoFWwN6vtQfEta540Y/YBe5JneK3SoZg9bThSoOAC/eGeYEua6RkBgKjGa/sz6Y+DuBZj3+YEY21y4Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/is-array-buffer": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-config-provider": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-config-provider/-/util-config-provider-4.2.2.tgz",
+      "integrity": "sha512-dWU03V3XUprJwaUIFVv4iOnS1FC9HnMHDfUrlNDSh4315v0cWyaIErP8KiqGVbf5z+JupoVpNM7ZB3jFiTejvQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-defaults-mode-browser": {
+      "version": "4.3.43",
+      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-browser/-/util-defaults-mode-browser-4.3.43.tgz",
+      "integrity": "sha512-Qd/0wCKMaXxev/z00TvNzGCH2jlKKKxXP1aDxB6oKwSQthe3Og2dMhSayGCnsma1bK/kQX1+X7SMP99t6FgiiQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/smithy-client": "^4.12.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-defaults-mode-node": {
+      "version": "4.2.47",
+      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-node/-/util-defaults-mode-node-4.2.47.tgz",
+      "integrity": "sha512-qSRbYp1EQ7th+sPFuVcVO05AE0QH635hycdEXlpzIahqHHf2Fyd/Zl+8v0XYMJ3cgDVPa0lkMefU7oNUjAP+DQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/config-resolver": "^4.4.13",
+        "@smithy/credential-provider-imds": "^4.2.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/property-provider": "^4.2.12",
+        "@smithy/smithy-client": "^4.12.7",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-endpoints": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@smithy/util-endpoints/-/util-endpoints-3.3.3.tgz",
+      "integrity": "sha512-VACQVe50j0HZPjpwWcjyT51KUQ4AnsvEaQ2lKHOSL4mNLD0G9BjEniQ+yCt1qqfKfiAHRAts26ud7hBjamrwig==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-hex-encoding": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-hex-encoding/-/util-hex-encoding-4.2.2.tgz",
+      "integrity": "sha512-Qcz3W5vuHK4sLQdyT93k/rfrUwdJ8/HZ+nMUOyGdpeGA1Wxt65zYwi3oEl9kOM+RswvYq90fzkNDahPS8K0OIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-middleware": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/util-middleware/-/util-middleware-4.2.12.tgz",
+      "integrity": "sha512-Er805uFUOvgc0l8nv0e0su0VFISoxhJ/AwOn3gL2NWNY2LUEldP5WtVcRYSQBcjg0y9NfG8JYrCJaYDpupBHJQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-retry": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/util-retry/-/util-retry-4.2.12.tgz",
+      "integrity": "sha512-1zopLDUEOwumjcHdJ1mwBHddubYF8GMQvstVCLC54Y46rqoHwlIU+8ZzUeaBcD+WCJHyDGSeZ2ml9YSe9aqcoQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/service-error-classification": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-stream": {
+      "version": "4.5.20",
+      "resolved": "https://registry.npmjs.org/@smithy/util-stream/-/util-stream-4.5.20.tgz",
+      "integrity": "sha512-4yXLm5n/B5SRBR2p8cZ90Sbv4zL4NKsgxdzCzp/83cXw2KxLEumt5p+GAVyRNZgQOSrzXn9ARpO0lUe8XSlSDw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/fetch-http-handler": "^5.3.15",
+        "@smithy/node-http-handler": "^4.5.0",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-buffer-from": "^4.2.2",
+        "@smithy/util-hex-encoding": "^4.2.2",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-uri-escape": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-uri-escape/-/util-uri-escape-4.2.2.tgz",
+      "integrity": "sha512-2kAStBlvq+lTXHyAZYfJRb/DfS3rsinLiwb+69SstC9Vb0s9vNWkRwpnj918Pfi85mzi42sOqdV72OLxWAISnw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/util-utf8": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-4.2.2.tgz",
+      "integrity": "sha512-75MeYpjdWRe8M5E3AW0O4Cx3UadweS+cwdXjwYGBW5h/gxxnbeZ877sLPX/ZJA9GVTlL/qG0dXP29JWFCD1Ayw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/util-buffer-from": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/uuid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@smithy/uuid/-/uuid-1.1.2.tgz",
+      "integrity": "sha512-O/IEdcCUKkubz60tFbGA7ceITTAJsty+lBjNoorP4Z6XRqaFb/OjQjZODophEcuq68nKm6/0r+6/lLQ+XVpk8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -60,6 +1334,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/bowser": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.14.1.tgz",
+      "integrity": "sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==",
+      "license": "MIT"
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -373,6 +1653,41 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/fast-xml-builder": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.4.tgz",
+      "integrity": "sha512-f2jhpN4Eccy0/Uz9csxh3Nu6q4ErKxf0XIsasomfOihuSUa3/xw6w8dnOtCDgEItQFJG8KyXPzQXzcODDrrbOg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "path-expression-matcher": "^1.1.3"
+      }
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.5.6",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.6.tgz",
+      "integrity": "sha512-3+fdZyBRVg29n4rXP0joHthhcHdPUHaIC16cuyyd1iLsuaO6Vea36MPrxgAzbZna8lhvZeRL8Bc9GP56/J9xEw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fast-xml-builder": "^1.1.4",
+        "path-expression-matcher": "^1.1.3",
+        "strnum": "^2.1.2"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
     "node_modules/fetch-blob": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
@@ -856,6 +2171,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-expression-matcher": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.1.3.tgz",
+      "integrity": "sha512-qdVgY8KXmVdJZRSS1JdEPOKPdTiEK/pi0RkcT2sw1RhXxohdujUlJFPuS1TSkevZ9vzd3ZlL7ULl1MHGTApKzQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
@@ -1113,6 +2443,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/strnum": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.1.tgz",
+      "integrity": "sha512-BwRvNd5/QoAtyW1na1y1LsJGQNvRlkde6Q/ipqqEaivoMdV+B1OMOTVdwR+N/cwVUcIt9PYyHmV8HyexCZSupg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/tlds": {
       "version": "1.259.0",
       "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.259.0.tgz",
@@ -1131,6 +2473,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-is": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
diff --git a/_reference/localEmailViewer/package.json b/_reference/localEmailViewer/package.json
index a6b522e0e..377708878 100644
--- a/_reference/localEmailViewer/package.json
+++ b/_reference/localEmailViewer/package.json
@@ -10,8 +10,9 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": "LocalStack SES email viewer for inspecting local outbound mail",
+  "description": "LocalStack inspector for SES emails and CloudWatch logs",
   "dependencies": {
+    "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
     "express": "^5.1.0",
     "mailparser": "^3.7.4",
     "node-fetch": "^3.3.2"

From debc67cc49a96adca2071c5745a156a4097caeb2 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 16:46:25 -0400
Subject: [PATCH 03/10] feature/IO-3587-Commision-Cut - Improved localstack
 client

---
 _reference/localEmailViewer/index.js | 273 +++++++++++++++++++++------
 1 file changed, 216 insertions(+), 57 deletions(-)

diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 4d935135a..2022198c7 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -587,17 +587,18 @@ function renderHtml() {
   <body>
     <div class="page">
       <header class="hero">
-        <div class="hero-copy">
-          <p class="eyebrow">LocalStack Toolbox</p>
-          <h1>Inspector</h1>
-          <p class="lede">Inspect generated SES mail and CloudWatch logs from the same local stack console.</p>
-        </div>
-        <div class="hero-controls">
-          <div id="workspaceTabs" class="workspaceTabs" role="tablist" aria-label="Inspector views">
-            <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">SES Emails</button>
-            <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">CloudWatch Logs</button>
+        <div class="heroShell">
+          <div class="heroIdentity">
+            <p class="eyebrow">LocalStack Toolbox</p>
+            <h1>Inspector</h1>
+          </div>
+          <div class="heroTopRow">
+            <div id="workspaceTabs" class="workspaceTabs" role="tablist" aria-label="Inspector views">
+              <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">SES Emails</button>
+              <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">CloudWatch Logs</button>
+            </div>
+            <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">Theme: Light</button>
           </div>
-          <p class="helper">Keep outbound email inspection and CloudWatch tailing in one local viewer without leaving the browser.</p>
         </div>
       </header>
 
@@ -632,11 +633,14 @@ function renderHtml() {
           <article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
         </section>
 
-        <div class="contentPane">
+        <div id="emailsContentPane" class="contentPane">
           <div class="contentStack">
             <div id="banner" class="banner" hidden></div>
             <div id="empty" class="empty" hidden></div>
             <section id="list" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="scrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
           </div>
         </div>
       </section>
@@ -695,11 +699,14 @@ function renderHtml() {
           <article class="stat"><span>Fetch</span><strong id="logsFetchStat" class="small">Idle</strong><small id="logsFetchDetail">Endpoint: ${escapeHtml(CLOUDWATCH_ENDPOINT)} (${escapeHtml(CLOUDWATCH_REGION)})</small></article>
         </section>
 
-        <div class="contentPane">
+        <div id="logsContentPane" class="contentPane">
           <div class="contentStack">
             <div id="logsBanner" class="banner" hidden></div>
             <div id="logsEmpty" class="empty" hidden></div>
             <section id="logsList" class="logList" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="logsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
           </div>
         </div>
       </section>
@@ -715,57 +722,65 @@ function renderStyles() {
     :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);}
     *{box-sizing:border-box}
     html,body{margin:0;min-height:100%}
-    body{background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif}
+    body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
     button,input,select,textarea{font:inherit}
     button{cursor:pointer}
-    .page{display:grid;gap:14px;max-width:1360px;min-height:100vh;margin:0 auto;padding:18px}
-    .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:14px;margin-bottom:0}
-    .hero-copy,.hero-controls,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
+    .page{display:grid;gap:10px;max-width:1360px;align-content:start;margin:0 auto;padding:14px}
+    .hero{display:block;margin-bottom:0}
+    .heroShell,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
     .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
-    .hero-copy,.hero-controls,.toolControls{border-radius:18px;padding:18px}
-    .eyebrow{margin:0 0 6px;color:var(--accent);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
-    h1{margin:0;font-size:clamp(1.9rem,4vw,3.1rem);line-height:.98;letter-spacing:-.05em}
-    .lede{margin:10px 0 0;max-width:54ch;color:var(--muted);font-size:.96rem}
-    .hero-controls{display:grid;gap:10px}
-    .helper{margin:0;color:var(--muted);font-size:.95rem}
-    .workspaceTabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:999px;background:rgba(31,41,51,.05)}
+    .heroShell,.toolControls{border-radius:18px}
+    .heroShell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
+    .toolControls{padding:12px}
+    .heroIdentity{display:grid;gap:3px;min-width:0}
+    .eyebrow{margin:0 0 4px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
+    h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.85rem);line-height:.96;letter-spacing:-.05em}
+    .lede{margin:8px 0 0;max-width:54ch;color:var(--muted);font-size:.92rem}
+    .heroTopRow{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .helper{margin:0;color:var(--muted);font-size:.89rem}
+    .workspaceTabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:999px;background:rgba(31,41,51,.05)}
     .workspaceTab,.primary,.ghost,.mini,.tab{border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
-    .workspaceTab{min-height:34px;padding:0 14px;background:transparent;color:var(--muted);font-weight:700}
+    .workspaceTab{min-height:32px;padding:0 12px;background:transparent;color:var(--muted);font-weight:700}
     .workspaceTab.active{background:#fff;border-color:rgba(31,41,51,.08);color:var(--ink)}
-    .workspacePanel{display:grid;gap:12px}
+    .themeToggle{white-space:nowrap}
+    .workspacePanel{display:grid;gap:6px}
     .workspacePanel[hidden]{display:none}
-    .toolControls{display:grid;gap:10px}
-    .contentPane{height:clamp(360px,50vh,720px);overflow:auto;padding-right:4px}
-    .contentStack{display:grid;gap:12px;min-width:min-content}
-    .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
-    .primary,.ghost{min-height:38px;padding:0 14px;font-weight:700}
-    .mini,.tab{min-height:30px;padding:0 10px;font-weight:600}
+    .toolControls{display:grid;gap:8px}
+    .contentPane{height:clamp(360px,50vh,720px);overflow:auto;scroll-behavior:smooth;padding-right:4px}
+    .contentStack{display:grid;gap:8px;min-width:100%;padding-bottom:18px}
+    .paneTopWrap{display:flex;justify-content:flex-end;position:sticky;bottom:14px;pointer-events:none;padding-right:10px}
+    .paneTopButton{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(31,41,51,.42);color:#fff;font-size:1.1rem;line-height:1;backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(31,41,51,.18);opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,background-color .12s ease;z-index:6}
+    .paneTopButton.visible{opacity:.78;transform:translateY(0);visibility:visible;pointer-events:auto}
+    .paneTopButton.visible:hover{opacity:1;background:rgba(31,41,51,.62);transform:translateY(-1px)}
+    .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+    .primary,.ghost{min-height:34px;padding:0 12px;font-weight:700}
+    .mini,.tab{min-height:28px;padding:0 10px;font-weight:600}
     .primary{background:var(--accent);color:#fff7f2}
     .ghost,.mini{background:rgba(255,255,255,.76);border-color:var(--line);color:var(--ink)}
     .tab{background:transparent;color:var(--muted)}
     .tab.active{background:#fff;border-color:rgba(207,109,60,.18);color:var(--ink)}
     .primary:hover,.ghost:hover,.mini:hover,.tab:hover{transform:translateY(-1px)}
-    .chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600;font-size:.92rem}
+    .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600;font-size:.88rem}
     .chip input{margin:0;accent-color:var(--accent)}
     .chip select{border:none;background:transparent;outline:none;color:var(--ink)}
-    .search{flex:1 1 260px;min-height:40px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
-    .status{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.9rem;font-weight:600}
+    .search{flex:1 1 260px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
+    .status{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.86rem;font-weight:600}
     .status.ok{color:var(--ok);border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.08)}
     .status.warn{color:var(--warn);border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.08)}
     .status.bad{color:var(--bad);border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.08)}
-    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
-    .stat{border-radius:16px;padding:14px}
-    .stat span{display:block;margin-bottom:8px;color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:0}
+    .stat{border-radius:16px;padding:10px 12px}
+    .stat span{display:block;margin-bottom:4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
     .stat strong{display:block;font-size:clamp(1.6rem,3vw,2rem);line-height:1;letter-spacing:-.05em}
     .stat strong.small{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
-    .stat small{display:block;margin-top:8px;color:var(--muted);font-size:.85rem}
+    .stat small{display:block;margin-top:4px;color:var(--muted);font-size:.82rem}
     .banner,.empty{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
     .banner{color:var(--bad);border-color:rgba(179,58,58,.24);background:rgba(179,58,58,.08)}
     .list{display:grid;gap:12px;align-content:start}
-    .logList{display:grid;gap:10px;align-content:start}
+    .logList{display:grid;gap:10px;align-content:start;width:100%}
     .card{overflow:hidden;border-radius:16px}
     .card.new{border-color:rgba(31,143,101,.3);box-shadow:var(--card-shadow),0 0 0 1px rgba(31,143,101,.12)}
-    .summary{list-style:none;display:grid;gap:8px;padding:14px 16px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
+    .summary{list-style:none;display:grid;gap:7px;padding:12px 14px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
     .summary::-webkit-details-marker{display:none}
     .top,.tags,.toolbar,.actions,.attachments{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
     .top{justify-content:space-between}
@@ -777,12 +792,12 @@ function renderStyles() {
     .tag{background:var(--accent-soft);color:#8d5632}
     .tag.new{background:rgba(31,143,101,.1);color:var(--ok)}
     .tag.bad{background:rgba(179,58,58,.1);color:var(--bad)}
-    .preview{margin:0;color:#324150;font-size:.94rem}
-    .body{display:grid;gap:12px;padding:12px 16px 16px;border-top:1px solid rgba(207,109,60,.14);background:var(--card-body)}
+    .preview{margin:0;color:#324150;font-size:.9rem}
+    .body{display:grid;gap:10px;padding:10px 14px 14px;border-top:1px solid rgba(207,109,60,.14);background:var(--card-body)}
     .toolbar{justify-content:space-between;align-items:center}
-    .tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(207,109,60,.08)}
+    .tabs{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:rgba(207,109,60,.08)}
     .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
-    .metaCard{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(207,109,60,.12)}
+    .metaCard{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(207,109,60,.12)}
     .metaCard dt{margin:0 0 4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
     .metaCard dd{margin:0;word-break:break-word}
     .attachments{gap:6px}
@@ -790,22 +805,78 @@ function renderStyles() {
     .attachmentLink{color:#8d5632;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
     .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
     .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
-    .logEvent{overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
-    .logSummary{list-style:none;display:grid;gap:8px;padding:12px 14px;cursor:pointer}
+    .logEvent{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
+    .logSummary{list-style:none;display:grid;gap:7px;padding:10px 12px;cursor:pointer}
     .logSummary::-webkit-details-marker{display:none}
     .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
     .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
     .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .logPreview{margin:0;color:#324150;font-size:.9rem}
-    .logBody{padding:0 14px 14px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
-    .logActions{display:flex;justify-content:flex-end;padding:12px 0 0}
-    .logBody pre{background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
+    .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
+    .logCodeWrap{position:relative}
+    .logCopyButton{position:absolute;top:10px;right:10px;z-index:1;backdrop-filter:blur(12px);box-shadow:0 8px 18px rgba(31,41,51,.16)}
+    .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:42px 12px 12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
     iframe{width:100%;min-height:560px;border:none;background:#fff}
     pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
     .placeholder,.inlineError{padding:12px}
     .inlineError{color:var(--bad)}
-    @media (max-width:1080px){.hero{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
-    @media (max-width:720px){.page{padding:12px}.stats{grid-template-columns:1fr}.workspaceTab,.primary,.ghost,.chip{width:100%;justify-content:center}.toolbar,.row{align-items:stretch}.logSummaryTop{align-items:flex-start}.contentPane{height:clamp(300px,48vh,560px)}iframe{min-height:420px}}
+    body[data-theme="dark"]{color-scheme:dark;background:radial-gradient(circle at top left,rgba(207,109,60,.12),transparent 28%),radial-gradient(circle at top right,rgba(48,113,169,.12),transparent 26%),linear-gradient(180deg,#10161d,#17202a)}
+    body[data-theme="dark"] .heroShell,
+    body[data-theme="dark"] .toolControls,
+    body[data-theme="dark"] .stat{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.16);box-shadow:0 14px 30px rgba(0,0,0,.32)}
+    body[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(50,35,28,.96),rgba(31,25,22,.98));border-color:rgba(207,109,60,.24);box-shadow:0 18px 34px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .logEvent{background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(14,24,36,.98));border-color:rgba(73,144,204,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .workspaceTabs{background:rgba(148,163,184,.12)}
+    body[data-theme="dark"] .workspaceTab,
+    body[data-theme="dark"] .tab{color:#aab8c8}
+    body[data-theme="dark"] .workspaceTab.active,
+    body[data-theme="dark"] .tab.active,
+    body[data-theme="dark"] .ghost,
+    body[data-theme="dark"] .mini,
+    body[data-theme="dark"] .chip,
+    body[data-theme="dark"] .status,
+    body[data-theme="dark"] .search{background:rgba(18,25,35,.88);border-color:rgba(148,163,184,.18);color:#edf2f7}
+    body[data-theme="dark"] .chip select,
+    body[data-theme="dark"] .search::placeholder{color:#9fb0c2}
+    body[data-theme="dark"] .ghost,
+    body[data-theme="dark"] .mini,
+    body[data-theme="dark"] .workspaceTab.active,
+    body[data-theme="dark"] .tab.active{border-color:rgba(148,163,184,.18)}
+    body[data-theme="dark"] .summary{background:linear-gradient(180deg,rgba(58,40,31,.88),rgba(45,33,28,.96))}
+    body[data-theme="dark"] .body{background:#211a17;border-top-color:rgba(207,109,60,.18)}
+    body[data-theme="dark"] .logSummary{background:linear-gradient(180deg,rgba(21,34,47,.94),rgba(16,27,39,.98))}
+    body[data-theme="dark"] .logBody{background:#13212d;border-top-color:rgba(73,144,204,.18)}
+    body[data-theme="dark"] .metaCard{background:rgba(17,25,35,.64);border-color:rgba(148,163,184,.14)}
+    body[data-theme="dark"] .attachment{background:rgba(50,35,28,.9);border-color:rgba(207,109,60,.18)}
+    body[data-theme="dark"] .attachmentLink{color:#f6c4a9}
+    body[data-theme="dark"] .attachmentLink:hover{background:rgba(75,52,39,.96);border-color:rgba(246,196,169,.26)}
+    body[data-theme="dark"] .panel,
+    body[data-theme="dark"] pre,
+    body[data-theme="dark"] .logBody pre{background:linear-gradient(180deg,rgba(73,144,204,.06),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .panel{border-color:rgba(148,163,184,.14)}
+    body[data-theme="dark"] .banner,
+    body[data-theme="dark"] .empty{background:rgba(15,21,30,.82);border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .time{background:rgba(148,163,184,.12);color:#e8edf3}
+    body[data-theme="dark"] .tag{background:rgba(207,109,60,.14);color:#f0c2aa}
+    body[data-theme="dark"] .logTag{background:rgba(73,144,204,.16);color:#93cfff}
+    body[data-theme="dark"] .preview,
+    body[data-theme="dark"] .logPreview,
+    body[data-theme="dark"] .metaCard dd,
+    body[data-theme="dark"] .head h2,
+    body[data-theme="dark"] .stat strong,
+    body[data-theme="dark"] h1{color:#edf2f7}
+    body[data-theme="dark"] .meta,
+    body[data-theme="dark"] .helper,
+    body[data-theme="dark"] .lede,
+    body[data-theme="dark"] .stat small,
+    body[data-theme="dark"] .stat span,
+    body[data-theme="dark"] .chip,
+    body[data-theme="dark"] .workspaceTab,
+    body[data-theme="dark"] .tab{color:#aab8c8}
+    body[data-theme="dark"] .paneTopButton{border-color:rgba(255,255,255,.18);background:rgba(8,12,18,.58);color:#edf2f7}
+    body[data-theme="dark"] .paneTopButton.visible:hover{background:rgba(8,12,18,.8)}
+    @media (max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
+    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row{align-items:stretch}.stats{grid-template-columns:1fr}.heroTopRow{justify-content:stretch;flex-basis:100%}.workspaceTab,.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.logSummaryTop{align-items:flex-start}.logCopyButton{top:8px;right:8px}.contentPane{height:clamp(300px,48vh,560px)}iframe{min-height:420px}}
   `;
 }
 
@@ -821,8 +892,10 @@ function escapeHtml(value) {
 function clientApp(config) {
   const appState = {
     panel: "emails",
-    logsReady: false
+    logsReady: false,
+    theme: getInitialTheme()
   };
+  const THEME_STORAGE_KEY = "localstack-inspector-theme";
 
   const state = {
     messages: [],
@@ -871,6 +944,7 @@ function clientApp(config) {
 
   const el = {
     workspaceTabs: document.getElementById("workspaceTabs"),
+    themeToggle: document.getElementById("themeToggle"),
     emailsPanel: document.getElementById("emailsPanel"),
     logsPanel: document.getElementById("logsPanel"),
     refreshButton: document.getElementById("refreshButton"),
@@ -880,6 +954,7 @@ function clientApp(config) {
     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"),
@@ -891,6 +966,7 @@ function clientApp(config) {
     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"),
@@ -900,6 +976,7 @@ function clientApp(config) {
     logsLimitSelect: document.getElementById("logsLimitSelect"),
     logsSearchInput: document.getElementById("logsSearchInput"),
     logsClearSearchButton: document.getElementById("logsClearSearchButton"),
+    logsScrollToTopButton: document.getElementById("logsScrollToTopButton"),
     logsStatusChip: document.getElementById("logsStatusChip"),
     logsTotalStat: document.getElementById("logsTotalStat"),
     logsVisibleStat: document.getElementById("logsVisibleStat"),
@@ -910,13 +987,15 @@ function clientApp(config) {
     logsFetchDetail: document.getElementById("logsFetchDetail"),
     logsBanner: document.getElementById("logsBanner"),
     logsEmpty: document.getElementById("logsEmpty"),
-    logsList: document.getElementById("logsList")
+    logsList: document.getElementById("logsList"),
+    logsContentPane: document.getElementById("logsContentPane")
   };
 
   el.intervalSelect.value = String(config.defaultRefreshMs);
   el.logsIntervalSelect.value = String(config.defaultRefreshMs);
   el.logsWindowSelect.value = String(config.defaultLogWindowMs);
   el.logsLimitSelect.value = String(config.defaultLogLimit);
+  applyTheme(appState.theme);
   wire();
   renderWorkspace();
   renderAll();
@@ -938,6 +1017,10 @@ function clientApp(config) {
       await setPanel(button.dataset.panel);
     });
 
+    el.themeToggle.addEventListener("click", () => {
+      applyTheme(appState.theme === "dark" ? "light" : "dark");
+    });
+
     el.refreshButton.addEventListener("click", () => refreshMessages("manual"));
 
     el.autoToggle.addEventListener("change", () => {
@@ -973,6 +1056,14 @@ function clientApp(config) {
       renderList();
     });
 
+    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]");
 
@@ -1044,6 +1135,14 @@ function clientApp(config) {
       applyLogsFilter();
     });
 
+    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 = "";
@@ -1113,6 +1212,9 @@ function clientApp(config) {
         refreshMessages("keyboard");
       }
     });
+
+    updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
+    updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
   }
 
   async function setPanel(panel) {
@@ -1655,6 +1757,7 @@ function clientApp(config) {
       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;
     }
 
@@ -1662,6 +1765,7 @@ function clientApp(config) {
     el.list.innerHTML = state.filtered.map(renderCard).join("");
     bindCardToggles();
     el.list.querySelectorAll(".card[open]").forEach((details) => hydrate(details, getMessage(details.dataset.id)));
+    updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
   }
 
   function renderLogsList() {
@@ -1672,6 +1776,7 @@ function clientApp(config) {
       el.logsList.innerHTML = "";
       el.logsEmpty.hidden = false;
       el.logsEmpty.textContent = "No CloudWatch log groups found in LocalStack yet.";
+      updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
       return;
     }
 
@@ -1681,12 +1786,14 @@ function clientApp(config) {
       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, index) => renderLogEvent(event, index)).join("");
     bindLogToggles();
+    updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
   }
 
   function renderLogEvent(event, index) {
@@ -1705,10 +1812,10 @@ function clientApp(config) {
           <p class="logPreview">${escapeHtml(event.preview || "No preview available.")}</p>
         </summary>
         <div class="logBody">
-          <div class="logActions">
-            <button class="mini" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">Copy JSON</button>
+          <div class="logCodeWrap">
+            <button class="mini logCopyButton" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">Copy JSON</button>
+            <pre>${escapeHtml(formatLogMessage(event.message))}</pre>
           </div>
-          <pre>${escapeHtml(formatLogMessage(event.message))}</pre>
         </div>
       </details>
     `;
@@ -1958,6 +2065,58 @@ function clientApp(config) {
     el.logsStatusChip.textContent = message;
   }
 
+  function getInitialTheme() {
+    try {
+      const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+
+      if (storedTheme === "dark" || storedTheme === "light") {
+        return storedTheme;
+      }
+    } catch {}
+
+    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 ? "Theme: Dark" : "Theme: Light";
+    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 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";

From f0f5c09fd70d1b409fa22922f23433768c347c7c Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 17:03:17 -0400
Subject: [PATCH 04/10] feature/IO-3587-Commision-Cut - Improved localstack
 client

---
 _reference/localEmailViewer/index.js | 292 ++++++++++++++++++++++-----
 1 file changed, 246 insertions(+), 46 deletions(-)

diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 2022198c7..88e28f8b4 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -689,6 +689,8 @@ function renderHtml() {
           <div class="row">
             <input id="logsSearchInput" class="search" type="search" placeholder="Search stream name or log content..." autocomplete="off">
             <button id="logsClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="logsExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="logsCollapseAllButton" class="ghost" type="button">Close all</button>
           </div>
         </section>
 
@@ -721,11 +723,11 @@ function renderStyles() {
   return `
     :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);}
     *{box-sizing:border-box}
-    html,body{margin:0;min-height:100%}
+    html,body{margin:0;height:100%;overflow:hidden}
     body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
     button,input,select,textarea{font:inherit}
     button{cursor:pointer}
-    .page{display:grid;gap:10px;max-width:1360px;align-content:start;margin:0 auto;padding:14px}
+    .page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;max-width:1360px;height:100vh;height:100dvh;margin:0 auto;padding:14px;overflow:hidden}
     .hero{display:block;margin-bottom:0}
     .heroShell,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
     .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
@@ -743,10 +745,10 @@ function renderStyles() {
     .workspaceTab{min-height:32px;padding:0 12px;background:transparent;color:var(--muted);font-weight:700}
     .workspaceTab.active{background:#fff;border-color:rgba(31,41,51,.08);color:var(--ink)}
     .themeToggle{white-space:nowrap}
-    .workspacePanel{display:grid;gap:6px}
+    .workspacePanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-height:0}
     .workspacePanel[hidden]{display:none}
     .toolControls{display:grid;gap:8px}
-    .contentPane{height:clamp(360px,50vh,720px);overflow:auto;scroll-behavior:smooth;padding-right:4px}
+    .contentPane{height:100%;min-height:0;overflow:auto;scroll-behavior:smooth;padding-right:4px}
     .contentStack{display:grid;gap:8px;min-width:100%;padding-bottom:18px}
     .paneTopWrap{display:flex;justify-content:flex-end;position:sticky;bottom:14px;pointer-events:none;padding-right:10px}
     .paneTopButton{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(31,41,51,.42);color:#fff;font-size:1.1rem;line-height:1;backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(31,41,51,.18);opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,background-color .12s ease;z-index:6}
@@ -810,12 +812,17 @@ function renderStyles() {
     .logSummary::-webkit-details-marker{display:none}
     .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
     .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+    .logSummaryActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
     .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
     .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
-    .logCodeWrap{position:relative}
-    .logCopyButton{position:absolute;top:10px;right:10px;z-index:1;backdrop-filter:blur(12px);box-shadow:0 8px 18px rgba(31,41,51,.16)}
-    .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:42px 12px 12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
+    .logCopyButton{box-shadow:none}
+    .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
+    .jsonSyntax .jsonKey{color:#b55f2d}
+    .jsonSyntax .jsonString{color:#1f8f65}
+    .jsonSyntax .jsonNumber{color:#2f6ea9}
+    .jsonSyntax .jsonBoolean{color:#9d5f00}
+    .jsonSyntax .jsonNull{color:#b33a3a}
     iframe{width:100%;min-height:560px;border:none;background:#fff}
     pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
     .placeholder,.inlineError{padding:12px}
@@ -865,6 +872,11 @@ function renderStyles() {
     body[data-theme="dark"] .head h2,
     body[data-theme="dark"] .stat strong,
     body[data-theme="dark"] h1{color:#edf2f7}
+    body[data-theme="dark"] .jsonSyntax .jsonKey{color:#f0b08a}
+    body[data-theme="dark"] .jsonSyntax .jsonString{color:#80d5b0}
+    body[data-theme="dark"] .jsonSyntax .jsonNumber{color:#94c9ff}
+    body[data-theme="dark"] .jsonSyntax .jsonBoolean{color:#f0c274}
+    body[data-theme="dark"] .jsonSyntax .jsonNull{color:#ff9c9c}
     body[data-theme="dark"] .meta,
     body[data-theme="dark"] .helper,
     body[data-theme="dark"] .lede,
@@ -876,7 +888,7 @@ function renderStyles() {
     body[data-theme="dark"] .paneTopButton{border-color:rgba(255,255,255,.18);background:rgba(8,12,18,.58);color:#edf2f7}
     body[data-theme="dark"] .paneTopButton.visible:hover{background:rgba(8,12,18,.8)}
     @media (max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
-    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row{align-items:stretch}.stats{grid-template-columns:1fr}.heroTopRow{justify-content:stretch;flex-basis:100%}.workspaceTab,.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.logSummaryTop{align-items:flex-start}.logCopyButton{top:8px;right:8px}.contentPane{height:clamp(300px,48vh,560px)}iframe{min-height:420px}}
+    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row{align-items:stretch}.stats{grid-template-columns:1fr}.heroTopRow{justify-content:stretch;flex-basis:100%}.workspaceTab,.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.logSummaryTop,.logSummaryActions{align-items:flex-start}.contentPane{min-height:300px}iframe{min-height:420px}}
   `;
 }
 
@@ -890,19 +902,28 @@ function escapeHtml(value) {
 }
 
 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 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 appState = {
-    panel: "emails",
+    panel: getInitialPanel(),
     logsReady: false,
     theme: getInitialTheme()
   };
-  const THEME_STORAGE_KEY = "localstack-inspector-theme";
 
   const state = {
     messages: [],
     filtered: [],
-    search: "",
-    auto: true,
-    interval: config.defaultRefreshMs,
+    search: getStoredText(storedEmailPreferences?.search),
+    auto: getStoredBoolean(storedEmailPreferences?.auto, true),
+    interval: getStoredNumber(storedEmailPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
     loading: false,
     error: "",
     updatedAt: 0,
@@ -923,13 +944,13 @@ function clientApp(config) {
     streams: [],
     events: [],
     filtered: [],
-    group: config.defaultLogGroup || "",
-    stream: "",
-    search: "",
-    auto: true,
-    interval: config.defaultRefreshMs,
-    windowMs: config.defaultLogWindowMs,
-    limit: config.defaultLogLimit,
+    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),
     loading: false,
     error: "",
     updatedAt: 0,
@@ -938,7 +959,6 @@ function clientApp(config) {
     newest: 0,
     searchedLogStreams: 0,
     openIds: new Set(),
-    hasInteracted: false,
     listSignature: ""
   };
 
@@ -976,6 +996,8 @@ function clientApp(config) {
     logsLimitSelect: document.getElementById("logsLimitSelect"),
     logsSearchInput: document.getElementById("logsSearchInput"),
     logsClearSearchButton: document.getElementById("logsClearSearchButton"),
+    logsExpandAllButton: document.getElementById("logsExpandAllButton"),
+    logsCollapseAllButton: document.getElementById("logsCollapseAllButton"),
     logsScrollToTopButton: document.getElementById("logsScrollToTopButton"),
     logsStatusChip: document.getElementById("logsStatusChip"),
     logsTotalStat: document.getElementById("logsTotalStat"),
@@ -991,16 +1013,27 @@ function clientApp(config) {
     logsContentPane: document.getElementById("logsContentPane")
   };
 
-  el.intervalSelect.value = String(config.defaultRefreshMs);
-  el.logsIntervalSelect.value = String(config.defaultRefreshMs);
-  el.logsWindowSelect.value = String(config.defaultLogWindowMs);
-  el.logsLimitSelect.value = String(config.defaultLogLimit);
+  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;
   applyTheme(appState.theme);
+  persistPanel();
+  persistEmailPreferences();
+  persistLogPreferences();
   wire();
   renderWorkspace();
   renderAll();
   renderLogsAll();
-  refreshMessages("initial");
+  if (appState.panel === "logs") {
+    ensureLogsReady();
+  } else {
+    refreshMessages("initial");
+  }
   window.setInterval(() => {
     renderLiveClock();
     renderLogsLiveClock();
@@ -1025,12 +1058,14 @@ function clientApp(config) {
 
     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();
     });
@@ -1104,23 +1139,27 @@ function clientApp(config) {
 
     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");
     });
 
@@ -1135,6 +1174,16 @@ function clientApp(config) {
       applyLogsFilter();
     });
 
+    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);
     });
@@ -1146,12 +1195,14 @@ function clientApp(config) {
     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");
     });
 
@@ -1162,6 +1213,9 @@ function clientApp(config) {
         return;
       }
 
+      event.preventDefault();
+      event.stopPropagation();
+
       const logEvent = getLogEvent(button.dataset.id);
 
       if (!logEvent) {
@@ -1228,10 +1282,13 @@ function clientApp(config) {
     }
 
     appState.panel = panel;
+    persistPanel();
     renderWorkspace();
 
     if (panel === "logs") {
       await ensureLogsReady();
+    } else if (!state.updatedAt && !state.loading) {
+      await refreshMessages("panel");
     }
 
     scheduleRefresh();
@@ -1341,6 +1398,7 @@ function clientApp(config) {
     } catch (error) {
       logsState.error = error.message || "Unknown log group refresh error";
     } finally {
+      persistLogPreferences();
       renderLogsAll();
     }
   }
@@ -1376,6 +1434,7 @@ function clientApp(config) {
       logsState.stream = "";
       logsState.error = error.message || "Unknown log stream refresh error";
     } finally {
+      persistLogPreferences();
       renderLogsAll();
     }
   }
@@ -1451,6 +1510,7 @@ function clientApp(config) {
     logsState.filtered = !search
       ? [...logsState.events]
       : logsState.events.filter((event) => logHaystack(event).includes(search));
+    persistLogPreferences();
     renderLogsAll({ renderList: shouldRenderList });
   }
 
@@ -1482,6 +1542,7 @@ function clientApp(config) {
     state.filtered = !search
       ? [...state.messages]
       : state.messages.filter((message) => haystack(message).includes(search));
+    persistEmailPreferences();
     renderAll({ renderList: shouldRenderList });
   }
 
@@ -1791,31 +1852,29 @@ function clientApp(config) {
     }
 
     el.logsEmpty.hidden = true;
-    el.logsList.innerHTML = logsState.filtered.map((event, index) => renderLogEvent(event, index)).join("");
+    el.logsList.innerHTML = logsState.filtered.map((event) => renderLogEvent(event)).join("");
     bindLogToggles();
     updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
   }
 
-  function renderLogEvent(event, index) {
-    const open = logsState.openIds.has(event.id) || (!logsState.hasInteracted && index === 0) ? "open" : "";
-
+  function renderLogEvent(event) {
     return `
-      <details class="logEvent" data-id="${escapeHtml(event.id)}" ${open}>
+      <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>
             </div>
-            <span class="tag">${escapeHtml(formatRelative(event.timestamp || Date.now()))}</span>
+            <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">${escapeHtml(event.preview || "No preview available.")}</p>
+          <p class="logPreview jsonSyntax">${renderLogPreviewContent(event)}</p>
         </summary>
         <div class="logBody">
-          <div class="logCodeWrap">
-            <button class="mini logCopyButton" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">Copy JSON</button>
-            <pre>${escapeHtml(formatLogMessage(event.message))}</pre>
-          </div>
+          <pre class="jsonSyntax">${renderLogBodyContent(event.message)}</pre>
         </div>
       </details>
     `;
@@ -1830,8 +1889,6 @@ function clientApp(config) {
           return;
         }
 
-        logsState.hasInteracted = true;
-
         if (details.open) {
           logsState.openIds.add(id);
         } else {
@@ -2065,14 +2122,17 @@ function clientApp(config) {
     el.logsStatusChip.textContent = message;
   }
 
-  function getInitialTheme() {
-    try {
-      const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+  function getInitialPanel() {
+    const storedPanel = readStoredValue(PANEL_STORAGE_KEY);
+    return storedPanel === "logs" ? "logs" : "emails";
+  }
 
-      if (storedTheme === "dark" || storedTheme === "light") {
-        return storedTheme;
-      }
-    } catch {}
+  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";
   }
@@ -2101,6 +2161,78 @@ function clientApp(config) {
     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
+    });
+  }
+
+  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;
@@ -2181,6 +2313,74 @@ function clientApp(config) {
     }
   }
 
+  function renderLogPreviewContent(event) {
+    const parsedLog = tryParseLogJson(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 = tryParseLogJson(message);
+
+    if (!parsedLog.ok) {
+      return escapeHtml(formatLogMessage(message));
+    }
+
+    return highlightJsonText(JSON.stringify(parsedLog.value, null, 2));
+  }
+
+  function tryParseLogJson(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;")

From 31c6e7c0e5b4cc093e631642ddf6d9517c5fc46e Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 17:14:32 -0400
Subject: [PATCH 05/10] feature/IO-3587-Commision-Cut - Improved localstack
 client

---
 _reference/localEmailViewer/index.js | 114 +++++++++++++++++++++++----
 1 file changed, 98 insertions(+), 16 deletions(-)

diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 88e28f8b4..162f9504b 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -594,10 +594,10 @@ function renderHtml() {
           </div>
           <div class="heroTopRow">
             <div id="workspaceTabs" class="workspaceTabs" role="tablist" aria-label="Inspector views">
-              <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">SES Emails</button>
-              <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">CloudWatch Logs</button>
+              <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">✉️ SES Emails</button>
+              <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">📜 CloudWatch Logs</button>
             </div>
-            <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">Theme: Light</button>
+            <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
           </div>
         </div>
       </header>
@@ -605,7 +605,7 @@ function renderHtml() {
       <section id="emailsPanel" class="workspacePanel">
         <section class="toolControls">
           <div class="row">
-            <button id="refreshButton" class="primary" type="button">Refresh</button>
+            <button id="refreshButton" class="primary" type="button">🔄 Refresh</button>
             <label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
             <label class="chip">Every
               <select id="intervalSelect">
@@ -648,7 +648,7 @@ function renderHtml() {
       <section id="logsPanel" class="workspacePanel" hidden>
         <section class="toolControls">
           <div class="row">
-            <button id="logsRefreshButton" class="primary" type="button">Refresh</button>
+            <button id="logsRefreshButton" class="primary" type="button">🔄 Refresh</button>
             <label class="chip"><input id="logsAutoToggle" type="checkbox" checked> Live refresh</label>
             <label class="chip">Every
               <select id="logsIntervalSelect">
@@ -741,7 +741,7 @@ function renderStyles() {
     .heroTopRow{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
     .helper{margin:0;color:var(--muted);font-size:.89rem}
     .workspaceTabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:999px;background:rgba(31,41,51,.05)}
-    .workspaceTab,.primary,.ghost,.mini,.tab{border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .workspaceTab,.primary,.ghost,.mini,.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
     .workspaceTab{min-height:32px;padding:0 12px;background:transparent;color:var(--muted);font-weight:700}
     .workspaceTab.active{background:#fff;border-color:rgba(31,41,51,.08);color:var(--ink)}
     .themeToggle{white-space:nowrap}
@@ -1083,12 +1083,12 @@ function clientApp(config) {
 
     el.expandAllButton.addEventListener("click", () => {
       state.filtered.forEach((message) => state.openIds.add(message.id));
-      renderList();
+      syncCardExpansion();
     });
 
     el.collapseAllButton.addEventListener("click", () => {
       state.openIds.clear();
-      renderList();
+      syncCardExpansion();
     });
 
     el.scrollToTopButton.addEventListener("click", () => {
@@ -1825,7 +1825,7 @@ function clientApp(config) {
     el.empty.hidden = true;
     el.list.innerHTML = state.filtered.map(renderCard).join("");
     bindCardToggles();
-    el.list.querySelectorAll(".card[open]").forEach((details) => hydrate(details, getMessage(details.dataset.id)));
+    syncCardExpansion();
     updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
   }
 
@@ -1867,7 +1867,7 @@ function clientApp(config) {
               <span class="tag logTag" title="${escapeHtml(event.logStreamName || "Unknown stream")}">${escapeHtml(event.logStreamName || "Unknown stream")}</span>
             </div>
             <div class="logSummaryActions">
-              <button class="mini logCopyButton" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">Copy JSON</button>
+              <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>
@@ -1919,7 +1919,6 @@ function clientApp(config) {
   }
 
   function renderCard(message) {
-    const open = state.openIds.has(message.id);
     const view = state.views[message.id] || (message.hasHtml ? "rendered" : "text");
     const tags = [];
 
@@ -1940,7 +1939,7 @@ function clientApp(config) {
     }
 
     return `
-      <details class="card ${state.newIds.has(message.id) ? "new" : ""}" data-id="${escapeHtml(message.id)}" ${open ? "open" : ""}>
+      <details class="card ${state.newIds.has(message.id) ? "new" : ""}" data-id="${escapeHtml(message.id)}">
         <summary class="summary">
           <div class="top">
             <div class="head">
@@ -1964,7 +1963,7 @@ function clientApp(config) {
               <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>
+              <button class="mini" type="button" data-action="copy-raw" data-id="${escapeHtml(message.id)}">📋 Copy raw</button>
             </div>
           </div>
 
@@ -1985,7 +1984,8 @@ function clientApp(config) {
               ? `<div class="attachments">${message.attachments
                   .map((attachment) => {
                     const size = attachment.size ? `, ${formatBytes(attachment.size)}` : "";
-                    return `<a class="attachment attachmentLink" href="/api/messages/${encodeURIComponent(message.id)}/attachments/${attachment.index}" download="${escapeHtml(attachment.filename)}" title="Download ${escapeHtml(attachment.filename)}">${escapeHtml(attachment.filename)} (${escapeHtml(attachment.contentType)}${escapeHtml(size)})</a>`;
+                    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>`
               : ""
@@ -1999,7 +1999,7 @@ function clientApp(config) {
 
   function renderPanel(message, view) {
     if (view === "rendered" && message.hasHtml) {
-      return `<iframe title="${escapeHtml(message.subject)}" data-frame loading="lazy"></iframe>`;
+      return `<iframe title="${escapeHtml(message.subject)}" data-frame sandbox="" referrerpolicy="no-referrer"></iframe>`;
     }
 
     if (view === "raw") {
@@ -2027,6 +2027,88 @@ function clientApp(config) {
     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;
+          return;
+        }
+
+        if (!shouldOpen && details.open) {
+          details.open = false;
+          return;
+        }
+
+        if (shouldOpen) {
+          hydrate(details, getMessage(id));
+        }
+      });
+    };
+
+    applyCardState();
+    window.requestAnimationFrame(applyCardState);
+  }
+
+  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;
@@ -2155,7 +2237,7 @@ function clientApp(config) {
     }
 
     const isDark = appState.theme === "dark";
-    el.themeToggle.textContent = isDark ? "Theme: Dark" : "Theme: Light";
+    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";

From fcc05156bcff5fe4134f5c5661fe5525139f3f61 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 17:39:52 -0400
Subject: [PATCH 06/10] feature/IO-3587-Commision-Cut - Improved localstack
 client

---
 _reference/localEmailViewer/README.md         |   5 +
 _reference/localEmailViewer/index.js          | 864 +++++++++++++++++-
 _reference/localEmailViewer/package-lock.json | 199 ++--
 _reference/localEmailViewer/package.json      |   3 +-
 4 files changed, 986 insertions(+), 85 deletions(-)

diff --git a/_reference/localEmailViewer/README.md b/_reference/localEmailViewer/README.md
index 238c2bf22..6492c1176 100644
--- a/_reference/localEmailViewer/README.md
+++ b/_reference/localEmailViewer/README.md
@@ -2,6 +2,7 @@ This app connects to your Docker LocalStack endpoints and gives you a compact in
 
 - SES generated emails
 - CloudWatch log groups, streams, and recent events
+- Secrets Manager secrets and values
 
 ```shell
 npm start
@@ -21,6 +22,8 @@ Features:
   attachment downloads, and new-message highlighting
 - CloudWatch Logs workspace with log group selection, stream filtering, adjustable time window,
   adjustable event limit, live refresh, and in-browser log search
+- Secrets Manager workspace with live refresh, search, expandable secret metadata, lazy-loaded
+  secret values, and copyable JSON/text values
 - Compact single-page UI for switching between the local stack tools you use most
 
 Optional environment variables:
@@ -35,4 +38,6 @@ CLOUDWATCH_VIEWER_REGION=ca-central-1
 CLOUDWATCH_VIEWER_LOG_GROUP=development
 CLOUDWATCH_VIEWER_WINDOW_MS=900000
 CLOUDWATCH_VIEWER_LIMIT=200
+SECRETS_VIEWER_ENDPOINT=http://localhost:4566
+SECRETS_VIEWER_REGION=ca-central-1
 ```
diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 162f9504b..f45eab624 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -6,6 +6,7 @@ import {
   DescribeLogStreamsCommand,
   FilterLogEventsCommand
 } from "@aws-sdk/client-cloudwatch-logs";
+import { GetSecretValueCommand, ListSecretsCommand, SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
 import { simpleParser } from "mailparser";
 
 const app = express();
@@ -19,6 +20,8 @@ const CLOUDWATCH_REGION = process.env.CLOUDWATCH_VIEWER_REGION || process.env.AW
 const CLOUDWATCH_DEFAULT_GROUP = process.env.CLOUDWATCH_VIEWER_LOG_GROUP || "development";
 const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW_MS || 15 * 60 * 1000);
 const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
+const SECRETS_ENDPOINT = process.env.SECRETS_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
+const SECRETS_REGION = process.env.SECRETS_VIEWER_REGION || CLOUDWATCH_REGION;
 const LOCALSTACK_CREDENTIALS = {
   accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
@@ -28,6 +31,11 @@ const cloudWatchLogsClient = new CloudWatchLogsClient({
   endpoint: CLOUDWATCH_ENDPOINT,
   credentials: LOCALSTACK_CREDENTIALS
 });
+const secretsManagerClient = new SecretsManagerClient({
+  region: SECRETS_REGION,
+  endpoint: SECRETS_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS
+});
 
 app.use((req, res, next) => {
   res.set("Cache-Control", "no-store");
@@ -48,7 +56,8 @@ app.get("/health", (req, res) => {
     endpoint: SES_ENDPOINT,
     endpoints: {
       ses: SES_ENDPOINT,
-      cloudWatchLogs: CLOUDWATCH_ENDPOINT
+      cloudWatchLogs: CLOUDWATCH_ENDPOINT,
+      secretsManager: SECRETS_ENDPOINT
     },
     port: PORT,
     defaultRefreshMs: DEFAULT_REFRESH_MS
@@ -185,6 +194,48 @@ app.get("/api/logs/events", async (req, res) => {
   }
 });
 
+app.get("/api/secrets", async (req, res) => {
+  try {
+    res.json(await loadSecrets());
+  } catch (error) {
+    console.error("Error fetching secrets:", error);
+    res.status(502).json({
+      error: "Unable to fetch Secrets Manager secrets from LocalStack",
+      details: error.message,
+      endpoint: SECRETS_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/secrets/value", async (req, res) => {
+  try {
+    const secretId = String(req.query.id || "");
+
+    if (!secretId) {
+      res.status(400).json({ error: "Query parameter 'id' is required" });
+      return;
+    }
+
+    res.json(await loadSecretValue(secretId));
+  } catch (error) {
+    if (error?.name === "ResourceNotFoundException") {
+      res.status(404).json({
+        error: "Secret not found",
+        details: error.message,
+        endpoint: SECRETS_ENDPOINT
+      });
+      return;
+    }
+
+    console.error("Error fetching secret value:", error);
+    res.status(502).json({
+      error: "Unable to fetch Secrets Manager value from LocalStack",
+      details: error.message,
+      endpoint: SECRETS_ENDPOINT
+    });
+  }
+});
+
 async function loadMessages() {
   const startedAt = Date.now();
   const sesMessages = await fetchSesMessages();
@@ -352,6 +403,99 @@ async function loadLogEvents({ logGroupName, logStreamName, windowMs, limit }) {
   };
 }
 
+async function loadSecrets() {
+  const startedAt = Date.now();
+  const secrets = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await secretsManagerClient.send(
+      new ListSecretsCommand({
+        NextToken: nextToken,
+        MaxResults: 50
+      })
+    );
+
+    secrets.push(
+      ...(response.SecretList || []).map((secret, index) => ({
+        id: secret.ARN || secret.Name || `secret-${index}`,
+        name: secret.Name || "Unnamed secret",
+        arn: secret.ARN || "",
+        description: secret.Description || "",
+        createdDate: normalizeTimestamp(secret.CreatedDate),
+        lastChangedDate: normalizeTimestamp(secret.LastChangedDate),
+        lastAccessedDate: normalizeTimestamp(secret.LastAccessedDate),
+        deletedDate: normalizeTimestamp(secret.DeletedDate),
+        primaryRegion: secret.PrimaryRegion || "",
+        owningService: secret.OwningService || "",
+        rotationEnabled: Boolean(secret.RotationEnabled),
+        versionCount: Object.keys(secret.SecretVersionsToStages || {}).length,
+        tagCount: Array.isArray(secret.Tags) ? secret.Tags.length : 0,
+        tags: (secret.Tags || [])
+          .map((tag) => ({
+            key: tag.Key || "",
+            value: tag.Value || ""
+          }))
+          .filter((tag) => tag.key || tag.value)
+      }))
+    );
+
+    nextToken = response.NextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 10 && secrets.length < 500);
+
+  secrets.sort((left, right) => {
+    const leftTime = Date.parse(left.lastChangedDate || left.createdDate || 0) || 0;
+    const rightTime = Date.parse(right.lastChangedDate || right.createdDate || 0) || 0;
+
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+
+    return left.name.localeCompare(right.name);
+  });
+
+  return {
+    endpoint: SECRETS_ENDPOINT,
+    region: SECRETS_REGION,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalSecrets: secrets.length,
+    latestTimestamp: secrets[0]?.lastChangedDate || secrets[0]?.createdDate || "",
+    secrets
+  };
+}
+
+async function loadSecretValue(secretId) {
+  const startedAt = Date.now();
+  const response = await secretsManagerClient.send(
+    new GetSecretValueCommand({
+      SecretId: secretId
+    })
+  );
+
+  const secretBinary = response.SecretBinary
+    ? typeof response.SecretBinary === "string"
+      ? response.SecretBinary
+      : Buffer.from(response.SecretBinary).toString("base64")
+    : "";
+
+  return {
+    endpoint: SECRETS_ENDPOINT,
+    region: SECRETS_REGION,
+    fetchDurationMs: Date.now() - startedAt,
+    id: secretId,
+    name: response.Name || "",
+    arn: response.ARN || "",
+    versionId: response.VersionId || "",
+    versionStages: Array.isArray(response.VersionStages) ? response.VersionStages : [],
+    createdDate: normalizeTimestamp(response.CreatedDate),
+    secretString: typeof response.SecretString === "string" ? response.SecretString : "",
+    secretBinary
+  };
+}
+
 async function findSesMessageById(id) {
   const messages = await fetchSesMessages();
   return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
@@ -569,6 +713,8 @@ function getClientConfig() {
     endpoint: SES_ENDPOINT,
     cloudWatchEndpoint: CLOUDWATCH_ENDPOINT,
     cloudWatchRegion: CLOUDWATCH_REGION,
+    secretsEndpoint: SECRETS_ENDPOINT,
+    secretsRegion: SECRETS_REGION,
     defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
     defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
     defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
@@ -596,6 +742,7 @@ function renderHtml() {
             <div id="workspaceTabs" class="workspaceTabs" role="tablist" aria-label="Inspector views">
               <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">✉️ SES Emails</button>
               <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">📜 CloudWatch Logs</button>
+              <button class="workspaceTab" type="button" data-panel="secrets" aria-pressed="false">🔐 Secrets Manager</button>
             </div>
             <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
           </div>
@@ -712,6 +859,49 @@ function renderHtml() {
           </div>
         </div>
       </section>
+
+      <section id="secretsPanel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="secretsRefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="secretsAutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="secretsIntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="secretsStatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <input id="secretsSearchInput" class="search" type="search" placeholder="Search secret name, description, service, tags..." autocomplete="off">
+            <button id="secretsClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="secretsExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="secretsCollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Secrets</span><strong id="secretsTotalStat">0</strong><small id="secretsVisibleStat">0 visible</small></article>
+          <article class="stat"><span>Loaded</span><strong id="secretsLoadedStat">0</strong><small>Values loaded this session</small></article>
+          <article class="stat"><span>Latest</span><strong id="secretsNewestStat" class="small">No secrets</strong><small id="secretsUpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="secretsFetchStat" class="small">Idle</strong><small id="secretsFetchDetail">Endpoint: ${escapeHtml(SECRETS_ENDPOINT)} (${escapeHtml(SECRETS_REGION)})</small></article>
+        </section>
+
+        <div id="secretsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="secretsBanner" class="banner" hidden></div>
+            <div id="secretsEmpty" class="empty" hidden></div>
+            <section id="secretsList" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="secretsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
 
     <script type="module" src="/app.js"></script>
@@ -721,7 +911,7 @@ function renderHtml() {
 
 function renderStyles() {
   return `
-    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);}
+    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--secret-shell:linear-gradient(180deg,rgba(239,251,246,.98),rgba(247,253,249,.99));--secret-body:#f6fcf8;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--secret-line:rgba(31,143,101,.2);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--secret:#1f8f65;--secret-soft:rgba(31,143,101,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);--secret-shadow:0 16px 32px rgba(31,143,101,.12);}
     *{box-sizing:border-box}
     html,body{margin:0;height:100%;overflow:hidden}
     body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
@@ -808,16 +998,22 @@ function renderStyles() {
     .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
     .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
     .logEvent{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
+    .secretCard{background:var(--secret-shell);border:1px solid var(--secret-line);box-shadow:var(--secret-shadow)}
     .logSummary{list-style:none;display:grid;gap:7px;padding:10px 12px;cursor:pointer}
     .logSummary::-webkit-details-marker{display:none}
+    .secretSummary{background:linear-gradient(180deg,rgba(244,253,248,.9),rgba(236,249,242,.96))}
     .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
     .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
     .logSummaryActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
     .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .secretTag{background:var(--secret-soft);color:var(--secret);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
     .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
+    .secretBody{border-top-color:rgba(31,143,101,.14);background:var(--secret-body)}
     .logCopyButton{box-shadow:none}
     .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
+    .secretValuePanel{display:grid;gap:10px}
+    .secretValuePanel pre{border-radius:12px;border:1px solid rgba(31,143,101,.14);padding:12px;background:linear-gradient(180deg,rgba(31,143,101,.04),transparent 140px),#fff}
     .jsonSyntax .jsonKey{color:#b55f2d}
     .jsonSyntax .jsonString{color:#1f8f65}
     .jsonSyntax .jsonNumber{color:#2f6ea9}
@@ -833,6 +1029,7 @@ function renderStyles() {
     body[data-theme="dark"] .stat{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.16);box-shadow:0 14px 30px rgba(0,0,0,.32)}
     body[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(50,35,28,.96),rgba(31,25,22,.98));border-color:rgba(207,109,60,.24);box-shadow:0 18px 34px rgba(0,0,0,.34)}
     body[data-theme="dark"] .logEvent{background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(14,24,36,.98));border-color:rgba(73,144,204,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .secretCard{background:linear-gradient(180deg,rgba(19,39,31,.96),rgba(14,30,24,.98));border-color:rgba(64,170,126,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
     body[data-theme="dark"] .workspaceTabs{background:rgba(148,163,184,.12)}
     body[data-theme="dark"] .workspaceTab,
     body[data-theme="dark"] .tab{color:#aab8c8}
@@ -853,6 +1050,8 @@ function renderStyles() {
     body[data-theme="dark"] .body{background:#211a17;border-top-color:rgba(207,109,60,.18)}
     body[data-theme="dark"] .logSummary{background:linear-gradient(180deg,rgba(21,34,47,.94),rgba(16,27,39,.98))}
     body[data-theme="dark"] .logBody{background:#13212d;border-top-color:rgba(73,144,204,.18)}
+    body[data-theme="dark"] .secretSummary{background:linear-gradient(180deg,rgba(21,43,34,.94),rgba(16,34,27,.98))}
+    body[data-theme="dark"] .secretBody{background:#12241c;border-top-color:rgba(64,170,126,.18)}
     body[data-theme="dark"] .metaCard{background:rgba(17,25,35,.64);border-color:rgba(148,163,184,.14)}
     body[data-theme="dark"] .attachment{background:rgba(50,35,28,.9);border-color:rgba(207,109,60,.18)}
     body[data-theme="dark"] .attachmentLink{color:#f6c4a9}
@@ -860,12 +1059,14 @@ function renderStyles() {
     body[data-theme="dark"] .panel,
     body[data-theme="dark"] pre,
     body[data-theme="dark"] .logBody pre{background:linear-gradient(180deg,rgba(73,144,204,.06),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .secretValuePanel pre{background:linear-gradient(180deg,rgba(64,170,126,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
     body[data-theme="dark"] .panel{border-color:rgba(148,163,184,.14)}
     body[data-theme="dark"] .banner,
     body[data-theme="dark"] .empty{background:rgba(15,21,30,.82);border-color:rgba(148,163,184,.16)}
     body[data-theme="dark"] .time{background:rgba(148,163,184,.12);color:#e8edf3}
     body[data-theme="dark"] .tag{background:rgba(207,109,60,.14);color:#f0c2aa}
     body[data-theme="dark"] .logTag{background:rgba(73,144,204,.16);color:#93cfff}
+    body[data-theme="dark"] .secretTag{background:rgba(64,170,126,.16);color:#9fe0be}
     body[data-theme="dark"] .preview,
     body[data-theme="dark"] .logPreview,
     body[data-theme="dark"] .metaCard dd,
@@ -906,15 +1107,18 @@ function clientApp(config) {
   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 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 appState = {
     panel: getInitialPanel(),
     logsReady: false,
+    secretsReady: false,
     theme: getInitialTheme()
   };
 
@@ -962,11 +1166,29 @@ function clientApp(config) {
     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: {},
+    listSignature: ""
+  };
+
   const el = {
     workspaceTabs: document.getElementById("workspaceTabs"),
     themeToggle: document.getElementById("themeToggle"),
     emailsPanel: document.getElementById("emailsPanel"),
     logsPanel: document.getElementById("logsPanel"),
+    secretsPanel: document.getElementById("secretsPanel"),
     refreshButton: document.getElementById("refreshButton"),
     autoToggle: document.getElementById("autoToggle"),
     intervalSelect: document.getElementById("intervalSelect"),
@@ -1010,7 +1232,27 @@ function clientApp(config) {
     logsBanner: document.getElementById("logsBanner"),
     logsEmpty: document.getElementById("logsEmpty"),
     logsList: document.getElementById("logsList"),
-    logsContentPane: document.getElementById("logsContentPane")
+    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")
   };
 
   el.autoToggle.checked = state.auto;
@@ -1021,22 +1263,30 @@ function clientApp(config) {
   el.logsWindowSelect.value = String(logsState.windowMs);
   el.logsLimitSelect.value = String(logsState.limit);
   el.logsSearchInput.value = logsState.search;
+  el.secretsAutoToggle.checked = secretsState.auto;
+  el.secretsIntervalSelect.value = String(secretsState.interval);
+  el.secretsSearchInput.value = secretsState.search;
   applyTheme(appState.theme);
   persistPanel();
   persistEmailPreferences();
   persistLogPreferences();
+  persistSecretPreferences();
   wire();
   renderWorkspace();
   renderAll();
   renderLogsAll();
+  renderSecretsAll();
   if (appState.panel === "logs") {
     ensureLogsReady();
+  } else if (appState.panel === "secrets") {
+    ensureSecretsReady();
   } else {
     refreshMessages("initial");
   }
   window.setInterval(() => {
     renderLiveClock();
     renderLogsLiveClock();
+    renderSecretsLiveClock();
   }, 1000);
 
   function wire() {
@@ -1228,18 +1478,112 @@ function clientApp(config) {
       }
     });
 
+    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");
+        }
+      }
+    });
+
     document.addEventListener("visibilitychange", () => {
       window.clearTimeout(state.timer);
       window.clearTimeout(logsState.timer);
+      window.clearTimeout(secretsState.timer);
 
       if (document.hidden) {
         renderStatus();
         renderLogsStatus();
+        renderSecretsStatus();
         return;
       }
 
-      if (appState.panel === "logs" && logsState.auto) {
-        refreshLogs("visibility");
+      if (appState.panel === "secrets") {
+        if (secretsState.auto) {
+          refreshSecrets("visibility");
+        } else {
+          renderSecretsStatus();
+        }
+        return;
+      }
+
+      if (appState.panel === "logs") {
+        if (logsState.auto) {
+          refreshLogs("visibility");
+        } else {
+          renderLogsStatus();
+        }
         return;
       }
 
@@ -1263,18 +1607,26 @@ function clientApp(config) {
           return;
         }
 
+        if (appState.panel === "secrets") {
+          refreshSecrets("keyboard");
+          return;
+        }
+
         refreshMessages("keyboard");
       }
     });
 
     updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
     updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
+    updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
   }
 
   async function setPanel(panel) {
     if (!panel || panel === appState.panel) {
       if (panel === "logs") {
         await ensureLogsReady();
+      } else if (panel === "secrets") {
+        await ensureSecretsReady();
       }
 
       renderWorkspace();
@@ -1287,19 +1639,24 @@ function clientApp(config) {
 
     if (panel === "logs") {
       await ensureLogsReady();
+    } else if (panel === "secrets") {
+      await ensureSecretsReady();
     } else if (!state.updatedAt && !state.loading) {
       await refreshMessages("panel");
     }
 
     scheduleRefresh();
     scheduleLogsRefresh();
+    scheduleSecretsRefresh();
     renderStatus();
     renderLogsStatus();
+    renderSecretsStatus();
   }
 
   function renderWorkspace() {
     el.emailsPanel.hidden = appState.panel !== "emails";
     el.logsPanel.hidden = appState.panel !== "logs";
+    el.secretsPanel.hidden = appState.panel !== "secrets";
 
     el.workspaceTabs.querySelectorAll("button[data-panel]").forEach((button) => {
       const active = button.dataset.panel === appState.panel;
@@ -1321,6 +1678,15 @@ function clientApp(config) {
     }
   }
 
+  async function ensureSecretsReady() {
+    if (appState.secretsReady) {
+      return;
+    }
+
+    await refreshSecrets("initial");
+    appState.secretsReady = !secretsState.error;
+  }
+
   async function refreshMessages(source) {
     if (state.loading) {
       return;
@@ -1505,6 +1871,52 @@ function clientApp(config) {
     }
   }
 
+  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 });
+    }
+  }
+
   function applyLogsFilter(shouldRenderList = true) {
     const search = logsState.search.trim().toLowerCase();
     logsState.filtered = !search
@@ -1514,6 +1926,15 @@ function clientApp(config) {
     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 pruneState() {
     const ids = new Set(state.messages.map((message) => message.id));
     state.openIds = new Set([...state.openIds].filter((id) => ids.has(id)));
@@ -1537,6 +1958,17 @@ function clientApp(config) {
     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];
+      }
+    });
+  }
+
   function applyFilter(shouldRenderList = true) {
     const search = state.search.trim().toLowerCase();
     state.filtered = !search
@@ -1572,6 +2004,26 @@ function clientApp(config) {
       .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 haystack(message) {
     return [
       message.subject,
@@ -1592,6 +2044,20 @@ function clientApp(config) {
     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 scheduleRefresh() {
     window.clearTimeout(state.timer);
 
@@ -1612,6 +2078,16 @@ function clientApp(config) {
     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 renderAll(options = {}) {
     const { renderList: shouldRenderList = true } = options;
     renderStats();
@@ -1635,6 +2111,17 @@ function clientApp(config) {
     renderLogsLiveClock();
   }
 
+  function renderSecretsAll(options = {}) {
+    const { renderList: shouldRenderList = true } = options;
+    renderSecretsStats();
+    renderSecretsFetch();
+    renderSecretsStatus();
+    if (shouldRenderList) {
+      renderSecretsList();
+    }
+    renderSecretsLiveClock();
+  }
+
   function renderStats() {
     el.totalStat.textContent = String(state.messages.length);
     el.visibleStat.textContent = `${state.filtered.length} visible${state.search ? " after search" : ""}`;
@@ -1670,6 +2157,15 @@ function clientApp(config) {
     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 renderFetch() {
     if (state.loading) {
       el.fetchStat.textContent = "Refreshing...";
@@ -1716,6 +2212,29 @@ function clientApp(config) {
     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 renderStatus() {
     el.statusChip.className = "status";
 
@@ -1788,6 +2307,42 @@ function clientApp(config) {
     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 renderLiveClock() {
     if (!state.updatedAt) {
       el.updatedStat.textContent = "Not refreshed yet";
@@ -1808,6 +2363,16 @@ function clientApp(config) {
     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 renderList() {
     el.banner.hidden = !state.error;
     el.banner.textContent = state.error ? `Refresh failed: ${state.error}` : "";
@@ -1857,6 +2422,27 @@ function clientApp(config) {
     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 renderLogEvent(event) {
     return `
       <details class="logEvent" data-id="${escapeHtml(event.id)}" ${logsState.openIds.has(event.id) ? "open" : ""}>
@@ -1880,6 +2466,69 @@ function clientApp(config) {
     `;
   }
 
+  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 bindLogToggles() {
     el.logsList.querySelectorAll(".logEvent").forEach((details) => {
       details.addEventListener("toggle", () => {
@@ -1898,6 +2547,25 @@ function clientApp(config) {
     });
   }
 
+  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 bindCardToggles() {
     el.list.querySelectorAll(".card").forEach((details) => {
       details.addEventListener("toggle", () => {
@@ -2023,6 +2691,43 @@ function clientApp(config) {
     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>`;
+    }
+
+    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="copy-value" data-id="${escapeHtml(secret.id)}">📋 Copy value</button>
+          <button class="mini" type="button" data-secret-action="reload-value" data-id="${escapeHtml(secret.id)}">🔄 Reload</button>
+        </div>
+      </div>
+      <pre class="${valueState.isJson ? "jsonSyntax" : ""}">${valueState.displayHtml}</pre>
+    `;
+  }
+
   function metaCard(label, value) {
     return `<div class="metaCard"><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`;
   }
@@ -2035,7 +2740,6 @@ function clientApp(config) {
 
         if (shouldOpen && !details.open) {
           details.open = true;
-          return;
         }
 
         if (!shouldOpen && details.open) {
@@ -2053,6 +2757,31 @@ function clientApp(config) {
     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 resolveAttachmentIcon(attachment) {
     const filename = String(attachment?.filename || "").toLowerCase();
     const contentType = String(attachment?.contentType || "").toLowerCase();
@@ -2137,6 +2866,10 @@ function clientApp(config) {
     return logsState.events.find((event) => event.id === id);
   }
 
+  function getSecret(id) {
+    return secretsState.items.find((secret) => secret.id === id);
+  }
+
   async function loadRaw(id) {
     if (state.raw[id]?.status === "loaded") {
       return state.raw[id].value;
@@ -2168,6 +2901,72 @@ function clientApp(config) {
     }
   }
 
+  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 copyText(value) {
     try {
       await navigator.clipboard.writeText(value);
@@ -2204,9 +3003,19 @@ function clientApp(config) {
     el.logsStatusChip.textContent = message;
   }
 
+  function setSecretsStatus(message, tone) {
+    el.secretsStatusChip.className = "status";
+
+    if (tone) {
+      el.secretsStatusChip.classList.add(tone);
+    }
+
+    el.secretsStatusChip.textContent = message;
+  }
+
   function getInitialPanel() {
     const storedPanel = readStoredValue(PANEL_STORAGE_KEY);
-    return storedPanel === "logs" ? "logs" : "emails";
+    return ["emails", "logs", "secrets"].includes(storedPanel) ? storedPanel : "emails";
   }
 
   function getInitialTheme() {
@@ -2267,6 +3076,14 @@ function clientApp(config) {
     });
   }
 
+  function persistSecretPreferences() {
+    writeStoredJson(SECRET_PREFERENCES_STORAGE_KEY, {
+      search: secretsState.search,
+      auto: secretsState.auto,
+      interval: secretsState.interval
+    });
+  }
+
   function getStoredPreferences(key) {
     try {
       const rawValue = window.localStorage.getItem(key);
@@ -2395,8 +3212,34 @@ function clientApp(config) {
     }
   }
 
+  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 renderLogPreviewContent(event) {
-    const parsedLog = tryParseLogJson(event?.message);
+    const parsedLog = tryParseJsonText(event?.message);
 
     if (!parsedLog.ok) {
       return escapeHtml(event?.preview || "No preview available.");
@@ -2408,7 +3251,7 @@ function clientApp(config) {
   }
 
   function renderLogBodyContent(message) {
-    const parsedLog = tryParseLogJson(message);
+    const parsedLog = tryParseJsonText(message);
 
     if (!parsedLog.ok) {
       return escapeHtml(formatLogMessage(message));
@@ -2417,7 +3260,7 @@ function clientApp(config) {
     return highlightJsonText(JSON.stringify(parsedLog.value, null, 2));
   }
 
-  function tryParseLogJson(message) {
+  function tryParseJsonText(message) {
     const value = String(message || "").trim();
 
     if (!value) {
@@ -2485,4 +3328,5 @@ app.listen(PORT, () => {
   console.log(`LocalStack inspector is running on http://localhost:${PORT}`);
   console.log(`Watching LocalStack SES endpoint at ${SES_ENDPOINT}`);
   console.log(`Watching LocalStack CloudWatch Logs endpoint at ${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`);
+  console.log(`Watching LocalStack Secrets Manager endpoint at ${SECRETS_ENDPOINT} (${SECRETS_REGION})`);
 });
diff --git a/_reference/localEmailViewer/package-lock.json b/_reference/localEmailViewer/package-lock.json
index 2dec2be60..2f00ef450 100644
--- a/_reference/localEmailViewer/package-lock.json
+++ b/_reference/localEmailViewer/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
+        "@aws-sdk/client-secrets-manager": "^3.1013.0",
         "express": "^5.1.0",
         "mailparser": "^3.7.4",
         "node-fetch": "^3.3.2"
@@ -207,14 +208,64 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/client-secrets-manager": {
+      "version": "3.1013.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/client-secrets-manager/-/client-secrets-manager-3.1013.0.tgz",
+      "integrity": "sha512-jVleaMhnwz7JsYZ8vo3otRdhNl1vmJPfwYQtAfb0T29TwfI9pvfRuWD4CXbm0DPmCJzhN7YT+tqn1dLhk83Y3g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/sha256-browser": "5.2.0",
+        "@aws-crypto/sha256-js": "5.2.0",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/credential-provider-node": "^3.972.23",
+        "@aws-sdk/middleware-host-header": "^3.972.8",
+        "@aws-sdk/middleware-logger": "^3.972.8",
+        "@aws-sdk/middleware-recursion-detection": "^3.972.8",
+        "@aws-sdk/middleware-user-agent": "^3.972.23",
+        "@aws-sdk/region-config-resolver": "^3.972.8",
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-endpoints": "^3.996.5",
+        "@aws-sdk/util-user-agent-browser": "^3.972.8",
+        "@aws-sdk/util-user-agent-node": "^3.973.9",
+        "@smithy/config-resolver": "^4.4.11",
+        "@smithy/core": "^3.23.12",
+        "@smithy/fetch-http-handler": "^5.3.15",
+        "@smithy/hash-node": "^4.2.12",
+        "@smithy/invalid-dependency": "^4.2.12",
+        "@smithy/middleware-content-length": "^4.2.12",
+        "@smithy/middleware-endpoint": "^4.4.26",
+        "@smithy/middleware-retry": "^4.4.43",
+        "@smithy/middleware-serde": "^4.2.15",
+        "@smithy/middleware-stack": "^4.2.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/node-http-handler": "^4.5.0",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-body-length-browser": "^4.2.2",
+        "@smithy/util-body-length-node": "^4.2.3",
+        "@smithy/util-defaults-mode-browser": "^4.3.42",
+        "@smithy/util-defaults-mode-node": "^4.2.45",
+        "@smithy/util-endpoints": "^3.3.3",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-retry": "^4.2.12",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/core": {
-      "version": "3.973.21",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.973.21.tgz",
-      "integrity": "sha512-OTUcDX9Yfz/FLKbHjiMaP9D4Hs44lYJzN7zBcrK2nDmBt0Wr8D6nYt12QoBkZsW0nVMFsTIGaZCrsU9zCcIMXQ==",
+      "version": "3.973.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.973.22.tgz",
+      "integrity": "sha512-lY6g5L95jBNgOUitUhfV2N/W+i08jHEl3xuLODYSQH5Sf50V+LkVYBSyZRLtv2RyuXZXiV7yQ+acpswK1tlrOA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@aws-sdk/types": "^3.973.6",
-        "@aws-sdk/xml-builder": "^3.972.12",
+        "@aws-sdk/xml-builder": "^3.972.14",
         "@smithy/core": "^3.23.12",
         "@smithy/node-config-provider": "^4.3.12",
         "@smithy/property-provider": "^4.2.12",
@@ -232,12 +283,12 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-env": {
-      "version": "3.972.19",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.972.19.tgz",
-      "integrity": "sha512-33NpkQtmnsjLr9QdZvL3w8bjy+WoBJ+jY8JwuzxIq38rDNi1kwpBWW7Yjh+8bMlksd+ZAWW0fH4S/6OeoAdU5A==",
+      "version": "3.972.20",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.972.20.tgz",
+      "integrity": "sha512-vI0QN96DFx3g9AunfOWF3CS4cMkqFiR/WM/FyP9QHr5rZ2dKPkYwP3tCgAOvGuu9CXI7dC1vU2FVUuZ+tfpNvQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/core": "^3.973.22",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/property-provider": "^4.2.12",
         "@smithy/types": "^4.13.1",
@@ -248,12 +299,12 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-http": {
-      "version": "3.972.21",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-http/-/credential-provider-http-3.972.21.tgz",
-      "integrity": "sha512-xFke7yjbON4unNOG0TApQwz+o1LH5VhVLgWlUuiLRWNDyBfeHIFje2ck8qHybvJ8Fkm5m3SsN+pvHtVo6PGWlQ==",
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-http/-/credential-provider-http-3.972.22.tgz",
+      "integrity": "sha512-aS/81smalpe7XDnuQfOq4LIPuaV2PRKU2aMTrHcqO5BD4HwO5kESOHNcec2AYfBtLtIDqgF6RXisgBnfK/jt0w==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/core": "^3.973.22",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/fetch-http-handler": "^5.3.15",
         "@smithy/node-http-handler": "^4.5.0",
@@ -269,19 +320,19 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-ini": {
-      "version": "3.972.21",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-ini/-/credential-provider-ini-3.972.21.tgz",
-      "integrity": "sha512-fmJN7KhB7CoG65w9fC2LVOd2wZbR2d1yJIpZNe2J5CeDPu7nUHSmavuJAeGEoE3OL5UIBVPNhmK/fV/NQrs3Hw==",
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-ini/-/credential-provider-ini-3.972.22.tgz",
+      "integrity": "sha512-rpF8fBT0LllMDp78s62aL2A/8MaccjyJ0ORzqu+ZADeECLSrrCWIeeXsuRam+pxiAMkI1uIyDZJmgLGdadkPXw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
-        "@aws-sdk/credential-provider-env": "^3.972.19",
-        "@aws-sdk/credential-provider-http": "^3.972.21",
-        "@aws-sdk/credential-provider-login": "^3.972.21",
-        "@aws-sdk/credential-provider-process": "^3.972.19",
-        "@aws-sdk/credential-provider-sso": "^3.972.21",
-        "@aws-sdk/credential-provider-web-identity": "^3.972.21",
-        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/credential-provider-env": "^3.972.20",
+        "@aws-sdk/credential-provider-http": "^3.972.22",
+        "@aws-sdk/credential-provider-login": "^3.972.22",
+        "@aws-sdk/credential-provider-process": "^3.972.20",
+        "@aws-sdk/credential-provider-sso": "^3.972.22",
+        "@aws-sdk/credential-provider-web-identity": "^3.972.22",
+        "@aws-sdk/nested-clients": "^3.996.12",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/credential-provider-imds": "^4.2.12",
         "@smithy/property-provider": "^4.2.12",
@@ -294,13 +345,13 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-login": {
-      "version": "3.972.21",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-login/-/credential-provider-login-3.972.21.tgz",
-      "integrity": "sha512-ENU+YCiuQocQjfIf9bPxZ+ZY0wIBkl3SMH22optBQwy8UFpSfonHynXzGT27xQxer4cYTNOpwDqbfo57BusbpQ==",
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-login/-/credential-provider-login-3.972.22.tgz",
+      "integrity": "sha512-u33CO9zeNznlVSg9tWTCRYxaGkqr1ufU6qeClpmzAabXZa8RZxQoVXxL5T53oZJFzQYj+FImORCSsi7H7B77gQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
-        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/nested-clients": "^3.996.12",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/property-provider": "^4.2.12",
         "@smithy/protocol-http": "^5.3.12",
@@ -313,17 +364,17 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-node": {
-      "version": "3.972.22",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-node/-/credential-provider-node-3.972.22.tgz",
-      "integrity": "sha512-VE6i8nkmrRyhKut7nnfCWRbdDf+CfyRr8ixSwdaPDguYlgvkAO2pHu9oK11XzbSuatB0io1ozI/vpYhelXn8Pg==",
+      "version": "3.972.23",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-node/-/credential-provider-node-3.972.23.tgz",
+      "integrity": "sha512-U8tyLbLOZItuVWTH0ay9gWo4xMqZwqQbg1oMzdU4FQSkTpqXemm4X0uoKBR6llqAStgBp30ziKFJHTA43l4qMw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/credential-provider-env": "^3.972.19",
-        "@aws-sdk/credential-provider-http": "^3.972.21",
-        "@aws-sdk/credential-provider-ini": "^3.972.21",
-        "@aws-sdk/credential-provider-process": "^3.972.19",
-        "@aws-sdk/credential-provider-sso": "^3.972.21",
-        "@aws-sdk/credential-provider-web-identity": "^3.972.21",
+        "@aws-sdk/credential-provider-env": "^3.972.20",
+        "@aws-sdk/credential-provider-http": "^3.972.22",
+        "@aws-sdk/credential-provider-ini": "^3.972.22",
+        "@aws-sdk/credential-provider-process": "^3.972.20",
+        "@aws-sdk/credential-provider-sso": "^3.972.22",
+        "@aws-sdk/credential-provider-web-identity": "^3.972.22",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/credential-provider-imds": "^4.2.12",
         "@smithy/property-provider": "^4.2.12",
@@ -336,12 +387,12 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-process": {
-      "version": "3.972.19",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-process/-/credential-provider-process-3.972.19.tgz",
-      "integrity": "sha512-hjj5bFo4kf5/WzAMjDEFByVOMbq5gZiagIpJexf7Kp9nIDaGzhCphMsx03NCA8s9zUJzHlD1lXazd7MS+e03Lg==",
+      "version": "3.972.20",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-process/-/credential-provider-process-3.972.20.tgz",
+      "integrity": "sha512-QRfk7GbA4/HDRjhP3QYR6QBr/QKreVoOzvvlRHnOuGgYJkeoPgPY3LAI1kK1ZMgZ4hH9KiGp757/ntol+INAig==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/core": "^3.973.22",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/property-provider": "^4.2.12",
         "@smithy/shared-ini-file-loader": "^4.4.7",
@@ -353,14 +404,14 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-sso": {
-      "version": "3.972.21",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-sso/-/credential-provider-sso-3.972.21.tgz",
-      "integrity": "sha512-9jWRCuMZpZKlqCZ46bvievqdfswsyB2yPAr9rOiN+FxaGgf8jrR5iYDqJgscvk1jrbAxiK4cIjHv3XjIAWAhzQ==",
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-sso/-/credential-provider-sso-3.972.22.tgz",
+      "integrity": "sha512-4vqlSaUbBj4aNPVKfB6yXuIQ2Z2mvLfIGba2OzzF6zUkN437/PGWsxBU2F8QPSFHti6seckvyCXidU3H+R8NvQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
-        "@aws-sdk/nested-clients": "^3.996.11",
-        "@aws-sdk/token-providers": "3.1012.0",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/nested-clients": "^3.996.12",
+        "@aws-sdk/token-providers": "3.1013.0",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/property-provider": "^4.2.12",
         "@smithy/shared-ini-file-loader": "^4.4.7",
@@ -372,13 +423,13 @@
       }
     },
     "node_modules/@aws-sdk/credential-provider-web-identity": {
-      "version": "3.972.21",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-web-identity/-/credential-provider-web-identity-3.972.21.tgz",
-      "integrity": "sha512-ShWQO/cQVZ+j3zUDK7Kj+m7grPzQCVA2iaZdJ+hJTGvVH5lR32Ip/rgZZ+zBdH6D6wczP9Upa4NMXoqJdGpK1g==",
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-web-identity/-/credential-provider-web-identity-3.972.22.tgz",
+      "integrity": "sha512-/wN1CYg2rVLhW8/jLxMWacQrkpaynnL+4j/Z+e6X1PfoE6NiC0BeOw3i0JmtZrKun85wNV5GmspvuWJihfeeUw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
-        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/nested-clients": "^3.996.12",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/property-provider": "^4.2.12",
         "@smithy/shared-ini-file-loader": "^4.4.7",
@@ -435,12 +486,12 @@
       }
     },
     "node_modules/@aws-sdk/middleware-user-agent": {
-      "version": "3.972.22",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-user-agent/-/middleware-user-agent-3.972.22.tgz",
-      "integrity": "sha512-pZPNGWZVQvgUIO/P9PXZNz7ciq9mLYb/wQEurg3phKTa3DiBIunIRcgA0eBNwmog6S3oy0KR1bv4EJ4ld9A5sQ==",
+      "version": "3.972.23",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-user-agent/-/middleware-user-agent-3.972.23.tgz",
+      "integrity": "sha512-HQu8QoqGZZTvg0Spl9H39QTsSMFwgu+8yz/QGKndXFLk9FZMiCiIgBCVlTVKMDvVbgqIzD9ig+/HmXsIL2Rb+g==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/core": "^3.973.22",
         "@aws-sdk/types": "^3.973.6",
         "@aws-sdk/util-endpoints": "^3.996.5",
         "@smithy/core": "^3.23.12",
@@ -454,23 +505,23 @@
       }
     },
     "node_modules/@aws-sdk/nested-clients": {
-      "version": "3.996.11",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/nested-clients/-/nested-clients-3.996.11.tgz",
-      "integrity": "sha512-i7SwoSR4JB/79JoGDUACnFUQOZwXGLWNX35lIb1Pq72nUGlVV+RFZp+BLa8S+mog2pbXU9+6Kc5YwGiMi5bKhQ==",
+      "version": "3.996.12",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/nested-clients/-/nested-clients-3.996.12.tgz",
+      "integrity": "sha512-KLdQGJPSm98uLINolQ0Tol8OAbk7g0Y7zplHJ1K83vbMIH13aoCvR6Tho66xueW4l4aZlEgVGLWBnD8ifUMsGQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@aws-crypto/sha256-browser": "5.2.0",
         "@aws-crypto/sha256-js": "5.2.0",
-        "@aws-sdk/core": "^3.973.21",
+        "@aws-sdk/core": "^3.973.22",
         "@aws-sdk/middleware-host-header": "^3.972.8",
         "@aws-sdk/middleware-logger": "^3.972.8",
         "@aws-sdk/middleware-recursion-detection": "^3.972.8",
-        "@aws-sdk/middleware-user-agent": "^3.972.22",
+        "@aws-sdk/middleware-user-agent": "^3.972.23",
         "@aws-sdk/region-config-resolver": "^3.972.8",
         "@aws-sdk/types": "^3.973.6",
         "@aws-sdk/util-endpoints": "^3.996.5",
         "@aws-sdk/util-user-agent-browser": "^3.972.8",
-        "@aws-sdk/util-user-agent-node": "^3.973.8",
+        "@aws-sdk/util-user-agent-node": "^3.973.9",
         "@smithy/config-resolver": "^4.4.11",
         "@smithy/core": "^3.23.12",
         "@smithy/fetch-http-handler": "^5.3.15",
@@ -519,13 +570,13 @@
       }
     },
     "node_modules/@aws-sdk/token-providers": {
-      "version": "3.1012.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/token-providers/-/token-providers-3.1012.0.tgz",
-      "integrity": "sha512-vzKwy020zjuiF4WTJzejx5nYcXJnRhHpb6i3lyZHIwfFwXG1yX4bzBVNMWYWF+bz1i2Pp2VhJbPyzpqj4VuJXQ==",
+      "version": "3.1013.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/token-providers/-/token-providers-3.1013.0.tgz",
+      "integrity": "sha512-IL1c54UvbuERrs9oLm5rvkzMciwhhpn1FL0SlC3XUMoLlFhdBsWJgQKK8O5fsQLxbFVqjbjFx9OBkrn44X9PHw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.21",
-        "@aws-sdk/nested-clients": "^3.996.11",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/nested-clients": "^3.996.12",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/property-provider": "^4.2.12",
         "@smithy/shared-ini-file-loader": "^4.4.7",
@@ -590,12 +641,12 @@
       }
     },
     "node_modules/@aws-sdk/util-user-agent-node": {
-      "version": "3.973.8",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-user-agent-node/-/util-user-agent-node-3.973.8.tgz",
-      "integrity": "sha512-Kvb96TafGPLYo4Z2GRCzQTne77epXgiZEo0DDXwavzkWmgDV/1XD1tMA766gzRcHHFUraWsE+4T8DKtPTZUxgQ==",
+      "version": "3.973.9",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/util-user-agent-node/-/util-user-agent-node-3.973.9.tgz",
+      "integrity": "sha512-jeFqqp8KD/P5O+qeKxyGeu7WEVIZFNprnkaDjGmBOjwxYwafCBhpxTgV1TlW6L8e76Vh/siNylNmN/OmSIFBUQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/middleware-user-agent": "^3.972.22",
+        "@aws-sdk/middleware-user-agent": "^3.972.23",
         "@aws-sdk/types": "^3.973.6",
         "@smithy/node-config-provider": "^4.3.12",
         "@smithy/types": "^4.13.1",
@@ -615,9 +666,9 @@
       }
     },
     "node_modules/@aws-sdk/xml-builder": {
-      "version": "3.972.13",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.13.tgz",
-      "integrity": "sha512-I/+BMxM4WE/6xL0tyV7tAUDOAXmyw/va1oGr/eSly43HmLUcD1G+v96vEKAA8VoLcZ03ZQo/PWzjmN9zQErqPQ==",
+      "version": "3.972.14",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.14.tgz",
+      "integrity": "sha512-G/Yd8Bnnyh8QrqLf8jWJbixEnScUFW24e/wOBGYdw1Cl4r80KX/DvHyM2GVZ2vTp7J4gTEr8IXJlTadA8+UfuQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@smithy/types": "^4.13.1",
diff --git a/_reference/localEmailViewer/package.json b/_reference/localEmailViewer/package.json
index 377708878..67ea3fc6b 100644
--- a/_reference/localEmailViewer/package.json
+++ b/_reference/localEmailViewer/package.json
@@ -10,9 +10,10 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": "LocalStack inspector for SES emails and CloudWatch logs",
+  "description": "LocalStack inspector for SES emails, CloudWatch logs, and Secrets Manager",
   "dependencies": {
     "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
+    "@aws-sdk/client-secrets-manager": "^3.1013.0",
     "express": "^5.1.0",
     "mailparser": "^3.7.4",
     "node-fetch": "^3.3.2"

From b2231007b6ce8f112acdd96c5f76c431dd701004 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@imexsystems.ca>
Date: Thu, 19 Mar 2026 14:47:22 -0700
Subject: [PATCH 07/10] IO-3515 Bill OCR Feedback.

---
 bodyshop_translations.babel                   | 819 ++++++++++++++++++
 .../bill-ai-feedback.component.jsx            | 104 +++
 .../bill-enter-ai-scan.component.jsx          |   5 +-
 .../bill-enter-modal.container.jsx            |   9 +-
 client/src/translations/en_us/common.json     |  51 +-
 client/src/translations/es/common.json        |  51 +-
 client/src/translations/fr/common.json        |  51 +-
 localstack/init/10-bootstrap.sh               |   0
 server/ai/bill-ai-feedback.js                 |  72 ++
 server/ai/bill-ocr/bill-ocr.js                |   6 +-
 server/email/sendemail.js                     |   3 +-
 server/routes/aiRoutes.js                     |  11 +-
 12 files changed, 1103 insertions(+), 79 deletions(-)
 create mode 100644 client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx
 mode change 100644 => 100755 localstack/init/10-bootstrap.sh
 create mode 100644 server/ai/bill-ai-feedback.js

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index cfb312ab1..2449aeb52 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -2696,6 +2696,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>oem_partno</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>quantity</name>
                                         <definition_loaded>false</definition_loaded>
@@ -3684,6 +3705,48 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>feedback_placeholder</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>feedback_prompt</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>generic_failure</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -3831,6 +3894,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>submit_feedback</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                         </children>
                                     </folder_node>
                                     <concept_node>
@@ -8641,6 +8725,27 @@
                                                             </translation>
                                                         </translations>
                                                     </concept_node>
+                                                    <concept_node>
+                                                        <name>manual-line</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description></description>
+                                                        <comment></comment>
+                                                        <default_text></default_text>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>es-MX</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>fr-CA</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
                                                     <concept_node>
                                                         <name>partsqueue</name>
                                                         <definition_loaded>false</definition_loaded>
@@ -17816,6 +17921,468 @@
                             <folder_node>
                                 <name>labels</name>
                                 <children>
+                                    <concept_node>
+                                        <name>banner_message</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>banner_status_connected</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>banner_status_disconnected</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>clear_logs</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>collapse_all</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>color_json</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>copied</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>copy</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>copy_request</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>copy_response</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>details</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>expand_all</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>hide_details</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>log_level</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>plain_json</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>provider_cdk</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>provider_dms</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>provider_fortellis</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>provider_pbs</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>provider_reynolds</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>reconnect</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>reconnected_export_service</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>refreshallocations</name>
                                         <definition_loaded>false</definition_loaded>
@@ -17837,6 +18404,153 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>request_xml</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>response_xml</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>rr_validation_message</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>rr_validation_notice_description</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>rr_validation_notice_title</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>transport_ws</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>transport_wss</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                         </children>
@@ -20590,6 +21304,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>done</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>download</name>
                                         <definition_loaded>false</definition_loaded>
@@ -23009,6 +23744,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>validationerror</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>view</name>
                                         <definition_loaded>false</definition_loaded>
@@ -23423,6 +24179,27 @@
                             <folder_node>
                                 <name>validation</name>
                                 <children>
+                                    <concept_node>
+                                        <name>array</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>dateRangeExceeded</name>
                                         <definition_loaded>false</definition_loaded>
@@ -57452,6 +58229,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>work_in_progress_labour_summary</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>work_in_progress_payables</name>
                                         <definition_loaded>false</definition_loaded>
@@ -57473,6 +58271,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>work_in_progress_payables_summary</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                         </children>
diff --git a/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx b/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx
new file mode 100644
index 000000000..0693937b1
--- /dev/null
+++ b/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx
@@ -0,0 +1,104 @@
+import { DislikeOutlined, LikeOutlined } from "@ant-design/icons";
+import { Button, Form, Input, Radio, Space } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useTranslation } from "react-i18next";
+
+function BillAiFeedback({ billForm, rawAIData }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = useState(false);
+  const notification = useNotification();
+
+  //Need to sanitize becuase we pass as form data to include the attachment.
+  const sanitizeBillFormValues = (value) => {
+    const seen = new WeakSet();
+    return JSON.stringify(
+      value,
+      (key, v) => {
+        if (key === "originFileObj") return undefined;
+        if (key === "thumbUrl") return undefined;
+        if (key === "preview") return undefined;
+        if (typeof v === "function") return undefined;
+        if (v && typeof v === "object") {
+          if (seen.has(v)) return "[Circular]";
+          seen.add(v);
+        }
+        return v;
+      },
+      0
+    );
+  };
+
+  const getAttachmentFromBillFormUpload = () => {
+    const uploads = billForm?.getFieldValue?.("upload") || [];
+    const files = uploads.map((u) => u?.originFileObj).filter(Boolean);
+
+    return (
+      files.find((f) => f?.type === "application/pdf") ||
+      files.find((f) => isString(f?.name) && f.name.toLowerCase().endsWith(".pdf")) ||
+      files[0] ||
+      null
+    );
+  };
+
+  const submitFeedback = async ({ rating, comments }) => {
+    setSubmitting(true);
+    try {
+      const billFormValues = billForm.getFieldsValue(true);
+
+      const formData = new FormData();
+      formData.append("rating", rating);
+      formData.append("comments", comments || "");
+      formData.append("billFormValues", sanitizeBillFormValues(billFormValues));
+      formData.append("rawAIData", sanitizeBillFormValues(rawAIData));
+
+      const attachmentFile = getAttachmentFromBillFormUpload();
+      if (attachmentFile) {
+        formData.append("billPdf", attachmentFile, attachmentFile.name || "bill.pdf");
+      }
+
+      await axios.post("/ai/bill-feedback", formData);
+
+      notification.success({
+        title: "Thanks — feedback submitted"
+      });
+      form.resetFields();
+    } catch (error) {
+      notification.error({
+        title: "Failed to submit feedback",
+        description: error?.response?.data?.message || error?.message
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const isString = (v) => typeof v === "string";
+
+  return (
+    <Form form={form} onFinish={submitFeedback} requiredMark={false}>
+      <Space align="top" size="large">
+        <Form.Item name="rating" label={t("bills.labels.ai.feedback_prompt")} rules={[{ required: true }]}>
+          <Radio.Group optionType="button" buttonStyle="solid">
+            <Radio.Button value="up">
+              <LikeOutlined />
+            </Radio.Button>
+            <Radio.Button value="down">
+              <DislikeOutlined />
+            </Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+
+        <Form.Item name="comments">
+          <Input.TextArea rows={1} placeholder={t("bills.labels.ai.feedback_placeholder")} />
+        </Form.Item>
+        <Button onClick={() => form.submit()} loading={submitting} disabled={submitting}>
+          {t("bills.labels.ai.submit_feedback")}
+        </Button>
+      </Space>
+    </Form>
+  );
+}
+export default BillAiFeedback;
diff --git a/client/src/components/bill-enter-ai-scan/bill-enter-ai-scan.component.jsx b/client/src/components/bill-enter-ai-scan/bill-enter-ai-scan.component.jsx
index 453895b59..f4f9362d6 100644
--- a/client/src/components/bill-enter-ai-scan/bill-enter-ai-scan.component.jsx
+++ b/client/src/components/bill-enter-ai-scan/bill-enter-ai-scan.component.jsx
@@ -23,7 +23,8 @@ function BillEnterAiScan({
   fileInputRef,
   scanLoading,
   setScanLoading,
-  setIsAiScan
+  setIsAiScan,
+  setRawAIData
 }) {
   const notification = useNotification();
   const { t } = useTranslation();
@@ -57,6 +58,7 @@ function BillEnterAiScan({
         }
         setScanLoading(false);
 
+        setRawAIData(data.data);
         // Update form with the extracted data
         if (data?.data?.billForm) {
           form.setFieldsValue(data.data.billForm);
@@ -147,6 +149,7 @@ function BillEnterAiScan({
                 setScanLoading(false);
 
                 form.setFieldsValue(data.data.billForm);
+                setRawAIData(data.data);
                 await form.validateFields(["billlines"], { recursive: true });
 
                 notification.success({
diff --git a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
index a73b19663..734b401a6 100644
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -28,6 +28,7 @@ import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
+import BillAiFeedback from "../bill-ai-feedback/bill-ai-feedback.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -53,6 +54,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const [loading, setLoading] = useState(false);
   const [scanLoading, setScanLoading] = useState(false);
   const [isAiScan, setIsAiScan] = useState(false);
+  const [rawAIData, setRawAIData] = useState(null);
   const client = useApolloClient();
   const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
   const notification = useNotification();
@@ -387,6 +389,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         billlines: []
       });
       setIsAiScan(false);
+      setRawAIData(null);
       // form.resetFields();
     } else {
       toggleModalVisible();
@@ -404,6 +407,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       }
       setScanLoading(false);
       setIsAiScan(false);
+      setRawAIData(null);
       toggleModalVisible();
     }
   };
@@ -429,6 +433,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       }
       setScanLoading(false);
       setIsAiScan(false);
+      setRawAIData(null);
     }
   }, [billEnterModal.open, form, formValues]);
 
@@ -456,6 +461,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
               scanLoading={scanLoading}
               setScanLoading={setScanLoading}
               setIsAiScan={setIsAiScan}
+              setRawAIData={setRawAIData}
             />
           )}
         </Space>
@@ -471,7 +477,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         setLoading(false);
       }}
       footer={
-        <Space>
+        <Space align="top">
+          {isAiScan && <BillAiFeedback billForm={form} rawAIData={rawAIData} />}
           <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
             {t("bills.labels.generatepartslabel")}
           </Checkbox>
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index e216b9cd5..a24453ae0 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -231,13 +231,16 @@
             "overall": "Overall"
           },
           "disclaimer_title": "AI Scan Beta Disclaimer",
+          "feedback_placeholder": "Tell us what worked,  what didn't, and what could be better.",
+          "feedback_prompt": "Was this AI scan helpful?",
           "generic_failure": "Failed to process invoice.",
           "multipage": "The is a multi-page document.  Processing will take a few moments.",
           "processing": "Analyzing Bill",
           "scan": "AI Bill Scanner",
           "scancomplete": "AI Scan Complete",
           "scanfailed": "AI Scan Failed",
-          "scanstarted": "AI Scan Started"
+          "scanstarted": "AI Scan Started",
+          "submit_feedback": "Submit Feedback"
         },
         "bill_lines": "Bill Lines",
         "bill_total": "Bill Total Amount",
@@ -1075,36 +1078,36 @@
         "earlyrorequired.message": "This job requires an early Repair Order to be created before posting to Reynolds. Please use the admin panel to create the early RO first."
       },
       "labels": {
-        "refreshallocations": "Refresh to see DMS Allocations.",
-        "provider_reynolds": "Reynolds",
-        "provider_fortellis": "Fortellis",
-        "provider_cdk": "CDK",
-        "provider_pbs": "PBS",
-        "provider_dms": "DMS",
-        "transport_wss": "(WSS)",
-        "transport_ws": "(WS)",
+        "banner_message": "Posting to {{provider}} | {{transport}} | {{status}}",
         "banner_status_connected": "Connected",
         "banner_status_disconnected": "Disconnected",
-        "banner_message": "Posting to {{provider}} | {{transport}} | {{status}}",
-        "reconnected_export_service": "Reconnected to {{provider}} Export Service",
-        "rr_validation_message": "Repair Order created in Reynolds. Complete validation in Reynolds, then click Finished/Close to finalize.",
-        "rr_validation_notice_title": "Reynolds RO created",
-        "rr_validation_notice_description": "Complete validation in Reynolds, then click Finished/Close to finalize and mark this export complete.",
-        "color_json": "Color JSON",
-        "plain_json": "Plain JSON",
-        "collapse_all": "Collapse All",
-        "expand_all": "Expand All",
-        "log_level": "Log Level",
         "clear_logs": "Clear Logs",
-        "reconnect": "Reconnect",
-        "details": "Details",
-        "hide_details": "Hide details",
-        "copy": "Copy",
+        "collapse_all": "Collapse All",
+        "color_json": "Color JSON",
         "copied": "Copied",
+        "copy": "Copy",
         "copy_request": "Copy Request",
         "copy_response": "Copy Response",
+        "details": "Details",
+        "expand_all": "Expand All",
+        "hide_details": "Hide details",
+        "log_level": "Log Level",
+        "plain_json": "Plain JSON",
+        "provider_cdk": "CDK",
+        "provider_dms": "DMS",
+        "provider_fortellis": "Fortellis",
+        "provider_pbs": "PBS",
+        "provider_reynolds": "Reynolds",
+        "reconnect": "Reconnect",
+        "reconnected_export_service": "Reconnected to {{provider}} Export Service",
+        "refreshallocations": "Refresh to see DMS Allocations.",
         "request_xml": "Request XML",
-        "response_xml": "Response XML"
+        "response_xml": "Response XML",
+        "rr_validation_message": "Repair Order created in Reynolds. Complete validation in Reynolds, then click Finished/Close to finalize.",
+        "rr_validation_notice_description": "Complete validation in Reynolds, then click Finished/Close to finalize and mark this export complete.",
+        "rr_validation_notice_title": "Reynolds RO created",
+        "transport_ws": "(WS)",
+        "transport_wss": "(WSS)"
       }
     },
     "documents": {
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 50b336d37..f16ca40e5 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -231,13 +231,16 @@
             "overall": ""
           },
           "disclaimer_title": "",
+          "feedback_placeholder": "",
+          "feedback_prompt": "",
           "generic_failure": "",
           "multipage": "",
           "processing": "",
           "scan": "",
           "scancomplete": "",
           "scanfailed": "",
-          "scanstarted": ""
+          "scanstarted": "",
+          "submit_feedback": ""
         },
         "bill_lines": "",
         "bill_total": "",
@@ -1075,36 +1078,36 @@
         "earlyrorequired.message": ""
       },
       "labels": {
-        "refreshallocations": "",
-        "provider_reynolds": "",
-        "provider_fortellis": "",
-        "provider_cdk": "",
-        "provider_pbs": "",
-        "provider_dms": "",
-        "transport_wss": "",
-        "transport_ws": "",
+        "banner_message": "",
         "banner_status_connected": "",
         "banner_status_disconnected": "",
-        "banner_message": "",
-        "reconnected_export_service": "",
-        "rr_validation_message": "",
-        "rr_validation_notice_title": "",
-        "rr_validation_notice_description": "",
-        "color_json": "",
-        "plain_json": "",
-        "collapse_all": "",
-        "expand_all": "",
-        "log_level": "",
         "clear_logs": "",
-        "reconnect": "",
-        "details": "",
-        "hide_details": "",
-        "copy": "",
+        "collapse_all": "",
+        "color_json": "",
         "copied": "",
+        "copy": "",
         "copy_request": "",
         "copy_response": "",
+        "details": "",
+        "expand_all": "",
+        "hide_details": "",
+        "log_level": "",
+        "plain_json": "",
+        "provider_cdk": "",
+        "provider_dms": "",
+        "provider_fortellis": "",
+        "provider_pbs": "",
+        "provider_reynolds": "",
+        "reconnect": "",
+        "reconnected_export_service": "",
+        "refreshallocations": "",
         "request_xml": "",
-        "response_xml": ""
+        "response_xml": "",
+        "rr_validation_message": "",
+        "rr_validation_notice_description": "",
+        "rr_validation_notice_title": "",
+        "transport_ws": "",
+        "transport_wss": ""
       }
     },
     "documents": {
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 727d689f8..8004d5e6b 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -231,13 +231,16 @@
             "overall": ""
           },
           "disclaimer_title": "",
+          "feedback_placeholder": "",
+          "feedback_prompt": "",
           "generic_failure": "",
           "multipage": "",
           "processing": "",
           "scan": "",
           "scancomplete": "",
           "scanfailed": "",
-          "scanstarted": ""
+          "scanstarted": "",
+          "submit_feedback": ""
         },
         "bill_lines": "",
         "bill_total": "",
@@ -1075,36 +1078,36 @@
         "earlyrorequired.message": ""
       },
       "labels": {
-        "refreshallocations": "",
-        "provider_reynolds": "",
-        "provider_fortellis": "",
-        "provider_cdk": "",
-        "provider_pbs": "",
-        "provider_dms": "",
-        "transport_wss": "",
-        "transport_ws": "",
+        "banner_message": "",
         "banner_status_connected": "",
         "banner_status_disconnected": "",
-        "banner_message": "",
-        "reconnected_export_service": "",
-        "rr_validation_message": "",
-        "rr_validation_notice_title": "",
-        "rr_validation_notice_description": "",
-        "color_json": "",
-        "plain_json": "",
-        "collapse_all": "",
-        "expand_all": "",
-        "log_level": "",
         "clear_logs": "",
-        "reconnect": "",
-        "details": "",
-        "hide_details": "",
-        "copy": "",
+        "collapse_all": "",
+        "color_json": "",
         "copied": "",
+        "copy": "",
         "copy_request": "",
         "copy_response": "",
+        "details": "",
+        "expand_all": "",
+        "hide_details": "",
+        "log_level": "",
+        "plain_json": "",
+        "provider_cdk": "",
+        "provider_dms": "",
+        "provider_fortellis": "",
+        "provider_pbs": "",
+        "provider_reynolds": "",
+        "reconnect": "",
+        "reconnected_export_service": "",
+        "refreshallocations": "",
         "request_xml": "",
-        "response_xml": ""
+        "response_xml": "",
+        "rr_validation_message": "",
+        "rr_validation_notice_description": "",
+        "rr_validation_notice_title": "",
+        "transport_ws": "",
+        "transport_wss": ""
       }
     },
     "documents": {
diff --git a/localstack/init/10-bootstrap.sh b/localstack/init/10-bootstrap.sh
old mode 100644
new mode 100755
diff --git a/server/ai/bill-ai-feedback.js b/server/ai/bill-ai-feedback.js
new file mode 100644
index 000000000..e136c60f4
--- /dev/null
+++ b/server/ai/bill-ai-feedback.js
@@ -0,0 +1,72 @@
+const { isString } = require("lodash");
+const { sendServerEmail } = require("../email/sendemail");
+const logger = require("../utils/logger");
+const { raw } = require("express");
+
+const SUPPORT_EMAIL = "patrick@imexsystems.ca";
+
+const safeJsonParse = (maybeJson) => {
+    if (!isString(maybeJson)) return null;
+    try {
+        return JSON.parse(maybeJson);
+    } catch {
+        return null;
+    }
+};
+
+
+const handleBillAiFeedback = async (req, res) => {
+    try {
+        const rating = req.body?.rating;
+        const comments = isString(req.body?.comments) ? req.body?.comments?.trim() : "";
+
+        const billFormValues = safeJsonParse(req.body?.billFormValues);
+        const rawAIData = safeJsonParse(req.body?.rawAIData);
+
+        const jobid = billFormValues?.jobid || billFormValues?.jobId || "unknown";
+        const subject = `Bill AI Feedback (${rating === "up" ? "+" : "-"}) jobid=${jobid}`;
+
+        const text = [
+            `User: ${req?.user?.email || "unknown"}`,
+            `Rating: ${rating}`,
+            comments ? `Comments: ${comments}` : "Comments: (none)",
+            "",
+            "Form Values (User):",
+            JSON.stringify(billFormValues, null, 4),
+            "",
+            "Raw AI Data:",
+            JSON.stringify(rawAIData, null, 4)
+        ]
+            .filter(Boolean)
+            .join("\n");
+
+        const attachments = [];
+        if (req.file?.buffer) {
+            attachments.push({
+                filename: req.file.originalname || `bill-${jobid}.pdf`,
+                content: req.file.buffer,
+                contentType: req.file.mimetype || "application/pdf"
+            });
+        }
+
+        await sendServerEmail({
+            to: [SUPPORT_EMAIL],
+            subject,
+            type: "text",
+            text,
+            attachments
+        });
+
+        return res.json({ success: true });
+    } catch (error) {
+        logger.log("bill-ai-feedback-error", "ERROR", req?.user?.email, null, {
+            message: error?.message,
+            stack: error?.stack
+        });
+        return res.status(500).json({ message: "Failed to submit feedback" });
+    }
+};
+
+module.exports = {
+    handleBillAiFeedback
+};
diff --git a/server/ai/bill-ocr/bill-ocr.js b/server/ai/bill-ocr/bill-ocr.js
index 26e77033a..6c1101207 100644
--- a/server/ai/bill-ocr/bill-ocr.js
+++ b/server/ai/bill-ocr/bill-ocr.js
@@ -212,7 +212,8 @@ async function processSinglePageDocument(pdfBuffer) {
 
     return {
         ...processedData,
-        originalTextractResponse: result
+        //Removed as this is a large object that provides minimal value to send to client.
+        // originalTextractResponse: result
     };
 }
 
@@ -392,7 +393,8 @@ async function handleTextractNotification(message) {
                     status: 'COMPLETED',
                     data: {
                         ...processedData,
-                        originalTextractResponse: originalResponse
+                        //Removed as this is a large object that provides minimal value to send to client.
+                        // originalTextractResponse: originalResponse 
                     },
                     completedAt: new Date().toISOString()
                 }
diff --git a/server/email/sendemail.js b/server/email/sendemail.js
index e39a2093c..bcef44c0a 100644
--- a/server/email/sendemail.js
+++ b/server/email/sendemail.js
@@ -44,7 +44,7 @@ const logEmail = async (req, email) => {
   }
 };
 
-const sendServerEmail = async ({ subject, text, to = [] }) => {
+const sendServerEmail = async ({ subject, text, to = [], attachments }) => {
   if (process.env.NODE_ENV === undefined) return;
 
   try {
@@ -57,6 +57,7 @@ const sendServerEmail = async ({ subject, text, to = [] }) => {
         to: ["support@imexsystems.ca", ...to],
         subject: subject,
         text: text,
+        attachments: attachments,
         ses: {
           // optional extra arguments for SendRawEmail
           Tags: [
diff --git a/server/routes/aiRoutes.js b/server/routes/aiRoutes.js
index f06125718..b92b1b69d 100644
--- a/server/routes/aiRoutes.js
+++ b/server/routes/aiRoutes.js
@@ -4,9 +4,14 @@ const multer = require("multer");
 const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
 const withUserGraphQLClientMiddleware = require("../middleware/withUserGraphQLClientMiddleware");
 const { handleBillOcr, handleBillOcrStatus } = require("../ai/bill-ocr/bill-ocr");
+const { handleBillAiFeedback } = require("../ai/bill-ai-feedback");
 
-// Configure multer for form data parsing
-const upload = multer();
+// Configure multer for form data parsing (memory storage)
+const upload = multer({
+	limits: {
+		fileSize: 5 * 1024 * 1024 // 5MB
+	}
+});
 
 router.use(validateFirebaseIdTokenMiddleware);
 router.use(withUserGraphQLClientMiddleware);
@@ -14,4 +19,6 @@ router.use(withUserGraphQLClientMiddleware);
 router.post("/bill-ocr", upload.single('billScan'), handleBillOcr);
 router.get("/bill-ocr/status/:textractJobId", handleBillOcrStatus);
 
+router.post("/bill-feedback", upload.single("billPdf"), handleBillAiFeedback);
+
 module.exports = router;

From 5812d53efc4bf3069f155f11ba782a4726df68e9 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@imexsystems.ca>
Date: Thu, 19 Mar 2026 14:54:40 -0700
Subject: [PATCH 08/10] IO-3515 Improved feedback layout.

---
 .../bill-ai-feedback.component.jsx            | 20 +++++---
 .../bill-enter-modal.container.jsx            | 49 +++++++++++--------
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx b/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx
index 0693937b1..d0e5c591f 100644
--- a/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx
+++ b/client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx
@@ -79,7 +79,7 @@ function BillAiFeedback({ billForm, rawAIData }) {
 
   return (
     <Form form={form} onFinish={submitFeedback} requiredMark={false}>
-      <Space align="top" size="large">
+      <Space wrap align="top" size="small">
         <Form.Item name="rating" label={t("bills.labels.ai.feedback_prompt")} rules={[{ required: true }]}>
           <Radio.Group optionType="button" buttonStyle="solid">
             <Radio.Button value="up">
@@ -91,12 +91,18 @@ function BillAiFeedback({ billForm, rawAIData }) {
           </Radio.Group>
         </Form.Item>
 
-        <Form.Item name="comments">
-          <Input.TextArea rows={1} placeholder={t("bills.labels.ai.feedback_placeholder")} />
-        </Form.Item>
-        <Button onClick={() => form.submit()} loading={submitting} disabled={submitting}>
-          {t("bills.labels.ai.submit_feedback")}
-        </Button>
+        <Space wrap size="small" orientation="vertical">
+          <Form.Item name="comments">
+            <Input.TextArea
+              rows={3}
+              style={{ minWidth: "400px" }}
+              placeholder={t("bills.labels.ai.feedback_placeholder")}
+            />
+          </Form.Item>
+          <Button onClick={() => form.submit()} loading={submitting} disabled={submitting}>
+            {t("bills.labels.ai.submit_feedback")}
+          </Button>
+        </Space>
       </Space>
     </Form>
   );
diff --git a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
index 734b401a6..e4236e354 100644
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -1,6 +1,6 @@
 import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Button, Checkbox, Form, Modal, Space } from "antd";
+import { Button, Checkbox, Divider, Form, Modal, Space } from "antd";
 import _ from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -477,27 +477,34 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         setLoading(false);
       }}
       footer={
-        <Space align="top">
-          {isAiScan && <BillAiFeedback billForm={form} rawAIData={rawAIData} />}
-          <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
-            {t("bills.labels.generatepartslabel")}
-          </Checkbox>
-          <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
-            {t("general.actions.save")}
-          </Button>
-          {billEnterModal.context && billEnterModal.context.id ? null : (
-            <Button
-              type="primary"
-              loading={loading}
-              onClick={() => {
-                setEnterAgain(true);
-              }}
-              id="save-and-new-bill-enter-modal"
-            >
-              {t("general.actions.saveandnew")}
-            </Button>
+        <Space orientation="vertical">
+          {isAiScan && (
+            <>
+              <BillAiFeedback billForm={form} rawAIData={rawAIData} />
+              <Divider orientation="horizontal" />
+            </>
           )}
+          <Space wrap align="top">
+            <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
+              {t("bills.labels.generatepartslabel")}
+            </Checkbox>
+            <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
+            <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
+              {t("general.actions.save")}
+            </Button>
+            {billEnterModal.context && billEnterModal.context.id ? null : (
+              <Button
+                type="primary"
+                loading={loading}
+                onClick={() => {
+                  setEnterAgain(true);
+                }}
+                id="save-and-new-bill-enter-modal"
+              >
+                {t("general.actions.saveandnew")}
+              </Button>
+            )}
+          </Space>
         </Space>
       }
       destroyOnHidden

From 285043a6ba1abea755114fce7ae286a2e0cb29fc Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 18:23:58 -0400
Subject: [PATCH 09/10] feature/IO-3587-Commision-Cut - Improved localstack
 client

---
 _reference/localEmailViewer/README.md         |   15 +-
 _reference/localEmailViewer/index.js          | 1519 ++++++++++++++++-
 _reference/localEmailViewer/package-lock.json |  365 ++++
 _reference/localEmailViewer/package.json      |    3 +-
 4 files changed, 1863 insertions(+), 39 deletions(-)

diff --git a/_reference/localEmailViewer/README.md b/_reference/localEmailViewer/README.md
index 6492c1176..019d6f946 100644
--- a/_reference/localEmailViewer/README.md
+++ b/_reference/localEmailViewer/README.md
@@ -3,6 +3,7 @@ This app connects to your Docker LocalStack endpoints and gives you a compact in
 - SES generated emails
 - CloudWatch log groups, streams, and recent events
 - Secrets Manager secrets and values
+- S3 buckets and object previews
 
 ```shell
 npm start
@@ -21,9 +22,14 @@ Features:
 - SES email workspace with manual refresh, live refresh, search, HTML/text/raw views,
   attachment downloads, and new-message highlighting
 - CloudWatch Logs workspace with log group selection, stream filtering, adjustable time window,
-  adjustable event limit, live refresh, and in-browser log search
+  adjustable event limit, live refresh, in-browser log search, log-level highlighting, wrap toggle,
+  and optional tail-to-newest mode
 - Secrets Manager workspace with live refresh, search, expandable secret metadata, lazy-loaded
-  secret values, and copyable JSON/text values
+  secret values, masked-by-default secret viewing, and quick copy actions
+- S3 Explorer workspace with bucket selection, prefix filtering, object search, lazy object
+  previews,
+  object key/URI copy actions, and downloads
+- Shared LocalStack service health strip plus a reset action for clearing saved viewer state
 - Compact single-page UI for switching between the local stack tools you use most
 
 Optional environment variables:
@@ -40,4 +46,9 @@ CLOUDWATCH_VIEWER_WINDOW_MS=900000
 CLOUDWATCH_VIEWER_LIMIT=200
 SECRETS_VIEWER_ENDPOINT=http://localhost:4566
 SECRETS_VIEWER_REGION=ca-central-1
+S3_VIEWER_ENDPOINT=http://localhost:4566
+S3_VIEWER_REGION=ca-central-1
+S3_VIEWER_BUCKET=
+S3_VIEWER_PREVIEW_BYTES=262144
+S3_VIEWER_IMAGE_PREVIEW_BYTES=1048576
 ```
diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index f45eab624..64b72fbd7 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -7,6 +7,13 @@ import {
   FilterLogEventsCommand
 } from "@aws-sdk/client-cloudwatch-logs";
 import { GetSecretValueCommand, ListSecretsCommand, SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
+import {
+  GetObjectCommand,
+  HeadObjectCommand,
+  ListBucketsCommand,
+  ListObjectsV2Command,
+  S3Client
+} from "@aws-sdk/client-s3";
 import { simpleParser } from "mailparser";
 
 const app = express();
@@ -22,6 +29,11 @@ const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW
 const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
 const SECRETS_ENDPOINT = process.env.SECRETS_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
 const SECRETS_REGION = process.env.SECRETS_VIEWER_REGION || CLOUDWATCH_REGION;
+const S3_ENDPOINT = process.env.S3_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
+const S3_REGION = process.env.S3_VIEWER_REGION || CLOUDWATCH_REGION;
+const S3_DEFAULT_BUCKET = process.env.S3_VIEWER_BUCKET || "";
+const S3_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_PREVIEW_BYTES || 256 * 1024);
+const S3_IMAGE_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_IMAGE_PREVIEW_BYTES || 1024 * 1024);
 const LOCALSTACK_CREDENTIALS = {
   accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
@@ -36,6 +48,12 @@ const secretsManagerClient = new SecretsManagerClient({
   endpoint: SECRETS_ENDPOINT,
   credentials: LOCALSTACK_CREDENTIALS
 });
+const s3Client = new S3Client({
+  region: S3_REGION,
+  endpoint: S3_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS,
+  forcePathStyle: true
+});
 
 app.use((req, res, next) => {
   res.set("Cache-Control", "no-store");
@@ -57,13 +75,26 @@ app.get("/health", (req, res) => {
     endpoints: {
       ses: SES_ENDPOINT,
       cloudWatchLogs: CLOUDWATCH_ENDPOINT,
-      secretsManager: SECRETS_ENDPOINT
+      secretsManager: SECRETS_ENDPOINT,
+      s3: S3_ENDPOINT
     },
     port: PORT,
     defaultRefreshMs: DEFAULT_REFRESH_MS
   });
 });
 
+app.get("/api/service-health", async (req, res) => {
+  try {
+    res.json(await loadServiceHealthSummary());
+  } catch (error) {
+    console.error("Error fetching service health:", error);
+    res.status(502).json({
+      error: "Unable to fetch LocalStack service health",
+      details: error.message
+    });
+  }
+});
+
 app.get("/api/messages", async (req, res) => {
   try {
     res.json(await loadMessages());
@@ -236,6 +267,108 @@ app.get("/api/secrets/value", async (req, res) => {
   }
 });
 
+app.get("/api/s3/buckets", async (req, res) => {
+  try {
+    res.json(await loadS3Buckets());
+  } catch (error) {
+    console.error("Error fetching S3 buckets:", error);
+    res.status(502).json({
+      error: "Unable to fetch S3 buckets from LocalStack",
+      details: error.message,
+      endpoint: S3_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/objects", async (req, res) => {
+  try {
+    const bucket = String(req.query.bucket || "");
+    const prefix = String(req.query.prefix || "");
+
+    if (!bucket) {
+      res.status(400).json({ error: "Query parameter 'bucket' is required" });
+      return;
+    }
+
+    res.json(await loadS3Objects({ bucket, prefix }));
+  } catch (error) {
+    console.error("Error fetching S3 objects:", error);
+    res.status(502).json({
+      error: "Unable to fetch S3 objects from LocalStack",
+      details: error.message,
+      endpoint: S3_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/object", async (req, res) => {
+  try {
+    const bucket = String(req.query.bucket || "");
+    const key = String(req.query.key || "");
+
+    if (!bucket || !key) {
+      res.status(400).json({ error: "Query parameters 'bucket' and 'key' are required" });
+      return;
+    }
+
+    res.json(await loadS3ObjectPreview({ bucket, key }));
+  } catch (error) {
+    if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
+      res.status(404).json({
+        error: "Object not found",
+        details: error.message,
+        endpoint: S3_ENDPOINT
+      });
+      return;
+    }
+
+    console.error("Error fetching S3 object preview:", error);
+    res.status(502).json({
+      error: "Unable to fetch S3 object preview from LocalStack",
+      details: error.message,
+      endpoint: S3_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/download", async (req, res) => {
+  try {
+    const bucket = String(req.query.bucket || "");
+    const key = String(req.query.key || "");
+    const inline = String(req.query.inline || "") === "1";
+
+    if (!bucket || !key) {
+      res.status(400).type("text/plain").send("Query parameters 'bucket' and 'key' are required");
+      return;
+    }
+
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: bucket,
+        Key: key
+      })
+    );
+    const content = Buffer.from(await response.Body.transformToByteArray());
+    const filename = basenameFromKey(key);
+
+    res.setHeader("Content-Type", response.ContentType || guessObjectContentType(key));
+    res.setHeader(
+      "Content-Disposition",
+      inline ? buildInlineDisposition(filename) : buildAttachmentDisposition(filename)
+    );
+    res.setHeader("Content-Length", String(content.length));
+    res.send(content);
+  } catch (error) {
+    if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
+      res.status(404).type("text/plain").send("Object not found");
+      return;
+    }
+
+    console.error("Error downloading S3 object:", error);
+    res.status(502).type("text/plain").send(`Unable to download S3 object: ${error.message}`);
+  }
+});
+
 async function loadMessages() {
   const startedAt = Date.now();
   const sesMessages = await fetchSesMessages();
@@ -496,6 +629,192 @@ async function loadSecretValue(secretId) {
   };
 }
 
+async function loadS3Buckets() {
+  const startedAt = Date.now();
+  const response = await s3Client.send(new ListBucketsCommand({}));
+  const buckets = (response.Buckets || [])
+    .map((bucket) => ({
+      name: bucket.Name || "",
+      creationDate: normalizeTimestamp(bucket.CreationDate)
+    }))
+    .filter((bucket) => bucket.name)
+    .sort((left, right) => left.name.localeCompare(right.name));
+
+  return {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalBuckets: buckets.length,
+    buckets
+  };
+}
+
+async function loadS3Objects({ bucket, prefix }) {
+  const startedAt = Date.now();
+  const objects = [];
+  let continuationToken;
+  let pageCount = 0;
+
+  do {
+    const response = await s3Client.send(
+      new ListObjectsV2Command({
+        Bucket: bucket,
+        Prefix: prefix || undefined,
+        ContinuationToken: continuationToken,
+        MaxKeys: 200
+      })
+    );
+
+    objects.push(
+      ...(response.Contents || []).map((object, index) => ({
+        id: `${bucket}::${object.Key || index}`,
+        bucket,
+        key: object.Key || "",
+        size: object.Size || 0,
+        lastModified: normalizeTimestamp(object.LastModified),
+        etag: String(object.ETag || "").replace(/^"|"$/g, ""),
+        storageClass: object.StorageClass || "STANDARD"
+      }))
+    );
+
+    continuationToken = response.IsTruncated ? response.NextContinuationToken : undefined;
+    pageCount += 1;
+  } while (continuationToken && pageCount < 10 && objects.length < 1000);
+
+  objects.sort((left, right) => {
+    const leftTime = Date.parse(left.lastModified || 0) || 0;
+    const rightTime = Date.parse(right.lastModified || 0) || 0;
+
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+
+    return left.key.localeCompare(right.key);
+  });
+
+  return {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    bucket,
+    prefix,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalObjects: objects.length,
+    latestTimestamp: objects[0]?.lastModified || "",
+    objects
+  };
+}
+
+async function loadS3ObjectPreview({ bucket, key }) {
+  const startedAt = Date.now();
+  const head = await s3Client.send(
+    new HeadObjectCommand({
+      Bucket: bucket,
+      Key: key
+    })
+  );
+
+  const contentType = head.ContentType || guessObjectContentType(key);
+  const contentLength = Number(head.ContentLength || 0);
+  const previewType = resolveS3PreviewType(contentType, key);
+  const result = {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    bucket,
+    key,
+    fetchDurationMs: 0,
+    contentType,
+    contentLength,
+    etag: String(head.ETag || "").replace(/^"|"$/g, ""),
+    lastModified: normalizeTimestamp(head.LastModified),
+    metadata: head.Metadata || {},
+    previewType,
+    previewText: "",
+    imageDataUrl: "",
+    truncated: false
+  };
+
+  const shouldLoadTextPreview = previewType === "json" || previewType === "text" || previewType === "html";
+  const shouldLoadImagePreview =
+    previewType === "image" && contentLength > 0 && contentLength <= S3_IMAGE_PREVIEW_MAX_BYTES;
+
+  if ((shouldLoadTextPreview || shouldLoadImagePreview) && contentLength > 0) {
+    const previewBytes = Math.max(1, Math.min(contentLength || S3_PREVIEW_MAX_BYTES, S3_PREVIEW_MAX_BYTES));
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: bucket,
+        Key: key,
+        Range: `bytes=0-${previewBytes - 1}`
+      })
+    );
+    const content = Buffer.from(await response.Body.transformToByteArray());
+    result.truncated = contentLength > content.length;
+
+    if (shouldLoadImagePreview) {
+      result.imageDataUrl = `data:${contentType};base64,${content.toString("base64")}`;
+    } else {
+      result.previewText = content.toString("utf8");
+    }
+  }
+
+  result.fetchDurationMs = Date.now() - startedAt;
+  return result;
+}
+
+async function loadServiceHealthSummary() {
+  const startedAt = Date.now();
+  const [sesResult, logsResult, secretsResult, s3Result] = await Promise.allSettled([
+    fetchSesMessages(),
+    loadLogGroups(),
+    loadSecrets(),
+    loadS3Buckets()
+  ]);
+
+  return {
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    services: {
+      emails: summarizeHealthResult({
+        icon: "✉️",
+        panel: "emails",
+        label: "SES Emails",
+        result: sesResult,
+        count: sesResult.status === "fulfilled" ? sesResult.value.length : 0,
+        detail: SES_ENDPOINT,
+        noun: "email"
+      }),
+      logs: summarizeHealthResult({
+        icon: "📜",
+        panel: "logs",
+        label: "CloudWatch Logs",
+        result: logsResult,
+        count: logsResult.status === "fulfilled" ? logsResult.value.length : 0,
+        detail: `${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`,
+        noun: "group"
+      }),
+      secrets: summarizeHealthResult({
+        icon: "🔐",
+        panel: "secrets",
+        label: "Secrets Manager",
+        result: secretsResult,
+        count: secretsResult.status === "fulfilled" ? secretsResult.value.totalSecrets : 0,
+        detail: `${SECRETS_ENDPOINT} (${SECRETS_REGION})`,
+        noun: "secret"
+      }),
+      s3: summarizeHealthResult({
+        icon: "🪣",
+        panel: "s3",
+        label: "S3 Explorer",
+        result: s3Result,
+        count: s3Result.status === "fulfilled" ? s3Result.value.totalBuckets : 0,
+        detail: `${S3_ENDPOINT} (${S3_REGION})`,
+        noun: "bucket"
+      })
+    }
+  };
+}
+
 async function findSesMessageById(id) {
   const messages = await fetchSesMessages();
   return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
@@ -612,6 +931,116 @@ function buildAttachmentDisposition(filename) {
   return `attachment; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "attachment")}`;
 }
 
+function buildInlineDisposition(filename) {
+  const fallback = String(filename || "file")
+    .replace(/[^\x20-\x7e]/g, "_")
+    .replace(/["\\]/g, "_");
+
+  return `inline; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "file")}`;
+}
+
+function basenameFromKey(key) {
+  const value = String(key || "");
+  const parts = value.split("/").filter(Boolean);
+  return parts[parts.length - 1] || "file";
+}
+
+function guessObjectContentType(key) {
+  const normalizedKey = String(key || "").toLowerCase();
+
+  if (normalizedKey.endsWith(".json")) {
+    return "application/json";
+  }
+
+  if (normalizedKey.endsWith(".csv")) {
+    return "text/csv";
+  }
+
+  if (normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
+    return "text/html";
+  }
+
+  if (normalizedKey.endsWith(".txt") || normalizedKey.endsWith(".log") || normalizedKey.endsWith(".md")) {
+    return "text/plain";
+  }
+
+  if (normalizedKey.endsWith(".png")) {
+    return "image/png";
+  }
+
+  if (normalizedKey.endsWith(".jpg") || normalizedKey.endsWith(".jpeg")) {
+    return "image/jpeg";
+  }
+
+  if (normalizedKey.endsWith(".gif")) {
+    return "image/gif";
+  }
+
+  if (normalizedKey.endsWith(".webp")) {
+    return "image/webp";
+  }
+
+  if (normalizedKey.endsWith(".svg")) {
+    return "image/svg+xml";
+  }
+
+  if (normalizedKey.endsWith(".pdf")) {
+    return "application/pdf";
+  }
+
+  return "application/octet-stream";
+}
+
+function resolveS3PreviewType(contentType, key) {
+  const normalizedType = String(contentType || "").toLowerCase();
+  const normalizedKey = String(key || "").toLowerCase();
+
+  if (normalizedType.includes("json") || normalizedKey.endsWith(".json")) {
+    return "json";
+  }
+
+  if (normalizedType.startsWith("image/")) {
+    return "image";
+  }
+
+  if (normalizedType.includes("html") || normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
+    return "html";
+  }
+
+  if (
+    normalizedType.startsWith("text/") ||
+    [".txt", ".log", ".csv", ".xml", ".yml", ".yaml", ".md"].some((extension) => normalizedKey.endsWith(extension))
+  ) {
+    return "text";
+  }
+
+  return "binary";
+}
+
+function summarizeHealthResult({ icon, panel, label, result, count, detail, noun }) {
+  if (result.status === "fulfilled") {
+    return {
+      ok: true,
+      icon,
+      panel,
+      label,
+      count,
+      summary: `${count} ${noun}${count === 1 ? "" : "s"}`,
+      detail
+    };
+  }
+
+  return {
+    ok: false,
+    icon,
+    panel,
+    label,
+    count: 0,
+    summary: "Needs attention",
+    detail: result.reason?.message || detail
+  };
+}
+
 function normalizeTimestamp(value) {
   if (!value) {
     return "";
@@ -715,6 +1144,9 @@ function getClientConfig() {
     cloudWatchRegion: CLOUDWATCH_REGION,
     secretsEndpoint: SECRETS_ENDPOINT,
     secretsRegion: SECRETS_REGION,
+    s3Endpoint: S3_ENDPOINT,
+    s3Region: S3_REGION,
+    defaultS3Bucket: S3_DEFAULT_BUCKET,
     defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
     defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
     defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
@@ -739,12 +1171,15 @@ function renderHtml() {
             <h1>Inspector</h1>
           </div>
           <div class="heroTopRow">
-            <div id="workspaceTabs" class="workspaceTabs" role="tablist" aria-label="Inspector views">
-              <button class="workspaceTab active" type="button" data-panel="emails" aria-pressed="true">✉️ SES Emails</button>
-              <button class="workspaceTab" type="button" data-panel="logs" aria-pressed="false">📜 CloudWatch Logs</button>
-              <button class="workspaceTab" type="button" data-panel="secrets" aria-pressed="false">🔐 Secrets Manager</button>
+            <div class="heroActions">
+              <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
+              <button id="resetStateButton" class="ghost" type="button">🧹 Reset saved state</button>
             </div>
-            <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
+          </div>
+          <div class="heroStatusRow">
+            <span class="heroStatusLabel">Stack</span>
+            <div id="healthStrip" class="healthStrip" aria-live="polite"></div>
+            <button id="healthRefreshButton" class="mini healthRefreshButton" type="button" title="Refresh service health" aria-label="Refresh service health">🩺</button>
           </div>
         </div>
       </header>
@@ -836,6 +1271,8 @@ function renderHtml() {
           <div class="row">
             <input id="logsSearchInput" class="search" type="search" placeholder="Search stream name or log content..." autocomplete="off">
             <button id="logsClearSearchButton" class="ghost" type="button">Clear</button>
+            <label class="chip"><input id="logsWrapToggle" type="checkbox" checked> Wrap lines</label>
+            <label class="chip"><input id="logsTailToggle" type="checkbox"> Tail newest</label>
             <button id="logsExpandAllButton" class="ghost" type="button">Open all</button>
             <button id="logsCollapseAllButton" class="ghost" type="button">Close all</button>
           </div>
@@ -902,6 +1339,56 @@ function renderHtml() {
           </div>
         </div>
       </section>
+
+      <section id="s3Panel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="s3RefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="s3AutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="s3IntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="s3StatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <label class="chip">Bucket
+              <select id="s3BucketSelect"></select>
+            </label>
+            <input id="s3PrefixInput" class="search searchCompact" type="search" placeholder="Prefix filter (optional)" autocomplete="off">
+            <button id="s3ApplyPrefixButton" class="ghost" type="button">Apply prefix</button>
+          </div>
+          <div class="row">
+            <input id="s3SearchInput" class="search" type="search" placeholder="Search object key, storage class, or etag..." autocomplete="off">
+            <button id="s3ClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="s3ExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="s3CollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Objects</span><strong id="s3TotalStat">0</strong><small id="s3VisibleStat">0 visible</small></article>
+          <article class="stat"><span>Buckets</span><strong id="s3BucketsStat">0</strong><small>Available in LocalStack</small></article>
+          <article class="stat"><span>Latest</span><strong id="s3NewestStat" class="small">No objects</strong><small id="s3UpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="s3FetchStat" class="small">Idle</strong><small id="s3FetchDetail">Endpoint: ${escapeHtml(S3_ENDPOINT)} (${escapeHtml(S3_REGION)})</small></article>
+        </section>
+
+        <div id="s3ContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="s3Banner" class="banner" hidden></div>
+            <div id="s3Empty" class="empty" hidden></div>
+            <section id="s3List" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="s3ScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
 
     <script type="module" src="/app.js"></script>
@@ -911,7 +1398,7 @@ function renderHtml() {
 
 function renderStyles() {
   return `
-    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--secret-shell:linear-gradient(180deg,rgba(239,251,246,.98),rgba(247,253,249,.99));--secret-body:#f6fcf8;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--secret-line:rgba(31,143,101,.2);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--secret:#1f8f65;--secret-soft:rgba(31,143,101,.1);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);--secret-shadow:0 16px 32px rgba(31,143,101,.12);}
+    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--secret-shell:linear-gradient(180deg,rgba(239,251,246,.98),rgba(247,253,249,.99));--secret-body:#f6fcf8;--bucket-shell:linear-gradient(180deg,rgba(255,249,232,.98),rgba(255,252,243,.99));--bucket-body:#fffcf2;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--secret-line:rgba(31,143,101,.2);--bucket-line:rgba(181,137,37,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--secret:#1f8f65;--secret-soft:rgba(31,143,101,.1);--bucket:#9d6b00;--bucket-soft:rgba(181,137,37,.12);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);--secret-shadow:0 16px 32px rgba(31,143,101,.12);--bucket-shadow:0 16px 32px rgba(181,137,37,.12);}
     *{box-sizing:border-box}
     html,body{margin:0;height:100%;overflow:hidden}
     body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
@@ -929,11 +1416,21 @@ function renderStyles() {
     h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.85rem);line-height:.96;letter-spacing:-.05em}
     .lede{margin:8px 0 0;max-width:54ch;color:var(--muted);font-size:.92rem}
     .heroTopRow{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .heroActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .heroStatusRow{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;align-items:center}
+    .heroStatusLabel{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
     .helper{margin:0;color:var(--muted);font-size:.89rem}
-    .workspaceTabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:999px;background:rgba(31,41,51,.05)}
-    .workspaceTab,.primary,.ghost,.mini,.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
-    .workspaceTab{min-height:32px;padding:0 12px;background:transparent;color:var(--muted);font-weight:700}
-    .workspaceTab.active{background:#fff;border-color:rgba(31,41,51,.08);color:var(--ink)}
+    .healthStrip{display:flex;flex:1 1 520px;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
+    .healthBadge{display:inline-flex;align-items:center;gap:8px;min-height:30px;max-width:100%;padding:0 10px;border-radius:999px;border:1px solid rgba(31,41,51,.1);background:rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(15,23,42,.06);text-align:left;transition:transform .12s ease,background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
+    .healthBadgeName{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;white-space:nowrap}
+    .healthBadgeSummary{min-width:0;overflow:hidden;color:var(--muted);font-size:.78rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
+    .healthBadge.ok{border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.1)}
+    .healthBadge.bad{border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.1)}
+    .healthBadge.warn{border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.1)}
+    .healthBadge.active{border-color:rgba(207,109,60,.28);background:rgba(207,109,60,.16);box-shadow:0 10px 24px rgba(207,109,60,.12)}
+    .healthBadge.active .healthBadgeName,.healthBadge.active .healthBadgeSummary{color:var(--ink)}
+    .healthRefreshButton{flex:0 0 auto;padding:0 10px}
+    .primary,.ghost,.mini,.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
     .themeToggle{white-space:nowrap}
     .workspacePanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-height:0}
     .workspacePanel[hidden]{display:none}
@@ -956,6 +1453,7 @@ function renderStyles() {
     .chip input{margin:0;accent-color:var(--accent)}
     .chip select{border:none;background:transparent;outline:none;color:var(--ink)}
     .search{flex:1 1 260px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
+    .searchCompact{flex:1 1 220px}
     .status{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.86rem;font-weight:600}
     .status.ok{color:var(--ok);border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.08)}
     .status.warn{color:var(--warn);border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.08)}
@@ -999,21 +1497,32 @@ function renderStyles() {
     .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
     .logEvent{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
     .secretCard{background:var(--secret-shell);border:1px solid var(--secret-line);box-shadow:var(--secret-shadow)}
+    .s3Card{background:var(--bucket-shell);border:1px solid var(--bucket-line);box-shadow:var(--bucket-shadow)}
     .logSummary{list-style:none;display:grid;gap:7px;padding:10px 12px;cursor:pointer}
     .logSummary::-webkit-details-marker{display:none}
     .secretSummary{background:linear-gradient(180deg,rgba(244,253,248,.9),rgba(236,249,242,.96))}
+    .s3Summary{background:linear-gradient(180deg,rgba(255,251,238,.92),rgba(255,246,223,.98))}
     .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
     .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
     .logSummaryActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
     .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .secretTag{background:var(--secret-soft);color:var(--secret);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .bucketTag{background:var(--bucket-soft);color:var(--bucket);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
     .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
     .secretBody{border-top-color:rgba(31,143,101,.14);background:var(--secret-body)}
+    .s3Body{border-top-color:rgba(181,137,37,.18);background:var(--bucket-body)}
     .logCopyButton{box-shadow:none}
     .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
     .secretValuePanel{display:grid;gap:10px}
     .secretValuePanel pre{border-radius:12px;border:1px solid rgba(31,143,101,.14);padding:12px;background:linear-gradient(180deg,rgba(31,143,101,.04),transparent 140px),#fff}
+    .s3PreviewPanel{display:grid;gap:10px}
+    .s3PreviewImage{max-width:min(100%,640px);border-radius:12px;border:1px solid rgba(181,137,37,.16);background:#fff}
+    .logBody.wrapOff pre{white-space:pre;word-break:normal}
+    .tag.levelError{background:rgba(179,58,58,.12);color:var(--bad)}
+    .tag.levelWarn{background:rgba(157,95,0,.12);color:var(--warn)}
+    .tag.levelInfo{background:rgba(48,113,169,.12);color:var(--info)}
+    .tag.levelDebug{background:rgba(96,112,128,.12);color:var(--muted)}
     .jsonSyntax .jsonKey{color:#b55f2d}
     .jsonSyntax .jsonString{color:#1f8f65}
     .jsonSyntax .jsonNumber{color:#2f6ea9}
@@ -1030,10 +1539,12 @@ function renderStyles() {
     body[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(50,35,28,.96),rgba(31,25,22,.98));border-color:rgba(207,109,60,.24);box-shadow:0 18px 34px rgba(0,0,0,.34)}
     body[data-theme="dark"] .logEvent{background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(14,24,36,.98));border-color:rgba(73,144,204,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
     body[data-theme="dark"] .secretCard{background:linear-gradient(180deg,rgba(19,39,31,.96),rgba(14,30,24,.98));border-color:rgba(64,170,126,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
-    body[data-theme="dark"] .workspaceTabs{background:rgba(148,163,184,.12)}
-    body[data-theme="dark"] .workspaceTab,
+    body[data-theme="dark"] .s3Card{background:linear-gradient(180deg,rgba(52,42,17,.96),rgba(37,30,13,.98));border-color:rgba(181,137,37,.24);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .healthBadge{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.18);box-shadow:0 10px 22px rgba(0,0,0,.28)}
+    body[data-theme="dark"] .healthBadge.active{border-color:rgba(207,109,60,.32);background:rgba(207,109,60,.18);box-shadow:0 12px 26px rgba(0,0,0,.3)}
+    body[data-theme="dark"] .healthBadge.active .healthBadgeName,
+    body[data-theme="dark"] .healthBadge.active .healthBadgeSummary{color:#f8ede6}
     body[data-theme="dark"] .tab{color:#aab8c8}
-    body[data-theme="dark"] .workspaceTab.active,
     body[data-theme="dark"] .tab.active,
     body[data-theme="dark"] .ghost,
     body[data-theme="dark"] .mini,
@@ -1044,7 +1555,6 @@ function renderStyles() {
     body[data-theme="dark"] .search::placeholder{color:#9fb0c2}
     body[data-theme="dark"] .ghost,
     body[data-theme="dark"] .mini,
-    body[data-theme="dark"] .workspaceTab.active,
     body[data-theme="dark"] .tab.active{border-color:rgba(148,163,184,.18)}
     body[data-theme="dark"] .summary{background:linear-gradient(180deg,rgba(58,40,31,.88),rgba(45,33,28,.96))}
     body[data-theme="dark"] .body{background:#211a17;border-top-color:rgba(207,109,60,.18)}
@@ -1052,6 +1562,8 @@ function renderStyles() {
     body[data-theme="dark"] .logBody{background:#13212d;border-top-color:rgba(73,144,204,.18)}
     body[data-theme="dark"] .secretSummary{background:linear-gradient(180deg,rgba(21,43,34,.94),rgba(16,34,27,.98))}
     body[data-theme="dark"] .secretBody{background:#12241c;border-top-color:rgba(64,170,126,.18)}
+    body[data-theme="dark"] .s3Summary{background:linear-gradient(180deg,rgba(53,41,19,.94),rgba(39,31,15,.98))}
+    body[data-theme="dark"] .s3Body{background:#241d10;border-top-color:rgba(181,137,37,.18)}
     body[data-theme="dark"] .metaCard{background:rgba(17,25,35,.64);border-color:rgba(148,163,184,.14)}
     body[data-theme="dark"] .attachment{background:rgba(50,35,28,.9);border-color:rgba(207,109,60,.18)}
     body[data-theme="dark"] .attachmentLink{color:#f6c4a9}
@@ -1060,6 +1572,7 @@ function renderStyles() {
     body[data-theme="dark"] pre,
     body[data-theme="dark"] .logBody pre{background:linear-gradient(180deg,rgba(73,144,204,.06),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
     body[data-theme="dark"] .secretValuePanel pre{background:linear-gradient(180deg,rgba(64,170,126,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .s3PreviewPanel pre{background:linear-gradient(180deg,rgba(181,137,37,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
     body[data-theme="dark"] .panel{border-color:rgba(148,163,184,.14)}
     body[data-theme="dark"] .banner,
     body[data-theme="dark"] .empty{background:rgba(15,21,30,.82);border-color:rgba(148,163,184,.16)}
@@ -1067,6 +1580,7 @@ function renderStyles() {
     body[data-theme="dark"] .tag{background:rgba(207,109,60,.14);color:#f0c2aa}
     body[data-theme="dark"] .logTag{background:rgba(73,144,204,.16);color:#93cfff}
     body[data-theme="dark"] .secretTag{background:rgba(64,170,126,.16);color:#9fe0be}
+    body[data-theme="dark"] .bucketTag{background:rgba(181,137,37,.16);color:#f1d38c}
     body[data-theme="dark"] .preview,
     body[data-theme="dark"] .logPreview,
     body[data-theme="dark"] .metaCard dd,
@@ -1084,12 +1598,11 @@ function renderStyles() {
     body[data-theme="dark"] .stat small,
     body[data-theme="dark"] .stat span,
     body[data-theme="dark"] .chip,
-    body[data-theme="dark"] .workspaceTab,
     body[data-theme="dark"] .tab{color:#aab8c8}
     body[data-theme="dark"] .paneTopButton{border-color:rgba(255,255,255,.18);background:rgba(8,12,18,.58);color:#edf2f7}
     body[data-theme="dark"] .paneTopButton.visible:hover{background:rgba(8,12,18,.8)}
     @media (max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
-    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row{align-items:stretch}.stats{grid-template-columns:1fr}.heroTopRow{justify-content:stretch;flex-basis:100%}.workspaceTab,.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.logSummaryTop,.logSummaryActions{align-items:flex-start}.contentPane{min-height:300px}iframe{min-height:420px}}
+    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row,.heroActions{align-items:stretch}.heroTopRow{justify-content:stretch;flex-basis:100%}.heroStatusRow{align-items:flex-start}.heroStatusLabel,.healthStrip{flex-basis:100%}.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.healthBadge{justify-content:flex-start}.logSummaryTop,.logSummaryActions{align-items:flex-start}.contentPane{min-height:300px}iframe{min-height:420px}}
   `;
 }
 
@@ -1108,17 +1621,21 @@ function clientApp(config) {
   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()
   };
 
@@ -1155,6 +1672,8 @@ function clientApp(config) {
     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,
@@ -1180,15 +1699,47 @@ function clientApp(config) {
     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 = {
-    workspaceTabs: document.getElementById("workspaceTabs"),
     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"),
@@ -1218,6 +1769,8 @@ function clientApp(config) {
     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"),
@@ -1252,7 +1805,30 @@ function clientApp(config) {
     secretsBanner: document.getElementById("secretsBanner"),
     secretsEmpty: document.getElementById("secretsEmpty"),
     secretsList: document.getElementById("secretsList"),
-    secretsContentPane: document.getElementById("secretsContentPane")
+    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;
@@ -1263,45 +1839,72 @@ function clientApp(config) {
   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.workspaceTabs.addEventListener("click", async (event) => {
-      const button = event.target.closest("button[data-panel]");
+    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.panel);
-    });
-
-    el.themeToggle.addEventListener("click", () => {
-      applyTheme(appState.theme === "dark" ? "light" : "dark");
+      await setPanel(button.dataset.healthPanel);
     });
 
     el.refreshButton.addEventListener("click", () => refreshMessages("manual"));
@@ -1424,6 +2027,17 @@ function clientApp(config) {
       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();
@@ -1554,6 +2168,139 @@ function clientApp(config) {
           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");
       }
     });
 
@@ -1561,11 +2308,24 @@ function clientApp(config) {
       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;
       }
 
@@ -1612,6 +2372,11 @@ function clientApp(config) {
           return;
         }
 
+        if (appState.panel === "s3") {
+          refreshS3("keyboard");
+          return;
+        }
+
         refreshMessages("keyboard");
       }
     });
@@ -1619,6 +2384,7 @@ function clientApp(config) {
     updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
     updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
     updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
+    updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
   }
 
   async function setPanel(panel) {
@@ -1627,6 +2393,8 @@ function clientApp(config) {
         await ensureLogsReady();
       } else if (panel === "secrets") {
         await ensureSecretsReady();
+      } else if (panel === "s3") {
+        await ensureS3Ready();
       }
 
       renderWorkspace();
@@ -1641,6 +2409,8 @@ function clientApp(config) {
       await ensureLogsReady();
     } else if (panel === "secrets") {
       await ensureSecretsReady();
+    } else if (panel === "s3") {
+      await ensureS3Ready();
     } else if (!state.updatedAt && !state.loading) {
       await refreshMessages("panel");
     }
@@ -1648,21 +2418,19 @@ function clientApp(config) {
     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.workspaceTabs.querySelectorAll("button[data-panel]").forEach((button) => {
-      const active = button.dataset.panel === appState.panel;
-      button.classList.toggle("active", active);
-      button.setAttribute("aria-pressed", active ? "true" : "false");
-    });
+    el.s3Panel.hidden = appState.panel !== "s3";
+    renderHealthStrip();
   }
 
   async function ensureLogsReady() {
@@ -1687,6 +2455,19 @@ function clientApp(config) {
     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;
@@ -1868,6 +2649,10 @@ function clientApp(config) {
       logsState.loading = false;
       scheduleLogsRefresh();
       renderLogsAll({ renderList: shouldRenderList });
+
+      if (shouldRenderList && logsState.tailNewest) {
+        scrollPaneToTop(el.logsContentPane);
+      }
     }
   }
 
@@ -1917,6 +2702,132 @@ function clientApp(config) {
     }
   }
 
+  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
@@ -1935,6 +2846,15 @@ function clientApp(config) {
     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)));
@@ -1967,6 +2887,19 @@ function clientApp(config) {
         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) {
@@ -2024,6 +2957,14 @@ function clientApp(config) {
       .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,
@@ -2058,6 +2999,10 @@ function clientApp(config) {
       .toLowerCase();
   }
 
+  function s3Haystack(object) {
+    return [object.bucket, object.key, object.storageClass, object.etag].filter(Boolean).join(" ").toLowerCase();
+  }
+
   function scheduleRefresh() {
     window.clearTimeout(state.timer);
 
@@ -2088,6 +3033,16 @@ function clientApp(config) {
     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();
@@ -2122,6 +3077,50 @@ function clientApp(config) {
     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" : ""}`;
@@ -2148,6 +3147,25 @@ function clientApp(config) {
     }
 
     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() {
@@ -2166,6 +3184,13 @@ function clientApp(config) {
     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...";
@@ -2235,6 +3260,29 @@ function clientApp(config) {
     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";
 
@@ -2343,6 +3391,42 @@ function clientApp(config) {
     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";
@@ -2373,6 +3457,16 @@ function clientApp(config) {
     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}` : "";
@@ -2443,7 +3537,39 @@ function clientApp(config) {
     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">
@@ -2451,6 +3577,7 @@ function clientApp(config) {
             <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>
@@ -2459,7 +3586,7 @@ function clientApp(config) {
           </div>
           <p class="logPreview jsonSyntax">${renderLogPreviewContent(event)}</p>
         </summary>
-        <div class="logBody">
+        <div class="logBody ${logsState.wrapLines ? "" : "wrapOff"}">
           <pre class="jsonSyntax">${renderLogBodyContent(event.message)}</pre>
         </div>
       </details>
@@ -2529,6 +3656,62 @@ function clientApp(config) {
     `;
   }
 
+  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", () => {
@@ -2566,6 +3749,25 @@ function clientApp(config) {
     });
   }
 
+  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", () => {
@@ -2704,6 +3906,9 @@ function clientApp(config) {
       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">
@@ -2720,11 +3925,55 @@ function clientApp(config) {
           }
         </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="${valueState.isJson ? "jsonSyntax" : ""}">${valueState.displayHtml}</pre>
+      <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}
     `;
   }
 
@@ -2782,6 +4031,31 @@ function clientApp(config) {
     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();
@@ -2870,6 +4144,10 @@ function clientApp(config) {
     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;
@@ -2967,6 +4245,67 @@ function clientApp(config) {
     }
   }
 
+  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);
@@ -3013,9 +4352,19 @@ function clientApp(config) {
     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"].includes(storedPanel) ? storedPanel : "emails";
+    return ["emails", "logs", "secrets", "s3"].includes(storedPanel) ? storedPanel : "emails";
   }
 
   function getInitialTheme() {
@@ -3072,7 +4421,9 @@ function clientApp(config) {
       auto: logsState.auto,
       interval: logsState.interval,
       windowMs: logsState.windowMs,
-      limit: logsState.limit
+      limit: logsState.limit,
+      wrapLines: logsState.wrapLines,
+      tailNewest: logsState.tailNewest
     });
   }
 
@@ -3084,6 +4435,33 @@ function clientApp(config) {
     });
   }
 
+  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);
@@ -3238,6 +4616,74 @@ function clientApp(config) {
     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);
 
@@ -3329,4 +4775,5 @@ app.listen(PORT, () => {
   console.log(`Watching LocalStack SES endpoint at ${SES_ENDPOINT}`);
   console.log(`Watching LocalStack CloudWatch Logs endpoint at ${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`);
   console.log(`Watching LocalStack Secrets Manager endpoint at ${SECRETS_ENDPOINT} (${SECRETS_REGION})`);
+  console.log(`Watching LocalStack S3 endpoint at ${S3_ENDPOINT} (${S3_REGION})`);
 });
diff --git a/_reference/localEmailViewer/package-lock.json b/_reference/localEmailViewer/package-lock.json
index 2f00ef450..b01591261 100644
--- a/_reference/localEmailViewer/package-lock.json
+++ b/_reference/localEmailViewer/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
+        "@aws-sdk/client-s3": "^3.1013.0",
         "@aws-sdk/client-secrets-manager": "^3.1013.0",
         "express": "^5.1.0",
         "mailparser": "^3.7.4",
@@ -30,6 +31,69 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/@aws-crypto/crc32c": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/crc32c/-/crc32c-5.2.0.tgz",
+      "integrity": "sha512-+iWb8qaHLYKrNvGRbiYRHSdKRWhto5XlZUEBwDjYNf+ly5SVYG6zEoYIdxvf5R3zyeP16w4PLBn3rH1xc74Rag==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/util": "^5.2.0",
+        "@aws-sdk/types": "^3.222.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@aws-crypto/sha1-browser": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/sha1-browser/-/sha1-browser-5.2.0.tgz",
+      "integrity": "sha512-OH6lveCFfcDjX4dbAvCFSYUjJZjDr/3XJ3xHtjn3Oj5b9RjojQo8npoLeA/bNwkOkrSQ0wgrHzXk4tDRxGKJeg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/supports-web-crypto": "^5.2.0",
+        "@aws-crypto/util": "^5.2.0",
+        "@aws-sdk/types": "^3.222.0",
+        "@aws-sdk/util-locate-window": "^3.0.0",
+        "@smithy/util-utf8": "^2.0.0",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@aws-crypto/sha1-browser/node_modules/@smithy/is-array-buffer": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-2.2.0.tgz",
+      "integrity": "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/sha1-browser/node_modules/@smithy/util-buffer-from": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-2.2.0.tgz",
+      "integrity": "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/is-array-buffer": "^2.2.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@aws-crypto/sha1-browser/node_modules/@smithy/util-utf8": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-2.3.0.tgz",
+      "integrity": "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/util-buffer-from": "^2.2.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@aws-crypto/sha256-browser": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-browser/-/sha256-browser-5.2.0.tgz",
@@ -208,6 +272,72 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/client-s3": {
+      "version": "3.1013.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/client-s3/-/client-s3-3.1013.0.tgz",
+      "integrity": "sha512-vFdyRyRatF+xP9Fi+4alZkmzZadqOAM34Pm6SUZsYtumNrWkgMc/pFWITnsq6eltM8qcV/vcinQ1ZBXWm/PlKg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/sha1-browser": "5.2.0",
+        "@aws-crypto/sha256-browser": "5.2.0",
+        "@aws-crypto/sha256-js": "5.2.0",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/credential-provider-node": "^3.972.23",
+        "@aws-sdk/middleware-bucket-endpoint": "^3.972.8",
+        "@aws-sdk/middleware-expect-continue": "^3.972.8",
+        "@aws-sdk/middleware-flexible-checksums": "^3.974.2",
+        "@aws-sdk/middleware-host-header": "^3.972.8",
+        "@aws-sdk/middleware-location-constraint": "^3.972.8",
+        "@aws-sdk/middleware-logger": "^3.972.8",
+        "@aws-sdk/middleware-recursion-detection": "^3.972.8",
+        "@aws-sdk/middleware-sdk-s3": "^3.972.22",
+        "@aws-sdk/middleware-ssec": "^3.972.8",
+        "@aws-sdk/middleware-user-agent": "^3.972.23",
+        "@aws-sdk/region-config-resolver": "^3.972.8",
+        "@aws-sdk/signature-v4-multi-region": "^3.996.10",
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-endpoints": "^3.996.5",
+        "@aws-sdk/util-user-agent-browser": "^3.972.8",
+        "@aws-sdk/util-user-agent-node": "^3.973.9",
+        "@smithy/config-resolver": "^4.4.11",
+        "@smithy/core": "^3.23.12",
+        "@smithy/eventstream-serde-browser": "^4.2.12",
+        "@smithy/eventstream-serde-config-resolver": "^4.3.12",
+        "@smithy/eventstream-serde-node": "^4.2.12",
+        "@smithy/fetch-http-handler": "^5.3.15",
+        "@smithy/hash-blob-browser": "^4.2.13",
+        "@smithy/hash-node": "^4.2.12",
+        "@smithy/hash-stream-node": "^4.2.12",
+        "@smithy/invalid-dependency": "^4.2.12",
+        "@smithy/md5-js": "^4.2.12",
+        "@smithy/middleware-content-length": "^4.2.12",
+        "@smithy/middleware-endpoint": "^4.4.26",
+        "@smithy/middleware-retry": "^4.4.43",
+        "@smithy/middleware-serde": "^4.2.15",
+        "@smithy/middleware-stack": "^4.2.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/node-http-handler": "^4.5.0",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/url-parser": "^4.2.12",
+        "@smithy/util-base64": "^4.3.2",
+        "@smithy/util-body-length-browser": "^4.2.2",
+        "@smithy/util-body-length-node": "^4.2.3",
+        "@smithy/util-defaults-mode-browser": "^4.3.42",
+        "@smithy/util-defaults-mode-node": "^4.2.45",
+        "@smithy/util-endpoints": "^3.3.3",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-retry": "^4.2.12",
+        "@smithy/util-stream": "^4.5.20",
+        "@smithy/util-utf8": "^4.2.2",
+        "@smithy/util-waiter": "^4.2.13",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/client-secrets-manager": {
       "version": "3.1013.0",
       "resolved": "https://registry.npmjs.org/@aws-sdk/client-secrets-manager/-/client-secrets-manager-3.1013.0.tgz",
@@ -282,6 +412,19 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/crc64-nvme": {
+      "version": "3.972.5",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/crc64-nvme/-/crc64-nvme-3.972.5.tgz",
+      "integrity": "sha512-2VbTstbjKdT+yKi8m7b3a9CiVac+pL/IY2PHJwsaGkkHmuuqkJZIErPck1h6P3T9ghQMLSdMPyW6Qp7Di5swFg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/credential-provider-env": {
       "version": "3.972.20",
       "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.972.20.tgz",
@@ -440,6 +583,64 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/middleware-bucket-endpoint": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-bucket-endpoint/-/middleware-bucket-endpoint-3.972.8.tgz",
+      "integrity": "sha512-WR525Rr2QJSETa9a050isktyWi/4yIGcmY3BQ1kpHqb0LqUglQHCS8R27dTJxxWNZvQ0RVGtEZjTCbZJpyF3Aw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-arn-parser": "^3.972.3",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-config-provider": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-expect-continue": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-expect-continue/-/middleware-expect-continue-3.972.8.tgz",
+      "integrity": "sha512-5DTBTiotEES1e2jOHAq//zyzCjeMB78lEHd35u15qnrid4Nxm7diqIf9fQQ3Ov0ChH1V3Vvt13thOnrACmfGVQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-flexible-checksums": {
+      "version": "3.974.2",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-flexible-checksums/-/middleware-flexible-checksums-3.974.2.tgz",
+      "integrity": "sha512-4soN/N4R6ptdnHw7hXPVDZMIIL+vhN8rwtLdDyS0uD7ExhadtJzolTBIM5eKSkbw5uBEbIwtJc8HCG2NM6tN/g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-crypto/crc32": "5.2.0",
+        "@aws-crypto/crc32c": "5.2.0",
+        "@aws-crypto/util": "5.2.0",
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/crc64-nvme": "^3.972.5",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/is-array-buffer": "^4.2.2",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-stream": "^4.5.20",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/middleware-host-header": {
       "version": "3.972.8",
       "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-host-header/-/middleware-host-header-3.972.8.tgz",
@@ -455,6 +656,20 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/middleware-location-constraint": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-location-constraint/-/middleware-location-constraint-3.972.8.tgz",
+      "integrity": "sha512-KaUoFuoFPziIa98DSQsTPeke1gvGXlc5ZGMhy+b+nLxZ4A7jmJgLzjEF95l8aOQN2T/qlPP3MrAyELm8ExXucw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/middleware-logger": {
       "version": "3.972.8",
       "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-logger/-/middleware-logger-3.972.8.tgz",
@@ -485,6 +700,45 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/middleware-sdk-s3": {
+      "version": "3.972.22",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-sdk-s3/-/middleware-sdk-s3-3.972.22.tgz",
+      "integrity": "sha512-dkUcRxF4rVpPbyHpxjCApGK6b7JpnSeo7tDoNakpRKmiLMCqgy4tlGBgeEYJnZgLrA4xc5jVKuXgvgqKqU18Kw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/core": "^3.973.22",
+        "@aws-sdk/types": "^3.973.6",
+        "@aws-sdk/util-arn-parser": "^3.972.3",
+        "@smithy/core": "^3.23.12",
+        "@smithy/node-config-provider": "^4.3.12",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/signature-v4": "^5.3.12",
+        "@smithy/smithy-client": "^4.12.6",
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-config-provider": "^4.2.2",
+        "@smithy/util-middleware": "^4.2.12",
+        "@smithy/util-stream": "^4.5.20",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@aws-sdk/middleware-ssec": {
+      "version": "3.972.8",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-ssec/-/middleware-ssec-3.972.8.tgz",
+      "integrity": "sha512-wqlK0yO/TxEC2UsY9wIlqeeutF6jjLe0f96Pbm40XscTo57nImUk9lBcw0dPgsm0sppFtAkSlDrfpK+pC30Wqw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/middleware-user-agent": {
       "version": "3.972.23",
       "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-user-agent/-/middleware-user-agent-3.972.23.tgz",
@@ -569,6 +823,23 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/signature-v4-multi-region": {
+      "version": "3.996.10",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/signature-v4-multi-region/-/signature-v4-multi-region-3.996.10.tgz",
+      "integrity": "sha512-yJSbFTedh1McfqXa9wZzjchqQ2puq5PI/qRz5kUjg2UXS5mO4MBYBbeXaZ2rp/h+ZbkcYEdo4Qsiah9psyoxrA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@aws-sdk/middleware-sdk-s3": "^3.972.22",
+        "@aws-sdk/types": "^3.973.6",
+        "@smithy/protocol-http": "^5.3.12",
+        "@smithy/signature-v4": "^5.3.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/token-providers": {
       "version": "3.1013.0",
       "resolved": "https://registry.npmjs.org/@aws-sdk/token-providers/-/token-providers-3.1013.0.tgz",
@@ -600,6 +871,18 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@aws-sdk/util-arn-parser": {
+      "version": "3.972.3",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/util-arn-parser/-/util-arn-parser-3.972.3.tgz",
+      "integrity": "sha512-HzSD8PMFrvgi2Kserxuff5VitNq2sgf3w9qxmskKDiDTThWfVteJxuCS9JXiPIPtmCrp+7N9asfIaVhBFORllA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@aws-sdk/util-endpoints": {
       "version": "3.996.5",
       "resolved": "https://registry.npmjs.org/@aws-sdk/util-endpoints/-/util-endpoints-3.996.5.tgz",
@@ -714,6 +997,31 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@smithy/chunked-blob-reader": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/chunked-blob-reader/-/chunked-blob-reader-5.2.2.tgz",
+      "integrity": "sha512-St+kVicSyayWQca+I1rGitaOEH6uKgE8IUWoYnnEX26SWdWQcL6LvMSD19Lg+vYHKdT9B2Zuu7rd3i6Wnyb/iw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@smithy/chunked-blob-reader-native": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@smithy/chunked-blob-reader-native/-/chunked-blob-reader-native-4.2.3.tgz",
+      "integrity": "sha512-jA5k5Udn7Y5717L86h4EIv06wIr3xn8GM1qHRi/Nf31annXcXHJjBKvgztnbn2TxH3xWrPBfgwHsOwZf0UmQWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/util-base64": "^4.3.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@smithy/config-resolver": {
       "version": "4.4.13",
       "resolved": "https://registry.npmjs.org/@smithy/config-resolver/-/config-resolver-4.4.13.tgz",
@@ -854,6 +1162,21 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@smithy/hash-blob-browser": {
+      "version": "4.2.13",
+      "resolved": "https://registry.npmjs.org/@smithy/hash-blob-browser/-/hash-blob-browser-4.2.13.tgz",
+      "integrity": "sha512-YrF4zWKh+ghLuquldj6e/RzE3xZYL8wIPfkt0MqCRphVICjyyjH8OwKD7LLlKpVEbk4FLizFfC1+gwK6XQdR3g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/chunked-blob-reader": "^5.2.2",
+        "@smithy/chunked-blob-reader-native": "^4.2.3",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@smithy/hash-node": {
       "version": "4.2.12",
       "resolved": "https://registry.npmjs.org/@smithy/hash-node/-/hash-node-4.2.12.tgz",
@@ -869,6 +1192,20 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@smithy/hash-stream-node": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/hash-stream-node/-/hash-stream-node-4.2.12.tgz",
+      "integrity": "sha512-O3YbmGExeafuM/kP7Y8r6+1y0hIh3/zn6GROx0uNlB54K9oihAL75Qtc+jFfLNliTi6pxOAYZrRKD9A7iA6UFw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@smithy/invalid-dependency": {
       "version": "4.2.12",
       "resolved": "https://registry.npmjs.org/@smithy/invalid-dependency/-/invalid-dependency-4.2.12.tgz",
@@ -894,6 +1231,20 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@smithy/md5-js": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@smithy/md5-js/-/md5-js-4.2.12.tgz",
+      "integrity": "sha512-W/oIpHCpWU2+iAkfZYyGWE+qkpuf3vEXHLxQQDx9FPNZTTdnul0dZ2d/gUFrtQ5je1G2kp4cjG0/24YueG2LbQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/types": "^4.13.1",
+        "@smithy/util-utf8": "^4.2.2",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@smithy/middleware-content-length": {
       "version": "4.2.12",
       "resolved": "https://registry.npmjs.org/@smithy/middleware-content-length/-/middleware-content-length-4.2.12.tgz",
@@ -1340,6 +1691,20 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@smithy/util-waiter": {
+      "version": "4.2.13",
+      "resolved": "https://registry.npmjs.org/@smithy/util-waiter/-/util-waiter-4.2.13.tgz",
+      "integrity": "sha512-2zdZ9DTHngRtcYxJK1GUDxruNr53kv5W2Lupe0LMU+Imr6ohQg8M2T14MNkj1Y0wS3FFwpgpGQyvuaMF7CiTmQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@smithy/abort-controller": "^4.2.12",
+        "@smithy/types": "^4.13.1",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@smithy/uuid": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@smithy/uuid/-/uuid-1.1.2.tgz",
diff --git a/_reference/localEmailViewer/package.json b/_reference/localEmailViewer/package.json
index 67ea3fc6b..956794f4c 100644
--- a/_reference/localEmailViewer/package.json
+++ b/_reference/localEmailViewer/package.json
@@ -10,9 +10,10 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": "LocalStack inspector for SES emails, CloudWatch logs, and Secrets Manager",
+  "description": "LocalStack inspector for SES emails, CloudWatch logs, Secrets Manager, and S3",
   "dependencies": {
     "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
+    "@aws-sdk/client-s3": "^3.1013.0",
     "@aws-sdk/client-secrets-manager": "^3.1013.0",
     "express": "^5.1.0",
     "mailparser": "^3.7.4",

From 9d9e626cfed3570ed3e05fbf98472d5355852ef8 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Thu, 19 Mar 2026 18:41:43 -0400
Subject: [PATCH 10/10] feature/IO-3587-Commision-Cut-Clean - Split localStack
 client into smaller files / seperated by concerns

---
 _reference/localEmailViewer/README.md         |    8 +
 _reference/localEmailViewer/index.js          | 4525 +----------------
 _reference/localEmailViewer/package.json      |    2 +-
 .../localEmailViewer/public/client-app.js     | 3154 ++++++++++++
 _reference/localEmailViewer/server/config.js  |   45 +
 .../server/localstack-service.js              |  845 +++
 _reference/localEmailViewer/server/page.js    |  495 ++
 7 files changed, 4592 insertions(+), 4482 deletions(-)
 create mode 100644 _reference/localEmailViewer/public/client-app.js
 create mode 100644 _reference/localEmailViewer/server/config.js
 create mode 100644 _reference/localEmailViewer/server/localstack-service.js
 create mode 100644 _reference/localEmailViewer/server/page.js

diff --git a/_reference/localEmailViewer/README.md b/_reference/localEmailViewer/README.md
index 019d6f946..cbfe9e555 100644
--- a/_reference/localEmailViewer/README.md
+++ b/_reference/localEmailViewer/README.md
@@ -32,6 +32,14 @@ Features:
 - Shared LocalStack service health strip plus a reset action for clearing saved viewer state
 - Compact single-page UI for switching between the local stack tools you use most
 
+Code layout:
+
+- `index.js`: small Express bootstrap and route registration
+- `server/config.js`: LocalStack endpoints, defaults, and AWS client setup
+- `server/localstack-service.js`: SES, Logs, Secrets, and S3 data loading helpers
+- `server/page.js`: server-rendered HTML shell, CSS, and client config payload
+- `public/client-app.js`: browser-side UI state, rendering, refresh logic, and interactions
+
 Optional environment variables:
 
 ```shell
diff --git a/_reference/localEmailViewer/index.js b/_reference/localEmailViewer/index.js
index 64b72fbd7..67df19055 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -1,59 +1,41 @@
 import express from "express";
-import fetch from "node-fetch";
+import { readFileSync } from "node:fs";
 import {
-  CloudWatchLogsClient,
-  DescribeLogGroupsCommand,
-  DescribeLogStreamsCommand,
-  FilterLogEventsCommand
-} from "@aws-sdk/client-cloudwatch-logs";
-import { GetSecretValueCommand, ListSecretsCommand, SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
+  CLOUDWATCH_DEFAULT_LIMIT,
+  CLOUDWATCH_DEFAULT_WINDOW_MS,
+  CLOUDWATCH_ENDPOINT,
+  CLOUDWATCH_REGION,
+  DEFAULT_REFRESH_MS,
+  PORT,
+  S3_ENDPOINT,
+  S3_REGION,
+  SES_ENDPOINT,
+  SECRETS_ENDPOINT,
+  SECRETS_REGION
+} from "./server/config.js";
+import { getClientConfig, renderHtml } from "./server/page.js";
 import {
-  GetObjectCommand,
-  HeadObjectCommand,
-  ListBucketsCommand,
-  ListObjectsV2Command,
-  S3Client
-} from "@aws-sdk/client-s3";
-import { simpleParser } from "mailparser";
+  buildAttachmentDisposition,
+  buildInlineDisposition,
+  clampNumber,
+  findSesMessageById,
+  loadLogEvents,
+  loadLogGroups,
+  loadLogStreams,
+  loadMessageAttachment,
+  loadMessages,
+  loadS3Buckets,
+  loadS3ObjectDownload,
+  loadS3ObjectPreview,
+  loadS3Objects,
+  loadSecretValue,
+  loadSecrets,
+  loadServiceHealthSummary
+} from "./server/localstack-service.js";
 
 const app = express();
-
-const PORT = Number(process.env.PORT || 3334);
-const SES_ENDPOINT = process.env.SES_VIEWER_ENDPOINT || "http://localhost:4566/_aws/ses";
-const FETCH_TIMEOUT_MS = Number(process.env.SES_VIEWER_FETCH_TIMEOUT_MS || 5000);
-const DEFAULT_REFRESH_MS = Number(process.env.SES_VIEWER_REFRESH_MS || 10000);
-const CLOUDWATCH_ENDPOINT = process.env.CLOUDWATCH_VIEWER_ENDPOINT || "http://localhost:4566";
-const CLOUDWATCH_REGION = process.env.CLOUDWATCH_VIEWER_REGION || process.env.AWS_DEFAULT_REGION || "ca-central-1";
-const CLOUDWATCH_DEFAULT_GROUP = process.env.CLOUDWATCH_VIEWER_LOG_GROUP || "development";
-const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW_MS || 15 * 60 * 1000);
-const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
-const SECRETS_ENDPOINT = process.env.SECRETS_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
-const SECRETS_REGION = process.env.SECRETS_VIEWER_REGION || CLOUDWATCH_REGION;
-const S3_ENDPOINT = process.env.S3_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
-const S3_REGION = process.env.S3_VIEWER_REGION || CLOUDWATCH_REGION;
-const S3_DEFAULT_BUCKET = process.env.S3_VIEWER_BUCKET || "";
-const S3_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_PREVIEW_BYTES || 256 * 1024);
-const S3_IMAGE_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_IMAGE_PREVIEW_BYTES || 1024 * 1024);
-const LOCALSTACK_CREDENTIALS = {
-  accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
-  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
-};
-const cloudWatchLogsClient = new CloudWatchLogsClient({
-  region: CLOUDWATCH_REGION,
-  endpoint: CLOUDWATCH_ENDPOINT,
-  credentials: LOCALSTACK_CREDENTIALS
-});
-const secretsManagerClient = new SecretsManagerClient({
-  region: SECRETS_REGION,
-  endpoint: SECRETS_ENDPOINT,
-  credentials: LOCALSTACK_CREDENTIALS
-});
-const s3Client = new S3Client({
-  region: S3_REGION,
-  endpoint: S3_ENDPOINT,
-  credentials: LOCALSTACK_CREDENTIALS,
-  forcePathStyle: true
-});
+const CLIENT_APP_PATH = new URL("./public/client-app.js", import.meta.url);
+const CLIENT_APP_SOURCE = readFileSync(CLIENT_APP_PATH, "utf8");
 
 app.use((req, res, next) => {
   res.set("Cache-Control", "no-store");
@@ -65,7 +47,7 @@ app.get("/", (req, res) => {
 });
 
 app.get("/app.js", (req, res) => {
-  res.type("application/javascript").send(`(${clientApp.toString()})(${JSON.stringify(getClientConfig())});`);
+  res.type("application/javascript").send(`${CLIENT_APP_SOURCE}\n\nclientApp(${JSON.stringify(getClientConfig())});\n`);
 });
 
 app.get("/health", (req, res) => {
@@ -133,27 +115,17 @@ app.get("/api/messages/:id/attachments/:index", async (req, res) => {
       return;
     }
 
-    const parsed = await parseSesMessageById(req.params.id);
-
-    if (!parsed) {
-      res.status(404).type("text/plain").send("Message not found");
-      return;
-    }
-
-    const attachment = parsed.attachments?.[attachmentIndex];
+    const attachment = await loadMessageAttachment(req.params.id, attachmentIndex);
 
     if (!attachment) {
       res.status(404).type("text/plain").send("Attachment not found");
       return;
     }
 
-    const filename = resolveAttachmentFilename(attachment, attachmentIndex);
-    const content = Buffer.isBuffer(attachment.content) ? attachment.content : Buffer.from(attachment.content || "");
-
-    res.setHeader("Content-Type", attachment.contentType || "application/octet-stream");
-    res.setHeader("Content-Disposition", buildAttachmentDisposition(filename));
-    res.setHeader("Content-Length", String(content.length));
-    res.send(content);
+    res.setHeader("Content-Type", attachment.contentType);
+    res.setHeader("Content-Disposition", buildAttachmentDisposition(attachment.filename));
+    res.setHeader("Content-Length", String(attachment.content.length));
+    res.send(attachment.content);
   } catch (error) {
     console.error("Error downloading attachment:", error);
     res.status(502).type("text/plain").send(`Unable to download attachment: ${error.message}`);
@@ -166,7 +138,6 @@ app.get("/api/logs/groups", async (req, res) => {
     res.json({
       endpoint: CLOUDWATCH_ENDPOINT,
       region: CLOUDWATCH_REGION,
-      defaultGroup: CLOUDWATCH_DEFAULT_GROUP,
       groups
     });
   } catch (error) {
@@ -342,22 +313,15 @@ app.get("/api/s3/download", async (req, res) => {
       return;
     }
 
-    const response = await s3Client.send(
-      new GetObjectCommand({
-        Bucket: bucket,
-        Key: key
-      })
-    );
-    const content = Buffer.from(await response.Body.transformToByteArray());
-    const filename = basenameFromKey(key);
+    const object = await loadS3ObjectDownload({ bucket, key });
 
-    res.setHeader("Content-Type", response.ContentType || guessObjectContentType(key));
+    res.setHeader("Content-Type", object.contentType);
     res.setHeader(
       "Content-Disposition",
-      inline ? buildInlineDisposition(filename) : buildAttachmentDisposition(filename)
+      inline ? buildInlineDisposition(object.filename) : buildAttachmentDisposition(object.filename)
     );
-    res.setHeader("Content-Length", String(content.length));
-    res.send(content);
+    res.setHeader("Content-Length", String(object.content.length));
+    res.send(object.content);
   } catch (error) {
     if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
       res.status(404).type("text/plain").send("Object not found");
@@ -369,4407 +333,6 @@ app.get("/api/s3/download", async (req, res) => {
   }
 });
 
-async function loadMessages() {
-  const startedAt = Date.now();
-  const sesMessages = await fetchSesMessages();
-  const messages = await Promise.all(sesMessages.map((message, index) => toMessageViewModel(message, index)));
-
-  messages.sort((left, right) => {
-    if ((right.timestampMs || 0) !== (left.timestampMs || 0)) {
-      return (right.timestampMs || 0) - (left.timestampMs || 0);
-    }
-
-    return right.index - left.index;
-  });
-
-  return {
-    endpoint: SES_ENDPOINT,
-    fetchedAt: new Date().toISOString(),
-    fetchDurationMs: Date.now() - startedAt,
-    totalMessages: messages.length,
-    parseErrors: messages.filter((message) => Boolean(message.parseError)).length,
-    latestMessageTimestamp: messages[0]?.timestamp || "",
-    messages
-  };
-}
-
-async function fetchSesMessages() {
-  const response = await fetch(SES_ENDPOINT, {
-    signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
-  });
-
-  if (!response.ok) {
-    throw new Error(`SES endpoint responded with ${response.status}`);
-  }
-
-  const data = await response.json();
-  return Array.isArray(data.messages) ? data.messages : [];
-}
-
-async function loadLogGroups() {
-  const groups = [];
-  let nextToken;
-  let pageCount = 0;
-
-  do {
-    const response = await cloudWatchLogsClient.send(
-      new DescribeLogGroupsCommand({
-        nextToken,
-        limit: 50
-      })
-    );
-
-    groups.push(
-      ...(response.logGroups || []).map((group) => ({
-        name: group.logGroupName || "",
-        arn: group.arn || "",
-        storedBytes: group.storedBytes || 0,
-        retentionInDays: group.retentionInDays || 0,
-        creationTime: group.creationTime || 0
-      }))
-    );
-
-    nextToken = response.nextToken;
-    pageCount += 1;
-  } while (nextToken && pageCount < 10);
-
-  return groups.sort((left, right) => left.name.localeCompare(right.name));
-}
-
-async function loadLogStreams(logGroupName) {
-  const streams = [];
-  let nextToken;
-  let pageCount = 0;
-
-  do {
-    const response = await cloudWatchLogsClient.send(
-      new DescribeLogStreamsCommand({
-        logGroupName,
-        descending: true,
-        orderBy: "LastEventTime",
-        nextToken,
-        limit: 50
-      })
-    );
-
-    streams.push(
-      ...(response.logStreams || []).map((stream) => ({
-        name: stream.logStreamName || "",
-        arn: stream.arn || "",
-        lastEventTimestamp: stream.lastEventTimestamp || 0,
-        lastIngestionTime: stream.lastIngestionTime || 0,
-        storedBytes: stream.storedBytes || 0
-      }))
-    );
-
-    nextToken = response.nextToken;
-    pageCount += 1;
-  } while (nextToken && pageCount < 6 && streams.length < 250);
-
-  return streams;
-}
-
-async function loadLogEvents({ logGroupName, logStreamName, windowMs, limit }) {
-  const startedAt = Date.now();
-  const eventMap = new Map();
-  const startTime = Date.now() - windowMs;
-  let nextToken;
-  let previousToken = "";
-  let pageCount = 0;
-  let searchedLogStreams = 0;
-
-  do {
-    const response = await cloudWatchLogsClient.send(
-      new FilterLogEventsCommand({
-        logGroupName,
-        logStreamNames: logStreamName ? [logStreamName] : undefined,
-        startTime,
-        endTime: Date.now(),
-        limit,
-        nextToken
-      })
-    );
-
-    for (const event of response.events || []) {
-      const id =
-        event.eventId || `${event.logStreamName || "stream"}-${event.timestamp || 0}-${event.ingestionTime || 0}`;
-
-      if (!eventMap.has(id)) {
-        const message = String(event.message || "").trim();
-        eventMap.set(id, {
-          id,
-          timestamp: event.timestamp || 0,
-          ingestionTime: event.ingestionTime || 0,
-          logStreamName: event.logStreamName || "",
-          message,
-          preview: buildLogPreview(message)
-        });
-      }
-    }
-
-    searchedLogStreams = Math.max(searchedLogStreams, (response.searchedLogStreams || []).length);
-    previousToken = nextToken || "";
-    nextToken = response.nextToken;
-    pageCount += 1;
-  } while (nextToken && nextToken !== previousToken && pageCount < 10 && eventMap.size < limit);
-
-  const events = [...eventMap.values()]
-    .sort((left, right) => {
-      if ((right.timestamp || 0) !== (left.timestamp || 0)) {
-        return (right.timestamp || 0) - (left.timestamp || 0);
-      }
-
-      return left.logStreamName.localeCompare(right.logStreamName);
-    })
-    .slice(0, limit);
-
-  return {
-    endpoint: CLOUDWATCH_ENDPOINT,
-    region: CLOUDWATCH_REGION,
-    logGroupName,
-    logStreamName,
-    fetchDurationMs: Date.now() - startedAt,
-    latestTimestamp: events[0]?.timestamp || 0,
-    searchedLogStreams,
-    totalEvents: events.length,
-    events
-  };
-}
-
-async function loadSecrets() {
-  const startedAt = Date.now();
-  const secrets = [];
-  let nextToken;
-  let pageCount = 0;
-
-  do {
-    const response = await secretsManagerClient.send(
-      new ListSecretsCommand({
-        NextToken: nextToken,
-        MaxResults: 50
-      })
-    );
-
-    secrets.push(
-      ...(response.SecretList || []).map((secret, index) => ({
-        id: secret.ARN || secret.Name || `secret-${index}`,
-        name: secret.Name || "Unnamed secret",
-        arn: secret.ARN || "",
-        description: secret.Description || "",
-        createdDate: normalizeTimestamp(secret.CreatedDate),
-        lastChangedDate: normalizeTimestamp(secret.LastChangedDate),
-        lastAccessedDate: normalizeTimestamp(secret.LastAccessedDate),
-        deletedDate: normalizeTimestamp(secret.DeletedDate),
-        primaryRegion: secret.PrimaryRegion || "",
-        owningService: secret.OwningService || "",
-        rotationEnabled: Boolean(secret.RotationEnabled),
-        versionCount: Object.keys(secret.SecretVersionsToStages || {}).length,
-        tagCount: Array.isArray(secret.Tags) ? secret.Tags.length : 0,
-        tags: (secret.Tags || [])
-          .map((tag) => ({
-            key: tag.Key || "",
-            value: tag.Value || ""
-          }))
-          .filter((tag) => tag.key || tag.value)
-      }))
-    );
-
-    nextToken = response.NextToken;
-    pageCount += 1;
-  } while (nextToken && pageCount < 10 && secrets.length < 500);
-
-  secrets.sort((left, right) => {
-    const leftTime = Date.parse(left.lastChangedDate || left.createdDate || 0) || 0;
-    const rightTime = Date.parse(right.lastChangedDate || right.createdDate || 0) || 0;
-
-    if (rightTime !== leftTime) {
-      return rightTime - leftTime;
-    }
-
-    return left.name.localeCompare(right.name);
-  });
-
-  return {
-    endpoint: SECRETS_ENDPOINT,
-    region: SECRETS_REGION,
-    fetchedAt: new Date().toISOString(),
-    fetchDurationMs: Date.now() - startedAt,
-    totalSecrets: secrets.length,
-    latestTimestamp: secrets[0]?.lastChangedDate || secrets[0]?.createdDate || "",
-    secrets
-  };
-}
-
-async function loadSecretValue(secretId) {
-  const startedAt = Date.now();
-  const response = await secretsManagerClient.send(
-    new GetSecretValueCommand({
-      SecretId: secretId
-    })
-  );
-
-  const secretBinary = response.SecretBinary
-    ? typeof response.SecretBinary === "string"
-      ? response.SecretBinary
-      : Buffer.from(response.SecretBinary).toString("base64")
-    : "";
-
-  return {
-    endpoint: SECRETS_ENDPOINT,
-    region: SECRETS_REGION,
-    fetchDurationMs: Date.now() - startedAt,
-    id: secretId,
-    name: response.Name || "",
-    arn: response.ARN || "",
-    versionId: response.VersionId || "",
-    versionStages: Array.isArray(response.VersionStages) ? response.VersionStages : [],
-    createdDate: normalizeTimestamp(response.CreatedDate),
-    secretString: typeof response.SecretString === "string" ? response.SecretString : "",
-    secretBinary
-  };
-}
-
-async function loadS3Buckets() {
-  const startedAt = Date.now();
-  const response = await s3Client.send(new ListBucketsCommand({}));
-  const buckets = (response.Buckets || [])
-    .map((bucket) => ({
-      name: bucket.Name || "",
-      creationDate: normalizeTimestamp(bucket.CreationDate)
-    }))
-    .filter((bucket) => bucket.name)
-    .sort((left, right) => left.name.localeCompare(right.name));
-
-  return {
-    endpoint: S3_ENDPOINT,
-    region: S3_REGION,
-    fetchedAt: new Date().toISOString(),
-    fetchDurationMs: Date.now() - startedAt,
-    totalBuckets: buckets.length,
-    buckets
-  };
-}
-
-async function loadS3Objects({ bucket, prefix }) {
-  const startedAt = Date.now();
-  const objects = [];
-  let continuationToken;
-  let pageCount = 0;
-
-  do {
-    const response = await s3Client.send(
-      new ListObjectsV2Command({
-        Bucket: bucket,
-        Prefix: prefix || undefined,
-        ContinuationToken: continuationToken,
-        MaxKeys: 200
-      })
-    );
-
-    objects.push(
-      ...(response.Contents || []).map((object, index) => ({
-        id: `${bucket}::${object.Key || index}`,
-        bucket,
-        key: object.Key || "",
-        size: object.Size || 0,
-        lastModified: normalizeTimestamp(object.LastModified),
-        etag: String(object.ETag || "").replace(/^"|"$/g, ""),
-        storageClass: object.StorageClass || "STANDARD"
-      }))
-    );
-
-    continuationToken = response.IsTruncated ? response.NextContinuationToken : undefined;
-    pageCount += 1;
-  } while (continuationToken && pageCount < 10 && objects.length < 1000);
-
-  objects.sort((left, right) => {
-    const leftTime = Date.parse(left.lastModified || 0) || 0;
-    const rightTime = Date.parse(right.lastModified || 0) || 0;
-
-    if (rightTime !== leftTime) {
-      return rightTime - leftTime;
-    }
-
-    return left.key.localeCompare(right.key);
-  });
-
-  return {
-    endpoint: S3_ENDPOINT,
-    region: S3_REGION,
-    bucket,
-    prefix,
-    fetchedAt: new Date().toISOString(),
-    fetchDurationMs: Date.now() - startedAt,
-    totalObjects: objects.length,
-    latestTimestamp: objects[0]?.lastModified || "",
-    objects
-  };
-}
-
-async function loadS3ObjectPreview({ bucket, key }) {
-  const startedAt = Date.now();
-  const head = await s3Client.send(
-    new HeadObjectCommand({
-      Bucket: bucket,
-      Key: key
-    })
-  );
-
-  const contentType = head.ContentType || guessObjectContentType(key);
-  const contentLength = Number(head.ContentLength || 0);
-  const previewType = resolveS3PreviewType(contentType, key);
-  const result = {
-    endpoint: S3_ENDPOINT,
-    region: S3_REGION,
-    bucket,
-    key,
-    fetchDurationMs: 0,
-    contentType,
-    contentLength,
-    etag: String(head.ETag || "").replace(/^"|"$/g, ""),
-    lastModified: normalizeTimestamp(head.LastModified),
-    metadata: head.Metadata || {},
-    previewType,
-    previewText: "",
-    imageDataUrl: "",
-    truncated: false
-  };
-
-  const shouldLoadTextPreview = previewType === "json" || previewType === "text" || previewType === "html";
-  const shouldLoadImagePreview =
-    previewType === "image" && contentLength > 0 && contentLength <= S3_IMAGE_PREVIEW_MAX_BYTES;
-
-  if ((shouldLoadTextPreview || shouldLoadImagePreview) && contentLength > 0) {
-    const previewBytes = Math.max(1, Math.min(contentLength || S3_PREVIEW_MAX_BYTES, S3_PREVIEW_MAX_BYTES));
-    const response = await s3Client.send(
-      new GetObjectCommand({
-        Bucket: bucket,
-        Key: key,
-        Range: `bytes=0-${previewBytes - 1}`
-      })
-    );
-    const content = Buffer.from(await response.Body.transformToByteArray());
-    result.truncated = contentLength > content.length;
-
-    if (shouldLoadImagePreview) {
-      result.imageDataUrl = `data:${contentType};base64,${content.toString("base64")}`;
-    } else {
-      result.previewText = content.toString("utf8");
-    }
-  }
-
-  result.fetchDurationMs = Date.now() - startedAt;
-  return result;
-}
-
-async function loadServiceHealthSummary() {
-  const startedAt = Date.now();
-  const [sesResult, logsResult, secretsResult, s3Result] = await Promise.allSettled([
-    fetchSesMessages(),
-    loadLogGroups(),
-    loadSecrets(),
-    loadS3Buckets()
-  ]);
-
-  return {
-    fetchedAt: new Date().toISOString(),
-    fetchDurationMs: Date.now() - startedAt,
-    services: {
-      emails: summarizeHealthResult({
-        icon: "✉️",
-        panel: "emails",
-        label: "SES Emails",
-        result: sesResult,
-        count: sesResult.status === "fulfilled" ? sesResult.value.length : 0,
-        detail: SES_ENDPOINT,
-        noun: "email"
-      }),
-      logs: summarizeHealthResult({
-        icon: "📜",
-        panel: "logs",
-        label: "CloudWatch Logs",
-        result: logsResult,
-        count: logsResult.status === "fulfilled" ? logsResult.value.length : 0,
-        detail: `${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`,
-        noun: "group"
-      }),
-      secrets: summarizeHealthResult({
-        icon: "🔐",
-        panel: "secrets",
-        label: "Secrets Manager",
-        result: secretsResult,
-        count: secretsResult.status === "fulfilled" ? secretsResult.value.totalSecrets : 0,
-        detail: `${SECRETS_ENDPOINT} (${SECRETS_REGION})`,
-        noun: "secret"
-      }),
-      s3: summarizeHealthResult({
-        icon: "🪣",
-        panel: "s3",
-        label: "S3 Explorer",
-        result: s3Result,
-        count: s3Result.status === "fulfilled" ? s3Result.value.totalBuckets : 0,
-        detail: `${S3_ENDPOINT} (${S3_REGION})`,
-        noun: "bucket"
-      })
-    }
-  };
-}
-
-async function findSesMessageById(id) {
-  const messages = await fetchSesMessages();
-  return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
-}
-
-async function parseSesMessageById(id) {
-  const message = await findSesMessageById(id);
-
-  if (!message) {
-    return null;
-  }
-
-  return simpleParser(message.RawData || "");
-}
-
-async function toMessageViewModel(message, index) {
-  const id = resolveMessageId(message, index);
-
-  try {
-    const parsed = await simpleParser(message.RawData || "");
-    const textContent = normalizeText(parsed.text || "");
-    const renderedHtml = buildRenderedHtml(parsed.html || parsed.textAsHtml || "");
-    const timestamp = normalizeTimestamp(message.Timestamp || parsed.date);
-
-    return {
-      id,
-      index,
-      from: formatAddressList(parsed.from) || message.Source || "Unknown sender",
-      to: formatAddressList(parsed.to) || "No To Address",
-      replyTo: formatAddressList(parsed.replyTo),
-      subject: parsed.subject || "No Subject",
-      region: message.Region || "",
-      timestamp,
-      timestampMs: timestamp ? Date.parse(timestamp) : 0,
-      messageId: parsed.messageId || "",
-      rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
-      attachmentCount: parsed.attachments.length,
-      attachments: parsed.attachments.map((attachment, attachmentIndex) => ({
-        index: attachmentIndex,
-        filename: resolveAttachmentFilename(attachment, attachmentIndex),
-        contentType: attachment.contentType || "application/octet-stream",
-        size: attachment.size || 0
-      })),
-      preview: buildPreview(textContent, renderedHtml),
-      textContent,
-      renderedHtml,
-      hasHtml: Boolean(renderedHtml),
-      parseError: ""
-    };
-  } catch (error) {
-    return {
-      id,
-      index,
-      from: message.Source || "Unknown sender",
-      to: "Unknown recipient",
-      replyTo: "",
-      subject: "Unable to parse message",
-      region: message.Region || "",
-      timestamp: normalizeTimestamp(message.Timestamp),
-      timestampMs: message.Timestamp ? Date.parse(message.Timestamp) : 0,
-      messageId: "",
-      rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
-      attachmentCount: 0,
-      attachments: [],
-      preview: "This message could not be parsed. Open the raw view to inspect the MIME source.",
-      textContent: "",
-      renderedHtml: "",
-      hasHtml: false,
-      parseError: error.message
-    };
-  }
-}
-
-function resolveMessageId(message, index = 0) {
-  return message.Id || `${message.Timestamp || "unknown"}-${message.Source || "unknown"}-${index}`;
-}
-
-function resolveAttachmentFilename(attachment, index = 0) {
-  if (attachment?.filename) {
-    return attachment.filename;
-  }
-
-  return `attachment-${index + 1}${attachmentExtension(attachment?.contentType)}`;
-}
-
-function attachmentExtension(contentType) {
-  const normalized = String(contentType || "")
-    .split(";")[0]
-    .trim()
-    .toLowerCase();
-
-  return (
-    {
-      "application/json": ".json",
-      "application/pdf": ".pdf",
-      "application/zip": ".zip",
-      "image/gif": ".gif",
-      "image/jpeg": ".jpg",
-      "image/png": ".png",
-      "image/webp": ".webp",
-      "text/calendar": ".ics",
-      "text/csv": ".csv",
-      "text/html": ".html",
-      "text/plain": ".txt"
-    }[normalized] || ""
-  );
-}
-
-function buildAttachmentDisposition(filename) {
-  const fallback = String(filename || "attachment")
-    .replace(/[^\x20-\x7e]/g, "_")
-    .replace(/["\\]/g, "_");
-
-  return `attachment; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "attachment")}`;
-}
-
-function buildInlineDisposition(filename) {
-  const fallback = String(filename || "file")
-    .replace(/[^\x20-\x7e]/g, "_")
-    .replace(/["\\]/g, "_");
-
-  return `inline; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "file")}`;
-}
-
-function basenameFromKey(key) {
-  const value = String(key || "");
-  const parts = value.split("/").filter(Boolean);
-  return parts[parts.length - 1] || "file";
-}
-
-function guessObjectContentType(key) {
-  const normalizedKey = String(key || "").toLowerCase();
-
-  if (normalizedKey.endsWith(".json")) {
-    return "application/json";
-  }
-
-  if (normalizedKey.endsWith(".csv")) {
-    return "text/csv";
-  }
-
-  if (normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
-    return "text/html";
-  }
-
-  if (normalizedKey.endsWith(".txt") || normalizedKey.endsWith(".log") || normalizedKey.endsWith(".md")) {
-    return "text/plain";
-  }
-
-  if (normalizedKey.endsWith(".png")) {
-    return "image/png";
-  }
-
-  if (normalizedKey.endsWith(".jpg") || normalizedKey.endsWith(".jpeg")) {
-    return "image/jpeg";
-  }
-
-  if (normalizedKey.endsWith(".gif")) {
-    return "image/gif";
-  }
-
-  if (normalizedKey.endsWith(".webp")) {
-    return "image/webp";
-  }
-
-  if (normalizedKey.endsWith(".svg")) {
-    return "image/svg+xml";
-  }
-
-  if (normalizedKey.endsWith(".pdf")) {
-    return "application/pdf";
-  }
-
-  return "application/octet-stream";
-}
-
-function resolveS3PreviewType(contentType, key) {
-  const normalizedType = String(contentType || "").toLowerCase();
-  const normalizedKey = String(key || "").toLowerCase();
-
-  if (normalizedType.includes("json") || normalizedKey.endsWith(".json")) {
-    return "json";
-  }
-
-  if (normalizedType.startsWith("image/")) {
-    return "image";
-  }
-
-  if (normalizedType.includes("html") || normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
-    return "html";
-  }
-
-  if (
-    normalizedType.startsWith("text/") ||
-    [".txt", ".log", ".csv", ".xml", ".yml", ".yaml", ".md"].some((extension) => normalizedKey.endsWith(extension))
-  ) {
-    return "text";
-  }
-
-  return "binary";
-}
-
-function summarizeHealthResult({ icon, panel, label, result, count, detail, noun }) {
-  if (result.status === "fulfilled") {
-    return {
-      ok: true,
-      icon,
-      panel,
-      label,
-      count,
-      summary: `${count} ${noun}${count === 1 ? "" : "s"}`,
-      detail
-    };
-  }
-
-  return {
-    ok: false,
-    icon,
-    panel,
-    label,
-    count: 0,
-    summary: "Needs attention",
-    detail: result.reason?.message || detail
-  };
-}
-
-function normalizeTimestamp(value) {
-  if (!value) {
-    return "";
-  }
-
-  const date = value instanceof Date ? value : new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : date.toISOString();
-}
-
-function normalizeText(value) {
-  return String(value || "")
-    .replace(/\r\n/g, "\n")
-    .trim();
-}
-
-function buildPreview(textContent, renderedHtml) {
-  const source = (textContent || stripTags(renderedHtml)).replace(/\s+/g, " ").trim();
-
-  if (!source) {
-    return "No message preview available.";
-  }
-
-  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
-}
-
-function buildLogPreview(message) {
-  const source = String(message || "")
-    .replace(/\s+/g, " ")
-    .trim();
-
-  if (!source) {
-    return "No log preview available.";
-  }
-
-  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
-}
-
-function clampNumber(value, fallback, min, max) {
-  const parsed = Number(value);
-
-  if (!Number.isFinite(parsed)) {
-    return fallback;
-  }
-
-  return Math.min(Math.max(parsed, min), max);
-}
-
-function buildRenderedHtml(html) {
-  if (!html) {
-    return "";
-  }
-
-  const value = String(html);
-  const hasDocument = /<html[\s>]/i.test(value) || /<!doctype/i.test(value);
-
-  if (hasDocument) {
-    return value;
-  }
-
-  return `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <base target="_blank">
-    <style>body{margin:0;padding:16px;font-family:Arial,sans-serif;background:#fff;}</style>
-  </head>
-  <body>${value}</body>
-</html>`;
-}
-
-function stripTags(value) {
-  return String(value || "")
-    .replace(/<style[\s\S]*?<\/style>/gi, " ")
-    .replace(/<script[\s\S]*?<\/script>/gi, " ")
-    .replace(/<[^>]+>/g, " ");
-}
-
-function formatAddressList(addresses) {
-  if (!addresses?.value?.length) {
-    return "";
-  }
-
-  return addresses.value
-    .map(({ name, address }) => {
-      if (name && address) {
-        return `${name} <${address}>`;
-      }
-
-      return address || name || "";
-    })
-    .filter(Boolean)
-    .join(", ");
-}
-
-function getClientConfig() {
-  return {
-    defaultRefreshMs: DEFAULT_REFRESH_MS,
-    endpoint: SES_ENDPOINT,
-    cloudWatchEndpoint: CLOUDWATCH_ENDPOINT,
-    cloudWatchRegion: CLOUDWATCH_REGION,
-    secretsEndpoint: SECRETS_ENDPOINT,
-    secretsRegion: SECRETS_REGION,
-    s3Endpoint: S3_ENDPOINT,
-    s3Region: S3_REGION,
-    defaultS3Bucket: S3_DEFAULT_BUCKET,
-    defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
-    defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
-    defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
-  };
-}
-
-function renderHtml() {
-  return `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LocalStack Inspector</title>
-    <style>${renderStyles()}</style>
-  </head>
-  <body>
-    <div class="page">
-      <header class="hero">
-        <div class="heroShell">
-          <div class="heroIdentity">
-            <p class="eyebrow">LocalStack Toolbox</p>
-            <h1>Inspector</h1>
-          </div>
-          <div class="heroTopRow">
-            <div class="heroActions">
-              <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
-              <button id="resetStateButton" class="ghost" type="button">🧹 Reset saved state</button>
-            </div>
-          </div>
-          <div class="heroStatusRow">
-            <span class="heroStatusLabel">Stack</span>
-            <div id="healthStrip" class="healthStrip" aria-live="polite"></div>
-            <button id="healthRefreshButton" class="mini healthRefreshButton" type="button" title="Refresh service health" aria-label="Refresh service health">🩺</button>
-          </div>
-        </div>
-      </header>
-
-      <section id="emailsPanel" class="workspacePanel">
-        <section class="toolControls">
-          <div class="row">
-            <button id="refreshButton" class="primary" type="button">🔄 Refresh</button>
-            <label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
-            <label class="chip">Every
-              <select id="intervalSelect">
-                <option value="5000">5s</option>
-                <option value="10000" selected>10s</option>
-                <option value="15000">15s</option>
-                <option value="30000">30s</option>
-                <option value="60000">60s</option>
-              </select>
-            </label>
-            <span id="statusChip" class="status">Waiting for first refresh...</span>
-          </div>
-          <div class="row">
-            <input id="searchInput" class="search" type="search" placeholder="Search subject, sender, preview..." autocomplete="off">
-            <button id="clearSearchButton" class="ghost" type="button">Clear</button>
-            <button id="expandAllButton" class="ghost" type="button">Open all</button>
-            <button id="collapseAllButton" class="ghost" type="button">Close all</button>
-          </div>
-        </section>
-
-        <section class="stats">
-          <article class="stat"><span>Total</span><strong id="totalStat">0</strong><small id="visibleStat">0 visible</small></article>
-          <article class="stat"><span>New</span><strong id="newStat">0</strong><small>New since last refresh</small></article>
-          <article class="stat"><span>Newest</span><strong id="newestStat" class="small">No messages</strong><small id="updatedStat">Not refreshed yet</small></article>
-          <article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
-        </section>
-
-        <div id="emailsContentPane" class="contentPane">
-          <div class="contentStack">
-            <div id="banner" class="banner" hidden></div>
-            <div id="empty" class="empty" hidden></div>
-            <section id="list" class="list" aria-live="polite"></section>
-            <div class="paneTopWrap">
-              <button id="scrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="logsPanel" class="workspacePanel" hidden>
-        <section class="toolControls">
-          <div class="row">
-            <button id="logsRefreshButton" class="primary" type="button">🔄 Refresh</button>
-            <label class="chip"><input id="logsAutoToggle" type="checkbox" checked> Live refresh</label>
-            <label class="chip">Every
-              <select id="logsIntervalSelect">
-                <option value="5000">5s</option>
-                <option value="10000" selected>10s</option>
-                <option value="15000">15s</option>
-                <option value="30000">30s</option>
-                <option value="60000">60s</option>
-              </select>
-            </label>
-            <span id="logsStatusChip" class="status">Waiting for first refresh...</span>
-          </div>
-          <div class="row">
-            <label class="chip">Group
-              <select id="logsGroupSelect"></select>
-            </label>
-            <label class="chip">Stream
-              <select id="logsStreamSelect"></select>
-            </label>
-            <label class="chip">Window
-              <select id="logsWindowSelect">
-                <option value="300000">5m</option>
-                <option value="900000" selected>15m</option>
-                <option value="3600000">1h</option>
-                <option value="21600000">6h</option>
-                <option value="86400000">24h</option>
-              </select>
-            </label>
-            <label class="chip">Limit
-              <select id="logsLimitSelect">
-                <option value="100">100</option>
-                <option value="200" selected>200</option>
-                <option value="300">300</option>
-                <option value="500">500</option>
-              </select>
-            </label>
-          </div>
-          <div class="row">
-            <input id="logsSearchInput" class="search" type="search" placeholder="Search stream name or log content..." autocomplete="off">
-            <button id="logsClearSearchButton" class="ghost" type="button">Clear</button>
-            <label class="chip"><input id="logsWrapToggle" type="checkbox" checked> Wrap lines</label>
-            <label class="chip"><input id="logsTailToggle" type="checkbox"> Tail newest</label>
-            <button id="logsExpandAllButton" class="ghost" type="button">Open all</button>
-            <button id="logsCollapseAllButton" class="ghost" type="button">Close all</button>
-          </div>
-        </section>
-
-        <section class="stats">
-          <article class="stat"><span>Events</span><strong id="logsTotalStat">0</strong><small id="logsVisibleStat">0 visible</small></article>
-          <article class="stat"><span>Streams</span><strong id="logsStreamsStat">0</strong><small>Streams in selected group</small></article>
-          <article class="stat"><span>Latest</span><strong id="logsNewestStat" class="small">No events</strong><small id="logsUpdatedStat">Not refreshed yet</small></article>
-          <article class="stat"><span>Fetch</span><strong id="logsFetchStat" class="small">Idle</strong><small id="logsFetchDetail">Endpoint: ${escapeHtml(CLOUDWATCH_ENDPOINT)} (${escapeHtml(CLOUDWATCH_REGION)})</small></article>
-        </section>
-
-        <div id="logsContentPane" class="contentPane">
-          <div class="contentStack">
-            <div id="logsBanner" class="banner" hidden></div>
-            <div id="logsEmpty" class="empty" hidden></div>
-            <section id="logsList" class="logList" aria-live="polite"></section>
-            <div class="paneTopWrap">
-              <button id="logsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="secretsPanel" class="workspacePanel" hidden>
-        <section class="toolControls">
-          <div class="row">
-            <button id="secretsRefreshButton" class="primary" type="button">🔄 Refresh</button>
-            <label class="chip"><input id="secretsAutoToggle" type="checkbox" checked> Live refresh</label>
-            <label class="chip">Every
-              <select id="secretsIntervalSelect">
-                <option value="5000">5s</option>
-                <option value="10000" selected>10s</option>
-                <option value="15000">15s</option>
-                <option value="30000">30s</option>
-                <option value="60000">60s</option>
-              </select>
-            </label>
-            <span id="secretsStatusChip" class="status">Waiting for first refresh...</span>
-          </div>
-          <div class="row">
-            <input id="secretsSearchInput" class="search" type="search" placeholder="Search secret name, description, service, tags..." autocomplete="off">
-            <button id="secretsClearSearchButton" class="ghost" type="button">Clear</button>
-            <button id="secretsExpandAllButton" class="ghost" type="button">Open all</button>
-            <button id="secretsCollapseAllButton" class="ghost" type="button">Close all</button>
-          </div>
-        </section>
-
-        <section class="stats">
-          <article class="stat"><span>Secrets</span><strong id="secretsTotalStat">0</strong><small id="secretsVisibleStat">0 visible</small></article>
-          <article class="stat"><span>Loaded</span><strong id="secretsLoadedStat">0</strong><small>Values loaded this session</small></article>
-          <article class="stat"><span>Latest</span><strong id="secretsNewestStat" class="small">No secrets</strong><small id="secretsUpdatedStat">Not refreshed yet</small></article>
-          <article class="stat"><span>Fetch</span><strong id="secretsFetchStat" class="small">Idle</strong><small id="secretsFetchDetail">Endpoint: ${escapeHtml(SECRETS_ENDPOINT)} (${escapeHtml(SECRETS_REGION)})</small></article>
-        </section>
-
-        <div id="secretsContentPane" class="contentPane">
-          <div class="contentStack">
-            <div id="secretsBanner" class="banner" hidden></div>
-            <div id="secretsEmpty" class="empty" hidden></div>
-            <section id="secretsList" class="list" aria-live="polite"></section>
-            <div class="paneTopWrap">
-              <button id="secretsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="s3Panel" class="workspacePanel" hidden>
-        <section class="toolControls">
-          <div class="row">
-            <button id="s3RefreshButton" class="primary" type="button">🔄 Refresh</button>
-            <label class="chip"><input id="s3AutoToggle" type="checkbox" checked> Live refresh</label>
-            <label class="chip">Every
-              <select id="s3IntervalSelect">
-                <option value="5000">5s</option>
-                <option value="10000" selected>10s</option>
-                <option value="15000">15s</option>
-                <option value="30000">30s</option>
-                <option value="60000">60s</option>
-              </select>
-            </label>
-            <span id="s3StatusChip" class="status">Waiting for first refresh...</span>
-          </div>
-          <div class="row">
-            <label class="chip">Bucket
-              <select id="s3BucketSelect"></select>
-            </label>
-            <input id="s3PrefixInput" class="search searchCompact" type="search" placeholder="Prefix filter (optional)" autocomplete="off">
-            <button id="s3ApplyPrefixButton" class="ghost" type="button">Apply prefix</button>
-          </div>
-          <div class="row">
-            <input id="s3SearchInput" class="search" type="search" placeholder="Search object key, storage class, or etag..." autocomplete="off">
-            <button id="s3ClearSearchButton" class="ghost" type="button">Clear</button>
-            <button id="s3ExpandAllButton" class="ghost" type="button">Open all</button>
-            <button id="s3CollapseAllButton" class="ghost" type="button">Close all</button>
-          </div>
-        </section>
-
-        <section class="stats">
-          <article class="stat"><span>Objects</span><strong id="s3TotalStat">0</strong><small id="s3VisibleStat">0 visible</small></article>
-          <article class="stat"><span>Buckets</span><strong id="s3BucketsStat">0</strong><small>Available in LocalStack</small></article>
-          <article class="stat"><span>Latest</span><strong id="s3NewestStat" class="small">No objects</strong><small id="s3UpdatedStat">Not refreshed yet</small></article>
-          <article class="stat"><span>Fetch</span><strong id="s3FetchStat" class="small">Idle</strong><small id="s3FetchDetail">Endpoint: ${escapeHtml(S3_ENDPOINT)} (${escapeHtml(S3_REGION)})</small></article>
-        </section>
-
-        <div id="s3ContentPane" class="contentPane">
-          <div class="contentStack">
-            <div id="s3Banner" class="banner" hidden></div>
-            <div id="s3Empty" class="empty" hidden></div>
-            <section id="s3List" class="list" aria-live="polite"></section>
-            <div class="paneTopWrap">
-              <button id="s3ScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <script type="module" src="/app.js"></script>
-  </body>
-</html>`;
-}
-
-function renderStyles() {
-  return `
-    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--secret-shell:linear-gradient(180deg,rgba(239,251,246,.98),rgba(247,253,249,.99));--secret-body:#f6fcf8;--bucket-shell:linear-gradient(180deg,rgba(255,249,232,.98),rgba(255,252,243,.99));--bucket-body:#fffcf2;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--secret-line:rgba(31,143,101,.2);--bucket-line:rgba(181,137,37,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--secret:#1f8f65;--secret-soft:rgba(31,143,101,.1);--bucket:#9d6b00;--bucket-soft:rgba(181,137,37,.12);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);--secret-shadow:0 16px 32px rgba(31,143,101,.12);--bucket-shadow:0 16px 32px rgba(181,137,37,.12);}
-    *{box-sizing:border-box}
-    html,body{margin:0;height:100%;overflow:hidden}
-    body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
-    button,input,select,textarea{font:inherit}
-    button{cursor:pointer}
-    .page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;max-width:1360px;height:100vh;height:100dvh;margin:0 auto;padding:14px;overflow:hidden}
-    .hero{display:block;margin-bottom:0}
-    .heroShell,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
-    .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
-    .heroShell,.toolControls{border-radius:18px}
-    .heroShell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
-    .toolControls{padding:12px}
-    .heroIdentity{display:grid;gap:3px;min-width:0}
-    .eyebrow{margin:0 0 4px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
-    h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.85rem);line-height:.96;letter-spacing:-.05em}
-    .lede{margin:8px 0 0;max-width:54ch;color:var(--muted);font-size:.92rem}
-    .heroTopRow{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
-    .heroActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
-    .heroStatusRow{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;align-items:center}
-    .heroStatusLabel{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
-    .helper{margin:0;color:var(--muted);font-size:.89rem}
-    .healthStrip{display:flex;flex:1 1 520px;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
-    .healthBadge{display:inline-flex;align-items:center;gap:8px;min-height:30px;max-width:100%;padding:0 10px;border-radius:999px;border:1px solid rgba(31,41,51,.1);background:rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(15,23,42,.06);text-align:left;transition:transform .12s ease,background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
-    .healthBadgeName{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;white-space:nowrap}
-    .healthBadgeSummary{min-width:0;overflow:hidden;color:var(--muted);font-size:.78rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
-    .healthBadge.ok{border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.1)}
-    .healthBadge.bad{border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.1)}
-    .healthBadge.warn{border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.1)}
-    .healthBadge.active{border-color:rgba(207,109,60,.28);background:rgba(207,109,60,.16);box-shadow:0 10px 24px rgba(207,109,60,.12)}
-    .healthBadge.active .healthBadgeName,.healthBadge.active .healthBadgeSummary{color:var(--ink)}
-    .healthRefreshButton{flex:0 0 auto;padding:0 10px}
-    .primary,.ghost,.mini,.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
-    .themeToggle{white-space:nowrap}
-    .workspacePanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-height:0}
-    .workspacePanel[hidden]{display:none}
-    .toolControls{display:grid;gap:8px}
-    .contentPane{height:100%;min-height:0;overflow:auto;scroll-behavior:smooth;padding-right:4px}
-    .contentStack{display:grid;gap:8px;min-width:100%;padding-bottom:18px}
-    .paneTopWrap{display:flex;justify-content:flex-end;position:sticky;bottom:14px;pointer-events:none;padding-right:10px}
-    .paneTopButton{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(31,41,51,.42);color:#fff;font-size:1.1rem;line-height:1;backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(31,41,51,.18);opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,background-color .12s ease;z-index:6}
-    .paneTopButton.visible{opacity:.78;transform:translateY(0);visibility:visible;pointer-events:auto}
-    .paneTopButton.visible:hover{opacity:1;background:rgba(31,41,51,.62);transform:translateY(-1px)}
-    .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
-    .primary,.ghost{min-height:34px;padding:0 12px;font-weight:700}
-    .mini,.tab{min-height:28px;padding:0 10px;font-weight:600}
-    .primary{background:var(--accent);color:#fff7f2}
-    .ghost,.mini{background:rgba(255,255,255,.76);border-color:var(--line);color:var(--ink)}
-    .tab{background:transparent;color:var(--muted)}
-    .tab.active{background:#fff;border-color:rgba(207,109,60,.18);color:var(--ink)}
-    .primary:hover,.ghost:hover,.mini:hover,.tab:hover{transform:translateY(-1px)}
-    .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600;font-size:.88rem}
-    .chip input{margin:0;accent-color:var(--accent)}
-    .chip select{border:none;background:transparent;outline:none;color:var(--ink)}
-    .search{flex:1 1 260px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
-    .searchCompact{flex:1 1 220px}
-    .status{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.86rem;font-weight:600}
-    .status.ok{color:var(--ok);border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.08)}
-    .status.warn{color:var(--warn);border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.08)}
-    .status.bad{color:var(--bad);border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.08)}
-    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:0}
-    .stat{border-radius:16px;padding:10px 12px}
-    .stat span{display:block;margin-bottom:4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
-    .stat strong{display:block;font-size:clamp(1.6rem,3vw,2rem);line-height:1;letter-spacing:-.05em}
-    .stat strong.small{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
-    .stat small{display:block;margin-top:4px;color:var(--muted);font-size:.82rem}
-    .banner,.empty{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
-    .banner{color:var(--bad);border-color:rgba(179,58,58,.24);background:rgba(179,58,58,.08)}
-    .list{display:grid;gap:12px;align-content:start}
-    .logList{display:grid;gap:10px;align-content:start;width:100%}
-    .card{overflow:hidden;border-radius:16px}
-    .card.new{border-color:rgba(31,143,101,.3);box-shadow:var(--card-shadow),0 0 0 1px rgba(31,143,101,.12)}
-    .summary{list-style:none;display:grid;gap:7px;padding:12px 14px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
-    .summary::-webkit-details-marker{display:none}
-    .top,.tags,.toolbar,.actions,.attachments{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
-    .top{justify-content:space-between}
-    .head{min-width:0;flex:1 1 320px}
-    .head h2{margin:0;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.18;letter-spacing:-.03em;word-break:break-word}
-    .meta{margin:4px 0 0;color:var(--muted);font-size:.88rem;word-break:break-word}
-    .time,.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:.76rem;font-weight:700}
-    .time{background:rgba(31,41,51,.06)}
-    .tag{background:var(--accent-soft);color:#8d5632}
-    .tag.new{background:rgba(31,143,101,.1);color:var(--ok)}
-    .tag.bad{background:rgba(179,58,58,.1);color:var(--bad)}
-    .preview{margin:0;color:#324150;font-size:.9rem}
-    .body{display:grid;gap:10px;padding:10px 14px 14px;border-top:1px solid rgba(207,109,60,.14);background:var(--card-body)}
-    .toolbar{justify-content:space-between;align-items:center}
-    .tabs{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:rgba(207,109,60,.08)}
-    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
-    .metaCard{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(207,109,60,.12)}
-    .metaCard dt{margin:0 0 4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
-    .metaCard dd{margin:0;word-break:break-word}
-    .attachments{gap:6px}
-    .attachment{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,248,240,.96);border:1px solid rgba(207,109,60,.12);font-size:.84rem}
-    .attachmentLink{color:#8d5632;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
-    .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
-    .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
-    .logEvent{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
-    .secretCard{background:var(--secret-shell);border:1px solid var(--secret-line);box-shadow:var(--secret-shadow)}
-    .s3Card{background:var(--bucket-shell);border:1px solid var(--bucket-line);box-shadow:var(--bucket-shadow)}
-    .logSummary{list-style:none;display:grid;gap:7px;padding:10px 12px;cursor:pointer}
-    .logSummary::-webkit-details-marker{display:none}
-    .secretSummary{background:linear-gradient(180deg,rgba(244,253,248,.9),rgba(236,249,242,.96))}
-    .s3Summary{background:linear-gradient(180deg,rgba(255,251,238,.92),rgba(255,246,223,.98))}
-    .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
-    .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
-    .logSummaryActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
-    .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .secretTag{background:var(--secret-soft);color:var(--secret);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .bucketTag{background:var(--bucket-soft);color:var(--bucket);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-    .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
-    .secretBody{border-top-color:rgba(31,143,101,.14);background:var(--secret-body)}
-    .s3Body{border-top-color:rgba(181,137,37,.18);background:var(--bucket-body)}
-    .logCopyButton{box-shadow:none}
-    .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
-    .secretValuePanel{display:grid;gap:10px}
-    .secretValuePanel pre{border-radius:12px;border:1px solid rgba(31,143,101,.14);padding:12px;background:linear-gradient(180deg,rgba(31,143,101,.04),transparent 140px),#fff}
-    .s3PreviewPanel{display:grid;gap:10px}
-    .s3PreviewImage{max-width:min(100%,640px);border-radius:12px;border:1px solid rgba(181,137,37,.16);background:#fff}
-    .logBody.wrapOff pre{white-space:pre;word-break:normal}
-    .tag.levelError{background:rgba(179,58,58,.12);color:var(--bad)}
-    .tag.levelWarn{background:rgba(157,95,0,.12);color:var(--warn)}
-    .tag.levelInfo{background:rgba(48,113,169,.12);color:var(--info)}
-    .tag.levelDebug{background:rgba(96,112,128,.12);color:var(--muted)}
-    .jsonSyntax .jsonKey{color:#b55f2d}
-    .jsonSyntax .jsonString{color:#1f8f65}
-    .jsonSyntax .jsonNumber{color:#2f6ea9}
-    .jsonSyntax .jsonBoolean{color:#9d5f00}
-    .jsonSyntax .jsonNull{color:#b33a3a}
-    iframe{width:100%;min-height:560px;border:none;background:#fff}
-    pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
-    .placeholder,.inlineError{padding:12px}
-    .inlineError{color:var(--bad)}
-    body[data-theme="dark"]{color-scheme:dark;background:radial-gradient(circle at top left,rgba(207,109,60,.12),transparent 28%),radial-gradient(circle at top right,rgba(48,113,169,.12),transparent 26%),linear-gradient(180deg,#10161d,#17202a)}
-    body[data-theme="dark"] .heroShell,
-    body[data-theme="dark"] .toolControls,
-    body[data-theme="dark"] .stat{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.16);box-shadow:0 14px 30px rgba(0,0,0,.32)}
-    body[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(50,35,28,.96),rgba(31,25,22,.98));border-color:rgba(207,109,60,.24);box-shadow:0 18px 34px rgba(0,0,0,.34)}
-    body[data-theme="dark"] .logEvent{background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(14,24,36,.98));border-color:rgba(73,144,204,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
-    body[data-theme="dark"] .secretCard{background:linear-gradient(180deg,rgba(19,39,31,.96),rgba(14,30,24,.98));border-color:rgba(64,170,126,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
-    body[data-theme="dark"] .s3Card{background:linear-gradient(180deg,rgba(52,42,17,.96),rgba(37,30,13,.98));border-color:rgba(181,137,37,.24);box-shadow:0 16px 32px rgba(0,0,0,.34)}
-    body[data-theme="dark"] .healthBadge{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.18);box-shadow:0 10px 22px rgba(0,0,0,.28)}
-    body[data-theme="dark"] .healthBadge.active{border-color:rgba(207,109,60,.32);background:rgba(207,109,60,.18);box-shadow:0 12px 26px rgba(0,0,0,.3)}
-    body[data-theme="dark"] .healthBadge.active .healthBadgeName,
-    body[data-theme="dark"] .healthBadge.active .healthBadgeSummary{color:#f8ede6}
-    body[data-theme="dark"] .tab{color:#aab8c8}
-    body[data-theme="dark"] .tab.active,
-    body[data-theme="dark"] .ghost,
-    body[data-theme="dark"] .mini,
-    body[data-theme="dark"] .chip,
-    body[data-theme="dark"] .status,
-    body[data-theme="dark"] .search{background:rgba(18,25,35,.88);border-color:rgba(148,163,184,.18);color:#edf2f7}
-    body[data-theme="dark"] .chip select,
-    body[data-theme="dark"] .search::placeholder{color:#9fb0c2}
-    body[data-theme="dark"] .ghost,
-    body[data-theme="dark"] .mini,
-    body[data-theme="dark"] .tab.active{border-color:rgba(148,163,184,.18)}
-    body[data-theme="dark"] .summary{background:linear-gradient(180deg,rgba(58,40,31,.88),rgba(45,33,28,.96))}
-    body[data-theme="dark"] .body{background:#211a17;border-top-color:rgba(207,109,60,.18)}
-    body[data-theme="dark"] .logSummary{background:linear-gradient(180deg,rgba(21,34,47,.94),rgba(16,27,39,.98))}
-    body[data-theme="dark"] .logBody{background:#13212d;border-top-color:rgba(73,144,204,.18)}
-    body[data-theme="dark"] .secretSummary{background:linear-gradient(180deg,rgba(21,43,34,.94),rgba(16,34,27,.98))}
-    body[data-theme="dark"] .secretBody{background:#12241c;border-top-color:rgba(64,170,126,.18)}
-    body[data-theme="dark"] .s3Summary{background:linear-gradient(180deg,rgba(53,41,19,.94),rgba(39,31,15,.98))}
-    body[data-theme="dark"] .s3Body{background:#241d10;border-top-color:rgba(181,137,37,.18)}
-    body[data-theme="dark"] .metaCard{background:rgba(17,25,35,.64);border-color:rgba(148,163,184,.14)}
-    body[data-theme="dark"] .attachment{background:rgba(50,35,28,.9);border-color:rgba(207,109,60,.18)}
-    body[data-theme="dark"] .attachmentLink{color:#f6c4a9}
-    body[data-theme="dark"] .attachmentLink:hover{background:rgba(75,52,39,.96);border-color:rgba(246,196,169,.26)}
-    body[data-theme="dark"] .panel,
-    body[data-theme="dark"] pre,
-    body[data-theme="dark"] .logBody pre{background:linear-gradient(180deg,rgba(73,144,204,.06),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
-    body[data-theme="dark"] .secretValuePanel pre{background:linear-gradient(180deg,rgba(64,170,126,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
-    body[data-theme="dark"] .s3PreviewPanel pre{background:linear-gradient(180deg,rgba(181,137,37,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
-    body[data-theme="dark"] .panel{border-color:rgba(148,163,184,.14)}
-    body[data-theme="dark"] .banner,
-    body[data-theme="dark"] .empty{background:rgba(15,21,30,.82);border-color:rgba(148,163,184,.16)}
-    body[data-theme="dark"] .time{background:rgba(148,163,184,.12);color:#e8edf3}
-    body[data-theme="dark"] .tag{background:rgba(207,109,60,.14);color:#f0c2aa}
-    body[data-theme="dark"] .logTag{background:rgba(73,144,204,.16);color:#93cfff}
-    body[data-theme="dark"] .secretTag{background:rgba(64,170,126,.16);color:#9fe0be}
-    body[data-theme="dark"] .bucketTag{background:rgba(181,137,37,.16);color:#f1d38c}
-    body[data-theme="dark"] .preview,
-    body[data-theme="dark"] .logPreview,
-    body[data-theme="dark"] .metaCard dd,
-    body[data-theme="dark"] .head h2,
-    body[data-theme="dark"] .stat strong,
-    body[data-theme="dark"] h1{color:#edf2f7}
-    body[data-theme="dark"] .jsonSyntax .jsonKey{color:#f0b08a}
-    body[data-theme="dark"] .jsonSyntax .jsonString{color:#80d5b0}
-    body[data-theme="dark"] .jsonSyntax .jsonNumber{color:#94c9ff}
-    body[data-theme="dark"] .jsonSyntax .jsonBoolean{color:#f0c274}
-    body[data-theme="dark"] .jsonSyntax .jsonNull{color:#ff9c9c}
-    body[data-theme="dark"] .meta,
-    body[data-theme="dark"] .helper,
-    body[data-theme="dark"] .lede,
-    body[data-theme="dark"] .stat small,
-    body[data-theme="dark"] .stat span,
-    body[data-theme="dark"] .chip,
-    body[data-theme="dark"] .tab{color:#aab8c8}
-    body[data-theme="dark"] .paneTopButton{border-color:rgba(255,255,255,.18);background:rgba(8,12,18,.58);color:#edf2f7}
-    body[data-theme="dark"] .paneTopButton.visible:hover{background:rgba(8,12,18,.8)}
-    @media (max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
-    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row,.heroActions{align-items:stretch}.heroTopRow{justify-content:stretch;flex-basis:100%}.heroStatusRow{align-items:flex-start}.heroStatusLabel,.healthStrip{flex-basis:100%}.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.healthBadge{justify-content:flex-start}.logSummaryTop,.logSummaryActions{align-items:flex-start}.contentPane{min-height:300px}iframe{min-height:420px}}
-  `;
-}
-
-function escapeHtml(value) {
-  return String(value ?? "")
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-
-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;
-    }
-  }
-}
-
 app.listen(PORT, () => {
   console.log(`LocalStack inspector is running on http://localhost:${PORT}`);
   console.log(`Watching LocalStack SES endpoint at ${SES_ENDPOINT}`);
diff --git a/_reference/localEmailViewer/package.json b/_reference/localEmailViewer/package.json
index 956794f4c..6972c7f95 100644
--- a/_reference/localEmailViewer/package.json
+++ b/_reference/localEmailViewer/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "node index.js",
-    "check": "node --check index.js"
+    "check": "node --check index.js && node --check public/client-app.js && node --check server/config.js && node --check server/localstack-service.js && node --check server/page.js"
   },
   "keywords": [],
   "author": "",
diff --git a/_reference/localEmailViewer/public/client-app.js b/_reference/localEmailViewer/public/client-app.js
new file mode 100644
index 000000000..2e446c8fe
--- /dev/null
+++ b/_reference/localEmailViewer/public/client-app.js
@@ -0,0 +1,3154 @@
+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;
+    }
+  }
+}
diff --git a/_reference/localEmailViewer/server/config.js b/_reference/localEmailViewer/server/config.js
new file mode 100644
index 000000000..c5d4ed154
--- /dev/null
+++ b/_reference/localEmailViewer/server/config.js
@@ -0,0 +1,45 @@
+import { CloudWatchLogsClient } from "@aws-sdk/client-cloudwatch-logs";
+import { SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
+import { S3Client } from "@aws-sdk/client-s3";
+
+export const PORT = Number(process.env.PORT || 3334);
+export const SES_ENDPOINT = process.env.SES_VIEWER_ENDPOINT || "http://localhost:4566/_aws/ses";
+export const FETCH_TIMEOUT_MS = Number(process.env.SES_VIEWER_FETCH_TIMEOUT_MS || 5000);
+export const DEFAULT_REFRESH_MS = Number(process.env.SES_VIEWER_REFRESH_MS || 10000);
+export const CLOUDWATCH_ENDPOINT = process.env.CLOUDWATCH_VIEWER_ENDPOINT || "http://localhost:4566";
+export const CLOUDWATCH_REGION =
+  process.env.CLOUDWATCH_VIEWER_REGION || process.env.AWS_DEFAULT_REGION || "ca-central-1";
+export const CLOUDWATCH_DEFAULT_GROUP = process.env.CLOUDWATCH_VIEWER_LOG_GROUP || "development";
+export const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW_MS || 15 * 60 * 1000);
+export const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
+export const SECRETS_ENDPOINT = process.env.SECRETS_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
+export const SECRETS_REGION = process.env.SECRETS_VIEWER_REGION || CLOUDWATCH_REGION;
+export const S3_ENDPOINT = process.env.S3_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
+export const S3_REGION = process.env.S3_VIEWER_REGION || CLOUDWATCH_REGION;
+export const S3_DEFAULT_BUCKET = process.env.S3_VIEWER_BUCKET || "";
+export const S3_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_PREVIEW_BYTES || 256 * 1024);
+export const S3_IMAGE_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_IMAGE_PREVIEW_BYTES || 1024 * 1024);
+
+export const LOCALSTACK_CREDENTIALS = {
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
+};
+
+export const cloudWatchLogsClient = new CloudWatchLogsClient({
+  region: CLOUDWATCH_REGION,
+  endpoint: CLOUDWATCH_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS
+});
+
+export const secretsManagerClient = new SecretsManagerClient({
+  region: SECRETS_REGION,
+  endpoint: SECRETS_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS
+});
+
+export const s3Client = new S3Client({
+  region: S3_REGION,
+  endpoint: S3_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS,
+  forcePathStyle: true
+});
diff --git a/_reference/localEmailViewer/server/localstack-service.js b/_reference/localEmailViewer/server/localstack-service.js
new file mode 100644
index 000000000..ad2b7473f
--- /dev/null
+++ b/_reference/localEmailViewer/server/localstack-service.js
@@ -0,0 +1,845 @@
+import fetch from "node-fetch";
+import {
+  DescribeLogGroupsCommand,
+  DescribeLogStreamsCommand,
+  FilterLogEventsCommand
+} from "@aws-sdk/client-cloudwatch-logs";
+import { GetSecretValueCommand, ListSecretsCommand } from "@aws-sdk/client-secrets-manager";
+import { GetObjectCommand, HeadObjectCommand, ListBucketsCommand, ListObjectsV2Command } from "@aws-sdk/client-s3";
+import { simpleParser } from "mailparser";
+import {
+  CLOUDWATCH_ENDPOINT,
+  CLOUDWATCH_REGION,
+  FETCH_TIMEOUT_MS,
+  S3_ENDPOINT,
+  S3_IMAGE_PREVIEW_MAX_BYTES,
+  S3_PREVIEW_MAX_BYTES,
+  S3_REGION,
+  SES_ENDPOINT,
+  SECRETS_ENDPOINT,
+  SECRETS_REGION,
+  cloudWatchLogsClient,
+  s3Client,
+  secretsManagerClient
+} from "./config.js";
+
+async function loadMessages() {
+  const startedAt = Date.now();
+  const sesMessages = await fetchSesMessages();
+  const messages = await Promise.all(sesMessages.map((message, index) => toMessageViewModel(message, index)));
+
+  messages.sort((left, right) => {
+    if ((right.timestampMs || 0) !== (left.timestampMs || 0)) {
+      return (right.timestampMs || 0) - (left.timestampMs || 0);
+    }
+
+    return right.index - left.index;
+  });
+
+  return {
+    endpoint: SES_ENDPOINT,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalMessages: messages.length,
+    parseErrors: messages.filter((message) => Boolean(message.parseError)).length,
+    latestMessageTimestamp: messages[0]?.timestamp || "",
+    messages
+  };
+}
+
+async function fetchSesMessages() {
+  const response = await fetch(SES_ENDPOINT, {
+    signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+  });
+
+  if (!response.ok) {
+    throw new Error(`SES endpoint responded with ${response.status}`);
+  }
+
+  const data = await response.json();
+  return Array.isArray(data.messages) ? data.messages : [];
+}
+
+async function loadLogGroups() {
+  const groups = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new DescribeLogGroupsCommand({
+        nextToken,
+        limit: 50
+      })
+    );
+
+    groups.push(
+      ...(response.logGroups || []).map((group) => ({
+        name: group.logGroupName || "",
+        arn: group.arn || "",
+        storedBytes: group.storedBytes || 0,
+        retentionInDays: group.retentionInDays || 0,
+        creationTime: group.creationTime || 0
+      }))
+    );
+
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 10);
+
+  return groups.sort((left, right) => left.name.localeCompare(right.name));
+}
+
+async function loadLogStreams(logGroupName) {
+  const streams = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new DescribeLogStreamsCommand({
+        logGroupName,
+        descending: true,
+        orderBy: "LastEventTime",
+        nextToken,
+        limit: 50
+      })
+    );
+
+    streams.push(
+      ...(response.logStreams || []).map((stream) => ({
+        name: stream.logStreamName || "",
+        arn: stream.arn || "",
+        lastEventTimestamp: stream.lastEventTimestamp || 0,
+        lastIngestionTime: stream.lastIngestionTime || 0,
+        storedBytes: stream.storedBytes || 0
+      }))
+    );
+
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 6 && streams.length < 250);
+
+  return streams;
+}
+
+async function loadLogEvents({ logGroupName, logStreamName, windowMs, limit }) {
+  const startedAt = Date.now();
+  const eventMap = new Map();
+  const startTime = Date.now() - windowMs;
+  let nextToken;
+  let previousToken = "";
+  let pageCount = 0;
+  let searchedLogStreams = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new FilterLogEventsCommand({
+        logGroupName,
+        logStreamNames: logStreamName ? [logStreamName] : undefined,
+        startTime,
+        endTime: Date.now(),
+        limit,
+        nextToken
+      })
+    );
+
+    for (const event of response.events || []) {
+      const id =
+        event.eventId || `${event.logStreamName || "stream"}-${event.timestamp || 0}-${event.ingestionTime || 0}`;
+
+      if (!eventMap.has(id)) {
+        const message = String(event.message || "").trim();
+        eventMap.set(id, {
+          id,
+          timestamp: event.timestamp || 0,
+          ingestionTime: event.ingestionTime || 0,
+          logStreamName: event.logStreamName || "",
+          message,
+          preview: buildLogPreview(message)
+        });
+      }
+    }
+
+    searchedLogStreams = Math.max(searchedLogStreams, (response.searchedLogStreams || []).length);
+    previousToken = nextToken || "";
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && nextToken !== previousToken && pageCount < 10 && eventMap.size < limit);
+
+  const events = [...eventMap.values()]
+    .sort((left, right) => {
+      if ((right.timestamp || 0) !== (left.timestamp || 0)) {
+        return (right.timestamp || 0) - (left.timestamp || 0);
+      }
+
+      return left.logStreamName.localeCompare(right.logStreamName);
+    })
+    .slice(0, limit);
+
+  return {
+    endpoint: CLOUDWATCH_ENDPOINT,
+    region: CLOUDWATCH_REGION,
+    logGroupName,
+    logStreamName,
+    fetchDurationMs: Date.now() - startedAt,
+    latestTimestamp: events[0]?.timestamp || 0,
+    searchedLogStreams,
+    totalEvents: events.length,
+    events
+  };
+}
+
+async function loadSecrets() {
+  const startedAt = Date.now();
+  const secrets = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await secretsManagerClient.send(
+      new ListSecretsCommand({
+        NextToken: nextToken,
+        MaxResults: 50
+      })
+    );
+
+    secrets.push(
+      ...(response.SecretList || []).map((secret, index) => ({
+        id: secret.ARN || secret.Name || `secret-${index}`,
+        name: secret.Name || "Unnamed secret",
+        arn: secret.ARN || "",
+        description: secret.Description || "",
+        createdDate: normalizeTimestamp(secret.CreatedDate),
+        lastChangedDate: normalizeTimestamp(secret.LastChangedDate),
+        lastAccessedDate: normalizeTimestamp(secret.LastAccessedDate),
+        deletedDate: normalizeTimestamp(secret.DeletedDate),
+        primaryRegion: secret.PrimaryRegion || "",
+        owningService: secret.OwningService || "",
+        rotationEnabled: Boolean(secret.RotationEnabled),
+        versionCount: Object.keys(secret.SecretVersionsToStages || {}).length,
+        tagCount: Array.isArray(secret.Tags) ? secret.Tags.length : 0,
+        tags: (secret.Tags || [])
+          .map((tag) => ({
+            key: tag.Key || "",
+            value: tag.Value || ""
+          }))
+          .filter((tag) => tag.key || tag.value)
+      }))
+    );
+
+    nextToken = response.NextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 10 && secrets.length < 500);
+
+  secrets.sort((left, right) => {
+    const leftTime = Date.parse(left.lastChangedDate || left.createdDate || 0) || 0;
+    const rightTime = Date.parse(right.lastChangedDate || right.createdDate || 0) || 0;
+
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+
+    return left.name.localeCompare(right.name);
+  });
+
+  return {
+    endpoint: SECRETS_ENDPOINT,
+    region: SECRETS_REGION,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalSecrets: secrets.length,
+    latestTimestamp: secrets[0]?.lastChangedDate || secrets[0]?.createdDate || "",
+    secrets
+  };
+}
+
+async function loadSecretValue(secretId) {
+  const startedAt = Date.now();
+  const response = await secretsManagerClient.send(
+    new GetSecretValueCommand({
+      SecretId: secretId
+    })
+  );
+
+  const secretBinary = response.SecretBinary
+    ? typeof response.SecretBinary === "string"
+      ? response.SecretBinary
+      : Buffer.from(response.SecretBinary).toString("base64")
+    : "";
+
+  return {
+    endpoint: SECRETS_ENDPOINT,
+    region: SECRETS_REGION,
+    fetchDurationMs: Date.now() - startedAt,
+    id: secretId,
+    name: response.Name || "",
+    arn: response.ARN || "",
+    versionId: response.VersionId || "",
+    versionStages: Array.isArray(response.VersionStages) ? response.VersionStages : [],
+    createdDate: normalizeTimestamp(response.CreatedDate),
+    secretString: typeof response.SecretString === "string" ? response.SecretString : "",
+    secretBinary
+  };
+}
+
+async function loadS3Buckets() {
+  const startedAt = Date.now();
+  const response = await s3Client.send(new ListBucketsCommand({}));
+  const buckets = (response.Buckets || [])
+    .map((bucket) => ({
+      name: bucket.Name || "",
+      creationDate: normalizeTimestamp(bucket.CreationDate)
+    }))
+    .filter((bucket) => bucket.name)
+    .sort((left, right) => left.name.localeCompare(right.name));
+
+  return {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalBuckets: buckets.length,
+    buckets
+  };
+}
+
+async function loadS3Objects({ bucket, prefix }) {
+  const startedAt = Date.now();
+  const objects = [];
+  let continuationToken;
+  let pageCount = 0;
+
+  do {
+    const response = await s3Client.send(
+      new ListObjectsV2Command({
+        Bucket: bucket,
+        Prefix: prefix || undefined,
+        ContinuationToken: continuationToken,
+        MaxKeys: 200
+      })
+    );
+
+    objects.push(
+      ...(response.Contents || []).map((object, index) => ({
+        id: `${bucket}::${object.Key || index}`,
+        bucket,
+        key: object.Key || "",
+        size: object.Size || 0,
+        lastModified: normalizeTimestamp(object.LastModified),
+        etag: String(object.ETag || "").replace(/^"|"$/g, ""),
+        storageClass: object.StorageClass || "STANDARD"
+      }))
+    );
+
+    continuationToken = response.IsTruncated ? response.NextContinuationToken : undefined;
+    pageCount += 1;
+  } while (continuationToken && pageCount < 10 && objects.length < 1000);
+
+  objects.sort((left, right) => {
+    const leftTime = Date.parse(left.lastModified || 0) || 0;
+    const rightTime = Date.parse(right.lastModified || 0) || 0;
+
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+
+    return left.key.localeCompare(right.key);
+  });
+
+  return {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    bucket,
+    prefix,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalObjects: objects.length,
+    latestTimestamp: objects[0]?.lastModified || "",
+    objects
+  };
+}
+
+async function loadS3ObjectPreview({ bucket, key }) {
+  const startedAt = Date.now();
+  const head = await s3Client.send(
+    new HeadObjectCommand({
+      Bucket: bucket,
+      Key: key
+    })
+  );
+
+  const contentType = head.ContentType || guessObjectContentType(key);
+  const contentLength = Number(head.ContentLength || 0);
+  const previewType = resolveS3PreviewType(contentType, key);
+  const result = {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    bucket,
+    key,
+    fetchDurationMs: 0,
+    contentType,
+    contentLength,
+    etag: String(head.ETag || "").replace(/^"|"$/g, ""),
+    lastModified: normalizeTimestamp(head.LastModified),
+    metadata: head.Metadata || {},
+    previewType,
+    previewText: "",
+    imageDataUrl: "",
+    truncated: false
+  };
+
+  const shouldLoadTextPreview = previewType === "json" || previewType === "text" || previewType === "html";
+  const shouldLoadImagePreview =
+    previewType === "image" && contentLength > 0 && contentLength <= S3_IMAGE_PREVIEW_MAX_BYTES;
+
+  if ((shouldLoadTextPreview || shouldLoadImagePreview) && contentLength > 0) {
+    const previewBytes = Math.max(1, Math.min(contentLength || S3_PREVIEW_MAX_BYTES, S3_PREVIEW_MAX_BYTES));
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: bucket,
+        Key: key,
+        Range: `bytes=0-${previewBytes - 1}`
+      })
+    );
+    const content = Buffer.from(await response.Body.transformToByteArray());
+    result.truncated = contentLength > content.length;
+
+    if (shouldLoadImagePreview) {
+      result.imageDataUrl = `data:${contentType};base64,${content.toString("base64")}`;
+    } else {
+      result.previewText = content.toString("utf8");
+    }
+  }
+
+  result.fetchDurationMs = Date.now() - startedAt;
+  return result;
+}
+
+async function loadServiceHealthSummary() {
+  const startedAt = Date.now();
+  const [sesResult, logsResult, secretsResult, s3Result] = await Promise.allSettled([
+    fetchSesMessages(),
+    loadLogGroups(),
+    loadSecrets(),
+    loadS3Buckets()
+  ]);
+
+  return {
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    services: {
+      emails: summarizeHealthResult({
+        icon: "✉️",
+        panel: "emails",
+        label: "SES Emails",
+        result: sesResult,
+        count: sesResult.status === "fulfilled" ? sesResult.value.length : 0,
+        detail: SES_ENDPOINT,
+        noun: "email"
+      }),
+      logs: summarizeHealthResult({
+        icon: "📜",
+        panel: "logs",
+        label: "CloudWatch Logs",
+        result: logsResult,
+        count: logsResult.status === "fulfilled" ? logsResult.value.length : 0,
+        detail: `${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`,
+        noun: "group"
+      }),
+      secrets: summarizeHealthResult({
+        icon: "🔐",
+        panel: "secrets",
+        label: "Secrets Manager",
+        result: secretsResult,
+        count: secretsResult.status === "fulfilled" ? secretsResult.value.totalSecrets : 0,
+        detail: `${SECRETS_ENDPOINT} (${SECRETS_REGION})`,
+        noun: "secret"
+      }),
+      s3: summarizeHealthResult({
+        icon: "🪣",
+        panel: "s3",
+        label: "S3 Explorer",
+        result: s3Result,
+        count: s3Result.status === "fulfilled" ? s3Result.value.totalBuckets : 0,
+        detail: `${S3_ENDPOINT} (${S3_REGION})`,
+        noun: "bucket"
+      })
+    }
+  };
+}
+
+async function findSesMessageById(id) {
+  const messages = await fetchSesMessages();
+  return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
+}
+
+async function parseSesMessageById(id) {
+  const message = await findSesMessageById(id);
+
+  if (!message) {
+    return null;
+  }
+
+  return simpleParser(message.RawData || "");
+}
+
+async function toMessageViewModel(message, index) {
+  const id = resolveMessageId(message, index);
+
+  try {
+    const parsed = await simpleParser(message.RawData || "");
+    const textContent = normalizeText(parsed.text || "");
+    const renderedHtml = buildRenderedHtml(parsed.html || parsed.textAsHtml || "");
+    const timestamp = normalizeTimestamp(message.Timestamp || parsed.date);
+
+    return {
+      id,
+      index,
+      from: formatAddressList(parsed.from) || message.Source || "Unknown sender",
+      to: formatAddressList(parsed.to) || "No To Address",
+      replyTo: formatAddressList(parsed.replyTo),
+      subject: parsed.subject || "No Subject",
+      region: message.Region || "",
+      timestamp,
+      timestampMs: timestamp ? Date.parse(timestamp) : 0,
+      messageId: parsed.messageId || "",
+      rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
+      attachmentCount: parsed.attachments.length,
+      attachments: parsed.attachments.map((attachment, attachmentIndex) => ({
+        index: attachmentIndex,
+        filename: resolveAttachmentFilename(attachment, attachmentIndex),
+        contentType: attachment.contentType || "application/octet-stream",
+        size: attachment.size || 0
+      })),
+      preview: buildPreview(textContent, renderedHtml),
+      textContent,
+      renderedHtml,
+      hasHtml: Boolean(renderedHtml),
+      parseError: ""
+    };
+  } catch (error) {
+    return {
+      id,
+      index,
+      from: message.Source || "Unknown sender",
+      to: "Unknown recipient",
+      replyTo: "",
+      subject: "Unable to parse message",
+      region: message.Region || "",
+      timestamp: normalizeTimestamp(message.Timestamp),
+      timestampMs: message.Timestamp ? Date.parse(message.Timestamp) : 0,
+      messageId: "",
+      rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
+      attachmentCount: 0,
+      attachments: [],
+      preview: "This message could not be parsed. Open the raw view to inspect the MIME source.",
+      textContent: "",
+      renderedHtml: "",
+      hasHtml: false,
+      parseError: error.message
+    };
+  }
+}
+
+function resolveMessageId(message, index = 0) {
+  return message.Id || `${message.Timestamp || "unknown"}-${message.Source || "unknown"}-${index}`;
+}
+
+function resolveAttachmentFilename(attachment, index = 0) {
+  if (attachment?.filename) {
+    return attachment.filename;
+  }
+
+  return `attachment-${index + 1}${attachmentExtension(attachment?.contentType)}`;
+}
+
+function attachmentExtension(contentType) {
+  const normalized = String(contentType || "")
+    .split(";")[0]
+    .trim()
+    .toLowerCase();
+
+  return (
+    {
+      "application/json": ".json",
+      "application/pdf": ".pdf",
+      "application/zip": ".zip",
+      "image/gif": ".gif",
+      "image/jpeg": ".jpg",
+      "image/png": ".png",
+      "image/webp": ".webp",
+      "text/calendar": ".ics",
+      "text/csv": ".csv",
+      "text/html": ".html",
+      "text/plain": ".txt"
+    }[normalized] || ""
+  );
+}
+
+function buildAttachmentDisposition(filename) {
+  const fallback = String(filename || "attachment")
+    .replace(/[^\x20-\x7e]/g, "_")
+    .replace(/["\\]/g, "_");
+
+  return `attachment; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "attachment")}`;
+}
+
+function buildInlineDisposition(filename) {
+  const fallback = String(filename || "file")
+    .replace(/[^\x20-\x7e]/g, "_")
+    .replace(/["\\]/g, "_");
+
+  return `inline; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "file")}`;
+}
+
+function basenameFromKey(key) {
+  const value = String(key || "");
+  const parts = value.split("/").filter(Boolean);
+  return parts[parts.length - 1] || "file";
+}
+
+function guessObjectContentType(key) {
+  const normalizedKey = String(key || "").toLowerCase();
+
+  if (normalizedKey.endsWith(".json")) {
+    return "application/json";
+  }
+
+  if (normalizedKey.endsWith(".csv")) {
+    return "text/csv";
+  }
+
+  if (normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
+    return "text/html";
+  }
+
+  if (normalizedKey.endsWith(".txt") || normalizedKey.endsWith(".log") || normalizedKey.endsWith(".md")) {
+    return "text/plain";
+  }
+
+  if (normalizedKey.endsWith(".png")) {
+    return "image/png";
+  }
+
+  if (normalizedKey.endsWith(".jpg") || normalizedKey.endsWith(".jpeg")) {
+    return "image/jpeg";
+  }
+
+  if (normalizedKey.endsWith(".gif")) {
+    return "image/gif";
+  }
+
+  if (normalizedKey.endsWith(".webp")) {
+    return "image/webp";
+  }
+
+  if (normalizedKey.endsWith(".svg")) {
+    return "image/svg+xml";
+  }
+
+  if (normalizedKey.endsWith(".pdf")) {
+    return "application/pdf";
+  }
+
+  return "application/octet-stream";
+}
+
+function resolveS3PreviewType(contentType, key) {
+  const normalizedType = String(contentType || "").toLowerCase();
+  const normalizedKey = String(key || "").toLowerCase();
+
+  if (normalizedType.includes("json") || normalizedKey.endsWith(".json")) {
+    return "json";
+  }
+
+  if (normalizedType.startsWith("image/")) {
+    return "image";
+  }
+
+  if (normalizedType.includes("html") || normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
+    return "html";
+  }
+
+  if (
+    normalizedType.startsWith("text/") ||
+    [".txt", ".log", ".csv", ".xml", ".yml", ".yaml", ".md"].some((extension) => normalizedKey.endsWith(extension))
+  ) {
+    return "text";
+  }
+
+  return "binary";
+}
+
+function summarizeHealthResult({ icon, panel, label, result, count, detail, noun }) {
+  if (result.status === "fulfilled") {
+    return {
+      ok: true,
+      icon,
+      panel,
+      label,
+      count,
+      summary: `${count} ${noun}${count === 1 ? "" : "s"}`,
+      detail
+    };
+  }
+
+  return {
+    ok: false,
+    icon,
+    panel,
+    label,
+    count: 0,
+    summary: "Needs attention",
+    detail: result.reason?.message || detail
+  };
+}
+
+function normalizeTimestamp(value) {
+  if (!value) {
+    return "";
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toISOString();
+}
+
+function normalizeText(value) {
+  return String(value || "")
+    .replace(/\r\n/g, "\n")
+    .trim();
+}
+
+function buildPreview(textContent, renderedHtml) {
+  const source = (textContent || stripTags(renderedHtml)).replace(/\s+/g, " ").trim();
+
+  if (!source) {
+    return "No message preview available.";
+  }
+
+  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
+}
+
+function buildLogPreview(message) {
+  const source = String(message || "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  if (!source) {
+    return "No log preview available.";
+  }
+
+  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
+}
+
+function clampNumber(value, fallback, min, max) {
+  const parsed = Number(value);
+
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+
+  return Math.min(Math.max(parsed, min), max);
+}
+
+function buildRenderedHtml(html) {
+  if (!html) {
+    return "";
+  }
+
+  const value = String(html);
+  const hasDocument = /<html[\s>]/i.test(value) || /<!doctype/i.test(value);
+
+  if (hasDocument) {
+    return value;
+  }
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base target="_blank">
+    <style>body{margin:0;padding:16px;font-family:Arial,sans-serif;background:#fff;}</style>
+  </head>
+  <body>${value}</body>
+</html>`;
+}
+
+function stripTags(value) {
+  return String(value || "")
+    .replace(/<style[\s\S]*?<\/style>/gi, " ")
+    .replace(/<script[\s\S]*?<\/script>/gi, " ")
+    .replace(/<[^>]+>/g, " ");
+}
+
+function formatAddressList(addresses) {
+  if (!addresses?.value?.length) {
+    return "";
+  }
+
+  return addresses.value
+    .map(({ name, address }) => {
+      if (name && address) {
+        return `${name} <${address}>`;
+      }
+
+      return address || name || "";
+    })
+    .filter(Boolean)
+    .join(", ");
+}
+
+async function loadMessageAttachment(messageId, attachmentIndex) {
+  const parsed = await parseSesMessageById(messageId);
+
+  if (!parsed) {
+    return null;
+  }
+
+  const attachment = parsed.attachments?.[attachmentIndex];
+
+  if (!attachment) {
+    return null;
+  }
+
+  return {
+    filename: resolveAttachmentFilename(attachment, attachmentIndex),
+    contentType: attachment.contentType || "application/octet-stream",
+    content: Buffer.isBuffer(attachment.content) ? attachment.content : Buffer.from(attachment.content || "")
+  };
+}
+
+async function loadS3ObjectDownload({ bucket, key }) {
+  const response = await s3Client.send(
+    new GetObjectCommand({
+      Bucket: bucket,
+      Key: key
+    })
+  );
+
+  return {
+    filename: basenameFromKey(key),
+    contentType: response.ContentType || guessObjectContentType(key),
+    content: Buffer.from(await response.Body.transformToByteArray())
+  };
+}
+
+export {
+  buildAttachmentDisposition,
+  buildInlineDisposition,
+  clampNumber,
+  findSesMessageById,
+  loadLogEvents,
+  loadLogGroups,
+  loadLogStreams,
+  loadMessageAttachment,
+  loadMessages,
+  loadS3Buckets,
+  loadS3ObjectDownload,
+  loadS3ObjectPreview,
+  loadS3Objects,
+  loadSecretValue,
+  loadSecrets,
+  loadServiceHealthSummary
+};
diff --git a/_reference/localEmailViewer/server/page.js b/_reference/localEmailViewer/server/page.js
new file mode 100644
index 000000000..15cb6deea
--- /dev/null
+++ b/_reference/localEmailViewer/server/page.js
@@ -0,0 +1,495 @@
+import {
+  CLOUDWATCH_DEFAULT_GROUP,
+  CLOUDWATCH_DEFAULT_LIMIT,
+  CLOUDWATCH_DEFAULT_WINDOW_MS,
+  CLOUDWATCH_ENDPOINT,
+  CLOUDWATCH_REGION,
+  DEFAULT_REFRESH_MS,
+  S3_DEFAULT_BUCKET,
+  S3_ENDPOINT,
+  S3_REGION,
+  SECRETS_ENDPOINT,
+  SECRETS_REGION,
+  SES_ENDPOINT
+} from "./config.js";
+
+function getClientConfig() {
+  return {
+    defaultRefreshMs: DEFAULT_REFRESH_MS,
+    endpoint: SES_ENDPOINT,
+    cloudWatchEndpoint: CLOUDWATCH_ENDPOINT,
+    cloudWatchRegion: CLOUDWATCH_REGION,
+    secretsEndpoint: SECRETS_ENDPOINT,
+    secretsRegion: SECRETS_REGION,
+    s3Endpoint: S3_ENDPOINT,
+    s3Region: S3_REGION,
+    defaultS3Bucket: S3_DEFAULT_BUCKET,
+    defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
+    defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
+    defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
+  };
+}
+
+function renderHtml() {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LocalStack Inspector</title>
+    <style>${renderStyles()}</style>
+  </head>
+  <body>
+    <div class="page">
+      <header class="hero">
+        <div class="heroShell">
+          <div class="heroIdentity">
+            <p class="eyebrow">LocalStack Toolbox</p>
+            <h1>Inspector</h1>
+          </div>
+          <div class="heroTopRow">
+            <div class="heroActions">
+              <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
+              <button id="resetStateButton" class="ghost" type="button">🧹 Reset saved state</button>
+            </div>
+          </div>
+          <div class="heroStatusRow">
+            <span class="heroStatusLabel">Stack</span>
+            <div id="healthStrip" class="healthStrip" aria-live="polite"></div>
+            <button id="healthRefreshButton" class="mini healthRefreshButton" type="button" title="Refresh service health" aria-label="Refresh service health">🩺</button>
+          </div>
+        </div>
+      </header>
+
+      <section id="emailsPanel" class="workspacePanel">
+        <section class="toolControls">
+          <div class="row">
+            <button id="refreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="intervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="statusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <input id="searchInput" class="search" type="search" placeholder="Search subject, sender, preview..." autocomplete="off">
+            <button id="clearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="expandAllButton" class="ghost" type="button">Open all</button>
+            <button id="collapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Total</span><strong id="totalStat">0</strong><small id="visibleStat">0 visible</small></article>
+          <article class="stat"><span>New</span><strong id="newStat">0</strong><small>New since last refresh</small></article>
+          <article class="stat"><span>Newest</span><strong id="newestStat" class="small">No messages</strong><small id="updatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
+        </section>
+
+        <div id="emailsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="banner" class="banner" hidden></div>
+            <div id="empty" class="empty" hidden></div>
+            <section id="list" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="scrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="logsPanel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="logsRefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="logsAutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="logsIntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="logsStatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <label class="chip">Group
+              <select id="logsGroupSelect"></select>
+            </label>
+            <label class="chip">Stream
+              <select id="logsStreamSelect"></select>
+            </label>
+            <label class="chip">Window
+              <select id="logsWindowSelect">
+                <option value="300000">5m</option>
+                <option value="900000" selected>15m</option>
+                <option value="3600000">1h</option>
+                <option value="21600000">6h</option>
+                <option value="86400000">24h</option>
+              </select>
+            </label>
+            <label class="chip">Limit
+              <select id="logsLimitSelect">
+                <option value="100">100</option>
+                <option value="200" selected>200</option>
+                <option value="300">300</option>
+                <option value="500">500</option>
+              </select>
+            </label>
+          </div>
+          <div class="row">
+            <input id="logsSearchInput" class="search" type="search" placeholder="Search stream name or log content..." autocomplete="off">
+            <button id="logsClearSearchButton" class="ghost" type="button">Clear</button>
+            <label class="chip"><input id="logsWrapToggle" type="checkbox" checked> Wrap lines</label>
+            <label class="chip"><input id="logsTailToggle" type="checkbox"> Tail newest</label>
+            <button id="logsExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="logsCollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Events</span><strong id="logsTotalStat">0</strong><small id="logsVisibleStat">0 visible</small></article>
+          <article class="stat"><span>Streams</span><strong id="logsStreamsStat">0</strong><small>Streams in selected group</small></article>
+          <article class="stat"><span>Latest</span><strong id="logsNewestStat" class="small">No events</strong><small id="logsUpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="logsFetchStat" class="small">Idle</strong><small id="logsFetchDetail">Endpoint: ${escapeHtml(CLOUDWATCH_ENDPOINT)} (${escapeHtml(CLOUDWATCH_REGION)})</small></article>
+        </section>
+
+        <div id="logsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="logsBanner" class="banner" hidden></div>
+            <div id="logsEmpty" class="empty" hidden></div>
+            <section id="logsList" class="logList" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="logsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="secretsPanel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="secretsRefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="secretsAutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="secretsIntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="secretsStatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <input id="secretsSearchInput" class="search" type="search" placeholder="Search secret name, description, service, tags..." autocomplete="off">
+            <button id="secretsClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="secretsExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="secretsCollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Secrets</span><strong id="secretsTotalStat">0</strong><small id="secretsVisibleStat">0 visible</small></article>
+          <article class="stat"><span>Loaded</span><strong id="secretsLoadedStat">0</strong><small>Values loaded this session</small></article>
+          <article class="stat"><span>Latest</span><strong id="secretsNewestStat" class="small">No secrets</strong><small id="secretsUpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="secretsFetchStat" class="small">Idle</strong><small id="secretsFetchDetail">Endpoint: ${escapeHtml(SECRETS_ENDPOINT)} (${escapeHtml(SECRETS_REGION)})</small></article>
+        </section>
+
+        <div id="secretsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="secretsBanner" class="banner" hidden></div>
+            <div id="secretsEmpty" class="empty" hidden></div>
+            <section id="secretsList" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="secretsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="s3Panel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="s3RefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="s3AutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="s3IntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="s3StatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <label class="chip">Bucket
+              <select id="s3BucketSelect"></select>
+            </label>
+            <input id="s3PrefixInput" class="search searchCompact" type="search" placeholder="Prefix filter (optional)" autocomplete="off">
+            <button id="s3ApplyPrefixButton" class="ghost" type="button">Apply prefix</button>
+          </div>
+          <div class="row">
+            <input id="s3SearchInput" class="search" type="search" placeholder="Search object key, storage class, or etag..." autocomplete="off">
+            <button id="s3ClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="s3ExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="s3CollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Objects</span><strong id="s3TotalStat">0</strong><small id="s3VisibleStat">0 visible</small></article>
+          <article class="stat"><span>Buckets</span><strong id="s3BucketsStat">0</strong><small>Available in LocalStack</small></article>
+          <article class="stat"><span>Latest</span><strong id="s3NewestStat" class="small">No objects</strong><small id="s3UpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="s3FetchStat" class="small">Idle</strong><small id="s3FetchDetail">Endpoint: ${escapeHtml(S3_ENDPOINT)} (${escapeHtml(S3_REGION)})</small></article>
+        </section>
+
+        <div id="s3ContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="s3Banner" class="banner" hidden></div>
+            <div id="s3Empty" class="empty" hidden></div>
+            <section id="s3List" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="s3ScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>`;
+}
+
+function renderStyles() {
+  return `
+    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--secret-shell:linear-gradient(180deg,rgba(239,251,246,.98),rgba(247,253,249,.99));--secret-body:#f6fcf8;--bucket-shell:linear-gradient(180deg,rgba(255,249,232,.98),rgba(255,252,243,.99));--bucket-body:#fffcf2;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--secret-line:rgba(31,143,101,.2);--bucket-line:rgba(181,137,37,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--secret:#1f8f65;--secret-soft:rgba(31,143,101,.1);--bucket:#9d6b00;--bucket-soft:rgba(181,137,37,.12);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);--secret-shadow:0 16px 32px rgba(31,143,101,.12);--bucket-shadow:0 16px 32px rgba(181,137,37,.12);}
+    *{box-sizing:border-box}
+    html,body{margin:0;height:100%;overflow:hidden}
+    body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
+    button,input,select,textarea{font:inherit}
+    button{cursor:pointer}
+    .page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;max-width:1360px;height:100vh;height:100dvh;margin:0 auto;padding:14px;overflow:hidden}
+    .hero{display:block;margin-bottom:0}
+    .heroShell,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
+    .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
+    .heroShell,.toolControls{border-radius:18px}
+    .heroShell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
+    .toolControls{padding:12px}
+    .heroIdentity{display:grid;gap:3px;min-width:0}
+    .eyebrow{margin:0 0 4px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
+    h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.85rem);line-height:.96;letter-spacing:-.05em}
+    .lede{margin:8px 0 0;max-width:54ch;color:var(--muted);font-size:.92rem}
+    .heroTopRow{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .heroActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .heroStatusRow{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;align-items:center}
+    .heroStatusLabel{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
+    .helper{margin:0;color:var(--muted);font-size:.89rem}
+    .healthStrip{display:flex;flex:1 1 520px;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
+    .healthBadge{display:inline-flex;align-items:center;gap:8px;min-height:30px;max-width:100%;padding:0 10px;border-radius:999px;border:1px solid rgba(31,41,51,.1);background:rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(15,23,42,.06);text-align:left;transition:transform .12s ease,background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
+    .healthBadgeName{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;white-space:nowrap}
+    .healthBadgeSummary{min-width:0;overflow:hidden;color:var(--muted);font-size:.78rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
+    .healthBadge.ok{border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.1)}
+    .healthBadge.bad{border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.1)}
+    .healthBadge.warn{border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.1)}
+    .healthBadge.active{border-color:rgba(207,109,60,.28);background:rgba(207,109,60,.16);box-shadow:0 10px 24px rgba(207,109,60,.12)}
+    .healthBadge.active .healthBadgeName,.healthBadge.active .healthBadgeSummary{color:var(--ink)}
+    .healthRefreshButton{flex:0 0 auto;padding:0 10px}
+    .primary,.ghost,.mini,.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .themeToggle{white-space:nowrap}
+    .workspacePanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-height:0}
+    .workspacePanel[hidden]{display:none}
+    .toolControls{display:grid;gap:8px}
+    .contentPane{height:100%;min-height:0;overflow:auto;scroll-behavior:smooth;padding-right:4px}
+    .contentStack{display:grid;gap:8px;min-width:100%;padding-bottom:18px}
+    .paneTopWrap{display:flex;justify-content:flex-end;position:sticky;bottom:14px;pointer-events:none;padding-right:10px}
+    .paneTopButton{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(31,41,51,.42);color:#fff;font-size:1.1rem;line-height:1;backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(31,41,51,.18);opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,background-color .12s ease;z-index:6}
+    .paneTopButton.visible{opacity:.78;transform:translateY(0);visibility:visible;pointer-events:auto}
+    .paneTopButton.visible:hover{opacity:1;background:rgba(31,41,51,.62);transform:translateY(-1px)}
+    .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+    .primary,.ghost{min-height:34px;padding:0 12px;font-weight:700}
+    .mini,.tab{min-height:28px;padding:0 10px;font-weight:600}
+    .primary{background:var(--accent);color:#fff7f2}
+    .ghost,.mini{background:rgba(255,255,255,.76);border-color:var(--line);color:var(--ink)}
+    .tab{background:transparent;color:var(--muted)}
+    .tab.active{background:#fff;border-color:rgba(207,109,60,.18);color:var(--ink)}
+    .primary:hover,.ghost:hover,.mini:hover,.tab:hover{transform:translateY(-1px)}
+    .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600;font-size:.88rem}
+    .chip input{margin:0;accent-color:var(--accent)}
+    .chip select{border:none;background:transparent;outline:none;color:var(--ink)}
+    .search{flex:1 1 260px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
+    .searchCompact{flex:1 1 220px}
+    .status{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.86rem;font-weight:600}
+    .status.ok{color:var(--ok);border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.08)}
+    .status.warn{color:var(--warn);border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.08)}
+    .status.bad{color:var(--bad);border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.08)}
+    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:0}
+    .stat{border-radius:16px;padding:10px 12px}
+    .stat span{display:block;margin-bottom:4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .stat strong{display:block;font-size:clamp(1.6rem,3vw,2rem);line-height:1;letter-spacing:-.05em}
+    .stat strong.small{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
+    .stat small{display:block;margin-top:4px;color:var(--muted);font-size:.82rem}
+    .banner,.empty{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
+    .banner{color:var(--bad);border-color:rgba(179,58,58,.24);background:rgba(179,58,58,.08)}
+    .list{display:grid;gap:12px;align-content:start}
+    .logList{display:grid;gap:10px;align-content:start;width:100%}
+    .card{overflow:hidden;border-radius:16px}
+    .card.new{border-color:rgba(31,143,101,.3);box-shadow:var(--card-shadow),0 0 0 1px rgba(31,143,101,.12)}
+    .summary{list-style:none;display:grid;gap:7px;padding:12px 14px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
+    .summary::-webkit-details-marker{display:none}
+    .top,.tags,.toolbar,.actions,.attachments{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+    .top{justify-content:space-between}
+    .head{min-width:0;flex:1 1 320px}
+    .head h2{margin:0;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.18;letter-spacing:-.03em;word-break:break-word}
+    .meta{margin:4px 0 0;color:var(--muted);font-size:.88rem;word-break:break-word}
+    .time,.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:.76rem;font-weight:700}
+    .time{background:rgba(31,41,51,.06)}
+    .tag{background:var(--accent-soft);color:#8d5632}
+    .tag.new{background:rgba(31,143,101,.1);color:var(--ok)}
+    .tag.bad{background:rgba(179,58,58,.1);color:var(--bad)}
+    .preview{margin:0;color:#324150;font-size:.9rem}
+    .body{display:grid;gap:10px;padding:10px 14px 14px;border-top:1px solid rgba(207,109,60,.14);background:var(--card-body)}
+    .toolbar{justify-content:space-between;align-items:center}
+    .tabs{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:rgba(207,109,60,.08)}
+    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
+    .metaCard{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(207,109,60,.12)}
+    .metaCard dt{margin:0 0 4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .metaCard dd{margin:0;word-break:break-word}
+    .attachments{gap:6px}
+    .attachment{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,248,240,.96);border:1px solid rgba(207,109,60,.12);font-size:.84rem}
+    .attachmentLink{color:#8d5632;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
+    .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
+    .logEvent{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
+    .secretCard{background:var(--secret-shell);border:1px solid var(--secret-line);box-shadow:var(--secret-shadow)}
+    .s3Card{background:var(--bucket-shell);border:1px solid var(--bucket-line);box-shadow:var(--bucket-shadow)}
+    .logSummary{list-style:none;display:grid;gap:7px;padding:10px 12px;cursor:pointer}
+    .logSummary::-webkit-details-marker{display:none}
+    .secretSummary{background:linear-gradient(180deg,rgba(244,253,248,.9),rgba(236,249,242,.96))}
+    .s3Summary{background:linear-gradient(180deg,rgba(255,251,238,.92),rgba(255,246,223,.98))}
+    .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
+    .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+    .logSummaryActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .secretTag{background:var(--secret-soft);color:var(--secret);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .bucketTag{background:var(--bucket-soft);color:var(--bucket);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
+    .secretBody{border-top-color:rgba(31,143,101,.14);background:var(--secret-body)}
+    .s3Body{border-top-color:rgba(181,137,37,.18);background:var(--bucket-body)}
+    .logCopyButton{box-shadow:none}
+    .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
+    .secretValuePanel{display:grid;gap:10px}
+    .secretValuePanel pre{border-radius:12px;border:1px solid rgba(31,143,101,.14);padding:12px;background:linear-gradient(180deg,rgba(31,143,101,.04),transparent 140px),#fff}
+    .s3PreviewPanel{display:grid;gap:10px}
+    .s3PreviewImage{max-width:min(100%,640px);border-radius:12px;border:1px solid rgba(181,137,37,.16);background:#fff}
+    .logBody.wrapOff pre{white-space:pre;word-break:normal}
+    .tag.levelError{background:rgba(179,58,58,.12);color:var(--bad)}
+    .tag.levelWarn{background:rgba(157,95,0,.12);color:var(--warn)}
+    .tag.levelInfo{background:rgba(48,113,169,.12);color:var(--info)}
+    .tag.levelDebug{background:rgba(96,112,128,.12);color:var(--muted)}
+    .jsonSyntax .jsonKey{color:#b55f2d}
+    .jsonSyntax .jsonString{color:#1f8f65}
+    .jsonSyntax .jsonNumber{color:#2f6ea9}
+    .jsonSyntax .jsonBoolean{color:#9d5f00}
+    .jsonSyntax .jsonNull{color:#b33a3a}
+    iframe{width:100%;min-height:560px;border:none;background:#fff}
+    pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
+    .placeholder,.inlineError{padding:12px}
+    .inlineError{color:var(--bad)}
+    body[data-theme="dark"]{color-scheme:dark;background:radial-gradient(circle at top left,rgba(207,109,60,.12),transparent 28%),radial-gradient(circle at top right,rgba(48,113,169,.12),transparent 26%),linear-gradient(180deg,#10161d,#17202a)}
+    body[data-theme="dark"] .heroShell,
+    body[data-theme="dark"] .toolControls,
+    body[data-theme="dark"] .stat{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.16);box-shadow:0 14px 30px rgba(0,0,0,.32)}
+    body[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(50,35,28,.96),rgba(31,25,22,.98));border-color:rgba(207,109,60,.24);box-shadow:0 18px 34px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .logEvent{background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(14,24,36,.98));border-color:rgba(73,144,204,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .secretCard{background:linear-gradient(180deg,rgba(19,39,31,.96),rgba(14,30,24,.98));border-color:rgba(64,170,126,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .s3Card{background:linear-gradient(180deg,rgba(52,42,17,.96),rgba(37,30,13,.98));border-color:rgba(181,137,37,.24);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .healthBadge{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.18);box-shadow:0 10px 22px rgba(0,0,0,.28)}
+    body[data-theme="dark"] .healthBadge.active{border-color:rgba(207,109,60,.32);background:rgba(207,109,60,.18);box-shadow:0 12px 26px rgba(0,0,0,.3)}
+    body[data-theme="dark"] .healthBadge.active .healthBadgeName,
+    body[data-theme="dark"] .healthBadge.active .healthBadgeSummary{color:#f8ede6}
+    body[data-theme="dark"] .tab{color:#aab8c8}
+    body[data-theme="dark"] .tab.active,
+    body[data-theme="dark"] .ghost,
+    body[data-theme="dark"] .mini,
+    body[data-theme="dark"] .chip,
+    body[data-theme="dark"] .status,
+    body[data-theme="dark"] .search{background:rgba(18,25,35,.88);border-color:rgba(148,163,184,.18);color:#edf2f7}
+    body[data-theme="dark"] .chip select,
+    body[data-theme="dark"] .search::placeholder{color:#9fb0c2}
+    body[data-theme="dark"] .ghost,
+    body[data-theme="dark"] .mini,
+    body[data-theme="dark"] .tab.active{border-color:rgba(148,163,184,.18)}
+    body[data-theme="dark"] .summary{background:linear-gradient(180deg,rgba(58,40,31,.88),rgba(45,33,28,.96))}
+    body[data-theme="dark"] .body{background:#211a17;border-top-color:rgba(207,109,60,.18)}
+    body[data-theme="dark"] .logSummary{background:linear-gradient(180deg,rgba(21,34,47,.94),rgba(16,27,39,.98))}
+    body[data-theme="dark"] .logBody{background:#13212d;border-top-color:rgba(73,144,204,.18)}
+    body[data-theme="dark"] .secretSummary{background:linear-gradient(180deg,rgba(21,43,34,.94),rgba(16,34,27,.98))}
+    body[data-theme="dark"] .secretBody{background:#12241c;border-top-color:rgba(64,170,126,.18)}
+    body[data-theme="dark"] .s3Summary{background:linear-gradient(180deg,rgba(53,41,19,.94),rgba(39,31,15,.98))}
+    body[data-theme="dark"] .s3Body{background:#241d10;border-top-color:rgba(181,137,37,.18)}
+    body[data-theme="dark"] .metaCard{background:rgba(17,25,35,.64);border-color:rgba(148,163,184,.14)}
+    body[data-theme="dark"] .attachment{background:rgba(50,35,28,.9);border-color:rgba(207,109,60,.18)}
+    body[data-theme="dark"] .attachmentLink{color:#f6c4a9}
+    body[data-theme="dark"] .attachmentLink:hover{background:rgba(75,52,39,.96);border-color:rgba(246,196,169,.26)}
+    body[data-theme="dark"] .panel,
+    body[data-theme="dark"] pre,
+    body[data-theme="dark"] .logBody pre{background:linear-gradient(180deg,rgba(73,144,204,.06),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .secretValuePanel pre{background:linear-gradient(180deg,rgba(64,170,126,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .s3PreviewPanel pre{background:linear-gradient(180deg,rgba(181,137,37,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .panel{border-color:rgba(148,163,184,.14)}
+    body[data-theme="dark"] .banner,
+    body[data-theme="dark"] .empty{background:rgba(15,21,30,.82);border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .time{background:rgba(148,163,184,.12);color:#e8edf3}
+    body[data-theme="dark"] .tag{background:rgba(207,109,60,.14);color:#f0c2aa}
+    body[data-theme="dark"] .logTag{background:rgba(73,144,204,.16);color:#93cfff}
+    body[data-theme="dark"] .secretTag{background:rgba(64,170,126,.16);color:#9fe0be}
+    body[data-theme="dark"] .bucketTag{background:rgba(181,137,37,.16);color:#f1d38c}
+    body[data-theme="dark"] .preview,
+    body[data-theme="dark"] .logPreview,
+    body[data-theme="dark"] .metaCard dd,
+    body[data-theme="dark"] .head h2,
+    body[data-theme="dark"] .stat strong,
+    body[data-theme="dark"] h1{color:#edf2f7}
+    body[data-theme="dark"] .jsonSyntax .jsonKey{color:#f0b08a}
+    body[data-theme="dark"] .jsonSyntax .jsonString{color:#80d5b0}
+    body[data-theme="dark"] .jsonSyntax .jsonNumber{color:#94c9ff}
+    body[data-theme="dark"] .jsonSyntax .jsonBoolean{color:#f0c274}
+    body[data-theme="dark"] .jsonSyntax .jsonNull{color:#ff9c9c}
+    body[data-theme="dark"] .meta,
+    body[data-theme="dark"] .helper,
+    body[data-theme="dark"] .lede,
+    body[data-theme="dark"] .stat small,
+    body[data-theme="dark"] .stat span,
+    body[data-theme="dark"] .chip,
+    body[data-theme="dark"] .tab{color:#aab8c8}
+    body[data-theme="dark"] .paneTopButton{border-color:rgba(255,255,255,.18);background:rgba(8,12,18,.58);color:#edf2f7}
+    body[data-theme="dark"] .paneTopButton.visible:hover{background:rgba(8,12,18,.8)}
+    @media (max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
+    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row,.heroActions{align-items:stretch}.heroTopRow{justify-content:stretch;flex-basis:100%}.heroStatusRow{align-items:flex-start}.heroStatusLabel,.healthStrip{flex-basis:100%}.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.healthBadge{justify-content:flex-start}.logSummaryTop,.logSummaryActions{align-items:flex-start}.contentPane{min-height:300px}iframe{min-height:420px}}
+  `;
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export { getClientConfig, renderHtml };