@hyperframes/studio 0.7.36 → 0.7.38

package/src/components/renders/useRenderQueue.ts

@@ -36,23 +36,66 @@ export interface StartRenderOptions {
   composition?: string;
 }
 
+// "Hide" (formerly "Clear") is a view operation, not a delete: hidden ids are
+// remembered here so hidden renders don't resurrect from the on-disk history
+// on the next load. Per-project key so projects don't hide each other's rows.
+function hiddenIdsKey(projectId: string): string {
+  return `hf-studio-hidden-renders:${projectId}`;
+}
+
+function readHiddenIds(projectId: string): Set<string> {
+  try {
+    const raw = window.localStorage.getItem(hiddenIdsKey(projectId));
+    const parsed: unknown = raw ? JSON.parse(raw) : [];
+    return new Set(Array.isArray(parsed) ? parsed.filter((v) => typeof v === "string") : []);
+  } catch {
+    return new Set();
+  }
+}
+
+function writeHiddenIds(projectId: string, ids: Set<string>): void {
+  try {
+    // Cap the list so it doesn't grow unbounded across months of renders.
+    window.localStorage.setItem(hiddenIdsKey(projectId), JSON.stringify([...ids].slice(-200)));
+  } catch {
+    /* localStorage may be unavailable or full */
+  }
+}
+
 export function useRenderQueue(projectId: string | null) {
   const [jobs, setJobs] = useState<RenderJob[]>([]);
+  // History fetch failure — distinguished from "no renders yet" so the panel
+  // never shows a false empty state.
+  const [loadError, setLoadError] = useState<string | null>(null);
+  // Failure of a user action (delete/cancel), surfaced inline in the panel.
+  const [actionError, setActionError] = useState<string | null>(null);
   const eventSourceRef = useRef<EventSource | null>(null);
   const activeJobRef = useRef<string | null>(null);
 
+  const closeActiveEventSource = useCallback((jobId?: string) => {
+    if (jobId && activeJobRef.current !== jobId) return;
+    eventSourceRef.current?.close();
+    eventSourceRef.current = null;
+    activeJobRef.current = null;
+  }, []);
+
   // Load completed renders from the server
   const loadRenders = useCallback(async () => {
     if (!projectId) return;
     try {
       const res = await fetch(`/api/projects/${projectId}/renders`);
-      if (!res.ok) return;
+      if (!res.ok) {
+        setLoadError(`Couldn't load render history (server error ${res.status}).`);
+        return;
+      }
       const data = await res.json();
+      setLoadError(null);
       if (Array.isArray(data.renders)) {
+        const hidden = readHiddenIds(projectId);
         setJobs((prev) => {
           const existing = new Set(prev.map((j) => j.id));
           const fromServer: RenderJob[] = data.renders
-            .filter((r: { id: string }) => !existing.has(r.id))
+            .filter((r: { id: string }) => !existing.has(r.id) && !hidden.has(r.id))
             .map(
               (r: {
                 id: string;
@@ -74,7 +117,7 @@ export function useRenderQueue(projectId: string | null) {
         });
       }
     } catch {
-      // ignore
+      setLoadError("Couldn't load render history. Is the studio server running?");
     }
   }, [projectId]);
 
@@ -175,6 +218,8 @@ export function useRenderQueue(projectId: string | null) {
       es.addEventListener("progress", (event) => {
         try {
           const data = JSON.parse(event.data);
+          const terminal =
+            data.status === "complete" || data.status === "failed" || data.status === "cancelled";
           setJobs((prev) =>
             prev.map((j) =>
               j.id === jobId
@@ -182,21 +227,15 @@ export function useRenderQueue(projectId: string | null) {
                     ...j,
                     progress: data.progress ?? j.progress,
                     stage: data.stage ?? data.message ?? j.stage,
-                    status:
-                      data.status === "complete"
-                        ? "complete"
-                        : data.status === "failed"
-                          ? "failed"
-                          : j.status,
+                    status: terminal ? (data.status as RenderJob["status"]) : j.status,
                     durationMs: data.status === "complete" ? Date.now() - startTime : undefined,
                     error: data.error ?? j.error,
                   }
                 : j,
             ),
           );
-          if (data.status === "complete" || data.status === "failed") {
-            es.close();
-            activeJobRef.current = null;
+          if (terminal) {
+            closeActiveEventSource(jobId);
           }
         } catch {
           // ignore parse errors
@@ -221,21 +260,78 @@ export function useRenderQueue(projectId: string | null) {
 
       return jobId;
     },
-    [projectId],
+    [projectId, closeActiveEventSource],
   );
 
-  const deleteRender = useCallback(async (jobId: string) => {
-    try {
-      await fetch(`/api/render/${jobId}`, { method: "DELETE" });
-    } catch {
-      // ignore
-    }
-    setJobs((prev) => prev.filter((j) => j.id !== jobId));
-  }, []);
+  // Cancel an in-flight render. The job row stays (as "cancelled") so the
+  // user sees the outcome; the SSE stream is closed either way.
+  const cancelRender = useCallback(
+    async (jobId: string) => {
+      setActionError(null);
+      closeActiveEventSource(jobId);
+      setJobs((prev) =>
+        prev.map((j) =>
+          j.id === jobId && j.status === "rendering" ? { ...j, status: "cancelled" } : j,
+        ),
+      );
+      try {
+        const res = await fetch(`/api/render/${jobId}/cancel`, { method: "POST" });
+        if (!res.ok && res.status !== 404) {
+          setActionError("Couldn't cancel on the server — the render may still be running.");
+          return;
+        }
+        // Reconcile with the status the route reports: if the render actually
+        // finished (or failed) before the cancel landed, don't leave the row
+        // stuck on the optimistic "cancelled" — reload to pick up the real
+        // outcome (and the finished file's metadata).
+        if (res.ok) {
+          const body = (await res.json().catch(() => null)) as { status?: string } | null;
+          if (body?.status && body.status !== "cancelled") {
+            void loadRenders();
+          }
+        }
+      } catch {
+        setActionError("Couldn't reach the server to cancel — the render may still be running.");
+      }
+    },
+    [closeActiveEventSource, loadRenders],
+  );
 
+  const deleteRender = useCallback(
+    async (jobId: string) => {
+      setActionError(null);
+      closeActiveEventSource(jobId);
+      try {
+        const res = await fetch(`/api/render/${jobId}`, { method: "DELETE" });
+        if (!res.ok) {
+          setActionError("Couldn't delete the render — it's still on disk.");
+          return;
+        }
+      } catch {
+        setActionError("Couldn't reach the server to delete the render.");
+        return;
+      }
+      setJobs((prev) => prev.filter((j) => j.id !== jobId));
+    },
+    [closeActiveEventSource],
+  );
+
+  // Hide finished rows from the list (view-only — files stay on disk and can
+  // be recovered from the renders/ directory). Remembered per project so the
+  // rows don't resurrect from history on reload.
   const clearCompleted = useCallback(() => {
-    setJobs((prev) => prev.filter((j) => j.status === "rendering"));
-  }, []);
+    setJobs((prev) => {
+      const finished = prev.filter((j) => j.status !== "rendering");
+      if (projectId && finished.length > 0) {
+        const hidden = readHiddenIds(projectId);
+        for (const j of finished) hidden.add(j.id);
+        writeHiddenIds(projectId, hidden);
+      }
+      return prev.filter((j) => j.status === "rendering");
+    });
+  }, [projectId]);
+
+  const dismissActionError = useCallback(() => setActionError(null), []);
 
   // Clean up EventSource on unmount or projectId change
   useEffect(() => {
@@ -250,10 +346,26 @@ export function useRenderQueue(projectId: string | null) {
     () => ({
       jobs,
       isRendering,
+      loadError,
+      actionError,
+      dismissActionError,
+      reloadRenders: loadRenders,
       deleteRender,
+      cancelRender,
       clearCompleted,
       startRender: startRender as (options: unknown) => Promise<void>,
     }),
-    [jobs, isRendering, deleteRender, clearCompleted, startRender],
+    [
+      jobs,
+      isRendering,
+      loadError,
+      actionError,
+      dismissActionError,
+      loadRenders,
+      deleteRender,
+      cancelRender,
+      clearCompleted,
+      startRender,
+    ],
   );
 }

package/src/components/storyboard/StoryboardFrameFocus.tsx

@@ -3,6 +3,7 @@ import { setFrameStatus, setFrameVoiceover, type FrameStatus } from "@hyperframe
 import type { StoryboardFrameView } from "../../hooks/useStoryboard";
 import { useFileManagerContext } from "../../contexts/FileManagerContext";
 import { useViewMode } from "../../contexts/ViewModeContext";
+import { Button } from "../ui/Button";
 import { FramePoster, posterTime } from "./FramePoster";
 import { FRAME_STATUS_META, FRAME_STATUS_ORDER } from "./frameStatus";
 
@@ -67,7 +68,25 @@ export function StoryboardFrameFocus({
   const dirty = draft !== (frame.voiceover ?? "");
   const canOpenPreview = frame.srcExists && Boolean(frame.src);
 
-  // Leaving the frame drops the in-memory voiceover draft; confirm when it's dirty.
+  const saveVoiceover = useCallback(() => {
+    return applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
+  }, [applyEdit, frame.index, draft]);
+
+  // Closing the tab with a dirty voiceover would lose it silently — same
+  // guard the sibling markdown editor registers for the same class of loss.
+  useEffect(() => {
+    if (!dirty) return;
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [dirty]);
+
+  // Leaving the frame drops the in-memory voiceover draft; confirm while it's
+  // dirty. An in-flight save does NOT count as safe: if it fails after unmount
+  // the error lands on an unmounted component and the draft is silently lost,
+  // so keep confirming until the save actually lands (dirty clears on success).
   const confirmLeave = () => !dirty || window.confirm("Discard unsaved voiceover changes?");
   const handleBack = () => {
     if (confirmLeave()) onBack();
@@ -158,18 +177,27 @@ export function StoryboardFrameFocus({
               <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400">
                 🎙 Voiceover <span className="font-normal normal-case text-neutral-600">guide</span>
               </h3>
-              <button
-                type="button"
-                onClick={() => applyEdit((src) => setFrameVoiceover(src, frame.index, draft))}
-                disabled={!dirty || busy}
-                className="rounded bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white disabled:opacity-40"
+              <Button
+                size="sm"
+                variant="primary"
+                onClick={saveVoiceover}
+                disabled={!dirty}
+                loading={busy}
+                className="bg-emerald-600 text-white enabled:hover:bg-emerald-500 shadow-none"
               >
-                Save
-              </button>
+                {busy ? "Saving…" : "Save"}
+              </Button>
             </div>
             <textarea
               value={draft}
               onChange={(e) => setDraft(e.target.value)}
+              onBlur={() => {
+                // Same autosave paradigm as the status row above — mixed save
+                // models inside one panel taught users the panel autosaves,
+                // then lost their voiceover. Explicit Save stays as the
+                // affordance; blur is the safety net.
+                if (dirty && !busy) void saveVoiceover();
+              }}
               rows={3}
               placeholder="What the narrator says over this frame…"
               className="w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-2 text-sm text-neutral-200 outline-none focus:border-neutral-600"
@@ -189,14 +217,9 @@ export function StoryboardFrameFocus({
             </section>
           )}
 
-          <button
-            type="button"
-            onClick={openInPreview}
-            disabled={!canOpenPreview}
-            className="rounded border border-neutral-700 px-3 py-1.5 text-xs font-medium text-neutral-200 hover:bg-neutral-800 disabled:opacity-40"
-          >
+          <Button size="sm" variant="secondary" onClick={openInPreview} disabled={!canOpenPreview}>
             Open in Preview →
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -217,7 +240,7 @@ function NavButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className="rounded px-2 py-1 text-xs font-medium text-neutral-300 hover:bg-neutral-800 disabled:opacity-30"
+      className="rounded px-2 py-1 text-xs font-medium text-neutral-300 hover:bg-neutral-800 enabled:active:scale-[0.98] transition-transform disabled:opacity-30"
     >
       {label}
     </button>

package/src/components/storyboard/StoryboardLoaded.tsx

@@ -113,16 +113,33 @@ const SUB_VIEWS: Array<{ value: SubView; label: string }> = [
 ];
 
 function SubViewToggle({ value, onChange }: { value: SubView; onChange: (next: SubView) => void }) {
+  // Complete tabs contract: roving tabIndex + arrow-key navigation (the roles
+  // alone promised keyboard behavior the buttons didn't have).
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    e.preventDefault();
+    const currentIndex = SUB_VIEWS.findIndex((v) => v.value === value);
+    const delta = e.key === "ArrowRight" ? 1 : -1;
+    const next = SUB_VIEWS[(currentIndex + delta + SUB_VIEWS.length) % SUB_VIEWS.length];
+    if (next) onChange(next.value);
+  };
+
   return (
-    <div className="flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5" role="tablist">
+    <div
+      className="flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5"
+      role="tablist"
+      aria-label="Storyboard view"
+      onKeyDown={handleKeyDown}
+    >
       {SUB_VIEWS.map((option) => (
         <button
           key={option.value}
           type="button"
           role="tab"
           aria-selected={value === option.value}
+          tabIndex={value === option.value ? 0 : -1}
           onClick={() => onChange(option.value)}
-          className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
+          className={`rounded px-3 py-1 text-xs font-medium transition-colors active:scale-[0.98] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
             value === option.value
               ? "bg-neutral-700 text-neutral-100"
               : "text-neutral-400 hover:text-neutral-200"

package/src/components/storyboard/StoryboardView.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { useStoryboard } from "../../hooks/useStoryboard";
+import { Button } from "../ui/Button";
 import { StoryboardLoaded } from "./StoryboardLoaded";
 
 export interface StoryboardViewProps {
@@ -22,6 +23,11 @@ export function StoryboardView({ projectId, onSelectComposition }: StoryboardVie
     return (
       <StoryboardFrame>
         <Message tone="error">Couldn’t load the storyboard: {error}</Message>
+        <div className="flex justify-center">
+          <Button size="sm" variant="secondary" onClick={reload}>
+            Retry
+          </Button>
+        </div>
       </StoryboardFrame>
     );
   }

package/src/components/studioColorGradingScope.ts

@@ -0,0 +1,124 @@
+import type { MutableRefObject } from "react";
+import type { EditHistoryKind } from "../utils/editHistory";
+import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
+import { patchMediaColorGradingInHtml } from "./editor/colorGradingScopePatch";
+import { hasRelativeLutSource } from "./studioMediaJobs";
+
+export type ColorGradingScope = "source-file" | "project";
+export type ColorGradingScopeResult = { changedFiles: number; changedElements: number };
+
+type ProjectFileReader = (path: string) => Promise<string>;
+type ProjectFileWriter = (path: string, content: string) => Promise<void>;
+type ShowToast = (message: string, tone?: "error" | "info") => void;
+type RecordEdit = (entry: {
+  label: string;
+  kind: EditHistoryKind;
+  files: Record<string, { before: string; after: string }>;
+}) => Promise<void>;
+
+export const EMPTY_COLOR_GRADING_SCOPE_RESULT: ColorGradingScopeResult = {
+  changedFiles: 0,
+  changedElements: 0,
+};
+
+interface ApplyColorGradingScopeOptions {
+  scope: ColorGradingScope;
+  value: string | null;
+  selectedSourceFile: string;
+  fileTree: string[];
+  projectId: string;
+  domEditSaveTimestampRef: MutableRefObject<number>;
+  waitForPendingDomEditSaves: () => Promise<void>;
+  readProjectFile: ProjectFileReader;
+  writeProjectFile: ProjectFileWriter;
+  recordEdit: RecordEdit;
+  reloadPreview: () => void;
+  showToast: ShowToast;
+}
+
+function colorGradingScopePaths(
+  scope: ColorGradingScope,
+  selectedSourceFile: string,
+  fileTree: string[],
+): string[] {
+  return scope === "source-file"
+    ? [selectedSourceFile]
+    : fileTree.filter((path) => /\.html?$/i.test(path));
+}
+
+async function patchColorGradingScopeFiles(
+  paths: string[],
+  value: string | null,
+  readProjectFile: ProjectFileReader,
+): Promise<{ files: Record<string, string>; changedElements: number }> {
+  const snapshots = await Promise.all(
+    Array.from(new Set(paths)).map(async (path) => ({
+      path,
+      before: await readProjectFile(path),
+    })),
+  );
+  const files: Record<string, string> = {};
+  let changedElements = 0;
+
+  for (const { path, before } of snapshots) {
+    const result = patchMediaColorGradingInHtml(before, value);
+    if (result.html !== before) {
+      files[path] = result.html;
+      changedElements += result.count;
+    }
+  }
+
+  return { files, changedElements };
+}
+
+// fallow-ignore-next-line complexity
+export async function applyColorGradingScopeUpdate({
+  scope,
+  value,
+  selectedSourceFile,
+  fileTree,
+  projectId,
+  domEditSaveTimestampRef,
+  waitForPendingDomEditSaves,
+  readProjectFile,
+  writeProjectFile,
+  recordEdit,
+  reloadPreview,
+  showToast,
+}: ApplyColorGradingScopeOptions): Promise<ColorGradingScopeResult> {
+  await waitForPendingDomEditSaves();
+  if (scope === "project" && hasRelativeLutSource(value)) {
+    showToast(
+      "Project-wide color grading cannot copy relative LUT paths. Apply to this file or use a URL/data LUT.",
+      "error",
+    );
+    return EMPTY_COLOR_GRADING_SCOPE_RESULT;
+  }
+
+  const { files, changedElements } = await patchColorGradingScopeFiles(
+    colorGradingScopePaths(scope, selectedSourceFile, fileTree),
+    value,
+    readProjectFile,
+  );
+  if (Object.keys(files).length === 0) {
+    showToast("No color grading changed", "info");
+    return EMPTY_COLOR_GRADING_SCOPE_RESULT;
+  }
+
+  domEditSaveTimestampRef.current = Date.now();
+  const changedPaths = await saveProjectFilesWithHistory({
+    projectId,
+    label: value ? "Apply color grading" : "Clear color grading",
+    kind: "manual",
+    files,
+    readFile: readProjectFile,
+    writeFile: writeProjectFile,
+    recordEdit,
+  });
+  reloadPreview();
+  showToast(
+    `${value ? "Applied" : "Cleared"} color grading on ${changedElements} media item${changedElements === 1 ? "" : "s"}`,
+    "info",
+  );
+  return { changedFiles: changedPaths.length, changedElements };
+}

package/src/components/studioMediaJobs.ts

@@ -0,0 +1,123 @@
+import type {
+  BackgroundRemovalProgress,
+  BackgroundRemovalResult,
+} from "./editor/propertyPanelTypes";
+
+const MEDIA_JOB_RECONNECT_TIMEOUT_MS = 15_000;
+const ABSOLUTE_OR_ROOT_SOURCE_RE = /^(?:[a-z][a-z0-9+.-]*:|\/)/i;
+
+function parseSerializedColorGrading(value: string): { lut?: { src?: unknown } } | null {
+  try {
+    return JSON.parse(value) as { lut?: { src?: unknown } } | null;
+  } catch {
+    return null;
+  }
+}
+
+function readLutSource(value: string | null): string {
+  const src = value ? parseSerializedColorGrading(value)?.lut?.src : null;
+  return typeof src === "string" ? src.trim() : "";
+}
+
+export function hasRelativeLutSource(value: string | null): boolean {
+  const src = readLutSource(value);
+  return src !== "" && !ABSOLUTE_OR_ROOT_SOURCE_RE.test(src);
+}
+
+function parseProgressEvent(event: Event): BackgroundRemovalProgress | Error {
+  try {
+    return JSON.parse((event as MessageEvent).data) as BackgroundRemovalProgress;
+  } catch {
+    return new Error("Invalid background-removal progress event");
+  }
+}
+
+function getCompleteProgressResult(
+  progress: BackgroundRemovalProgress,
+): BackgroundRemovalResult | Error {
+  if (!progress.outputPath) return new Error("Background removal finished without an output path");
+  return {
+    outputPath: progress.outputPath,
+    backgroundOutputPath: progress.backgroundOutputPath,
+    provider: progress.provider,
+  };
+}
+
+function getTerminalProgressResult(
+  progress: BackgroundRemovalProgress,
+): BackgroundRemovalResult | Error | null {
+  switch (progress.status) {
+    case "complete":
+      return getCompleteProgressResult(progress);
+    case "failed":
+      return new Error(progress.error || "Background removal failed");
+    default:
+      return null;
+  }
+}
+
+export function waitForMediaJob(
+  jobId: string,
+  onProgress?: (progress: BackgroundRemovalProgress) => void,
+  signal?: AbortSignal,
+): Promise<BackgroundRemovalResult> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException("Background removal was cancelled", "AbortError"));
+      return;
+    }
+    const events = new EventSource(`/api/media-jobs/${encodeURIComponent(jobId)}/progress`);
+    let settled = false;
+    let reconnectTimer: number | null = null;
+
+    const clearReconnectTimer = () => {
+      if (reconnectTimer === null) return;
+      window.clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    };
+    const finish = (callback: () => void) => {
+      if (settled) return;
+      settled = true;
+      clearReconnectTimer();
+      signal?.removeEventListener("abort", handleAbort);
+      events.close();
+      callback();
+    };
+    const finishReject = (error: Error) => finish(() => reject(error));
+    const finishResolve = (result: BackgroundRemovalResult) => finish(() => resolve(result));
+    const handleAbort = () => {
+      finishReject(new DOMException("Background removal was cancelled", "AbortError"));
+    };
+    signal?.addEventListener("abort", handleAbort, { once: true });
+
+    // fallow-ignore-next-line complexity
+    events.addEventListener("progress", (event) => {
+      const progress = parseProgressEvent(event);
+      if (progress instanceof Error) {
+        finishReject(progress);
+        return;
+      }
+      clearReconnectTimer();
+      onProgress?.(progress);
+      const terminalResult = getTerminalProgressResult(progress);
+      if (!terminalResult) return;
+      if (terminalResult instanceof Error) {
+        finishReject(terminalResult);
+      } else {
+        finishResolve(terminalResult);
+      }
+    });
+    events.onopen = clearReconnectTimer;
+    events.onerror = () => {
+      if (events.readyState === EventSource.CLOSED) {
+        finishReject(new Error("Lost connection to background-removal job"));
+        return;
+      }
+      if (reconnectTimer === null) {
+        reconnectTimer = window.setTimeout(() => {
+          finishReject(new Error("Lost connection to background-removal job"));
+        }, MEDIA_JOB_RECONNECT_TIMEOUT_MS);
+      }
+    };
+  });
+}