app.index.tsx hand-rolls its own error banner and empty state instead of ErrorState/EmptyState

[JSONbored]

Context

apps/loopover-ui/src/routes/app.index.tsx:170-178 hand-rolls its own error and empty states for the "at-a-glance metrics" section:

{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>
)}
{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>
) : ( ... )}

This file never imports ErrorState/EmptyState/StateBoundary (confirmed — no such import exists in app.index.tsx), despite this being the app's highest-traffic authenticated route. 16 other files in apps/loopover-ui already use these shared components from apps/loopover-ui/src/components/site/state-views.tsx (imported as @/components/site/state-views) for the identical error/empty-state shape (icon, retry action, consistent copy).

Requirements

• Replace the hand-rolled error <div> with ErrorState from @/components/site/state-views, passing through overview.error as the error detail.
• Replace the hand-rolled empty <div> with EmptyState from the same module.
• Preserve the existing overview.status/series.length conditions driving which state renders — this issue is about the rendered markup, not the branching logic.
• Do not invent a new error/empty component — only the existing ErrorState/EmptyState from state-views.tsx satisfies this issue.

Deliverables

• app.index.tsx's error branch uses ErrorState
• app.index.tsx's empty branch uses EmptyState
• Test covering both the error and empty render paths

Test Coverage Requirements

apps/** UI code falls outside this repo's strict Codecov patch gate (check coverage.include) — a before/after screenshot is still required per this repo's UI-PR convention, plus the regression test above.

Expected Outcome

app.index.tsx's error and empty states match the shared, already-adopted ErrorState/EmptyState shape used by the other 16 files in this app instead of two one-off hand-rolled <div>s.

Links & Resources

apps/loopover-ui/src/components/site/state-views.tsx — ErrorState/EmptyState definitions. Any of the 16 existing consumer files in apps/loopover-ui/src/components/site/ for a real usage precedent.

[linear-code]

JSO-4748