feat: add ladle

[jog1t]

Description

Added Ladle component development environment to the frontend. This PR:

1. Adds Ladle as a dependency to the frontend package
2. Creates a Docker setup for building and serving the Ladle environment
3. Configures Railway deployment files for PR and staging environments
4. Adds a sample workflow component story
5. Updates .gitignore to exclude the Ladle build directory
6. Adds npm scripts for Ladle development and building

Ladle provides an isolated environment for developing and testing UI components, making it easier to build and maintain a consistent component library.

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested locally by running the Ladle development server and verifying that components can be viewed and interacted with in isolation.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

[railway-app]

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

Service	Status	Web	Updated (UTC)
website	😴 Sleeping (View Logs)	Web	Feb 19, 2026 at 2:29 am
frontend-cloud	❌ Build Failed (View Logs)	Web	Feb 16, 2026 at 4:39 pm
frontend-inspector	❌ Build Failed (View Logs)	Web	Feb 16, 2026 at 4:39 pm
ladle	❌ Build Failed (View Logs)	Web	Feb 16, 2026 at 4:39 pm
mcp-hub	✅ Success (View Logs)	Web	Feb 10, 2026 at 9:04 pm

[jog1t]

• feat: add xyflow #4170 : 2 dependent PRs (#4172 , #4211 )
• feat: add ladle #4168 👈 (View in Graphite)
• 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.

[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.

[claude]

PR Review: Add Ladle Component Development Environment

Overview

This PR adds Ladle as a component development environment for the frontend, enabling isolated component development similar to Storybook but lighter weight. The implementation includes Docker setup, Railway deployment configuration, and foundational story infrastructure.

---

✅ Strengths

1. Good code organization: The extraction of shared Vite config into vite.base.config.ts reduces duplication and makes maintenance easier
2. Proper Docker setup: The Ladle Dockerfile follows the same multi-stage pattern as the other frontend Dockerfiles
3. Appropriate caching: Uses proper cache IDs for pnpm store and turbo builds
4. Security headers: Caddyfile includes appropriate security headers (X-Frame-Options, X-Content-Type-Options, etc.)
5. Railway integration: Proper health check endpoint and deployment configuration

---

🔍 Issues & Concerns

1. Incomplete Story Implementation (frontend/src/components/workflow/workflow.stories.tsx:1)

export const World = () => <div>World</div>;

This appears to be a placeholder/stub. The story:

• Doesn't actually render a workflow component
• Has no props, variants, or documentation
• Doesn't demonstrate the actual component library

Recommendation: Either implement a proper workflow story or remove this file if it's just for testing the infrastructure.

2. Missing Ladle Configuration

The .ladle/config.mjs only specifies the Vite config path. Consider adding:

• Story globs if you want to restrict which files are included
• Port configuration for consistency
• Base URL configuration if needed
• Theme customization

Example:

export default {
  viteConfig: ".ladle/vite.config.ts",
  stories: "src/**/*.stories.{tsx,jsx}",
  port: 61000, // or whatever port you prefer
};

3. Dockerfile Duplication (frontend/ladle.Dockerfile)

While the Ladle Dockerfile is similar to cloud.Dockerfile and inspector.Dockerfile, there are now three files with nearly identical builder stages. Consider:

• Creating a shared base builder stage
• Or documenting why the duplication is necessary

4. Railway Configuration Question (frontend/railway.ladle.toml:3)

watchPatterns = ["/frontend/**", "/pnpm-lock.yaml"]

The Ladle build only watches /frontend/** but the Dockerfile copies many more directories (rivetkit-typescript, engine/sdks, shared, examples). If any of these dependencies change, the Ladle environment won't rebuild automatically.

Compare to inspector.Dockerfile which has the same dependencies but was removed.

Recommendation: Either:

• Add all dependency paths to watchPatterns: ["/frontend/**", "/rivetkit-typescript/**", "/engine/sdks/typescript/**", "/shared/typescript/**", "/examples/**", "/pnpm-lock.yaml"]
• Or document why Ladle doesn't need to watch these

5. Missing Documentation

Consider adding:

• README or docs explaining how to use Ladle locally and what it's for
• Instructions for creating new stories
• Documentation about the Railway deployment URL for Ladle

6. Deleted File Without Explanation (railway.cloud-staging.toml)

The frontend/railway.cloud-staging.toml was deleted. Is this intentional? If so:

• Is cloud-staging being retired?
• Is this being replaced by the Ladle environment?
• Should this be a separate PR?

Recommendation: Add context to the PR description about why this file was removed.

---

🔒 Security

✅ No security concerns identified:

• Proper security headers in Caddyfile
• No sensitive data exposure
• Appropriate cache control headers

---

⚡ Performance

✅ Performance looks good:

• Proper Docker layer caching
• Gzip compression enabled
• Aggressive caching for static assets (1 year)
• No-cache for HTML files

---

🧪 Testing

⚠️ Testing concerns:

1. The PR description mentions testing locally, but:
   • There's only one placeholder story
   • No evidence of actual component stories being tested
   • The story that exists doesn't test real components

Recommendation: Add at least one real component story to validate the entire pipeline works correctly.

---

📋 Additional Suggestions

1. turbo.json configuration (turbo.json:38-46): Consider if vite.base.config.ts and .ladle/ should be in the inputs array since they affect the Ladle build

2. Package.json script naming: The scripts dev:ladle and build:ladle are consistent with other frontend scripts ✅

3. Ladle CSS (frontend/.ladle/ladle.css): The Tailwind setup looks correct and imports the theme properly ✅

---

🎯 Summary

This PR provides solid infrastructure for Ladle integration, but the actual component story library is not yet implemented. The Docker and deployment setup is well-structured, but there are questions about:

• The removal of cloud-staging configuration
• Railway watch patterns missing dependencies
• The placeholder story that should be replaced with real examples

Recommendation:

• Clarify the cloud-staging removal
• Add comprehensive watch patterns to Railway config
• Either implement proper stories or mark this as infrastructure-only
• Add documentation for developers who will use Ladle

Overall, this is a good foundation but needs completion before it provides real value to the team.

[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
• custom-serverless-vercel
• example-elysia
• example-elysia-vercel
• 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-hono-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region-vercel
• multiplayer-game
• 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
• example-sqlite-raw-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@4168

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/sqlite-vfs

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

@rivetkit/traces

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

@rivetkit/workflow-engine

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

@rivetkit/virtual-websocket

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: e03420d