@skyhook-io/k8s-ui 1.8.10 → 1.8.11

package/src/components/applications/ApplicationsView.tsx

@@ -17,6 +17,7 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { pluralize } from '../../utils/pluralize'
 import {
   type AppEntry,
+  type AppRow,
   type AppHealth,
   type AppWorkloadClass,
   type AppSource,
@@ -36,12 +37,34 @@ import {
   isSystemNamespace,
   searchTextForEntry,
   foldAppGroups,
+  batchSignalForApp,
+  batchRuntimeForApp,
   type FoldedRow,
 } from '../../utils/applications'
 import { ReadyBar } from './ReadyBar'
-import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo } from './AppChips'
+import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo, BatchSignalChip } from './AppChips'
 import { AppIdentityTooltip, EnvHint } from './AppTooltips'
 
+function ApplicationRuntimeCell({ apps, workloadClass, ready, desired }: { apps: AppRow[]; workloadClass: AppWorkloadClass; ready: number; desired: number }) {
+  if (workloadClass !== 'job') return <ReadyBar ready={ready} desired={desired} />
+  const runtimes = apps.map(batchRuntimeForApp)
+  const worst = runtimes.reduce((current, runtime) => (HEALTH_RANK[runtime.health] ?? 0) > (HEALTH_RANK[current.health] ?? 0) ? runtime : current, runtimes[0])
+  if (!worst) return <span className="text-xs text-theme-text-tertiary">Idle</span>
+  const same = runtimes.every((runtime) => runtime.label === worst.label)
+  const label = same ? worst.label : `${runtimes.length} states`
+  return (
+    <Tooltip content={runtimes.map((runtime, index) => `${apps[index]?.name ?? 'app'}: ${runtime.label} — ${runtime.detail}`).join('\n')} delay={150}>
+      <span className="inline-flex items-center gap-1.5 text-xs text-theme-text-secondary"><StatusDot tone={mapHealthToTone(worst.health)} />{label}</span>
+    </Tooltip>
+  )
+}
+
+function applicationRuntimeLabel(apps: AppRow[], workloadClass: AppWorkloadClass, health: AppHealth): string {
+  if (workloadClass !== 'job') return HEALTH_META[health].label
+  const labels = Array.from(new Set(apps.map((app) => batchRuntimeForApp(app).label)))
+  return labels.length === 1 ? labels[0] : 'Multiple batch states'
+}
+
 // ApplicationsView — the shared, variant-agnostic core behind the Applications
 // surface. It owns the entire list chassis: a health hero header (PageHeader +
 // SummaryTiles + DistributionBar), a left facet rail (Availability / Class /
@@ -52,7 +75,7 @@ import { AppIdentityTooltip, EnvHint } from './AppTooltips'
 // the per-instance row. Styling mirrors the Resources table so the surfaces
 // read as one design.
 
-// Availability is the one status facet — map app health onto the shared facet
+// Status is the one health facet — map app health onto the shared facet
 // tone so its dots read red/amber/green/grey like the GitOps sync+health facets.
 const HEALTH_TONE: Record<AppHealth, FacetTone> = {
   unhealthy: 'error',
@@ -72,7 +95,7 @@ function compareEntries(a: AppEntry, b: AppEntry, key: SortKey): number {
     case 'name':
       return a.row.name.localeCompare(b.row.name)
     case 'ready':
-      return a.readyRatio - b.readyRatio
+      return runtimeSortValue(a) - runtimeSortValue(b)
     case 'version': {
       // Sort by distinct-version count first (skewed apps cluster), then the
       // first tag for a stable, human-meaningful order.
@@ -83,6 +106,10 @@ function compareEntries(a: AppEntry, b: AppEntry, key: SortKey): number {
   }
 }
 
+function runtimeSortValue(entry: AppEntry): number {
+  return entry.workloadClass === 'job' ? (HEALTH_RANK[entry.health] ?? 0) : entry.readyRatio
+}
+
 // The env token an entry filters under. Single entries carry one env; fleet
 // entries carry several — a fleet row matches an env facet if ANY of its slices
 // do (the same inclusive policy as the Class facet).
@@ -348,7 +375,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             {initialLoading ? (
               <BoardRailSkeleton
                 sections={[
-                  ['Availability', 5],
+                  ['Status', 5],
                   ['Class', 3],
                   ['Type', 4],
                   ['Environment', 3],
@@ -357,7 +384,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
               />
             ) : (
               <>
-            <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={HeartPulse} title="Status" 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)} />
@@ -430,7 +457,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                       </>
                     )}
                     <th className={TH_CLASS}>Class</th>
-                    <SortableTh label="Ready" sortKey="ready" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
+                    <SortableTh label="Runtime" sortKey="ready" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
                     <SortableTh label="Version" sortKey="version" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
                     <th className={TH_CLASS}>Workloads</th>
                     <th className={clsx(TH_CLASS, 'w-8')} />
@@ -452,11 +479,12 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                         <span className="flex items-center gap-2">
                           {/* Left status stripe (worst-child health) — the row status
                               gutter shared with the GitOps table. */}
-                          <Tooltip content={HEALTH_META[r.health].label} delay={150}>
+                          <Tooltip content={applicationRuntimeLabel(r.members.map((member) => member.row), r.workloadClass, r.health)} delay={150}>
                             <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[r.health].bar)} />
                           </Tooltip>
                           <ChevronRight className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', r.expanded && 'rotate-90')} aria-hidden />
                           <span className="truncate font-semibold text-theme-text-primary">{r.label}</span>
+                          {r.workloadClass !== 'job' && <BatchSignalChip signal={firstBatchSignal(r.members.map((m) => m.row))} />}
                           <Tooltip
                             content={<AppIdentityTooltip identityKey={r.label} source={r.members[0]?.row.identity?.source} portable={r.members[0]?.row.identity?.portable} fleet={variant === 'fleet'} members={r.members.map((m) => ({ name: m.row.name, env: m.row.identity!.env, confidence: m.row.identity!.confidence, evidence: m.row.identity!.evidence }))} />}
                             delay={150}
@@ -504,7 +532,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                         </span>
                       </td>
                       <td className="px-2 py-2.5"><ClassBadge workloadClass={r.workloadClass} composition={r.classComposition} /></td>
-                      <td className="px-2 py-2.5"><ReadyBar ready={r.ready} desired={r.desired} /></td>
+                      <td className="px-2 py-2.5"><ApplicationRuntimeCell apps={r.members.map((member) => member.row)} workloadClass={r.workloadClass} ready={r.ready} desired={r.desired} /></td>
                       <td className="px-2 py-2.5">
                         {r.lag ? (
                           <Tooltip content={`Promotion lag: ${r.lag} (${r.cells.filter((c) => c.version).map((c) => `${c.env}=${c.version}`).join(', ')})`} delay={150}>
@@ -531,10 +559,11 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                     >
                       <td className={clsx('py-2.5 pr-2', r.child ? 'pl-10' : 'pl-3')}>
                         <span className="flex items-center gap-2">
-                          <Tooltip content={HEALTH_META[e.health].label} delay={150}>
+                          <Tooltip content={applicationRuntimeLabel([e.row], e.workloadClass, e.health)} delay={150}>
                             <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[e.health].bar)} />
                           </Tooltip>
                           <span className="truncate font-medium text-theme-text-primary">{e.row.name}</span>
+                          {e.workloadClass !== 'job' && <BatchSignalChip signal={batchSignalForApp(e.row)} />}
                           <ProvenanceBadge tier={e.row.tier} appKey={e.row.key} confidence={e.row.confidence} />
                           <CategoryChip category={e.category} addonReason={e.row.addonReason} />
                         </span>
@@ -601,7 +630,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                         </>
                       )}
                       <td className="px-2 py-2.5"><ClassBadge workloadClass={e.workloadClass} composition={e.classComposition} /></td>
-                      <td className="px-2 py-2.5"><ReadyBar ready={e.ready} desired={e.desired} /></td>
+                      <td className="px-2 py-2.5"><ApplicationRuntimeCell apps={[e.row]} workloadClass={e.workloadClass} ready={e.ready} desired={e.desired} /></td>
                       <td className="px-2 py-2.5">
                         {e.variant === 'fleet' ? (
                           e.versionSkew ? (
@@ -640,3 +669,26 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
     </div>
   )
 }
+
+function firstBatchSignal(rows: AppRow[]) {
+  let best = null as ReturnType<typeof batchSignalForApp>
+  const rank = (tone: string | undefined) => {
+    switch (tone) {
+      case 'rose':
+        return 5
+      case 'amber':
+        return 4
+      case 'sky':
+        return 3
+      case 'emerald':
+        return 2
+      default:
+        return 0
+    }
+  }
+  for (const row of rows) {
+    const signal = batchSignalForApp(row)
+    if (signal && rank(signal.tone) > rank(best?.tone)) best = signal
+  }
+  return best
+}

package/src/components/applications/applications-view.test.tsx

@@ -67,6 +67,53 @@ describe('buildSingleAppEntry', () => {
     expect(e.env).toBe('staging')
     expect(e.envInferred).toBe(false)
   })
+
+  it('uses delivery degradation in the displayed application health', () => {
+    const e = buildSingleAppEntry(app({
+      health: 'degraded',
+      runtimeHealth: 'healthy',
+      sourceStatus: { sync: 'Synced', health: 'Degraded' },
+    }))
+
+    expect(e.health).toBe('degraded')
+  })
+
+  it('preserves the latest retained batch outcome when delivery adds no degradation', () => {
+    const e = buildSingleAppEntry(app({
+      health: 'unhealthy',
+      runtimeHealth: 'unhealthy',
+      workload_class: 'job',
+      workloads: [wl({
+        kind: 'CronJob',
+        workload_class: 'job',
+        health: 'unhealthy',
+        ready: 0,
+        desired: 0,
+        batch: { retainedRuns: 2, failedRuns: 1, succeededRuns: 1, latestRunPhase: 'Succeeded' },
+      })],
+    }))
+
+    expect(e.health).toBe('healthy')
+  })
+
+  it('applies delivery degradation to a batch app with a successful latest run', () => {
+    const e = buildSingleAppEntry(app({
+      health: 'unhealthy',
+      runtimeHealth: 'unhealthy',
+      workload_class: 'job',
+      sourceStatus: { sync: 'Synced', health: 'Degraded' },
+      workloads: [wl({
+        kind: 'CronJob',
+        workload_class: 'job',
+        health: 'unhealthy',
+        ready: 0,
+        desired: 0,
+        batch: { retainedRuns: 2, failedRuns: 1, succeededRuns: 1, latestRunPhase: 'Succeeded' },
+      })],
+    }))
+
+    expect(e.health).toBe('degraded')
+  })
 })
 
 describe('searchTextForEntry (single)', () => {

package/src/components/applications/index.ts

@@ -7,7 +7,7 @@ export { buildSingleAppEntry } from '../../utils/applications'
 // Facet moved to the shared ui/ primitives; re-exported here for compatibility.
 export { Facet } from '../ui/Facet'
 export { ApplicationDetail } from './ApplicationDetail'
-export type { ApplicationDetailProps, SelectedAppWorkload, AppIdentityInstance } from './ApplicationDetail'
+export type { ApplicationDetailProps, SelectedAppWorkload, AppIdentityInstance, ApplicationView } from './ApplicationDetail'
 export { CenteredEmpty } from '../ui/CenteredEmpty'
 export { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo } from './AppChips'
 export { ProvenanceTooltip, CategoryTooltip, VersionTooltip, AppIdentityTooltip } from './AppTooltips'

package/src/components/audit/AuditAlerts.tsx

@@ -41,14 +41,15 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
   const warnings = findings.filter(f => f.severity === 'warning').length
 
   return (
-    <div className="border-b-subtle pb-4 last:border-0">
+    <section className="rounded-lg border border-theme-border bg-theme-surface p-4 shadow-theme-sm">
       <button
+        type="button"
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
+        className="flex w-full items-center gap-2 rounded-md text-left transition-colors hover:text-theme-text-primary"
       >
         <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
         <ClipboardCheck className="w-4 h-4 text-theme-text-secondary" />
-        <span className="text-sm font-medium text-theme-text-secondary">Audit Findings</span>
+        <span className="text-sm font-semibold text-theme-text-primary">Audit Findings</span>
         <div className="flex items-center gap-2 ml-1">
           {dangers > 0 && (
             <span className={clsx('text-xs font-medium tabular-nums', SEVERITY_TEXT.error)}>{dangers} critical</span>
@@ -64,7 +65,7 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
         style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
       >
         <div className="overflow-hidden">
-          <div className="pl-6 pt-1 flex flex-col gap-0.5">
+          <div className="flex flex-col gap-0.5 pt-3">
             {findings.map((f, i) => {
               const isDanger = f.severity === 'danger'
               return (
@@ -74,17 +75,20 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
                   ) : (
                     <AlertTriangle className={clsx('w-3.5 h-3.5 shrink-0 mt-0.5', SEVERITY_TEXT.warning)} />
                   )}
-                  <span className="text-xs text-theme-text-secondary flex-1">{f.message}</span>
-                  <span className={clsx('badge-sm text-[10px] shrink-0', BP_CATEGORY_BADGE[f.category] || DEFAULT_BADGE_COLOR)}>
-                    {f.category}
-                  </span>
+                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
+                    <span className="text-xs text-theme-text-secondary">{f.message}</span>
+                    <span className={clsx('badge-sm text-[10px] shrink-0', BP_CATEGORY_BADGE[f.category] || DEFAULT_BADGE_COLOR)}>
+                      {f.category}
+                    </span>
+                  </div>
                 </div>
               )
             })}
             {onViewAll && (
               <button
+                type="button"
                 onClick={(e) => { e.stopPropagation(); onViewAll() }}
-                className="flex items-center gap-1 text-xs text-skyhook-500 hover:text-skyhook-400 mt-1 py-1 transition-colors"
+                className="mt-1 flex items-center gap-1 py-1 text-xs text-accent-text transition-colors hover:text-accent"
               >
                 View all findings
                 <ArrowRight className="w-3 h-3" />
@@ -93,6 +97,6 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
           </div>
         </div>
       </div>
-    </div>
+    </section>
   )
 }

package/src/components/checks/ChecksView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 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 { 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'
@@ -265,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)}

package/src/components/checks/severity.ts

@@ -10,14 +10,15 @@ import {
 } 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. The actual
-// color strings are shared with the Issue card via the tone module; here we only
-// map each tier onto its tone.
+// 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: 'amber',
+  medium: 'yellow',
   low: 'slate',
 }
 
@@ -35,14 +36,17 @@ 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,
 }
 

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,6 +26,7 @@ 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'
@@ -687,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)}
@@ -1129,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
     }
   }
 

package/src/components/gitops/SyncOptionsDialog.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, type ComponentType } from 'react'
 import { Loader2, RefreshCw } from 'lucide-react'
 
 import { DialogPortal } from '../ui/DialogPortal'
+import { Input } from '../ui/Input'
 
 // =============================================================================
 // SyncOptionsDialog — Argo CD Sync drawer, shared between per-cluster
@@ -83,8 +84,7 @@ export function SyncOptionsDialog({ open, appLabel, pending, onCancel, onConfirm
       <div className="space-y-4 px-4 py-4 text-sm">
         <label className="block">
           <span className="text-xs font-medium text-theme-text-secondary">Revision (optional)</span>
-          <input
-            type="text"
+          <Input
             value={revision}
             onChange={(e) => setRevision(e.target.value)}
             placeholder="HEAD"