@skyhook-io/k8s-ui 1.7.14 → 1.8.0

package/src/components/ui/SearchPillInput.tsx

@@ -0,0 +1,237 @@
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
+import { clsx } from 'clsx'
+
+// A structured search input: free-text plus removable `key:value` modifier
+// PILLS (ns:, kind:, label:, …). Typing a complete modifier token and pressing
+// space converts it to a pill; backspace from an empty input pops the last pill
+// back to editable text. Modifiers with a known, bounded value set (ns, kind)
+// get an inline autocomplete dropdown.
+//
+// PURE + host-agnostic: it knows nothing about search execution, results, or any
+// app's data layer — the host injects `modifierOptions` and reads the structured
+// query back via onChange. Shared so Radar (standalone) and Radar Cloud can both
+// build their own results surface on top of the same advanced-search field.
+
+export interface SearchModifier {
+  key: string
+  value: string
+}
+
+export interface SearchPillInputProps {
+  /** Free-text portion (everything that isn't a committed modifier pill). */
+  text: string
+  /** Committed modifier pills. */
+  pills: SearchModifier[]
+  onChange: (next: { text: string; pills: SearchModifier[] }) => void
+  /** Keys the control doesn't consume are forwarded (result nav: arrows/enter/etc). */
+  onKeyDown?: (e: React.KeyboardEvent) => void
+  onFocus?: () => void
+  placeholder?: string
+  /** Known values per CANONICAL modifier key for autocomplete (filtered locally). */
+  modifierOptions?: Record<string, string[]>
+  /** Alias→canonical map; defaults to the k8s search parser's set. */
+  aliases?: Record<string, string>
+  inputRef?: React.RefObject<HTMLInputElement | null>
+  leftSlot?: React.ReactNode
+  rightSlot?: React.ReactNode
+  /** Applied to the input container (host owns the box chrome: height, bg, border). */
+  className?: string
+  'aria-label'?: string
+  /** Fires when the modifier autocomplete opens/closes, so the host can suppress
+      its own results dropdown while a modifier is being completed. */
+  onSuggestingChange?: (suggesting: boolean) => void
+}
+
+// Matches internal/search/parse.go.
+const DEFAULT_ALIASES: Record<string, string> = {
+  ns: 'ns', n: 'ns', namespace: 'ns',
+  kind: 'kind', k: 'kind',
+  label: 'label', l: 'label',
+  image: 'image', img: 'image',
+  cluster: 'cluster', c: 'cluster',
+}
+
+const MAX_SUGGESTIONS = 50
+
+function splitLastToken(s: string): { before: string; token: string } {
+  const i = s.lastIndexOf(' ')
+  if (i < 0) return { before: '', token: s }
+  return { before: s.slice(0, i + 1), token: s.slice(i + 1) }
+}
+
+// The modifier currently being typed at the end of `text` (e.g. "ns:dev"), or
+// null. `partial` is the value-so-far; `before` is the text that precedes it.
+function activeModifier(
+  text: string,
+  aliases: Record<string, string>,
+): { canon: string; partial: string; before: string } | null {
+  const { before, token } = splitLastToken(text)
+  const m = /^([a-zA-Z]+):(\S*)$/.exec(token)
+  if (!m) return null
+  const canon = aliases[m[1].toLowerCase()]
+  if (!canon) return null
+  return { canon, partial: m[2], before }
+}
+
+function highlightPartial(text: string, partial: string): React.ReactNode {
+  if (!partial) return text
+  const i = text.toLowerCase().indexOf(partial.toLowerCase())
+  if (i < 0) return text
+  return (
+    <>
+      {text.slice(0, i)}
+      <span className="font-semibold text-[var(--color-brand)]">{text.slice(i, i + partial.length)}</span>
+      {text.slice(i + partial.length)}
+    </>
+  )
+}
+
+export function SearchPillInput({
+  text,
+  pills,
+  onChange,
+  onKeyDown,
+  onFocus,
+  placeholder,
+  modifierOptions,
+  aliases = DEFAULT_ALIASES,
+  inputRef: inputRefProp,
+  leftSlot,
+  rightSlot,
+  className,
+  onSuggestingChange,
+  ...rest
+}: SearchPillInputProps) {
+  const internalRef = useRef<HTMLInputElement>(null)
+  const inputRef = inputRefProp ?? internalRef
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [sel, setSel] = useState(0)
+  const [dismissed, setDismissed] = useState(false)
+  const [anchor, setAnchor] = useState<{ left: number; bottom: number } | null>(null)
+
+  const mod = useMemo(() => activeModifier(text, aliases), [text, aliases])
+
+  const filtered = useMemo(() => {
+    if (!mod) return []
+    const opts = modifierOptions?.[mod.canon]
+    if (!opts) return []
+    const p = mod.partial.toLowerCase()
+    if (!p) return opts.slice(0, MAX_SUGGESTIONS)
+    const pref: string[] = []
+    const sub: string[] = []
+    for (const o of opts) {
+      const lo = o.toLowerCase()
+      if (lo.startsWith(p)) pref.push(o)
+      else if (lo.includes(p)) sub.push(o)
+    }
+    return [...pref, ...sub].slice(0, MAX_SUGGESTIONS)
+  }, [mod, modifierOptions])
+
+  const suggesting = !dismissed && filtered.length > 0
+
+  useEffect(() => { setSel(0) }, [filtered.length, mod?.canon, mod?.partial])
+  useEffect(() => { onSuggestingChange?.(suggesting) }, [suggesting, onSuggestingChange])
+
+  // Anchor the portaled suggestion dropdown under the input box.
+  useEffect(() => {
+    if (!suggesting) { setAnchor(null); return }
+    const update = () => {
+      const el = containerRef.current
+      if (el) { const r = el.getBoundingClientRect(); setAnchor({ left: r.left, bottom: r.bottom }) }
+    }
+    update()
+    window.addEventListener('resize', update)
+    window.addEventListener('scroll', update, true)
+    return () => { window.removeEventListener('resize', update); window.removeEventListener('scroll', update, true) }
+  }, [suggesting])
+
+  const commitPill = useCallback((key: string, value: string, before: string) => {
+    onChange({ pills: [...pills, { key, value }], text: before })
+    setDismissed(false)
+  }, [onChange, pills])
+
+  const removePill = useCallback((idx: number) => {
+    onChange({ pills: pills.filter((_, i) => i !== idx), text })
+    inputRef.current?.focus()
+  }, [onChange, pills, text, inputRef])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (suggesting) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); setSel((s) => Math.min(s + 1, filtered.length - 1)); return }
+      if (e.key === 'ArrowUp') { e.preventDefault(); setSel((s) => Math.max(s - 1, 0)); return }
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        if (mod && filtered[sel]) { e.preventDefault(); commitPill(mod.canon, filtered[sel], mod.before); return }
+      }
+      if (e.key === 'Escape') { e.preventDefault(); setDismissed(true); return }
+    }
+    if (e.key === ' ' && mod && mod.partial.length > 0) {
+      e.preventDefault()
+      commitPill(mod.canon, mod.partial, mod.before)
+      return
+    }
+    if (e.key === 'Backspace' && text === '' && pills.length > 0) {
+      e.preventDefault()
+      const last = pills[pills.length - 1]
+      onChange({ pills: pills.slice(0, -1), text: `${last.key}:${last.value}` })
+      return
+    }
+    onKeyDown?.(e)
+  }, [suggesting, filtered, sel, mod, text, pills, commitPill, onChange, onKeyDown])
+
+  return (
+    <div ref={containerRef} className={clsx('flex items-center gap-1.5', className)} onClick={() => inputRef.current?.focus()}>
+      {leftSlot}
+      {pills.map((p, i) => (
+        <span key={`${p.key}:${p.value}:${i}`} className="inline-flex items-center gap-1 shrink-0 rounded-md bg-theme-elevated border border-theme-border-light pl-1.5 pr-1 py-0.5 text-xs whitespace-nowrap">
+          <span className="text-theme-text-tertiary">{p.key}:</span>
+          <span className="text-theme-text-primary font-medium">{p.value}</span>
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label={`Remove ${p.key}:${p.value} filter`}
+            onMouseDown={(e) => { e.preventDefault(); removePill(i) }}
+            className="text-theme-text-tertiary hover:text-theme-text-primary rounded"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </span>
+      ))}
+      <input
+        ref={inputRef}
+        type="text"
+        value={text}
+        onChange={(e) => { setDismissed(false); onChange({ text: e.target.value, pills }) }}
+        onKeyDown={handleKeyDown}
+        onFocus={onFocus}
+        placeholder={pills.length ? '' : placeholder}
+        aria-label={rest['aria-label']}
+        className="flex-1 min-w-[80px] bg-transparent text-sm text-theme-text-primary placeholder-theme-text-tertiary outline-none"
+      />
+      {rightSlot}
+      {suggesting && anchor && mod && createPortal(
+        <div
+          style={{ position: 'fixed', top: anchor.bottom + 4, left: anchor.left, width: 280, maxWidth: 'calc(100vw - 2rem)' }}
+          className="z-[130] dialog shadow-theme-lg overflow-hidden"
+        >
+          <div className="px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-theme-text-tertiary">{mod.canon}</div>
+          <div className="max-h-56 overflow-y-auto pb-1">
+            {filtered.map((opt, i) => (
+              <button
+                key={opt}
+                type="button"
+                onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); commitPill(mod.canon, opt, mod.before) }}
+                onMouseMove={() => setSel(i)}
+                className={clsx('w-full text-left px-2.5 py-1 text-sm truncate', i === sel ? 'selection' : 'hover:bg-theme-elevated/40 text-theme-text-primary')}
+              >
+                {highlightPartial(opt, mod.partial)}
+              </button>
+            ))}
+          </div>
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}

package/src/components/ui/SortableTh.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { ChevronUp, ChevronDown } from 'lucide-react'
+
+export type SortDir = 'asc' | 'desc'
+
+// Canonical dense-table header-cell styling, shared so the Applications and
+// GitOps tables (modeled on the Resources table) read as one table family.
+export const TH_CLASS =
+  'border-b border-theme-border px-3 py-2 text-left text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary'
+
+// A clickable, sortable column header. Clicking fires onSort(sortKey); the
+// consumer owns the cycle (toggle dir, or asc→desc→off). One chevron marks the
+// active column + its direction — the same affordance as the Resources table,
+// replacing per-view sort dropdowns.
+export function SortableTh<K extends string>({
+  label,
+  sortKey,
+  activeKey,
+  direction,
+  onSort,
+  align = 'left',
+  className,
+}: {
+  label: ReactNode
+  sortKey: K
+  activeKey: K | null
+  direction: SortDir
+  onSort: (key: K) => void
+  align?: 'left' | 'right'
+  className?: string
+}) {
+  const active = activeKey === sortKey
+  // Sort lives on a real <button> (keyboard-focusable, Enter/Space native) while
+  // aria-sort stays on the <th> — accessible sorting, not a mouse-only header.
+  return (
+    <th
+      aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'}
+      className={clsx(TH_CLASS, align === 'right' && 'text-right', className)}
+    >
+      <button
+        type="button"
+        onClick={() => onSort(sortKey)}
+        className={clsx(
+          'inline-flex items-center gap-1 select-none hover:text-theme-text-primary focus-visible:outline-none focus-visible:text-theme-text-primary',
+          align === 'right' && 'w-full justify-end',
+        )}
+      >
+        {label}
+        {active ? (
+          direction === 'asc' ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />
+        ) : (
+          <span className="w-3" />
+        )}
+      </button>
+    </th>
+  )
+}

package/src/components/ui/SummaryTile.tsx

@@ -0,0 +1,60 @@
+import { clsx } from 'clsx'
+
+export type SummaryTone = 'neutral' | 'success' | 'warning' | 'error' | 'info'
+
+// A compact count tile for a view's status summary — value over label, with a
+// tone-colored value and (when clickable) an active border that doubles as a
+// one-click filter. Lives in the shared list-view chassis: GitOps and
+// Applications both surface their status rollup as a row of these in the header.
+export function SummaryTile({
+  label,
+  value,
+  tone = 'neutral',
+  onClick,
+  active = false,
+}: {
+  label: string
+  value: number
+  tone?: SummaryTone
+  onClick?: () => void
+  active?: boolean
+}) {
+  const toneClass = {
+    neutral: 'text-theme-text-primary',
+    success: 'text-emerald-600 dark:text-emerald-300',
+    warning: 'text-amber-600 dark:text-amber-300',
+    error: 'text-red-600 dark:text-red-300',
+    info: 'text-sky-600 dark:text-sky-300',
+  }[tone]
+  const activeBorderClass = {
+    neutral: 'border-skyhook-500',
+    success: 'border-emerald-500',
+    warning: 'border-amber-500',
+    error: 'border-red-500',
+    info: 'border-sky-500',
+  }[tone]
+  const value$ = <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
+  const label$ = <div className="text-xs text-theme-text-tertiary">{label}</div>
+  if (!onClick) {
+    return (
+      <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2">
+        {value$}
+        {label$}
+      </div>
+    )
+  }
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={clsx(
+        'cursor-pointer rounded-md border bg-theme-base px-3 py-2 text-left transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-skyhook-500',
+        active ? activeBorderClass : 'border-theme-border',
+      )}
+    >
+      {value$}
+      {label$}
+    </button>
+  )
+}

package/src/components/ui/drawer-components.tsx

@@ -166,7 +166,7 @@ export function Property({ label, value, copyable, onCopy, copied }: PropertyPro
   return (
     <div className="flex items-start gap-2 text-sm">
       <span className="text-theme-text-tertiary w-40 shrink-0">{label}</span>
-      <span className="text-theme-text-primary break-all flex-1">{displayValue}</span>
+      <span className={clsx('text-theme-text-primary flex-1 min-w-0', isReactElement(value) ? 'break-normal' : 'break-all')}>{displayValue}</span>
       {copyable && onCopy && !isReactElement(value) && (
         <button
           onClick={() => onCopy(strValue, labelKey)}
@@ -283,7 +283,20 @@ function isConditionHealthy(cond: { type?: string; status?: string }): boolean {
   return inverted ? cond.status === 'False' : cond.status === 'True'
 }
 
-export function ConditionsSection({ conditions }: { conditions?: any[] }) {
+export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown'
+
+function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
+  if (cond.status !== 'True' && cond.status !== 'False') return 'unknown'
+  return isConditionHealthy(cond) ? 'ok' : 'fail'
+}
+
+export function ConditionsSection({
+  conditions,
+  getConditionTone,
+}: {
+  conditions?: any[]
+  getConditionTone?: (condition: any) => ConditionTone | undefined
+}) {
   if (!conditions || conditions.length === 0) return null
 
   // Sort by lastTransitionTime (most recent first), then alphabetically for ties
@@ -294,7 +307,8 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
     return (a.type || '').localeCompare(b.type || '')
   })
 
-  const failCount = sorted.filter((c: any) => (c.status === 'True' || c.status === 'False') && !isConditionHealthy(c)).length
+  const conditionTone = (cond: any) => getConditionTone?.(cond) ?? defaultConditionTone(cond)
+  const failCount = sorted.filter((c: any) => conditionTone(c) === 'fail').length
 
   return (
     <Section
@@ -307,13 +321,15 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
 
         <div className="space-y-0.5">
           {sorted.map((cond: any) => {
-            const isUnknown = cond.status !== 'True' && cond.status !== 'False'
-            const isOk = !isUnknown && isConditionHealthy(cond)
-            const isFail = !isOk && !isUnknown
+            const tone = conditionTone(cond)
+            const isOk = tone === 'ok'
+            const isWarning = tone === 'warning'
+            const isFail = tone === 'fail'
             return (
               <div key={cond.type} className={clsx(
                 'flex items-start py-1.5 pr-1 text-sm relative',
-                isFail && 'border-l-2 border-red-400/60 dark:border-red-500/40'
+                isFail && 'border-l-2 border-red-400/60 dark:border-red-500/40',
+                isWarning && 'border-l-2 border-amber-400/60 dark:border-amber-500/40'
               )}>
                 {/* Timestamp column — fixed width on the left */}
                 <div className="w-[48px] shrink-0 text-[10px] text-theme-text-tertiary text-right pr-2 pt-0.5">
@@ -323,16 +339,24 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
                 <span className={clsx(
                   'w-3 h-3 rounded-full flex items-center justify-center shrink-0 mt-1 z-10 ring-2 ring-theme-surface',
                   isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
-                    : isUnknown ? 'bg-gray-400/20 text-gray-400 dark:bg-gray-400/30'
+                    : tone === 'unknown' ? 'bg-gray-400/20 text-gray-400 dark:bg-gray-400/30'
+                    : isWarning ? 'bg-amber-500/25 text-amber-600 dark:text-amber-400 dark:bg-amber-500/35'
                     : 'bg-red-500/25 text-red-500 dark:bg-red-500/35'
                 )}>
                   {isOk ? <Check className="w-2 h-2" strokeWidth={4} />
-                    : isUnknown ? <Minus className="w-2 h-2" strokeWidth={4} />
+                    : tone === 'unknown' ? <Minus className="w-2 h-2" strokeWidth={4} />
+                    : isWarning ? <AlertTriangle className="w-2 h-2" strokeWidth={4} />
                     : <X className="w-2 h-2" strokeWidth={4} />}
                 </span>
                 {/* Content */}
                 <div className="min-w-0 flex-1 pl-2">
-                  <span className={clsx('font-medium text-[13px]', isOk ? 'text-theme-text-primary' : isUnknown ? 'text-theme-text-secondary' : 'text-red-600 dark:text-red-400')}>{cond.type}</span>
+                  <span className={clsx(
+                    'font-medium text-[13px]',
+                    isOk ? 'text-theme-text-primary'
+                      : tone === 'unknown' ? 'text-theme-text-secondary'
+                        : isWarning ? 'text-amber-600 dark:text-amber-400'
+                          : 'text-red-600 dark:text-red-400'
+                  )}>{cond.type}</span>
                   {cond.reason && cond.reason !== cond.type && (
                     <div className="text-[10px] text-theme-text-secondary">{cond.reason}</div>
                   )}
@@ -848,36 +872,50 @@ function RelationshipGroup({ label, refs, onNavigate }: RelationshipGroupProps)
 export interface ResourceRefBadgeProps {
   resourceRef: ResourceRef
   onClick?: (ref: ResourceRef) => void
+  wrapAtSeparator?: boolean
 }
 
 /** Reusable chip/badge for showing a related resource with click-to-navigate */
-export function ResourceRefBadge({ resourceRef, onClick }: ResourceRefBadgeProps) {
+export function ResourceRefBadge({ resourceRef, onClick, wrapAtSeparator }: ResourceRefBadgeProps) {
   const kindClass = getKindColor(resourceRef.kind)
   const kindName = formatKindForRef(resourceRef.kind)
+  const content = wrapAtSeparator ? (
+    <>
+      <span className="shrink-0 opacity-60">{kindName}/</span>
+      <span className="min-w-0 max-w-full whitespace-normal break-normal text-left leading-tight">{resourceRef.name}</span>
+    </>
+  ) : (
+    <>
+      <span className="opacity-60">{kindName}/</span>
+      {resourceRef.name}
+    </>
+  )
+  const layoutClass = wrapAtSeparator
+    ? 'badge max-w-full min-w-0 flex-wrap items-center whitespace-normal text-left leading-tight'
+    : 'badge'
 
   if (onClick) {
     return (
       <button
         onClick={() => onClick(resourceRef)}
         className={clsx(
-          'badge hover:brightness-[0.92] dark:hover:brightness-125 transition-[filter]',
+          layoutClass,
+          'hover:brightness-[0.92] dark:hover:brightness-125 transition-[filter]',
           kindClass
         )}
         title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
       >
-        <span className="opacity-60">{kindName}/</span>
-        {resourceRef.name}
+        {content}
       </button>
     )
   }
 
   return (
     <span
-      className={clsx('badge', kindClass)}
+      className={clsx(layoutClass, kindClass)}
       title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
     >
-      <span className="opacity-60">{kindName}/</span>
-      {resourceRef.name}
+      {content}
     </span>
   )
 }
@@ -922,6 +960,7 @@ function formatKindForRef(kind: string): string {
     job: 'job',
     cronjob: 'cj',
     hpa: 'hpa',
+    horizontalpodautoscaler: 'hpa',
   }
   return shortNames[k] || k
 }

package/src/components/ui/index.ts

@@ -23,3 +23,15 @@ export { CodeViewer } from './CodeViewer'
 export { YamlEditor, YamlDiffEditor } from './YamlEditor'
 export { RowActionMenu } from './RowActionMenu'
 export type { RowActionItem } from './RowActionMenu'
+
+export { PageHeader } from './PageHeader'
+export { SummaryTile } from './SummaryTile'
+export type { SummaryTone } from './SummaryTile'
+export { Facet, FacetSection, FacetButton } from './Facet'
+export type { FacetTone } from './Facet'
+export { SortableTh, TH_CLASS } from './SortableTh'
+export type { SortDir } from './SortableTh'
+export { DistributionBar, DistributionLegendChip } from './DistributionBar'
+export type { DistributionSegment } from './DistributionBar'
+export { SearchPillInput } from './SearchPillInput'
+export type { SearchModifier, SearchPillInputProps } from './SearchPillInput'

package/src/components/workload/WorkloadView.tsx

@@ -22,7 +22,7 @@ import {
   BarChart3,
   Network,
 } from 'lucide-react'
-import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode } from '../../types'
+import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode, HPADiagnosis } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
 import type { NavigateToResource } from '../../utils/navigation'
 import { refToSelectedResource, pluralToKind, kindToPlural, apiVersionToGroup } from '../../utils/navigation'
@@ -49,6 +49,7 @@ import {
 import { ResourceActionsBar } from '../shared/ResourceActionsBar'
 import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlView'
 import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
+import type { ScalerDiagnosis } from '../resources/renderers/WorkloadRenderer'
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
 import { getKindColorOutline, displayKindName } from '../ui/drawer-components'
@@ -105,6 +106,10 @@ interface WorkloadViewProps {
   relationships?: Relationships
   /** TLS certificate info for secrets */
   certificateInfo?: any
+  /** HPA diagnosis for HorizontalPodAutoscaler detail responses */
+  hpaDiagnosis?: HPADiagnosis
+  /** Compact diagnosis for autoscalers controlling this workload */
+  scalerDiagnostics?: ScalerDiagnosis[]
   /** Whether the resource is loading */
   isLoading?: boolean
   /** Fetch error for the resource (preserves status + message so the
@@ -244,6 +249,8 @@ export function WorkloadView({
   resource,
   relationships,
   certificateInfo,
+  hpaDiagnosis,
+  scalerDiagnostics,
   isLoading: resourceLoading = false,
   resourceError,
   refetch: refetchProp,
@@ -651,6 +658,8 @@ export function WorkloadView({
                 data={resource}
                 relationships={relationships}
                 certificateInfo={certificateInfo}
+                hpaDiagnosis={hpaDiagnosis}
+                scalerDiagnostics={scalerDiagnostics}
                 onCopy={copyToClipboard}
                 copied={copied}
                 onNavigate={onNavigateToResource ? (ref) => onNavigateToResource(refToSelectedResource(ref)) : undefined}
@@ -774,6 +783,8 @@ export function WorkloadView({
               resource={resource}
               selectedResource={selectedResource}
               relationships={relationships}
+              hpaDiagnosis={hpaDiagnosis}
+              scalerDiagnostics={scalerDiagnostics}
               isLoading={resourceLoading}
               error={resourceError}
               onNavigate={onNavigateToResource}
@@ -1305,6 +1316,8 @@ function InfoTab({
   resource,
   selectedResource,
   relationships,
+  hpaDiagnosis,
+  scalerDiagnostics,
   isLoading,
   error,
   onNavigate,
@@ -1326,6 +1339,8 @@ function InfoTab({
   resource: any
   selectedResource: SelectedResource
   relationships?: Relationships
+  hpaDiagnosis?: HPADiagnosis
+  scalerDiagnostics?: ScalerDiagnosis[]
   isLoading: boolean
   error?: unknown
   onNavigate?: NavigateToResource
@@ -1354,6 +1369,8 @@ function InfoTab({
         resource={selectedResource}
         data={resource}
         relationships={relationships}
+        hpaDiagnosis={hpaDiagnosis}
+        scalerDiagnostics={scalerDiagnostics}
         onCopy={onCopy}
         copied={copied}
         onNavigate={onNavigate ? (ref) => onNavigate(refToSelectedResource(ref)) : undefined}

package/src/theme/tailwind-theme.css

@@ -8,6 +8,7 @@
 
 @theme inline {
   /* Backgrounds */
+  --color-theme-sidebar: var(--bg-sidebar);
   --color-theme-base: var(--bg-base);
   --color-theme-surface: var(--bg-surface);
   --color-theme-elevated: var(--bg-elevated);

package/src/theme/variables.css

@@ -30,10 +30,14 @@
   --color-error-dark: #DC2626;
   --color-info: #3B82F6;
 
-  /* ── Backgrounds ──
-     base     = page bg, header/toolbar chrome (barely-blue cool gray)
-     surface  = sidebars, content panels, cards (near-white)
+  /* ── Backgrounds (elevation scale) ──
+     sidebar  = primary nav rail — the DEEPEST layer, its own token so the rail
+                reads as chrome on every view regardless of what content puts
+                next to it (vs. borrowing contrast from an adjacent surface pane)
+     base     = content floor, page bg, header/toolbar chrome (barely-blue gray)
+     surface  = content panels, cards, tables, facet panes (raised, near-white)
      elevated = inputs, count badges, dropdowns (very lightly blue-tinted) */
+  --bg-sidebar: light-dark(#E7ECF5, #080B16);
   --bg-base: light-dark(#F0F3F9, #0B0F1E);
   --bg-surface: light-dark(#F8FBFE, #14192A);
   --bg-elevated: light-dark(#E6ECF5, #1E2338);