@skyhook-io/k8s-ui 1.8.8 → 1.8.10

package/src/components/resources/renderers/PodRenderer.test.tsx

@@ -107,3 +107,104 @@ describe('PodRenderer issues banner', () => {
     expect(html).toContain('min-w-0 break-words')
   })
 })
+
+describe('PodRenderer metrics', () => {
+  it('renders a calm unavailable state when metrics-server is absent', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsUnavailable
+        metricsHistory={{
+          containers: [],
+          metricsUnavailableReason: 'the server could not find the requested resource',
+        }}
+      />,
+    )
+
+    expect(html).toContain('Resource Usage')
+    expect(html).toContain('Metrics unavailable')
+    expect(html).toContain('Radar cannot read metrics.k8s.io')
+    expect(html).toContain('Metrics error details')
+    expect(html).not.toContain('Install or repair metrics-server and its APIService')
+    expect(html).not.toContain('Metrics collection error')
+    expect(html).not.toContain('Collecting metrics data')
+  })
+
+  it('does not let stale live metrics hide an unavailable state', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsUnavailable
+        metrics={{
+          containers: [{ name: 'api', usage: { cpu: '100m', memory: '256Mi' } }],
+          timestamp: '2026-06-30T00:00:00Z',
+        }}
+      />,
+    )
+
+    expect(html).toContain('Metrics unavailable')
+    expect(html).not.toContain('100m')
+    expect(html).not.toContain('Last updated')
+  })
+
+  it('keeps buffered historical charts visible under an unavailable notice', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsUnavailable
+        metricsHistory={{
+          containers: [{
+            name: 'api',
+            dataPoints: [{ timestamp: '2026-06-30T00:00:00Z', cpu: 100000000, memory: 268435456 }],
+          }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Metrics unavailable')
+    expect(html).toContain('CPU')
+    expect(html).toContain('Memory')
+    expect(html).not.toContain('Last updated')
+  })
+
+  it('keeps non-absence collection errors visible', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsHistory={{ containers: [], collectionError: 'forbidden: no access to pods.metrics.k8s.io' }}
+      />,
+    )
+
+    expect(html).toContain('Metrics collection error')
+    expect(html).toContain('forbidden: no access to pods.metrics.k8s.io')
+  })
+
+  it('warns about non-absence collection errors even when historical samples exist', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsHistory={{
+          collectionError: 'forbidden: no access to pods.metrics.k8s.io',
+          containers: [{
+            name: 'api',
+            dataPoints: [{ timestamp: '2026-06-30T00:00:00Z', cpu: 100000000, memory: 268435456 }],
+          }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Metrics collection error')
+    expect(html).toContain('forbidden: no access to pods.metrics.k8s.io')
+    expect(html).toContain('CPU')
+  })
+})

package/src/components/resources/renderers/PodRenderer.tsx

@@ -15,6 +15,7 @@ import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import type { ResolvedEnvFrom, RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
+import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 
 function parseValidDate(dateStr: string): Date | null {
   const d = new Date(dateStr)
@@ -73,7 +74,8 @@ interface PodRendererProps {
   renderPortAction?: (props: { namespace: string; podName: string; port: number; protocol: string; disabled?: boolean }) => ReactNode
   // Metrics data injection
   metrics?: { containers?: any[]; timestamp?: string }
-  metricsHistory?: { containers?: any[]; collectionError?: string }
+  metricsHistory?: { containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // Filesystem browser render props
   renderImageBrowser?: (props: { image: string; namespace: string; podName: string; pullSecrets: string[]; onClose: () => void; onSwitchToPodFiles?: () => void }) => ReactNode
@@ -257,6 +259,7 @@ export function PodRenderer({
   renderPortAction,
   metrics,
   metricsHistory,
+  metricsUnavailable,
   hideMetricsServer,
   renderImageBrowser,
   renderPodBrowser,
@@ -280,6 +283,9 @@ export function PodRenderer({
   const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
+  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
+  const hasMetricsHistory = !!metricsHistory?.containers?.length
+  const currentMetrics = metricsUnavailable ? undefined : metrics
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -718,89 +724,94 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(metrics?.containers?.length || metricsHistory?.containers?.length || metricsHistory?.collectionError) && (
+      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
-          {metricsHistory?.collectionError && !metricsHistory?.containers?.length && (
+          {showMetricsUnavailable && (
+            <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
+          )}
+          {metricsHistory?.collectionError && (
             <div className="mb-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 px-3 py-2 text-xs text-yellow-400">
               <span className="font-medium">Metrics collection error:</span>{' '}
               <span className="break-all">{metricsHistory.collectionError}</span>
             </div>
           )}
-          <div className="space-y-4">
-            {(metricsHistory?.containers || metrics?.containers || []).map((historyContainer) => {
-              // Find current metrics for this container
-              const currentMetrics = metrics?.containers?.find(c => c.name === historyContainer.name)
-              // Find the container spec to compare against limits
-              const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
-              const limits = containerSpec?.resources?.limits
-              const requests = containerSpec?.resources?.requests
-
-              // Get historical data points (from history or empty)
-              const dataPoints = 'dataPoints' in historyContainer ? historyContainer.dataPoints : []
+          {(hasMetricsHistory || !showMetricsUnavailable) && (
+            <div className="space-y-4">
+              {(metricsHistory?.containers || currentMetrics?.containers || []).map((historyContainer) => {
+                // Find current metrics for this container
+                const currentContainerMetrics = currentMetrics?.containers?.find(c => c.name === historyContainer.name)
+                // Find the container spec to compare against limits
+                const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
+                const limits = containerSpec?.resources?.limits
+                const requests = containerSpec?.resources?.requests
 
-              return (
-                <div key={historyContainer.name} className="card-inner-lg">
-                  <div className="flex items-center justify-between mb-3">
-                    <span className="text-sm font-medium text-theme-text-primary">{historyContainer.name}</span>
-                  </div>
+                // Get historical data points (from history or empty)
+                const dataPoints = 'dataPoints' in historyContainer ? historyContainer.dataPoints : []
 
-                  {dataPoints && dataPoints.length > 0 ? (
-                    <div className="grid grid-cols-2 gap-6">
-                      <div>
-                        <div className="text-xs text-theme-text-tertiary mb-2">CPU</div>
-                        <MetricsChart
-                          dataPoints={dataPoints}
-                          type="cpu"
-                          height={80}
-                          showAxis={true}
-                          limit={limits?.cpu}
-                          request={requests?.cpu}
-                        />
-                      </div>
-                      <div>
-                        <div className="text-xs text-theme-text-tertiary mb-2">Memory</div>
-                        <MetricsChart
-                          dataPoints={dataPoints}
-                          type="memory"
-                          height={80}
-                          showAxis={true}
-                          limit={limits?.memory}
-                          request={requests?.memory}
-                        />
-                      </div>
+                return (
+                  <div key={historyContainer.name} className="card-inner-lg">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-sm font-medium text-theme-text-primary">{historyContainer.name}</span>
                     </div>
-                  ) : currentMetrics ? (
-                    /* Fallback to simple display if no history yet */
-                    <div className="grid grid-cols-2 gap-4 text-xs">
-                      <div>
-                        <div className="text-theme-text-tertiary mb-1">CPU</div>
-                        <div className="flex items-baseline gap-1">
-                          <span className="text-sm font-medium text-blue-400">{currentMetrics.usage.cpu}</span>
-                          {limits?.cpu && (
-                            <span className="text-theme-text-tertiary">/ {limits.cpu} limit</span>
-                          )}
+
+                    {dataPoints && dataPoints.length > 0 ? (
+                      <div className="grid grid-cols-2 gap-6">
+                        <div>
+                          <div className="text-xs text-theme-text-tertiary mb-2">CPU</div>
+                          <MetricsChart
+                            dataPoints={dataPoints}
+                            type="cpu"
+                            height={80}
+                            showAxis={true}
+                            limit={limits?.cpu}
+                            request={requests?.cpu}
+                          />
+                        </div>
+                        <div>
+                          <div className="text-xs text-theme-text-tertiary mb-2">Memory</div>
+                          <MetricsChart
+                            dataPoints={dataPoints}
+                            type="memory"
+                            height={80}
+                            showAxis={true}
+                            limit={limits?.memory}
+                            request={requests?.memory}
+                          />
                         </div>
                       </div>
-                      <div>
-                        <div className="text-theme-text-tertiary mb-1">Memory</div>
-                        <div className="flex items-baseline gap-1">
-                          <span className="text-sm font-medium text-purple-400">{currentMetrics.usage.memory}</span>
-                          {limits?.memory && (
-                            <span className="text-theme-text-tertiary">/ {limits.memory} limit</span>
-                          )}
+                    ) : currentContainerMetrics ? (
+                      /* Fallback to simple display if no history yet */
+                      <div className="grid grid-cols-2 gap-4 text-xs">
+                        <div>
+                          <div className="text-theme-text-tertiary mb-1">CPU</div>
+                          <div className="flex items-baseline gap-1">
+                            <span className="text-sm font-medium text-blue-400">{currentContainerMetrics.usage.cpu}</span>
+                            {limits?.cpu && (
+                              <span className="text-theme-text-tertiary">/ {limits.cpu} limit</span>
+                            )}
+                          </div>
+                        </div>
+                        <div>
+                          <div className="text-theme-text-tertiary mb-1">Memory</div>
+                          <div className="flex items-baseline gap-1">
+                            <span className="text-sm font-medium text-purple-400">{currentContainerMetrics.usage.memory}</span>
+                            {limits?.memory && (
+                              <span className="text-theme-text-tertiary">/ {limits.memory} limit</span>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ) : (
-                    <div className="text-xs text-theme-text-tertiary">Collecting metrics data...</div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-          {metrics?.timestamp && (
+                    ) : (
+                      <div className="text-xs text-theme-text-tertiary">Collecting metrics data...</div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {!showMetricsUnavailable && currentMetrics?.timestamp && (
             <div className="mt-2 text-xs text-theme-text-tertiary">
-              Last updated: {new Date(metrics.timestamp).toLocaleTimeString()}
+              Last updated: {new Date(currentMetrics.timestamp).toLocaleTimeString()}
             </div>
           )}
         </Section>

package/src/components/ui/BoardSkeleton.tsx

@@ -0,0 +1,47 @@
+// Shape-stable loading stand-ins for the list-board chassis (GitOps,
+// Applications). 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.
+
+export function BoardTableSkeleton({ rows = 10 }: { rows?: number }) {
+  return (
+    <div aria-live="polite" aria-label="Loading…" className="divide-y divide-theme-border-light">
+      {Array.from({ length: rows }, (_, 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>
+  )
+}
+
+// Section stubs sized like the loaded rail so it keeps its height while
+// counts are unknown — real facet buttons with "0" counts would be false
+// zeros. `sections` = [title, rowCount] pairs approximating the loaded rail.
+export function BoardRailSkeleton({ sections }: { sections: Array<[string, number]> }) {
+  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>
+  )
+}

package/src/components/ui/CardSection.tsx

@@ -0,0 +1,117 @@
+import { Fragment, type ComponentType, type ReactNode } from 'react'
+
+// =============================================================================
+// CARD SECTION PRIMITIVES — the shared "Sectioned + icons" vocabulary used by
+// the Issue card (IssuesView) and the Check card (ChecksView) so both read as
+// one product: ONE eyebrow style, an icon gutter per section, and a single body
+// contrast floor (body text is never lighter than the secondary token, so it
+// stays legible on the card surface). Severity is the only status color; section
+// icons carry quiet role hues (what's-wrong = amber, fix = emerald, neutral =
+// grey).
+// =============================================================================
+
+// Section role → eyebrow + icon hue. Body text always uses the secondary token
+// (the contrast floor), regardless of tone.
+export type CardSectionTone = 'neutral' | 'warn' | 'fix'
+
+const SECTION_TONE_CLASS: Record<CardSectionTone, string> = {
+  // Eyebrow grey — the default, for neutral sections (Why it matters, Raw error,
+  // Affected resources, Context, Subject).
+  neutral: 'text-theme-text-tertiary',
+  // What's wrong — amber, the diagnosis beat.
+  warn: 'text-amber-700 dark:text-amber-300',
+  // Next step / How to fix — emerald, the action beat.
+  fix: 'text-emerald-700 dark:text-emerald-400',
+}
+
+// The single eyebrow style: 11px / 600 / uppercase, with an icon in a fixed
+// gutter so every section's body aligns under the same left edge.
+export function CardSection({
+  icon: Icon,
+  label,
+  tone = 'neutral',
+  labelExtra,
+  children,
+}: {
+  icon: ComponentType<{ className?: string }>
+  label: string
+  tone?: CardSectionTone
+  /** Optional trailing eyebrow text (e.g. "· retried 5×"), rendered muted. */
+  labelExtra?: ReactNode
+  children: ReactNode
+}) {
+  const toneClass = SECTION_TONE_CLASS[tone]
+  return (
+    <section className="flex items-start gap-2.5">
+      {/* Icon sits in a fixed gutter, anchored to the eyebrow line (top-aligned
+          with a nudge to its optical center) — sections like Affected resources
+          can be dozens of rows tall, and a section-centered glyph would float
+          detached mid-list. */}
+      <Icon className={`mt-[-1px] h-[18px] w-[18px] shrink-0 ${toneClass}`} aria-hidden />
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <h4 className={`text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}>
+          {label}
+          {labelExtra ? <span className="font-medium normal-case tracking-normal text-theme-text-tertiary"> {labelExtra}</span> : null}
+        </h4>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+// Body paragraph at the contrast floor — 14px, secondary token, never lighter.
+export function CardBody({ children, className }: { children: ReactNode; className?: string }) {
+  return <p className={`text-sm leading-relaxed text-theme-text-secondary ${className ?? ''}`}>{children}</p>
+}
+
+// The dark terminal block for raw error output. Intentionally dark in BOTH
+// themes (it's a console surface, not chrome), so it draws from the dedicated
+// --terminal-* tokens rather than the theme surface tokens.
+export function TerminalBlock({ label, children }: { label?: ReactNode; children: ReactNode }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-[var(--terminal-border)] bg-[var(--terminal-bg)]">
+      {label ? (
+        <div className="border-b border-[var(--terminal-divider)] px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-[var(--terminal-label)]">
+          {label}
+        </div>
+      ) : null}
+      <pre className="overflow-x-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs leading-relaxed text-[var(--terminal-text)]">
+        {children}
+      </pre>
+    </div>
+  )
+}
+
+// The neutral category chip — drops the per-category hue so severity is the only
+// status color. Self-contained (don't pair with badge-sm): 11px / 600, 2px×8px
+// padding, no border, neutral grey.
+export const NEUTRAL_CHIP_CLASS =
+  'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-secondary'
+
+// Mono kind chip — the grey tag for an all-caps resource Kind (the Issue row
+// header + the Subject footer row). Mono and tighter than NEUTRAL_CHIP_CLASS,
+// which carries the label/category chips.
+export const KIND_CHIP_CLASS =
+  'shrink-0 rounded bg-theme-elevated px-1.5 py-px font-mono text-[11px] uppercase text-theme-text-secondary'
+
+// Render a prose string, turning markdown `inline-code` spans into mono chips
+// via the shared .inline-code class. Plain-text passthrough when the string
+// carries no backticks, so it's a no-op for today's plain catalog copy and
+// lights up automatically once backtick markup is added.
+export function renderProse(text: string | undefined | null): ReactNode {
+  if (!text) return null
+  if (!text.includes('`')) return text
+  const parts = text.split(/(`[^`]+`)/g)
+  return parts.map((part, i) => {
+    // length > 2 excludes a bare "``" (which the split leaves in a plain part)
+    // so it renders as literal text, not an empty chip.
+    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+      return (
+        <code key={i} className="inline-code">
+          {part.slice(1, -1)}
+        </code>
+      )
+    }
+    return <Fragment key={i}>{part}</Fragment>
+  })
+}

package/src/components/ui/SummaryTile.tsx

@@ -12,12 +12,16 @@ export function SummaryTile({
   tone = 'neutral',
   onClick,
   active = false,
+  loading = false,
 }: {
   label: string
   value: number
   tone?: SummaryTone
   onClick?: () => void
   active?: boolean
+  /** First fetch in flight — render a pulse instead of the value. A tile
+   *  that reads "0" while loading is a false zero, not a count. */
+  loading?: boolean
 }) {
   const toneClass = {
     neutral: 'text-theme-text-primary',
@@ -33,7 +37,11 @@ export function SummaryTile({
     error: 'border-red-500',
     info: 'border-sky-500',
   }[tone]
-  const value$ = <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
+  const value$ = loading ? (
+    <div className="my-1 h-3.5 w-8 animate-pulse rounded bg-theme-hover" aria-hidden />
+  ) : (
+    <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
+  )
   const label$ = <div className="text-xs text-theme-text-tertiary">{label}</div>
   if (!onClick) {
     return (

package/src/components/ui/Toast.tsx

@@ -215,7 +215,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
             <button
               onClick={toast.onDetailClick}
               className={clsx(
-                'mt-1.5 block text-xs font-mono break-all text-left rounded px-1.5 py-1 -ml-1.5 transition-colors',
+                'mt-1.5 block text-xs font-mono break-words text-left rounded px-1.5 py-1 -ml-1.5 transition-colors',
                 isError
                   ? 'text-red-300 hover:bg-red-900/50'
                   : isSuccess

package/src/components/ui/index.ts

@@ -38,3 +38,5 @@ export { DistributionBar, DistributionLegendChip } from './DistributionBar'
 export type { DistributionSegment } from './DistributionBar'
 export { SearchPillInput } from './SearchPillInput'
 export type { SearchModifier, SearchPillInputProps } from './SearchPillInput'
+export { CardSection, CardBody, TerminalBlock, renderProse, NEUTRAL_CHIP_CLASS, KIND_CHIP_CLASS } from './CardSection'
+export type { CardSectionTone } from './CardSection'

package/src/components/ui/severity-tone.ts

@@ -0,0 +1,56 @@
+// Shared severity color vocabulary. The Issue card (2-tier: critical/warning)
+// and the Check card (4-tier: critical/high/medium/low) are different severity
+// axes, but every tier resolves to one of four hues — so the color strings live
+// here once and each card maps its own severity enum onto a tone. A palette
+// change lands in one place instead of drifting between the two cards.
+//
+// Literal class strings (no template interpolation) so Tailwind's scanner sees
+// every utility.
+
+export type SeverityTone = 'red' | 'orange' | 'amber' | 'slate'
+
+// Text color — leading severity glyph + emphasis text.
+export const TONE_TEXT_CLASS: Record<SeverityTone, string> = {
+  red: 'text-red-600 dark:text-red-400',
+  orange: 'text-orange-600 dark:text-orange-400',
+  amber: 'text-amber-600 dark:text-amber-400',
+  slate: 'text-slate-500 dark:text-slate-400',
+}
+
+// Solid fill — dots + the proportional distribution-bar segments.
+export const TONE_FILL_CLASS: Record<SeverityTone, string> = {
+  red: 'bg-red-500',
+  orange: 'bg-orange-500',
+  amber: 'bg-amber-500',
+  slate: 'bg-slate-400',
+}
+
+// Left accent rail on a collapsed queue row — the scan-down severity cue + a
+// faint hover tint. The expanded row swaps this for the header band below.
+export const TONE_RAIL_CLASS: Record<SeverityTone, string> = {
+  red: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
+  orange: 'border-l-orange-500 hover:bg-orange-50/40 dark:hover:bg-orange-950/20',
+  amber: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
+  slate: 'border-l-slate-300 dark:border-l-slate-600 hover:bg-theme-hover/40',
+}
+
+// Solid severity pill — the loud focus signal on an expanded card's header band
+// (collapsed cards keep the soft BADGE pill so a long queue stays calm).
+// The warm mid-tones (orange/amber) take dark text: white on orange-600/amber-500
+// sits at ~3.5:1/~2.1:1, below WCAG for the 12px pill text.
+export const TONE_SOLID_CLASS: Record<SeverityTone, string> = {
+  red: 'bg-red-600 text-white',
+  orange: 'bg-orange-500 text-orange-950',
+  amber: 'bg-amber-400 text-amber-950',
+  slate: 'bg-slate-500 text-white dark:bg-slate-600',
+}
+
+// Severity-tinted header band, shown only when a card is expanded. The left
+// rail keeps its color so the queue's scan-down severity rhythm doesn't break
+// at the focused row; no hover variant, so it doesn't lighten on hover.
+export const TONE_HEADER_BAND_CLASS: Record<SeverityTone, string> = {
+  red: 'border-l-red-500 bg-red-50 dark:bg-red-950/40',
+  orange: 'border-l-orange-500 bg-orange-50 dark:bg-orange-950/30',
+  amber: 'border-l-amber-500 bg-amber-50 dark:bg-amber-950/30',
+  slate: 'border-l-slate-300 dark:border-l-slate-600 bg-slate-50 dark:bg-slate-900/40',
+}