fix(ui): sync useLocalStorage across tabs via storage events (#8384)

[claytonlin1110]

Summary

• Make useLocalStorage listen for the native storage event so already-mounted hooks in other same-origin tabs re-render when the same key (or configured legacyKey) changes elsewhere.
• Reset to initial when another tab removes the key (newValue: null); ignore malformed JSON the same way mount-time reads already do.
• Extend use-local-storage.test.ts with cross-tab sync, ignore-other-key, null-reset, malformed, legacyKey, and unmount cleanup coverage.

Closes #8384

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
• 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:

• UI-only change under apps/loopover-ui (Codecov ignores apps/**). Validated with npm run ui:test, npm run ui:typecheck, npm run ui:lint, git diff --check, and npm audit --audit-level=moderate as required by the issue.

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

No visual/layout change — data-correctness fix only (cross-tab state sync). Per the issue Expected Outcome: no UI Evidence screenshots required.

State / title	JPG/PNG evidence
N/A — no visible UI change

Notes

• Listener follows the same add/remove cleanup pattern as startHealthPolling() in apps/loopover-ui/src/lib/api/status.ts.
• initial is read via a ref so inline [] / object-literal call sites do not re-subscribe every render.

[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-24 12:47:25 UTC}

2 files · 1 AI reviewer · no blockers · readiness 93/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This diff adds a native `storage` event listener to `useLocalStorage` so other same-origin tabs re-render when the tracked key changes, resets to `initial` on removal, and ignores malformed JSON — matching the existing mount-time read behavior. The `initialRef` pattern correctly avoids re-subscribing on every render when callers pass fresh literals as `initial`, and the effect cleanup properly removes the listener on unmount. The implementation is correct and the added tests (own-key update, other-key ignore, null-reset, malformed-JSON, legacyKey, unmount cleanup) directly exercise every new branch.

Nits — 4 non-blocking

• nit: use-local-storage.ts — the listener fires `setValue` even when the new value is deep-equal to the current state; not a bug, just an avoidable re-render, similar to how `update()` already re-sets unconditionally.
• nit: use-local-storage.test.ts — the malformed-JSON test doesn't assert `console.error`/`console.warn` wasn't called or suppress it, so a stray console noise from `JSON.parse` throwing inside try/catch won't be caught if a warn were later added.
• Consider documenting in the JSDoc that legacyKey values from other tabs are also honored via storage events, matching the existing legacyKey migration comment.
• Consider whether `event.storageArea` should be checked against `window.localStorage` to avoid reacting to sessionStorage events in test environments that dispatch generic StorageEvents (low risk here since events are manually dispatched with `key` matching).

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	#8384
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low 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: 399 registered-repo PR(s), 251 merged, 92 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	claytonlin1110; Gittensor profile; 399 PR(s), 92 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: moderate

Linked issue satisfaction

Addressed
The diff adds a storage-event listener inside the mount effect that matches key/legacyKey, resets to initial on null newValue, ignores unparsable JSON via try/catch, and cleans up the listener on unmount, directly fulfilling the issue's implementation requirements; tests cover all six listed scenarios including cross-tab sync, key mismatch, null reset, malformed JSON, legacyKey, and unmount cleanu

Review context

• Author: claytonlin1110
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: not available
• Official Gittensor activity: 399 PR(s), 92 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Triage stale or unlinked PRs.

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.

_{🟩 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.