@skyhook-io/k8s-ui 1.8.8 → 1.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.8",
+  "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,7 +5,9 @@ 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'
 import { SummaryTile, type SummaryTone } from '../ui/SummaryTile'
 import { Facet, type FacetTone } from '../ui/Facet'
@@ -99,16 +101,34 @@ 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
 }
 
-export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions }: ApplicationsViewProps) {
-  const [textFilter, setTextFilter] = useState('')
-  const [fHealth, setFHealth] = useState<Set<AppHealth>>(new Set())
-  const [fEnv, setFEnv] = useState<Set<string>>(new Set())
-  const [fSource, setFSource] = useState<Set<AppSource>>(new Set())
-  const [fClass, setFClass] = useState<Set<AppWorkloadClass>>(new Set())
-  const [fType, setFType] = useState<Set<AppCategory>>(new Set())
-  const [showSystem, setShowSystem] = useState(false)
+const APPS_FILTER_SCHEMA = defineFilterSchema({
+  health: { param: 'health', type: 'set' },
+  class: { param: 'class', type: 'set' },
+  type: { param: 'type', type: 'set' },
+  env: { param: 'env', type: 'set' },
+  source: { param: 'source', type: 'set' },
+  q: { param: 'q', type: 'text' },
+  system: { param: 'system', type: 'boolean' },
+})
+
+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
+  // forced into the filter vocabulary.
+  const filters = useFilterState(APPS_FILTER_SCHEMA)
+  const textFilter = filters.values.q
+  const fHealth = filters.values.health as Set<AppHealth>
+  const fEnv = filters.values.env
+  const fSource = filters.values.source as Set<AppSource>
+  const fClass = filters.values.class as Set<AppWorkloadClass>
+  const fType = filters.values.type as Set<AppCategory>
+  const showSystem = filters.values.system
   const [sort, setSort] = useState<{ key: SortKey; dir: SortDir } | null>(null)
 
   // The Show-system toggle keys off per-entry workload namespaces, which only
@@ -244,12 +264,6 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
     return { health, env, source, workloadClass, category }
   }, [all])
 
-  const toggle = <T,>(set: Set<T>, setter: (s: Set<T>) => void, v: T) => {
-    const next = new Set(set)
-    next.has(v) ? next.delete(v) : next.add(v)
-    setter(next)
-  }
-
   // asc → desc → off (null = default health-worst-first sort).
   const onSort = (key: SortKey) => {
     setSort((prev) => {
@@ -264,23 +278,24 @@ 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] ? (
-      <SummaryTile key={h} label={HEALTH_META[h].label} value={counts.health[h]} tone={tone} active={fHealth.has(h)} onClick={() => toggle(fHealth, setFHealth, 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
 
   // showSystem lives in the Filters rail, so Clear resets it too (and its
   // non-default ON state counts as an active filter that surfaces the button).
-  const anyFilterActive = !!(textFilter || fHealth.size || fClass.size || fType.size || fSource.size || fEnv.size || showSystem)
+  const anyFilterActive = filters.isActive
   const clearAllFilters = () => {
-    setTextFilter('')
-    setFHealth(new Set())
-    setFClass(new Set())
-    setFType(new Set())
-    setFSource(new Set())
-    setFEnv(new Set())
-    setShowSystem(false)
+    filters.clearAll()
   }
 
   return (
@@ -297,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')}
@@ -306,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). */}
@@ -326,18 +345,32 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             )}
           </div>
           <div className="flex-1 overflow-y-auto">
-            <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) => toggle(fHealth, setFHealth, 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) => toggle(fClass, setFClass, 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) => toggle(fType, setFType, v)} />
-            <Facet icon={Globe} title="Environment" info={<EnvHint />} options={envOptions} selected={fEnv} onToggle={(v) => toggle(fEnv, setFEnv, v)} />
-            <Facet icon={Tag} title="Source" options={SOURCE_ORDER.map((s) => ({ value: s, label: SOURCE_META[s].label, count: counts.source[s] ?? 0 }))} selected={fSource} onToggle={(v) => toggle(fSource, setFSource, v)} />
+            {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)} />
+            <Facet icon={Globe} title="Environment" info={<EnvHint />} options={envOptions} selected={fEnv} onToggle={(v) => filters.toggle('env', v)} />
+            <Facet icon={Tag} title="Source" options={SOURCE_ORDER.map((s) => ({ value: s, label: SOURCE_META[s].label, count: counts.source[s] ?? 0 }))} selected={fSource} onToggle={(v) => filters.toggle('source', v)} />
             {systemCount > 0 && (
               <label className="flex cursor-pointer items-center gap-2 border-b border-theme-border px-3 py-2 text-[11px] text-theme-text-secondary hover:bg-theme-hover">
-                <input type="checkbox" checked={showSystem} onChange={(e) => setShowSystem(e.target.checked)} className="accent-skyhook-500" />
+                <input type="checkbox" checked={showSystem} onChange={(e) => filters.setBoolean('system', e.target.checked)} className="accent-skyhook-500" />
                 <span>Show system namespaces</span>
                 <span className="ml-auto tabular-nums text-theme-text-tertiary">{systemCount}</span>
               </label>
             )}
+              </>
+            )}
           </div>
         </aside>
 
@@ -346,7 +379,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           <div className="flex shrink-0 items-center gap-3 border-b border-theme-border px-4 py-3">
             <SearchBox
               value={textFilter}
-              onChange={setTextFilter}
+              onChange={(v) => filters.setString('q', v)}
               scope="applications"
               shortcutId="applications-search"
               className="max-w-md flex-1"
@@ -365,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,20 +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.
@@ -79,11 +99,24 @@ interface FleetCheck {
   clusters: Check[]
 }
 
+const CHECKS_FILTER_SCHEMA = defineFilterSchema({
+  severity: { param: 'severity', type: 'set' },
+  category: { param: 'category', type: 'set' },
+  framework: { param: 'framework', type: 'set' },
+  q: { param: 'q', type: 'text' },
+})
+
 export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
-  const [severityFilter, setSeverityFilter] = useState<Set<CheckSeverity>>(new Set())
-  const [categoryFilter, setCategoryFilter] = useState<Set<string>>(new Set())
-  const [frameworkFilter, setFrameworkFilter] = useState<Set<string>>(new Set())
-  const [search, setSearch] = useState('')
+  // Severity / category / framework / search live in the URL (shareable,
+  // bookmarkable audit links) via the shared filter-state contract. The cluster
+  // facet is deliberately NOT here — it's a host-controlled seam (see
+  // onClusterFilterChange) for the multi-cluster/fleet case and isn't shown in
+  // single-cluster OSS, so it stays on its own controlled/internal path.
+  const filters = useFilterState(CHECKS_FILTER_SCHEMA)
+  const severityFilter = filters.values.severity as Set<CheckSeverity>
+  const categoryFilter = filters.values.category
+  const frameworkFilter = filters.values.framework
+  const search = filters.values.q
   const [openId, setOpenId] = useState<string | null>(null)
 
   // Cluster facet is controlled when the host opts in (onClusterFilterChange);
@@ -209,13 +242,10 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
       return next
     })
 
-  const hasFilters = severityFilter.size > 0 || categoryFilter.size > 0 || frameworkFilter.size > 0 || clusterFilter.size > 0 || search !== ''
+  const hasFilters = filters.isActive || clusterFilter.size > 0
   const clearAll = () => {
-    setSeverityFilter(new Set())
-    setCategoryFilter(new Set())
-    setFrameworkFilter(new Set())
+    filters.clearAll()
     setClusterFilter(new Set())
-    setSearch('')
   }
 
   return (
@@ -239,13 +269,13 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
               type="text"
               placeholder="Search checks…"
               value={search}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) => filters.setString('q', e.target.value)}
               className="w-64 rounded-lg border border-theme-border-light bg-theme-base py-1.5 pl-9 pr-8 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-[var(--color-radar-accent)]"
             />
             {search && (
               <button
                 type="button"
-                onClick={() => setSearch('')}
+                onClick={() => filters.setString('q', '')}
                 aria-label="Clear search"
                 className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-theme-text-tertiary hover:text-theme-text-primary"
               >
@@ -259,17 +289,17 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
 
         <div className="flex flex-wrap items-center gap-1.5">
           {CHECK_SEVERITIES.map((s) => (
-            <CheckSeverityChip key={s} severity={s} count={totals[s]} active={severityFilter.has(s)} onClick={() => toggle(setSeverityFilter, s)} />
+            <CheckSeverityChip key={s} severity={s} count={totals[s]} active={severityFilter.has(s)} onClick={() => filters.toggle('severity', s)} />
           ))}
           <span className="mx-1.5 h-5 w-px bg-theme-border" />
           {CATEGORIES.map((c) => (
-            <FilterPill key={c} label={c} active={categoryFilter.has(c)} onClick={() => toggle(setCategoryFilter, c)} />
+            <FilterPill key={c} label={c} active={categoryFilter.has(c)} onClick={() => filters.toggle('category', c)} />
           ))}
           {frameworks.length > 0 && (
             <>
               <span className="mx-1.5 h-5 w-px bg-theme-border" />
               {frameworks.map((fw) => (
-                <FilterPill key={fw} label={fw} active={frameworkFilter.has(fw)} onClick={() => toggle(setFrameworkFilter, fw)} />
+                <FilterPill key={fw} label={fw} active={frameworkFilter.has(fw)} onClick={() => filters.toggle('framework', fw)} />
               ))}
             </>
           )}
@@ -399,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} />}
@@ -418,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>
   )
 }
 
@@ -489,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}
@@ -511,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>
@@ -550,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
@@ -573,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)
@@ -676,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>
   )
 }
@@ -709,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} />,
@@ -811,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)