@skyhook-io/k8s-ui 1.8.9 → 1.8.11

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, Input, 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.
@@ -246,8 +265,7 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
           </div>
           <div className="relative">
             <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-theme-text-tertiary" />
-            <input
-              type="text"
+            <Input
               placeholder="Search checks…"
               value={search}
               onChange={(e) => filters.setString('q', e.target.value)}
@@ -410,17 +428,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 +452,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 +517,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 +550,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 +591,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 +616,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 +719,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 +751,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 +850,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,33 @@
 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.
+// red=critical, orange=high, yellow=medium, neutral=low — read the queue's left
+// rail top-to-bottom and severity is obvious without reading a word. Medium is
+// yellow (not amber) so it sits a clear hue-step below high's orange rather than
+// blurring into it. The 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: 'yellow',
+  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',
@@ -12,52 +36,22 @@ export const SEVERITY_LABEL: Record<CheckSeverity, string> = {
   low: 'Low',
 }
 
-// Pill badge — the loud, explicit severity signal on rows + drawer header.
-// Uses the canonical Badge severity tones (BADGE_SEVERITY_COLORS) so the queue's
-// severity pills read identically to status badges everywhere else (rendered
-// with `badge-sm`).
+// Soft pill badge — the loud, explicit severity signal on rows + drawer header.
+// Critical/high/low reuse the canonical Badge tones; medium takes an explicit
+// yellow (matching its tone above) rather than the shared amber `warning` tone,
+// so it reads a clear step below high's orange without shifting the amber
+// `warning` badge used elsewhere (Issues, GitOps). yellow-800 on yellow-100
+// clears WCAG for the pill text.
 export const SEVERITY_BADGE_CLASS: Record<CheckSeverity, string> = {
   critical: sev.error,
   high: sev.alert,
-  medium: sev.warning,
+  medium:
+    'bg-yellow-100 text-yellow-800 border-yellow-300 dark:bg-yellow-950/50 dark:text-yellow-400 dark:border-yellow-700/40',
   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/cluster-switcher/ClusterSwitcher.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react'
 import { ChevronDown, Check, FolderOpen, Loader2, Search, Server, X } from 'lucide-react'
 import { ClusterName } from '../ui/ClusterName'
+import { Input } from '../ui/Input'
 import { MiddleEllipsis } from '../ui/MiddleEllipsis'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
 
@@ -269,9 +270,8 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
             <div className="p-2 border-b border-theme-border">
               <div className="relative">
                 <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
-                <input
+                <Input
                   ref={searchInputRef}
-                  type="text"
                   value={search}
                   onChange={e => setSearch(e.target.value)}
                   onKeyDown={onSearchKeyDown}

package/src/components/compare/CompareResourcePicker.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { clsx } from 'clsx'
 import { GitCompare, Search, X } from 'lucide-react'
 import { DialogPortal } from '../ui/DialogPortal'
+import { Input } from '../ui/Input'
 import { pluralToKind } from '../../utils/navigation'
 import type { CompareResourceRef } from './ResourceCompareView'
 import { sortCandidates, filterCandidates } from './sort'
@@ -120,9 +121,8 @@ export function CompareResourcePicker({
         </div>
         <div className="relative">
           <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-theme-text-tertiary pointer-events-none" />
-          <input
+          <Input
             autoFocus
-            type="text"
             value={query}
             onChange={e => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}

package/src/components/gitops/GitOpsGraphFilterRail.tsx

@@ -1,6 +1,7 @@
 import { CheckCircle2, CircleDot, GitBranch, HeartPulse, LayoutGrid, List, Search } from 'lucide-react'
 
 import { GitOpsFacetButton, GitOpsFilterSection } from './GitOpsTableView'
+import { Input } from '../ui/Input'
 import type { GitOpsResourceTree } from '../../types/gitops-tree'
 import type { GitOpsTreePreset } from './tree'
 
@@ -79,7 +80,7 @@ export function GitOpsGraphFilterRail({
       <div className="border-b border-theme-border px-3 py-3">
         <div className="relative">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-theme-text-tertiary" />
-          <input
+          <Input
             value={search}
             onChange={(event) => onSearchChange(event.target.value)}
             placeholder="Filter resources..."

package/src/components/gitops/GitOpsTableView.tsx

@@ -26,12 +26,14 @@ import {
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '../ui/Input'
 import { PageHeader } from '../ui/PageHeader'
 import { SummaryTile, type SummaryTone } from '../ui/SummaryTile'
 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'
@@ -686,7 +688,7 @@ export function GitOpsTableView({
           <div className="mt-3 flex flex-wrap items-center gap-2">
             <div className="relative w-full max-w-md">
               <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-theme-text-tertiary" />
-              <input
+              <Input
                 ref={searchInputRef}
                 value={search}
                 onChange={(e) => filters.setString('q', e.target.value)}
@@ -766,7 +768,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 +818,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 +884,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 && (
@@ -1174,8 +1130,7 @@ function LabelsDropdown({
             <div className="flex items-center gap-2">
               <div className="relative flex-1">
                 <Search className="pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-theme-text-tertiary" />
-                <input
-                  type="text"
+                <Input
                   value={search}
                   onChange={(e) => onSearchChange(e.target.value)}
                   placeholder="Search labels..."

package/src/components/gitops/ManagedResourcesList.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
-import { ChevronDown, ChevronRight, Package, ExternalLink } from 'lucide-react'
+import { Package, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { ManagedResource, GitOpsHealthStatus } from '../../types/gitops'
 import { groupManagedResourcesByKind } from '../../types/gitops'
 import { pluralize } from '../../utils/pluralize'
+import { Collapse, CollapseChevron } from '../ui/Collapse'
 
 interface ManagedResourcesListProps {
   resources: ManagedResource[]
@@ -45,18 +46,14 @@ export function ManagedResourcesList({
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
       >
-        {expanded ? (
-          <ChevronDown className="w-4 h-4 text-theme-text-tertiary" />
-        ) : (
-          <ChevronRight className="w-4 h-4 text-theme-text-tertiary" />
-        )}
+        <CollapseChevron open={expanded} className="w-4 h-4" />
         <Package className="w-4 h-4 text-theme-text-secondary" />
         <span className="text-sm font-medium text-theme-text-secondary">
           {title} ({resources.length})
         </span>
       </button>
 
-      {expanded && (
+      <Collapse open={expanded} mountLazily>
         <div className="pl-6 space-y-3">
           {sortedGroups.map(([kind, kindResources]) => (
             <ResourceKindGroup
@@ -77,7 +74,7 @@ export function ManagedResourcesList({
             </button>
           )}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }
@@ -98,12 +95,12 @@ function ResourceKindGroup({ kind, resources, onResourceClick, showHealth }: Res
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-1.5 text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors mb-1"
       >
-        {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        <CollapseChevron open={expanded} className="w-3 h-3" />
         <span className="font-medium">{kind}</span>
         <span className="text-theme-text-tertiary">({resources.length})</span>
       </button>
 
-      {expanded && (
+      <Collapse open={expanded} mountLazily>
         <div className="ml-4 space-y-0.5">
           {resources.map((resource, idx) => (
             <ResourceItem
@@ -114,7 +111,7 @@ function ResourceKindGroup({ kind, resources, onResourceClick, showHealth }: Res
             />
           ))}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

package/src/components/gitops/SyncCountdown.tsx

@@ -93,23 +93,32 @@ function parseInterval(interval: string): number | null {
   if (!interval) return null
 
   let totalSeconds = 0
-  const regex = /(\d+)(h|m|s)/g
-  let match
-
-  while ((match = regex.exec(interval)) !== null) {
-    const value = parseInt(match[1], 10)
-    const unit = match[2]
-
-    switch (unit) {
-      case 'h':
-        totalSeconds += value * 3600
-        break
-      case 'm':
-        totalSeconds += value * 60
-        break
-      case 's':
-        totalSeconds += value
-        break
+  let index = 0
+
+  while (index < interval.length) {
+    const start = index
+    while (index < interval.length) {
+      const code = interval.charCodeAt(index)
+      if (code < 48 || code > 57) break
+      index += 1
+    }
+    if (start === index) {
+      index += 1
+      continue
+    }
+    const value = parseInt(interval.slice(start, index), 10)
+    const unit = interval[index]
+    if (unit === 'h') {
+      totalSeconds += value * 3600
+      index += 1
+    } else if (unit === 'm') {
+      totalSeconds += value * 60
+      index += 1
+    } else if (unit === 's') {
+      totalSeconds += value
+      index += 1
+    } else if (index < interval.length) {
+      index += 1
     }
   }