refactor(studio): wire vite.config.ts to shared studio API module

[miguel-heygen]

Summary

• Replaces ~850 lines of inline route handlers in vite.config.ts with the shared createStudioApi(adapter) module
• Implements StudioApiAdapter for the Vite dev server context (SSR-loaded bundler/linter, producer HTTP proxy, Puppeteer thumbnails)
• Bridges Hono fetch() to Vite's Connect middleware with streaming support for SSE

Now both consumers (CLI + studio) use the same shared API module, ensuring feature parity.

Test plan

• pnpm --filter @hyperframes/studio dev starts correctly
• Home page shows project grid with thumbnails
• Preview plays with correct fonts/animations
• Sub-composition drill-down works
• Lint modal shows findings
• File read/write works in code editor
• Render queue works (requires producer server)

🤖 Generated with Claude Code

[miguel-heygen]

• refactor(studio): wire vite.config.ts to shared studio API module #115 👈 (View in Graphite)
• refactor(core): extract shared studio API module #113
• fix(core): strip template wrapper before linting composition files #111
• fix(cli): align render output naming and add WebM support to studioServer #109
• feat(studio): render queue, layout restructure, home page, hover preview #95
• feat(studio): add left sidebar with Compositions and Assets tabs #94
• feat(studio): add Edit Range toolbar with Copy to Agent #65
• refactor(studio): update layout, config, and remove agent activity tracking #64
• refactor(studio): improve Timeline, PlayerControls, and player hook #63
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[vanceingalls]

Review: refactor(studio): wire vite.config.ts to shared studio API module

What was done well

This is a clean, impactful refactor. The PR replaces ~727 lines of inline route-handler code with a well-structured adapter pattern that delegates to the shared createStudioApi(adapter) module. Key strengths:

• Excellent separation of concerns. Host-specific logic (Puppeteer browser management, Vite SSR module loading, producer-server proxying) stays in vite.config.ts via the StudioApiAdapter, while routing, path validation (isSafePath), file walking, sub-composition HTML building, and MIME detection all live in the shared module where they belong.

• The Hono-to-Connect bridge is clean. bridgeHonoResponse() correctly streams the response body (critical for SSE progress events) and handles the no-body case. The request-side bridge properly reads the body for non-GET/HEAD methods and forwards headers.

• The /api prefix stripping is correct. url.pathname = url.pathname.slice(4) strips /api so that shared routes like /projects, /projects/:id/preview, etc. match correctly. This was verified against the route definitions.

• Lazy initialization pattern is preserved. Both the bundler (getBundler) and the Hono app (getApi) are lazily loaded via Vite's SSR module loader, which correctly resolves TypeScript imports for @hyperframes/core/studio-api and @hyperframes/core/compiler.

• CI is fully green -- typecheck, lint, format, build, and all test suites pass.

Issues

None critical or blocking.

Minor observations / suggestions

1. rendersDir ignores its argument. The interface defines rendersDir(project: ResolvedProject): string but the adapter implements rendersDir: () => resolve(dataDir, "../renders"). This works due to TypeScript's structural typing (fewer params assignable to more params), and in this context all projects share the same renders directory, so it is correct behavior. Just noting it as something future readers might find surprising -- a comment like // All projects share a single renders dir in dev mode would help.

2. _api local type annotation. let _api: { fetch: (req: Request) => Promise<Response> } | null = null is a structural duck-type for Hono. This is a fine choice since it avoids importing Hono directly into the Vite config (Hono is loaded via SSR), but if @hyperframes/core/studio-api ever exported a StudioApi type alias, it would be cleaner to use that.

3. Thumbnail caching moved to the shared module. The old code cached thumbnails to disk in the Vite handler; now the shared thumbnail.ts route handles the disk cache while the adapter's generateThumbnail just does the Puppeteer screenshot. This is a good separation. The adapter's in-flight dedup via _thumbnailInflight correctly prevents parallel Puppeteer pages for the same frame, and the shared route handles the disk layer. No issue here, just confirming it was reviewed.

4. Body reading for POST/PUT. The body is read as a UTF-8 string for all non-GET/HEAD requests. This is fine for the current API surface (JSON bodies and text file content), but would need revisiting if binary uploads (e.g., asset upload) are added in the future.

5. Error handling in bridgeHonoResponse. The catch {} on reader errors is appropriate for client disconnects, but swallows all errors silently. Consider logging at debug level if you add structured logging later.

Verdict

Approve. This is a well-executed refactor that achieves its stated goal -- both CLI and studio now consume the same shared API module. The adapter cleanly encapsulates Vite-specific concerns, the bridge handles streaming correctly, and no functionality appears to be lost or broken. The observations above are all suggestions for future improvement, not blockers.

[vanceingalls]

Review: refactor(studio): wire vite.config.ts to shared studio API module

Clean extraction. The Vite config correctly consumes the shared API module via SSR lazy-loading. ~727 lines of inline route handlers replaced with a ~308-line adapter.

What looks good

• Request/response bridging handles both streaming (SSE) and non-streaming responses correctly via bridgeHonoResponse
• Adapter implementation delegates to createStudioApi(adapter) with proper duck-typing of Hono's .fetch() — no unnecessary indirection
• No breaking changes — routes, paths, and behavior are functionally equivalent to the old inline implementation
• CI passes (typecheck, lint, build, all test suites)

Minor suggestions (non-blocking)

• rendersDir parameter could be derived from projectDir instead of passed separately
• Silent error swallowing in the bridge function could log to debug
• Body-reading assumes text-only — binary payloads would need .arrayBuffer()

Verdict

Approved. No critical or important issues.

[miguel-heygen]

Merge activity

• Mar 28, 9:30 PM UTC: @miguel-heygen merged this pull request with Graphite.