@salesforce/webapp-experimental 1.79.0 → 1.79.1

package/dist/proxy/index.d.ts

@@ -5,5 +5,4 @@
  */
 export type { ProxyOptions, ProxyHandler } from "./handler.js";
 export { createProxyHandler, injectLivePreviewScript, WEBAPP_HEALTH_CHECK_PARAM, WEBAPP_PROXY_HEADER, } from "./handler.js";
-export { getErrorPageTemplate } from "./error-page.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/proxy/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/proxy/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EACzB,mBAAmB,GACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/proxy/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EACzB,mBAAmB,GACnB,MAAM,cAAc,CAAC"}

package/dist/proxy/index.js

@@ -4,4 +4,3 @@
  * For full license text, see the LICENSE.txt file
  */
 export { createProxyHandler, injectLivePreviewScript, WEBAPP_HEALTH_CHECK_PARAM, WEBAPP_PROXY_HEADER, } from "./handler.js";
-export { getErrorPageTemplate } from "./error-page.js";

package/dist/proxy/livePreviewScript.d.ts

@@ -13,7 +13,6 @@
  *  - Runtime / compile / HMR error listeners
  *  - Error deduplication
  *  - postMessage bridge to the VS Code webview (when running inside an iframe)
- *  - Standalone browser error overlay (when NOT inside an iframe)
  *  - Copy / paste / right-click bridge for VS Code webview
  */
 export declare function getLivePreviewScriptContent(): string;

package/dist/proxy/livePreviewScript.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"livePreviewScript.d.ts","sourceRoot":"","sources":["../../src/proxy/livePreviewScript.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,IAAI,MAAM,CAKpD;AAED,oEAAoE;AACpE,eAAO,MAAM,0BAA0B,sBAAsB,CAAC"}
+{"version":3,"file":"livePreviewScript.d.ts","sourceRoot":"","sources":["../../src/proxy/livePreviewScript.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;;;;;;;;;GAWG;AACH,wBAAgB,2BAA2B,IAAI,MAAM,CAKpD;AAED,oEAAoE;AACpE,eAAO,MAAM,0BAA0B,sBAAsB,CAAC"}

package/dist/proxy/livePreviewScript.js

@@ -18,7 +18,6 @@ let cached = null;
  *  - Runtime / compile / HMR error listeners
  *  - Error deduplication
  *  - postMessage bridge to the VS Code webview (when running inside an iframe)
- *  - Standalone browser error overlay (when NOT inside an iframe)
  *  - Copy / paste / right-click bridge for VS Code webview
  */
 export function getLivePreviewScriptContent() {

package/dist/proxy/livePreviewScript.test.js

@@ -28,11 +28,6 @@ describe("getLivePreviewScriptContent", () => {
         const content = getLivePreviewScriptContent();
         expect(content).toContain("sendErrorToParent");
     });
-    it("should contain the error overlay function", () => {
-        const content = getLivePreviewScriptContent();
-        expect(content).toContain("showErrorOverlayInPage");
-        expect(content).toContain("vscode-error-panel");
-    });
     it("should contain the copy/paste bridge", () => {
         const content = getLivePreviewScriptContent();
         expect(content).toContain("sendCopyMessage");

package/dist/proxy/templates/livePreviewScript.js

@@ -154,189 +154,6 @@
 			);
 		}
 
-		function escapeHtml(text) {
-			if (!text) return "";
-			const div = document.createElement("div");
-			div.textContent = text;
-			return div.innerHTML;
-		}
-
-		// Extracts filename from error data. Mirrors logic in errorPathUtils.ts (extension)
-		// and uiPreviewWebview.js (webview) — keep patterns in sync across all three.
-		function extractFileName(errorData) {
-			const combined =
-				(errorData.message || "") + " " + (errorData.source || "") + " " + (errorData.stack || "");
-			const patterns = [
-				/Failed to reload\s+\/?@?fs?\/?([^\s:?)]+\.[jt]sx?)/,
-				/@fs\/([^\s:?)]+\.[jt]sx?)/,
-				/\/(src\/[^\s:?)]+\.[jt]sx?)/,
-				/\/([^\s\/:?)]+\.[jt]sx?)[\s:?]/,
-				/at\s+\w+\s+\([^)]*\/([^\s\/:?)]+\.[jt]sx?)/,
-			];
-			for (let i = 0; i < patterns.length; i++) {
-				const m = combined.match(patterns[i]);
-				if (m && m[1]) {
-					const parts = m[1].split("/");
-					return parts[parts.length - 1];
-				}
-			}
-			return null;
-		}
-
-		function getFileIconLabel(name) {
-			if (!name) return "JS";
-			const ext = name.split(".").pop().toLowerCase();
-			if (ext === "ts" || ext === "tsx") return "TS";
-			if (ext === "jsx") return "JSX";
-			return "JS";
-		}
-
-		// SVG illustration for error overlay (Figma design asset)
-		const ERROR_OVERLAY_SVG =
-			'<svg width="300" height="192" viewBox="0 0 300 192" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M104.698 144.786C104.458 144.138 103.542 144.138 103.302 144.786L101.757 148.962C101.621 149.33 101.33 149.621 100.962 149.757L96.7861 151.302C96.1381 151.542 96.1381 152.458 96.7861 152.698L100.962 154.243C101.33 154.379 101.621 154.67 101.757 155.038L103.302 159.214C103.542 159.862 104.458 159.862 104.698 159.214L106.243 155.038C106.379 154.67 106.67 154.379 107.038 154.243L111.214 152.698C111.862 152.458 111.862 151.542 111.214 151.302L107.038 149.757C106.67 149.621 106.379 149.33 106.243 148.962L104.698 144.786Z" stroke="#757575" stroke-width="0.6"/><path d="M57.265 44.5117C57.5175 43.8294 58.4825 43.8294 58.735 44.5117L59.8937 47.6433C59.9731 47.8578 60.1422 48.0269 60.3567 48.1063L63.4883 49.265C64.1706 49.5175 64.1706 50.4825 63.4883 50.735L60.3567 51.8937C60.1422 51.9731 59.9731 52.1422 59.8937 52.3567L58.735 55.4883C58.4825 56.1706 57.5175 56.1706 57.265 55.4883L56.1063 52.3567C56.0269 52.1422 55.8578 51.9731 55.6433 51.8937L52.5117 50.735C51.8294 50.4825 51.8294 49.5175 52.5117 49.265L55.6433 48.1063C55.8578 48.0269 56.0269 47.8578 56.1063 47.6433L57.265 44.5117Z" fill="#AEAEAE"/><path d="M236.477 128.332C236.313 127.889 235.687 127.889 235.523 128.332L234.742 130.442C234.691 130.581 234.581 130.691 234.442 130.742L232.332 131.523C231.889 131.687 231.889 132.313 232.332 132.477L234.442 133.258C234.581 133.309 234.691 133.419 234.742 133.558L235.523 135.668C235.687 136.111 236.313 136.111 236.477 135.668L237.258 133.558C237.309 133.419 237.419 133.309 237.558 133.258L239.668 132.477C240.111 132.313 240.111 131.687 239.668 131.523L237.558 130.742C237.419 130.691 237.309 130.581 237.258 130.442L236.477 128.332Z" fill="#AEAEAE"/><rect x="160" y="106" width="2" height="16" transform="rotate(-90 160 106)" fill="#7CB1FE"/><rect x="160" y="88" width="2" height="16" transform="rotate(-90 160 88)" fill="#7CB1FE"/><path d="M56 96C56 89.3726 61.3726 84 68 84L75 84C75 90.6274 69.6274 96 63 96L56 96Z" fill="#066AFE"/><path d="M264 48C257.373 48 252 42.6274 252 36L252 29C258.627 29 264 34.3726 264 41L264 48Z" fill="#066AFE"/><path d="M56 96C56 91.5818 52.4183 88 48 88C48 92.4183 51.5817 96 56 96Z" fill="#7CB1FE"/><path d="M264 48C259.582 48 256 51.5817 256 56C260.418 56 264 52.4183 264 48Z" fill="#7CB1FE"/><path d="M40 152C53.2548 152 64 141.255 64 128C50.7452 128 40 138.745 40 152Z" fill="#066AFE"/><path d="M264 120C250.745 120 240 109.255 240 96C253.255 96 264 106.745 264 120Z" fill="#066AFE"/><path d="M88 96L60 96C48.9543 96 40 104.954 40 116L40 168" stroke="#7CB1FE"/><path d="M216 96H244C255.046 96 264 87.0457 264 76V24" stroke="#7CB1FE"/><path d="M128 64L128 128L112 128C98.7452 128 88 117.255 88 104L88 88C88 74.7452 98.7452 64 112 64L128 64Z" fill="#066AFE"/><path d="M176 128L176 64L192 64C205.255 64 216 74.7452 216 88L216 104C216 117.255 205.255 128 192 128L176 128Z" fill="url(#pg1)"/><defs><linearGradient id="pg1" x1="176" y1="67.5" x2="217.94" y2="86.14" gradientUnits="userSpaceOnUse"><stop stop-color="#7CB1FE"/><stop offset="1" stop-color="#066AFE"/></linearGradient></defs></svg>';
-
-		const COPY_FEEDBACK_DELAY_MS = 1500;
-
-		function injectOverlayStyles() {
-			if (document.getElementById("vscode-error-overlay-styles")) return;
-			const style = document.createElement("style");
-			style.id = "vscode-error-overlay-styles";
-			style.textContent = [
-				'#vscode-error-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:#181818;z-index:999999;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 0 30px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}',
-				".vep-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:46px}",
-				".vep-top{display:flex;flex-direction:column;align-items:center;gap:16px}",
-				".vep-illustration{width:300px;height:192px}",
-				".vep-title{display:flex;align-items:center;gap:8px;padding-bottom:8px}",
-				".vep-title-icon{width:16px;height:16px;color:#FE8AA7;font-size:16px;display:flex;align-items:center;justify-content:center}",
-				".vep-title-text{font-weight:600;font-size:20px;line-height:26px;color:#FE8AA7}",
-				".vep-body{display:flex;flex-direction:column;align-items:center;gap:24px;width:416px}",
-				".vep-fields{display:flex;flex-direction:column;gap:16px;width:100%}",
-				".vep-field{display:flex;flex-direction:column;gap:8px;width:100%}",
-				".vep-label{font-weight:500;font-size:14px;line-height:17px;color:#FFFFFF}",
-				".vep-file-box{box-sizing:border-box;display:flex;align-items:center;padding:4px 8px;gap:4px;width:100%;background:#181818;border:1px solid #444444;border-radius:4px}",
-				".vep-file-icon{font-size:10px;font-weight:700;color:#F9E3B6;letter-spacing:0.3px}",
-				".vep-file-name{font-weight:500;font-size:13px;line-height:16px;color:#AEAEAE;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-				".vep-error-box{box-sizing:border-box;display:flex;align-items:center;padding:8px;gap:4px;width:100%;background:#242424;border:1px solid #FE8AA7;border-radius:8px}",
-				".vep-error-icon{width:16px;height:16px;color:#FE8AA7;font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}",
-				".vep-error-msg{font-weight:500;font-size:12px;line-height:14px;color:#FE8AA7;word-break:break-word}",
-				".vep-stack-box{box-sizing:border-box;padding:8px;width:100%;max-height:200px;overflow-y:auto;background:#181818;border:1px solid #444444;border-radius:4px;font-weight:500;font-size:12px;line-height:14px;color:#AEAEAE;white-space:pre-wrap;word-break:break-word;user-select:text}",
-				".vep-actions{display:flex;gap:8px;width:100%}",
-				".vep-btn{display:flex;align-items:center;gap:4px;padding:2px 4px;background:#066AFE;border-radius:4px;border:none;cursor:pointer;font-weight:500;font-size:11px;line-height:13px;color:#fff;white-space:nowrap}",
-				".vep-btn:hover{background:#0559d4}",
-			].join("\n");
-			document.head.appendChild(style);
-		}
-
-		function showErrorOverlayInPage(errorData) {
-			try {
-				const existing = document.getElementById("vscode-error-panel");
-				if (existing) existing.remove();
-
-				injectOverlayStyles();
-
-				const errorType = errorData.type || "runtime";
-				const titleMap = {
-					network: "Network Error",
-					compile: "Compilation Error",
-					hmr: "HMR Error",
-					component: "Component Error",
-				};
-				const titleText = titleMap[errorType] || "Runtime Error";
-				const fileName = extractFileName(errorData);
-				const fileIcon = getFileIconLabel(fileName);
-
-				const panel = document.createElement("div");
-				panel.id = "vscode-error-panel";
-
-				const fileHtml = fileName
-					? '<div class="vep-field"><div class="vep-label">File</div>' +
-						'<div class="vep-file-box"><span class="vep-file-icon">' +
-						escapeHtml(fileIcon) +
-						"</span>" +
-						'<span class="vep-file-name">' +
-						escapeHtml(fileName) +
-						"</span></div></div>"
-					: "";
-
-				const stackHtml =
-					errorData.stack && errorData.stack.trim()
-						? '<div class="vep-field"><div class="vep-label">Stack Trace</div>' +
-							'<div class="vep-stack-box">' +
-							escapeHtml(errorData.stack) +
-							"</div></div>"
-						: "";
-
-				panel.innerHTML =
-					'<div class="vep-content">' +
-					'<div class="vep-top">' +
-					'<div class="vep-illustration">' +
-					ERROR_OVERLAY_SVG +
-					"</div>" +
-					'<div class="vep-title"><span class="vep-title-icon">\u2297</span>' +
-					'<span class="vep-title-text">' +
-					escapeHtml(titleText) +
-					"</span></div>" +
-					"</div>" +
-					'<div class="vep-body">' +
-					'<div class="vep-fields">' +
-					fileHtml +
-					'<div class="vep-field"><div class="vep-label">Error</div>' +
-					'<div class="vep-error-box"><span class="vep-error-icon">\u2297</span>' +
-					'<span class="vep-error-msg">' +
-					escapeHtml(errorData.message || "Unknown error") +
-					"</span></div></div>" +
-					stackHtml +
-					"</div>" +
-					'<div class="vep-actions">' +
-					'<button class="vep-btn" id="vep-copy-btn">\u{1F4CB} Copy Error</button>' +
-					'<button class="vep-btn" id="vep-retry-btn">\u21BB Retry</button>' +
-					"</div>" +
-					"</div>" +
-					"</div>";
-
-				document.body.appendChild(panel);
-
-				document.getElementById("vep-copy-btn").onclick = function () {
-					const parts = [titleText, ""];
-					if (fileName) parts.push("File: " + fileName);
-					parts.push("Error: " + (errorData.message || "Unknown error"));
-					if (errorData.stack && errorData.stack.trim()) {
-						parts.push("");
-						parts.push("Stack Trace:");
-						parts.push(errorData.stack);
-					}
-					const text = parts.join("\n");
-					const btn = this;
-					if (navigator.clipboard && navigator.clipboard.writeText) {
-						navigator.clipboard
-							.writeText(text)
-							.then(function () {
-								btn.innerHTML = "\u2714 Copied!";
-								setTimeout(function () {
-									btn.innerHTML = "\u{1F4CB} Copy Error";
-								}, COPY_FEEDBACK_DELAY_MS);
-							})
-							.catch(function () {
-								btn.innerHTML = "Copy failed";
-							});
-					}
-				};
-				document.getElementById("vep-retry-btn").onclick = function () {
-					panel.remove();
-					window.location.reload();
-				};
-
-				document.addEventListener("keydown", function onEsc(e) {
-					if (e.key === "Escape") {
-						panel.remove();
-						document.removeEventListener("keydown", onEsc);
-					}
-				});
-			} catch (e) {
-				console.error("[webapps-proxy] showErrorOverlayInPage failed:", e);
-			}
-		}
-
 		function sendErrorToParent(errorData) {
 			const errorHash = getErrorHash(errorData);
 			const now = Date.now();
@@ -380,8 +197,6 @@
 				} catch (err) {
 					console.error("[webapps-proxy] Failed to send error to parent:", err);
 				}
-			} else {
-				showErrorOverlayInPage(errorData);
 			}
 		}
 		// Expose for fetch interceptor: once init runs, network errors use sendErrorToParent (dedup)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/webapp-experimental",
   "description": "[experimental] Core package for Salesforce Web Applications",
-  "version": "1.79.0",
+  "version": "1.79.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@salesforce/core": "^8.23.4",
-    "@salesforce/sdk-data": "^1.79.0",
+    "@salesforce/sdk-data": "^1.79.1",
     "axios": "^1.7.7",
     "micromatch": "^4.0.8",
     "path-to-regexp": "^8.3.0"

package/dist/proxy/error-page.d.ts

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-/**
- * Returns the error page HTML template. Reads from dist/proxy/templates/ at runtime (after postbuild copy).
- * Cached after first read.
- */
-export declare function getErrorPageTemplate(): string;
-//# sourceMappingURL=error-page.d.ts.map

package/dist/proxy/error-page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-page.d.ts","sourceRoot":"","sources":["../../src/proxy/error-page.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAK7C"}

package/dist/proxy/error-page.js

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-const __dirname = dirname(fileURLToPath(import.meta.url));
-let cached = null;
-/**
- * Returns the error page HTML template. Reads from dist/proxy/templates/ at runtime (after postbuild copy).
- * Cached after first read.
- */
-export function getErrorPageTemplate() {
-    if (cached)
-        return cached;
-    const templatePath = join(__dirname, "templates", "error-page.html");
-    cached = readFileSync(templatePath, "utf-8");
-    return cached;
-}

package/dist/proxy/templates/error-page.html

@@ -1,748 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>{{PAGE_TITLE}} - Salesforce Local Dev Proxy</title>
-		{{META_REFRESH}}
-		<style>
-			* {
-				margin: 0;
-				padding: 0;
-				box-sizing: border-box;
-			}
-
-			body {
-				font-family:
-					-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-				background: linear-gradient(135deg, #1e2a47 0%, #2d3e5f 100%);
-				color: #333;
-				min-height: 100vh;
-				padding: 20px;
-			}
-
-			.main-container {
-				max-width: 1400px;
-				margin: 0 auto;
-				background: #e8e8e8;
-				border-radius: 16px;
-				box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-				overflow: hidden;
-			}
-
-			/* ============================================
-         TOP HEADER
-         ============================================ */
-			.top-header {
-				background: #e8e8e8;
-				padding: 30px 40px;
-				display: flex;
-				justify-content: space-between;
-				align-items: flex-start;
-				border-bottom: 1px solid #ccc;
-			}
-
-			.header-left h1 {
-				color: #1a1a1a;
-				font-size: 2.2em;
-				font-weight: 600;
-				margin-bottom: 8px;
-			}
-
-			.header-left .subtitle {
-				color: #666;
-				font-size: 1.05em;
-			}
-
-			.status-badge {
-				padding: 12px 24px;
-				border-radius: 8px;
-				font-weight: 600;
-				font-size: 0.95em;
-			}
-
-			.status-badge.critical {
-				background: #ffcdd2;
-				color: #b71c1c;
-			}
-
-			.status-badge.error {
-				background: #ffebee;
-				color: #c62828;
-			}
-
-			.status-badge.warning {
-				background: #fff3e0;
-				color: #e65100;
-			}
-
-			.status-badge.success {
-				background: #e8f5e9;
-				color: #2e7d32;
-			}
-
-			/* ============================================
-         TWO-COLUMN LAYOUT
-         ============================================ */
-			.content-wrapper {
-				display: grid;
-				grid-template-columns: 1fr 308px;
-				gap: 0;
-				background: #e8e8e8;
-			}
-
-			.main-content {
-				padding: 40px;
-				background: white;
-				border-right: 1px solid #ccc;
-			}
-
-			.diagnostics-panel {
-				padding: 40px 20px;
-				background: #f5f5f5;
-			}
-
-			/* ============================================
-         MAIN CONTENT SECTIONS
-         ============================================ */
-			.content-section {
-				margin-bottom: 30px;
-			}
-
-			.content-section h2 {
-				color: #1a1a1a;
-				font-size: 1.4em;
-				margin-bottom: 15px;
-				font-weight: 600;
-			}
-
-			.content-section h3 {
-				color: #1a1a1a;
-				font-size: 1.1em;
-				margin-bottom: 12px;
-				font-weight: 600;
-			}
-
-			.content-section p {
-				color: #555;
-				line-height: 1.6;
-				margin-bottom: 15px;
-			}
-
-			.content-section ul {
-				list-style: disc;
-				padding-left: 25px;
-				color: #555;
-				line-height: 1.8;
-			}
-
-			/* Message box for errors */
-			.message-box {
-				background: #fff3e0;
-				border-left: 4px solid #ff9800;
-				padding: 20px;
-				border-radius: 6px;
-				margin-bottom: 25px;
-			}
-
-			.message-box p {
-				color: #555;
-				margin: 0;
-			}
-
-			/* Stack trace and code outputs */
-			.code-output {
-				background: #1e1e1e;
-				border-radius: 8px;
-				padding: 20px;
-				max-height: 400px;
-				overflow-y: auto;
-				font-family: "Courier New", Consolas, Monaco, monospace;
-				font-size: 0.9em;
-				line-height: 1.5;
-				margin: 20px 0;
-			}
-
-			.code-output pre {
-				color: #ff6b6b;
-				margin: 0;
-				white-space: pre-wrap;
-				word-wrap: break-word;
-			}
-
-			.stack-trace-container {
-				background: #263238;
-				border-radius: 8px;
-				padding: 20px;
-				max-height: 350px;
-				overflow-y: auto;
-				font-family: "Courier New", Consolas, Monaco, monospace;
-				font-size: 0.9em;
-				line-height: 1.5;
-			}
-
-			/* Suggestions box */
-			.suggestions-box {
-				background: #e3f2fd;
-				border-left: 4px solid #2196f3;
-				padding: 20px;
-				border-radius: 6px;
-				margin: 20px 0;
-			}
-
-			.suggestions-box h3 {
-				color: #1a1a1a;
-				font-size: 1.1em;
-				margin-bottom: 15px;
-			}
-
-			.suggestions-box ul {
-				list-style: none;
-				padding: 0;
-			}
-
-			.suggestions-box li {
-				padding: 8px 0;
-				color: #555;
-				line-height: 1.6;
-			}
-
-			.suggestions-box li::before {
-				content: "💡";
-				margin-right: 10px;
-			}
-
-			/* ============================================
-         DIAGNOSTICS PANEL
-         ============================================ */
-			.diagnostics-panel h2 {
-				color: #1a1a1a;
-				font-size: 1.15em;
-				margin-bottom: 18px;
-				font-weight: 600;
-			}
-
-			.diagnostics-list {
-				list-style: none;
-				padding: 0;
-				margin-bottom: 20px;
-			}
-
-			.diagnostics-list li {
-				margin-bottom: 12px;
-				color: #555;
-				line-height: 1.4;
-				font-size: 0.9em;
-			}
-
-			.diagnostics-list .label {
-				display: block;
-				font-weight: 600;
-				color: #1a1a1a;
-				margin-bottom: 3px;
-				font-size: 0.85em;
-			}
-
-			.diagnostics-list .value {
-				font-family: "Courier New", monospace;
-				font-size: 0.85em;
-				color: #666;
-				word-break: break-word;
-			}
-
-			.diagnostics-list .value code {
-				background: #263238;
-				color: #aed581;
-				padding: 2px 5px;
-				border-radius: 3px;
-				font-size: 0.8em;
-			}
-
-			/* Live logs section */
-			.live-logs {
-				background: #1e1e1e;
-				border-radius: 4px;
-				padding: 12px;
-				margin-top: 18px;
-				font-family: "Courier New", monospace;
-				font-size: 0.75em;
-				color: #90a4ae;
-				max-height: 200px;
-				overflow-y: auto;
-				line-height: 1.6;
-			}
-
-			.live-logs .log-line {
-				margin-bottom: 3px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.live-logs .timestamp {
-				color: #78909c;
-				font-size: 0.9em;
-			}
-
-			.live-logs .log-content {
-				color: #b0bec5;
-			}
-
-			/* Emergency exit commands */
-			.emergency-commands {
-				background: #fff3cd;
-				border: 1px solid #ffc107;
-				border-radius: 4px;
-				padding: 15px;
-				margin-top: 20px;
-			}
-
-			.emergency-commands h3 {
-				color: #856404;
-				font-size: 0.8em;
-				margin: 0 0 8px 0;
-				font-weight: 600;
-			}
-
-			.emergency-commands p {
-				color: #856404;
-				font-size: 0.75em;
-				margin: 0 0 8px 0;
-			}
-
-			.command-item {
-				margin-bottom: 10px;
-			}
-
-			.command-item:last-child {
-				margin-bottom: 0;
-			}
-
-			.command-comment {
-				color: #856404;
-				font-size: 0.7em;
-				margin-bottom: 3px;
-				font-style: italic;
-			}
-
-			.command-wrapper {
-				position: relative;
-			}
-
-			.command-box {
-				background: #263238;
-				color: #aed581;
-				padding: 10px 44px 10px 10px;
-				border-radius: 4px;
-				font-family: "Courier New", monospace;
-				font-size: 0.72em;
-				word-break: break-all;
-				position: relative;
-				min-height: 36px;
-				display: flex;
-				align-items: center;
-			}
-
-			.copy-button {
-				position: absolute;
-				right: 8px;
-				top: 50%;
-				transform: translateY(-50%);
-				background: #4caf50;
-				color: white;
-				border: none;
-				border-radius: 3px;
-				padding: 6px;
-				width: 28px;
-				height: 28px;
-				cursor: pointer;
-				transition: all 0.2s;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-shrink: 0;
-			}
-
-			.copy-button:hover {
-				background: #45a049;
-				transform: translateY(-50%) scale(1.1);
-			}
-
-			.copy-button.copied {
-				background: #2196f3;
-			}
-
-			.copy-button svg {
-				width: 16px;
-				height: 16px;
-				fill: white;
-			}
-
-			/* ============================================
-         BOTTOM FOOTER
-         ============================================ */
-			.footer-section {
-				background: #e8e8e8;
-				padding: 20px 40px;
-				border-top: 1px solid #ccc;
-				text-align: center;
-			}
-
-			.help-text {
-				color: #666;
-				font-size: 0.9em;
-				line-height: 1.5;
-			}
-
-			.help-text strong {
-				color: #333;
-			}
-
-			/* ============================================
-         UTILITY CLASSES
-         ============================================ */
-			.hidden {
-				display: none;
-			}
-
-			.code {
-				background: #263238;
-				color: #aed581;
-				padding: 3px 8px;
-				border-radius: 4px;
-				font-family: "Courier New", Consolas, Monaco, monospace;
-				font-size: 0.9em;
-			}
-
-			.auto-refresh-indicator {
-				background: #e8f5e9;
-				border-left: 4px solid #4caf50;
-				padding: 12px 16px;
-				border-radius: 6px;
-				margin: 20px 0;
-				color: #2e7d32;
-				font-size: 0.9em;
-			}
-
-			.auto-refresh-indicator::before {
-				content: "🔄";
-				margin-right: 8px;
-			}
-
-			/* Error metadata cards */
-			.metadata-grid {
-				display: grid;
-				grid-template-columns: repeat(2, 1fr);
-				gap: 15px;
-				margin: 20px 0;
-			}
-
-			.metadata-card {
-				background: #f9f9f9;
-				padding: 15px;
-				border-radius: 6px;
-				border-left: 3px solid #2196f3;
-			}
-
-			.metadata-card .label {
-				font-weight: 600;
-				color: #1a1a1a;
-				font-size: 0.85em;
-				margin-bottom: 6px;
-			}
-
-			.metadata-card .value {
-				color: #666;
-				font-family: monospace;
-				font-size: 0.9em;
-			}
-
-			/* ============================================
-         SCROLLBARS
-         ============================================ */
-			.code-output::-webkit-scrollbar,
-			.stack-trace-container::-webkit-scrollbar,
-			.live-logs::-webkit-scrollbar {
-				width: 8px;
-			}
-
-			.code-output::-webkit-scrollbar-track,
-			.stack-trace-container::-webkit-scrollbar-track,
-			.live-logs::-webkit-scrollbar-track {
-				background: #1a1f2e;
-				border-radius: 4px;
-			}
-
-			.code-output::-webkit-scrollbar-thumb,
-			.stack-trace-container::-webkit-scrollbar-thumb,
-			.live-logs::-webkit-scrollbar-thumb {
-				background: #4a5568;
-				border-radius: 4px;
-			}
-
-			/* ============================================
-         RESPONSIVE DESIGN
-         ============================================ */
-			@media (max-width: 900px) {
-				.content-wrapper {
-					grid-template-columns: 1fr;
-				}
-
-				.main-content {
-					border-right: none;
-					border-bottom: 1px solid #ccc;
-				}
-
-				.diagnostics-panel {
-					padding: 30px 20px;
-				}
-
-				.metadata-grid {
-					grid-template-columns: 1fr;
-				}
-			}
-
-			@media (max-width: 768px) {
-				.top-header {
-					flex-direction: column;
-					gap: 15px;
-					padding: 20px;
-				}
-
-				.main-content {
-					padding: 25px;
-				}
-			}
-		</style>
-	</head>
-
-	<body>
-		<div class="main-container">
-			<!-- Top Header -->
-			<div class="top-header">
-				<div class="header-left">
-					<h1>Local Dev Proxy</h1>
-					<p class="subtitle">Salesforce preview → Proxy → Your dev server</p>
-				</div>
-				<div class="status-badge {{STATUS_CLASS}}">{{ERROR_STATUS}}</div>
-			</div>
-
-			<!-- Two-Column Content -->
-			<div class="content-wrapper">
-				<!-- Main Content (Left) -->
-				<div class="main-content">
-					<!-- SECTION 1: Simple Error (Dev Server Down) -->
-					<div id="simple-error-section" class="{{SIMPLE_SECTION_CLASS}}">
-						<div class="content-section">
-							<h2>{{ERROR_TITLE}}</h2>
-							{{MESSAGE_CONTENT}}
-						</div>
-
-						<div class="auto-refresh-indicator {{AUTO_REFRESH_CLASS}}">{{AUTO_REFRESH_TEXT}}</div>
-
-						<div class="suggestions-box">
-							<h3>What to do next</h3>
-							<ul>
-								<li>
-									Start your dev server using: <code>npm run start</code> or <code>npm start</code>
-								</li>
-								<li>Verify your dev server is running on the correct port</li>
-								<li>Check webapplication.json for the correct dev server URL</li>
-								<li>This page will auto-refresh when the server is detected</li>
-							</ul>
-						</div>
-					</div>
-
-					<!-- SECTION 2: Runtime Error -->
-					<div id="runtime-error-section" class="{{RUNTIME_SECTION_CLASS}}">
-						<div class="content-section">
-							<h2>⚠️ Runtime Error: {{ERROR_TYPE}}</h2>
-							<div class="message-box">
-								<p>{{ERROR_MESSAGE_TEXT}}</p>
-							</div>
-						</div>
-
-						<div class="content-section">
-							<h3>Stack Trace</h3>
-							<div class="stack-trace-container">{{FORMATTED_STACK_HTML}}</div>
-						</div>
-
-						<div class="metadata-grid">
-							<div class="metadata-card">
-								<div class="label">Error Type</div>
-								<div class="value">{{ERROR_TYPE}}{{ERROR_CODE_BADGE}}</div>
-							</div>
-							<div class="metadata-card">
-								<div class="label">Severity</div>
-								<div class="value">{{SEVERITY_LABEL}}</div>
-							</div>
-							<div class="metadata-card">
-								<div class="label">Timestamp</div>
-								<div class="value">{{TIMESTAMP_FORMATTED}}</div>
-							</div>
-							<div class="metadata-card">
-								<div class="label">Process ID</div>
-								<div class="value">{{PID}}</div>
-							</div>
-						</div>
-
-						<div class="suggestions-box {{SUGGESTIONS_SECTION_CLASS}}">
-							<h3>{{SUGGESTIONS_TITLE}}</h3>
-							<ul>
-								{{SUGGESTIONS_LIST}}
-							</ul>
-						</div>
-					</div>
-
-					<!-- SECTION 3: Dev Server Error -->
-					<div id="dev-server-error-section" class="{{DEV_SERVER_SECTION_CLASS}}">
-						<div class="content-section">
-							<h2>⚠️ {{ERROR_TITLE}}</h2>
-							<div class="message-box">
-								<p>{{ERROR_MESSAGE_TEXT}}</p>
-							</div>
-						</div>
-
-						<div class="content-section">
-							<h3>Error Output</h3>
-							<div class="code-output">
-								<pre>{{STDERR_OUTPUT}}</pre>
-							</div>
-						</div>
-
-						<div class="auto-refresh-indicator {{AUTO_REFRESH_CLASS}}">{{AUTO_REFRESH_TEXT}}</div>
-
-						<div class="suggestions-box {{SUGGESTIONS_SECTION_CLASS}}">
-							<h3>{{SUGGESTIONS_TITLE}}</h3>
-							<ul>
-								{{SUGGESTIONS_LIST}}
-							</ul>
-						</div>
-					</div>
-				</div>
-
-				<!-- Diagnostics Panel (Right) -->
-				<div class="diagnostics-panel">
-					<h2>Diagnostics</h2>
-
-					<ul class="diagnostics-list">
-						<li class="{{SIMPLE_SECTION_CLASS}}">
-							<span class="label">Dev Server URL:</span>
-							<span class="value"><code>{{DEV_SERVER_URL}}</code></span>
-						</li>
-						<li class="{{SIMPLE_SECTION_CLASS}}">
-							<span class="label">Proxy URL:</span>
-							<span class="value"><code>{{PROXY_URL}}</code></span>
-						</li>
-						<li class="{{SIMPLE_SECTION_CLASS}}">
-							<span class="label">Workspace Script:</span>
-							<span class="value"><code>{{WORKSPACE_SCRIPT}}</code></span>
-						</li>
-						<li class="{{SIMPLE_SECTION_CLASS}}">
-							<span class="label">Target Org:</span>
-							<span class="value">{{ORG_TARGET}}</span>
-						</li>
-						<li class="{{SIMPLE_SECTION_CLASS}}">
-							<span class="label">Last Check:</span>
-							<span class="value">{{LAST_CHECK_TIME}}</span>
-						</li>
-
-						<li class="{{RUNTIME_SECTION_CLASS}}">
-							<span class="label">Node Version:</span>
-							<span class="value">{{NODE_VERSION}}</span>
-						</li>
-						<li class="{{RUNTIME_SECTION_CLASS}}">
-							<span class="label">Platform:</span>
-							<span class="value">{{PLATFORM}}</span>
-						</li>
-						<li class="{{RUNTIME_SECTION_CLASS}}">
-							<span class="label">Memory Usage:</span>
-							<span class="value">{{HEAP_USED_MB}} MB / {{HEAP_TOTAL_MB}} MB heap</span>
-						</li>
-						<li class="{{RUNTIME_SECTION_CLASS}}">
-							<span class="label">Process ID:</span>
-							<span class="value">{{PID}}</span>
-						</li>
-					</ul>
-
-					<div class="live-logs {{SIMPLE_SECTION_CLASS}}">
-						<div class="log-line">
-							<span class="timestamp">[{{LAST_CHECK_TIME}}]</span>
-							<span class="log-content">proxy ▶ waiting for backend...</span>
-						</div>
-						<div class="log-line">
-							<span class="timestamp">[{{LAST_CHECK_TIME}}]</span>
-							<span class="log-content">check {{DEV_SERVER_URL}} ▶ unreachable</span>
-						</div>
-						<div class="log-line">
-							<span class="timestamp">[{{LAST_CHECK_TIME}}]</span>
-							<span class="log-content">hint ▶ try "{{WORKSPACE_SCRIPT}}"</span>
-						</div>
-					</div>
-
-					<div class="live-logs {{RUNTIME_SECTION_CLASS}}">
-						<div class="log-line">
-							<span class="timestamp">[{{TIMESTAMP_FORMATTED}}]</span>
-							<span class="log-content">error ▶ {{ERROR_TYPE}} detected</span>
-						</div>
-						<div class="log-line">
-							<span class="log-content">severity ▶ {{SEVERITY_LABEL}}</span>
-						</div>
-					</div>
-
-					<!-- Emergency exit commands -->
-					<div class="emergency-commands">
-						<h3>⚠️ If Ctrl+C doesn't work</h3>
-						<p>Copy and run this command in a new terminal to force-stop the proxy:</p>
-
-						<div class="command-item">
-							<div class="command-comment">Kill all processes on port {{PROXY_PORT}}:</div>
-							<div class="command-wrapper">
-								<div class="command-box">lsof -ti:{{PROXY_PORT}} | xargs kill -9</div>
-								<button
-									class="copy-button"
-									onclick="copyCommand(this, 'lsof -ti:{{PROXY_PORT}} | xargs kill -9')"
-								>
-									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-										<path
-											d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
-										/>
-									</svg>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<script>
-				function copyCommand(button, command) {
-					const textarea = document.createElement("textarea");
-					textarea.value = command;
-					textarea.style.position = "fixed";
-					textarea.style.opacity = "0";
-					document.body.appendChild(textarea);
-					textarea.select();
-					document.execCommand("copy");
-					document.body.removeChild(textarea);
-					const originalHTML = button.innerHTML;
-					button.innerHTML =
-						'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
-					button.classList.add("copied");
-					setTimeout(() => {
-						button.innerHTML = originalHTML;
-						button.classList.remove("copied");
-					}, 2000);
-				}
-			</script>
-
-			<!-- Footer -->
-			<div class="footer-section">
-				<p class="help-text">
-					Salesforce Web App Development Proxy &nbsp;•&nbsp; Press <strong>Ctrl+C</strong> in the
-					terminal to stop the proxy
-				</p>
-			</div>
-		</div>
-	</body>
-</html>