npm - @mastra/playground-ui - Versions diffs - 53.0.0-alpha.8 → 53.0.0 - Mend

@mastra/playground-ui 53.0.0-alpha.8 → 53.0.0

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

Files changed (224) hide show

package/dist/domains/traces/components/span-data-panel-view.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n formatSpanDuration,\n formatSpanPanelTimestamp,\n getTokenLimitMessage,\n isTokenLimitExceeded,\n} from '../utils/span-utils';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport { truncateString } from '@/lib/truncate-string';\n\nfunction buildDialogTitle(sectionTitle: string, icon: ReactNode, span: { spanId: string; traceId: string }) {\n return (\n <>\n <span className=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n {icon}\n {sectionTitle}\n </span>\n <span>\n › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n </span>\n <span>\n › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n </span>\n </>\n );\n}\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. /\n span: SpanRecord \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n /\n When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n /\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /* Optional count shown in the \"Feedback\" tab label. /\n feedbackTabBadge?: ReactNode;\n /\n Whether this span is the displayed root of the current view (trace root or\n * branch anchor). Controls visibility of trace-level metadata fields. Defaults\n * to `span.parentSpanId == null` (trace case) when omitted.\n /\n isAnchor?: boolean;\n /* Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). /\n className?: string;\n}\n\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onClose,\n onPrevious,\n onNext,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n className,\n}: SpanDataPanelViewProps) {\n return (\n <DataPanel className={className}>\n {/ 32px buttons + border would overflow min-h-14 by 1px; keep this header level with its neighbours. /}\n <DataPanel.Header className=\"py-2\">\n <DataPanel.Heading className=\"whitespace-nowrap\">\n Span <b># {truncateString(spanId, 12)}</b>\n </DataPanel.Heading>\n <ButtonsGroup className=\"ml-auto shrink-0\">\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Previous span\"\n nextLabel=\"Next span\"\n />\n <DataPanel.CloseButton onClick={onClose} />\n </ButtonsGroup>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <SpanDataPanelContent\n span={span}\n traceId={traceId}\n spanId={spanId}\n activeTab={activeTab}\n onTabChange={onTabChange}\n feedbackTabSlot={feedbackTabSlot}\n feedbackTabBadge={feedbackTabBadge}\n isAnchor={isAnchor}\n />\n )}\n </DataPanel>\n );\n}\n\nfunction SpanDataPanelContent({\n span,\n traceId,\n spanId,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n}: {\n span: SpanRecord;\n traceId: string;\n spanId: string;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n feedbackTabBadge?: ReactNode;\n isAnchor?: boolean;\n}) {\n const duration = formatSpanDuration(span.startedAt, span.endedAt);\n const startedAt = formatSpanPanelTimestamp(span.startedAt);\n const endedAt = formatSpanPanelTimestamp(span.endedAt);\n const usage = span.attributes?.usage as TokenUsage \| undefined;\n\n const detailsBody = (\n <>\n {isTokenLimitExceeded(span) && (\n <div className=\"mb-3\">\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n </div>\n )}\n\n {usage && <SpanTokenUsage usage={usage} className=\"mb-3\" />}\n\n <DataKeysAndValues>\n {/ Anchor-only: rich trace-context fields. Live on the full SpanRecord, not on the\n * lightweight payload, so they only have values once the full span is loaded. */}\n {(isAnchor ?? span.parentSpanId == null) && (\n <>\n {span.traceId && (\n <>\n <DataKeysAndValues.Key>Trace Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Trace Id to clipboard\" copyValue={span.traceId}>\n {span.traceId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.tags && span.tags.length > 0 && (\n <>\n <DataKeysAndValues.Key>Tags</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.tags.join(', ')}</DataKeysAndValues.Value>\n </>\n )}\n {span.runId && (\n <>\n <DataKeysAndValues.Key>Run Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Run Id to clipboard\" copyValue={span.runId}>\n {span.runId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.threadId && (\n <>\n <DataKeysAndValues.Key>Thread Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Thread Id to clipboard\" copyValue={span.threadId}>\n {span.threadId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.sessionId && (\n <>\n <DataKeysAndValues.Key>Session Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Session Id to clipboard\"\n copyValue={span.sessionId}\n >\n {span.sessionId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.requestId && (\n <>\n <DataKeysAndValues.Key>Request Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Request Id to clipboard\"\n copyValue={span.requestId}\n >\n {span.requestId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.resourceId && (\n <>\n <DataKeysAndValues.Key>Resource Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Resource Id to clipboard\"\n copyValue={span.resourceId}\n >\n {span.resourceId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.userId && (\n <>\n <DataKeysAndValues.Key>User Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy User Id to clipboard\" copyValue={span.userId}>\n {span.userId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.organizationId && (\n <>\n <DataKeysAndValues.Key>Organization Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Organization Id to clipboard\"\n copyValue={span.organizationId}\n >\n {span.organizationId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.experimentId && (\n <>\n <DataKeysAndValues.Key>Experiment Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Experiment Id to clipboard\"\n copyValue={span.experimentId}\n >\n {span.experimentId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n </>\n )}\n {span.name && (\n <>\n <DataKeysAndValues.Key>Name</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.name}</DataKeysAndValues.Value>\n </>\n )}\n {span.spanType && (\n <>\n <DataKeysAndValues.Key>Type</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.spanType}</DataKeysAndValues.Value>\n </>\n )}\n {startedAt && (\n <>\n <DataKeysAndValues.Key>Started</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{startedAt}</DataKeysAndValues.Value>\n </>\n )}\n {endedAt && (\n <>\n <DataKeysAndValues.Key>Ended</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{endedAt}</DataKeysAndValues.Value>\n </>\n )}\n {duration && (\n <>\n <DataKeysAndValues.Key>Duration</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{duration}</DataKeysAndValues.Value>\n </>\n )}\n </DataKeysAndValues>\n\n <div className=\"mt-3 grid gap-3\">\n <DataPanel.CodeSection\n title=\"Input\"\n dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n icon={<FileInputIcon />}\n codeStr={JSON.stringify(span.input ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Output\"\n dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n icon={<FileOutputIcon />}\n codeStr={JSON.stringify(span.output ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Metadata\"\n dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Attributes\"\n dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n />\n </div>\n </>\n );\n\n // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n if (!feedbackTabSlot) {\n return <DataPanel.Content>{detailsBody}</DataPanel.Content>;\n }\n\n return (\n <DataPanel.Content>\n <Tabs defaultTab=\"details\" value={activeTab} onValueChange={onTabChange}>\n <TabList variant=\"pill-ghost\" className=\"px-0\">\n <Tab value=\"details\">Details</Tab>\n <Tab value=\"feedback\">Feedback {feedbackTabBadge != null && <>({feedbackTabBadge})</>}</Tab>\n </TabList>\n\n <TabContent value=\"details\">{detailsBody}</TabContent>\n <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>\n </Tabs>\n </DataPanel.Content>\n );\n}\n"],"names":["jsxs","Fragment","DataPanel","truncateString","ButtonsGroup","jsx","formatSpanDuration","formatSpanPanelTimestamp","isTokenLimitExceeded","Notice","SpanTokenUsage","DataKeysAndValues","FileInputIcon","FileOutputIcon","BracesIcon","Tabs","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAS,gBAAA,CAAiB,YAAA,EAAsB,IAAA,EAAiB,IAAA,EAA2C;AAC1G,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,MAAA,EAAA,EAAK,WAAU,oFAAA,EACb,QAAA,EAAA;AAAA,MAAA,IAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA;AAAA,oCACC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,MAAA,SAAA;AAAA,sBACGA,eAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,IAAA,CAAK;AAAA,OAAA,EAAO;AAAA,KAAA,EACpD,CAAA;AAAA,oCACC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,sBACIA,eAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,IAAA,CAAK;AAAA,OAAA,EAAQ;AAAA,KAAA,EACtD;AAAA,GAAA,EACF,CAAA;AAEJ;AA8BO,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,uBACEA,eAAA,CAACE,uBAAU,SAAA,EAET,QAAA,EAAA;AAAA,oBAAAF,eAAA,CAACE,mBAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,sBAAAF,eAAA,CAACE,mBAAA,CAAU,OAAA,EAAV,EAAkB,SAAA,EAAU,mBAAA,EAAoB,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wCACzC,GAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UAAGC,mCAAA,CAAe,QAAQ,EAAE;AAAA,SAAA,EAAE;AAAA,OAAA,EACxC,CAAA;AAAA,sBACAH,eAAA,CAACI,yBAAA,EAAA,EAAa,SAAA,EAAU,kBAAA,EACtB,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACH,mBAAA,CAAU,WAAA;AAAA,UAAV;AAAA,YACC,UAAA;AAAA,YACA,MAAA;AAAA,YACA,aAAA,EAAc,eAAA;AAAA,YACd,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBACAG,cAAA,CAACH,mBAAA,CAAU,WAAA,EAAV,EAAsB,SAAS,OAAA,EAAS;AAAA,OAAA,EAC3C;AAAA,KAAA,EACF,CAAA;AAAA,IAEC,SAAA,mBACCG,cAAA,CAACH,mBAAA,CAAU,WAAA,EAAV,EAAsB,QAAA,EAAA,yBAAA,EAAuB,CAAA,GAC5C,CAAC,IAAA,mBACHG,cAAA,CAACH,mBAAA,CAAU,MAAA,EAAV,EAAiB,6BAAe,CAAA,mBAEjCG,cAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AAEA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EASG;AACD,EAAA,MAAM,QAAA,GAAWC,iDAAA,CAAmB,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAChE,EAAA,MAAM,SAAA,GAAYC,uDAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AACzD,EAAA,MAAM,OAAA,GAAUA,uDAAA,CAAyB,IAAA,CAAK,OAAO,CAAA;AACrD,EAAA,MAAM,KAAA,GAAQ,KAAK,UAAA,EAAY,KAAA;AAE/B,EAAA,MAAM,8BACJP,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAAO,mDAAA,CAAqB,IAAI,qBACxBH,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,MAAA,EACb,QAAA,kBAAAA,cAAA,CAACI,iBAAO,OAAA,EAAQ,SAAA,EAAU,OAAM,sBAAA,EAC9B,QAAA,kBAAAJ,cAAA,CAACI,cAAO,OAAA,EAAP,EAAgB,8DAAqB,IAAI,CAAA,EAAE,GAC9C,CAAA,EACF,CAAA;AAAA,IAGD,KAAA,oBAASJ,cAAA,CAACK,uDAAA,EAAA,EAAe,KAAA,EAAc,WAAU,MAAA,EAAO,CAAA;AAAA,oCAExDC,mCAAA,EAAA,EAGG,QAAA,EAAA;AAAA,MAAA,CAAA,QAAA,IAAY,IAAA,CAAK,YAAA,IAAgB,IAAA,qBACjCX,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,2BACJD,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,0BAC/BN,cAAA,CAACM,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,8BAA6B,SAAA,EAAW,IAAA,CAAK,OAAA,EAC1F,QAAA,EAAA,IAAA,CAAK,OAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,KAAK,IAAA,IAAQ,IAAA,CAAK,IAAA,CAAK,MAAA,GAAS,qBAC/BX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,0BAC3BN,cAAA,CAACM,oCAAkB,KAAA,EAAlB,EAAyB,eAAK,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,EAAE;AAAA,SAAA,EACjD,CAAA;AAAA,QAED,IAAA,CAAK,yBACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,0BAC7BN,cAAA,CAACM,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,4BAA2B,SAAA,EAAW,IAAA,CAAK,KAAA,EACxF,QAAA,EAAA,IAAA,CAAK,KAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,4BACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,0BAChCN,cAAA,CAACM,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,+BAA8B,SAAA,EAAW,IAAA,CAAK,QAAA,EAC3F,QAAA,EAAA,IAAA,CAAK,QAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,6BACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,0BACjCN,cAAA;AAAA,YAACM,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,8BAAA;AAAA,cACZ,WAAW,IAAA,CAAK,SAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,6BACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,0BACjCN,cAAA;AAAA,YAACM,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,8BAAA;AAAA,cACZ,WAAW,IAAA,CAAK,SAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,8BACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,0BAClCN,cAAA;AAAA,YAACM,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,+BAAA;AAAA,cACZ,WAAW,IAAA,CAAK,UAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,0BACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,0BAC9BN,cAAA,CAACM,mCAAA,CAAkB,gBAAA,EAAlB,EAAmC,WAAA,EAAY,6BAA4B,SAAA,EAAW,IAAA,CAAK,MAAA,EACzF,QAAA,EAAA,IAAA,CAAK,MAAA,EACR;AAAA,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,kCACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,iBAAA,EAAe,CAAA;AAAA,0BACtCN,cAAA;AAAA,YAACM,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,mCAAA;AAAA,cACZ,WAAW,IAAA,CAAK,cAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF,CAAA;AAAA,QAED,IAAA,CAAK,gCACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,0BACpCN,cAAA;AAAA,YAACM,mCAAA,CAAkB,gBAAA;AAAA,YAAlB;AAAA,cACC,WAAA,EAAY,iCAAA;AAAA,cACZ,WAAW,IAAA,CAAK,YAAA;AAAA,cAEf,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EACF;AAAA,OAAA,EAEJ,CAAA;AAAA,MAED,IAAA,CAAK,wBACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,wBAC3BN,cAAA,CAACM,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,eAAK,IAAA,EAAK;AAAA,OAAA,EACtC,CAAA;AAAA,MAED,IAAA,CAAK,4BACJX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,wBAC3BN,cAAA,CAACM,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,eAAK,QAAA,EAAS;AAAA,OAAA,EAC1C,CAAA;AAAA,MAED,6BACCX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,wBAC9BN,cAAA,CAACM,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,SAAA,EAAU;AAAA,OAAA,EACtC,CAAA;AAAA,MAED,2BACCX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBAC5BN,cAAA,CAACM,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,OAAA,EAAQ;AAAA,OAAA,EACpC,CAAA;AAAA,MAED,4BACCX,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAI,cAAA,CAACM,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,wBAC/BN,cAAA,CAACM,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,OAAA,EACrC;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAEAX,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EACb,QAAA,EAAA;AAAA,sBAAAK,cAAA;AAAA,QAACH,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,OAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,OAAA,kBAASG,cAAA,CAACO,6BAAc,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC7E,IAAA,iCAAOA,yBAAA,EAAA,EAAc,CAAA;AAAA,UACrB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,KAAA,IAAS,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACrD;AAAA,sBACAP,cAAA;AAAA,QAACH,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,QAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,QAAA,kBAAUG,cAAA,CAACQ,8BAAe,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC/E,IAAA,iCAAOA,0BAAA,EAAA,EAAe,CAAA;AAAA,UACtB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,MAAA,IAAU,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACtD;AAAA,sBACAR,cAAA;AAAA,QAACH,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,UAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,UAAA,kBAAYG,cAAA,CAACS,0BAAW,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC7E,IAAA,iCAAOA,sBAAA,EAAA,EAAW,CAAA;AAAA,UAClB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,QAAA,IAAY,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA,OACxD;AAAA,sBACAT,cAAA;AAAA,QAACH,mBAAA,CAAU,WAAA;AAAA,QAAV;AAAA,UACC,KAAA,EAAM,YAAA;AAAA,UACN,WAAA,EAAa,iBAAiB,YAAA,kBAAcG,cAAA,CAACS,0BAAW,CAAA,EAAI,EAAE,MAAA,EAAQ,OAAA,EAAS,CAAA;AAAA,UAC/E,IAAA,iCAAOA,sBAAA,EAAA,EAAW,CAAA;AAAA,UAClB,SAAS,IAAA,CAAK,SAAA,CAAU,KAAK,UAAA,IAAc,IAAA,EAAM,MAAM,CAAC;AAAA;AAAA;AAC1D,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAIF,EAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,IAAA,uBAAOT,cAAA,CAACH,mBAAA,CAAU,OAAA,EAAV,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EACzC;AAEA,EAAA,uBACEG,cAAA,CAACH,mBAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAAF,eAAA,CAACe,aAAA,EAAA,EAAK,UAAA,EAAW,SAAA,EAAU,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,WAAA,EAC1D,QAAA,EAAA;AAAA,oBAAAf,eAAA,CAACgB,gBAAA,EAAA,EAAQ,OAAA,EAAQ,YAAA,EAAa,SAAA,EAAU,MAAA,EACtC,QAAA,EAAA;AAAA,sBAAAX,cAAA,CAACY,WAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC5BjB,eAAA,CAACiB,WAAA,EAAA,EAAI,KAAA,EAAM,UAAA,EAAW,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,QAAU,gBAAA,IAAoB,wBAAQjB,eAAA,CAAAC,mBAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAAE,gBAAA;AAAA,UAAiB;AAAA,SAAA,EAAC;AAAA,OAAA,EAAI;AAAA,KAAA,EACxF,CAAA;AAAA,oBAEAI,cAAA,CAACa,sBAAA,EAAA,EAAW,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBACzCb,cAAA,CAACa,sBAAA,EAAA,EAAW,KAAA,EAAM,UAAA,EAAY,QAAA,EAAA,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAA,EAAQ,CAAA,EAAE;AAAA,GAAA,EAC3E,CAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"span-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanSummaryDescription } from './span-summary-description';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport { truncateString } from '@/lib/truncate-string';\n\nfunction buildDialogTitle(sectionTitle: string, icon: ReactNode, span: { spanId: string; traceId: string }) {\n return (\n <>\n <span className=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n {icon}\n {sectionTitle}\n </span>\n <span>\n › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n </span>\n <span>\n › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n </span>\n </>\n );\n}\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. /\n span: SpanRecord \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n /\n When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n /\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /* Optional count shown in the \"Feedback\" tab label. /\n feedbackTabBadge?: ReactNode;\n /\n Whether this span is the displayed root of the current view (trace root or\n * branch anchor). Controls visibility of trace-level metadata fields. Defaults\n * to `span.parentSpanId == null` (trace case) when omitted.\n /\n isAnchor?: boolean;\n /* Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). /\n className?: string;\n}\n\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onClose,\n onPrevious,\n onNext,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n className,\n}: SpanDataPanelViewProps) {\n return (\n <DataPanel className={className}>\n {/ Two-line header (heading + summary); neighbouring panel headers use min-h-16 to stay level. /}\n <DataPanel.Header className=\"min-h-16 py-2\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <DataPanel.Heading className=\"whitespace-nowrap\">\n Span <b># {truncateString(spanId, 12)}</b>\n </DataPanel.Heading>\n {span && <SpanSummaryDescription span={span} />}\n </div>\n <ButtonsGroup className=\"ml-auto shrink-0 self-start\">\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Previous span\"\n nextLabel=\"Next span\"\n />\n <DataPanel.CloseButton onClick={onClose} />\n </ButtonsGroup>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <SpanDataPanelContent\n span={span}\n traceId={traceId}\n spanId={spanId}\n activeTab={activeTab}\n onTabChange={onTabChange}\n feedbackTabSlot={feedbackTabSlot}\n feedbackTabBadge={feedbackTabBadge}\n isAnchor={isAnchor}\n />\n )}\n </DataPanel>\n );\n}\n\nfunction SpanDataPanelContent({\n span,\n traceId,\n spanId,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n}: {\n span: SpanRecord;\n traceId: string;\n spanId: string;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n feedbackTabBadge?: ReactNode;\n isAnchor?: boolean;\n}) {\n const usage = span.attributes?.usage as TokenUsage \| undefined;\n\n const detailsBody = (\n <>\n {isTokenLimitExceeded(span) && (\n <div className=\"mb-3\">\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n </div>\n )}\n\n {usage && <SpanTokenUsage usage={usage} className=\"mb-3\" />}\n\n <DataKeysAndValues>\n {/ Anchor-only: rich trace-context fields. Live on the full SpanRecord, not on the\n * lightweight payload, so they only have values once the full span is loaded. */}\n {(isAnchor ?? span.parentSpanId == null) && (\n <>\n {span.tags && span.tags.length > 0 && (\n <>\n <DataKeysAndValues.Key>Tags</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.tags.join(', ')}</DataKeysAndValues.Value>\n </>\n )}\n {span.sessionId && (\n <>\n <DataKeysAndValues.Key>Session Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Session Id to clipboard\"\n copyValue={span.sessionId}\n >\n {span.sessionId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.requestId && (\n <>\n <DataKeysAndValues.Key>Request Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Request Id to clipboard\"\n copyValue={span.requestId}\n >\n {span.requestId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.userId && (\n <>\n <DataKeysAndValues.Key>User Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy User Id to clipboard\" copyValue={span.userId}>\n {span.userId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.organizationId && (\n <>\n <DataKeysAndValues.Key>Organization Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Organization Id to clipboard\"\n copyValue={span.organizationId}\n >\n {span.organizationId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.experimentId && (\n <>\n <DataKeysAndValues.Key>Experiment Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Experiment Id to clipboard\"\n copyValue={span.experimentId}\n >\n {span.experimentId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n </>\n )}\n </DataKeysAndValues>\n\n <div className=\"mt-3 grid gap-3\">\n <DataPanel.CodeSection\n title=\"Input\"\n dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n icon={<FileInputIcon />}\n codeStr={JSON.stringify(span.input ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Output\"\n dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n icon={<FileOutputIcon />}\n codeStr={JSON.stringify(span.output ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Metadata\"\n dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Attributes\"\n dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n />\n </div>\n </>\n );\n\n // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n if (!feedbackTabSlot) {\n return <DataPanel.Content>{detailsBody}</DataPanel.Content>;\n }\n\n return (\n <DataPanel.Content>\n <Tabs defaultTab=\"details\" value={activeTab} onValueChange={onTabChange}>\n <TabList variant=\"pill-ghost\" className=\"px-0\">\n <Tab value=\"details\">Details</Tab>\n <Tab value=\"feedback\">Feedback {feedbackTabBadge != null && <>({feedbackTabBadge})</>}</Tab>\n </TabList>\n\n <TabContent value=\"details\">{detailsBody}</TabContent>\n <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>\n </Tabs>\n </DataPanel.Content>\n );\n}\n"],"names":["jsxs","Fragment","DataPanel","truncateString","jsx","SpanSummaryDescription","ButtonsGroup","isTokenLimitExceeded","Notice","SpanTokenUsage","DataKeysAndValues","FileInputIcon","FileOutputIcon","BracesIcon","Tabs","TabList","Tab","TabContent"],"mappings":"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"}

package/dist/domains/traces/components/span-data-panel-view.es.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { FileInputIcon, FileOutputIcon, BracesIcon } from 'lucide-react';
-import { formatSpanDuration, formatSpanPanelTimestamp, isTokenLimitExceeded, getTokenLimitMessage } from '../utils/span-utils.es.js';
+import { isTokenLimitExceeded, getTokenLimitMessage } from '../utils/span-utils.es.js';
+import { SpanSummaryDescription } from './span-summary-description.es.js';
 import { SpanTokenUsage } from './span-token-usage.es.js';
 import { B as ButtonsGroup } from '../../../buttons-group-BjM12HPx.js';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-PKPzfxve.js';
-import { D as DataPanel } from '../../../data-panel-2Da0Utgy.js';
+import { D as DataPanel } from '../../../data-panel-DXxeSnL1.js';
 import { N as Notice } from '../../../Notice-DSUAUUYU.js';
 import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
 import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
@@ -49,15 +50,18 @@ function SpanDataPanelView({
   className
 }) {
   return /* @__PURE__ */ jsxs(DataPanel, { className, children: [
-    /* @__PURE__ */ jsxs(DataPanel.Header, { className: "py-2", children: [
-      /* @__PURE__ */ jsxs(DataPanel.Heading, { className: "whitespace-nowrap", children: [
-        "Span ",
-        /* @__PURE__ */ jsxs("b", { children: [
-          "# ",
-          truncateString(spanId, 12)
-        ] })
+    /* @__PURE__ */ jsxs(DataPanel.Header, { className: "min-h-16 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs(DataPanel.Heading, { className: "whitespace-nowrap", children: [
+          "Span ",
+          /* @__PURE__ */ jsxs("b", { children: [
+            "# ",
+            truncateString(spanId, 12)
+          ] })
+        ] }),
+        span && /* @__PURE__ */ jsx(SpanSummaryDescription, { span })
       ] }),
-      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
+      /* @__PURE__ */ jsxs(ButtonsGroup, { className: "ml-auto shrink-0 self-start", children: [
         /* @__PURE__ */ jsx(
           DataPanel.NextPrevNav,
           {
@@ -95,112 +99,64 @@ function SpanDataPanelContent({
   feedbackTabBadge,
   isAnchor
 }) {
-  const duration = formatSpanDuration(span.startedAt, span.endedAt);
-  const startedAt = formatSpanPanelTimestamp(span.startedAt);
-  const endedAt = formatSpanPanelTimestamp(span.endedAt);
   const usage = span.attributes?.usage;
   const detailsBody = /* @__PURE__ */ jsxs(Fragment, { children: [
     isTokenLimitExceeded(span) && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(Notice, { variant: "warning", title: "Token Limit Exceeded", children: /* @__PURE__ */ jsx(Notice.Message, { children: getTokenLimitMessage(span) }) }) }),
     usage && /* @__PURE__ */ jsx(SpanTokenUsage, { usage, className: "mb-3" }),
-    /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
-      (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        span.traceId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Trace Id" }),
-          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
-        ] }),
-        span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Tags" }),
-          /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.tags.join(", ") })
-        ] }),
-        span.runId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Run Id" }),
-          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Run Id to clipboard", copyValue: span.runId, children: span.runId })
-        ] }),
-        span.threadId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Thread Id" }),
-          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Thread Id to clipboard", copyValue: span.threadId, children: span.threadId })
-        ] }),
-        span.sessionId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Session Id" }),
-          /* @__PURE__ */ jsx(
-            DataKeysAndValues.ValueWithCopyBtn,
-            {
-              copyTooltip: "Copy Session Id to clipboard",
-              copyValue: span.sessionId,
-              children: span.sessionId
-            }
-          )
-        ] }),
-        span.requestId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Request Id" }),
-          /* @__PURE__ */ jsx(
-            DataKeysAndValues.ValueWithCopyBtn,
-            {
-              copyTooltip: "Copy Request Id to clipboard",
-              copyValue: span.requestId,
-              children: span.requestId
-            }
-          )
-        ] }),
-        span.resourceId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Resource Id" }),
-          /* @__PURE__ */ jsx(
-            DataKeysAndValues.ValueWithCopyBtn,
-            {
-              copyTooltip: "Copy Resource Id to clipboard",
-              copyValue: span.resourceId,
-              children: span.resourceId
-            }
-          )
-        ] }),
-        span.userId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "User Id" }),
-          /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy User Id to clipboard", copyValue: span.userId, children: span.userId })
-        ] }),
-        span.organizationId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Organization Id" }),
-          /* @__PURE__ */ jsx(
-            DataKeysAndValues.ValueWithCopyBtn,
-            {
-              copyTooltip: "Copy Organization Id to clipboard",
-              copyValue: span.organizationId,
-              children: span.organizationId
-            }
-          )
-        ] }),
-        span.experimentId && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Experiment Id" }),
-          /* @__PURE__ */ jsx(
-            DataKeysAndValues.ValueWithCopyBtn,
-            {
-              copyTooltip: "Copy Experiment Id to clipboard",
-              copyValue: span.experimentId,
-              children: span.experimentId
-            }
-          )
-        ] })
+    /* @__PURE__ */ jsx(DataKeysAndValues, { children: (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      span.tags && span.tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Tags" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.tags.join(", ") })
       ] }),
-      span.name && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Name" }),
-        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.name })
+      span.sessionId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Session Id" }),
+        /* @__PURE__ */ jsx(
+          DataKeysAndValues.ValueWithCopyBtn,
+          {
+            copyTooltip: "Copy Session Id to clipboard",
+            copyValue: span.sessionId,
+            children: span.sessionId
+          }
+        )
       ] }),
-      span.spanType && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Type" }),
-        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.spanType })
+      span.requestId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Request Id" }),
+        /* @__PURE__ */ jsx(
+          DataKeysAndValues.ValueWithCopyBtn,
+          {
+            copyTooltip: "Copy Request Id to clipboard",
+            copyValue: span.requestId,
+            children: span.requestId
+          }
+        )
       ] }),
-      startedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Started" }),
-        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: startedAt })
+      span.userId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "User Id" }),
+        /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy User Id to clipboard", copyValue: span.userId, children: span.userId })
       ] }),
-      endedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Ended" }),
-        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: endedAt })
+      span.organizationId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Organization Id" }),
+        /* @__PURE__ */ jsx(
+          DataKeysAndValues.ValueWithCopyBtn,
+          {
+            copyTooltip: "Copy Organization Id to clipboard",
+            copyValue: span.organizationId,
+            children: span.organizationId
+          }
+        )
       ] }),
-      duration && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Duration" }),
-        /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: duration })
+      span.experimentId && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Experiment Id" }),
+        /* @__PURE__ */ jsx(
+          DataKeysAndValues.ValueWithCopyBtn,
+          {
+            copyTooltip: "Copy Experiment Id to clipboard",
+            copyValue: span.experimentId,
+            children: span.experimentId
+          }
+        )
       ] })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-3", children: [
       /* @__PURE__ */ jsx(
         DataPanel.CodeSection,

package/dist/domains/traces/components/span-data-panel-view.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n formatSpanDuration,\n formatSpanPanelTimestamp,\n getTokenLimitMessage,\n isTokenLimitExceeded,\n} from '../utils/span-utils';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport { truncateString } from '@/lib/truncate-string';\n\nfunction buildDialogTitle(sectionTitle: string, icon: ReactNode, span: { spanId: string; traceId: string }) {\n return (\n <>\n <span className=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n {icon}\n {sectionTitle}\n </span>\n <span>\n › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n </span>\n <span>\n › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n </span>\n </>\n );\n}\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. /\n span: SpanRecord \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n /\n When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n /\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /* Optional count shown in the \"Feedback\" tab label. /\n feedbackTabBadge?: ReactNode;\n /\n Whether this span is the displayed root of the current view (trace root or\n * branch anchor). Controls visibility of trace-level metadata fields. Defaults\n * to `span.parentSpanId == null` (trace case) when omitted.\n /\n isAnchor?: boolean;\n /* Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). /\n className?: string;\n}\n\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onClose,\n onPrevious,\n onNext,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n className,\n}: SpanDataPanelViewProps) {\n return (\n <DataPanel className={className}>\n {/ 32px buttons + border would overflow min-h-14 by 1px; keep this header level with its neighbours. /}\n <DataPanel.Header className=\"py-2\">\n <DataPanel.Heading className=\"whitespace-nowrap\">\n Span <b># {truncateString(spanId, 12)}</b>\n </DataPanel.Heading>\n <ButtonsGroup className=\"ml-auto shrink-0\">\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Previous span\"\n nextLabel=\"Next span\"\n />\n <DataPanel.CloseButton onClick={onClose} />\n </ButtonsGroup>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <SpanDataPanelContent\n span={span}\n traceId={traceId}\n spanId={spanId}\n activeTab={activeTab}\n onTabChange={onTabChange}\n feedbackTabSlot={feedbackTabSlot}\n feedbackTabBadge={feedbackTabBadge}\n isAnchor={isAnchor}\n />\n )}\n </DataPanel>\n );\n}\n\nfunction SpanDataPanelContent({\n span,\n traceId,\n spanId,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n}: {\n span: SpanRecord;\n traceId: string;\n spanId: string;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n feedbackTabBadge?: ReactNode;\n isAnchor?: boolean;\n}) {\n const duration = formatSpanDuration(span.startedAt, span.endedAt);\n const startedAt = formatSpanPanelTimestamp(span.startedAt);\n const endedAt = formatSpanPanelTimestamp(span.endedAt);\n const usage = span.attributes?.usage as TokenUsage \| undefined;\n\n const detailsBody = (\n <>\n {isTokenLimitExceeded(span) && (\n <div className=\"mb-3\">\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n </div>\n )}\n\n {usage && <SpanTokenUsage usage={usage} className=\"mb-3\" />}\n\n <DataKeysAndValues>\n {/ Anchor-only: rich trace-context fields. Live on the full SpanRecord, not on the\n * lightweight payload, so they only have values once the full span is loaded. */}\n {(isAnchor ?? span.parentSpanId == null) && (\n <>\n {span.traceId && (\n <>\n <DataKeysAndValues.Key>Trace Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Trace Id to clipboard\" copyValue={span.traceId}>\n {span.traceId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.tags && span.tags.length > 0 && (\n <>\n <DataKeysAndValues.Key>Tags</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.tags.join(', ')}</DataKeysAndValues.Value>\n </>\n )}\n {span.runId && (\n <>\n <DataKeysAndValues.Key>Run Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Run Id to clipboard\" copyValue={span.runId}>\n {span.runId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.threadId && (\n <>\n <DataKeysAndValues.Key>Thread Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy Thread Id to clipboard\" copyValue={span.threadId}>\n {span.threadId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.sessionId && (\n <>\n <DataKeysAndValues.Key>Session Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Session Id to clipboard\"\n copyValue={span.sessionId}\n >\n {span.sessionId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.requestId && (\n <>\n <DataKeysAndValues.Key>Request Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Request Id to clipboard\"\n copyValue={span.requestId}\n >\n {span.requestId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.resourceId && (\n <>\n <DataKeysAndValues.Key>Resource Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Resource Id to clipboard\"\n copyValue={span.resourceId}\n >\n {span.resourceId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.userId && (\n <>\n <DataKeysAndValues.Key>User Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy User Id to clipboard\" copyValue={span.userId}>\n {span.userId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.organizationId && (\n <>\n <DataKeysAndValues.Key>Organization Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Organization Id to clipboard\"\n copyValue={span.organizationId}\n >\n {span.organizationId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.experimentId && (\n <>\n <DataKeysAndValues.Key>Experiment Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Experiment Id to clipboard\"\n copyValue={span.experimentId}\n >\n {span.experimentId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n </>\n )}\n {span.name && (\n <>\n <DataKeysAndValues.Key>Name</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.name}</DataKeysAndValues.Value>\n </>\n )}\n {span.spanType && (\n <>\n <DataKeysAndValues.Key>Type</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.spanType}</DataKeysAndValues.Value>\n </>\n )}\n {startedAt && (\n <>\n <DataKeysAndValues.Key>Started</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{startedAt}</DataKeysAndValues.Value>\n </>\n )}\n {endedAt && (\n <>\n <DataKeysAndValues.Key>Ended</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{endedAt}</DataKeysAndValues.Value>\n </>\n )}\n {duration && (\n <>\n <DataKeysAndValues.Key>Duration</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{duration}</DataKeysAndValues.Value>\n </>\n )}\n </DataKeysAndValues>\n\n <div className=\"mt-3 grid gap-3\">\n <DataPanel.CodeSection\n title=\"Input\"\n dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n icon={<FileInputIcon />}\n codeStr={JSON.stringify(span.input ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Output\"\n dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n icon={<FileOutputIcon />}\n codeStr={JSON.stringify(span.output ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Metadata\"\n dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Attributes\"\n dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n />\n </div>\n </>\n );\n\n // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n if (!feedbackTabSlot) {\n return <DataPanel.Content>{detailsBody}</DataPanel.Content>;\n }\n\n return (\n <DataPanel.Content>\n <Tabs defaultTab=\"details\" value={activeTab} onValueChange={onTabChange}>\n <TabList variant=\"pill-ghost\" className=\"px-0\">\n <Tab value=\"details\">Details</Tab>\n <Tab value=\"feedback\">Feedback {feedbackTabBadge != null && <>({feedbackTabBadge})</>}</Tab>\n </TabList>\n\n <TabContent value=\"details\">{detailsBody}</TabContent>\n <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>\n </Tabs>\n </DataPanel.Content>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"span-data-panel-view.es.js","sources":["../../../../src/domains/traces/components/span-data-panel-view.tsx"],"sourcesContent":["import type { SpanRecord } from '@mastra/core/storage';\nimport { BracesIcon, FileInputIcon, FileOutputIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { getTokenLimitMessage, isTokenLimitExceeded } from '../utils/span-utils';\nimport { SpanSummaryDescription } from './span-summary-description';\nimport { SpanTokenUsage } from './span-token-usage';\nimport type { TokenUsage } from './span-token-usage';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport { truncateString } from '@/lib/truncate-string';\n\nfunction buildDialogTitle(sectionTitle: string, icon: ReactNode, span: { spanId: string; traceId: string }) {\n return (\n <>\n <span className=\"text-neutral2 flex items-center gap-1.5 tracking-widest uppercase [&>svg]:size-3.5\">\n {icon}\n {sectionTitle}\n </span>\n <span>\n › Span <b className=\"text-neutral3\">#{span.spanId}</b>\n </span>\n <span>\n › Trace <b className=\"text-neutral3\">#{span.traceId}</b>\n </span>\n </>\n );\n}\n\nexport interface SpanDataPanelViewProps {\n traceId: string;\n spanId: string;\n /** Full span record. Caller fetches via useSpanDetail. /\n span: SpanRecord \| undefined;\n isLoading?: boolean;\n onClose: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n /\n When provided, a \"Feedback\" tab appears; the slot receives the loaded span and renders\n * whatever feedback UI the consumer wants.\n /\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n /* Optional count shown in the \"Feedback\" tab label. /\n feedbackTabBadge?: ReactNode;\n /\n Whether this span is the displayed root of the current view (trace root or\n * branch anchor). Controls visibility of trace-level metadata fields. Defaults\n * to `span.parentSpanId == null` (trace case) when omitted.\n /\n isAnchor?: boolean;\n /* Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). /\n className?: string;\n}\n\nexport function SpanDataPanelView({\n traceId,\n spanId,\n span,\n isLoading,\n onClose,\n onPrevious,\n onNext,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n className,\n}: SpanDataPanelViewProps) {\n return (\n <DataPanel className={className}>\n {/ Two-line header (heading + summary); neighbouring panel headers use min-h-16 to stay level. /}\n <DataPanel.Header className=\"min-h-16 py-2\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <DataPanel.Heading className=\"whitespace-nowrap\">\n Span <b># {truncateString(spanId, 12)}</b>\n </DataPanel.Heading>\n {span && <SpanSummaryDescription span={span} />}\n </div>\n <ButtonsGroup className=\"ml-auto shrink-0 self-start\">\n <DataPanel.NextPrevNav\n onPrevious={onPrevious}\n onNext={onNext}\n previousLabel=\"Previous span\"\n nextLabel=\"Next span\"\n />\n <DataPanel.CloseButton onClick={onClose} />\n </ButtonsGroup>\n </DataPanel.Header>\n\n {isLoading ? (\n <DataPanel.LoadingData>Loading span details...</DataPanel.LoadingData>\n ) : !span ? (\n <DataPanel.NoData>Span not found.</DataPanel.NoData>\n ) : (\n <SpanDataPanelContent\n span={span}\n traceId={traceId}\n spanId={spanId}\n activeTab={activeTab}\n onTabChange={onTabChange}\n feedbackTabSlot={feedbackTabSlot}\n feedbackTabBadge={feedbackTabBadge}\n isAnchor={isAnchor}\n />\n )}\n </DataPanel>\n );\n}\n\nfunction SpanDataPanelContent({\n span,\n traceId,\n spanId,\n activeTab,\n onTabChange,\n feedbackTabSlot,\n feedbackTabBadge,\n isAnchor,\n}: {\n span: SpanRecord;\n traceId: string;\n spanId: string;\n activeTab?: string;\n onTabChange?: (tab: string) => void;\n feedbackTabSlot?: (args: { span: SpanRecord; traceId: string; spanId: string }) => ReactNode;\n feedbackTabBadge?: ReactNode;\n isAnchor?: boolean;\n}) {\n const usage = span.attributes?.usage as TokenUsage \| undefined;\n\n const detailsBody = (\n <>\n {isTokenLimitExceeded(span) && (\n <div className=\"mb-3\">\n <Notice variant=\"warning\" title=\"Token Limit Exceeded\">\n <Notice.Message>{getTokenLimitMessage(span)}</Notice.Message>\n </Notice>\n </div>\n )}\n\n {usage && <SpanTokenUsage usage={usage} className=\"mb-3\" />}\n\n <DataKeysAndValues>\n {/ Anchor-only: rich trace-context fields. Live on the full SpanRecord, not on the\n * lightweight payload, so they only have values once the full span is loaded. */}\n {(isAnchor ?? span.parentSpanId == null) && (\n <>\n {span.tags && span.tags.length > 0 && (\n <>\n <DataKeysAndValues.Key>Tags</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{span.tags.join(', ')}</DataKeysAndValues.Value>\n </>\n )}\n {span.sessionId && (\n <>\n <DataKeysAndValues.Key>Session Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Session Id to clipboard\"\n copyValue={span.sessionId}\n >\n {span.sessionId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.requestId && (\n <>\n <DataKeysAndValues.Key>Request Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Request Id to clipboard\"\n copyValue={span.requestId}\n >\n {span.requestId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.userId && (\n <>\n <DataKeysAndValues.Key>User Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn copyTooltip=\"Copy User Id to clipboard\" copyValue={span.userId}>\n {span.userId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.organizationId && (\n <>\n <DataKeysAndValues.Key>Organization Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Organization Id to clipboard\"\n copyValue={span.organizationId}\n >\n {span.organizationId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n {span.experimentId && (\n <>\n <DataKeysAndValues.Key>Experiment Id</DataKeysAndValues.Key>\n <DataKeysAndValues.ValueWithCopyBtn\n copyTooltip=\"Copy Experiment Id to clipboard\"\n copyValue={span.experimentId}\n >\n {span.experimentId}\n </DataKeysAndValues.ValueWithCopyBtn>\n </>\n )}\n </>\n )}\n </DataKeysAndValues>\n\n <div className=\"mt-3 grid gap-3\">\n <DataPanel.CodeSection\n title=\"Input\"\n dialogTitle={buildDialogTitle('Input', <FileInputIcon />, { spanId, traceId })}\n icon={<FileInputIcon />}\n codeStr={JSON.stringify(span.input ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Output\"\n dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, { spanId, traceId })}\n icon={<FileOutputIcon />}\n codeStr={JSON.stringify(span.output ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Metadata\"\n dialogTitle={buildDialogTitle('Metadata', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.metadata ?? null, null, 2)}\n />\n <DataPanel.CodeSection\n title=\"Attributes\"\n dialogTitle={buildDialogTitle('Attributes', <BracesIcon />, { spanId, traceId })}\n icon={<BracesIcon />}\n codeStr={JSON.stringify(span.attributes ?? null, null, 2)}\n />\n </div>\n </>\n );\n\n // No extra tab slots → render details directly without the Tabs/TabList wrapper.\n if (!feedbackTabSlot) {\n return <DataPanel.Content>{detailsBody}</DataPanel.Content>;\n }\n\n return (\n <DataPanel.Content>\n <Tabs defaultTab=\"details\" value={activeTab} onValueChange={onTabChange}>\n <TabList variant=\"pill-ghost\" className=\"px-0\">\n <Tab value=\"details\">Details</Tab>\n <Tab value=\"feedback\">Feedback {feedbackTabBadge != null && <>({feedbackTabBadge})</>}</Tab>\n </TabList>\n\n <TabContent value=\"details\">{detailsBody}</TabContent>\n <TabContent value=\"feedback\">{feedbackTabSlot({ span, traceId, spanId })}</TabContent>\n </Tabs>\n </DataPanel.Content>\n );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
+const tooltip = require('../../../tooltip-DIi_oOxO.cjs');
+const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
+const utils_cn = require('../../../cn-DCPcv4xv.cjs');
+function SummaryItem({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        tabIndex: 0,
+        className: "flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap",
+        "aria-label": label,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: label })
+  ] });
+}
+function SpanSummaryDescription({ span, className }) {
+  const startedAt = domains_traces_utils_spanUtils.formatSpanTimestamp(span.startedAt);
+  const exactStartedAt = domains_traces_utils_spanUtils.formatSpanTimestampExact(span.startedAt);
+  const endedAt = domains_traces_utils_spanUtils.formatSpanTimestamp(span.endedAt);
+  const exactEndedAt = domains_traces_utils_spanUtils.formatSpanTimestampExact(span.endedAt);
+  const duration = domains_traces_utils_spanUtils.formatSpanDurationSeconds(span.startedAt, span.endedAt);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3",
+        className
+      ),
+      children: [
+        startedAt && exactStartedAt && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Started at ${exactStartedAt}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClockIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: startedAt })
+        ] }),
+        endedAt && exactEndedAt && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Ended at ${exactEndedAt}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlagIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: endedAt })
+        ] }),
+        duration && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Duration ${duration}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration })
+        ] }),
+        span.runId && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Run Id ${span.runId}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: utils_truncateString.truncateString(span.runId, 8) })
+        ] })
+      ]
+    }
+  );
+}
+exports.SpanSummaryDescription = SpanSummaryDescription;
+//# sourceMappingURL=span-summary-description.cjs.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"span-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/span-summary-description.tsx"],"sourcesContent":["import { CalendarClockIcon, FlagIcon, HashIcon, TimerIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { formatSpanDurationSeconds, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { truncateString } from '@/lib/truncate-string';\nimport { cn } from '@/lib/utils';\n\nexport interface SpanSummaryDescriptionProps {\n span: {\n startedAt: Date | string;\n endedAt?: Date | string | null;\n runId?: string | null;\n };\n className?: string;\n}\n\nfunction SummaryItem({ label, children }: { label: string; children: ReactNode }) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <span\n tabIndex={0}\n className=\"flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap\"\n aria-label={label}\n >\n {children}\n </span>\n </TooltipTrigger>\n <TooltipContent>{label}</TooltipContent>\n </Tooltip>\n );\n}\n\n/** Compact span timing + run metadata shown under the span side-panel heading. */\nexport function SpanSummaryDescription({ span, className }: SpanSummaryDescriptionProps) {\n const startedAt = formatSpanTimestamp(span.startedAt);\n const exactStartedAt = formatSpanTimestampExact(span.startedAt);\n const endedAt = formatSpanTimestamp(span.endedAt);\n const exactEndedAt = formatSpanTimestampExact(span.endedAt);\n const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);\n\n return (\n <div\n className={cn(\n 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3',\n className,\n )}\n >\n {startedAt && exactStartedAt && (\n <SummaryItem label={`Started at ${exactStartedAt}`}>\n <CalendarClockIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{startedAt}</span>\n </SummaryItem>\n )}\n {endedAt && exactEndedAt && (\n <SummaryItem label={`Ended at ${exactEndedAt}`}>\n <FlagIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{endedAt}</span>\n </SummaryItem>\n )}\n {duration && (\n <SummaryItem label={`Duration ${duration}`}>\n <TimerIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{duration}</span>\n </SummaryItem>\n )}\n {span.runId && (\n <SummaryItem label={`Run Id ${span.runId}`}>\n <HashIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{truncateString(span.runId, 8)}</span>\n </SummaryItem>\n )}\n </div>\n );\n}\n"],"names":["Tooltip","jsx","TooltipTrigger","TooltipContent","formatSpanTimestamp","formatSpanTimestampExact","formatSpanDurationSeconds","jsxs","cn","CalendarClockIcon","FlagIcon","TimerIcon","HashIcon","truncateString"],"mappings":";;;;;;;;;;;AAgBA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAA2C;AAChF,EAAA,uCACGA,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,sBAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAAD,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,SAAA,EAAU,gEAAA;AAAA,QACV,YAAA,EAAY,KAAA;AAAA,QAEX;AAAA;AAAA,KACH,EACF,CAAA;AAAA,oBACAA,cAAA,CAACE,0BAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzB,CAAA;AAEJ;AAGO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,SAAA,EAAU,EAAgC;AACvF,EAAA,MAAM,SAAA,GAAYC,kDAAA,CAAoB,IAAA,CAAK,SAAS,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiBC,uDAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AAC9D,EAAA,MAAM,OAAA,GAAUD,kDAAA,CAAoB,IAAA,CAAK,OAAO,CAAA;AAChD,EAAA,MAAM,YAAA,GAAeC,uDAAA,CAAyB,IAAA,CAAK,OAAO,CAAA;AAC1D,EAAA,MAAM,QAAA,GAAWC,wDAAA,CAA0B,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAEvE,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,4FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,IAAa,kCACZD,eAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAA,EAC9C,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACQ,6BAAA,EAAA,EAAkB,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACpER,cAAA,CAAC,UAAM,QAAA,EAAA,SAAA,EAAU;AAAA,SAAA,EACnB,CAAA;AAAA,QAED,WAAW,YAAA,oBACVM,eAAA,CAAC,eAAY,KAAA,EAAO,CAAA,SAAA,EAAY,YAAY,CAAA,CAAA,EAC1C,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACS,oBAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC3DT,cAAA,CAAC,UAAM,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACjB,CAAA;AAAA,QAED,4BACCM,eAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACU,qBAAA,EAAA,EAAU,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC5DV,cAAA,CAAC,UAAM,QAAA,EAAA,QAAA,EAAS;AAAA,SAAA,EAClB,CAAA;AAAA,QAED,IAAA,CAAK,yBACJM,eAAA,CAAC,WAAA,EAAA,EAAY,OAAO,CAAA,OAAA,EAAU,IAAA,CAAK,KAAK,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACW,oBAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,yCAC1D,MAAA,EAAA,EAAM,QAAA,EAAAC,mCAAA,CAAe,IAAA,CAAK,KAAA,EAAO,CAAC,CAAA,EAAE;AAAA,SAAA,EACvC;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/domains/traces/components/span-summary-description.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from '../../../src/domains/traces/components/span-summary-description'
2	+ export {}

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

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CalendarClockIcon, FlagIcon, TimerIcon, HashIcon } from 'lucide-react';
+import { formatSpanTimestamp, formatSpanTimestampExact, formatSpanDurationSeconds } from '../utils/span-utils.es.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-Bi0pDO5P.js';
+import { truncateString } from '../../../utils/truncate-string.es.js';
+import { c as cn } from '../../../cn-B4oPhFx9.js';
+function SummaryItem({ label, children }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        tabIndex: 0,
+        className: "flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap",
+        "aria-label": label,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+function SpanSummaryDescription({ span, className }) {
+  const startedAt = formatSpanTimestamp(span.startedAt);
+  const exactStartedAt = formatSpanTimestampExact(span.startedAt);
+  const endedAt = formatSpanTimestamp(span.endedAt);
+  const exactEndedAt = formatSpanTimestampExact(span.endedAt);
+  const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3",
+        className
+      ),
+      children: [
+        startedAt && exactStartedAt && /* @__PURE__ */ jsxs(SummaryItem, { label: `Started at ${exactStartedAt}`, children: [
+          /* @__PURE__ */ jsx(CalendarClockIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: startedAt })
+        ] }),
+        endedAt && exactEndedAt && /* @__PURE__ */ jsxs(SummaryItem, { label: `Ended at ${exactEndedAt}`, children: [
+          /* @__PURE__ */ jsx(FlagIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: endedAt })
+        ] }),
+        duration && /* @__PURE__ */ jsxs(SummaryItem, { label: `Duration ${duration}`, children: [
+          /* @__PURE__ */ jsx(TimerIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: duration })
+        ] }),
+        span.runId && /* @__PURE__ */ jsxs(SummaryItem, { label: `Run Id ${span.runId}`, children: [
+          /* @__PURE__ */ jsx(HashIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: truncateString(span.runId, 8) })
+        ] })
+      ]
+    }
+  );
+}
+export { SpanSummaryDescription };
+//# sourceMappingURL=span-summary-description.es.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"span-summary-description.es.js","sources":["../../../../src/domains/traces/components/span-summary-description.tsx"],"sourcesContent":["import { CalendarClockIcon, FlagIcon, HashIcon, TimerIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { formatSpanDurationSeconds, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { truncateString } from '@/lib/truncate-string';\nimport { cn } from '@/lib/utils';\n\nexport interface SpanSummaryDescriptionProps {\n span: {\n startedAt: Date | string;\n endedAt?: Date | string | null;\n runId?: string | null;\n };\n className?: string;\n}\n\nfunction SummaryItem({ label, children }: { label: string; children: ReactNode }) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <span\n tabIndex={0}\n className=\"flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap\"\n aria-label={label}\n >\n {children}\n </span>\n </TooltipTrigger>\n <TooltipContent>{label}</TooltipContent>\n </Tooltip>\n );\n}\n\n/** Compact span timing + run metadata shown under the span side-panel heading. */\nexport function SpanSummaryDescription({ span, className }: SpanSummaryDescriptionProps) {\n const startedAt = formatSpanTimestamp(span.startedAt);\n const exactStartedAt = formatSpanTimestampExact(span.startedAt);\n const endedAt = formatSpanTimestamp(span.endedAt);\n const exactEndedAt = formatSpanTimestampExact(span.endedAt);\n const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);\n\n return (\n <div\n className={cn(\n 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3',\n className,\n )}\n >\n {startedAt && exactStartedAt && (\n <SummaryItem label={`Started at ${exactStartedAt}`}>\n <CalendarClockIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{startedAt}</span>\n </SummaryItem>\n )}\n {endedAt && exactEndedAt && (\n <SummaryItem label={`Ended at ${exactEndedAt}`}>\n <FlagIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{endedAt}</span>\n </SummaryItem>\n )}\n {duration && (\n <SummaryItem label={`Duration ${duration}`}>\n <TimerIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{duration}</span>\n </SummaryItem>\n )}\n {span.runId && (\n <SummaryItem label={`Run Id ${span.runId}`}>\n <HashIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span>{truncateString(span.runId, 8)}</span>\n </SummaryItem>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAA2C;AAChF,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,SAAA,EAAU,gEAAA;AAAA,QACV,YAAA,EAAY,KAAA;AAAA,QAEX;AAAA;AAAA,KACH,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzB,CAAA;AAEJ;AAGO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,SAAA,EAAU,EAAgC;AACvF,EAAA,MAAM,SAAA,GAAY,mBAAA,CAAoB,IAAA,CAAK,SAAS,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,wBAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AAC9D,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,IAAA,CAAK,OAAO,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,wBAAA,CAAyB,IAAA,CAAK,OAAO,CAAA;AAC1D,EAAA,MAAM,QAAA,GAAW,yBAAA,CAA0B,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAEvE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,IAAa,kCACZ,IAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAA,EAC9C,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACpE,GAAA,CAAC,UAAM,QAAA,EAAA,SAAA,EAAU;AAAA,SAAA,EACnB,CAAA;AAAA,QAED,WAAW,YAAA,oBACV,IAAA,CAAC,eAAY,KAAA,EAAO,CAAA,SAAA,EAAY,YAAY,CAAA,CAAA,EAC1C,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC3D,GAAA,CAAC,UAAM,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACjB,CAAA;AAAA,QAED,4BACC,IAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC5D,GAAA,CAAC,UAAM,QAAA,EAAA,QAAA,EAAS;AAAA,SAAA,EAClB,CAAA;AAAA,QAED,IAAA,CAAK,yBACJ,IAAA,CAAC,WAAA,EAAA,EAAY,OAAO,CAAA,OAAA,EAAU,IAAA,CAAK,KAAK,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,8BAC1D,MAAA,EAAA,EAAM,QAAA,EAAA,cAAA,CAAe,IAAA,CAAK,KAAA,EAAO,CAAC,CAAA,EAAE;AAAA,SAAA,EACvC;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-expand-col.cjs.js CHANGED Viewed

@@ -33,7 +33,7 @@ function TimelineExpandCol({
     "div",
     {
       className: utils_cn.cn("flex h-full items-center justify-end px-1.5", {
-        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
         "bg-surface4": isSelected
       }),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1", children: [

package/dist/domains/traces/components/timeline-expand-col.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline-expand-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-expand-col.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronsDownIcon,\n ChevronsDownUpIcon,\n ChevronsUpDownIcon,\n ChevronsUpIcon,\n ChevronUpIcon,\n FoldVerticalIcon,\n UnfoldVerticalIcon,\n} from 'lucide-react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TimelineExpandColProps = {\n isSelected?: boolean;\n isFaded?: boolean;\n isExpanded?: boolean;\n isRootSpan?: boolean;\n toggleChildren?: () => void;\n expandAllDescendants?: () => void;\n collapseAllDescendants?: () => void;\n collapseAll?: () => void;\n totalDescendants?: number;\n allDescendantsExpanded?: boolean;\n numOfChildren?: number;\n toggleSiblings?: () => void;\n siblingsAllExpanded?: boolean;\n siblingsWithChildrenCount?: number;\n};\n\nexport function TimelineExpandCol({\n isSelected,\n isFaded,\n isExpanded,\n isRootSpan,\n toggleChildren,\n expandAllDescendants,\n collapseAllDescendants,\n collapseAll,\n totalDescendants = 0,\n allDescendantsExpanded,\n numOfChildren = 0,\n toggleSiblings,\n siblingsAllExpanded,\n siblingsWithChildrenCount = 0,\n}: TimelineExpandColProps) {\n const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;\n const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;\n const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;\n const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;\n const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;\n\n return (\n <div\n className={cn('flex h-full items-center justify-end px-1.5', {\n 'opacity-30 [&:hover]:opacity-60': isFaded,\n 'bg-surface4': isSelected,\n })}\n >\n <div className=\"grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1\">\n <div>\n {showToggleChildren && (\n <ExpandButton onClick={() => toggleChildren?.()} tooltip={toggleTooltip}>\n {isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </ExpandButton>\n )}\n </div>\n\n <div>\n {showDescendantsButton && (\n <ExpandButton\n onClick={() => (allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.())}\n tooltip={\n allDescendantsExpanded\n ? `Collapse all descendants (${totalDescendants})`\n : `Expand all descendants (${totalDescendants})`\n }\n >\n {allDescendantsExpanded ? <ChevronsUpIcon /> : <ChevronsDownIcon />}\n </ExpandButton>\n )}\n </div>\n\n <div>\n {showToggleSiblings && (\n <ExpandButton\n onClick={() => toggleSiblings?.()}\n tooltip={siblingsAllExpanded ? 'Collapse at this level' : 'Expand at this level'}\n >\n {siblingsAllExpanded ? <FoldVerticalIcon /> : <UnfoldVerticalIcon />}\n </ExpandButton>\n )}\n\n {showRootToggleAll && (\n <ExpandButton\n onClick={() => (fullyExpanded ? collapseAll?.() : expandAllDescendants?.())}\n tooltip={fullyExpanded ? 'Collapse all' : 'Expand all'}\n >\n {fullyExpanded ? <ChevronsDownUpIcon /> : <ChevronsUpDownIcon />}\n </ExpandButton>\n )}\n </div>\n </div>\n </div>\n );\n}\n\ntype ExpandButtonProps = {\n onClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n tooltip?: string;\n};\n\nfunction ExpandButton({ onClick, children, className, tooltip }: ExpandButtonProps) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <button onClick={onClick} className={cn('h-full shrink-0 cursor-pointer', className)} aria-label={tooltip}>\n <div\n className={cn(\n 'flex items-center gap-[0.1rem] rounded-md p-1 transition-all',\n 'hover:bg-surface5',\n '[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-50 [&>svg]:transition-all',\n )}\n >\n {children}\n </div>\n </button>\n </TooltipTrigger>\n {tooltip && <TooltipContent>{tooltip}</TooltipContent>}\n </Tooltip>\n );\n}\n"],"names":["jsx","cn","jsxs","ChevronUpIcon","ChevronDownIcon","ChevronsUpIcon","ChevronsDownIcon","FoldVerticalIcon","UnfoldVerticalIcon","ChevronsDownUpIcon","ChevronsUpDownIcon","tooltip","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;;;;AA8BO,SAAS,iBAAA,CAAkB;AAAA,EAChC,UAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA;AAAA,EACA,sBAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA,GAAmB,CAAA;AAAA,EACnB,sBAAA;AAAA,EACA,aAAA,GAAgB,CAAA;AAAA,EAChB,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,yBAAA,GAA4B;AAC9B,CAAA,EAA2B;AACzB,EAAA,MAAM,gBAAgB,UAAA,GAAa,CAAA,mBAAA,EAAsB,aAAa,CAAA,CAAA,CAAA,GAAM,oBAAoB,aAAa,CAAA,CAAA,CAAA;AAE7G,EAAA,MAAM,qBAAqB,CAAC,UAAA,IAAc,CAAC,CAAC,iBAAiB,aAAA,GAAgB,CAAA;AAC7E,EAAA,MAAM,qBAAA,GAAwB,CAAC,UAAA,IAAc,kBAAA,IAAsB,gBAAA,GAAmB,aAAA;AACtF,EAAA,MAAM,kBAAA,GAAqB,CAAC,UAAA,IAAc,yBAAA,IAA6B,CAAA;AACvE,EAAA,MAAM,oBAAoB,CAAC,CAAC,cAAc,CAAC,CAAC,iBAAiB,aAAA,GAAgB,CAAA;AAC7E,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,UAAA,IAAc,CAAC,CAAC,sBAAA;AAExC,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,YAAG,6CAAA,EAA+C;AAAA,QAC3D,~~iCAAA~~,~~EAAmC~~,OAAA;AAAA,~~QACnC~~,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MAED,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,SACE,QAAA,EAAA,kBAAA,oBACCA,cAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,MAAM,cAAA,IAAiB,EAAG,OAAA,EAAS,aAAA,EACvD,uCAAaA,cAAA,CAACG,yBAAA,EAAA,EAAc,oBAAKH,cAAA,CAACI,2BAAA,EAAA,EAAgB,GACrD,CAAA,EAEJ,CAAA;AAAA,wBAEAJ,cAAA,CAAC,SACE,QAAA,EAAA,qBAAA,oBACCA,cAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAO,sBAAA,GAAyB,sBAAA,OAA6B,oBAAA,IAAuB;AAAA,YAC7F,SACE,sBAAA,GACI,CAAA,0BAAA,EAA6B,gBAAgB,CAAA,CAAA,CAAA,GAC7C,2BAA2B,gBAAgB,CAAA,CAAA,CAAA;AAAA,YAGhD,QAAA,EAAA,sBAAA,mBAAyBA,cAAA,CAACK,0BAAA,EAAA,EAAe,CAAA,kCAAMC,4BAAA,EAAA,EAAiB;AAAA;AAAA,SACnE,EAEJ,CAAA;AAAA,wCAEC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,kBAAA,oBACCN,cAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,MAAM,cAAA,IAAiB;AAAA,cAChC,OAAA,EAAS,sBAAsB,wBAAA,GAA2B,sBAAA;AAAA,cAEzD,QAAA,EAAA,mBAAA,mBAAsBA,cAAA,CAACO,4BAAA,EAAA,EAAiB,CAAA,kCAAMC,8BAAA,EAAA,EAAmB;AAAA;AAAA,WACpE;AAAA,UAGD,iBAAA,oBACCR,cAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,MAAO,aAAA,GAAgB,WAAA,OAAkB,oBAAA,IAAuB;AAAA,cACzE,OAAA,EAAS,gBAAgB,cAAA,GAAiB,YAAA;AAAA,cAEzC,QAAA,EAAA,aAAA,mBAAgBA,cAAA,CAACS,8BAAA,EAAA,EAAmB,CAAA,kCAAMC,8BAAA,EAAA,EAAmB;AAAA;AAAA;AAChE,SAAA,EAEJ;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;AASA,SAAS,aAAa,EAAE,OAAA,EAAS,QAAA,EAAU,SAAA,WAAWC,WAAQ,EAAsB;AAClF,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAZ,cAAA,CAACa,sBAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAAb,cAAA,CAAC,QAAA,EAAA,EAAO,OAAA,EAAkB,SAAA,EAAWC,WAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA,EAAG,YAAA,EAAYU,SAAA,EAChG,QAAA,kBAAAX,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,8DAAA;AAAA,UACA,mBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,OAEL,CAAA,EACF,CAAA;AAAA,IACCU,SAAA,oBAAWX,cAAA,CAACc,sBAAA,EAAA,EAAgB,QAAA,EAAAH,SAAA,EAAQ;AAAA,GAAA,EACvC,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"timeline-expand-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-expand-col.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronsDownIcon,\n ChevronsDownUpIcon,\n ChevronsUpDownIcon,\n ChevronsUpIcon,\n ChevronUpIcon,\n FoldVerticalIcon,\n UnfoldVerticalIcon,\n} from 'lucide-react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TimelineExpandColProps = {\n isSelected?: boolean;\n isFaded?: boolean;\n isExpanded?: boolean;\n isRootSpan?: boolean;\n toggleChildren?: () => void;\n expandAllDescendants?: () => void;\n collapseAllDescendants?: () => void;\n collapseAll?: () => void;\n totalDescendants?: number;\n allDescendantsExpanded?: boolean;\n numOfChildren?: number;\n toggleSiblings?: () => void;\n siblingsAllExpanded?: boolean;\n siblingsWithChildrenCount?: number;\n};\n\nexport function TimelineExpandCol({\n isSelected,\n isFaded,\n isExpanded,\n isRootSpan,\n toggleChildren,\n expandAllDescendants,\n collapseAllDescendants,\n collapseAll,\n totalDescendants = 0,\n allDescendantsExpanded,\n numOfChildren = 0,\n toggleSiblings,\n siblingsAllExpanded,\n siblingsWithChildrenCount = 0,\n}: TimelineExpandColProps) {\n const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;\n const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;\n const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;\n const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;\n const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;\n\n return (\n <div\n className={cn('flex h-full items-center justify-end px-1.5', {\n 'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n 'bg-surface4': isSelected,\n })}\n >\n <div className=\"grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1\">\n <div>\n {showToggleChildren && (\n <ExpandButton onClick={() => toggleChildren?.()} tooltip={toggleTooltip}>\n {isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </ExpandButton>\n )}\n </div>\n\n <div>\n {showDescendantsButton && (\n <ExpandButton\n onClick={() => (allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.())}\n tooltip={\n allDescendantsExpanded\n ? `Collapse all descendants (${totalDescendants})`\n : `Expand all descendants (${totalDescendants})`\n }\n >\n {allDescendantsExpanded ? <ChevronsUpIcon /> : <ChevronsDownIcon />}\n </ExpandButton>\n )}\n </div>\n\n <div>\n {showToggleSiblings && (\n <ExpandButton\n onClick={() => toggleSiblings?.()}\n tooltip={siblingsAllExpanded ? 'Collapse at this level' : 'Expand at this level'}\n >\n {siblingsAllExpanded ? <FoldVerticalIcon /> : <UnfoldVerticalIcon />}\n </ExpandButton>\n )}\n\n {showRootToggleAll && (\n <ExpandButton\n onClick={() => (fullyExpanded ? collapseAll?.() : expandAllDescendants?.())}\n tooltip={fullyExpanded ? 'Collapse all' : 'Expand all'}\n >\n {fullyExpanded ? <ChevronsDownUpIcon /> : <ChevronsUpDownIcon />}\n </ExpandButton>\n )}\n </div>\n </div>\n </div>\n );\n}\n\ntype ExpandButtonProps = {\n onClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n tooltip?: string;\n};\n\nfunction ExpandButton({ onClick, children, className, tooltip }: ExpandButtonProps) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <button onClick={onClick} className={cn('h-full shrink-0 cursor-pointer', className)} aria-label={tooltip}>\n <div\n className={cn(\n 'flex items-center gap-[0.1rem] rounded-md p-1 transition-all',\n 'hover:bg-surface5',\n '[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-50 [&>svg]:transition-all',\n )}\n >\n {children}\n </div>\n </button>\n </TooltipTrigger>\n {tooltip && <TooltipContent>{tooltip}</TooltipContent>}\n </Tooltip>\n );\n}\n"],"names":["jsx","cn","jsxs","ChevronUpIcon","ChevronDownIcon","ChevronsUpIcon","ChevronsDownIcon","FoldVerticalIcon","UnfoldVerticalIcon","ChevronsDownUpIcon","ChevronsUpDownIcon","tooltip","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;;;;AA8BO,SAAS,iBAAA,CAAkB;AAAA,EAChC,UAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA;AAAA,EACA,sBAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA,GAAmB,CAAA;AAAA,EACnB,sBAAA;AAAA,EACA,aAAA,GAAgB,CAAA;AAAA,EAChB,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,yBAAA,GAA4B;AAC9B,CAAA,EAA2B;AACzB,EAAA,MAAM,gBAAgB,UAAA,GAAa,CAAA,mBAAA,EAAsB,aAAa,CAAA,CAAA,CAAA,GAAM,oBAAoB,aAAa,CAAA,CAAA,CAAA;AAE7G,EAAA,MAAM,qBAAqB,CAAC,UAAA,IAAc,CAAC,CAAC,iBAAiB,aAAA,GAAgB,CAAA;AAC7E,EAAA,MAAM,qBAAA,GAAwB,CAAC,UAAA,IAAc,kBAAA,IAAsB,gBAAA,GAAmB,aAAA;AACtF,EAAA,MAAM,kBAAA,GAAqB,CAAC,UAAA,IAAc,yBAAA,IAA6B,CAAA;AACvE,EAAA,MAAM,oBAAoB,CAAC,CAAC,cAAc,CAAC,CAAC,iBAAiB,aAAA,GAAgB,CAAA;AAC7E,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,UAAA,IAAc,CAAC,CAAC,sBAAA;AAExC,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,YAAG,6CAAA,EAA+C;AAAA,QAC3D,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MAED,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,SACE,QAAA,EAAA,kBAAA,oBACCA,cAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,MAAM,cAAA,IAAiB,EAAG,OAAA,EAAS,aAAA,EACvD,uCAAaA,cAAA,CAACG,yBAAA,EAAA,EAAc,oBAAKH,cAAA,CAACI,2BAAA,EAAA,EAAgB,GACrD,CAAA,EAEJ,CAAA;AAAA,wBAEAJ,cAAA,CAAC,SACE,QAAA,EAAA,qBAAA,oBACCA,cAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAO,sBAAA,GAAyB,sBAAA,OAA6B,oBAAA,IAAuB;AAAA,YAC7F,SACE,sBAAA,GACI,CAAA,0BAAA,EAA6B,gBAAgB,CAAA,CAAA,CAAA,GAC7C,2BAA2B,gBAAgB,CAAA,CAAA,CAAA;AAAA,YAGhD,QAAA,EAAA,sBAAA,mBAAyBA,cAAA,CAACK,0BAAA,EAAA,EAAe,CAAA,kCAAMC,4BAAA,EAAA,EAAiB;AAAA;AAAA,SACnE,EAEJ,CAAA;AAAA,wCAEC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,kBAAA,oBACCN,cAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,MAAM,cAAA,IAAiB;AAAA,cAChC,OAAA,EAAS,sBAAsB,wBAAA,GAA2B,sBAAA;AAAA,cAEzD,QAAA,EAAA,mBAAA,mBAAsBA,cAAA,CAACO,4BAAA,EAAA,EAAiB,CAAA,kCAAMC,8BAAA,EAAA,EAAmB;AAAA;AAAA,WACpE;AAAA,UAGD,iBAAA,oBACCR,cAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,MAAO,aAAA,GAAgB,WAAA,OAAkB,oBAAA,IAAuB;AAAA,cACzE,OAAA,EAAS,gBAAgB,cAAA,GAAiB,YAAA;AAAA,cAEzC,QAAA,EAAA,aAAA,mBAAgBA,cAAA,CAACS,8BAAA,EAAA,EAAmB,CAAA,kCAAMC,8BAAA,EAAA,EAAmB;AAAA;AAAA;AAChE,SAAA,EAEJ;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;AASA,SAAS,aAAa,EAAE,OAAA,EAAS,QAAA,EAAU,SAAA,WAAWC,WAAQ,EAAsB;AAClF,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAZ,cAAA,CAACa,sBAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAAb,cAAA,CAAC,QAAA,EAAA,EAAO,OAAA,EAAkB,SAAA,EAAWC,WAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA,EAAG,YAAA,EAAYU,SAAA,EAChG,QAAA,kBAAAX,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,8DAAA;AAAA,UACA,mBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,OAEL,CAAA,EACF,CAAA;AAAA,IACCU,SAAA,oBAAWX,cAAA,CAACc,sBAAA,EAAA,EAAgB,QAAA,EAAAH,SAAA,EAAQ;AAAA,GAAA,EACvC,CAAA;AAEJ;;;;"}