Laufwerk Studio

Studio uses React 19, TypeScript, Tailwind CSS v4, and locally owned shadcn/ui components built on Radix. Its interface follows the Laufwerk identity: original Atkinson Hyperlegible for reading and controls, Space Grotesk for headings, monochrome surfaces, plain navigation and open sections. Semantic colours identify operational states.

Source structure

• src/app.tsx: application shell and navigation.
• src/features/: run list and creation dialog, Inbox, run details, and human interactions.
• src/components/ui/: shadcn components, customised once for Laufwerk. Dialogs, alert dialogs, selects, radio groups, checkboxes and disclosures use Radix for focus, keyboard and accessibility behaviour.
• src/components/studio.tsx: shared domain presentation.
• src/run-model.ts: pure transformations of recorded runtime data.
• src/studio-data.ts and src/api.ts: live data subscription and HTTP operations.
• src/styles.css: Tailwind imports, local fonts, semantic theme tokens, base typography and reduced-motion rules. Layout and component styles use utilities; there is no parallel legacy component stylesheet.
• src/build.ts: browser JavaScript and Tailwind CSS compilation for the local CLI.

Working on Studio

Use the repository's required Bun version (at least 1.4.2). From the repository root:

bun install
bun run --cwd apps/studio check
bun run --cwd apps/studio format
bun run --cwd apps/studio format:check
bun test apps/studio/test/build.test.ts packages/cli/test/studio.test.ts

The browser scenario exercises real workflows, dialog focus containment and return, Escape dismissal, JSON validation, selects, choices, approvals, restart/reconnect, recovery, cancellation and mobile layout. Set LAUFWERK_STUDIO_SCREENSHOTS to an absolute output directory to capture the tested screens. The build test checks the shipped src/ boundary from an unrelated consumer directory.

components.json selects the shadcn radix-nova style and Lucide icons. Components originated from the official shadcn registry; their MIT licence is retained in src/components/ui/LICENSE.md. Local changes preserve the component APIs while applying Laufwerk tokens, 44px control targets, restrained surfaces and reduced motion. Add only components used by an actual screen. Review generated styles against the existing brand treatment before accepting them.

Keep buttons and form controls in components/ui; use their normal composition APIs. Put application-specific behaviour in features/. Native semantic layout elements remain appropriate for headings, navigation, forms and sections. Use fully written utility class names, including in conditional branches, so Tailwind can discover them. cn() merges conditional classes and resolves utility conflicts; Prettier sorts utility classes.

Distribution

The CLI invokes buildStudio() on the consumer's machine. The build compiles React with Bun and CSS with Tailwind's official PostCSS plugin. Consequently Tailwind, PostCSS and the native Tailwind compiler are production dependencies, while Prettier is development-only. PostCSS is pinned to the same version resolved by the Tailwind plugin to avoid incompatible duplicate plugin types.

The package ships src/, including component sources, CSS, fonts, marks and licences. Tailwind explicitly scans that directory, independent of the consumer's working directory. No Next.js, Vite server, repository-level config, website package or remote fonts are needed at runtime. The existing CLI HTTP server serves the resulting static files.

The small custom Tailwind state variants map shadcn's data-open, data-closed and data-checked utilities to Radix's data-state attributes. Motion respects the system reduced-motion preference.