feat(dashboard): workflows 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 👈 (View in Graphite)
• feat(dashboard): traces timeline ui #4056
• refactor(rivetkit): make traces server only lib #4051
• feat(frontend): traces ui #4038 : 1 other dependent PR (#4032 )
• feat(rivetkit): traces #4037
• feat(rivetkit): integrate workflows in to actors #4006
• feat(rivetkit): workflows #3734
• feat(rivetkit): add actor run handler #4005 : 1 other dependent PR (#4008 )
• feat: actor messages & queues #3989 : 2 other dependent PRs (#4002 , #4088 )
• 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]

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
• 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

@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]

PR Review: Workflows UI

This PR adds a comprehensive workflow visualization UI to the dashboard. Overall, this is an impressive implementation with sophisticated SVG-based rendering and interactive features.

Strengths

1. Excellent Visual Design - Clean UI with proper color coding, smooth zoom/pan controls, hover states, and a nice dot grid background
2. Comprehensive Feature Set - Support for complex workflow structures (loops, joins, races, branches), detailed/compact views, delta time display
3. Good Type Safety - Well-structured TypeScript types with proper discriminated unions
4. Code Organization - Logical separation into three files with constants defined at the top

Issues and Concerns

1. Memory and Performance (High Priority)

Issue: Large sample data (350+ lines) is bundled directly in the component file (actor-workflow-tab.tsx:13-359).

Impact: Adds approximately 15KB to bundle unnecessarily. Will be dead code when real API is implemented.

Recommendation: Move to separate mock file, remove entirely, or use minimal sample (5-10 nodes).

2. Accessibility Issues (Medium Priority)

Issue: Interactive SVG elements lack proper accessibility (workflow-visualizer.tsx:918-926)

• No keyboard navigation (cannot tab between nodes)
• No ARIA labels or roles
• Screen readers will not understand structure
• No focus management

Recommendations:

• Add tabIndex={0} and role=button to interactive elements
• Implement keyboard handlers (Enter/Space, Arrow keys)
• Add aria-label describing each node
• Consider accessible alternative view

3. Hardcoded Magic Values

Values like 500 (deltaSpace threshold) and 24 (spacing) lack explanation. Extract to named constants with comments.

4. Potential Layout Bugs

Division by zero not handled in parseAndLayout (workflow-visualizer.tsx:1218). Add safety checks with Math.max.

5. Missing Error Boundaries

Complex calculations could fail. Wrap in error boundary to prevent breaking entire actor details page.

Suggestions

1. Performance: Memoize Connection component to avoid re-rendering all connections on hover
2. State Management: Use useReducer for related state to prevent race conditions
3. Add skeleton loaders for real API data loading states
4. Add runtime type guards instead of type casting

Potential Bugs

1. Mouse Up Outside Canvas: isPanning stays true if mouse released outside
2. Scroll Lock: e.preventDefault() on wheel might trap users
3. Text Overflow: String slicing at 18 chars could fail with multi-byte characters

Test Coverage

Missing: No tests for this complex component. Consider adding unit tests for parseAndLayout, edge case tests, interaction tests, and accessibility tests.

Overall Assessment

High-quality implementation with excellent visual design. Main concerns: accessibility, sample data bundle size, edge case handling, and test coverage.

Recommendation: Approve with changes requested

Great work on the visualization system! Once accessibility issues are addressed and sample data removed, this will be an excellent addition to the dashboard.