watch-tail 0.8.0 → 0.9.0

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

@@ -1,15 +1,15 @@
-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 { a8 as escape_html, a7 as attr, ac as attr_style, a1 as derived, ad as attr_class, a6 as ensure_array_like, ae as stringify, af as bind_props, ag as clsx } from '../../chunks/index-server.js-CtH9Hqwf.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-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 { p as page, r as replaceState } from '../../chunks/state.js-i-NVNGIq.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-C-vMEJT2.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-BMcEVxqN.js';
-import '../../chunks/legacy-client.js-DJmDw3Zx.js';
+import '../../chunks/internal2.js-CfVVfAb5.js';
+import '../../chunks/legacy-client.js-DAqKExQD.js';
+import '../../chunks/events.js-zIVaXIP1.js';
 import '../../chunks/utils.js-BIlHjgGW.js';
 
 //#region src/lib/format.ts
@@ -160,6 +160,8 @@ function EndpointBadge($$renderer, $$props) {
 var STORAGE_KEYS = {
 	sidebarWidth: "watch-tail:sidebar-width",
 	prefixWidth: "watch-tail:prefix-width",
+	timestampWidth: "watch-tail:timestamp-width",
+	groupWidth: "watch-tail:group-width",
 	wrap: "watch-tail:wrap",
 	jsonView: "watch-tail:json-view",
 	chartOpen: "watch-tail:chart-open",
@@ -177,11 +179,6 @@ var PREFIX_WIDTH = {
 	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;
@@ -207,7 +204,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-CG0RcOU6.js');
+		const loadChartModule = () => import('../../chunks/EventScatter.js-CO2GonW-.js');
 		/** Bucketed counts for the window. */
 		/** Inclusive start of the window, epoch ms. */
 		/** Inclusive end of the window, epoch ms. */
@@ -219,7 +216,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, onSelect, points = [], from = 0, to = 0, bucketMs = 0, groups = [], loading = false, byRequest = true, onBrush, height = 200, open = true, loadChart = loadChartModule } = $$props;
+		let { metric = "duration", 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));
@@ -235,7 +232,7 @@ function EventScatterPanel($$renderer, $$props) {
 		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"${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"><!--[-->`);
+		$$renderer.push(`<section class="flex min-w-0 shrink-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];
@@ -269,14 +266,14 @@ function EventScatterPanel($$renderer, $$props) {
 			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(`<!--]--> `);
+			$$renderer.push(`<!--]--> <div class="overflow-hidden"${attr_style(`height: ${stringify(height)}px`)} data-testid="chart-body">`);
 			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">${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(`<!--]-->`);
+			$$renderer.push(`<!--]--></div>`);
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></section>`);
 		bind_props($$props, { reset });
@@ -552,7 +549,7 @@ function LogGroupList($$renderer, $$props) {
 			const each_array_1 = ensure_array_like(visible());
 			for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
 				let group = each_array_1[$$index_1];
-				$$renderer.push(`<li class="flex items-center gap-1.5"><input type="checkbox"${attr("data-testid", `group-check-${stringify(group.name)}`)}${attr("aria-label", `Include ${group.name} in the selection`)}${attr("checked", isSelected(group.name), true)} class="size-3.5 shrink-0 cursor-pointer accent-sky-500"/> <button type="button" data-testid="group-row"${attr("aria-current", isSelected(group.name) ? "true" : void 0)}${attr_class(`flex min-w-0 flex-1 items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-left text-xs transition-colors ${stringify(rowTone(group.name))}`)}><span class="truncate font-mono">${escape_html(group.name)}</span> `);
+				$$renderer.push(`<li class="flex items-center gap-1.5"><input type="checkbox"${attr("data-testid", `group-check-${stringify(group.name)}`)}${attr("aria-label", `Include ${group.name} in the selection`)}${attr("checked", isSelected(group.name), true)} class="size-3.5 shrink-0 cursor-pointer accent-sky-500"/> <button type="button" data-testid="group-row"${attr("data-group-name", group.name)}${attr("aria-label", group.name)}${attr("title", group.name)}${attr("aria-current", isSelected(group.name) ? "true" : void 0)}${attr_class(`flex min-w-0 flex-1 items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-left text-xs transition-colors ${stringify(rowTone(group.name))}`)}><span class="min-w-0 flex-1 overflow-hidden whitespace-nowrap font-mono" aria-hidden="true">${escape_html(group.name)}</span> `);
 				if (archived()) {
 					$$renderer.push(`<!--[0--><span class="flex shrink-0 items-center gap-1.5">`);
 					if (archivedCount(group) !== null) $$renderer.push(`<!--[0--><span data-testid="group-archived-count"${attr("title", archivedSpan(group) ?? "Events held in the local DuckDB archive")} class="rounded-full border border-teal-900 bg-teal-950/50 px-1.5 py-0.5 text-[0.625rem] font-medium text-teal-300">${escape_html(archivedCount(group))}</span>`);
@@ -661,7 +658,8 @@ function LogViewer($$renderer, $$props) {
 		*/
 		/** Called when the grouping toggle is pressed. */
 		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);
+		let timestampPx = remToPx(7.5);
+		let groupPx = 144;
 		const ROW_PADDING_PX = remToPx(.75);
 		const ROW_GAP_PX = remToPx(.5);
 		const PREFIX_MIN_PX = remToPx(PREFIX_WIDTH.minRem);
@@ -861,9 +859,9 @@ function LogViewer($$renderer, $$props) {
 		/** 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);
+		let handleLeft = derived(() => ROW_PADDING_PX + timestampPx + ROW_GAP_PX + (groups.length > 1 ? groupPx + ROW_GAP_PX : 0) + prefixPx);
 		/** Prefix column width as a CSS length. */
-		let prefixStyle = derived(() => `max-width: ${pxToRem(prefixPx)}`);
+		let prefixStyle = derived(() => `width: ${prefixPx}px`);
 		/** Rows the user has opened, keyed by row key. */
 		let expandedRows = {};
 		/** True when a row is open. */
@@ -933,13 +931,13 @@ 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" : ""}`, void 0, {
+				$$renderer.push(`<li${attr_class(`flex flex-wrap items-baseline gap-2 px-3 py-0.5 hover:bg-neutral-900/60 ${listClass()} ${expandable ? "cursor-pointer" : ""}`, 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>`);
+				})} 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="shrink-0 truncate text-neutral-500"${attr_style(`width: ${stringify(timestampPx)}px`)}${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
+				if (groups.length > 1) $$renderer.push(`<!--[0--><span class="shrink-0 truncate text-teal-400/80"${attr_style(`width: ${stringify(groupPx)}px`)}${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
 				else $$renderer.push("<!--[-1-->");
 				$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> `);
 				if (expandable) $$renderer.push(`<!--[0--><span class="shrink-0 text-neutral-600" aria-hidden="true">${escape_html(open ? "▾" : "▸")}</span>`);
@@ -966,15 +964,15 @@ function LogViewer($$renderer, $$props) {
 				} else $$renderer.push("<!--[-1-->");
 				$$renderer.push(`<!--]--></li>`);
 			}
-			$$renderer.push(`<div${attr_class(`relative min-h-full ${listClass()}`)} data-testid="log-canvas"><ol class="font-mono text-xs leading-5" data-testid="log-lines"><!--[-->`);
+			$$renderer.push(`<div${attr_class(`relative min-h-full ${listClass()}`)} data-testid="log-canvas"${attr_style("", { "min-width": void 0 })}><ol class="font-mono text-xs leading-5" data-testid="log-lines"><!--[-->`);
 			const each_array_3 = ensure_array_like(displayRows());
 			for (let $$index_4 = 0, $$length = each_array_3.length; $$index_4 < $$length; $$index_4++) {
 				let row = each_array_3[$$index_4];
 				if (row.kind === "request") {
 					$$renderer.push("<!--[0-->");
 					const open = isExpanded(row.key);
-					$$renderer.push(`<li${attr_class(clsx(listClass()), 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>`);
+					$$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="shrink-0 truncate text-neutral-500"${attr_style(`width: ${stringify(timestampPx)}px`)}${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
+					if (groups.length > 1) $$renderer.push(`<!--[0--><span class="shrink-0 truncate text-teal-400/80"${attr_style(`width: ${stringify(groupPx)}px`)}${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
 					else $$renderer.push("<!--[-1-->");
 					$$renderer.push(`<!--]--> <span class="shrink-0 truncate text-sky-400/80"${attr_style(prefixStyle())}${attr("title", row.streamName ?? "")} data-testid="log-stream">${escape_html(row.streamName ?? "")}</span> <span class="shrink-0 text-neutral-600" aria-hidden="true">${escape_html(open ? "▾" : "▸")}</span> <span class="shrink-0 rounded border border-neutral-700 bg-neutral-900 px-1.5 font-mono text-[0.6875rem] text-sky-200" data-testid="request-group-id" title="Request id shared by these lines">${escape_html(row.id)}</span> <span class="shrink-0 text-neutral-400" data-testid="request-group-count">${escape_html(formatCount(row.count))} lines</span> <span class="shrink-0 text-neutral-500" data-testid="request-group-span">${escape_html(row.span)}</span> <span${attr_class(`shrink-0 font-medium ${stringify(row.levelClass)}`)} data-testid="request-group-level">${escape_html(row.levelLabel)}</span> `);
 					if (!open) $$renderer.push(`<!--[0--><span class="min-w-0 truncate text-neutral-500" data-testid="request-group-preview">${escape_html(row.preview)}</span>`);
@@ -998,14 +996,41 @@ function LogViewer($$renderer, $$props) {
 			}
 			$$renderer.push(`<!--]--></ol> `);
 			ColumnResizer($$renderer, {
-				label: "Resize prefix column",
+				label: "Resize timestamp column",
+				width: timestampPx,
+				min: 64,
+				max: 320,
+				testId: "timestamp-resizer",
+				onChange: (next) => timestampPx = next,
+				onCommit: (next) => writePref(STORAGE_KEYS.timestampWidth, String(next)),
+				class: "absolute inset-y-0 w-2 border-r border-neutral-800/40",
+				style: `left: ${stringify(ROW_PADDING_PX + timestampPx - 4)}px`
+			});
+			$$renderer.push(`<!----> `);
+			if (groups.length > 1) {
+				$$renderer.push("<!--[0-->");
+				ColumnResizer($$renderer, {
+					label: "Resize log group column",
+					width: groupPx,
+					min: 64,
+					max: 640,
+					testId: "group-resizer",
+					onChange: (next) => groupPx = next,
+					onCommit: (next) => writePref(STORAGE_KEYS.groupWidth, String(next)),
+					class: "absolute inset-y-0 w-2 border-r border-neutral-800/40",
+					style: `left: ${stringify(ROW_PADDING_PX + timestampPx + ROW_GAP_PX + groupPx - 4)}px`
+				});
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> `);
+			ColumnResizer($$renderer, {
+				label: "Resize stream 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",
+				class: "absolute inset-y-0 w-2 border-r border-neutral-800/40",
 				style: `left: ${stringify(handleLeft() - 4)}px`
 			});
 			$$renderer.push(`<!----></div>`);
@@ -1358,7 +1383,7 @@ function _page($$renderer, $$props) {
 		let seriesPoints = [];
 		/** True while the archive counts are being fetched. */
 		let seriesLoading = false;
-		let chartMetric = "count";
+		let chartMetric = "duration";
 		let seriesRequest = 0;
 		/** True only when the local archive reports that it can be read. */
 		let archiveAvailable = derived(() => archiveStatus?.available === true);
@@ -1746,4 +1771,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-DRoSEPVH.js.map
+//# sourceMappingURL=_page.svelte.js-C9-7d7mD.js.map