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

package/dist/domains/traces/components/span-prompt-changes.cjs.js

@@ -1,16 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_cost = require("../../../cost-CDXUhpb_.cjs");
-const require_primitives_transitions = require("../../../primitives/transitions.cjs.js");
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_string = require("../../../string-DdJJdCv2.cjs");
-const require_components_DisclosureChevron = require("../../../components/DisclosureChevron.cjs.js");
-const require_components_CollapsibleBox = require("../../../components/CollapsibleBox.cjs.js");
 const require_domains_traces_components_span_payload_span_payload_json = require("./span-payload/span-payload-json.cjs.js");
-const require_domains_traces_components_span_payload_available_skills = require("./span-payload/available-skills.cjs.js");
 const require_domains_traces_components_span_payload_span_payload_messages = require("./span-payload/span-payload-messages.cjs.js");
+const require_domains_traces_components_span_payload_available_skills = require("./span-payload/available-skills.cjs.js");
 const require_domains_traces_components_span_prompt_impact = require("./span-prompt-impact.cjs.js");
+const require_components_CollapsibleBox = require("../../../components/CollapsibleBox.cjs.js");
 const require_components_DiffStat = require("../../../components/DiffStat.cjs.js");
+const require_components_DisclosureChevron = require("../../../components/DisclosureChevron.cjs.js");
+const require_Metadata = require("../../../Metadata-5GJlO4GU.cjs");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
+const require_primitives_transitions = require("../../../primitives/transitions.cjs.js");
+const require_cost = require("../../../cost-CDXUhpb_.cjs");
+const require_string = require("../../../string-EyTazW-F.cjs");
+const require_utils = require("../../../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -37,7 +38,7 @@ function describeMessage(message) {
 	const catalog = require_domains_traces_components_span_payload_available_skills.parseAvailableSkills(text);
 	if (catalog && !catalog.before.trim() && !catalog.after.trim()) return {
 		title: "Skills catalog",
-		meta: `${require_string.pluralize(catalog.skills.length, "skill")} · ${size}`
+		meta: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: require_string.pluralize(catalog.skills.length, "skill") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: size })] })
 	};
 	return {
 		title: text.split("\n").map((line) => line.trim().replace(/^#+\s*/, "")).find(Boolean) ?? "Empty message",
@@ -158,7 +159,13 @@ function MessageRow({ sign, message, tag }) {
 	const { title, meta } = describeMessage(message);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffRow, {
 		sign,
-		title: tag ? `${title} · ${tag}` : title,
+		title: tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, {
+			singleLine: true,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, {
+				className: "shrink-0",
+				children: tag
+			})]
+		}) : title,
 		meta,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Clipped, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_traces_components_span_payload_span_payload_messages.SpanPayloadMessages, { value: [message] }) })
 	});

package/dist/domains/traces/components/span-prompt-changes.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-prompt-changes.cjs.js","names":["formatCompactNumber","parseAvailableSkills","pluralize","useState","_Fragment","Txt","cn","DisclosureChevron","focusRing","useCollapsibleBox","CollapsibleBox","SpanPayloadMessages","SpanPayloadJson","DiffStat","getPromptChanges","touchesSystemPrompt","ScrollTextIcon","MessagesSquareIcon"],"sources":["../../../../src/domains/traces/components/span-prompt-changes.tsx"],"sourcesContent":["import type { SpanInputMessage } from '@mastra/core/observability';\nimport { MessagesSquareIcon, ScrollTextIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { SpanPayloadJson, SpanPayloadMessages } from './span-payload';\nimport { parseAvailableSkills } from './span-payload/available-skills';\nimport { getPromptChanges, touchesSystemPrompt } from './span-prompt-impact';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { DiffStat } from '@/ds/components/DiffStat';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { formatCompactNumber } from '@/lib/cost';\nimport { pluralize } from '@/lib/string';\nimport { cn } from '@/lib/utils';\n\ntype Change = Exclude<ReturnType<typeof getPromptChanges>[number], null | undefined>;\n\n/** Long content (a skills catalog, workspace instructions) is clipped to this height until expanded. */\nconst COLLAPSED_HEIGHT = 160;\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** How many messages a change touched: its count, else the message or ids it carries. */\nconst countOf = (change: Change) => change.count ?? (change.message !== undefined ? 1 : (change.ids?.length ?? 1));\n\nconst isRemoval = (change: Change) => change.type === 'removeByIds' || change.type === 'clear';\n\n/** The text a system or conversation message carries, joined when it comes in parts. */\nfunction textOf(message: unknown): string {\n  if (typeof message === 'string') return message;\n  if (!isRecord(message)) return '';\n  const { content } = message;\n  if (typeof content === 'string') return content;\n  if (!Array.isArray(content)) return '';\n  return content\n    .map(part => (typeof part === 'string' ? part : isRecord(part) && typeof part.text === 'string' ? part.text : ''))\n    .join('\\n');\n}\n\n/** A one-line name for a message: what it is when we can tell (a skills catalog), else its first line. */\nfunction describeMessage(message: unknown): { title: string; meta: string } {\n  const text = textOf(message);\n  const size = `${formatCompactNumber(text.length)} chars`;\n  const catalog = parseAvailableSkills(text);\n  if (catalog && !catalog.before.trim() && !catalog.after.trim()) {\n    return { title: 'Skills catalog', meta: `${pluralize(catalog.skills.length, 'skill')} · ${size}` };\n  }\n  const firstLine = text\n    .split('\\n')\n    .map(line => line.trim().replace(/^#+\\s*/, ''))\n    .find(Boolean);\n  return { title: firstLine ?? 'Empty message', meta: size };\n}\n\n/** What a change without content was about, e.g. \"2 messages from memory\". */\nfunction describeCountOnly(change: Change): string {\n  const what = pluralize(countOf(change), 'message');\n  const { type, source } = change;\n  if (type === 'clear') {\n    if (source === 'input') return `${what} from this turn's input`;\n    if (source === 'response') return `${what} from the model's response`;\n    return `The whole conversation (${what})`;\n  }\n  if (source === 'memory') return `${what} from memory`;\n  if (source === 'input') return `${what} in this turn's input`;\n  if (source === 'response') return `${what} in the model's response`;\n  if (source === 'context') return `${what} of context`;\n  return what;\n}\n\n/** Back-to-back changes of the same kind that carry no content read as one change. */\nfunction mergeCountOnly(changes: readonly Change[]): Change[] {\n  const merged: Change[] = [];\n  for (const change of changes) {\n    const previous = merged.at(-1);\n    if (previous && isCountOnly(previous) && isCountOnly(change) && sameKind(previous, change)) {\n      merged[merged.length - 1] = { ...previous, count: countOf(previous) + countOf(change) };\n      continue;\n    }\n    merged.push(change);\n  }\n  return merged;\n}\n\nconst isCountOnly = (change: Change) => change.message === undefined && !(change.ids && change.ids.length > 0);\nconst sameKind = (a: Change, b: Change) => a.type === b.type && a.source === b.source && a.tag === b.tag;\n\nconst isMessage = (value: unknown): value is SpanInputMessage => isRecord(value) && typeof value.role === 'string';\n\n/** The system messages the span received and kept: the part of the prompt it built on. */\nfunction keptSystemMessages(span: SpanRecord, changes: readonly Change[]): SpanInputMessage[] {\n  const before =\n    isRecord(span.input) && Array.isArray(span.input.systemMessages) ? span.input.systemMessages.filter(isMessage) : [];\n  const removed = new Set(changes.filter(isRemoval).map(change => JSON.stringify(change.message)));\n  return before.filter(message => !removed.has(JSON.stringify(message)));\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Rows\n * ---------------------------------------------------------------------------------------------- */\n\ntype Sign = '+' | '−' | ' ';\n\nconst SIGN_LABEL: Record<Sign, string> = { '+': 'Added: ', '−': 'Removed: ', ' ': 'Unchanged: ' };\n\n/**\n * One message in the diff: a +/− gutter, a one-line title and its size. Rows with content open in place\n * (chevron on the right); added and removed rows start open, unchanged ones start closed. Long content\n * is clipped until \"Show all\".\n */\nfunction DiffRow({\n  sign,\n  title,\n  meta,\n  defaultOpen = sign !== ' ',\n  children,\n}: {\n  sign: Sign;\n  title: ReactNode;\n  meta?: string;\n  defaultOpen?: boolean;\n  children?: ReactNode;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n  const expandable = children !== undefined;\n\n  const header = (\n    <>\n      <Txt\n        as=\"span\"\n        aria-hidden\n        variant=\"body-sm\"\n        font=\"mono\"\n        className={cn(\n          'w-3 shrink-0 text-center',\n          sign === '+' && 'text-success-indicator',\n          sign === '−' && 'text-destructive-foreground',\n        )}\n      >\n        {sign}\n      </Txt>\n      <Txt as=\"span\" variant=\"body-sm\" tone={sign === ' ' ? 'muted' : 'ink'} className=\"min-w-0 truncate\">\n        <span className=\"sr-only\">{SIGN_LABEL[sign]}</span>\n        {title}\n      </Txt>\n      {meta && (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"ml-auto shrink-0 tabular-nums\">\n          {meta}\n        </Txt>\n      )}\n      {expandable && <DisclosureChevron open={open} className={cn('size-3 shrink-0', !meta && 'ml-auto')} />}\n    </>\n  );\n\n  return (\n    <li\n      data-sign={sign === ' ' ? 'kept' : sign === '+' ? 'added' : 'removed'}\n      className={cn(\n        'min-w-0 border-l-2',\n        sign === '+' && 'border-success-edge bg-success-subtle',\n        sign === '−' && 'border-destructive-edge bg-destructive-subtle',\n        sign === ' ' && 'border-transparent',\n      )}\n    >\n      {expandable ? (\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          onClick={() => setOpen(current => !current)}\n          className={cn(\n            'flex w-full min-w-0 items-center gap-2 py-2 pr-3 pl-2.5 text-left hover:bg-fill-subtle',\n            focusRing,\n          )}\n        >\n          {header}\n        </button>\n      ) : (\n        <div className=\"flex min-w-0 items-center gap-2 py-2 pr-3 pl-2.5\">{header}</div>\n      )}\n      {expandable && open && <div className=\"min-w-0 pr-3 pb-3 pl-7.5\">{children}</div>}\n    </li>\n  );\n}\n\nfunction Clipped({ children }: { children: ReactNode }) {\n  const box = useCollapsibleBox({ collapsedHeight: COLLAPSED_HEIGHT });\n  return (\n    <CollapsibleBox state={box} expandLabel=\"Show all\">\n      {children}\n    </CollapsibleBox>\n  );\n}\n\nfunction MessageRow({ sign, message, tag }: { sign: Sign; message: SpanInputMessage; tag?: string }) {\n  const { title, meta } = describeMessage(message);\n  return (\n    <DiffRow sign={sign} title={tag ? `${title} · ${tag}` : title} meta={meta}>\n      <Clipped>\n        <SpanPayloadMessages value={[message]} />\n      </Clipped>\n    </DiffRow>\n  );\n}\n\nfunction ChangeRow({ change }: { change: Change }) {\n  const sign = isRemoval(change) ? '−' : '+';\n\n  if (change.message !== undefined) return <MessageRow sign={sign} message={change.message} tag={change.tag} />;\n\n  if (change.ids && change.ids.length > 0) {\n    return (\n      <DiffRow sign={sign} title={pluralize(change.ids.length, 'message')} meta=\"by id\">\n        <Clipped>\n          <SpanPayloadJson value={change.ids} />\n        </Clipped>\n      </DiffRow>\n    );\n  }\n\n  return <DiffRow sign={sign} title={describeCountOnly(change)} />;\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Card\n * ---------------------------------------------------------------------------------------------- */\n\nfunction DiffCard({\n  icon,\n  title,\n  changes,\n  kept = [],\n}: {\n  icon: ReactNode;\n  title: string;\n  changes: Change[];\n  kept?: SpanInputMessage[];\n}) {\n  const additions = changes.filter(change => !isRemoval(change)).reduce((sum, change) => sum + countOf(change), 0);\n  const deletions = changes.filter(isRemoval).reduce((sum, change) => sum + countOf(change), 0);\n  const summary = [\n    additions > 0 && `${pluralize(additions, 'message')} added`,\n    deletions > 0 && `${pluralize(deletions, 'message')} removed`,\n  ]\n    .filter(Boolean)\n    .join(', ');\n\n  return (\n    <div data-slot=\"prompt-diff\" className=\"min-w-0 overflow-clip rounded-md border border-border bg-card\">\n      <header className=\"flex min-w-0 flex-col gap-0.5 border-b border-border px-3 py-2\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span aria-hidden className=\"flex shrink-0 text-muted-foreground [&_svg]:size-4\">\n            {icon}\n          </span>\n          <Txt as=\"h4\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n            {title}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\" className=\"ml-auto flex shrink-0 items-center gap-1.5\">\n            <DiffStat additions={additions} deletions={deletions} />\n            <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n              {additions + deletions === 1 ? 'message' : 'messages'}\n            </Txt>\n          </Txt>\n        </div>\n        {/* Says in words what the +/− rows below mean, for anyone reading a prompt diff for the first time. */}\n        <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\" className=\"pl-6\">\n          Changed by this processor: {summary}\n        </Txt>\n      </header>\n      <ol className=\"flex min-w-0 list-none flex-col divide-y divide-border\">\n        {kept.map((message, index) => (\n          <MessageRow key={`kept-${index}`} sign=\" \" message={message} />\n        ))}\n        {changes.map((change, index) => (\n          <ChangeRow key={index} change={change} />\n        ))}\n      </ol>\n    </div>\n  );\n}\n\n/**\n * What this span changed in the request, read as a diff: one card for the system prompt and one for the\n * conversation, each with a +/− count in its header. Every message is a row that opens in place: added\n * and removed rows are tinted and start open, the system messages the span kept sit above them closed,\n * so the change shows where it landed in the prompt without the rest of the prompt drowning it.\n */\nexport function SpanPromptChanges({ span }: { span: SpanRecord }) {\n  const changes = mergeCountOnly(getPromptChanges(span).filter((change): change is Change => isRecord(change)));\n  if (changes.length === 0) return null;\n\n  const system = changes.filter(touchesSystemPrompt);\n  const conversation = changes.filter(change => !touchesSystemPrompt(change));\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-3\">\n      {system.length > 0 && (\n        <DiffCard\n          icon={<ScrollTextIcon />}\n          title=\"System prompt\"\n          changes={system}\n          kept={keptSystemMessages(span, system)}\n        />\n      )}\n      {conversation.length > 0 && (\n        <DiffCard icon={<MessagesSquareIcon />} title=\"Conversation\" changes={conversation} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"span-prompt-changes.cjs.js","names":["formatCompactNumber","parseAvailableSkills","Metadata","pluralize","useState","_Fragment","Txt","cn","DisclosureChevron","focusRing","useCollapsibleBox","CollapsibleBox","SpanPayloadMessages","SpanPayloadJson","DiffStat","getPromptChanges","touchesSystemPrompt","ScrollTextIcon","MessagesSquareIcon"],"sources":["../../../../src/domains/traces/components/span-prompt-changes.tsx"],"sourcesContent":["import type { SpanInputMessage } from '@mastra/core/observability';\nimport { MessagesSquareIcon, ScrollTextIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { SpanPayloadJson, SpanPayloadMessages } from './span-payload';\nimport { parseAvailableSkills } from './span-payload/available-skills';\nimport { getPromptChanges, touchesSystemPrompt } from './span-prompt-impact';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { DiffStat } from '@/ds/components/DiffStat';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Metadata } from '@/ds/components/Metadata';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { formatCompactNumber } from '@/lib/cost';\nimport { pluralize } from '@/lib/string';\nimport { cn } from '@/lib/utils';\n\ntype Change = Exclude<ReturnType<typeof getPromptChanges>[number], null | undefined>;\n\n/** Long content (a skills catalog, workspace instructions) is clipped to this height until expanded. */\nconst COLLAPSED_HEIGHT = 160;\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** How many messages a change touched: its count, else the message or ids it carries. */\nconst countOf = (change: Change) => change.count ?? (change.message !== undefined ? 1 : (change.ids?.length ?? 1));\n\nconst isRemoval = (change: Change) => change.type === 'removeByIds' || change.type === 'clear';\n\n/** The text a system or conversation message carries, joined when it comes in parts. */\nfunction textOf(message: unknown): string {\n  if (typeof message === 'string') return message;\n  if (!isRecord(message)) return '';\n  const { content } = message;\n  if (typeof content === 'string') return content;\n  if (!Array.isArray(content)) return '';\n  return content\n    .map(part => (typeof part === 'string' ? part : isRecord(part) && typeof part.text === 'string' ? part.text : ''))\n    .join('\\n');\n}\n\n/** A one-line name for a message: what it is when we can tell (a skills catalog), else its first line. */\nfunction describeMessage(message: unknown): { title: string; meta: ReactNode } {\n  const text = textOf(message);\n  const size = `${formatCompactNumber(text.length)} chars`;\n  const catalog = parseAvailableSkills(text);\n  if (catalog && !catalog.before.trim() && !catalog.after.trim()) {\n    return {\n      title: 'Skills catalog',\n      meta: (\n        <Metadata>\n          <Metadata.Item>{pluralize(catalog.skills.length, 'skill')}</Metadata.Item>\n          <Metadata.Item>{size}</Metadata.Item>\n        </Metadata>\n      ),\n    };\n  }\n  const firstLine = text\n    .split('\\n')\n    .map(line => line.trim().replace(/^#+\\s*/, ''))\n    .find(Boolean);\n  return { title: firstLine ?? 'Empty message', meta: size };\n}\n\n/** What a change without content was about, e.g. \"2 messages from memory\". */\nfunction describeCountOnly(change: Change): string {\n  const what = pluralize(countOf(change), 'message');\n  const { type, source } = change;\n  if (type === 'clear') {\n    if (source === 'input') return `${what} from this turn's input`;\n    if (source === 'response') return `${what} from the model's response`;\n    return `The whole conversation (${what})`;\n  }\n  if (source === 'memory') return `${what} from memory`;\n  if (source === 'input') return `${what} in this turn's input`;\n  if (source === 'response') return `${what} in the model's response`;\n  if (source === 'context') return `${what} of context`;\n  return what;\n}\n\n/** Back-to-back changes of the same kind that carry no content read as one change. */\nfunction mergeCountOnly(changes: readonly Change[]): Change[] {\n  const merged: Change[] = [];\n  for (const change of changes) {\n    const previous = merged.at(-1);\n    if (previous && isCountOnly(previous) && isCountOnly(change) && sameKind(previous, change)) {\n      merged[merged.length - 1] = { ...previous, count: countOf(previous) + countOf(change) };\n      continue;\n    }\n    merged.push(change);\n  }\n  return merged;\n}\n\nconst isCountOnly = (change: Change) => change.message === undefined && !(change.ids && change.ids.length > 0);\nconst sameKind = (a: Change, b: Change) => a.type === b.type && a.source === b.source && a.tag === b.tag;\n\nconst isMessage = (value: unknown): value is SpanInputMessage => isRecord(value) && typeof value.role === 'string';\n\n/** The system messages the span received and kept: the part of the prompt it built on. */\nfunction keptSystemMessages(span: SpanRecord, changes: readonly Change[]): SpanInputMessage[] {\n  const before =\n    isRecord(span.input) && Array.isArray(span.input.systemMessages) ? span.input.systemMessages.filter(isMessage) : [];\n  const removed = new Set(changes.filter(isRemoval).map(change => JSON.stringify(change.message)));\n  return before.filter(message => !removed.has(JSON.stringify(message)));\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Rows\n * ---------------------------------------------------------------------------------------------- */\n\ntype Sign = '+' | '−' | ' ';\n\nconst SIGN_LABEL: Record<Sign, string> = { '+': 'Added: ', '−': 'Removed: ', ' ': 'Unchanged: ' };\n\n/**\n * One message in the diff: a +/− gutter, a one-line title and its size. Rows with content open in place\n * (chevron on the right); added and removed rows start open, unchanged ones start closed. Long content\n * is clipped until \"Show all\".\n */\nfunction DiffRow({\n  sign,\n  title,\n  meta,\n  defaultOpen = sign !== ' ',\n  children,\n}: {\n  sign: Sign;\n  title: ReactNode;\n  meta?: ReactNode;\n  defaultOpen?: boolean;\n  children?: ReactNode;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n  const expandable = children !== undefined;\n\n  const header = (\n    <>\n      <Txt\n        as=\"span\"\n        aria-hidden\n        variant=\"body-sm\"\n        font=\"mono\"\n        className={cn(\n          'w-3 shrink-0 text-center',\n          sign === '+' && 'text-success-indicator',\n          sign === '−' && 'text-destructive-foreground',\n        )}\n      >\n        {sign}\n      </Txt>\n      <Txt as=\"span\" variant=\"body-sm\" tone={sign === ' ' ? 'muted' : 'ink'} className=\"min-w-0 truncate\">\n        <span className=\"sr-only\">{SIGN_LABEL[sign]}</span>\n        {title}\n      </Txt>\n      {meta && (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"ml-auto shrink-0 tabular-nums\">\n          {meta}\n        </Txt>\n      )}\n      {expandable && <DisclosureChevron open={open} className={cn('size-3 shrink-0', !meta && 'ml-auto')} />}\n    </>\n  );\n\n  return (\n    <li\n      data-sign={sign === ' ' ? 'kept' : sign === '+' ? 'added' : 'removed'}\n      className={cn(\n        'min-w-0 border-l-2',\n        sign === '+' && 'border-success-edge bg-success-subtle',\n        sign === '−' && 'border-destructive-edge bg-destructive-subtle',\n        sign === ' ' && 'border-transparent',\n      )}\n    >\n      {expandable ? (\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          onClick={() => setOpen(current => !current)}\n          className={cn(\n            'flex w-full min-w-0 items-center gap-2 py-2 pr-3 pl-2.5 text-left hover:bg-fill-subtle',\n            focusRing,\n          )}\n        >\n          {header}\n        </button>\n      ) : (\n        <div className=\"flex min-w-0 items-center gap-2 py-2 pr-3 pl-2.5\">{header}</div>\n      )}\n      {expandable && open && <div className=\"min-w-0 pr-3 pb-3 pl-7.5\">{children}</div>}\n    </li>\n  );\n}\n\nfunction Clipped({ children }: { children: ReactNode }) {\n  const box = useCollapsibleBox({ collapsedHeight: COLLAPSED_HEIGHT });\n  return (\n    <CollapsibleBox state={box} expandLabel=\"Show all\">\n      {children}\n    </CollapsibleBox>\n  );\n}\n\nfunction MessageRow({ sign, message, tag }: { sign: Sign; message: SpanInputMessage; tag?: string }) {\n  const { title, meta } = describeMessage(message);\n  return (\n    <DiffRow\n      sign={sign}\n      title={\n        tag ? (\n          <Metadata singleLine>\n            <Metadata.Item>{title}</Metadata.Item>\n            <Metadata.Item className=\"shrink-0\">{tag}</Metadata.Item>\n          </Metadata>\n        ) : (\n          title\n        )\n      }\n      meta={meta}\n    >\n      <Clipped>\n        <SpanPayloadMessages value={[message]} />\n      </Clipped>\n    </DiffRow>\n  );\n}\n\nfunction ChangeRow({ change }: { change: Change }) {\n  const sign = isRemoval(change) ? '−' : '+';\n\n  if (change.message !== undefined) return <MessageRow sign={sign} message={change.message} tag={change.tag} />;\n\n  if (change.ids && change.ids.length > 0) {\n    return (\n      <DiffRow sign={sign} title={pluralize(change.ids.length, 'message')} meta=\"by id\">\n        <Clipped>\n          <SpanPayloadJson value={change.ids} />\n        </Clipped>\n      </DiffRow>\n    );\n  }\n\n  return <DiffRow sign={sign} title={describeCountOnly(change)} />;\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Card\n * ---------------------------------------------------------------------------------------------- */\n\nfunction DiffCard({\n  icon,\n  title,\n  changes,\n  kept = [],\n}: {\n  icon: ReactNode;\n  title: string;\n  changes: Change[];\n  kept?: SpanInputMessage[];\n}) {\n  const additions = changes.filter(change => !isRemoval(change)).reduce((sum, change) => sum + countOf(change), 0);\n  const deletions = changes.filter(isRemoval).reduce((sum, change) => sum + countOf(change), 0);\n  const summary = [\n    additions > 0 && `${pluralize(additions, 'message')} added`,\n    deletions > 0 && `${pluralize(deletions, 'message')} removed`,\n  ]\n    .filter(Boolean)\n    .join(', ');\n\n  return (\n    <div data-slot=\"prompt-diff\" className=\"min-w-0 overflow-clip rounded-md border border-border bg-card\">\n      <header className=\"flex min-w-0 flex-col gap-0.5 border-b border-border px-3 py-2\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span aria-hidden className=\"flex shrink-0 text-muted-foreground [&_svg]:size-4\">\n            {icon}\n          </span>\n          <Txt as=\"h4\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n            {title}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\" className=\"ml-auto flex shrink-0 items-center gap-1.5\">\n            <DiffStat additions={additions} deletions={deletions} />\n            <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n              {additions + deletions === 1 ? 'message' : 'messages'}\n            </Txt>\n          </Txt>\n        </div>\n        {/* Says in words what the +/− rows below mean, for anyone reading a prompt diff for the first time. */}\n        <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\" className=\"pl-6\">\n          Changed by this processor: {summary}\n        </Txt>\n      </header>\n      <ol className=\"flex min-w-0 list-none flex-col divide-y divide-border\">\n        {kept.map((message, index) => (\n          <MessageRow key={`kept-${index}`} sign=\" \" message={message} />\n        ))}\n        {changes.map((change, index) => (\n          <ChangeRow key={index} change={change} />\n        ))}\n      </ol>\n    </div>\n  );\n}\n\n/**\n * What this span changed in the request, read as a diff: one card for the system prompt and one for the\n * conversation, each with a +/− count in its header. Every message is a row that opens in place: added\n * and removed rows are tinted and start open, the system messages the span kept sit above them closed,\n * so the change shows where it landed in the prompt without the rest of the prompt drowning it.\n */\nexport function SpanPromptChanges({ span }: { span: SpanRecord }) {\n  const changes = mergeCountOnly(getPromptChanges(span).filter((change): change is Change => isRecord(change)));\n  if (changes.length === 0) return null;\n\n  const system = changes.filter(touchesSystemPrompt);\n  const conversation = changes.filter(change => !touchesSystemPrompt(change));\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-3\">\n      {system.length > 0 && (\n        <DiffCard\n          icon={<ScrollTextIcon />}\n          title=\"System prompt\"\n          changes={system}\n          kept={keptSystemMessages(span, system)}\n        />\n      )}\n      {conversation.length > 0 && (\n        <DiffCard icon={<MessagesSquareIcon />} title=\"Conversation\" changes={conversation} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/span-prompt-changes.es.js

@@ -1,15 +1,16 @@
-import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { t as formatCompactNumber } from "../../../cost-C2vDb3o7.js";
-import { focusRing } from "../../../primitives/transitions.es.js";
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { r as pluralize } from "../../../string-CNKDIc_4.js";
-import { DisclosureChevron } from "../../../components/DisclosureChevron.es.js";
-import { CollapsibleBox, useCollapsibleBox } from "../../../components/CollapsibleBox.es.js";
 import { SpanPayloadJson } from "./span-payload/span-payload-json.es.js";
-import { parseAvailableSkills } from "./span-payload/available-skills.es.js";
 import { SpanPayloadMessages } from "./span-payload/span-payload-messages.es.js";
+import { parseAvailableSkills } from "./span-payload/available-skills.es.js";
 import { getPromptChanges, touchesSystemPrompt } from "./span-prompt-impact.es.js";
+import { CollapsibleBox, useCollapsibleBox } from "../../../components/CollapsibleBox.es.js";
 import { DiffStat } from "../../../components/DiffStat.es.js";
+import { DisclosureChevron } from "../../../components/DisclosureChevron.es.js";
+import { t as Metadata } from "../../../Metadata-DlVgmRTA.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
+import { focusRing } from "../../../primitives/transitions.es.js";
+import { t as formatCompactNumber } from "../../../cost-C2vDb3o7.js";
+import { i as pluralize } from "../../../string-CA5M0mj_.js";
+import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { MessagesSquareIcon, ScrollTextIcon } from "lucide-react";
@@ -36,7 +37,7 @@ function describeMessage(message) {
 	const catalog = parseAvailableSkills(text);
 	if (catalog && !catalog.before.trim() && !catalog.after.trim()) return {
 		title: "Skills catalog",
-		meta: `${pluralize(catalog.skills.length, "skill")} · ${size}`
+		meta: /* @__PURE__ */ jsxs(Metadata, { children: [/* @__PURE__ */ jsx(Metadata.Item, { children: pluralize(catalog.skills.length, "skill") }), /* @__PURE__ */ jsx(Metadata.Item, { children: size })] })
 	};
 	return {
 		title: text.split("\n").map((line) => line.trim().replace(/^#+\s*/, "")).find(Boolean) ?? "Empty message",
@@ -157,7 +158,13 @@ function MessageRow({ sign, message, tag }) {
 	const { title, meta } = describeMessage(message);
 	return /* @__PURE__ */ jsx(DiffRow, {
 		sign,
-		title: tag ? `${title} · ${tag}` : title,
+		title: tag ? /* @__PURE__ */ jsxs(Metadata, {
+			singleLine: true,
+			children: [/* @__PURE__ */ jsx(Metadata.Item, { children: title }), /* @__PURE__ */ jsx(Metadata.Item, {
+				className: "shrink-0",
+				children: tag
+			})]
+		}) : title,
 		meta,
 		children: /* @__PURE__ */ jsx(Clipped, { children: /* @__PURE__ */ jsx(SpanPayloadMessages, { value: [message] }) })
 	});

package/dist/domains/traces/components/span-prompt-changes.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-prompt-changes.es.js","names":["_Fragment"],"sources":["../../../../src/domains/traces/components/span-prompt-changes.tsx"],"sourcesContent":["import type { SpanInputMessage } from '@mastra/core/observability';\nimport { MessagesSquareIcon, ScrollTextIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { SpanPayloadJson, SpanPayloadMessages } from './span-payload';\nimport { parseAvailableSkills } from './span-payload/available-skills';\nimport { getPromptChanges, touchesSystemPrompt } from './span-prompt-impact';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { DiffStat } from '@/ds/components/DiffStat';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { formatCompactNumber } from '@/lib/cost';\nimport { pluralize } from '@/lib/string';\nimport { cn } from '@/lib/utils';\n\ntype Change = Exclude<ReturnType<typeof getPromptChanges>[number], null | undefined>;\n\n/** Long content (a skills catalog, workspace instructions) is clipped to this height until expanded. */\nconst COLLAPSED_HEIGHT = 160;\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** How many messages a change touched: its count, else the message or ids it carries. */\nconst countOf = (change: Change) => change.count ?? (change.message !== undefined ? 1 : (change.ids?.length ?? 1));\n\nconst isRemoval = (change: Change) => change.type === 'removeByIds' || change.type === 'clear';\n\n/** The text a system or conversation message carries, joined when it comes in parts. */\nfunction textOf(message: unknown): string {\n  if (typeof message === 'string') return message;\n  if (!isRecord(message)) return '';\n  const { content } = message;\n  if (typeof content === 'string') return content;\n  if (!Array.isArray(content)) return '';\n  return content\n    .map(part => (typeof part === 'string' ? part : isRecord(part) && typeof part.text === 'string' ? part.text : ''))\n    .join('\\n');\n}\n\n/** A one-line name for a message: what it is when we can tell (a skills catalog), else its first line. */\nfunction describeMessage(message: unknown): { title: string; meta: string } {\n  const text = textOf(message);\n  const size = `${formatCompactNumber(text.length)} chars`;\n  const catalog = parseAvailableSkills(text);\n  if (catalog && !catalog.before.trim() && !catalog.after.trim()) {\n    return { title: 'Skills catalog', meta: `${pluralize(catalog.skills.length, 'skill')} · ${size}` };\n  }\n  const firstLine = text\n    .split('\\n')\n    .map(line => line.trim().replace(/^#+\\s*/, ''))\n    .find(Boolean);\n  return { title: firstLine ?? 'Empty message', meta: size };\n}\n\n/** What a change without content was about, e.g. \"2 messages from memory\". */\nfunction describeCountOnly(change: Change): string {\n  const what = pluralize(countOf(change), 'message');\n  const { type, source } = change;\n  if (type === 'clear') {\n    if (source === 'input') return `${what} from this turn's input`;\n    if (source === 'response') return `${what} from the model's response`;\n    return `The whole conversation (${what})`;\n  }\n  if (source === 'memory') return `${what} from memory`;\n  if (source === 'input') return `${what} in this turn's input`;\n  if (source === 'response') return `${what} in the model's response`;\n  if (source === 'context') return `${what} of context`;\n  return what;\n}\n\n/** Back-to-back changes of the same kind that carry no content read as one change. */\nfunction mergeCountOnly(changes: readonly Change[]): Change[] {\n  const merged: Change[] = [];\n  for (const change of changes) {\n    const previous = merged.at(-1);\n    if (previous && isCountOnly(previous) && isCountOnly(change) && sameKind(previous, change)) {\n      merged[merged.length - 1] = { ...previous, count: countOf(previous) + countOf(change) };\n      continue;\n    }\n    merged.push(change);\n  }\n  return merged;\n}\n\nconst isCountOnly = (change: Change) => change.message === undefined && !(change.ids && change.ids.length > 0);\nconst sameKind = (a: Change, b: Change) => a.type === b.type && a.source === b.source && a.tag === b.tag;\n\nconst isMessage = (value: unknown): value is SpanInputMessage => isRecord(value) && typeof value.role === 'string';\n\n/** The system messages the span received and kept: the part of the prompt it built on. */\nfunction keptSystemMessages(span: SpanRecord, changes: readonly Change[]): SpanInputMessage[] {\n  const before =\n    isRecord(span.input) && Array.isArray(span.input.systemMessages) ? span.input.systemMessages.filter(isMessage) : [];\n  const removed = new Set(changes.filter(isRemoval).map(change => JSON.stringify(change.message)));\n  return before.filter(message => !removed.has(JSON.stringify(message)));\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Rows\n * ---------------------------------------------------------------------------------------------- */\n\ntype Sign = '+' | '−' | ' ';\n\nconst SIGN_LABEL: Record<Sign, string> = { '+': 'Added: ', '−': 'Removed: ', ' ': 'Unchanged: ' };\n\n/**\n * One message in the diff: a +/− gutter, a one-line title and its size. Rows with content open in place\n * (chevron on the right); added and removed rows start open, unchanged ones start closed. Long content\n * is clipped until \"Show all\".\n */\nfunction DiffRow({\n  sign,\n  title,\n  meta,\n  defaultOpen = sign !== ' ',\n  children,\n}: {\n  sign: Sign;\n  title: ReactNode;\n  meta?: string;\n  defaultOpen?: boolean;\n  children?: ReactNode;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n  const expandable = children !== undefined;\n\n  const header = (\n    <>\n      <Txt\n        as=\"span\"\n        aria-hidden\n        variant=\"body-sm\"\n        font=\"mono\"\n        className={cn(\n          'w-3 shrink-0 text-center',\n          sign === '+' && 'text-success-indicator',\n          sign === '−' && 'text-destructive-foreground',\n        )}\n      >\n        {sign}\n      </Txt>\n      <Txt as=\"span\" variant=\"body-sm\" tone={sign === ' ' ? 'muted' : 'ink'} className=\"min-w-0 truncate\">\n        <span className=\"sr-only\">{SIGN_LABEL[sign]}</span>\n        {title}\n      </Txt>\n      {meta && (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"ml-auto shrink-0 tabular-nums\">\n          {meta}\n        </Txt>\n      )}\n      {expandable && <DisclosureChevron open={open} className={cn('size-3 shrink-0', !meta && 'ml-auto')} />}\n    </>\n  );\n\n  return (\n    <li\n      data-sign={sign === ' ' ? 'kept' : sign === '+' ? 'added' : 'removed'}\n      className={cn(\n        'min-w-0 border-l-2',\n        sign === '+' && 'border-success-edge bg-success-subtle',\n        sign === '−' && 'border-destructive-edge bg-destructive-subtle',\n        sign === ' ' && 'border-transparent',\n      )}\n    >\n      {expandable ? (\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          onClick={() => setOpen(current => !current)}\n          className={cn(\n            'flex w-full min-w-0 items-center gap-2 py-2 pr-3 pl-2.5 text-left hover:bg-fill-subtle',\n            focusRing,\n          )}\n        >\n          {header}\n        </button>\n      ) : (\n        <div className=\"flex min-w-0 items-center gap-2 py-2 pr-3 pl-2.5\">{header}</div>\n      )}\n      {expandable && open && <div className=\"min-w-0 pr-3 pb-3 pl-7.5\">{children}</div>}\n    </li>\n  );\n}\n\nfunction Clipped({ children }: { children: ReactNode }) {\n  const box = useCollapsibleBox({ collapsedHeight: COLLAPSED_HEIGHT });\n  return (\n    <CollapsibleBox state={box} expandLabel=\"Show all\">\n      {children}\n    </CollapsibleBox>\n  );\n}\n\nfunction MessageRow({ sign, message, tag }: { sign: Sign; message: SpanInputMessage; tag?: string }) {\n  const { title, meta } = describeMessage(message);\n  return (\n    <DiffRow sign={sign} title={tag ? `${title} · ${tag}` : title} meta={meta}>\n      <Clipped>\n        <SpanPayloadMessages value={[message]} />\n      </Clipped>\n    </DiffRow>\n  );\n}\n\nfunction ChangeRow({ change }: { change: Change }) {\n  const sign = isRemoval(change) ? '−' : '+';\n\n  if (change.message !== undefined) return <MessageRow sign={sign} message={change.message} tag={change.tag} />;\n\n  if (change.ids && change.ids.length > 0) {\n    return (\n      <DiffRow sign={sign} title={pluralize(change.ids.length, 'message')} meta=\"by id\">\n        <Clipped>\n          <SpanPayloadJson value={change.ids} />\n        </Clipped>\n      </DiffRow>\n    );\n  }\n\n  return <DiffRow sign={sign} title={describeCountOnly(change)} />;\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Card\n * ---------------------------------------------------------------------------------------------- */\n\nfunction DiffCard({\n  icon,\n  title,\n  changes,\n  kept = [],\n}: {\n  icon: ReactNode;\n  title: string;\n  changes: Change[];\n  kept?: SpanInputMessage[];\n}) {\n  const additions = changes.filter(change => !isRemoval(change)).reduce((sum, change) => sum + countOf(change), 0);\n  const deletions = changes.filter(isRemoval).reduce((sum, change) => sum + countOf(change), 0);\n  const summary = [\n    additions > 0 && `${pluralize(additions, 'message')} added`,\n    deletions > 0 && `${pluralize(deletions, 'message')} removed`,\n  ]\n    .filter(Boolean)\n    .join(', ');\n\n  return (\n    <div data-slot=\"prompt-diff\" className=\"min-w-0 overflow-clip rounded-md border border-border bg-card\">\n      <header className=\"flex min-w-0 flex-col gap-0.5 border-b border-border px-3 py-2\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span aria-hidden className=\"flex shrink-0 text-muted-foreground [&_svg]:size-4\">\n            {icon}\n          </span>\n          <Txt as=\"h4\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n            {title}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\" className=\"ml-auto flex shrink-0 items-center gap-1.5\">\n            <DiffStat additions={additions} deletions={deletions} />\n            <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n              {additions + deletions === 1 ? 'message' : 'messages'}\n            </Txt>\n          </Txt>\n        </div>\n        {/* Says in words what the +/− rows below mean, for anyone reading a prompt diff for the first time. */}\n        <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\" className=\"pl-6\">\n          Changed by this processor: {summary}\n        </Txt>\n      </header>\n      <ol className=\"flex min-w-0 list-none flex-col divide-y divide-border\">\n        {kept.map((message, index) => (\n          <MessageRow key={`kept-${index}`} sign=\" \" message={message} />\n        ))}\n        {changes.map((change, index) => (\n          <ChangeRow key={index} change={change} />\n        ))}\n      </ol>\n    </div>\n  );\n}\n\n/**\n * What this span changed in the request, read as a diff: one card for the system prompt and one for the\n * conversation, each with a +/− count in its header. Every message is a row that opens in place: added\n * and removed rows are tinted and start open, the system messages the span kept sit above them closed,\n * so the change shows where it landed in the prompt without the rest of the prompt drowning it.\n */\nexport function SpanPromptChanges({ span }: { span: SpanRecord }) {\n  const changes = mergeCountOnly(getPromptChanges(span).filter((change): change is Change => isRecord(change)));\n  if (changes.length === 0) return null;\n\n  const system = changes.filter(touchesSystemPrompt);\n  const conversation = changes.filter(change => !touchesSystemPrompt(change));\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-3\">\n      {system.length > 0 && (\n        <DiffCard\n          icon={<ScrollTextIcon />}\n          title=\"System prompt\"\n          changes={system}\n          kept={keptSystemMessages(span, system)}\n        />\n      )}\n      {conversation.length > 0 && (\n        <DiffCard icon={<MessagesSquareIcon />} title=\"Conversation\" changes={conversation} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,IAAM,mBAAmB;AAEzB,IAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;;AAGrE,IAAM,WAAW,WAAmB,OAAO,UAAU,OAAO,YAAY,KAAA,IAAY,IAAK,OAAO,KAAK,UAAU;AAE/G,IAAM,aAAa,WAAmB,OAAO,SAAS,iBAAiB,OAAO,SAAS;;AAGvF,SAAS,OAAO,SAA0B;CACxC,IAAI,OAAO,YAAY,UAAU,OAAO;CACxC,IAAI,CAAC,SAAS,OAAO,GAAG,OAAO;CAC/B,MAAM,EAAE,YAAY;CACpB,IAAI,OAAO,YAAY,UAAU,OAAO;CACxC,IAAI,CAAC,MAAM,QAAQ,OAAO,GAAG,OAAO;CACpC,OAAO,QACJ,KAAI,SAAS,OAAO,SAAS,WAAW,OAAO,SAAS,IAAI,KAAK,OAAO,KAAK,SAAS,WAAW,KAAK,OAAO,EAAG,CAAC,CACjH,KAAK,IAAI;AACd;;AAGA,SAAS,gBAAgB,SAAmD;CAC1E,MAAM,OAAO,OAAO,OAAO;CAC3B,MAAM,OAAO,GAAG,oBAAoB,KAAK,MAAM,EAAE;CACjD,MAAM,UAAU,qBAAqB,IAAI;CACzC,IAAI,WAAW,CAAC,QAAQ,OAAO,KAAK,KAAK,CAAC,QAAQ,MAAM,KAAK,GAC3D,OAAO;EAAE,OAAO;EAAkB,MAAM,GAAG,UAAU,QAAQ,OAAO,QAAQ,OAAO,EAAE,KAAK;CAAO;CAMnG,OAAO;EAAE,OAJS,KACf,MAAM,IAAI,CAAC,CACX,KAAI,SAAQ,KAAK,KAAK,CAAC,CAAC,QAAQ,UAAU,EAAE,CAAC,CAAC,CAC9C,KAAK,OACQ,KAAa;EAAiB,MAAM;CAAK;AAC3D;;AAGA,SAAS,kBAAkB,QAAwB;CACjD,MAAM,OAAO,UAAU,QAAQ,MAAM,GAAG,SAAS;CACjD,MAAM,EAAE,MAAM,WAAW;CACzB,IAAI,SAAS,SAAS;EACpB,IAAI,WAAW,SAAS,OAAO,GAAG,KAAK;EACvC,IAAI,WAAW,YAAY,OAAO,GAAG,KAAK;EAC1C,OAAO,2BAA2B,KAAK;CACzC;CACA,IAAI,WAAW,UAAU,OAAO,GAAG,KAAK;CACxC,IAAI,WAAW,SAAS,OAAO,GAAG,KAAK;CACvC,IAAI,WAAW,YAAY,OAAO,GAAG,KAAK;CAC1C,IAAI,WAAW,WAAW,OAAO,GAAG,KAAK;CACzC,OAAO;AACT;;AAGA,SAAS,eAAe,SAAsC;CAC5D,MAAM,SAAmB,CAAC;CAC1B,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,WAAW,OAAO,GAAG,EAAE;EAC7B,IAAI,YAAY,YAAY,QAAQ,KAAK,YAAY,MAAM,KAAK,SAAS,UAAU,MAAM,GAAG;GAC1F,OAAO,OAAO,SAAS,KAAK;IAAE,GAAG;IAAU,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM;GAAE;GACtF;EACF;EACA,OAAO,KAAK,MAAM;CACpB;CACA,OAAO;AACT;AAEA,IAAM,eAAe,WAAmB,OAAO,YAAY,KAAA,KAAa,EAAE,OAAO,OAAO,OAAO,IAAI,SAAS;AAC5G,IAAM,YAAY,GAAW,MAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE;AAErG,IAAM,aAAa,UAA8C,SAAS,KAAK,KAAK,OAAO,MAAM,SAAS;;AAG1G,SAAS,mBAAmB,MAAkB,SAAgD;CAC5F,MAAM,SACJ,SAAS,KAAK,KAAK,KAAK,MAAM,QAAQ,KAAK,MAAM,cAAc,IAAI,KAAK,MAAM,eAAe,OAAO,SAAS,IAAI,CAAC;CACpH,MAAM,UAAU,IAAI,IAAI,QAAQ,OAAO,SAAS,CAAC,CAAC,KAAI,WAAU,KAAK,UAAU,OAAO,OAAO,CAAC,CAAC;CAC/F,OAAO,OAAO,QAAO,YAAW,CAAC,QAAQ,IAAI,KAAK,UAAU,OAAO,CAAC,CAAC;AACvE;AAQA,IAAM,aAAmC;CAAE,KAAK;CAAW,KAAK;CAAa,KAAK;AAAc;;;;;;AAOhG,SAAS,QAAQ,EACf,MACA,OACA,MACA,cAAc,SAAS,KACvB,YAOC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAC5C,MAAM,aAAa,aAAa,KAAA;CAEhC,MAAM,SACJ,qBAAAA,YAAA,EAAA,UAAA;EACE,oBAAC,KAAD;GACE,IAAG;GACH,eAAA;GACA,SAAQ;GACR,MAAK;GACL,WAAW,GACT,4BACA,SAAS,OAAO,0BAChB,SAAS,OAAO,6BAClB;GAEC,UAAA;EACE,CAAA;EACL,qBAAC,KAAD;GAAK,IAAG;GAAO,SAAQ;GAAU,MAAM,SAAS,MAAM,UAAU;GAAO,WAAU;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,WAAW;GAAY,CAAA,GACjD,KACE;;EACJ,QACC,oBAAC,KAAD;GAAK,IAAG;GAAO,SAAQ;GAAO,MAAK;GAAQ,WAAU;GAClD,UAAA;EACE,CAAA;EAEN,cAAc,oBAAC,mBAAD;GAAyB;GAAM,WAAW,GAAG,mBAAmB,CAAC,QAAQ,SAAS;EAAI,CAAA;CACrG,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,aAAW,SAAS,MAAM,SAAS,SAAS,MAAM,UAAU;EAC5D,WAAW,GACT,sBACA,SAAS,OAAO,yCAChB,SAAS,OAAO,iDAChB,SAAS,OAAO,oBAClB;EAPF,UAAA,CASG,aACC,oBAAC,UAAD;GACE,MAAK;GACL,iBAAe;GACf,eAAe,SAAQ,YAAW,CAAC,OAAO;GAC1C,WAAW,GACT,0FACA,SACF;GAEC,UAAA;EACK,CAAA,IAER,oBAAC,OAAD;GAAK,WAAU;GAAoD,UAAA;EAAY,CAAA,GAEhF,cAAc,QAAQ,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC9E;;AAER;AAEA,SAAS,QAAQ,EAAE,YAAqC;CACtD,MAAM,MAAM,kBAAkB,EAAE,iBAAiB,iBAAiB,CAAC;CACnE,OACE,oBAAC,gBAAD;EAAgB,OAAO;EAAK,aAAY;EACrC;CACa,CAAA;AAEpB;AAEA,SAAS,WAAW,EAAE,MAAM,SAAS,OAAgE;CACnG,MAAM,EAAE,OAAO,SAAS,gBAAgB,OAAO;CAC/C,OACE,oBAAC,SAAD;EAAe;EAAM,OAAO,MAAM,GAAG,MAAM,KAAK,QAAQ;EAAa;EACnE,UAAA,oBAAC,SAAD,EAAA,UACE,oBAAC,qBAAD,EAAqB,OAAO,CAAC,OAAO,EAAI,CAAA,EACjC,CAAA;CACF,CAAA;AAEb;AAEA,SAAS,UAAU,EAAE,UAA8B;CACjD,MAAM,OAAO,UAAU,MAAM,IAAI,MAAM;CAEvC,IAAI,OAAO,YAAY,KAAA,GAAW,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,OAAO;EAAS,KAAK,OAAO;CAAM,CAAA;CAE5G,IAAI,OAAO,OAAO,OAAO,IAAI,SAAS,GACpC,OACE,oBAAC,SAAD;EAAe;EAAM,OAAO,UAAU,OAAO,IAAI,QAAQ,SAAS;EAAG,MAAK;EACxE,UAAA,oBAAC,SAAD,EAAA,UACE,oBAAC,iBAAD,EAAiB,OAAO,OAAO,IAAM,CAAA,EAC9B,CAAA;CACF,CAAA;CAIb,OAAO,oBAAC,SAAD;EAAe;EAAM,OAAO,kBAAkB,MAAM;CAAI,CAAA;AACjE;AAMA,SAAS,SAAS,EAChB,MACA,OACA,SACA,OAAO,CAAC,KAMP;CACD,MAAM,YAAY,QAAQ,QAAO,WAAU,CAAC,UAAU,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,WAAW,MAAM,QAAQ,MAAM,GAAG,CAAC;CAC/G,MAAM,YAAY,QAAQ,OAAO,SAAS,CAAC,CAAC,QAAQ,KAAK,WAAW,MAAM,QAAQ,MAAM,GAAG,CAAC;CAC5F,MAAM,UAAU,CACd,YAAY,KAAK,GAAG,UAAU,WAAW,SAAS,EAAE,SACpD,YAAY,KAAK,GAAG,UAAU,WAAW,SAAS,EAAE,SACtD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;CAEZ,OACE,qBAAC,OAAD;EAAK,aAAU;EAAc,WAAU;EAAvC,UAAA,CACE,qBAAC,UAAD;GAAQ,WAAU;GAAlB,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,eAAA;MAAY,WAAU;MACzB,UAAA;KACG,CAAA;KACN,oBAAC,KAAD;MAAK,IAAG;MAAK,SAAQ;MAAQ,MAAK;MAAM,WAAU;MAC/C,UAAA;KACE,CAAA;KACL,qBAAC,KAAD;MAAK,IAAG;MAAO,SAAQ;MAAO,MAAK;MAAO,WAAU;MAApD,UAAA,CACE,oBAAC,UAAD;OAAqB;OAAsB;MAAY,CAAA,GACvD,oBAAC,KAAD;OAAK,IAAG;OAAO,SAAQ;OAAO,MAAK;OAChC,UAAA,YAAY,cAAc,IAAI,YAAY;MACxC,CAAA,CACF;;IACF;GAEL,CAAA,GAAA,qBAAC,KAAD;IAAK,IAAG;IAAI,SAAQ;IAAU,MAAK;IAAQ,WAAU;IAArD,UAAA,CAA4D,+BAC9B,OACzB;GACC,CAAA,CAAA;EACR,CAAA,GAAA,qBAAC,MAAD;GAAI,WAAU;GAAd,UAAA,CACG,KAAK,KAAK,SAAS,UAClB,oBAAC,YAAD;IAAkC,MAAK;IAAa;GAAU,GAA7C,QAAQ,OAAqC,CAC/D,GACA,QAAQ,KAAK,QAAQ,UACpB,oBAAC,WAAD,EAA+B,OAAS,GAAxB,KAAwB,CACzC,CACC;EACD,CAAA,CAAA;;AAET;;;;;;;AAQA,SAAgB,kBAAkB,EAAE,QAA8B;CAChE,MAAM,UAAU,eAAe,iBAAiB,IAAI,CAAC,CAAC,QAAQ,WAA6B,SAAS,MAAM,CAAC,CAAC;CAC5G,IAAI,QAAQ,WAAW,GAAG,OAAO;CAEjC,MAAM,SAAS,QAAQ,OAAO,mBAAmB;CACjD,MAAM,eAAe,QAAQ,QAAO,WAAU,CAAC,oBAAoB,MAAM,CAAC;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,OAAO,SAAS,KACf,oBAAC,UAAD;GACE,MAAM,oBAAC,gBAAD,CAAiB,CAAA;GACvB,OAAM;GACN,SAAS;GACT,MAAM,mBAAmB,MAAM,MAAM;EACtC,CAAA,GAEF,aAAa,SAAS,KACrB,oBAAC,UAAD;GAAU,MAAM,oBAAC,oBAAD,CAAqB,CAAA;GAAG,OAAM;GAAe,SAAS;EAAe,CAAA,CAEpF;;AAET"}
+{"version":3,"file":"span-prompt-changes.es.js","names":["_Fragment"],"sources":["../../../../src/domains/traces/components/span-prompt-changes.tsx"],"sourcesContent":["import type { SpanInputMessage } from '@mastra/core/observability';\nimport { MessagesSquareIcon, ScrollTextIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { SpanRecord } from '../types';\nimport { SpanPayloadJson, SpanPayloadMessages } from './span-payload';\nimport { parseAvailableSkills } from './span-payload/available-skills';\nimport { getPromptChanges, touchesSystemPrompt } from './span-prompt-impact';\nimport { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\nimport { DiffStat } from '@/ds/components/DiffStat';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Metadata } from '@/ds/components/Metadata';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { formatCompactNumber } from '@/lib/cost';\nimport { pluralize } from '@/lib/string';\nimport { cn } from '@/lib/utils';\n\ntype Change = Exclude<ReturnType<typeof getPromptChanges>[number], null | undefined>;\n\n/** Long content (a skills catalog, workspace instructions) is clipped to this height until expanded. */\nconst COLLAPSED_HEIGHT = 160;\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** How many messages a change touched: its count, else the message or ids it carries. */\nconst countOf = (change: Change) => change.count ?? (change.message !== undefined ? 1 : (change.ids?.length ?? 1));\n\nconst isRemoval = (change: Change) => change.type === 'removeByIds' || change.type === 'clear';\n\n/** The text a system or conversation message carries, joined when it comes in parts. */\nfunction textOf(message: unknown): string {\n  if (typeof message === 'string') return message;\n  if (!isRecord(message)) return '';\n  const { content } = message;\n  if (typeof content === 'string') return content;\n  if (!Array.isArray(content)) return '';\n  return content\n    .map(part => (typeof part === 'string' ? part : isRecord(part) && typeof part.text === 'string' ? part.text : ''))\n    .join('\\n');\n}\n\n/** A one-line name for a message: what it is when we can tell (a skills catalog), else its first line. */\nfunction describeMessage(message: unknown): { title: string; meta: ReactNode } {\n  const text = textOf(message);\n  const size = `${formatCompactNumber(text.length)} chars`;\n  const catalog = parseAvailableSkills(text);\n  if (catalog && !catalog.before.trim() && !catalog.after.trim()) {\n    return {\n      title: 'Skills catalog',\n      meta: (\n        <Metadata>\n          <Metadata.Item>{pluralize(catalog.skills.length, 'skill')}</Metadata.Item>\n          <Metadata.Item>{size}</Metadata.Item>\n        </Metadata>\n      ),\n    };\n  }\n  const firstLine = text\n    .split('\\n')\n    .map(line => line.trim().replace(/^#+\\s*/, ''))\n    .find(Boolean);\n  return { title: firstLine ?? 'Empty message', meta: size };\n}\n\n/** What a change without content was about, e.g. \"2 messages from memory\". */\nfunction describeCountOnly(change: Change): string {\n  const what = pluralize(countOf(change), 'message');\n  const { type, source } = change;\n  if (type === 'clear') {\n    if (source === 'input') return `${what} from this turn's input`;\n    if (source === 'response') return `${what} from the model's response`;\n    return `The whole conversation (${what})`;\n  }\n  if (source === 'memory') return `${what} from memory`;\n  if (source === 'input') return `${what} in this turn's input`;\n  if (source === 'response') return `${what} in the model's response`;\n  if (source === 'context') return `${what} of context`;\n  return what;\n}\n\n/** Back-to-back changes of the same kind that carry no content read as one change. */\nfunction mergeCountOnly(changes: readonly Change[]): Change[] {\n  const merged: Change[] = [];\n  for (const change of changes) {\n    const previous = merged.at(-1);\n    if (previous && isCountOnly(previous) && isCountOnly(change) && sameKind(previous, change)) {\n      merged[merged.length - 1] = { ...previous, count: countOf(previous) + countOf(change) };\n      continue;\n    }\n    merged.push(change);\n  }\n  return merged;\n}\n\nconst isCountOnly = (change: Change) => change.message === undefined && !(change.ids && change.ids.length > 0);\nconst sameKind = (a: Change, b: Change) => a.type === b.type && a.source === b.source && a.tag === b.tag;\n\nconst isMessage = (value: unknown): value is SpanInputMessage => isRecord(value) && typeof value.role === 'string';\n\n/** The system messages the span received and kept: the part of the prompt it built on. */\nfunction keptSystemMessages(span: SpanRecord, changes: readonly Change[]): SpanInputMessage[] {\n  const before =\n    isRecord(span.input) && Array.isArray(span.input.systemMessages) ? span.input.systemMessages.filter(isMessage) : [];\n  const removed = new Set(changes.filter(isRemoval).map(change => JSON.stringify(change.message)));\n  return before.filter(message => !removed.has(JSON.stringify(message)));\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Rows\n * ---------------------------------------------------------------------------------------------- */\n\ntype Sign = '+' | '−' | ' ';\n\nconst SIGN_LABEL: Record<Sign, string> = { '+': 'Added: ', '−': 'Removed: ', ' ': 'Unchanged: ' };\n\n/**\n * One message in the diff: a +/− gutter, a one-line title and its size. Rows with content open in place\n * (chevron on the right); added and removed rows start open, unchanged ones start closed. Long content\n * is clipped until \"Show all\".\n */\nfunction DiffRow({\n  sign,\n  title,\n  meta,\n  defaultOpen = sign !== ' ',\n  children,\n}: {\n  sign: Sign;\n  title: ReactNode;\n  meta?: ReactNode;\n  defaultOpen?: boolean;\n  children?: ReactNode;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n  const expandable = children !== undefined;\n\n  const header = (\n    <>\n      <Txt\n        as=\"span\"\n        aria-hidden\n        variant=\"body-sm\"\n        font=\"mono\"\n        className={cn(\n          'w-3 shrink-0 text-center',\n          sign === '+' && 'text-success-indicator',\n          sign === '−' && 'text-destructive-foreground',\n        )}\n      >\n        {sign}\n      </Txt>\n      <Txt as=\"span\" variant=\"body-sm\" tone={sign === ' ' ? 'muted' : 'ink'} className=\"min-w-0 truncate\">\n        <span className=\"sr-only\">{SIGN_LABEL[sign]}</span>\n        {title}\n      </Txt>\n      {meta && (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"ml-auto shrink-0 tabular-nums\">\n          {meta}\n        </Txt>\n      )}\n      {expandable && <DisclosureChevron open={open} className={cn('size-3 shrink-0', !meta && 'ml-auto')} />}\n    </>\n  );\n\n  return (\n    <li\n      data-sign={sign === ' ' ? 'kept' : sign === '+' ? 'added' : 'removed'}\n      className={cn(\n        'min-w-0 border-l-2',\n        sign === '+' && 'border-success-edge bg-success-subtle',\n        sign === '−' && 'border-destructive-edge bg-destructive-subtle',\n        sign === ' ' && 'border-transparent',\n      )}\n    >\n      {expandable ? (\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          onClick={() => setOpen(current => !current)}\n          className={cn(\n            'flex w-full min-w-0 items-center gap-2 py-2 pr-3 pl-2.5 text-left hover:bg-fill-subtle',\n            focusRing,\n          )}\n        >\n          {header}\n        </button>\n      ) : (\n        <div className=\"flex min-w-0 items-center gap-2 py-2 pr-3 pl-2.5\">{header}</div>\n      )}\n      {expandable && open && <div className=\"min-w-0 pr-3 pb-3 pl-7.5\">{children}</div>}\n    </li>\n  );\n}\n\nfunction Clipped({ children }: { children: ReactNode }) {\n  const box = useCollapsibleBox({ collapsedHeight: COLLAPSED_HEIGHT });\n  return (\n    <CollapsibleBox state={box} expandLabel=\"Show all\">\n      {children}\n    </CollapsibleBox>\n  );\n}\n\nfunction MessageRow({ sign, message, tag }: { sign: Sign; message: SpanInputMessage; tag?: string }) {\n  const { title, meta } = describeMessage(message);\n  return (\n    <DiffRow\n      sign={sign}\n      title={\n        tag ? (\n          <Metadata singleLine>\n            <Metadata.Item>{title}</Metadata.Item>\n            <Metadata.Item className=\"shrink-0\">{tag}</Metadata.Item>\n          </Metadata>\n        ) : (\n          title\n        )\n      }\n      meta={meta}\n    >\n      <Clipped>\n        <SpanPayloadMessages value={[message]} />\n      </Clipped>\n    </DiffRow>\n  );\n}\n\nfunction ChangeRow({ change }: { change: Change }) {\n  const sign = isRemoval(change) ? '−' : '+';\n\n  if (change.message !== undefined) return <MessageRow sign={sign} message={change.message} tag={change.tag} />;\n\n  if (change.ids && change.ids.length > 0) {\n    return (\n      <DiffRow sign={sign} title={pluralize(change.ids.length, 'message')} meta=\"by id\">\n        <Clipped>\n          <SpanPayloadJson value={change.ids} />\n        </Clipped>\n      </DiffRow>\n    );\n  }\n\n  return <DiffRow sign={sign} title={describeCountOnly(change)} />;\n}\n\n/* ------------------------------------------------------------------------------------------------\n * Card\n * ---------------------------------------------------------------------------------------------- */\n\nfunction DiffCard({\n  icon,\n  title,\n  changes,\n  kept = [],\n}: {\n  icon: ReactNode;\n  title: string;\n  changes: Change[];\n  kept?: SpanInputMessage[];\n}) {\n  const additions = changes.filter(change => !isRemoval(change)).reduce((sum, change) => sum + countOf(change), 0);\n  const deletions = changes.filter(isRemoval).reduce((sum, change) => sum + countOf(change), 0);\n  const summary = [\n    additions > 0 && `${pluralize(additions, 'message')} added`,\n    deletions > 0 && `${pluralize(deletions, 'message')} removed`,\n  ]\n    .filter(Boolean)\n    .join(', ');\n\n  return (\n    <div data-slot=\"prompt-diff\" className=\"min-w-0 overflow-clip rounded-md border border-border bg-card\">\n      <header className=\"flex min-w-0 flex-col gap-0.5 border-b border-border px-3 py-2\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span aria-hidden className=\"flex shrink-0 text-muted-foreground [&_svg]:size-4\">\n            {icon}\n          </span>\n          <Txt as=\"h4\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n            {title}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\" className=\"ml-auto flex shrink-0 items-center gap-1.5\">\n            <DiffStat additions={additions} deletions={deletions} />\n            <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n              {additions + deletions === 1 ? 'message' : 'messages'}\n            </Txt>\n          </Txt>\n        </div>\n        {/* Says in words what the +/− rows below mean, for anyone reading a prompt diff for the first time. */}\n        <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\" className=\"pl-6\">\n          Changed by this processor: {summary}\n        </Txt>\n      </header>\n      <ol className=\"flex min-w-0 list-none flex-col divide-y divide-border\">\n        {kept.map((message, index) => (\n          <MessageRow key={`kept-${index}`} sign=\" \" message={message} />\n        ))}\n        {changes.map((change, index) => (\n          <ChangeRow key={index} change={change} />\n        ))}\n      </ol>\n    </div>\n  );\n}\n\n/**\n * What this span changed in the request, read as a diff: one card for the system prompt and one for the\n * conversation, each with a +/− count in its header. Every message is a row that opens in place: added\n * and removed rows are tinted and start open, the system messages the span kept sit above them closed,\n * so the change shows where it landed in the prompt without the rest of the prompt drowning it.\n */\nexport function SpanPromptChanges({ span }: { span: SpanRecord }) {\n  const changes = mergeCountOnly(getPromptChanges(span).filter((change): change is Change => isRecord(change)));\n  if (changes.length === 0) return null;\n\n  const system = changes.filter(touchesSystemPrompt);\n  const conversation = changes.filter(change => !touchesSystemPrompt(change));\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-3\">\n      {system.length > 0 && (\n        <DiffCard\n          icon={<ScrollTextIcon />}\n          title=\"System prompt\"\n          changes={system}\n          kept={keptSystemMessages(span, system)}\n        />\n      )}\n      {conversation.length > 0 && (\n        <DiffCard icon={<MessagesSquareIcon />} title=\"Conversation\" changes={conversation} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/traces/components/span-rows.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_traces_components_shared = require("./shared.cjs.js");
 const require_domains_traces_hooks_get_all_span_ids = require("../hooks/get-all-span-ids.cjs.js");
 const require_domains_traces_utils_span_timing = require("../utils/span-timing.cjs.js");
+const require_domains_traces_components_shared = require("./shared.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/traces/components/span-rows.tsx

package/dist/domains/traces/components/span-rows.es.js

@@ -1,6 +1,6 @@
-import { getSpanTypeUi } from "./shared.es.js";
 import { getSpanDescendantIds } from "../hooks/get-all-span-ids.es.js";
 import { getOverallLatency } from "../utils/span-timing.es.js";
+import { getSpanTypeUi } from "./shared.es.js";
 import { Fragment, useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/domains/traces/components/span-rows.tsx

package/dist/domains/traces/components/span-summary-description.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_traces_utils_span_utils = require("../utils/span-utils.cjs.js");
+const require_DataPanel = require("../../../DataPanel-BRRAvWYQ.cjs");
+const require_primitives_control_size = require("../../../primitives/control-size.cjs.js");
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
 const require_utils_date_format = require("../../../utils/date-format.cjs.js");
 const require_utils_duration = require("../../../utils/duration.cjs.js");
-const require_primitives_control_size = require("../../../primitives/control-size.cjs.js");
-const require_DataPanel = require("../../../DataPanel-Coc9h35I.cjs");
-const require_domains_traces_utils_span_utils = require("../utils/span-utils.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/domains/traces/components/span-summary-description.tsx

package/dist/domains/traces/components/span-summary-description.es.js

@@ -1,9 +1,9 @@
+import { getSpanDurationMs } from "../utils/span-utils.es.js";
+import { t as DataPanel } from "../../../DataPanel-pVr5LVaK.js";
+import { controlSizeClasses } from "../../../primitives/control-size.es.js";
 import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { formatDate, formatTimestampPrecise } from "../../../utils/date-format.es.js";
 import { formatDuration, formatDurationPrecise } from "../../../utils/duration.es.js";
-import { controlSizeClasses } from "../../../primitives/control-size.es.js";
-import { t as DataPanel } from "../../../DataPanel-IgB9D5PO.js";
-import { getSpanDurationMs } from "../utils/span-utils.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarClockIcon, TimerIcon } from "lucide-react";
 // src/domains/traces/components/span-summary-description.tsx

package/dist/domains/traces/components/span-timeline-row.cjs.js

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_utils_duration = require("../../../utils/duration.cjs.js");
-const require_primitives_transitions = require("../../../primitives/transitions.cjs.js");
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_Badge = require("../../../Badge-DZ6r6bcw.cjs");
-const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");
-const require_components_SegmentedName = require("../../../components/SegmentedName.cjs.js");
-const require_domains_traces_components_span_type_badge = require("./span-type-badge.cjs.js");
-const require_domains_traces_utils_span_timing = require("../utils/span-timing.cjs.js");
 const require_domains_traces_utils_span_timeline = require("../utils/span-timeline.cjs.js");
-const require_domains_traces_components_span_tree_rail = require("./span-tree-rail.cjs.js");
+const require_domains_traces_utils_span_timing = require("../utils/span-timing.cjs.js");
 const require_domains_traces_components_span_timing_hover_card = require("./span-timing-hover-card.cjs.js");
+const require_domains_traces_components_span_tree_rail = require("./span-tree-rail.cjs.js");
+const require_domains_traces_components_span_type_badge = require("./span-type-badge.cjs.js");
+const require_Badge = require("../../../Badge-DqaMg7Gy.cjs");
+const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");
+const require_components_SegmentedName = require("../../../components/SegmentedName.cjs.js");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
+const require_primitives_transitions = require("../../../primitives/transitions.cjs.js");
+const require_utils = require("../../../utils-uDc1ofX1.cjs");
+const require_utils_duration = require("../../../utils/duration.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/domains/traces/components/span-timeline-row.es.js

@@ -1,15 +1,15 @@
-import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { formatDuration } from "../../../utils/duration.es.js";
-import { focusRingInset } from "../../../primitives/transitions.es.js";
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { t as Badge } from "../../../Badge-aVu5iGAF.js";
-import { HoverCard, HoverCardTrigger } from "../../../components/HoverCard.es.js";
-import { SegmentedName } from "../../../components/SegmentedName.es.js";
-import { SpanTypeBadge } from "./span-type-badge.es.js";
-import { getSpanTimingLayout } from "../utils/span-timing.es.js";
 import { TIMELINE_TICKS, TIMELINE_TRACK_PADDING, splitSpanName } from "../utils/span-timeline.es.js";
-import { SPAN_TREE_PAD_Y, SpanTreeRail } from "./span-tree-rail.es.js";
+import { getSpanTimingLayout } from "../utils/span-timing.es.js";
 import { SpanTimingHoverCard } from "./span-timing-hover-card.es.js";
+import { SPAN_TREE_PAD_Y, SpanTreeRail } from "./span-tree-rail.es.js";
+import { SpanTypeBadge } from "./span-type-badge.es.js";
+import { t as Badge } from "../../../Badge-C7NnqmMx.js";
+import { HoverCard, HoverCardTrigger } from "../../../components/HoverCard.es.js";
+import { SegmentedName } from "../../../components/SegmentedName.es.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
+import { focusRingInset } from "../../../primitives/transitions.es.js";
+import { t as cn } from "../../../utils-DQx8TpNT.js";
+import { formatDuration } from "../../../utils/duration.es.js";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";

package/dist/domains/traces/components/span-timing-hover-card.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_DataKeysAndValues = require("../../../DataKeysAndValues-BbKeVxrQ.cjs");
+const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
 const require_utils_date_format = require("../../../utils/date-format.cjs.js");
 const require_utils_duration = require("../../../utils/duration.cjs.js");
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_components_HoverCard = require("../../../components/HoverCard.cjs.js");
-const require_DataKeysAndValues = require("../../../DataKeysAndValues-DsH6AbAo.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/traces/components/span-timing-hover-card.tsx
 function SpanTimingHoverCard({ span, startShiftMs }) {

package/dist/domains/traces/components/span-timing-hover-card.es.js

@@ -1,9 +1,9 @@
+import { t as DataKeysAndValues } from "../../../DataKeysAndValues-B56je3sK.js";
+import { HoverCardContent } from "../../../components/HoverCard.es.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
 import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { formatTimestampPrecise } from "../../../utils/date-format.es.js";
 import { formatDurationPrecise } from "../../../utils/duration.es.js";
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { HoverCardContent } from "../../../components/HoverCard.es.js";
-import { t as DataKeysAndValues } from "../../../DataKeysAndValues-PwOmGxyp.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/traces/components/span-timing-hover-card.tsx
 function SpanTimingHoverCard({ span, startShiftMs }) {

package/dist/domains/traces/components/span-token-usage.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_DataKeysAndValues = require("../../../DataKeysAndValues-DsH6AbAo.cjs");
 const require_domains_traces_components_span_token_usage_utils = require("./span-token-usage.utils.cjs.js");
+const require_DataKeysAndValues = require("../../../DataKeysAndValues-BbKeVxrQ.cjs");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/traces/components/span-token-usage.tsx
 /** Input and output token counts, each followed by its breakdown. */

package/dist/domains/traces/components/span-token-usage.es.js

@@ -1,6 +1,6 @@
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { t as DataKeysAndValues } from "../../../DataKeysAndValues-PwOmGxyp.js";
 import { getTokenUsageRows } from "./span-token-usage.utils.es.js";
+import { t as DataKeysAndValues } from "../../../DataKeysAndValues-B56je3sK.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/domains/traces/components/span-token-usage.tsx
 /** Input and output token counts, each followed by its breakdown. */

package/dist/domains/traces/components/span-token-usage.utils.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils_duration = require("../../../utils/duration.cjs.js");
 const require_domains_traces_utils_span_utils = require("../utils/span-utils.cjs.js");
+const require_utils_duration = require("../../../utils/duration.cjs.js");
 let _mastra_core_observability = require("@mastra/core/observability");
 // src/domains/traces/components/span-token-usage.utils.ts
 var BREAKDOWN_PARTS = [
@@ -17,7 +17,7 @@ function formatBreakdown(details) {
 		const value = details[key];
 		return typeof value === "number" && value > 0 ? [`${value.toLocaleString()} ${label}`] : [];
 	});
-	return parts.length > 0 ? parts.join(" · ") : void 0;
+	return parts.length > 0 ? parts.join(", ") : void 0;
 }
 /** One row per direction that reports a token count; null when neither does. */
 function getTokenUsageRows(usage) {

package/dist/domains/traces/components/span-token-usage.utils.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-token-usage.utils.cjs.js","names":["SpanType","getSpanDurationMs","formatDuration"],"sources":["../../../../src/domains/traces/components/span-token-usage.utils.ts"],"sourcesContent":["import type { UsageStats } from '@mastra/core/observability';\nimport { SpanType } from '@mastra/core/observability';\nimport { getSpanDurationMs } from '../utils/span-utils';\nimport { formatDuration } from '@/utils/duration';\n\nexport type TokenUsageRow = {\n  label: 'Input' | 'Output';\n  total: number;\n  /** Non-zero breakdown, e.g. `5,632 cached · 974 text`. */\n  breakdown: string | undefined;\n};\n\nconst BREAKDOWN_PARTS = [\n  ['cacheRead', 'cached'],\n  ['cacheWrite', 'cache write'],\n  ['reasoning', 'reasoning'],\n  ['text', 'text'],\n  ['audio', 'audio'],\n  ['image', 'image'],\n] as const;\n\nfunction formatBreakdown(details: object | undefined): string | undefined {\n  if (!details) return undefined;\n  const parts = BREAKDOWN_PARTS.flatMap(([key, label]) => {\n    const value: unknown = (details as Record<string, unknown>)[key];\n    return typeof value === 'number' && value > 0 ? [`${value.toLocaleString()} ${label}`] : [];\n  });\n  return parts.length > 0 ? parts.join(' · ') : undefined;\n}\n\n/** One row per direction that reports a token count; null when neither does. */\nexport function getTokenUsageRows(usage: UsageStats | undefined | null): TokenUsageRow[] | null {\n  if (!usage) return null;\n  const rows: TokenUsageRow[] = [];\n  if (typeof usage.inputTokens === 'number') {\n    rows.push({ label: 'Input', total: usage.inputTokens, breakdown: formatBreakdown(usage.inputDetails) });\n  }\n  if (typeof usage.outputTokens === 'number') {\n    rows.push({ label: 'Output', total: usage.outputTokens, breakdown: formatBreakdown(usage.outputDetails) });\n  }\n  return rows.length > 0 ? rows : null;\n}\n\nexport type ModelFacts = {\n  model?: string;\n  provider?: string;\n  finishReason?: string;\n  firstToken?: string;\n  speed?: string;\n};\n\ntype ModelSpan = {\n  spanType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n  attributes?: Record<string, unknown> | null;\n};\n\nconst MODEL_SPAN_TYPES: ReadonlySet<string> = new Set([\n  SpanType.MODEL_GENERATION,\n  SpanType.MODEL_STEP,\n  SpanType.MODEL_INFERENCE,\n]);\n\nconst asString = (value: unknown) => (typeof value === 'string' && value !== '' ? value : undefined);\n\n/**\n * Model, finish reason, time to first token and output speed of a model span.\n * Other spans get none; each fact is left out when the span doesn't record what it needs.\n */\nexport function getModelFacts(span: ModelSpan): ModelFacts {\n  if (!span.spanType || !MODEL_SPAN_TYPES.has(span.spanType)) return {};\n  const attributes = span.attributes ?? {};\n  const completionStartTime =\n    attributes.completionStartTime instanceof Date\n      ? attributes.completionStartTime\n      : asString(attributes.completionStartTime);\n  const usage = attributes.usage as UsageStats | undefined;\n\n  const firstTokenMs = getSpanDurationMs(span.startedAt, completionStartTime);\n  const streamingMs = getSpanDurationMs(completionStartTime, span.endedAt);\n  const outputTokens = usage?.outputTokens;\n  const tokensPerSecond =\n    typeof outputTokens === 'number' && outputTokens > 0 && streamingMs\n      ? (outputTokens / streamingMs) * 1_000\n      : undefined;\n\n  return {\n    model: asString(attributes.model),\n    provider: asString(attributes.provider),\n    finishReason: asString(attributes.finishReason),\n    firstToken: completionStartTime ? formatDuration(firstTokenMs) : undefined,\n    speed: tokensPerSecond === undefined ? undefined : `${Math.round(tokensPerSecond).toLocaleString()} tok/s`,\n  };\n}\n"],"mappings":";;;;;AAYA,IAAM,kBAAkB;CACtB,CAAC,aAAa,QAAQ;CACtB,CAAC,cAAc,aAAa;CAC5B,CAAC,aAAa,WAAW;CACzB,CAAC,QAAQ,MAAM;CACf,CAAC,SAAS,OAAO;CACjB,CAAC,SAAS,OAAO;AACnB;AAEA,SAAS,gBAAgB,SAAiD;CACxE,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,MAAM,QAAQ,gBAAgB,SAAS,CAAC,KAAK,WAAW;EACtD,MAAM,QAAkB,QAAoC;EAC5D,OAAO,OAAO,UAAU,YAAY,QAAQ,IAAI,CAAC,GAAG,MAAM,eAAe,EAAE,GAAG,OAAO,IAAI,CAAC;CAC5F,CAAC;CACD,OAAO,MAAM,SAAS,IAAI,MAAM,KAAK,KAAK,IAAI,KAAA;AAChD;;AAGA,SAAgB,kBAAkB,OAA8D;CAC9F,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,OAAwB,CAAC;CAC/B,IAAI,OAAO,MAAM,gBAAgB,UAC/B,KAAK,KAAK;EAAE,OAAO;EAAS,OAAO,MAAM;EAAa,WAAW,gBAAgB,MAAM,YAAY;CAAE,CAAC;CAExG,IAAI,OAAO,MAAM,iBAAiB,UAChC,KAAK,KAAK;EAAE,OAAO;EAAU,OAAO,MAAM;EAAc,WAAW,gBAAgB,MAAM,aAAa;CAAE,CAAC;CAE3G,OAAO,KAAK,SAAS,IAAI,OAAO;AAClC;AAiBA,IAAM,mCAAwC,IAAI,IAAI;CACpDA,2BAAAA,SAAS;CACTA,2BAAAA,SAAS;CACTA,2BAAAA,SAAS;AACX,CAAC;AAED,IAAM,YAAY,UAAoB,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ,KAAA;;;;;AAM1F,SAAgB,cAAc,MAA6B;CACzD,IAAI,CAAC,KAAK,YAAY,CAAC,iBAAiB,IAAI,KAAK,QAAQ,GAAG,OAAO,CAAC;CACpE,MAAM,aAAa,KAAK,cAAc,CAAC;CACvC,MAAM,sBACJ,WAAW,+BAA+B,OACtC,WAAW,sBACX,SAAS,WAAW,mBAAmB;CAC7C,MAAM,QAAQ,WAAW;CAEzB,MAAM,eAAeC,wCAAAA,kBAAkB,KAAK,WAAW,mBAAmB;CAC1E,MAAM,cAAcA,wCAAAA,kBAAkB,qBAAqB,KAAK,OAAO;CACvE,MAAM,eAAe,OAAO;CAC5B,MAAM,kBACJ,OAAO,iBAAiB,YAAY,eAAe,KAAK,cACnD,eAAe,cAAe,MAC/B,KAAA;CAEN,OAAO;EACL,OAAO,SAAS,WAAW,KAAK;EAChC,UAAU,SAAS,WAAW,QAAQ;EACtC,cAAc,SAAS,WAAW,YAAY;EAC9C,YAAY,sBAAsBC,uBAAAA,eAAe,YAAY,IAAI,KAAA;EACjE,OAAO,oBAAoB,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,MAAM,eAAe,CAAC,CAAC,eAAe,EAAE;CACrG;AACF"}
+{"version":3,"file":"span-token-usage.utils.cjs.js","names":["SpanType","getSpanDurationMs","formatDuration"],"sources":["../../../../src/domains/traces/components/span-token-usage.utils.ts"],"sourcesContent":["import type { UsageStats } from '@mastra/core/observability';\nimport { SpanType } from '@mastra/core/observability';\nimport { getSpanDurationMs } from '../utils/span-utils';\nimport { formatDuration } from '@/utils/duration';\n\nexport type TokenUsageRow = {\n  label: 'Input' | 'Output';\n  total: number;\n  /** Non-zero breakdown, e.g. `5,632 cached, 974 text`. */\n  breakdown: string | undefined;\n};\n\nconst BREAKDOWN_PARTS = [\n  ['cacheRead', 'cached'],\n  ['cacheWrite', 'cache write'],\n  ['reasoning', 'reasoning'],\n  ['text', 'text'],\n  ['audio', 'audio'],\n  ['image', 'image'],\n] as const;\n\nfunction formatBreakdown(details: object | undefined): string | undefined {\n  if (!details) return undefined;\n  const parts = BREAKDOWN_PARTS.flatMap(([key, label]) => {\n    const value: unknown = (details as Record<string, unknown>)[key];\n    return typeof value === 'number' && value > 0 ? [`${value.toLocaleString()} ${label}`] : [];\n  });\n  return parts.length > 0 ? parts.join(', ') : undefined;\n}\n\n/** One row per direction that reports a token count; null when neither does. */\nexport function getTokenUsageRows(usage: UsageStats | undefined | null): TokenUsageRow[] | null {\n  if (!usage) return null;\n  const rows: TokenUsageRow[] = [];\n  if (typeof usage.inputTokens === 'number') {\n    rows.push({ label: 'Input', total: usage.inputTokens, breakdown: formatBreakdown(usage.inputDetails) });\n  }\n  if (typeof usage.outputTokens === 'number') {\n    rows.push({ label: 'Output', total: usage.outputTokens, breakdown: formatBreakdown(usage.outputDetails) });\n  }\n  return rows.length > 0 ? rows : null;\n}\n\nexport type ModelFacts = {\n  model?: string;\n  provider?: string;\n  finishReason?: string;\n  firstToken?: string;\n  speed?: string;\n};\n\ntype ModelSpan = {\n  spanType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n  attributes?: Record<string, unknown> | null;\n};\n\nconst MODEL_SPAN_TYPES: ReadonlySet<string> = new Set([\n  SpanType.MODEL_GENERATION,\n  SpanType.MODEL_STEP,\n  SpanType.MODEL_INFERENCE,\n]);\n\nconst asString = (value: unknown) => (typeof value === 'string' && value !== '' ? value : undefined);\n\n/**\n * Model, finish reason, time to first token and output speed of a model span.\n * Other spans get none; each fact is left out when the span doesn't record what it needs.\n */\nexport function getModelFacts(span: ModelSpan): ModelFacts {\n  if (!span.spanType || !MODEL_SPAN_TYPES.has(span.spanType)) return {};\n  const attributes = span.attributes ?? {};\n  const completionStartTime =\n    attributes.completionStartTime instanceof Date\n      ? attributes.completionStartTime\n      : asString(attributes.completionStartTime);\n  const usage = attributes.usage as UsageStats | undefined;\n\n  const firstTokenMs = getSpanDurationMs(span.startedAt, completionStartTime);\n  const streamingMs = getSpanDurationMs(completionStartTime, span.endedAt);\n  const outputTokens = usage?.outputTokens;\n  const tokensPerSecond =\n    typeof outputTokens === 'number' && outputTokens > 0 && streamingMs\n      ? (outputTokens / streamingMs) * 1_000\n      : undefined;\n\n  return {\n    model: asString(attributes.model),\n    provider: asString(attributes.provider),\n    finishReason: asString(attributes.finishReason),\n    firstToken: completionStartTime ? formatDuration(firstTokenMs) : undefined,\n    speed: tokensPerSecond === undefined ? undefined : `${Math.round(tokensPerSecond).toLocaleString()} tok/s`,\n  };\n}\n"],"mappings":";;;;;AAYA,IAAM,kBAAkB;CACtB,CAAC,aAAa,QAAQ;CACtB,CAAC,cAAc,aAAa;CAC5B,CAAC,aAAa,WAAW;CACzB,CAAC,QAAQ,MAAM;CACf,CAAC,SAAS,OAAO;CACjB,CAAC,SAAS,OAAO;AACnB;AAEA,SAAS,gBAAgB,SAAiD;CACxE,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,MAAM,QAAQ,gBAAgB,SAAS,CAAC,KAAK,WAAW;EACtD,MAAM,QAAkB,QAAoC;EAC5D,OAAO,OAAO,UAAU,YAAY,QAAQ,IAAI,CAAC,GAAG,MAAM,eAAe,EAAE,GAAG,OAAO,IAAI,CAAC;CAC5F,CAAC;CACD,OAAO,MAAM,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,KAAA;AAC/C;;AAGA,SAAgB,kBAAkB,OAA8D;CAC9F,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,OAAwB,CAAC;CAC/B,IAAI,OAAO,MAAM,gBAAgB,UAC/B,KAAK,KAAK;EAAE,OAAO;EAAS,OAAO,MAAM;EAAa,WAAW,gBAAgB,MAAM,YAAY;CAAE,CAAC;CAExG,IAAI,OAAO,MAAM,iBAAiB,UAChC,KAAK,KAAK;EAAE,OAAO;EAAU,OAAO,MAAM;EAAc,WAAW,gBAAgB,MAAM,aAAa;CAAE,CAAC;CAE3G,OAAO,KAAK,SAAS,IAAI,OAAO;AAClC;AAiBA,IAAM,mCAAwC,IAAI,IAAI;CACpDA,2BAAAA,SAAS;CACTA,2BAAAA,SAAS;CACTA,2BAAAA,SAAS;AACX,CAAC;AAED,IAAM,YAAY,UAAoB,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ,KAAA;;;;;AAM1F,SAAgB,cAAc,MAA6B;CACzD,IAAI,CAAC,KAAK,YAAY,CAAC,iBAAiB,IAAI,KAAK,QAAQ,GAAG,OAAO,CAAC;CACpE,MAAM,aAAa,KAAK,cAAc,CAAC;CACvC,MAAM,sBACJ,WAAW,+BAA+B,OACtC,WAAW,sBACX,SAAS,WAAW,mBAAmB;CAC7C,MAAM,QAAQ,WAAW;CAEzB,MAAM,eAAeC,wCAAAA,kBAAkB,KAAK,WAAW,mBAAmB;CAC1E,MAAM,cAAcA,wCAAAA,kBAAkB,qBAAqB,KAAK,OAAO;CACvE,MAAM,eAAe,OAAO;CAC5B,MAAM,kBACJ,OAAO,iBAAiB,YAAY,eAAe,KAAK,cACnD,eAAe,cAAe,MAC/B,KAAA;CAEN,OAAO;EACL,OAAO,SAAS,WAAW,KAAK;EAChC,UAAU,SAAS,WAAW,QAAQ;EACtC,cAAc,SAAS,WAAW,YAAY;EAC9C,YAAY,sBAAsBC,uBAAAA,eAAe,YAAY,IAAI,KAAA;EACjE,OAAO,oBAAoB,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,MAAM,eAAe,CAAC,CAAC,eAAe,EAAE;CACrG;AACF"}

package/dist/domains/traces/components/span-token-usage.utils.es.js

@@ -1,5 +1,5 @@
-import { formatDuration } from "../../../utils/duration.es.js";
 import { getSpanDurationMs } from "../utils/span-utils.es.js";
+import { formatDuration } from "../../../utils/duration.es.js";
 import { SpanType } from "@mastra/core/observability";
 // src/domains/traces/components/span-token-usage.utils.ts
 var BREAKDOWN_PARTS = [
@@ -16,7 +16,7 @@ function formatBreakdown(details) {
 		const value = details[key];
 		return typeof value === "number" && value > 0 ? [`${value.toLocaleString()} ${label}`] : [];
 	});
-	return parts.length > 0 ? parts.join(" · ") : void 0;
+	return parts.length > 0 ? parts.join(", ") : void 0;
 }
 /** One row per direction that reports a token count; null when neither does. */
 function getTokenUsageRows(usage) {

package/dist/domains/traces/components/span-token-usage.utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-token-usage.utils.es.js","names":[],"sources":["../../../../src/domains/traces/components/span-token-usage.utils.ts"],"sourcesContent":["import type { UsageStats } from '@mastra/core/observability';\nimport { SpanType } from '@mastra/core/observability';\nimport { getSpanDurationMs } from '../utils/span-utils';\nimport { formatDuration } from '@/utils/duration';\n\nexport type TokenUsageRow = {\n  label: 'Input' | 'Output';\n  total: number;\n  /** Non-zero breakdown, e.g. `5,632 cached · 974 text`. */\n  breakdown: string | undefined;\n};\n\nconst BREAKDOWN_PARTS = [\n  ['cacheRead', 'cached'],\n  ['cacheWrite', 'cache write'],\n  ['reasoning', 'reasoning'],\n  ['text', 'text'],\n  ['audio', 'audio'],\n  ['image', 'image'],\n] as const;\n\nfunction formatBreakdown(details: object | undefined): string | undefined {\n  if (!details) return undefined;\n  const parts = BREAKDOWN_PARTS.flatMap(([key, label]) => {\n    const value: unknown = (details as Record<string, unknown>)[key];\n    return typeof value === 'number' && value > 0 ? [`${value.toLocaleString()} ${label}`] : [];\n  });\n  return parts.length > 0 ? parts.join(' · ') : undefined;\n}\n\n/** One row per direction that reports a token count; null when neither does. */\nexport function getTokenUsageRows(usage: UsageStats | undefined | null): TokenUsageRow[] | null {\n  if (!usage) return null;\n  const rows: TokenUsageRow[] = [];\n  if (typeof usage.inputTokens === 'number') {\n    rows.push({ label: 'Input', total: usage.inputTokens, breakdown: formatBreakdown(usage.inputDetails) });\n  }\n  if (typeof usage.outputTokens === 'number') {\n    rows.push({ label: 'Output', total: usage.outputTokens, breakdown: formatBreakdown(usage.outputDetails) });\n  }\n  return rows.length > 0 ? rows : null;\n}\n\nexport type ModelFacts = {\n  model?: string;\n  provider?: string;\n  finishReason?: string;\n  firstToken?: string;\n  speed?: string;\n};\n\ntype ModelSpan = {\n  spanType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n  attributes?: Record<string, unknown> | null;\n};\n\nconst MODEL_SPAN_TYPES: ReadonlySet<string> = new Set([\n  SpanType.MODEL_GENERATION,\n  SpanType.MODEL_STEP,\n  SpanType.MODEL_INFERENCE,\n]);\n\nconst asString = (value: unknown) => (typeof value === 'string' && value !== '' ? value : undefined);\n\n/**\n * Model, finish reason, time to first token and output speed of a model span.\n * Other spans get none; each fact is left out when the span doesn't record what it needs.\n */\nexport function getModelFacts(span: ModelSpan): ModelFacts {\n  if (!span.spanType || !MODEL_SPAN_TYPES.has(span.spanType)) return {};\n  const attributes = span.attributes ?? {};\n  const completionStartTime =\n    attributes.completionStartTime instanceof Date\n      ? attributes.completionStartTime\n      : asString(attributes.completionStartTime);\n  const usage = attributes.usage as UsageStats | undefined;\n\n  const firstTokenMs = getSpanDurationMs(span.startedAt, completionStartTime);\n  const streamingMs = getSpanDurationMs(completionStartTime, span.endedAt);\n  const outputTokens = usage?.outputTokens;\n  const tokensPerSecond =\n    typeof outputTokens === 'number' && outputTokens > 0 && streamingMs\n      ? (outputTokens / streamingMs) * 1_000\n      : undefined;\n\n  return {\n    model: asString(attributes.model),\n    provider: asString(attributes.provider),\n    finishReason: asString(attributes.finishReason),\n    firstToken: completionStartTime ? formatDuration(firstTokenMs) : undefined,\n    speed: tokensPerSecond === undefined ? undefined : `${Math.round(tokensPerSecond).toLocaleString()} tok/s`,\n  };\n}\n"],"mappings":";;;;AAYA,IAAM,kBAAkB;CACtB,CAAC,aAAa,QAAQ;CACtB,CAAC,cAAc,aAAa;CAC5B,CAAC,aAAa,WAAW;CACzB,CAAC,QAAQ,MAAM;CACf,CAAC,SAAS,OAAO;CACjB,CAAC,SAAS,OAAO;AACnB;AAEA,SAAS,gBAAgB,SAAiD;CACxE,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,MAAM,QAAQ,gBAAgB,SAAS,CAAC,KAAK,WAAW;EACtD,MAAM,QAAkB,QAAoC;EAC5D,OAAO,OAAO,UAAU,YAAY,QAAQ,IAAI,CAAC,GAAG,MAAM,eAAe,EAAE,GAAG,OAAO,IAAI,CAAC;CAC5F,CAAC;CACD,OAAO,MAAM,SAAS,IAAI,MAAM,KAAK,KAAK,IAAI,KAAA;AAChD;;AAGA,SAAgB,kBAAkB,OAA8D;CAC9F,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,OAAwB,CAAC;CAC/B,IAAI,OAAO,MAAM,gBAAgB,UAC/B,KAAK,KAAK;EAAE,OAAO;EAAS,OAAO,MAAM;EAAa,WAAW,gBAAgB,MAAM,YAAY;CAAE,CAAC;CAExG,IAAI,OAAO,MAAM,iBAAiB,UAChC,KAAK,KAAK;EAAE,OAAO;EAAU,OAAO,MAAM;EAAc,WAAW,gBAAgB,MAAM,aAAa;CAAE,CAAC;CAE3G,OAAO,KAAK,SAAS,IAAI,OAAO;AAClC;AAiBA,IAAM,mCAAwC,IAAI,IAAI;CACpD,SAAS;CACT,SAAS;CACT,SAAS;AACX,CAAC;AAED,IAAM,YAAY,UAAoB,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ,KAAA;;;;;AAM1F,SAAgB,cAAc,MAA6B;CACzD,IAAI,CAAC,KAAK,YAAY,CAAC,iBAAiB,IAAI,KAAK,QAAQ,GAAG,OAAO,CAAC;CACpE,MAAM,aAAa,KAAK,cAAc,CAAC;CACvC,MAAM,sBACJ,WAAW,+BAA+B,OACtC,WAAW,sBACX,SAAS,WAAW,mBAAmB;CAC7C,MAAM,QAAQ,WAAW;CAEzB,MAAM,eAAe,kBAAkB,KAAK,WAAW,mBAAmB;CAC1E,MAAM,cAAc,kBAAkB,qBAAqB,KAAK,OAAO;CACvE,MAAM,eAAe,OAAO;CAC5B,MAAM,kBACJ,OAAO,iBAAiB,YAAY,eAAe,KAAK,cACnD,eAAe,cAAe,MAC/B,KAAA;CAEN,OAAO;EACL,OAAO,SAAS,WAAW,KAAK;EAChC,UAAU,SAAS,WAAW,QAAQ;EACtC,cAAc,SAAS,WAAW,YAAY;EAC9C,YAAY,sBAAsB,eAAe,YAAY,IAAI,KAAA;EACjE,OAAO,oBAAoB,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,MAAM,eAAe,CAAC,CAAC,eAAe,EAAE;CACrG;AACF"}
+{"version":3,"file":"span-token-usage.utils.es.js","names":[],"sources":["../../../../src/domains/traces/components/span-token-usage.utils.ts"],"sourcesContent":["import type { UsageStats } from '@mastra/core/observability';\nimport { SpanType } from '@mastra/core/observability';\nimport { getSpanDurationMs } from '../utils/span-utils';\nimport { formatDuration } from '@/utils/duration';\n\nexport type TokenUsageRow = {\n  label: 'Input' | 'Output';\n  total: number;\n  /** Non-zero breakdown, e.g. `5,632 cached, 974 text`. */\n  breakdown: string | undefined;\n};\n\nconst BREAKDOWN_PARTS = [\n  ['cacheRead', 'cached'],\n  ['cacheWrite', 'cache write'],\n  ['reasoning', 'reasoning'],\n  ['text', 'text'],\n  ['audio', 'audio'],\n  ['image', 'image'],\n] as const;\n\nfunction formatBreakdown(details: object | undefined): string | undefined {\n  if (!details) return undefined;\n  const parts = BREAKDOWN_PARTS.flatMap(([key, label]) => {\n    const value: unknown = (details as Record<string, unknown>)[key];\n    return typeof value === 'number' && value > 0 ? [`${value.toLocaleString()} ${label}`] : [];\n  });\n  return parts.length > 0 ? parts.join(', ') : undefined;\n}\n\n/** One row per direction that reports a token count; null when neither does. */\nexport function getTokenUsageRows(usage: UsageStats | undefined | null): TokenUsageRow[] | null {\n  if (!usage) return null;\n  const rows: TokenUsageRow[] = [];\n  if (typeof usage.inputTokens === 'number') {\n    rows.push({ label: 'Input', total: usage.inputTokens, breakdown: formatBreakdown(usage.inputDetails) });\n  }\n  if (typeof usage.outputTokens === 'number') {\n    rows.push({ label: 'Output', total: usage.outputTokens, breakdown: formatBreakdown(usage.outputDetails) });\n  }\n  return rows.length > 0 ? rows : null;\n}\n\nexport type ModelFacts = {\n  model?: string;\n  provider?: string;\n  finishReason?: string;\n  firstToken?: string;\n  speed?: string;\n};\n\ntype ModelSpan = {\n  spanType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n  attributes?: Record<string, unknown> | null;\n};\n\nconst MODEL_SPAN_TYPES: ReadonlySet<string> = new Set([\n  SpanType.MODEL_GENERATION,\n  SpanType.MODEL_STEP,\n  SpanType.MODEL_INFERENCE,\n]);\n\nconst asString = (value: unknown) => (typeof value === 'string' && value !== '' ? value : undefined);\n\n/**\n * Model, finish reason, time to first token and output speed of a model span.\n * Other spans get none; each fact is left out when the span doesn't record what it needs.\n */\nexport function getModelFacts(span: ModelSpan): ModelFacts {\n  if (!span.spanType || !MODEL_SPAN_TYPES.has(span.spanType)) return {};\n  const attributes = span.attributes ?? {};\n  const completionStartTime =\n    attributes.completionStartTime instanceof Date\n      ? attributes.completionStartTime\n      : asString(attributes.completionStartTime);\n  const usage = attributes.usage as UsageStats | undefined;\n\n  const firstTokenMs = getSpanDurationMs(span.startedAt, completionStartTime);\n  const streamingMs = getSpanDurationMs(completionStartTime, span.endedAt);\n  const outputTokens = usage?.outputTokens;\n  const tokensPerSecond =\n    typeof outputTokens === 'number' && outputTokens > 0 && streamingMs\n      ? (outputTokens / streamingMs) * 1_000\n      : undefined;\n\n  return {\n    model: asString(attributes.model),\n    provider: asString(attributes.provider),\n    finishReason: asString(attributes.finishReason),\n    firstToken: completionStartTime ? formatDuration(firstTokenMs) : undefined,\n    speed: tokensPerSecond === undefined ? undefined : `${Math.round(tokensPerSecond).toLocaleString()} tok/s`,\n  };\n}\n"],"mappings":";;;;AAYA,IAAM,kBAAkB;CACtB,CAAC,aAAa,QAAQ;CACtB,CAAC,cAAc,aAAa;CAC5B,CAAC,aAAa,WAAW;CACzB,CAAC,QAAQ,MAAM;CACf,CAAC,SAAS,OAAO;CACjB,CAAC,SAAS,OAAO;AACnB;AAEA,SAAS,gBAAgB,SAAiD;CACxE,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,MAAM,QAAQ,gBAAgB,SAAS,CAAC,KAAK,WAAW;EACtD,MAAM,QAAkB,QAAoC;EAC5D,OAAO,OAAO,UAAU,YAAY,QAAQ,IAAI,CAAC,GAAG,MAAM,eAAe,EAAE,GAAG,OAAO,IAAI,CAAC;CAC5F,CAAC;CACD,OAAO,MAAM,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,KAAA;AAC/C;;AAGA,SAAgB,kBAAkB,OAA8D;CAC9F,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,OAAwB,CAAC;CAC/B,IAAI,OAAO,MAAM,gBAAgB,UAC/B,KAAK,KAAK;EAAE,OAAO;EAAS,OAAO,MAAM;EAAa,WAAW,gBAAgB,MAAM,YAAY;CAAE,CAAC;CAExG,IAAI,OAAO,MAAM,iBAAiB,UAChC,KAAK,KAAK;EAAE,OAAO;EAAU,OAAO,MAAM;EAAc,WAAW,gBAAgB,MAAM,aAAa;CAAE,CAAC;CAE3G,OAAO,KAAK,SAAS,IAAI,OAAO;AAClC;AAiBA,IAAM,mCAAwC,IAAI,IAAI;CACpD,SAAS;CACT,SAAS;CACT,SAAS;AACX,CAAC;AAED,IAAM,YAAY,UAAoB,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ,KAAA;;;;;AAM1F,SAAgB,cAAc,MAA6B;CACzD,IAAI,CAAC,KAAK,YAAY,CAAC,iBAAiB,IAAI,KAAK,QAAQ,GAAG,OAAO,CAAC;CACpE,MAAM,aAAa,KAAK,cAAc,CAAC;CACvC,MAAM,sBACJ,WAAW,+BAA+B,OACtC,WAAW,sBACX,SAAS,WAAW,mBAAmB;CAC7C,MAAM,QAAQ,WAAW;CAEzB,MAAM,eAAe,kBAAkB,KAAK,WAAW,mBAAmB;CAC1E,MAAM,cAAc,kBAAkB,qBAAqB,KAAK,OAAO;CACvE,MAAM,eAAe,OAAO;CAC5B,MAAM,kBACJ,OAAO,iBAAiB,YAAY,eAAe,KAAK,cACnD,eAAe,cAAe,MAC/B,KAAA;CAEN,OAAO;EACL,OAAO,SAAS,WAAW,KAAK;EAChC,UAAU,SAAS,WAAW,QAAQ;EACtC,cAAc,SAAS,WAAW,YAAY;EAC9C,YAAY,sBAAsB,eAAe,YAAY,IAAI,KAAA;EACjE,OAAO,oBAAoB,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,MAAM,eAAe,CAAC,CAAC,eAAe,EAAE;CACrG;AACF"}

package/dist/domains/traces/components/span-type-badge.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tooltip = require("../../../tooltip-BiRLT3Th.cjs");
+const require_tooltip = require("../../../tooltip-BsExuMO8.cjs");
 const require_icons_ProcessorIcon = require("../../../icons/ProcessorIcon.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/traces/components/span-type-badge.tsx

package/dist/domains/traces/components/span-type-badge.es.js

@@ -1,4 +1,4 @@
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../../tooltip-HzcLyGtV.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../../tooltip-DJcze2VZ.js";
 import { ProcessorIcon } from "../../../icons/ProcessorIcon.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/traces/components/span-type-badge.tsx

package/dist/domains/traces/components/thread-trace/thread-trace-details.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../../../utils-uDc1ofX1.cjs");
-const require_DataPanel = require("../../../../DataPanel-Coc9h35I.cjs");
-const require_Card = require("../../../../Card-C6iEBgVq.cjs");
 const require_domains_traces_components_thread_trace_thread_trace_row_context = require("./thread-trace-row-context.cjs.js");
+const require_Card = require("../../../../Card-C9oCXvxU.cjs");
+const require_DataPanel = require("../../../../DataPanel-BRRAvWYQ.cjs");
+const require_utils = require("../../../../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/traces/components/thread-trace/thread-trace-details.tsx
 /** The details column of a row: a raised card with a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. */