fix(studio): address PR review — CLI adapter, path guard, a11y, tests, settings sync

- Wire `composition` → `entryFile` in CLI studio adapter (studioServer.ts)
  so `hyperframes preview` renders the correct composition, not always index.html
- Add path-traversal guard: reject composition paths that resolve outside projectDir
- Add `aria-label` to the icon-only render button for screen readers
- Add 4 tests: forwarding, empty/missing → undefined, path-traversal → 400
- Persist render settings (format/quality/fps) to localStorage so comp card
  buttons use the same settings as the Export panel

Author: miguel-heygen

packages/cli/src/server/studioServer.ts

@@ -263,6 +263,7 @@ export function createStudioServer(options: StudioServerOptions): StudioServer {
             format: opts.format,
             outputResolution: opts.outputResolution,
             ...(manualEditsRenderScript ? { renderBodyScripts: [manualEditsRenderScript] } : {}),
+            ...(opts.composition ? { entryFile: opts.composition } : {}),
           });
           const startTime = Date.now();
           const onProgress = (j: { progress: number; currentStage?: string }) => {

packages/core/src/studio-api/routes/render.test.ts

@@ -117,6 +117,83 @@ describe("POST /projects/:id/render — outputResolution forwarding", () => {
   });
 });
 
+describe("POST /projects/:id/render — composition forwarding", () => {
+  it("forwards a valid composition path to the adapter", async () => {
+    const spy = vi.fn();
+    const { app, cleanup } = buildApp(spy);
+    try {
+      const res = await app.request("http://localhost/projects/demo/render", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          fps: 30,
+          quality: "standard",
+          format: "mp4",
+          composition: "compositions/intro.html",
+        }),
+      });
+      expect(res.status).toBe(200);
+      expect(spy).toHaveBeenCalledOnce();
+      expect(spy.mock.calls[0][0].composition).toBe("compositions/intro.html");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("omits composition when not specified", async () => {
+    const spy = vi.fn();
+    const { app, cleanup } = buildApp(spy);
+    try {
+      const res = await app.request("http://localhost/projects/demo/render", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ fps: 30, quality: "standard", format: "mp4" }),
+      });
+      expect(res.status).toBe(200);
+      expect(spy.mock.calls[0][0].composition).toBeUndefined();
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("omits composition when empty string", async () => {
+    const spy = vi.fn();
+    const { app, cleanup } = buildApp(spy);
+    try {
+      const res = await app.request("http://localhost/projects/demo/render", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ fps: 30, quality: "standard", format: "mp4", composition: "" }),
+      });
+      expect(res.status).toBe(200);
+      expect(spy.mock.calls[0][0].composition).toBeUndefined();
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("rejects path-traversal attempts with 400", async () => {
+    const spy = vi.fn();
+    const { app, cleanup } = buildApp(spy);
+    try {
+      const res = await app.request("http://localhost/projects/demo/render", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          fps: 30,
+          quality: "standard",
+          format: "mp4",
+          composition: "../../../etc/passwd",
+        }),
+      });
+      expect(res.status).toBe(400);
+      expect(spy).not.toHaveBeenCalled();
+    } finally {
+      cleanup();
+    }
+  });
+});
+
 describe("POST /projects/:id/render — fps wire format", () => {
   // The fps fraction-syntax feature accepts JSON `number` (integer fps) and
   // JSON `string` (ffmpeg-style rational) on the wire, normalizing both to

packages/core/src/studio-api/routes/render.ts

@@ -1,7 +1,7 @@
 import type { Hono } from "hono";
 import { streamSSE } from "hono/streaming";
 import { existsSync, readFileSync, mkdirSync, unlinkSync, readdirSync, statSync } from "node:fs";
-import { join } from "node:path";
+import { join, resolve, sep } from "node:path";
 import type { StudioApiAdapter, RenderJobState } from "../types.js";
 import { VALID_CANVAS_RESOLUTIONS, parseFps, type CanvasResolution } from "../../core.types.js";
 
@@ -77,10 +77,14 @@ export function registerRenderRoutes(api: Hono, adapter: StudioApiAdapter): void
     const outputResolution = VALID_RESOLUTIONS.has(body.resolution ?? "")
       ? (body.resolution as CanvasResolution)
       : undefined;
-    const composition =
-      typeof body.composition === "string" && body.composition.length > 0
-        ? body.composition
-        : undefined;
+    let composition: string | undefined;
+    if (typeof body.composition === "string" && body.composition.length > 0) {
+      const resolved = resolve(project.dir, body.composition);
+      if (!resolved.startsWith(resolve(project.dir) + sep)) {
+        return c.json({ error: "composition path must be within the project directory" }, 400);
+      }
+      composition = body.composition;
+    }
 
     const now = new Date();
     const datePart = now.toISOString().slice(0, 10);

packages/studio/src/components/StudioLeftSidebar.tsx

@@ -6,6 +6,7 @@ import { isMediaFile } from "../utils/mediaTypes";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useStudioContext } from "../contexts/StudioContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
+import { getPersistedRenderSettings } from "./renders/RenderQueue";
 
 export interface StudioLeftSidebarProps {
   leftSidebarRef: RefObject<LeftSidebarHandle | null>;
@@ -48,7 +49,8 @@ export function StudioLeftSidebar({
   const handleRenderComposition = useCallback(
     async (comp: string) => {
       await waitForPendingDomEditSaves();
-      await renderQueue.startRender({ composition: comp });
+      const { format, quality, fps } = getPersistedRenderSettings();
+      await renderQueue.startRender({ composition: comp, format, quality, fps });
     },
     [renderQueue, waitForPendingDomEditSaves],
   );

packages/studio/src/components/renders/RenderQueue.tsx

@@ -1,7 +1,34 @@
-import { memo, useState, useRef, useEffect } from "react";
+import { memo, useState, useRef, useEffect, useCallback } from "react";
 import { RenderQueueItem } from "./RenderQueueItem";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 
+const RENDER_SETTINGS_KEY = "hf-studio-render-settings";
+
+interface PersistedRenderSettings {
+  format: "mp4" | "webm" | "mov";
+  quality: "draft" | "standard" | "high";
+  fps: 24 | 30 | 60;
+}
+
+export function getPersistedRenderSettings(): PersistedRenderSettings {
+  try {
+    const raw = localStorage.getItem(RENDER_SETTINGS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      return {
+        format: ["mp4", "webm", "mov"].includes(parsed.format) ? parsed.format : "mp4",
+        quality: ["draft", "standard", "high"].includes(parsed.quality)
+          ? parsed.quality
+          : "standard",
+        fps: [24, 30, 60].includes(parsed.fps) ? parsed.fps : 30,
+      };
+    }
+  } catch {
+    /* ignore */
+  }
+  return { format: "mp4", quality: "standard", fps: 30 };
+}
+
 export interface CompositionDimensions {
   width: number;
   height: number;
@@ -198,10 +225,19 @@ function FormatExportButton({
   isRendering: boolean;
   compositionDimensions?: CompositionDimensions | null;
 }) {
-  const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
-  const [quality, setQuality] = useState<"draft" | "standard" | "high">("standard");
+  const persisted = getPersistedRenderSettings();
+  const [format, setFormat] = useState<"mp4" | "webm" | "mov">(persisted.format);
+  const [quality, setQuality] = useState<"draft" | "standard" | "high">(persisted.quality);
   const [resolution, setResolution] = useState<ResolutionPreset | "auto">("auto");
-  const [fps, setFps] = useState<24 | 30 | 60>(30);
+  const [fps, setFps] = useState<24 | 30 | 60>(persisted.fps);
+
+  const persistSettings = useCallback((f: typeof format, q: typeof quality, fp: typeof fps) => {
+    try {
+      localStorage.setItem(RENDER_SETTINGS_KEY, JSON.stringify({ format: f, quality: q, fps: fp }));
+    } catch {
+      /* ignore */
+    }
+  }, []);
 
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
@@ -228,7 +264,11 @@ function FormatExportButton({
       {showQuality && (
         <select
           value={quality}
-          onChange={(e) => setQuality(e.target.value as "draft" | "standard" | "high")}
+          onChange={(e) => {
+            const v = e.target.value as "draft" | "standard" | "high";
+            setQuality(v);
+            persistSettings(format, v, fps);
+          }}
           disabled={isRendering}
           title={QUALITY_OPTIONS.find((q) => q.value === quality)?.title}
           className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
@@ -242,7 +282,11 @@ function FormatExportButton({
       )}
       <select
         value={fps}
-        onChange={(e) => setFps(Number(e.target.value) as 24 | 30 | 60)}
+        onChange={(e) => {
+          const v = Number(e.target.value) as 24 | 30 | 60;
+          setFps(v);
+          persistSettings(format, quality, v);
+        }}
         disabled={isRendering}
         title="Frames per second"
         className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
@@ -253,7 +297,11 @@ function FormatExportButton({
       </select>
       <select
         value={format}
-        onChange={(e) => setFormat(e.target.value as "mp4" | "webm" | "mov")}
+        onChange={(e) => {
+          const v = e.target.value as "mp4" | "webm" | "mov";
+          setFormat(v);
+          persistSettings(v, quality, fps);
+        }}
         disabled={isRendering}
         className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
       >

packages/studio/src/components/sidebar/CompositionsTab.tsx

@@ -210,6 +210,7 @@ function CompCard({
         <button
           type="button"
           title={isRendering ? "Rendering..." : `Render ${name}`}
+          aria-label={isRendering ? "Rendering..." : `Render ${name}`}
           disabled={isRendering}
           onClick={(e) => {
             e.stopPropagation();