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

[RealDiligent]

Closes #8167

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), not forced onto a wrong token. 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> now reports 0 no-restricted-syntax; tsc --noEmit, prettier --check, and the existing vitest suite are clean (the 4 pre-existing stake-unstake-modal/take-management-modal focus-test failures reproduce on main unchanged — jsdom/Sheet, unrelated to this diff).

What changed, by category

Text sizes → mg-type-* (23 sites). Per the eslint message, dropping the now-redundant font-mono where the token supplies it:

• sans <12px prose/labels → mg-type-caption (incidents-timeline, api-drawer, api-keys-manager, api-source-footer, app-shell, author-share-panel, neighbor-compare, activity-heatmap, uptime-timeline tooltip).
• non-uppercase mono numeric/tabular → mg-type-data-sm (coverage-matrix, drift-activity, registry-depth, schema-drift-matrix, uptime-timeline, activity-heatmap legend) — the nearest non-uppercase mono step (micro would force uppercase onto numbers).
• ⚠️ User-visible note (same as fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #8177): this homogenizes a few previously-differentiated one-off sizes (9/9.5/10/11px) onto the scale — the batch's explicit intent.

<ExternalLink bare> (6 sites) + 1 documented residual. GitHub/Discord/RSS icons, footer openapi, the API-status link, and api-drawer's "Open raw" icon → <ExternalLink bare> (the icon-only opt-in prop #8177 added), preserving their exact rendering while routing through safeExternalUrl. The schema-drift-matrix evidence link keeps its raw anchor (documented eslint-disable) because it needs onClick stopPropagation on a clickable row, which <ExternalLink> doesn't forward.

<Panel flush> (1) + glass tier (1).

• drift-activity's hand-rolled tablist shell → <Panel as="div" flush>, the same recipe fix(ui-kit): ratchet-clean src/components (16/19 files, 38/43 violations) #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.
• account-history-chart's bg-card/95 KPI shell → .mg-glass (its exact 95% translucency tier).

Documented eslint-disable for genuinely-missing tokens (6+2+1+1):

• 6× heatmap/mosaic per-cell rounded-[1px]/[2px] — CONTRIBUTING's documented viz residual (the smallest named step, rounded/4px, would materially change these dense grids).
• 2× 14px block-number displays in live-block-rail — no mg-type-body utility exists (--mg-type-body is a reserved CSS var, not a class).
• 1× the Design tokens 3/5: surface-translucency tiers for bg-card/NN glass surfaces #7842 bg-card/80 toggle track (no clean glass tier — already documented in-file).
• 1× the schema-drift evidence link (onClick, above).

Note on the ui-kit dist

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

[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.82%. Comparing base (2865cb9) to head (1bd5337).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8181   +/-   ##
=======================================
  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]

Warning

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-26 00:31:44 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, low-risk styling migration converting arbitrary Tailwind text sizes to `mg-type-*` tokens and raw `<a target="_blank">` to `<ExternalLink bare>` across 17 apps/ui files, mirroring the already-merged #8177 recipe for packages/ui-kit. The ExternalLink swaps correctly preserve `safeExternalUrl` filtering by passing raw hrefs into the component, and the one residual raw anchor (schema-drift-matrix.tsx) is justified since ExternalLink doesn't forward onClick and the link needs stopPropagation. All flagged eslint-disable residuals are documented with rationale per the repo's stated convention, and CI (lint/typecheck/format/tests) is green on this commit.

Nits — 7 non-blocking

• No test files were touched for a 17-file batch, but this is a pure class-name/component-swap refactor with no behavioral logic change, so the absence of new tests is low-risk rather than a coverage gap.
• app-shell.tsx is already ~644 lines (pre-existing, not grown meaningfully by this diff) — worth flagging for a future split but not this PR's concern.
• The mg-type-caption homogenization (collapsing 9/9.5/10/11px variants onto one token) is explicitly called out by the author as an intentional, user-visible size change — worth confirming reviewers are fine with the visual drift it causes in dense rows like uptime-timeline and coverage-matrix.
• Per CONTRIBUTING.md's one-way ratchet rule, if any of these 17 files now hit 0 no-restricted-syntax warnings they should be added to RATCHETED_DIRS in this same PR, but the description explicitly defers that to a later batch — confirm that's intentional and not an oversight given the ratchet's stated policy.
• Verify RATCHETED_DIRS truly excludes all 17 touched files for this PR's stated batch strategy (1/5), since a partially-clean directory left un-ratcheted contradicts the CONTRIBUTING.md 'don't leave a clean directory un-ratcheted' guidance.
• 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	#8167
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: 329 registered-repo PR(s), 137 merged, 37 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	RealDiligent; Gittensor profile; 329 PR(s), 37 issue(s).

Linked issue satisfaction

Addressed
The diff systematically converts raw text-size arbitrary values to mg-type-* tokens, raw <a target="_blank"> to <ExternalLink>, and hand-rolled card divs (e.g., drift-activity's tablist) to <Panel>, matching the issue's per-message fix mapping, with documented eslint-disable residuals for the few cases lacking a token equivalent per the issue's own 'flag, don't invent' clause. It also correctly av

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: not available
• Official Gittensor activity: 329 PR(s), 37 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.

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

[loopover-orb]

This pull request changes UI/visual code but its screenshot evidence is incomplete. Every required viewport × theme combination needs its own before/after image pair in a labeled table row (e.g. "Desktop · Light | before | after"). Still missing: Desktop · Light, Desktop · Dark, Tablet · Light, Tablet · Dark, Mobile · Light, Mobile · Dark.

Please resubmit with the remaining rows filled in.

See https://github.com/JSONbored/metagraphed/blob/main/.claude/skills/metagraphed/SKILL.md for the exact format and examples. This is an automated maintenance action.