@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/header/StatusBadges.tsx

@@ -1,49 +1,380 @@
-// What the chrome knows and the author cannot see: save state, codegen refusal,
-// and which GL backend actually came up.
+// What the chrome knows and the author cannot see, in two places.
 //
-// The backend badge is not decoration, but read it for what it is: the shot
-// lane PINS WebGL (`SHOT_STAGE_BACKEND`, packages/shot/src/stageBackend.ts) so
-// the editor previews on the same backend the export renders on — "webgl" here
-// is the pin working, not a fallback event. The badge earns its keep on the
-// day something changes that pin: a backend the export lane cannot reproduce
-// is the first thing to check when an effect looks wrong in one place and
-// right in the other.
-import { useShotEditor } from "../../state/context.js";
-
-export function StatusBadges() {
+// `SaveBadges` sit in the top bar: save state and a codegen refusal, which are
+// facts about the DOCUMENT. `StageBadges` sit in the canvas bar: the frame rate
+// and the GL backend, which are facts about the PICTURE under that bar.
+//
+// The backend chip was once removed under "a badge is an event, never a
+// setting": the shot lane pinned preview and export to one backend
+// (`SHOT_STAGE_BACKEND`), so the chip said "webgl" in every session that has
+// ever run. That pin now covers the EXPORT only — the preview takes the
+// WebGPU-first default and lands on whichever backend the host browser has
+// (packages/shot/src/stageBackend.ts) — so the word varies per session again
+// and is worth a chip. `stageInfo.backend` is the stage's own onReady report,
+// read off the live renderer after three's silent fallback has or has not
+// happened, which is exactly what an import-time constant cannot tell you.
+//
+// THE FPS CHIP IS AN EVENT TOO, and playback is the event: it appears when the
+// transport starts and goes when it stops, so it never becomes a permanent
+// number decorating an idle bar. What it reports is what the STAGE presented,
+// measured stage-side over one-second windows and sent across the bridge — not
+// the chrome's own seek rate, which is what the transport asked for and reads
+// ~60 while the picture runs at 18, because the stage coalesces requests and
+// drops publications exactly when the two come apart. While the playback
+// render scale holds the picture below the display's density (bridge v52), the
+// chip says by how much ("24 fps · 85%"), and its title says why.
+//
+// A BROKEN PIECE IS AN EVENT THAT STANDS. When the stage isolates a layer, a
+// background, a post stack or a transition that threw (bridge v34), the
+// danger chip says how many, first in the row so it is the last to wrap away,
+// and its title names each one and what it threw. It is not on the View >
+// Status badges switch: a picture with a hole in it is not a preference.
+//
+// A LIVE-SYNC PROJECT SWAPS THE SAVE CHIP FOR THE SYNC CHIP (R5, Paper page
+// 21 "Sync status"): one quiet line that only speaks up when work is not on
+// the server yet. Saved and Syncing stay grey; Offline turns warn and counts
+// what waits on this device. It opens a popover naming every state, with
+// "Try now" on the reconnect row. A full disk adds `SyncQuotaBanner`.
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Popover } from "@dailies-studio/ui";
+import { describePieceFailure, pieceLayerLabel } from "@dailies-studio/shot/doc";
+import type { PlaybackResolution, StagePerformanceReport } from "../../bridgeTypes.js";
+import { CHECK_ICON } from "../../icons.js";
+import { useShotEditor, useShotEditorHot, useStore } from "../../state/context.js";
+import type { SyncStatus } from "../../state/sync.js";
+import { SYNC_HOLD_REASON } from "../../state/workspace.js";
+
+/** The document's state: a codegen refusal and the save chip. Never on the
+ *  View > Status badges switch, see `showFpsBadge` in types.ts. */
+export function SaveBadges() {
   const saveState = useShotEditor((s) => s.saveState);
   const dirty = useShotEditor((s) => s.dirty);
   const emitWarning = useShotEditor((s) => s.emitWarning);
-  const stageInfo = useShotEditor((s) => s.stageInfo);
   const name = useShotEditor((s) => s.name);
+  const sync = useShotEditor((s) => s.syncStatus);
+  const save = saveChip(saveState, dirty);
 
   return (
     <div className="status-badges">
-      {stageInfo === null ? null : (
-        <span className="badge badge-quiet" title={`${stageInfo.width}x${stageInfo.height}`}>
-          {stageInfo.backend}
-        </span>
-      )}
       {emitWarning === null ? null : (
-        <span className="badge badge-warn" title={emitWarning}>
+        <span className="status-chip status-chip-warn" title={emitWarning}>
           codegen
         </span>
       )}
-      {name === null ? null : (
-        <span className={`badge badge-${saveState}`} title={saveLabel(saveState, dirty)}>
-          {saveLabel(saveState, dirty)}
+      {name === null ? null : sync !== null ? (
+        <SyncChip status={sync} />
+      ) : save === null ? null : (
+        <span className={`status-chip status-chip-${save.tone}`} title={save.text}>
+          {/* Saved wears Paper's check: the quiet state, read at a glance. */}
+          {save.tone === "saved" ? CHECK_ICON : null}
+          {save.text}
         </span>
       )}
     </div>
   );
 }
 
-function saveLabel(saveState: string, dirty: boolean): string {
-  if (saveState === "error") return "save failed";
-  if (saveState === "saving") return "saving…";
+const changes = (n: number): string => (n === 1 ? "1 change" : `${n} changes`);
+
+function glyph(size: 14 | 16, children: ReactNode): ReactNode {
+  return (
+    <svg
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.4}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+const SAVED_ICON = glyph(14, <path d="M3 7.4L5.8 10L11 4.5" />);
+const CLOUD_OFF_ICON = glyph(
+  14,
+  <>
+    <path d="M4 11h6.2a2.6 2.6 0 0 0 .4-5.17A3.6 3.6 0 0 0 3.7 5.2 2.9 2.9 0 0 0 4 11Z" />
+    <path d="M2 2l10 10" />
+  </>,
+);
+const SYNCING_ICON = glyph(
+  14,
+  <>
+    <circle cx="7" cy="7" r="4.8" className="sync-ring" />
+    <path d="M7 2.2a4.8 4.8 0 0 1 4.8 4.8" className="sync-arc" />
+  </>,
+);
+const RECONNECT_ICON = glyph(
+  14,
+  <>
+    <path d="M11.5 6.5A4.6 4.6 0 0 0 3.2 4.4M2.5 7.5a4.6 4.6 0 0 0 8.3 2.1" />
+    <path d="M3 2v2.6h2.6M11 12V9.4H8.4" />
+  </>,
+);
+const CHEVRON = (
+  <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth={1.3} strokeLinecap="round" aria-hidden="true" className="sync-chevron">
+    <path d="M2.5 4l2.5 2.5L7.5 4" />
+  </svg>
+);
+const WARN_ICON = glyph(
+  16,
+  <>
+    <path d="M8 2.2L14.2 13H1.8L8 2.2Z" />
+    <path d="M8 6.5v3" />
+    <circle cx="8" cy="11.2" r="0.8" fill="currentColor" stroke="none" />
+  </>,
+);
+
+type SyncState = "saved" | "syncing" | "offline" | "reconnecting" | "held";
+
+/** The one state the sync chip says. */
+export function syncState(s: SyncStatus): SyncState {
+  if (s.hold !== null) return "held";
+  if (!s.connected) return s.waiting > 0 ? "offline" : "reconnecting";
+  return s.waiting > 0 ? "syncing" : "saved";
+}
+
+/** Whole seconds until `at`, ticking each second while `live`. */
+function useSecondsUntil(at: number | null, live: boolean): number | null {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (at === null || !live) return;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [at, live]);
+  return at === null ? null : Math.max(0, Math.ceil((at - now) / 1000));
+}
+
+function SyncChip({ status }: { status: SyncStatus }) {
+  const store = useStore();
+  const anchor = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+  const seconds = useSecondsUntil(status.retryAt, open);
+  const state = syncState(status);
+  const { waiting, hold } = status;
+
+  const chip: Record<SyncState, { tone: string; icon: ReactNode; text: string }> = {
+    saved: { tone: "saved", icon: SAVED_ICON, text: "saved" },
+    syncing: { tone: "saved", icon: SYNCING_ICON, text: "syncing…" },
+    offline: { tone: "offline", icon: CLOUD_OFF_ICON, text: `Offline, ${changes(waiting)} saved on this device` },
+    reconnecting: { tone: "saved", icon: RECONNECT_ICON, text: "reconnecting…" },
+    held: { tone: "error", icon: null, text: hold === "quota" ? "not stored" : "read only" },
+  };
+  const rows: Array<{ id: SyncState; icon: ReactNode; title: ReactNode; text: string }> = [
+    { id: "saved", icon: SAVED_ICON, title: "Saved", text: "Every change is on the server." },
+    {
+      id: "syncing",
+      icon: SYNCING_ICON,
+      title: "Syncing",
+      text:
+        state === "syncing"
+          ? `Sending ${changes(waiting)}. Peers see them as they land.`
+          : "Changes send as you make them. Peers see them as they land.",
+    },
+    {
+      id: "offline",
+      icon: CLOUD_OFF_ICON,
+      title: "Offline",
+      text: "Keep working. They send when you are back online. Closing the tab is safe.",
+    },
+    {
+      id: "reconnecting",
+      icon: RECONNECT_ICON,
+      title: (
+        <>
+          <span>{seconds === null ? "Reconnecting" : `Reconnecting in ${seconds} s`}</span>
+          {status.connected || hold !== null ? null : (
+            <button type="button" className="sync-try" data-testid="sync-try-now" onClick={() => store.syncRetryNow()}>
+              Try now
+            </button>
+          )}
+        </>
+      ),
+      text: "Retries wait longer each time, with a little jitter.",
+    },
+  ];
+  const c = chip[state];
+
+  return (
+    <>
+      <button
+        ref={anchor}
+        type="button"
+        className={`status-chip status-chip-${c.tone} sync-chip`}
+        data-testid="sync-chip"
+        data-state={state}
+        aria-expanded={open}
+        title={hold === null ? "Sync status" : SYNC_HOLD_REASON[hold]}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {c.icon}
+        {c.text}
+        {state === "offline" ? CHEVRON : null}
+      </button>
+      <Popover open={open} anchor={anchor} onClose={() => setOpen(false)} align="right" className="sync-pop">
+        <div className="sync-panel" data-testid="sync-panel">
+          <div className="sync-head">
+            <span className="sync-title">Sync</span>
+            <span className="sync-device">this device · {status.tabs === 1 ? "1 tab" : `${status.tabs} tabs`}</span>
+          </div>
+          {hold === null ? null : (
+            <div className="sync-row is-current is-held">
+              <span className="sync-icon">{WARN_ICON}</span>
+              <span className="sync-body">
+                <span className="sync-row-title">{hold === "quota" ? "Not stored" : "Read only"}</span>
+                <span className="sync-row-text">{SYNC_HOLD_REASON[hold]}</span>
+              </span>
+            </div>
+          )}
+          {rows.map((row) => (
+            <div key={row.id} className={`sync-row${row.id === state ? " is-current" : ""}`} data-row={row.id}>
+              <span className="sync-icon">{row.icon}</span>
+              <span className="sync-body">
+                <span className="sync-row-title">{row.title}</span>
+                <span className="sync-row-text">{row.text}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </Popover>
+    </>
+  );
+}
+
+/** "Edits cannot be stored on this device" (Paper page 21): editing is held
+ *  until the browser takes the waiting changes again. Sticky, no dismiss. */
+export function SyncQuotaBanner() {
+  const store = useStore();
+  const status = useShotEditor((s) => s.syncStatus);
+  const [busy, setBusy] = useState(false);
+  if (status?.hold !== "quota") return null;
+  const retry = (prune: boolean): void => {
+    setBusy(true);
+    void store.syncRetryStorage(prune).finally(() => setBusy(false));
+  };
+  const n = status.waiting;
+  return (
+    <div className="sync-banner" role="alert" data-testid="sync-quota">
+      <span className="sync-banner-icon">{WARN_ICON}</span>
+      <span className="sync-banner-body">
+        <span className="sync-banner-title">Edits cannot be stored on this device</span>
+        <span className="sync-banner-text">
+          The browser is out of space. Editing is paused so nothing is lost.
+          {n > 0 ? ` Your ${changes(n)} saved ${n === 1 ? "is" : "are"} safe.` : ""}
+        </span>
+      </span>
+      <button type="button" className="sync-banner-free" disabled={busy} onClick={() => retry(true)}>
+        Free up space
+      </button>
+      <button type="button" className="sync-banner-retry" disabled={busy} onClick={() => retry(false)}>
+        Try again
+      </button>
+    </div>
+  );
+}
+
+/** The picture's state: the presented rate while playing, and the backend.
+ *  Both answer to View > Status badges. */
+export function StageBadges() {
+  const backend = useShotEditor((s) => s.stageInfo?.backend ?? null);
+  const playing = useShotEditor((s) => s.playing);
+  // Hot: a report written while the transport plays wakes no cold reader.
+  const perf = useShotEditorHot((s) => s.stagePerf);
+  const showFps = useShotEditor((s) => s.showFpsBadge);
+  const resolution = useShotEditor((s) => s.playbackResolution);
+  const showBackend = useShotEditor((s) => s.showBackendBadge);
+  const failures = useShotEditor((s) => s.stagePieceFailures);
+  const renderErrors = useShotEditor((s) => s.stageRenderErrors);
+  const doc = useShotEditor((s) => s.doc);
+  // ONE chip for everything the stage could not draw: an isolated piece and a
+  // render fallback (an undecodable html layer, a font, a texture) are the
+  // same news to the author, and the same refusal at export.
+  const broken = failures.length + renderErrors.length;
+
+  return (
+    <div className="stage-badges" data-testid="stage-badges">
+      {broken === 0 ? null : (
+        <span
+          className="status-chip status-chip-error"
+          data-testid="piece-failures-badge"
+          role="status"
+          title={[
+            ...failures.map((failure) => describePieceFailure(failure, pieceLayerLabel(doc, failure))),
+            ...renderErrors,
+          ].join("\n")}
+        >
+          {broken === 1 ? "1 broken piece" : `${broken} broken pieces`}
+        </span>
+      )}
+      {showFps && playing && perf !== null ? (
+        <span
+          className="status-chip status-chip-quiet status-chip-fps"
+          data-testid="fps-badge"
+          data-render-scale={perf.renderScale}
+          title={fpsTitle(perf, resolution)}
+        >
+          {Math.round(perf.presentedFps)} fps
+          {perf.renderScale < 1 ? ` · ${Math.round(perf.renderScale * 100)}%` : null}
+        </span>
+      ) : null}
+      {backend === null || !showBackend ? null : (
+        <span
+          className="status-chip status-chip-quiet"
+          data-testid="backend-badge"
+          title={`preview backend: ${backend}. Exports always render on webgl.`}
+        >
+          {backend}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** The fps chip's title: the presented rate, the GPU's time when the stage
+ *  measured it, and while the picture renders below the display's density,
+ *  how far and why (bridge v52). */
+export function fpsTitle(perf: StagePerformanceReport, resolution: PlaybackResolution): string {
+  const rate =
+    `Presented ${Math.round(perf.presentedFps)} of ${Math.round(perf.expectedFps)} expected frames ` +
+    `in the last second, ${perf.droppedPublications} dropped.`;
+  const gpu = perf.gpuMs === null ? "" : ` The GPU took ${perf.gpuMs.toFixed(1)} ms a frame (p95).`;
+  if (!(perf.renderScale < 1)) return rate + gpu;
+  const why = resolution === "fast" ? "Playback resolution is Fast" : "the GPU could not keep up";
+  return (
+    `${rate}${gpu} Rendering at ${Math.round(perf.renderScale * 100)}% of the display's resolution while ` +
+    `playing, because ${why}. Paused frames and exports are always full resolution.`
+  );
+}
+
+/** The chip's word AND its tone, or NULL when there is nothing to say.
+ *
+ *  ONE FUNCTION FOR BOTH, because they disagreed. The word has always come
+ *  from `dirty` first and the class was written straight off `saveState`, so
+ *  the ordinary state after a first autosave — `saveState: "saved"` with a
+ *  pending edit — rendered the word "unsaved" wearing `.status-chip-saved`. That
+ *  cost nothing while `.status-chip-saved` had no rule; the moment it got the quiet
+ *  treatment it deserves, the one chip an author must not miss became the
+ *  faintest thing on the bar. The tone now falls out of the same branch that
+ *  picks the word, so the two cannot drift again.
+ *
+ *  Null is a state the chip used to spell "—": a freshly opened, untouched
+ *  document sat behind a bordered pill containing an em-dash, which is a
+ *  control-shaped object that reads as information and carries none. Silence
+ *  is the honest rendering of "saved, and nothing has happened since" — the
+ *  chip returns the moment there is a word for it, which is what makes its
+ *  appearance mean something. */
+type SaveChip = { tone: "error" | "saving" | "idle" | "saved"; text: string };
+
+function saveChip(saveState: string, dirty: boolean): SaveChip | null {
+  if (saveState === "error") return { tone: "error", text: "save failed" };
+  if (saveState === "saving") return { tone: "saving", text: "saving…" };
   // "saved" plus pending edits is not saved — the badge follows the DOCUMENT,
   // not the last request, or an autosave debounce reads as "everything is on
   // disk" for the whole 400ms an author might close the tab in.
-  if (dirty) return "unsaved";
-  return saveState === "saved" ? "saved" : "—";
+  if (dirty) return { tone: "idle", text: "unsaved" };
+  return saveState === "saved" ? { tone: "saved", text: "saved" } : null;
 }

package/src/panels/header/SyncDeletedDialog.tsx

@@ -0,0 +1,88 @@
+// A Shot deleted under live sync while this tab had changes the server never
+// got (R10, Paper page 21 "Renamed or deleted"). The editor is read only
+// behind it, and the two ways on are the only ways out: "Restore" brings the
+// Shot back and its session replays the changes, "Save as copy" makes them a
+// new Shot. With nothing pending there is no dialog: the Shot closes and the
+// error row says who deleted it.
+import type { ReactNode } from "react";
+import { Dialog, initialsOf } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+
+const plural = (n: number, one: string): string => `${n} ${one}${n === 1 ? "" : "s"}`;
+
+export function SyncDeletedDialog(): ReactNode {
+  const store = useStore();
+  const d = useShotEditor((s) => s.syncDeleted);
+  if (d === null) return null;
+  const changes = plural(d.count, "change");
+  return (
+    <Dialog
+      open
+      className="sync-deleted"
+      dismissOnOverlay={false}
+      dismissOnEscape={false}
+      onClose={() => {}}
+      title={
+        <>
+          {d.by === null ? null : (
+            <span className="sync-face is-lg" style={{ background: d.color ?? undefined }} aria-hidden="true">
+              {initialsOf(d.by)}
+            </span>
+          )}
+          <span>{d.by === null ? `"${d.title}" was deleted` : `${d.by} deleted "${d.title}"`}</span>
+        </>
+      }
+      actions={
+        <>
+          <button
+            type="button"
+            className="sync-deleted-btn"
+            disabled={d.busy || d.trashId === null}
+            onClick={() => void store.saveDeletedAsCopy()}
+          >
+            Save as copy
+          </button>
+          <button
+            type="button"
+            className="sync-deleted-btn is-primary"
+            disabled={d.busy || d.trashId === null}
+            onClick={() => void store.restoreDeleted()}
+          >
+            Restore
+          </button>
+        </>
+      }
+    >
+      <p className="sync-deleted-text">
+        It is in Trash now. You have {changes} that never reached the server. Keep them by restoring the Shot, or by
+        saving them as a new copy.
+      </p>
+      <div className="sync-deleted-pending" data-testid="sync-deleted-pending">
+        <div className="sync-deleted-label">Your {d.count} pending {d.count === 1 ? "change" : "changes"}</div>
+        <pre>{d.lines.join("\n")}</pre>
+      </div>
+      {d.error === null ? null : (
+        <p className="dialog-error" role="alert">
+          {d.error}
+        </p>
+      )}
+    </Dialog>
+  );
+}
+
+/** "Renamed to X by Maya", beside the title until it clears itself. */
+export function SyncRenamedNote(): ReactNode {
+  const note = useShotEditor((s) => s.syncRenamed);
+  if (note === null) return null;
+  return (
+    <span className="sync-renamed" role="status" data-testid="sync-renamed">
+      {note.by === null ? null : (
+        <span className="sync-face" style={{ background: note.color ?? undefined }} aria-hidden="true">
+          {initialsOf(note.by)}
+        </span>
+      )}
+      Renamed to {note.to}
+      {note.by === null ? "" : ` by ${note.by}`}
+    </span>
+  );
+}

package/src/panels/header/ZoomControls.tsx

@@ -1,13 +1,27 @@
+import { IconMinus, IconPlus } from "@dailies-studio/ui";
 import { useShotEditor, useStore } from "../../state/context.js";
+import { layoutSpec } from "../../state/layouts.js";
+import { shortcutHint } from "../../state/shortcuts.js";
 
-/** Zoom readout, plus fit. Routed by the ACTIVE pane, exactly as ⌘+/⌘−/⇧Z
- *  are: in a split the buttons address the pane the author last touched, and
- *  in working mode they dolly the working view instead of silently writing a
- *  camera-pane zoom nobody can see. The readout is a percentage only for the
- *  camera pane — "100%" has no meaning for an orbit camera, so the working
- *  pane shows which view the controls are pointed at instead. The stage OWNS
- *  the views (it knows the pane sizes), so "fit" asks the stage and mirrors
- *  what it answers rather than computing a second opinion here. */
+/** Zoom readout, plus fit, at the right end of the canvas bar (CanvasBar.tsx).
+ *  In the canvas bar and not the top bar because it acts on the canvas, and
+ *  because `]`, `.` and Video hide columns but never that bar.
+ *
+ *  Routed by the ACTIVE pane, exactly as ⌘+/⌘− and the
+ *  fit key are: in a split the buttons address the pane the author last
+ *  touched, and in working mode they dolly the working view instead of
+ *  silently writing a camera-pane zoom nobody can see. The readout is a
+ *  percentage only for the camera pane — "100%" has no meaning for an orbit
+ *  camera, so the working pane shows which view the controls are pointed at
+ *  instead. The stage OWNS the views (it knows the pane sizes), so "fit" asks
+ *  the stage and mirrors what it answers rather than computing a second
+ *  opinion here.
+ *
+ *  THE HINT COMES OFF THE TABLE, NOT OFF A LITERAL. It said ⇧Z for a fit that
+ *  moved to Home, which is the exact drift shortcuts.ts's header cites as the
+ *  reason that table exists — and it went on saying it after the table landed
+ *  because nothing here read from it. `shortcutFor` is the same lookup the menu
+ *  accelerators use, so a rebind moves this tooltip too. */
 export function ZoomControls() {
   const store = useStore();
   // The ZOOM alone, never the whole view object: `onViewChange` fires per
@@ -16,22 +30,39 @@ export function ZoomControls() {
   const zoom = useShotEditor((s) => s.view.zoom);
   const working = useShotEditor((s) => s.activePane === "working");
   const open = useShotEditor((s) => s.name !== null);
+  // THE STAGE'S ZOOM ONLY. It reports `state.view.zoom`, the stage camera's,
+  // and drives `zoomActivePane`, so it lives in the stage workspace's canvas
+  // bar (CanvasBar renders it nowhere else). A mode brings its own zoom, about
+  // its own canvas: two percentages about two things would never agree.
   if (!open) return null;
+  const fitHint = shortcutHint("view.fit");
   return (
     <div className="zoom-controls">
-      <button type="button" title="Zoom out" onClick={() => store.zoomActivePane(-1)}>
-        −
+      <button
+        type="button"
+        className="btn is-icon"
+        aria-label="Zoom out"
+        title={`Zoom out${shortcutHint("view.zoomOut")}`}
+        onClick={() => store.zoomActivePane(-1)}
+      >
+        <IconMinus />
       </button>
       <button
         type="button"
-        className="zoom-readout"
-        title={working ? "Fit the working view (⇧Z)" : "Fit (⇧Z)"}
+        className="btn zoom-readout"
+        title={working ? `Fit the working view${fitHint}` : `Fit${fitHint}`}
         onClick={() => store.fitActivePane()}
       >
-        {working ? "3D" : `${Math.round(zoom * 100)}%`}
+        {working ? layoutSpec("working").label : `${Math.round(zoom * 100)}%`}
       </button>
-      <button type="button" title="Zoom in" onClick={() => store.zoomActivePane(1)}>
-        +
+      <button
+        type="button"
+        className="btn is-icon"
+        aria-label="Zoom in"
+        title={`Zoom in${shortcutHint("view.zoomIn")}`}
+        onClick={() => store.zoomActivePane(1)}
+      >
+        <IconPlus />
       </button>
     </div>
   );

package/src/panels/header/agentHandoff.ts

@@ -0,0 +1,52 @@
+// The prompt the Agent chip copies for an outside agent (Claude Code over the
+// dailies MCP server): what "this" means right now, as ids the MCP tools take.
+//
+// Built from `buildShotAgentContext`, the in-app agent's own context, so the
+// two agents are told the same thing about the same moment: the storage name,
+// the entered definition, the Shot, the frame (def-local inside a definition),
+// the selected layer and, on the board, the planned shot, the selected
+// reference and the board subject (a still, a gap or a cut), and on a shot
+// board the open sketch and its selected item. The
+// document itself is never pasted: the agent reads it fresh through the tools.
+import { buildShotAgentContext } from "../../state/agentActions.js";
+import type { ShotEditorState } from "../../state/types.js";
+
+interface ShotContext {
+  docName?: string;
+  editingDef?: string;
+  frame?: number;
+  sceneId?: string;
+  selectedLayerId?: string;
+  storyboardOpen?: boolean;
+  selectedPartId?: string;
+  selectedReferenceId?: string;
+  boardSubject?: string;
+  sketchId?: string;
+  selectedSketchItemId?: string;
+}
+
+/** Null with no Project open: there is nothing for the agent to target. */
+export function agentHandoffPrompt(s: ShotEditorState): string | null {
+  const { shot } = buildShotAgentContext(s) as { shot?: ShotContext };
+  if (shot?.docName === undefined) return null;
+  const title = s.doc?.title ?? shot.docName;
+  const lines = [
+    `Use the dailies MCP server to work on the Dailies Project "${title}" (storage name: ${shot.docName}).`,
+  ];
+  if (shot.editingDef !== undefined) lines.push(`I am inside the component definition ${shot.editingDef}.`);
+  if (shot.sceneId !== undefined) lines.push(`Shot: ${shot.sceneId}`);
+  if (shot.frame !== undefined) {
+    lines.push(`Frame: ${shot.frame}${shot.editingDef !== undefined ? " (on the definition's own clock)" : ""}`);
+  }
+  if (shot.selectedLayerId !== undefined) lines.push(`Selected layer: ${shot.selectedLayerId}`);
+  if (shot.storyboardOpen === true) {
+    lines.push("The Storyboard is open: read get_storyboard before changing Shots.");
+    if (shot.selectedPartId !== undefined) lines.push(`Planned shot: ${shot.selectedPartId}`);
+    if (shot.selectedReferenceId !== undefined) lines.push(`Selected reference: ${shot.selectedReferenceId}`);
+    if (shot.boardSubject !== undefined) lines.push(`Board subject: ${shot.boardSubject}`);
+    if (shot.sketchId !== undefined) lines.push(`Sketch: ${shot.sketchId} (screenshot_shot sketch shows it)`);
+    if (shot.selectedSketchItemId !== undefined) lines.push(`Selected sketch item: ${shot.selectedSketchItemId}`);
+  }
+  lines.push("", "Task: ");
+  return lines.join("\n");
+}

package/src/panels/header/leave.ts

@@ -0,0 +1,26 @@
+import { flushPoster } from "../../state/posterCapture.js";
+import type { ShotEditorStore } from "../../state/store.js";
+
+/**
+ * Leave the editor for `href`: FLUSH FIRST, AND ONLY LEAVE IF IT LANDED.
+ *
+ * Every way out (the app menu's account rows, the `Projects` crumb, the
+ * avatar) leaves the page, and the autosave debounce is measured in seconds,
+ * so the last edit is routinely still in flight when one is picked.
+ *
+ * This was `.finally` once, which navigates whether the flush RESOLVED or
+ * REJECTED, so a save that failed took the edit with it. A rejection leaves the
+ * author exactly where they were, with the document still dirty and the
+ * header's save badge still saying so, which is the whole explanation of why
+ * the click appeared to do nothing.
+ *
+ * Then the POSTER the save just made owed (hosted only; bounded, and it never
+ * rejects): its timer would otherwise die with the page, and the card for the
+ * work just done would keep an older picture.
+ */
+export function leaveFor(store: Pick<ShotEditorStore, "flush">, href: string): void {
+  void store.flush().then(
+    () => flushPoster().then(() => window.location.assign(href)),
+    () => {},
+  );
+}