feat(studio): let an agent edit text and styles, guarded

The first tools that change the composition. Both act on the current
selection and take no handle, which is forced rather than chosen: the
handlers read the ambient React selection, and `applyDomSelection` only
schedules a state update, so selecting and committing inside one call would
write to whatever was selected before. Select first, then edit.

Also plumbs the write-blocked state, which was the blocker for shipping any
write at all. `domEditSaveQueuePaused` and the external-file conflict both
lived on App and were unreachable from the tool surface, so `canWrite` was
optimistic and a comment said so. They now derive into a single
`writeBlockedReason` on the shell context: one field, one owner, conflict
taking precedence because resolving it is what unblocks the queue.

That guard matters more than it looks. Both states are BANNERS in Studio with
no lock behind them, so nothing else was stopping a programmatic write from
landing on top of a conflict the user had been asked to adjudicate.

Three things the tools refuse to fake:

They check the outcome, not the absence of a throw. Studio has several paths
where a failed commit resolves anyway, so awaiting the handler proves nothing.
The tagged outcome added earlier is what proves the write landed.

A partial style result is reported as partial. `handleDomStyleCommit` is one
property per call, so N properties are N commits; the result carries `applied`
and `rejected` maps rather than a single boolean that would have to pick a
side.

Style commits run sequentially, never concurrently. Two commits racing through
Studio's client-side read-modify-write can record undo entries that both claim
the same starting content. There is a test that measures concurrency rather
than trusting the loop.

Every decline reason maps to a hint naming what to do instead, so a refusal
routes the agent rather than just stopping it.

Author: miguel-heygen

packages/studio/src/App.tsx

@@ -433,6 +433,8 @@ export function StudioApp() {
     handleRedo: appHotkeys.handleRedo,
     renderQueue,
     compositionDimensions,
+    domEditSaveQueuePaused: previewPersistence.domEditSaveQueuePaused,
+    externalFileConflict: externalFileChanges.blocked !== null,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion,

packages/studio/src/contexts/StudioContext.tsx

@@ -16,6 +16,13 @@ export interface StudioShellValue {
     undoLabel: string | undefined;
     redoLabel: string | undefined;
   };
+  /**
+   * Why a composition write would be refused right now, or null when writes
+   * are possible. Derived from the paused save queue and the external-file
+   * conflict state, both of which are otherwise banners with no lock behind
+   * them. One field rather than two, so there is one owner of the question.
+   */
+  writeBlockedReason: string | null;
   handleUndo: () => Promise<void>;
   handleRedo: () => Promise<void>;
   renderQueue: {
@@ -106,6 +113,7 @@ export function StudioShellProvider({
     showToast,
     previewIframeRef,
     editHistory,
+    writeBlockedReason,
     handleUndo,
     handleRedo,
     renderQueue,
@@ -122,6 +130,7 @@ export function StudioShellProvider({
       showToast,
       previewIframeRef,
       editHistory,
+      writeBlockedReason,
       handleUndo,
       handleRedo,
       renderQueue,
@@ -138,6 +147,7 @@ export function StudioShellProvider({
       setActiveCompPath,
       showToast,
       previewIframeRef,
+      writeBlockedReason,
       handleUndo,
       handleRedo,
       waitForPendingDomEditSaves,

packages/studio/src/hooks/useStudioContextValue.ts

@@ -25,6 +25,10 @@ interface StudioContextInput {
   // fields around it: the context type owns it.
   renderQueue: StudioContextValue["renderQueue"];
   compositionDimensions: { width: number; height: number } | null;
+  /** Message from `usePreviewPersistence` when auto-save is paused. */
+  domEditSaveQueuePaused: string | null;
+  /** True when an external edit to the open file is awaiting the user's decision. */
+  externalFileConflict: boolean;
   waitForPendingDomEditSaves: () => Promise<void>;
   handlePreviewIframeRef: (iframe: HTMLIFrameElement | null) => void;
   refreshPreviewDocumentVersion: () => void;
@@ -46,6 +50,11 @@ export function buildStudioContextValue(input: StudioContextInput): StudioContex
     timelineElements: input.timelineElements,
     isPlaying: input.isPlaying,
     editHistory: input.editHistory,
+    // Conflict first: when both are true the conflict is the one the user has
+    // been asked to decide, and resolving it is what unblocks the queue.
+    writeBlockedReason: input.externalFileConflict
+      ? "an external change to this file is waiting to be resolved"
+      : input.domEditSaveQueuePaused,
     handleUndo: input.handleUndo,
     handleRedo: input.handleRedo,
     renderQueue: input.renderQueue,

packages/studio/src/webmcp/StudioAgentTools.tsx

@@ -17,15 +17,20 @@ import type { StudioLookSnapshot } from "./tools/lookTools";
  * every animation frame during playback for a value nothing here displays.
  */
 export function StudioAgentTools() {
-  const { projectId, activeCompPath, editHistory } = useStudioShellContext();
+  const { projectId, activeCompPath, editHistory, writeBlockedReason } = useStudioShellContext();
   const {
     domEditSelection,
     selectedGsapAnimations,
     gsapMultipleTimelines,
     gsapUnsupportedTimelinePattern,
   } = useDomEditSelectionContext();
-  const { previewIframeRef, buildDomSelectionFromTarget, applyDomSelection } =
-    useDomEditActionsContext();
+  const {
+    previewIframeRef,
+    buildDomSelectionFromTarget,
+    applyDomSelection,
+    handleDomTextCommit,
+    handleDomStyleCommit,
+  } = useDomEditActionsContext();
 
   const getSnapshot = useCallback((): StudioLookSnapshot => {
     const player = usePlayerStore.getState();
@@ -77,6 +82,9 @@ export function StudioAgentTools() {
       },
       wait: (ms) => new Promise((resolve) => setTimeout(resolve, ms)),
       getCurrentSelection: () => domEditSelection,
+      getWriteBlockedReason: () => writeBlockedReason,
+      setText: (value, fieldKey) => handleDomTextCommit(value, fieldKey),
+      setStyle: (property, value) => handleDomStyleCommit(property, value),
       getGsapDiagnostics: () => ({
         animations: selectedGsapAnimations,
         multipleTimelines: gsapMultipleTimelines,
@@ -90,6 +98,9 @@ export function StudioAgentTools() {
       applyDomSelection,
       projectId,
       activeCompPath,
+      writeBlockedReason,
+      handleDomTextCommit,
+      handleDomStyleCommit,
       domEditSelection,
       selectedGsapAnimations,
       gsapMultipleTimelines,

packages/studio/src/webmcp/tools/contentTools.test.ts

@@ -0,0 +1,201 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from "vitest";
+import {
+  studioSetStyle,
+  studioSetText,
+  type ContentToolDeps,
+  type StudioSetStyleResult,
+  type StudioSetTextResult,
+} from "./contentTools";
+import { expectFailure, expectOk, previewElement, selectionFor } from "../webmcpTestUtils";
+
+function contentDeps(overrides: Partial<ContentToolDeps> = {}): ContentToolDeps {
+  const element = previewElement('<h1 id="headline">Ship it</h1>', "headline");
+  return {
+    getCurrentSelection: () => selectionFor(element),
+    getWriteBlockedReason: () => null,
+    setText: async () => ({ ok: true }),
+    setStyle: async () => ({ ok: true }),
+    ...overrides,
+  };
+}
+
+describe("studioSetText", () => {
+  it("writes the text and reports what it now is", async () => {
+    const setText = vi.fn(async () => ({ ok: true }) as const);
+
+    const result = await studioSetText(contentDeps({ setText }), { text: "Ship it faster" });
+
+    const ok = expectOk<StudioSetTextResult>(result);
+    expect(ok.text).toBe("Ship it faster");
+    expect(ok.changed).toBe(true);
+    expect(setText).toHaveBeenCalledWith("Ship it faster", undefined);
+  });
+
+  it("reports changed:false when the text already said that", async () => {
+    const result = await studioSetText(contentDeps(), { text: "Ship it" });
+
+    expect(expectOk<StudioSetTextResult>(result).changed).toBe(false);
+  });
+
+  it("refuses to write while a conflict is waiting for the user", async () => {
+    // The paused-save and conflict states are banners with no lock behind them.
+    // Nothing else stops a programmatic write landing on top of a decision the
+    // user has been asked to make.
+    const setText = vi.fn();
+
+    const result = expectFailure(
+      await studioSetText(
+        contentDeps({
+          getWriteBlockedReason: () => "an external change to this file is waiting to be resolved",
+          setText,
+        }),
+        { text: "Ship it faster" },
+      ),
+    );
+
+    expect(result.kind).toBe("blocked");
+    expect(result.reason).toMatch(/external change/);
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("does not report success when the commit declined", async () => {
+    // The whole reason the handlers now return an outcome: they resolve on
+    // failure, so awaiting them proves nothing.
+    const result = expectFailure(
+      await studioSetText(
+        contentDeps({ setText: async () => ({ ok: false, reason: "persist-failed" }) }),
+        { text: "Ship it faster" },
+      ),
+    );
+
+    expect(result.kind).toBe("failed");
+    expect(result.reason).toMatch(/persist-failed/);
+  });
+
+  it("turns a decline reason into a hint naming what to do instead", async () => {
+    const result = expectFailure(
+      await studioSetText(
+        contentDeps({ setText: async () => ({ ok: false, reason: "not-text-editable" }) }),
+        { text: "x" },
+      ),
+    );
+
+    expect(result.kind).toBe("blocked");
+    expect(result.hint).toMatch(/studio_inspect/);
+  });
+
+  it("rejects a non-string text without dispatching", async () => {
+    const setText = vi.fn();
+
+    const result = expectFailure(await studioSetText(contentDeps({ setText }), { text: 42 }));
+
+    expect(result.kind).toBe("invalid");
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("fails when nothing is selected", async () => {
+    const setText = vi.fn();
+
+    const result = expectFailure(
+      await studioSetText(contentDeps({ getCurrentSelection: () => null, setText }), { text: "x" }),
+    );
+
+    expect(result.kind).toBe("invalid");
+    expect(result.hint).toMatch(/studio_select/);
+    expect(setText).not.toHaveBeenCalled();
+  });
+});
+
+describe("studioSetStyle", () => {
+  it("applies every property and reports them", async () => {
+    const setStyle = vi.fn(async () => ({ ok: true }) as const);
+
+    const result = await studioSetStyle(contentDeps({ setStyle }), {
+      styles: { color: "red", "font-size": "48px" },
+    });
+
+    const ok = expectOk<StudioSetStyleResult>(result);
+    expect(ok.applied).toEqual({ color: "red", "font-size": "48px" });
+    expect(ok.rejected).toEqual({});
+    expect(setStyle).toHaveBeenCalledTimes(2);
+  });
+
+  it("commits sequentially, never concurrently", async () => {
+    // Two commits racing through Studio's client-side read-modify-write can
+    // record undo entries that both claim the same starting content.
+    let inFlight = 0;
+    let maxInFlight = 0;
+    const setStyle = vi.fn(async () => {
+      inFlight += 1;
+      maxInFlight = Math.max(maxInFlight, inFlight);
+      await Promise.resolve();
+      inFlight -= 1;
+      return { ok: true } as const;
+    });
+
+    await studioSetStyle(contentDeps({ setStyle }), {
+      styles: { color: "red", "font-size": "48px", opacity: "0.5" },
+    });
+
+    expect(maxInFlight).toBe(1);
+  });
+
+  it("reports a partial success as partial, not whole", async () => {
+    const setStyle = vi.fn(async (property: string) =>
+      property === "left"
+        ? ({ ok: false, reason: "geometry-property" } as const)
+        : ({ ok: true } as const),
+    );
+
+    const result = await studioSetStyle(contentDeps({ setStyle }), {
+      styles: { color: "red", left: "10px" },
+    });
+
+    const ok = expectOk<StudioSetStyleResult>(result);
+    expect(ok.applied).toEqual({ color: "red" });
+    expect(ok.rejected).toEqual({ left: "geometry-property" });
+  });
+
+  it("fails when every property was refused", async () => {
+    const result = expectFailure(
+      await studioSetStyle(
+        contentDeps({ setStyle: async () => ({ ok: false, reason: "styles-not-editable" }) }),
+        { styles: { color: "red" } },
+      ),
+    );
+
+    expect(result.kind).toBe("blocked");
+    expect(result.reason).toMatch(/styles-not-editable/);
+  });
+
+  it("rejects an empty styles object rather than committing nothing", async () => {
+    const setStyle = vi.fn();
+
+    const result = expectFailure(await studioSetStyle(contentDeps({ setStyle }), { styles: {} }));
+
+    expect(result.kind).toBe("invalid");
+    expect(setStyle).not.toHaveBeenCalled();
+  });
+
+  it("rejects a non-object styles value", async () => {
+    for (const styles of ["color: red", 42, null, ["color"]]) {
+      const result = expectFailure(await studioSetStyle(contentDeps(), { styles }));
+      expect(result.kind).toBe("invalid");
+    }
+  });
+
+  it("refuses to write while a conflict is waiting for the user", async () => {
+    const setStyle = vi.fn();
+
+    const result = expectFailure(
+      await studioSetStyle(
+        contentDeps({ getWriteBlockedReason: () => "Auto-save is paused", setStyle }),
+        { styles: { color: "red" } },
+      ),
+    );
+
+    expect(result.kind).toBe("blocked");
+    expect(setStyle).not.toHaveBeenCalled();
+  });
+});