@mastra/playground-ui 66.0.0 → 66.0.1-alpha.0

package/dist/domains/traces/components/span-payload/span-payload-registry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-payload-registry.cjs.js","names":["getSpanSignal","describeSpanInput","SpanType","describeProcessorPipeline"],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-registry.ts"],"sourcesContent":["import { SpanType, describeProcessorPipeline, describeSpanInput } from '@mastra/core/observability';\nimport type { ProcessorRunInputByPhase, ProcessorSpanPayload } from '@mastra/core/observability';\nimport type { ComponentType } from 'react';\nimport type { SpanRecord } from '../../types';\nimport { getSpanSignal } from '@/domains/traces/utils/span-signal';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype CoreSpanRecord = Parameters<typeof describeSpanInput>[0];\n\ntype Described = { type: string; value: unknown };\n\n/** A component per description tag, typed against the value that tag carries. */\nexport type PayloadRegistry<D extends Described> = {\n  [T in D['type']]: ComponentType<{ value: Extract<D, { type: T }>['value'] }>;\n};\n\n/**\n * Picks the registry entry for `description.type`. The registry is exhaustive by type,\n * so the entry always exists; the cast only erases the per-tag prop refinement TS cannot\n * carry through an indexed lookup.\n */\nexport function pickRenderer<D extends Described>(\n  registry: PayloadRegistry<D>,\n  description: D,\n): ComponentType<{ value: D['value'] }> {\n  return registry[description.type as D['type']] as ComponentType<{ value: D['value'] }>;\n}\n\n/**\n * The client-js span (API response: ISO-string dates, string-literal enums) is the core\n * span over the wire. `describeSpan*` only read `spanType`, `metadata`, `input`, `output`\n * and `error`, which are identical in both, so this is the one place the two types meet.\n */\nexport function asCoreSpan(span: SpanRecord): CoreSpanRecord {\n  // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Generated SDK and core span types differ once workspace declarations are built.\n  return span as unknown as CoreSpanRecord;\n}\n\nexport const hasItems = (value: unknown): value is unknown[] => Array.isArray(value) && value.length > 0;\n\n/** Whether a span's input has a rendered preview, rather than only its raw JSON. */\nexport function hasSpanInputPreview(span: SpanRecord): boolean {\n  return getSpanSignal(span) !== undefined || describeSpanInput(asCoreSpan(span))?.type !== 'json';\n}\n\nconst isEmptyObject = (value: unknown) =>\n  typeof value === 'object' && value !== null && !Array.isArray(value) && Object.keys(value).length === 0;\n\n/**\n * Whether a processor ran the span. A processor can retype its span (memory\n * recall is a `memory_operation`), so the recorded phase counts as well as the type.\n */\nconst isProcessorSpan = (span: SpanRecord) =>\n  span.spanType === SpanType.PROCESSOR_RUN || describeProcessorPipeline(asCoreSpan(span)) !== undefined;\n\n/**\n * The output to show, or `undefined` when `{}` only means \"nothing\": a processor\n * that returned nothing, or a chunk that streamed no content (e.g. encrypted reasoning).\n */\nexport function getSpanOutputPayload(span: SpanRecord): unknown {\n  if (isEmptyObject(span.output) && (span.spanType === SpanType.MODEL_CHUNK || isProcessorSpan(span))) {\n    return undefined;\n  }\n  return span.output;\n}\n\nconst isCount = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n\nexport interface ProcessorRunContext {\n  stepNumber?: number;\n  retryCount?: number;\n  /** The assistant message the step is producing, not the user message that started the run. */\n  messageId?: string;\n}\n\n/**\n * Where in the generation the hook ran. The runner hands these values to every\n * hook, so they are recorded in `input`, but they describe the run rather than\n * what the processor read: Attributes shows them and the input preview skips them.\n * A key is present only when it holds a well-formed value, so a malformed one stays in the input.\n */\nexport function getProcessorRunContext(input: ProcessorSpanPayload<ProcessorRunInputByPhase>): ProcessorRunContext {\n  const { data } = input;\n  const stepNumber = 'stepNumber' in data ? data.stepNumber : undefined;\n  const retryCount = 'retryCount' in data ? data.retryCount : undefined;\n  const messageId = 'messageId' in data ? data.messageId : undefined;\n  return {\n    ...(isCount(stepNumber) ? { stepNumber } : {}),\n    ...(isCount(retryCount) ? { retryCount } : {}),\n    ...(typeof messageId === 'string' && messageId.length > 0 ? { messageId } : {}),\n  };\n}\n\n/** A tool offered to the model, with the id the tool registry knows it by. */\n/** Who a tool hands the work to when an agent exposes a workflow or sub-agent as a tool. */\nexport interface DelegatedTool {\n  kind: 'workflow' | 'agent';\n  /** The key the agent registered it under, which the workflow and agent pages resolve. */\n  key: string;\n}\n\nconst DELEGATED_TOOL = /^(workflow|agent)-(.+)$/;\n\n/**\n * The workflow or sub-agent behind a tool name, if it is one. Agents expose each\n * workflow they own as `workflow-<key>` and each sub-agent as `agent-<key>`.\n */\nexport function getDelegatedTool(toolName: string): DelegatedTool | undefined {\n  const match = DELEGATED_TOOL.exec(toolName);\n  if (!match?.[2]) return undefined;\n  return { kind: match[1] === 'workflow' ? 'workflow' : 'agent', key: match[2] };\n}\n\n/** The page of the workflow or sub-agent behind a tool name, or `''` when it is neither. */\nexport function getDelegatedToolHref(paths: LinkComponentPaths, toolName: string): string {\n  const delegated = getDelegatedTool(toolName);\n  if (!delegated) return '';\n  return delegated.kind === 'workflow' ? paths.workflowLink(delegated.key) : paths.agentLink(delegated.key);\n}\n\nexport interface SpanTool {\n  id: string;\n  description?: string;\n}\n\nexport interface SpanTools {\n  tools: SpanTool[];\n  /** The stored values the list was read from, for the JSON view. */\n  raw: { tools: unknown; toolChoice?: unknown };\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst textOf = (value: unknown) => (typeof value === 'string' && value.length > 0 ? value : undefined);\n\n/** Processor spans record `{ id, name }`, model spans `{ name }`, agent runs bare names. */\nfunction toTool(value: unknown): SpanTool | undefined {\n  if (typeof value === 'string') return value ? { id: value } : undefined;\n  if (!isRecord(value)) return undefined;\n  const id = textOf(value.id) ?? textOf(value.name);\n  if (!id) return undefined;\n  const description = textOf(value.description);\n  return description ? { id, description } : { id };\n}\n\n/**\n * The tools a span offered the model. A processor span records them in its\n * input; model spans record definitions in attributes, agent runs only names.\n */\nexport function getSpanTools(span: SpanRecord): SpanTools | undefined {\n  const input = describeSpanInput(asCoreSpan(span));\n  const data: Record<string, unknown> = input?.type === 'processor' ? input.value.data : {};\n  const attributes = span.attributes ?? {};\n  const [tools, toolChoice] = hasItems(data.tools)\n    ? [data.tools, data.toolChoice]\n    : hasItems(attributes.tools)\n      ? [attributes.tools, attributes.toolChoice]\n      : [attributes.availableTools, attributes.toolChoice];\n  if (!hasItems(tools)) return undefined;\n\n  const list = tools.map(toTool).filter((tool): tool is SpanTool => tool !== undefined);\n  if (list.length === 0) return undefined;\n  return { tools: list, raw: toolChoice === undefined ? { tools } : { tools, toolChoice } };\n}\n"],"mappings":"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"}
+{"version":3,"file":"span-payload-registry.cjs.js","names":["getSpanSignal","describeSpanInput","describeSpanOutput","SpanType","describeProcessorPipeline"],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-registry.ts"],"sourcesContent":["import { SpanType, describeProcessorPipeline, describeSpanInput, describeSpanOutput } from '@mastra/core/observability';\nimport type { ProcessorRunInputByPhase, ProcessorSpanPayload } from '@mastra/core/observability';\nimport type { ComponentType } from 'react';\nimport type { SpanRecord } from '../../types';\nimport { getSpanSignal } from '@/domains/traces/utils/span-signal';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype CoreSpanRecord = Parameters<typeof describeSpanInput>[0];\n\ntype Described = { type: string; value: unknown };\n\n/** A component per description tag, typed against the value that tag carries. */\nexport type PayloadRegistry<D extends Described> = {\n  [T in D['type']]: ComponentType<{ value: Extract<D, { type: T }>['value'] }>;\n};\n\n/**\n * Picks the registry entry for `description.type`. The registry is exhaustive by type,\n * so the entry always exists; the cast only erases the per-tag prop refinement TS cannot\n * carry through an indexed lookup.\n */\nexport function pickRenderer<D extends Described>(\n  registry: PayloadRegistry<D>,\n  description: D,\n): ComponentType<{ value: D['value'] }> {\n  return registry[description.type as D['type']] as ComponentType<{ value: D['value'] }>;\n}\n\n/**\n * The client-js span (API response: ISO-string dates, string-literal enums) is the core\n * span over the wire. `describeSpan*` only read `spanType`, `metadata`, `input`, `output`\n * and `error`, which are identical in both, so this is the one place the two types meet.\n */\nexport function asCoreSpan(span: SpanRecord): CoreSpanRecord {\n  // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Generated SDK and core span types differ once workspace declarations are built.\n  return span as unknown as CoreSpanRecord;\n}\n\nexport const hasItems = (value: unknown): value is unknown[] => Array.isArray(value) && value.length > 0;\n\n/** Whether a span's input has a rendered preview, rather than only its raw JSON. */\nexport function hasSpanInputPreview(span: SpanRecord): boolean {\n  return getSpanSignal(span) !== undefined || describeSpanInput(asCoreSpan(span))?.type !== 'json';\n}\n\nconst hasText = (value: unknown) => typeof value === 'string' && value.length > 0;\n\n/**\n * Whether a span's output has a rendered preview, rather than only its raw JSON.\n * A model result that only asked for tools has nothing to preview: its calls are listed under Tool calls.\n */\nexport function hasSpanOutputPreview(span: SpanRecord): boolean {\n  const description = describeSpanOutput(asCoreSpan(span));\n  switch (description?.type) {\n    case 'json':\n      return false;\n    case 'model-step-result': {\n      const { text, object, steps } = description.value;\n      return hasText(text) || object !== undefined || hasItems(steps);\n    }\n    case 'model-generation-result': {\n      const { text, reasoningText, reasoning, object, sources, files, warnings } = description.value;\n      return (\n        hasText(text) ||\n        typeof reasoningText === 'string' ||\n        reasoning !== undefined ||\n        object !== undefined ||\n        hasItems(sources) ||\n        hasItems(files) ||\n        hasItems(warnings)\n      );\n    }\n    default:\n      return true;\n  }\n}\n\nconst isEmptyObject = (value: unknown) =>\n  typeof value === 'object' && value !== null && !Array.isArray(value) && Object.keys(value).length === 0;\n\n/**\n * Whether a processor ran the span. A processor can retype its span (memory\n * recall is a `memory_operation`), so the recorded phase counts as well as the type.\n */\nconst isProcessorSpan = (span: SpanRecord) =>\n  span.spanType === SpanType.PROCESSOR_RUN || describeProcessorPipeline(asCoreSpan(span)) !== undefined;\n\n/**\n * The output to show, or `undefined` when `{}` only means \"nothing\": a processor\n * that returned nothing, or a chunk that streamed no content (e.g. encrypted reasoning).\n */\nexport function getSpanOutputPayload(span: SpanRecord): unknown {\n  if (isEmptyObject(span.output) && (span.spanType === SpanType.MODEL_CHUNK || isProcessorSpan(span))) {\n    return undefined;\n  }\n  return span.output;\n}\n\n/** A tool offered to the model, with the id the tool registry knows it by. */\n/** Who a tool hands the work to when an agent exposes a workflow or sub-agent as a tool. */\nexport interface DelegatedTool {\n  kind: 'workflow' | 'agent';\n  /** The key the agent registered it under, which the workflow and agent pages resolve. */\n  key: string;\n}\n\nconst DELEGATED_TOOL = /^(workflow|agent)-(.+)$/;\n\n/**\n * The workflow or sub-agent behind a tool name, if it is one. Agents expose each\n * workflow they own as `workflow-<key>` and each sub-agent as `agent-<key>`.\n */\nexport function getDelegatedTool(toolName: string): DelegatedTool | undefined {\n  const match = DELEGATED_TOOL.exec(toolName);\n  if (!match?.[2]) return undefined;\n  return { kind: match[1] === 'workflow' ? 'workflow' : 'agent', key: match[2] };\n}\n\n/** The page of the workflow or sub-agent behind a tool name, or `''` when it is neither. */\nexport function getDelegatedToolHref(paths: LinkComponentPaths, toolName: string): string {\n  const delegated = getDelegatedTool(toolName);\n  if (!delegated) return '';\n  return delegated.kind === 'workflow' ? paths.workflowLink(delegated.key) : paths.agentLink(delegated.key);\n}\n\nexport interface SpanTool {\n  id: string;\n  description?: string;\n}\n\nexport interface SpanTools {\n  tools: SpanTool[];\n  /** The stored values the list was read from, for the JSON view. */\n  raw: { tools: unknown; toolChoice?: unknown };\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst textOf = (value: unknown) => (typeof value === 'string' && value.length > 0 ? value : undefined);\n\n/** Processor spans record `{ id, name }`, model spans `{ name }`, agent runs bare names. */\nfunction toTool(value: unknown): SpanTool | undefined {\n  if (typeof value === 'string') return value ? { id: value } : undefined;\n  if (!isRecord(value)) return undefined;\n  const id = textOf(value.id) ?? textOf(value.name);\n  if (!id) return undefined;\n  const description = textOf(value.description);\n  return description ? { id, description } : { id };\n}\n\n/**\n * The tools a span offered the model. A processor span records them in its\n * input; model spans record definitions in attributes, agent runs only names.\n */\nexport function getSpanTools(span: SpanRecord): SpanTools | undefined {\n  const input = describeSpanInput(asCoreSpan(span));\n  const data: Record<string, unknown> = input?.type === 'processor' ? input.value.data : {};\n  const attributes = span.attributes ?? {};\n  const [tools, toolChoice] = hasItems(data.tools)\n    ? [data.tools, data.toolChoice]\n    : hasItems(attributes.tools)\n      ? [attributes.tools, attributes.toolChoice]\n      : [attributes.availableTools, attributes.toolChoice];\n  if (!hasItems(tools)) return undefined;\n\n  const list = tools.map(toTool).filter((tool): tool is SpanTool => tool !== undefined);\n  if (list.length === 0) return undefined;\n  return { tools: list, raw: toolChoice === undefined ? { tools } : { tools, toolChoice } };\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/span-payload/span-payload-registry.es.js

@@ -1,5 +1,5 @@
 import { getSpanSignal } from "../../utils/span-signal.es.js";
-import { SpanType, describeProcessorPipeline, describeSpanInput } from "@mastra/core/observability";
+import { SpanType, describeProcessorPipeline, describeSpanInput, describeSpanOutput } from "@mastra/core/observability";
 // src/domains/traces/components/span-payload/span-payload-registry.ts
 /**
 * Picks the registry entry for `description.type`. The registry is exhaustive by type,
@@ -22,6 +22,26 @@ var hasItems = (value) => Array.isArray(value) && value.length > 0;
 function hasSpanInputPreview(span) {
 	return getSpanSignal(span) !== void 0 || describeSpanInput(asCoreSpan(span))?.type !== "json";
 }
+var hasText = (value) => typeof value === "string" && value.length > 0;
+/**
+* Whether a span's output has a rendered preview, rather than only its raw JSON.
+* A model result that only asked for tools has nothing to preview: its calls are listed under Tool calls.
+*/
+function hasSpanOutputPreview(span) {
+	const description = describeSpanOutput(asCoreSpan(span));
+	switch (description?.type) {
+		case "json": return false;
+		case "model-step-result": {
+			const { text, object, steps } = description.value;
+			return hasText(text) || object !== void 0 || hasItems(steps);
+		}
+		case "model-generation-result": {
+			const { text, reasoningText, reasoning, object, sources, files, warnings } = description.value;
+			return hasText(text) || typeof reasoningText === "string" || reasoning !== void 0 || object !== void 0 || hasItems(sources) || hasItems(files) || hasItems(warnings);
+		}
+		default: return true;
+	}
+}
 var isEmptyObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.keys(value).length === 0;
 /**
 * Whether a processor ran the span. A processor can retype its span (memory
@@ -36,24 +56,6 @@ function getSpanOutputPayload(span) {
 	if (isEmptyObject(span.output) && (span.spanType === SpanType.MODEL_CHUNK || isProcessorSpan(span))) return;
 	return span.output;
 }
-var isCount = (value) => typeof value === "number" && Number.isFinite(value);
-/**
-* Where in the generation the hook ran. The runner hands these values to every
-* hook, so they are recorded in `input`, but they describe the run rather than
-* what the processor read: Attributes shows them and the input preview skips them.
-* A key is present only when it holds a well-formed value, so a malformed one stays in the input.
-*/
-function getProcessorRunContext(input) {
-	const { data } = input;
-	const stepNumber = "stepNumber" in data ? data.stepNumber : void 0;
-	const retryCount = "retryCount" in data ? data.retryCount : void 0;
-	const messageId = "messageId" in data ? data.messageId : void 0;
-	return {
-		...isCount(stepNumber) ? { stepNumber } : {},
-		...isCount(retryCount) ? { retryCount } : {},
-		...typeof messageId === "string" && messageId.length > 0 ? { messageId } : {}
-	};
-}
 var DELEGATED_TOOL = /^(workflow|agent)-(.+)$/;
 /**
 * The workflow or sub-agent behind a tool name, if it is one. Agents expose each
@@ -107,6 +109,6 @@ function getSpanTools(span) {
 		}
 	};
 }
-export { asCoreSpan, getDelegatedTool, getDelegatedToolHref, getProcessorRunContext, getSpanOutputPayload, getSpanTools, hasItems, hasSpanInputPreview, pickRenderer };
+export { asCoreSpan, getDelegatedTool, getDelegatedToolHref, getSpanOutputPayload, getSpanTools, hasItems, hasSpanInputPreview, hasSpanOutputPreview, pickRenderer };
 
 //# sourceMappingURL=span-payload-registry.es.js.map

package/dist/domains/traces/components/span-payload/span-payload-registry.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-payload-registry.es.js","names":[],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-registry.ts"],"sourcesContent":["import { SpanType, describeProcessorPipeline, describeSpanInput } from '@mastra/core/observability';\nimport type { ProcessorRunInputByPhase, ProcessorSpanPayload } from '@mastra/core/observability';\nimport type { ComponentType } from 'react';\nimport type { SpanRecord } from '../../types';\nimport { getSpanSignal } from '@/domains/traces/utils/span-signal';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype CoreSpanRecord = Parameters<typeof describeSpanInput>[0];\n\ntype Described = { type: string; value: unknown };\n\n/** A component per description tag, typed against the value that tag carries. */\nexport type PayloadRegistry<D extends Described> = {\n  [T in D['type']]: ComponentType<{ value: Extract<D, { type: T }>['value'] }>;\n};\n\n/**\n * Picks the registry entry for `description.type`. The registry is exhaustive by type,\n * so the entry always exists; the cast only erases the per-tag prop refinement TS cannot\n * carry through an indexed lookup.\n */\nexport function pickRenderer<D extends Described>(\n  registry: PayloadRegistry<D>,\n  description: D,\n): ComponentType<{ value: D['value'] }> {\n  return registry[description.type as D['type']] as ComponentType<{ value: D['value'] }>;\n}\n\n/**\n * The client-js span (API response: ISO-string dates, string-literal enums) is the core\n * span over the wire. `describeSpan*` only read `spanType`, `metadata`, `input`, `output`\n * and `error`, which are identical in both, so this is the one place the two types meet.\n */\nexport function asCoreSpan(span: SpanRecord): CoreSpanRecord {\n  // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Generated SDK and core span types differ once workspace declarations are built.\n  return span as unknown as CoreSpanRecord;\n}\n\nexport const hasItems = (value: unknown): value is unknown[] => Array.isArray(value) && value.length > 0;\n\n/** Whether a span's input has a rendered preview, rather than only its raw JSON. */\nexport function hasSpanInputPreview(span: SpanRecord): boolean {\n  return getSpanSignal(span) !== undefined || describeSpanInput(asCoreSpan(span))?.type !== 'json';\n}\n\nconst isEmptyObject = (value: unknown) =>\n  typeof value === 'object' && value !== null && !Array.isArray(value) && Object.keys(value).length === 0;\n\n/**\n * Whether a processor ran the span. A processor can retype its span (memory\n * recall is a `memory_operation`), so the recorded phase counts as well as the type.\n */\nconst isProcessorSpan = (span: SpanRecord) =>\n  span.spanType === SpanType.PROCESSOR_RUN || describeProcessorPipeline(asCoreSpan(span)) !== undefined;\n\n/**\n * The output to show, or `undefined` when `{}` only means \"nothing\": a processor\n * that returned nothing, or a chunk that streamed no content (e.g. encrypted reasoning).\n */\nexport function getSpanOutputPayload(span: SpanRecord): unknown {\n  if (isEmptyObject(span.output) && (span.spanType === SpanType.MODEL_CHUNK || isProcessorSpan(span))) {\n    return undefined;\n  }\n  return span.output;\n}\n\nconst isCount = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n\nexport interface ProcessorRunContext {\n  stepNumber?: number;\n  retryCount?: number;\n  /** The assistant message the step is producing, not the user message that started the run. */\n  messageId?: string;\n}\n\n/**\n * Where in the generation the hook ran. The runner hands these values to every\n * hook, so they are recorded in `input`, but they describe the run rather than\n * what the processor read: Attributes shows them and the input preview skips them.\n * A key is present only when it holds a well-formed value, so a malformed one stays in the input.\n */\nexport function getProcessorRunContext(input: ProcessorSpanPayload<ProcessorRunInputByPhase>): ProcessorRunContext {\n  const { data } = input;\n  const stepNumber = 'stepNumber' in data ? data.stepNumber : undefined;\n  const retryCount = 'retryCount' in data ? data.retryCount : undefined;\n  const messageId = 'messageId' in data ? data.messageId : undefined;\n  return {\n    ...(isCount(stepNumber) ? { stepNumber } : {}),\n    ...(isCount(retryCount) ? { retryCount } : {}),\n    ...(typeof messageId === 'string' && messageId.length > 0 ? { messageId } : {}),\n  };\n}\n\n/** A tool offered to the model, with the id the tool registry knows it by. */\n/** Who a tool hands the work to when an agent exposes a workflow or sub-agent as a tool. */\nexport interface DelegatedTool {\n  kind: 'workflow' | 'agent';\n  /** The key the agent registered it under, which the workflow and agent pages resolve. */\n  key: string;\n}\n\nconst DELEGATED_TOOL = /^(workflow|agent)-(.+)$/;\n\n/**\n * The workflow or sub-agent behind a tool name, if it is one. Agents expose each\n * workflow they own as `workflow-<key>` and each sub-agent as `agent-<key>`.\n */\nexport function getDelegatedTool(toolName: string): DelegatedTool | undefined {\n  const match = DELEGATED_TOOL.exec(toolName);\n  if (!match?.[2]) return undefined;\n  return { kind: match[1] === 'workflow' ? 'workflow' : 'agent', key: match[2] };\n}\n\n/** The page of the workflow or sub-agent behind a tool name, or `''` when it is neither. */\nexport function getDelegatedToolHref(paths: LinkComponentPaths, toolName: string): string {\n  const delegated = getDelegatedTool(toolName);\n  if (!delegated) return '';\n  return delegated.kind === 'workflow' ? paths.workflowLink(delegated.key) : paths.agentLink(delegated.key);\n}\n\nexport interface SpanTool {\n  id: string;\n  description?: string;\n}\n\nexport interface SpanTools {\n  tools: SpanTool[];\n  /** The stored values the list was read from, for the JSON view. */\n  raw: { tools: unknown; toolChoice?: unknown };\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst textOf = (value: unknown) => (typeof value === 'string' && value.length > 0 ? value : undefined);\n\n/** Processor spans record `{ id, name }`, model spans `{ name }`, agent runs bare names. */\nfunction toTool(value: unknown): SpanTool | undefined {\n  if (typeof value === 'string') return value ? { id: value } : undefined;\n  if (!isRecord(value)) return undefined;\n  const id = textOf(value.id) ?? textOf(value.name);\n  if (!id) return undefined;\n  const description = textOf(value.description);\n  return description ? { id, description } : { id };\n}\n\n/**\n * The tools a span offered the model. A processor span records them in its\n * input; model spans record definitions in attributes, agent runs only names.\n */\nexport function getSpanTools(span: SpanRecord): SpanTools | undefined {\n  const input = describeSpanInput(asCoreSpan(span));\n  const data: Record<string, unknown> = input?.type === 'processor' ? input.value.data : {};\n  const attributes = span.attributes ?? {};\n  const [tools, toolChoice] = hasItems(data.tools)\n    ? [data.tools, data.toolChoice]\n    : hasItems(attributes.tools)\n      ? [attributes.tools, attributes.toolChoice]\n      : [attributes.availableTools, attributes.toolChoice];\n  if (!hasItems(tools)) return undefined;\n\n  const list = tools.map(toTool).filter((tool): tool is SpanTool => tool !== undefined);\n  if (list.length === 0) return undefined;\n  return { tools: list, raw: toolChoice === undefined ? { tools } : { tools, toolChoice } };\n}\n"],"mappings":"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"}
+{"version":3,"file":"span-payload-registry.es.js","names":[],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-registry.ts"],"sourcesContent":["import { SpanType, describeProcessorPipeline, describeSpanInput, describeSpanOutput } from '@mastra/core/observability';\nimport type { ProcessorRunInputByPhase, ProcessorSpanPayload } from '@mastra/core/observability';\nimport type { ComponentType } from 'react';\nimport type { SpanRecord } from '../../types';\nimport { getSpanSignal } from '@/domains/traces/utils/span-signal';\nimport type { LinkComponentPaths } from '@/lib/framework';\n\ntype CoreSpanRecord = Parameters<typeof describeSpanInput>[0];\n\ntype Described = { type: string; value: unknown };\n\n/** A component per description tag, typed against the value that tag carries. */\nexport type PayloadRegistry<D extends Described> = {\n  [T in D['type']]: ComponentType<{ value: Extract<D, { type: T }>['value'] }>;\n};\n\n/**\n * Picks the registry entry for `description.type`. The registry is exhaustive by type,\n * so the entry always exists; the cast only erases the per-tag prop refinement TS cannot\n * carry through an indexed lookup.\n */\nexport function pickRenderer<D extends Described>(\n  registry: PayloadRegistry<D>,\n  description: D,\n): ComponentType<{ value: D['value'] }> {\n  return registry[description.type as D['type']] as ComponentType<{ value: D['value'] }>;\n}\n\n/**\n * The client-js span (API response: ISO-string dates, string-literal enums) is the core\n * span over the wire. `describeSpan*` only read `spanType`, `metadata`, `input`, `output`\n * and `error`, which are identical in both, so this is the one place the two types meet.\n */\nexport function asCoreSpan(span: SpanRecord): CoreSpanRecord {\n  // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- Generated SDK and core span types differ once workspace declarations are built.\n  return span as unknown as CoreSpanRecord;\n}\n\nexport const hasItems = (value: unknown): value is unknown[] => Array.isArray(value) && value.length > 0;\n\n/** Whether a span's input has a rendered preview, rather than only its raw JSON. */\nexport function hasSpanInputPreview(span: SpanRecord): boolean {\n  return getSpanSignal(span) !== undefined || describeSpanInput(asCoreSpan(span))?.type !== 'json';\n}\n\nconst hasText = (value: unknown) => typeof value === 'string' && value.length > 0;\n\n/**\n * Whether a span's output has a rendered preview, rather than only its raw JSON.\n * A model result that only asked for tools has nothing to preview: its calls are listed under Tool calls.\n */\nexport function hasSpanOutputPreview(span: SpanRecord): boolean {\n  const description = describeSpanOutput(asCoreSpan(span));\n  switch (description?.type) {\n    case 'json':\n      return false;\n    case 'model-step-result': {\n      const { text, object, steps } = description.value;\n      return hasText(text) || object !== undefined || hasItems(steps);\n    }\n    case 'model-generation-result': {\n      const { text, reasoningText, reasoning, object, sources, files, warnings } = description.value;\n      return (\n        hasText(text) ||\n        typeof reasoningText === 'string' ||\n        reasoning !== undefined ||\n        object !== undefined ||\n        hasItems(sources) ||\n        hasItems(files) ||\n        hasItems(warnings)\n      );\n    }\n    default:\n      return true;\n  }\n}\n\nconst isEmptyObject = (value: unknown) =>\n  typeof value === 'object' && value !== null && !Array.isArray(value) && Object.keys(value).length === 0;\n\n/**\n * Whether a processor ran the span. A processor can retype its span (memory\n * recall is a `memory_operation`), so the recorded phase counts as well as the type.\n */\nconst isProcessorSpan = (span: SpanRecord) =>\n  span.spanType === SpanType.PROCESSOR_RUN || describeProcessorPipeline(asCoreSpan(span)) !== undefined;\n\n/**\n * The output to show, or `undefined` when `{}` only means \"nothing\": a processor\n * that returned nothing, or a chunk that streamed no content (e.g. encrypted reasoning).\n */\nexport function getSpanOutputPayload(span: SpanRecord): unknown {\n  if (isEmptyObject(span.output) && (span.spanType === SpanType.MODEL_CHUNK || isProcessorSpan(span))) {\n    return undefined;\n  }\n  return span.output;\n}\n\n/** A tool offered to the model, with the id the tool registry knows it by. */\n/** Who a tool hands the work to when an agent exposes a workflow or sub-agent as a tool. */\nexport interface DelegatedTool {\n  kind: 'workflow' | 'agent';\n  /** The key the agent registered it under, which the workflow and agent pages resolve. */\n  key: string;\n}\n\nconst DELEGATED_TOOL = /^(workflow|agent)-(.+)$/;\n\n/**\n * The workflow or sub-agent behind a tool name, if it is one. Agents expose each\n * workflow they own as `workflow-<key>` and each sub-agent as `agent-<key>`.\n */\nexport function getDelegatedTool(toolName: string): DelegatedTool | undefined {\n  const match = DELEGATED_TOOL.exec(toolName);\n  if (!match?.[2]) return undefined;\n  return { kind: match[1] === 'workflow' ? 'workflow' : 'agent', key: match[2] };\n}\n\n/** The page of the workflow or sub-agent behind a tool name, or `''` when it is neither. */\nexport function getDelegatedToolHref(paths: LinkComponentPaths, toolName: string): string {\n  const delegated = getDelegatedTool(toolName);\n  if (!delegated) return '';\n  return delegated.kind === 'workflow' ? paths.workflowLink(delegated.key) : paths.agentLink(delegated.key);\n}\n\nexport interface SpanTool {\n  id: string;\n  description?: string;\n}\n\nexport interface SpanTools {\n  tools: SpanTool[];\n  /** The stored values the list was read from, for the JSON view. */\n  raw: { tools: unknown; toolChoice?: unknown };\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst textOf = (value: unknown) => (typeof value === 'string' && value.length > 0 ? value : undefined);\n\n/** Processor spans record `{ id, name }`, model spans `{ name }`, agent runs bare names. */\nfunction toTool(value: unknown): SpanTool | undefined {\n  if (typeof value === 'string') return value ? { id: value } : undefined;\n  if (!isRecord(value)) return undefined;\n  const id = textOf(value.id) ?? textOf(value.name);\n  if (!id) return undefined;\n  const description = textOf(value.description);\n  return description ? { id, description } : { id };\n}\n\n/**\n * The tools a span offered the model. A processor span records them in its\n * input; model spans record definitions in attributes, agent runs only names.\n */\nexport function getSpanTools(span: SpanRecord): SpanTools | undefined {\n  const input = describeSpanInput(asCoreSpan(span));\n  const data: Record<string, unknown> = input?.type === 'processor' ? input.value.data : {};\n  const attributes = span.attributes ?? {};\n  const [tools, toolChoice] = hasItems(data.tools)\n    ? [data.tools, data.toolChoice]\n    : hasItems(attributes.tools)\n      ? [attributes.tools, attributes.toolChoice]\n      : [attributes.availableTools, attributes.toolChoice];\n  if (!hasItems(tools)) return undefined;\n\n  const list = tools.map(toTool).filter((tool): tool is SpanTool => tool !== undefined);\n  if (list.length === 0) return undefined;\n  return { tools: list, raw: toolChoice === undefined ? { tools } : { tools, toolChoice } };\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,aACd,UACA,aACsC;CACtC,OAAO,SAAS,YAAY;AAC9B;;;;;;AAOA,SAAgB,WAAW,MAAkC;CAE3D,OAAO;AACT;AAEA,IAAa,YAAY,UAAuC,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS;;AAGvG,SAAgB,oBAAoB,MAA2B;CAC7D,OAAO,cAAc,IAAI,MAAM,KAAA,KAAa,kBAAkB,WAAW,IAAI,CAAC,CAAC,EAAE,SAAS;AAC5F;AAEA,IAAM,WAAW,UAAmB,OAAO,UAAU,YAAY,MAAM,SAAS;;;;;AAMhF,SAAgB,qBAAqB,MAA2B;CAC9D,MAAM,cAAc,mBAAmB,WAAW,IAAI,CAAC;CACvD,QAAQ,aAAa,MAArB;EACE,KAAK,QACH,OAAO;EACT,KAAK,qBAAqB;GACxB,MAAM,EAAE,MAAM,QAAQ,UAAU,YAAY;GAC5C,OAAO,QAAQ,IAAI,KAAK,WAAW,KAAA,KAAa,SAAS,KAAK;EAChE;EACA,KAAK,2BAA2B;GAC9B,MAAM,EAAE,MAAM,eAAe,WAAW,QAAQ,SAAS,OAAO,aAAa,YAAY;GACzF,OACE,QAAQ,IAAI,KACZ,OAAO,kBAAkB,YACzB,cAAc,KAAA,KACd,WAAW,KAAA,KACX,SAAS,OAAO,KAChB,SAAS,KAAK,KACd,SAAS,QAAQ;EAErB;EACA,SACE,OAAO;CACX;AACF;AAEA,IAAM,iBAAiB,UACrB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,WAAW;;;;;AAMxG,IAAM,mBAAmB,SACvB,KAAK,aAAa,SAAS,iBAAiB,0BAA0B,WAAW,IAAI,CAAC,MAAM,KAAA;;;;;AAM9F,SAAgB,qBAAqB,MAA2B;CAC9D,IAAI,cAAc,KAAK,MAAM,MAAM,KAAK,aAAa,SAAS,eAAe,gBAAgB,IAAI,IAC/F;CAEF,OAAO,KAAK;AACd;AAUA,IAAM,iBAAiB;;;;;AAMvB,SAAgB,iBAAiB,UAA6C;CAC5E,MAAM,QAAQ,eAAe,KAAK,QAAQ;CAC1C,IAAI,CAAC,QAAQ,IAAI,OAAO,KAAA;CACxB,OAAO;EAAE,MAAM,MAAM,OAAO,aAAa,aAAa;EAAS,KAAK,MAAM;CAAG;AAC/E;;AAGA,SAAgB,qBAAqB,OAA2B,UAA0B;CACxF,MAAM,YAAY,iBAAiB,QAAQ;CAC3C,IAAI,CAAC,WAAW,OAAO;CACvB,OAAO,UAAU,SAAS,aAAa,MAAM,aAAa,UAAU,GAAG,IAAI,MAAM,UAAU,UAAU,GAAG;AAC1G;AAaA,IAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAErE,IAAM,UAAU,UAAoB,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ,KAAA;;AAG5F,SAAS,OAAO,OAAsC;CACpD,IAAI,OAAO,UAAU,UAAU,OAAO,QAAQ,EAAE,IAAI,MAAM,IAAI,KAAA;CAC9D,IAAI,CAAC,SAAS,KAAK,GAAG,OAAO,KAAA;CAC7B,MAAM,KAAK,OAAO,MAAM,EAAE,KAAK,OAAO,MAAM,IAAI;CAChD,IAAI,CAAC,IAAI,OAAO,KAAA;CAChB,MAAM,cAAc,OAAO,MAAM,WAAW;CAC5C,OAAO,cAAc;EAAE;EAAI;CAAY,IAAI,EAAE,GAAG;AAClD;;;;;AAMA,SAAgB,aAAa,MAAyC;CACpE,MAAM,QAAQ,kBAAkB,WAAW,IAAI,CAAC;CAChD,MAAM,OAAgC,OAAO,SAAS,cAAc,MAAM,MAAM,OAAO,CAAC;CACxF,MAAM,aAAa,KAAK,cAAc,CAAC;CACvC,MAAM,CAAC,OAAO,cAAc,SAAS,KAAK,KAAK,IAC3C,CAAC,KAAK,OAAO,KAAK,UAAU,IAC5B,SAAS,WAAW,KAAK,IACvB,CAAC,WAAW,OAAO,WAAW,UAAU,IACxC,CAAC,WAAW,gBAAgB,WAAW,UAAU;CACvD,IAAI,CAAC,SAAS,KAAK,GAAG,OAAO,KAAA;CAE7B,MAAM,OAAO,MAAM,IAAI,MAAM,CAAC,CAAC,QAAQ,SAA2B,SAAS,KAAA,CAAS;CACpF,IAAI,KAAK,WAAW,GAAG,OAAO,KAAA;CAC9B,OAAO;EAAE,OAAO;EAAM,KAAK,eAAe,KAAA,IAAY,EAAE,MAAM,IAAI;GAAE;GAAO;EAAW;CAAE;AAC1F"}

package/dist/domains/traces/components/span-payload/span-payload-section.cjs.js

@@ -1,6 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../../../../utils-uDc1ofX1.cjs");
 const require_Button = require("../../../../Button-YQRflC47.cjs");
+const require_components_Collapsible = require("../../../../components/Collapsible.cjs.js");
+const require_components_DisclosureChevron = require("../../../../components/DisclosureChevron.cjs.js");
 const require_copy_button = require("../../../../copy-button-BYEFKNpo.cjs");
 const require_data_panel_section_heading = require("../../../../data-panel-section-heading-d9UnruDt.cjs");
 const require_components_CollapsibleBox = require("../../../../components/CollapsibleBox.cjs.js");
@@ -40,7 +42,7 @@ function ViewToggle({ view, onChange }) {
 * the same syntax highlighting while preserving the stored payload. Long content is
 * clipped with a fade and an Expand button, like the experiment comparison sections.
 */
-function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, framed = true, layout = "panel", defaultView = "rich", className }) {
+function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, framed = true, layout = "panel", defaultView = "rich", emphasis = false, heading, clip = true, className }) {
 	const [view, setView] = (0, react.useState)(defaultView);
 	const box = require_components_CollapsibleBox.useCollapsibleBox();
 	if (raw == null) return null;
@@ -48,20 +50,28 @@ function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, fra
 	const showJson = !hasRich || view === "raw";
 	const content = showJson ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_json.SpanPayloadJson, {
 		value: raw,
-		bare: framed
+		bare: framed,
+		foldNested: true
 	}) : children;
+	const shouldClip = clip && !showJson;
+	const clipped = (body) => shouldClip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_CollapsibleBox.CollapsibleBox, {
+		state: box,
+		expandLabel: "Expand",
+		children: body
+	}) : body;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "span-payload-section",
 		"data-view": showJson ? "raw" : "rich",
-		className: require_utils.cn("flex min-w-0 flex-col gap-2", className),
+		"data-emphasis": emphasis || void 0,
+		className: require_utils.cn("group/payload flex min-w-0 flex-col gap-2", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-wrap items-center justify-between gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_data_panel_section_heading.DataPanelSectionHeading, {
+			children: [heading ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_data_panel_section_heading.DataPanelSectionHeading, {
 				icon,
-				className: layout === "details" ? "text-meta" : void 0,
+				className: require_utils.cn(layout === "details" && "text-meta", emphasis && "font-medium text-foreground [&>svg]:text-info-indicator"),
 				children: title
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "ml-auto flex items-center gap-1",
+				className: "ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0",
 				children: [hasRich && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewToggle, {
 					view,
 					onChange: setView
@@ -75,19 +85,11 @@ function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, fra
 			children: [framed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.Card, {
 				"data-slot": "span-payload-card",
 				className: "min-w-0 overflow-hidden",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_CollapsibleBox.CollapsibleBox, {
-					state: box,
-					expandLabel: "Expand",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.CardContent, {
-						className: "[&_[data-slot=message]]:my-0",
-						children: content
-					})
-				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_CollapsibleBox.CollapsibleBox, {
-				state: box,
-				expandLabel: "Expand",
-				children: content
-			}), box.isExpanded && box.isClipped && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				children: clipped(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.CardContent, {
+					className: "[&_[data-slot=message]]:my-0",
+					children: content
+				}))
+			}) : clipped(content), shouldClip && box.isExpanded && box.isClipped && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex justify-center pt-1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 					size: "sm",
@@ -100,6 +102,47 @@ function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, fra
 		})]
 	});
 }
+/**
+* A span payload that is only worth reading as stored, like metadata or attributes.
+* Folded behind its heading by default, and shown in full as JSON once opened.
+*/
+function SpanPayloadJsonSection({ title, icon, raw, layout = "panel" }) {
+	if (raw == null) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.Collapsible, {
+		"data-slot": "span-payload-section",
+		"data-view": "raw",
+		className: "group/payload flex min-w-0 flex-col gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.CollapsibleTrigger, {
+				className: "flex items-center gap-1 rounded-sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_DisclosureChevron.DisclosureChevron, {
+					direction: "right",
+					className: "size-3 text-placeholder"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_data_panel_section_heading.DataPanelSectionHeading, {
+					icon,
+					className: require_utils.cn(layout === "details" && "text-meta"),
+					children: title
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_copy_button.CopyButton, {
+					content: JSON.stringify(raw, null, 2),
+					variant: "ghost"
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Collapsible.CollapsibleContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.Card, {
+			"data-slot": "span-payload-card",
+			className: "min-w-0 overflow-hidden",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.CardContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_json.SpanPayloadJson, {
+				value: raw,
+				bare: true,
+				foldNested: true
+			}) })
+		}) })]
+	});
+}
+exports.SpanPayloadJsonSection = SpanPayloadJsonSection;
 exports.SpanPayloadSection = SpanPayloadSection;
 
 //# sourceMappingURL=span-payload-section.cjs.js.map

package/dist/domains/traces/components/span-payload/span-payload-section.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-payload-section.cjs.js","names":["Button","Eye","Braces","useState","useCollapsibleBox","SpanPayloadJson","cn","DataPanelSectionHeading","CopyButton","Card","CollapsibleBox","CardContent","Minimize2"],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { Braces, Eye, Minimize2 } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /**\n   * Wraps the content in a card, with the clipping inside it so the rounded frame stays intact.\n   * Turn off for content that brings its own frame, like the error banner.\n   */\n  framed?: boolean;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Payload view\"\n      data-slot=\"span-payload-view-toggle\"\n      className=\"flex items-center gap-1\"\n    >\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'rich' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'rich'}\n        aria-label=\"Preview\"\n        tooltip=\"Preview\"\n        onClick={() => onChange('rich')}\n      >\n        <Eye />\n      </Button>\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'raw' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'raw'}\n        aria-label=\"JSON\"\n        tooltip=\"JSON\"\n        onClick={() => onChange('raw')}\n      >\n        <Braces />\n      </Button>\n    </div>\n  );\n}\n\n/**\n * A span payload section with Preview / JSON view toggles. All JSON views share\n * the same syntax highlighting while preserving the stored payload. Long content is\n * clipped with a fade and an Expand button, like the experiment comparison sections.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  framed = true,\n  layout = 'panel',\n  defaultView = 'rich',\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  const box = useCollapsibleBox();\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n  const content = showJson ? <SpanPayloadJson value={raw} bare={framed} /> : children;\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <DataPanelSectionHeading icon={icon} className={layout === 'details' ? 'text-meta' : undefined}>\n          {title}\n        </DataPanelSectionHeading>\n        <div className=\"ml-auto flex items-center gap-1\">\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n          <CopyButton content={JSON.stringify(raw, null, 2)} variant=\"ghost\" />\n        </div>\n      </div>\n      <div className=\"min-w-0\">\n        {framed ? (\n          <Card data-slot=\"span-payload-card\" className=\"min-w-0 overflow-hidden\">\n            <CollapsibleBox state={box} expandLabel=\"Expand\">\n              {/* Renderers space their children with gaps; a user bubble's chat margin would double the card's Y padding. */}\n              <CardContent className=\"[&_[data-slot=message]]:my-0\">{content}</CardContent>\n            </CollapsibleBox>\n          </Card>\n        ) : (\n          <CollapsibleBox state={box} expandLabel=\"Expand\">\n            {content}\n          </CollapsibleBox>\n        )}\n        {box.isExpanded && box.isClipped && (\n          <div className=\"flex justify-center pt-1\">\n            <Button size=\"sm\" variant=\"ghost\" icon={<Minimize2 />} onClick={() => box.setExpanded(false)}>\n              Collapse\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"span-payload-section.cjs.js","names":["Button","Eye","Braces","useState","useCollapsibleBox","SpanPayloadJson","CollapsibleBox","cn","DataPanelSectionHeading","CopyButton","Card","CardContent","Minimize2","Collapsible","CollapsibleTrigger","DisclosureChevron","CollapsibleContent"],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { Braces, Eye, Minimize2 } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /**\n   * Wraps the content in a card, with the clipping inside it so the rounded frame stays intact.\n   * Turn off for content that brings its own frame, like the error banner.\n   */\n  framed?: boolean;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  /** Marks the section that proves what the span did, so it stands out from the payloads around it. */\n  emphasis?: boolean;\n  /** Replaces the title heading, e.g. with the sentence of the notice the section sits in. */\n  heading?: ReactNode;\n  /** Clips long content behind an Expand button. Turn off for content that folds on its own, like tool call rows. */\n  clip?: boolean;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Payload view\"\n      data-slot=\"span-payload-view-toggle\"\n      className=\"flex items-center gap-1\"\n    >\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'rich' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'rich'}\n        aria-label=\"Preview\"\n        tooltip=\"Preview\"\n        onClick={() => onChange('rich')}\n      >\n        <Eye />\n      </Button>\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'raw' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'raw'}\n        aria-label=\"JSON\"\n        tooltip=\"JSON\"\n        onClick={() => onChange('raw')}\n      >\n        <Braces />\n      </Button>\n    </div>\n  );\n}\n\n/**\n * A span payload section with Preview / JSON view toggles. All JSON views share\n * the same syntax highlighting while preserving the stored payload. Long content is\n * clipped with a fade and an Expand button, like the experiment comparison sections.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  framed = true,\n  layout = 'panel',\n  defaultView = 'rich',\n  emphasis = false,\n  heading,\n  clip = true,\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  const box = useCollapsibleBox();\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n  const content = showJson ? <SpanPayloadJson value={raw} bare={framed} foldNested /> : children;\n  // JSON folds its nested values instead, so it never needs clipping.\n  const shouldClip = clip && !showJson;\n  const clipped = (body: ReactNode) =>\n    shouldClip ? (\n      <CollapsibleBox state={box} expandLabel=\"Expand\">\n        {body}\n      </CollapsibleBox>\n    ) : (\n      body\n    );\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      data-emphasis={emphasis || undefined}\n      className={cn('group/payload flex min-w-0 flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        {heading ?? (\n          <DataPanelSectionHeading\n            icon={icon}\n            className={cn(\n              layout === 'details' && 'text-meta',\n              emphasis && 'font-medium text-foreground [&>svg]:text-info-indicator',\n            )}\n          >\n            {title}\n          </DataPanelSectionHeading>\n        )}\n        {/* Revealed on hover or keyboard focus; `pointer-fine` only, since a touch screen has no hover. */}\n        <div className=\"ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n          <CopyButton content={JSON.stringify(raw, null, 2)} variant=\"ghost\" />\n        </div>\n      </div>\n      <div className=\"min-w-0\">\n        {framed ? (\n          <Card data-slot=\"span-payload-card\" className=\"min-w-0 overflow-hidden\">\n            {/* Renderers space their children with gaps; a user bubble's chat margin would double the card's Y padding. */}\n            {clipped(<CardContent className=\"[&_[data-slot=message]]:my-0\">{content}</CardContent>)}\n          </Card>\n        ) : (\n          clipped(content)\n        )}\n        {shouldClip && box.isExpanded && box.isClipped && (\n          <div className=\"flex justify-center pt-1\">\n            <Button size=\"sm\" variant=\"ghost\" icon={<Minimize2 />} onClick={() => box.setExpanded(false)}>\n              Collapse\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface SpanPayloadJsonSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON. */\n  raw: unknown;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n}\n\n/**\n * A span payload that is only worth reading as stored, like metadata or attributes.\n * Folded behind its heading by default, and shown in full as JSON once opened.\n */\nexport function SpanPayloadJsonSection({ title, icon, raw, layout = 'panel' }: SpanPayloadJsonSectionProps) {\n  if (raw == null) return null;\n\n  return (\n    <Collapsible data-slot=\"span-payload-section\" data-view=\"raw\" className=\"group/payload flex min-w-0 flex-col gap-2\">\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <CollapsibleTrigger className=\"flex items-center gap-1 rounded-sm\">\n          <DisclosureChevron direction=\"right\" className=\"size-3 text-placeholder\" />\n          <DataPanelSectionHeading icon={icon} className={cn(layout === 'details' && 'text-meta')}>\n            {title}\n          </DataPanelSectionHeading>\n        </CollapsibleTrigger>\n        {/* Revealed on hover or keyboard focus; `pointer-fine` only, since a touch screen has no hover. */}\n        <div className=\"ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n          <CopyButton content={JSON.stringify(raw, null, 2)} variant=\"ghost\" />\n        </div>\n      </div>\n      <CollapsibleContent>\n        <Card data-slot=\"span-payload-card\" className=\"min-w-0 overflow-hidden\">\n          <CardContent>\n            <SpanPayloadJson value={raw} bare foldNested />\n          </CardContent>\n        </Card>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/span-payload/span-payload-section.es.js

@@ -1,5 +1,7 @@
 import { t as cn } from "../../../../utils-DQx8TpNT.js";
 import { t as Button } from "../../../../Button-Bw1e3ONi.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/Collapsible.es.js";
+import { DisclosureChevron } from "../../../../components/DisclosureChevron.es.js";
 import { t as CopyButton } from "../../../../copy-button-CF-X4iDj.js";
 import { t as DataPanelSectionHeading } from "../../../../data-panel-section-heading-X3tHNMV1.js";
 import { CollapsibleBox, useCollapsibleBox } from "../../../../components/CollapsibleBox.es.js";
@@ -39,7 +41,7 @@ function ViewToggle({ view, onChange }) {
 * the same syntax highlighting while preserving the stored payload. Long content is
 * clipped with a fade and an Expand button, like the experiment comparison sections.
 */
-function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, framed = true, layout = "panel", defaultView = "rich", className }) {
+function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, framed = true, layout = "panel", defaultView = "rich", emphasis = false, heading, clip = true, className }) {
 	const [view, setView] = useState(defaultView);
 	const box = useCollapsibleBox();
 	if (raw == null) return null;
@@ -47,20 +49,28 @@ function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, fra
 	const showJson = !hasRich || view === "raw";
 	const content = showJson ? /* @__PURE__ */ jsx(SpanPayloadJson, {
 		value: raw,
-		bare: framed
+		bare: framed,
+		foldNested: true
 	}) : children;
+	const shouldClip = clip && !showJson;
+	const clipped = (body) => shouldClip ? /* @__PURE__ */ jsx(CollapsibleBox, {
+		state: box,
+		expandLabel: "Expand",
+		children: body
+	}) : body;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "span-payload-section",
 		"data-view": showJson ? "raw" : "rich",
-		className: cn("flex min-w-0 flex-col gap-2", className),
+		"data-emphasis": emphasis || void 0,
+		className: cn("group/payload flex min-w-0 flex-col gap-2", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center justify-between gap-2",
-			children: [/* @__PURE__ */ jsx(DataPanelSectionHeading, {
+			children: [heading ?? /* @__PURE__ */ jsx(DataPanelSectionHeading, {
 				icon,
-				className: layout === "details" ? "text-meta" : void 0,
+				className: cn(layout === "details" && "text-meta", emphasis && "font-medium text-foreground [&>svg]:text-info-indicator"),
 				children: title
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "ml-auto flex items-center gap-1",
+				className: "ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0",
 				children: [hasRich && /* @__PURE__ */ jsx(ViewToggle, {
 					view,
 					onChange: setView
@@ -74,19 +84,11 @@ function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, fra
 			children: [framed ? /* @__PURE__ */ jsx(Card, {
 				"data-slot": "span-payload-card",
 				className: "min-w-0 overflow-hidden",
-				children: /* @__PURE__ */ jsx(CollapsibleBox, {
-					state: box,
-					expandLabel: "Expand",
-					children: /* @__PURE__ */ jsx(CardContent, {
-						className: "[&_[data-slot=message]]:my-0",
-						children: content
-					})
-				})
-			}) : /* @__PURE__ */ jsx(CollapsibleBox, {
-				state: box,
-				expandLabel: "Expand",
-				children: content
-			}), box.isExpanded && box.isClipped && /* @__PURE__ */ jsx("div", {
+				children: clipped(/* @__PURE__ */ jsx(CardContent, {
+					className: "[&_[data-slot=message]]:my-0",
+					children: content
+				}))
+			}) : clipped(content), shouldClip && box.isExpanded && box.isClipped && /* @__PURE__ */ jsx("div", {
 				className: "flex justify-center pt-1",
 				children: /* @__PURE__ */ jsx(Button, {
 					size: "sm",
@@ -99,6 +101,46 @@ function SpanPayloadSection({ title, icon, raw, hasPreview = true, children, fra
 		})]
 	});
 }
-export { SpanPayloadSection };
+/**
+* A span payload that is only worth reading as stored, like metadata or attributes.
+* Folded behind its heading by default, and shown in full as JSON once opened.
+*/
+function SpanPayloadJsonSection({ title, icon, raw, layout = "panel" }) {
+	if (raw == null) return null;
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "span-payload-section",
+		"data-view": "raw",
+		className: "group/payload flex min-w-0 flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+				className: "flex items-center gap-1 rounded-sm",
+				children: [/* @__PURE__ */ jsx(DisclosureChevron, {
+					direction: "right",
+					className: "size-3 text-placeholder"
+				}), /* @__PURE__ */ jsx(DataPanelSectionHeading, {
+					icon,
+					className: cn(layout === "details" && "text-meta"),
+					children: title
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0",
+				children: /* @__PURE__ */ jsx(CopyButton, {
+					content: JSON.stringify(raw, null, 2),
+					variant: "ghost"
+				})
+			})]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(Card, {
+			"data-slot": "span-payload-card",
+			className: "min-w-0 overflow-hidden",
+			children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(SpanPayloadJson, {
+				value: raw,
+				bare: true,
+				foldNested: true
+			}) })
+		}) })]
+	});
+}
+export { SpanPayloadJsonSection, SpanPayloadSection };
 
 //# sourceMappingURL=span-payload-section.es.js.map

package/dist/domains/traces/components/span-payload/span-payload-section.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-payload-section.es.js","names":[],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { Braces, Eye, Minimize2 } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /**\n   * Wraps the content in a card, with the clipping inside it so the rounded frame stays intact.\n   * Turn off for content that brings its own frame, like the error banner.\n   */\n  framed?: boolean;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Payload view\"\n      data-slot=\"span-payload-view-toggle\"\n      className=\"flex items-center gap-1\"\n    >\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'rich' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'rich'}\n        aria-label=\"Preview\"\n        tooltip=\"Preview\"\n        onClick={() => onChange('rich')}\n      >\n        <Eye />\n      </Button>\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'raw' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'raw'}\n        aria-label=\"JSON\"\n        tooltip=\"JSON\"\n        onClick={() => onChange('raw')}\n      >\n        <Braces />\n      </Button>\n    </div>\n  );\n}\n\n/**\n * A span payload section with Preview / JSON view toggles. All JSON views share\n * the same syntax highlighting while preserving the stored payload. Long content is\n * clipped with a fade and an Expand button, like the experiment comparison sections.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  framed = true,\n  layout = 'panel',\n  defaultView = 'rich',\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  const box = useCollapsibleBox();\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n  const content = showJson ? <SpanPayloadJson value={raw} bare={framed} /> : children;\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <DataPanelSectionHeading icon={icon} className={layout === 'details' ? 'text-meta' : undefined}>\n          {title}\n        </DataPanelSectionHeading>\n        <div className=\"ml-auto flex items-center gap-1\">\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n          <CopyButton content={JSON.stringify(raw, null, 2)} variant=\"ghost\" />\n        </div>\n      </div>\n      <div className=\"min-w-0\">\n        {framed ? (\n          <Card data-slot=\"span-payload-card\" className=\"min-w-0 overflow-hidden\">\n            <CollapsibleBox state={box} expandLabel=\"Expand\">\n              {/* Renderers space their children with gaps; a user bubble's chat margin would double the card's Y padding. */}\n              <CardContent className=\"[&_[data-slot=message]]:my-0\">{content}</CardContent>\n            </CollapsibleBox>\n          </Card>\n        ) : (\n          <CollapsibleBox state={box} expandLabel=\"Expand\">\n            {content}\n          </CollapsibleBox>\n        )}\n        {box.isExpanded && box.isClipped && (\n          <div className=\"flex justify-center pt-1\">\n            <Button size=\"sm\" variant=\"ghost\" icon={<Minimize2 />} onClick={() => box.setExpanded(false)}>\n              Collapse\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoCA,SAAS,WAAW,EAAE,MAAM,YAAkF;CAC5G,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAU;EAJZ,UAAA,CAME,oBAAC,QAAD;GACE,MAAK;GACL,SAAS,SAAS,SAAS,WAAW;GACtC,gBAAc,SAAS;GACvB,cAAW;GACX,SAAQ;GACR,eAAe,SAAS,MAAM;GAE9B,UAAA,oBAAC,KAAD,CAAM,CAAA;EACA,CAAA,GACR,oBAAC,QAAD;GACE,MAAK;GACL,SAAS,SAAS,QAAQ,WAAW;GACrC,gBAAc,SAAS;GACvB,cAAW;GACX,SAAQ;GACR,eAAe,SAAS,KAAK;GAE7B,UAAA,oBAAC,QAAD,CAAS,CAAA;EACH,CAAA,CACL;;AAET;;;;;;AAOA,SAAgB,mBAAmB,EACjC,OACA,MACA,KACA,aAAa,MACb,UACA,SAAS,MACT,SAAS,SACT,cAAc,QACd,aAC0B;CAC1B,MAAM,CAAC,MAAM,WAAW,SAA0B,WAAW;CAC7D,MAAM,MAAM,kBAAkB;CAC9B,IAAI,OAAO,MAAM,OAAO;CAExB,MAAM,UAAU,cAAc,YAAY;CAC1C,MAAM,WAAW,CAAC,WAAW,SAAS;CACtC,MAAM,UAAU,WAAW,oBAAC,iBAAD;EAAiB,OAAO;EAAK,MAAM;CAAS,CAAA,IAAI;CAE3E,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW,WAAW,QAAQ;EAC9B,WAAW,GAAG,+BAA+B,SAAS;EAHxD,UAAA,CAKE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,yBAAD;IAA+B;IAAM,WAAW,WAAW,YAAY,cAAc,KAAA;IAClF,UAAA;GACsB,CAAA,GACzB,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,WAAW,oBAAC,YAAD;KAAkB;KAAM,UAAU;IAAU,CAAA,GACxD,oBAAC,YAAD;KAAY,SAAS,KAAK,UAAU,KAAK,MAAM,CAAC;KAAG,SAAQ;IAAS,CAAA,CACjE;GACF,CAAA,CAAA;EACL,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,SACC,oBAAC,MAAD;IAAM,aAAU;IAAoB,WAAU;IAC5C,UAAA,oBAAC,gBAAD;KAAgB,OAAO;KAAK,aAAY;KAEtC,UAAA,oBAAC,aAAD;MAAa,WAAU;MAAgC,UAAA;KAAqB,CAAA;IAC9D,CAAA;GACZ,CAAA,IAEN,oBAAC,gBAAD;IAAgB,OAAO;IAAK,aAAY;IACrC,UAAA;GACa,CAAA,GAEjB,IAAI,cAAc,IAAI,aACrB,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,QAAD;KAAQ,MAAK;KAAK,SAAQ;KAAQ,MAAM,oBAAC,WAAD,CAAY,CAAA;KAAG,eAAe,IAAI,YAAY,KAAK;KAAG,UAAA;IAEtF,CAAA;GACL,CAAA,CAEJ;EACF,CAAA,CAAA;;AAET"}
+{"version":3,"file":"span-payload-section.es.js","names":[],"sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { Braces, Eye, Minimize2 } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /**\n   * Wraps the content in a card, with the clipping inside it so the rounded frame stays intact.\n   * Turn off for content that brings its own frame, like the error banner.\n   */\n  framed?: boolean;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  /** Marks the section that proves what the span did, so it stands out from the payloads around it. */\n  emphasis?: boolean;\n  /** Replaces the title heading, e.g. with the sentence of the notice the section sits in. */\n  heading?: ReactNode;\n  /** Clips long content behind an Expand button. Turn off for content that folds on its own, like tool call rows. */\n  clip?: boolean;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Payload view\"\n      data-slot=\"span-payload-view-toggle\"\n      className=\"flex items-center gap-1\"\n    >\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'rich' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'rich'}\n        aria-label=\"Preview\"\n        tooltip=\"Preview\"\n        onClick={() => onChange('rich')}\n      >\n        <Eye />\n      </Button>\n      <Button\n        size=\"icon-sm\"\n        variant={view === 'raw' ? 'subtle' : 'ghost'}\n        aria-pressed={view === 'raw'}\n        aria-label=\"JSON\"\n        tooltip=\"JSON\"\n        onClick={() => onChange('raw')}\n      >\n        <Braces />\n      </Button>\n    </div>\n  );\n}\n\n/**\n * A span payload section with Preview / JSON view toggles. All JSON views share\n * the same syntax highlighting while preserving the stored payload. Long content is\n * clipped with a fade and an Expand button, like the experiment comparison sections.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  framed = true,\n  layout = 'panel',\n  defaultView = 'rich',\n  emphasis = false,\n  heading,\n  clip = true,\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  const box = useCollapsibleBox();\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n  const content = showJson ? <SpanPayloadJson value={raw} bare={framed} foldNested /> : children;\n  // JSON folds its nested values instead, so it never needs clipping.\n  const shouldClip = clip && !showJson;\n  const clipped = (body: ReactNode) =>\n    shouldClip ? (\n      <CollapsibleBox state={box} expandLabel=\"Expand\">\n        {body}\n      </CollapsibleBox>\n    ) : (\n      body\n    );\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      data-emphasis={emphasis || undefined}\n      className={cn('group/payload flex min-w-0 flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        {heading ?? (\n          <DataPanelSectionHeading\n            icon={icon}\n            className={cn(\n              layout === 'details' && 'text-meta',\n              emphasis && 'font-medium text-foreground [&>svg]:text-info-indicator',\n            )}\n          >\n            {title}\n          </DataPanelSectionHeading>\n        )}\n        {/* Revealed on hover or keyboard focus; `pointer-fine` only, since a touch screen has no hover. */}\n        <div className=\"ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n          <CopyButton content={JSON.stringify(raw, null, 2)} variant=\"ghost\" />\n        </div>\n      </div>\n      <div className=\"min-w-0\">\n        {framed ? (\n          <Card data-slot=\"span-payload-card\" className=\"min-w-0 overflow-hidden\">\n            {/* Renderers space their children with gaps; a user bubble's chat margin would double the card's Y padding. */}\n            {clipped(<CardContent className=\"[&_[data-slot=message]]:my-0\">{content}</CardContent>)}\n          </Card>\n        ) : (\n          clipped(content)\n        )}\n        {shouldClip && box.isExpanded && box.isClipped && (\n          <div className=\"flex justify-center pt-1\">\n            <Button size=\"sm\" variant=\"ghost\" icon={<Minimize2 />} onClick={() => box.setExpanded(false)}>\n              Collapse\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface SpanPayloadJsonSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON. */\n  raw: unknown;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n}\n\n/**\n * A span payload that is only worth reading as stored, like metadata or attributes.\n * Folded behind its heading by default, and shown in full as JSON once opened.\n */\nexport function SpanPayloadJsonSection({ title, icon, raw, layout = 'panel' }: SpanPayloadJsonSectionProps) {\n  if (raw == null) return null;\n\n  return (\n    <Collapsible data-slot=\"span-payload-section\" data-view=\"raw\" className=\"group/payload flex min-w-0 flex-col gap-2\">\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <CollapsibleTrigger className=\"flex items-center gap-1 rounded-sm\">\n          <DisclosureChevron direction=\"right\" className=\"size-3 text-placeholder\" />\n          <DataPanelSectionHeading icon={icon} className={cn(layout === 'details' && 'text-meta')}>\n            {title}\n          </DataPanelSectionHeading>\n        </CollapsibleTrigger>\n        {/* Revealed on hover or keyboard focus; `pointer-fine` only, since a touch screen has no hover. */}\n        <div className=\"ml-auto flex items-center gap-1 group-focus-within/payload:opacity-100 group-hover/payload:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n          <CopyButton content={JSON.stringify(raw, null, 2)} variant=\"ghost\" />\n        </div>\n      </div>\n      <CollapsibleContent>\n        <Card data-slot=\"span-payload-card\" className=\"min-w-0 overflow-hidden\">\n          <CardContent>\n            <SpanPayloadJson value={raw} bare foldNested />\n          </CardContent>\n        </Card>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/span-payload/span-payload-tool.cjs.js

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_span_payload_primitives = require("../../../../span-payload-primitives-rxerCV7Y.cjs");
+const require_span_payload_primitives = require("../../../../span-payload-primitives-DNhjpAtm.cjs");
 exports.SpanPayloadTool = require_span_payload_primitives.SpanPayloadTool;
 exports.SpanToolNameValue = require_span_payload_primitives.SpanToolNameValue;

package/dist/domains/traces/components/span-payload/span-payload-tool.es.js

@@ -1 +1 @@
-export { c as SpanPayloadTool, l as SpanToolNameValue } from "../../../../span-payload-primitives-Fi1kSYyM.js";
+export { c as SpanPayloadTool, l as SpanToolNameValue } from "../../../../span-payload-primitives-CNDSzk1Q.js";