@datum-cloud/datum-ui 2.6.0 → 2.7.0

package/dist/components/features/logs/index.d.ts

@@ -2,4 +2,4 @@ export { resolveLogColumns } from './components/columns';
 export { useLogs } from './hooks/use-logs';
 export { Logs } from './logs';
 export type { BuildLogQLOptions, LogColumn, LogColumnCellContext, LogColumnId, LogColumnSize, LogColumnSkeletonContext, LogColumnSpec, LogEntry, LogFacet, LogFacetOption, LogFilters, LogHistogramBucket, LogsContextValue, LogsRootProps, LogTimeRange, LokiQueryRangeResponse, LokiStream, ParsedHttpLogLine, ParsedLogLine, ParsedTextLogLine, } from './types';
-export { buildLogQL, facetsFromEntries, filterEntries, flattenLokiStreams, formatHttpLogLine, histogramFromEntries, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, LOG_TIME_PRESETS, logLineDisplay, logRequestHost, logTimeRangeLabel, nsToDate, parseLogLine, resolveLogTimeRange, searchableLogText, severityBadgeType, splitPathQuery, } from './utils';
+export { buildLogQL, facetsFromEntries, filterEntries, flattenLokiStreams, formatHttpLogLine, histogramFromEntries, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, LOG_TIME_PRESETS, logLineDisplay, logRequestHost, logTimeRangeLabel, logUserAgent, nsToDate, parseLogLine, parseUserAgent, resolveLogTimeRange, searchableLogText, severityBadgeType, splitPathQuery, } from './utils';

package/dist/components/features/logs/utils/index.d.ts

@@ -8,3 +8,5 @@ export { logRequestHost } from './host';
 export { formatHttpLogLine, logLineDisplay, parseLogLine, splitPathQuery } from './parse-log-line';
 export { httpStatusBadgeType, httpStatusTextClass, severityBadgeType } from './severity';
 export { filtersAreActive, lastThirtyMinutes, LOG_TIME_PRESETS, logTimeRangeLabel, resolveLogTimeRange, } from './time-range';
+export { logUserAgent, parseUserAgent } from './user-agent';
+export type { ParsedUserAgent, UserAgentDevice } from './user-agent';

package/dist/components/features/logs/utils/user-agent.d.ts

@@ -0,0 +1,25 @@
+export type UserAgentDevice = 'desktop' | 'mobile' | 'tablet' | 'bot' | 'unknown';
+export interface ParsedUserAgent {
+    /** Browser or client name, e.g. "Chrome", "Safari", "curl". */
+    browser?: string;
+    /** Major version of the browser or client, e.g. "128". */
+    browserVersion?: string;
+    /** Operating system, e.g. "macOS", "iOS", "Android", "Windows". */
+    os?: string;
+    /** OS version where it is meaningful (iOS, Android). Desktop OS versions are frozen or ambiguous in UA strings. */
+    osVersion?: string;
+    device: UserAgentDevice;
+    /** Human summary such as "Chrome 128 on macOS" or "curl 8.7". */
+    summary: string;
+    raw: string;
+}
+/** The User-Agent header from an entry's labels, if any. */
+export declare function logUserAgent(labels: Record<string, string>): string | undefined;
+/**
+ * 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'`.
+ */
+export declare function parseUserAgent(raw: string): ParsedUserAgent | null;

package/dist/logs/index.mjs

@@ -12,7 +12,7 @@ import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table
 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, Clock, Copy, Download, Inbox, RefreshCw, Search, SlidersHorizontal, TriangleAlert, X } from "lucide-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";
@@ -438,7 +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/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;
+	}
+}
+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 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 {};
+}
+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 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),
@@ -474,6 +705,8 @@ const DetailBody = memo(({ showClose = true }) => {
 	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: "border-b px-4 py-3",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -593,6 +826,53 @@ const DetailBody = memo(({ showClose = true }) => {
 						className: "col-span-3",
 						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",
@@ -984,36 +1264,32 @@ function LogsFilters({ className }) {
 //#endregion
 //#region src/components/features/logs/components/table.tsx
 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
-					})
-				]
-			})
+/** 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
+				})
+			]
 		})
 	});
 }
@@ -1068,92 +1344,62 @@ 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: [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 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, {
+		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}`)),
-				showError && /* @__PURE__ */ jsx(LogsTableState, {
-					role: "alert",
-					slot: "logs-error",
-					tone: "destructive",
-					colSpan: columns.length,
-					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,
-					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 }) => {
+				}, `skeleton-${index}`)), rows.map(({ entry, ctx }) => {
 					const selected = entry.id === selectedId;
 					return /* @__PURE__ */ jsx(TableRow, {
 						"data-state": selected ? "selected" : void 0,
@@ -1168,9 +1414,37 @@ function LogsTable({ className }) {
 							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;
@@ -1772,4 +2046,4 @@ function flattenLokiStreams(response) {
 	return entries;
 }
 //#endregion
-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 };
+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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"