@dailies-studio/shot-editor 0.1.0

package/src/panels/agent/agent.css

@@ -0,0 +1,322 @@
+/* Agent drawer: transcript, layer-tree + diff cards, BYOK setup, composer.
+   Shares the motion editor's class vocabulary on purpose — the two panels
+   render the same transcript model, and one visual language across chromes is
+   what makes the lane feel like one feature. The canvas-only additions are
+   .agent-tree (the layer summary) and .agent-card-meta (doc name, layer count
+   and, when the change animates, a track count). */
+
+.agent-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+
+.agent-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.agent-title-label {
+  flex: none;
+}
+
+.agent-models {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ---------- BYOK setup ---------------------------------------------------- */
+
+.agent-setup {
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agent-setup-blurb {
+  margin: 0;
+  color: var(--text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.agent-setup-row {
+  display: flex;
+  gap: 4px;
+}
+
+.agent-key-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-1);
+  padding: 4px 6px;
+  font: var(--mono);
+}
+
+/* ---------- transcript ----------------------------------------------------- */
+
+.agent-transcript {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agent-msg {
+  border-radius: var(--radius);
+  padding: 5px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.agent-msg-user {
+  background: var(--accent-soft);
+  color: var(--text-1);
+  align-self: flex-end;
+  max-width: 90%;
+}
+
+.agent-msg-assistant {
+  background: var(--bg-2);
+  color: var(--text-1);
+}
+
+.agent-msg-error {
+  background: var(--bg-2);
+  color: var(--danger);
+}
+
+.agent-msg-info {
+  color: var(--text-3);
+  font-style: italic;
+}
+
+.agent-tool {
+  color: var(--text-3);
+  font: var(--mono);
+  font-size: 11px;
+  padding-left: 8px;
+}
+.agent-tool::before {
+  content: "⚙ ";
+}
+
+.agent-thinking {
+  animation: agent-pulse 1.2s ease-in-out infinite;
+}
+@keyframes agent-pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* ---------- proposal cards ------------------------------------------------- */
+
+.agent-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-1);
+  overflow: hidden;
+  flex: none;
+}
+.agent-card-applied {
+  border-color: var(--accent);
+}
+
+.agent-card-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-2);
+}
+
+.agent-card-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-1);
+}
+/* File cards address a path; canvas cards address an intent sentence. */
+.agent-card:not(.agent-card-canvas) .agent-card-path {
+  font: var(--mono);
+}
+
+.agent-card-status {
+  flex: none;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.agent-card-status.is-applied {
+  color: var(--accent);
+}
+.agent-card-status.is-stale,
+.agent-card-status.is-failed {
+  color: var(--danger);
+}
+.agent-card-status.is-applying {
+  color: var(--text-2);
+}
+
+/* ---------- canvas card: doc + layer/track counts + the layer tree -------- */
+
+.agent-card-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  color: var(--text-3);
+}
+
+.agent-card-doc {
+  color: var(--text-2);
+  font: var(--mono);
+  font-size: 11px;
+}
+
+.agent-card-count::before {
+  content: "· ";
+}
+
+.agent-tree {
+  margin: 0;
+  padding: 4px 0;
+  max-height: 260px;
+  overflow: auto;
+  font: var(--mono);
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-2);
+}
+.agent-tree-line {
+  padding: 0 8px;
+  white-space: pre;
+}
+
+/* ---------- file card diff -------------------------------------------------- */
+
+.agent-diff {
+  margin: 0;
+  padding: 4px 0;
+  max-height: 260px;
+  overflow: auto;
+  font: var(--mono);
+  font-size: 11px;
+  line-height: 1.45;
+}
+.agent-diff > div {
+  padding: 0 8px;
+  white-space: pre;
+}
+.agent-diff-add {
+  background: rgba(64, 160, 96, 0.16);
+  color: #7fd79f;
+}
+.agent-diff-del {
+  background: rgba(200, 72, 72, 0.14);
+  color: #e79a9a;
+}
+.agent-diff-hunk {
+  color: var(--text-3);
+}
+.agent-diff-ctx {
+  color: var(--text-2);
+}
+
+.agent-card-note {
+  padding: 4px 8px;
+  color: var(--text-3);
+  font-size: 11px;
+}
+
+.agent-card-error {
+  margin: 0;
+  white-space: normal;
+}
+
+/* "Applied, but the generated component was not updated" — not a failure (the
+   document is saved), so not the error red; loud enough to be read. */
+.agent-card-warning {
+  color: var(--warn, #e0a33e);
+  white-space: normal;
+}
+
+/* ---------- footer --------------------------------------------------------- */
+
+.agent-strip {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-strip-msg {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-cost {
+  flex: none;
+  padding: 2px 8px;
+  color: var(--text-3);
+  font-size: 11px;
+  text-align: right;
+}
+
+.agent-composer {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  padding: 8px;
+  border-top: 1px solid var(--border);
+  flex: none;
+  flex-wrap: wrap;
+}
+
+.agent-pin {
+  flex: 0 0 100%;
+  color: var(--text-3);
+  font-size: 11px;
+}
+
+.agent-input {
+  flex: 1;
+  min-width: 0;
+  resize: none;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-1);
+  padding: 5px 7px;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.agent-input:focus {
+  outline: 1px solid var(--accent);
+}

package/src/panels/export/ExportDialog.tsx

@@ -0,0 +1,284 @@
+// The export dialog: format, quality, range, and an honest estimate.
+//
+// ── WHAT THE DIALOG PROMISES ────────────────────────────────────────────
+//
+// Every control here resolves through `@dailies-studio/shot`'s export.ts, which
+// is the SAME table `dailies shot render` reads. So the button and the
+// command produce the same file, and the exit criterion for this slice is a
+// property of the wiring rather than a thing to remember.
+//
+// ── AND WHAT IT REFUSES TO PROMISE ──────────────────────────────────────
+//
+// The size figure is a RANGE, never a point value: at a fixed CRF the encoder
+// spends what the content needs, and a title card and a full-frame parallax
+// move differ by more than any model would admit.
+//
+// The time figure is a median of THIS project's own past renders and reads
+// "estimating…" until there is one. A shipped ms-per-frame table would be wrong
+// by an order of magnitude on most machines, and the author plans around it.
+//
+// GIF gets NO size figure at all — its size is dominated by palette and by how
+// much of the frame changes, neither of which the bits-per-pixel model knows.
+// It shows the frame count instead, which is true.
+import { useEffect, useState } from "react";
+import {
+  EXPORT_QUALITIES,
+  docDurationFrames,
+  estimateMp4Size,
+  exportQuality,
+  formatSizeEstimate,
+  formatTimeEstimate,
+  predecessorTransitionOmitted,
+  sceneWindows,
+} from "@dailies-studio/shot/doc";
+import type { ExportFormat, ExportQualityId, RenderStats } from "@dailies-studio/shot/doc";
+import { Dialog, SegmentedControl } from "@dailies-studio/ui";
+import { ApiError, cancelRender, renderState, startRender } from "../../api.js";
+import type { RenderJob } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+
+/** "the whole timeline", as a select value. Not a scene id, and cannot be one. */
+const WHOLE = "";
+
+export function ExportDialog(props: { onClose(): void }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const name = useShotEditor((s) => s.name);
+  const currentScene = useShotEditor((s) => s.sceneId);
+  const job = useShotEditor((s) => s.renderJob);
+
+  const [format, setFormat] = useState<ExportFormat>("mp4");
+  const [quality, setQuality] = useState<ExportQualityId>("social");
+  // Defaults to the WHOLE timeline even though a scene is open, because
+  // "export" without qualification means the deliverable. Choosing one scene is
+  // deliberate, and the select says which one.
+  const [scope, setScope] = useState<string>(WHOLE);
+  const [stats, setStats] = useState<RenderStats>({ runs: [] });
+  const [error, setError] = useState<string | null>(null);
+  // ON by default: the document's clips are part of the deliverable, and an
+  // export that dropped them because a checkbox defaulted off is the silent
+  // wrong artifact this lane refuses to produce. Unticking it is deliberate,
+  // and the row says how many clips it is dropping.
+  const [withAudio, setWithAudio] = useState(true);
+
+  // The dialog can open MID-RENDER (the author closed it and came back), so it
+  // asks rather than assuming idle — and picks up this project's measured speed
+  // in the same round trip.
+  useEffect(() => {
+    if (name === null) return;
+    let live = true;
+    void renderState(name)
+      .then((state) => {
+        if (!live) return;
+        setStats(state.stats);
+        if (state.job !== null) store.setRenderJob(state.job);
+      })
+      .catch(() => {
+        // An estimate is a nicety. A server without the render lane still lets
+        // the author press Export and get a real error from the attempt.
+      });
+    return () => {
+      live = false;
+    };
+  }, [name, store, job?.phase]);
+
+  if (doc === null || name === null) return null;
+
+  const windows = sceneWindows(doc);
+  const frames =
+    scope === WHOLE
+      ? docDurationFrames(doc)
+      : (windows.find((w) => w.id === scope)?.end ?? 0) - (windows.find((w) => w.id === scope)?.start ?? 0);
+  const megapixels = (doc.size.width * doc.size.height) / 1_000_000;
+  // GIF has no audio stream at all, so the checkbox is not a choice there and
+  // the size model must not budget for one either.
+  const clipCount = Object.keys(doc.audio).length;
+  const audible = format === "mp4" && withAudio && clipCount > 0;
+  const size = estimateMp4Size({
+    width: doc.size.width,
+    height: doc.size.height,
+    durationFrames: frames,
+    fps: doc.fps,
+    quality: exportQuality(quality),
+    audio: audible,
+  });
+  const running = job?.phase === "running";
+
+  const submit = (): void => {
+    setError(null);
+    void startRender(name, {
+      format,
+      quality,
+      ...(scope === WHOLE ? {} : { sceneId: scope }),
+      // Only ever sent as `false`. Absent means the server's default, which is
+      // to mux whatever `doc.audio` carries, and saying so explicitly would
+      // make this chrome the thing that decides it.
+      ...(withAudio ? {} : { audio: false }),
+    })
+      .then((started) => store.setRenderJob(started))
+      .catch((e: unknown) => {
+        // A 409 carries the running job, which is more useful than the message.
+        if (e instanceof ApiError && e.conflict) setError(e.message);
+        else setError(e instanceof Error ? e.message : String(e));
+      });
+  };
+
+  return (
+    <Dialog
+      open
+      title="Export"
+      // The shared dialog is a hard 320px, which is right for a confirm and
+      // too narrow for three labelled rows plus a size RANGE — the estimate
+      // was overflowing and clipping mid-range, and "911 KB–2" reads as a
+      // finished number rather than a truncated one.
+      className="shot-export-dialog"
+      onClose={props.onClose}
+      actions={
+        <>
+          {running ? (
+            <button type="button" className="btn" onClick={() => void cancelRender(name)}>
+              Cancel render
+            </button>
+          ) : (
+            <button type="button" className="btn is-primary" onClick={submit}>
+              Export
+            </button>
+          )}
+          <button type="button" className="btn" onClick={props.onClose}>
+            Close
+          </button>
+        </>
+      }
+    >
+      <div className="export-dialog" data-testid="export-dialog">
+        <label className="export-row">
+          <span>Format</span>
+          <SegmentedControl
+            ariaLabel="Export format"
+            value={format}
+            options={[
+              { value: "mp4", label: "MP4" },
+              { value: "gif", label: "GIF" },
+            ]}
+            onChange={(next) => setFormat(next as ExportFormat)}
+          />
+        </label>
+
+        <label className="export-row">
+          <span>Quality</span>
+          <select
+            className="select"
+            aria-label="Export quality"
+            value={quality}
+            onChange={(e) => setQuality(e.target.value as ExportQualityId)}
+          >
+            {EXPORT_QUALITIES.map((q) => (
+              <option key={q.id} value={q.id}>
+                {q.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="export-row">
+          <span>Range</span>
+          <select
+            className="select"
+            aria-label="Export range"
+            value={scope}
+            onChange={(e) => setScope(e.target.value)}
+          >
+            <option value={WHOLE}>Whole timeline</option>
+            {doc.scenes.map((id) => (
+              <option key={id} value={id}>
+                {doc.scenesById[id]?.name ?? id}
+                {id === currentScene ? " (open)" : ""}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        {/* A transition is stored on the shot BEFORE this one, and a one-shot
+            render does not carry it. Warned HERE, client-side off (doc, scope),
+            because the dialog already holds both and this costs the author
+            nothing — the alternative is finding out after the render. */}
+        {scope !== WHOLE && predecessorTransitionOmitted(doc, scope) ? (
+          <p className="export-note" data-testid="export-transition-note">
+            The transition into this shot plays from the shot before it, so a
+            single-shot render starts on a cut. Render the whole timeline to
+            include it.
+          </p>
+        ) : null}
+
+        <label className="export-row">
+          <span>Audio</span>
+          <span className="export-audio" data-testid="export-audio">
+            <input
+              type="checkbox"
+              aria-label="Include audio"
+              checked={withAudio}
+              disabled={format === "gif" || clipCount === 0}
+              onChange={(e) => setWithAudio(e.currentTarget.checked)}
+            />
+            <span>
+              {clipCount === 0
+                ? "no clips in this scene"
+                : format === "gif"
+                  ? `${clipCount} clip${clipCount === 1 ? "" : "s"} — GIF has no audio track`
+                  : withAudio
+                    ? `${clipCount} clip${clipCount === 1 ? "" : "s"} included`
+                    : `${clipCount} clip${clipCount === 1 ? "" : "s"} will be dropped`}
+            </span>
+          </span>
+        </label>
+
+        <dl className="export-estimate" data-testid="export-estimate">
+          <dt>Frames</dt>
+          <dd>{frames}</dd>
+          <dt>Size</dt>
+          {/* See the header: a GIF's size is a palette question, and the
+              bits-per-pixel model does not know the answer. */}
+          <dd>{format === "gif" ? "varies with palette" : formatSizeEstimate(size)}</dd>
+          <dt>Time</dt>
+          <dd>{formatTimeEstimate(stats, megapixels, frames)}</dd>
+        </dl>
+
+        {job !== null && <JobRow job={job} />}
+        {error !== null && <p className="export-error">{error}</p>}
+      </div>
+    </Dialog>
+  );
+}
+
+/** The live job, or the last one this session. Shown after a "done" too: the
+ *  author's next question is always "where did it go". */
+function JobRow(props: { job: RenderJob }) {
+  const { job } = props;
+  if (job.phase === "running") {
+    return (
+      <p className="export-progress" data-testid="export-progress">
+        Rendering frame {job.done}/{job.total || "?"}
+      </p>
+    );
+  }
+  if (job.phase === "done") {
+    return (
+      <p className="export-progress is-done" data-testid="export-progress">
+        Written to <code>{job.out}</code>
+      </p>
+    );
+  }
+  if (job.phase === "cancelled") {
+    // Not an error, and it must not look like one: the author pressed Cancel.
+    return (
+      <p className="export-progress" data-testid="export-progress">
+        Render cancelled — nothing was written.
+      </p>
+    );
+  }
+  return (
+    <p className="export-error" data-testid="export-progress">
+      {job.error ?? "The render failed."}
+    </p>
+  );
+}