feat: dev toolbar

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4325 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	😴 Sleeping (View Logs)	Web	Apr 15, 2026 at 3:09 pm
frontend-inspector	😴 Sleeping (View Logs)	Web	Apr 15, 2026 at 3:09 pm
frontend-cloud	😴 Sleeping (View Logs)	Web	Apr 15, 2026 at 3:09 pm
ladle	❌ Build Failed (View Logs)	Web	Apr 15, 2026 at 2:59 pm
mcp-hub	✅ Success (View Logs)	Web	Feb 27, 2026 at 9:24 pm

[jog1t]

• feat: dev toolbar #4325 👈 (View in Graphite)
• refactor: icons chunk #4567
• refactor(frontend): actor list uplift #4511
• feat(frontend): logs uplift #4504
• refactor: uplift metrics #4499 : 1 other dependent PR (#4503 )
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: feat: dev toolbar

Summary

This PR adds a developer debugging toolbar for the cloud frontend. The toolbar is gated behind both an APP_TYPE check and a specific localStorage flag. It exposes PostHog session recording controls, Sentry issue reporting, React Query cache clearing, and keyboard shortcuts for all of these.

---

Bugs

Double toolbar render in __root.tsx

DevToolbar is added in two places: inside RootRoute (root-level) and inside CloudRoute (cloud-specific). For cloud apps both are in the same render tree, so two toolbars appear stacked at the bottom.

DevToolbar should live in exactly one place. CloudRoute is the more appropriate home since Clerk context (useAuth, useUser, useOrganization) is only available there. The instance in RootRoute should be removed.

localStorage type comparison

ls.get("I_SOLELY_SWORE..._") !== true compares against true (boolean). If a developer enables it via localStorage.setItem(..., 'true') in the browser console, the check fails because ls.get() returns the string "true". Worth confirming the expected activation mechanism and adding a comment with exact enable instructions.

---

Convention Violations (CLAUDE.md)

Fragment-style comments

The inline hotkey-section comments are fragments rather than complete sentences. Per project conventions these should be complete sentences, e.g. "Start a PostHog session recording."

---

Minor Issues

• Unnecessary optional chaining inside a guarded block: actor is already checked by the outer conditional, so actor?.sub can be actor.sub.
• Sep has a spurious leading space in className: " text-muted-foreground" should be "text-muted-foreground".
• Inconsistent separator usage: the PostHog button group uses an inline middle-dot literal instead of the Sep component everywhere.
• Missing useCallback on hotkey handlers: inline lambda callbacks are recreated on every render causing unnecessary hotkey re-registrations.
• 1-second polling interval is acceptable for a debug tool, but 5s would reduce re-render churn without meaningfully hurting UX.

---

Incidental changes worth confirming

• @clerk/shared version loosened from pinned 3.27.1 to ^3.27.1 -- intentional?
• examples/global-smoke-test entries removed from the lockfile -- was this example intentionally deleted?

---

Positive Notes

• Double-gating (app type check + deliberately obscure localStorage key) is a sensible pattern for an internal debug tool.
• ShortcutBadge only appearing when Shift is held is a clean contextual discoverability pattern.
• Hotkey sequences organized as named constants rather than scattered inline arrays.
• DevToolbar correctly defers all hook calls to the Content child component, avoiding Rules of Hooks violations from the early returns in the parent.

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• ai-agent
• ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• collaborative-document
• collaborative-document-vercel
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• example-elysia
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• geo-distributed-database
• geo-distributed-database-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region-vercel
• multiplayer-game
• example-multiplayer-game-patterns
• example-multiplayer-game-patterns-vercel
• multiplayer-game-vercel
• native-websockets
• native-websockets-vercel
• next-js
• per-tenant-database
• per-tenant-database-vercel
• 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
• sandbox
• sandbox-coding-agent
• sandbox-coding-agent-vercel
• sandbox-vercel
• scheduling
• scheduling-vercel
• example-sqlite-drizzle
• example-sqlite-raw
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-trpc

@rivetkit/cloudflare-workers

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

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4325

@rivetkit/traces

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

@rivetkit/workflow-engine

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

@rivetkit/virtual-websocket

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: ed7b494

[jog1t]

Merge activity

• Apr 15, 3:02 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 15, 3:14 PM UTC: Graphite rebased this pull request as part of a merge.
• Apr 15, 3:14 PM UTC: @jog1t merged this pull request with Graphite.

[github-actions]

Preview packages published to npm

Install with:

npm install rivetkit@pr-4325

All packages published as 0.0.0-pr.4325.9b3d81d with tag pr-4325.

Engine binary is shipped via @rivetkit/engine-cli on linux-x64-musl, linux-arm64-musl, darwin-x64, and darwin-arm64. Windows users should use the release installer or set RIVET_ENGINE_BINARY.

Docker images:

docker pull rivetdev/engine:slim-9b3d81d
docker pull rivetdev/engine:full-9b3d81d

Individual packages

npm install rivetkit@pr-4325
npm install @rivetkit/react@pr-4325
npm install @rivetkit/rivetkit-native@pr-4325
npm install @rivetkit/sqlite-wasm@pr-4325
npm install @rivetkit/workflow-engine@pr-4325