@agent-native/core 0.96.0 → 0.98.0

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

@@ -3,7 +3,10 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { DispatchShell } from "@agent-native/dispatch/components";
+import {
+  ActionQueryError,
+  DispatchShell,
+} from "@agent-native/dispatch/components";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -2364,156 +2367,172 @@ export default function WorkspaceIntegrationsRoute() {
       description={t("integrations.description")}
     >
       <div className="space-y-6">
-        <section
-          data-usage-tracked={usageTracked ? "true" : undefined}
-          className={cx(
-            "dispatch-integrations-summary-grid grid gap-3",
-            usageTracked && "dispatch-integrations-summary-grid-tracked",
-          )}
-        >
-          <SummaryCard
-            icon={IconCheck}
-            label={t("integrations.readyProviders")}
-            value={`${data.counts.readyProviders ?? 0}/${providers.length}`}
-            detail={t("integrations.readyProvidersDetail")}
-          />
-          <SummaryCard
-            icon={IconPlugConnected}
-            label={t("integrations.connections")}
-            value={String(connections.length)}
-            detail={t("integrations.connectedCount", {
-              count: connectedCount,
-            })}
-          />
-          <SummaryCard
-            icon={IconShieldCheck}
-            label={t("integrations.appGrants")}
-            value={String(data.grants.length)}
-            detail={t("integrations.appGrantsDetail", {
-              allAppCount: data.counts.allAppConnections ?? 0,
-              selectedCount: data.counts.selectedAppConnections ?? 0,
-            })}
-          />
-          <SummaryCard
-            icon={IconKey}
-            label={t("integrations.keyHealth")}
-            value={
-              connectionsMissingKeys === 0
-                ? t("integrations.healthy")
-                : t("integrations.missingCount", {
-                    count: connectionsMissingKeys,
-                  })
-            }
-            detail={
-              attentionCount
-                ? t("integrations.connectionNeedsAttention", {
-                    count: attentionCount,
-                  })
-                : t("integrations.requiredRefsPresent")
-            }
+        {connectionsQuery.isError || appsQuery.isError ? (
+          <ActionQueryError
+            error={connectionsQuery.error ?? appsQuery.error}
+            onRetry={() => {
+              void connectionsQuery.refetch();
+              void appsQuery.refetch();
+            }}
           />
-          {usageTracked ? (
-            <SummaryCard
-              icon={IconClock}
-              label={t("integrations.usage")}
-              value={
-                Number.isFinite(mostRecentUsage)
-                  ? formatTimestamp(t, new Date(mostRecentUsage).toISOString())
-                  : t("integrations.time.neverUsed")
-              }
-              detail={
-                neverUsedCount
-                  ? t("integrations.neverUsedCount", {
-                      count: neverUsedCount,
-                    })
-                  : t("integrations.allTrackedAccountsHaveUsage")
-              }
-            />
-          ) : null}
-        </section>
-
-        <IntegrationOnboarding />
-
-        {connectionsQuery.isLoading ? (
-          <div className="rounded-lg border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
-            {t("integrations.loadingWorkspaceIntegrations")}
-          </div>
         ) : null}
-
-        <section>
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <h2 className="text-sm font-semibold text-foreground">
-                {t("integrations.providerCatalog")}
-              </h2>
-              <p className="text-xs text-muted-foreground">
-                {t("integrations.providersAvailable", {
-                  count: providers.length,
+        {!connectionsQuery.isError && !appsQuery.isError ? (
+          <>
+            <section
+              data-usage-tracked={usageTracked ? "true" : undefined}
+              className={cx(
+                "dispatch-integrations-summary-grid grid gap-3",
+                usageTracked && "dispatch-integrations-summary-grid-tracked",
+              )}
+            >
+              <SummaryCard
+                icon={IconCheck}
+                label={t("integrations.readyProviders")}
+                value={`${data.counts.readyProviders ?? 0}/${providers.length}`}
+                detail={t("integrations.readyProvidersDetail")}
+              />
+              <SummaryCard
+                icon={IconPlugConnected}
+                label={t("integrations.connections")}
+                value={String(connections.length)}
+                detail={t("integrations.connectedCount", {
+                  count: connectedCount,
                 })}
-              </p>
-            </div>
-          </div>
-          <div className="dispatch-provider-grid grid gap-3">
-            {providers.map((provider) => (
-              <ProviderCard
-                key={provider.id}
-                provider={provider}
-                connections={providerConnections.get(provider.id) ?? []}
-                onCreate={() => openSetup(provider)}
               />
-            ))}
-          </div>
-        </section>
-
-        <section>
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <h2 className="text-sm font-semibold text-foreground">
-                {t("integrations.connectedAccounts")}
-              </h2>
-              <p className="text-xs text-muted-foreground">
-                {connections.length === 0
-                  ? t("integrations.noSharedConnectionsYet")
-                  : t("integrations.savedConnectionCount", {
-                      count: connections.length,
-                    })}
-              </p>
-            </div>
-          </div>
-          {connections.length === 0 && !connectionsQuery.isLoading ? (
-            <div className="rounded-lg border border-dashed px-6 py-12 text-center">
-              <IconPlugConnected
-                size={24}
-                className="mx-auto text-muted-foreground"
+              <SummaryCard
+                icon={IconShieldCheck}
+                label={t("integrations.appGrants")}
+                value={String(data.grants.length)}
+                detail={t("integrations.appGrantsDetail", {
+                  allAppCount: data.counts.allAppConnections ?? 0,
+                  selectedCount: data.counts.selectedAppConnections ?? 0,
+                })}
               />
-              <p className="mt-3 text-sm font-medium text-foreground">
-                {t("integrations.noSharedAccountsYet")}
-              </p>
-              <p className="mx-auto mt-1 max-w-md text-sm leading-5 text-muted-foreground">
-                {t("integrations.emptyConnectedAccountsDescription")}
-              </p>
-            </div>
-          ) : (
-            <div className="grid gap-3">
-              {connections.map((connection) => (
-                <ConnectionRow
-                  key={connection.id}
-                  connection={connection}
-                  provider={providersById.get(connection.provider)}
-                  grantApps={grantApps}
-                  grants={data.grants}
-                  grantPending={setGrant.isPending}
-                  onEdit={() => openEdit(connection)}
-                  onRepair={() => openRepair(connection)}
-                  onDelete={() => setDeleteTarget(connection)}
-                  onToggleGrant={(appId, granted) =>
-                    toggleGrant(connection, appId, granted)
+              <SummaryCard
+                icon={IconKey}
+                label={t("integrations.keyHealth")}
+                value={
+                  connectionsMissingKeys === 0
+                    ? t("integrations.healthy")
+                    : t("integrations.missingCount", {
+                        count: connectionsMissingKeys,
+                      })
+                }
+                detail={
+                  attentionCount
+                    ? t("integrations.connectionNeedsAttention", {
+                        count: attentionCount,
+                      })
+                    : t("integrations.requiredRefsPresent")
+                }
+              />
+              {usageTracked ? (
+                <SummaryCard
+                  icon={IconClock}
+                  label={t("integrations.usage")}
+                  value={
+                    Number.isFinite(mostRecentUsage)
+                      ? formatTimestamp(
+                          t,
+                          new Date(mostRecentUsage).toISOString(),
+                        )
+                      : t("integrations.time.neverUsed")
+                  }
+                  detail={
+                    neverUsedCount
+                      ? t("integrations.neverUsedCount", {
+                          count: neverUsedCount,
+                        })
+                      : t("integrations.allTrackedAccountsHaveUsage")
                   }
                 />
-              ))}
-            </div>
-          )}
-        </section>
+              ) : null}
+            </section>
+
+            <IntegrationOnboarding />
+
+            {connectionsQuery.isLoading ? (
+              <div className="rounded-lg border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+                {t("integrations.loadingWorkspaceIntegrations")}
+              </div>
+            ) : null}
+
+            <section>
+              <div className="mb-3 flex items-center justify-between gap-3">
+                <div>
+                  <h2 className="text-sm font-semibold text-foreground">
+                    {t("integrations.providerCatalog")}
+                  </h2>
+                  <p className="text-xs text-muted-foreground">
+                    {t("integrations.providersAvailable", {
+                      count: providers.length,
+                    })}
+                  </p>
+                </div>
+              </div>
+              <div className="dispatch-provider-grid grid gap-3">
+                {providers.map((provider) => (
+                  <ProviderCard
+                    key={provider.id}
+                    provider={provider}
+                    connections={providerConnections.get(provider.id) ?? []}
+                    onCreate={() => openSetup(provider)}
+                  />
+                ))}
+              </div>
+            </section>
+
+            <section>
+              <div className="mb-3 flex items-center justify-between gap-3">
+                <div>
+                  <h2 className="text-sm font-semibold text-foreground">
+                    {t("integrations.connectedAccounts")}
+                  </h2>
+                  <p className="text-xs text-muted-foreground">
+                    {connections.length === 0
+                      ? t("integrations.noSharedConnectionsYet")
+                      : t("integrations.savedConnectionCount", {
+                          count: connections.length,
+                        })}
+                  </p>
+                </div>
+              </div>
+              {connections.length === 0 && !connectionsQuery.isLoading ? (
+                <div className="rounded-lg border border-dashed px-6 py-12 text-center">
+                  <IconPlugConnected
+                    size={24}
+                    className="mx-auto text-muted-foreground"
+                  />
+                  <p className="mt-3 text-sm font-medium text-foreground">
+                    {t("integrations.noSharedAccountsYet")}
+                  </p>
+                  <p className="mx-auto mt-1 max-w-md text-sm leading-5 text-muted-foreground">
+                    {t("integrations.emptyConnectedAccountsDescription")}
+                  </p>
+                </div>
+              ) : (
+                <div className="grid gap-3">
+                  {connections.map((connection) => (
+                    <ConnectionRow
+                      key={connection.id}
+                      connection={connection}
+                      provider={providersById.get(connection.provider)}
+                      grantApps={grantApps}
+                      grants={data.grants}
+                      grantPending={setGrant.isPending}
+                      onEdit={() => openEdit(connection)}
+                      onRepair={() => openRepair(connection)}
+                      onDelete={() => setDeleteTarget(connection)}
+                      onToggleGrant={(appId, granted) =>
+                        toggleGrant(connection, appId, granted)
+                      }
+                    />
+                  ))}
+                </div>
+              )}
+            </section>
+          </>
+        ) : null}
       </div>
 
       <SetupWizard

package/corpus/templates/dispatch/changelog/2026-07-11-dispatch-mcp-connections-now-start-with-safer-app-access-and.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-11
+---
+
+Dispatch MCP connections now start with safer app access and stay signed in more reliably in ChatGPT.

package/corpus/templates/dispatch/changelog/2026-07-11-overview-and-chat-now-share-a-cleaner-more-stable-flow.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-11
+---
+
+Overview and Chat now share a cleaner flow with cross-app prompting, smoother transitions, and a stable bottom chat field.

package/corpus/templates/dispatch/changelog/2026-07-11-query-errors-now-show-a-retry-option.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-11
+---
+
+Data loading failures now show a clear error with a retry option instead of appearing as empty lists.

package/corpus/templates/dispatch/package.json

@@ -20,7 +20,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tabler/icons-react": "catalog:",
     "@tanstack/react-query": "^5.99.2",
-    "h3": "^2.0.1-rc.20",
+    "h3": "catalog:",
     "isbot": "^5",
     "next-themes": "^0.4.6",
     "sonner": "^2.0.7",
@@ -40,7 +40,6 @@
     "react-router": "^8.1.0",
     "tailwindcss": "catalog:",
     "tsx": "^4.20.3",
-    "typescript": "catalog:",
     "typescript-7": "catalog:",
     "vite": "catalog:",
     "vitest": "catalog:"

package/corpus/templates/forms/.agents/skills/frontend-design/SKILL.md

@@ -48,7 +48,7 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 
 - **Typography**: Use the product's existing type system first. For net-new public pages, choose characterful but readable type and keep sizing appropriate to the surface.
 - **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes and default purple/blue gradients unless the brand demands them.
-- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library.
+- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library. Never `transition-all` — list the properties that actually change (e.g. `transition-[opacity,transform]`). Use the shared easing tokens defined in `packages/core/src/styles/agent-native.css` instead of hand-typing curves: `var(--ease-drawer)` (260ms, drawers/app chrome), `var(--ease-collapse)` (200ms, expand/collapse), `var(--ease-out-strong)` (snappy entrances) — in Tailwind, `ease-[var(--ease-collapse)]`. Enter/exit with ease-out, never `ease-in`. Overlays that zoom in must set the Radix origin var (e.g. `origin-[--radix-popover-content-transform-origin]`). Animate `transform`/`opacity`, not width/height/padding/box-shadow. Gate looping or large-movement animations with `motion-reduce:`. Command palettes and keyboard-triggered actions get no animation.
 - **Composition**: Match the workflow. Operational apps should be dense and scannable; marketing or portfolio pages can be more immersive.
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.

package/corpus/templates/forms/actions/patch-form-fields.ts

@@ -6,6 +6,12 @@
  * concurrent edits to DIFFERENT fields both survive instead of the later
  * client overwriting the earlier one with its stale full-array snapshot.
  *
+ * The read-modify-write runs under a per-form in-process lock (same pattern
+ * as `patch-deck` in the slides template) so two concurrent callers (e.g. the
+ * form-builder autosave and an agent edit) are serialized instead of racing
+ * on the same row — without the lock, the second writer's read would miss
+ * the first writer's not-yet-committed update and silently clobber it.
+ *
  * The UI form builder uses this action for all incremental edits.
  * The legacy `update-form --fields <json>` path remains available for agents
  * and bulk imports that want to replace the whole fields array at once.
@@ -21,6 +27,36 @@ import { assertValidFields } from "../server/lib/validate-fields.js";
 import type { FormField } from "../shared/types.js";
 import { assertPublishableForm } from "./lib/assert-publishable-form.js";
 
+// ---------------------------------------------------------------------------
+// Per-form write lock — mirrors `withDeckLock` in
+// templates/slides/actions/patch-deck.ts so concurrent client and agent
+// writes to the same form's fields are serialised in-process.
+// ---------------------------------------------------------------------------
+const LOCK_KEY = "__formsFieldPatchLocks" as const;
+type GlobalWithLocks = typeof globalThis & {
+  [LOCK_KEY]?: Map<string, Promise<unknown>>;
+};
+const globalRef = globalThis as GlobalWithLocks;
+if (!globalRef[LOCK_KEY]) {
+  globalRef[LOCK_KEY] = new Map<string, Promise<unknown>>();
+}
+const formLocks: Map<string, Promise<unknown>> = globalRef[LOCK_KEY]!;
+
+export function withFormLock<T>(
+  formId: string,
+  fn: () => Promise<T>,
+): Promise<T> {
+  const prev = formLocks.get(formId) ?? Promise.resolve();
+  const next = prev.then(fn, fn);
+  formLocks.set(formId, next);
+  next
+    .finally(() => {
+      if (formLocks.get(formId) === next) formLocks.delete(formId);
+    })
+    .catch(() => {});
+  return next;
+}
+
 const fieldOpSchema = z.union([
   z.object({
     op: z.literal("upsert"),
@@ -50,58 +86,60 @@ export default defineAction({
   run: async (args) => {
     await assertAccess("form", args.id, "editor");
 
-    const db = getDb();
-    const [existing] = await db
-      .select()
-      .from(schema.forms)
-      .where(eq(schema.forms.id, args.id))
-      .limit(1);
+    return withFormLock(args.id, async () => {
+      const db = getDb();
+      const [existing] = await db
+        .select()
+        .from(schema.forms)
+        .where(eq(schema.forms.id, args.id))
+        .limit(1);
 
-    if (!existing) {
-      throw new Error(`Form ${args.id} not found`);
-    }
+      if (!existing) {
+        throw new Error(`Form ${args.id} not found`);
+      }
 
-    let ops: Array<{ op: string; [k: string]: unknown }>;
-    if (typeof args.ops === "string") {
-      try {
-        ops = JSON.parse(args.ops);
-      } catch {
-        throw new Error("--ops must be valid JSON");
+      let ops: Array<{ op: string; [k: string]: unknown }>;
+      if (typeof args.ops === "string") {
+        try {
+          ops = JSON.parse(args.ops);
+        } catch {
+          throw new Error("--ops must be valid JSON");
+        }
+      } else {
+        ops = args.ops as Array<{ op: string; [k: string]: unknown }>;
       }
-    } else {
-      ops = args.ops as Array<{ op: string; [k: string]: unknown }>;
-    }
 
-    if (!Array.isArray(ops)) {
-      throw new Error("ops must be an array");
-    }
+      if (!Array.isArray(ops)) {
+        throw new Error("ops must be an array");
+      }
 
-    // Parse current fields from the DB row.
-    let currentFields: FormField[] = [];
-    try {
-      currentFields = JSON.parse(existing.fields) as FormField[];
-    } catch {
-      currentFields = [];
-    }
+      // Parse current fields from the DB row.
+      let currentFields: FormField[] = [];
+      try {
+        currentFields = JSON.parse(existing.fields) as FormField[];
+      } catch {
+        currentFields = [];
+      }
 
-    // Apply ops server-side so concurrent edits on different fields both land.
-    const nextFields = applyFieldOps(
-      currentFields,
-      ops as Parameters<typeof applyFieldOps>[1],
-    );
+      // Apply ops server-side so concurrent edits on different fields both land.
+      const nextFields = applyFieldOps(
+        currentFields,
+        ops as Parameters<typeof applyFieldOps>[1],
+      );
 
-    // Validate the result before persisting.
-    assertValidFields(nextFields);
-    if (existing.status === "published") {
-      assertPublishableForm(nextFields);
-    }
+      // Validate the result before persisting.
+      assertValidFields(nextFields);
+      if (existing.status === "published") {
+        assertPublishableForm(nextFields);
+      }
 
-    const now = new Date().toISOString();
-    await db
-      .update(schema.forms)
-      .set({ fields: JSON.stringify(nextFields), updatedAt: now })
-      .where(eq(schema.forms.id, args.id));
+      const now = new Date().toISOString();
+      await db
+        .update(schema.forms)
+        .set({ fields: JSON.stringify(nextFields), updatedAt: now })
+        .where(eq(schema.forms.id, args.id));
 
-    return { id: args.id, fields: nextFields, updatedAt: now };
+      return { id: args.id, fields: nextFields, updatedAt: now };
+    });
   },
 });

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

@@ -131,7 +131,7 @@ export function Sidebar() {
 
   const newFormButton = (
     <PopoverTrigger asChild>
-      <button className="flex min-h-[44px] w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-muted-foreground transition-all hover:bg-accent/50 hover:text-foreground">
+      <button className="flex min-h-[44px] w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground">
         <IconPlus className="h-4 w-4 shrink-0" />
         <span>{t("sidebar.newForm")}</span>
       </button>
@@ -374,7 +374,7 @@ export function Sidebar() {
             to="/ask"
             onClick={navigateHomeChat}
             className={cn(
-              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-all hover:text-primary",
+              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors hover:text-primary",
               location.pathname === "/ask" || location.pathname === "/"
                 ? "bg-accent text-accent-foreground"
                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -390,7 +390,7 @@ export function Sidebar() {
             to="/forms"
             onClick={() => isMobile && setMobileOpen(false)}
             className={cn(
-              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-all hover:text-primary",
+              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors hover:text-primary",
               location.pathname.startsWith("/forms")
                 ? "bg-accent text-accent-foreground"
                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",

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

@@ -254,19 +254,45 @@ function FormsCommandMenu({
   );
 }
 
-export default function Root() {
-  const [queryClient] = useState(() => createAgentNativeQueryClient());
+function PrivateAppContent() {
   const [cmdkOpen, setCmdkOpen] = useState(false);
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
+  return (
+    <>
+      <DbSyncSetup />
+      <NavigationStateSync />
+      <UrlStateSync />
+      <OpenLinkInterceptor />
+      <FormsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
+      <Outlet />
+    </>
+  );
+}
+
+export default function Root() {
+  const [queryClient] = useState(() => createAgentNativeQueryClient());
+  const location = useLocation();
+  const isPublicPath =
+    location.pathname === "/f" || location.pathname.startsWith("/f/");
+
+  if (isPublicPath) {
+    return (
+      <AppToolkitProvider>
+        <AppProviders
+          queryClient={queryClient}
+          isPublicPath
+          i18n={{ catalog: i18nCatalog }}
+        >
+          <Outlet />
+        </AppProviders>
+      </AppToolkitProvider>
+    );
+  }
+
   return (
     <AppToolkitProvider>
       <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
-        <DbSyncSetup />
-        <NavigationStateSync />
-        <UrlStateSync />
-        <OpenLinkInterceptor />
-        <FormsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
-        <Outlet />
+        <PrivateAppContent />
       </AppProviders>
     </AppToolkitProvider>
   );

package/corpus/templates/forms/changelog/2026-07-10-simultaneous-edits-to-different-form-fields-no-longer-overwr.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-10
+---
+
+Simultaneous edits to different form fields no longer overwrite each other

package/corpus/templates/forms/package.json

@@ -39,7 +39,7 @@
     "cmdk": "^1.1.1",
     "drizzle-orm": "^0.45.2",
     "embla-carousel-react": "^8.6.0",
-    "h3": "^2.0.1-rc.20",
+    "h3": "catalog:",
     "input-otp": "^1.4.2",
     "isbot": "^5",
     "nanoid": "^5.1.9",
@@ -87,7 +87,6 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "catalog:",
-    "typescript": "catalog:",
     "typescript-7": "catalog:",
     "vite": "catalog:",
     "vitest": "catalog:"

package/corpus/templates/macros/.agents/skills/frontend-design/SKILL.md

@@ -48,7 +48,7 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 
 - **Typography**: Use the product's existing type system first. For net-new public pages, choose characterful but readable type and keep sizing appropriate to the surface.
 - **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes and default purple/blue gradients unless the brand demands them.
-- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library.
+- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library. Never `transition-all` — list the properties that actually change (e.g. `transition-[opacity,transform]`). Use the shared easing tokens defined in `packages/core/src/styles/agent-native.css` instead of hand-typing curves: `var(--ease-drawer)` (260ms, drawers/app chrome), `var(--ease-collapse)` (200ms, expand/collapse), `var(--ease-out-strong)` (snappy entrances) — in Tailwind, `ease-[var(--ease-collapse)]`. Enter/exit with ease-out, never `ease-in`. Overlays that zoom in must set the Radix origin var (e.g. `origin-[--radix-popover-content-transform-origin]`). Animate `transform`/`opacity`, not width/height/padding/box-shadow. Gate looping or large-movement animations with `motion-reduce:`. Command palettes and keyboard-triggered actions get no animation.
 - **Composition**: Match the workflow. Operational apps should be dense and scannable; marketing or portfolio pages can be more immersive.
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.