@datum-cloud/datum-ui 2.5.0 → 2.6.0

package/dist/logs/index.mjs

@@ -1,6 +1,7 @@
 import { t as cn } from "../utils-Bu32wN-x.mjs";
 import { t as Badge } from "../badge-BTNW_FEU.mjs";
 import { t as Button } from "../button-DoMqfQLu.mjs";
+import { t as Icon } from "../icon-wrapper-DKfJlJd0.mjs";
 import { t as Checkbox } from "../checkbox-C6P12fio.mjs";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible/index.mjs";
 import { t as Input } from "../input-j4tbmYYz.mjs";
@@ -8,79 +9,35 @@ import { t as Sheet } from "../sheet-DHn6C_rs.mjs";
 import { t as useBreakpoint } from "../use-breakpoint-CwiUJSmk.mjs";
 import { Skeleton } from "../skeleton/index.mjs";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/index.mjs";
-import { t as DateTimeRangePicker } from "../date-time-range-picker-CQQLACgN.mjs";
-import { t as DateTime } from "../date-time-BmYjT5vd.mjs";
+import { t as DateTimeRangePicker } from "../date-time-range-picker-DlFTh3DF.mjs";
+import { c as getBrowserTimezone, t as DateTime, u as getTimezoneAbbreviation } from "../date-time-lZdefM4H.mjs";
 import { t as useCopyToClipboard } from "../use-copy-to-clipboard-DZDq_85T.mjs";
-import { ChevronDown, ChevronUp, Copy, Download, RefreshCw, Search, SlidersHorizontal, X } from "lucide-react";
-import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChevronDown, ChevronUp, Clock, Copy, Download, Inbox, RefreshCw, Search, SlidersHorizontal, TriangleAlert, X } from "lucide-react";
+import { createContext, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { format } from "date-fns";
-//#region src/components/features/logs/hooks/use-logs.ts
-const LogsContext = createContext(null);
-function useLogs() {
-	const context = use(LogsContext);
-	if (!context) throw new Error("Logs components must be used within <Logs.Root>");
-	return context;
-}
-//#endregion
-//#region src/components/features/logs/utils/parse-log-line.ts
-const ACCESS_LOG_RE = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+(\S+)\s+(\d{3})\s+(\d+)ms\b/i;
-const PATH_TOKEN_RE = /(?:^|\s)(\/\S+)/;
-function parseLogLine(line) {
-	const match = ACCESS_LOG_RE.exec(line);
-	if (!match) return {
-		kind: "text",
-		line
-	};
-	const method = match[1];
-	const path = match[2];
-	const status = match[3];
-	const duration = match[4];
-	if (!method || !path || !status || !duration) return {
-		kind: "text",
-		line
-	};
-	return {
-		kind: "http",
-		method: method.toUpperCase(),
-		path,
-		status: Number(status),
-		durationMs: Number(duration)
-	};
-}
-function logLineDisplay(line) {
-	const parsed = parseLogLine(line);
-	if (parsed.kind === "http") {
-		const match = ACCESS_LOG_RE.exec(line);
-		const rest = match ? line.slice(match[0].length).trim() : "";
-		return {
-			parsed,
-			path: parsed.path,
-			message: extraMessage(rest)
-		};
-	}
-	const path = PATH_TOKEN_RE.exec(line)?.[1] ?? null;
-	if (!path) return {
-		parsed,
-		path: null,
-		message: line
-	};
+import { format, isSameDay } from "date-fns";
+//#region src/components/features/logs/utils/format-timestamp.ts
+function formatLogTimestampParts(date) {
 	return {
-		parsed,
-		path,
-		message: extraMessage(stripOnce(line, path))
+		date: format(date, "MMM dd").toUpperCase(),
+		time: format(date, "HH:mm:ss.SS")
 	};
 }
-/** Drop leftover that is only fields already shown (method, status, path, duration, label=value). */
-function extraMessage(rest) {
-	if (!rest) return "";
-	return rest.split(/\s+/).filter(Boolean).some((token) => !/^[A-Z_]\w*=\S+$/i.test(token)) ? rest : "";
+function formatLogTimestamp(date) {
+	const { date: day, time } = formatLogTimestampParts(date);
+	return `${day} ${time}`;
 }
-function stripOnce(line, token) {
-	const index = line.indexOf(token);
-	if (index === -1) return line;
-	return `${line.slice(0, index)}${line.slice(index + token.length)}`.replace(/\s+/g, " ").trim();
+//#endregion
+//#region src/components/features/logs/utils/host.ts
+/**
+* Host shown for an HTTP access log. An explicit `host` label (set by the
+* host app) wins; otherwise prefer the name the client asked for
+* (`requested_server_name`, `x_forwarded_host`) over the upstream
+* `authority`, then fall back to `resource_name`.
+*/
+function logRequestHost(labels) {
+	return labels.host?.trim() || labels.requested_server_name?.trim() || labels.x_forwarded_host?.trim() || labels.authority?.trim() || labels.resource_name?.trim() || void 0;
 }
 //#endregion
 //#region src/components/features/logs/utils/severity.ts
@@ -117,30 +74,370 @@ function httpStatusTextClass(status) {
 //#endregion
 //#region src/components/features/logs/components/status-badge.tsx
 function LogsSeverityBadge({ severity }) {
+	const unlabeled = !severity;
 	return /* @__PURE__ */ jsx(Badge, {
 		type: severityBadgeType(severity),
-		theme: "light",
-		className: "h-4 px-1.5 py-0 font-mono text-[10px] leading-4 font-medium",
+		theme: unlabeled ? "solid" : "light",
+		className: cn("h-4 px-1.5 py-0 font-mono text-[10px] leading-4 font-medium", unlabeled && "border-border bg-muted text-foreground"),
 		children: severity ?? "LOG"
 	});
 }
+/** Compact HTTP status chip, used inline next to the detail title. */
+function LogsHttpStatusChip({ status, className }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		type: httpStatusBadgeType(status),
+		theme: "light",
+		"data-slot": "logs-http-status",
+		className: cn("h-5 shrink-0 px-1.5 py-0 font-mono text-[11px] leading-5 font-medium tabular-nums", className),
+		children: status
+	});
+}
 function LogsStatusBadge({ parsed }) {
 	if (parsed.kind !== "http") return /* @__PURE__ */ jsx("span", {
 		className: "text-muted-foreground",
 		children: "—"
 	});
 	return /* @__PURE__ */ jsxs("span", {
-		className: "inline-grid grid-cols-[7ch_auto] gap-x-2 font-mono text-[11px] font-medium",
+		className: "inline-flex h-4 items-center gap-1.5 font-mono text-[11px] leading-4 font-medium",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground",
-			children: parsed.method
-		}), /* @__PURE__ */ jsx("span", {
 			className: cn("tabular-nums", httpStatusTextClass(parsed.status)),
 			children: parsed.status
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: parsed.method
 		})]
 	});
 }
 //#endregion
+//#region src/components/features/logs/components/columns.tsx
+const DEFAULT_FIXED_WIDTH = 160;
+/** `MMM dd HH:mm:ss.SS` — e.g. `SEP 10 12:03:37.79`. */
+const TIME_CHS = 18;
+const METHOD_CHS = [
+	3,
+	4,
+	3,
+	4
+];
+const HOST_CHS = [
+	16,
+	22,
+	14,
+	20,
+	18,
+	24
+];
+const PATH_CHS = [
+	12,
+	28,
+	20,
+	40,
+	16,
+	34
+];
+function pick(values, row) {
+	return values[row % values.length];
+}
+function lineSkeleton(widthCh, className) {
+	return /* @__PURE__ */ jsx(Skeleton, {
+		"data-slot": "logs-skeleton",
+		className: cn("inline-block h-4 max-w-full align-middle rounded-sm font-mono text-xs leading-4", className),
+		style: { width: `${widthCh}ch` }
+	});
+}
+const BUILTIN_COLUMNS = {
+	time: {
+		id: "time",
+		header: "Time",
+		size: "hug",
+		cell: ({ entry }) => {
+			const { date, time } = formatLogTimestampParts(entry.timestamp);
+			return /* @__PURE__ */ jsxs("time", {
+				dateTime: entry.timestamp.toISOString(),
+				className: "font-mono text-xs whitespace-nowrap",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: date
+					}),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-foreground",
+						children: time
+					})
+				]
+			});
+		},
+		skeleton: () => lineSkeleton(TIME_CHS)
+	},
+	severity: {
+		id: "severity",
+		header: "Severity",
+		size: "hug",
+		cell: ({ entry }) => /* @__PURE__ */ jsx(LogsSeverityBadge, { severity: entry.labels.severity }),
+		skeleton: () => lineSkeleton(5, "h-4 rounded-md")
+	},
+	status: {
+		id: "status",
+		header: "Status",
+		size: "hug",
+		cell: ({ parsed }) => /* @__PURE__ */ jsx(LogsStatusBadge, { parsed }),
+		skeleton: ({ row }) => /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex h-4 items-center gap-1.5 font-mono text-[11px] leading-4",
+			"data-slot": "logs-skeleton-status",
+			children: [lineSkeleton(3, "h-[11px]"), lineSkeleton(pick(METHOD_CHS, row), "h-[11px]")]
+		})
+	},
+	service: {
+		id: "service",
+		header: "Service",
+		size: "fixed",
+		width: DEFAULT_FIXED_WIDTH,
+		className: "text-muted-foreground truncate font-mono text-xs",
+		cell: ({ entry }) => entry.labels.service_name ?? "—",
+		skeleton: ({ row }) => lineSkeleton(pick(HOST_CHS, row))
+	},
+	resource: {
+		id: "resource",
+		header: "Resource",
+		size: "fixed",
+		width: DEFAULT_FIXED_WIDTH,
+		className: "text-muted-foreground truncate font-mono text-xs",
+		cell: ({ entry }) => {
+			const value = entry.labels.resource_name;
+			return value ? /* @__PURE__ */ jsx("span", {
+				title: value,
+				children: value
+			}) : "—";
+		},
+		skeleton: ({ row }) => lineSkeleton(pick(HOST_CHS, row))
+	},
+	host: {
+		id: "host",
+		header: "Host",
+		size: "fixed",
+		width: DEFAULT_FIXED_WIDTH,
+		className: "text-muted-foreground truncate font-mono text-xs",
+		cell: ({ entry }) => {
+			const value = logRequestHost(entry.labels);
+			return value ? /* @__PURE__ */ jsx("span", {
+				title: value,
+				children: value
+			}) : "—";
+		},
+		skeleton: ({ row }) => lineSkeleton(pick(HOST_CHS, row))
+	},
+	path: {
+		id: "path",
+		header: "Path",
+		size: "fill",
+		className: "truncate font-mono text-xs",
+		cell: ({ path }) => /* @__PURE__ */ jsx("span", {
+			className: path ? void 0 : "text-muted-foreground",
+			title: path ?? void 0,
+			children: path ?? "—"
+		}),
+		skeleton: ({ row }) => lineSkeleton(pick(PATH_CHS, row))
+	},
+	message: {
+		id: "message",
+		header: "Message",
+		size: "fill",
+		className: "truncate font-mono text-xs",
+		cell: ({ message }) => message,
+		skeleton: ({ row }) => lineSkeleton(pick(PATH_CHS, row))
+	}
+};
+const warnedColumnIds = /* @__PURE__ */ new Set();
+/**
+* Expand column specs into renderable columns. Unknown built-in ids are
+* skipped (with a one-time dev warning) so a typo or a stale URL-driven
+* column list degrades to a narrower table instead of a crash.
+*/
+function resolveLogColumns(specs) {
+	const columns = [];
+	for (const spec of specs) {
+		if (typeof spec !== "string") {
+			columns.push({
+				size: "fixed",
+				width: DEFAULT_FIXED_WIDTH,
+				...spec
+			});
+			continue;
+		}
+		const builtin = Object.hasOwn(BUILTIN_COLUMNS, spec) ? BUILTIN_COLUMNS[spec] : void 0;
+		if (builtin) {
+			columns.push(builtin);
+			continue;
+		}
+		if (process.env.NODE_ENV !== "production" && !warnedColumnIds.has(spec)) {
+			warnedColumnIds.add(spec);
+			console.warn(`[datum-ui/logs] Unknown column id "${spec}" was skipped. Built-in ids: ${Object.keys(BUILTIN_COLUMNS).join(", ")}.`);
+		}
+	}
+	return columns;
+}
+function columnSize(column) {
+	return column.size ?? "fixed";
+}
+function columnWidth(column) {
+	return column.width ?? DEFAULT_FIXED_WIDTH;
+}
+function columnHeadClass(column) {
+	switch (columnSize(column)) {
+		case "hug": return "w-px whitespace-nowrap";
+		case "fixed": return "whitespace-nowrap";
+		case "fill": return "min-w-0";
+	}
+}
+function columnCellClass(column) {
+	switch (columnSize(column)) {
+		case "hug": return "w-px whitespace-nowrap";
+		case "fixed": return "truncate";
+		case "fill": return "min-w-0 truncate";
+	}
+}
+function columnWidthStyle(column) {
+	if (columnSize(column) !== "fixed") return void 0;
+	const width = columnWidth(column);
+	return {
+		width,
+		maxWidth: width
+	};
+}
+function columnSkeleton(column, row) {
+	if (column.skeleton) return column.skeleton({ row });
+	switch (columnSize(column)) {
+		case "hug": return lineSkeleton(column.id === "time" ? TIME_CHS : 8);
+		case "fixed": return lineSkeleton(pick(HOST_CHS, row));
+		case "fill": return lineSkeleton(pick(PATH_CHS, row));
+	}
+}
+function columnHeader(column) {
+	return column.header;
+}
+//#endregion
+//#region src/components/features/logs/hooks/use-logs.ts
+const LogsContext = createContext(null);
+function useLogs() {
+	const context = use(LogsContext);
+	if (!context) throw new Error("Logs components must be used within <Logs.Root>");
+	return context;
+}
+function clampLogsDetailWidth(width, maxWidth) {
+	return Math.min(Math.max(Math.round(width), 400), maxWidth > 400 ? maxWidth : 400);
+}
+function logsDetailMaxWidth(node) {
+	const parentWidth = node?.offsetParent instanceof HTMLElement ? node.offsetParent.clientWidth : 0;
+	if (parentWidth > 400) return parentWidth;
+	return typeof window === "undefined" ? 400 : window.innerWidth;
+}
+//#endregion
+//#region src/components/features/logs/utils/parse-log-line.ts
+const ACCESS_LOG_RE = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+(\S+)\s+(\d{3})\s+(\d+)ms\b/i;
+const PATH_TOKEN_RE = /(?:^|\s)(\/\S+)/;
+/**
+* Parse an access-log line, falling back to Envoy/OTEL stream labels when the
+* body is empty (queryapi stores method/path/status as attributes).
+*/
+function parseLogLine(line, labels = {}) {
+	return parseAccessLogText(line) ?? parseAccessLogFields(labels) ?? {
+		kind: "text",
+		line
+	};
+}
+function formatHttpLogLine(parsed) {
+	return `${parsed.method} ${parsed.path} ${parsed.status} ${parsed.durationMs}ms`;
+}
+function parseAccessLogText(line) {
+	const match = ACCESS_LOG_RE.exec(line);
+	if (!match) return null;
+	const method = match[1];
+	const path = match[2];
+	const status = match[3];
+	const duration = match[4];
+	if (!method || !path || !status || !duration) return null;
+	return {
+		kind: "http",
+		method: method.toUpperCase(),
+		path,
+		status: Number(status),
+		durationMs: Number(duration)
+	};
+}
+function parseAccessLogFields(fields) {
+	const method = fields.method?.trim();
+	const path = fields.path?.trim();
+	const status = fields.response_code?.trim() || fields.status?.trim();
+	if (!method || !path || !status || !/^\d{3}$/.test(status)) return null;
+	return {
+		kind: "http",
+		method: method.toUpperCase(),
+		path,
+		status: Number(status),
+		durationMs: parseDurationMs(fields.duration)
+	};
+}
+/** Envoy `%DURATION%` is milliseconds with no unit. */
+function parseDurationMs(raw) {
+	if (!raw) return 0;
+	const n = Number.parseFloat(raw.replace(/ms$/i, "").trim());
+	return Number.isFinite(n) ? Math.max(0, Math.round(n)) : 0;
+}
+/** Separate `/a/b?x=1&y=2` into its pathname and decoded search params. */
+function splitPathQuery(path) {
+	const hashIndex = path.indexOf("#");
+	const withoutHash = hashIndex === -1 ? path : path.slice(0, hashIndex);
+	const queryIndex = withoutHash.indexOf("?");
+	if (queryIndex === -1) return {
+		pathname: withoutHash,
+		search: "",
+		params: []
+	};
+	const pathname = withoutHash.slice(0, queryIndex);
+	const search = withoutHash.slice(queryIndex + 1);
+	const params = [];
+	for (const [key, value] of new URLSearchParams(search)) if (key) params.push([key, value]);
+	return {
+		pathname,
+		search,
+		params
+	};
+}
+function logLineDisplay(line, labels = {}) {
+	const parsed = parseLogLine(line, labels);
+	if (parsed.kind === "http") {
+		const match = ACCESS_LOG_RE.exec(line);
+		const rest = match ? line.slice(match[0].length).trim() : "";
+		return {
+			parsed,
+			path: parsed.path,
+			message: extraMessage(rest)
+		};
+	}
+	const path = labels.path?.trim() || PATH_TOKEN_RE.exec(line)?.[1] || null;
+	if (!path) return {
+		parsed,
+		path: null,
+		message: line
+	};
+	return {
+		parsed,
+		path,
+		message: extraMessage(line ? stripOnce(line, path) : "")
+	};
+}
+/** Drop leftover that is only fields already shown (method, status, path, duration, label=value). */
+function extraMessage(rest) {
+	if (!rest) return "";
+	return rest.split(/\s+/).filter(Boolean).some((token) => !/^[A-Z_]\w*=\S+$/i.test(token)) ? rest : "";
+}
+function stripOnce(line, token) {
+	const index = line.indexOf(token);
+	if (index === -1) return line;
+	return `${line.slice(0, index)}${line.slice(index + token.length)}`.replace(/\s+/g, " ").trim();
+}
+//#endregion
 //#region src/components/features/logs/components/detail.tsx
 function MetaCell({ label, children, className }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -154,77 +451,109 @@ function MetaCell({ label, children, className }) {
 		})]
 	});
 }
-function DetailBody({ showClose = true }) {
+/** Stable React keys for search params, which may repeat `key=value` verbatim. */
+function keyedParams(params) {
+	const seen = /* @__PURE__ */ new Map();
+	return params.map(([key, value]) => {
+		const pair = `${key}=${value}`;
+		const count = seen.get(pair) ?? 0;
+		seen.set(pair, count + 1);
+		return {
+			id: count === 0 ? pair : `${pair}#${count}`,
+			key,
+			value
+		};
+	});
+}
+const DetailBody = memo(({ showClose = true }) => {
 	const { selectedEntry, selectPrevious, selectNext, setSelectedId } = useLogs();
 	const [, copy] = useCopyToClipboard();
 	if (!selectedEntry) return null;
-	const parsed = parseLogLine(selectedEntry.line);
-	const title = parsed.kind === "http" ? `${parsed.method} ${parsed.path}` : selectedEntry.labels.service_name ?? "Log";
-	const service = selectedEntry.labels.service_name;
+	const parsed = parseLogLine(selectedEntry.line, selectedEntry.labels);
+	const displayLine = parsed.kind === "http" && !selectedEntry.line.trim() ? formatHttpLogLine(parsed) : selectedEntry.line;
+	const request = splitPathQuery(parsed.kind === "http" ? parsed.path : "");
+	const title = parsed.kind === "http" ? `${parsed.method} ${request.pathname}` : selectedEntry.labels.service_name ?? "Log";
+	const service = selectedEntry.labels.service_name ?? logRequestHost(selectedEntry.labels);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", {
-		className: "flex items-start gap-2 border-b px-4 py-3",
+		className: "border-b px-4 py-3",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
+			className: "flex items-center gap-2",
 			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "mb-1.5",
-					children: /* @__PURE__ */ jsx(LogsSeverityBadge, { severity: selectedEntry.labels.severity })
-				}),
 				/* @__PURE__ */ jsx("h3", {
-					className: "truncate font-mono text-sm font-medium",
+					className: "min-w-0 flex-1 truncate font-mono text-sm font-medium",
+					title,
 					children: title
 				}),
+				parsed.kind === "http" ? /* @__PURE__ */ jsx(LogsHttpStatusChip, { status: parsed.status }) : /* @__PURE__ */ jsx(LogsSeverityBadge, { severity: selectedEntry.labels.severity }),
 				/* @__PURE__ */ jsxs("div", {
-					className: "text-muted-foreground mt-1 flex min-w-0 items-center gap-1.5 text-xs",
-					children: [service && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate font-mono",
-						children: service
-					}), /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						children: "·"
-					})] }), /* @__PURE__ */ jsx(DateTime, {
-						date: selectedEntry.timestamp,
-						timestamp: selectedEntry.timestampNs,
-						variant: "relative",
-						tooltip: "detailed",
-						className: "text-muted-foreground text-xs"
-					})]
+					className: "-my-1 flex shrink-0 items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							type: "secondary",
+							theme: "borderless",
+							size: "icon",
+							"aria-label": "Previous log",
+							onClick: selectPrevious,
+							children: /* @__PURE__ */ jsx(Icon, { icon: ChevronUp })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "secondary",
+							theme: "borderless",
+							size: "icon",
+							"aria-label": "Next log",
+							onClick: selectNext,
+							children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "secondary",
+							theme: "borderless",
+							size: "icon",
+							"aria-label": "Copy log line",
+							onClick: () => copy(displayLine, { withToast: true }),
+							children: /* @__PURE__ */ jsx(Icon, { icon: Copy })
+						}),
+						showClose && /* @__PURE__ */ jsx(Button, {
+							type: "secondary",
+							theme: "borderless",
+							size: "icon",
+							"aria-label": "Close details",
+							onClick: () => setSelectedId(null),
+							children: /* @__PURE__ */ jsx(Icon, { icon: X })
+						})
+					]
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center gap-1",
+			className: "text-muted-foreground mt-1 flex min-w-0 flex-nowrap items-center gap-1.5 text-xs",
 			children: [
-				/* @__PURE__ */ jsx(Button, {
-					type: "secondary",
-					theme: "borderless",
-					size: "icon",
-					"aria-label": "Previous log",
-					onClick: selectPrevious,
-					children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					type: "secondary",
-					theme: "borderless",
-					size: "icon",
-					"aria-label": "Next log",
-					onClick: selectNext,
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					type: "secondary",
-					theme: "borderless",
-					size: "icon",
-					"aria-label": "Copy log line",
-					onClick: () => copy(selectedEntry.line, { withToast: true }),
-					children: /* @__PURE__ */ jsx(Copy, { className: "size-4" })
-				}),
-				showClose && /* @__PURE__ */ jsx(Button, {
-					type: "secondary",
-					theme: "borderless",
-					size: "icon",
-					"aria-label": "Close details",
-					onClick: () => setSelectedId(null),
-					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				parsed.kind === "http" && selectedEntry.labels.severity && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LogsSeverityBadge, { severity: selectedEntry.labels.severity }), /* @__PURE__ */ jsx("span", {
+					className: "shrink-0",
+					"aria-hidden": "true",
+					children: "·"
+				})] }),
+				service && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-mono",
+					children: service
+				}), /* @__PURE__ */ jsx("span", {
+					className: "shrink-0",
+					"aria-hidden": "true",
+					children: "·"
+				})] }),
+				/* @__PURE__ */ jsx(DateTime, {
+					date: selectedEntry.timestamp,
+					timestamp: selectedEntry.timestampNs,
+					variant: "absolute",
+					tooltip: "detailed",
+					children: /* @__PURE__ */ jsxs("time", {
+						dateTime: selectedEntry.timestamp.toISOString(),
+						"data-slot": "logs-detail-time",
+						className: "shrink-0 cursor-default font-mono whitespace-nowrap tabular-nums",
+						children: [
+							formatLogTimestamp(selectedEntry.timestamp),
+							" ",
+							getTimezoneAbbreviation(selectedEntry.timestamp, getBrowserTimezone())
+						]
+					})
 				})
 			]
 		})]
@@ -236,7 +565,7 @@ function DetailBody({ showClose = true }) {
 				children: "Message"
 			}), /* @__PURE__ */ jsx("pre", {
 				className: "bg-muted text-foreground overflow-x-auto rounded-md border p-3 font-mono text-xs leading-5 whitespace-pre-wrap break-all",
-				children: selectedEntry.line
+				children: displayLine
 			})] }),
 			parsed.kind === "http" && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", {
 				className: "text-muted-foreground mb-2 text-xs font-medium",
@@ -262,7 +591,42 @@ function DetailBody({ showClose = true }) {
 					/* @__PURE__ */ jsx(MetaCell, {
 						label: "Path",
 						className: "col-span-3",
-						children: parsed.path
+						children: request.pathname
+					}),
+					request.params.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "bg-background col-span-3 min-w-0 px-3 py-2.5",
+						"data-slot": "logs-search-params",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "mb-1.5 flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-[11px] font-medium",
+								children: "Search params"
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "secondary",
+								theme: "borderless",
+								size: "icon",
+								className: "-my-1 size-6",
+								"aria-label": "Copy search params",
+								onClick: () => copy(`?${request.search}`, { withToast: true }),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: Copy,
+									size: 14
+								})
+							})]
+						}), /* @__PURE__ */ jsx("dl", {
+							className: "flex flex-wrap gap-1.5",
+							children: keyedParams(request.params).map(({ id, key, value }) => /* @__PURE__ */ jsxs("div", {
+								className: "bg-muted/60 inline-flex max-w-full items-stretch overflow-hidden rounded-md border font-mono text-xs",
+								children: [/* @__PURE__ */ jsx("dt", {
+									className: "text-muted-foreground border-r px-2 py-1",
+									children: key
+								}), /* @__PURE__ */ jsx("dd", {
+									className: "min-w-0 truncate px-2 py-1",
+									title: value,
+									children: value || "—"
+								})]
+							}, id))
+						})]
 					})
 				]
 			})] }),
@@ -284,6 +648,59 @@ function DetailBody({ showClose = true }) {
 			})] })
 		]
 	})] });
+});
+function LogsDetailResizeHandle({ width, onWidthChange, panelRef }) {
+	const dragRef = useRef(null);
+	const [maxWidth, setMaxWidth] = useState(() => logsDetailMaxWidth(null));
+	const onPointerDown = useCallback((event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		const max = logsDetailMaxWidth(panelRef.current);
+		setMaxWidth(max);
+		dragRef.current = {
+			startX: event.clientX,
+			startWidth: width,
+			maxWidth: max
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+	}, [panelRef, width]);
+	const onPointerMove = useCallback((event) => {
+		const drag = dragRef.current;
+		if (!drag) return;
+		onWidthChange(clampLogsDetailWidth(drag.startWidth + (drag.startX - event.clientX), drag.maxWidth));
+	}, [onWidthChange]);
+	const onPointerUp = useCallback((event) => {
+		dragRef.current = null;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": "Resize details",
+		"aria-valuemin": 400,
+		"aria-valuemax": maxWidth,
+		"aria-valuenow": width,
+		"data-slot": "logs-detail-resize",
+		tabIndex: 0,
+		className: cn("absolute inset-y-0 left-0 z-10 w-3 -translate-x-1/2 cursor-ew-resize", "after:bg-transparent hover:after:bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2"),
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp,
+		onKeyDown: (event) => {
+			const step = event.shiftKey ? 40 : 16;
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+				event.preventDefault();
+				const max = logsDetailMaxWidth(panelRef.current);
+				setMaxWidth(max);
+				onWidthChange(clampLogsDetailWidth(width + (event.key === "ArrowLeft" ? step : -step), max));
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				onWidthChange(400);
+			}
+		}
+	});
 }
 function LogsDetail({ className }) {
 	const { selectedEntry, setSelectedId } = useLogs();
@@ -291,6 +708,8 @@ function LogsDetail({ className }) {
 	const reduceMotion = useReducedMotion();
 	const isDesktop = breakpoint === "desktop";
 	const open = selectedEntry !== null;
+	const panelRef = useRef(null);
+	const [width, setWidth] = useState(400);
 	if (!isDesktop) return /* @__PURE__ */ jsx(Sheet, {
 		open,
 		onOpenChange: (next) => {
@@ -317,23 +736,101 @@ function LogsDetail({ className }) {
 			]
 		})
 	});
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(motion.aside, {
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(motion.aside, {
+		ref: panelRef,
 		"data-slot": "logs-detail",
-		initial: reduceMotion ? false : { width: 0 },
-		animate: { width: 400 },
-		exit: { width: 0 },
+		initial: reduceMotion ? false : { x: "100%" },
+		animate: { x: 0 },
+		exit: { x: "100%" },
 		transition: reduceMotion ? { duration: 0 } : {
 			duration: .2,
 			ease: "easeOut"
 		},
-		className: cn("bg-background flex h-full shrink-0 flex-col overflow-hidden border-l", className),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex h-full w-[400px] flex-col",
-			children: /* @__PURE__ */ jsx(DetailBody, {})
-		})
+		style: { width },
+		className: cn("bg-background absolute inset-y-0 right-0 z-20 flex h-full flex-col overflow-hidden border-l shadow-lg", className),
+		children: [/* @__PURE__ */ jsx(LogsDetailResizeHandle, {
+			width,
+			onWidthChange: setWidth,
+			panelRef
+		}), /* @__PURE__ */ jsx(DetailBody, {})]
 	}) });
 }
 //#endregion
+//#region src/components/features/logs/utils/time-range.ts
+const MINUTE_MS$1 = 6e4;
+const HOUR_MS = 60 * MINUTE_MS$1;
+const DAY_MS$1 = 24 * HOUR_MS;
+function relativePreset(key, label, durationMs, shortcut) {
+	return {
+		key,
+		label,
+		shortcut,
+		getRange: () => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: new Date(now.getTime() - durationMs),
+				to: now
+			};
+		}
+	};
+}
+/**
+* Relative "Last N" windows offered by `Logs.Filters`. Keys are persisted on
+* `LogTimeRange.preset` so hosts can slide the window forward with
+* `resolveLogTimeRange` on refresh or while live tailing.
+*
+* Shortcuts follow the `picker` datetime presets (`1` / `2` / `H` / `W`) that
+* the logs picker is built on. Keys that mean something else in the pickers
+* (`3` is "Last 30 minutes" in `time-range-picker`, `D` is "Today") are not
+* reused, so muscle memory carries over between the two.
+*/
+const LOG_TIME_PRESETS = [
+	relativePreset("last-15m", "Last 15 minutes", 15 * MINUTE_MS$1, "1"),
+	relativePreset("last-30m", "Last 30 minutes", 30 * MINUTE_MS$1, "2"),
+	relativePreset("last-1h", "Last hour", HOUR_MS, "H"),
+	relativePreset("last-3h", "Last 3 hours", 3 * HOUR_MS),
+	relativePreset("last-6h", "Last 6 hours", 6 * HOUR_MS, "6"),
+	relativePreset("last-12h", "Last 12 hours", 12 * HOUR_MS),
+	relativePreset("last-24h", "Last 24 hours", DAY_MS$1),
+	relativePreset("last-7d", "Last 7 days", 7 * DAY_MS$1, "W")
+];
+function lastThirtyMinutes(now = /* @__PURE__ */ new Date()) {
+	return {
+		from: (/* @__PURE__ */ new Date(now.getTime() - 30 * MINUTE_MS$1)).toISOString(),
+		to: now.toISOString(),
+		preset: "last-30m"
+	};
+}
+/**
+* Re-anchor a preset range to `now`. Absolute ranges (no `preset`, or an
+* unknown key) are returned unchanged.
+*/
+function resolveLogTimeRange(range, now = /* @__PURE__ */ new Date()) {
+	if (!range.preset) return range;
+	const preset = LOG_TIME_PRESETS.find((item) => item.key === range.preset);
+	if (!preset) return range;
+	const { from, to } = preset.getRange("UTC");
+	const shift = now.getTime() - to.getTime();
+	return {
+		from: new Date(from.getTime() + shift).toISOString(),
+		to: now.toISOString(),
+		preset: range.preset
+	};
+}
+/** Human label for the time-range trigger: preset name, or a compact absolute range. */
+function logTimeRangeLabel(range) {
+	const preset = range.preset ? LOG_TIME_PRESETS.find((item) => item.key === range.preset) : void 0;
+	if (preset) return preset.label;
+	const from = new Date(range.from);
+	const to = new Date(range.to);
+	if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) return "Select range";
+	if (isSameDay(from, to)) return `${format(from, "MMM d, HH:mm")} – ${format(to, "HH:mm")}`;
+	return `${format(from, "MMM d, HH:mm")} – ${format(to, "MMM d, HH:mm")}`;
+}
+function filtersAreActive(filters) {
+	return Object.values(filters).some((values) => values.length > 0);
+}
+//#endregion
 //#region src/components/features/logs/components/filters.tsx
 function LogsFilterGroup({ facet, defaultOpen }) {
 	const { filters, toggleFilterValue } = useLogs();
@@ -343,7 +840,10 @@ function LogsFilterGroup({ facet, defaultOpen }) {
 		className: "border-b border-border",
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
 			className: "hover:bg-muted/40 flex w-full items-center justify-between px-3 py-2 text-left text-sm font-medium",
-			children: [facet.label, /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground size-4 transition-transform [[data-state=open]_&]:rotate-180" })]
+			children: [facet.label, /* @__PURE__ */ jsx(Icon, {
+				icon: ChevronDown,
+				className: "text-muted-foreground transition-transform [[data-state=open]_&]:rotate-180"
+			})]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-1 px-3 pb-3",
 			children: facet.options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
@@ -367,6 +867,9 @@ function LogsFilterGroup({ facet, defaultOpen }) {
 		}) })]
 	});
 }
+function isLogTimeRange(value) {
+	return typeof value === "object" && value !== null && typeof value.from === "string" && typeof value.to === "string";
+}
 function LogsTimeRangeFilter({ className }) {
 	const { timeRange, setTimeRange } = useLogs();
 	return /* @__PURE__ */ jsxs("div", {
@@ -377,23 +880,83 @@ function LogsTimeRangeFilter({ className }) {
 		}), /* @__PURE__ */ jsx(DateTimeRangePicker, {
 			value: timeRange,
 			onChange: (next) => {
-				if (next) setTimeRange({
+				if (!next) return;
+				const preset = next.preset;
+				setTimeRange(preset ? {
+					from: next.from,
+					to: next.to,
+					preset
+				} : {
 					from: next.from,
 					to: next.to
 				});
 			},
+			presets: LOG_TIME_PRESETS,
+			triggerLabel: (value) => isLogTimeRange(value) ? logTimeRangeLabel(value) : "Select range",
+			icon: /* @__PURE__ */ jsx(Icon, {
+				icon: Clock,
+				className: "text-muted-foreground shrink-0"
+			}),
 			placeholder: "Select range",
+			clearable: false,
 			disableFuture: true,
 			hideTimezone: true,
 			numberOfMonths: 1,
 			className: "w-full",
 			triggerClassName: "w-full justify-start text-xs",
+			popoverClassName: "w-auto",
 			sheetTitle: "Select time range"
 		})]
 	});
 }
+const FILTER_LABEL_CHS = [
+	6,
+	11,
+	4
+];
+const FILTER_VALUE_CHS = [
+	3,
+	8,
+	14,
+	6,
+	20,
+	11,
+	4,
+	16
+];
+function LogsFiltersSkeleton() {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "logs-filters-skeleton",
+		className: "flex flex-col",
+		"aria-hidden": true,
+		children: Array.from({ length: 3 }, (_, group) => /* @__PURE__ */ jsxs("div", {
+			className: "border-b border-border",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center justify-between px-3 py-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					className: "h-[21px] rounded-sm font-medium",
+					style: { width: `${FILTER_LABEL_CHS[group] ?? 8}ch` }
+				}), /* @__PURE__ */ jsx(Skeleton, { className: "size-4 shrink-0 rounded-sm" })]
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1 px-3 pb-3",
+				children: Array.from({ length: 4 }, (_, row) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-2 px-1 py-1",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "size-4 shrink-0 rounded-[4px]" }),
+						/* @__PURE__ */ jsx(Skeleton, {
+							className: "h-4 max-w-full rounded-sm font-mono text-xs leading-4",
+							style: { width: `${FILTER_VALUE_CHS[(group * 4 + row) % FILTER_VALUE_CHS.length]}ch` }
+						}),
+						/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-4 w-[2ch] rounded-sm" })
+					]
+				}, row))
+			})]
+		}, group))
+	});
+}
 function LogsFilters({ className }) {
-	const { facets, hasActiveFilters, resetFilters } = useLogs();
+	const { facets, hasActiveFilters, resetFilters, isLoading } = useLogs();
+	const showFacetSkeleton = isLoading && facets.length === 0;
 	return /* @__PURE__ */ jsxs("aside", {
 		"data-slot": "logs-filters",
 		className: cn("bg-background flex h-full min-h-0 w-64 shrink-0 flex-col border-r", className),
@@ -411,7 +974,7 @@ function LogsFilters({ className }) {
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-h-0 flex-1 overflow-y-auto",
-			children: [/* @__PURE__ */ jsx(LogsTimeRangeFilter, {}), facets.map((facet, index) => /* @__PURE__ */ jsx(LogsFilterGroup, {
+			children: [/* @__PURE__ */ jsx(LogsTimeRangeFilter, {}), showFacetSkeleton ? /* @__PURE__ */ jsx(LogsFiltersSkeleton, {}) : facets.map((facet, index) => /* @__PURE__ */ jsx(LogsFilterGroup, {
 				facet,
 				defaultOpen: index === 0
 			}, facet.name))]
@@ -419,61 +982,78 @@ function LogsFilters({ className }) {
 	});
 }
 //#endregion
-//#region src/components/features/logs/utils/format-timestamp.ts
-function formatLogTimestamp(date) {
-	return format(date, "MMM dd HH:mm:ss.SS").toUpperCase();
-}
-//#endregion
 //#region src/components/features/logs/components/table.tsx
-const COLUMN_LABEL = {
-	time: "Time",
-	severity: "Severity",
-	status: "Status",
-	service: "Service",
-	resource: "Resource",
-	path: "Path",
-	message: "Message"
-};
-const COLUMN_HEAD_CLASS = {
-	time: "w-[168px]",
-	severity: "w-[88px]",
-	status: "w-[110px]",
-	service: "w-[160px]",
-	resource: "w-[160px]",
-	path: "w-[200px]",
-	message: ""
-};
-function LogCell({ column, entry, parsed, path, message }) {
-	switch (column) {
-		case "time": return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("time", {
-			dateTime: entry.timestamp.toISOString(),
-			className: "text-muted-foreground font-mono text-xs whitespace-nowrap",
-			children: formatLogTimestamp(entry.timestamp)
-		}) });
-		case "severity": return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(LogsSeverityBadge, { severity: entry.labels.severity }) });
-		case "status": return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(LogsStatusBadge, { parsed }) });
-		case "service": return /* @__PURE__ */ jsx(TableCell, {
-			className: "text-muted-foreground truncate font-mono text-xs",
-			children: entry.labels.service_name ?? "—"
-		});
-		case "resource": return /* @__PURE__ */ jsx(TableCell, {
-			className: "text-muted-foreground truncate font-mono text-xs",
-			children: entry.labels.resource_name ?? "—"
-		});
-		case "path": return /* @__PURE__ */ jsx(TableCell, {
-			className: cn("truncate font-mono text-xs", !path && "text-muted-foreground"),
-			title: path ?? void 0,
-			children: path ?? "—"
-		});
-		case "message": return /* @__PURE__ */ jsx(TableCell, {
-			className: "truncate font-mono text-xs",
-			children: message
-		});
-	}
+const SKELETON_ROWS = 12;
+/** Centred message row shared by the empty and error states. */
+function LogsTableState({ icon, title, description, action, colSpan, slot, role, tone = "muted" }) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan,
+			className: "pt-20 pb-12 text-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				role,
+				"data-slot": slot,
+				className: "mx-auto flex max-w-md flex-col items-center gap-2 px-4",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("flex size-9 items-center justify-center rounded-full border", tone === "destructive" ? "border-destructive/20 bg-destructive/10 text-destructive" : "border-border bg-muted text-muted-foreground"),
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-foreground text-sm font-medium",
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: description
+					}),
+					action && /* @__PURE__ */ jsx("div", {
+						className: "mt-1.5",
+						children: action
+					})
+				]
+			})
+		})
+	});
+}
+function LogCell({ column, children }) {
+	return /* @__PURE__ */ jsx(TableCell, {
+		className: cn(columnCellClass(column), column.className),
+		style: columnWidthStyle(column),
+		children
+	});
 }
 function LogsTable({ className }) {
-	const { entries, columns, selectedId, setSelectedId, isLoading, error, selectPrevious, selectNext } = useLogs();
+	const { entries, columns, selectedId, setSelectedId, isLoading, error, selectPrevious, selectNext, onRefresh, hasActiveFilters, resetFilters, search, setSearch } = useLogs();
 	const scrollerRef = useRef(null);
+	const rows = useMemo(() => entries.map((entry) => {
+		const { parsed, path, message } = logLineDisplay(entry.line, entry.labels);
+		return {
+			entry,
+			ctx: {
+				entry,
+				parsed,
+				path,
+				message
+			}
+		};
+	}), [entries]);
+	const hasRows = entries.length > 0;
+	const showError = Boolean(error) && !hasRows;
+	const showErrorBanner = Boolean(error) && hasRows;
+	const showSkeleton = isLoading && !hasRows && !error;
+	const showEmpty = !isLoading && !hasRows && !error;
+	const retry = onRefresh && /* @__PURE__ */ jsxs(Button, {
+		type: "secondary",
+		theme: "outline",
+		size: "small",
+		onClick: onRefresh,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: RefreshCw,
+			size: 14
+		}), "Retry"]
+	});
 	function onKeyDown(event) {
 		if (event.key === "ArrowDown" || event.key === "j") {
 			event.preventDefault();
@@ -492,52 +1072,233 @@ function LogsTable({ className }) {
 		tabIndex: 0,
 		"aria-busy": isLoading || void 0,
 		onKeyDown,
-		children: [error && /* @__PURE__ */ jsx("div", {
+		children: [showErrorBanner && /* @__PURE__ */ jsxs("div", {
 			role: "alert",
-			className: "text-destructive px-4 py-3 text-sm",
-			children: error
+			"data-slot": "logs-error-banner",
+			className: "border-destructive/30 bg-destructive/5 text-foreground sticky top-0 z-20 flex items-center gap-2 border-b px-3 py-1.5 text-xs",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: TriangleAlert,
+					size: 14,
+					className: "text-destructive shrink-0"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 truncate",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: "Refresh failed."
+						}),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "Showing the last successful result."
+						}),
+						" ",
+						/* @__PURE__ */ jsx("code", {
+							className: "font-mono",
+							children: error
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ml-auto shrink-0",
+					children: retry
+				})
+			]
 		}), /* @__PURE__ */ jsxs("table", {
-			className: "w-full caption-bottom table-fixed text-sm",
+			className: "w-full caption-bottom table-auto text-sm [&_th]:px-3 [&_th]:py-2 [&_td]:px-3 [&_td]:py-1.5",
 			children: [/* @__PURE__ */ jsx(TableHeader, {
 				className: "bg-background sticky top-0 z-10",
 				children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
-					className: COLUMN_HEAD_CLASS[column],
-					children: COLUMN_LABEL[column]
-				}, column)) })
+					className: cn(columnHeadClass(column), column.headerClassName),
+					style: columnWidthStyle(column),
+					children: columnHeader(column)
+				}, column.id)) })
 			}), /* @__PURE__ */ jsxs(TableBody, { children: [
-				isLoading && entries.length === 0 && Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				showSkeleton && Array.from({ length: SKELETON_ROWS }, (_, index) => /* @__PURE__ */ jsx(TableRow, {
+					"data-slot": "logs-skeleton-row",
+					children: columns.map((column) => /* @__PURE__ */ jsx(LogCell, {
+						column,
+						children: columnSkeleton(column, index)
+					}, column.id))
+				}, `skeleton-${index}`)),
+				showError && /* @__PURE__ */ jsx(LogsTableState, {
+					role: "alert",
+					slot: "logs-error",
+					tone: "destructive",
 					colSpan: columns.length,
-					children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
-				}) }, `skeleton-${index}`)),
-				!isLoading && entries.length === 0 && !error && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					icon: /* @__PURE__ */ jsx(Icon, { icon: TriangleAlert }),
+					title: "Couldn't load logs",
+					description: /* @__PURE__ */ jsx("code", {
+						className: "bg-muted text-foreground inline-block max-w-full rounded-md border px-2 py-1 text-left font-mono text-[11px] leading-4 break-all",
+						children: error
+					}),
+					action: retry
+				}),
+				showEmpty && /* @__PURE__ */ jsx(LogsTableState, {
+					slot: "logs-empty",
 					colSpan: columns.length,
-					className: "text-muted-foreground py-10 text-center text-sm",
-					children: "No logs in this time range"
-				}) }),
-				entries.map((entry) => {
-					const { parsed, path, message } = logLineDisplay(entry.line);
+					icon: /* @__PURE__ */ jsx(Icon, { icon: Inbox }),
+					title: "No logs in this time range",
+					description: hasActiveFilters || search ? "Try widening the range or clearing the filters." : "Try widening the range or check back in a moment.",
+					action: (hasActiveFilters || search) && /* @__PURE__ */ jsx(Button, {
+						type: "secondary",
+						theme: "outline",
+						size: "small",
+						onClick: () => {
+							resetFilters();
+							setSearch("");
+						},
+						children: "Clear filters"
+					})
+				}),
+				rows.map(({ entry, ctx }) => {
 					const selected = entry.id === selectedId;
 					return /* @__PURE__ */ jsx(TableRow, {
 						"data-state": selected ? "selected" : void 0,
 						"aria-selected": selected,
-						className: cn("cursor-pointer hover:bg-foreground/[0.08]", "data-[state=selected]:bg-foreground/[0.14]", "data-[state=selected]:hover:bg-foreground/[0.14]"),
+						className: cn("cursor-pointer hover:bg-foreground/5", "data-[state=selected]:bg-foreground/10", "data-[state=selected]:hover:bg-foreground/10"),
 						onClick: () => {
 							setSelectedId(selected ? null : entry.id);
 							scrollerRef.current?.focus();
 						},
 						children: columns.map((column) => /* @__PURE__ */ jsx(LogCell, {
 							column,
-							entry,
-							parsed,
-							path,
-							message
-						}, column))
+							children: column.cell(ctx)
+						}, column.id))
 					}, entry.id);
 				})
 			] })]
 		})]
 	});
 }
+const MINUTE_MS = 6e4;
+const DAY_MS = 24 * (60 * MINUTE_MS);
+/**
+* Bucket `entries` into `bucketCount` equal-width bars across `range`.
+* Entries outside the range are ignored. Returns `[]` when the range is
+* invalid or empty so the timeline can fall back to an axis-only state.
+*/
+function histogramFromEntries(entries, range, bucketCount = 60) {
+	const from = new Date(range.from).getTime();
+	const to = new Date(range.to).getTime();
+	if (Number.isNaN(from) || Number.isNaN(to) || to <= from || bucketCount < 1) return [];
+	const width = (to - from) / bucketCount;
+	const counts = Array.from({ length: bucketCount }).fill(0);
+	for (const entry of entries) {
+		const at = entry.timestamp.getTime();
+		if (at < from || at > to) continue;
+		const index = Math.min(Math.floor((at - from) / width), bucketCount - 1);
+		counts[index] += 1;
+	}
+	return counts.map((count, index) => ({
+		start: new Date(from + index * width).toISOString(),
+		end: new Date(index === bucketCount - 1 ? to : from + (index + 1) * width).toISOString(),
+		count
+	}));
+}
+/** Index of the bucket containing `date`, or `-1`. */
+function histogramBucketIndex(histogram, date) {
+	const at = date.getTime();
+	const last = histogram.length - 1;
+	return histogram.findIndex((bucket, index) => {
+		const start = new Date(bucket.start).getTime();
+		const end = new Date(bucket.end).getTime();
+		return at >= start && (at < end || index === last && at === end);
+	});
+}
+/** Total span covered by a histogram, in ms. `0` when empty. */
+function histogramSpanMs(histogram) {
+	const first = histogram[0];
+	const last = histogram[histogram.length - 1];
+	if (!first || !last) return 0;
+	return new Date(last.end).getTime() - new Date(first.start).getTime();
+}
+/** Axis tick label whose precision follows the span being displayed. */
+function formatTimelineTick(date, spanMs) {
+	if (spanMs <= 2 * MINUTE_MS) return format(date, "HH:mm:ss");
+	if (spanMs < DAY_MS) return format(date, "HH:mm");
+	return format(date, "MMM d HH:mm");
+}
+/** Tooltip text for a bucket: count plus its window. */
+function formatBucketSummary(bucket, spanMs) {
+	const start = new Date(bucket.start);
+	const end = new Date(bucket.end);
+	const tickSpan = end.getTime() - start.getTime() < MINUTE_MS ? MINUTE_MS : spanMs;
+	const noun = bucket.count === 1 ? "log" : "logs";
+	return `${bucket.count} ${noun} · ${formatTimelineTick(start, tickSpan)} – ${formatTimelineTick(end, tickSpan)}`;
+}
+//#endregion
+//#region src/components/features/logs/components/timeline.tsx
+const SKELETON_HEIGHTS = [
+	18,
+	34,
+	22,
+	48,
+	30,
+	60,
+	26,
+	40,
+	20,
+	52,
+	36,
+	28
+];
+function TimelineSkeleton() {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "logs-timeline-skeleton",
+		className: "flex h-10 items-end gap-px",
+		"aria-hidden": true,
+		children: Array.from({ length: 60 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+			className: "min-w-0 flex-1 rounded-[1px]",
+			style: { height: `${SKELETON_HEIGHTS[index % SKELETON_HEIGHTS.length]}%` }
+		}, index))
+	});
+}
+function LogsTimeline({ className }) {
+	const { histogram, isLoading, selectedEntry, timeRange } = useLogs();
+	const spanMs = histogramSpanMs(histogram);
+	const max = useMemo(() => histogram.reduce((peak, bucket) => Math.max(peak, bucket.count), 0), [histogram]);
+	const total = useMemo(() => histogram.reduce((sum, bucket) => sum + bucket.count, 0), [histogram]);
+	const selectedIndex = selectedEntry ? histogramBucketIndex(histogram, selectedEntry.timestamp) : -1;
+	const titles = useMemo(() => histogram.map((bucket) => formatBucketSummary(bucket, spanMs)), [histogram, spanMs]);
+	const from = histogram[0] ? new Date(histogram[0].start) : new Date(timeRange.from);
+	const to = histogram.length > 0 ? new Date(histogram[histogram.length - 1].end) : new Date(timeRange.to);
+	const axisSpan = spanMs > 0 ? spanMs : to.getTime() - from.getTime();
+	const mid = /* @__PURE__ */ new Date((from.getTime() + to.getTime()) / 2);
+	const showSkeleton = isLoading && histogram.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "logs-timeline",
+		className: cn("border-b px-3 pt-2 pb-1", className),
+		children: [showSkeleton ? /* @__PURE__ */ jsx(TimelineSkeleton, {}) : /* @__PURE__ */ jsx("div", {
+			role: "img",
+			"aria-label": `${total} logs between ${formatTimelineTick(from, axisSpan)} and ${formatTimelineTick(to, axisSpan)}`,
+			className: "flex h-10 items-end gap-px",
+			children: histogram.map((bucket, index) => {
+				const height = max > 0 ? bucket.count / max * 100 : 0;
+				const selected = index === selectedIndex;
+				return /* @__PURE__ */ jsx("div", {
+					title: titles[index],
+					"data-slot": "logs-timeline-bucket",
+					"data-selected": selected || void 0,
+					className: "relative flex h-full min-w-0 flex-1 items-end",
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("w-full rounded-[1px] transition-colors", bucket.count > 0 ? "bg-foreground/30 hover:bg-foreground/50" : "bg-foreground/[0.06]", selected && "bg-primary hover:bg-primary"),
+						style: { height: bucket.count > 0 ? `max(${height}%, 2px)` : "1px" }
+					})
+				}, bucket.start);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground mt-1 flex justify-between font-mono text-[10px] tabular-nums",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: formatTimelineTick(from, axisSpan) }),
+				/* @__PURE__ */ jsx("span", { children: formatTimelineTick(mid, axisSpan) }),
+				/* @__PURE__ */ jsx("span", { children: formatTimelineTick(to, axisSpan) })
+			]
+		})]
+	});
+}
 //#endregion
 //#region src/components/features/logs/components/toolbar.tsx
 function LogsSearch({ placeholder = "Search logs...", className }) {
@@ -563,7 +1324,10 @@ function LogsSearch({ placeholder = "Search logs...", className }) {
 	}, [value, setSearch]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative min-w-0 flex-1", className),
-		children: [/* @__PURE__ */ jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" }), /* @__PURE__ */ jsx(Input, {
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: Search,
+			className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2"
+		}), /* @__PURE__ */ jsx(Input, {
 			value,
 			onChange: (event) => setValue(event.target.value),
 			placeholder,
@@ -601,7 +1365,7 @@ function LogsToolbar({ children, className }) {
 				size: "icon",
 				"aria-label": "Refresh logs",
 				onClick: onRefresh,
-				children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" })
+				children: /* @__PURE__ */ jsx(Icon, { icon: RefreshCw })
 			}),
 			onExport && /* @__PURE__ */ jsx(Button, {
 				type: "secondary",
@@ -609,7 +1373,7 @@ function LogsToolbar({ children, className }) {
 				size: "icon",
 				"aria-label": "Export logs",
 				onClick: () => onExport(entries),
-				children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
+				children: /* @__PURE__ */ jsx(Icon, { icon: Download })
 			})
 		]
 	});
@@ -644,16 +1408,20 @@ function LogsExplorer({ className }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 flex-col",
-				children: [/* @__PURE__ */ jsx(LogsToolbar, { children: !isDesktop && /* @__PURE__ */ jsxs(Button, {
-					type: "secondary",
-					theme: "outline",
-					size: "small",
-					onClick: () => setFiltersOpen(true),
-					children: [/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4" }), "Filters"]
-				}) }), /* @__PURE__ */ jsxs("div", {
-					className: "flex min-h-0 flex-1",
-					children: [/* @__PURE__ */ jsx(LogsTable, {}), isDesktop && /* @__PURE__ */ jsx(LogsDetail, {})]
-				})]
+				children: [
+					/* @__PURE__ */ jsx(LogsToolbar, { children: !isDesktop && /* @__PURE__ */ jsxs(Button, {
+						type: "secondary",
+						theme: "outline",
+						size: "small",
+						onClick: () => setFiltersOpen(true),
+						children: [/* @__PURE__ */ jsx(Icon, { icon: SlidersHorizontal }), "Filters"]
+					}) }),
+					/* @__PURE__ */ jsx(LogsTimeline, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative flex min-h-0 min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx(LogsTable, {}), isDesktop && /* @__PURE__ */ jsx(LogsDetail, {})]
+					})
+				]
 			}),
 			!isDesktop && /* @__PURE__ */ jsx(LogsDetail, {})
 		]
@@ -687,7 +1455,8 @@ const CANONICAL_FACET_NAMES = [
 const FACET_LABELS = {
 	severity: "Severity",
 	service_name: "Service",
-	resource_name: "Resource"
+	resource_name: "Resource",
+	host: "Host"
 };
 const SEVERITY_ORDER = [
 	"ERROR",
@@ -702,7 +1471,10 @@ const DEFAULT_LOGQL_MATCHER = "{service_name=~\".+\"}";
 //#endregion
 //#region src/components/features/logs/utils/facets.ts
 function facetLabel(name) {
-	return FACET_LABELS[name] ?? name.replaceAll("_", " ");
+	const mapped = FACET_LABELS[name];
+	if (mapped) return mapped;
+	const raw = name.replaceAll("_", " ");
+	return raw ? raw.charAt(0).toUpperCase() + raw.slice(1) : raw;
 }
 function compareFacetValues(name, a, b) {
 	if (name === "severity") {
@@ -754,25 +1526,38 @@ function filterEntries(entries, filters, search = "") {
 			const label = entry.labels[name];
 			if (!label || !values.includes(label)) return false;
 		}
-		if (query && !entry.line.toLowerCase().includes(query)) return false;
+		if (query && !entryMatchesSearch(entry, query)) return false;
 		return true;
 	});
 }
-//#endregion
-//#region src/components/features/logs/utils/time-range.ts
-const THIRTY_MINUTES_MS = 18e5;
-function lastThirtyMinutes(now = /* @__PURE__ */ new Date()) {
-	return {
-		from: (/* @__PURE__ */ new Date(now.getTime() - THIRTY_MINUTES_MS)).toISOString(),
-		to: now.toISOString()
-	};
+/**
+* Text a search term is matched against: the line, plus the fields the table
+* actually shows for a label-only access log (method, path, status, host).
+* Other labels (request ids, user agents, pod names) are deliberately not
+* searched so a hit is always visible on screen.
+*/
+function searchableLogText(entry) {
+	const { parsed, path } = logLineDisplay(entry.line, entry.labels);
+	const parts = [entry.line, path ?? ""];
+	if (parsed.kind === "http") parts.push(formatHttpLogLine(parsed));
+	const host = logRequestHost(entry.labels);
+	if (host) parts.push(host);
+	return parts.join("\n").toLowerCase();
 }
-function filtersAreActive(filters) {
-	return Object.values(filters).some((values) => values.length > 0);
+function entryMatchesSearch(entry, query) {
+	return searchableLogText(entry).includes(query);
 }
 //#endregion
 //#region src/components/features/logs/components/root.tsx
-function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defaultFilters, search, defaultSearch = "", live, defaultLive = false, selectedId, defaultSelectedId = null, isLoading = false, error, columns = DEFAULT_LOG_COLUMNS, onTimeRangeChange, onFiltersChange, onSearchChange, onLiveChange, onSelectedIdChange, onRefresh, onExport, className, children }) {
+/** Return the previous array while its items are shallow-equal to the new one. */
+function useShallowArray(next) {
+	const ref = useRef(next);
+	const prev = ref.current;
+	const same = prev === next || prev.length === next.length && prev.every((item, index) => item === next[index]);
+	if (!same) ref.current = next;
+	return same ? prev : next;
+}
+function LogsRoot({ entries, facets, histogram, timeRange, defaultTimeRange, filters, defaultFilters, search, defaultSearch = "", live, defaultLive = false, selectedId, defaultSelectedId = null, isLoading = false, error, columns = DEFAULT_LOG_COLUMNS, onTimeRangeChange, onFiltersChange, onSearchChange, onLiveChange, onSelectedIdChange, onRefresh, onExport, className, children }) {
 	const [currentTimeRange, setTimeRange] = useControllableState({
 		value: timeRange,
 		defaultValue: defaultTimeRange ?? lastThirtyMinutes(),
@@ -799,6 +1584,13 @@ function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defau
 		onChange: onSelectedIdChange
 	});
 	const resolvedFacets = useMemo(() => facets ?? facetsFromEntries(entries), [facets, entries]);
+	const resolvedHistogram = useMemo(() => histogram ?? histogramFromEntries(entries, currentTimeRange), [
+		histogram,
+		entries,
+		currentTimeRange
+	]);
+	const stableColumns = useShallowArray(columns);
+	const resolvedColumns = useMemo(() => resolveLogColumns(stableColumns), [stableColumns]);
 	const selectedIndex = useMemo(() => entries.findIndex((entry) => entry.id === currentSelectedId), [entries, currentSelectedId]);
 	const selectedEntry = selectedIndex >= 0 ? entries[selectedIndex] ?? null : null;
 	const toggleFilterValue = useCallback((name, value) => {
@@ -833,6 +1625,7 @@ function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defau
 	const value = useMemo(() => ({
 		entries,
 		facets: resolvedFacets,
+		histogram: resolvedHistogram,
 		timeRange: currentTimeRange,
 		setTimeRange,
 		filters: currentFilters,
@@ -851,13 +1644,14 @@ function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defau
 		selectNext,
 		isLoading,
 		error,
-		columns,
+		columns: resolvedColumns,
 		hasActiveFilters: filtersAreActive(currentFilters),
 		onRefresh,
 		onExport
 	}), [
 		entries,
 		resolvedFacets,
+		resolvedHistogram,
 		currentTimeRange,
 		setTimeRange,
 		currentFilters,
@@ -876,7 +1670,7 @@ function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defau
 		selectNext,
 		isLoading,
 		error,
-		columns,
+		resolvedColumns,
 		onRefresh,
 		onExport
 	]);
@@ -900,6 +1694,7 @@ const Logs = {
 	Toolbar: LogsToolbar,
 	Search: LogsSearch,
 	LiveToggle: LogsLiveToggle,
+	Timeline: LogsTimeline,
 	Table: LogsTable,
 	Detail: LogsDetail
 };
@@ -977,4 +1772,4 @@ function flattenLokiStreams(response) {
 	return entries;
 }
 //#endregion
-export { Logs, buildLogQL, facetsFromEntries, filterEntries, flattenLokiStreams, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, logLineDisplay, nsToDate, parseLogLine, severityBadgeType, useLogs };
+export { LOG_TIME_PRESETS, Logs, buildLogQL, facetsFromEntries, filterEntries, flattenLokiStreams, formatHttpLogLine, histogramFromEntries, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, logLineDisplay, logRequestHost, logTimeRangeLabel, nsToDate, parseLogLine, resolveLogColumns, resolveLogTimeRange, searchableLogText, severityBadgeType, splitPathQuery, useLogs };