@skyhook-io/k8s-ui 1.15.0 → 1.16.0

package/src/components/logs/StructuredLogLine.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react'
 import { ChevronRight, ChevronDown, Filter } from 'lucide-react'
 import type { LogLevel } from './useLogBuffer'
+import { selectLevelField } from '../../utils/log-level'
 import { unescapeJsonStrings, parseLogfmt } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
 
@@ -65,7 +66,7 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
           className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
-          <SummaryLine obj={parsed} palette={palette} />
+          <SummaryLine obj={parsed} level={level} palette={palette} />
           <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
         </span>
       ) : (
@@ -76,7 +77,7 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
           className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5`}
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
-          <SummaryLine obj={parsed} palette={palette} />
+          <SummaryLine obj={parsed} level={level} palette={palette} />
           <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
         </span>
         <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
@@ -167,8 +168,8 @@ function JsonExpanded({ text, onFilterValue, palette }: { text: string; onFilter
   return <>{nodes}</>
 }
 
-function SummaryLine({ obj, palette }: { obj: Record<string, unknown>; palette: LogPalette }) {
-  const lvl = obj.level ?? obj.severity ?? obj.lvl ?? nestedField(obj, 'log', 'level')
+function SummaryLine({ obj, level, palette }: { obj: Record<string, unknown>; level: LogLevel; palette: LogPalette }) {
+  const lvl = selectLevelField(obj)?.raw
   const msg = obj.msg ?? obj.message
   const rawErr = obj.error ?? obj.err
   const err = typeof rawErr === 'string'
@@ -179,8 +180,8 @@ function SummaryLine({ obj, palette }: { obj: Record<string, unknown>; palette:
   return (
     <>
       {lvl != null && (
-        <span className={`${getLevelBadgeColor(lvl, palette)} text-[10px] font-semibold px-1 py-px rounded mr-1.5 inline-block`}>
-          {formatLevel(lvl)}
+        <span className={`${levelBadgeColor(level, palette)} text-[10px] font-semibold px-1 py-px rounded mr-1.5 inline-block`}>
+          {formatLevel(lvl, level)}
         </span>
       )}
       {typeof msg === 'string' && (
@@ -221,30 +222,19 @@ function nestedField(obj: Record<string, unknown>, parent: string, child: string
   return undefined
 }
 
-function formatLevel(lvl: unknown): string {
-  if (typeof lvl === 'number') {
-    if (lvl >= 50) return 'ERR'
-    if (lvl >= 40) return 'WARN'
-    if (lvl >= 30) return 'INFO'
-    return 'DBG'
-  }
+const NUMERIC_LEVEL_LABELS: Record<LogLevel, string> = { error: 'ERR', warn: 'WARN', info: 'INFO', debug: 'DBG', unknown: '?' }
+
+function formatLevel(lvl: unknown, level: LogLevel): string {
+  if (typeof lvl === 'number') return NUMERIC_LEVEL_LABELS[level]
   return String(lvl).toUpperCase()
 }
 
-function getLevelBadgeColor(lvl: unknown, palette: LogPalette): string {
-  let normalized: string
-  if (typeof lvl === 'number') {
-    // Pino/bunyan numeric levels: 10=trace, 20=debug, 30=info, 40=warn, 50=error, 60=fatal
-    if (lvl >= 50) normalized = 'error'
-    else if (lvl >= 40) normalized = 'warn'
-    else if (lvl >= 30) normalized = 'info'
-    else normalized = 'debug'
-  } else {
-    normalized = String(lvl).toLowerCase()
+function levelBadgeColor(level: LogLevel, palette: LogPalette): string {
+  switch (level) {
+    case 'error': return palette.levelBadgeError
+    case 'warn': return palette.levelBadgeWarn
+    case 'info': return palette.levelBadgeInfo
+    case 'debug': return palette.levelBadgeDebug
+    default: return palette.levelBadgeNeutral
   }
-  if (/^(error|err|fatal|panic|critical|crit)$/.test(normalized)) return palette.levelBadgeError
-  if (/^(warn|warning)$/.test(normalized)) return palette.levelBadgeWarn
-  if (/^(info|information|notice)$/.test(normalized)) return palette.levelBadgeInfo
-  if (/^(debug|dbg|trace|verbose)$/.test(normalized)) return palette.levelBadgeDebug
-  return palette.levelBadgeNeutral
 }

package/src/components/logs/log-palette.ts

@@ -53,6 +53,8 @@ export interface LogPalette {
   levelActiveWarn: string
   levelActiveInfo: string
   levelActiveDebug: string
+  /** Lines with no recognizable level */
+  levelActiveOther: string
 
   // Level-badge colors used inside StructuredLogLine
   levelBadgeError: string
@@ -110,6 +112,7 @@ const DARK_PALETTE: LogPalette = {
   levelActiveWarn: 'bg-amber-500/20 text-amber-400 border-amber-500/40',
   levelActiveInfo: 'bg-blue-500/20 text-blue-400 border-blue-500/40',
   levelActiveDebug: 'bg-slate-700 text-slate-300 border-slate-600',
+  levelActiveOther: 'bg-transparent text-slate-300 border-slate-500',
 
   levelBadgeError: 'bg-red-500/20 text-red-400 border border-red-500/40',
   levelBadgeWarn: 'bg-amber-500/20 text-amber-400 border border-amber-500/40',
@@ -166,6 +169,7 @@ const LIGHT_PALETTE: LogPalette = {
   levelActiveWarn: 'bg-amber-100 text-amber-700 border-amber-400',
   levelActiveInfo: 'bg-blue-100 text-blue-700 border-blue-400',
   levelActiveDebug: 'bg-slate-200 text-slate-700 border-slate-400',
+  levelActiveOther: 'bg-white text-slate-700 border-slate-400',
 
   levelBadgeError: 'bg-red-100 text-red-700 border border-red-400',
   levelBadgeWarn: 'bg-amber-100 text-amber-700 border border-amber-400',

package/src/components/logs/useLogBuffer.ts

@@ -1,7 +1,9 @@
 import { useState, useRef, useCallback } from 'react'
 import { isLogfmt } from '../../utils/log-format'
+import { detectLevel, type LevelSource, type LogLevel } from '../../utils/log-level'
 
-export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'unknown'
+export type { LevelSource, LogLevel }
+export { detectLogLevel } from '../../utils/log-level'
 
 export interface LogEntry {
   sourceLabel?: string
@@ -17,54 +19,19 @@ export interface LogEntry {
    */
   podColorIndex?: number
   level: LogLevel
+  levelSource: LevelSource
   isJson: boolean
   isLogfmt: boolean
 }
 
 const MAX_BUFFER_SIZE = 10_000
 
-/**
- * Detect log level from content using word-boundary matching.
- * For JSON logs, prefer the `level`, `severity`, or `lvl` field.
- */
-export function detectLogLevel(content: string): LogLevel {
-  // Fast path for JSON: check level/severity field
-  const trimmed = content.trimStart()
-  if (trimmed[0] === '{') {
-    try {
-      const obj = JSON.parse(trimmed)
-      const rawLevel = obj.level ?? obj.severity ?? obj.lvl ?? ''
-      // Numeric levels (pino/bunyan): 10=trace, 20=debug, 30=info, 40=warn, 50=error, 60=fatal
-      if (typeof rawLevel === 'number') {
-        if (rawLevel >= 50) return 'error'
-        if (rawLevel >= 40) return 'warn'
-        if (rawLevel >= 30) return 'info'
-        return 'debug'
-      }
-      const lvl = String(rawLevel).toLowerCase()
-      if (/^(error|err|fatal|panic|critical|crit)$/.test(lvl)) return 'error'
-      if (/^(warn|warning)$/.test(lvl)) return 'warn'
-      if (/^(info|information|notice)$/.test(lvl)) return 'info'
-      if (/^(debug|trace|verbose)$/.test(lvl)) return 'debug'
-    } catch {
-      // Not valid JSON, fall through to text matching
-    }
-  }
-
-  const lower = content.toLowerCase()
-  if (/\b(error|fatal|panic|critical|crit|exception)\b/.test(lower)) return 'error'
-  if (/\b(warn|warning)\b/.test(lower)) return 'warn'
-  if (/\b(debug|trace)\b/.test(lower)) return 'debug'
-  if (/\b(info)\b/.test(lower)) return 'info'
-  return 'unknown'
-}
-
 function isJsonContent(content: string): boolean {
   const trimmed = content.trimStart()
   return trimmed[0] === '{' && trimmed[trimmed.length - 1] === '}'
 }
 
-type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'isJson' | 'isLogfmt'>
+type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'levelSource' | 'isJson' | 'isLogfmt'>
 
 interface UseLogBufferReturn {
   entries: LogEntry[]
@@ -82,10 +49,12 @@ export function useLogBuffer(): UseLogBufferReturn {
 
   const enrichEntry = useCallback((raw: RawLogEntry): LogEntry => {
     const isJ = isJsonContent(raw.content)
+    const detected = detectLevel(raw.content)
     return {
       ...raw,
       id: idCounter.current++,
-      level: detectLogLevel(raw.content),
+      level: detected.level,
+      levelSource: detected.source,
       isJson: isJ,
       isLogfmt: !isJ && isLogfmt(raw.content),
     }

package/src/components/logs/useLogSearch.ts

@@ -3,6 +3,8 @@ import type { VirtuosoHandle } from 'react-virtuoso'
 import type { LogEntry } from './useLogBuffer'
 import { stripAnsi, escapeRegExp } from '../../utils/log-format'
 
+export type LogSearchMode = 'highlight' | 'only' | 'hide'
+
 interface UseLogSearchReturn {
   query: string
   setQuery: (q: string) => void
@@ -11,14 +13,16 @@ interface UseLogSearchReturn {
   setIsRegex: (v: boolean) => void
   isCaseSensitive: boolean
   toggleCaseSensitive: () => void
-  isFilterMode: boolean
-  toggleFilterMode: () => void
-  setFilterMode: (v: boolean) => void
+  /** highlight: show every line, mark matches · only: show matching lines · hide: drop matching lines */
+  mode: LogSearchMode
+  setMode: (mode: LogSearchMode) => void
+  /** Whether the query currently narrows the visible lines (only/hide with a non-empty, valid query) */
+  isFiltering: boolean
   matchCount: number
   currentMatch: number
   /** Indices into the entries array that match */
   matchIndices: number[]
-  /** When filter mode is on, only matching entries */
+  /** The lines left after applying the mode: matching lines for `only`, non-matching for `hide` */
   filteredEntries: LogEntry[]
   /** Error message when regex is invalid (null when valid) */
   regexError: string | null
@@ -29,14 +33,32 @@ interface UseLogSearchReturn {
   close: () => void
 }
 
+/**
+ * The lines a search mode leaves visible. Only and Hide act on whole records:
+ * a match on any line of a stack trace keeps or hides the trace together.
+ */
+export function applySearchMode<T extends { id: number }>(
+  entries: readonly T[],
+  matchIndices: readonly number[],
+  mode: LogSearchMode,
+  recordIdOf: (entry: T) => number = e => e.id,
+): T[] {
+  if (mode === 'highlight') return [...entries]
+  const matchedRecords = new Set(matchIndices.map(i => recordIdOf(entries[i])))
+  const keepMatches = mode === 'only'
+  return entries.filter(e => matchedRecords.has(recordIdOf(e)) === keepMatches)
+}
+
 export function useLogSearch(
   entries: LogEntry[],
   virtuosoRef: React.RefObject<VirtuosoHandle | null>,
+  /** Id of the record an entry belongs to (its first line's id); defaults to the entry itself */
+  recordIdOf?: (entry: LogEntry) => number,
 ): UseLogSearchReturn {
   const [query, setQuery] = useState('')
   const [isRegex, setIsRegex] = useState(false)
   const [isCaseSensitive, setIsCaseSensitive] = useState(false)
-  const [isFilterMode, setIsFilterMode] = useState(false)
+  const [mode, setMode] = useState<LogSearchMode>('highlight')
   const [currentMatch, setCurrentMatch] = useState(0)
   const [isOpen, setIsOpen] = useState(false)
 
@@ -72,12 +94,17 @@ export function useLogSearch(
     }
   }, [entries, deferredQuery, isRegex, isCaseSensitive])
 
-  // Filtered entries for filter mode
-  const filteredEntries = useMemo(() => {
-    if (!isFilterMode || !deferredQuery) return entries
-    const matchSet = new Set(matchIndices)
-    return entries.filter((_, i) => matchSet.has(i))
-  }, [entries, isFilterMode, deferredQuery, matchIndices])
+  // Gate on the live query too, so clearing or closing search unfilters immediately
+  // rather than after the deferred value catches up.
+  const isFiltering = mode !== 'highlight' && !!query && !!deferredQuery && !regexError
+  const filteredEntries = useMemo(
+    () => (isFiltering ? applySearchMode(entries, matchIndices, mode, recordIdOf) : entries),
+    [entries, isFiltering, mode, matchIndices, recordIdOf],
+  )
+  const filteredIndexById = useMemo(() => {
+    if (mode !== 'only' || !isFiltering) return null
+    return new Map(filteredEntries.map((e, i) => [e.id, i]))
+  }, [mode, isFiltering, filteredEntries])
 
   // Reset current match when search criteria change (but not when new entries arrive during streaming)
   const prevCriteria = useRef({ query, isRegex, isCaseSensitive })
@@ -94,10 +121,13 @@ export function useLogSearch(
 
   const scrollToMatch = useCallback((matchIdx: number) => {
     if (matchIdx < 0 || matchIdx >= matchIndices.length) return
-    if (isFilterMode) {
-      // In filter mode, match index maps directly to filtered list index
+    if (mode === 'hide') return
+    if (mode === 'only') {
+      // The list holds whole matching records, so find the matched line within it
+      const index = filteredIndexById?.get(entries[matchIndices[matchIdx]].id)
+      if (index === undefined) return
       virtuosoRef.current?.scrollToIndex({
-        index: matchIdx,
+        index,
         align: 'center',
         behavior: 'smooth',
       })
@@ -109,26 +139,24 @@ export function useLogSearch(
         behavior: 'smooth',
       })
     }
-  }, [matchIndices, isFilterMode, virtuosoRef])
+  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef])
 
   const goToNext = useCallback(() => {
-    if (matchIndices.length === 0) return
+    if (matchIndices.length === 0 || mode === 'hide') return
     const next = (currentMatch + 1) % matchIndices.length
     setCurrentMatch(next)
     scrollToMatch(next)
-  }, [currentMatch, matchIndices.length, scrollToMatch])
+  }, [currentMatch, matchIndices.length, mode, scrollToMatch])
 
   const goToPrev = useCallback(() => {
-    if (matchIndices.length === 0) return
+    if (matchIndices.length === 0 || mode === 'hide') return
     const prev = (currentMatch - 1 + matchIndices.length) % matchIndices.length
     setCurrentMatch(prev)
     scrollToMatch(prev)
-  }, [currentMatch, matchIndices.length, scrollToMatch])
+  }, [currentMatch, matchIndices.length, mode, scrollToMatch])
 
   const toggleRegex = useCallback(() => setIsRegex(p => !p), [])
   const toggleCaseSensitive = useCallback(() => setIsCaseSensitive(p => !p), [])
-  const toggleFilterMode = useCallback(() => setIsFilterMode(p => !p), [])
-  const setFilterMode = useCallback((v: boolean) => setIsFilterMode(v), [])
 
   const open = useCallback(() => setIsOpen(true), [])
   const close = useCallback(() => {
@@ -144,9 +172,9 @@ export function useLogSearch(
     setIsRegex,
     isCaseSensitive,
     toggleCaseSensitive,
-    isFilterMode,
-    toggleFilterMode,
-    setFilterMode,
+    mode,
+    setMode,
+    isFiltering,
     matchCount: matchIndices.length,
     currentMatch,
     matchIndices,

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

@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { NamespacePicker, type NamespacePickerProps, type NamespaceScopeView } from './NamespacePicker'
+
+vi.mock('../ui/Tooltip', () => ({
+  Tooltip: ({ children, content }: { children: ReactNode; content: ReactNode }) => (
+    <>
+      {children}
+      <span data-testid="tooltip">{content}</span>
+    </>
+  ),
+}))
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+
+beforeEach(() => {
+  const element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  document.body.replaceChildren()
+})
+
+const baseScope: NamespaceScopeView = {
+  actives: ['team-a'],
+  accessibleNamespaces: ['team-a'],
+  kubeconfigNamespace: 'team-a',
+  deniedNamespaces: [],
+  mode: 'namespace',
+  cacheScoped: false,
+  namespaceRescope: false,
+  canClearNamespace: true,
+  authoritative: false,
+}
+
+const help = <a data-testid="help">How to add namespaces</a>
+
+async function renderOpen(scope: Partial<NamespaceScopeView>, props: Partial<NamespacePickerProps> = {}) {
+  await act(async () => {
+    root.render(<NamespacePicker scope={{ ...baseScope, ...scope }} onApply={vi.fn()} {...props} />)
+  })
+  const trigger = document.querySelector<HTMLButtonElement>('button[aria-label="Switch active namespaces"]')!
+  const warning = trigger.querySelector('.lucide-triangle-alert, .lucide-alert-triangle') !== null
+  const tooltip = document.querySelector('[data-testid="tooltip"]')?.textContent ?? ''
+  await act(async () => { trigger.click() })
+  return { warning, tooltip, text: document.body.textContent ?? '' }
+}
+
+describe('NamespacePicker incomplete-list notice', () => {
+  it.each(['namespace', 'restricted'] as const)('offers the host action for a non-authoritative list in %s mode', async (mode) => {
+    const { text } = await renderOpen({ mode }, { limitedListHelp: help })
+    expect(text).toContain('Missing a namespace?')
+    expect(document.querySelector('[data-testid="help"]')).not.toBeNull()
+  })
+
+  it('says nothing about the list when the host has no action to offer', async () => {
+    const { warning, text } = await renderOpen({})
+    expect(warning).toBe(false)
+    expect(text).not.toContain('Missing a namespace?')
+  })
+
+  it('says nothing when the list is authoritative', async () => {
+    const { warning, text } = await renderOpen({ authoritative: true }, { limitedListHelp: help })
+    expect(warning).toBe(false)
+    expect(text).not.toContain('Missing a namespace?')
+    expect(document.querySelector('[data-testid="help"]')).toBeNull()
+  })
+
+  it('points an empty list at the note below it', async () => {
+    const { text } = await renderOpen(
+      { actives: [], accessibleNamespaces: [], mode: 'restricted' },
+      { limitedListHelp: help },
+    )
+    expect(text).toContain('No namespaces yet.')
+    expect(text).toContain('Missing a namespace?')
+  })
+
+  // The picker can't tell an unconfigured list from a configured or timed-out
+  // one, so a standing warning icon would nag users who have nothing to fix.
+  it('never puts a warning icon on the trigger', async () => {
+    const { warning } = await renderOpen({ mode: 'namespace' }, { limitedListHelp: help })
+    expect(warning).toBe(false)
+  })
+
+  it('says Radar can\u2019t list namespaces when the host can help and nothing is picked', async () => {
+    const { tooltip } = await renderOpen({ actives: [], mode: 'restricted' }, { limitedListHelp: help })
+    expect(tooltip).toBe('Radar can\u2019t list namespaces on this cluster.')
+  })
+
+  // A picked view keeps describing its filter; the footer carries the help.
+  it('keeps the filter tooltip once a namespace is picked', async () => {
+    const { tooltip, text } = await renderOpen({ mode: 'namespace' }, { limitedListHelp: help })
+    expect(tooltip).toBe('View is filtered to namespace team-a. Click to switch or reset.')
+    expect(text).toContain('Missing a namespace?')
+  })
+
+  // Without a host action the list is usually the viewer's complete RBAC view
+  // (auth-enabled installs, Radar Cloud), so say what it is rather than warn.
+  it('describes an RBAC-scoped list with nothing picked', async () => {
+    const { tooltip, text } = await renderOpen({ actives: [], mode: 'restricted' })
+    expect(tooltip).toBe('Showing the namespaces your account can access.')
+    expect(text).not.toContain('Missing a namespace?')
+  })
+
+  it('keeps the usual tooltip for an authoritative list', async () => {
+    const { tooltip } = await renderOpen({ actives: [], mode: 'cluster-wide', authoritative: true })
+    expect(tooltip).toBe('Currently viewing all namespaces. Click to narrow the view.')
+  })
+
+  // The backend keeps saved picks through a failed namespace load, when the
+  // list it returns can be shorter than the pick.
+  it('lists a pick missing from the available namespaces so it can be unchecked', async () => {
+    const onApply = vi.fn()
+    await act(async () => {
+      root.render(
+        <NamespacePicker
+          scope={{ ...baseScope, actives: ['team-a', 'team-b'], accessibleNamespaces: ['team-a'] }}
+          onApply={onApply}
+        />,
+      )
+    })
+    const trigger = document.querySelector<HTMLButtonElement>('button[aria-label="Switch active namespaces"]')!
+    await act(async () => { trigger.click() })
+
+    const row = Array.from(document.querySelectorAll('label')).find(l => l.textContent?.includes('team-b'))
+    const checkbox = row?.querySelector<HTMLInputElement>('input[type="checkbox"]')
+    expect(checkbox?.checked).toBe(true)
+
+    await act(async () => { checkbox!.click() })
+    const done = Array.from(document.querySelectorAll('button')).find(b => b.textContent === 'Done')!
+    await act(async () => { done.click() })
+    expect(onApply).toHaveBeenCalledWith(['team-a'])
+  })
+})

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

@@ -1,6 +1,6 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { ChevronDown, Globe, Search, AlertTriangle } from 'lucide-react'
+import { ChevronDown, Globe, Search } from 'lucide-react'
 import { Badge } from '../ui/Badge'
 import { Tooltip } from '../ui/Tooltip'
 import { MultiSelectPicker } from '../ui/MultiSelectPicker'
@@ -57,6 +57,12 @@ export interface NamespacePickerProps {
   variant?: 'chip' | 'segment'
   /** Muted label shown before the value in the 'segment' variant (e.g. "Namespace"). */
   label?: string
+  /**
+   * A short action (e.g. a "How to add namespaces" link) for when the list is
+   * not authoritative and the viewer can supply namespaces themselves. Omit it
+   * when the viewer can't act — the picker then says nothing about the list.
+   */
+  limitedListHelp?: ReactNode
 }
 
 /**
@@ -79,7 +85,7 @@ export interface NamespacePickerProps {
  * 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 },
+  { scope, onApply, loading = false, pending = false, disabled = false, disabledTooltip, className = '', variant = 'chip', label, limitedListHelp },
   ref,
 ) {
   const [isOpen, setIsOpen] = useState(false)
@@ -116,8 +122,11 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
 
   const items = useMemo(() => {
     if (!scope) return [] as string[]
-    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
-  }, [scope])
+    // A pick the backend kept through a failed namespace load can be missing
+    // from accessibleNamespaces; list it anyway so it can still be unchecked.
+    const all = new Set([...(scope.accessibleNamespaces ?? []), ...scopeActives])
+    return [...all].sort((a, b) => a.localeCompare(b))
+  }, [scope, scopeActives])
   const deniedNamespaces = useMemo(() => new Set(scope?.deniedNamespaces ?? []), [scope?.deniedNamespaces])
 
   const filteredItems = useMemo(() => {
@@ -201,8 +210,9 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
   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 needsNamespaces = scope.authoritative === false && limitedListHelp != null
+  const emptyStateLabel = needsNamespaces ? 'No namespaces yet.' : 'No namespaces available.'
   const isDisabled = disabled || loading || pending || cacheScopeLocked
   const canClearAll = scope.canClearNamespace || activeCount === 0
   const tooltipContent = disabled && disabledTooltip
@@ -211,8 +221,10 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
       ? 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.'
+      : needsNamespaces && isClusterWide
+      ? 'Radar can\u2019t list namespaces on this cluster.'
+      : scope.authoritative === false && isClusterWide
+      ? 'Showing the namespaces your account can access.'
       : isClusterWide
         ? 'Currently viewing all namespaces. Click to narrow the view.'
         : activeCount === 1
@@ -255,11 +267,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
           {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}
+          {isClusterWide && <Globe className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />}
           <span className={`font-medium truncate ${variant === 'segment' ? 'min-w-0' : 'max-w-[180px]'}`}>
             {pending ? 'Switching…' : triggerLabel}
           </span>
@@ -299,7 +307,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
                 <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.'}
+                      {search ? 'No matches.' : emptyStateLabel}
                     </li>
                   )}
 
@@ -346,18 +354,16 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
                 onSearchChange={setSearch}
                 searchPlaceholder="Filter namespaces"
                 summaryEmptyLabel="All namespaces"
-                noItemsLabel="No namespaces available."
+                noItemsLabel={emptyStateLabel}
                 clearAllDisabled={!canClearAll || activeCount === 0}
                 clearAllAriaLabel="Clear namespace selection"
                 renderItemMeta={renderNamespaceMeta}
               />
             )}
 
-            {!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.
+            {needsNamespaces && (
+              <div className="px-3 py-2 border-t border-theme-border text-[11px] text-theme-text-secondary">
+                Missing a namespace? {limitedListHelp}
               </div>
             )}
           </div>,

package/src/components/resources/renderers/PodRenderer.test.tsx

@@ -435,3 +435,18 @@ describe('PodRenderer metrics', () => {
     expect(html).toContain('CPU')
   })
 })
+
+describe('PodRenderer on a Radar without variable sources', () => {
+  it('falls back to the spec view with an upgrade note, not an error', () => {
+    const unsupported = Object.assign(new Error('unsupported'), {
+      radarUpgrade: { feature: 'Values from ConfigMaps and Secrets', minimumVersion: 'v1.9.0', currentVersion: 'v1.7.2' },
+    })
+    const html = renderToString(
+      <PodRenderer data={pod} onCopy={() => undefined} copied={null} environmentError={unsupported} />,
+    )
+    expect(html).toContain('Values from ConfigMaps and Secrets')
+    expect(html).toContain('need Radar v1.9 or newer on this cluster. It runs v1.7.2.')
+    expect(html).toContain('ConfigMap')
+    expect(html).not.toContain('could not be loaded')
+  })
+})