@hyperframes/studio 0.1.13 → 0.1.15

package/src/components/LintModal.tsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
+
+export interface LintFinding {
+  severity: "error" | "warning";
+  message: string;
+  file?: string;
+  fixHint?: string;
+}
+
+export function LintModal({
+  findings,
+  projectId,
+  onClose,
+}: {
+  findings: LintFinding[];
+  projectId: string;
+  onClose: () => void;
+}) {
+  const errors = findings.filter((f) => f.severity === "error");
+  const warnings = findings.filter((f) => f.severity === "warning");
+  const hasIssues = findings.length > 0;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyToAgent = async () => {
+    const lines = findings.map((f) => {
+      let line = `[${f.severity}] ${f.message}`;
+      if (f.file) line += `\n  File: ${f.file}`;
+      if (f.fixHint) line += `\n  Fix: ${f.fixHint}`;
+      return line;
+    });
+    const text = `Fix these HyperFrames lint issues for project "${projectId}":\n\nProject path: ${window.location.href}\n\n${lines.join("\n\n")}`;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800">
+          <div className="flex items-center gap-3">
+            {hasIssues ? (
+              <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center">
+                <WarningIcon size={18} className="text-red-400" weight="fill" />
+              </div>
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center">
+                <CheckCircleIcon size={18} className="text-studio-accent" weight="fill" />
+              </div>
+            )}
+            <div>
+              <h2 className="text-sm font-semibold text-neutral-200">
+                {hasIssues
+                  ? `${errors.length} error${errors.length !== 1 ? "s" : ""}, ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}`
+                  : "All checks passed"}
+              </h2>
+              <p className="text-xs text-neutral-500">HyperFrame Lint Results</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-neutral-500 hover:text-neutral-200 hover:bg-neutral-800 transition-colors"
+          >
+            <XIcon size={16} />
+          </button>
+        </div>
+
+        {/* Copy to agent + findings */}
+        {hasIssues && (
+          <div className="flex items-center justify-end px-5 py-2 border-b border-neutral-800/50">
+            <button
+              onClick={handleCopyToAgent}
+              className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors ${
+                copied
+                  ? "bg-green-600 text-white"
+                  : "bg-studio-accent hover:bg-studio-accent/80 text-white"
+              }`}
+            >
+              {copied ? "Copied!" : "Copy to Agent"}
+            </button>
+          </div>
+        )}
+        <div className="flex-1 overflow-y-auto px-5 py-3">
+          {!hasIssues && (
+            <div className="py-8 text-center text-neutral-500 text-sm">
+              No errors or warnings found. Your composition looks good!
+            </div>
+          )}
+          {errors.map((f, i) => (
+            <div key={`e-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
+              <div className="flex items-start gap-2">
+                <WarningIcon
+                  size={14}
+                  className="text-red-400 flex-shrink-0 mt-0.5"
+                  weight="fill"
+                />
+                <div className="min-w-0">
+                  <p className="text-sm text-neutral-200">{f.message}</p>
+                  {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
+                  {f.fixHint && (
+                    <div className="flex items-start gap-1 mt-1.5">
+                      <CaretRightIcon
+                        size={10}
+                        className="text-studio-accent flex-shrink-0 mt-0.5"
+                      />
+                      <p className="text-xs text-studio-accent">{f.fixHint}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+          {warnings.map((f, i) => (
+            <div key={`w-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
+              <div className="flex items-start gap-2">
+                <WarningIcon size={14} className="text-amber-400 flex-shrink-0 mt-0.5" />
+                <div className="min-w-0">
+                  <p className="text-sm text-neutral-300">{f.message}</p>
+                  {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
+                  {f.fixHint && (
+                    <div className="flex items-start gap-1 mt-1.5">
+                      <CaretRightIcon
+                        size={10}
+                        className="text-studio-accent flex-shrink-0 mt-0.5"
+                      />
+                      <p className="text-xs text-studio-accent">{f.fixHint}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MediaPreview.tsx

@@ -0,0 +1,79 @@
+import { IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../utils/mediaTypes";
+
+export function MediaPreview({ projectId, filePath }: { projectId: string; filePath: string }) {
+  const serveUrl = `/api/projects/${projectId}/preview/${filePath}`;
+  const name = filePath.split("/").pop() ?? filePath;
+
+  if (IMAGE_EXT.test(filePath)) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950">
+        <img
+          src={serveUrl}
+          alt={name}
+          className="max-w-full max-h-[70%] object-contain rounded border border-neutral-800"
+        />
+        <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
+      </div>
+    );
+  }
+
+  if (VIDEO_EXT.test(filePath)) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950">
+        <video
+          src={serveUrl}
+          controls
+          className="max-w-full max-h-[70%] rounded border border-neutral-800"
+        />
+        <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
+      </div>
+    );
+  }
+
+  if (AUDIO_EXT.test(filePath)) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-3">
+        <svg
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          className="text-neutral-600"
+        >
+          <path d="M9 18V5l12-2v13" strokeLinecap="round" strokeLinejoin="round" />
+          <circle cx="6" cy="18" r="3" />
+          <circle cx="18" cy="16" r="3" />
+        </svg>
+        <audio src={serveUrl} controls className="w-full max-w-[280px]" />
+        <span className="text-[11px] text-neutral-500 font-mono">{filePath}</span>
+      </div>
+    );
+  }
+
+  // Fonts and other binary — show info instead of binary dump
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2">
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="text-neutral-600"
+      >
+        <path
+          d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <polyline points="14 2 14 8 20 8" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      <span className="text-sm text-neutral-400 font-medium">{name}</span>
+      <span className="text-[11px] text-neutral-600 font-mono">{filePath}</span>
+      <span className="text-[10px] text-neutral-600">Binary file — preview not available</span>
+    </div>
+  );
+}

package/src/components/editor/FileTree.tsx

@@ -1,13 +1,24 @@
-import { memo, useState, useCallback } from "react";
+import { memo, useState, useCallback, useMemo } from "react";
 import {
+  FileHtml,
+  FileCss,
+  FileJs,
+  FileJsx,
+  FileTs,
+  FileTsx,
+  FileTxt,
+  FileMd,
+  FileSvg,
+  FilePng,
+  FileJpg,
+  FileVideo,
   FileCode,
-  Image,
-  Film,
-  Music,
   File,
-  ChevronDown,
-  ChevronRight,
-} from "../../icons/SystemIcons";
+  Waveform,
+  TextAa,
+  Image as PhImage,
+} from "@phosphor-icons/react";
+import { ChevronDown, ChevronRight } from "../../icons/SystemIcons";
 
 interface FileTreeProps {
   files: string[];
@@ -15,34 +26,37 @@ interface FileTreeProps {
   onSelectFile: (path: string) => void;
 }
 
-const FILE_ICONS: Record<string, { icon: typeof File; color: string }> = {
-  html: { icon: FileCode, color: "#3B82F6" },
-  css: { icon: FileCode, color: "#A855F7" },
-  js: { icon: FileCode, color: "#F59E0B" },
-  ts: { icon: FileCode, color: "#3B82F6" },
-  json: { icon: File, color: "#22C55E" },
-  md: { icon: File, color: "#737373" },
-  png: { icon: Image, color: "#22C55E" },
-  jpg: { icon: Image, color: "#22C55E" },
-  jpeg: { icon: Image, color: "#22C55E" },
-  webp: { icon: Image, color: "#22C55E" },
-  gif: { icon: Image, color: "#22C55E" },
-  svg: { icon: Image, color: "#F97316" },
-  mp4: { icon: Film, color: "#A855F7" },
-  webm: { icon: Film, color: "#A855F7" },
-  mov: { icon: Film, color: "#A855F7" },
-  mp3: { icon: Music, color: "#F59E0B" },
-  wav: { icon: Music, color: "#F59E0B" },
-  ogg: { icon: Music, color: "#F59E0B" },
-  m4a: { icon: Music, color: "#F59E0B" },
-  woff: { icon: File, color: "#525252" },
-  woff2: { icon: File, color: "#525252" },
-  ttf: { icon: File, color: "#525252" },
-};
+const SZ = 14;
+const W = "duotone" as const;
 
-function getFileIcon(path: string) {
+function FileIcon({ path }: { path: string }) {
   const ext = path.split(".").pop()?.toLowerCase() ?? "";
-  return FILE_ICONS[ext] ?? { icon: File, color: "#737373" };
+  const c = "flex-shrink-0";
+  if (ext === "html") return <FileHtml size={SZ} weight={W} color="#E44D26" className={c} />;
+  if (ext === "css") return <FileCss size={SZ} weight={W} color="#264DE4" className={c} />;
+  if (ext === "js" || ext === "mjs" || ext === "cjs")
+    return <FileJs size={SZ} weight={W} color="#F0DB4F" className={c} />;
+  if (ext === "jsx") return <FileJsx size={SZ} weight={W} color="#61DAFB" className={c} />;
+  if (ext === "ts" || ext === "mts")
+    return <FileTs size={SZ} weight={W} color="#3178C6" className={c} />;
+  if (ext === "tsx") return <FileTsx size={SZ} weight={W} color="#3178C6" className={c} />;
+  if (ext === "json") return <FileCode size={SZ} weight={W} color="#4ADE80" className={c} />;
+  if (ext === "svg") return <FileSvg size={SZ} weight={W} color="#F97316" className={c} />;
+  if (ext === "md" || ext === "mdx")
+    return <FileMd size={SZ} weight={W} color="#9CA3AF" className={c} />;
+  if (ext === "txt") return <FileTxt size={SZ} weight={W} color="#9CA3AF" className={c} />;
+  if (ext === "png") return <FilePng size={SZ} weight={W} color="#22C55E" className={c} />;
+  if (ext === "jpg" || ext === "jpeg")
+    return <FileJpg size={SZ} weight={W} color="#22C55E" className={c} />;
+  if (ext === "webp" || ext === "gif" || ext === "ico")
+    return <PhImage size={SZ} weight={W} color="#22C55E" className={c} />;
+  if (ext === "mp4" || ext === "webm" || ext === "mov")
+    return <FileVideo size={SZ} weight={W} color="#A855F7" className={c} />;
+  if (ext === "mp3" || ext === "wav" || ext === "ogg" || ext === "m4a")
+    return <Waveform size={SZ} weight={W} color="#3CE6AC" className={c} />;
+  if (ext === "woff" || ext === "woff2" || ext === "ttf" || ext === "otf")
+    return <TextAa size={SZ} weight={W} color="#6B7280" className={c} />;
+  return <File size={SZ} weight={W} color="#6B7280" className={c} />;
 }
 
 interface TreeNode {
@@ -160,7 +174,6 @@ function TreeFile({
   activeFile: string | null;
   onSelectFile: (path: string) => void;
 }) {
-  const { icon: Icon, color } = getFileIcon(node.name);
   const isActive = node.fullPath === activeFile;
 
   return (
@@ -173,7 +186,7 @@ function TreeFile({
       }`}
       style={{ paddingLeft: `${8 + depth * 12 + 14}px` }}
     >
-      <Icon size={12} style={{ color }} className="flex-shrink-0" />
+      <FileIcon path={node.name} />
       <span className="truncate">{node.name}</span>
     </button>
   );
@@ -189,14 +202,11 @@ function isActiveInSubtree(node: TreeNode, activeFile: string | null): boolean {
 }
 
 export const FileTree = memo(function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
-  const tree = buildTree(files);
-  const children = sortChildren(tree.children);
+  const tree = useMemo(() => buildTree(files), [files]);
+  const children = useMemo(() => sortChildren(tree.children), [tree]);
 
   return (
     <div className="flex flex-col h-full min-h-0">
-      <div className="px-2.5 py-1.5 border-b border-neutral-800 flex-shrink-0">
-        <span className="text-2xs font-medium text-neutral-500 uppercase tracking-caps">Files</span>
-      </div>
       <div className="flex-1 overflow-y-auto py-1">
         {children.map((child) =>
           child.isFile && child.children.size === 0 ? (

package/src/components/editor/PropertyPanel.tsx

@@ -94,7 +94,7 @@ export const PropertyPanel = memo(function PropertyPanel({
           variant="secondary"
           size="sm"
           onClick={isPickMode ? onDisablePick : onEnablePick}
-          className={`mt-3 ${isPickMode ? "bg-blue-500/20 text-blue-400 border-blue-500/30" : ""}`}
+          className={`mt-3 ${isPickMode ? "bg-studio-accent/20 text-studio-accent border-studio-accent/30" : ""}`}
         >
           {isPickMode ? "Pick mode active..." : "Enable Pick Mode"}
         </Button>
@@ -109,7 +109,7 @@ export const PropertyPanel = memo(function PropertyPanel({
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800 flex-shrink-0">
         <div className="flex items-center gap-1.5 min-w-0">
-          <span className="text-2xs font-mono text-blue-400 truncate">{element.selector}</span>
+          <span className="text-2xs font-mono text-studio-accent truncate">{element.selector}</span>
         </div>
         <div className="flex items-center gap-1">
           <IconButton
@@ -117,7 +117,7 @@ export const PropertyPanel = memo(function PropertyPanel({
             aria-label={isPickMode ? "Disable pick mode" : "Enable pick mode"}
             size="sm"
             onClick={isPickMode ? onDisablePick : onEnablePick}
-            className={isPickMode ? "text-blue-400 bg-blue-500/10" : ""}
+            className={isPickMode ? "text-studio-accent bg-studio-accent/10" : ""}
           />
           <IconButton
             icon={<X size={11} />}

package/src/components/nle/NLELayout.tsx

@@ -29,6 +29,10 @@ interface NLELayoutProps {
   ) => ReactNode;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
+  /** Whether the timeline panel is visible (default: true) */
+  timelineVisible?: boolean;
+  /** Callback to toggle timeline visibility */
+  onToggleTimeline?: () => void;
 }
 
 const MIN_TIMELINE_H = 100;
@@ -47,6 +51,8 @@ export const NLELayout = memo(function NLELayout({
   onCompositionChange,
   renderClipContent,
   onCompIdToSrcChange,
+  timelineVisible,
+  onToggleTimeline,
 }: NLELayoutProps) {
   const {
     iframeRef,
@@ -311,31 +317,20 @@ export const NLELayout = memo(function NLELayout({
       onKeyDown={handleKeyDown}
       tabIndex={-1}
     >
-      {/* Preview — takes remaining space above timeline */}
-      <div className="flex-1 min-h-0 relative">
-        <NLEPreview
-          projectId={projectId}
-          iframeRef={iframeRef}
-          onIframeLoad={onIframeLoad}
-          portrait={portrait}
-          directUrl={directUrl}
-          refreshKey={refreshKey}
-        />
-        {previewOverlay}
-      </div>
-
-      {/* Resize divider */}
-      <div
-        className="h-1 flex-shrink-0 bg-neutral-800 hover:bg-blue-500 cursor-row-resize transition-colors active:bg-blue-400 z-10"
-        style={{ touchAction: "none" }}
-        onPointerDown={handleDividerPointerDown}
-        onPointerMove={handleDividerPointerMove}
-        onPointerUp={handleDividerPointerUp}
-      />
-
-      {/* Timeline section — fixed height, resizable */}
-      <div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
-        {/* Breadcrumb + Player controls */}
+      {/* Preview + player controls — takes remaining space above timeline */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        <div className="flex-1 min-h-0 relative">
+          <NLEPreview
+            projectId={projectId}
+            iframeRef={iframeRef}
+            onIframeLoad={onIframeLoad}
+            portrait={portrait}
+            directUrl={directUrl}
+            refreshKey={refreshKey}
+          />
+          {previewOverlay}
+        </div>
+        {/* Player controls always visible, regardless of timeline state */}
         <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
           {compositionStack.length > 1 && (
             <CompositionBreadcrumb
@@ -343,28 +338,49 @@ export const NLELayout = memo(function NLELayout({
               onNavigate={handleNavigateComposition}
             />
           )}
-          <PlayerControls onTogglePlay={togglePlay} onSeek={seek} />
-        </div>
-
-        {/* Timeline tracks */}
-        <div
-          className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"
-          onDoubleClick={(e) => {
-            if ((e.target as HTMLElement).closest("[data-clip]")) return;
-            if (compositionStack.length > 1) {
-              updateCompositionStack((prev) => prev.slice(0, -1));
-            }
-          }}
-        >
-          {timelineToolbar}
-          <Timeline
+          <PlayerControls
+            onTogglePlay={togglePlay}
             onSeek={seek}
-            onDrillDown={handleDrillDown}
-            renderClipContent={renderClipContent}
+            timelineVisible={timelineVisible ?? true}
+            onToggleTimeline={onToggleTimeline}
           />
-          {timelineFooter}
         </div>
       </div>
+
+      {(timelineVisible ?? true) && (
+        <>
+          {/* Resize divider */}
+          <div
+            className="h-1 flex-shrink-0 bg-neutral-800 hover:bg-studio-accent cursor-row-resize transition-colors active:bg-studio-accent/80 z-10"
+            style={{ touchAction: "none" }}
+            onPointerDown={handleDividerPointerDown}
+            onPointerMove={handleDividerPointerMove}
+            onPointerUp={handleDividerPointerUp}
+          />
+
+          {/* Timeline section — fixed height, resizable */}
+          <div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
+            {/* Timeline tracks */}
+            <div
+              className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"
+              onDoubleClick={(e) => {
+                if ((e.target as HTMLElement).closest("[data-clip]")) return;
+                if (compositionStack.length > 1) {
+                  updateCompositionStack((prev) => prev.slice(0, -1));
+                }
+              }}
+            >
+              {timelineToolbar}
+              <Timeline
+                onSeek={seek}
+                onDrillDown={handleDrillDown}
+                renderClipContent={renderClipContent}
+              />
+              {timelineFooter}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 });

package/src/components/renders/RenderQueue.tsx

@@ -1,9 +1,10 @@
-import { memo, useState, useRef } from "react";
+import { memo, useState, useRef, useEffect } from "react";
 import { RenderQueueItem } from "./RenderQueueItem";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueProps {
   jobs: RenderJob[];
+  projectId: string;
   onDelete: (jobId: string) => void;
   onClearCompleted: () => void;
   onStartRender: (format: "mp4" | "webm") => void;
@@ -33,7 +34,7 @@ function FormatExportButton({
       <button
         onClick={() => onStartRender(format)}
         disabled={isRendering}
-        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-[#3CE6AC] text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
+        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
       >
         {isRendering ? "Rendering..." : "Export"}
       </button>
@@ -43,31 +44,28 @@ function FormatExportButton({
 
 export const RenderQueue = memo(function RenderQueue({
   jobs,
+  projectId,
   onDelete,
   onClearCompleted,
   onStartRender,
   isRendering,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
-  const prevCount = useRef(jobs.length);
 
-  // Auto-scroll to bottom when new jobs are added (adjust during render)
-  if (jobs.length > prevCount.current && listRef.current) {
-    queueMicrotask(() => {
-      listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
-    });
-  }
-  prevCount.current = jobs.length;
+  // Auto-scroll to bottom when new jobs are added.
+  // Runs in an effect to avoid side effects during the render phase.
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
+    }
+  }, [jobs.length]);
 
   const completedCount = jobs.filter((j) => j.status !== "rendering").length;
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
-        <span className="text-[11px] font-medium text-neutral-500 uppercase tracking-wider">
-          Renders ({jobs.length})
-        </span>
+      {/* Header — no title, already shown in header button */}
+      <div className="flex items-center justify-end px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
         <div className="flex items-center gap-1.5">
           {completedCount > 0 && (
             <button
@@ -114,7 +112,12 @@ export const RenderQueue = memo(function RenderQueue({
           </div>
         ) : (
           jobs.map((job) => (
-            <RenderQueueItem key={job.id} job={job} onDelete={() => onDelete(job.id)} />
+            <RenderQueueItem
+              key={job.id}
+              job={job}
+              projectId={projectId}
+              onDelete={() => onDelete(job.id)}
+            />
           ))
         )}
       </div>

package/src/components/renders/RenderQueueItem.tsx

@@ -4,6 +4,7 @@ import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
   job: RenderJob;
+  projectId: string;
   onDelete: () => void;
 }
 
@@ -24,26 +25,30 @@ function formatTimeAgo(timestamp: number): string {
 
 export const RenderQueueItem = memo(function RenderQueueItem({
   job,
+  projectId,
   onDelete,
 }: RenderQueueItemProps) {
   const [hovered, setHovered] = useState(false);
 
+  // Direct file URL — serves from disk, survives server restarts
+  const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
+
   const handleOpen = useCallback(() => {
-    window.open(`/api/render/${job.id}/view`, "_blank");
-  }, [job.id]);
+    window.open(fileSrc, "_blank");
+  }, [fileSrc]);
 
   const handleDownload = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
       const a = document.createElement("a");
-      a.href = `/api/render/${job.id}/download`;
+      a.href = fileSrc;
       a.download = job.filename;
       a.click();
     },
-    [job.id, job.filename],
+    [fileSrc, job.filename],
   );
 
-  const viewSrc = `/api/render/${job.id}/view`;
+  const viewSrc = fileSrc;
   const isComplete = job.status === "complete";
 
   return (
@@ -85,7 +90,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {job.status === "rendering" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-[#3CE6AC] animate-pulse" />
+              <div className="w-2 h-2 rounded-full bg-studio-accent animate-pulse" />
             </div>
           )}
           {job.status === "failed" && (
@@ -117,11 +122,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
                 <span className="text-[9px] text-neutral-500">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-[#3CE6AC]">{job.progress}%</span>
+                <span className="text-[9px] font-mono text-studio-accent">{job.progress}%</span>
               </div>
               <div className="w-full h-1 bg-neutral-800 rounded-full overflow-hidden">
                 <div
-                  className="h-full bg-[#3CE6AC] rounded-full transition-all duration-300"
+                  className="h-full bg-studio-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>