@skyhook-io/k8s-ui 1.8.9 → 1.8.11

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

@@ -0,0 +1,107 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import type { APIResource } from '../../types'
+import { rawCRDGroupTitle, resourceMatchesSidebarFilter, ResourcesSidebar } from './ResourcesSidebar'
+
+const sqlInstance: APIResource = {
+  group: 'sql.cnrm.cloud.google.com',
+  version: 'v1beta1',
+  kind: 'SQLInstance',
+  name: 'sqlinstances',
+  namespaced: true,
+  isCrd: true,
+  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)
+    expect(resourceMatchesSidebarFilter(sqlInstance, 'google')).toBe(true)
+    expect(rawCRDGroupTitle([sqlInstance])).toBe('API group: sql.cnrm.cloud.google.com')
+  })
+
+  it('renders the raw API group in the category title while keeping the friendly label visible', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[sqlInstance]}
+        resourceCounts={{ 'sql.cnrm.cloud.google.com/SQLInstance': 1 }}
+      />
+    )
+
+    expect(html).toContain('Config Connector')
+    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')
+  })
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -14,6 +14,7 @@ import type { APIResource } from '../../types'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import { getResourceIcon } from '../../utils/resource-icons'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '../ui/Input'
 
 // Selected resource type info (need both name for API and kind for display)
 export interface SelectedKindInfo {
@@ -52,29 +53,7 @@ export interface ResourcesSidebarProps {
 
 // Persisted across remounts so collapsed categories survive tab switches
 let persistedExpandedCategories: Set<string> | null = null
-
-// Core kinds that are always shown even with 0 instances
-// These are the most commonly used Kubernetes resources (using Kind names, not plural names)
-const ALWAYS_SHOWN_KINDS = new Set([
-  'Pod',
-  'Deployment',
-  'DaemonSet',
-  'StatefulSet',
-  'ReplicaSet',
-  'Service',
-  'Ingress',
-  'ConfigMap',
-  'Secret',
-  'Job',
-  'CronJob',
-  'HorizontalPodAutoscaler',
-  'PersistentVolumeClaim',
-  'Node',
-  'Namespace',
-  'ServiceAccount',
-  'NetworkPolicy',
-  'Event',
-])
+const COUNT_UNAVAILABLE_MESSAGE = 'Count unavailable. Open to view resources.'
 
 // Fallback resource types when API resources aren't loaded yet
 const CORE_RESOURCE_TYPES = [
@@ -92,6 +71,25 @@ const CORE_RESOURCE_TYPES = [
   { kind: 'hpas', label: 'HPAs' },
 ] as const
 
+export function resourceMatchesSidebarFilter(resource: Pick<APIResource, 'kind' | 'name' | 'group'>, term: string): boolean {
+  const normalized = term.trim().toLowerCase()
+  if (!normalized) return true
+  return resource.kind.toLowerCase().includes(normalized) ||
+    resource.name.toLowerCase().includes(normalized) ||
+    resource.group.toLowerCase().includes(normalized)
+}
+
+export function rawCRDGroupTitle(resources: Pick<APIResource, 'group' | 'isCrd'>[]): string | undefined {
+  const groups = Array.from(new Set(
+    resources
+      .filter(resource => resource.isCrd && resource.group)
+      .map(resource => resource.group)
+  )).sort()
+
+  if (groups.length === 0) return undefined
+  return groups.length === 1 ? `API group: ${groups[0]}` : `API groups: ${groups.join(', ')}`
+}
+
 // Resource type button in sidebar
 interface ResourceTypeButtonProps {
   resource: APIResource
@@ -154,15 +152,25 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
             <Tooltip content="Insufficient permissions" position="left">
               <Shield className="w-3.5 h-3.5 text-amber-400/60" />
             </Tooltip>
+          ) : count === null ? (
+            <Tooltip content={COUNT_UNAVAILABLE_MESSAGE} position="left">
+              <span
+                className={clsx(
+                  'text-xs py-0.5 rounded text-center font-mono w-8 text-theme-text-disabled',
+                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                )}
+                aria-label={COUNT_UNAVAILABLE_MESSAGE}
+              >
+                –
+              </span>
+            </Tooltip>
           ) : (
             <span className={clsx(
               'text-xs py-0.5 rounded text-center font-mono',
               isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-              count === null
-                ? 'w-8 text-theme-text-disabled'
-                : count < 1000 ? 'w-8' : 'w-9',
+              count < 1000 ? 'w-8' : 'w-9',
             )}>
-              {count === null ? '–' : count}
+              {count}
             </span>
           )}
         </div>
@@ -280,7 +288,7 @@ export function ResourcesSidebar({
       } else if (key in resourceCounts) {
         results[key] = resourceCounts[key] ?? null
       } else {
-        results[key] = 0
+        results[key] = null
       }
     }
     return results
@@ -307,14 +315,14 @@ export function ResourcesSidebar({
         0
       )
 
-      // Filter resources: show if has instances, is core kind, has an
-      // unknown count (loading — don't pre-emptively hide), or
-      // showEmptyKinds is true.
+      // Filter resources: hide only confirmed-empty kinds. Unknown counts stay
+      // visible as a dash so count coverage gaps do not masquerade as emptiness.
       const visibleResources = category.resources.filter(resource => {
         const count = counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind]
-        const isCore = ALWAYS_SHOWN_KINDS.has(resource.kind)
-        const isLoading = count === null
-        const shouldShow = (count ?? 0) > 0 || isCore || isLoading || showEmptyKinds
+        const isSelectedResource =
+          (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
+          (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
+        const shouldShow = isSelectedResource || count === null || (count ?? 0) > 0 || showEmptyKinds
         if (!shouldShow) totalHiddenKinds++
         return shouldShow
       })
@@ -329,16 +337,15 @@ export function ResourcesSidebar({
       return 0
     })
 
-    // Filter out empty groups unless they have visible resources (core kinds) or showEmptyKinds is true
+    // Filter out empty groups unless they have visible resources or showEmptyKinds is true.
     const visibleCategories = sorted.filter(category => {
-      // Show if: has resources with instances, OR has visible resources (core kinds), OR showEmptyKinds
       const shouldShow = category.total > 0 || category.visibleResources.length > 0 || showEmptyKinds
       if (!shouldShow) totalHiddenGroups++
       return shouldShow
     })
 
     return { sortedCategories: visibleCategories, hiddenKindsCount: totalHiddenKinds, hiddenGroupsCount: totalHiddenGroups }
-  }, [categories, counts, showEmptyKinds])
+  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group])
 
   // Filter sidebar categories/kinds by the kind search term
   const filteredCategories = useMemo(() => {
@@ -347,12 +354,10 @@ export function ResourcesSidebar({
     return sortedCategories
       .map(category => {
         const categoryMatches = category.name.toLowerCase().includes(term)
+        const rawGroupMatches = category.resources.some((resource: APIResource) => resource.group.toLowerCase().includes(term))
         // If the group name matches, show all its resources
-        if (categoryMatches) return category
-        const matchingResources = category.visibleResources.filter((resource: any) =>
-          resource.kind.toLowerCase().includes(term) ||
-          resource.name.toLowerCase().includes(term)
-        )
+        if (categoryMatches || rawGroupMatches) return category
+        const matchingResources = category.visibleResources.filter((resource: APIResource) => resourceMatchesSidebarFilter(resource, term))
         if (matchingResources.length === 0) return null
         return {
           ...category,
@@ -472,9 +477,8 @@ export function ResourcesSidebar({
       <div className="px-2 py-3 border-b border-theme-border">
         <div className="relative">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
-          <input
+          <Input
             ref={kindSearchRef}
-            type="text"
             placeholder="Filter resources..."
             value={kindFilter}
             onChange={(e) => setKindFilter(e.target.value)}
@@ -550,6 +554,7 @@ export function ResourcesSidebar({
           // Dynamic categories from API
           filteredCategories.map((category) => {
             const isExpanded = effectiveExpandedCategories.has(category.name)
+            const rawGroupTitle = rawCRDGroupTitle(category.resources)
             return (
               <div key={category.name} className="mb-2">
                 <button
@@ -561,7 +566,7 @@ export function ResourcesSidebar({
                   ) : (
                     <ChevronRight className="w-3 h-3" />
                   )}
-                  <span className="flex-1 text-left">{category.name}</span>
+                  <span className="flex-1 text-left truncate" title={rawGroupTitle}>{category.name}</span>
                   {!isExpanded && (
                     <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', category.total < 1000 ? 'w-8' : 'w-9')}>
                       {category.total}
@@ -629,13 +634,26 @@ export function ResourcesSidebar({
               >
                 <Icon className="w-4 h-4 shrink-0" />
                 <span className="flex-1 text-left">{type.label}</span>
-                <span className={clsx(
-                  'badge font-mono',
-                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-                  count === null && 'text-theme-text-disabled',
-                )}>
-                  {count === null ? '–' : count}
-                </span>
+                {count === null ? (
+                  <Tooltip content={COUNT_UNAVAILABLE_MESSAGE} position="left">
+                    <span
+                      className={clsx(
+                        'badge font-mono text-theme-text-disabled',
+                        isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                      )}
+                      aria-label={COUNT_UNAVAILABLE_MESSAGE}
+                    >
+                      –
+                    </span>
+                  </Tooltip>
+                ) : (
+                  <span className={clsx(
+                    'badge font-mono',
+                    isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                  )}>
+                    {count}
+                  </span>
+                )}
               </button>
             )
           })