fix(studio): six review fixes for the beginner shell (#4764)

Author: georgi

web/src/hooks/storyboard/useStoryboardServerSync.ts

@@ -70,6 +70,9 @@ export const useStoryboardServerSync = (boardId: string): void => {
   // other reference in the store means unsaved local edits.
   const syncedRef = useRef<StoryboardBoard | null>(null);
   const inFlightRef = useRef(false);
+  // Set when unmount catches a save mid-flight: the finally block runs one
+  // more flush save so the pending edit isn't lost with the timer.
+  const flushAfterSaveRef = useRef(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const utilsRef = useRef(utils);
   utilsRef.current = utils;
@@ -112,13 +115,18 @@ export const useStoryboardServerSync = (boardId: string): void => {
       }
     };
 
-    const save = async (): Promise<void> => {
-      if (disposed || inFlightRef.current) return;
+    const save = async (flush = false): Promise<void> => {
+      if (inFlightRef.current) {
+        if (flush) flushAfterSaveRef.current = true;
+        return;
+      }
+      if (disposed && !flush) return;
       const board = store.getState().boards[boardId];
       const revision = store.getState().serverRevisions[boardId];
       if (!board || !revision || board === syncedRef.current) return;
 
       inFlightRef.current = true;
+      let saved = false;
       try {
         const updated = await trpcClient.storyboards.update.mutate({
           id: boardId,
@@ -127,17 +135,24 @@ export const useStoryboardServerSync = (boardId: string): void => {
           document: boardToDocument(board),
           timelineId: board.timelineId
         });
-        if (disposed) return;
         store.getState().setServerRevision(boardId, updated.updatedAt);
         syncedRef.current = board;
+        saved = true;
         void utilsRef.current.storyboards.list.invalidate();
-        // Edits landed while the save was in flight — go again.
+        // Edits landed while the save was in flight — go again (via the
+        // flush chain when the hook is already unmounted).
         if (store.getState().boards[boardId] !== syncedRef.current) {
-          schedule();
+          if (disposed || flushAfterSaveRef.current) {
+            flushAfterSaveRef.current = true;
+          } else {
+            schedule();
+          }
         }
       } catch (error) {
-        if (disposed) return;
         console.error("Storyboard autosave failed", error);
+        // Unmounted mid-flush: no live hook remains to retry or reload; the
+        // next mount reconciles against the server copy.
+        if (disposed) return;
         if (/modified since last read/i.test(getErrorMessage(error))) {
           // CAS conflict: the server copy wins.
           await load();
@@ -147,6 +162,10 @@ export const useStoryboardServerSync = (boardId: string): void => {
         }
       } finally {
         inFlightRef.current = false;
+        if (saved && flushAfterSaveRef.current) {
+          flushAfterSaveRef.current = false;
+          void save(true);
+        }
       }
     };
 
@@ -171,6 +190,10 @@ export const useStoryboardServerSync = (boardId: string): void => {
       disposed = true;
       unsubscribe();
       if (timerRef.current) clearTimeout(timerRef.current);
+      // Flush any pending debounced edit instead of dropping it with the
+      // timer — leaving the page must not lose the last keystrokes.
+      if (inFlightRef.current) flushAfterSaveRef.current = true;
+      else void save(true);
     };
   }, [boardId]);
 };

web/src/studio/StudioAccountPage.tsx

@@ -28,7 +28,7 @@ const TOPUP_CREDITS = 1_000;
 
 const StudioAccountPage = () => {
   const theme = useTheme();
-  const { status, loading } = useStudioCredits();
+  const { status, loading, unavailable, refetch } = useStudioCredits();
   const utils = trpc.useUtils();
   const [error, setError] = useState<string | null>(null);
 
@@ -50,6 +50,14 @@ const StudioAccountPage = () => {
         sx={{ flex: 1, minHeight: 0, overflowY: "auto", p: SPACING.xl }}
       >
         {loading && <LoadingSpinner />}
+        {unavailable && (
+          <AlertBanner severity="warning">
+            Couldn&apos;t load the credit balance — it is unknown, not empty.{" "}
+            <EditorButton size="small" onClick={refetch}>
+              Retry
+            </EditorButton>
+          </AlertBanner>
+        )}
         {error && (
           <AlertBanner severity="error" onClose={() => setError(null)}>
             {error}

web/src/studio/StudioHome.tsx

@@ -6,7 +6,7 @@
  * editor, which is the one finishing surface the product has.
  */
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import TheatersRoundedIcon from "@mui/icons-material/TheatersRounded";
@@ -56,13 +56,15 @@ const PathCard = ({
   description,
   cta,
   busy,
+  disabled,
   onStart
 }: {
   icon: React.ReactNode;
   title: string;
   description: string;
   cta: string;
   busy: boolean;
+  disabled: boolean;
   onStart: () => void;
 }) => (
   <Card
@@ -78,7 +80,7 @@ const PathCard = ({
       <Text size="small" color="secondary">
         {description}
       </Text>
-      <EditorButton variant="contained" onClick={onStart} disabled={busy}>
+      <EditorButton variant="contained" onClick={onStart} disabled={disabled}>
         {busy ? "Creating…" : cta}
       </EditorButton>
     </FlexColumn>
@@ -94,7 +96,9 @@ const StudioHome = () => {
 
   const storyboards = useStoryboards();
   const scripts = useScripts();
-  const timelines = useTimelines("default");
+  // No project filter: storyboards and scripts list all the user's documents,
+  // so the merged recent list scopes timelines the same way.
+  const timelines = useTimelines();
 
   const recent = useMemo<RecentProject[]>(() => {
     const rows: RecentProject[] = [
@@ -122,20 +126,34 @@ const StudioHome = () => {
       .slice(0, 12);
   }, [storyboards.data, scripts.data, timelines.data]);
 
+  // One creation at a time: both cards disable while either runs, and the
+  // handlers guard on a ref as well so a double-activation can't create two
+  // projects or race the navigation.
+  const creatingRef = useRef(false);
   const startStoryboard = useCallback(() => {
+    if (creatingRef.current) return;
+    creatingRef.current = true;
     setCreating("storyboard");
     createStoryboard
       .mutateAsync({ name: "Untitled storyboard", projectId: "default" })
       .then((created) => navigate(`/studio/storyboard/${created.id}`))
-      .finally(() => setCreating(null));
+      .finally(() => {
+        creatingRef.current = false;
+        setCreating(null);
+      });
   }, [createStoryboard, navigate]);
 
   const startScript = useCallback(() => {
+    if (creatingRef.current) return;
+    creatingRef.current = true;
     setCreating("script");
     createScript
       .mutateAsync({ name: "Untitled script", projectId: "default" })
       .then((created) => navigate(`/studio/script/${created.id}`))
-      .finally(() => setCreating(null));
+      .finally(() => {
+        creatingRef.current = false;
+        setCreating(null);
+      });
   }, [createScript, navigate]);
 
   return (
@@ -161,6 +179,7 @@ const StudioHome = () => {
             description="Describe your idea. The director agent breaks it into shots, renders stills, animates them into clips, and cuts them together."
             cta="New storyboard"
             busy={creating === "storyboard"}
+            disabled={creating !== null}
             onStart={startStoryboard}
           />
           <PathCard
@@ -169,6 +188,7 @@ const StudioHome = () => {
             description="Write or generate a script, cast a voice for every speaker, and turn the voiced lines into a video with captions."
             cta="New script"
             busy={creating === "script"}
+            disabled={creating !== null}
             onStart={startScript}
           />
         </FlexRow>

web/src/studio/StudioScriptPage.tsx

@@ -6,7 +6,7 @@
  * navigates to `/studio/timeline/:id`.
  */
 
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import GroupsIcon from "@mui/icons-material/Groups";
@@ -28,6 +28,7 @@ import {
   useScriptTitle
 } from "../stores/script/ScriptStore";
 import { useScriptServerSync } from "../hooks/script/useScriptServerSync";
+import { useDocumentUndoShortcuts } from "../hooks/useDocumentUndoShortcuts";
 import { useScriptAgentBridge } from "../hooks/script/useScriptAgentBridge";
 import { useAssembleScriptTimeline } from "../hooks/script/useAssembleScriptTimeline";
 import StudioShell from "./StudioShell";
@@ -50,6 +51,15 @@ const StudioScriptPage = () => {
   useScriptServerSync(scriptId);
   useScriptAgentBridge(scriptId);
 
+  const undo = useScriptStore((state) => state.undo);
+  const redo = useScriptStore((state) => state.redo);
+  useDocumentUndoShortcuts({
+    active: true,
+    enabled: true,
+    onUndo: useCallback(() => undo(scriptId), [undo, scriptId]),
+    onRedo: useCallback(() => redo(scriptId), [redo, scriptId])
+  });
+
   const { assemble, assembling, error: assembleError } =
     useAssembleScriptTimeline();
 

web/src/studio/StudioShell.tsx

@@ -21,23 +21,33 @@ import {
   Tooltip
 } from "../components/ui_primitives";
 import { useStudioCredits } from "./useStudioCredits";
+import { useStudioAssistantModel } from "./useStudioAssistantModel";
 
 const CreditsChip = () => {
   const navigate = useNavigate();
-  const { status, remaining, loading } = useStudioCredits();
-  const title = status
-    ? `${status.plan.name} plan — ${status.spentCredits} of ${status.grantedCredits} credits used. 1 credit = 1¢ of generation. Click to manage.`
-    : "Plan & credits";
+  const { status, remaining, loading, unavailable } = useStudioCredits();
+  const title = unavailable
+    ? "Couldn't load the credit balance. Click to retry from the account page."
+    : status
+      ? `${status.plan.name} plan — ${status.spentCredits} of ${status.grantedCredits} credits used. 1 credit = 1¢ of generation. Click to manage.`
+      : "Plan & credits";
+  const label = loading
+    ? "credits…"
+    : unavailable
+      ? "credits unavailable"
+      : `${remaining} credits`;
   return (
     <Tooltip title={title}>
       <span>
         <Chip
           compact
           clickable
           onClick={() => navigate("/studio/account")}
-          color={remaining > 0 ? "primary" : "error"}
+          color={
+            unavailable ? "default" : remaining > 0 ? "primary" : "error"
+          }
           icon={<BoltRoundedIcon />}
-          label={loading ? "credits…" : `${remaining} credits`}
+          label={label}
         />
       </span>
     </Tooltip>
@@ -62,6 +72,7 @@ const StudioShell = ({
 }: StudioShellProps) => {
   const theme = useTheme();
   const navigate = useNavigate();
+  useStudioAssistantModel();
   return (
     <FlexColumn fullHeight sx={{ width: "100%", minHeight: 0 }}>
       <FlexRow

web/src/studio/StudioStoryboardPage.tsx

@@ -20,6 +20,7 @@ import StoryboardQueueOverlay from "../components/storyboard/StoryboardQueueOver
 import { useStoryboardStore } from "../stores/storyboard/StoryboardStore";
 import { useStoryboardGenerationSubscriptions } from "../stores/storyboard/StoryboardGenerationStore";
 import { useStoryboardServerSync } from "../hooks/storyboard/useStoryboardServerSync";
+import { useDocumentUndoShortcuts } from "../hooks/useDocumentUndoShortcuts";
 import { useStoryboardAgentBridge } from "../hooks/storyboard/useStoryboardAgentBridge";
 import { useDirectScreenplay } from "../hooks/storyboard/useDirectScreenplay";
 import { useAssembleTimeline } from "../hooks/storyboard/useAssembleTimeline";
@@ -66,6 +67,17 @@ const StudioStoryboardPage = () => {
   useStoryboardGenerationSubscriptions();
   useStudioModelPolicy(boardId);
 
+  // The board's undo buttons advertise ⌘Z; the page is the only surface, so
+  // it is always the active one.
+  const undo = useStoryboardStore((state) => state.undo);
+  const redo = useStoryboardStore((state) => state.redo);
+  useDocumentUndoShortcuts({
+    active: true,
+    enabled: true,
+    onUndo: useCallback(() => undo(boardId), [undo, boardId]),
+    onRedo: useCallback(() => redo(boardId), [redo, boardId])
+  });
+
   const { direct, directing, error: directError } = useDirectScreenplay();
   const handleDirect = useCallback(
     (shotCount: number) => direct(boardId, shotCount),

web/src/studio/useStudioAssistantModel.ts

@@ -0,0 +1,29 @@
+/**
+ * Pin the Studio assistants to the curated director model. Every editor's
+ * agent panel reads `GlobalChatStore.selectedModel`, so inside the Studio
+ * shell that selection is forced to the curated model (the model picker the
+ * panels render then shows it, and turns run on it — metered like all
+ * `nodetool`-provider calls). The user's own selection is restored when the
+ * shell unmounts, so workspace chat is untouched.
+ */
+
+import { useEffect } from "react";
+import useGlobalChatStore from "../stores/GlobalChatStore";
+import { STUDIO_DIRECTOR_MODEL } from "./curatedModels";
+
+export function useStudioAssistantModel(): void {
+  useEffect(() => {
+    const store = useGlobalChatStore.getState();
+    const previous = store.selectedModel;
+    if (previous.id !== STUDIO_DIRECTOR_MODEL.id) {
+      store.setSelectedModel({ ...STUDIO_DIRECTOR_MODEL });
+    }
+    return () => {
+      // Route swaps unmount the old shell before the next one mounts, so a
+      // studio-to-studio navigation restores here and re-pins immediately.
+      useGlobalChatStore.getState().setSelectedModel(previous);
+    };
+  }, []);
+}
+
+export default useStudioAssistantModel;

web/src/studio/useStudioCredits.ts

@@ -14,6 +14,8 @@ export interface StudioCredits {
   status: CreditStatusOutput | null;
   remaining: number;
   loading: boolean;
+  /** The balance request failed — the balance is unknown, not full or empty. */
+  unavailable: boolean;
   refetch: () => void;
 }
 
@@ -27,6 +29,7 @@ export function useStudioCredits(): StudioCredits {
     status: query.data ?? null,
     remaining: query.data?.balanceCredits ?? 0,
     loading: query.isLoading,
+    unavailable: query.isError,
     refetch: () => void query.refetch()
   };
 }