@agent-native/core 0.97.0 → 0.98.0

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-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/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 {