@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/design/app/pages/DesignSystemSetup.tsx

@@ -2,7 +2,6 @@ import {
   sendToAgentChat,
   openAgentSidebar,
   useActionQuery,
-  useActionMutation,
   appApiPath,
   useT,
 } from "@agent-native/core/client";
@@ -18,8 +17,8 @@ import {
   IconPhoto,
   IconPalette,
   IconCheck,
+  IconExternalLink,
 } from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
 import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
@@ -48,31 +47,13 @@ interface UploadedFile {
 
 interface FigImportResult {
   ok: boolean;
+  source: "builder";
   suggestedTitle: string;
-  data: {
-    colors?: Record<string, string>;
-    typography?: {
-      headingFont?: string;
-      bodyFont?: string;
-      headingWeight?: string;
-      bodyWeight?: string;
-      headingSizes?: { h1?: string; h2?: string; h3?: string };
-    };
-    spacing?: Record<string, string>;
-    borders?: Record<string, string>;
-    defaults?: Record<string, string>;
-    customCSS?: string;
-    notes?: string;
-  };
-  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";
 }
 
 export default function DesignSystemSetup() {
@@ -113,15 +94,11 @@ export default function DesignSystemSetup() {
   const existingProjects = designsData?.designs ?? [];
   const existingSystems = designSystemsData?.designSystems ?? [];
 
-  // --- Figma .fig import (deep brand extraction → design system) ----------
-  const queryClient = useQueryClient();
-  const createSystemMutation = useActionMutation("create-design-system");
+  // --- Figma .fig import (Builder design-system indexing) -----------------
   const realFigInputRef = useRef<HTMLInputElement>(null);
   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 handleFigImport = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -147,10 +124,6 @@ export default function DesignSystemSetup() {
           throw new Error(json?.error || `Upload failed (${res.status})`);
         }
         setFigResult(json as FigImportResult);
-        setFigTitle(
-          (json as FigImportResult).suggestedTitle ||
-            t("designSystemSetup.importedBrand"),
-        );
       } catch (err) {
         setFigError(
           err instanceof Error
@@ -164,37 +137,6 @@ export default function DesignSystemSetup() {
     [t],
   );
 
-  const handleCreateFromFig = useCallback(async () => {
-    if (!figResult) return;
-    const title =
-      figTitle.trim() ||
-      figResult.suggestedTitle ||
-      t("designSystemSetup.importedBrand");
-    setFigCreating(true);
-    try {
-      const created = (await createSystemMutation.mutateAsync({
-        title,
-        data: JSON.stringify(figResult.data),
-        customInstructions: figResult.customInstructions || "",
-      } as any)) as { id?: string } | undefined;
-      await queryClient.invalidateQueries({
-        queryKey: ["action", "list-design-systems"],
-      });
-      toast.success(t("designSystemSetup.figmaCreateSuccess"));
-      navigate(
-        created?.id
-          ? `/design-systems?designSystemId=${encodeURIComponent(created.id)}`
-          : "/design-systems",
-      );
-    } catch (err) {
-      setFigCreating(false);
-      toast.error(t("designSystemSetup.figmaCreateError"), {
-        description:
-          err instanceof Error ? err.message : t("common.genericError"),
-      });
-    }
-  }, [figResult, figTitle, createSystemMutation, queryClient, navigate, t]);
-
   useEffect(() => {
     if (!sourceId || appliedSourceIdRef.current === sourceId) return;
     const sourceExists =
@@ -416,7 +358,7 @@ export default function DesignSystemSetup() {
 
     if (normalizedGithubLinks.length > 0) {
       parts.push(
-        `\n## GitHub Repositories\nExtract design tokens from code. Call \`import-github\` for each:\n${normalizedGithubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nIf a repository is private or GitHub denies access, tell me to save a fine-grained GitHub token as \`GITHUB_TOKEN\` in Settings > Secrets. The token should be limited to the repository with Repository permissions > Contents: Read-only. Do not ask me to paste a PAT into chat.`,
+        `\n## GitHub Repositories\nStart Builder design-system indexing for each repository with \`index-design-system-with-builder\`:\n${normalizedGithubLinks.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 Design flows. If Builder is not connected, stop and tell me to connect Builder from Settings instead of asking me to paste repository credentials into chat.`,
       );
     }
 
@@ -426,7 +368,7 @@ export default function DesignSystemSetup() {
 
       if (withContent.length > 0) {
         parts.push(
-          `\n## Code Files (${withContent.length} files with content)\nCall \`import-code\` with these files:`,
+          `\n## Code Files (${withContent.length} files with content)\nStart Builder design-system indexing with \`index-design-system-with-builder\` using these files:`,
         );
         for (const f of withContent) {
           parts.push(
@@ -485,12 +427,12 @@ export default 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 a design:\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 a design:\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"
           : ""
@@ -626,10 +568,6 @@ export default function DesignSystemSetup() {
               ) : (
                 <FigImportPreview
                   result={figResult}
-                  title={figTitle}
-                  onTitleChange={setFigTitle}
-                  creating={figCreating}
-                  onCreate={handleCreateFromFig}
                   onReset={() => {
                     setFigResult(null);
                     setFigError(null);
@@ -1100,168 +1038,66 @@ function FileList({
 
 function FigImportPreview({
   result,
-  title,
-  onTitleChange,
-  creating,
-  onCreate,
   onReset,
 }: {
   result: FigImportResult;
-  title: string;
-  onTitleChange: (v: string) => void;
-  creating: boolean;
-  onCreate: () => void;
   onReset: () => void;
 }) {
   const t = useT();
-  const colors = result.data.colors ?? {};
-  const colorEntries = (
-    [
-      [t("designSystemSetup.colorLabels.accent"), "accent"],
-      [t("designSystemSetup.colorLabels.primary"), "primary"],
-      [t("designSystemSetup.colorLabels.secondary"), "secondary"],
-      [t("designSystemSetup.colorLabels.background"), "background"],
-      [t("designSystemSetup.colorLabels.surface"), "surface"],
-      [t("designSystemSetup.colorLabels.text"), "text"],
-      [t("designSystemSetup.colorLabels.muted"), "textMuted"],
-    ] as const
-  ).filter(([, k]) => colors[k]);
-  const typo = result.data.typography ?? {};
-  const gradients = result.preview.gradients ?? [];
 
   return (
-    <div className="space-y-5 rounded-xl border border-border bg-card p-4">
-      <div className="flex items-start gap-4">
-        {result.preview.thumbnailDataUrl ? (
-          <img
-            src={result.preview.thumbnailDataUrl}
-            alt={t("designSystemSetup.figmaThumbnailAlt")}
-            className="h-20 w-28 shrink-0 rounded-md border border-border object-cover"
-          />
-        ) : null}
+    <div className="space-y-4 rounded-xl border border-border bg-card p-4">
+      <div className="flex items-start gap-3">
+        <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">
-          <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            {t("designSystemSetup.designSystemName")}
-          </label>
-          <Input
-            value={title}
-            onChange={(e) => onTitleChange(e.target.value)}
-            className="mt-1 bg-accent/50"
-            placeholder={t("designSystemSetup.brandNamePlaceholder")}
-          />
-          <p className="mt-2 text-xs text-muted-foreground/70">
-            {t("designSystemSetup.extractedSummary", {
-              nodes: result.preview.nodeCount.toLocaleString(),
-              gradients: gradients.length,
-              images: result.preview.imageCount,
-            })}
+          <h3 className="text-sm font-semibold text-foreground">
+            {result.suggestedTitle}
+          </h3>
+          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+            {
+              "Builder is indexing this Figma file into a reusable design system." /* i18n-ignore Builder indexing status */
+            }
           </p>
         </div>
       </div>
 
-      {colorEntries.length > 0 && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.previewColors")}
-          </h4>
-          <div className="flex flex-wrap gap-3">
-            {colorEntries.map(([label, k]) => (
-              <div key={k} className="flex items-center gap-2">
-                <div
-                  className="h-8 w-8 rounded-md border border-border"
-                  style={{ backgroundColor: colors[k] }}
-                />
-                <div className="text-xs">
-                  <div className="text-foreground/80">{label}</div>
-                  <div className="font-mono text-[11px] text-muted-foreground">
-                    {colors[k]}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {gradients.length > 0 && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.signatureGradients")}
-          </h4>
-          <div className="flex flex-wrap gap-2">
-            {gradients.slice(0, 4).map((g, i) => (
-              <div
-                key={i}
-                className="h-10 w-28 rounded-md border border-border"
-                style={{ backgroundImage: g }}
-                title={g}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {(typo.headingFont || typo.bodyFont) && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.previewTypography")}
-          </h4>
-          <div className="text-sm text-foreground/80">
-            {typo.headingFont && (
-              <span>
-                <span className="text-muted-foreground">
-                  {t("designSystemSetup.headingsLabel")}
-                </span>{" "}
-                {typo.headingFont}
-                {typo.headingWeight ? ` ${typo.headingWeight}` : ""}
-              </span>
-            )}
-            {typo.bodyFont && (
-              <span className="ml-4">
-                <span className="text-muted-foreground">
-                  {t("designSystemSetup.bodyLabel")}
-                </span>{" "}
-                {typo.bodyFont}
-              </span>
-            )}
-          </div>
-        </div>
-      )}
-
-      {result.customInstructions && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.brandBrief")}
-          </h4>
-          <div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-md border border-border bg-muted/30 p-3 text-xs leading-relaxed text-muted-foreground">
-            {result.customInstructions}
-          </div>
-          <p className="mt-1 text-[11px] text-muted-foreground/60">
-            {t("designSystemSetup.brandBriefHelp")}
-          </p>
-        </div>
-      )}
+      <dl className="grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-2 rounded-lg border border-border bg-muted/25 p-3 text-xs">
+        <dt className="text-muted-foreground">
+          {"Status" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="font-medium text-foreground">{result.status}</dd>
+        <dt className="text-muted-foreground">
+          {"Project" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="truncate font-mono text-[11px] text-foreground/80">
+          {result.projectId}
+        </dd>
+        <dt className="text-muted-foreground">
+          {"Job" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="truncate font-mono text-[11px] text-foreground/80">
+          {result.jobId}
+        </dd>
+        <dt className="text-muted-foreground">
+          {"Design system" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="truncate font-mono text-[11px] text-foreground/80">
+          {result.designSystemId}
+        </dd>
+      </dl>
 
       <div className="flex items-center gap-2 border-t border-border pt-4">
-        <Button
-          onClick={onCreate}
-          disabled={creating || !title.trim()}
-          className="cursor-pointer"
-        >
-          {creating ? (
-            <>
-              <Spinner className="size-4" /> {t("designSystemSetup.creating")}
-            </>
-          ) : (
-            t("designSystemSetup.createDesignSystem")
-          )}
-        </Button>
-        <Button
-          variant="ghost"
-          onClick={onReset}
-          disabled={creating}
-          className="cursor-pointer"
-        >
+        {result.builderUrl ? (
+          <Button asChild className="cursor-pointer">
+            <a href={result.builderUrl} target="_blank" rel="noreferrer">
+              <IconExternalLink className="size-4" />
+              {"Open in Builder" /* i18n-ignore Builder link action */}
+            </a>
+          </Button>
+        ) : null}
+        <Button variant="ghost" onClick={onReset} className="cursor-pointer">
           {t("designSystemSetup.chooseDifferentFile")}
         </Button>
       </div>

package/corpus/templates/design/changelog/2026-06-28-annotate-mode-now-combines-drawing-and-comment-pins-in-one-c.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Annotate mode now combines drawing and comment pins in one canvas submission.

package/corpus/templates/design/changelog/2026-06-28-design-editor-panel-borders-are-cleaner-so-the-canvas-edge-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Design editor panel borders are cleaner so the canvas edge stays rounded without doubled dividers.

package/corpus/templates/design/changelog/2026-06-28-drawing-prompts-now-reliably-open-and-submit-to-the-design-a.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Drawing prompts now reliably open and submit to the design agent.

package/corpus/templates/design/changelog/2026-06-28-editor-app-menus-now-use-an-outline-agent-native-mark-with-b.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Editor app menus now use an outline Agent Native mark with bordered, instant submenus.

package/corpus/templates/design/changelog/2026-06-28-figma-style-code-design-mode.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Design mode now has a Figma-style code canvas with adaptive inspection, patch proof, artboard duplication, clarify cards, and annotation queues.

package/corpus/templates/design/changelog/2026-06-28-layer-selection-now-updates-chat-context-without-opening-the.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Layer selection now updates chat context without opening the agent sidebar.

package/corpus/templates/design/changelog/2026-06-28-layer-selections-now-preserve-hidden-and-locked-canvas-state.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Layer selections now preserve hidden and locked canvas state more faithfully.

package/corpus/templates/design/changelog/2026-06-28-left-sidebar-collapse-motion-and-footer-chrome-are-quieter.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Left sidebar collapse motion and footer controls now feel smoother and use less divider chrome.

package/corpus/templates/design/changelog/2026-06-28-live-cursors-now-keep-names-beside-a-cleaner-pointer-marker.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Live cursors now look closer to Figma, with a sharper pointer and cleaner name tag.

package/corpus/templates/design/changelog/2026-06-28-mode-switching-now-lives-in-a-compact-bottom-right-icon-dock.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+The bottom toolbar now groups Figma-style tool menus with a distinct mode section.

package/corpus/templates/design/changelog/2026-06-28-screen-overview-now-handles-zooming-drawing-opening-and-dele.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Screen overview now handles zooming, drawing, opening, and deleting screens more reliably.

package/corpus/templates/design/changelog/2026-06-28-screen-overview-now-selects-screens-on-click-and-opens-them-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Screen overview now selects screens on click and opens them on double-click.

package/corpus/templates/design/changelog/2026-06-28-screen-overview-zooms-into-the-active-screen-with-smoother-e.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Screen overview zooms into the active screen with smoother edit transitions and consistent tooltips.

package/corpus/templates/design/changelog/2026-06-28-selected-element-chips-in-chat-are-shorter-and-easier-to-sca.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-28
+---
+
+Selected-element chips in chat are shorter and easier to scan.

package/corpus/templates/design/changelog/2026-06-28-the-design-editor-toolbar-is-more-compact-and-the-app-menu-m.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+The Design editor toolbar is more compact and the app menu mark is easier to see.

package/corpus/templates/design/changelog/2026-06-28-tweaks-now-live-at-the-top-of-the-design-sidebar-instead-of-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Tweaks now live at the top of the design sidebar instead of behind a floating canvas button.

package/corpus/templates/design/changelog/2026-06-28-tweaks-now-live-in-the-right-inspector-beside-the-design-tab.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Tweaks now live in the right inspector beside the Design tab.

package/corpus/templates/design/changelog/2026-06-29-active-sidebar-rows-use-soft-highlights.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Active screens in the editor sidebar now use a quiet row highlight instead of an active badge.

package/corpus/templates/design/changelog/2026-06-29-agents-can-now-open-screen-overview-focus-screens-and-add.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Agents can now open screen overview, focus screens, and add placed screens to the canvas.

package/corpus/templates/design/changelog/2026-06-29-canvas-selection-no-longer-flashes-broken-prototype-html-whe.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Canvas selection no longer flashes broken prototype HTML when screens include embedded scripts or styles.

package/corpus/templates/design/changelog/2026-06-29-command-menu-selections-are-clearer-in-dark-mode.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Command menu selections are clearer in dark mode.

package/corpus/templates/design/changelog/2026-06-29-design-agents-now-edit-broad-copy-changes-more-reliably.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Design agents now handle broad copy edits, like translating a whole page, more reliably.

package/corpus/templates/design/changelog/2026-06-29-design-editor-extensions-now-run-inline-beside-the-artboard.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Design editor extensions now run inline beside the artboard with live selection context and AI prompting.

package/corpus/templates/design/changelog/2026-06-29-design-mode-top-chrome-now-groups-collaborators-preview-shar.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Design mode top chrome now groups collaborators, preview, Share, and chat closer to Figma.

package/corpus/templates/design/changelog/2026-06-29-element-selection-now-stays-on-the-intended-layer-after-sele.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Element selection now stays on the intended layer after selector replay and reparenting.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-full-view-controls-now-sit-above-frames-inst.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Screen overview full-view controls now sit above frames instead of covering the preview.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-tools-can-draw-shapes-create-screens-and-kee.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Screen overview tools can draw shapes, create screens, and keep handles visible while zooming.

package/corpus/templates/design/changelog/2026-06-29-sidebars-use-darker-chrome-and-chat-warns-immediately.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Sidebars use darker chrome with clearer dividers, and chat warns immediately when no LLM provider is connected.

package/corpus/templates/design/changelog/2026-06-29-the-pen-tool-now-creates-anchor-based-bezier-vectors-with-ha.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+The Pen tool now creates anchor-based Bezier vectors with handles and close-path feedback.

package/corpus/templates/design/changelog/2026-06-29-visual-edit-can-open-localhost-routes-as-url-backed-screens.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Agents can now use `/visual-edit` to open localhost routes as URL-backed screens in overview mode.

package/corpus/templates/design/package.json

@@ -17,6 +17,7 @@
     "@agent-native/pinpoint": "workspace:*",
     "@fontsource-variable/inter": "^5.2.8",
     "@libsql/client": "^0.15.8",
+    "@paper-design/shaders-react": "0.0.76",
     "@tabler/icons-react": "catalog:",
     "drizzle-orm": "^0.45.2",
     "h3": "^2.0.1-rc.20",