From 4b5f23ce585eee87931d66adf2b3ea7deb9815f5 Mon Sep 17 00:00:00 2001
From: dhgoal <153369624+dhgoal@users.noreply.github.com>
Date: Fri, 17 Jul 2026 21:25:30 +0200
Subject: [PATCH] feat(ui): adopt ErrorState/EmptyState in app.index.tsx's
 metrics section

app.index.tsx's at-a-glance metrics section hand-rolled its own error and
empty <div>s instead of the shared state-view primitives every other route
uses. Swaps them for ErrorState/EmptyState from @/components/site/state-views,
passing overview.error through as the error detail, with no change to the
overview.status/series.length branching that decides which state renders.

Closes #6983
---
 apps/loopover-ui/src/routes/app.index.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/loopover-ui/src/routes/app.index.tsx b/apps/loopover-ui/src/routes/app.index.tsx
index 89acdac9f0..8a8811c21f 100644
--- a/apps/loopover-ui/src/routes/app.index.tsx
+++ b/apps/loopover-ui/src/routes/app.index.tsx
@@ -19,6 +19,7 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 import { StatusPill } from "@/components/site/control-primitives";
+import { EmptyState, ErrorState } from "@/components/site/state-views";
 import { PageHeader } from "@/components/site/primitives";
 import { TrendChart } from "@/components/site/trend-chart";
 import { type AppRole, useSession } from "@/lib/api/session";
@@ -169,14 +170,18 @@ function AppOverview() {
           className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"
         >
           {overview.status === "error" && (
-            <div className="col-span-full rounded-token border border-warning/30 bg-warning/[0.04] p-4 text-token-sm text-warning">
-              App overview is unavailable right now ({overview.error}).
-            </div>
+            <ErrorState
+              className="col-span-full"
+              title="App overview is unavailable right now"
+              description={overview.error}
+            />
           )}
           {series.length === 0 ? (
-            <div className="col-span-full rounded-token border border-dashed border-border bg-transparent p-6 text-center text-token-sm text-muted-foreground">
-              No metrics available yet. They’ll appear once the API returns data.
-            </div>
+            <EmptyState
+              className="col-span-full"
+              title="No metrics available yet"
+              description="They’ll appear once the API returns data."
+            />
           ) : (
             series.map((m) => (
               <SparkStat