@teamvelix/velix 5.2.7 → 5.2.9

package/dist/runtime/start-dev.js

@@ -707,7 +707,7 @@ init_esm_shims();
 
 // version.ts
 init_esm_shims();
-var VERSION = "5.2.7";
+var VERSION = "5.2.8";
 
 // logger.ts
 var colors = {
@@ -1638,99 +1638,84 @@ function generate404Page(pathname = "/") {
     <title>404 - Page Not Found | Velix v${VERSION}</title>
     <link rel="icon" href="/favicon.webp">
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { 
-          margin: 0; 
-          background: #161616;
-          color: white; 
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
-          display: flex; 
-          align-items: center; 
-          justify-content: center; 
-          min-height: 100vh; 
-          text-align: center;
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+          background: #0a0a0a;
+          color: #ededed;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
           -webkit-font-smoothing: antialiased;
         }
-        .container { 
-          max-width: 700px; 
-          padding: 60px 40px; 
-          position: relative;
-          z-index: 10;
+        .container {
+          display: flex;
+          align-items: center;
+          gap: 32px;
+          padding: 32px;
         }
-        h1 { 
-          font-size: 160px; 
-          font-weight: 900; 
-          margin: 0; 
-          background: linear-gradient(135deg, #00e87a 0%, #22d3ee 100%); 
-          -webkit-background-clip: text; 
-          -webkit-text-fill-color: transparent; 
-          line-height: 1; 
-          letter-spacing: -0.05em;
-          animation: fadeIn 0.5s ease-out;
+        .code {
+          font-size: 48px;
+          font-weight: 700;
+          line-height: 1;
+          color: #fff;
+          border-right: 1px solid rgba(255,255,255,0.15);
+          padding-right: 32px;
         }
-        h2 { 
-          font-size: 32px; 
-          font-weight: 700; 
-          margin: 24px 0 12px; 
+        .body h1 {
+          font-size: 18px;
+          font-weight: 600;
           color: #ededed;
-          animation: fadeIn 0.5s ease-out 0.1s backwards;
+          margin-bottom: 8px;
         }
-        p { 
-          color: #888; 
-          font-size: 16px; 
-          line-height: 1.7; 
-          margin-bottom: 36px;
-          animation: fadeIn 0.5s ease-out 0.2s backwards;
-        }
-        code { 
-          background: #222; 
-          padding: 3px 8px; 
-          border-radius: 6px; 
-          font-family: 'JetBrains Mono', monospace; 
-          color: #00e87a; 
+        .body p {
           font-size: 14px;
-          border: 1px solid #333;
+          color: #888;
+          margin-bottom: 20px;
         }
-        .btn-group {
-          display: flex;
-          gap: 12px;
-          justify-content: center;
-          animation: fadeIn 0.5s ease-out 0.3s backwards;
+        .body p code {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 13px;
+          background: rgba(255,255,255,0.07);
+          padding: 2px 6px;
+          border-radius: 4px;
+          color: #ccc;
         }
-        .btn { 
-          display: inline-block; 
-          background: #222; 
-          color: white; 
-          text-decoration: none; 
-          padding: 12px 28px; 
-          border-radius: 10px; 
-          font-weight: 600; 
+        .actions { display: flex; gap: 10px; }
+        .btn {
+          display: inline-block;
+          padding: 8px 18px;
+          border-radius: 8px;
           font-size: 14px;
-          transition: all 0.2s; 
-          border: 1px solid #333;
-          cursor: pointer;
+          font-weight: 500;
+          text-decoration: none;
+          transition: all .15s;
+          border: 1px solid transparent;
         }
-        .btn:hover { background: #333; }
-        .btn-accent { 
-          background: #00e87a; 
-          color: #000; 
-          border-color: #00e87a;
+        .btn-primary {
+          background: #fff;
+          color: #000;
         }
-        .btn-accent:hover { background: #00d46e; }
-        @keyframes fadeIn {
-          from { opacity: 0; transform: translateY(16px); }
-          to { opacity: 1; transform: translateY(0); }
+        .btn-primary:hover { background: #e5e5e5; }
+        .btn-secondary {
+          background: rgba(255,255,255,0.06);
+          color: #ededed;
+          border-color: rgba(255,255,255,0.1);
         }
+        .btn-secondary:hover { background: rgba(255,255,255,0.1); }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>404</h1>
-        <h2>Page Not Found</h2>
-        <p>The page <code>${pathname}</code> could not be found.<br>It may have been moved or deleted.</p>
-        <div class="btn-group">
-          <a href="/" class="btn btn-accent">Return Home</a>
-          <a href="javascript:history.back()" class="btn">Go Back</a>
+        <div class="code">404</div>
+        <div class="body">
+            <h1>This page could not be found</h1>
+            <p>The path <code>${escapeHtml2(pathname)}</code> does not exist.</p>
+            <div class="actions">
+                <a href="/" class="btn btn-primary">Return Home</a>
+                <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+            </div>
         </div>
     </div>
 </body>
@@ -1743,35 +1728,33 @@ function generate500Page(options) {
   let errorLine = 0;
   let errorFile = "";
   if (isDev && stack) {
-    const stackLines = stack.split("\\n").filter((line) => line.trim());
+    const stackLines = stack.split("\n").filter((l) => l.trim());
     frames = stackLines.slice(1).filter((line) => line.includes("at ")).map((frame) => {
-      const match = frame.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/) || frame.match(/at\s+(.+?):(\d+):(\d+)/);
-      if (match && match.length === 5) {
-        return { funcName: match[1].trim(), file: match[2], line: match[3], col: match[4] };
-      }
-      if (match && match.length === 4) {
-        return { funcName: "(anonymous)", file: match[1].trim(), line: match[2], col: match[3] };
-      }
-      const simpleMatch = frame.match(/at\s+(.+)/);
-      return { funcName: simpleMatch?.[1]?.trim() || "unknown", file: "", line: "", col: "" };
+      const m1 = frame.match(/at\s+(.+?)\s+\((.+?):(\d+):\d+\)/);
+      if (m1) return { call: m1[1].trim(), file: m1[2], line: parseInt(m1[3], 10) };
+      const m2 = frame.match(/at\s+(.+?):(\d+):\d+/);
+      if (m2) return { call: "(anonymous)", file: m2[1].trim(), line: parseInt(m2[2], 10) };
+      return { call: frame.replace(/^\s*at\s+/, "").trim(), file: "", line: null };
     });
-    if (frames.length > 0) {
-      const firstFrame = frames.find((f) => f.file && !f.file.includes("node_modules")) || frames[0];
-      errorFile = firstFrame.file;
-      errorLine = parseInt(firstFrame.line, 10) || 0;
+    const firstUserFrame = frames.find((f) => f.file && !f.file.includes("node_modules")) || frames[0];
+    if (firstUserFrame) {
+      errorFile = firstUserFrame.file;
+      errorLine = firstUserFrame.line || 0;
       if (errorFile && errorLine > 0) {
         try {
           const fs8 = __require("fs");
           if (fs8.existsSync(errorFile)) {
-            const src = fs8.readFileSync(errorFile, "utf-8").split("\\n");
-            const start = Math.max(0, errorLine - 3);
+            const src = fs8.readFileSync(errorFile, "utf-8").split("\n");
+            const start = Math.max(0, errorLine - 4);
             const end = Math.min(src.length, errorLine + 3);
             sourceSnippet = src.slice(start, end).map((l, i) => {
               const num = start + i + 1;
               const isErr = num === errorLine;
-              const prefix = isErr ? "> " : "  ";
-              const numStr = String(num).padStart(4, " ");
-              return `<div class="src-line${isErr ? " src-err" : ""}">${prefix}${numStr} | ${escapeHtml2(l)}</div>`;
+              const numStr = String(num).padStart(3, " ");
+              if (isErr) {
+                return `<div class="src-line src-err"><span class="ln">${numStr}</span>${escapeHtml2(l)}</div>`;
+              }
+              return `<div class="src-line"><span class="ln">${numStr}</span>${escapeHtml2(l)}</div>`;
             }).join("");
           }
         } catch (_) {
@@ -1780,8 +1763,46 @@ function generate500Page(options) {
     }
   }
   const userFrames = frames.filter((f) => f.file && !f.file.includes("node_modules"));
-  const ignoredCount = frames.length - userFrames.length;
+  const ignoredFrames = frames.filter((f) => !f.file || f.file.includes("node_modules"));
   const shortFile = errorFile.replace(/\\/g, "/").replace(/.*\/(?=app\/|server\/|src\/|pages\/)/, "");
+  if (!isDev) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 - Internal Server Error | Velix</title>
+    <link rel="icon" href="/favicon.webp">
+    <style>
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+          background: #0a0a0a;
+          color: #ededed;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          display: flex; align-items: center; justify-content: center;
+          min-height: 100vh;
+          -webkit-font-smoothing: antialiased;
+        }
+        .container { display: flex; align-items: center; gap: 32px; padding: 32px; }
+        .code { font-size: 48px; font-weight: 700; color: #fff; border-right: 1px solid rgba(255,255,255,0.15); padding-right: 32px; }
+        .body h1 { font-size: 18px; font-weight: 600; color: #ededed; margin-bottom: 8px; }
+        .body p { font-size: 14px; color: #888; margin-bottom: 20px; }
+        .btn { display: inline-block; padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; background: #fff; color: #000; transition: all .15s; }
+        .btn:hover { background: #e5e5e5; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="code">500</div>
+        <div class="body">
+            <h1>Internal Server Error</h1>
+            <p>A server-side exception has occurred. Please try again later.</p>
+            <a href="/" class="btn">Return Home</a>
+        </div>
+    </div>
+</body>
+</html>`;
+  }
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -1790,291 +1811,328 @@ function generate500Page(options) {
     <title>Error | Velix v${VERSION}</title>
     <link rel="icon" href="/favicon.webp">
     <style>
-        :root {
-          --bg-body: #000;
-          --bg-card: #111;
-          --border: #333;
-          --text-main: #ededed;
-          --text-muted: #888;
-          --red-tag: #e5484d;
-          --red-bg: rgba(229, 72, 77, 0.15);
-          --code-bg: #000;
-          --code-hl: rgba(255,255,255,0.1);
-          --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-          --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-        }
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
-        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-          background: var(--bg-body);
-          color: var(--text-main);
-          font-family: var(--font-sans);
+          background: rgba(0, 0, 0, 0.85);
+          color: #ededed;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
           min-height: 100vh;
-          line-height: 1.7;
-          margin-bottom: 12px;
-          word-break: break-word;
-        }
-        .error-hint {
-          color: #22c55e;
-          font-size: 14px;
-          margin-bottom: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+          -webkit-font-smoothing: antialiased;
         }
 
-        /* Source block */
-        .source-block {
-          background: #1a1a1a;
+        /* \u2500\u2500 Overlay Card \u2500\u2500 */
+        .overlay {
+          width: 100%;
+          max-width: 940px;
+          background: #111;
           border: 1px solid #2a2a2a;
           border-radius: 12px;
+          box-shadow: 0 24px 64px rgba(0,0,0,0.6);
           overflow: hidden;
-          margin-bottom: 24px;
+          display: flex;
+          flex-direction: column;
+          max-height: calc(100vh - 48px);
         }
-        .source-header {
+
+        /* \u2500\u2500 Header Bar \u2500\u2500 */
+        .header {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 10px 16px;
-          background: #1e1e1e;
+          padding: 12px 20px;
+          background: #161616;
           border-bottom: 1px solid #2a2a2a;
+          gap: 12px;
+          flex-shrink: 0;
+        }
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
           font-size: 13px;
-          color: #aaa;
+          color: #888;
+        }
+        .counter-badge {
+          background: #1e1e1e;
+          border: 1px solid #333;
+          border-radius: 6px;
+          padding: 2px 8px;
+          font-size: 12px;
+          color: #999;
+          font-variant-numeric: tabular-nums;
+        }
+        .nav-btn {
+          background: #1e1e1e;
+          border: 1px solid #333;
+          border-radius: 6px;
+          color: #888;
+          cursor: pointer;
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 13px;
+          transition: all .15s;
         }
-        .source-header .file-icon { color: #666; margin-right: 8px; }
-        .source-header a {
+        .nav-btn:hover:not(:disabled) { background: #2a2a2a; color: #fff; }
+        .nav-btn:disabled { opacity: 0.3; cursor: default; }
+        .framework-tag {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 12px;
           color: #666;
-          text-decoration: none;
-          transition: color .15s;
         }
-        .source-header a:hover { color: #fff; }
+        .framework-tag::before {
+          content: '';
+          display: inline-block;
+          width: 6px; height: 6px;
+          border-radius: 50%;
+          background: #3b82f6;
+        }
+
+        /* \u2500\u2500 Scrollable Content \u2500\u2500 */
+        .content {
+          overflow-y: auto;
+          flex: 1;
+        }
+
+        /* \u2500\u2500 Error Summary \u2500\u2500 */
+        .error-summary {
+          padding: 28px 24px 20px;
+          border-bottom: 1px solid #1e1e1e;
+        }
+        .error-label {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: #f87171;
+          background: rgba(248, 113, 113, 0.1);
+          border: 1px solid rgba(248, 113, 113, 0.25);
+          padding: 3px 8px;
+          border-radius: 4px;
+          margin-bottom: 14px;
+        }
+        .error-label svg { width: 10px; height: 10px; fill: currentColor; }
+        .error-message {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 1.5;
+          color: #fff;
+          word-break: break-word;
+        }
+        .error-location {
+          margin-top: 10px;
+          font-size: 13px;
+          color: #888;
+        }
+        .error-location strong { color: #ccc; }
+
+        /* \u2500\u2500 Source Block \u2500\u2500 */
+        .source-block {
+          border-bottom: 1px solid #1e1e1e;
+        }
+        .source-topbar {
+          display: flex;
+          align-items: center;
+          padding: 10px 16px;
+          background: #161616;
+          border-bottom: 1px solid #1e1e1e;
+          gap: 8px;
+          font-size: 12px;
+          color: #666;
+        }
+        .source-topbar .filepath { color: #aaa; font-family: ui-monospace, monospace; }
         .source-code {
-          padding: 12px 0;
+          background: #0d0d0d;
           overflow-x: auto;
-          font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
+          padding: 10px 0;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
           font-size: 13px;
           line-height: 1.7;
         }
         .src-line {
-          padding: 0 16px;
+          display: flex;
+          align-items: flex-start;
+          padding: 0 20px;
           white-space: pre;
-          color: #888;
+          color: #555;
+        }
+        .src-line .ln {
+          color: #3a3a3a;
+          text-align: right;
+          width: 36px;
+          margin-right: 16px;
+          flex-shrink: 0;
+          user-select: none;
         }
         .src-err {
-          background: rgba(255,50,50,0.1);
-          color: #ff8a8a;
-          font-weight: 500;
+          background: rgba(239, 68, 68, 0.08);
+          color: #fca5a5;
+          position: relative;
+        }
+        .src-err .ln { color: #ef4444; }
+        .src-err::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0; bottom: 0;
+          width: 3px;
+          background: #ef4444;
         }
 
-        /* Call stack */
-        .stack-section { margin-bottom: 24px; }
-        .stack-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 12px;
+        /* \u2500\u2500 Call Stack \u2500\u2500 */
+        .callstack {
+          padding: 20px 24px;
         }
-        .stack-label {
-          font-size: 15px;
-          font-weight: 700;
-          color: #ededed;
+        .callstack-header {
           display: flex;
           align-items: center;
-          gap: 8px;
+          justify-content: space-between;
+          margin-bottom: 14px;
         }
-        .stack-count {
-          background: #2a2a2a;
-          color: #aaa;
-          padding: 2px 8px;
-          border-radius: 6px;
-          font-size: 12px;
+        .callstack-title {
+          font-size: 13px;
           font-weight: 600;
+          color: #aaa;
+          text-transform: uppercase;
+          letter-spacing: 0.06em;
         }
-        .stack-toggle {
-          font-size: 13px;
-          color: #888;
-          cursor: pointer;
+        .ignore-btn {
+          font-size: 12px;
+          color: #555;
           background: none;
           border: none;
+          cursor: pointer;
           display: flex;
           align-items: center;
           gap: 4px;
           transition: color .15s;
         }
-        .stack-toggle:hover { color: #fff; }
+        .ignore-btn:hover { color: #aaa; }
+        .ignore-caret { transition: transform .2s; }
+        .ignore-btn.open .ignore-caret { transform: rotate(90deg); }
 
         .frame {
-          padding: 12px 0;
-          border-bottom: 1px solid #1e1e1e;
-        }
-        .frame:last-child { border-bottom: none; }
-        .frame-name {
-          font-size: 14px;
-          font-weight: 600;
-          color: #ededed;
-          display: flex;
-          align-items: center;
-          gap: 6px;
+          padding: 10px 12px;
+          border-radius: 6px;
           margin-bottom: 4px;
-        }
-        .frame-name a {
-          color: #666;
-          text-decoration: none;
-          transition: color .15s;
-        }
-        .frame-name a:hover { color: #fff; }
-        .frame-loc {
           font-size: 13px;
-          color: #666;
-          font-family: 'JetBrains Mono', 'Fira Code', monospace;
+          cursor: default;
         }
-
-        /* Footer */
-        .footer-row {
-          display: flex;
-          justify-content: flex-end;
-          padding: 16px 0;
-          border-top: 1px solid #1e1e1e;
-          margin-top: 8px;
+        .frame:hover { background: rgba(255,255,255,0.03); }
+        .frame-call {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-weight: 600;
+          color: #e2e8f0;
+          margin-bottom: 3px;
         }
-        .footer-row a {
-          color: #ff6b6b;
-          text-decoration: none;
-          font-size: 13px;
-          font-weight: 500;
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          transition: opacity .15s;
+        .frame-loc {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 12px;
+          color: #555;
         }
-        .footer-row a:hover { opacity: 0.8; }
+        .frame.ignored .frame-call { color: #444; }
 
-        /* Prod mode */
-        .prod-card {
-          background: #1a1a1a;
-          border: 1px solid #2a2a2a;
-          border-radius: 16px;
-          padding: 48px 32px;
-          text-align: center;
-          margin-top: 32px;
-        }
-        .prod-card h2 { font-size: 20px; margin-bottom: 8px; color: #fff; }
-        .prod-card p { font-size: 15px; color: #888; margin-bottom: 24px; }
-        .prod-card a {
-          display: inline-block;
-          padding: 10px 24px;
-          border-radius: 10px;
-          background: #222;
-          border: 1px solid #333;
-          color: #fff;
-          text-decoration: none;
-          font-weight: 500;
-          font-size: 14px;
-          transition: all .15s;
-        }
-        .prod-card a:hover { background: #333; }
+        .ignored-section { margin-top: 8px; display: none; }
+        .ignored-section.open { display: block; }
     </style>
 </head>
 <body>
     <div class="overlay">
-        <!-- Top Bar -->
-        <div class="top-bar">
-            <div class="page-nav">
-                <button id="prev-btn" onclick="changePage(-1)" disabled>\u2039</button>
-                <span><span id="current-page">1</span>/<span id="total-pages">1</span></span>
-                <button id="next-btn" onclick="changePage(1)" disabled>\u203A</button>
-            </div>
-            <div class="version-badge">
-                <span class="version-dot"></span>
-                Velix v${VERSION} esbuild
-            </div>
-        </div>
 
-        <!-- Error Tag -->
-        <div class="error-tag">Unhandled Runtime Error</div>
+      <!-- Header bar -->
+      <div class="header">
+        <div class="header-left">
+          <button class="nav-btn" disabled>\u2039</button>
+          <span class="counter-badge">1 / 1</span>
+          <button class="nav-btn" disabled>\u203A</button>
+          <span style="margin-left: 4px;">Unhandled Runtime Error</span>
+        </div>
+        <div class="framework-tag">Velix v${VERSION} \xB7 esbuild</div>
+      </div>
 
-        <!-- Error Message -->
-        <div class="error-msg">${escapeHtml2(message)}</div>
-        ${pathname ? `<div class="error-hint">Check the render method of '<strong>${escapeHtml2(pathname)}</strong>'.</div>` : ""}
+      <!-- Scrollable content -->
+      <div class="content">
+
+        <!-- Error summary -->
+        <div class="error-summary">
+          <div class="error-label">
+            <svg viewBox="0 0 16 16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4zm.75 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5z"/></svg>
+            Runtime Error
+          </div>
+          <div class="error-message">${escapeHtml2(message)}</div>
+          ${pathname ? `<div class="error-location">in <strong>${escapeHtml2(pathname)}</strong></div>` : ""}
+        </div>
 
-        ${isDev && sourceSnippet ? `
-        <!-- Source Code Block -->
+        ${sourceSnippet ? `
+        <!-- Source code snippet -->
         <div class="source-block">
-            <div class="source-header">
-                <span><span class="file-icon">\u2699</span> ${escapeHtml2(shortFile)}${errorLine ? ` (${errorLine})` : ""}${userFrames[0]?.funcName ? ` @ ${escapeHtml2(userFrames[0].funcName)}` : ""}</span>
-                <a href="#" title="Open in editor">\u2197</a>
-            </div>
-            <div class="source-code">${sourceSnippet}</div>
+          <div class="source-topbar">
+            <svg width="12" height="12" fill="none" viewBox="0 0 24 24"><path stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><polyline stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="14 2 14 8 20 8"/></svg>
+            <span class="filepath">${escapeHtml2(shortFile)}${errorLine ? `:${errorLine}` : ""}</span>
+          </div>
+          <div class="source-code">${sourceSnippet}</div>
         </div>
         ` : ""}
 
-        ${isDev && frames.length > 0 ? `
-        <!-- Call Stack -->
-        <div class="stack-section">
-            <div class="stack-header">
-                <div class="stack-label">
-                    Call Stack
-                    <span class="stack-count">${frames.length}</span>
-                </div>
-                ${ignoredCount > 0 ? `<button class="stack-toggle" onclick="toggleIgnored()">Show ${ignoredCount} ignore-listed frames \u21D5</button>` : ""}
-            </div>
-            <div id="frames-list">
-                ${userFrames.map((f, i) => `
-                <div class="frame" data-frame="${i}">
-                    <div class="frame-name">
-                        <strong>${escapeHtml2(f.funcName)}</strong>
-                        <a href="#" title="Open in editor">\u2197</a>
-                    </div>
-                    <div class="frame-loc">${escapeHtml2(f.file.replace(/.*[\\\/](?=app[\\\/]|server[\\\/]|src[\\\/]|pages[\\\/])/, ""))}${f.line ? ` (${f.line}:${f.col})` : ""}</div>
-                </div>
-                `).join("")}
-            </div>
-            <div id="ignored-frames" style="display:none;">
-                ${frames.filter((f) => !f.file || f.file.includes("node_modules")).map((f, i) => `
-                <div class="frame" data-frame="ignored-${i}">
-                    <div class="frame-name" style="color:#666;">
-                        <strong>${escapeHtml2(f.funcName)}</strong>
-                    </div>
-                    <div class="frame-loc">${escapeHtml2(f.file)}${f.line ? ` (${f.line}:${f.col})` : ""}</div>
-                </div>
-                `).join("")}
+        <!-- Call stack -->
+        <div class="callstack">
+          <div class="callstack-header">
+            <div class="callstack-title">Call Stack</div>
+            ${ignoredFrames.length > 0 ? `
+            <button class="ignore-btn" id="ignoreBtn" onclick="toggleIgnored()">
+              <svg class="ignore-caret" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M4.5 3L7.5 6L4.5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              ${ignoredFrames.length} ignored frames
+            </button>
+            ` : ""}
+          </div>
+
+          <!-- User frames -->
+          ${userFrames.map((f) => `
+          <div class="frame">
+            <div class="frame-call">${escapeHtml2(f.call)}</div>
+            <div class="frame-loc">${escapeHtml2(f.file.replace(/\\/g, "/").replace(/.*\/(?=app\/|server\/|src\/|pages\/)/, ""))}${f.line ? `:${f.line}` : ""}</div>
+          </div>
+          `).join("")}
+
+          <!-- Ignored frames -->
+          ${ignoredFrames.length > 0 ? `
+          <div class="ignored-section" id="ignoredSection">
+            ${ignoredFrames.map((f) => `
+            <div class="frame ignored">
+              <div class="frame-call">${escapeHtml2(f.call)}</div>
+              <div class="frame-loc">${escapeHtml2(f.file)}${f.line ? `:${f.line}` : ""}</div>
             </div>
+            `).join("")}
+          </div>
+          ` : ""}
         </div>
-        ` : `
-        <div class="prod-card">
-            <h2>Application Error</h2>
-            <p>A server-side error occurred. Check your server logs for more details.</p>
-            <a href="/">Return Home</a>
-        </div>
-        `}
 
-        <!-- Footer -->
-        <div class="footer-row">
-            <a href="javascript:location.reload()">Was this helpful? \u21BB</a>
-        </div>
-    </div>
+      </div><!-- /content -->
+    </div><!-- /overlay -->
 
     <script>
-        let currentPage = 1;
-        const totalPages = 1;
-        document.getElementById('total-pages').textContent = totalPages;
-
-        function changePage(d) {
-            const next = currentPage + d;
-            if (next >= 1 && next <= totalPages) {
-                currentPage = next;
-                document.getElementById('current-page').textContent = currentPage;
-                document.getElementById('prev-btn').disabled = currentPage === 1;
-                document.getElementById('next-btn').disabled = currentPage === totalPages;
-            }
-        }
-
-        function toggleIgnored() {
-            const el = document.getElementById('ignored-frames');
-            if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
-        }
-
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowLeft') changePage(-1);
-            if (e.key === 'ArrowRight') changePage(1);
-        });
+      function toggleIgnored() {
+        const btn = document.getElementById('ignoreBtn');
+        const sec = document.getElementById('ignoredSection');
+        if (!btn || !sec) return;
+        const open = sec.classList.toggle('open');
+        btn.classList.toggle('open', open);
+      }
     </script>
 </body>
 </html>`;