feat(studio): make agent edits live and explicit (#3581)

2026-09-11 06:30:03 +00:00 · 2026-09-02 01:11:13 -04:00
parent f498be94c2
commit 6b5b4cb988
94 changed files with 7181 additions and 985 deletions
@@ -0,0 +1,8 @@
+# WebMCP edit-loop acceptance fixture
+
+Two nested source files intentionally author the same `id` and `data-hf-id` for their headline.
+The browser acceptance test must use the source-safe handle returned by `studio_look`, edit only one
+headline, and prove the sibling source stays byte-for-byte unchanged.
+
+The runner copies this fixture to scratch and symlinks that copy into Studio's ignored
+`data/projects` directory. It never mutates the checked-in fixture.
@@ -0,0 +1,33 @@
+<template id="left-card-template">
+  <section
+    id="left-card"
+    data-composition-id="left-card"
+    data-width="380"
+    data-height="300"
+    data-start="0"
+    data-duration="5"
+    data-no-timeline
+    style="
+      box-sizing: border-box;
+      width: 380px;
+      height: 300px;
+      padding: 36px;
+      border: 2px solid #2dd4bf;
+      border-radius: 28px;
+      background: #10231f;
+    "
+  >
+    <div id="left-card-body" data-hf-id="left-card-body" style="width: 100%; height: 100%">
+      <p style="margin: 0 0 28px; color: #5eead4; font-size: 16px; letter-spacing: 0.16em">
+        LEFT SOURCE
+      </p>
+      <h1
+        id="duplicate-headline"
+        data-hf-id="duplicate-headline"
+        style="margin: 0; color: #ecfeff; font-size: 48px; line-height: 1.05"
+      >
+        Left source
+      </h1>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,33 @@
+<template id="right-card-template">
+  <section
+    id="right-card"
+    data-composition-id="right-card"
+    data-width="380"
+    data-height="300"
+    data-start="0"
+    data-duration="5"
+    data-no-timeline
+    style="
+      box-sizing: border-box;
+      width: 380px;
+      height: 300px;
+      padding: 36px;
+      border: 2px solid #a78bfa;
+      border-radius: 28px;
+      background: #201936;
+    "
+  >
+    <div id="right-card-body" data-hf-id="right-card-body" style="width: 100%; height: 100%">
+      <p style="margin: 0 0 28px; color: #c4b5fd; font-size: 16px; letter-spacing: 0.16em">
+        RIGHT SOURCE
+      </p>
+      <h1
+        id="duplicate-headline"
+        data-hf-id="duplicate-headline"
+        style="margin: 0; color: #f5f3ff; font-size: 48px; line-height: 1.05"
+      >
+        Right source
+      </h1>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  }
+}
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>WebMCP edit-loop fixture</title>
+    <style>
+      html,
+      body {
+        width: 960px;
+        height: 540px;
+        margin: 0;
+        overflow: hidden;
+        background: #0b0f17;
+        color: #f7fafc;
+        font-family: Arial, sans-serif;
+      }
+      #webmcp-edit-loop {
+        position: relative;
+        width: 960px;
+        height: 540px;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 50% 10%, rgba(103, 232, 183, 0.12), transparent 40%), #0b0f17;
+      }
+      .card-host {
+        position: absolute;
+        top: 120px;
+        width: 380px;
+        height: 300px;
+      }
+      #left-host {
+        left: 60px;
+      }
+      #right-host {
+        left: 520px;
+      }
+    </style>
+  </head>
+  <body>
+    <main
+      id="webmcp-edit-loop"
+      data-composition-id="webmcp-edit-loop"
+      data-width="960"
+      data-height="540"
+      data-start="0"
+      data-duration="5"
+      data-fps="30"
+      data-no-timeline
+    >
+      <div
+        id="left-host"
+        class="clip card-host"
+        data-hf-id="left-host"
+        data-composition-id="left-card-host"
+        data-composition-src="compositions/left-card.html"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+      ></div>
+      <div
+        id="right-host"
+        class="clip card-host"
+        data-hf-id="right-host"
+        data-composition-id="right-card-host"
+        data-composition-src="compositions/right-card.html"
+        data-start="0"
+        data-duration="5"
+        data-track-index="1"
+      ></div>
+    </main>
+  </body>
+</html>