feat(dashboard): traces timeline ui by jog1t · Pull Request #4056 · rivet-dev/rivet

jog1t · 2026-01-28T19:56:23Z

No description provided.

jog1t · 2026-01-28T19:56:33Z

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): traces timeline ui #4056 : 2 dependent PRs (#4081 , #4100 ) 👈 (View in Graphite)
fix(traces): separate entrypoints #4119 : 1 other dependent PR (#4126 )
refactor(rivetkit): migrate granularly to zod v4 #4121
fix(rivekit): stub traces in browser #4120
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 · 2026-01-28T20:02:34Z

PR Review: Traces Timeline UI

This PR adds a timeline visualization view for traces in the dashboard, complementing the existing list view. The implementation includes gap detection/collapsing, zoom/pan controls, and interactive span selection.

🟢 Strengths

Code Organization

Clean separation of concerns with dedicated files for sidebar, timeline, types, and utilities
Good use of React hooks (useMemo, useCallback, useRef) for performance optimization
Comprehensive gap detection algorithm that handles edge cases

UX Features

Toggle between list and timeline views provides flexibility
Gap collapsing with visual indicators improves readability for sparse traces
Zoom/pan controls enhance navigation

🔴 Critical Issues

1. Broken Timeline View Integration (actor-traces.tsx:149-167)

The timeline view is integrated but with placeholder implementations that throw errors:

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

Impact: The timeline view will crash when users click on any span or event.

Fix: Implement proper state management.

2. Type Safety Issues (types.ts)

Multiple any types that should be specific:

export type SpanNode = {
    endTimeUnixNano: any;  // Should be: bigint | null
    startTimeUnixNano: any; // Should be: bigint
    name: ReactNode;  // Should probably be: string
    spanId: string | null;  // Can spanId actually be null?
}

Impact: Runtime type errors, loss of IDE autocomplete, harder debugging.

3. Inconsistent Property Usage

The SpanNode type has duplicate/inconsistent timestamp properties:

startNs vs startTimeUnixNano
endNs vs endTimeUnixNano
timeUnixNano (unclear purpose)

Used inconsistently throughout:

span-sidebar.tsx:92 uses startNs/endNs
traces-timeline.tsx:467-470 uses startTimeUnixNano/endTimeUnixNano
utils.ts:32-59 assumes properties like parentSpanId that don't exist in the type

Impact: Potential runtime errors, confusing codebase.

4. Missing Null Checks (utils.ts:38)

If spanId is null per the type definition, using it as a Map key will cause bugs.

5. Incorrect Duration Check (utils.ts:5)

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

Per the type definition, endNs is bigint | null, not bigint | undefined. Should check for both.

🟡 Major Issues

6. BigInt Arithmetic (traces-timeline.tsx:467-470)

If timestamps are bigints, you need to convert to Number before division.

7. Performance: Multiple Date.now() Calls

Date.now() is called repeatedly in tight loops (lines 70, 290, 331). Store once using useMemo.

8. Unused SpanSidebar Component

span-sidebar.tsx is imported but never used. The timeline view renders its own sidebar.

9. Missing Event Handlers

Timeline view references span.events but no details panel implementation exists unlike the old inline code that was removed.

10. Accessibility Issues

No keyboard navigation support
No ARIA labels on interactive elements
Button elements missing proper focus indicators
No screen reader support for timeline visualization

🟢 Minor Issues

11. Magic Numbers

Constants lack explanation:

const GAP_THRESHOLD_MS = 50; // Why 50ms?
const GAP_FIXED_WIDTH_PX = 48; // Why 48px?
const MIN_ACTIVE_SEGMENT_WIDTH_PX = 8; // Why 8px?

12. Missing Error Handling

No error boundaries or try-catch blocks. If span data is malformed, the entire component will crash.

13. Sorting Assumption (utils.ts:52-53)

If timestamps are bigints, subtraction won't work for sorting. Use comparison operators instead.

📋 Recommendations

High Priority

Fix the broken onclick handlers - this breaks the feature entirely
Fix type definitions - remove any types and make properties consistent
Add null checks for spanId and other nullable fields
Reconcile property naming - use either *Ns or *TimeUnixNano consistently

Medium Priority

Add error boundaries around timeline components
Implement proper event selection state management
Add comprehensive tests for gap detection algorithm
Optimize Date.now() calls
Add keyboard navigation support

Low Priority

Add JSDoc comments for complex algorithms
Extract magic numbers to named constants with explanations
Consider adding loading states

🎯 Test Coverage

Missing tests for:

Gap detection edge cases
Time mapper with various segment configurations
Zoom/pan boundary conditions
Null/undefined span data
BigInt arithmetic edge cases

Summary

This is a solid foundation for a timeline visualization feature with good architecture and performance considerations. However, it cannot be merged in its current state due to the broken click handlers and type safety issues. The core algorithms look sound, but need type fixes and null handling before they're production-ready.

Recommendation: Request changes - Fix critical issues #1-5 before merging.

pkg-pr-new · 2026-02-04T22:14:34Z

More templates

@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: c2e901e

graphite-app · 2026-02-05T08:40:13Z

Graphite Automations

"Test" took an action on this PR • (02/05/26)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.

graphite-app · 2026-02-05T21:46:14Z

frontend/src/components/actors/actor-traces.tsx

+import type {
+	OtlpAnyValue,
+	OtlpExportTraceServiceRequestJson,
+	OtlpKeyValue,
+	OtlpSpan,
+	OtlpSpanEvent,
+} from "@rivetkit/traces";
+import { readRangeWireToOtlp } from "@rivetkit/traces/otlp";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
-import {
-	useMemo,
-	useState,
-	type ReactElement,
-} from "react";
+import { type ReactElement, useMemo, useState } from "react";


Imports are not sorted correctly according to Biome's rules. React imports should come first, followed by third-party imports in alphabetical order, then local imports. Consider reorganizing these imports.

Spotted by Graphite Agent (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2026-02-05T21:49:50Z

frontend/src/components/actors/traces/span-sidebar.tsx

+									<button
+										key={`${span.spanId}-event-${idx}`}
+										onClick={() =>
+											onSelectEvent(span.spanId, idx)
+										}
+										className={cn(
+											"w-full flex items-center gap-2 px-2 py-1.5 rounded text-left text-sm transition-colors",
+											isEventSelected
+												? "bg-accent text-accent-foreground"
+												: "hover:bg-accent/50 text-muted-foreground",
+										)}
+									>
+										<Icon
+											icon={faCircle}
+											className="size-2 shrink-0 fill-current"
+										/>
+										<span className="truncate">
+											{event.name}
+										</span>
+									</button>


This button element is missing a type attribute. Add type="button" to prevent potential form submission issues.

Spotted by Graphite Agent (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2026-02-05T21:49:51Z

frontend/src/components/actors/traces/traces-timeline.tsx

+			{ticks.map((tick, i) => (
+				<div
+					key={i}
+					className={cn(
+						"absolute top-0 h-full flex flex-col items-center",
+						tick.isGapLabel && "z-10",
+					)}
+					style={{ left: tick.position }}
+				>
+					{tick.isGapLabel ? (
+						<>
+							<div
+								className="h-full w-px bg-muted-foreground/30"
+								style={{
+									backgroundImage:
+										"repeating-linear-gradient(to bottom, transparent, transparent 2px, hsl(var(--muted-foreground) / 0.3) 2px, hsl(var(--muted-foreground) / 0.3) 4px)",
+								}}
+							/>
+							<span className="absolute top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground bg-background/95 px-1.5 py-0.5 rounded border border-border whitespace-nowrap">
+								{tick.label} skipped
+							</span>
+						</>
+					) : (
+						<>
+							<div className="h-2 w-px bg-border" />
+							<span className="text-[10px] text-muted-foreground mt-0.5">
+								{tick.label}
+							</span>
+						</>
+					)}
+				</div>
+			))}


Using array index 'i' as a React key can cause rendering issues when items are reordered. Use a unique identifier from the tick object or create a compound key like tick.position-${i}.

Spotted by Graphite Agent (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2026-02-05T21:49:54Z

frontend/src/components/actors/traces/traces-timeline.tsx

+				<Button
+					variant="ghost"
+					size="icon"
+					className="size-8"
+					onClick={handleZoomOut}
+				>
+					<Icon icon={faMagnifyingGlassMinus} className="size-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="size-8"
+					onClick={handleZoomReset}
+				>
+					<Icon icon={faMinusLarge} className="size-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="size-8"
+					onClick={handleZoomIn}
+				>
+					<Icon icon={faMagnifyingGlassPlus} className="size-4" />
+				</Button>


These Button components may need explicit type="button" attributes if they're not already provided by the Button component implementation.

Spotted by Graphite Agent (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2026-02-05T21:49:55Z

frontend/src/components/actors/traces/span-sidebar.tsx

+				<button
+					onClick={() => onSelectSpan(span.spanId)}
+					className={cn(
+						"flex-1 flex items-center gap-2 px-2 py-1.5 rounded text-left text-sm transition-colors min-w-0",
+						isSelected
+							? "bg-accent text-accent-foreground"
+							: "hover:bg-accent/50",
+					)}
+				>
+					{inProgress && (
+						<Icon
+							icon={faSpinnerThird}
+							className="size-3 shrink-0 animate-spin"
+						/>
+					)}
+					<span className="truncate flex-1">{span.span.name}</span>
+					{durationMs !== null && (
+						<span className="text-xs text-muted-foreground shrink-0">
+							{formatDuration(Number(durationMs))}
+						</span>
+					)}
+				</button>


This button element is missing a type attribute. Add type="button" to prevent potential form submission issues.

Spotted by Graphite Agent (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2026-02-06T08:22:20Z

Merge activity

Feb 6, 8:22 AM UTC: NathanFlurry added this pull request to the Graphite merge queue.
Feb 6, 8:23 AM UTC: CI is running for this pull request on a draft pull request (#4146) due to your merge queue CI optimization settings.
Feb 6, 8:24 AM UTC: Merged by the Graphite merge queue via draft PR: #4146.

jog1t mentioned this pull request Jan 28, 2026

refactor(rivetkit): make traces server only lib #4051

Closed

jog1t force-pushed the 01-27-refactor_rivetkit_make_traces_server_only_lib branch from 63d40ba to d77a4fc Compare January 30, 2026 21:29

jog1t force-pushed the 01-28-feat_dashboard_traces_timeline_ui branch from 2a858f0 to d559f28 Compare January 30, 2026 21:29

jog1t mentioned this pull request Jan 30, 2026

feat(dashboard): workflows ui #4081

Merged

jog1t changed the base branch from 01-27-refactor_rivetkit_make_traces_server_only_lib to graphite-base/4056 February 4, 2026 22:11

jog1t force-pushed the 01-28-feat_dashboard_traces_timeline_ui branch from d559f28 to dff6754 Compare February 4, 2026 22:11

jog1t force-pushed the graphite-base/4056 branch from d77a4fc to 828baf3 Compare February 4, 2026 22:11

jog1t changed the base branch from graphite-base/4056 to 02-04-fix_traces_separate_entrypoints February 4, 2026 22:11

NathanFlurry mentioned this pull request Feb 4, 2026

fix(rivetkit): restore waitForNames and fix queue type errors #4116

Closed

11 tasks

jog1t mentioned this pull request Feb 4, 2026

fix(traces): separate entrypoints #4119

Closed

11 tasks

jog1t force-pushed the 02-04-fix_traces_separate_entrypoints branch from 828baf3 to a316801 Compare February 4, 2026 22:17

jog1t force-pushed the 01-28-feat_dashboard_traces_timeline_ui branch 2 times, most recently from e4ac15a to a18121c Compare February 4, 2026 22:57

jog1t force-pushed the 02-04-fix_traces_separate_entrypoints branch from a316801 to 3d621b9 Compare February 4, 2026 22:57

This was referenced Feb 5, 2026

fix(rivekit): stub traces in browser #4120

Closed

refactor(rivetkit): migrate granularly to zod v4 #4121

Closed

graphite-app bot force-pushed the 02-04-fix_traces_separate_entrypoints branch 2 times, most recently from 940cd33 to 9c70402 Compare February 5, 2026 00:40

graphite-app bot force-pushed the 01-28-feat_dashboard_traces_timeline_ui branch from a18121c to f49653b Compare February 5, 2026 00:40

NathanFlurry marked this pull request as ready for review February 5, 2026 08:35

graphite-app bot assigned jog1t Feb 5, 2026

This was referenced Feb 5, 2026

feat: use cases #4100

Closed

feat: sqlite #3666

Closed

fix(rivetkit): move ActorInspector init to constructor body #4124

Closed

jog1t force-pushed the 02-04-fix_traces_separate_entrypoints branch from 9c70402 to 0ad0c4d Compare February 5, 2026 20:34

jog1t mentioned this pull request Feb 5, 2026

feat(cloud): archiving #4126

Closed

11 tasks

graphite-app bot reviewed Feb 5, 2026

View reviewed changes

jog1t force-pushed the 02-04-fix_traces_separate_entrypoints branch from 0ad0c4d to df3efc4 Compare February 5, 2026 21:48

graphite-app bot reviewed Feb 5, 2026

View reviewed changes

graphite-app bot changed the base branch from 02-04-fix_traces_separate_entrypoints to graphite-base/4056 February 5, 2026 22:07

feat(dashboard): traces timeline ui

c2e901e

NathanFlurry force-pushed the 01-28-feat_dashboard_traces_timeline_ui branch from f49653b to c2e901e Compare February 6, 2026 07:58

NathanFlurry force-pushed the graphite-base/4056 branch from df3efc4 to d4d11ba Compare February 6, 2026 07:58

NathanFlurry changed the base branch from graphite-base/4056 to main February 6, 2026 07:58

This was referenced Feb 6, 2026

feat: implement actor sandbox example #4140

Closed

chore: move sqlite-vfs to separate package #4142

Closed

chore: migrate sqlite vfs to native rust #4143

Closed

graphite-app bot pushed a commit that referenced this pull request Feb 6, 2026

feat(dashboard): traces timeline ui (#4056)

83b8d3d

graphite-app bot closed this Feb 6, 2026

graphite-app bot deleted the 01-28-feat_dashboard_traces_timeline_ui branch February 6, 2026 08:24

This was referenced Feb 6, 2026

fix: rivetkit build #4147

Closed

feat(sentry): use correct env #4149

Closed

feat(workflow): connect workflow visualizer with live data #4153

Closed

This was referenced Feb 10, 2026

fix: clean up vite hacks #4160

Closed

fix(rivetkit): remove top-level promise errors #4161

Closed

chore: update exmaples #4162

Closed

chore(frontend): add default vite sentry url #4163

Closed

fix: add missing workflow fucntionality for queues #4165

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat(dashboard): traces timeline ui#4056

feat(dashboard): traces timeline ui#4056
jog1t wants to merge 1 commit intomainfrom
01-28-feat_dashboard_traces_timeline_ui

jog1t commented Jan 28, 2026

Uh oh!

jog1t commented Jan 28, 2026 •

edited by NathanFlurry

Loading

Uh oh!

claude bot commented Jan 28, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Feb 4, 2026 •

edited

Loading

Uh oh!

graphite-app bot commented Feb 5, 2026

Uh oh!

graphite-app bot Feb 5, 2026

Uh oh!

graphite-app bot Feb 5, 2026

Uh oh!

graphite-app bot Feb 5, 2026

Uh oh!

graphite-app bot Feb 5, 2026

Uh oh!

graphite-app bot Feb 5, 2026

Uh oh!

graphite-app bot commented Feb 6, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

jog1t commented Jan 28, 2026

Uh oh!

jog1t commented Jan 28, 2026 • edited by NathanFlurry Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

claude bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: Traces Timeline UI

🟢 Strengths

Code Organization

UX Features

🔴 Critical Issues

1. Broken Timeline View Integration (actor-traces.tsx:149-167)

2. Type Safety Issues (types.ts)

3. Inconsistent Property Usage

4. Missing Null Checks (utils.ts:38)

5. Incorrect Duration Check (utils.ts:5)

🟡 Major Issues

6. BigInt Arithmetic (traces-timeline.tsx:467-470)

7. Performance: Multiple Date.now() Calls

8. Unused SpanSidebar Component

9. Missing Event Handlers

10. Accessibility Issues

🟢 Minor Issues

11. Magic Numbers

12. Missing Error Handling

13. Sorting Assumption (utils.ts:52-53)

📋 Recommendations

High Priority

Medium Priority

Low Priority

🎯 Test Coverage

Summary

Uh oh!

pkg-pr-new bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

graphite-app bot commented Feb 5, 2026

Graphite Automations

Uh oh!

graphite-app bot Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jog1t commented Jan 28, 2026 •

edited by NathanFlurry

Loading

claude bot commented Jan 28, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 4, 2026 •

edited

Loading

graphite-app bot commented Feb 6, 2026 •

edited

Loading