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 : 1 other dependent PR (#4120 )
• 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]

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. The implementation is impressive with interactive visualization, detailed node inspection, and multiple view modes. Below are my findings:

✅ Strengths

1. Well-structured component architecture - Clean separation between types, layout logic, and rendering
2. Rich feature set - Pan/zoom, hover details, node selection, detailed/compact modes, delta visualization
3. Comprehensive type definitions - Strong typing throughout with clear interfaces
4. Accessible UI - Good use of ARIA labels and semantic markup
5. Visual polish - Thoughtful design with status indicators, retry badges, and color coding

🔍 Code Quality Issues

High Priority

1. Hardcoded sample data (actor-workflow-tab.tsx:13-359)

   • The entire workflow history is hardcoded sample data
   • Lines 364-366 have unused variables (isWorkflowEnabled, isLoading, isError)
   • The actorId prop is marked with eslint-disable but not used
   • Action: Implement actual API integration to fetch workflow data from the inspector

2. Missing error boundaries (workflow-visualizer.tsx)

   • No error handling if workflow data is malformed
   • parseAndLayout could throw on unexpected data structures
   • Action: Add try-catch in parsing logic and display user-friendly error messages

3. Performance concerns (workflow-visualizer.tsx:1200-1203)

   • parseAndLayout runs on every render when detailedMode or showAllDeltas changes
   • Large workflows could cause performance issues
   • Action: Consider memoizing intermediate parsing steps or debouncing layout recalculation

Medium Priority

4. Type inconsistencies (workflow-types.ts:54, workflow-visualizer.tsx:54)

   • MetaExtendedEntryType is duplicated in workflow-visualizer.tsx
   • Should import from workflow-types.ts instead
   • Action: Remove duplicate definition and import from types file

5. Magic numbers (workflow-visualizer.tsx:43-51)

   • Layout constants like NODE_WIDTH, NODE_GAP_Y are scattered throughout
   • Some calculations use inline magic numbers (e.g., line 609: deltaSpace = maxHeaderDelta >= 500 ? 24 : 0)
   • Action: Extract all magic numbers to named constants with comments

6. Accessibility gaps

   • SVG nodes use biome-ignore for a11y but lack proper keyboard navigation
   • Selected nodes aren't announced to screen readers
   • Action: Add keyboard support (arrow keys, Enter to select) and ARIA live regions for selections

7. Inconsistent null handling (workflow-visualizer.tsx:552, 784)

   • prevCompletedAt set to null after branches but undefined elsewhere
   • Mixed use of undefined and null for optional values
   • Action: Standardize on either null or undefined throughout

Low Priority

8. Dead code (workflow-visualizer.tsx:900)

   • gapFromPrev parameter in SVGNode is unused
   • Action: Remove unused parameter

9. Complex function (workflow-visualizer.tsx:287-874)

   • parseAndLayout is 587 lines with deeply nested logic
   • Difficult to test and maintain
   • Action: Extract branch layout, loop layout, and node positioning into separate functions

10. Missing TypeScript strict checks

    • Type assertions like as number used frequently without guards
    • Location array access assumes structure without validation
    • Action: Add runtime validation or use type guards

🔒 Security Considerations

• No XSS vulnerabilities detected - Data is rendered as text/attributes, not innerHTML
• No injection risks - No dynamic script generation
• JSON.stringify is safe for display purposes

🎯 Performance Considerations

1. SVG rendering - Large workflows (>100 nodes) may cause browser lag
   • Consider virtualization or progressive rendering
2. Re-renders - Hover state triggers re-renders; consider using refs for popover positioning
3. Layout calculations - Currently synchronous; consider web workers for very large workflows

📝 Best Practices

Following conventions:

• ✅ Uses project's existing UI components and patterns
• ✅ TypeScript types are comprehensive
• ✅ Follows React hooks best practices
• ✅ CSS-in-JS approach matches existing code

Not following conventions:

• ⚠️ Comments could be improved (CLAUDE.md: write complete sentences, avoid parentheticals)
• ⚠️ Missing integration with actual backend API

🧪 Testing Gaps

• No tests included for this new feature
• Complex layout logic should have unit tests
• Recommendation: Add tests for:
  • parseAndLayout with various workflow structures
  • Edge cases (empty workflows, single nodes, deeply nested branches)
  • Pan/zoom calculations
  • Keyboard navigation (once implemented)

📊 Package.json Change

The only non-frontend change is:

-  "stableVersion": "0.8.0"
+  "stableVersion": "0.8.0"

This appears to be a whitespace-only change with no functional impact.

🎬 Recommendations for Merge

Before merging:

1. ⚠️ Critical: Replace hardcoded sample data with actual API integration
2. ⚠️ Important: Add error boundary and loading states
3. ⚠️ Important: Extract parseAndLayout into smaller, testable functions
4. Consider adding basic unit tests for core parsing logic

Post-merge improvements:
5. Add keyboard navigation support
6. Optimize performance for large workflows
7. Add comprehensive test coverage
8. Standardize null/undefined handling

Summary

This is a well-crafted, feature-rich workflow visualizer that demonstrates strong frontend engineering skills. The main blocker for production readiness is the lack of real API integration. The code quality is good overall, with room for improvement in testability, performance optimization, and accessibility. Once the API integration is complete and error handling is added, this would be a valuable addition to the dashboard.

Recommendation: Request changes for API integration and error handling before merging.

---

Review generated by Claude Code

[claude]

PR Review: Workflows UI

Overview

This PR adds a comprehensive workflow visualization UI to the frontend dashboard. The implementation includes a new "Workflow" tab in the actor details view with a sophisticated SVG-based workflow visualizer. Currently displaying sample data, with plans to connect to the actual workflow inspector API.

Code Quality Assessment

Strengths ✅

1. Well-structured component architecture: Clean separation of concerns with distinct files for types, visualizer, and tab components.

2. Comprehensive type definitions: Strong TypeScript typing throughout with proper interfaces for all workflow entities (workflow-types.ts).

3. Rich visualization features:

   • Pan and zoom controls with intuitive UI
   • Support for loops, joins, races, and nested workflow structures
   • Hover tooltips and detailed node inspection
   • Detailed/compact view modes
   • Delta timing visualization between nodes

4. Good accessibility patterns: Proper use of semantic HTML, ARIA labels, and keyboard-accessible controls.

5. Performance considerations: Uses useMemo and useCallback appropriately to prevent unnecessary recalculations.

Issues & Recommendations

🔴 Critical

1. Unused parameter in ActorWorkflowTab (actor-workflow-tab.tsx:7-8):

   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   actorId: string;

   The actorId prop is currently unused since sample data is being displayed. This should be connected to the actual API when available. Consider adding a TODO comment for clarity.

2. Hard-coded sample data (actor-workflow-tab.tsx:13-358):
   The 345-line sample workflow object should be moved to a separate fixture file (e.g., workflow/sample-data.ts) to improve maintainability and make the component easier to read.

🟡 High Priority

3. Package version change without context (rivetkit/package.json:3):
   The version was changed from 2.0.41 to 2.0.42. This should either:

   • Be part of a separate versioning commit
   • Have an explanation in the PR description
   • Be reverted if unintentional

4. Type casting concerns (workflow-visualizer.tsx:334, 827):

   type: "input" as EntryKindType,
   type: "output" as EntryKindType,

   Casting meta types as EntryKindType is a code smell. Consider:

   • Creating a proper union type that includes meta types
   • Or using ExtendedEntryType consistently throughout

5. Magic numbers (workflow-visualizer.tsx:43-51):
   Layout constants are well-organized, but some calculations use inline magic numbers (e.g., line 609: deltaSpace = maxHeaderDelta >= 500 ? 24 : 0). Consider extracting these to named constants.

6. Large function complexity (workflow-visualizer.tsx:287-874):
   The parseAndLayout function is ~590 lines long. Consider breaking it into smaller functions:

   • layoutTopLevelNodes
   • layoutLoopNodes
   • layoutBranchNodes
   • layoutMetaNodes

🟢 Medium Priority

7. Error handling: No error boundaries or fallback UI for malformed workflow data. Consider adding validation and graceful degradation.

8. Missing loading states: While the tab has a loading state, the visualizer itself doesn't handle partial/streaming data well.

9. Accessibility improvements needed:

   • Keyboard navigation within the workflow diagram
   • Screen reader announcements for node selection
   • Focus management when selecting nodes

10. Performance - SVG rendering: For very large workflows (100+ nodes), the SVG rendering might become sluggish. Consider:

    • Virtualization/viewport culling for off-screen nodes
    • Canvas rendering as an alternative
    • Progressive loading

🔵 Low Priority (Polish)

11. Console warnings potential: The use of biome-ignore comments (lines 918, 1107, 1306) suggests linting concerns. Ensure these are justified.

12. Hardcoded color values: Many colors are hardcoded strings (e.g., #3b82f6, #a855f7). Consider using CSS variables for theme consistency.

13. Incomplete features (workflow-visualizer.tsx:1298):
    The fitView calculation uses magic numbers (800, 0.85). This should be based on actual content dimensions.

14. Missing unit tests: No test coverage visible for the complex layout algorithm or interaction logic.

Security Considerations

✅ No obvious security issues. The component properly:

• Handles user input through React event handlers
• Uses safe SVG rendering (no innerHTML)
• Doesn't execute arbitrary code from workflow data

Performance Considerations

• Memoization: Good use of useMemo for layout calculations
• Event handlers: Properly memoized with useCallback
• Concern: Large workflows may cause performance issues due to SVG complexity

Testing Recommendations

1. Add unit tests for:

   • parseAndLayout function with various workflow structures
   • getEntrySummary with different entry types
   • Layout calculations for edge cases

2. Add integration tests for:

   • Pan/zoom interactions
   • Node selection and hover states
   • View mode toggles

3. Visual regression tests for:

   • Different workflow patterns (loops, joins, races)
   • Various zoom levels and viewport sizes

Suggested Next Steps

1. ✅ Merge as-is if this is a draft/preview feature with the understanding that:

   • API integration is pending
   • Performance optimization will come later
   • Tests will be added in follow-up PRs

2. 🔄 Before merging if this is production-ready:

   • Move sample data to fixture file
   • Extract large functions into smaller pieces
   • Add error boundaries
   • Fix the package.json version (unless intentional)
   • Add basic test coverage

3. 📋 Follow-up work to track:

   • Connect to actual workflow inspector API
   • Add keyboard navigation
   • Performance testing with large workflows
   • Add comprehensive test suite

Conclusion

This is a high-quality implementation with excellent visualization capabilities. The code is well-structured and demonstrates good React practices. The main concerns are around code organization (large functions, sample data placement) and the missing API integration.

Recommendation: ✅ Approve with minor changes - Address the package.json version and consider moving sample data to a fixture file. The rest can be cleaned up in follow-up PRs.

Great work on the complex SVG layout algorithm and interactive features! 🎉