watch-tail 0.4.0 → 0.6.0

package/build/server/chunks/entries/pages/_page.svelte.js-qqtU0apo.js

@@ -0,0 +1,1641 @@
+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 { c as LogStore, f as filterByLevel, g as filterEvents, e as effectiveLevel, t as tokenizeJson, b as detectLevel, h as formatLogMessage, j as eventKey, l as levelColorClass } from '../../chunks/log-buffer.js-BI_gQOls.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-DgkwfYFo.js';
+import { S as SERIES_LEVEL_COLOR, g as groupByLevel, r as requestRows, L as LEVEL_LABELS, i as isMeaningfulBrush, b as bucketEvents } from '../../chunks/series-buckets.js-BjigySff.js';
+import '../../chunks/uneval.js-DaakSYFQ.js';
+import '../../chunks/index-server.js-DNLOKvM0.js';
+import '../../chunks/shared.js-CgjUIvRK.js';
+import '../../chunks/exports.js-ClPPfcHj.js';
+import '../../chunks/internal2.js-BPo5dcDi.js';
+import '../../chunks/legacy-client.js-DJmDw3Zx.js';
+import '../../chunks/utils.js-BIlHjgGW.js';
+
+//#region src/lib/format.ts
+/**
+* Formatting helpers for the watch-stream UI. Every function here is pure so it can be unit
+* tested without a DOM.
+*/
+/** Placeholder shown when a timestamp is missing or not a number. */
+var EMPTY_TIME = "--:--:--.---";
+/** Left-pads a non-negative integer with zeros. */
+function pad(value, size = 2) {
+	return String(Math.trunc(Math.abs(value))).padStart(size, "0");
+}
+/**
+* Formats an epoch-millisecond timestamp as `HH:MM:SS.mmm` in UTC.
+* UTC keeps rendering stable no matter where the browser runs.
+*/
+function formatTime(timestamp) {
+	if (typeof timestamp !== "number" || !Number.isFinite(timestamp)) return EMPTY_TIME;
+	const date = new Date(timestamp);
+	if (Number.isNaN(date.getTime())) return EMPTY_TIME;
+	return `${`${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}`}.${pad(date.getUTCMilliseconds(), 3)}`;
+}
+/** Formats an epoch-millisecond timestamp as an ISO 8601 string, for tooltips. */
+function formatTimestamp(timestamp) {
+	if (typeof timestamp !== "number" || !Number.isFinite(timestamp)) return "—";
+	const date = new Date(timestamp);
+	if (Number.isNaN(date.getTime())) return "—";
+	return date.toISOString();
+}
+/** Formats a number with at most one decimal, dropping a trailing `.0`. */
+function trimZero(value) {
+	const fixed = value >= 100 ? value.toFixed(0) : value.toFixed(1);
+	return fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed;
+}
+/**
+* Formats a duration as `250ms`, `1.2s`, `2m 5s` or `1h 2m`, for a request's span.
+* Sub-second spans keep a millisecond value, because that is what a slow request
+* is measured in; longer spans stop at the first two units a reader needs.
+*/
+function formatSpan(ms) {
+	if (typeof ms !== "number" || !Number.isFinite(ms) || ms < 0) return "—";
+	const total = Math.round(ms);
+	if (total < 1e3) return `${total}ms`;
+	const seconds = total / 1e3;
+	if (seconds < 60) return `${trimZero(seconds)}s`;
+	const wholeSeconds = Math.floor(seconds);
+	const minutes = Math.floor(wholeSeconds / 60);
+	const restSeconds = wholeSeconds % 60;
+	if (minutes < 60) return restSeconds === 0 ? `${minutes}m` : `${minutes}m ${restSeconds}s`;
+	const hours = Math.floor(minutes / 60);
+	const restMinutes = minutes % 60;
+	return restMinutes === 0 ? `${hours}h` : `${hours}h ${restMinutes}m`;
+}
+/**
+* Formats a byte count as `B`, `KiB`, `MiB` or `GiB`, with at most one decimal for scaled units.
+* Returns {@link EMPTY_VALUE} for a missing or negative value.
+*/
+function formatBytes(bytes) {
+	if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes < 0) return "—";
+	if (bytes < 1024) return `${Math.trunc(bytes)} B`;
+	const units = [
+		"KiB",
+		"MiB",
+		"GiB",
+		"TiB"
+	];
+	let value = bytes / 1024;
+	let unit = units[0];
+	for (let index = 1; index < units.length && value >= 1024; index += 1) {
+		value /= 1024;
+		unit = units[index];
+	}
+	return `${trimZero(value)} ${unit}`;
+}
+/** Formats an integer count with thousands separators, for example `1,234`. */
+function formatCount(value) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return "0";
+	const rounded = Math.trunc(value);
+	return (rounded < 0 ? "-" : "") + String(Math.abs(rounded)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+/**
+* Names the emulator behind a CloudWatch Logs endpoint override.
+* Returns `null` when the endpoint is empty, which means real AWS.
+*/
+function emulatorLabel(endpoint) {
+	const trimmed = typeof endpoint === "string" ? endpoint.trim() : "";
+	if (trimmed === "") return null;
+	const lower = trimmed.toLowerCase();
+	if (lower.includes("floci")) return "floci";
+	if (lower.includes("localstack")) return "localstack";
+	if (endpointPort(trimmed) === "4566") return "floci";
+	return "local emulator";
+}
+/** Reads the port of an endpoint URL, or `null` when it cannot be parsed. */
+function endpointPort(endpoint) {
+	return parseEndpoint(endpoint)?.port || null;
+}
+/** Parses an endpoint URL, returning `null` when it is not a URL. */
+function parseEndpoint(endpoint) {
+	try {
+		return new URL(endpoint);
+	} catch {
+		return null;
+	}
+}
+/**
+* Builds the header badge text for an endpoint, for example `floci http://localhost:4566`.
+* Returns `null` when the app talks to real AWS.
+*/
+function describeEndpoint(endpoint) {
+	const trimmed = typeof endpoint === "string" ? endpoint.trim() : "";
+	if (trimmed === "") return null;
+	const label = emulatorLabel(trimmed);
+	if (label === null) return null;
+	return (parseEndpoint(trimmed)?.hostname.toLowerCase() ?? trimmed.toLowerCase()).startsWith(label) ? trimmed : `${label} ${trimmed}`;
+}
+//#endregion
+//#region src/lib/components/EndpointBadge.svelte
+function EndpointBadge($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Resolved CloudWatch Logs endpoint, or `null` when talking to real AWS. */
+		/** Credential mode from `GET /api/health`, or `null` when it is unknown. */
+		let { endpoint = null, credentials = null } = $$props;
+		/** Badge text, for example `floci http://localhost:4566`; `null` hides the badge. */
+		let label = derived(() => describeEndpoint(endpoint));
+		/** True when the server fell back to the emulator's throwaway credentials. */
+		let emulatorDefault = derived(() => credentials === "emulator-default");
+		let hint = derived(() => emulatorDefault() ? "Local emulator endpoint - using floci's throwaway credentials (no ambient AWS credentials found)" : "Local emulator endpoint");
+		if (label() !== null) {
+			$$renderer.push(`<!--[0--><span class="inline-flex items-center gap-1.5"${attr("title", hint())}><span data-testid="endpoint-badge"${attr("title", hint())} class="rounded-full border border-violet-900 bg-violet-950/60 px-2.5 py-1 text-xs font-medium text-violet-300">${escape_html(label())}</span> `);
+			if (emulatorDefault()) $$renderer.push(`<!--[0--><span data-testid="credentials-hint" class="text-[0.6875rem] text-neutral-500">dev creds</span>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--></span>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]-->`);
+	});
+}
+//#endregion
+//#region src/lib/resize.ts
+/**
+* Pure helpers for the drag-resizable columns in the UI.
+*
+* The components own the pointer events and the persistence; everything that can
+* be reasoned about without a DOM lives here so it can be unit tested.
+*/
+/** `localStorage` keys, prefixed so they are easy to spot in a browser. */
+var STORAGE_KEYS = {
+	sidebarWidth: "watch-stream:sidebar-width",
+	prefixWidth: "watch-stream:prefix-width",
+	wrap: "watch-stream:wrap",
+	jsonView: "watch-stream:json-view",
+	chartOpen: "watch-stream:chart-open",
+	groupRequests: "watch-stream:group-requests"
+};
+/** Default width of the group-list pane, in rem (matches the original layout). */
+var SIDEBAR_WIDTH = {
+	defaultRem: 22,
+	minRem: 16,
+	maxVw: 44
+};
+/** Width constraints for the log line prefix (timestamp + stream name). */
+var PREFIX_WIDTH = {
+	defaultRem: 14,
+	minRem: 4,
+	maxRem: 40
+};
+/** Converts a CSS pixel width to `rem` for use in a Tailwind `style` attribute. */
+function pxToRem(px, rootFontSize = 16) {
+	const rem = px / rootFontSize;
+	return `${Number.isInteger(rem) ? rem : Number(rem.toFixed(3))}rem`;
+}
+/** Parses a `rem` value into CSS pixels. */
+function remToPx(rem, rootFontSize = 16) {
+	return rem * rootFontSize;
+}
+//#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-D3Jaw_Cw.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 when one mark stands for one request rather than one line. */
+		/** 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, byRequest = true, 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);
+		/** What one mark stands for, which is what the totals count. */
+		let unit = derived(() => byRequest ? "requests" : "events");
+		/** Clears the brush, for the host's Reset zoom control. */
+		function reset() {
+			onBrush?.(null);
+		}
+		$$renderer.push(`<section class="flex min-w-0 flex-col gap-1 rounded-lg border border-neutral-800 bg-neutral-950/60 p-2" data-testid="event-scatter" 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()))}
+			${escape_html(unit())} 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) => {
+		/** Accessible name, for example "Resize group list". */
+		/** Current width in CSS pixels. */
+		/** Lower bound in CSS pixels. */
+		/** Upper bound in CSS pixels. */
+		/** `data-testid` value. */
+		/** Called on every pointer move and arrow key with the clamped width. */
+		/** Called when a drag ends or an arrow key is handled, for persistence. */
+		/** Extra classes, used for positioning. */
+		/** Extra inline style, for example `left: 120px`. */
+		let { label, width, min, max, testId, onChange, onCommit, class: className = "", style = "" } = $$props;
+		$$renderer.push(`<div role="separator" aria-orientation="vertical"${attr("aria-label", label)}${attr("aria-valuemin", min)}${attr("aria-valuemax", max)}${attr("aria-valuenow", Math.round(width))} tabindex="0"${attr("title", `${stringify(label)} (drag or use the arrow keys)`)}${attr("data-testid", testId)}${attr_class(`cursor-col-resize touch-none bg-transparent hover:bg-sky-500/30 focus:bg-sky-500/50 focus:outline-none ${stringify(className)}`)}${attr_style(style)}></div>`);
+	});
+}
+//#endregion
+//#region src/lib/components/RangeControls.svelte
+function RangeControls($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Preset name when a preset is active, otherwise an empty string. */
+		/** Custom bounds as epoch ms, or `null` when a preset/live window is active. */
+		/** Active mode, owned by the page. */
+		/** Active preset, owned by the page. */
+		/** 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, 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")}${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);
+			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+				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>`);
+		} 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>`);
+		else if (mode === "historic" && range !== "") $$renderer.push(`<!--[1--><span class="text-xs text-neutral-500">last ${escape_html(presetLabel(range))}</span>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> `);
+		$$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></div>`);
+	});
+}
+//#endregion
+//#region src/lib/groups-client.ts
+/**
+* Browser-side fetch helpers for the watch-stream JSON API (`/api/health`, `/api/regions`,
+* `/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;
+/** Error carrying the parsed `ApiErrorBody` returned by the API. */
+var ApiError = class extends Error {
+	/** HTTP status, or `0` when the request never reached the server. */
+	status;
+	/** Optional machine-readable code from the API. */
+	code;
+	/** Optional extra detail from the API. */
+	details;
+	constructor(message, options = {}) {
+		super(message, { cause: options.cause });
+		this.name = "ApiError";
+		this.status = options.status ?? 0;
+		this.code = options.code;
+		this.details = options.details;
+	}
+};
+/** Reads a string field from an unknown JSON value. */
+function readField(value, key) {
+	if (typeof value !== "object" || value === null) return void 0;
+	const field = value[key];
+	return typeof field === "string" ? field : void 0;
+}
+/** Extracts the API `error` message, falling back when the body has none. */
+function apiErrorMessage(value, fallback = "Unexpected API error") {
+	return readField(value, "error") ?? fallback;
+}
+/** Builds the `/api/log-groups` URL, including only the parameters that are set. */
+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 (query.by === "request" || query.by === "event") search.set("by", query.by);
+	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";
+}
+/** Performs a JSON request and maps failures onto {@link ApiError}. */
+async function getJson(url, options) {
+	const fetchImpl = options.fetchImpl ?? fetch;
+	let response;
+	try {
+		response = await fetchImpl(url, {
+			headers: { accept: "application/json" },
+			signal: options.signal
+		});
+	} catch (cause) {
+		if (isAbort(cause)) throw cause;
+		throw new ApiError(`Could not reach ${url}.`, { cause });
+	}
+	const text = await response.text();
+	let body = null;
+	if (text.trim() !== "") try {
+		body = JSON.parse(text);
+	} catch {
+		body = null;
+	}
+	if (!response.ok) throw new ApiError(apiErrorMessage(body, `Request to ${url} failed with ${response.status}.`), {
+		status: response.status,
+		code: readField(body, "code"),
+		details: readField(body, "details")
+	});
+	return body;
+}
+/**
+* `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);
+}
+/** Message shown when a region has no log groups at all. */
+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(/\.+$/, "");
+}
+/** Adds region context to a failed group list request. */
+function describeGroupsError(region, error) {
+	if (error instanceof ApiError) {
+		const details = error.details ? ` ${error.details}` : "";
+		return `Could not list log groups in ${region}: ${trimSentence(error.message)}.${details}`;
+	}
+	return `Could not reach the watch-stream API for ${region}. ${error instanceof Error && error.message !== "" ? error.message : String(error)}`;
+}
+/** Adds group and region context to a stream error payload. */
+function describeStreamError(region, group, message) {
+	return `${message} (${group === null || group === "" ? region : `${group} in ${region}`})`;
+}
+//#endregion
+//#region src/lib/components/LogGroupList.svelte
+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. */
+		/** 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, 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 = [], 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());
+		/**
+		* 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 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> `);
+		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"><!--[-->`);
+			const each_array = ensure_array_like(Array.from({ length: 5 }));
+			for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+				each_array[index];
+				$$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(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 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>`);
+			}
+			$$renderer.push(`<!--]--></ul> `);
+			if (truncated()) $$renderer.push(`<!--[0--><p class="text-[0.6875rem] text-neutral-500" data-testid="group-truncated">Showing first ${escape_html(formatCount(maxRows))} of ${escape_html(formatCount(filtered().length))} groups.</p>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]-->`);
+		}
+		$$renderer.push(`<!--]--></section>`);
+	});
+}
+//#endregion
+//#region src/lib/components/StatusBadge.svelte
+function StatusBadge($$renderer, $$props) {
+	/** Connection status reported by the log stream. */
+	let { status } = $$props;
+	/** Pill text per status. */
+	const LABELS = {
+		idle: "idle",
+		connecting: "connecting",
+		live: "live",
+		reconnecting: "reconnecting",
+		error: "error",
+		ended: "ended"
+	};
+	/** Pill colours per status. */
+	const TONES = {
+		idle: "border-neutral-700 bg-neutral-800/60 text-neutral-400",
+		connecting: "border-sky-900 bg-sky-950/70 text-sky-300",
+		live: "border-emerald-900 bg-emerald-950/70 text-emerald-300",
+		reconnecting: "border-amber-900 bg-amber-950/70 text-amber-300",
+		error: "border-red-900 bg-red-950/70 text-red-300",
+		ended: "border-neutral-700 bg-neutral-800/60 text-neutral-400"
+	};
+	/** Dot colours per status. */
+	const DOTS = {
+		idle: "bg-neutral-500",
+		connecting: "bg-sky-400 animate-pulse",
+		live: "bg-emerald-400",
+		reconnecting: "bg-amber-400 animate-pulse",
+		error: "bg-red-400",
+		ended: "bg-neutral-500"
+	};
+	let tone = derived(() => TONES[status]);
+	let dot = derived(() => DOTS[status]);
+	let text = derived(() => LABELS[status]);
+	$$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/components/LogViewer.svelte
+function LogViewer($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Lines held by the client buffer, oldest first. */
+		/** Connection status. */
+		/** Last stream error, or `null`. */
+		/** Active region, used for error and empty-state context. */
+		/** Group being tailed, or `null` when nothing is selected. */
+		/** Client-side text filter, controlled by the parent. */
+		/** True while the visible buffer is frozen. */
+		/** True when new lines scroll the view. */
+		/** Lines held back while paused. */
+		/** Lines dropped by the cap. */
+		/** Total events received since the last reset. */
+		/** 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`. */
+		/** 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. */
+		/**
+		* Group lines that share a request id into one row, opened on demand. On by
+		* default, and owned by the page so the chart counts the same requests.
+		*/
+		/** Called when the grouping toggle is pressed. */
+		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, groupRequests = true, onGroupToggle, onFilterChange, onPauseToggle, onClear, onAutoScrollToggle } = $$props;
+		const TIMESTAMP_COLUMN_PX = remToPx(7.5);
+		const ROW_PADDING_PX = remToPx(.75);
+		const ROW_GAP_PX = remToPx(.5);
+		const PREFIX_MIN_PX = remToPx(PREFIX_WIDTH.minRem);
+		const PREFIX_MAX_PX = remToPx(PREFIX_WIDTH.maxRem);
+		const PREFIX_DEFAULT_PX = remToPx(PREFIX_WIDTH.defaultRem);
+		/** Persists a preference; failures are ignored (private mode, quota). */
+		function writePref(key, value) {
+			try {
+				if (typeof localStorage === "undefined") return;
+				localStorage.setItem(key, value);
+			} catch {}
+		}
+		/** View preferences, restored in `onMount` so SSR output stays deterministic. */
+		let wrapLines = false;
+		let jsonView = true;
+		let prefixPx = PREFIX_DEFAULT_PX;
+		/** One rendered row, pre-formatted so the template stays declarative. */
+		/**
+		* 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, one per line in buffer order. */
+		let lineRows = derived(() => visible().map((event, index) => {
+			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,
+				expandable: null,
+				level: rowLevel,
+				levelClass
+			};
+		}));
+		/**
+		* One row of the list: a line, or a request that holds its lines.
+		*
+		* A request row carries everything the header shows, so the template stays
+		* declarative and the list never re-formats a line it already formatted.
+		*/
+		/** Request id every line in the group carries. */
+		/** Clock time of the first line, and its full timestamp for the tooltip. */
+		/** Number of lines in the group. */
+		/** First to last line, as `1.2s`. */
+		/** Most critical level in the group. */
+		/** Log group and stream, when every line in the request shares them. */
+		/** Worst line, trimmed to one short line for the collapsed row. */
+		/** Longest preview kept for a collapsed request, in characters. */
+		const PREVIEW_LENGTH = 160;
+		/** Prefixes a formatted line row with its kind. */
+		function asLine(row) {
+			return {
+				kind: "line",
+				...row
+			};
+		}
+		/** Builds the request header row from the lines it holds. */
+		function requestDisplayRow(row) {
+			const children = row.request.events.map((entry) => lineRows()[entry.index]).filter((child) => child !== void 0);
+			const worstLevel = row.request.level;
+			const first = children[0];
+			return {
+				kind: "request",
+				key: row.key,
+				id: row.request.id,
+				time: first?.time ?? "",
+				timestamp: first?.timestamp ?? "",
+				count: children.length,
+				span: formatSpan(row.request.last - row.request.first),
+				level: worstLevel,
+				levelLabel: LEVEL_LABELS[worstLevel],
+				levelClass: levelColorClass(worstLevel === "unknown" ? null : worstLevel),
+				group: sharedField(children.map((child) => child.group)),
+				streamName: sharedField(children.map((child) => child.streamName)),
+				preview: requestPreview(row.request),
+				children
+			};
+		}
+		/** The value every entry shares, or `null` when they differ. */
+		function sharedField(values) {
+			const first = values[0];
+			if (first === null || first === void 0) return null;
+			return values.every((value) => value === first) ? first : null;
+		}
+		/**
+		* One short line for a collapsed request: its most critical line, because that
+		* is the line that explains why the request is coloured the way it is.
+		*/
+		function requestPreview(request) {
+			const worst = request.events.find((entry) => effectiveLevel(visible()[entry.index] ?? { message: "" }) === request.level) ?? request.events[0];
+			const [firstLine = ""] = (visible()[worst?.index ?? -1]?.message ?? "").split("\n");
+			return firstLine.replace(/\s+/g, " ").trim().slice(0, PREVIEW_LENGTH);
+		}
+		/** Rows the list renders: grouped by request when the preference is on. */
+		let displayRows = derived(() => {
+			if (!groupRequests) return lineRows().map(asLine);
+			const rows = [];
+			for (const row of requestRows(visible())) {
+				if (row.kind === "line") {
+					rows.push(asLine(lineRows()[row.index]));
+					continue;
+				}
+				if (row.request.events.length === 1) {
+					const only = lineRows()[row.request.events[0]?.index ?? -1];
+					if (only !== void 0) rows.push(asLine(only));
+					continue;
+				}
+				rows.push(requestDisplayRow(row));
+			}
+			return rows;
+		});
+		/** True when the list is showing request rows. */
+		let grouped = derived(() => displayRows().some((row) => row.kind === "request"));
+		/** Requests in view, shown next to the line count while grouping. */
+		let requestCount = derived(() => displayRows().filter((row) => row.kind === "request").length);
+		/** 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() !== "" ? "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. */
+		let windowSummary = derived(() => describeWindow(ready, Date.now()));
+		/** True when a historic scan finished on its own. */
+		let windowComplete = derived(() => mode === "historic" && endReason === "window-complete");
+		/** Wrap toggle colour. */
+		let wrapTone = derived(() => "text-neutral-400");
+		/** JSON toggle colour. */
+		let jsonTone = derived(() => "text-sky-300");
+		/** Grouping toggle colour. */
+		let groupTone = derived(() => groupRequests ? "text-sky-300" : "text-neutral-400");
+		/** Rows fill the window when wrapping, and grow to their content otherwise. */
+		let listClass = derived(() => "w-max min-w-full");
+		/** Message cell: wrapped text or a single long line that scrolls sideways. */
+		let messageClass = derived(() => "whitespace-pre");
+		/** Left edge of the prefix resize handle, in pixels from the scrolled content edge. */
+		let handleLeft = derived(() => ROW_PADDING_PX + TIMESTAMP_COLUMN_PX + ROW_GAP_PX + prefixPx);
+		/** 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) {
+				case "key": return "text-sky-300";
+				case "string": return "text-emerald-300";
+				case "number": return "text-amber-300";
+				case "boolean": return "text-fuchsia-300";
+				case "null": return "text-neutral-500";
+				case "punctuation": return "text-neutral-600";
+				default: return "";
+			}
+		}
+		/** Persists the current prefix width. */
+		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">`);
+		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> `);
+		if (grouped()) $$renderer.push(`<!--[0--><span class="text-xs text-neutral-400" data-testid="request-count">${escape_html(formatCount(requestCount()))} requests</span>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <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(`<!--]--> `);
+		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> `);
+		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(`<!--]--> <div class="min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-950" data-testid="log-scroller">`);
+		if (group === null || group === "") $$renderer.push(`<!--[0--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-idle">Select a log group to start tailing.</p>`);
+		else if (displayRows().length === 0) $$renderer.push(`<!--[1--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-empty">${escape_html(emptyText())}</p>`);
+		else {
+			$$renderer.push("<!--[-1-->");
+			function logLine($$renderer, row, child) {
+				const expandable = row.expandable !== null;
+				const open = expandable && isExpanded(row.key);
+				$$renderer.push(`<li${attr_class(`flex flex-wrap items-baseline gap-2 ${child ? "pl-8" : "px-3"} py-0.5 hover:bg-neutral-900/60 ${listClass()} ${expandable ? "cursor-pointer" : ""}`)} data-testid="log-line"${attr("data-request-child", child ? "true" : void 0)}${attr("data-level", row.level ?? "unknown")}${attr("data-expandable", expandable ? "true" : void 0)}${attr("data-expanded", open ? "true" : void 0)}${attr("role", expandable ? "button" : void 0)}${attr("tabindex", expandable ? 0 : void 0)}${attr("aria-expanded", expandable ? open : void 0)}${attr("title", expandable ? open ? "Hide the JSON in this line" : "Show this line as JSON" : void 0)}><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
+				if (groups.length > 1) $$renderer.push(`<!--[0--><span class="w-[9rem] shrink-0 truncate text-teal-400/80"${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
+				else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> `);
+				if (expandable) $$renderer.push(`<!--[0--><span class="shrink-0 text-neutral-600" aria-hidden="true">${escape_html(open ? "▾" : "▸")}</span>`);
+				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(`<div${attr_class(`relative min-h-full ${listClass()}`)} data-testid="log-canvas"><ol class="font-mono text-xs leading-5" data-testid="log-lines"><!--[-->`);
+			const each_array_3 = ensure_array_like(displayRows());
+			for (let $$index_4 = 0, $$length = each_array_3.length; $$index_4 < $$length; $$index_4++) {
+				let row = each_array_3[$$index_4];
+				if (row.kind === "request") {
+					$$renderer.push("<!--[0-->");
+					const open = isExpanded(row.key);
+					$$renderer.push(`<li${attr_class(clsx(listClass()))} data-testid="log-request-group"${attr("data-request-id", row.id)}${attr("data-level", row.level)}${attr("data-expanded", open ? "true" : void 0)}${attr("data-lines", row.count)}><button type="button" class="flex w-full flex-wrap items-baseline gap-2 px-3 py-0.5 text-left hover:bg-neutral-900/60"${attr("aria-expanded", open)}${attr("title", open ? "Hide the lines of this request" : "Show every line of this request")} data-testid="request-group-summary"><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
+					if (groups.length > 1) $$renderer.push(`<!--[0--><span class="w-[9rem] shrink-0 truncate text-teal-400/80"${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
+					else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> <span class="shrink-0 text-neutral-600" aria-hidden="true">${escape_html(open ? "▾" : "▸")}</span> <span class="shrink-0 rounded border border-neutral-700 bg-neutral-900 px-1.5 font-mono text-[0.6875rem] text-sky-200" data-testid="request-group-id" title="Request id shared by these lines">${escape_html(row.id)}</span> <span class="shrink-0 text-neutral-400" data-testid="request-group-count">${escape_html(formatCount(row.count))} lines</span> <span class="shrink-0 text-neutral-500" data-testid="request-group-span">${escape_html(row.span)}</span> <span${attr_class(`shrink-0 font-medium ${stringify(row.levelClass)}`)} data-testid="request-group-level">${escape_html(row.levelLabel)}</span> `);
+					if (!open) $$renderer.push(`<!--[0--><span class="min-w-0 truncate text-neutral-500" data-testid="request-group-preview">${escape_html(row.preview)}</span>`);
+					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 prefix column",
+				width: prefixPx,
+				min: PREFIX_MIN_PX,
+				max: PREFIX_MAX_PX,
+				testId: "prefix-resizer",
+				onChange: (next) => prefixPx = next,
+				onCommit: () => savePrefixWidth(),
+				class: "absolute inset-y-0 w-2",
+				style: `left: ${stringify(handleLeft() - 4)}px`
+			});
+			$$renderer.push(`<!----></div>`);
+		}
+		$$renderer.push(`<!--]--></div></section>`);
+	});
+}
+//#endregion
+//#region src/lib/components/RegionSelect.svelte
+function RegionSelect($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Regions offered by the picker; defaults to {@link DEFAULT_REGIONS}. */
+		/** Currently selected region. */
+		/** Called with the newly selected region. */
+		let { regions = DEFAULT_REGIONS, value = "", disabled = false, label = "Region", id = "region-select", onchange } = $$props;
+		/** Offered regions, plus the current value when the server does not list it. */
+		let options = derived(() => value !== "" && !regions.includes(value) ? [value, ...regions] : [...regions]);
+		$$renderer.push(`<div class="flex flex-col gap-1.5"><label${attr("for", id)} class="text-[0.6875rem] font-semibold uppercase tracking-wider text-neutral-500">${escape_html(label)}</label> `);
+		$$renderer.select({
+			id,
+			disabled,
+			value,
+			onchange: (event) => onchange?.(event.currentTarget.value),
+			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 hover:border-neutral-700 focus:border-sky-600 disabled:cursor-not-allowed disabled:opacity-50"
+		}, ($$renderer) => {
+			$$renderer.push(`<!--[-->`);
+			const each_array = ensure_array_like(options());
+			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+				let option = each_array[$$index];
+				$$renderer.option({ value: option }, ($$renderer) => {
+					$$renderer.push(`${escape_html(option)}`);
+				});
+			}
+			$$renderer.push(`<!--]-->`);
+		});
+		$$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);
+}
+/** Builds the `/api/stream` SSE URL for a target. `base` allows an absolute URL in tests. */
+function buildStreamUrl(target, base = "") {
+	const search = new URLSearchParams();
+	search.set("region", target.region);
+	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");
+		if (target.range) search.set("range", target.range);
+		if (target.from !== void 0 && target.from !== "") search.set("from", String(target.from));
+		if (target.to !== void 0 && target.to !== "") search.set("to", String(target.to));
+	} else if (target.mode === "live") search.set("mode", "live");
+	if (target.startTime !== void 0 && target.startTime !== "") search.set("startTime", String(target.startTime));
+	if (target.lookback) search.set("lookback", target.lookback);
+	if (typeof target.poll === "number" && Number.isFinite(target.poll)) search.set("poll", String(target.poll));
+	return `${base}/api/stream?${search.toString()}`;
+}
+/** Parses an SSE payload, returning `null` instead of throwing on malformed JSON. */
+function parsePayload(data) {
+	try {
+		return JSON.parse(data);
+	} catch {
+		return null;
+	}
+}
+/**
+* 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.
+*/
+var LogStream = class {
+	/** Connection status shown by the status badge. */
+	status = "idle";
+	/** Last server-side or transport error, or `null`. */
+	lastError = null;
+	/** Payload of the last `ready` event. */
+	ready = null;
+	/** Current target, or `null` after `stop()`. */
+	target = null;
+	/** Visible log lines, oldest first, capped by the buffer capacity. */
+	lines = [];
+	/** Total number of events received since the last reset. */
+	receivedCount = 0;
+	/** Lines dropped because the visible buffer was full. */
+	droppedCount = 0;
+	/** Lines held back while paused. */
+	pendingCount = 0;
+	/** True when the visible buffer is frozen and events are buffered. */
+	paused = false;
+	/** Timestamp of the last `ping` or `log` event. */
+	lastEventAt = null;
+	/** Reason given by the last `end` event. */
+	endReason = null;
+	#store;
+	#source = null;
+	#listeners = [];
+	#reconnectTimer = null;
+	#createEventSource;
+	#reconnectDelayMs;
+	#url;
+	#schedule;
+	#cancel;
+	constructor(options = {}) {
+		this.#store = new LogStore(options.capacity ?? 5e3);
+		this.#createEventSource = options.createEventSource ?? createBrowserEventSource;
+		this.#reconnectDelayMs = options.reconnectDelayMs ?? 1e3;
+		this.#url = options.url ?? ((target) => buildStreamUrl(target));
+		this.#schedule = options.schedule ?? ((callback, delayMs) => setTimeout(callback, delayMs));
+		this.#cancel = options.cancel ?? ((handle) => clearTimeout(handle));
+	}
+	/** Starts tailing a target, replacing any previous stream and clearing the buffer. */
+	start(target) {
+		this.#closeSource();
+		this.#clearReconnect();
+		this.clear();
+		this.status = "connecting";
+		this.lastError = null;
+		this.ready = null;
+		this.endReason = null;
+		this.target = { ...target };
+		this.#connect(false);
+	}
+	/** Stops tailing and forgets the target; the buffered lines stay visible. */
+	stop() {
+		this.#clearReconnect();
+		this.#closeSource();
+		this.target = null;
+		this.status = "idle";
+	}
+	/** Freezes the visible buffer; incoming events are held until {@link resume}. */
+	pause() {
+		this.#store.pause();
+		this.paused = true;
+	}
+	/** Thaws the visible buffer and flushes the events held while paused. */
+	resume() {
+		this.#store.resume();
+		this.paused = false;
+		this.#syncStore();
+	}
+	/** Pauses or resumes, depending on the current state. */
+	togglePause() {
+		if (this.paused) this.resume();
+		else this.pause();
+	}
+	/** Empties the visible buffer, the pending buffer and the counters. */
+	clear() {
+		this.#store.clear();
+		this.paused = false;
+		this.lines = [];
+		this.receivedCount = 0;
+		this.droppedCount = 0;
+		this.pendingCount = 0;
+	}
+	/** Number of visible lines. */
+	get size() {
+		return this.#store.size;
+	}
+	/** Opens a connection for the current target. */
+	#connect(retry) {
+		const target = this.target;
+		if (target === null) return;
+		this.#closeSource();
+		this.status = retry ? "reconnecting" : "connecting";
+		let source;
+		try {
+			source = this.#createEventSource(this.#url(target));
+		} catch (error) {
+			this.status = "error";
+			this.lastError = { message: error instanceof Error ? error.message : String(error) };
+			return;
+		}
+		this.#source = source;
+		this.#listen(source, "open", () => {
+			this.status = "live";
+			this.lastError = null;
+		});
+		this.#listen(source, "error", (event) => this.#handleErrorEvent(event));
+		this.#listen(source, "ready", (event) => this.#handleReady(event));
+		this.#listen(source, "log", (event) => this.#handleLog(event));
+		this.#listen(source, "ping", (event) => this.#handlePing(event));
+		this.#listen(source, "end", (event) => this.#handleEnd(event));
+	}
+	/** Registers a named-event listener and remembers it for cleanup. */
+	#listen(source, type, handler) {
+		source.addEventListener(type, handler);
+		this.#listeners.push({
+			source,
+			type,
+			handler
+		});
+	}
+	/** Detaches listeners and closes the current connection. */
+	#closeSource() {
+		for (const listener of this.#listeners) listener.source.removeEventListener(listener.type, listener.handler);
+		this.#listeners = [];
+		this.#source?.close();
+		this.#source = null;
+	}
+	/**
+	* Handles every `error` event. A payload means the server reported a problem; an empty payload
+	* means the connection dropped, which {@link #handleTransportError} deals with.
+	*/
+	#handleErrorEvent(event) {
+		const data = typeof event.data === "string" ? event.data.trim() : "";
+		if (data === "") {
+			this.#handleTransportError();
+			return;
+		}
+		this.lastError = parsePayload(data) ?? { message: data };
+		this.status = "error";
+	}
+	/**
+	* Handles a transport failure. While the source is still `CONNECTING` the browser keeps retrying
+	* on its own; a `CLOSED` source is rebuilt after {@link LogStreamOptions.reconnectDelayMs}.
+	*/
+	#handleTransportError() {
+		const source = this.#source;
+		if (source === null) return;
+		this.status = "reconnecting";
+		if (source.readyState === 2) this.#scheduleReconnect();
+	}
+	/** Schedules one reconnect attempt, unless one is already pending. */
+	#scheduleReconnect() {
+		if (this.#reconnectTimer !== null) return;
+		this.#reconnectTimer = this.#schedule(() => {
+			this.#reconnectTimer = null;
+			if (this.target !== null) this.#connect(true);
+		}, this.#reconnectDelayMs);
+	}
+	/** Drops a pending reconnect attempt. */
+	#clearReconnect() {
+		if (this.#reconnectTimer === null) return;
+		this.#cancel(this.#reconnectTimer);
+		this.#reconnectTimer = null;
+	}
+	/** Marks the stream as live after receiving data. */
+	#markLive() {
+		this.lastEventAt = Date.now();
+		if (this.status !== "ended") this.status = "live";
+	}
+	/** Copies buffer state onto the reactive fields. */
+	#syncStore() {
+		this.lines = this.#store.toArray();
+		this.pendingCount = this.#store.pendingCount;
+		this.droppedCount = this.#store.droppedCount;
+	}
+	#handleReady(event) {
+		const payload = parsePayload(event.data);
+		if (payload !== null) this.ready = payload;
+		this.#markLive();
+	}
+	#handleLog(event) {
+		const payload = parsePayload(event.data);
+		const events = payload !== null && Array.isArray(payload.events) ? payload.events : [];
+		if (events.length === 0) return;
+		this.#store.push(events);
+		this.#syncStore();
+		this.receivedCount += events.length;
+		this.#markLive();
+	}
+	#handlePing(event) {
+		const payload = parsePayload(event.data);
+		this.lastEventAt = payload?.at ?? Date.now();
+		if (this.status !== "ended") this.status = "live";
+	}
+	#handleEnd(event) {
+		const payload = parsePayload(event.data);
+		this.endReason = payload?.reason ?? null;
+		this.status = "ended";
+		this.#clearReconnect();
+		this.#closeSource();
+	}
+};
+//#endregion
+//#region src/routes/+page.svelte
+function _page($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Owns the SSE connection; the page only wires it to the UI. */
+		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") ?? "";
+		/**
+		* 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"));
+		let windowTo = parseUrlEpoch(page.url.searchParams.get("to"));
+		let rangeLoading = false;
+		let regions = [...DEFAULT_REGIONS];
+		let groups = [];
+		let groupsLoading = false;
+		let groupsError = null;
+		let endpoint = null;
+		let filter = "";
+		let autoScroll = true;
+		/**
+		* 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;
+		/**
+		* Group lines by request id, in the log view and in the chart.
+		*
+		* On by default: an incident is read as requests, not as the lines they wrote.
+		* A stored preference wins, so a reader who wants every line keeps every line.
+		*/
+		let groupRequests = true;
+		/** 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. */
+		let sidebarMaxPx = derived(() => remToPx(SIDEBAR_WIDTH.defaultRem));
+		let sidebarMinPx = remToPx(SIDEBAR_WIDTH.minRem);
+		let sidebarStyle = derived(() => `width: min(${sidebarPx}px, ${SIDEBAR_WIDTH.maxVw}vw)`);
+		/** Persists the sidebar width; failures are ignored (private mode, quota). */
+		function saveSidebarWidth() {
+			try {
+				if (typeof localStorage === "undefined") return;
+				localStorage.setItem(STORAGE_KEYS.sidebarWidth, String(Math.round(sidebarPx)));
+			} catch {}
+		}
+		/**
+		* 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(query);
+				if (target !== region || requestedSource !== source) return;
+				if (response.endpoint !== null) endpoint = response.endpoint;
+				groups = response.groups;
+			} catch (error) {
+				if (target !== region || requestedSource !== source) return;
+				groups = [];
+				groupsError = describeGroupsError(target, error);
+			} finally {
+				if (target === region && requestedSource === source) groupsLoading = false;
+			}
+		}
+		/** Parses an epoch-millisecond URL parameter, or `null`. */
+		function parseUrlEpoch(value) {
+			if (value === null || value.trim() === "") return null;
+			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
+			});
+		}
+		/** Turns request grouping on or off, and remembers the choice. */
+		function toggleGroupRequests() {
+			groupRequests = !groupRequests;
+			try {
+				localStorage?.setItem(STORAGE_KEYS.groupRequests, groupRequests ? "true" : "false");
+			} catch {}
+		}
+		/** 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 = [];
+			selectedGroups = [];
+			seriesPoints = [];
+			syncUrl(next, []);
+			loadGroups(next);
+		}
+		/** Replaces the view parameters in the address bar. */
+		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");
+				url.searchParams.delete("from");
+				url.searchParams.delete("to");
+			} else {
+				url.searchParams.set("mode", "historic");
+				url.searchParams.delete("from");
+				url.searchParams.delete("to");
+				url.searchParams.delete("range");
+				if (range === "" && windowFrom !== null && windowTo !== null) {
+					url.searchParams.set("from", String(windowFrom));
+					url.searchParams.set("to", String(windowTo));
+				} else url.searchParams.set("range", range === "" ? "15m" : range);
+			}
+			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() ?? "",
+					byRequest: groupRequests
+				});
+				return;
+			}
+			seriesLoading = true;
+			try {
+				seriesPoints = (await fetchSeries({
+					region,
+					groups: selectedGroups,
+					from,
+					to,
+					levels: levelFilter === null ? [] : [levelFilter],
+					by: groupRequests ? "request" : "event"
+				})).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> `);
+		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-->");
+		$$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">`);
+		SourceControls($$renderer, {
+			source,
+			archiveAvailable: archiveAvailable(),
+			archivePath: archivePath()});
+		$$renderer.push(`<!----> `);
+		RegionSelect($$renderer, {
+			regions,
+			value: region,
+			onchange: changeRegion
+		});
+		$$renderer.push(`<!----> `);
+		LogGroupList($$renderer, {
+			groups,
+			source,
+			region,
+			selected: selectedGroups,
+			loading: groupsLoading,
+			error: groupsError});
+		$$renderer.push(`<!----></div> `);
+		ColumnResizer($$renderer, {
+			label: "Resize group list",
+			width: sidebarPx,
+			min: sidebarMinPx,
+			max: sidebarMaxPx(),
+			testId: "sidebar-resizer",
+			onChange: (next) => sidebarPx = next,
+			onCommit: () => saveSidebarWidth(),
+			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,
+			byRequest: groupRequests,
+			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,
+			error: stream.lastError,
+			mode,
+			ready: stream.ready,
+			endReason: stream.endReason,
+			archivePath: archivePath(),
+			region,
+			group: selectedGroup(),
+			groups: selectedGroups,
+			level: levelFilter,
+			onLevelChange: (next) => levelFilter = next,
+			groupRequests,
+			onGroupToggle: toggleGroupRequests,
+			filter,
+			paused: stream.paused,
+			autoScroll,
+			pendingCount: stream.pendingCount,
+			droppedCount: stream.droppedCount,
+			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-qqtU0apo.js.map