@reopt-ai/opt-ui 1.11.0 → 1.12.0

package/dist/{field-sidebar-DAuN4jPV.cjs → field-sidebar-BYgEmdy0.cjs}

@@ -1,5 +1,5 @@
 "use client";
-const require_text_truncate = require("./text-truncate-BZdL1k5Z.cjs");
+const require_text_truncate = require("./text-truncate-I1XLWmRa.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -1475,7 +1475,7 @@ function DataTableProgressBar({ value, barColor, label }) {
 	});
 }
 /** Renders the data table component. */
-function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, className }) {
+function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, className }) {
 	const [sortCol, setSortCol] = (0, react.useState)(null);
 	const [sortDir, setSortDir] = (0, react.useState)(null);
 	const [expandedKeys, setExpandedKeys] = (0, react.useState)(/* @__PURE__ */ new Set());
@@ -1569,8 +1569,8 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 					focusWrap: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.Composite, {
 						role: "grid",
-						"aria-label": title,
-						className: "w-full",
+						"aria-label": title !== null && title !== void 0 ? title : ariaLabel,
+						className: "w-full min-w-max",
 						render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {}),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 							className: require_text_truncate.cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
@@ -1601,7 +1601,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 										tabIndex: isSortable ? 0 : void 0,
 										"aria-sort": sortCol === col.id && sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "flex items-center",
+											className: "flex items-center whitespace-nowrap",
 											children: [col.header, sortIndicator(col.id)]
 										}), resizableColumns && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											role: "separator",
@@ -1665,7 +1665,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												className: require_text_truncate.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
 												role: "gridcell"
 											}),
-											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
+											className: "outline-none data-[focus-visible]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Checkbox, {
 												checked: isSelected,
 												onChange: () => toggleSelectRow(key),
@@ -1677,7 +1677,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												className: require_text_truncate.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
 												role: "gridcell"
 											}),
-											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
+											className: "outline-none data-[focus-visible]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 												type: "button",
 												onClick: (e) => {
@@ -2950,1651 +2950,1654 @@ function Flyout({ open, onClose, title, description, type = "overlay", side = "r
 }
 Flyout.displayName = "Flyout";
 //#endregion
-//#region src/lib/use-auto-refresh.ts
+//#region src/lib/query/query-ast.ts
+const EMPTY_QUERY = { clauses: [] };
+/** Whether a query constrains anything at all. */
+function isEmptyQuery(query) {
+	return !query || query.clauses.length === 0;
+}
+function sameClause(a, b) {
+	if (a.type !== b.type) return false;
+	if (a.type === "term" && b.type === "term") return a.value === b.value && a.negated === b.negated;
+	const fieldA = a;
+	const fieldB = b;
+	return fieldA.field === fieldB.field && fieldA.operator === fieldB.operator && fieldA.negated === fieldB.negated && fieldA.values.length === fieldB.values.length && fieldA.values.every((value, index) => value === fieldB.values[index]);
+}
+/** Add a clause unless an identical one is already there. */
+function addClause(query, clause) {
+	if (query.clauses.some((existing) => sameClause(existing, clause))) return query;
+	return { clauses: [...query.clauses, clause] };
+}
 /**
-* A refresh timer that waits for its own work.
+* Constrain a field to a value — what a cell's "filter for this" action does.
 *
-* A plain `setInterval` fires on a schedule regardless of whether the previous
-* query came back, so a five-second interval over a seven-second query stacks
-* requests until something gives. Chaining the next wait onto the settled
-* promise keeps exactly one refresh in flight, and a rejection stops the loop
-* instead of hammering an endpoint that is already failing.
+* Applying the opposite of a constraint already present replaces it rather than
+* adding it: `status:200` then "filter out 200" should read as one changed
+* mind, not as a query that can never match.
 */
-function useAutoRefresh({ interval, paused = false, onRefresh }) {
-	const callbackRef = (0, react.useRef)(onRefresh);
-	callbackRef.current = onRefresh;
-	(0, react.useEffect)(() => {
-		if (paused || interval <= 0 || !callbackRef.current) return;
-		let cancelled = false;
-		let timer;
-		const schedule = () => {
-			timer = setTimeout(async () => {
-				if (cancelled) return;
-				try {
-					var _callbackRef$current;
-					await ((_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef));
-				} catch (_unused) {
-					return;
-				}
-				if (!cancelled) schedule();
-			}, interval);
-		};
-		schedule();
-		return () => {
-			cancelled = true;
-			if (timer) clearTimeout(timer);
-		};
-	}, [interval, paused]);
+function withFieldValue(query, field, value, options = {}) {
+	var _options$negated, _options$operator;
+	const negated = (_options$negated = options.negated) !== null && _options$negated !== void 0 ? _options$negated : false;
+	const operator = (_options$operator = options.operator) !== null && _options$operator !== void 0 ? _options$operator : "eq";
+	return { clauses: [...query.clauses.filter((clause) => !(clause.type === "field" && clause.field === field && clause.operator === operator && clause.values.length === 1 && clause.values[0] === value)), {
+		type: "field",
+		field,
+		operator,
+		values: [value],
+		negated
+	}] };
 }
-//#endregion
-//#region src/shells/time-range-control.tsx
-const defaultLabels$4 = {
-	trigger: "Select time range",
-	invalid: "Invalid time range",
-	last: (duration) => `Last ${duration}`,
-	next: (duration) => `Next ${duration}`,
-	quickSelect: "Quick select",
-	apply: "Apply",
-	update: "Update",
-	refresh: "Refresh",
-	commonlyUsed: "Commonly used",
-	recentlyUsed: "Recently used",
-	start: "Start",
-	end: "End",
-	startHint: "Absolute time or date math, e.g. now-7d",
-	autoRefresh: "Auto refresh",
-	autoRefreshOff: "Off",
-	every: (duration) => `Every ${duration}`,
-	previous: "Previous window",
-	nextWindow: "Next window",
-	zoomIn: "Zoom in",
-	zoomOut: "Zoom out",
-	thisUnit: (unit) => `This ${unit}`,
-	units: {
-		s: "seconds",
-		m: "minutes",
-		h: "hours",
-		d: "days",
-		w: "weeks",
-		M: "months",
-		y: "years"
-	}
-};
-const QUICK_UNITS = [
-	"m",
-	"h",
-	"d",
-	"w",
-	"M",
-	"y"
-];
-const REFRESH_INTERVALS = [
-	0,
-	5e3,
-	1e4,
-	3e4,
-	6e4,
-	3e5
-];
-function selectValue(value) {
-	var _value$;
-	return Array.isArray(value) ? (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : "" : value;
+/** Drop every clause naming `field`. */
+function withoutField(query, field) {
+	return { clauses: query.clauses.filter((clause) => clause.type !== "field" || clause.field !== field) };
+}
+/** Drop the clause at `index`, for a removable chip. */
+function removeClause(query, index) {
+	return { clauses: query.clauses.filter((_, at) => at !== index) };
+}
+/** Every field the query names, in the order they first appear. */
+function queryFields(query) {
+	const seen = [];
+	for (const clause of query.clauses) if (clause.type === "field" && !seen.includes(clause.field)) seen.push(clause.field);
+	return seen;
+}
+/** The values a field is constrained to, if any — for showing a filter as active. */
+function fieldValues(query, field) {
+	return query.clauses.flatMap((clause) => clause.type === "field" && clause.field === field && !clause.negated ? clause.values : []);
 }
 /**
-* What the trigger says.
+* Fold a cell action into the query.
 *
-* A window anchored to `now` deserves its intent ("Last 7 days"), not two
-* timestamps the reader has to subtract. Everything else gets both ends
-* spelled out. A duration that does not divide into whole minutes is prefixed
-* with `~` rather than rounded silently.
+* The pair of buttons on a log cell is the fastest path from "I noticed this
+* value" to a filtered view, and the reason it works is that the result is a
+* query the reader can then see, edit and share — not a hidden filter stack
+* with its own rules.
 */
-function describeRange(range, labels, options) {
-	const window = (0, _reopt_ai_opt_charts.measureTimeWindow)(range, {
-		timeZone: options.timeZone,
-		now: options.now
-	});
-	if (window.isInvalid) return {
-		text: labels.invalid,
-		isInvalid: true
-	};
-	const fromParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.from);
-	const toParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.to);
-	if ((fromParts === null || fromParts === void 0 ? void 0 : fromParts.roundUnit) && fromParts.count === 0 && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === fromParts.roundUnit && toParts.count === 0) return {
-		text: labels.thisUnit((0, _reopt_ai_opt_charts.formatCountUnit)(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
-		isInvalid: false
-	};
-	if ((0, _reopt_ai_opt_charts.isRelativeToNow)(range)) {
-		var _toParts$count;
-		const anchoredAtEnd = ((_toParts$count = toParts === null || toParts === void 0 ? void 0 : toParts.count) !== null && _toParts$count !== void 0 ? _toParts$count : 0) === 0;
-		const parts = anchoredAtEnd ? fromParts : toParts;
-		const bothSnapped = (parts === null || parts === void 0 ? void 0 : parts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit) && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit);
-		const counted = parts && parts.count > 0 ? (0, _reopt_ai_opt_charts.formatCountUnit)(parts.roundUnit && bothSnapped ? parts.count + 1 : parts.count, parts.unit, options.locale) : null;
-		const exact = counted !== null && (!(parts === null || parts === void 0 ? void 0 : parts.roundUnit) || bothSnapped);
-		const duration = exact ? counted : (0, _reopt_ai_opt_charts.formatDuration)(window.duration, options.locale);
-		const prefix = exact || (0, _reopt_ai_opt_charts.isExactMinutes)(window.duration) ? "" : "~";
-		return {
-			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
-			isInvalid: false
-		};
-	}
-	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
-	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
-	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
-	return {
-		text: from === to ? from : `${from} – ${to}`,
-		isInvalid: false
-	};
+function applyCellAction(query, action) {
+	return withFieldValue(query, action.field, action.value, { negated: action.intent === "exclude" });
 }
+//#endregion
+//#region src/lib/query/query-parse.ts
+const FIELD_NAME = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
 /**
-* TimeRangeControl — the window as an expression, not two frozen instants.
-*
-* Holding `{ from: "now-7d", to: "now" }` instead of a resolved pair is what
-* makes a saved board, a shared link and an auto-refresh timer all mean the
-* same thing tomorrow that they mean today. Around that sit the moves people
-* actually make on a chart: jump to a named window, step the same width back
-* and forth to compare, widen when the interesting thing is just off screen,
-* and let it re-query on a timer while they watch.
-*
-* @example
-* ```tsx
-* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+* Split on whitespace, but keep quoted runs and parenthesised groups whole.
 *
-* <TimeRangeControl
-*   value={range}
-*   onChange={setRange}
-*   timeZone="Asia/Seoul"
-*   showWindowButtons
-*   onRefresh={() => refetch()}
-* />
-* ```
+* An unterminated quote or group swallows the rest of the line rather than
+* erroring: the reader is mid-word, and the alternative is the query flickering
+* between two different meanings as they type the closing character.
 */
-function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton = true, showWindowButtons = true, zoomFactor = .5, refresh, onRefreshChange, onRefresh, isLoading = false, disabled = false, className, labels: customLabels, "aria-label": ariaLabel }) {
-	var _refresh$interval, _refresh$paused, _refresh$interval2;
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
-	const [open, setOpen] = (0, react.useState)(false);
-	const [draft, setDraft] = (0, react.useState)(null);
-	const [quickCount, setQuickCount] = (0, react.useState)("15");
-	const [quickUnit, setQuickUnit] = (0, react.useState)("m");
-	const editing = draft !== null && draft !== void 0 ? draft : value;
-	const hasChanges = draft !== null && (draft.from !== value.from || draft.to !== value.to);
-	const description = (0, react.useMemo)(() => describeRange(value, labels, {
-		locale,
-		timeZone
-	}), [
-		value,
-		locale,
-		timeZone,
-		customLabels
-	]);
-	const boundState = (0, react.useCallback)((expression) => (0, _reopt_ai_opt_charts.parseTimeExpression)(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
-	const commit = (0, react.useCallback)((range) => {
-		setDraft(null);
-		onChange(range);
-	}, [onChange]);
-	const apply = (0, react.useCallback)(() => {
-		if (draft) commit(draft);
-		else onRefresh === null || onRefresh === void 0 || onRefresh();
-	}, [
-		draft,
-		commit,
-		onRefresh
-	]);
-	const commitOnEnter = (0, react.useCallback)((event) => {
-		if (event.key !== "Enter") return;
-		apply();
-		setOpen(false);
-	}, [apply]);
-	const applyQuick = (0, react.useCallback)(() => {
-		const count = Number(quickCount);
-		if (!Number.isFinite(count) || count <= 0) return;
-		commit({
-			from: `now-${Math.round(count)}${quickUnit}`,
-			to: "now"
-		});
-		setOpen(false);
-	}, [
-		quickCount,
-		quickUnit,
-		commit
-	]);
-	const step = (0, react.useCallback)((direction) => {
-		const next = (0, _reopt_ai_opt_charts.shiftTimeRange)(value, direction, { timeZone });
-		if (next) commit(next);
-	}, [
-		value,
-		timeZone,
-		commit
-	]);
-	const zoom = (0, react.useCallback)((factor) => {
-		const next = (0, _reopt_ai_opt_charts.zoomTimeRange)(value, factor, { timeZone });
-		if (next) commit(next);
-	}, [
-		value,
-		timeZone,
-		commit
-	]);
-	useAutoRefresh({
-		interval: (_refresh$interval = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval !== void 0 ? _refresh$interval : 0,
-		paused: (_refresh$paused = refresh === null || refresh === void 0 ? void 0 : refresh.paused) !== null && _refresh$paused !== void 0 ? _refresh$paused : true,
-		onRefresh
-	});
-	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("bg-surface inline-flex items-center rounded-lg border", require_text_truncate.OPT_BORDER, className),
-		role: "group",
-		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
-		"data-opt-id": "3WJ8H",
-		"data-opt-slug": "time-range-control.TimeRangeControl",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, {
-				open,
-				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
-					className: require_text_truncate.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
-					disabled,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
-						className: "text-text-tertiary h-4 w-4",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "truncate text-sm",
-						children: description.text
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverContent, {
-					className: "gap-group flex w-80 flex-col",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-text-primary text-xs font-medium",
-								children: labels.quickSelect
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-end gap-2",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
-										"aria-label": labels.quickSelect,
-										type: "number",
-										min: 1,
-										size: "sm",
-										className: "w-20",
-										value: quickCount,
-										onChange: (event) => setQuickCount(event.target.value),
-										onKeyDown: (event) => {
-											if (event.key === "Enter") applyQuick();
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
-										value: quickUnit,
-										setValue: (next) => setQuickUnit(selectValue(next)),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
-											minWidth: 110,
-											"aria-label": labels.quickSelect
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
-											value: unit,
-											children: labels.units[unit]
-										}, unit)) })]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-										variant: "secondary",
-										size: "sm",
-										onClick: applyQuick,
-										children: labels.apply
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
-								label: labels.start,
-								size: "sm",
-								value: editing.from,
-								error: boundState(editing.from),
-								hint: labels.startHint,
-								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { from: event.target.value })),
-								onKeyDown: commitOnEnter
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
-								label: labels.end,
-								size: "sm",
-								value: editing.to,
-								error: boundState(editing.to),
-								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { to: event.target.value })),
-								onKeyDown: commitOnEnter
-							})]
-						}),
-						presets && presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
-							title: labels.commonlyUsed,
-							items: presets,
-							onPick: (range) => {
-								commit(range);
-								setOpen(false);
-							}
-						}),
-						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
-							title: labels.recentlyUsed,
-							items: recentRanges.slice(0, 5),
-							onPick: (range) => {
-								commit(range);
-								setOpen(false);
-							}
-						}),
-						onRefreshChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-text-primary text-xs font-medium",
-								children: labels.autoRefresh
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
-								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
-								setValue: (next) => {
-									const interval = Number(selectValue(next));
-									onRefreshChange({
-										interval,
-										paused: interval === 0
-									});
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
-									minWidth: 140,
-									"aria-label": labels.autoRefresh
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
-									value: String(interval),
-									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
-								}, interval)) })]
-							})]
-						})
-					]
-				})]
-			}),
-			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_text_truncate.cn("flex items-center border-l", "border border-border"),
-				role: "group",
-				"aria-label": labels.previous,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.previous,
-						disabled: disabled || description.isInvalid,
-						onClick: () => step(-1),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.zoomIn,
-						disabled: disabled || description.isInvalid,
-						onClick: () => zoom(-zoomFactor),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.zoomOut,
-						disabled: disabled || description.isInvalid,
-						onClick: () => zoom(zoomFactor),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.nextWindow,
-						disabled: disabled || description.isInvalid,
-						onClick: () => step(1),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					})
-				]
-			}),
-			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_text_truncate.cn("border-l pl-2 pr-2", "border border-border"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-					variant: hasChanges ? "primary" : "secondary",
-					size: "sm",
-					loading: isLoading,
-					disabled: disabled || description.isInvalid,
-					onClick: apply,
-					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, {
-						className: "h-3.5 w-3.5",
-						"aria-hidden": "true"
-					}),
-					title: refreshLabel,
-					children: hasChanges ? labels.update : labels.refresh
-				})
-			})
-		]
-	});
+function tokenize(input) {
+	const tokens = [];
+	let index = 0;
+	while (index < input.length) {
+		while (index < input.length && /\s/.test(input[index])) index += 1;
+		if (index >= input.length) break;
+		const start = index;
+		let text = "";
+		let quoted = false;
+		let atTokenStart = true;
+		let depth = 0;
+		while (index < input.length) {
+			const char = input[index];
+			if (char === "\"") {
+				if (atTokenStart) quoted = true;
+				atTokenStart = false;
+				index += 1;
+				while (index < input.length && input[index] !== "\"") {
+					text += input[index];
+					index += 1;
+				}
+				index += 1;
+				continue;
+			}
+			if (char === "(") depth += 1;
+			if (char === ")") depth = Math.max(0, depth - 1);
+			if (/\s/.test(char) && depth === 0) break;
+			atTokenStart = false;
+			text += char;
+			index += 1;
+		}
+		if (text.length > 0 || quoted) tokens.push({
+			text,
+			at: start,
+			quoted
+		});
+	}
+	return tokens;
 }
-TimeRangeControl.displayName = "TimeRangeControl";
-function IconButton({ label, disabled, onClick, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-		variant: "ghost",
-		size: "sm",
-		"aria-label": label,
-		title: label,
-		disabled,
-		onClick,
-		children
-	});
+/** `(a or b)` → `["a", "b"]`; anything else is a single value. */
+function readValues(raw) {
+	const trimmed = raw.trim();
+	if (!trimmed.startsWith("(")) return [stripQuotes(trimmed)];
+	return trimmed.replace(/^\(/, "").replace(/\)$/, "").split(/\s+or\s+/i).map((part) => stripQuotes(part.trim())).filter((part) => part.length > 0);
 }
-function RangeList({ title, items, onPick }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "gap-element flex flex-col",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-text-primary text-xs font-medium",
-			children: title
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "grid grid-cols-2 gap-1",
-			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				className: require_text_truncate.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_text_truncate.OPT_TEXT_SECONDARY),
-				onClick: () => onPick(item.range),
-				children: item.label
-			}) }, `${item.label}-${index}`))
-		})]
-	});
+function stripQuotes(value) {
+	if (value.length >= 2 && value.startsWith("\"") && value.endsWith("\"")) return value.slice(1, -1);
+	return value.replace(/^"/, "");
 }
-/**
-* The windows most analytics tools open with. Exported so a caller gets a
-* sensible list without inventing date math of their own.
-*/
-const DEFAULT_TIME_PRESETS = [
+const OPERATORS = [
 	{
-		label: "Last 15 minutes",
-		range: {
-			from: "now-15m",
-			to: "now"
-		}
+		symbol: ">=",
+		operator: "gte"
 	},
 	{
-		label: "Last hour",
-		range: {
-			from: "now-1h",
-			to: "now"
-		}
+		symbol: "<=",
+		operator: "lte"
 	},
 	{
-		label: "Last 24 hours",
-		range: {
-			from: "now-24h",
-			to: "now"
-		}
+		symbol: ":",
+		operator: "eq"
 	},
 	{
-		label: "Last 7 days",
-		range: {
-			from: "now-7d",
-			to: "now"
-		}
+		symbol: ">",
+		operator: "gt"
 	},
 	{
-		label: "Last 30 days",
-		range: {
-			from: "now-30d",
-			to: "now"
+		symbol: "<",
+		operator: "lt"
+	}
+];
+/** Where a field operator starts in the token, or `-1`. */
+function findOperator(text) {
+	let best = null;
+	for (const { symbol, operator } of OPERATORS) {
+		const index = text.indexOf(symbol);
+		if (index <= 0) continue;
+		if (!best || index < best.index || index === best.index && symbol.length > best.symbol.length) best = {
+			index,
+			symbol,
+			operator
+		};
+	}
+	return best;
+}
+/** Parse, keeping whatever could not be understood as a plain term. */
+function parseQueryWithDiagnostics(input) {
+	const diagnostics = [];
+	const clauses = [];
+	let trailing = null;
+	for (const token of tokenize(input)) {
+		let text = token.text;
+		let negated = false;
+		if (!token.quoted && text.startsWith("-") && text.length > 1) {
+			negated = true;
+			text = text.slice(1);
 		}
-	},
-	{
-		label: "Last 90 days",
-		range: {
-			from: "now-90d",
-			to: "now"
+		const operator = token.quoted ? null : findOperator(text);
+		if (!operator) {
+			if (text.length > 0) clauses.push({
+				type: "term",
+				value: text,
+				negated
+			});
+			continue;
 		}
-	},
-	{
-		label: "Today",
-		range: {
-			from: "now/d",
-			to: "now/d"
+		const field = text.slice(0, operator.index);
+		const rawValue = text.slice(operator.index + operator.symbol.length);
+		if (!FIELD_NAME.test(field)) {
+			clauses.push({
+				type: "term",
+				value: text,
+				negated
+			});
+			continue;
 		}
-	},
-	{
-		label: "This week",
-		range: {
-			from: "now/w",
-			to: "now/w"
+		if (rawValue === "") {
+			trailing = {
+				field,
+				operator: operator.operator,
+				value: ""
+			};
+			continue;
+		}
+		if (rawValue === "*" && operator.operator === "eq") {
+			clauses.push({
+				type: "field",
+				field,
+				operator: "exists",
+				values: [],
+				negated
+			});
+			continue;
+		}
+		if (operator.operator === "eq" && rawValue.length > 2 && rawValue.startsWith("*") && rawValue.endsWith("*")) {
+			clauses.push({
+				type: "field",
+				field,
+				operator: "contains",
+				values: [stripQuotes(rawValue.slice(1, -1))],
+				negated
+			});
+			continue;
 		}
+		const values = readValues(rawValue);
+		if (values.length === 0) {
+			diagnostics.push({
+				at: token.at,
+				text: token.text,
+				message: "Empty value group"
+			});
+			continue;
+		}
+		if (operator.operator !== "eq" && values.length > 1) diagnostics.push({
+			at: token.at,
+			text: token.text,
+			message: "A comparison takes a single value"
+		});
+		const clause = {
+			type: "field",
+			field,
+			operator: operator.operator,
+			values: operator.operator === "eq" ? values : values.slice(0, 1),
+			negated
+		};
+		clauses.push(clause);
+		if (!rawValue.startsWith("(")) {
+			var _values$;
+			trailing = {
+				field,
+				operator: operator.operator,
+				value: (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : ""
+			};
+		}
+	}
+	return {
+		query: { clauses },
+		diagnostics,
+		trailing
+	};
+}
+/** Parse, discarding diagnostics. */
+function parseQuery(input) {
+	return parseQueryWithDiagnostics(input).query;
+}
+//#endregion
+//#region src/lib/query/query-format.ts
+const OPERATOR_SYMBOL = {
+	eq: ":",
+	contains: ":",
+	gt: ">",
+	gte: ">=",
+	lt: "<",
+	lte: "<=",
+	exists: ":"
+};
+/** Quote a value that would otherwise re-parse as something else. */
+function quoteValue(value) {
+	return /[\s"()]/.test(value) || value === "" ? `"${value.replace(/"/g, "")}"` : value;
+}
+/** One clause as text. */
+function formatClause(clause) {
+	var _clause$values$2;
+	const prefix = clause.negated ? "-" : "";
+	if (clause.type === "term") return `${prefix}${quoteValue(clause.value)}`;
+	if (clause.operator === "exists") return `${prefix}${clause.field}:*`;
+	if (clause.operator === "contains") {
+		var _clause$values$;
+		return `${prefix}${clause.field}:*${(_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : ""}*`;
+	}
+	const symbol = OPERATOR_SYMBOL[clause.operator];
+	if (clause.values.length > 1) return `${prefix}${clause.field}${symbol}(${clause.values.map(quoteValue).join(" or ")})`;
+	return `${prefix}${clause.field}${symbol}${quoteValue((_clause$values$2 = clause.values[0]) !== null && _clause$values$2 !== void 0 ? _clause$values$2 : "")}`;
+}
+/** The whole query as text. */
+function formatQuery(query) {
+	return query.clauses.map(formatClause).join(" ");
+}
+/** A short human label for a clause chip. */
+function describeClause(clause) {
+	if (clause.type === "term") return clause.negated ? `not "${clause.value}"` : `"${clause.value}"`;
+	if (clause.operator === "exists") return clause.negated ? `${clause.field} missing` : `${clause.field} present`;
+	if (clause.operator === "contains") {
+		var _clause$values$3;
+		return `${clause.negated ? "not " : ""}${clause.field} ⊃ ${(_clause$values$3 = clause.values[0]) !== null && _clause$values$3 !== void 0 ? _clause$values$3 : ""}`;
 	}
-];
+	const values = clause.values.join(", ");
+	const symbol = OPERATOR_SYMBOL[clause.operator];
+	return `${clause.negated ? "not " : ""}${clause.field} ${symbol === ":" ? "=" : symbol} ${values}`;
+}
 //#endregion
-//#region src/shells/time-series-panel.tsx
-const defaultLabels$3 = {
-	back: "Back to previous range",
-	legend: "Series"
+//#region src/shells/query-bar.tsx
+const defaultLabels$4 = {
+	placeholder: "Search, or filter with field:value",
+	ariaLabel: "Search query",
+	clear: "Clear query",
+	removeClause: (clause) => `Remove ${clause}`,
+	fieldsHeading: "Fields",
+	valuesHeading: "Values",
+	syntaxHint: null
 };
+const MAX_SUGGESTIONS = 8;
 /**
-* TimeSeriesPanel — a chart you can steer.
+* QueryBar — one control for "find this" and "only these".
 *
-* The point of putting the control and the chart in one component is the
-* loop between them: drag across the plot and the window narrows to what you
-* dragged, which re-queries, which redraws the axis you just picked. That
-* only works if someone owns the step back out again — so zoom keeps a
-* history, and the header offers the way back rather than leaving the reader
-* to retype the range they came from.
+* A search box and a row of filter pickers answer halves of the same question
+* and neither can express the other, so people end up using both and holding
+* the combination in their head. Typing the filter is what closes that: the
+* whole question is one string, which means it can be read back, corrected in
+* place, pasted to a colleague, and stored in a URL.
+*
+* The text is the source of truth while the reader is typing; the parsed query
+* is committed on Enter or blur. Anything half-written parses to a plain term
+* rather than an error, so the bar never argues with someone mid-word.
 *
 * @example
 * ```tsx
-* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
-*
-* <TimeSeriesPanel
-*   title="Sessions"
-*   data={points}
-*   series={[{ dataKey: "sessions", name: "Sessions" }]}
-*   range={range}
-*   onRangeChange={setRange}
-*   onRefresh={() => refetch()}
-*   toggleableLegend
+* <QueryBar
+*   value={query}
+*   onChange={setQuery}
+*   fields={[{ name: "path", values: ["/checkout", "/cart"] }]}
+*   showClauses
 * />
 * ```
 */
-function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity = "auto", timeZone, locale, showRangeControl = true, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend = false, annotations, isLoading = false, height = 280, className, chartProps, labels: customLabels, "aria-label": ariaLabel }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels);
-	const [history, setHistory] = (0, react.useState)([]);
-	const [hidden, setHidden] = (0, react.useState)([]);
-	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
-	const visibleSeries = (0, react.useMemo)(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
-	const handleRangeSelect = (0, react.useCallback)((selection) => {
-		setHistory((current) => [...current, range].slice(-10));
-		onRangeChange((0, _reopt_ai_opt_charts.toAbsoluteRange)(selection));
-	}, [range, onRangeChange]);
-	const goBack = (0, react.useCallback)(() => {
-		setHistory((current) => {
-			const previous = current[current.length - 1];
-			if (previous) onRangeChange(previous);
-			return current.slice(0, -1);
-		});
-	}, [onRangeChange]);
-	const setRange = (0, react.useCallback)((next) => {
-		setHistory([]);
-		onRangeChange(next);
-	}, [onRangeChange]);
-	const toggleSeries = (0, react.useCallback)((dataKey) => {
-		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "flex flex-col", className),
-		"aria-label": ariaLabel,
-		"data-opt-id": "Y0XCY",
-		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "gap-element flex min-w-0 flex-col",
-				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-					className: "text-text-primary truncate text-base font-semibold",
-					children: title
-				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_text_truncate.cn("text-text-secondary", "truncate text-sm"),
-					children: description
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "gap-element flex flex-wrap items-center",
+function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4), customLabels);
+	const inputRef = (0, react.useRef)(null);
+	const [text, setText] = (0, react.useState)(() => formatQuery(value));
+	const [focused, setFocused] = (0, react.useState)(false);
+	const [highlighted, setHighlighted] = (0, react.useState)(0);
+	const committedRef = (0, react.useRef)(formatQuery(value));
+	(0, react.useEffect)(() => {
+		const next = formatQuery(value);
+		if (next === committedRef.current) return;
+		committedRef.current = next;
+		if (!focused) setText(next);
+	}, [value, focused]);
+	const parsed = (0, react.useMemo)(() => parseQueryWithDiagnostics(text), [text]);
+	const commit = (0, react.useCallback)((nextText) => {
+		const nextQuery = parseQueryWithDiagnostics(nextText).query;
+		committedRef.current = formatQuery(nextQuery);
+		onChange(nextQuery);
+	}, [onChange]);
+	const suggestions = useSuggestions(text, parsed.trailing, fields);
+	const applySuggestion = (0, react.useCallback)((suggestion) => {
+		var _inputRef$current;
+		const nextText = suggestion.replace(text);
+		setText(nextText);
+		if (suggestion.kind === "value") commit(nextText);
+		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+		setHighlighted(0);
+	}, [text, commit]);
+	const handleKeyDown = (event) => {
+		if (suggestions.length > 0 && focused) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setHighlighted((current) => (current + 1) % suggestions.length);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setHighlighted((current) => (current - 1 + suggestions.length) % suggestions.length);
+				return;
+			}
+			if (event.key === "Tab" || event.key === "Enter" && highlighted > 0) {
+				event.preventDefault();
+				applySuggestion(suggestions[highlighted]);
+				return;
+			}
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commit(text);
+			return;
+		}
+		if (event.key === "Escape") {
+			var _inputRef$current2;
+			setText(committedRef.current);
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+		}
+	};
+	const showSuggestions = focused && suggestions.length > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("relative flex min-w-0 flex-col gap-1.5", className),
+		"data-opt-id": "JSVZ1",
+		"data-opt-slug": "query-bar.QueryBar",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_text_truncate.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_text_truncate.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
 				children: [
-					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-						variant: "ghost",
-						size: "sm",
-						onClick: goBack,
-						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, {
-							className: "h-3.5 w-3.5",
-							"aria-hidden": "true"
-						}),
-						children: labels.back
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+						className: "text-text-tertiary size-4 shrink-0",
+						"aria-hidden": true
 					}),
-					actions,
-					showRangeControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeRangeControl, {
-						value: range,
-						onChange: setRange,
-						presets,
-						recentRanges,
-						timeZone,
-						locale,
-						refresh,
-						onRefreshChange,
-						onRefresh,
-						isLoading,
-						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: inputRef,
+						type: "text",
+						role: "combobox",
+						"aria-expanded": showSuggestions,
+						"aria-controls": "query-bar-suggestions",
+						"aria-autocomplete": "list",
+						"aria-label": labels.ariaLabel,
+						placeholder: labels.placeholder,
+						disabled,
+						className: require_text_truncate.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
+						value: text,
+						onChange: (event) => {
+							setText(event.target.value);
+							setHighlighted(0);
+							if (live) commit(event.target.value);
+						},
+						onFocus: () => setFocused(true),
+						onBlur: () => {
+							window.setTimeout(() => setFocused(false), 120);
+							if (!live) commit(text);
+						},
+						onKeyDown: handleKeyDown
+					}),
+					text.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": labels.clear,
+						title: labels.clear,
+						className: require_text_truncate.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						onClick: () => {
+							setText("");
+							commit("");
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							className: "size-3.5",
+							"aria-hidden": true
+						})
 					})
 				]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "px-2 pb-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_text_truncate._objectSpread2({
-				data,
-				series: visibleSeries,
-				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
-				to: resolved === null || resolved === void 0 ? void 0 : resolved.to,
-				granularity,
-				timeZone,
-				locale,
-				height,
-				selectable: true,
-				onRangeSelect: handleRangeSelect,
-				annotations,
-				showLegend: series.length > 1,
-				legendOptions: toggleableLegend ? {
-					onClick: toggleSeries,
-					inactiveKeys: hidden
-				} : void 0,
-				"aria-label": typeof title === "string" ? `${title} time series` : ariaLabel
-			}, chartProps))
-		})]
+			}),
+			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: "query-bar-suggestions",
+				role: "listbox",
+				className: require_text_truncate.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
+				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": index === highlighted,
+					className: require_text_truncate.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
+					onMouseEnter: () => setHighlighted(index),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => applySuggestion(suggestion),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-primary truncate font-mono",
+						children: suggestion.label
+					}), suggestion.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-tertiary shrink-0 text-xs",
+						children: suggestion.hint
+					})]
+				}) }, `${suggestion.kind}-${suggestion.label}`))
+			}),
+			showClauses && value.clauses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: value.clauses.map((clause, index) => {
+					const label = describeClause(clause);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: require_text_truncate.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": labels.removeClause(label),
+							className: "hover:text-text-primary cursor-pointer",
+							onClick: () => {
+								const next = removeClause(value, index);
+								setText(formatQuery(next));
+								committedRef.current = formatQuery(next);
+								onChange(next);
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+								className: "size-3",
+								"aria-hidden": true
+							})
+						})]
+					}, `${label}-${index}`);
+				})
+			}),
+			parsed.diagnostics.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
+			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-text-tertiary text-xs",
+				children: labels.syntaxHint
+			})
+		]
 	});
 }
-TimeSeriesPanel.displayName = "TimeSeriesPanel";
+QueryBar.displayName = "QueryBar";
+function QueryDiagnostics({ diagnostics }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
+		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+				className: "font-mono",
+				children: diagnostic.text
+			}),
+			" —",
+			" ",
+			diagnostic.message
+		] }, `${diagnostic.at}-${index}`))
+	});
+}
+/**
+* What to offer, based on the token under the cursor.
+*
+* Completing fields is the part that makes the syntax discoverable at all —
+* nobody guesses that `utm_source` is a field they can filter on. Once the
+* field is chosen, its known values are the second half of the same guess.
+*/
+function useSuggestions(text, trailing, fields) {
+	return (0, react.useMemo)(() => {
+		const lastSpace = text.lastIndexOf(" ");
+		const head = lastSpace === -1 ? "" : text.slice(0, lastSpace + 1);
+		const token = text.slice(lastSpace + 1);
+		if (trailing) {
+			var _field$values;
+			const field = fields.find((candidate) => candidate.name === trailing.field);
+			const values = (_field$values = field === null || field === void 0 ? void 0 : field.values) !== null && _field$values !== void 0 ? _field$values : [];
+			const typed = trailing.value.toLowerCase();
+			return values.filter((value) => value.toLowerCase().includes(typed)).slice(0, MAX_SUGGESTIONS).map((value) => ({
+				kind: "value",
+				label: `${trailing.field}:${value}`,
+				replace: () => `${head}${trailing.field}:${/[\s"()]/.test(value) ? `"${value}"` : value} `
+			}));
+		}
+		const bare = token.replace(/^-/, "").toLowerCase();
+		if (bare.length === 0) return [];
+		return fields.filter((field) => field.name.toLowerCase().includes(bare)).slice(0, MAX_SUGGESTIONS).map((field) => ({
+			kind: "field",
+			label: `${field.name}:`,
+			hint: field.hint,
+			replace: () => `${head}${token.startsWith("-") ? "-" : ""}${field.name}:`
+		}));
+	}, [
+		text,
+		trailing,
+		fields
+	]);
+}
 //#endregion
-//#region src/shells/log-table.tsx
-const HIDE_BELOW = {
-	always: "",
-	sm: "hidden @[40rem]/log:flex",
-	md: "hidden @[46rem]/log:flex",
-	lg: "hidden @[58rem]/log:flex",
-	xl: "hidden @[70rem]/log:flex"
-};
-const ROW_HEIGHT = {
-	compact: 26,
-	normal: 32,
-	comfortable: 40
-};
-const DENSITY_TEXT = {
-	compact: "text-[11px]",
-	normal: "text-xs",
-	comfortable: "text-sm"
-};
-const defaultLabels$2 = {
-	listLabel: "Log",
-	loadingMore: "Loading earlier entries…",
-	endOfResults: "That is every entry in this range.",
-	filterFor: (value) => `Filter for ${value}`,
-	filterOut: (value) => `Filter out ${value}`,
-	sortAscending: "Sort ascending",
-	sortDescending: "Sort descending",
-	moveLeft: (column) => `Move ${column} left`,
-	moveRight: (column) => `Move ${column} right`
-};
-/** Rows rendered beyond the viewport on each side, so a fast scroll stays filled. */
-const OVERSCAN = 10;
+//#region src/lib/use-auto-refresh.ts
 /**
-* A stable hue per value. Colour does real work in a log — the eye groups by it
-* long before it reads the text — so the same event name has to land on the
-* same hue on every render and in every session, which rules out an index into
-* a palette.
+* A refresh timer that waits for its own work.
+*
+* A plain `setInterval` fires on a schedule regardless of whether the previous
+* query came back, so a five-second interval over a seven-second query stacks
+* requests until something gives. Chaining the next wait onto the settled
+* promise keeps exactly one refresh in flight, and a rejection stops the loop
+* instead of hammering an endpoint that is already failing.
 */
-function hueOf(value) {
-	let hash = 0;
-	for (let index = 0; index < value.length; index += 1) hash = hash * 31 + value.charCodeAt(index) | 0;
-	return Math.abs(hash) % 360;
+function useAutoRefresh({ interval, paused = false, onRefresh }) {
+	const callbackRef = (0, react.useRef)(onRefresh);
+	callbackRef.current = onRefresh;
+	(0, react.useEffect)(() => {
+		if (paused || interval <= 0 || !callbackRef.current) return;
+		let cancelled = false;
+		let timer;
+		const schedule = () => {
+			timer = setTimeout(async () => {
+				if (cancelled) return;
+				try {
+					var _callbackRef$current;
+					await ((_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef));
+				} catch (_unused) {
+					return;
+				}
+				if (!cancelled) schedule();
+			}, interval);
+		};
+		schedule();
+		return () => {
+			cancelled = true;
+			if (timer) clearTimeout(timer);
+		};
+	}, [interval, paused]);
+}
+//#endregion
+//#region src/shells/time-range-control.tsx
+const defaultLabels$3 = {
+	trigger: "Select time range",
+	invalid: "Invalid time range",
+	last: (duration) => `Last ${duration}`,
+	next: (duration) => `Next ${duration}`,
+	quickSelect: "Quick select",
+	apply: "Apply",
+	update: "Update",
+	refresh: "Refresh",
+	commonlyUsed: "Commonly used",
+	recentlyUsed: "Recently used",
+	start: "Start",
+	end: "End",
+	startHint: "Absolute time or date math, e.g. now-7d",
+	autoRefresh: "Auto refresh",
+	autoRefreshOff: "Off",
+	every: (duration) => `Every ${duration}`,
+	previous: "Previous window",
+	nextWindow: "Next window",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	thisUnit: (unit) => `This ${unit}`,
+	units: {
+		s: "seconds",
+		m: "minutes",
+		h: "hours",
+		d: "days",
+		w: "weeks",
+		M: "months",
+		y: "years"
+	}
+};
+const QUICK_UNITS = [
+	"m",
+	"h",
+	"d",
+	"w",
+	"M",
+	"y"
+];
+const REFRESH_INTERVALS = [
+	0,
+	5e3,
+	1e4,
+	3e4,
+	6e4,
+	3e5
+];
+function selectValue(value) {
+	var _value$;
+	return Array.isArray(value) ? (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : "" : value;
 }
-const EM_DASH = "—";
 /**
-* A column with nothing in it is a fact about the entry, not a value. Dimming
-* every absence the same way lets the eye skip the gaps while scanning, instead
-* of reading a dash as though it were data.
+* What the trigger says.
+*
+* A window anchored to `now` deserves its intent ("Last 7 days"), not two
+* timestamps the reader has to subtract. Everything else gets both ends
+* spelled out. A duration that does not divide into whole minutes is prefixed
+* with `~` rather than rounded silently.
 */
-const ABSENT = "text-text-tertiary/50";
-function columnStyle(column) {
-	return column.width ? {
-		width: column.width,
-		flex: "0 0 auto"
-	} : {
-		flex: "1 1 0%",
-		minWidth: 0
+function describeRange(range, labels, options) {
+	const window = (0, _reopt_ai_opt_charts.measureTimeWindow)(range, {
+		timeZone: options.timeZone,
+		now: options.now
+	});
+	if (window.isInvalid) return {
+		text: labels.invalid,
+		isInvalid: true
+	};
+	const fromParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.from);
+	const toParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.to);
+	if ((fromParts === null || fromParts === void 0 ? void 0 : fromParts.roundUnit) && fromParts.count === 0 && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === fromParts.roundUnit && toParts.count === 0) return {
+		text: labels.thisUnit((0, _reopt_ai_opt_charts.formatCountUnit)(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
+		isInvalid: false
+	};
+	if ((0, _reopt_ai_opt_charts.isRelativeToNow)(range)) {
+		var _toParts$count;
+		const anchoredAtEnd = ((_toParts$count = toParts === null || toParts === void 0 ? void 0 : toParts.count) !== null && _toParts$count !== void 0 ? _toParts$count : 0) === 0;
+		const parts = anchoredAtEnd ? fromParts : toParts;
+		const bothSnapped = (parts === null || parts === void 0 ? void 0 : parts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit) && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit);
+		const counted = parts && parts.count > 0 ? (0, _reopt_ai_opt_charts.formatCountUnit)(parts.roundUnit && bothSnapped ? parts.count + 1 : parts.count, parts.unit, options.locale) : null;
+		const exact = counted !== null && (!(parts === null || parts === void 0 ? void 0 : parts.roundUnit) || bothSnapped);
+		const duration = exact ? counted : (0, _reopt_ai_opt_charts.formatDuration)(window.duration, options.locale);
+		const prefix = exact || (0, _reopt_ai_opt_charts.isExactMinutes)(window.duration) ? "" : "~";
+		return {
+			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
+			isInvalid: false
+		};
+	}
+	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
+	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
+	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
+	return {
+		text: from === to ? from : `${from} – ${to}`,
+		isInvalid: false
 	};
 }
 /**
-* LogTable — a windowed table for entries that keep arriving.
-*
-* Written by hand rather than delegated to a data grid for the two things a log
-* needs that a grid does not: rows are inserted at the *top* while the reader
-* is partway down, which needs a scroll correction applied before paint, and
-* "am I at the newest row?" has to be answerable from the scroll container to
-* decide whether to follow the tail or hold position.
+* TimeRangeControl — the window as an expression, not two frozen instants.
 *
-* What it takes from a data grid is the part readers actually reach for:
-* columns are data, so a caller can let people add, drop and reorder them; a
-* cell offers to filter for or against its own value; and density is a setting
-* rather than a constant.
+* Holding `{ from: "now-7d", to: "now" }` instead of a resolved pair is what
+* makes a saved board, a shared link and an auto-refresh timer all mean the
+* same thing tomorrow that they mean today. Around that sit the moves people
+* actually make on a chart: jump to a named window, step the same width back
+* and forth to compare, widen when the interesting thing is just off screen,
+* and let it re-query on a timer while they watch.
 *
 * @example
 * ```tsx
-* <LogTable
-*   rows={rows}
-*   getRowId={(row) => row.id}
-*   columns={[
-*     { id: "time", header: "Time", width: "9rem", mono: true, value: (r) => r.time },
-*     { id: "name", header: "Event", width: "14rem", field: "name", marker: true, value: (r) => r.name },
-*     { id: "path", header: "Path", field: "path", value: (r) => r.path },
-*   ]}
-*   onCellAction={(action) => setQuery(applyCellAction(query, action))}
+* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+*
+* <TimeRangeControl
+*   value={range}
+*   onChange={setRange}
+*   timeZone="Asia/Seoul"
+*   showWindowButtons
+*   onRefresh={() => refetch()}
 * />
 * ```
 */
-function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, onLoadMore, hasMore = false, loadingMore = false, prepending = false, onFollowChange, isNew, sort = null, onSortChange, onCellAction, highlightTerms, onColumnMove, density = "normal", showHeader = true, emptyState, labels: customLabels, className }, ref) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
-	const rowHeight = ROW_HEIGHT[density];
-	const scrollRef = (0, react.useRef)(null);
-	const [scrollTop, setScrollTop] = (0, react.useState)(0);
-	const [viewportHeight, setViewportHeight] = (0, react.useState)(0);
-	const followingRef = (0, react.useRef)(true);
-	const previousTopIdRef = (0, react.useRef)(null);
-	const previousLengthRef = (0, react.useRef)(0);
-	(0, react.useImperativeHandle)(ref, () => ({
-		scrollToTop: () => {
-			const container = scrollRef.current;
-			if (!container) return;
-			container.scrollTop = 0;
-			setScrollTop(0);
-			if (!followingRef.current) {
-				followingRef.current = true;
-				onFollowChange === null || onFollowChange === void 0 || onFollowChange(true);
-			}
-		},
-		revealRow: (id) => {
-			const index = rows.findIndex((row) => getRowId(row) === id);
-			const container = scrollRef.current;
-			if (index === -1 || !container) return;
-			const top = index * rowHeight;
-			const bottom = top + rowHeight;
-			if (top < container.scrollTop) container.scrollTop = top;
-			else if (bottom > container.scrollTop + container.clientHeight) container.scrollTop = bottom - container.clientHeight;
-		}
+function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton = true, showWindowButtons = true, zoomFactor = .5, refresh, onRefreshChange, onRefresh, isLoading = false, disabled = false, className, labels: customLabels, "aria-label": ariaLabel }) {
+	var _refresh$interval, _refresh$paused, _refresh$interval2;
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels), {}, { units: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const [open, setOpen] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(null);
+	const [quickCount, setQuickCount] = (0, react.useState)("15");
+	const [quickUnit, setQuickUnit] = (0, react.useState)("m");
+	const editing = draft !== null && draft !== void 0 ? draft : value;
+	const hasChanges = draft !== null && (draft.from !== value.from || draft.to !== value.to);
+	const description = (0, react.useMemo)(() => describeRange(value, labels, {
+		locale,
+		timeZone
 	}), [
-		onFollowChange,
-		rows,
-		getRowId,
-		rowHeight
-	]);
-	(0, react.useEffect)(() => {
-		const container = scrollRef.current;
-		if (!container) return;
-		const observer = new ResizeObserver(() => setViewportHeight(container.clientHeight));
-		observer.observe(container);
-		setViewportHeight(container.clientHeight);
-		return () => observer.disconnect();
-	}, []);
-	/**
-	* Report whether the list is pinned to the newest row.
-	*
-	* Called from more than the scroll handler on purpose: the list can arrive at
-	* the top without a scroll event — a reset, a jump to newest, a shorter
-	* result set — and a stale "not following" would silently divert every live
-	* row into a held-back pile.
-	*/
-	const syncFollowing = (0, react.useCallback)((container) => {
-		const following = container.scrollTop <= rowHeight;
-		if (following === followingRef.current) return;
-		followingRef.current = following;
-		onFollowChange === null || onFollowChange === void 0 || onFollowChange(following);
-	}, [onFollowChange, rowHeight]);
-	/**
-	* Hold the reader's place when rows arrive above them.
-	*
-	* Runs before paint: by the time the browser draws, the scroll offset has
-	* already absorbed the inserted height, so the content under the cursor never
-	* moves. Skipped while following, where the whole point is to stay at the top.
-	*/
-	(0, react.useLayoutEffect)(() => {
-		const container = scrollRef.current;
-		const previousTopId = previousTopIdRef.current;
-		previousTopIdRef.current = rows.length ? getRowId(rows[0]) : null;
-		const previousLength = previousLengthRef.current;
-		previousLengthRef.current = rows.length;
-		if (!container) return;
-		syncFollowing(container);
-		if (!prepending || followingRef.current || !previousTopId) return;
-		if (rows.length <= previousLength) return;
-		const prepended = rows.findIndex((row) => getRowId(row) === previousTopId);
-		if (prepended <= 0) return;
-		container.scrollTop += prepended * rowHeight;
-		setScrollTop(container.scrollTop);
-	}, [
-		rows,
-		getRowId,
-		prepending,
-		rowHeight,
-		syncFollowing
-	]);
-	/**
-	* Page forward when the rows do not reach the bottom of the viewport.
-	*
-	* Without this the list only advances on a scroll event, so a tall screen —
-	* or a filter matching few rows per page — stops at the first page with no
-	* way to ask for more.
-	*/
-	(0, react.useEffect)(() => {
-		const container = scrollRef.current;
-		if (!container || !hasMore || loadingMore || !onLoadMore) return;
-		if (container.scrollHeight <= container.clientHeight) onLoadMore();
-	}, [
-		hasMore,
-		loadingMore,
-		onLoadMore,
-		rows.length,
-		viewportHeight
+		value,
+		locale,
+		timeZone,
+		customLabels
 	]);
-	const handleScroll = (0, react.useCallback)((event) => {
-		const container = event.currentTarget;
-		setScrollTop(container.scrollTop);
-		syncFollowing(container);
-		const remaining = container.scrollHeight - container.scrollTop - container.clientHeight;
-		if (hasMore && !loadingMore && remaining < container.clientHeight) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+	const boundState = (0, react.useCallback)((expression) => (0, _reopt_ai_opt_charts.parseTimeExpression)(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
+	const commit = (0, react.useCallback)((range) => {
+		setDraft(null);
+		onChange(range);
+	}, [onChange]);
+	const apply = (0, react.useCallback)(() => {
+		if (draft) commit(draft);
+		else onRefresh === null || onRefresh === void 0 || onRefresh();
 	}, [
-		hasMore,
-		loadingMore,
-		onLoadMore,
-		syncFollowing
-	]);
-	const totalHeight = rows.length * rowHeight;
-	const firstVisible = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
-	const visibleCount = Math.ceil((viewportHeight || 480) / rowHeight) + 20;
-	const lastVisible = Math.min(rows.length, firstVisible + visibleCount);
-	const visibleRows = (0, react.useMemo)(() => rows.slice(firstVisible, lastVisible), [
-		rows,
-		firstVisible,
-		lastVisible
+		draft,
+		commit,
+		onRefresh
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("@container/log flex min-h-0 flex-col", className),
-		"data-opt-id": "3ZR82",
-		"data-opt-slug": "log-table.LogTable",
-		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
-			columns,
-			sort,
-			onSortChange,
-			onColumnMove,
-			density,
-			labels
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: scrollRef,
-			onScroll: handleScroll,
-			className: "relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
-			role: "listbox",
-			"aria-label": labels.listLabel,
-			"aria-activedescendant": selectedId ? `log-row-${selectedId}` : void 0,
-			tabIndex: 0,
-			children: [
-				rows.length === 0 ? emptyState : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: { height: totalHeight },
-					className: "relative",
-					children: visibleRows.map((row, index) => {
-						var _isNew;
-						const id = getRowId(row);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableRow, {
-							id,
-							row,
-							columns,
-							top: (firstVisible + index) * rowHeight,
-							height: rowHeight,
-							density,
-							selected: id === selectedId,
-							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
-							onSelect,
-							onCellAction,
-							highlightTerms,
-							labels
-						}, id);
-					})
-				}),
-				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
-						size: "sm",
-						"aria-hidden": true
-					}), labels.loadingMore]
-				}),
-				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_text_truncate.cn("text-text-tertiary", "py-3 text-center text-xs"),
-					children: labels.endOfResults
-				})
-			]
-		})]
+	const commitOnEnter = (0, react.useCallback)((event) => {
+		if (event.key !== "Enter") return;
+		apply();
+		setOpen(false);
+	}, [apply]);
+	const applyQuick = (0, react.useCallback)(() => {
+		const count = Number(quickCount);
+		if (!Number.isFinite(count) || count <= 0) return;
+		commit({
+			from: `now-${Math.round(count)}${quickUnit}`,
+			to: "now"
+		});
+		setOpen(false);
+	}, [
+		quickCount,
+		quickUnit,
+		commit
+	]);
+	const step = (0, react.useCallback)((direction) => {
+		const next = (0, _reopt_ai_opt_charts.shiftTimeRange)(value, direction, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	const zoom = (0, react.useCallback)((factor) => {
+		const next = (0, _reopt_ai_opt_charts.zoomTimeRange)(value, factor, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	useAutoRefresh({
+		interval: (_refresh$interval = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval !== void 0 ? _refresh$interval : 0,
+		paused: (_refresh$paused = refresh === null || refresh === void 0 ? void 0 : refresh.paused) !== null && _refresh$paused !== void 0 ? _refresh$paused : true,
+		onRefresh
 	});
-}
-/**
-* LogTable — see {@link LogTableInner}.
-*
-* The cast preserves the row generic through `forwardRef`, which otherwise
-* widens it to its constraint and takes the column callbacks' types with it.
-*/
-const LogTable = (0, react.forwardRef)(LogTableInner);
-function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "row",
-		className: require_text_truncate.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
-		style: { height: ROW_HEIGHT[density] },
-		children: columns.map((column, index) => {
-			var _column$priority;
-			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
-			const sortable = column.sortable && onSortChange;
-			const columnLabel = typeof column.header === "string" ? column.header : column.id;
-			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					"aria-hidden": true,
-					className: "size-1.5 shrink-0"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate",
-					children: column.header
-				}),
-				active && (sort.direction === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {
-					className: "size-3 shrink-0",
-					"aria-hidden": true
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
-					className: "size-3 shrink-0",
-					"aria-hidden": true
-				}))
-			] });
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				role: "columnheader",
-				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
-				className: require_text_truncate.cn("group/header flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
-				style: columnStyle(column),
-				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
-					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
-					onClick: () => onSortChange({
-						columnId: column.id,
-						direction: active && sort.direction === "desc" ? "asc" : "desc"
-					}),
-					children: content
-				}) : content, onColumnMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: require_text_truncate.cn("ml-auto flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/header:opacity-100 focus-within:opacity-100"),
-					children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "hover:text-text-primary cursor-pointer",
-						"aria-label": labels.moveLeft(columnLabel),
-						title: labels.moveLeft(columnLabel),
-						onClick: () => onColumnMove(column.id, "left"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
-							className: "size-3",
-							"aria-hidden": true
-						})
-					}), index < columns.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "hover:text-text-primary cursor-pointer",
-						"aria-label": labels.moveRight(columnLabel),
-						title: labels.moveRight(columnLabel),
-						onClick: () => onColumnMove(column.id, "right"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-							className: "size-3",
-							"aria-hidden": true
-						})
+	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("bg-surface inline-flex items-center rounded-lg border", require_text_truncate.OPT_BORDER, className),
+		role: "group",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
+		"data-opt-id": "3WJ8H",
+		"data-opt-slug": "time-range-control.TimeRangeControl",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
+					className: require_text_truncate.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+					disabled,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
+						className: "text-text-tertiary h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate text-sm",
+						children: description.text
 					})]
-				})]
-			}, column.id);
-		})
-	});
-}
-function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, highlightTerms, labels }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "option",
-		"aria-selected": selected,
-		tabIndex: -1,
-		id: `log-row-${id}`,
-		"data-log-row-id": id,
-		onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(id),
-		onKeyDown: (event) => {
-			if (event.key !== "Enter" && event.key !== " ") return;
-			event.preventDefault();
-			onSelect === null || onSelect === void 0 || onSelect(id);
-		},
-		style: {
-			top,
-			height
-		},
-		className: require_text_truncate.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
-		children: columns.map((column) => {
-			var _column$priority2;
-			const raw = column.value(row);
-			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_text_truncate.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
-				style: columnStyle(column),
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverContent, {
+					className: "gap-group flex w-80 flex-col",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.quickSelect
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
+										"aria-label": labels.quickSelect,
+										type: "number",
+										min: 1,
+										size: "sm",
+										className: "w-20",
+										value: quickCount,
+										onChange: (event) => setQuickCount(event.target.value),
+										onKeyDown: (event) => {
+											if (event.key === "Enter") applyQuick();
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
+										value: quickUnit,
+										setValue: (next) => setQuickUnit(selectValue(next)),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
+											minWidth: 110,
+											"aria-label": labels.quickSelect
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
+											value: unit,
+											children: labels.units[unit]
+										}, unit)) })]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: applyQuick,
+										children: labels.apply
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
+								label: labels.start,
+								size: "sm",
+								value: editing.from,
+								error: boundState(editing.from),
+								hint: labels.startHint,
+								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { from: event.target.value })),
+								onKeyDown: commitOnEnter
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
+								label: labels.end,
+								size: "sm",
+								value: editing.to,
+								error: boundState(editing.to),
+								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { to: event.target.value })),
+								onKeyDown: commitOnEnter
+							})]
+						}),
+						presets && presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.commonlyUsed,
+							items: presets,
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.recentlyUsed,
+							items: recentRanges.slice(0, 5),
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						onRefreshChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.autoRefresh
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
+								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
+								setValue: (next) => {
+									const interval = Number(selectValue(next));
+									onRefreshChange({
+										interval,
+										paused: interval === 0
+									});
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
+									minWidth: 140,
+									"aria-label": labels.autoRefresh
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
+									value: String(interval),
+									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
+								}, interval)) })]
+							})]
+						})
+					]
+				})]
+			}),
+			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_text_truncate.cn("flex items-center border-l", "border border-border"),
+				role: "group",
+				"aria-label": labels.previous,
 				children: [
-					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"aria-hidden": true,
-						className: "size-1.5 shrink-0 rounded-full",
-						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.previous,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_text_truncate.cn("min-w-0 flex-1", !column.truncate && "truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
-						title: column.truncate ? void 0 : text || void 0,
-						children: column.render ? column.render(row) : text ? column.truncate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TextTruncate, {
-							text,
-							truncation: column.truncate,
-							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
-								text: shown,
-								search: highlightTerms
-							}) : shown
-						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
-							text,
-							search: highlightTerms
-						}) : text : EM_DASH
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomIn,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(-zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					}),
-					onCellAction && column.field && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellActions, {
-						field: column.field,
-						value: text,
-						onAction: onCellAction,
-						labels
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomOut,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.nextWindow,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					})
 				]
-			}, column.id);
-		})
-	});
-}
-/**
-* Memoized because a live log re-renders several times a second while almost
-* every visible row is unchanged.
-*/
-const LogTableRow = (0, react.memo)(LogTableRowImpl);
-/**
-* The two questions a reader has about a value they just spotted: show me only
-* these, and get these out of my way.
-*
-* Revealed on hover rather than always drawn — a log is scanned, and a pair of
-* buttons on every cell of every row is a wall of chrome. They stay in the tab
-* order regardless, since hover is not an interaction everyone has.
-*/
-function CellActions({ field, value, onAction, labels }) {
-	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_text_truncate.cn("bg-surface/90 ml-auto flex shrink-0 items-center gap-0.5 rounded pl-1", "opacity-0 transition-opacity", "group-hover/cell:opacity-100 focus-within:opacity-100"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: button,
-			title: labels.filterFor(value),
-			"aria-label": labels.filterFor(value),
-			onClick: (event) => {
-				event.stopPropagation();
-				onAction({
-					field,
-					value,
-					intent: "include"
-				});
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
-				className: "size-3",
-				"aria-hidden": true
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: button,
-			title: labels.filterOut(value),
-			"aria-label": labels.filterOut(value),
-			onClick: (event) => {
-				event.stopPropagation();
-				onAction({
-					field,
-					value,
-					intent: "exclude"
-				});
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
-				className: "size-3",
-				"aria-hidden": true
+			}),
+			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_text_truncate.cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+					variant: hasChanges ? "primary" : "secondary",
+					size: "sm",
+					loading: isLoading,
+					disabled: disabled || description.isInvalid,
+					onClick: apply,
+					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					title: refreshLabel,
+					children: hasChanges ? labels.update : labels.refresh
+				})
 			})
-		})]
-	});
-}
-//#endregion
-//#region src/lib/query/query-ast.ts
-const EMPTY_QUERY = { clauses: [] };
-/** Whether a query constrains anything at all. */
-function isEmptyQuery(query) {
-	return !query || query.clauses.length === 0;
-}
-function sameClause(a, b) {
-	if (a.type !== b.type) return false;
-	if (a.type === "term" && b.type === "term") return a.value === b.value && a.negated === b.negated;
-	const fieldA = a;
-	const fieldB = b;
-	return fieldA.field === fieldB.field && fieldA.operator === fieldB.operator && fieldA.negated === fieldB.negated && fieldA.values.length === fieldB.values.length && fieldA.values.every((value, index) => value === fieldB.values[index]);
-}
-/** Add a clause unless an identical one is already there. */
-function addClause(query, clause) {
-	if (query.clauses.some((existing) => sameClause(existing, clause))) return query;
-	return { clauses: [...query.clauses, clause] };
-}
-/**
-* Constrain a field to a value — what a cell's "filter for this" action does.
-*
-* Applying the opposite of a constraint already present replaces it rather than
-* adding it: `status:200` then "filter out 200" should read as one changed
-* mind, not as a query that can never match.
-*/
-function withFieldValue(query, field, value, options = {}) {
-	var _options$negated, _options$operator;
-	const negated = (_options$negated = options.negated) !== null && _options$negated !== void 0 ? _options$negated : false;
-	const operator = (_options$operator = options.operator) !== null && _options$operator !== void 0 ? _options$operator : "eq";
-	return { clauses: [...query.clauses.filter((clause) => !(clause.type === "field" && clause.field === field && clause.operator === operator && clause.values.length === 1 && clause.values[0] === value)), {
-		type: "field",
-		field,
-		operator,
-		values: [value],
-		negated
-	}] };
-}
-/** Drop every clause naming `field`. */
-function withoutField(query, field) {
-	return { clauses: query.clauses.filter((clause) => clause.type !== "field" || clause.field !== field) };
-}
-/** Drop the clause at `index`, for a removable chip. */
-function removeClause(query, index) {
-	return { clauses: query.clauses.filter((_, at) => at !== index) };
-}
-/** Every field the query names, in the order they first appear. */
-function queryFields(query) {
-	const seen = [];
-	for (const clause of query.clauses) if (clause.type === "field" && !seen.includes(clause.field)) seen.push(clause.field);
-	return seen;
-}
-/** The values a field is constrained to, if any — for showing a filter as active. */
-function fieldValues(query, field) {
-	return query.clauses.flatMap((clause) => clause.type === "field" && clause.field === field && !clause.negated ? clause.values : []);
-}
-/**
-* Fold a cell action into the query.
-*
-* The pair of buttons on a log cell is the fastest path from "I noticed this
-* value" to a filtered view, and the reason it works is that the result is a
-* query the reader can then see, edit and share — not a hidden filter stack
-* with its own rules.
-*/
-function applyCellAction(query, action) {
-	return withFieldValue(query, action.field, action.value, { negated: action.intent === "exclude" });
-}
-//#endregion
-//#region src/lib/query/query-parse.ts
-const FIELD_NAME = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
-/**
-* Split on whitespace, but keep quoted runs and parenthesised groups whole.
-*
-* An unterminated quote or group swallows the rest of the line rather than
-* erroring: the reader is mid-word, and the alternative is the query flickering
-* between two different meanings as they type the closing character.
-*/
-function tokenize(input) {
-	const tokens = [];
-	let index = 0;
-	while (index < input.length) {
-		while (index < input.length && /\s/.test(input[index])) index += 1;
-		if (index >= input.length) break;
-		const start = index;
-		let text = "";
-		let quoted = false;
-		let atTokenStart = true;
-		let depth = 0;
-		while (index < input.length) {
-			const char = input[index];
-			if (char === "\"") {
-				if (atTokenStart) quoted = true;
-				atTokenStart = false;
-				index += 1;
-				while (index < input.length && input[index] !== "\"") {
-					text += input[index];
-					index += 1;
-				}
-				index += 1;
-				continue;
-			}
-			if (char === "(") depth += 1;
-			if (char === ")") depth = Math.max(0, depth - 1);
-			if (/\s/.test(char) && depth === 0) break;
-			atTokenStart = false;
-			text += char;
-			index += 1;
-		}
-		if (text.length > 0 || quoted) tokens.push({
-			text,
-			at: start,
-			quoted
-		});
-	}
-	return tokens;
-}
-/** `(a or b)` → `["a", "b"]`; anything else is a single value. */
-function readValues(raw) {
-	const trimmed = raw.trim();
-	if (!trimmed.startsWith("(")) return [stripQuotes(trimmed)];
-	return trimmed.replace(/^\(/, "").replace(/\)$/, "").split(/\s+or\s+/i).map((part) => stripQuotes(part.trim())).filter((part) => part.length > 0);
+		]
+	});
 }
-function stripQuotes(value) {
-	if (value.length >= 2 && value.startsWith("\"") && value.endsWith("\"")) return value.slice(1, -1);
-	return value.replace(/^"/, "");
+TimeRangeControl.displayName = "TimeRangeControl";
+function IconButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
+	});
 }
-const OPERATORS = [
+function RangeList({ title, items, onPick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-element flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-text-primary text-xs font-medium",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "grid grid-cols-2 gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_text_truncate.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_text_truncate.OPT_TEXT_SECONDARY),
+				onClick: () => onPick(item.range),
+				children: item.label
+			}) }, `${item.label}-${index}`))
+		})]
+	});
+}
+/**
+* The windows most analytics tools open with. Exported so a caller gets a
+* sensible list without inventing date math of their own.
+*/
+const DEFAULT_TIME_PRESETS = [
 	{
-		symbol: ">=",
-		operator: "gte"
+		label: "Last 15 minutes",
+		range: {
+			from: "now-15m",
+			to: "now"
+		}
 	},
 	{
-		symbol: "<=",
-		operator: "lte"
+		label: "Last hour",
+		range: {
+			from: "now-1h",
+			to: "now"
+		}
 	},
 	{
-		symbol: ":",
-		operator: "eq"
+		label: "Last 24 hours",
+		range: {
+			from: "now-24h",
+			to: "now"
+		}
 	},
 	{
-		symbol: ">",
-		operator: "gt"
+		label: "Last 7 days",
+		range: {
+			from: "now-7d",
+			to: "now"
+		}
 	},
 	{
-		symbol: "<",
-		operator: "lt"
-	}
-];
-/** Where a field operator starts in the token, or `-1`. */
-function findOperator(text) {
-	let best = null;
-	for (const { symbol, operator } of OPERATORS) {
-		const index = text.indexOf(symbol);
-		if (index <= 0) continue;
-		if (!best || index < best.index || index === best.index && symbol.length > best.symbol.length) best = {
-			index,
-			symbol,
-			operator
-		};
-	}
-	return best;
-}
-/** Parse, keeping whatever could not be understood as a plain term. */
-function parseQueryWithDiagnostics(input) {
-	const diagnostics = [];
-	const clauses = [];
-	let trailing = null;
-	for (const token of tokenize(input)) {
-		let text = token.text;
-		let negated = false;
-		if (!token.quoted && text.startsWith("-") && text.length > 1) {
-			negated = true;
-			text = text.slice(1);
-		}
-		const operator = token.quoted ? null : findOperator(text);
-		if (!operator) {
-			if (text.length > 0) clauses.push({
-				type: "term",
-				value: text,
-				negated
-			});
-			continue;
-		}
-		const field = text.slice(0, operator.index);
-		const rawValue = text.slice(operator.index + operator.symbol.length);
-		if (!FIELD_NAME.test(field)) {
-			clauses.push({
-				type: "term",
-				value: text,
-				negated
-			});
-			continue;
-		}
-		if (rawValue === "") {
-			trailing = {
-				field,
-				operator: operator.operator,
-				value: ""
-			};
-			continue;
-		}
-		if (rawValue === "*" && operator.operator === "eq") {
-			clauses.push({
-				type: "field",
-				field,
-				operator: "exists",
-				values: [],
-				negated
-			});
-			continue;
+		label: "Last 30 days",
+		range: {
+			from: "now-30d",
+			to: "now"
 		}
-		if (operator.operator === "eq" && rawValue.length > 2 && rawValue.startsWith("*") && rawValue.endsWith("*")) {
-			clauses.push({
-				type: "field",
-				field,
-				operator: "contains",
-				values: [stripQuotes(rawValue.slice(1, -1))],
-				negated
-			});
-			continue;
+	},
+	{
+		label: "Last 90 days",
+		range: {
+			from: "now-90d",
+			to: "now"
 		}
-		const values = readValues(rawValue);
-		if (values.length === 0) {
-			diagnostics.push({
-				at: token.at,
-				text: token.text,
-				message: "Empty value group"
-			});
-			continue;
+	},
+	{
+		label: "Today",
+		range: {
+			from: "now/d",
+			to: "now/d"
 		}
-		if (operator.operator !== "eq" && values.length > 1) diagnostics.push({
-			at: token.at,
-			text: token.text,
-			message: "A comparison takes a single value"
-		});
-		const clause = {
-			type: "field",
-			field,
-			operator: operator.operator,
-			values: operator.operator === "eq" ? values : values.slice(0, 1),
-			negated
-		};
-		clauses.push(clause);
-		if (!rawValue.startsWith("(")) {
-			var _values$;
-			trailing = {
-				field,
-				operator: operator.operator,
-				value: (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : ""
-			};
+	},
+	{
+		label: "This week",
+		range: {
+			from: "now/w",
+			to: "now/w"
 		}
 	}
-	return {
-		query: { clauses },
-		diagnostics,
-		trailing
-	};
-}
-/** Parse, discarding diagnostics. */
-function parseQuery(input) {
-	return parseQueryWithDiagnostics(input).query;
+];
+//#endregion
+//#region src/shells/time-series-panel.tsx
+const defaultLabels$2 = {
+	back: "Back to previous range",
+	legend: "Series"
+};
+/**
+* TimeSeriesPanel — a chart you can steer.
+*
+* The point of putting the control and the chart in one component is the
+* loop between them: drag across the plot and the window narrows to what you
+* dragged, which re-queries, which redraws the axis you just picked. That
+* only works if someone owns the step back out again — so zoom keeps a
+* history, and the header offers the way back rather than leaving the reader
+* to retype the range they came from.
+*
+* @example
+* ```tsx
+* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+*
+* <TimeSeriesPanel
+*   title="Sessions"
+*   data={points}
+*   series={[{ dataKey: "sessions", name: "Sessions" }]}
+*   range={range}
+*   onRangeChange={setRange}
+*   onRefresh={() => refetch()}
+*   toggleableLegend
+* />
+* ```
+*/
+function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity = "auto", timeZone, locale, showRangeControl = true, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend = false, annotations, isLoading = false, height = 280, className, chartProps, labels: customLabels, "aria-label": ariaLabel }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
+	const titleId = (0, react.useId)();
+	const [history, setHistory] = (0, react.useState)([]);
+	const [hidden, setHidden] = (0, react.useState)([]);
+	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
+	const visibleSeries = (0, react.useMemo)(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
+	const handleRangeSelect = (0, react.useCallback)((selection) => {
+		setHistory((current) => [...current, range].slice(-10));
+		onRangeChange((0, _reopt_ai_opt_charts.toAbsoluteRange)(selection));
+	}, [range, onRangeChange]);
+	const goBack = (0, react.useCallback)(() => {
+		setHistory((current) => {
+			const previous = current[current.length - 1];
+			if (previous) onRangeChange(previous);
+			return current.slice(0, -1);
+		});
+	}, [onRangeChange]);
+	const setRange = (0, react.useCallback)((next) => {
+		setHistory([]);
+		onRangeChange(next);
+	}, [onRangeChange]);
+	const toggleSeries = (0, react.useCallback)((dataKey) => {
+		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "flex flex-col", className),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel == null && title != null ? titleId : void 0,
+		"data-opt-id": "9EHHC",
+		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex min-w-0 flex-col",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					id: titleId,
+					className: "text-text-primary truncate text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-sm"),
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex flex-wrap items-center",
+				children: [
+					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: goBack,
+						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						children: labels.back
+					}),
+					actions,
+					showRangeControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeRangeControl, {
+						value: range,
+						onChange: setRange,
+						presets,
+						recentRanges,
+						timeZone,
+						locale,
+						refresh,
+						onRefreshChange,
+						onRefresh,
+						isLoading,
+						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+					})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-2 pb-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_text_truncate._objectSpread2({
+				data,
+				series: visibleSeries,
+				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
+				to: resolved === null || resolved === void 0 ? void 0 : resolved.to,
+				granularity,
+				timeZone,
+				locale,
+				height,
+				selectable: true,
+				onRangeSelect: handleRangeSelect,
+				annotations,
+				showLegend: series.length > 1,
+				legendOptions: toggleableLegend ? {
+					onClick: toggleSeries,
+					inactiveKeys: hidden
+				} : void 0,
+				"aria-label": typeof title === "string" ? `${title} time series` : ariaLabel
+			}, chartProps))
+		})]
+	});
 }
+TimeSeriesPanel.displayName = "TimeSeriesPanel";
 //#endregion
-//#region src/lib/query/query-format.ts
-const OPERATOR_SYMBOL = {
-	eq: ":",
-	contains: ":",
-	gt: ">",
-	gte: ">=",
-	lt: "<",
-	lte: "<=",
-	exists: ":"
+//#region src/shells/log-table.tsx
+const HIDE_BELOW = {
+	always: "",
+	sm: "hidden @[40rem]/log:flex",
+	md: "hidden @[46rem]/log:flex",
+	lg: "hidden @[58rem]/log:flex",
+	xl: "hidden @[70rem]/log:flex"
+};
+const ROW_HEIGHT = {
+	compact: 26,
+	normal: 32,
+	comfortable: 40
+};
+const DENSITY_TEXT = {
+	compact: "text-[11px]",
+	normal: "text-xs",
+	comfortable: "text-sm"
 };
-/** Quote a value that would otherwise re-parse as something else. */
-function quoteValue(value) {
-	return /[\s"()]/.test(value) || value === "" ? `"${value.replace(/"/g, "")}"` : value;
-}
-/** One clause as text. */
-function formatClause(clause) {
-	var _clause$values$2;
-	const prefix = clause.negated ? "-" : "";
-	if (clause.type === "term") return `${prefix}${quoteValue(clause.value)}`;
-	if (clause.operator === "exists") return `${prefix}${clause.field}:*`;
-	if (clause.operator === "contains") {
-		var _clause$values$;
-		return `${prefix}${clause.field}:*${(_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : ""}*`;
-	}
-	const symbol = OPERATOR_SYMBOL[clause.operator];
-	if (clause.values.length > 1) return `${prefix}${clause.field}${symbol}(${clause.values.map(quoteValue).join(" or ")})`;
-	return `${prefix}${clause.field}${symbol}${quoteValue((_clause$values$2 = clause.values[0]) !== null && _clause$values$2 !== void 0 ? _clause$values$2 : "")}`;
-}
-/** The whole query as text. */
-function formatQuery(query) {
-	return query.clauses.map(formatClause).join(" ");
-}
-/** A short human label for a clause chip. */
-function describeClause(clause) {
-	if (clause.type === "term") return clause.negated ? `not "${clause.value}"` : `"${clause.value}"`;
-	if (clause.operator === "exists") return clause.negated ? `${clause.field} missing` : `${clause.field} present`;
-	if (clause.operator === "contains") {
-		var _clause$values$3;
-		return `${clause.negated ? "not " : ""}${clause.field} ⊃ ${(_clause$values$3 = clause.values[0]) !== null && _clause$values$3 !== void 0 ? _clause$values$3 : ""}`;
-	}
-	const values = clause.values.join(", ");
-	const symbol = OPERATOR_SYMBOL[clause.operator];
-	return `${clause.negated ? "not " : ""}${clause.field} ${symbol === ":" ? "=" : symbol} ${values}`;
-}
-//#endregion
-//#region src/shells/query-bar.tsx
 const defaultLabels$1 = {
-	placeholder: "Search, or filter with field:value",
-	ariaLabel: "Search query",
-	clear: "Clear query",
-	removeClause: (clause) => `Remove ${clause}`,
-	fieldsHeading: "Fields",
-	valuesHeading: "Values",
-	syntaxHint: null
+	listLabel: "Log",
+	loadingMore: "Loading earlier entries…",
+	endOfResults: "That is every entry in this range.",
+	filterFor: (value) => `Filter for ${value}`,
+	filterOut: (value) => `Filter out ${value}`,
+	sortAscending: "Sort ascending",
+	sortDescending: "Sort descending",
+	moveLeft: (column) => `Move ${column} left`,
+	moveRight: (column) => `Move ${column} right`
 };
-const MAX_SUGGESTIONS = 8;
+/** Rows rendered beyond the viewport on each side, so a fast scroll stays filled. */
+const OVERSCAN = 10;
 /**
-* QueryBar — one control for "find this" and "only these".
+* A stable hue per value. Colour does real work in a log — the eye groups by it
+* long before it reads the text — so the same event name has to land on the
+* same hue on every render and in every session, which rules out an index into
+* a palette.
+*/
+function hueOf(value) {
+	let hash = 0;
+	for (let index = 0; index < value.length; index += 1) hash = hash * 31 + value.charCodeAt(index) | 0;
+	return Math.abs(hash) % 360;
+}
+const EM_DASH = "—";
+/**
+* A column with nothing in it is a fact about the entry, not a value. Dimming
+* every absence the same way lets the eye skip the gaps while scanning, instead
+* of reading a dash as though it were data.
+*/
+const ABSENT = "text-text-tertiary/50";
+function columnStyle(column) {
+	return column.width ? {
+		width: column.width,
+		flex: "0 0 auto"
+	} : {
+		flex: "1 1 0%",
+		minWidth: 0
+	};
+}
+/**
+* LogTable — a windowed table for entries that keep arriving.
 *
-* A search box and a row of filter pickers answer halves of the same question
-* and neither can express the other, so people end up using both and holding
-* the combination in their head. Typing the filter is what closes that: the
-* whole question is one string, which means it can be read back, corrected in
-* place, pasted to a colleague, and stored in a URL.
+* Written by hand rather than delegated to a data grid for the two things a log
+* needs that a grid does not: rows are inserted at the *top* while the reader
+* is partway down, which needs a scroll correction applied before paint, and
+* "am I at the newest row?" has to be answerable from the scroll container to
+* decide whether to follow the tail or hold position.
 *
-* The text is the source of truth while the reader is typing; the parsed query
-* is committed on Enter or blur. Anything half-written parses to a plain term
-* rather than an error, so the bar never argues with someone mid-word.
+* What it takes from a data grid is the part readers actually reach for:
+* columns are data, so a caller can let people add, drop and reorder them; a
+* cell offers to filter for or against its own value; and density is a setting
+* rather than a constant.
 *
 * @example
 * ```tsx
-* <QueryBar
-*   value={query}
-*   onChange={setQuery}
-*   fields={[{ name: "path", values: ["/checkout", "/cart"] }]}
-*   showClauses
-* />
-* ```
-*/
-function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$1), customLabels);
-	const inputRef = (0, react.useRef)(null);
-	const [text, setText] = (0, react.useState)(() => formatQuery(value));
-	const [focused, setFocused] = (0, react.useState)(false);
-	const [highlighted, setHighlighted] = (0, react.useState)(0);
-	const committedRef = (0, react.useRef)(formatQuery(value));
-	(0, react.useEffect)(() => {
-		const next = formatQuery(value);
-		if (next === committedRef.current) return;
-		committedRef.current = next;
-		if (!focused) setText(next);
-	}, [value, focused]);
-	const parsed = (0, react.useMemo)(() => parseQueryWithDiagnostics(text), [text]);
-	const commit = (0, react.useCallback)((nextText) => {
-		const nextQuery = parseQueryWithDiagnostics(nextText).query;
-		committedRef.current = formatQuery(nextQuery);
-		onChange(nextQuery);
-	}, [onChange]);
-	const suggestions = useSuggestions(text, parsed.trailing, fields);
-	const applySuggestion = (0, react.useCallback)((suggestion) => {
-		var _inputRef$current;
-		const nextText = suggestion.replace(text);
-		setText(nextText);
-		if (suggestion.kind === "value") commit(nextText);
-		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-		setHighlighted(0);
-	}, [text, commit]);
-	const handleKeyDown = (event) => {
-		if (suggestions.length > 0 && focused) {
-			if (event.key === "ArrowDown") {
-				event.preventDefault();
-				setHighlighted((current) => (current + 1) % suggestions.length);
-				return;
-			}
-			if (event.key === "ArrowUp") {
-				event.preventDefault();
-				setHighlighted((current) => (current - 1 + suggestions.length) % suggestions.length);
-				return;
-			}
-			if (event.key === "Tab" || event.key === "Enter" && highlighted > 0) {
-				event.preventDefault();
-				applySuggestion(suggestions[highlighted]);
-				return;
+* <LogTable
+*   rows={rows}
+*   getRowId={(row) => row.id}
+*   columns={[
+*     { id: "time", header: "Time", width: "9rem", mono: true, value: (r) => r.time },
+*     { id: "name", header: "Event", width: "14rem", field: "name", marker: true, value: (r) => r.name },
+*     { id: "path", header: "Path", field: "path", value: (r) => r.path },
+*   ]}
+*   onCellAction={(action) => setQuery(applyCellAction(query, action))}
+* />
+* ```
+*/
+function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, onLoadMore, hasMore = false, loadingMore = false, prepending = false, onFollowChange, isNew, sort = null, onSortChange, onCellAction, highlightTerms, onColumnMove, density = "normal", showHeader = true, emptyState, labels: customLabels, className }, ref) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$1), customLabels);
+	const rowHeight = ROW_HEIGHT[density];
+	const scrollRef = (0, react.useRef)(null);
+	const [scrollTop, setScrollTop] = (0, react.useState)(0);
+	const [viewportHeight, setViewportHeight] = (0, react.useState)(0);
+	const followingRef = (0, react.useRef)(true);
+	const previousTopIdRef = (0, react.useRef)(null);
+	const previousLengthRef = (0, react.useRef)(0);
+	(0, react.useImperativeHandle)(ref, () => ({
+		scrollToTop: () => {
+			const container = scrollRef.current;
+			if (!container) return;
+			container.scrollTop = 0;
+			setScrollTop(0);
+			if (!followingRef.current) {
+				followingRef.current = true;
+				onFollowChange === null || onFollowChange === void 0 || onFollowChange(true);
 			}
+		},
+		revealRow: (id) => {
+			const index = rows.findIndex((row) => getRowId(row) === id);
+			const container = scrollRef.current;
+			if (index === -1 || !container) return;
+			const top = index * rowHeight;
+			const bottom = top + rowHeight;
+			if (top < container.scrollTop) container.scrollTop = top;
+			else if (bottom > container.scrollTop + container.clientHeight) container.scrollTop = bottom - container.clientHeight;
 		}
-		if (event.key === "Enter") {
-			event.preventDefault();
-			commit(text);
-			return;
-		}
-		if (event.key === "Escape") {
-			var _inputRef$current2;
-			setText(committedRef.current);
-			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
-		}
-	};
-	const showSuggestions = focused && suggestions.length > 0;
+	}), [
+		onFollowChange,
+		rows,
+		getRowId,
+		rowHeight
+	]);
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => setViewportHeight(container.clientHeight));
+		observer.observe(container);
+		setViewportHeight(container.clientHeight);
+		return () => observer.disconnect();
+	}, []);
+	/**
+	* Report whether the list is pinned to the newest row.
+	*
+	* Called from more than the scroll handler on purpose: the list can arrive at
+	* the top without a scroll event — a reset, a jump to newest, a shorter
+	* result set — and a stale "not following" would silently divert every live
+	* row into a held-back pile.
+	*/
+	const syncFollowing = (0, react.useCallback)((container) => {
+		const following = container.scrollTop <= rowHeight;
+		if (following === followingRef.current) return;
+		followingRef.current = following;
+		onFollowChange === null || onFollowChange === void 0 || onFollowChange(following);
+	}, [onFollowChange, rowHeight]);
+	/**
+	* Hold the reader's place when rows arrive above them.
+	*
+	* Runs before paint: by the time the browser draws, the scroll offset has
+	* already absorbed the inserted height, so the content under the cursor never
+	* moves. Skipped while following, where the whole point is to stay at the top.
+	*/
+	(0, react.useLayoutEffect)(() => {
+		const container = scrollRef.current;
+		const previousTopId = previousTopIdRef.current;
+		previousTopIdRef.current = rows.length ? getRowId(rows[0]) : null;
+		const previousLength = previousLengthRef.current;
+		previousLengthRef.current = rows.length;
+		if (!container) return;
+		syncFollowing(container);
+		if (!prepending || followingRef.current || !previousTopId) return;
+		if (rows.length <= previousLength) return;
+		const prepended = rows.findIndex((row) => getRowId(row) === previousTopId);
+		if (prepended <= 0) return;
+		container.scrollTop += prepended * rowHeight;
+		setScrollTop(container.scrollTop);
+	}, [
+		rows,
+		getRowId,
+		prepending,
+		rowHeight,
+		syncFollowing
+	]);
+	/**
+	* Page forward when the rows do not reach the bottom of the viewport.
+	*
+	* Without this the list only advances on a scroll event, so a tall screen —
+	* or a filter matching few rows per page — stops at the first page with no
+	* way to ask for more.
+	*/
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container || !hasMore || loadingMore || !onLoadMore) return;
+		if (container.scrollHeight <= container.clientHeight) onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		rows.length,
+		viewportHeight
+	]);
+	const handleScroll = (0, react.useCallback)((event) => {
+		const container = event.currentTarget;
+		setScrollTop(container.scrollTop);
+		syncFollowing(container);
+		const remaining = container.scrollHeight - container.scrollTop - container.clientHeight;
+		if (hasMore && !loadingMore && remaining < container.clientHeight) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		syncFollowing
+	]);
+	const totalHeight = rows.length * rowHeight;
+	const firstVisible = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+	const visibleCount = Math.ceil((viewportHeight || 480) / rowHeight) + 20;
+	const lastVisible = Math.min(rows.length, firstVisible + visibleCount);
+	const visibleRows = (0, react.useMemo)(() => rows.slice(firstVisible, lastVisible), [
+		rows,
+		firstVisible,
+		lastVisible
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("relative flex min-w-0 flex-col gap-1.5", className),
-		"data-opt-id": "JSVZ1",
-		"data-opt-slug": "query-bar.QueryBar",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_text_truncate.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_text_truncate.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
-						className: "text-text-tertiary size-4 shrink-0",
+		className: require_text_truncate.cn("@container/log flex min-h-0 flex-col", className),
+		"data-opt-id": "3ZR82",
+		"data-opt-slug": "log-table.LogTable",
+		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
+			columns,
+			sort,
+			onSortChange,
+			onColumnMove,
+			density,
+			labels
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollRef,
+			onScroll: handleScroll,
+			className: "relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+			role: "listbox",
+			"aria-label": labels.listLabel,
+			"aria-activedescendant": selectedId ? `log-row-${selectedId}` : void 0,
+			tabIndex: 0,
+			children: [
+				rows.length === 0 ? emptyState : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { height: totalHeight },
+					className: "relative",
+					children: visibleRows.map((row, index) => {
+						var _isNew;
+						const id = getRowId(row);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableRow, {
+							id,
+							row,
+							columns,
+							top: (firstVisible + index) * rowHeight,
+							height: rowHeight,
+							density,
+							selected: id === selectedId,
+							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
+							onSelect,
+							onCellAction,
+							highlightTerms,
+							labels
+						}, id);
+					})
+				}),
+				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
+						size: "sm",
 						"aria-hidden": true
+					}), labels.loadingMore]
+				}),
+				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-tertiary", "py-3 text-center text-xs"),
+					children: labels.endOfResults
+				})
+			]
+		})]
+	});
+}
+/**
+* LogTable — see {@link LogTableInner}.
+*
+* The cast preserves the row generic through `forwardRef`, which otherwise
+* widens it to its constraint and takes the column callbacks' types with it.
+*/
+const LogTable = (0, react.forwardRef)(LogTableInner);
+function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "row",
+		className: require_text_truncate.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
+		style: { height: ROW_HEIGHT[density] },
+		children: columns.map((column, index) => {
+			var _column$priority;
+			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
+			const sortable = column.sortable && onSortChange;
+			const columnLabel = typeof column.header === "string" ? column.header : column.id;
+			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "size-1.5 shrink-0"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: column.header
+				}),
+				active && (sort.direction === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}))
+			] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "columnheader",
+				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				className: require_text_truncate.cn("group/header flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
+				style: columnStyle(column),
+				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
+					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
+					onClick: () => onSortChange({
+						columnId: column.id,
+						direction: active && sort.direction === "desc" ? "asc" : "desc"
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						ref: inputRef,
-						type: "text",
-						role: "combobox",
-						"aria-expanded": showSuggestions,
-						"aria-controls": "query-bar-suggestions",
-						"aria-autocomplete": "list",
-						"aria-label": labels.ariaLabel,
-						placeholder: labels.placeholder,
-						disabled,
-						className: require_text_truncate.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
-						value: text,
-						onChange: (event) => {
-							setText(event.target.value);
-							setHighlighted(0);
-							if (live) commit(event.target.value);
-						},
-						onFocus: () => setFocused(true),
-						onBlur: () => {
-							window.setTimeout(() => setFocused(false), 120);
-							if (!live) commit(text);
-						},
-						onKeyDown: handleKeyDown
-					}),
-					text.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					children: content
+				}) : content, onColumnMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: require_text_truncate.cn("ml-auto flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/header:opacity-100 focus-within:opacity-100"),
+					children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": labels.clear,
-						title: labels.clear,
-						className: require_text_truncate.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
-						onClick: () => {
-							setText("");
-							commit("");
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-							className: "size-3.5",
+						className: "hover:text-text-primary cursor-pointer",
+						"aria-label": labels.moveLeft(columnLabel),
+						title: labels.moveLeft(columnLabel),
+						onClick: () => onColumnMove(column.id, "left"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "size-3",
+							"aria-hidden": true
+						})
+					}), index < columns.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "hover:text-text-primary cursor-pointer",
+						"aria-label": labels.moveRight(columnLabel),
+						title: labels.moveRight(columnLabel),
+						onClick: () => onColumnMove(column.id, "right"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "size-3",
 							"aria-hidden": true
 						})
-					})
-				]
-			}),
-			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				id: "query-bar-suggestions",
-				role: "listbox",
-				className: require_text_truncate.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
-				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					role: "option",
-					"aria-selected": index === highlighted,
-					className: require_text_truncate.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
-					onMouseEnter: () => setHighlighted(index),
-					onMouseDown: (event) => event.preventDefault(),
-					onClick: () => applySuggestion(suggestion),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-text-primary truncate font-mono",
-						children: suggestion.label
-					}), suggestion.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-text-tertiary shrink-0 text-xs",
-						children: suggestion.hint
 					})]
-				}) }, `${suggestion.kind}-${suggestion.label}`))
-			}),
-			showClauses && value.clauses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: value.clauses.map((clause, index) => {
-					const label = describeClause(clause);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-						className: require_text_truncate.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate",
-							children: label
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							"aria-label": labels.removeClause(label),
-							className: "hover:text-text-primary cursor-pointer",
-							onClick: () => {
-								const next = removeClause(value, index);
-								setText(formatQuery(next));
-								committedRef.current = formatQuery(next);
-								onChange(next);
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-								className: "size-3",
-								"aria-hidden": true
-							})
-						})]
-					}, `${label}-${index}`);
-				})
-			}),
-			parsed.diagnostics.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
-			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-text-tertiary text-xs",
-				children: labels.syntaxHint
-			})
-		]
+				})]
+			}, column.id);
+		})
 	});
 }
-QueryBar.displayName = "QueryBar";
-function QueryDiagnostics({ diagnostics }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
-		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-				className: "font-mono",
-				children: diagnostic.text
-			}),
-			" —",
-			" ",
-			diagnostic.message
-		] }, `${diagnostic.at}-${index}`))
+function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, highlightTerms, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "option",
+		"aria-selected": selected,
+		tabIndex: -1,
+		id: `log-row-${id}`,
+		"data-log-row-id": id,
+		onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(id),
+		onKeyDown: (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			onSelect === null || onSelect === void 0 || onSelect(id);
+		},
+		style: {
+			top,
+			height
+		},
+		className: require_text_truncate.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
+		children: columns.map((column) => {
+			var _column$priority2;
+			const raw = column.value(row);
+			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_text_truncate.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
+				style: columnStyle(column),
+				children: [
+					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "size-1.5 shrink-0 rounded-full",
+						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_text_truncate.cn("min-w-0 flex-1", !column.truncate && "truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
+						title: column.truncate ? void 0 : text || void 0,
+						children: column.render ? column.render(row) : text ? column.truncate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TextTruncate, {
+							text,
+							truncation: column.truncate,
+							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
+								text: shown,
+								search: highlightTerms
+							}) : shown
+						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
+							text,
+							search: highlightTerms
+						}) : text : EM_DASH
+					}),
+					onCellAction && column.field && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellActions, {
+						field: column.field,
+						value: text,
+						onAction: onCellAction,
+						labels
+					})
+				]
+			}, column.id);
+		})
 	});
 }
 /**
-* What to offer, based on the token under the cursor.
+* Memoized because a live log re-renders several times a second while almost
+* every visible row is unchanged.
+*/
+const LogTableRow = (0, react.memo)(LogTableRowImpl);
+/**
+* The two questions a reader has about a value they just spotted: show me only
+* these, and get these out of my way.
 *
-* Completing fields is the part that makes the syntax discoverable at all —
-* nobody guesses that `utm_source` is a field they can filter on. Once the
-* field is chosen, its known values are the second half of the same guess.
+* Revealed on hover rather than always drawn — a log is scanned, and a pair of
+* buttons on every cell of every row is a wall of chrome. They stay in the tab
+* order regardless, since hover is not an interaction everyone has.
 */
-function useSuggestions(text, trailing, fields) {
-	return (0, react.useMemo)(() => {
-		const lastSpace = text.lastIndexOf(" ");
-		const head = lastSpace === -1 ? "" : text.slice(0, lastSpace + 1);
-		const token = text.slice(lastSpace + 1);
-		if (trailing) {
-			var _field$values;
-			const field = fields.find((candidate) => candidate.name === trailing.field);
-			const values = (_field$values = field === null || field === void 0 ? void 0 : field.values) !== null && _field$values !== void 0 ? _field$values : [];
-			const typed = trailing.value.toLowerCase();
-			return values.filter((value) => value.toLowerCase().includes(typed)).slice(0, MAX_SUGGESTIONS).map((value) => ({
-				kind: "value",
-				label: `${trailing.field}:${value}`,
-				replace: () => `${head}${trailing.field}:${/[\s"()]/.test(value) ? `"${value}"` : value} `
-			}));
-		}
-		const bare = token.replace(/^-/, "").toLowerCase();
-		if (bare.length === 0) return [];
-		return fields.filter((field) => field.name.toLowerCase().includes(bare)).slice(0, MAX_SUGGESTIONS).map((field) => ({
-			kind: "field",
-			label: `${field.name}:`,
-			hint: field.hint,
-			replace: () => `${head}${token.startsWith("-") ? "-" : ""}${field.name}:`
-		}));
-	}, [
-		text,
-		trailing,
-		fields
-	]);
+function CellActions({ field, value, onAction, labels }) {
+	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_text_truncate.cn("bg-surface/90 ml-auto flex shrink-0 items-center gap-0.5 rounded pl-1", "opacity-0 transition-opacity", "group-hover/cell:opacity-100 focus-within:opacity-100"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: button,
+			title: labels.filterFor(value),
+			"aria-label": labels.filterFor(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "include"
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: button,
+			title: labels.filterOut(value),
+			"aria-label": labels.filterOut(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "exclude"
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		})]
+	});
 }
 //#endregion
 //#region src/shells/field-sidebar.tsx