@reopt-ai/opt-ui 1.10.0 → 1.12.0

package/dist/{field-sidebar-BXjvV7Cz.js → field-sidebar-BuO37l4c.js}

@@ -1,5 +1,5 @@
 "use client";
-import { $ as ToolbarButton$1, $t as Alert, A as FormSelectItem, At as DialogHeading$1, B as useFormStore, Bn as OPT_TEXT_LABEL, Bt as TabPanel$1, Cn as OPT_DIVIDER, Dn as OPT_DOT_YELLOW, En as OPT_DOT_RED, F as FormSwitch$1, Fn as OPT_SURFACE_POPOVER, Ft as SelectPopover$1, Gn as _objectSpread2, Gt as Composite, Hn as OPT_TEXT_SECONDARY, Ht as DisclosureContent$1, In as OPT_TABLE_ROW_ACTIVE, It as SelectRoot$1, J as PopoverContent$1, Jn as cn, Jt as CompositeRow, Kn as _objectWithoutProperties, Kt as CompositeItem, L as FormTextarea, Ln as OPT_TD, Lt as SelectTrigger$1, Mt as DialogRoot$1, Nn as OPT_ITEM_BASE, Nt as SelectItem$1, O as FormRoot$1, On as OPT_FOCUS, P as FormSubmit$1, Pn as OPT_SURFACE, Pt as SelectLabel$1, Rn as OPT_TD_MUTED, Rt as Tab$1, Sn as OPT_DISCLOSURE_TRIGGER, St as ComboboxRoot$1, T as FormRadioGroup$1, Tn as OPT_DOT_GREEN, Tt as DialogDescription$1, U as TagInput, Un as OPT_TEXT_TERTIARY, Ut as DisclosureRoot$1, Vn as OPT_TEXT_PRIMARY, Vt as TabsRoot$1, Wn as OPT_TH, Wt as DisclosureTrigger$1, X as PopoverTrigger$1, Y as PopoverRoot$1, Zt as Input, _n as OPT_BADGE_NEUTRAL, at as TooltipProvider$1, b as FormLabel$1, bn as OPT_BORDER, bt as ComboboxItem$1, ct as MenuItemCheckbox$1, dt as MenuRoot$1, en as Spinner, et as ToolbarContainer$1, fn as OPT_ACTIVE_ITEM, ft as MenuSeparator$1, gn as OPT_BADGE_GREEN, gt as ComboboxEmpty, hn as OPT_BADGE_BLUE, ht as MenubarRoot$1, i as FieldToken, it as TooltipAnchor$1, j as FormSelectPopover, jn as OPT_INPUT, jt as DialogPanel$1, k as FormSelect, kn as OPT_FOCUS_VISIBLE, l as FormCheckbox$1, lt as MenuItemRadio$1, m as FormError$1, mn as OPT_ANIMATE_ENTER_EXIT, mt as MenubarContainer$1, n as Highlight, nn as EmptyState, nt as ToolbarSeparator$1, o as Pagination, ot as MenuButtonArrow$1, pt as MenuTrigger$1, qn as Kbd, qt as CompositeProvider, rn as Button, rt as Tooltip$1, s as Checkbox, sn as StatCard, st as MenuItem$1, t as TextTruncate, tn as Badge, tt as ToolbarRoot$1, ut as MenuPopover$1, vn as OPT_BADGE_RED, w as FormRadio$1, xn as OPT_DISCLOSURE_CONTENT, xt as ComboboxPopover$1, y as FormInput$1, yn as OPT_BADGE_YELLOW, yt as ComboboxInput$1, zt as TabList$1 } from "./text-truncate-j6X3z7Pv.js";
+import { $n as OPT_TEXT_LABEL, $t as CompositeProvider, A as FormRadio$1, An as OPT_BADGE_RED, B as FormSubmit$1, Bn as OPT_FOCUS, Bt as SelectLabel$1, Dn as OPT_BADGE_BLUE, Dt as ComboboxPopover$1, E as FormLabel$1, En as OPT_ANIMATE_ENTER_EXIT, Et as ComboboxItem$1, F as FormSelect, Fn as OPT_DIVIDER, Gn as OPT_ITEM_BASE, Gt as TabList$1, Ht as SelectRoot$1, I as FormSelectItem, It as DialogHeading$1, Jt as DisclosureContent$1, K as useFormStore, Kn as OPT_SURFACE, Kt as TabPanel$1, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as DialogPanel$1, Mn as OPT_BORDER, Nn as OPT_DISCLOSURE_CONTENT, On as OPT_BADGE_GREEN, Ot as ComboboxRoot$1, P as FormRoot$1, Pn as OPT_DISCLOSURE_TRIGGER, Qt as CompositeItem, Rn as OPT_DOT_RED, Rt as DialogRoot$1, St as ComboboxEmpty, T as FormInput$1, Tt as ComboboxInput$1, U as FormTextarea, Un as OPT_INPUT, Ut as SelectTrigger$1, V as FormSwitch$1, Vn as OPT_FOCUS_VISIBLE, Vt as SelectPopover$1, Wt as Tab$1, Xn as OPT_TD, Xt as DisclosureTrigger$1, Y as TagInput, Yn as OPT_TABLE_ROW_ACTIVE, Yt as DisclosureRoot$1, Zn as OPT_TD_MUTED, Zt as Composite, _t as MenuRoot$1, ar as _objectWithoutProperties, at as ToolbarButton$1, b as FormError$1, bt as MenubarContainer$1, c as Checkbox, cn as Badge, ct as ToolbarSeparator$1, dt as TooltipProvider$1, en as CompositeRow, er as OPT_TEXT_PRIMARY, et as PopoverContent$1, ft as MenuButtonArrow$1, gt as MenuPopover$1, h as FormCheckbox$1, hn as Skeleton, ht as MenuItemRadio$1, i as FieldToken, in as Input, ir as _objectSpread2, j as FormRadioGroup$1, jn as OPT_BADGE_YELLOW, jt as DialogDescription$1, kn as OPT_BADGE_NEUTRAL, ln as EmptyState, lt as Tooltip$1, m as formatOptTime, mn as StatCard, mt as MenuItemCheckbox$1, n as Highlight, nn as Meter$1, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger$1, on as Alert, or as Kbd, ot as ToolbarContainer$1, pt as MenuItem$1, qn as OPT_SURFACE_POPOVER, qt as TabsRoot$1, rr as OPT_TH, s as Pagination, sn as Spinner, sr as cn, st as ToolbarRoot$1, t as TextTruncate, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot$1, u as OPT_UI_DEFAULT_LOCALE, un as Button, ut as TooltipAnchor$1, vt as MenuSeparator$1, wn as OPT_ACTIVE_ITEM, xt as MenubarRoot$1, yt as MenuTrigger$1, zn as OPT_DOT_YELLOW, zt as SelectItem$1 } from "./text-truncate-DSuZECy0.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Fragment as Fragment$1, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -253,7 +253,7 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
 }
 //#endregion
 //#region src/shells/dashboard-grid.tsx
-const defaultLabels$18 = { ariaLabel: "대시보드 통계" };
+const defaultLabels$21 = { ariaLabel: "대시보드 통계" };
 const MIN_DASHBOARD_COLUMNS = 1;
 const MAX_DASHBOARD_COLUMNS = 12;
 function normalizeDashboardColumns(columns) {
@@ -262,7 +262,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$21), customLabels);
 	const columnCount = normalizeDashboardColumns(columns);
 	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
 	const rows = [];
@@ -290,13 +290,13 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/search-combobox.tsx
-const defaultLabels$17 = {
+const defaultLabels$20 = {
 	noResults: "결과가 없습니다.",
 	loading: "Loading…"
 };
 /** Renders the search combobox component. */
 function SearchCombobox({ items, placeholder = "검색...", label = "검색", onSelect, labels: customLabels, async: isAsync = false, onSearch, debounceMs = 300 }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$20), customLabels);
 	const inputId = useId();
 	const [query, setQuery] = useState("");
 	const [asyncResults, setAsyncResults] = useState([]);
@@ -394,14 +394,14 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 }
 //#endregion
 //#region src/shells/status-select.tsx
-const defaultLabels$16 = {
+const defaultLabels$19 = {
 	selectLabel: "상태",
 	emptyMessage: "사용 가능한 상태 옵션이 없습니다."
 };
 /** Renders the status select component. */
 function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _options$0$value, _options$;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$19), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const [internalValue, setInternalValue] = useState((_options$0$value = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) !== null && _options$0$value !== void 0 ? _options$0$value : "");
 	const value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
@@ -468,7 +468,7 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 }
 //#endregion
 //#region src/shells/app-menubar.tsx
-const defaultLabels$15 = { ariaLabel: "Application menu" };
+const defaultLabels$18 = { ariaLabel: "Application menu" };
 function MenuSection({ menu }) {
 	return /* @__PURE__ */ jsxs(MenuRoot$1, { children: [/* @__PURE__ */ jsxs(MenuTrigger$1, { children: [menu.label, /* @__PURE__ */ jsx(MenuButtonArrow$1, {})] }), /* @__PURE__ */ jsx(MenuPopover$1, { children: menu.items.map((item, i) => {
 		if (item.type === "separator") return /* @__PURE__ */ jsx(MenuSeparator$1, {}, `sep-${i}`);
@@ -512,7 +512,7 @@ function MenuSection({ menu }) {
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
 	if (menus.length === 0) return null;
 	return /* @__PURE__ */ jsx(MenubarRoot$1, {
 		"data-opt-id": "BGKHW",
@@ -551,10 +551,10 @@ const sectionStyles = {
 	Templates: "text-text-tertiary"
 };
 const defaultSectionStyle = "text-text-secondary";
-const defaultLabels$14 = { ariaLabel: "문서 네비게이션" };
+const defaultLabels$17 = { ariaLabel: "문서 네비게이션" };
 /** Renders the sidebar nav component. */
 function SidebarNav({ items, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
 	const pathname = usePathname();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = useState(activeItem ? domId(activeItem.id) : void 0);
@@ -602,7 +602,7 @@ function SidebarNav({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/editor-toolbar.tsx
-const defaultLabels$13 = { ariaLabel: "텍스트 편집기 툴바" };
+const defaultLabels$16 = { ariaLabel: "텍스트 편집기 툴바" };
 function ToolbarButtonWithTooltip({ button, active, onAction }) {
 	return /* @__PURE__ */ jsxs(TooltipProvider$1, { children: [/* @__PURE__ */ jsx(TooltipAnchor$1, { children: /* @__PURE__ */ jsx(ToolbarButton$1, {
 		className: `text-text-primary data-[active-item]:bg-bg-subtle data-[focus-visible]:ring-ring rounded-md p-2 transition-colors outline-none data-[focus-visible]:ring-2 ${active ? "bg-bg-muted" : "hover:bg-bg-subtle"}`,
@@ -612,7 +612,7 @@ function ToolbarButtonWithTooltip({ button, active, onAction }) {
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
 	const groups = [];
 	let current = [];
 	for (const btn of buttons) {
@@ -645,14 +645,14 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
 }
 //#endregion
 //#region src/shells/content-tabs.tsx
-const defaultLabels$12 = {
+const defaultLabels$15 = {
 	ariaLabel: "콘텐츠 탭",
 	emptyMessage: "표시할 탭이 없습니다."
 };
 /** Renders the content tabs component. */
 function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 	var _tabs$, _tabs$find;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
 	const [selectedTabId, setSelectedTabId] = useState(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	if (tabs.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "text-text-secondary text-sm",
@@ -684,13 +684,13 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/faq-accordion.tsx
-const defaultLabels$11 = {
+const defaultLabels$14 = {
 	ariaLabel: "자주 묻는 질문",
 	emptyMessage: "등록된 FAQ가 없습니다."
 };
 /** Renders the faq accordion component. */
 function FaqAccordion({ items, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -730,14 +730,14 @@ function FaqAccordion({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/settings-form.tsx
-const defaultLabels$10 = {
+const defaultLabels$13 = {
 	formAriaLabel: "설정 폼",
 	submitButton: "저장",
 	successMessage: "설정이 저장되었습니다."
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
 	const [submitted, setSubmitted] = useState(false);
 	const defaultValues = {};
 	for (const field of fields) {
@@ -1063,7 +1063,7 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 ProjectSwitcher.displayName = "ProjectSwitcher";
 //#endregion
 //#region src/shells/env-panel.tsx
-const defaultLabels$9 = {
+const defaultLabels$12 = {
 	varCount: (count) => `${count}개 변수`,
 	envVarsLabel: (env) => `${env} 환경 변수`,
 	secretBadge: "secret"
@@ -1075,7 +1075,7 @@ const envDot = {
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
 	return /* @__PURE__ */ jsx("div", {
 		className: `rounded-lg ${OPT_BORDER} divide-y ${OPT_DIVIDER} bg-surface`,
 		"data-opt-id": "ZBDWK",
@@ -1148,7 +1148,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/branch-select.tsx
-const defaultLabels$8 = {
+const defaultLabels$11 = {
 	selectLabel: "브랜치",
 	emptySelectionLabel: "선택...",
 	emptyMessage: "사용 가능한 브랜치가 없습니다.",
@@ -1157,7 +1157,7 @@ const defaultLabels$8 = {
 /** Renders the branch select component. */
 function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _ref, _defaultBranch$name, _branches$, _selected$name;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const defaultBranch = branches.find((b) => b.isDefault);
 	const [internalValue, setInternalValue] = useState((_ref = (_defaultBranch$name = defaultBranch === null || defaultBranch === void 0 ? void 0 : defaultBranch.name) !== null && _defaultBranch$name !== void 0 ? _defaultBranch$name : (_branches$ = branches[0]) === null || _branches$ === void 0 ? void 0 : _branches$.name) !== null && _ref !== void 0 ? _ref : "");
@@ -1266,7 +1266,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 BranchSelect.displayName = "BranchSelect";
 //#endregion
 //#region src/shells/domain-table.tsx
-const defaultLabels$7 = {
+const defaultLabels$10 = {
 	domain: "Domain",
 	status: "Status",
 	ssl: "SSL",
@@ -1296,7 +1296,7 @@ const sslLabel = {
 };
 /** Renders the domain table component. */
 function DomainTable({ domains, title = "도메인", labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ jsxs("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -1474,7 +1474,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] = useState(null);
 	const [sortDir, setSortDir] = useState(null);
 	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
@@ -1568,8 +1568,8 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 					focusWrap: true,
 					children: /* @__PURE__ */ jsxs(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__ */ jsx("table", {}),
 						children: [/* @__PURE__ */ jsx("thead", {
 							className: cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
@@ -1600,7 +1600,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__ */ jsxs("span", {
-											className: "flex items-center",
+											className: "flex items-center whitespace-nowrap",
 											children: [col.header, sortIndicator(col.id)]
 										}), resizableColumns && /* @__PURE__ */ jsx("span", {
 											role: "separator",
@@ -1664,7 +1664,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												className: 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__ */ jsx(Checkbox, {
 												checked: isSelected,
 												onChange: () => toggleSelectRow(key),
@@ -1676,7 +1676,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												className: 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__ */ jsx("button", {
 												type: "button",
 												onClick: (e) => {
@@ -1902,7 +1902,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 }
 //#endregion
 //#region src/shells/failure-list.tsx
-const defaultLabels$6 = {
+const defaultLabels$9 = {
 	title: "최근 실패",
 	emptyMessage: "실패 항목이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -2001,20 +2001,20 @@ function FailureItemRow({ failure, isLast, onFailureClick, renderActions, merged
 function FailureList({ failures, title, maxItems, grouped = false, onFailureClick, onShowMore, labels: customLabels, locale = "ko-KR", loading = false, renderActions, className }) {
 	var _customLabels$timeAgo, _customLabels$timeAgo2, _customLabels$timeAgo3, _customLabels$timeAgo4, _customLabels$timeAgo5, _customLabels$timeAgo6, _customLabels$timeAgo7, _customLabels$timeAgo8, _customLabels$severit, _customLabels$severit2, _customLabels$severit3, _customLabels$severit4, _customLabels$severit5, _customLabels$severit6, _customLabels$title, _customLabels$emptyMe, _customLabels$moreIte;
 	const mergedTimeAgo = {
-		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$6.timeAgo.justNow,
-		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$6.timeAgo.minutesAgo,
-		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$6.timeAgo.hoursAgo,
-		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$6.timeAgo.daysAgo
+		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$9.timeAgo.justNow,
+		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$9.timeAgo.minutesAgo,
+		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$9.timeAgo.hoursAgo,
+		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$9.timeAgo.daysAgo
 	};
 	const mergedSeverityLabels = {
-		critical: (_customLabels$severit = customLabels === null || customLabels === void 0 || (_customLabels$severit2 = customLabels.severityLabels) === null || _customLabels$severit2 === void 0 ? void 0 : _customLabels$severit2.critical) !== null && _customLabels$severit !== void 0 ? _customLabels$severit : defaultLabels$6.severityLabels.critical,
-		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$6.severityLabels.error,
-		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$6.severityLabels.warning
+		critical: (_customLabels$severit = customLabels === null || customLabels === void 0 || (_customLabels$severit2 = customLabels.severityLabels) === null || _customLabels$severit2 === void 0 ? void 0 : _customLabels$severit2.critical) !== null && _customLabels$severit !== void 0 ? _customLabels$severit : defaultLabels$9.severityLabels.critical,
+		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$9.severityLabels.error,
+		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$9.severityLabels.warning
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$6.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$6.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$6.moreItems
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$9.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$9.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$9.moreItems
 	};
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const allItems = maxItems ? failures.slice(0, maxItems) : failures;
@@ -2090,7 +2090,7 @@ function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
 }
 //#endregion
 //#region src/shells/key-value-editor.tsx
-const defaultLabels$5 = {
+const defaultLabels$8 = {
 	keyPlaceholder: "키",
 	valuePlaceholder: "값",
 	addButton: "추가",
@@ -2104,7 +2104,7 @@ function generateId() {
 }
 /** Renders the key value editor component. */
 function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSecretToggle = false, maxEntries, readOnly = false, labels: customLabels, renderActions, validateKey, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$5), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
 	const [internalEntries, setInternalEntries] = useState(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
 	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
 	const keyInputRef = useRef(null);
@@ -2400,1651 +2400,2203 @@ function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize
 }
 WorkflowCanvas.displayName = "WorkflowCanvas";
 //#endregion
-//#region src/lib/use-auto-refresh.ts
+//#region src/shells/event-timeline.tsx
+const defaultLabels$7 = {
+	emptyTitle: "No events yet",
+	emptyDescription: "Events appear here as soon as they arrive.",
+	expand: "Show properties",
+	collapse: "Hide properties",
+	loadMore: "Load more",
+	gap: (duration) => `+${duration}`,
+	properties: "Event properties",
+	openGroup: (title) => `Open ${title}`
+};
 /**
-* 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.
+* A line of text and the time it happened have to read as one row. Past about
+* this width the eye stops connecting them, so the rail is capped rather than
+* stretched to whatever the page allows. Override with `className` where a
+* layout genuinely needs the full width.
 */
-function useAutoRefresh({ interval, paused = false, onRefresh }) {
-	const callbackRef = useRef(onRefresh);
-	callbackRef.current = onRefresh;
-	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$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 TIMELINE_WIDTH = "max-w-5xl";
+const toneDot = {
+	default: "bg-text-tertiary",
+	accent: "bg-accent",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
 };
-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;
+function toMillis(timestamp) {
+	const parsed = Date.parse(timestamp);
+	return Number.isNaN(parsed) ? 0 : parsed;
 }
-/**
-* 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.
-*/
-function describeRange(range, labels, options) {
-	const window = measureTimeWindow(range, {
-		timeZone: options.timeZone,
-		now: options.now
+function stringifyValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	return JSON.stringify(value);
+}
+function PropertyTable({ properties, ariaLabel }) {
+	const entries = Object.entries(properties);
+	if (entries.length === 0) return null;
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn(OPT_BORDER, "gap-element bg-bg-subtle mt-2 grid grid-cols-1 rounded-lg p-2.5 sm:grid-cols-2"),
+		"aria-label": ariaLabel,
+		children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn(OPT_TEXT_TERTIARY, "truncate text-xs"),
+				children: key
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn(OPT_TEXT_PRIMARY, "truncate text-xs"),
+				children: stringifyValue(value)
+			})]
+		}, key))
+	});
+}
+function TimelineRow({ item, gapLabel, labels, onItemSelect, isLast }) {
+	var _item$tone, _item$content, _item$properties;
+	const [open, setOpen] = useState(false);
+	const expandable = Boolean(item.content || item.properties);
+	const toggle = useCallback(() => setOpen((value) => !value), []);
+	const headline = /* @__PURE__ */ jsx("span", {
+		className: cn(OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+		children: item.name
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: "relative flex gap-3 pb-4 last:pb-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 flex-col items-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("mt-1.5 size-2 shrink-0 rounded-full", toneDot[(_item$tone = item.tone) !== null && _item$tone !== void 0 ? _item$tone : "default"]),
+				"aria-hidden": "true"
+			}), !isLast && /* @__PURE__ */ jsx("span", {
+				className: "bg-border mt-1 w-px grow",
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 grow flex-col",
+			children: [
+				gapLabel && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-tertiary", "mb-1 text-xs tabular-nums"),
+					children: labels.gap(gapLabel)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-baseline gap-2",
+					children: [
+						item.icon && /* @__PURE__ */ jsx("span", {
+							className: "text-text-tertiary",
+							"aria-hidden": "true",
+							children: item.icon
+						}),
+						onItemSelect ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onItemSelect(item),
+							className: cn(OPT_FOCUS_VISIBLE, "hover:text-accent min-w-0 truncate rounded text-left"),
+							children: headline
+						}) : headline,
+						/* @__PURE__ */ jsx("time", {
+							dateTime: item.timestamp,
+							className: cn(OPT_TEXT_TERTIARY, "ml-auto shrink-0 text-xs tabular-nums"),
+							children: formatOptTime(item.timestamp)
+						})
+					]
+				}),
+				item.detail && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-secondary", "truncate text-xs"),
+					children: item.detail
+				}),
+				expandable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: toggle,
+					"aria-expanded": open,
+					className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-text-tertiary", "hover:text-text-primary mt-1 flex w-fit items-center gap-1 rounded text-xs"),
+					children: [open ? /* @__PURE__ */ jsx(ChevronDown, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(ChevronRight, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}), open ? labels.collapse : labels.expand]
+				}), open && ((_item$content = item.content) !== null && _item$content !== void 0 ? _item$content : /* @__PURE__ */ jsx(PropertyTable, {
+					properties: (_item$properties = item.properties) !== null && _item$properties !== void 0 ? _item$properties : {},
+					ariaLabel: labels.properties
+				}))] })
+			]
+		})]
+	});
+}
+/** Builds the gap label for each row, given the reading order. */
+function useGapLabels(items, showGaps, order, minGapMs, locale) {
+	return useMemo(() => {
+		if (!showGaps) return items.map(() => null);
+		return items.map((item, index) => {
+			const neighbour = order === "desc" ? items[index + 1] : items[index - 1];
+			if (!neighbour) return null;
+			const delta = Math.abs(toMillis(item.timestamp) - toMillis(neighbour.timestamp));
+			if (delta < minGapMs) return null;
+			return formatDuration(delta, locale);
+		});
+	}, [
+		items,
+		showGaps,
+		order,
+		minGapMs,
+		locale
+	]);
+}
+function TimelineList({ items, showGaps, order, minGapMs, locale, labels, onItemSelect }) {
+	const gaps = useGapLabels(items, showGaps, order, minGapMs, locale);
+	return /* @__PURE__ */ jsx("ol", {
+		className: "flex flex-col",
+		children: items.map((item, index) => {
+			var _gaps$index;
+			return /* @__PURE__ */ jsx(TimelineRow, {
+				item,
+				gapLabel: (_gaps$index = gaps[index]) !== null && _gaps$index !== void 0 ? _gaps$index : null,
+				labels,
+				onItemSelect,
+				isLast: index === items.length - 1
+			}, item.id);
+		})
+	});
+}
+function GroupBlock({ group, showGaps, order, minGapMs, locale, labels, onItemSelect }) {
+	var _group$defaultOpen;
+	const [open, setOpen] = useState((_group$defaultOpen = group.defaultOpen) !== null && _group$defaultOpen !== void 0 ? _group$defaultOpen : true);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_BORDER, "rounded-xl"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-3 py-2",
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setOpen((value) => !value),
+					"aria-expanded": open,
+					className: cn(OPT_FOCUS_VISIBLE, "flex min-w-0 grow items-center gap-2 rounded text-left"),
+					children: [
+						open ? /* @__PURE__ */ jsx(ChevronDown, {
+							className: cn(OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ jsx(ChevronRight, {
+							className: cn(OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+							children: group.title
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							size: "sm",
+							variant: "default",
+							className: "shrink-0",
+							children: group.items.length
+						})
+					]
+				}),
+				group.meta && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-tertiary", "shrink-0 text-xs"),
+					children: group.meta
+				}),
+				group.href && /* @__PURE__ */ jsx("a", {
+					href: group.href,
+					className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-accent shrink-0 rounded text-xs"),
+					children: labels.openGroup(typeof group.title === "string" ? group.title : group.id)
+				})
+			]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "border-border-subtle border-t px-3 py-3",
+			children: /* @__PURE__ */ jsx(TimelineList, {
+				items: group.items,
+				showGaps,
+				order,
+				minGapMs,
+				locale,
+				labels,
+				onItemSelect
+			})
+		})]
 	});
-	if (window.isInvalid) return {
-		text: labels.invalid,
-		isInvalid: true
-	};
-	const fromParts = parseRelativeParts(range.from);
-	const toParts = 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(formatCountUnit(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
-		isInvalid: false
-	};
-	if (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 ? 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 : formatDuration(window.duration, options.locale);
-		const prefix = exact || isExactMinutes(window.duration) ? "" : "~";
-		return {
-			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
-			isInvalid: false
-		};
-	}
-	const dateOnly = isDateOnly(range.from) && isDateOnly(range.to);
-	const from = formatInstant(window.from, _objectSpread2(_objectSpread2({}, options), {}, { dateOnly }));
-	const to = formatInstant(window.to, _objectSpread2(_objectSpread2({}, options), {}, { dateOnly }));
-	return {
-		text: from === to ? from : `${from} – ${to}`,
-		isInvalid: false
-	};
 }
 /**
-* TimeRangeControl — the window as an expression, not two frozen instants.
+* EventTimeline — a sequence of events, read as a sequence.
 *
-* 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.
+* A table of events answers "what happened" and hides "how it went": the rows
+* are evenly spaced no matter whether they were two seconds or two hours
+* apart, and the payload that would explain a row lives in a column nobody
+* widened. This renders the same data as an ordered rail, labels the elapsed
+* time between adjacent events, and opens each payload in place. Grouping by
+* session restores the boundary that makes a history legible.
 *
 * @example
 * ```tsx
-* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
-*
-* <TimeRangeControl
-*   value={range}
-*   onChange={setRange}
-*   timeZone="Asia/Seoul"
-*   showWindowButtons
-*   onRefresh={() => refetch()}
+* <EventTimeline
+*   groups={sessions.map((session) => ({
+*     id: session.id,
+*     title: session.entryPath,
+*     meta: `${session.duration} · ${session.events} events`,
+*     items: session.events,
+*   }))}
+*   showGaps
 * />
 * ```
 */
-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 = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$4), customLabels), {}, { units: _objectSpread2(_objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
-	const [open, setOpen] = useState(false);
-	const [draft, setDraft] = useState(null);
-	const [quickCount, setQuickCount] = useState("15");
-	const [quickUnit, setQuickUnit] = 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 = useMemo(() => describeRange(value, labels, {
-		locale,
-		timeZone
-	}), [
-		value,
-		locale,
-		timeZone,
-		customLabels
-	]);
-	const boundState = useCallback((expression) => parseTimeExpression(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
-	const commit = useCallback((range) => {
-		setDraft(null);
-		onChange(range);
-	}, [onChange]);
-	const apply = useCallback(() => {
-		if (draft) commit(draft);
-		else onRefresh === null || onRefresh === void 0 || onRefresh();
-	}, [
-		draft,
-		commit,
-		onRefresh
-	]);
-	const commitOnEnter = useCallback((event) => {
-		if (event.key !== "Enter") return;
-		apply();
-		setOpen(false);
-	}, [apply]);
-	const applyQuick = 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 = useCallback((direction) => {
-		const next = shiftTimeRange(value, direction, { timeZone });
-		if (next) commit(next);
-	}, [
-		value,
-		timeZone,
-		commit
-	]);
-	const zoom = useCallback((factor) => {
-		const next = 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
+function EventTimeline({ items, groups, showGaps = true, order = "desc", minGapMs = 1e3, loading = false, hasMore = false, onLoadMore, onItemSelect, locale = OPT_UI_DEFAULT_LOCALE, labels: customLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const flatItems = items !== null && items !== void 0 ? items : [];
+	const hasContent = groups ? groups.length > 0 : flatItems.length > 0;
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: cn(TIMELINE_WIDTH, "flex flex-col gap-3", className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 size-2 rounded-full" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex grow flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-64" })]
+			})]
+		}, index))
+	});
+	if (!hasContent) return /* @__PURE__ */ jsx("div", {
+		className: cn(TIMELINE_WIDTH, className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			title: labels.emptyTitle,
+			description: labels.emptyDescription,
+			tone: "subdued",
+			hasBorder: true
+		})
 	});
-	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every(formatDuration(refresh.interval, locale));
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("bg-surface inline-flex items-center rounded-lg border", 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__ */ jsxs(PopoverRoot$1, {
-				open,
-				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
-					className: cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
-					disabled,
-					children: [/* @__PURE__ */ jsx(Clock, {
-						className: "text-text-tertiary h-4 w-4",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ jsx("span", {
-						className: "truncate text-sm",
-						children: description.text
-					})]
-				}), /* @__PURE__ */ jsxs(PopoverContent$1, {
-					className: "gap-group flex w-80 flex-col",
+		className: cn(TIMELINE_WIDTH, "flex flex-col gap-3", className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: [groups ? groups.map((group) => /* @__PURE__ */ jsx(GroupBlock, {
+			group,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}, group.id)) : /* @__PURE__ */ jsx(TimelineList, {
+			items: flatItems,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}), hasMore && onLoadMore && /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center pt-1",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: onLoadMore,
+				children: labels.loadMore
+			})
+		})]
+	});
+}
+EventTimeline.displayName = "EventTimeline";
+//#endregion
+//#region src/shells/score-breakdown.tsx
+const defaultLabels$6 = {
+	title: "Score",
+	outOf: (max) => `out of ${max}`,
+	weight: (percent) => `${percent} of total`,
+	empty: "Not enough activity to score."
+};
+const toneText = {
+	default: "text-text-primary",
+	success: "text-success-fg",
+	warning: "text-warning-fg",
+	error: "text-danger-fg"
+};
+const toneMeter = {
+	default: "default",
+	success: "success",
+	warning: "warning",
+	error: "error"
+};
+/** Picks the band a score falls into — the highest `min` at or below it. */
+function resolveBand(score, bands) {
+	return bands.filter((band) => score >= band.min).sort((left, right) => right.min - left.min)[0];
+}
+/**
+* ScoreBreakdown — a composite score you can argue with.
+*
+* Engagement, health and risk scores all collapse several signals into one
+* number, and the number alone tells nobody what to do about it. Showing the
+* axes and their weights beside the headline turns "43" into "recent, but
+* shallow", which is a finding rather than a verdict.
+*/
+function ScoreBreakdown({ score, max = 100, axes, bands = [], formula, loading = false, labels: customLabels, className }) {
+	var _band$tone;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$6), customLabels);
+	const band = resolveBand(score, bands);
+	const tone = (_band$tone = band === null || band === void 0 ? void 0 : band.tone) !== null && _band$tone !== void 0 ? _band$tone : "default";
+	if (loading) return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_BORDER, "flex flex-col gap-3 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" }), Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }, index))]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_BORDER, "flex flex-col gap-4 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn(OPT_TEXT_SECONDARY, "text-sm"),
+					children: labels.title
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline gap-2",
 					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ jsx("p", {
-								className: "text-text-primary text-xs font-medium",
-								children: labels.quickSelect
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "flex items-end gap-2",
-								children: [
-									/* @__PURE__ */ jsx(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__ */ jsxs(SelectRoot$1, {
-										value: quickUnit,
-										setValue: (next) => setQuickUnit(selectValue(next)),
-										children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
-											minWidth: 110,
-											"aria-label": labels.quickSelect
-										}), /* @__PURE__ */ jsx(SelectPopover$1, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ jsx(SelectItem$1, {
-											value: unit,
-											children: labels.units[unit]
-										}, unit)) })]
-									}),
-									/* @__PURE__ */ jsx(Button, {
-										variant: "secondary",
-										size: "sm",
-										onClick: applyQuick,
-										children: labels.apply
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ jsx(Input, {
-								label: labels.start,
-								size: "sm",
-								value: editing.from,
-								error: boundState(editing.from),
-								hint: labels.startHint,
-								onChange: (event) => setDraft(_objectSpread2(_objectSpread2({}, editing), {}, { from: event.target.value })),
-								onKeyDown: commitOnEnter
-							}), /* @__PURE__ */ jsx(Input, {
-								label: labels.end,
-								size: "sm",
-								value: editing.to,
-								error: boundState(editing.to),
-								onChange: (event) => setDraft(_objectSpread2(_objectSpread2({}, editing), {}, { to: event.target.value })),
-								onKeyDown: commitOnEnter
-							})]
-						}),
-						presets && presets.length > 0 && /* @__PURE__ */ jsx(RangeList, {
-							title: labels.commonlyUsed,
-							items: presets,
-							onPick: (range) => {
-								commit(range);
-								setOpen(false);
-							}
+						/* @__PURE__ */ jsx("span", {
+							className: cn("text-3xl font-bold tabular-nums", toneText[tone]),
+							children: score
 						}),
-						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ jsx(RangeList, {
-							title: labels.recentlyUsed,
-							items: recentRanges.slice(0, 5),
-							onPick: (range) => {
-								commit(range);
-								setOpen(false);
-							}
+						/* @__PURE__ */ jsx("span", {
+							className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+							children: labels.outOf(max)
 						}),
-						onRefreshChange && /* @__PURE__ */ jsxs("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ jsx("p", {
-								className: "text-text-primary text-xs font-medium",
-								children: labels.autoRefresh
-							}), /* @__PURE__ */ jsxs(SelectRoot$1, {
-								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__ */ jsx(SelectTrigger$1, {
-									minWidth: 140,
-									"aria-label": labels.autoRefresh
-								}), /* @__PURE__ */ jsx(SelectPopover$1, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ jsx(SelectItem$1, {
-									value: String(interval),
-									children: interval === 0 ? labels.autoRefreshOff : labels.every(formatDuration(interval, locale))
-								}, interval)) })]
-							})]
+						band && /* @__PURE__ */ jsx("span", {
+							className: cn("ml-1 text-sm font-medium", toneText[tone]),
+							children: band.label
 						})
 					]
-				})]
-			}),
-			showWindowButtons && /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center border-l", "border border-border"),
-				role: "group",
-				"aria-label": labels.previous,
+				}),
+				formula && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-tertiary", "text-xs"),
+					children: formula
+				})
+			]
+		}), axes.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: cn(OPT_TEXT_SECONDARY, "text-sm"),
+			children: labels.empty
+		}) : /* @__PURE__ */ jsx("dl", {
+			className: "flex flex-col gap-3",
+			children: axes.map((axis) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
 				children: [
-					/* @__PURE__ */ jsx(IconButton, {
-						label: labels.previous,
-						disabled: disabled || description.isInvalid,
-						onClick: () => step(-1),
-						children: /* @__PURE__ */ jsx(ChevronLeft, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}),
-					/* @__PURE__ */ jsx(IconButton, {
-						label: labels.zoomIn,
-						disabled: disabled || description.isInvalid,
-						onClick: () => zoom(-zoomFactor),
-						children: /* @__PURE__ */ jsx(ZoomIn, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ jsxs("dt", {
+							className: cn(OPT_TEXT_PRIMARY, "text-sm"),
+							title: axis.hint,
+							children: [axis.label, axis.weight !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: cn("text-text-tertiary", "ml-1.5 text-xs"),
+								children: labels.weight(`${Math.round(axis.weight * 100)}%`)
+							})]
+						}), /* @__PURE__ */ jsx("dd", {
+							className: cn(OPT_TEXT_SECONDARY, "text-sm font-medium tabular-nums"),
+							children: Math.round(axis.value)
+						})]
 					}),
-					/* @__PURE__ */ jsx(IconButton, {
-						label: labels.zoomOut,
-						disabled: disabled || description.isInvalid,
-						onClick: () => zoom(zoomFactor),
-						children: /* @__PURE__ */ jsx(ZoomOut, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
+					/* @__PURE__ */ jsx(Meter$1, {
+						value: axis.value,
+						max,
+						size: "sm",
+						variant: toneMeter[tone],
+						"aria-label": axis.label
 					}),
-					/* @__PURE__ */ jsx(IconButton, {
-						label: labels.nextWindow,
-						disabled: disabled || description.isInvalid,
-						onClick: () => step(1),
-						children: /* @__PURE__ */ jsx(ChevronRight, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
+					axis.hint && /* @__PURE__ */ jsx("p", {
+						className: cn("text-text-tertiary", "text-xs"),
+						children: axis.hint
 					})
 				]
-			}),
-			(onRefresh || showUpdateButton) && /* @__PURE__ */ jsx("div", {
-				className: cn("border-l pl-2 pr-2", "border border-border"),
-				children: /* @__PURE__ */ jsx(Button, {
-					variant: hasChanges ? "primary" : "secondary",
-					size: "sm",
-					loading: isLoading,
-					disabled: disabled || description.isInvalid,
-					onClick: apply,
-					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ jsx(RefreshCw, {
-						className: "h-3.5 w-3.5",
-						"aria-hidden": "true"
-					}),
-					title: refreshLabel,
-					children: hasChanges ? labels.update : labels.refresh
+			}, axis.id))
+		})]
+	});
+}
+ScoreBreakdown.displayName = "ScoreBreakdown";
+//#endregion
+//#region src/shells/flyout.tsx
+const defaultLabels$5 = { close: "Close panel" };
+const sizeClass = {
+	sm: "sm:w-[22rem]",
+	md: "sm:w-[30rem]",
+	lg: "sm:w-[42rem]"
+};
+/**
+* Flyout — a detail panel that does not take the page away.
+*
+* Navigating from a list to a record and back costs the reader their scroll
+* position, their filters and their place in the scan. A flyout keeps the list
+* on screen and shows the record beside it, so comparing three rows is three
+* clicks rather than six navigations.
+*
+* Deliberately **not** a modal: no focus trap, no `aria-modal`, no inert page.
+* The list behind it is still the point, and a reader who tabs out of the panel
+* to change a filter is doing the expected thing. Escape closes; focus returns
+* to whatever opened it.
+*
+* @example
+* ```tsx
+* <Flyout open={Boolean(selected)} onClose={clear} title={selected?.name}>
+*   <DescriptionList items={fields} />
+* </Flyout>
+* ```
+*/
+function Flyout({ open, onClose, title, description, type = "overlay", side = "right", size = "md", actions, footer, scrim = false, closeOnOutsideClick = true, hideCloseButton = false, labels: customLabels, className, children }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$5), customLabels);
+	const panelRef = useRef(null);
+	const openerRef = useRef(null);
+	useEffect(() => {
+		var _panelRef$current;
+		if (!open) return;
+		openerRef.current = document.activeElement;
+		(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.focus({ preventScroll: true });
+		return () => {
+			var _openerRef$current, _openerRef$current$fo;
+			(_openerRef$current = openerRef.current) === null || _openerRef$current === void 0 || (_openerRef$current$fo = _openerRef$current.focus) === null || _openerRef$current$fo === void 0 || _openerRef$current$fo.call(_openerRef$current, { preventScroll: true });
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+	useEffect(() => {
+		if (!open || !closeOnOutsideClick || type !== "overlay") return;
+		const handlePointerDown = (event) => {
+			const panel = panelRef.current;
+			if (panel && !panel.contains(event.target)) onClose();
+		};
+		const timer = window.setTimeout(() => {
+			document.addEventListener("pointerdown", handlePointerDown);
+		}, 0);
+		return () => {
+			window.clearTimeout(timer);
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [
+		open,
+		closeOnOutsideClick,
+		type,
+		onClose
+	]);
+	const handleClose = useCallback(() => onClose(), [onClose]);
+	if (!open) return null;
+	const header = (title || actions || !hideCloseButton) && /* @__PURE__ */ jsxs("header", {
+		className: cn("border-border-subtle flex items-start gap-2 border-b px-4 py-3"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 grow flex-col gap-0.5",
+				children: [title && /* @__PURE__ */ jsx("h2", {
+					className: cn("text-text-primary", "truncate text-base font-semibold"),
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-secondary", "truncate text-xs"),
+					children: description
+				})]
+			}),
+			actions,
+			!hideCloseButton && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleClose,
+				"aria-label": labels.close,
+				className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-text-tertiary", "hover:text-text-primary shrink-0 rounded p-1 transition-colors"),
+				children: /* @__PURE__ */ jsx(X, {
+					className: "size-4",
+					"aria-hidden": "true"
 				})
 			})
 		]
 	});
-}
-TimeRangeControl.displayName = "TimeRangeControl";
-function IconButton({ label, disabled, onClick, children }) {
-	return /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "sm",
-		"aria-label": label,
-		title: label,
-		disabled,
-		onClick,
-		children
+	const panel = /* @__PURE__ */ jsxs("aside", {
+		ref: panelRef,
+		role: "dialog",
+		"aria-modal": false,
+		"aria-label": typeof title === "string" ? title : void 0,
+		tabIndex: -1,
+		className: cn(OPT_FOCUS_VISIBLE, "flex min-h-0 flex-col", type === "overlay" && [
+			"rounded-xl bg-surface-raised shadow-md",
+			"fixed inset-y-0 z-40 w-full",
+			sizeClass[size],
+			side === "right" ? "right-0 border-l" : "left-0 border-r",
+			"border-border"
+		], type === "inline" && ["border border-border", "rounded-xl bg-surface"], className),
+		"data-opt-id": "85XVE",
+		"data-opt-slug": "flyout.Flyout",
+		children: [
+			header,
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 grow overflow-y-auto px-4 py-4",
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "border-border-subtle border-t px-4 py-3",
+				children: footer
+			})
+		]
 	});
+	if (type === "inline") return panel;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [scrim && /* @__PURE__ */ jsx("div", {
+		className: "bg-overlay fixed inset-0 z-30",
+		"aria-hidden": "true"
+	}), panel] });
 }
-function RangeList({ title, items, onPick }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "gap-element flex flex-col",
-		children: [/* @__PURE__ */ jsx("p", {
-			className: "text-text-primary text-xs font-medium",
-			children: title
-		}), /* @__PURE__ */ jsx("ul", {
-			className: "grid grid-cols-2 gap-1",
-			children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", OPT_TEXT_SECONDARY),
-				onClick: () => onPick(item.range),
-				children: item.label
-			}) }, `${item.label}-${index}`))
-		})]
-	});
+Flyout.displayName = "Flyout";
+//#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] };
 }
 /**
-* The windows most analytics tools open with. Exported so a caller gets a
-* sensible list without inventing date math of their own.
+* 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.
 */
-const DEFAULT_TIME_PRESETS = [
-	{
-		label: "Last 15 minutes",
-		range: {
-			from: "now-15m",
-			to: "now"
-		}
-	},
-	{
-		label: "Last hour",
-		range: {
-			from: "now-1h",
-			to: "now"
-		}
-	},
-	{
-		label: "Last 24 hours",
-		range: {
-			from: "now-24h",
-			to: "now"
+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(/^"/, "");
+}
+const OPERATORS = [
 	{
-		label: "Last 7 days",
-		range: {
-			from: "now-7d",
-			to: "now"
-		}
+		symbol: ">=",
+		operator: "gte"
 	},
 	{
-		label: "Last 30 days",
-		range: {
-			from: "now-30d",
-			to: "now"
-		}
+		symbol: "<=",
+		operator: "lte"
 	},
 	{
-		label: "Last 90 days",
-		range: {
-			from: "now-90d",
-			to: "now"
-		}
+		symbol: ":",
+		operator: "eq"
 	},
 	{
-		label: "Today",
-		range: {
-			from: "now/d",
-			to: "now/d"
-		}
+		symbol: ">",
+		operator: "gt"
 	},
 	{
-		label: "This week",
-		range: {
-			from: "now/w",
-			to: "now/w"
-		}
+		symbol: "<",
+		operator: "lt"
 	}
 ];
-//#endregion
-//#region src/shells/time-series-panel.tsx
-const defaultLabels$3 = {
-	back: "Back to previous range",
-	legend: "Series"
+/** 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;
+		}
+		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/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 = _objectSpread2(_objectSpread2({}, defaultLabels$3), customLabels);
-	const [history, setHistory] = useState([]);
-	const [hidden, setHidden] = useState([]);
-	const resolved = useMemo(() => resolveTimeRange(range, { timeZone }), [range, timeZone]);
-	const visibleSeries = useMemo(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
-	const handleRangeSelect = useCallback((selection) => {
-		setHistory((current) => [...current, range].slice(-10));
-		onRangeChange(toAbsoluteRange(selection));
-	}, [range, onRangeChange]);
-	const goBack = useCallback(() => {
-		setHistory((current) => {
-			const previous = current[current.length - 1];
-			if (previous) onRangeChange(previous);
-			return current.slice(0, -1);
-		});
-	}, [onRangeChange]);
-	const setRange = useCallback((next) => {
-		setHistory([]);
-		onRangeChange(next);
-	}, [onRangeChange]);
-	const toggleSeries = useCallback((dataKey) => {
-		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
-	}, []);
-	return /* @__PURE__ */ jsxs("section", {
-		className: cn(OPT_SURFACE, OPT_BORDER, "flex flex-col", className),
-		"aria-label": ariaLabel,
-		"data-opt-id": "Y0XCY",
-		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "gap-element flex min-w-0 flex-col",
-				children: [title && /* @__PURE__ */ jsx("h3", {
-					className: "text-text-primary truncate text-base font-semibold",
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: cn("text-text-secondary", "truncate text-sm"),
-					children: description
-				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "gap-element flex flex-wrap items-center",
-				children: [
-					history.length > 0 && /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "sm",
-						onClick: goBack,
-						leftIcon: /* @__PURE__ */ jsx(Undo2, {
-							className: "h-3.5 w-3.5",
-							"aria-hidden": "true"
-						}),
-						children: labels.back
-					}),
-					actions,
-					showRangeControl && /* @__PURE__ */ jsx(TimeRangeControl, {
-						value: range,
-						onChange: setRange,
-						presets,
-						recentRanges,
-						timeZone,
-						locale,
-						refresh,
-						onRefreshChange,
-						onRefresh,
-						isLoading,
-						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$4), customLabels);
+	const inputRef = useRef(null);
+	const [text, setText] = useState(() => formatQuery(value));
+	const [focused, setFocused] = useState(false);
+	const [highlighted, setHighlighted] = useState(0);
+	const committedRef = useRef(formatQuery(value));
+	useEffect(() => {
+		const next = formatQuery(value);
+		if (next === committedRef.current) return;
+		committedRef.current = next;
+		if (!focused) setText(next);
+	}, [value, focused]);
+	const parsed = useMemo(() => parseQueryWithDiagnostics(text), [text]);
+	const commit = useCallback((nextText) => {
+		const nextQuery = parseQueryWithDiagnostics(nextText).query;
+		committedRef.current = formatQuery(nextQuery);
+		onChange(nextQuery);
+	}, [onChange]);
+	const suggestions = useSuggestions(text, parsed.trailing, fields);
+	const applySuggestion = 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__ */ jsxs("div", {
+		className: cn("relative flex min-w-0 flex-col gap-1.5", className),
+		"data-opt-id": "JSVZ1",
+		"data-opt-slug": "query-bar.QueryBar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				children: [
+					/* @__PURE__ */ jsx(Search, {
+						className: "text-text-tertiary size-4 shrink-0",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ 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: 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__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.clear,
+						title: labels.clear,
+						className: 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__ */ jsx(X, {
+							className: "size-3.5",
+							"aria-hidden": true
+						})
 					})
 				]
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "px-2 pb-4",
-			children: /* @__PURE__ */ jsx(TimeSeriesChart, _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__ */ jsx("ul", {
+				id: "query-bar-suggestions",
+				role: "listbox",
+				className: 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__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": index === highlighted,
+					className: 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__ */ jsx("span", {
+						className: "text-text-primary truncate font-mono",
+						children: suggestion.label
+					}), suggestion.hint && /* @__PURE__ */ jsx("span", {
+						className: "text-text-tertiary shrink-0 text-xs",
+						children: suggestion.hint
+					})]
+				}) }, `${suggestion.kind}-${suggestion.label}`))
+			}),
+			showClauses && value.clauses.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: value.clauses.map((clause, index) => {
+					const label = describeClause(clause);
+					return /* @__PURE__ */ jsxs("li", {
+						className: 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__ */ jsx("span", {
+							className: "truncate",
+							children: label
+						}), /* @__PURE__ */ 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__ */ jsx(X, {
+								className: "size-3",
+								"aria-hidden": true
+							})
+						})]
+					}, `${label}-${index}`);
+				})
+			}),
+			parsed.diagnostics.length > 0 && /* @__PURE__ */ jsx(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
+			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ jsx("p", {
+				className: "text-text-tertiary text-xs",
+				children: labels.syntaxHint
+			})
+		]
 	});
 }
-TimeSeriesPanel.displayName = "TimeSeriesPanel";
-//#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;
-/**
-* 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;
+QueryBar.displayName = "QueryBar";
+function QueryDiagnostics({ diagnostics }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
+		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("code", {
+				className: "font-mono",
+				children: diagnostic.text
+			}),
+			" —",
+			" ",
+			diagnostic.message
+		] }, `${diagnostic.at}-${index}`))
+	});
 }
-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 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.
 */
-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 useSuggestions(text, trailing, fields) {
+	return 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/lib/use-auto-refresh.ts
 /**
-* LogTable — a windowed table for entries that keep arriving.
+* A refresh timer that waits for its own work.
 *
-* 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.
+* 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 useAutoRefresh({ interval, paused = false, onRefresh }) {
+	const callbackRef = useRef(onRefresh);
+	callbackRef.current = onRefresh;
+	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;
+}
+/**
+* What the trigger says.
 *
-* 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.
+* 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.
+*/
+function describeRange(range, labels, options) {
+	const window = measureTimeWindow(range, {
+		timeZone: options.timeZone,
+		now: options.now
+	});
+	if (window.isInvalid) return {
+		text: labels.invalid,
+		isInvalid: true
+	};
+	const fromParts = parseRelativeParts(range.from);
+	const toParts = 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(formatCountUnit(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
+		isInvalid: false
+	};
+	if (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 ? 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 : formatDuration(window.duration, options.locale);
+		const prefix = exact || isExactMinutes(window.duration) ? "" : "~";
+		return {
+			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
+			isInvalid: false
+		};
+	}
+	const dateOnly = isDateOnly(range.from) && isDateOnly(range.to);
+	const from = formatInstant(window.from, _objectSpread2(_objectSpread2({}, options), {}, { dateOnly }));
+	const to = formatInstant(window.to, _objectSpread2(_objectSpread2({}, options), {}, { dateOnly }));
+	return {
+		text: from === to ? from : `${from} – ${to}`,
+		isInvalid: false
+	};
+}
+/**
+* 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
-* <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 = _objectSpread2(_objectSpread2({}, defaultLabels$2), customLabels);
-	const rowHeight = ROW_HEIGHT[density];
-	const scrollRef = useRef(null);
-	const [scrollTop, setScrollTop] = useState(0);
-	const [viewportHeight, setViewportHeight] = useState(0);
-	const followingRef = useRef(true);
-	const previousTopIdRef = useRef(null);
-	const previousLengthRef = useRef(0);
-	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 = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$3), customLabels), {}, { units: _objectSpread2(_objectSpread2({}, defaultLabels$3.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState(null);
+	const [quickCount, setQuickCount] = useState("15");
+	const [quickUnit, setQuickUnit] = 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 = useMemo(() => describeRange(value, labels, {
+		locale,
+		timeZone
 	}), [
-		onFollowChange,
-		rows,
-		getRowId,
-		rowHeight
+		value,
+		locale,
+		timeZone,
+		customLabels
 	]);
-	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 = 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.
-	*/
-	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);
+	const boundState = useCallback((expression) => parseTimeExpression(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
+	const commit = useCallback((range) => {
+		setDraft(null);
+		onChange(range);
+	}, [onChange]);
+	const apply = useCallback(() => {
+		if (draft) commit(draft);
+		else onRefresh === null || onRefresh === void 0 || onRefresh();
 	}, [
-		rows,
-		getRowId,
-		prepending,
-		rowHeight,
-		syncFollowing
+		draft,
+		commit,
+		onRefresh
 	]);
-	/**
-	* 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.
-	*/
-	useEffect(() => {
-		const container = scrollRef.current;
-		if (!container || !hasMore || loadingMore || !onLoadMore) return;
-		if (container.scrollHeight <= container.clientHeight) onLoadMore();
+	const commitOnEnter = useCallback((event) => {
+		if (event.key !== "Enter") return;
+		apply();
+		setOpen(false);
+	}, [apply]);
+	const applyQuick = useCallback(() => {
+		const count = Number(quickCount);
+		if (!Number.isFinite(count) || count <= 0) return;
+		commit({
+			from: `now-${Math.round(count)}${quickUnit}`,
+			to: "now"
+		});
+		setOpen(false);
 	}, [
-		hasMore,
-		loadingMore,
-		onLoadMore,
-		rows.length,
-		viewportHeight
+		quickCount,
+		quickUnit,
+		commit
 	]);
-	const handleScroll = 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 step = useCallback((direction) => {
+		const next = shiftTimeRange(value, direction, { timeZone });
+		if (next) commit(next);
 	}, [
-		hasMore,
-		loadingMore,
-		onLoadMore,
-		syncFollowing
+		value,
+		timeZone,
+		commit
 	]);
-	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 = useMemo(() => rows.slice(firstVisible, lastVisible), [
-		rows,
-		firstVisible,
-		lastVisible
+	const zoom = useCallback((factor) => {
+		const next = zoomTimeRange(value, factor, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
 	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("@container/log flex min-h-0 flex-col", className),
-		"data-opt-id": "3ZR82",
-		"data-opt-slug": "log-table.LogTable",
-		children: [showHeader && /* @__PURE__ */ jsx(LogTableHeader, {
-			columns,
-			sort,
-			onSortChange,
-			onColumnMove,
-			density,
-			labels
-		}), /* @__PURE__ */ 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__ */ jsx("div", {
-					style: { height: totalHeight },
-					className: "relative",
-					children: visibleRows.map((row, index) => {
-						var _isNew;
-						const id = getRowId(row);
-						return /* @__PURE__ */ 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__ */ jsxs("div", {
-					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
-					children: [/* @__PURE__ */ jsx(Spinner, {
-						size: "sm",
-						"aria-hidden": true
-					}), labels.loadingMore]
-				}),
-				!hasMore && rows.length > 0 && /* @__PURE__ */ jsx("p", {
-					className: cn("text-text-tertiary", "py-3 text-center text-xs"),
-					children: labels.endOfResults
-				})
-			]
-		})]
+	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 = forwardRef(LogTableInner);
-function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "row",
-		className: 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__ */ jsxs(Fragment, { children: [
-				column.marker && /* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "size-1.5 shrink-0"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: column.header
-				}),
-				active && (sort.direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, {
-					className: "size-3 shrink-0",
-					"aria-hidden": true
-				}) : /* @__PURE__ */ jsx(ChevronDown, {
-					className: "size-3 shrink-0",
-					"aria-hidden": true
-				}))
-			] });
-			return /* @__PURE__ */ jsxs("div", {
-				role: "columnheader",
-				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
-				className: 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__ */ 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__ */ jsxs("span", {
-					className: 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__ */ 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__ */ jsx(ChevronLeft, {
-							className: "size-3",
-							"aria-hidden": true
-						})
-					}), index < columns.length - 1 && /* @__PURE__ */ 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__ */ jsx(ChevronRight, {
-							className: "size-3",
-							"aria-hidden": true
-						})
+	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every(formatDuration(refresh.interval, locale));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-surface inline-flex items-center rounded-lg border", 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__ */ jsxs(PopoverRoot$1, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
+					className: cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+					disabled,
+					children: [/* @__PURE__ */ jsx(Clock, {
+						className: "text-text-tertiary h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate text-sm",
+						children: description.text
 					})]
+				}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+					className: "gap-group flex w-80 flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.quickSelect
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ jsx(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__ */ jsxs(SelectRoot$1, {
+										value: quickUnit,
+										setValue: (next) => setQuickUnit(selectValue(next)),
+										children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
+											minWidth: 110,
+											"aria-label": labels.quickSelect
+										}), /* @__PURE__ */ jsx(SelectPopover$1, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ jsx(SelectItem$1, {
+											value: unit,
+											children: labels.units[unit]
+										}, unit)) })]
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: applyQuick,
+										children: labels.apply
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ jsx(Input, {
+								label: labels.start,
+								size: "sm",
+								value: editing.from,
+								error: boundState(editing.from),
+								hint: labels.startHint,
+								onChange: (event) => setDraft(_objectSpread2(_objectSpread2({}, editing), {}, { from: event.target.value })),
+								onKeyDown: commitOnEnter
+							}), /* @__PURE__ */ jsx(Input, {
+								label: labels.end,
+								size: "sm",
+								value: editing.to,
+								error: boundState(editing.to),
+								onChange: (event) => setDraft(_objectSpread2(_objectSpread2({}, editing), {}, { to: event.target.value })),
+								onKeyDown: commitOnEnter
+							})]
+						}),
+						presets && presets.length > 0 && /* @__PURE__ */ jsx(RangeList, {
+							title: labels.commonlyUsed,
+							items: presets,
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ jsx(RangeList, {
+							title: labels.recentlyUsed,
+							items: recentRanges.slice(0, 5),
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						onRefreshChange && /* @__PURE__ */ jsxs("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.autoRefresh
+							}), /* @__PURE__ */ jsxs(SelectRoot$1, {
+								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__ */ jsx(SelectTrigger$1, {
+									minWidth: 140,
+									"aria-label": labels.autoRefresh
+								}), /* @__PURE__ */ jsx(SelectPopover$1, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ jsx(SelectItem$1, {
+									value: String(interval),
+									children: interval === 0 ? labels.autoRefreshOff : labels.every(formatDuration(interval, locale))
+								}, interval)) })]
+							})]
+						})
+					]
 				})]
-			}, column.id);
-		})
-	});
-}
-function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, highlightTerms, labels }) {
-	return /* @__PURE__ */ 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: 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__ */ jsxs("div", {
-				className: 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),
+			}),
+			showWindowButtons && /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center border-l", "border border-border"),
+				role: "group",
+				"aria-label": labels.previous,
 				children: [
-					column.marker && text && /* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: "size-1.5 shrink-0 rounded-full",
-						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.previous,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					}),
-					/* @__PURE__ */ jsx("span", {
-						className: 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__ */ jsx(TextTruncate, {
-							text,
-							truncation: column.truncate,
-							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ jsx(Highlight, {
-								text: shown,
-								search: highlightTerms
-							}) : shown
-						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ jsx(Highlight, {
-							text,
-							search: highlightTerms
-						}) : text : EM_DASH
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.zoomIn,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(-zoomFactor),
+						children: /* @__PURE__ */ jsx(ZoomIn, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					}),
-					onCellAction && column.field && text && /* @__PURE__ */ jsx(CellActions, {
-						field: column.field,
-						value: text,
-						onAction: onCellAction,
-						labels
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.zoomOut,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(zoomFactor),
+						children: /* @__PURE__ */ jsx(ZoomOut, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.nextWindow,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(ChevronRight, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					})
 				]
-			}, column.id);
-		})
+			}),
+			(onRefresh || showUpdateButton) && /* @__PURE__ */ jsx("div", {
+				className: cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: hasChanges ? "primary" : "secondary",
+					size: "sm",
+					loading: isLoading,
+					disabled: disabled || description.isInvalid,
+					onClick: apply,
+					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ jsx(RefreshCw, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					title: refreshLabel,
+					children: hasChanges ? labels.update : labels.refresh
+				})
+			})
+		]
 	});
 }
-/**
-* Memoized because a live log re-renders several times a second while almost
-* every visible row is unchanged.
-*/
-const LogTableRow = 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__ */ jsxs("span", {
-		className: 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__ */ 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__ */ jsx(Plus, {
-				className: "size-3",
-				"aria-hidden": true
-			})
-		}), /* @__PURE__ */ 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__ */ jsx(Minus, {
-				className: "size-3",
-				"aria-hidden": true
-			})
-		})]
+TimeRangeControl.displayName = "TimeRangeControl";
+function IconButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
 	});
 }
-//#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" });
+function RangeList({ title, items, onPick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gap-element flex flex-col",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-text-primary text-xs font-medium",
+			children: title
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "grid grid-cols-2 gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", OPT_TEXT_SECONDARY),
+				onClick: () => onPick(item.range),
+				children: item.label
+			}) }, `${item.label}-${index}`))
+		})]
+	});
 }
-//#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.
+* The windows most analytics tools open with. Exported so a caller gets a
+* sensible list without inventing date math of their own.
 */
-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;
+const DEFAULT_TIME_PRESETS = [
+	{
+		label: "Last 15 minutes",
+		range: {
+			from: "now-15m",
+			to: "now"
 		}
-		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(/^"/, "");
-}
-const OPERATORS = [
+	},
 	{
-		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"
+		label: "Last 90 days",
+		range: {
+			from: "now-90d",
+			to: "now"
+		}
+	},
+	{
+		label: "Today",
+		range: {
+			from: "now/d",
+			to: "now/d"
+		}
+	},
+	{
+		label: "This week",
+		range: {
+			from: "now/w",
+			to: "now/w"
+		}
 	}
 ];
-/** 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;
-		}
-		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/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
+//#region src/shells/time-series-panel.tsx
+const defaultLabels$2 = {
+	back: "Back to previous range",
+	legend: "Series"
 };
-const MAX_SUGGESTIONS = 8;
 /**
-* QueryBar — one control for "find this" and "only these".
-*
-* 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.
+* TimeSeriesPanel — a chart you can steer.
 *
-* 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.
+* 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
-* <QueryBar
-*   value={query}
-*   onChange={setQuery}
-*   fields={[{ name: "path", values: ["/checkout", "/cart"] }]}
-*   showClauses
+* 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 QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$1), customLabels);
-	const inputRef = useRef(null);
-	const [text, setText] = useState(() => formatQuery(value));
-	const [focused, setFocused] = useState(false);
-	const [highlighted, setHighlighted] = useState(0);
-	const committedRef = useRef(formatQuery(value));
-	useEffect(() => {
-		const next = formatQuery(value);
-		if (next === committedRef.current) return;
-		committedRef.current = next;
-		if (!focused) setText(next);
-	}, [value, focused]);
-	const parsed = useMemo(() => parseQueryWithDiagnostics(text), [text]);
-	const commit = useCallback((nextText) => {
-		const nextQuery = parseQueryWithDiagnostics(nextText).query;
-		committedRef.current = formatQuery(nextQuery);
-		onChange(nextQuery);
-	}, [onChange]);
-	const suggestions = useSuggestions(text, parsed.trailing, fields);
-	const applySuggestion = 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__ */ jsxs("div", {
-		className: cn("relative flex min-w-0 flex-col gap-1.5", className),
-		"data-opt-id": "JSVZ1",
-		"data-opt-slug": "query-bar.QueryBar",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
-				children: [
-					/* @__PURE__ */ jsx(Search, {
-						className: "text-text-tertiary size-4 shrink-0",
-						"aria-hidden": true
-					}),
-					/* @__PURE__ */ 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: 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
+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 = _objectSpread2(_objectSpread2({}, defaultLabels$2), customLabels);
+	const titleId = useId();
+	const [history, setHistory] = useState([]);
+	const [hidden, setHidden] = useState([]);
+	const resolved = useMemo(() => resolveTimeRange(range, { timeZone }), [range, timeZone]);
+	const visibleSeries = useMemo(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
+	const handleRangeSelect = useCallback((selection) => {
+		setHistory((current) => [...current, range].slice(-10));
+		onRangeChange(toAbsoluteRange(selection));
+	}, [range, onRangeChange]);
+	const goBack = useCallback(() => {
+		setHistory((current) => {
+			const previous = current[current.length - 1];
+			if (previous) onRangeChange(previous);
+			return current.slice(0, -1);
+		});
+	}, [onRangeChange]);
+	const setRange = useCallback((next) => {
+		setHistory([]);
+		onRangeChange(next);
+	}, [onRangeChange]);
+	const toggleSeries = useCallback((dataKey) => {
+		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
+	}, []);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_SURFACE, 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__ */ jsxs("header", {
+			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "gap-element flex min-w-0 flex-col",
+				children: [title && /* @__PURE__ */ jsx("h3", {
+					id: titleId,
+					className: "text-text-primary truncate text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-secondary", "truncate text-sm"),
+					children: description
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "gap-element flex flex-wrap items-center",
+				children: [
+					history.length > 0 && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: goBack,
+						leftIcon: /* @__PURE__ */ jsx(Undo2, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						children: labels.back
+					}),
+					actions,
+					showRangeControl && /* @__PURE__ */ 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__ */ jsx("div", {
+			className: "px-2 pb-4",
+			children: /* @__PURE__ */ jsx(TimeSeriesChart, _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/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$1 = {
+	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;
+/**
+* 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.
+*
+* 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.
+*
+* 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
+* <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 = _objectSpread2(_objectSpread2({}, defaultLabels$1), customLabels);
+	const rowHeight = ROW_HEIGHT[density];
+	const scrollRef = useRef(null);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(0);
+	const followingRef = useRef(true);
+	const previousTopIdRef = useRef(null);
+	const previousLengthRef = useRef(0);
+	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;
+		}
+	}), [
+		onFollowChange,
+		rows,
+		getRowId,
+		rowHeight
+	]);
+	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 = 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.
+	*/
+	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.
+	*/
+	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 = 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 = useMemo(() => rows.slice(firstVisible, lastVisible), [
+		rows,
+		firstVisible,
+		lastVisible
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container/log flex min-h-0 flex-col", className),
+		"data-opt-id": "3ZR82",
+		"data-opt-slug": "log-table.LogTable",
+		children: [showHeader && /* @__PURE__ */ jsx(LogTableHeader, {
+			columns,
+			sort,
+			onSortChange,
+			onColumnMove,
+			density,
+			labels
+		}), /* @__PURE__ */ 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__ */ jsx("div", {
+					style: { height: totalHeight },
+					className: "relative",
+					children: visibleRows.map((row, index) => {
+						var _isNew;
+						const id = getRowId(row);
+						return /* @__PURE__ */ 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__ */ jsxs("div", {
+					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
+					children: [/* @__PURE__ */ jsx(Spinner, {
+						size: "sm",
+						"aria-hidden": true
+					}), labels.loadingMore]
+				}),
+				!hasMore && rows.length > 0 && /* @__PURE__ */ jsx("p", {
+					className: 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 = forwardRef(LogTableInner);
+function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "row",
+		className: 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__ */ jsxs(Fragment, { children: [
+				column.marker && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-1.5 shrink-0"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: column.header
+				}),
+				active && (sort.direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}) : /* @__PURE__ */ jsx(ChevronDown, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}))
+			] });
+			return /* @__PURE__ */ jsxs("div", {
+				role: "columnheader",
+				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				className: 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__ */ 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"
 					}),
-					text.length > 0 && /* @__PURE__ */ jsx("button", {
+					children: content
+				}) : content, onColumnMove && /* @__PURE__ */ jsxs("span", {
+					className: 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__ */ jsx("button", {
 						type: "button",
-						"aria-label": labels.clear,
-						title: labels.clear,
-						className: 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__ */ jsx(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__ */ jsx(ChevronLeft, {
+							className: "size-3",
+							"aria-hidden": true
+						})
+					}), index < columns.length - 1 && /* @__PURE__ */ 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__ */ jsx(ChevronRight, {
+							className: "size-3",
 							"aria-hidden": true
 						})
-					})
-				]
-			}),
-			showSuggestions && /* @__PURE__ */ jsx("ul", {
-				id: "query-bar-suggestions",
-				role: "listbox",
-				className: 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__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					role: "option",
-					"aria-selected": index === highlighted,
-					className: 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__ */ jsx("span", {
-						className: "text-text-primary truncate font-mono",
-						children: suggestion.label
-					}), suggestion.hint && /* @__PURE__ */ jsx("span", {
-						className: "text-text-tertiary shrink-0 text-xs",
-						children: suggestion.hint
 					})]
-				}) }, `${suggestion.kind}-${suggestion.label}`))
-			}),
-			showClauses && value.clauses.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: value.clauses.map((clause, index) => {
-					const label = describeClause(clause);
-					return /* @__PURE__ */ jsxs("li", {
-						className: 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__ */ jsx("span", {
-							className: "truncate",
-							children: label
-						}), /* @__PURE__ */ 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__ */ jsx(X, {
-								className: "size-3",
-								"aria-hidden": true
-							})
-						})]
-					}, `${label}-${index}`);
-				})
-			}),
-			parsed.diagnostics.length > 0 && /* @__PURE__ */ jsx(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
-			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ jsx("p", {
-				className: "text-text-tertiary text-xs",
-				children: labels.syntaxHint
-			})
-		]
+				})]
+			}, column.id);
+		})
 	});
 }
-QueryBar.displayName = "QueryBar";
-function QueryDiagnostics({ diagnostics }) {
-	return /* @__PURE__ */ jsx("ul", {
-		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
-		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ jsxs("li", { children: [
-			/* @__PURE__ */ 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__ */ 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: 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__ */ jsxs("div", {
+				className: 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__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-1.5 shrink-0 rounded-full",
+						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: 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__ */ jsx(TextTruncate, {
+							text,
+							truncation: column.truncate,
+							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ jsx(Highlight, {
+								text: shown,
+								search: highlightTerms
+							}) : shown
+						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ jsx(Highlight, {
+							text,
+							search: highlightTerms
+						}) : text : EM_DASH
+					}),
+					onCellAction && column.field && text && /* @__PURE__ */ 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 = 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 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__ */ jsxs("span", {
+		className: 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__ */ 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__ */ jsx(Plus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		}), /* @__PURE__ */ 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__ */ jsx(Minus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		})]
+	});
 }
 //#endregion
 //#region src/shells/field-sidebar.tsx
@@ -4270,6 +4822,4 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 	});
 }
 //#endregion
-export { CommandList$1 as $, DataTable as A, SidebarNav as B, WorkflowCanvas as C, ToastProvider as D, NotificationToast as E, DeploymentTimeline as F, CommandPaletteTrigger as G, StatusSelect as H, SettingsForm as I, CommandDialog as J, CommandPalette as K, FaqAccordion as L, BranchSelect as M, EnvPanel as N, toast as O, ProjectSwitcher as P, CommandItem$1 as Q, ContentTabs as R, useAutoRefresh as S, FailureList as T, SearchCombobox as U, AppMenubar as V, DashboardGrid as W, CommandGroup$1 as X, CommandEmpty$1 as Y, CommandInput$1 as Z, withoutField as _, formatQuery as a, DEFAULT_TIME_PRESETS as b, parseQueryWithDiagnostics as c, applyCellAction as d, CommandSeparator$1 as et, fieldValues as f, withFieldValue as g, removeClause as h, formatClause as i, DomainTable as j, useToast as k, EMPTY_QUERY as l, queryFields as m, QueryBar as n, quoteValue as o, isEmptyQuery as p, Command as q, describeClause as r, parseQuery as s, FieldSidebar as t, CommandShortcut as tt, addClause as u, LogTable as v, KeyValueEditor as w, TimeRangeControl as x, TimeSeriesPanel as y, EditorToolbar as z };
-
-//# sourceMappingURL=field-sidebar-BXjvV7Cz.js.map
+export { CommandGroup$1 as $, ToastProvider as A, FaqAccordion as B, Flyout as C, KeyValueEditor as D, WorkflowCanvas as E, BranchSelect as F, StatusSelect as G, EditorToolbar as H, EnvPanel as I, CommandPaletteTrigger as J, SearchCombobox as K, ProjectSwitcher as L, useToast as M, DataTable as N, FailureList as O, DomainTable as P, CommandEmpty$1 as Q, DeploymentTimeline as R, withoutField as S, EventTimeline as T, SidebarNav as U, ContentTabs as V, AppMenubar as W, Command as X, CommandPalette as Y, CommandDialog as Z, fieldValues as _, TimeRangeControl as a, removeClause as b, describeClause as c, quoteValue as d, CommandInput$1 as et, parseQuery as f, applyCellAction as g, addClause as h, DEFAULT_TIME_PRESETS as i, CommandShortcut as it, toast as j, NotificationToast as k, formatClause as l, EMPTY_QUERY as m, LogTable as n, CommandList$1 as nt, useAutoRefresh as o, parseQueryWithDiagnostics as p, DashboardGrid as q, TimeSeriesPanel as r, CommandSeparator$1 as rt, QueryBar as s, FieldSidebar as t, CommandItem$1 as tt, formatQuery as u, isEmptyQuery as v, ScoreBreakdown as w, withFieldValue as x, queryFields as y, SettingsForm as z };