feat(miner-ui): restyle header nav with mint active cues and compact theme toggle

[thomasalvaedison7777-lgtm]

Summary

• Restyle the miner-ui shell header to match loopover-ui site-header chrome: sticky translucent bar, mint-underline active routes, focus rings, and a wrap-friendly nav row — without adopting sidebar.tsx as primary nav.
• Compact the existing theme toggle to a ghost icon button so the header stays usable beside the four nav links on narrow widths (same .dark + loopover.miner_theme persistence / no-flash script).
• Add RootShell nav active-route regression tests (aria-current, exact Overview matching, sticky chrome) and cover the theme toggle's localStorage failure path.

Closes #6828

Scope

• The PR title follows type(scope): short summary Conventional Commit format, for example fix(api): restore profile access checks.
• 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 (e.g. Closes #123) — a linked open issue is required for every contributor PR.

Validation

• git diff --check
• npm run actionlint
• npm run typecheck
• npm run test:coverage locally; codecov/patch requires ≥99% coverage of the lines AND branches you changed (aim for 100% on your diff so CI variance does not fail near the threshold). Global coverage is a non-blocking trend with a loose 90% backstop, not the gate.
• npm run test:workers
• npm run build:mcp
• npm run test:mcp-pack
• npm run ui:openapi:check
• npm run ui:lint — scoped eslint on changed miner-ui files (0 errors)
• npm run ui:typecheck
• npm run ui:build
• 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:

• Miner-ui-only change under apps/loopover-miner-ui. Ran npm --workspace @loopover/ui-miner run test (276 passing, coverage thresholds met). Full root npm run test:ci not run yet — run before push. apps/** is outside the Codecov patch include for src/**.

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, low-noise, and does not imply compensation guarantees or optimization tactics.
• 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 JPG/JPEG or PNG screenshots arranged as organized, captioned, clickable thumbnails. SVG screenshots are not used as review evidence. Review-only screenshots or recordings are not committed to the repository.
• Public docs/changelogs are updated where needed; changelogs are only edited for release-prep PRs.

UI Evidence

[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 14:40:43 UTC}

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

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This PR restyles the miner-ui header with sticky/translucent chrome, mint-underline active nav links, and a compact icon-based theme toggle, plus adds regression tests for nav active-state and a theme-toggle localStorage-failure path. The diff is well-scoped to loopover-miner-ui only, correctly extracts NAV_ITEMS and shared className into constants, and the test mock for TanStack Router's Link correctly reproduces activeProps/inactiveProps merging to validate aria-current and mint-underline classes. One correctness nuance: the `{...("exact" in item && item.exact ? {...} : {})}` spread is a slightly awkward way to conditionally pass activeOptions since all NAV_ITEMS objects have the same shape from `as const`, but it works as written since only the Overview item has exact:true.

Nits — 5 non-blocking

• apps/loopover-miner-ui/src/routes/__root.tsx:36 — the `{...("exact" in item && item.exact ? { activeOptions: { exact: true } } : {})}` spread is more convoluted than needed since `item.exact` alone (possibly undefined for other entries) would suffice as the condition — the `"exact" in item` check is redundant given all objects come from the same `as const` array shape.
• apps/loopover-miner-ui/src/components/theme-toggle.tsx — the comment 'Client-only Vite SPA — document is always present when this runs' removes the previous SSR-safe `typeof document === "undefined"` guard; confirm there's no SSR/prerender path in this app that could hit this during a build step.
• The PR checklist shows ui:typecheck, ui:build, and test:coverage as unchecked locally even though CI passed — worth confirming coverage on the new branch logic (e.g., the ternary in NAV_LINK spread and inactiveProps hover states) actually meets the ~97% patch bar.
• root-shell-nav.test.tsx reimplements Link mocking logic already present in chat-rail.test.tsx per its own comment — consider extracting a shared test helper to avoid drift between the two mocks.
• Simplify the conditional activeOptions spread at __root.tsx:36 to `{...(item.exact ? { activeOptions: { exact: true } } : {})}`.

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	#6828
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: 23 registered-repo PR(s), 13 merged, 1 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	thomasalvaedison7777-lgtm; Gittensor profile; 23 PR(s), 1 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: moderate

Linked issue satisfaction

Partially addressed
The PR restyles the header/nav with active-route highlighting and mint underline cues (satisfying that requirement well), and it correctly avoids adopting sidebar.tsx, but the diff shown does not touch index.html at all, so the hardcoded `class="dark"` removal/theme-toggle wiring into index.html and the stale `<title>Gittensory Miner</title>` fix are not evidenced; the ThemeToggle component itself

Review context

• Author: thomasalvaedison7777-lgtm
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: JavaScript, TypeScript
• Official Gittensor activity: 23 PR(s), 1 issue(s).
• Related work: Titles/paths share 6 meaningful terms. (issue #6828, issue #6839)

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
/	desktop	before /	after /	—
/	mobile	before / (mobile)	after / (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

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.