fix(console-ui): fix hydration mismatch that broke client-side navigation (root cause)

[anupsv]

Summary

This is the root cause behind the broken navigation that #457/#458/#462 have been chasing/band-aiding: client-side next/link navigation silently fails app-wide (links render but router.push no-ops), so only full-page-load <a> works.

VerificationModeProvider — added in #450 and wrapping the entire app in layout.tsx — read localStorage inside its useState initializer:

const [mode, setMode] = useState<VerificationMode>(getInitialMode); // reads localStorage

So when a user had toggled technical mode, the first client render (technical) diverged from the server HTML (normal). On a React hydration mismatch the server DOM is discarded and the tree is regenerated on the client, which breaks App Router client navigation everywhere.

This is the exact bug class #457 fixed for the store and InviteCodeBanner — it just missed this provider (also from #450). #458 then worked around the symptom by switching the sidebar to native <a>.

Fix

Make the first render deterministic (matches the server), then load the persisted preference in an effect — the same pattern as #457:

const [mode, setMode] = useState<VerificationMode>("normal");
useEffect(() => {
  const stored = localStorage.getItem(STORAGE_KEY);
  if (stored === "technical" || stored === "normal") setMode(stored);
}, []);

Adds verification-mode.test.tsx pinning the contract: first render is normal even when localStorage says technical, the persisted value applies after mount, and toggle persists.

Scope / verification note

• I swept every localStorage/window/Date/random read in the global render path (layout → AppShell and the providers it mounts). After this change, VerificationModeProvider was the only remaining render-time localStorage read; ThemeProvider, the store (fix(console-ui): sidebar nav unclickable — fix React #418 hydration mismatch #457), and InviteCodeBanner (fix(console-ui): sidebar nav unclickable — fix React #418 hydration mismatch #457) are already effect-based. ProviderSlackPopup also reads localStorage in its initializers but is masked-safe (its !isProvider gate makes the first render null on both server and client) — a latent instance of the same pattern worth hardening separately.
• Could not run a browser repro here, so I kept the native-<a> band-aids in place. Please verify on the preview deploy with localStorage['darkbloom-verification-mode'] = 'technical' that next/link navigation works (no hydration error in console).

Follow-up (separate PR)

Once verified, the native-<a> workarounds can be reverted to restore SPA navigation: the sidebar (#458) and the provider tabs (#462 — keep its "hide tabs until installed" change, revert only the <a> swap), plus the 2 remaining <Link>s in stats/earn stay correct either way.

Test plan

• npx vitest run — 3/3 in the new suite.
• npx eslint — clean.
• npm run build — succeeds.
• Manual on preview: with technical mode set, no React hydration error on load; clicking next/link elements navigates.

Made with Cursor

---

^{Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
d-inference	Ready	Preview	Jun 24, 2026 8:24pm
d-inference-console-ui-dev	Ready	Preview	Jun 24, 2026 8:24pm
d-inference-landing	Ready	Preview	Jun 24, 2026 8:24pm

[github-actions]

No threat-model-covered files were modified; this PR adds a UI verification-mode component and its test, which falls entirely outside the current threat model's affected_files mappings.

---

Trust boundaries touched

None of the existing TB-xxx boundaries are directly exercised by these two files.

---

New attack surface not covered by an existing threat

The new verification-mode.tsx component warrants a brief look before declaring it fully neutral:

• What it likely does: based on the filename, this component probably renders some provider-trust or attestation-verification status to the user (e.g. "hardware trusted", "self-signed", trust level badges). If it reads trust/attestation state from the coordinator and renders it verbatim, it sits adjacent to TB-004 (browser → coordinator) and indirectly near TB-009 (attestation chain).

• Risk if trust state is consumer-facing without caveats: if the component fetches or receives a trust-level string from the coordinator and renders it as a security claim with no server-side authorisation check on that fetch, it would be a UI surface for T-036 (trust level elevated without completing the MDM/MDA chain) — a user could be shown "hardware trusted" for a provider that only reached TrustSelfSigned. This is not a confirmed issue from the diff alone (no coordinator fetch is visible without seeing the component's data source), but it is the one pattern to verify in review.

• Test file: verification-mode.test.tsx is a pure test with no runtime surface.

---

Recommendation for threat model maintainers

If verification-mode.tsx renders coordinator-sourced trust-level data to consumers, add it to the affected_files list of T-036 and/or T-033 and note TB-004 as a touched boundary. If it is purely cosmetic / local-state UI with no coordinator fetch, no model update is needed.

No SEC-* findings are resolved by this PR.

---

🔐 Threat model: docs/threat-model.yaml · Updates on each push to this PR

[blacksmith-sh]

Found 1 test failure on Blacksmith runners:

Failure

Test	View Logs
github.com/eigeninference/d-inference/e2e/TestIntegration_ConcurrentRequests	View Logs

^{Need help on this PR? Tag /codesmith with what you need.}

[ethenotethan]

Automated Code Review — Layr-Labs/d-inference#

Verdict: COMMENT

Security — ✅ No issues found

Performance — ✅ No issues found

Type_diligence — ✅ No issues found

Additive_complexity — ✅ No issues found

✅ All four passes clean. No issues found.

🤖 Automated review by Centaur · DAR-186

[ethenotethan]

Automated Code Review — Layr-Labs/d-inference#

Verdict: COMMENT

Security — ✅ No issues found

Performance — ✅ No issues found

Type_diligence — ✅ No issues found

Additive_complexity — ✅ No issues found

✅ All four passes clean. No issues found.

🤖 Automated review by Centaur · DAR-186

[ethenotethan]

Automated Code Review — Layr-Labs/d-inference#

Verdict: COMMENT

Security — ✅ No issues found

Performance — ✅ No issues found

Type_diligence — ✅ No issues found

Additive_complexity — ✅ No issues found

✅ All four passes clean. No issues found.

🤖 Automated review by Centaur · DAR-186