From 4fe33905258516276857a3a4bbea443b98a76ced Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Tue, 8 Sep 2026 15:57:17 -0400
Subject: [PATCH] feat(studio): the Renders panel on the shared primitives

The four native selects become the shared Select, so no OS popup is left in
the panel and the four controls read as the same control as everything
around them. Disabled options survive the move: SelectOption gains a
disabled flag, which is what keeps a resolution the composition cannot
reach out of the keyboard's path while its label still explains why.

Export drops its own type size. cn resolved that override by dropping the
size recipe's step, which is what left the panel Export a type step below
the header's; the computed-style table now reads 28px / 6px / 12px for
both. Its two per-row siblings become IconButton with a Tooltip carrying
what the title attribute used to say.

The panel's colours move to the semantic tokens.
---
 .../components/renders/RenderQueue.test.tsx   | 156 +++++++++++++--
 .../src/components/renders/RenderQueue.tsx    | 188 +++++++++---------
 .../components/renders/RenderQueueItem.tsx    | 133 +++++++------
 packages/studio/src/components/ui/Select.tsx  |   9 +
 4 files changed, 310 insertions(+), 176 deletions(-)

diff --git a/packages/studio/src/components/renders/RenderQueue.test.tsx b/packages/studio/src/components/renders/RenderQueue.test.tsx
index dee603c965..f949a05ee2 100644
--- a/packages/studio/src/components/renders/RenderQueue.test.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.test.tsx
@@ -4,6 +4,10 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { RenderQueue } from "./RenderQueue";
+import { getPersistedRenderSettings } from "./renderSettings";
+import { buttonBase, buttonSizes, buttonVariants, cn } from "../ui";
+import { isTypingTarget } from "../../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 
 // Encoder availability arrives as a prop (useRenderQueue owns the probe), so
@@ -18,6 +22,9 @@ let root: Root | null = null;
 beforeEach(() => {
   ffmpegStatus = { ok: true };
   recheck.mockClear();
+  // The format, frame-rate and quality controls write through to the real
+  // store, so each case has to start from the shipped defaults.
+  localStorage.clear();
 });
 
 afterEach(() => {
@@ -26,7 +33,10 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
+function mountRenderQueue(
+  onStartRender: ReturnType<typeof vi.fn>,
+  compositionDimensions = { width: 1920, height: 1080 },
+) {
   const host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
@@ -39,7 +49,7 @@ function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
         onClearCompleted={vi.fn()}
         onStartRender={onStartRender}
         isRendering={false}
-        compositionDimensions={{ width: 1920, height: 1080 }}
+        compositionDimensions={compositionDimensions}
         ffmpeg={ffmpegStatus}
         ffmpegChecking={false}
         onRecheckFfmpeg={recheck}
@@ -49,37 +59,141 @@ function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
   return host;
 }
 
-describe("RenderQueue resolution submission", () => {
-  it("submits the canonical landscape 4K preset selected by the user", () => {
+/** Base UI moves focus a task later than React renders; happy-dom is no faster. */
+const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));
+
+function fire(el: Element, type: string, key?: string) {
+  const event =
+    key === undefined
+      ? new MouseEvent(type, { bubbles: true })
+      : new KeyboardEvent(type, { bubbles: true, key });
+  act(() => void el.dispatchEvent(event));
+}
+
+function triggerFor(host: HTMLElement, label: string): HTMLElement {
+  const trigger = host.querySelector<HTMLElement>(`[role="combobox"][aria-label="${label}"]`);
+  if (!trigger) throw new Error(`no select labelled ${label}`);
+  return trigger;
+}
+
+/**
+ * Opens a Select and walks the highlight down `steps` items before committing,
+ * the way a keyboard user does. The trigger is a real `<button>`, so Space
+ * reaches it as keydown, keyup and then a click the browser synthesises;
+ * happy-dom does not synthesise that click, so it is dispatched here.
+ */
+async function chooseByArrowing(trigger: HTMLElement, steps: number) {
+  fire(trigger, "keydown", " ");
+  fire(trigger, "keyup", " ");
+  act(() => trigger.click());
+  await settle();
+  for (let i = 0; i < steps; i += 1) {
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+  }
+  fire(document.activeElement ?? document.body, "keydown", "Enter");
+  await settle();
+}
+
+function exportButtonIn(host: HTMLElement): HTMLButtonElement {
+  const button = host.querySelector<HTMLButtonElement>('[data-testid="renders-export"]');
+  if (!button) throw new Error("export button did not render");
+  return button;
+}
+
+describe("RenderQueue controls", () => {
+  it("has no native select left in the panel", () => {
+    // R8. The four format / resolution / frame-rate / quality controls are the
+    // shared Select now; a native one would bring back an OS popup that no
+    // token can reach.
+    expect(mountRenderQueue(vi.fn()).querySelector("select")).toBeNull();
+  });
+
+  it("wears exactly the header Export's recipe, plus the full width", () => {
+    // AE3. Set equality, not "contains": the bug this replaces was an extra
+    // `text-[11px]` on this button, which `cn` resolved by dropping the size
+    // recipe's `text-step-12` and left the two Exports a type step apart.
+    const shared = cn(buttonBase, buttonVariants.primary, buttonSizes.md);
+    const classes = new Set(exportButtonIn(mountRenderQueue(vi.fn())).className.split(/\s+/));
+
+    expect(classes).toEqual(new Set([...shared.split(/\s+/), "w-full"]));
+  });
+
+  it("classifies the format Select the way it classified the native one (KTD13)", async () => {
+    const host = mountRenderQueue(vi.fn());
+    const reference = document.createElement("select");
+    document.body.append(reference);
+    await settle();
+
+    const trigger = triggerFor(host, "Format");
+
+    // Both true, not merely equal: two falses would agree and prove nothing.
+    expect(isTypingTarget(reference)).toBe(true);
+    expect(shouldIgnorePlaybackShortcutTarget(reference)).toBe(true);
+    expect(isTypingTarget(trigger)).toBe(isTypingTarget(reference));
+    expect(shouldIgnorePlaybackShortcutTarget(trigger)).toBe(
+      shouldIgnorePlaybackShortcutTarget(reference),
+    );
+  });
+
+  it("submits the canonical landscape 4K preset selected by the user", async () => {
     const onStartRender = vi.fn();
     const host = mountRenderQueue(onStartRender);
-    const resolutionSelect = [...host.querySelectorAll("select")].find((select) =>
-      [...select.options].some((option) => option.textContent?.startsWith("4K")),
-    );
-    if (!resolutionSelect) throw new Error("resolution selector did not render");
 
+    // Auto, 1080p, 4K: two steps down from the default.
+    await chooseByArrowing(triggerFor(host, "Resolution"), 2);
     act(() => {
-      resolutionSelect.value = "4k";
-      resolutionSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    const exportButton = [...host.querySelectorAll("button")].find(
-      (button) => button.textContent === "Export",
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+  });
+
+  it("refuses a resolution the composition cannot reach, and says why", async () => {
+    // 1080p on a 1280x720 comp is a 1.5x scale, which the producer rejects at
+    // render time. The option stays listed, because its label is where the
+    // reason lives, but the keyboard cannot commit it: highlighting it and
+    // pressing Enter leaves the resolution where it was.
+    const onStartRender = vi.fn();
+    const host = mountRenderQueue(onStartRender, { width: 1280, height: 720 });
+    const trigger = triggerFor(host, "Resolution");
+
+    fire(trigger, "keydown", " ");
+    fire(trigger, "keyup", " ");
+    act(() => trigger.click());
+    await settle();
+    const blocked = [...document.querySelectorAll('[role="option"]')].filter((option) =>
+      option.hasAttribute("data-disabled"),
     );
-    if (!exportButton) throw new Error("export button did not render");
+    expect(blocked).toHaveLength(1);
+    expect(blocked[0]?.textContent).toContain("not an integer scale of 1280×720");
+
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Enter");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Escape");
+    await settle();
     act(() => {
-      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30);
   });
-});
 
-function exportButtonIn(host: HTMLElement): HTMLButtonElement {
-  const button = [...host.querySelectorAll("button")].find((b) => b.textContent === "Export");
-  if (!button) throw new Error("export button did not render");
-  return button;
-}
+  it("persists a changed format as the literal union value", async () => {
+    const host = mountRenderQueue(vi.fn());
+
+    // MP4, MOV, WebM: one step down commits "mov", not the label "MOV (ProRes)".
+    await chooseByArrowing(triggerFor(host, "Format"), 1);
+
+    expect(getPersistedRenderSettings()).toEqual({
+      format: "mov",
+      quality: "standard",
+      fps: 30,
+    });
+  });
+});
 
 describe("RenderQueue FFmpeg gate", () => {
   it("refuses Export and shows the install command when the server reports no FFmpeg", () => {
diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index 40082ba340..307185d831 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -5,6 +5,9 @@ import { RenderQueueItem } from "./RenderQueueItem";
 import { FfmpegRequiredNotice } from "./FfmpegRequiredNotice";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Select, type SelectOption } from "../ui/Select";
+import { Tooltip } from "../ui/Tooltip";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
@@ -207,7 +210,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
         onFocus={show}
         onBlur={hide}
         onClick={() => setOpen((prev) => !prev)}
-        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
+        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-text-5 hover:text-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent"
       >
         <svg
           width="12"
@@ -232,17 +235,17 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
             role="tooltip"
             onPointerEnter={show}
             onPointerLeave={hide}
-            className="fixed w-52 p-2 rounded-sm bg-panel-input border border-neutral-700 shadow-lg z-200"
+            className="fixed w-52 p-2 rounded-sm bg-input border border-border-input shadow-menu z-200"
             style={{ left: position?.left ?? -9999, top: position?.top ?? -9999 }}
           >
-            <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
-            <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
-            <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
+            <p className="text-step-10 font-semibold text-text-1 mb-0.5">{info.label}</p>
+            <p className="text-step-9 text-text-3 leading-tight">{info.desc}</p>
+            <div className="mt-1.5 pt-1.5 border-t border-border">
               {(["mp4", "mov", "webm"] as const)
                 .filter((f) => f !== format)
                 .map((f) => (
-                  <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
-                    <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
+                  <p key={f} className="text-step-9 text-text-4 leading-relaxed">
+                    <span className="text-text-3 font-medium">{FORMAT_INFO[f].label}</span>
                     {" — "}
                     {FORMAT_INFO[f].desc}
                   </p>
@@ -255,14 +258,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   );
 }
 
-const QUALITY_OPTIONS: {
-  value: "draft" | "standard" | "high";
-  label: string;
-  title: string;
-}[] = [
-  { value: "draft", label: "Draft", title: "Fast render, smaller file" },
-  { value: "standard", label: "Standard", title: "Good quality, balanced file size" },
-  { value: "high", label: "High Quality", title: "Best quality, larger file" },
+const FORMAT_OPTIONS: SelectOption[] = [
+  { value: "mp4", label: "MP4" },
+  { value: "mov", label: "MOV (ProRes)" },
+  { value: "webm", label: "WebM" },
+];
+
+const QUALITY_OPTIONS: SelectOption[] = [
+  { value: "draft", label: "Draft" },
+  { value: "standard", label: "Standard" },
+  { value: "high", label: "High Quality" },
+];
+
+const FPS_OPTIONS: SelectOption[] = [
+  { value: "24", label: "24 fps" },
+  { value: "30", label: "30 fps" },
+  { value: "60", label: "60 fps" },
 ];
 
 function formatEta(ms: number): string {
@@ -302,9 +313,6 @@ function FormatExportButton({
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
 
-  const selectCls =
-    "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-hidden cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
-
   return (
     <div className="flex flex-col gap-3">
       {missingFfmpeg && (
@@ -317,79 +325,63 @@ function FormatExportButton({
       <div className="grid grid-cols-2 gap-2">
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
-            <span className="text-[10px] text-panel-text-4">Format</span>
+            <span className="text-step-10 text-text-4">Format</span>
             <FormatInfoTooltip format={format} />
           </div>
-          <select
+          <Select
+            label="Format"
             value={format}
-            onChange={(e) => {
-              const v = e.target.value as "mp4" | "webm" | "mov";
+            options={FORMAT_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = next as "mp4" | "webm" | "mov";
               setFormat(v);
               persistRenderSettings(v, quality, fps);
             }}
-            disabled={isRendering}
-            className={selectCls}
-          >
-            <option value="mp4">MP4</option>
-            <option value="mov">MOV (ProRes)</option>
-            <option value="webm">WebM</option>
-          </select>
+          />
         </div>
         <div className="flex flex-col gap-1">
-          <span className="text-[10px] text-panel-text-4">Resolution</span>
-          <select
+          <span className="text-step-10 text-text-4">Resolution</span>
+          <Select
+            label="Resolution"
             value={resolution}
-            onChange={(e) => setResolution(e.target.value as RenderScale)}
+            options={SCALE_OPTION_ORDER.map((value) => ({
+              value,
+              label: scaleOptionLabel(value, compositionDimensions),
+              disabled: !scaleApplies(value, compositionDimensions),
+            }))}
             disabled={isRendering}
-            className={selectCls}
-          >
-            {SCALE_OPTION_ORDER.map((value) => (
-              <option
-                key={value}
-                value={value}
-                disabled={!scaleApplies(value, compositionDimensions)}
-              >
-                {scaleOptionLabel(value, compositionDimensions)}
-              </option>
-            ))}
-          </select>
+            onCommit={(next) => setResolution(next as RenderScale)}
+          />
         </div>
         <div className="flex flex-col gap-1">
-          <span className="text-[10px] text-panel-text-4">Frame rate</span>
-          <select
-            value={fps}
-            onChange={(e) => {
-              const v = Number(e.target.value) as 24 | 30 | 60;
+          <span className="text-step-10 text-text-4">Frame rate</span>
+          <Select
+            label="Frame rate"
+            value={String(fps)}
+            options={FPS_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = Number(next) as 24 | 30 | 60;
               setFps(v);
               persistRenderSettings(format, quality, v);
             }}
-            disabled={isRendering}
-            className={selectCls}
-          >
-            <option value={24}>24 fps</option>
-            <option value={30}>30 fps</option>
-            <option value={60}>60 fps</option>
-          </select>
+          />
         </div>
         {showQuality && (
           <div className="flex flex-col gap-1">
-            <span className="text-[10px] text-panel-text-4">Quality</span>
-            <select
+            <span className="text-step-10 text-text-4">Quality</span>
+            <Select
+              label="Quality"
               value={quality}
-              onChange={(e) => {
-                const v = e.target.value as "draft" | "standard" | "high";
+              options={QUALITY_OPTIONS}
+              disabled={isRendering}
+              onCommit={(next) => {
+                const v = next as "draft" | "standard" | "high";
                 setQuality(v);
                 persistRenderSettings(format, v, fps);
               }}
-              disabled={isRendering}
-              className={selectCls}
-            >
-              {QUALITY_OPTIONS.map((q) => (
-                <option key={q.value} value={q.value}>
-                  {q.label}
-                </option>
-              ))}
-            </select>
+            />
           </div>
         )}
       </div>
@@ -408,12 +400,15 @@ function FormatExportButton({
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
           void onStartRender(format, quality, outputResolution, fps);
         }}
-        className="w-full text-[11px] font-semibold"
+        // Width only. A type size or a weight here would win the merge against
+        // the size recipe and leave this Export a step away from the header's
+        // (AE3), which is exactly what it used to do.
+        className="w-full"
       >
         {isRendering ? "Rendering…" : "Export"}
       </Button>
       {lastRenderDurationMs !== undefined && !isRendering && (
-        <p className="text-[9px] text-panel-text-5 text-center -mt-1.5">
+        <p className="text-step-9 text-text-5 text-center -mt-1.5">
           Last render took {formatEta(lastRenderDurationMs)}
         </p>
       )}
@@ -455,7 +450,7 @@ export const RenderQueue = memo(function RenderQueue({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-3 py-3 border-b border-panel-border shrink-0">
+      <div className="px-3 py-3 border-b border-border shrink-0">
         <FormatExportButton
           onStartRender={onStartRender}
           isRendering={isRendering}
@@ -470,17 +465,30 @@ export const RenderQueue = memo(function RenderQueue({
       {actionError && (
         <div
           role="alert"
-          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-panel-border bg-red-500/10"
+          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10"
         >
-          <span className="text-[10px] text-red-400">{actionError}</span>
+          <span className="text-step-10 text-danger">{actionError}</span>
           {onDismissActionError && (
-            <button
+            <IconButton
+              size="sm"
               onClick={onDismissActionError}
               aria-label="Dismiss error"
-              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 shrink-0"
-            >
-              ✕
-            </button>
+              className="shrink-0"
+              icon={
+                <svg
+                  width="10"
+                  height="10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  aria-hidden="true"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              }
+            />
           )}
         </div>
       )}
@@ -489,7 +497,7 @@ export const RenderQueue = memo(function RenderQueue({
       <div ref={listRef} className="flex-1 overflow-y-auto">
         {loadError && jobs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-4 gap-2" role="alert">
-            <p className="text-[10px] text-red-400 text-center">{loadError}</p>
+            <p className="text-step-10 text-danger text-center">{loadError}</p>
             {onRetryLoad && (
               <Button size="sm" variant="secondary" onClick={onRetryLoad}>
                 Retry
@@ -505,7 +513,7 @@ export const RenderQueue = memo(function RenderQueue({
               fill="none"
               stroke="currentColor"
               strokeWidth="1.5"
-              className="text-panel-text-5"
+              className="text-text-5"
             >
               <rect
                 x="2"
@@ -523,24 +531,22 @@ export const RenderQueue = memo(function RenderQueue({
                 strokeLinejoin="round"
               />
             </svg>
-            <p className="text-[10px] text-panel-text-5 text-center">No renders yet</p>
+            <p className="text-step-10 text-text-5 text-center">No renders yet</p>
           </div>
         ) : (
           <div>
             {completedCount > 0 && (
-              <div className="flex items-center justify-between px-3 py-1.5 border-b border-panel-border">
-                <span className="text-[10px] text-panel-text-4">
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+                <span className="text-step-10 text-text-4">
                   {jobs.length} render{jobs.length === 1 ? "" : "s"}
                 </span>
                 {/* "Hide", not "Clear": files stay on disk (delete is per-row
                     and confirmed); hidden rows don't resurrect on reload. */}
-                <button
-                  onClick={onClearCompleted}
-                  title="Hide finished renders from this list (files stay on disk)"
-                  className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
-                >
-                  Hide finished
-                </button>
+                <Tooltip label="Hide finished renders from this list (files stay on disk)">
+                  <Button size="sm" variant="ghost" onClick={onClearCompleted}>
+                    Hide finished
+                  </Button>
+                </Tooltip>
               </div>
             )}
             {jobs.map((job) => (
diff --git a/packages/studio/src/components/renders/RenderQueueItem.tsx b/packages/studio/src/components/renders/RenderQueueItem.tsx
index bad11f0a5e..9cfa97f94d 100644
--- a/packages/studio/src/components/renders/RenderQueueItem.tsx
+++ b/packages/studio/src/components/renders/RenderQueueItem.tsx
@@ -1,6 +1,8 @@
 import { memo, useCallback, useState } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Tooltip } from "../ui/Tooltip";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
@@ -65,7 +67,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         setVideoReady(false);
         setConfirmingDelete(false);
       }}
-      className="px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150 hover:bg-panel-hover/30"
+      className="px-3 py-2.5 border-b border-border last:border-0 transition-colors duration-150 hover:bg-hover/30"
     >
       <div className="flex items-center gap-2.5">
         {/* Thumbnail — static frame; swaps to live video on hover.
@@ -76,8 +78,8 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           disabled={!isComplete}
           aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
           className={[
-            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input shrink-0 relative",
-            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent",
+            "w-20 h-[45px] rounded-md overflow-hidden bg-input shrink-0 relative",
+            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent",
             isComplete ? "cursor-pointer" : "cursor-default",
           ].join(" ")}
         >
@@ -107,17 +109,17 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {isRendering && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse motion-reduce:animate-none" />
+              <div className="w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" />
             </div>
           )}
           {job.status === "failed" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-red-400" />
+              <div className="w-2 h-2 rounded-full bg-danger" />
             </div>
           )}
           {job.status === "cancelled" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-neutral-600" />
+              <div className="w-2 h-2 rounded-full bg-text-5" />
             </div>
           )}
         </button>
@@ -125,11 +127,9 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Info */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-panel-text-2 truncate">
-              {job.filename}
-            </span>
+            <span className="text-step-11 font-medium text-text-2 truncate">{job.filename}</span>
             {job.durationMs && (
-              <span className="text-[9px] text-panel-text-5 shrink-0">
+              <span className="text-step-9 text-text-5 shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -138,11 +138,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {isRendering && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
-                <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
+                <span className="text-step-9 text-text-4">{job.stage || "Rendering"}</span>
+                <span className="text-step-9 font-mono text-accent">{job.progress}%</span>
               </div>
               <div
-                className="w-full h-1 bg-panel-border rounded-full overflow-hidden"
+                className="w-full h-1 bg-border rounded-full overflow-hidden"
                 role="progressbar"
                 aria-valuenow={job.progress}
                 aria-valuemin={0}
@@ -150,7 +150,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                 aria-label={`Render progress: ${job.progress}%`}
               >
                 <div
-                  className="h-full bg-panel-accent rounded-full transition-all duration-300"
+                  className="h-full bg-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -158,14 +158,14 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
 
           {job.status === "failed" && job.error && (
-            <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
+            <span className="text-step-9 text-danger mt-0.5 block">{job.error}</span>
           )}
           {job.status === "cancelled" && (
-            <span className="text-[9px] text-panel-text-4 mt-0.5 block">Cancelled</span>
+            <span className="text-step-9 text-text-4 mt-0.5 block">Cancelled</span>
           )}
 
           {!isRendering && (
-            <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
+            <span className="text-step-9 text-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
@@ -208,53 +208,58 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             </>
           ) : (
             <>
-              <button
-                onClick={isComplete ? handleDownload : undefined}
-                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent ${
-                  isComplete
-                    ? "text-panel-text-5 hover:text-panel-accent"
-                    : "text-panel-text-5/30 cursor-default"
-                }`}
-                title={isComplete ? "Download" : undefined}
-                aria-label={`Download ${job.filename}`}
-                disabled={!isComplete}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setConfirmingDelete(true);
-                }}
-                className="p-1.5 min-w-6 min-h-6 rounded-sm text-panel-text-5 hover:text-red-400 transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
-                title="Delete render file"
-                aria-label={`Delete ${job.filename}`}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                >
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
+              {/* The tooltip explains the control whether or not it is
+                  reachable; `disabled:` on the shared Button keeps pointer
+                  events alive precisely so a disabled one can still say why. */}
+              <Tooltip label={isComplete ? "Download" : "Available when the render finishes"}>
+                <IconButton
+                  size="sm"
+                  onClick={handleDownload}
+                  disabled={!isComplete}
+                  aria-label={`Download ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                      <polyline points="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
+              <Tooltip label="Delete render file">
+                <IconButton
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmingDelete(true);
+                  }}
+                  aria-label={`Delete ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
             </>
           )}
         </div>
diff --git a/packages/studio/src/components/ui/Select.tsx b/packages/studio/src/components/ui/Select.tsx
index 08158f2531..15c15c18e8 100644
--- a/packages/studio/src/components/ui/Select.tsx
+++ b/packages/studio/src/components/ui/Select.tsx
@@ -24,6 +24,13 @@ import type { PreviewState } from "./Button";
 export interface SelectOption {
   label: string;
   value: string;
+  /**
+   * Offered but not choosable. The option stays in the list with its label
+   * intact, because a label is where a caller explains *why* it is out of
+   * reach; filtering it out would leave the user hunting for a choice that
+   * silently vanished.
+   */
+  disabled?: boolean;
 }
 
 export interface SelectProps {
@@ -94,11 +101,13 @@ export function Select({
                 <BaseSelect.Item
                   key={option.value}
                   value={option.value}
+                  disabled={option.disabled}
                   className={cn(
                     "flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5",
                     "text-step-11 text-text-2 outline-hidden",
                     "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
                     "data-[selected]:text-text-0",
+                    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
                   )}
                 >
                   <BaseSelect.ItemText className="truncate">{option.label}</BaseSelect.ItemText>