@agent-native/core 0.86.0 → 0.87.0

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -2,6 +2,7 @@ import {
   SIDEBAR_STATE_CHANGE_EVENT,
   PromptComposer,
   BuilderSetupCard,
+  ErrorReportActions,
   ShareButton,
   appPath,
   agentNativePath,
@@ -15,6 +16,7 @@ import {
   emailToColor,
   emailToName,
   type AgentSidebarStateChangeDetail,
+  type ErrorReportDebugItem,
   type RichMarkdownCollabUser,
 } from "@agent-native/core/client";
 import {
@@ -25,6 +27,90 @@ import {
   type OrgInvitationSummary,
   type DomainMatchOrg,
 } from "@agent-native/core/client/org";
+import {
+  useSetHeaderActions,
+  useSetPageTitle,
+} from "@agent-native/toolkit/app-shell";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@agent-native/toolkit/ui/alert-dialog";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@agent-native/toolkit/ui/avatar";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@agent-native/toolkit/ui/collapsible";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { ScrollArea } from "@agent-native/toolkit/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Separator } from "@agent-native/toolkit/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@agent-native/toolkit/ui/sheet";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@agent-native/toolkit/ui/toggle-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   SOURCE_AUTHOR_COMMENT_MENTION_EMAIL,
   extractCommentMentions,
@@ -122,10 +208,6 @@ import {
 import { Link, useLocation, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
-import {
-  useSetHeaderActions,
-  useSetPageTitle,
-} from "@/components/layout/HeaderActions";
 import type {
   CanvasMarkupCreateContext,
   CanvasMarkupMode,
@@ -137,80 +219,7 @@ import {
   toggleWireframeStyle,
   useWireframeStyle,
 } from "@/components/plan/wireframe/use-wireframe-style";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import {
   planBundleQueryKey,
   localPlanBundleQueryKey,
@@ -5904,6 +5913,7 @@ export function PlansPage({ localPlanSlug }: { localPlanSlug?: string } = {}) {
           ) : showPlanLoadError ? (
             <PlanLoadError
               error={planQuery.error}
+              planId={selectedId}
               accessStatus={planAccessStatus}
               onRetry={() => void planQuery.refetch()}
               onSignIn={() => openSignIn()}
@@ -7617,6 +7627,35 @@ function ReviewMarkupToolbar({
   );
 }
 
+function PlanErrorFeedbackActions({
+  title,
+  message,
+  status,
+  extraDebug,
+}: {
+  title: string;
+  message: string;
+  status?: number;
+  extraDebug?: ErrorReportDebugItem[];
+}) {
+  const t = useT();
+  return (
+    <ErrorReportActions
+      appName="Plan"
+      title={title}
+      details={message}
+      status={status}
+      issueTitle={`Plan error: ${title}`}
+      feedbackLabel={t("plansPage.loadError.sendFeedback")}
+      feedbackPlaceholder={t("plansPage.loadError.feedbackPlaceholder")}
+      githubLabel={t("plansPage.loadError.openGitHubIssue")}
+      align="start"
+      className="justify-start"
+      extraDebug={extraDebug}
+    />
+  );
+}
+
 function LocalPlanLoadError({
   error,
   slug,
@@ -7631,6 +7670,7 @@ function LocalPlanLoadError({
     error instanceof Error && error.message
       ? error.message.replace(/^Action [\w-]+ failed:\s*/, "")
       : t("plansPage.localPlanLoadError.message", { slug });
+  const title = t("plansPage.localPlanLoadError.title");
 
   return (
     <div className="flex min-h-0 flex-1 items-center justify-center px-6 py-12">
@@ -7640,9 +7680,7 @@ function LocalPlanLoadError({
             <IconAlertTriangle className="size-5" />
           </div>
           <div>
-            <h1 className="text-lg font-semibold tracking-tight">
-              {t("plansPage.localPlanLoadError.title")}
-            </h1>
+            <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
             <p className="mt-1 text-sm text-muted-foreground">{message}</p>
           </div>
         </div>
@@ -7658,6 +7696,15 @@ function LocalPlanLoadError({
             </Link>
           </Button>
         </div>
+        <div className="mt-4 border-t border-border/70 pt-3">
+          <PlanErrorFeedbackActions
+            title={title}
+            message={message}
+            extraDebug={[
+              { label: "Local plan slug", value: slug }, // i18n-ignore debug label
+            ]}
+          />
+        </div>
       </div>
     </div>
   );
@@ -7665,6 +7712,7 @@ function LocalPlanLoadError({
 
 function PlanLoadError({
   error,
+  planId,
   accessStatus,
   onRetry,
   onSignIn,
@@ -7675,6 +7723,7 @@ function PlanLoadError({
   viewerEmail,
 }: {
   error?: unknown;
+  planId?: string | null;
   accessStatus?: PlanAccessStatusResponse | null;
   onRetry: () => void;
   onSignIn: () => void;
@@ -7822,6 +7871,7 @@ function PlanLoadError({
             : t("plansPage.loadError.maybeOtherOrgBody")
           : t("plansPage.loadError.privateBody")
       : message;
+  const reportMessage = `${body}${message && message !== body ? `\n${message}` : ""}`;
 
   return (
     <div className="flex h-full flex-col items-center justify-center bg-background p-8">
@@ -8007,6 +8057,34 @@ function PlanLoadError({
             )}
           </div>
         ) : null}
+        <div className="mt-4 border-t border-border/70 pt-3">
+          <PlanErrorFeedbackActions
+            title={title}
+            message={reportMessage}
+            status={status}
+            extraDebug={[
+              { label: "Plan id", value: planId }, // i18n-ignore debug label
+              accessStatus?.visibility
+                ? {
+                    label: "Plan visibility", // i18n-ignore debug label
+                    value: accessStatus.visibility,
+                  }
+                : {
+                    label: "Plan visibility", // i18n-ignore debug label
+                    value: null,
+                  },
+              accessStatus?.hasAccess !== undefined
+                ? {
+                    label: "Has access", // i18n-ignore debug label
+                    value: accessStatus.hasAccess,
+                  }
+                : {
+                    label: "Has access", // i18n-ignore debug label
+                    value: null,
+                  },
+            ]}
+          />
+        </div>
       </div>
       <Button
         type="button"

package/corpus/templates/plan/app/root.tsx

@@ -12,6 +12,7 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { configureTracking } from "@agent-native/core/client";
+import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import {
   IconMoon,
   IconScribble,
@@ -36,7 +37,6 @@ import {
   toggleWireframeStyle,
   useWireframeStyle,
 } from "@/components/plan/wireframe/use-wireframe-style";
-import { Toaster } from "@/components/ui/sonner";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { APP_TITLE } from "@/lib/app-config";
 // Side effect: register Plan's native chat renderers so visual answers render

package/corpus/templates/plan/app/routes/_index.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlanChatPage } from "@/pages/PlanChatPage";
 

package/corpus/templates/plan/app/routes/local-plans.$slug.tsx

@@ -1,6 +1,6 @@
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import { useParams } from "react-router";
 
-import { Spinner } from "@/components/ui/spinner";
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 

package/corpus/templates/plan/app/routes/plans.$id.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { planDocumentTitle } from "@/lib/plan-document-title";
 import { PlansPage } from "@/pages/PlansPage";

package/corpus/templates/plan/app/routes/plans.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 

package/corpus/templates/plan/app/routes/recaps.$id.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { planDocumentTitle } from "@/lib/plan-document-title";
 import { PlansPage } from "@/pages/PlansPage";

package/corpus/templates/plan/app/routes/recaps.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 

package/corpus/templates/plan/app/routes/settings.tsx

@@ -6,17 +6,17 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
-
-import { useSetPageTitle } from "@/components/layout/HeaderActions";
-import { Button } from "@/components/ui/button";
+import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+} from "@agent-native/toolkit/ui/card";
+import { Label } from "@agent-native/toolkit/ui/label";
+
 import { APP_TITLE } from "@/lib/app-config";
 
 import changelog from "../../CHANGELOG.md?raw";

package/corpus/templates/plan/changelog/2026-07-03-error-screens-now-include-a-feedback-button-with-debug-info.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Plan error screens now include a feedback button with debug context and a prefilled GitHub issue fallback.

package/corpus/templates/plan/changelog/2026-07-05-images-in-plan-documents-open-reliably-in-the-full-size-prev.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-05
+---
+
+Images in Plan documents open reliably in the full-size preview.

package/corpus/templates/plan/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@agent-native/core": "workspace:*",
+    "@agent-native/toolkit": "workspace:*",
     "@excalidraw/excalidraw": "0.18.1",
     "@excalidraw/mermaid-to-excalidraw": "2.2.2",
     "@fontsource-variable/inter": "^5.2.8",

package/corpus/templates/slides/AGENTS.md

@@ -19,9 +19,13 @@ Detailed deck, slide-editing, image, design-system, and export workflows live in
 - Preserve deck structure and visual consistency. Prefer focused slide edits over
   regenerating whole decks unless requested.
 - Follow linked design-system tokens and custom instructions.
-- For raw Figma `.fig` uploads, call `import-file --format fig` to start
-  Builder design-system indexing. Do not create a local design system from raw
-  `.fig` output.
+- For reusable design-system setup from Figma, connected code/GitHub, local
+  code/design files, or optional `design.md`, use Builder-backed DSI indexing
+  through `index-design-system-with-builder` or `import-file --format fig`.
+  Pass readable `design.md` content as `designMd`, use the returned local design
+  system id in Slides flows, and call `get-design-system` before generation to
+  hydrate Builder docs/tokens when available. Do not create a duplicate local
+  design system from raw Figma/code sources.
 - Treat import/export actions as shortcuts, not capability limits. When the
   exact Google Drive endpoint, file metadata field, export format, pagination
   mode, or API version matters, use `provider-api-catalog`,

package/corpus/templates/slides/actions/get-design-system.ts

@@ -1,4 +1,8 @@
 import { defineAction } from "@agent-native/core";
+import {
+  hydrateBuilderDesignSystemReference,
+  parseBuilderDesignSystemProxyReference,
+} from "@agent-native/core/server";
 import { resolveAccess } from "@agent-native/core/sharing";
 import { z } from "zod";
 
@@ -19,6 +23,22 @@ export default defineAction({
     }
 
     const row = access.resource;
+    const builderReference = parseBuilderDesignSystemProxyReference(row.data);
+    const builder = builderReference
+      ? await hydrateBuilderDesignSystemReference(builderReference).catch(
+          (error) => ({
+            ...builderReference,
+            docs: [],
+            tokenValues: {},
+            docCount: 0,
+            warning:
+              error instanceof Error
+                ? error.message
+                : "Builder design-system docs could not be loaded.",
+          }),
+        )
+      : null;
+
     return {
       id: row.id,
       title: row.title,
@@ -30,6 +50,7 @@ export default defineAction({
       visibility: row.visibility,
       createdAt: row.createdAt,
       updatedAt: row.updatedAt,
+      builder,
     };
   },
 });

package/corpus/templates/slides/actions/import-file.ts

@@ -4,12 +4,17 @@ import path from "path";
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
 import { startBuilderDesignSystemIndex } from "@agent-native/core/server";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
 import { assertAccess } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { notifyClients } from "../server/handlers/decks.js";
+import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
 import { resolveUserUploadedFile } from "./_uploaded-files.js";
 
 const DEFAULT_MAX_SOURCE_CHARS = 60_000;
@@ -92,6 +97,14 @@ export default defineAction({
           },
         ],
       });
+      const ownerEmail = getRequestUserEmail();
+      if (!ownerEmail) throw new Error("no authenticated user");
+      const proxy = await upsertBuilderProxyDesignSystem({
+        result,
+        ownerEmail,
+        orgId: getRequestOrgId(),
+        projectName: title,
+      });
       return {
         format: "fig",
         title,
@@ -99,16 +112,11 @@ export default defineAction({
         projectId: result.projectId,
         jobId: result.jobId,
         designSystemId: result.designSystemId,
+        localDesignSystemId: proxy.localDesignSystemId,
         builderUrl: result.builderUrl,
         status: result.status,
         deckId,
-        instructions: [
-          "Sent the .fig file to Builder design-system indexing.",
-          `Builder design system: ${result.designSystemId}`,
-          `Builder job: ${result.jobId}`,
-          `Open: ${result.builderUrl}`,
-          "Do not call create-design-system locally for this .fig file; Builder owns the indexed design-system docs and generated usage guidance.",
-        ].join("\n"),
+        instructions: proxy.instructions,
       };
     }
 

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

@@ -1,7 +1,7 @@
 import { defineAction } from "@agent-native/core";
 import {
+  buildBuilderDesignSystemIndexFiles,
   startBuilderDesignSystemIndex,
-  type BuilderDesignSystemIndexFile,
 } from "@agent-native/core/server";
 import {
   getRequestOrgId,
@@ -11,50 +11,17 @@ import { z } from "zod";
 
 import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.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;
-}
-
 export default defineAction({
   description:
-    "Start Builder design-system indexing from a GitHub repository and/or code files. " +
+    "Start Builder DSI design-system indexing from connected code, a GitHub repository, code/design files, and optional design.md guidance. " +
     "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.",
+    "Requires Builder.io to be connected; Builder owns the indexed design-system docs, generated guidance, token/component extraction, and job state.",
   schema: z.object({
     projectName: z
       .string()
@@ -76,6 +43,12 @@ export default defineAction({
       .array(codeFileSchema)
       .optional()
       .describe("Optional inlined code/design files to upload to Builder"),
+    designMd: z
+      .string()
+      .optional()
+      .describe(
+        "Optional design.md guidance to upload to Builder DSI alongside Figma/code sources",
+      ),
   }),
   run: async ({
     projectName,
@@ -83,8 +56,12 @@ export default defineAction({
     githubRepoUrl,
     connectedProjectId,
     codeFiles,
+    designMd,
   }) => {
-    const files = makeFiles(codeFiles);
+    const files = buildBuilderDesignSystemIndexFiles({
+      codeFiles,
+      designMd,
+    });
     const result = await startBuilderDesignSystemIndex({
       projectName,
       description,

package/corpus/templates/slides/app/components/ThemeToggle.tsx

@@ -1,14 +1,14 @@
 import { useT } from "@agent-native/core/client";
-import { IconSun, IconMoon } from "@tabler/icons-react";
-import { useTheme } from "next-themes";
-import { useState, useEffect } from "react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconSun, IconMoon } from "@tabler/icons-react";
+import { useTheme } from "next-themes";
+import { useState, useEffect } from "react";
+
 import { cn } from "@/lib/utils";
 
 export function ThemeToggle({ className }: { className?: string }) {