fix(ui): share one theme-adaptive SuccessBadge across the extrinsic feeds

[luciferlive112116]

Closes #6403

The bug

extrinsics.index.tsx and call-module-extrinsics-table.tsx each defined a byte-identical private SuccessBadge on raw text-emerald-500/text-rose-500. blocks.$ref.tsx implemented the same semantic inline while disagreeing with itself — its fail branch already used text-health-down while its success branch stayed on emerald.

The raw Tailwind palette isn't theme-adaptive for this semantic: text-health-ok / text-health-down are the tokens the rest of the app uses for exactly ok/down (52 and 70 call sites), so an emerald success indicator was the odd one out in both themes.

Screenshots

The /extrinsics feed's Result column. The change is a colour token, so the capture scrolls the table into frame and reports the computed colour rather than asking you to trust the pixels:

before: computed colour of the "ok" badge = lab(66.9756 -58.27 19.5419)   (emerald-500)
after:  computed colour of the "ok" badge = oklch(0.55 0.18 150)          (--health-ok)
"ok" badges on screen: 88

Viewport · Theme	Before	After
Desktop · Light	before	after
Desktop · Dark	before	after
Tablet · Light	before	after
Tablet · Dark	before	after
Mobile · Light	before	after
Mobile · Dark	before	after

The fix

• One shared components/metagraphed/success-badge.tsx on the health tokens. Both duplicate definitions are deleted and their call sites import it.
• success == null still renders the muted em-dash — the tier has no reading for that extrinsic, which is not a failure.
• blocks.$ref.tsx deliberately keeps its own rendering and takes the issue's second option ("or align its success branch to the same token"). That table spells the result out — "Success"/"Failed" — rather than the feeds' "ok"/"fail", so swapping in the shared badge would have silently reworded the page, a change the issue didn't ask for. What it borrows is the token pair, which is the actual defect.

Verification

• No raw text-emerald-500/text-rose-500 remains in any of the three files; exactly one SuccessBadge definition now exists in the app.
• No new type errors: 34 before, 34 after — every one pre-existing on clean main (a stale local ui-kit build reporting a compact prop mismatch, including in a file I touched; I verified the count against a clean checkout rather than assume).
• eslint on the committed blobs: 0 errors. prettier --check: clean.
• Rebased onto a main that moved 3 commits mid-work; pushed at behind: 0.

[superagent-security]

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.85%. Comparing base (ff38590) to head (bc4d7c9).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6511   +/-   ##
=======================================
  Coverage   97.85%   97.85%           
=======================================
  Files         174      174           
  Lines       22196    22196           
  Branches     8798     8798           
=======================================
  Hits        21721    21721           
  Misses         81       81           
  Partials      394      394           

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[loopover-orb]

Warning

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-17 17:31:40 UTC}

4 files · 1 AI reviewer · no blockers · CI green · clean

⏸️ Suggested Action - Manual Review

• Touches a guarded path — held for manual review: This PR changes guardrail-protected path(s): apps/ui/src/components/metagraphed/call-module-extrinsics-table.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/success-badge.tsx (matched apps/ui/**), apps/ui/src/routes/blocks.$ref.tsx (matched apps/ui/**), apps/ui/src/routes/extrinsics.index.tsx (matched apps/ui/**).

Review summary
This extracts the two byte-identical private `SuccessBadge` components into a single shared `apps/ui/src/components/metagraphed/success-badge.tsx` using the theme-adaptive `text-health-ok`/`text-health-down` tokens instead of raw `text-emerald-500`/`text-rose-500`, and fixes the self-inconsistent inline ternary in `blocks.$ref.tsx` (whose fail branch already used `text-health-down` but success stayed emerald). Both consuming files correctly import and use the new component with unchanged call sites, and the diff is a clean, low-risk color-token consolidation with no behavioral change to the ok/fail/em-dash logic.

Nits — 6 non-blocking

• No test coverage was added for the new shared `SuccessBadge` component, though the extraction is straightforward enough that this is low-risk.
• The magic numbers flagged in the JSDoc comment (52, 70, 6403) are just documentation references, not real code smells — safe to ignore.
• `blocks.$ref.tsx` intentionally keeps its own inline result rendering (spelling out "Success"/"Failed") rather than reusing `SuccessBadge`, which is reasonable but relies on a code comment rather than a shared component to keep the token pair in sync going forward.
• Consider whether `blocks.$ref.tsx`'s inline result-color logic could share a small `resultColorClass(success)` helper with `success-badge.tsx` to prevent future token drift between the two, since the PR description notes this is exactly how the emerald/health-down mismatch was introduced originally.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
• Touches a guarded path — held for manual review — A maintainer must review and merge this change.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ⚠️ Gate result — Not blocking (Advisory; not blocking this PR.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#6403
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: 172 registered-repo PR(s), 103 merged, 27 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	luciferlive112116; Gittensor profile; 172 PR(s), 27 issue(s).

Review context

• Author: luciferlive112116
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, JavaScript, MDX, Rust, TypeScript
• Official Gittensor activity: 172 PR(s), 27 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Keep the PR focused and include validation evidence before maintainer review.

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