watch-tail 0.9.0 → 0.10.1

package/build/server/chunks/entries/pages/{_page.svelte.js-C9-7d7mD.js → _page.svelte.js-DS9p1LVo.js}

@@ -1,17 +1,65 @@
-import { a8 as escape_html, a7 as attr, ac as attr_style, a1 as derived, ad as attr_class, a6 as ensure_array_like, ae as stringify, af as bind_props, ag as clsx } from '../../chunks/index-server.js-CtH9Hqwf.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 { ae as escape_html, ac as attr, ad as attr_class, af as attr_style, a6 as ensure_array_like, ag as stringify, P as derived, ah as spread_props, al as bind_props, am as clsx } from '../../chunks/index-server.js-DOq0LmqS.js';
+import { c as LogStore, f as filterByLevel, g as filterEvents, h as effectiveLevel, t as tokenizeJson, b as detectLevel, j as formatLogMessage, k as eventKey, l as levelColorClass, d as detectRequestId, m as mostCriticalLevel, e as eventDurationMs } from '../../chunks/log-buffer.js-BjT3sJlh.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-i-NVNGIq.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 { 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-D09gVgvI.js';
+import { p as page, r as replaceState } from '../../chunks/state.js-CdO6iuBd.js';
 import '../../chunks/uneval.js-DaakSYFQ.js';
 import '../../chunks/shared.js-CgjUIvRK.js';
-import '../../chunks/exports.js-ClPPfcHj.js';
-import '../../chunks/internal2.js-CfVVfAb5.js';
-import '../../chunks/legacy-client.js-DAqKExQD.js';
-import '../../chunks/events.js-zIVaXIP1.js';
+import '../../chunks/exports.js-CvFPPbaH.js';
+import '../../chunks/internal2.js-B2FekELn.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
@@ -149,6 +197,318 @@ function EndpointBadge($$renderer, $$props) {
 	});
 }
 //#endregion
+//#region src/lib/request-groups.ts
+/**
+* Request grouping: the one place that decides what a "request" is.
+*
+* CloudWatch Logs has no concept of a request. A request is a set of lines that
+* share a log group and detected request id - a Lambda `REPORT RequestId: ...` line, an API
+* Gateway access log, a framework's structured `requestId` - and the same id
+* must produce the same group in the log view and in the chart. Both call the
+* helpers here, so a line that reads as one request in one view reads as one
+* request in the other.
+*
+* Design decisions:
+*
+* - A request is placed where it *starts* (its first line), because a request
+*   that logs for two minutes is one event that happened, not two.
+* - A request's level is its most critical line. An error is what a reader
+*   needs to see, even when twenty lines around it are info.
+* - Lines without a request id are not grouped: they keep their own row and
+*   their own chart mark, which is honest about what the log contains.
+*/
+/**
+* Request id of an event.
+*
+* A value the server already detected wins, because it is the same value the
+* archive stored; only an event that carries no verdict is detected here.
+*/
+function requestIdOf(event) {
+	if (event.requestId !== void 0) {
+		const declared = event.requestId;
+		return declared === null || declared === "" ? null : declared;
+	}
+	return detectRequestId(event.message ?? "");
+}
+/** Level of a request: its worst line, or `unknown` when no line has a level. */
+function requestLevel(events) {
+	return mostCriticalLevel(events.map((event) => effectiveLevel(event))) ?? "unknown";
+}
+/** Groups events by log group and request id, keeping every timestamp and byte of the originals. */
+function collectRequests(events) {
+	const byId = /* @__PURE__ */ new Map();
+	events.forEach((event, index) => {
+		const id = requestIdOf(event);
+		if (id === null) return;
+		const key = JSON.stringify([event.group ?? "", id]);
+		const existing = byId.get(key);
+		if (existing === void 0) {
+			byId.set(key, {
+				id,
+				level: "unknown",
+				first: event.timestamp,
+				last: event.timestamp,
+				events: [{
+					event,
+					index
+				}]
+			});
+			return;
+		}
+		existing.events.push({
+			event,
+			index
+		});
+		if (Number.isFinite(event.timestamp)) {
+			if (event.timestamp < existing.first) existing.first = event.timestamp;
+			if (event.timestamp > existing.last) existing.last = event.timestamp;
+		}
+	});
+	const groups = [...byId.values()];
+	for (const group of groups) group.level = requestLevel(group.events.map((entry) => entry.event));
+	return groups;
+}
+/** True when an event belongs to a request. */
+function hasRequestId(event) {
+	return requestIdOf(event) !== null;
+}
+/**
+* Builds the log view's rows for a buffer.
+*
+* A request is placed where its first line appeared, so the view stays in time
+* order and a request never jumps down the list when its last line lands. The
+* lines inside a request keep their own order.
+*/
+function requestRows(events) {
+	const at = /* @__PURE__ */ new Map();
+	for (const group of collectRequests(events)) {
+		const first = group.events[0];
+		if (first !== void 0) at.set(first.index, group);
+	}
+	const rows = [];
+	events.forEach((event, index) => {
+		const group = at.get(index);
+		if (group !== void 0) {
+			rows.push({
+				kind: "request",
+				key: `req:${JSON.stringify([group.events[0]?.event.group ?? "", group.id])}`,
+				request: group
+			});
+			return;
+		}
+		if (hasRequestId(event)) return;
+		rows.push({
+			kind: "line",
+			key: `line:${index}`,
+			event,
+			index
+		});
+	});
+	return rows;
+}
+/**
+* Counts requests into buckets, one mark per request, per group and level.
+*
+* A request is counted in the bucket its first line falls in, and only when
+* that first line is inside the window: a request that started before the window
+* is not re-counted in every bucket it touches. Lines that belong to no request
+* are still counted, each as one mark, so nothing disappears from the chart when
+* grouping is on. The level filter is applied to the request's most critical
+* level, matching what the archive answers, so the chips mean the same thing in
+* both sources.
+*/
+function bucketRequests(events, options) {
+	const bucketMs = options.bucketMs > 0 ? Math.round(options.bucketMs) : 6e4;
+	const levelFilter = options.level ?? null;
+	const fallbackGroup = options.fallbackGroup ?? "";
+	const marks = [];
+	for (const group of collectRequests(events)) marks.push({
+		t: group.first,
+		group: group.events[0]?.event.group ?? fallbackGroup,
+		level: group.level
+	});
+	for (const event of events) {
+		if (requestIdOf(event) !== null) continue;
+		marks.push({
+			t: event.timestamp,
+			group: event.group ?? fallbackGroup,
+			level: effectiveLevel(event) ?? "unknown"
+		});
+	}
+	const counts = /* @__PURE__ */ new Map();
+	for (const mark of marks) {
+		const timestamp = mark.t;
+		if (!Number.isFinite(timestamp)) continue;
+		if (timestamp < options.from || timestamp >= options.to) continue;
+		if (levelFilter !== null && mark.level !== levelFilter) continue;
+		const t = Math.floor(timestamp / bucketMs) * bucketMs;
+		const name = mark.group;
+		const key = `${t}\u0000${name}\u0000${mark.level}`;
+		const existing = counts.get(key);
+		if (existing === void 0) counts.set(key, {
+			t,
+			group: name,
+			level: mark.level,
+			events: 1
+		});
+		else existing.events += 1;
+	}
+	return [...counts.values()].toSorted((a, b) => a.t === b.t ? a.level.localeCompare(b.level) : a.t - b.t);
+}
+//#endregion
+//#region src/lib/series-buckets.ts
+/**
+* Client-side bucketing for the chart.
+*
+* The archive answers `/api/series` with counts it can compute in DuckDB, but a
+* CloudWatch view has no aggregate API, so the events already streamed into the
+* view are bucketed here instead. Both paths produce the same
+* {@link SeriesPoint} shape, so the chart has one data contract.
+*/
+/** Severity order used wherever levels are listed. */
+var LEVEL_ORDER = [
+	"error",
+	"warn",
+	"info",
+	"debug",
+	"unknown"
+];
+/** Label shown for a level. */
+var LEVEL_LABELS = {
+	error: "Error",
+	warn: "Warn",
+	info: "Info",
+	debug: "Debug",
+	unknown: "No level"
+};
+/**
+* Chart palette per level, matching the colours the log viewer uses for lines.
+*
+* SVG needs real colour values rather than Tailwind classes, so the palette is
+* kept next to the level helpers instead of in the component.
+*/
+var SERIES_LEVEL_COLOR = {
+	error: "var(--chart-error, #f87171)",
+	warn: "var(--chart-warn, #fcd34d)",
+	info: "var(--chart-info, #a3a3a3)",
+	debug: "var(--chart-debug, #737373)",
+	unknown: "var(--chart-unknown, #525252)"
+};
+/** Bucket width used when a caller does not ask for one. */
+var DEFAULT_BUCKET_MS = 6e4;
+/** Level of an event as the chart counts it. */
+function seriesLevelOf(event) {
+	return effectiveLevel(event) ?? "unknown";
+}
+/**
+* Counts events into buckets of one width, per group and level.
+*
+* Events outside the window are ignored, as are events without a usable
+* timestamp: the chart describes exactly the window it is drawn for. With
+* `byRequest`, a request is one mark instead of its lines being many, which is
+* the same thing the archive counts in SQL.
+*/
+function bucketEvents(events, options) {
+	const requested = options.bucketMs ?? 6e4;
+	const bucketMs = Number.isFinite(requested) && requested > 0 ? Math.round(requested) : DEFAULT_BUCKET_MS;
+	const levelFilter = options.level ?? null;
+	const fallbackGroup = options.fallbackGroup ?? "";
+	if (options.byRequest === true) return bucketRequests(events, {
+		from: options.from,
+		to: options.to,
+		bucketMs,
+		level: levelFilter,
+		fallbackGroup
+	});
+	const counts = /* @__PURE__ */ new Map();
+	for (const event of events) {
+		const timestamp = event.timestamp;
+		if (!Number.isFinite(timestamp)) continue;
+		if (timestamp < options.from || timestamp >= options.to) continue;
+		const level = seriesLevelOf(event);
+		if (levelFilter !== null && level !== levelFilter) continue;
+		const t = Math.floor(timestamp / bucketMs) * bucketMs;
+		const group = event.group ?? fallbackGroup;
+		const key = `${t}\u0000${group}\u0000${level}`;
+		const existing = counts.get(key);
+		if (existing === void 0) counts.set(key, {
+			t,
+			group,
+			level,
+			events: 1
+		});
+		else existing.events += 1;
+	}
+	return [...counts.values()].toSorted((a, b) => a.t === b.t ? a.level.localeCompare(b.level) : a.t - b.t);
+}
+/**
+* Splits points into one series per level, in severity order.
+*
+* A level with no events is left out, so the legend only names what is drawn.
+*/
+function groupByLevel(points) {
+	const byLevel = /* @__PURE__ */ new Map();
+	for (const point of points) {
+		const bucket = byLevel.get(point.level);
+		if (bucket === void 0) byLevel.set(point.level, [point]);
+		else bucket.push(point);
+	}
+	return LEVEL_ORDER.filter((level) => byLevel.has(level)).map((level) => {
+		const levelPoints = (byLevel.get(level) ?? []).toSorted((a, b) => a.t - b.t);
+		return {
+			level,
+			label: LEVEL_LABELS[level],
+			points: levelPoints,
+			events: levelPoints.reduce((sum, point) => sum + point.events, 0)
+		};
+	});
+}
+/** Fraction of the window a brush must stay under to count as a zoom. */
+var MAX_BRUSH_FRACTION = .98;
+/**
+* True when a brushed range is a deliberate zoom rather than a stray click.
+*
+* A pointer down and up a couple of pixels apart still produces a range (the
+* chart has a minimum selection width), and a double click on empty space
+* selects the whole domain. Acting on either would re-scope the log view to a
+* window with nothing in it, so a brush is only applied when it spans at least
+* two buckets and a floor of {@link MIN_BRUSH_MS}, and is narrower than almost
+* the whole window.
+*/
+function isMeaningfulBrush(range, window, bucketMs) {
+	const span = range.to - range.from;
+	if (!Number.isFinite(span) || span <= 0) return false;
+	const windowSpan = window.to - window.from;
+	if (!Number.isFinite(windowSpan) || windowSpan <= 0) return false;
+	if (span < Math.max(3e4, bucketMs * 2)) return false;
+	return span <= windowSpan * MAX_BRUSH_FRACTION;
+}
+/** One point per identified request, using its observed first/last events in the window. */
+function requestDurations(events, options) {
+	const byGroup = /* @__PURE__ */ new Map();
+	for (const event of events) {
+		if (!Number.isFinite(event.timestamp) || event.timestamp < options.from || event.timestamp > options.to) continue;
+		const group = event.group ?? options.fallbackGroup ?? "";
+		const rows = byGroup.get(group) ?? [];
+		rows.push(event);
+		byGroup.set(group, rows);
+	}
+	const points = [];
+	for (const [group, rows] of byGroup) for (const request of collectRequests(rows)) {
+		if (options.level && request.level !== options.level) continue;
+		const last = request.events.reduce((latest, entry) => entry.event.timestamp >= latest.timestamp ? entry.event : latest, request.events[0].event);
+		points.push({
+			t: request.first,
+			group,
+			level: request.level,
+			events: 1,
+			requestId: request.id,
+			durationMs: request.last - request.first + eventDurationMs(last.message)
+		});
+	}
+	return points.toSorted((a, b) => a.t - b.t || a.group.localeCompare(b.group) || (a.requestId ?? "").localeCompare(b.requestId ?? ""));
+}
+//#endregion
 //#region src/lib/resize.ts
 /**
 * Pure helpers for the drag-resizable columns in the UI.
@@ -159,12 +519,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). */
@@ -203,8 +565,11 @@ 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.
+		* The server build gets a stub instead: without it, layerchart and d3 are
+		* compiled into the server chunks (and shipped in the npm package) for code
+		* that never runs there.
 		*/
-		const loadChartModule = () => import('../../chunks/EventScatter.js-CO2GonW-.js');
+		const loadChartModule = () => Promise.reject(/* @__PURE__ */ new Error("the chart is client-only"));
 		/** Bucketed counts for the window. */
 		/** Inclusive start of the window, epoch ms. */
 		/** Inclusive end of the window, epoch ms. */
@@ -214,9 +579,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 = "duration", 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));
@@ -224,54 +590,51 @@ 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 shrink-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>`);
-			else $$renderer.push("<!--[-1-->");
-			$$renderer.push(`<!--]--> <div class="overflow-hidden"${attr_style(`height: ${stringify(height)}px`)} data-testid="chart-body">`);
-			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>`);
+					appear shorter</p>`);
 			else $$renderer.push("<!--[-1-->");
 			$$renderer.push(`<!--]--></div>`);
 		} else $$renderer.push("<!--[-1-->");
@@ -310,8 +673,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"><!--[-->`);
@@ -320,7 +687,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>`);
@@ -526,7 +899,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(`<!--]--> `);
@@ -545,17 +918,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("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-0 flex-1 overflow-hidden whitespace-nowrap font-mono" aria-hidden="true">${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>`);
@@ -657,11 +1030,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;
+		/** 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;
-		const ROW_PADDING_PX = remToPx(.75);
-		const ROW_GAP_PX = remToPx(.5);
+		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);
@@ -859,7 +1234,7 @@ 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 + timestampPx + ROW_GAP_PX + (groups.length > 1 ? groupPx + ROW_GAP_PX : 0) + prefixPx);
+		let handleLeft = derived(() => rowPaddingPx() + timestampPx + rowGapPx() + (groups.length > 1 ? groupPx + rowGapPx() : 0) + prefixPx);
 		/** Prefix column width as a CSS length. */
 		let prefixStyle = derived(() => `width: ${prefixPx}px`);
 		/** Rows the user has opened, keyed by row key. */
@@ -884,7 +1259,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>`);
@@ -898,144 +1281,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 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(`<!--]--> <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"${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> `);
+			$$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(`<!--]--> <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>`);
-					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(`<!--]--></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(ROW_PADDING_PX + timestampPx - 4)}px`
-			});
-			$$renderer.push(`<!----> `);
-			if (groups.length > 1) {
-				$$renderer.push("<!--[0-->");
+				$$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 log group column",
-					width: groupPx,
+					label: "Resize timestamp column",
+					width: timestampPx,
 					min: 64,
-					max: 640,
-					testId: "group-resizer",
-					onChange: (next) => groupPx = next,
-					onCommit: (next) => writePref(STORAGE_KEYS.groupWidth, String(next)),
+					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(ROW_PADDING_PX + timestampPx + ROW_GAP_PX + groupPx - 4)}px`
+					style: `left: ${stringify(rowPaddingPx() + timestampPx - 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(`<!--]--></div></section>`);
+				$$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(`<!--]--></div>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></section>`);
 	});
 }
 //#endregion
@@ -1377,6 +1803,10 @@ 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;
@@ -1396,7 +1826,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 {
@@ -1434,6 +1864,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 = [];
@@ -1509,6 +1940,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;
@@ -1555,6 +1994,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.
@@ -1638,6 +2078,7 @@ function _page($$renderer, $$props) {
 				if (request === seriesRequest) {
 					seriesPoints = series.points;
 					seriesBucketMs = series.bucketMs;
+					puppy.wag();
 				}
 			} catch {
 				if (request === seriesRequest) seriesPoints = [];
@@ -1645,7 +2086,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, {
@@ -1662,18 +2112,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(),
@@ -1701,9 +2148,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,
@@ -1711,6 +2161,7 @@ function _page($$renderer, $$props) {
 			bucketMs: seriesBucketMs,
 			groups: selectedGroups,
 			byRequest: groupRequests,
+			fill: !logOpen,
 			metric: chartMetric,
 			onMetricChange: (metric) => {
 				chartSelection = null;
@@ -1729,7 +2180,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, {
@@ -1749,6 +2200,8 @@ function _page($$renderer, $$props) {
 			onLevelChange: (next) => levelFilter = next,
 			groupRequests,
 			onGroupToggle: toggleGroupRequests,
+			open: logOpen,
+			onToggle: toggleLog,
 			filter,
 			paused: stream.paused,
 			autoScroll,
@@ -1771,4 +2224,3 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-C9-7d7mD.js.map