{name}

Renders {value.renderCount}

Sum of Render Durations {value.sumOfRenderDurations.toFixed(0)}ms

{/* Timeline container using flexbox */}

{/* Top labels area */}

{processedTopPointsForDisplay.map( ({ pointData: point, lane: currentLane }, index) => { const leftPercent = point.time * scale // Determine text positioning based on which half of the timeline it's on let transform = 'translateX(-50%)' if (leftPercent < LABEL_ALIGN_LOW_THRESHOLD) { transform = 'translateX(0%)' } else if (leftPercent > LABEL_ALIGN_HIGH_THRESHOLD) { transform = 'translateX(-100%)' } else if (leftPercent < TIMELINE_MIDDLE_THRESHOLD) { transform = 'translateX(5px)' // Add a small offset to the right } else { transform = 'translateX(calc(-100% - 5px))' // Offset to the left } return (

{getDisplayText(point)}

) }, )}

{/* Timeline bar area */}

{validBarSegments.map((seg) => { const segmentWidthPercent = (seg.end - seg.start) * scale const segmentLeftPercent = seg.start * scale if (segmentWidthPercent <= 0) return null return (

) })}

{/* Bottom labels area */}

{processedBottomPointsForDisplay.map( ({ pointData: point, lane: currentLane }, index) => { const leftPercent = point.time * scale // Determine text positioning based on which half of the timeline it's on let transform = 'translateX(-50%)' if (leftPercent < LABEL_ALIGN_LOW_THRESHOLD) { transform = 'translateX(0%)' } else if (leftPercent > LABEL_ALIGN_HIGH_THRESHOLD) { transform = 'translateX(-100%)' } else if (leftPercent < TIMELINE_MIDDLE_THRESHOLD) { transform = 'translateX(5px)' // Add a small offset to the right } else { transform = 'translateX(calc(-100% - 5px))' // Offset to the left } return (

{getDisplayText(point)}

) }, )}

{/* Marker lines - positioned absolutely with correct direction */} {uniqueTimesForLines.map((timeVal) => { const pointConfig = timePointsForDisplay.find((p) => p.time === timeVal) ?? timePointsForDisplay[0]! const leftPercent = timeVal * scale let lineLeftPositionStyle = `${leftPercent}%` let lineTransformStyle = 'translateX(-50%)' const markerLineWidth = Number.parseFloat( getComputedStyle(document.documentElement).getPropertyValue( '--tmdb-timeline-marker-line-width', ) || '2', ) if (leftPercent < MARKER_LINE_ALIGN_LOW_THRESHOLD) { lineLeftPositionStyle = '0%' lineTransformStyle = 'translateX(0)' } else if (leftPercent > MARKER_LINE_ALIGN_HIGH_THRESHOLD) { lineLeftPositionStyle = `calc(100% - ${markerLineWidth}px)` lineTransformStyle = 'translateX(0)' } // Determine if this marker needs top line, bottom line, or both const pointIndex = timePointsForDisplay.findIndex( (p) => p.time === timeVal, ) const needsTopLine = pointIndex % 2 === 0 // Even indexes (0, 2) are in top area const needsBottomLine = pointIndex % 2 !== 0 // Odd indexes (1, 3) are in bottom area return ( {needsTopLine && (

)} {needsBottomLine && (

)} ) })}

) } function RenderComputedRenderBeaconSpans({ computedRenderBeaconSpans, }: { computedRenderBeaconSpans: Record }) { return (

Computed Render Beacon Spans

{' '} {/* Allow block for timeline */}

) } function downloadTraceRecording< RelationSchemasT extends RelationSchemasBase, >(trace: TraceInfo) { if (!trace.traceContext || !trace.finalTransition) { return } try { const recording = createTraceRecording( trace.traceContext, trace.finalTransition, ) const recordingJson = JSON.stringify(recording, null, 2) const blob = new Blob([recordingJson], { type: 'application/json' }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = `trace-${trace.traceId}-${trace.traceName}.json` document.body.append(a) a.click() setTimeout(() => { a.remove() URL.revokeObjectURL(url) }, 0) } catch (error) { // eslint-disable-next-line no-console console.error('Failed to generate trace recording:', error) } } function TraceItem< RelationSchemasT extends RelationSchemasBase, >({ trace, isExpanded, onToggleExpand, onDismiss, isCurrentTrace = false, }: { trace: TraceInfo isExpanded: boolean onToggleExpand: () => void onDismiss: () => void isCurrentTrace?: boolean }) { const [isDefinitionDetailsExpanded, setIsDefinitionDetailsExpanded] = useState(false) const canDownloadRecording = (trace.state === 'complete' || trace.state === 'interrupted') && !!trace.traceContext && !!trace.finalTransition const computedResults = useMemo(() => { if (trace.traceContext && trace.finalTransition) { return getComputedResults(trace.traceContext, trace.finalTransition) } return {} }, [trace.traceContext, trace.finalTransition]) const handleDownloadClick = (e: React.MouseEvent) => { e.stopPropagation() downloadTraceRecording(trace) } const handleDismissClick = (e: React.MouseEvent) => { e.stopPropagation() onDismiss() } const borderLeftColor = isCurrentTrace ? 'var(--tmdb-color-active-primary)' : trace.state === 'complete' ? 'var(--tmdb-color-completed-primary)' : trace.state === 'interrupted' ? 'var(--tmdb-color-interrupted-primary)' : 'var(--tmdb-color-border-dark)' return (

{trace.traceName} {trace.state} {canDownloadRecording && ( )} {(trace.hasErrorSpan || trace.hasSuppressedErrorSpan) && ( ⚠️ )} {trace.definitionModifications && trace.definitionModifications.length > 0 && ( 🔧 )}

({formatMs(trace.liveDuration)})

{trace.traceId}

{new Date(trace.startTime).toLocaleTimeString()}

Variant {trace.variant}

Required {trace.requiredSpans.filter((s) => s.isMatched).length}/ {trace.requiredSpans.length}

{trace.relatedTo && Object.keys(trace.relatedTo).length > 0 && (

{Object.entries(trace.relatedTo).map(([key, value]) => ( {key}: {JSON.stringify(value)} ))}

)} {trace.interruptionReason && (

Reason {trace.interruptionReason}

)} {trace.lastRequiredSpanOffset !== undefined && (

FCR {formatMs(trace.lastRequiredSpanOffset)}

)} {trace.completeSpanOffset !== undefined && (

LCR {formatMs(trace.completeSpanOffset)}

)} {trace.cpuIdleSpanOffset !== undefined && (

TTI {formatMs(trace.cpuIdleSpanOffset)}

)}

Spans {trace.totalSpanCount ?? 0}

▼

{isExpanded && (

{ void e.stopPropagation() }} > {(trace.computedValues?.length ?? 0) > 0 && (

Computed Values

{(trace.computedValues ?? []).map((name) => { const value = getFromRecord( computedResults.computedValues, name, ) // Determine variant and display value based on trace state and value availability let variant: ChipVariant = 'default' let displayValue: unknown if ( trace.state === 'complete' || trace.state === 'interrupted' ) { if (value !== undefined) { variant = 'success' displayValue = value } else { variant = 'missing' displayValue = 'N/A' } } else { variant = 'pending' displayValue = 'pending' } return ( ) })}

)} {(trace.computedSpans?.length ?? 0) > 0 && (

Computed Spans

{name} {trace.state === 'complete' || trace.state === 'interrupted' ? ( value ? ( ) : ( missing ) ) : ( pending )}

)} {computedResults.computedRenderBeaconSpans ? ( ) : null}

{ e.stopPropagation() setIsDefinitionDetailsExpanded((prev) => !prev) }} > {isDefinitionDetailsExpanded ? '−' : '+'} Definition Details

{isDefinitionDetailsExpanded && ( <>

Trace Definition

{(() => { const { timeout, debounce, interactive } = trace.traceContext ? getConfigSummary(trace.traceContext) : {} return ( <> {timeout != null && ( )} {debounce != null && ( )} {interactive != null && ( )} ) })()}

{trace.definitionModifications && trace.definitionModifications.length > 0 && (

Trace Definition Modifications

{JSON.stringify(mod)}

)} )}

)}

) } export interface TraceManagerDebuggerProps< RelationSchemasT extends RelationSchemasBase, > { traceManager: TraceManager float?: boolean traceHistoryLimit?: number } /** * A component that visualizes the current state of the TraceManager and its Traces */ // eslint-disable-next-line import/no-default-export export default function TraceManagerDebugger< RelationSchemasT extends RelationSchemasBase, >({ traceManager, float = false, traceHistoryLimit = TRACE_HISTORY_LIMIT, }: TraceManagerDebuggerProps) { const [currentTrace, setCurrentTrace] = useState | null>(null) const [traceHistory, setTraceHistory] = useState< TraceInfo[] >([]) const [expandedHistoryIndex, setExpandedHistoryIndex] = useState< number | null >(0) const removeTraceFromHistory = (traceId: string) => { setTraceHistory((prev) => prev.filter((t) => t.traceId !== traceId)) } const [position, setPosition] = useState({ x: 10, y: 10 }) const isDraggingRef = useRef(false) const dragOffsetRef = useRef({ x: 0, y: 0 }) const [isMinimized, setIsMinimized] = useState(false) const containerRef = useRef(null) const handleMouseDown = (e: React.MouseEvent) => { if (!containerRef.current) return e.preventDefault() isDraggingRef.current = true dragOffsetRef.current = { x: e.clientX - position.x, y: e.clientY - position.y, } } const handleMouseMove = (e: MouseEvent) => { if (!isDraggingRef.current) return e.preventDefault() requestAnimationFrame(() => { setPosition({ x: e.clientX - dragOffsetRef.current.x, y: e.clientY - dragOffsetRef.current.y, }) }) } const handleMouseUp = (e: MouseEvent) => { if (isDraggingRef.current) { e.preventDefault() } isDraggingRef.current = false dragOffsetRef.current = { x: 0, y: 0 } } useEffect(() => { if (float) { window.addEventListener('mousemove', handleMouseMove) window.addEventListener('mouseup', handleMouseUp) return () => { window.removeEventListener('mousemove', handleMouseMove) window.removeEventListener('mouseup', handleMouseUp) } } return undefined }, [float]) useEffect(() => { const schedule = (fn: () => void) => void setTimeout(fn, 0) const traceEntriesMap = new Map< string, SpanAndAnnotation[] >() const startSub = traceManager.when('trace-start').subscribe((event) => { const trace = event.traceContext as AllPossibleTraces const traceId = trace.input.id traceEntriesMap.set(traceId, []) const traceInfo: TraceInfo = { traceId, traceName: trace.definition.name, variant: trace.input.variant as string, state: trace.stateMachine.currentState, startTime: trace.input.startTime.epoch, attributes: trace.input.attributes ? { ...trace.input.attributes } : undefined, relatedTo: trace.input.relatedTo ? { ...trace.input.relatedTo } : undefined, requiredSpans: trace.definition.requiredSpans.map((matcher, index) => { const name = formatMatcher(matcher, index) return { name, isMatched: false, definition: (matcher.fromDefinition as Record) ?? undefined, } }), traceContext: { definition: trace.definition, input: trace.input, recordedItemsByLabel: trace.recordedItemsByLabel, recordedItems: new Set(trace.recordedItems), }, liveDuration: 0, totalSpanCount: 0, hasErrorSpan: false, hasSuppressedErrorSpan: false, definitionModifications: [], computedSpans: Object.keys( trace.definition.computedSpanDefinitions ?? {}, ), computedValues: Object.keys( trace.definition.computedValueDefinitions ?? {}, ), } schedule(() => void setCurrentTrace(traceInfo)) }) const stateSub = traceManager .when('state-transition') .subscribe((event) => { const trace = event.traceContext as AllPossibleTraces const transition = event.stateTransition const partialNewTrace = { traceContext: { definition: trace.definition, input: trace.input, recordedItemsByLabel: trace.recordedItemsByLabel, recordedItems: new Set(trace.recordedItems), }, state: transition.transitionToState, attributes: trace.input.attributes ? { ...trace.input.attributes } : undefined, relatedTo: trace.input.relatedTo ? { ...trace.input.relatedTo } : undefined, } as const schedule( () => void setCurrentTrace((prevTrace) => { if (!prevTrace || prevTrace.traceId !== trace.input.id) return prevTrace const updatedTrace: TraceInfo = { ...prevTrace, ...partialNewTrace, } if ('interruptionReason' in transition) { updatedTrace.interruptionReason = transition.interruptionReason } if ( 'lastRequiredSpanAndAnnotation' in transition && transition.lastRequiredSpanAndAnnotation ) { updatedTrace.lastRequiredSpanOffset = transition.lastRequiredSpanAndAnnotation.annotation.operationRelativeEndTime } if ( 'completeSpanAndAnnotation' in transition && transition.completeSpanAndAnnotation ) { updatedTrace.completeSpanOffset = transition.completeSpanAndAnnotation.annotation.operationRelativeEndTime } if ( 'cpuIdleSpanAndAnnotation' in transition && transition.cpuIdleSpanAndAnnotation ) { updatedTrace.cpuIdleSpanOffset = transition.cpuIdleSpanAndAnnotation.annotation.operationRelativeEndTime } if (isTerminalState(transition.transitionToState)) { setTraceHistory((prev) => { updatedTrace.finalTransition = transition as FinalTransition const newHistory = [updatedTrace, ...prev] return newHistory.slice(0, traceHistoryLimit) }) return null } return updatedTrace }), ) }) const spanSeenSub = traceManager .when('required-span-seen') .subscribe((event) => { const trace = event.traceContext as AllPossibleTraces schedule( () => void setCurrentTrace((prevTrace) => { if (!prevTrace || prevTrace.traceId !== trace.input.id) { return prevTrace } const updatedRequiredSpans = [...prevTrace.requiredSpans] const matchedSpan = event.spanAndAnnotation trace.definition.requiredSpans.forEach((matcher, index) => { if (matcher(matchedSpan, trace)) { updatedRequiredSpans[index] = { ...updatedRequiredSpans[index]!, isMatched: true, } } }) return { ...prevTrace, requiredSpans: updatedRequiredSpans, } }), ) }) const addSpanSub = traceManager .when('add-span-to-recording') .subscribe((event) => { const trace = event.traceContext const traceId = trace.input.id if (!traceEntriesMap.has(traceId)) { traceEntriesMap.set(traceId, []) } const entries = traceEntriesMap.get(traceId)! entries.push(event.spanAndAnnotation) schedule( () => void setCurrentTrace((prevTrace) => { if (!prevTrace || traceId !== prevTrace.traceId) { return prevTrace } const liveDuration = entries.length > 0 ? Math.round( Math.max( ...entries.map( (e) => e.span.startTime.epoch + e.span.duration, ), ) - trace.input.startTime.epoch, ) : 0 const totalSpanCount = entries.length const hasErrorSpan = entries.some( (e) => e.span.status === 'error' && !isSuppressedError(trace, e), ) const hasSuppressedErrorSpan = entries.some( (e) => e.span.status === 'error' && isSuppressedError(trace, e), ) return { ...prevTrace, liveDuration, totalSpanCount, hasErrorSpan, hasSuppressedErrorSpan, } }), ) }) const defModSub = traceManager .when('definition-modified') .subscribe( ({ traceContext: trace, modifications: eventModifications }) => { schedule( () => void setCurrentTrace((prevTrace) => { if (!prevTrace || trace.input.id !== prevTrace.traceId) return prevTrace return { ...prevTrace, traceContext: { definition: trace.definition, input: trace.input, recordedItemsByLabel: trace.recordedItemsByLabel, recordedItems: new Set(trace.recordedItems), }, definitionModifications: [ ...(prevTrace.definitionModifications ?? []), eventModifications, ], } }), ) }, ) return () => { startSub.unsubscribe() stateSub.unsubscribe() spanSeenSub.unsubscribe() addSpanSub.unsubscribe() defModSub.unsubscribe() } }, [traceManager, traceHistoryLimit]) const allTraces = currentTrace ? [currentTrace, ...traceHistory] : traceHistory let content: JSX.Element // eslint-disable-next-line unicorn/prefer-ternary if (float && isMinimized) { content = (

) } else { content = ( <> {float && (

{NAME}

)} {!float && (

{NAME}

)} {/* Added a wrapper for padding when floating, as tmdb-floating-container itself has padding 0 */}

{allTraces.length > 0 ? ( // Removed specific padding here, rely on tmdb-floating-content-wrapper or tmdb-container

Traces ({allTraces.length}) Trace Visualizer

{allTraces.map((trace, index) => ( void setExpandedHistoryIndex( expandedHistoryIndex === index ? null : index, ) } onDismiss={() => { if (currentTrace?.traceId === trace.traceId) setCurrentTrace(null) removeTraceFromHistory(trace.traceId) if (expandedHistoryIndex === index) setExpandedHistoryIndex(null) else if ( expandedHistoryIndex !== null && expandedHistoryIndex > index ) { setExpandedHistoryIndex(expandedHistoryIndex - 1) } }} /> ))}

) : (

No traces running or completed

)}

) } // wrap // eslint-disable-next-line unicorn/prefer-ternary if (float) { content = (

{content}

) } else { content =

{content}

} // Apply root class for CSS variables to take effect return ( <> {content} ) }

{NAME}

{NAME}

Traces ({allTraces.length}) Trace Visualizer { setCurrentTrace(null) // Clear current trace as well if it's completed/interrupted setTraceHistory([]) setExpandedHistoryIndex(null) }} > Clear

Traces ({allTraces.length}) Trace Visualizer