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/README.md b/_reference/localEmailViewer/README.md
index 3f8a6fc71..cbfe9e555 100644
--- a/_reference/localEmailViewer/README.md
+++ b/_reference/localEmailViewer/README.md
@@ -1,7 +1,62 @@
-This will connect to your dockers local stack session and render the email in HTML.
+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
+- Secrets Manager secrets and values
+- S3 buckets and object previews
+
+```shell
+npm start
+```
+
+Or:
```shell
node index.js
```
-http://localhost:3334
+Open: http://localhost:3334
+
+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, 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, 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
+
+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
+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
+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 1dd17f779..67df19055 100644
--- a/_reference/localEmailViewer/index.js
+++ b/_reference/localEmailViewer/index.js
@@ -1,96 +1,342 @@
-// index.js
-
import express from "express";
-import fetch from "node-fetch";
-import { simpleParser } from "mailparser";
+import { readFileSync } from "node:fs";
+import {
+ 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 {
+ 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 = 3334;
+const CLIENT_APP_PATH = new URL("./public/client-app.js", import.meta.url);
+const CLIENT_APP_SOURCE = readFileSync(CLIENT_APP_PATH, "utf8");
-app.get("/", async (req, res) => {
+app.use((req, res, next) => {
+ res.set("Cache-Control", "no-store");
+ next();
+});
+
+app.get("/", (req, res) => {
+ res.type("html").send(renderHtml());
+});
+
+app.get("/app.js", (req, res) => {
+ res.type("application/javascript").send(`${CLIENT_APP_SOURCE}\n\nclientApp(${JSON.stringify(getClientConfig())});\n`);
+});
+
+app.get("/health", (req, res) => {
+ res.json({
+ ok: true,
+ endpoint: SES_ENDPOINT,
+ endpoints: {
+ ses: SES_ENDPOINT,
+ cloudWatchLogs: CLOUDWATCH_ENDPOINT,
+ secretsManager: SECRETS_ENDPOINT,
+ s3: S3_ENDPOINT
+ },
+ port: PORT,
+ defaultRefreshMs: DEFAULT_REFRESH_MS
+ });
+});
+
+app.get("/api/service-health", async (req, res) => {
try {
- const response = await fetch("http://localhost:4566/_aws/ses");
- if (!response.ok) {
- throw new Error("Network response was not ok");
- }
- const data = await response.json();
- const messagesHtml = await parseMessages(data.messages);
- res.send(renderHtml(messagesHtml));
+ res.json(await loadServiceHealthSummary());
} catch (error) {
- console.error("Error fetching messages:", error);
- res.status(500).send("Error fetching messages");
+ console.error("Error fetching service health:", error);
+ res.status(502).json({
+ error: "Unable to fetch LocalStack service health",
+ details: error.message
+ });
}
});
-async function parseMessages(messages) {
- const parsedMessages = await Promise.all(
- messages.map(async (message, index) => {
- try {
- const parsed = await simpleParser(message.RawData);
- return `
-
-
-
Message ${index + 1}
-
From: ${message.Source}
-
To: ${parsed.to.text || "No To Address"}
-
Subject: ${parsed.subject || "No Subject"}
-
Region: ${message.Region}
-
Timestamp: ${message.Timestamp}
-
-
${parsed.html || parsed.textAsHtml || "No HTML content available"}
-
-
Message ${index + 1}
-
From: ${message.Source}
-
Region: ${message.Region}
-
Timestamp: ${message.Timestamp}
-
Error parsing email content
-
-
Email Messages Viewer
-
${messagesHtml}
-
+
+
+
+ ${escapeHtml(formatDateTime(event.timestamp))}
+ ${escapeHtml(event.logStreamName || "Unknown stream")}
+ ${levelTag}
+
+
+
+ ${escapeHtml(formatRelative(event.timestamp || Date.now()))}
+
+
${renderLogPreviewContent(event)}
+
+
+
${renderLogBodyContent(event.message)}
+
+ `;
+ }
+
+ function renderSecretCard(secret) {
+ const valueState = secretsState.values[secret.id];
+ const tags = [];
+
+ if (secret.owningService) {
+ tags.push(`${escapeHtml(secret.owningService)}`);
+ }
+
+ if (secret.primaryRegion) {
+ tags.push(`${escapeHtml(secret.primaryRegion)}`);
+ }
+
+ if (secret.rotationEnabled) {
+ tags.push('Rotation on');
+ } else {
+ tags.push('Rotation off');
+ }
+
+ if (secret.tagCount) {
+ tags.push(`${secret.tagCount} tag${secret.tagCount === 1 ? "" : "s"}`);
+ }
+
+ if (valueState?.status === "loaded") {
+ tags.push(`${escapeHtml(valueState.label)}`);
+ }
+
+ if (valueState?.status === "error") {
+ tags.push('Value load failed');
+ }
+
+ return `
+
+
+
+
+
🔐 ${escapeHtml(secret.name)}
+
${escapeHtml(secret.description || secret.arn || "No description")}
+
+
${escapeHtml(formatDateTime(secret.lastChangedDate || secret.createdDate))}
+
${tags.join("")}
+ ${escapeHtml(buildSecretPreview(secret))}
+
+
+
+ ${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")}
+
+
+
+ ${renderSecretValuePanel(secret, valueState)}
+
+
+ `;
+ }
+
+ function renderS3ObjectCard(object) {
+ const previewState = s3State.previews[object.id];
+ const tags = [
+ `${escapeHtml(object.bucket)}`,
+ `${escapeHtml(formatBytes(object.size))}`
+ ];
+
+ if (object.storageClass) {
+ tags.push(`${escapeHtml(object.storageClass)}`);
+ }
+
+ if (previewState?.status === "loaded") {
+ tags.push(`${escapeHtml(previewState.previewType)}`);
+ }
+
+ if (previewState?.status === "error") {
+ tags.push('Preview failed');
+ }
+
+ return `
+
+
+
+
+
🪣 ${escapeHtml(object.key)}
+
${escapeHtml(object.bucket)} • ${escapeHtml(formatBytes(object.size))}
+
+
${escapeHtml(formatDateTime(object.lastModified))}
+
${tags.join("")}
+ ${escapeHtml(buildS3Preview(object))}
+
+
+
+
+
+ ${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")}
+
+
+
${renderS3PreviewPanel(object, previewState)}
+
+ `;
+ }
+
+ 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('New');
+ }
+
+ if (message.attachmentCount) {
+ tags.push(
+ `${message.attachmentCount} attachment${message.attachmentCount === 1 ? "" : "s"}`
+ );
+ }
+
+ tags.push(`${message.hasHtml ? "HTML" : "Text only"}`);
+
+ if (message.parseError) {
+ tags.push('Parse issue');
+ }
+
+ return `
+
+
+
+
+
${escapeHtml(message.subject)}
+
${escapeHtml(message.from)} to ${escapeHtml(message.to)}
+
+
${escapeHtml(formatDateTime(message.timestamp))}
+
${tags.join("")}
+ ${escapeHtml(message.preview)}
+
+
+
+
+
+ ${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) : ""}
+
+
+ ${
+ message.attachments?.length
+ ? `
`
+ : ""
+ }
+
+
${renderPanel(message, view)}
+
+ `;
+ }
+
+ function renderPanel(message, view) {
+ if (view === "rendered" && message.hasHtml) {
+ return ``;
+ }
+
+ if (view === "raw") {
+ const raw = state.raw[message.id];
+
+ if (!raw) {
+ return `Raw MIME source is loaded on demand.
Loading raw source...
';
+ }
+
+ if (raw.status === "error") {
+ return `Unable to load raw source: ${escapeHtml(raw.error)}
${escapeHtml(raw.value)}`;
+ }
+
+ return `${escapeHtml(message.textContent || "No plain-text content available for this message.")}`;
+ }
+
+ function renderSecretValuePanel(secret, valueState) {
+ if (!valueState) {
+ return `Secret values are loaded on demand.
Loading secret value...
';
+ }
+
+ if (valueState.status === "error") {
+ return `Unable to load secret value: ${escapeHtml(valueState.error)}
${revealed ? valueState.displayHtml : maskedHtml}
+ `;
+ }
+
+ function renderS3PreviewPanel(object, previewState) {
+ if (!previewState) {
+ return `Object previews load on demand.
Loading object preview...
';
+ }
+
+ if (previewState.status === "error") {
+ return `Unable to load object preview: ${escapeHtml(previewState.error)}
No inline preview available for this object type.
`;
+
+ if (previewState.previewType === "image" && previewState.imageDataUrl) {
+ previewContent = `
`;
+ } else if (previewState.previewType === "json") {
+ previewContent = `${highlightJsonText(prettyJsonOrText(previewState.previewText))}`;
+ } else if (previewState.previewType === "text" || previewState.previewType === "html") {
+ previewContent = `${escapeHtml(previewState.previewText || "No preview text available.")}`;
+ }
+
+ return `
+
+ ${previewContent}
+ `;
+ }
+
+ function metaCard(label, value) {
+ return `${escapeHtml(label)}${escapeHtml(value)}`;
+ }
+
+ 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 += `${escapeHtml(token)}`;
+ lastIndex = index + token.length;
+ }
+
+ html += escapeHtml(source.slice(lastIndex));
+ return html;
+ }
+
+ function escapeHtml(value) {
+ return String(value ?? "")
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ }
+
+ 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 = /]/i.test(value) || /
+
+
+
+
+
+
+
+ ${value}
+`;
+}
+
+function stripTags(value) {
+ return String(value || "")
+ .replace(//gi, " ")
+ .replace(//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 `
+
+
+
+
+ LocalStack Inspector
+
+
+
+
+
+
+
+
LocalStack Toolbox
+
Inspector
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total00 visible
+ New0New since last refresh
+ NewestNo messagesNot refreshed yet
+ FetchIdleEndpoint: ${escapeHtml(SES_ENDPOINT)}
+
+
+
+
+
+
+
+
+
+ Events00 visible
+ Streams0Streams in selected group
+ LatestNo eventsNot refreshed yet
+ FetchIdleEndpoint: ${escapeHtml(CLOUDWATCH_ENDPOINT)} (${escapeHtml(CLOUDWATCH_REGION)})
+
+
+
+
+
+
+
+
+
+ Secrets00 visible
+ Loaded0Values loaded this session
+ LatestNo secretsNot refreshed yet
+ FetchIdleEndpoint: ${escapeHtml(SECRETS_ENDPOINT)} (${escapeHtml(SECRETS_REGION)})
+
+
+
+
+
+
+
+
+
+ Objects00 visible
+ Buckets0Available in LocalStack
+ LatestNo objectsNot refreshed yet
+ FetchIdleEndpoint: ${escapeHtml(S3_ENDPOINT)} (${escapeHtml(S3_REGION)})
+
+
+
+
+