@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/state/accountPrefs.ts

@@ -0,0 +1,261 @@
+// The editor preferences on the ACCOUNT (gap 5), hosted only.
+//
+// The hosted editor runs on a per-workspace origin, so its localStorage is per
+// workspace and never shared with the dashboard. The account keeps one copy
+// (`users.editor_prefs`, answered on `/auth/me` and written by
+// `PUT /auth/prefs`), so a choice follows the person across workspaces and
+// devices, and a theme picked in dashboard Settings reaches the editor.
+//
+// localStorage stays the boot cache: the store is born from it
+// (`readEditorPrefs`), so the first paint never waits on the network, and a
+// local install or an offline start behaves exactly as before.
+//
+// ONE CLOCK. The only stamp compared is the server's `updatedAt`, against the
+// server stamp this browser last adopted or got back from a save
+// (`SyncState.syncedAt`). A client clock running ahead or behind changes
+// nothing.
+//
+// FIELD BY FIELD. A local change marks its field dirty (kept in localStorage,
+// so a save that never landed is retried at the next boot), and a save sends
+// ONLY the dirty fields. The server's `json_patch` merge then keeps whatever
+// another surface wrote to the rest (the dashboard writes only `theme`).
+//
+// THE MERGE, once per page load:
+// - the account's stamp differs from `syncedAt`: something else wrote since,
+//   so adopt every field it holds that is not dirty here;
+// - dirty fields are then sent; an account that has never saved gets this
+//   browser's whole copy, if this browser ever saved one.
+// After that, every change is one debounced PUT of the dirty fields, after
+// `SAVE_DEBOUNCE_MS` of quiet: the Preferences dialog is a row of switches,
+// and a burst of clicks is one write.
+import { useEffect, useRef } from "react";
+import { useStudioTheme } from "@dailies-studio/ui/theme";
+import type { StudioThemePreference } from "@dailies-studio/ui/theme";
+import { useStore } from "./context.js";
+import { EDITOR_PREF_VALID, hasStoredEditorPrefs } from "./editorPrefs.js";
+import { isCloudWorkspace } from "./posterCapture.js";
+import type { ShotEditorStore } from "./store.js";
+
+/** Quiet time before a change is saved to the account. */
+export const SAVE_DEBOUNCE_MS = 800;
+
+/** The sync bookkeeping, beside `EDITOR_PREFS_KEY`. */
+export const ACCOUNT_SYNC_KEY = "dailies.editor.sync";
+
+/** The fields the account keeps, as the server's closed schema names them
+ *  (@dailies-studio/db editorPrefs.ts `EDITOR_PREF_FIELDS`). */
+export interface AccountPrefs {
+  theme: StudioThemePreference;
+  showGrid: boolean;
+  rulers: boolean;
+  smartGuides: boolean;
+  motionPaths: boolean;
+  toolbarPosition: "bottom" | "top";
+  blockLabels: "fit" | "off";
+  selectMovesPlayhead: boolean;
+  fieldLabels: "compact" | "named";
+  showFpsBadge: boolean;
+  showBackendBadge: boolean;
+}
+
+type Field = keyof AccountPrefs;
+type StoreField = Exclude<Field, "theme">;
+const STORE_FIELDS: readonly StoreField[] = [
+  "showGrid",
+  "rulers",
+  "smartGuides",
+  "motionPaths",
+  "toolbarPosition",
+  "blockLabels",
+  "selectMovesPlayhead",
+  "fieldLabels",
+  "showFpsBadge",
+  "showBackendBadge",
+];
+const FIELDS: readonly Field[] = ["theme", ...STORE_FIELDS];
+
+const isTheme = (v: unknown): v is StudioThemePreference => v === "system" || v === "light" || v === "dark";
+const isValid = (field: Field, v: unknown): boolean =>
+  field === "theme" ? isTheme(v) : EDITOR_PREF_VALID[field](v);
+
+/** The account copy's fields, as the store and the theme hold them now. */
+export function accountPrefsOf(store: ShotEditorStore, theme: StudioThemePreference): AccountPrefs {
+  const s = store.getState();
+  const out = { theme } as AccountPrefs;
+  for (const field of STORE_FIELDS) (out as unknown as Record<string, unknown>)[field] = s[field];
+  return out;
+}
+
+/** One store field through the setter the chrome already uses. */
+function setStoreField(store: ShotEditorStore, field: StoreField, value: unknown): void {
+  switch (field) {
+    case "showGrid":
+      if (value !== store.getState().showGrid) store.toggleGrid();
+      return;
+    case "showFpsBadge":
+      return store.setFpsBadge(value as boolean);
+    case "showBackendBadge":
+      return store.setBackendBadge(value as boolean);
+    case "selectMovesPlayhead":
+      return store.setSelectMovesPlayhead(value as boolean);
+    default:
+      store.setEditorPref(field, value as never);
+  }
+}
+
+/** What this browser knows about the account copy. */
+interface SyncState {
+  /** The server's `updatedAt` last adopted or answered to a save, 0 for never. */
+  syncedAt: number;
+  /** Fields changed here and not yet saved. */
+  dirty: Field[];
+}
+
+function readSync(): SyncState {
+  try {
+    const parsed: unknown = JSON.parse(localStorage.getItem(ACCOUNT_SYNC_KEY) ?? "null");
+    const o = (typeof parsed === "object" && parsed !== null ? parsed : {}) as Record<string, unknown>;
+    const syncedAt = typeof o["syncedAt"] === "number" && Number.isFinite(o["syncedAt"]) ? o["syncedAt"] : 0;
+    const dirty = Array.isArray(o["dirty"]) ? FIELDS.filter((f) => (o["dirty"] as unknown[]).includes(f)) : [];
+    return { syncedAt, dirty };
+  } catch {
+    return { syncedAt: 0, dirty: [] };
+  }
+}
+
+function writeSync(sync: SyncState): void {
+  try {
+    localStorage.setItem(ACCOUNT_SYNC_KEY, JSON.stringify(sync));
+  } catch {
+    /* storage disabled: the session still syncs, it just forgets between loads */
+  }
+}
+
+type ServerPrefs = Partial<Record<Field, unknown>> & { updatedAt?: unknown };
+
+/** Mounted once, in App: the boot merge, then a debounced save per change. */
+export function useAccountPrefs(): void {
+  const store = useStore();
+  const { preference, setPreference } = useStudioTheme();
+  // The theme as the sync knows it. The store subscription runs outside
+  // React, so it reads the theme here, not from a render.
+  const theme = useRef(preference);
+  // The change hook, set while hosted.
+  const changed = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    if (!isCloudWorkspace()) return;
+    let live = true;
+    let ready = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const sync = readSync();
+    const dirty = new Set<Field>(sync.dirty);
+    const persist = () => writeSync({ syncedAt: sync.syncedAt, dirty: [...dirty] });
+    // The value each field had when last sent, adopted or loaded. A field
+    // that moves off it is a local change.
+    const baseline = accountPrefsOf(store, theme.current);
+
+    /** Adopt the account's fields, except those `skip` names (changed here
+     *  since). The baseline moves FIRST, so the adoption is not a change. */
+    const adopt = (saved: ServerPrefs, skip: ReadonlySet<Field>) => {
+      for (const field of FIELDS) {
+        const value = saved[field];
+        if (skip.has(field) || !isValid(field, value)) continue;
+        (baseline as unknown as Record<string, unknown>)[field] = value;
+        if (field === "theme") {
+          theme.current = value as StudioThemePreference;
+          setPreference(value as StudioThemePreference);
+        } else setStoreField(store, field, value);
+      }
+    };
+
+    const save = () => {
+      if (!live || dirty.size === 0) return;
+      const sent = accountPrefsOf(store, theme.current);
+      const body: Partial<AccountPrefs> = {};
+      for (const field of dirty) (body as Record<string, unknown>)[field] = sent[field];
+      // A failed save costs only the sync: the dirty marks stay in
+      // localStorage and the next change or boot sends them again.
+      void fetch("/auth/prefs", {
+        method: "PUT",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+      })
+        .then((res) => (res.ok ? res.json() : null))
+        .then((answer: { editorPrefs?: ServerPrefs | null } | null) => {
+          const saved = answer?.editorPrefs;
+          if (!live || saved == null || typeof saved.updatedAt !== "number") return;
+          const now = accountPrefsOf(store, theme.current);
+          // Clean only what is still what was sent: a change made while the
+          // request flew stays dirty for the next save.
+          for (const field of Object.keys(body) as Field[]) if (now[field] === sent[field]) dirty.delete(field);
+          sync.syncedAt = saved.updatedAt;
+          persist();
+          // The answer is the whole merged copy: take what another surface
+          // wrote meanwhile, but never over a field just sent or still dirty.
+          adopt(saved, new Set<Field>([...dirty, ...(Object.keys(body) as Field[])]));
+        })
+        .catch(() => {});
+    };
+
+    const schedule = () => {
+      if (timer !== null) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        save();
+      }, SAVE_DEBOUNCE_MS);
+    };
+
+    changed.current = () => {
+      const now = accountPrefsOf(store, theme.current);
+      let moved = false;
+      for (const field of FIELDS) {
+        if (now[field] === baseline[field]) continue;
+        (baseline as unknown as Record<string, unknown>)[field] = now[field];
+        dirty.add(field);
+        moved = true;
+      }
+      if (!moved) return;
+      persist();
+      if (ready) schedule();
+    };
+    const unsubscribe = store.subscribeCold(() => changed.current?.());
+
+    void fetch("/auth/me", { credentials: "same-origin" })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((me: { signedIn?: boolean; editorPrefs?: ServerPrefs | null } | null) => {
+        if (!live || me?.signedIn !== true) return;
+        const saved = me.editorPrefs ?? null;
+        if (saved !== null && typeof saved.updatedAt === "number") {
+          if (saved.updatedAt !== sync.syncedAt) {
+            adopt(saved, dirty);
+            sync.syncedAt = saved.updatedAt;
+            persist();
+          }
+        } else if (hasStoredEditorPrefs()) {
+          // An account that never saved: seed it with this browser's copy.
+          for (const field of FIELDS) dirty.add(field);
+          persist();
+        }
+        ready = true;
+        save();
+      })
+      .catch(() => {});
+
+    return () => {
+      live = false;
+      unsubscribe();
+      changed.current = null;
+      if (timer !== null) clearTimeout(timer);
+    };
+  }, [store, setPreference]);
+
+  // A theme change: the same path as a store field. Before the hosted effect
+  // runs (or on a local install), only the ref moves.
+  useEffect(() => {
+    if (theme.current === preference) return;
+    theme.current = preference;
+    changed.current?.();
+  }, [preference]);
+}

package/src/state/agentActions.ts

@@ -14,8 +14,11 @@
 import { AgentApiError, applyAgentEvent, createItemIds } from "@dailies-studio/agent-client";
 import type { AgentEvent, AgentProposalItem, TranscriptSink } from "@dailies-studio/agent-client";
 import { ApiError, agent } from "../api.js";
+import { boardSubjectOf, isPartId } from "./storyboardModel.js";
 import type { ShotEditorStore } from "./store.js";
 import type { ShotEditorState } from "./types.js";
+import { authoringFrame } from "./viewMode.js";
+import { readOnlyReason } from "./workspace.js";
 
 function message(e: unknown): string {
   return e instanceof Error ? e.message : String(e);
@@ -29,6 +32,18 @@ function isConflict(e: unknown): boolean {
 }
 
 const itemId = createItemIds("sh");
+const activeTurns = new WeakMap<ShotEditorStore, object>();
+
+/** The Project each agent session was asked from (its doc id and display
+ *  title), by session id, per store. A card stays pending across a Project
+ *  switch, so a component file the agent made is made for the Project that
+ *  asked, never for whichever one is open when the card is applied. */
+const askedFrom = new WeakMap<ShotEditorStore, Map<string, { docId: string; title: string }>>();
+/** How many asks `askedFrom` remembers, newest kept.
+ *  ponytail: a create card from an older ask links nothing and says where it
+ *  lists, as a card no ask of this page made does. Drop an entry once its
+ *  session's cards are all applied if that ever bites. */
+export const ASKED_FROM_MAX = 32;
 
 export async function refreshAgentCredentials(store: ShotEditorStore): Promise<void> {
   try {
@@ -57,7 +72,8 @@ export async function clearAgentKey(store: ShotEditorStore): Promise<void> {
 
 /**
  * What "this" means in the shot chrome: which surface is asking, which shot is
- * open, which scene and frame the author is looking at.
+ * open, which definition the author has entered, and which scene and frame they
+ * are looking at.
  *
  * `surface: "shot"` is load-bearing, not decoration — it is what makes the
  * server append the shot addendum to the system prompt AND compose the shot
@@ -72,16 +88,64 @@ export function buildShotAgentContext(s: ShotEditorState): unknown {
   // The playhead and the open scene, unconditionally. Every layer in this lane
   // renders AT a frame, so "which moment am I looking at" is always a real
   // statement about what the author means by "this".
-  shot.frame = s.frame;
-  if (s.sceneId !== null) shot.sceneId = s.sceneId;
-  const primary = s.selection[0];
-  if (primary !== undefined) shot.selectedLayerId = primary;
+  //
+  // AND THE FRAME FOLLOWS THE CONTEXT, because the context decides what a frame
+  // MEANS. Inside a definition the chrome's clock is `defFrame` — def-local,
+  // starting at 0 — and `frame` is master time, which nothing on screen is
+  // showing. Sending the master frame there would have the agent read one moment
+  // while the author is looking at another, with no way for either to notice.
+  if (s.editingDef !== null) shot.editingDef = s.editingDef;
+  shot.frame = authoringFrame(s);
+  // The board, when it is what the author is looking at: the flag tells the
+  // model to read get_storyboard before touching scenes, and the selected
+  // card or board subject (a still, a gap or a cut) is "this" in the same
+  // sense the selected layer is. The board shows no layers and enters no
+  // Shot, so it sends no layer; the part is the open shot board's plan, else
+  // the one shot card selected, and the scene is that plan's Shot.
+  if (s.storyboardOpen) {
+    shot.storyboardOpen = true;
+    const reference = s.storyboardSelection.find((id) => id.startsWith("ref_"));
+    if (reference !== undefined) shot.selectedReferenceId = reference;
+    const subject = boardSubjectOf(s.doc, s.storyboardSelection);
+    if (subject !== null) shot.boardSubject = subject.id;
+    const only = s.storyboardSelection.length === 1 ? s.storyboardSelection[0]! : null;
+    const partId = s.storyboardPlan ?? (only !== null && isPartId(only) ? only : null);
+    const part = partId === null ? undefined : s.doc?.storyboard?.parts.find((p) => p.id === partId);
+    if (part !== undefined) {
+      shot.selectedPartId = part.id;
+      if (part.scene !== undefined && s.doc?.scenes.includes(part.scene) === true) shot.sceneId = part.scene;
+      // On the shot board, the sketch on screen and its first selected item.
+      const sketch = s.storyboardPlan === part.id ? part.sketches?.find((k) => k.id === s.storyboardSketch) : undefined;
+      if (sketch !== undefined) {
+        shot.sketchId = sketch.id;
+        const item = s.sketchSelection.find((id) => sketch.items.some((i) => i.id === id));
+        if (item !== undefined) shot.selectedSketchItemId = item;
+      }
+    }
+  } else {
+    if (s.sceneId !== null) shot.sceneId = s.sceneId;
+    const primary = s.selection[0];
+    if (primary !== undefined) shot.selectedLayerId = primary;
+  }
   return { surface: "shot", ...(Object.keys(shot).length > 0 ? { shot } : {}) };
 }
 
 /** Every key `buildShotAgentContext` may put under `context.shot`. The server
  *  rejects anything else, so this list and the server's are one contract. */
-export const SHOT_CONTEXT_KEYS = ["docName", "componentName", "frame", "sceneId", "selectedLayerId"];
+export const SHOT_CONTEXT_KEYS = [
+  "docName",
+  "componentName",
+  "frame",
+  "sceneId",
+  "editingDef",
+  "selectedLayerId",
+  "storyboardOpen",
+  "selectedReferenceId",
+  "selectedPartId",
+  "boardSubject",
+  "sketchId",
+  "selectedSketchItemId",
+];
 
 /** The store, seen as the shared reducer's three transcript verbs. */
 function sinkFor(store: ShotEditorStore): TranscriptSink {
@@ -97,23 +161,77 @@ function sinkFor(store: ShotEditorStore): TranscriptSink {
 export async function askAgent(store: ShotEditorStore, prompt: string): Promise<void> {
   const s = store.getState();
   if (s.agentRunning || prompt.trim() === "") return;
+  const turn = {};
+  const userId = itemId();
+  activeTurns.set(store, turn);
   store.setAgentError(null);
-  store.appendAgentItem({ id: itemId(), kind: "user", text: prompt });
+  store.appendAgentItem({ id: userId, kind: "user", text: prompt });
   store.setAgentRunning(true);
+  let valid = true;
+  let sessionId: string | null = null;
+  let cancelling: Promise<void> | null = null;
+  const ownsTurn = (): boolean => activeTurns.get(store) === turn;
+  const cancelObsolete = (): Promise<void> => {
+    if (sessionId === null) return Promise.resolve();
+    cancelling ??= agent.cancel(sessionId).catch(() => {});
+    return cancelling;
+  };
+  const stillCurrent = (): boolean => {
+    const current = store.getState();
+    return valid && ownsTurn() && current.name === s.name && current.doc?.id === s.doc?.id &&
+      current.agentItems.some((item) => item.id === userId);
+  };
+  // Latch any Project departure, even A -> B -> A between two awaited
+  // responses. Clearing the originating transcript also ends its turn.
+  // Release this turn's running flag immediately so the new Project can ask;
+  // its eventual finally must not stop a newer request. Cold: a departure
+  // and the transcript are never a transport tick.
+  const unsubscribe = store.subscribeCold(() => {
+    if (!valid || stillCurrent()) return;
+    valid = false;
+    if (ownsTurn()) {
+      activeTurns.delete(store);
+      store.setAgentRunning(false);
+    }
+    void cancelObsolete();
+  });
   try {
-    const { sessionId } = await agent.createSession({
+    await store.flush();
+    if (!stillCurrent()) return;
+    if (store.getState().dirty)
+      throw new Error("The Project changed while saving. Let it finish saving, then ask the agent again.");
+    const created = await agent.createSession({
       prompt,
       ...(s.agentModel !== null ? { model: s.agentModel } : {}),
       context: buildShotAgentContext(s),
     });
-    store.setAgentSession(sessionId);
-    await agent.events(sessionId, (event: AgentEvent) => {
-      applyAgentEvent(sinkFor(store), sessionId, event, itemId);
+    sessionId = created.sessionId;
+    if (s.doc !== null) {
+      const asked = askedFrom.get(store) ?? new Map<string, { docId: string; title: string }>();
+      asked.set(sessionId, { docId: s.doc.id, title: s.doc.title ?? s.name ?? s.doc.name });
+      // A Map keeps insertion order, so its first key is the oldest ask.
+      const oldest = asked.keys().next();
+      if (asked.size > ASKED_FROM_MAX && oldest.done !== true) asked.delete(oldest.value);
+      askedFrom.set(store, asked);
+    }
+    if (!stillCurrent()) {
+      await cancelObsolete();
+      return;
+    }
+    const currentSession = sessionId;
+    store.setAgentSession(currentSession);
+    await agent.events(currentSession, (event: AgentEvent) => {
+      if (!stillCurrent()) return;
+      applyAgentEvent(sinkFor(store), currentSession, event, itemId);
     });
   } catch (e) {
-    store.setAgentError(message(e));
+    if (stillCurrent()) store.setAgentError(message(e));
   } finally {
-    store.setAgentRunning(false);
+    unsubscribe();
+    if (ownsTurn()) {
+      activeTurns.delete(store);
+      store.setAgentRunning(false);
+    }
   }
 }
 
@@ -127,6 +245,29 @@ export async function cancelAgent(store: ShotEditorStore): Promise<void> {
   }
 }
 
+/**
+ * A component file the agent created is MADE FOR THE PROJECT THAT ASKED, as
+ * New › Code makes one for the Project it was pressed in: listed under This
+ * project even before a shot uses it. Only while that Project is the one
+ * open, read after every await of the apply: otherwise nothing is linked and
+ * the author is told where to tick it. A `.ts` helper is not a component
+ * file, so it is never linked. Nothing here throws (`setComponentFile`
+ * answers its refusals).
+ */
+function linkMadeFile(store: ShotEditorStore, sessionId: string, rel: string): void {
+  const asked = askedFrom.get(store)?.get(sessionId);
+  if (asked === undefined) {
+    store.reportError(`${rel} lists under Your library until someone ticks Made for this project in the Project it is for.`);
+    return;
+  }
+  if (store.getState().doc?.id !== asked.docId) {
+    store.reportError(`${rel} was made for ${asked.title}: open it there and tick Made for this project.`);
+    return;
+  }
+  const out = store.setComponentFile(rel, true);
+  if (!out.ok) store.reportError(`${rel} shows under Your library. ${out.reason}`);
+}
+
 function proposalOf(store: ShotEditorStore, id: string): AgentProposalItem | undefined {
   return store
     .getState()
@@ -154,6 +295,12 @@ function proposalOf(store: ShotEditorStore, id: string): AgentProposalItem | und
 export async function applyAgentProposal(store: ShotEditorStore, proposalId: string): Promise<void> {
   const item = proposalOf(store, proposalId);
   if (item === undefined || item.status !== "pending") return;
+  // An apply writes the document on the server. The card stays pending, so an
+  // editor who opens the Project later can still apply it.
+  if (store.getState().readOnly) {
+    store.reportError(readOnlyReason(store.getState()));
+    return;
+  }
   store.patchAgentProposal(proposalId, { status: "applying", error: null });
   // THE AUTHOR'S OWN EDITS GO FIRST. Apply is a button in the same window as
   // the canvas, so "drag a layer, then click Apply" is an ordinary gesture —
@@ -182,6 +329,18 @@ export async function applyAgentProposal(store: ShotEditorStore, proposalId: str
     return;
   }
 
+  // A FILE APPLY UNDER AN OPEN BUFFER: the bus says "files changed", which
+  // marks a clean buffer for nothing, so the editor would go on showing the
+  // text from before the apply and a later save would write it back. A clean
+  // buffer takes the disk; a dirty one cannot exist here (`askAgent` refuses
+  // while the file is dirty) and, if typed into since, keeps its 409 path.
+  if (item.proposalKind === "edit" || item.proposalKind === "create") {
+    const rel = item.path.replace(/\\/g, "/").replace(/^\.\//, "");
+    const buffer = store.getState().codeFiles[rel];
+    if (buffer !== undefined && buffer.content === buffer.savedContent) await store.reloadCodeFile(rel);
+    if (item.proposalKind === "create" && /\.[jt]sx$/.test(rel)) linkMadeFile(store, item.sessionId, rel);
+    return;
+  }
   if (item.proposalKind !== "shot") return;
   if (store.getState().name !== item.docName && item.baseRev === null) {
     // A CREATE names a shot this chrome does not have open — by definition, it
@@ -198,6 +357,5 @@ export async function applyAgentProposal(store: ShotEditorStore, proposalId: str
     }
   }
   // …but an EDIT of some other shot never yanks the author out of the document
-  // they are working in. It landed on disk; the switcher will show it.
-  void store.refreshShots();
+  // they are working in. It landed on disk, and Project Home lists it.
 }