@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/layerWords.ts

@@ -0,0 +1,61 @@
+// The human word for a layer: what the inspector's head, the isolation
+// refusal and anything else that names a layer by its kind all say.
+//
+// Plain data, no React, so the state modules can read it as well as panels.
+import { meshPrimitiveOf } from "@dailies-studio/shot/doc";
+import type { Layer3D, Layer3DKind, MeshPrimitiveKind } from "@dailies-studio/shot/doc";
+
+/**
+ * The human word for a layer kind.
+ *
+ * A TYPED RECORD over the schema's own union, in the spirit of `KIND_ICONS`: a
+ * sixteenth layer kind is a compile error here rather than a head that quietly
+ * says nothing for the one kind nobody remembered. The words are what the Add
+ * menu and the outliner call these things, not the wire spelling ("rect" is a
+ * Rectangle to an author and only ever a `rect` to the document).
+ */
+const KIND_WORDS: Record<Layer3DKind, string> = {
+  text: "Text",
+  image: "Image",
+  video: "Video",
+  rect: "Rectangle",
+  ellipse: "Ellipse",
+  line: "Line",
+  arrow: "Arrow",
+  path: "Path",
+  html: "HTML",
+  group: "Group",
+  device: "Device",
+  mesh: "Mesh",
+  cloner: "Cloner",
+  instance: "Component",
+  component: "Component",
+};
+
+/**
+ * The word for a parametric mesh, mirroring `PRIMITIVE_ICONS` one for one.
+ *
+ * Without it a spline drew the curve glyph beside the word "Mesh", which is
+ * the head disagreeing with its own icon: `iconFor` already answers by what
+ * the layer IS to an author, and the word has to answer the same way or the
+ * pair reads as a bug.
+ */
+const MESH_WORDS: Record<MeshPrimitiveKind, string> = {
+  box: "Box",
+  sphere: "Sphere",
+  cylinder: "Cylinder",
+  cone: "Cone",
+  capsule: "Capsule",
+  torus: "Torus",
+  pyramid: "Pyramid",
+  plane: "Plane",
+  spline: "Spline",
+};
+
+export function wordFor(layer: Layer3D): string {
+  if (layer.kind === "mesh") {
+    const primitive = meshPrimitiveOf(layer.mesh);
+    if (primitive !== null) return MESH_WORDS[primitive.kind];
+  }
+  return KIND_WORDS[layer.kind];
+}

package/src/main.tsx

@@ -1,15 +1,67 @@
+// FIRST, and not for tidiness: the index opens with the cascade-layer order,
+// and CSS a component imports itself (App's subtree) would otherwise be
+// emitted ahead of it and fix its layer's rank by arriving first.
+import "./styles.css";
 import { StrictMode } from "react";
+import { PanelBoundary, StudioMotionProvider } from "@dailies-studio/ui";
+import { StudioThemeProvider } from "@dailies-studio/ui/theme";
 import { createRoot } from "react-dom/client";
 import { createShotEditorStore } from "./state/store.js";
+import { startBootOpen } from "./state/bootOpen.js";
+import { persistLayoutPrefs, readLayoutPrefs } from "./state/layoutPrefs.js";
+import { persistEditorPrefs } from "./state/editorPrefs.js";
 import { StoreProvider } from "./state/context.js";
 import { App } from "./app/App.js";
-import "./styles.css";
 
 const store = createShotEditorStore();
+// The layout is settled BEFORE the first commit, not in a mount effect, so the
+// panels are never painted at the defaults and then snapped to the author's
+// sizes. `window` is unconditional here — this module ends by reaching into
+// `document` for the root element — so there is nothing to guard.
+//
+// Read then subscribe, in that order: the seed inside `persistLayoutPrefs` has
+// to be the layout `bootLayout` just applied, or the boot's own application of
+// the record is indistinguishable from a drag — and a size this window CLAMPED
+// is then written back at the clamped value, so the number the author chose is
+// gone on the wider window that could have honoured it. What keeps the
+// window-fitted sizes out of the record is `authorLayout`, not this order.
+// layoutPrefs.ts owns both rules and states them whole.
+store.bootLayout(window.innerWidth, window.innerHeight, readLayoutPrefs());
+persistLayoutPrefs(store);
+// The store read the editor preferences at birth, so this subscribes with that
+// as its seed and writes only when a toggle changes one.
+persistEditorPrefs(store);
+// The document fetch starts HERE, at module evaluation — before createRoot and
+// the first commit — so the round trip overlaps the mount instead of following
+// it. `useOpenFromUrl` adopts the promise for its deep-link continuations.
+// Module-scope start also means StrictMode's double effect adopts one fetch
+// instead of relying on the generation fence to absorb a second.
+startBootOpen(store);
+// The browser agent's tool surface, offered here for the same reason the two
+// calls above are: the store exists before React does, so no component owns the
+// registration and there is no mount order to get wrong. A browser without
+// `document.modelContext` gets nothing and pays nothing: the tool table is a
+// chunk of its own, fetched only where the API exists.
+if (document.modelContext !== undefined) void import("./state/webmcp.js").then((m) => m.startModelContext(store));
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <StoreProvider store={store}>
-      <App />
-    </StoreProvider>
+    <StudioThemeProvider>
+      <StudioMotionProvider enabled>
+        <StoreProvider store={store}>
+          {/* THE LAST RESORT, and the only boundary allowed above the stage.
+              Everything a panel or a mode can throw is caught
+              nearer the throw; what reaches here is a throw in the shell
+              itself, and React's answer to that is to unmount the whole root
+              and leave a WHITE PAGE with the error only in the console. This
+              cannot save the stage — a catch unmounts it either way — but it
+              turns a blank window into a named error the author can report,
+              and a retry that costs no more than the reload they would
+              otherwise do by hand. */}
+          <PanelBoundary label="Dailies">
+            <App />
+          </PanelBoundary>
+        </StoreProvider>
+      </StudioMotionProvider>
+    </StudioThemeProvider>
   </StrictMode>,
 );

package/src/panels/ResizeHandle.tsx

@@ -17,15 +17,24 @@
 // size exactly once per gesture — at the press — so it asks for it then, and
 // the hosts subscribe to nothing on its behalf.
 //
-// ── WRITES ARE COALESCED TO THE FRAME ────────────────────────────────────
+// ── WRITES ARE COALESCED TO THE FRAME, BY startDrag ──────────────────────
 //
 // A pointer reports far above display rate; each `onChange` is a store write
-// and a full listener sweep. One write per frame, last position wins, the
-// release flushes whatever is pending so the final size always lands.
+// and a full listener sweep. `startDrag` itself now delivers one move per
+// frame, last position wins, and settles the pending move on release — this
+// file's own rAF coalescer moved there so every chrome drag gets it.
 //
-// Pointer capture, so a fast drag that leaves the 8px strip keeps resizing
-// rather than dropping the gesture, and so the release always lands here.
-import { useEffect, useRef } from "react";
+// ── THE LIFECYCLE IS THE WORKSPACE'S, NOT THIS FILE'S ────────────────────
+//
+// `startDrag` (packages/ui/src/drag.ts) owns pointer capture and all three
+// abort paths: pointercancel, Escape, and the lostpointercapture a mid-drag
+// unmount produces. Hand-rolling capture with React's pointerup/pointercancel
+// props reaches only the first of them, which is what left the panel edge as
+// the one chrome drag an author could not back out of.
+//
+// An abort RESTORES THE BASE, because the coalesced writes already landed on
+// the host: "this gesture did not happen" has to mean the size it started at.
+import { startDrag } from "@dailies-studio/ui";
 
 export interface ResizeHandleProps {
   /** "x" drags left-right (a side rail), "y" up-down (a bottom dock). */
@@ -53,24 +62,8 @@ export function ResizeHandle({
   className,
   label,
 }: ResizeHandleProps) {
-  const drag = useRef<{ base: number; origin: number } | null>(null);
-  const pending = useRef<number | null>(null);
-  const raf = useRef(0);
-  useEffect(
-    () => () => {
-      if (raf.current !== 0) cancelAnimationFrame(raf.current);
-    },
-    [],
-  );
   const posOf = (e: { clientX: number; clientY: number }): number =>
     axis === "x" ? e.clientX : e.clientY;
-  const flush = (): void => {
-    raf.current = 0;
-    if (pending.current === null) return;
-    const next = pending.current;
-    pending.current = null;
-    onChange(next);
-  };
 
   return (
     <div
@@ -81,32 +74,29 @@ export function ResizeHandle({
       role="separator"
       aria-orientation={axis === "x" ? "vertical" : "horizontal"}
       aria-label={label}
-      title={`${label} — drag to resize, double-click to reset`}
+      title={`${label}: drag to resize, double-click to reset`}
       onDoubleClick={onReset}
       onPointerDown={(e) => {
         // Or the browser starts a text selection across the panels the drag
         // passes over, and the whole chrome flashes blue mid-resize.
         e.preventDefault();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        drag.current = { base: getValue(), origin: posOf(e) };
-      }}
-      onPointerMove={(e) => {
-        const d = drag.current;
-        if (d === null) return;
-        pending.current = d.base + (posOf(e) - d.origin) * sign;
-        if (raf.current === 0) raf.current = requestAnimationFrame(flush);
-      }}
-      onPointerUp={() => {
-        drag.current = null;
-        // The release's position always lands, even mid-frame.
-        flush();
-      }}
-      // Pen and touch can have the gesture cancelled out from under them; the
-      // pointerup that would clear this never arrives, and without this the
-      // next hover over the strip would resize with a stale base.
-      onPointerCancel={() => {
-        drag.current = null;
-        pending.current = null;
+        // Both captured at the press, and both live in this closure rather
+        // than in a ref: there is exactly one gesture at a time, and a ref
+        // that outlives it is the stale base a cancelled pointer used to
+        // leave behind.
+        const base = getValue();
+        const origin = posOf(e);
+        startDrag(e, {
+          // Already frame-coalesced by startDrag, and the release delivers the
+          // pending move before onEnd — so the final size always lands, and an
+          // abort's base restore below can never be overwritten by it.
+          onMove(ev) {
+            onChange(base + (posOf(ev) - origin) * sign);
+          },
+          onEnd(commit) {
+            if (!commit) onChange(base);
+          },
+        });
       }}
     />
   );

package/src/panels/agent/AgentDots.tsx

@@ -0,0 +1,36 @@
+// AN MCP AGENT IS WORKING HERE: three animated dots in the Agent's colour, the
+// one mark every surface uses for it (the component card, the code tab, the
+// layer row, the status chip). Driven by the agent activity store
+// (state/agentActivity.ts), never by a timer of its own.
+import { useSyncExternalStore } from "react";
+import type { ReactNode } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { agentBuildingParts } from "../../state/agentActivity.js";
+import type { AgentActivityState } from "../../state/agentActivity.js";
+
+export function useAgentActivity(): AgentActivityState {
+  const { agentActivity } = useStore();
+  return useSyncExternalStore(agentActivity.subscribe, agentActivity.getState);
+}
+
+/** The dots, with `label` for assistive tech ("Agent is writing this file"). */
+export function AgentDots(props: { label: string }): ReactNode {
+  return (
+    <span className="agent-dots" role="status" aria-label={props.label} title={props.label} data-testid="agent-dots">
+      <span />
+      <span />
+      <span />
+    </span>
+  );
+}
+
+/** `boardBuilding` plus the parts an MCP agent is building now: what a shot
+ *  card's Building status reads. */
+export function useBuildingParts(): readonly { part: string }[] {
+  const building = useShotEditor((s) => s.boardBuilding);
+  const doc = useShotEditor((s) => s.doc);
+  const name = useShotEditor((s) => s.name);
+  const activity = useAgentActivity();
+  const agents = agentBuildingParts(doc, activity, name);
+  return agents.length === 0 ? building : [...building, ...agents];
+}

package/src/panels/agent/AgentPanel.tsx

@@ -8,7 +8,7 @@
 // A shot proposal is not a diff — a diff of a Doc3D JSON is unreadable and,
 // worse, a lie about what the change IS. What an author has to judge is how
 // LONG the video is now and what moves in it, so that is the card: the intent
-// as the title, the duration and the block/camera-move counts as chips, and the
+// as the title, the duration and the camera-move count as a chip, and the
 // scene/layer outline the server already rendered.
 //
 // Keydown stops at the panel root so typing a prompt never reaches the global
@@ -17,6 +17,7 @@
 import "./agent.css";
 import { useEffect, useRef, useState } from "react";
 import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import { PanelBoundary, SegmentedControl } from "@dailies-studio/ui";
 import { isDocProposalItem } from "@dailies-studio/agent-client";
 import type {
   AgentFileProposalItem,
@@ -25,6 +26,10 @@ import type {
   AgentTranscriptItem,
 } from "@dailies-studio/agent-client";
 import { useShotEditor, useStore } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import { shortcutFor } from "../../state/shortcuts.js";
+import type { ShotEditorState } from "../../state/types.js";
+import { formatDuration } from "../timeline/model.js";
 import {
   applyAgentProposal,
   askAgent,
@@ -88,15 +93,45 @@ function Outline(props: { lines: readonly string[] }) {
   );
 }
 
+/**
+ * The Shots a proposal redraws beyond the one an "Add motion" request named
+ * (or, without one, the entered Shot), by name. Empty when the card edits
+ * another Project, when nothing names a Shot, or on a create.
+ */
+export function strayShotsOf(state: ShotEditorState, item: AgentShotProposalItem): string[] {
+  const changed = item.summary.changedShots;
+  if (changed === undefined || state.name !== item.docName) return [];
+  const target = state.motionRequest?.sceneId ?? state.enteredScene;
+  if (target === null) return [];
+  return changed
+    .filter((id) => id !== target)
+    .map((id) => state.doc?.scenesById[id]?.name ?? id);
+}
+
 function ShotCard(props: { item: AgentShotProposalItem }) {
   const { item } = props;
+  const store = useStore();
   const openName = useShotEditor((s) => s.name);
+  const openTitle = useShotEditor((s) => s.doc?.title ?? s.name);
+  const motionPart = useShotEditor((s) => s.motionRequest?.partId ?? null);
+  // Joined to a string so the selector stays identity-stable between renders.
+  const strays = useShotEditor((s) => strayShotsOf(s, item).join("\u0000"));
+  const [copied, setCopied] = useState(false);
   const { summary } = item;
+  const copyPrompt = (): void => {
+    const prompt = motionPart === null ? null : store.motionPromptFor(motionPart);
+    if (prompt === null) return;
+    void navigator.clipboard.writeText(prompt).then(
+      () => setCopied(true),
+      () => store.reportError("Could not copy the prompt. The browser refused clipboard access."),
+    );
+  };
   // Three cases, one of which needs a warning. Same shot: the SSE bus adopts
   // it. A CREATE of another name: applying opens it. An EDIT of another shot:
   // it lands on disk but this editor stays where it is — say so rather than
   // letting the card imply the author is looking at the result.
   const editsElsewhere = openName !== null && openName !== item.docName && item.baseRev !== null;
+  const title = summary.title ?? summary.shotName;
   return (
     <div className={`agent-card agent-card-shot agent-card-${item.status}`}>
       <div className="agent-card-head">
@@ -106,26 +141,22 @@ function ShotCard(props: { item: AgentShotProposalItem }) {
         <CardActions item={item} />
       </div>
       <div className="agent-card-meta">
-        <span className="agent-card-doc" title={`scene "${summary.shotName}"`}>
-          {summary.shotName}
+        <span className="agent-card-doc" title={`Project “${title}”`}>
+          {title}
         </span>
         {/* DURATION first: a shot document is a video, and "how long is it now"
             is the first thing a reviewer asks. */}
-        <span className="agent-card-count">{summary.durationFrames}f</span>
+        <span className="agent-card-count">
+          {summary.fps === undefined
+            ? `${summary.durationFrames}f`
+            : formatDuration(summary.durationFrames / summary.fps)}
+        </span>
         <span className="agent-card-count">
           {summary.sceneCount} {summary.sceneCount === 1 ? "shot" : "shots"}
         </span>
         <span className="agent-card-count">
           {summary.layerCount} {summary.layerCount === 1 ? "layer" : "layers"}
         </span>
-        {/* The MOTION half. Silent at zero — a chip reading "0 blocks" on a
-            static card is noise, and this lane's whole animation system is
-            blocks, so their absence is itself the information. */}
-        {summary.blockCount > 0 && (
-          <span className="agent-card-count">
-            {summary.blockCount} {summary.blockCount === 1 ? "block" : "blocks"}
-          </span>
-        )}
         {summary.shotCount > 0 && (
           <span className="agent-card-count">
             {summary.shotCount} {summary.shotCount === 1 ? "camera move" : "camera moves"}
@@ -133,6 +164,17 @@ function ShotCard(props: { item: AgentShotProposalItem }) {
         )}
       </div>
       <Outline lines={summary.outline} />
+      {strays !== "" && item.status === "pending" && (
+        <div className="agent-card-note agent-card-warning">
+          Also changes {strays.split("\u0000").map((name) => `“${name}”`).join(", ")}, not only the
+          Shot you asked about.
+        </div>
+      )}
+      {motionPart !== null && (
+        <button type="button" className="btn agent-copy-prompt" onClick={copyPrompt}>
+          {copied ? "Copied" : "Copy prompt"}
+        </button>
+      )}
       {item.error !== null && <div className="error-strip agent-card-error">{item.error}</div>}
       {/* APPLIED WITH WARNINGS is its own state: the document was written, but
           codegen refused (a hand-edited generated file) — so the component that
@@ -140,24 +182,24 @@ function ShotCard(props: { item: AgentShotProposalItem }) {
           one place a half-landed change reads as a landed one. */}
       {item.status === "applied" && item.warning !== null && (
         <div className="agent-card-note agent-card-warning">
-          Applied with warnings — the scene document was saved, but: {item.warning}
+          Applied with warnings. The Project was saved, but: {item.warning}
         </div>
       )}
       {item.status === "applied" && item.error === null && item.warning === null && (
         <div className="agent-card-note">
-          Applied — the change is live in the editor. Ctrl+Z takes it back.
+          Applied: the change is live in the editor. {shortcutFor("edit.undo")} takes it back.
         </div>
       )}
       {item.status === "stale" && (
         <div className="agent-card-note">
-          The scene changed after this was proposed — ask the agent again so it can re-read the
-          document and re-propose.
+          The Project changed after this was proposed. Ask the agent again so it can re-read it
+          and re-propose.
         </div>
       )}
       {editsElsewhere && item.status === "pending" && (
         <div className="agent-card-note">
-          Edits scene “{item.docName}”, not the open one — applying writes it, but this editor stays
-          on “{openName}”.
+          Edits Project “{title}”, not the open one. Applying writes it, but this editor stays on
+          “{openTitle}”.
         </div>
       )}
     </div>
@@ -198,7 +240,7 @@ function FileCard(props: { item: AgentFileProposalItem }) {
       {item.error !== null && <div className="error-strip agent-card-error">{item.error}</div>}
       {item.status === "stale" && (
         <div className="agent-card-note">
-          The file changed on disk after this was proposed — ask the agent again to re-read and
+          The file changed on disk after this was proposed. Ask the agent again to re-read and
           re-propose.
         </div>
       )}
@@ -228,7 +270,7 @@ function TranscriptItem(props: { item: AgentTranscriptItem }) {
             <span className={`agent-card-status is-${item.status}`}>{item.status}</span>
           </div>
           <div className="agent-card-note">
-            A {item.proposalKind} document — “{item.docName}”. Open that editor to review and apply
+            A {item.proposalKind} document: “{item.docName}”. Open that editor to review and apply
             it.
           </div>
         </div>
@@ -246,6 +288,9 @@ function KeySetup(props: { compact: boolean; onDone?: () => void }) {
   const credentialsError = useShotEditor((s) => s.agentCredentialsError);
   const [key, setKey] = useState("");
   const [saving, setSaving] = useState(false);
+  // Hosted, the key is one row per workspace that every owner and admin's
+  // turns run on, not a file on this machine (`workspaceAgent.ts`).
+  const hosted = isCloudWorkspace();
 
   const save = async (): Promise<void> => {
     if (key.trim() === "" || saving) return;
@@ -263,8 +308,18 @@ function KeySetup(props: { compact: boolean; onDone?: () => void }) {
       {!props.compact && (
         <p className="agent-setup-blurb">
           The agent builds scenes through the studio's validated document API and needs an Anthropic
-          API key. Bring your own: it is stored in <code>.studio/agent/</code> (kept out of git) on
-          this machine, sent only to Anthropic, and never shown again.
+          API key.{" "}
+          {hosted ? (
+            <>
+              It is stored encrypted for this workspace, sent only to Anthropic, and never shown
+              again. Every owner and admin here uses this key, and saving replaces the current one.
+            </>
+          ) : (
+            <>
+              Bring your own: it is stored in <code>.studio/agent/</code> (kept out of git) on this
+              machine, sent only to Anthropic, and never shown again.
+            </>
+          )}
         </p>
       )}
       {credentials?.source === "env" && (
@@ -274,7 +329,7 @@ function KeySetup(props: { compact: boolean; onDone?: () => void }) {
       )}
       {credentials?.source === "stored" && (
         <p className="agent-setup-blurb">
-          Using your stored key (…{credentials.last4}).{" "}
+          {hosted ? "Using this workspace's key" : "Using your stored key"} (…{credentials.last4}).{" "}
           <button type="button" className="btn is-danger" onClick={() => void clearAgentKey(store)}>
             Remove key
           </button>
@@ -316,10 +371,34 @@ export function AgentPanel() {
   const agentError = useShotEditor((s) => s.agentError);
   const agentModel = useShotEditor((s) => s.agentModel);
   const costUsd = useShotEditor((s) => s.agentCostUsd);
-  const name = useShotEditor((s) => s.name);
+  const name = useShotEditor((s) => s.doc?.title ?? s.name);
   const [prompt, setPrompt] = useState("");
   const [keyOpen, setKeyOpen] = useState(false);
   const listRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // A prefill from the storyboard (a part's motion prompt, or a move's motion notes): adopted once per
+  // identity, `appMenu`'s mailbox rule, and the caret lands at its end so the
+  // author finishes the sentence rather than finding it.
+  const prefill = useShotEditor((s) => s.agentPrefill);
+  const focusPrefill = useRef(false);
+  useEffect(() => {
+    if (prefill === null) return;
+    setPrompt(prefill.text);
+    focusPrefill.current = true;
+    store.consumeAgentPrefill(prefill);
+  }, [prefill, store]);
+
+  useEffect(() => {
+    const el = inputRef.current;
+    // The first credential probe may still have the composer disabled when
+    // its prefill arrives. Focus once the actual input can accept typing.
+    if (focusPrefill.current && el !== null && !el.disabled) {
+      focusPrefill.current = false;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+    }
+  }, [prefill, prompt, credentials?.configured, running]);
 
   // One credentials probe per opening; a saved/removed key refreshes through
   // the actions themselves.
@@ -350,24 +429,19 @@ export function AgentPanel() {
 
   return (
     <div className="agent-panel" data-testid="agent-panel" onKeyDown={onKeyDown}>
-      <div className="panel-title agent-title">
-        <span className="agent-title-label">Agent</span>
+      {/* INSIDE the positioned container, per the boundary's placement rule. */}
+      <PanelBoundary label="Agent">
+      {/* No "Agent" word here: the column head's tab already names the panel. */}
+      <div className="agent-title">
         {credentials !== null && credentials.configured && (
-          <div className="agent-models" role="tablist">
-            {credentials.models.map((m) => (
-              <button
-                key={m}
-                type="button"
-                role="tab"
-                aria-selected={m === model}
-                className={`btn${m === model ? " is-active" : ""}`}
-                title={m}
-                onClick={() => store.setAgentModel(m === credentials.model ? null : m)}
-              >
-                {modelLabel(m)}
-              </button>
-            ))}
-          </div>
+          <SegmentedControl
+            className="agent-models"
+            ariaLabel="Model"
+            value={model}
+            options={credentials.models.map((m) => ({ value: m, label: modelLabel(m), title: m }))}
+            // Picking the server's default stores null: no override.
+            onChange={(m) => store.setAgentModel(m === credentials.model ? null : m)}
+          />
         )}
         <button
           type="button"
@@ -415,8 +489,8 @@ export function AgentPanel() {
 
       <div className="agent-transcript" ref={listRef}>
         {items.length === 0 ? (
-          <div className="panel-empty">
-            Ask for a scene — “a product video: the screenshot pushes in while the headline fades
+          <div className="insp-empty">
+            Ask for a scene, for example “a product video: the screenshot pushes in while the headline fades
             up”. You get real layers at real depths; nothing lands until you apply it.
           </div>
         ) : (
@@ -437,6 +511,7 @@ export function AgentPanel() {
           </span>
         )}
         <textarea
+          ref={inputRef}
           className="agent-input"
           rows={2}
           placeholder={
@@ -473,6 +548,7 @@ export function AgentPanel() {
           </button>
         )}
       </div>
+      </PanelBoundary>
     </div>
   );
 }