@skyhook-io/k8s-ui 1.8.7 → 1.8.9

package/src/filter-state/filter-state.tsx

@@ -0,0 +1,127 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import {
+  decodeFilters,
+  isFilterActive,
+  withCleared,
+  withField,
+  withToggle,
+  emptyValue,
+  type FieldKeysOfType,
+  type FilterSchema,
+  type FilterValues,
+} from './filter-state-core'
+
+// Shared filter-state contract for Radar's list views (OSS + Hub).
+//
+// The consolidation center is BEHAVIOR, not components: one place owns how a
+// view's filters serialize to the URL, what "cleared" means, and how defaults
+// encode — so every list view is shareable/bookmarkable and behaves the same,
+// whether it renders as a facet sidebar or a compact bar.
+//
+// URL is the single source of truth (no localStorage of filter values — that
+// goes stale across clusters/orgs). Router-agnostic + app-agnostic: this never
+// imports react-router or reads window; the host injects a FilterLocation
+// adapter over its own router. All transforms live in ./filter-state-core (pure,
+// exhaustively tested); this file is only the React glue.
+
+/** A reactive view of the URL query string, injected by the host app. */
+export interface FilterLocation {
+  /** Current query params — reactive (sourced from the app's router hook). */
+  searchParams: URLSearchParams
+  /**
+   * Apply an update. The updater receives the LATEST params (not a captured
+   * snapshot), so rapid successive toggles compose instead of clobbering.
+   * `replace` avoids a history entry per keystroke (used for text fields).
+   */
+  update: (updater: (prev: URLSearchParams) => URLSearchParams, opts?: { replace?: boolean }) => void
+}
+
+const FilterLocationContext = createContext<FilterLocation | null>(null)
+
+/**
+ * Wrap the app subtree once with the host's router adapter, e.g.
+ *   const [searchParams, setSearchParams] = useSearchParams()
+ *   <FilterLocationProvider value={{ searchParams, update: setSearchParams }}>
+ */
+export function FilterLocationProvider({ value, children }: { value: FilterLocation; children: ReactNode }) {
+  return <FilterLocationContext.Provider value={value}>{children}</FilterLocationContext.Provider>
+}
+
+export function useFilterLocation(): FilterLocation {
+  const ctx = useContext(FilterLocationContext)
+  if (!ctx) throw new Error('useFilterState requires a <FilterLocationProvider> ancestor')
+  return ctx
+}
+
+export interface FilterState<S extends FilterSchema> {
+  values: FilterValues<S>
+  /** Any field diverges from its default (⇒ show a "Clear all" affordance). */
+  isActive: boolean
+  /** Add/remove one value in a 'set' field. */
+  toggle: (key: FieldKeysOfType<S, 'set'>, value: string) => void
+  /** Replace a 'set' field wholesale. */
+  setSet: (key: FieldKeysOfType<S, 'set'>, values: string[]) => void
+  /** Set a 'text' or 'single' field. 'text' replaces history; 'single' pushes it. */
+  setString: (key: FieldKeysOfType<S, 'text' | 'single'>, value: string) => void
+  setBoolean: (key: FieldKeysOfType<S, 'boolean'>, value: boolean) => void
+  /** Reset one field to its default. */
+  clear: (key: keyof S) => void
+  /** Reset every field in the schema (leaves unrelated params untouched). */
+  clearAll: () => void
+}
+
+export function useFilterState<S extends FilterSchema>(schema: S): FilterState<S> {
+  const ctx = useContext(FilterLocationContext)
+
+  // Graceful fallback: without a provider, keep filter state locally (still
+  // works, just not URL-synced). This lets a shared view adopt the contract
+  // before every host has wired a FilterLocationBridge — a host that hasn't
+  // (e.g. Radar Hub, until it picks up a published build) keeps its prior local
+  // behavior instead of crashing. A one-time warning flags the missing wiring.
+  const [localParams, setLocalParams] = useState(() => new URLSearchParams())
+  const warned = useRef(false)
+  useEffect(() => {
+    if (!ctx && !warned.current) {
+      warned.current = true
+      console.warn('[k8s-ui] useFilterState: no <FilterLocationProvider> ancestor — filters are local, not URL-synced.')
+    }
+  }, [ctx])
+  const fallback = useMemo<FilterLocation>(
+    () => ({ searchParams: localParams, update: (u) => setLocalParams((prev) => u(new URLSearchParams(prev))) }),
+    [localParams],
+  )
+  const { searchParams, update } = ctx ?? fallback
+
+  // Depend on the serialized string, not the URLSearchParams object identity, so
+  // a router adapter that returns a mutated/unstable instance can't stale the memo.
+  const paramsKey = searchParams.toString()
+  const values = useMemo(() => decodeFilters(schema, new URLSearchParams(paramsKey)), [schema, paramsKey])
+  const isActive = useMemo(() => isFilterActive(schema, values), [schema, values])
+
+  const toggle = useCallback(
+    (key: FieldKeysOfType<S, 'set'>, value: string) => update((prev) => withToggle(schema, prev, key, value)),
+    [schema, update],
+  )
+  const setSet = useCallback(
+    (key: FieldKeysOfType<S, 'set'>, vals: string[]) => update((prev) => withField(schema, prev, key, new Set(vals))),
+    [schema, update],
+  )
+  const setString = useCallback(
+    (key: FieldKeysOfType<S, 'text' | 'single'>, v: string) =>
+      // Typing into a search box shouldn't spam history; picking an enum should be
+      // a real back-step. 'text' replaces, 'single' pushes.
+      update((prev) => withField(schema, prev, key, v), { replace: schema[key].type === 'text' }),
+    [schema, update],
+  )
+  const setBoolean = useCallback(
+    (key: FieldKeysOfType<S, 'boolean'>, v: boolean) => update((prev) => withField(schema, prev, key, v)),
+    [schema, update],
+  )
+  const clear = useCallback(
+    (key: keyof S) => update((prev) => withField(schema, prev, key, emptyValue(schema[key]))),
+    [schema, update],
+  )
+  const clearAll = useCallback(() => update((prev) => withCleared(schema, prev)), [schema, update])
+
+  return { values, isActive, toggle, setSet, setString, setBoolean, clear, clearAll }
+}

package/src/filter-state/index.ts

@@ -0,0 +1,16 @@
+export {
+  FilterLocationProvider,
+  useFilterLocation,
+  useFilterState,
+} from './filter-state'
+export type { FilterLocation, FilterState } from './filter-state'
+export {
+  defineFilterSchema,
+  decodeFilters,
+  withField,
+  withToggle,
+  withCleared,
+  emptyValue,
+  isFilterActive,
+} from './filter-state-core'
+export type { FilterFieldDef, FilterSchema, FilterValues, FieldKeysOfType } from './filter-state-core'

package/src/hooks/index.ts

@@ -5,5 +5,6 @@ export {
   useRegisterShortcut,
   useRegisterShortcuts,
   useActiveShortcuts,
+  useSuppressBaseShortcuts,
 } from './useKeyboardShortcuts'
 export type { KeyboardShortcut, ShortcutCategory } from './useKeyboardShortcuts'

package/src/hooks/useKeyboardShortcuts.tsx

@@ -46,6 +46,10 @@ interface RegisteredShortcut extends KeyboardShortcut {
 interface KeyboardShortcutContextType {
   registerShortcut: (shortcut: KeyboardShortcut) => () => void
   activeShortcuts: KeyboardShortcut[]
+  /** When true, view-level shortcuts (the per-page scopes) are suppressed — used
+   *  while a fullscreen detail overlay covers the page so the hidden view's keys
+   *  don't fire. `global` (⌘K, the overlay's Escape) and `drawer` still fire. */
+  setBaseShortcutsSuppressed: (suppressed: boolean) => void
 }
 
 const KeyboardShortcutContext = createContext<KeyboardShortcutContextType | null>(null)
@@ -142,6 +146,9 @@ export function KeyboardShortcutProvider({ children }: { children: ReactNode })
   const [version, setVersion] = useState(0)
   const sequenceKeyRef = useRef<string | null>(null)
   const sequenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Read in the keydown handler (a ref, so no re-subscribe needed on change).
+  const baseSuppressedRef = useRef(false)
+  const setBaseShortcutsSuppressed = useCallback((s: boolean) => { baseSuppressedRef.current = s }, [])
 
   const registerShortcut = useCallback((shortcut: KeyboardShortcut) => {
     const id = nextRegistrationId++
@@ -161,9 +168,13 @@ export function KeyboardShortcutProvider({ children }: { children: ReactNode })
       const suppression = getSuppressionLevel(e)
       const suppressed = suppression !== 'none'
 
-      // Get all enabled shortcuts, sorted by scope priority (highest first)
+      // Get all enabled shortcuts, sorted by scope priority (highest first).
+      // While a fullscreen overlay covers the page, drop the view-level scopes
+      // (the hidden page's keys) but keep `global` (⌘K, the overlay's Escape) and
+      // `drawer` so the overlay still works.
       const shortcuts = Array.from(shortcutsRef.current.values())
         .filter(s => s.enabled !== false)
+        .filter(s => !baseSuppressedRef.current || s.scope === 'global' || s.scope === 'drawer')
         .sort((a, b) => SCOPE_PRIORITY[b.scope] - SCOPE_PRIORITY[a.scope])
 
       // Check for multi-key sequence completion
@@ -258,12 +269,22 @@ export function KeyboardShortcutProvider({ children }: { children: ReactNode })
   , [version])
 
   return (
-    <KeyboardShortcutContext.Provider value={{ registerShortcut, activeShortcuts }}>
+    <KeyboardShortcutContext.Provider value={{ registerShortcut, activeShortcuts, setBaseShortcutsSuppressed }}>
       {children}
     </KeyboardShortcutContext.Provider>
   )
 }
 
+/** Suppress view-level shortcuts while `active` (a fullscreen detail overlay is up).
+ *  `global` and `drawer` scopes keep firing so ⌘K and the overlay's own keys work. */
+export function useSuppressBaseShortcuts(active: boolean) {
+  const ctx = useContext(KeyboardShortcutContext)
+  useEffect(() => {
+    ctx?.setBaseShortcutsSuppressed(active)
+    return () => ctx?.setBaseShortcutsSuppressed(false)
+  }, [ctx, active])
+}
+
 /** Register a keyboard shortcut. Automatically deregisters on unmount or when key config changes. */
 export function useRegisterShortcut(shortcut: KeyboardShortcut) {
   const ctx = useContext(KeyboardShortcutContext)

package/src/hooks/useRefreshAnimation.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 
 const MIN_SPIN_DURATION = 400 // ms
 const SUCCESS_DISPLAY_DURATION = 1200 // ms
@@ -15,6 +15,18 @@ type RefreshPhase = 'idle' | 'spinning' | 'success'
 export function useRefreshAnimation(refetchFn: () => void | Promise<unknown>): [() => void, boolean, RefreshPhase] {
   const [phase, setPhase] = useState<RefreshPhase>('idle')
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Guards the async `finally`/timer callbacks from setting state after the
+  // host unmounts — this hook now lives on routed views that mount/unmount.
+  const mountedRef = useRef(true)
+  useEffect(() => {
+    // Re-arm on (re)mount — Strict Mode's mount→cleanup→remount would otherwise
+    // leave this stuck false and freeze the spinner on the next refresh.
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
 
   const wrappedRefetch = useCallback(() => {
     if (timeoutRef.current) {
@@ -31,9 +43,10 @@ export function useRefreshAnimation(refetchFn: () => void | Promise<unknown>): [
       const remaining = MIN_SPIN_DURATION - elapsed
 
       const transitionToSuccess = () => {
+        if (!mountedRef.current) return
         setPhase('success')
         timeoutRef.current = setTimeout(() => {
-          setPhase('idle')
+          if (mountedRef.current) setPhase('idle')
         }, SUCCESS_DISPLAY_DURATION)
       }
 

package/src/index.ts

@@ -53,6 +53,18 @@ export * from './components/issues'
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
 
+// Namespace picker (shared scope-filter trigger+dropdown for OSS Radar and
+// Radar Hub — pure presentation, data injected via props)
+export * from './components/namespace-switcher'
+
+// Scope pill — the shared bordered shell that groups the cluster + namespace
+// segments into one unit (OSS header + Radar Hub cluster top bar)
+export * from './components/scope-pill'
+
+// Filter-state contract — shared URL-synced filter state for list views (OSS +
+// Hub), router-agnostic via an injected FilterLocation adapter
+export * from './filter-state'
+
 // Applications (shared host-agnostic list + detail shell for the deployable-
 // software surface; OSS renders single-cluster, Cloud adds the fleet layer)
 export * from './components/applications'

package/src/types/core.ts

@@ -587,6 +587,7 @@ export interface HelmOperation {
   source: HelmOperationSource
   confidence: HelmOperationConfidence
   message: string
+  rawMessage?: string
   evidence?: string
   failureDescription?: string
   revision?: number
@@ -597,6 +598,22 @@ export interface HelmOperation {
   updated?: string
 }
 
+export type HelmOperationInsightState = 'active' | 'recovered'
+
+export interface HelmSuggestedCompare {
+  revision1: number
+  revision2: number
+  reason?: string
+}
+
+export interface HelmOperationInsight {
+  state: HelmOperationInsightState
+  primaryResource?: HelmOwnedResource
+  relatedResources?: HelmOwnedResource[]
+  signalCount?: number
+  suggestedCompare?: HelmSuggestedCompare
+}
+
 export interface HelmReleaseDetail {
   name: string
   namespace: string
@@ -621,6 +638,7 @@ export interface HelmReleaseDetail {
   dependencies?: ChartDependency[]
   lastOperation?: HelmOperation
   operations?: HelmOperation[]
+  operationInsight?: HelmOperationInsight
   // When set, this release was installed by Flux's helm-controller — see
   // HelmRelease.managedByFluxHelmRelease for context. Format: "namespace/name".
   managedByFluxHelmRelease?: string
@@ -631,6 +649,7 @@ export interface HelmHook {
   namespace?: string
   kind: string
   path?: string
+  manifestChanged?: boolean
   events: string[]
   weight: number
   status?: string
@@ -746,6 +765,15 @@ export interface NotesDiff {
   diff: string
 }
 
+export interface HooksDiff {
+  revision1: number
+  revision2: number
+  added: HelmHook[]
+  removed: HelmHook[]
+  modified: HelmHook[]
+  unchanged: HelmHook[]
+}
+
 export interface HelmResourceRef {
   kind: string
   apiVersion?: string
@@ -753,12 +781,26 @@ export interface HelmResourceRef {
   namespace: string
 }
 
+export interface HelmResourceFieldChange {
+  path: string
+  oldValue: unknown
+  newValue: unknown
+}
+
+export interface HelmResourceChange extends HelmResourceRef {
+  summary?: string
+  fieldCount: number
+  fields: HelmResourceFieldChange[]
+}
+
 export interface ResourceDiff {
   revision1: number
   revision2: number
   added: HelmResourceRef[]
   removed: HelmResourceRef[]
+  modified: HelmResourceChange[]
   unchanged: HelmResourceRef[]
+  parseErrorCount?: number
 }
 
 // Selected Helm release (for drawer state)

package/src/types/gitops-insights.ts

@@ -45,6 +45,7 @@ export interface GitOpsInsightSummary {
   // Latest operation status message — surfaced inline in the status strip
   // when an operation is in flight or just failed.
   operationMessage?: string
+  rawOperationMessage?: string
   source?: string
   targetRevision?: string
   lastRevision?: string
@@ -79,6 +80,7 @@ export interface GitOpsIssue {
   scope: GitOpsScope
   reason: string
   message: string
+  rawMessage?: string
   refs?: GitOpsInsightRef[]
   action?: string
   // Plain-English root cause when the message matched a recognized error
@@ -112,6 +114,7 @@ export interface GitOpsChange {
   // Per-resource sync failure message (Argo's status.resources[].syncResult).
   // Distinct from `message` (live health). Empty when sync succeeded.
   syncError?: string
+  rawSyncError?: string
   // Sync hook phase: PreSync / PostSync / SyncFail / PostDelete. Empty
   // for non-hook resources.
   hookPhase?: string
@@ -175,6 +178,7 @@ export interface GitOpsHistoryItem {
   deployedAt?: string
   phase?: string
   message?: string
+  rawMessage?: string
   source?: string
   initiatedBy?: string
 }

package/src/utils/animation.ts

@@ -22,6 +22,16 @@ export const DURATION_DOCK = 150
 /** Toast exit animation */
 export const DURATION_TOAST_EXIT = 200
 
+/** Drawer ↔ fullscreen expand/collapse morph. Longer than DURATION_NORMAL so a
+ *  large width change advances in small per-frame steps (reads as fluid, not
+ *  abrupt). Drives the frame width, the content crossfade, and the JS window
+ *  together — keep them in lockstep. */
+export const DURATION_DRAWER_MORPH = 260
+/** Decelerate curve — fast start, gentle settle. Reads as snappy/responsive (the
+ *  earlier ease-in-out's slow start felt sluggish). Safe now that the pinned-layer
+ *  crossfade fixed the reflow that originally needed the gentle start. */
+export const EASE_DRAWER_MORPH = 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+
 // -- Tailwind class presets ---------------------------------------------------
 // Reusable class fragments — import and spread into clsx() calls.
 

package/src/utils/format-freshness.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { formatUpdatedAgo, formatLastUpdatedBucket, msToNextBucket } from './format'
+
+describe('formatUpdatedAgo', () => {
+  it('collapses the first minute to "just now"', () => {
+    expect(formatUpdatedAgo(0)).toBe('just now')
+    expect(formatUpdatedAgo(59_000)).toBe('just now')
+  })
+  it('renders minutes and hours with an "ago" suffix', () => {
+    expect(formatUpdatedAgo(60_000)).toBe('1m ago')
+    expect(formatUpdatedAgo(3_600_000)).toBe('1h ago')
+  })
+  it('collapses anything past a day to "over a day ago"', () => {
+    expect(formatUpdatedAgo(25 * 3_600_000)).toBe('over a day ago')
+  })
+})
+
+describe('formatLastUpdatedBucket', () => {
+  it('buckets by the coarsest unit', () => {
+    expect(formatLastUpdatedBucket(0)).toBe('just now')
+    expect(formatLastUpdatedBucket(60_000)).toBe('1m')
+    expect(formatLastUpdatedBucket(3_600_000)).toBe('1h')
+    expect(formatLastUpdatedBucket(86_400_000)).toBe('1d')
+  })
+})
+
+describe('msToNextBucket', () => {
+  it('schedules the next re-render exactly on the bucket boundary', () => {
+    expect(msToNextBucket(0)).toBe(60_000)
+    expect(msToNextBucket(30_000)).toBe(30_000)
+    // 90s elapsed → 30s until the "2m" bucket flips.
+    expect(msToNextBucket(90_000)).toBe(30_000)
+  })
+})

package/src/utils/format.ts

@@ -192,6 +192,38 @@ export function formatCompactAge(value?: string): string {
   return `${Math.floor(hours / 24)}d`
 }
 
+// Coarse "just now / Xm / Xh / Xd" buckets for freshness labels — finer-grained
+// updates add motion in the periphery without aiding any user decision.
+export function formatLastUpdatedBucket(elapsedMs: number): string {
+  const elapsedSec = Math.max(0, Math.floor(elapsedMs / 1000))
+  if (elapsedSec < 60) return 'just now'
+  const minutes = Math.floor(elapsedSec / 60)
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
+
+// ms until the bucket produced by formatLastUpdatedBucket would change — lets a
+// ticker re-render exactly on the boundary instead of polling every second.
+export function msToNextBucket(elapsedMs: number): number {
+  const elapsed = Math.max(0, elapsedMs)
+  if (elapsed < 60_000) return 60_000 - elapsed
+  if (elapsed < 3_600_000) return 60_000 - (elapsed % 60_000)
+  if (elapsed < 86_400_000) return 3_600_000 - (elapsed % 3_600_000)
+  return 86_400_000 - (elapsed % 86_400_000)
+}
+
+// Freshness phrasing for "Updated X" indicators: just now / Xm ago / Xh ago /
+// over a day ago. An exact day count is noise for an auto-refresh signal, so
+// anything past 24h collapses to "over a day ago".
+export function formatUpdatedAgo(elapsedMs: number): string {
+  const bucket = formatLastUpdatedBucket(elapsedMs)
+  if (bucket === 'just now') return 'just now'
+  if (bucket.endsWith('d')) return 'over a day ago'
+  return `${bucket} ago`
+}
+
 export function formatRelativeAgeTime(value?: string, fallback = '-'): string {
   if (!value) return fallback
   const time = Date.parse(value)

package/src/utils/resource-hierarchy.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+
+import type { TimelineEvent, Topology } from '../types/core'
+
+import { buildResourceHierarchy } from './resource-hierarchy'
+
+function svcEvent(namespace: string, name: string): TimelineEvent {
+  return {
+    id: `${namespace}/${name}`,
+    timestamp: '2024-01-01T00:00:00.000Z',
+    source: 'informer',
+    kind: 'Service',
+    namespace,
+    name,
+    eventType: 'update',
+  }
+}
+
+function svcNode(namespace: string, name: string, app: string) {
+  return {
+    id: `service/${namespace}/${name}`,
+    data: { apiVersion: 'v1', labels: { 'app.kubernetes.io/name': app } },
+  }
+}
+
+function topo(nodes: ReturnType<typeof svcNode>[]): Topology {
+  return { nodes, edges: [] } as unknown as Topology
+}
+
+describe('buildResourceHierarchy app-label grouping', () => {
+  it('does not merge the same app label across namespaces', () => {
+    const events = [svcEvent('team-a', 'web'), svcEvent('team-b', 'web')]
+    const topology = topo([svcNode('team-a', 'web', 'web'), svcNode('team-b', 'web', 'web')])
+
+    const lanes = buildResourceHierarchy({ events, topology, groupByApp: true })
+
+    expect(lanes).toHaveLength(2)
+    expect(lanes.every((l) => (l.children ?? []).length === 0)).toBe(true)
+    expect(new Set(lanes.map((l) => l.namespace))).toEqual(new Set(['team-a', 'team-b']))
+  })
+
+  it('groups distinct resources sharing an app label within one namespace', () => {
+    const events = [svcEvent('team-a', 'web'), svcEvent('team-a', 'web-edge')]
+    const topology = topo([svcNode('team-a', 'web', 'web'), svcNode('team-a', 'web-edge', 'web')])
+
+    const lanes = buildResourceHierarchy({ events, topology, groupByApp: true })
+
+    expect(lanes).toHaveLength(1)
+    expect(lanes[0].children).toHaveLength(1)
+  })
+})

package/src/utils/resource-hierarchy.ts

@@ -465,17 +465,20 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
       'HTTPProxy', // Contour
     ])
 
-    // Group lanes by app label
+    // Group lanes by app label, scoped to namespace: the same app label in two
+    // namespaces (e.g. the same workload deployed to dev and staging) is two
+    // distinct apps and must not collapse into one lane.
     const appGroups = new Map<string, string[]>()
     for (const [laneId, lane] of laneMap) {
       if (laneParent.has(laneId)) continue
       if (!appLabelEligibleKinds.has(lane.kind)) continue
       const appLabel = laneAppLabels.get(laneId)
       if (!appLabel) continue
-      if (!appGroups.has(appLabel)) {
-        appGroups.set(appLabel, [])
+      const groupKey = `${lane.namespace}/${appLabel}`
+      if (!appGroups.has(groupKey)) {
+        appGroups.set(groupKey, [])
       }
-      appGroups.get(appLabel)!.push(laneId)
+      appGroups.get(groupKey)!.push(laneId)
     }
 
     // For each app group with multiple members, pick the best parent