watch-tail 0.1.0

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

@@ -0,0 +1,1264 @@
+import '../../chunks/internal.js-DdmUz1r3.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 { 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-ClLTNPGs.js';
+import '../../chunks/uneval.js-DaakSYFQ.js';
+import '../../chunks/shared.js-CgjUIvRK.js';
+import '../../chunks/exports.js-CvFPPbaH.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 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"
+};
+/** 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/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. */
+		/** Called when the user switches mode or applies a range. */
+		let { mode = "live", range = "15m", from = null, to = null, disabled = false, loading = 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> `);
+		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`). 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.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}`;
+}
+/** 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. */
+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.`;
+}
+/** 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. */
+		/** Active region, used for context in the empty state. */
+		/** Group name currently being tailed. */
+		/** 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 when the refresh button is clicked. */
+		let { groups = [], region = "", selected = null, loading = false, error = null, maxRows = 500} = $$props;
+		let search = "";
+		/** 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. */
+		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";
+		}
+		$$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> `);
+		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(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>`);
+				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/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) => {
+		/** 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`. */
+		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;
+		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. */
+		/** Lines matching the client-side filter. */
+		let visible = derived(() => filterEvents(lines, filter));
+		/** Presentation rows for the visible lines. */
+		let rows = derived(() => visible().map((event, index) => {
+			const level = detectLevel(event.message);
+			const formatted = formatLogMessage(event.message, { prettyJson: jsonView });
+			return {
+				key: eventKey(event, index),
+				time: formatTime(event.timestamp),
+				timestamp: formatTimestamp(event.timestamp),
+				streamName: event.streamName,
+				message: formatted.text,
+				tokens: formatted.isJson ? tokenizeJson(formatted.text) : null,
+				level,
+				levelClass: levelColorClass(level)
+			};
+		}));
+		/** 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));
+		/** 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.");
+		/** 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");
+		/** 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)}`);
+		/** 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 });
+		$$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(`<!--]--> `);
+		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"><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> `);
+		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 (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">`);
+				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></li>`);
+			}
+			$$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>`);
+	});
+}
+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);
+	search.set("group", target.group);
+	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;
+	}
+}
+/**
+* Live view over one CloudWatch log group.
+*
+* 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") ?? "";
+		/** Tail mode and historic window, seeded from the URL. */
+		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;
+		/** Group currently being tailed, or `null`. */
+		let selectedGroup = derived(() => stream.target?.group ?? null);
+		/** 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; a newer region change wins the race. */
+		async function loadGroups(target) {
+			groupsLoading = true;
+			groupsError = null;
+			try {
+				const response = await fetchLogGroups({ region: target });
+				if (target !== region) return;
+				if (response.endpoint !== null) endpoint = response.endpoint;
+				groups = response.groups;
+			} catch (error) {
+				if (target !== region) return;
+				groups = [];
+				groupsError = describeGroupsError(target, error);
+			} finally {
+				if (target === region) 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;
+		}
+		/** 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);
+			loadGroups(next);
+		}
+		/** Replaces the view parameters in the address bar. */
+		function syncUrl(nextRegion, nextGroup) {
+			const url = new URL(page.url);
+			if (nextRegion === "") url.searchParams.delete("region");
+			else url.searchParams.set("region", nextRegion);
+			url.searchParams.delete("group");
+			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();
+		}
+		$$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(`<!----> `);
+		$$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></div> `);
+		$$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> `);
+		RangeControls($$renderer, {
+			mode,
+			range,
+			from: windowFrom,
+			to: windowTo,
+			loading: rangeLoading,
+			disabled: selectedGroup() === null});
+		$$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">`);
+		RegionSelect($$renderer, {
+			regions,
+			value: region,
+			onchange: changeRegion
+		});
+		$$renderer.push(`<!----> `);
+		LogGroupList($$renderer, {
+			groups,
+			region,
+			selected: selectedGroup(),
+			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">`);
+		LogViewer($$renderer, {
+			lines: stream.lines,
+			status: stream.status,
+			error: stream.lastError,
+			mode,
+			ready: stream.ready,
+			endReason: stream.endReason,
+			region,
+			group: selectedGroup(),
+			filter,
+			paused: stream.paused,
+			autoScroll,
+			pendingCount: stream.pendingCount,
+			droppedCount: stream.droppedCount,
+			receivedCount: stream.receivedCount});
+		$$renderer.push(`<!----></div></div>`);
+	});
+}
+
+export { _page as default };
+//# sourceMappingURL=_page.svelte.js-BsvaKqbk.js.map