@agent-native/core 0.97.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/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/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/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.

package/corpus/templates/macros/app/components/DailyProgress.tsx

@@ -19,6 +19,7 @@ import {
   Area,
 } from "recharts";
 
+import { QueryErrorState } from "@/components/QueryErrorState";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -82,25 +83,32 @@ export function DailyProgress({
   }, [activeChart]);
 
   const netCalories = totalCalories - totalBurnedCalories;
-  const percentage = Math.min(100, (netCalories / goalCalories) * 100);
+  const percentage = Math.max(
+    0,
+    Math.min(100, (netCalories / goalCalories) * 100),
+  );
   const remaining = Math.max(0, goalCalories - netCalories);
   const isOver = netCalories > goalCalories;
 
   const endDate = formatLocalDate(new Date());
   const startDate = formatLocalDate(subDays(new Date(), 30));
 
-  const { data: rawWeightHistory, isLoading: weightLoading } = useActionQuery(
+  const weightHistoryQuery = useActionQuery(
     "weights-history",
     { startDate, endDate },
     { enabled: activeChart === "weight" },
   );
+  const { data: rawWeightHistory, isLoading: weightLoading } =
+    weightHistoryQuery;
   const weightHistory = Array.isArray(rawWeightHistory) ? rawWeightHistory : [];
 
-  const { data: rawCalorieHistory, isLoading: calorieLoading } = useActionQuery(
+  const calorieHistoryQuery = useActionQuery(
     "meals-history",
     { startDate, endDate },
     { enabled: activeChart === "activity" },
   );
+  const { data: rawCalorieHistory, isLoading: calorieLoading } =
+    calorieHistoryQuery;
   const calorieHistory = Array.isArray(rawCalorieHistory)
     ? rawCalorieHistory
     : [];
@@ -187,10 +195,12 @@ export function DailyProgress({
             <div className="h-1.5 bg-muted rounded-full overflow-hidden">
               <div
                 className={cn(
-                  "h-full transition-all duration-500 ease-out rounded-full",
+                  "h-full origin-left rounded-full transition-[transform,background-color] duration-200 ease-out motion-reduce:transition-none rtl:origin-right",
                   isOver ? "bg-red-400" : "bg-foreground",
                 )}
-                style={{ width: `${Math.min(percentage, 100)}%` }}
+                style={{
+                  transform: `scaleX(${percentage / 100})`,
+                }}
               />
             </div>
           </div>
@@ -271,6 +281,11 @@ export function DailyProgress({
               <div className="h-[140px] w-full">
                 {weightLoading ? (
                   <Skeleton className="h-full w-full rounded-xl bg-muted" />
+                ) : weightHistoryQuery.isError ? (
+                  <QueryErrorState
+                    compact
+                    onRetry={() => void weightHistoryQuery.refetch()}
+                  />
                 ) : weightHistory.length > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
                     <LineChart
@@ -347,6 +362,11 @@ export function DailyProgress({
               <div className="h-[140px] w-full">
                 {calorieLoading ? (
                   <Skeleton className="h-full w-full rounded-xl bg-muted" />
+                ) : calorieHistoryQuery.isError ? (
+                  <QueryErrorState
+                    compact
+                    onRetry={() => void calorieHistoryQuery.refetch()}
+                  />
                 ) : calorieHistory.length > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
                     <AreaChart

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

@@ -0,0 +1,31 @@
+import { useT } from "@agent-native/core/client";
+import { IconAlertCircle, IconRefresh } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+
+export function QueryErrorState({
+  onRetry,
+  compact = false,
+}: {
+  onRetry: () => void;
+  compact?: boolean;
+}) {
+  const t = useT();
+
+  return (
+    <div
+      className={
+        compact
+          ? "flex h-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-destructive/30 bg-destructive/5 p-4 text-center"
+          : "flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-destructive/30 bg-destructive/5 py-10 text-center"
+      }
+    >
+      <IconAlertCircle className="size-5 text-destructive/70" />
+      <p className="text-sm text-muted-foreground">{t("common.loadFailed")}</p>
+      <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+        <IconRefresh className="size-3.5" />
+        {t("common.retry")}
+      </Button>
+    </div>
+  );
+}

package/corpus/templates/macros/app/components/WeightTracker.tsx

@@ -16,6 +16,7 @@ import {
 import { formatLocalDate } from "@/lib/utils";
 
 import { AddWeightDialog } from "./AddWeightDialog";
+import { QueryErrorState } from "./QueryErrorState";
 import { WeightCard } from "./WeightCard";
 
 interface WeightTrackerProps {
@@ -36,9 +37,10 @@ export function WeightTracker({ currentDate }: WeightTrackerProps) {
     onError: () => toast.error(t("weight.deleteFailed")),
   });
 
-  const { data: rawWeights, isLoading } = useActionQuery("list-weights", {
+  const weightsQuery = useActionQuery("list-weights", {
     date: dateStr,
   });
+  const { data: rawWeights, isLoading } = weightsQuery;
   const serverWeights = Array.isArray(rawWeights) ? rawWeights : [];
   const { rows: weights, hasOptimisticRows } = useOptimisticLogRows(
     "weight",
@@ -72,6 +74,8 @@ export function WeightTracker({ currentDate }: WeightTrackerProps) {
       <div className="space-y-2">
         {isLoading && !hasOptimisticRows ? (
           <Skeleton className="h-16 w-full rounded-xl" />
+        ) : weightsQuery.isError ? (
+          <QueryErrorState onRetry={() => void weightsQuery.refetch()} />
         ) : !todayWeight ? (
           <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-muted/30 py-12 text-center">
             <div className="p-3 rounded-full bg-blue-500/10 mb-3">

package/corpus/templates/macros/app/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-[color,background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98] motion-reduce:active:scale-100",
   {
     variants: {
       variant: {

package/corpus/templates/macros/app/components/ui/progress.tsx

@@ -16,7 +16,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-foreground/80 transition-all duration-500 ease-out"
+      className="h-full w-full flex-1 bg-foreground/80 transition-transform duration-500 ease-out"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

package/corpus/templates/macros/app/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm hover:text-foreground",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-[color,background-color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm hover:text-foreground",
       className,
     )}
     {...props}

package/corpus/templates/macros/app/i18n/ar-SA.ts

@@ -58,6 +58,8 @@ const messages = {
     optional: "اختياري",
     saveChanges: "حفظ التغييرات",
     saving: "جار الحفظ...",
+    loadFailed: "تعذر تحميل هذه البيانات",
+    retry: "إعادة المحاولة",
   },
   seo: {
     homeTitle:

package/corpus/templates/macros/app/i18n/de-DE.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "Optional",
     saveChanges: "Anderungen speichern",
     saving: "Speichern...",
+    loadFailed: "Diese Daten konnten nicht geladen werden",
+    retry: "Erneut versuchen",
   },
   seo: {
     homeTitle: