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

apps/ui/src/components/metagraphed/account-history-chart.tsx

@@ -172,6 +172,7 @@ export function AccountHistoryChart({ ss58 }: { ss58: string }) {
               glass tier (mg-glass would add unwanted blur; mg-glass-soft's 60%
               visibly lightens this segmented-toggle track). Kept as a bare
               fraction rather than a wrong tier. */}
+          {/* eslint-disable-next-line no-restricted-syntax -- #7842: bg-card/80 toggle track has no clean glass tier (mg-glass adds blur, mg-glass-soft lightens it -- see comment above); a pill toggle, not a card shell */}
           <div className="inline-flex flex-wrap rounded-full border border-border/80 bg-card/80 p-1 shadow-[var(--mg-shadow-pill)]">
             <button
               type="button"
@@ -204,7 +205,7 @@ export function AccountHistoryChart({ ss58 }: { ss58: string }) {
         </div>
       ) : null}
 
-      <div className="overflow-hidden rounded-2xl border border-border/80 bg-card/95 mg-card-glow">
+      <div className="overflow-hidden rounded-2xl border border-border/80 mg-glass mg-card-glow">
         <div className="grid gap-4 border-b border-border/70 px-4 py-4 md:grid-cols-3">
           <MetricBlock
             label="Total activity"

apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx

@@ -242,7 +242,7 @@ function CompletenessChip({ value, netuid }: { value: number; netuid: number })
     <span
       title={`SN${netuid}: ${pct}% of required public-interface kinds present`}
       className={classNames(
-        "ml-auto inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 font-mono text-[9px] font-semibold tabular-nums md:hidden",
+        "ml-auto inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 mg-type-data-sm font-semibold tabular-nums md:hidden",
         tone,
       )}
     >

apps/ui/src/components/metagraphed/analytics/drift-activity.tsx

@@ -89,8 +89,11 @@ export function DriftActivity({ schemas, fromPath }: Props) {
           <span className="text-health-warn">{drifting.length} drifting</span>
           <span className="text-ink-muted"> · {stable.length} stable</span>
         </div>
-        <div
-          className="ml-auto inline-flex items-center rounded-md border border-border bg-card p-0.5"
+        <Panel
+          as="div"
+          flush
+          className="ml-auto"
+          bodyClassName="inline-flex items-center p-0.5"
           role="tablist"
           aria-label="Drift scope"
         >
@@ -112,7 +115,7 @@ export function DriftActivity({ schemas, fromPath }: Props) {
               </button>
             );
           })}
-        </div>
+        </Panel>
       </div>
 
       {/* Drifting list */}
@@ -200,7 +203,7 @@ function DriftRow({ schema, onClick }: { schema: SchemaInfo; onClick: () => void
               </span>
             ) : null}
           </div>
-          <div className="mt-0.5 flex flex-wrap items-center gap-2 font-mono text-[10.5px] text-ink-muted">
+          <div className="mt-0.5 flex flex-wrap items-center gap-2 mg-type-data text-ink-muted">
             {added != null ? <span className="text-health-ok">+{added}</span> : null}
             {removed != null ? <span className="text-health-down">−{removed}</span> : null}
             {schema.previous_hash && schema.hash ? (
@@ -263,6 +266,7 @@ function WeightBar({ weight: w, tone }: { weight: number; tone: "warn" | "muted"
             key={i}
             aria-hidden
             className={classNames(
+              // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
               "h-3 w-1 rounded-[1px]",
               on ? (tone === "warn" ? "bg-health-warn" : "bg-ink-strong") : "bg-ink-subtle/25",
             )}

apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx

@@ -220,7 +220,7 @@ export function IncidentsTimeline({ className }: { className?: string }) {
                   </div>
                 </div>
                 <TimelineTrack now={now} totalMs={totalMs} items={r.items} />
-                <div className="flex items-center justify-end gap-2 text-[11px]">
+                <div className="flex items-center justify-end gap-2 mg-type-caption">
                   {r.netuid != null ? (
                     <Link
                       to="/subnets/$netuid"

apps/ui/src/components/metagraphed/analytics/registry-depth.tsx

@@ -346,7 +346,7 @@ function QueueRow({ row }: { row: CoverageDepthQueueRow }) {
             {row.top_gap_codes.slice(0, 4).map((g) => (
               <span
                 key={g}
-                className="rounded border border-dashed border-ink-subtle bg-paper px-1 py-0.5 font-mono text-[9px] text-ink-muted"
+                className="rounded border border-dashed border-ink-subtle bg-paper px-1 py-0.5 mg-type-data-sm text-ink-muted"
               >
                 {g}
               </span>

apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx

@@ -293,14 +293,15 @@ function DriftTile({
         />
         <span className="mg-type-data text-ink-strong truncate max-w-[180px]">{label}</span>
         {schema.updated_at ? (
-          <span className="font-mono text-[9px] text-ink-muted shrink-0">
+          <span className="mg-type-data-sm text-ink-muted shrink-0">
             <TimeAgo at={schema.updated_at} />
           </span>
         ) : null}
       </button>
       {evidenceHref ? (
         <a
           href={evidenceHref}
+          // eslint-disable-next-line no-restricted-syntax -- evidence link needs onClick stopPropagation (row is clickable); <ExternalLink> doesn't forward onClick
           target="_blank"
           rel="noopener noreferrer"
           onClick={(e) => e.stopPropagation()}

apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx

@@ -96,6 +96,7 @@ export function StatusMosaic({ className, limit = 240 }: { className?: string; l
             const tile = (
               <span
                 className={classNames(
+                  // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                   "block aspect-square rounded-[2px] transition-transform hover:scale-110 hover:ring-1 hover:ring-accent/60",
                   TONE[state] ?? TONE.unknown,
                 )}
@@ -110,6 +111,7 @@ export function StatusMosaic({ className, limit = 240 }: { className?: string; l
                   <Link
                     to="/subnets/$netuid"
                     params={{ netuid: e.netuid }}
+                    // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                     className="block focus:outline-none focus-visible:ring-1 focus-visible:ring-accent rounded-[2px]"
                   >
                     {tile}

apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx

@@ -147,7 +147,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
           {usingFallbackWindow ? <span className="text-ink-muted/60"> (7d window)</span> : null}
         </div>
         {freshLine ? (
-          <span className="font-mono text-[9.5px] text-ink-muted/70">· {freshLine}</span>
+          <span className="mg-type-data-sm text-ink-muted/70">· {freshLine}</span>
         ) : null}
         {/* Aggregate window stats. */}
         <div className="ml-auto flex items-center gap-3 mg-type-data-sm text-ink-muted">
@@ -198,7 +198,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
                   aria-hidden
                 />
               </div>
-              <div className="mt-1 flex items-center gap-3 font-mono text-[9.5px] text-ink-muted tabular-nums">
+              <div className="mt-1 flex items-center gap-3 mg-type-data-sm text-ink-muted tabular-nums">
                 {typeof s.samples === "number" ? (
                   <span>{formatNumber(s.samples)} samples</span>
                 ) : null}
@@ -270,7 +270,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
                     <button
                       type="button"
                       aria-label={aria}
-                      className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-1.5 py-0.5 font-mono text-[9.5px] text-ink-muted transition-colors hover:text-ink-strong focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-1.5 py-0.5 mg-type-data-sm text-ink-muted transition-colors hover:text-ink-strong focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                     >
                       <span
                         aria-hidden
@@ -280,7 +280,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
                       <span className="tabular-nums">{dur}</span>
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent side="top" className="max-w-xs text-[11px] leading-relaxed">
+                  <TooltipContent side="top" className="max-w-xs mg-type-caption">
                     <div className="mg-type-micro text-primary-foreground/80">
                       {sev} · {dur}
                     </div>

apps/ui/src/components/metagraphed/api-drawer.tsx

@@ -15,7 +15,7 @@ import {
   TooltipTrigger,
   CopyableCode,
   Kbd,
-  safeExternalUrl,
+  ExternalLink,
 } from "@jsonbored/ui-kit";
 import { classNames } from "@/lib/metagraphed/format";
 import { Panel } from "@/components/metagraphed/primitives";
@@ -51,7 +51,7 @@ export function ApiDrawerTrigger() {
           <Code2 className="size-4" />
         </button>
       </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-[11px]">
+      <TooltipContent side="bottom" className="mg-type-caption">
         View in API · <Kbd>⌘</Kbd>
         <Kbd>J</Kbd>
       </TooltipContent>
@@ -89,7 +89,7 @@ export function ApiDrawer() {
           <SheetTitle className="font-display text-base font-semibold text-ink-strong inline-flex items-center gap-2">
             <Code2 className="size-4 text-accent" /> API source
           </SheetTitle>
-          <p className="text-[11px] text-ink-muted leading-relaxed">
+          <p className="mg-type-caption text-ink-muted">
             Every screen in Metagraphed is powered by a documented JSON endpoint. Copy the URL, open
             it raw, or grab the curl snippet.
           </p>
@@ -167,15 +167,14 @@ function ApiSourceBody({ source }: { source: ApiSource }) {
               GET
             </span>
             <span className="min-w-0 flex-1">{fullUrl}</span>
-            <a
-              href={safeExternalUrl(fullUrl)}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Open raw"
+            <ExternalLink
+              bare
+              href={fullUrl}
+              ariaLabel="Open raw"
               className="text-ink-muted hover:text-ink-strong"
             >
               <ExternalLinkIcon className="size-3.5" />
-            </a>
+            </ExternalLink>
           </div>
         </Panel>
         <div className="flex flex-wrap gap-1.5">

apps/ui/src/components/metagraphed/api-keys-manager.tsx

@@ -101,7 +101,7 @@ function SignInPrompt({
       {error ? (
         <div
           role="alert"
-          className="rounded border border-health-down/30 bg-health-down/5 px-2 py-1.5 text-[11px] text-health-down"
+          className="rounded border border-health-down/30 bg-health-down/5 px-2 py-1.5 mg-type-caption text-health-down"
         >
           {error}
         </div>
@@ -165,13 +165,13 @@ function ApiKeysPanel({
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <span className="text-[11px] text-ink-muted">
+        <span className="mg-type-caption text-ink-muted">
           Tier: <span className="font-mono text-ink-strong">{tier ?? "free"}</span>
         </span>
         <button
           type="button"
           onClick={onSignOut}
-          className="rounded border border-border bg-card px-2 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-ink/30"
+          className="rounded border border-border bg-card px-2 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-ink/30"
         >
           Sign out
         </button>
@@ -232,7 +232,7 @@ function ApiKeysPanel({
           >
             <div className="min-w-0">
               <div className="font-mono mg-type-caption text-ink-strong truncate">{key.key_id}</div>
-              <div className="text-[10px] text-ink-muted">
+              <div className="mg-type-caption text-ink-muted">
                 Created {formatTimestamp(key.created_at)} · Last used{" "}
                 {formatTimestamp(key.last_used_at)}
               </div>
@@ -241,7 +241,7 @@ function ApiKeysPanel({
               type="button"
               onClick={() => revokeMutation.mutate(key.key_id)}
               disabled={revokeMutation.isPending && revokeMutation.variables === key.key_id}
-              className="shrink-0 rounded border border-health-down/40 bg-health-down/5 px-2 py-1 text-[11px] font-medium text-health-down hover:bg-health-down/10 disabled:opacity-50"
+              className="shrink-0 rounded border border-health-down/40 bg-health-down/5 px-2 py-1 mg-type-caption font-medium text-health-down hover:bg-health-down/10 disabled:opacity-50"
             >
               {revokeMutation.isPending && revokeMutation.variables === key.key_id
                 ? "Revoking…"

apps/ui/src/components/metagraphed/api-source-footer.tsx

@@ -11,7 +11,7 @@ import { useRegisterApiSource } from "@/lib/metagraphed/api-source-context";
 export function ApiSourceFooter({ paths, artifacts }: { paths: string[]; artifacts?: string[] }) {
   useRegisterApiSource(paths, artifacts ?? []);
   return (
-    <footer className="mt-10 border-t border-border pt-4 text-[11px] text-ink-muted">
+    <footer className="mt-10 border-t border-border pt-4 mg-type-caption text-ink-muted">
       <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
         <span className="mg-type-micro">data sources</span>
         {paths.map((p) => (

apps/ui/src/components/metagraphed/app-shell.tsx

@@ -28,6 +28,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   CopyableCode,
+  ExternalLink,
   safeExternalUrl,
   DiscordIcon,
   TimeAgo,
@@ -271,7 +272,7 @@ export function AppShell({
                       <Webhook className="size-3.5" aria-hidden="true" />
                     </Link>
                   </TooltipTrigger>
-                  <TooltipContent side="bottom" className="text-[11px]">
+                  <TooltipContent side="bottom" className="mg-type-caption">
                     Developer settings — webhook subscriptions
                   </TooltipContent>
                 </Tooltip>
@@ -424,7 +425,7 @@ function ApiBaseRow() {
     <CopyableCode
       value={`${base}/api/v1`}
       truncate={true}
-      className="w-full max-w-full text-[10px]"
+      className="w-full max-w-full mg-type-caption"
     />
   );
 }
@@ -450,40 +451,37 @@ function SiteFooter() {
             data is public, chain-direct, and verifiable.
           </p>
           <div className="mt-4 flex items-center gap-1">
-            <a
+            <ExternalLink
+              bare
               href={GITHUB_HREF}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub repository"
+              ariaLabel="GitHub repository"
               title="Open source on GitHub"
               className="inline-flex items-center justify-center rounded-md size-8 text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
             >
               <Github className="size-4" />
-            </a>
-            <a
+            </ExternalLink>
+            <ExternalLink
+              bare
               href={DISCORD_HREF}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Discord community"
+              ariaLabel="Discord community"
               title="Join us on Discord"
               className="inline-flex items-center justify-center rounded-md size-8 text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
             >
               <DiscordIcon className="size-4" />
-            </a>
+            </ExternalLink>
             {/* #3351: discoverable RSS/Atom feed for the registry-changes feed
                 (/api/v1/feeds/registry, content-negotiated; .rss for a predictable
                 browser click). Same guarded external-link pattern as the openapi
                 link and the GitHub/Discord icons above. */}
-            <a
-              href={safeExternalUrl(`${API_BASE}/api/v1/feeds/registry.rss`)}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Registry changes RSS feed"
+            <ExternalLink
+              bare
+              href={`${API_BASE}/api/v1/feeds/registry.rss`}
+              ariaLabel="Registry changes RSS feed"
               title="Subscribe to the registry-changes feed (RSS)"
               className="inline-flex items-center justify-center rounded-md size-8 text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
             >
               <Rss className="size-4" />
-            </a>
+            </ExternalLink>
           </div>
         </div>
         <FooterCol title="Registry">
@@ -586,14 +584,13 @@ function RegistryPulseStrip() {
         </>
       ) : null}
       <span>·</span>
-      <a
-        href={safeExternalUrl(`${API_BASE}/api/v1/openapi.json`)}
-        target="_blank"
-        rel="noopener noreferrer"
+      <ExternalLink
+        bare
+        href={`${API_BASE}/api/v1/openapi.json`}
         className="hover:text-ink-strong transition-colors"
       >
         openapi
-      </a>
+      </ExternalLink>
     </div>
   );
 }
@@ -629,10 +626,9 @@ function EndpointHealthPill() {
     status === "down" ? "unreachable" : status === "checking" ? "checking…" : `${ms} ms`;
   const title = `API endpoint · ${ENDPOINT_LABEL[status]}${ms != null ? ` · ${ms} ms` : ""}`;
   return (
-    <a
-      href={safeExternalUrl(`${base}/api/v1`)}
-      target="_blank"
-      rel="noopener noreferrer"
+    <ExternalLink
+      bare
+      href={`${base}/api/v1`}
       title={title}
       className="shrink-0 inline-flex items-center gap-2 text-ink-muted hover:text-ink-strong transition-colors"
     >
@@ -642,7 +638,7 @@ function EndpointHealthPill() {
         ·
       </span>
       <span>{detail}</span>
-    </a>
+    </ExternalLink>
   );
 }
 

apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx

@@ -76,7 +76,7 @@ export function AuthorSharePanel({ rows }: { rows: Block[] }) {
                   <div>{formatNumber(count)}</div>
                   <div
                     className={classNames(
-                      "text-[10px]",
+                      "mg-type-caption",
                       heavy ? "text-health-warn-text" : "text-ink-muted",
                     )}
                   >

apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx

@@ -68,6 +68,7 @@ export function CadenceHeatmap({ rows }: { rows: Block[] }) {
                 to="/blocks/$ref"
                 params={{ ref: String(block.block_number) }}
                 className={classNames(
+                  // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                   "mg-focus-ring block h-5 w-[10px] rounded-[2px] transition-transform hover:scale-125",
                   tone.cls,
                 )}
@@ -110,6 +111,7 @@ function Legend() {
       <div className="flex flex-wrap items-center gap-1">
         {items.map((i) => (
           <span key={i.label} className="inline-flex items-center gap-1">
+            {/* eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids */}
             <span className={classNames("inline-block h-2 w-3 rounded-[2px]", i.cls)} />
             <span>{i.label}</span>
           </span>