From 00092fe471bf6bc69361d273cfb073187a7562b0 Mon Sep 17 00:00:00 2001
From: philluiz2323 <philluiz2323@gmail.com>
Date: Sat, 25 Jul 2026 21:09:14 -0400
Subject: [PATCH] fix(ui): ratchet-clean apps/ui components batch 2/5 (17
 files, 47 violations)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../metagraphed/charts/latency-heatmap.tsx        | 14 +++++++-------
 .../metagraphed/charts/subnet-pulse-grid.tsx      |  4 ++--
 .../charts/validator-subnet-heatmap.tsx           |  6 +++---
 .../metagraphed/command-palette-body.tsx          |  6 +++---
 .../components/metagraphed/endpoint-card-list.tsx |  4 ++--
 .../metagraphed/endpoint-chip-cluster.tsx         |  2 +-
 .../metagraphed/endpoint-compare-panel.tsx        |  2 +-
 .../metagraphed/endpoint-detail-drawer.tsx        | 11 ++++++-----
 .../components/metagraphed/endpoint-kind-tabs.tsx |  2 +-
 .../src/components/metagraphed/endpoint-list.tsx  | 15 ++++++++-------
 .../metagraphed/endpoint-operational-list.tsx     |  6 ++++--
 .../components/metagraphed/endpoint-snippet.tsx   |  1 +
 .../metagraphed/endpoint-uptime-bar.tsx           |  2 +-
 .../components/metagraphed/endpoints-glance.tsx   |  2 +-
 .../metagraphed/endpoints-priority-strip.tsx      |  9 ++++++---
 .../components/metagraphed/entity-hover-card.tsx  |  2 +-
 .../src/components/metagraphed/evidence-panel.tsx | 12 +++++++-----
 17 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/apps/ui/src/components/metagraphed/charts/latency-heatmap.tsx b/apps/ui/src/components/metagraphed/charts/latency-heatmap.tsx
index 074c2bb732..de4571f96a 100644
--- a/apps/ui/src/components/metagraphed/charts/latency-heatmap.tsx
+++ b/apps/ui/src/components/metagraphed/charts/latency-heatmap.tsx
@@ -184,7 +184,7 @@ export function LatencyHeatmap({ endpoints, minEndpoints = 1, maxProviders = 20
                           {k}
                         </span>
                       </TooltipTrigger>
-                      <TooltipContent side="top" className="text-[11px]">
+                      <TooltipContent side="top" className="mg-type-caption">
                         {KIND_HINT[k] ?? k}
                       </TooltipContent>
                     </Tooltip>
@@ -209,7 +209,7 @@ export function LatencyHeatmap({ endpoints, minEndpoints = 1, maxProviders = 20
                             {p}
                           </Link>
                         </TooltipTrigger>
-                        <TooltipContent side="right" className="text-[11px]">
+                        <TooltipContent side="right" className="mg-type-caption">
                           {p} · {total} endpoint{total === 1 ? "" : "s"}
                         </TooltipContent>
                       </Tooltip>
@@ -277,7 +277,7 @@ function Cell({ cell }: { cell: Cell }) {
           title={title}
           aria-label={ariaSummary}
           className={classNames(
-            "relative h-7 w-full rounded flex items-center justify-center text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-card",
+            "relative h-7 w-full rounded flex items-center justify-center mg-type-caption font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-card",
             tone,
           )}
         >
@@ -287,12 +287,12 @@ function Cell({ cell }: { cell: Cell }) {
           {cell.downCount > 0 || cell.warnCount > 0 ? (
             <span className="absolute top-0.5 right-0.5 flex items-center gap-0.5" aria-hidden>
               {cell.downCount > 0 ? (
-                <span className="inline-flex h-3 min-w-[12px] items-center justify-center rounded bg-health-down/95 px-0.5 text-[9px] font-mono leading-none text-paper">
+                <span className="inline-flex h-3 min-w-[12px] items-center justify-center rounded bg-health-down/95 px-0.5 mg-type-data-sm leading-none text-paper">
                   {cell.downCount}
                 </span>
               ) : null}
               {cell.warnCount > 0 ? (
-                <span className="inline-flex h-3 min-w-[12px] items-center justify-center rounded bg-health-warn/95 px-0.5 text-[9px] font-mono leading-none text-paper">
+                <span className="inline-flex h-3 min-w-[12px] items-center justify-center rounded bg-health-warn/95 px-0.5 mg-type-data-sm leading-none text-paper">
                   {cell.warnCount}
                 </span>
               ) : null}
@@ -363,7 +363,7 @@ function Cell({ cell }: { cell: Cell }) {
                         SN{n}
                       </Link>
                     </TooltipTrigger>
-                    <TooltipContent side="top" className="text-[11px]">
+                    <TooltipContent side="top" className="mg-type-caption">
                       Jump to SN{n} · {cell.kind} endpoints
                     </TooltipContent>
                   </Tooltip>
@@ -434,7 +434,7 @@ function LegendBucket({ cls, label, hint }: { cls: string; label: string; hint:
           {label}
         </span>
       </TooltipTrigger>
-      <TooltipContent side="top" className="text-[11px]">
+      <TooltipContent side="top" className="mg-type-caption">
         {hint}
       </TooltipContent>
     </Tooltip>
diff --git a/apps/ui/src/components/metagraphed/charts/subnet-pulse-grid.tsx b/apps/ui/src/components/metagraphed/charts/subnet-pulse-grid.tsx
index 373870fa82..3c8a181522 100644
--- a/apps/ui/src/components/metagraphed/charts/subnet-pulse-grid.tsx
+++ b/apps/ui/src/components/metagraphed/charts/subnet-pulse-grid.tsx
@@ -40,7 +40,7 @@ export function SubnetPulseGrid({ columns = 16 }: { columns?: number }) {
   }
 
   if (isError) {
-    return <div className="text-[11px] text-health-down">Couldn't load subnet pulse.</div>;
+    return <div className="mg-type-caption text-health-down">Couldn't load subnet pulse.</div>;
   }
 
   const subs = data?.data ?? [];
@@ -72,7 +72,7 @@ export function SubnetPulseGrid({ columns = 16 }: { columns?: number }) {
               <div className="font-display text-sm font-semibold text-ink-strong">
                 {s.name ?? `Subnet ${s.netuid}`}
               </div>
-              <div className="mt-0.5 text-[11px] text-ink-muted">health · {health}</div>
+              <div className="mt-0.5 mg-type-caption text-ink-muted">health · {health}</div>
             </TooltipContent>
           </Tooltip>
         );
diff --git a/apps/ui/src/components/metagraphed/charts/validator-subnet-heatmap.tsx b/apps/ui/src/components/metagraphed/charts/validator-subnet-heatmap.tsx
index 941c1188a6..7eb2c8aaa1 100644
--- a/apps/ui/src/components/metagraphed/charts/validator-subnet-heatmap.tsx
+++ b/apps/ui/src/components/metagraphed/charts/validator-subnet-heatmap.tsx
@@ -54,7 +54,7 @@ export function ValidatorSubnetHeatmap() {
     <Panel as="div" flush className="overflow-hidden">
       <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-2.5">
         <div className="mg-type-micro text-ink-muted">Validator × subnet · stake intensity</div>
-        <div className="flex flex-wrap items-center gap-2.5 font-mono text-[9.5px] text-ink-muted">
+        <div className="flex flex-wrap items-center gap-2.5 mg-type-data-sm text-ink-muted">
           <span>top {rows.length} validators · top 10 subnets each (server-capped)</span>
           <span className="inline-flex items-center gap-1">
             <span className="inline-block h-2.5 w-2.5 rounded bg-accent/20" />
@@ -75,7 +75,7 @@ export function ValidatorSubnetHeatmap() {
                 {netuids.map((n) => (
                   <th
                     key={n}
-                    className="border-b border-border px-1.5 py-2 text-[10px] tabular-nums text-ink-muted"
+                    className="border-b border-border px-1.5 py-2 mg-type-caption tabular-nums text-ink-muted"
                   >
                     {n}
                   </th>
@@ -117,7 +117,7 @@ export function ValidatorSubnetHeatmap() {
                                 )}
                               />
                             </TooltipTrigger>
-                            <TooltipContent side="top" className="text-[11px]">
+                            <TooltipContent side="top" className="mg-type-caption">
                               {summary}
                             </TooltipContent>
                           </Tooltip>
diff --git a/apps/ui/src/components/metagraphed/command-palette-body.tsx b/apps/ui/src/components/metagraphed/command-palette-body.tsx
index 339bc32d27..1081213875 100644
--- a/apps/ui/src/components/metagraphed/command-palette-body.tsx
+++ b/apps/ui/src/components/metagraphed/command-palette-body.tsx
@@ -666,7 +666,7 @@ export function CommandPaletteBody({ open, onOpenChange }: CommandPaletteProps)
                     <button
                       type="button"
                       onClick={() => setQ(s)}
-                      className="rounded-full border border-dashed border-ink-subtle bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-ink/30 transition-colors"
+                      className="rounded-full border border-dashed border-ink-subtle bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-ink/30 transition-colors"
                     >
                       {s}
                     </button>
@@ -725,7 +725,7 @@ export function CommandPaletteBody({ open, onOpenChange }: CommandPaletteProps)
                       <button
                         type="button"
                         onClick={() => setQ(r)}
-                        className="rounded-full border border-border bg-card px-2.5 py-1 text-[11px] text-ink hover:border-accent/40 hover:text-accent transition-colors"
+                        className="rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption text-ink hover:border-accent/40 hover:text-accent transition-colors"
                       >
                         {r}
                       </button>
@@ -742,7 +742,7 @@ export function CommandPaletteBody({ open, onOpenChange }: CommandPaletteProps)
                     <button
                       type="button"
                       onClick={() => setQ(s)}
-                      className="rounded-full border border-dashed border-ink-subtle bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-ink/30 transition-colors"
+                      className="rounded-full border border-dashed border-ink-subtle bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-ink/30 transition-colors"
                     >
                       {s}
                     </button>
diff --git a/apps/ui/src/components/metagraphed/endpoint-card-list.tsx b/apps/ui/src/components/metagraphed/endpoint-card-list.tsx
index 52e06825f1..964daabc76 100644
--- a/apps/ui/src/components/metagraphed/endpoint-card-list.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-card-list.tsx
@@ -60,7 +60,7 @@ export function EndpointCardList({
             <div className="mg-type-data min-w-0">
               {e.url ? (
                 <div className="flex items-center gap-1.5 min-w-0">
-                  <ExternalLink href={e.url} className="min-w-0 text-[11px]">
+                  <ExternalLink href={e.url} className="min-w-0 mg-type-caption">
                     {e.url}
                   </ExternalLink>
                   <CopyButton value={e.url} label="URL" compact />
@@ -69,7 +69,7 @@ export function EndpointCardList({
                 "—"
               )}
             </div>
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-ink-muted">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mg-type-caption text-ink-muted">
               {e.netuid != null ? (
                 <Link
                   to="/subnets/$netuid"
diff --git a/apps/ui/src/components/metagraphed/endpoint-chip-cluster.tsx b/apps/ui/src/components/metagraphed/endpoint-chip-cluster.tsx
index cbb08414c1..06e53778d1 100644
--- a/apps/ui/src/components/metagraphed/endpoint-chip-cluster.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-chip-cluster.tsx
@@ -55,7 +55,7 @@ export function EndpointChipCluster({ endpoint, poolsById, max = 3, className }:
   return (
     <div className={className ?? "flex flex-wrap items-center gap-1"}>
       {visible.map((c) => (
-        <Chip key={c.key} tone={c.tone} title={c.title} className="!text-[10px]">
+        <Chip key={c.key} tone={c.tone} title={c.title}>
           {c.label}
         </Chip>
       ))}
diff --git a/apps/ui/src/components/metagraphed/endpoint-compare-panel.tsx b/apps/ui/src/components/metagraphed/endpoint-compare-panel.tsx
index 3171d531b9..35486e2a92 100644
--- a/apps/ui/src/components/metagraphed/endpoint-compare-panel.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-compare-panel.tsx
@@ -135,7 +135,7 @@ function CompareColumn({
             <Link
               to="/providers/$slug"
               params={{ slug: endpoint.provider_slug }}
-              className="mg-focus-ring mt-1 inline-flex items-center gap-1 text-[11px] text-ink-muted hover:text-ink-strong"
+              className="mg-focus-ring mt-1 inline-flex items-center gap-1 mg-type-caption text-ink-muted hover:text-ink-strong"
             >
               <BrandIcon
                 url={provider?.website ?? provider?.homepage}
diff --git a/apps/ui/src/components/metagraphed/endpoint-detail-drawer.tsx b/apps/ui/src/components/metagraphed/endpoint-detail-drawer.tsx
index 0e0c00a2aa..c796a1e1c7 100644
--- a/apps/ui/src/components/metagraphed/endpoint-detail-drawer.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-detail-drawer.tsx
@@ -144,7 +144,7 @@ export function EndpointDetailDrawer({
               <div id={`latency-${endpoint.id}`} className="mg-label">
                 Latency trend
               </div>
-              <p className="mt-1 text-[11px] text-ink-muted">
+              <p className="mt-1 mg-type-caption text-ink-muted">
                 Seeded from server probe history when published; augmented with client-observed
                 samples as you monitor the endpoint.
               </p>
@@ -179,7 +179,7 @@ export function EndpointDetailDrawer({
                 <div key={`${p.t}-${index}`} className="min-w-0 border-l border-border pl-2">
                   <div className="mg-label">{index === 0 ? "Latest" : `Prior ${index}`}</div>
                   <div className="mt-1 mg-type-data text-ink-strong">{Math.round(p.v)}ms</div>
-                  <div className="mt-0.5 truncate font-mono text-[9px] text-ink-muted">
+                  <div className="mt-0.5 truncate mg-type-data-sm text-ink-muted">
                     {new Date(p.t).toLocaleString()}
                   </div>
                 </div>
@@ -240,7 +240,7 @@ export function EndpointDetailDrawer({
           </div>
 
           {rows.length === 0 ? (
-            <div className="rounded border border-dashed border-border/70 px-3 py-2 text-[11px] text-ink-muted">
+            <div className="rounded border border-dashed border-border/70 px-3 py-2 mg-type-caption text-ink-muted">
               {allRows.length === 0
                 ? "No incidents recorded for this endpoint in the retained window."
                 : "No incidents match the current filter."}
@@ -253,6 +253,7 @@ export function EndpointDetailDrawer({
                   <li
                     key={inc.id}
                     id={`incident-${inc.id}`}
+                    // eslint-disable-next-line no-restricted-syntax -- `scroll-mt-32` is anchor scroll-margin (8rem sticky-header clearance for deep-linked incidents), not layout spacing; the guardrail's `mt` matcher flags it as a false positive and no on-scale step equals 8rem
                     className="flex items-start gap-2 scroll-mt-32 rounded border border-border/60 bg-paper px-2 py-1.5 target:border-accent/60"
                   >
                     <span
@@ -283,7 +284,7 @@ export function EndpointDetailDrawer({
                         </span>
                       </div>
                       {inc.message ? (
-                        <div className="mt-0.5 truncate text-[11px] text-ink-muted">
+                        <div className="mt-0.5 truncate mg-type-caption text-ink-muted">
                           {inc.message}
                         </div>
                       ) : null}
@@ -307,7 +308,7 @@ export function EndpointDetailDrawer({
               })}
             </ol>
           )}
-          <p className="mt-2 text-[10px] text-ink-subtle-text">
+          <p className="mt-2 mg-type-caption text-ink-subtle-text">
             Incident intervals come from /api/v1/endpoint-incidents. Latency series merges published
             probe samples with locally-observed samples — no synthetic values are generated.
           </p>
diff --git a/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx b/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
index 1f128fa77c..bf773826ea 100644
--- a/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
@@ -49,7 +49,7 @@ export function EndpointKindTabs({ value, counts, onChange }: Props) {
             {count != null ? (
               <span
                 className={classNames(
-                  "rounded px-1 tabular-nums text-[10px]",
+                  "rounded px-1 tabular-nums mg-type-caption",
                   active ? "bg-paper/40 text-ink-strong" : "bg-surface/60 text-ink-muted",
                 )}
               >
diff --git a/apps/ui/src/components/metagraphed/endpoint-list.tsx b/apps/ui/src/components/metagraphed/endpoint-list.tsx
index e18ca01e33..80ed87a454 100644
--- a/apps/ui/src/components/metagraphed/endpoint-list.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-list.tsx
@@ -13,6 +13,7 @@ import {
   safeExternalUrl,
   CopyIconToggle,
   Sparkline,
+  ExternalLink,
 } from "@jsonbored/ui-kit";
 import { useCopy } from "@/hooks/use-copy";
 import { Panel } from "@/components/metagraphed/primitives";
@@ -204,7 +205,7 @@ function Row({
         </td>
       ) : null}
       <td className="px-4 py-2.5">
-        <div className="font-mono text-[11.5px] text-ink truncate max-w-[42ch]">{e.url ?? "—"}</div>
+        <div className="mg-type-data text-ink truncate max-w-[42ch]">{e.url ?? "—"}</div>
         {e.region ? <div className="mg-type-data-sm text-ink-muted mt-0.5">{e.region}</div> : null}
       </td>
       {showProvider ? (
@@ -278,6 +279,7 @@ function Row({
                   <TooltipTrigger asChild>
                     <a
                       href={safeUrl}
+                      // eslint-disable-next-line no-restricted-syntax -- must stay a raw <a>: it's the child of a Radix <TooltipTrigger asChild>, which clones it and injects a ref; <ExternalLink> is a plain function component (no forwardRef) so it can't receive that ref
                       target="_blank"
                       rel="noopener noreferrer"
                       aria-label="Open URL"
@@ -331,7 +333,7 @@ function MobileCard({
         </div>
         <HealthDot state={e.health} />
       </div>
-      <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 border-t border-border pt-2 text-[11px]">
+      <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 border-t border-border pt-2 mg-type-caption">
         {showProvider ? (
           <>
             <dt className="mg-type-micro text-ink-muted">Provider</dt>
@@ -376,14 +378,13 @@ function MobileCard({
             <CopyIconToggle copied={copied} /> copy
           </button>
           {safeUrl ? (
-            <a
+            <ExternalLink
               href={safeUrl}
-              target="_blank"
-              rel="noopener noreferrer"
+              bare
               className="inline-flex items-center gap-1 rounded-md border border-border bg-paper px-2 py-1 mg-type-micro text-ink-muted hover:text-ink-strong hover:border-accent/40"
             >
               open <ExternalLinkIcon className="size-3" />
-            </a>
+            </ExternalLink>
           ) : null}
         </div>
       ) : null}
@@ -406,7 +407,7 @@ function HeaderHint({ label, hint }: { label: string; hint: string }) {
           {label}
         </span>
       </TooltipTrigger>
-      <TooltipContent side="top" className="max-w-xs text-[11px] leading-relaxed">
+      <TooltipContent side="top" className="max-w-xs mg-type-caption">
         {hint}
       </TooltipContent>
     </Tooltip>
diff --git a/apps/ui/src/components/metagraphed/endpoint-operational-list.tsx b/apps/ui/src/components/metagraphed/endpoint-operational-list.tsx
index 0d6b781e0f..27f1bb295d 100644
--- a/apps/ui/src/components/metagraphed/endpoint-operational-list.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-operational-list.tsx
@@ -184,6 +184,7 @@ export function EndpointOperationalList({
                       id={`endpoint-${endpoint.id}`}
                       role="listitem"
                       className={classNames(
+                        // eslint-disable-next-line no-restricted-syntax -- `scroll-mt-32` is anchor scroll-margin (8rem sticky-header clearance for deep-linked endpoint rows), not layout spacing; the guardrail's `mt` matcher flags it as a false positive and no on-scale step equals 8rem
                         "group relative scroll-mt-32 transition-colors",
                         idx > 0 && "border-t border-border",
                         open ? "bg-surface/70" : "hover:bg-surface/50",
@@ -297,7 +298,7 @@ export function EndpointOperationalList({
                                 <Link
                                   to="/providers/$slug"
                                   params={{ slug: providerSlug }}
-                                  className="mg-focus-ring inline-flex items-center gap-1.5 text-[11px] text-ink-muted hover:text-ink-strong"
+                                  className="mg-focus-ring inline-flex items-center gap-1.5 mg-type-caption text-ink-muted hover:text-ink-strong"
                                 >
                                   <BrandIcon
                                     url={provider?.website ?? provider?.homepage}
@@ -314,7 +315,7 @@ export function EndpointOperationalList({
                                 </Link>
                               </div>
                             ) : endpoint.provider ? (
-                              <div className="mt-1.5 text-[11px] text-ink-muted">
+                              <div className="mt-1.5 mg-type-caption text-ink-muted">
                                 {endpoint.provider}
                               </div>
                             ) : null}
@@ -326,6 +327,7 @@ export function EndpointOperationalList({
                             <div className="flex items-baseline gap-1.5">
                               <span
                                 className={classNames(
+                                  // eslint-disable-next-line no-restricted-syntax -- 20px mono latency stat; the type scale tops out at mg-type-data (11px) with no large-numeric token, so this hero figure has no equivalent
                                   "font-mono text-[20px] leading-none tabular-nums",
                                   latencyTone(endpoint.latency_ms),
                                 )}
diff --git a/apps/ui/src/components/metagraphed/endpoint-snippet.tsx b/apps/ui/src/components/metagraphed/endpoint-snippet.tsx
index f6fc0cb039..82765c6cd9 100644
--- a/apps/ui/src/components/metagraphed/endpoint-snippet.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-snippet.tsx
@@ -50,6 +50,7 @@ export function EndpointSnippet({ rows }: { rows: EndpointSnippetRow[] }) {
   return (
     <>
       <div
+        // eslint-disable-next-line no-restricted-syntax -- this is a segmented language switcher (role="tablist"), not a card shell; <Panel> would impose card padding/semantics. The rule's rounded+border+bg-card matcher is a false positive here
         className="mb-3 inline-flex rounded border border-border bg-card p-0.5"
         role="tablist"
         aria-label="Snippet language"
diff --git a/apps/ui/src/components/metagraphed/endpoint-uptime-bar.tsx b/apps/ui/src/components/metagraphed/endpoint-uptime-bar.tsx
index d8c52eb19b..320cfa80a7 100644
--- a/apps/ui/src/components/metagraphed/endpoint-uptime-bar.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-uptime-bar.tsx
@@ -62,7 +62,7 @@ export function EndpointUptimeBar({
         <span
           key={i}
           className={classNames(
-            "block h-3 w-[3px] rounded-[1px]",
+            "block h-3 w-[3px] rounded",
             p === "ok" && "bg-health-ok/70",
             p === "warn" && "bg-health-warn/80",
             p === "down" && "bg-health-down/80",
diff --git a/apps/ui/src/components/metagraphed/endpoints-glance.tsx b/apps/ui/src/components/metagraphed/endpoints-glance.tsx
index 060d75218e..4cbac7e3a8 100644
--- a/apps/ui/src/components/metagraphed/endpoints-glance.tsx
+++ b/apps/ui/src/components/metagraphed/endpoints-glance.tsx
@@ -135,7 +135,7 @@ export function EndpointsGlance({
         type="button"
         onClick={toggle}
         className={classNames(
-          "flex w-full items-center justify-center gap-1.5 border-t border-border bg-surface/40 px-3 py-3 text-[11px] font-medium text-ink-muted hover:text-accent hover:bg-surface min-h-11 transition-colors",
+          "flex w-full items-center justify-center gap-1.5 border-t border-border bg-surface/40 px-3 py-3 mg-type-caption font-medium text-ink-muted hover:text-accent hover:bg-surface min-h-11 transition-colors",
         )}
         aria-expanded={open}
         aria-controls={panelId}
diff --git a/apps/ui/src/components/metagraphed/endpoints-priority-strip.tsx b/apps/ui/src/components/metagraphed/endpoints-priority-strip.tsx
index 3de9cf53c5..4248bd8008 100644
--- a/apps/ui/src/components/metagraphed/endpoints-priority-strip.tsx
+++ b/apps/ui/src/components/metagraphed/endpoints-priority-strip.tsx
@@ -113,11 +113,14 @@ function PriorityCard({ item }: { item: Item }) {
       <div className="mt-1 flex items-baseline gap-2">
         <span className="font-display text-xl text-ink-strong tabular-nums">{item.value}</span>
       </div>
-      {item.hint ? <p className="mt-0.5 text-[11px] text-ink-muted">{item.hint}</p> : null}
+      {item.hint ? <p className="mt-0.5 mg-type-caption text-ink-muted">{item.hint}</p> : null}
       {item.rows.length > 0 ? (
         <ul className="mt-2 space-y-0.5">
           {item.rows.slice(0, 3).map((r) => (
-            <li key={r.id} className="flex items-center gap-1.5 text-[11px] text-ink-muted min-w-0">
+            <li
+              key={r.id}
+              className="flex items-center gap-1.5 mg-type-caption text-ink-muted min-w-0"
+            >
               <HealthDot state={r.health ?? "unknown"} />
               <span className="truncate font-mono">{r.provider ?? r.provider_slug ?? r.id}</span>
               {r.latency_ms != null ? (
@@ -129,7 +132,7 @@ function PriorityCard({ item }: { item: Item }) {
           ))}
         </ul>
       ) : (
-        <div className="mt-2 flex items-center gap-1.5 text-[11px] text-ink-muted">
+        <div className="mt-2 flex items-center gap-1.5 mg-type-caption text-ink-muted">
           <Chip tone="muted">Nothing to review</Chip>
         </div>
       )}
diff --git a/apps/ui/src/components/metagraphed/entity-hover-card.tsx b/apps/ui/src/components/metagraphed/entity-hover-card.tsx
index 9f3d675934..00d99d5f2b 100644
--- a/apps/ui/src/components/metagraphed/entity-hover-card.tsx
+++ b/apps/ui/src/components/metagraphed/entity-hover-card.tsx
@@ -162,7 +162,7 @@ function ProviderMiniProfile({ slug }: { slug: string }) {
           <div className="mg-type-data-sm text-ink-muted truncate">{slug}</div>
         </div>
       </div>
-      {p.notes ? <p className="text-[11px] text-ink-muted line-clamp-3">{p.notes}</p> : null}
+      {p.notes ? <p className="mg-type-caption text-ink-muted line-clamp-3">{p.notes}</p> : null}
       <dl className="grid grid-cols-3 gap-2 pt-1">
         <Mini label="Surfaces" value={String(p.surfaces_count ?? "—")} />
         <Mini label="Endpoints" value={String(p.endpoints_count ?? sum?.endpoint_count ?? "—")} />
diff --git a/apps/ui/src/components/metagraphed/evidence-panel.tsx b/apps/ui/src/components/metagraphed/evidence-panel.tsx
index 7e9796b518..22faf3887d 100644
--- a/apps/ui/src/components/metagraphed/evidence-panel.tsx
+++ b/apps/ui/src/components/metagraphed/evidence-panel.tsx
@@ -111,7 +111,7 @@ export function EvidencePanel({ netuid, pageSize = 50 }: Props) {
 
   return (
     <div className="space-y-3">
-      <div className="flex flex-wrap items-center gap-2 text-[11px]">
+      <div className="flex flex-wrap items-center gap-2 mg-type-caption">
         <span className="font-mono uppercase tracking-widest text-ink-muted">Source</span>
         <select
           value={sourceFilter}
@@ -183,11 +183,11 @@ export function EvidencePanel({ netuid, pageSize = 50 }: Props) {
                   }
                 >
                   {item.url ? (
-                    <ExternalLink href={item.url} className="text-[11px]">
+                    <ExternalLink href={item.url} className="mg-type-caption">
                       {shortLabel(item)}
                     </ExternalLink>
                   ) : (
-                    <span className="inline-flex items-center rounded border border-border bg-paper px-1.5 py-0.5 text-[11px] text-ink-muted">
+                    <span className="inline-flex items-center rounded border border-border bg-paper px-1.5 py-0.5 mg-type-caption text-ink-muted">
                       {shortLabel(item)}
                     </span>
                   )}
@@ -195,7 +195,9 @@ export function EvidencePanel({ netuid, pageSize = 50 }: Props) {
               </li>
             ))}
             {items.length > 24 ? (
-              <li className="text-[11px] text-ink-muted self-center">+{items.length - 24} more</li>
+              <li className="mg-type-caption text-ink-muted self-center">
+                +{items.length - 24} more
+              </li>
             ) : null}
           </ul>
         </Panel>
@@ -211,7 +213,7 @@ export function EvidencePanel({ netuid, pageSize = 50 }: Props) {
             type="button"
             onClick={() => query.fetchNextPage()}
             disabled={query.isFetchingNextPage}
-            className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 text-[11px] font-medium text-ink hover:border-ink/30 transition-colors disabled:opacity-60"
+            className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 mg-type-caption font-medium text-ink hover:border-ink/30 transition-colors disabled:opacity-60"
           >
             {query.isFetchingNextPage ? "Loading…" : `Load ${pageSize} more`}
           </button>