@agent-native/core 0.79.26 → 0.80.0

package/corpus/templates/design/actions/apply-visual-edit.ts

@@ -0,0 +1,303 @@
+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 CodeLayerSource,
+  type EditIntent,
+} from "../shared/code-layer.js";
+
+type VisualEditActionSource = CodeLayerSource & { html?: string };
+
+function parseJsonString(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+const sourceSchema = z.preprocess(
+  parseJsonString,
+  z.object({
+    kind: z
+      .enum(["design-file", "inline-html", "local-file", "remote-url"])
+      .default("design-file"),
+    designId: z.string().optional(),
+    fileId: z.string().optional(),
+    filename: z.string().optional().default("index.html"),
+    path: z.string().optional(),
+    url: z.string().optional(),
+    revision: z.string().optional(),
+    html: z.string().optional(),
+  }),
+);
+
+const targetSchema = z.object({
+  nodeId: z.string().optional(),
+  selector: z.string().optional(),
+});
+
+const intentSchema = z.preprocess(
+  parseJsonString,
+  z.discriminatedUnion("kind", [
+    z.object({
+      kind: z.literal("style"),
+      target: targetSchema,
+      property: z
+        .string()
+        .describe(
+          "CSS property to set. Deterministic edits cover the visual editor's common layout, typography, fill, stroke, effect, transform, and spacing properties.",
+        ),
+      value: z.string().describe("CSS value to write into the inline style."),
+    }),
+    z.object({
+      kind: z.literal("class"),
+      target: targetSchema,
+      operation: z.enum(["add", "remove", "replace", "set"]),
+      className: z.string().optional(),
+      classNames: z.array(z.string()).optional(),
+      from: z.string().optional(),
+      to: z.string().optional(),
+    }),
+    z.object({
+      kind: z.literal("textContent"),
+      target: targetSchema,
+      value: z.string().describe("Text content for a leaf HTML element."),
+      html: z
+        .string()
+        .optional()
+        .describe(
+          "Optional sanitized inner HTML for preserving styled inline text runs.",
+        ),
+    }),
+    z.object({
+      kind: z.literal("moveNode"),
+      target: targetSchema,
+      anchor: targetSchema,
+      placement: z.enum(["before", "after", "inside"]),
+    }),
+  ]),
+);
+
+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: VisualEditActionSource,
+): Promise<{
+  id: string;
+  designId: string;
+  filename: string;
+  content: string;
+  codeLayerSource: CodeLayerSource;
+}> {
+  if (!source.fileId && !source.designId) {
+    throw new Error(
+      "source.designId or source.fileId is required for design-file.",
+    );
+  }
+
+  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("Visual code-layer edits only support HTML files for now.");
+  }
+
+  await assertAccess("design", file.designId, "editor");
+
+  return {
+    id: file.id,
+    designId: file.designId,
+    filename: file.filename,
+    content: await liveContent(file.id, file.content ?? ""),
+    codeLayerSource: {
+      kind: "design-file",
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      revision: source.revision,
+    },
+  };
+}
+
+async function persistDesignFileEdit(file: {
+  id: string;
+  designId: string;
+  content: string;
+}): Promise<void> {
+  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);
+  }
+}
+
+export default defineAction({
+  description:
+    "Apply one deterministic visual edit to a code-backed HTML design layer. " +
+    "Supports safe inline style, class, and leaf textContent edits on inline/SQL HTML files; escalates ambiguous or structural edits with PatchResult statuses.",
+  schema: z.object({
+    source: sourceSchema.describe(
+      "Edit source. Use kind=design-file with designId/filename or fileId to persist into SQL; kind=inline-html with html for a preview-only patch.",
+    ),
+    intent: intentSchema.describe(
+      "Visual edit intent targeting a CodeLayerProjection nodeId or selector.",
+    ),
+    includeContent: z
+      .boolean()
+      .optional()
+      .default(false)
+      .describe("Include patched HTML content in the response."),
+  }),
+  run: async ({ source, intent, includeContent }) => {
+    const actionSource = source as VisualEditActionSource;
+    const editIntent = intent as EditIntent;
+
+    if (actionSource.kind === "inline-html") {
+      const codeLayerSource: CodeLayerSource = {
+        kind: "inline-html",
+        filename: actionSource.filename,
+        revision: actionSource.revision,
+      };
+      const patch = applyVisualEdit(actionSource.html ?? "", editIntent, {
+        source: codeLayerSource,
+      });
+      return {
+        result: patch.result,
+        projection: patch.projection,
+        patchedContent: includeContent ? patch.content : undefined,
+        bytesBefore: (actionSource.html ?? "").length,
+        bytesAfter: patch.content.length,
+      };
+    }
+
+    if (actionSource.kind !== "design-file") {
+      const codeLayerSource: CodeLayerSource = {
+        kind: actionSource.kind,
+        path: actionSource.path,
+        url: actionSource.url,
+        filename: actionSource.filename,
+        revision: actionSource.revision,
+      };
+      const patch = applyVisualEdit("", editIntent, {
+        source: codeLayerSource,
+      });
+      return {
+        result: patch.result,
+        projection: patch.projection,
+        bytesBefore: 0,
+        bytesAfter: 0,
+      };
+    }
+
+    const file = await resolveEditableDesignFile(actionSource);
+    const patch = applyVisualEdit(file.content, editIntent, {
+      source: file.codeLayerSource,
+    });
+
+    if (patch.result.target) {
+      agentUpdateSelection(file.id, {
+        selection: patch.result.target.selector,
+        nodeId: patch.result.target.nodeId,
+        editingFile: file.filename,
+        designId: file.designId,
+      });
+    }
+
+    if (patch.result.status === "applied" && patch.result.changed) {
+      await persistDesignFileEdit({
+        id: file.id,
+        designId: file.designId,
+        content: patch.content,
+      });
+    }
+
+    return {
+      result: patch.result,
+      projection: patch.projection,
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      persisted: patch.result.status === "applied" && patch.result.changed,
+      patchedContent: includeContent ? patch.content : undefined,
+      bytesBefore: file.content.length,
+      bytesAfter: patch.content.length,
+    };
+  },
+});

package/corpus/templates/design/actions/connect-localhost.ts

@@ -0,0 +1,183 @@
+import { defineAction } from "@agent-native/core";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
+import { and, eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import {
+  DESIGN_BRIDGE_OPERATIONS,
+  makeLocalhostRouteId,
+  titleFromRoutePath,
+} from "../shared/source-mode.js";
+
+const routeSchema = z.object({
+  id: z.string().optional(),
+  path: z.string().min(1),
+  title: z.string().optional(),
+  sourceFile: z.string().optional(),
+  sourceKind: z.enum(["react-router", "html", "manual"]).optional(),
+  screenshotUrl: z.string().optional(),
+  metadata: z.record(z.string(), z.unknown()).optional(),
+});
+
+const capabilitySchema = z.object({
+  operation: z.enum(DESIGN_BRIDGE_OPERATIONS),
+  status: z.enum(["available", "planned", "disabled"]),
+  reason: z.string().optional(),
+});
+
+function normalizeUrl(value: string, label: string): string {
+  const raw = value.trim();
+  const withProtocol = /^[a-z]+:\/\//i.test(raw) ? raw : `http://${raw}`;
+  const parsed = new URL(withProtocol);
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    throw new Error(`${label} must be an http(s) URL`);
+  }
+  parsed.hash = "";
+  return parsed.toString().replace(/\/$/, "");
+}
+
+export default defineAction({
+  description:
+    "Register or refresh a localhost Design source connection produced by `agent-native design connect`. Stores the dev server URL, bridge URL, route manifest, and operation capabilities so the UI can later list local-code artboards.",
+  schema: z.object({
+    id: z
+      .string()
+      .optional()
+      .describe("Optional existing connection ID. Omit to create one."),
+    name: z.string().optional().describe("Human-readable connection name."),
+    devServerUrl: z
+      .string()
+      .describe("Local app dev server URL, for example http://localhost:5173"),
+    bridgeUrl: z
+      .string()
+      .optional()
+      .describe("Local Design bridge URL printed by the CLI."),
+    rootPath: z.string().optional().describe("Repository root for the app."),
+    routes: z
+      .array(routeSchema)
+      .optional()
+      .describe("Discovered app routes/screens to become localhost artboards."),
+    routeManifest: z
+      .object({
+        version: z.literal(1).default(1),
+        sourceType: z.literal("localhost").default("localhost"),
+        devServerUrl: z.string().optional(),
+        rootPath: z.string().optional(),
+        routes: z.array(routeSchema),
+        generatedAt: z.string().optional(),
+      })
+      .optional()
+      .describe("Full route manifest emitted by the CLI."),
+    capabilities: z
+      .array(capabilitySchema)
+      .optional()
+      .describe("Bridge operation capabilities."),
+    status: z
+      .enum(["connected", "detected", "manual", "error"])
+      .optional()
+      .default("connected"),
+  }),
+  run: async (args) => {
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+
+    const now = new Date().toISOString();
+    const id = args.id ?? nanoid();
+    const db = getDb();
+    const devServerUrl = normalizeUrl(args.devServerUrl, "devServerUrl");
+    const bridgeUrl = args.bridgeUrl
+      ? normalizeUrl(args.bridgeUrl, "bridgeUrl")
+      : undefined;
+    const rawRoutes = args.routeManifest?.routes ?? args.routes ?? [];
+    const routes = rawRoutes.map((route) => ({
+      id: route.id ?? makeLocalhostRouteId(route.path),
+      path: route.path,
+      title: route.title ?? titleFromRoutePath(route.path),
+      sourceFile: route.sourceFile,
+      sourceKind: route.sourceKind ?? "manual",
+      screenshotUrl: route.screenshotUrl,
+      metadata: route.metadata,
+    }));
+    const routeManifest = {
+      version: 1 as const,
+      sourceType: "localhost" as const,
+      devServerUrl,
+      rootPath: args.routeManifest?.rootPath ?? args.rootPath,
+      routes,
+      generatedAt: args.routeManifest?.generatedAt ?? now,
+    };
+    const capabilities =
+      args.capabilities ??
+      DESIGN_BRIDGE_OPERATIONS.map((operation) => ({
+        operation,
+        status:
+          operation === "readFile" ||
+          operation === "applyEdit" ||
+          operation === "writeFile"
+            ? ("planned" as const)
+            : ("available" as const),
+        reason:
+          operation === "writeFile"
+            ? "Local file writes require the next bridge hardening pass."
+            : undefined,
+      }));
+
+    const values = {
+      id,
+      name: args.name ?? new URL(devServerUrl).host,
+      sourceType: "localhost" as const,
+      devServerUrl,
+      bridgeUrl: bridgeUrl ?? null,
+      rootPath: routeManifest.rootPath ?? null,
+      routeManifest: JSON.stringify(routeManifest),
+      capabilities: JSON.stringify(capabilities),
+      status: args.status,
+      lastSeenAt: now,
+      ownerEmail,
+      orgId: getRequestOrgId() ?? null,
+      updatedAt: now,
+    };
+
+    const existing = await db
+      .select({ id: schema.designLocalhostConnections.id })
+      .from(schema.designLocalhostConnections)
+      .where(
+        and(
+          eq(schema.designLocalhostConnections.id, id),
+          eq(schema.designLocalhostConnections.ownerEmail, ownerEmail),
+        ),
+      )
+      .limit(1);
+
+    if (existing[0]) {
+      await db
+        .update(schema.designLocalhostConnections)
+        .set(values)
+        .where(eq(schema.designLocalhostConnections.id, id));
+    } else {
+      await db.insert(schema.designLocalhostConnections).values({
+        ...values,
+        createdAt: now,
+      });
+    }
+
+    return {
+      id,
+      sourceType: "localhost",
+      name: values.name,
+      devServerUrl,
+      bridgeUrl: bridgeUrl ?? null,
+      rootPath: routeManifest.rootPath ?? null,
+      routeCount: routes.length,
+      routes,
+      capabilities,
+      status: args.status,
+      lastSeenAt: now,
+    };
+  },
+});