@skyhook-io/k8s-ui 1.8.7 → 1.8.8

package/src/components/namespace-switcher/NamespacePicker.tsx

@@ -0,0 +1,381 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
+
+/**
+ * Backend-reported namespace scope. Mirrors Radar's `/cluster/namespace-scope`
+ * response shape; the host supplies it however it fetches it (OSS via its API
+ * hooks, Radar Hub via the per-cluster apiBase).
+ */
+export interface NamespaceScopeView {
+  /** Currently-selected namespaces. Empty = cluster-wide ("All namespaces"). */
+  actives: string[]
+  /** Namespaces the user may pick from. */
+  accessibleNamespaces: string[]
+  mode?: 'cluster-wide' | 'namespace' | 'restricted' | string
+  /** Single-namespace cache-scope control instead of a multi-select filter. */
+  cacheScoped?: boolean
+  /** Under cacheScoped, whether the user may re-point the watched namespace. */
+  namespaceRescope?: boolean
+  cacheScopeNamespace?: string
+  kubeconfigNamespace?: string
+  canClearNamespace?: boolean
+  /** false when accessibleNamespaces is a best-effort short list (no list perm). */
+  authoritative?: boolean
+}
+
+export interface NamespacePickerHandle {
+  open: () => void
+}
+
+export interface NamespacePickerProps {
+  /** null/undefined while loading — the picker renders nothing until it arrives. */
+  scope: NamespaceScopeView | null | undefined
+  /**
+   * Applied when the selection is committed (dropdown close / clear all).
+   * The picker only calls this when the selection actually changed and is
+   * valid (respects the cacheScoped single-namespace constraint).
+   */
+  onApply: (namespaces: string[]) => void
+  loading?: boolean
+  /** A switch/mutation is in flight — trigger shows "Switching…" and is inert. */
+  pending?: boolean
+  disabled?: boolean
+  disabledTooltip?: string
+  className?: string
+  /**
+   * 'chip' (default) renders a self-contained pill. 'segment' renders a
+   * borderless label+value cell for embedding in a shared bordered container
+   * (the unified cluster+namespace scope control), with an optional muted
+   * {@link label} before the value and a shorter value ("All" vs "All namespaces").
+   */
+  variant?: 'chip' | 'segment'
+  /** Muted label shown before the value in the 'segment' variant (e.g. "Namespace"). */
+  label?: string
+}
+
+/**
+ * NamespacePicker is the presentational namespace scope control shared by
+ * Radar OSS and Radar Hub (mirrors the ClusterSwitcher pattern — pure UI, data
+ * injected via props). It is normally a per-user multi-select view filter. When
+ * the scope reports cacheScoped=true, it becomes a single-namespace cache scope
+ * control.
+ *
+ * Three states reflect what the scope reports:
+ *   - cluster-wide: empty trigger label "All namespaces"; picker lets the user
+ *     narrow the view.
+ *   - namespace:    label shows the namespace count (or single name); picker
+ *     offers other accessible namespaces and a clear-all reset.
+ *   - restricted:   user can't list namespaces and isn't pinned; picker
+ *     surfaces only the kubeconfig context's namespace + any saved picks.
+ *
+ * Selection model: the dropdown keeps a draft Set<string>; toggling rows
+ * mutates the draft locally; closing the dropdown applies the draft in a single
+ * onApply. "Clear all" applies immediately and closes.
+ */
+export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePickerProps>(function NamespacePicker(
+  { scope, onApply, loading = false, pending = false, disabled = false, disabledTooltip, className = '', variant = 'chip', label },
+  ref,
+) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
+  const [draft, setDraft] = useState<Set<string>>(() => new Set())
+
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
+  const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
+
+  // Sync the draft with the server's view whenever it changes (initial load,
+  // post-mutation refetch, eviction after RBAC drift).
+  useEffect(() => {
+    setDraft(new Set(scopeActives))
+  }, [activesKey, scopeActives])
+
+  // Fully disable when the host disables the control (e.g. view-awareness
+  // navigating to a cluster-scoped surface): the trigger is inert and open()
+  // is blocked, but an already-open dropdown would still commit via Done /
+  // outside-click / Clear all — so close it (discarding the uncommitted draft)
+  // rather than letting a dead view apply a namespace change.
+  useEffect(() => {
+    if (disabled && isOpen) {
+      setIsOpen(false)
+      setSearch('')
+      // Discard the uncommitted draft so a later re-open reflects the current
+      // server actives, not stale toggles from before the control was disabled.
+      setDraft(new Set(scopeActives))
+    }
+  }, [disabled, isOpen, scopeActives])
+
+  const items = useMemo(() => {
+    if (!scope) return [] as string[]
+    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
+  }, [scope])
+
+  const filteredItems = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(n => n.toLowerCase().includes(q))
+  }, [items, search])
+
+  const applySelection = useCallback((next: Set<string>) => {
+    if (!scope) return
+    const nextArr = Array.from(next).sort()
+    if (scope.cacheScoped && nextArr.length !== 1) return
+    if (nextArr.join(',') === activesKey) return
+    onApply(nextArr)
+  }, [activesKey, scope, onApply])
+
+  const closeAndApply = useCallback(() => {
+    setIsOpen(false)
+    setSearch('')
+    applySelection(draft)
+  }, [applySelection, draft])
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (disabled || loading || pending) return
+      setIsOpen(true)
+    },
+  }), [disabled, loading, pending])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const trigger = triggerRef.current
+    if (!trigger) return
+    const r = trigger.getBoundingClientRect()
+    setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) })
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!isOpen) return
+    function onClick(e: MouseEvent) {
+      if (
+        !dropdownRef.current?.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        closeAndApply()
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') closeAndApply()
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [isOpen, closeAndApply])
+
+  if (!scope) return null
+
+  const toggle = (ns: string) => {
+    if (scope.cacheScoped) {
+      setDraft(new Set([ns]))
+      return
+    }
+    const next = new Set(draft)
+    if (next.has(ns)) next.delete(ns)
+    else next.add(ns)
+    setDraft(next)
+  }
+
+  const clearAll = () => {
+    if (scope.cacheScoped) return
+    setDraft(new Set())
+    setIsOpen(false)
+    setSearch('')
+    applySelection(new Set())
+  }
+
+  const selectAllVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.add(ns)
+    setDraft(next)
+  }
+
+  const clearVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.delete(ns)
+    setDraft(next)
+  }
+
+  const activeCount = scopeActives.length
+  const triggerLabel =
+    activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
+  const isClusterWide = activeCount === 0
+  const restrictedHint = scope.mode === 'restricted'
+  const cacheScopeLocked = scope.cacheScoped && !scope.namespaceRescope
+  const isDisabled = disabled || loading || pending || cacheScopeLocked
+  const canClearAll = scope.canClearNamespace || activeCount === 0
+  const tooltipContent = disabled && disabledTooltip
+    ? disabledTooltip
+    : scope.cacheScoped
+      ? scope.namespaceRescope
+        ? `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} to stay fast on large clusters. Pick another namespace to re-point it (takes a moment; closes open terminals).`
+        : `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} on this cluster.`
+      : restrictedHint
+      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
+      : isClusterWide
+        ? 'Currently viewing all namespaces. Click to narrow the view.'
+        : activeCount === 1
+          ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
+          : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
+
+  // Counts used to label the bulk-action buttons; computed against the visible
+  // (filtered) set so the labels match what the action will affect.
+  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
+  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
+
+  return (
+    <>
+      <Tooltip
+        content={tooltipContent}
+        delay={300}
+        position="bottom"
+      >
+        <button
+          ref={triggerRef}
+          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
+          disabled={isDisabled}
+          className={
+            variant === 'segment'
+              ? `flex items-center justify-center gap-1.5 px-3 py-1.5 h-full min-w-[110px] max-w-[200px] text-[13px] text-theme-text-primary hover:bg-theme-hover disabled:opacity-60 transition-colors ${className}`
+              : `flex items-center gap-1.5 px-2 py-1 rounded text-sm bg-theme-elevated hover:bg-theme-hover text-theme-text-primary disabled:opacity-60 transition-colors ${className}`
+          }
+          aria-label="Switch active namespaces"
+        >
+          {label && (
+            <span className="shrink-0 font-normal text-theme-text-tertiary">{label}</span>
+          )}
+          {isClusterWide ? (
+            <Globe className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />
+          ) : restrictedHint ? (
+            <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />
+          ) : null}
+          <span className={`font-medium truncate ${variant === 'segment' ? 'min-w-0' : 'max-w-[180px]'}`}>
+            {pending ? 'Switching…' : triggerLabel}
+          </span>
+          <ChevronDown className="w-3 h-3 shrink-0 opacity-60" />
+        </button>
+      </Tooltip>
+
+      {isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
+            className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
+          >
+            {items.length > 6 && (
+              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
+                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  autoFocus
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  placeholder="Filter namespaces"
+                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
+                />
+              </div>
+            )}
+
+            {scope.cacheScoped ? (
+              <div className="px-3 py-1.5 border-b border-theme-border text-[11px] leading-snug text-theme-text-secondary">
+                Radar is watching one namespace to stay fast on large clusters.
+                {scope.namespaceRescope
+                  ? ' Pick another to re-point it — takes a moment and closes open terminals.'
+                  : ' This instance is locked to its startup namespace.'}
+              </div>
+            ) : (
+              <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
+                <button
+                  onClick={canClearAll ? clearAll : undefined}
+                  disabled={!canClearAll || activeCount === 0}
+                  className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+                  aria-label="Clear namespace selection"
+                >
+                  <X className="w-3 h-3" />
+                  Clear all
+                </button>
+                <button
+                  onClick={allVisibleSelected ? clearVisible : selectAllVisible}
+                  disabled={filteredItems.length === 0}
+                  className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+                >
+                  {allVisibleSelected
+                    ? `Clear ${filteredItems.length} visible`
+                    : search.trim()
+                      ? `Select ${filteredItems.length} visible`
+                      : 'Select all'}
+                </button>
+              </div>
+            )}
+
+            <ul className="max-h-80 overflow-y-auto py-1">
+              {filteredItems.length === 0 && (
+                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
+                  {search ? 'No matches.' : 'No namespaces available.'}
+                </li>
+              )}
+
+              {filteredItems.map(ns => {
+                const isChecked = draft.has(ns)
+                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
+                return (
+                  <li key={ns}>
+                    <label
+                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
+                    >
+                      <span className="flex items-center gap-2 min-w-0">
+                        <input
+                          type={scope.cacheScoped ? 'radio' : 'checkbox'}
+                          name={scope.cacheScoped ? 'namespace-cache-scope' : undefined}
+                          checked={isChecked}
+                          onChange={() => toggle(ns)}
+                          className="shrink-0 accent-current"
+                        />
+                        <span className="truncate">{ns}</span>
+                        {isContextDefault && (
+                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                            kubeconfig
+                          </span>
+                        )}
+                      </span>
+                    </label>
+                  </li>
+                )
+              })}
+            </ul>
+
+            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
+              <span>
+                {scope.cacheScoped
+                  ? (draft.size === 1 ? Array.from(draft)[0] : 'Select a namespace')
+                  : draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
+              </span>
+              <button
+                onClick={closeAndApply}
+                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
+              >
+                Done
+              </button>
+            </div>
+
+            {!scope.authoritative && (
+              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
+                Limited list — your RBAC doesn&rsquo;t allow listing all
+                namespaces. Other namespaces may be accessible but won&rsquo;t
+                appear here until you switch context.
+              </div>
+            )}
+          </div>,
+          document.body,
+        )}
+    </>
+  )
+})

package/src/components/namespace-switcher/index.ts

@@ -0,0 +1,6 @@
+export { NamespacePicker } from './NamespacePicker'
+export type {
+  NamespacePickerProps,
+  NamespacePickerHandle,
+  NamespaceScopeView,
+} from './NamespacePicker'

package/src/components/resources/ResourcesView.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, useId } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
@@ -13,7 +12,6 @@ import {
   ChevronDown,
   ChevronUp,
   ArrowUpDown,
-  Clock,
   ListFilter,
   X,
   Columns3,
@@ -133,6 +131,7 @@ import { SEVERITY_BADGE, EVENT_TYPE_COLORS, SEVERITY_TEXT } from '../../utils/ba
 import { pluralize } from '../../utils/pluralize'
 import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
 import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
+import { FreshnessControl, type FreshnessConnection } from '../ui/FreshnessControl'
 import { Tooltip } from '../ui/Tooltip'
 import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 // CRD-specific cell components (extracted)
@@ -1851,6 +1850,9 @@ interface ResourcesViewProps {
   resourceUnavailable?: string[]
   // Single query for the currently selected kind's full data
   selectedKindQuery?: ResourceQueryResult
+  // Cluster/SSE connection health — the list is SSE-invalidated ("Auto-updating"),
+  // so it must degrade to "Reconnecting…" when the stream drops.
+  connectionState?: FreshnessConnection
   largeListGuard?: LargeListGuardState | null
   topPodMetrics?: TopPodMetrics[]
   topNodeMetrics?: TopNodeMetrics[]
@@ -2017,51 +2019,6 @@ function getInitialFiltersFromURL() {
 // Sort state type
 type SortDirection = 'asc' | 'desc' | null
 
-// Coarse "just now / Xm / Xh / Xd" buckets — finer-grained updates
-// add motion in the periphery without aiding any user decision.
-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 displayed bucket would change.
-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)
-}
-
-// Isolated subtree so re-renders don't cascade into the parent's
-// virtualized table.
-function LastUpdatedLabel({ lastUpdated }: { lastUpdated: Date }) {
-  const [, force] = useState(0)
-  useEffect(() => {
-    let id: ReturnType<typeof setTimeout>
-    function schedule() {
-      const delay = Math.max(1000, msToNextBucket(Date.now() - lastUpdated.getTime()))
-      id = setTimeout(() => {
-        force(t => t + 1)
-        schedule()
-      }, delay)
-    }
-    schedule()
-    return () => clearTimeout(id)
-  }, [lastUpdated])
-  return (
-    <div className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
-      <Clock className="w-3.5 h-3.5" />
-      <span>Updated {formatLastUpdatedBucket(Date.now() - lastUpdated.getTime())}</span>
-    </div>
-  )
-}
-
 export function ResourcesView({
   namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange,
   apiResources: apiResourcesProp,
@@ -2071,6 +2028,7 @@ export function ResourcesView({
   resourceReasons,
   resourceUnavailable: resourceUnavailableProp,
   selectedKindQuery: selectedKindQueryProp,
+  connectionState,
   largeListGuard,
   topPodMetrics,
   topNodeMetrics,
@@ -2130,7 +2088,6 @@ export function ResourcesView({
   const [regexMode, setRegexMode] = useState(false)
   const [sortColumn, setSortColumn] = useState<string | null>(null)
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
   // Filter state
   const [columnFilters, setColumnFilters] = useState<Record<string, string[]>>(initialFilters.columnFilters)
   const [problemFilters, setProblemFilters] = useState<string[]>(initialFilters.problemFilters)
@@ -2951,6 +2908,11 @@ export function ResourcesView({
       params.set('resource', resourceNs ? `${resourceNs}/${resourceName}` : resourceName)
     } else {
       params.delete('resource')
+      // `full` (over-list fullscreen) and `tab` are resource-scoped — when no
+      // resource is selected they're stale; drop them so they can't leak onto a
+      // later selection (e.g. after a kind switch or closing the drawer).
+      params.delete('full')
+      params.delete('tab')
     }
 
     const newPath = `${basePath}/${kindInfo.name}`
@@ -3244,23 +3206,6 @@ export function ResourcesView({
   }, [resources])
   const isLoading = selectedQuery?.isLoading ?? true
   const selectedQueryError = selectedQuery?.error
-  const refetchFn = selectedQuery?.refetch
-  const dataUpdatedAt = selectedQuery?.dataUpdatedAt
-
-  const [refetch, isRefreshAnimating, refreshPhase] = useRefreshAnimation(() => refetchFn?.())
-
-  // React Query bumps dataUpdatedAt on no-op refetches (window focus,
-  // mount, sibling subscribers); structural sharing returns the same
-  // resources reference when data is byte-identical. Skip the timer
-  // reset in that case — otherwise opening a filter drawer looks like
-  // it triggered a real fetch.
-  const lastDataRef = useRef<unknown>(undefined)
-  useEffect(() => {
-    if (!dataUpdatedAt) return
-    if (resources === lastDataRef.current) return
-    lastDataRef.current = resources
-    setLastUpdated(new Date(dataUpdatedAt))
-  }, [dataUpdatedAt, resources])
 
   // Derive counts — prefer lightweight resourceCounts prop over full query data
   const counts = useMemo(() => {
@@ -4288,19 +4233,19 @@ export function ResourcesView({
             </Tooltip>
           )}
 
-          {lastUpdated && <LastUpdatedLabel lastUpdated={lastUpdated} />}
           {/* Column picker */}
           <div className="relative" ref={columnPickerRef}>
+            <Tooltip content="Configure columns">
             <button
               onClick={() => setShowColumnPicker(prev => !prev)}
               className={clsx(
                 'p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg',
                 showColumnPicker && 'bg-theme-elevated text-theme-text-primary'
               )}
-              title="Configure columns"
             >
               <Columns3 className="w-4 h-4" />
             </button>
+            </Tooltip>
             {showColumnPicker && (
               <div className="absolute right-0 top-full mt-1 z-50 bg-theme-surface border border-theme-border rounded-lg shadow-lg py-1 min-w-[200px] max-h-[400px] flex flex-col">
                 <div className="shrink-0 px-3 py-2 border-b border-theme-border flex items-center justify-between">
@@ -4406,20 +4351,6 @@ export function ResourcesView({
               </div>
             )}
           </div>
-          <button
-            onClick={refetch}
-            disabled={isRefreshAnimating}
-            className={clsx(
-              'p-2 hover:bg-theme-elevated rounded-lg disabled:opacity-50 transition-colors duration-500',
-              refreshPhase === 'success' ? 'text-emerald-400' : 'text-theme-text-secondary hover:text-theme-text-primary'
-            )}
-            title="Refresh"
-          >
-            {refreshPhase === 'success'
-              ? <Check className="w-4 h-4 stroke-[2.5]" />
-              : <RefreshCw className={clsx('w-4 h-4', refreshPhase === 'spinning' && 'animate-spin')} />
-            }
-          </button>
           {onCreateResource && (
             <Tooltip content={`Create ${selectedKind.kind || 'resource'}`}>
               <button
@@ -4470,6 +4401,14 @@ export function ResourcesView({
               </button>
             </Tooltip>
           )}
+          {/* Freshness/liveness status — trailing and divided off from the action
+              buttons so it reads as a status, not another control. Resources has
+              no PageHeader, so this toolbar is its home. */}
+          <div className="mx-1 h-5 w-px bg-theme-border/60" />
+          {/* The list is SSE-invalidated (near-real-time), so it reads
+              "Auto-updating" with no refresh button — the stream keeps it
+              current, so a manual refresh would only undercut the claim. */}
+          <FreshnessControl mode="auto" connectionState={connectionState} />
         </div>
 
         {/* Bulk actions bar */}

package/src/components/scope-pill/ScopePill.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+export interface ScopePillProps {
+  /**
+   * The scope segments — typically a cluster switcher followed by a namespace
+   * picker, each rendered in its `variant="segment"` form (borderless). They're
+   * separated by a divider and read as one "what am I looking at" unit.
+   */
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * ScopePill is the shared bordered shell for the cluster + namespace "scope"
+ * control, used by both OSS Radar's header and Radar Hub's cluster top bar so
+ * the two stay visually identical. It is purely the container: the segments
+ * (ClusterSwitcher / NamespacePicker in segment variant) and their data,
+ * view-awareness, and any layout pinning are the host's concern.
+ *
+ * Deliberately NO `overflow-hidden`: ClusterSwitcher's dropdown renders inline
+ * (absolute, not portaled), so clipping this ancestor would hide it. Instead of
+ * clipping, the outer corners of the first/last segment's TRIGGER button are
+ * rounded (7px = the 8px pill radius minus its 1px border) so each segment's
+ * hover/active fill follows the pill's shape instead of poking square corners
+ * past it. `>button` targets only the trigger, never the dropdown's buttons.
+ */
+export function ScopePill({ children, className = '' }: ScopePillProps) {
+  return (
+    <div
+      className={`flex items-stretch shrink-0 rounded-lg border border-theme-border bg-theme-surface divide-x divide-theme-border [&>*:first-child>button]:rounded-l-[7px] [&>*:last-child>button]:rounded-r-[7px] ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/scope-pill/index.ts

@@ -0,0 +1,2 @@
+export { ScopePill } from './ScopePill'
+export type { ScopePillProps } from './ScopePill'

package/src/components/timeline/TimelineList.tsx

@@ -99,6 +99,32 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     onQueryChange?.({ timeRange, kind: kindFilter || undefined })
   }, [timeRange, kindFilter, onQueryChange])
 
+  // Kind filter options: seed with common kinds, then accumulate every kind seen
+  // in the data so CRDs the cluster actually emits become filterable. The set only
+  // grows — selecting a kind narrows the server query to it, so deriving options
+  // from the current events alone would collapse the dropdown to that one kind.
+  const [seenKinds, setSeenKinds] = useState<Set<string>>(() => new Set(RESOURCE_KINDS))
+  useEffect(() => {
+    if (!events?.length) return
+    setSeenKinds((prev) => {
+      let next: Set<string> | null = null
+      for (const e of events) {
+        if (e.kind && !prev.has(e.kind)) {
+          if (!next) next = new Set(prev)
+          next.add(e.kind)
+        }
+      }
+      return next ?? prev
+    })
+  }, [events])
+  // Common kinds keep their curated order (most-used first); kinds discovered in
+  // the data that aren't in the seed (CRDs) are appended alphabetically.
+  const kindOptions = useMemo(() => {
+    const seeded = new Set<string>(RESOURCE_KINDS)
+    const extra = [...seenKinds].filter((k) => !seeded.has(k)).sort()
+    return [...RESOURCE_KINDS, ...extra]
+  }, [seenKinds])
+
 
   const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(onRefresh ?? (() => {}))
 
@@ -341,7 +367,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
           className="appearance-none bg-theme-elevated text-theme-text-primary text-sm rounded-lg px-3 py-2 border border-theme-border-light focus:outline-none focus:ring-2 focus:ring-blue-500"
         >
           <option value="">All Kinds</option>
-          {RESOURCE_KINDS.map((kind) => (
+          {kindOptions.map((kind) => (
             <option key={kind} value={kind}>
               {kind}
             </option>