@skyhook-io/k8s-ui 1.8.7 → 1.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -85,7 +85,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",
@@ -95,7 +95,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.22.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.2",

package/src/components/applications/ApplicationsList.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, type ReactNode } from 'react'
 import { type AppRow, buildSingleAppEntry } from '../../utils/applications'
 import { ApplicationsView } from './ApplicationsView'
 
@@ -11,9 +11,11 @@ import { ApplicationsView } from './ApplicationsView'
 export interface ApplicationsListProps {
   apps: AppRow[]
   onSelect: (key: string) => void
+  /** Leading element in the header actions (e.g. a freshness control). */
+  headerActions?: ReactNode
 }
 
-export function ApplicationsList({ apps, onSelect }: ApplicationsListProps) {
+export function ApplicationsList({ apps, onSelect, headerActions }: ApplicationsListProps) {
   // Env tokens this CLUSTER proved (identity classifications on the wire) feed
   // the namespace heuristic, so sibling-less rows in discovered env namespaces
   // still label without any hardcoded vocabulary.
@@ -25,6 +27,7 @@ export function ApplicationsList({ apps, onSelect }: ApplicationsListProps) {
       variant="single"
       entries={entries}
       onSelect={onSelect}
+      headerActions={headerActions}
       title="Applications"
       description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
     />

package/src/components/applications/ApplicationsView.tsx

@@ -6,6 +6,7 @@ import { StatusDot, mapHealthToTone } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
 import { EmptyState } from '../ui/EmptyState'
 import { SearchBox } from '../ui/SearchBox'
+import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { PageHeader } from '../ui/PageHeader'
 import { SummaryTile, type SummaryTone } from '../ui/SummaryTile'
 import { Facet, type FacetTone } from '../ui/Facet'
@@ -97,16 +98,33 @@ export interface ApplicationsViewProps {
   /** Rendered instead of the built-in EmptyState when there are zero entries
    *  pre-filter (the fleet host injects a coverage/offline-aware empty). */
   emptySlot?: ReactNode
+  /** Leading element in the header actions cluster (e.g. a freshness control). */
+  headerActions?: ReactNode
 }
 
-export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot }: ApplicationsViewProps) {
-  const [textFilter, setTextFilter] = useState('')
-  const [fHealth, setFHealth] = useState<Set<AppHealth>>(new Set())
-  const [fEnv, setFEnv] = useState<Set<string>>(new Set())
-  const [fSource, setFSource] = useState<Set<AppSource>>(new Set())
-  const [fClass, setFClass] = useState<Set<AppWorkloadClass>>(new Set())
-  const [fType, setFType] = useState<Set<AppCategory>>(new Set())
-  const [showSystem, setShowSystem] = useState(false)
+const APPS_FILTER_SCHEMA = defineFilterSchema({
+  health: { param: 'health', type: 'set' },
+  class: { param: 'class', type: 'set' },
+  type: { param: 'type', type: 'set' },
+  env: { param: 'env', type: 'set' },
+  source: { param: 'source', type: 'set' },
+  q: { param: 'q', type: 'text' },
+  system: { param: 'system', type: 'boolean' },
+})
+
+export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions }: ApplicationsViewProps) {
+  // Facets + search + show-system live in the URL (shareable, bookmarkable) via
+  // the shared filter-state contract. Sort stays local: it's a compound
+  // {key, dir} view-preference, not a result-narrowing filter, so it isn't
+  // forced into the filter vocabulary.
+  const filters = useFilterState(APPS_FILTER_SCHEMA)
+  const textFilter = filters.values.q
+  const fHealth = filters.values.health as Set<AppHealth>
+  const fEnv = filters.values.env
+  const fSource = filters.values.source as Set<AppSource>
+  const fClass = filters.values.class as Set<AppWorkloadClass>
+  const fType = filters.values.type as Set<AppCategory>
+  const showSystem = filters.values.system
   const [sort, setSort] = useState<{ key: SortKey; dir: SortDir } | null>(null)
 
   // The Show-system toggle keys off per-entry workload namespaces, which only
@@ -242,12 +260,6 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
     return { health, env, source, workloadClass, category }
   }, [all])
 
-  const toggle = <T,>(set: Set<T>, setter: (s: Set<T>) => void, v: T) => {
-    const next = new Set(set)
-    next.has(v) ? next.delete(v) : next.add(v)
-    setter(next)
-  }
-
   // asc → desc → off (null = default health-worst-first sort).
   const onSort = (key: SortKey) => {
     setSort((prev) => {
@@ -265,20 +277,14 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
   // Clickable status tile wired to the health facet — tap to filter to that tier.
   const healthTile = (h: AppHealth, tone: SummaryTone) =>
     counts.health[h] ? (
-      <SummaryTile key={h} label={HEALTH_META[h].label} value={counts.health[h]} tone={tone} active={fHealth.has(h)} onClick={() => toggle(fHealth, setFHealth, h)} />
+      <SummaryTile key={h} label={HEALTH_META[h].label} value={counts.health[h]} tone={tone} active={fHealth.has(h)} onClick={() => filters.toggle('health', h)} />
     ) : null
 
   // showSystem lives in the Filters rail, so Clear resets it too (and its
   // non-default ON state counts as an active filter that surfaces the button).
-  const anyFilterActive = !!(textFilter || fHealth.size || fClass.size || fType.size || fSource.size || fEnv.size || showSystem)
+  const anyFilterActive = filters.isActive
   const clearAllFilters = () => {
-    setTextFilter('')
-    setFHealth(new Set())
-    setFClass(new Set())
-    setFType(new Set())
-    setFSource(new Set())
-    setFEnv(new Set())
-    setShowSystem(false)
+    filters.clearAll()
   }
 
   return (
@@ -294,6 +300,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           description={description}
           actions={
             <>
+              {headerActions}
               <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} />
               {healthTile('unhealthy', 'error')}
               {healthTile('degraded', 'warning')}
@@ -323,14 +330,14 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             )}
           </div>
           <div className="flex-1 overflow-y-auto">
-            <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) => toggle(fHealth, setFHealth, 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) => toggle(fClass, setFClass, 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) => toggle(fType, setFType, v)} />
-            <Facet icon={Globe} title="Environment" info={<EnvHint />} options={envOptions} selected={fEnv} onToggle={(v) => toggle(fEnv, setFEnv, v)} />
-            <Facet icon={Tag} title="Source" options={SOURCE_ORDER.map((s) => ({ value: s, label: SOURCE_META[s].label, count: counts.source[s] ?? 0 }))} selected={fSource} onToggle={(v) => toggle(fSource, setFSource, v)} />
+            <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={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)} />
+            <Facet icon={Tag} title="Source" options={SOURCE_ORDER.map((s) => ({ value: s, label: SOURCE_META[s].label, count: counts.source[s] ?? 0 }))} selected={fSource} onToggle={(v) => filters.toggle('source', v)} />
             {systemCount > 0 && (
               <label className="flex cursor-pointer items-center gap-2 border-b border-theme-border px-3 py-2 text-[11px] text-theme-text-secondary hover:bg-theme-hover">
-                <input type="checkbox" checked={showSystem} onChange={(e) => setShowSystem(e.target.checked)} className="accent-skyhook-500" />
+                <input type="checkbox" checked={showSystem} onChange={(e) => filters.setBoolean('system', e.target.checked)} className="accent-skyhook-500" />
                 <span>Show system namespaces</span>
                 <span className="ml-auto tabular-nums text-theme-text-tertiary">{systemCount}</span>
               </label>
@@ -343,7 +350,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           <div className="flex shrink-0 items-center gap-3 border-b border-theme-border px-4 py-3">
             <SearchBox
               value={textFilter}
-              onChange={setTextFilter}
+              onChange={(v) => filters.setString('q', v)}
               scope="applications"
               shortcutId="applications-search"
               className="max-w-md flex-1"

package/src/components/checks/ChecksView.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState, 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 { 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 {
@@ -79,11 +80,24 @@ interface FleetCheck {
   clusters: Check[]
 }
 
+const CHECKS_FILTER_SCHEMA = defineFilterSchema({
+  severity: { param: 'severity', type: 'set' },
+  category: { param: 'category', type: 'set' },
+  framework: { param: 'framework', type: 'set' },
+  q: { param: 'q', type: 'text' },
+})
+
 export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
-  const [severityFilter, setSeverityFilter] = useState<Set<CheckSeverity>>(new Set())
-  const [categoryFilter, setCategoryFilter] = useState<Set<string>>(new Set())
-  const [frameworkFilter, setFrameworkFilter] = useState<Set<string>>(new Set())
-  const [search, setSearch] = useState('')
+  // Severity / category / framework / search live in the URL (shareable,
+  // bookmarkable audit links) via the shared filter-state contract. The cluster
+  // facet is deliberately NOT here — it's a host-controlled seam (see
+  // onClusterFilterChange) for the multi-cluster/fleet case and isn't shown in
+  // single-cluster OSS, so it stays on its own controlled/internal path.
+  const filters = useFilterState(CHECKS_FILTER_SCHEMA)
+  const severityFilter = filters.values.severity as Set<CheckSeverity>
+  const categoryFilter = filters.values.category
+  const frameworkFilter = filters.values.framework
+  const search = filters.values.q
   const [openId, setOpenId] = useState<string | null>(null)
 
   // Cluster facet is controlled when the host opts in (onClusterFilterChange);
@@ -209,13 +223,10 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
       return next
     })
 
-  const hasFilters = severityFilter.size > 0 || categoryFilter.size > 0 || frameworkFilter.size > 0 || clusterFilter.size > 0 || search !== ''
+  const hasFilters = filters.isActive || clusterFilter.size > 0
   const clearAll = () => {
-    setSeverityFilter(new Set())
-    setCategoryFilter(new Set())
-    setFrameworkFilter(new Set())
+    filters.clearAll()
     setClusterFilter(new Set())
-    setSearch('')
   }
 
   return (
@@ -239,13 +250,13 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
               type="text"
               placeholder="Search checks…"
               value={search}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) => filters.setString('q', e.target.value)}
               className="w-64 rounded-lg border border-theme-border-light bg-theme-base py-1.5 pl-9 pr-8 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-[var(--color-radar-accent)]"
             />
             {search && (
               <button
                 type="button"
-                onClick={() => setSearch('')}
+                onClick={() => filters.setString('q', '')}
                 aria-label="Clear search"
                 className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-theme-text-tertiary hover:text-theme-text-primary"
               >
@@ -259,17 +270,17 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
 
         <div className="flex flex-wrap items-center gap-1.5">
           {CHECK_SEVERITIES.map((s) => (
-            <CheckSeverityChip key={s} severity={s} count={totals[s]} active={severityFilter.has(s)} onClick={() => toggle(setSeverityFilter, s)} />
+            <CheckSeverityChip key={s} severity={s} count={totals[s]} active={severityFilter.has(s)} onClick={() => filters.toggle('severity', s)} />
           ))}
           <span className="mx-1.5 h-5 w-px bg-theme-border" />
           {CATEGORIES.map((c) => (
-            <FilterPill key={c} label={c} active={categoryFilter.has(c)} onClick={() => toggle(setCategoryFilter, c)} />
+            <FilterPill key={c} label={c} active={categoryFilter.has(c)} onClick={() => filters.toggle('category', c)} />
           ))}
           {frameworks.length > 0 && (
             <>
               <span className="mx-1.5 h-5 w-px bg-theme-border" />
               {frameworks.map((fw) => (
-                <FilterPill key={fw} label={fw} active={frameworkFilter.has(fw)} onClick={() => toggle(setFrameworkFilter, fw)} />
+                <FilterPill key={fw} label={fw} active={frameworkFilter.has(fw)} onClick={() => filters.toggle('framework', fw)} />
               ))}
             </>
           )}

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -58,6 +58,15 @@ export interface ClusterSwitcherProps {
   errorSlot?: ReactNode
   className?: string
   align?: 'left' | 'right'
+  /**
+   * 'chip' (default) renders a self-contained bordered pill. 'segment' renders
+   * a borderless label+value cell for embedding in a shared bordered container
+   * (the unified cluster+namespace scope control) — no border/background/min-w
+   * of its own, with an optional muted {@link label} before the value.
+   */
+  variant?: 'chip' | 'segment'
+  /** Muted label shown before the value in the 'segment' variant (e.g. "Cluster"). */
+  label?: string
 }
 
 // Trigger width cap. With middle-truncation kicking in, this is a
@@ -83,6 +92,8 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   errorSlot,
   className = '',
   align = 'left',
+  variant = 'chip',
+  label,
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -195,14 +206,21 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
         type="button"
         onClick={() => setIsOpen(v => !v)}
         disabled={disabled || loading}
-        className={`
-          flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
-          bg-theme-elevated border border-theme-border rounded text-sm font-medium
-          text-theme-text-primary hover:bg-theme-hover hover:border-theme-border-light
-          transition-colors cursor-pointer
-          disabled:opacity-50 disabled:cursor-not-allowed
-        `}
+        className={
+          variant === 'segment'
+            ? `flex items-center gap-1.5 px-3 py-1.5 h-full min-w-[150px] max-w-[264px] text-[13px] font-medium
+               text-theme-text-primary hover:bg-theme-hover transition-colors cursor-pointer
+               disabled:opacity-50 disabled:cursor-not-allowed`
+            : `flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
+               bg-theme-elevated border border-theme-border rounded text-sm font-medium
+               text-theme-text-primary hover:bg-theme-hover hover:border-theme-border-light
+               transition-colors cursor-pointer
+               disabled:opacity-50 disabled:cursor-not-allowed`
+        }
       >
+        {label && (
+          <span className="shrink-0 font-normal text-theme-text-tertiary">{label}</span>
+        )}
         {loading ? (
           <>
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -220,7 +238,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
             <ClusterName
               name={currentName}
               fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
-              className={TRIGGER_NAME_MAX_WIDTH}
+              className={variant === 'segment' ? 'min-w-0 max-w-[214px]' : TRIGGER_NAME_MAX_WIDTH}
               noTooltip={isOpen}
             />
             {currentSourceLabel && (
@@ -240,7 +258,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
             )}
           </>
         )}
-        <ChevronDown className={`w-3 h-3 ml-auto transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-3 h-3 shrink-0 transition-transform ${variant === 'segment' ? '' : 'ml-auto'} ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {isOpen && (