@datum-cloud/datum-ui 2.5.0 → 2.7.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,14 +9,314 @@ 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 { Bot, ChevronDown, ChevronUp, Clock, Copy, Download, HelpCircle, Inbox, Monitor, RefreshCw, Search, SlidersHorizontal, Smartphone, Tablet, 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";
+import { format, isSameDay } from "date-fns";
+//#region src/components/features/logs/utils/format-timestamp.ts
+function formatLogTimestampParts(date) {
+	return {
+		date: format(date, "MMM dd").toUpperCase(),
+		time: format(date, "HH:mm:ss.SS")
+	};
+}
+function formatLogTimestamp(date) {
+	const { date: day, time } = formatLogTimestampParts(date);
+	return `${day} ${time}`;
+}
+//#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
+const SEVERITY_BADGE = {
+	ERROR: "danger",
+	FATAL: "danger",
+	CRITICAL: "danger",
+	WARN: "warning",
+	WARNING: "warning",
+	INFO: "info",
+	DEBUG: "muted",
+	TRACE: "muted"
+};
+function severityBadgeType(severity) {
+	if (!severity) return "muted";
+	return SEVERITY_BADGE[severity.toUpperCase()] ?? "muted";
+}
+function httpStatusBadgeType(status) {
+	if (status >= 500) return "danger";
+	if (status >= 400) return "warning";
+	if (status >= 300) return "info";
+	if (status >= 200) return "success";
+	return "muted";
+}
+function httpStatusTextClass(status) {
+	switch (httpStatusBadgeType(status)) {
+		case "danger": return "text-[var(--color-badge-danger)]";
+		case "warning": return "text-[var(--color-badge-warning)]";
+		case "info": return "text-[var(--color-badge-info)]";
+		case "success": return "text-[var(--color-badge-success)]";
+		default: return "text-muted-foreground";
+	}
+}
+//#endregion
+//#region src/components/features/logs/components/status-badge.tsx
+function LogsSeverityBadge({ severity }) {
+	const unlabeled = !severity;
+	return /* @__PURE__ */ jsx(Badge, {
+		type: severityBadgeType(severity),
+		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-flex h-4 items-center gap-1.5 font-mono text-[11px] leading-4 font-medium",
+		children: [/* @__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() {
@@ -23,24 +324,39 @@ function useLogs() {
 	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+)/;
-function parseLogLine(line) {
-	const match = ACCESS_LOG_RE.exec(line);
-	if (!match) return {
+/**
+* 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 {
-		kind: "text",
-		line
-	};
+	if (!method || !path || !status || !duration) return null;
 	return {
 		kind: "http",
 		method: method.toUpperCase(),
@@ -49,8 +365,47 @@ function parseLogLine(line) {
 		durationMs: Number(duration)
 	};
 }
-function logLineDisplay(line) {
-	const parsed = parseLogLine(line);
+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() : "";
@@ -60,7 +415,7 @@ function logLineDisplay(line) {
 			message: extraMessage(rest)
 		};
 	}
-	const path = PATH_TOKEN_RE.exec(line)?.[1] ?? null;
+	const path = labels.path?.trim() || PATH_TOKEN_RE.exec(line)?.[1] || null;
 	if (!path) return {
 		parsed,
 		path: null,
@@ -69,7 +424,7 @@ function logLineDisplay(line) {
 	return {
 		parsed,
 		path,
-		message: extraMessage(stripOnce(line, path))
+		message: extraMessage(line ? stripOnce(line, path) : "")
 	};
 }
 /** Drop leftover that is only fields already shown (method, status, path, duration, label=value). */
@@ -83,65 +438,238 @@ function stripOnce(line, token) {
 	return `${line.slice(0, index)}${line.slice(index + token.length)}`.replace(/\s+/g, " ").trim();
 }
 //#endregion
-//#region src/components/features/logs/utils/severity.ts
-const SEVERITY_BADGE = {
-	ERROR: "danger",
-	FATAL: "danger",
-	CRITICAL: "danger",
-	WARN: "warning",
-	WARNING: "warning",
-	INFO: "info",
-	DEBUG: "muted",
-	TRACE: "muted"
-};
-function severityBadgeType(severity) {
-	if (!severity) return "muted";
-	return SEVERITY_BADGE[severity.toUpperCase()] ?? "muted";
+//#region src/components/features/logs/utils/user-agent.ts
+/** Label keys, in order, that may carry the client's User-Agent header. */
+const USER_AGENT_LABEL_KEYS = [
+	"user_agent",
+	"http_user_agent",
+	"useragent",
+	"ua",
+	"http.user_agent"
+];
+/** The User-Agent header from an entry's labels, if any. */
+function logUserAgent(labels) {
+	for (const key of USER_AGENT_LABEL_KEYS) {
+		const value = labels[key]?.trim();
+		if (value) return value;
+	}
 }
-function httpStatusBadgeType(status) {
-	if (status >= 500) return "danger";
-	if (status >= 400) return "warning";
-	if (status >= 300) return "info";
-	if (status >= 200) return "success";
-	return "muted";
+const BOT_RE = /bot|crawl|spider|slurp|facebookexternalhit|preview|monitor|uptime|pingdom|kube-probe|prometheus|blackbox|healthcheck|health-check|datadog|newrelic|statuscake/i;
+/** Order matters: forks embed the names of what they fork. */
+const CLIENT_RULES = [
+	{
+		name: "curl",
+		re: /\bcurl\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Wget",
+		re: /\bWget\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Python Requests",
+		re: /\bpython-requests\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Python urllib",
+		re: /\bPython-urllib\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Go HTTP client",
+		re: /\bGo-http-client\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "okhttp",
+		re: /\bokhttp\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "axios",
+		re: /\baxios\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "node-fetch",
+		re: /\bnode-fetch\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Node.js",
+		re: /\bnode\/v?(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Postman",
+		re: /\bPostmanRuntime\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Insomnia",
+		re: /\binsomnia\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Java",
+		re: /\bJava\/(\d+(?:\.\d+)*)/i,
+		tool: true
+	},
+	{
+		name: "Edge",
+		re: /\bEdgA?\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Edge",
+		re: /\bEdgiOS\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Opera",
+		re: /\bOPR\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Opera",
+		re: /\bOpera\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Samsung Internet",
+		re: /\bSamsungBrowser\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Brave",
+		re: /\bBrave\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Vivaldi",
+		re: /\bVivaldi\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Firefox",
+		re: /\b(?:Firefox|FxiOS)\/(\d+(?:\.\d+)*)/
+	},
+	{
+		name: "Chrome",
+		re: /\b(?:Chrome|CriOS|HeadlessChrome)\/(\d+(?:\.\d+)*)/
+	}
+];
+/** Safari carries its version under `Version/`; WebKit views on iOS have neither. */
+function detectSafari(ua) {
+	if (!/\bSafari\//.test(ua) && !/\bAppleWebKit\//.test(ua)) return void 0;
+	const version = /\bVersion\/(\d+(?:\.\d+)*)/.exec(ua);
+	if (version && /\bSafari\//.test(ua)) return { version: majorVersion(version[1]) };
+	if (/\b(?:iPhone|iPad|iPod)\b/.test(ua)) return {};
 }
-function httpStatusTextClass(status) {
-	switch (httpStatusBadgeType(status)) {
-		case "danger": return "text-[var(--color-badge-danger)]";
-		case "warning": return "text-[var(--color-badge-warning)]";
-		case "info": return "text-[var(--color-badge-info)]";
-		case "success": return "text-[var(--color-badge-success)]";
-		default: return "text-muted-foreground";
+function majorVersion(version) {
+	if (!version) return void 0;
+	return version.split(".")[0];
+}
+function detectOs(ua) {
+	let match;
+	if (/\b(?:iPhone|iPad|iPod)\b/i.test(ua)) {
+		match = /\bOS (\d+)[._](\d+)(?:[._](\d+))?/.exec(ua);
+		if (!match) return { os: "iOS" };
+		const patch = match[3] && match[3] !== "0" ? `.${match[3]}` : "";
+		return {
+			os: "iOS",
+			osVersion: `${match[1]}.${match[2]}${patch}`
+		};
 	}
+	match = /\bAndroid[ /](\d+(?:\.\d+)?)/i.exec(ua);
+	if (match) return {
+		os: "Android",
+		osVersion: match[1]
+	};
+	if (/\bAndroid\b/i.test(ua)) return { os: "Android" };
+	if (/\bWindows Phone\b/i.test(ua)) return { os: "Windows Phone" };
+	if (/\bWindows\b/i.test(ua)) return { os: "Windows" };
+	if (/\bCrOS\b/.test(ua)) return { os: "ChromeOS" };
+	if (/\bMac OS X\b|\bMacintosh\b/i.test(ua)) return { os: "macOS" };
+	if (/\bLinux\b|\bX11\b/i.test(ua)) return { os: "Linux" };
+	if (/\bFreeBSD\b/i.test(ua)) return { os: "FreeBSD" };
+	return {};
 }
-//#endregion
-//#region src/components/features/logs/components/status-badge.tsx
-function LogsSeverityBadge({ 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",
-		children: severity ?? "LOG"
-	});
+function detectDevice(ua, os, bot, tool) {
+	if (bot || tool) return "bot";
+	if (/\biPad\b|\bTablet\b|\bKindle\b|\bSilk\b/i.test(ua)) return "tablet";
+	if (os === "Android" && !/\bMobile\b/i.test(ua)) return "tablet";
+	if (/\bMobile\b|\biPhone\b|\biPod\b|\bWindows Phone\b/i.test(ua)) return "mobile";
+	if (os === "iOS") return "mobile";
+	if (os === "Windows" || os === "macOS" || os === "Linux" || os === "ChromeOS" || os === "FreeBSD") return "desktop";
+	return "unknown";
 }
-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",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground",
-			children: parsed.method
-		}), /* @__PURE__ */ jsx("span", {
-			className: cn("tabular-nums", httpStatusTextClass(parsed.status)),
-			children: parsed.status
-		})]
-	});
+function botClient(ua) {
+	const match = /([\w.-]*(?:bot|crawl|spider|probe|monitor|uptime|check)[\w.-]*)(?:\/(\d+(?:\.\d+)*))?/i.exec(ua);
+	if (!match?.[1]) return void 0;
+	return {
+		name: match[1],
+		version: majorVersion(match[2])
+	};
+}
+/**
+* Parse a User-Agent header into browser, OS and device type. Deliberately
+* small: it recognises the mainstream browsers, mobile platforms, common
+* command-line / SDK clients, and anything that calls itself a bot. Returns
+* `null` for an empty string; unrecognised strings still return `summary`
+* as the raw value with `device: 'unknown'`.
+*/
+function parseUserAgent(raw) {
+	const ua = raw.trim();
+	if (!ua) return null;
+	let browser;
+	let browserVersion;
+	let tool = false;
+	for (const rule of CLIENT_RULES) {
+		const match = rule.re.exec(ua);
+		if (match) {
+			browser = rule.name;
+			browserVersion = majorVersion(match[1]);
+			tool = Boolean(rule.tool);
+			break;
+		}
+	}
+	if (!browser) {
+		const safari = detectSafari(ua);
+		if (safari) {
+			browser = "Safari";
+			browserVersion = safari.version;
+		}
+	}
+	const { os, osVersion } = tool ? {} : detectOs(ua);
+	const bot = !tool && BOT_RE.test(ua);
+	const device = detectDevice(ua, os, bot, tool);
+	if (bot && !browser) {
+		const named = botClient(ua);
+		browser = named?.name;
+		browserVersion = named?.version;
+	}
+	const client = browser ? browserVersion ? `${browser} ${browserVersion}` : browser : void 0;
+	const platform = os ? osVersion ? `${os} ${osVersion}` : os : void 0;
+	let summary;
+	if (client && platform) summary = `${client} on ${platform}`;
+	else if (client) summary = client;
+	else if (platform) summary = platform;
+	else summary = ua;
+	return {
+		browser,
+		browserVersion,
+		os,
+		osVersion,
+		device,
+		summary,
+		raw: ua
+	};
 }
 //#endregion
 //#region src/components/features/logs/components/detail.tsx
+const DEVICE_ICONS = {
+	desktop: Monitor,
+	mobile: Smartphone,
+	tablet: Tablet,
+	bot: Bot,
+	unknown: HelpCircle
+};
 function MetaCell({ label, children, className }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("bg-background min-w-0 px-3 py-2.5", className),
@@ -154,77 +682,111 @@ 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);
+	const userAgent = logUserAgent(selectedEntry.labels);
+	const client = userAgent ? parseUserAgent(userAgent) : null;
 	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 +798,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 +824,89 @@ function DetailBody({ showClose = true }) {
 					/* @__PURE__ */ jsx(MetaCell, {
 						label: "Path",
 						className: "col-span-3",
-						children: parsed.path
+						children: request.pathname
+					}),
+					client && /* @__PURE__ */ jsxs("div", {
+						className: "bg-background col-span-3 min-w-0 px-3 py-2.5",
+						"data-slot": "logs-client",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "mb-1 flex items-center justify-between",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-[11px] font-medium",
+									children: "Client"
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "secondary",
+									theme: "borderless",
+									size: "icon",
+									className: "-my-1 size-6",
+									"aria-label": "Copy user agent",
+									onClick: () => copy(client.raw, { withToast: true }),
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: Copy,
+										size: 14
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 text-xs",
+								children: [
+									/* @__PURE__ */ jsx(Icon, {
+										icon: DEVICE_ICONS[client.device],
+										className: "text-muted-foreground shrink-0"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 truncate font-medium",
+										"data-slot": "logs-client-summary",
+										children: client.summary
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground shrink-0 text-[11px] capitalize",
+										children: client.device === "unknown" ? "" : client.device
+									})
+								]
+							}),
+							client.summary !== client.raw && /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground mt-1 font-mono text-[11px] leading-4 break-all",
+								title: client.raw,
+								children: client.raw
+							})
+						]
+					}),
+					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 +928,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 +988,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 +1016,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 +1120,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 +1147,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 +1160,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 +1254,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 +1262,74 @@ 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 shared by the empty and error states. */
+function LogsTableState({ icon, title, description, action, slot, role, tone = "muted" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-48 flex-1 items-center justify-center px-4 py-8 text-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			role,
+			"data-slot": slot,
+			className: "flex max-w-md flex-col items-center gap-2",
+			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();
@@ -488,53 +1344,232 @@ function LogsTable({ className }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref: scrollerRef,
 		"data-slot": "logs-table",
-		className: cn("min-h-0 flex-1 overflow-auto outline-none", className),
+		className: cn("flex min-h-0 flex-1 flex-col overflow-auto outline-none", className),
 		tabIndex: 0,
 		"aria-busy": isLoading || void 0,
 		onKeyDown,
-		children: [error && /* @__PURE__ */ jsx("div", {
-			role: "alert",
-			className: "text-destructive px-4 py-3 text-sm",
-			children: error
-		}), /* @__PURE__ */ jsxs("table", {
-			className: "w-full caption-bottom table-fixed text-sm",
-			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)) })
-			}), /* @__PURE__ */ jsxs(TableBody, { children: [
-				isLoading && entries.length === 0 && Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-					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, {
-					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);
+		children: [
+			showErrorBanner && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				"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 shrink-0 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: cn(columnHeadClass(column), column.headerClassName),
+						style: columnWidthStyle(column),
+						children: columnHeader(column)
+					}, column.id)) })
+				}), /* @__PURE__ */ jsxs(TableBody, { children: [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}`)), 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);
+				})] })]
+			}),
+			showError && /* @__PURE__ */ jsx(LogsTableState, {
+				role: "alert",
+				slot: "logs-error",
+				tone: "destructive",
+				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",
+				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"
 				})
-			] })]
+			})
+		]
+	});
+}
+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) })
+			]
 		})]
 	});
 }
@@ -563,7 +1598,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 +1639,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 +1647,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 +1682,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 +1729,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 +1745,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 +1800,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 +1858,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 +1899,7 @@ function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defau
 	const value = useMemo(() => ({
 		entries,
 		facets: resolvedFacets,
+		histogram: resolvedHistogram,
 		timeRange: currentTimeRange,
 		setTimeRange,
 		filters: currentFilters,
@@ -851,13 +1918,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 +1944,7 @@ function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defau
 		selectNext,
 		isLoading,
 		error,
-		columns,
+		resolvedColumns,
 		onRefresh,
 		onExport
 	]);
@@ -900,6 +1968,7 @@ const Logs = {
 	Toolbar: LogsToolbar,
 	Search: LogsSearch,
 	LiveToggle: LogsLiveToggle,
+	Timeline: LogsTimeline,
 	Table: LogsTable,
 	Detail: LogsDetail
 };
@@ -977,4 +2046,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, logUserAgent, nsToDate, parseLogLine, parseUserAgent, resolveLogColumns, resolveLogTimeRange, searchableLogText, severityBadgeType, splitPathQuery, useLogs };