watch-tail 0.6.2 → 0.7.1

package/build/server/chunks/entries/pages/{_page.svelte.js-BwuzE25P.js → _page.svelte.js-hG1agdw-.js}

@@ -1,20 +1,20 @@
 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 { f as LogStore, g as filterByLevel, h as filterEvents, c as effectiveLevel, t as tokenizeJson, b as detectLevel, j as formatLogMessage, k as eventKey, l as levelColorClass } from '../../chunks/log-buffer.js-A9FA-Qv8.js';
+import { R as REGION_CODES } from '../../chunks/regions.js-COf7DgnH.js';
 import { P as PRESET_LABELS, a as presetLabel, H as HISTORIC_PRESETS, t as toDateTimeLocal, d as describeWindow } from '../../chunks/time-range.js-BLMT8aU3.js';
-import { p as page, r as replaceState } from '../../chunks/state.js-DbqJPX0Y.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 { p as page, r as replaceState } from '../../chunks/state.js-CI2ef6Vi.js';
+import { S as SERIES_LEVEL_COLOR, g as groupByLevel, r as requestRows, L as LEVEL_LABELS, i as isMeaningfulBrush, a as requestDurations, b as bucketEvents } from '../../chunks/series-buckets.js-BmCYga3F.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-627EG4am.js';
+import '../../chunks/internal2.js--RCssYze.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
+* Formatting helpers for the watch-tail 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. */
@@ -158,12 +158,12 @@ function EndpointBadge($$renderer, $$props) {
 */
 /** `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"
+	sidebarWidth: "watch-tail:sidebar-width",
+	prefixWidth: "watch-tail:prefix-width",
+	wrap: "watch-tail:wrap",
+	jsonView: "watch-tail:json-view",
+	chartOpen: "watch-tail:chart-open",
+	groupRequests: "watch-tail:group-requests"
 };
 /** Default width of the group-list pane, in rem (matches the original layout). */
 var SIDEBAR_WIDTH = {
@@ -207,7 +207,7 @@ function EventScatterPanel($$renderer, $$props) {
 		* The real loader: a dynamic import, which is what keeps layerchart out of the
 		* initial bundle. It only runs in the browser, and only once the panel is open.
 		*/
-		const loadChartModule = () => import('../../chunks/EventScatter.js-D3Jaw_Cw.js');
+		const loadChartModule = () => import('../../chunks/EventScatter.js-Du7AJN9m.js');
 		/** Bucketed counts for the window. */
 		/** Inclusive start of the window, epoch ms. */
 		/** Inclusive end of the window, epoch ms. */
@@ -219,7 +219,7 @@ function EventScatterPanel($$renderer, $$props) {
 		/** 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 { metric = "count", onMetricChange, 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));
@@ -230,23 +230,32 @@ function EventScatterPanel($$renderer, $$props) {
 		/** 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");
+		let unit = derived(() => metric === "duration" || byRequest ? "requests" : "events");
 		/** Clears the brush, for the host's Reset zoom control. */
 		function reset() {
 			onBrush?.(null);
 		}
-		$$renderer.push(`<section class="flex min-w-0 flex-col gap-1 rounded-lg border border-neutral-800 bg-neutral-950/60 p-2" data-testid="event-scatter" 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> `);
+		$$renderer.push(`<section class="flex min-w-0 flex-col gap-1 rounded-lg border border-neutral-800 bg-neutral-950/60 p-2" data-testid="event-scatter"${attr("aria-label", metric === "duration" ? "Request duration over time" : "Events over time")}><div class="flex flex-wrap items-center gap-x-3 gap-y-1 px-1 text-[0.6875rem]"><button type="button"${attr("aria-expanded", expanded())}${attr("title", expanded() ? "Hide the chart" : "Show the chart")} data-testid="scatter-toggle" class="flex items-center gap-1 rounded-md border border-neutral-800 bg-neutral-900 px-2 py-0.5 font-semibold uppercase tracking-wider text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"><span aria-hidden="true">${escape_html(expanded() ? "▾" : "▸")}</span> ${escape_html(metric === "duration" ? "Request duration" : "Events over time")}</button> <div role="group" aria-label="Chart metric" class="flex rounded-md border border-neutral-800 p-0.5"><!--[-->`);
+		const each_array = ensure_array_like(["count", "duration"]);
+		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+			let choice = each_array[$$index];
+			$$renderer.push(`<button type="button"${attr("data-testid", `chart-metric-${choice}`)}${attr("aria-pressed", metric === choice)}${attr_class(`rounded px-2 py-0.5 transition-colors ${metric === choice ? "bg-sky-950 text-sky-300" : "text-neutral-400 hover:text-neutral-200"}`)}>${escape_html(choice === "count" ? "Count" : "Duration (ms)")}</button>`);
+		}
+		$$renderer.push(`<!--]--></div> <span class="text-neutral-400" data-testid="scatter-summary">${escape_html(formatCount(totalEvents()))}
+			${escape_html(unit())}`);
+		if (metric === "count") $$renderer.push(`<!--[0--> in ${escape_html(formatCount(bucketCount()))} buckets`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></span> `);
 		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];
+		const each_array_1 = ensure_array_like(levelGroups());
+		for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+			let entry = each_array_1[$$index_1];
 			$$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>`);
+		if (loading && expanded()) $$renderer.push(`<!--[0--><span class="text-amber-300" data-testid="scatter-loading">loading…</span>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		if (expanded()) {
@@ -257,11 +266,15 @@ function EventScatterPanel($$renderer, $$props) {
 		$$renderer.push(`<!--]--></div> `);
 		if (expanded()) {
 			$$renderer.push("<!--[0-->");
+			if (metric === "duration") $$renderer.push(`<!--[0--><p class="px-1 text-[0.6875rem] text-neutral-500" data-testid="duration-note">Observed duration (ms) · last event + its duration − first event · partial requests may
+				appear shorter</p>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> `);
 			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 if (!loading) $$renderer.push(`<!--[2--><p class="px-1 py-6 text-xs text-neutral-500" data-testid="scatter-empty">${escape_html(metric === "duration" ? "No requests with a request ID in this window yet." : "No events in this window yet.")}</p>`);
 			else $$renderer.push("<!--[-1-->");
 			$$renderer.push(`<!--]-->`);
 		} else $$renderer.push("<!--[-1-->");
@@ -324,7 +337,7 @@ function RangeControls($$renderer, $$props) {
 //#endregion
 //#region src/lib/groups-client.ts
 /**
-* Browser-side fetch helpers for the watch-stream JSON API (`/api/health`, `/api/regions`,
+* Browser-side fetch helpers for the watch-tail 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.
 */
@@ -377,6 +390,7 @@ function buildSeriesUrl(query) {
 	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.metric) search.set("metric", query.metric);
 	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()}`;
@@ -424,6 +438,16 @@ async function getJson(url, options) {
 function fetchLogGroups(query) {
 	return getJson(buildLogGroupsUrl(query), query);
 }
+/**
+* `GET /api/archive` - what the local DuckDB archive holds.
+*
+* The route answers 200 even when the archive is off or unreadable, so a failed
+* request means the API itself is unreachable and the caller should just hide
+* the archive view.
+*/
+function fetchArchiveStatus(options = {}) {
+	return getJson(`/api/archive${options.region ? `?${new URLSearchParams({ region: options.region })}` : ""}`, options);
+}
 /** 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.`;
@@ -450,7 +474,7 @@ function describeGroupsError(region, error) {
 		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)}`;
+	return `Could not reach the watch-tail 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) {
@@ -1275,6 +1299,8 @@ function _page($$renderer, $$props) {
 		let groupsLoading = false;
 		let groupsError = null;
 		let endpoint = null;
+		/** Last `/api/archive` answer, or `null` when it could not be read. */
+		let archiveStatus = null;
 		let filter = "";
 		let autoScroll = true;
 		/**
@@ -1297,10 +1323,12 @@ function _page($$renderer, $$props) {
 		let seriesPoints = [];
 		/** True while the archive counts are being fetched. */
 		let seriesLoading = false;
+		let chartMetric = "count";
+		let seriesRequest = 0;
 		/** True only when the local archive reports that it can be read. */
-		let archiveAvailable = derived(() => false);
+		let archiveAvailable = derived(() => archiveStatus?.available === true);
 		/** Database file behind the archive, or `null` when it is unknown. */
-		let archivePath = derived(() => null);
+		let archivePath = derived(() => archiveStatus?.path ?? null);
 		/** Tooltip of the archive badge in the header. */
 		let archiveTitle = derived(() => describeArchive(archivePath()));
 		/** Sidebar width in pixels; the layout default is 22rem. */
@@ -1317,6 +1345,19 @@ function _page($$renderer, $$props) {
 			} catch {}
 		}
 		/**
+		* Reads `GET /api/archive`. The route answers 200 even for an unusable archive, so a failure
+		* here only means the API is unreachable; the archive view stays hidden in that case.
+		*/
+		async function loadArchiveStatus() {
+			const target = region;
+			try {
+				const status = await fetchArchiveStatus({ region: target });
+				if (region === target) archiveStatus = status;
+			} catch {
+				if (region === target) archiveStatus = null;
+			}
+		}
+		/**
 		* 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.
 		*/
@@ -1417,6 +1458,7 @@ function _page($$renderer, $$props) {
 			selectedGroups = [];
 			seriesPoints = [];
 			syncUrl(next, []);
+			loadArchiveStatus();
 			loadGroups(next);
 		}
 		/** Replaces the view parameters in the address bar. */
@@ -1502,13 +1544,15 @@ function _page($$renderer, $$props) {
 		* streamed are bucketed here. Both end up as the same points.
 		*/
 		async function loadSeries() {
+			const request = ++seriesRequest;
+			seriesLoading = false;
 			if (selectedGroups.length === 0 || region === "") {
 				seriesPoints = [];
 				return;
 			}
 			const { from, to } = chartWindow();
 			if (source !== "archive") {
-				seriesPoints = bucketEvents(stream.lines, {
+				seriesPoints = (chartMetric === "duration" ? requestDurations : bucketEvents)(stream.lines, {
 					from,
 					to,
 					bucketMs: chartBucketMs(from, to),
@@ -1519,19 +1563,22 @@ function _page($$renderer, $$props) {
 				return;
 			}
 			seriesLoading = true;
+			seriesPoints = [];
 			try {
-				seriesPoints = (await fetchSeries({
+				const series = await fetchSeries({
 					region,
 					groups: selectedGroups,
 					from,
 					to,
 					levels: levelFilter === null ? [] : [levelFilter],
-					by: groupRequests ? "request" : "event"
-				})).points;
+					by: groupRequests ? "request" : "event",
+					metric: chartMetric
+				});
+				if (request === seriesRequest) seriesPoints = series.points;
 			} catch {
-				seriesPoints = [];
+				if (request === seriesRequest) seriesPoints = [];
 			} finally {
-				seriesLoading = false;
+				if (request === seriesRequest) seriesLoading = false;
 			}
 		}
 		$$renderer.push(`<div class="flex flex-wrap items-center gap-x-3 gap-y-2"><span class="text-[0.6875rem] font-semibold uppercase tracking-wider text-neutral-500">Watching</span> <span class="max-w-[22rem] truncate rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 font-mono text-xs text-neutral-200">${escape_html(selectedGroup() ?? "no group selected")}</span> <span class="text-xs text-neutral-500">in</span> <span class="font-mono text-xs text-neutral-300">${escape_html(region === "" ? "resolving region…" : region)}</span> `);
@@ -1600,6 +1647,8 @@ function _page($$renderer, $$props) {
 			bucketMs: chartBucketMs(chartWindow().from, chartWindow().to),
 			groups: selectedGroups,
 			byRequest: groupRequests,
+			metric: chartMetric,
+			onMetricChange: (metric) => chartMetric = metric,
 			loading: seriesLoading,
 			onBrush: applyBrush
 		});
@@ -1638,4 +1687,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-BwuzE25P.js.map
+//# sourceMappingURL=_page.svelte.js-hG1agdw-.js.map