@mastra/playground-ui 56.0.0 → 57.0.0-alpha.0

package/dist/{span-payload-primitives-DnRsP93D.cjs.map → span-payload-primitives-BLKf0qn0.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"span-payload-primitives-DnRsP93D.cjs","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":["jsx","SpanPayloadJson","jsxs","BadgeWrapper","ToolCallPresentedHeader","presentTool","MarkdownRenderer","Collapsible","CollapsibleTrigger","ChevronRightIcon","CollapsibleContent"],"mappings":"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"}
+{"version":3,"file":"span-payload-primitives-BLKf0qn0.cjs","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":["jsx","SpanPayloadJson","jsxs","BadgeWrapper","ToolCallPresentedHeader","presentTool","MarkdownRenderer","Collapsible","CollapsibleTrigger","ChevronRightIcon","CollapsibleContent"],"mappings":"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"}

package/dist/{span-payload-primitives-sbxk4CHC.js → span-payload-primitives-CDLOoJfp.js}

@@ -4,7 +4,7 @@ import { SpanPayloadJson } from './domains/traces/components/span-payload/span-p
 import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-B2uUy8w5.js';
 import { M as MarkdownRenderer } from './markdown-renderer-B0gTm_Ea.js';
 import { BadgeWrapper } from './domains/chat/components/badge-wrapper.es.js';
-import { j as ToolCallPresentedHeader } from './tool-call-K147tCug.js';
+import { j as ToolCallPresentedHeader } from './tool-call-Du8XIzfo.js';
 import { p as presentTool } from './tool-presentation-D-smNbXC.js';
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -65,4 +65,4 @@ function SpanPayloadToolCalls({ toolCalls }) {
 }
 
 export { SpanPayloadField as S, SpanPayloadMarkdown as a, SpanPayloadToolCalls as b, SpanPayloadCollapsible as c, SpanPayloadLabel as d, SpanPayloadTool as e };
-//# sourceMappingURL=span-payload-primitives-sbxk4CHC.js.map
+//# sourceMappingURL=span-payload-primitives-CDLOoJfp.js.map

package/dist/{span-payload-primitives-sbxk4CHC.js.map → span-payload-primitives-CDLOoJfp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"span-payload-primitives-sbxk4CHC.js","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,QAAA,GAAW,CAAC,KAAA,KAChB,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,IAAQ,CAAC,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA;AAE9D,SAAS,eAAA,CAAgB,EAAE,KAAA,EAAO,SAAA,GAAY,MAAK,EAA4C;AACpG,EAAA,IAAI,CAAC,QAAA,CAAS,KAAK,GAAG,uBAAO,GAAA,CAAC,mBAAgB,KAAA,EAAc,CAAA;AAC5D,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,KAAS,iBAAA,GAAoB,MAAM,cAAA,GAAiB,KAAA;AACvE,EAAA,IAAI,CAAC,QAAA,CAAS,IAAI,CAAA,IAAK,OAAO,KAAK,QAAA,KAAa,QAAA,IAAY,CAAC,IAAA,CAAK,QAAA,EAAU;AAC1E,IAAA,uBAAO,GAAA,CAAC,mBAAgB,KAAA,EAAc,CAAA;AAAA,EACxC;AACA,EAAA,MAAM,KAAA,GAAQ,MAAA,IAAU,IAAA,GAAO,IAAA,CAAK,OAAO,IAAA,CAAK,KAAA;AAChD,EAAA,MAAM,MAAA,GAAS,QAAA,IAAY,IAAA,GAAO,IAAA,CAAK,SAAS,IAAA,CAAK,MAAA;AACrD,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,OAAA,KAAY,IAAA,IAAQ,KAAK,KAAA,KAAU,cAAA;AACtD,EAAA,MAAM,YAAY,OAAO,IAAA,CAAK,SAAA,KAAc,QAAA,GAAW,KAAK,SAAA,GAAY,MAAA;AACxE,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,qBAAA,EAC1C,QAAA,EAAA;AAAA,IAAA,SAAA,wBAAc,gBAAA,EAAA,EAAkB,QAAA,EAAA,KAAA,CAAM,IAAA,KAAS,aAAA,GAAgB,gBAAgB,WAAA,EAAY,CAAA;AAAA,oBAC5F,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,QAAQ,OAAA,GAAU,MAAA;AAAA,QAC1B,MAAA,sBAAS,uBAAA,EAAA,EAAyB,GAAG,YAAY,IAAA,CAAK,QAAA,EAAU,KAAK,CAAA,EAAG,CAAA;AAAA,QAExE,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA;AAAA,UAAA,KAAA,KAAU,MAAA,wBACR,gBAAA,EAAA,EAAiB,KAAA,EAAM,aACtB,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,KAAA,EAAO,CAAA,EACjC,CAAA;AAAA,UAED,MAAA,KAAW,MAAA,oBACV,GAAA,CAAC,gBAAA,EAAA,EAAiB,KAAA,EAAM,UACtB,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,MAAA,EAAQ,CAAA,EAClC,CAAA;AAAA,UAED,SAAA,KAAc,MAAA,oBACb,GAAA,CAAC,gBAAA,EAAA,EAAiB,KAAA,EAAM,SACtB,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,SAAA,EAAW,CAAA,EACrC;AAAA,SAAA,EAEJ;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;ACvCO,SAAS,gBAAA,CAAiB,EAAE,QAAA,EAAS,EAA4B;AACtE,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sDAAA,EAAwD,QAAA,EAAS,CAAA;AACzF;AAEO,SAAS,gBAAA,CAAiB,EAAE,KAAA,EAAO,QAAA,EAAS,EAA8C;AAC/F,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,oBAAA,EAAqB,WAAU,uBAAA,EAC5C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,oBAAkB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACxB;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,QAAA,EAAS,EAAyB;AACtE,EAAA,uBACE,GAAA,CAAC,SAAI,WAAA,EAAU,uBAAA,EAAwB,WAAU,2BAAA,EAC/C,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAS,CAAA,EAC9B,CAAA;AAEJ;AAGO,SAAS,sBAAA,CAAuB;AAAA,EACrC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAIG;AACD,EAAA,uBACE,IAAA,CAAC,eAAY,WAAA,EACX,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,kBAAA,EAAA,EAAmB,WAAU,6FAAA,EAC5B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA;AAAA,MACjB;AAAA,KAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAU,QAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACnD,CAAA;AAEJ;AAGO,SAAS,oBAAA,CAAqB,EAAE,SAAA,EAAU,EAA6B;AAC5E,EAAA,uBACE,GAAA,CAAC,QAAG,WAAA,EAAU,yBAAA,EAA0B,WAAU,qBAAA,EAC/C,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,yBACnB,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,mBAAgB,KAAA,EAAO,IAAA,EAAM,WAAW,KAAA,EAAO,CAAA,EAAA,EADzC,KAET,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-payload-primitives-CDLOoJfp.js","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{spinner-CqP-NaB2.cjs → spinner-BCpN7LL9.cjs}

@@ -8,7 +8,8 @@ const spinnerVariants = index.cva("spinner inline-block text-foreground", {
   variants: {
     size: {
       sm: "size-4",
-      md: "size-6"
+      md: "size-6",
+      lg: "size-8"
     },
     variant: {
       default: "",
@@ -24,13 +25,14 @@ function Spinner({
   className,
   size = "md",
   variant = "default",
+  fill = false,
   "aria-label": ariaLabel = "Loading",
   role = "status",
   ...props
 }) {
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "default";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const svg = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
       ...props,
@@ -47,7 +49,11 @@ function Spinner({
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
     }
   );
+  if (fill) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "spinner-fill", className: "flex h-full items-center-safe justify-center-safe", children: svg });
+  }
+  return svg;
 }
 
 exports.Spinner = Spinner;
-//# sourceMappingURL=spinner-CqP-NaB2.cjs.map
+//# sourceMappingURL=spinner-BCpN7LL9.cjs.map

package/dist/spinner-BCpN7LL9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-BCpN7LL9.cjs","sources":["../src/ds/components/Spinner/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './spinner.css';\n\nconst spinnerVariants = cva('spinner inline-block text-foreground', {\n  variants: {\n    size: {\n      sm: 'size-4',\n      md: 'size-6',\n      lg: 'size-8',\n    },\n    variant: {\n      default: '',\n      pulse: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;\nexport type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;\nexport type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;\n\nexport type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> &\n  SpinnerVariantsProps & {\n    /** Center the spinner in the full height of its parent — the parent must have a definite height. */\n    fill?: boolean;\n  };\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  fill = false,\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  const svg = (\n    <svg\n      {...props}\n      role={role}\n      aria-label={ariaLabel}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      className={cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n    >\n      {resolvedVariant === 'pulse' ? (\n        <>\n          <circle className=\"spinner-pulse-ring\" cx=\"12\" cy=\"12\" r=\"7\" />\n          <circle className=\"spinner-pulse-core\" cx=\"12\" cy=\"12\" r=\"5\" />\n        </>\n      ) : (\n        <circle className=\"spinner-ring\" cx=\"12\" cy=\"12\" r=\"8.5\" />\n      )}\n    </svg>\n  );\n\n  if (fill) {\n    return (\n      <div data-slot=\"spinner-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {svg}\n      </div>\n    );\n  }\n\n  return svg;\n}\n\nexport { Spinner };\n"],"names":["cva","jsx","cn","jsxs","Fragment"],"mappings":";;;;;;AAQA,MAAM,eAAA,GAAkBA,UAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAYD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,cAAc,SAAA,GAAY,SAAA;AAAA,EAC1B,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,eAAe,IAAA,IAAQ,IAAA;AAC7B,EAAA,MAAM,kBAAkB,OAAA,IAAW,SAAA;AAEnC,EAAA,MAAM,GAAA,mBACJC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAW,YAAA;AAAA,MACX,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAWC,WAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,cAAc,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1F,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MAEP,QAAA,EAAA,eAAA,KAAoB,0BACnBC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7DA,cAAA,CAAC,YAAO,SAAA,EAAU,oBAAA,EAAqB,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI;AAAA,OAAA,EAC/D,CAAA,mBAEAA,cAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,cAAA,EAAe,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM;AAAA;AAAA,GAE7D;AAGF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,sCACG,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAU,qDACrC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,GAAA;AACT;;;;"}

package/dist/{spinner-D2C2DYw8.js → spinner-ylbE0TJA.js}

@@ -6,7 +6,8 @@ import './spinner.css';const spinnerVariants = cva("spinner inline-block text-fo
   variants: {
     size: {
       sm: "size-4",
-      md: "size-6"
+      md: "size-6",
+      lg: "size-8"
     },
     variant: {
       default: "",
@@ -22,13 +23,14 @@ function Spinner({
   className,
   size = "md",
   variant = "default",
+  fill = false,
   "aria-label": ariaLabel = "Loading",
   role = "status",
   ...props
 }) {
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "default";
-  return /* @__PURE__ */ jsx(
+  const svg = /* @__PURE__ */ jsx(
     "svg",
     {
       ...props,
@@ -45,7 +47,11 @@ function Spinner({
       ] }) : /* @__PURE__ */ jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
     }
   );
+  if (fill) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "spinner-fill", className: "flex h-full items-center-safe justify-center-safe", children: svg });
+  }
+  return svg;
 }
 
 export { Spinner as S };
-//# sourceMappingURL=spinner-D2C2DYw8.js.map
+//# sourceMappingURL=spinner-ylbE0TJA.js.map

package/dist/spinner-ylbE0TJA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-ylbE0TJA.js","sources":["../src/ds/components/Spinner/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './spinner.css';\n\nconst spinnerVariants = cva('spinner inline-block text-foreground', {\n  variants: {\n    size: {\n      sm: 'size-4',\n      md: 'size-6',\n      lg: 'size-8',\n    },\n    variant: {\n      default: '',\n      pulse: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;\nexport type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;\nexport type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;\n\nexport type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> &\n  SpinnerVariantsProps & {\n    /** Center the spinner in the full height of its parent — the parent must have a definite height. */\n    fill?: boolean;\n  };\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  fill = false,\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  const svg = (\n    <svg\n      {...props}\n      role={role}\n      aria-label={ariaLabel}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      className={cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n    >\n      {resolvedVariant === 'pulse' ? (\n        <>\n          <circle className=\"spinner-pulse-ring\" cx=\"12\" cy=\"12\" r=\"7\" />\n          <circle className=\"spinner-pulse-core\" cx=\"12\" cy=\"12\" r=\"5\" />\n        </>\n      ) : (\n        <circle className=\"spinner-ring\" cx=\"12\" cy=\"12\" r=\"8.5\" />\n      )}\n    </svg>\n  );\n\n  if (fill) {\n    return (\n      <div data-slot=\"spinner-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {svg}\n      </div>\n    );\n  }\n\n  return svg;\n}\n\nexport { Spinner };\n"],"names":[],"mappings":";;;;AAQA,MAAM,eAAA,GAAkB,IAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAYD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,cAAc,SAAA,GAAY,SAAA;AAAA,EAC1B,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,eAAe,IAAA,IAAQ,IAAA;AAC7B,EAAA,MAAM,kBAAkB,OAAA,IAAW,SAAA;AAEnC,EAAA,MAAM,GAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAW,YAAA;AAAA,MACX,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,cAAc,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1F,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MAEP,QAAA,EAAA,eAAA,KAAoB,0BACnB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7D,GAAA,CAAC,YAAO,SAAA,EAAU,oBAAA,EAAqB,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI;AAAA,OAAA,EAC/D,CAAA,mBAEA,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,cAAA,EAAe,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM;AAAA;AAAA,GAE7D;AAGF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,2BACG,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAU,qDACrC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,GAAA;AACT;;;;"}

package/dist/src/domains/traces/components/traces-error-content.d.ts

@@ -10,7 +10,7 @@ export interface TracesErrorContentProps {
  * Renders the appropriate fallback content for a traces-related query error:
  * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<ErrorState />`.
  *
- * The consumer wraps it in whatever layout they want (NoDataPageLayout for the list page,
- * PageLayout.MainArea for the detail page, etc.) — this component only owns the 3-branch decision.
+ * The consumer wraps it in whatever layout they want (PageLayout for the list page,
+ * a centered div for the detail page, etc.) — this component only owns the 3-branch decision.
  */
 export declare function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps): import("react").JSX.Element;

package/dist/src/domains/traces/hooks/use-trace-url-state.d.ts

@@ -1,6 +1,6 @@
 import { TraceSpanView } from '../components/trace-data-panel-view';
 import { SpanTab, TraceDatePreset } from '../index';
-import { EntityOptions, TraceFilterToken, TraceListMode, TraceStatusFilter } from '../trace-filters';
+import { EntityOptions, TraceFilterGroup, TraceFilterToken, TraceListMode, TraceStatusFilter } from '../trace-filters';
 /** Minimal interface compatible with react-router's `setSearchParams`. */
 export type SetURLSearchParamsLike = (next: URLSearchParams | ((prev: URLSearchParams) => URLSearchParams), options?: {
     replace?: boolean;
@@ -36,6 +36,8 @@ export interface UseTraceUrlStateResult {
     selectedEntityOption: EntityOptions | undefined;
     selectedStatus: TraceStatusFilter | undefined;
     filterTokens: TraceFilterToken[];
+    /** Root-level advanced (AND/OR) filter groups, read from the `filterGroup` params. */
+    filterGroups: TraceFilterGroup[];
     /**
      * Selects a row. In traces mode pass just `traceId` (and optionally a `spanId` for an
      * initial span selection in the panel). In branches mode also pass `anchorSpanId` — the
@@ -61,7 +63,7 @@ export interface UseTraceUrlStateResult {
     handleHighlightSpans: (spanIds: string[]) => void;
     /** Switches the list view between traces and branches. Clears the current selection. */
     handleListModeChange: (mode: TraceListMode) => void;
-    handleFilterTokensChange: (nextTokens: TraceFilterToken[]) => void;
+    handleFilterTokensChange: (nextTokens: TraceFilterToken[], nextGroups?: TraceFilterGroup[]) => void;
     handleDateChange: (value: Date | undefined, type: 'from' | 'to') => void;
     /** Writes both ends of a custom range in one URL update (two `handleDateChange` calls in the
      *  same tick would clobber each other through react-router's closure-bound setter). */
@@ -69,7 +71,7 @@ export interface UseTraceUrlStateResult {
     handleDatePresetChange: (preset: TraceDatePreset) => void;
     handleRemoveAll: () => void;
     /** Lower-level helper used by `handleClear`: writes a token set and clears the trace/span selection. */
-    applyFilterTokens: (tokens: TraceFilterToken[]) => void;
+    applyFilterTokens: (tokens: TraceFilterToken[], groups?: TraceFilterGroup[]) => void;
 }
 /**
  * Owns all URL-derived state and URL-modifying handlers for the traces page. Routing-agnostic —

package/dist/src/domains/traces/trace-filters.d.ts

@@ -1,11 +1,12 @@
 import { EntityType } from '@mastra/core/observability';
 import { ListTracesArgs } from '@mastra/core/storage';
 import { TraceMetadataFilterField } from './hooks/use-trace-metadata-filter-fields';
-import { TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
+import { TraceFilterGroup, TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
 import { TraceDatePreset } from './types';
-import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSuggestionsResolver } from '../../ds/components/FilterBar/types';
+import { FilterBarExpression, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSuggestionsResolver } from '../../ds/components/FilterBar/types';
 import { PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
-export type { TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
+export type { TraceFilterGroup, TraceFilterLogic, TraceFilterNode, TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope, } from './trace-query-filters';
+export { isTraceFilterGroup } from './trace-query-filters';
 type EntityTypeValue = `${EntityType}`;
 export type EntityOptions = {
     label: string;
@@ -150,6 +151,13 @@ export declare function createTraceFilterBarFields({ availableRootEntityNames, a
  *  Only the legacy 'Any' sentinel is mapped back to an empty value. */
 export declare function traceTokensToFilterBarItems(tokens: TraceFilterToken[]): FilterBarItem[];
 export declare function filterBarItemsToTraceTokens(items: FilterBarItem[]): TraceFilterToken[];
+/** Expression-mode value for the FilterBar: root tokens as items, then one
+ *  group node per advanced filter. Ids inside groups are carried as-is. */
+export declare function traceFiltersToFilterBarExpression(tokens: TraceFilterToken[], groups: TraceFilterGroup[]): FilterBarExpression;
+export declare function filterBarExpressionToTraceFilters(expression: FilterBarExpression): {
+    tokens: TraceFilterToken[];
+    groups: TraceFilterGroup[];
+};
 /**
  * Read filter tokens from URL search params preserving the order in which each
  * filter was first added (URLSearchParams iterates in insertion order). This
@@ -164,7 +172,14 @@ export declare function getPreservedTraceFilterParams(searchParams: URLSearchPar
  * creation order of filters. Handles the generic `filterX` params plus the
  * dedicated synthetic params (rootEntityType, status).
  */
-export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: TraceFilterToken[]): void;
+export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: TraceFilterToken[], groups?: TraceFilterGroup[]): void;
+/** Root-level advanced filter groups live in a repeatable `filterGroup` param,
+ *  one compact JSON subtree each. Node ids are part of the payload so the
+ *  FilterBar keeps chip identity across URL round-trips. */
+export declare const TRACE_FILTER_GROUP_PARAM = "filterGroup";
+export declare const serializeTraceFilterGroup: (group: TraceFilterGroup) => string;
+export declare function getTraceFilterGroups(searchParams: URLSearchParams): TraceFilterGroup[];
+export declare function parseTraceFilterGroupParam(raw: string): TraceFilterGroup | undefined;
 export declare function buildTraceListFilters({ rootEntityType, status, dateFrom, dateTo, tokens, }: {
     rootEntityType?: string;
     status?: TraceStatusFilter;

package/dist/src/domains/traces/trace-query-filters.d.ts

@@ -8,7 +8,18 @@ export declare const isTraceFilterOperatorId: (value: string) => value is TraceF
 /** A trace filter chip: `operatorId` defaults to `is` (equality / set membership). */
 export type TraceFilterToken = PropertyFilterToken & {
     operatorId?: TraceFilterOperatorId;
+    /** Only set for tokens inside a group: a group may hold several tokens on the same field. */
+    id?: string;
 };
+export type TraceFilterLogic = 'and' | 'or';
+/** An advanced filter: a nested boolean combination of tokens. */
+export type TraceFilterGroup = {
+    id: string;
+    logic: TraceFilterLogic;
+    nodes: TraceFilterNode[];
+};
+export type TraceFilterNode = TraceFilterToken | TraceFilterGroup;
+export declare const isTraceFilterGroup: (node: TraceFilterNode) => node is TraceFilterGroup;
 /** Fields whose values must be sent as numbers. Non-numeric input is dropped. */
 export declare const TRACE_QUERY_NUMERIC_FIELD_IDS: Set<string>;
 /** Trace-level fields that may be unset. "is not X" on these must also keep traces
@@ -16,9 +27,10 @@ export declare const TRACE_QUERY_NUMERIC_FIELD_IDS: Set<string>;
 export declare const TRACE_QUERY_OPTIONAL_TRACE_FIELD_IDS: Set<string>;
 declare const TRACE_QUERY_RELATED_SCOPES: readonly ["spans", "scores", "feedback"];
 export type TraceQueryRelatedScope = (typeof TRACE_QUERY_RELATED_SCOPES)[number];
-export declare function buildTraceQueryRequest({ rootEntityType, status, dateFrom, dateTo, tokens, now, }: Omit<Parameters<typeof buildTraceListFilters>[0], 'tokens' | 'status'> & {
+export declare function buildTraceQueryRequest({ rootEntityType, status, dateFrom, dateTo, tokens, groups, now, }: Omit<Parameters<typeof buildTraceListFilters>[0], 'tokens' | 'status'> & {
     status?: TraceStatusFilter;
     tokens: TraceFilterToken[];
+    groups?: TraceFilterGroup[];
     now: Date;
 }): Pick<QueryTracesInput, 'timeRange' | 'where'>;
 export declare const TRACE_QUERY_DISCOVERY_MAX_RANGE_MS: number;

package/dist/src/ds/components/ActionRow/action-row.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+type DivProps = ComponentPropsWithoutRef<'div'>;
+/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
+export declare function ActionRowRoot({ className, ...props }: DivProps): import("react").JSX.Element;
+/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
+export declare function ActionRowStart({ className, ...props }: DivProps): import("react").JSX.Element;
+/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
+export declare function ActionRowEnd({ className, ...props }: DivProps): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/ActionRow/action-row.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ActionRow } from './index';
+declare const meta: Meta<typeof ActionRow>;
+export default meta;
+type Story = StoryObj<typeof ActionRow>;
+export declare const StartOnly: Story;
+export declare const StartAndEnd: Story;
+export declare const EndOnly: Story;

package/dist/src/ds/components/ActionRow/index.d.ts

@@ -0,0 +1,5 @@
+import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';
+export declare const ActionRow: typeof ActionRowRoot & {
+    Start: typeof ActionRowStart;
+    End: typeof ActionRowEnd;
+};

package/dist/src/ds/components/ButtonsGroup/buttons-group.stories.d.ts

@@ -36,14 +36,16 @@ export declare const WithText: Story;
  * `ButtonsGroup` merger; an interactive clear button would go in an `InputGroupAddon`
  * (`align="inline-end"`) with an `InputGroupButton`.
  *
- * No layout classes on the children (`flex-1`/`min-w-0`/`shrink-0`): the group owns sizing in
- * `spacing="close"` — the InputGroup fills the row and the Select trigger sizes to its content.
- * The group collapses the touching borders into a divider and flattens the inner corners,
- * leaving the outer pill rounded.
+ * No layout classes on the children (`flex-1`/`min-w-0`/`shrink-0`): the group owns sizing — the
+ * InputGroup fills the row and the Select trigger sizes to its content. The group collapses the
+ * touching borders into a divider and flattens the inner corners, leaving the outer pill rounded.
+ *
+ * Both segments sit on the same rung of the size ladder (`md`, the default on both): the group
+ * imposes no height of its own, so a segment on a different rung pokes out of the pill.
  *
  * Only one class is passed: `rounded-full` on the `SelectTrigger`, an intentional shape choice
  * so its outer corner matches the InputGroup pill (the trigger's standalone default is
- * `rounded-lg`). The `w-[420px]` on the group is just the demo container width.
+ * `rounded-lg`). The `w-105` on the group is just the demo container width.
  */
 export declare const SearchWithDropdown: Story;
 /**

package/dist/src/ds/components/EmptyState/EmptyState.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 export type EmptyStateProps = {
-    iconSlot: React.ReactNode;
+    /** Defaults to a circle-slash icon. Pass `null` to render no icon. */
+    iconSlot?: React.ReactNode;
     titleSlot: React.ReactNode;
     descriptionSlot?: React.ReactNode;
     actionSlot?: React.ReactNode;
     className?: string;
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * `inline` (default) renders the block in place.
+     * `fill` centers it in the full height of its parent — the parent must have a definite height.
+     */
+    variant?: 'inline' | 'fill';
 };
-export declare function EmptyState({ iconSlot, titleSlot, descriptionSlot, actionSlot, className, as: HeadingTag, }: EmptyStateProps): React.JSX.Element;
+export declare function EmptyState({ iconSlot, titleSlot, descriptionSlot, actionSlot, className, as: HeadingTag, variant, }: EmptyStateProps): React.JSX.Element;

package/dist/src/ds/components/EmptyState/empty-state.stories.d.ts

@@ -9,3 +9,4 @@ export declare const NoFiles: Story;
 export declare const NoTeamMembers: Story;
 export declare const WithoutAction: Story;
 export declare const CustomHeading: Story;
+export declare const Fill: Story;

package/dist/src/ds/components/ErrorState/ErrorState.d.ts

@@ -1,6 +1,8 @@
+import { EmptyStateProps } from '../EmptyState';
 export type ErrorStateProps = {
     title: string;
     message: string;
     action?: React.ReactNode;
+    variant?: EmptyStateProps['variant'];
 };
-export declare function ErrorState({ title, message, action }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ title, message, action, variant }: ErrorStateProps): import("react").JSX.Element;

package/dist/src/ds/components/ErrorState/error-state.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof ErrorState>;
 export declare const Default: Story;
 export declare const WithRecoveryAction: Story;
+export declare const Fill: Story;

package/dist/src/ds/components/FilterBar/filter-bar-advanced-chip.d.ts

@@ -0,0 +1,10 @@
+import { FilterBarGroup } from './types';
+export type FilterBarAdvancedChipProps = {
+    group: FilterBarGroup;
+    className?: string;
+};
+/**
+ * A root-level group rendered as one "Advanced filter" chip. Its popover hosts the
+ * recursive rule builder; the chip's remove button drops the whole subtree.
+ */
+export declare function FilterBarAdvancedChip({ group, className }: FilterBarAdvancedChipProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar-context.d.ts

@@ -1,30 +1,61 @@
 import { ReactNode } from 'react';
-import { FilterBarCommit, FilterBarDraft, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSegment, FilterBarValue } from './types';
+import { FilterBarValueInput } from './filter-bar-tree';
+import { FilterBarCommit, FilterBarDraft, FilterBarExpression, FilterBarField, FilterBarItem, FilterBarLogic, FilterBarOperator, FilterBarSegment, FilterBarValue } from './types';
+/** Default nesting bound for advanced-filter groups (root-level group = depth 1). */
+export declare const DEFAULT_MAX_GROUP_DEPTH = 3;
+/**
+ * Marks a focus scope: the bar and each open advanced-filter popover. Arrow navigation
+ * never crosses scopes, so ←/→ inside a popover cannot land back in the bar.
+ */
+export declare const FILTER_BAR_SCOPE_ATTR = "data-filter-bar-scope";
 export type FilterBarContextValue = {
     fields: FilterBarField[];
     operators: FilterBarOperator[];
+    /** Every rendered item in visual order (groups flattened), including leaving ones. */
     items: FilterBarItem[];
+    /** The rendered tree, including the pending commit and leaving nodes. */
+    expression: FilterBarExpression;
+    /** False when the consumer passed a flat `FilterBarItem[]`: no groups are offered. */
+    groupsEnabled: boolean;
+    /** Deepest allowed group nesting (root-level group = 1). */
+    maxDepth: number;
     /** Filter under construction in the input, once a field is picked; `null` otherwise. */
     draft: FilterBarDraft | null;
     /** Progress or reset the draft. Its id is assigned on first field pick and kept afterwards. */
-    setDraft: (next: Omit<FilterBarDraft, 'id' | 'from'> | null) => void;
+    setDraft: (next: Omit<FilterBarDraft, 'id' | 'from' | 'groupId'> | null) => void;
     /** Append an item for the draft, reusing its id so the draft chip becomes the item's chip. */
-    commitDraft: (next: Required<Omit<FilterBarDraft, 'id' | 'from'>>, value: FilterBarValue) => void;
+    commitDraft: (next: Required<Omit<FilterBarDraft, 'id' | 'from' | 'groupId'>>, value: FilterBarValue) => void;
     /** The draft that just became an item, until its chip has glinted or the bar moves on. */
     lastCommit: FilterBarCommit | null;
     settleCommit: () => void;
     updateItem: (id: string, patch: Partial<Omit<FilterBarItem, 'id'>>) => void;
+    /** Removes a leaf. Its group stays, even empty, until the popover closes (see `setOpenGroup`). */
     removeItem: (id: string) => void;
-    /** Ids of removed items still rendered while their chip plays its exit animation. */
+    /** Ids of removed items and groups still rendered while their chip plays its exit animation. */
     leaving: ReadonlySet<string>;
     /** Called by a leaving chip once its exit animation has finished (or when nothing animates). */
     settleRemove: (id: string) => void;
-    /** Removes every removable item (chips rendered with `removable={false}` stay). */
+    /** Removes every removable item (chips rendered with `removable={false}` stay) and every group left empty. */
     clear: () => void;
     /** Whether at least one item can be removed, i.e. whether Clear has anything to do. */
     hasRemovableItems: boolean;
     /** Called by chips so `clear` and the Clear button know which items are pinned. */
     registerNonRemovable: (itemId: string, nonRemovable: boolean) => void;
+    /** Appends an empty group to the root (`undefined`) or inside `parentId`, and points the input at it. */
+    addGroup: (parentId: string | undefined, logic: FilterBarLogic) => string;
+    /** Removes a group and everything below it. */
+    removeGroup: (groupId: string) => void;
+    setLogic: (groupId: string, logic: FilterBarLogic) => void;
+    /** Nesting level of a group (root-level = 1); 0 when unknown. */
+    getGroupDepth: (groupId: string) => number;
+    /** Root group whose advanced-filter popover is open. */
+    openGroupId: string | null;
+    /** Open a root group's popover, or close it with `null` (empty groups are pruned on close). */
+    setOpenGroup: (groupId: string | null) => void;
+    /** Group the input commits into; `undefined` = root. */
+    inputTarget: string | undefined;
+    /** Point the input at a group (or back at the root with `undefined`) and focus it. */
+    openGroupInput: (groupId: string | undefined) => void;
     getField: (fieldId: string) => FilterBarField | undefined;
     getOperator: (operatorId: string) => FilterBarOperator | undefined;
     /** Operators allowed for a field (`field.operators` or every root operator). */
@@ -34,7 +65,8 @@ export type FilterBarContextValue = {
     /**
      * Focus a segment of the nearest editable chip starting at `fromIndex` and
      * walking in `direction` (read-only chips register no segments and are skipped).
-     * Returns false if nothing was focused.
+     * Never leaves the focus scope of the currently focused element. Returns false if
+     * nothing was focused.
      */
     focusChip: (fromIndex: number, direction: -1 | 1, segment: FilterBarSegment) => boolean;
     focusInput: () => void;
@@ -50,10 +82,15 @@ export declare function emptyValueFor(operator: FilterBarOperator | undefined):
 export type FilterBarProviderProps = {
     fields: FilterBarField[];
     operators: FilterBarOperator[];
-    value: FilterBarItem[];
-    onValueChange: (items: FilterBarItem[]) => void;
+    value: FilterBarValueInput;
+    /** Receives the same shape as `value` (method syntax so flat-only handlers stay assignable). */
+    onValueChange(value: FilterBarValueInput): void;
+    /** Derives ids for root-level items only; items inside groups always get a random id
+     *  because a group may hold several conditions on the same field. */
     createItemId?: (fieldId: string) => string;
+    /** Deepest allowed group nesting (root-level group = 1). Defaults to 3. */
+    maxDepth?: number;
     ariaLabel: string;
     children: ReactNode;
 };
-export declare function FilterBarProvider({ fields, operators, value, onValueChange, createItemId, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;
+export declare function FilterBarProvider({ fields, operators, value, onValueChange, createItemId, maxDepth, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar-group-editor.d.ts

@@ -0,0 +1,25 @@
+import { FilterBarGroup, FilterBarLogic } from './types';
+export type FilterBarLogicToggleProps = {
+    groupId: string;
+    logic: FilterBarLogic;
+    className?: string;
+};
+/** `and` / `or` connector in front of a row; every connector of a group shares its logic. */
+export declare function FilterBarLogicToggle({ groupId, logic, className }: FilterBarLogicToggleProps): import("react").JSX.Element;
+export type FilterBarGroupEditorProps = {
+    group: FilterBarGroup;
+    /** Nesting level of `group` (root-level group = 1). */
+    depth: number;
+    /** Drops this group; rendered as a trailing `Clear all` in the footer. */
+    onRemove?: () => void;
+    removeLabel?: string;
+    className?: string;
+};
+/**
+ * Recursive rule builder shown in an advanced-filter popover. Rows are laid out as
+ * `connector | condition`: the first row reads `where`, the following ones carry the
+ * group's `and` / `or` toggle. Nested groups render as bordered cards with their own
+ * header (logic switch + remove) and footer. The shared typeahead input renders as the
+ * last row of the group it is pointed at.
+ */
+export declare function FilterBarGroupEditor({ group, depth, onRemove, removeLabel, className, }: FilterBarGroupEditorProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar-input.d.ts

@@ -2,9 +2,16 @@ export type FilterBarInputProps = {
     placeholder?: string;
     className?: string;
     'aria-label'?: string;
+    /**
+     * Group this instance commits into; omit for the bar's own input. Only the instance whose
+     * `groupId` matches the provider's `inputTarget` renders, so a single input is ever mounted.
+     */
+    groupId?: string;
+    /** Called when Escape is pressed on an empty query inside a group, after the input hands back to the bar. */
+    onLeave?: () => void;
 };
 /**
  * Typeahead entry point: type to pick a field, then an operator, then a value.
  * Focus never leaves the input; the popup is driven with the arrow keys.
  */
-export declare function FilterBarInput({ placeholder, className, 'aria-label': ariaLabel, }: FilterBarInputProps): import("react").JSX.Element;
+export declare function FilterBarInput(props: FilterBarInputProps): import("react").JSX.Element | null;

package/dist/src/ds/components/FilterBar/filter-bar-option-list.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { FilterBarOption } from './types';
 export type FilterBarOptionListProps<T> = {
     getKey: (option: T) => string;
     renderOption: (option: T) => ReactNode;
@@ -10,6 +11,10 @@ export type FilterBarOptionListProps<T> = {
     'aria-label': string;
     'aria-multiselectable'?: boolean;
 };
+/** Default value row: the option's leading node (avatar, swatch…) followed by its label. */
+export declare function FilterBarOptionLabel({ option }: {
+    option: FilterBarOption;
+}): import("react").JSX.Element;
 /**
  * List/status/empty rows for a `ComboboxPrimitive.Root`, laid out like the DS
  * `Combobox` popup (fluid hover highlight, scroller around the list). Items come