@skyhook-io/radar-app 1.16.2 → 1.16.3

package/src/components/helm/HelmCompareRoute.tsx

@@ -19,7 +19,6 @@ import {
 } from 'lucide-react'
 import { PaneLoader, DiffLine, hasDiffBodyChange } from '@skyhook-io/k8s-ui'
 import {
-  useCloudRole,
   useHelmHooksDiff,
   useHelmManifestDiff,
   useHelmNotesDiff,
@@ -30,7 +29,6 @@ import {
 import type { HelmHook, HelmRevision, HooksDiff, ResourceDiff } from '../../types'
 import { getHelmStatusColor, getKindBadgeColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { formatDate } from './helm-utils'
-import { RoleGatedPanel } from './RoleGatedPanel'
 import { Tooltip } from '../ui/Tooltip'
 import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
@@ -53,8 +51,6 @@ export function HelmCompareRoute() {
   const navigate = useNavigate()
   const location = useLocation()
   const [searchParams, setSearchParams] = useSearchParams()
-  const { canAtLeast } = useCloudRole()
-  const canViewSensitive = canAtLeast('member')
 
   const releaseRef = parseReleaseParam(searchParams.get('release'))
   const storageNamespace = searchParams.get('releaseStorage') || undefined
@@ -74,16 +70,15 @@ export function HelmCompareRoute() {
   const revision1 = defaultLeftRevision
   const revision2 = defaultRightRevision
   const pairReady = Boolean(helmNamespace && releaseName && revision1 > 0 && revision2 > 0 && revision1 !== revision2)
-  const diffEnabled = canViewSensitive && pairReady
 
   const left = revisions.find((r) => r.revision === revision1)
   const right = revisions.find((r) => r.revision === revision2)
 
-  const manifestDiff = useHelmManifestDiff(helmNamespace, releaseName, revision1, revision2, diffEnabled)
-  const valuesDiff = useHelmValuesDiff(helmNamespace, releaseName, revision1, revision2, false, diffEnabled)
-  const notesDiff = useHelmNotesDiff(helmNamespace, releaseName, revision1, revision2, diffEnabled)
-  const hooksDiff = useHelmHooksDiff(helmNamespace, releaseName, revision1, revision2, diffEnabled)
-  const resourceDiff = useHelmResourceDiff(helmNamespace, releaseName, revision1, revision2, diffEnabled)
+  const manifestDiff = useHelmManifestDiff(helmNamespace, releaseName, revision1, revision2, pairReady)
+  const valuesDiff = useHelmValuesDiff(helmNamespace, releaseName, revision1, revision2, false, pairReady)
+  const notesDiff = useHelmNotesDiff(helmNamespace, releaseName, revision1, revision2, pairReady)
+  const hooksDiff = useHelmHooksDiff(helmNamespace, releaseName, revision1, revision2, pairReady)
+  const resourceDiff = useHelmResourceDiff(helmNamespace, releaseName, revision1, revision2, pairReady)
 
   const updateRevision = useCallback(
     (key: 'revision1' | 'revision2', value: number) => {
@@ -214,120 +209,118 @@ export function HelmCompareRoute() {
         </div>
       </header>
 
-      <RoleGatedPanel min="member" feature="release revision comparison">
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          <div className={clsx('grid w-full grid-cols-1 gap-4 px-4 py-4', pairReady && 'xl:grid-cols-[220px_minmax(0,1fr)]')}>
-            {pairReady && (
-              <nav className="hidden xl:block">
-                <div className="sticky top-4 rounded-xl border border-theme-border bg-theme-surface p-2 shadow-theme-sm">
-                  <div className="px-2 pb-2 text-[11px] font-medium uppercase text-theme-text-tertiary">Compare</div>
-                  {[
-                    ['summary', 'Summary'],
-                    ['manifest', 'Manifest'],
-                    ['resources', 'Resources'],
-                    ['values', 'Values'],
-                    ['hooks', 'Hooks'],
-                    ['notes', 'Notes'],
-                  ].map(([id, label]) => (
-                    <a
-                      key={id}
-                      href={`#${id}`}
-                      onClick={(event) => scrollCompareSection(event, id)}
-                      className="block rounded-md px-2 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary"
-                    >
-                      {label}
-                    </a>
-                  ))}
-                </div>
-              </nav>
-            )}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className={clsx('grid w-full grid-cols-1 gap-4 px-4 py-4', pairReady && 'xl:grid-cols-[220px_minmax(0,1fr)]')}>
+          {pairReady && (
+            <nav className="hidden xl:block">
+              <div className="sticky top-4 rounded-xl border border-theme-border bg-theme-surface p-2 shadow-theme-sm">
+                <div className="px-2 pb-2 text-[11px] font-medium uppercase text-theme-text-tertiary">Compare</div>
+                {[
+                  ['summary', 'Summary'],
+                  ['manifest', 'Manifest'],
+                  ['resources', 'Resources'],
+                  ['values', 'Values'],
+                  ['hooks', 'Hooks'],
+                  ['notes', 'Notes'],
+                ].map(([id, label]) => (
+                  <a
+                    key={id}
+                    href={`#${id}`}
+                    onClick={(event) => scrollCompareSection(event, id)}
+                    className="block rounded-md px-2 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary"
+                  >
+                    {label}
+                  </a>
+                ))}
+              </div>
+            </nav>
+          )}
 
-            <main className="min-w-0 space-y-4">
-              {!pairReady ? (
-                <div className="card-inner-lg flex items-start gap-3">
-                  <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
-                  <div>
-                    <div className="text-sm font-medium text-theme-text-primary">Pick two different revisions to compare</div>
-                    <div className="mt-1 text-sm text-theme-text-secondary">Use the revision selectors above to choose a source and target revision.</div>
-                  </div>
+          <main className="min-w-0 space-y-4">
+            {!pairReady ? (
+              <div className="card-inner-lg flex items-start gap-3">
+                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
+                <div>
+                  <div className="text-sm font-medium text-theme-text-primary">Pick two different revisions to compare</div>
+                  <div className="mt-1 text-sm text-theme-text-secondary">Use the revision selectors above to choose a source and target revision.</div>
                 </div>
-              ) : (
-                <>
-                  <section id="summary" className="scroll-mt-4 space-y-4">
-                    <CompareSummary
-                      left={left}
-                      right={right}
-                      revision1={revision1}
-                      revision2={revision2}
-                      manifestDiff={manifestDiff.data?.diff}
-                      manifestLoading={manifestDiff.isLoading}
-                      manifestError={manifestDiff.error}
-                      valuesDiff={valuesDiff.data?.diff}
-                      valuesLoading={valuesDiff.isLoading}
-                      valuesError={valuesDiff.error}
-                      notesDiff={notesDiff.data?.diff}
-                      notesLoading={notesDiff.isLoading}
-                      notesError={notesDiff.error}
-                      hooksDiff={hooksDiff.data}
-                      hooksLoading={hooksDiff.isLoading}
-                      hooksError={hooksDiff.error}
-                      resourceDiff={resourceDiff.data}
-                      resourceLoading={resourceDiff.isLoading}
-                      resourceError={resourceDiff.error}
-                    />
-                  </section>
-
-                  <DiffSection
-                    id="manifest"
-                    icon={Code}
-                    title="Rendered manifest diff"
-                    description="Rendered Kubernetes YAML is the ground truth for what Helm would apply between these revisions."
-                    diff={manifestDiff.data?.diff || ''}
-                    isLoading={manifestDiff.isLoading}
-                    error={manifestDiff.error}
-                    emptyLabel="No rendered manifest changes found."
-                  />
-
-                  <ResourceInventoryDiffSection
-                    diff={resourceDiff.data}
-                    isLoading={resourceDiff.isLoading}
-                    error={resourceDiff.error}
+              </div>
+            ) : (
+              <>
+                <section id="summary" className="scroll-mt-4 space-y-4">
+                  <CompareSummary
                     left={left}
                     right={right}
                     revision1={revision1}
                     revision2={revision2}
+                    manifestDiff={manifestDiff.data?.diff}
+                    manifestLoading={manifestDiff.isLoading}
+                    manifestError={manifestDiff.error}
+                    valuesDiff={valuesDiff.data?.diff}
+                    valuesLoading={valuesDiff.isLoading}
+                    valuesError={valuesDiff.error}
+                    notesDiff={notesDiff.data?.diff}
+                    notesLoading={notesDiff.isLoading}
+                    notesError={notesDiff.error}
+                    hooksDiff={hooksDiff.data}
+                    hooksLoading={hooksDiff.isLoading}
+                    hooksError={hooksDiff.error}
+                    resourceDiff={resourceDiff.data}
+                    resourceLoading={resourceDiff.isLoading}
+                    resourceError={resourceDiff.error}
                   />
+                </section>
+
+                <DiffSection
+                  id="manifest"
+                  icon={Code}
+                  title="Rendered manifest diff"
+                  description="Rendered Kubernetes YAML is the ground truth for what Helm would apply between these revisions."
+                  diff={manifestDiff.data?.diff || ''}
+                  isLoading={manifestDiff.isLoading}
+                  error={manifestDiff.error}
+                  emptyLabel="No rendered manifest changes found."
+                />
+
+                <ResourceInventoryDiffSection
+                  diff={resourceDiff.data}
+                  isLoading={resourceDiff.isLoading}
+                  error={resourceDiff.error}
+                  left={left}
+                  right={right}
+                  revision1={revision1}
+                  revision2={revision2}
+                />
+
+                <DiffSection
+                  id="values"
+                  icon={Settings}
+                  title="User-supplied values diff"
+                  description="Only values explicitly supplied to the release are compared here; computed chart defaults can still affect the rendered manifest."
+                  diff={valuesDiff.data?.diff || ''}
+                  isLoading={valuesDiff.isLoading}
+                  error={valuesDiff.error}
+                  emptyLabel="No user-supplied value changes found."
+                />
+
+                <HooksDiffSection diff={hooksDiff.data} isLoading={hooksDiff.isLoading} error={hooksDiff.error} />
+
+                <DiffSection
+                  id="notes"
+                  icon={FileText}
+                  title="Release notes diff"
+                  description="NOTES.txt output can reveal chart-level instructions that changed without changing live Kubernetes objects."
+                  diff={notesDiff.data?.diff || ''}
+                  isLoading={notesDiff.isLoading}
+                  error={notesDiff.error}
+                  emptyLabel="No release notes changes found."
+                />
 
-                  <DiffSection
-                    id="values"
-                    icon={Settings}
-                    title="User-supplied values diff"
-                    description="Only values explicitly supplied to the release are compared here; computed chart defaults can still affect the rendered manifest."
-                    diff={valuesDiff.data?.diff || ''}
-                    isLoading={valuesDiff.isLoading}
-                    error={valuesDiff.error}
-                    emptyLabel="No user-supplied value changes found."
-                  />
-
-                  <HooksDiffSection diff={hooksDiff.data} isLoading={hooksDiff.isLoading} error={hooksDiff.error} />
-
-                  <DiffSection
-                    id="notes"
-                    icon={FileText}
-                    title="Release notes diff"
-                    description="NOTES.txt output can reveal chart-level instructions that changed without changing live Kubernetes objects."
-                    diff={notesDiff.data?.diff || ''}
-                    isLoading={notesDiff.isLoading}
-                    error={notesDiff.error}
-                    emptyLabel="No release notes changes found."
-                  />
-
-                </>
-              )}
-            </main>
-          </div>
+              </>
+            )}
+          </main>
         </div>
-      </RoleGatedPanel>
+      </div>
     </div>
   )
 }

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -18,8 +18,7 @@ import type { SelectedHelmRelease, HelmHook, ChartDependency, HelmOperation, Hel
 import { apiVersionToGroup, kindToPluralWithGroup, type NavigateToResource } from '../../utils/navigation'
 import { formatDate } from './helm-utils'
 import { getHelmStatusColor, getKindBadgeColor, getResourceStatusColor, SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
-import { useCanHelmAct, useCloudRole } from '../../api/client'
-import { RoleGatedPanel } from './RoleGatedPanel'
+import { useCanHelmAct } from '../../api/client'
 import { RevisionHistory } from './RevisionHistory'
 import { ManifestViewer } from './ManifestViewer'
 import { ValuesViewer } from './ValuesViewer'
@@ -129,14 +128,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const resizeStartWidth = useRef(DEFAULT_WIDTH)
   const targetVersionRef = useRef('')
   const editedUpgradeYamlRef = useRef('')
-  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
-  // Cloud viewers can't view release manifests / values / diffs
-  // (backend gate at requireCloudRole('member')). Skip the queries
-  // when the role would 403 — saves a round-trip and avoids a
-  // transient error state under the role-gated panel.
-  const { canAtLeast } = useCloudRole()
-  const canViewSensitive = canAtLeast('member')
   const helmNamespace = release.storageNamespace || release.namespace
+  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct(helmNamespace)
 
   const { data: releaseDetail, isLoading, error: releaseError, refetch: refetchRelease } = useHelmRelease(
     helmNamespace,
@@ -149,7 +142,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     helmNamespace,
     release.name,
     selectedRevision,
-    canViewSensitive,
   )
 
   // Fetch values
@@ -157,7 +149,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     helmNamespace,
     release.name,
     showAllValues,
-    canViewSensitive,
+    true,
     selectedRevision,
   )
   const {
@@ -168,7 +160,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     helmNamespace,
     release.name,
     false,
-    canViewSensitive && showUpgradeConfirm && adjustValues,
+    showUpgradeConfirm && adjustValues,
   )
 
   // Lazy check for upgrade availability
@@ -714,7 +706,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               releaseNamespace={releaseDetail.namespace}
               managedByFluxHelmRelease={releaseDetail.managedByFluxHelmRelease}
               hookDiagnostics={releaseDetail.hookDiagnostics}
-              canCompare={canViewSensitive}
               onCompare={handleCompareRevisions}
               onNavigateToResource={onNavigateToResource}
             />
@@ -732,32 +723,28 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               />
             )}
             {activeTab === 'manifest' && (
-              <RoleGatedPanel min="member" feature="release manifests">
-                <ManifestViewer
-                  manifest={manifest || ''}
-                  isLoading={manifestLoading}
-                  revision={selectedRevision}
-                  onCopy={(text) => copyToClipboard(text, 'manifest')}
-                  copied={copied === 'manifest'}
-                />
-              </RoleGatedPanel>
+              <ManifestViewer
+                manifest={manifest || ''}
+                isLoading={manifestLoading}
+                revision={selectedRevision}
+                onCopy={(text) => copyToClipboard(text, 'manifest')}
+                copied={copied === 'manifest'}
+              />
             )}
             {activeTab === 'values' && (
-              <RoleGatedPanel min="member" feature="release values">
-                <ValuesViewer
-                  values={values}
-                  isLoading={valuesLoading}
-                  showAllValues={showAllValues}
-                  onToggleAllValues={setShowAllValues}
-                  onCopy={(text) => copyToClipboard(text, 'values')}
-                  copied={copied === 'values'}
-                  namespace={helmNamespace}
-                  name={release.name}
-                  revision={selectedRevision}
-                  currentRevision={releaseDetail.revision}
-                  onApplySuccess={() => refetch()}
-                />
-              </RoleGatedPanel>
+              <ValuesViewer
+                values={values}
+                isLoading={valuesLoading}
+                showAllValues={showAllValues}
+                onToggleAllValues={setShowAllValues}
+                onCopy={(text) => copyToClipboard(text, 'values')}
+                copied={copied === 'values'}
+                namespace={helmNamespace}
+                name={release.name}
+                revision={selectedRevision}
+                currentRevision={releaseDetail.revision}
+                onApplySuccess={() => refetch()}
+              />
             )}
             {activeTab === 'resources' && (
               <OwnedResources
@@ -899,7 +886,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
             )}
           </div>
         )}
-        {upgradeProgress.length === 0 && canHelmWrite && canViewSensitive && (
+        {upgradeProgress.length === 0 && canHelmWrite && (
           <div className="mt-3 border-t border-theme-border pt-3">
             <Tooltip content="Edit the user-supplied Helm values that Radar will pass to this upgrade.">
               <button
@@ -1067,7 +1054,6 @@ function HelmOperationBanner({
   releaseNamespace,
   managedByFluxHelmRelease,
   hookDiagnostics,
-  canCompare,
   onCompare,
   onNavigateToResource,
 }: {
@@ -1076,7 +1062,6 @@ function HelmOperationBanner({
   releaseNamespace: string
   managedByFluxHelmRelease?: string
   hookDiagnostics?: HookDiagnostic[]
-  canCompare?: boolean
   onCompare?: (rev1: number, rev2: number) => void
   onNavigateToResource?: NavigateToResource
 }) {
@@ -1147,7 +1132,6 @@ function HelmOperationBanner({
           <OperationInsightSignals
             insight={operationInsight}
             releaseNamespace={releaseNamespace}
-            canCompare={Boolean(canCompare)}
             onCompare={onCompare}
             onNavigateToResource={onNavigateToResource}
           />
@@ -1166,13 +1150,11 @@ function HelmOperationBanner({
 function OperationInsightSignals({
   insight,
   releaseNamespace,
-  canCompare,
   onCompare,
   onNavigateToResource,
 }: {
   insight?: HelmOperationInsight
   releaseNamespace: string
-  canCompare: boolean
   onCompare?: (rev1: number, rev2: number) => void
   onNavigateToResource?: NavigateToResource
 }) {
@@ -1181,7 +1163,7 @@ function OperationInsightSignals({
   const relatedCount = primaryResource
     ? Math.max(0, (insight?.signalCount ?? 0) - 1)
     : insight?.relatedResources?.length ?? 0
-  const showCompare = Boolean(compare && canCompare && onCompare)
+  const showCompare = Boolean(compare && onCompare)
   if (!primaryResource && !showCompare) {
     return null
   }

package/src/components/helm/InstallWizard.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { X, Package, ChevronRight, ChevronLeft, Play, Loader2, AlertTriangle, CheckCircle, User, BookOpen, Link as LinkIcon, Star, BadgeCheck, Shield, Globe, Building2, Plus, Minus, Terminal } from 'lucide-react'
-import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
+import { PaneLoader, Input, useDebouncedValue } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import yaml from 'yaml'
 import { createPatch } from 'diff'
@@ -66,7 +66,6 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
   const progressEndRef = useRef<HTMLDivElement>(null)
 
   const queryClient = useQueryClient()
-  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
 
   // Choose the right data based on source
   const isLocal = source === 'local'
@@ -209,6 +208,10 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
   )
   const releaseNameError = releaseNameValidation.valid ? null : releaseNameValidation.error
   const namespaceError = namespaceValidation.valid ? null : namespaceValidation.error
+  // Checked in the namespace being installed into, once it's a valid name.
+  // Debounced: each new namespace is a capabilities round-trip of several SARs.
+  const helmActNamespace = useDebouncedValue(namespaceValidation.valid ? namespace.trim() : undefined, 300)
+  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct(helmActNamespace)
   const canProceedFromInfo = releaseNameValidation.valid && namespaceValidation.valid
   const canInstall = canProceedFromInfo && !yamlError
 

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -2,7 +2,7 @@ import { useState, useId } from 'react'
 import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
 import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo, useCapabilities } from '../../api/client'
+import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo, useCapabilities, useCloudRole } from '../../api/client'
 import { OperatorManagedNotice } from '../settings/OperatorManagedNotice'
 import { Input } from '@skyhook-io/k8s-ui'
 import type { UpgradeInfo } from '../../types'
@@ -58,7 +58,10 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
   const removeSource = useRemoveOCISource()
   const { data: capabilities } = useCapabilities()
   const operatorManaged = capabilities?.configManagement === 'operator'
-  const canEdit = capabilities != null && !operatorManaged
+  // Chart sources are shared configuration that every user's upgrades resolve
+  // against, so in Radar Cloud only owners change them (the server enforces it).
+  const ownerOnly = !useCloudRole().canAtLeast('owner')
+  const canEdit = capabilities != null && !operatorManaged && !ownerOnly
 
   // In-cluster Radar has no `helm registry login` store (the pod's HELM_CONFIG_HOME
   // points at an empty /tmp), so private registries can't authenticate — only
@@ -102,6 +105,11 @@ export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue,
 
       <div className="p-4 space-y-4">
         {operatorManaged && <OperatorManagedNotice helmValue="helm.ociSources" />}
+        {!operatorManaged && ownerOnly && (
+          <p className="text-sm text-theme-text-secondary">
+            Only organization owners can add or remove chart sources.
+          </p>
+        )}
         {sourceIssueCopy && (
           <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-sm">
             <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-theme-text-secondary" />

package/src/components/helm/ValuesViewer.tsx

@@ -46,7 +46,7 @@ export function ValuesViewer({
 
   const previewMutation = useHelmPreviewValues()
   const applyMutation = useHelmApplyValues()
-  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
+  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct(namespace)
   const isHistoricalRevision = typeof revision === 'number' && typeof currentRevision === 'number' && revision !== currentRevision
 
   const canEdit = Boolean(namespace && name) && canHelmWrite && !isHistoricalRevision

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -1,6 +1,7 @@
 import { ResourceDetailDrawer as BaseResourceDetailDrawer } from '@skyhook-io/k8s-ui'
 import type { SelectedResource } from '../../types'
 import { WorkloadView } from '../workload/WorkloadView'
+import { CNPGDrawerTrailBack } from '../cnpg/CNPGDrawerTrail'
 
 interface ResourceDetailDrawerProps {
   resource: SelectedResource
@@ -31,6 +32,9 @@ export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {
   return (
     <BaseResourceDetailDrawer {...props}>
       {({ resource, expanded, active, initialTab, onClose, onExpand, onExpandIntent, onCancelExpandIntent, onBack, onNavigateToResource, onCollapseToDrawer }) => (
+        <div className="flex h-full min-h-0 flex-col">
+        {!expanded && <CNPGDrawerTrailBack resource={resource} />}
+        <div className="min-h-0 flex-1">
         <WorkloadView
           kind={resource.kind}
           namespace={resource.namespace}
@@ -47,6 +51,8 @@ export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {
           onNavigateToResource={onNavigateToResource}
           onCollapseToDrawer={onCollapseToDrawer}
         />
+        </div>
+        </div>
       )}
     </BaseResourceDetailDrawer>
   )

package/src/components/resources/ResourcesView.tsx

@@ -10,6 +10,8 @@ import { useAPIResources } from '../../api/apiResources'
 import { useConnection } from '../../context/ConnectionContext'
 import { initNavigationMap, getSecretStoreProviderType } from '@skyhook-io/k8s-ui'
 import { usePinnedKinds } from '../../hooks/useFavorites'
+import { useResourceCounts } from '../../hooks/useResourceCounts'
+import { useCNPGSidebarWorkspace } from '../cnpg/useCNPGSidebarWorkspace'
 import { useOpenLogs, useOpenWorkloadLogs } from '../dock'
 import {
   canBulkRestartKind,
@@ -26,13 +28,6 @@ import { apiVersionToGroup, kindToPluralWithGroup, type NavigateToResource } fro
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 
-interface ResourceCountsResponse {
-  counts: Record<string, number>
-  forbidden?: string[]
-  reasons?: Record<string, string>
-  unavailable?: string[]
-}
-
 interface ResourcesViewProps {
   namespaces: string[]
   selectedResource?: SelectedResource | null
@@ -114,6 +109,8 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     if (apiResources) initNavigationMap(apiResources)
   }, [apiResources])
 
+  const cnpgSidebarWorkspace = useCNPGSidebarWorkspace({ apiResources, namespaces })
+
   // Track the selected kind from the k8s-ui component
   const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(null)
   const workloadWrites = namespaces.length === 0
@@ -126,37 +123,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
 
   // Lightweight resource counts for sidebar badges (~2KB instead of ~608MB)
   const namespacesParam = namespaces.join(',')
-  const { data: countsData, isError: countsIsError } = useQuery({
-    queryKey: ['resource-counts', namespacesParam],
-    queryFn: async () => {
-      const params = new URLSearchParams()
-      if (namespaces.length > 0) params.set('namespaces', namespacesParam)
-      const startedAt = performance.now()
-      debugNamespaceLog('resources:counts-fetch-start', { namespaces, params: params.toString() })
-      try {
-        return await fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
-      } finally {
-        debugNamespaceLog('resources:counts-fetch-end', {
-          namespaces,
-          params: params.toString(),
-          durationMs: Math.round(performance.now() - startedAt),
-        })
-      }
-    },
-    staleTime: 10000,
-    // SSE invalidation isn't running while connecting, and mid-sync counts
-    // are what unlatch guarded kinds as their informers finish — poll fast
-    // during the shell, settle to the safety net once connected.
-    refetchInterval: connection.state === 'connecting' ? 3000 : 60000,
-    // During the first seconds of the progressive shell the endpoint 503s
-    // (cluster_connecting) until the mid-sync cache handle exists; keep the
-    // query pending rather than parking it in error state, which would
-    // unlatch the large-list guard at the connected flip.
-    retry: (failureCount: number, error: Error) =>
-      isStillLoadingError(error) ? true : failureCount < 3,
-    retryDelay: (failureCount: number, error: Error) =>
-      isStillLoadingError(error) ? 2000 : Math.min(1000 * 2 ** failureCount, 30000),
-  })
+  const { data: countsData, isError: countsIsError } = useResourceCounts(namespaces)
 
   // Determine if selected kind is a CRD (only CRDs should send ?group= to backend)
   const isSelectedCrd = useMemo(() => {
@@ -440,6 +407,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       connectionState={connection.state === 'connecting' && connection.syncStatus ? 'syncing' : connection.state}
       largeListGuard={largeListGuard}
       onSelectedKindChange={setSelectedKind}
+      sidebarCategoryWorkspaces={cnpgSidebarWorkspace}
       topPodMetrics={topPodMetrics}
       topNodeMetrics={topNodeMetrics}
       certExpiry={certExpiry}