@skyhook-io/k8s-ui 1.5.2 → 1.5.4

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

@@ -9,6 +9,7 @@ import {
   getPrometheusRuleGroupCount,
 } from '../resource-utils-prometheus'
 import type { PrometheusRuleGroup, PrometheusRule, PrometheusAlertRule, PrometheusRecordingRule } from '../resource-utils-prometheus'
+import { pluralize, pluralNoun } from '../../../utils/pluralize'
 
 interface PrometheusRuleRendererProps {
   data: any
@@ -135,13 +136,13 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
             </span>
           )}
           <span className="text-xs text-theme-text-tertiary">
-            {searchTerm ? `${filteredRules.length}/${group.ruleCount}` : group.ruleCount} rule{group.ruleCount !== 1 ? 's' : ''}
+            {searchTerm ? `${filteredRules.length}/${group.ruleCount}` : group.ruleCount} {pluralNoun(group.ruleCount, 'rule')}
           </span>
         </div>
       </button>
       {!expanded && (
         <div className="text-xs text-theme-text-secondary mt-1 ml-5.5 flex gap-3">
-          {group.alertCount > 0 && <span>{group.alertCount} alert{group.alertCount !== 1 ? 's' : ''}</span>}
+          {group.alertCount > 0 && <span>{pluralize(group.alertCount, 'alert')}</span>}
           {group.recordCount > 0 && <span>{group.recordCount} recording</span>}
         </div>
       )}

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

@@ -1,10 +1,11 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
-import { AlertTriangle, Copy, Check, Shield, Pencil, Save, XCircle, RefreshCw } from 'lucide-react'
+import { AlertTriangle, Copy, Check, Shield, Pencil, Save, XCircle, RefreshCw, Eye, EyeOff } from 'lucide-react'
 import { clsx } from 'clsx'
 import { stringify as yamlStringify } from 'yaml'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
 import { ConfirmDialog } from '../../ui/ConfirmDialog'
 import type { SecretCertificateInfo, CertificateInfo } from '../../../types'
+import { pluralize } from '../../../utils/pluralize'
 
 interface SecretRendererProps {
   data: any
@@ -125,7 +126,7 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
       {leafCert && !leafCert.expired && leafCert.daysLeft <= 7 && (
         <AlertBanner
           variant="error"
-          title={`Certificate expires in ${leafCert.daysLeft} day${leafCert.daysLeft !== 1 ? 's' : ''}`}
+          title={`Certificate expires in ${pluralize(leafCert.daysLeft, 'day')}`}
           message="Check that cert-manager or your CA is renewing this certificate."
         />
       )}
@@ -133,7 +134,7 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
       {leafCert && !leafCert.expired && leafCert.daysLeft > 7 && leafCert.daysLeft <= 30 && (
         <AlertBanner
           variant="warning"
-          title={`Certificate expires in ${leafCert.daysLeft} day${leafCert.daysLeft !== 1 ? 's' : ''}`}
+          title={`Certificate expires in ${pluralize(leafCert.daysLeft, 'day')}`}
           message="Renewal should happen automatically before expiry."
         />
       )}
@@ -190,8 +191,13 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
                     {!isEditing && (
                       <button
                         onClick={() => toggleReveal(key)}
-                        className="text-xs text-theme-text-secondary hover:text-theme-text-primary px-1.5 py-0.5 rounded hover:bg-theme-elevated transition-colors"
+                        className="inline-flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary px-1.5 py-0.5 rounded hover:bg-theme-elevated transition-colors"
                       >
+                        {revealed.has(key) ? (
+                          <EyeOff className="w-3.5 h-3.5" />
+                        ) : (
+                          <Eye className="w-3.5 h-3.5" />
+                        )}
                         {revealed.has(key) ? 'Hide' : 'Reveal'}
                       </button>
                     )}

package/src/components/resources/renderers/trivy-shared.tsx

@@ -4,6 +4,7 @@ import {
   VULN_SEVERITY_BAR,
   VULN_SEVERITY_TEXT,
 } from '../../../utils/badge-colors'
+import { pluralNoun } from '../../../utils/pluralize'
 
 // Re-export from centralized badge-colors under the legacy names used by Trivy renderers
 export const SEVERITY_BADGE_COLORS = VULN_SEVERITY_BADGE
@@ -33,7 +34,7 @@ export function TrivyAlertBanner({ critical, high, noun }: { critical: number; h
     return (
       <AlertBanner
         variant="error"
-        title={`${critical} critical ${noun}${critical !== 1 ? 's' : ''}`}
+        title={`${critical} critical ${pluralNoun(critical, noun)}`}
         message="Critical issues should be addressed immediately."
       />
     )
@@ -42,7 +43,7 @@ export function TrivyAlertBanner({ critical, high, noun }: { critical: number; h
     return (
       <AlertBanner
         variant="warning"
-        title={`${high} high-severity ${noun}${high !== 1 ? 's' : ''}`}
+        title={`${high} high-severity ${pluralNoun(high, noun)}`}
         message="Consider addressing these issues to improve security posture."
       />
     )

package/src/components/resources/resource-utils-istio.ts

@@ -2,6 +2,7 @@
 
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
+import { pluralize } from '../../utils/pluralize'
 
 // ============================================================================
 // SHARED HELPERS
@@ -134,7 +135,7 @@ export function getDestinationRuleStatus(resource: any): StatusBadge {
   const trafficPolicy = spec.trafficPolicy
 
   if (subsets.length > 0) {
-    return { text: `${subsets.length} Subset${subsets.length !== 1 ? 's' : ''}`, color: healthColors.healthy, level: 'healthy' }
+    return { text: pluralize(subsets.length, 'Subset'), color: healthColors.healthy, level: 'healthy' }
   }
 
   if (trafficPolicy) {
@@ -332,9 +333,9 @@ export function getAuthorizationPolicyStatus(resource: any): StatusBadge {
 
   switch (action) {
     case 'ALLOW':
-      return { text: `Allow (${rules.length} rule${rules.length !== 1 ? 's' : ''})`, color: healthColors.healthy, level: 'healthy' }
+      return { text: `Allow (${pluralize(rules.length, 'rule')})`, color: healthColors.healthy, level: 'healthy' }
     case 'DENY':
-      return { text: `Deny (${rules.length} rule${rules.length !== 1 ? 's' : ''})`, color: healthColors.unhealthy, level: 'unhealthy' }
+      return { text: `Deny (${pluralize(rules.length, 'rule')})`, color: healthColors.unhealthy, level: 'unhealthy' }
     case 'CUSTOM':
       return { text: 'Custom', color: healthColors.degraded, level: 'degraded' }
     case 'AUDIT':

package/src/components/resources/resource-utils.ts

@@ -1,6 +1,7 @@
 // Utility functions for resource display in tables
 
 import { formatCPUString, formatMemoryString, formatBytes } from '../../utils/format'
+import { pluralize } from '../../utils/pluralize'
 
 // Import functions from sub-modules used internally by getCellFilterValue
 import { getCertificateStatus, getCertificateRequestStatus, getClusterIssuerStatus, getClusterIssuerType, getOrderState, getChallengeState, getChallengeType } from './resource-utils-certmanager'
@@ -16,7 +17,13 @@ import { getExternalSecretStatus as _getExternalSecretStatus, getClusterExternal
 // STATUS & HEALTH UTILITIES
 // ============================================================================
 
-export type HealthLevel = 'healthy' | 'degraded' | 'unhealthy' | 'unknown' | 'neutral'
+// Six health levels in escalating urgency order:
+//   healthy < neutral < unknown < degraded < alert < unhealthy
+// `alert` (orange) is the intermediate tier between degraded (amber) and
+// unhealthy (red). Used for severity gradients like Problems/Audit
+// (critical/high/medium → unhealthy/alert/degraded), where collapsing
+// `high` into either neighbor erases real signal.
+export type HealthLevel = 'healthy' | 'degraded' | 'alert' | 'unhealthy' | 'unknown' | 'neutral'
 
 export interface StatusBadge {
   text: string
@@ -28,6 +35,7 @@ export interface StatusBadge {
 export const healthColors: Record<HealthLevel, string> = {
   healthy: 'status-healthy',
   degraded: 'status-degraded',
+  alert: 'status-alert',
   unhealthy: 'status-unhealthy',
   unknown: 'status-unknown',
   neutral: 'status-neutral',
@@ -904,7 +912,7 @@ export function getNodeTaints(node: any): { count: number; text: string } {
   const taints = node.spec?.taints || []
   const count = taints.length
   if (count === 0) return { count: 0, text: 'None' }
-  return { count, text: count === 1 ? '1 taint' : `${count} taints` }
+  return { count, text: pluralize(count, 'taint') }
 }
 
 export function getNodeVersion(node: any): string {

package/src/components/timeline/TimelineList.tsx

@@ -22,6 +22,7 @@ import { getOperationColor, getHealthBadgeColor, SEVERITY_BADGE } from '../../ut
 import { ResourceRefBadge } from '../ui/drawer-components'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural, refToSelectedResource } from '../../utils/navigation'
+import { pluralize } from '../../utils/pluralize'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 
 /** Format resource age (e.g., "3d", "5h", "10m") */
@@ -436,7 +437,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
                   <Clock className="w-4 h-4 text-theme-text-tertiary" />
                   <span className="text-sm font-medium text-theme-text-secondary">{group.label}</span>
                   <span className="text-xs text-theme-text-disabled">
-                    ({group.items.length} item{group.items.length !== 1 ? 's' : ''})
+                    ({pluralize(group.items.length, 'item')})
                   </span>
                 </div>
 

package/src/components/topology/GroupNode.tsx

@@ -5,6 +5,7 @@ import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
 import type { HealthStatus } from '../../types'
 import { Tooltip } from '../ui/Tooltip'
 import type { WorkloadCard, GroupDisplayLevel } from './layout'
+import { pluralize } from '../../utils/pluralize'
 
 interface GroupNodeData {
   type: 'namespace' | 'app' | 'label'
@@ -195,7 +196,7 @@ export const GroupNode = memo(function GroupNode({
               {kindPills.map(([kind, count]) => (
                 <div key={kind} className="flex items-center gap-1 bg-theme-surface/50 rounded px-1.5 py-0.5">
                   <span className={`topology-icon topology-icon-${kind.toLowerCase()}`} style={{ width: 10, height: 10, fontSize: 6, borderRadius: 2 }} />
-                  <span className="text-[10px] text-theme-text-secondary">{count} {kind}{count > 1 ? 's' : ''}</span>
+                  <span className="text-[10px] text-theme-text-secondary">{pluralize(count, kind)}</span>
                 </div>
               ))}
               {kindCounts && Object.keys(kindCounts).length > maxPills && (

package/src/components/topology/TopologyGraph.tsx

@@ -29,6 +29,7 @@ import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
+import { pluralize } from '../../utils/pluralize'
 
 // Edge colors by type
 const EDGE_COLORS = {
@@ -742,7 +743,7 @@ export function TopologyGraph({
                 </span>
                 <span className="text-theme-text-secondary ml-1">
                   {isAllRbac
-                    ? `${rbacWarnings.length} resource type${rbacWarnings.length > 1 ? 's' : ''} not accessible due to RBAC restrictions.`
+                    ? `${pluralize(rbacWarnings.length, 'resource type')} not accessible due to RBAC restrictions.`
                     : 'Some resources failed to load. Data may be incomplete.'}
                 </span>
                 <details className="mt-1">

package/src/components/ui/Badge.tsx

@@ -6,7 +6,7 @@ import type { ReactNode } from 'react'
 // All class names are STATIC STRINGS (required for Tailwind content scanning)
 // =============================================================================
 
-export type BadgeSeverity = 'success' | 'warning' | 'error' | 'info' | 'neutral'
+export type BadgeSeverity = 'success' | 'warning' | 'alert' | 'error' | 'info' | 'neutral'
 export type BadgeSize = 'sm' | 'default'
 
 interface BadgeProps {
@@ -33,6 +33,7 @@ interface BadgeProps {
 const SEVERITY: Record<BadgeSeverity, string> = {
   success: 'bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-700/40',
   warning: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
+  alert:   'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-400 dark:border-orange-700/40',
   error:   'bg-red-100 text-red-700 border-red-300 dark:bg-red-950/50 dark:text-red-400 dark:border-red-700/40',
   info:    'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
   neutral: 'bg-theme-hover/50 text-theme-text-secondary border-theme-border',

package/src/components/ui/ClusterName.tsx

@@ -0,0 +1,95 @@
+import { Tooltip } from './Tooltip'
+import { parseContextName } from '../../utils/context-name'
+import type { ParsedContextName } from '../../utils/context-name'
+import awsLogo from './provider-logos/aws.png'
+import awsLogoDark from './provider-logos/aws-dark.png'
+import gcpLogo from './provider-logos/gcp.png'
+import azureLogo from './provider-logos/azure.svg'
+
+// ClusterName renders a kubectl context string with the meaningful
+// cluster identity surfaced as primary text and provider/region pushed
+// into supporting metadata. Wraps parseContextName from utils/context-name
+// so all surfaces (cluster cards, table cells, column headers, switcher
+// dropdowns, breadcrumb, error views) share identical cluster-identity
+// rendering.
+//
+// Variants:
+//   inline   — name + small provider logo, fits in a table cell or
+//              column header
+//   stacked  — name on top, provider/region on a smaller second line,
+//              for card-sized surfaces
+//
+// User-named clusters that don't match a known shape pass through
+// unchanged — no provider badge, no tooltip needed.
+
+type Provider = NonNullable<ParsedContextName['provider']>
+
+// AWS uses the official aws+smile mark, which has dark navy text — needs
+// a white-text variant on dark backgrounds. GCP (4-color cloud) and
+// Azure (blue prism A) read fine on either theme.
+const PROVIDER_LOGOS: Record<Provider, { light: string; dark?: string }> = {
+  GKE: { light: gcpLogo },
+  EKS: { light: awsLogo, dark: awsLogoDark },
+  AKS: { light: azureLogo },
+}
+
+interface Props {
+  /** Raw context / display string, as stored in the cluster record. */
+  name: string
+  /** Visual shape. Default: inline. */
+  variant?: 'inline' | 'stacked'
+  /** Suppress the provider badge — use when context already conveys provider. */
+  noBadge?: boolean
+  /** Optional className on the outer span. */
+  className?: string
+}
+
+function ProviderBadge({ provider }: { provider: Provider }) {
+  const logos = PROVIDER_LOGOS[provider]
+  // object-contain keeps the AWS aws+smile mark from being warped when
+  // forced into a square box. GCP and Azure are square already.
+  const baseClass = 'h-4 w-4 flex-shrink-0 object-contain'
+  if (!logos.dark) {
+    return <img src={logos.light} alt={`${provider} cluster`} className={baseClass} />
+  }
+  return (
+    <>
+      <img src={logos.light} alt={`${provider} cluster`} className={`${baseClass} dark:hidden`} />
+      <img src={logos.dark} alt={`${provider} cluster`} className={`${baseClass} hidden dark:block`} />
+    </>
+  )
+}
+
+export function ClusterName({ name, variant = 'inline', noBadge, className }: Props) {
+  const parsed = parseContextName(name)
+
+  const showBadge = !noBadge && parsed.provider !== null
+  const showRegion = parsed.region !== null && variant === 'stacked'
+  const needsTooltip = parsed.raw !== parsed.clusterName
+
+  const body = (
+    <span className={['inline-flex items-center gap-1.5 min-w-0', className ?? ''].join(' ')}>
+      {showBadge && <ProviderBadge provider={parsed.provider!} />}
+      {variant === 'stacked' ? (
+        <span className="flex flex-col min-w-0">
+          <span className="truncate">{parsed.clusterName}</span>
+          {showRegion && (
+            <span className="text-[10px] text-theme-text-tertiary truncate">
+              {parsed.provider} · {parsed.region}
+            </span>
+          )}
+        </span>
+      ) : (
+        <span className="truncate">{parsed.clusterName}</span>
+      )}
+    </span>
+  )
+
+  if (!needsTooltip) return body
+
+  return (
+    <Tooltip content={parsed.raw} delay={250}>
+      {body}
+    </Tooltip>
+  )
+}

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,118 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { clsx } from 'clsx'
+
+// EmptyState is the shared component for the three distinct kinds of
+// "nothing here" UI:
+//
+//   tone='healthy'  — emerald, reassuring. "All checks passing".
+//                     Communicates "things are good" not "no data".
+//   tone='filtered' — neutral. "No findings match the current filters."
+//                     Communicates "your filter is too narrow", suggests
+//                     widening.
+//   tone='neutral'  — pre-data / setup. "No clusters connected yet" with
+//                     an action CTA.
+//
+// Variants:
+//   variant='card'   — centered icon + headline + body in a bordered
+//                      box. Use when an entire panel/page section is
+//                      empty.
+//   variant='inline' — single-line callout. Use when one tile in a row
+//                      is "empty" and you want to collapse zeros into
+//                      one positive line instead.
+
+export type EmptyStateTone = 'healthy' | 'filtered' | 'neutral'
+export type EmptyStateVariant = 'card' | 'inline'
+
+interface Props {
+  tone?: EmptyStateTone
+  variant?: EmptyStateVariant
+  /** Optional Lucide icon. When omitted: the inline variant falls back
+   *  to a small colored dot (emerald for healthy, tertiary text for the
+   *  rest) so the line keeps a visual anchor; the card variant renders
+   *  no leading visual. Callers pass icons that match their context
+   *  (e.g. CheckCircle2 for a healthy state). */
+  icon?: LucideIcon
+  headline: string
+  body?: ReactNode
+  /** Optional CTA — usually an <a> or <button>. Card variant only. */
+  action?: ReactNode
+  className?: string
+}
+
+const TONE_CLASSES: Record<EmptyStateTone, { card: string; inline: string; icon: string }> = {
+  healthy: {
+    card: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200',
+    inline: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200',
+    icon: 'text-emerald-600 dark:text-emerald-400',
+  },
+  filtered: {
+    card: 'border-theme-border bg-theme-surface text-theme-text-secondary',
+    inline: 'border-theme-border bg-theme-surface text-theme-text-secondary',
+    icon: 'text-theme-text-tertiary',
+  },
+  neutral: {
+    card: 'border-theme-border bg-theme-surface text-theme-text-secondary',
+    inline: 'border-theme-border bg-theme-surface text-theme-text-secondary',
+    icon: 'text-theme-text-tertiary',
+  },
+}
+
+export function EmptyState({
+  tone = 'neutral',
+  variant = 'card',
+  icon: Icon,
+  headline,
+  body,
+  action,
+  className,
+}: Props) {
+  const t = TONE_CLASSES[tone]
+
+  if (variant === 'inline') {
+    return (
+      <div
+        className={clsx(
+          'flex flex-1 min-w-[200px] items-center gap-2 rounded-md border px-3 py-2 text-sm',
+          t.inline,
+          className,
+        )}
+      >
+        {Icon ? (
+          <Icon className={clsx('h-4 w-4 flex-shrink-0', t.icon)} aria-hidden />
+        ) : (
+          // Default to a small dot for the inline variant — keeps a visual
+          // anchor without forcing every caller to pick an icon.
+          <span
+            className={clsx(
+              'inline-flex h-2 w-2 flex-shrink-0 rounded-full',
+              tone === 'healthy'
+                ? 'bg-emerald-500 dark:bg-emerald-400'
+                : 'bg-theme-text-tertiary',
+            )}
+            aria-hidden
+          />
+        )}
+        <span>
+          {headline}
+          {body && <span className="opacity-80"> · {body}</span>}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={clsx(
+        'flex flex-col items-center gap-2 rounded-md border px-4 py-8 text-center',
+        t.card,
+        className,
+      )}
+    >
+      {Icon && <Icon className={clsx('h-6 w-6', t.icon)} aria-hidden />}
+      <div className="text-sm font-medium">{headline}</div>
+      {body && <div className="max-w-md text-xs opacity-80">{body}</div>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  )
+}

package/src/components/ui/FilterPill.tsx

@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from './Tooltip'
+
+// FilterPill is a single-button toggle filter — clickable pill that
+// communicates an active/inactive state. Used in horizontal filter rows
+// where each pill toggles one filter on/off (no dropdown — this is the
+// toggle pattern, not a combobox).
+//
+// Tone-encoded active state: when tone='danger' and active=true, the
+// pill bg+text use rose; tone='warn' uses amber; etc. This is a
+// filter-UI-scoped vocabulary (neutral/danger/warn/ok/brand) — distinct
+// from the canonical HealthLevel vocabulary (healthy/degraded/alert/
+// unhealthy/neutral/unknown), since "an active filter for danger
+// problems" reads better as `tone='danger'` than `tone='unhealthy'`.
+// Useful for filter rows that mix severity-bearing categories with
+// neutral ones (Critical filters and Warning filters get visually
+// distinct active states).
+//
+// Accessibility: every pill renders aria-pressed automatically, so
+// screen readers announce pressed/unpressed correctly. Optional tooltip
+// describes the toggle action ("Click to stop filtering by danger").
+
+export type FilterPillTone = 'neutral' | 'danger' | 'warn' | 'ok' | 'brand'
+
+interface Props {
+  label: ReactNode
+  active: boolean
+  onClick: () => void
+  /** Active-state color encoding. Default: neutral (Radar's existing style). */
+  tone?: FilterPillTone
+  /** Optional leading icon. */
+  icon?: LucideIcon
+  /** Optional count badge — renders " (N)" after label. */
+  count?: number
+  /** Tooltip explaining the toggle. Wraps button in Tooltip if set. */
+  tooltip?: string
+  /** Override the accessible name. Defaults to label + active state. */
+  'aria-label'?: string
+  className?: string
+}
+
+// Always-bordered chip: same border-width in both states keeps geometry stable
+// when toggling, and a visible inactive border is what makes pills read as
+// pressable chips instead of plain links. Active states fill the chip and
+// promote the border to a tone-matched ring.
+const TONE_ACTIVE: Record<FilterPillTone, string> = {
+  neutral: 'bg-theme-text-primary/10 border-theme-text-primary/25 text-theme-text-primary',
+  danger:  'bg-red-500/15 border-red-500/40 text-red-700 dark:text-red-300',
+  warn:    'bg-amber-500/15 border-amber-500/40 text-amber-800 dark:text-amber-300',
+  ok:      'bg-emerald-500/15 border-emerald-500/40 text-emerald-700 dark:text-emerald-300',
+  brand:   'bg-[var(--color-brand-50)] border-[var(--color-radar-accent)] text-theme-text-primary dark:bg-[var(--color-brand-950)]',
+}
+
+const INACTIVE = 'border-theme-border-light text-theme-text-secondary hover:border-theme-border hover:text-theme-text-primary hover:bg-theme-hover/50'
+
+export function FilterPill({
+  label,
+  active,
+  onClick,
+  tone = 'neutral',
+  icon: Icon,
+  count,
+  tooltip,
+  className,
+  ...rest
+}: Props) {
+  const ariaLabel = rest['aria-label']
+
+  const button = (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      aria-label={ariaLabel}
+      className={clsx(
+        'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-theme-text-primary/20 focus-visible:outline-none',
+        active ? TONE_ACTIVE[tone] : INACTIVE,
+        className,
+      )}
+    >
+      {Icon && <Icon className="h-3.5 w-3.5" aria-hidden />}
+      <span>{label}</span>
+      {count !== undefined && (
+        <span className="text-theme-text-tertiary">({count})</span>
+      )}
+    </button>
+  )
+
+  if (!tooltip) return button
+  return (
+    <Tooltip content={tooltip} delay={200}>
+      {button}
+    </Tooltip>
+  )
+}

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'
 import { ChevronDown, ChevronRight, Loader2 } from 'lucide-react'
 import { ConfirmDialog } from './ConfirmDialog'
 import { formatKindName } from './drawer-components'
+import { pluralize } from '../../utils/pluralize'
 
 export interface CascadeDependent {
   kind: string
@@ -106,7 +107,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
       >
         {expanded ? <ChevronDown className="w-3.5 h-3.5 shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 shrink-0" />}
         <span>
-          Will also delete {dependents.length} dependent {dependents.length === 1 ? 'resource' : 'resources'}
+          Will also delete {pluralize(dependents.length, 'dependent resource')}
         </span>
       </button>
 

package/src/components/ui/ResourceBar.tsx

@@ -40,7 +40,7 @@ export function ResourceBar({ used, total, percent, colorScheme = 'utilization',
         </span>
       </div>
       <div className="relative">
-        <div className="h-1.5 rounded-full border border-theme-border bg-theme-bg-elevated overflow-hidden">
+        <div className="h-1.5 rounded-full border border-theme-border bg-theme-elevated overflow-hidden">
           <div
             className={clsx('h-full rounded-full transition-[width] duration-300 ease-out', getBarColor(percent, colorScheme))}
             style={{ width: `${Math.min(percent, 100)}%` }}

package/src/components/ui/Tooltip.tsx

@@ -2,6 +2,21 @@ import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 
+// Module-level singleton coordinator: only one Tooltip can be visible
+// at a time across the whole app. Without this, two Tooltip instances
+// could both render their portal simultaneously — happens when a
+// trigger element unmounts/remounts during an in-progress hover (React
+// re-render, HMR, rapid cursor movement between adjacent triggers),
+// because the old trigger's mouseleave never fires so its visible
+// state stays stuck. Observed in multi-cluster visual tests on
+// densely-populated source-chip hovers.
+//
+// Each visible Tooltip registers a `hide` callback. When the next
+// Tooltip becomes visible, it calls the previous active tooltip's
+// hide(), guaranteeing a single visible portal. Registry clears on
+// hide or unmount.
+let activeHide: (() => void) | null = null
+
 interface TooltipProps {
   content: ReactNode
   children: ReactNode
@@ -79,9 +94,27 @@ export function Tooltip({
     setCoords({ top, left })
   }, [position])
 
+  // Stable hide function for the singleton registry — useRef so the
+  // identity stays the same across renders, otherwise the registry
+  // could hold a stale closure that doesn't see the latest setState.
+  const hideRef = useRef<() => void>(() => {})
+  hideRef.current = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setIsVisible(false)
+  }
+
   const showTooltip = () => {
     if (disabled || !content) return
     timeoutRef.current = window.setTimeout(() => {
+      // Singleton: hide whoever was visible before us, register self
+      // as the new active tooltip. Guards against stuck duplicates.
+      if (activeHide && activeHide !== hideRef.current) {
+        activeHide()
+      }
+      activeHide = hideRef.current
       setIsVisible(true)
     }, delay)
   }
@@ -91,6 +124,9 @@ export function Tooltip({
       clearTimeout(timeoutRef.current)
       timeoutRef.current = null
     }
+    if (activeHide === hideRef.current) {
+      activeHide = null
+    }
     setIsVisible(false)
   }
 
@@ -106,6 +142,13 @@ export function Tooltip({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
       }
+      // Clear from singleton registry on unmount — otherwise a Tooltip
+      // that unmounts while visible (e.g. row removed during hover)
+      // would leave a stale entry in activeHide pointing at a torn-down
+      // setState, blocking the next Tooltip from registering.
+      if (activeHide === hideRef.current) {
+        activeHide = null
+      }
     }
   }, [])