@agent-native/core 0.80.10 → 0.81.0

package/corpus/templates/clips/server/routes/api/uploads/[recordingId]/chunk.post.ts

@@ -14,7 +14,6 @@
  */
 
 import {
-  listAppState,
   readAppState,
   writeAppState,
 } from "@agent-native/core/application-state";
@@ -36,6 +35,7 @@ import {
 import finalizeRecording from "../../../../../actions/finalize-recording.js";
 import { getDb, schema } from "../../../../db/index.js";
 import { debugLog } from "../../../../lib/debug.js";
+import { sumRecordingChunkBytes } from "../../../../lib/recording-upload-state.js";
 import {
   getEventOwnerContext,
   ownerEmailMatches,
@@ -82,14 +82,6 @@ function stateNumber(
   return typeof raw === "number" && Number.isFinite(raw) ? raw : undefined;
 }
 
-async function sumPersistedChunkBytes(recordingId: string): Promise<number> {
-  const chunks = await listAppState(`recording-chunks-${recordingId}-`);
-  return chunks.reduce(
-    (total, entry) => total + (stateNumber(entry.value, "bytes") ?? 0),
-    0,
-  );
-}
-
 export default defineEventHandler(async (event: H3Event) => {
   const recordingId = getRouterParam(event, "recordingId");
   if (!recordingId) {
@@ -278,7 +270,7 @@ export default defineEventHandler(async (event: H3Event) => {
           recordingId,
           status: "failed",
           failureReason: reason,
-          bytesReceived: await sumPersistedChunkBytes(recordingId),
+          bytesReceived: await sumRecordingChunkBytes(ownerEmail, recordingId),
           maxBytes: MAX_RECORDING_UPLOAD_BYTES,
           updatedAt: new Date().toISOString(),
         });
@@ -323,7 +315,10 @@ export default defineEventHandler(async (event: H3Event) => {
       const chunkKey = `recording-chunks-${recordingId}-${paddedIndex}`;
       const previousChunk = await readAppState(chunkKey);
       const previousBytes = stateNumber(previousChunk, "bytes") ?? 0;
-      const persistedBytesBefore = await sumPersistedChunkBytes(recordingId);
+      const persistedBytesBefore = await sumRecordingChunkBytes(
+        ownerEmail,
+        recordingId,
+      );
       const nextBytes =
         Math.max(0, persistedBytesBefore - previousBytes) + bytes.byteLength;
 
@@ -339,7 +334,7 @@ export default defineEventHandler(async (event: H3Event) => {
         data: toBase64(bytes),
         createdAt: new Date().toISOString(),
       });
-      bytesReceived = await sumPersistedChunkBytes(recordingId);
+      bytesReceived = await sumRecordingChunkBytes(ownerEmail, recordingId);
       if (bytesReceived > MAX_RECORDING_UPLOAD_BYTES) {
         return failRecordingTooLarge(bytesReceived);
       }
@@ -396,7 +391,7 @@ export default defineEventHandler(async (event: H3Event) => {
     // Final chunk — kick off finalize. We await so the client gets a single
     // "done" response with the final URL (instead of needing to poll).
     if (isFinal) {
-      bytesReceived = await sumPersistedChunkBytes(recordingId);
+      bytesReceived = await sumRecordingChunkBytes(ownerEmail, recordingId);
       if (bytesReceived > MAX_RECORDING_UPLOAD_BYTES) {
         return failRecordingTooLarge(bytesReceived);
       }
@@ -437,6 +432,61 @@ export default defineEventHandler(async (event: H3Event) => {
         };
       } catch (err) {
         console.error("[clips] finalize-recording failed:", err);
+        const [committed] = await db
+          .select({
+            id: schema.recordings.id,
+            status: schema.recordings.status,
+            videoUrl: schema.recordings.videoUrl,
+            durationMs: schema.recordings.durationMs,
+            width: schema.recordings.width,
+            height: schema.recordings.height,
+            hasAudio: schema.recordings.hasAudio,
+            hasCamera: schema.recordings.hasCamera,
+          })
+          .from(schema.recordings)
+          .where(
+            and(
+              eq(schema.recordings.id, recordingId),
+              ownerEmailMatches(schema.recordings.ownerEmail, ownerEmail),
+            ),
+          );
+        if (committed?.status === "ready" && committed.videoUrl) {
+          console.warn(
+            "[clips] finalize reported an error after committing a ready recording; returning committed success.",
+            {
+              recordingId,
+              error: err instanceof Error ? err.message : String(err),
+            },
+          );
+          try {
+            await writeAppState(`recording-upload-${recordingId}`, {
+              recordingId,
+              status: "ready",
+              progress: 100,
+              videoUrl: committed.videoUrl,
+              finishedAt: new Date().toISOString(),
+            });
+          } catch (stateErr) {
+            console.warn("[clips] committed-ready state repair failed:", {
+              recordingId,
+              err:
+                stateErr instanceof Error ? stateErr.message : String(stateErr),
+            });
+          }
+          return {
+            ok: true,
+            finalized: true,
+            recoveredAfterFinalizeError: true,
+            id: committed.id,
+            status: "ready",
+            videoUrl: committed.videoUrl,
+            durationMs: committed.durationMs,
+            width: committed.width,
+            height: committed.height,
+            hasAudio: committed.hasAudio,
+            hasCamera: committed.hasCamera,
+          };
+        }
         await db
           .update(schema.recordings)
           .set({

package/corpus/templates/clips/server/routes/api/uploads/[recordingId]/status.get.ts

@@ -0,0 +1,74 @@
+import { runWithRequestContext } from "@agent-native/core/server";
+import { and, eq } from "drizzle-orm";
+import {
+  createError,
+  defineEventHandler,
+  getRouterParam,
+  setResponseStatus,
+  type H3Event,
+} from "h3";
+
+import { getDb, schema } from "../../../../db/index.js";
+import { resolvePlayerVideoUrl } from "../../../../lib/player-video-url.js";
+import {
+  getEventOwnerContext,
+  ownerEmailMatches,
+} from "../../../../lib/recordings.js";
+
+function appPath(path: string): string {
+  if (!path.startsWith("/")) return path;
+  const raw = process.env.VITE_APP_BASE_PATH || process.env.APP_BASE_PATH || "";
+  const base = raw.trim().replace(/^\/+/, "").replace(/\/+$/, "");
+  return base ? `/${base}${path}` : path;
+}
+
+export default defineEventHandler(async (event: H3Event) => {
+  const recordingId = getRouterParam(event, "recordingId");
+  if (!recordingId) {
+    throw createError({ statusCode: 400, message: "Missing recordingId" });
+  }
+
+  let ownerEmail: string;
+  let orgId: string | undefined;
+  try {
+    const context = await getEventOwnerContext(event);
+    ownerEmail = context.userEmail;
+    orgId = context.orgId;
+  } catch {
+    throw createError({ statusCode: 401, message: "Unauthorized" });
+  }
+
+  return runWithRequestContext({ userEmail: ownerEmail, orgId }, async () => {
+    const [recording] = await getDb()
+      .select()
+      .from(schema.recordings)
+      .where(
+        and(
+          eq(schema.recordings.id, recordingId),
+          ownerEmailMatches(schema.recordings.ownerEmail, ownerEmail),
+        ),
+      )
+      .limit(1);
+
+    if (!recording) {
+      setResponseStatus(event, 404);
+      return { error: "Not found" };
+    }
+
+    return {
+      recording: {
+        id: recording.id,
+        status: recording.status,
+        videoUrl: resolvePlayerVideoUrl(recording, { appPath }),
+        durationMs: recording.durationMs,
+        width: recording.width,
+        height: recording.height,
+        hasAudio: Boolean(recording.hasAudio),
+        hasCamera: Boolean(recording.hasCamera),
+        uploadProgress: recording.uploadProgress,
+        failureReason: recording.failureReason,
+        updatedAt: recording.updatedAt,
+      },
+    };
+  });
+});

package/corpus/templates/design/.agents/skills/design-systems/SKILL.md

@@ -166,6 +166,24 @@ pnpm action index-design-system-with-builder --codeFiles '[{"filename":"globals.
 
 Uploads code/design files to Builder and starts design-system indexing. Do not create a local design system from uploaded code files unless the user explicitly asks for a manual local fallback.
 
+For the active design's Tokens panel, use `import-design-tokens` when the user
+wants to pull reusable CSS vars/tokens straight into the open design without
+creating a full design system:
+
+```bash
+pnpm action import-design-tokens \
+  --designId "design_123" \
+  --source files \
+  --files '[{"filename":"design.md","content":"Primary color: #2563eb"}]'
+```
+
+Supported sources are `files`, `paste`, and `current-design`. The action parses
+CSS variables, design.md-style labeled lines, Tailwind/theme JSON, colors,
+spacing, radii, and fonts, then persists them through the design's
+`tweakSelections` so the canvas updates like any other token edit. Treat manual
+`apply-design-token-edit` calls as a last-resort one-off edit after import has
+been tried or ruled out.
+
 ### Source: Documents (DOCX, PPTX, PDF)
 
 ```bash
@@ -204,6 +222,20 @@ indexing through the setup page upload route. Do not parse `.fig` files locally
 and do not call `create-design-system` from raw `.fig` output; Builder owns the
 indexed brand kit, generated docs, and usage guidance.
 
+**When the user wants a Figma Assets-style native component drawer inside
+Design**, do not use Figma or media assets. Use `list-design-native-assets` to
+choose an editable primitive/component/layout, then
+`insert-design-native-asset` to insert it into the active screen. These entries
+are Design-native HTML stamped with component/layer metadata.
+
+**When the user wants reusable Figma components/assets**, do not run
+design-system indexing just to insert a component. Use
+`list-figma-library-assets` with a Figma file URL/key, then
+`insert-figma-library-asset` with the returned `renderUrl`, `fileKey`,
+`nodeId`, `componentKey`, and `sourceUrl`. This inserts a rendered
+component/component set with provenance. Styles and variables still belong in
+the Builder-backed design-system path above.
+
 ### Source: Brand Analysis (combines website + notes)
 
 ```bash

package/corpus/templates/design/AGENTS.md

@@ -32,6 +32,11 @@ patterns live in `.agents/skills/`.
   per direction; avoid lorem ipsum, generic SaaS filler, and decorative
   placeholders. Include expected responsive/accessibility states and visually
   inspect the result before calling it ready.
+- For editable reusable building blocks inside Design, use
+  `list-design-native-assets` first, then `insert-design-native-asset` with the
+  chosen kind. These are Design-native HTML primitives/components, not external
+  media, so prefer them when the user asks for a Figma Assets-style library that
+  supports our own primitives.
 - For raster image generation, restyling, or editing existing screenshots/photos,
   use the available first-party Assets MCP tool such as `generate-asset` instead
   of placeholders or generic stock imagery. When the Assets picker returns a
@@ -43,6 +48,15 @@ patterns live in `.agents/skills/`.
   chat-attachment URL or call `upload-image` to create one before delegating. If
   no image/upload provider is configured, say that specific setup is needed and
   continue any non-image Design work separately.
+- For reusable Figma library components, use `list-figma-library-assets` with a
+  Figma file URL or file key. It returns components/component sets with
+  thumbnails, rendered insert URLs, and Figma provenance. Insert with
+  `insert-figma-library-asset`, preserving `fileKey`, `nodeId`, `componentKey`,
+  `sourceUrl`, and the rendered URL. This path requires the saved
+  `FIGMA_ACCESS_TOKEN` secret; never ask the user to paste that token into chat
+  or pass it as an action parameter. Figma styles and variables are design-system
+  inputs, not draggable media assets; route full file/design-system extraction
+  through Builder-backed indexing.
 - Use Alpine.js and Tailwind CDN for interactive prototypes. Prefer Alpine
   directives over raw inline event handlers.
 - Navigate between prototype screens with Alpine state (`x-show`), a
@@ -72,6 +86,13 @@ patterns live in `.agents/skills/`.
   `inspectorTab: "extensions"` after installing it.
 - Follow linked design-system tokens and `customInstructions` whenever present;
   explicit user instructions in the current turn still win.
+- When a user wants tokens from design.md, CSS, theme/tokens JSON, Tailwind
+  config, local files, or the current design, call `import-design-tokens` and
+  preserve its `tokens`, `filesAnalyzed`, and provenance in your answer. Manual
+  `apply-design-token-edit` / one-by-one token entry is the fallback for a small
+  one-off token, not the primary import workflow. For Figma variables/styles or
+  raw `.fig` files, keep using Builder-backed design-system indexing instead of
+  local `.fig` parsing.
 - Persist useful work early: create/update the design and files as soon as a
   coherent candidate exists, then iterate.
 - For non-trivial new design prompts, ask before generating: create/open the
@@ -104,6 +125,12 @@ patterns live in `.agents/skills/`.
   generated CSS selectors as a compatibility fallback only. For localhost React
   screens, resolve through build-time source/debug metadata (stable generated
   ids, component name, file, and line) before falling back to selectors.
+- For inline/Alpine motion, use `get-motion-timeline` to inspect the active
+  file's saved or CSS-recovered timeline, then call `apply-motion-edit` with the
+  same `sourceRef`/`fileId` to update it. Motion edits persist as durable
+  managed keyframes in `<style data-agent-native-motion>` plus editable timeline
+  metadata; it is not a one-way export. Real CSS module or `motion/react`
+  write-back remains a localhost/fusion follow-up capability.
 - For multi-variant work, use `present-design-variants` so every candidate is
   saved as a normal overview-board screen and the user gets one inline chat
   button per screen name. After the user picks, delete the unchosen variant

package/corpus/templates/design/CODE_NATIVE_DESIGN_STUDIO_IMPLEMENTATION_PLAN.md

@@ -396,7 +396,7 @@ Requirements:
 - diamond keyframes
 - play/scrub controls
 - auto-keyframe control
-- primary `Write to CSS` action
+- autosave status for managed CSS persistence
 - compact Motion/Keyframe inspector section
 - no separate motion app/screen
 

package/corpus/templates/design/DESIGN-STUDIO-PLAN.md

@@ -347,7 +347,7 @@ The CSS is the runtime truth; the JSON `tracks` only aid editing.
 
 - **UI (matches the motion artboard):** a full-width, collapsible **Motion dock**
   at the bottom of `DesignEditor.tsx` (animated layer rows, property tracks, time
-  ruler, diamond keyframes, play/scrub, auto-keyframe toggle, **Write to CSS**),
+  ruler, diamond keyframes, play/scrub, auto-keyframe toggle, autosave status),
   with the canvas still visible above; a compact **Motion section** in the
   inspector for the selected keyframe (numeric + easing + transform/opacity).
 - **Preview:** scrubbing sends preview-only bridge messages (`motion-preview` /
@@ -360,8 +360,8 @@ The CSS is the runtime truth; the JSON `tracks` only aid editing.
 **Real-app superset:** write keyframes into real CSS modules, optional
 `motion`-react round-trip, Dev Mode export.
 
-**Acceptance:** scrubbing never writes; **Write to CSS** is one atomic action with
-diff/rollback proof; multiple layers and tracks animate.
+**Acceptance:** scrubbing never writes; timeline edits autosave through one atomic
+action with diff/rollback proof; multiple layers and tracks animate.
 
 ### 6.4 States, responsive & captures
 
@@ -615,7 +615,7 @@ motion edits safely, use review outputs, and offer Builder migration CTAs.
    runtime + source-write + fallback + diff proof.
 
 **First user-visible milestone:** on an inline design, edit a token (live, persisted)
-and add a keyframe animation that **Write to CSS** commits with a visible diff —
+and add a keyframe animation that autosaves to managed CSS with a visible diff —
 "visual edit becomes persisted code/CSS" without the whole real-app stack.
 
 ---
@@ -659,7 +659,7 @@ and add a keyframe animation that **Write to CSS** commits with a visible diff
   (Mobile) is untouched; the Desktop frame reflects the cascade; reset-to-base clears
   the override; the same flow works on an inline design and a real-app URL.
 - **Alpine smoke:** edit layout/styles; preview + persist a CSS-var token change;
-  add simple keyframes and Write to CSS; run a basic a11y scan; see the real-app CTA
+  add simple keyframes that autosave to managed CSS; run a basic a11y scan; see the real-app CTA
   for full component controls.
 
 ---

package/corpus/templates/design/actions/apply-component-prop-edit.ts

@@ -25,7 +25,6 @@ import {
   agentLeaveDocument,
   agentUpdateSelection,
   applyText,
-  getText,
   hasCollabState,
   seedFromText,
 } from "@agent-native/core/collab";
@@ -49,7 +48,10 @@ import type {
   ClassEditIntent,
   StyleEditIntent,
 } from "../shared/code-layer.js";
-import { componentNameFor } from "../shared/component-model.js";
+import {
+  componentNameFor,
+  componentNodeIdMatches,
+} from "../shared/component-model.js";
 import { hasCapability } from "../shared/design-source-capabilities.js";
 import { normalizeDesignSourceType } from "../shared/source-mode.js";
 
@@ -114,26 +116,11 @@ export function applyRootAttributeEdit(
   };
 }
 
-async function liveContent(
-  fileId: string,
-  storedContent: string,
-): Promise<string> {
-  try {
-    if (await hasCollabState(fileId)) {
-      const live = await getText(fileId, "content");
-      if (typeof live === "string") return live;
-    }
-  } catch {
-    // Collab reads are best-effort; SQL content is the fallback.
-  }
-  return storedContent;
-}
-
 async function persistEdit(file: {
   id: string;
   designId: string;
   content: string;
-}): Promise<void> {
+}): Promise<string> {
   await assertAccess("design", file.designId, "editor");
   const db = getDb();
   const now = new Date().toISOString();
@@ -158,6 +145,8 @@ async function persistEdit(file: {
   } finally {
     agentLeaveDocument(file.id);
   }
+
+  return now;
 }
 
 // ─── Action ───────────────────────────────────────────────────────────────────
@@ -210,8 +199,24 @@ export default defineAction({
         }),
       ])
       .describe("The prop edit to apply"),
+    source: z
+      .object({
+        currentContent: z
+          .string()
+          .optional()
+          .describe(
+            "Latest editor HTML snapshot. Used to compose rapid sequential prop edits before collab persistence catches up.",
+          ),
+        revision: z
+          .string()
+          .optional()
+          .describe(
+            "design_files.updatedAt value the currentContent is based on.",
+          ),
+      })
+      .optional(),
   }),
-  run: async ({ designId, nodeId, fileId, edit }) => {
+  run: async ({ designId, nodeId, fileId, edit, source }) => {
     const db = getDb();
 
     // ── Access check ────────────────────────────────────────────────────────
@@ -271,6 +276,7 @@ export default defineAction({
         designId: schema.designFiles.designId,
         filename: schema.designFiles.filename,
         content: schema.designFiles.content,
+        updatedAt: schema.designFiles.updatedAt,
       })
       .from(schema.designFiles)
       .innerJoin(
@@ -282,7 +288,31 @@ export default defineAction({
 
     if (!file) throw new Error("Design HTML file not found.");
 
-    const html = await liveContent(file.id, file.content ?? "");
+    if (
+      source?.currentContent &&
+      source.revision &&
+      file.updatedAt &&
+      source.revision !== file.updatedAt
+    ) {
+      return {
+        designId,
+        nodeId,
+        persisted: false,
+        conflict: true,
+        fileId: file.id,
+        filename: file.filename,
+        error:
+          "This file changed since this component prop edit was prepared. Refresh the editor and try again.",
+      };
+    }
+
+    // Prefer explicit editor content after the caller's revision check, and use
+    // the saved SQL content as the fallback. Collab/Yjs reads can be stale
+    // across local dev worker processes and make prop controls lag behind.
+    const html =
+      typeof source?.currentContent === "string"
+        ? source.currentContent
+        : (file.content ?? "");
 
     // ── Resolve node ─────────────────────────────────────────────────────────
     const codeLayerSource: CodeLayerSource = {
@@ -296,7 +326,9 @@ export default defineAction({
       source: codeLayerSource,
     });
 
-    const node = projection.nodes.find((n) => n.id === nodeId);
+    const node = projection.nodes.find((n) =>
+      componentNodeIdMatches(n, nodeId),
+    );
     if (!node) {
       throw new Error(
         `Node "${nodeId}" not found. Run get-code-layer-projection to list current ids.`,
@@ -398,8 +430,10 @@ export default defineAction({
     }
 
     // ── Persist ──────────────────────────────────────────────────────────────
-    if (changed) {
-      await persistEdit({
+    const shouldPersist = changed || patchedContent !== (file.content ?? "");
+
+    if (shouldPersist) {
+      const updatedAt = await persistEdit({
         id: file.id,
         designId: file.designId,
         content: patchedContent,
@@ -411,6 +445,22 @@ export default defineAction({
         editingFile: file.filename,
         designId: file.designId,
       });
+      return {
+        designId,
+        nodeId,
+        componentName,
+        sourceType,
+        editKind: edit.kind,
+        persisted: shouldPersist,
+        ctaRequired: false,
+        fileId: file.id,
+        filename: file.filename,
+        updatedAt,
+        content: patchedContent,
+        bytesBefore: html.length,
+        bytesAfter: patchedContent.length,
+        note: "Edit applied and persisted via the deterministic HTML-patch path.",
+      };
     }
 
     return {
@@ -419,13 +469,14 @@ export default defineAction({
       componentName,
       sourceType,
       editKind: edit.kind,
-      persisted: changed,
+      persisted: shouldPersist,
       ctaRequired: false,
       fileId: file.id,
       filename: file.filename,
+      content: patchedContent,
       bytesBefore: html.length,
       bytesAfter: patchedContent.length,
-      note: changed
+      note: shouldPersist
         ? "Edit applied and persisted via the deterministic HTML-patch path."
         : "No change applied — the edit produced the same result as the current content.",
     };

package/corpus/templates/design/actions/apply-design-state.ts

@@ -152,10 +152,23 @@ export default defineAction({
     if (route !== undefined) patch.route = route;
     if (fixtureData !== undefined) {
       // Sanitise replayed markup (stored-XSS guard) before persisting.
-      patch.fixtureData =
-        fixtureData !== null
-          ? JSON.stringify(sanitizeStatePayload(fixtureData))
-          : null;
+      if (fixtureData !== null) {
+        const fixtureDataJson = JSON.stringify(
+          sanitizeStatePayload(fixtureData),
+        );
+        if (
+          Buffer.byteLength(fixtureDataJson, "utf8") > CAPTURE_DATA_MAX_BYTES
+        ) {
+          throw new Error(
+            `fixtureData exceeds the ${Math.round(
+              CAPTURE_DATA_MAX_BYTES / 1024,
+            )}KB limit. Trim the payload before updating this fixture.`,
+          );
+        }
+        patch.fixtureData = fixtureDataJson;
+      } else {
+        patch.fixtureData = null;
+      }
     }
     if (captureData !== undefined) {
       if (captureData !== null) {