@skyhook-io/k8s-ui 1.8.9 → 1.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.9",
+  "version": "1.8.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/applications/ApplicationsList.tsx

@@ -13,9 +13,11 @@ export interface ApplicationsListProps {
   onSelect: (key: string) => void
   /** Leading element in the header actions (e.g. a freshness control). */
   headerActions?: ReactNode
+  /** First fetch in flight — chassis renders its shape-stable skeleton. */
+  loading?: boolean
 }
 
-export function ApplicationsList({ apps, onSelect, headerActions }: ApplicationsListProps) {
+export function ApplicationsList({ apps, onSelect, headerActions, loading }: ApplicationsListProps) {
   // Env tokens this CLUSTER proved (identity classifications on the wire) feed
   // the namespace heuristic, so sibling-less rows in discovered env namespaces
   // still label without any hardcoded vocabulary.
@@ -24,6 +26,7 @@ export function ApplicationsList({ apps, onSelect, headerActions }: Applications
 
   return (
     <ApplicationsView
+      loading={loading}
       variant="single"
       entries={entries}
       onSelect={onSelect}

package/src/components/applications/ApplicationsView.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { StatusDot, mapHealthToTone } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
 import { EmptyState } from '../ui/EmptyState'
+import { BoardTableSkeleton, BoardRailSkeleton } from '../ui/BoardSkeleton'
 import { SearchBox } from '../ui/SearchBox'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { PageHeader } from '../ui/PageHeader'
@@ -100,6 +101,9 @@ export interface ApplicationsViewProps {
   emptySlot?: ReactNode
   /** Leading element in the header actions cluster (e.g. a freshness control). */
   headerActions?: ReactNode
+  /** First fetch in flight — render the shape-stable skeleton (pulsing tiles,
+   *  rail stubs, table rows) instead of collapsing the chassis. */
+  loading?: boolean
 }
 
 const APPS_FILTER_SCHEMA = defineFilterSchema({
@@ -112,7 +116,7 @@ const APPS_FILTER_SCHEMA = defineFilterSchema({
   system: { param: 'system', type: 'boolean' },
 })
 
-export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions }: ApplicationsViewProps) {
+export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions, loading }: ApplicationsViewProps) {
   // Facets + search + show-system live in the URL (shareable, bookmarkable) via
   // the shared filter-state contract. Sort stays local: it's a compound
   // {key, dir} view-preference, not a result-narrowing filter, so it isn't
@@ -274,9 +278,16 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
     .sort((a, b) => (envRank(b[0] === 'none' ? undefined : b[0]) ?? -1) - (envRank(a[0] === 'none' ? undefined : a[0]) ?? -1))
     .map(([env, count]) => ({ value: env, label: env === 'none' ? 'unlabeled' : env, count }))
 
+  // First fetch, nothing to show yet: drive the shape-stable skeleton. The
+  // loaded state hides zero-count health tiles, so without this the header
+  // (tiles + distribution bar), rail, and table would all pop in at once.
+  const initialLoading = Boolean(loading) && allEntries.length === 0
+
   // Clickable status tile wired to the health facet — tap to filter to that tier.
   const healthTile = (h: AppHealth, tone: SummaryTone) =>
-    counts.health[h] ? (
+    initialLoading && (h === 'healthy' || h === 'degraded' || h === 'unhealthy') ? (
+      <SummaryTile key={h} label={HEALTH_META[h].label} value={0} tone={tone} loading />
+    ) : counts.health[h] ? (
       <SummaryTile key={h} label={HEALTH_META[h].label} value={counts.health[h]} tone={tone} active={fHealth.has(h)} onClick={() => filters.toggle('health', h)} />
     ) : null
 
@@ -301,7 +312,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           actions={
             <>
               {headerActions}
-              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} />
+              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} loading={initialLoading} />
               {healthTile('unhealthy', 'error')}
               {healthTile('degraded', 'warning')}
               {healthTile('healthy', 'success')}
@@ -310,11 +321,15 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             </>
           }
         />
-        <DistributionBar
-          className="mt-3"
-          ariaLabel="Health distribution"
-          segments={HEALTH_ORDER.map((h) => ({ key: h, count: counts.health[h] ?? 0, fillClass: HEALTH_META[h].bar }))}
-        />
+        {initialLoading ? (
+          <div className="mt-3 h-1.5 w-full animate-pulse rounded-full bg-theme-hover" aria-hidden />
+        ) : (
+          <DistributionBar
+            className="mt-3"
+            ariaLabel="Health distribution"
+            segments={HEALTH_ORDER.map((h) => ({ key: h, count: counts.health[h] ?? 0, fillClass: HEALTH_META[h].bar }))}
+          />
+        )}
       </div>
 
       {/* Body: filter sidebar | content (toolbar + table). */}
@@ -330,6 +345,18 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             )}
           </div>
           <div className="flex-1 overflow-y-auto">
+            {initialLoading ? (
+              <BoardRailSkeleton
+                sections={[
+                  ['Availability', 5],
+                  ['Class', 3],
+                  ['Type', 4],
+                  ['Environment', 3],
+                  ['Source', 3],
+                ]}
+              />
+            ) : (
+              <>
             <Facet icon={HeartPulse} title="Availability" options={HEALTH_ORDER.map((h) => ({ value: h, label: HEALTH_META[h].label, count: counts.health[h] ?? 0, tone: HEALTH_TONE[h] }))} selected={fHealth} onToggle={(v) => filters.toggle('health', v)} />
             <Facet icon={Layers} title="Class" options={CLASS_ORDER.map((c) => ({ value: c, label: CLASS_META[c].label, count: counts.workloadClass[c] ?? 0 }))} selected={fClass} onToggle={(v) => filters.toggle('class', v)} />
             <Facet icon={Shapes} title="Type" options={CATEGORY_ORDER.map((c) => ({ value: c, label: CATEGORY_META[c].label, count: counts.category[c] ?? 0, tooltip: CATEGORY_META[c].tooltip }))} selected={fType} onToggle={(v) => filters.toggle('type', v)} />
@@ -342,6 +369,8 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                 <span className="ml-auto tabular-nums text-theme-text-tertiary">{systemCount}</span>
               </label>
             )}
+              </>
+            )}
           </div>
         </aside>
 
@@ -369,7 +398,9 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           </div>
 
           <div className="min-w-0 flex-1 overflow-auto bg-theme-base">
-          {entries.length === 0 ? (
+          {initialLoading ? (
+            <BoardTableSkeleton />
+          ) : entries.length === 0 ? (
             emptySlot && allEntries.length === 0 ? (
               emptySlot
             ) : (

package/src/components/checks/ChecksView.tsx

@@ -1,21 +1,40 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { ChevronDown, ChevronRight, ExternalLink, EyeOff, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
-import { ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip } from '../ui'
+import { AlertCircle, AlertOctagon, AlertTriangle, ChevronDown, ChevronRight, ExternalLink, EyeOff, Info, Layers, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
+import { CardBody, CardSection, ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip, NEUTRAL_CHIP_CLASS, renderProse } from '../ui'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import type { CheckMeta, CheckReference } from '../audit'
 import { CHECK_SEVERITIES, CHECK_SEVERITY_RANK, type Check, type CheckSeverity, type EffectiveCheckFinding, type CheckResourceRef } from './types'
 import {
   SEVERITY_BADGE_CLASS,
   SEVERITY_FILL_CLASS,
+  SEVERITY_HEADER_BAND_CLASS,
   SEVERITY_LABEL,
   SEVERITY_RAIL_CLASS,
+  SEVERITY_SOLID_CLASS,
   SEVERITY_TEXT_CLASS,
-  categoryBadgeClass,
 } from './severity'
 
 const CATEGORIES: readonly string[] = ['Security', 'Reliability', 'Efficiency']
 
+// Leading severity glyph, one per tier of the 4-tier ladder: critical = octagon,
+// high = triangle, medium = circle, low = info.
+const CHECK_SEVERITY_ICON: Record<CheckSeverity, ComponentType<{ className?: string }>> = {
+  critical: AlertOctagon,
+  high: AlertTriangle,
+  medium: AlertCircle,
+  low: Info,
+}
+
+// An out-of-contract severity the backend might emit is coerced to this tier
+// once, up front (normalizeCheckSeverity), so the icon AND every color map
+// (text/rail/band/pill) resolve together — a raw miss would crash the icon and
+// silently drop the tint everywhere else.
+const CHECK_SEVERITY_FALLBACK: CheckSeverity = 'medium'
+// Object.hasOwn (not `in`) so inherited keys like "toString" don't slip past.
+const normalizeCheckSeverity = (s: CheckSeverity): CheckSeverity =>
+  Object.hasOwn(CHECK_SEVERITY_ICON, s) ? s : CHECK_SEVERITY_FALLBACK
+
 // Affected-resources shown inline before "View all". A check can fail on
 // thousands of resources; the card stays scannable and only the rare big-list
 // case pays the cost of a full expand.
@@ -410,17 +429,22 @@ export interface CheckRemediationBlockProps {
   layout?: 'columns' | 'stack'
 }
 
+// Remediation body: WHY IT MATTERS (info, the description) → HOW TO FIX
+// (wrench/emerald, the remediation + doc links), rendered as icon-led sections
+// for every host. Prose runs through renderProse so `inline-code` spans become
+// mono chips when the catalog copy carries them. The 'stack' layout is the
+// compact single-column variant for narrow hosts.
 export function CheckRemediationBlock({ description, remediation, references, layout = 'columns' }: CheckRemediationBlockProps) {
   if (!description && !remediation && (!references || references.length === 0)) return null
 
   if (layout === 'stack') {
     return (
       <div className="flex flex-col gap-2">
-        {description && <p className="text-[13px] leading-relaxed text-theme-text-secondary">{description}</p>}
+        {description && <p className="text-[13px] leading-relaxed text-theme-text-secondary">{renderProse(description)}</p>}
         {remediation && (
           <div>
             <div className="text-[11px] uppercase tracking-wider text-theme-text-tertiary">How to fix</div>
-            <p className="mt-0.5 text-[13px] leading-relaxed text-theme-text-secondary">{remediation}</p>
+            <p className="mt-0.5 text-[13px] leading-relaxed text-theme-text-secondary">{renderProse(remediation)}</p>
           </div>
         )}
         {references && references.length > 0 && <CheckReferenceLinks references={references} />}
@@ -429,25 +453,19 @@ export function CheckRemediationBlock({ description, remediation, references, la
   }
 
   return (
-    <>
-      <div className="flex flex-col gap-4 md:flex-row md:gap-8">
-        {remediation && (
-          <section className="md:flex-1">
-            <h4 className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-radar-accent)]">
-              <Wrench className="h-3.5 w-3.5" /> How to fix
-            </h4>
-            <p className="text-sm leading-relaxed text-theme-text-primary">{remediation}</p>
-          </section>
-        )}
-        {description && (
-          <section className="md:flex-1">
-            <h4 className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What this checks</h4>
-            <p className="text-sm leading-relaxed text-theme-text-secondary">{description}</p>
-          </section>
-        )}
-      </div>
-      {references && references.length > 0 && <CheckReferenceLinks references={references} />}
-    </>
+    <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+      {description && (
+        <CardSection icon={Info} label="Why it matters" tone="neutral">
+          <CardBody>{renderProse(description)}</CardBody>
+        </CardSection>
+      )}
+      {(remediation || (references && references.length > 0)) && (
+        <CardSection icon={Wrench} label="How to fix" tone="fix">
+          {remediation && <CardBody>{renderProse(remediation)}</CardBody>}
+          {references && references.length > 0 && <CheckReferenceLinks references={references} />}
+        </CardSection>
+      )}
+    </div>
   )
 }
 
@@ -500,16 +518,27 @@ export function CheckCardShell({
   dimmed,
 }: CheckCardShellProps) {
   const Container = as
+  const sev = normalizeCheckSeverity(severity)
+  const SeverityIcon = CHECK_SEVERITY_ICON[sev]
   return (
     <Container
       className={[
-        'overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm',
+        'overflow-hidden rounded-xl border bg-theme-surface transition-[border-color,box-shadow] duration-200',
+        // The open card lifts via elevation — heavier shadow + a bright
+        // emphasis edge that clearly separates it from sibling cards. Severity
+        // stays rationed to the band + pill; separation is depth, not more color.
+        // ring-1 widens the edge to 2px without the layout shift a border-2
+        // swap would cause on expand.
+        open ? 'border-[var(--border-emphasis)] ring-1 ring-[var(--border-emphasis)] shadow-theme-md' : 'border-theme-border shadow-theme-sm',
         dimmed ? 'opacity-60' : '',
         className ?? '',
       ]
         .filter(Boolean)
         .join(' ')}
     >
+      {/* Leading severity icon is the at-a-glance cue; a trailing chevron shows
+          open/closed. Collapsed: neutral row + rail. Expanded: severity-tinted
+          band + solid pill — the tint is a focus signal, not per-row alarm. */}
       <div
         role="button"
         tabIndex={0}
@@ -522,31 +551,33 @@ export function CheckCardShell({
             onToggle()
           }
         }}
-        className={`group flex cursor-pointer items-start gap-3 border-l-2 py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${SEVERITY_RAIL_CLASS[severity]}`}
+        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? SEVERITY_HEADER_BAND_CLASS[sev] : SEVERITY_RAIL_CLASS[sev]}`}
       >
-        <ChevronRight className={`mt-0.5 h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${SEVERITY_TEXT_CLASS[sev]}`} aria-hidden />
 
         <div className="flex min-w-0 flex-1 flex-col gap-1.5">
           <div className="flex flex-wrap items-center gap-2">
             <span className="truncate text-sm font-semibold text-theme-text-primary">{title}</span>
-            <span className={`badge-sm shrink-0 text-[10px] ${categoryBadgeClass(category)}`}>{category}</span>
+            <span className={`shrink-0 ${NEUTRAL_CHIP_CLASS}`}>{category}</span>
           </div>
           {description}
           {summary}
         </div>
 
-        <span className={`badge-sm mt-0.5 shrink-0 text-[10px] font-semibold ${SEVERITY_BADGE_CLASS[severity]}`}>
-          {SEVERITY_LABEL[severity]}
+        <span className={`badge-sm shrink-0 px-2.5 py-0.5 text-xs font-semibold ${open ? SEVERITY_SOLID_CLASS[sev] : SEVERITY_BADGE_CLASS[sev]}`}>
+          {SEVERITY_LABEL[sev]}
         </span>
         {renderActions?.()}
+        <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
       </div>
 
       {/* Kept mounted (not `open &&`) so the grid-rows transition animates the
           collapse too, matching IssueRow; inert when closed so SR + tab skip
-          the clipped content. */}
+          the clipped content. Body sits on the card surface (not a recessed grey
+          panel) so its text keeps enough contrast. */}
       <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
         <div className="overflow-hidden" inert={!open || undefined}>
-          <div className="flex flex-col gap-4 border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">{children}</div>
+          <div className="flex flex-col divide-y divide-theme-border/70 border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">{children}</div>
         </div>
       </div>
     </Container>
@@ -561,7 +592,9 @@ export interface CheckClusterBreakdownGroup {
 }
 
 export interface CheckClusterBreakdownShellProps<T extends CheckClusterBreakdownGroup> {
-  heading: ReactNode
+  /** Optional section heading. Omit when the caller already provides one (e.g.
+   *  a wrapping CardSection owns the "Affected resources" eyebrow). */
+  heading?: ReactNode
   groups: T[]
   renderGroupBody: (group: T) => ReactNode
   clusterCap?: number
@@ -584,7 +617,7 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
 
   return (
     <section className="flex flex-col gap-1.5">
-      <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{heading}</h4>
+      {heading ? <h4 className="text-[11px] font-semibold uppercase tracking-[0.06em] text-theme-text-tertiary">{heading}</h4> : null}
       <ul className="flex flex-col gap-1">
         {shown.map((group) => {
           const isOpen = openClusters.has(group.id)
@@ -687,18 +720,17 @@ function FleetCheckRow({
     >
       <CheckRemediationBlock description={meta?.description} remediation={meta?.remediation} references={meta?.references} />
 
-      <div className="border-t border-theme-border/70 pt-3">
+      <CardSection
+        icon={Layers}
+        label="Affected resources"
+        labelExtra={single ? `· ${fc.totalResources}` : `· ${fc.totalResources} · ${clusterCount} clusters`}
+      >
         {single ? (
-          <ResourceList
-            label={`Affected resources (${fc.totalResources})`}
-            check={fc.clusters[0]}
-            resourceHref={resourceHref}
-            onResourceClick={onResourceClick}
-          />
+          <ResourceList check={fc.clusters[0]} resourceHref={resourceHref} onResourceClick={onResourceClick} />
         ) : (
           <ClusterBreakdown fc={fc} clusterLabel={clusterLabel} resourceHref={resourceHref} onResourceClick={onResourceClick} />
         )}
-      </div>
+      </CardSection>
     </CheckCardShell>
   )
 }
@@ -720,11 +752,8 @@ function ClusterBreakdown({
 }) {
   return (
     <CheckClusterBreakdownShell
-      heading={
-        <>
-          Affected resources <span className="tabular-nums">({fc.totalResources})</span> · {fc.clusters.length} clusters
-        </>
-      }
+      // Heading omitted — the wrapping CardSection (Layers · "Affected
+      // resources") already owns the eyebrow.
       groups={fc.clusters.map((c) => ({
         id: c.subject.cluster_id,
         label: <ClusterName name={clusterLabel?.(c) || c.subject.cluster_id} />,
@@ -822,7 +851,9 @@ function FindingLine({
       {showMessage && <span className="ml-1 truncate text-xs text-theme-text-tertiary">{finding.message}</span>}
     </>
   )
-  const cls = 'group/f flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-theme-hover/60'
+  // items-baseline so the smaller mono kind label shares a baseline with the
+  // larger resource name (their line-heights differ).
+  const cls = 'group/f flex w-full items-baseline gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-theme-hover/60'
   return (
     <li>
       {onResourceClick ? (

package/src/components/checks/severity.ts

@@ -1,9 +1,32 @@
 import type { CheckSeverity } from './types'
 import { BADGE_SEVERITY_COLORS as sev } from '../ui/Badge'
+import {
+  TONE_FILL_CLASS,
+  TONE_HEADER_BAND_CLASS,
+  TONE_RAIL_CLASS,
+  TONE_SOLID_CLASS,
+  TONE_TEXT_CLASS,
+  type SeverityTone,
+} from '../ui/severity-tone'
 
 // The visual language for the 4-tier Checks severity ladder. One hue per tier:
 // red=critical, orange=high, amber=medium, neutral=low — read the queue's left
-// rail top-to-bottom and severity is obvious without reading a word.
+// rail top-to-bottom and severity is obvious without reading a word. The actual
+// color strings are shared with the Issue card via the tone module; here we only
+// map each tier onto its tone.
+const CHECK_SEVERITY_TONE: Record<CheckSeverity, SeverityTone> = {
+  critical: 'red',
+  high: 'orange',
+  medium: 'amber',
+  low: 'slate',
+}
+
+const byTone = <T,>(toneMap: Record<SeverityTone, T>): Record<CheckSeverity, T> => ({
+  critical: toneMap[CHECK_SEVERITY_TONE.critical],
+  high: toneMap[CHECK_SEVERITY_TONE.high],
+  medium: toneMap[CHECK_SEVERITY_TONE.medium],
+  low: toneMap[CHECK_SEVERITY_TONE.low],
+})
 
 export const SEVERITY_LABEL: Record<CheckSeverity, string> = {
   critical: 'Critical',
@@ -23,41 +46,8 @@ export const SEVERITY_BADGE_CLASS: Record<CheckSeverity, string> = {
   low: sev.neutral,
 }
 
-// Solid fill — dots + the proportional distribution bar segments.
-export const SEVERITY_FILL_CLASS: Record<CheckSeverity, string> = {
-  critical: 'bg-red-500',
-  high: 'bg-orange-500',
-  medium: 'bg-amber-500',
-  low: 'bg-slate-400',
-}
-
-export const SEVERITY_TEXT_CLASS: Record<CheckSeverity, string> = {
-  critical: 'text-red-600 dark:text-red-400',
-  high: 'text-orange-600 dark:text-orange-400',
-  medium: 'text-amber-600 dark:text-amber-400',
-  low: 'text-slate-500 dark:text-slate-400',
-}
-
-// Left accent rail on a queue row — the scan-down severity cue. Pairs a colored
-// 2px border with a faint severity-tinted background that deepens on hover.
-export const SEVERITY_RAIL_CLASS: Record<CheckSeverity, string> = {
-  critical: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
-  high: 'border-l-orange-500 hover:bg-orange-50/40 dark:hover:bg-orange-950/20',
-  medium: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
-  low: 'border-l-slate-300 dark:border-l-slate-600 hover:bg-theme-hover/40',
-}
-
-// Category accent — a quiet tag (severity is the loud one). Security is the
-// headline beat, so it gets the most distinct hue.
-const CATEGORY_BADGE_CLASS: Record<string, string> = {
-  Security: 'bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-900',
-  Reliability: 'bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-900',
-  Efficiency: 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-950/40 dark:text-teal-300 dark:ring-teal-900',
-}
-
-export function categoryBadgeClass(category: string): string {
-  return (
-    CATEGORY_BADGE_CLASS[category] ??
-    'bg-theme-elevated text-theme-text-secondary ring-1 ring-theme-border'
-  )
-}
+export const SEVERITY_FILL_CLASS = byTone(TONE_FILL_CLASS)
+export const SEVERITY_TEXT_CLASS = byTone(TONE_TEXT_CLASS)
+export const SEVERITY_RAIL_CLASS = byTone(TONE_RAIL_CLASS)
+export const SEVERITY_SOLID_CLASS = byTone(TONE_SOLID_CLASS)
+export const SEVERITY_HEADER_BAND_CLASS = byTone(TONE_HEADER_BAND_CLASS)

package/src/components/gitops/GitOpsTableView.tsx

@@ -32,6 +32,7 @@ import { FacetSection, FacetButton } from '../ui/Facet'
 import { SortableTh, TH_CLASS, type SortDir } from '../ui/SortableTh'
 import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
+import { BoardTableSkeleton, BoardRailSkeleton } from '../ui/BoardSkeleton'
 import { getGitOpsResourceStatus } from './detail-helpers'
 import { isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
 import { toggleSet } from './GitOpsGraphFilterRail'
@@ -766,7 +767,7 @@ export function GitOpsTableView({
               {modeLabel(mode)} view is queued behind the application list.
             </div>
           ) : initialLoading ? (
-            <GitOpsTableSkeleton />
+            <BoardTableSkeleton />
           ) : error ? (
             <div className="p-4 text-sm text-red-500">Failed to load GitOps applications: {error.message}</div>
           ) : filteredRows.length === 0 ? (
@@ -816,60 +817,6 @@ export function GitOpsTableView({
 // GitOpsTableView's visual language and not generally useful elsewhere.
 // =============================================================================
 
-// Shape-stable loading stand-ins. Both mirror the loaded anatomy so data
-// resolves in place: rows appear inside the table frame, facets inside the
-// rail — no half-height rail dangling next to a centered spinner, no layout
-// jump when the response lands.
-function GitOpsTableSkeleton() {
-  return (
-    <div aria-live="polite" aria-label="Loading GitOps applications…" className="divide-y divide-theme-border-light">
-      {Array.from({ length: 10 }, (_, i) => (
-        <div key={i} className="flex items-center gap-6 px-4 py-3" style={{ opacity: 1 - i * 0.09 }}>
-          <div className="min-w-0 flex-[2] space-y-2">
-            <div className="h-4 w-2/3 animate-pulse rounded bg-theme-hover" />
-            <div className="h-3 w-1/2 animate-pulse rounded bg-theme-hover" />
-          </div>
-          <div className="hidden h-4 flex-1 animate-pulse rounded bg-theme-hover md:block" />
-          <div className="h-5 w-20 animate-pulse rounded-full bg-theme-hover" />
-          <div className="h-5 w-20 animate-pulse rounded-full bg-theme-hover" />
-          <div className="hidden h-4 flex-[1.5] animate-pulse rounded bg-theme-hover lg:block" />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function GitOpsSidebarSkeleton() {
-  // Section stubs sized like the loaded rail (Sync ~4 rows, Health ~5,
-  // Automation ~3, Projects/Namespaces a few each) so the rail keeps its
-  // height while counts are unknown — showing real facet buttons with "0"
-  // counts would be false zeros.
-  const sections: Array<[string, number]> = [
-    ['Sync', 4],
-    ['Health', 5],
-    ['Automation', 3],
-    ['Projects', 4],
-    ['Namespaces', 4],
-  ]
-  return (
-    <div aria-hidden>
-      {sections.map(([title, rows]) => (
-        <div key={title} className="border-b border-theme-border-light px-3 py-3">
-          <div className="mb-2 h-3 w-24 animate-pulse rounded bg-theme-hover" />
-          <div className="space-y-1.5">
-            {Array.from({ length: rows }, (_, i) => (
-              <div key={i} className="flex items-center justify-between px-1.5 py-1">
-                <div className="h-3.5 animate-pulse rounded bg-theme-hover" style={{ width: `${52 - i * 6}%` }} />
-                <div className="h-3.5 w-6 animate-pulse rounded bg-theme-hover" />
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
 function GitOpsFilterSidebar({
   loading,
   side,
@@ -936,7 +883,15 @@ function GitOpsFilterSidebar({
       </div>
       <div className="flex-1 overflow-y-auto">
         {loading ? (
-          <GitOpsSidebarSkeleton />
+          <BoardRailSkeleton
+            sections={[
+              ['Sync', 4],
+              ['Health', 5],
+              ['Automation', 3],
+              ['Projects', 4],
+              ['Namespaces', 4],
+            ]}
+          />
         ) : (
           <>
         {AVAILABLE_MODES.length > 1 && (