@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/agent/AgentQuestionDialog.tsx

@@ -0,0 +1,202 @@
+// "THE STORYBOARD IS READY. MAKE THE VIDEO?": the question an MCP agent asks between planning a
+// video and making it (state/agentQuestion.ts, store agentQuestions.ts),
+// answered here instead of in the agent's chat. An on-demand chunk
+// (app/lazySurfaces.tsx): the shell's gate mounts it only while a question is
+// open on screen.
+//
+// One primary, "Make the video". "Ask for changes" opens a required note.
+// "Open storyboard" closes the dialog onto the board, unanswered; the agent's
+// status chip opens it again. Escape closes it unanswered too. A Viewer sees
+// the actions locked, with VIEW_ONLY in the error line. An answer refused
+// because the question closed meanwhile stays on screen with why.
+//
+// An export question's primary is "Export the video": its yes opens the
+// Export dialog with the agent's choices (ExportDialog reads `exportAsk`),
+// which reports the saved video. A studio server render reports here, when
+// its job ends: the Export dialog may be closed by then, and this chunk,
+// latched once that render starts (app/lazySurfaces.tsx), is still mounted.
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { Dialog } from "@dailies-studio/ui";
+import type { AgentQuestion } from "../../api.js";
+import type { AgentExportAsk, AgentQuestionState } from "../../state/agentQuestion.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import type { ShotEditorState } from "../../state/types.js";
+import { VIEW_ONLY } from "../../state/workspace.js";
+
+/** The server's role says view only. Not `readOnly` alone: a version preview
+ *  or a live-sync hold makes an editor read only too, and an answer writes no
+ *  document. Under a hold the role is unknown here, so the server judges, and
+ *  its refusal shows in the error line. */
+export const viewerOf = (s: Pick<ShotEditorState, "versionPreview" | "readOnly" | "syncStatus" | "syncDeleted">): boolean =>
+  s.versionPreview !== null ? s.versionPreview.roleReadOnly : s.readOnly && (s.syncStatus?.hold ?? null) === null && s.syncDeleted === null;
+
+/** Report an export ask's studio server render once its job ends: the file
+ *  it wrote, or nothing (a failure or a cancel), and the next export reports
+ *  instead. Once: a refused report keeps the ask without that render. */
+function useServerExportReport(ask: AgentExportAsk | null): void {
+  const store = useStore();
+  const job = useShotEditor((s) => s.renderJob);
+  const name = useShotEditor((s) => s.name);
+  useEffect(() => {
+    if (ask?.serverJob === undefined || job === null || job.id !== ask.serverJob || job.phase === "running") return;
+    if (job.phase !== "done" || job.out === undefined || name === null) {
+      store.agentQuestion.exportOnServer(null);
+      return;
+    }
+    const out = job.out;
+    store.agentQuestion.reportVideo(ask, name, { where: "project", path: out }).catch((e: unknown) => {
+      store.reportError(`${out} was rendered, but telling the agent failed: ${e instanceof Error ? e.message : String(e)}`);
+    });
+  }, [ask, job, name, store]);
+}
+
+export function AgentQuestionDialog() {
+  const store = useStore();
+  const q = useSyncExternalStore(store.agentQuestion.subscribe, store.agentQuestion.getState);
+  const docId = useShotEditor((s) => s.doc?.id ?? null);
+  useServerExportReport(q.exportAsk);
+  const question = q.question;
+  // The chunk stays mounted once loaded (the shell's latch): the store's
+  // `open` is what shows it, over the question's own Project only. A closed
+  // question shows only with the refusal of this tab's answer.
+  if (!q.open || question === null || question.projectId !== docId || (question.status !== "open" && q.error === null)) return null;
+  // Keyed by the question, so a new ask never inherits a note or the
+  // changes view written for the one before.
+  return <QuestionBody key={question.id} q={q} question={question} />;
+}
+
+function QuestionBody({ q, question }: { q: AgentQuestionState; question: AgentQuestion }) {
+  const store = useStore();
+  const viewer = useShotEditor(viewerOf);
+  const rev = useShotEditor((s) => s.rev);
+  // The Project's name now: a rename since the question was read still posts
+  // to the right Project.
+  const name = useShotEditor((s) => s.name);
+  const [asking, setAsking] = useState(false);
+  const [note, setNote] = useState("");
+  const close = (): void => store.agentQuestion.hide();
+  const closed = question.status !== "open";
+  const locked = viewer || closed || q.sending;
+  const stale = !closed && rev !== null && rev !== question.boardRev;
+  const asked = new Date(question.askedAt).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+  const who = question.askedBy.member === null ? question.askedBy.client : `${question.askedBy.client} for ${question.askedBy.member}`;
+
+  return (
+    <Dialog
+      open
+      size="wide"
+      className="agent-question"
+      // The question is the title ("The storyboard is ready. Make the
+      // video?"), so it is said once.
+      title={<span data-testid="agent-question-text">{question.question}</span>}
+      onClose={close}
+      actions={
+        closed ? (
+          <button type="button" className="btn is-primary" data-testid="agent-question-close" onClick={close}>
+            Close
+          </button>
+        ) : asking ? (
+          <>
+            <button type="button" className="btn" data-testid="agent-question-back" onClick={() => setAsking(false)}>
+              Back
+            </button>
+            <button
+              type="button"
+              className="btn is-primary"
+              data-testid="agent-question-send"
+              disabled={locked || name === null || note.trim() === ""}
+              onClick={() => {
+                if (name !== null) void store.agentQuestion.answer(name, "changes", note.trim());
+              }}
+            >
+              Send changes
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              type="button"
+              className="btn"
+              data-testid="agent-question-board"
+              onClick={() => {
+                close();
+                store.setStoryboardOpen(true);
+              }}
+            >
+              Open storyboard
+            </button>
+            <button
+              type="button"
+              className="btn"
+              data-testid="agent-question-changes"
+              disabled={locked}
+              onClick={() => setAsking(true)}
+            >
+              Ask for changes
+            </button>
+            <button
+              type="button"
+              className="btn is-primary"
+              data-testid="agent-question-yes"
+              disabled={locked || name === null}
+              onClick={() => {
+                if (name === null) return;
+                void store.agentQuestion.answer(name, "yes").then((taken) => {
+                  // The export the agent asked for, with its choices.
+                  if (taken && question.export !== undefined) store.setExportOpen(true);
+                });
+              }}
+            >
+              {question.export === undefined ? "Make the video" : "Export the video"}
+            </button>
+          </>
+        )
+      }
+    >
+      {/* The agent's lines, as text: never markup. */}
+      <pre className="agent-question-summary" data-testid="agent-question-summary">
+        {question.summary}
+      </pre>
+      <p className="agent-question-who">
+        Asked by {who} at {asked}
+      </p>
+      {stale ? (
+        <p className="agent-question-stale" data-testid="agent-question-stale">
+          The storyboard changed after this was asked. Your answer tells the agent to read it again.
+        </p>
+      ) : null}
+      {asking && !closed ? (
+        <label className="dialog-field">
+          <span className="dialog-label">What should change?</span>
+          <textarea
+            className="agent-question-note"
+            data-testid="agent-question-note"
+            rows={4}
+            maxLength={2048}
+            value={note}
+            disabled={viewer}
+            onChange={(e) => setNote(e.target.value)}
+          />
+        </label>
+      ) : null}
+      {viewer ? (
+        <p className="dialog-error" role="alert">
+          {VIEW_ONLY}
+        </p>
+      ) : q.error !== null ? (
+        <p className="dialog-error" role="alert" data-testid="agent-question-error">
+          {closed ? `${closedLine(question)} Your answer was not sent.` : q.error}
+        </p>
+      ) : null}
+    </Dialog>
+  );
+}
+
+/** What closed the question, said plainly. */
+function closedLine(question: AgentQuestion): string {
+  if (question.status === "answered" && question.answer !== undefined) {
+    const yes = question.export === undefined ? "make the video" : "export the video";
+    return `${question.answer.by.name} answered first: ${question.answer.choice === "yes" ? yes : "asked for changes"}.`;
+  }
+  return "The agent closed this question.";
+}

package/src/panels/agent/agent.css

@@ -1,3 +1,8 @@
+/* Wrapped in the `component-sheets` cascade layer: this sheet is imported by
+   the component that uses it, and under the /scene index's layer order it
+   ranks below the house widgets and the chrome, which is where its source
+   position always put it. Outside /scene the layer is simply its own. */
+@layer component-sheets {
 /* 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
@@ -16,52 +21,53 @@
 .agent-title {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-3);
 }
 
-.agent-title-label {
+/* The panel's error strip: a well tinted toward --danger, not an alert
+   block. It wraps, because the message is the only way out of the state. */
+.agent-panel .error-strip {
   flex: none;
-}
-
-.agent-models {
-  display: flex;
-  gap: 2px;
-  flex: 1;
-  min-width: 0;
+  padding: var(--space-2) var(--space-4);
+  background: var(--danger-bg);
+  color: var(--danger-ink);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+  overflow-wrap: anywhere;
 }
 
 /* ---------- BYOK setup ---------------------------------------------------- */
 
 .agent-setup {
-  padding: 8px;
-  border-bottom: 1px solid var(--border);
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--line);
   flex: none;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-3);
 }
 
 .agent-setup-blurb {
   margin: 0;
-  color: var(--text-2);
-  font-size: 12px;
-  line-height: 1.5;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: var(--leading-body);
 }
 
 .agent-setup-row {
   display: flex;
-  gap: 4px;
+  gap: var(--space-2);
 }
 
 .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);
+  background: var(--fill-rest);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--ink-1);
+  padding: var(--space-2) var(--space-3);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
 }
 
 /* ---------- transcript ----------------------------------------------------- */
@@ -70,48 +76,48 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 8px;
+  padding: var(--space-4);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-3);
 }
 
 .agent-msg {
-  border-radius: var(--radius);
-  padding: 5px 8px;
-  font-size: 12px;
-  line-height: 1.5;
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--type-md);
+  line-height: var(--leading-body);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
 .agent-msg-user {
   background: var(--accent-soft);
-  color: var(--text-1);
+  color: var(--ink-1);
   align-self: flex-end;
   max-width: 90%;
 }
 
 .agent-msg-assistant {
-  background: var(--bg-2);
-  color: var(--text-1);
+  background: var(--fill-rest);
+  color: var(--ink-1);
 }
 
 .agent-msg-error {
-  background: var(--bg-2);
+  background: var(--fill-rest);
   color: var(--danger);
 }
 
 .agent-msg-info {
-  color: var(--text-3);
+  color: var(--ink-3);
   font-style: italic;
 }
 
 .agent-tool {
-  color: var(--text-3);
-  font: var(--mono);
-  font-size: 11px;
-  padding-left: 8px;
+  color: var(--ink-3);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  font-size: var(--type-sm);
+  padding-left: var(--space-4);
 }
 .agent-tool::before {
   content: "⚙ ";
@@ -129,9 +135,9 @@
 /* ---------- proposal cards ------------------------------------------------- */
 
 .agent-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-1);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface-panel);
   overflow: hidden;
   flex: none;
 }
@@ -142,10 +148,10 @@
 .agent-card-head {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-2);
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--line);
+  background: var(--fill-rest);
 }
 
 .agent-card-path {
@@ -154,28 +160,28 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--text-1);
+  color: var(--ink-1);
 }
 /* File cards address a path; canvas cards address an intent sentence. */
 .agent-card:not(.agent-card-canvas) .agent-card-path {
-  font: var(--mono);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
 }
 
 .agent-card-status {
   flex: none;
-  font-size: 11px;
+  font-size: var(--type-sm);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: var(--tracking-caps);
 }
 .agent-card-status.is-applied {
-  color: var(--accent);
+  color: var(--accent-ink);
 }
 .agent-card-status.is-stale,
 .agent-card-status.is-failed {
   color: var(--danger);
 }
 .agent-card-status.is-applying {
-  color: var(--text-2);
+  color: var(--ink-2);
 }
 
 /* ---------- canvas card: doc + layer/track counts + the layer tree -------- */
@@ -184,16 +190,16 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 4px;
-  padding: 4px 8px;
-  font-size: 11px;
-  color: var(--text-3);
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--type-sm);
+  color: var(--ink-3);
 }
 
 .agent-card-doc {
-  color: var(--text-2);
-  font: var(--mono);
-  font-size: 11px;
+  color: var(--ink-2);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  font-size: var(--type-sm);
 }
 
 .agent-card-count::before {
@@ -202,16 +208,16 @@
 
 .agent-tree {
   margin: 0;
-  padding: 4px 0;
+  padding: var(--space-2) 0;
   max-height: 260px;
   overflow: auto;
-  font: var(--mono);
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--text-2);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+  color: var(--ink-2);
 }
 .agent-tree-line {
-  padding: 0 8px;
+  padding: 0 var(--space-4);
   white-space: pre;
 }
 
@@ -219,36 +225,42 @@
 
 .agent-diff {
   margin: 0;
-  padding: 4px 0;
+  padding: var(--space-2) 0;
   max-height: 260px;
   overflow: auto;
-  font: var(--mono);
-  font-size: 11px;
-  line-height: 1.45;
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
 }
 .agent-diff > div {
-  padding: 0 8px;
+  padding: 0 var(--space-4);
   white-space: pre;
 }
+/* The diff hues are the palette's own --success / --danger, mixed rather than
+   restated: the tint is the colour at low alpha, and the ink is the same colour
+   lifted toward the page's white so it stays readable at 11px on a dark row.
+   The two literal greens and reds that used to sit here were neither token, so
+   the one place in this chrome that shows an ADD and a REMOVE spoke a palette
+   nothing else in the product used. */
 .agent-diff-add {
-  background: rgba(64, 160, 96, 0.16);
-  color: #7fd79f;
+  background: color-mix(in srgb, var(--success) 16%, transparent);
+  color: color-mix(in srgb, var(--success) 60%, var(--ink-1));
 }
 .agent-diff-del {
-  background: rgba(200, 72, 72, 0.14);
-  color: #e79a9a;
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  color: color-mix(in srgb, var(--danger) 60%, var(--ink-1));
 }
 .agent-diff-hunk {
-  color: var(--text-3);
+  color: var(--ink-3);
 }
 .agent-diff-ctx {
-  color: var(--text-2);
+  color: var(--ink-2);
 }
 
 .agent-card-note {
-  padding: 4px 8px;
-  color: var(--text-3);
-  font-size: 11px;
+  padding: var(--space-2) var(--space-4);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
 }
 
 .agent-card-error {
@@ -259,64 +271,68 @@
 /* "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);
+  color: var(--warn);
   white-space: normal;
 }
 
+/* "Copy prompt": the Add motion prompt, for pasting into another agent. */
+.agent-copy-prompt {
+  margin: 0 var(--space-4) var(--space-2);
+}
+
 /* ---------- footer --------------------------------------------------------- */
 
 .agent-strip {
   flex: none;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-4);
 }
 
+/* Wraps beside Retry: a probe error cut to one line could not be read. */
 .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;
+  padding: var(--space-1) var(--space-4);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
   text-align: right;
 }
 
 .agent-composer {
   display: flex;
   align-items: flex-end;
-  gap: 4px;
-  padding: 8px;
-  border-top: 1px solid var(--border);
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-top: 1px solid var(--line);
   flex: none;
   flex-wrap: wrap;
 }
 
 .agent-pin {
   flex: 0 0 100%;
-  color: var(--text-3);
-  font-size: 11px;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
 }
 
 .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;
+  background: var(--fill-rest);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--ink-1);
+  padding: var(--space-3) var(--space-4);
   font: inherit;
-  font-size: 12px;
-  line-height: 1.4;
+  font-size: var(--type-md);
+  line-height: var(--leading-body);
 }
 .agent-input:focus {
   outline: 1px solid var(--accent);
 }
+}

package/src/panels/agent/agentGate.ts

@@ -0,0 +1,35 @@
+// Whether the agent can be opened, and the words for it.
+//
+// The credentials probe is the only thing that says this server has an agent
+// lane at all: a `null` answer means the route has not replied, and the drawer
+// would open onto a composer it disables itself. A server that answers with NO
+// KEY still opens, because the drawer's key form is the only place a key can
+// be entered. The right column's Agent tab and the header's Agent button both
+// gate on this, so the two can never disagree.
+import type { AgentCredentialsInfo } from "@dailies-studio/agent-client";
+
+export interface AgentGate {
+  /** False until the probe answers. */
+  ready: boolean;
+  /** The reason while not ready, otherwise what opening it offers. */
+  title: string;
+}
+
+/**
+ * THE EDITOR'S OWN AGENT IS HIDDEN (KAN-34) until it runs on Dailies credits:
+ * agents connect from outside, over MCP (the header's Agent chip). Every door
+ * to the drawer asks this first: its tab, View > Agent, Build planned shots,
+ * Add motion, the shot board's and the comments' Ask agent, and the probe.
+ * `?agent` in the page URL brings it all back, which is how its tests reach it.
+ */
+export function agentInEditor(): boolean {
+  return typeof window !== "undefined" && new URLSearchParams(window.location.search).has("agent");
+}
+
+export function agentGate(credentials: AgentCredentialsInfo | null, probeError: string | null): AgentGate {
+  if (credentials === null) return { ready: false, title: probeError ?? "Checking for the agent backend…" };
+  return {
+    ready: true,
+    title: credentials.configured ? "Agent: describe the scene you want" : "Agent: add an API key to start",
+  };
+}