refactor: tabs visibility

[jog1t]

Description

This change implements dynamic tab visibility for actor details based on feature availability. The actor tabs now conditionally show or hide based on whether specific features (workflow, database, state, queue) are enabled for the actor. When tabs are hidden, the system automatically selects the first available tab from a predefined priority order. The implementation also handles the case where actors are not running by showing all tabs but with appropriate guard content.

Type of change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• 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

[jog1t]

• feat: refetch actor details every 5s #4306
• fix: missing context switcher for engine #4305
• feat: allow ips in runner configs #4304
• fix: workflow statuses #4303
• refactor: tabs visibility #4302 👈 (View in Graphite)
• fix: workflow visualizer styles #4301
• fix: disable selection on drag #4300
• fix: pkg pr new config #4299
• fix: invalid changelog ping position #4298
• fix: inspector dev env #4297
• 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
• 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@4302

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/sqlite-vfs

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

@rivetkit/traces

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

@rivetkit/workflow-engine

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

@rivetkit/virtual-websocket

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: 995b259

[claude]

PR Review: refactor: tabs visibility (#4302)

Overview

This PR refactors ActorTabs to show/hide tabs dynamically based on whether specific actor features (workflow, database, state, queue) are actually enabled. The component hierarchy is restructured cleanly: ActorTabs → ActorTabsWithId → ActorTabTriggers (running) / ActorTabsNotRunning (not running) → ActorTabsShell.

The core design is sound. The split into separate components to avoid calling inspector hooks when the inspector context is unavailable correctly follows React rules of hooks.

---

Issues

1. Tab visibility flash on initial load

useActorTabVisibility derives tab visibility from queries that start in a pending/false state:

• actorIsWorkflowEnabledQueryOptions returns false by default, so the Workflow tab is hidden until the WebSocket Init message arrives.
• actorDatabaseEnabledQueryOptions never resolves (its queryFn is a promise that never settles), so isDatabaseEnabled is undefined initially, treated as falsy, hiding the Database tab.

This means on first render all four feature tabs are hidden, then pop in when Init arrives — a jarring UX. Consider defaulting to visible while loading and only hiding once data is confirmed, rather than the reverse.

2. Never-resolving query function is fragile

The default actorDatabaseEnabledQueryOptions query function returns a promise that never resolves. If the WebSocket connection fails or the Init message is dropped, isDatabaseEnabled remains undefined indefinitely with no observable error — the Database tab silently stays hidden forever. This should at minimum be documented and ideally have a connection-error fallback.

3. ActorTabTriggers reads guardContent redundantly

ActorTabTriggers is only rendered when guardContent is null (enforced by the if (guardContent) branch in ActorTabsWithId). Calling useInspectorGuard() inside ActorTabTriggers therefore always returns null. The call can be removed and null passed directly as guardContent to ActorTabsShell.

4. Trailing whitespace in className strings

Two spots in ActorTabsShell have trailing spaces in className values: "flex-1 min-h-0 min-w-0 flex flex-col " and "flex flex-1 items-center h-full w-full " both end with a space.

5. Ladle dev-tool styles added to shared theme.css

The .ladle-main styles added to theme.css are Ladle-specific (a development tool). While they are a no-op in production builds, mixing dev-tool overrides into a shared production theme file is confusing. Consider moving these to a Ladle config file or separate dev-only stylesheet.

---

Observations (Non-blocking)

• Default tab change: The fallback tab changed from "state" to "connections" in the not-running path. This is appropriate since state inspection requires a live connection.
• selectionOnDrag removal: Removing this from WorkflowVisualizer prevents accidental multi-node selections while panning — looks intentional and is a UX improvement.
• CSS consolidation: Moving shiki and scrollbar styles from the inspector app into the shared theme.css is a good cleanup that avoids duplication.
• No tests: Given the tab visibility logic complexity (pending queries, not-running edge cases), unit tests for useActorTabVisibility would be valuable as a follow-up.

---

Summary

The refactoring direction is good and the component hierarchy is clean. The main concern is a UX regression where tabs start hidden and flash in, caused by queries defaulting to "disabled" rather than "unknown." Addressing that — either by defaulting to visible while loading, or by tracking a loading state in useActorTabVisibility — would make the feature solid.