feat(dashboard): traces timeline ui

[jog1t]

No description provided.

[jog1t]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(dashboard): workflows ui #4081
• feat(dashboard): traces timeline ui #4056 👈 (View in Graphite)
• fix(traces): separate entrypoints #4119
• fix(rivetkit): restore waitForNames and fix queue type errors #4116
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: Traces Timeline UI

This PR adds a new timeline view for visualizing actor traces in the dashboard. The implementation is comprehensive and includes several sophisticated features like gap detection and time compression. Here's my detailed review:

Code Quality & Architecture

Strengths:

• Clean component separation with dedicated files for sidebar, timeline, types, and utilities
• Good use of TypeScript for type safety
• Efficient memoization with useMemo for expensive calculations
• Responsive UI with proper loading states and empty states

Issues:

1. Type Safety Issues (frontend/src/components/actors/traces/types.ts:10-21)

The SpanNode type has several inconsistencies:

export type SpanNode = {
    timeUnixNano: bigint;
    spanId: string | null;
    endTimeUnixNano: any;  // ❌ Using any
    startTimeUnixNano: any; // ❌ Using any
    name: ReactNode;        // ❌ Should be string
    span: OtlpSpan;
    startNs: bigint;
    endNs: bigint | null;
    children: SpanNode[];
    events: OtlpSpanEvent[];
};

Issues:

• endTimeUnixNano and startTimeUnixNano are typed as any - these should be bigint | null or bigint
• name is typed as ReactNode but used as a string throughout (e.g., span.span.name in span-sidebar.tsx:132)
• Redundant fields: timeUnixNano vs startNs, startTimeUnixNano vs startNs - this creates confusion about which field to use
• spanId can be string | null but is used as string without null checks (e.g., utils.ts:38)

2. Dead Code in actor-traces.tsx

The old TracesTimelineView component (lines 259-648 in the diff) appears to be dead code that should be removed. It's replaced by the new modular components but wasn't cleaned up.

3. Placeholder Implementations (frontend/src/components/actors/actor-traces.tsx:153-162)

onSelectSpan={(spanId: string | null): void => {
    throw new Error("Function not implemented.");
}}
onSelectEvent={(spanId: string, eventIndex: number): void => {
    throw new Error("Function not implemented.");
}}

These throw errors instead of being implemented. This will crash the app if users interact with the timeline view.

Potential Bugs

1. BigInt Division in span-sidebar.tsx:92

const durationMs = span.endNs
    ? (span.endNs - span.startNs) / 1_000_000n
    : null;

Then on line 135: formatDuration(Number(durationMs)) - This converts BigInt to Number. For very large durations, this could lose precision. Consider doing the conversion differently or using a dedicated bigint formatter.

2. Inconsistent Property Access (frontend/src/components/actors/traces/traces-timeline.tsx:1479-1483)

const durationMs = span.endTimeUnixNano
    ? (span.endTimeUnixNano - span.startTimeUnixNano) / 1_000_000
    : null;

This uses endTimeUnixNano and startTimeUnixNano but elsewhere the code uses endNs and startNs. Due to the any typing, TypeScript won't catch if these properties don't exist on the actual span objects.

3. Missing Null Check (frontend/src/components/actors/traces/span-sidebar.tsx:118)

onClick={() => onSelectSpan(span.spanId)}

spanId is typed as string | null but passed directly without null handling.

4. Incorrect isSpanInProgress Implementation (frontend/src/components/actors/traces/utils.ts:5)

export function isSpanInProgress(span: SpanNode): boolean {
    return span.endNs === undefined;
}

This checks for undefined, but SpanNode.endNs is typed as bigint | null, so it should check for null instead:

return span.endNs === null;

Performance Considerations

1. Polling Interval (frontend/src/components/actors/actor-queue.tsx:9)

Adding refetchInterval: 1000 means the queue status is polled every second. This is reasonable for live updates but could be configurable based on whether the user is viewing the traces tab.

2. Expensive Re-renders

The timeline calculations are properly memoized, but the TimelineView component doesn't have React.memo. For frequently updating traces, this could cause unnecessary re-renders.

3. Large Span Trees

No virtualization is implemented for the span list. With hundreds or thousands of spans, rendering performance could degrade. Consider using react-virtual or similar.

Security Concerns

No significant security issues identified. The code properly sanitizes and validates data through TypeScript types (once the any types are fixed).

Best Practices & Maintainability

1. Magic Numbers

Constants like GAP_THRESHOLD_MS = 50, GAP_FIXED_WIDTH_PX = 48, and MIN_ACTIVE_SEGMENT_WIDTH_PX = 8 are well-named and properly extracted.

2. Missing Documentation

Complex algorithms like detectTimeSegments and createTimeMapper would benefit from JSDoc comments explaining their logic, especially around gap compression.

3. Error Handling

No error boundaries or error handling for edge cases like:

• What happens if minTime > maxTime?
• What if all spans have null endNs?
• Division by zero in time calculations

Test Coverage

No tests are included in this PR. Given the complexity of the timeline calculations, unit tests for:

• detectTimeSegments
• createTimeMapper
• Time formatting functions
• Gap detection logic

would significantly improve confidence in the implementation.

Recommendations

Critical (must fix):

1. Fix type safety issues in types.ts - remove any types
2. Implement the onSelectSpan and onSelectEvent handlers or remove the timeline view until ready
3. Fix isSpanInProgress to check for null instead of undefined
4. Remove dead code (old TracesTimelineView in actor-traces.tsx)

High priority:

1. Resolve property name inconsistencies (startNs vs startTimeUnixNano)
2. Add null checks for nullable fields
3. Consider BigInt precision handling

Nice to have:

1. Add tests for complex timeline calculations
2. Add JSDoc for complex functions
3. Consider virtualizing large span lists
4. Add error boundaries for the timeline view

Summary

This is a solid implementation of a complex feature with good component architecture and visual polish. However, there are critical type safety issues and unimplemented functionality that need to be addressed before merging. The code shows good understanding of React patterns and performance optimization, but needs refinement in TypeScript usage and completeness.

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• example-ai-agent
• example-ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• custom-serverless-vercel
• example-sqlite
• example-elysia
• example-elysia-vercel
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-hono-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region
• multi-region-vercel
• native-websockets
• native-websockets-vercel
• next-js
• queue-sandbox
• queue-sandbox-vercel
• example-raw-fetch-handler
• example-raw-fetch-handler-vercel
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-raw-websocket-handler-proxy-vercel
• example-raw-websocket-handler-vercel
• example-react
• example-react-vercel
• scheduling
• scheduling-vercel
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-trpc
• example-trpc-vercel
• workflow-sandbox
• workflow-sandbox-vercel

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4056

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@4056

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4056

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4056

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4056

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4056

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4056

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4056

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4056

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4056

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4056

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4056

commit: a18121c