watch-tail 0.5.0 → 0.6.0

package/build/server/chunks/entries/pages/{_page.svelte.js-B-kVwiNh.js → _page.svelte.js-qqtU0apo.js}

@@ -1,14 +1,14 @@
 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 { L as LogStore, t as tokenizeJson, f as filterByLevel, b as filterEvents, e as effectiveLevel, a as detectLevel, c as formatLogMessage, g as eventKey, l as levelColorClass } from '../../chunks/log-buffer.js-CpI7gyom.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 { 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-Dves8H8h.js';
-import { S as SERIES_LEVEL_COLOR, g as groupByLevel, i as isMeaningfulBrush, b as bucketEvents } from '../../chunks/series-buckets.js-CX_rWCeH.js';
+import { p as page, r as replaceState } from '../../chunks/state.js-DgkwfYFo.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 '../../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-DDcktblR.js';
+import '../../chunks/internal2.js-BPo5dcDi.js';
 import '../../chunks/legacy-client.js-DJmDw3Zx.js';
 import '../../chunks/utils.js-BIlHjgGW.js';
 
@@ -46,6 +46,25 @@ function trimZero(value) {
 	return fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed;
 }
 /**
+* Formats a duration as `250ms`, `1.2s`, `2m 5s` or `1h 2m`, for a request's span.
+* Sub-second spans keep a millisecond value, because that is what a slow request
+* is measured in; longer spans stop at the first two units a reader needs.
+*/
+function formatSpan(ms) {
+	if (typeof ms !== "number" || !Number.isFinite(ms) || ms < 0) return "—";
+	const total = Math.round(ms);
+	if (total < 1e3) return `${total}ms`;
+	const seconds = total / 1e3;
+	if (seconds < 60) return `${trimZero(seconds)}s`;
+	const wholeSeconds = Math.floor(seconds);
+	const minutes = Math.floor(wholeSeconds / 60);
+	const restSeconds = wholeSeconds % 60;
+	if (minutes < 60) return restSeconds === 0 ? `${minutes}m` : `${minutes}m ${restSeconds}s`;
+	const hours = Math.floor(minutes / 60);
+	const restMinutes = minutes % 60;
+	return restMinutes === 0 ? `${hours}h` : `${hours}h ${restMinutes}m`;
+}
+/**
 * Formats a byte count as `B`, `KiB`, `MiB` or `GiB`, with at most one decimal for scaled units.
 * Returns {@link EMPTY_VALUE} for a missing or negative value.
 */
@@ -143,7 +162,8 @@ var STORAGE_KEYS = {
 	prefixWidth: "watch-stream:prefix-width",
 	wrap: "watch-stream:wrap",
 	jsonView: "watch-stream:json-view",
-	chartOpen: "watch-stream:chart-open"
+	chartOpen: "watch-stream:chart-open",
+	groupRequests: "watch-stream:group-requests"
 };
 /** Default width of the group-list pane, in rem (matches the original layout). */
 var SIDEBAR_WIDTH = {
@@ -187,18 +207,19 @@ 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-DqCMPeHG.js');
+		const loadChartModule = () => import('../../chunks/EventScatter.js-D3Jaw_Cw.js');
 		/** Bucketed counts for the window. */
 		/** Inclusive start of the window, epoch ms. */
 		/** Inclusive end of the window, epoch ms. */
 		/** Bucket width in ms, shown in the summary. */
 		/** Log groups the points cover, for the summary. */
+		/** True when one mark stands for one request rather than one line. */
 		/** True while the counts are being fetched. */
 		/** Called with the brushed range when the drag ends, or `null` on clear. */
 		/** 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, onBrush, height = 200, open = true, loadChart = loadChartModule } = $$props;
+		let { 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));
@@ -208,11 +229,14 @@ function EventScatterPanel($$renderer, $$props) {
 		let bucketCount = derived(() => new Set(points.map((point) => point.t)).size);
 		/** 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");
 		/** 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()))} events 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" 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> `);
 		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(`<!--]--> <!--[-->`);
@@ -353,6 +377,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.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()}`;
 }
@@ -587,7 +612,12 @@ function LogViewer($$renderer, $$props) {
 		* the chart above stays in step with the chips.
 		*/
 		/** Called when the level filter changes while it is controlled. */
-		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, onFilterChange, onPauseToggle, onClear, onAutoScrollToggle } = $$props;
+		/**
+		* Group lines that share a request id into one row, opened on demand. On by
+		* 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);
 		const ROW_PADDING_PX = remToPx(.75);
 		const ROW_GAP_PX = remToPx(.5);
@@ -656,8 +686,8 @@ function LogViewer($$renderer, $$props) {
 			}
 			return counts;
 		});
-		/** Presentation rows for the visible lines. */
-		let rows = derived(() => visible().map((event, index) => {
+		/** Presentation rows for the visible lines, one per line in buffer order. */
+		let lineRows = derived(() => visible().map((event, index) => {
 			const rowLevel = event.level !== void 0 ? event.level : detectLevel(event.message);
 			const formatted = formatLogMessage(event.message, { prettyJson: jsonView });
 			const levelClass = levelColorClass(rowLevel);
@@ -674,6 +704,87 @@ function LogViewer($$renderer, $$props) {
 				levelClass
 			};
 		}));
+		/**
+		* One row of the list: a line, or a request that holds its lines.
+		*
+		* A request row carries everything the header shows, so the template stays
+		* declarative and the list never re-formats a line it already formatted.
+		*/
+		/** Request id every line in the group carries. */
+		/** Clock time of the first line, and its full timestamp for the tooltip. */
+		/** Number of lines in the group. */
+		/** First to last line, as `1.2s`. */
+		/** Most critical level in the group. */
+		/** Log group and stream, when every line in the request shares them. */
+		/** Worst line, trimmed to one short line for the collapsed row. */
+		/** Longest preview kept for a collapsed request, in characters. */
+		const PREVIEW_LENGTH = 160;
+		/** Prefixes a formatted line row with its kind. */
+		function asLine(row) {
+			return {
+				kind: "line",
+				...row
+			};
+		}
+		/** Builds the request header row from the lines it holds. */
+		function requestDisplayRow(row) {
+			const children = row.request.events.map((entry) => lineRows()[entry.index]).filter((child) => child !== void 0);
+			const worstLevel = row.request.level;
+			const first = children[0];
+			return {
+				kind: "request",
+				key: row.key,
+				id: row.request.id,
+				time: first?.time ?? "",
+				timestamp: first?.timestamp ?? "",
+				count: children.length,
+				span: formatSpan(row.request.last - row.request.first),
+				level: worstLevel,
+				levelLabel: LEVEL_LABELS[worstLevel],
+				levelClass: levelColorClass(worstLevel === "unknown" ? null : worstLevel),
+				group: sharedField(children.map((child) => child.group)),
+				streamName: sharedField(children.map((child) => child.streamName)),
+				preview: requestPreview(row.request),
+				children
+			};
+		}
+		/** The value every entry shares, or `null` when they differ. */
+		function sharedField(values) {
+			const first = values[0];
+			if (first === null || first === void 0) return null;
+			return values.every((value) => value === first) ? first : null;
+		}
+		/**
+		* One short line for a collapsed request: its most critical line, because that
+		* is the line that explains why the request is coloured the way it is.
+		*/
+		function requestPreview(request) {
+			const worst = request.events.find((entry) => effectiveLevel(visible()[entry.index] ?? { message: "" }) === request.level) ?? request.events[0];
+			const [firstLine = ""] = (visible()[worst?.index ?? -1]?.message ?? "").split("\n");
+			return firstLine.replace(/\s+/g, " ").trim().slice(0, PREVIEW_LENGTH);
+		}
+		/** Rows the list renders: grouped by request when the preference is on. */
+		let displayRows = derived(() => {
+			if (!groupRequests) return lineRows().map(asLine);
+			const rows = [];
+			for (const row of requestRows(visible())) {
+				if (row.kind === "line") {
+					rows.push(asLine(lineRows()[row.index]));
+					continue;
+				}
+				if (row.request.events.length === 1) {
+					const only = lineRows()[row.request.events[0]?.index ?? -1];
+					if (only !== void 0) rows.push(asLine(only));
+					continue;
+				}
+				rows.push(requestDisplayRow(row));
+			}
+			return rows;
+		});
+		/** True when the list is showing request rows. */
+		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));
@@ -698,6 +809,8 @@ function LogViewer($$renderer, $$props) {
 		let wrapTone = derived(() => "text-neutral-400");
 		/** JSON toggle colour. */
 		let jsonTone = derived(() => "text-sky-300");
+		/** Grouping toggle colour. */
+		let groupTone = derived(() => groupRequests ? "text-sky-300" : "text-neutral-400");
 		/** Rows fill the window when wrapping, and grow to their content otherwise. */
 		let listClass = derived(() => "w-max min-w-full");
 		/** Message cell: wrapped text or a single long line that scrolls sideways. */
@@ -733,7 +846,10 @@ function LogViewer($$renderer, $$props) {
 		$$renderer.push(`<!----> `);
 		if (archived()) $$renderer.push(`<!--[0--><span data-testid="archive-badge"${attr("title", archiveTitle())} class="rounded-full border border-teal-900 bg-teal-950/60 px-2 py-0.5 text-[0.6875rem] font-medium text-teal-300">local archive</span>`);
 		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <span class="text-xs text-neutral-400" data-testid="visible-count">${escape_html(formatCount(visible().length))} shown</span> <span class="text-xs text-neutral-500" data-testid="received-count">${escape_html(formatCount(receivedCount))} received</span> `);
+		$$renderer.push(`<!--]--> <span class="text-xs text-neutral-400" data-testid="visible-count">${escape_html(formatCount(visible().length))} shown</span> `);
+		if (grouped()) $$renderer.push(`<!--[0--><span class="text-xs text-neutral-400" data-testid="request-count">${escape_html(formatCount(requestCount()))} requests</span>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <span class="text-xs text-neutral-500" data-testid="received-count">${escape_html(formatCount(receivedCount))} received</span> `);
 		if (pendingCount > 0) $$renderer.push(`<!--[0--><span class="text-xs text-amber-300" data-testid="pending-count">${escape_html(formatCount(pendingCount))} buffered</span>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
@@ -754,20 +870,18 @@ function LogViewer($$renderer, $$props) {
 			else $$renderer.push("<!--[-1-->");
 			$$renderer.push(`<!--]--></button>`);
 		}
-		$$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", 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> `);
+		$$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(`<!--]--> <div class="min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-950" data-testid="log-scroller">`);
 		if (group === null || group === "") $$renderer.push(`<!--[0--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-idle">Select a log group to start tailing.</p>`);
-		else if (rows().length === 0) $$renderer.push(`<!--[1--><p class="px-3 py-6 text-sm text-neutral-500" data-testid="viewer-empty">${escape_html(emptyText())}</p>`);
+		else 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>`);
 		else {
-			$$renderer.push(`<!--[-1--><div${attr_class(`relative min-h-full ${listClass()}`)} data-testid="log-canvas"><ol class="font-mono text-xs leading-5" data-testid="log-lines"><!--[-->`);
-			const each_array_1 = ensure_array_like(rows());
-			for (let $$index_3 = 0, $$length = each_array_1.length; $$index_3 < $$length; $$index_3++) {
-				let row = each_array_1[$$index_3];
+			$$renderer.push("<!--[-1-->");
+			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 px-3 py-0.5 hover:bg-neutral-900/60 ${listClass()} ${expandable ? "cursor-pointer" : ""}`)} data-testid="log-line"${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" : ""}`)} 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>`);
 				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> `);
@@ -776,9 +890,9 @@ function LogViewer($$renderer, $$props) {
 				$$renderer.push(`<!--]--> <span${attr_class(`${messageClass()} ${stringify(row.levelClass)}`)} data-testid="log-message">`);
 				if (row.tokens !== null) {
 					$$renderer.push(`<!--[0--><!--[-->`);
-					const each_array_2 = ensure_array_like(row.tokens);
-					for (let tokenIndex = 0, $$length = each_array_2.length; tokenIndex < $$length; tokenIndex++) {
-						let token = each_array_2[tokenIndex];
+					const each_array_1 = ensure_array_like(row.tokens);
+					for (let tokenIndex = 0, $$length = each_array_1.length; tokenIndex < $$length; tokenIndex++) {
+						let token = each_array_1[tokenIndex];
 						$$renderer.push(`<span${attr_class(clsx(tokenClass(token.type)))}>${escape_html(token.text)}</span>`);
 					}
 					$$renderer.push(`<!--]-->`);
@@ -786,15 +900,45 @@ function LogViewer($$renderer, $$props) {
 				$$renderer.push(`<!--]--></span> `);
 				if (open && row.expandable !== null) {
 					$$renderer.push(`<!--[0--><span class="w-full whitespace-pre text-xs text-neutral-300" data-testid="log-json-expanded"><!--[-->`);
-					const each_array_3 = ensure_array_like(tokenizeJson(row.expandable));
-					for (let tokenIndex = 0, $$length = each_array_3.length; tokenIndex < $$length; tokenIndex++) {
-						let token = each_array_3[tokenIndex];
+					const each_array_2 = ensure_array_like(tokenizeJson(row.expandable));
+					for (let tokenIndex = 0, $$length = each_array_2.length; tokenIndex < $$length; tokenIndex++) {
+						let token = each_array_2[tokenIndex];
 						$$renderer.push(`<span${attr_class(clsx(tokenClass(token.type)))}>${escape_html(token.text)}</span>`);
 					}
 					$$renderer.push(`<!--]--></span>`);
 				} 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"><!--[-->`);
+			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>`);
+					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>`);
+					else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--></button> `);
+					if (open) {
+						$$renderer.push(`<!--[0--><ul class="contents"><!--[-->`);
+						const each_array_4 = ensure_array_like(row.children);
+						for (let $$index_3 = 0, $$length = each_array_4.length; $$index_3 < $$length; $$index_3++) {
+							let child = each_array_4[$$index_3];
+							logLine($$renderer, child, true);
+						}
+						$$renderer.push(`<!--]--></ul>`);
+					} else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--></li>`);
+				} else {
+					$$renderer.push("<!--[-1-->");
+					logLine($$renderer, row, false);
+				}
+				$$renderer.push(`<!--]-->`);
+			}
 			$$renderer.push(`<!--]--></ol> `);
 			ColumnResizer($$renderer, {
 				label: "Resize prefix column",
@@ -1142,6 +1286,13 @@ function _page($$renderer, $$props) {
 		let selectedGroup = derived(() => selectedGroups[0] ?? null);
 		/** Level filter shared by the log view and the chart. */
 		let levelFilter = null;
+		/**
+		* Group lines by request id, in the log view and in the chart.
+		*
+		* On by default: an incident is read as requests, not as the lines they wrote.
+		* A stored preference wins, so a reader who wants every line keeps every line.
+		*/
+		let groupRequests = true;
 		/** Bucketed counts behind the chart. */
 		let seriesPoints = [];
 		/** True while the archive counts are being fetched. */
@@ -1250,6 +1401,13 @@ function _page($$renderer, $$props) {
 				to: selection.to
 			});
 		}
+		/** Turns request grouping on or off, and remembers the choice. */
+		function toggleGroupRequests() {
+			groupRequests = !groupRequests;
+			try {
+				localStorage?.setItem(STORAGE_KEYS.groupRequests, groupRequests ? "true" : "false");
+			} catch {}
+		}
 		/** Switches region: stops the stream, clears the list and reloads the groups. */
 		function changeRegion(next) {
 			if (next === "" || next === region) return;
@@ -1355,7 +1513,8 @@ function _page($$renderer, $$props) {
 					to,
 					bucketMs: chartBucketMs(from, to),
 					level: levelFilter,
-					fallbackGroup: selectedGroup() ?? ""
+					fallbackGroup: selectedGroup() ?? "",
+					byRequest: groupRequests
 				});
 				return;
 			}
@@ -1366,7 +1525,8 @@ function _page($$renderer, $$props) {
 					groups: selectedGroups,
 					from,
 					to,
-					levels: levelFilter === null ? [] : [levelFilter]
+					levels: levelFilter === null ? [] : [levelFilter],
+					by: groupRequests ? "request" : "event"
 				})).points;
 			} catch {
 				seriesPoints = [];
@@ -1439,6 +1599,7 @@ function _page($$renderer, $$props) {
 			to: chartWindow().to,
 			bucketMs: chartBucketMs(chartWindow().from, chartWindow().to),
 			groups: selectedGroups,
+			byRequest: groupRequests,
 			loading: seriesLoading,
 			onBrush: applyBrush
 		});
@@ -1459,6 +1620,8 @@ function _page($$renderer, $$props) {
 			groups: selectedGroups,
 			level: levelFilter,
 			onLevelChange: (next) => levelFilter = next,
+			groupRequests,
+			onGroupToggle: toggleGroupRequests,
 			filter,
 			paused: stream.paused,
 			autoScroll,
@@ -1475,4 +1638,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte.js-B-kVwiNh.js.map
+//# sourceMappingURL=_page.svelte.js-qqtU0apo.js.map