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

• fix: add missing workflow fucntionality for queues #4165
• chore(frontend): add default vite sentry url #4163
• chore: update exmaples #4162
• fix(rivetkit): remove top-level promise errors #4161
• fix: clean up vite hacks #4160
• feat(workflow): connect workflow visualizer with live data #4153
• feat(sentry): use correct env #4149
• fix: rivetkit build #4147
• feat(dashboard): workflows ui #4081 👈 (View in Graphite)
• feat(dashboard): traces timeline ui #4056 : 1 other dependent PR (#4100 )
• 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.

[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 dashboard's actor details page. The implementation includes a new "Workflow" tab with an interactive visual graph showing workflow execution history, including nodes, loops, joins, races, and timing information.

Code Quality ✅

Strengths

• Well-structured components: Clean separation between visualization logic (workflow-visualizer.tsx), type definitions (workflow-types.ts), and integration (actor-workflow-tab.tsx)
• Comprehensive type safety: Excellent TypeScript usage with detailed type definitions for all workflow entities
• Rich visualization features:
  • Interactive pan/zoom controls
  • Hover tooltips with detailed node information
  • Detailed mode and delta timing display
  • Support for complex workflow patterns (loops, joins, races)
• Good accessibility: Includes ARIA labels and proper semantic HTML/SVG structure

TypeScript Types (workflow-types.ts)

The type definitions are well-thought-out and comprehensive, covering all workflow concepts including:

• Entry types (step, loop, sleep, message, rollback_checkpoint, join, race)
• Status tracking and timing information
• Parsed structures for visualization

Issues & Concerns

1. Unused actorId Parameter ⚠️

// frontend/src/components/actors/workflow/actor-workflow-tab.tsx:7-8
interface ActorWorkflowTabProps {
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	actorId: string;
}

Issue: The actorId parameter is marked as unused with an eslint-disable comment. This is a code smell.

Recommendation: Either:

• Remove the parameter if it's truly not needed yet
• Add a TODO comment explaining when/how it will be used (e.g., when integrating with the actual API)
• Use it immediately if the API endpoint is ready

2. Hardcoded Sample Data ⚠️

// Lines 13-359 contain 350+ lines of hardcoded sample workflow data
const sampleWorkflowHistory: WorkflowHistory = { /* ... */ };

Issue: The sample data is massive (350+ lines) and lives directly in the component file.

Recommendations:

• Move sample data to a separate file (e.g., __fixtures__/sample-workflow.ts)
• Add a comment explaining this is temporary until the workflow inspector API is ready
• Consider adding a feature flag or environment variable to toggle between sample and real data

3. Hardcoded UI State Variables ⚠️

// frontend/src/components/actors/workflow/actor-workflow-tab.tsx:364-366
const isWorkflowEnabled = true;
const isLoading = false;
const isError = false;

Issue: These are hardcoded constants that should be dynamic state.

Recommendation: Implement proper state management:

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<Error | null>(null);
const [workflowData, setWorkflowData] = useState<WorkflowHistory | null>(null);

4. Performance: Multiple JSON.stringify Calls 🔍

// workflow-visualizer.tsx:1722-1729 (and similar in other places)
{JSON.stringify(hoveredNode.node.data, null, 2).slice(0, 200)}
{JSON.stringify(hoveredNode.node.data, null, 2).length > 200 ? "..." : ""}

Issue: JSON.stringify is called twice for the same data, which could be expensive for large objects.

Recommendation:

const dataStr = JSON.stringify(hoveredNode.node.data, null, 2);
{dataStr.slice(0, 200)}
{dataStr.length > 200 ? "..." : ""}

This pattern appears in multiple places:

• Line 913, 1722-1729, 1782

5. SVG Pattern ID Collision Risk 🔍

// workflow-visualizer.tsx:1324
<pattern id="dotGrid" ... />
// workflow-visualizer.tsx:1359
<marker id="arrowhead" ... />

Issue: If multiple WorkflowVisualizer components are rendered on the same page, these IDs will collide.

Recommendation: Use unique IDs per component instance:

const instanceId = useId(); // React 18+ hook
<pattern id={`dotGrid-${instanceId}`} ... />
<marker id={`arrowhead-${instanceId}`} ... />

6. Missing Dependency in useEffect 🔍

// workflow-visualizer.tsx:1206-1232
useEffect(() => {
  // ... uses layout
}, [layout, hasInitialized]); // ✅ Correct dependencies

This one is actually correct, but worth verifying all dependencies are properly listed.

7. Magic Numbers 🔴

// workflow-visualizer.tsx:43-51
const NODE_WIDTH = 200;
const NODE_HEIGHT = 52;
const NODE_HEIGHT_DETAILED = 100;
const NODE_GAP_Y = 32;
const BRANCH_GAP_X = 48;
// etc.

Issue: While constants are defined (good!), they're scattered and some calculations use additional magic numbers (e.g., + 40, + 48, + 20).

Recommendation: Consider grouping related constants and adding comments explaining the layout logic.

8. Type Assertion Overuse 🔍

// Multiple instances like:
const colors = TYPE_COLORS[node.type as MetaExtendedEntryType];

Issue: The codebase uses as MetaExtendedEntryType type assertions frequently. This indicates a potential type mismatch in the data model.

Recommendation: Review the type hierarchy - if node.type is always compatible with MetaExtendedEntryType, update the type definitions rather than using assertions.

Security ✅

No security concerns identified. The component:

• Doesn't handle user input directly (read-only visualization)
• Uses React's built-in XSS protection
• Properly escapes data in JSON.stringify calls

Performance Considerations

Potential Issues:

1. Large workflow rendering: The parseAndLayout function processes all history items on every render when dependencies change. For very large workflows (1000+ nodes), this could be slow.

   • Mitigation: Already using useMemo correctly ✅

2. SVG rendering: Large SVGs can be expensive to render

   • Recommendation: Consider virtualizing nodes outside the viewport for very large workflows

Good Practices:

• ✅ Proper use of useMemo for expensive layout calculations
• ✅ Proper use of useCallback for event handlers
• ✅ Debounced pan/zoom updates

Test Coverage ❓

Missing: No tests are included in this PR.

Recommendation: Add tests for:

• parseAndLayout function with various workflow structures
• Type guards and data transformation logic
• Edge cases (empty workflows, single nodes, deeply nested loops)
• Component rendering with different workflow states

Integration Completeness 🟡

The PR is labeled as a UI implementation with sample data. The following integration work remains:

1. Connect to actual workflow inspector API
2. Use the actorId prop to fetch real workflow data
3. Implement proper loading/error states
4. Add real-time updates if workflows can change

Recommendation: Create follow-up issues/PRs for API integration to track this work.

Suggestions for Improvement

1. Extract Utilities

Consider extracting utility functions to separate files:

• formatDuration → utils/time.ts
• getDisplayName, getEntrySummary → utils/workflow.ts
• Color constants → constants/workflow-colors.ts

2. Add PropTypes or Runtime Validation

For the WorkflowHistory data structure, consider adding runtime validation (e.g., with Zod) since it will eventually come from an API.

3. Keyboard Navigation

Consider adding keyboard shortcuts for common actions:

• Arrow keys for panning
• +/- for zoom
• 0 to reset view
• F to fit view

4. Export Functionality

Consider adding the ability to export the workflow visualization (e.g., as PNG/SVG).

Summary

Overall Assessment: This is a high-quality PR with a well-architected workflow visualization system. The code is clean, well-typed, and includes thoughtful UI/UX features.

Blocking Issues: None

Non-blocking Recommendations:

1. Fix duplicate JSON.stringify calls (performance)
2. Move sample data to fixtures
3. Prepare for API integration (use actorId, add proper state management)
4. Add unique IDs for SVG elements
5. Consider adding tests
6. Extract magic number calculations to named constants

Approval Status: ✅ Approved with minor recommendations

The identified issues are primarily code quality improvements and future-proofing rather than bugs. The PR is ready to merge, with the understanding that API integration will follow in a subsequent PR.

---

Review by Claude Sonnet 4.5 via Claude Code

[graphite-app]

Graphite Automations

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

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

[graphite-app]

Merge activity

• Feb 10, 8:45 AM UTC: NathanFlurry added this pull request to the Graphite merge queue.
• Feb 10, 8:46 AM UTC: CI is running for this pull request on a draft pull request (#4166) due to your merge queue CI optimization settings.
• Feb 10, 8:48 AM UTC: The Graphite merge queue couldn't merge this PR because it failed for an unknown reason.
• Feb 10, 7:24 PM UTC: NathanFlurry added this pull request to the Graphite merge queue.