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

package/corpus/templates/calendar/app/i18n/index.ts

@@ -1,14 +1,19 @@
-import {
-  isLocaleCode,
-  type AgentNativeI18nCatalog,
-} from "@agent-native/core/client/i18n";
+import { createAgentNativeI18nCatalog } from "@agent-native/core/client/i18n";
 
-import { messagesByLocale } from "../i18n-data";
+import enUS from "./en-US";
 
-export const i18nCatalog = {
-  sourceLocale: "en-US",
-  messages: messagesByLocale["en-US"],
-  loadMessages: async (locale) => {
-    return isLocaleCode(locale) ? (messagesByLocale[locale] ?? null) : null;
+export const i18nCatalog = createAgentNativeI18nCatalog({
+  messages: enUS,
+  localeLoaders: {
+    "zh-CN": () => import("./zh-CN"),
+    "zh-TW": () => import("./zh-TW"),
+    "es-ES": () => import("./es-ES"),
+    "fr-FR": () => import("./fr-FR"),
+    "de-DE": () => import("./de-DE"),
+    "ja-JP": () => import("./ja-JP"),
+    "ko-KR": () => import("./ko-KR"),
+    "pt-BR": () => import("./pt-BR"),
+    "hi-IN": () => import("./hi-IN"),
+    "ar-SA": () => import("./ar-SA"),
   },
-} satisfies AgentNativeI18nCatalog;
+});

package/corpus/templates/calendar/app/routes/_app.$.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 AppCatchAllRoute() {

package/corpus/templates/calendar/app/routes/_app.agent.tsx

@@ -1,10 +1,10 @@
 import { buildLegacyAgentSettingsRoute } from "@agent-native/core/client/navigation";
 import { Navigate, useLocation } from "react-router";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].settings.agentTitle }];
+  return [{ title: enUSMessages.settings.agentTitle }];
 }
 
 export default function AgentRoute() {

package/corpus/templates/calendar/app/routes/_app.booking-links.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.bookingLinks }];
+  return [{ title: enUSMessages.routeTitles.bookingLinks }];
 }
 
 export default function BookingLinksLayout() {

package/corpus/templates/calendar/app/routes/_app.settings.tsx

@@ -2,11 +2,11 @@ import { useT } from "@agent-native/core/client/i18n";
 import { useMemo } from "react";
 
 import { useAppHeaderControls } from "@/components/layout/AppLayout";
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 import Settings from "@/pages/Settings";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.settings }];
+  return [{ title: enUSMessages.routeTitles.settings }];
 }
 
 export default function SettingsRoute() {

package/corpus/templates/calendar/app/routes/_app.shared-availability.add.tsx

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

package/corpus/templates/calendar/app/routes/_app.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.team }];
+  return [{ title: enUSMessages.routeTitles.team }];
 }
 
 export default function TeamRoute() {

package/corpus/templates/calendar/app/routes/booking-og-meta.ts

@@ -5,7 +5,7 @@ import type {
   MetaDescriptor,
 } from "react-router";
 
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 export interface BookingOgLoaderData {
   ogImageUrl: string;
@@ -51,7 +51,7 @@ export function bookingOgMeta({
   loaderData,
 }: MetaArgs<typeof bookingOgLoader>): MetaDescriptor[] {
   const image = loaderData?.ogImageUrl;
-  const title = messagesByLocale["en-US"].routeTitles.bookMeeting;
+  const title = enUSMessages.routeTitles.bookMeeting;
   return [
     { title },
     { property: "og:title", content: title },

package/corpus/templates/calendar/app/routes/booking.manage.$token.tsx

@@ -1,8 +1,8 @@
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 import { ManageBookingPage } from "@/pages/ManageBookingPage";
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.manageBooking }];
+  return [{ title: enUSMessages.routeTitles.manageBooking }];
 }
 
 // Public page — no AppLayout wrapper

package/corpus/templates/calendar/app/routes/event.tsx

@@ -20,12 +20,12 @@ import { useEffect } from "react";
 import { useSearchParams } from "react-router";
 
 import { Button } from "@/components/ui/button";
-import { messagesByLocale } from "@/i18n-data";
+import enUSMessages from "@/i18n/en-US";
 
 type EventPreviewResult = CalendarEvent | { error: string };
 
 export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.eventPreview }];
+  return [{ title: enUSMessages.routeTitles.eventPreview }];
 }
 
 function formatDuration(start: string, end: string): string {

package/corpus/templates/calendar/changelog/2026-09-23-calendar-opens-faster-by-loading-translated-catalogs-only-wh.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-23
+---
+
+Calendar opens faster by loading translated catalogs only when you need them.

package/corpus/templates/clips/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable user-facing changes to Clips are documented here. Open it any time
 from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-09-23
+
+### Improved
+
+- Insights charts load only when opened, keeping the recording library faster.
+
+### Fixed
+
+- Long recording menus scroll within the visible space so every action stays reachable.
+
 ## 2026-09-22
 
 ### Added

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -22,7 +22,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router";
 
 import { ClipsAvatar } from "@/components/clips-avatar";
-import { AgentViewCount } from "@/components/player/recording-views-badge";
+import { AgentViewCount } from "@/components/player/agent-view-count";
 import { ViewedByPopover } from "@/components/sharing/viewed-by-popover";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";

package/corpus/templates/clips/app/components/player/agent-view-count.tsx

@@ -0,0 +1,61 @@
+import { IconBotId } from "@tabler/icons-react";
+
+import { ClaudeLogo, CodexLogo } from "@/components/agent-destination-logos";
+import { cn } from "@/lib/utils";
+
+/** Compact agent-view indicator retained for library cards and other dense lists. */
+export function AgentViewCount({
+  count,
+  label,
+  className,
+}: {
+  count: number;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <span
+      title={label}
+      aria-label={label}
+      className={cn(
+        "inline-flex items-center gap-1 border-s border-border ps-2 tabular-nums",
+        className,
+      )}
+    >
+      <AgentViewerAvatar className="size-5" />
+      {count}
+    </span>
+  );
+}
+
+/** Agents use provider logos when the public API identifies the provider. */
+export function AgentViewerAvatar({
+  agentLabel,
+  className,
+}: {
+  agentLabel?: string | null;
+  className?: string;
+}) {
+  const normalizedLabel = agentLabel?.toLowerCase() ?? "";
+  const logo = normalizedLabel.includes("claude") ? (
+    <ClaudeLogo className="size-3.5" />
+  ) : normalizedLabel.includes("openai") ||
+    normalizedLabel.includes("chatgpt") ||
+    normalizedLabel.includes("codex") ? (
+    <CodexLogo className="size-3.5" />
+  ) : (
+    <IconBotId className="size-3.5" />
+  );
+
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground",
+        className,
+      )}
+    >
+      {logo}
+    </span>
+  );
+}

package/corpus/templates/clips/app/components/player/recording-views-badge.tsx

@@ -1,9 +1,10 @@
 import { useActionQuery, useAvatarUrl } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconAlertTriangle, IconBotId, IconUser } from "@tabler/icons-react";
-import { useState } from "react";
+import { LazyChunkErrorBoundary } from "@agent-native/core/client/lazy-chunk-error-boundary";
+import { LazyChunkRetryFallback } from "@agent-native/core/client/lazy-chunk-retry-fallback";
+import { IconAlertTriangle, IconUser } from "@tabler/icons-react";
+import { lazy, Suspense, useState } from "react";
 
-import { ClaudeLogo, CodexLogo } from "@/components/agent-destination-logos";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -23,9 +24,32 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 
-import { InsightsChart } from "./insights-chart";
+import { AgentViewerAvatar } from "./agent-view-count";
 import { ViewerTabsList, ViewerTabsTrigger } from "./viewer-controls";
 
+let insightsChartModule: Promise<typeof import("./insights-chart")> | undefined;
+
+function loadInsightsChart() {
+  insightsChartModule ??= import("./insights-chart").catch((error) => {
+    insightsChartModule = undefined;
+    throw error;
+  });
+  return insightsChartModule;
+}
+
+const LazyInsightsChart = lazy(async () => {
+  const module = await loadInsightsChart();
+  return { default: module.InsightsChart };
+});
+
+function preloadInsightsChart() {
+  // Speculative loads are retried by the lazy render, where the error boundary
+  // can show the translated recovery action.
+  void loadInsightsChart().catch(() => {});
+}
+
+export { AgentViewCount, AgentViewerAvatar } from "./agent-view-count";
+
 interface ViewerRow {
   id: string;
   viewerEmail: string | null;
@@ -177,7 +201,11 @@ export function RecordingViewsBadge({
             <ViewerTabsTrigger value="views">
               {t("recordingInsights.viewsTab")}
             </ViewerTabsTrigger>
-            <ViewerTabsTrigger value="insights">
+            <ViewerTabsTrigger
+              value="insights"
+              onPointerEnter={preloadInsightsChart}
+              onFocus={preloadInsightsChart}
+            >
               {t("recordingInsights.insightsTab")}
             </ViewerTabsTrigger>
           </ViewerTabsList>
@@ -275,17 +303,31 @@ export function RecordingViewsBadge({
               ) : agentViewersQuery.isLoading ? (
                 <Skeleton className="h-[220px] w-full rounded-lg" />
               ) : (
-                <InsightsChart
-                  views={insightViews}
-                  uniqueViewers={uniqueViewers}
-                  reactions={reactionCount}
-                  completionRate={
-                    agentViewersQuery.data?.completionRate ?? null
+                <LazyChunkErrorBoundary
+                  fallback={
+                    <div className="flex h-[220px] items-center justify-center">
+                      <LazyChunkRetryFallback />
+                    </div>
                   }
-                  ctaConversionRate={
-                    agentViewersQuery.data?.ctaConversionRate ?? null
-                  }
-                />
+                >
+                  <Suspense
+                    fallback={
+                      <Skeleton className="h-[220px] w-full rounded-lg" />
+                    }
+                  >
+                    <LazyInsightsChart
+                      views={insightViews}
+                      uniqueViewers={uniqueViewers}
+                      reactions={reactionCount}
+                      completionRate={
+                        agentViewersQuery.data?.completionRate ?? null
+                      }
+                      ctaConversionRate={
+                        agentViewersQuery.data?.ctaConversionRate ?? null
+                      }
+                    />
+                  </Suspense>
+                </LazyChunkErrorBoundary>
               )}
             </TabsContent>
           </div>
@@ -351,63 +393,6 @@ function InsightsErrorState({
   );
 }
 
-/** Compact agent-view indicator retained for library cards and other dense lists. */
-export function AgentViewCount({
-  count,
-  label,
-  className,
-}: {
-  count: number;
-  label: string;
-  className?: string;
-}) {
-  return (
-    <span
-      title={label}
-      aria-label={label}
-      className={cn(
-        "inline-flex items-center gap-1 border-s border-border ps-2 tabular-nums",
-        className,
-      )}
-    >
-      <AgentViewerAvatar className="size-5" />
-      {count}
-    </span>
-  );
-}
-
-/** Agents use provider logos when the public API identifies the provider. */
-export function AgentViewerAvatar({
-  agentLabel,
-  className,
-}: {
-  agentLabel?: string | null;
-  className?: string;
-}) {
-  const normalizedLabel = agentLabel?.toLowerCase() ?? "";
-  const logo = normalizedLabel.includes("claude") ? (
-    <ClaudeLogo className="size-3.5" />
-  ) : normalizedLabel.includes("openai") ||
-    normalizedLabel.includes("chatgpt") ||
-    normalizedLabel.includes("codex") ? (
-    <CodexLogo className="size-3.5" />
-  ) : (
-    <IconBotId className="size-3.5" />
-  );
-
-  return (
-    <span
-      aria-hidden
-      className={cn(
-        "flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground",
-        className,
-      )}
-    >
-      {logo}
-    </span>
-  );
-}
-
 /** Identity fields every viewer surface shares — `list-viewers` rows and the
  * leaner `topViewers` rows from `get-recording-insights` alike. */
 export interface ViewerIdentity {

package/corpus/templates/clips/changelog/2026-09-23-insights-charts-load-only-when-opened-keeping-the-recording-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-23
+---
+
+Insights charts load only when opened, keeping the recording library faster.

package/corpus/templates/content/app/components/editor/DocumentToolbar.tsx

@@ -1,4 +1,4 @@
-import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { AgentToggleButton } from "@agent-native/core/client/AgentSidebar";
 import { trackEvent } from "@agent-native/core/client/analytics";
 import { appPath } from "@agent-native/core/client/api-path";
 import { writeClipboardText } from "@agent-native/core/client/clipboard";

package/corpus/templates/content/app/components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { AgentToggleButton } from "@agent-native/core/client/AgentSidebar";
 import {
   useHeaderTitle,
   useHeaderActions,

package/corpus/templates/content/app/components/layout/Layout.tsx

@@ -1,9 +1,9 @@
-import {
-  AgentSidebar,
-  isAssistantChatHistoryVersion,
-  type AssistantChatHistoryConfig,
-  type AssistantChatHistoryVersion,
+import type {
+  AssistantChatHistoryConfig,
+  AssistantChatHistoryVersion,
 } from "@agent-native/core/client/agent-chat";
+import { AgentSidebar } from "@agent-native/core/client/AgentSidebar";
+import { isAssistantChatHistoryVersion } from "@agent-native/core/client/assistant-chat-history-version";
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { InvitationBanner } from "@agent-native/core/client/org";

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

@@ -118,7 +118,8 @@ export function shouldRevalidate({
 const THEME_INIT_SCRIPT = getThemeInitScript("system", true);
 
 const LazyAgentSidebar = lazy(async () => {
-  const { AgentSidebar } = await import("@agent-native/core/client/agent-chat");
+  const { AgentSidebar } =
+    await import("@agent-native/core/client/AgentSidebar");
   return { default: AgentSidebar };
 });
 

package/corpus/templates/design/.agents/skills/design-editor-architecture/SKILL.md

@@ -172,8 +172,8 @@ never had layer rows, a `data-smart-selection` attribute nobody built, a port
 (`9340`) nothing serves, and a Frame tool that grew a Frame/Screen split. So
 before changing product code, establish which side is wrong:
 
-- **Does the control exist?** `grep` the label and the i18n key. A label that
-  lives only in `i18n-data.ts` is rendered nowhere.
+- **Does the control exist?** `grep` the label and the i18n key. A translation
+  is rendered only when the active catalog loads its locale file.
 - **Does the gate allow it?** Read the condition, not the intent —
   `frameToolDraws === "screen"`, `canRenderAuthenticatedShare`,
   `responsiveInteractActive`. A test that skips the gate is the broken one.

package/corpus/templates/design/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable user-facing changes to Design are documented here. Open it any time
 from the command menu (Cmd+K → "What's new") or from Settings.
 
+## 2026-09-23
+
+### Improved
+
+- Design loads translated catalogs and AI prompt tools only when you need them.
+
 ## 2026-09-22
 
 ### Improved
@@ -13,6 +19,7 @@ from the command menu (Cmd+K → "What's new") or from Settings.
 
 ### Fixed
 
+- Fixed the design system picker showing a still-indexing Builder design system as ready to use
 - Blocks can be selected with one click inside screens
 - Canvas edits on large designs now save even when version history can't be stored, with a one-time notice instead of a lost change.
 - Opening Design signed out inside an embedded tab now shows sign-in instead of a page whose actions all fail.

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -1,11 +1,12 @@
 import { trackEvent } from "@agent-native/core/client/analytics";
 import { appBasePath } from "@agent-native/core/client/api-path";
 import {
-  PromptComposer,
   type PromptComposerSubmitOptions,
   useEagerFileUploads,
 } from "@agent-native/core/client/composer";
 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 { useOrg } from "@agent-native/core/client/org";
 import {
   EmbeddedApp,
@@ -22,7 +23,14 @@ import {
   IconUpload,
   IconX,
 } from "@tabler/icons-react";
-import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  lazy,
+  Suspense,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from "react";
 import { toast } from "sonner";
 
 import {
@@ -59,6 +67,16 @@ import {
 import { MAX_UPLOAD_BYTES, MAX_UPLOAD_MB } from "@/lib/upload-limits";
 import { cn } from "@/lib/utils";
 
+const loadPromptComposer = () =>
+  import("@agent-native/core/client/composer").then(({ PromptComposer }) => ({
+    default: PromptComposer,
+  }));
+const LazyPromptComposer = lazy(loadPromptComposer);
+
+export function preloadPromptComposer() {
+  void loadPromptComposer().catch(() => {});
+}
+
 export interface UploadedFile {
   path: string;
   originalName: string;
@@ -1000,25 +1018,42 @@ export default function PromptPopover({
         ) : null}
 
         <div className={cn("px-2 pb-2", showStartChoice && "hidden")}>
-          <PromptComposer
-            key={placeholder ?? t("home.describeBuild")}
-            autoFocus
-            attachmentsEnabled
-            disabled={loading || submitting}
-            placeholder={placeholder ?? t("home.describeBuild")}
-            onSubmit={handleSubmit}
-            onAttachmentsChange={handleAttachmentsChange}
-            draftScope={orgScopedDraftScope}
-            initialText={restoredPromptText}
-            initialTextKey={restoredPromptKey}
-            attachButton={
-              <PromptAttachmentMenu
-                disabled={loading || uploading || submitting}
-                onUploadFiles={handleUploadFiles}
-                onPickAsset={() => setAssetsPickerOpen(true)}
+          <LazyChunkErrorBoundary fallback={<LazyChunkRetryFallback />}>
+            <Suspense
+              fallback={
+                <div
+                  aria-busy="true"
+                  className="flex min-h-36 flex-col justify-between gap-3 rounded-md border border-input p-3"
+                >
+                  <Skeleton className="h-16 w-full" />
+                  <div className="flex items-center justify-between gap-2">
+                    <Skeleton className="size-8" />
+                    <Skeleton className="h-8 w-24" />
+                  </div>
+                </div>
+              }
+            >
+              <LazyPromptComposer
+                key={placeholder ?? t("home.describeBuild")}
+                autoFocus
+                attachmentsEnabled
+                disabled={loading || submitting}
+                placeholder={placeholder ?? t("home.describeBuild")}
+                onSubmit={handleSubmit}
+                onAttachmentsChange={handleAttachmentsChange}
+                draftScope={orgScopedDraftScope}
+                initialText={restoredPromptText}
+                initialTextKey={restoredPromptKey}
+                attachButton={
+                  <PromptAttachmentMenu
+                    disabled={loading || uploading || submitting}
+                    onUploadFiles={handleUploadFiles}
+                    onPickAsset={() => setAssetsPickerOpen(true)}
+                  />
+                }
               />
-            }
-          />
+            </Suspense>
+          </LazyChunkErrorBoundary>
         </div>
         {!showStartChoice &&
           (onTemplateChange ||