@agent-native/core 0.88.0 → 0.90.1

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

@@ -9,6 +9,28 @@ import {
   useSetHeaderActions,
   useSetPageTitle,
 } from "@agent-native/toolkit/app-shell";
+import {
+  IconCheckbox,
+  IconChecks,
+  IconDots,
+  IconPlus,
+  IconPalette,
+  IconStar,
+  IconStarFilled,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import { toast } from "sonner";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -18,17 +40,17 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Sheet,
   SheetContent,
@@ -36,35 +58,13 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
-} from "@agent-native/toolkit/ui/sheet";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
+} from "@/components/ui/sheet";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import {
-  IconCheckbox,
-  IconChecks,
-  IconDots,
-  IconPlus,
-  IconPalette,
-  IconStar,
-  IconStarFilled,
-  IconTrash,
-  IconX,
-} from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import { Link, useNavigate, useSearchParams } from "react-router";
-import { toast } from "sonner";
-
+} from "@/components/ui/tooltip";
 import {
   formatDesignTokenValue,
   getCssColorToken,

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

@@ -8,36 +8,10 @@ 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 { Button } from "@agent-native/toolkit/ui/button";
-import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Spinner } from "@agent-native/toolkit/ui/spinner";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import { FULL_APP_BUILDING_ENABLED } from "@shared/full-app";
 import {
   IconChecks,
   IconPlus,
-  IconPalette,
   IconSearch,
   IconDots,
   IconTrash,
@@ -53,6 +27,31 @@ import { useNavigate, Link } from "react-router";
 
 import PromptPopover from "@/components/editor/PromptDialog";
 import type { UploadedFile } from "@/components/editor/PromptDialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useDesignSystems } from "@/hooks/use-design-systems";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import {
@@ -980,9 +979,6 @@ function EmptyState({
   const t = useT();
   return (
     <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
-      <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#609FF8]/20 to-[#4080E0]/20 border border-[#609FF8]/20 flex items-center justify-center mb-6">
-        <IconPalette className="w-7 h-7 text-[#609FF8]" />
-      </div>
       <h2 className="text-xl font-semibold text-foreground mb-2">
         {t("home.createFirstDesign")}
       </h2>

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

@@ -3,10 +3,11 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconArrowLeft, IconLogin2 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Button } from "@/components/ui/button";
+
 export default function NotFound() {
   const t = useT();
   const { session, isLoading } = useSession();

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

@@ -1,8 +1,9 @@
 import { useActionQuery, useT } from "@agent-native/core/client";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { useState, useEffect, useCallback } from "react";
 import { useParams, useNavigate } from "react-router";
 
+import { Skeleton } from "@/components/ui/skeleton";
+
 interface DesignFile {
   id: string;
   filename: string;

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

@@ -1,5 +1,4 @@
 import { agentNativePath, useSession, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconArrowUpRight,
   IconBrush,
@@ -9,6 +8,8 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Button } from "@/components/ui/button";
+
 function buildSignInHref(): string {
   const ret = "/visual-edit?intent=save";
   return `${agentNativePath("/_agent-native/sign-in")}?return=${encodeURIComponent(ret)}`;

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

@@ -12,7 +12,6 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
-import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
@@ -28,6 +27,8 @@ import {
 import type { LinksFunction } from "react-router";
 
 import { Layout as AppLayout } from "@/components/layout/Layout";
+import { Toaster } from "@/components/ui/sonner";
+import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
 
 import changelog from "../CHANGELOG.md?raw";
 import { i18nCatalog } from "./i18n";
@@ -175,9 +176,11 @@ function RootContent() {
 export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   return (
-    <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
-      <RootContent />
-    </AppProviders>
+    <AppToolkitProvider>
+      <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
+        <RootContent />
+      </AppProviders>
+    </AppToolkitProvider>
   );
 }
 

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

@@ -1,22 +1,20 @@
 import {
-  SettingsPanel,
   SettingsTabsPage,
-  useDevMode,
   ChangelogSettingsCard,
   LanguagePicker,
-  openAgentSettings,
+  useAgentSettingsTabs,
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
+
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@agent-native/toolkit/ui/card";
-import { Label } from "@agent-native/toolkit/ui/label";
-
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 import { messagesByLocale } from "@/i18n-data";
 
 import changelog from "../../CHANGELOG.md?raw";
@@ -26,55 +24,30 @@ export function meta() {
 }
 
 export default function SettingsRoute() {
-  const { isDevMode, canToggle, setDevMode } = useDevMode();
+  const agentSettingsTabs = useAgentSettingsTabs();
   const t = useT();
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-y-auto bg-background">
       <SettingsTabsPage
+        extraTabs={agentSettingsTabs}
         general={
-          <>
-            <SettingsPanel
-              isDevMode={isDevMode}
-              onToggleDevMode={() => setDevMode(!isDevMode)}
-              showDevToggle={canToggle}
-            />
-            <div className="mx-auto w-full max-w-2xl px-4 pb-8">
-              <Card className="mb-6">
-                <CardHeader>
-                  <CardTitle className="text-base">
-                    {t("settings.languageTitle")}
-                  </CardTitle>
-                  <CardDescription>
-                    {t("settings.languageDescription")}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="max-w-xs space-y-1.5">
-                  <Label>{t("settings.languageLabel")}</Label>
-                  <LanguagePicker label={t("settings.languageLabel")} />
-                </CardContent>
-              </Card>
-              <Card className="mb-6">
-                <CardHeader>
-                  <CardTitle className="text-base">
-                    {t("settings.agentTitle")}
-                  </CardTitle>
-                  <CardDescription>
-                    {t("settings.agentDescription")}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <button
-                    type="button"
-                    className="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    onClick={() => openAgentSettings()}
-                  >
-                    {t("settings.openAgentSettings")}
-                  </button>
-                </CardContent>
-              </Card>
-            </div>
-          </>
+          <div className="mx-auto w-full max-w-2xl space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">
+                  {t("settings.languageTitle")}
+                </CardTitle>
+                <CardDescription>
+                  {t("settings.languageDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="max-w-xs space-y-1.5">
+                <Label>{t("settings.languageLabel")}</Label>
+                <LanguagePicker label={t("settings.languageLabel")} />
+              </CardContent>
+            </Card>
+          </div>
         }
         team={
           <div className="mx-auto w-full max-w-3xl">

package/corpus/templates/design/changelog/2026-07-05-code-sidebar-tabs-now-use-a-quieter-active-highlight-that-ma.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-05
+---
+
+Code sidebar tabs now use a quieter active highlight that matches the editor chrome.

package/corpus/templates/design/changelog/2026-07-06-fig-files-now-stay-on-the-builder-indexing-path-through-desi.md

@@ -0,0 +1,6 @@
+---
+type: changed
+date: 2026-07-06
+---
+
+.fig files now stay on the Builder indexing path through design-system setup instead of local screen import.

package/corpus/templates/design/changelog/2026-07-06-mobile-layouts-no-longer-stack-two-top-headers.md

@@ -0,0 +1,5 @@
+---
+type: fixed
+---
+
+Mobile layouts no longer stack a desktop header under the navigation bar.

package/corpus/templates/design/changelog/2026-07-06-the-design-agent-now-visually-reviews-rendered-screenshots-o.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+The design agent now visually reviews rendered screenshots of each screen and checks cross-screen token drift before finishing.

package/corpus/templates/design/server/handlers/import-design-file.ts

@@ -10,17 +10,13 @@ import {
   setResponseStatus,
 } from "h3";
 
-import { isFigKiwiBuffer, isZipBuffer } from "../lib/figma-import/decode.js";
-import { importFigmaBuffer } from "../lib/figma-import/processor.js";
 import {
   normalizeImportedHtmlDocument,
   saveImportedDesignFiles,
-  type ImportedDesignFile,
 } from "../lib/import-design-files.js";
 
 const MAX_HTML_BYTES = 2 * 1024 * 1024;
-const MAX_FIG_BYTES = 50 * 1024 * 1024;
-const TOTAL_BODY_LIMIT = MAX_FIG_BYTES + 1024 * 1024;
+const TOTAL_BODY_LIMIT = MAX_HTML_BYTES + 1024 * 1024;
 
 function fieldText(
   parts: Awaited<ReturnType<typeof readMultipartFormData>>,
@@ -117,48 +113,13 @@ export const importDesignFile = defineEventHandler(async (event) => {
       };
     }
 
-    if (ext !== ".fig") {
-      throw new Error("Unsupported file type. Upload .fig, .html, or .htm.");
-    }
-    if (data.length > MAX_FIG_BYTES) {
-      throw new Error("Figma file is too large (max 50 MB).");
-    }
-    if (!isFigKiwiBuffer(data) && !isZipBuffer(data)) {
+    if (ext === ".fig") {
       throw new Error(
-        "Figma file contents do not match .fig or fig-kiwi format.",
+        "Use Design system setup to send .fig files through Builder indexing. This import route only accepts HTML.",
       );
     }
 
-    const imported = await importFigmaBuffer({
-      buffer: data,
-      filename: originalName,
-      sourceKind: "fig-file",
-    });
-    const files: ImportedDesignFile[] = imported.files.map((file) => ({
-      filename: file.filename,
-      fileType: "html",
-      content: file.content,
-      source: { ...file.source, originalName },
-      preferredFrame: {
-        title:
-          typeof file.source?.frameName === "string"
-            ? file.source.frameName
-            : undefined,
-        width: file.width,
-        height: file.height,
-      },
-    }));
-    const saved = await saveImportedDesignFiles({
-      designId,
-      sourceType: "fig-file",
-      files,
-      warnings: imported.warnings,
-    });
-    return {
-      importKind: "fig",
-      ...saved,
-      stats: imported.stats,
-    };
+    throw new Error("Unsupported file type. Upload .html or .htm.");
   } catch (error) {
     const message =
       error instanceof Error ? error.message : "File import failed.";

package/corpus/templates/design/server/handlers/index-design-system-with-builder.ts

@@ -24,8 +24,8 @@ function requestContentLength(event: Parameters<typeof getRequestHeader>[0]) {
 
 /**
  * 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
+ * and starts Builder's design-system indexing pipeline. The app does not
+ * process `.fig` files locally; Builder owns the generated docs and the
  * asynchronous indexing job.
  */
 export const indexDesignSystemWithBuilder = defineEventHandler(

package/corpus/templates/design/server/lib/visible-clipboard-html.ts

@@ -0,0 +1,32 @@
+const MAX_CLIPBOARD_HTML_BYTES = 2 * 1024 * 1024;
+
+function byteLength(value: string): number {
+  return Buffer.byteLength(value, "utf8");
+}
+
+function removeHiddenClipboardData(html: string): string {
+  return html
+    .replace(
+      /<span\b[^>]*\bdata-metadata\s*=\s*(["'])[\s\S]*?\1[^>]*>\s*<\/span>/gi,
+      "",
+    )
+    .replace(
+      /<span\b[^>]*\bdata-buffer\s*=\s*(["'])[\s\S]*?\1[^>]*>\s*<\/span>/gi,
+      "",
+    )
+    .replace(/<meta\b[^>]*charset[^>]*>/gi, "")
+    .trim();
+}
+
+export function parseVisibleClipboardHtml(html: string): {
+  fallbackHtml?: string;
+} {
+  if (byteLength(html) > MAX_CLIPBOARD_HTML_BYTES) {
+    throw new Error("Clipboard HTML is too large to import (max 2 MB).");
+  }
+
+  const fallbackHtml = removeHiddenClipboardData(html);
+  return {
+    fallbackHtml: fallbackHtml || undefined,
+  };
+}

package/corpus/templates/design/shared/design-review.ts

@@ -23,6 +23,7 @@ export const A11Y_FINDING_CATEGORIES = [
   "missing-alt",
   "reduced-motion",
   "role",
+  "token-drift",
   "other",
 ] as const;
 

package/corpus/templates/dispatch/.agents/skills/actions/SKILL.md

@@ -161,6 +161,18 @@ to find likely URLs, `web-request` or `provider-api-docs` with clean
 `webFetch()` when you need to grep, aggregate, or compare many pages before
 returning a small result.
 
+For LONG compute, `run-code` supports durable background executions: pass
+`background: true` and the code is enqueued to a `sandbox_executions` row and
+executed out-of-band with a generous budget (default 10 min), surviving the
+hosted agent run's ~40s soft timeout. The call returns
+`{ executionId, status: "queued" }` immediately with polling guidance; check
+progress with `run-code` `{ executionId }` (or the `get-code-execution` tool
+where registered) — results persist after completion. Use background for big
+cross-source joins, multi-page provider sweeps, and heavy analysis scripts;
+keep quick scripts in the default foreground mode. Agents should continue
+other work between polls, and on `failed`/`timed_out` split the computation or
+persist intermediate progress with `workspaceWrite` and re-run.
+
 ### The `http` Option
 
 Controls how the action is exposed as an HTTP endpoint:
@@ -205,6 +217,49 @@ run: async (args) => {
 }
 ```
 
+### Returning Images the Agent Can See (`_agentImages`)
+
+An action's return object may include the well-known optional field
+`_agentImages` to attach vision images (screenshots, chart previews, rendered
+designs) to the tool result. The agent literally sees them — enabling visual
+self-review loops — while the field itself is stripped from the JSON text the
+model reads.
+
+```ts
+run: async ({ dashboardId }) => {
+  const shot = await renderDashboardPng(dashboardId); // Buffer
+  return {
+    dashboardId,
+    panelCount: 6,
+    _agentImages: [
+      // Either a public https URL (preferred — the provider fetches it)…
+      { url: "https://cdn.example.com/previews/dash-1.png", label: "overview" },
+      // …or base64 without a data: prefix (mediaType required; a full
+      // data:image/png;base64,… URL in `data` is also accepted and parsed).
+      { data: shot.toString("base64"), mediaType: "image/png" },
+    ],
+  };
+},
+```
+
+Rules and limits:
+
+- Shape: `Array<{ url?: string; data?: string; mediaType?: string; label?: string }>`.
+  Each entry needs `url` (https only) **or** `data`. Supported media types:
+  `image/jpeg`, `image/png`, `image/gif`, `image/webp`.
+- Caps: max **4 images** per result; max **~2MB of base64** per image.
+  Over-cap or invalid entries never fail the call — they become text notes in
+  the result telling the model what was dropped and why.
+- Persistence: the run ledger stores only the string result plus compact
+  `[image: …]` notes (URLs verbatim; base64 as a byte-count placeholder) —
+  never the payload. Images are re-attached only for the live turn; replayed
+  history is text-only, so prefer stable `url` images the model can re-request.
+- Engine support: native Anthropic and vision-capable AI-SDK providers
+  (anthropic, openai, google, openrouter) receive real image blocks; other
+  paths (Builder gateway, non-vision providers) degrade to the text notes.
+- External MCP tools need no changes — standard MCP `image` content parts are
+  converted automatically under the same caps.
+
 ### Validating Return Values (`outputSchema`)
 
 `schema` validates inputs; `outputSchema` validates what the action **returns**. Pass any Standard Schema-compatible schema (Zod, Valibot, ArkType) and the framework validates the result _after_ `run()` resolves — input validated before `run`, output after.

package/corpus/templates/dispatch/actions/list-staged-datasets.ts

@@ -32,6 +32,9 @@ export default defineAction({
         updatedAt: new Date(d.updatedAt).toISOString(),
       })),
       total: datasets.length,
+      probeMarker: "fresh-v3",
     };
   },
 });
+
+// reload-probe-test: temporary line for HMR verification, remove me

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

@@ -2,7 +2,7 @@ import {
   ChangelogSettingsCard,
   LanguagePicker,
   SettingsTabsPage,
-  openAgentSettings,
+  useAgentSettingsTabs,
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
@@ -27,9 +27,11 @@ export function meta() {
 
 export default function SettingsRoute() {
   const t = useT();
+  const agentSettingsTabs = useAgentSettingsTabs();
 
   return (
     <SettingsTabsPage
+      extraTabs={agentSettingsTabs}
       general={
         <div className="mx-auto w-full max-w-3xl space-y-6">
           <p className="text-sm leading-6 text-muted-foreground">
@@ -68,22 +70,6 @@ export default function SettingsRoute() {
               </Button>
             </CardContent>
           </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">
-                {t("settings.agentTitle")}
-              </CardTitle>
-              <CardDescription>
-                {t("settings.agentDescription")}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Button variant="outline" onClick={() => openAgentSettings()}>
-                {t("settings.openAgentSettings")}
-              </Button>
-            </CardContent>
-          </Card>
         </div>
       }
       team={