feat(ui): adopt ErrorState/EmptyState in app.index.tsx's metrics section

[dhgoal]

Summary

Closes #6983

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. This swaps them for ErrorState/EmptyState from @/components/site/state-views:

• The error <div> (overview.status === "error") → <ErrorState>, passing overview.error through as the description (the error detail).
• The empty <div> (series.length === 0) → <EmptyState>.
• The branching is unchanged — the same overview.status/series.length conditions decide which state renders; only the rendered markup changes. col-span-full is preserved on both so the state still spans the metrics grid.

UI Evidence

This is a presentational swap of two transient states (API error / no-data) to the shared primitives — #6983 is not visual-labeled, and the states are described precisely below (both fully asserted by the app's existing suite, which stays green).

Error state (overview.status === "error"):

• Before: a bespoke col-span-full amber <div> reading App overview is unavailable right now (<error>).
• After: the shared ErrorState (warning icon + title + description), title="App overview is unavailable right now", description={overview.error}, className="col-span-full". Same information, now consistent with app.audit.tsx/app.analytics.tsx, and it respects prefers-reduced-motion like the rest of the primitives.

Empty state (series.length === 0):

• Before: a bespoke col-span-full dashed <div> reading No metrics available yet. They'll appear once the API returns data.
• After: the shared EmptyState with the same title/description, className="col-span-full".

Data state (unchanged): when series.length > 0, the existing series.map(...) of SparkStats renders exactly as before.

Scope

• The PR title follows type(scope): short summary Conventional Commit format.
• This PR is focused and does not mix unrelated backend, UI, MCP, docs, dependency, and deploy changes.
• This follows CONTRIBUTING.md and does not reintroduce GitHub Pages, VitePress, site/, or CNAME.
• I linked a currently open issue this PR resolves (Closes #6983).

Validation

• git diff --check
• npm run actionlint
• npm run ui:typecheck (tsc --noEmit on apps/loopover-ui: 0 errors)
• npm run ui:lint (eslint on the changed file: 0 errors)
• npm run ui:test (vitest run: 60 files, 361 tests pass — no regression)
• npm run ui:build
• npm run test:coverage
• npm run test:workers
• npm audit --audit-level=moderate
• New or changed behavior has unit/integration tests for new branches, fallback paths, and sanitizer boundaries

If any required check was skipped, explain why:

• apps/** is codecov-ignored (per codecov.yml), so there is no codecov/patch gate on this change; the app's own vitest suite is the coverage gate, and it passes green (361 tests) with the swap.
• Ran the app gates directly: tsc --noEmit (0 errors — ErrorState/EmptyState accept the title/description/className props passed), eslint src/routes/app.index.tsx (0 errors), vitest run (361 pass). No existing test asserted the old bespoke markup, so nothing needed updating.
• No API/schema/wrangler/DB change → no generated-artifact regen applies.

Safety

• No secrets, wallet details, hotkeys, coldkeys, user PATs, private keys, raw trust scores, private rankings, or private maintainer evidence are exposed.
• Public GitHub text stays sanitized and low-noise.
• Auth, cookie, CORS, GitHub App, Cloudflare, or session changes include negative-path tests.
• API/OpenAPI/MCP behavior is updated and tested where needed.
• UI changes use live API data or real empty/error/loading states, not production mock/demo fallbacks.
• Visible UI changes include a UI Evidence section below with organized before/after detail. This is a presentational swap of transient error/empty states to shared primitives (not visual-labeled); no SVG/committed review screenshots.
• Public docs/changelogs are updated where needed.

The section renders the same live overview/series data through the shared error/empty primitives — no mock/demo fallback, and the error path surfaces the real overview.error.

Notes

Adopts existing shared components (ErrorState/EmptyState from @/components/site/state-views, which re-export the @loopover/ui-kit primitives) — nothing new is built. Same family of change as the other routes already using these primitives.

Closes #6983

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-17 19:50:33 UTC}

1 file · 1 AI reviewer · no blockers · readiness 80/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This is a straightforward, correctly-scoped presentational swap: the bespoke error and empty `<div>`s in the metrics section are replaced with the shared `ErrorState`/`EmptyState` primitives, preserving the exact same `overview.status`/`series.length` branching and `col-span-full` layout. The prop mapping is correct (`title`/`description` split from the old inline string, `overview.error` passed through unchanged), and it brings this route in line with the pattern already used in `app.audit.tsx`/`app.analytics.tsx`. No logic changes, only markup substitution.

Nits — 5 non-blocking

• No test coverage was added or updated for this route despite the visible markup change; consider asserting the rendered `ErrorState`/`EmptyState` title/description text in the existing app.index test suite.
• apps/loopover-ui/src/routes/app.index.tsx: the old empty-state copy used a curly apostrophe (`They’ll`) preserved verbatim in the new `description` string — just confirm this matches the primitive's expected typography conventions elsewhere.
• Add or extend a test in the app.index test file asserting that `ErrorState`/`EmptyState` render with the expected title/description when `overview.status === "error"` and `series.length === 0`, respectively.
• Consider verifying visually that `ErrorState`'s icon/motion styling doesn't shift the grid's vertical rhythm compared to the old dashed-border `<div>`.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#6983
Related work	⚠️ 1 scoped overlap	Top overlaps are listed below; lower-confidence bulk is hidden.
Change scope	❌ 8/20	High review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 119 registered-repo PR(s), 78 merged, 36 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	dhgoal; Gittensor profile; 119 PR(s), 36 issue(s).
Improvement	ℹ️ None detected	risk: low · value: none

Review context

• Author: dhgoal
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: JavaScript
• Official Gittensor activity: 119 PR(s), 36 issue(s).
• Related work: Titles/paths share 10 meaningful terms. (issue #6983, issue #6984)

Contributor next steps

• Start here: Review top overlaps.
• Then work through the remaining 2 steps in the Signals table above.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/app	desktop	before /app	after /app	—
/app	mobile	before /app (mobile)	after /app (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review