watch-tail 0.3.1 → 0.5.0

package/build/server/chunks/entries/pages/{_page.svelte.js-DzAAqWz2.js → _page.svelte.js-B-kVwiNh.js}

@@ -1,11 +1,15 @@
-import '../../chunks/internal.js-B-DZpK-L.js';
-import { ah as escape_html, ai as attr_style, P as derived, ag as attr, aj as attr_class, ak as ensure_array_like, al as stringify, am as clsx } from '../../chunks/server.js-ByNB8uti.js';
+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 { L as LogStore, t as tokenizeJson, f as filterByLevel, b as filterEvents, e as effectiveLevel, a as detectLevel, c as formatLogMessage, g as eventKey, l as levelColorClass } from '../../chunks/log-buffer.js-CpI7gyom.js';
 import { R as REGION_CODES } from '../../chunks/regions.js-IQPMyP5C.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-V2NYGhy_.js';
+import { p as page, r as replaceState } from '../../chunks/state.js-Dves8H8h.js';
+import { S as SERIES_LEVEL_COLOR, g as groupByLevel, i as isMeaningfulBrush, b as bucketEvents } from '../../chunks/series-buckets.js-CX_rWCeH.js';
 import '../../chunks/uneval.js-DaakSYFQ.js';
+import '../../chunks/index-server.js-DNLOKvM0.js';
 import '../../chunks/shared.js-CgjUIvRK.js';
-import '../../chunks/exports.js-CvFPPbaH.js';
+import '../../chunks/exports.js-ClPPfcHj.js';
+import '../../chunks/internal2.js-DDcktblR.js';
+import '../../chunks/legacy-client.js-DJmDw3Zx.js';
 import '../../chunks/utils.js-BIlHjgGW.js';
 
 //#region src/lib/format.ts
@@ -138,7 +142,8 @@ var STORAGE_KEYS = {
 	sidebarWidth: "watch-stream:sidebar-width",
 	prefixWidth: "watch-stream:prefix-width",
 	wrap: "watch-stream:wrap",
-	jsonView: "watch-stream:json-view"
+	jsonView: "watch-stream:json-view",
+	chartOpen: "watch-stream:chart-open"
 };
 /** Default width of the group-list pane, in rem (matches the original layout). */
 var SIDEBAR_WIDTH = {
@@ -162,6 +167,85 @@ function remToPx(rem, rootFontSize = 16) {
 	return rem * rootFontSize;
 }
 //#endregion
+//#region src/lib/components/EventScatterPanel.svelte
+function EventScatterPanel($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/**
+		* The chart panel above the log view: a header that is always cheap to render
+		* (title, totals, per-level legend) and the chart below it, loaded on demand.
+		*
+		* The charting library is imported dynamically and only once the panel is open,
+		* so layerchart never delays the first paint of the log view. The header stays
+		* available while the chart chunk is still loading, and the whole panel
+		* collapses to that header so a user who does not want the chart can reclaim
+		* the space - the choice is remembered.
+		*/
+		/** Props the lazily loaded chart takes. */
+		/** The chart component, as its module exports it. */
+		/** Fetches the chart module; injectable so tests need no chunk fetch. */
+		/**
+		* 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-DqCMPeHG.js');
+		/** Bucketed counts for the window. */
+		/** Inclusive start of the window, epoch ms. */
+		/** Inclusive end of the window, epoch ms. */
+		/** Bucket width in ms, shown in the summary. */
+		/** Log groups the points cover, for the summary. */
+		/** True while the counts are being fetched. */
+		/** Called with the brushed range when the drag ends, or `null` on clear. */
+		/** Chart height in px. */
+		/** Start open, which is also what the first visit uses. */
+		/** Chart module loader; defaults to the dynamic import. */
+		let { points = [], from = 0, to = 0, bucketMs = 0, groups = [], loading = false, onBrush, height = 200, open = true, loadChart = loadChartModule } = $$props;
+		let expanded = derived(() => open);
+		/** Totals and labels per level, in severity order. */
+		let levelGroups = derived(() => groupByLevel(points));
+		/** Total events drawn. */
+		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);
+		/** 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" aria-label="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> Events over time</button> <span class="text-neutral-400" data-testid="scatter-summary">${escape_html(formatCount(totalEvents()))} events in ${escape_html(formatCount(bucketCount()))} buckets</span> `);
+		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 = 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">counting…</span>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> `);
+		if (expanded()) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<!--[-1--><span class="ml-auto text-neutral-500" data-testid="scatter-hint">drag to zoom · click to clear</span>`);
+			$$renderer.push(`<!--]-->`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></div> `);
+		if (expanded()) {
+			$$renderer.push("<!--[0-->");
+			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">No events in this window yet.</p>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]-->`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></section>`);
+		bind_props($$props, { reset });
+	});
+}
+//#endregion
 //#region src/lib/components/ColumnResizer.svelte
 function ColumnResizer($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
@@ -189,11 +273,12 @@ function RangeControls($$renderer, $$props) {
 		/** Active custom bounds as epoch ms, owned by the page. */
 		/** True when no group is selected, so there is nothing to scope. */
 		/** True while a historic window is being fetched. */
+		/** 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} = $$props;
+		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…");
-		$$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")} 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"}`)}>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> `);
+		$$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"><!--[-->`);
 			const each_array = ensure_array_like(HISTORIC_PRESETS);
@@ -216,8 +301,8 @@ function RangeControls($$renderer, $$props) {
 //#region src/lib/groups-client.ts
 /**
 * Browser-side fetch helpers for the watch-stream JSON API (`/api/health`, `/api/regions`,
-* `/api/log-groups`). Every helper throws {@link ApiError} on a non-2xx response so the UI can show
-* the API `error` message instead of an opaque failure.
+* `/api/log-groups`, `/api/archive`). Every helper throws {@link ApiError} on a non-2xx response so
+* the UI can show the API `error` message instead of an opaque failure.
 */
 /** Region list used by the picker before (or instead of) `/api/regions`. */
 var DEFAULT_REGIONS = REGION_CODES;
@@ -251,11 +336,30 @@ function apiErrorMessage(value, fallback = "Unexpected API error") {
 function buildLogGroupsUrl(query) {
 	const search = new URLSearchParams();
 	if (query.region) search.set("region", query.region);
+	if (query.source) search.set("source", query.source);
 	if (query.prefix) search.set("prefix", query.prefix);
 	if (typeof query.limit === "number" && Number.isFinite(query.limit)) search.set("limit", String(query.limit));
 	const suffix = search.toString();
 	return suffix === "" ? "/api/log-groups" : `/api/log-groups?${suffix}`;
 }
+/** Builds the `/api/series` URL for a query. */
+function buildSeriesUrl(query) {
+	const search = new URLSearchParams();
+	if (query.region) search.set("region", query.region);
+	search.set("source", "archive");
+	const groups = (query.groups ?? []).filter((name) => name.length > 0);
+	if (groups.length > 0) search.set("groups", groups.join(","));
+	if (typeof query.from === "number" && Number.isFinite(query.from)) search.set("from", String(Math.round(query.from)));
+	if (typeof query.to === "number" && Number.isFinite(query.to)) search.set("to", String(Math.round(query.to)));
+	const levels = (query.levels ?? []).filter((level) => level.length > 0);
+	if (levels.length > 0) search.set("level", levels.join(","));
+	if (typeof query.bucketMs === "number" && Number.isFinite(query.bucketMs) && query.bucketMs > 0) search.set("bucket", String(Math.round(query.bucketMs)));
+	return `/api/series?${search.toString()}`;
+}
+/** `GET /api/series` - bucketed event counts for the chart. */
+function fetchSeries(query) {
+	return getJson(buildSeriesUrl(query), query);
+}
 /** True for an abort, which is a normal way to cancel a request. */
 function isAbort(error) {
 	return error instanceof Error && error.name === "AbortError";
@@ -287,7 +391,11 @@ async function getJson(url, options) {
 	});
 	return body;
 }
-/** `GET /api/log-groups` - log groups for a region. */
+/**
+* `GET /api/log-groups` - log groups for a region, from CloudWatch or the local archive.
+*
+* The archive list needs no credentials and never reaches AWS.
+*/
 function fetchLogGroups(query) {
 	return getJson(buildLogGroupsUrl(query), query);
 }
@@ -295,6 +403,18 @@ function fetchLogGroups(query) {
 function noGroupsMessage(region) {
 	return `No log groups found in ${region}. Start floci and run \`pnpm seed\` to create sample groups.`;
 }
+/** Plain statement of what the archive source shows, used next to the toggle. */
+var ARCHIVE_NOTE = "Locally archived events - read from the local DuckDB file, no CloudWatch credentials, historic windows only.";
+/** Tooltip for the archive indicator: what it shows and which file backs it. */
+function describeArchive(path) {
+	const trimmed = typeof path === "string" ? path.trim() : "";
+	const head = "Locally archived events instead of live CloudWatch data";
+	return trimmed === "" ? head : `${head} (${trimmed})`;
+}
+/** Message shown when the archive holds nothing for a region. */
+function noArchivedGroupsMessage(region) {
+	return `Nothing archived for ${region === "" ? "this region" : region} yet - stream a group from CloudWatch once and it will appear here.`;
+}
 /** Drops a trailing period so an appended sentence does not double up. */
 function trimSentence(text) {
 	return text.trim().replace(/\.+$/, "");
@@ -316,25 +436,57 @@ function describeStreamError(region, group, message) {
 function LogGroupList($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		/** Groups returned for the active region. */
+		/** Where the list came from; the archive list shows local counts instead of sizes. */
 		/** Active region, used for context in the empty state. */
-		/** Group name currently being tailed. */
+		/** Names of the groups currently being tailed; empty when none are selected. */
 		/** API error message, shown instead of the list. */
 		/** Row cap; defaults to {@link MAX_GROUP_ROWS}. */
-		/** Called with the group name when a row is clicked. */
+		/** Called with the group name when a row is clicked, replacing the selection. */
+		/** Called with the group name when its checkbox is toggled in or out of the selection. */
 		/** Called when the refresh button is clicked. */
-		let { groups = [], region = "", selected = null, loading = false, error = null, maxRows = 500} = $$props;
+		let { groups = [], source = "cloudwatch", region = "", selected = [], loading = false, error = null, maxRows = 500} = $$props;
 		let search = "";
+		/** True when the list holds archived groups rather than live CloudWatch ones. */
+		let archived = derived(() => source === "archive");
+		/** Badge text for a group: how many events the archive holds for it. */
+		function archivedCount(group) {
+			return group.archivedEvents === void 0 ? null : `${formatCount(group.archivedEvents)} archived`;
+		}
+		/** `oldest -> newest` span of a group's archived events, or `null` when unknown. */
+		function archivedSpan(group) {
+			if (group.archivedOldest === void 0 || group.archivedNewest === void 0) return null;
+			return `${formatTimestamp(group.archivedOldest)} \u2192 ${formatTimestamp(group.archivedNewest)}`;
+		}
 		/** Groups matching the search box, case-insensitively. */
 		let filtered = derived(() => groups.filter((group) => group.name.toLowerCase().includes(search.trim().toLowerCase())));
 		/** Rows actually rendered, capped at `maxRows`. */
 		let visible = derived(() => filtered().slice(0, maxRows));
 		let truncated = derived(() => filtered().length > visible().length);
 		let query = derived(() => search.trim());
-		/** Row styling, highlighting the group that is currently being tailed. */
+		/**
+		* Selection as a flat list of names. `selected` is typed as a list, but callers that have not
+		* migrated yet may still pass a single name (or `null`), so those are normalised here.
+		*/
+		function selectionList(value) {
+			if (value === null || value === void 0) return [];
+			return Array.isArray(value) ? value : [value];
+		}
+		let activeSelection = derived(() => selectionList(selected));
+		/** True when `name` is part of the current (possibly multi-group) selection. */
+		function isSelected(name) {
+			return activeSelection().includes(name);
+		}
+		/** Row styling, highlighting every group that is currently being tailed. */
 		function rowTone(name) {
-			return name === selected ? "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";
+			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">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></div> <button type="button"${attr("disabled", loading, true)} 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 disabled:cursor-not-allowed disabled:opacity-50">${escape_html(loading ? "Refreshing…" : "Refresh")}</button></div> <div class="flex flex-col gap-1.5"><label class="sr-only" for="group-search">Search log groups</label> <input id="group-search" type="search" placeholder="Search log groups"${attr("value", search)} class="w-full rounded-md border border-neutral-800 bg-neutral-900 px-2.5 py-1.5 text-sm text-neutral-100 outline-none transition-colors placeholder:text-neutral-600 hover:border-neutral-700 focus:border-sky-600"/></div> `);
+		$$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> `);
+		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(`<!--]--> `);
+		if (archived()) $$renderer.push(`<!--[0--><span 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" data-testid="group-source-badge">local</span>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></div> <button type="button"${attr("disabled", loading, true)} 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 disabled:cursor-not-allowed disabled:opacity-50">${escape_html(loading ? "Refreshing…" : "Refresh")}</button></div> <div class="flex flex-col gap-1.5"><label class="sr-only" for="group-search">Search log groups</label> <input id="group-search" type="search" placeholder="Search log groups"${attr("value", search)} class="w-full rounded-md border border-neutral-800 bg-neutral-900 px-2.5 py-1.5 text-sm text-neutral-100 outline-none transition-colors placeholder:text-neutral-600 hover:border-neutral-700 focus:border-sky-600"/></div> `);
 		if (error !== null && error !== "") $$renderer.push(`<!--[0--><p role="alert" data-testid="group-error" class="rounded-md border border-red-900 bg-red-950/50 px-3 py-2 text-xs leading-5 text-red-300">${escape_html(error)}</p>`);
 		else if (loading && groups.length === 0) {
 			$$renderer.push(`<!--[1--><div class="flex flex-col gap-2" data-testid="group-loading" aria-busy="true"><!--[-->`);
@@ -344,15 +496,23 @@ function LogGroupList($$renderer, $$props) {
 				$$renderer.push(`<div class="h-5 animate-pulse rounded bg-neutral-800/80"></div>`);
 			}
 			$$renderer.push(`<!--]--> <p class="text-xs text-neutral-500">Loading log groups…</p></div>`);
-		} 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(noGroupsMessage(region))}</p>`);
+		} 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"><!--[-->`);
 			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><button type="button" data-testid="group-row"${attr("aria-current", group.name === selected ? "true" : void 0)}${attr_class(`flex w-full 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> `);
-				if (group.storedBytes !== void 0) $$renderer.push(`<!--[0--><span class="shrink-0 text-[0.6875rem] text-neutral-500">${escape_html(formatBytes(group.storedBytes))}</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("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> `);
+				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>`);
+					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>`);
 				else $$renderer.push("<!--[-1-->");
 				$$renderer.push(`<!--]--></button></li>`);
 			}
@@ -402,297 +562,6 @@ function StatusBadge($$renderer, $$props) {
 	$$renderer.push(`<span data-testid="status-badge"${attr("data-status", status)}${attr_class(`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium ${stringify(tone())}`)}><span${attr_class(`size-1.5 rounded-full ${stringify(dot())}`)} aria-hidden="true"></span> ${escape_html(text())}</span>`);
 }
 //#endregion
-//#region src/lib/log-buffer.ts
-/** Maximum number of lines kept in the visible client buffer. */
-var DEFAULT_CAPACITY = 5e3;
-var ERROR_PATTERN = /\b(ERROR|FATAL|CRITICAL|CRIT|PANIC|EXCEPTION|TRACEBACK|SEVERE|FAILED|FAILURE)\b/;
-var WARN_PATTERN = /\b(WARN|WARNING)\b/;
-var DEBUG_PATTERN = /\b(DEBUG|TRACE|VERBOSE)\b/;
-/**
-* Guesses the severity of a log line from its text.
-* Plain structured logs such as `{"level":"WARN"}` are detected too, because the level word is
-* matched anywhere in the message. Order of precedence: error, warn, debug, info.
-*/
-function detectLevel(message) {
-	const upper = (message ?? "").toUpperCase();
-	if (ERROR_PATTERN.test(upper)) return "error";
-	if (WARN_PATTERN.test(upper)) return "warn";
-	if (DEBUG_PATTERN.test(upper)) return "debug";
-	return "info";
-}
-/** Tailwind text colour class for a severity. */
-function levelColorClass(level) {
-	switch (level) {
-		case "error": return "text-red-400";
-		case "warn": return "text-amber-300";
-		case "debug": return "text-neutral-500";
-		default: return "text-neutral-200";
-	}
-}
-/** Stable key for rendering a log line, since event ids can repeat or be missing. */
-function eventKey(event, index) {
-	return `${event.id ?? "no-id"}:${event.timestamp}:${index}`;
-}
-/** Case-insensitive substring match over the message and the stream name. */
-function matchesFilter(event, query) {
-	const needle = (query ?? "").trim().toLowerCase();
-	if (needle === "") return true;
-	return `${event.message ?? ""} ${event.streamName ?? ""}`.toLowerCase().includes(needle);
-}
-/** Returns the events matching `query`, in arrival order. */
-function filterEvents(events, query) {
-	if ((query ?? "").trim() === "") return events.slice();
-	return events.filter((event) => matchesFilter(event, query));
-}
-/** Creates an array of `length` undefined slots. */
-function emptySlots(length) {
-	return Array.from({ length });
-}
-/**
-* Fixed-capacity ring buffer that overwrites the oldest item once it is full.
-*/
-var LogRingBuffer = class {
-	/** Maximum number of items kept. */
-	capacity;
-	#items;
-	#start = 0;
-	#size = 0;
-	#dropped = 0;
-	constructor(capacity = DEFAULT_CAPACITY) {
-		if (!Number.isInteger(capacity) || capacity <= 0) throw new RangeError(`capacity must be a positive integer, received ${capacity}`);
-		this.capacity = capacity;
-		this.#items = emptySlots(capacity);
-	}
-	/** Number of items currently stored. */
-	get size() {
-		return this.#size;
-	}
-	/** Number of items discarded because the buffer was full. */
-	get dropped() {
-		return this.#dropped;
-	}
-	/** True when the buffer holds `capacity` items. */
-	get full() {
-		return this.#size === this.capacity;
-	}
-	/** Appends one item, dropping the oldest item when the buffer is full. */
-	push(item) {
-		if (this.#size === this.capacity) {
-			this.#dropped += 1;
-			this.#start = (this.#start + 1) % this.capacity;
-			this.#size -= 1;
-		}
-		const index = (this.#start + this.#size) % this.capacity;
-		this.#items[index] = item;
-		this.#size += 1;
-	}
-	/** Appends several items in order. */
-	pushMany(items) {
-		for (const item of items) this.push(item);
-	}
-	/** Copies the stored items into an array ordered oldest to newest. */
-	toArray() {
-		const output = emptySlots(this.#size);
-		for (let offset = 0; offset < this.#size; offset += 1) output[offset] = this.#items[(this.#start + offset) % this.capacity];
-		return output;
-	}
-	/** Oldest stored item, or `undefined` when empty. */
-	first() {
-		return this.#size === 0 ? void 0 : this.#items[this.#start];
-	}
-	/** Newest stored item, or `undefined` when empty. */
-	last() {
-		return this.#size === 0 ? void 0 : this.#items[(this.#start + this.#size - 1) % this.capacity];
-	}
-	/** Removes every item and resets the dropped counter. */
-	clear() {
-		this.#items = emptySlots(this.capacity);
-		this.#start = 0;
-		this.#size = 0;
-		this.#dropped = 0;
-	}
-};
-/**
-* Log store used by the UI: a visible ring buffer plus a pending buffer that fills up while the
-* view is paused. `push()` never drops silent data, it either appends to the visible buffer or to
-* the pending buffer; `resume()` moves the pending events into the visible buffer in order.
-*/
-var LogStore = class {
-	buffer;
-	#pending;
-	#paused = false;
-	constructor(capacity = DEFAULT_CAPACITY) {
-		this.buffer = new LogRingBuffer(capacity);
-		this.#pending = new LogRingBuffer(capacity);
-	}
-	/** True when incoming events are buffered instead of appended to the visible buffer. */
-	get paused() {
-		return this.#paused;
-	}
-	/** Number of visible lines. */
-	get size() {
-		return this.buffer.size;
-	}
-	/** Number of lines held back while paused. */
-	get pendingCount() {
-		return this.#pending.size;
-	}
-	/** Number of visible lines dropped because the buffer was full. */
-	get droppedCount() {
-		return this.buffer.dropped;
-	}
-	/** Appends events to the visible buffer, or holds them back while paused. */
-	push(events) {
-		if (this.#paused) {
-			this.#pending.pushMany(events);
-			return;
-		}
-		this.buffer.pushMany(events);
-	}
-	/** Pauses or resumes appending. Resuming flushes the pending events immediately. */
-	setPaused(paused) {
-		if (paused === this.#paused) return [];
-		this.#paused = paused;
-		return paused ? [] : this.flush();
-	}
-	/** Pauses appending to the visible buffer. */
-	pause() {
-		this.#paused = true;
-	}
-	/** Resumes appending and returns the events flushed from the pending buffer. */
-	resume() {
-		this.#paused = false;
-		return this.flush();
-	}
-	/** Moves every pending event into the visible buffer, oldest first. */
-	flush() {
-		const flushed = this.#pending.toArray();
-		this.#pending.clear();
-		this.buffer.pushMany(flushed);
-		return flushed;
-	}
-	/** Copies the visible lines, oldest first. */
-	toArray() {
-		return this.buffer.toArray();
-	}
-	/** Empties the visible buffer and discards pending events. */
-	clear() {
-		this.buffer.clear();
-		this.#pending.clear();
-	}
-};
-//#endregion
-//#region src/lib/log-format.ts
-/**
-* Parses a log message that is entirely JSON.
-*
-* Only objects and arrays count: a message that happens to be `42` or `"ok"` is
-* left alone, and anything that does not parse is not JSON. Leading and trailing
-* whitespace is ignored.
-*/
-function detectJson(message) {
-	if (typeof message !== "string") return null;
-	const trimmed = message.trim();
-	if (trimmed.length === 0) return null;
-	const first = trimmed[0];
-	if (first !== "{" && first !== "[") return null;
-	try {
-		const parsed = JSON.parse(trimmed);
-		if (parsed === null || typeof parsed !== "object") return null;
-		return parsed;
-	} catch {
-		return null;
-	}
-}
-/**
-* Returns the text to render for a log message.
-*
-* `prettyJson` is normally true: JSON messages are re-serialised with two-space
-* indentation. With `prettyJson` false the raw message is returned unchanged,
-* which is what the viewer's JSON toggle switches to.
-*/
-function formatLogMessage(message, options = {}) {
-	const { prettyJson = true } = options;
-	const value = detectJson(message);
-	if (value === null || !prettyJson) return {
-		text: message,
-		isJson: value !== null,
-		value
-	};
-	return {
-		text: JSON.stringify(value, null, 2),
-		isJson: true,
-		value
-	};
-}
-var NUMBER_PATTERN = /^-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?$/;
-/**
-* Splits pretty-printed JSON into coloured tokens.
-*
-* The concatenation of every token's `text` is always identical to the input, so
-* rendering tokens can never lose or alter a character. This is a display-only
-* scanner: it assumes well-formed JSON produced by `JSON.stringify`.
-*/
-function tokenizeJson(text) {
-	const tokens = [];
-	let index = 0;
-	const push = (type, value) => {
-		if (value.length > 0) tokens.push({
-			type,
-			text: value
-		});
-	};
-	while (index < text.length) {
-		const char = text[index];
-		if (char === " " || char === "\n" || char === "	" || char === "\r") {
-			let end = index;
-			while (end < text.length && " \n	\r".includes(text[end])) end += 1;
-			push("whitespace", text.slice(index, end));
-			index = end;
-			continue;
-		}
-		if (char === "\"") {
-			let end = index + 1;
-			while (end < text.length) {
-				if (text[end] === "\\") {
-					end += 2;
-					continue;
-				}
-				if (text[end] === "\"") break;
-				end += 1;
-			}
-			const raw = text.slice(index, Math.min(end + 1, text.length));
-			let lookahead = index + raw.length;
-			while (lookahead < text.length && " \n	\r".includes(text[lookahead])) lookahead += 1;
-			push(text[lookahead] === ":" ? "key" : "string", raw);
-			index += raw.length;
-			continue;
-		}
-		if (char === "{" || char === "}" || char === "[" || char === "]" || char === "," || char === ":") {
-			push("punctuation", char);
-			index += 1;
-			continue;
-		}
-		if (text.startsWith("true", index) || text.startsWith("false", index)) {
-			const literal = text.startsWith("true", index) ? "true" : "false";
-			push("boolean", literal);
-			index += literal.length;
-			continue;
-		}
-		if (text.startsWith("null", index)) {
-			push("null", "null");
-			index += 4;
-			continue;
-		}
-		let end = index;
-		while (end < text.length && !"{}[],:\" \n	\r".includes(text[end])) end += 1;
-		const raw = text.slice(index, Math.max(end, index + 1));
-		push(NUMBER_PATTERN.test(raw) ? "number" : "other", raw);
-		index += raw.length;
-	}
-	return tokens;
-}
-//#endregion
 //#region src/lib/components/LogViewer.svelte
 function LogViewer($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
@@ -710,7 +579,15 @@ function LogViewer($$renderer, $$props) {
 		/** Active tail mode, used for the window chip. */
 		/** Last `ready` payload, which describes the window the server is scanning. */
 		/** Reason the server ended the stream, for example `window-complete`. */
-		let { 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} = $$props;
+		/** Database file behind the local archive, shown in the archive tooltip. */
+		/** Log groups in the view; more than one adds a group column. */
+		/**
+		* Active level filter. Leave it undefined to let the viewer own the filter;
+		* pass a value (including `null`) to control it from outside, which is how
+		* the chart above stays in step with the chips.
+		*/
+		/** Called when the level filter changes while it is controlled. */
+		let { 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, onFilterChange, onPauseToggle, onClear, onAutoScrollToggle } = $$props;
 		const TIMESTAMP_COLUMN_PX = remToPx(7.5);
 		const ROW_PADDING_PX = remToPx(.75);
 		const ROW_GAP_PX = remToPx(.5);
@@ -729,28 +606,88 @@ function LogViewer($$renderer, $$props) {
 		let jsonView = true;
 		let prefixPx = PREFIX_DEFAULT_PX;
 		/** One rendered row, pre-formatted so the template stays declarative. */
-		/** Lines matching the client-side filter. */
-		let visible = derived(() => filterEvents(lines, filter));
+		/**
+		* Payload found inside the raw line, used when pretty-printing is off and
+		* the row is expanded. `null` when the line carries no JSON.
+		*/
+		/** Log group the line came from, when the payload carries one. */
+		/** Detected level, or `null` when the line carried no signal. */
+		/** Level the viewer owns when the parent does not control it. */
+		let ownLevelFilter = null;
+		/** Active level filter: the parent's when given, otherwise the viewer's. */
+		let levelFilter = derived(() => level === void 0 ? ownLevelFilter : level);
+		/** The four levels offered as filter chips, in severity order. */
+		const LEVEL_CHIPS = [
+			{
+				level: "error",
+				label: "Error",
+				activeClass: "border-red-800 bg-red-950/50 text-red-300"
+			},
+			{
+				level: "warn",
+				label: "Warn",
+				activeClass: "border-amber-800 bg-amber-950/40 text-amber-300"
+			},
+			{
+				level: "info",
+				label: "Info",
+				activeClass: "border-neutral-700 bg-neutral-800 text-neutral-100"
+			},
+			{
+				level: "debug",
+				label: "Debug",
+				activeClass: "border-neutral-700 bg-neutral-800 text-neutral-400"
+			}
+		];
+		/** Lines matching the text filter and the level filter. */
+		let visible = derived(() => filterByLevel(filterEvents(lines, filter), levelFilter()));
+		/** How many lines of each level are loaded, including `unknown`. */
+		let levelCounts = derived(() => {
+			const counts = {
+				error: 0,
+				warn: 0,
+				info: 0,
+				debug: 0,
+				unknown: 0
+			};
+			for (const event of lines) {
+				const rowLevel = effectiveLevel(event);
+				counts[rowLevel ?? "unknown"] = (counts[rowLevel ?? "unknown"] ?? 0) + 1;
+			}
+			return counts;
+		});
 		/** Presentation rows for the visible lines. */
 		let rows = derived(() => visible().map((event, index) => {
-			const level = detectLevel(event.message);
+			const rowLevel = event.level !== void 0 ? event.level : detectLevel(event.message);
 			const formatted = formatLogMessage(event.message, { prettyJson: jsonView });
+			const levelClass = levelColorClass(rowLevel);
 			return {
 				key: eventKey(event, index),
 				time: formatTime(event.timestamp),
 				timestamp: formatTimestamp(event.timestamp),
 				streamName: event.streamName,
+				group: event.group ?? null,
 				message: formatted.text,
 				tokens: formatted.isJson ? tokenizeJson(formatted.text) : null,
-				level,
-				levelClass: levelColorClass(level)
+				expandable: null,
+				level: rowLevel,
+				levelClass
 			};
 		}));
 		/** Keeps the newest line in view while auto-scroll is on (vertical only). */
 		/** Error text with the group and region context. */
 		let errorText = derived(() => error === null ? null : describeStreamError(region, group, error.message));
+		/** True when the ready frame says the events come from the local archive. */
+		let archived = derived(() => ready?.source === "archive");
+		/**
+		* Status the badge shows. The archive has no live tail: it replays a fixed window and ends by
+		* itself, so its connecting/live/reconnecting states would all be misleading.
+		*/
+		let displayStatus = derived(() => archived() && (status === "connecting" || status === "live" || status === "reconnecting") ? "idle" : status);
+		/** Tooltip of the archive indicator, naming the database file it reads. */
+		let archiveTitle = derived(() => describeArchive(archivePath));
 		/** Body text when there is nothing to render. */
-		let emptyText = derived(() => group === null || group === "" ? "Select a log group to start tailing." : filter.trim() === "" ? `Waiting for events from ${group}\u2026` : "No lines match the filter.");
+		let emptyText = derived(() => group === null || group === "" ? "Select a log group to start tailing." : filter.trim() !== "" ? "No lines match the filter." : archived() ? `No archived events for ${group} in this window.` : `Waiting for events from ${group}\u2026`);
 		/** Auto-scroll button colour. */
 		let autoScrollTone = derived(() => autoScroll ? "text-sky-300" : "text-neutral-400");
 		/** Chip describing the active window. */
@@ -769,6 +706,12 @@ function LogViewer($$renderer, $$props) {
 		let handleLeft = derived(() => ROW_PADDING_PX + TIMESTAMP_COLUMN_PX + ROW_GAP_PX + prefixPx);
 		/** Prefix column width as a CSS length. */
 		let prefixStyle = derived(() => `max-width: ${pxToRem(prefixPx)}`);
+		/** Rows the user has opened, keyed by row key. */
+		let expandedRows = {};
+		/** True when a row is open. */
+		function isExpanded(key) {
+			return expandedRows[key] === true;
+		}
 		/** Colour for a JSON token, keeping punctuation and whitespace quiet. */
 		function tokenClass(type) {
 			switch (type) {
@@ -786,8 +729,11 @@ function LogViewer($$renderer, $$props) {
 			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">`);
-		StatusBadge($$renderer, { status });
-		$$renderer.push(`<!----> <span class="text-xs text-neutral-400" data-testid="visible-count">${escape_html(formatCount(visible().length))} shown</span> <span class="text-xs text-neutral-500" data-testid="received-count">${escape_html(formatCount(receivedCount))} received</span> `);
+		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>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <span class="text-xs text-neutral-400" data-testid="visible-count">${escape_html(formatCount(visible().length))} shown</span> <span class="text-xs text-neutral-500" data-testid="received-count">${escape_html(formatCount(receivedCount))} received</span> `);
 		if (pendingCount > 0) $$renderer.push(`<!--[0--><span class="text-xs text-amber-300" data-testid="pending-count">${escape_html(formatCount(pendingCount))} buffered</span>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
@@ -799,7 +745,16 @@ function LogViewer($$renderer, $$props) {
 		$$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"><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" 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", 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> `);
+		$$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", 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(`<!--]--> <div class="min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-950" data-testid="log-scroller">`);
@@ -807,20 +762,38 @@ function LogViewer($$renderer, $$props) {
 		else if (rows().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--><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 = ensure_array_like(rows());
-			for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
-				let row = each_array[$$index_1];
-				$$renderer.push(`<li${attr_class(`flex items-baseline gap-2 px-3 py-0.5 hover:bg-neutral-900/60 ${listClass()}`)} data-testid="log-line"${attr("data-level", row.level)}><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> <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${attr_class(`${messageClass()} ${stringify(row.levelClass)}`)} data-testid="log-message">`);
+			const each_array_1 = ensure_array_like(rows());
+			for (let $$index_3 = 0, $$length = each_array_1.length; $$index_3 < $$length; $$index_3++) {
+				let row = each_array_1[$$index_3];
+				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" : ""}`)} data-testid="log-line"${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>`);
+				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];
+					const each_array_2 = ensure_array_like(row.tokens);
+					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(`<!--]-->`);
 				} else $$renderer.push(`<!--[-1-->${escape_html(row.message)}`);
-				$$renderer.push(`<!--]--></span></li>`);
+				$$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_3 = ensure_array_like(tokenizeJson(row.expandable));
+					for (let tokenIndex = 0, $$length = each_array_3.length; tokenIndex < $$length; tokenIndex++) {
+						let token = each_array_3[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(`<!--]--></ol> `);
 			ColumnResizer($$renderer, {
@@ -870,6 +843,29 @@ function RegionSelect($$renderer, $$props) {
 		$$renderer.push(`</div>`);
 	});
 }
+//#endregion
+//#region src/lib/components/SourceControls.svelte
+function SourceControls($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Active source, owned by the page. */
+		/**
+		* True only when `GET /api/archive` reported `available: true`.
+		* The toggle is hidden otherwise, so the app keeps its CloudWatch-only look.
+		*/
+		/** Database file behind the archive, shown in the tooltip. */
+		/** Called with the newly chosen source. */
+		let { source = "cloudwatch", archiveAvailable = false, archivePath = null} = $$props;
+		/** Tooltip of the archive button: what it reads and which file backs it. */
+		let archiveTitle = derived(() => describeArchive(archivePath));
+		if (archiveAvailable) {
+			$$renderer.push(`<!--[0--><div class="flex flex-col gap-1.5"><div class="flex items-center gap-1 rounded-lg border border-neutral-800 bg-neutral-900 p-0.5" role="group" aria-label="Log source"><button type="button"${attr("aria-pressed", source === "cloudwatch")} title="Stream from CloudWatch Logs with your AWS credentials" data-testid="source-cloudwatch"${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${source === "cloudwatch" ? "border-sky-700 bg-sky-950/60 text-sky-300" : "border-transparent text-neutral-400 hover:text-neutral-200"}`)}>CloudWatch</button> <button type="button"${attr("aria-pressed", source === "archive")}${attr("title", archiveTitle())} data-testid="source-archive"${attr_class(`rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${source === "archive" ? "border-teal-700 bg-teal-950/60 text-teal-300" : "border-transparent text-neutral-400 hover:text-neutral-200"}`)}>Local archive</button></div> `);
+			if (source === "archive") $$renderer.push(`<!--[0--><p class="text-[0.6875rem] leading-4 text-teal-300/80"${attr("title", archiveTitle())} data-testid="archive-note">${escape_html(ARCHIVE_NOTE)}</p>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--></div>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]-->`);
+	});
+}
 function createBrowserEventSource(url) {
 	return new EventSource(url);
 }
@@ -877,7 +873,10 @@ function createBrowserEventSource(url) {
 function buildStreamUrl(target, base = "") {
 	const search = new URLSearchParams();
 	search.set("region", target.region);
-	search.set("group", target.group);
+	const groups = (target.groups ?? []).filter((name) => name.length > 0);
+	if (groups.length > 1) search.set("groups", groups.join(","));
+	else search.set("group", groups[0] ?? target.group);
+	if (target.source === "archive") search.set("source", "archive");
 	if (target.filterPattern) search.set("filterPattern", target.filterPattern);
 	if (target.mode === "historic") {
 		search.set("mode", "historic");
@@ -899,7 +898,7 @@ function parsePayload(data) {
 	}
 }
 /**
-* Live view over one CloudWatch log group.
+* View over one log group: the live CloudWatch stream, or the local archive replay.
 *
 * Pause policy: pausing keeps the connection open and keeps receiving events; those events are
 * held in a pending buffer and flushed into the visible buffer on resume.
@@ -1116,7 +1115,12 @@ function _page($$renderer, $$props) {
 		const stream = new LogStream();
 		/** Region picker state. Seeded from the URL so a shared link restores the view. */
 		let region = page.url.searchParams.get("region") ?? "";
-		/** Tail mode and historic window, seeded from the URL. */
+		/**
+		* Where the view reads from, seeded from the URL. `archive` is only offered while the local
+		* DuckDB archive reports `available: true`, so the fallback below is applied during bootstrap.
+		*/
+		let source = page.url.searchParams.get("source") === "archive" ? "archive" : "cloudwatch";
+		/** Tail mode and historic window, seeded from the URL; bootstrap forces historic for the archive. */
 		let mode = page.url.searchParams.get("mode") === "historic" ? "historic" : "live";
 		let range = page.url.searchParams.get("range") ?? "15m";
 		let windowFrom = parseUrlEpoch(page.url.searchParams.get("from"));
@@ -1129,8 +1133,25 @@ function _page($$renderer, $$props) {
 		let endpoint = null;
 		let filter = "";
 		let autoScroll = true;
-		/** Group currently being tailed, or `null`. */
-		let selectedGroup = derived(() => stream.target?.group ?? null);
+		/**
+		* Log groups in the view, seeded from the URL. One entry is the normal case;
+		* more than one tails them together and adds a group column.
+		*/
+		let selectedGroups = parseUrlGroups(page.url.searchParams);
+		/** Primary group: the one the viewer names the view after. */
+		let selectedGroup = derived(() => selectedGroups[0] ?? null);
+		/** Level filter shared by the log view and the chart. */
+		let levelFilter = null;
+		/** Bucketed counts behind the chart. */
+		let seriesPoints = [];
+		/** True while the archive counts are being fetched. */
+		let seriesLoading = false;
+		/** True only when the local archive reports that it can be read. */
+		let archiveAvailable = derived(() => false);
+		/** Database file behind the archive, or `null` when it is unknown. */
+		let archivePath = derived(() => null);
+		/** Tooltip of the archive badge in the header. */
+		let archiveTitle = derived(() => describeArchive(archivePath()));
 		/** Sidebar width in pixels; the layout default is 22rem. */
 		let sidebarPx = remToPx(SIDEBAR_WIDTH.defaultRem);
 		/** Largest sidebar width allowed: 44vw, but never below the minimum. */
@@ -1144,21 +1165,29 @@ function _page($$renderer, $$props) {
 				localStorage.setItem(STORAGE_KEYS.sidebarWidth, String(Math.round(sidebarPx)));
 			} catch {}
 		}
-		/** Loads the log groups of a region; a newer region change wins the race. */
+		/**
+		* Loads the log groups of a region from the active source; a newer region or source change wins
+		* the race. The CloudWatch URL is left exactly as it was, so only the archive names its source.
+		*/
 		async function loadGroups(target) {
 			groupsLoading = true;
 			groupsError = null;
+			const requestedSource = source;
+			const query = requestedSource === "archive" ? {
+				region: target,
+				source: requestedSource
+			} : { region: target };
 			try {
-				const response = await fetchLogGroups({ region: target });
-				if (target !== region) return;
+				const response = await fetchLogGroups(query);
+				if (target !== region || requestedSource !== source) return;
 				if (response.endpoint !== null) endpoint = response.endpoint;
 				groups = response.groups;
 			} catch (error) {
-				if (target !== region) return;
+				if (target !== region || requestedSource !== source) return;
 				groups = [];
 				groupsError = describeGroupsError(target, error);
 			} finally {
-				if (target === region) groupsLoading = false;
+				if (target === region && requestedSource === source) groupsLoading = false;
 			}
 		}
 		/** Parses an epoch-millisecond URL parameter, or `null`. */
@@ -1167,21 +1196,83 @@ function _page($$renderer, $$props) {
 			const parsed = Number(value);
 			return Number.isFinite(parsed) ? parsed : null;
 		}
+		/** The window the current mode asks for. The archive is always a historic window. */
+		function windowParams() {
+			if (mode === "live" && source !== "archive") return { mode: "live" };
+			if (range === "" && windowFrom !== null && windowTo !== null) return {
+				mode: "historic",
+				from: windowFrom,
+				to: windowTo
+			};
+			return {
+				mode: "historic",
+				range: range === "" ? "15m" : range
+			};
+		}
+		/** Stream target for the active source, region, groups and window. */
+		function streamTarget() {
+			const window = windowParams();
+			const [primary, ...rest] = selectedGroups;
+			const target = {
+				region,
+				group: primary ?? "",
+				groups: [...selectedGroups],
+				...window
+			};
+			if (source === "archive") target.source = "archive";
+			return target;
+		}
+		/** Applies a mode or range change: restarts the stream and mirrors it into the URL. */
+		function applyRange(payload) {
+			if (source === "archive" && payload.mode === "live") return;
+			mode = payload.mode;
+			range = payload.range;
+			windowFrom = payload.from;
+			windowTo = payload.to;
+			syncUrl(region, selectedGroups);
+			if (selectedGroups.length === 0) return;
+			rangeLoading = payload.mode === "historic";
+			stream.start(streamTarget());
+			loadSeries();
+		}
+		/**
+		* Applies a brushed range from the chart as the new historic window, which
+		* re-scopes the log view to exactly what was brushed.
+		*/
+		function applyBrush(selection) {
+			if (selection === null) return;
+			const window = chartWindow();
+			if (!isMeaningfulBrush(selection, window, chartBucketMs(window.from, window.to))) return;
+			applyRange({
+				mode: "historic",
+				range: "",
+				from: selection.from,
+				to: selection.to
+			});
+		}
 		/** Switches region: stops the stream, clears the list and reloads the groups. */
 		function changeRegion(next) {
 			if (next === "" || next === region) return;
 			region = next;
 			stream.stop();
 			groups = [];
-			syncUrl(next);
+			selectedGroups = [];
+			seriesPoints = [];
+			syncUrl(next, []);
 			loadGroups(next);
 		}
 		/** Replaces the view parameters in the address bar. */
-		function syncUrl(nextRegion, nextGroup) {
+		function syncUrl(nextRegion, nextGroups) {
 			const url = new URL(page.url);
 			if (nextRegion === "") url.searchParams.delete("region");
 			else url.searchParams.set("region", nextRegion);
+			if (source === "archive") url.searchParams.set("source", "archive");
+			else url.searchParams.delete("source");
 			url.searchParams.delete("group");
+			url.searchParams.delete("groups");
+			const names = nextGroups.filter((name) => name.length > 0);
+			if (names.length === 1) url.searchParams.set("group", names[0]);
+			else if (names.length > 1) url.searchParams.set("groups", names.join(","));
 			if (mode === "live") {
 				url.searchParams.delete("mode");
 				url.searchParams.delete("range");
@@ -1199,12 +1290,106 @@ function _page($$renderer, $$props) {
 			}
 			if (url.href !== page.url.href) replaceState();
 		}
+		/** Clears the loading hint once the server reports its window. */
+		/**
+		* 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.
+		*/
+		/**
+		* 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.
+		*/
+		/** Parses the group selection from the URL, accepting both parameter shapes. */
+		function parseUrlGroups(params) {
+			const names = (params.get("groups") ?? "").split(",").map((name) => name.trim()).filter((name) => name.length > 0);
+			if (names.length > 0) return [...new Set(names)];
+			const single = params.get("group")?.trim() ?? "";
+			return single.length > 0 ? [single] : [];
+		}
+		/** Bucket width for the chart of one window, mirroring the server's choice. */
+		function chartBucketMs(from, to) {
+			const span = Math.max(1, to - from);
+			return [
+				1e3,
+				5e3,
+				1e4,
+				3e4,
+				6e4,
+				3e5,
+				9e5,
+				18e5
+			].find((step) => span / step <= 90) ?? 36e5;
+		}
+		/** Window the chart describes: the active historic window, or a rolling quarter hour. */
+		function chartWindow() {
+			if (mode === "historic") {
+				const to = windowTo ?? stream.ready?.endTime ?? Date.now();
+				const from = windowFrom ?? stream.ready?.startTime ?? to - 9e5;
+				return {
+					from: Math.min(from, to - 1e3),
+					to
+				};
+			}
+			const to = Date.now();
+			return {
+				from: to - 9e5,
+				to
+			};
+		}
+		/**
+		* Loads the counts behind the chart.
+		*
+		* The archive can count a whole window in one statement, so it is asked for
+		* them; a CloudWatch view has no aggregate endpoint, so the events already
+		* streamed are bucketed here. Both end up as the same points.
+		*/
+		async function loadSeries() {
+			if (selectedGroups.length === 0 || region === "") {
+				seriesPoints = [];
+				return;
+			}
+			const { from, to } = chartWindow();
+			if (source !== "archive") {
+				seriesPoints = bucketEvents(stream.lines, {
+					from,
+					to,
+					bucketMs: chartBucketMs(from, to),
+					level: levelFilter,
+					fallbackGroup: selectedGroup() ?? ""
+				});
+				return;
+			}
+			seriesLoading = true;
+			try {
+				seriesPoints = (await fetchSeries({
+					region,
+					groups: selectedGroups,
+					from,
+					to,
+					levels: levelFilter === null ? [] : [levelFilter]
+				})).points;
+			} catch {
+				seriesPoints = [];
+			} finally {
+				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> `);
-		EndpointBadge($$renderer, {
-			endpoint,
-			credentials: null
-		});
-		$$renderer.push(`<!----> `);
+		if (source === "archive") {
+			$$renderer.push("<!--[0-->");
+			EndpointBadge($$renderer, {
+				endpoint: null,
+				credentials: null
+			});
+			$$renderer.push(`<!----> <span data-testid="archive-source-badge"${attr("title", archiveTitle())} class="rounded-full border border-teal-900 bg-teal-950/60 px-2.5 py-1 text-xs font-medium text-teal-300">local archive</span>`);
+		} else {
+			$$renderer.push("<!--[-1-->");
+			EndpointBadge($$renderer, {
+				endpoint,
+				credentials: null
+			});
+		}
+		$$renderer.push(`<!--]--> `);
 		$$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></div> `);
 		$$renderer.push("<!--[-1-->");
@@ -1215,8 +1400,14 @@ function _page($$renderer, $$props) {
 			from: windowFrom,
 			to: windowTo,
 			loading: rangeLoading,
-			disabled: selectedGroup() === null});
+			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">`);
+		SourceControls($$renderer, {
+			source,
+			archiveAvailable: archiveAvailable(),
+			archivePath: archivePath()});
+		$$renderer.push(`<!----> `);
 		RegionSelect($$renderer, {
 			regions,
 			value: region,
@@ -1225,8 +1416,9 @@ function _page($$renderer, $$props) {
 		$$renderer.push(`<!----> `);
 		LogGroupList($$renderer, {
 			groups,
+			source,
 			region,
-			selected: selectedGroup(),
+			selected: selectedGroups,
 			loading: groupsLoading,
 			error: groupsError});
 		$$renderer.push(`<!----></div> `);
@@ -1241,6 +1433,19 @@ function _page($$renderer, $$props) {
 			class: "hidden lg:block lg:w-2"
 		});
 		$$renderer.push(`<!----> <div class="flex min-h-0 min-w-0 flex-1 flex-col">`);
+		EventScatterPanel($$renderer, {
+			points: seriesPoints,
+			from: chartWindow().from,
+			to: chartWindow().to,
+			bucketMs: chartBucketMs(chartWindow().from, chartWindow().to),
+			groups: selectedGroups,
+			loading: seriesLoading,
+			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>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> `);
 		LogViewer($$renderer, {
 			lines: stream.lines,
 			status: stream.status,
@@ -1248,17 +1453,26 @@ function _page($$renderer, $$props) {
 			mode,
 			ready: stream.ready,
 			endReason: stream.endReason,
+			archivePath: archivePath(),
 			region,
 			group: selectedGroup(),
+			groups: selectedGroups,
+			level: levelFilter,
+			onLevelChange: (next) => levelFilter = next,
 			filter,
 			paused: stream.paused,
 			autoScroll,
 			pendingCount: stream.pendingCount,
 			droppedCount: stream.droppedCount,
-			receivedCount: stream.receivedCount});
+			receivedCount: stream.receivedCount,
+			onFilterChange: (value) => filter = value,
+			onPauseToggle: () => stream.togglePause(),
+			onClear: () => stream.clear(),
+			onAutoScrollToggle: () => autoScroll = !autoScroll
+		});
 		$$renderer.push(`<!----></div></div>`);
 	});
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-DzAAqWz2.js.map
+//# sourceMappingURL=_page.svelte.js-B-kVwiNh.js.map