@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/domains/metrics.es.js

@@ -1,29 +1,28 @@
-import { bucketLabels, isMultiDay } from "./metrics/lib/bucket-labels.es.js";
 import { METRICS_FILTER_BAR_OPERATORS, applyMetricsPropertyFilterTokens, buildMetricsDimensionalFilter, clearSavedMetricsFilters, createMetricsFilterBarFields, createMetricsPropertyFilterFields, filterBarItemsToMetricsTokens, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, loadMetricsFiltersFromStorage, metricsTokensToFilterBarItems, saveMetricsFiltersToStorage } from "./metrics/metrics-filters.es.js";
 import { AggregateLimiterProvider } from "./metrics/hooks/aggregate-limiter-provider.es.js";
 import { DATE_PRESETS, MetricsProvider, isValidPreset, useMetrics } from "./metrics/hooks/use-metrics.es.js";
-import { useMetricsFilters } from "./metrics/hooks/use-metrics-filters.es.js";
-import { useMetricsActivity } from "./metrics/hooks/use-metrics-activity.es.js";
-import { BUCKET_AXIS, EDGE_BUCKET_AXIS } from "./metrics/lib/chart-axis.es.js";
-import { CHART_COLORS } from "./metrics/lib/chart-colors.es.js";
+import { KpiCard } from "./metrics/components/kpi-card.es.js";
 import { formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatPercent, formatUsd, percentChange } from "./metrics/lib/chart-format.es.js";
+import { useMetricsFilters } from "./metrics/hooks/use-metrics-filters.es.js";
+import { bucketLabels, isMultiDay } from "./metrics/lib/bucket-labels.es.js";
+import { previousWindow, windowLength } from "./metrics/lib/time-window.es.js";
 import { ChartArea } from "./metrics/components/chart-area.es.js";
 import { ChartCard } from "./metrics/components/chart-card.es.js";
 import { ChartCardError } from "./metrics/components/chart-card-error.es.js";
-import { AgentRunsCard } from "./metrics/components/agent-runs-card.es.js";
+import { BUCKET_AXIS, EDGE_BUCKET_AXIS } from "./metrics/lib/chart-axis.es.js";
+import { CHART_COLORS } from "./metrics/lib/chart-colors.es.js";
 import { BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, breakdownGroupBy, buildBreakdownRows, changeTrend, entitiesAggregateRequest, environmentsAggregateRequest, previousFigures, projectsAggregateRequest, rowChange, threadsAggregateRequest } from "./metrics/lib/breakdown.es.js";
-import { previousWindow, windowLength } from "./metrics/lib/time-window.es.js";
-import { USAGE_METRICS, useMetricsUsageTotals } from "./metrics/hooks/use-metrics-usage-totals.es.js";
 import { useMetricsScope } from "./metrics/hooks/use-metrics-scope.es.js";
+import { OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton } from "./metrics/components/card-action-buttons.es.js";
+import { useMetricsActivity } from "./metrics/hooks/use-metrics-activity.es.js";
+import { FailureRateCard } from "./metrics/components/failure-rate-card.es.js";
+import { AgentRunsCard } from "./metrics/components/agent-runs-card.es.js";
+import { USAGE_METRICS, useMetricsUsageTotals } from "./metrics/hooks/use-metrics-usage-totals.es.js";
 import { BreakdownCard } from "./metrics/components/breakdown-card.es.js";
-import { OpenErrorsInLogsButton, OpenInTracesButton } from "./metrics/components/card-action-buttons.es.js";
 import { DateRangeSelector } from "./metrics/components/date-range-selector.es.js";
 import { DistinctIdsCard } from "./metrics/components/distinct-ids-card.es.js";
-import { FailureRateCard } from "./metrics/components/failure-rate-card.es.js";
 import { MetricsTimeRangeChip } from "./metrics/components/metrics-time-range-chip.es.js";
-import { KpiCard } from "./metrics/components/kpi-card.es.js";
 import { MetricsGrid } from "./metrics/components/metrics-grid/metrics-grid.es.js";
-import { MetricsKpis } from "./metrics/components/metrics-kpis.es.js";
 import { TokenUsageCard } from "./metrics/components/token-usage-card.es.js";
 import { useMetricsLatency } from "./metrics/hooks/use-metrics-latency.es.js";
 import { LatencyCard } from "./metrics/components/latency-card.es.js";
@@ -37,4 +36,4 @@ import { buildLogsDrilldownUrl, buildTracesDrilldownUrl } from "./metrics/drilld
 import { useMetricsLayout } from "./metrics/hooks/use-metrics-layout.es.js";
 import { chooseMetricsInterval, formatMetricsBucketLabel, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useLatencyMetrics, useModelCostKpiMetrics, useModelUsageCostMetrics, useScoresMetrics, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceVolumeMetrics } from "./metrics/hooks.es.js";
 import "./metrics/lib.es.js";
-export { AgentRunsCard, AggregateLimiterProvider, BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, BUCKET_AXIS, BreakdownCard, CHART_COLORS, ChartArea, ChartCard, ChartCardError, DATE_PRESETS, DateRangeSelector, DistinctIdsCard, EDGE_BUCKET_AXIS, FailureRateCard, KpiCard, LatencyCard, METRICS_FILTER_BAR_OPERATORS, MetricsGrid, MetricsKpis, MetricsProvider, MetricsTimeRangeChip, OpenErrorsInLogsButton, OpenInTracesButton, ScoresCard, TokenUsageCard, TraceVolumeCard, USAGE_METRICS, UsageCard, applyMetricsPropertyFilterTokens, breakdownGroupBy, bucketLabels, buildBreakdownRows, buildLogsDrilldownUrl, buildMetricsDimensionalFilter, buildTracesDrilldownUrl, changeTrend, chooseMetricsInterval, clearSavedMetricsFilters, createMetricsFilterBarFields, createMetricsPropertyFilterFields, entitiesAggregateRequest, environmentsAggregateRequest, filterBarItemsToMetricsTokens, formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatMetricsBucketLabel, formatPercent, formatUsd, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, isMultiDay, isValidPreset, loadMetricsFiltersFromStorage, metricsTokensToFilterBarItems, percentChange, previousFigures, previousWindow, projectsAggregateRequest, rowChange, saveMetricsFiltersToStorage, threadsAggregateRequest, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useLatencyMetrics, useMetrics, useMetricsActivity, useMetricsFilters, useMetricsLatency, useMetricsLayout, useMetricsScope, useMetricsScores, useMetricsUsageTotals, useModelCostKpiMetrics, useModelUsageCostMetrics, useScoresMetrics, useTokenSpend, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceVolumeMetrics, windowLength };
+export { AgentRunsCard, AggregateLimiterProvider, BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, BUCKET_AXIS, BreakdownCard, CHART_COLORS, ChartArea, ChartCard, ChartCardError, DATE_PRESETS, DateRangeSelector, DistinctIdsCard, EDGE_BUCKET_AXIS, FailureRateCard, KpiCard, LatencyCard, METRICS_FILTER_BAR_OPERATORS, MetricsGrid, MetricsProvider, MetricsTimeRangeChip, OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton, ScoresCard, TokenUsageCard, TraceVolumeCard, USAGE_METRICS, UsageCard, applyMetricsPropertyFilterTokens, breakdownGroupBy, bucketLabels, buildBreakdownRows, buildLogsDrilldownUrl, buildMetricsDimensionalFilter, buildTracesDrilldownUrl, changeTrend, chooseMetricsInterval, clearSavedMetricsFilters, createMetricsFilterBarFields, createMetricsPropertyFilterFields, entitiesAggregateRequest, environmentsAggregateRequest, filterBarItemsToMetricsTokens, formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatMetricsBucketLabel, formatPercent, formatUsd, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, isMultiDay, isValidPreset, loadMetricsFiltersFromStorage, metricsTokensToFilterBarItems, percentChange, previousFigures, previousWindow, projectsAggregateRequest, rowChange, saveMetricsFiltersToStorage, threadsAggregateRequest, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useLatencyMetrics, useMetrics, useMetricsActivity, useMetricsFilters, useMetricsLatency, useMetricsLayout, useMetricsScope, useMetricsScores, useMetricsUsageTotals, useModelCostKpiMetrics, useModelUsageCostMetrics, useScoresMetrics, useTokenSpend, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceVolumeMetrics, windowLength };

package/dist/domains/observability/components/observability-header-slot.cjs.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+// src/domains/observability/components/observability-header-slot.ts
+/**
+* The element at the end of the shared observability header row, next to the traces / spans / threads
+* switch. Controls rendered deep in a page body (e.g. saved views) portal into it.
+*/
+var ObservabilityHeaderSlotContext = (0, react.createContext)(void 0);
+var useObservabilityHeaderSlot = () => (0, react.useContext)(ObservabilityHeaderSlotContext);
+exports.ObservabilityHeaderSlotContext = ObservabilityHeaderSlotContext;
+exports.useObservabilityHeaderSlot = useObservabilityHeaderSlot;
+
+//# sourceMappingURL=observability-header-slot.cjs.js.map

package/dist/domains/observability/components/observability-header-slot.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-header-slot.cjs.js","names":["createContext","useContext"],"sources":["../../../../src/domains/observability/components/observability-header-slot.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * The element at the end of the shared observability header row, next to the traces / spans / threads\n * switch. Controls rendered deep in a page body (e.g. saved views) portal into it.\n */\nexport const ObservabilityHeaderSlotContext = createContext<HTMLElement | undefined>(undefined);\n\nexport const useObservabilityHeaderSlot = () => useContext(ObservabilityHeaderSlotContext);\n"],"mappings":";;;;;;;AAMA,IAAa,kCAAA,GAAiCA,MAAAA,cAAAA,CAAuC,KAAA,CAAS;AAE9F,IAAa,oCAAA,GAAmCC,MAAAA,WAAAA,CAAW,8BAA8B"}

package/dist/domains/observability/components/observability-header-slot.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/domains/observability/components/observability-header-slot';

package/dist/domains/observability/components/observability-header-slot.es.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+// src/domains/observability/components/observability-header-slot.ts
+/**
+* The element at the end of the shared observability header row, next to the traces / spans / threads
+* switch. Controls rendered deep in a page body (e.g. saved views) portal into it.
+*/
+var ObservabilityHeaderSlotContext = createContext(void 0);
+var useObservabilityHeaderSlot = () => useContext(ObservabilityHeaderSlotContext);
+export { ObservabilityHeaderSlotContext, useObservabilityHeaderSlot };
+
+//# sourceMappingURL=observability-header-slot.es.js.map

package/dist/domains/observability/components/observability-header-slot.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-header-slot.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-header-slot.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * The element at the end of the shared observability header row, next to the traces / spans / threads\n * switch. Controls rendered deep in a page body (e.g. saved views) portal into it.\n */\nexport const ObservabilityHeaderSlotContext = createContext<HTMLElement | undefined>(undefined);\n\nexport const useObservabilityHeaderSlot = () => useContext(ObservabilityHeaderSlotContext);\n"],"mappings":";;;;;;AAMA,IAAa,iCAAiC,cAAuC,KAAA,CAAS;AAE9F,IAAa,mCAAmC,WAAW,8BAA8B"}

package/dist/domains/observability/components/observability-histogram.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
 const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
+const require_domains_metrics_lib_chart_format = require("../../metrics/lib/chart-format.cjs.js");
 const require_domains_metrics_lib_chart_axis = require("../../metrics/lib/chart-axis.cjs.js");
 const require_domains_metrics_lib_chart_colors = require("../../metrics/lib/chart-colors.cjs.js");
-const require_domains_metrics_lib_chart_format = require("../../metrics/lib/chart-format.cjs.js");
-const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-NATtwA_W.cjs");
+const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-BdMlKv6G.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/observability/components/observability-histogram.tsx
@@ -69,6 +69,10 @@ function ObservabilityHistogram({ label, resourceLabel, buckets, isLoading = fal
 				valueFormatter: require_domains_metrics_lib_chart_format.formatCount,
 				isLoading,
 				onZoom,
+				onBucketClick: onZoom ? (_row, index) => onZoom({
+					start: index,
+					end: index
+				}) : void 0,
 				...require_domains_metrics_lib_chart_axis.BUCKET_AXIS
 			})
 		})]

package/dist/domains/observability/components/observability-histogram.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"observability-histogram.cjs.js","names":["CHART_COLORS","useMemo","formatCount","Txt","cn","MetricsStackedBarChart","BUCKET_AXIS"],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()} · {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAOA,yCAAAA,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,UAAA,GAASC,MAAAA,QAAAA,OACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACGC,yCAAAA,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAIA,yCAAAA,YAAY,MAAM;IAAE;GAC5E;EAEP,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAWC,cAAAA,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgBH,yCAAAA;IACL;IACH;IACR,GAAII,uCAAAA;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}
+{"version":3,"file":"observability-histogram.cjs.js","names":["CHART_COLORS","useMemo","formatCount","Txt","cn","MetricsStackedBarChart","BUCKET_AXIS"],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars, or clicking one, reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()} · {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            onBucketClick={onZoom ? (_row, index) => onZoom({ start: index, end: index }) : undefined}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAOA,yCAAAA,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,UAAA,GAASC,MAAAA,QAAAA,OACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACGC,yCAAAA,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAIA,yCAAAA,YAAY,MAAM;IAAE;GAC5E;EAEP,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAWC,cAAAA,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgBH,yCAAAA;IACL;IACH;IACR,eAAe,UAAU,MAAM,UAAU,OAAO;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC,IAAI,KAAA;IAChF,GAAII,uCAAAA;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}

package/dist/domains/observability/components/observability-histogram.es.js

@@ -1,9 +1,9 @@
 import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
+import { formatCount } from "../../metrics/lib/chart-format.es.js";
 import { BUCKET_AXIS } from "../../metrics/lib/chart-axis.es.js";
 import { CHART_COLORS } from "../../metrics/lib/chart-colors.es.js";
-import { formatCount } from "../../metrics/lib/chart-format.es.js";
-import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-DJB4aByt.js";
+import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-BRuA6MTE.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/observability/components/observability-histogram.tsx
@@ -68,6 +68,10 @@ function ObservabilityHistogram({ label, resourceLabel, buckets, isLoading = fal
 				valueFormatter: formatCount,
 				isLoading,
 				onZoom,
+				onBucketClick: onZoom ? (_row, index) => onZoom({
+					start: index,
+					end: index
+				}) : void 0,
 				...BUCKET_AXIS
 			})
 		})]

package/dist/domains/observability/components/observability-histogram.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"observability-histogram.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()} · {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAO,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,SAAS,cACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,qBAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACG,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAI,YAAY,MAAM;IAAE;GAC5E;EAEP,CAAA,GAAA,UACC,oBAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,oBAAC,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,oBAAC,OAAD;GAAK,WAAW,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,oBAAC,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgB;IACL;IACH;IACR,GAAI;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}
+{"version":3,"file":"observability-histogram.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars, or clicking one, reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()} · {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            onBucketClick={onZoom ? (_row, index) => onZoom({ start: index, end: index }) : undefined}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAO,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,SAAS,cACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,qBAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACG,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAI,YAAY,MAAM;IAAE;GAC5E;EAEP,CAAA,GAAA,UACC,oBAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,oBAAC,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,oBAAC,OAAD;GAAK,WAAW,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,oBAAC,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgB;IACL;IACH;IACR,eAAe,UAAU,MAAM,UAAU,OAAO;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC,IAAI,KAAA;IAChF,GAAI;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}

package/dist/domains/observability/components/observability-page-layout.cjs.js

@@ -1,7 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_observability_saved_views_saved_views_source = require("../saved-views/saved-views-source.cjs.js");
+const require_domains_observability_components_observability_header_slot = require("./observability-header-slot.cjs.js");
 const require_domains_observability_hooks_use_observability_views = require("../hooks/use-observability-views.cjs.js");
 const require_domains_traces_components_traces_spans_switch = require("../../traces/components/traces-spans-switch.cjs.js");
 const require_PageLayout = require("../../../PageLayout-DFRzcnkf.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/observability/components/observability-page-layout.tsx
 /**
@@ -13,9 +16,11 @@ function ObservabilityPageLayout({ current, features, onViewChange, breadcrumbs,
 		current,
 		features
 	});
-	let actionRow;
-	if (isLoading) actionRow = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_traces_spans_switch.TracesSpansSwitchSkeleton, {});
-	else if (showSwitch) actionRow = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_traces_spans_switch.TracesSpansSwitch, {
+	const [headerSlot, setHeaderSlot] = (0, react.useState)(null);
+	const savedViews = require_domains_observability_saved_views_saved_views_source.useSavedViewsSource();
+	let viewSwitch;
+	if (isLoading) viewSwitch = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_traces_spans_switch.TracesSpansSwitchSkeleton, {});
+	else if (showSwitch) viewSwitch = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_traces_spans_switch.TracesSpansSwitch, {
 		current,
 		views,
 		onViewChange
@@ -26,8 +31,17 @@ function ObservabilityPageLayout({ current, features, onViewChange, breadcrumbs,
 			isLoading,
 			showSwitch
 		}),
-		actionRow,
-		children
+		actionRow: (viewSwitch || savedViews) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-wrap items-center justify-between gap-3",
+			children: [viewSwitch, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: setHeaderSlot,
+				className: "flex min-w-0 grow justify-end"
+			})]
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_observability_components_observability_header_slot.ObservabilityHeaderSlotContext.Provider, {
+			value: headerSlot ?? void 0,
+			children
+		})
 	});
 }
 exports.ObservabilityPageLayout = ObservabilityPageLayout;

package/dist/domains/observability/components/observability-page-layout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"observability-page-layout.cjs.js","names":["useObservabilityViews","TracesSpansSwitchSkeleton","TracesSpansSwitch","PageLayout"],"sources":["../../../../src/domains/observability/components/observability-page-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useObservabilityViews } from '../hooks/use-observability-views';\nimport type { ObservabilityViewsState } from '../hooks/use-observability-views';\nimport type { TracesExplorerFeatures } from '@/domains/traces/components/traces-explorer/traces-explorer-context';\nimport { TracesSpansSwitch, TracesSpansSwitchSkeleton } from '@/domains/traces/components/traces-spans-switch';\nimport type { ObservabilityView } from '@/domains/traces/components/traces-spans-switch';\nimport { PageLayout } from '@/ds/components/PageLayout';\n\nexport type ObservabilityBreadcrumbsState = Pick<ObservabilityViewsState, 'isLoading' | 'showSwitch'> & {\n  current: ObservabilityView;\n};\n\nexport type ObservabilityPageLayoutProps = {\n  current: ObservabilityView;\n  features?: TracesExplorerFeatures;\n  onViewChange: (view: ObservabilityView) => void;\n  /** The host's breadcrumbs. They can name the current view when the switch does not show it. */\n  breadcrumbs: (state: ObservabilityBreadcrumbsState) => ReactNode;\n  children: ReactNode;\n};\n\n/**\n * The header shared by the traces, spans and threads pages: breadcrumbs plus the view switch pinned\n * under them. Router-agnostic: the host passes the current view, navigation and its page body.\n */\nexport function ObservabilityPageLayout({\n  current,\n  features,\n  onViewChange,\n  breadcrumbs,\n  children,\n}: ObservabilityPageLayoutProps) {\n  const { views, isLoading, showSwitch } = useObservabilityViews({ current, features });\n\n  // While loading, hold the switch's place so it does not push the page down when it lands.\n  let actionRow: ReactNode;\n  if (isLoading) actionRow = <TracesSpansSwitchSkeleton />;\n  else if (showSwitch) actionRow = <TracesSpansSwitch current={current} views={views} onViewChange={onViewChange} />;\n\n  return (\n    <PageLayout breadcrumbs={breadcrumbs({ current, isLoading, showSwitch })} actionRow={actionRow}>\n      {children}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,wBAAwB,EACtC,SACA,UACA,cACA,aACA,YAC+B;CAC/B,MAAM,EAAE,OAAO,WAAW,eAAeA,4DAAAA,sBAAsB;EAAE;EAAS;CAAS,CAAC;CAGpF,IAAI;CACJ,IAAI,WAAW,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,sDAAAA,2BAAD,CAA4B,CAAA;MAClD,IAAI,YAAY,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,sDAAAA,mBAAD;EAA4B;EAAgB;EAAqB;CAAe,CAAA;CAEjH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;EAAY,aAAa,YAAY;GAAE;GAAS;GAAW;EAAW,CAAC;EAAc;EAClF;CACS,CAAA;AAEhB"}
+{"version":3,"file":"observability-page-layout.cjs.js","names":["useObservabilityViews","useState","useSavedViewsSource","TracesSpansSwitchSkeleton","TracesSpansSwitch","PageLayout","ObservabilityHeaderSlotContext"],"sources":["../../../../src/domains/observability/components/observability-page-layout.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useObservabilityViews } from '../hooks/use-observability-views';\nimport type { ObservabilityViewsState } from '../hooks/use-observability-views';\nimport { useSavedViewsSource } from '../saved-views/saved-views-source';\nimport { ObservabilityHeaderSlotContext } from './observability-header-slot';\nimport type { TracesExplorerFeatures } from '@/domains/traces/components/traces-explorer/traces-explorer-context';\nimport { TracesSpansSwitch, TracesSpansSwitchSkeleton } from '@/domains/traces/components/traces-spans-switch';\nimport type { ObservabilityView } from '@/domains/traces/components/traces-spans-switch';\nimport { PageLayout } from '@/ds/components/PageLayout';\n\nexport type ObservabilityBreadcrumbsState = Pick<ObservabilityViewsState, 'isLoading' | 'showSwitch'> & {\n  current: ObservabilityView;\n};\n\nexport type ObservabilityPageLayoutProps = {\n  current: ObservabilityView;\n  features?: TracesExplorerFeatures;\n  onViewChange: (view: ObservabilityView) => void;\n  /** The host's breadcrumbs. They can name the current view when the switch does not show it. */\n  breadcrumbs: (state: ObservabilityBreadcrumbsState) => ReactNode;\n  children: ReactNode;\n};\n\n/**\n * The header shared by the traces, spans and threads pages: breadcrumbs plus the view switch pinned\n * under them. Router-agnostic: the host passes the current view, navigation and its page body.\n */\nexport function ObservabilityPageLayout({\n  current,\n  features,\n  onViewChange,\n  breadcrumbs,\n  children,\n}: ObservabilityPageLayoutProps) {\n  const { views, isLoading, showSwitch } = useObservabilityViews({ current, features });\n  const [headerSlot, setHeaderSlot] = useState<HTMLElement | null>(null);\n  // Saved views portal into the end of this row, so it exists whenever the host stores them.\n  const savedViews = useSavedViewsSource();\n\n  // While loading, hold the switch's place so it does not push the page down when it lands.\n  let viewSwitch: ReactNode;\n  if (isLoading) viewSwitch = <TracesSpansSwitchSkeleton />;\n  else if (showSwitch) viewSwitch = <TracesSpansSwitch current={current} views={views} onViewChange={onViewChange} />;\n\n  return (\n    <PageLayout\n      breadcrumbs={breadcrumbs({ current, isLoading, showSwitch })}\n      actionRow={\n        (viewSwitch || savedViews) && (\n          // Wraps on narrow screens so the saved-views picker drops to its own line instead of shrinking.\n          <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-3\">\n            {viewSwitch}\n            <div ref={setHeaderSlot} className=\"flex min-w-0 grow justify-end\" />\n          </div>\n        )\n      }\n    >\n      <ObservabilityHeaderSlotContext.Provider value={headerSlot ?? undefined}>\n        {children}\n      </ObservabilityHeaderSlotContext.Provider>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,SAAgB,wBAAwB,EACtC,SACA,UACA,cACA,aACA,YAC+B;CAC/B,MAAM,EAAE,OAAO,WAAW,eAAeA,4DAAAA,sBAAsB;EAAE;EAAS;CAAS,CAAC;CACpF,MAAM,CAAC,YAAY,kBAAA,GAAiBC,MAAAA,SAAAA,CAA6B,IAAI;CAErE,MAAM,aAAaC,6DAAAA,oBAAoB;CAGvC,IAAI;CACJ,IAAI,WAAW,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,sDAAAA,2BAAD,CAA4B,CAAA;MACnD,IAAI,YAAY,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,sDAAAA,mBAAD;EAA4B;EAAgB;EAAqB;CAAe,CAAA;CAElH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;EACE,aAAa,YAAY;GAAE;GAAS;GAAW;EAAW,CAAC;EAC3D,YACG,cAAc,eAEb,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,YACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,KAAK;IAAe,WAAU;GAAiC,CAAA,CACjE;;EAIT,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mEAAAA,+BAA+B,UAAhC;GAAyC,OAAO,cAAc,KAAA;GAC3D;EACsC,CAAA;CAC/B,CAAA;AAEhB"}

package/dist/domains/observability/components/observability-page-layout.es.js

@@ -1,7 +1,10 @@
+import { useSavedViewsSource } from "../saved-views/saved-views-source.es.js";
+import { ObservabilityHeaderSlotContext } from "./observability-header-slot.es.js";
 import { useObservabilityViews } from "../hooks/use-observability-views.es.js";
 import { TracesSpansSwitch, TracesSpansSwitchSkeleton } from "../../traces/components/traces-spans-switch.es.js";
 import { t as PageLayout } from "../../../PageLayout-CyM_Op3c.js";
-import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/observability/components/observability-page-layout.tsx
 /**
 * The header shared by the traces, spans and threads pages: breadcrumbs plus the view switch pinned
@@ -12,9 +15,11 @@ function ObservabilityPageLayout({ current, features, onViewChange, breadcrumbs,
 		current,
 		features
 	});
-	let actionRow;
-	if (isLoading) actionRow = /* @__PURE__ */ jsx(TracesSpansSwitchSkeleton, {});
-	else if (showSwitch) actionRow = /* @__PURE__ */ jsx(TracesSpansSwitch, {
+	const [headerSlot, setHeaderSlot] = useState(null);
+	const savedViews = useSavedViewsSource();
+	let viewSwitch;
+	if (isLoading) viewSwitch = /* @__PURE__ */ jsx(TracesSpansSwitchSkeleton, {});
+	else if (showSwitch) viewSwitch = /* @__PURE__ */ jsx(TracesSpansSwitch, {
 		current,
 		views,
 		onViewChange
@@ -25,8 +30,17 @@ function ObservabilityPageLayout({ current, features, onViewChange, breadcrumbs,
 			isLoading,
 			showSwitch
 		}),
-		actionRow,
-		children
+		actionRow: (viewSwitch || savedViews) && /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-wrap items-center justify-between gap-3",
+			children: [viewSwitch, /* @__PURE__ */ jsx("div", {
+				ref: setHeaderSlot,
+				className: "flex min-w-0 grow justify-end"
+			})]
+		}),
+		children: /* @__PURE__ */ jsx(ObservabilityHeaderSlotContext.Provider, {
+			value: headerSlot ?? void 0,
+			children
+		})
 	});
 }
 export { ObservabilityPageLayout };

package/dist/domains/observability/components/observability-page-layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"observability-page-layout.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-page-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useObservabilityViews } from '../hooks/use-observability-views';\nimport type { ObservabilityViewsState } from '../hooks/use-observability-views';\nimport type { TracesExplorerFeatures } from '@/domains/traces/components/traces-explorer/traces-explorer-context';\nimport { TracesSpansSwitch, TracesSpansSwitchSkeleton } from '@/domains/traces/components/traces-spans-switch';\nimport type { ObservabilityView } from '@/domains/traces/components/traces-spans-switch';\nimport { PageLayout } from '@/ds/components/PageLayout';\n\nexport type ObservabilityBreadcrumbsState = Pick<ObservabilityViewsState, 'isLoading' | 'showSwitch'> & {\n  current: ObservabilityView;\n};\n\nexport type ObservabilityPageLayoutProps = {\n  current: ObservabilityView;\n  features?: TracesExplorerFeatures;\n  onViewChange: (view: ObservabilityView) => void;\n  /** The host's breadcrumbs. They can name the current view when the switch does not show it. */\n  breadcrumbs: (state: ObservabilityBreadcrumbsState) => ReactNode;\n  children: ReactNode;\n};\n\n/**\n * The header shared by the traces, spans and threads pages: breadcrumbs plus the view switch pinned\n * under them. Router-agnostic: the host passes the current view, navigation and its page body.\n */\nexport function ObservabilityPageLayout({\n  current,\n  features,\n  onViewChange,\n  breadcrumbs,\n  children,\n}: ObservabilityPageLayoutProps) {\n  const { views, isLoading, showSwitch } = useObservabilityViews({ current, features });\n\n  // While loading, hold the switch's place so it does not push the page down when it lands.\n  let actionRow: ReactNode;\n  if (isLoading) actionRow = <TracesSpansSwitchSkeleton />;\n  else if (showSwitch) actionRow = <TracesSpansSwitch current={current} views={views} onViewChange={onViewChange} />;\n\n  return (\n    <PageLayout breadcrumbs={breadcrumbs({ current, isLoading, showSwitch })} actionRow={actionRow}>\n      {children}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,wBAAwB,EACtC,SACA,UACA,cACA,aACA,YAC+B;CAC/B,MAAM,EAAE,OAAO,WAAW,eAAe,sBAAsB;EAAE;EAAS;CAAS,CAAC;CAGpF,IAAI;CACJ,IAAI,WAAW,YAAY,oBAAC,2BAAD,CAA4B,CAAA;MAClD,IAAI,YAAY,YAAY,oBAAC,mBAAD;EAA4B;EAAgB;EAAqB;CAAe,CAAA;CAEjH,OACE,oBAAC,YAAD;EAAY,aAAa,YAAY;GAAE;GAAS;GAAW;EAAW,CAAC;EAAc;EAClF;CACS,CAAA;AAEhB"}
+{"version":3,"file":"observability-page-layout.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-page-layout.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useObservabilityViews } from '../hooks/use-observability-views';\nimport type { ObservabilityViewsState } from '../hooks/use-observability-views';\nimport { useSavedViewsSource } from '../saved-views/saved-views-source';\nimport { ObservabilityHeaderSlotContext } from './observability-header-slot';\nimport type { TracesExplorerFeatures } from '@/domains/traces/components/traces-explorer/traces-explorer-context';\nimport { TracesSpansSwitch, TracesSpansSwitchSkeleton } from '@/domains/traces/components/traces-spans-switch';\nimport type { ObservabilityView } from '@/domains/traces/components/traces-spans-switch';\nimport { PageLayout } from '@/ds/components/PageLayout';\n\nexport type ObservabilityBreadcrumbsState = Pick<ObservabilityViewsState, 'isLoading' | 'showSwitch'> & {\n  current: ObservabilityView;\n};\n\nexport type ObservabilityPageLayoutProps = {\n  current: ObservabilityView;\n  features?: TracesExplorerFeatures;\n  onViewChange: (view: ObservabilityView) => void;\n  /** The host's breadcrumbs. They can name the current view when the switch does not show it. */\n  breadcrumbs: (state: ObservabilityBreadcrumbsState) => ReactNode;\n  children: ReactNode;\n};\n\n/**\n * The header shared by the traces, spans and threads pages: breadcrumbs plus the view switch pinned\n * under them. Router-agnostic: the host passes the current view, navigation and its page body.\n */\nexport function ObservabilityPageLayout({\n  current,\n  features,\n  onViewChange,\n  breadcrumbs,\n  children,\n}: ObservabilityPageLayoutProps) {\n  const { views, isLoading, showSwitch } = useObservabilityViews({ current, features });\n  const [headerSlot, setHeaderSlot] = useState<HTMLElement | null>(null);\n  // Saved views portal into the end of this row, so it exists whenever the host stores them.\n  const savedViews = useSavedViewsSource();\n\n  // While loading, hold the switch's place so it does not push the page down when it lands.\n  let viewSwitch: ReactNode;\n  if (isLoading) viewSwitch = <TracesSpansSwitchSkeleton />;\n  else if (showSwitch) viewSwitch = <TracesSpansSwitch current={current} views={views} onViewChange={onViewChange} />;\n\n  return (\n    <PageLayout\n      breadcrumbs={breadcrumbs({ current, isLoading, showSwitch })}\n      actionRow={\n        (viewSwitch || savedViews) && (\n          // Wraps on narrow screens so the saved-views picker drops to its own line instead of shrinking.\n          <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-3\">\n            {viewSwitch}\n            <div ref={setHeaderSlot} className=\"flex min-w-0 grow justify-end\" />\n          </div>\n        )\n      }\n    >\n      <ObservabilityHeaderSlotContext.Provider value={headerSlot ?? undefined}>\n        {children}\n      </ObservabilityHeaderSlotContext.Provider>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,wBAAwB,EACtC,SACA,UACA,cACA,aACA,YAC+B;CAC/B,MAAM,EAAE,OAAO,WAAW,eAAe,sBAAsB;EAAE;EAAS;CAAS,CAAC;CACpF,MAAM,CAAC,YAAY,iBAAiB,SAA6B,IAAI;CAErE,MAAM,aAAa,oBAAoB;CAGvC,IAAI;CACJ,IAAI,WAAW,aAAa,oBAAC,2BAAD,CAA4B,CAAA;MACnD,IAAI,YAAY,aAAa,oBAAC,mBAAD;EAA4B;EAAgB;EAAqB;CAAe,CAAA;CAElH,OACE,oBAAC,YAAD;EACE,aAAa,YAAY;GAAE;GAAS;GAAW;EAAW,CAAC;EAC3D,YACG,cAAc,eAEb,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,YACD,oBAAC,OAAD;IAAK,KAAK;IAAe,WAAU;GAAiC,CAAA,CACjE;;EAIT,UAAA,oBAAC,+BAA+B,UAAhC;GAAyC,OAAO,cAAc,KAAA;GAC3D;EACsC,CAAA;CAC/B,CAAA;AAEhB"}

package/dist/domains/observability/hooks/use-observability-list-filters.cjs.js

@@ -1,10 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_trace_filters = require("../../../trace-filters-BpeBUjCb.cjs");
-const require_domains_observability_list_polling = require("../list-polling.cjs.js");
+const require_trace_filters = require("../../../trace-filters-BNEZ31HX.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("../../traces/components/traces-explorer/traces-explorer-actions.cjs.js");
+const require_domains_observability_observability_list_url_state = require("../observability-list-url-state.cjs.js");
+const require_domains_observability_list_polling = require("../list-polling.cjs.js");
+const require_domains_observability_lib_zoom_memory = require("../lib/zoom-memory.cjs.js");
 let react = require("react");
 // src/domains/observability/hooks/use-observability-list-filters.ts
-var DEFAULT_DATE_PRESET = require_domains_traces_components_traces_explorer_traces_explorer_actions.DEFAULT_TRACES_FILTERS.datePreset;
 /**
 * Like the traces list with delta polling: a timer or a window focus would reload every loaded page
 * and reset the cursor chain, so an observability list only reloads to recover from a transient failure.
@@ -13,13 +14,33 @@ var observabilityListQueryOptions = {
 	refetchInterval: ({ state }) => require_domains_observability_list_polling.recoveryRefetchInterval(state.error),
 	refetchOnWindowFocus: false
 };
-/** The time range, filter and sort state of a spans or threads list. */
-function useObservabilityListFilters() {
-	const [dates, setDates] = (0, react.useState)({ datePreset: DEFAULT_DATE_PRESET });
-	const [tokens, setTokens] = (0, react.useState)([]);
-	const [groups, setGroups] = (0, react.useState)([]);
-	const [sort, setSort] = (0, react.useState)("desc");
-	const { datePreset, dateFrom, dateTo } = dates;
+/** The search params of `url`, or of an in-memory store when the host keeps no URL state. */
+function useListSearchParams(url) {
+	const [localParams, setLocalParams] = (0, react.useState)(() => new URLSearchParams());
+	if (url) return url;
+	return {
+		searchParams: localParams,
+		setSearchParams: (next) => setLocalParams((prev) => typeof next === "function" ? next(prev) : next)
+	};
+}
+/**
+* The time range, filter and sort state of a spans or threads list, kept in the host's URL (same
+* date, sort and group params as /traces) so it survives a reload and can be shared. Without `url`
+* the state lives in memory. A sort on a field outside `sortFields` reads as start time, newest first.
+* `defaultDatePreset` is the range shown when the URL names none (last 7 days unless the host differs);
+* it is left out of the URL like any default.
+*/
+function useObservabilityListFilters(url, { sortFields, defaultDatePreset = require_domains_observability_observability_list_url_state.OBSERVABILITY_LIST_DEFAULT_DATE_PRESET } = {}) {
+	const { searchParams, setSearchParams } = useListSearchParams(url);
+	const datesKey = JSON.stringify(require_domains_observability_observability_list_url_state.readObservabilityListDates(searchParams, defaultDatePreset));
+	const filtersKey = JSON.stringify(require_domains_observability_observability_list_url_state.readObservabilityListFilters(searchParams));
+	const { datePreset, dateFrom, dateTo } = (0, react.useMemo)(() => require_domains_observability_observability_list_url_state.readObservabilityListDates(searchParams, defaultDatePreset), [datesKey]);
+	const { tokens, groups } = (0, react.useMemo)(() => require_domains_observability_observability_list_url_state.readObservabilityListFilters(searchParams), [filtersKey]);
+	const urlSort = require_domains_observability_observability_list_url_state.readObservabilityListSort(searchParams, sortFields ?? require_domains_observability_observability_list_url_state.OBSERVABILITY_LIST_SORT_FIELDS);
+	const sort = (0, react.useMemo)(() => ({
+		field: urlSort.field,
+		direction: urlSort.direction
+	}), [urlSort.field, urlSort.direction]);
 	const fromMs = dateFrom?.getTime();
 	const toMs = dateTo?.getTime();
 	const timeRange = (0, react.useMemo)(() => {
@@ -30,11 +51,29 @@ function useObservabilityListFilters() {
 		fromMs,
 		toMs
 	]);
-	const onDatePresetChange = (preset) => setDates((current) => preset === "custom" ? {
+	const pending = (0, react.useRef)(null);
+	(0, react.useLayoutEffect)(() => {
+		pending.current = null;
+	}, [searchParams]);
+	const update = (write) => {
+		const base = pending.current ?? searchParams;
+		const next = new URLSearchParams(base);
+		write(next);
+		if (next.toString() === base.toString()) return;
+		pending.current = next;
+		setSearchParams(next, { replace: true });
+	};
+	const updateDates = (change) => update((next) => require_domains_observability_observability_list_url_state.writeObservabilityListDates(next, change(require_domains_observability_observability_list_url_state.readObservabilityListDates(next, defaultDatePreset)), defaultDatePreset));
+	const zoomMemory = (0, react.useRef)(void 0);
+	const pickDates = (change) => {
+		zoomMemory.current = void 0;
+		updateDates(change);
+	};
+	const onDatePresetChange = (preset) => pickDates((current) => preset === "custom" ? {
 		...current,
 		datePreset: preset
 	} : { datePreset: preset });
-	const onDateChange = (date, end) => setDates((current) => {
+	const onDateChange = (date, end) => pickDates((current) => {
 		if (current.datePreset !== "custom") return current;
 		return end === "from" ? {
 			...current,
@@ -44,15 +83,31 @@ function useObservabilityListFilters() {
 			dateTo: date
 		};
 	});
-	const onDateRangeChange = (from, to) => setDates((current) => current.datePreset === "custom" ? {
+	const onDateRangeChange = (from, to) => pickDates((current) => current.datePreset === "custom" ? {
 		...current,
 		dateFrom: from,
 		dateTo: to
 	} : current);
-	const onFiltersChange = (nextTokens, nextGroups) => {
-		setTokens(nextTokens);
-		setGroups(nextGroups);
-	};
+	/** Narrows the range to a histogram selection, remembering the range to return to on reset. */
+	const onZoom = (from, to) => updateDates((current) => {
+		zoomMemory.current = require_domains_observability_lib_zoom_memory.rememberZoom(zoomMemory.current, current, from, to);
+		return {
+			datePreset: "custom",
+			dateFrom: from,
+			dateTo: to
+		};
+	});
+	/** Undoes the last histogram zoom, or switches to `defaultPreset` when there is none to undo. */
+	const onDateReset = (defaultPreset) => updateDates((current) => {
+		const before = require_domains_observability_lib_zoom_memory.rangeBeforeZoom(zoomMemory.current, current);
+		zoomMemory.current = void 0;
+		return before ?? { datePreset: defaultPreset };
+	});
+	const onFiltersChange = (nextTokens, nextGroups) => update((next) => require_domains_observability_observability_list_url_state.writeObservabilityListFilters(next, {
+		tokens: nextTokens,
+		groups: nextGroups
+	}));
+	const setSort = (next) => update((params) => require_domains_observability_observability_list_url_state.writeObservabilityListSort(params, next));
 	const contentFiltersApplied = tokens.length > 0 || groups.length > 0;
 	return {
 		datePreset,
@@ -68,9 +123,11 @@ function useObservabilityListFilters() {
 		onDatePresetChange,
 		onDateChange,
 		onDateRangeChange,
+		onZoom,
+		onDateReset,
 		onFiltersChange,
 		contentFiltersApplied,
-		filtersApplied: contentFiltersApplied || datePreset !== DEFAULT_DATE_PRESET
+		filtersApplied: contentFiltersApplied || datePreset !== defaultDatePreset
 	};
 }
 exports.observabilityListQueryOptions = observabilityListQueryOptions;

package/dist/domains/observability/hooks/use-observability-list-filters.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-observability-list-filters.cjs.js","names":["DEFAULT_TRACES_FILTERS","recoveryRefetchInterval","useState","useMemo","resolveTracesDateWindow","resolveTraceQueryTimeRange"],"sources":["../../../../src/domains/observability/hooks/use-observability-list-filters.ts"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { recoveryRefetchInterval } from '@/domains/observability/list-polling';\nimport {\n  DEFAULT_TRACES_FILTERS,\n  resolveTracesDateWindow,\n} from '@/domains/traces/components/traces-explorer/traces-explorer-actions';\nimport { resolveTraceQueryTimeRange } from '@/domains/traces/trace-query-filters';\nimport type { TraceFilterGroup, TraceFilterToken } from '@/domains/traces/trace-query-filters';\nimport type { TraceDatePreset } from '@/domains/traces/types';\nimport type { DataListSort } from '@/ds/components/DataList/data-list-sortable-top-cell';\n\n// Same window as /traces, so switching between the pages keeps the time chip identical.\nconst DEFAULT_DATE_PRESET: TraceDatePreset = DEFAULT_TRACES_FILTERS.datePreset;\n\ntype DateState = { datePreset: TraceDatePreset; dateFrom?: Date; dateTo?: Date };\n\n/**\n * Like the traces list with delta polling: a timer or a window focus would reload every loaded page\n * and reset the cursor chain, so an observability list only reloads to recover from a transient failure.\n */\nexport const observabilityListQueryOptions = {\n  refetchInterval: ({ state }: { state: { error: unknown } }) => recoveryRefetchInterval(state.error),\n  refetchOnWindowFocus: false,\n};\n\n/** The time range, filter and sort state of a spans or threads list. */\nexport function useObservabilityListFilters() {\n  const [dates, setDates] = useState<DateState>({ datePreset: DEFAULT_DATE_PRESET });\n  const [tokens, setTokens] = useState<TraceFilterToken[]>([]);\n  const [groups, setGroups] = useState<TraceFilterGroup[]>([]);\n  const [sort, setSort] = useState<DataListSort>('desc');\n\n  const { datePreset, dateFrom, dateTo } = dates;\n  const fromMs = dateFrom?.getTime();\n  const toMs = dateTo?.getTime();\n  // Rolling presets are resolved against \"now\" only when the range changes, so the query key\n  // (and the cursors issued for it) stays stable while the list scrolls.\n  const timeRange = useMemo(() => {\n    const window = resolveTracesDateWindow(\n      datePreset,\n      fromMs === undefined ? undefined : new Date(fromMs),\n      toMs === undefined ? undefined : new Date(toMs),\n    );\n    return resolveTraceQueryTimeRange(window.dateFrom, window.dateTo, new Date());\n  }, [datePreset, fromMs, toMs]);\n\n  // Switching to `custom` keeps the current dates so the picker opens on them; any other preset drops them.\n  const onDatePresetChange = (preset: TraceDatePreset) =>\n    setDates(current => (preset === 'custom' ? { ...current, datePreset: preset } : { datePreset: preset }));\n  // The picker can report a date right after switching away from `custom`; those are ignored.\n  const onDateChange = (date: Date | undefined, end: 'from' | 'to') =>\n    setDates(current => {\n      if (current.datePreset !== 'custom') return current;\n      return end === 'from' ? { ...current, dateFrom: date } : { ...current, dateTo: date };\n    });\n  const onDateRangeChange = (from: Date | undefined, to: Date | undefined) =>\n    setDates(current => (current.datePreset === 'custom' ? { ...current, dateFrom: from, dateTo: to } : current));\n  const onFiltersChange = (nextTokens: TraceFilterToken[], nextGroups: TraceFilterGroup[]) => {\n    setTokens(nextTokens);\n    setGroups(nextGroups);\n  };\n\n  const contentFiltersApplied = tokens.length > 0 || groups.length > 0;\n  const filtersApplied = contentFiltersApplied || datePreset !== DEFAULT_DATE_PRESET;\n\n  return {\n    datePreset,\n    dateFrom,\n    dateTo,\n    timeRange,\n    /** The window ends at \"now\", so new rows can still land in it. */\n    rolling: dateTo === undefined,\n    tokens,\n    groups,\n    sort,\n    setSort,\n    onDatePresetChange,\n    onDateChange,\n    onDateRangeChange,\n    onFiltersChange,\n    contentFiltersApplied,\n    filtersApplied,\n  };\n}\n"],"mappings":";;;;;;AAYA,IAAM,sBAAuCA,0EAAAA,uBAAuB;;;;;AAQpE,IAAa,gCAAgC;CAC3C,kBAAkB,EAAE,YAA2CC,2CAAAA,wBAAwB,MAAM,KAAK;CAClG,sBAAsB;AACxB;;AAGA,SAAgB,8BAA8B;CAC5C,MAAM,CAAC,OAAO,aAAA,GAAYC,MAAAA,SAAAA,CAAoB,EAAE,YAAY,oBAAoB,CAAC;CACjF,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAA6B,CAAC,CAAC;CAC3D,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAA6B,CAAC,CAAC;CAC3D,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAAuB,MAAM;CAErD,MAAM,EAAE,YAAY,UAAU,WAAW;CACzC,MAAM,SAAS,UAAU,QAAQ;CACjC,MAAM,OAAO,QAAQ,QAAQ;CAG7B,MAAM,aAAA,GAAYC,MAAAA,QAAAA,OAAc;EAC9B,MAAM,SAASC,0EAAAA,wBACb,YACA,WAAW,KAAA,IAAY,KAAA,IAAY,IAAI,KAAK,MAAM,GAClD,SAAS,KAAA,IAAY,KAAA,IAAY,IAAI,KAAK,IAAI,CAChD;EACA,OAAOC,sBAAAA,2BAA2B,OAAO,UAAU,OAAO,wBAAQ,IAAI,KAAK,CAAC;CAC9E,GAAG;EAAC;EAAY;EAAQ;CAAI,CAAC;CAG7B,MAAM,sBAAsB,WAC1B,UAAS,YAAY,WAAW,WAAW;EAAE,GAAG;EAAS,YAAY;CAAO,IAAI,EAAE,YAAY,OAAO,CAAE;CAEzG,MAAM,gBAAgB,MAAwB,QAC5C,UAAS,YAAW;EAClB,IAAI,QAAQ,eAAe,UAAU,OAAO;EAC5C,OAAO,QAAQ,SAAS;GAAE,GAAG;GAAS,UAAU;EAAK,IAAI;GAAE,GAAG;GAAS,QAAQ;EAAK;CACtF,CAAC;CACH,MAAM,qBAAqB,MAAwB,OACjD,UAAS,YAAY,QAAQ,eAAe,WAAW;EAAE,GAAG;EAAS,UAAU;EAAM,QAAQ;CAAG,IAAI,OAAQ;CAC9G,MAAM,mBAAmB,YAAgC,eAAmC;EAC1F,UAAU,UAAU;EACpB,UAAU,UAAU;CACtB;CAEA,MAAM,wBAAwB,OAAO,SAAS,KAAK,OAAO,SAAS;CAGnE,OAAO;EACL;EACA;EACA;EACA;;EAEA,SAAS,WAAW,KAAA;EACpB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,gBAlBqB,yBAAyB,eAAe;CAmB/D;AACF"}
+{"version":3,"file":"use-observability-list-filters.cjs.js","names":["recoveryRefetchInterval","useState","OBSERVABILITY_LIST_DEFAULT_DATE_PRESET","readObservabilityListDates","readObservabilityListFilters","useMemo","readObservabilityListSort","OBSERVABILITY_LIST_SORT_FIELDS","resolveTracesDateWindow","resolveTraceQueryTimeRange","useRef","writeObservabilityListDates","rememberZoom","rangeBeforeZoom","writeObservabilityListFilters","writeObservabilityListSort"],"sources":["../../../../src/domains/observability/hooks/use-observability-list-filters.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { rangeBeforeZoom, rememberZoom } from '../lib/zoom-memory';\nimport type { ZoomMemory } from '../lib/zoom-memory';\nimport {\n  OBSERVABILITY_LIST_DEFAULT_DATE_PRESET,\n  OBSERVABILITY_LIST_SORT_FIELDS,\n  readObservabilityListDates,\n  readObservabilityListFilters,\n  readObservabilityListSort,\n  writeObservabilityListDates,\n  writeObservabilityListFilters,\n  writeObservabilityListSort,\n} from '../observability-list-url-state';\nimport type { ObservabilityListDates, ObservabilityListSort } from '../observability-list-url-state';\nimport { recoveryRefetchInterval } from '@/domains/observability/list-polling';\nimport { resolveTracesDateWindow } from '@/domains/traces/components/traces-explorer/traces-explorer-actions';\nimport { resolveTraceQueryTimeRange } from '@/domains/traces/trace-query-filters';\nimport type { TraceFilterGroup, TraceFilterToken } from '@/domains/traces/trace-query-filters';\nimport type { TraceDatePreset } from '@/domains/traces/types';\nimport type { SetURLSearchParamsLike } from '@/lib/sort/use-url-sort';\n\n/**\n * Like the traces list with delta polling: a timer or a window focus would reload every loaded page\n * and reset the cursor chain, so an observability list only reloads to recover from a transient failure.\n */\nexport const observabilityListQueryOptions = {\n  refetchInterval: ({ state }: { state: { error: unknown } }) => recoveryRefetchInterval(state.error),\n  refetchOnWindowFocus: false,\n};\n\nexport type ObservabilityListUrlState = {\n  searchParams: URLSearchParams;\n  setSearchParams: SetURLSearchParamsLike;\n};\n\n/** The search params of `url`, or of an in-memory store when the host keeps no URL state. */\nfunction useListSearchParams(url: ObservabilityListUrlState | undefined): ObservabilityListUrlState {\n  const [localParams, setLocalParams] = useState(() => new URLSearchParams());\n  if (url) return url;\n  return {\n    searchParams: localParams,\n    setSearchParams: next => setLocalParams(prev => (typeof next === 'function' ? next(prev) : next)),\n  };\n}\n\n/**\n * The time range, filter and sort state of a spans or threads list, kept in the host's URL (same\n * date, sort and group params as /traces) so it survives a reload and can be shared. Without `url`\n * the state lives in memory. A sort on a field outside `sortFields` reads as start time, newest first.\n * `defaultDatePreset` is the range shown when the URL names none (last 7 days unless the host differs);\n * it is left out of the URL like any default.\n */\nexport function useObservabilityListFilters<F extends string = 'startedAt'>(\n  url?: ObservabilityListUrlState,\n  {\n    sortFields,\n    defaultDatePreset = OBSERVABILITY_LIST_DEFAULT_DATE_PRESET,\n  }: { sortFields?: readonly F[]; defaultDatePreset?: TraceDatePreset } = {},\n) {\n  const { searchParams, setSearchParams } = useListSearchParams(url);\n\n  // Decoded values keep their identity while unrelated params (e.g. the open row) change.\n  const datesKey = JSON.stringify(readObservabilityListDates(searchParams, defaultDatePreset));\n  const filtersKey = JSON.stringify(readObservabilityListFilters(searchParams));\n  const { datePreset, dateFrom, dateTo } = useMemo(\n    () => readObservabilityListDates(searchParams, defaultDatePreset),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only re-read when the date params change\n    [datesKey],\n  );\n  const { tokens, groups } = useMemo(\n    () => readObservabilityListFilters(searchParams),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only re-read when the filter params change\n    [filtersKey],\n  );\n  const urlSort = readObservabilityListSort<F | 'startedAt'>(\n    searchParams,\n    sortFields ?? OBSERVABILITY_LIST_SORT_FIELDS,\n  );\n  const sort = useMemo<ObservabilityListSort<F | 'startedAt'>>(\n    () => ({ field: urlSort.field, direction: urlSort.direction }),\n    [urlSort.field, urlSort.direction],\n  );\n\n  const fromMs = dateFrom?.getTime();\n  const toMs = dateTo?.getTime();\n  // Rolling presets are resolved against \"now\" only when the range changes, so the query key\n  // (and the cursors issued for it) stays stable while the list scrolls.\n  const timeRange = useMemo(() => {\n    const window = resolveTracesDateWindow(\n      datePreset,\n      fromMs === undefined ? undefined : new Date(fromMs),\n      toMs === undefined ? undefined : new Date(toMs),\n    );\n    return resolveTraceQueryTimeRange(window.dateFrom, window.dateTo, new Date());\n  }, [datePreset, fromMs, toMs]);\n\n  // react-router resolves even a functional update against the params of the last render, so writes\n  // made in the same tick (zoom sets `custom` then the range; the picker reports the range after a\n  // preset change) build on the pending params instead, like `useState` updaters would.\n  const pending = useRef<URLSearchParams | null>(null);\n  useLayoutEffect(() => {\n    pending.current = null;\n  }, [searchParams]);\n  const update = (write: (next: URLSearchParams) => void) => {\n    const base = pending.current ?? searchParams;\n    const next = new URLSearchParams(base);\n    write(next);\n    if (next.toString() === base.toString()) return;\n    pending.current = next;\n    setSearchParams(next, { replace: true });\n  };\n  const updateDates = (change: (current: ObservabilityListDates) => ObservabilityListDates) =>\n    update(next =>\n      writeObservabilityListDates(next, change(readObservabilityListDates(next, defaultDatePreset)), defaultDatePreset),\n    );\n\n  // Not URL state: a shared or reloaded link has no zoom to undo.\n  const zoomMemory = useRef<ZoomMemory | undefined>(undefined);\n  // A range picked by hand drops the zoom memory, even one that matches the zoomed bounds.\n  const pickDates = (change: (current: ObservabilityListDates) => ObservabilityListDates) => {\n    zoomMemory.current = undefined;\n    updateDates(change);\n  };\n\n  // Switching to `custom` keeps the current dates so the picker opens on them; any other preset drops them.\n  const onDatePresetChange = (preset: TraceDatePreset) =>\n    pickDates(current => (preset === 'custom' ? { ...current, datePreset: preset } : { datePreset: preset }));\n  // The picker can report a date right after switching away from `custom`; those are ignored.\n  const onDateChange = (date: Date | undefined, end: 'from' | 'to') =>\n    pickDates(current => {\n      if (current.datePreset !== 'custom') return current;\n      return end === 'from' ? { ...current, dateFrom: date } : { ...current, dateTo: date };\n    });\n  const onDateRangeChange = (from: Date | undefined, to: Date | undefined) =>\n    pickDates(current => (current.datePreset === 'custom' ? { ...current, dateFrom: from, dateTo: to } : current));\n  /** Narrows the range to a histogram selection, remembering the range to return to on reset. */\n  const onZoom = (from: Date, to: Date) =>\n    updateDates(current => {\n      zoomMemory.current = rememberZoom(zoomMemory.current, current, from, to);\n      return { datePreset: 'custom', dateFrom: from, dateTo: to };\n    });\n  /** Undoes the last histogram zoom, or switches to `defaultPreset` when there is none to undo. */\n  const onDateReset = (defaultPreset: TraceDatePreset) =>\n    updateDates(current => {\n      const before = rangeBeforeZoom(zoomMemory.current, current);\n      zoomMemory.current = undefined;\n      return before ?? { datePreset: defaultPreset };\n    });\n  const onFiltersChange = (nextTokens: TraceFilterToken[], nextGroups: TraceFilterGroup[]) =>\n    update(next => writeObservabilityListFilters(next, { tokens: nextTokens, groups: nextGroups }));\n  const setSort = (next: ObservabilityListSort<F | 'startedAt'>) =>\n    update(params => writeObservabilityListSort(params, next));\n\n  const contentFiltersApplied = tokens.length > 0 || groups.length > 0;\n  const filtersApplied = contentFiltersApplied || datePreset !== defaultDatePreset;\n\n  return {\n    datePreset,\n    dateFrom,\n    dateTo,\n    timeRange,\n    /** The window ends at \"now\", so new rows can still land in it. */\n    rolling: dateTo === undefined,\n    tokens,\n    groups,\n    sort,\n    setSort,\n    onDatePresetChange,\n    onDateChange,\n    onDateRangeChange,\n    onZoom,\n    onDateReset,\n    onFiltersChange,\n    contentFiltersApplied,\n    filtersApplied,\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,gCAAgC;CAC3C,kBAAkB,EAAE,YAA2CA,2CAAAA,wBAAwB,MAAM,KAAK;CAClG,sBAAsB;AACxB;;AAQA,SAAS,oBAAoB,KAAuE;CAClG,MAAM,CAAC,aAAa,mBAAA,GAAkBC,MAAAA,SAAAA,OAAe,IAAI,gBAAgB,CAAC;CAC1E,IAAI,KAAK,OAAO;CAChB,OAAO;EACL,cAAc;EACd,kBAAiB,SAAQ,gBAAe,SAAS,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,IAAK;CAClG;AACF;;;;;;;;AASA,SAAgB,4BACd,KACA,EACE,YACA,oBAAoBC,2DAAAA,2CACkD,CAAC,GACzE;CACA,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,GAAG;CAGjE,MAAM,WAAW,KAAK,UAAUC,2DAAAA,2BAA2B,cAAc,iBAAiB,CAAC;CAC3F,MAAM,aAAa,KAAK,UAAUC,2DAAAA,6BAA6B,YAAY,CAAC;CAC5E,MAAM,EAAE,YAAY,UAAU,YAAA,GAAWC,MAAAA,QAAAA,OACjCF,2DAAAA,2BAA2B,cAAc,iBAAiB,GAEhE,CAAC,QAAQ,CACX;CACA,MAAM,EAAE,QAAQ,YAAA,GAAWE,MAAAA,QAAAA,OACnBD,2DAAAA,6BAA6B,YAAY,GAE/C,CAAC,UAAU,CACb;CACA,MAAM,UAAUE,2DAAAA,0BACd,cACA,cAAcC,2DAAAA,8BAChB;CACA,MAAM,QAAA,GAAOF,MAAAA,QAAAA,QACJ;EAAE,OAAO,QAAQ;EAAO,WAAW,QAAQ;CAAU,IAC5D,CAAC,QAAQ,OAAO,QAAQ,SAAS,CACnC;CAEA,MAAM,SAAS,UAAU,QAAQ;CACjC,MAAM,OAAO,QAAQ,QAAQ;CAG7B,MAAM,aAAA,GAAYA,MAAAA,QAAAA,OAAc;EAC9B,MAAM,SAASG,0EAAAA,wBACb,YACA,WAAW,KAAA,IAAY,KAAA,IAAY,IAAI,KAAK,MAAM,GAClD,SAAS,KAAA,IAAY,KAAA,IAAY,IAAI,KAAK,IAAI,CAChD;EACA,OAAOC,sBAAAA,2BAA2B,OAAO,UAAU,OAAO,wBAAQ,IAAI,KAAK,CAAC;CAC9E,GAAG;EAAC;EAAY;EAAQ;CAAI,CAAC;CAK7B,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAA+B,IAAI;CACnD,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,QAAQ,UAAU;CACpB,GAAG,CAAC,YAAY,CAAC;CACjB,MAAM,UAAU,UAA2C;EACzD,MAAM,OAAO,QAAQ,WAAW;EAChC,MAAM,OAAO,IAAI,gBAAgB,IAAI;EACrC,MAAM,IAAI;EACV,IAAI,KAAK,SAAS,MAAM,KAAK,SAAS,GAAG;EACzC,QAAQ,UAAU;EAClB,gBAAgB,MAAM,EAAE,SAAS,KAAK,CAAC;CACzC;CACA,MAAM,eAAe,WACnB,QAAO,SACLC,2DAAAA,4BAA4B,MAAM,OAAOR,2DAAAA,2BAA2B,MAAM,iBAAiB,CAAC,GAAG,iBAAiB,CAClH;CAGF,MAAM,cAAA,GAAaO,MAAAA,OAAAA,CAA+B,KAAA,CAAS;CAE3D,MAAM,aAAa,WAAwE;EACzF,WAAW,UAAU,KAAA;EACrB,YAAY,MAAM;CACpB;CAGA,MAAM,sBAAsB,WAC1B,WAAU,YAAY,WAAW,WAAW;EAAE,GAAG;EAAS,YAAY;CAAO,IAAI,EAAE,YAAY,OAAO,CAAE;CAE1G,MAAM,gBAAgB,MAAwB,QAC5C,WAAU,YAAW;EACnB,IAAI,QAAQ,eAAe,UAAU,OAAO;EAC5C,OAAO,QAAQ,SAAS;GAAE,GAAG;GAAS,UAAU;EAAK,IAAI;GAAE,GAAG;GAAS,QAAQ;EAAK;CACtF,CAAC;CACH,MAAM,qBAAqB,MAAwB,OACjD,WAAU,YAAY,QAAQ,eAAe,WAAW;EAAE,GAAG;EAAS,UAAU;EAAM,QAAQ;CAAG,IAAI,OAAQ;;CAE/G,MAAM,UAAU,MAAY,OAC1B,aAAY,YAAW;EACrB,WAAW,UAAUE,8CAAAA,aAAa,WAAW,SAAS,SAAS,MAAM,EAAE;EACvE,OAAO;GAAE,YAAY;GAAU,UAAU;GAAM,QAAQ;EAAG;CAC5D,CAAC;;CAEH,MAAM,eAAe,kBACnB,aAAY,YAAW;EACrB,MAAM,SAASC,8CAAAA,gBAAgB,WAAW,SAAS,OAAO;EAC1D,WAAW,UAAU,KAAA;EACrB,OAAO,UAAU,EAAE,YAAY,cAAc;CAC/C,CAAC;CACH,MAAM,mBAAmB,YAAgC,eACvD,QAAO,SAAQC,2DAAAA,8BAA8B,MAAM;EAAE,QAAQ;EAAY,QAAQ;CAAW,CAAC,CAAC;CAChG,MAAM,WAAW,SACf,QAAO,WAAUC,2DAAAA,2BAA2B,QAAQ,IAAI,CAAC;CAE3D,MAAM,wBAAwB,OAAO,SAAS,KAAK,OAAO,SAAS;CAGnE,OAAO;EACL;EACA;EACA;EACA;;EAEA,SAAS,WAAW,KAAA;EACpB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,gBApBqB,yBAAyB,eAAe;CAqB/D;AACF"}