@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/design/server/db/schema.ts

@@ -55,3 +55,29 @@ export const designVersions = table("design_versions", {
   snapshot: text("snapshot").notNull(),
   createdAt: text("created_at").default(now()),
 });
+
+export const designLocalhostConnections = table(
+  "design_localhost_connections",
+  {
+    id: text("id").primaryKey(),
+    name: text("name").notNull(),
+    sourceType: text("source_type", { enum: ["localhost"] })
+      .notNull()
+      .default("localhost"),
+    devServerUrl: text("dev_server_url").notNull(),
+    bridgeUrl: text("bridge_url"),
+    rootPath: text("root_path"),
+    routeManifest: text("route_manifest").notNull().default("{}"),
+    capabilities: text("capabilities").notNull().default("[]"),
+    status: text("status", {
+      enum: ["connected", "detected", "manual", "error"],
+    })
+      .notNull()
+      .default("connected"),
+    lastSeenAt: text("last_seen_at"),
+    ownerEmail: text("owner_email").notNull(),
+    orgId: text("org_id"),
+    createdAt: text("created_at").default(now()),
+    updatedAt: text("updated_at").default(now()),
+  },
+);

package/corpus/templates/design/server/handlers/import-figma-system.ts

@@ -1,63 +1,21 @@
 import {
-  extractFigBrandKit,
-  looksLikeFigFile,
-} from "@agent-native/core/brand-kit/fig";
-import { getSession } from "@agent-native/core/server";
+  FeatureNotConfiguredError,
+  getSession,
+  startBuilderDesignSystemIndex,
+} from "@agent-native/core/server";
 import {
   defineEventHandler,
   readMultipartFormData,
   setResponseStatus,
 } from "h3";
 
-import type { DesignSystemData } from "../../shared/api.js";
-
-// .fig files can be large (the document is a kiwi-compressed canvas). Cap to
-// keep memory bounded — typical brand files are well under this.
 const MAX_FIG_BYTES = 200 * 1024 * 1024;
 
-/** Fill any tokens the extractor couldn't determine with sane defaults, so the
- * resulting design system is a complete, usable DesignSystemData. */
-function withDefaults(partial: Partial<DesignSystemData>): DesignSystemData {
-  const dark = partial.defaults?.background === "dark";
-  return {
-    colors: {
-      primary: "#0F172A",
-      secondary: "#1E293B",
-      accent: "#2684FF",
-      background: dark ? "#0B1220" : "#FFFFFF",
-      surface: dark ? "#111827" : "#F8FAFC",
-      text: dark ? "#F8FAFC" : "#0F172A",
-      textMuted: dark ? "#94A3B8" : "#64748B",
-      ...partial.colors,
-    },
-    typography: {
-      headingFont: "Sora",
-      bodyFont: "Inter",
-      headingWeight: "700",
-      bodyWeight: "400",
-      headingSizes: { h1: "48px", h2: "32px", h3: "24px" },
-      ...partial.typography,
-    },
-    spacing: { pagePadding: "32px", elementGap: "16px", ...partial.spacing },
-    borders: { radius: "12px", accentWidth: "2px", ...partial.borders },
-    defaults: {
-      background: partial.defaults?.background ?? "light",
-      labelStyle: partial.defaults?.labelStyle ?? "none",
-    },
-    logos: partial.logos ?? [],
-    ...(partial.imageStyle ? { imageStyle: partial.imageStyle } : {}),
-    ...(partial.customCSS ? { customCSS: partial.customCSS } : {}),
-    ...(partial.notes ? { notes: partial.notes } : {}),
-  };
-}
-
 /**
- * Parse-only endpoint: accepts a `.fig` upload (multipart field `file`),
- * decodes it, and returns the deeply-extracted brand profile (tokens, signature
- * gradients, and a synthesized brand-character brief) for preview. It does NOT
- * persist — the client reviews/edits, then calls the `create-design-system`
- * action on confirm (which owns ownership/scoping). This mirrors Claude
- * Design's upload → parse → preview → approve flow.
+ * Builder-indexing endpoint: accepts a `.fig` upload (multipart field `file`)
+ * and starts Builder's design-system indexing pipeline. The app does not decode
+ * Figma files locally; Builder owns extraction, generated docs, and the
+ * asynchronous indexing job.
  */
 export const importFigmaSystem = defineEventHandler(async (event) => {
   const session = await getSession(event).catch(() => null);
@@ -89,45 +47,40 @@ export const importFigmaSystem = defineEventHandler(async (event) => {
     };
   }
 
-  // Validate it actually looks like a .fig: a zip archive (PK) or fig-kiwi.
-  if (!looksLikeFigFile(part.data)) {
-    setResponseStatus(event, 400);
-    return { error: "That doesn't look like a Figma .fig file." };
-  }
-
-  let extracted;
-  try {
-    extracted = extractFigBrandKit(part.data);
-  } catch (e) {
-    setResponseStatus(event, 422);
-    return {
-      error: `Could not decode the .fig file: ${
-        e instanceof Error ? e.message : "unknown error"
-      }`,
-    };
-  }
-
-  const thumbnailDataUrl = extracted.preview.thumbnailDataUrl;
-  const data = withDefaults(extracted.data as Partial<DesignSystemData>);
-  // Attach the file thumbnail as a brand reference image for the generator.
-  if (thumbnailDataUrl) {
-    data.imageStyle = {
-      referenceUrls: [thumbnailDataUrl],
-      styleDescription: data.imageStyle?.styleDescription ?? "",
-    };
-  }
-
   const suggestedTitle =
     (part.filename || "Imported brand")
       .replace(/\.fig$/i, "")
       .replace(/[-_]+/g, " ")
       .trim() || "Imported brand";
 
-  return {
-    ok: true,
-    suggestedTitle,
-    data,
-    customInstructions: extracted.customInstructions,
-    preview: extracted.preview,
-  };
+  try {
+    return await startBuilderDesignSystemIndex({
+      projectName: suggestedTitle,
+      files: [
+        {
+          name: part.filename || "brand.fig",
+          data: part.data,
+          mimeType: "application/octet-stream",
+        },
+      ],
+    });
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error:
+          err.message ||
+          "Connect Builder.io before indexing a design system from Figma.",
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error:
+        err instanceof Error
+          ? err.message
+          : "Builder design-system indexing failed.",
+    };
+  }
 });

package/corpus/templates/design/server/lib/design-snapshot.ts

@@ -15,6 +15,7 @@ import { hasCollabState, getText } from "@agent-native/core/collab";
 import { eq } from "drizzle-orm";
 
 import type { TweakDefinition } from "../../shared/api.js";
+import { shouldUseLiveFileContent } from "../../shared/html-content.js";
 import {
   resolveTweaksToCssVars,
   type TweakSelections,
@@ -78,7 +79,14 @@ export async function buildDesignSnapshot(
     try {
       if (await hasCollabState(f.id)) {
         const live = await getText(f.id, "content");
-        if (typeof live === "string" && live.length > 0) {
+        if (
+          typeof live === "string" &&
+          shouldUseLiveFileContent({
+            liveContent: live,
+            storedContent: f.content,
+            fileType: f.fileType,
+          })
+        ) {
           content = live;
           source = "collab";
         }

package/corpus/templates/design/server/plugins/agent-chat.ts

@@ -11,6 +11,7 @@ const INITIAL_TOOL_NAMES = [
   "view-screen",
   "list-designs",
   "get-design",
+  "get-design-snapshot",
   "create-design",
   "edit-design",
   "generate-design",
@@ -39,6 +40,8 @@ export default createAgentChatPlugin({
   resolveOrgId: async (event) => (await getOrgContext(event)).orgId,
   systemPrompt: `You are an AI prototyping assistant. You create and edit designs, files, design systems, variants, exports, sharing, and connected repository context through actions and shared application state.
 
+When the user asks you to refine an existing design, call view-screen if the open design is unclear, then read the live current file with get-design-snapshot before editing. For small localized changes, call edit-design with exact search/replace edits. For broad copy-only changes such as translating all visible text, call edit-design in replace-file mode with the complete updated file content from the snapshot so the HTML structure, scripts, styles, and tweaks are preserved without dozens of fragile search blocks. Do not claim the design is updated until the mutating action succeeds.
+
 Provider-specific Design actions are shortcuts, not limits. If a first-class action cannot express the exact GitHub endpoint, repository tree query, code search, issue or pull request query, request body, pagination mode, payload shape, metadata field, or API version needed, call provider-api-catalog and provider-api-docs as needed, then call provider-api-request against the real GitHub API. Use the raw provider API escape hatch instead of weakening the answer or claiming Design cannot do something the underlying GitHub API can do.
 
 Design's GitHub provider API uses the saved GITHUB_TOKEN secret when present. Never ask the user to paste tokens into chat. For large GitHub search results or repository scans, pass stageAs and pagination options to provider-api-request, then use query-staged-dataset to count, filter, group, or project the staged rows.

package/corpus/templates/design/shared/api.ts

@@ -15,6 +15,33 @@ import type {
   BrandKitDefaults,
 } from "@agent-native/core/brand-kit";
 
+export type {
+  DesignBridgeCapability,
+  DesignBridgeOperation,
+  DesignBridgeOperationStatus,
+  DesignBridgeRequest,
+  DesignBridgeResponse,
+  DesignSourceDescriptor,
+  DesignSourceType,
+  FlowCanvasArtboard,
+  FlowCanvasEdge,
+  FlowCanvasSnapshotRef,
+  FusionDesignSource,
+  InlineDesignSource,
+  LocalhostDesignConnectionConfig,
+  LocalhostDesignRoute,
+  LocalhostDesignRouteManifest,
+  LocalhostDesignSource,
+} from "./source-mode";
+export {
+  DESIGN_BRIDGE_OPERATIONS,
+  DESIGN_SOURCE_TYPES,
+  isDesignSourceType,
+  makeLocalhostRouteId,
+  normalizeDesignSourceType,
+  titleFromRoutePath,
+} from "./source-mode";
+
 export interface DesignSystemData extends BrandKitData {
   spacing: { pagePadding: string; elementGap: string };
   defaults: BrandKitDefaults;

package/corpus/templates/design/shared/canvas-frames.ts

@@ -0,0 +1,103 @@
+export interface CanvasFrameGeometry {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rotation?: number;
+  z?: number;
+}
+
+export type CanvasFrameGeometryById = Record<string, CanvasFrameGeometry>;
+
+export interface CanvasFramePlacement extends CanvasFrameGeometry {
+  fileId?: string;
+  filename?: string;
+}
+
+const CANVAS_FRAME_GEOMETRY_KEYS = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "rotation",
+  "z",
+] as const;
+
+function finiteNumber(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
+export function parseCanvasFrameGeometry(
+  value: unknown,
+): CanvasFrameGeometry | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const raw = value as Record<string, unknown>;
+  const frame: CanvasFrameGeometry = {};
+  for (const key of CANVAS_FRAME_GEOMETRY_KEYS) {
+    const next = finiteNumber(raw[key]);
+    if (next !== undefined) frame[key] = next;
+  }
+  return frame;
+}
+
+export function parseCanvasFrameGeometryById(
+  value: unknown,
+): CanvasFrameGeometryById {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  return Object.fromEntries(
+    Object.entries(value as Record<string, unknown>)
+      .map(([id, rawFrame]) => {
+        const frame = parseCanvasFrameGeometry(rawFrame);
+        return frame ? ([id, frame] as const) : null;
+      })
+      .filter((entry): entry is readonly [string, CanvasFrameGeometry] =>
+        Boolean(entry),
+      ),
+  );
+}
+
+export function mergeCanvasFramePlacements({
+  existing,
+  placements,
+  resolveFileId,
+}: {
+  existing: unknown;
+  placements: CanvasFramePlacement[];
+  resolveFileId: (placement: CanvasFramePlacement) => string | undefined;
+}): {
+  canvasFrames: CanvasFrameGeometryById;
+  placedFrames: Array<{
+    fileId: string;
+    filename?: string;
+    frame: CanvasFrameGeometry;
+  }>;
+} {
+  const canvasFrames = parseCanvasFrameGeometryById(existing);
+  const placedFrames: Array<{
+    fileId: string;
+    filename?: string;
+    frame: CanvasFrameGeometry;
+  }> = [];
+
+  for (const placement of placements) {
+    if (!placement.fileId && !placement.filename) {
+      throw new Error("canvasFrames entries require fileId or filename");
+    }
+    const fileId = resolveFileId(placement);
+    if (!fileId) {
+      throw new Error(
+        `canvasFrames entry did not match a design file: ${placement.filename ?? placement.fileId}`,
+      );
+    }
+    const frame = parseCanvasFrameGeometry(placement) ?? {};
+    canvasFrames[fileId] = {
+      ...canvasFrames[fileId],
+      ...frame,
+    };
+    placedFrames.push({ fileId, filename: placement.filename, frame });
+  }
+
+  return { canvasFrames, placedFrames };
+}