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]

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

Good refactor overall — the component decomposition is clean and the motivation (dynamic tab visibility based on actor feature availability) is well-reasoned. A few issues worth addressing:

---

Bug: Potential UI Flash on Actor Connect

There is an inconsistency in how workflow vs. database enabled state is initialized:

In actorIsWorkflowEnabledQueryOptions (actor-inspector-context.tsx):

queryFn: () => false,  // Resolves immediately as false

In actorDatabaseEnabledQueryOptions:

queryFn: () => new Promise<boolean>(() => {}),  // Never resolves

In useActorTabVisibility:

if (!isWorkflowEnabled) hiddenTabs.add("workflow");
if (!isDatabaseEnabled) hiddenTabs.add("database");

• Workflow tab will be immediately hidden (isWorkflowEnabled = false), then revealed when the WebSocket Init message arrives — causing a visible flash.
• Database tab starts hidden (isDatabaseEnabled = undefined, so !undefined = true) and then appears when the WebSocket sets it.

Both patterns result in tabs that flash hidden → visible on connection. Consider either defaulting both to a never-resolving promise to keep tabs hidden until confirmed, or defaulting both to true (optimistic show) and hiding only after the Init message confirms they are unavailable.

---

Dead Code: Unreachable logs Tab Content

In ActorTabsShell, there is a TabsContent for "logs" but no corresponding TabsTrigger value="logs", and "logs" is absent from TAB_PRIORITY. This content is unreachable. Either remove it or add the trigger if the logs tab is intentional.

---

Tab List Duplication

The full tab list (workflow, database, state, queue, connections, metadata) is now defined in two places:

1. ActorTabsShell (for when an actor is selected)
2. The no-actorId fallback branch in ActorTabs (for the disabled/empty state)

Adding a new tab requires updating both locations. Consider extracting the tab definitions or at minimum adding a comment linking the two.

---

Minor: New Set Allocation in Render

In ActorTabsNotRunning, hiddenTabs={new Set()} creates a new Set instance on every render. Worth extracting as a module-level constant:

const EMPTY_HIDDEN_TABS = new Set<TabId>();

---

Minor: Unconventional Query Pattern Should Be Documented

queryFn: () => new Promise<boolean>(() => {}) is non-obvious — it uses React Query as a synchronization primitive for WebSocket push data rather than for fetching. A brief comment explaining that this data is populated exclusively via queryClient.setQueryData in the WebSocket Init handler would prevent future confusion.

---

No Test Coverage

The PR checklist acknowledges no tests were added. Given this changes default tab selection and conditionally hides tabs based on actor state, it would be worth adding at minimum a unit test for useActorTabVisibility covering: all tabs visible, partially hidden, all hidden (fallback to connections), and the events → traces normalization path.