watch-tail 0.7.1 → 0.8.0

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

@@ -2,13 +2,13 @@ import { ah as escape_html, ag as attr, ai as attr_style, ac as derived, aj as a
 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-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 { p as page, r as replaceState } from '../../chunks/state.js-vZj9lo1I.js';
+import { S as SERIES_LEVEL_COLOR, g as groupByLevel, r as requestRows, a as requestIdOf, c as collectRequests, L as LEVEL_LABELS, i as isMeaningfulBrush, b as requestDurations, d as bucketEvents } from '../../chunks/series-buckets.js-DFGWkob5.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--RCssYze.js';
+import '../../chunks/internal2.js-BMcEVxqN.js';
 import '../../chunks/legacy-client.js-DJmDw3Zx.js';
 import '../../chunks/utils.js-BIlHjgGW.js';
 
@@ -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-Du7AJN9m.js');
+		const loadChartModule = () => import('../../chunks/EventScatter.js-CG0RcOU6.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 { metric = "count", onMetricChange, points = [], from = 0, to = 0, bucketMs = 0, groups = [], loading = false, byRequest = true, onBrush, height = 200, open = true, loadChart = loadChartModule } = $$props;
+		let { metric = "count", onMetricChange, onSelect, 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));
@@ -260,7 +260,7 @@ function EventScatterPanel($$renderer, $$props) {
 		$$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(`<!--[-1--><span class="ml-auto text-neutral-500" data-testid="scatter-hint">select a point to show logs · drag to zoom · click background to clear</span>`);
 			$$renderer.push(`<!--]-->`);
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></div> `);
@@ -574,6 +574,25 @@ function LogGroupList($$renderer, $$props) {
 	});
 }
 //#endregion
+//#region src/lib/chart-selection.ts
+/** Resolve a plotted mark against the loaded events, before display filters. */
+function selectedChartEvents(lines, selection) {
+	if (selection === null) return /* @__PURE__ */ new Set();
+	const { point, bucketMs, byRequest, fallbackGroup } = selection;
+	const events = lines.filter((event) => (event.group ?? fallbackGroup) === point.group);
+	if (point.requestId !== void 0) return new Set(events.filter((event) => requestIdOf(event) === point.requestId));
+	const inBucket = (timestamp) => Math.floor(timestamp / bucketMs) * bucketMs === point.t;
+	const matches = /* @__PURE__ */ new Set();
+	if (byRequest) {
+		for (const request of collectRequests(events)) if (inBucket(request.first) && request.level === point.level) for (const { event } of request.events) matches.add(event);
+	}
+	for (const event of events) {
+		if (byRequest && requestIdOf(event) !== null) continue;
+		if (inBucket(event.timestamp) && (effectiveLevel(event) ?? "unknown") === point.level) matches.add(event);
+	}
+	return matches;
+}
+//#endregion
 //#region src/lib/components/StatusBadge.svelte
 function StatusBadge($$renderer, $$props) {
 	/** Connection status reported by the log stream. */
@@ -641,7 +660,7 @@ function LogViewer($$renderer, $$props) {
 		* default, and owned by the page so the chart counts the same requests.
 		*/
 		/** Called when the grouping toggle is pressed. */
-		let { 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;
+		let { selection = null, onSelectionClear, lines = [], status = "idle", error = null, region = "", group = null, filter = "", paused = false, autoScroll = true, pendingCount = 0, droppedCount = 0, receivedCount = 0, mode = "live", ready = null, endReason = null, archivePath = null, groups = [], level = void 0, onLevelChange, groupRequests = true, onGroupToggle, onFilterChange, onPauseToggle, onClear, onAutoScrollToggle } = $$props;
 		const TIMESTAMP_COLUMN_PX = remToPx(7.5);
 		const ROW_PADDING_PX = remToPx(.75);
 		const ROW_GAP_PX = remToPx(.5);
@@ -693,8 +712,10 @@ function LogViewer($$renderer, $$props) {
 				activeClass: "border-neutral-700 bg-neutral-800 text-neutral-400"
 			}
 		];
+		let selectedEvents = derived(() => selectedChartEvents(lines, selection));
 		/** Lines matching the text filter and the level filter. */
 		let visible = derived(() => filterByLevel(filterEvents(lines, filter), levelFilter()));
+		let visibleSelectedCount = derived(() => visible().filter((event) => selectedEvents().has(event)).length);
 		/** How many lines of each level are loaded, including `unknown`. */
 		let levelCounts = derived(() => {
 			const counts = {
@@ -716,6 +737,7 @@ function LogViewer($$renderer, $$props) {
 			const formatted = formatLogMessage(event.message, { prettyJson: jsonView });
 			const levelClass = levelColorClass(rowLevel);
 			return {
+				selected: selectedEvents().has(event),
 				key: eventKey(event, index),
 				time: formatTime(event.timestamp),
 				timestamp: formatTimestamp(event.timestamp),
@@ -809,7 +831,6 @@ function LogViewer($$renderer, $$props) {
 		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. */
@@ -897,6 +918,13 @@ function LogViewer($$renderer, $$props) {
 		$$renderer.push(`<!--]--></div> <input type="search" aria-label="Filter log lines" placeholder="Filter lines"${attr("value", filter)} class="w-40 rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs text-neutral-100 outline-none transition-colors placeholder:text-neutral-600 hover:border-neutral-700 focus:border-sky-600"/> <button type="button"${attr("aria-pressed", wrapLines)} title="Wrap long lines instead of scrolling sideways" data-testid="wrap-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${wrapTone()}`)}>Wrap</button> <button type="button"${attr("aria-pressed", jsonView)} title="Pretty-print JSON log entries (off: click a line to open its JSON)" data-testid="json-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${jsonTone()}`)}>JSON</button> <button type="button"${attr("aria-pressed", groupRequests)} title="Group the lines of one request into a single row, coloured by its most critical line (off: one row per line)" data-testid="group-toggle"${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${groupTone()}`)}>By request</button> <button type="button"${attr("aria-pressed", paused)} class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">${escape_html(paused ? "Resume" : "Pause")}</button> <button type="button" class="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:text-neutral-100">Clear</button> <button type="button"${attr("aria-pressed", autoScroll)}${attr_class(`rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs font-medium transition-colors hover:border-neutral-700 ${autoScrollTone()}`)}>Auto-scroll</button></div></div> `);
 		if (errorText() !== null) $$renderer.push(`<!--[0--><p role="alert" data-testid="stream-error" class="border-b border-red-900 bg-red-950/50 px-3 py-2 text-xs leading-5 text-red-300">${escape_html(errorText())}</p>`);
 		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> `);
+		if (selection !== null) {
+			$$renderer.push(`<!--[0--><div class="flex items-center gap-2 px-3 py-1 text-xs text-sky-300" role="status" data-testid="chart-selection-status">`);
+			if (selectedEvents().size === 0) $$renderer.push(`<!--[0-->Selected logs are not in the loaded buffer. Zoom into this time range to load them.`);
+			else $$renderer.push(`<!--[-1-->${escape_html(visibleSelectedCount())} of ${escape_html(selectedEvents().size)} selected log lines visible${escape_html(visibleSelectedCount() < selectedEvents().size ? " — clear the text or level filter to see all" : "")}.`);
+			$$renderer.push(`<!--]--> <button type="button" class="ml-auto underline">Clear selection</button></div>`);
+		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> <div class="min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-950" data-testid="log-scroller">`);
 		if (group === null || group === "") $$renderer.push(`<!--[0--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-idle">Select a log group to start tailing.</p>`);
 		else if (displayRows().length === 0) $$renderer.push(`<!--[1--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-empty">${escape_html(emptyText())}</p>`);
@@ -905,7 +933,12 @@ function LogViewer($$renderer, $$props) {
 			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> `);
+				$$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" : ""}`, void 0, {
+					"bg-sky-950": row.selected,
+					"ring-1": row.selected,
+					"ring-inset": row.selected,
+					"ring-sky-700": row.selected
+				})} data-testid="log-line"${attr("data-chart-selected", row.selected ? "true" : void 0)}${attr("data-request-child", child ? "true" : void 0)}${attr("data-level", row.level ?? "unknown")}${attr("data-expandable", expandable ? "true" : void 0)}${attr("data-expanded", open ? "true" : void 0)}${attr("role", expandable ? "button" : void 0)}${attr("tabindex", expandable ? 0 : void 0)}${attr("aria-expanded", expandable ? open : void 0)}${attr("title", expandable ? open ? "Hide the JSON in this line" : "Show this line as JSON" : void 0)}><span class="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> `);
@@ -940,7 +973,7 @@ function LogViewer($$renderer, $$props) {
 				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> `);
+					$$renderer.push(`<li${attr_class(clsx(listClass()), void 0, { "bg-sky-950": row.children.some((child) => child.selected) })} data-testid="log-request-group"${attr("data-chart-selected", row.children.some((child) => child.selected) ? "true" : void 0)}${attr("data-request-id", row.id)}${attr("data-level", row.level)}${attr("data-expanded", open ? "true" : void 0)}${attr("data-lines", row.count)}><button type="button" class="flex w-full flex-wrap items-baseline gap-2 px-3 py-0.5 text-left hover:bg-neutral-900/60"${attr("aria-expanded", open)}${attr("title", open ? "Hide the lines of this request" : "Show every line of this request")} data-testid="request-group-summary"><span class="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> `);
@@ -1320,6 +1353,8 @@ function _page($$renderer, $$props) {
 		*/
 		let groupRequests = true;
 		/** Bucketed counts behind the chart. */
+		let chartSelection = null;
+		let seriesBucketMs = 6e4;
 		let seriesPoints = [];
 		/** True while the archive counts are being fetched. */
 		let seriesLoading = false;
@@ -1551,6 +1586,7 @@ function _page($$renderer, $$props) {
 				return;
 			}
 			const { from, to } = chartWindow();
+			seriesBucketMs = chartBucketMs(from, to);
 			if (source !== "archive") {
 				seriesPoints = (chartMetric === "duration" ? requestDurations : bucketEvents)(stream.lines, {
 					from,
@@ -1574,7 +1610,10 @@ function _page($$renderer, $$props) {
 					by: groupRequests ? "request" : "event",
 					metric: chartMetric
 				});
-				if (request === seriesRequest) seriesPoints = series.points;
+				if (request === seriesRequest) {
+					seriesPoints = series.points;
+					seriesBucketMs = series.bucketMs;
+				}
 			} catch {
 				if (request === seriesRequest) seriesPoints = [];
 			} finally {
@@ -1644,11 +1683,23 @@ function _page($$renderer, $$props) {
 			points: seriesPoints,
 			from: chartWindow().from,
 			to: chartWindow().to,
-			bucketMs: chartBucketMs(chartWindow().from, chartWindow().to),
+			bucketMs: seriesBucketMs,
 			groups: selectedGroups,
 			byRequest: groupRequests,
 			metric: chartMetric,
-			onMetricChange: (metric) => chartMetric = metric,
+			onMetricChange: (metric) => {
+				chartSelection = null;
+				chartMetric = metric;
+			},
+			onSelect: (point) => {
+				autoScroll = false;
+				chartSelection = {
+					point,
+					bucketMs: seriesBucketMs,
+					byRequest: groupRequests,
+					fallbackGroup: selectedGroup() ?? ""
+				};
+			},
 			loading: seriesLoading,
 			onBrush: applyBrush
 		});
@@ -1657,6 +1708,8 @@ function _page($$renderer, $$props) {
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		LogViewer($$renderer, {
+			selection: chartSelection,
+			onSelectionClear: () => chartSelection = null,
 			lines: stream.lines,
 			status: stream.status,
 			error: stream.lastError,
@@ -1679,12 +1732,18 @@ function _page($$renderer, $$props) {
 			receivedCount: stream.receivedCount,
 			onFilterChange: (value) => filter = value,
 			onPauseToggle: () => stream.togglePause(),
-			onClear: () => stream.clear(),
-			onAutoScrollToggle: () => autoScroll = !autoScroll
+			onClear: () => {
+				chartSelection = null;
+				stream.clear();
+			},
+			onAutoScrollToggle: () => {
+				chartSelection = null;
+				autoScroll = !autoScroll;
+			}
 		});
 		$$renderer.push(`<!----></div></div>`);
 	});
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-hG1agdw-.js.map
+//# sourceMappingURL=_page.svelte.js-DRoSEPVH.js.map