npm - @mastra/playground-ui - Versions diffs - 67.0.0 → 68.0.0-alpha.1 - Mend

@mastra/playground-ui 67.0.0 → 68.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (929) hide show

package/dist/domains/observability.cjs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 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_observability_saved_views = require("../observability-saved-views-BAzxxoAr.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");

package/dist/domains/observability.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { SavedViewNameTakenError } from "./observability/saved-views/saved-views-source.es.js";
-import { t as ObservabilitySavedViews } from "../observability-saved-views-Bo5kLN20.js";
+import { t as ObservabilitySavedViews } from "../observability-saved-views-BBam8Fr5.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";

package/dist/domains/scores/components/score-data-panel.cjs.js CHANGED Viewed

@@ -2,9 +2,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_lib_framework = require("../../../lib/framework.cjs.js");
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
 const require_utils_date_format = require("../../../utils/date-format.cjs.js");
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_DataPanel = require("../../../DataPanel-C0Ll76Ne.cjs");
+const require_DataPanel = require("../../../DataPanel-BwB1Oifd.cjs");
 const require_DataKeysAndValues = require("../../../DataKeysAndValues-DsH6AbAo.cjs");
 const require_domains_scores_components_score_as_item_dialog = require("./score-as-item-dialog.cjs.js");
 let react = require("react");

package/dist/domains/scores/components/score-data-panel.es.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { useLinkComponent } from "../../../lib/framework.es.js";
 import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { formatTimestampPrecise } from "../../../utils/date-format.es.js";
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { t as DataPanel } from "../../../DataPanel-CY1W5LHJ.js";
+import { t as DataPanel } from "../../../DataPanel-Bv4M17xO.js";
 import { t as DataKeysAndValues } from "../../../DataKeysAndValues-PwOmGxyp.js";
 import { ScoreAsItemDialog } from "./score-as-item-dialog.es.js";
 import { useState } from "react";

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

@@ -1,8 +1,8 @@
 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-8kNAJFlj.cjs");
+const require_toast_api = require("../../../toast-api-qtkOucy2.cjs");
+const require_Dialog = require("../../../Dialog-BvWF9HE-.cjs");
+const require_Notice = require("../../../Notice-JZ7SW7q6.cjs");
+const require_combobox = require("../../../combobox-CMx2ayFN.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 CHANGED Viewed

@@ -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-wFudhN8F.js";
+import { t as toast } from "../../../toast-api-D_rrRhNG.js";
+import { n as DialogBody, o as DialogDescription, p as DialogAction, r as DialogCancel, s as DialogFooter } from "../../../Dialog-DaWtxwd9.js";
+import { t as Notice } from "../../../Notice-C-8oOZZF.js";
+import { t as Combobox } from "../../../combobox-CtCK0mNx.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 CHANGED Viewed

@@ -1,9 +1,9 @@
 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-CS6u5drO.cjs");
+const require_MarkdownRenderer = require("../../../MarkdownRenderer-CB8Z_CHc.cjs");
 const require_spinner = require("../../../spinner-C8ZxiA5C.cjs");
-const require_data_list = require("../../../data-list-BkimqE_P.cjs");
+const require_data_list = require("../../../data-list-C4Vmq5HA.cjs");
 const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

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

@@ -1,8 +1,8 @@
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
 import { ScorersIcon } from "../../../icons/ScorersIcon.es.js";
-import { t as MarkdownRenderer } from "../../../MarkdownRenderer-DME2xKTk.js";
+import { t as MarkdownRenderer } from "../../../MarkdownRenderer-2GOXQJEv.js";
 import { t as Spinner } from "../../../spinner-CnLgLj9R.js";
-import { t as DataList } from "../../../data-list-evmf5xWI.js";
+import { t as DataList } from "../../../data-list-DHCOoLmj.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../../components/HoverCard.es.js";
 import { Fragment, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -7,7 +7,7 @@ require("../../../primitives/typography.cjs.js");
 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_data_list = require("../../../data-list-C4Vmq5HA.cjs");
 const require_MetricsKpiCard = require("../../../MetricsKpiCard-By_-sagx.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

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

@@ -6,7 +6,7 @@ import "../../../primitives/typography.es.js";
 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 DataList } from "../../../data-list-DHCOoLmj.js";
 import { t as MetricsKpiCard } from "../../../MetricsKpiCard-OHbAElTl.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,17 +1,17 @@
 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-CS6u5drO.cjs");
-const require_CodeEditor = require("../../CodeEditor-CJ9jC9lu.cjs");
+const require_MarkdownRenderer = require("../../MarkdownRenderer-CB8Z_CHc.cjs");
+const require_CodeEditor = require("../../CodeEditor-CLzs0yVc.cjs");
 const require_components_Field = require("../../components/Field.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/skills/skill-simple-form.tsx
-function SkillSimpleForm({ name, onNameChange, description, onDescriptionChange, instructions, onInstructionsChange, readOnly }) {
+function SkillSimpleForm({ name, onNameChange, description, onDescriptionChange, instructions, onInstructionsChange, readOnly, nameReadOnly }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex h-full flex-col gap-4",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Field.Field, {
-				disabled: readOnly,
+				disabled: readOnly || nameReadOnly,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Field.FieldLabel, { children: "Name" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
 					value: name,
 					onChange: (e) => onNameChange(e.target.value),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skill-simple-form.cjs.js","names":["Field","FieldLabel","Input","MarkdownRenderer","Txt","CodeEditor"],"sources":["../../../src/domains/skills/skill-simple-form.tsx"],"sourcesContent":["import { CodeEditor } from '@/ds/components/CodeEditor';\nimport { Field, FieldLabel } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface SkillSimpleFormProps {\n name: string;\n onNameChange: (name: string) => void;\n description: string;\n onDescriptionChange: (description: string) => void;\n instructions: string;\n onInstructionsChange: (instructions: string) => void;\n readOnly?: boolean;\n}\n\nexport function SkillSimpleForm({\n name,\n onNameChange,\n description,\n onDescriptionChange,\n instructions,\n onInstructionsChange,\n readOnly,\n}: SkillSimpleFormProps) {\n return (\n <div className=\"flex h-full flex-col gap-4\">\n <Field disabled={readOnly}>\n <FieldLabel>Name</FieldLabel>\n <Input value={name} onChange={e => onNameChange(e.target.value)} placeholder=\"Skill name\" />\n </Field>\n\n <Field disabled={readOnly}>\n <FieldLabel>Description</FieldLabel>\n <Input\n value={description}\n onChange={e => onDescriptionChange(e.target.value)}\n placeholder=\"Brief description of the skill\"\n />\n </Field>\n\n <Field className=\"flex min-h-0 flex-1 flex-col gap-1.5\">\n <FieldLabel>Instructions</FieldLabel>\n\n {readOnly ? (\n <div className=\"min-h-0 flex-1 overflow-y-auto rounded-lg border border-border bg-background p-4\">\n {instructions ? (\n <MarkdownRenderer>{instructions}</MarkdownRenderer>\n ) : (\n <Txt variant=\"caption\" tone=\"muted\" className=\"italic\">\n No instructions provided.\n </Txt>\n )}\n </div>\n ) : (\n <div className=\"flex min-h-0 flex-1 flex-col\">\n <CodeEditor\n data-testid=\"skill-instructions-input\"\n value={instructions}\n onChange={onInstructionsChange}\n language=\"markdown\"\n editable\n placeholder=\"You are a helpful assistant that…\"\n showCopyButton={false}\n className=\"size-full\"\n />\n </div>\n )}\n </Field>\n </div>\n );\n}\n"],"mappings":";;;;;;;;~~AAgBA~~,SAAgB,gBAAgB,EAC9B,MACA,cACA,aACA,qBACA,cACA,sBACA,~~YACuB~~;CACvB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,yBAAAA,OAAD;IAAO,UAAU;~~IAAjB~~,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAY,OAAgB,CAAA,GAC5B,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KAAO,OAAO;KAAM,WAAU,MAAK,aAAa,EAAE,OAAO,KAAK;KAAG,aAAY;IAAc,CAAA,CACtF;;GAEP,iBAAA,GAAA,kBAAA,KAAA,CAACF,yBAAAA,OAAD;IAAO,UAAU;IAAjB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAY,cAAuB,CAAA,GACnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KACE,OAAO;KACP,WAAU,MAAK,oBAAoB,EAAE,OAAO,KAAK;KACjD,aAAY;IACb,CAAA,CACI;;GAEP,iBAAA,GAAA,kBAAA,KAAA,CAACF,yBAAAA,OAAD;IAAO,WAAU;IAAjB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAY,eAAwB,CAAA,GAEnC,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACE,yBAAAA,kBAAD,EAAA,UAAmB,aAA+B,CAAA,IAElD,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;MAAK,SAAQ;MAAU,MAAK;MAAQ,WAAU;MAAS,UAAA;KAElD,CAAA;IAEJ,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;MACE,eAAY;MACZ,OAAO;MACP,UAAU;MACV,UAAS;MACT,UAAA;MACA,aAAY;MACZ,gBAAgB;MAChB,WAAU;KACX,CAAA;IACE,CAAA,CAEF;;EACJ;;AAET"}
1	+ {"version":3,"file":"skill-simple-form.cjs.js","names":["Field","FieldLabel","Input","MarkdownRenderer","Txt","CodeEditor"],"sources":["../../../src/domains/skills/skill-simple-form.tsx"],"sourcesContent":["import { CodeEditor } from '@/ds/components/CodeEditor';\nimport { Field, FieldLabel } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface SkillSimpleFormProps {\n name: string;\n onNameChange: (name: string) => void;\n description: string;\n onDescriptionChange: (description: string) => void;\n instructions: string;\n onInstructionsChange: (instructions: string) => void;\n readOnly?: boolean;\n /** Locks only the name, for skills whose name is their identity. */\n nameReadOnly?: boolean;\n}\n\nexport function SkillSimpleForm({\n name,\n onNameChange,\n description,\n onDescriptionChange,\n instructions,\n onInstructionsChange,\n readOnly,\n nameReadOnly,\n}: SkillSimpleFormProps) {\n return (\n <div className=\"flex h-full flex-col gap-4\">\n <Field disabled={readOnly \|\| nameReadOnly}>\n <FieldLabel>Name</FieldLabel>\n <Input value={name} onChange={e => onNameChange(e.target.value)} placeholder=\"Skill name\" />\n </Field>\n\n <Field disabled={readOnly}>\n <FieldLabel>Description</FieldLabel>\n <Input\n value={description}\n onChange={e => onDescriptionChange(e.target.value)}\n placeholder=\"Brief description of the skill\"\n />\n </Field>\n\n <Field className=\"flex min-h-0 flex-1 flex-col gap-1.5\">\n <FieldLabel>Instructions</FieldLabel>\n\n {readOnly ? (\n <div className=\"min-h-0 flex-1 overflow-y-auto rounded-lg border border-border bg-background p-4\">\n {instructions ? (\n <MarkdownRenderer>{instructions}</MarkdownRenderer>\n ) : (\n <Txt variant=\"caption\" tone=\"muted\" className=\"italic\">\n No instructions provided.\n </Txt>\n )}\n </div>\n ) : (\n <div className=\"flex min-h-0 flex-1 flex-col\">\n <CodeEditor\n data-testid=\"skill-instructions-input\"\n value={instructions}\n onChange={onInstructionsChange}\n language=\"markdown\"\n editable\n placeholder=\"You are a helpful assistant that…\"\n showCopyButton={false}\n className=\"size-full\"\n />\n </div>\n )}\n </Field>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,gBAAgB,EAC9B,MACA,cACA,aACA,qBACA,cACA,sBACA,UACA,gBACuB;CACvB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,yBAAAA,OAAD;IAAO,UAAU,YAAY;IAA7B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAY,OAAgB,CAAA,GAC5B,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KAAO,OAAO;KAAM,WAAU,MAAK,aAAa,EAAE,OAAO,KAAK;KAAG,aAAY;IAAc,CAAA,CACtF;;GAEP,iBAAA,GAAA,kBAAA,KAAA,CAACF,yBAAAA,OAAD;IAAO,UAAU;IAAjB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAY,cAAuB,CAAA,GACnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KACE,OAAO;KACP,WAAU,MAAK,oBAAoB,EAAE,OAAO,KAAK;KACjD,aAAY;IACb,CAAA,CACI;;GAEP,iBAAA,GAAA,kBAAA,KAAA,CAACF,yBAAAA,OAAD;IAAO,WAAU;IAAjB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAY,eAAwB,CAAA,GAEnC,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACE,yBAAAA,kBAAD,EAAA,UAAmB,aAA+B,CAAA,IAElD,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;MAAK,SAAQ;MAAU,MAAK;MAAQ,WAAU;MAAS,UAAA;KAElD,CAAA;IAEJ,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;MACE,eAAY;MACZ,OAAO;MACP,UAAU;MACV,UAAS;MACT,UAAA;MACA,aAAY;MACZ,gBAAgB;MAChB,WAAU;KACX,CAAA;IACE,CAAA,CAEF;;EACJ;;AAET"}

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

@@ -1,16 +1,16 @@
 import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { t as Input } from "../../input-0l1uzOBZ.js";
-import { t as MarkdownRenderer } from "../../MarkdownRenderer-DME2xKTk.js";
-import { t as CodeEditor } from "../../CodeEditor-CPVxj7WS.js";
+import { t as MarkdownRenderer } from "../../MarkdownRenderer-2GOXQJEv.js";
+import { t as CodeEditor } from "../../CodeEditor-COnz9c6B.js";
 import { Field, FieldLabel } from "../../components/Field.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/skills/skill-simple-form.tsx
-function SkillSimpleForm({ name, onNameChange, description, onDescriptionChange, instructions, onInstructionsChange, readOnly }) {
+function SkillSimpleForm({ name, onNameChange, description, onDescriptionChange, instructions, onInstructionsChange, readOnly, nameReadOnly }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col gap-4",
 		children: [
 			/* @__PURE__ */ jsxs(Field, {
-				disabled: readOnly,
+				disabled: readOnly || nameReadOnly,
 				children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Name" }), /* @__PURE__ */ jsx(Input, {
 					value: name,
 					onChange: (e) => onNameChange(e.target.value),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skill-simple-form.es.js","names":[],"sources":["../../../src/domains/skills/skill-simple-form.tsx"],"sourcesContent":["import { CodeEditor } from '@/ds/components/CodeEditor';\nimport { Field, FieldLabel } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface SkillSimpleFormProps {\n name: string;\n onNameChange: (name: string) => void;\n description: string;\n onDescriptionChange: (description: string) => void;\n instructions: string;\n onInstructionsChange: (instructions: string) => void;\n readOnly?: boolean;\n}\n\nexport function SkillSimpleForm({\n name,\n onNameChange,\n description,\n onDescriptionChange,\n instructions,\n onInstructionsChange,\n readOnly,\n}: SkillSimpleFormProps) {\n return (\n <div className=\"flex h-full flex-col gap-4\">\n <Field disabled={readOnly}>\n <FieldLabel>Name</FieldLabel>\n <Input value={name} onChange={e => onNameChange(e.target.value)} placeholder=\"Skill name\" />\n </Field>\n\n <Field disabled={readOnly}>\n <FieldLabel>Description</FieldLabel>\n <Input\n value={description}\n onChange={e => onDescriptionChange(e.target.value)}\n placeholder=\"Brief description of the skill\"\n />\n </Field>\n\n <Field className=\"flex min-h-0 flex-1 flex-col gap-1.5\">\n <FieldLabel>Instructions</FieldLabel>\n\n {readOnly ? (\n <div className=\"min-h-0 flex-1 overflow-y-auto rounded-lg border border-border bg-background p-4\">\n {instructions ? (\n <MarkdownRenderer>{instructions}</MarkdownRenderer>\n ) : (\n <Txt variant=\"caption\" tone=\"muted\" className=\"italic\">\n No instructions provided.\n </Txt>\n )}\n </div>\n ) : (\n <div className=\"flex min-h-0 flex-1 flex-col\">\n <CodeEditor\n data-testid=\"skill-instructions-input\"\n value={instructions}\n onChange={onInstructionsChange}\n language=\"markdown\"\n editable\n placeholder=\"You are a helpful assistant that…\"\n showCopyButton={false}\n className=\"size-full\"\n />\n </div>\n )}\n </Field>\n </div>\n );\n}\n"],"mappings":";;;;;;;~~AAgBA~~,SAAgB,gBAAgB,EAC9B,MACA,cACA,aACA,qBACA,cACA,sBACA,~~YACuB~~;CACvB,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAO,UAAU;~~IAAjB~~,UAAA,CACE,oBAAC,YAAD,EAAA,UAAY,OAAgB,CAAA,GAC5B,oBAAC,OAAD;KAAO,OAAO;KAAM,WAAU,MAAK,aAAa,EAAE,OAAO,KAAK;KAAG,aAAY;IAAc,CAAA,CACtF;;GAEP,qBAAC,OAAD;IAAO,UAAU;IAAjB,UAAA,CACE,oBAAC,YAAD,EAAA,UAAY,cAAuB,CAAA,GACnC,oBAAC,OAAD;KACE,OAAO;KACP,WAAU,MAAK,oBAAoB,EAAE,OAAO,KAAK;KACjD,aAAY;IACb,CAAA,CACI;;GAEP,qBAAC,OAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,YAAD,EAAA,UAAY,eAAwB,CAAA,GAEnC,WACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,eACC,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,IAElD,oBAAC,KAAD;MAAK,SAAQ;MAAU,MAAK;MAAQ,WAAU;MAAS,UAAA;KAElD,CAAA;IAEJ,CAAA,IAEL,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,YAAD;MACE,eAAY;MACZ,OAAO;MACP,UAAU;MACV,UAAS;MACT,UAAA;MACA,aAAY;MACZ,gBAAgB;MAChB,WAAU;KACX,CAAA;IACE,CAAA,CAEF;;EACJ;;AAET"}
1	+ {"version":3,"file":"skill-simple-form.es.js","names":[],"sources":["../../../src/domains/skills/skill-simple-form.tsx"],"sourcesContent":["import { CodeEditor } from '@/ds/components/CodeEditor';\nimport { Field, FieldLabel } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface SkillSimpleFormProps {\n name: string;\n onNameChange: (name: string) => void;\n description: string;\n onDescriptionChange: (description: string) => void;\n instructions: string;\n onInstructionsChange: (instructions: string) => void;\n readOnly?: boolean;\n /** Locks only the name, for skills whose name is their identity. */\n nameReadOnly?: boolean;\n}\n\nexport function SkillSimpleForm({\n name,\n onNameChange,\n description,\n onDescriptionChange,\n instructions,\n onInstructionsChange,\n readOnly,\n nameReadOnly,\n}: SkillSimpleFormProps) {\n return (\n <div className=\"flex h-full flex-col gap-4\">\n <Field disabled={readOnly \|\| nameReadOnly}>\n <FieldLabel>Name</FieldLabel>\n <Input value={name} onChange={e => onNameChange(e.target.value)} placeholder=\"Skill name\" />\n </Field>\n\n <Field disabled={readOnly}>\n <FieldLabel>Description</FieldLabel>\n <Input\n value={description}\n onChange={e => onDescriptionChange(e.target.value)}\n placeholder=\"Brief description of the skill\"\n />\n </Field>\n\n <Field className=\"flex min-h-0 flex-1 flex-col gap-1.5\">\n <FieldLabel>Instructions</FieldLabel>\n\n {readOnly ? (\n <div className=\"min-h-0 flex-1 overflow-y-auto rounded-lg border border-border bg-background p-4\">\n {instructions ? (\n <MarkdownRenderer>{instructions}</MarkdownRenderer>\n ) : (\n <Txt variant=\"caption\" tone=\"muted\" className=\"italic\">\n No instructions provided.\n </Txt>\n )}\n </div>\n ) : (\n <div className=\"flex min-h-0 flex-1 flex-col\">\n <CodeEditor\n data-testid=\"skill-instructions-input\"\n value={instructions}\n onChange={onInstructionsChange}\n language=\"markdown\"\n editable\n placeholder=\"You are a helpful assistant that…\"\n showCopyButton={false}\n className=\"size-full\"\n />\n </div>\n )}\n </Field>\n </div>\n );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,gBAAgB,EAC9B,MACA,cACA,aACA,qBACA,cACA,sBACA,UACA,gBACuB;CACvB,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAO,UAAU,YAAY;IAA7B,UAAA,CACE,oBAAC,YAAD,EAAA,UAAY,OAAgB,CAAA,GAC5B,oBAAC,OAAD;KAAO,OAAO;KAAM,WAAU,MAAK,aAAa,EAAE,OAAO,KAAK;KAAG,aAAY;IAAc,CAAA,CACtF;;GAEP,qBAAC,OAAD;IAAO,UAAU;IAAjB,UAAA,CACE,oBAAC,YAAD,EAAA,UAAY,cAAuB,CAAA,GACnC,oBAAC,OAAD;KACE,OAAO;KACP,WAAU,MAAK,oBAAoB,EAAE,OAAO,KAAK;KACjD,aAAY;IACb,CAAA,CACI;;GAEP,qBAAC,OAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,YAAD,EAAA,UAAY,eAAwB,CAAA,GAEnC,WACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,eACC,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,IAElD,oBAAC,KAAD;MAAK,SAAQ;MAAU,MAAK;MAAQ,WAAU;MAAS,UAAA;KAElD,CAAA;IAEJ,CAAA,IAEL,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,YAAD;MACE,eAAY;MACZ,OAAO;MACP,UAAU;MACV,UAAS;MACT,UAAA;MACA,aAAY;MACZ,gBAAgB;MAChB,WAAU;KACX,CAAA;IACE,CAAA,CAEF;;EACJ;;AAET"}

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

@@ -2,7 +2,7 @@ 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_observability_saved_views = require("../../../observability-saved-views-BAzxxoAr.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");
@@ -14,7 +14,7 @@ const require_domains_traces_components_no_traces_info = require("../../traces/c
 const require_domains_traces_components_traces_error_content = require("../../traces/components/traces-error-content.cjs.js");
 const require_domains_traces_components_traces_list_view = require("../../traces/components/traces-list-view.cjs.js");
 const require_domains_traces_hooks_use_trace_column_preferences = require("../../traces/hooks/use-trace-column-preferences.cjs.js");
-const require_ActionRow = require("../../../ActionRow-BfK77pCT.cjs");
+const require_ActionRow = require("../../../ActionRow-BlC9GAef.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mastra_react_hooks_capabilities = require("@mastra/react/hooks/capabilities");
@@ -110,11 +110,7 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel, urlState
 				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
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_spans_components_spans_filter_bar.SpansFilterBar, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ActionRow.ActionRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionRow.ActionRow.Start, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_spans_components_spans_filter_bar.SpansFilterBar, {
 				datePreset: filters.datePreset,
 				dateFrom: filters.dateFrom,
 				dateTo: filters.dateTo,
@@ -127,7 +123,11 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel, urlState
 				onDateReset: filters.onDateReset,
 				onFiltersChange: filters.onFiltersChange,
 				disabled: isLoading
-			})] }) })] }),
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionRow.ActionRow.End, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_columns_menu_columns_menu.ColumnsMenu, {
+				scope: "spans",
+				value: columns.preferences,
+				onChange: columns.setPreferences
+			}) })] })] }),
 			chart: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_spans_components_spans_explorer_histogram.SpansExplorerHistogram, {
 				timeRange,
 				where,

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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","SpansFilterBar","ColumnsMenu","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 <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.End>\n <ColumnsMenu scope=\"spans\" value={columns.preferences} onChange={columns.setPreferences} />\n </ActionRow.End>\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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"}

package/dist/domains/spans/components/spans-explorer-body.es.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { useObservabilityCapabilities } from "../../capabilities.es.js";
 import { SPAN_LIST_SORT_FIELDS } from "../../observability/observability-list-url-state.es.js";
 import { buildSpanQueryWhere } from "../span-filters.es.js";
 import { hasTraceColumn, withoutUnrecordedStreamingColumns } from "../../traces/trace-list-columns.es.js";
-import { t as ObservabilitySavedViews } from "../../../observability-saved-views-Bo5kLN20.js";
+import { t as ObservabilitySavedViews } from "../../../observability-saved-views-BBam8Fr5.js";
 import { ObservabilityListBody } from "../../observability/components/observability-list-body.es.js";
 import { useObservabilityListFilters } from "../../observability/hooks/use-observability-list-filters.es.js";
 import { useSpansListSource } from "../hooks/use-spans-list-source.es.js";
@@ -14,7 +14,7 @@ import { NoTracesInfo } from "../../traces/components/no-traces-info.es.js";
 import { TracesErrorContent } from "../../traces/components/traces-error-content.es.js";
 import { TracesListView } from "../../traces/components/traces-list-view.es.js";
 import { useTraceColumnPreferences } from "../../traces/hooks/use-trace-column-preferences.es.js";
-import { t as ActionRow } from "../../../ActionRow-Cd6tOC2K.js";
+import { t as ActionRow } from "../../../ActionRow-DCrRCvBq.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/domains/spans/components/spans-explorer-body.tsx
@@ -109,11 +109,7 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel, urlState
 				page: "spans",
 				...urlState,
 				columns
-			}), /* @__PURE__ */ jsx(ActionRow, { children: /* @__PURE__ */ jsxs(ActionRow.Start, { children: [/* @__PURE__ */ jsx(ColumnsMenu, {
-				scope: "spans",
-				value: columns.preferences,
-				onChange: columns.setPreferences
-			}), /* @__PURE__ */ jsx(SpansFilterBar, {
+			}), /* @__PURE__ */ jsxs(ActionRow, { children: [/* @__PURE__ */ jsx(ActionRow.Start, { children: /* @__PURE__ */ jsx(SpansFilterBar, {
 				datePreset: filters.datePreset,
 				dateFrom: filters.dateFrom,
 				dateTo: filters.dateTo,
@@ -126,7 +122,11 @@ function SpansExplorerBody({ selection, onSelectionChange, renderPanel, urlState
 				onDateReset: filters.onDateReset,
 				onFiltersChange: filters.onFiltersChange,
 				disabled: isLoading
-			})] }) })] }),
+			}) }), /* @__PURE__ */ jsx(ActionRow.End, { children: /* @__PURE__ */ jsx(ColumnsMenu, {
+				scope: "spans",
+				value: columns.preferences,
+				onChange: columns.setPreferences
+			}) })] })] }),
 			chart: /* @__PURE__ */ jsx(SpansExplorerHistogram, {
 				timeRange,
 				where,

package/dist/domains/spans/components/spans-explorer-body.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spans-explorer-body.es.js","names":["_Fragment"],"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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"}
1	+ {"version":3,"file":"spans-explorer-body.es.js","names":["_Fragment"],"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 <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.End>\n <ColumnsMenu scope=\"spans\" value={columns.preferences} onChange={columns.setPreferences} />\n </ActionRow.End>\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":";;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,kBAAkB,EAAE,WAAW,mBAAmB,aAAa,YAAoC;CACjH,MAAM,UAAU,4BAA4B,UAAU,EAAE,YAAY,sBAAsB,CAAC;CAC3F,MAAM,EAAE,WAAW,QAAQ,WAAW;CACtC,MAAM,UAAU,0BAA0B,EAAE,OAAO,QAAQ,CAAC;CAE5D,MAAM,EAAE,MAAM,cAAc,WAAW,0BAA0B,6BAA6B;CAC9F,MAAM,oBAAoB,cAAc,aAAa,0BAA0B;CAC/E,MAAM,uBAAuB,cAAc,aAAa,8BAA8B;CACtF,MAAM,uBAAuB,cAAc,aAAa,8BAA8B;CACtF,MAAM,oBAAoB,cAAc,aAAa,0BAA0B;CAC/E,MAAM,kBAAkB,cAAc,aAAa,wBAAwB;CAG3E,MAAM,mBAAmB,cAErB,wBACI,QAAQ,cACR,kCAAkC,QAAQ,aAAa;EAAE;EAAsB;CAAqB,CAAC,GAC3G;EAAC,QAAQ;EAAa;EAAuB;EAAsB;CAAoB,CACzF;CAEA,MAAM,iBAAiB,cAAc;EACnC,MAAM,SAAgC,CAAC,WAAW;EAClD,IACE,wBACA,cAAc,aAAa,kCAC3B,eAAe,kBAAkB,kBAAkB,GAEnD,OAAO,KAAK,oBAAoB;EAElC,IACE,wBACA,cAAc,aAAa,kCAC3B,eAAe,kBAAkB,kBAAkB,GAEnD,OAAO,KAAK,oBAAoB;EAElC,OAAO;CACT,GAAG;EAAC;EAAc;EAAsB;EAAsB;CAAgB,CAAC;CAG/E,MAAM,OAAO,eAAe,SAAS,QAAQ,KAAK,KAAK,IACnD,QAAQ,OACP;EAAE,OAAO;EAAa,WAAW;CAAO;CAC7C,MAAM,EAAE,OAAO,WAAW,WAAW,kBAAkB;CAEvD,MAAM,QAAQ,cAEV,oBAAoB,QAAQ,QAAQ;EAClC;EACA;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAQ;EAAQ;EAAmB;EAAmB;EAAiB;EAAsB;CAAoB,CACpH;CACA,MAAM,QAAQ,eACL;EAAE;EAAW,SAAS,CAAC;GAAE,OAAO;GAAW,WAAW;EAAc,CAAC;EAAG,GAAI,QAAQ,EAAE,MAAM,IAAI,CAAC;CAAG,IAC3G;EAAC;EAAW;EAAW;EAAe;CAAK,CAC7C;CAEA,MAAM,EAAE,OAAO,aAAa,oBAAoB,qBAAqB,WAAW,SAAS,UAAU,mBACjG;EACE;EACA,SAAS,QAAQ;CACnB,CACF;CAEA,MAAM,OAAO,eAAe,SAAS,CAAC,EAAA,CAAG,IAAI,aAAa,GAAG,CAAC,KAAK,CAAC;CACpE,MAAM,aAAa,cACX,KAAK,SAAQ,QAAQ,IAAI,SAAS,CAAC;EAAE,SAAS,IAAI;EAAS,QAAQ,IAAI;CAAO,CAAC,IAAI,CAAC,CAAE,GAC5F,CAAC,IAAI,CACP;CAGA,MAAM,mBAAmB,QAA6B;EACpD,IAAI,CAAC,IAAI,QAAQ;EAEjB,kBADe,WAAW,YAAY,IAAI,WAAW,UAAU,WAAW,IAAI,SACnD,KAAA,IAAY;GAAE,SAAS,IAAI;GAAS,QAAQ,IAAI;EAAO,CAAC;CACrF;CAGA,MAAM,iBAAiB,CAAC,aAAa,CAAC,WAAW,KAAK,WAAW,KAAK,CAAC,QAAQ,yBAAyB,CAAC;CAEzG,OACE,qBAAAA,YAAA,EAAA,UAAA;EACE,oBAAC,MAAD;GAAI,WAAU;GAAU,UAAA;EAAS,CAAA;EACjC,oBAAC,uBAAD;GACE,SACE,qBAAAA,YAAA,EAAA,UAAA,CACG,YAAY,oBAAC,yBAAD;IAAyB,MAAK;IAAQ,GAAI;IAAmB;GAAU,CAAA,GACpF,qBAAC,WAAD,EAAA,UAAA,CACE,oBAAC,UAAU,OAAX,EAAA,UACE,oBAAC,gBAAD;IACE,YAAY,QAAQ;IACpB,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IACL;IACH;IACA;IACR,oBAAoB,QAAQ;IAC5B,cAAc,QAAQ;IACtB,mBAAmB,QAAQ;IAC3B,aAAa,QAAQ;IACrB,iBAAiB,QAAQ;IACzB,UAAU;GACX,CAAA,EACc,CAAA,GACjB,oBAAC,UAAU,KAAX,EAAA,UACE,oBAAC,aAAD;IAAa,OAAM;IAAQ,OAAO,QAAQ;IAAa,UAAU,QAAQ;GAAiB,CAAA,EAC7E,CAAA,CACN,EAAA,CAAA,CACX,EAAA,CAAA;GAEJ,OACE,oBAAC,wBAAD;IACa;IACJ;IACP,SAAS,EAAE,MAAM,SAAS,QAAQ,OAAO,MAAM,EAAE;GAClD,CAAA;GAEH,OACE,UAAU,oBAAC,oBAAD;IAA2B;IAAO,UAAS;IAAQ,YAAW;GAAwB,CAAA,IAAI,KAAA;GAEtG,OACE,iBACE,oBAAC,cAAD;IACE,UAAS;IACT,YAAY,QAAQ;IACpB,UAAU,QAAQ;IAClB,QAAQ,QAAQ;GACjB,CAAA,IACC,KAAA;GAGN,UAAA,oBAAC,gBAAD;IACE,QAAO;IACP,QAAQ;IACR,mBAAmB;IACR;IACS;IACP;IACQ;IACrB,gBAAgB,QAAQ;IACxB,UAAS;IACT,gBAAA;IACM;IACU;IAChB,cAAc,QAAQ;IACtB,iBAAiB,WAAW;IAC5B,gBAAgB,WAAW;IAC3B,cAAc;GACf,CAAA;EACoB,CAAA;EACtB,YAAY;GACX;GACA,OAAO;GACP,UAAU;GACV,eAAe,kBAAkB,KAAA,CAAS;EAC5C,CAAC;CACD,EAAA,CAAA;AAEN"}

package/dist/domains/spans/components/spans-filter-bar.cjs.js CHANGED Viewed

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_trace_filters = require("../../../trace-filters-BNEZ31HX.cjs");
+const require_trace_filters = require("../../../trace-filters-a0N9bf52.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("../../traces/components/traces-explorer/traces-explorer-actions.cjs.js");
-const require_domains_traces_components_trace_time_range_chip = require("../../traces/components/trace-time-range-chip.cjs.js");
-const require_FilterBar = require("../../../FilterBar-BUd4f7oi.cjs");
+require("../../../filter-bar-time-range-DvuaFnkI.cjs");
+const require_FilterBar = require("../../../FilterBar-Buw0tv51.cjs");
 const require_domains_spans_hooks_use_spans_filter_bar = require("../hooks/use-spans-filter-bar.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/spans/components/spans-filter-bar.tsx
 var createItemId = (fieldId) => fieldId;
-/** The spans filter bar: a time range chip plus the fields `querySpans()` accepts. */
+/** The spans filter bar: the time range plus the fields `querySpans()` accepts. */
 function SpansFilterBar({ datePreset, dateFrom, dateTo, minDate, timeRange, tokens, groups, onDatePresetChange, onDateChange, onDateRangeChange, onDateReset, onFiltersChange, describeSuggestionsError, disabled }) {
 	const fields = require_domains_spans_hooks_use_spans_filter_bar.useSpansFilterBarFields({ timeRange });
 	const { filterBarValue, onFilterBarChange } = require_domains_spans_hooks_use_spans_filter_bar.useSpansFilterBar({
@@ -25,7 +25,7 @@ function SpansFilterBar({ datePreset, dateFrom, dateTo, minDate, timeRange, toke
 		maxDepth: 3,
 		"aria-label": "Span filters",
 		className: "min-w-64 flex-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FilterBar.FilterBar.Chips, { renderChip: (item) => item.fieldId === "timeRange" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_trace_time_range_chip.TraceTimeRangeChip, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FilterBar.FilterBar.Chips, { renderChip: (item) => item.fieldId === "timeRange" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FilterBar.FilterBar.TimeRange, {
 			preset: datePreset,
 			onPresetChange: onDatePresetChange,
 			dateFrom,

package/dist/domains/spans/components/spans-filter-bar.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spans-filter-bar.cjs.js","names":["useSpansFilterBarFields","useSpansFilterBar","FilterBar","TRACE_FILTER_BAR_OPERATORS","~~TraceTimeRangeChip","~~SPAN_TIME_RANGE_PRESETS","DEFAULT_TRACES_FILTERS"],"sources":["../../../../src/domains/spans/components/spans-filter-bar.tsx"],"sourcesContent":["import type { TraceQueryDiscoveryTimeRange } from '@mastra/react/hooks/traces';\nimport { ~~TraceTimeRangeChip, TRACE_TIME_RANGE_FIELD_ID } from '../../traces/components/trace-time-range-chip';\nimport {~~ DEFAULT_TRACES_FILTERS } from '../../traces/components/traces-explorer/traces-explorer-actions';\nimport { TRACE_FILTER_BAR_OPERATORS } from '../../traces/trace-filters';\nimport type { TraceFilterGroup, TraceFilterToken } from '../../traces/trace-query-filters';\nimport type { TraceDatePreset } from '../../traces/types';\nimport { SPAN_TIME_RANGE_PRESETS, useSpansFilterBar, useSpansFilterBarFields } from '../hooks/use-spans-filter-bar';\nimport { FilterBar } from '@/ds/components/FilterBar';\n\n// Items are rebuilt from tokens with `id: fieldId` (traceTokensToFilterBarItems); give the\n// draft that id so the chip survives the round trip without remounting.\nconst createItemId = (fieldId: string) => fieldId;\n\nexport type SpansFilterBarProps = {\n datePreset: TraceDatePreset;\n dateFrom?: Date;\n dateTo?: Date;\n /** Earliest date the custom range picker allows. /\n minDate?: Date;\n /* Window the value suggestions are looked up in. /\n timeRange: TraceQueryDiscoveryTimeRange;\n tokens: TraceFilterToken[];\n groups: TraceFilterGroup[];\n onDatePresetChange: (preset: TraceDatePreset) => void;\n onDateChange: (value: Date \| undefined, type: 'from' \| 'to') => void;\n onDateRangeChange: (from: Date \| undefined, to: Date \| undefined) => void;\n /* Called by the time range chip's × with the default preset, e.g. to undo a histogram zoom first. /\n onDateReset?: (defaultPreset: TraceDatePreset) => void;\n onFiltersChange: (tokens: TraceFilterToken[], groups: TraceFilterGroup[]) => void;\n /* Turns a failed value suggestions lookup into the message shown in the option list. /\n describeSuggestionsError?: (error: unknown) => string \| undefined;\n disabled?: boolean;\n};\n\n/* The spans filter bar: a time range ~~chip~~ plus the fields `querySpans()` accepts. */\nexport function SpansFilterBar({\n datePreset,\n dateFrom,\n dateTo,\n minDate,\n timeRange,\n tokens,\n groups,\n onDatePresetChange,\n onDateChange,\n onDateRangeChange,\n onDateReset,\n onFiltersChange,\n describeSuggestionsError,\n disabled,\n}: SpansFilterBarProps) {\n const fields = useSpansFilterBarFields({ timeRange });\n const { filterBarValue, onFilterBarChange } = useSpansFilterBar({ tokens, groups, onFiltersChange });\n\n return (\n <FilterBar\n fields={fields}\n operators={TRACE_FILTER_BAR_OPERATORS}\n value={filterBarValue}\n onValueChange={onFilterBarChange}\n createItemId={createItemId}\n describeSuggestionsError={describeSuggestionsError}\n maxDepth={3}\n aria-label=\"Span filters\"\n className=\"min-w-64 flex-1\"\n >\n <FilterBar.Chips\n renderChip={item =>\n item.fieldId === ~~TRACE_TIME_RANGE_FIELD_ID~~ ? (\n <~~TraceTimeRangeChip~~\n preset={datePreset}\n onPresetChange={onDatePresetChange}\n dateFrom={dateFrom}\n dateTo={dateTo}\n minDate={minDate}\n onDateChange={onDateChange}\n onDateRangeChange={onDateRangeChange}\n disabled={disabled}\n presets={SPAN_TIME_RANGE_PRESETS}\n defaultPreset={DEFAULT_TRACES_FILTERS.datePreset}\n onReset={onDateReset && (() => onDateReset(DEFAULT_TRACES_FILTERS.datePreset))}\n />\n ) : (\n <FilterBar.Chip item={item} />\n )\n }\n />\n <FilterBar.Input placeholder=\"Filter spans…\" />\n </FilterBar>\n );\n}\n"],"mappings":";;;;;;;;AAWA,IAAM,gBAAgB,YAAoB;;AAwB1C,SAAgB,eAAe,EAC7B,YACA,UACA,QACA,SACA,WACA,QACA,QACA,oBACA,cACA,mBACA,aACA,iBACA,0BACA,YACsB;CACtB,MAAM,SAASA,iDAAAA,wBAAwB,EAAE,UAAU,CAAC;CACpD,MAAM,EAAE,gBAAgB,sBAAsBC,iDAAAA,kBAAkB;EAAE;EAAQ;EAAQ;CAAgB,CAAC;CAEnG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,kBAAAA,WAAD;EACU;EACR,WAAWC,sBAAAA;EACX,OAAO;EACP,eAAe;EACD;EACY;EAC1B,UAAU;EACV,cAAW;EACX,WAAU;EATZ,UAAA,CAWE,iBAAA,GAAA,kBAAA,IAAA,CAACD,kBAAAA,UAAU,OAAX,EACE,aAAY,SACV,KAAK,YAAA,cACH,iBAAA,GAAA,kBAAA,IAAA,~~CAACE~~,~~wDAAAA~~,~~oBAAD~~;GACE,QAAQ;GACR,gBAAgB;GACN;GACF;GACC;GACK;GACK;GACT;GACV,~~SAASC~~,iDAAAA;GACT,eAAeC,0EAAAA,uBAAuB;GACtC,SAAS,sBAAsB,YAAYA,0EAAAA,uBAAuB,UAAU;EAC7E,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,~~CAACJ~~,kBAAAA,UAAU,MAAX,EAAsB,KAAO,CAAA,EAGlC,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,UAAU,OAAX,EAAiB,aAAY,gBAAiB,CAAA,CACrC;;AAEf"}
1	+ {"version":3,"file":"spans-filter-bar.cjs.js","names":["useSpansFilterBarFields","useSpansFilterBar","FilterBar","TRACE_FILTER_BAR_OPERATORS","SPAN_TIME_RANGE_PRESETS","DEFAULT_TRACES_FILTERS"],"sources":["../../../../src/domains/spans/components/spans-filter-bar.tsx"],"sourcesContent":["import type { TraceQueryDiscoveryTimeRange } from '@mastra/react/hooks/traces';\nimport { DEFAULT_TRACES_FILTERS } from '../../traces/components/traces-explorer/traces-explorer-actions';\nimport { TRACE_FILTER_BAR_OPERATORS } from '../../traces/trace-filters';\nimport type { TraceFilterGroup, TraceFilterToken } from '../../traces/trace-query-filters';\nimport type { TraceDatePreset } from '../../traces/types';\nimport { SPAN_TIME_RANGE_PRESETS, useSpansFilterBar, useSpansFilterBarFields } from '../hooks/use-spans-filter-bar';\nimport { FilterBar } from '@/ds/components/FilterBar';\nimport { FILTER_BAR_TIME_RANGE_FIELD_ID } from '@/ds/components/FilterBar/filter-bar-time-range';\n\n// Items are rebuilt from tokens with `id: fieldId` (traceTokensToFilterBarItems); give the\n// draft that id so the chip survives the round trip without remounting.\nconst createItemId = (fieldId: string) => fieldId;\n\nexport type SpansFilterBarProps = {\n datePreset: TraceDatePreset;\n dateFrom?: Date;\n dateTo?: Date;\n /** Earliest date the custom range picker allows. /\n minDate?: Date;\n /* Window the value suggestions are looked up in. /\n timeRange: TraceQueryDiscoveryTimeRange;\n tokens: TraceFilterToken[];\n groups: TraceFilterGroup[];\n onDatePresetChange: (preset: TraceDatePreset) => void;\n onDateChange: (value: Date \| undefined, type: 'from' \| 'to') => void;\n onDateRangeChange: (from: Date \| undefined, to: Date \| undefined) => void;\n /* Called by the time range chip's × with the default preset, e.g. to undo a histogram zoom first. /\n onDateReset?: (defaultPreset: TraceDatePreset) => void;\n onFiltersChange: (tokens: TraceFilterToken[], groups: TraceFilterGroup[]) => void;\n /* Turns a failed value suggestions lookup into the message shown in the option list. /\n describeSuggestionsError?: (error: unknown) => string \| undefined;\n disabled?: boolean;\n};\n\n/* The spans filter bar: the time range plus the fields `querySpans()` accepts. */\nexport function SpansFilterBar({\n datePreset,\n dateFrom,\n dateTo,\n minDate,\n timeRange,\n tokens,\n groups,\n onDatePresetChange,\n onDateChange,\n onDateRangeChange,\n onDateReset,\n onFiltersChange,\n describeSuggestionsError,\n disabled,\n}: SpansFilterBarProps) {\n const fields = useSpansFilterBarFields({ timeRange });\n const { filterBarValue, onFilterBarChange } = useSpansFilterBar({ tokens, groups, onFiltersChange });\n\n return (\n <FilterBar\n fields={fields}\n operators={TRACE_FILTER_BAR_OPERATORS}\n value={filterBarValue}\n onValueChange={onFilterBarChange}\n createItemId={createItemId}\n describeSuggestionsError={describeSuggestionsError}\n maxDepth={3}\n aria-label=\"Span filters\"\n className=\"min-w-64 flex-1\"\n >\n <FilterBar.Chips\n renderChip={item =>\n item.fieldId === FILTER_BAR_TIME_RANGE_FIELD_ID ? (\n <FilterBar.TimeRange\n preset={datePreset}\n onPresetChange={onDatePresetChange}\n dateFrom={dateFrom}\n dateTo={dateTo}\n minDate={minDate}\n onDateChange={onDateChange}\n onDateRangeChange={onDateRangeChange}\n disabled={disabled}\n presets={SPAN_TIME_RANGE_PRESETS}\n defaultPreset={DEFAULT_TRACES_FILTERS.datePreset}\n onReset={onDateReset && (() => onDateReset(DEFAULT_TRACES_FILTERS.datePreset))}\n />\n ) : (\n <FilterBar.Chip item={item} />\n )\n }\n />\n <FilterBar.Input placeholder=\"Filter spans…\" />\n </FilterBar>\n );\n}\n"],"mappings":";;;;;;;;AAWA,IAAM,gBAAgB,YAAoB;;AAwB1C,SAAgB,eAAe,EAC7B,YACA,UACA,QACA,SACA,WACA,QACA,QACA,oBACA,cACA,mBACA,aACA,iBACA,0BACA,YACsB;CACtB,MAAM,SAASA,iDAAAA,wBAAwB,EAAE,UAAU,CAAC;CACpD,MAAM,EAAE,gBAAgB,sBAAsBC,iDAAAA,kBAAkB;EAAE;EAAQ;EAAQ;CAAgB,CAAC;CAEnG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,kBAAAA,WAAD;EACU;EACR,WAAWC,sBAAAA;EACX,OAAO;EACP,eAAe;EACD;EACY;EAC1B,UAAU;EACV,cAAW;EACX,WAAU;EATZ,UAAA,CAWE,iBAAA,GAAA,kBAAA,IAAA,CAACD,kBAAAA,UAAU,OAAX,EACE,aAAY,SACV,KAAK,YAAA,cACH,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,UAAU,WAAX;GACE,QAAQ;GACR,gBAAgB;GACN;GACF;GACC;GACK;GACK;GACT;GACV,SAASE,iDAAAA;GACT,eAAeC,0EAAAA,uBAAuB;GACtC,SAAS,sBAAsB,YAAYA,0EAAAA,uBAAuB,UAAU;EAC7E,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAACH,kBAAAA,UAAU,MAAX,EAAsB,KAAO,CAAA,EAGlC,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,UAAU,OAAX,EAAiB,aAAY,gBAAiB,CAAA,CACrC;;AAEf"}

package/dist/domains/spans/components/spans-filter-bar.es.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import { u as TRACE_FILTER_BAR_OPERATORS } from "../../../trace-filters-BJaebsxJ.js";
+import { u as TRACE_FILTER_BAR_OPERATORS } from "../../../trace-filters-CaWkw779.js";
 import { DEFAULT_TRACES_FILTERS } from "../../traces/components/traces-explorer/traces-explorer-actions.es.js";
-import { TraceTimeRangeChip } from "../../traces/components/trace-time-range-chip.es.js";
-import { n as FilterBar } from "../../../FilterBar--4oguuVe.js";
+import "../../../filter-bar-time-range-CXQMBgpz.js";
+import { n as FilterBar } from "../../../FilterBar-BO-vvvyq.js";
 import { SPAN_TIME_RANGE_PRESETS, useSpansFilterBar, useSpansFilterBarFields } from "../hooks/use-spans-filter-bar.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/spans/components/spans-filter-bar.tsx
 var createItemId = (fieldId) => fieldId;
-/** The spans filter bar: a time range chip plus the fields `querySpans()` accepts. */
+/** The spans filter bar: the time range plus the fields `querySpans()` accepts. */
 function SpansFilterBar({ datePreset, dateFrom, dateTo, minDate, timeRange, tokens, groups, onDatePresetChange, onDateChange, onDateRangeChange, onDateReset, onFiltersChange, describeSuggestionsError, disabled }) {
 	const fields = useSpansFilterBarFields({ timeRange });
 	const { filterBarValue, onFilterBarChange } = useSpansFilterBar({
@@ -24,7 +24,7 @@ function SpansFilterBar({ datePreset, dateFrom, dateTo, minDate, timeRange, toke
 		maxDepth: 3,
 		"aria-label": "Span filters",
 		className: "min-w-64 flex-1",
-		children: [/* @__PURE__ */ jsx(FilterBar.Chips, { renderChip: (item) => item.fieldId === "timeRange" ? /* @__PURE__ */ jsx(TraceTimeRangeChip, {
+		children: [/* @__PURE__ */ jsx(FilterBar.Chips, { renderChip: (item) => item.fieldId === "timeRange" ? /* @__PURE__ */ jsx(FilterBar.TimeRange, {
 			preset: datePreset,
 			onPresetChange: onDatePresetChange,
 			dateFrom,

package/dist/domains/spans/components/spans-filter-bar.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spans-filter-bar.es.js","names":[],"sources":["../../../../src/domains/spans/components/spans-filter-bar.tsx"],"sourcesContent":["import type { TraceQueryDiscoveryTimeRange } from '@mastra/react/hooks/traces';\nimport { ~~TraceTimeRangeChip, TRACE_TIME_RANGE_FIELD_ID } from '../../traces/components/trace-time-range-chip';\nimport {~~ DEFAULT_TRACES_FILTERS } from '../../traces/components/traces-explorer/traces-explorer-actions';\nimport { TRACE_FILTER_BAR_OPERATORS } from '../../traces/trace-filters';\nimport type { TraceFilterGroup, TraceFilterToken } from '../../traces/trace-query-filters';\nimport type { TraceDatePreset } from '../../traces/types';\nimport { SPAN_TIME_RANGE_PRESETS, useSpansFilterBar, useSpansFilterBarFields } from '../hooks/use-spans-filter-bar';\nimport { FilterBar } from '@/ds/components/FilterBar';\n\n// Items are rebuilt from tokens with `id: fieldId` (traceTokensToFilterBarItems); give the\n// draft that id so the chip survives the round trip without remounting.\nconst createItemId = (fieldId: string) => fieldId;\n\nexport type SpansFilterBarProps = {\n datePreset: TraceDatePreset;\n dateFrom?: Date;\n dateTo?: Date;\n /** Earliest date the custom range picker allows. /\n minDate?: Date;\n /* Window the value suggestions are looked up in. /\n timeRange: TraceQueryDiscoveryTimeRange;\n tokens: TraceFilterToken[];\n groups: TraceFilterGroup[];\n onDatePresetChange: (preset: TraceDatePreset) => void;\n onDateChange: (value: Date \| undefined, type: 'from' \| 'to') => void;\n onDateRangeChange: (from: Date \| undefined, to: Date \| undefined) => void;\n /* Called by the time range chip's × with the default preset, e.g. to undo a histogram zoom first. /\n onDateReset?: (defaultPreset: TraceDatePreset) => void;\n onFiltersChange: (tokens: TraceFilterToken[], groups: TraceFilterGroup[]) => void;\n /* Turns a failed value suggestions lookup into the message shown in the option list. /\n describeSuggestionsError?: (error: unknown) => string \| undefined;\n disabled?: boolean;\n};\n\n/* The spans filter bar: a time range ~~chip~~ plus the fields `querySpans()` accepts. */\nexport function SpansFilterBar({\n datePreset,\n dateFrom,\n dateTo,\n minDate,\n timeRange,\n tokens,\n groups,\n onDatePresetChange,\n onDateChange,\n onDateRangeChange,\n onDateReset,\n onFiltersChange,\n describeSuggestionsError,\n disabled,\n}: SpansFilterBarProps) {\n const fields = useSpansFilterBarFields({ timeRange });\n const { filterBarValue, onFilterBarChange } = useSpansFilterBar({ tokens, groups, onFiltersChange });\n\n return (\n <FilterBar\n fields={fields}\n operators={TRACE_FILTER_BAR_OPERATORS}\n value={filterBarValue}\n onValueChange={onFilterBarChange}\n createItemId={createItemId}\n describeSuggestionsError={describeSuggestionsError}\n maxDepth={3}\n aria-label=\"Span filters\"\n className=\"min-w-64 flex-1\"\n >\n <FilterBar.Chips\n renderChip={item =>\n item.fieldId === ~~TRACE_TIME_RANGE_FIELD_ID~~ ? (\n <~~TraceTimeRangeChip~~\n preset={datePreset}\n onPresetChange={onDatePresetChange}\n dateFrom={dateFrom}\n dateTo={dateTo}\n minDate={minDate}\n onDateChange={onDateChange}\n onDateRangeChange={onDateRangeChange}\n disabled={disabled}\n presets={SPAN_TIME_RANGE_PRESETS}\n defaultPreset={DEFAULT_TRACES_FILTERS.datePreset}\n onReset={onDateReset && (() => onDateReset(DEFAULT_TRACES_FILTERS.datePreset))}\n />\n ) : (\n <FilterBar.Chip item={item} />\n )\n }\n />\n <FilterBar.Input placeholder=\"Filter spans…\" />\n </FilterBar>\n );\n}\n"],"mappings":";;;;;;;AAWA,IAAM,gBAAgB,YAAoB;;AAwB1C,SAAgB,eAAe,EAC7B,YACA,UACA,QACA,SACA,WACA,QACA,QACA,oBACA,cACA,mBACA,aACA,iBACA,0BACA,YACsB;CACtB,MAAM,SAAS,wBAAwB,EAAE,UAAU,CAAC;CACpD,MAAM,EAAE,gBAAgB,sBAAsB,kBAAkB;EAAE;EAAQ;EAAQ;CAAgB,CAAC;CAEnG,OACE,qBAAC,WAAD;EACU;EACR,WAAW;EACX,OAAO;EACP,eAAe;EACD;EACY;EAC1B,UAAU;EACV,cAAW;EACX,WAAU;EATZ,UAAA,CAWE,oBAAC,UAAU,OAAX,EACE,aAAY,SACV,KAAK,YAAA,cACH,oBAAC,~~oBAAD~~;GACE,QAAQ;GACR,gBAAgB;GACN;GACF;GACC;GACK;GACK;GACT;GACV,SAAS;GACT,eAAe,uBAAuB;GACtC,SAAS,sBAAsB,YAAY,uBAAuB,UAAU;EAC7E,CAAA,IAED,oBAAC,UAAU,MAAX,EAAsB,KAAO,CAAA,EAGlC,CAAA,GACD,oBAAC,UAAU,OAAX,EAAiB,aAAY,gBAAiB,CAAA,CACrC;;AAEf"}
1	+ {"version":3,"file":"spans-filter-bar.es.js","names":[],"sources":["../../../../src/domains/spans/components/spans-filter-bar.tsx"],"sourcesContent":["import type { TraceQueryDiscoveryTimeRange } from '@mastra/react/hooks/traces';\nimport { DEFAULT_TRACES_FILTERS } from '../../traces/components/traces-explorer/traces-explorer-actions';\nimport { TRACE_FILTER_BAR_OPERATORS } from '../../traces/trace-filters';\nimport type { TraceFilterGroup, TraceFilterToken } from '../../traces/trace-query-filters';\nimport type { TraceDatePreset } from '../../traces/types';\nimport { SPAN_TIME_RANGE_PRESETS, useSpansFilterBar, useSpansFilterBarFields } from '../hooks/use-spans-filter-bar';\nimport { FilterBar } from '@/ds/components/FilterBar';\nimport { FILTER_BAR_TIME_RANGE_FIELD_ID } from '@/ds/components/FilterBar/filter-bar-time-range';\n\n// Items are rebuilt from tokens with `id: fieldId` (traceTokensToFilterBarItems); give the\n// draft that id so the chip survives the round trip without remounting.\nconst createItemId = (fieldId: string) => fieldId;\n\nexport type SpansFilterBarProps = {\n datePreset: TraceDatePreset;\n dateFrom?: Date;\n dateTo?: Date;\n /** Earliest date the custom range picker allows. /\n minDate?: Date;\n /* Window the value suggestions are looked up in. /\n timeRange: TraceQueryDiscoveryTimeRange;\n tokens: TraceFilterToken[];\n groups: TraceFilterGroup[];\n onDatePresetChange: (preset: TraceDatePreset) => void;\n onDateChange: (value: Date \| undefined, type: 'from' \| 'to') => void;\n onDateRangeChange: (from: Date \| undefined, to: Date \| undefined) => void;\n /* Called by the time range chip's × with the default preset, e.g. to undo a histogram zoom first. /\n onDateReset?: (defaultPreset: TraceDatePreset) => void;\n onFiltersChange: (tokens: TraceFilterToken[], groups: TraceFilterGroup[]) => void;\n /* Turns a failed value suggestions lookup into the message shown in the option list. /\n describeSuggestionsError?: (error: unknown) => string \| undefined;\n disabled?: boolean;\n};\n\n/* The spans filter bar: the time range plus the fields `querySpans()` accepts. */\nexport function SpansFilterBar({\n datePreset,\n dateFrom,\n dateTo,\n minDate,\n timeRange,\n tokens,\n groups,\n onDatePresetChange,\n onDateChange,\n onDateRangeChange,\n onDateReset,\n onFiltersChange,\n describeSuggestionsError,\n disabled,\n}: SpansFilterBarProps) {\n const fields = useSpansFilterBarFields({ timeRange });\n const { filterBarValue, onFilterBarChange } = useSpansFilterBar({ tokens, groups, onFiltersChange });\n\n return (\n <FilterBar\n fields={fields}\n operators={TRACE_FILTER_BAR_OPERATORS}\n value={filterBarValue}\n onValueChange={onFilterBarChange}\n createItemId={createItemId}\n describeSuggestionsError={describeSuggestionsError}\n maxDepth={3}\n aria-label=\"Span filters\"\n className=\"min-w-64 flex-1\"\n >\n <FilterBar.Chips\n renderChip={item =>\n item.fieldId === FILTER_BAR_TIME_RANGE_FIELD_ID ? (\n <FilterBar.TimeRange\n preset={datePreset}\n onPresetChange={onDatePresetChange}\n dateFrom={dateFrom}\n dateTo={dateTo}\n minDate={minDate}\n onDateChange={onDateChange}\n onDateRangeChange={onDateRangeChange}\n disabled={disabled}\n presets={SPAN_TIME_RANGE_PRESETS}\n defaultPreset={DEFAULT_TRACES_FILTERS.datePreset}\n onReset={onDateReset && (() => onDateReset(DEFAULT_TRACES_FILTERS.datePreset))}\n />\n ) : (\n <FilterBar.Chip item={item} />\n )\n }\n />\n <FilterBar.Input placeholder=\"Filter spans…\" />\n </FilterBar>\n );\n}\n"],"mappings":";;;;;;;AAWA,IAAM,gBAAgB,YAAoB;;AAwB1C,SAAgB,eAAe,EAC7B,YACA,UACA,QACA,SACA,WACA,QACA,QACA,oBACA,cACA,mBACA,aACA,iBACA,0BACA,YACsB;CACtB,MAAM,SAAS,wBAAwB,EAAE,UAAU,CAAC;CACpD,MAAM,EAAE,gBAAgB,sBAAsB,kBAAkB;EAAE;EAAQ;EAAQ;CAAgB,CAAC;CAEnG,OACE,qBAAC,WAAD;EACU;EACR,WAAW;EACX,OAAO;EACP,eAAe;EACD;EACY;EAC1B,UAAU;EACV,cAAW;EACX,WAAU;EATZ,UAAA,CAWE,oBAAC,UAAU,OAAX,EACE,aAAY,SACV,KAAK,YAAA,cACH,oBAAC,UAAU,WAAX;GACE,QAAQ;GACR,gBAAgB;GACN;GACF;GACC;GACK;GACK;GACT;GACV,SAAS;GACT,eAAe,uBAAuB;GACtC,SAAS,sBAAsB,YAAY,uBAAuB,UAAU;EAC7E,CAAA,IAED,oBAAC,UAAU,MAAX,EAAsB,KAAO,CAAA,EAGlC,CAAA,GACD,oBAAC,UAAU,OAAX,EAAiB,aAAY,gBAAiB,CAAA,CACrC;;AAEf"}

package/dist/domains/spans/hooks/use-spans-filter-bar.cjs.js CHANGED Viewed

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_trace_filters = require("../../../trace-filters-BNEZ31HX.cjs");
+const require_trace_filters = require("../../../trace-filters-a0N9bf52.cjs");
 const require_types = require("../../../types-CP7wbYua.cjs");
 const require_domains_spans_span_filters = require("../span-filters.cjs.js");
-const require_domains_traces_components_trace_time_range_chip = require("../../traces/components/trace-time-range-chip.cjs.js");
+const require_filter_bar_time_range = require("../../../filter-bar-time-range-DvuaFnkI.cjs");
 let react = require("react");
 let _mastra_react = require("@mastra/react");
 let _mastra_react_hooks_capabilities = require("@mastra/react/hooks/capabilities");
@@ -32,7 +32,7 @@ function useSpansFilterBarFields({ timeRange }) {
 	const withModelFields = capabilities?.capabilities.spanQueryModelFields ?? false;
 	const { data: entityNames = NO_SUGGESTIONS } = (0, _mastra_react_hooks_traces.useEntityNames)();
 	const { data: environments = NO_SUGGESTIONS } = (0, _mastra_react_hooks_traces.useEnvironments)();
-	return (0, react.useMemo)(() => [require_domains_traces_components_trace_time_range_chip.TRACE_TIME_RANGE_FIELD, ...require_domains_spans_span_filters.createSpanFilterBarFields({
+	return (0, react.useMemo)(() => [require_filter_bar_time_range.FILTER_BAR_TIME_RANGE_FIELD, ...require_domains_spans_span_filters.createSpanFilterBarFields({
 		withContextFields,
 		withTimeToFirstChunk,
 		withTimeToFirstToken,
@@ -55,7 +55,7 @@ function useSpansFilterBarFields({ timeRange }) {
 }
 /**
 * The span filters as a filter bar value, and the handlers that write bar edits back.
-* The time-range chip is a synthetic, always-present item; it never round-trips to tokens.
+* The time range is a synthetic, always-present item; it never round-trips to tokens.
 */
 function useSpansFilterBar({ tokens, groups, onFiltersChange }) {
 	const items = (0, react.useMemo)(() => require_trace_filters.traceTokensToFilterBarItems(tokens), [tokens]);
@@ -64,7 +64,7 @@ function useSpansFilterBar({ tokens, groups, onFiltersChange }) {
 		return {
 			...groupsExpression,
 			nodes: [
-				require_domains_traces_components_trace_time_range_chip.TRACE_TIME_RANGE_ITEM,
+				require_filter_bar_time_range.FILTER_BAR_TIME_RANGE_ITEM,
 				...items,
 				...groupsExpression.nodes
 			]