@dailies-studio/shot-editor 0.1.0

package/src/panels/ResizeHandle.tsx

@@ -0,0 +1,113 @@
+// A draggable panel edge.
+//
+// ── THE SIZE IS MEASURED FROM THE PRESS, NEVER ACCUMULATED ──────────────
+//
+// Every move computes `base + (now - origin)`, where both `base` and `origin`
+// were captured on pointerdown. The tempting alternative — add each move's
+// delta to the current size — DRIFTS the moment a size clamps: the pointer
+// keeps travelling past the limit, the panel stops growing, and on the way
+// back the panel starts moving again immediately instead of when the pointer
+// returns to the edge. Same reason `panBy` measures from the press.
+//
+// ── THE BASE IS READ AT THE PRESS, NOT SUBSCRIBED ────────────────────────
+//
+// `getValue` instead of a `value` prop, deliberately: a subscribed value means
+// the HOST re-renders on every write this handle makes, and both hosts are the
+// heaviest panels in the chrome (the shell, the dock). The handle needs the
+// 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 ────────────────────────────────────
+//
+// 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.
+//
+// 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";
+
+export interface ResizeHandleProps {
+  /** "x" drags left-right (a side rail), "y" up-down (a bottom dock). */
+  axis: "x" | "y";
+  /** The size at the moment of the press, in px — the drag's base. */
+  getValue(): number;
+  /** +1 when moving the pointer along the axis GROWS the panel, -1 when it
+   *  shrinks it. A bottom dock is -1: dragging its top edge upward, which is
+   *  a decreasing clientY, makes it taller. */
+  sign: 1 | -1;
+  onChange(next: number): void;
+  /** Double-click. Every resizable edge needs a way back to the default that
+   *  is not "drag until it looks right again". */
+  onReset(): void;
+  className: string;
+  label: string;
+}
+
+export function ResizeHandle({
+  axis,
+  getValue,
+  sign,
+  onChange,
+  onReset,
+  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
+      className={className}
+      // A separator is what this IS to a screen reader, and the orientation is
+      // the axis it separates along — which is the opposite of the axis it
+      // moves in: a vertical separator slides left and right.
+      role="separator"
+      aria-orientation={axis === "x" ? "vertical" : "horizontal"}
+      aria-label={label}
+      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;
+      }}
+    />
+  );
+}

package/src/panels/agent/AgentPanel.tsx

@@ -0,0 +1,478 @@
+// The shot editor's agent drawer: prompt, streamed transcript, tool chips, and
+// review-before-apply cards. The transport, the event vocabulary and the
+// transcript reducer are `@dailies-studio/agent-client`'s; only the rendering is
+// here.
+//
+// ── THE CARD IS THE PHASE ───────────────────────────────────────────────
+//
+// 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
+// scene/layer outline the server already rendered.
+//
+// Keydown stops at the panel root so typing a prompt never reaches the global
+// shot keymap — "delete" in a sentence must not delete the selected layer, and
+// this chrome's keymap is single-letter tool verbs all the way down.
+import "./agent.css";
+import { useEffect, useRef, useState } from "react";
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import { isDocProposalItem } from "@dailies-studio/agent-client";
+import type {
+  AgentFileProposalItem,
+  AgentProposalItem,
+  AgentShotProposalItem,
+  AgentTranscriptItem,
+} from "@dailies-studio/agent-client";
+import { useShotEditor, useStore } from "../../state/context.js";
+import {
+  applyAgentProposal,
+  askAgent,
+  cancelAgent,
+  clearAgentKey,
+  refreshAgentCredentials,
+  saveAgentKey,
+} from "../../state/agentActions.js";
+
+const MODEL_LABELS: Record<string, string> = {
+  "claude-sonnet-5": "Sonnet 5",
+  "claude-opus-4-8": "Opus 4.8",
+};
+
+function modelLabel(model: string): string {
+  return MODEL_LABELS[model] ?? model;
+}
+
+/** Apply / status, shared by every card kind. */
+function CardActions(props: { item: AgentProposalItem }) {
+  const store = useStore();
+  const { item } = props;
+  if (item.status === "pending") {
+    return (
+      <button
+        type="button"
+        className="btn agent-apply"
+        onClick={() => void applyAgentProposal(store, item.id)}
+      >
+        Apply
+      </button>
+    );
+  }
+  return (
+    <span className={`agent-card-status is-${item.status}`}>
+      {item.status === "applying" ? "Applying…" : item.status}
+    </span>
+  );
+}
+
+/**
+ * The scene/layer outline, exactly as the server rendered it.
+ *
+ * Deliberately NOT re-derived chrome-side: the proposal has not been applied,
+ * so this editor does not hold the document it describes, and inventing an
+ * outline from a doc we do not have is the coupling the summary exists to
+ * avoid.
+ */
+function Outline(props: { lines: readonly string[] }) {
+  if (props.lines.length === 0) {
+    return <div className="agent-card-note">No shots reported.</div>;
+  }
+  return (
+    <pre className="agent-tree">
+      {props.lines.map((line, i) => (
+        <div key={i} className="agent-tree-line">
+          {line}
+        </div>
+      ))}
+    </pre>
+  );
+}
+
+function ShotCard(props: { item: AgentShotProposalItem }) {
+  const { item } = props;
+  const openName = useShotEditor((s) => s.name);
+  const { summary } = item;
+  // 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;
+  return (
+    <div className={`agent-card agent-card-shot agent-card-${item.status}`}>
+      <div className="agent-card-head">
+        <span className="agent-card-path" title={item.intent}>
+          {item.intent}
+        </span>
+        <CardActions item={item} />
+      </div>
+      <div className="agent-card-meta">
+        <span className="agent-card-doc" title={`scene "${summary.shotName}"`}>
+          {summary.shotName}
+        </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.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"}
+          </span>
+        )}
+      </div>
+      <Outline lines={summary.outline} />
+      {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
+          actually renders was not updated. A plain green "Applied" there is the
+          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}
+        </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.
+        </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.
+        </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}”.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function diffLineClass(line: string): string {
+  // The +++/--- file headers are headers, not adds/dels.
+  if (line.startsWith("+++") || line.startsWith("---") || line.startsWith("@@")) {
+    return "agent-diff-hunk";
+  }
+  if (line.startsWith("+")) return "agent-diff-add";
+  if (line.startsWith("-")) return "agent-diff-del";
+  return "agent-diff-ctx";
+}
+
+/** A source-file proposal. The shot agent works through shot tools, but a
+ *  session can still touch ordinary source, and a transcript that drops cards
+ *  it did not expect is worse than one that shows a plain diff. */
+function FileCard(props: { item: AgentFileProposalItem }) {
+  const { item } = props;
+  const lines = item.diff.replace(/\n$/, "").split("\n");
+  return (
+    <div className={`agent-card agent-card-${item.status}`}>
+      <div className="agent-card-head">
+        <span className="agent-card-path" title={item.path}>
+          {item.proposalKind === "create" ? `new file ${item.path}` : item.path}
+        </span>
+        <CardActions item={item} />
+      </div>
+      <pre className="agent-diff">
+        {lines.map((line, i) => (
+          <div key={i} className={diffLineClass(line)}>
+            {line}
+          </div>
+        ))}
+      </pre>
+      {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
+          re-propose.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TranscriptItem(props: { item: AgentTranscriptItem }) {
+  const { item } = props;
+  if (item.kind === "proposal") {
+    if (item.proposalKind === "shot") return <ShotCard item={item} />;
+    // A canvas, motion or scene card can reach THIS chrome only if the session
+    // was opened here, which the surface gating makes impossible today.
+    // Rendered read-only rather than swallowed: a transcript that silently
+    // drops cards is worse than one that shows a card with no button.
+    // Through the shared PREDICATE, not an inline negation: TypeScript will
+    // not eliminate a union member whose own discriminant is a union
+    // ("edit" | "create") from the else branch of a disjunction, so the
+    // document arms would lose their fields. See isFileProposalEvent.
+    if (isDocProposalItem(item)) {
+      return (
+        <div className={`agent-card agent-card-${item.status}`}>
+          <div className="agent-card-head">
+            <span className="agent-card-path" title={item.intent}>
+              {item.intent}
+            </span>
+            <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
+            it.
+          </div>
+        </div>
+      );
+    }
+    return <FileCard item={item} />;
+  }
+  if (item.kind === "tool") return <div className="agent-tool">{item.text}</div>;
+  return <div className={`agent-msg agent-msg-${item.kind}`}>{item.text}</div>;
+}
+
+function KeySetup(props: { compact: boolean; onDone?: () => void }) {
+  const store = useStore();
+  const credentials = useShotEditor((s) => s.agentCredentials);
+  const credentialsError = useShotEditor((s) => s.agentCredentialsError);
+  const [key, setKey] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const save = async (): Promise<void> => {
+    if (key.trim() === "" || saving) return;
+    setSaving(true);
+    await saveAgentKey(store, key.trim());
+    setSaving(false);
+    if (store.getState().agentCredentials?.source === "stored") {
+      setKey("");
+      props.onDone?.();
+    }
+  };
+
+  return (
+    <div className="agent-setup">
+      {!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.
+        </p>
+      )}
+      {credentials?.source === "env" && (
+        <p className="agent-setup-blurb">
+          Using <code>ANTHROPIC_API_KEY</code> from the environment. Paste a key to override it.
+        </p>
+      )}
+      {credentials?.source === "stored" && (
+        <p className="agent-setup-blurb">
+          Using your stored key (…{credentials.last4}).{" "}
+          <button type="button" className="btn is-danger" onClick={() => void clearAgentKey(store)}>
+            Remove key
+          </button>
+        </p>
+      )}
+      <div className="agent-setup-row">
+        <input
+          type="password"
+          className="agent-key-input"
+          placeholder="sk-ant-…"
+          value={key}
+          autoComplete="off"
+          onChange={(e) => setKey(e.target.value)}
+          onKeyDown={(e) => {
+            // isComposing: the Enter that commits an IME candidate must not save.
+            if (e.key === "Enter" && !e.nativeEvent.isComposing) void save();
+          }}
+        />
+        <button
+          type="button"
+          className="btn"
+          disabled={key.trim() === "" || saving}
+          onClick={() => void save()}
+        >
+          {saving ? "Saving…" : "Save key"}
+        </button>
+      </div>
+      {credentialsError !== null && <div className="error-strip">{credentialsError}</div>}
+    </div>
+  );
+}
+
+export function AgentPanel() {
+  const store = useStore();
+  const credentials = useShotEditor((s) => s.agentCredentials);
+  const credentialsError = useShotEditor((s) => s.agentCredentialsError);
+  const items = useShotEditor((s) => s.agentItems);
+  const running = useShotEditor((s) => s.agentRunning);
+  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 [prompt, setPrompt] = useState("");
+  const [keyOpen, setKeyOpen] = useState(false);
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  // One credentials probe per opening; a saved/removed key refreshes through
+  // the actions themselves.
+  useEffect(() => {
+    if (store.getState().agentCredentials === null) void refreshAgentCredentials(store);
+  }, [store]);
+
+  // Keep the transcript pinned to the newest item while streaming.
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [items]);
+
+  const submit = (): void => {
+    const text = prompt.trim();
+    if (text === "" || running || credentials?.configured !== true) return;
+    setPrompt("");
+    void askAgent(store, text);
+  };
+
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {
+    // The shot keymap (V/M/T tool keys, Delete, ⇧A, Ctrl+Z) must never see
+    // these — every one of them is a single letter.
+    e.stopPropagation();
+  };
+
+  const model = agentModel ?? credentials?.model ?? "";
+
+  return (
+    <div className="agent-panel" data-testid="agent-panel" onKeyDown={onKeyDown}>
+      <div className="panel-title agent-title">
+        <span className="agent-title-label">Agent</span>
+        {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>
+        )}
+        <button
+          type="button"
+          className={`btn${keyOpen ? " is-active" : ""}`}
+          title="API key (bring your own)"
+          onClick={() => setKeyOpen((v) => !v)}
+        >
+          Key
+        </button>
+        <button
+          type="button"
+          className="btn"
+          disabled={items.length === 0 || running}
+          title="Start a new chat"
+          onClick={() => store.clearAgentTranscript()}
+        >
+          New
+        </button>
+        <button
+          type="button"
+          className="btn is-icon"
+          aria-label="Close agent panel"
+          onClick={() => store.setAgentOpen(false)}
+        >
+          ×
+        </button>
+      </div>
+
+      {credentials !== null && !credentials.configured ? (
+        <KeySetup compact={false} />
+      ) : keyOpen ? (
+        <KeySetup compact onDone={() => setKeyOpen(false)} />
+      ) : null}
+
+      {/* The probe itself failed (older server, transient network): the
+          composer is gated, so this strip is the only way out — say so. */}
+      {credentials === null && credentialsError !== null && (
+        <div className="error-strip agent-strip">
+          <span className="agent-strip-msg">{credentialsError}</span>
+          <button type="button" className="btn" onClick={() => void refreshAgentCredentials(store)}>
+            Retry
+          </button>
+        </div>
+      )}
+
+      <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
+            up”. You get real layers at real depths; nothing lands until you apply it.
+          </div>
+        ) : (
+          items.map((item) => <TranscriptItem key={item.id} item={item} />)
+        )}
+        {running && <div className="agent-msg agent-msg-info agent-thinking">Working…</div>}
+      </div>
+
+      {agentError !== null && <div className="error-strip agent-strip">{agentError}</div>}
+      {costUsd !== null && !running && (
+        <div className="agent-cost">last turn ≈ ${costUsd.toFixed(costUsd < 0.1 ? 3 : 2)}</div>
+      )}
+
+      <div className="agent-composer">
+        {name !== null && (
+          <span className="agent-pin" title="Sent as context with your next ask">
+            ◎ {name}
+          </span>
+        )}
+        <textarea
+          className="agent-input"
+          rows={2}
+          placeholder={
+            credentials === null
+              ? "Waiting for the agent backend…"
+              : !credentials.configured
+                ? "Add an API key above to start"
+                : "Ask the agent… (Enter to send, Shift+Enter for a new line)"
+          }
+          value={prompt}
+          disabled={credentials === null || !credentials.configured}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            // isComposing: committing an IME candidate is not "send" — that
+            // would start a paid turn on a half-composed prompt.
+            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+              e.preventDefault();
+              submit();
+            }
+          }}
+        />
+        {running ? (
+          <button type="button" className="btn is-danger" onClick={() => void cancelAgent(store)}>
+            Stop
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="btn agent-send"
+            disabled={prompt.trim() === "" || credentials?.configured !== true}
+            onClick={submit}
+          >
+            Ask
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}