watch-tail 0.7.1 → 0.9.0

package/build/server/chunks/entries/pages/_layout.svelte.js-D7sAdBVX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_layout.svelte.js-D7sAdBVX.js","sources":["../../../../../.svelte-kit/output/server/entries/pages/_layout.svelte.js"],"sourcesContent":["import { l as ensure_array_like, u as head, v as attr, x as escape_html } from \"../../chunks/index-server.js\";\n//#region src/lib/themes.ts\n/** Built-in palettes. Their tokens live in themes.css. */\nvar THEMES = [\n\t{\n\t\tid: \"midnight\",\n\t\tname: \"Midnight\",\n\t\tmode: \"dark\"\n\t},\n\t{\n\t\tid: \"ocean\",\n\t\tname: \"Ocean\",\n\t\tmode: \"dark\"\n\t},\n\t{\n\t\tid: \"forest\",\n\t\tname: \"Forest\",\n\t\tmode: \"dark\"\n\t},\n\t{\n\t\tid: \"plum\",\n\t\tname: \"Plum\",\n\t\tmode: \"dark\"\n\t},\n\t{\n\t\tid: \"daylight\",\n\t\tname: \"Daylight\",\n\t\tmode: \"light\"\n\t},\n\t{\n\t\tid: \"sand\",\n\t\tname: \"Sand\",\n\t\tmode: \"light\"\n\t},\n\t{\n\t\tid: \"mint\",\n\t\tname: \"Mint\",\n\t\tmode: \"light\"\n\t},\n\t{\n\t\tid: \"lavender\",\n\t\tname: \"Lavender\",\n\t\tmode: \"light\"\n\t}\n];\nvar THEME_STORAGE_KEY = \"watch-tail:theme\";\n/** Unknown or obsolete preferences fall back to Midnight. */\nfunction parseTheme(value) {\n\treturn THEMES.find((theme) => theme.id === value)?.id ?? \"midnight\";\n}\n//#endregion\n//#region src/lib/components/ThemeSelect.svelte\nfunction ThemeSelect($$renderer, $$props) {\n\t$$renderer.component(($$renderer) => {\n\t\tlet selected = \"midnight\";\n\t\tfunction apply(value, persist = true) {\n\t\t\tselected = parseTheme(value);\n\t\t\tdocument.documentElement.dataset.theme = selected;\n\t\t\tif (persist) try {\n\t\t\t\tlocalStorage.setItem(THEME_STORAGE_KEY, selected);\n\t\t\t} catch {}\n\t\t}\n\t\t$$renderer.push(`<label class=\"ml-auto flex items-center gap-2 text-xs text-neutral-400\"><span>Theme</span> `);\n\t\t$$renderer.select({\n\t\t\t\"aria-label\": \"Colour theme\",\n\t\t\t\"data-testid\": \"theme-select\",\n\t\t\tvalue: selected,\n\t\t\tonchange: (event) => apply(event.currentTarget.value),\n\t\t\tclass: \"rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs text-neutral-200 outline-none focus:border-sky-600\"\n\t\t}, ($$renderer) => {\n\t\t\t$$renderer.push(`<!--[-->`);\n\t\t\tconst each_array = ensure_array_like([\"dark\", \"light\"]);\n\t\t\tfor (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {\n\t\t\t\tlet mode = each_array[$$index_1];\n\t\t\t\t$$renderer.push(`<optgroup${attr(\"label\", mode === \"dark\" ? \"Dark themes\" : \"Light themes\")}><!--[-->`);\n\t\t\t\tconst each_array_1 = ensure_array_like(THEMES.filter((theme) => theme.mode === mode));\n\t\t\t\tfor (let $$index = 0, $$length = each_array_1.length; $$index < $$length; $$index++) {\n\t\t\t\t\tlet theme = each_array_1[$$index];\n\t\t\t\t\t$$renderer.option({ value: theme.id }, ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`${escape_html(theme.name)}`);\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!--]--></optgroup>`);\n\t\t\t}\n\t\t\t$$renderer.push(`<!--]-->`);\n\t\t});\n\t\t$$renderer.push(`</label>`);\n\t});\n}\n//#endregion\n//#region src/lib/assets/favicon.svg\nvar favicon_default = \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20role='img'%20aria-label='watch-tail'%3e%3ctitle%3ewatch-tail%3c/title%3e%3c!--%20A%20log%20window:%20three%20lines,%20the%20newest%20highlighted,%20with%20the%20tail%20still%20running.%20--%3e%3crect%20width='32'%20height='32'%20rx='7'%20fill='%230a0a0a'%20/%3e%3crect%20x='5'%20y='6.6'%20width='14'%20height='4'%20rx='2'%20fill='%2338bdf8'%20/%3e%3crect%20x='5'%20y='14'%20width='22'%20height='4'%20rx='2'%20fill='%23525252'%20/%3e%3crect%20x='5'%20y='21.4'%20width='17'%20height='4'%20rx='2'%20fill='%23404040'%20/%3e%3ccircle%20cx='25.6'%20cy='8.6'%20r='2.8'%20fill='%2338bdf8'%20/%3e%3c/svg%3e\";\n//#endregion\n//#region src/routes/+layout.svelte\nfunction _layout($$renderer, $$props) {\n\tlet { children } = $$props;\n\thead(\"12qhfyh\", $$renderer, ($$renderer) => {\n\t\t$$renderer.title(($$renderer) => {\n\t\t\t$$renderer.push(`<title>watch-tail</title>`);\n\t\t});\n\t\t$$renderer.push(`<link rel=\"icon\"${attr(\"href\", favicon_default)}/>`);\n\t});\n\t$$renderer.push(`<div class=\"flex h-dvh min-h-[30rem] flex-col overflow-hidden bg-neutral-950 font-sans text-neutral-100 antialiased selection:bg-sky-900/60\"><header class=\"flex-none border-b border-neutral-900 bg-neutral-950/90\"><div class=\"flex w-full items-baseline gap-3 px-3 py-2 sm:px-4\"><span class=\"text-sm font-semibold tracking-tight\">watch<span class=\"text-sky-400\">-tail</span></span> <span class=\"hidden text-xs text-neutral-500 sm:inline\">Tail CloudWatch Logs in the browser</span> `);\n\tThemeSelect($$renderer, {});\n\t$$renderer.push(`<!----></div></header> <main class=\"flex min-h-0 w-full flex-1 flex-col gap-3 px-3 py-3 sm:px-4\">`);\n\tchildren($$renderer);\n\t$$renderer.push(`<!----></main></div>`);\n}\n//#endregion\nexport { _layout as default };\n"],"names":[],"mappings":";;;AACA;AACA;AACA,IAAI,MAAM,GAAG;AACb,CAAC;AACD,EAAE,EAAE,EAAE,UAAU;AAChB,EAAE,IAAI,EAAE,UAAU;AAClB,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,OAAO;AACb,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,QAAQ;AACd,EAAE,IAAI,EAAE,QAAQ;AAChB,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,UAAU;AAChB,EAAE,IAAI,EAAE,UAAU;AAClB,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE;AACR,EAAE;AACF,CAAC;AACD,EAAE,EAAE,EAAE,UAAU;AAChB,EAAE,IAAI,EAAE,UAAU;AAClB,EAAE,IAAI,EAAE;AACR;AACA,CAAC;AACD,IAAI,iBAAiB,GAAG,kBAAkB;AAC1C;AACA,SAAS,UAAU,CAAC,KAAK,EAAE;AAC3B,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,EAAE,IAAI,UAAU;AACpE;AACA;AACA;AACA,SAAS,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE;AAC1C,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,UAAU,KAAK;AACtC,EAAE,IAAI,QAAQ,GAAG,UAAU;AAC3B,EAAE,SAAS,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE;AACxC,GAAG,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC;AAC/B,GAAG,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,QAAQ;AACpD,GAAG,IAAI,OAAO,EAAE,IAAI;AACpB,IAAI,YAAY,CAAC,OAAO,CAAC,iBAAiB,EAAE,QAAQ,CAAC;AACrD,GAAG,CAAC,CAAC,MAAM,CAAC;AACZ,EAAE;AACF,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,2FAA2F,CAAC,CAAC;AAChH,EAAE,UAAU,CAAC,MAAM,CAAC;AACpB,GAAG,YAAY,EAAE,cAAc;AAC/B,GAAG,aAAa,EAAE,cAAc;AAChC,GAAG,KAAK,EAAE,QAAQ;AAClB,GAAG,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;AACxD,GAAG,KAAK,EAAE;AACV,GAAG,EAAE,CAAC,UAAU,KAAK;AACrB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AAC9B,GAAG,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC1D,GAAG,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,EAAE,SAAS,EAAE,EAAE;AAC5F,IAAI,IAAI,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC;AACpC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;AAC3G,IAAI,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACzF,IAAI,KAAK,IAAI,OAAO,GAAG,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE;AACzF,KAAK,IAAI,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC;AACtC,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,KAAK;AAC5D,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACnD,KAAK,CAAC,CAAC;AACP,IAAI;AACJ,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,mBAAmB,CAAC,CAAC;AAC1C,GAAG;AACH,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AAC9B,EAAE,CAAC,CAAC;AACJ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AAC7B,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA,IAAI,eAAe,GAAG,orBAAorB;AAC1sB;AACA;AACA,SAAS,OAAO,CAAC,UAAU,EAAE,OAAO,EAAE;AACtC,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO;AAC3B,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,UAAU,KAAK;AAC7C,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,UAAU,KAAK;AACnC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,yBAAyB,CAAC,CAAC;AAC/C,EAAE,CAAC,CAAC;AACJ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;AACvE,CAAC,CAAC,CAAC;AACH,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,+dAA+d,CAAC,CAAC;AACnf,CAAC,WAAW,CAAC,UAAc,CAAC;AAC5B,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,iGAAiG,CAAC,CAAC;AACrH,CAAC,QAAQ,CAAC,UAAU,CAAC;AACrB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC,CAAC;AACxC;;"}

package/build/server/chunks/entries/pages/{_page.svelte.js-hG1agdw-.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-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-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--RCssYze.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-Du7AJN9m.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, 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];
@@ -260,7 +257,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> `);
@@ -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>`);
@@ -574,6 +571,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,8 +657,9 @@ 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;
-		const TIMESTAMP_COLUMN_PX = remToPx(7.5);
+		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;
+		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);
@@ -693,8 +710,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 +735,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 +829,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. */
@@ -840,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. */
@@ -897,6 +916,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,8 +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" : ""}`)} data-testid="log-line"${attr("data-request-child", child ? "true" : void 0)}${attr("data-level", row.level ?? "unknown")}${attr("data-expandable", expandable ? "true" : void 0)}${attr("data-expanded", open ? "true" : void 0)}${attr("role", expandable ? "button" : void 0)}${attr("tabindex", expandable ? 0 : void 0)}${attr("aria-expanded", expandable ? open : void 0)}${attr("title", expandable ? open ? "Hide the JSON in this line" : "Show this line as JSON" : void 0)}><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
-				if (groups.length > 1) $$renderer.push(`<!--[0--><span class="w-[9rem] shrink-0 truncate text-teal-400/80"${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
+				$$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="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>`);
@@ -933,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()))} data-testid="log-request-group"${attr("data-request-id", row.id)}${attr("data-level", row.level)}${attr("data-expanded", open ? "true" : void 0)}${attr("data-lines", row.count)}><button type="button" class="flex w-full flex-wrap items-baseline gap-2 px-3 py-0.5 text-left hover:bg-neutral-900/60"${attr("aria-expanded", open)}${attr("title", open ? "Hide the lines of this request" : "Show every line of this request")} data-testid="request-group-summary"><span class="w-[7.5rem] shrink-0 text-neutral-500"${attr("title", row.timestamp)}>${escape_html(row.time)}</span> `);
-					if (groups.length > 1) $$renderer.push(`<!--[0--><span class="w-[9rem] shrink-0 truncate text-teal-400/80"${attr("title", row.group ?? "")} data-testid="log-group">${escape_html(row.group ?? "")}</span>`);
+					$$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>`);
@@ -965,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>`);
@@ -1320,10 +1378,12 @@ 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;
-		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);
@@ -1551,6 +1611,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 +1635,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 +1708,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 +1733,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 +1757,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-C9-7d7mD.js.map