fix(ui): swap raw one-off values for design tokens in metagraphed components batch 4/5 by rsnetworkinginc · Pull Request #8192 · JSONbored/metagraphed

rsnetworkinginc · 2026-07-26T04:35:20Z

design-tokens: ratchet-clean apps/ui components batch 4/5

Converts 35 of the 39 no-restricted-syntax Bone & Ink violations across the 17 files in this batch to the matching primitive/token per each eslint message, with zero visual/behavioral change intended. The remaining 4 are documented residuals (see "Deliberately left" below).

What was swapped, by fix type

Bare arbitrary text sizes → mg-type-* utilities / reserved-scale vars (31 sites)

Plain-sans micro text (text-[10px]/text-[11px], no font-mono) → mg-type-caption (12px) — the smallest sans step on the scale; same sub-2px normalization tolerance batch 5/5 (fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5 #8183) established. Applies to the search-box result subtitle, settings-popover hints/descriptions and density/theme segmented buttons, the shortcuts-popover tooltip, the Delegate pills (sponsored-validator-callout, subnet-validators-preview), the stake-unstake-modal indexing hint, states.tsx's Retry / Open API URL / EmptyState action buttons, registry-empty's freshness + verify paragraphs, both subnet-compare-drawer controls, the health-matrix and profile-panel tooltips, the price-ticker items, the priority-highlights hint, and the profile-panel lineage pill / provider rows / "No ownership keys recorded."
Mono-context sites → mg-type-data-sm (10px mono), dropping the now-redundant font-mono: status-diagnostics' classification-mix chips (text-[9px]), health-matrix netuid cell numbers (text-[9px], keeps font-semibold leading-none tabular-nums tracking-tight), and subnet-masthead's uptime-delta chip + curation-level span (both text-[9.5px]).
Profile-panel's 2-char provider-initials chip (font-mono text-[9px] uppercase) → mg-type-micro — the canonical uppercase-mono idiom at 9.5px.
font-display text-[14px] headline figure (subnet-profile-panel) → inline style={{ fontSize: "var(--mg-type-body)" }} and font-display text-[15px] value line (subnet-priority-highlights) → inline style={{ fontSize: "var(--mg-type-body-lg)" }} — exact-match against the already-defined-but-unconsumed reserved scale steps (no .mg-type-body* utility class exists), the same recipe fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5 #8183 used for subnets-highlights' 15px value.

Hand-rolled rounded border bg-card shells → <Panel> (2 sites)

Both of stake-amount-input's segmented controls (stake/unstake action tablist, TAO/alpha unit tablist) now wrap in <Panel as="div" role="tablist" flush bodyClassName="inline-flex items-center !p-0.5"> — byte-for-byte the recipe fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5 #8183 established for take-management-modal's direction toggle (the identical original classes).

Raw <a target="_blank"> → <ExternalLink> from @jsonbored/ui-kit (2 sites)

states.tsx's "Open API URL" action moves onto <ExternalLink bare> (keeps its custom icon/classes pixel-identical; safeUrl is already absolute).
subnet-masthead's icon-only resource-rail anchors move onto <ExternalLink bare> behind a wrapper <span className="inline-flex"> that carries the Radix TooltipTrigger asChild Slot ref/props, since ExternalLink doesn't forward refs to its anchor — same wrapper recipe as batch 2/5 (design-tokens: ratchet-clean apps/ui components batch 2/5 (17 files, 47 violations) #8168)'s icon-only row action. The unsafe-href fallback branch keeps its existing plain <span>.

RATCHETED_DIRS intentionally not touched — src/components/metagraphed/** still has other violating files outside this batch (issue req 3).

Deliberately left (documented residuals, still warn-tier)

subnets-compare-drawer.tsx:232/234/250 — sticky corner-cell z-[1]/z-[2]: CONTRIBUTING.md's one standing exception to the --mg-z-* scale (local table stacking context, not a global layer; the sites even carry the in-code #7841 comment). fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5 #8183 made the identical call for the sibling validators-compare-drawer.tsx and deliberately left this file's pattern untouched; there is no --mg-z-* token for micro-steps 1/2, so converting would fight the documented intent.
states/registry-empty.tsx:141 — the "evidence & sources" anchor stays raw (now with an in-code comment): its evidenceHref is a same-origin relative artifact path (/metagraph/gaps.json on the gaps page, /metagraph/surfaces.json on surfaces), and <ExternalLink>'s safeExternalUrl rejects relative URLs outright — converting would render the "blocked unsafe URL" fallback and break the link. Flagged here per the issue's req-2 escape hatch (no matching primitive for a same-origin new-tab artifact link).

Verification

npx eslint on all 17 files: 39 warnings → 4 (the documented residuals above), 0 errors
npx tsc --noEmit (npm run typecheck): clean
npx prettier --check on all touched files: clean
npx vitest run: 191 files, 1460 tests, all pass
npm run build (vite build): succeeds
git diff --check: clean

Before/after screenshots

Captured per the Phase C2 contract with apps/ui/tests/e2e/capture-pr-screenshots.ts (plus the same script's viewport/theme matrix driven through the popover/typed-search/forced-error/drawer interactions it has no flags for): fixed viewports only (desktop 1280×800, tablet 768×1024, mobile 375×812), both themes forced via mg-theme, before = merge-base 6a156b4 (origin/main), after = this branch. One table per touched surface; every touched component that renders reachably in the app appears in at least one table.

`/` — home, subnet price ticker

Touched component(s) in frame: subnet-price-ticker.tsx (the marquee strip under the header)

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

`/subnets/74` — page top, sponsored callout + top validators

Touched component(s) in frame: sponsored-validator-callout.tsx, subnet-validators-preview.tsx (Delegate pills)

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

`/subnets/74` — subnet masthead

Touched component(s) in frame: subnet-masthead.tsx (resource links rail, uptime-delta chip, curation-level span)

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

`/subnets/74` — priority highlights strip

Touched component(s) in frame: subnet-priority-highlights.tsx

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

`/subnets/74` — subnet profile panel

Touched component(s) in frame: subnet-profile-panel.tsx (field tiles, lineage pill, top-providers rows, ownership block)

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

`/subnets/74` — compare drawer open

Touched component(s) in frame: subnet-compare-drawer.tsx (trigger pill + drawer compare form)

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

`/health` — subnet health matrix

Touched component(s) in frame: subnet-health-matrix.tsx (netuid cell numerals)

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

`/status` — Source health table

Touched component(s) in frame: status-diagnostics.tsx (classification-mix chips in the provider rows)

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

`/subnets/1023` — netuid with no published profile artifact (natural error state)

Touched component(s) in frame: states.tsx (ErrorState heading, detail, and Retry action)

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

Settings popover (opened on `/`)

Touched component(s) in frame: settings-popover.tsx (theme/density segmented buttons, palette descriptions, hint paragraphs)

Viewport · Theme	Before	After
Desktop · Light	_before	_after
Desktop · Dark	_before	_after
Tablet · Light	_before	_after
Tablet · Dark	_before	_after

Mobile omitted: the header settings trigger collapses into the mobile menu at this viewport, so the popover has no standalone trigger to open.

Keyboard-shortcuts trigger tooltip/popover (opened on `/`)

Touched component(s) in frame: shortcuts-popover.tsx

Viewport · Theme	Before	After
Desktop · Light	_before	_after
Desktop · Dark	_before	_after
Tablet · Light	_before	_after
Tablet · Dark	_before	_after

Mobile omitted: the keyboard-shortcuts trigger (and its hover tooltip) has no pointer-hover affordance on a touch viewport and is not rendered there.

`/agents` — registry search with results

Touched component(s) in frame: search-box.tsx (result subtitles)

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

`/gaps` — filtered-to-empty registry state

Touched component(s) in frame: states/registry-empty.tsx (freshness + verify paragraphs; residual evidence anchor)

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

Not shown above: stake-amount-input.tsx and stake-unstake-modal.tsx render only inside the wallet-gated stake flow (a connected extension account is required before the amount step or the post-broadcast status view mounts), which a headless capture cannot exercise -- their swaps are covered by the eslint/tsc/vitest gates, and the <Panel> recipe used is byte-for-byte the one already merged (and screenshot-reviewed) for take-management-modal in #8183. subnets-compare-drawer.tsx carries no code change in this PR (residual-only file, see "Deliberately left").

Closes #8170

…h 4/5 Converts 35 of the 39 no-restricted-syntax violations (arbitrary text-[Npx] sizes, two hand-rolled card shells, and raw <a target=_blank> anchors) across the 17 files in this batch to the matching primitive/token, no visual/behavioral change intended: - Plain-sans micro text (10-11px, no font-mono) snaps to mg-type-caption (12px) -- the smallest sans step on the scale, same sub-2px normalization tolerance JSONbored#8183 established. - Mono-context 9/9.5px sites move onto mg-type-data-sm, dropping the now-redundant font-mono; the profile panel 2-char provider-initials chip takes mg-type-micro (the canonical uppercase-mono idiom). - The two font-display headline figures (14px profile stat, 15px priority-highlight value) get exact-match inline styles against the reserved --mg-type-body/--mg-type-body-lg vars -- no utility class exists at those steps; same recipe JSONbored#8183 used for subnets-highlights. - Both stake-amount-input segmented controls wrap in <Panel> with the flex layout moved to bodyClassName -- byte-for-byte the recipe JSONbored#8183 established for take-management-modal. - states.tsx Open API URL action and subnet-masthead resource-rail anchors move onto <ExternalLink bare>; the masthead ones sit behind a wrapper span that carries the Radix TooltipTrigger Slot ref, since ExternalLink does not forward refs (same recipe as JSONbored#8168). Deliberately left, per the issue req-2 escape hatch: - subnets-compare-drawer.tsx sticky-cell z-[1]/z-[2] (3 sites) -- CONTRIBUTING.md documents this exact pattern as the one standing exception to the --mg-z-* scale; JSONbored#8183 made the identical call for the sibling validators-compare-drawer. - registry-empty.tsx evidence anchor -- its evidenceHref is a same-origin relative artifact path, which ExternalLink's safeExternalUrl rejects outright; converting would break the link. Closes JSONbored#8170.

superagent-security · 2026-07-26T04:36:24Z

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

codecov · 2026-07-26T04:43:06Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.82%. Comparing base (6a156b4) to head (a699cb8).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8192   +/-   ##
=======================================
  Coverage   97.82%   97.82%           
=======================================
  Files         415      415           
  Lines       28893    28893           
  Branches    10850    10850           
=======================================
  Hits        28265    28265           
  Misses        141      141           
  Partials      487      487

🚀 New features to boost your workflow:

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

loopover-orb · 2026-07-26T04:52:43Z

Warning

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-26 05:28:39 UTC}

16 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/search-box.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/settings-popover.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/shortcuts-popover.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/sponsored-validator-callout.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/stake-amount-input.tsx (matched apps/ui/**), and 11 more.

Review summary
This is a mechanical class-swap of arbitrary Tailwind text-size utilities to the shared `mg-type-*` design-token scale across 17 metagraphed components, with two behavioral-looking changes riding along: subnet-masthead.tsx swaps a raw `<a>` for a wrapped `<ExternalLink bare>` (same recipe cited as used in batch 2/5), and stake-amount-input.tsx swaps two raw tablist `<div>`s for `<Panel as="div" flush bodyClassName="...!p-0.5">`. Both are plausible drop-in wrappers per the PR's own precedent claims but neither `ExternalLink`'s prop contract (`bare`, `ariaLabel`) nor `Panel`'s (`as`, `flush`, `bodyClassName`) is visible in the provided diff/file content, so their correctness can't be independently confirmed here — CI passing is the only available signal. The `mg-type-caption`/`mg-type-data-sm`/`mg-type-micro` substitutions themselves are straightforward 1:1 class renames matching each site's stated px-value mapping and introduce no visible logic change.

Nits — 7 non-blocking

subnet-masthead.tsx wraps `ExternalLink` in a `<span className="inline-flex">` to carry the Radix Slot ref since ExternalLink allegedly doesn't forward refs — worth double-checking `ExternalLink`'s actual forwardRef status in `@jsonbored/ui-kit` rather than trusting the inline comment's claim, since a wrong assumption here would silently break tooltip positioning/focus.
stake-amount-input.tsx's `bodyClassName="inline-flex items-center !p-0.5"` uses an `!important` override, which suggests `Panel`'s default body padding fights the tight `p-0.5` this tablist needs — consider whether `Panel` should expose a lower-specificity padding prop instead of leaning on `!` overrides.
No test changes accompany this batch, consistent with a pure class/token-swap PR, but the two structural swaps (ExternalLink wrapper, Panel wrapper) are exactly the kind of change a snapshot/DOM test would have caught if something subtly changed (e.g. missing `rel="noopener noreferrer"` if ExternalLink doesn't set it by default).
Confirm `ExternalLink`'s default `rel`/`target` behavior in ui-kit still matches the previous explicit `target="_blank" rel="noopener noreferrer"` on the swapped anchors in subnet-masthead.tsx and states.tsx, since that's a security-relevant attribute (tabnabbing protection) that's now implicit.
Verify `Panel`'s `bodyClassName` merge order actually allows `!p-0.5` to win without depending on Tailwind's arbitrary `!` important flag being enabled in this build's config.
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	#8170
Related work	⚠️ 2 scoped overlaps	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: 62 registered-repo PR(s), 27 merged, 3 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	rsnetworkinginc; Gittensor profile; 62 PR(s), 3 issue(s).

Linked issue satisfaction

Partially addressed
The PR fixes the large majority of the 39 listed violations across all 17 files using the mapped tokens/primitives, but by its own description leaves 4 residuals unaddressed (e.g. the registry-empty.tsx relative-URL anchor) and the diff doesn't show evidence that all deliverables (tsc, prettier, vitest, before/after screenshots) were actually completed, which the issue requires to ship together.

Review context

Author: rsnetworkinginc
Role context: outside_contributor
Public audience mode: oss maintainer
Lane context: Repository is configured for direct PR review.
Public profile languages: TypeScript
Official Gittensor activity: 62 PR(s), 3 issue(s).
Related work: Titles/paths share 14 meaningful terms. (PR #8190)
Related work: Titles/paths share 11 meaningful terms. (PR #8191, PR #8186)

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.

Scroll preview

Route	Before (production)	After (this PR's preview)
`/`	_{before / (scroll)}	_{after / (scroll)}

A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show.

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

rsnetworkinginc requested a review from JSONbored as a code owner July 26, 2026 04:35

github-actions Bot deployed to preview/pr-8192 July 26, 2026 04:37 View deployment

loopover-orb Bot added the gittensor:bug Gittensor-scored bug fix or unsolicited PR — scores a 0.05x multiplier. label Jul 26, 2026

loopover-orb Bot assigned rsnetworkinginc Jul 26, 2026

loopover-orb Bot added the manual-review Gittensor contributor context label Jul 26, 2026

JSONbored approved these changes Jul 26, 2026

View reviewed changes

JSONbored merged commit e69f850 into JSONbored:main Jul 26, 2026
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): swap raw one-off values for design tokens in metagraphed components batch 4/5#8192

fix(ui): swap raw one-off values for design tokens in metagraphed components batch 4/5#8192
JSONbored merged 1 commit into
JSONbored:mainfrom
rsnetworkinginc:ui-design-tokens-batch4-8170

rsnetworkinginc commented Jul 26, 2026

Uh oh!

superagent-security Bot commented Jul 26, 2026

Uh oh!

codecov Bot commented Jul 26, 2026

Uh oh!

loopover-orb Bot commented Jul 26, 2026 •

edited

Loading

⏸️ LoopOver review result - manual review recommended

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rsnetworkinginc commented Jul 26, 2026

design-tokens: ratchet-clean apps/ui components batch 4/5

What was swapped, by fix type

Deliberately left (documented residuals, still warn-tier)

Verification

Before/after screenshots

/ — home, subnet price ticker

/subnets/74 — page top, sponsored callout + top validators

/subnets/74 — subnet masthead

/subnets/74 — priority highlights strip

/subnets/74 — subnet profile panel

/subnets/74 — compare drawer open

/health — subnet health matrix

/status — Source health table

/subnets/1023 — netuid with no published profile artifact (natural error state)

Settings popover (opened on /)

Keyboard-shortcuts trigger tooltip/popover (opened on /)

/agents — registry search with results

/gaps — filtered-to-empty registry state

Uh oh!

superagent-security Bot commented Jul 26, 2026

Uh oh!

codecov Bot commented Jul 26, 2026

Codecov Report

Uh oh!

loopover-orb Bot commented Jul 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⏸️ LoopOver review result - manual review recommended

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

`/` — home, subnet price ticker

`/subnets/74` — page top, sponsored callout + top validators

`/subnets/74` — subnet masthead

`/subnets/74` — priority highlights strip

`/subnets/74` — subnet profile panel

`/subnets/74` — compare drawer open

`/health` — subnet health matrix

`/status` — Source health table

`/subnets/1023` — netuid with no published profile artifact (natural error state)

Settings popover (opened on `/`)

Keyboard-shortcuts trigger tooltip/popover (opened on `/`)

`/agents` — registry search with results

`/gaps` — filtered-to-empty registry state

loopover-orb Bot commented Jul 26, 2026 •

edited

Loading