@agent-native/core 0.186.0-nightly-20260923174435 → 0.186.0

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

@@ -41,7 +41,9 @@ import { toast } from "sonner";
 import { trace } from "@/components/design/design-trace";
 import { DesignThumbnail } from "@/components/design/DesignThumbnail";
 import { designSystemPickerOptions } from "@/components/editor/design-start-pickers";
-import PromptPopover from "@/components/editor/PromptDialog";
+import PromptPopover, {
+  preloadPromptComposer,
+} from "@/components/editor/PromptDialog";
 import type {
   PromptTemplateOption,
   UploadedFile,
@@ -310,6 +312,7 @@ export default function Index() {
 
   const handleNewPromptOpenChange = useCallback(
     (open: boolean) => {
+      if (open) preloadPromptComposer();
       setShowNewPrompt(open);
       if (!open) {
         newDesignSystemWasChosenRef.current = false;
@@ -779,6 +782,7 @@ export default function Index() {
 
   const openNewDesign = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
+      preloadPromptComposer();
       anchorElRef.current = e.currentTarget;
       setNewDesignDraftRevision((revision) => revision + 1);
       newDesignSystemWasChosenRef.current = false;

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

@@ -23,7 +23,9 @@ import { useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { designSystemPickerOptions } from "@/components/editor/design-start-pickers";
-import PromptPopover from "@/components/editor/PromptDialog";
+import PromptPopover, {
+  preloadPromptComposer,
+} from "@/components/editor/PromptDialog";
 import type { UploadedFile } from "@/components/editor/PromptDialog";
 import { QueryErrorState } from "@/components/QueryErrorState";
 import { TemplatePreview } from "@/components/templates/TemplatePreview";
@@ -187,6 +189,7 @@ export default function Templates() {
         ? template.designSystemId
         : resolveDefaultDesignSystemId(),
     );
+    preloadPromptComposer();
     setPromptOpen(true);
     card?.scrollIntoView({ block: "center", behavior: "smooth" });
     useButton?.focus();
@@ -202,6 +205,7 @@ export default function Templates() {
     template: DesignTemplateSummary,
     element: HTMLElement,
   ) => {
+    preloadPromptComposer();
     anchorElRef.current = element;
     handledTemplateIdRef.current = template.id;
     setSelectedTemplateParam(template.id);

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

@@ -1,8 +1,8 @@
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 import NotFound from "@/pages/NotFound";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.notFound }];
+  return [{ title: enUSMessages.routeTitles.notFound }];
 }
 
 export default function CatchAllRoute() {

package/corpus/templates/design/app/routes/design-systems.tsx

@@ -1,6 +1,6 @@
 export { default } from "../pages/DesignSystems";
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designSystems }];
+  return [{ title: enUSMessages.routeTitles.designSystems }];
 }

package/corpus/templates/design/app/routes/design-systems_.setup.tsx

@@ -1,6 +1,6 @@
 export { default } from "../pages/DesignSystemSetup";
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designSystemSetup }];
+  return [{ title: enUSMessages.routeTitles.designSystemSetup }];
 }

package/corpus/templates/design/app/routes/design.$id.tsx

@@ -1,4 +1,4 @@
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 import DesignEditorRoute from "../pages/DesignEditor";
 
@@ -12,5 +12,5 @@ export default function DesignRoute() {
 }
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designEditor }];
+  return [{ title: enUSMessages.routeTitles.designEditor }];
 }

package/corpus/templates/design/app/routes/extensions.$id.tsx

@@ -1,9 +1,9 @@
 import { ExtensionViewerPage } from "@agent-native/core/client/extensions";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.toolDesign }];
+  return [{ title: enUSMessages.routeTitles.toolDesign }];
 }
 
 export default function ExtensionViewerRoute() {

package/corpus/templates/design/app/routes/extensions._index.tsx

@@ -1,9 +1,9 @@
 import { Navigate } from "react-router";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.extensionsDesign }];
+  return [{ title: enUSMessages.routeTitles.extensionsDesign }];
 }
 
 export default function ExtensionsRoute() {

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

@@ -1,9 +1,9 @@
 import { Outlet } from "react-router";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.extensionsDesign }];
+  return [{ title: enUSMessages.routeTitles.extensionsDesign }];
 }
 
 export default function ExtensionsLayout() {

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

@@ -1,9 +1,9 @@
 import { ObservabilityDashboard } from "@agent-native/core/client/observability";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.agentObservability }];
+  return [{ title: enUSMessages.routeTitles.agentObservability }];
 }
 
 export default function ObservabilityPage() {

package/corpus/templates/design/app/routes/present.$id.tsx

@@ -1,6 +1,6 @@
 export { default } from "../pages/Present";
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designPreview }];
+  return [{ title: enUSMessages.routeTitles.designPreview }];
 }

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

@@ -18,12 +18,12 @@ import {
 import { DESIGN_LABS } from "@shared/labs";
 import { useMemo } from "react";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 import changelog from "../../CHANGELOG.md?raw";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.settingsDesign }];
+  return [{ title: enUSMessages.routeTitles.settingsDesign }];
 }
 
 export default function SettingsRoute() {

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

@@ -1,9 +1,9 @@
 import { Navigate } from "react-router";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.teamDesign }];
+  return [{ title: enUSMessages.routeTitles.teamDesign }];
 }
 
 export default function TeamRoute() {

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

@@ -1,7 +1,7 @@
 export { default } from "../pages/Templates";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designTemplates }];
+  return [{ title: enUSMessages.routeTitles.designTemplates }];
 }

package/corpus/templates/design/app/routes/visual-edit.tsx

@@ -1,7 +1,7 @@
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export { default } from "../pages/VisualEdit";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.visualEdit }];
+  return [{ title: enUSMessages.routeTitles.visualEdit }];
 }

package/corpus/templates/design/app/routes/visual-edit_.$id.tsx

@@ -1,4 +1,4 @@
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 import DesignEditorRoute from "../pages/DesignEditor";
 
@@ -11,5 +11,5 @@ export default function LocalVisualEditRoute() {
 }
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designEditor }];
+  return [{ title: enUSMessages.routeTitles.designEditor }];
 }

package/corpus/templates/design/changelog/2026-09-23-design-loads-translated-catalogs-and-ai-prompt-tools-only-wh.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-23
+---
+
+Design loads translated catalogs and AI prompt tools only when you need them.

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

@@ -6,10 +6,11 @@ import {
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 import { useCodeMode } from "@agent-native/core/client/agent-chat";
-import { PromptComposer } from "@agent-native/core/client/composer";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useSession } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { LazyChunkErrorBoundary } from "@agent-native/core/client/lazy-chunk-error-boundary";
+import { LazyChunkRetryFallback } from "@agent-native/core/client/lazy-chunk-retry-fallback";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import {
@@ -32,7 +33,14 @@ import {
   IconRefresh,
   IconSettings,
 } from "@tabler/icons-react";
-import { useEffect, useMemo, useState, type MouseEvent } from "react";
+import {
+  lazy,
+  Suspense,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+} from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
@@ -51,9 +59,19 @@ import {
 } from "@/components/ui/tooltip";
 import { usePlans } from "@/hooks/use-plans";
 import { APP_TITLE } from "@/lib/app-config";
-import { planReturnPathFromLocation } from "@/lib/plan-local-bridge";
+import { planReturnPathFromLocation } from "@/lib/plan-return-path";
 import { cn } from "@/lib/utils";
 
+const loadPlanBrandingComposer = () =>
+  import("@agent-native/core/client/composer").then(({ PromptComposer }) => ({
+    default: PromptComposer,
+  }));
+const LazyPlanBrandingComposer = lazy(loadPlanBrandingComposer);
+
+function preloadPlanBrandingComposer() {
+  void loadPlanBrandingComposer().catch(() => {});
+}
+
 const PLAN_CHAT_STORAGE_KEY = "plans";
 
 const PLAN_BRANDING_CODE_CONTEXT = [
@@ -489,12 +507,20 @@ function BrandingCustomizePopover() {
   return (
     <>
       {codeRequiredDialog}
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (nextOpen) preloadPlanBrandingComposer();
+          setOpen(nextOpen);
+        }}
+      >
         <PopoverTrigger asChild>
           <button
             type="button"
             aria-label={t("sidebar.customizePlanBranding")}
             title={t("sidebar.customizeBranding")}
+            onPointerEnter={preloadPlanBrandingComposer}
+            onFocus={preloadPlanBrandingComposer}
             className="flex size-7 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/55 opacity-0 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/brand:opacity-100 group-focus-within/brand:opacity-100 data-[state=open]:opacity-100"
           >
             <IconEdit className="size-3.5" />
@@ -514,15 +540,32 @@ function BrandingCustomizePopover() {
               {t("sidebar.customizeBrandingDescription")}
             </p>
           </div>
-          <PromptComposer
-            autoFocus
-            disabled={isGenerating}
-            attachmentsEnabled={false}
-            showModelSelector={false}
-            placeholder={t("sidebar.customizeBrandingPlaceholder")}
-            draftScope="plans:customize-branding"
-            onSubmit={handleSubmit}
-          />
+          <LazyChunkErrorBoundary fallback={<LazyChunkRetryFallback />}>
+            <Suspense
+              fallback={
+                <div
+                  aria-busy="true"
+                  className="flex min-h-36 flex-col justify-between gap-3"
+                >
+                  <Skeleton className="h-24 w-full" />
+                  <div className="flex justify-end gap-2">
+                    <Skeleton className="h-8 w-16" />
+                    <Skeleton className="h-8 w-20" />
+                  </div>
+                </div>
+              }
+            >
+              <LazyPlanBrandingComposer
+                autoFocus
+                disabled={isGenerating}
+                attachmentsEnabled={false}
+                showModelSelector={false}
+                placeholder={t("sidebar.customizeBrandingPlaceholder")}
+                draftScope="plans:customize-branding"
+                onSubmit={handleSubmit}
+              />
+            </Suspense>
+          </LazyChunkErrorBoundary>
         </PopoverContent>
       </Popover>
     </>

package/corpus/templates/plan/app/lib/plan-local-bridge.ts

@@ -8,6 +8,8 @@ import type { PlanMdxFolder } from "@/lib/desktop-plan-files";
 
 import { parsePlanMdxFolder } from "../../server/plan-mdx";
 
+export { planReturnPathFromLocation } from "./plan-return-path";
+
 export type LocalPlanBundle = PlanBundle & {
   localOnly: true;
   slug: string;
@@ -99,15 +101,6 @@ export function localPlanBridgeUrlFromLocation(
   }
 }
 
-export function planReturnPathFromLocation(location: {
-  pathname: string;
-  search: string;
-  hash: string;
-}): string {
-  const safeHash = location.hash.startsWith("#bridge=") ? "" : location.hash;
-  return `${location.pathname}${location.search}${safeHash}`;
-}
-
 export async function localNetworkAccessPermissionState(): Promise<
   Exclude<LocalNetworkAccessPermissionState, "checking">
 > {

package/corpus/templates/plan/app/lib/plan-return-path.ts

@@ -0,0 +1,8 @@
+export function planReturnPathFromLocation(location: {
+  pathname: string;
+  search: string;
+  hash: string;
+}): string {
+  const safeHash = location.hash.startsWith("#bridge=") ? "" : location.hash;
+  return `${location.pathname}${location.search}${safeHash}`;
+}

package/corpus/templates/slides/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable user-facing changes to Agent-Native Slides are documented here. Open it any
 time from the command menu (Cmd+K → "What's new").
 
+## 2026-09-23
+
+### Improved
+
+- Slides loads AI prompt tools and extra slide controls only when you open them.
+
 ## 2026-09-22
 
 ### Improved

package/corpus/templates/slides/app/components/editor/AddSlidePopover.tsx

@@ -1,4 +1,3 @@
-import { appBasePath } from "@agent-native/core/client/api-path";
 import {
   PromptComposer,
   useEagerFileUploads,
@@ -16,13 +15,14 @@ import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 import { GoogleDocImportHint } from "@/components/editor/GoogleDocImportHint";
+import { addSlideAgentMessage } from "@/lib/agent-visible-message";
+import { WEBSITE_STYLE_REFERENCE_DIRECTIVE } from "@/lib/create-deck-generation";
+import { isInsidePortaledLayer } from "@/lib/portaled-layer";
 import {
-  isInsidePortaledLayer,
+  deleteUploadedPromptFile,
   uploadPromptFiles,
   type UploadedFile,
-} from "@/components/editor/PromptDialog";
-import { addSlideAgentMessage } from "@/lib/agent-visible-message";
-import { WEBSITE_STYLE_REFERENCE_DIRECTIVE } from "@/lib/create-deck-generation";
+} from "@/lib/prompt-file-uploads";
 
 import { MAX_REFERENCE_FILE_BYTES } from "../../../shared/upload-types";
 
@@ -107,17 +107,6 @@ export function AddSlidePopover({
   const [panelHeight, setPanelHeight] = useState(320);
   const [submitting, setSubmitting] = useState(false);
   const submittingRef = useRef(false);
-  const deleteUploadedFile = useCallback(async (file: UploadedFile) => {
-    const response = await fetch(`${appBasePath()}/api/uploads`, {
-      method: "DELETE",
-      headers: { "content-type": "application/json" },
-      credentials: "include",
-      body: JSON.stringify({ path: file.path }),
-    });
-    if (!response.ok) {
-      throw new Error(`Upload cleanup failed (${response.status})`);
-    }
-  }, []);
   const handleRetainedFilesAbandoned = useCallback(
     (_files: readonly File[], discard: () => void) => {
       if (!submittingRef.current) discard();
@@ -133,7 +122,7 @@ export function AddSlidePopover({
     uploading,
     reset: resetEagerUploads,
   } = useEagerFileUploads(uploadPromptFiles, {
-    onDiscard: deleteUploadedFile,
+    onDiscard: deleteUploadedPromptFile,
     onRetainedFilesAbandoned: handleRetainedFilesAbandoned,
   });
 

package/corpus/templates/slides/app/components/editor/DeferredPopoverFallback.tsx

@@ -0,0 +1,148 @@
+import { LazyChunkRetryFallback } from "@agent-native/core/client/lazy-chunk-retry-fallback";
+import type { CSSProperties, RefObject } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DeferredPopoverFallback({
+  surface,
+  anchorRef,
+  centered = false,
+  failed = false,
+  onClose,
+}: {
+  surface: "prompt" | "add-slide";
+  anchorRef?: RefObject<HTMLElement | null>;
+  centered?: boolean;
+  failed?: boolean;
+  onClose?: () => void;
+}) {
+  const [position, setPosition] = useState<CSSProperties>({
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+  });
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!onClose) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (
+        !(target instanceof Node) ||
+        contentRef.current?.contains(target) ||
+        anchorRef?.current?.contains(target)
+      ) {
+        return;
+      }
+      onClose();
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      onClose();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [anchorRef, onClose]);
+
+  useLayoutEffect(() => {
+    const anchor = anchorRef?.current;
+    if (centered || !anchor) {
+      setPosition({
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+      });
+      return;
+    }
+
+    const rect = anchor.getBoundingClientRect();
+    const width = Math.min(
+      surface === "prompt" ? 500 : 420,
+      window.innerWidth - 24,
+    );
+    if (surface === "add-slide") {
+      setPosition({
+        top: Math.max(12, Math.min(rect.top, window.innerHeight - 332)),
+        left: Math.min(rect.right + 8, window.innerWidth - width - 12),
+      });
+      return;
+    }
+
+    const height = 240;
+    let top = rect.bottom + 12;
+    if (top + height > window.innerHeight - 12) {
+      top = Math.max(12, rect.top - height - 12);
+    }
+    let left = rect.left + rect.width / 2 - width / 2;
+    if (left + width > window.innerWidth - 12) {
+      left = window.innerWidth - width - 12;
+    }
+    if (left < 12) left = 12;
+    setPosition({ top, left });
+  }, [anchorRef, centered, surface]);
+
+  if (typeof document === "undefined") return null;
+
+  const prompt = surface === "prompt";
+  return createPortal(
+    <>
+      {centered && prompt ? (
+        <div
+          // guard:allow-raw-color — modal scrim remains black in either theme.
+          className="fixed inset-0 z-[199] bg-black/40"
+        />
+      ) : null}
+      <div
+        ref={contentRef}
+        role={failed ? "alert" : "dialog"}
+        aria-modal={prompt && centered ? true : undefined}
+        aria-busy={failed ? undefined : true}
+        className={
+          prompt
+            ? "fixed z-[200] w-[min(500px,calc(100vw-24px))] rounded-xl border border-border/80 bg-popover shadow-xl shadow-black/15"
+            : "fixed z-[200] w-[min(420px,calc(100vw-24px))] rounded-xl border border-border bg-popover p-3 shadow-2xl shadow-black/60"
+        }
+        style={position}
+      >
+        {failed ? (
+          <div className="flex min-h-12 items-center justify-center p-3">
+            <LazyChunkRetryFallback />
+          </div>
+        ) : prompt ? (
+          <>
+            <div className="flex items-center justify-between gap-3 px-4 pb-2.5 pt-3.5">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-10" />
+            </div>
+            <div className="px-2.5 pb-2.5">
+              <Skeleton className="h-36 w-full rounded-lg" />
+            </div>
+            <div className="flex items-center gap-2 border-t border-border/60 px-4 py-2.5">
+              <Skeleton className="h-6 w-16" />
+              <Skeleton className="h-6 w-20" />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex items-center justify-between px-1 pb-2">
+              <Skeleton className="h-4 w-36" />
+              <Skeleton className="size-5" />
+            </div>
+            <Skeleton className="mb-2 h-8 w-full rounded-md" />
+            <Skeleton className="h-36 w-full rounded-lg" />
+          </>
+        )}
+      </div>
+    </>,
+    document.body,
+  );
+}

package/corpus/templates/slides/app/components/editor/EditorActionCluster.tsx

@@ -22,6 +22,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { preloadAddSlidePopover } from "@/lib/deferred-editor-surfaces";
 import { cn } from "@/lib/utils";
 
 const BUTTON_CLASS =
@@ -112,7 +113,12 @@ export function EditorActionCluster({
             variant="ghost"
             size="sm"
             className="h-7 shrink-0 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
-            onClick={onAddEmptySlide}
+            onPointerEnter={preloadAddSlidePopover}
+            onFocus={preloadAddSlidePopover}
+            onClick={() => {
+              preloadAddSlidePopover();
+              onAddEmptySlide();
+            }}
             disabled={addSlideGenerating}
           >
             <IconPlus className="size-3.5" />