feat(studio): render queue, layout restructure, home page, hover preview

[miguel-heygen]

Summary

• Add render queue panel with progress tracking, download, and delete actions
• Restructure App layout: home page with project picker, session-based routing
• Add ExpandOnHover component for preview-on-hover interactions (uses motion/react)
• CompositionsTab now supports hover preview with expanded iframe view
• Vite config: guard setInterval cleanup to dev-only (fixes CI build timeout)
• Add favicon and update studio package deps

Test plan

• Render queue shows progress, completes, and allows download
• Home page lists projects and navigates to session view
• ExpandOnHover shows expanded preview on mouse hover with spring animation
• vite build exits cleanly (no hanging process from setInterval)

🤖 Generated with Claude Code

[miguel-heygen]

• refactor(studio): wire vite.config.ts to shared studio API module #115
• 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 👈 (View in Graphite)
• 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]

Overall: Big PR — layout restructure, render queue, home page, hover preview. The render queue hook is well-architected. The ExpandOnHover interaction is a nice touch. A few concerns:

---

useRenderQueue.ts — isRendering is stale

return {
  jobs,
  startRender,
  deleteRender,
  clearCompleted,
  isRendering: activeJobRef.current !== null,
};

activeJobRef.current is a ref, not state. When the render completes and activeJobRef.current is set to null, this return value won't trigger a re-render. Components reading isRendering will show the wrong state until something else causes a re-render. Use state instead of a ref for this value, or derive it from jobs: isRendering: jobs.some(j => j.status === "rendering").

---

useRenderQueue.ts — EventSource not cleaned up on unmount during active render

The cleanup effect:

useEffect(() => {
  return () => {
    eventSourceRef.current?.close();
  };
}, []);

This only runs on unmount. If the component re-mounts (e.g., navigating away and back), stale EventSource connections could accumulate. Also, if projectId changes mid-render, the old EventSource keeps running. Consider closing on projectId change too.

---

useRenderQueue.ts — deleteRender fires DELETE then removes from state regardless

const deleteRender = useCallback(async (jobId: string) => {
  try {
    await fetch(`/api/render/${jobId}`, { method: "DELETE" });
  } catch {
    // ignore
  }
  setJobs((prev) => prev.filter((j) => j.id !== jobId));
}, []);

If the DELETE fails (network error, 404), the job disappears from the UI but still exists on the server. Next time loadRenders runs, it'll reappear. Either keep it in the UI on failure (show an error state), or don't call loadRenders after a failed delete.

---

ExpandedPreviewIframe — offset calculation uses stale refs

const offsetX = containerRef.current
  ? (containerRef.current.clientWidth - dims.w * scale) / 2
  : 0;

This reads from containerRef.current during render, which works but won't update reactively. The scale state updates from the ResizeObserver, but offsetX/offsetY are recalculated on every render, not just when the container resizes. Consider storing offset in state alongside scale inside the ResizeObserver callback.

---

ExpandedPreviewIframe — polling for __player with setInterval

const interval = setInterval(() => {
  // ... 25 attempts at 200ms = 5 seconds max
}, 200);

This is a lot of polling. Consider using a MutationObserver on the iframe or listening for a custom event from the runtime instead. If the composition takes >5s to load GSAP, the preview silently fails.

---

CompositionsTab.tsx — hover preview spawns iframe per card

When hovering a composition, a full iframe loads with the preview URL. If the user mouses across several cards quickly, multiple iframes spawn and load simultaneously. Consider debouncing the hover or reusing a single preview iframe that repositions.

---

App.tsx — PR adds motion dependency for ExpandOnHover

The motion package (motion/react, formerly framer-motion) is a significant dependency addition for a single hover animation. The expand-on-hover effect could likely be done with CSS transitions + a portal, avoiding the extra ~40KB. If motion is planned for more features, fine — but if it's just for this one interaction, it's heavy.

---

App.tsx — inline SVG logo repeated 3 times

The HyperFrames logo SVG appears inline in the favicon, the header, and the empty state. Extract to a shared component.

---

RenderQueueItem.tsx — formatTimeAgo doesn't update

The "just now" / "5m ago" text is calculated once on render and never updates. If the user leaves the renders tab open, timestamps go stale. Consider a small interval to refresh, or use relative timestamps that update on visibility change.

[vanceingalls]

The isRendering stale ref is the only one that will cause a visible bug — the Export MP4 button will stay disabled (or enabled) at the wrong time because the ref change doesn't trigger a re-render.