@skyhook-io/k8s-ui 1.16.1 → 1.16.3

package/src/components/logs/LogsViewer.tsx

@@ -28,8 +28,10 @@ export interface LogsViewerProps {
   createStream?: (params: Omit<LogsFetchParams, 'previous'>) => EventSource
   /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
   overrideDownload?: (content: string, mime: string, filename: string) => void
-  /** Force dark mode on the logs container (default: true) */
+  /** Pin the logs container to dark (true) or light (false) and hide the toggle */
   forceDark?: boolean
+  /** Palette used until the user toggles it, e.g. the app theme (default: true) */
+  defaultDark?: boolean
   /**
    * Open the stream automatically on mount (and on container switch) instead of
    * loading a static snapshot. The user can still Stop, and a manual Stop is not
@@ -47,6 +49,7 @@ export function LogsViewer({
   createStream,
   overrideDownload,
   forceDark,
+  defaultDark,
   autoStream = false,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
@@ -190,6 +193,7 @@ export function LogsViewer({
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
+      defaultDark={defaultDark}
     />
   )
 }

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -53,17 +53,25 @@ export interface WorkloadLogsViewerProps {
   createStream?: (params: WorkloadLogsFetchParams) => EventSource
   /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
   overrideDownload?: (content: string, mime: string, filename: string) => void
-  /** Force dark mode on the logs container (default: true) */
+  /** Pin the logs container to dark (true) or light (false) and hide the toggle */
   forceDark?: boolean
+  /** Palette used until the user toggles it, e.g. the app theme (default: true) */
+  defaultDark?: boolean
   /**
    * Open the stream automatically on mount (and on container switch) instead of
    * loading a static snapshot. The user can still Stop, and a manual Stop is not
    * re-armed. Requires `createStream`. Default: false.
    */
   autoStream?: boolean
+  /** Pods selected when the pod list first loads; all pods when empty or none match. */
+  initialPods?: string[]
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, autoStream = false }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods }: WorkloadLogsViewerProps) {
+  const initialSelection = (names: string[]) => {
+    const wanted = names.filter((n) => initialPods?.includes(n))
+    return new Set(wanted.length > 0 ? wanted : names)
+  }
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -127,7 +135,9 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       const previousPods = previousSnapshotPods.current
       const nextPods = resultPods.map(p => p.name)
       previousSnapshotPods.current = nextPods
-      setSelectedPods(selected => previousPods === null || previousPods.every(pod => selected.has(pod))
+      setSelectedPods(selected => previousPods === null
+        ? initialSelection(nextPods)
+        : previousPods.every(pod => selected.has(pod))
         ? new Set(nextPods)
         : new Set(nextPods.filter(pod => selected.has(pod))))
 
@@ -192,7 +202,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             setEmptyMessage(data.emptyMessage || null)
             setEmptyCommand(data.command || null)
             setSelectedPods(prev => (
-              prev.size === 0 ? new Set(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
+              prev.size === 0 ? initialSelection(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
             ))
           }
         },
@@ -203,6 +213,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
               content: data.content || '',
               container: data.container || '',
               pod: data.pod || '',
+              sourceLabel: data.sourceLabel,
               podColorIndex: podColorIndexRef.current.get(data.pod || ''),
             })
           }
@@ -400,6 +411,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       emptyCommand={emptyCommand}
       errorMessage={entries.length === 0 ? fetchError || streamError : null}
       forceDark={forceDark}
+      defaultDark={defaultDark}
     /></div></div>
   )
 }

package/src/components/logs/useLogBuffer.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { detectLogLevel } from './useLogBuffer'
+
+describe('detectLogLevel with CloudNativePG records', () => {
+  it('uses the nested PostgreSQL severity over the instance manager level', () => {
+    const line = (sev: string) => JSON.stringify({ level: 'info', logger: 'postgres', msg: 'record', record: { error_severity: sev, message: 'x' } })
+    expect(detectLogLevel(line('ERROR'))).toBe('error')
+    expect(detectLogLevel(line('FATAL'))).toBe('error')
+    expect(detectLogLevel(line('WARNING'))).toBe('warn')
+    expect(detectLogLevel(line('LOG'))).toBe('info')
+    expect(detectLogLevel(line('DEBUG'))).toBe('debug')
+  })
+  it('ignores a record that is not a PostgreSQL one', () => {
+    expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'request failed', record: { error_severity: 20 } }))).toBe('error')
+    expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'x', record: { error_severity: 'minor' } }))).toBe('error')
+  })
+})

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

@@ -105,3 +105,79 @@ describe('ResourcesSidebar count visibility', () => {
     expect(html).toContain('HorizontalPodAutoscaler')
   })
 })
+
+describe('ResourcesSidebar category workspaces', () => {
+  const cnpgCluster: APIResource = {
+    group: 'postgresql.cnpg.io',
+    version: 'v1',
+    kind: 'Cluster',
+    name: 'clusters',
+    namespaced: true,
+    isCrd: true,
+    verbs: ['list'],
+  }
+  const objectStore: APIResource = {
+    group: 'barmancloud.cnpg.io',
+    version: 'v1',
+    kind: 'ObjectStore',
+    name: 'objectstores',
+    namespaced: true,
+    isCrd: true,
+    verbs: ['list'],
+  }
+
+  it('renders destinations above the kinds, with the active object nested and no kind selected', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[cnpgCluster, objectStore]}
+        resourceCounts={{ 'postgresql.cnpg.io/Cluster': 2, 'barmancloud.cnpg.io/ObjectStore': 1 }}
+        categoryWorkspaces={{
+          CloudNativePG: {
+            destinations: [
+              { id: 'overview', label: 'Overview', count: 3, countTitle: '3 clusters need attention', active: true, child: { label: 'pg-orders' }, onSelect: () => {} },
+            ],
+            defaultKindsCollapsed: true,
+            scopeNote: 'Counts for namespace payments',
+          },
+        }}
+      />
+    )
+    expect(html).toContain('Workspace')
+    expect(html).toContain('Overview')
+    expect(html).toContain('pg-orders')
+    expect(html).toContain('Counts for namespace payments')
+    expect(html).toContain('Resource kinds')
+    expect(html).toMatch(/aria-expanded="false"[^>]*>(?:(?!<\/button>).)*Resource kinds/)
+    expect(html).not.toContain('selection-strong selection-text">Pod')
+  })
+
+  it('keeps a workspace category visible when it has no resources', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[cnpgCluster]}
+        resourceCounts={{ 'postgresql.cnpg.io/Cluster': 0 }}
+        categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Overview', onSelect: () => {} }] } }}
+      />
+    )
+    expect(html).toContain('CloudNativePG')
+    expect(html).toContain('Overview')
+  })
+
+  it('labels API groups when a workspace category spans several', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={{ name: 'clusters', kind: 'Cluster', group: 'postgresql.cnpg.io' }}
+        onSelectedKindChange={() => {}}
+        apiResources={[cnpgCluster, objectStore]}
+        resourceCounts={{ 'postgresql.cnpg.io/Cluster': 2, 'barmancloud.cnpg.io/ObjectStore': 1 }}
+        categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Overview', onSelect: () => {} }], defaultKindsCollapsed: true } }}
+      />
+    )
+    expect(html).toContain('postgresql.cnpg.io')
+    expect(html).toContain('barmancloud.cnpg.io')
+  })
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef, type ComponentType } from 'react'
 import {
   Search,
   Eye,
@@ -29,6 +29,28 @@ export interface PinnedItem {
   group: string
 }
 
+/** A task destination shown inside a category, above its exact kinds. */
+export interface SidebarCategoryDestination {
+  id: string
+  label: string
+  icon?: ComponentType<{ className?: string }>
+  /** Problem count. `undefined` renders no badge; `null` renders the unknown dash. */
+  count?: number | null
+  countTitle?: string
+  active?: boolean
+  /** The object currently open under this destination, nested beneath it. */
+  child?: { label: string; title?: string }
+  onSelect: () => void
+}
+
+export interface SidebarCategoryWorkspace {
+  destinations: SidebarCategoryDestination[]
+  /** Kinds start collapsed under a "Resource kinds" disclosure until the user opens them. */
+  defaultKindsCollapsed?: boolean
+  /** Explains what the destination counts are scoped to. */
+  scopeNote?: string
+}
+
 export interface ResourcesSidebarProps {
   selectedKind: SelectedKindInfo | null
   onSelectedKindChange: (kind: SelectedKindInfo) => void
@@ -48,10 +70,15 @@ export interface ResourcesSidebarProps {
   /** Called when a kind is selected via keyboard (Enter in the filter). Parent uses this
    *  to move focus to the next UI level (e.g., the table search input). */
   onKindNavigated?: () => void
+  /** Task destinations keyed by category name (e.g. "CloudNativePG"). A category
+   *  with a workspace stays visible even when it has no resources. */
+  categoryWorkspaces?: Record<string, SidebarCategoryWorkspace>
 }
 
 // Persisted across remounts so collapsed categories survive tab switches
 let persistedExpandedCategories: Set<string> | null = null
+// Per-category "Resource kinds" disclosure, once the user has toggled it.
+const persistedKindsOpen = new Map<string, boolean>()
 const COUNT_UNAVAILABLE_MESSAGE = 'Count unavailable. Open to view resources.'
 
 // Fallback resource types when API resources aren't loaded yet
@@ -102,10 +129,11 @@ interface ResourceTypeButtonProps {
   isPinned?: boolean
   onTogglePin?: () => void
   onClick: () => void
+  indent?: boolean
 }
 
 const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps>(
-  function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick }, ref) {
+  function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick, indent }, ref) {
     const Icon = getResourceIcon(resource.kind, resource.group)
     return (
       <button
@@ -113,6 +141,7 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
         onClick={onClick}
         className={clsx(
           'w-full flex items-center gap-2 px-2 xl:px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
+          indent && 'pl-5 xl:pl-6',
           isSelected
             ? 'selection-strong selection-text'
             : isHighlighted
@@ -193,6 +222,7 @@ export function ResourcesSidebar({
   onNavigate,
   basePath,
   onKindNavigated,
+  categoryWorkspaces,
 }: ResourcesSidebarProps) {
   // Wraps kind selection to also navigate when basePath/onNavigate are provided
   const selectKind = (kind: SelectedKindInfo) => {
@@ -229,8 +259,35 @@ export function ResourcesSidebar({
     }
   }, [])
 
-  // Effective selected kind — fall back to a safe default
-  const effectiveSelectedKind = selectedKind ?? { name: 'pods', kind: 'Pod', group: '' }
+  const activeDestinationCategory = useMemo(() => {
+    for (const [name, ws] of Object.entries(categoryWorkspaces ?? {})) {
+      if (ws.destinations.some(d => d.active)) return name
+    }
+    return null
+  }, [categoryWorkspaces])
+
+  // Effective selected kind — fall back to a safe default. While a workspace
+  // destination is active no kind is selected.
+  const effectiveSelectedKind = activeDestinationCategory
+    ? { name: '', kind: '', group: '\u0000' }
+    : selectedKind ?? { name: 'pods', kind: 'Pod', group: '' }
+
+  const [kindsOpenOverrides, setKindsOpenOverrides] = useState<Map<string, boolean>>(() => new Map(persistedKindsOpen))
+  const kindsOpen = (categoryName: string) => {
+    const ws = categoryWorkspaces?.[categoryName]
+    if (!ws) return true
+    const override = kindsOpenOverrides.get(categoryName)
+    if (override !== undefined) return override
+    const selectedHere = !activeDestinationCategory && categories?.find(c => c.name === categoryName)?.resources.some(
+      r => r.name === effectiveSelectedKind.name && r.group === effectiveSelectedKind.group,
+    )
+    return selectedHere || !ws.defaultKindsCollapsed
+  }
+  const toggleKinds = (categoryName: string) => {
+    const next = !kindsOpen(categoryName)
+    persistedKindsOpen.set(categoryName, next)
+    setKindsOpenOverrides(prev => new Map(prev).set(categoryName, next))
+  }
 
   // Categorize resources for sidebar
   const categories = useMemo(() => {
@@ -254,6 +311,12 @@ export function ResourcesSidebar({
     }
   }, [categories, effectiveSelectedKind.kind, effectiveSelectedKind.name]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (activeDestinationCategory && !expandedCategories.has(activeDestinationCategory)) {
+      setExpandedCategories(prev => new Set([...prev, activeDestinationCategory]))
+    }
+  }, [activeDestinationCategory]) // eslint-disable-line react-hooks/exhaustive-deps
+
   // Derive counts from resourceCounts prop
   const resourcesToCount = useMemo(() => {
     if (categories) {
@@ -333,8 +396,11 @@ export function ResourcesSidebar({
       return { ...category, total, visibleResources }
     })
 
-    // Sort: categories with resources first, empty ones at bottom
+    // Sort: the category whose workspace is open first, then categories with
+    // resources, empty ones at bottom
     const sorted = withTotals.sort((a, b) => {
+      if (a.name === activeDestinationCategory) return -1
+      if (b.name === activeDestinationCategory) return 1
       if (a.total === 0 && b.total > 0) return 1
       if (a.total > 0 && b.total === 0) return -1
       return 0
@@ -342,13 +408,13 @@ export function ResourcesSidebar({
 
     // Filter out empty groups unless they have visible resources or showEmptyKinds is true.
     const visibleCategories = sorted.filter(category => {
-      const shouldShow = category.total > 0 || category.visibleResources.length > 0 || showEmptyKinds
+      const shouldShow = category.total > 0 || category.visibleResources.length > 0 || showEmptyKinds || !!categoryWorkspaces?.[category.name]
       if (!shouldShow) totalHiddenGroups++
       return shouldShow
     })
 
     return { sortedCategories: visibleCategories, hiddenKindsCount: totalHiddenKinds, hiddenGroupsCount: totalHiddenGroups }
-  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group])
+  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group, categoryWorkspaces, activeDestinationCategory])
 
   // Filter sidebar categories/kinds by the kind search term
   const filteredCategories = useMemo(() => {
@@ -400,7 +466,7 @@ export function ResourcesSidebar({
     }
     if (filteredCategories) {
       for (const cat of filteredCategories) {
-        if (effectiveExpandedCategories.has(cat.name)) {
+        if (effectiveExpandedCategories.has(cat.name) && (isKindFiltering || kindsOpen(cat.name))) {
           for (const r of cat.visibleResources) {
             kinds.push({ name: r.name, kind: r.kind, group: r.group })
           }
@@ -408,7 +474,7 @@ export function ResourcesSidebar({
       }
     }
     return kinds
-  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories])
+  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories, kindsOpenOverrides, categoryWorkspaces, activeDestinationCategory]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
   // Reset highlight when the filter or kind list changes
@@ -550,6 +616,8 @@ export function ResourcesSidebar({
           filteredCategories.map((category) => {
             const isExpanded = effectiveExpandedCategories.has(category.name)
             const rawGroupTitle = rawCRDGroupTitle(category.resources)
+            const workspace = categoryWorkspaces?.[category.name]
+            const showKinds = isKindFiltering || kindsOpen(category.name)
             return (
               <div key={category.name} className="mb-2">
                 <button
@@ -567,8 +635,17 @@ export function ResourcesSidebar({
                   )}
                 </button>
                 <Collapse open={isExpanded} id={disclosurePanelId(categoryPanelBase, category.name)}>
+                  {workspace && !isKindFiltering && (
+                    <WorkspaceDestinations
+                      workspace={workspace}
+                      kindsOpen={showKinds}
+                      onToggleKinds={() => toggleKinds(category.name)}
+                      kindsPanelId={disclosurePanelId(categoryPanelBase, `${category.name}-kinds`)}
+                    />
+                  )}
+                  <Collapse open={showKinds} id={disclosurePanelId(categoryPanelBase, `${category.name}-kinds`)}>
                   <div className="space-y-0.5">
-                    {category.visibleResources.map((resource) => {
+                    {(workspace ? sortByGroup(category.visibleResources) : category.visibleResources).map((resource, index, list) => {
                       const resourceIsPinned = isPinned(resource.name, resource.group)
                       const isResourceSelected =
                         (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
@@ -576,9 +653,13 @@ export function ResourcesSidebar({
                       // If the resource is pinned, let the Favorites section own the highlight
                       const showSelected = isResourceSelected && !resourceIsPinned
                       const highlighted = isKindHighlighted(resource.name, resource.group)
+                      const groupLabel = workspace ? groupHeaderBefore(list, index) : null
                       return (
+                      <div key={`${resource.group}/${resource.name}`}>
+                      {groupLabel && (
+                        <div className="pl-6 pr-2 pt-1.5 pb-0.5 text-[10.5px] font-mono text-theme-text-tertiary truncate" title={groupLabel}>{groupLabel}</div>
+                      )}
                       <ResourceTypeButton
-                        key={resource.name}
                         ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
                         resource={resource}
                         count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
@@ -588,10 +669,13 @@ export function ResourcesSidebar({
                         isPinned={resourceIsPinned}
                         onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
                         onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
+                        indent={!!workspace}
                       />
+                      </div>
                       )
                     })}
                   </div>
+                  </Collapse>
                 </Collapse>
               </div>
             )
@@ -673,3 +757,91 @@ export function ResourcesSidebar({
     </div>
   )
 }
+
+function sortByGroup(resources: APIResource[]): APIResource[] {
+  const size = new Map<string, number>()
+  for (const r of resources) size.set(r.group, (size.get(r.group) ?? 0) + 1)
+  return [...resources].sort((a, b) =>
+    a.group === b.group
+      ? a.kind.localeCompare(b.kind)
+      : (size.get(b.group) ?? 0) - (size.get(a.group) ?? 0) || a.group.localeCompare(b.group),
+  )
+}
+
+function groupHeaderBefore(resources: APIResource[], index: number): string | null {
+  const groups = new Set(resources.map(r => r.group))
+  if (groups.size < 2) return null
+  const group = resources[index]?.group
+  if (index > 0 && resources[index - 1]?.group === group) return null
+  return group || 'core'
+}
+
+function WorkspaceDestinations({
+  workspace,
+  kindsOpen,
+  onToggleKinds,
+  kindsPanelId,
+}: {
+  workspace: SidebarCategoryWorkspace
+  kindsOpen: boolean
+  onToggleKinds: () => void
+  kindsPanelId: string
+}) {
+  return (
+    <div className="space-y-0.5">
+      <div className="pl-5 pr-2 pt-0.5 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Workspace</div>
+      {workspace.destinations.map((d) => {
+        const Icon = d.icon
+        return (
+          <div key={d.id}>
+            <button
+              onClick={d.onSelect}
+              aria-current={d.active && !d.child ? 'page' : undefined}
+              className={clsx(
+                'w-full flex items-center gap-2 pl-5 xl:pl-6 pr-2 xl:pr-3 py-1.5 rounded-lg text-sm transition-colors min-w-0',
+                d.active && !d.child
+                  ? 'selection-strong selection-text'
+                  : d.active
+                    ? 'text-theme-text-primary font-medium hover:bg-theme-elevated'
+                    : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary',
+              )}
+            >
+              {Icon && <Icon className="w-4 h-4 shrink-0" />}
+              <span className="flex-1 text-left truncate">{d.label}</span>
+              {d.count === null ? (
+                <Tooltip content={d.countTitle ?? COUNT_UNAVAILABLE_MESSAGE} position="left">
+                  <span className="text-xs py-0.5 rounded text-center font-mono w-8 bg-theme-elevated text-theme-text-disabled">–</span>
+                </Tooltip>
+              ) : d.count !== undefined && d.count > 0 ? (
+                <Tooltip content={d.countTitle ?? `${d.count}`} position="left">
+                  <span className="text-xs py-0.5 rounded text-center font-mono w-8 status-degraded">{d.count}</span>
+                </Tooltip>
+              ) : null}
+            </button>
+            {d.child && (
+              <div
+                className="ml-10 xl:ml-11 mr-1 my-0.5 pl-2 pr-2 py-1 rounded-md text-xs font-medium truncate selection-strong selection-text border-l-2 border-skyhook-500"
+                title={d.child.title ?? d.child.label}
+                aria-current="page"
+              >
+                {d.child.label}
+              </div>
+            )}
+          </div>
+        )
+      })}
+      {workspace.scopeNote && (
+        <div className="pl-6 pr-2 pt-0.5 text-[11px] text-theme-text-tertiary">{workspace.scopeNote}</div>
+      )}
+      <button
+        aria-expanded={kindsOpen}
+        aria-controls={kindsPanelId}
+        onClick={onToggleKinds}
+        className="w-full flex items-center gap-1.5 pl-5 pr-2 pt-2 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary hover:text-theme-text-secondary"
+      >
+        <CollapseChevron open={kindsOpen} className="w-3 h-3" />
+        <span>Resource kinds</span>
+      </button>
+    </div>
+  )
+}

package/src/components/resources/ResourcesView.tsx

@@ -205,7 +205,7 @@ import { CalicoInfraCell, CalicoPolicyCell } from './renderers/calico-cells'
 import { isCalicoPolicyResource, isCoreNetworkPolicyKind } from './resource-utils-calico'
 import { useRegisterShortcut, useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { ResourcesSidebar } from './ResourcesSidebar'
-import type { SelectedKindInfo } from './ResourcesSidebar'
+import type { SelectedKindInfo, SidebarCategoryWorkspace } from './ResourcesSidebar'
 import { CompareTray, togglePick, pickIndex, refToParam, SIDE_TONES, type CompareTrayPick, type NamespacedRef } from '../compare'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 
@@ -3411,6 +3411,8 @@ interface ResourcesViewProps {
   onSelectedKindChange?: (kind: { name: string; kind: string; group: string }) => void
   /** When true, the sidebar is not rendered. Useful when a standalone ResourcesSidebar is used externally. */
   hideSidebar?: boolean
+  /** Task destinations rendered inside sidebar categories (see ResourcesSidebar). */
+  sidebarCategoryWorkspaces?: Record<string, SidebarCategoryWorkspace>
   /** Callback when the [+] create button is clicked. Receives the currently selected kind info. */
   onCreateResource?: (kind: { name: string; kind: string; group: string } | null) => void
   /** Default kind when the URL does not include one. */
@@ -3653,6 +3655,7 @@ export function ResourcesView({
   onOpenWorkloadLogs,
   onSelectedKindChange,
   hideSidebar = false,
+  sidebarCategoryWorkspaces,
   onCreateResource,
   defaultKind = DEFAULT_KIND_INFO,
   extraLeadingColumns,
@@ -5867,6 +5870,7 @@ export function ResourcesView({
           pinned={pinned}
           togglePin={togglePin}
           isPinned={isPinned}
+          categoryWorkspaces={sidebarCategoryWorkspaces}
           onKindNavigated={() => {
             // After selecting a kind via keyboard, move focus to the table search
             // so the user can immediately filter within the selected kind.

package/src/components/resources/index.ts

@@ -54,7 +54,7 @@ export * from './resource-utils-velero'
 export { ResourcesView, ResourcesViewDataContext, hasCuratedColumns } from './ResourcesView'
 export type { ResourceQueryResult, ExtraColumn, LargeListGuardState } from './ResourcesView'
 export { ResourcesSidebar } from './ResourcesSidebar'
-export type { ResourcesSidebarProps, SelectedKindInfo, PinnedItem } from './ResourcesSidebar'
+export type { ResourcesSidebarProps, SelectedKindInfo, PinnedItem, SidebarCategoryDestination, SidebarCategoryWorkspace } from './ResourcesSidebar'
 export {
   sanitizePrinterTable,
   printerTableKey,

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

@@ -97,3 +97,28 @@ describe('a window that has stopped advancing', () => {
     expect(html).not.toContain('WAL archiving has stopped')
   })
 })
+
+describe('ObjectStore failing backups', () => {
+  const failing = {
+    ...store,
+    status: { serverRecoveryWindow: { 'pg-main': { firstRecoverabilityPoint: '2026-08-01T00:00:00Z', lastSuccessfulBackupTime: '2026-08-10T00:00:00Z', lastFailedBackupTime: '2026-08-11T00:00:00Z' } } },
+  }
+  it('does not say recovery still reaches the newest WAL when archiving has stopped too', () => {
+    const html = renderToString(<CNPGObjectStoreRenderer data={failing} archivingFailing={new Set(['pg-main'])} onNavigate={nav} />)
+    expect(html).toContain('WAL archiving has stopped for pg-main')
+    expect(html).not.toContain('can still replay archived WAL')
+    expect(html).toContain('WAL archiving has stopped on the cluster behind this server')
+  })
+  it('keeps recovery replaying archived WAL when only base backups fail', () => {
+    const html = renderToString(<CNPGObjectStoreRenderer data={failing} archivingFailing={new Set()} onNavigate={nav} />)
+    expect(html).toContain('can still replay archived WAL written since')
+    expect(html).not.toContain('retention')
+  })
+  it('claims nothing about recovery when no successful backup is recorded', () => {
+    const never = { ...store, status: { serverRecoveryWindow: { 'pg-main': { lastFailedBackupTime: '2026-08-11T00:00:00Z' } } } }
+    const html = renderToString(<CNPGObjectStoreRenderer data={never} archivingFailing={new Set()} onNavigate={nav} />)
+    expect(html).toContain('No successful base backup is recorded for pg-main')
+    expect(html).not.toContain('nothing to restore')
+    expect(html).not.toContain('replay')
+  })
+})

package/src/components/resources/renderers/CNPGObjectStoreRenderer.tsx

@@ -44,6 +44,8 @@ export function CNPGObjectStoreRenderer({
   const credentialSecret = getCNPGObjectStoreCredentialSecret(data)
   const cfg = data?.spec?.configuration ?? {}
   const failing = windows.filter((w) => w.failingSinceLastSuccess)
+  const archiveStopped = failing.filter((w) => archivingFailing?.has(w.server)).map((w) => w.server)
+  const neverSucceeded = failing.filter((w) => !w.lastSuccessfulBackupTime).map((w) => w.server)
 
   return (
     <>
@@ -51,7 +53,13 @@ export function CNPGObjectStoreRenderer({
         <AlertBanner
           variant="error"
           title={`Backups failing for ${failing.length === 1 ? failing[0].server : `${failing.length} servers`}`}
-          message="The most recent backup attempt failed after the last success, so the recoverable range has stopped moving forward."
+          message={
+            neverSucceeded.length > 0
+              ? `No successful base backup is recorded for ${neverSucceeded.join(', ')}, so recoverability is not established.`
+              : archiveStopped.length > 0
+                ? `A base backup failure is recorded after the last recorded success, and WAL archiving has stopped for ${archiveStopped.join(', ')}: nothing written since the last archived WAL can be recovered.`
+                : 'A base backup failure is recorded after the last recorded success. While WAL archiving works, recovery from that backup can still replay archived WAL written since.'
+          }
         />
       )}
 
@@ -60,7 +68,7 @@ export function CNPGObjectStoreRenderer({
           // Configured but empty is NOT the same as healthy. Saying nothing here
           // would read as "backups are fine" on a store holding nothing.
           <div className="text-sm text-theme-text-secondary">
-            No server has reported a backup yet, so there is nothing to restore from this store.
+            No server has recorded a backup in this store's status, so recoverability is not established.
           </div>
         ) : (
           <div className="space-y-2">
@@ -194,10 +202,10 @@ function RecoveryWindowRow({
               ? 'Not advancing'
               : w.lastSuccessfulBackupTime
                 ? 'Recoverable'
-                : 'No backups yet'}
+                : 'No backup recorded'}
         </span>
       </div>
-      {stalled && !w.failingSinceLastSuccess && (
+      {stalled && (
         <div className="text-xs text-warning-text mb-1">
           {/* The timestamps below are real and still describe the last backup that
               worked. What they no longer describe is a window still growing, and
@@ -217,7 +225,7 @@ function RecoveryWindowRow({
         {w.lastSuccessfulBackupTime ? (
           <Property label="Last Successful Backup" value={<RecoveryTime at={w.lastSuccessfulBackupTime} />} />
         ) : (
-          <Property label="Last Successful Backup" value="never" />
+          <Property label="Last Successful Backup" value="none recorded" />
         )}
         {w.lastFailedBackupTime && (
           <Property label="Last Failed Attempt" value={<RecoveryTime at={w.lastFailedBackupTime} />} />
@@ -226,8 +234,9 @@ function RecoveryWindowRow({
       </PropertyList>
       {w.failingSinceLastSuccess && (
         <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
-          Every backup since the last success has failed. The oldest restorable point will still age
-          out under the retention policy, so the window is shrinking from both ends.
+          {w.lastSuccessfulBackupTime
+            ? 'A backup failure is recorded after the last recorded success. Restoring from that success replays the WAL archived since, which takes longer the longer this lasts.'
+            : 'No successful backup is recorded for this server, so recoverability is not established.'}
         </div>
       )}
     </div>

package/src/components/resources/resource-utils-cnpg-objectstore.test.ts

@@ -77,7 +77,7 @@ describe('getCNPGObjectStoreStatus', () => {
   it('is unknown, not healthy, when no server has reported', () => {
     const s = getCNPGObjectStoreStatus(store({}))
     expect(s.level).toBe('unknown')
-    expect(s.text).toBe('No backups yet')
+    expect(s.text).toBe('No backup recorded')
   })
 
   it('is unhealthy when any server is failing since its last success', () => {