@agent-native/core 0.96.0 → 0.98.0

package/corpus/templates/clips/app/components/player/reactions-tray.tsx

@@ -61,11 +61,8 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
         {floats.map((f) => (
           <span
             key={f.id}
-            className="absolute bottom-1 text-2xl"
-            style={{
-              left: f.left + "%",
-              animation: "float-up 2.5s ease-out forwards",
-            }}
+            className="floating-reaction absolute bottom-1 text-2xl"
+            style={{ left: f.left + "%" }}
           >
             {f.emoji}
           </span>
@@ -73,10 +70,25 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
       </div>
 
       <style>{`
+        .floating-reaction {
+          animation: float-up 2.5s ease-out forwards;
+        }
+
         @keyframes float-up {
           0% { transform: translateY(0); opacity: 1; }
           100% { transform: translateY(-200px); opacity: 0; }
         }
+
+        @keyframes float-fade {
+          0% { opacity: 1; }
+          100% { opacity: 0; }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .floating-reaction {
+            animation: float-fade 600ms ease-out forwards;
+          }
+        }
       `}</style>
     </div>
   );

package/corpus/templates/clips/app/components/player/scrubber.tsx

@@ -200,7 +200,7 @@ export function Scrubber(props: ScrubberProps) {
               e.stopPropagation();
               onSeek(ch.startMs);
             }}
-            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 h-3 w-0.5 bg-white/80 hover:h-4 hover:w-1 transition-all"
+            className="absolute top-1/2 h-3 w-0.5 -translate-x-1/2 -translate-y-1/2 bg-white/80 transition-[transform,opacity] duration-150 ease-out hover:scale-x-[2] hover:scale-y-125 motion-reduce:transition-none motion-reduce:hover:scale-100"
             style={{
               left: (ch.startMs / Math.max(1, durationMs)) * 100 + "%",
             }}
@@ -247,8 +247,10 @@ export function Scrubber(props: ScrubberProps) {
         {/* Thumb */}
         <div
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 h-3 w-3 rounded-full bg-white shadow transition-transform",
-            dragging ? "scale-125" : "scale-0 group-hover/bar:scale-100",
+            "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 shadow transition-[transform,opacity] duration-150 ease-out motion-reduce:scale-100 motion-reduce:transition-none",
+            dragging
+              ? "scale-125 opacity-100"
+              : "scale-95 group-hover/bar:scale-100 group-hover/bar:opacity-100",
           )}
           style={{ left: pct + "%" }}
         />

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -705,7 +705,7 @@ export function PreRecordPanel({
               />
             </button>
           </CollapsibleTrigger>
-          <CollapsibleContent>
+          <CollapsibleContent className="clips-collapsible-content">
             <div
               className={cn(
                 "grid gap-2 px-6 pb-5",
@@ -781,7 +781,7 @@ export function PreRecordPanel({
             />
           </button>
         </CollapsibleTrigger>
-        <CollapsibleContent>
+        <CollapsibleContent className="clips-collapsible-content">
           <div className="px-6 pb-5">
             <div className="overflow-visible rounded-xl border border-border bg-background">
               <div className="space-y-2 p-2.5">

package/corpus/templates/clips/app/components/workspace/insights-hub.tsx

@@ -1,5 +1,10 @@
 import { appBasePath, useActionQuery, useT } from "@agent-native/core/client";
-import { IconChartLine, IconDownload, IconUsers } from "@tabler/icons-react";
+import {
+  IconAlertTriangle,
+  IconChartLine,
+  IconDownload,
+  IconUsers,
+} from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
 import { PageHeader } from "@/components/library/page-header";
@@ -50,10 +55,10 @@ interface InsightsResponse {
 export function InsightsHub() {
   const t = useT();
   const [days, setDays] = useState("30");
-  const { data, isLoading } = useActionQuery<InsightsResponse>(
-    "get-organization-insights",
-    { days: Number(days) } as any,
-  );
+  const { data, isLoading, isError, isFetching, refetch } =
+    useActionQuery<InsightsResponse>("get-organization-insights", {
+      days: Number(days),
+    } as any);
 
   const totals = data?.totals ?? {
     views: 0,
@@ -99,99 +104,118 @@ export function InsightsHub() {
           {t("insightsHub.description", { days })}
         </p>
 
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <StatCard
-            label={t("insightsHub.views")}
-            value={totals.views}
-            loading={isLoading}
-          />
-          <StatCard
-            label={t("insightsHub.reactions")}
-            value={totals.reactions}
-            loading={isLoading}
-          />
-          <StatCard
-            label={t("insightsHub.comments")}
-            value={totals.comments}
-            loading={isLoading}
-          />
-          <StatCard
-            label={t("insightsHub.recordings")}
-            value={totals.recordings}
-            loading={isLoading}
-          />
-        </div>
+        {isError ? (
+          <div className="flex flex-col items-center gap-3 rounded-lg border border-destructive/30 px-6 py-16 text-center">
+            <IconAlertTriangle className="size-9 text-destructive" />
+            <p className="text-sm font-medium">
+              {t("libraryGrid.loadFailedTitle")}
+            </p>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => void refetch()}
+              disabled={isFetching}
+            >
+              {t("libraryGrid.retry")}
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              <StatCard
+                label={t("insightsHub.views")}
+                value={totals.views}
+                loading={isLoading}
+              />
+              <StatCard
+                label={t("insightsHub.reactions")}
+                value={totals.reactions}
+                loading={isLoading}
+              />
+              <StatCard
+                label={t("insightsHub.comments")}
+                value={totals.comments}
+                loading={isLoading}
+              />
+              <StatCard
+                label={t("insightsHub.recordings")}
+                value={totals.recordings}
+                loading={isLoading}
+              />
+            </div>
 
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base flex items-center gap-2">
-              <IconChartLine className="size-4 text-primary" />
-              {t("insightsHub.engagementTrend")}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            {isLoading ? (
-              <Skeleton className="h-64 w-full" />
-            ) : (
-              <EngagementChart data={data?.trend ?? []} />
-            )}
-          </CardContent>
-        </Card>
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <IconChartLine className="size-4 text-primary" />
+                  {t("insightsHub.engagementTrend")}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {isLoading ? (
+                  <Skeleton className="h-64 w-full" />
+                ) : (
+                  <EngagementChart data={data?.trend ?? []} />
+                )}
+              </CardContent>
+            </Card>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base">
-                {t("insightsHub.topVideos")}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="views">
-                <TabsList>
-                  <TabsTrigger value="views">
-                    {t("insightsHub.views")}
-                  </TabsTrigger>
-                  <TabsTrigger value="reactions">
-                    {t("insightsHub.reactions")}
-                  </TabsTrigger>
-                  <TabsTrigger value="comments">
-                    {t("insightsHub.comments")}
-                  </TabsTrigger>
-                </TabsList>
-                <TabsContent value="views" className="pt-3">
-                  <TopVideosTable
-                    rows={data?.topVideos.byViews ?? []}
-                    metricLabel={t("insightsHub.views")}
-                  />
-                </TabsContent>
-                <TabsContent value="reactions" className="pt-3">
-                  <TopVideosTable
-                    rows={data?.topVideos.byReactions ?? []}
-                    metricLabel={t("insightsHub.reactions")}
-                  />
-                </TabsContent>
-                <TabsContent value="comments" className="pt-3">
-                  <TopVideosTable
-                    rows={data?.topVideos.byComments ?? []}
-                    metricLabel={t("insightsHub.comments")}
-                  />
-                </TabsContent>
-              </Tabs>
-            </CardContent>
-          </Card>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Card>
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-base">
+                    {t("insightsHub.topVideos")}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <Tabs defaultValue="views">
+                    <TabsList>
+                      <TabsTrigger value="views">
+                        {t("insightsHub.views")}
+                      </TabsTrigger>
+                      <TabsTrigger value="reactions">
+                        {t("insightsHub.reactions")}
+                      </TabsTrigger>
+                      <TabsTrigger value="comments">
+                        {t("insightsHub.comments")}
+                      </TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="views" className="pt-3">
+                      <TopVideosTable
+                        rows={data?.topVideos.byViews ?? []}
+                        metricLabel={t("insightsHub.views")}
+                      />
+                    </TabsContent>
+                    <TabsContent value="reactions" className="pt-3">
+                      <TopVideosTable
+                        rows={data?.topVideos.byReactions ?? []}
+                        metricLabel={t("insightsHub.reactions")}
+                      />
+                    </TabsContent>
+                    <TabsContent value="comments" className="pt-3">
+                      <TopVideosTable
+                        rows={data?.topVideos.byComments ?? []}
+                        metricLabel={t("insightsHub.comments")}
+                      />
+                    </TabsContent>
+                  </Tabs>
+                </CardContent>
+              </Card>
 
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base flex items-center gap-2">
-                <IconUsers className="size-4 text-primary" />
-                {t("insightsHub.topCreators")}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <TopCreatorsTable rows={data?.topCreators ?? []} />
-            </CardContent>
-          </Card>
-        </div>
+              <Card>
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-base flex items-center gap-2">
+                    <IconUsers className="size-4 text-primary" />
+                    {t("insightsHub.topCreators")}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <TopCreatorsTable rows={data?.topCreators ?? []} />
+                </CardContent>
+              </Card>
+            </div>
+          </>
+        )}
       </div>
     </>
   );

package/corpus/templates/clips/app/global.css

@@ -77,6 +77,51 @@
   }
 }
 
+@keyframes clips-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes clips-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+}
+
+.clips-collapsible-content {
+  overflow: hidden;
+  transform-origin: top;
+}
+
+.clips-collapsible-content[data-state="open"] {
+  animation: clips-collapsible-down 160ms ease-out;
+}
+
+.clips-collapsible-content[data-state="closed"] {
+  animation: clips-collapsible-up 120ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .clips-collapsible-content[data-state] {
+    animation-duration: 1ms;
+  }
+}
+
 @container agent-native-main (min-width: 980px) {
   .clips-meeting-detail-skeleton-grid,
   .clips-meeting-detail-grid {

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

@@ -324,6 +324,10 @@ function isStandalonePublicPath(pathname: string): boolean {
   const path = pathname.replace(/\/+$/, "") || "/";
   return (
     path === "/download" ||
+    path === "/bug-report" ||
+    path.startsWith("/bug-report/") ||
+    path === "/r" ||
+    path.startsWith("/r/") ||
     path.startsWith("/share/") ||
     path.startsWith("/embed/") ||
     path.startsWith("/invite/")

package/corpus/templates/clips/app/routes/_app.notifications.tsx

@@ -3,7 +3,7 @@ import {
   useActionMutation,
   useT,
 } from "@agent-native/core/client";
-import { IconSend } from "@tabler/icons-react";
+import { IconAlertTriangle, IconSend } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -39,7 +39,13 @@ export default function NotificationsRoute() {
   const [replyText, setReplyText] = useState("");
 
   const qc = useQueryClient();
-  const { data: aggregated, isLoading } = useActionQuery<{
+  const {
+    data: aggregated,
+    isLoading,
+    isError,
+    isFetching,
+    refetch,
+  } = useActionQuery<{
     items: NotificationItem[];
   }>("list-notifications", { days: 30 } as any, { retry: false });
 
@@ -120,6 +126,21 @@ export default function NotificationsRoute() {
             <div className="py-16 text-center text-sm text-muted-foreground">
               {t("notificationsRoute.loading")}
             </div>
+          ) : isError ? (
+            <div className="flex flex-col items-center gap-3 py-16 text-center">
+              <IconAlertTriangle className="size-9 text-destructive" />
+              <p className="text-sm font-medium">
+                {t("libraryGrid.loadFailedTitle")}
+              </p>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => void refetch()}
+                disabled={isFetching}
+              >
+                {t("libraryGrid.retry")}
+              </Button>
+            </div>
           ) : (
             <NotificationsList items={filtered} onReply={setReplyFor} />
           )}

package/corpus/templates/clips/app/routes/_app.trash.tsx

@@ -1,5 +1,9 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { IconArrowBackUp, IconTrash } from "@tabler/icons-react";
+import {
+  IconAlertTriangle,
+  IconArrowBackUp,
+  IconTrash,
+} from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
@@ -46,7 +50,7 @@ export default function TrashRoute() {
   const [isBulkPending, setIsBulkPending] = useState(false);
 
   const args = useMemo(() => ({ view: "trash" as const, sort }), [sort]);
-  const { data, isLoading } = useRecordings(args);
+  const { data, isLoading, isError, isFetching, refetch } = useRecordings(args);
   const recordings = (data?.recordings ?? []) as RecordingSummary[];
 
   // These actions are owned by other teams and ship with the template.
@@ -222,6 +226,24 @@ export default function TrashRoute() {
               <Skeleton key={i} />
             ))}
           </div>
+        ) : isError ? (
+          <div className="flex flex-col items-center justify-center gap-3 px-8 py-20 text-center">
+            <IconAlertTriangle className="size-10 text-destructive" />
+            <h2 className="text-base font-semibold">
+              {t("libraryGrid.loadFailedTitle")}
+            </h2>
+            <p className="max-w-sm text-sm text-muted-foreground">
+              {t("libraryGrid.loadFailedBody")}
+            </p>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => void refetch()}
+              disabled={isFetching}
+            >
+              {t("libraryGrid.retry")}
+            </Button>
+          </div>
         ) : recordings.length === 0 ? (
           <EmptyState kind="trash" />
         ) : (

package/corpus/templates/clips/changelog/2026-07-10-atomic-view-tracking.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-10
+---
+
+Viewer analytics stay accurate when multiple playback events arrive at the same time.

package/corpus/templates/clips/changelog/2026-07-11-controls-and-folders-now-move-more-smoothly.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-11
+---
+
+Playback controls, recording setup, reactions, and folders now move more smoothly and respect reduced-motion preferences.

package/corpus/templates/clips/changelog/2026-07-11-declining-an-invitation-now-requires-being-its-recipient.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-11
+---
+
+Declining an invitation now requires being its recipient

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-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/package.json

@@ -8,6 +8,7 @@
     "dev:hot": "tsx scripts/dev.ts",
     "build": "vite build",
     "typecheck": "tsc --noEmit",
+    "test": "vitest --run",
     "package": "pnpm build && tsx scripts/package.ts"
   },
   "dependencies": {
@@ -16,8 +17,8 @@
   "devDependencies": {
     "@types/chrome": "^0.2.0",
     "tsx": "catalog:",
-    "typescript": "catalog:",
     "typescript-7": "catalog:",
-    "vite": "catalog:"
+    "vite": "catalog:",
+    "vitest": "catalog:"
   }
 }

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/package.json

@@ -12,13 +12,15 @@
     "build:tauri": "CLIPS_DESKTOP_LOCAL_BUILD=1 pnpm run check:prereqs && CLIPS_DESKTOP_LOCAL_BUILD=1 tauri build --config '{\"bundle\":{\"createUpdaterArtifacts\":false},\"plugins\":{\"updater\":{\"active\":false}}}' && node ./scripts/sign-macos-local.ts",
     "tauri": "tauri",
     "vite:dev": "vite",
-    "vite:build": "vite build"
+    "vite:build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest --run"
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@sentry/browser": "10.62.0",
-    "@tabler/icons-react": "^3.26.0",
+    "@tabler/icons-react": "catalog:",
     "@tauri-apps/api": "^2.11.0",
     "@tauri-apps/plugin-fs": "2.5.1",
     "@tauri-apps/plugin-process": "^2.3.1",
@@ -32,8 +34,8 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "catalog:",
-    "typescript": "catalog:",
     "typescript-7": "catalog:",
-    "vite": "catalog:"
+    "vite": "catalog:",
+    "vitest": "catalog:"
   }
 }