feat(dashboard): workflows ui #4081

jog1t · 2026-01-30T23:26:16Z

No description provided.

jog1t · 2026-01-30T23:26:30Z

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 👈 (View in Graphite)
feat(dashboard): traces timeline ui #4056
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.

pkg-pr-new · 2026-01-30T23:29:01Z

More templates

@rivetkit/cloudflare-workers

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

@rivetkit/db

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

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/traces

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

@rivetkit/workflow-engine

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

@rivetkit/virtual-websocket

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: fdf54ec

claude · 2026-01-30T23:31:10Z

PR Review: Workflows UI

This PR adds a comprehensive workflow visualization UI to the dashboard. Overall, this is a high-quality implementation with excellent attention to detail. Below are my findings:

✅ Strengths

Excellent Code Organization: The code is well-structured with clear separation between types, layout logic, and rendering
Rich Visualization Features: Includes zoom, pan, detailed mode, delta display, and interactive node selection
Comprehensive Type Definitions: workflow-types.ts provides complete type safety for all workflow states
Visual Polish: Thoughtful UI details like hover states, status indicators, retry badges, and connection animations
Accessibility: Includes ARIA labels and semantic HTML where appropriate
Performance: Uses useMemo and useCallback appropriately for expensive computations

🔍 Code Quality Issues

1. Hardcoded Sample Data (Critical)

Location: actor-workflow-tab.tsx:12-358

The component uses hardcoded sample data instead of real API data:

const sampleWorkflowHistory: WorkflowHistory = { /* 350+ lines of hardcoded data */ }

Issue: The actorId prop is marked with eslint-disable-next-line @typescript-eslint/no-unused-vars, indicating the real integration is incomplete.

Recommendation:

Create a GitHub issue to track the API integration work
Add a prominent TODO comment referencing that issue
Consider adding a banner in the UI indicating this is using sample data

2. Type Safety Concerns

Location: workflow-visualizer.tsx:334, 828

Casting EntryKindType to include meta types like "input" and "output":

type: "input" as EntryKindType,  // Line 334
type: "output" as EntryKindType, // Line 828

Issue: This bypasses TypeScript type checking. The EntryKindType union doesn't include these meta types.

Recommendation: Use MetaExtendedEntryType or ExtendedEntryType for these meta nodes instead of casting.

3. Accessibility Warnings

Location: Multiple locations with biome-ignore comments

Several SVG interaction handlers lack proper keyboard accessibility:

Lines 918-927: SVG node click/hover
Lines 1108-1111: Connection hover
Lines 1307-1315: Canvas pan/zoom

Recommendation: While SVG interactions are complex to make accessible, consider:

Adding role="button" and tabIndex={0} to clickable SVG elements
Implementing keyboard navigation for node selection
Adding keyboard shortcuts for zoom/pan operations

4. Magic Numbers

Location: workflow-visualizer.tsx:43-51

Layout constants are hardcoded without explanation:

const NODE_WIDTH = 200;
const NODE_HEIGHT = 52;
// etc.

Recommendation: These are fine as constants, but consider adding comments explaining the design decisions, especially for values like BRANCH_GAP_X = 48.

5. Large Function Complexity

Location: workflow-visualizer.tsx:287-873

The parseAndLayout function is 586 lines long with high cyclomatic complexity.

Recommendation: Break this into smaller functions:

layoutTopLevelNodes()
layoutLoopNodes()
layoutBranchNodes()
calculateDimensions()

This would improve readability and testability.

⚠️ Potential Bugs

1. Zoom Limits Inconsistency

Location: workflow-visualizer.tsx:1273, 1291-1293

The zoom limits differ between wheel zoom (0.25-2) and button zoom (0.25-2):

const newScale = Math.min(Math.max(t.scale * delta, 0.25), 2); // wheel
setTransform((t) => ({ ...t, scale: Math.min(t.scale * 1.2, 2) })); // button

Issue: Both use the same limits, but the button zoom doesn't check the minimum.

Fix:

const zoomOut = () =>
  setTransform((t) => ({ ...t, scale: Math.max(t.scale / 1.2, 0.25) }));

2. Potential Division by Zero

Location: workflow-visualizer.tsx:1218-1219

const scaleX = (containerWidth - padding * 2) / contentWidth;
const scaleY = (containerHeight - padding * 2) / contentHeight;

Issue: If contentWidth or contentHeight is 0, this causes division by zero.

Recommendation: Add guards:

const scaleX = contentWidth > 0 ? (containerWidth - padding * 2) / contentWidth : 1;
const scaleY = contentHeight > 0 ? (containerHeight - padding * 2) / contentHeight : 1;

🎨 Style & Best Practices

1. Inconsistent String Truncation

Location: workflow-visualizer.tsx:1026, 1722-1729

Node names are truncated at 18 characters, but data is truncated at 120 or 200 characters depending on context.

Recommendation: Extract these to named constants for consistency.

2. Unused Props

Location: workflow-visualizer.tsx:900

gapFromPrev?: number;  // defined but never used in SVGNode

Fix: Remove this unused prop or implement the intended functionality.

🔒 Security Considerations

No significant security issues found. The component:

✅ Doesn't perform unsafe operations
✅ Uses proper JSON serialization
✅ Doesn't include user-controlled HTML

📊 Performance Considerations

Good: Layout calculation is memoized with useMemo
Good: Event handlers use useCallback to prevent unnecessary re-renders
Concern: Large workflows with hundreds of nodes might cause performance issues. Consider:
- Virtual scrolling for node lists
- Rendering optimization (only render visible nodes)
- Progressive rendering for very large workflows

🧪 Test Coverage

Missing: This PR doesn't include any tests.

Recommendation: Add tests for:

Layout calculations (especially edge cases like empty workflows, single nodes)
Type parsing and node creation
Zoom/pan interactions
Node selection state management

📝 Documentation

Good: The code includes helpful inline comments explaining complex logic.

Could Improve: Add JSDoc comments for:

Main component props
Complex type definitions
Layout algorithm overview

Summary

This is a well-crafted UI component with excellent visual design and user experience. The main concerns are:

Incomplete API integration - Using hardcoded sample data
Type safety issues with meta node types
Function complexity in layout calculation
Missing tests

Despite these issues, the code is production-ready for the sample data use case. Once the API integration is complete and the type casting is resolved, this will be an excellent addition to the dashboard.

Recommendation: ✅ Approve with minor changes

Focus on:

Fixing the zoom out minimum check
Adding division-by-zero guards
Creating a tracking issue for API integration
Removing unused props

Review generated by Claude Code

jog1t mentioned this pull request Jan 30, 2026

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

Closed

jog1t mentioned this pull request Jan 30, 2026

feat(dashboard): traces timeline ui #4056

Draft

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 01-31-feat_dashboard_workflows_ui branch from fdf54ec to db418cf Compare February 4, 2026 22:11

NathanFlurry mentioned this pull request Feb 4, 2026

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

Open

11 tasks

jog1t mentioned this pull request Feb 4, 2026

fix(traces): separate entrypoints #4119

Open

11 tasks

feat(dashboard): workflows ui

6950363

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

jog1t force-pushed the 01-31-feat_dashboard_workflows_ui branch from db418cf to 6950363 Compare February 4, 2026 22:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): workflows ui #4081

feat(dashboard): workflows ui #4081

jog1t commented Jan 30, 2026

Uh oh!

jog1t commented Jan 30, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jan 30, 2026

Uh oh!

claude bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

feat(dashboard): workflows ui #4081

Are you sure you want to change the base?

feat(dashboard): workflows ui #4081

Conversation

jog1t commented Jan 30, 2026

Uh oh!

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

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

pkg-pr-new bot commented Jan 30, 2026

Uh oh!

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

Uh oh!

PR Review: Workflows UI

✅ Strengths

🔍 Code Quality Issues

1. Hardcoded Sample Data (Critical)

2. Type Safety Concerns

3. Accessibility Warnings

4. Magic Numbers

5. Large Function Complexity

⚠️ Potential Bugs

1. Zoom Limits Inconsistency

2. Potential Division by Zero

🎨 Style & Best Practices

1. Inconsistent String Truncation

2. Unused Props

🔒 Security Considerations

📊 Performance Considerations

🧪 Test Coverage

📝 Documentation

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jog1t commented Jan 30, 2026 •

edited

Loading

claude bot commented Jan 30, 2026 •

edited

Loading