@reopt-ai/opt-ui 1.10.0 → 1.12.0

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

@@ -1,5 +1,5 @@
 "use client";
-const require_text_truncate = require("./text-truncate-CxdzAnhS.cjs");
+const require_text_truncate = require("./text-truncate-I1XLWmRa.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -254,7 +254,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) {
@@ -263,7 +263,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), customLabels);
 	const columnCount = normalizeDashboardColumns(columns);
 	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
 	const rows = [];
@@ -291,13 +291,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
 	const inputId = (0, react.useId)();
 	const [query, setQuery] = (0, react.useState)("");
 	const [asyncResults, setAsyncResults] = (0, react.useState)([]);
@@ -395,14 +395,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const [internalValue, setInternalValue] = (0, react.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;
@@ -469,7 +469,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__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuPopover, { children: menu.items.map((item, i) => {
 		if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuSeparator, {}, `sep-${i}`);
@@ -513,7 +513,7 @@ function MenuSection({ menu }) {
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
 	if (menus.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenubarRoot, {
 		"data-opt-id": "BGKHW",
@@ -552,10 +552,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
 	const pathname = (0, next_navigation.usePathname)();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = (0, react.useState)(activeItem ? domId(activeItem.id) : void 0);
@@ -603,7 +603,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__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ToolbarButton, {
 		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"}`,
@@ -613,7 +613,7 @@ function ToolbarButtonWithTooltip({ button, active, onAction }) {
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$16), customLabels);
 	const groups = [];
 	let current = [];
 	for (const btn of buttons) {
@@ -646,14 +646,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$15), customLabels);
 	const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
@@ -685,13 +685,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -731,14 +731,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$13), customLabels);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
 	const defaultValues = {};
 	for (const field of fields) {
@@ -1064,7 +1064,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"
@@ -1076,7 +1076,7 @@ const envDot = {
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$12), customLabels);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rounded-lg ${require_text_truncate.OPT_BORDER} divide-y ${require_text_truncate.OPT_DIVIDER} bg-surface`,
 		"data-opt-id": "ZBDWK",
@@ -1149,7 +1149,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/branch-select.tsx
-const defaultLabels$8 = {
+const defaultLabels$11 = {
 	selectLabel: "브랜치",
 	emptySelectionLabel: "선택...",
 	emptyMessage: "사용 가능한 브랜치가 없습니다.",
@@ -1158,7 +1158,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$11), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const defaultBranch = branches.find((b) => b.isDefault);
 	const [internalValue, setInternalValue] = (0, react.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 : "");
@@ -1267,7 +1267,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",
@@ -1297,7 +1297,7 @@ const sslLabel = {
 };
 /** Renders the domain table component. */
 function DomainTable({ domains, title = "도메인", labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$10), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -1475,7 +1475,7 @@ function DataTableProgressBar({ value, barColor, label }) {
 	});
 }
 /** Renders the data table component. */
-function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, className }) {
+function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, className }) {
 	const [sortCol, setSortCol] = (0, react.useState)(null);
 	const [sortDir, setSortDir] = (0, react.useState)(null);
 	const [expandedKeys, setExpandedKeys] = (0, react.useState)(/* @__PURE__ */ new Set());
@@ -1569,8 +1569,8 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 					focusWrap: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.Composite, {
 						role: "grid",
-						"aria-label": title,
-						className: "w-full",
+						"aria-label": title !== null && title !== void 0 ? title : ariaLabel,
+						className: "w-full min-w-max",
 						render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {}),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 							className: require_text_truncate.cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
@@ -1601,7 +1601,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 										tabIndex: isSortable ? 0 : void 0,
 										"aria-sort": sortCol === col.id && sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "flex items-center",
+											className: "flex items-center whitespace-nowrap",
 											children: [col.header, sortIndicator(col.id)]
 										}), resizableColumns && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											role: "separator",
@@ -1665,7 +1665,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												className: require_text_truncate.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
 												role: "gridcell"
 											}),
-											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
+											className: "outline-none data-[focus-visible]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Checkbox, {
 												checked: isSelected,
 												onChange: () => toggleSelectRow(key),
@@ -1677,7 +1677,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												className: require_text_truncate.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
 												role: "gridcell"
 											}),
-											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
+											className: "outline-none data-[focus-visible]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 												type: "button",
 												onClick: (e) => {
@@ -1903,7 +1903,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 }
 //#endregion
 //#region src/shells/failure-list.tsx
-const defaultLabels$6 = {
+const defaultLabels$9 = {
 	title: "최근 실패",
 	emptyMessage: "실패 항목이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -2002,20 +2002,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;
@@ -2091,7 +2091,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: "추가",
@@ -2105,7 +2105,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$5), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$8), customLabels);
 	const [internalEntries, setInternalEntries] = (0, react.useState)(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
 	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
 	const keyInputRef = (0, react.useRef)(null);
@@ -2401,1651 +2401,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 = (0, react.useRef)(onRefresh);
-	callbackRef.current = onRefresh;
-	(0, react.useEffect)(() => {
-		if (paused || interval <= 0 || !callbackRef.current) return;
-		let cancelled = false;
-		let timer;
-		const schedule = () => {
-			timer = setTimeout(async () => {
-				if (cancelled) return;
-				try {
-					var _callbackRef$current;
-					await ((_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef));
-				} catch (_unused) {
-					return;
-				}
-				if (!cancelled) schedule();
-			}, interval);
-		};
-		schedule();
-		return () => {
-			cancelled = true;
-			if (timer) clearTimeout(timer);
-		};
-	}, [interval, paused]);
-}
-//#endregion
-//#region src/shells/time-range-control.tsx
-const defaultLabels$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 = (0, _reopt_ai_opt_charts.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__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: require_text_truncate.cn(require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "truncate text-xs"),
+				children: key
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: require_text_truncate.cn(require_text_truncate.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] = (0, react.useState)(false);
+	const expandable = Boolean(item.content || item.properties);
+	const toggle = (0, react.useCallback)(() => setOpen((value) => !value), []);
+	const headline = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+		children: item.name
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: "relative flex gap-3 pb-4 last:pb-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 flex-col items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "bg-border mt-1 w-px grow",
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 grow flex-col",
+			children: [
+				gapLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("text-text-tertiary", "mb-1 text-xs tabular-nums"),
+					children: labels.gap(gapLabel)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 items-baseline gap-2",
+					children: [
+						item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-tertiary",
+							"aria-hidden": "true",
+							children: item.icon
+						}),
+						onItemSelect ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => onItemSelect(item),
+							className: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, "hover:text-accent min-w-0 truncate rounded text-left"),
+							children: headline
+						}) : headline,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+							dateTime: item.timestamp,
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "ml-auto shrink-0 text-xs tabular-nums"),
+							children: require_text_truncate.formatOptTime(item.timestamp)
+						})
+					]
+				}),
+				item.detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-xs"),
+					children: item.detail
+				}),
+				expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: toggle,
+					"aria-expanded": open,
+					className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.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 (0, react.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 (0, _reopt_ai_opt_charts.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__ */ (0, react_jsx_runtime.jsx)("ol", {
+		className: "flex flex-col",
+		children: items.map((item, index) => {
+			var _gaps$index;
+			return /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)((_group$defaultOpen = group.defaultOpen) !== null && _group$defaultOpen !== void 0 ? _group$defaultOpen : true);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "rounded-xl"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 px-3 py-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => setOpen((value) => !value),
+					"aria-expanded": open,
+					className: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, "flex min-w-0 grow items-center gap-2 rounded text-left"),
+					children: [
+						open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+							children: group.title
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Badge, {
+							size: "sm",
+							variant: "default",
+							className: "shrink-0",
+							children: group.items.length
+						})
+					]
+				}),
+				group.meta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("text-text-tertiary", "shrink-0 text-xs"),
+					children: group.meta
+				}),
+				group.href && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href: group.href,
+					className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border-subtle border-t px-3 py-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineList, {
+				items: group.items,
+				showGaps,
+				order,
+				minGapMs,
+				locale,
+				labels,
+				onItemSelect
+			})
+		})]
 	});
-	if (window.isInvalid) return {
-		text: labels.invalid,
-		isInvalid: true
-	};
-	const fromParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.from);
-	const toParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.to);
-	if ((fromParts === null || fromParts === void 0 ? void 0 : fromParts.roundUnit) && fromParts.count === 0 && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === fromParts.roundUnit && toParts.count === 0) return {
-		text: labels.thisUnit((0, _reopt_ai_opt_charts.formatCountUnit)(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
-		isInvalid: false
-	};
-	if ((0, _reopt_ai_opt_charts.isRelativeToNow)(range)) {
-		var _toParts$count;
-		const anchoredAtEnd = ((_toParts$count = toParts === null || toParts === void 0 ? void 0 : toParts.count) !== null && _toParts$count !== void 0 ? _toParts$count : 0) === 0;
-		const parts = anchoredAtEnd ? fromParts : toParts;
-		const bothSnapped = (parts === null || parts === void 0 ? void 0 : parts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit) && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit);
-		const counted = parts && parts.count > 0 ? (0, _reopt_ai_opt_charts.formatCountUnit)(parts.roundUnit && bothSnapped ? parts.count + 1 : parts.count, parts.unit, options.locale) : null;
-		const exact = counted !== null && (!(parts === null || parts === void 0 ? void 0 : parts.roundUnit) || bothSnapped);
-		const duration = exact ? counted : (0, _reopt_ai_opt_charts.formatDuration)(window.duration, options.locale);
-		const prefix = exact || (0, _reopt_ai_opt_charts.isExactMinutes)(window.duration) ? "" : "~";
-		return {
-			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
-			isInvalid: false
-		};
-	}
-	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
-	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
-	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
-	return {
-		text: from === to ? from : `${from} – ${to}`,
-		isInvalid: false
-	};
 }
 /**
-* 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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
-	const [open, setOpen] = (0, react.useState)(false);
-	const [draft, setDraft] = (0, react.useState)(null);
-	const [quickCount, setQuickCount] = (0, react.useState)("15");
-	const [quickUnit, setQuickUnit] = (0, react.useState)("m");
-	const editing = draft !== null && draft !== void 0 ? draft : value;
-	const hasChanges = draft !== null && (draft.from !== value.from || draft.to !== value.to);
-	const description = (0, react.useMemo)(() => describeRange(value, labels, {
-		locale,
-		timeZone
-	}), [
-		value,
-		locale,
-		timeZone,
-		customLabels
-	]);
-	const boundState = (0, react.useCallback)((expression) => (0, _reopt_ai_opt_charts.parseTimeExpression)(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
-	const commit = (0, react.useCallback)((range) => {
-		setDraft(null);
-		onChange(range);
-	}, [onChange]);
-	const apply = (0, react.useCallback)(() => {
-		if (draft) commit(draft);
-		else onRefresh === null || onRefresh === void 0 || onRefresh();
-	}, [
-		draft,
-		commit,
-		onRefresh
-	]);
-	const commitOnEnter = (0, react.useCallback)((event) => {
-		if (event.key !== "Enter") return;
-		apply();
-		setOpen(false);
-	}, [apply]);
-	const applyQuick = (0, react.useCallback)(() => {
-		const count = Number(quickCount);
-		if (!Number.isFinite(count) || count <= 0) return;
-		commit({
-			from: `now-${Math.round(count)}${quickUnit}`,
-			to: "now"
-		});
-		setOpen(false);
-	}, [
-		quickCount,
-		quickUnit,
-		commit
-	]);
-	const step = (0, react.useCallback)((direction) => {
-		const next = (0, _reopt_ai_opt_charts.shiftTimeRange)(value, direction, { timeZone });
-		if (next) commit(next);
-	}, [
-		value,
-		timeZone,
-		commit
-	]);
-	const zoom = (0, react.useCallback)((factor) => {
-		const next = (0, _reopt_ai_opt_charts.zoomTimeRange)(value, factor, { timeZone });
-		if (next) commit(next);
-	}, [
-		value,
-		timeZone,
-		commit
-	]);
-	useAutoRefresh({
-		interval: (_refresh$interval = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval !== void 0 ? _refresh$interval : 0,
-		paused: (_refresh$paused = refresh === null || refresh === void 0 ? void 0 : refresh.paused) !== null && _refresh$paused !== void 0 ? _refresh$paused : true,
-		onRefresh
+function EventTimeline({ items, groups, showGaps = true, order = "desc", minGapMs = 1e3, loading = false, hasMore = false, onLoadMore, onItemSelect, locale = require_text_truncate.OPT_UI_DEFAULT_LOCALE, labels: customLabels, className }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "mt-1.5 size-2 rounded-full" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex grow flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-4 w-40" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-3 w-64" })]
+			})]
+		}, index))
+	});
+	if (!hasContent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_text_truncate.cn(TIMELINE_WIDTH, className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
+			title: labels.emptyTitle,
+			description: labels.emptyDescription,
+			tone: "subdued",
+			hasBorder: true
+		})
 	});
-	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("bg-surface inline-flex items-center rounded-lg border", require_text_truncate.OPT_BORDER, className),
-		role: "group",
-		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
-		"data-opt-id": "3WJ8H",
-		"data-opt-slug": "time-range-control.TimeRangeControl",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, {
-				open,
-				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
-					className: require_text_truncate.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
-					disabled,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
-						className: "text-text-tertiary h-4 w-4",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "truncate text-sm",
-						children: description.text
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverContent, {
-					className: "gap-group flex w-80 flex-col",
+		className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)(GroupBlock, {
+			group,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}, group.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineList, {
+			items: flatItems,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}), hasMore && onLoadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-center pt-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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 = require_text_truncate._objectSpread2(require_text_truncate._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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "flex flex-col gap-3 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-9 w-24" }), Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-6 w-full" }, index))]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "flex flex-col gap-4 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-sm"),
+					children: labels.title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-baseline gap-2",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-text-primary text-xs font-medium",
-								children: labels.quickSelect
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-end gap-2",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
-										"aria-label": labels.quickSelect,
-										type: "number",
-										min: 1,
-										size: "sm",
-										className: "w-20",
-										value: quickCount,
-										onChange: (event) => setQuickCount(event.target.value),
-										onKeyDown: (event) => {
-											if (event.key === "Enter") applyQuick();
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
-										value: quickUnit,
-										setValue: (next) => setQuickUnit(selectValue(next)),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
-											minWidth: 110,
-											"aria-label": labels.quickSelect
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
-											value: unit,
-											children: labels.units[unit]
-										}, unit)) })]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-										variant: "secondary",
-										size: "sm",
-										onClick: applyQuick,
-										children: labels.apply
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
-								label: labels.start,
-								size: "sm",
-								value: editing.from,
-								error: boundState(editing.from),
-								hint: labels.startHint,
-								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { from: event.target.value })),
-								onKeyDown: commitOnEnter
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
-								label: labels.end,
-								size: "sm",
-								value: editing.to,
-								error: boundState(editing.to),
-								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { to: event.target.value })),
-								onKeyDown: commitOnEnter
-							})]
-						}),
-						presets && presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
-							title: labels.commonlyUsed,
-							items: presets,
-							onPick: (range) => {
-								commit(range);
-								setOpen(false);
-							}
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn("text-3xl font-bold tabular-nums", toneText[tone]),
+							children: score
 						}),
-						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
-							title: labels.recentlyUsed,
-							items: recentRanges.slice(0, 5),
-							onPick: (range) => {
-								commit(range);
-								setOpen(false);
-							}
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-xs"),
+							children: labels.outOf(max)
 						}),
-						onRefreshChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-text-primary text-xs font-medium",
-								children: labels.autoRefresh
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
-								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
-								setValue: (next) => {
-									const interval = Number(selectValue(next));
-									onRefreshChange({
-										interval,
-										paused: interval === 0
-									});
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
-									minWidth: 140,
-									"aria-label": labels.autoRefresh
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
-									value: String(interval),
-									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
-								}, interval)) })]
-							})]
+						band && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn("ml-1 text-sm font-medium", toneText[tone]),
+							children: band.label
 						})
 					]
-				})]
-			}),
-			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_text_truncate.cn("flex items-center border-l", "border border-border"),
-				role: "group",
-				"aria-label": labels.previous,
+				}),
+				formula && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-tertiary", "text-xs"),
+					children: formula
+				})
+			]
+		}), axes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-sm"),
+			children: labels.empty
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+			className: "flex flex-col gap-3",
+			children: axes.map((axis) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.previous,
-						disabled: disabled || description.isInvalid,
-						onClick: () => step(-1),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.zoomIn,
-						disabled: disabled || description.isInvalid,
-						onClick: () => zoom(-zoomFactor),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "text-sm"),
+							title: axis.hint,
+							children: [axis.label, axis.weight !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_text_truncate.cn("text-text-tertiary", "ml-1.5 text-xs"),
+								children: labels.weight(`${Math.round(axis.weight * 100)}%`)
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-sm font-medium tabular-nums"),
+							children: Math.round(axis.value)
+						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.zoomOut,
-						disabled: disabled || description.isInvalid,
-						onClick: () => zoom(zoomFactor),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Meter, {
+						value: axis.value,
+						max,
+						size: "sm",
+						variant: toneMeter[tone],
+						"aria-label": axis.label
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						label: labels.nextWindow,
-						disabled: disabled || description.isInvalid,
-						onClick: () => step(1),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
+					axis.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: require_text_truncate.cn("text-text-tertiary", "text-xs"),
+						children: axis.hint
 					})
 				]
-			}),
-			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_text_truncate.cn("border-l pl-2 pr-2", "border border-border"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-					variant: hasChanges ? "primary" : "secondary",
-					size: "sm",
-					loading: isLoading,
-					disabled: disabled || description.isInvalid,
-					onClick: apply,
-					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, {
-						className: "h-3.5 w-3.5",
-						"aria-hidden": "true"
-					}),
-					title: refreshLabel,
-					children: hasChanges ? labels.update : labels.refresh
+			}, 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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$5), customLabels);
+	const panelRef = (0, react.useRef)(null);
+	const openerRef = (0, react.useRef)(null);
+	(0, react.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]);
+	(0, react.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]);
+	(0, react.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 = (0, react.useCallback)(() => onClose(), [onClose]);
+	if (!open) return null;
+	const header = (title || actions || !hideCloseButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+		className: require_text_truncate.cn("border-border-subtle flex items-start gap-2 border-b px-4 py-3"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 grow flex-col gap-0.5",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: require_text_truncate.cn("text-text-primary", "truncate text-base font-semibold"),
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-xs"),
+					children: description
+				})]
+			}),
+			actions,
+			!hideCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handleClose,
+				"aria-label": labels.close,
+				className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					className: "size-4",
+					"aria-hidden": "true"
 				})
 			})
 		]
 	});
-}
-TimeRangeControl.displayName = "TimeRangeControl";
-function IconButton({ label, disabled, onClick, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-		variant: "ghost",
-		size: "sm",
-		"aria-label": label,
-		title: label,
-		disabled,
-		onClick,
-		children
+	const panel = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		ref: panelRef,
+		role: "dialog",
+		"aria-modal": false,
+		"aria-label": typeof title === "string" ? title : void 0,
+		tabIndex: -1,
+		className: require_text_truncate.cn(require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 grow overflow-y-auto px-4 py-4",
+				children
+			}),
+			footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+				className: "border-border-subtle border-t px-4 py-3",
+				children: footer
+			})
+		]
 	});
+	if (type === "inline") return panel;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [scrim && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "bg-overlay fixed inset-0 z-30",
+		"aria-hidden": "true"
+	}), panel] });
 }
-function RangeList({ title, items, onPick }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "gap-element flex flex-col",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-text-primary text-xs font-medium",
-			children: title
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "grid grid-cols-2 gap-1",
-			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				className: require_text_truncate.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_text_truncate.OPT_TEXT_SECONDARY),
-				onClick: () => onPick(item.range),
-				children: item.label
-			}) }, `${item.label}-${index}`))
-		})]
-	});
+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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels);
-	const [history, setHistory] = (0, react.useState)([]);
-	const [hidden, setHidden] = (0, react.useState)([]);
-	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
-	const visibleSeries = (0, react.useMemo)(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
-	const handleRangeSelect = (0, react.useCallback)((selection) => {
-		setHistory((current) => [...current, range].slice(-10));
-		onRangeChange((0, _reopt_ai_opt_charts.toAbsoluteRange)(selection));
-	}, [range, onRangeChange]);
-	const goBack = (0, react.useCallback)(() => {
-		setHistory((current) => {
-			const previous = current[current.length - 1];
-			if (previous) onRangeChange(previous);
-			return current.slice(0, -1);
-		});
-	}, [onRangeChange]);
-	const setRange = (0, react.useCallback)((next) => {
-		setHistory([]);
-		onRangeChange(next);
-	}, [onRangeChange]);
-	const toggleSeries = (0, react.useCallback)((dataKey) => {
-		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "flex flex-col", className),
-		"aria-label": ariaLabel,
-		"data-opt-id": "Y0XCY",
-		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "gap-element flex min-w-0 flex-col",
-				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-					className: "text-text-primary truncate text-base font-semibold",
-					children: title
-				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_text_truncate.cn("text-text-secondary", "truncate text-sm"),
-					children: description
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "gap-element flex flex-wrap items-center",
-				children: [
-					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
-						variant: "ghost",
-						size: "sm",
-						onClick: goBack,
-						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, {
-							className: "h-3.5 w-3.5",
-							"aria-hidden": "true"
-						}),
-						children: labels.back
-					}),
-					actions,
-					showRangeControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeRangeControl, {
-						value: range,
-						onChange: setRange,
-						presets,
-						recentRanges,
-						timeZone,
-						locale,
-						refresh,
-						onRefreshChange,
-						onRefresh,
-						isLoading,
-						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4), customLabels);
+	const inputRef = (0, react.useRef)(null);
+	const [text, setText] = (0, react.useState)(() => formatQuery(value));
+	const [focused, setFocused] = (0, react.useState)(false);
+	const [highlighted, setHighlighted] = (0, react.useState)(0);
+	const committedRef = (0, react.useRef)(formatQuery(value));
+	(0, react.useEffect)(() => {
+		const next = formatQuery(value);
+		if (next === committedRef.current) return;
+		committedRef.current = next;
+		if (!focused) setText(next);
+	}, [value, focused]);
+	const parsed = (0, react.useMemo)(() => parseQueryWithDiagnostics(text), [text]);
+	const commit = (0, react.useCallback)((nextText) => {
+		const nextQuery = parseQueryWithDiagnostics(nextText).query;
+		committedRef.current = formatQuery(nextQuery);
+		onChange(nextQuery);
+	}, [onChange]);
+	const suggestions = useSuggestions(text, parsed.trailing, fields);
+	const applySuggestion = (0, react.useCallback)((suggestion) => {
+		var _inputRef$current;
+		const nextText = suggestion.replace(text);
+		setText(nextText);
+		if (suggestion.kind === "value") commit(nextText);
+		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+		setHighlighted(0);
+	}, [text, commit]);
+	const handleKeyDown = (event) => {
+		if (suggestions.length > 0 && focused) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setHighlighted((current) => (current + 1) % suggestions.length);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setHighlighted((current) => (current - 1 + suggestions.length) % suggestions.length);
+				return;
+			}
+			if (event.key === "Tab" || event.key === "Enter" && highlighted > 0) {
+				event.preventDefault();
+				applySuggestion(suggestions[highlighted]);
+				return;
+			}
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commit(text);
+			return;
+		}
+		if (event.key === "Escape") {
+			var _inputRef$current2;
+			setText(committedRef.current);
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+		}
+	};
+	const showSuggestions = focused && suggestions.length > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("relative flex min-w-0 flex-col gap-1.5", className),
+		"data-opt-id": "JSVZ1",
+		"data-opt-slug": "query-bar.QueryBar",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_text_truncate.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_text_truncate.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+						className: "text-text-tertiary size-4 shrink-0",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: inputRef,
+						type: "text",
+						role: "combobox",
+						"aria-expanded": showSuggestions,
+						"aria-controls": "query-bar-suggestions",
+						"aria-autocomplete": "list",
+						"aria-label": labels.ariaLabel,
+						placeholder: labels.placeholder,
+						disabled,
+						className: require_text_truncate.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
+						value: text,
+						onChange: (event) => {
+							setText(event.target.value);
+							setHighlighted(0);
+							if (live) commit(event.target.value);
+						},
+						onFocus: () => setFocused(true),
+						onBlur: () => {
+							window.setTimeout(() => setFocused(false), 120);
+							if (!live) commit(text);
+						},
+						onKeyDown: handleKeyDown
+					}),
+					text.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": labels.clear,
+						title: labels.clear,
+						className: require_text_truncate.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						onClick: () => {
+							setText("");
+							commit("");
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							className: "size-3.5",
+							"aria-hidden": true
+						})
 					})
 				]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "px-2 pb-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_text_truncate._objectSpread2({
-				data,
-				series: visibleSeries,
-				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
-				to: resolved === null || resolved === void 0 ? void 0 : resolved.to,
-				granularity,
-				timeZone,
-				locale,
-				height,
-				selectable: true,
-				onRangeSelect: handleRangeSelect,
-				annotations,
-				showLegend: series.length > 1,
-				legendOptions: toggleableLegend ? {
-					onClick: toggleSeries,
-					inactiveKeys: hidden
-				} : void 0,
-				"aria-label": typeof title === "string" ? `${title} time series` : ariaLabel
-			}, chartProps))
-		})]
+			}),
+			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: "query-bar-suggestions",
+				role: "listbox",
+				className: require_text_truncate.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
+				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": index === highlighted,
+					className: require_text_truncate.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
+					onMouseEnter: () => setHighlighted(index),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => applySuggestion(suggestion),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-primary truncate font-mono",
+						children: suggestion.label
+					}), suggestion.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-tertiary shrink-0 text-xs",
+						children: suggestion.hint
+					})]
+				}) }, `${suggestion.kind}-${suggestion.label}`))
+			}),
+			showClauses && value.clauses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: value.clauses.map((clause, index) => {
+					const label = describeClause(clause);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: require_text_truncate.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": labels.removeClause(label),
+							className: "hover:text-text-primary cursor-pointer",
+							onClick: () => {
+								const next = removeClause(value, index);
+								setText(formatQuery(next));
+								committedRef.current = formatQuery(next);
+								onChange(next);
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+								className: "size-3",
+								"aria-hidden": true
+							})
+						})]
+					}, `${label}-${index}`);
+				})
+			}),
+			parsed.diagnostics.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
+			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-text-tertiary text-xs",
+				children: labels.syntaxHint
+			})
+		]
 	});
 }
-TimeSeriesPanel.displayName = "TimeSeriesPanel";
-//#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__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
+		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+				className: "font-mono",
+				children: diagnostic.text
+			}),
+			" —",
+			" ",
+			diagnostic.message
+		] }, `${diagnostic.at}-${index}`))
+	});
 }
-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 (0, react.useMemo)(() => {
+		const lastSpace = text.lastIndexOf(" ");
+		const head = lastSpace === -1 ? "" : text.slice(0, lastSpace + 1);
+		const token = text.slice(lastSpace + 1);
+		if (trailing) {
+			var _field$values;
+			const field = fields.find((candidate) => candidate.name === trailing.field);
+			const values = (_field$values = field === null || field === void 0 ? void 0 : field.values) !== null && _field$values !== void 0 ? _field$values : [];
+			const typed = trailing.value.toLowerCase();
+			return values.filter((value) => value.toLowerCase().includes(typed)).slice(0, MAX_SUGGESTIONS).map((value) => ({
+				kind: "value",
+				label: `${trailing.field}:${value}`,
+				replace: () => `${head}${trailing.field}:${/[\s"()]/.test(value) ? `"${value}"` : value} `
+			}));
+		}
+		const bare = token.replace(/^-/, "").toLowerCase();
+		if (bare.length === 0) return [];
+		return fields.filter((field) => field.name.toLowerCase().includes(bare)).slice(0, MAX_SUGGESTIONS).map((field) => ({
+			kind: "field",
+			label: `${field.name}:`,
+			hint: field.hint,
+			replace: () => `${head}${token.startsWith("-") ? "-" : ""}${field.name}:`
+		}));
+	}, [
+		text,
+		trailing,
+		fields
+	]);
 }
+//#endregion
+//#region src/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 = (0, react.useRef)(onRefresh);
+	callbackRef.current = onRefresh;
+	(0, react.useEffect)(() => {
+		if (paused || interval <= 0 || !callbackRef.current) return;
+		let cancelled = false;
+		let timer;
+		const schedule = () => {
+			timer = setTimeout(async () => {
+				if (cancelled) return;
+				try {
+					var _callbackRef$current;
+					await ((_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef));
+				} catch (_unused) {
+					return;
+				}
+				if (!cancelled) schedule();
+			}, interval);
+		};
+		schedule();
+		return () => {
+			cancelled = true;
+			if (timer) clearTimeout(timer);
+		};
+	}, [interval, paused]);
+}
+//#endregion
+//#region src/shells/time-range-control.tsx
+const defaultLabels$3 = {
+	trigger: "Select time range",
+	invalid: "Invalid time range",
+	last: (duration) => `Last ${duration}`,
+	next: (duration) => `Next ${duration}`,
+	quickSelect: "Quick select",
+	apply: "Apply",
+	update: "Update",
+	refresh: "Refresh",
+	commonlyUsed: "Commonly used",
+	recentlyUsed: "Recently used",
+	start: "Start",
+	end: "End",
+	startHint: "Absolute time or date math, e.g. now-7d",
+	autoRefresh: "Auto refresh",
+	autoRefreshOff: "Off",
+	every: (duration) => `Every ${duration}`,
+	previous: "Previous window",
+	nextWindow: "Next window",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	thisUnit: (unit) => `This ${unit}`,
+	units: {
+		s: "seconds",
+		m: "minutes",
+		h: "hours",
+		d: "days",
+		w: "weeks",
+		M: "months",
+		y: "years"
+	}
+};
+const QUICK_UNITS = [
+	"m",
+	"h",
+	"d",
+	"w",
+	"M",
+	"y"
+];
+const REFRESH_INTERVALS = [
+	0,
+	5e3,
+	1e4,
+	3e4,
+	6e4,
+	3e5
+];
+function selectValue(value) {
+	var _value$;
+	return Array.isArray(value) ? (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : "" : value;
+}
+/**
+* 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 = (0, _reopt_ai_opt_charts.measureTimeWindow)(range, {
+		timeZone: options.timeZone,
+		now: options.now
+	});
+	if (window.isInvalid) return {
+		text: labels.invalid,
+		isInvalid: true
+	};
+	const fromParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.from);
+	const toParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.to);
+	if ((fromParts === null || fromParts === void 0 ? void 0 : fromParts.roundUnit) && fromParts.count === 0 && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === fromParts.roundUnit && toParts.count === 0) return {
+		text: labels.thisUnit((0, _reopt_ai_opt_charts.formatCountUnit)(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
+		isInvalid: false
+	};
+	if ((0, _reopt_ai_opt_charts.isRelativeToNow)(range)) {
+		var _toParts$count;
+		const anchoredAtEnd = ((_toParts$count = toParts === null || toParts === void 0 ? void 0 : toParts.count) !== null && _toParts$count !== void 0 ? _toParts$count : 0) === 0;
+		const parts = anchoredAtEnd ? fromParts : toParts;
+		const bothSnapped = (parts === null || parts === void 0 ? void 0 : parts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit) && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit);
+		const counted = parts && parts.count > 0 ? (0, _reopt_ai_opt_charts.formatCountUnit)(parts.roundUnit && bothSnapped ? parts.count + 1 : parts.count, parts.unit, options.locale) : null;
+		const exact = counted !== null && (!(parts === null || parts === void 0 ? void 0 : parts.roundUnit) || bothSnapped);
+		const duration = exact ? counted : (0, _reopt_ai_opt_charts.formatDuration)(window.duration, options.locale);
+		const prefix = exact || (0, _reopt_ai_opt_charts.isExactMinutes)(window.duration) ? "" : "~";
+		return {
+			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
+			isInvalid: false
+		};
+	}
+	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
+	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
+	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
+	return {
+		text: from === to ? from : `${from} – ${to}`,
+		isInvalid: false
+	};
+}
+/**
+* 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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
-	const rowHeight = ROW_HEIGHT[density];
-	const scrollRef = (0, react.useRef)(null);
-	const [scrollTop, setScrollTop] = (0, react.useState)(0);
-	const [viewportHeight, setViewportHeight] = (0, react.useState)(0);
-	const followingRef = (0, react.useRef)(true);
-	const previousTopIdRef = (0, react.useRef)(null);
-	const previousLengthRef = (0, react.useRef)(0);
-	(0, react.useImperativeHandle)(ref, () => ({
-		scrollToTop: () => {
-			const container = scrollRef.current;
-			if (!container) return;
-			container.scrollTop = 0;
-			setScrollTop(0);
-			if (!followingRef.current) {
-				followingRef.current = true;
-				onFollowChange === null || onFollowChange === void 0 || onFollowChange(true);
-			}
-		},
-		revealRow: (id) => {
-			const index = rows.findIndex((row) => getRowId(row) === id);
-			const container = scrollRef.current;
-			if (index === -1 || !container) return;
-			const top = index * rowHeight;
-			const bottom = top + rowHeight;
-			if (top < container.scrollTop) container.scrollTop = top;
-			else if (bottom > container.scrollTop + container.clientHeight) container.scrollTop = bottom - container.clientHeight;
-		}
+function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton = true, showWindowButtons = true, zoomFactor = .5, refresh, onRefreshChange, onRefresh, isLoading = false, disabled = false, className, labels: customLabels, "aria-label": ariaLabel }) {
+	var _refresh$interval, _refresh$paused, _refresh$interval2;
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels), {}, { units: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const [open, setOpen] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(null);
+	const [quickCount, setQuickCount] = (0, react.useState)("15");
+	const [quickUnit, setQuickUnit] = (0, react.useState)("m");
+	const editing = draft !== null && draft !== void 0 ? draft : value;
+	const hasChanges = draft !== null && (draft.from !== value.from || draft.to !== value.to);
+	const description = (0, react.useMemo)(() => describeRange(value, labels, {
+		locale,
+		timeZone
 	}), [
-		onFollowChange,
-		rows,
-		getRowId,
-		rowHeight
+		value,
+		locale,
+		timeZone,
+		customLabels
 	]);
-	(0, react.useEffect)(() => {
-		const container = scrollRef.current;
-		if (!container) return;
-		const observer = new ResizeObserver(() => setViewportHeight(container.clientHeight));
-		observer.observe(container);
-		setViewportHeight(container.clientHeight);
-		return () => observer.disconnect();
-	}, []);
-	/**
-	* Report whether the list is pinned to the newest row.
-	*
-	* Called from more than the scroll handler on purpose: the list can arrive at
-	* the top without a scroll event — a reset, a jump to newest, a shorter
-	* result set — and a stale "not following" would silently divert every live
-	* row into a held-back pile.
-	*/
-	const syncFollowing = (0, react.useCallback)((container) => {
-		const following = container.scrollTop <= rowHeight;
-		if (following === followingRef.current) return;
-		followingRef.current = following;
-		onFollowChange === null || onFollowChange === void 0 || onFollowChange(following);
-	}, [onFollowChange, rowHeight]);
-	/**
-	* Hold the reader's place when rows arrive above them.
-	*
-	* Runs before paint: by the time the browser draws, the scroll offset has
-	* already absorbed the inserted height, so the content under the cursor never
-	* moves. Skipped while following, where the whole point is to stay at the top.
-	*/
-	(0, react.useLayoutEffect)(() => {
-		const container = scrollRef.current;
-		const previousTopId = previousTopIdRef.current;
-		previousTopIdRef.current = rows.length ? getRowId(rows[0]) : null;
-		const previousLength = previousLengthRef.current;
-		previousLengthRef.current = rows.length;
-		if (!container) return;
-		syncFollowing(container);
-		if (!prepending || followingRef.current || !previousTopId) return;
-		if (rows.length <= previousLength) return;
-		const prepended = rows.findIndex((row) => getRowId(row) === previousTopId);
-		if (prepended <= 0) return;
-		container.scrollTop += prepended * rowHeight;
-		setScrollTop(container.scrollTop);
+	const boundState = (0, react.useCallback)((expression) => (0, _reopt_ai_opt_charts.parseTimeExpression)(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
+	const commit = (0, react.useCallback)((range) => {
+		setDraft(null);
+		onChange(range);
+	}, [onChange]);
+	const apply = (0, react.useCallback)(() => {
+		if (draft) commit(draft);
+		else onRefresh === null || onRefresh === void 0 || onRefresh();
 	}, [
-		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.
-	*/
-	(0, react.useEffect)(() => {
-		const container = scrollRef.current;
-		if (!container || !hasMore || loadingMore || !onLoadMore) return;
-		if (container.scrollHeight <= container.clientHeight) onLoadMore();
+	const commitOnEnter = (0, react.useCallback)((event) => {
+		if (event.key !== "Enter") return;
+		apply();
+		setOpen(false);
+	}, [apply]);
+	const applyQuick = (0, react.useCallback)(() => {
+		const count = Number(quickCount);
+		if (!Number.isFinite(count) || count <= 0) return;
+		commit({
+			from: `now-${Math.round(count)}${quickUnit}`,
+			to: "now"
+		});
+		setOpen(false);
 	}, [
-		hasMore,
-		loadingMore,
-		onLoadMore,
-		rows.length,
-		viewportHeight
+		quickCount,
+		quickUnit,
+		commit
 	]);
-	const handleScroll = (0, react.useCallback)((event) => {
-		const container = event.currentTarget;
-		setScrollTop(container.scrollTop);
-		syncFollowing(container);
-		const remaining = container.scrollHeight - container.scrollTop - container.clientHeight;
-		if (hasMore && !loadingMore && remaining < container.clientHeight) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+	const step = (0, react.useCallback)((direction) => {
+		const next = (0, _reopt_ai_opt_charts.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 = (0, react.useMemo)(() => rows.slice(firstVisible, lastVisible), [
-		rows,
-		firstVisible,
-		lastVisible
+	const zoom = (0, react.useCallback)((factor) => {
+		const next = (0, _reopt_ai_opt_charts.zoomTimeRange)(value, factor, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("@container/log flex min-h-0 flex-col", className),
-		"data-opt-id": "3ZR82",
-		"data-opt-slug": "log-table.LogTable",
-		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
-			columns,
-			sort,
-			onSortChange,
-			onColumnMove,
-			density,
-			labels
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: scrollRef,
-			onScroll: handleScroll,
-			className: "relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
-			role: "listbox",
-			"aria-label": labels.listLabel,
-			"aria-activedescendant": selectedId ? `log-row-${selectedId}` : void 0,
-			tabIndex: 0,
-			children: [
-				rows.length === 0 ? emptyState : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: { height: totalHeight },
-					className: "relative",
-					children: visibleRows.map((row, index) => {
-						var _isNew;
-						const id = getRowId(row);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableRow, {
-							id,
-							row,
-							columns,
-							top: (firstVisible + index) * rowHeight,
-							height: rowHeight,
-							density,
-							selected: id === selectedId,
-							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
-							onSelect,
-							onCellAction,
-							highlightTerms,
-							labels
-						}, id);
-					})
-				}),
-				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
-						size: "sm",
-						"aria-hidden": true
-					}), labels.loadingMore]
-				}),
-				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_text_truncate.cn("text-text-tertiary", "py-3 text-center text-xs"),
-					children: labels.endOfResults
-				})
-			]
-		})]
+	useAutoRefresh({
+		interval: (_refresh$interval = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval !== void 0 ? _refresh$interval : 0,
+		paused: (_refresh$paused = refresh === null || refresh === void 0 ? void 0 : refresh.paused) !== null && _refresh$paused !== void 0 ? _refresh$paused : true,
+		onRefresh
 	});
-}
-/**
-* LogTable — see {@link LogTableInner}.
-*
-* The cast preserves the row generic through `forwardRef`, which otherwise
-* widens it to its constraint and takes the column callbacks' types with it.
-*/
-const LogTable = (0, react.forwardRef)(LogTableInner);
-function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "row",
-		className: require_text_truncate.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
-		style: { height: ROW_HEIGHT[density] },
-		children: columns.map((column, index) => {
-			var _column$priority;
-			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
-			const sortable = column.sortable && onSortChange;
-			const columnLabel = typeof column.header === "string" ? column.header : column.id;
-			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					"aria-hidden": true,
-					className: "size-1.5 shrink-0"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate",
-					children: column.header
-				}),
-				active && (sort.direction === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {
-					className: "size-3 shrink-0",
-					"aria-hidden": true
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
-					className: "size-3 shrink-0",
-					"aria-hidden": true
-				}))
-			] });
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				role: "columnheader",
-				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
-				className: require_text_truncate.cn("group/header flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
-				style: columnStyle(column),
-				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
-					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
-					onClick: () => onSortChange({
-						columnId: column.id,
-						direction: active && sort.direction === "desc" ? "asc" : "desc"
-					}),
-					children: content
-				}) : content, onColumnMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: require_text_truncate.cn("ml-auto flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/header:opacity-100 focus-within:opacity-100"),
-					children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "hover:text-text-primary cursor-pointer",
-						"aria-label": labels.moveLeft(columnLabel),
-						title: labels.moveLeft(columnLabel),
-						onClick: () => onColumnMove(column.id, "left"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
-							className: "size-3",
-							"aria-hidden": true
-						})
-					}), index < columns.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "hover:text-text-primary cursor-pointer",
-						"aria-label": labels.moveRight(columnLabel),
-						title: labels.moveRight(columnLabel),
-						onClick: () => onColumnMove(column.id, "right"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-							className: "size-3",
-							"aria-hidden": true
-						})
+	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("bg-surface inline-flex items-center rounded-lg border", require_text_truncate.OPT_BORDER, className),
+		role: "group",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
+		"data-opt-id": "3WJ8H",
+		"data-opt-slug": "time-range-control.TimeRangeControl",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
+					className: require_text_truncate.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+					disabled,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
+						className: "text-text-tertiary h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate text-sm",
+						children: description.text
 					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverContent, {
+					className: "gap-group flex w-80 flex-col",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.quickSelect
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
+										"aria-label": labels.quickSelect,
+										type: "number",
+										min: 1,
+										size: "sm",
+										className: "w-20",
+										value: quickCount,
+										onChange: (event) => setQuickCount(event.target.value),
+										onKeyDown: (event) => {
+											if (event.key === "Enter") applyQuick();
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
+										value: quickUnit,
+										setValue: (next) => setQuickUnit(selectValue(next)),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
+											minWidth: 110,
+											"aria-label": labels.quickSelect
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
+											value: unit,
+											children: labels.units[unit]
+										}, unit)) })]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: applyQuick,
+										children: labels.apply
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
+								label: labels.start,
+								size: "sm",
+								value: editing.from,
+								error: boundState(editing.from),
+								hint: labels.startHint,
+								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { from: event.target.value })),
+								onKeyDown: commitOnEnter
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
+								label: labels.end,
+								size: "sm",
+								value: editing.to,
+								error: boundState(editing.to),
+								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { to: event.target.value })),
+								onKeyDown: commitOnEnter
+							})]
+						}),
+						presets && presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.commonlyUsed,
+							items: presets,
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.recentlyUsed,
+							items: recentRanges.slice(0, 5),
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						onRefreshChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.autoRefresh
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
+								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
+								setValue: (next) => {
+									const interval = Number(selectValue(next));
+									onRefreshChange({
+										interval,
+										paused: interval === 0
+									});
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
+									minWidth: 140,
+									"aria-label": labels.autoRefresh
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
+									value: String(interval),
+									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
+								}, interval)) })]
+							})]
+						})
+					]
 				})]
-			}, column.id);
-		})
-	});
-}
-function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, highlightTerms, labels }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "option",
-		"aria-selected": selected,
-		tabIndex: -1,
-		id: `log-row-${id}`,
-		"data-log-row-id": id,
-		onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(id),
-		onKeyDown: (event) => {
-			if (event.key !== "Enter" && event.key !== " ") return;
-			event.preventDefault();
-			onSelect === null || onSelect === void 0 || onSelect(id);
-		},
-		style: {
-			top,
-			height
-		},
-		className: require_text_truncate.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
-		children: columns.map((column) => {
-			var _column$priority2;
-			const raw = column.value(row);
-			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_text_truncate.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
-				style: columnStyle(column),
+			}),
+			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_text_truncate.cn("flex items-center border-l", "border border-border"),
+				role: "group",
+				"aria-label": labels.previous,
 				children: [
-					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"aria-hidden": true,
-						className: "size-1.5 shrink-0 rounded-full",
-						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.previous,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_text_truncate.cn("min-w-0 flex-1", !column.truncate && "truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
-						title: column.truncate ? void 0 : text || void 0,
-						children: column.render ? column.render(row) : text ? column.truncate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TextTruncate, {
-							text,
-							truncation: column.truncate,
-							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
-								text: shown,
-								search: highlightTerms
-							}) : shown
-						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
-							text,
-							search: highlightTerms
-						}) : text : EM_DASH
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomIn,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(-zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					}),
-					onCellAction && column.field && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellActions, {
-						field: column.field,
-						value: text,
-						onAction: onCellAction,
-						labels
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomOut,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.nextWindow,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
 					})
 				]
-			}, column.id);
-		})
+			}),
+			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_text_truncate.cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+					variant: hasChanges ? "primary" : "secondary",
+					size: "sm",
+					loading: isLoading,
+					disabled: disabled || description.isInvalid,
+					onClick: apply,
+					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					title: refreshLabel,
+					children: hasChanges ? labels.update : labels.refresh
+				})
+			})
+		]
 	});
 }
-/**
-* Memoized because a live log re-renders several times a second while almost
-* every visible row is unchanged.
-*/
-const LogTableRow = (0, react.memo)(LogTableRowImpl);
-/**
-* The two questions a reader has about a value they just spotted: show me only
-* these, and get these out of my way.
-*
-* Revealed on hover rather than always drawn — a log is scanned, and a pair of
-* buttons on every cell of every row is a wall of chrome. They stay in the tab
-* order regardless, since hover is not an interaction everyone has.
-*/
-function CellActions({ field, value, onAction, labels }) {
-	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_text_truncate.cn("bg-surface/90 ml-auto flex shrink-0 items-center gap-0.5 rounded pl-1", "opacity-0 transition-opacity", "group-hover/cell:opacity-100 focus-within:opacity-100"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: button,
-			title: labels.filterFor(value),
-			"aria-label": labels.filterFor(value),
-			onClick: (event) => {
-				event.stopPropagation();
-				onAction({
-					field,
-					value,
-					intent: "include"
-				});
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
-				className: "size-3",
-				"aria-hidden": true
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: button,
-			title: labels.filterOut(value),
-			"aria-label": labels.filterOut(value),
-			onClick: (event) => {
-				event.stopPropagation();
-				onAction({
-					field,
-					value,
-					intent: "exclude"
-				});
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
-				className: "size-3",
-				"aria-hidden": true
-			})
-		})]
+TimeRangeControl.displayName = "TimeRangeControl";
+function IconButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
 	});
 }
-//#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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-element flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-text-primary text-xs font-medium",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "grid grid-cols-2 gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_text_truncate.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_text_truncate.OPT_TEXT_SECONDARY),
+				onClick: () => onPick(item.range),
+				children: item.label
+			}) }, `${item.label}-${index}`))
+		})]
+	});
 }
-//#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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$1), customLabels);
-	const inputRef = (0, react.useRef)(null);
-	const [text, setText] = (0, react.useState)(() => formatQuery(value));
-	const [focused, setFocused] = (0, react.useState)(false);
-	const [highlighted, setHighlighted] = (0, react.useState)(0);
-	const committedRef = (0, react.useRef)(formatQuery(value));
-	(0, react.useEffect)(() => {
-		const next = formatQuery(value);
-		if (next === committedRef.current) return;
-		committedRef.current = next;
-		if (!focused) setText(next);
-	}, [value, focused]);
-	const parsed = (0, react.useMemo)(() => parseQueryWithDiagnostics(text), [text]);
-	const commit = (0, react.useCallback)((nextText) => {
-		const nextQuery = parseQueryWithDiagnostics(nextText).query;
-		committedRef.current = formatQuery(nextQuery);
-		onChange(nextQuery);
-	}, [onChange]);
-	const suggestions = useSuggestions(text, parsed.trailing, fields);
-	const applySuggestion = (0, react.useCallback)((suggestion) => {
-		var _inputRef$current;
-		const nextText = suggestion.replace(text);
-		setText(nextText);
-		if (suggestion.kind === "value") commit(nextText);
-		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-		setHighlighted(0);
-	}, [text, commit]);
-	const handleKeyDown = (event) => {
-		if (suggestions.length > 0 && focused) {
-			if (event.key === "ArrowDown") {
-				event.preventDefault();
-				setHighlighted((current) => (current + 1) % suggestions.length);
-				return;
-			}
-			if (event.key === "ArrowUp") {
-				event.preventDefault();
-				setHighlighted((current) => (current - 1 + suggestions.length) % suggestions.length);
-				return;
-			}
-			if (event.key === "Tab" || event.key === "Enter" && highlighted > 0) {
-				event.preventDefault();
-				applySuggestion(suggestions[highlighted]);
-				return;
-			}
-		}
-		if (event.key === "Enter") {
-			event.preventDefault();
-			commit(text);
-			return;
-		}
-		if (event.key === "Escape") {
-			var _inputRef$current2;
-			setText(committedRef.current);
-			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
-		}
-	};
-	const showSuggestions = focused && suggestions.length > 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("relative flex min-w-0 flex-col gap-1.5", className),
-		"data-opt-id": "JSVZ1",
-		"data-opt-slug": "query-bar.QueryBar",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_text_truncate.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_text_truncate.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
-						className: "text-text-tertiary size-4 shrink-0",
-						"aria-hidden": true
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						ref: inputRef,
-						type: "text",
-						role: "combobox",
-						"aria-expanded": showSuggestions,
-						"aria-controls": "query-bar-suggestions",
-						"aria-autocomplete": "list",
-						"aria-label": labels.ariaLabel,
-						placeholder: labels.placeholder,
-						disabled,
-						className: require_text_truncate.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
-						value: text,
-						onChange: (event) => {
-							setText(event.target.value);
-							setHighlighted(0);
-							if (live) commit(event.target.value);
-						},
-						onFocus: () => setFocused(true),
-						onBlur: () => {
-							window.setTimeout(() => setFocused(false), 120);
-							if (!live) commit(text);
-						},
-						onKeyDown: handleKeyDown
+function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity = "auto", timeZone, locale, showRangeControl = true, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend = false, annotations, isLoading = false, height = 280, className, chartProps, labels: customLabels, "aria-label": ariaLabel }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
+	const titleId = (0, react.useId)();
+	const [history, setHistory] = (0, react.useState)([]);
+	const [hidden, setHidden] = (0, react.useState)([]);
+	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
+	const visibleSeries = (0, react.useMemo)(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
+	const handleRangeSelect = (0, react.useCallback)((selection) => {
+		setHistory((current) => [...current, range].slice(-10));
+		onRangeChange((0, _reopt_ai_opt_charts.toAbsoluteRange)(selection));
+	}, [range, onRangeChange]);
+	const goBack = (0, react.useCallback)(() => {
+		setHistory((current) => {
+			const previous = current[current.length - 1];
+			if (previous) onRangeChange(previous);
+			return current.slice(0, -1);
+		});
+	}, [onRangeChange]);
+	const setRange = (0, react.useCallback)((next) => {
+		setHistory([]);
+		onRangeChange(next);
+	}, [onRangeChange]);
+	const toggleSeries = (0, react.useCallback)((dataKey) => {
+		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "flex flex-col", className),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel == null && title != null ? titleId : void 0,
+		"data-opt-id": "9EHHC",
+		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex min-w-0 flex-col",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					id: titleId,
+					className: "text-text-primary truncate text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-sm"),
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex flex-wrap items-center",
+				children: [
+					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: goBack,
+						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						children: labels.back
+					}),
+					actions,
+					showRangeControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeRangeControl, {
+						value: range,
+						onChange: setRange,
+						presets,
+						recentRanges,
+						timeZone,
+						locale,
+						refresh,
+						onRefreshChange,
+						onRefresh,
+						isLoading,
+						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+					})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-2 pb-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_text_truncate._objectSpread2({
+				data,
+				series: visibleSeries,
+				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
+				to: resolved === null || resolved === void 0 ? void 0 : resolved.to,
+				granularity,
+				timeZone,
+				locale,
+				height,
+				selectable: true,
+				onRangeSelect: handleRangeSelect,
+				annotations,
+				showLegend: series.length > 1,
+				legendOptions: toggleableLegend ? {
+					onClick: toggleSeries,
+					inactiveKeys: hidden
+				} : void 0,
+				"aria-label": typeof title === "string" ? `${title} time series` : ariaLabel
+			}, chartProps))
+		})]
+	});
+}
+TimeSeriesPanel.displayName = "TimeSeriesPanel";
+//#endregion
+//#region src/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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$1), customLabels);
+	const rowHeight = ROW_HEIGHT[density];
+	const scrollRef = (0, react.useRef)(null);
+	const [scrollTop, setScrollTop] = (0, react.useState)(0);
+	const [viewportHeight, setViewportHeight] = (0, react.useState)(0);
+	const followingRef = (0, react.useRef)(true);
+	const previousTopIdRef = (0, react.useRef)(null);
+	const previousLengthRef = (0, react.useRef)(0);
+	(0, react.useImperativeHandle)(ref, () => ({
+		scrollToTop: () => {
+			const container = scrollRef.current;
+			if (!container) return;
+			container.scrollTop = 0;
+			setScrollTop(0);
+			if (!followingRef.current) {
+				followingRef.current = true;
+				onFollowChange === null || onFollowChange === void 0 || onFollowChange(true);
+			}
+		},
+		revealRow: (id) => {
+			const index = rows.findIndex((row) => getRowId(row) === id);
+			const container = scrollRef.current;
+			if (index === -1 || !container) return;
+			const top = index * rowHeight;
+			const bottom = top + rowHeight;
+			if (top < container.scrollTop) container.scrollTop = top;
+			else if (bottom > container.scrollTop + container.clientHeight) container.scrollTop = bottom - container.clientHeight;
+		}
+	}), [
+		onFollowChange,
+		rows,
+		getRowId,
+		rowHeight
+	]);
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => setViewportHeight(container.clientHeight));
+		observer.observe(container);
+		setViewportHeight(container.clientHeight);
+		return () => observer.disconnect();
+	}, []);
+	/**
+	* Report whether the list is pinned to the newest row.
+	*
+	* Called from more than the scroll handler on purpose: the list can arrive at
+	* the top without a scroll event — a reset, a jump to newest, a shorter
+	* result set — and a stale "not following" would silently divert every live
+	* row into a held-back pile.
+	*/
+	const syncFollowing = (0, react.useCallback)((container) => {
+		const following = container.scrollTop <= rowHeight;
+		if (following === followingRef.current) return;
+		followingRef.current = following;
+		onFollowChange === null || onFollowChange === void 0 || onFollowChange(following);
+	}, [onFollowChange, rowHeight]);
+	/**
+	* Hold the reader's place when rows arrive above them.
+	*
+	* Runs before paint: by the time the browser draws, the scroll offset has
+	* already absorbed the inserted height, so the content under the cursor never
+	* moves. Skipped while following, where the whole point is to stay at the top.
+	*/
+	(0, react.useLayoutEffect)(() => {
+		const container = scrollRef.current;
+		const previousTopId = previousTopIdRef.current;
+		previousTopIdRef.current = rows.length ? getRowId(rows[0]) : null;
+		const previousLength = previousLengthRef.current;
+		previousLengthRef.current = rows.length;
+		if (!container) return;
+		syncFollowing(container);
+		if (!prepending || followingRef.current || !previousTopId) return;
+		if (rows.length <= previousLength) return;
+		const prepended = rows.findIndex((row) => getRowId(row) === previousTopId);
+		if (prepended <= 0) return;
+		container.scrollTop += prepended * rowHeight;
+		setScrollTop(container.scrollTop);
+	}, [
+		rows,
+		getRowId,
+		prepending,
+		rowHeight,
+		syncFollowing
+	]);
+	/**
+	* Page forward when the rows do not reach the bottom of the viewport.
+	*
+	* Without this the list only advances on a scroll event, so a tall screen —
+	* or a filter matching few rows per page — stops at the first page with no
+	* way to ask for more.
+	*/
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container || !hasMore || loadingMore || !onLoadMore) return;
+		if (container.scrollHeight <= container.clientHeight) onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		rows.length,
+		viewportHeight
+	]);
+	const handleScroll = (0, react.useCallback)((event) => {
+		const container = event.currentTarget;
+		setScrollTop(container.scrollTop);
+		syncFollowing(container);
+		const remaining = container.scrollHeight - container.scrollTop - container.clientHeight;
+		if (hasMore && !loadingMore && remaining < container.clientHeight) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		syncFollowing
+	]);
+	const totalHeight = rows.length * rowHeight;
+	const firstVisible = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+	const visibleCount = Math.ceil((viewportHeight || 480) / rowHeight) + 20;
+	const lastVisible = Math.min(rows.length, firstVisible + visibleCount);
+	const visibleRows = (0, react.useMemo)(() => rows.slice(firstVisible, lastVisible), [
+		rows,
+		firstVisible,
+		lastVisible
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("@container/log flex min-h-0 flex-col", className),
+		"data-opt-id": "3ZR82",
+		"data-opt-slug": "log-table.LogTable",
+		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
+			columns,
+			sort,
+			onSortChange,
+			onColumnMove,
+			density,
+			labels
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollRef,
+			onScroll: handleScroll,
+			className: "relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+			role: "listbox",
+			"aria-label": labels.listLabel,
+			"aria-activedescendant": selectedId ? `log-row-${selectedId}` : void 0,
+			tabIndex: 0,
+			children: [
+				rows.length === 0 ? emptyState : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { height: totalHeight },
+					className: "relative",
+					children: visibleRows.map((row, index) => {
+						var _isNew;
+						const id = getRowId(row);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableRow, {
+							id,
+							row,
+							columns,
+							top: (firstVisible + index) * rowHeight,
+							height: rowHeight,
+							density,
+							selected: id === selectedId,
+							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
+							onSelect,
+							onCellAction,
+							highlightTerms,
+							labels
+						}, id);
+					})
+				}),
+				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
+						size: "sm",
+						"aria-hidden": true
+					}), labels.loadingMore]
+				}),
+				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-tertiary", "py-3 text-center text-xs"),
+					children: labels.endOfResults
+				})
+			]
+		})]
+	});
+}
+/**
+* LogTable — see {@link LogTableInner}.
+*
+* The cast preserves the row generic through `forwardRef`, which otherwise
+* widens it to its constraint and takes the column callbacks' types with it.
+*/
+const LogTable = (0, react.forwardRef)(LogTableInner);
+function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "row",
+		className: require_text_truncate.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
+		style: { height: ROW_HEIGHT[density] },
+		children: columns.map((column, index) => {
+			var _column$priority;
+			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
+			const sortable = column.sortable && onSortChange;
+			const columnLabel = typeof column.header === "string" ? column.header : column.id;
+			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "size-1.5 shrink-0"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: column.header
+				}),
+				active && (sort.direction === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}))
+			] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "columnheader",
+				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				className: require_text_truncate.cn("group/header flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
+				style: columnStyle(column),
+				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
+					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
+					onClick: () => onSortChange({
+						columnId: column.id,
+						direction: active && sort.direction === "desc" ? "asc" : "desc"
 					}),
-					text.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					children: content
+				}) : content, onColumnMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: require_text_truncate.cn("ml-auto flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/header:opacity-100 focus-within:opacity-100"),
+					children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": labels.clear,
-						title: labels.clear,
-						className: require_text_truncate.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
-						onClick: () => {
-							setText("");
-							commit("");
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-							className: "size-3.5",
+						className: "hover:text-text-primary cursor-pointer",
+						"aria-label": labels.moveLeft(columnLabel),
+						title: labels.moveLeft(columnLabel),
+						onClick: () => onColumnMove(column.id, "left"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "size-3",
+							"aria-hidden": true
+						})
+					}), index < columns.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "hover:text-text-primary cursor-pointer",
+						"aria-label": labels.moveRight(columnLabel),
+						title: labels.moveRight(columnLabel),
+						onClick: () => onColumnMove(column.id, "right"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "size-3",
 							"aria-hidden": true
 						})
-					})
-				]
-			}),
-			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				id: "query-bar-suggestions",
-				role: "listbox",
-				className: require_text_truncate.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
-				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					role: "option",
-					"aria-selected": index === highlighted,
-					className: require_text_truncate.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
-					onMouseEnter: () => setHighlighted(index),
-					onMouseDown: (event) => event.preventDefault(),
-					onClick: () => applySuggestion(suggestion),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-text-primary truncate font-mono",
-						children: suggestion.label
-					}), suggestion.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-text-tertiary shrink-0 text-xs",
-						children: suggestion.hint
 					})]
-				}) }, `${suggestion.kind}-${suggestion.label}`))
-			}),
-			showClauses && value.clauses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: value.clauses.map((clause, index) => {
-					const label = describeClause(clause);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-						className: require_text_truncate.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate",
-							children: label
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							"aria-label": labels.removeClause(label),
-							className: "hover:text-text-primary cursor-pointer",
-							onClick: () => {
-								const next = removeClause(value, index);
-								setText(formatQuery(next));
-								committedRef.current = formatQuery(next);
-								onChange(next);
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-								className: "size-3",
-								"aria-hidden": true
-							})
-						})]
-					}, `${label}-${index}`);
-				})
-			}),
-			parsed.diagnostics.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
-			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-text-tertiary text-xs",
-				children: labels.syntaxHint
-			})
-		]
+				})]
+			}, column.id);
+		})
 	});
 }
-QueryBar.displayName = "QueryBar";
-function QueryDiagnostics({ diagnostics }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
-		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-				className: "font-mono",
-				children: diagnostic.text
-			}),
-			" —",
-			" ",
-			diagnostic.message
-		] }, `${diagnostic.at}-${index}`))
+function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, highlightTerms, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "option",
+		"aria-selected": selected,
+		tabIndex: -1,
+		id: `log-row-${id}`,
+		"data-log-row-id": id,
+		onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(id),
+		onKeyDown: (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			onSelect === null || onSelect === void 0 || onSelect(id);
+		},
+		style: {
+			top,
+			height
+		},
+		className: require_text_truncate.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
+		children: columns.map((column) => {
+			var _column$priority2;
+			const raw = column.value(row);
+			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_text_truncate.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
+				style: columnStyle(column),
+				children: [
+					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "size-1.5 shrink-0 rounded-full",
+						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_text_truncate.cn("min-w-0 flex-1", !column.truncate && "truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
+						title: column.truncate ? void 0 : text || void 0,
+						children: column.render ? column.render(row) : text ? column.truncate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TextTruncate, {
+							text,
+							truncation: column.truncate,
+							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
+								text: shown,
+								search: highlightTerms
+							}) : shown
+						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
+							text,
+							search: highlightTerms
+						}) : text : EM_DASH
+					}),
+					onCellAction && column.field && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellActions, {
+						field: column.field,
+						value: text,
+						onAction: onCellAction,
+						labels
+					})
+				]
+			}, column.id);
+		})
 	});
 }
 /**
-* What to offer, based on the token under the cursor.
+* Memoized because a live log re-renders several times a second while almost
+* every visible row is unchanged.
+*/
+const LogTableRow = (0, react.memo)(LogTableRowImpl);
+/**
+* The two questions a reader has about a value they just spotted: show me only
+* these, and get these out of my way.
 *
-* Completing fields is the part that makes the syntax discoverable at all —
-* nobody guesses that `utm_source` is a field they can filter on. Once the
-* field is chosen, its known values are the second half of the same guess.
+* Revealed on hover rather than always drawn — a log is scanned, and a pair of
+* buttons on every cell of every row is a wall of chrome. They stay in the tab
+* order regardless, since hover is not an interaction everyone has.
 */
-function useSuggestions(text, trailing, fields) {
-	return (0, react.useMemo)(() => {
-		const lastSpace = text.lastIndexOf(" ");
-		const head = lastSpace === -1 ? "" : text.slice(0, lastSpace + 1);
-		const token = text.slice(lastSpace + 1);
-		if (trailing) {
-			var _field$values;
-			const field = fields.find((candidate) => candidate.name === trailing.field);
-			const values = (_field$values = field === null || field === void 0 ? void 0 : field.values) !== null && _field$values !== void 0 ? _field$values : [];
-			const typed = trailing.value.toLowerCase();
-			return values.filter((value) => value.toLowerCase().includes(typed)).slice(0, MAX_SUGGESTIONS).map((value) => ({
-				kind: "value",
-				label: `${trailing.field}:${value}`,
-				replace: () => `${head}${trailing.field}:${/[\s"()]/.test(value) ? `"${value}"` : value} `
-			}));
-		}
-		const bare = token.replace(/^-/, "").toLowerCase();
-		if (bare.length === 0) return [];
-		return fields.filter((field) => field.name.toLowerCase().includes(bare)).slice(0, MAX_SUGGESTIONS).map((field) => ({
-			kind: "field",
-			label: `${field.name}:`,
-			hint: field.hint,
-			replace: () => `${head}${token.startsWith("-") ? "-" : ""}${field.name}:`
-		}));
-	}, [
-		text,
-		trailing,
-		fields
-	]);
+function CellActions({ field, value, onAction, labels }) {
+	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_text_truncate.cn("bg-surface/90 ml-auto flex shrink-0 items-center gap-0.5 rounded pl-1", "opacity-0 transition-opacity", "group-hover/cell:opacity-100 focus-within:opacity-100"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: button,
+			title: labels.filterFor(value),
+			"aria-label": labels.filterFor(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "include"
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: button,
+			title: labels.filterOut(value),
+			"aria-label": labels.filterOut(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "exclude"
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		})]
+	});
 }
 //#endregion
 //#region src/shells/field-sidebar.tsx
@@ -4403,6 +4955,12 @@ Object.defineProperty(exports, "EnvPanel", {
 		return EnvPanel;
 	}
 });
+Object.defineProperty(exports, "EventTimeline", {
+	enumerable: true,
+	get: function() {
+		return EventTimeline;
+	}
+});
 Object.defineProperty(exports, "FailureList", {
 	enumerable: true,
 	get: function() {
@@ -4421,6 +4979,12 @@ Object.defineProperty(exports, "FieldSidebar", {
 		return FieldSidebar;
 	}
 });
+Object.defineProperty(exports, "Flyout", {
+	enumerable: true,
+	get: function() {
+		return Flyout;
+	}
+});
 Object.defineProperty(exports, "KeyValueEditor", {
 	enumerable: true,
 	get: function() {
@@ -4451,6 +5015,12 @@ Object.defineProperty(exports, "QueryBar", {
 		return QueryBar;
 	}
 });
+Object.defineProperty(exports, "ScoreBreakdown", {
+	enumerable: true,
+	get: function() {
+		return ScoreBreakdown;
+	}
+});
 Object.defineProperty(exports, "SearchCombobox", {
 	enumerable: true,
 	get: function() {