Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JSONbored merged 1 commit into from
Jul 26, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions apps/ui/src/components/metagraphed/charts/latency-heatmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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,
)}
>
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/components/metagraphed/charts/subnet-pulse-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?? [];
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions apps/ui/src/components/metagraphed/charts/validator-subnet-heatmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down Expand Up @@ -117,7 +117,7 @@ export function ValidatorSubnetHeatmap() {
)}
/>
</TooltipTrigger>
<TooltipContent side="top" className="text-[11px]">
<TooltipContent side="top" className="mg-type-caption">
{summary}
</TooltipContent>
</Tooltip>
Expand Down
6 changes: 3 additions & 3 deletions apps/ui/src/components/metagraphed/command-palette-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/components/metagraphed/endpoint-card-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/components/metagraphed/endpoint-chip-cluster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
))}
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/components/metagraphed/endpoint-compare-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
11 changes: 6 additions & 5 deletions apps/ui/src/components/metagraphed/endpoint-detail-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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."}
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
)}
>
Expand Down
15 changes: 8 additions & 7 deletions apps/ui/src/components/metagraphed/endpoint-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 ? (
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions apps/ui/src/components/metagraphed/endpoint-operational-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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),
)}
Expand Down
1 change: 1 addition & 0 deletions apps/ui/src/components/metagraphed/endpoint-snippet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/components/metagraphed/endpoint-uptime-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/components/metagraphed/endpoints-glance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading
Loading