feat(studio): add left sidebar with Compositions and Assets tabs

[miguel-heygen]

Summary

• Add collapsible left sidebar with Compositions and Assets tabs
• Compositions tab lists all sub-compositions with thumbnail previews and navigation
• Clicking a composition opens it in the code editor AND navigates the preview to show that composition
• Assets tab categorizes project files by type (images, fonts, media)
• Race condition guard on composition fetch with functional state update
• Thumbnail error fallback shows name initial instead of empty box

Test plan

• Sidebar opens/closes with smooth transition
• Compositions tab lists files from project API
• Clicking a composition changes the preview iframe to that composition
• Assets tab categorizes files by type

🤖 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
• feat(studio): add left sidebar with Compositions and Assets tabs #94 👈 (View in Graphite)
• 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: Clean, well-scoped PR. The sidebar structure is solid and the component decomposition (LeftSidebar → CompositionsTab + AssetsTab) is the right approach. A few things to tighten up:

---

App.tsx — file content fetch on composition select

The fetch-on-click pattern has a race condition:

setEditingFile({ path: comp, content: null });
fetch(`/api/projects/${projectId}/files/${comp}`)
  .then((r) => r.json())
  .then((data) => setEditingFile({ path: comp, content: data.content }))
  .catch(() => {});

If the user clicks two compositions quickly, the second click sets content: null but the first fetch may resolve after the second one, overwriting the correct content. Consider aborting previous fetches with AbortController, or check that path still matches when the fetch resolves.

Also: .catch(() => {}) silently swallows errors. At minimum log to console so debugging is possible.

---

CompositionsTab.tsx — thumbnail error handling

onError={(e) => {
  (e.target as HTMLImageElement).style.display = "none";
}}

This hides the image on error but leaves an empty 16x9 box. Consider showing a fallback (composition name initials, or a file icon) instead of an invisible element.

---

AssetsTab.tsx — file size info mentioned in PR description but not implemented

The PR description says "Assets tab shows project images, fonts, and media files with file size info" but the component doesn't display file sizes anywhere. Either add it or update the PR description.

---

LeftSidebar.tsx — hardcoded width

style={{ width: 240 }}

This works but consider making it a constant or CSS variable so it's easy to find if the design changes. Minor.

---

AssetsTab.tsx — inline SVG icons

The four icon variants (video, audio, image, file) are ~60 lines of inline SVG. These would be cleaner as a shared icon component or imported from @phosphor-icons/react which is already in the project deps. Not blocking but reduces duplication if more icons are needed.

---

LeftSidebar.tsx — keyboard shortcuts could conflict

Cmd+1 and Cmd+2 are commonly used by browsers (switch tabs). The e.preventDefault() will override browser behavior. Consider using a less conflicting shortcut or making it configurable.

[miguel-heygen]

Merge activity

• Mar 28, 7:59 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 28, 8:00 AM UTC: Graphite couldn't merge this pull request because a downstack PR feat(studio): add TimelineClip and thumbnail components #62 failed to merge.
• Mar 28, 5:19 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 28, 5:40 PM UTC: The Graphite merge of this pull request was cancelled.
• Mar 28, 7:55 PM UTC: @miguel-heygen merged this pull request with Graphite.