watch-tail 0.8.0 → 0.10.0

package/build/server/chunks/entries/pages/{_page.svelte.js-DRoSEPVH.js → _page.svelte.js-CVlL2UsO.js}

@@ -1,17 +1,68 @@
-import { ah as escape_html, ag as attr, ai as attr_style, ac as derived, aj as attr_class, ak as ensure_array_like, al as stringify, am as bind_props, an as clsx } from '../../chunks/server.js-CAEBuMIH.js';
+import { ae as escape_html, ac as attr, ad as attr_class, af as attr_style, a6 as ensure_array_like, ag as stringify, a1 as derived, ah as spread_props, al as bind_props, am as clsx } from '../../chunks/index-server.js-Dsi44azJ.js';
 import { f as LogStore, g as filterByLevel, h as filterEvents, c as effectiveLevel, t as tokenizeJson, b as detectLevel, j as formatLogMessage, k as eventKey, l as levelColorClass } from '../../chunks/log-buffer.js-A9FA-Qv8.js';
 import { R as REGION_CODES } from '../../chunks/regions.js-COf7DgnH.js';
-import { P as PRESET_LABELS, a as presetLabel, H as HISTORIC_PRESETS, t as toDateTimeLocal, d as describeWindow } from '../../chunks/time-range.js-BLMT8aU3.js';
-import { p as page, r as replaceState } from '../../chunks/state.js-vZj9lo1I.js';
-import { S as SERIES_LEVEL_COLOR, g as groupByLevel, r as requestRows, a as requestIdOf, c as collectRequests, L as LEVEL_LABELS, i as isMeaningfulBrush, b as requestDurations, d as bucketEvents } from '../../chunks/series-buckets.js-DFGWkob5.js';
+import { P as PRESET_LABELS, a as presetLabel, H as HISTORIC_PRESETS, t as toDateTimeLocal, d as describeWindow } from '../../chunks/time-range.js-__87ZPq6.js';
+import { I as Icon, t as textSize, p as puppy } from '../../chunks/text-size.svelte.js-CqGaHRr3.js';
+import { p as page, r as replaceState } from '../../chunks/state.js-qsHzjuJU.js';
+import { S as SERIES_LEVEL_COLOR, g as groupByLevel, r as requestRows, a as requestIdOf, c as collectRequests, L as LEVEL_LABELS, i as isMeaningfulBrush, b as requestDurations, d as bucketEvents } from '../../chunks/series-buckets.js-C-vMEJT2.js';
 import '../../chunks/uneval.js-DaakSYFQ.js';
-import '../../chunks/index-server.js-DNLOKvM0.js';
 import '../../chunks/shared.js-CgjUIvRK.js';
 import '../../chunks/exports.js-ClPPfcHj.js';
-import '../../chunks/internal2.js-BMcEVxqN.js';
-import '../../chunks/legacy-client.js-DJmDw3Zx.js';
+import '../../chunks/internal2.js-Dm0TlpeP.js';
+import '../../chunks/legacy-client.js-C8Upo6IB.js';
+import '../../chunks/events.js-oxLu7lhH.js';
 import '../../chunks/utils.js-BIlHjgGW.js';
 
+//#region node_modules/.pnpm/@lucide+svelte@1.47.0_svelte@5.57.0/node_modules/@lucide/svelte/dist/icons/arrow-right.svelte
+function Arrow_right($$renderer, $$props) {
+	let { $$slots, $$events, ...props } = $$props;
+	Icon($$renderer, spread_props([props, { icon: {
+		"name": "arrow-right",
+		"size": 24,
+		"node": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]]
+	} }]));
+}
+//#endregion
+//#region node_modules/.pnpm/@lucide+svelte@1.47.0_svelte@5.57.0/node_modules/@lucide/svelte/dist/icons/chevron-down.svelte
+function Chevron_down($$renderer, $$props) {
+	let { $$slots, $$events, ...props } = $$props;
+	Icon($$renderer, spread_props([props, { icon: {
+		"name": "chevron-down",
+		"size": 24,
+		"node": [["path", { "d": "m6 9 6 6 6-6" }]]
+	} }]));
+}
+//#endregion
+//#region node_modules/.pnpm/@lucide+svelte@1.47.0_svelte@5.57.0/node_modules/@lucide/svelte/dist/icons/chevron-left.svelte
+function Chevron_left($$renderer, $$props) {
+	let { $$slots, $$events, ...props } = $$props;
+	Icon($$renderer, spread_props([props, { icon: {
+		"name": "chevron-left",
+		"size": 24,
+		"node": [["path", { "d": "m15 18-6-6 6-6" }]]
+	} }]));
+}
+//#endregion
+//#region node_modules/.pnpm/@lucide+svelte@1.47.0_svelte@5.57.0/node_modules/@lucide/svelte/dist/icons/chevron-right.svelte
+function Chevron_right($$renderer, $$props) {
+	let { $$slots, $$events, ...props } = $$props;
+	Icon($$renderer, spread_props([props, { icon: {
+		"name": "chevron-right",
+		"size": 24,
+		"node": [["path", { "d": "m9 18 6-6-6-6" }]]
+	} }]));
+}
+//#endregion
+//#region node_modules/.pnpm/@lucide+svelte@1.47.0_svelte@5.57.0/node_modules/@lucide/svelte/dist/icons/chevron-up.svelte
+function Chevron_up($$renderer, $$props) {
+	let { $$slots, $$events, ...props } = $$props;
+	Icon($$renderer, spread_props([props, { icon: {
+		"name": "chevron-up",
+		"size": 24,
+		"node": [["path", { "d": "m18 15-6-6-6 6" }]]
+	} }]));
+}
+//#endregion
 //#region src/lib/format.ts
 /**
 * Formatting helpers for the watch-tail UI. Every function here is pure so it can be unit
@@ -159,10 +210,14 @@ function EndpointBadge($$renderer, $$props) {
 /** `localStorage` keys, prefixed so they are easy to spot in a browser. */
 var STORAGE_KEYS = {
 	sidebarWidth: "watch-tail:sidebar-width",
+	sidebarOpen: "watch-tail:sidebar-open",
 	prefixWidth: "watch-tail:prefix-width",
+	timestampWidth: "watch-tail:timestamp-width",
+	groupWidth: "watch-tail:group-width",
 	wrap: "watch-tail:wrap",
 	jsonView: "watch-tail:json-view",
 	chartOpen: "watch-tail:chart-open",
+	logOpen: "watch-tail:log-open",
 	groupRequests: "watch-tail:group-requests"
 };
 /** Default width of the group-list pane, in rem (matches the original layout). */
@@ -177,11 +232,6 @@ var PREFIX_WIDTH = {
 	minRem: 4,
 	maxRem: 40
 };
-/** Converts a CSS pixel width to `rem` for use in a Tailwind `style` attribute. */
-function pxToRem(px, rootFontSize = 16) {
-	const rem = px / rootFontSize;
-	return `${Number.isInteger(rem) ? rem : Number(rem.toFixed(3))}rem`;
-}
 /** Parses a `rem` value into CSS pixels. */
 function remToPx(rem, rootFontSize = 16) {
 	return rem * rootFontSize;
@@ -207,7 +257,7 @@ function EventScatterPanel($$renderer, $$props) {
 		* The real loader: a dynamic import, which is what keeps layerchart out of the
 		* initial bundle. It only runs in the browser, and only once the panel is open.
 		*/
-		const loadChartModule = () => import('../../chunks/EventScatter.js-CG0RcOU6.js');
+		const loadChartModule = () => import('../../chunks/EventScatter.js-DHlLEn_7.js');
 		/** Bucketed counts for the window. */
 		/** Inclusive start of the window, epoch ms. */
 		/** Inclusive end of the window, epoch ms. */
@@ -217,9 +267,10 @@ function EventScatterPanel($$renderer, $$props) {
 		/** True while the counts are being fetched. */
 		/** Called with the brushed range when the drag ends, or `null` on clear. */
 		/** Chart height in px. */
+		/** True to grow into the space its parent gives instead of a fixed height. */
 		/** Start open, which is also what the first visit uses. */
 		/** Chart module loader; defaults to the dynamic import. */
-		let { metric = "count", onMetricChange, onSelect, points = [], from = 0, to = 0, bucketMs = 0, groups = [], loading = false, byRequest = true, onBrush, height = 200, open = true, loadChart = loadChartModule } = $$props;
+		let { metric = "duration", onMetricChange, onSelect, points = [], from = 0, to = 0, bucketMs = 0, groups = [], loading = false, byRequest = true, onBrush, height = 200, fill = false, open = true, loadChart = loadChartModule } = $$props;
 		let expanded = derived(() => open);
 		/** Totals and labels per level, in severity order. */
 		let levelGroups = derived(() => groupByLevel(points));
@@ -227,56 +278,53 @@ function EventScatterPanel($$renderer, $$props) {
 		let totalEvents = derived(() => levelGroups().reduce((sum, entry) => sum + entry.events, 0));
 		/** Buckets drawn. */
 		let bucketCount = derived(() => new Set(points.map((point) => point.t)).size);
-		/** True when there is something to draw. */
-		let hasPoints = derived(() => points.length > 0);
 		/** What one mark stands for, which is what the totals count. */
 		let unit = derived(() => metric === "duration" || byRequest ? "requests" : "events");
 		/** Clears the brush, for the host's Reset zoom control. */
 		function reset() {
 			onBrush?.(null);
 		}
-		$$renderer.push(`<section class="flex min-w-0 flex-col gap-1 rounded-lg border border-neutral-800 bg-neutral-950/60 p-2" data-testid="event-scatter"${attr("aria-label", metric === "duration" ? "Request duration over time" : "Events over time")}><div class="flex flex-wrap items-center gap-x-3 gap-y-1 px-1 text-[0.6875rem]"><button type="button"${attr("aria-expanded", expanded())}${attr("title", expanded() ? "Hide the chart" : "Show the chart")} data-testid="scatter-toggle" class="flex items-center gap-1 rounded-md border border-neutral-800 bg-neutral-900 px-2 py-0.5 font-semibold uppercase tracking-wider text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"><span aria-hidden="true">${escape_html(expanded() ? "▾" : "▸")}</span> ${escape_html(metric === "duration" ? "Request duration" : "Events over time")}</button> <div role="group" aria-label="Chart metric" class="flex rounded-md border border-neutral-800 p-0.5"><!--[-->`);
-		const each_array = ensure_array_like(["count", "duration"]);
-		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-			let choice = each_array[$$index];
-			$$renderer.push(`<button type="button"${attr("data-testid", `chart-metric-${choice}`)}${attr("aria-pressed", metric === choice)}${attr_class(`rounded px-2 py-0.5 transition-colors ${metric === choice ? "bg-sky-950 text-sky-300" : "text-neutral-400 hover:text-neutral-200"}`)}>${escape_html(choice === "count" ? "Count" : "Duration (ms)")}</button>`);
+		$$renderer.push(`<section${attr_class(`flex min-w-0 flex-col border-b border-neutral-800 bg-neutral-950/60 ${fill && expanded() ? "min-h-0 flex-1" : "shrink-0"}`)} data-testid="event-scatter"${attr("aria-label", metric === "duration" ? "Request duration over time" : "Events over time")}><div class="flex min-h-9 flex-none flex-wrap items-center gap-x-3 gap-y-1 border-b border-neutral-800 bg-neutral-900/40 px-3 py-1.5 text-[0.6875rem]"><button type="button"${attr("aria-expanded", expanded())}${attr("title", expanded() ? "Hide the chart" : "Show the chart")} data-testid="scatter-toggle" class="flex items-center gap-1 text-sm font-semibold text-neutral-200 transition-colors hover:text-sky-300">`);
+		if (expanded()) {
+			$$renderer.push("<!--[0-->");
+			Chevron_down($$renderer, { size: "1em" });
+		} else {
+			$$renderer.push("<!--[-1-->");
+			Chevron_right($$renderer, { size: "1em" });
 		}
-		$$renderer.push(`<!--]--></div> <span class="text-neutral-400" data-testid="scatter-summary">${escape_html(formatCount(totalEvents()))}
-			${escape_html(unit())}`);
-		if (metric === "count") $$renderer.push(`<!--[0--> in ${escape_html(formatCount(bucketCount()))} buckets`);
-		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--></span> `);
+		$$renderer.push(`<!--]--> Chart - ${escape_html(metric === "duration" ? "Request duration" : "Events over time")}</button> `);
 		if (groups.length > 1) $$renderer.push(`<!--[0--><span class="text-neutral-500" data-testid="scatter-groups">across ${escape_html(groups.length)} groups</span>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> <!--[-->`);
-		const each_array_1 = ensure_array_like(levelGroups());
-		for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
-			let entry = each_array_1[$$index_1];
+		const each_array = ensure_array_like(levelGroups());
+		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+			let entry = each_array[$$index];
 			$$renderer.push(`<span class="flex items-center gap-1 text-neutral-400"${attr("data-testid", `scatter-legend-${stringify(entry.level)}`)}><span class="inline-block h-2 w-2 rounded-full"${attr_style(`background-color: ${stringify(SERIES_LEVEL_COLOR[entry.level])}`)}></span> ${escape_html(entry.label)} <span class="text-neutral-500">${escape_html(formatCount(entry.events))}</span></span>`);
 		}
 		$$renderer.push(`<!--]--> `);
 		if (loading && expanded()) $$renderer.push(`<!--[0--><span class="text-amber-300" data-testid="scatter-loading">loading…</span>`);
 		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> `);
+		$$renderer.push(`<!--]--> <span class="ml-auto text-neutral-400" data-testid="scatter-summary">${escape_html(formatCount(totalEvents()))}
+			${escape_html(unit())}`);
+		if (metric === "count") $$renderer.push(`<!--[0--> in ${escape_html(formatCount(bucketCount()))} buckets`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></span></div> `);
 		if (expanded()) {
-			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<!--[0--><div${attr_class(`flex flex-col gap-1 p-2 ${fill ? "min-h-0 flex-1" : ""}`)}><div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[0.6875rem]"><div role="group" aria-label="Chart metric" class="flex rounded-md border border-neutral-800 p-0.5"><!--[-->`);
+			const each_array_1 = ensure_array_like(["count", "duration"]);
+			for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+				let choice = each_array_1[$$index_1];
+				$$renderer.push(`<button type="button"${attr("data-testid", `chart-metric-${choice}`)}${attr("aria-pressed", metric === choice)}${attr_class(`rounded px-2 py-0.5 transition-colors ${metric === choice ? "bg-sky-950 text-sky-300" : "text-neutral-400 hover:text-neutral-200"}`)}>${escape_html(choice === "count" ? "Count" : "Duration (ms)")}</button>`);
+			}
+			$$renderer.push(`<!--]--></div> `);
 			$$renderer.push(`<!--[-1--><span class="ml-auto text-neutral-500" data-testid="scatter-hint">select a point to show logs · drag to zoom · click background to clear</span>`);
-			$$renderer.push(`<!--]-->`);
-		} else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--></div> `);
-		if (expanded()) {
-			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<!--]--></div> <div${attr_class(`relative overflow-hidden ${fill ? "min-h-0 flex-1" : ""}`)}${attr_style(fill ? void 0 : `height: ${height}px`)} data-testid="chart-body">`);
+			$$renderer.push(`<!--[-1--><div${attr_class(`w-full animate-pulse rounded bg-neutral-900/60 ${fill ? "h-full" : ""}`)}${attr_style(fill ? void 0 : `height: ${height}px`)}></div>`);
+			$$renderer.push(`<!--]--></div> `);
 			if (metric === "duration") $$renderer.push(`<!--[0--><p class="px-1 text-[0.6875rem] text-neutral-500" data-testid="duration-note">Observed duration (ms) · last event + its duration − first event · partial requests may
-				appear shorter</p>`);
+					appear shorter</p>`);
 			else $$renderer.push("<!--[-1-->");
-			$$renderer.push(`<!--]--> `);
-			if (hasPoints()) {
-				$$renderer.push("<!--[1-->");
-				$$renderer.push(`<!--[-1--><div class="w-full animate-pulse rounded bg-neutral-900/60"${attr_style(`height: ${stringify(height)}px`)}></div>`);
-				$$renderer.push(`<!--]-->`);
-			} else if (!loading) $$renderer.push(`<!--[2--><p class="px-1 py-6 text-xs text-neutral-500" data-testid="scatter-empty">${escape_html(metric === "duration" ? "No requests with a request ID in this window yet." : "No events in this window yet.")}</p>`);
-			else $$renderer.push("<!--[-1-->");
-			$$renderer.push(`<!--]-->`);
+			$$renderer.push(`<!--]--></div>`);
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></section>`);
 		bind_props($$props, { reset });
@@ -313,8 +361,12 @@ function RangeControls($$renderer, $$props) {
 		/** True when the source cannot follow live events, such as the local archive. */
 		/** Called when the user switches mode or applies a range. */
 		let { mode = "live", range = "15m", from = null, to = null, disabled = false, loading = false, liveDisabled = false} = $$props;
-		/** Label shown on the custom chip. */
-		let customLabel = derived(() => mode === "historic" && range === "" && from !== null && to !== null ? `${toDateTimeLocal(from).replace("T", " ")} → ${toDateTimeLocal(to).replace("T", " ")}` : "Custom…");
+		/** True when the custom chip stands for an explicit window with both bounds. */
+		let customActive = derived(() => mode === "historic" && range === "" && from !== null && to !== null);
+		/** Start bound on the custom chip, formatted for display. */
+		let customFromLabel = derived(() => from === null ? "" : toDateTimeLocal(from).replace("T", " "));
+		/** End bound on the custom chip, formatted for display. */
+		let customToLabel = derived(() => to === null ? "" : toDateTimeLocal(to).replace("T", " "));
 		$$renderer.push(`<div class="flex flex-wrap items-center gap-2" data-testid="range-controls"><div class="flex items-center gap-1 rounded-lg border border-neutral-800 bg-neutral-900 p-0.5" role="group" aria-label="Tail mode"><button type="button"${attr("aria-pressed", mode === "live")}${attr("disabled", liveDisabled, true)}${attr("title", liveDisabled ? "There is nothing to tail: the local archive holds historic windows" : void 0)} data-testid="mode-live"${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${mode === "live" ? "border-sky-700 bg-sky-950/60 text-sky-300" : "border-transparent text-neutral-400 hover:text-neutral-200"} disabled:opacity-40`)}>Live</button> <button type="button"${attr("aria-pressed", mode === "historic")} data-testid="mode-historic"${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${mode === "historic" ? "border-amber-700 bg-amber-950/50 text-amber-300" : "border-transparent text-neutral-400 hover:text-neutral-200"}`)}>Historic</button></div> `);
 		if (mode === "historic") {
 			$$renderer.push(`<!--[0--><div class="flex flex-wrap items-center gap-1" role="group" aria-label="Historic range"><!--[-->`);
@@ -323,7 +375,13 @@ function RangeControls($$renderer, $$props) {
 				let preset = each_array[$$index];
 				$$renderer.push(`<button type="button"${attr("aria-pressed", range === preset)}${attr("data-testid", `preset-${stringify(preset)}`)}${attr("disabled", disabled, true)}${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${range === preset ? "border-amber-700 bg-amber-950/50 text-amber-200" : "border-neutral-800 bg-neutral-900 text-neutral-300 hover:border-neutral-700"} disabled:opacity-40`)}>${escape_html(PRESET_LABELS[preset])}</button>`);
 			}
-			$$renderer.push(`<!--]--> <button type="button"${attr("aria-pressed", range === "")} data-testid="preset-custom"${attr("disabled", disabled, true)}${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${range === "" ? "border-amber-700 bg-amber-950/50 text-amber-200" : "border-neutral-800 bg-neutral-900 text-neutral-300 hover:border-neutral-700"}`)}>${escape_html(customLabel())}</button></div>`);
+			$$renderer.push(`<!--]--> <button type="button"${attr("aria-pressed", range === "")} data-testid="preset-custom"${attr("disabled", disabled, true)}${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${range === "" ? "border-amber-700 bg-amber-950/50 text-amber-200" : "border-neutral-800 bg-neutral-900 text-neutral-300 hover:border-neutral-700"}`)}>`);
+			if (customActive()) {
+				$$renderer.push(`<!--[0--><span class="inline-flex items-center gap-1"><span>${escape_html(customFromLabel())}</span> `);
+				Arrow_right($$renderer, { size: "1em" });
+				$$renderer.push(`<!----> <span>${escape_html(customToLabel())}</span></span>`);
+			} else $$renderer.push(`<!--[-1-->Custom…`);
+			$$renderer.push(`<!--]--></button></div>`);
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		if (loading) $$renderer.push(`<!--[0--><span class="text-xs text-amber-300" data-testid="range-loading">loading window…</span>`);
@@ -529,7 +587,7 @@ function LogGroupList($$renderer, $$props) {
 		function rowTone(name) {
 			return isSelected(name) ? "border-sky-800 bg-sky-950/50 text-sky-200" : "border-transparent bg-neutral-900/60 text-neutral-300 hover:border-neutral-800 hover:text-neutral-100";
 		}
-		$$renderer.push(`<section class="flex min-h-0 flex-1 flex-col gap-3"><div class="flex items-center justify-between gap-2"><div class="flex items-baseline gap-2"><h2 class="text-sm font-semibold text-neutral-200">${escape_html(archived() ? "Archived groups" : "Log groups")}</h2> <span class="text-xs text-neutral-500" data-testid="group-count">${escape_html(formatCount(filtered().length))} of ${escape_html(formatCount(groups.length))}</span> `);
+		$$renderer.push(`<section class="flex min-h-0 flex-1 flex-col gap-3"><div class="flex items-center justify-between gap-2"><div class="flex items-baseline gap-2"><span class="text-xs text-neutral-500" data-testid="group-count">${escape_html(formatCount(filtered().length))} of ${escape_html(formatCount(groups.length))}</span> `);
 		if (activeSelection().length > 1) $$renderer.push(`<!--[0--><span class="text-xs font-medium text-sky-400" data-testid="selected-count">${escape_html(formatCount(activeSelection().length))} selected</span>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
@@ -548,17 +606,17 @@ function LogGroupList($$renderer, $$props) {
 		} else if (groups.length === 0) $$renderer.push(`<!--[2--><p data-testid="group-empty" class="rounded-md border border-neutral-800 bg-neutral-900/60 px-3 py-2 text-xs leading-5 text-neutral-400">${escape_html(archived() ? noArchivedGroupsMessage(region) : noGroupsMessage(region))}</p>`);
 		else if (visible().length === 0) $$renderer.push(`<!--[3--><p data-testid="group-no-match" class="px-1 py-2 text-xs text-neutral-500">No log groups match “${escape_html(query())}”.</p>`);
 		else {
-			$$renderer.push(`<!--[-1--><ul class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1"><!--[-->`);
+			$$renderer.push(`<!--[-1--><ul class="@container flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1"><!--[-->`);
 			const each_array_1 = ensure_array_like(visible());
 			for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
 				let group = each_array_1[$$index_1];
-				$$renderer.push(`<li class="flex items-center gap-1.5"><input type="checkbox"${attr("data-testid", `group-check-${stringify(group.name)}`)}${attr("aria-label", `Include ${group.name} in the selection`)}${attr("checked", isSelected(group.name), true)} class="size-3.5 shrink-0 cursor-pointer accent-sky-500"/> <button type="button" data-testid="group-row"${attr("aria-current", isSelected(group.name) ? "true" : void 0)}${attr_class(`flex min-w-0 flex-1 items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-left text-xs transition-colors ${stringify(rowTone(group.name))}`)}><span class="truncate font-mono">${escape_html(group.name)}</span> `);
+				$$renderer.push(`<li class="flex items-center gap-1.5"><input type="checkbox"${attr("data-testid", `group-check-${stringify(group.name)}`)}${attr("aria-label", `Include ${group.name} in the selection`)}${attr("checked", isSelected(group.name), true)} class="size-3.5 shrink-0 cursor-pointer accent-sky-500"/> <button type="button" data-testid="group-row"${attr("data-group-name", group.name)}${attr("aria-label", group.name)}${attr("title", group.name)}${attr("aria-current", isSelected(group.name) ? "true" : void 0)}${attr_class(`flex min-w-0 flex-1 items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-left text-xs transition-colors ${stringify(rowTone(group.name))}`)}><span class="min-w-16 flex-1 overflow-hidden whitespace-nowrap font-mono" aria-hidden="true">${escape_html(group.name)}</span> `);
 				if (archived()) {
 					$$renderer.push(`<!--[0--><span class="flex shrink-0 items-center gap-1.5">`);
 					if (archivedCount(group) !== null) $$renderer.push(`<!--[0--><span data-testid="group-archived-count"${attr("title", archivedSpan(group) ?? "Events held in the local DuckDB archive")} class="rounded-full border border-teal-900 bg-teal-950/50 px-1.5 py-0.5 text-[0.625rem] font-medium text-teal-300">${escape_html(archivedCount(group))}</span>`);
 					else $$renderer.push("<!--[-1-->");
 					$$renderer.push(`<!--]--> `);
-					if (archivedSpan(group) !== null) $$renderer.push(`<!--[0--><span class="hidden text-[0.6875rem] text-neutral-500 xl:inline" data-testid="group-archived-span">${escape_html(archivedSpan(group))}</span>`);
+					if (archivedSpan(group) !== null) $$renderer.push(`<!--[0--><span class="hidden text-[0.6875rem] text-neutral-500 @2xl:inline" data-testid="group-archived-span">${escape_html(archivedSpan(group))}</span>`);
 					else $$renderer.push("<!--[-1-->");
 					$$renderer.push(`<!--]--></span>`);
 				} else if (group.storedBytes !== void 0) $$renderer.push(`<!--[1--><span class="shrink-0 text-[0.6875rem] text-neutral-500">${escape_html(formatBytes(group.storedBytes))}</span>`);
@@ -660,10 +718,13 @@ function LogViewer($$renderer, $$props) {
 		* default, and owned by the page so the chart counts the same requests.
 		*/
 		/** Called when the grouping toggle is pressed. */
-		let { selection = null, onSelectionClear, lines = [], status = "idle", error = null, region = "", group = null, filter = "", paused = false, autoScroll = true, pendingCount = 0, droppedCount = 0, receivedCount = 0, mode = "live", ready = null, endReason = null, archivePath = null, groups = [], level = void 0, onLevelChange, groupRequests = true, onGroupToggle, onFilterChange, onPauseToggle, onClear, onAutoScrollToggle } = $$props;
-		const TIMESTAMP_COLUMN_PX = remToPx(7.5);
-		const ROW_PADDING_PX = remToPx(.75);
-		const ROW_GAP_PX = remToPx(.5);
+		/** True while the lines are shown; collapsed, the viewer keeps only its header. */
+		/** Called when the header's collapse toggle is pressed. */
+		let { selection = null, onSelectionClear, lines = [], status = "idle", error = null, region = "", group = null, filter = "", paused = false, autoScroll = true, pendingCount = 0, droppedCount = 0, receivedCount = 0, mode = "live", ready = null, endReason = null, archivePath = null, groups = [], level = void 0, onLevelChange, groupRequests = true, onGroupToggle, open = true, onToggle, onFilterChange, onPauseToggle, onClear, onAutoScrollToggle } = $$props;
+		let timestampPx = remToPx(7.5);
+		let groupPx = 144;
+		let rowPaddingPx = derived(() => remToPx(.75, textSize.rootFontPx));
+		let rowGapPx = derived(() => remToPx(.5, textSize.rootFontPx));
 		const PREFIX_MIN_PX = remToPx(PREFIX_WIDTH.minRem);
 		const PREFIX_MAX_PX = remToPx(PREFIX_WIDTH.maxRem);
 		const PREFIX_DEFAULT_PX = remToPx(PREFIX_WIDTH.defaultRem);
@@ -861,9 +922,9 @@ function LogViewer($$renderer, $$props) {
 		/** Message cell: wrapped text or a single long line that scrolls sideways. */
 		let messageClass = derived(() => "whitespace-pre");
 		/** Left edge of the prefix resize handle, in pixels from the scrolled content edge. */
-		let handleLeft = derived(() => ROW_PADDING_PX + TIMESTAMP_COLUMN_PX + ROW_GAP_PX + prefixPx);
+		let handleLeft = derived(() => rowPaddingPx() + timestampPx + rowGapPx() + (groups.length > 1 ? groupPx + rowGapPx() : 0) + prefixPx);
 		/** Prefix column width as a CSS length. */
-		let prefixStyle = derived(() => `max-width: ${pxToRem(prefixPx)}`);
+		let prefixStyle = derived(() => `width: ${prefixPx}px`);
 		/** Rows the user has opened, keyed by row key. */
 		let expandedRows = {};
 		/** True when a row is open. */
@@ -886,7 +947,15 @@ function LogViewer($$renderer, $$props) {
 		function savePrefixWidth() {
 			writePref(STORAGE_KEYS.prefixWidth, String(Math.round(prefixPx)));
 		}
-		$$renderer.push(`<section class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"><div class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-neutral-800 bg-neutral-900/40 px-3 py-2">`);
+		$$renderer.push(`<section${attr_class(`flex min-h-0 min-w-0 flex-col overflow-hidden bg-neutral-950 ${open ? "flex-1" : "flex-none"}`)}><div class="flex min-h-9 flex-none flex-wrap items-center gap-x-3 gap-y-2 border-b border-neutral-800 bg-neutral-900/40 px-3 py-1"><button type="button"${attr("aria-expanded", open)}${attr("title", open ? "Hide the log lines" : "Show the log lines")} data-testid="log-toggle" class="flex items-center gap-1 text-sm font-semibold text-neutral-200 transition-colors hover:text-sky-300">`);
+		if (open) {
+			$$renderer.push("<!--[0-->");
+			Chevron_down($$renderer, { size: "1em" });
+		} else {
+			$$renderer.push("<!--[-1-->");
+			Chevron_right($$renderer, { size: "1em" });
+		}
+		$$renderer.push(`<!--]--> Log lines</button> <div class="ml-auto flex flex-wrap items-center gap-x-3 gap-y-1">`);
 		StatusBadge($$renderer, { status: displayStatus() });
 		$$renderer.push(`<!----> `);
 		if (archived()) $$renderer.push(`<!--[0--><span data-testid="archive-badge"${attr("title", archiveTitle())} class="rounded-full border border-teal-900 bg-teal-950/60 px-2 py-0.5 text-[0.6875rem] font-medium text-teal-300">local archive</span>`);
@@ -900,117 +969,187 @@ function LogViewer($$renderer, $$props) {
 		$$renderer.push(`<!--]--> `);
 		if (droppedCount > 0) $$renderer.push(`<!--[0--><span class="text-xs text-amber-300/80" data-testid="dropped-count">${escape_html(formatCount(droppedCount))} dropped</span>`);
 		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <span${attr_class(`rounded-full border px-2 py-0.5 text-[0.6875rem] font-medium ${windowSummary().mode === "historic" ? "border-amber-900 bg-amber-950/40 text-amber-300" : "border-neutral-800 bg-neutral-900 text-neutral-400"}`)}${attr("title", windowSummary().title)} data-testid="window-chip">${escape_html(windowSummary().label)}</span> `);
+		$$renderer.push(`<!--]--> <span${attr_class(`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.6875rem] font-medium ${windowSummary().mode === "historic" ? "border-amber-900 bg-amber-950/40 text-amber-300" : "border-neutral-800 bg-neutral-900 text-neutral-400"}`)}${attr("title", windowSummary().title)} data-testid="window-chip">`);
+		if (windowSummary().mode === "live") $$renderer.push(`<!--[0--><span>live</span>`);
+		else {
+			$$renderer.push("<!--[-1-->");
+			if (windowSummary().preset !== null) $$renderer.push(`<!--[0--><span>${escape_html(windowSummary().preset)} ·</span>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> <span>${escape_html(windowSummary().from)}</span> `);
+			Arrow_right($$renderer, { size: "1em" });
+			$$renderer.push(`<!----> <span>${escape_html(windowSummary().to)}</span>`);
+		}
+		$$renderer.push(`<!--]--></span> `);
 		if (windowSummary().clamped) $$renderer.push(`<!--[0--><span class="text-[0.6875rem] text-amber-400/80" data-testid="window-clamped">14-day limit</span>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		if (windowComplete()) $$renderer.push(`<!--[0--><span class="text-[0.6875rem] text-emerald-400/80" data-testid="window-complete">window complete</span>`);
 		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <div class="ml-auto flex flex-wrap items-center gap-2"><div class="flex items-center gap-1" role="group" aria-label="Filter by level"><button type="button"${attr("aria-pressed", levelFilter() === null)} title="Show every level, including lines with no level" data-testid="level-all"${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${levelFilter() === null ? "border-sky-700 bg-sky-950/60 text-sky-200" : "border-neutral-800 bg-neutral-900 text-neutral-400 hover:border-neutral-700"}`)}>All</button> <!--[-->`);
-		const each_array = ensure_array_like(LEVEL_CHIPS);
-		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-			let chip = each_array[$$index];
-			$$renderer.push(`<button type="button"${attr("aria-pressed", levelFilter() === chip.level)}${attr("title", `Show only ${stringify(chip.label)} lines (${stringify(levelCounts()[chip.level] ?? 0)} loaded)`)}${attr("data-testid", `level-${stringify(chip.level)}`)}${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${stringify(levelFilter() === chip.level ? chip.activeClass : "border-neutral-800 bg-neutral-900 text-neutral-400 hover:border-neutral-700")}`)}>${escape_html(chip.label)} `);
-			if ((levelCounts()[chip.level] ?? 0) > 0) $$renderer.push(`<!--[0--><span class="ml-1 opacity-70">${escape_html(formatCount(levelCounts()[chip.level] ?? 0))}</span>`);
-			else $$renderer.push("<!--[-1-->");
-			$$renderer.push(`<!--]--></button>`);
-		}
-		$$renderer.push(`<!--]--></div> <input type="search" aria-label="Filter log lines" placeholder="Filter lines"${attr("value", filter)} class="w-40 rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs text-neutral-100 outline-none transition-colors placeholder:text-neutral-600 hover:border-neutral-700 focus:border-sky-600"/> <button type="button"${attr("aria-pressed", wrapLines)} title="Wrap long lines instead of scrolling sideways" data-testid="wrap-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${wrapTone()}`)}>Wrap</button> <button type="button"${attr("aria-pressed", jsonView)} title="Pretty-print JSON log entries (off: click a line to open its JSON)" data-testid="json-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${jsonTone()}`)}>JSON</button> <button type="button"${attr("aria-pressed", groupRequests)} title="Group the lines of one request into a single row, coloured by its most critical line (off: one row per line)" data-testid="group-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${groupTone()}`)}>By request</button> <button type="button"${attr("aria-pressed", paused)} class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">${escape_html(paused ? "Resume" : "Pause")}</button> <button type="button" class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">Clear</button> <button type="button"${attr("aria-pressed", autoScroll)}${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${autoScrollTone()}`)}>Auto-scroll</button></div></div> `);
-		if (errorText() !== null) $$renderer.push(`<!--[0--><p role="alert" data-testid="stream-error" class="border-b border-red-900 bg-red-950/50 px-3 py-2 text-xs leading-5 text-red-300">${escape_html(errorText())}</p>`);
-		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> `);
-		if (selection !== null) {
-			$$renderer.push(`<!--[0--><div class="flex items-center gap-2 px-3 py-1 text-xs text-sky-300" role="status" data-testid="chart-selection-status">`);
-			if (selectedEvents().size === 0) $$renderer.push(`<!--[0-->Selected logs are not in the loaded buffer. Zoom into this time range to load them.`);
-			else $$renderer.push(`<!--[-1-->${escape_html(visibleSelectedCount())} of ${escape_html(selectedEvents().size)} selected log lines visible${escape_html(visibleSelectedCount() < selectedEvents().size ? " — clear the text or level filter to see all" : "")}.`);
-			$$renderer.push(`<!--]--> <button type="button" class="ml-auto underline">Clear selection</button></div>`);
-		} else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <div class="min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-950" data-testid="log-scroller">`);
-		if (group === null || group === "") $$renderer.push(`<!--[0--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-idle">Select a log group to start tailing.</p>`);
-		else if (displayRows().length === 0) $$renderer.push(`<!--[1--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-empty">${escape_html(emptyText())}</p>`);
-		else {
-			$$renderer.push("<!--[-1-->");
-			function logLine($$renderer, row, child) {
-				const expandable = row.expandable !== null;
-				const open = expandable && isExpanded(row.key);
-				$$renderer.push(`<li${attr_class(`flex flex-wrap items-baseline gap-2 ${child ? "pl-8" : "px-3"} py-0.5 hover:bg-neutral-900/60 ${listClass()} ${expandable ? "cursor-pointer" : ""}`, void 0, {
-					"bg-sky-950": row.selected,
-					"ring-1": row.selected,
-					"ring-inset": row.selected,
-					"ring-sky-700": row.selected
-				})} data-testid="log-line"${attr("data-chart-selected", row.selected ? "true" : void 0)}${attr("data-request-child", child ? "true" : void 0)}${attr("data-level", row.level ?? "unknown")}${attr("data-expandable", expandable ? "true" : void 0)}${attr("data-expanded", open ? "true" : void 0)}${attr("role", expandable ? "button" : void 0)}${attr("tabindex", expandable ? 0 : void 0)}${attr("aria-expanded", expandable ? open : void 0)}${attr("title", expandable ? open ? "Hide the JSON in this line" : "Show this line as JSON" : void 0)}><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
-				if (groups.length > 1) $$renderer.push(`<!--[0--><span class="w-[9rem] shrink-0 truncate text-teal-400/80"${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
-				else $$renderer.push("<!--[-1-->");
-				$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> `);
-				if (expandable) $$renderer.push(`<!--[0--><span class="shrink-0 text-neutral-600" aria-hidden="true">${escape_html(open ? "▾" : "▸")}</span>`);
+		$$renderer.push(`<!--]--></div></div> `);
+		if (open) {
+			$$renderer.push(`<!--[0--><div class="flex flex-none flex-wrap items-center gap-2 border-b border-neutral-800 bg-neutral-900/40 px-3 py-1.5"><div class="flex items-center gap-1" role="group" aria-label="Filter by level"><button type="button"${attr("aria-pressed", levelFilter() === null)} title="Show every level, including lines with no level" data-testid="level-all"${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${levelFilter() === null ? "border-sky-700 bg-sky-950/60 text-sky-200" : "border-neutral-800 bg-neutral-900 text-neutral-400 hover:border-neutral-700"}`)}>All</button> <!--[-->`);
+			const each_array = ensure_array_like(LEVEL_CHIPS);
+			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+				let chip = each_array[$$index];
+				$$renderer.push(`<button type="button"${attr("aria-pressed", levelFilter() === chip.level)}${attr("title", `Show only ${stringify(chip.label)} lines (${stringify(levelCounts()[chip.level] ?? 0)} loaded)`)}${attr("data-testid", `level-${stringify(chip.level)}`)}${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${stringify(levelFilter() === chip.level ? chip.activeClass : "border-neutral-800 bg-neutral-900 text-neutral-400 hover:border-neutral-700")}`)}>${escape_html(chip.label)} `);
+				if ((levelCounts()[chip.level] ?? 0) > 0) $$renderer.push(`<!--[0--><span class="ml-1 opacity-70">${escape_html(formatCount(levelCounts()[chip.level] ?? 0))}</span>`);
 				else $$renderer.push("<!--[-1-->");
-				$$renderer.push(`<!--]--> <span${attr_class(`${messageClass()} ${stringify(row.levelClass)}`)} data-testid="log-message">`);
-				if (row.tokens !== null) {
-					$$renderer.push(`<!--[0--><!--[-->`);
-					const each_array_1 = ensure_array_like(row.tokens);
-					for (let tokenIndex = 0, $$length = each_array_1.length; tokenIndex < $$length; tokenIndex++) {
-						let token = each_array_1[tokenIndex];
-						$$renderer.push(`<span${attr_class(clsx(tokenClass(token.type)))}>${escape_html(token.text)}</span>`);
-					}
-					$$renderer.push(`<!--]-->`);
-				} else $$renderer.push(`<!--[-1-->${escape_html(row.message)}`);
-				$$renderer.push(`<!--]--></span> `);
-				if (open && row.expandable !== null) {
-					$$renderer.push(`<!--[0--><span class="w-full whitespace-pre text-xs text-neutral-300" data-testid="log-json-expanded"><!--[-->`);
-					const each_array_2 = ensure_array_like(tokenizeJson(row.expandable));
-					for (let tokenIndex = 0, $$length = each_array_2.length; tokenIndex < $$length; tokenIndex++) {
-						let token = each_array_2[tokenIndex];
-						$$renderer.push(`<span${attr_class(clsx(tokenClass(token.type)))}>${escape_html(token.text)}</span>`);
-					}
-					$$renderer.push(`<!--]--></span>`);
-				} else $$renderer.push("<!--[-1-->");
-				$$renderer.push(`<!--]--></li>`);
+				$$renderer.push(`<!--]--></button>`);
 			}
-			$$renderer.push(`<div${attr_class(`relative min-h-full ${listClass()}`)} data-testid="log-canvas"><ol class="font-mono text-xs leading-5" data-testid="log-lines"><!--[-->`);
-			const each_array_3 = ensure_array_like(displayRows());
-			for (let $$index_4 = 0, $$length = each_array_3.length; $$index_4 < $$length; $$index_4++) {
-				let row = each_array_3[$$index_4];
-				if (row.kind === "request") {
-					$$renderer.push("<!--[0-->");
-					const open = isExpanded(row.key);
-					$$renderer.push(`<li${attr_class(clsx(listClass()), void 0, { "bg-sky-950": row.children.some((child) => child.selected) })} data-testid="log-request-group"${attr("data-chart-selected", row.children.some((child) => child.selected) ? "true" : void 0)}${attr("data-request-id", row.id)}${attr("data-level", row.level)}${attr("data-expanded", open ? "true" : void 0)}${attr("data-lines", row.count)}><button type="button" class="flex w-full flex-wrap items-baseline gap-2 px-3 py-0.5 text-left hover:bg-neutral-900/60"${attr("aria-expanded", open)}${attr("title", open ? "Hide the lines of this request" : "Show every line of this request")} data-testid="request-group-summary"><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
-					if (groups.length > 1) $$renderer.push(`<!--[0--><span class="w-[9rem] shrink-0 truncate text-teal-400/80"${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
-					else $$renderer.push("<!--[-1-->");
-					$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> <span class="shrink-0 text-neutral-600" aria-hidden="true">${escape_html(open ? "▾" : "▸")}</span> <span class="shrink-0 rounded border border-neutral-700 bg-neutral-900 px-1.5 font-mono text-[0.6875rem] text-sky-200" data-testid="request-group-id" title="Request id shared by these lines">${escape_html(row.id)}</span> <span class="shrink-0 text-neutral-400" data-testid="request-group-count">${escape_html(formatCount(row.count))} lines</span> <span class="shrink-0 text-neutral-500" data-testid="request-group-span">${escape_html(row.span)}</span> <span${attr_class(`shrink-0 font-medium ${stringify(row.levelClass)}`)} data-testid="request-group-level">${escape_html(row.levelLabel)}</span> `);
-					if (!open) $$renderer.push(`<!--[0--><span class="min-w-0 truncate text-neutral-500" data-testid="request-group-preview">${escape_html(row.preview)}</span>`);
+			$$renderer.push(`<!--]--></div> <input type="search" aria-label="Filter log lines" placeholder="Filter lines"${attr("value", filter)} class="w-40 rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs text-neutral-100 outline-none transition-colors placeholder:text-neutral-600 hover:border-neutral-700 focus:border-sky-600"/> <button type="button"${attr("aria-pressed", wrapLines)} title="Wrap long lines instead of scrolling sideways" data-testid="wrap-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${wrapTone()}`)}>Wrap</button> <button type="button"${attr("aria-pressed", jsonView)} title="Pretty-print JSON log entries (off: click a line to open its JSON)" data-testid="json-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${jsonTone()}`)}>JSON</button> <button type="button"${attr("aria-pressed", groupRequests)} title="Group the lines of one request into a single row, coloured by its most critical line (off: one row per line)" data-testid="group-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${groupTone()}`)}>By request</button> <button type="button"${attr("aria-pressed", paused)} class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">${escape_html(paused ? "Resume" : "Pause")}</button> <button type="button" class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">Clear</button> <button type="button"${attr("aria-pressed", autoScroll)}${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${autoScrollTone()}`)}>Auto-scroll</button></div> `);
+			if (errorText() !== null) $$renderer.push(`<!--[0--><p role="alert" data-testid="stream-error" class="border-b border-red-900 bg-red-950/50 px-3 py-2 text-xs leading-5 text-red-300">${escape_html(errorText())}</p>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> `);
+			if (selection !== null) {
+				$$renderer.push(`<!--[0--><div class="flex items-center gap-2 px-3 py-1 text-xs text-sky-300" role="status" data-testid="chart-selection-status">`);
+				if (selectedEvents().size === 0) $$renderer.push(`<!--[0-->Selected logs are not in the loaded buffer. Zoom into this time range to load them.`);
+				else $$renderer.push(`<!--[-1-->${escape_html(visibleSelectedCount())} of ${escape_html(selectedEvents().size)} selected log lines visible${escape_html(visibleSelectedCount() < selectedEvents().size ? " — clear the text or level filter to see all" : "")}.`);
+				$$renderer.push(`<!--]--> <button type="button" class="ml-auto underline">Clear selection</button></div>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> <div class="min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-950" data-testid="log-scroller">`);
+			if (group === null || group === "") $$renderer.push(`<!--[0--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-idle">Select a log group to start tailing.</p>`);
+			else if (displayRows().length === 0) $$renderer.push(`<!--[1--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-empty">${escape_html(emptyText())}</p>`);
+			else {
+				$$renderer.push("<!--[-1-->");
+				function logLine($$renderer, row, child) {
+					const expandable = row.expandable !== null;
+					const open = expandable && isExpanded(row.key);
+					$$renderer.push(`<li${attr_class(`flex flex-wrap items-baseline gap-2 px-3 py-0.5 hover:bg-neutral-900/60 ${listClass()} ${expandable ? "cursor-pointer" : ""}`, void 0, {
+						"bg-sky-950": row.selected,
+						"ring-1": row.selected,
+						"ring-inset": row.selected,
+						"ring-sky-700": row.selected
+					})} data-testid="log-line"${attr("data-chart-selected", row.selected ? "true" : void 0)}${attr("data-request-child", child ? "true" : void 0)}${attr("data-level", row.level ?? "unknown")}${attr("data-expandable", expandable ? "true" : void 0)}${attr("data-expanded", open ? "true" : void 0)}${attr("role", expandable ? "button" : void 0)}${attr("tabindex", expandable ? 0 : void 0)}${attr("aria-expanded", expandable ? open : void 0)}${attr("title", expandable ? open ? "Hide the JSON in this line" : "Show this line as JSON" : void 0)}><span class="shrink-0 truncate text-neutral-500"${attr_style(`width: ${stringify(timestampPx)}px`)}${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
+					if (groups.length > 1) $$renderer.push(`<!--[0--><span class="shrink-0 truncate text-teal-400/80"${attr_style(`width: ${stringify(groupPx)}px`)}${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
 					else $$renderer.push("<!--[-1-->");
-					$$renderer.push(`<!--]--></button> `);
-					if (open) {
-						$$renderer.push(`<!--[0--><ul class="contents"><!--[-->`);
-						const each_array_4 = ensure_array_like(row.children);
-						for (let $$index_3 = 0, $$length = each_array_4.length; $$index_3 < $$length; $$index_3++) {
-							let child = each_array_4[$$index_3];
-							logLine($$renderer, child, true);
+					$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> `);
+					if (expandable) {
+						$$renderer.push("<!--[0-->");
+						if (open) {
+							$$renderer.push("<!--[0-->");
+							Chevron_down($$renderer, {
+								class: "shrink-0 text-neutral-600",
+								size: "1em"
+							});
+						} else {
+							$$renderer.push("<!--[-1-->");
+							Chevron_right($$renderer, {
+								class: "shrink-0 text-neutral-600",
+								size: "1em"
+							});
 						}
-						$$renderer.push(`<!--]--></ul>`);
+						$$renderer.push(`<!--]-->`);
+					} else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--> <span${attr_class(`${messageClass()} ${stringify(row.levelClass)}`)} data-testid="log-message">`);
+					if (row.tokens !== null) {
+						$$renderer.push(`<!--[0--><!--[-->`);
+						const each_array_1 = ensure_array_like(row.tokens);
+						for (let tokenIndex = 0, $$length = each_array_1.length; tokenIndex < $$length; tokenIndex++) {
+							let token = each_array_1[tokenIndex];
+							$$renderer.push(`<span${attr_class(clsx(tokenClass(token.type)))}>${escape_html(token.text)}</span>`);
+						}
+						$$renderer.push(`<!--]-->`);
+					} else $$renderer.push(`<!--[-1-->${escape_html(row.message)}`);
+					$$renderer.push(`<!--]--></span> `);
+					if (open && row.expandable !== null) {
+						$$renderer.push(`<!--[0--><span class="w-full whitespace-pre text-xs text-neutral-300" data-testid="log-json-expanded"><!--[-->`);
+						const each_array_2 = ensure_array_like(tokenizeJson(row.expandable));
+						for (let tokenIndex = 0, $$length = each_array_2.length; tokenIndex < $$length; tokenIndex++) {
+							let token = each_array_2[tokenIndex];
+							$$renderer.push(`<span${attr_class(clsx(tokenClass(token.type)))}>${escape_html(token.text)}</span>`);
+						}
+						$$renderer.push(`<!--]--></span>`);
 					} else $$renderer.push("<!--[-1-->");
 					$$renderer.push(`<!--]--></li>`);
-				} else {
-					$$renderer.push("<!--[-1-->");
-					logLine($$renderer, row, false);
 				}
-				$$renderer.push(`<!--]-->`);
+				$$renderer.push(`<div${attr_class(`relative min-h-full ${listClass()}`)} data-testid="log-canvas"${attr_style("", { "min-width": void 0 })}><ol class="font-mono text-xs leading-5" data-testid="log-lines"><!--[-->`);
+				const each_array_3 = ensure_array_like(displayRows());
+				for (let $$index_4 = 0, $$length = each_array_3.length; $$index_4 < $$length; $$index_4++) {
+					let row = each_array_3[$$index_4];
+					if (row.kind === "request") {
+						$$renderer.push("<!--[0-->");
+						const open = isExpanded(row.key);
+						$$renderer.push(`<li${attr_class(clsx(listClass()), void 0, { "bg-sky-950": row.children.some((child) => child.selected) })} data-testid="log-request-group"${attr("data-chart-selected", row.children.some((child) => child.selected) ? "true" : void 0)}${attr("data-request-id", row.id)}${attr("data-level", row.level)}${attr("data-expanded", open ? "true" : void 0)}${attr("data-lines", row.count)}><button type="button" class="flex w-full flex-wrap items-baseline gap-2 px-3 py-0.5 text-left hover:bg-neutral-900/60"${attr("aria-expanded", open)}${attr("title", open ? "Hide the lines of this request" : "Show every line of this request")} data-testid="request-group-summary"><span class="shrink-0 truncate text-neutral-500"${attr_style(`width: ${stringify(timestampPx)}px`)}${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
+						if (groups.length > 1) $$renderer.push(`<!--[0--><span class="shrink-0 truncate text-teal-400/80"${attr_style(`width: ${stringify(groupPx)}px`)}${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
+						else $$renderer.push("<!--[-1-->");
+						$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> `);
+						if (open) {
+							$$renderer.push("<!--[0-->");
+							Chevron_down($$renderer, {
+								class: "shrink-0 text-neutral-600",
+								size: "1em"
+							});
+						} else {
+							$$renderer.push("<!--[-1-->");
+							Chevron_right($$renderer, {
+								class: "shrink-0 text-neutral-600",
+								size: "1em"
+							});
+						}
+						$$renderer.push(`<!--]--> <span class="shrink-0 rounded border border-neutral-700 bg-neutral-900 px-1.5 font-mono text-[0.6875rem] text-sky-200" data-testid="request-group-id" title="Request id shared by these lines">${escape_html(row.id)}</span> <span class="shrink-0 text-neutral-400" data-testid="request-group-count">${escape_html(formatCount(row.count))} lines</span> <span class="shrink-0 text-neutral-500" data-testid="request-group-span">${escape_html(row.span)}</span> <span${attr_class(`shrink-0 font-medium ${stringify(row.levelClass)}`)} data-testid="request-group-level">${escape_html(row.levelLabel)}</span> `);
+						if (!open) $$renderer.push(`<!--[0--><span class="min-w-0 truncate text-neutral-500" data-testid="request-group-preview">${escape_html(row.preview)}</span>`);
+						else $$renderer.push("<!--[-1-->");
+						$$renderer.push(`<!--]--></button> `);
+						if (open) {
+							$$renderer.push(`<!--[0--><ul class="contents"><!--[-->`);
+							const each_array_4 = ensure_array_like(row.children);
+							for (let $$index_3 = 0, $$length = each_array_4.length; $$index_3 < $$length; $$index_3++) {
+								let child = each_array_4[$$index_3];
+								logLine($$renderer, child, true);
+							}
+							$$renderer.push(`<!--]--></ul>`);
+						} else $$renderer.push("<!--[-1-->");
+						$$renderer.push(`<!--]--></li>`);
+					} else {
+						$$renderer.push("<!--[-1-->");
+						logLine($$renderer, row, false);
+					}
+					$$renderer.push(`<!--]-->`);
+				}
+				$$renderer.push(`<!--]--></ol> `);
+				ColumnResizer($$renderer, {
+					label: "Resize timestamp column",
+					width: timestampPx,
+					min: 64,
+					max: 320,
+					testId: "timestamp-resizer",
+					onChange: (next) => timestampPx = next,
+					onCommit: (next) => writePref(STORAGE_KEYS.timestampWidth, String(next)),
+					class: "absolute inset-y-0 w-2 border-r border-neutral-800/40",
+					style: `left: ${stringify(rowPaddingPx() + timestampPx - 4)}px`
+				});
+				$$renderer.push(`<!----> `);
+				if (groups.length > 1) {
+					$$renderer.push("<!--[0-->");
+					ColumnResizer($$renderer, {
+						label: "Resize log group column",
+						width: groupPx,
+						min: 64,
+						max: 640,
+						testId: "group-resizer",
+						onChange: (next) => groupPx = next,
+						onCommit: (next) => writePref(STORAGE_KEYS.groupWidth, String(next)),
+						class: "absolute inset-y-0 w-2 border-r border-neutral-800/40",
+						style: `left: ${stringify(rowPaddingPx() + timestampPx + rowGapPx() + groupPx - 4)}px`
+					});
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> `);
+				ColumnResizer($$renderer, {
+					label: "Resize stream column",
+					width: prefixPx,
+					min: PREFIX_MIN_PX,
+					max: PREFIX_MAX_PX,
+					testId: "prefix-resizer",
+					onChange: (next) => prefixPx = next,
+					onCommit: () => savePrefixWidth(),
+					class: "absolute inset-y-0 w-2 border-r border-neutral-800/40",
+					style: `left: ${stringify(handleLeft() - 4)}px`
+				});
+				$$renderer.push(`<!----></div>`);
 			}
-			$$renderer.push(`<!--]--></ol> `);
-			ColumnResizer($$renderer, {
-				label: "Resize prefix column",
-				width: prefixPx,
-				min: PREFIX_MIN_PX,
-				max: PREFIX_MAX_PX,
-				testId: "prefix-resizer",
-				onChange: (next) => prefixPx = next,
-				onCommit: () => savePrefixWidth(),
-				class: "absolute inset-y-0 w-2",
-				style: `left: ${stringify(handleLeft() - 4)}px`
-			});
-			$$renderer.push(`<!----></div>`);
-		}
-		$$renderer.push(`<!--]--></div></section>`);
+			$$renderer.push(`<!--]--></div>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></section>`);
 	});
 }
 //#endregion
@@ -1352,13 +1491,17 @@ function _page($$renderer, $$props) {
 		* A stored preference wins, so a reader who wants every line keeps every line.
 		*/
 		let groupRequests = true;
+		/** True while the group-list sidebar is open; collapsing gives the logs the full width. */
+		let sidebarOpen = true;
+		/** True while the log lines are shown; collapsing keeps only the viewer's header. */
+		let logOpen = true;
 		/** Bucketed counts behind the chart. */
 		let chartSelection = null;
 		let seriesBucketMs = 6e4;
 		let seriesPoints = [];
 		/** True while the archive counts are being fetched. */
 		let seriesLoading = false;
-		let chartMetric = "count";
+		let chartMetric = "duration";
 		let seriesRequest = 0;
 		/** True only when the local archive reports that it can be read. */
 		let archiveAvailable = derived(() => archiveStatus?.available === true);
@@ -1371,7 +1514,7 @@ function _page($$renderer, $$props) {
 		/** Largest sidebar width allowed: 44vw, but never below the minimum. */
 		let sidebarMaxPx = derived(() => remToPx(SIDEBAR_WIDTH.defaultRem));
 		let sidebarMinPx = remToPx(SIDEBAR_WIDTH.minRem);
-		let sidebarStyle = derived(() => `width: min(${sidebarPx}px, ${SIDEBAR_WIDTH.maxVw}vw)`);
+		let sidebarStyle = derived(() => `--sidebar-width: min(${sidebarPx}px, ${SIDEBAR_WIDTH.maxVw}vw)`);
 		/** Persists the sidebar width; failures are ignored (private mode, quota). */
 		function saveSidebarWidth() {
 			try {
@@ -1409,6 +1552,7 @@ function _page($$renderer, $$props) {
 				if (target !== region || requestedSource !== source) return;
 				if (response.endpoint !== null) endpoint = response.endpoint;
 				groups = response.groups;
+				puppy.wag();
 			} catch (error) {
 				if (target !== region || requestedSource !== source) return;
 				groups = [];
@@ -1484,6 +1628,14 @@ function _page($$renderer, $$props) {
 				localStorage?.setItem(STORAGE_KEYS.groupRequests, groupRequests ? "true" : "false");
 			} catch {}
 		}
+		/** Collapses or expands the log lines, and remembers the choice. */
+		function toggleLog() {
+			logOpen = !logOpen;
+			puppy.wag();
+			try {
+				localStorage?.setItem(STORAGE_KEYS.logOpen, logOpen ? "true" : "false");
+			} catch {}
+		}
 		/** Switches region: stops the stream, clears the list and reloads the groups. */
 		function changeRegion(next) {
 			if (next === "" || next === region) return;
@@ -1530,6 +1682,7 @@ function _page($$renderer, $$props) {
 		* Keeps the chart in step with the view: a new window, selection, source, level
 		* or a new batch of lines all re-load the counts.
 		*/
+		/** Every batch of log lines that arrives gives the puppy (when shown) a wag. */
 		/**
 		* Reacts to `archive-unavailable` from the stream (the file was locked or removed after boot) by
 		* re-checking the archive, so the toggle hides itself instead of offering a source that fails.
@@ -1613,6 +1766,7 @@ function _page($$renderer, $$props) {
 				if (request === seriesRequest) {
 					seriesPoints = series.points;
 					seriesBucketMs = series.bucketMs;
+					puppy.wag();
 				}
 			} catch {
 				if (request === seriesRequest) seriesPoints = [];
@@ -1620,7 +1774,16 @@ function _page($$renderer, $$props) {
 				if (request === seriesRequest) seriesLoading = false;
 			}
 		}
-		$$renderer.push(`<div class="flex flex-wrap items-center gap-x-3 gap-y-2"><span class="text-[0.6875rem] font-semibold uppercase tracking-wider text-neutral-500">Watching</span> <span class="max-w-[22rem] truncate rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 font-mono text-xs text-neutral-200">${escape_html(selectedGroup() ?? "no group selected")}</span> <span class="text-xs text-neutral-500">in</span> <span class="font-mono text-xs text-neutral-300">${escape_html(region === "" ? "resolving region…" : region)}</span> `);
+		$$renderer.push(`<div class="flex flex-wrap items-center gap-x-3 gap-y-2">`);
+		RangeControls($$renderer, {
+			mode,
+			range,
+			from: windowFrom,
+			to: windowTo,
+			loading: rangeLoading,
+			disabled: selectedGroup() === null,
+			liveDisabled: source === "archive"});
+		$$renderer.push(`<!----> <div class="ml-auto flex flex-wrap items-center gap-x-3 gap-y-2"><span class="text-[0.6875rem] font-semibold uppercase tracking-wider text-neutral-500">Watching</span> <span class="max-w-[22rem] truncate rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 font-mono text-xs text-neutral-200">${escape_html(selectedGroup() ?? "no group selected")}</span> <span class="text-xs text-neutral-500">in</span> <span class="font-mono text-xs text-neutral-300">${escape_html(region === "" ? "resolving region…" : region)}</span> `);
 		if (source === "archive") {
 			$$renderer.push("<!--[0-->");
 			EndpointBadge($$renderer, {
@@ -1637,18 +1800,15 @@ function _page($$renderer, $$props) {
 		}
 		$$renderer.push(`<!--]--> `);
 		$$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--></div> `);
+		$$renderer.push(`<!--]--></div></div> `);
 		$$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> `);
-		RangeControls($$renderer, {
-			mode,
-			range,
-			from: windowFrom,
-			to: windowTo,
-			loading: rangeLoading,
-			disabled: selectedGroup() === null,
-			liveDisabled: source === "archive"});
-		$$renderer.push(`<!----> <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-3 lg:flex-row"><div class="flex min-h-0 w-full flex-col gap-3 rounded-lg border border-neutral-800 bg-neutral-950/60 p-3 lg:shrink-0"${attr_style(sidebarStyle())} data-testid="sidebar">`);
+		$$renderer.push(`<!--]--> <div class="flex min-h-0 min-w-0 flex-1 flex-col border border-neutral-800 lg:flex-row"><div id="log-group-sidebar"${attr_class(`relative flex min-h-0 w-full flex-col border-b border-neutral-800 bg-neutral-950/60 lg:shrink-0 lg:border-b-0 lg:border-r `, "svelte-1uha8ag")}${attr_style(sidebarStyle())} data-testid="sidebar"><div class="flex min-h-9 flex-none items-center gap-x-3 border-b border-neutral-800 bg-neutral-900/40 px-3 py-1.5"><button type="button"${attr("aria-expanded", sidebarOpen)} aria-controls="log-group-sidebar"${attr("title", "Hide the group list")} data-testid="sidebar-collapse" class="flex items-center gap-1 text-sm font-semibold text-neutral-200 transition-colors hover:text-sky-300"><span class="hidden lg:inline-flex">`);
+		Chevron_left($$renderer, { size: "1em" });
+		$$renderer.push(`<!----></span> <span class="lg:hidden">`);
+		$$renderer.push("<!--[0-->");
+		Chevron_up($$renderer, { size: "1em" });
+		$$renderer.push(`<!--]--></span> ${escape_html(source === "archive" ? "Archived groups" : "Log groups")}</button></div> `);
+		$$renderer.push(`<!--[0--><div class="flex min-h-0 flex-1 flex-col gap-3 p-3" data-testid="sidebar-body">`);
 		SourceControls($$renderer, {
 			source,
 			archiveAvailable: archiveAvailable(),
@@ -1676,9 +1836,12 @@ function _page($$renderer, $$props) {
 			testId: "sidebar-resizer",
 			onChange: (next) => sidebarPx = next,
 			onCommit: () => saveSidebarWidth(),
-			class: "hidden lg:block lg:w-2"
+			class: "absolute inset-y-0 -right-1 z-10 hidden w-2 lg:block"
 		});
-		$$renderer.push(`<!----> <div class="flex min-h-0 min-w-0 flex-1 flex-col">`);
+		$$renderer.push(`<!---->`);
+		$$renderer.push(`<!--]--></div> `);
+		$$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <div class="flex min-h-0 min-w-0 flex-1 flex-col">`);
 		EventScatterPanel($$renderer, {
 			points: seriesPoints,
 			from: chartWindow().from,
@@ -1686,6 +1849,7 @@ function _page($$renderer, $$props) {
 			bucketMs: seriesBucketMs,
 			groups: selectedGroups,
 			byRequest: groupRequests,
+			fill: !logOpen,
 			metric: chartMetric,
 			onMetricChange: (metric) => {
 				chartSelection = null;
@@ -1704,7 +1868,7 @@ function _page($$renderer, $$props) {
 			onBrush: applyBrush
 		});
 		$$renderer.push(`<!----> `);
-		if (windowFrom !== null && windowTo !== null && mode === "historic") $$renderer.push(`<!--[0--><div class="flex flex-wrap items-center gap-2 text-[0.6875rem] text-neutral-500"><span data-testid="brush-window">zoomed to ${escape_html(new Date(windowFrom).toLocaleTimeString())} – ${escape_html(new Date(windowTo).toLocaleTimeString())}</span> <button type="button" data-testid="brush-clear" class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-0.5 font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">Reset zoom</button></div>`);
+		if (windowFrom !== null && windowTo !== null && mode === "historic") $$renderer.push(`<!--[0--><div class="flex flex-wrap items-center gap-2 border-b border-neutral-800 bg-neutral-950/60 px-3 py-1.5 text-[0.6875rem] text-neutral-500"><span data-testid="brush-window">zoomed to ${escape_html(new Date(windowFrom).toLocaleTimeString())} – ${escape_html(new Date(windowTo).toLocaleTimeString())}</span> <button type="button" data-testid="brush-clear" class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-0.5 font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">Reset zoom</button></div>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		LogViewer($$renderer, {
@@ -1724,6 +1888,8 @@ function _page($$renderer, $$props) {
 			onLevelChange: (next) => levelFilter = next,
 			groupRequests,
 			onGroupToggle: toggleGroupRequests,
+			open: logOpen,
+			onToggle: toggleLog,
 			filter,
 			paused: stream.paused,
 			autoScroll,
@@ -1746,4 +1912,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-DRoSEPVH.js.map
+//# sourceMappingURL=_page.svelte.js-CVlL2UsO.js.map