@agent-native/core 0.97.0 → 0.98.1

package/corpus/templates/clips/changelog/2026-07-11-recording-overlays-are-lighter-weight-and-no-longer-cause-pa.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-11
+---
+
+Recording overlays are lighter-weight and no longer cause page jank while capturing

package/corpus/templates/clips/changelog/2026-07-11-s3-storage-setup-stays-collapsed-until-you-choose-it-as-the-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-11
+---
+
+S3 storage setup stays collapsed until you choose it as the secondary storage option.

package/corpus/templates/clips/changelog/2026-07-11-workspace-load-failures-now-show-a-retry-action.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-11
+---
+
+Notifications, trash, and workspace insights now show a clear retry action when loading fails.

package/corpus/templates/clips/chrome-extension/src/overlay.css

@@ -152,6 +152,31 @@ body {
   }
 }
 
+@keyframes countdown-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .countdown-number {
+    animation: countdown-fade 0.18s ease-out forwards;
+  }
+
+  .countdown-control {
+    transition:
+      background 0.15s ease,
+      border-color 0.15s ease;
+  }
+
+  .countdown-control:active {
+    transform: none;
+  }
+}
+
 .countdown-hint {
   position: absolute;
   bottom: 14%;
@@ -260,14 +285,17 @@ body {
   overflow: hidden;
   max-height: 0;
   opacity: 0;
+  transform: translateY(-4px) scaleY(0.92);
+  transform-origin: top;
   transition:
-    max-height 0.18s ease,
-    opacity 0.18s ease;
+    opacity 0.18s ease,
+    transform 0.18s ease;
 }
 
 .toolbar-v:hover .toolbar-v-hover-actions {
   max-height: 120px;
   opacity: 1;
+  transform: none;
 }
 
 .toolbar-v-action {
@@ -324,15 +352,16 @@ body {
   width: 40%;
   border-radius: 999px;
   background: #d4d4d8;
-  animation: saving-indeterminate 1.1s ease-in-out infinite;
+  animation: saving-indeterminate 1.1s linear infinite;
+  will-change: transform;
 }
 
 @keyframes saving-indeterminate {
   0% {
-    margin-left: -40%;
+    transform: translateX(-100%);
   }
   100% {
-    margin-left: 100%;
+    transform: translateX(250%);
   }
 }
 

package/corpus/templates/clips/chrome-extension/src/styles.css

@@ -232,8 +232,8 @@ svg {
   pointer-events: none;
   transform: translate(-50%, -2px);
   transition:
-    opacity 90ms ease-in,
-    transform 90ms ease-in;
+    opacity 90ms ease,
+    transform 90ms ease-out;
 }
 
 [data-tooltip]::after {

package/corpus/templates/clips/desktop/src/styles.css

@@ -331,7 +331,7 @@ body[data-clips-route="recording-pill"] #root {
 }
 
 .feedback-popover-content[data-state="closed"] {
-  animation: feedback-popover-out 90ms ease-in;
+  animation: feedback-popover-out 90ms ease-out;
 }
 
 .feedback-form {
@@ -1084,19 +1084,40 @@ body[data-clips-route="recording-pill"] #root {
 }
 
 .rec-dot-live {
+  position: relative;
   background: white;
+}
+
+.rec-dot-live::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.6);
   animation: rec-live-pulse 1.2s ease-out infinite;
+  pointer-events: none;
 }
 
 @keyframes rec-live-pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
+    transform: scale(1);
+    opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
+    transform: scale(2.4);
+    opacity: 0;
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rec-dot-live::after {
+    animation: none;
+    opacity: 0.6;
+    transform: none;
   }
 }
 
@@ -1630,13 +1651,16 @@ body[data-clips-route="recording-pill"] #root {
   max-width: 320px;
 }
 
-.tooltip-content[data-state="delayed-open"],
-.tooltip-content[data-state="instant-open"] {
+.tooltip-content[data-state="delayed-open"] {
   animation: tooltip-in 120ms ease-out;
 }
 
+.tooltip-content[data-state="instant-open"] {
+  animation: none;
+}
+
 .tooltip-content[data-state="closed"] {
-  animation: tooltip-out 90ms ease-in;
+  animation: tooltip-out 90ms ease-out;
 }
 
 .tooltip-arrow {
@@ -2772,29 +2796,37 @@ body[data-clips-route="recording-pill"] #root {
 }
 
 .rec-pulse {
+  position: relative;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ef4444;
-  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
-  animation: rec-pulse 1.4s ease-out infinite;
+}
+
+.rec-pulse::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  border: 1px solid rgba(239, 68, 68, 0.6);
+  animation: rec-live-pulse 1.4s ease-out infinite;
+  pointer-events: none;
 }
 
 .rec-pulse-paused {
   background: #f59e0b;
+}
+
+.rec-pulse-paused::after {
   animation: none;
-  box-shadow: none;
+  opacity: 0;
 }
 
-@keyframes rec-pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
-  }
-  70% {
-    box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+@media (prefers-reduced-motion: reduce) {
+  .rec-pulse::after {
+    animation: none;
+    opacity: 0.6;
+    transform: none;
   }
 }
 
@@ -2833,9 +2865,7 @@ body[data-clips-route="recording-pill"] #root {
   user-select: none;
   -webkit-user-select: none;
   cursor: grab;
-  transition:
-    height 170ms cubic-bezier(0.2, 0.8, 0.2, 1),
-    border-radius 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: border-radius 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .toolbar-v:hover,
@@ -2953,8 +2983,6 @@ body[data-clips-route="recording-pill"] #root {
   pointer-events: none;
   visibility: hidden;
   transition:
-    height 170ms cubic-bezier(0.2, 0.8, 0.2, 1),
-    margin-top 170ms cubic-bezier(0.2, 0.8, 0.2, 1),
     opacity 130ms ease-out,
     transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
@@ -3957,12 +3985,29 @@ body[data-clips-route="recording-pill"] #root {
 }
 
 .meeting-nub-dot {
+  position: relative;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #16a34a;
-  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
-  animation: rec-pulse 1.4s ease-out infinite;
+}
+
+.meeting-nub-dot::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  border: 1px solid rgba(22, 163, 74, 0.55);
+  animation: rec-live-pulse 1.4s ease-out infinite;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .meeting-nub-dot::after {
+    animation: none;
+    opacity: 0.6;
+    transform: none;
+  }
 }
 
 .meeting-nub-initial {

package/corpus/templates/content/.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/content/.agents/skills/real-time-sync/SKILL.md

@@ -30,7 +30,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
    useDbSync({ queryClient });
    ```
 
-   For each non-own event, `useDbSync` bumps a per-source counter (e.g. `dashboards`, `analyses`, `settings`, `action`) and invalidates a small fixed list of framework-internal prefixes (`["action"]`, `["app-state"]`, `["__set_url__"]`, etc.). It does **not** blanket-invalidate templates' own data queries for ordinary domain events — that caused a request storm in production. The exception is `source: "action"`: a successful mutating action is the framework-wide "agent changed app data" signal, so `useDbSync` also refreshes active React Query observers as a compatibility safety net for custom apps that have not yet moved every read to `useActionQuery` or source-versioned query keys.
+   For each non-own event, `useDbSync` bumps a per-source counter (e.g. `dashboards`, `analyses`, `settings`, `action`) and invalidates a small fixed list of framework-internal prefixes (`["action"]`, `["app-state"]`, `["__set_url__"]`, etc.). It does **not** blanket-invalidate templates' own data queries — that caused request storms in production. A successful mutating action refreshes active `useActionQuery` observers under the `["action"]` prefix. Browser actions carry a tab id so their originating tab ignores the sync echo while other tabs refresh. Legacy apps can opt into broader compatibility with `actionInvalidatePredicate`, but first-party apps should use action-backed or source-versioned query keys. Idle fallback polling runs once per minute; active agent work temporarily uses the faster cadence.
 
 3. **Templates fold per-source counters into their query keys.** This is the pattern that makes "agent writes show up without a manual refresh" reliable:
 
@@ -117,7 +117,7 @@ useQuery({
 | UI not updating after agent writes | Is `useDbSync` called with the correct `queryClient`? Does the affected query have an active observer?         |
 | Poll endpoint not responding       | Is `/_agent-native/poll` accessible? Is the server running?                                                    |
 | SSE not connecting                 | Is `/_agent-native/events` accessible and authenticated? Polling should still keep the UI fresh as fallback.   |
-| High CPU / event storms            | The agent is writing rapidly. Add `staleTime` to queries to debounce refetches.                                |
+| High CPU / event storms            | Use targeted source keys, settle bursty list counters, and avoid broad action invalidation.                   |
 
 ## Jitter Prevention
 

package/corpus/templates/content/actions/move-document.ts

@@ -267,23 +267,10 @@ export default defineAction({
             parentId: args.parentId,
           })
         : null;
-    const normalizedSiblingPositions =
-      args.position !== undefined
-        ? await resolveSiblingPositionsAfterMove({
-            db,
-            ownerEmail,
-            id,
-            parentId: targetParentId,
-            rootSection: existing,
-            position: args.position,
-          })
-        : null;
-
-    if (args.position !== undefined) {
-      updates.position =
-        normalizedSiblingPositions?.find((document) => document.id === id)
-          ?.position ?? args.position;
-    }
+    let normalizedSiblingPositions: Array<{
+      id: string;
+      position: number;
+    }> | null = null;
 
     const runMoveTransaction = () =>
       db.transaction(async (tx) => {
@@ -321,7 +308,36 @@ export default defineAction({
         }
       });
 
-    if (args.position === undefined && args.parentId !== undefined) {
+    if (args.position !== undefined) {
+      // Resequencing reads every current sibling under the target parent,
+      // computes a full renumbering with the moved document inserted, then
+      // writes that renumbering. That read-then-write is exactly as racy as
+      // the append path below: two concurrent moves/reparents into the same
+      // parent can each read the same pre-move snapshot and then each commit
+      // a full-but-stale renumbering, silently clobbering the other move or
+      // leaving a document's new position colliding with one a concurrent
+      // append/reparent just claimed. Serialize the read through the write
+      // under the SAME per-(owner, parent) lock the append branch uses so an
+      // append and a reorder/reparent into one parent can't race each other
+      // either (see _position-utils.ts).
+      await withPositionLock(
+        documentsPositionScope(ownerEmail, targetParentId),
+        async () => {
+          normalizedSiblingPositions = await resolveSiblingPositionsAfterMove({
+            db,
+            ownerEmail,
+            id,
+            parentId: targetParentId,
+            rootSection: existing,
+            position: args.position!,
+          });
+          updates.position =
+            normalizedSiblingPositions?.find((document) => document.id === id)
+              ?.position ?? args.position;
+          await runMoveTransaction();
+        },
+      );
+    } else if (args.parentId !== undefined) {
       // Appending to the end of the new parent's children reads MAX(position)
       // then writes MAX+1. Serialize the read through the write so a
       // concurrent move/create/add targeting the same parent can't read the

package/corpus/templates/content/app/components/QueryErrorState.tsx

@@ -0,0 +1,39 @@
+import { useT } from "@agent-native/core/client";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+
+export function QueryErrorState({
+  onRetry,
+  retrying = false,
+  compact = false,
+}: {
+  onRetry: () => void;
+  retrying?: boolean;
+  compact?: boolean;
+}) {
+  const t = useT();
+
+  return (
+    <div
+      className={
+        compact
+          ? "flex flex-col items-center gap-2 px-3 py-4 text-center"
+          : "flex flex-1 items-center justify-center bg-background px-6"
+      }
+    >
+      <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+        <IconAlertTriangle className="size-7 text-destructive" />
+        <p className="text-sm text-destructive">{t("empty.genericError")}</p>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={onRetry}
+          disabled={retrying}
+        >
+          {t("database.retry")}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -164,7 +164,7 @@ export function LinkHoverPreview({
         left: Math.max(16, hoveredLink.rect.left),
         zIndex: 50,
       }}
-      className="w-72 rounded-lg border bg-popover text-popover-foreground shadow-md overflow-hidden animate-in fade-in-0 zoom-in-95"
+      className="w-72 rounded-lg border bg-popover text-popover-foreground shadow-md overflow-hidden animate-in fade-in-0 zoom-in-95 origin-top-left"
     >
       {editing ? (
         <div className="flex items-center gap-1 p-1.5">