@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/slides/actions/index-design-system-with-builder.ts

@@ -0,0 +1,259 @@
+import { defineAction } from "@agent-native/core";
+import {
+  startBuilderDesignSystemIndex,
+  type BuilderDesignSystemIndexFile,
+} from "@agent-native/core/server";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+
+const MAX_CODE_FILES = 50;
+const MAX_TOTAL_CODE_BYTES = 2 * 1024 * 1024;
+
+const codeFileSchema = z.object({
+  filename: z.string().trim().min(1).describe("File name or relative path"),
+  content: z.string().describe("Raw text content of the code/design file"),
+  mimeType: z.string().trim().optional().describe("Optional MIME type"),
+});
+
+function mimeTypeForFilename(filename: string, explicit?: string): string {
+  if (explicit?.trim()) return explicit.trim();
+  const lower = filename.toLowerCase();
+  if (lower.endsWith(".css")) return "text/css";
+  if (lower.endsWith(".json")) return "application/json";
+  if (lower.endsWith(".md") || lower.endsWith(".mdx")) return "text/markdown";
+  if (lower.endsWith(".html")) return "text/html";
+  if (lower.endsWith(".svg")) return "image/svg+xml";
+  return "text/plain";
+}
+
+function makeFiles(
+  codeFiles: Array<z.infer<typeof codeFileSchema>> | undefined,
+): BuilderDesignSystemIndexFile[] {
+  const encoder = new TextEncoder();
+  const files: BuilderDesignSystemIndexFile[] = [];
+  let totalBytes = 0;
+  for (const file of (codeFiles ?? []).slice(0, MAX_CODE_FILES)) {
+    const data = encoder.encode(file.content);
+    if (totalBytes + data.byteLength > MAX_TOTAL_CODE_BYTES) break;
+    totalBytes += data.byteLength;
+    files.push({
+      name: file.filename.replace(/^\/+/, "") || "code.txt",
+      data,
+      mimeType: mimeTypeForFilename(file.filename, file.mimeType),
+    });
+  }
+  return files;
+}
+
+function localBuilderDesignSystemId(builderDesignSystemId: string): string {
+  const slug = builderDesignSystemId
+    .replace(/[^a-zA-Z0-9_-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 96);
+  return `builder-${slug || "design-system"}`;
+}
+
+function builderProxyData({
+  builderDesignSystemId,
+  jobId,
+  builderUrl,
+  projectName,
+  description,
+}: {
+  builderDesignSystemId: string;
+  jobId: string;
+  builderUrl: string;
+  projectName?: string;
+  description?: string;
+}) {
+  return JSON.stringify({
+    source: "builder",
+    builderDesignSystemId,
+    builderJobId: jobId,
+    builderUrl,
+    colors: {
+      primary: "var(--primary)",
+      secondary: "var(--secondary)",
+      accent: "var(--accent)",
+      background: "var(--background)",
+      surface: "var(--card)",
+      text: "var(--foreground)",
+      textMuted: "var(--muted-foreground)",
+    },
+    typography: {
+      headingFont: "inherit",
+      bodyFont: "inherit",
+      headingWeight: "700",
+      bodyWeight: "400",
+      headingSizes: { h1: "48px", h2: "32px", h3: "24px" },
+    },
+    spacing: { elementGap: "24px", slidePadding: "48px" },
+    borders: { radius: "12px", accentWidth: "1px" },
+    logos: [],
+    notes: [
+      "This is a local proxy for a Builder-indexed design system.",
+      `Builder design system id: ${builderDesignSystemId}`,
+      `Builder indexing job id: ${jobId}`,
+      `Builder URL: ${builderUrl}`,
+      projectName ? `Requested name: ${projectName}` : "",
+      description ? `Context: ${description}` : "",
+      "Use Builder as the source of truth for extracted tokens and guidance.",
+    ]
+      .filter(Boolean)
+      .join("\n"),
+  });
+}
+
+function builderProxyInstructions({
+  builderDesignSystemId,
+  jobId,
+  builderUrl,
+}: {
+  builderDesignSystemId: string;
+  jobId: string;
+  builderUrl: string;
+}) {
+  return [
+    "This design system is indexed and owned by Builder.",
+    `Builder design system id: ${builderDesignSystemId}`,
+    `Builder job id: ${jobId}`,
+    `Builder URL: ${builderUrl}`,
+    "When generating slides, treat Builder as the source of truth for the final extracted tokens, assets, and guidance.",
+  ].join("\n");
+}
+
+export default defineAction({
+  description:
+    "Start Builder design-system indexing from a GitHub repository and/or code files. " +
+    "Use this instead of local import-code/import-github when the user wants a reusable brand kit or slide design system. " +
+    "Requires Builder.io to be connected; Builder owns the indexed design-system docs, generated guidance, and job state.",
+  schema: z.object({
+    projectName: z
+      .string()
+      .optional()
+      .describe("Optional Builder project/design-system name"),
+    description: z
+      .string()
+      .optional()
+      .describe("Additional brand context or instructions for Builder"),
+    githubRepoUrl: z
+      .string()
+      .optional()
+      .describe("GitHub repository URL to index with Builder"),
+    connectedProjectId: z
+      .string()
+      .optional()
+      .describe("Optional existing Builder project id to attach indexing to"),
+    codeFiles: z
+      .array(codeFileSchema)
+      .optional()
+      .describe("Optional inlined code/design files to upload to Builder"),
+  }),
+  run: async ({
+    projectName,
+    description,
+    githubRepoUrl,
+    connectedProjectId,
+    codeFiles,
+  }) => {
+    const files = makeFiles(codeFiles);
+    const result = await startBuilderDesignSystemIndex({
+      projectName,
+      description,
+      githubRepoUrl,
+      connectedProjectId,
+      files,
+    });
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+
+    const db = getDb();
+    const now = new Date().toISOString();
+    const orgId = getRequestOrgId();
+    const baseLocalDesignSystemId = localBuilderDesignSystemId(
+      result.designSystemId,
+    );
+    const title = projectName?.trim() || "Builder indexed design system";
+    const localData = builderProxyData({
+      builderDesignSystemId: result.designSystemId,
+      jobId: result.jobId,
+      builderUrl: result.builderUrl,
+      projectName,
+      description,
+    });
+    const customInstructions = builderProxyInstructions({
+      builderDesignSystemId: result.designSystemId,
+      jobId: result.jobId,
+      builderUrl: result.builderUrl,
+    });
+    const [existing] = await db
+      .select({
+        id: schema.designSystems.id,
+        ownerEmail: schema.designSystems.ownerEmail,
+      })
+      .from(schema.designSystems)
+      .where(eq(schema.designSystems.id, baseLocalDesignSystemId))
+      .limit(1);
+    const localDesignSystemId =
+      existing && existing.ownerEmail !== ownerEmail
+        ? `${baseLocalDesignSystemId}-${nanoid(8)}`
+        : baseLocalDesignSystemId;
+    if (existing && existing.ownerEmail === ownerEmail) {
+      await db
+        .update(schema.designSystems)
+        .set({
+          title,
+          description:
+            description ??
+            `Builder indexed design system ${result.designSystemId}`,
+          data: localData,
+          assets: "[]",
+          customInstructions,
+          updatedAt: now,
+        })
+        .where(eq(schema.designSystems.id, existing.id));
+    } else {
+      const [ownedSystem] = await db
+        .select({ id: schema.designSystems.id })
+        .from(schema.designSystems)
+        .where(eq(schema.designSystems.ownerEmail, ownerEmail))
+        .limit(1);
+      await db.insert(schema.designSystems).values({
+        id: localDesignSystemId,
+        title,
+        description:
+          description ??
+          `Builder indexed design system ${result.designSystemId}`,
+        data: localData,
+        assets: "[]",
+        customInstructions,
+        isDefault: !ownedSystem,
+        ownerEmail,
+        orgId,
+        createdAt: now,
+        updatedAt: now,
+      });
+    }
+
+    return {
+      ...result,
+      localDesignSystemId,
+      uploadedFileCount: files.length,
+      instructions: [
+        "Builder design-system indexing has started.",
+        `Builder design system: ${result.designSystemId}`,
+        `Local selectable design system: ${localDesignSystemId}`,
+        `Builder job: ${result.jobId}`,
+        `Open: ${result.builderUrl}`,
+        "Use the local design system id in Slides flows; Builder remains the source of truth for the indexed brand kit.",
+      ].join("\n"),
+    };
+  },
+});

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -4,7 +4,6 @@ import {
   sendToAgentChat,
   openAgentSidebar,
   appApiPath,
-  useFormatters,
   useT,
 } from "@agent-native/core/client";
 import {
@@ -18,6 +17,7 @@ import {
   IconFileDescription,
   IconPhoto,
   IconCheck,
+  IconExternalLink,
 } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 
@@ -108,14 +108,11 @@ export function DesignSystemSetup({
   const [figParsing, setFigParsing] = useState(false);
   const [figResult, setFigResult] = useState<FigImportResult | null>(null);
   const [figError, setFigError] = useState<string | null>(null);
-  const [figTitle, setFigTitle] = useState("");
-  const [figCreating, setFigCreating] = useState(false);
 
   const codeInputRef = useRef<HTMLInputElement>(null);
   const docInputRef = useRef<HTMLInputElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
   const figInputRef = useRef<HTMLInputElement>(null);
-  const createSystemMutation = useActionMutation("create-design-system");
   const updateSystemMutation = useActionMutation("update-design-system");
 
   const { data: existingDs } = useActionQuery<{
@@ -164,8 +161,6 @@ export function DesignSystemSetup({
       setFigParsing(false);
       setFigResult(null);
       setFigError(null);
-      setFigTitle("");
-      setFigCreating(false);
     }
   }, [open]);
 
@@ -273,9 +268,6 @@ export function DesignSystemSetup({
         });
         const parsed = await readFigImportResponse(res);
         setFigResult(parsed);
-        setFigTitle(
-          parsed.suggestedTitle || t("designSystemSetup.importedBrand"),
-        );
       } catch (err) {
         setFigError(
           err instanceof Error
@@ -286,37 +278,9 @@ export function DesignSystemSetup({
         setFigParsing(false);
       }
     },
-    [],
+    [t],
   );
 
-  const handleCreateFromFig = useCallback(async () => {
-    if (!figResult) return;
-    const title =
-      figTitle.trim() ||
-      figResult.suggestedTitle ||
-      t("designSystemSetup.importedBrand");
-    setFigCreating(true);
-    try {
-      await createSystemMutation.mutateAsync({
-        title,
-        data: JSON.stringify(figResult.data),
-        customInstructions: figResult.customInstructions || "",
-      } as any);
-      toast({ title: t("designSystemSetup.figmaCreated") });
-      onComplete();
-    } catch (err) {
-      setFigCreating(false);
-      toast({
-        title: t("designSystemSetup.createFailed"),
-        description:
-          err instanceof Error
-            ? err.message
-            : t("designSystemSetup.genericError"),
-        variant: "destructive",
-      });
-    }
-  }, [figResult, figTitle, createSystemMutation, onComplete, t]);
-
   const handleEditSave = async () => {
     if (!editingId) return;
     setGenerating(true);
@@ -371,7 +335,7 @@ export function DesignSystemSetup({
 
     if (githubLinks.length > 0) {
       parts.push(
-        `\n## GitHub Repositories\nExtract design tokens from code. Call \`import-github\` for each:\n${githubLinks.map((l) => `- ${l.url}`).join("\n")}`,
+        `\n## GitHub Repositories\nStart Builder design-system indexing for each repository with \`index-design-system-with-builder\`:\n${githubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder from Settings.`,
       );
     }
 
@@ -379,7 +343,7 @@ export function DesignSystemSetup({
       const withContent = codeFiles.filter((f) => f.textContent);
       if (withContent.length > 0) {
         parts.push(
-          `\n## Code Files (${withContent.length} files)\nCall \`import-code\` with these files:`,
+          `\n## Code Files (${withContent.length} files)\nStart Builder design-system indexing with \`index-design-system-with-builder\` using these files:`,
         );
         for (const f of withContent) {
           parts.push(
@@ -430,12 +394,12 @@ export function DesignSystemSetup({
 
     if (customInstructions.trim()) {
       parts.push(
-        `\n## Custom Instructions (durable — store on the design system)\nWhen you call \`create-design-system\`, pass these verbatim as the \`customInstructions\` argument. They will be re-applied every time the design system is used to generate slides:\n\n${customInstructions.trim()}`,
+        `\n## Custom Instructions (durable — store on the design system)\nIf you create a local design system from non-Builder sources, pass these verbatim as the \`customInstructions\` argument. They will be re-applied every time the design system is used to generate slides:\n\n${customInstructions.trim()}`,
       );
     }
 
     parts.push(
-      `\n---\nAfter processing all sources, call \`create-design-system\` with the combined tokens${
+      `\n---\nAfter processing all sources, if you started Builder design-system indexing, report the Builder job/design-system URL plus the local selectable design-system id returned by \`index-design-system-with-builder\`. Do not call \`create-design-system\` again for those Builder-indexed sources. If you processed non-Builder sources into concrete tokens, call \`create-design-system\` with the combined tokens${
         customInstructions.trim()
           ? " AND the verbatim --customInstructions string from above"
           : ""
@@ -543,14 +507,9 @@ export function DesignSystemSetup({
                   ) : (
                     <FigImportPreview
                       result={figResult}
-                      title={figTitle}
-                      onTitleChange={setFigTitle}
-                      creating={figCreating}
-                      onCreate={handleCreateFromFig}
                       onReset={() => {
                         setFigResult(null);
                         setFigError(null);
-                        setFigTitle("");
                       }}
                     />
                   )}
@@ -885,148 +844,57 @@ function TagList({
 
 function FigImportPreview({
   result,
-  title,
-  onTitleChange,
-  creating,
-  onCreate,
   onReset,
 }: {
   result: FigImportResult;
-  title: string;
-  onTitleChange: (value: string) => void;
-  creating: boolean;
-  onCreate: () => void;
   onReset: () => void;
 }) {
   const t = useT();
-  const { formatNumber } = useFormatters();
-  const colors = result.data.colors;
-  const colorEntries = (
-    [
-      [t("designSystemSetup.colorAccent"), "accent"],
-      [t("designSystemSetup.colorPrimary"), "primary"],
-      [t("designSystemSetup.colorSecondary"), "secondary"],
-      [t("designSystemSetup.colorBackground"), "background"],
-      [t("designSystemSetup.colorText"), "text"],
-    ] as const
-  ).filter(([, key]) => colors[key]);
-  const typography = result.data.typography;
-  const gradients = result.preview.gradients ?? [];
-
   return (
     <div className="space-y-4 rounded-lg border border-border bg-accent/40 p-4">
       <div className="flex items-start gap-3">
-        {result.preview.thumbnailDataUrl ? (
-          <img
-            src={result.preview.thumbnailDataUrl}
-            alt={t("designSystemSetup.figmaThumbnailAlt")}
-            className="h-16 w-24 shrink-0 rounded-md border border-border object-cover"
-          />
-        ) : null}
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#609FF8]/10">
+          <IconBrandFigma className="h-5 w-5 text-[#609FF8]" />
+        </div>
         <div className="min-w-0 flex-1 space-y-1.5">
-          <Label className="text-xs text-muted-foreground">
-            {t("designSystemSetup.designSystemName")}
-          </Label>
-          <Input
-            value={title}
-            onChange={(event) => onTitleChange(event.target.value)}
-            className="bg-card border-border text-foreground"
-            placeholder={t("designSystemSetup.brandNamePlaceholder")}
-          />
-          <p className="text-[11px] text-muted-foreground">
-            {t("designSystemSetup.figPreviewStats", {
-              nodes: t("designSystemSetup.nodeCount", {
-                count: result.preview.nodeCount,
-                formattedCount: formatNumber(result.preview.nodeCount),
-              }),
-              gradients: t("designSystemSetup.gradientCount", {
-                count: gradients.length,
-                formattedCount: formatNumber(gradients.length),
-              }),
-              images: t("designSystemSetup.imageCount", {
-                count: result.preview.imageCount,
-                formattedCount: formatNumber(result.preview.imageCount),
-              }),
+          <h4 className="text-sm font-medium text-foreground">
+            {t("designSystemSetup.builderIndexingStarted")}
+          </h4>
+          <p className="text-xs text-muted-foreground">
+            {t("designSystemSetup.builderIndexingDescription", {
+              title:
+                result.suggestedTitle || t("designSystemSetup.importedBrand"),
             })}
           </p>
         </div>
       </div>
 
-      {colorEntries.length > 0 && (
-        <div className="flex flex-wrap gap-3">
-          {colorEntries.map(([label, key]) => (
-            <div key={key} className="flex items-center gap-2">
-              <div
-                className="h-7 w-7 rounded-md border border-border"
-                style={{ backgroundColor: colors[key] }}
-              />
-              <div className="text-xs">
-                <div className="text-foreground/80">{label}</div>
-                <div className="font-mono text-[10px] text-muted-foreground">
-                  {colors[key]}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {gradients.length > 0 && (
-        <div className="flex flex-wrap gap-2">
-          {gradients.slice(0, 4).map((gradient, index) => (
-            <div
-              key={index}
-              className="h-8 w-24 rounded-md border border-border"
-              style={{ backgroundImage: gradient }}
-              title={gradient}
-            />
-          ))}
-        </div>
-      )}
-
-      {(typography.headingFont || typography.bodyFont) && (
-        <div className="text-xs text-foreground/80">
-          {typography.headingFont && (
-            <span>
-              <span className="text-muted-foreground">
-                {t("designSystemSetup.headingsLabel")}
-              </span>{" "}
-              {typography.headingFont}
-              {typography.headingWeight ? ` ${typography.headingWeight}` : ""}
-            </span>
-          )}
-          {typography.bodyFont && (
-            <span className="ml-3">
-              <span className="text-muted-foreground">
-                {t("designSystemSetup.bodyLabel")}
-              </span>{" "}
-              {typography.bodyFont}
-            </span>
-          )}
-        </div>
-      )}
+      <dl className="grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-2 rounded-md border border-border bg-card/50 p-3 text-xs">
+        <dt className="text-muted-foreground">
+          {t("designSystemSetup.builderDesignSystemId")}
+        </dt>
+        <dd className="truncate font-mono text-foreground/80">
+          {result.designSystemId}
+        </dd>
+        <dt className="text-muted-foreground">
+          {t("designSystemSetup.builderJobId")}
+        </dt>
+        <dd className="truncate font-mono text-foreground/80">
+          {result.jobId}
+        </dd>
+      </dl>
 
       <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
-        <Button
-          size="sm"
-          onClick={onCreate}
-          disabled={creating || !title.trim()}
-          className="cursor-pointer"
-        >
-          {creating ? (
-            <>
-              <IconLoader2 className="w-3.5 h-3.5 animate-spin" />
-              {t("designSystemSetup.creating")}
-            </>
-          ) : (
-            t("designSystemSetup.createDesignSystem")
-          )}
+        <Button size="sm" asChild className="cursor-pointer">
+          <a href={result.builderUrl} target="_blank" rel="noreferrer">
+            <IconExternalLink className="w-3.5 h-3.5" />
+            {t("designSystemSetup.openInBuilder")}
+          </a>
         </Button>
         <Button
           size="sm"
           variant="ghost"
           onClick={onReset}
-          disabled={creating}
           className="cursor-pointer"
         >
           {t("designSystemSetup.chooseAnotherFile")}

package/corpus/templates/slides/app/components/design-system/fig-import-response.ts

@@ -1,18 +1,13 @@
-import type { DesignSystemData } from "../../../shared/api";
-
 export interface FigImportResult {
   ok: boolean;
+  source: "builder";
   suggestedTitle: string;
-  data: DesignSystemData;
-  customInstructions: string;
-  preview: {
-    gradients: string[];
-    palette: { hex: string; name?: string; count: number }[];
-    namedColors: Record<string, string>;
-    thumbnailDataUrl: string | null;
-    nodeCount: number;
-    imageCount: number;
-  };
+  projectId: string;
+  jobId: string;
+  designSystemId: string;
+  builderUrl: string;
+  status: "in-progress";
+  builderConnectUrl?: string;
 }
 
 export const MAX_FIG_UPLOAD_BYTES = 200 * 1024 * 1024;
@@ -51,7 +46,8 @@ export async function readFigImportResponse(
   }
 
   if (json && typeof json === "object" && "error" in json) {
-    const error = (json as { error?: unknown }).error;
+    const error = (json as { error?: unknown; builderConnectUrl?: unknown })
+      .error;
     throw new Error(
       typeof error === "string"
         ? error

package/corpus/templates/slides/app/components/layout/Sidebar.tsx

@@ -50,7 +50,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
 
   if (collapsed) {
     return (
-      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground">
+      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground transition-[width] duration-200 ease-out">
         {onToggleCollapsed && (
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
@@ -97,7 +97,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
   }
 
   return (
-    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground">
+    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
       <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
         <div className="flex items-center gap-2">
           <img
@@ -156,15 +156,15 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
         </nav>
 
         <div className="mt-auto shrink-0">
-          <div className="border-t border-border px-2 py-1">
+          <div className="px-2 py-1">
             <ExtensionsSidebarSection />
           </div>
 
-          <div className="border-t border-border px-3 py-2">
+          <div className="px-3 py-2">
             <OrgSwitcher />
           </div>
 
-          <div className="border-t border-border px-3 py-2">
+          <div className="px-3 py-2">
             <DevDatabaseLink />
             <FeedbackButton />
           </div>

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -1091,7 +1091,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
         ...updates,
       };
       void _slides;
-      void _ca;
+      _ca;
       if (Object.keys(persistableUpdates).length > 0) {
         enqueueDeckOp(id, {
           op: "patch-deck-fields",