@skyhook-io/k8s-ui 1.8.10 → 1.8.11

package/src/components/issues/issues.test.ts

@@ -4,6 +4,7 @@ import { renderToString } from 'react-dom/server'
 import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
 import { categoryLabel, groupBadgeClass, groupLabel } from './severity'
 import { IssueRow } from './IssuesView'
+import { issueTiming } from './issue-timing'
 
 const base: Issue = {
   id: 'id-0',
@@ -78,7 +79,7 @@ describe('category/group label fallbacks', () => {
 })
 
 describe('IssueRow', () => {
-  it('keeps relative age visible and adds since-deploy as a secondary tag', () => {
+  it('keeps relative age visible and adds deployment timing as a secondary tag', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
 
@@ -96,6 +97,25 @@ describe('IssueRow', () => {
     expect(html).toContain('since deploy')
   })
 
+  it('promotes after-healthy timing in the collapsed row', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({
+        id: 'regression',
+        first_seen: '2026-06-30T10:00:00Z',
+        issue_timing: 'started_after_resource_was_healthy',
+        issue_timing_basis: 'condition',
+      }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('2h')
+    expect(html).toContain('after healthy')
+  })
+
   it('uses the category-group chip class in the queue row', () => {
     const html = renderToString(createElement(IssueRow, {
       issue: mk({ category_group: 'control_plane' }),
@@ -108,6 +128,87 @@ describe('IssueRow', () => {
   })
 })
 
+describe('issueTiming', () => {
+  it('keeps deployment wording for deployment-like creation failures', () => {
+    expect(issueTiming(mk({
+      kind: 'Deployment',
+      group: 'apps',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'condition',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since deploy',
+      meta: 'present since deployment or first reconciliation',
+    })
+
+    expect(issueTiming(mk({
+      kind: 'Rollout',
+      group: 'argoproj.io',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'condition',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since deploy',
+      meta: 'present since deployment or first reconciliation',
+    })
+  })
+
+  it('uses deployment wording for pod issues only when workload timing evidence is present', () => {
+    expect(issueTiming(mk({
+      kind: 'Pod',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'pod_creation',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since deploy',
+    })
+
+    expect(issueTiming(mk({
+      kind: 'Pod',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'phase',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since creation',
+    })
+  })
+
+  it('uses resource creation wording for non-deployment creation failures', () => {
+    expect(issueTiming(mk({
+      kind: 'PersistentVolumeClaim',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'phase',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since creation',
+      meta: 'present since creation or first reconciliation',
+    })
+  })
+
+  it('describes after-healthy timing without implying root cause or safety', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const display = issueTiming(mk({
+      first_seen: '2026-06-30T10:00:00Z',
+      issue_timing: 'started_after_resource_was_healthy',
+      issue_timing_basis: 'condition',
+    }))
+
+    expect(display).toMatchObject({
+      kind: 'regression',
+      chip: 'after healthy',
+      meta: 'started 2h ago after being healthy',
+      tooltip: 'Previously healthy before this failing signal.',
+    })
+    expect(`${display?.chip} ${display?.meta} ${display?.tooltip}`).not.toMatch(/baseline|safe|ignore/i)
+  })
+
+  it('returns null when there is no confident timing signal', () => {
+    expect(issueTiming(mk({ issue_timing: undefined, issue_timing_basis: undefined }))).toBeNull()
+  })
+})
+
 describe('subjectRef / memberRef', () => {
   it('subjectRef defaults empty group/namespace and threads cluster_id', () => {
     const issue = mk({ cluster_id: 'cl_1', kind: 'Deployment', name: 'web' }) // no group/namespace

package/src/components/issues/severity.ts

@@ -2,6 +2,7 @@ import type { IssueSeverity } from './types';
 import { BADGE_SEVERITY_COLORS as sev } from '../ui/Badge';
 import { NEUTRAL_CHIP_CLASS } from '../ui/CardSection';
 import {
+  TONE_FILL_CLASS,
   TONE_HEADER_BAND_CLASS,
   TONE_RAIL_CLASS,
   TONE_SOLID_CLASS,
@@ -36,6 +37,7 @@ export const ISSUE_SEVERITY_BADGE_CLASS: Record<IssueSeverity, string> = {
 };
 
 export const ISSUE_SEVERITY_TEXT_CLASS = byTone(TONE_TEXT_CLASS);
+export const ISSUE_SEVERITY_FILL_CLASS = byTone(TONE_FILL_CLASS);
 export const ISSUE_SEVERITY_RAIL_CLASS = byTone(TONE_RAIL_CLASS);
 export const ISSUE_SEVERITY_SOLID_CLASS = byTone(TONE_SOLID_CLASS);
 export const ISSUE_SEVERITY_HEADER_BAND_CLASS = byTone(TONE_HEADER_BAND_CLASS);

package/src/components/logs/LogCore.tsx

@@ -5,6 +5,7 @@ import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
 import { StructuredLogLine } from './StructuredLogLine'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '../ui/Input'
 import {
   formatLogTimestamp,
   highlightSearchMatches,
@@ -37,6 +38,7 @@ interface LogCoreProps {
   toolbarExtra?: ToolbarExtraRenderer
   showPodName?: boolean
   emptyMessage?: string
+  emptyCommand?: string | null
   errorMessage?: string | null
   /**
    * Hard override for the viewer palette. When set, the viewer stays pinned to
@@ -88,6 +90,8 @@ const STRUCTURED_MODE_DESCRIPTIONS: Record<StructuredMode, string> = {
   raw: 'Original log line, unparsed',
 }
 
+const EMPTY_STATE_CLASS = 'flex-1 flex flex-col items-center justify-center gap-2 px-4 text-center'
+
 const TIMESTAMP_FORMAT_SHORT_LABELS: Record<TimestampFormat, string> = {
   'time-local': 'Local time',
   'time-utc': 'UTC time',
@@ -124,6 +128,7 @@ export function LogCore({
   toolbarExtra,
   showPodName = false,
   emptyMessage = 'No logs available',
+  emptyCommand,
   errorMessage,
   forceDark,
 }: LogCoreProps) {
@@ -694,8 +699,7 @@ export function LogCore({
       {search.isOpen && (
         <div className={`flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
           <Search className={`w-4 h-4 ${palette.textSecondary} shrink-0`} />
-          <input
-            type="text"
+          <Input
             value={search.query}
             onChange={(e) => search.setQuery(e.target.value)}
             onKeyDown={(e) => {
@@ -800,14 +804,20 @@ export function LogCore({
           </div>
         </div>
       ) : errorMessage ? (
-        <div className={`flex-1 flex flex-col items-center justify-center gap-2 ${palette.textError}`}>
+        <div className={`${EMPTY_STATE_CLASS} ${palette.textError}`}>
           <Terminal className="w-8 h-8" />
           <span>{errorMessage}</span>
         </div>
       ) : groupedEntries.length === 0 ? (
-        <div className={`flex-1 flex flex-col items-center justify-center gap-2 ${palette.textTertiary}`}>
+        <div className={`${EMPTY_STATE_CLASS} ${palette.textTertiary}`}>
           <Terminal className="w-8 h-8" />
           <span>{emptyMessage}</span>
+          {emptyCommand && (
+            <button type="button" onClick={() => navigator.clipboard.writeText(emptyCommand).catch(() => {})} className={`mt-2 inline-flex max-w-[80%] items-center gap-2 rounded border px-3 py-2 font-mono text-xs ${palette.border} ${palette.toolbarBg}`} title="Copy recovery command">
+              <code className="truncate">{emptyCommand}</code>
+              <Copy className="h-3.5 w-3.5 shrink-0" />
+            </button>
+          )}
         </div>
       ) : (
         <div className="flex-1 relative">

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -27,6 +27,9 @@ export interface WorkloadLogsFetchParams {
 export interface WorkloadLogsResult {
   pods: WorkloadPodInfo[]
   logs: WorkloadRawLog[]
+  emptyReason?: string
+  emptyMessage?: string
+  command?: string
 }
 
 export interface WorkloadLogsViewerProps {
@@ -61,6 +64,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
   const [isLoading, setIsLoading] = useState(false)
   const [fetchError, setFetchError] = useState<string | null>(null)
+  const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
+  const [emptyCommand, setEmptyCommand] = useState<string | null>(null)
   const [showPodFilter, setShowPodFilter] = useState(false)
   const [logRange, setLogRange] = useState('100')
   const { showError, showSuccess } = useToast()
@@ -95,9 +100,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     setFetchError(null)
     try {
       const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds })
-      // Older backends marshal empty results as null rather than [].
       const resultPods = result.pods ?? []
       const resultLogs = result.logs ?? []
+      setEmptyMessage(result.emptyMessage || null)
+      setEmptyCommand(result.command || null)
 
       podColorIndexRef.current = new Map(resultPods.map((pod, i) => [pod.name, i]))
       setPods(resultPods)
@@ -157,6 +163,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             const nextPods = data.pods as WorkloadPodInfo[]
             podColorIndexRef.current = new Map(nextPods.map((pod, i) => [pod.name, i]))
             setPods(nextPods)
+            setEmptyMessage(data.emptyMessage || null)
+            setEmptyCommand(data.command || null)
             setSelectedPods(prev => (
               prev.size === 0 ? new Set(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
             ))
@@ -180,8 +188,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
               const existing = new Set(prev.map(p => p.name))
               const toAdd = newPods.filter(p => !existing.has(p.name))
               if (toAdd.length === 0) return prev
-              return [...prev, ...toAdd]
+              const next = [...prev, ...toAdd]
+              podColorIndexRef.current = new Map(next.map((pod, i) => [pod.name, i]))
+              return next
             })
+            setEmptyMessage(null)
+            setEmptyCommand(null)
             setSelectedPods(prev => {
               const next = new Set(prev)
               newPods.forEach(p => next.add(p.name))
@@ -197,6 +209,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             // while new pod logs start flowing in
           }
         },
+        onEnd: (data: any) => {
+          if (data?.emptyMessage) setEmptyMessage(data.emptyMessage)
+          if (data?.command) setEmptyCommand(data.command)
+        },
       },
       'Workload log stream connection failed',
     )
@@ -299,8 +315,13 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             </div>
             {pods.map(pod => {
               const dotBg = palette.podColors[(podColorIndex.get(pod.name) ?? 0) % palette.podColors.length].bg
+              const primaryLabel = pod.stepName || pod.name
+              const secondaryLabel = pod.stepName ? pod.name : ''
+              const stateLabel = pod.stepPhase || pod.phase || (pod.ready ? 'Ready' : 'Not Ready')
               let readyColor: string
-              if (pod.ready) {
+              if (stateLabel === 'Failed' || stateLabel === 'Error') {
+                readyColor = isDark ? 'text-red-400' : 'text-red-700'
+              } else if (pod.ready || stateLabel === 'Succeeded') {
                 readyColor = isDark ? 'text-emerald-400' : 'text-emerald-700'
               } else {
                 readyColor = isDark ? 'text-amber-400' : 'text-amber-700'
@@ -314,9 +335,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
                     className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
                   />
                   <span className={`w-2 h-2 rounded-full ${dotBg}`} />
-                  <span className={`text-xs ${palette.textPrimary} truncate flex-1`}>{pod.name}</span>
+                  <span className="min-w-0 flex-1">
+                    <span className={`block truncate text-xs ${palette.textPrimary}`}>{primaryLabel}</span>
+                    {secondaryLabel && <span className={`block truncate text-[10px] ${palette.textTertiary}`}>{secondaryLabel}</span>}
+                  </span>
                   <span className={`text-xs ${readyColor}`}>
-                    {pod.ready ? 'Ready' : 'Not Ready'}
+                    {stateLabel}
                   </span>
                 </label>
               )
@@ -360,7 +384,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
-      emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
+      emptyMessage={emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
+      emptyCommand={emptyCommand}
       errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
       forceDark={forceDark}
     />

package/src/components/logs/useLogStream.ts

@@ -10,6 +10,8 @@ export interface LogStreamHandlers {
   onPodAdded?: (data: unknown) => void
   /** Called when pods are terminated during streaming (workload logs only) */
   onPodRemoved?: (data: unknown) => void
+  /** Called when the server ends the stream cleanly */
+  onEnd?: (data: unknown) => void
 }
 
 /**
@@ -90,11 +92,16 @@ export function useLogStream() {
       }
     })
 
-    es.addEventListener('end', () => {
+    es.addEventListener('end', (event) => {
       if (!isCurrent()) return
       endedRef.current = true
       setIsStreaming(false)
       setConnecting(false)
+      if (handlers.onEnd) {
+        try { handlers.onEnd(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse end event:', e)
+        }
+      }
     })
 
     es.addEventListener('error', (event) => {

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

@@ -1,7 +1,8 @@
 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 { ChevronDown, Globe, Search, AlertTriangle } from 'lucide-react'
 import { Tooltip } from '../ui/Tooltip'
+import { MultiSelectPicker } from '../ui/MultiSelectPicker'
 
 /**
  * Backend-reported namespace scope. Mirrors Radar's `/cluster/namespace-scope`
@@ -192,18 +193,6 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
     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`
@@ -226,11 +215,6 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
           ? `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
@@ -271,100 +255,95 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
             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>
-            )}
+              <>
+                {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>
+                )}
+
+                <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>
 
-            <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>
-              )}
+                <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
+                  {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="radio"
+                              name="namespace-cache-scope"
+                              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>
-                        )}
-                      </span>
-                    </label>
-                  </li>
-                )
-              })}
-            </ul>
+                        </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>
+                <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
+                  <span>{draft.size === 1 ? Array.from(draft)[0] : 'Select a namespace'}</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>
+              </>
+            ) : (
+              <MultiSelectPicker
+                items={items}
+                selected={draft}
+                onSelectionChange={setDraft}
+                onClearAll={clearAll}
+                onDone={closeAndApply}
+                search={search}
+                onSearchChange={setSearch}
+                searchPlaceholder="Filter namespaces"
+                summaryEmptyLabel="All namespaces"
+                noItemsLabel="No namespaces available."
+                clearAllDisabled={!canClearAll || activeCount === 0}
+                clearAllAriaLabel="Clear namespace selection"
+                renderItemMeta={ns =>
+                  ns === scope.kubeconfigNamespace && ns !== '' ? (
+                    <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                      kubeconfig
+                    </span>
+                  ) : null
+                }
+              />
+            )}
 
             {!scope.authoritative && (
               <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">

package/src/components/resources/ResourcesSidebar.test.tsx

@@ -13,6 +13,16 @@ const sqlInstance: APIResource = {
   verbs: ['list'],
 }
 
+const horizontalPodAutoscaler: APIResource = {
+  group: 'autoscaling',
+  version: 'v2',
+  kind: 'HorizontalPodAutoscaler',
+  name: 'horizontalpodautoscalers',
+  namespaced: true,
+  isCrd: false,
+  verbs: ['list'],
+}
+
 describe('ResourcesSidebar CRD group labels', () => {
   it('keeps raw API groups available for filtering and hover recovery', () => {
     expect(resourceMatchesSidebarFilter(sqlInstance, 'cnrm')).toBe(true)
@@ -34,3 +44,64 @@ describe('ResourcesSidebar CRD group labels', () => {
     expect(html).toContain('title="API group: sql.cnrm.cloud.google.com"')
   })
 })
+
+describe('ResourcesSidebar count visibility', () => {
+  it('keeps resources visible when their count is unknown', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{}}
+      />
+    )
+
+    expect(html).toContain('HorizontalPodAutoscaler')
+    expect(html).toContain('–')
+    expect(html).toContain('aria-label="Count unavailable. Open to view resources."')
+  })
+
+  it('hides confirmed-empty resources by default', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+      />
+    )
+
+    expect(html).not.toContain('HorizontalPodAutoscaler')
+    expect(html).toContain('Show')
+  })
+
+  it('keeps the selected confirmed-empty resource visible', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={{ name: 'horizontalpodautoscalers', kind: 'HorizontalPodAutoscaler', group: 'autoscaling' }}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+      />
+    )
+
+    expect(html).toContain('HorizontalPodAutoscaler')
+    expect(html).toContain('>0</')
+  })
+
+  it('keeps pinned confirmed-empty resources visible in Favorites', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        pinned={[{ name: 'horizontalpodautoscalers', kind: 'HorizontalPodAutoscaler', group: 'autoscaling' }]}
+        isPinned={(name, group) => name === 'horizontalpodautoscalers' && group === 'autoscaling'}
+      />
+    )
+
+    expect(html).toContain('Favorites')
+    expect(html).toContain('HorizontalPodAutoscaler')
+  })
+})