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

package/dist/domains/observability/saved-views/use-hosted-saved-views.es.js

@@ -0,0 +1,232 @@
+import { SavedViewNameTakenError, savedViewsQueryKey } from "./saved-views-source.es.js";
+import { applySavedView, savedViewFromSearchParams } from "../saved-view-state.es.js";
+import { n as savedViewNameSchema } from "../../../saved-view-schema-eJXlRRel.js";
+import { useRef, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+// src/domains/observability/saved-views/use-hosted-saved-views.ts
+/** Same limit as the saved view schema in `@mastra/core`, checked before a request is made. */
+var SAVED_VIEW_STATE_MAX_BYTES = 16384;
+var NEW_VIEW_NAME = "Untitled view";
+var SAVED_VIEW_TOO_LARGE_MESSAGE = "This view is too large to save (16 KiB max). Remove some filters or columns.";
+var SAVE_FAILED_MESSAGE = "Could not save the view. Try again.";
+var DELETE_FAILED_MESSAGE = "Could not delete the view. Try again.";
+var stateBytes = (state) => new TextEncoder().encode(JSON.stringify(state)).length;
+/** The filters a view's hover summary lists: its top-level filters (groups are counted separately). */
+function summaryFilters(state) {
+	return state.filters.flatMap((node, index) => "nodes" in node ? [] : [{
+		id: `${index}`,
+		fieldId: node.fieldId,
+		operatorId: node.operatorId ?? (Array.isArray(node.value) ? "in" : "is"),
+		value: node.value
+	}]);
+}
+/** The parts of a view that compare equal when they set the same URL and columns. */
+function comparable(state, withColumns) {
+	const { filters, dateRange, sort, options, columns } = state;
+	return JSON.stringify({
+		filters,
+		dateRange,
+		sort,
+		options,
+		columns: withColumns ? columns : void 0
+	});
+}
+function errorMessage(error, name) {
+	return error instanceof SavedViewNameTakenError ? `A view named "${name}" already exists.` : SAVE_FAILED_MESSAGE;
+}
+/** The unsaved state shown in the bar: a view being created, or edits to the active view. */
+function draftOf(current, creatingName, editedRecord) {
+	const unsaved = {
+		filters: summaryFilters(current),
+		settings: { state: current }
+	};
+	if (creatingName !== void 0) return {
+		name: creatingName,
+		...unsaved
+	};
+	if (editedRecord) return {
+		viewId: editedRecord.id,
+		name: editedRecord.name,
+		...unsaved
+	};
+}
+var validName = (name) => {
+	const parsed = savedViewNameSchema.safeParse(name);
+	return parsed.success ? parsed.data : void 0;
+};
+/**
+* Saved views of one observability page, stored by the host's `SavedViewsSource`. The page URL is
+* the draft: picking a view writes its state to the URL (and its columns to the column picker), and
+* the view shows unsaved changes while the URL differs from it.
+*/
+function useHostedSavedViews({ page, source, queryKeyScope, searchParams, setSearchParams, columns, defaultDatePreset, canEdit = () => true }) {
+	const queryClient = useQueryClient();
+	const queryKey = savedViewsQueryKey(queryKeyScope, page);
+	const { data: records = [] } = useQuery({
+		queryKey,
+		queryFn: () => source.list(page)
+	});
+	const [picked, setPicked] = useState();
+	const [creatingName, setCreatingName] = useState();
+	const [error, setError] = useState();
+	const [pending, setPending] = useState(false);
+	const choiceRef = useRef(0);
+	const [appliedOver, setAppliedOver] = useState();
+	const current = savedViewFromSearchParams(page, searchParams, { columns: columns?.preferences });
+	const matchesUrl = (state) => {
+		const applied = applySavedView(state, new URLSearchParams(), { defaultDatePreset });
+		const normalized = savedViewFromSearchParams(page, applied.params, { columns: applied.columns });
+		const withColumns = applied.columns !== void 0;
+		return comparable(normalized, withColumns) === comparable(current, withColumns);
+	};
+	const activeRecord = picked ? records.find((record) => record.id === picked.id) : records.find((record) => matchesUrl(record.state));
+	const activeMatches = activeRecord !== void 0 && matchesUrl(activeRecord.state);
+	const awaitingUrl = appliedOver !== void 0 && appliedOver === searchParams && !activeMatches;
+	if (appliedOver !== void 0 && !awaitingUrl) setAppliedOver(void 0);
+	const activeUnsaved = activeRecord !== void 0 && !activeMatches && !awaitingUrl;
+	const toView = (record) => ({
+		id: record.id,
+		name: record.name,
+		filters: summaryFilters(record.state),
+		settings: {
+			state: record.state,
+			record
+		}
+	});
+	const views = records.map(toView);
+	const activeView = activeRecord ? toView(activeRecord) : void 0;
+	const draft = draftOf(current, creatingName, activeUnsaved ? activeRecord : void 0);
+	const applyState = (state) => {
+		const applied = applySavedView(state, searchParams, { defaultDatePreset });
+		setAppliedOver(searchParams);
+		setSearchParams((previous) => applySavedView(state, previous, { defaultDatePreset }).params);
+		if (applied.columns && columns) columns.setPreferences(applied.columns);
+	};
+	const storeRecord = (record) => queryClient.setQueryData(queryKey, (list = []) => list.some((item) => item.id === record.id) ? list.map((item) => item.id === record.id ? record : item) : [record, ...list]);
+	const run = async (task, onError) => {
+		setPending(true);
+		setError(void 0);
+		try {
+			return await task();
+		} catch (cause) {
+			setError(onError(cause));
+			return;
+		} finally {
+			setPending(false);
+			queryClient.invalidateQueries({ queryKey });
+		}
+	};
+	const fitsSizeLimit = (state) => {
+		if (stateBytes(state) <= 16384) return true;
+		setError(SAVED_VIEW_TOO_LARGE_MESSAGE);
+		return false;
+	};
+	const select = (viewId) => {
+		choiceRef.current += 1;
+		setCreatingName(void 0);
+		setError(void 0);
+		if (viewId === void 0) {
+			setPicked({ id: void 0 });
+			applyState({
+				schemaVersion: 1,
+				page,
+				filters: []
+			});
+			columns?.resetColumns();
+			return;
+		}
+		const record = records.find((item) => item.id === viewId);
+		if (!record) return;
+		setPicked({ id: record.id });
+		applyState(record.state);
+	};
+	return {
+		views,
+		activeView,
+		draft,
+		unsaved: creatingName !== void 0 || activeUnsaved,
+		error,
+		pending,
+		applied: draft ?? activeView,
+		select,
+		create: () => {
+			setError(void 0);
+			setCreatingName(NEW_VIEW_NAME);
+		},
+		edit: (viewId) => {
+			if (viewId !== activeRecord?.id) select(viewId);
+		},
+		change: ({ name }) => {
+			if (name === void 0 || creatingName === void 0) return;
+			setError(void 0);
+			setCreatingName(name);
+		},
+		save: async () => {
+			if (pending || !fitsSizeLimit(current)) return;
+			if (creatingName !== void 0) {
+				const name = validName(creatingName) ?? NEW_VIEW_NAME;
+				const choice = choiceRef.current;
+				const record = await run(() => source.create({
+					name,
+					state: current
+				}), (cause) => errorMessage(cause, name));
+				if (!record) return;
+				storeRecord(record);
+				if (choice !== choiceRef.current) return;
+				setCreatingName(void 0);
+				setPicked({ id: record.id });
+				return;
+			}
+			if (!activeRecord || !activeUnsaved || !canEdit(activeRecord)) return;
+			const { id, name } = activeRecord;
+			const record = await run(() => source.update(id, { state: current }), (cause) => errorMessage(cause, name));
+			if (record) storeRecord(record);
+		},
+		discard: () => {
+			choiceRef.current += 1;
+			setError(void 0);
+			if (creatingName !== void 0) setCreatingName(void 0);
+			else if (activeRecord) applyState(activeRecord.state);
+		},
+		rename: async (viewId, rawName) => {
+			const name = validName(rawName);
+			const record = records.find((item) => item.id === viewId);
+			if (!name || !record || pending || !canEdit(record)) return false;
+			if (name === record.name) return true;
+			const renamed = await run(() => source.update(viewId, { name }), (cause) => errorMessage(cause, name));
+			if (!renamed) return false;
+			storeRecord(renamed);
+			return true;
+		},
+		duplicate: async (viewId) => {
+			const original = records.find((item) => item.id === viewId);
+			if (!original || pending || !fitsSizeLimit(original.state)) return;
+			const name = validName(`${original.name} copy`) ?? original.name;
+			const choice = choiceRef.current;
+			const copy = await run(() => source.create({
+				name,
+				state: original.state
+			}), (cause) => errorMessage(cause, name));
+			if (!copy) return;
+			storeRecord(copy);
+			if (choice !== choiceRef.current) return;
+			setCreatingName(void 0);
+			setPicked({ id: copy.id });
+			applyState(copy.state);
+		},
+		remove: async (viewId) => {
+			const record = records.find((item) => item.id === viewId);
+			if (!record || pending || !canEdit(record)) return;
+			choiceRef.current += 1;
+			if (!await run(async () => {
+				await source.remove(viewId);
+				return true;
+			}, () => DELETE_FAILED_MESSAGE)) return;
+			queryClient.setQueryData(queryKey, (list = []) => list.filter((item) => item.id !== viewId));
+			if (activeRecord?.id === viewId) setPicked({ id: void 0 });
+		}
+	};
+}
+export { SAVED_VIEW_STATE_MAX_BYTES, SAVED_VIEW_TOO_LARGE_MESSAGE, useHostedSavedViews };
+
+//# sourceMappingURL=use-hosted-saved-views.es.js.map

package/dist/domains/observability/saved-views/use-hosted-saved-views.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hosted-saved-views.es.js","names":[],"sources":["../../../../src/domains/observability/saved-views/use-hosted-saved-views.ts"],"sourcesContent":["import type { SavedViewPage, SavedViewState } from '@mastra/core/storage';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\nimport { useRef, useState } from 'react';\nimport { applySavedView, savedViewFromSearchParams } from '../saved-view-state';\nimport { SavedViewNameTakenError, savedViewsQueryKey } from './saved-views-source';\nimport type { SavedViewRecord, SavedViewsContextValue } from './saved-views-source';\nimport type { TraceColumnPreferences } from '@/domains/traces/trace-list-columns';\nimport type { FilterBarItem } from '@/ds/components/FilterBar/types';\nimport { savedViewNameSchema } from '@/ds/components/SavedViews/saved-view-schema';\nimport type { SavedView } from '@/ds/components/SavedViews/saved-view-schema';\nimport type { SavedViewDraft, SavedViewsController } from '@/ds/components/SavedViews/use-saved-views';\nimport type { SetURLSearchParamsLike } from '@/lib/sort/use-url-sort';\n\n/** Same limit as the saved view schema in `@mastra/core`, checked before a request is made. */\nexport const SAVED_VIEW_STATE_MAX_BYTES = 16 * 1024;\n\nconst NEW_VIEW_NAME = 'Untitled view';\nexport const SAVED_VIEW_TOO_LARGE_MESSAGE =\n  'This view is too large to save (16 KiB max). Remove some filters or columns.';\nconst SAVE_FAILED_MESSAGE = 'Could not save the view. Try again.';\nconst DELETE_FAILED_MESSAGE = 'Could not delete the view. Try again.';\n\n/** A view's state, and for a stored view its record. */\nexport type HostedSavedViewSettings = { state: SavedViewState; record?: SavedViewRecord };\n\nexport type SavedViewColumnsControl = {\n  preferences: TraceColumnPreferences;\n  setPreferences: (next: TraceColumnPreferences) => void;\n  /** Back to the page's default columns, when the page default is picked. */\n  resetColumns: () => void;\n};\n\nexport type UseHostedSavedViewsArgs = SavedViewsContextValue & {\n  page: SavedViewPage;\n  searchParams: URLSearchParams;\n  setSearchParams: SetURLSearchParamsLike;\n  /** The page's column picker; omitted on pages with fixed columns. */\n  columns?: SavedViewColumnsControl;\n  /** The range the page shows when the URL names none, when the host's differs from the page's own. */\n  defaultDatePreset?: string;\n};\n\nconst stateBytes = (state: SavedViewState) => new TextEncoder().encode(JSON.stringify(state)).length;\n\n/** The filters a view's hover summary lists: its top-level filters (groups are counted separately). */\nfunction summaryFilters(state: SavedViewState): FilterBarItem[] {\n  return state.filters.flatMap((node, index) =>\n    'nodes' in node\n      ? []\n      : [\n          {\n            id: `${index}`,\n            fieldId: node.fieldId,\n            operatorId: node.operatorId ?? (Array.isArray(node.value) ? 'in' : 'is'),\n            value: node.value,\n          },\n        ],\n  );\n}\n\n/** The parts of a view that compare equal when they set the same URL and columns. */\nfunction comparable(state: SavedViewState, withColumns: boolean): string {\n  const { filters, dateRange, sort, options, columns } = state;\n  return JSON.stringify({ filters, dateRange, sort, options, columns: withColumns ? columns : undefined });\n}\n\nfunction errorMessage(error: unknown, name: string): string {\n  return error instanceof SavedViewNameTakenError ? `A view named \"${name}\" already exists.` : SAVE_FAILED_MESSAGE;\n}\n\n/** What the user picked: a saved view, or the page default when `id` is undefined. */\ntype Picked = { id: string | undefined };\n\n/** The unsaved state shown in the bar: a view being created, or edits to the active view. */\nfunction draftOf(\n  current: SavedViewState,\n  creatingName: string | undefined,\n  editedRecord: SavedViewRecord | undefined,\n): SavedViewDraft<HostedSavedViewSettings> | undefined {\n  const unsaved = { filters: summaryFilters(current), settings: { state: current } };\n  if (creatingName !== undefined) return { name: creatingName, ...unsaved };\n  if (editedRecord) return { viewId: editedRecord.id, name: editedRecord.name, ...unsaved };\n  return undefined;\n}\n\nconst validName = (name: string) => {\n  const parsed = savedViewNameSchema.safeParse(name);\n  return parsed.success ? parsed.data : undefined;\n};\n\n/**\n * Saved views of one observability page, stored by the host's `SavedViewsSource`. The page URL is\n * the draft: picking a view writes its state to the URL (and its columns to the column picker), and\n * the view shows unsaved changes while the URL differs from it.\n */\nexport function useHostedSavedViews({\n  page,\n  source,\n  queryKeyScope,\n  searchParams,\n  setSearchParams,\n  columns,\n  defaultDatePreset,\n  canEdit = () => true,\n}: UseHostedSavedViewsArgs): SavedViewsController<HostedSavedViewSettings> {\n  const queryClient = useQueryClient();\n  const queryKey = savedViewsQueryKey(queryKeyScope, page);\n  const { data: records = [] } = useQuery({ queryKey, queryFn: () => source.list(page) });\n\n  // Nothing picked yet: the view matching the URL (e.g. after a reload) is active.\n  // `{ id: undefined }`: the page default was picked.\n  const [picked, setPicked] = useState<Picked>();\n  const [creatingName, setCreatingName] = useState<string>();\n  const [error, setError] = useState<string>();\n  const [pending, setPending] = useState(false);\n  // Bumped whenever the user picks or leaves a view, so a request that settles afterwards does not\n  // switch the page back to the view it created.\n  const choiceRef = useRef(0);\n  // The search params a view was applied over. A host can render the new URL a render after the\n  // navigation that set it (a data router does), so until it does the old URL says nothing about\n  // whether the view has unsaved changes.\n  const [appliedOver, setAppliedOver] = useState<URLSearchParams>();\n\n  const current = savedViewFromSearchParams(page, searchParams, { columns: columns?.preferences });\n\n  // A view as the page would hold it once applied, so a view saved by an older page (or with stale\n  // parts) still compares equal to the URL it sets.\n  const matchesUrl = (state: SavedViewState) => {\n    const applied = applySavedView(state, new URLSearchParams(), { defaultDatePreset });\n    const normalized = savedViewFromSearchParams(page, applied.params, { columns: applied.columns });\n    const withColumns = applied.columns !== undefined;\n    return comparable(normalized, withColumns) === comparable(current, withColumns);\n  };\n\n  const activeRecord = picked\n    ? records.find(record => record.id === picked.id)\n    : records.find(record => matchesUrl(record.state));\n  const activeMatches = activeRecord !== undefined && matchesUrl(activeRecord.state);\n  const awaitingUrl = appliedOver !== undefined && appliedOver === searchParams && !activeMatches;\n  if (appliedOver !== undefined && !awaitingUrl) setAppliedOver(undefined);\n  const activeUnsaved = activeRecord !== undefined && !activeMatches && !awaitingUrl;\n\n  const toView = (record: SavedViewRecord): SavedView<HostedSavedViewSettings> => ({\n    id: record.id,\n    name: record.name,\n    filters: summaryFilters(record.state),\n    settings: { state: record.state, record },\n  });\n  const views = records.map(toView);\n  const activeView = activeRecord ? toView(activeRecord) : undefined;\n\n  const draft = draftOf(current, creatingName, activeUnsaved ? activeRecord : undefined);\n\n  const applyState = (state: SavedViewState) => {\n    const applied = applySavedView(state, searchParams, { defaultDatePreset });\n    setAppliedOver(searchParams);\n    setSearchParams(previous => applySavedView(state, previous, { defaultDatePreset }).params);\n    if (applied.columns && columns) columns.setPreferences(applied.columns);\n  };\n\n  const storeRecord = (record: SavedViewRecord) =>\n    queryClient.setQueryData<SavedViewRecord[]>(queryKey, (list = []) =>\n      list.some(item => item.id === record.id)\n        ? list.map(item => (item.id === record.id ? record : item))\n        : [record, ...list],\n    );\n\n  const run = async <T>(task: () => Promise<T>, onError: (error: unknown) => string): Promise<T | undefined> => {\n    setPending(true);\n    setError(undefined);\n    try {\n      return await task();\n    } catch (cause) {\n      setError(onError(cause));\n      return undefined;\n    } finally {\n      setPending(false);\n      void queryClient.invalidateQueries({ queryKey });\n    }\n  };\n\n  const fitsSizeLimit = (state: SavedViewState) => {\n    if (stateBytes(state) <= SAVED_VIEW_STATE_MAX_BYTES) return true;\n    setError(SAVED_VIEW_TOO_LARGE_MESSAGE);\n    return false;\n  };\n\n  const select = (viewId: string | undefined) => {\n    choiceRef.current += 1;\n    setCreatingName(undefined);\n    setError(undefined);\n    if (viewId === undefined) {\n      setPicked({ id: undefined });\n      applyState({ schemaVersion: 1, page, filters: [] });\n      columns?.resetColumns();\n      return;\n    }\n    const record = records.find(item => item.id === viewId);\n    if (!record) return;\n    setPicked({ id: record.id });\n    applyState(record.state);\n  };\n\n  return {\n    views,\n    activeView,\n    draft,\n    unsaved: creatingName !== undefined || activeUnsaved,\n    error,\n    pending,\n    applied: draft ?? activeView,\n    select,\n    create: () => {\n      setError(undefined);\n      setCreatingName(NEW_VIEW_NAME);\n    },\n    edit: viewId => {\n      if (viewId !== activeRecord?.id) select(viewId);\n    },\n    change: ({ name }) => {\n      if (name === undefined || creatingName === undefined) return;\n      setError(undefined);\n      setCreatingName(name);\n    },\n    save: async () => {\n      if (pending || !fitsSizeLimit(current)) return;\n      if (creatingName !== undefined) {\n        const name = validName(creatingName) ?? NEW_VIEW_NAME;\n        const choice = choiceRef.current;\n        const record = await run(\n          () => source.create({ name, state: current }),\n          cause => errorMessage(cause, name),\n        );\n        if (!record) return;\n        storeRecord(record);\n        if (choice !== choiceRef.current) return;\n        setCreatingName(undefined);\n        setPicked({ id: record.id });\n        return;\n      }\n      if (!activeRecord || !activeUnsaved || !canEdit(activeRecord)) return;\n      const { id, name } = activeRecord;\n      const record = await run(\n        () => source.update(id, { state: current }),\n        cause => errorMessage(cause, name),\n      );\n      if (record) storeRecord(record);\n    },\n    discard: () => {\n      choiceRef.current += 1;\n      setError(undefined);\n      if (creatingName !== undefined) setCreatingName(undefined);\n      else if (activeRecord) applyState(activeRecord.state);\n    },\n    rename: async (viewId, rawName) => {\n      const name = validName(rawName);\n      const record = records.find(item => item.id === viewId);\n      if (!name || !record || pending || !canEdit(record)) return false;\n      if (name === record.name) return true;\n      const renamed = await run(\n        () => source.update(viewId, { name }),\n        cause => errorMessage(cause, name),\n      );\n      if (!renamed) return false;\n      storeRecord(renamed);\n      return true;\n    },\n    duplicate: async viewId => {\n      const original = records.find(item => item.id === viewId);\n      if (!original || pending || !fitsSizeLimit(original.state)) return;\n      const name = validName(`${original.name} copy`) ?? original.name;\n      const choice = choiceRef.current;\n      const copy = await run(\n        () => source.create({ name, state: original.state }),\n        cause => errorMessage(cause, name),\n      );\n      if (!copy) return;\n      storeRecord(copy);\n      if (choice !== choiceRef.current) return;\n      setCreatingName(undefined);\n      setPicked({ id: copy.id });\n      applyState(copy.state);\n    },\n    remove: async viewId => {\n      const record = records.find(item => item.id === viewId);\n      if (!record || pending || !canEdit(record)) return;\n      choiceRef.current += 1;\n      const removed = await run(\n        async () => {\n          await source.remove(viewId);\n          return true;\n        },\n        () => DELETE_FAILED_MESSAGE,\n      );\n      if (!removed) return;\n      queryClient.setQueryData<SavedViewRecord[]>(queryKey, (list = []) => list.filter(item => item.id !== viewId));\n      // The page keeps its filters; the default tab is picked so the deleted view is not re-matched.\n      if (activeRecord?.id === viewId) setPicked({ id: undefined });\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/domains/observability/saved-views.cjs.js

@@ -0,0 +1,7 @@
+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_observability_saved_views = require("../../observability-saved-views-CwCii7hh.cjs");
+const require_domains_observability_saved_views_saved_views_provider = require("./saved-views/saved-views-provider.cjs.js");
+exports.ObservabilitySavedViews = require_observability_saved_views.ObservabilitySavedViews;
+exports.SavedViewNameTakenError = require_domains_observability_saved_views_saved_views_source.SavedViewNameTakenError;
+exports.SavedViewsProvider = require_domains_observability_saved_views_saved_views_provider.SavedViewsProvider;

package/dist/domains/observability/saved-views.d.ts

@@ -0,0 +1 @@
+export * from '../../src/domains/observability/saved-views/index';

package/dist/domains/observability/saved-views.es.js

@@ -0,0 +1,4 @@
+import { SavedViewNameTakenError } from "./saved-views/saved-views-source.es.js";
+import { t as ObservabilitySavedViews } from "../../observability-saved-views-Bo5kLN20.js";
+import { SavedViewsProvider } from "./saved-views/saved-views-provider.es.js";
+export { ObservabilitySavedViews, SavedViewNameTakenError, SavedViewsProvider };

package/dist/domains/observability.cjs.js

@@ -1,4 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_observability_saved_views_saved_views_source = require("./observability/saved-views/saved-views-source.cjs.js");
+const require_observability_saved_views = require("../observability-saved-views-CwCii7hh.cjs");
+const require_domains_observability_saved_views_saved_views_provider = require("./observability/saved-views/saved-views-provider.cjs.js");
 const require_domains_observability_components_observability_capability_gate = require("./observability/components/observability-capability-gate.cjs.js");
 const require_domains_observability_components_observability_list_body = require("./observability/components/observability-list-body.cjs.js");
 const require_domains_observability_hooks_use_observability_views = require("./observability/hooks/use-observability-views.cjs.js");
@@ -18,6 +21,9 @@ exports.OBSERVABILITY_VIEW_LABELS = require_domains_observability_observability_
 exports.ObservabilityCapabilityGate = require_domains_observability_components_observability_capability_gate.ObservabilityCapabilityGate;
 exports.ObservabilityListBody = require_domains_observability_components_observability_list_body.ObservabilityListBody;
 exports.ObservabilityPageLayout = require_domains_observability_components_observability_page_layout.ObservabilityPageLayout;
+exports.ObservabilitySavedViews = require_observability_saved_views.ObservabilitySavedViews;
+exports.SavedViewNameTakenError = require_domains_observability_saved_views_saved_views_source.SavedViewNameTakenError;
+exports.SavedViewsProvider = require_domains_observability_saved_views_saved_views_provider.SavedViewsProvider;
 exports.fixedWindowRefetchInterval = require_domains_observability_list_polling.fixedWindowRefetchInterval;
 exports.isRejectedListRequest = require_domains_observability_list_polling.isRejectedListRequest;
 exports.listHeadQueryKey = require_domains_observability_hooks_use_list_head_poll.listHeadQueryKey;

package/dist/domains/observability.es.js

@@ -1,3 +1,6 @@
+import { SavedViewNameTakenError } from "./observability/saved-views/saved-views-source.es.js";
+import { t as ObservabilitySavedViews } from "../observability-saved-views-Bo5kLN20.js";
+import { SavedViewsProvider } from "./observability/saved-views/saved-views-provider.es.js";
 import { ObservabilityCapabilityGate } from "./observability/components/observability-capability-gate.es.js";
 import { ObservabilityListBody } from "./observability/components/observability-list-body.es.js";
 import { useObservabilityViews } from "./observability/hooks/use-observability-views.es.js";
@@ -8,4 +11,4 @@ import { observabilityListQueryOptions, useObservabilityListFilters } from "./ob
 import { mergeHeadRows } from "./observability/merge-head-rows.es.js";
 import { OBSERVABILITY_VIEW_LABELS, observabilityViewCrumbLabel } from "./observability/observability-crumbs.es.js";
 import { readSpanSelection, readThreadSelection, spanTraceSearch, withSpanSelection, withThreadSelection } from "./observability/observability-selection-params.es.js";
-export { OBSERVABILITY_LIST_HEAD_LIMIT, OBSERVABILITY_LIST_HEAD_MAX_ROWS, OBSERVABILITY_LIST_HORIZON_MS, OBSERVABILITY_LIST_POLL_INTERVAL_MS, OBSERVABILITY_LIST_REFETCH_INTERVAL_MS, OBSERVABILITY_VIEW_LABELS, ObservabilityCapabilityGate, ObservabilityListBody, ObservabilityPageLayout, fixedWindowRefetchInterval, isRejectedListRequest, listHeadQueryKey, mergeHeadRows, observabilityListQueryOptions, observabilityViewCrumbLabel, readSpanSelection, readThreadSelection, recoveryRefetchInterval, spanTraceSearch, useListAnchor, useListHeadPoll, useObservabilityListFilters, useObservabilityViews, withSpanSelection, withThreadSelection };
+export { OBSERVABILITY_LIST_HEAD_LIMIT, OBSERVABILITY_LIST_HEAD_MAX_ROWS, OBSERVABILITY_LIST_HORIZON_MS, OBSERVABILITY_LIST_POLL_INTERVAL_MS, OBSERVABILITY_LIST_REFETCH_INTERVAL_MS, OBSERVABILITY_VIEW_LABELS, ObservabilityCapabilityGate, ObservabilityListBody, ObservabilityPageLayout, ObservabilitySavedViews, SavedViewNameTakenError, SavedViewsProvider, fixedWindowRefetchInterval, isRejectedListRequest, listHeadQueryKey, mergeHeadRows, observabilityListQueryOptions, observabilityViewCrumbLabel, readSpanSelection, readThreadSelection, recoveryRefetchInterval, spanTraceSearch, useListAnchor, useListHeadPoll, useObservabilityListFilters, useObservabilityViews, withSpanSelection, withThreadSelection };

package/dist/domains/scores/components/span-scoring.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_toast_api = require("../../../toast-api-Bv87KHu_.cjs");
 const require_Dialog = require("../../../Dialog-CjaiCrkv.cjs");
 const require_Notice = require("../../../Notice-DWNeCe-t.cjs");
-const require_combobox = require("../../../combobox-C-E7_q4j.cjs");
+const require_combobox = require("../../../combobox-8kNAJFlj.cjs");
 const require_components_Text = require("../../../components/Text.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/scores/components/span-scoring.es.js

@@ -1,7 +1,7 @@
 import { t as toast } from "../../../toast-api-WhxnAT9F.js";
 import { n as DialogBody, o as DialogDescription, p as DialogAction, r as DialogCancel, s as DialogFooter } from "../../../Dialog-CKtTR8h3.js";
 import { t as Notice } from "../../../Notice-CyKngbbv.js";
-import { t as Combobox } from "../../../combobox-CDS2pBqz.js";
+import { t as Combobox } from "../../../combobox-wFudhN8F.js";
 import { TextAndIcon } from "../../../components/Text.es.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/domains/scores/components/trace-scores-list.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
 const require_icons_ScorersIcon = require("../../../icons/ScorersIcon.cjs.js");
-const require_MarkdownRenderer = require("../../../MarkdownRenderer-BgqKfmRm.cjs");
+const require_MarkdownRenderer = require("../../../MarkdownRenderer-CS6u5drO.cjs");
 const require_spinner = require("../../../spinner-C8ZxiA5C.cjs");
 const require_data_list = require("../../../data-list-BkimqE_P.cjs");
 const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");

package/dist/domains/scores/components/trace-scores-list.es.js

@@ -1,6 +1,6 @@
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
 import { ScorersIcon } from "../../../icons/ScorersIcon.es.js";
-import { t as MarkdownRenderer } from "../../../MarkdownRenderer-DKCDXaLy.js";
+import { t as MarkdownRenderer } from "../../../MarkdownRenderer-DME2xKTk.js";
 import { t as Spinner } from "../../../spinner-CnLgLj9R.js";
 import { t as DataList } from "../../../data-list-evmf5xWI.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../../components/HoverCard.es.js";

package/dist/domains/scores/components/trace-scores-tab.cjs.js

@@ -8,7 +8,7 @@ const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
 const require_EmptyState = require("../../../EmptyState-DxDHlYqD.cjs");
 const require_spinner = require("../../../spinner-C8ZxiA5C.cjs");
 const require_data_list = require("../../../data-list-BkimqE_P.cjs");
-const require_MetricsKpiCard = require("../../../MetricsKpiCard-Uw0nyMgW.cjs");
+const require_MetricsKpiCard = require("../../../MetricsKpiCard-By_-sagx.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mastra_react_hooks_scores = require("@mastra/react/hooks/scores");

package/dist/domains/scores/components/trace-scores-tab.es.js

@@ -7,7 +7,7 @@ import { t as Txt } from "../../../Txt-BM6TVV_c.js";
 import { n as EmptyState } from "../../../EmptyState-P-Gy898T.js";
 import { t as Spinner } from "../../../spinner-CnLgLj9R.js";
 import { t as DataList } from "../../../data-list-evmf5xWI.js";
-import { t as MetricsKpiCard } from "../../../MetricsKpiCard-Idxjl-dn.js";
+import { t as MetricsKpiCard } from "../../../MetricsKpiCard-OHbAElTl.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTraceSpanScores } from "@mastra/react/hooks/scores";

package/dist/domains/skills/skill-simple-form.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Txt = require("../../Txt-BnoSqxKE.cjs");
 const require_input = require("../../input-2hRXcZIu.cjs");
-const require_MarkdownRenderer = require("../../MarkdownRenderer-BgqKfmRm.cjs");
+const require_MarkdownRenderer = require("../../MarkdownRenderer-CS6u5drO.cjs");
 const require_CodeEditor = require("../../CodeEditor-CJ9jC9lu.cjs");
 const require_components_Field = require("../../components/Field.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/skills/skill-simple-form.es.js

@@ -1,6 +1,6 @@
 import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { t as Input } from "../../input-0l1uzOBZ.js";
-import { t as MarkdownRenderer } from "../../MarkdownRenderer-DKCDXaLy.js";
+import { t as MarkdownRenderer } from "../../MarkdownRenderer-DME2xKTk.js";
 import { t as CodeEditor } from "../../CodeEditor-CPVxj7WS.js";
 import { Field, FieldLabel } from "../../components/Field.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/domains/spans/components/spans-explorer-body.cjs.js

@@ -1,8 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_observability_observability_list_url_state = require("../../observability/observability-list-url-state.cjs.js");
+const require_domains_spans_span_filters = require("../span-filters.cjs.js");
+const require_domains_traces_trace_list_columns = require("../../traces/trace-list-columns.cjs.js");
+const require_observability_saved_views = require("../../../observability-saved-views-CwCii7hh.cjs");
 const require_domains_observability_components_observability_list_body = require("../../observability/components/observability-list-body.cjs.js");
 const require_domains_observability_hooks_use_observability_list_filters = require("../../observability/hooks/use-observability-list-filters.cjs.js");
 const require_domains_spans_hooks_use_spans_list_source = require("../hooks/use-spans-list-source.cjs.js");
-const require_domains_spans_span_filters = require("../span-filters.cjs.js");
 const require_domains_spans_span_list_row = require("../span-list-row.cjs.js");
 const require_domains_spans_components_spans_explorer_histogram = require("./spans-explorer-histogram.cjs.js");
 const require_domains_spans_components_spans_filter_bar = require("./spans-filter-bar.cjs.js");
@@ -17,27 +20,67 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _mastra_react_hooks_capabilities = require("@mastra/react/hooks/capabilities");
 // src/domains/spans/components/spans-explorer-body.tsx
 /** The spans page body: filter bar, span list and the host's span panel. Router-agnostic. */
-function SpansExplorerBody({ selection, onSelectionChange, renderPanel }) {
-	const filters = require_domains_observability_hooks_use_observability_list_filters.useObservabilityListFilters();
-	const { timeRange, tokens, groups, sort } = filters;
+function SpansExplorerBody({ selection, onSelectionChange, renderPanel, urlState }) {
+	const filters = require_domains_observability_hooks_use_observability_list_filters.useObservabilityListFilters(urlState, { sortFields: require_domains_observability_observability_list_url_state.SPAN_LIST_SORT_FIELDS });
+	const { timeRange, tokens, groups } = filters;
 	const columns = require_domains_traces_hooks_use_trace_column_preferences.useTraceColumnPreferences({ scope: "spans" });
-	const { data: capabilities } = (0, _mastra_react_hooks_capabilities.useObservabilityCapabilities)();
+	const { data: capabilities, isLoading: isCapabilitiesLoading } = (0, _mastra_react_hooks_capabilities.useObservabilityCapabilities)();
 	const withContextFields = capabilities?.capabilities.spanQueryContextFields ?? false;
-	const where = (0, react.useMemo)(() => require_domains_spans_span_filters.buildSpanQueryWhere(tokens, groups, { withContextFields }), [
+	const withTimeToFirstChunk = capabilities?.capabilities.traceQueryTimeToFirstChunk ?? false;
+	const withTimeToFirstToken = capabilities?.capabilities.traceQueryTimeToFirstToken ?? false;
+	const withOutcomeFields = capabilities?.capabilities.spanQueryOutcomeFields ?? false;
+	const withModelFields = capabilities?.capabilities.spanQueryModelFields ?? false;
+	const displayedColumns = (0, react.useMemo)(() => isCapabilitiesLoading ? columns.preferences : require_domains_traces_trace_list_columns.withoutUnrecordedStreamingColumns(columns.preferences, {
+		withTimeToFirstChunk,
+		withTimeToFirstToken
+	}), [
+		columns.preferences,
+		isCapabilitiesLoading,
+		withTimeToFirstChunk,
+		withTimeToFirstToken
+	]);
+	const sortableFields = (0, react.useMemo)(() => {
+		const fields = ["startedAt"];
+		if (withTimeToFirstChunk && capabilities?.capabilities.traceQueryTimeToFirstChunkSort && require_domains_traces_trace_list_columns.hasTraceColumn(displayedColumns, "timeToFirstChunk")) fields.push("timeToFirstChunkMs");
+		if (withTimeToFirstToken && capabilities?.capabilities.traceQueryTimeToFirstTokenSort && require_domains_traces_trace_list_columns.hasTraceColumn(displayedColumns, "timeToFirstToken")) fields.push("timeToFirstTokenMs");
+		return fields;
+	}, [
+		capabilities,
+		withTimeToFirstChunk,
+		withTimeToFirstToken,
+		displayedColumns
+	]);
+	const sort = sortableFields.includes(filters.sort.field) ? filters.sort : {
+		field: "startedAt",
+		direction: "desc"
+	};
+	const { field: sortField, direction: sortDirection } = sort;
+	const where = (0, react.useMemo)(() => require_domains_spans_span_filters.buildSpanQueryWhere(tokens, groups, {
+		withContextFields,
+		withOutcomeFields,
+		withModelFields,
+		withTimeToFirstChunk,
+		withTimeToFirstToken
+	}), [
 		tokens,
 		groups,
-		withContextFields
+		withContextFields,
+		withOutcomeFields,
+		withModelFields,
+		withTimeToFirstChunk,
+		withTimeToFirstToken
 	]);
 	const query = (0, react.useMemo)(() => ({
 		timeRange,
 		orderBy: [{
-			field: "startedAt",
-			direction: sort
+			field: sortField,
+			direction: sortDirection
 		}],
 		...where ? { where } : {}
 	}), [
 		timeRange,
-		sort,
+		sortField,
+		sortDirection,
 		where
 	]);
 	const { spans, hasNextPage, isFetchingNextPage, setEndOfListElement, isLoading, isError, error } = require_domains_spans_hooks_use_spans_list_source.useSpansListSource({
@@ -63,7 +106,11 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel }) {
 			children: "Spans"
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_observability_components_observability_list_body.ObservabilityListBody, {
-			toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionRow.ActionRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ActionRow.ActionRow.Start, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_columns_menu_columns_menu.ColumnsMenu, {
+			toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [urlState && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_observability_saved_views.ObservabilitySavedViews, {
+				page: "spans",
+				...urlState,
+				columns
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionRow.ActionRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ActionRow.ActionRow.Start, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_columns_menu_columns_menu.ColumnsMenu, {
 				scope: "spans",
 				value: columns.preferences,
 				onChange: columns.setPreferences
@@ -77,16 +124,14 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel }) {
 				onDatePresetChange: filters.onDatePresetChange,
 				onDateChange: filters.onDateChange,
 				onDateRangeChange: filters.onDateRangeChange,
+				onDateReset: filters.onDateReset,
 				onFiltersChange: filters.onFiltersChange,
 				disabled: isLoading
-			})] }) }),
+			})] }) })] }),
 			chart: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_spans_components_spans_explorer_histogram.SpansExplorerHistogram, {
 				timeRange,
 				where,
-				onZoom: ({ from, to }) => {
-					filters.onDatePresetChange("custom");
-					filters.onDateRangeChange(from, to);
-				}
+				onZoom: ({ from, to }) => filters.onZoom(from, to)
 			}),
 			error: isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_traces_error_content.TracesErrorContent, {
 				error,
@@ -102,7 +147,7 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel }) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_traces_list_view.TracesListView, {
 				listId: "all-spans",
 				traces: rows,
-				columnPreferences: columns.preferences,
+				columnPreferences: displayedColumns,
 				isLoading,
 				isFetchingNextPage,
 				hasNextPage,
@@ -110,7 +155,8 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel }) {
 				filtersApplied: filters.filtersApplied,
 				resource: "spans",
 				isBranchesMode: true,
-				createdSort: sort,
+				sort,
+				sortableFields,
 				onSortChange: filters.setSort,
 				featuredTraceId: selection?.traceId,
 				featuredSpanId: selection?.spanId,

package/dist/domains/spans/components/spans-explorer-body.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"spans-explorer-body.cjs.js","names":["useObservabilityListFilters","useTraceColumnPreferences","useObservabilityCapabilities","useMemo","buildSpanQueryWhere","useSpansListSource","spanToListRow","_Fragment","ObservabilityListBody","ActionRow","ColumnsMenu","SpansFilterBar","SpansExplorerHistogram","TracesErrorContent","NoTracesInfo","TracesListView"],"sources":["../../../../src/domains/spans/components/spans-explorer-body.tsx"],"sourcesContent":["import type { SpanQueryArgs } from '@mastra/react/hooks/traces';\nimport { useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { useSpansListSource } from '../hooks/use-spans-list-source';\nimport { buildSpanQueryWhere } from '../span-filters';\nimport { spanToListRow } from '../span-list-row';\nimport type { SpanSelection } from './span-detail-panel';\nimport { SpansExplorerHistogram } from './spans-explorer-histogram';\nimport { SpansFilterBar } from './spans-filter-bar';\nimport { useObservabilityCapabilities } from '@/domains/capabilities';\nimport { ObservabilityListBody } from '@/domains/observability/components/observability-list-body';\nimport { useObservabilityListFilters } from '@/domains/observability/hooks/use-observability-list-filters';\nimport { ColumnsMenu } from '@/domains/traces/components/columns-menu';\nimport { NoTracesInfo } from '@/domains/traces/components/no-traces-info';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { TracesListView } from '@/domains/traces/components/traces-list-view';\nimport type { TracesListViewTrace } from '@/domains/traces/components/traces-list-view';\nimport { useTraceColumnPreferences } from '@/domains/traces/hooks/use-trace-column-preferences';\nimport { ActionRow } from '@/ds/components/ActionRow';\n\nexport type SpansExplorerPanelArgs = {\n  selection: SpanSelection | undefined;\n  /** Loaded spans, in list order, for the panel's previous/next buttons. */\n  spans: SpanSelection[];\n  onSelect: (selection: SpanSelection) => void;\n  onClose: () => void;\n};\n\nexport type SpansExplorerBodyProps = {\n  /** The open span. The host keeps it (e.g. in the URL) so it survives a reload. */\n  selection: SpanSelection | undefined;\n  onSelectionChange: (selection: SpanSelection | undefined) => void;\n  /** Renders the open span's panel in the host's own side panel or drawer. */\n  renderPanel: (args: SpansExplorerPanelArgs) => ReactNode;\n};\n\n/** The spans page body: filter bar, span list and the host's span panel. Router-agnostic. */\nexport function SpansExplorerBody({ selection, onSelectionChange, renderPanel }: SpansExplorerBodyProps) {\n  const filters = useObservabilityListFilters();\n  const { timeRange, tokens, groups, sort } = filters;\n  const columns = useTraceColumnPreferences({ scope: 'spans' });\n\n  const { data: capabilities } = useObservabilityCapabilities();\n  const withContextFields = capabilities?.capabilities.spanQueryContextFields ?? false;\n\n  const where = useMemo(\n    () => buildSpanQueryWhere(tokens, groups, { withContextFields }),\n    [tokens, groups, withContextFields],\n  );\n  const query = useMemo<SpanQueryArgs>(\n    () => ({ timeRange, orderBy: [{ field: 'startedAt', direction: sort }], ...(where ? { where } : {}) }),\n    [timeRange, sort, where],\n  );\n\n  const { spans, hasNextPage, isFetchingNextPage, setEndOfListElement, isLoading, isError, error } = useSpansListSource(\n    {\n      query,\n      rolling: filters.rolling,\n    },\n  );\n\n  const rows = useMemo(() => (spans ?? []).map(spanToListRow), [spans]);\n  const panelSpans = useMemo(\n    () => rows.flatMap(row => (row.spanId ? [{ traceId: row.traceId, spanId: row.spanId }] : [])),\n    [rows],\n  );\n\n  // Clicking the open row again closes the panel.\n  const handleSpanClick = (row: TracesListViewTrace) => {\n    if (!row.spanId) return;\n    const isOpen = selection?.traceId === row.traceId && selection.spanId === row.spanId;\n    onSelectionChange(isOpen ? undefined : { traceId: row.traceId, spanId: row.spanId });\n  };\n\n  // Same rule as /traces: an empty window without filters gets the full-page empty state.\n  const showEmptyState = !isLoading && !isError && rows.length === 0 && !filters.contentFiltersApplied && !selection;\n\n  return (\n    <>\n      <h1 className=\"sr-only\">Spans</h1>\n      <ObservabilityListBody\n        toolbar={\n          <ActionRow>\n            <ActionRow.Start>\n              <ColumnsMenu scope=\"spans\" value={columns.preferences} onChange={columns.setPreferences} />\n              <SpansFilterBar\n                datePreset={filters.datePreset}\n                dateFrom={filters.dateFrom}\n                dateTo={filters.dateTo}\n                timeRange={timeRange}\n                tokens={tokens}\n                groups={groups}\n                onDatePresetChange={filters.onDatePresetChange}\n                onDateChange={filters.onDateChange}\n                onDateRangeChange={filters.onDateRangeChange}\n                onFiltersChange={filters.onFiltersChange}\n                disabled={isLoading}\n              />\n            </ActionRow.Start>\n          </ActionRow>\n        }\n        chart={\n          <SpansExplorerHistogram\n            timeRange={timeRange}\n            where={where}\n            onZoom={({ from, to }) => {\n              filters.onDatePresetChange('custom');\n              filters.onDateRangeChange(from, to);\n            }}\n          />\n        }\n        error={\n          isError ? <TracesErrorContent error={error} resource=\"spans\" errorTitle=\"Failed to load spans\" /> : undefined\n        }\n        empty={\n          showEmptyState ? (\n            <NoTracesInfo\n              resource=\"spans\"\n              datePreset={filters.datePreset}\n              dateFrom={filters.dateFrom}\n              dateTo={filters.dateTo}\n            />\n          ) : undefined\n        }\n      >\n        <TracesListView\n          listId=\"all-spans\"\n          traces={rows}\n          columnPreferences={columns.preferences}\n          isLoading={isLoading}\n          isFetchingNextPage={isFetchingNextPage}\n          hasNextPage={hasNextPage}\n          setEndOfListElement={setEndOfListElement}\n          filtersApplied={filters.filtersApplied}\n          resource=\"spans\"\n          isBranchesMode\n          createdSort={sort}\n          onSortChange={filters.setSort}\n          featuredTraceId={selection?.traceId}\n          featuredSpanId={selection?.spanId}\n          onTraceClick={handleSpanClick}\n        />\n      </ObservabilityListBody>\n      {renderPanel({\n        selection,\n        spans: panelSpans,\n        onSelect: onSelectionChange,\n        onClose: () => onSelectionChange(undefined),\n      })}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"spans-explorer-body.cjs.js","names":["useObservabilityListFilters","SPAN_LIST_SORT_FIELDS","useTraceColumnPreferences","useObservabilityCapabilities","useMemo","withoutUnrecordedStreamingColumns","hasTraceColumn","buildSpanQueryWhere","useSpansListSource","spanToListRow","_Fragment","ObservabilityListBody","ObservabilitySavedViews","ActionRow","ColumnsMenu","SpansFilterBar","SpansExplorerHistogram","TracesErrorContent","NoTracesInfo","TracesListView"],"sources":["../../../../src/domains/spans/components/spans-explorer-body.tsx"],"sourcesContent":["import type { SpanQueryArgs } from '@mastra/react/hooks/traces';\nimport { useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { useSpansListSource } from '../hooks/use-spans-list-source';\nimport { buildSpanQueryWhere } from '../span-filters';\nimport { spanToListRow } from '../span-list-row';\nimport type { SpanSelection } from './span-detail-panel';\nimport { SpansExplorerHistogram } from './spans-explorer-histogram';\nimport { SpansFilterBar } from './spans-filter-bar';\nimport { useObservabilityCapabilities } from '@/domains/capabilities';\nimport { ObservabilityListBody } from '@/domains/observability/components/observability-list-body';\nimport { useObservabilityListFilters } from '@/domains/observability/hooks/use-observability-list-filters';\nimport type { ObservabilityListUrlState } from '@/domains/observability/hooks/use-observability-list-filters';\nimport { SPAN_LIST_SORT_FIELDS } from '@/domains/observability/observability-list-url-state';\nimport { ObservabilitySavedViews } from '@/domains/observability/saved-views';\nimport { ColumnsMenu } from '@/domains/traces/components/columns-menu';\nimport { NoTracesInfo } from '@/domains/traces/components/no-traces-info';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { TracesListView } from '@/domains/traces/components/traces-list-view';\nimport type { TracesListSortField, TracesListViewTrace } from '@/domains/traces/components/traces-list-view';\nimport { useTraceColumnPreferences } from '@/domains/traces/hooks/use-trace-column-preferences';\nimport { hasTraceColumn, withoutUnrecordedStreamingColumns } from '@/domains/traces/trace-list-columns';\nimport { ActionRow } from '@/ds/components/ActionRow';\n\nexport type SpansExplorerPanelArgs = {\n  selection: SpanSelection | undefined;\n  /** Loaded spans, in list order, for the panel's previous/next buttons. */\n  spans: SpanSelection[];\n  onSelect: (selection: SpanSelection) => void;\n  onClose: () => void;\n};\n\nexport type SpansExplorerBodyProps = {\n  /** The open span. The host keeps it (e.g. in the URL) so it survives a reload. */\n  selection: SpanSelection | undefined;\n  onSelectionChange: (selection: SpanSelection | undefined) => void;\n  /** Renders the open span's panel in the host's own side panel or drawer. */\n  renderPanel: (args: SpansExplorerPanelArgs) => ReactNode;\n  /** The host's search params, so the time range, filters and sort survive a reload. Omitted: kept in memory. */\n  urlState?: ObservabilityListUrlState;\n};\n\n/** The spans page body: filter bar, span list and the host's span panel. Router-agnostic. */\nexport function SpansExplorerBody({ selection, onSelectionChange, renderPanel, urlState }: SpansExplorerBodyProps) {\n  const filters = useObservabilityListFilters(urlState, { sortFields: SPAN_LIST_SORT_FIELDS });\n  const { timeRange, tokens, groups } = filters;\n  const columns = useTraceColumnPreferences({ scope: 'spans' });\n\n  const { data: capabilities, isLoading: isCapabilitiesLoading } = useObservabilityCapabilities();\n  const withContextFields = capabilities?.capabilities.spanQueryContextFields ?? false;\n  const withTimeToFirstChunk = capabilities?.capabilities.traceQueryTimeToFirstChunk ?? false;\n  const withTimeToFirstToken = capabilities?.capabilities.traceQueryTimeToFirstToken ?? false;\n  const withOutcomeFields = capabilities?.capabilities.spanQueryOutcomeFields ?? false;\n  const withModelFields = capabilities?.capabilities.spanQueryModelFields ?? false;\n\n  // Stored columns the store can't fill stay saved but aren't drawn, so they come back on a store that can.\n  const displayedColumns = useMemo(\n    () =>\n      isCapabilitiesLoading\n        ? columns.preferences\n        : withoutUnrecordedStreamingColumns(columns.preferences, { withTimeToFirstChunk, withTimeToFirstToken }),\n    [columns.preferences, isCapabilitiesLoading, withTimeToFirstChunk, withTimeToFirstToken],\n  );\n\n  const sortableFields = useMemo(() => {\n    const fields: TracesListSortField[] = ['startedAt'];\n    if (\n      withTimeToFirstChunk &&\n      capabilities?.capabilities.traceQueryTimeToFirstChunkSort &&\n      hasTraceColumn(displayedColumns, 'timeToFirstChunk')\n    ) {\n      fields.push('timeToFirstChunkMs');\n    }\n    if (\n      withTimeToFirstToken &&\n      capabilities?.capabilities.traceQueryTimeToFirstTokenSort &&\n      hasTraceColumn(displayedColumns, 'timeToFirstToken')\n    ) {\n      fields.push('timeToFirstTokenMs');\n    }\n    return fields;\n  }, [capabilities, withTimeToFirstChunk, withTimeToFirstToken, displayedColumns]);\n\n  // A URL sort the store can't run, or on a hidden column, lists newest first without rewriting the URL.\n  const sort = sortableFields.includes(filters.sort.field)\n    ? filters.sort\n    : ({ field: 'startedAt', direction: 'desc' } as const);\n  const { field: sortField, direction: sortDirection } = sort;\n\n  const where = useMemo(\n    () =>\n      buildSpanQueryWhere(tokens, groups, {\n        withContextFields,\n        withOutcomeFields,\n        withModelFields,\n        withTimeToFirstChunk,\n        withTimeToFirstToken,\n      }),\n    [tokens, groups, withContextFields, withOutcomeFields, withModelFields, withTimeToFirstChunk, withTimeToFirstToken],\n  );\n  const query = useMemo<SpanQueryArgs>(\n    () => ({ timeRange, orderBy: [{ field: sortField, direction: sortDirection }], ...(where ? { where } : {}) }),\n    [timeRange, sortField, sortDirection, where],\n  );\n\n  const { spans, hasNextPage, isFetchingNextPage, setEndOfListElement, isLoading, isError, error } = useSpansListSource(\n    {\n      query,\n      rolling: filters.rolling,\n    },\n  );\n\n  const rows = useMemo(() => (spans ?? []).map(spanToListRow), [spans]);\n  const panelSpans = useMemo(\n    () => rows.flatMap(row => (row.spanId ? [{ traceId: row.traceId, spanId: row.spanId }] : [])),\n    [rows],\n  );\n\n  // Clicking the open row again closes the panel.\n  const handleSpanClick = (row: TracesListViewTrace) => {\n    if (!row.spanId) return;\n    const isOpen = selection?.traceId === row.traceId && selection.spanId === row.spanId;\n    onSelectionChange(isOpen ? undefined : { traceId: row.traceId, spanId: row.spanId });\n  };\n\n  // Same rule as /traces: an empty window without filters gets the full-page empty state.\n  const showEmptyState = !isLoading && !isError && rows.length === 0 && !filters.contentFiltersApplied && !selection;\n\n  return (\n    <>\n      <h1 className=\"sr-only\">Spans</h1>\n      <ObservabilityListBody\n        toolbar={\n          <>\n            {urlState && <ObservabilitySavedViews page=\"spans\" {...urlState} columns={columns} />}\n            <ActionRow>\n              <ActionRow.Start>\n                <ColumnsMenu scope=\"spans\" value={columns.preferences} onChange={columns.setPreferences} />\n                <SpansFilterBar\n                  datePreset={filters.datePreset}\n                  dateFrom={filters.dateFrom}\n                  dateTo={filters.dateTo}\n                  timeRange={timeRange}\n                  tokens={tokens}\n                  groups={groups}\n                  onDatePresetChange={filters.onDatePresetChange}\n                  onDateChange={filters.onDateChange}\n                  onDateRangeChange={filters.onDateRangeChange}\n                  onDateReset={filters.onDateReset}\n                  onFiltersChange={filters.onFiltersChange}\n                  disabled={isLoading}\n                />\n              </ActionRow.Start>\n            </ActionRow>\n          </>\n        }\n        chart={\n          <SpansExplorerHistogram\n            timeRange={timeRange}\n            where={where}\n            onZoom={({ from, to }) => filters.onZoom(from, to)}\n          />\n        }\n        error={\n          isError ? <TracesErrorContent error={error} resource=\"spans\" errorTitle=\"Failed to load spans\" /> : undefined\n        }\n        empty={\n          showEmptyState ? (\n            <NoTracesInfo\n              resource=\"spans\"\n              datePreset={filters.datePreset}\n              dateFrom={filters.dateFrom}\n              dateTo={filters.dateTo}\n            />\n          ) : undefined\n        }\n      >\n        <TracesListView\n          listId=\"all-spans\"\n          traces={rows}\n          columnPreferences={displayedColumns}\n          isLoading={isLoading}\n          isFetchingNextPage={isFetchingNextPage}\n          hasNextPage={hasNextPage}\n          setEndOfListElement={setEndOfListElement}\n          filtersApplied={filters.filtersApplied}\n          resource=\"spans\"\n          isBranchesMode\n          sort={sort}\n          sortableFields={sortableFields}\n          onSortChange={filters.setSort}\n          featuredTraceId={selection?.traceId}\n          featuredSpanId={selection?.spanId}\n          onTraceClick={handleSpanClick}\n        />\n      </ObservabilityListBody>\n      {renderPanel({\n        selection,\n        spans: panelSpans,\n        onSelect: onSelectionChange,\n        onClose: () => onSelectionChange(undefined),\n      })}\n    </>\n  );\n}\n"],"mappings":"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"}