bosia 0.5.6 → 0.5.7

package/README.md

@@ -92,8 +92,8 @@ Data returned is passed as the `data` prop to `+page.svelte`:
 
 ```svelte
 <script lang="ts">
-	let { data } = $props();
-	// data.post, data.params ...
+	let { data, params } = $props();
+	// data.post, params.slug ...
 </script>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.5.6",
+	"version": "0.5.7",
 	"type": "module",
 	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing inspired by SvelteKit. No Node.js, no Vite, no adapters.",
 	"keywords": [
@@ -51,6 +51,7 @@
 	},
 	"dependencies": {
 		"@clack/prompts": "^1.1.0",
+		"@jridgewell/trace-mapping": "^0.3.31",
 		"@tailwindcss/cli": "^4.2.1",
 		"elysia": "^1.4.26",
 		"magic-string": "^0.30.0",

package/src/core/build.ts

@@ -142,6 +142,7 @@ const clientPromise = Bun.build({
 	splitting: true,
 	naming: { chunk: "[name]-[hash].[ext]" },
 	minify: isProduction,
+	sourcemap: isProduction ? "none" : "linked",
 	define: {
 		"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV ?? "development"),
 		...staticDefines,
@@ -156,6 +157,7 @@ const serverPromise = Bun.build({
 	splitting: true,
 	naming: { entry: "index.[ext]", chunk: "[name]-[hash].[ext]" },
 	minify: isProduction,
+	sourcemap: isProduction ? "none" : "linked",
 	external: ["elysia"],
 	plugins: [serverPlugin, ...userServerBunPlugins, makeBosiaSvelteCompiler("bun")],
 });

package/src/core/client/App.svelte

@@ -31,12 +31,19 @@
 
 	let PageComponent = $state<any>(ssrPageComponent);
 	let layoutComponents = $state<any[]>(ssrLayoutComponents ?? []);
+	// Network protocol still ships `params` merged into pageData (see renderer.ts).
+	// Strip it at the component boundary so consumers receive `params` only via
+	// the dedicated prop, matching SvelteKit's surface.
+	const stripParams = (d: Record<string, any>) => {
+		const { params: _p, ...rest } = d;
+		return rest;
+	};
 	// In SSR mode, render directly from props (server module singletons must
 	// not hold per-request state). On the client, read/write through `appState`
 	// so `use:enhance` and other helpers can update the same cells.
-	const pageData = $derived(ssrMode ? (ssrPageData ?? {}) : appState.pageData);
+	const pageData = $derived(ssrMode ? stripParams(ssrPageData ?? {}) : appState.pageData);
 	const layoutData = $derived(ssrMode ? (ssrLayoutData ?? []) : appState.layoutData);
-	const routeParams = $derived(ssrMode ? (ssrPageData?.params ?? {}) : appState.routeParams);
+	const params = $derived(ssrMode ? (ssrPageData?.params ?? {}) : appState.routeParams);
 	const formData = $derived(ssrMode ? ssrFormData : appState.form);
 	const ErrorComponent = $derived(ssrMode ? ssrErrorComponent : appState.errorComponent);
 	const errorProps = $derived(ssrMode ? ssrErrorProps : appState.errorProps);
@@ -257,9 +264,7 @@
 				mergedPageData = {};
 			}
 
-			// Always overlay current match.params — cached pageData carries the
-			// stale params from when the loader ran, so trust the live match.
-			appState.pageData = { ...mergedPageData, params: match.params };
+			appState.pageData = mergedPageData;
 			appState.layoutData = mergedLayoutData;
 			appState.routeParams = match.params;
 			// Successful navigation — clear any prior error state.
@@ -314,7 +319,7 @@
 {:else if layoutComponents.length > 0}
 	{@render renderLayout(0, layoutComponents.length)}
 {:else if PageComponent}
-	<PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
+	<PageComponent data={pageData} {params} form={formData} />
 {:else}
 	<p>Loading...</p>
 {/if}
@@ -324,15 +329,15 @@
 	{@const data = layoutData[index] ?? {}}
 
 	{#if index < leafDepth - 1}
-		<Layout {data}>
+		<Layout {data} {params}>
 			{@render renderLayout(index + 1, leafDepth)}
 		</Layout>
 	{:else}
-		<Layout {data}>
+		<Layout {data} {params}>
 			{#if ErrorComponent}
 				<ErrorComponent {...errorProps ?? {}} />
 			{:else if PageComponent}
-				<PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
+				<PageComponent data={pageData} {params} form={formData} />
 			{:else}
 				<p>Loading...</p>
 			{/if}

package/src/core/client/hydrate.ts

@@ -67,7 +67,10 @@ async function main() {
 
 	// Seed shared client state so `use:enhance` and other helpers
 	// start from the same values App.svelte renders during hydration.
-	appState.pageData = ssrPageData;
+	// Network protocol still ships `params` merged into pageData; strip it
+	// so the in-memory pageData mirrors what +page.svelte receives.
+	const { params: _p, ...pageDataNoParams } = ssrPageData ?? {};
+	appState.pageData = pageDataNoParams;
 	appState.layoutData = ssrLayoutData;
 	appState.routeParams = ssrPageData?.params ?? match?.params ?? {};
 	appState.form = ssrFormData;

package/src/core/devErrorReport.ts

@@ -0,0 +1,30 @@
+// Dev-only bridge: framework catch sites (renderer, server) push errors into
+// the inspector plugin's overlay via a globalThis-set function. The inspector
+// is loaded from disk via the user's bosia.config.ts and lives in a separate
+// module graph from the bundled server, so a direct import would not share
+// state. The global is only set when the inspector plugin is installed; this
+// is a safe no-op otherwise.
+
+interface DevReportInput {
+	source?: "elysia" | "uncaught" | "rejection";
+	message: string;
+	stack?: string;
+}
+
+declare global {
+	// eslint-disable-next-line no-var
+	var __BOSIA_REPORT_ERROR__: ((e: DevReportInput) => void) | undefined;
+}
+
+export function reportDevErrorFromCatch(err: unknown): void {
+	const fn = globalThis.__BOSIA_REPORT_ERROR__;
+	if (typeof fn !== "function") return;
+	const e = err as Error | undefined;
+	try {
+		fn({
+			source: "elysia",
+			message: e?.message ?? String(err),
+			stack: e?.stack,
+		});
+	} catch {}
+}

package/src/core/html.ts

@@ -97,6 +97,7 @@ export function buildHtml(
 	nonce?: string,
 	pageDeps: any = null,
 	layoutDeps: any[] | null = null,
+	bodyEndExtras?: string[],
 ): string {
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
@@ -135,6 +136,8 @@ export function buildHtml(
 			? `\n  <script${n}>!function r(){var e=new EventSource("/__bosia/sse");e.addEventListener("reload",()=>location.reload());e.onopen=()=>r._ok||(r._ok=1);e.onerror=()=>{e.close();setTimeout(r,2000)}}()</script>`
 			: "";
 
+	const bodyEnd = bodyEndExtras?.length ? "\n  " + bodyEndExtras.join("\n  ") : "";
+
 	return `<!DOCTYPE html>
 <html lang="${safeLang(lang)}">
 <head>
@@ -148,7 +151,7 @@ export function buildHtml(
   <script${n}>try{var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(_){}</script>
 </head>
 <body>
-  <div id="app">${body}</div>${scripts}
+  <div id="app">${body}</div>${scripts}${bodyEnd}
 </body>
 </html>`;
 }

package/src/core/plugins/inspector/index.ts

@@ -1,6 +1,9 @@
 import { spawn } from "node:child_process";
+import { randomUUID } from "node:crypto";
+import type { Elysia } from "elysia";
 import { createInspectorBunPlugin } from "./bun-plugin.ts";
 import { getOverlayScript } from "./overlay.ts";
+import { resolveFrame, resolveStack } from "./sourcemap.ts";
 import type { BosiaPlugin } from "../../types/plugin.ts";
 
 export interface InspectorOptions {
@@ -10,13 +13,147 @@ export interface InspectorOptions {
 	aiEndpoint?: string;
 	/** Endpoint path the overlay POSTs to. Defaults to `/__bosia/locate`. */
 	endpoint?: string;
+	/** Capture client + server runtime errors and surface them in the overlay. Default `true`. */
+	errorsEnabled?: boolean;
 }
 
+interface ServerError {
+	id: string;
+	ts: number;
+	source: "elysia" | "uncaught" | "rejection";
+	message: string;
+	stack?: string;
+	file?: string;
+	line?: number;
+	col?: number;
+}
+
+const RUNTIME_ERROR_PREFIX = "[runtime error]";
+
 function buildEditorArgs(editor: string, file: string, line: number, col: number): string[] {
 	if (editor === "zed") return [`${file}:${line}:${col}`];
 	return ["-g", `${file}:${line}:${col}`];
 }
 
+// Parse the top frame out of a stack trace string. Best-effort.
+function parseTopFrame(
+	stack: string | undefined,
+): { file: string; line: number; col: number } | null {
+	if (!stack) return null;
+	const m =
+		/\((https?:\/\/[^)]+|\/[^)]+):(\d+):(\d+)\)/.exec(stack) ||
+		/at\s+(\S+):(\d+):(\d+)/.exec(stack) ||
+		/@(\S+):(\d+):(\d+)/.exec(stack);
+	return m ? { file: m[1], line: Number(m[2]), col: Number(m[3]) } : null;
+}
+
+// Module-scoped state for the error feature. Initialised lazily inside the
+// plugin so importing this module doesn't attach process-wide listeners.
+let processListenersInstalled = false;
+const sseClients = new Set<ReadableStreamDefaultController<Uint8Array>>();
+const dedupMap = new Map<string, { lastTs: number }>();
+const DEDUP_WINDOW_MS = 500;
+// Small bounded replay buffer — errors that fire during a failing render
+// happen *before* the 500 page's overlay can connect to SSE. On connect we
+// flush recent errors so the badge isn't empty.
+const REPLAY_LIMIT = 50;
+const REPLAY_TTL_MS = 30_000;
+const replayBuffer: ServerError[] = [];
+
+function encode(line: string): Uint8Array {
+	return new TextEncoder().encode(line);
+}
+
+function broadcastError(err: ServerError) {
+	const payload = encode(`event: bosia-error\ndata: ${JSON.stringify(err)}\n\n`);
+	for (const ctrl of sseClients) {
+		try {
+			ctrl.enqueue(payload);
+		} catch {
+			sseClients.delete(ctrl);
+		}
+	}
+}
+
+function pushServerError(input: Omit<ServerError, "id" | "ts">) {
+	const firstFrame = input.stack ? (input.stack.split("\n").find((l) => l.trim()) ?? "") : "";
+	const key = `${input.source}:${input.message}:${firstFrame}`;
+	const now = Date.now();
+	const prev = dedupMap.get(key);
+	if (prev && now - prev.lastTs < DEDUP_WINDOW_MS) {
+		prev.lastTs = now;
+		return;
+	}
+	dedupMap.set(key, { lastTs: now });
+
+	const top = parseTopFrame(input.stack);
+	const err: ServerError = {
+		id: randomUUID(),
+		ts: now,
+		source: input.source,
+		message: input.message,
+		stack: input.stack,
+		file: input.file ?? top?.file,
+		line: input.line ?? top?.line,
+		col: input.col ?? top?.col,
+	};
+	replayBuffer.push(err);
+	if (replayBuffer.length > REPLAY_LIMIT) replayBuffer.shift();
+	broadcastError(err);
+}
+
+function flushReplay(ctrl: ReadableStreamDefaultController<Uint8Array>) {
+	const cutoff = Date.now() - REPLAY_TTL_MS;
+	for (const err of replayBuffer) {
+		if (err.ts < cutoff) continue;
+		try {
+			ctrl.enqueue(encode(`event: bosia-error\ndata: ${JSON.stringify(err)}\n\n`));
+		} catch {
+			return;
+		}
+	}
+}
+
+function installProcessListeners() {
+	if (processListenersInstalled) return;
+	processListenersInstalled = true;
+
+	process.on("uncaughtException", (err: Error) => {
+		pushServerError({
+			source: "uncaught",
+			message: err?.message ?? String(err),
+			stack: err?.stack,
+		});
+		// Rethrow so the dev runner's existing crash-recovery still triggers.
+		throw err;
+	});
+
+	process.on("unhandledRejection", (reason: unknown) => {
+		const e = reason as Error | undefined;
+		pushServerError({
+			source: "rejection",
+			message: e?.message ?? String(reason),
+			stack: e?.stack,
+		});
+	});
+}
+
+// Expose the push function via globalThis so framework catch sites — which
+// live in a separately-bundled module graph from this disk-loaded plugin —
+// can notify the inspector without an import dependency. Renderer catches
+// (page load, layout load, SSR load) swallow errors and return a rendered
+// error page, so they never reach Elysia `.onError()` on their own. The
+// global is typed in core/devErrorReport.ts.
+function installGlobalReporter() {
+	globalThis.__BOSIA_REPORT_ERROR__ = (e) => {
+		pushServerError({
+			source: e.source ?? "elysia",
+			message: e.message,
+			stack: e.stack,
+		});
+	};
+}
+
 /**
  * Inspector plugin — alt+click an element in the running dev page to jump
  * to its source in your editor, or open a comment form that hands off to an
@@ -27,6 +164,7 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 	const editor = options.editor ?? "code";
 	const endpoint = options.endpoint ?? "/__bosia/locate";
 	const aiEndpoint = options.aiEndpoint;
+	const errorsEnabled = options.errorsEnabled !== false;
 
 	return {
 		name: "inspector",
@@ -39,7 +177,10 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 
 		backend: {
 			before(app) {
-				return app.post(endpoint, async ({ body }: { body: unknown }) => {
+				// Cast to the base Elysia type — chaining .post/.get/.onError narrows
+				// the generic so the plugin return type drifts unless we widen back.
+				let chained: Elysia = app as unknown as Elysia;
+				chained = chained.post(endpoint, async ({ body }: { body: unknown }) => {
 					const data = (body ?? {}) as {
 						file?: string;
 						line?: number;
@@ -61,6 +202,22 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 
 					const comment = typeof data.comment === "string" ? data.comment.trim() : "";
 					if (comment && aiEndpoint) {
+						// Runtime-error comments arrive with compiled stack frames. Resolve
+						// them lazily here so the AI receives source paths it can actually
+						// edit. Plain alt-click comments skip resolution.
+						let finalFile = file;
+						let finalLine = line;
+						let finalCol = col;
+						let finalComment = comment;
+						if (comment.startsWith(RUNTIME_ERROR_PREFIX)) {
+							const resolved = resolveFrame(file, line, col);
+							if (resolved) {
+								finalFile = resolved.file;
+								finalLine = resolved.line;
+								finalCol = resolved.col;
+							}
+							finalComment = resolveStack(comment);
+						}
 						try {
 							let origin: string;
 							try {
@@ -74,7 +231,12 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 									"content-type": "application/json",
 									origin,
 								},
-								body: JSON.stringify({ file, line, col, comment }),
+								body: JSON.stringify({
+									file: finalFile,
+									line: finalLine,
+									col: finalCol,
+									comment: finalComment,
+								}),
 							});
 							return { ok: true, mode: "ai" as const };
 						} catch (err) {
@@ -110,11 +272,75 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 					}
 					return { ok: true, mode: "editor" as const };
 				});
+
+				if (errorsEnabled) {
+					installProcessListeners();
+					installGlobalReporter();
+
+					// Elysia onError — runs because server.ts registers plugin
+					// backend.before() ahead of the base .onError() responder.
+					chained = chained.onError(({ error }) => {
+						const e = error as Error;
+						pushServerError({
+							source: "elysia",
+							message: e?.message ?? String(error),
+							stack: e?.stack,
+						});
+						// Fall through to the base handler.
+						return undefined;
+					}) as unknown as Elysia;
+
+					// Live SSE stream. New clients also get a flush of the bounded
+					// replay buffer so errors that fired during a failing render
+					// (before the 500 page's overlay could subscribe) are visible.
+					chained = chained.get(
+						"/__bosia/errors",
+						({ request }: { request: Request }) => {
+							const stream = new ReadableStream<Uint8Array>({
+								start(ctrl) {
+									sseClients.add(ctrl);
+									try {
+										ctrl.enqueue(encode(":ok\n\n"));
+									} catch {
+										sseClients.delete(ctrl);
+										return;
+									}
+									flushReplay(ctrl);
+									const ping = setInterval(() => {
+										try {
+											ctrl.enqueue(encode(":ping\n\n"));
+										} catch {
+											clearInterval(ping);
+											sseClients.delete(ctrl);
+										}
+									}, 25_000);
+
+									request.signal.addEventListener("abort", () => {
+										clearInterval(ping);
+										sseClients.delete(ctrl);
+										try {
+											ctrl.close();
+										} catch {}
+									});
+								},
+							});
+							return new Response(stream, {
+								headers: {
+									"Content-Type": "text/event-stream; charset=utf-8",
+									"Cache-Control": "no-cache",
+									Connection: "keep-alive",
+								},
+							});
+						},
+					) as unknown as Elysia;
+				}
+
+				return chained;
 			},
 		},
 
 		render: {
-			bodyEnd: () => getOverlayScript({ aiEndpoint, endpoint }),
+			bodyEnd: () => getOverlayScript({ aiEndpoint, endpoint, errorsEnabled }),
 		},
 	};
 }

package/src/core/plugins/inspector/overlay.ts

@@ -3,6 +3,7 @@ import { safeJsonStringify } from "../../html.ts";
 export interface OverlayConfig {
 	aiEndpoint?: string;
 	endpoint: string;
+	errorsEnabled?: boolean;
 }
 
 export function getOverlayScript(config: OverlayConfig): string {
@@ -16,6 +17,7 @@ const OVERLAY_IIFE = `(function(){
 var CFG=window.__BOSIA_INSPECTOR__||{};
 var EP=CFG.endpoint||"/__bosia/locate";
 var AI=CFG.aiEndpoint||null;
+var ERR_ENABLED=CFG.errorsEnabled!==false;
 var altDown=false,outline=null,tip=null,form=null;
 
 function ensureOutline(){
@@ -50,11 +52,11 @@ function toast(msg,err){
   setTimeout(function(){t.style.opacity="0";setTimeout(function(){t.remove()},200)},2200);
 }
 
-function send(payload,onOk){
+function send(payload,onOk,onErr){
   fetch(EP,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(payload)})
     .then(function(r){return r.json().catch(function(){return{}})})
-    .then(function(j){if(j&&j.ok){onOk&&onOk(j)}else{toast("Inspector: request failed",true)}})
-    .catch(function(){toast("Inspector: network error",true)});
+    .then(function(j){if(j&&j.ok){onOk&&onOk(j)}else{toast("Inspector: request failed",true);onErr&&onErr()}})
+    .catch(function(){toast("Inspector: network error",true);onErr&&onErr()});
 }
 
 function closeForm(){if(form){form.remove();form=null}}
@@ -113,4 +115,157 @@ window.addEventListener("click",function(e){
   if(AI)openForm(loc,el);
   else send(loc,function(){toast("opened "+loc.file+":"+loc.line)});
 },true);
+
+// ─── Error capture + badge UI ─────────────────────────────────
+if(ERR_ENABLED){
+  var errors=[];
+  var lastInteraction=null;
+  var badge=null,panel=null,seenIds={};
+
+  function uid(){return "c-"+Math.random().toString(36).slice(2)+Date.now().toString(36)}
+  function escapeHtml(s){return String(s==null?"":s).replace(/[&<>"']/g,function(c){return{"&":"&amp;","<":"&lt;",">":"&gt;","\\"":"&quot;","'":"&#39;"}[c]})}
+
+  function parseTopFrame(stack){
+    if(!stack)return null;
+    var m=/\\((https?:\\/\\/[^)]+|\\/[^)]+):(\\d+):(\\d+)\\)/.exec(stack)
+        ||/at\\s+(\\S+):(\\d+):(\\d+)/.exec(stack)
+        ||/@(\\S+):(\\d+):(\\d+)/.exec(stack);
+    return m?{file:m[1],line:+m[2],col:+m[3]}:null;
+  }
+
+  function trackInteraction(e){
+    var t=e.target;
+    if(!t||!t.closest)return;
+    var el=t.closest("[data-bosia-loc]");
+    if(el)lastInteraction=el.getAttribute("data-bosia-loc");
+  }
+  window.addEventListener("mousedown",trackInteraction,true);
+  window.addEventListener("keydown",trackInteraction,true);
+
+  function ensureBadge(){
+    if(badge)return;
+    badge=document.createElement("div");
+    badge.style.cssText="position:fixed;bottom:16px;right:16px;background:#dc2626;color:#fff;font:600 12px/1 ui-sans-serif,system-ui,sans-serif;padding:8px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:pointer;z-index:2147483646;display:none;user-select:none";
+    badge.addEventListener("click",togglePanel);
+    document.body.appendChild(badge);
+  }
+  function renderBadge(){
+    ensureBadge();
+    if(!errors.length){badge.style.display="none";if(panel){panel.remove();panel=null}return}
+    badge.style.display="block";
+    badge.textContent="● "+errors.length+" error"+(errors.length===1?"":"s");
+    if(panel)renderPanel();
+  }
+  function togglePanel(){
+    if(panel){panel.remove();panel=null;return}
+    renderPanel();
+  }
+  function renderPanel(){
+    if(panel)panel.remove();
+    panel=document.createElement("div");
+    panel.style.cssText="position:fixed;bottom:56px;right:16px;width:420px;max-height:60vh;overflow:auto;background:#fff;color:#111;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.18);font:13px ui-sans-serif,system-ui,sans-serif;z-index:2147483647";
+    var head='<div style="padding:8px 12px;border-bottom:1px solid #e4e4e7;display:flex;justify-content:space-between;align-items:center"><strong>Runtime errors</strong><button data-clear style="border:0;background:transparent;color:#71717a;font:12px ui-sans-serif,system-ui,sans-serif;cursor:pointer">Clear all</button></div>';
+    var rows="";
+    for(var i=0;i<errors.length;i++){
+      var er=errors[i];
+      var locStr=er.file?(er.file+(er.line?":"+er.line:"")):er.source;
+      rows+='<div data-row="'+er.id+'" style="padding:10px 12px;border-bottom:1px solid #f4f4f5">'
+        +'<div style="font:11px ui-monospace,monospace;color:#71717a;margin-bottom:4px">['+escapeHtml(er.source)+'] '+escapeHtml(locStr)+'</div>'
+        +'<div style="margin-bottom:6px;font-weight:500;word-break:break-word">'+escapeHtml(er.message)+'</div>'
+        +(er.stack?'<details><summary style="cursor:pointer;color:#71717a;font-size:11px">Stack</summary><pre style="margin:6px 0 0;padding:8px;background:#f4f4f5;border-radius:4px;font:11px/1.4 ui-monospace,monospace;white-space:pre-wrap;overflow:auto;max-height:200px">'+escapeHtml(er.stack)+'</pre></details>':"")
+        +'<div style="margin-top:8px;display:flex;gap:6px;justify-content:flex-end">'
+        +(AI?'<button data-send="'+er.id+'" style="padding:4px 10px;border:0;background:#111;color:#fff;border-radius:4px;cursor:pointer;font-size:12px">Send to AI</button>':"")
+        +'<button data-dismiss="'+er.id+'" style="padding:4px 10px;border:1px solid #e4e4e7;background:#fff;border-radius:4px;cursor:pointer;font-size:12px">Dismiss</button>'
+        +'</div>'
+        +'</div>';
+    }
+    panel.innerHTML=head+(rows||'<div style="padding:16px;color:#71717a">No errors</div>');
+    document.body.appendChild(panel);
+    panel.querySelector("[data-clear]").addEventListener("click",function(){errors=[];seenIds={};renderBadge()});
+    var sendBtns=panel.querySelectorAll("[data-send]");
+    for(var s=0;s<sendBtns.length;s++)sendBtns[s].addEventListener("click",function(ev){
+      var id=ev.currentTarget.getAttribute("data-send");
+      sendError(id);
+    });
+    var dis=panel.querySelectorAll("[data-dismiss]");
+    for(var d=0;d<dis.length;d++)dis[d].addEventListener("click",function(ev){
+      var id=ev.currentTarget.getAttribute("data-dismiss");
+      removeError(id);
+    });
+  }
+
+  function removeError(id){
+    for(var i=0;i<errors.length;i++)if(errors[i].id===id){errors.splice(i,1);break}
+    delete seenIds[id];
+    renderBadge();
+  }
+
+  function sendError(id){
+    var er=null;
+    for(var i=0;i<errors.length;i++)if(errors[i].id===id){er=errors[i];break}
+    if(!er)return;
+    var top=parseTopFrame(er.stack);
+    var file=er.file||(top&&top.file)||"runtime";
+    var line=er.line||(top&&top.line)||1;
+    var col=er.col||(top&&top.col)||1;
+    var comment="[runtime error] "+er.message+"\\n\\n"+(er.stack||"(no stack)");
+    if(er.lastInteraction)comment+="\\n\\nLast user interaction: "+er.lastInteraction;
+    send({file:file,line:line,col:col,comment:comment},function(){
+      toast("sent to AI");
+      removeError(id);
+    });
+  }
+
+  function pushError(e){
+    var id=e.id||uid();
+    if(seenIds[id])return;
+    seenIds[id]=true;
+    var entry={
+      id:id,
+      ts:e.ts||Date.now(),
+      source:e.source||"unknown",
+      message:e.message||"(no message)",
+      stack:e.stack,
+      file:e.file,line:e.line,col:e.col,
+      lastInteraction:lastInteraction
+    };
+    errors.push(entry);
+    renderBadge();
+  }
+
+  window.addEventListener("error",function(ev){
+    // ev.filename/lineno/colno point at the *dispatch site* — for delegated
+    // events that's Svelte's internal events.js, not the user's handler. Prefer
+    // the top frame of ev.error.stack so the resolved source path lands in
+    // user code; fall back to event coords only when no stack is available.
+    var stack=ev.error&&ev.error.stack;
+    var top=parseTopFrame(stack);
+    pushError({
+      source:"window",
+      message:ev.message||"Unhandled error",
+      stack:stack,
+      file:(top&&top.file)||ev.filename,
+      line:(top&&top.line)||ev.lineno,
+      col:(top&&top.col)||ev.colno
+    });
+  });
+  window.addEventListener("unhandledrejection",function(ev){
+    var reason=ev.reason;
+    var stack=reason&&reason.stack;
+    var loc=parseTopFrame(stack);
+    pushError({
+      source:"rejection",
+      message:String(reason&&reason.message||reason||"Unhandled rejection"),
+      stack:stack,
+      file:loc&&loc.file,line:loc&&loc.line,col:loc&&loc.col
+    });
+  });
+
+  try{
+    var es=new EventSource("/__bosia/errors");
+    es.addEventListener("bosia-error",function(ev){
+      try{pushError(JSON.parse(ev.data))}catch(_){}
+    });
+  }catch(_){/* EventSource not available — ignore */}
+}
 })();`;

package/src/core/plugins/inspector/sourcemap.ts

@@ -0,0 +1,75 @@
+import { TraceMap, originalPositionFor } from "@jridgewell/trace-mapping";
+import { readFileSync, existsSync } from "node:fs";
+import { dirname, resolve as pathResolve } from "node:path";
+import { OUT_DIR } from "../../paths.ts";
+
+const cache = new Map<string, TraceMap | null>();
+
+function loadMap(mapPath: string): TraceMap | null {
+	if (cache.has(mapPath)) return cache.get(mapPath)!;
+	try {
+		if (!existsSync(mapPath)) {
+			cache.set(mapPath, null);
+			return null;
+		}
+		const tm = new TraceMap(readFileSync(mapPath, "utf8"));
+		cache.set(mapPath, tm);
+		return tm;
+	} catch {
+		cache.set(mapPath, null);
+		return null;
+	}
+}
+
+// URL namespace stays at `/dist/...` but the on-disk location is `OUT_DIR`
+// (e.g. `.bosia/dev` in dev). v0.5.5 decoupled these; the resolver has to
+// rewrite the URL prefix back to the real filesystem prefix.
+function mapPathFor(file: string): string | null {
+	let fsPath: string;
+	if (/^https?:\/\//.test(file)) {
+		let pathname: string;
+		try {
+			pathname = new URL(file).pathname;
+		} catch {
+			return null;
+		}
+		const relFromCwd = pathname.startsWith("/dist/")
+			? OUT_DIR + pathname.slice("/dist".length)
+			: "." + pathname;
+		fsPath = pathResolve(process.cwd(), relFromCwd);
+	} else if (file.startsWith("/")) {
+		fsPath = file;
+	} else {
+		fsPath = pathResolve(process.cwd(), file);
+	}
+	return fsPath + ".map";
+}
+
+export function resolveFrame(
+	file: string,
+	line: number,
+	col: number,
+): { file: string; line: number; col: number } | null {
+	const mp = mapPathFor(file);
+	if (!mp) return null;
+	const tm = loadMap(mp);
+	if (!tm) return null;
+	const pos = originalPositionFor(tm, { line, column: col });
+	if (!pos.source || pos.line == null) return null;
+	const abs = pathResolve(dirname(mp), pos.source);
+	const rel = abs.startsWith(process.cwd() + "/") ? abs.slice(process.cwd().length + 1) : abs;
+	return { file: rel, line: pos.line, col: pos.column ?? 1 };
+}
+
+// Rewrite frames in stack strings: "(url:L:C)", "at url:L:C", "@url:L:C".
+// Lazy match on the file body so URLs with ports (`http://host:9000/...`) keep
+// the port as part of the file rather than being chopped at the first `:`.
+export function resolveStack(stack: string): string {
+	return stack.replace(
+		/(\(|at\s+|@)((?:https?:\/\/|\/)[^\s)]+?):(\d+):(\d+)(\)?)/g,
+		(_m, lead, file, l, c, tail) => {
+			const r = resolveFrame(file, Number(l), Number(c));
+			return r ? `${lead}${r.file}:${r.line}:${r.col}${tail}` : _m;
+		},
+	);
+}

package/src/core/renderer.ts

@@ -18,6 +18,7 @@ import {
 } from "./html.ts";
 import type { Metadata } from "./hooks.ts";
 import { loadPlugins } from "./config.ts";
+import { reportDevErrorFromCatch } from "./devErrorReport.ts";
 import type { BosiaPlugin, RenderContext } from "./types/plugin.ts";
 
 // Plugins are loaded once per process at module init via top-level await elsewhere
@@ -362,6 +363,7 @@ export async function loadRouteData(
 			}
 			if (isDev) console.error("Layout server load error:", err);
 			else console.error("Layout server load error:", (err as Error).message ?? err);
+			if (isDev) reportDevErrorFromCatch(err);
 			const wrapped = new HttpError(500, "Internal Server Error");
 			stampErrorContext(
 				wrapped,
@@ -424,6 +426,7 @@ export async function loadRouteData(
 			}
 			if (isDev) console.error("Page server load error:", err);
 			else console.error("Page server load error:", (err as Error).message ?? err);
+			if (isDev) reportDevErrorFromCatch(err);
 			const wrapped = new HttpError(500, "Internal Server Error");
 			stampErrorContext(
 				wrapped,
@@ -552,6 +555,7 @@ export async function renderSSRStream(
 		}
 		if (isDev) console.error("SSR load error:", err);
 		else console.error("SSR load error:", (err as Error).message ?? err);
+		if (isDev) reportDevErrorFromCatch(err);
 		return renderErrorPage(
 			500,
 			"Internal Server Error",
@@ -828,6 +832,18 @@ export async function renderErrorPage(
 	// Strip the nonce from emitted scripts when CSP is off — the attribute
 	// is dead bytes without a matching policy header.
 	if (!CSP_ENABLED) nonce = undefined;
+
+	// Inspector overlay and other plugin bodyEnd fragments must be injected
+	// on error pages too — otherwise SSE never connects and runtime errors
+	// from the failing render are invisible in the UI.
+	const renderCtx: RenderContext = {
+		request: req,
+		url,
+		route: route ? { pattern: route.pattern } : { pattern: "" },
+		metadata: null,
+	};
+	const bodyEndExtras = await pluginRenderFragments("bodyEnd", renderCtx);
+
 	// 1. Nested boundary
 	if (route && errorDepth !== undefined && route.errorPages?.length) {
 		const origin = errorOrigin ?? "page";
@@ -868,6 +884,9 @@ export async function renderErrorPage(
 					undefined,
 					true,
 					nonce,
+					null,
+					null,
+					bodyEndExtras,
 				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
@@ -902,6 +921,9 @@ export async function renderErrorPage(
 				undefined,
 				true,
 				nonce,
+				null,
+				null,
+				bodyEndExtras,
 			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {

package/src/core/routeTypes.ts

@@ -96,18 +96,16 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 				`export type PageMetadataLoad = (event: _MetadataEvent) => Metadata | Promise<Metadata>;`,
 			);
 			lines.push(`export type Action = (event: _RequestEvent) => any;`);
-			lines.push(
-				`export type PageData = Awaited<ReturnType<typeof _pageLoad>> & { params: Params };`,
-			);
+			lines.push(`export type PageData = Awaited<ReturnType<typeof _pageLoad>>;`);
 		} else {
 			lines.push(``);
 			lines.push(
 				`export type PageMetadataLoad = (event: _MetadataEvent) => Metadata | Promise<Metadata>;`,
 			);
 			lines.push(`export type Action = (event: _RequestEvent) => any;`);
-			lines.push(`export type PageData = { params: Params };`);
+			lines.push(`export type PageData = {};`);
 		}
-		lines.push(`export type PageProps = { data: PageData };`);
+		lines.push(`export type PageProps = { data: PageData; params: Params };`);
 
 		if (info.hasErrorPage) {
 			lines.push(``);
@@ -135,10 +133,10 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 		if (info.layoutServer) {
 			lines.push(`\nimport type { load as _layoutLoad } from '${srcBase}+layout.server.ts';`);
 			lines.push(`export type LayoutServerLoad = (event: _LoadEvent) => any;`);
+			lines.push(`export type LayoutData = Awaited<ReturnType<typeof _layoutLoad>>;`);
 			lines.push(
-				`export type LayoutData = Awaited<ReturnType<typeof _layoutLoad>> & { params: Params };`,
+				`export type LayoutProps = { data: LayoutData; params: Params; children: any };`,
 			);
-			lines.push(`export type LayoutProps = { data: LayoutData; children: any };`);
 		}
 
 		const outDir = join(process.cwd(), ".bosia", "types", "src", "routes", ...segments);

package/src/core/server.ts

@@ -24,6 +24,7 @@ import { buildCspHeader, CSP_DIRECTIVES_TEMPLATE, CSP_ENABLED, generateNonce } f
 import { isDev, compress, isStaticPath } from "./html.ts";
 import { OUT_DIR } from "./paths.ts";
 import { dedup, dedupKey } from "./dedup.ts";
+import { reportDevErrorFromCatch } from "./devErrorReport.ts";
 import {
 	loadRouteData,
 	loadMetadata,
@@ -280,6 +281,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 			}
 			if (isDev) console.error("Data endpoint error:", err);
 			else console.error("Data endpoint error:", (err as Error).message ?? err);
+			if (isDev) reportDevErrorFromCatch(err);
 			return Response.json({ error: "Internal Server Error" }, { status: 500 });
 		}
 	}
@@ -362,6 +364,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 		} catch (err) {
 			if (isDev) console.error("API route error:", err);
 			else console.error("API route error:", (err as Error).message ?? err);
+			if (isDev) reportDevErrorFromCatch(err);
 			return Response.json({ error: "Internal Server Error" }, { status: 500 });
 		}
 	}
@@ -535,6 +538,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				}
 				if (isDev) console.error("Form action error:", err);
 				else console.error("Form action error:", (err as Error).message ?? err);
+				if (isDev) reportDevErrorFromCatch(err);
 				if (isEnhanced) {
 					return Response.json(
 						{ type: "error", status: 500, message: "Internal Server Error" },
@@ -639,6 +643,7 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 	} catch (err) {
 		if (isDev) console.error("Unhandled request error:", err);
 		else console.error("Unhandled request error:", (err as Error).message ?? err);
+		if (isDev) reportDevErrorFromCatch(err);
 		return Response.json({ error: "Internal Server Error" }, { status: 500 });
 	} finally {
 		inFlight--;
@@ -758,14 +763,15 @@ const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : isDev ? 9001 :
 // loose `Elysia` so plugin-extended types stay assignable.
 let app: Elysia = new Elysia({
 	serve: { maxRequestBodySize: BODY_SIZE_LIMIT, idleTimeout: IDLE_TIMEOUT },
-}).onError(({ error }) => {
-	if (isDev) console.error("Uncaught server error:", error);
-	else console.error("Uncaught server error:", (error as Error)?.message ?? error);
-	return Response.json({ error: "Internal Server Error" }, { status: 500 });
 }) as unknown as Elysia;
 
 // Plugins.backend.before — runs before framework middleware/routes.
 // Plugin-registered routes here BYPASS the framework (CSRF, hooks, etc.).
+// Plugins register their own `.onError()` handlers here. Elysia fires onError
+// handlers in registration order; plugin handlers run first and (when they
+// return undefined) fall through to the base 500 responder chained after this
+// loop. Registering the base responder before the loop would short-circuit
+// every plugin handler.
 for (const plugin of plugins) {
 	if (plugin.backend?.before) {
 		try {
@@ -777,6 +783,12 @@ for (const plugin of plugins) {
 	}
 }
 
+app = app.onError(({ error }) => {
+	if (isDev) console.error("Uncaught server error:", error);
+	else console.error("Uncaught server error:", (error as Error)?.message ?? error);
+	return Response.json({ error: "Internal Server Error" }, { status: 500 });
+}) as unknown as Elysia;
+
 app = app
 	// Static files are served by resolve() with path traversal protection and security headers
 	// SSR pages

package/templates/default/README.md

@@ -19,7 +19,8 @@ src/
 ├── lib/                 # Shared utilities — import via $lib
 └── routes/              # Pages and API endpoints
     ├── +layout.svelte   # Root layout
-    └── +page.svelte     # Home page (/)
+    └── (public)/        # Public route group
+        └── +page.svelte # Home page (/)
 public/                  # Static assets
 ```
 
@@ -29,16 +30,19 @@ Add pages by creating `+page.svelte` files under `src/routes/`:
 
 ```
 src/routes/
-├── +page.svelte              # /
-├── about/
-│   └── +page.svelte          # /about
-└── blog/
-    ├── +page.svelte          # /blog
-    └── [slug]/
-        ├── +page.server.ts   # server loader
-        └── +page.svelte      # /blog/:slug
+└── (public)/                     # public route group — no URL segment
+    ├── +page.svelte              # /
+    ├── about/
+    │   └── +page.svelte          # /about
+    └── blog/
+        ├── +page.svelte          # /blog
+        └── [slug]/
+            ├── +page.server.ts   # server loader
+            └── +page.svelte      # /blog/:slug
 ```
 
+Bosia's convention: put public-facing pages under `(public)/`, and authenticated areas under their own group (e.g. `(app)/`, `(admin)/`). The parentheses make the segment a layout group — it groups routes without appearing in the URL.
+
 ### Server Loaders
 
 Fetch data on the server before rendering:

package/templates/default/src/routes/{+page.svelte → (public)/+page.svelte}

@@ -25,7 +25,8 @@
 	</div>
 
 	<p class="text-muted-foreground mt-6 text-sm">
-		Edit <code class="bg-muted rounded px-1 py-0.5 font-mono text-xs">src/routes/+page.svelte</code> to
-		get started
+		Edit <code class="bg-muted rounded px-1 py-0.5 font-mono text-xs"
+			>src/routes/(public)/+page.svelte</code
+		> to get started
 	</p>
 </main>

package/templates/demo/src/routes/(public)/blog/[slug]/+page.server.ts

@@ -27,7 +27,7 @@ This page lives at routes/(public)/blog/[slug]/+page.svelte but is served at /bl
 		tags: ["routing", "dynamic"],
 		content: `A directory named [slug] creates a dynamic route segment that matches any URL value.
 
-The matched value is available as params.slug inside +page.server.ts load() and inside the page component via data.params.slug.
+The matched value is available as params.slug inside +page.server.ts load() and inside the page component via the params prop.
 
 The route matcher uses 3-pass priority: exact matches first, then dynamic segments, then catch-all routes.`,
 	},

package/templates/demo/src/routes/(public)/blog/[slug]/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { PageData } from "./$types";
+	import type { PageProps } from "./$types";
 
-	let { data }: { data: PageData } = $props();
+	let { data, params }: PageProps = $props();
 
 	const post = $derived(data.post);
-	const slug = $derived(data.slug ?? data.params.slug ?? "");
+	const slug = $derived(data.slug ?? params.slug ?? "");
 </script>
 
 <svelte:head>