@agent-native/core 0.80.8 → 0.80.10

package/corpus/templates/design/actions/add-breakpoint.ts

@@ -0,0 +1,143 @@
+import { defineAction } from "@agent-native/core";
+import { assertAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import "../server/db/index.js"; // ensure registerShareableResource runs
+import type {
+  BreakpointDefinition,
+  BreakpointSet,
+} from "../shared/design-state.js";
+import { widthToPrefix } from "../shared/responsive-classes.js";
+
+/**
+ * Read the active breakpoint set from designs.data, or return a fresh one.
+ * Breakpoint sets are stored inline in `designs.data.breakpointSet` rather
+ * than a dedicated table (simplest additive storage for v1; a dedicated table
+ * can be added later if per-screen sets are needed).
+ *
+ * Follow-up: if per-screen breakpoint sets become necessary, add a
+ * `design_breakpoint_set` table keyed by (design_id, file_id) and migrate
+ * this in-data storage to it.
+ */
+function readBreakpointSet(designData: string | null): BreakpointSet {
+  if (designData) {
+    try {
+      const parsed = JSON.parse(designData) as Record<string, unknown>;
+      if (parsed.breakpointSet && typeof parsed.breakpointSet === "object") {
+        return parsed.breakpointSet as BreakpointSet;
+      }
+    } catch {
+      // ignore parse errors; fall through to default
+    }
+  }
+  return { id: nanoid(), breakpoints: [] };
+}
+
+function writeBreakpointSet(
+  designData: string | null,
+  set: BreakpointSet,
+  now: string,
+): string {
+  let prev: Record<string, unknown> = {};
+  if (designData) {
+    try {
+      const parsed = JSON.parse(designData);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        prev = parsed;
+      }
+    } catch {
+      // ignore
+    }
+  }
+  return JSON.stringify({
+    ...prev,
+    breakpointSet: set,
+    breakpointSetUpdatedAt: now,
+  });
+}
+
+export default defineAction({
+  description:
+    "Add a breakpoint frame to the design's breakpoint set. " +
+    "The breakpoint set is stored in designs.data and controls which side-by-side " +
+    "device widths are shown in the overview canvas (Mobile 390 / Tablet 768 / Desktop 1280, " +
+    "or a custom width). The Tailwind prefix is derived automatically from the width. " +
+    "Duplicate widths are silently ignored.",
+  schema: z.object({
+    designId: z.string().describe("Design project ID"),
+    label: z
+      .string()
+      .min(1)
+      .describe(
+        "Human-readable label shown in the canvas header (e.g. 'Mobile', 'Tablet', 'Desktop').",
+      ),
+    widthPx: z
+      .number()
+      .int()
+      .min(320)
+      .max(3840)
+      .describe(
+        "Frame width in pixels. Snaps semantics to the nearest Tailwind min-width threshold " +
+          "(sm:640 / md:768 / lg:1024 / xl:1280 / 2xl:1536); the exact pixel value is preserved " +
+          "for the frame geometry.",
+      ),
+    id: z
+      .string()
+      .optional()
+      .describe("Optional pre-generated id. Omit to auto-generate."),
+  }),
+  run: async ({ designId, label, widthPx, id: providedId }) => {
+    await assertAccess("design", designId, "editor");
+
+    const db = getDb();
+    const [design] = await db
+      .select({ data: schema.designs.data })
+      .from(schema.designs)
+      .where(eq(schema.designs.id, designId))
+      .limit(1);
+
+    if (!design) throw new Error(`Design '${designId}' not found.`);
+
+    const set = readBreakpointSet(design.data);
+
+    // Ignore duplicate widths.
+    if (set.breakpoints.some((bp) => bp.widthPx === widthPx)) {
+      return {
+        ignored: true,
+        reason: `A breakpoint with width ${widthPx}px already exists.`,
+        breakpointSet: set,
+      };
+    }
+
+    const breakpointId = providedId ?? nanoid();
+    const prefix = widthToPrefix(widthPx);
+
+    const newBreakpoint: BreakpointDefinition = {
+      id: breakpointId,
+      label,
+      widthPx,
+      prefix,
+    };
+
+    // Insert sorted by widthPx ascending (Mobile → Tablet → Desktop).
+    const breakpoints = [...set.breakpoints, newBreakpoint].sort(
+      (a, b) => a.widthPx - b.widthPx,
+    );
+    const updatedSet: BreakpointSet = { ...set, breakpoints };
+
+    const now = new Date().toISOString();
+    const updatedData = writeBreakpointSet(design.data, updatedSet, now);
+    await db
+      .update(schema.designs)
+      .set({ data: updatedData, updatedAt: now })
+      .where(eq(schema.designs.id, designId));
+
+    return {
+      added: newBreakpoint,
+      breakpointSet: updatedSet,
+    };
+  },
+});

package/corpus/templates/design/actions/add-localhost-screens.ts

@@ -30,6 +30,7 @@ const routeInputSchema = z.object({
   path: z.string().optional(),
   url: z.string().optional(),
   title: z.string().optional(),
+  sourceFile: z.string().optional(),
   width: z.number().positive().optional(),
   height: z.number().positive().optional(),
   x: z.number().optional(),
@@ -307,6 +308,7 @@ export default defineAction({
       path: string;
       url: string;
       routeId: string;
+      sourceFile?: string;
       width: number;
       height: number;
     }> = [];
@@ -330,6 +332,7 @@ export default defineAction({
         input.routeId ?? manifestRoute?.id ?? makeLocalhostRouteId(path);
       const title =
         input.title ?? manifestRoute?.title ?? titleFromRoutePath(path);
+      const sourceFile = input.sourceFile ?? manifestRoute?.sourceFile;
       const width = input.width ?? defaultWidth;
       const height = input.height ?? defaultHeight;
       const preferredFilename = `localhost-${slugForPath(path)}.html`;
@@ -369,6 +372,7 @@ export default defineAction({
         path,
         url,
         routeId,
+        sourceFile,
         width,
         height,
       });
@@ -406,6 +410,7 @@ export default defineAction({
         previewUrl: screen.url,
         connectionId: connection.id,
         routeId: screen.routeId,
+        sourceFile: screen.sourceFile,
         path: screen.path,
         bridgeUrl: connection.bridgeUrl ?? undefined,
       };

package/corpus/templates/design/actions/apply-a11y-fix.ts

@@ -0,0 +1,317 @@
+/**
+ * apply-a11y-fix — apply an inline accessibility remediation to a design's
+ * SQL-backed HTML content.
+ *
+ * The Review panel surfaces a11y findings from `run-design-audit`. Many common
+ * fixes — raising text contrast, enlarging a tap target, adding a
+ * focus-visible ring — are ordinary style / class edits that the deterministic
+ * edit engine (`applyVisualEdit`, also used by `apply-visual-edit`) can apply to
+ * inline HTML. This action takes one such finding, derives the deterministic
+ * edit via the shared `a11yFindingToEdit` mapping, applies it, and persists the
+ * patched content. The canvas re-renders from the written content — no iframe
+ * postMessage is needed.
+ *
+ * Fixes that need a new attribute (alt / aria-label) or a semantic/structural
+ * rewrite are NOT expressible through the deterministic engine and remain
+ * "real-app only": `a11yFindingToEdit` returns `null` for them and this action
+ * reports them as not auto-fixable instead of writing.
+ *
+ * Access is gated: only an editor of the design may apply a fix.
+ */
+
+import { defineAction } from "@agent-native/core";
+import {
+  agentEnterDocument,
+  agentLeaveDocument,
+  agentUpdateSelection,
+  applyText,
+  getText,
+  hasCollabState,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { accessFilter, assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import { applyVisualEdit, type EditIntent } from "../shared/code-layer.js";
+import {
+  A11Y_FINDING_CATEGORIES,
+  A11Y_FINDING_SEVERITIES,
+  a11yFindingToEdit,
+  type A11yFinding,
+} from "../shared/design-review.js";
+
+// ---------------------------------------------------------------------------
+// Schemas
+// ---------------------------------------------------------------------------
+
+/**
+ * The subset of an {@link A11yFinding} the fix needs. The full finding is
+ * accepted (extra fields are stripped) so callers can forward what they already
+ * have from `run-design-audit` / `get-design-review` verbatim.
+ */
+const findingSchema = z
+  .object({
+    id: z.string(),
+    severity: z.enum(A11Y_FINDING_SEVERITIES),
+    category: z.enum(A11Y_FINDING_CATEGORIES),
+    message: z.string().default(""),
+    detail: z.string().optional(),
+    nodeId: z.string().optional(),
+    selector: z.string().optional(),
+    wcag: z.string().optional(),
+    fixAvailable: z.boolean().optional(),
+  })
+  .superRefine((finding, ctx) => {
+    if (!finding.nodeId && !finding.selector) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["nodeId"],
+        message:
+          "finding.nodeId or finding.selector is required to anchor the fix.",
+      });
+    }
+  });
+
+// ---------------------------------------------------------------------------
+// Live-content + resolve/persist helpers (mirrors apply-visual-edit's scoped path)
+// ---------------------------------------------------------------------------
+
+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 remains the fallback.
+  }
+  return storedContent;
+}
+
+async function resolveEditableDesignFile(source: {
+  designId?: string;
+  fileId?: string;
+  filename?: string;
+}): Promise<{
+  id: string;
+  designId: string;
+  filename: string;
+  content: string;
+}> {
+  if (!source.fileId && !source.designId) {
+    throw new Error("designId or fileId is required.");
+  }
+
+  const db = getDb();
+  const conditions = [
+    accessFilter(schema.designs, schema.designShares),
+    source.fileId
+      ? eq(schema.designFiles.id, source.fileId)
+      : eq(schema.designFiles.designId, source.designId ?? ""),
+  ];
+  if (!source.fileId) {
+    conditions.push(
+      eq(schema.designFiles.filename, source.filename ?? "index.html"),
+    );
+  }
+
+  const [file] = await db
+    .select({
+      id: schema.designFiles.id,
+      designId: schema.designFiles.designId,
+      filename: schema.designFiles.filename,
+      fileType: schema.designFiles.fileType,
+      content: schema.designFiles.content,
+    })
+    .from(schema.designFiles)
+    .innerJoin(
+      schema.designs,
+      eq(schema.designFiles.designId, schema.designs.id),
+    )
+    .where(and(...conditions))
+    .limit(1);
+
+  if (!file) {
+    throw new Error("Design HTML file not found.");
+  }
+  if (file.fileType !== "html") {
+    throw new Error("Inline a11y fixes only support HTML files.");
+  }
+  if (source.designId && file.designId !== source.designId) {
+    throw new Error(
+      `designId "${source.designId}" does not match file "${file.id}"`,
+    );
+  }
+
+  // Writes require editor access to the owning design.
+  await assertAccess("design", file.designId, "editor");
+
+  return {
+    id: file.id,
+    designId: file.designId,
+    filename: file.filename,
+    content: await liveContent(file.id, file.content ?? ""),
+  };
+}
+
+async function persistDesignFileEdit(file: {
+  id: string;
+  designId: string;
+  content: string;
+}): Promise<void> {
+  // Re-assert at the write boundary so the persist path is independently scoped.
+  await assertAccess("design", file.designId, "editor");
+
+  const db = getDb();
+  const now = new Date().toISOString();
+
+  agentEnterDocument(file.id);
+  try {
+    await db
+      .update(schema.designFiles)
+      .set({ content: file.content, updatedAt: now })
+      .where(eq(schema.designFiles.id, file.id));
+
+    if (await hasCollabState(file.id)) {
+      await applyText(file.id, file.content, "content", "agent");
+    } else {
+      await seedFromText(file.id, file.content);
+    }
+
+    await db
+      .update(schema.designs)
+      .set({ updatedAt: now })
+      .where(eq(schema.designs.id, file.designId));
+  } finally {
+    agentLeaveDocument(file.id);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Action
+// ---------------------------------------------------------------------------
+
+export default defineAction({
+  description:
+    "Apply one inline accessibility fix to a design's SQL-backed HTML. " +
+    "Given an a11y finding from run-design-audit (with a nodeId or selector), " +
+    "derives a deterministic style/class edit — raise text contrast, enlarge a " +
+    "tap target, or add a focus-visible ring — and persists it via the same " +
+    "edit engine as apply-visual-edit. Findings needing new attributes " +
+    "(alt / aria-label) or semantic/structural rewrites are not auto-fixable " +
+    "and are reported as such (no write). Editor access required.",
+  schema: z.object({
+    designId: z
+      .string()
+      .optional()
+      .describe(
+        "Design project id. Required unless fileId is provided. Combined with " +
+          "filename to resolve the HTML file to patch.",
+      ),
+    fileId: z
+      .string()
+      .optional()
+      .describe(
+        "Specific design_files.id to patch. Takes priority over designId/filename.",
+      ),
+    filename: z
+      .string()
+      .optional()
+      .default("index.html")
+      .describe(
+        "Filename to patch when fileId is not provided. Defaults to index.html.",
+      ),
+    finding: findingSchema.describe(
+      "The a11y finding to fix. Must carry a nodeId or selector to anchor the edit.",
+    ),
+    color: z
+      .string()
+      .optional()
+      .describe(
+        "Optional replacement foreground color (e.g. '#111827') for contrast " +
+          "fixes. When omitted, a high-contrast near-black default is used.",
+      ),
+    includeContent: z
+      .boolean()
+      .optional()
+      .default(false)
+      .describe("Include the patched HTML content in the response."),
+  }),
+  run: async ({
+    designId,
+    fileId,
+    filename,
+    finding,
+    color,
+    includeContent,
+  }) => {
+    const plan = a11yFindingToEdit(finding as A11yFinding, { color });
+
+    if (!plan) {
+      return {
+        applied: false,
+        autoFixable: false,
+        reason:
+          `Finding "${finding.id}" (${finding.category}) is not auto-fixable ` +
+          "inline — it needs a new attribute (alt / aria-label) or a semantic " +
+          "change that the deterministic edit engine cannot apply. Resolve it " +
+          "in the real app or via the agent instead.",
+        finding,
+      };
+    }
+
+    const file = await resolveEditableDesignFile({
+      designId,
+      fileId,
+      filename,
+    });
+
+    const patch = applyVisualEdit(file.content, plan.edit as EditIntent, {
+      source: {
+        kind: "design-file",
+        designId: file.designId,
+        fileId: file.id,
+        filename: file.filename,
+      },
+    });
+
+    if (patch.result.target) {
+      agentUpdateSelection(file.id, {
+        selection: patch.result.target.selector,
+        nodeId: patch.result.target.nodeId,
+        editingFile: file.filename,
+        designId: file.designId,
+      });
+    }
+
+    const persisted = patch.result.status === "applied" && patch.result.changed;
+    if (persisted) {
+      await persistDesignFileEdit({
+        id: file.id,
+        designId: file.designId,
+        content: patch.content,
+      });
+    }
+
+    return {
+      applied: persisted,
+      autoFixable: true,
+      fixLabel: plan.label,
+      edit: plan.edit,
+      result: patch.result,
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      finding,
+      persisted,
+      patchedContent: includeContent ? patch.content : undefined,
+      bytesBefore: file.content.length,
+      bytesAfter: patch.content.length,
+    };
+  },
+});