fix(ui): ratchet-clean apps/ui components batch 1/5 (17 files, 43 violations) by RealDiligent · Pull Request #8186 · JSONbored/metagraphed

RealDiligent · 2026-07-26T00:38:45Z

Re-open of #8181 (gate one-shot-closed it for a missing screenshot table — code was no blockers · CI green · clean). Same commit, now with the required 12-image table below.

Mirrors the recipe merged in #8177 (packages/ui-kit) for the apps/ui half. Every no-restricted-syntax warning in the 17 listed files is converted to its named token per the eslint message; the handful with no existing token equivalent are documented eslint-disable (per #8172's "flag, don't invent ad hoc" guidance). This batch does not touch RATCHETED_DIRS — per the issue, that belongs to whichever batch clears the last file in src/components/metagraphed/**.

npx eslint <each file> reports 0 no-restricted-syntax; tsc --noEmit, prettier --check, and vitest are clean (the 4 pre-existing stake-unstake-modal/take-management-modal focus failures reproduce on main unchanged — jsdom/Sheet, unrelated).

What changed

23 text snaps → mg-type-*: sans <12px → mg-type-caption; non-uppercase mono numeric → mg-type-data-sm (nearest non-uppercase mono; micro would force uppercase onto numbers), dropping the now-redundant font-mono. ⚠️ Homogenizes a few one-off sizes onto the scale — the batch's intent, same as fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #8177.
6× <ExternalLink bare> (GitHub/Discord/RSS/openapi/api/raw icons+links) — the icon-only opt-in prop fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #8177 added; preserves exact rendering while routing through safeExternalUrl. schema-drift's evidence link keeps its raw anchor (documented) because it needs onClick stopPropagation, which <ExternalLink> can't forward.
1× <Panel flush> (drift-activity tablist, fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #8177's ActionBar recipe) — ⚠️ Panel's default rounded replaces rounded-md (2px corner tightening); 1× bg-card/95 → .mg-glass (its exact 95% tier).
Documented eslint-disable for genuinely-missing tokens: 6 heatmap rounded-[1px]/[2px] micro-radii (CONTRIBUTING's viz residual), 2 text-[14px] block numbers (no mg-type-body utility), the Design tokens 3/5: surface-translucency tiers for bg-card/NN glass surfaces #7842 bg-card/80 toggle, and the onClick evidence link.

ui-kit dist

Uses <ExternalLink bare> (added to ui-kit source in #8177). dist/index.d.ts is gitignored and rebuilt in CI, so apps/ui typechecks against fresh types — no dist changes committed here.

Screenshots

Representative changed view (homepage — the touched app-shell nav/footer is global). The token snaps are ≤2px and the ExternalLink bare / glass-tier swaps are visual no-ops, so before/after are intentionally near-identical (the proof of no regression).

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

…lations) Converts each no-restricted-syntax violation to its named token per the eslint message, mirroring the recipe merged in JSONbored#8177 for packages/ui-kit: - text-[9-13px] one-offs -> mg-type-caption / mg-type-data-sm (+ the existing mg-type-micro/label idioms), dropping the now-redundant font-mono where the token supplies it. Non-uppercase mono numeric sites (uptime-timeline, coverage/registry/schema-drift) snap to mg-type-data-sm (nearest non-uppercase mono step); sans <12px prose/labels snap to mg-type-caption. This homogenizes a few previously-differentiated sizes onto the scale -- the batch's explicit intent, same as JSONbored#8177. - account-history-chart's bg-card/95 KPI shell -> .mg-glass (its exact 95% translucency tier, packages/ui-kit styles.css). - drift-activity's hand-rolled tablist shell -> <Panel as="div" flush>, same recipe JSONbored#8177 used for ActionBar/SegmentedToggle. As there, Panel's default `rounded` replaces the original `rounded-md` (a subtle 2px corner tightening on this small toggle). - 6 GitHub/Discord/RSS/openapi/api/raw external links -> <ExternalLink bare> (the icon-only opt-in prop JSONbored#8177 added), preserving their exact rendering while routing through safeExternalUrl; the schema-drift evidence link keeps its raw anchor (documented) because it needs onClick stopPropagation, which <ExternalLink> doesn't forward. Genuinely-missing-token residuals are documented eslint-disable, not forced onto a wrong token (per JSONbored#8172's own guidance): the heatmap/mosaic per-cell rounded-[1px]/[2px] micro-radii (CONTRIBUTING's documented viz residual -- the smallest named step, rounded/4px, would materially change these grids), the two 14px block-number displays (no mg-type-body utility exists), and the JSONbored#7842 bg-card/80 toggle track (no clean glass tier). This batch does not touch RATCHETED_DIRS (per the issue -- the ratchet-list update belongs to whichever batch clears the last file in the directory). Closes JSONbored#8167

superagent-security · 2026-07-26T00:39:34Z

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

loopover-orb · 2026-07-26T00:55:23Z

Warning

⏸️ LoopOver review result - manual review recommended

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

17 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/account-history-chart.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/analytics/drift-activity.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/analytics/registry-depth.tsx (matched apps/ui/**), and 12 more.

Review summary
Mechanical lint-ratchet PR converting `no-restricted-syntax` violations (raw `text-[Npx]`, `font-mono` micro-sizes, bare `<a target=_blank>`, one raw `rounded-md`/`bg-card/95` card shell) to the established `mg-type-*` tokens, `<ExternalLink bare>`, and `<Panel>`/`.mg-glass` across 17 apps/ui files, mirroring the #8177 recipe for packages/ui-kit. The `<ExternalLink>` swaps correctly drop the now-redundant inline `safeExternalUrl()` wraps (the component applies it internally per the established pattern), and the schema-drift-matrix evidence link keeps its raw `<a>` with a documented eslint-disable because it needs `onClick` stopPropagation that `<ExternalLink>` can't forward. All changes are style-token substitutions with no logic touched; CI is green on this commit.

Nits — 8 non-blocking

Several conversions drop the explicit `font-mono` alongside the size token (e.g. drift-activity.tsx DriftRow, uptime-timeline.tsx, registry-depth.tsx QueueRow, coverage-matrix.tsx CompletenessChip, schema-drift-matrix.tsx DriftTile) — the PR description flags this homogenization explicitly, but worth a second look that `mg-type-data`/`mg-type-data-sm` genuinely carry the monospace family everywhere it's relied on for numeric alignment.
Zero test changes across 17 files, but this is a pure class/token substitution with no behavioral change, so that's expected rather than a gap.
app-shell.tsx is ~644 lines against the repo's own 400-line file-size guidance — pre-existing, not introduced by this diff, but a good candidate to flag for a future split.
No manual before/after screenshot table is visible in the excerpted PR body content shown here; per this repo's automated capture pipeline, that alone doesn't block merge, so this is a neutral observation only.
Confirm `mg-type-data`/`mg-type-data-sm` token definitions in styles.css actually set a monospace font-family so the dropped explicit `font-mono` doesn't silently regress alignment on the numeric displays it was removed from.
Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
Possible screenshot-table issue: pair 1 — Advisory only — verify the screenshot-table images against the stated change before deciding.
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	#8167
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: 328 registered-repo PR(s), 136 merged, 37 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	RealDiligent; Gittensor profile; 328 PR(s), 37 issue(s).

Linked issue satisfaction

Addressed
The diff systematically converts raw arbitrary-value Tailwind classes to the named design tokens/primitives across all 17 listed files (mg-type-* for text sizes, ExternalLink for bare anchors, Panel/mg-glass for card shells), with genuinely-missing-token cases explicitly flagged via documented eslint-disable comments per the issue's own fallback instruction, and explicitly avoids touching RATCHETE

Review context

Author: RealDiligent
Role context: outside_contributor
Public audience mode: oss maintainer
Lane context: Repository is configured for direct PR review.
Public profile languages: Python, Ruby, TypeScript, Svelte, Cuda, JavaScript, Markdown, MDX
Official Gittensor activity: 328 PR(s), 37 issue(s).
Related work: Titles/paths share 11 meaningful terms. (PR #8191)
Related work: Titles/paths share 14 meaningful terms. (PR #8192, PR #8190)

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 /}	_{diff /}
`/`	mobile	_{before / (mobile)}	_{after / (mobile)}	_{diff / (mobile)}

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy · Diff highlights exactly what changed.

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

…lations) (#8191) Closes #8168 Converts every `no-restricted-syntax` design-guardrail warning in the 17 listed `src/components/metagraphed/**` files to its named token, following the recipe merged in #8177 (packages/ui-kit) and mirrored by #8186 (batch 1). Zero behavioral change — the touched sizes are homogenized onto the type scale (≤2px snaps), matching #8177's intent. - 41 text snaps → `mg-type-*`: sans <12px → `mg-type-caption`; non-uppercase mono numeric → `mg-type-data`/`mg-type-data-sm` (nearest mono step), dropping the now-redundant `font-mono`/`leading-relaxed`. - 1 radius: `rounded-[1px]` → `rounded` (base; `rounded-sm` is off-scale). - 1 external link: the standalone "open" anchor → `<ExternalLink bare>` (the icon-only opt-in #8177 added), routing through `safeExternalUrl` with identical rendering. - 1 chip: dropped an `!text-[10px]` override so the cluster uses the Chip primitive's own size, matching the sibling overflow chip. Five sites have no token/primitive equivalent and carry a documented `eslint-disable` (per #8172's flag-don't-invent guidance): - 2× `scroll-mt-32` — anchor scroll-margin, not layout spacing; the guardrail's `mt` matcher flags it and no on-scale step equals 8rem. - 1× 20px mono latency stat — the scale tops out at `mg-type-data` (11px). - 1× the Open-URL anchor inside a Radix `<TooltipTrigger asChild>` — must stay a raw `<a>` because `<ExternalLink>` has no `forwardRef`. - 1× the snippet language switcher (`role="tablist"`) — a segmented control, not a card shell, so `<Panel>` would impose card semantics. This batch does not touch `RATCHETED_DIRS` — that belongs to whichever batch clears the last file in `src/components/metagraphed/**`. `npx eslint <each file>` reports 0 `no-restricted-syntax`; `tsc --noEmit`, `prettier --check`, and `vitest run src/components/metagraphed` (180 tests) are clean.

RealDiligent requested a review from JSONbored as a code owner July 26, 2026 00:38

github-actions Bot deployed to preview/pr-8186 July 26, 2026 00:41 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 RealDiligent Jul 26, 2026

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

philluiz2323 mentioned this pull request Jul 26, 2026

fix(ui): ratchet-clean apps/ui components batch 2/5 (17 files, 47 violations) #8191

Merged

loopover-orb Bot mentioned this pull request Jul 26, 2026

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

Merged

JSONbored approved these changes Jul 26, 2026

View reviewed changes

JSONbored merged commit d944470 into JSONbored:main Jul 26, 2026
18 checks passed

loopover-orb Bot mentioned this pull request Jul 26, 2026

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): ratchet-clean apps/ui components batch 1/5 (17 files, 43 violations)#8186

fix(ui): ratchet-clean apps/ui components batch 1/5 (17 files, 43 violations)#8186
JSONbored merged 1 commit into
JSONbored:mainfrom
RealDiligent:feat/design-tokens-ratchet-apps-ui-batch1-8167

RealDiligent commented Jul 26, 2026

Uh oh!

superagent-security 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

RealDiligent commented Jul 26, 2026

What changed

ui-kit dist

Screenshots

Uh oh!

superagent-security Bot commented Jul 26, 2026

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

loopover-orb Bot commented Jul 26, 2026 •

edited

Loading