fix: workflow visualizer styles

[jog1t]

Description

This change consolidates CSS styling by moving Shiki syntax highlighting variables, scrollbar styles, and spacing definitions from the inspector app to the main theme file. The inspector now imports from the centralized theme location, and new dark theme overrides have been added for xyflow components (Controls, MiniMap, and edges) along with Ladle story container styling.

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

[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
• fix: workflow visualizer styles #4301 👈 (View in Graphite)
• 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.

[claude]

PR Review: fix: workflow visualizer styles

Overview

This PR consolidates CSS by moving Shiki, scrollbar, and spacing styles from the inspector into the main app's CSS, redirects the inspector's import to frontend/src/index.css, and adds xyflow/Ladle dark theme overrides to frontend/src/components/theme.css.

---

Issues

1. Duplicate xyflow styles (significant)

The xyflow overrides added to frontend/src/components/theme.css already exist verbatim in two other places:

• frontend/src/index.css (lines 67–97) — already applied to the main app
• .ladle/ladle.css (lines 41–79) — already applied to Ladle stories

Since .ladle/ladle.css imports ../src/components/theme.css, Ladle stories will now have these styles defined twice. If the intent is to centralize the xyflow overrides into theme.css, the duplicate block in .ladle/ladle.css should be removed in this PR. Otherwise, this is an incomplete consolidation.

2. Inspector now imports a file with @tailwind directives (moderate)

frontend/apps/inspector/src/index.css changes to:

@import "../../../src/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

frontend/src/index.css itself also contains @tailwind base/components/utilities. This means the inspector will process Tailwind directives from both the imported file and its own declarations. Depending on how the Vite/PostCSS pipeline resolves this, it could result in doubled Tailwind output. It would be cleaner to have the inspector import only frontend/packages/components/public/theme.css for CSS variables and include the Shiki/scrollbar styles directly (or extract them to a shared partial), rather than pulling in the full app-level index.css.

3. Hardcoded border-radius (minor)

.react-flow__controls {
    border-radius: 6px;  /* Should use var(--radius) or calc(var(--radius) - Npx) */
}
.react-flow__minimap {
    border-radius: 6px;
}

The rest of the theme uses var(--radius) for consistency. Hardcoding 6px will be out of sync if the radius variable is changed.

4. !important on minimap background (minor)

.react-flow__minimap {
    background: hsl(var(--card)) !important;
}

!important here signals a specificity conflict with xyflow's inline or default styles. This is worth documenting with a comment explaining why it's needed (e.g., xyflow sets this via inline style), so it doesn't get silently removed later.

5. PR category (minor)

The checklist marks this as a Bug fix, but the changes are a style consolidation/refactor. This is low priority but worth noting for changelog accuracy.

---

What works well

• Moving the inspector's import to frontend/src/index.css is a clean way to share Shiki highlighting, scrollbar, and spacing definitions without duplicating them.
• Centralizing xyflow overrides and Ladle story styles into theme.css (where Ladle already imports from) is the right architectural direction.
• Adding a newline at the end of theme.css fixes the pre-existing missing-newline issue.

---

Summary

The main thing to address before merging is the duplicate xyflow block still present in .ladle/ladle.css. The @tailwind double-inclusion and border-radius hardcoding are worth fixing but lower priority.

[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@4301

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/sqlite-vfs

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

@rivetkit/traces

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

@rivetkit/workflow-engine

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

@rivetkit/virtual-websocket

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: 2e00b4d