@agent-native/core 0.84.30 → 0.84.34

package/corpus/templates/design/server/lib/import-design-files.ts

@@ -0,0 +1,314 @@
+import { readAppStateForCurrentTab } from "@agent-native/core/application-state";
+import {
+  applyText,
+  hasCollabState,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { assertAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+
+import {
+  mergeCanvasFramePlacements,
+  type CanvasFramePlacement,
+} from "../../shared/canvas-frames.js";
+import { getDb, schema } from "../db/index.js";
+
+const DEFAULT_FRAME_WIDTH = 1440;
+const DEFAULT_FRAME_HEIGHT = 900;
+const FRAME_GAP = 96;
+
+export interface ImportedDesignFile {
+  filename: string;
+  fileType: "html" | "css" | "jsx" | "asset";
+  content: string;
+  source?: Record<string, unknown>;
+  preferredFrame?: {
+    title?: string;
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+  };
+}
+
+export interface SaveImportedDesignFilesInput {
+  designId?: string;
+  files: ImportedDesignFile[];
+  sourceType: string;
+  warnings?: string[];
+}
+
+export interface SavedImportedDesignFile {
+  id: string;
+  filename: string;
+  fileType: string;
+  source?: Record<string, unknown>;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function stringFromState(value: unknown, key: string): string | undefined {
+  return isRecord(value) && typeof value[key] === "string"
+    ? (value[key] as string)
+    : undefined;
+}
+
+export async function resolveImportDesignId(
+  explicitDesignId?: string,
+): Promise<string> {
+  if (explicitDesignId?.trim()) return explicitDesignId.trim();
+  const navigation = await readAppStateForCurrentTab("navigation").catch(
+    () => null,
+  );
+  const designId = stringFromState(navigation, "designId");
+  if (!designId) {
+    throw new Error(
+      "No designId was provided and no active design was found in the current editor.",
+    );
+  }
+  return designId;
+}
+
+function parseJson(value: string | null | undefined): Record<string, unknown> {
+  if (!value) return {};
+  try {
+    const parsed = JSON.parse(value);
+    return isRecord(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function sanitizeImportedFilename(filename: string): string {
+  const trimmed = filename.trim();
+  if (!trimmed || trimmed.includes("..") || /[\\/]/.test(trimmed)) {
+    throw new Error("Imported filename is invalid.");
+  }
+  const cleaned = trimmed
+    .replace(/[^\w. -]+/g, "-")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  if (!cleaned) throw new Error("Imported filename is invalid.");
+  return cleaned;
+}
+
+function ensureExtension(
+  filename: string,
+  fileType: ImportedDesignFile["fileType"],
+) {
+  if (/\.[A-Za-z0-9]+$/.test(filename)) return filename;
+  if (fileType === "css") return `${filename}.css`;
+  if (fileType === "jsx") return `${filename}.jsx`;
+  if (fileType === "asset") return filename;
+  return `${filename}.html`;
+}
+
+function uniqueFilename(filename: string, used: Set<string>): string {
+  if (!used.has(filename)) {
+    used.add(filename);
+    return filename;
+  }
+  const dot = filename.lastIndexOf(".");
+  const base = dot > 0 ? filename.slice(0, dot) : filename;
+  const ext = dot > 0 ? filename.slice(dot) : "";
+  let index = 2;
+  while (used.has(`${base}-${index}${ext}`)) index += 1;
+  const next = `${base}-${index}${ext}`;
+  used.add(next);
+  return next;
+}
+
+function positiveDimension(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? Math.round(value)
+    : fallback;
+}
+
+function sanitizeImportedHtml(content: string): string {
+  return content
+    .replace(/<\s*script\b[^>]*>[\s\S]*?<\s*\/\s*script\s*>/gi, "")
+    .replace(/<\s*script\b[^>]*\/?\s*>/gi, "")
+    .replace(/<\s*(iframe|object|embed)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, "")
+    .replace(/<\s*(iframe|object|embed)\b[^>]*\/?\s*>/gi, "")
+    .replace(/\s+on[a-z][\w:-]*\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    .replace(/\s+srcdoc\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    .replace(
+      /\s+(href|src|xlink:href|action|formaction)\s*=\s*"[\s]*(?:javascript|vbscript):[^"]*"/gi,
+      "",
+    )
+    .replace(
+      /\s+(href|src|xlink:href|action|formaction)\s*=\s*'[\s]*(?:javascript|vbscript):[^']*'/gi,
+      "",
+    )
+    .replace(
+      /\s+(href|src|xlink:href|action|formaction)\s*=\s*(?:javascript|vbscript):[^\s>]*/gi,
+      "",
+    )
+    .replace(
+      /\s+style\s*=\s*(["'])(?:(?!\1).)*(?:expression\s*\(|javascript:)(?:(?!\1).)*\1/gi,
+      "",
+    );
+}
+
+export function normalizeImportedHtmlDocument(
+  content: string,
+  sourceLabel: string,
+): string {
+  const normalized = sanitizeImportedHtml(content.replace(/\0/g, "")).trim();
+  if (!normalized) throw new Error("HTML import content is empty.");
+  const safeSourceLabel = sourceLabel.replace(/--+/g, "-").replace(/[<>]/g, "");
+  const comment = `<!-- Imported into Design from ${safeSourceLabel}. -->`;
+  if (/<html[\s>]/i.test(normalized)) {
+    return normalized.replace(
+      /<head(\s[^>]*)?>/i,
+      (match) => `${match}\n  ${comment}`,
+    );
+  }
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  ${comment}
+</head>
+<body>
+${normalized}
+</body>
+</html>`;
+}
+
+export async function saveImportedDesignFiles(
+  input: SaveImportedDesignFilesInput,
+) {
+  if (input.files.length === 0) {
+    throw new Error("No files were produced by the import.");
+  }
+  const designId = await resolveImportDesignId(input.designId);
+  await assertAccess("design", designId, "editor");
+
+  const db = getDb();
+  const now = new Date().toISOString();
+  const savedFiles: SavedImportedDesignFile[] = [];
+  const seedRecords: Array<{ id: string; content: string }> = [];
+  let placedFrames:
+    | Array<{
+        fileId: string;
+        filename?: string;
+        frame: CanvasFramePlacement;
+      }>
+    | undefined;
+
+  await db.transaction(async (tx) => {
+    const [design] = await tx
+      .select()
+      .from(schema.designs)
+      .where(eq(schema.designs.id, designId))
+      .limit(1);
+    if (!design) throw new Error(`Design ${designId} was not found.`);
+
+    const existingFiles = await tx
+      .select()
+      .from(schema.designFiles)
+      .where(eq(schema.designFiles.designId, designId));
+    const usedFilenames = new Set(existingFiles.map((file) => file.filename));
+    const prevData = parseJson(design.data);
+    const previousMetadata = isRecord(prevData.screenMetadata)
+      ? { ...prevData.screenMetadata }
+      : {};
+    const placements: CanvasFramePlacement[] = [];
+    let nextFrameX = 0;
+
+    for (let index = 0; index < input.files.length; index += 1) {
+      const file = input.files[index]!;
+      const filename = uniqueFilename(
+        ensureExtension(sanitizeImportedFilename(file.filename), file.fileType),
+        usedFilenames,
+      );
+      const fileId = nanoid();
+      await tx.insert(schema.designFiles).values({
+        id: fileId,
+        designId,
+        filename,
+        fileType: file.fileType,
+        content: file.content,
+        createdAt: now,
+        updatedAt: now,
+      });
+      seedRecords.push({ id: fileId, content: file.content });
+
+      const width = positiveDimension(
+        file.preferredFrame?.width,
+        DEFAULT_FRAME_WIDTH,
+      );
+      const height = positiveDimension(
+        file.preferredFrame?.height,
+        DEFAULT_FRAME_HEIGHT,
+      );
+      placements.push({
+        fileId,
+        filename,
+        x: file.preferredFrame?.x ?? nextFrameX,
+        y: file.preferredFrame?.y ?? 0,
+        width,
+        height,
+        z: index,
+      });
+      nextFrameX += width + FRAME_GAP;
+      const source = {
+        sourceType: input.sourceType,
+        previewState: "static",
+        title: file.preferredFrame?.title ?? filename.replace(/\.[^.]+$/, ""),
+        width,
+        height,
+        ...file.source,
+      };
+      previousMetadata[fileId] = source;
+      savedFiles.push({
+        id: fileId,
+        filename,
+        fileType: file.fileType,
+        source,
+      });
+    }
+
+    const mergedFrames = mergeCanvasFramePlacements({
+      existing: prevData.canvasFrames,
+      placements,
+      resolveFileId: (placement) => placement.fileId,
+    });
+    placedFrames = mergedFrames.placedFrames;
+    await tx
+      .update(schema.designs)
+      .set({
+        data: JSON.stringify({
+          ...prevData,
+          sourceMode: "import",
+          canvasFrames: mergedFrames.canvasFrames,
+          screenMetadata: previousMetadata,
+          updatedAt: now,
+        }),
+        updatedAt: now,
+      })
+      .where(eq(schema.designs.id, designId));
+  });
+
+  for (const record of seedRecords) {
+    if (await hasCollabState(record.id)) {
+      await applyText(record.id, record.content, "content", "agent");
+    } else {
+      await seedFromText(record.id, record.content);
+    }
+  }
+
+  return {
+    designId,
+    files: savedFiles,
+    warnings: input.warnings ?? [],
+    placedFrames: placedFrames ?? [],
+    overview: true,
+    urlPath: `/design/${designId}`,
+  };
+}

package/corpus/templates/design/server/routes/api/import-design-file.post.ts

@@ -0,0 +1 @@
+export { importDesignFile as default } from "../../handlers/import-design-file.js";

package/corpus/templates/design/server/source-workspace.ts

@@ -0,0 +1,215 @@
+import {
+  hasCollabState,
+  getText,
+  applyText,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { assertAccess, resolveAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+
+import { isBoardFile } from "../shared/board-file.js";
+import { normalizeDesignSourceType } from "../shared/source-mode.js";
+import type { DesignSourceType } from "../shared/source-mode.js";
+import {
+  languageForSourcePath,
+  normalizeInlineSourcePath,
+  sourceContentHash,
+} from "../shared/source-workspace.js";
+import { getDb, schema } from "./db/index.js";
+import "./db/index.js"; // ensure registerShareableResource runs
+
+export interface SourceWorkspaceFile {
+  id: string;
+  designId: string;
+  filename: string;
+  fileType: string;
+  content?: string | null;
+  createdAt: string | null;
+  updatedAt: string | null;
+}
+
+export interface SourceWorkspaceContext {
+  designId: string;
+  sourceType: DesignSourceType;
+  canEdit: boolean;
+  files: SourceWorkspaceFile[];
+}
+
+function parseDesignDataSourceType(value: unknown): DesignSourceType {
+  if (typeof value !== "string") return "inline";
+  try {
+    const parsed: unknown = JSON.parse(value);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      const raw = (parsed as Record<string, unknown>).sourceType;
+      return normalizeDesignSourceType(raw) ?? "inline";
+    }
+  } catch {
+    // Invalid design data falls back to inline, matching existing actions.
+  }
+  return "inline";
+}
+
+function roleCanEdit(role: unknown): boolean {
+  return role === "owner" || role === "admin" || role === "editor";
+}
+
+export async function resolveSourceWorkspace(
+  designId: string,
+  options: { includeContent?: boolean } = {},
+): Promise<SourceWorkspaceContext> {
+  const access = await resolveAccess("design", designId);
+  if (!access) throw new Error("Design not found");
+
+  const db = getDb();
+  const files = options.includeContent
+    ? await db
+        .select({
+          id: schema.designFiles.id,
+          designId: schema.designFiles.designId,
+          filename: schema.designFiles.filename,
+          fileType: schema.designFiles.fileType,
+          content: schema.designFiles.content,
+          createdAt: schema.designFiles.createdAt,
+          updatedAt: schema.designFiles.updatedAt,
+        })
+        .from(schema.designFiles)
+        .where(eq(schema.designFiles.designId, designId))
+    : await db
+        .select({
+          id: schema.designFiles.id,
+          designId: schema.designFiles.designId,
+          filename: schema.designFiles.filename,
+          fileType: schema.designFiles.fileType,
+          createdAt: schema.designFiles.createdAt,
+          updatedAt: schema.designFiles.updatedAt,
+        })
+        .from(schema.designFiles)
+        .where(eq(schema.designFiles.designId, designId));
+
+  return {
+    designId,
+    sourceType: parseDesignDataSourceType(
+      (access.resource as { data?: unknown }).data,
+    ),
+    canEdit: roleCanEdit(access.role),
+    files: files.filter((file) => !isBoardFile(file.filename)),
+  };
+}
+
+export function findSourceWorkspaceFile(
+  files: SourceWorkspaceFile[],
+  target: { fileId?: string; path?: string },
+): SourceWorkspaceFile {
+  const normalizedPath =
+    target.path !== undefined ? normalizeInlineSourcePath(target.path) : null;
+  const file = target.fileId
+    ? files.find((candidate) => candidate.id === target.fileId)
+    : files.find((candidate) => candidate.filename === normalizedPath);
+  if (!file) {
+    throw new Error(
+      target.fileId
+        ? `Source file id "${target.fileId}" not found.`
+        : `Source file "${normalizedPath}" not found.`,
+    );
+  }
+  return file;
+}
+
+export async function readLiveSourceFile(file: SourceWorkspaceFile): Promise<{
+  content: string;
+  versionHash: string;
+  language: string;
+}> {
+  let content = file.content ?? "";
+  try {
+    if (await hasCollabState(file.id)) {
+      const live = await getText(file.id, "content");
+      if (typeof live === "string") content = live;
+    }
+  } catch {
+    // Collab reads are best-effort; SQL content is the fallback.
+  }
+  return {
+    content,
+    versionHash: sourceContentHash(content),
+    language: languageForSourcePath(file.filename),
+  };
+}
+
+export async function writeInlineSourceFile(args: {
+  designId: string;
+  file: SourceWorkspaceFile;
+  content: string;
+  expectedVersionHash?: string;
+}): Promise<{ versionHash: string; changed: boolean; updatedAt: string }> {
+  await assertAccess("design", args.designId, "editor");
+  const db = getDb();
+  const [currentFile] = await db
+    .select({
+      id: schema.designFiles.id,
+      designId: schema.designFiles.designId,
+      filename: schema.designFiles.filename,
+      fileType: schema.designFiles.fileType,
+      content: schema.designFiles.content,
+      createdAt: schema.designFiles.createdAt,
+      updatedAt: schema.designFiles.updatedAt,
+    })
+    .from(schema.designFiles)
+    .where(eq(schema.designFiles.id, args.file.id))
+    .limit(1);
+  if (!currentFile || currentFile.designId !== args.designId) {
+    throw new Error("Source file not found.");
+  }
+  const current = await readLiveSourceFile(currentFile);
+  if (
+    args.expectedVersionHash &&
+    args.expectedVersionHash !== current.versionHash
+  ) {
+    throw new Error(
+      "Source file changed since it was read. Re-read the file and retry.",
+    );
+  }
+
+  const changed = args.content !== current.content;
+  const updatedAt = new Date().toISOString();
+  if (!changed) {
+    return {
+      versionHash: current.versionHash,
+      changed: false,
+      updatedAt: currentFile.updatedAt ?? updatedAt,
+    };
+  }
+
+  if (await hasCollabState(args.file.id)) {
+    const liveBeforeApply = await getText(args.file.id, "content");
+    if (
+      args.expectedVersionHash &&
+      args.expectedVersionHash !== sourceContentHash(liveBeforeApply)
+    ) {
+      throw new Error(
+        "Source file changed since it was read. Re-read the file and retry.",
+      );
+    }
+    if (liveBeforeApply !== args.content) {
+      await applyText(args.file.id, args.content, "content", "agent");
+    }
+  } else {
+    await seedFromText(args.file.id, args.content);
+  }
+
+  await db
+    .update(schema.designFiles)
+    .set({ content: args.content, updatedAt })
+    .where(eq(schema.designFiles.id, args.file.id));
+
+  await db
+    .update(schema.designs)
+    .set({ updatedAt })
+    .where(eq(schema.designs.id, args.designId));
+
+  return {
+    versionHash: sourceContentHash(args.content),
+    changed: true,
+    updatedAt,
+  };
+}

package/corpus/templates/design/shared/design-source-capabilities.ts

@@ -147,15 +147,15 @@ export function unavailable(reason?: string): DesignSourceCapabilityEntry {
  *
  * - CSS-var token edits and motion are available through the Tweaks loop and
  *   the managed `<style data-agent-native-motion>` block respectively.
- * - File-level write ops (`readFile`, `writeFile`, `applyEdit`) are `planned`
- *   pending bridge write hardening.
+ * - File-level ops (`readFile`, `writeFile`, `applyEdit`) are available for
+ *   inline SQL-backed design_files through the Design source action surface.
  * - Real-app-only capabilities (`indexComponents`, `writeTokens`, `branch`,
  *   `deploy*`) are `unavailable` and trigger the "Make it real" CTA.
  */
 export const INLINE_DEFAULT_CAPABILITIES: DesignSourceCapabilities = {
-  readFile: planned("Local file reads require bridge hardening"),
-  writeFile: planned("Local file writes require bridge hardening"),
-  applyEdit: planned("Source edits require bridge hardening"),
+  readFile: available("Inline design files can be read from Design"),
+  writeFile: available("Inline design files can be saved through Design"),
+  applyEdit: available("Inline design files can be edited through Design"),
   resolveNodeToFile: available(),
   previewPatch: available(),
   diffPatch: available(),

package/corpus/templates/design/shared/source-workspace.ts

@@ -0,0 +1,149 @@
+export type SourceEdit =
+  | {
+      kind: "full-replace";
+      content: string;
+    }
+  | {
+      kind: "exact-replace";
+      search: string;
+      replace: string;
+    };
+
+export function sourceContentHash(content: string): string {
+  let hash = 2166136261;
+  for (let index = 0; index < content.length; index += 1) {
+    hash ^= content.charCodeAt(index);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return `${content.length}:${hash.toString(36)}`;
+}
+
+export function normalizeInlineSourcePath(path: string): string {
+  const normalized = path.trim().replace(/^\/+/, "");
+  if (!normalized) throw new Error("Source path is required.");
+  if (
+    normalized.includes("..") ||
+    normalized.startsWith("~") ||
+    normalized.includes("\\")
+  ) {
+    throw new Error("Invalid source path.");
+  }
+  return normalized;
+}
+
+export function languageForSourcePath(path: string): string {
+  const lower = path.toLowerCase();
+  if (lower.endsWith(".html") || lower.endsWith(".htm")) return "html";
+  if (lower.endsWith(".css")) return "css";
+  if (lower.endsWith(".jsx")) return "javascriptreact";
+  if (lower.endsWith(".tsx")) return "typescriptreact";
+  if (lower.endsWith(".ts")) return "typescript";
+  if (lower.endsWith(".js")) return "javascript";
+  if (lower.endsWith(".json")) return "json";
+  if (lower.endsWith(".md") || lower.endsWith(".mdx")) return "markdown";
+  return "plaintext";
+}
+
+export function applySourceEdit(
+  content: string,
+  edit: SourceEdit,
+): {
+  content: string;
+  changed: boolean;
+  editsApplied: number;
+} {
+  if (edit.kind === "full-replace") {
+    return {
+      content: edit.content,
+      changed: edit.content !== content,
+      editsApplied: edit.content === content ? 0 : 1,
+    };
+  }
+
+  if (!edit.search) {
+    throw new Error("exact-replace requires non-empty search text.");
+  }
+  const firstIndex = content.indexOf(edit.search);
+  if (firstIndex === -1) {
+    throw new Error("Search text was not found in the source file.");
+  }
+  const secondIndex = content.indexOf(edit.search, firstIndex + 1);
+  if (secondIndex !== -1) {
+    throw new Error(
+      "Search text matched more than once. Add more surrounding context.",
+    );
+  }
+  const nextContent =
+    content.slice(0, firstIndex) +
+    edit.replace +
+    content.slice(firstIndex + edit.search.length);
+  return {
+    content: nextContent,
+    changed: nextContent !== content,
+    editsApplied: nextContent === content ? 0 : 1,
+  };
+}
+
+function lineNumberAtOffset(content: string, offset: number): number {
+  let line = 1;
+  for (let index = 0; index < offset; index += 1) {
+    if (content.charCodeAt(index) === 10) line += 1;
+  }
+  return line;
+}
+
+function commonPrefixLength(a: string, b: string): number {
+  const max = Math.min(a.length, b.length);
+  let index = 0;
+  while (index < max && a[index] === b[index]) index += 1;
+  return index;
+}
+
+function commonSuffixLength(
+  a: string,
+  b: string,
+  prefixLength: number,
+): number {
+  const max = Math.min(a.length, b.length) - prefixLength;
+  let index = 0;
+  while (index < max && a[a.length - 1 - index] === b[b.length - 1 - index]) {
+    index += 1;
+  }
+  return index;
+}
+
+function excerpt(value: string, max = 1200): string {
+  if (value.length <= max) return value;
+  return `${value.slice(0, max)}\n...`;
+}
+
+export function previewSourceDiff(before: string, after: string) {
+  if (before === after) {
+    return {
+      changed: false,
+      lineStart: null,
+      lineEnd: null,
+      bytesBefore: before.length,
+      bytesAfter: after.length,
+      beforeExcerpt: "",
+      afterExcerpt: "",
+    };
+  }
+
+  const prefix = commonPrefixLength(before, after);
+  const suffix = commonSuffixLength(before, after, prefix);
+  const beforeEnd = before.length - suffix;
+  const afterEnd = after.length - suffix;
+  const lineStart = lineNumberAtOffset(before, prefix);
+  const lineEnd = lineNumberAtOffset(before, beforeEnd);
+
+  return {
+    changed: true,
+    lineStart,
+    lineEnd,
+    bytesBefore: before.length,
+    bytesAfter: after.length,
+    beforeExcerpt: excerpt(before.slice(prefix, beforeEnd)),
+    afterExcerpt: excerpt(after.slice(prefix, afterEnd)),
+  };
+}